manohar/tia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(marketing): hero subtitle readable, footer links distinct from headings

Browse source 
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>
This commit is contained in:
Manohar Gupta 2026-05-31 12:07:01 +05:30
parent af0dad6922
commit 2608c7a146
3 changed files with 13 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/app/(marketing)/layout.tsx
View file

@ -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>

2
src/app/(marketing)/page.tsx
View file

@ -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.

3
src/app/globals.css
View file

@ -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;