make everything functional every single option and pop up perfect it

index.html

@@ -131,10 +131,10 @@
                         <span class="text-yellow-500 font-semibold">Elite performance.</span>
                     </p>
                     <div class="flex space-x-4">
-                        <button class="bg-gradient-to-r from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900 text-white font-bold px-8 py-4 rounded-full text-lg transition-all transform hover:scale-105 hover:shadow-lg hover:shadow-blue-500/30">
+                        <button class="bg-gradient-to-r from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900 text-white font-bold px-8 py-4 rounded-full text-lg transition-all transform hover:scale-105 hover:shadow-lg hover:shadow-blue-500/30 cta-button">
                             Get Started
                         </button>
-                        <button class="bg-black border-2 border-yellow-500 hover:bg-yellow-500 hover:text-black text-white font-bold px-8 py-4 rounded-full text-lg transition-all transform hover:scale-105 flex items-center">
+                        <button class="bg-black border-2 border-yellow-500 hover:bg-yellow-500 hover:text-black text-white font-bold px-8 py-4 rounded-full text-lg transition-all transform hover:scale-105 flex items-center cta-button">
                             <i data-feather="play-circle" class="mr-2"></i> View Demo
                         </button>
                     </div>
@@ -304,7 +304,7 @@
                             <span class="text-gray-500">Limited scenario library</span>
                         </li>
                     </ul>
-                    <button class="w-full bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-lg transition">
+                    <button class="w-full bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-lg transition cta-button">
                         Get Started
                     </button>
                 </div>
@@ -337,7 +337,7 @@
                             <span class="text-gray-500">Limited professional access</span>
                         </li>
                     </ul>
-                    <button class="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-3 rounded-lg transition">
+                    <button class="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-3 rounded-lg transition cta-button">
                         Get Started
                     </button>
                 </div>
@@ -367,7 +367,7 @@
                             <span>Full scenario library + custom builds</span>
                         </li>
                     </ul>
-                    <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition">
+                    <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition cta-button">
                         Get Started
                     </button>
                 </div>
@@ -393,12 +393,12 @@
                         We at Amplify don't just prepare you for big moments- we help you create them. Our VR headset brings nervous scenarios to life so you can practice and prepare, while our AR technology provides hands-on learning in real-world environments.
                     </p>
                     <div class="flex space-x-4">
-                        <button class="border-2 border-yellow-500 hover:bg-yellow-500 hover:text-black text-white font-bold px-6 py-3 rounded-lg transition flex items-center">
-                            <i data-feather="users" class="mr-2"></i> Meet the Team
-                        </button>
-                        <button class="border-2 border-red-500 hover:bg-red-500 hover:text-white text-white font-bold px-6 py-3 rounded-lg transition flex items-center">
-                            <i data-feather="book" class="mr-2"></i> Our Story
-                        </button>
+                    <button class="border-2 border-yellow-500 hover:bg-yellow-500 hover:text-black text-white font-bold px-6 py-3 rounded-lg transition flex items-center cta-button">
+                        <i data-feather="users" class="mr-2"></i> Meet the Team
+                    </button>
+                    <button class="border-2 border-red-500 hover:bg-red-500 hover:text-white text-white font-bold px-6 py-3 rounded-lg transition flex items-center cta-button">
+                        <i data-feather="book" class="mr-2"></i> Our Story
+</button>
                     </div>
                 </div>
                 <div class="md:w-1/2">
@@ -434,7 +434,7 @@
             <p class="text-xl mb-12 max-w-2xl mx-auto text-gray-300">
                 Join thousands of athletes, performers, and professionals who are mastering their minds with our technology.
             </p>
-                    <button class="bg-gradient-to-r from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900 text-white font-bold px-10 py-5 rounded-full text-xl transition-all transform hover:scale-105 hover:shadow-lg hover:shadow-blue-500/30 flex items-center mx-auto">
+                    <button class="bg-gradient-to-r from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900 text-white font-bold px-10 py-5 rounded-full text-xl transition-all transform hover:scale-105 hover:shadow-lg hover:shadow-blue-500/30 flex items-center mx-auto cta-button">
                         <i data-feather="zap" class="mr-2"></i> Start Your Free Trial
                     </button>
                     <p class="mt-4 text-gray-400 text-sm">*7 days free then $9.99/mo. Cancel anytime.</p>
@@ -514,22 +514,33 @@
     </footer>
 
     <script>
-        // Simplified Dropdown Toggle Logic
+        // Enhanced Dropdown Toggle Logic with Keyboard Navigation
         const languageBtn = document.getElementById('language-btn');
         const currencyBtn = document.getElementById('currency-btn');
         const languageDropdown = document.getElementById('language-dropdown');
         const currencyDropdown = document.getElementById('currency-dropdown');
 
