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

feat(about): full letter page with family illustration + Tia portrait

Browse source 
Content: complete "A Letter to Every New Parent" letter by Yashika &
Manohar — four named sections (Why We Named the App, Modern Families,
What We Believe, To the Parent Reading This) + signature

Images:
- /images/family-illustration.jpg — watercolour illustration of the
  family in the hero, 2-col layout at lg (copy left, image right)
- /images/tia-portrait.jpg — Tia's portrait cropped to circle in
  the closing signature

Design:
- Hero: rose→amber gradient, 2-col at lg, family illustration bottom-aligned
- Breadcrumb below hero intro
- Letter body max-w-2xl, generous leading, section borders
- "Nani in Lucknow / Dadu in Jaipur" in amber callout card
- Beliefs rendered as rose dot list
- Key line "Tia is here to help you remember your baby" in rose-700
- Closing parenthetical about Tia in a rose-50 italic card
- CTA: Get started → with hover lift

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Manohar Gupta 2026-05-31 02:30:40 +05:30
parent 1cbdd68756
commit 8f141883bb
3 changed files with 276 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/images/family-illustration.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 223 KiB

BIN
public/images/tia-portrait.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 85 KiB

301
src/app/(marketing)/about/page.tsx
View file

@ -1,58 +1,309 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { Breadcrumb } from "@/components/marketing/Breadcrumb";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "About Tia", title: "About Tia",
description: "The story behind Tia — built for Indian families by a parent who wanted something better.", description: "A letter to every new parent — the story of why Tia was built, named after our daughter, and made for families like yours.",
alternates: { canonical: "/about" }, alternates: { canonical: "/about" },
openGraph: { openGraph: {
type: "website", type: "website",
url: "/about", url: "/about",
title: "About Tia", title: "About Tia — A Letter to Every New Parent",
description: "The story behind Tia — built for Indian families by a parent who wanted something better.", description: "Built by parents. Inspired by our daughter. Made for families.",
}, },
}; };
export default function AboutPage() { export default function AboutPage() {
return ( return (
<div className="min-h-screen bg-white"> <div className="min-h-screen bg-white">
<div className="max-w-2xl mx-auto px-5 py-20">
<div className="mb-3 text-sm font-medium text-rose-500 uppercase tracking-widest">Our story</div>
<h1 className="text-4xl font-bold text-gray-900 mb-6 leading-tight">About Tia</h1>
<div className="prose prose-gray max-w-none text-gray-600 leading-relaxed space-y-5"> {/* ── Hero ── */}
<div className="bg-gradient-to-br from-rose-50 via-amber-50 to-rose-50 border-b border-rose-100">
<div className="max-w-4xl mx-auto px-5 pt-10 pb-0">
<Breadcrumb items={[{ label: "Home", href: "/" }, { label: "About" }]} />
<div className="mt-8 grid grid-cols-1 lg:grid-cols-[1fr_380px] gap-8 items-end">
{/* Left: letter heading */}
<div className="pb-10 lg:pb-16">
<p className="text-xs font-semibold text-rose-500 uppercase tracking-widest mb-4">Our story</p>
<h1 className="text-4xl sm:text-5xl font-bold text-gray-900 leading-tight mb-5">
A Letter to Every{" "}
<span className="text-rose-500" style={{ fontFamily: "var(--font-caveat)", fontSize: "1.1em" }}>
New Parent
</span>
</h1>
<p className="text-lg text-gray-500 leading-relaxed max-w-lg">
Built by parents. Inspired by our daughter. Made for families like yours.
</p>
<p className="mt-4 text-sm text-gray-400 italic">— Yashika &amp; Manohar</p>
</div>
{/* Right: family illustration */}
<div className="flex justify-center lg:justify-end">
<Image
src="/images/family-illustration.jpg"
alt="Yashika and Manohar holding baby Tia"
width={380}
height={480}
className="object-contain drop-shadow-md"
priority
/>
</div>
</div>
</div>
</div>
{/* ── Letter body ── */}
<div className="max-w-2xl mx-auto px-5 py-14">
{/* Opening */}
<div className="prose-like space-y-5 text-gray-700 leading-relaxed text-base sm:text-lg">
<p> <p>
Tia was born from a simple frustration: every baby tracking app out there felt foreign — built for When we held our daughter for the first time, we felt a rush of love we never knew
Western families, obsessed with data exports and minimalist dashboards, and completely silent on the we were capable of — and alongside it, a fear we hadn&apos;t expected.
things Indian parents actually care about. </p>
<p className="text-gray-500 italic">
Everything felt fragile. Everything felt new.
</p> </p>
<p> <p>
Where was the IAP vaccination schedule? Why did I have to manually track which relatives had visited In those early days, we wanted to capture every yawn, every gurgle, every tiny hand
during a fever? Why was there no way to share updates with grandparents without giving them full curling around our fingers. But the apps we tried felt cold and clinical, as though
edit access? they had been built by people who had never stayed awake at 3 a.m. wondering whether
</p> their baby&apos;s cough sounded different from yesterday.
<p className="font-medium text-gray-700 italic">
[Founder story — Manohar writes this section]
</p> </p>
<p> <p>
Tia is built on a simple belief: the first years of your child&apos;s life are irreplaceable. Every When our daughter, Tia, was born, we made a silent promise: we would remember
feed, every milestone, every silly face — these deserve to be preserved with care, not mined for everything.
ad revenue. </p>
<p className="font-medium text-gray-800">
We meant it completely.
</p> </p>
<p> <p>
We don&apos;t sell your data. We don&apos;t run ads. We don&apos;t build engagement loops. We build And within weeks, details were already slipping away — not the big milestones, but the
a digital heirloom your child will one day inherit. small things. The exact weight on day five. The way she stretched when she woke up. The
moment she first looked at us as though she knew who we were.
</p>
<p>
Those tiny details felt irreplaceable, and yet they were already beginning to fade.
</p>
<p className="text-rose-700 font-medium">
That realisation became the seed for everything Tia is today.
</p> </p>
</div> </div>
<div className="mt-12 pt-8 border-t border-gray-100"> {/* ── Section: Why We Named the App Tia ── */}
<div className="mt-14 pt-10 border-t border-gray-100">
<h2 className="text-2xl font-bold text-gray-900 mb-6">Why We Named the App Tia</h2>
<div className="space-y-5 text-gray-700 leading-relaxed">
<p>
We named this app after our daughter, Tia.
</p>
<p>
Not because we wanted a monument to her. Not because we wanted her name attached
to a product.
</p>
<p>
We named it after her because the love we have for our daughter is the same care
we bring to building this app every single day.
</p>
<p>
When we choose privacy over profit, patience over speed, and thoughtful design over
endless notifications, we are building Tia the way we hope to raise our daughter —
with care, responsibility, and respect.
</p>
<p className="text-gray-500 italic">
This app is not a trophy. It is not a brand badge.
</p>
<p>
It is simply an extension of what matters most to us.
</p>
<p>
We built Tia with the belief that the earliest years of a child&apos;s life deserve
extraordinary care. Every decision we make, every feature we release, and every
promise we keep comes from the same understanding: <strong>small things matter.</strong>
</p>
<p>
Because one day, those small things become the memories we treasure most.
</p>
</div>
</div>
{/* ── Section: A Note on Modern Families ── */}
<div className="mt-14 pt-10 border-t border-gray-100">
<h2 className="text-2xl font-bold text-gray-900 mb-6">A Note on Modern Families</h2>
<div className="space-y-5 text-gray-700 leading-relaxed">
<p>
Like many new parents today, we are raising our daughter in a nuclear family.
</p>
<p>
And with that comes a particular kind of loneliness that few people talk about.
</p>
<p>
The grandparents who once lived down the street may now live in another city. The
relatives whose advice once arrived over a cup of tea now appear through video calls.
The village that helped raise children for generations often feels farther away than
ever. The hands that could help are now often on the other side of a screen.
</p>
<p className="text-gray-500 italic">
Tia was born from that reality, too.
</p>
</div>
{/* Callout: Indian family context */}
<div className="my-8 bg-amber-50 border border-amber-200 rounded-2xl p-6 space-y-3 text-sm text-amber-900 leading-relaxed">
<p>
Tia is built so that Nani in Lucknow can see today&apos;s moments without you
handing over your phone.
</p>
<p>
So that Dadu in Jaipur can be reminded of the vaccination schedule without you
sending a WhatsApp message at 11 PM.
</p>
<p>
So that the aunties — even when they are in another city — can still feel like a
part of the story.
</p>
</div>
<div className="space-y-5 text-gray-700 leading-relaxed">
<p className="font-medium text-gray-800">
Because raising a child was never meant to be done alone.
</p>
<p>
In a small way, we hope Tia helps bring that village back — digitally, gently, and
with respect for the way modern Indian families actually live.
</p>
</div>
</div>
{/* ── Section: What We Believe ── */}
<div className="mt-14 pt-10 border-t border-gray-100">
<h2 className="text-2xl font-bold text-gray-900 mb-4">What We Believe</h2>
<p className="text-gray-700 leading-relaxed mb-2">
The first years of your child&apos;s life are not a metric to optimise.
</p>
<p className="text-gray-700 leading-relaxed mb-6">
They are irreplaceable.
</p>
<p className="text-gray-600 leading-relaxed mb-2">
No app can give you back a missed moment. No notification can replace being present
when your baby discovers their hands, says a first word, or falls asleep on your shoulder.
</p>
<p className="text-gray-700 leading-relaxed mb-8">
<span className="font-medium">Your job is to be present.</span><br />
Ours is to make the rest a little easier.
</p>
<p className="text-sm font-semibold text-gray-500 uppercase tracking-widest mb-4">
That&apos;s why:
</p>
<ul className="space-y-3">
{[
"Our vaccination schedule follows the IAP chart.",
"We don't sell your data.",
"We don't run ads.",
"We don't build engagement loops.",
"We don't treat your child as a product.",
"We build to protect memories, not compete for attention.",
].map((item) => (
<li key={item} className="flex items-start gap-3">
<span className="mt-1 w-5 h-5 rounded-full bg-rose-100 flex items-center justify-center shrink-0">
<span className="w-1.5 h-1.5 rounded-full bg-rose-500 block" />
</span>
<span className="text-gray-700 leading-relaxed">{item}</span>
</li>
))}
</ul>
<p className="mt-8 text-gray-700 leading-relaxed font-medium">
Every choice we make is guided by the same principle: your family&apos;s story belongs
to your family.
</p>
</div>
{/* ── Section: To the Parent Reading This ── */}
<div className="mt-14 pt-10 border-t border-gray-100">
<h2 className="text-2xl font-bold text-gray-900 mb-6">To the Parent Reading This</h2>
<div className="space-y-5 text-gray-700 leading-relaxed">
<p>
You are in the middle of something extraordinary.
</p>
<p className="text-gray-500 italic">
Exhausting. Overwhelming. Beautiful.
</p>
<p>
You will never have this week again. Or this month. Or this exact version of your
child — so small, so curious, and so completely dependent on you.
</p>
<p>
Tia is not here to track your baby.
</p>
<p className="text-rose-700 font-medium text-lg">
Tia is here to help you remember your baby — and to hand that memory to them
someday, complete, authentic, and full of love.
</p>
<p>
And one day, when your child asks,{" "}
<em>&ldquo;What was I like when I was little?&rdquo;</em> — we hope you&apos;ll
have an answer richer than memory alone.
</p>
<p className="text-gray-500">
Photos. Stories. Milestones. Tiny moments that would otherwise have faded with time.
</p>
<p className="font-medium text-gray-800">
A digital heirloom, built with love and preserved with care.
</p>
</div>
</div>
{/* ── Signature ── */}
<div className="mt-14 pt-10 border-t border-gray-100">
<p className="text-gray-600 mb-6">Thank you for trusting us with your family&apos;s story.</p>
<p className="text-lg font-semibold text-gray-800 mb-1">Welcome to the Tia family.</p>
<p className="text-gray-500 mb-8">With warmth,</p>
<div className="flex items-center gap-5">
<Image
src="/images/tia-portrait.jpg"
alt="Baby Tia"
width={80}
height={80}
className="rounded-full object-cover border-2 border-rose-200 shadow-sm"
/>
<div>
<p
className="text-2xl text-gray-800"
style={{ fontFamily: "var(--font-caveat)" }}
>
Yashika &amp; Manohar
</p>
<p className="text-xs text-gray-400 mt-0.5">Co-founders, Tia · Gurugram</p>
</div>
</div>
<div className="mt-6 bg-rose-50 border border-rose-100 rounded-xl p-5 text-sm text-rose-800 leading-relaxed italic">
(and Tia — currently eight months old, trying very hard to eat her own feet, and
having absolutely no idea that we named this app after her. One day she&apos;ll find
out. We can&apos;t wait to see her face.)
</div>
</div>
{/* ── CTA ── */}
<div className="mt-14 pt-10 border-t border-gray-100 text-center">
<p className="text-gray-500 mb-5 text-sm">
Join the families already building their digital heirloom.
</p>
<Link <Link
href="/" href="/login"
className="inline-flex items-center gap-2 text-sm font-medium text-rose-600 hover:text-rose-700 transition-colors" className="inline-flex items-center gap-2 bg-rose-500 hover:bg-rose-600 text-white font-semibold px-8 py-3.5 rounded-full transition-all duration-200 shadow-sm hover:shadow-md hover:-translate-y-0.5"
> >
← Back to home Get started — it&apos;s free →
</Link> </Link>
<p className="mt-3 text-xs text-gray-400">Free during early access. No credit card.</p>
</div> </div>
</div> </div>
</div> </div>
); );