Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VoiceFlow AI - Revolutionary Text-to-Speech Technology</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js" defer></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); | |
| body { font-family: 'Inter', sans-serif; } | |
| .gradient-text { | |
| background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .glass-effect { | |
| backdrop-filter: blur(10px); | |
| background: rgba(0, 0, 0, 0.8); | |
| border: 1px solid rgba(59, 130, 246, 0.2); | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| .pulse-blue { | |
| animation: pulse-blue 2s infinite; | |
| } | |
| @keyframes pulse-blue { | |
| 0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); } | |
| 70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-white overflow-x-hidden" x-data="{ mobileMenu: false, demoPlaying: false }"> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 w-full z-50 glass-effect"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-700 rounded-lg flex items-center justify-center"> | |
| <i data-feather="mic" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <span class="text-2xl font-bold gradient-text">VoiceFlow AI</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#features" class="text-gray-300 hover:text-blue-400 transition-colors">Возможности</a> | |
| <a href="#demo" class="text-gray-300 hover:text-blue-400 transition-colors">Демо</a> | |
| <a href="#pricing" class="text-gray-300 hover:text-blue-400 transition-colors">Тарифы</a> | |
| <a href="#about" class="text-gray-300 hover:text-blue-400 transition-colors">О нас</a> | |
| <button class="bg-gradient-to-r from-blue-500 to-blue-700 px-6 py-2 rounded-full font-medium hover:shadow-lg hover:shadow-blue-500/25 transition-all"> | |
| Начать | |
| </button> | |
| </div> | |
| <button @click="mobileMenu = !mobileMenu" class="md:hidden text-gray-300"> | |
| <i data-feather="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div x-show="mobileMenu" x-transition class="md:hidden glass-effect border-t border-blue-500/20"> | |
| <div class="px-6 py-4 space-y-4"> | |
| <a href="#features" class="block text-gray-300 hover:text-blue-400">Возможности</a> | |
| <a href="#demo" class="block text-gray-300 hover:text-blue-400">Демо</a> | |
| <a href="#pricing" class="block text-gray-300 hover:text-blue-400">Тарифы</a> | |
| <a href="#about" class="block text-gray-300 hover:text-blue-400">О нас</a> | |
| <button class="w-full bg-gradient-to-r from-blue-500 to-blue-700 px-6 py-2 rounded-full font-medium"> | |
| Начать | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Demo Section --> | |
| <section id="demo" class="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-gray-900 to-black pt-20"> | |
| <div class="absolute inset-0"> | |
| <div class="floating absolute top-20 left-10 w-72 h-72 bg-blue-600/10 rounded-full blur-3xl"></div> | |
| <div class="floating absolute bottom-20 right-10 w-96 h-96 bg-blue-700/10 rounded-full blur-3xl" style="animation-delay: 3s;"></div> | |
| </div> | |
| <div class="container mx-auto px-6 relative z-10"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h1 class="text-5xl lg:text-7xl font-bold mb-6"> | |
| <span class="gradient-text">Попробуйте</span> демо | |
| </h1> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-8"> | |
| Убедитесь в качестве нашего преобразования текста в речь с помощью интерактивной демонстрации | |
| </p> | |
| </div> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="glass-effect rounded-3xl p-8 lg:p-12"> | |
| <div class="mb-8"> | |
| <label class="block text-sm font-medium text-gray-300 mb-2">Введите ваш текст</label> | |
| <textarea class="w-full bg-gray-900 border border-gray-700 rounded-xl p-4 text-white placeholder-gray-500 focus:border-blue-500 focus:outline-none transition-colors" rows="4" placeholder="Введите здесь текст, чтобы услышать его озвучку...">VoiceFlow AI предлагает самое естественное и выразительное преобразование текста в речь, которое вы когда-либо слышали. Наши передовые нейросети понимают контекст, эмоции и намерения для создания по-настоящему человеческой речи.</textarea> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-6 mb-8"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-2">Голос</label> | |
| <select class="w-full bg-gray-900 border border-gray-700 rounded-lg p-3 text-white focus:border-blue-500 focus:outline-none"> | |
| <option>Эмма (Американский английский)</option> | |
| <option>Джеймс (Британский английский)</option> | |
| <option>София (Австралийский)</option> | |
| <option>Лукас (Канадский)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-2">Скорость</label> | |
| <input type="range" min="0.5" max="2" step="0.1" value="1" class="w-full accent-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-2">Эмоция</label> | |
| <select class="w-full bg-gray-900 border border-gray-700 rounded-lg p-3 text-white focus:border-blue-500 focus:outline-none"> | |
| <option>Нейтральная</option> | |
| <option>Радость</option> | |
| <option>Грусть</option> | |
| <option>Восторг</option> | |
| <option>Профессиональная</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-center"> | |
| <button class="bg-gradient-to-r from-blue-500 to-blue-700 px-8 py-4 rounded-full font-semibold text-lg hover:shadow-xl hover:shadow-blue-500/30 transition-all flex items-center space-x-3"> | |
| <i data-feather="play" class="w-6 h-6"></i> | |
| <span>Сгенерировать речь</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-16 text-center"> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <button class="bg-gradient-to-r from-blue-500 to-blue-700 px-8 py-4 rounded-full font-semibold text-lg hover:shadow-xl hover:shadow-blue-500/30 transition-all pulse-blue"> | |
| Начать бесплатно | |
| </button> | |
| <button class="border-2 border-blue-500 px-8 py-4 rounded-full font-semibold text-lg hover:bg-blue-500 hover:text-white transition-all"> | |
| Посмотреть тарифы | |
| </button> | |
| </div> | |
| <div class="mt-12 flex items-center justify-center space-x-8 text-gray-400"> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-blue-400">900+</div> | |
| <div class="text-sm">AI голосов</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-blue-300">142</div> | |
| <div class="text-sm">Языка</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-blue-400">50M+</div> | |
| <div class="text-sm">Символов</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Hero Section --> | |
| <section class="py-20 lg:py-32"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-6xl mx-auto grid lg:grid-cols-2 gap-12 items-center"> | |
| <div class="text-center lg:text-left"> | |
| <h2 class="text-4xl lg:text-5xl font-bold mb-6"> | |
| Преобразуйте текст в | |
| <span class="gradient-text">естественную речь</span> | |
| </h2> | |
| <p class="text-xl text-gray-300 mb-8 leading-relaxed"> | |
| VoiceFlow AI предоставляет ультрареалистичное преобразование текста в речь с 900+ голосами на 142 языках. | |
| Основано на передовых нейросетях для человеческой интонации и эмоций. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-3 h-3 bg-blue-600 rounded-full"></div> | |
| <span class="text-gray-300">Естественные интонационные паттерны</span> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-3 h-3 bg-blue-500 rounded-full"></div> | |
| <span class="text-gray-300">Контроль эмоционального выражения</span> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-3 h-3 bg-blue-500 rounded-full"></div> | |
| <span class="text-gray-300">Клонирование голоса в реальном времени</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="glass-effect rounded-3xl p-8 shadow-2xl"> | |
| <div class="bg-gray-900 rounded-2xl p-6 mb-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <span class="text-blue-400 font-medium">Живая демонстрация</span> | |
| <button class="text-blue-400 hover:text-blue-300"> | |
| <i data-feather="play-circle" class="w-8 h-8"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="h-3 bg-gray-800 rounded-full overflow-hidden"> | |
| <div class="h-full bg-gradient-to-r from-blue-500 to-blue-700 rounded-full" style="width: 75%"></div> | |
| </div> | |
| <div class="h-3 bg-gray-800 rounded-full overflow-hidden"> | |
| <div class="h-full bg-gradient-to-r from-blue-500 to-blue-700 rounded-full" style="width: 45%"></div> | |
| </div> | |
| <div class="h-3 bg-gray-800 rounded-full overflow-hidden"> | |
| <div class="h-full bg-gradient-to-r from-blue-500 to-blue-700 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 lg:py-32"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl lg:text-5xl font-bold mb-4"> | |
| Advanced <span class="gradient-text">TTS Features</span> | |
| </h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| Industry-leading technology that brings your text to life with unprecedented realism | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="glass-effect rounded-2xl p-8 hover:border-blue-500 transition-all"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-700 rounded-xl flex items-center justify-center mb-6"> | |
| <i data-feather="volume-2" class="w-8 h-8 text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Neural Voices</h3> | |
| <p class="text-gray-400 leading-relaxed"> | |
| State-of-the-art neural voices that sound indistinguishable from human speech with natural prosody and emotion. | |
| </p> | |
| </div> | |
| <div class="glass-effect rounded-2xl p-8 hover:border-blue-500 transition-all"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-700 rounded-xl flex items-center justify-center mb-6"> | |
| <i data-feather="globe" class="w-8 h-8 text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Multi-Language</h3> | |
| <p class="text-gray-400 leading-relaxed"> | |
| Support for 142 languages and dialects with authentic regional accents and pronunciation patterns. | |
| </p> | |
| </div> | |
| <div class="glass-effect rounded-2xl p-8 hover:border-blue-500 transition-all"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-700 rounded-xl flex items-center justify-center mb-6"> | |
| <i data-feather="zap" class="w-8 h-8 text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Real-time Processing</h3> | |
| <p class="text-gray-400 leading-relaxed"> | |
| Lightning-fast synthesis with sub-100ms latency for interactive applications and live streaming. | |
| </p> | |
| </div> | |
| <div class="glass-effect rounded-2xl p-8 hover:border-blue-500 transition-all"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-700 rounded-xl flex items-center justify-center mb-6"> | |
| <i data-feather="mic" class="w-8 h-8 text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Voice Cloning</h3> | |
| <p class="text-gray-400 leading-relaxed"> | |
| Create custom voices from just 30 seconds of audio. Perfect for brand consistency and personalization. | |
| </p> | |
| </div> | |
| <div class="glass-effect rounded-2xl p-8 hover:border-blue-500 transition-all"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-700 rounded-xl flex items-center justify-center mb-6"> | |
| <i data-feather="sliders" class="w-8 h-8 text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Fine Control</h3> | |
| <p class="text-gray-400 leading-relaxed"> | |
| Adjust speed, pitch, emotion, and emphasis with granular control over every aspect of speech synthesis. | |
| </p> | |
| </div> | |
| <div class="glass-effect rounded-2xl p-8 hover:border-violet-500 transition-all"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-violet-500 to-blue-500 rounded-xl flex items-center justify-center mb-6"> | |
| <i data-feather="shield" class="w-8 h-8 text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Enterprise Security</h3> | |
| <p class="text-gray-400 leading-relaxed"> | |
| SOC 2 compliant with end-to-end encryption and GDPR compliance for enterprise-grade security. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="py-20 lg:py-32"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl lg:text-5xl font-bold mb-4"> | |
| Simple, Transparent <span class="gradient-text">Pricing</span> | |
| </h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| Choose the perfect plan for your needs. Start free, upgrade anytime. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto items-stretch"> | |
| <!-- Starter Plan --> | |
| <div class="glass-effect rounded-2xl p-8 relative flex flex-col"> | |
| <div class="text-center mb-8"> | |
| <h3 class="text-2xl font-bold mb-2">Starter</h3> | |
| <div class="text-4xl font-bold gradient-text mb-2">Free</div> | |
| <p class="text-gray-400">Perfect for trying out</p> | |
| </div> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-center space-x-3"> | |
| <i data-feather="check" class="w-5 h-5 text-violet-400"></i> | |
| <span>10,000 characters/month</span> | |
| </li> | |
| <li class="flex items-center space-x-3"> | |
| <i data-feather="check" class="w-5 h-5 text-violet-400"></i> | |
| <span>50+ voices</span> | |
| </li> | |
| <li class="flex items-center space-x-3"> | |
| <i data-feather="check" class="w-5 h-5 text-violet-400"></i> | |
| <span>Standard quality</span> | |
| </li> | |
| <li class="flex items-center space-x-3"> | |
| <i data-feather="check" class="w-5 h-5 text-violet-400"></i> | |
| <span>MP3 download</span> | |
| </li> | |
| </ul> | |
| <div class="mt-auto"> | |
| <button class="w-full border border-blue-500 text-blue-400 py-3 rounded-lg font-medium hover:bg-blue-500 hover:text-white transition-all"> | |
| Get Started Free | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Pro Plan --> | |
| <div class="glass-effect rounded-2xl p-8 relative border-2 border-blue-500 flex flex-col"> | |
| <div class="absolute -top-4 left-1/2 transform -translate-x-1/2"> | |
| <span class="bg-gradient-to-r from-blue-500 to-blue-700 px-4 py-1 rounded-full text-sm font-medium">Most Popular</span> | |
| </div> | |
| <div class="text-center mb-8"> | |
| <h3 class="text-2xl font-bold mb-2">Pro</h3> | |
| <div class="text-4xl font-bold gradient-text mb-2">$29<span class="text-lg text-gray-400">/month</span></div> | |
| <p class="text-gray-400">For professionals</p> | |
| </div> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-center space-x-3"> | |
| <i data-feather="check" class="w-5 h-5 text-violet-400"></i> | |
| <span>500,000 characters/month</span> | |
| </li> | |
| <li class="flex items-center space-x-3"> | |
| <i data-feather="check" class="w-5 h-5 text-violet-400"></i> | |
| <span>All 900+ voices</span> | |
| </li> | |
| <li class="flex items-center space-x-3"> | |
| <i data-feather="check" class="w-5 h-5 text-violet-400"></i> | |
| <span>Neural quality</span> | |
| </li> | |
| <li class="flex items-center space-x-3"> | |
| <i data-feather="check" class="w-5 h-5 text-violet-400"></i> | |
| <span>Voice cloning</span> | |
| </li> | |
| <li class="flex items-center space-x-3"> | |
| <i data-feather="check" class="w-5 h-5 text-violet-400"></i> | |
| <span>Commercial use</span> | |
| </li> | |
| </ul> | |
| <div class="mt-auto"> | |
| <button class="w-full bg-gradient-to-r from-blue-500 to-blue-700 py-3 rounded-lg font-medium hover:shadow-lg hover:shadow-blue-500/30 transition-all"> | |
| Start Pro Trial | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Enterprise Plan --> | |
| <div class="glass-effect rounded-2xl p-8 relative flex flex-col"> | |
| <div class="text-center mb-8"> | |
| <h3 class="text-2xl font-bold mb-2">Enterprise</h3> | |
| <div class="text-4xl font-bold gradient-text mb-2">Custom</div> | |
| <p class="text-gray-400">For large teams</p> | |
| </div> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-center space-x-3"> | |
| <i data-feather="check" class="w-5 h-5 text-violet-400"></i> | |
| <span>Unlimited characters</span> | |
| </li> | |
| <li class="flex items-center space-x-3"> | |
| <i data-feather="check" class="w-5 h-5 text-violet-400"></i> | |
| <span>Custom voices</span> | |
| </li> | |
| <li class="flex items-center space-x-3"> | |
| <i data-feather="check" class="w-5 h-5 text-violet-400"></i> | |
| <span>Priority support</span> | |
| </li> | |
| <li class="flex items-center space-x-3"> | |
| <i data-feather="check" class="w-5 h-5 text-violet-400"></i> | |
| <span>SLA guarantee</span> | |
| </li> | |
| <li class="flex items-center space-x-3"> | |
| <i data-feather="check" class="w-5 h-5 text-violet-400"></i> | |
| <span>On-premise deployment</span> | |
| </li> | |
| </ul> | |
| <div class="mt-auto"> | |
| <button class="w-full border border-blue-500 text-blue-400 py-3 rounded-lg font-medium hover:bg-blue-500 hover:text-white transition-all"> | |
| Contact Sales | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 lg:py-32 bg-gradient-to-br from-gray-900 to-black"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-4xl lg:text-5xl font-bold mb-8"> | |
| Trusted by <span class="gradient-text">10,000+</span> Developers | |
| </h2> | |
| <p class="text-xl text-gray-400 mb-12 leading-relaxed"> | |
| From indie developers to Fortune 500 companies, VoiceFlow AI powers voice experiences | |
| that engage millions of users worldwide. | |
| </p> | |
| <div class="grid md:grid-cols-3 gap-8 mb-12"> | |
| <div class="text-center"> | |
| <div class="text-4xl font-bold text-blue-400 mb-2">99.9%</div> | |
| <div class="text-gray-400">Uptime SLA</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-4xl font-bold text-blue-300 mb-2">< 100ms</div> | |
| <div class="text-gray-400">Average Latency</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-4xl font-bold text-blue-400 mb-2">24/7</div> | |
| <div class="text-gray-400">Support</div> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap justify-center items-center gap-8 opacity-50"> | |
| <div class="text-2xl font-bold">TechCorp</div> | |
| <div class="text-2xl font-bold">StartupHub</div> | |
| <div class="text-2xl font-bold">InnovateLab</div> | |
| <div class="text-2xl font-bold">VoiceFirst</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 lg:py-32"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-4xl lg:text-6xl font-bold mb-6"> | |
| Ready to Give Your App a <span class="gradient-text">Voice?</span> | |
| </h2> | |
| <p class="text-xl text-gray-400 mb-8 leading-relaxed"> | |
| Join thousands of developers who are building the future of voice-enabled applications | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <button class="bg-gradient-to-r from-blue-500 to-blue-700 px-8 py-4 rounded-full font-semibold text-lg hover:shadow-xl hover:shadow-blue-500/30 transition-all pulse-blue"> | |
| Start Free Trial | |
| </button> | |
| <button class="border-2 border-blue-500 px-8 py-4 rounded-full font-semibold text-lg hover:bg-blue-500 hover:text-white transition-all"> | |
| View Documentation | |
| </button> | |
| </div> | |
| <p class="text-gray-500 mt-6">No credit card required • 14-day free trial • Cancel anytime</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 border-t border-gray-800"> | |
| <div class="container mx-auto px-6 py-12"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-700 rounded-lg flex items-center justify-center"> | |
| <i data-feather="mic" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <span class="text-2xl font-bold gradient-text">VoiceFlow AI</span> | |
| </div> | |
| <p class="text-gray-400 leading-relaxed"> | |
| The most advanced text-to-speech API for developers. Build voice-enabled applications with ease. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Product</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <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">API Docs</a></li> | |
| <li><a href="#" class="hover:text-blue-400 transition-colors">SDKs</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Company</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <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> | |
| <h4 class="font-semibold mb-4">Legal</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-blue-400 transition-colors">Privacy Policy</a></li> | |
| <li><a href="#" class="hover:text-blue-400 transition-colors">Terms of Service</a></li> | |
| <li><a href="#" class="hover:text-blue-400 transition-colors">SLA</a></li> | |
| <li><a href="#" class="hover:text-blue-400 transition-colors">Security</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">© 2024 VoiceFlow AI. All rights reserved.</p> | |
| <div class="flex space-x-4 mt-4 md:mt-0"> | |
| <a href="#" class="text-gray-400 hover:text-violet-400 transition-colors"> | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-violet-400 transition-colors"> | |
| <i data-feather="github" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-violet-400 transition-colors"> | |
| <i data-feather="linkedin" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Smooth scrolling for navigation links | |
| 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' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Add scroll effect to navigation | |
| window.addEventListener('scroll', function() { | |
| const nav = document.querySelector('nav'); | |
| if (window.scrollY > 50) { | |
| nav.classList.add('shadow-lg'); | |
| } else { | |
| nav.classList.remove('shadow-lg'); | |
| } | |
| }); | |
| // Animate elements on scroll | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver(function(entries) { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = '1'; | |
| entry.target.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }, observerOptions); | |
| // Observe all feature cards | |
| document.querySelectorAll('.glass-effect').forEach(el => { | |
| el.style.opacity = '0'; | |
| el.style.transform = 'translateY(20px)'; | |
| el.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; | |
| observer.observe(el); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |