Spaces:
Running
Running
File size: 13,386 Bytes
7430c07 42a96f8 | 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 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern UI Design</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
.hero-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>
</head>
<body class="font-sans antialiased text-gray-800">
<!-- Navigation -->
<nav class="bg-white shadow-sm fixed w-full z-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<i data-feather="hexagon" class="text-indigo-600 mr-2"></i>
<span class="text-xl font-semibold text-gray-900">ModernUI</span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Home</a>
<a href="#" class="text-gray-500 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Features</a>
<a href="#" class="text-gray-500 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Pricing</a>
<a href="#" class="text-gray-500 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Contact</a>
<button class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 transition duration-300">
Get Started
</button>
</div>
<div class="md:hidden flex items-center">
<button class="text-gray-500 hover:text-gray-900 focus:outline-none">
<i data-feather="menu"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-gradient pt-32 pb-20 px-4 sm:px-6 lg:px-8 text-white">
<div class="max-w-7xl mx-auto">
<div class="md:flex items-center justify-between">
<div class="md:w-1/2 mb-10 md:mb-0" data-aos="fade-right">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Build beautiful interfaces with ease</h1>
<p class="text-xl mb-8 opacity-90">ModernUI provides everything you need to create stunning user experiences with minimal effort.</p>
<div class="flex space-x-4">
<button class="bg-white text-indigo-600 px-6 py-3 rounded-md text-lg font-medium hover:bg-gray-100 transition duration-300">
Get Started
</button>
<button class="border border-white text-white px-6 py-3 rounded-md text-lg font-medium hover:bg-white hover:bg-opacity-10 transition duration-300">
Learn More
</button>
</div>
</div>
<div class="md:w-1/2" data-aos="fade-left">
<img src="http://static.photos/technology/1024x576/42" alt="Modern UI" class="rounded-lg shadow-xl">
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-white">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16" data-aos="fade-up">
<h2 class="text-3xl font-bold text-gray-900 mb-4">Amazing Features</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">ModernUI comes packed with powerful features to help you build better interfaces faster.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-gray-50 p-8 rounded-xl card-hover" data-aos="fade-up" data-aos-delay="100">
<div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
<i data-feather="zap" class="text-indigo-600"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Fast Performance</h3>
<p class="text-gray-600">Optimized for speed and efficiency to ensure your apps run smoothly.</p>
</div>
<div class="bg-gray-50 p-8 rounded-xl card-hover" data-aos="fade-up" data-aos-delay="200">
<div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
<i data-feather="layout" class="text-indigo-600"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Responsive Design</h3>
<p class="text-gray-600">Looks great on any device, from mobile to desktop and everything in between.</p>
</div>
<div class="bg-gray-50 p-8 rounded-xl card-hover" data-aos="fade-up" data-aos-delay="300">
<div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
<i data-feather="code" class="text-indigo-600"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Clean Code</h3>
<p class="text-gray-600">Well-structured and documented code that's easy to understand and customize.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16" data-aos="fade-up">
<h2 class="text-3xl font-bold text-gray-900 mb-4">What Our Users Say</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Don't just take our word for it - hear from our satisfied customers.</p>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-white p-8 rounded-xl shadow-sm card-hover" data-aos="fade-up" data-aos-delay="100">
<div class="flex items-center mb-6">
<img src="http://static.photos/people/200x200/1" alt="User" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-semibold">Sarah Johnson</h4>
<p class="text-gray-500 text-sm">Product Designer</p>
</div>
</div>
<p class="text-gray-600">"ModernUI has completely transformed our design workflow. The components are beautifully designed and easy to implement."</p>
<div class="flex mt-4">
<i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i>
<i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i>
<i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i>
<i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i>
<i data-feather="star" class="text-yellow-400 w-4 h-4"></i>
</div>
</div>
<div class="bg-white p-8 rounded-xl shadow-sm card-hover" data-aos="fade-up" data-aos-delay="200">
<div class="flex items-center mb-6">
<img src="http://static.photos/people/200x200/2" alt="User" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-semibold">Michael Chen</h4>
<p class="text-gray-500 text-sm">Frontend Developer</p>
</div>
</div>
<p class="text-gray-600">"As a developer, I appreciate how easy it is to customize ModernUI components. It's saved us countless hours of development time."</p>
<div class="flex mt-4">
<i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i>
<i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i>
<i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i>
<i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i>
<i data-feather="star" class="text-yellow-400 w-4 h-4"></i>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-indigo-600 text-white">
<div class="max-w-7xl mx-auto text-center">
<h2 class="text-3xl font-bold mb-6" data-aos="fade-up">Ready to get started?</h2>
<p class="text-xl mb-8 max-w-3xl mx-auto opacity-90" data-aos="fade-up" data-aos-delay="100">Join thousands of satisfied customers using ModernUI to build beautiful interfaces.</p>
<button class="bg-white text-indigo-600 px-8 py-3 rounded-md text-lg font-medium hover:bg-gray-100 transition duration-300" data-aos="fade-up" data-aos-delay="200">
Get Started for Free
</button>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="grid md:grid-cols-4 gap-8">
<div>
<div class="flex items-center mb-6">
<i data-feather="hexagon" class="text-indigo-400 mr-2"></i>
<span class="text-xl font-semibold">ModernUI</span>
</div>
<p class="text-gray-400 mb-4">Build beautiful interfaces with ease.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="github"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="linkedin"></i>
</a>
</div>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Product</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Releases</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Company</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Press</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Legal</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Privacy</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Terms</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 mb-4 md:mb-0">© 2023 ModernUI. All rights reserved.</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-white">Terms of Service</a>
</div>
</div>
</div>
</footer>
<script>
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true
});
feather.replace();
</script>
</body>
</html>
|