Marco
75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
import Link from "next/link";
|
|
|
|
const navLinks = [
|
|
{ label: "Werkzeuge", href: "/werkzeuge" },
|
|
{ label: "Blog", href: "/blog" },
|
|
{ label: "Über Björn", href: "/ueber-bjoern" },
|
|
{ label: "Shop", href: "/shop" },
|
|
];
|
|
|
|
export function Navbar() {
|
|
return (
|
|
<header className="w-full bg-[#f5f0e8] px-8 h-[6.25rem] flex items-center">
|
|
<div className="w-full flex items-center justify-between gap-8">
|
|
|
|
{/* Logo */}
|
|
<Link href="/" className="flex flex-col gap-1 shrink-0">
|
|
<span className="relative inline-block">
|
|
{/* Brush stroke SVG background */}
|
|
<svg
|
|
className="absolute inset-0 w-full h-full"
|
|
viewBox="0 0 180 36"
|
|
preserveAspectRatio="none"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
d="M4,8 C20,2 60,0 100,3 C130,5 165,4 176,9 C180,14 178,22 172,27 C155,34 110,36 70,35 C35,34 5,32 2,26 C-1,20 2,12 4,8 Z"
|
|
fill="#f5c518"
|
|
/>
|
|
</svg>
|
|
<span
|
|
className="relative text-[1.5rem] font-bold text-[#1a1a1a] leading-none px-3 py-1.5 block"
|
|
style={{ fontFamily: "var(--font-caveat)" }}
|
|
>
|
|
einfach produktiv
|
|
</span>
|
|
</span>
|
|
<span className="text-[0.5rem] uppercase tracking-[0.12em] text-[#6b6b6b] pl-1">
|
|
Weil du auch noch ein Leben hast
|
|
</span>
|
|
</Link>
|
|
|
|
{/* Nav links */}
|
|
<nav className="flex items-center gap-10">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className="text-[0.9375rem] font-medium text-[#1a1a1a] hover:text-[#f5c518] transition-colors"
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
{/* CTA buttons */}
|
|
<div className="flex items-center gap-3 shrink-0">
|
|
<Link
|
|
href="/newsletter"
|
|
className="px-5 py-2.5 rounded-lg border border-[#1a1a1a] text-[0.9375rem] font-semibold text-[#1a1a1a] hover:bg-[#1a1a1a] hover:text-white transition-colors"
|
|
>
|
|
Newsletter
|
|
</Link>
|
|
<Link
|
|
href="/challenge"
|
|
className="px-5 py-2.5 rounded-lg bg-[#f5c518] text-[0.9375rem] font-semibold text-[#1a1a1a] hover:brightness-95 transition-all"
|
|
>
|
|
7-Tage-Challenge
|
|
</Link>
|
|
</div>
|
|
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|