107 lines
3.9 KiB
TypeScript
107 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useState } from "react";
|
|
import { Menu, X } from "lucide-react";
|
|
import Button from "./Button";
|
|
|
|
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/80 backdrop-blur-lg border-b border-zinc-100/50">
|
|
<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 group">
|
|
<div className="w-10 h-10 bg-gradient-to-br from-red-500 to-red-700 rounded-lg flex items-center justify-center shadow-lg shadow-red-500/20 group-hover:shadow-red-500/40 transition-all duration-300 group-hover:scale-105">
|
|
<span className="text-white font-bold text-lg">AB</span>
|
|
</div>
|
|
<span className="text-xl font-bold text-zinc-900 hidden sm:block group-hover:text-red-600 transition-colors duration-300">
|
|
AB Group
|
|
</span>
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div className="hidden md:flex md:items-center md:gap-1">
|
|
{navigation.map((item) => (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className="relative px-4 py-2 text-sm font-medium text-zinc-600 hover:text-red-600 transition-colors duration-300 group"
|
|
>
|
|
{item.name}
|
|
<span className="absolute bottom-0 left-1/2 -translate-x-1/2 w-0 h-0.5 bg-gradient-to-r from-red-500 to-red-600 group-hover:w-3/4 transition-all duration-300 rounded-full" />
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* CTA Button */}
|
|
<div className="hidden md:block">
|
|
<Button href="/contact" size="sm">
|
|
Get a Quote
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Mobile menu button */}
|
|
<button
|
|
type="button"
|
|
className="md:hidden p-2 text-zinc-600 hover:text-red-600 hover:bg-red-50 rounded-lg transition-all duration-300"
|
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
|
>
|
|
<span className="sr-only">Toggle menu</span>
|
|
<div className="relative w-6 h-6">
|
|
<Menu
|
|
className={`absolute inset-0 h-6 w-6 transition-all duration-300 ${
|
|
mobileMenuOpen ? "opacity-0 rotate-90" : "opacity-100 rotate-0"
|
|
}`}
|
|
/>
|
|
<X
|
|
className={`absolute inset-0 h-6 w-6 transition-all duration-300 ${
|
|
mobileMenuOpen ? "opacity-100 rotate-0" : "opacity-0 -rotate-90"
|
|
}`}
|
|
/>
|
|
</div>
|
|
</button>
|
|
</nav>
|
|
|
|
{/* Mobile Navigation */}
|
|
<div
|
|
className={`md:hidden overflow-hidden transition-all duration-300 ease-in-out ${
|
|
mobileMenuOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
|
|
}`}
|
|
>
|
|
<div className="px-4 py-4 space-y-1 bg-white border-t border-zinc-100">
|
|
{navigation.map((item, index) => (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className="block px-4 py-3 text-base font-medium text-zinc-600 hover:text-red-600 hover:bg-red-50 rounded-lg transition-all duration-300"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
style={{ animationDelay: `${index * 50}ms` }}
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
<div className="pt-2">
|
|
<Button
|
|
href="/contact"
|
|
className="w-full"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
Get a Quote
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|