refactor header to sticky with scroll-based background blur

src/app/page.tsx

@@ -7,14 +7,16 @@ import { HomePrinciples } from '@/components/HomePrinciples'
 import { HomeMilestones } from '@/components/HomeMilestones'
 import { HomeVentures } from '@/components/HomeVentures'
 import { Quote } from '@/components/Quote'
-import { Header_darkbg } from '@/components/Header_darkbg'
+import { HomeStickyHeader } from '@/components/HomeStickyHeader'
 
 export default function Home() {
   return (
     <>
-      <Header_darkbg />
       <main>
-        <Hero />
+        <HomeStickyHeader />
+        <section className="relative min-h-screen">
+          <Hero className="-mt-20" />
+        </section>
         <HomeAbout />
         <HomePrinciples />
         <HomeMilestones />

src/components/Header.tsx

@@ -83,7 +83,7 @@ function MobileNavigation() {
 
 export function Header() {
   return (
-    <header className="py-5">
+    <header className="py-5 bg-transparent">
       <Container>
         <nav className="relative z-50 flex justify-between">
           
@@ -92,9 +92,9 @@ export function Header() {
               <Logo className="h-6 w-auto lg:h-6 md:h-8" />
             </Link>
             <div className="hidden md:flex md:gap-x-6">
-              <NavLink href="/about">About</NavLink>
+              <NavLink className="text-white" href="/about">ABOUT</NavLink>
-              <NavLink href="/ventures">Ventures</NavLink>
+              <NavLink className="text-white" href="/ventures">VENTURES</NavLink>
-              <NavLink href="/people">People</NavLink>
+              <NavLink className="text-white" href="/people">PEOPLE</NavLink>
             </div>
           </div>
           <div className="flex items-center gap-x-5 md:gap-x-8">

src/components/Header_darkbg.tsx

@@ -98,14 +98,7 @@ function MobileNavigation() {
 
 export function Header_darkbg() {
   return (
-    <header className="py-5 relative">
+    <header className="py-5 bg-transparent relative">
-      <div 
-        className="absolute inset-0 pointer-events-none"
-        style={{
-          background: '#000000',
-          opacity: 1
-        }}
-      />
       <Container>
         <nav className="relative z-50 flex justify-between">
           <div className="flex items-center md:gap-x-12">

src/components/Hero.tsx

@@ -1,14 +1,18 @@
 import Image from 'next/image'
+import clsx from 'clsx'
 
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
 import { Logo_hero } from '@/components/Logo_hero'
 
 
+type HeroProps = {
+  className?: string
+}
 
-export function Hero() {
+export function Hero({ className }: HeroProps) {
   return (
-    <div className="relative overflow-hidden min-h-screen">
+    <div className={clsx('relative overflow-hidden min-h-screen', className)}>
       {/* Video Background */}
       <video
         autoPlay

src/components/HomeStickyHeader.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import clsx from "clsx"
+
+import { Header_darkbg } from "@/components/Header_darkbg"
+
+export function HomeStickyHeader() {
+  const [scrolled, setScrolled] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 0)
+    }
+
+    handleScroll()
+    window.addEventListener("scroll", handleScroll)
+
+    return () => window.removeEventListener("scroll", handleScroll)
+  }, [])
+
+  return (
+    <div
+      className={clsx(
+        "sticky top-0 z-30 transition-all duration-300",
+        scrolled && "bg-black/40 backdrop-blur-md",
+      )}
+    >
+      <Header_darkbg />
+    </div>
+  )
+}