feat: make nav bg darker when scrolling

components/Nav.tsx

@@ -23,7 +23,7 @@ export default function Nav() {
   }, []);
 
   return (
-    <nav className="fixed left-0 top-0 z-50 h-32 w-full bg-gradient-to-b from-black/40 to-fuchsia-950/0">
+    <nav className="fixed left-0 top-0 z-50 h-32 w-full">
       <Wrapper>
         <div className="relative flex items-center justify-between px-6 py-5 md:px-12">
           <div className="shrink-0">

components/TopFade.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export default function TopFade() {
+  const [brightness, setBrightness] = useState(1);
+
+  const handleScroll = (event: Event) => {
+    if (window.scrollY > 200) {
+      if (brightness === 0.5) return;
+      setBrightness(0.5);
+      return;
+    }
+
+    const amountToDecrease = (window.scrollY / 200) * 0.5;
+    setBrightness(1 - amountToDecrease);
+  };
+
+  useEffect(() => {
+    document.addEventListener('scroll', handleScroll, true);
+    return () => {
+      document.removeEventListener('scroll', handleScroll, true);
+    };
+  }, []);
+
+  return (
+    <div
+      className="top-fade pointer-events-none"
+      style={{
+        filter: `brightness(${brightness})`,
+      }}
+    ></div>
+  );
+}