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
@@ -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>
 
@@ -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>
   )
 }