From 117e4704ca98eb9047cfc3f44cb7763e71fffe97 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Tue, 30 Jun 2026 21:39:09 +0000
Subject: [PATCH] feat(Navbar): sticky with scroll-triggered backdrop blur +
 smooth scrolling

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>
---
 app/components/Navbar.tsx | 19 ++++++++++++++++++-
 app/globals.css           |  4 ++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index c41af7f..e2ed8d9 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -1,3 +1,6 @@
+"use client";
+
+import { useEffect, useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
 
@@ -9,8 +12,22 @@ const navLinks = [
 ];
 
 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="w-full bg-[#f5f0e8] h-[6.25rem] flex items-center px-[2rem]">
+    <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 */}
diff --git a/app/globals.css b/app/globals.css
index 5d16751..d5f9e85 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -12,6 +12,10 @@
   --font-mono: var(--font-geist-mono);
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   background: var(--background);
   color: var(--foreground);