the category page navigation doesnt work yet - Follow Up Deployment

index.html

@@ -30,33 +30,74 @@
         }
     </style>
     <script>
-        // Handle deals page navigation
+        // Handle page navigation
         document.addEventListener('DOMContentLoaded', function() {
-            const dealsNavLink = document.getElementById('deals-nav-link');
-            const mobileDealsNavLink = document.getElementById('mobile-deals-nav-link');
+            // Get all page elements
             const landingPage = document.getElementById('landing-page');
             const dealsPage = document.getElementById('deals-page');
+            const categoryPage = document.getElementById('category-page');
             
-            function showDealsPage() {
+            // Get navigation links
+            const dealsNavLink = document.getElementById('deals-nav-link');
+            const mobileDealsNavLink = document.getElementById('mobile-deals-nav-link');
+            const categoriesNavLinks = document.querySelectorAll('[data-nav="categories"]');
+            const mobileCategoriesNavLinks = document.querySelectorAll('[data-nav="mobile-categories"]');
+            
+            function showPage(page) {
+                // Hide all pages
                 landingPage.classList.add('hidden');
-                dealsPage.classList.remove('hidden');
+                dealsPage.classList.add('hidden');
+                categoryPage.classList.add('hidden');
+                
+                // Show requested page
+                if (page === 'deals') {
+                    dealsPage.classList.remove('hidden');
+                } else if (page === 'categories') {
+                    categoryPage.classList.remove('hidden');
+                } else {
+                    landingPage.classList.remove('hidden');
+                }
+                
                 // Update active state in navigation
                 document.querySelectorAll('nav a').forEach(link => {
                     link.classList.remove('border-blue-500', 'text-gray-900');
                     link.classList.add('border-transparent', 'text-gray-500');
                 });
-                dealsNavLink.classList.remove('border-transparent', 'text-gray-500');
-                dealsNavLink.classList.add('border-blue-500', 'text-gray-900');
+                
+                if (page === 'deals') {
+                    dealsNavLink.classList.remove('border-transparent', 'text-gray-500');
+                    dealsNavLink.classList.add('border-blue-500', 'text-gray-900');
+                } else if (page === 'categories') {
+                    categoriesNavLinks.forEach(link => {
+                        link.classList.remove('border-transparent', 'text-gray-500');
+                        link.classList.add('border-blue-500', 'text-gray-900');
+                    });
+                }
             }
             
+            // Navigation event listeners
             dealsNavLink.addEventListener('click', function(e) {
                 e.preventDefault();
-                showDealsPage();
+                showPage('deals');
             });
             
             mobileDealsNavLink.addEventListener('click', function(e) {
                 e.preventDefault();
-                showDealsPage();
+                showPage('deals');
+            });
+            
+            categoriesNavLinks.forEach(link => {
+                link.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    showPage('categories');
+                });
+            });
+            
+            mobileCategoriesNavLinks.forEach(link => {
+                link.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    showPage('categories');
+                });
             });
             
             // Deal countdown timer
@@ -109,7 +150,7 @@
                     </a>
                     <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
                         <a href="#" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
-                        <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Categories</a>
+                        <a href="#" data-nav="categories" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Categories</a>
                         <a href="#" id="deals-nav-link" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Deals</a>
                         <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Sell</a>
                     </div>
@@ -155,7 +196,7 @@
         <div id="mobile-menu" class="hidden sm:hidden">
             <div class="pt-2 pb-3 space-y-1">
                 <a href="#" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
-                <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Categories</a>
+                <a href="#" data-nav="mobile-categories" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Categories</a>
                 <a href="#" id="mobile-deals-nav-link" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Deals</a>
                 <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Sell</a>
             </div>