feat(about): heirloom letter redesign ported from About.html prototype
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>
This commit is contained in:
parent
8f141883bb
commit
a3d89ee37c
2 changed files with 593 additions and 230 deletions
|
|
@ -1,7 +1,332 @@
|
||||||
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";
|
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 = {
|
export const metadata: Metadata = {
|
||||||
title: "About Tia",
|
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() {
|
export default function AboutPage() {
|
||||||
return (
|
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 ── */}
|
{/* Scroll reveal — client-only behaviour, renders nothing to DOM */}
|
||||||
<div className="bg-gradient-to-br from-rose-50 via-amber-50 to-rose-50 border-b border-rose-100">
|
<AboutScrollReveal />
|
||||||
<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">
|
<div className="tia-letter">
|
||||||
{/* 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 & Manohar</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Right: family illustration */}
|
{/* ── HERO: title only — suspense preserved ── */}
|
||||||
<div className="flex justify-center lg:justify-end">
|
<header className="tia-hero">
|
||||||
<Image
|
<p className="tia-eyebrow tia-reveal">Our story</p>
|
||||||
src="/images/family-illustration.jpg"
|
<h1 className="tia-reveal">
|
||||||
alt="Yashika and Manohar holding baby Tia"
|
A letter to every<br />
|
||||||
width={380}
|
<span className="hand">new parent</span>
|
||||||
height={480}
|
</h1>
|
||||||
className="object-contain drop-shadow-md"
|
</header>
|
||||||
priority
|
|
||||||
/>
|
{/* ══ LETTER BODY ══════════════════════════════════════════ */}
|
||||||
</div>
|
<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>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ── Letter body ── */}
|
<p className="tia-pull accent tia-reveal">
|
||||||
<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'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'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">
|
|
||||||
That realisation became the seed for everything Tia is today.
|
That realisation became the seed for everything Tia is today.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ── Section: Why We Named the App Tia ── */}
|
{/* ── Why we named it ── */}
|
||||||
<div className="mt-14 pt-10 border-t border-gray-100">
|
<h2 className="tia-subhead tia-reveal">Why we named the app Tia</h2>
|
||||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">Why We Named the App Tia</h2>
|
<div className="tia-col">
|
||||||
<div className="space-y-5 text-gray-700 leading-relaxed">
|
<p className="tia-reveal">
|
||||||
<p>
|
We named this app after our daughter, Tia. Not because we wanted a monument to
|
||||||
We named this app after our daughter, Tia.
|
her. Not because we wanted her name attached to a product.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p className="tia-reveal">
|
||||||
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 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.
|
we bring to building this app every single day.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p className="tia-reveal">
|
||||||
When we choose privacy over profit, patience over speed, and thoughtful design over
|
When we choose privacy over profit, patience over speed, and thoughtful design
|
||||||
endless notifications, we are building Tia the way we hope to raise our daughter —
|
over endless notifications, we are building Tia the way we hope to raise our
|
||||||
with care, responsibility, and respect.
|
daughter — with care, responsibility, and respect.
|
||||||
</p>
|
</p>
|
||||||
<p className="text-gray-500 italic">
|
</div>
|
||||||
This app is not a trophy. It is not a brand badge.
|
|
||||||
|
<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>
|
||||||
<p>
|
<p className="tia-strong tia-reveal">
|
||||||
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'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.
|
Because one day, those small things become the memories we treasure most.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ── Section: A Note on Modern Families ── */}
|
{/* ── Modern families ── */}
|
||||||
<div className="mt-14 pt-10 border-t border-gray-100">
|
<h2 className="tia-subhead tia-reveal">A note on modern families</h2>
|
||||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">A Note on Modern Families</h2>
|
<div className="tia-col">
|
||||||
<div className="space-y-5 text-gray-700 leading-relaxed">
|
<p className="tia-reveal">
|
||||||
<p>
|
Like many new parents today, we are raising our daughter in a nuclear family. And
|
||||||
Like many new parents today, we are raising our daughter in a nuclear family.
|
with that comes a particular kind of loneliness that few people talk about.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p className="tia-reveal">
|
||||||
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
|
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.
|
relatives whose advice once arrived over a cup of tea now appear through video
|
||||||
The village that helped raise children for generations often feels farther away than
|
calls. The village that helped raise children for generations often feels farther
|
||||||
ever. The hands that could help are now often on the other side of a screen.
|
away than ever. The hands that could help are now often on the other side of a
|
||||||
</p>
|
screen.
|
||||||
<p className="text-gray-500 italic">
|
|
||||||
Tia was born from that reality, too.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Callout: Indian family context */}
|
<p className="tia-pull center accent tia-reveal">
|
||||||
<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">
|
Tia was born from that reality, too.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="tia-callout tia-reveal">
|
||||||
<p>
|
<p>
|
||||||
Tia is built so that Nani in Lucknow can see today's moments without you
|
Tia is built so that{" "}
|
||||||
handing over your phone.
|
<span className="place">Nani in Lucknow</span> can see today's moments
|
||||||
|
without you handing over your phone.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
So that Dadu in Jaipur can be reminded of the vaccination schedule without you
|
So that{" "}
|
||||||
sending a WhatsApp message at 11 PM.
|
<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>
|
||||||
<p>
|
<p>
|
||||||
So that the aunties — even when they are in another city — can still feel like a
|
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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-5 text-gray-700 leading-relaxed">
|
<div className="tia-col">
|
||||||
<p className="font-medium text-gray-800">
|
<p className="tia-strong tia-reveal">
|
||||||
Because raising a child was never meant to be done alone.
|
Because raising a child was never meant to be done alone.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p className="tia-reveal">
|
||||||
In a small way, we hope Tia helps bring that village back — digitally, gently, and
|
In a small way, we hope Tia helps bring that village back — digitally, gently,
|
||||||
with respect for the way modern Indian families actually live.
|
and with respect for the way modern Indian families actually live.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</article>
|
||||||
|
|
||||||
{/* ── Section: What We Believe ── */}
|
{/* ══ WHAT WE BELIEVE — dark manifesto section ════════════ */}
|
||||||
<div className="mt-14 pt-10 border-t border-gray-100">
|
<section className="tia-mani" id="believe">
|
||||||
<h2 className="text-2xl font-bold text-gray-900 mb-4">What We Believe</h2>
|
<div className="tia-mani-inner">
|
||||||
<p className="text-gray-700 leading-relaxed mb-2">
|
<span className="me tia-reveal">What we believe</span>
|
||||||
The first years of your child's life are not a metric to optimise.
|
<p className="mi tia-reveal">
|
||||||
</p>
|
The first years of your child's life are not{" "}
|
||||||
<p className="text-gray-700 leading-relaxed mb-6">
|
<em>a metric to optimise</em>. They are irreplaceable.
|
||||||
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'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'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>
|
||||||
<p className="text-gray-500 italic">
|
<p className="ms tia-reveal">
|
||||||
Exhausting. Overwhelming. Beautiful.
|
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>
|
<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'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
|
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.
|
child — so small, so curious, and so completely dependent on you.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p className="tia-reveal">Tia is not here to track your baby.</p>
|
||||||
Tia is not here to track your baby.
|
</div>
|
||||||
</p>
|
|
||||||
<p className="text-rose-700 font-medium text-lg">
|
<p className="tia-pull accent tia-reveal">
|
||||||
Tia is here to help you remember your baby — and to hand that memory to them
|
Tia is here to help you remember your baby — and to hand that memory to them
|
||||||
someday, complete, authentic, and full of love.
|
someday, complete, authentic, and full of love.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
|
||||||
|
<div className="tia-col">
|
||||||
|
<p className="tia-reveal">
|
||||||
And one day, when your child asks,{" "}
|
And one day, when your child asks,{" "}
|
||||||
<em>“What was I like when I was little?”</em> — we hope you'll
|
<em>“What was I like when I was little?”</em> — we hope you'll
|
||||||
have an answer richer than memory alone.
|
have an answer richer than memory alone.
|
||||||
</p>
|
</p>
|
||||||
<p className="text-gray-500">
|
<p className="tia-soft tia-reveal">
|
||||||
Photos. Stories. Milestones. Tiny moments that would otherwise have faded with time.
|
Photos. Stories. Milestones. Tiny moments that would otherwise have faded with
|
||||||
|
time.
|
||||||
</p>
|
</p>
|
||||||
<p className="font-medium text-gray-800">
|
<p className="tia-strong tia-reveal">
|
||||||
A digital heirloom, built with love and preserved with care.
|
A digital heirloom, built with love and preserved with care.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ── Signature ── */}
|
{/* Final reveal — authorship */}
|
||||||
<div className="mt-14 pt-10 border-t border-gray-100">
|
<p className="tia-closing tia-reveal">
|
||||||
<p className="text-gray-600 mb-6">Thank you for trusting us with your family's story.</p>
|
Built by parents. Inspired by our daughter. Made for families like yours.
|
||||||
<p className="text-lg font-semibold text-gray-800 mb-1">Welcome to the Tia family.</p>
|
</p>
|
||||||
<p className="text-gray-500 mb-8">With warmth,</p>
|
<div className="tia-divider tia-reveal">✦</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-5">
|
{/* Signature */}
|
||||||
<Image
|
<div className="tia-sign tia-reveal">
|
||||||
src="/images/tia-portrait.jpg"
|
<p className="thanks">Thank you for trusting us with your family's story.</p>
|
||||||
alt="Baby Tia"
|
<p className="welcome">Welcome to the Tia family.</p>
|
||||||
width={80}
|
<p className="warmth">With warmth,</p>
|
||||||
height={80}
|
<div className="tia-sign-row">
|
||||||
className="rounded-full object-cover border-2 border-rose-200 shadow-sm"
|
<div>
|
||||||
/>
|
<p className="names">Yashika & Manohar</p>
|
||||||
<div>
|
<p className="role">Co-founders, Tia · Gurugram</p>
|
||||||
<p
|
</div>
|
||||||
className="text-2xl text-gray-800"
|
|
||||||
style={{ fontFamily: "var(--font-caveat)" }}
|
|
||||||
>
|
|
||||||
Yashika & Manohar
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-gray-400 mt-0.5">Co-founders, Tia · Gurugram</p>
|
|
||||||
</div>
|
</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">
|
{/* P.S. — Tia's portrait floated left */}
|
||||||
(and Tia — currently eight months old, trying very hard to eat her own feet, and
|
<div className="tia-ps tia-reveal">
|
||||||
having absolutely no idea that we named this app after her. One day she'll find
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||||
out. We can't wait to see her face.)
|
<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>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ── CTA ── */}
|
{/* CTA */}
|
||||||
<div className="mt-14 pt-10 border-t border-gray-100 text-center">
|
<div className="tia-cta tia-reveal" id="join">
|
||||||
<p className="text-gray-500 mb-5 text-sm">
|
<p className="ck">Join the families already building their heirloom</p>
|
||||||
Join the families already building their digital heirloom.
|
<h3>Start your child's story today.</h3>
|
||||||
</p>
|
<Link className="big" href="/login">
|
||||||
<Link
|
Get started — it's free →
|
||||||
href="/login"
|
</Link>
|
||||||
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"
|
<p className="fine">Free during early access. No credit card.</p>
|
||||||
>
|
</div>
|
||||||
Get started — it's free →
|
</article>
|
||||||
</Link>
|
|
||||||
<p className="mt-3 text-xs text-gray-400">Free during early access. No credit card.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
56
src/components/marketing/AboutScrollReveal.tsx
Normal file
56
src/components/marketing/AboutScrollReveal.tsx
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue