Перенеси блок с демкой в начало страницы, адаптируй примерно как на картинке

index.html

@@ -79,86 +79,144 @@ Get Started
             </div>
         </div>
     </nav>
-        <!-- 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-black via-blue-900/20 to-blue-800/10"></div>
-        
-        <!-- Animated Background Elements -->
+    <!-- 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">
         <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 grid lg:grid-cols-2 gap-12 items-center">
-                <div class="text-center lg:text-left">
+        
+        <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">
-                        Transform Text into 
-                        <span class="gradient-text">Natural Speech</span>
+                        <span class="gradient-text">Попробуйте</span> демо
                     </h1>
-                    <p class="text-xl text-gray-300 mb-8 leading-relaxed">
-                        VoiceFlow AI delivers ultra-realistic text-to-speech with 900+ voices in 142 languages. 
-                        Powered by advanced neural networks for human-like intonation and emotion.
+                    <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-8">
+                        Убедитесь в качестве нашего преобразования текста в речь с помощью интерактивной демонстрации
                     </p>
-                    
-                    <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
-                    <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">
-Try Free Demo
+                </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">
-View Pricing
+                            Посмотреть тарифы
                         </button>
                     </div>
 
-                    <div class="mt-12 flex items-center justify-center lg:justify-start space-x-8 text-gray-400">
+                    <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 Voices</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">Languages</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">Characters</div>
+                            <div class="text-sm">Символов</div>
                         </div>
                     </div>
                 </div>
+            </div>
+        </div>
+    </section>
 
-                <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-violet-400 font-medium">Live Demo</span>
-                            <button @click="demoPlaying = !demoPlaying" 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>
+    <!-- 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="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 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="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 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="space-y-4">
-                            <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">Natural intonation patterns</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">Emotional expression control</span>
+                </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="flex items-center space-x-3">
-                                <div class="w-3 h-3 bg-blue-500 rounded-full"></div>
-<span class="text-gray-300">Real-time voice cloning</span>
+                            <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>
@@ -166,7 +224,7 @@ View Pricing
             </div>
         </div>
     </section>
-    <!-- Features 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">
@@ -237,63 +295,7 @@ View Pricing
             </div>
         </div>
     </section>
-    <!-- Demo Section -->
-    <section id="demo" class="py-20 lg:py-32 bg-gradient-to-br from-gray-900 to-black">
-<div class="container mx-auto px-6">
-            <div class="text-center mb-16">
-                <h2 class="text-4xl lg:text-5xl font-bold mb-4">
-                    Experience the <span class="gradient-text">Difference</span>
-                </h2>
-                <p class="text-xl text-gray-400 max-w-3xl mx-auto">
-                    Try our interactive demo and hear the quality for yourself
-                </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">Enter your text</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="Type something here to hear it spoken...">VoiceFlow AI delivers the most natural and expressive text-to-speech you've ever heard. Our advanced neural networks understand context, emotion, and intention to create truly human-like speech.</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">Voice</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>Emma (US English)</option>
-                                <option>James (UK English)</option>
-                                <option>Sophia (Australian)</option>
-                                <option>Lucas (Canadian)</option>
-                            </select>
-                        </div>
-                        <div>
-                            <label class="block text-sm font-medium text-gray-300 mb-2">Speed</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">Emotion</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>Neutral</option>
-                                <option>Happy</option>
-                                <option>Sad</option>
-                                <option>Excited</option>
-                                <option>Professional</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>Generate Speech</span>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Pricing 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">