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>Lumina - The Future of SaaS</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.0/feather.min.js"></script> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #0f172a; | |
| color: #f8fafc; | |
| overflow-x: hidden; | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #0f172a; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #334155; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #475569; | |
| } | |
| /* Gradient Text */ | |
| .text-gradient { | |
| background: linear-gradient(135deg, #60a5fa 0%, #a855f7 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| /* Glassmorphism */ | |
| .glass { | |
| background: rgba(30, 41, 59, 0.7); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| } | |
| /* Animations */ | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .animate-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes pulse-glow { | |
| 0%, 100% { box-shadow: 0 0 15px rgba(168, 85, 247, 0.2); } | |
| 50% { box-shadow: 0 0 30px rgba(168, 85, 247, 0.5); } | |
| } | |
| .glow-effect { | |
| animation: pulse-glow 3s infinite; | |
| } | |
| /* Spotlight Effect */ | |
| .spotlight-card { | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 1rem; | |
| background-color: rgba(30, 41, 59, 0.5); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| transition: transform 0.3s ease; | |
| } | |
| .spotlight-card:hover { | |
| transform: translateY(-5px); | |
| border-color: rgba(255, 255, 255, 0.2); | |
| } | |
| .spotlight-card::before { | |
| content: ""; | |
| position: absolute; | |
| height: 100%; | |
| width: 100%; | |
| top: 0; | |
| left: 0; | |
| background: radial-gradient( | |
| 800px circle at var(--mouse-x) var(--mouse-y), | |
| rgba(255, 255, 255, 0.06), | |
| transparent 40% | |
| ); | |
| opacity: 0; | |
| transition: opacity 0.5s; | |
| pointer-events: none; | |
| z-index: 1; | |
| } | |
| .spotlight-card:hover::before { | |
| opacity: 1; | |
| } | |
| /* Grid Background */ | |
| .bg-grid { | |
| background-size: 40px 40px; | |
| background-image: linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px), | |
| linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px); | |
| mask-image: linear-gradient(to bottom, black 40%, transparent 100%); | |
| } | |
| /* Toggle Switch */ | |
| .toggle-checkbox:checked { | |
| right: 0; | |
| border-color: #a855f7; | |
| } | |
| .toggle-checkbox:checked + .toggle-label { | |
| background-color: #a855f7; | |
| } | |
| </style> | |
| </head> | |
| <body class="antialiased selection:bg-purple-500 selection:text-white"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 glass transition-all duration-300" id="navbar"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-20"> | |
| <div class="flex items-center gap-2 cursor-pointer" onclick="window.scrollTo(0,0)"> | |
| <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center"> | |
| <i data-feather="zap" class="text-white w-5 h-5"></i> | |
| </div> | |
| <span class="font-bold text-xl tracking-tight">Lumina</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-8"> | |
| <a href="#features" class="hover:text-purple-400 transition-colors px-3 py-2 rounded-md text-sm font-medium">Features</a> | |
| <a href="#solutions" class="hover:text-purple-400 transition-colors px-3 py-2 rounded-md text-sm font-medium">Solutions</a> | |
| <a href="#pricing" class="hover:text-purple-400 transition-colors px-3 py-2 rounded-md text-sm font-medium">Pricing</a> | |
| <a href="#testimonials" class="hover:text-purple-400 transition-colors px-3 py-2 rounded-md text-sm font-medium">Testimonials</a> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center gap-4"> | |
| <button class="text-gray-300 hover:text-white transition-colors text-sm font-medium">Log in</button> | |
| <button class="bg-white text-slate-900 px-5 py-2.5 rounded-full font-medium text-sm hover:bg-gray-100 transition-all transform hover:scale-105 shadow-lg"> | |
| Get Started | |
| </button> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-btn"> | |
| <i data-feather="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden hidden glass border-t border-gray-800" id="mobile-menu"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#features" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Features</a> | |
| <a href="#solutions" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Solutions</a> | |
| <a href="#pricing" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Pricing</a> | |
| <a href="#testimonials" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Testimonials</a> | |
| <div class="mt-4 pt-4 border-t border-gray-800 flex flex-col gap-3"> | |
| <button class="w-full text-left text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Log in</button> | |
| <button class="w-full bg-purple-600 text-white px-5 py-3 rounded-lg font-medium text-sm hover:bg-purple-700 transition-colors">Get Started</button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden"> | |
| <div class="absolute inset-0 bg-grid z-0"></div> | |
| <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[500px] bg-purple-900/20 rounded-full blur-[120px] -z-10"></div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center"> | |
| <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-slate-800/50 border border-slate-700 mb-8 animate-float"> | |
| <span class="flex h-2 w-2 relative"> | |
| <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-purple-400 opacity-75"></span> | |
| <span class="relative inline-flex rounded-full h-2 w-2 bg-purple-500"></span> | |
| </span> | |
| <span class="text-sm font-medium text-purple-300">v2.0 is now live</span> | |
| <i data-feather="arrow-right" class="w-4 h-4 text-purple-300"></i> | |
| </div> | |
| <h1 class="text-5xl md:text-7xl font-bold tracking-tight mb-6"> | |
| Build faster with <br /> | |
| <span class="text-gradient">Intelligent Tools</span> | |
| </h1> | |
| <p class="mt-4 max-w-2xl mx-auto text-xl text-slate-400 mb-10"> | |
| Lumina provides the infrastructure, analytics, and automation you need to scale your business to the next level without the complexity. | |
| </p> | |
| <div class="flex flex-col sm:flex-row items-center justify-center gap-4"> | |
| <button class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full font-semibold text-white shadow-lg shadow-purple-500/25 hover:shadow-purple-500/40 hover:scale-105 transition-all duration-300 flex items-center justify-center gap-2"> | |
| Start Free Trial | |
| <i data-feather="arrow-right" class="w-4 h-4"></i> | |
| </button> | |
| <button class="w-full sm:w-auto px-8 py-4 bg-slate-800 hover:bg-slate-700 rounded-full font-semibold text-white border border-slate-700 transition-all duration-300 flex items-center justify-center gap-2 group"> | |
| <i data-feather="play-circle" class="w-5 h-5 text-purple-400 group-hover:text-purple-300"></i> | |
| Watch Demo | |
| </button> | |
| </div> | |
| <!-- Dashboard Preview --> | |
| <div class="mt-20 relative max-w-5xl mx-auto"> | |
| <div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl blur opacity-30"></div> | |
| <div class="relative bg-slate-900 rounded-2xl border border-slate-800 shadow-2xl overflow-hidden"> | |
| <!-- Mock Browser Header --> | |
| <div class="bg-slate-800/50 px-4 py-3 border-b border-slate-700 flex items-center gap-2"> | |
| <div class="flex gap-1.5"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="ml-4 flex-1 bg-slate-900/50 rounded-md h-6 flex items-center px-3 text-xs text-slate-500"> | |
| app.lumina.dev/analytics | |
| </div> | |
| </div> | |
| <!-- Mock Content --> | |
| <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="col-span-2 h-64 bg-slate-800/30 rounded-xl border border-slate-700/50 relative overflow-hidden group"> | |
| <!-- Animated Chart --> | |
| <div class="absolute bottom-0 left-0 right-0 h-40 flex items-end justify-between px-4 pb-4 gap-2"> | |
| <div class="w-full bg-blue-500/20 rounded-t-lg h-[40%] transition-all duration-1000 group-hover:h-[60%]"></div> | |
| <div class="w-full bg-blue-500/20 rounded-t-lg h-[70%] transition-all duration-1000 delay-75 group-hover:h-[50%]"></div> | |
| <div class="w-full bg-purple-500/20 rounded-t-lg h-[50%] transition-all duration-1000 delay-100 group-hover:h-[80%]"></div> | |
| <div class="w-full bg-purple-500/20 rounded-t-lg h-[85%] transition-all duration-1000 delay-150 group-hover:h-[90%]"></div> | |
| <div class="w-full bg-blue-500/20 rounded-t-lg h-[60%] transition-all duration-1000 delay-200 group-hover:h-[40%]"></div> | |
| <div class="w-full bg-purple-500/20 rounded-t-lg h-[90%] transition-all duration-1000 delay-300 group-hover:h-[70%]"></div> | |
| </div> | |
| <div class="absolute top-4 left-4"> | |
| <div class="text-slate-400 text-sm">Total Revenue</div> | |
| <div class="text-2xl font-bold text-white">$124,592</div> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="h-20 bg-slate-800/30 rounded-xl border border-slate-700/50 p-4 flex items-center gap-4"> | |
| <div class="w-10 h-10 rounded-full bg-green-500/20 flex items-center justify-center text-green-400"> | |
| <i data-feather="trending-up" class="w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <div class="text-slate-400 text-xs">Growth</div> | |
| <div class="text-lg font-bold text-white">+24.5%</div> | |
| </div> | |
| </div> | |
| <div class="h-20 bg-slate-800/30 rounded-xl border border-slate-700/50 p-4 flex items-center gap-4"> | |
| <div class="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400"> | |
| <i data-feather="users" class="w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <div class="text-slate-400 text-xs">Active Users</div> | |
| <div class="text-lg font-bold text-white">8,432</div> | |
| </div> | |
| </div> | |
| <div class="h-20 bg-slate-800/30 rounded-xl border border-slate-700/50 p-4 flex items-center gap-4"> | |
| <div class="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center text-purple-400"> | |
| <i data-feather="activity" class="w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <div class="text-slate-400 text-xs">Uptime</div> | |
| <div class="text-lg font-bold text-white">99.99%</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Grid --> | |
| <section id="features" class="py-24 bg-slate-900 relative"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-purple-400 font-semibold tracking-wide uppercase text-sm">Features</h2> | |
| <h3 class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> | |
| Everything you need to scale | |
| </h3> | |
| <p class="mt-4 max-w-2xl text-xl text-slate-400 mx-auto"> | |
| Powerful, self-serve product and growth analytics to help you convert, engage, and retain more users. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="cards-container"> | |
| <!-- Feature 1 --> | |
| <div class="spotlight-card p-8"> | |
| <div class="w-12 h-12 bg-blue-500/10 rounded-lg flex items-center justify-center mb-4 text-blue-400"> | |
| <i data-feather="zap" class="w-6 h-6"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-white mb-2">Lightning Fast</h4> | |
| <p class="text-slate-400">Optimized for speed with global CDN distribution ensuring low latency for all your users.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="spotlight-card p-8"> | |
| <div class="w-12 h-12 bg-purple-500/10 rounded-lg flex items-center justify-center mb-4 text-purple-400"> | |
| <i data-feather="shield" class="w-6 h-6"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-white mb-2">Bank-grade Security</h4> | |
| <p class="text-slate-400">Enterprise-ready security with SOC2 compliance, end-to-end encryption, and SSO.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="spotlight-card p-8"> | |
| <div class="w-12 h-12 bg-pink-500/10 rounded-lg flex items-center justify-center mb-4 text-pink-400"> | |
| <i data-feather="sliders" class="w-6 h-6"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-white mb-2">Customizable</h4> | |
| <p class="text-slate-400">Tailor the platform to your workflow with our extensive API and webhook support.</p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="spotlight-card p-8"> | |
| <div class="w-12 h-12 bg-green-500/10 rounded-lg flex items-center justify-center mb-4 text-green-400"> | |
| <i data-feather="pie-chart" class="w-6 h-6"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-white mb-2">Advanced Analytics</h4> | |
| <p class="text-slate-400">Real-time insights into user behavior, conversion funnels, and retention metrics.</p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="spotlight-card p-8"> | |
| <div class="w-12 h-12 bg-yellow-500/10 rounded-lg flex items-center justify-center mb-4 text-yellow-400"> | |
| <i data-feather="globe" class="w-6 h-6"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-white mb-2">Global Scale</h4> | |
| <p class="text-slate-400">Deploy to 35+ regions worldwide with a single click. Auto-scaling handles the traffic.</p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="spotlight-card p-8"> | |
| <div class="w-12 h-12 bg-cyan-500/10 rounded-lg flex items-center justify-center mb-4 text-cyan-400"> | |
| <i data-feather="code" class="w-6 h-6"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-white mb-2">Developer First</h4> | |
| <p class="text-slate-400">Built by developers, for developers. CLI tools, SDKs, and comprehensive documentation.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Interactive Pricing Section --> | |
| <section id="pricing" class="py-24 bg-slate-900 relative overflow-hidden"> | |
| <!-- Background Blobs --> | |
| <div class="absolute top-0 right-0 w-[500px] h-[500px] bg-blue-600/10 rounded-full blur-[100px] -translate-y-1/2 translate-x-1/2"></div> | |
| <div class="absolute bottom-0 left-0 w-[500px] h-[500px] bg-purple-600/10 rounded-full blur-[100px] translate-y-1/2 -translate-x-1/2"></div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-white sm:text-4xl">Simple, transparent pricing</h2> | |
| <p class="mt-4 text-lg text-slate-400">Choose the plan that's right for your business.</p> | |
| <!-- Billing Toggle --> | |
| <div class="mt-8 flex items-center justify-center gap-4"> | |
| <span class="text-sm font-medium text-slate-300" id="monthly-label">Monthly</span> | |
| <div class="relative inline-block w-12 mr-2 align-middle select-none transition duration-200 ease-in"> | |
| <input type="checkbox" name="toggle" id="billing-toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer transition-all duration-300 left-0"/> | |
| <label for="billing-toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-slate-700 cursor-pointer border border-slate-600"></label> | |
| </div> | |
| <span class="text-sm font-medium text-slate-300" id="yearly-label">Yearly <span class="text-purple-400 text-xs ml-1">(-20%)</span></span> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <!-- Starter Plan --> | |
| <div class="glass rounded-2xl p-8 flex flex-col relative border border-slate-700 hover:border-slate-600 transition-colors"> | |
| <h3 class="text-lg font-semibold text-white">Starter</h3> | |
| <p class="mt-2 text-slate-400 text-sm">Perfect for side projects.</p> | |
| <div class="mt-6 flex items-baseline"> | |
| <span class="text-4xl font-bold text-white price-amount" data-monthly="0" data-yearly="0">$0</span> | |
| <span class="ml-2 text-slate-400 billing-period">/mo</span> | |
| </div> | |
| <ul class="mt-8 space-y-4 flex-1"> | |
| <li class="flex items-center text-slate-300 text-sm"><i data-feather="check" class="w-4 h-4 text-green-400 mr-3"></i> Up to 3 projects</li> | |
| <li class="flex items-center text-slate-300 text-sm"><i data-feather="check" class="w-4 h-4 text-green-400 mr-3"></i> 1 Team member</li> | |
| <li class="flex items-center text-slate-300 text-sm"><i data-feather="check" class="w-4 h-4 text-green-400 mr-3"></i> Basic Analytics</li> | |
| </ul> | |
| <button class="mt-8 w-full py-3 px-4 bg-slate-800 hover:bg-slate-700 text-white rounded-lg font-medium transition-colors border border-slate-600"> | |
| Get Started | |
| </button> | |
| </div> | |
| <!-- Pro Plan --> | |
| <div class="glass rounded-2xl p-8 flex flex-col relative border-2 border-purple-500 shadow-2xl shadow-purple-900/20 transform md:-translate-y-4"> | |
| <div class="absolute top-0 right-0 bg-purple-600 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">POPULAR</div> | |
| <h3 class="text-lg font-semibold text-white">Pro</h3> | |
| <p class="mt-2 text-slate-400 text-sm">For growing businesses.</p> | |
| <div class="mt-6 flex items-baseline"> | |
| <span class="text-4xl font-bold text-white price-amount" data-monthly="29" data-yearly="23">$29</span> | |
| <span class="ml-2 text-slate-400 billing-period">/mo</span> | |
| </div> | |
| <ul class="mt-8 space-y-4 flex-1"> | |
| <li class="flex items-center text-slate-300 text-sm"><i data-feather="check" class="w-4 h-4 text-green-400 mr-3"></i> Unlimited projects</li> | |
| <li class="flex items-center text-slate-300 text-sm"><i data-feather="check" class="w-4 h-4 text-green-400 mr-3"></i> Up to 10 members</li> | |
| <li class="flex items-center text-slate-300 text-sm"><i data-feather="check" class="w-4 h-4 text-green-400 mr-3"></i> Advanced Analytics</li> | |
| <li class="flex items-center text-slate-300 text-sm"><i data-feather="check" class="w-4 h-4 text-green-400 mr-3"></i> Priority Support</li> | |
| </ul> | |
| <button class="mt-8 w-full py-3 px-4 bg-purple-600 hover:bg-purple-700 text-white rounded-lg font-medium transition-colors shadow-lg shadow-purple-600/25"> | |
| Get Started | |
| </button> | |
| </div> | |
| <!-- Enterprise Plan --> | |
| <div class="glass rounded-2xl p-8 flex flex-col relative border border-slate-700 hover:border-slate-600 transition-colors"> | |
| <h3 class="text-lg font-semibold text-white">Enterprise</h3> | |
| <p class="mt-2 text-slate-400 text-sm">Dedicated support & SLA.</p> | |
| <div class="mt-6 flex items-baseline"> | |
| <span class="text-4xl font-bold text-white price-amount" data-monthly="99" data-yearly="79">$99</span> | |
| <span class="ml-2 text-slate-400 billing-period">/mo</span> | |
| </div> | |
| <ul class="mt-8 space-y-4 flex-1"> | |
| <li class="flex items-center text-slate-300 text-sm"><i data-feather="check" class="w-4 h-4 text-green-400 mr-3"></i> Everything in Pro</li> | |
| <li class="flex items-center text-slate-300 text-sm"><i data-feather="check" class="w-4 h-4 text-green-400 mr-3"></i> Unlimited members</li> | |
| <li class="flex items-center text-slate-300 text-sm"><i data-feather="check" class="w-4 h-4 text-green-400 mr-3"></i> Custom Integrations</li> | |
| <li class="flex items-center text-slate-300 text-sm"><i data-feather="check" class="w-4 h-4 text-green-400 mr-3"></i> 24/7 Phone Support</li> | |
| </ul> | |
| <button class="mt-8 w-full py-3 px-4 bg-slate-800 hover:bg-slate-700 text-white rounded-lg font-medium transition-colors border border-slate-600"> | |
| Contact Sales | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section id="testimonials" class="py-24 bg-slate-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-white text-center mb-16">Trusted by developers worldwide</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-slate-800/50 p-8 rounded-2xl border border-slate-700"> | |
| <div class="flex items-center gap-1 mb-4"> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| </div> | |
| <p class="text-slate-300 mb-6">"Lumina has completely transformed how we handle our analytics. The speed is incredible and the API is a dream to work with."</p> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-pink-500 to-orange-400 flex items-center justify-center font-bold text-white">JD</div> | |
| <div> | |
| <div class="text-white font-medium">Jane Doe</div> | |
| <div class="text-slate-400 text-sm">CTO at TechFlow</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-slate-800/50 p-8 rounded-2xl border border-slate-700"> | |
| <div class="flex items-center gap-1 mb-4"> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| </div> | |
| <p class="text-slate-300 mb-6">"We migrated from a legacy system and cut our costs by 40%. The real-time dashboard is exactly what our sales team needed."</p> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-cyan-400 flex items-center justify-center font-bold text-white">MS</div> | |
| <div> | |
| <div class="text-white font-medium">Mark Smith</div> | |
| <div class="text-slate-400 text-sm">VP of Engineering</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-slate-800/50 p-8 rounded-2xl border border-slate-700"> | |
| <div class="flex items-center gap-1 mb-4"> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| </div> | |
| <p class="text-slate-300 mb-6">"The security features gave our compliance team peace of mind. Highly recommended for any fintech startup."</p> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-indigo-400 flex items-center justify-center font-bold text-white">EL</div> | |
| <div> | |
| <div class="text-white font-medium">Elena Lopez</div> | |
| <div class="text-slate-400 text-sm">Founder, PayStream</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-blue-900 to-purple-900 opacity-50"></div> | |
| <div class="absolute inset-0 bg-grid opacity-20"></div> | |
| <div class="max-w-4xl mx-auto px-4 relative z-10 text-center"> | |
| <h2 class="text-4xl font-bold text-white mb-6">Ready to get started?</h2> | |
| <p class="text-xl text-blue-100 mb-10">Join thousands of developers building the future with Lumina today.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="px-8 py-4 bg-white text-purple-900 rounded-full font-bold text-lg hover:bg-gray-100 transition-colors shadow-xl"> | |
| Start Free Trial | |
| </button> | |
| <button class="px-8 py-4 bg-transparent border-2 border-white text-white rounded-full font-bold text-lg hover:bg-white/10 transition-colors"> | |
| Contact Sales | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-slate-950 border-t border-slate-800 pt-16 pb-8"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 mb-12"> | |
| <div class="col-span-2 lg:col-span-2"> | |
| <div class="flex items-center gap-2 mb-4"> | |
| <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center"> | |
| <i data-feather="zap" class="text-white w-5 h-5"></i> | |
| </div> | |
| <span class="font-bold text-xl text-white">Lumina</span> | |
| </div> | |
| <p class="text-slate-400 text-sm max-w-xs"> | |
| Making the world more productive, one line of code at a time. | |
| </p> | |
| <div class="flex gap-4 mt-6"> | |
| <a href="#" class="text-slate-400 hover:text-white transition-colors"><i data-feather="twitter" class="w-5 h-5"></i></a> | |
| <a href="#" class="text-slate-400 hover:text-white transition-colors"><i data-feather="github" class="w-5 h-5"></i></a> | |
| <a href="#" class="text-slate-400 hover:text-white transition-colors"><i data-feather="linkedin" class="w-5 h-5"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Product</h4> | |
| <ul class="space-y-2 text-sm text-slate-400"> | |
| <li><a href="#" class="hover:text-purple-400 transition-colors">Features</a></li> | |
| <li><a href="#" class="hover:text-purple-400 transition-colors">Integrations</a></li> | |
| <li><a href="#" class="hover:text-purple-400 transition-colors">Pricing</a></li> | |
| <li><a href="#" class="hover:text-purple-400 transition-colors">Changelog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Company</h4> | |
| <ul class="space-y-2 text-sm text-slate-400"> | |
| <li><a href="#" class="hover:text-purple-400 transition-colors">About Us</a></li> | |
| <li><a href="#" class="hover:text-purple-400 transition-colors">Careers</a></li> | |
| <li><a href="#" class="hover:text-purple-400 transition-colors">Blog</a></li> | |
| <li><a href="#" class="hover:text-purple-400 transition-colors">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Resources</h4> | |
| <ul class="space-y-2 text-sm text-slate-400"> | |
| <li><a href="#" class="hover:text-purple-400 transition-colors">Documentation</a></li> | |
| <li><a href="#" class="hover:text-purple-400 transition-colors">Help Center</a></li> | |
| <li><a href="#" class="hover:text-purple-400 transition-colors">Community</a></li> | |
| <li><a href="#" class="hover:text-purple-400 transition-colors">Status</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-slate-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4"> | |
| <p class="text-slate-500 text-sm">© 2023 Lumina Inc. All rights reserved.</p> | |
| <div class="flex gap-6 text-sm text-slate-500"> | |
| <a href="#" class="hover:text-white transition-colors">Privacy Policy</a> | |
| <a href="#" class="hover:text-white transition-colors">Terms of Service</a> | |
| </div> | |
| <!-- Built with anycoder Link --> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs text-slate-600 hover:text-purple-400 transition-colors mt-2 md:mt-0"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Mobile Menu Toggle | |
| const btn = document.getElementById('mobile-menu-btn'); | |
| const menu = document.getElementById('mobile-menu'); | |
| btn.addEventListener('click', () => { | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Navbar Scroll Effect | |
| const navbar = document.getElementById('navbar'); | |
| window.addEventListener('scroll', () => { | |
| if (window.scrollY > 20) { | |
| navbar.classList.add('shadow-lg'); | |
| navbar.classList.replace('bg-opacity-70', 'bg-opacity-90'); | |
| } else { | |
| navbar.classList.remove('shadow-lg'); | |
| } | |
| }); | |
| // Spotlight Effect Logic | |
| const cards = document.querySelectorAll('.spotlight-card'); | |
| const container = document.getElementById('cards-container'); | |
| container.onmousemove = e => { | |
| for(const card of cards) { | |
| const rect = card.getBoundingClientRect(); | |
| const x = e.clientX - rect.left; | |
| const y = e.clientY - rect.top; | |
| card.style.setProperty("--mouse-x", `${x}px`); | |
| card.style.setProperty("--mouse-y", `${y}px`); | |
| }; | |
| }; | |
| // Pricing Toggle Logic | |
| const toggle = document.getElementById('billing-toggle'); | |
| const prices = document.querySelectorAll('.price-amount'); | |
| const periods = document.querySelectorAll('.billing-period'); | |
| const monthlyLabel = document.getElementById('monthly-label'); | |
| const yearlyLabel = document.getElementById('yearly-label'); | |
| toggle.addEventListener('change', function() { | |
| const isYearly = this.checked; | |
| // Update Text Styles | |
| if(isYearly) { | |
| yearlyLabel.classList.add('text-white'); | |
| yearlyLabel.classList.remove('text-slate-300'); | |
| monthlyLabel.classList.add('text-slate-300'); | |
| monthlyLabel.classList.remove('text-white'); | |
| } else { | |
| monthlyLabel.classList.add('text-white'); | |
| monthlyLabel.classList.remove('text-slate-300'); | |
| yearlyLabel.classList.add('text-slate-300'); | |
| yearlyLabel.classList.remove('text-white'); | |
| } | |
| // Update Prices with simple animation | |
| prices.forEach(price => { | |
| price.style.opacity = '0'; | |
| setTimeout(() => { | |
| const newValue = isYearly ? price.dataset.yearly : price.dataset.monthly; | |
| // Add dollar sign back | |
| price.innerText = `$${newValue}`; | |
| price.style.opacity = '1'; | |
| }, 200); | |
| }); | |
| }); | |
| // Set initial active state for toggle labels | |
| monthlyLabel.classList.add('text-white'); | |
| // Intersection Observer for Fade-in animations | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: "0px 0px -50px 0px" | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('opacity-100', 'translate-y-0'); | |
| entry.target.classList.remove('opacity-0', 'translate-y-10'); | |
| } | |
| }); | |
| }, observerOptions); | |
| // Select elements to animate | |
| document.querySelectorAll('section h2, section h3, .spotlight-card, .glass').forEach((el) => { | |
| el.classList.add('transition-all', 'duration-700', 'opacity-0', 'translate-y-10'); | |
| observer.observe(el); | |
| }); | |
| </script> | |
| </body> | |
| </html> |