From fad1ed789536307210b45589d4634c06bf58e1f2 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Fri, 5 Dec 2025 13:47:42 +0100
Subject: [PATCH] refactor header to sticky with scroll-based background blur

---
 src/app/page.tsx                    |  8 +++++---
 src/components/Header.tsx           |  8 ++++----
 src/components/Header_darkbg.tsx    |  9 +-------
 src/components/Hero.tsx             |  8 ++++++--
 src/components/HomeStickyHeader.tsx | 32 +++++++++++++++++++++++++++++
 5 files changed, 48 insertions(+), 17 deletions(-)
 create mode 100644 src/components/HomeStickyHeader.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index b559d57..8bfed97 100644
--- a/src/app/page.tsx
+++ b/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 />
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index d57ae2f..d4dc66e 100644
--- a/src/components/Header.tsx
+++ b/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 href="/ventures">Ventures</NavLink>
-              <NavLink href="/people">People</NavLink>
+              <NavLink className="text-white" href="/about">ABOUT</NavLink>
+              <NavLink className="text-white" href="/ventures">VENTURES</NavLink>
+              <NavLink className="text-white" href="/people">PEOPLE</NavLink>
             </div>
           </div>
           <div className="flex items-center gap-x-5 md:gap-x-8">
diff --git a/src/components/Header_darkbg.tsx b/src/components/Header_darkbg.tsx
index 1426fbd..6bbd3bc 100644
--- a/src/components/Header_darkbg.tsx
+++ b/src/components/Header_darkbg.tsx
@@ -98,14 +98,7 @@ function MobileNavigation() {
 
 export function Header_darkbg() {
   return (
-    <header className="py-5 relative">
-      <div 
-        className="absolute inset-0 pointer-events-none"
-        style={{
-          background: '#000000',
-          opacity: 1
-        }}
-      />
+    <header className="py-5 bg-transparent relative">
       <Container>
         <nav className="relative z-50 flex justify-between">
           <div className="flex items-center md:gap-x-12">
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index b450566..15cb8ea 100644
--- a/src/components/Hero.tsx
+++ b/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
diff --git a/src/components/HomeStickyHeader.tsx b/src/components/HomeStickyHeader.tsx
new file mode 100644
index 0000000..07a1684
--- /dev/null
+++ b/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>
+  )
+}