From 52a60a7cff649e89b45e5c922643af12903a88f6 Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Sun, 31 May 2026 02:11:32 +0530
Subject: [PATCH] fix(nav): center About/Blog using 3-col grid layout

Replace flex+ml-auto with grid-cols-[1fr_auto_1fr]:
- Col 1 (1fr): logo, left-aligned
- Col 2 (auto): nav links, truly centered regardless of button width
- Col 3 (1fr): auth button, flex justify-end

Works on mobile too: About sits perfectly centered between logo and button.

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

diff --git a/src/components/marketing/MarketingNav.tsx b/src/components/marketing/MarketingNav.tsx
index 975373e..9ca1035 100644
--- a/src/components/marketing/MarketingNav.tsx
+++ b/src/components/marketing/MarketingNav.tsx
@@ -17,9 +17,10 @@ export function MarketingNav() {
 
   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 gap-3">
-        {/* Logo */}
-        <Link href="/" className="flex items-center gap-2 group shrink-0">
+      {/* 3-col grid: logo left · nav truly centered · auth right */}
+      <div className="max-w-5xl mx-auto px-5 py-3.5 grid grid-cols-[1fr_auto_1fr] items-center">
+        {/* Left: Logo */}
+        <Link href="/" className="flex items-center gap-2 group">
           <span className="text-2xl transition-transform duration-200 group-hover:scale-110">🌸</span>
           <span
             className="text-xl font-bold text-gray-900 tracking-tight"
@@ -29,8 +30,8 @@ export function MarketingNav() {
           </span>
         </Link>
 
-        {/* Center nav — grows to fill space, links pushed right via ml-auto */}
-        <nav className="flex items-center gap-0.5 ml-auto mr-2">
+        {/* Center: nav links */}
+        <nav className="flex items-center gap-0.5">
           {/* About — always visible, including mobile */}
           <Link href="/about" className={navLinkClass(pathname, "/about")}>
             About
@@ -44,7 +45,10 @@ export function MarketingNav() {
           </Link>
         </nav>
 
-        <NavAuthButton />
+        {/* Right: auth button */}
+        <div className="flex justify-end">
+          <NavAuthButton />
+        </div>
       </div>
     </header>
   );