| <!DOCTYPE html> |
| <html lang="en" class="scroll-smooth"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Phantom Digital - Build the Future</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/lucide@latest"></script> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 50: '#eff6ff', |
| 100: '#dbeafe', |
| 500: '#3b82f6', |
| 600: '#2563eb', |
| 700: '#1d4ed8', |
| 900: '#1e3a8a', |
| } |
| }, |
| animation: { |
| 'float': 'float 6s ease-in-out infinite', |
| 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
| }, |
| keyframes: { |
| float: { |
| '0%, 100%': { transform: 'translateY(0)' }, |
| '50%': { transform: 'translateY(-20px)' }, |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); |
| body { font-family: 'Inter', sans-serif; } |
| .gradient-text { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| .glass-effect { |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| } |
| .dark .glass-effect { |
| background: rgba(0, 0, 0, 0.3); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| </style> |
| </head> |
| <body class="bg-white dark:bg-slate-900 text-slate-900 dark:text-white transition-colors duration-300"> |
|
|
| |
| <nav class="fixed w-full z-50 top-0 transition-all duration-300" id="navbar"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between items-center h-20"> |
| |
| <div class="flex items-center space-x-2"> |
| <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center"> |
| <i data-lucide="zap" class="text-white w-6 h-6"></i> |
| </div> |
| <span class="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"> |
| Phantom Digital |
| </span> |
| </div> |
|
|
| |
| <div class="hidden md:flex items-center space-x-8"> |
| <a href="index.html#features" class="text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Features</a> |
| <a href="index.html#about" class="text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">About</a> |
| <a href="testimonials.html" class="text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Testimonials</a> |
| <a href="contact.html" class="text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Contact</a> |
| |
| |
| <button onclick="toggleDarkMode()" class="p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"> |
| <i data-lucide="sun" class="hidden dark:block w-5 h-5 text-yellow-400"></i> |
| <i data-lucide="moon" class="block dark:hidden w-5 h-5 text-slate-600"></i> |
| </button> |
|
|
| <a href="app.html" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-full font-medium transition-all transform hover:scale-105 shadow-lg hover:shadow-blue-500/30"> |
| Get Started |
| </a> |
| </div> |
|
|
| |
| <button onclick="toggleMobileMenu()" class="md:hidden p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800"> |
| <i data-lucide="menu" class="w-6 h-6 text-slate-600 dark:text-slate-300" id="menuIcon"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="mobileMenu" class="hidden md:hidden bg-white dark:bg-slate-900 border-t dark:border-slate-800 shadow-lg"> |
| <div class="px-4 pt-2 pb-6 space-y-2"> |
| <a href="index.html#features" class="block px-3 py-2 rounded-md text-base font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800">Features</a> |
| <a href="index.html#about" class="block px-3 py-2 rounded-md text-base font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800">About</a> |
| <a href="testimonials.html" class="block px-3 py-2 rounded-md text-base font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800">Testimonials</a> |
| <a href="contact.html" class="block px-3 py-2 rounded-md text-base font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800">Contact</a> |
| <a href="app.html" class="block px-3 py-2 rounded-md text-base font-medium text-blue-600 dark:text-blue-400 hover:bg-slate-100 dark:hover:bg-slate-800">Launch App</a> |
| <button onclick="toggleDarkMode()" class="w-full text-left px-3 py-2 rounded-md text-base font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 flex items-center gap-2"> |
| <span id="mobileThemeText">Toggle Theme</span> |
| </button> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden"> |
| <div class="absolute inset-0 bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 dark:from-slate-900 dark:via-purple-900/20 dark:to-slate-900 -z-10"></div> |
| |
| |
| <div class="absolute top-20 left-10 w-72 h-72 bg-purple-300/30 dark:bg-purple-600/20 rounded-full blur-3xl animate-pulse-slow"></div> |
| <div class="absolute bottom-20 right-10 w-96 h-96 bg-blue-300/30 dark:bg-blue-600/20 rounded-full blur-3xl animate-pulse-slow" style="animation-delay: 2s;"></div> |
|
|
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative"> |
| <div class="grid lg:grid-cols-2 gap-12 items-center"> |
| <div class="text-center lg:text-left animate-fade-in"> |
| <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-sm font-semibold mb-6 border border-blue-200 dark:border-blue-800"> |
| <span class="flex h-2 w-2 rounded-full bg-blue-600 animate-pulse"></span> |
| v2.0 Now Available |
| </div> |
| |
| <h1 class="text-5xl lg:text-7xl font-bold leading-tight mb-6"> |
| Build the <span class="gradient-text">Future</span> with AI |
| </h1> |
| |
| <p class="text-xl text-slate-600 dark:text-slate-400 mb-8 leading-relaxed max-w-2xl mx-auto lg:mx-0"> |
| Transform your ideas into reality with our cutting-edge AI platform. |
| Create, deploy, and scale intelligent applications in minutes. |
| </p> |
| |
| <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start"> |
| <a href="app.html" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-full font-semibold text-lg transition-all transform hover:scale-105 shadow-xl hover:shadow-blue-500/30 flex items-center justify-center gap-2"> |
| Start Building Free |
| <i data-lucide="arrow-right" class="w-5 h-5"></i> |
| </a> |
| <button class="glass-effect text-slate-700 dark:text-white px-8 py-4 rounded-full font-semibold text-lg transition-all hover:bg-slate-100 dark:hover:bg-slate-800 flex items-center justify-center gap-2 border border-slate-300 dark:border-slate-700"> |
| <i data-lucide="play-circle" class="w-5 h-5"></i> |
| Watch Demo |
| </button> |
| </div> |
|
|
| <div class="mt-12 flex items-center justify-center lg:justify-start gap-8 text-sm text-slate-500 dark:text-slate-400"> |
| <div class="flex items-center gap-2"> |
| <i data-lucide="check-circle" class="w-5 h-5 text-green-500"></i> |
| No credit card required |
| </div> |
| <div class="flex items-center gap-2"> |
| <i data-lucide="check-circle" class="w-5 h-5 text-green-500"></i> |
| 14-day free trial |
| </div> |
| </div> |
| </div> |
|
|
| <div class="relative"> |
| <div class="relative z-10 animate-float"> |
| <img src="http://static.photos/technology/640x360/42" alt="AI Dashboard" class="rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-700 w-full"> |
| |
| |
| <div class="absolute -bottom-6 -left-6 bg-white dark:bg-slate-800 p-4 rounded-xl shadow-lg border border-slate-200 dark:border-slate-700 animate-float" style="animation-delay: 1s;"> |
| <div class="flex items-center gap-3"> |
| <div class="w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center"> |
| <i data-lucide="trending-up" class="w-5 h-5 text-green-600 dark:text-green-400"></i> |
| </div> |
| <div> |
| <p class="text-sm font-semibold text-slate-900 dark:text-white">+127%</p> |
| <p class="text-xs text-slate-500 dark:text-slate-400">Efficiency</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="absolute -top-6 -right-6 bg-white dark:bg-slate-800 p-4 rounded-xl shadow-lg border border-slate-200 dark:border-slate-700 animate-float" style="animation-delay: 2s;"> |
| <div class="flex items-center gap-3"> |
| <div class="w-10 h-10 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center"> |
| <i data-lucide="cpu" class="w-5 h-5 text-purple-600 dark:text-purple-400"></i> |
| </div> |
| <div> |
| <p class="text-sm font-semibold text-slate-900 dark:text-white">AI Ready</p> |
| <p class="text-xs text-slate-500 dark:text-slate-400">Processing</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="features" class="py-20 lg:py-32 bg-slate-50 dark:bg-slate-800/50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center max-w-3xl mx-auto mb-16"> |
| <h2 class="text-3xl lg:text-4xl font-bold mb-4">Everything you need to <span class="gradient-text">succeed</span></h2> |
| <p class="text-lg text-slate-600 dark:text-slate-400">Powerful features designed to help you build, deploy, and scale your AI applications with ease.</p> |
| </div> |
|
|
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-white dark:bg-slate-900 p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 border border-slate-200 dark:border-slate-700 group hover:-translate-y-1"> |
| <div class="w-14 h-14 bg-blue-100 dark:bg-blue-900/30 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"> |
| <i data-lucide="rocket" class="w-7 h-7 text-blue-600 dark:text-blue-400"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-slate-900 dark:text-white">Rapid Deployment</h3> |
| <p class="text-slate-600 dark:text-slate-400 leading-relaxed">Deploy your AI models in seconds with our automated infrastructure and global CDN.</p> |
| </div> |
|
|
| |
| <div class="bg-white dark:bg-slate-900 p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 border border-slate-200 dark:border-slate-700 group hover:-translate-y-1"> |
| <div class="w-14 h-14 bg-purple-100 dark:bg-purple-900/30 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"> |
| <i data-lucide="shield" class="w-7 h-7 text-purple-600 dark:text-purple-400"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-slate-900 dark:text-white">Enterprise Security</h3> |
| <p class="text-slate-600 dark:text-slate-400 leading-relaxed">Bank-grade encryption, SOC2 compliance, and advanced threat protection built-in.</p> |
| </div> |
|
|
| |
| <div class="bg-white dark:bg-slate-900 p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 border border-slate-200 dark:border-slate-700 group hover:-translate-y-1"> |
| <div class="w-14 h-14 bg-pink-100 dark:bg-pink-900/30 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"> |
| <i data-lucide="bar-chart-3" class="w-7 h-7 text-pink-600 dark:text-pink-400"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-slate-900 dark:text-white">Real-time Analytics</h3> |
| <p class="text-slate-600 dark:text-slate-400 leading-relaxed">Monitor performance, track usage, and optimize your models with detailed insights.</p> |
| </div> |
|
|
| |
| <div class="bg-white dark:bg-slate-900 p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 border border-slate-200 dark:border-slate-700 group hover:-translate-y-1"> |
| <div class="w-14 h-14 bg-green-100 dark:bg-green-900/30 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"> |
| <i data-lucide="git-branch" class="w-7 h-7 text-green-600 dark:text-green-400"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-slate-900 dark:text-white">Version Control</h3> |
| <p class="text-slate-600 dark:text-slate-400 leading-relaxed">Track changes, manage versions, and collaborate with your team seamlessly.</p> |
| </div> |
|
|
| |
| <div class="bg-white dark:bg-slate-900 p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 border border-slate-200 dark:border-slate-700 group hover:-translate-y-1"> |
| <div class="w-14 h-14 bg-orange-100 dark:bg-orange-900/30 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"> |
| <i data-lucide="zap" class="w-7 h-7 text-orange-600 dark:text-orange-400"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-slate-900 dark:text-white">Auto Scaling</h3> |
| <p class="text-slate-600 dark:text-slate-400 leading-relaxed">Handle traffic spikes automatically with intelligent load balancing and scaling.</p> |
| </div> |
|
|
| |
| <div class="bg-white dark:bg-slate-900 p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 border border-slate-200 dark:border-slate-700 group hover:-translate-y-1"> |
| <div class="w-14 h-14 bg-cyan-100 dark:bg-cyan-900/30 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"> |
| <i data-lucide="headphones" class="w-7 h-7 text-cyan-600 dark:text-cyan-400"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-slate-900 dark:text-white">24/7 Support</h3> |
| <p class="text-slate-600 dark:text-slate-400 leading-relaxed">Expert support team available around the clock to help you succeed.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-20 lg:py-32"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid lg:grid-cols-2 gap-16 items-center"> |
| <div class="relative"> |
| <img src="http://static.photos/workspace/640x360/88" alt="Team Working" class="rounded-2xl shadow-2xl w-full"> |
| <div class="absolute -bottom-8 -right-8 bg-blue-600 text-white p-8 rounded-2xl shadow-xl hidden lg:block"> |
| <p class="text-4xl font-bold">10K+</p> |
| <p class="text-blue-100">Active Users</p> |
| </div> |
| </div> |
| |
| <div> |
| <h2 class="text-3xl lg:text-5xl font-bold mb-6">Trusted by developers <span class="gradient-text">worldwide</span></h2> |
| <p class="text-lg text-slate-600 dark:text-slate-400 mb-8 leading-relaxed"> |
| Join thousands of developers and companies building the future with NexusAI. |
| Our platform powers everything from startups to Fortune 500 companies. |
| </p> |
| |
| <div class="grid grid-cols-2 gap-8 mb-8"> |
| <div> |
| <p class="text-3xl lg:text-4xl font-bold text-slate-900 dark:text-white mb-2">99.9%</p> |
| <p class="text-slate-600 dark:text-slate-400">Uptime SLA</p> |
| </div> |
| <div> |
| <p class="text-3xl lg:text-4xl font-bold text-slate-900 dark:text-white mb-2">50M+</p> |
| <p class="text-slate-600 dark:text-slate-400">API Requests/Day</p> |
| </div> |
| <div> |
| <p class="text-3xl lg:text-4xl font-bold text-slate-900 dark:text-white mb-2">150+</p> |
| <p class="text-slate-600 dark:text-slate-400">Countries</p> |
| </div> |
| <div> |
| <p class="text-3xl lg:text-4xl font-bold text-slate-900 dark:text-white mb-2">4.9/5</p> |
| <p class="text-slate-600 dark:text-slate-400">User Rating</p> |
| </div> |
| </div> |
|
|
| <button class="text-blue-600 dark:text-blue-400 font-semibold flex items-center gap-2 hover:gap-3 transition-all"> |
| Learn more about us |
| <i data-lucide="arrow-right" class="w-5 h-5"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="testimonials" class="py-20 lg:py-32 bg-slate-50 dark:bg-slate-800/50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center max-w-3xl mx-auto mb-16"> |
| <h2 class="text-3xl lg:text-4xl font-bold mb-4">Loved by <span class="gradient-text">builders</span></h2> |
| <p class="text-lg text-slate-600 dark:text-slate-400">See what our customers have to say about their experience with NexusAI.</p> |
| </div> |
|
|
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="bg-white dark:bg-slate-900 p-8 rounded-2xl shadow-lg border border-slate-200 dark:border-slate-700"> |
| <div class="flex items-center gap-1 mb-4"> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| </div> |
| <p class="text-slate-600 dark:text-slate-400 mb-6 leading-relaxed">"NexusAI has completely transformed how we build and deploy AI models. The speed and reliability are unmatched."</p> |
| <div class="flex items-center gap-4"> |
| <img src="http://static.photos/people/200x200/1" alt="User" class="w-12 h-12 rounded-full object-cover"> |
| <div> |
| <p class="font-semibold text-slate-900 dark:text-white">Sarah Chen</p> |
| <p class="text-sm text-slate-500 dark:text-slate-400">CTO, TechCorp</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white dark:bg-slate-900 p-8 rounded-2xl shadow-lg border border-slate-200 dark:border-slate-700"> |
| <div class="flex items-center gap-1 mb-4"> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| </div> |
| <p class="text-slate-600 dark:text-slate-400 mb-6 leading-relaxed">"The developer experience is incredible. What used to take weeks now takes minutes. Truly game-changing platform."</p> |
| <div class="flex items-center gap-4"> |
| <img src="http://static.photos/people/200x200/2" alt="User" class="w-12 h-12 rounded-full object-cover"> |
| <div> |
| <p class="font-semibold text-slate-900 dark:text-white">Marcus Johnson</p> |
| <p class="text-sm text-slate-500 dark:text-slate-400">Lead Developer, StartupXYZ</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white dark:bg-slate-900 p-8 rounded-2xl shadow-lg border border-slate-200 dark:border-slate-700"> |
| <div class="flex items-center gap-1 mb-4"> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| </div> |
| <p class="text-slate-600 dark:text-slate-400 mb-6 leading-relaxed">"Best-in-class support and features. We've scaled our AI operations 10x since switching to NexusAI."</p> |
| <div class="flex items-center gap-4"> |
| <img src="http://static.photos/people/200x200/3" alt="User" class="w-12 h-12 rounded-full object-cover"> |
| <div> |
| <p class="font-semibold text-slate-900 dark:text-white">Emily Rodriguez</p> |
| <p class="text-sm text-slate-500 dark:text-slate-400">AI Director, Enterprise Inc</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20 lg:py-32 relative overflow-hidden"> |
| <div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-purple-700"></div> |
| <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.05"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-20"></div> |
| |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center"> |
| <h2 class="text-4xl lg:text-6xl font-bold text-white mb-6">Ready to get started?</h2> |
| <p class="text-xl text-blue-100 mb-10 max-w-2xl mx-auto">Join thousands of developers building the future with AI. Start your free trial today—no credit card required.</p> |
| |
| <div class="flex flex-col sm:flex-row gap-4 justify-center mb-12"> |
| <button class="bg-white text-blue-600 px-8 py-4 rounded-full font-bold text-lg hover:bg-blue-50 transition-all transform hover:scale-105 shadow-xl"> |
| Start Free Trial |
| </button> |
| <button class="border-2 border-white text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-white/10 transition-all"> |
| Contact Sales |
| </button> |
| </div> |
|
|
| <div class="flex items-center justify-center gap-8 text-blue-200 text-sm"> |
| <div class="flex items-center gap-2"> |
| <i data-lucide="check-circle" class="w-5 h-5"></i> |
| Free 14-day trial |
| </div> |
| <div class="flex items-center gap-2"> |
| <i data-lucide="check-circle" class="w-5 h-5"></i> |
| No setup fees |
| </div> |
| <div class="flex items-center gap-2"> |
| <i data-lucide="check-circle" class="w-5 h-5"></i> |
| Cancel anytime |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-slate-900 text-slate-300 py-12 border-t border-slate-800"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> |
| <div class="col-span-2"> |
| <div class="flex items-center space-x-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-lucide="zap" class="text-white w-5 h-5"></i> |
| </div> |
| <span class="text-xl font-bold text-white">Phantom Digital</span> |
| </div> |
| <p class="text-slate-400 mb-4 max-w-sm">Empowering developers to build intelligent applications with cutting-edge AI infrastructure and tools.</p> |
| <div class="flex gap-4"> |
| <a href="#" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-blue-600 transition-colors"> |
| <i data-lucide="twitter" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-blue-600 transition-colors"> |
| <i data-lucide="github" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-blue-600 transition-colors"> |
| <i data-lucide="linkedin" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-blue-600 transition-colors"> |
| <i data-lucide="youtube" 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"> |
| <li><a href="#" class="hover:text-blue-400 transition-colors">Features</a></li> |
| <li><a href="#" class="hover:text-blue-400 transition-colors">Pricing</a></li> |
| <li><a href="#" class="hover:text-blue-400 transition-colors">Documentation</a></li> |
| <li><a href="#" class="hover:text-blue-400 transition-colors">API Reference</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-white font-semibold mb-4">Company</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-blue-400 transition-colors">About</a></li> |
| <li><a href="#" class="hover:text-blue-400 transition-colors">Blog</a></li> |
| <li><a href="#" class="hover:text-blue-400 transition-colors">Careers</a></li> |
| <li><a href="#" class="hover:text-blue-400 transition-colors">Contact</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-sm text-slate-500">© 2024 Phantom Digital. All rights reserved.</p> |
| <div class="flex gap-6 text-sm text-slate-500"> |
| <a href="#" class="hover:text-blue-400 transition-colors">Privacy Policy</a> |
| <a href="#" class="hover:text-blue-400 transition-colors">Terms of Service</a> |
| <a href="#" class="hover:text-blue-400 transition-colors">Cookie Policy</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| lucide.createIcons(); |
| |
| |
| function toggleDarkMode() { |
| const html = document.documentElement; |
| if (html.classList.contains('dark')) { |
| html.classList.remove('dark'); |
| localStorage.setItem('theme', 'light'); |
| } else { |
| html.classList.add('dark'); |
| localStorage.setItem('theme', 'dark'); |
| } |
| } |
| |
| |
| if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
| document.documentElement.classList.add('dark'); |
| } |
| |
| |
| function toggleMobileMenu() { |
| const menu = document.getElementById('mobileMenu'); |
| const icon = document.getElementById('menuIcon'); |
| |
| if (menu.classList.contains('hidden')) { |
| menu.classList.remove('hidden'); |
| icon.setAttribute('data-lucide', 'x'); |
| } else { |
| menu.classList.add('hidden'); |
| icon.setAttribute('data-lucide', 'menu'); |
| } |
| lucide.createIcons(); |
| } |
| |
| |
| window.addEventListener('scroll', () => { |
| const navbar = document.getElementById('navbar'); |
| if (window.scrollY > 20) { |
| navbar.classList.add('bg-white/80', 'dark:bg-slate-900/80', 'backdrop-blur-md', 'shadow-lg'); |
| } else { |
| navbar.classList.remove('bg-white/80', 'dark:bg-slate-900/80', 'backdrop-blur-md', 'shadow-lg'); |
| } |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| const target = document.querySelector(this.getAttribute('href')); |
| if (target) { |
| target.scrollIntoView({ |
| behavior: 'smooth', |
| block: 'start' |
| }); |
| |
| document.getElementById('mobileMenu').classList.add('hidden'); |
| } |
| }); |
| }); |
| |
| |
| const observerOptions = { |
| root: null, |
| rootMargin: '0px', |
| threshold: 0.1 |
| }; |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.classList.add('animate-fade-in'); |
| entry.target.style.opacity = '1'; |
| entry.target.style.transform = 'translateY(0)'; |
| } |
| }); |
| }, observerOptions); |
| |
| |
| document.querySelectorAll('.group').forEach((el) => { |
| el.style.opacity = '0'; |
| el.style.transform = 'translateY(20px)'; |
| el.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out'; |
| observer.observe(el); |
| }); |
| </script> |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> |
| </body> |
| </html> |
