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 Tia
</span> </span>
</div> </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. A digital heirloom for your baby.<br />Every moment, preserved — privately.
</p> </p>
</div> </div>
@ -82,17 +82,17 @@ export default function MarketingLayout({
{/* Company */} {/* Company */}
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<p className="font-fraunces font-semibold text-gray-700 mb-1">Company</p> <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="/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 text-gray-500 hover:text-rose-600 transition-colors duration-150">Blog</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 text-gray-500 hover:text-rose-600 transition-colors duration-150">Partners</Link> <Link href="/partners" className="font-fraunces font-normal text-gray-500 hover:text-rose-600 transition-colors duration-150">Partners</Link>
</div> </div>
{/* Legal */} {/* Legal */}
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<p className="font-fraunces font-semibold text-gray-700 mb-1">Legal</p> <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="/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 text-gray-500 hover:text-rose-600 transition-colors duration-150">Privacy Policy</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 text-gray-500 hover:text-rose-600 transition-colors duration-150">Terms of Service</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> </div>
{/* Contact */} {/* Contact */}
@ -100,13 +100,13 @@ export default function MarketingLayout({
<p className="font-fraunces font-semibold text-gray-700 mb-1">Contact</p> <p className="font-fraunces font-semibold text-gray-700 mb-1">Contact</p>
<a <a
href="tel:+919554881799" 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 +91 95548 81799
</a> </a>
<a <a
href="mailto:hello@tia.baby" 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 hello@tia.baby
</a> </a>

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

@ -66,7 +66,7 @@ function Hero() {
</span> </span>
</h1> </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 Tia is a digital heirloom — not just a tracker. Every feed, every first
word, every vaccination, archived in one private place your child will word, every vaccination, archived in one private place your child will
one day look back on. 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-newsreader { font-family: var(--font-newsreader, Georgia, serif); }
.font-jetbrains { font-family: var(--font-jetbrains, ui-monospace, monospace); } .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 */ /* hide scrollbar but keep scroll */
.scrollbar-hide { .scrollbar-hide {
scrollbar-width: none; scrollbar-width: none;