From c5cb9570b2da9c620edaa5654528b84bb026c5e9 Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Sun, 31 May 2026 02:05:37 +0530
Subject: [PATCH] fix(nav): rose text links, border on hover only, bold active
 state
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Both About and Blog: text-rose-500 at rest, no border, no background
- Hover: border-rose-300 + bg-rose-50 + text-rose-600 (border space
  always pre-reserved via border-transparent to prevent layout shift)
- Active page (usePathname): font-semibold text-rose-600, no visual
  container — bold text only, clean
- About: always visible on all breakpoints including mobile
- Blog: hidden on mobile, sm:inline-flex on desktop

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/marketing/MarketingNav.tsx | 28 +++++++++++++++--------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/components/marketing/MarketingNav.tsx b/src/components/marketing/MarketingNav.tsx
index abeb8a3..975373e 100644
--- a/src/components/marketing/MarketingNav.tsx
+++ b/src/components/marketing/MarketingNav.tsx
@@ -1,12 +1,23 @@
 "use client";
 
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { NavAuthButton } from "./NavAuthButton";
 
+function navLinkClass(pathname: string, href: string) {
+  const isActive = pathname === href || pathname.startsWith(href + "/");
+  const base = "text-sm px-3 py-1.5 rounded-full border transition-all duration-150";
+  return isActive
+    ? `${base} font-semibold text-rose-600 border-transparent`
+    : `${base} font-medium text-rose-500 border-transparent hover:border-rose-300 hover:bg-rose-50 hover:text-rose-600`;
+}
+
 export function MarketingNav() {
+  const pathname = usePathname();
+
   return (
     <header className="sticky top-0 z-50 bg-white/95 backdrop-blur-md border-b border-rose-100 shadow-sm">
-      <div className="max-w-5xl mx-auto px-5 py-3.5 flex items-center justify-between gap-3">
+      <div className="max-w-5xl mx-auto px-5 py-3.5 flex items-center gap-3">
         {/* Logo */}
         <Link href="/" className="flex items-center gap-2 group shrink-0">
           <span className="text-2xl transition-transform duration-200 group-hover:scale-110">🌸</span>
@@ -18,19 +29,16 @@ export function MarketingNav() {
           </span>
         </Link>
 
-        {/* Center nav */}
-        <nav className="flex items-center gap-3 ml-auto mr-3">
-          {/* About — always visible including mobile, outlined rose pill */}
-          <Link
-            href="/about"
-            className="inline-flex items-center text-sm font-semibold text-rose-600 border border-rose-300 hover:bg-rose-50 hover:border-rose-400 px-3.5 py-1.5 rounded-full transition-all duration-150"
-          >
+        {/* Center nav — grows to fill space, links pushed right via ml-auto */}
+        <nav className="flex items-center gap-0.5 ml-auto mr-2">
+          {/* About — always visible, including mobile */}
+          <Link href="/about" className={navLinkClass(pathname, "/about")}>
             About
           </Link>
-          {/* Blog — desktop only, plain text */}
+          {/* Blog — desktop only */}
           <Link
             href="/blog"
-            className="hidden sm:inline-flex items-center text-sm font-medium text-gray-600 hover:text-rose-600 transition-colors duration-150"
+            className={`hidden sm:inline-flex ${navLinkClass(pathname, "/blog")}`}
           >
             Blog
           </Link>