+        // Toggle dropdowns
+        const toggleDropdowns = (dropdownToShow, dropdownToHide) => {
+            dropdownToShow.classList.toggle('hidden');
+            dropdownToHide.classList.add('hidden');
+            
+            // Focus first item when dropdown opens
+            if (!dropdownToShow.classList.contains('hidden')) {
+                setTimeout(() => {
+                    dropdownToShow.querySelector('a').focus();
+                }, 100);
+            }
+        };
+
         languageBtn.addEventListener('click', (e) => {
             e.stopPropagation();
-            languageDropdown.classList.toggle('hidden');
-            currencyDropdown.classList.add('hidden');
+            toggleDropdowns(languageDropdown, currencyDropdown);
         });
 
         currencyBtn.addEventListener('click', (e) => {
             e.stopPropagation();
-            currencyDropdown.classList.toggle('hidden');
-            languageDropdown.classList.add('hidden');
+            toggleDropdowns(currencyDropdown, languageDropdown);
         });
 
         // Close dropdowns when clicking outside
@@ -538,13 +549,44 @@
             currencyDropdown.classList.add('hidden');
         });
 
-        // Handle selections
+        // Keyboard navigation for dropdowns
+        const handleDropdownKeyboardNav = (dropdown, btn) => {
+            const items = dropdown.querySelectorAll('a');
+            const firstItem = items[0];
+            const lastItem = items[items.length - 1];
+            
+            items.forEach(item => {
+                item.addEventListener('keydown', (e) => {
+                    // Close on Escape
+                    if (e.key === 'Escape') {
+                        dropdown.classList.add('hidden');
+                        btn.focus();
+                    }
+                    
+                    // Navigate with arrow keys
+                    if (e.key === 'ArrowDown') {
+                        e.preventDefault();
+                        if (item === lastItem) firstItem.focus();
+                        else item.nextElementSibling.focus();
+                    }
+                    
+                    if (e.key === 'ArrowUp') {
+                        e.preventDefault();
+                        if (item === firstItem) lastItem.focus();
+                        else item.previousElementSibling.focus();
+                    }
+                });
+            });
+        };
+
+        // Handle selections with proper focus management
         document.querySelectorAll('#language-dropdown a').forEach(item => {
             item.addEventListener('click', (e) => {
                 e.preventDefault();
                 document.querySelector('#language-btn span').textContent = 
                     item.getAttribute('data-lang').toUpperCase();
                 languageDropdown.classList.add('hidden');
+                languageBtn.focus();
             });
         });
 
@@ -554,13 +596,18 @@
                 document.querySelector('#currency-btn span').textContent = 
                     item.getAttribute('data-currency');
                 currencyDropdown.classList.add('hidden');
+                currencyBtn.focus();
             });
         });
 
-        // Performance Dashboard Animation
+        // Initialize keyboard nav
+        handleDropdownKeyboardNav(languageDropdown, languageBtn);
+        handleDropdownKeyboardNav(currencyDropdown, currencyBtn);
+
+        // Enhanced Performance Dashboard Animation
         document.addEventListener('DOMContentLoaded', function() {
-            const metrics = ['confidence-level', 'stress-level', 'focus-level'];
             const performanceBar = document.getElementById('performance-bar');
+            
             function updateMetrics() {
                 const realisticValues = [
                     { confidence: 87, stress: 42, focus: 93, width: 72 },
@@ -572,66 +619,170 @@
                 
                 const currentValues = realisticValues[Math.floor(Math.random() * realisticValues.length)];
                 
-                document.getElementById('confidence-level').textContent = currentValues.confidence + '%';
-                document.getElementById('stress-level').textContent = currentValues.stress + '%';
-                document.getElementById('focus-level').textContent = currentValues.focus + '%';
+                // Animate number changes
+                animateValue('confidence-level', currentValues.confidence);
+                animateValue('stress-level', currentValues.stress);
+                animateValue('focus-level', currentValues.focus);
                 
+                // Animate progress bar
+                performanceBar.style.transition = 'width 1s ease, background 1s ease';
                 performanceBar.style.width = `${currentValues.width}%`;
                 performanceBar.style.background = `linear-gradient(to right, 
                     ${currentValues.width < 30 ? '#ef4444' : currentValues.width < 70 ? '#f59e0b' : '#10b981'},
                     ${currentValues.width < 30 ? '#f59e0b' : currentValues.width < 70 ? '#10b981' : '#3b82f6'})`;
             }
             
+            // Smooth number animation
+            function animateValue(id, targetValue) {
+                const element = document.getElementById(id);
+                const start = parseInt(element.textContent);
+                const duration = 1000;
+                let startTime = null;
+                
+                function animation(currentTime) {
+                    if (!startTime) startTime = currentTime;
+                    const timeElapsed = currentTime - startTime;
+                    const progress = Math.min(timeElapsed / duration, 1);
+                    const value = Math.floor(progress * (targetValue - start) + start);
+                    element.textContent = value + '%';
+                    
+                    if (progress < 1) {
+                        requestAnimationFrame(animation);
+                    }
+                }
+                
+                requestAnimationFrame(animation);
+            }
+            
             // Update every 5 seconds
             updateMetrics();
             setInterval(updateMetrics, 5000);
-});
-        // Smooth transitions for all interactive elements
-        document.querySelectorAll('a, button').forEach(el => {
-            el.addEventListener('click', function(e) {
+            
+            // Interactive dashboard hover effects
+            performanceBar.addEventListener('mouseenter', () => {
+                performanceBar.style.transition = 'width 0.5s ease, background 0.5s ease';
+                performanceBar.style.width = '100%';
+            });
+            
+            performanceBar.addEventListener('mouseleave', () => {
+                performanceBar.style.width = `${parseInt(performanceBar.style.width)}%`;
+            });
+        });
+
+        // Enhanced Navigation with proper link handling
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                
+                const targetId = this.getAttribute('href');
+                const targetElement = document.querySelector(targetId);
+                
+                if (targetElement) {
+                    window.scrollTo({
+                        top: targetElement.offsetTop - 100,
+                        behavior: 'smooth'
+                    });
+                    
+                    // Update URL without reload
+                    history.pushState(null, null, targetId);
+                }
+            });
+        });
+
+        // Only prevent default for # links
+        document.querySelectorAll('a:not([href^="#"])').forEach(anchor => {
+            anchor.addEventListener('click', function(e) {
+                if (this.getAttribute('href') !== '#') {
+                    // Normal link behavior
+                    return;
+                }
+                
                 e.preventDefault();
-                document.body.style.opacity = '0.8';
+                document.body.style.opacity = '0.9';
                 document.body.style.transition = 'opacity 0.3s ease';
                 
                 setTimeout(() => {
-                    window.location.href = this.href || '#';
                     document.body.style.opacity = '1';
                 }, 300);
             });
         });
 
