feat: add Contact link to header nav that opens ContactModal

src/components/layout/Header.tsx

@@ -5,10 +5,12 @@ import Link from 'next/link'
 import { useState } from 'react'
 import { usePathname } from 'next/navigation'
 import { Menu, X } from 'lucide-react'
+import ContactModal from '../shared/ContactModal'
 
 export default function Header() {
   const pathname = usePathname()
   const [isOpen, setIsOpen] = useState(false)
+  const [isContactModalOpen, setIsContactModalOpen] = useState(false)
 
   const isActive = (path: string) => {
     return pathname === path
@@ -61,13 +63,13 @@ export default function Header() {
               <li key={item.path}>
                 <Link href={item.path} className="relative group">
                   <span className={`transition-colors ${
-                    isActive(item.path) 
-                      ? 'text-blue-600' 
+                    isActive(item.path)
+                      ? 'text-blue-600'
                       : 'hover:text-blue-600'
                   }`}>
                     {item.label}
                   </span>
-                  <motion.div 
+                  <motion.div
                     className={`absolute -bottom-1 left-0 h-0.5 bg-gradient-to-r from-blue-600 to-mcdi-maroon transition-all duration-300 ${
                       isActive(item.path) ? 'w-full' : 'w-0 group-hover:w-full'
                     }`}
@@ -75,6 +77,12 @@ export default function Header() {
                 </Link>
               </li>
             ))}
+            <li>
+              <button onClick={() => setIsContactModalOpen(true)} className="relative group">
+                <span className="transition-colors hover:text-blue-600">Contact</span>
+                <motion.div className="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-blue-600 to-mcdi-maroon transition-all duration-300 group-hover:w-full" />
+              </button>
+            </li>
           </ul>
         </nav>
 
@@ -95,12 +103,12 @@ export default function Header() {
         >
           <ul className="flex flex-col p-4 space-y-4">
             {navItems.map((item) => (
-              <motion.li 
+              <motion.li
                 key={item.path}
                 whileHover={{ x: 10 }}
                 whileTap={{ scale: 0.95 }}
               >
-                <Link 
+                <Link
                   href={item.path}
                   className={`block p-2 rounded-lg ${
                     isActive(item.path)
@@ -113,9 +121,19 @@ export default function Header() {
                 </Link>
               </motion.li>
             ))}
+            <motion.li whileHover={{ x: 10 }} whileTap={{ scale: 0.95 }}>
+              <button
+                className="block w-full text-left p-2 rounded-lg hover:bg-gray-50"
+                onClick={() => { setIsOpen(false); setIsContactModalOpen(true) }}
+              >
+                Contact
+              </button>
+            </motion.li>
           </ul>
         </motion.nav>
       </div>
+
+      <ContactModal isOpen={isContactModalOpen} onClose={() => setIsContactModalOpen(false)} />
     </motion.header>
   )
 }