when your click on demo then let the player play the video - Follow Up Deployment

index.html

@@ -61,6 +61,7 @@
                 <a href="#features" class="nav-link text-purple-200 hover:text-white font-medium">Features</a>
                 <a href="#create" class="nav-link text-purple-200 hover:text-white font-medium">Create</a>
                 <a href="#pricing" class="nav-link text-purple-200 hover:text-white font-medium">Pricing</a>
+                <button id="demo-toggle" class="text-purple-200 hover:text-white font-medium">Demo</button>
             </div>
             <button id="mobile-menu-button" class="md:hidden text-gray-600">
                 <i class="fas fa-bars text-xl"></i>
@@ -134,6 +135,41 @@
                 </div>
             </section>
 
+            <!-- Social Promo Box -->
+         <section id="social-promo" class="mb-16 bg-gradient-to-r from-purple-50 to-indigo-50 py-12 rounded-2xl hidden">
+  <div class="max-w-6xl mx-auto px-4">
+    <h2 class="text-3xl font-bold text-gray-800 mb-6 text-center">See Our AI in Action</h2>
+    <p class="text-lg text-gray-600 mb-8 text-center">Explore our latest creations on social media</p>
+
+    <!-- Full-width video -->
+    <div class="w-full aspect-video bg-black rounded-xl overflow-hidden mb-6">
+      <iframe
+        class="w-full h-full"
+        src="about:blank"
+        data-src="https://www.youtube.com/embed/videoseries?list=PL8HXQOLwB6k0N8m2Ql2paDAY_n_KdXSSM"
+        allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen
+        title="YouTube Playlist Player">
+      </iframe>
+    </div>
+
+    <!-- Small social buttons centered below -->
+    <div class="flex justify-center gap-4">
+      <a href="https://www.instagram.com/ohamlab/reels" target="_blank"
+        class="flex items-center gap-2 text-xs bg-gradient-to-r from-pink-500 to-purple-500 text-white px-3 py-1.5 rounded-full shadow hover:opacity-90 transition">
+        <i class="fab fa-instagram text-base"></i>
+        <span>Instagram</span>
+      </a>
+      <a href="https://www.youtube.com/@Rahul7starAI/shorts" target="_blank"
+        class="flex items-center gap-2 text-xs bg-gradient-to-r from-red-600 to-red-500 text-white px-3 py-1.5 rounded-full shadow hover:opacity-90 transition">
+        <i class="fab fa-youtube text-base"></i>
+        <span>YouTube</span>
+      </a>
+    </div>
+  </div>
+</section>
+
+
             <!-- Upload Section -->
             <section id="create" class="mb-12 bg-white rounded-xl shadow-lg p-6 hidden border border-gray-200">
                 <h2 class="text-xl font-semibold text-gray-800 mb-6">Create Your AI Clone</h2>
@@ -871,6 +907,24 @@
         document.getElementById('mobile-menu-button').addEventListener('click', () => {
             showToast("Mobile menu would open here");
         });
+
+        // Demo toggle functionality
+        document.getElementById('demo-toggle').addEventListener('click', () => {
+            const promoSection = document.getElementById('social-promo');
+            const iframe = promoSection.querySelector('iframe');
+            
+            promoSection.classList.toggle('hidden');
+            
+            if (!promoSection.classList.contains('hidden')) {
+                // Load video when showing
+                iframe.src = iframe.dataset.src + '&autoplay=1';
+                // Scroll to the promo section
+                promoSection.scrollIntoView({ behavior: 'smooth' });
+            } else {
+                // Unload video when hiding
+                iframe.src = 'about:blank';
+            }
+        });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=rahul7star/ai-clone-me" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>