From 68a911c6db7412c9e6ddb600e013f9e51b1fcf5b Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Sun, 31 May 2026 01:51:19 +0530
Subject: [PATCH] fix(nav+story): About pill always-on-mobile, Blog
 desktop-only, remove author block
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

MarketingNav:
- About: always visible on all breakpoints; styled as outlined rose pill
  (border-rose-300, rose-600 text) — pairs naturally with the solid rose
  CTA button beside it; hover fills bg-rose-50
- Blog: hidden on mobile (sm:inline-flex), plain text gray-600 → rose-600
- Use ml-auto mr-3 on nav so links sit right of center, next to the button

Homepage FounderStory:
- Remove 👨‍💻 / Manohar Gupta / Founder block — author details move to About
- Story content and amber card remain unchanged

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/(marketing)/page.tsx              |  8 --------
 src/components/marketing/MarketingNav.tsx | 12 +++++++-----
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/app/(marketing)/page.tsx b/src/app/(marketing)/page.tsx
index 76b8ff2..e437575 100644
--- a/src/app/(marketing)/page.tsx
+++ b/src/app/(marketing)/page.tsx
@@ -228,14 +228,6 @@ function FounderStory() {
         </h2>
 
         <div className="bg-amber-50 border border-amber-200 rounded-2xl p-6 sm:p-8 mt-6">
-          <div className="flex items-center gap-3 mb-6">
-            <div className="w-10 h-10 rounded-full bg-rose-200 flex items-center justify-center text-lg">👨‍💻</div>
-            <div>
-              <p className="font-semibold text-gray-900">Manohar Gupta</p>
-              <p className="text-xs text-gray-500">Founder, Tia · Gurugram</p>
-            </div>
-          </div>
-
           <div className="text-gray-700 leading-relaxed space-y-4 text-sm sm:text-base">
             <p>
               When our daughter, Tia, was born, we wanted to remember everything — the tiny
diff --git a/src/components/marketing/MarketingNav.tsx b/src/components/marketing/MarketingNav.tsx
index 371fd42..abeb8a3 100644
--- a/src/components/marketing/MarketingNav.tsx
+++ b/src/components/marketing/MarketingNav.tsx
@@ -6,7 +6,7 @@ import { NavAuthButton } from "./NavAuthButton";
 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 justify-between gap-4">
+      <div className="max-w-5xl mx-auto px-5 py-3.5 flex items-center justify-between 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,17 +18,19 @@ export function MarketingNav() {
           </span>
         </Link>
 
-        {/* Center nav links */}
-        <nav className="hidden sm:flex items-center gap-6">
+        {/* 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="text-sm font-medium text-gray-500 hover:text-rose-600 transition-colors duration-150"
+            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"
           >
             About
           </Link>
+          {/* Blog — desktop only, plain text */}
           <Link
             href="/blog"
-            className="text-sm font-medium text-gray-500 hover:text-rose-600 transition-colors duration-150"
+            className="hidden sm:inline-flex items-center text-sm font-medium text-gray-600 hover:text-rose-600 transition-colors duration-150"
           >
             Blog
           </Link>