96 lines
3.1 KiB
TypeScript
96 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useState } from "react";
|
|
import { Menu, X } from "lucide-react";
|
|
|
|
const navigation = [
|
|
{ name: "Home", href: "/" },
|
|
{ name: "Services", href: "/services" },
|
|
{ name: "Solutions", href: "/solutions" },
|
|
{ name: "About", href: "/about" },
|
|
{ name: "Contact", href: "/contact" },
|
|
];
|
|
|
|
export default function Header() {
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
|
|
return (
|
|
<header className="sticky top-0 z-50 bg-white border-b border-zinc-100">
|
|
<nav className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
|
|
{/* Logo */}
|
|
<Link href="/" className="flex items-center gap-2">
|
|
<div className="w-10 h-10 bg-red-600 rounded-lg flex items-center justify-center">
|
|
<span className="text-white font-bold text-lg">AB</span>
|
|
</div>
|
|
<span className="text-xl font-bold text-zinc-900 hidden sm:block">
|
|
AB Group
|
|
</span>
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div className="hidden md:flex md:items-center md:gap-8">
|
|
{navigation.map((item) => (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className="text-sm font-medium text-zinc-600 hover:text-zinc-900 transition-colors"
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* CTA Button */}
|
|
<div className="hidden md:block">
|
|
<Link
|
|
href="/contact"
|
|
className="inline-flex items-center justify-center px-5 py-2.5 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 transition-colors"
|
|
>
|
|
Get a Quote
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Mobile menu button */}
|
|
<button
|
|
type="button"
|
|
className="md:hidden p-2 text-zinc-600 hover:text-zinc-900"
|
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
|
>
|
|
<span className="sr-only">Toggle menu</span>
|
|
{mobileMenuOpen ? (
|
|
<X className="h-6 w-6" />
|
|
) : (
|
|
<Menu className="h-6 w-6" />
|
|
)}
|
|
</button>
|
|
</nav>
|
|
|
|
{/* Mobile Navigation */}
|
|
{mobileMenuOpen && (
|
|
<div className="md:hidden border-t border-zinc-100 bg-white">
|
|
<div className="px-4 py-4 space-y-3">
|
|
{navigation.map((item) => (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className="block text-base font-medium text-zinc-600 hover:text-zinc-900 transition-colors"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
<Link
|
|
href="/contact"
|
|
className="block w-full text-center px-5 py-2.5 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 transition-colors mt-4"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
Get a Quote
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</header>
|
|
);
|
|
}
|