From c3b6465b66ee3f5059a8da3dba59d0be400efda8 Mon Sep 17 00:00:00 2001
From: Kei <keicode.dev02@gmail.com>
Date: Mon, 13 Jul 2026 18:19:35 -0400
Subject: [PATCH 1/3] Feat:(ui) add custom hook useScrolled to track page
 scroll position

---
 src/hooks/useScrolled.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 src/hooks/useScrolled.ts

diff --git a/src/hooks/useScrolled.ts b/src/hooks/useScrolled.ts
new file mode 100644
index 0000000..13536f1
--- /dev/null
+++ b/src/hooks/useScrolled.ts
@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react';
+
+export function useScrolled(threshold: number = 8): boolean {
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > threshold);
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, [threshold]);
+
+  return scrolled;
+}

From 9d80a30d22bbd9e138f067f7aa6c2d55253830af Mon Sep 17 00:00:00 2001
From: Kei <keicode.dev02@gmail.com>
Date: Mon, 13 Jul 2026 18:21:10 -0400
Subject: [PATCH 2/3] refactor(header): utilize useScrolled hook for dynamic
 styling based on scroll position; adjust z-index values for improved layering
 in mobile navigation.

---
 src/components/Header.jsx | 91 ++++++++++++++++++++++++---------------
 1 file changed, 57 insertions(+), 34 deletions(-)

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index fb8d5aa..4c69aa9 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -9,6 +9,7 @@ import { Logo } from '@/components/Logo';
 import { NavLink } from '@/components/NavLink';
 import { Icon, InlineIcon } from '@iconify/react';
 import { StarButton } from './StarButton';
+import { useScrolled } from '@/hooks/useScrolled';
 
 function MobileNavLink({ href, children }) {
   return (
@@ -43,7 +44,7 @@ function MobileNavigation() {
   return (
     <Popover>
       <Popover.Button
-        className="relative z-10 flex h-8 w-8 items-center justify-center [&:not(:focus-visible)]:focus:outline-none"
+        className="relative z-20 flex h-8 w-8 items-center justify-center [&:not(:focus-visible)]:focus:outline-none"
         aria-label="Toggle Navigation"
       >
         {({ open }) => <MobileNavIcon open={open} />}
@@ -58,7 +59,7 @@ function MobileNavigation() {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <Popover.Overlay className="fixed inset-0 bg-slate-300/50" />
+          <Popover.Overlay className="fixed inset-0 z-10 bg-slate-300/50" />
         </Transition.Child>
         <Transition.Child
           as={Fragment}
@@ -71,7 +72,7 @@ function MobileNavigation() {
         >
           <Popover.Panel
             as="div"
-            className="absolute inset-x-0 top-full mt-4 flex origin-top flex-col rounded-2xl bg-white p-4 text-lg tracking-tight text-slate-900 shadow-xl ring-1 ring-slate-900/5"
+            className="absolute inset-x-0 top-full z-30 mt-4 flex origin-top flex-col rounded-2xl bg-white p-4 text-lg tracking-tight text-slate-900 shadow-xl ring-1 ring-slate-900/5"
           >
             <MobileNavLink href="/#features">Features</MobileNavLink>
             <MobileNavLink href="/#testimonials">Testimonials</MobileNavLink>
@@ -86,39 +87,61 @@ function MobileNavigation() {
 }
 
 export function Header() {
+  const scrolled = useScrolled();
+
   return (
-    <header className="py-10">
-      <Container>
-        <nav className="relative z-50 flex justify-between">
-          <div className="flex items-center md:gap-x-12">
-            <Link href="/" aria-label="Home">
-              <Logo className="h-16 w-auto" />
-            </Link>
-            <div className="hidden md:flex md:gap-x-6">
-              <NavLink href="/#features">Features</NavLink>
-              <NavLink href="/#testimonials" className="md:hidden lg:inline-block">
-                Testimonials
-              </NavLink>
-              <NavLink href="/sponsor">Sponsor</NavLink>
-              <NavLink href="/blog">Blog</NavLink>
-              <NavLink href="/join-discord" className="md:hidden lg:inline-block">
-                Join Discord
-              </NavLink>
+    <>
+      <header
+        className={clsx(
+          'fixed inset-x-0 top-0 z-50 transition-all duration-300',
+          scrolled ? 'py-2 sm:py-3' : 'py-4 sm:py-6'
+        )}
+      >
+        <div
+          aria-hidden="true"
+          className={clsx(
+            'absolute inset-0 -z-10 bg-white/85 shadow-sm ring-1 ring-slate-900/5 backdrop-blur-md backdrop-saturate-150 transition-opacity duration-300 supports-[backdrop-filter]:bg-white/60',
+            scrolled ? 'opacity-100' : 'opacity-0'
+          )}
+        />
+        <Container>
+          <nav className="relative flex items-center justify-between">
+            <div className="flex items-center md:gap-x-12">
+              <Link href="/" aria-label="Home">
+                <Logo
+                  className={clsx(
+                    'w-auto transition-all duration-300',
+                    scrolled ? 'h-10 sm:h-12' : 'h-12 sm:h-16'
+                  )}
+                />
+              </Link>
+              <div className="hidden md:flex md:gap-x-6">
+                <NavLink href="/#features">Features</NavLink>
+                <NavLink href="/#testimonials" className="md:hidden lg:inline-block">
+                  Testimonials
+                </NavLink>
+                <NavLink href="/sponsor">Sponsor</NavLink>
+                <NavLink href="/blog">Blog</NavLink>
+                <NavLink href="/join-discord" className="md:hidden lg:inline-block">
+                  Join Discord
+                </NavLink>
+              </div>
             </div>
-          </div>
-          <div className="flex items-center gap-x-5 md:gap-x-8">
-            <StarButton />
-            <Button href="/download" color="green">
-              <span>
-                Download <span className="hidden lg:inline">Now</span>
-              </span>
-            </Button>
-            <div className="-mr-1 md:hidden">
-              <MobileNavigation />
+            <div className="flex items-center gap-x-5 md:gap-x-8">
+              <StarButton />
+              <Button href="/download" color="green">
+                <span>
+                  Download <span className="hidden lg:inline">Now</span>
+                </span>
+              </Button>
+              <div className="-mr-1 md:hidden">
+                <MobileNavigation />
+              </div>
             </div>
-          </div>
-        </nav>
-      </Container>
-    </header>
+          </nav>
+        </Container>
+      </header>
+      <div aria-hidden="true" className="h-20 sm:h-28" />
+    </>
   );
 }

From 04f5b9a236fa0c19c8fc93e8beb7eb272a3056a7 Mon Sep 17 00:00:00 2001
From: Kei <keicode.dev02@gmail.com>
Date: Mon, 13 Jul 2026 18:21:23 -0400
Subject: [PATCH 3/3] refactor(home): move Header component outside of Hero for
 improved layout structure

---
 src/pages/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 2bf0e22..0551730 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -34,9 +34,9 @@ export default function Home() {
       </Head>
 
       <main className="relative">
+        <Header />
         <div className="relative">
           <div className="relative z-10">
-            <Header />
             <Hero />
           </div>
         </div>