Mannu
c523533531
Loading:
- Fraunces, Newsreader, JetBrains_Mono added to (marketing)/layout.tsx
as CSS variables -- one load point, cached for all marketing pages
- 3 utility classes added to globals.css: .font-fraunces, .font-newsreader,
.font-jetbrains
- about/page.tsx: removed duplicate font loading (now from layout)
Font roles applied:
Fraunces → all h1/h2/h3 headings + blog card titles + hero h1 (italic)
Newsreader → long prose blocks: TheProblem, FounderStory card, Privacy
intro, HeirloomVision description, blog article paragraphs,
blog post excerpt
JetBrains → all small uppercase eyebrow labels across every section
Geist → nav, buttons, feature card body, short UI text (unchanged)
Pages updated: homepage, blog listing, blog articles, pricing, partners
About page: fonts resolve identically via layout variables, no visual change
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
568 lines
22 KiB
TypeScript
568 lines
22 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
import { AboutScrollReveal } from "@/components/marketing/AboutScrollReveal";
|
|
|
|
// Fonts (Fraunces, Newsreader, JetBrains Mono) are now loaded globally
|
|
// in (marketing)/layout.tsx and available via CSS variables.
|
|
|
|
// ── Page-level styles (design tokens + letter layout) ─────────────
|
|
const CSS = `
|
|
.tia-letter {
|
|
--paper: #f7f1e6;
|
|
--surface: #fbf6ea;
|
|
--ink: #1f1b16;
|
|
--ink-soft: #5a5048;
|
|
--ink-faint: #8a7e6f;
|
|
--rule: #ddd2bc;
|
|
--rule-soft: #e8ded0;
|
|
--accent: #f43f5e; /* rose-500 — site primary */
|
|
--accent-2: #e11d48; /* rose-600 — emphasis */
|
|
--fd: var(--font-fraunces, Georgia, serif);
|
|
--fb: var(--font-newsreader, Georgia, serif);
|
|
--fl: var(--font-jetbrains, ui-monospace, monospace);
|
|
--fh: var(--font-caveat, cursive);
|
|
--dw: 400;
|
|
--ds: -0.02em;
|
|
--r: 18px;
|
|
--measure: 39rem;
|
|
|
|
background: var(--paper);
|
|
color: var(--ink);
|
|
font-family: var(--fb);
|
|
font-size: 19px;
|
|
line-height: 1.75;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* subtle paper grain */
|
|
.tia-letter::after {
|
|
content: '';
|
|
position: fixed; inset: 0; pointer-events: none; z-index: 1;
|
|
background-image: repeating-linear-gradient(0deg,rgba(31,27,22,.016) 0 1px,transparent 1px 3px);
|
|
}
|
|
|
|
/* ── hero ── */
|
|
.tia-hero {
|
|
padding: clamp(52px,10vw,104px) clamp(20px,5vw,56px) clamp(8px,2vw,24px);
|
|
text-align: center;
|
|
position: relative; z-index: 2;
|
|
background: linear-gradient(135deg, #fff1f2 0%, #fffbeb 50%, #fff1f2 100%);
|
|
}
|
|
.tia-eyebrow {
|
|
display: inline-flex; align-items: center; gap: 10px;
|
|
font-family: var(--fl); font-size: 11px; letter-spacing: .22em;
|
|
text-transform: uppercase; color: var(--accent); margin: 0 0 22px;
|
|
}
|
|
.tia-eyebrow::before,.tia-eyebrow::after {
|
|
content: ''; width: 24px; height: 1px; background: var(--accent);
|
|
}
|
|
.tia-hero h1 {
|
|
font-family: var(--fd); font-weight: var(--dw);
|
|
font-size: clamp(2.7rem,7vw,4.6rem); line-height: 1.02;
|
|
letter-spacing: var(--ds); margin: 0; color: var(--ink);
|
|
font-style: italic; text-wrap: balance;
|
|
}
|
|
.tia-hero h1 .hand {
|
|
font-family: var(--fh); color: var(--accent-2);
|
|
font-weight: 600; font-size: 1.04em; font-style: normal;
|
|
}
|
|
|
|
/* ── letter body ── */
|
|
.tia-body {
|
|
position: relative; z-index: 2;
|
|
max-width: 1120px; margin: 0 auto;
|
|
padding: clamp(48px,9vw,96px) clamp(20px,5vw,56px) 0;
|
|
}
|
|
.tia-col {
|
|
max-width: var(--measure); margin: 0 auto; display: flow-root;
|
|
}
|
|
.tia-col p { margin: 0 0 1em; }
|
|
.tia-col p:last-child { margin-bottom: 0; }
|
|
.tia-col strong { font-weight: 600; color: var(--ink); }
|
|
.tia-col em { font-style: italic; }
|
|
|
|
/* drop cap */
|
|
.tia-dropcap::first-letter {
|
|
font-family: var(--fd); font-weight: 600; float: left;
|
|
font-size: 4.6em; line-height: .78; padding: 8px 14px 0 0;
|
|
color: var(--accent-2); font-style: italic;
|
|
}
|
|
|
|
/* display highlight line */
|
|
.tia-hl {
|
|
font-family: var(--fd); font-weight: var(--dw);
|
|
font-size: clamp(1.4rem,2.8vw,1.78rem); line-height: 1.28;
|
|
letter-spacing: var(--ds); color: var(--accent-2);
|
|
margin: 1em 0 0; font-style: italic;
|
|
}
|
|
|
|
/* pull quotes */
|
|
.tia-pull {
|
|
max-width: var(--measure); margin: 2em auto;
|
|
font-family: var(--fd); font-weight: var(--dw);
|
|
font-size: clamp(1.7rem,3.6vw,2.5rem); line-height: 1.16;
|
|
letter-spacing: var(--ds); color: var(--ink);
|
|
text-wrap: balance; padding-left: 28px;
|
|
border-left: 2px solid var(--accent); font-style: italic;
|
|
}
|
|
.tia-pull.accent { color: var(--accent-2); }
|
|
.tia-pull.center {
|
|
text-align: center; padding-left: 0; border-left: 0;
|
|
border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
|
|
padding: 1.1em 0;
|
|
}
|
|
|
|
/* quiet sub-headings */
|
|
.tia-subhead {
|
|
max-width: var(--measure); margin: 2.4em auto .85em;
|
|
padding-top: 1em; border-top: 1px solid var(--rule-soft);
|
|
font-family: var(--fd); font-weight: var(--dw);
|
|
font-size: clamp(1.45rem,3vw,1.95rem); line-height: 1.14;
|
|
letter-spacing: var(--ds); color: var(--ink); font-style: italic;
|
|
}
|
|
|
|
/* floated photo frame */
|
|
.tia-float {
|
|
float: right; width: 250px; margin: 4px 0 18px 34px;
|
|
}
|
|
@media (max-width: 600px) {
|
|
.tia-float { float: none; width: min(290px,80vw); margin: 0 auto 22px; display: block; }
|
|
}
|
|
.tia-frame {
|
|
position: relative; background: var(--surface);
|
|
padding: 15px 15px 18px; border: 1px solid var(--rule);
|
|
box-shadow: 0 22px 50px -20px rgba(31,27,22,.34), 0 2px 6px rgba(31,27,22,.08);
|
|
transform: rotate(-1.6deg);
|
|
}
|
|
.tia-frame img { display: block; width: 100%; height: auto; }
|
|
.tia-tape {
|
|
position: absolute; top: -12px; left: 50%;
|
|
transform: translateX(-50%) rotate(-3deg);
|
|
width: 120px; height: 26px;
|
|
background: rgba(201,138,43,.6); opacity: .8;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,.1);
|
|
}
|
|
.tia-float figcaption {
|
|
font-family: var(--fh); text-align: center;
|
|
margin-top: 10px; font-size: 1.2rem; color: var(--ink-soft);
|
|
}
|
|
|
|
/* callout card */
|
|
.tia-callout {
|
|
max-width: var(--measure); margin: 2.4em auto;
|
|
background: var(--surface); border: 1px solid var(--rule);
|
|
border-radius: var(--r); padding: clamp(24px,4vw,38px);
|
|
position: relative;
|
|
}
|
|
.tia-callout::before {
|
|
content: '“'; position: absolute; top: -.18em; left: .22em;
|
|
font-family: var(--fd); font-style: italic; font-size: 5rem;
|
|
color: rgba(201,138,43,.4); line-height: 1;
|
|
}
|
|
.tia-callout p {
|
|
font-size: 1.12rem; color: var(--ink-soft);
|
|
margin: 0 0 .8em; padding-left: 1.6em;
|
|
}
|
|
.tia-callout p:last-child { margin-bottom: 0; }
|
|
.tia-callout .place {
|
|
color: var(--accent); font-weight: 600;
|
|
font-family: var(--fh); font-size: 1.3em;
|
|
}
|
|
|
|
/* creed list — same cream paper as rest of letter */
|
|
.tia-creed {
|
|
list-style: none; max-width: var(--measure);
|
|
margin: 1.7em auto; padding: 0;
|
|
border-top: 1px solid var(--rule);
|
|
}
|
|
.tia-creed li {
|
|
display: flex; align-items: baseline; gap: 16px;
|
|
padding: 14px 2px; border-bottom: 1px solid var(--rule-soft);
|
|
}
|
|
.tia-creed .n {
|
|
font-family: var(--fl); font-size: 11px; letter-spacing: .12em;
|
|
color: var(--accent); min-width: 24px;
|
|
}
|
|
.tia-creed .t {
|
|
font-family: var(--fb); font-size: 1.12rem; line-height: 1.5; color: var(--ink);
|
|
}
|
|
/* ── closing / signature ── */
|
|
.tia-closing {
|
|
max-width: var(--measure); margin: 2.6em auto 0; text-align: center;
|
|
font-family: var(--fd); font-weight: var(--dw);
|
|
font-size: clamp(1.5rem,3.2vw,2.1rem); line-height: 1.22;
|
|
letter-spacing: var(--ds); color: var(--accent-2); font-style: italic;
|
|
}
|
|
.tia-divider {
|
|
max-width: var(--measure); margin: 2.6em auto; text-align: center;
|
|
line-height: 1; color: var(--accent); font-size: 1.1rem;
|
|
}
|
|
.tia-sign { max-width: var(--measure); margin: 0 auto; }
|
|
.tia-sign .thanks { color: var(--ink-soft); margin: 0 0 1.4em; }
|
|
.tia-sign .welcome {
|
|
font-family: var(--fd); font-weight: var(--dw);
|
|
font-size: clamp(1.5rem,3vw,2rem); letter-spacing: var(--ds);
|
|
margin: 0 0 .2em; color: var(--ink);
|
|
}
|
|
.tia-sign .warmth { color: var(--ink-faint); margin: 0 0 2em; }
|
|
.tia-sign-row { display: flex; align-items: center; gap: 22px; }
|
|
.tia-sign-row .names {
|
|
font-family: var(--fh); font-size: 2.1rem; line-height: 1; color: var(--ink); margin: 0;
|
|
}
|
|
.tia-sign-row .role {
|
|
font-family: var(--fl); font-size: 11px; letter-spacing: .12em;
|
|
text-transform: uppercase; color: var(--ink-faint); margin: 8px 0 0;
|
|
}
|
|
|
|
/* P.S. box */
|
|
.tia-ps {
|
|
max-width: var(--measure); margin: 2.6em auto 0; display: flow-root;
|
|
background: rgba(244,63,94,.05); border: 1px solid var(--rule);
|
|
border-radius: var(--r); padding: 24px 26px;
|
|
font-style: italic; color: var(--ink-soft); font-size: 1.04rem; line-height: 1.62;
|
|
}
|
|
.tia-ps-photo {
|
|
float: left; width: 78px; height: 78px; border-radius: 50%;
|
|
object-fit: cover; object-position: center 15%;
|
|
margin: 2px 20px 8px 0;
|
|
border: 2px solid var(--rule);
|
|
shape-outside: circle(52%);
|
|
box-shadow: 0 6px 16px -8px rgba(31,27,22,.4);
|
|
}
|
|
.tia-ps b {
|
|
font-style: normal; font-family: var(--fl); font-size: 11px;
|
|
letter-spacing: .14em; text-transform: uppercase;
|
|
color: var(--accent); margin-right: 6px; font-weight: 500;
|
|
}
|
|
|
|
/* CTA */
|
|
.tia-cta {
|
|
text-align: center; max-width: var(--measure);
|
|
margin: clamp(56px,9vw,96px) auto 0;
|
|
padding-bottom: clamp(56px,9vw,96px);
|
|
}
|
|
.tia-cta .ck {
|
|
font-family: var(--fl); font-size: 11px; letter-spacing: .2em;
|
|
text-transform: uppercase; color: var(--ink-faint); margin: 0 0 18px;
|
|
}
|
|
.tia-cta h3 {
|
|
font-family: var(--fd); font-weight: var(--dw);
|
|
font-size: clamp(1.7rem,4vw,2.4rem); letter-spacing: var(--ds);
|
|
margin: 0 0 28px; color: var(--ink); font-style: italic; text-wrap: balance;
|
|
}
|
|
.tia-cta .big {
|
|
display: inline-flex; align-items: center; gap: 12px;
|
|
background: #f43f5e; color: #ffffff; border: 0;
|
|
font-family: var(--fb); font-weight: 500; font-size: 1.05rem;
|
|
padding: 16px 32px; border-radius: var(--r); text-decoration: none;
|
|
box-shadow: 0 12px 30px -12px rgba(244,63,94,.4);
|
|
transition: transform .2s, background .2s;
|
|
}
|
|
.tia-cta .big:hover { transform: translateY(-2px); background: #e11d48; }
|
|
.tia-cta .fine { font-size: .85rem; color: var(--ink-faint); margin: 16px 0 0; }
|
|
|
|
/* text helpers */
|
|
.tia-soft { color: var(--ink-soft); }
|
|
.tia-strong { font-weight: 600; color: var(--ink); }
|
|
|
|
/* scroll reveal */
|
|
.tia-reveal {
|
|
transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
|
|
}
|
|
.tia-reveal.tia-pre { opacity: 0; transform: translateY(18px); }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.tia-reveal.tia-pre { opacity: 1 !important; transform: none !important; }
|
|
}
|
|
`;
|
|
|
|
export const metadata: Metadata = {
|
|
title: "About Tia",
|
|
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" },
|
|
openGraph: {
|
|
type: "website",
|
|
url: "/about",
|
|
title: "About Tia — A Letter to Every New Parent",
|
|
description: "Built by parents. Inspired by our daughter. Made for families.",
|
|
},
|
|
};
|
|
|
|
const CREED = [
|
|
"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.",
|
|
];
|
|
|
|
export default function AboutPage() {
|
|
return (
|
|
<div>
|
|
{/* Page-specific design system — inline so it's scoped and SSR-safe */}
|
|
{/* eslint-disable-next-line react/no-danger */}
|
|
<style dangerouslySetInnerHTML={{ __html: CSS }} />
|
|
|
|
{/* Scroll reveal — client-only behaviour, renders nothing to DOM */}
|
|
<AboutScrollReveal />
|
|
|
|
<div className="tia-letter">
|
|
|
|
{/* ── HERO: title only — suspense preserved ── */}
|
|
<header className="tia-hero">
|
|
<p className="tia-eyebrow tia-reveal">Our story</p>
|
|
<h1 className="tia-reveal">
|
|
A letter to every<br />
|
|
<span className="hand">new parent</span>
|
|
</h1>
|
|
</header>
|
|
|
|
{/* ══ LETTER BODY ══════════════════════════════════════════ */}
|
|
<article className="tia-body" id="story">
|
|
|
|
{/* Opening — drop cap + floated photo */}
|
|
<div className="tia-col">
|
|
<p className="tia-dropcap tia-reveal">
|
|
When we held our daughter for the first time, we felt a rush of love we never knew
|
|
we were capable of — and alongside it, a fear we hadn't expected.
|
|
</p>
|
|
|
|
{/* Family illustration — floats right, text wraps */}
|
|
<figure className="tia-float tia-reveal">
|
|
<div className="tia-frame">
|
|
<span className="tia-tape" />
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img src="/images/family-illustration.jpg" alt="Yashika and Manohar holding baby Tia" />
|
|
</div>
|
|
<figcaption>the three of us — 2026</figcaption>
|
|
</figure>
|
|
|
|
<p className="tia-hl tia-reveal">Everything felt fragile. Everything felt new.</p>
|
|
|
|
<p className="tia-reveal">
|
|
In those early days, we wanted to capture every yawn, every gurgle, every tiny
|
|
hand curling around our fingers. But the apps we tried felt cold and clinical — as
|
|
though they had been built by people who had never stayed awake at 3 a.m.
|
|
wondering whether their baby's cough sounded different from yesterday.
|
|
</p>
|
|
<p className="tia-reveal">
|
|
When our daughter, Tia, was born, we made a silent promise: we would remember
|
|
everything.
|
|
</p>
|
|
<p className="tia-strong tia-reveal">We meant it completely.</p>
|
|
<p className="tia-reveal">
|
|
And within weeks, details were already slipping away — not the big milestones, but
|
|
the 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 className="tia-soft tia-reveal">
|
|
Those tiny details felt irreplaceable, and yet they were already beginning to fade.
|
|
</p>
|
|
</div>
|
|
|
|
<p className="tia-pull accent tia-reveal">
|
|
That realisation became the seed for everything Tia is today.
|
|
</p>
|
|
|
|
{/* ── Why we named it ── */}
|
|
<h2 className="tia-subhead tia-reveal">Why we named the app Tia</h2>
|
|
<div className="tia-col">
|
|
<p className="tia-reveal">
|
|
We named this app after our daughter, Tia. Not because we wanted a monument to
|
|
her. Not because we wanted her name attached to a product.
|
|
</p>
|
|
<p className="tia-reveal">
|
|
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 className="tia-reveal">
|
|
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>
|
|
</div>
|
|
|
|
<p className="tia-pull accent tia-reveal">
|
|
This app is not a trophy. It is not a brand badge.
|
|
</p>
|
|
|
|
<div className="tia-col">
|
|
<p className="tia-reveal">
|
|
It is simply an extension of what matters most to us. We built Tia with the belief
|
|
that the earliest years of a child's life deserve extraordinary care. Every
|
|
decision we make comes from the same understanding:{" "}
|
|
<strong>small things matter.</strong>
|
|
</p>
|
|
<p className="tia-strong tia-reveal">
|
|
Because one day, those small things become the memories we treasure most.
|
|
</p>
|
|
</div>
|
|
|
|
{/* ── Modern families ── */}
|
|
<h2 className="tia-subhead tia-reveal">A note on modern families</h2>
|
|
<div className="tia-col">
|
|
<p className="tia-reveal">
|
|
Like many new parents today, we are raising our daughter in a nuclear family. And
|
|
with that comes a particular kind of loneliness that few people talk about.
|
|
</p>
|
|
<p className="tia-reveal">
|
|
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>
|
|
</div>
|
|
|
|
<p className="tia-pull center accent tia-reveal">
|
|
Tia was born from that reality, too.
|
|
</p>
|
|
|
|
<div className="tia-callout tia-reveal">
|
|
<p>
|
|
Tia is built so that{" "}
|
|
<span className="place">Nani in Lucknow</span> can see today's moments
|
|
without you handing over your phone.
|
|
</p>
|
|
<p>
|
|
So that{" "}
|
|
<span className="place">Dadu in Jaipur</span> 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="tia-col">
|
|
<p className="tia-strong tia-reveal">
|
|
Because raising a child was never meant to be done alone.
|
|
</p>
|
|
<p className="tia-reveal">
|
|
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>
|
|
</article>
|
|
|
|
{/* ══ WHAT WE BELIEVE — same cream paper, continuous letter ═ */}
|
|
<article className="tia-body" id="believe">
|
|
<h2 className="tia-subhead tia-reveal">What we believe</h2>
|
|
|
|
<p className="tia-pull accent tia-reveal">
|
|
The first years of your child's life are not a metric to optimise.
|
|
They are irreplaceable.
|
|
</p>
|
|
|
|
<div className="tia-col">
|
|
<p className="tia-reveal">
|
|
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="tia-strong tia-reveal">
|
|
Your job is to be present. Ours is to make the rest a little easier.
|
|
</p>
|
|
</div>
|
|
|
|
<ul className="tia-creed tia-reveal">
|
|
{CREED.map((item, i) => (
|
|
<li key={i}>
|
|
<span className="n">0{i + 1}</span>
|
|
<span className="t">{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<div className="tia-col">
|
|
<p className="tia-strong tia-reveal">
|
|
Every choice we make is guided by the same principle: your family's story
|
|
belongs to your family.
|
|
</p>
|
|
</div>
|
|
</article>
|
|
|
|
{/* ══ TO THE PARENT + SIGNATURE ════════════════════════════ */}
|
|
<article className="tia-body">
|
|
<h2 className="tia-subhead tia-reveal">To the parent reading this</h2>
|
|
<div className="tia-col">
|
|
<p className="tia-reveal">
|
|
You are in the middle of something extraordinary.{" "}
|
|
<em>Exhausting. Overwhelming. Beautiful.</em>
|
|
</p>
|
|
<p className="tia-reveal">
|
|
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 className="tia-reveal">Tia is not here to track your baby.</p>
|
|
</div>
|
|
|
|
<p className="tia-pull accent tia-reveal">
|
|
Tia is here to help you remember your baby — and to hand that memory to them
|
|
someday, complete, authentic, and full of love.
|
|
</p>
|
|
|
|
<div className="tia-col">
|
|
<p className="tia-reveal">
|
|
And one day, when your child asks,{" "}
|
|
<em>“What was I like when I was little?”</em> — we hope you'll
|
|
have an answer richer than memory alone.
|
|
</p>
|
|
<p className="tia-soft tia-reveal">
|
|
Photos. Stories. Milestones. Tiny moments that would otherwise have faded with
|
|
time.
|
|
</p>
|
|
<p className="tia-strong tia-reveal">
|
|
A digital heirloom, built with love and preserved with care.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Final reveal — authorship */}
|
|
<p className="tia-closing tia-reveal">
|
|
Built by parents. Inspired by our daughter. Made for families like yours.
|
|
</p>
|
|
<div className="tia-divider tia-reveal">✦</div>
|
|
|
|
{/* Signature */}
|
|
<div className="tia-sign tia-reveal">
|
|
<p className="thanks">Thank you for trusting us with your family's story.</p>
|
|
<p className="welcome">Welcome to the Tia family.</p>
|
|
<p className="warmth">With warmth,</p>
|
|
<div className="tia-sign-row">
|
|
<div>
|
|
<p className="names">Yashika & Manohar</p>
|
|
<p className="role">Co-founders, Tia · Gurugram</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* P.S. — Tia's portrait floated left */}
|
|
<div className="tia-ps tia-reveal">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
className="tia-ps-photo"
|
|
src="/images/tia-portrait.jpg"
|
|
alt="Baby Tia"
|
|
/>
|
|
<b>P.S.</b>{" "}
|
|
…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'll
|
|
find out. We can't wait to see her face.
|
|
</div>
|
|
|
|
{/* CTA */}
|
|
<div className="tia-cta tia-reveal" id="join">
|
|
<p className="ck">Join the families already building their heirloom</p>
|
|
<h3>Start your child's story today.</h3>
|
|
<Link className="big" href="/login">
|
|
Get started — it's free →
|
|
</Link>
|
|
<p className="fine">Free during early access. No credit card.</p>
|
|
</div>
|
|
</article>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|