|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Modern Redesign Studio</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#3B82F6', |
|
|
secondary: '#6B7280' |
|
|
}, |
|
|
animation: { |
|
|
'float': 'float 6s ease-in-out infinite', |
|
|
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-900"> |
|
|
|
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
|
|
|
<section class="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-blue-50 via-white to-indigo-50"> |
|
|
<div class="absolute inset-0 bg-grid-pattern opacity-5"></div> |
|
|
<div class="container mx-auto px-6 relative z-10"> |
|
|
<div class="text-center"> |
|
|
<h1 class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent animate-pulse-slow"> |
|
|
Modern Redesign Studio |
|
|
</h1> |
|
|
<p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto"> |
|
|
Transform your digital presence with stunning, responsive designs that captivate and convert. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center"> |
|
|
<button class="px-8 py-4 bg-blue-600 text-white rounded-full font-semibold hover:bg-blue-700 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl"> |
|
|
Start Your Project |
|
|
</button> |
|
|
<button class="px-8 py-4 border-2 border-blue-600 text-blue-600 rounded-full font-semibold hover:bg-blue-600 hover:text-white transform hover:scale-105 transition-all duration-300"> |
|
|
View Portfolio |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-20 flex justify-center space-x-8 animate-float"> |
|
|
<div class="w-20 h-20 bg-blue-200 rounded-full blur-xl"></div> |
|
|
<div class="w-32 h-32 bg-indigo-200 rounded-full blur-2xl"></div> |
|
|
<div class="w-24 h-24 bg-purple-200 rounded-full blur-xl"></div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl font-bold mb-4">Why Choose Us</h2> |
|
|
<p class="text-xl text-gray-600">We deliver excellence in every pixel</p> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="group p-8 rounded-2xl bg-gradient-to-br from-blue-50 to-indigo-50 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2"> |
|
|
<div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mb-6 group-hover:rotate-12 transition-transform"> |
|
|
<i data-feather="zap" class="text-white w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3">Lightning Fast</h3> |
|
|
<p class="text-gray-600">Optimized performance that keeps your users engaged and satisfied.</p> |
|
|
</div> |
|
|
<div class="group p-8 rounded-2xl bg-gradient-to-br from-purple-50 to-pink-50 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2"> |
|
|
<div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mb-6 group-hover:rotate-12 transition-transform"> |
|
|
<i data-feather="smartphone" class="text-white w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3">Fully Responsive</h3> |
|
|
<p class="text-gray-600">Perfect on every device, from mobile phones to desktop screens.</p> |
|
|
</div> |
|
|
<div class="group p-8 rounded-2xl bg-gradient-to-br from-green-50 to-emerald-50 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2"> |
|
|
<div class="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center mb-6 group-hover:rotate-12 transition-transform"> |
|
|
<i data-feather="award" class="text-white w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3">Award Winning</h3> |
|
|
<p class="text-gray-600">Recognized for exceptional design and user experience.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-50"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl font-bold mb-4">Recent Projects</h2> |
|
|
<p class="text-xl text-gray-600">Explore our latest design masterpieces</p> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
<div class="group relative overflow-hidden rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300"> |
|
|
<img src="http://static.photos/technology/640x360/123" alt="Project 1" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end"> |
|
|
<div class="p-6 text-white"> |
|
|
<h3 class="text-xl font-bold mb-2">Tech Dashboard</h3> |
|
|
<p class="text-sm">Modern analytics platform</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="group relative overflow-hidden rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300"> |
|
|
<img src="http://static.photos/office/640x360/456" alt="Project 2" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end"> |
|
|
<div class="p-6 text-white"> |
|
|
<h3 class="text-xl font-bold mb-2">Corporate Website</h3> |
|
|
<p class="text-sm">Professional business design</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="group relative overflow-hidden rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300"> |
|
|
<img src="http://static.photos/food/640x360/789" alt="Project 3" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end"> |
|
|
<div class="p-6 text-white"> |
|
|
<h3 class="text-xl font-bold mb-2">Food Delivery App</h3> |
|
|
<p class="text-sm">Delicious user experience</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl font-bold mb-4">Client Testimonials</h2> |
|
|
<p class="text-xl text-gray-600">What our clients say about us</p> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
<div class="p-8 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="http://static.photos/people/100x100/111" alt="Client 1" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Sarah Johnson</h4> |
|
|
<p class="text-sm text-gray-600">CEO, TechStart</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700">"Absolutely transformed our online presence. The design is stunning and our conversion rates have skyrocketed!"</p> |
|
|
<div class="flex mt-4 text-yellow-500"> |
|
|
<i data-feather="star" class="w-5 h-5 fill-current"></i> |
|
|
<i data-feather="star" class="w-5 h-5 fill-current"></i> |
|
|
<i data-feather="star" class="w-5 h-5 fill-current"></i> |
|
|
<i data-feather="star" class="w-5 h-5 fill-current"></i> |
|
|
<i data-feather="star" class="w-5 h-5 fill-current"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-8 bg-gradient-to-br from-purple-50 to-pink-50 rounded-2xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="http://static.photos/people/100x100/222" alt="Client 2" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Mike Chen</h4> |
|
|
<p class="text-sm text-gray-600">Founder, InnovateCo</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700">"Professional, creative, and always delivers on time. Our new website has exceeded all expectations!"</p> |
|
|
<div class="flex mt-4 text-yellow-500"> |
|
|
<i data-feather="star" class="w-5 h-5 fill-current"></i> |
|
|
<i data-feather="star" class="w-5 h-5 fill-current"></i> |
|
|
<i data-feather="star" class="w-5 h-5 fill-current"></i> |
|
|
<i data-feather="star" class="w-5 h-5 fill-current"></i> |
|
|
<i data-feather="star" class="w-5 h-5 fill-current"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-8 bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="http://static.photos/people/100x100/333" alt="Client 3" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Emily Davis</h4> |
|
|
<p class="text-sm text-gray-600">Marketing Director, BrandUp</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700">"The attention to detail and user experience is unmatched. Highly recommend for any serious business!"</p> |
|
|
<div class="flex mt-4 text-yellow-500"> |
|
|
<i data-feather="star" class="w-5 h-5 fill-current"></i> |
|
|
<i data-feather="star" class="w-5 h-5 fill-current"></i> |
|
|
<i data-feather="star" class="w-5 h-5 fill-current"></i> |
|
|
<i data-feather="star" class="w-5 h-5 fill-current"></i> |
|
|
<i data-feather="star" class="w-5 h-5 fill-current"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gradient-to-br from-blue-600 to-indigo-600"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center text-white"> |
|
|
<h2 class="text-4xl font-bold mb-4">Ready to Get Started?</h2> |
|
|
<p class="text-xl mb-8">Let's create something amazing together</p> |
|
|
<button class="px-12 py-4 bg-white text-blue-600 rounded-full font-semibold hover:bg-gray-100 transform hover:scale-105 transition-all duration-300 shadow-xl"> |
|
|
Contact Us Today |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<custom-footer></custom-footer> |
|
|
|
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
<script src="script.js"></script> |
|
|
<script>feather.replace();</script> |
|
|
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
|
|
</body> |
|
|
</html> |
