Marco
117e4704ca
Navbar is sticky top-0 z-50. On scroll >8px: bg opacity drops to 80%
and backdrop-blur-md activates with a subtle shadow. Transitions on
background-color and backdrop-filter (300ms). Smooth scrolling via
html { scroll-behavior: smooth } in globals.css.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
|
|
const navLinks = [
|
|
{ label: "Werkzeuge", href: "#werkzeuge" },
|
|
{ label: "Blog", href: "#blog" },
|
|
{ label: "Über Björn", href: "#ueber-bjoern" },
|
|
{ label: "Shop", href: "/shop" },
|
|
];
|
|
|
|
export function Navbar() {
|
|
const [scrolled, setScrolled] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const onScroll = () => setScrolled(window.scrollY > 8);
|
|
window.addEventListener("scroll", onScroll, { passive: true });
|
|
return () => window.removeEventListener("scroll", onScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<header
|
|
className={`sticky top-0 z-50 w-full h-[6.25rem] flex items-center px-[2rem] transition-[background-color,backdrop-filter] duration-300 ${
|
|
scrolled
|
|
? "bg-[#f5f0e8]/80 backdrop-blur-md shadow-sm"
|
|
: "bg-[#f5f0e8]"
|
|
}`}
|
|
>
|
|
<div className="w-full flex items-center justify-between">
|
|
|
|
{/* Logo — exported directly from Figma */}
|
|
<Link href="/" className="shrink-0">
|
|
<Image
|
|
src="/logo.png"
|
|
alt="einfach produktiv"
|
|
width={181}
|
|
height={61}
|
|
priority
|
|
/>
|
|
</Link>
|
|
|
|
{/* Nav links */}
|
|
<nav className="flex items-center gap-[3rem]">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className="text-[1.125rem] font-semibold text-[#222221] tracking-[0.01125rem] hover:text-[#f6a701] transition-colors"
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
{/* CTA buttons */}
|
|
<div className="flex items-center gap-[0.75rem] p-[0.5rem]">
|
|
<Link
|
|
href="/newsletter"
|
|
className="px-[1.5rem] py-[1rem] rounded-[0.5rem] border border-[#868686] text-[1.125rem] font-bold text-[#222221] hover:bg-[#222221] hover:text-white transition-colors"
|
|
>
|
|
Newsletter
|
|
</Link>
|
|
<Link
|
|
href="/challenge"
|
|
className="px-[1.5rem] py-[1rem] rounded-[0.5rem] bg-[#f6a701] text-[1.125rem] font-bold text-[#222221] hover:brightness-95 transition-all"
|
|
>
|
|
7-Tage-Challenge
|
|
</Link>
|
|
</div>
|
|
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|