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

@@ -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 */}

app/globals.css

@@ -12,6 +12,10 @@
   --font-mono: var(--font-geist-mono);
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   background: var(--background);
   color: var(--foreground);