From 2608c7a146e374091b2323831cdb406d5c5ff3ab Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Sun, 31 May 2026 12:07:01 +0530
Subject: [PATCH] fix(marketing): hero subtitle readable, footer links distinct
 from headings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Homepage hero subtitle:
- Remove font-light (was hard to read on gradient bg)
- Change text-gray-500 → text-gray-800 (dark, legible)
- Keep font-newsreader and leading-relaxed

Footer:
- Brand tagline → font-newsreader
- All footer links → font-normal text-gray-500 (explicit weight prevents
  Fraunces from blending with semibold headings at gray-700)
- globals.css: pin .text-gray-500 { color: var(--color-gray-500) } so
  links read clearly lighter than Company/Legal/Contact headings

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/(marketing)/layout.tsx | 18 +++++++++---------
 src/app/(marketing)/page.tsx   |  2 +-
 src/app/globals.css            |  3 +++
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/app/(marketing)/layout.tsx b/src/app/(marketing)/layout.tsx
index 94e8375..ea34fbb 100644
--- a/src/app/(marketing)/layout.tsx
+++ b/src/app/(marketing)/layout.tsx
@@ -71,7 +71,7 @@ export default function MarketingLayout({
                   Tia
                 </span>
               </div>
-              <p className="text-sm text-gray-500 leading-relaxed">
+              <p className="font-newsreader text-sm text-gray-500 leading-relaxed">
                 A digital heirloom for your baby.<br />Every moment, preserved — privately.
               </p>
             </div>
@@ -82,17 +82,17 @@ export default function MarketingLayout({
               {/* Company */}
               <div className="flex flex-col gap-2">
                 <p className="font-fraunces font-semibold text-gray-700 mb-1">Company</p>
-                <Link href="/about" className="font-fraunces text-gray-500 hover:text-rose-600 transition-colors duration-150">About</Link>
-                <Link href="/blog" className="font-fraunces text-gray-500 hover:text-rose-600 transition-colors duration-150">Blog</Link>
-                <Link href="/partners" className="font-fraunces text-gray-500 hover:text-rose-600 transition-colors duration-150">Partners</Link>
+                <Link href="/about" className="font-fraunces font-normal text-gray-500 hover:text-rose-600 transition-colors duration-150">About</Link>
+                <Link href="/blog" className="font-fraunces font-normal text-gray-500 hover:text-rose-600 transition-colors duration-150">Blog</Link>
+                <Link href="/partners" className="font-fraunces font-normal text-gray-500 hover:text-rose-600 transition-colors duration-150">Partners</Link>
               </div>
 
               {/* Legal */}
               <div className="flex flex-col gap-2">
                 <p className="font-fraunces font-semibold text-gray-700 mb-1">Legal</p>
-                <Link href="/pricing" className="font-fraunces text-gray-500 hover:text-rose-600 transition-colors duration-150">Pricing</Link>
-                <Link href="/privacy" className="font-fraunces text-gray-500 hover:text-rose-600 transition-colors duration-150">Privacy Policy</Link>
-                <Link href="/terms" className="font-fraunces text-gray-500 hover:text-rose-600 transition-colors duration-150">Terms of Service</Link>
+                <Link href="/pricing" className="font-fraunces font-normal text-gray-500 hover:text-rose-600 transition-colors duration-150">Pricing</Link>
+                <Link href="/privacy" className="font-fraunces font-normal text-gray-500 hover:text-rose-600 transition-colors duration-150">Privacy Policy</Link>
+                <Link href="/terms" className="font-fraunces font-normal text-gray-500 hover:text-rose-600 transition-colors duration-150">Terms of Service</Link>
               </div>
 
               {/* Contact */}
@@ -100,13 +100,13 @@ export default function MarketingLayout({
                 <p className="font-fraunces font-semibold text-gray-700 mb-1">Contact</p>
                 <a
                   href="tel:+919554881799"
-                  className="font-fraunces text-gray-500 hover:text-rose-600 transition-colors duration-150"
+                  className="font-fraunces font-normal text-gray-500 hover:text-rose-600 transition-colors duration-150"
                 >
                   +91 95548 81799
                 </a>
                 <a
                   href="mailto:hello@tia.baby"
-                  className="font-fraunces text-gray-500 hover:text-rose-600 transition-colors duration-150"
+                  className="font-fraunces font-normal text-gray-500 hover:text-rose-600 transition-colors duration-150"
                 >
                   hello@tia.baby
                 </a>
diff --git a/src/app/(marketing)/page.tsx b/src/app/(marketing)/page.tsx
index a70866c..a05d66a 100644
--- a/src/app/(marketing)/page.tsx
+++ b/src/app/(marketing)/page.tsx
@@ -66,7 +66,7 @@ function Hero() {
             </span>
           </h1>
 
-          <p className="font-newsreader text-xl font-light text-gray-500 leading-loose mb-8 max-w-xl mx-auto lg:mx-0">
+          <p className="font-newsreader text-xl text-gray-800 leading-relaxed mb-8 max-w-xl mx-auto lg:mx-0">
             Tia is a digital heirloom — not just a tracker. Every feed, every first
             word, every vaccination, archived in one private place your child will
             one day look back on.
diff --git a/src/app/globals.css b/src/app/globals.css
index abf83d0..1c1f756 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -61,6 +61,9 @@
 .font-newsreader { font-family: var(--font-newsreader, Georgia, serif); }
 .font-jetbrains  { font-family: var(--font-jetbrains, ui-monospace, monospace); }
 
+/* Explicit pin so footer links read clearly lighter than their headings */
+.text-gray-500 { color: var(--color-gray-500); }
+
 /* hide scrollbar but keep scroll */
 .scrollbar-hide {
   scrollbar-width: none;