From a3d89ee37c4df194e60e82de47d2df4c82386199 Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Sun, 31 May 2026 10:35:14 +0530
Subject: [PATCH] feat(about): heirloom letter redesign ported from About.html
 prototype
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Design system (cream paper, keepsake direction):
- --paper #f7f1e6 · --ink #1f1b16 · --accent #c98a2b (marigold)
- --accent-2 #b8503e (dusty rose) · --surface #fbf6ea
- Fonts: Fraunces (headings, italic) · Newsreader (body 19px/1.75)
         JetBrains Mono (labels) · Caveat (hand/caption, already loaded)
- Inline scoped <style> block — no globals pollution

Page structure (letter reading flow):
- Title-only hero with mono eyebrow — no byline, no photo (suspense)
- Opening: drop cap + family illustration floated right in a cream photo
  frame (washi tape + slight rotation + handwritten caption)
- 5 pull-quotes (side border + italic Fraunces) + centered variant
- Quiet italic subheadings with hairline rule
- Callout card: Nani/Dadu passage with marigold handwriting place names
- Dark manifesto band (#1f1b16): numbered creed 01–06
- Authorship revealed only at the end: closing display line → ✦ divider
  → signature "Yashika & Manohar" in Caveat
- P.S.: Tia portrait circle-floated left, playful note in tinted card

Interaction:
- AboutScrollReveal client component: elements above fold visible on
  first paint; below-fold get .tia-pre (opacity 0 + translateY 18px);
  scroll/resize handler removes .tia-pre as they enter viewport
- Respects prefers-reduced-motion — never hides content for users who
  prefer reduced motion

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/(marketing)/about/page.tsx            | 767 ++++++++++++------
 .../marketing/AboutScrollReveal.tsx           |  56 ++
 2 files changed, 593 insertions(+), 230 deletions(-)
 create mode 100644 src/components/marketing/AboutScrollReveal.tsx

diff --git a/src/app/(marketing)/about/page.tsx b/src/app/(marketing)/about/page.tsx
index ca4f9bb..c426dec 100644
--- a/src/app/(marketing)/about/page.tsx
+++ b/src/app/(marketing)/about/page.tsx
@@ -1,7 +1,332 @@
 import type { Metadata } from "next";
-import Image from "next/image";
 import Link from "next/link";
-import { Breadcrumb } from "@/components/marketing/Breadcrumb";
+import { Fraunces, Newsreader, JetBrains_Mono } from "next/font/google";
+import { AboutScrollReveal } from "@/components/marketing/AboutScrollReveal";
+
+// ── Fonts loaded only for this page ──────────────────────────────
+const fraunces = Fraunces({
+  subsets: ["latin"],
+  variable: "--font-fraunces",
+  weight: ["300", "400", "500", "600"],
+  style: ["normal", "italic"],
+  display: "swap",
+});
+const newsreader = Newsreader({
+  subsets: ["latin"],
+  variable: "--font-newsreader",
+  weight: ["300", "400", "500", "600"],
+  style: ["normal", "italic"],
+  display: "swap",
+});
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ["latin"],
+  variable: "--font-jetbrains",
+  weight: ["400", "500"],
+  display: "swap",
+});
+
+// ── 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:     #c98a2b;
+  --accent-2:   #b8503e;
+  --mani-bg:    #1f1b16;
+  --mani-fg:    #f3ead9;
+  --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;
+}
+.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;
+}
+
+/* ── manifesto (dark section) ── */
+.tia-mani {
+  background: var(--mani-bg); color: var(--mani-fg);
+  position: relative; z-index: 2;
+  margin: clamp(56px,9vw,104px) 0 0;
+  padding: clamp(56px,9vw,104px) clamp(20px,5vw,56px);
+}
+.tia-mani-inner { max-width: 920px; margin: 0 auto; }
+.tia-mani .me {
+  font-family: var(--fl); font-size: 11px; letter-spacing: .24em;
+  text-transform: uppercase; color: rgba(201,138,43,.9);
+  display: block; margin: 0 0 28px;
+}
+.tia-mani .mi {
+  font-family: var(--fd); font-weight: var(--dw);
+  font-size: clamp(1.7rem,4vw,2.6rem); line-height: 1.18;
+  letter-spacing: var(--ds); margin: 0 0 .6em; font-style: italic;
+  color: var(--mani-fg); text-wrap: balance;
+}
+.tia-mani .mi em { color: rgba(201,138,43,.9); }
+.tia-mani .ms {
+  font-size: 1.15rem; color: rgba(243,234,217,.72);
+  max-width: 38rem; margin: 0 0 44px;
+}
+.tia-mani .ms strong { color: var(--mani-fg); font-weight: 600; }
+
+/* creed list */
+.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);
+}
+.tia-mani .mf {
+  margin: 44px 0 0; font-size: 1.18rem;
+  color: rgba(243,234,217,.86); max-width: 40rem;
+}
+.tia-mani .mf strong { color: var(--mani-fg); font-weight: 600; }
+
+/* ── 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(201,138,43,.09); 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: var(--accent); color: #2a1c06; 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(201,138,43,.7);
+  transition: transform .2s, filter .2s;
+}
+.tia-cta .big:hover { transform: translateY(-2px); filter: brightness(.96); }
+.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",
@@ -15,151 +340,147 @@ export const metadata: Metadata = {
   },
 };
 
+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 className="min-h-screen bg-white">
+    <div className={`${fraunces.variable} ${newsreader.variable} ${jetbrainsMono.variable}`}>
+      {/* Page-specific design system — inline so it's scoped and SSR-safe */}
+      {/* eslint-disable-next-line react/no-danger */}
+      <style dangerouslySetInnerHTML={{ __html: CSS }} />
 
