create a see demo button . when user click that in a UI box load this youtube video https://www.youtube.com/watch?v=LRkj_ObV0T0 make it look profesional - Follow Up Deployment

index.html

@@ -96,9 +96,14 @@
             <section id="home" class="text-center py-16">
                 <h1 class="text-4xl font-bold text-gray-800 mb-4">Create Your Digital Twin</h1>
                 <p class="text-xl text-gray-600 mb-8">Generate AI-powered avatars that look just like you</p>
-                <button id="get-started-btn" class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-8 py-3 rounded-full font-medium shadow-lg hover:opacity-90 transition">
-                    Get Started
-                </button>
+                <div class="flex space-x-4 justify-center">
+                    <button id="get-started-btn" class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-8 py-3 rounded-full font-medium shadow-lg hover:opacity-90 transition">
+                        Get Started
+                    </button>
+                    <button id="demo-btn" class="bg-white text-indigo-600 border-2 border-indigo-600 px-8 py-3 rounded-full font-medium shadow-lg hover:bg-indigo-50 transition">
+                        See Demo
+                    </button>
+                </div>
             </section>
 
             <!-- Features Section -->
@@ -392,7 +397,53 @@
         </div>
     </div>
 
+    <!-- Demo Video Modal -->
+    <div id="demo-modal" class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black bg-opacity-75">
+        <div class="relative w-full max-w-4xl mx-4">
+            <div class="bg-white rounded-lg overflow-hidden shadow-xl">
+                <div class="flex justify-between items-center px-6 py-4 border-b">
+                    <h3 class="text-xl font-semibold text-gray-800">AI Clone Demo</h3>
+                    <button id="close-modal" class="text-gray-500 hover:text-gray-700">
+                        <i class="fas fa-times text-2xl"></i>
+                    </button>
+                </div>
+                <div class="p-4">
+                    <div class="aspect-w-16 aspect-h-9">
+                        <iframe id="demo-video" class="w-full h-96" src="https://www.youtube.com/embed/LRkj_ObV0T0?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <script>
+        // Demo Video Modal
+        const demoBtn = document.getElementById('demo-btn');
+        const demoModal = document.getElementById('demo-modal');
+        const closeModal = document.getElementById('close-modal');
+        const demoVideo = document.getElementById('demo-video');
+
+        demoBtn.addEventListener('click', () => {
+            demoModal.classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+        });
+
+        closeModal.addEventListener('click', () => {
+            demoModal.classList.add('hidden');
+            document.body.style.overflow = 'auto';
+            // Reset video when closing modal
+            demoVideo.src = demoVideo.src;
+        });
+
+        // Close modal when clicking outside
+        demoModal.addEventListener('click', (e) => {
+            if (e.target === demoModal) {
+                demoModal.classList.add('hidden');
+                document.body.style.overflow = 'auto';
+                demoVideo.src = demoVideo.src;
+            }
+        });
+
         // Mock user data
         const mockUser = {
             name: "John Doe",