Spaces:
Running
Running
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Lovable - Build Apps & Websites with AI</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💜</text></svg>"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></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-slate-900 text-slate-100 antialiased"> | |
| <!-- Theme Toggle --> | |
| <button id="theme-toggle" class="fixed bottom-6 right-6 z-50 p-3 rounded-full bg-slate-800/80 backdrop-blur-md border border-slate-700 hover:bg-pink-600 transition-all duration-300 shadow-lg"> | |
| <i data-feather="sun" class="w-5 h-5 block dark-mode-icon"></i> | |
| <i data-feather="moon" class="w-5 h-5 hidden light-mode-icon"></i> | |
| </button> | |
| <!-- Navbar Component --> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section --> | |
| <section class="relative min-h-screen flex items-center justify-center overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-pink-500/10 via-transparent to-teal-500/10"></div> | |
| <div class="absolute -top-20 -left-20 w-96 h-96 bg-pink-500/20 rounded-full blur-3xl animate-pulse"></div> | |
| <div class="absolute -bottom-20 -right-20 w-96 h-96 bg-teal-500/20 rounded-full blur-3xl animate-pulse animation-delay-2000"></div> | |
| <div class="container mx-auto px-4 relative z-10"> | |
| <div class="text-center max-w-4xl mx-auto"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 tracking-tight"> | |
| Build something <span class="gradient-text">Lovable</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-slate-300 mb-10 leading-relaxed"> | |
| Create apps and websites by chatting with AI. Turn your ideas into reality in minutes, not weeks. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center items-center"> | |
| <button class="cta-primary px-8 py-4 rounded-full font-semibold text-lg shadow-lg hover:shadow-pink-500/25 transition-all duration-300 transform hover:scale-105 flex items-center gap-2"> | |
| <i data-feather="sparkles" class="w-5 h-5"></i> | |
| Get started free | |
| </button> | |
| <button class="cta-secondary px-8 py-4 rounded-full font-semibold text-lg border border-slate-600 hover:border-slate-400 transition-all duration-300 flex items-center gap-2"> | |
| <i data-feather="play" class="w-5 h-5"></i> | |
| See how it works | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> | |
| <i data-feather="chevron-down" class="w-8 h-8 text-slate-400"></i> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-20 relative"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |