it/web/components/Header.tsx
2025-10-26 17:52:17 +01:00

40 lines
1.6 KiB
TypeScript

import Link from "next/link";
export default function Header() {
return (
<header className="sticky top-0 z-50 w-full border-b border-neutral-200 dark:border-neutral-800 bg-white/80 dark:bg-neutral-950/70 backdrop-blur-md">
<div className="container flex items-center justify-between py-4">
<Link href="/" className="flex items-center gap-2 no-underline">
<span className="text-lg font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 bg-clip-text text-transparent">
Van Hunen IT
</span>
</Link>
<nav aria-label="Main" className="flex items-center gap-1 text-sm">
{[
{ href: "/services", label: "Services" },
// { href: "/free", label: "Free tools" },
{ href: "/pricing", label: "Pricing" },
{ href: "/vps", label: "VPS" },
{ href: "/minecraft", label: "Minecraft" },
{ href: "/contact", label: "Contact" }
].map((item) => (
<Link
key={item.href}
href={item.href}
className="no-underline rounded-lg px-3 py-2 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition"
>
{item.label}
</Link>
))}
</nav>
<Link
href="/contact"
className="hidden sm:inline-flex items-center rounded-lg bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 text-white px-4 py-2 text-sm font-medium hover:opacity-90 transition"
>
Start now
</Link>
</div>
</header>
);
}