-      {/* ── 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" }]} />
+      {/* Scroll reveal — client-only behaviour, renders nothing to DOM */}
+      <AboutScrollReveal />
 
-          <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>
+      <div className="tia-letter">
 
-            {/* 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>
+        {/* ── 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&apos;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&nbsp;a.m.
+              wondering whether their baby&apos;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>
-        </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>
-            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&apos;t expected.
-          </p>
-          <p className="text-gray-500 italic">
-            Everything felt fragile. Everything felt new.
-          </p>
-          <p>
-            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&apos;s cough sounded different from yesterday.
-          </p>
-          <p>
-            When our daughter, Tia, was born, we made a silent promise: we would remember
-            everything.
-          </p>
-          <p className="font-medium text-gray-800">
-            We meant it completely.
-          </p>
-          <p>
-            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>
-            Those tiny details felt irreplaceable, and yet they were already beginning to fade.
-          </p>
-          <p className="text-rose-700 font-medium">
+          <p className="tia-pull accent tia-reveal">
             That realisation became the seed for everything Tia is today.
           </p>
-        </div>
 
-        {/* ── 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.
+          {/* ── 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>
-              Not because we wanted a monument to her. Not because we wanted her name attached
-              to a product.
-            </p>
-            <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>
-              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 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>
-            <p className="text-gray-500 italic">
-              This app is not a trophy. It is not a brand badge.
+          </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&apos;s life deserve extraordinary care. Every
+              decision we make comes from the same understanding:{" "}
+              <strong>small things matter.</strong>
             </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>
+            <p className="tia-strong tia-reveal">
               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.
+          {/* ── 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>
-              And with that comes a particular kind of loneliness that few people talk about.
-            </p>
-            <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>
-            <p className="text-gray-500 italic">
-              Tia was born from that reality, too.
+              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>
 
-          {/* 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 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 Nani in Lucknow can see today&apos;s moments without you
-              handing over your phone.
+              Tia is built so that{" "}
+              <span className="place">Nani in Lucknow</span> 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.
+              So that{" "}
+              <span className="place">Dadu in Jaipur</span> can be reminded of the vaccination
+              schedule without you sending a WhatsApp message at 11&nbsp;PM.
             </p>
             <p>
               So that the aunties — even when they are in another city — can still feel like a
@@ -167,142 +488,128 @@ export default function AboutPage() {
             </p>
           </div>
 
-          <div className="space-y-5 text-gray-700 leading-relaxed">
-            <p className="font-medium text-gray-800">
+          <div className="tia-col">
+            <p className="tia-strong tia-reveal">
               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 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>
-        </div>
+        </article>
 
-        {/* ── 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.
+        {/* ══ WHAT WE BELIEVE — dark manifesto section ════════════ */}
+        <section className="tia-mani" id="believe">
+          <div className="tia-mani-inner">
+            <span className="me tia-reveal">What we believe</span>
+            <p className="mi tia-reveal">
+              The first years of your child&apos;s life are not{" "}
+              <em>a metric to optimise</em>. They are irreplaceable.
             </p>
