feat: fixed header

src/components/Popup.tsx

@@ -23,9 +23,9 @@ const Popup: React.FC = () => {
       aria-live="assertive"
       className="pointer-events-none fixed inset-0 z-10 flex items-end px-4 py-6 sm:items-end sm:p-6"
     >
+      <div className="flex w-full flex-col items-center space-y-4 sm:items-end">
         <Transition
           show={isOpen}
-        className="flex w-full flex-col items-center space-y-4 sm:items-end"
           enter="ease-out duration-300"
           enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           enterTo="opacity-100 translate-y-0 sm:scale-100"
@@ -70,6 +70,7 @@ const Popup: React.FC = () => {
           </div>
         </Transition>
       </div>
+    </div>
   );
 };
 

src/views/home/components/Header.tsx

@@ -0,0 +1,72 @@
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import Button from "~/components/Button";
+import { twMerge } from "tailwind-merge";
+
+const Header = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 0);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <>
+      <div
+        className={twMerge(
+          "z-50 m-auto flex w-full max-w-[1100px] px-4 pt-4",
+          isScrolled && "fixed",
+        )}
+      >
+        <div
+          className={twMerge(
+            "m-auto flex h-[4rem] min-h-[4rem] w-full rounded-3xl border border-transparent px-5 py-2 align-middle transition-colors duration-200",
+            isScrolled &&
+              "rounded-2xl border border-light-300 bg-dark-100 bg-light-50/80 shadow-sm backdrop-blur-[10px] dark:border-dark-300 dark:bg-dark-50/90",
+          )}
+        >
+          <div className="flex w-full items-center justify-between px-2">
+            <div className="my-auto flex items-center justify-between pl-2">
+              <h1 className="w-[200px] text-lg font-bold tracking-tight text-neutral-900 dark:text-dark-1000">
+                kan.bn
+              </h1>
+            </div>
+            <div className="flex justify-center gap-10 dark:text-dark-1000">
+              <Link href="/roadmap" className="text-sm font-bold">
+                Roadmap
+              </Link>
+              <Link href="#features" className="text-sm font-bold">
+                Features
+              </Link>
+              <Link href="#pricing" className="text-sm font-bold">
+                Pricing
+              </Link>
+              <Link href="/docs" className="text-sm font-bold">
+                Docs
+              </Link>
+            </div>
+            <div className="flex w-[200px] justify-end gap-2">
+              {isLoggedIn ? (
+                <Button href="/boards">Go to app</Button>
+              ) : (
+                <>
+                  <Button href="/login" variant="ghost">
+                    Sign in
+                  </Button>
+                  <Button href="/signup">Get started</Button>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+      {isScrolled && <div className="h-[4rem] min-h-[4rem]"></div>}
+    </>
+  );
+};
+
+export default Header;

src/views/home/index.tsx

@@ -6,7 +6,9 @@ import { IoLogoGithub } from "react-icons/io";
 import Button from "~/components/Button";
 import PatternedBackground from "~/components/PatternedBackground";
 
+import Header from "./components/Header";
 import Pricing from "./components/Pricing";
+
 import { api } from "~/utils/api";
 import { env } from "~/env.mjs";
 
@@ -38,40 +40,7 @@ export default function HomeView() {
       <div className="mx-auto flex h-full min-h-screen flex-col items-center bg-light-100 dark:bg-dark-50">
         <PatternedBackground />
         <div className="z-10 mx-auto h-full w-full max-w-[1100px]">
-          <div className="m-auto flex h-24 min-h-24 w-full items-center justify-between px-5 py-2 align-middle dark:border-dark-400">
+          <Header isLoggedIn={isLoggedIn} />
-            <div className="my-auto flex items-center justify-between">
-              <h1 className="w-[100px] text-xl font-bold tracking-tight text-neutral-900 dark:text-dark-1000">
-                kan.bn
-              </h1>
-            </div>
-            <div className="flex w-full justify-center gap-10 dark:text-dark-1000">
-              <Link href="/roadmap" className="text-sm font-bold">
-                Roadmap
-              </Link>
-              <Link href="#features" className="text-sm font-bold">
-                Features
-              </Link>
-              <Link href="#pricing" className="text-sm font-bold">
-                Pricing
-              </Link>
-              <Link href="/docs" className="text-sm font-bold">
-                Docs
-              </Link>
-            </div>
-            <div className="flex w-[100px] gap-2">
-              {isLoggedIn ? (
-                <Button href="/boards">Go to app</Button>
-              ) : (
-                <>
-                  <Button href="/login" variant="ghost">
-                    Sign in
-                  </Button>
-                  <Button href="/signup">Get started</Button>
-                </>
-              )}
-            </div>
-          </div>
-
           <div className="flex h-full w-full flex-col">
             <div className="w-full py-32">
               <div className="my-10 flex h-full w-full flex-col items-center justify-center ">