feat: add hide-on-scroll header and redesign hero with video background

src/components/HeaderLight.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import Link from 'next/link'
 import { AnimatePresence, motion } from 'framer-motion'
 import clsx from 'clsx'
@@ -60,11 +60,39 @@ function NavLinks() {
 }
 
 export function HeaderLight() {
+  const [isVisible, setIsVisible] = useState(true);
+  const [lastScrollY, setLastScrollY] = useState(0);
+
+  const controlHeader = () => {
+    if (typeof window !== 'undefined') {
+      if (window.scrollY > lastScrollY && window.scrollY > 100) { // Hides when scrolling down past 100px
+        setIsVisible(false);
+      } else { // Shows when scrolling up
+        setIsVisible(true);
+      }
+      setLastScrollY(window.scrollY);
+    }
+  };
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      window.addEventListener('scroll', controlHeader);
+      return () => {
+        window.removeEventListener('scroll', controlHeader);
+      };
+    }
+  }, [lastScrollY]);
+
   return (
-    <header className="fixed top-4 left-0 right-0 z-50 flex justify-center">
+    <motion.header 
+      className="fixed top-4 left-0 right-0 z-50 flex justify-center"
+      initial={{ y: 0, opacity: 1 }}
+      animate={{ y: isVisible ? 0 : -100, opacity: isVisible ? 1 : 0 }}
+      transition={{ duration: 0.3, ease: 'easeInOut' }}
+    >
       <div className="rounded-full bg-gray-50/90 px-5 py-3 shadow-lg ring-1 ring-white/10 backdrop-blur-sm">
         <NavLinks />
       </div>
-    </header>
+    </motion.header>
   )
 }