-            <p className="text-gray-500 italic">
-              Exhausting. Overwhelming. Beautiful.
+            <p className="ms 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>
+            <p className="ms tia-reveal">
+              <strong>Your job is to be present. Ours is to make the rest a little easier.</strong>
+            </p>
+
+            <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>
+
+            <p className="mf tia-reveal">
+              Every choice we make is guided by the same principle:{" "}
+              <strong>your family&apos;s story belongs to your family.</strong>
+            </p>
+          </div>
+        </section>
+
+        {/* ══ 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>
-              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>
+            <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>&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 className="tia-soft tia-reveal">
+              Photos. Stories. Milestones. Tiny moments that would otherwise have faded with
+              time.
             </p>
-            <p className="font-medium text-gray-800">
+            <p className="tia-strong tia-reveal">
               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>
+          {/* 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>
 
-          <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>
+          {/* Signature */}
+          <div className="tia-sign tia-reveal">
+            <p className="thanks">Thank you for trusting us with your family&apos;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 &amp; Manohar</p>
+                <p className="role">Co-founders, Tia · Gurugram</p>
+              </div>
             </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.)
+          {/* 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&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
-            href="/login"
-            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"
-          >
-            Get started — it&apos;s free →
-          </Link>
-          <p className="mt-3 text-xs text-gray-400">Free during early access. No credit card.</p>
-        </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&apos;s story today.</h3>
+            <Link className="big" href="/login">
+              Get started — it&apos;s free →
+            </Link>
+            <p className="fine">Free during early access. No credit card.</p>
+          </div>
+        </article>
 
       </div>
     </div>
diff --git a/src/components/marketing/AboutScrollReveal.tsx b/src/components/marketing/AboutScrollReveal.tsx
new file mode 100644
index 0000000..c763186
--- /dev/null
+++ b/src/components/marketing/AboutScrollReveal.tsx
@@ -0,0 +1,56 @@
+"use client";
+import { useEffect } from "react";
+
+// Initialises the gentle fade-in-on-scroll behaviour for the About letter.
+// Default: all .tia-reveal elements are VISIBLE on first paint.
+// Only elements below the fold get .tia-pre (opacity 0 + translateY) applied
+// on mount, then removed as they scroll into view. This guarantees content is
+// never stuck invisible if JS/IntersectionObserver misbehaves.
+export function AboutScrollReveal() {
+  useEffect(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+
+    const vh0 = window.innerHeight;
+    const all = Array.from(document.querySelectorAll<HTMLElement>(".tia-reveal"));
+
+    // If reduced motion: don't hide anything at all
+    if (!mq.matches) {
+      all.forEach((el) => {
+        if (el.getBoundingClientRect().top > vh0 * 0.9) {
+          el.classList.add("tia-pre");
+        }
+      });
+    }
+
+    let ticking = false;
+    function revealVisible() {
+      const vh = window.innerHeight;
+      document.querySelectorAll<HTMLElement>(".tia-reveal.tia-pre").forEach((el) => {
+        if (el.getBoundingClientRect().top < vh * 0.92) {
+          el.classList.remove("tia-pre");
+        }
+      });
+    }
+    function onTick() {
+      if (!ticking) {
+        ticking = true;
+        requestAnimationFrame(() => {
+          revealVisible();
+          ticking = false;
+        });
+      }
+    }
+
+    window.addEventListener("scroll", onTick, { passive: true });
+    window.addEventListener("resize", onTick);
+    window.addEventListener("load", revealVisible);
+    setTimeout(revealVisible, 300);
+
+    return () => {
+      window.removeEventListener("scroll", onTick);
+      window.removeEventListener("resize", onTick);
+    };
+  }, []);
+
+  return null;
+}