add more pages - Follow Up Deployment

index.html

@@ -64,21 +64,33 @@
             
             <nav class="hidden md:block">
                 <ul class="flex space-x-8">
-                    <li><a href="#" class="text-gray-600 hover:text-indigo-600 transition font-medium relative group">
+                    <li><a href="index.html" class="text-gray-600 hover:text-indigo-600 transition font-medium relative group">
                         Home
                         <span class="absolute left-0 -bottom-1 w-0 h-0.5 bg-indigo-600 transition-all group-hover:w-full"></span>
                     </a></li>
-                    <li><a href="#" class="text-gray-600 hover:text-indigo-600 transition font-medium relative group">
+                    <li><a href="jobs.html" class="text-gray-600 hover:text-indigo-600 transition font-medium relative group">
                         Jobs
                         <span class="absolute left-0 -bottom-1 w-0 h-0.5 bg-indigo-600 transition-all group-hover:w-full"></span>
                     </a></li>
+                    <li><a href="companies.html" class="text-gray-600 hover:text-indigo-600 transition font-medium relative group">
+                        Companies
+                        <span class="absolute left-0 -bottom-1 w-0 h-0.5 bg-indigo-600 transition-all group-hover:w-full"></span>
+                    </a></li>
+                    <li><a href="about.html" class="text-gray-600 hover:text-indigo-600 transition font-medium relative group">
+                        About
+                        <span class="absolute left-0 -bottom-1 w-0 h-0.5 bg-indigo-600 transition-all group-hover:w-full"></span>
+                    </a></li>
+                    <li><a href="contact.html" class="text-gray-600 hover:text-indigo-600 transition font-medium relative group">
+                        Contact
+                        <span class="absolute left-0 -bottom-1 w-0 h-0.5 bg-indigo-600 transition-all group-hover:w-full"></span>
+                    </a></li>
                     <li><a href="#" class="px-6 py-2 bg-indigo-600 text-white rounded-full hover:bg-indigo-700 transition font-medium shadow-md">
                         Find a Job
                     </a></li>
                 </ul>
             </nav>
             
-            <button class="md:hidden text-gray-700 focus:outline-none">
+            <button class="md:hidden text-gray-700 focus:outline-none" id="mobile-menu-button">
                 <ion-icon name="menu-outline" class="text-2xl"></ion-icon>
             </button>
         </div>
@@ -771,32 +783,57 @@
                 }, 5000);
             }
             
-            // Mobile menu toggle
-            const mobileMenuButton = document.querySelector('button.md\\:hidden');
+            // Mobile menu functionality
+            const mobileMenuButton = document.getElementById('mobile-menu-button');
+            
+            // Create mobile menu overlay
             const mobileMenu = document.createElement('div');
-            mobileMenu.className = 'hidden fixed inset-0 bg-white z-50 flex items-center justify-center';
+            mobileMenu.id = 'mobile-menu';
+            mobileMenu.className = 'hidden fixed inset-0 bg-white z-50 flex flex-col items-center justify-center';
             mobileMenu.innerHTML = `
                 <div class="absolute top-4 right-4">
-                    <button class="text-gray-700 focus:outline-none close-mobile-menu">
+                    <button id="close-mobile-menu" class="text-gray-700 focus:outline-none">
                         <ion-icon name="close-outline" class="text-3xl"></ion-icon>
                     </button>
                 </div>
-                <ul class="text-center space-y-8">
-                    <li><a href="#" class="text-2xl font-medium text-gray-700 hover:text-indigo-600">Home</a></li>
-                    <li><a href="#" class="text-2xl font-medium text-gray-700 hover:text-indigo-600">Jobs</a></li>
-                    <li><a href="#" class="text-2xl font-medium px-8 py-3 bg-indigo-600 text-white rounded-full inline-block">Find a Job</a></li>
+                <ul class="text-center space-y-8 px-4">
+                    <li><a href="index.html" class="text-2xl font-medium text-gray-700 hover:text-indigo-600 transition-colors">Home</a></li>
+                    <li><a href="jobs.html" class="text-2xl font-medium text-gray-700 hover:text-indigo-600 transition-colors">Jobs</a></li>
+                    <li><a href="companies.html" class="text-2xl font-medium text-gray-700 hover:text-indigo-600 transition-colors">Companies</a></li>
+                    <li><a href="about.html" class="text-2xl font-medium text-gray-700 hover:text-indigo-600 transition-colors">About</a></li>
+                    <li><a href="contact.html" class="text-2xl font-medium text-gray-700 hover:text-indigo-600 transition-colors">Contact</a></li>
+                    <li><a href="jobs.html" class="text-2xl font-medium px-8 py-3 bg-indigo-600 text-white rounded-full hover:bg-indigo-700 transition inline-block">Find a Job</a></li>
                 </ul>
             `;
             document.body.appendChild(mobileMenu);
+
+            // Toggle menu function
+            function toggleMobileMenu(show) {
+                const mobileMenu = document.getElementById('mobile-menu');
+                if (show) {
+                    mobileMenu.classList.remove('hidden');
+                    document.body.style.overflow = 'hidden';
+                    
+                    // Animate menu appearance
+                    gsap.from(mobileMenu, {
+                        opacity: 0,
+                        duration: 0.2,
+                        ease: "power2.out"
+                    });
+                } else {
+                    mobileMenu.classList.add('hidden');
+                    document.body.style.overflow = 'auto';
+                }
+            }
+
+            // Event listeners
+            mobileMenuButton.addEventListener('click', () => toggleMobileMenu(true));
             
-            mobileMenuButton.addEventListener('click', () => {
-                mobileMenu.classList.remove('hidden');
-                document.body.style.overflow = 'hidden';
-            });
+            document.getElementById('close-mobile-menu').addEventListener('click', () => toggleMobileMenu(false));
             
-            mobileMenu.querySelector('.close-mobile-menu').addEventListener('click', () => {
-                mobileMenu.classList.add('hidden');
-                document.body.style.overflow = 'auto';
+            // Close when clicking on a link
+            mobileMenu.querySelectorAll('a').forEach(link => {
+                link.addEventListener('click', () => toggleMobileMenu(false));
             });
             
             // Smooth scrolling for anchor links