Marco
64 lines
2.1 KiB
TypeScript
64 lines
2.1 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-0.5 shrink-0">
|
|
<span className="relative inline-block px-2 py-0.5">
|
|
<span
|
|
className="absolute inset-0 rounded-sm -skew-x-2"
|
|
style={{ background: "#f5c518", opacity: 0.85 }}
|
|
/>
|
|
<span className="relative font-bold text-[1.375rem] text-[#1a1a1a] leading-tight tracking-tight italic">
|
|
einfach produktiv
|
|
</span>
|
|
</span>
|
|
<span className="text-[0.5rem] uppercase tracking-[0.15em] text-[#6b6b6b] pl-2">
|
|
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>
|
|
);
|
|
}
|