make the nav bar vertical

index.html

@@ -51,32 +51,54 @@
             </button>
         </div>
     </div>
-
     <!-- Navigation -->
-<nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
-        <div class="container mx-auto px-6 py-4">
-            <div class="flex justify-between items-center">
-                <div class="flex items-center space-x-2">
-                    <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>
-            <!-- Mobile menu button -->
-            <div class="md:hidden">
-                <button id="mobile-menu-button" class="text-white focus:outline-none">
-                    <i data-feather="menu"></i>
-                </button>
+    <nav class="fixed z-10 bg-black bg-opacity-80 border-r border-gold-500 h-full w-64">
+        <div class="p-6">
+            <div class="flex items-center space-x-2 mb-8">
+                <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>
 
-            <!-- 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>
+            <!-- Vertical Navigation -->
+            <div class="flex flex-col space-y-4">
+                <a href="index.html" class="text-white hover:text-yellow-500 transition flex items-center space-x-2">
+                    <i data-feather="home" class="w-5 h-5"></i>
+                    <span>Home</span>
+                </a>
+                <a href="index.html#features" class="text-white hover:text-yellow-500 transition flex items-center space-x-2">
+                    <i data-feather="zap" class="w-5 h-5"></i>
+                    <span>Features</span>
+                </a>
+                <a href="index.html#pricing" class="text-white hover:text-yellow-500 transition flex items-center space-x-2">
+                    <i data-feather="dollar-sign" class="w-5 h-5"></i>
+                    <span>Pricing</span>
+                </a>
+                <a href="about.html" class="text-white hover:text-yellow-500 transition flex items-center space-x-2">
+                    <i data-feather="info" class="w-5 h-5"></i>
+                    <span>About</span>
+                </a>
+                <a href="currency.html" class="text-white hover:text-yellow-500 transition flex items-center space-x-2">
+                    <i data-feather="dollar-sign" class="w-5 h-5"></i>
+                    <span>Currency</span>
+                </a>
+                <a href="events.html" class="text-white hover:text-yellow-500 transition flex items-center space-x-2">
+                    <i data-feather="calendar" class="w-5 h-5"></i>
+                    <span>Events</span>
+                </a>
+                <a href="results.html" class="text-white hover:text-yellow-500 transition flex items-center space-x-2">
+                    <i data-feather="award" class="w-5 h-5"></i>
+                    <span>Results</span>
+                </a>
             </div>
+
+            <div class="mt-8 pt-6 border-t border-gray-800">
+                <a href="login.html" class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold px-4 py-2 rounded-lg transition flex items-center justify-center space-x-2">
+                    <i data-feather="user" class="w-5 h-5"></i>
+                    <span>Login</span>
+                </a>
+            </div>
+        </div>
+    </nav>
 <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">
@@ -210,10 +232,9 @@
             </div>
         </div>
     </nav>
-
     <!-- Hero Section -->
-    <section class="relative z-10 hero-gradient min-h-screen flex items-center">
-        <div class="container mx-auto px-6 py-20 md:py-32">
+    <section class="relative z-0 hero-gradient min-h-screen flex items-center">
+<div class="container mx-auto px-6 py-20 md:py-32">
             <div class="flex flex-col md:flex-row items-center">
                 <div class="md:w-1/2 mb-12 md:mb-0">
                     <h1 class="text-5xl md:text-7xl font-bold font-['Bebas+Neue'] mb-6 tracking-wider">
@@ -563,22 +584,10 @@ Start 7-Day Free Trial
             </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>
-    <!-- Add i18next libraries -->
+    </main>
+<!-- Main content needs left margin to account for sidebar -->
+    <main class="ml-64">
+<!-- Add i18next libraries -->
     <script src="https://unpkg.com/i18next/dist/umd/i18next.min.js"></script>
     <script src="https://unpkg.com/i18next-browser-languagedetector/i18nextBrowserLanguageDetector.js"></script>
     <script src="https://unpkg.com/i18next-http-backend/i18nextHttpBackend.js"></script>