-        // Initialize Vanta.js with more dynamic colors
-        VANTA.GLOBE({
-            el: "#vanta-bg",
-            mouseControls: true,
-            touchControls: true,
-            gyroControls: false,
-            minHeight: 200.00,
-            minWidth: 200.00,
-            scale: 1.00,
-            scaleMobile: 1.00,
-            color: 0x2563eb,
-            color2: 0x1d4ed8,
-            backgroundColor: 0x0,
-            size: 0.8,
-            speed: 0.7
-        });
+        // Initialize Vanta.js with better performance
+        let vantaEffect;
+        function initVanta() {
+            if (window.innerWidth > 768) {
+                vantaEffect = VANTA.GLOBE({
+                    el: "#vanta-bg",
+                    mouseControls: true,
+                    touchControls: true,
+                    gyroControls: false,
+                    minHeight: 200.00,
+                    minWidth: 200.00,
+                    scale: 1.00,
+                    scaleMobile: 1.00,
+                    color: 0x2563eb,
+                    color2: 0x1d4ed8,
+                    backgroundColor: 0x0,
+                    size: 0.8,
+                    speed: 0.7
+                });
+            } else if (vantaEffect) {
+                vantaEffect.destroy();
+            }
+        }
 
-        // Add meme-like animations
-        document.addEventListener('DOMContentLoaded', function() {
+        // Initialize on load and resize
+        initVanta();
+        window.addEventListener('resize', initVanta);
 
+        // Enhanced Confetti Effects
+        document.addEventListener('DOMContentLoaded', function() {
             // Feather icons
             feather.replace();
             
-            // Add confetti to CTA button
-            document.querySelector('button.bg-gradient-to-r.from-purple-600').addEventListener('click', function() {
-                confetti({
-                    particleCount: 100,
-                    spread: 70,
-                    origin: { y: 0.6 },
-                    colors: ['#2563eb', '#1d4ed8', '#f59e0b', '#10b981']
+            // Add confetti to all CTA buttons
+            document.querySelectorAll('.cta-button').forEach(button => {
+                button.addEventListener('click', function() {
+                    if (this.getAttribute('href') === '#' || !this.getAttribute('href')) {
+                        confetti({
+                            particleCount: 150,
+                            spread: 90,
+                            origin: { y: 0.6 },
+                            colors: ['#2563eb', '#1d4ed8', '#f59e0b', '#10b981', '#ef4444'],
+                            shapes: ['square', 'circle'],
+                            gravity: 0.8
+                        });
+                    }
                 });
             });
+            
+            // Add subtle animation to all interactive elements
+            document.querySelectorAll('button, a, .social-btn').forEach(el => {
+                el.addEventListener('mouseenter', () => {
+                    el.style.transform = 'translateY(-3px) scale(1.05)';
+                    el.style.filter = 'drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3))';
+                });
+                
+                el.addEventListener('mouseleave', () => {
+                    el.style.transform = '';
+                    el.style.filter = 'drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25))';
+                });
+            });
+        });
+
+        // Accessibility improvements
+        document.addEventListener('keydown', function(e) {
+            // Skip to main content
+            if (e.key === '1' && e.ctrlKey) {
+                e.preventDefault();
+                document.querySelector('main')?.focus();
+            }
+            
+            // Skip to navigation
+            if (e.key === '2' && e.ctrlKey) {
+                e.preventDefault();
+                document.querySelector('nav')?.focus();
+            }
         });
 </script>
 </body>