Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GlamNail Studio | AI-Powered Nail Art</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <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> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap'); | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #ffeef8 50%, #f3e5ff 100%); | |
| } | |
| .nail-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| } | |
| .nail-card: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); | |
| } | |
| .design-preview { | |
| background-image: radial-gradient(circle at 50% 50%, #f3e5ff 0%, #f5f7fa 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="bg-white border-b border-gray-100 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"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="droplet" class="h-6 w-6 text-pink-500"></i> | |
| <span class="ml-2 text-xl font-bold text-pink-600">GlamNail</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#" class="text-pink-600 hover:text-pink-800 font-medium">Home</a> | |
| <a href="#" class="text-gray-600 hover:text-pink-600 font-medium">Gallery</a> | |
| <a href="#" class="text-gray-600 hover:text-pink-600 font-medium">AI Studio</a> | |
| <a href="#" class="text-gray-600 hover:text-pink-600 font-medium">Tutorials</a> | |
| <a href="#" class="text-gray-600 hover:text-pink-600 font-medium">Book Now</a> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-full text-sm font-medium transition duration-300"> | |
| Try AI Designer | |
| </button> | |
| <button class="md:hidden ml-4"> | |
| <i data-feather="menu" class="h-6 w-6 text-gray-600"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient pt-32 pb-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="space-y-6"> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 font-serif leading-tight"> | |
| Revolutionize Your Nail Art with <span class="text-pink-600">AI Magic</span> | |
| </h1> | |
| <p class="text-lg text-gray-600"> | |
| Our AI-powered nail studio creates personalized designs just for you. | |
| Get inspired, visualize before you commit, and discover your perfect style. | |
| </p> | |
| <div class="flex space-x-4 pt-4"> | |
| <button class="bg-pink-600 hover:bg-pink-700 text-white px-6 py-3 rounded-full font-medium transition duration-300 flex items-center"> | |
| <i data-feather="sparkles" class="mr-2"></i> Try Now | |
| </button> | |
| <button class="border border-pink-600 text-pink-600 hover:bg-pink-50 px-6 py-3 rounded-full font-medium transition duration-300 flex items-center"> | |
| <i data-feather="play-circle" class="mr-2"></i> Watch Demo | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="design-preview rounded-3xl p-6 shadow-lg"> | |
| <div class="grid grid-cols-5 gap-2"> | |
| <div class="aspect-square bg-white rounded-lg shadow-sm flex items-center justify-center"> | |
| <div class="h-3/4 w-3/4 rounded-full bg-gradient-to-br from-pink-200 to-purple-200"></div> | |
| </div> | |
| <div class="aspect-square bg-white rounded-lg shadow-sm flex items-center justify-center"> | |
| <div class="h-3/4 w-3/4 rounded-full bg-gradient-to-br from-blue-200 to-teal-200"></div> | |
| </div> | |
| <div class="aspect-square bg-white rounded-lg shadow-sm flex items-center justify-center"> | |
| <div class="h-3/4 w-3/4 rounded-full bg-gradient-to-br from-yellow-200 to-orange-200"></div> | |
| </div> | |
| <div class="aspect-square bg-white rounded-lg shadow-sm flex items-center justify-center"> | |
| <div class="h-3/4 w-3/4 rounded-full bg-gradient-to-br from-green-200 to-emerald-200"></div> | |
| </div> | |
| <div class="aspect-square bg-white rounded-lg shadow-sm flex items-center justify-center"> | |
| <div class="h-3/4 w-3/4 rounded-full bg-gradient-to-br from-purple-200 to-fuchsia-200"></div> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-center"> | |
| <div class="inline-block px-4 py-2 bg-white rounded-full shadow-sm"> | |
| <span class="text-sm font-medium text-pink-600">AI is generating your design...</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-full shadow-lg"> | |
| <i data-feather="cpu" class="h-8 w-8 text-pink-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Trending Designs --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-900 font-serif">Trending AI Designs</h2> | |
| <p class="mt-2 text-gray-600 max-w-2xl mx-auto"> | |
| Explore our most popular AI-generated nail art designs loved by thousands | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6"> | |
| <!-- Design Card 1 --> | |
| <div class="nail-card bg-white rounded-xl overflow-hidden"> | |
| <div class="aspect-square bg-gradient-to-br from-pink-100 to-purple-100 flex items-center justify-center"> | |
| <div class="w-1/2 h-1/2 rounded-full bg-pink-500 opacity-20"></div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-medium text-gray-900">Floral Fantasy</h3> | |
| <div class="flex items-center mt-1"> | |
| <div class="flex -space-x-1"> | |
| <img class="w-5 h-5 rounded-full border border-white" src="http://static.photos/people/200x200/1" alt=""> | |
| <img class="w-5 h-5 rounded-full border border-white" src="http://static.photos/people/200x200/2" alt=""> | |
| <img class="w-5 h-5 rounded-full border border-white" src="http://static.photos/people/200x200/3" alt=""> | |
| </div> | |
| <span class="ml-2 text-sm text-gray-500">1.2k saves</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Design Card 2 --> | |
| <div class="nail-card bg-white rounded-xl overflow-hidden"> | |
| <div class="aspect-square bg-gradient-to-br from-blue-100 to-cyan-100 flex items-center justify-center"> | |
| <div class="w-1/2 h-1/2 rounded-full bg-blue-500 opacity-20"></div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-medium text-gray-900">Ocean Breeze</h3> | |
| <div class="flex items-center mt-1"> | |
| <div class="flex -space-x-1"> | |
| <img class="w-5 h-5 rounded-full border border-white" src="http://static.photos/people/200x200/4" alt=""> | |
| <img class="w-5 h-5 rounded-full border border-white" src="http://static.photos/people/200x200/5" alt=""> | |
| </div> | |
| <span class="ml-2 text-sm text-gray-500">856 saves</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Design Card 3 --> | |
| <div class="nail-card bg-white rounded-xl overflow-hidden"> | |
| <div class="aspect-square bg-gradient-to-br from-yellow-100 to-amber-100 flex items-center justify-center"> | |
| <div class="w-1/2 h-1/2 rounded-full bg-yellow-500 opacity-20"></div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-medium text-gray-900">Golden Hour</h3> | |
| <div class="flex items-center mt-1"> | |
| <div class="flex -space-x-1"> | |
| <img class="w-5 h-5 rounded-full border border-white" src="http://static.photos/people/200x200/6" alt=""> | |
| <img class="w-5 h-5 rounded-full border border-white" src="http://static.photos/people/200x200/7" alt=""> | |
| <img class="w-5 h-5 rounded-full border border-white" src="http://static.photos/people/200x200/8" alt=""> | |
| </div> | |
| <span class="ml-2 text-sm text-gray-500">2.3k saves</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Design Card 4 --> | |
| <div class="nail-card bg-white rounded-xl overflow-hidden"> | |
| <div class="aspect-square bg-gradient-to-br from-green-100 to-emerald-100 flex items-center justify-center"> | |
| <div class="w-1/2 h-1/2 rounded-full bg-green-500 opacity-20"></div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-medium text-gray-900">Jungle Vibes</h3> | |
| <div class="flex items-center mt-1"> | |
| <div class="flex -space-x-1"> | |
| <img class="w-5 h-5 rounded-full border border-white" src="http://static.photos/people/200x200/9" alt=""> | |
| <img class="w-5 h-5 rounded-full border border-white" src="http://static.photos/people/200x200/10" alt=""> | |
| </div> | |
| <span class="ml-2 text-sm text-gray-500">723 saves</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Design Card 5 --> | |
| <div class="nail-card bg-white rounded-xl overflow-hidden"> | |
| <div class="aspect-square bg-gradient-to-br from-purple-100 to-fuchsia-100 flex items-center justify-center"> | |
| <div class="w-1/2 h-1/2 rounded-full bg-purple-500 opacity-20"></div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-medium text-gray-900">Midnight Sparkle</h3> | |
| <div class="flex items-center mt-1"> | |
| <div class="flex -space-x-1"> | |
| <img class="w-5 h-5 rounded-full border border-white" src="http://static.photos/people/200x200/11" alt=""> | |
| <img class="w-5 h-5 rounded-full border border-white" src="http://static.photos/people/200x200/12" alt=""> | |
| </div> | |
| <span class="ml-2 text-sm text-gray-500">945 saves</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="border border-pink-600 text-pink-600 hover:bg-pink-50 px-6 py-3 rounded-full font-medium transition duration-300"> | |
| View All Designs | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-900 font-serif">How Our AI Studio Works</h2> | |
| <p class="mt-2 text-gray-600 max-w-2xl mx-auto"> | |
| Get your perfect nail design in just 3 simple steps | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Step 1 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="w-14 h-14 rounded-full bg-pink-100 flex items-center justify-center mb-4"> | |
| <span class="text-xl font-bold text-pink-600">1</span> | |
| </div> | |
| <h3 class="text-xl font-medium text-gray-900 mb-2">Upload Your Photo</h3> | |
| <p class="text-gray-600"> | |
| Take or upload a photo of your hands to visualize designs on your actual nails. | |
| </p> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="w-14 h-14 rounded-full bg-pink-100 flex items-center justify-center mb-4"> | |
| <span class="text-xl font-bold text-pink-600">2</span> | |
| </div> | |
| <h3 class="text-xl font-medium text-gray-900 mb-2">Choose Your Style</h3> | |
| <p class="text-gray-600"> | |
| Select from trending styles or let our AI suggest designs based on your preferences. | |
| </p> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="w-14 h-14 rounded-full bg-pink-100 flex items-center justify-center mb-4"> | |
| <span class="text-xl font-bold text-pink-600">3</span> | |
| </div> | |
| <h3 class="text-xl font-medium text-gray-900 mb-2">Customize & Save</h3> | |
| <p class="text-gray-600"> | |
| Fine-tune colors and elements, then save or book an appointment with your design. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-12 bg-white rounded-xl overflow-hidden shadow-sm"> | |
| <div class="grid md:grid-cols-2"> | |
| <div class="p-8 md:p-12 flex flex-col justify-center"> | |
| <h3 class="text-2xl font-bold text-gray-900 font-serif mb-4">Try Our Virtual Try-On</h3> | |
| <p class="text-gray-600 mb-6"> | |
| See how different designs would look on your hands before committing. Our augmented reality technology gives you a realistic preview. | |
| </p> | |
| <button class="bg-pink-600 hover:bg-pink-700 text-white px-6 py-3 rounded-full font-medium transition duration-300 w-fit"> | |
| <i data-feather="camera" class="mr-2 inline"></i> Activate Camera | |
| </button> | |
| </div> | |
| <div class="bg-gradient-to-br from-pink-50 to-purple-50 flex items-center justify-center p-8"> | |
| <div class="relative"> | |
| <img src="http://static.photos/320x240" alt="Hand model" class="rounded-lg shadow-md"> | |
| <div class="absolute -bottom-4 -right-4 bg-white p-3 rounded-full shadow-lg"> | |
| <i data-feather="maximize-2" class="h-6 w-6 text-pink-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-900 font-serif">What Our Community Says</h2> | |
| <p class="mt-2 text-gray-600 max-w-2xl mx-auto"> | |
| Join thousands of satisfied users who found their perfect nail design | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/30" alt="Sarah J." class="w-12 h-12 rounded-full"> | |
| <div class="ml-4"> | |
| <h4 class="font-medium text-gray-900">Sarah J.</h4> | |
| <div class="flex mt-1"> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "I'm obsessed! The AI suggested a design I would have never picked myself but gets me compliments every time. Game changer!" | |
| </p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/31" alt="Mia K." class="w-12 h-12 rounded-full"> | |
| <div class="ml-4"> | |
| <h4 class="font-medium text-gray-900">Mia K.</h4> | |
| <div class="flex mt-1"> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "As a nail tech, this tool saves me so much time consulting with clients. They come in knowing exactly what they want!" | |
| </p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/32" alt="Alex T." class="w-12 h-12 rounded-full"> | |
| <div class="ml-4"> | |
| <h4 class="font-medium text-gray-900">Alex T.</h4> | |
| <div class="flex mt-1"> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "The virtual try-on is spooky accurate. My nails looked exactly like the preview when I got them done professionally." | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8 bg-pink-600"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl font-bold text-white font-serif mb-4">Ready to Discover Your Perfect Nail Design?</h2> | |
| <p class="text-pink-100 mb-8 text-lg"> | |
| Join our community of nail art lovers and never struggle to choose a design again. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="bg-white text-pink-600 hover:bg-gray-100 px-6 py-3 rounded-full font-medium transition duration-300"> | |
| Try AI Designer Free | |
| </button> | |
| <button class="border border-white text-white hover:bg-pink-700 px-6 py-3 rounded-full font-medium transition duration-300"> | |
| Book Appointment | |
| </button> | |
| </div> | |
| </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"> | |
| <i data-feather="droplet" class="h-6 w-6 text-pink-500"></i> | |
| <span class="ml-2 text-xl font-bold">GlamNail</span> | |
| </div> | |
| <p class="mt-4 text-gray-400"> | |
| Revolutionizing nail art with AI technology to bring your perfect manicure to life. | |
| </p> | |
| <div class="flex space-x-4 mt-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <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="youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-medium mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">About Us</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">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Press</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-medium mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Community</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Nail Health</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-medium 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> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Licenses</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 text-sm"> | |
| © 2023 GlamNail Studio. All rights reserved. | |
| </p> | |
| <div class="mt-4 md:mt-0"> | |
| <div class="flex items-center space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Status</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Contact</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Change Region</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| feather.replace(); | |
| // Simple animation for hero section elements | |
| gsap.from("nav", {duration: 0.8, y: -50, opacity: 0, ease: "power2.out"}); | |
| gsap.from(".hero-gradient h1", {duration: 0.8, y: 30, opacity: 0, delay: 0.3, ease: "power2.out"}); | |
| gsap.from(".hero-gradient p", {duration: 0.8, y: 30, opacity: 0, delay: 0.5, ease: "power2.out"}); | |
| gsap.from(".hero-gradient button", {duration: 0.8, y: 30, opacity: 0, delay: 0.7, ease: "power2.out", stagger: 0.1}); | |
| gsap.from(".design-preview", {duration: 1, scale: 0.8, opacity: 0, delay: 0.8, ease: "elastic.out(1, 0.5)"}); | |
| </script> | |
| </body> | |
| </html> | |