Spaces:
Running
Running
File size: 8,231 Bytes
68b9246 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Launchpad</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
<!-- Header -->
<header class="bg-white shadow-sm py-4">
<div class="container mx-auto px-4 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i data-feather="box" class="text-blue-500"></i>
<h1 class="text-xl font-bold text-gray-800">React Launchpad</h1>
</div>
<nav class="hidden md:flex space-x-6">
<a href="#" class="text-gray-600 hover:text-blue-500 transition">Home</a>
<a href="#" class="text-gray-600 hover:text-blue-500 transition">Features</a>
<a href="#" class="text-gray-600 hover:text-blue-500 transition">Documentation</a>
<a href="#" class="text-gray-600 hover:text-blue-500 transition">Community</a>
</nav>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition flex items-center">
<i data-feather="download" class="mr-2"></i>
Get Started
</button>
</div>
</header>
<!-- Hero Section -->
<section class="py-16 md:py-24 flex-grow">
<div class="container mx-auto px-4 text-center">
<h1 class="text-4xl md:text-6xl font-bold text-gray-800 mb-6">
Build Modern Web Apps <span class="text-blue-500">Faster</span>
</h1>
<p class="text-xl text-gray-600 max-w-2xl mx-auto mb-10">
React Launchpad provides everything you need to start building scalable React applications with best practices.
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button class="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-lg text-lg transition flex items-center justify-center">
<i data-feather="play-circle" class="mr-2"></i>
Quick Start
</button>
<button class="border border-gray-300 hover:border-gray-400 text-gray-700 px-8 py-3 rounded-lg text-lg transition flex items-center justify-center">
<i data-feather="book" class="mr-2"></i>
Documentation
</button>
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-16 bg-gray-100">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Why Choose React Launchpad?</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
<i data-feather="zap" class="text-blue-500"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Lightning Fast</h3>
<p class="text-gray-600">Optimized build process and pre-configured settings for maximum performance.</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
<i data-feather="tool" class="text-green-500"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Developer Tools</h3>
<p class="text-gray-600">Pre-installed development tools and extensions for enhanced productivity.</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
<i data-feather="layers" class="text-purple-500"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Modular Architecture</h3>
<p class="text-gray-600">Clean, scalable structure that grows with your application needs.</p>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="py-16">
<div class="container mx-auto px-4">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div>
<div class="text-3xl font-bold text-blue-500 mb-2">10K+</div>
<div class="text-gray-600">Downloads</div>
</div>
<div>
<div class="text-3xl font-bold text-green-500 mb-2">98%</div>
<div class="text-gray-600">Satisfaction</div>
</div>
<div>
<div class="text-3xl font-bold text-purple-500 mb-2">50+</div>
<div class="text-gray-600">Components</div>
</div>
<div>
<div class="text-3xl font-bold text-yellow-500 mb-2">24/7</div>
<div class="text-gray-600">Support</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-12 mt-auto">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">React Launchpad</h3>
<p class="text-gray-400">The fastest way to build modern React applications with best practices.</p>
</div>
<div>
<h4 class="font-semibold mb-4">Resources</h4>
<ul class="space-y-2 text-gray-400">
<li><a href="#" class="hover:text-white transition">Documentation</a></li>
<li><a href="#" class="hover:text-white transition">Tutorials</a></li>
<li><a href="#" class="hover:text-white transition">Blog</a></li>
<li><a href="#" class="hover:text-white transition">Community</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">Product</h4>
<ul class="space-y-2 text-gray-400">
<li><a href="#" class="hover:text-white transition">Features</a></li>
<li><a href="#" class="hover:text-white transition">Templates</a></li>
<li><a href="#" class="hover:text-white transition">Pricing</a></li>
<li><a href="#" class="hover:text-white transition">Releases</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">Connect</h4>
<ul class="space-y-2 text-gray-400">
<li><a href="#" class="hover:text-white transition">GitHub</a></li>
<li><a href="#" class="hover:text-white transition">Twitter</a></li>
<li><a href="#" class="hover:text-white transition">Discord</a></li>
<li><a href="#" class="hover:text-white transition">Contact</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
<p>© 2023 React Launchpad. All rights reserved.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
<script>feather.replace();</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |