arxja · arxja · Jun 13, 2026 · Jun 12, 2026 · Jun 12, 2026 · Jun 12, 2026
diff --git a/app/(root)/layout.tsx b/app/(root)/layout.tsx
@@ -0,0 +1,14 @@
+import Navbar from "@/components/Navbar";
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <>
+      <Navbar />
+      {children}
+    </>
+  );
+}
diff --git a/app/page.tsx → app/(root)/page.tsx b/app/page.tsx → app/(root)/page.tsx
diff --git a/app/globals.css b/app/globals.css
@@ -194,4 +194,39 @@
   *::-webkit-scrollbar-thumb:hover {
     background-color: var(--color-border-heavy);
   }
-}
+}
+
+@layer utilities {
+  .nav-hover-btn {
+    @apply relative cursor-pointer;
+    @apply after:absolute after:-bottom-0.5 after:left-0 after:h-0.5 after:w-full;
+    @apply after:origin-bottom-right after:scale-x-0;
+    @apply after:transition-transform after:duration-300 after:ease-[cubic-bezier(0.65_0.05_0.36_1)];
+    @apply hover:after:origin-bottom-left hover:after:scale-x-100;
+    @apply after:bg-primary-500;
+  }
+
+  .dark .nav-hover-btn::after {
+    @apply after:bg-primary-400;
+  }
+
+  .floating-nav {
+    @apply rounded-xl border border-border-light bg-surface/80 backdrop-blur-md shadow-lg transition-all duration-300;
+  }
+
+  .dark .floating-nav {
+    @apply bg-surface/95 border-border-default shadow-xl backdrop-blur-lg;
+  }
+
+  .nav-hover-btn:focus-visible {
+    @apply outline-none ring-2 ring-primary-500 ring-offset-2 ring-offset-surface rounded-sm;
+  }
+
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    .nav-hover-btn::after,
+    .floating-nav {
+      @apply transition-none;
+    }
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -20,7 +20,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" className={`${inter.className} h-full antialiased`}>
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body className="min-h-full flex flex-col bg-canvas text-text-primary transition-theme">
+        {children}
+      </body>
     </html>
   );
 }
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import { useAuth } from "@/hooks/useAuth";
+import { NAVBAR_ITEMS } from "@/lib/constants";
+import Link from "next/link";
+import { useEffect, useRef, useState } from "react";
+import { useWindowScroll } from "react-use";
+import gsap from "gsap";
+
+const Navbar = () => {
+  const { user } = useAuth();
+  const [isNavVisible, setIsNavVisible] = useState(true);
+  const { y: currentScrollY } = useWindowScroll();
+  const [lastScrollY, setLastScrollY] = useState(0);
+  const navContainerRef = useRef<HTMLDivElement>(null);
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+
+  // Check for reduced motion preference
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+
+    const handler = (e: MediaQueryListEvent) =>
+      setPrefersReducedMotion(e.matches);
+    mediaQuery.addEventListener("change", handler);
+    return () => mediaQuery.removeEventListener("change", handler);
+  }, []);
+
+  useEffect(() => {
+    const SCROLL_THRESHOLD = 10;
+    const HIDE_DELAY_PX = 50;
+
+    if (currentScrollY === 0) {
+      setIsNavVisible(true);
+      navContainerRef.current?.classList.remove("floating-nav");
+    } else if (currentScrollY > lastScrollY && currentScrollY > HIDE_DELAY_PX) {
+      setIsNavVisible(false);
+      navContainerRef.current?.classList.add("floating-nav");
+    } else if (
+      currentScrollY < lastScrollY &&
+      Math.abs(currentScrollY - lastScrollY) > SCROLL_THRESHOLD
+    ) {
+      setIsNavVisible(true);
+      navContainerRef.current?.classList.add("floating-nav");
+    }
+
+    setLastScrollY(currentScrollY);
+  }, [currentScrollY, lastScrollY]);
+
+  useEffect(() => {
+    if (!navContainerRef.current) return;
+
+    gsap.to(navContainerRef.current, {
+      y: isNavVisible ? 0 : 100,
+      opacity: isNavVisible ? 1 : 0,
+      visibility: isNavVisible ? "visible" : "hidden",
+      duration: prefersReducedMotion ? 0 : 0.2,
+      pointerEvents: isNavVisible ? "auto" : "none",
+    });
+  }, [isNavVisible, prefersReducedMotion]);
+
+  return (
+    <div
+      ref={navContainerRef}
+      className="fixed inset-x-0 top-4 z-50 h-16 border-none transition-all duration-700 sm:inset-x-6"
+    >
+      <header className="absolute top-1/2 w-full -translate-y-1/2">
+        <nav className="flex size-full items-center justify-between px-6 py-2">
+          {/* Left - Logo */}
+          <div className="flex items-center gap-7">
+            <Link
+              href="/"
+              className="flex h-10 w-10 items-center justify-center rounded-full bg-primary-500/20 text-primary-600 transition-all hover:scale-105 hover:bg-primary-500/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:bg-primary-500/30 dark:text-primary-400"
+            >
+              {/* ToDo: change with actual logo */}
+              <span className="text-sm font-semibold">SaaSify</span>
+            </Link>
+          </div>
+
+          {/* Right - nav items & user */}
+          <div className="flex flex-row items-center gap-6">
+            {/* nav items */}
+            <div className="flex flex-row gap-2">
+              {NAVBAR_ITEMS.map((item, idx) => (
+                <Link
+                  className="nav-hover-btn text-sm font-medium text-text-secondary transition-colors hover:text-text-primary focus-visible:text-text-primary dark:text-text-primary dark:hover:text-primary-400 dark:focus-visible:text-primary-400"
+                  href={item.link}
+                  key={idx}
+                >
+                  {item.name}
+                </Link>
+              ))}
+            </div>
+
+            {/* User area */}
+            {user ? (
+              <div className="h-8 w-8 rounded-full bg-primary-500/20 ring-2 ring-primary-500/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500" />
+            ) : (
+              <Link
+                href="/sign-in"
+                className="rounded-lg bg-primary-500 px-4 py-1.5 text-sm font-medium text-white transition-all hover:bg-primary-600 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2"
+              >
+                Login
+              </Link>
+            )}
+          </div>
+        </nav>
+      </header>
+    </div>
+  );
+};
+
+export default Navbar;
diff --git a/lib/constants.ts b/lib/constants.ts
@@ -1,3 +1,5 @@
+import { NavItemsTypes } from "@/types/types";
+
 export const PLANS = [
   {
     id: "free",
@@ -101,3 +103,18 @@ export const PLANS_BY_ID = PLANS.reduce(
 export const getPlanById = (id: string): Plan | undefined => {
   return PLANS_BY_ID[id as PlanId];
 };
+
+export const NAVBAR_ITEMS: NavItemsTypes[] = [
+  {
+    name: "Pricing",
+    link: "/pricing",
+  },
+  {
+    name: "About",
+    link: "/#",
+  },
+  {
+    name: "Contact",
+    link: "/#",
+  },
+];
diff --git a/package.json b/package.json
@@ -18,8 +18,10 @@
     "seed": "bun run scripts/seed.ts"
   },
   "dependencies": {
+    "@gsap/react": "^2.1.2",
     "@hookform/resolvers": "^5.4.0",
     "dotenv": "^17.4.2",
+    "gsap": "^3.15.0",
     "jsonwebtoken": "^9.0.3",
     "lucide-react": "^1.17.0",
     "mongodb": "^7.2.0",
@@ -30,6 +32,7 @@
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "react-hook-form": "^7.77.0",
+    "react-use": "^17.6.1",
     "zod": "^4.4.3"
   },
   "devDependencies": {