for the mobile version instead of a horizantal navigation bar make it horizantal

index.html

@@ -60,17 +60,24 @@
                     <i data-feather="zap" class="text-yellow-500"></i>
                     <span class="text-2xl font-bold font-['Bebas+Neue'] tracking-wider text-yellow-500">AMPLIFY</span>
                 </div>
-                
-                <div class="hidden md:flex items-center space-x-8">
-                    <a href="index.html" class="text-white hover:text-yellow-500 transition">Home</a>
-                    <a href="index.html#features" class="text-white hover:text-yellow-500 transition">Features</a>
-                    <a href="index.html#pricing" class="text-white hover:text-yellow-500 transition">Pricing</a>
-                    <a href="about.html" class="text-white hover:text-yellow-500 transition">About</a>
-                    <a href="currency.html" class="text-white hover:text-yellow-500 transition">Currency</a>
-                    <a href="events.html" class="text-white hover:text-yellow-500 transition">Events</a>
-                    <a href="results.html" class="text-white hover:text-yellow-500 transition">Results</a>
-</div>
-                <div class="flex items-center space-x-4">
+            <!-- Mobile menu button -->
+            <div class="md:hidden">
+                <button id="mobile-menu-button" class="text-white focus:outline-none">
+                    <i data-feather="menu"></i>
+                </button>
+            </div>
+
+            <!-- Desktop Navigation -->
+            <div class="hidden md:flex items-center space-x-8">
+                <a href="index.html" class="text-white hover:text-yellow-500 transition">Home</a>
+                <a href="index.html#features" class="text-white hover:text-yellow-500 transition">Features</a>
+                <a href="index.html#pricing" class="text-white hover:text-yellow-500 transition">Pricing</a>
+                <a href="about.html" class="text-white hover:text-yellow-500 transition">About</a>
+                <a href="currency.html" class="text-white hover:text-yellow-500 transition">Currency</a>
+                <a href="events.html" class="text-white hover:text-yellow-500 transition">Events</a>
+                <a href="results.html" class="text-white hover:text-yellow-500 transition">Results</a>
+            </div>
+<div class="flex items-center space-x-4">
                         <div class="relative">
                             <button id="cart-button" class="flex items-center space-x-1 bg-black bg-opacity-50 px-3 py-2 rounded-lg border border-yellow-500 hover:bg-yellow-500 hover:text-black transition">
                                 <i data-feather="shopping-cart" class="text-yellow-500 hover:text-black"></i>
@@ -599,10 +606,39 @@
             </div>
         </div>
     </footer>
+    <!-- Mobile Menu -->
+    <div id="mobile-menu" class="hidden fixed inset-0 bg-black bg-opacity-90 z-50 flex flex-col items-center justify-center">
+        <button id="mobile-menu-close" class="absolute top-4 right-4 text-white text-2xl">
+            <i data-feather="x"></i>
+        </button>
+        <div class="flex flex-col space-y-6 text-center">
+            <a href="index.html" class="text-2xl text-white hover:text-yellow-500 transition">Home</a>
+            <a href="index.html#features" class="text-2xl text-white hover:text-yellow-500 transition">Features</a>
+            <a href="index.html#pricing" class="text-2xl text-white hover:text-yellow-500 transition">Pricing</a>
+            <a href="about.html" class="text-2xl text-white hover:text-yellow-500 transition">About</a>
+            <a href="currency.html" class="text-2xl text-white hover:text-yellow-500 transition">Currency</a>
+            <a href="events.html" class="text-2xl text-white hover:text-yellow-500 transition">Events</a>
+            <a href="results.html" class="text-2xl text-white hover:text-yellow-500 transition">Results</a>
+        </div>
+    </div>
 
     <script>
+        // Mobile menu toggle
+        const mobileMenuButton = document.getElementById('mobile-menu-button');
+        const mobileMenu = document.getElementById('mobile-menu');
+        const mobileMenuClose = document.getElementById('mobile-menu-close');
+        
+        mobileMenuButton.addEventListener('click', () => {
+            mobileMenu.classList.remove('hidden');
+            feather.replace();
+        });
+        
+        mobileMenuClose.addEventListener('click', () => {
+            mobileMenu.classList.add('hidden');
+        });
+
         // Performance Dashboard Animation
-        document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', function() {
             const metrics = ['confidence-level', 'stress-level', 'focus-level'];
             const performanceBar = document.getElementById('performance-bar');
             function updateMetrics() {