Mannu
dad0611350
- Add metadataBase to root layout so OG/Twitter/canonical URLs resolve to absolute https URLs (fixes broken social previews) - New src/lib/seo.ts with SITE_URL + JSON-LD builders - New robots.ts (disallow api/admin/private app paths) and sitemap.ts (marketing pages + blog posts with real lastmod dates) - JSON-LD: Organization/WebSite/SoftwareApplication on home, Blog+Breadcrumb on blog list, BlogPosting+Breadcrumb on posts - Per-page canonical + Open Graph on all marketing pages; article OG + Twitter cards on blog posts; per-post dynamic OG image - noindex on (app) and admin layouts; richer PWA manifest - Fix CSP to allow plausible.io in script-src/connect-src (analytics was silently blocked) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
422 lines
20 KiB
TypeScript
422 lines
20 KiB
TypeScript
import type { Metadata } from "next";
|
||
import Link from "next/link";
|
||
import { PhoneMockup } from "@/components/marketing/PhoneMockup";
|
||
import {
|
||
jsonLdScript,
|
||
organizationSchema,
|
||
websiteSchema,
|
||
softwareApplicationSchema,
|
||
} from "@/lib/seo";
|
||
|
||
export const metadata: Metadata = {
|
||
title: "Tia — Baby Tracker & Digital Heirloom for Indian Families",
|
||
description:
|
||
"Tia is a digital heirloom for your baby — not just a tracker. Log daily moments, track the IAP vaccination schedule with Telegram alerts, and build a living archive your child will one day inherit. Free during early access.",
|
||
keywords: [
|
||
"baby tracker",
|
||
"baby tracker app India",
|
||
"IAP vaccination schedule",
|
||
"baby vaccination tracker",
|
||
"newborn feed tracker",
|
||
"baby milestone tracker",
|
||
"digital baby book",
|
||
"parenting app India",
|
||
"baby memory keeper",
|
||
],
|
||
alternates: { canonical: "/" },
|
||
openGraph: {
|
||
type: "website",
|
||
url: "/",
|
||
siteName: "Tia",
|
||
locale: "en_IN",
|
||
title: "Tia — Baby Tracker & Digital Heirloom for Indian Families",
|
||
description:
|
||
"Log every feed, milestone, and memory. Track the IAP vaccination schedule with Telegram alerts. Built for Indian families. Privacy-first. Free during early access.",
|
||
},
|
||
};
|
||
|
||
// ── Google G icon (reusable) ────────────────────────────────────
|
||
function GoogleG({ size = 20 }: { size?: number }) {
|
||
return (
|
||
<svg width={size} height={size} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" className="flex-shrink-0">
|
||
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
|
||
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
|
||
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05"/>
|
||
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
// ── Section: Hero ───────────────────────────────────────────────
|
||
function Hero() {
|
||
return (
|
||
<section className="relative overflow-hidden bg-gradient-to-br from-rose-50 via-amber-50 to-rose-50 pt-12 pb-20 px-5">
|
||
<div className="max-w-5xl mx-auto grid grid-cols-1 lg:grid-cols-[1.1fr_0.9fr] gap-10 items-center">
|
||
|
||
{/* LEFT: copy */}
|
||
<div className="text-center lg:text-left max-w-xl mx-auto lg:mx-0">
|
||
<div className="inline-flex items-center gap-2 bg-rose-100 text-rose-700 text-xs font-semibold px-3 py-1.5 rounded-full mb-6">
|
||
<span>✨</span> Free during early access
|
||
</div>
|
||
|
||
<h1 className="text-4xl sm:text-5xl font-bold text-gray-900 leading-tight mb-5">
|
||
Your baby's story,{" "}
|
||
<span className="text-rose-500" style={{ fontFamily: "var(--font-caveat)", fontSize: "1.1em" }}>
|
||
preserved for a lifetime.
|
||
</span>
|
||
</h1>
|
||
|
||
<p className="text-xl font-light text-gray-500 leading-loose mb-8 max-w-xl mx-auto lg:mx-0">
|
||
Tia is a digital heirloom — not just a tracker. Every feed, every first
|
||
word, every vaccination, archived in one private place your child will
|
||
one day look back on.
|
||
</p>
|
||
|
||
<Link
|
||
href="/login"
|
||
className="inline-flex items-center gap-2.5 bg-white hover:bg-rose-50 border border-gray-200 hover:border-rose-300 text-gray-700 font-semibold px-7 py-3.5 rounded-full text-base transition-all duration-200 shadow-md hover:shadow-xl hover:shadow-rose-200/60 hover:-translate-y-0.5 hover:scale-[1.03] active:scale-95 active:translate-y-0"
|
||
>
|
||
<GoogleG />
|
||
Continue with Google
|
||
</Link>
|
||
|
||
<p className="mt-4 text-xs text-gray-400">No credit card. No setup fee. Your data is yours.</p>
|
||
</div>
|
||
|
||
{/* RIGHT: animated phone mockup */}
|
||
<div className="flex justify-center lg:justify-end">
|
||
<PhoneMockup />
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{/* Decorative blobs */}
|
||
<div className="absolute -top-20 -right-20 w-64 h-64 bg-rose-100 rounded-full opacity-40 blur-3xl pointer-events-none" />
|
||
<div className="absolute -bottom-16 -left-16 w-48 h-48 bg-amber-100 rounded-full opacity-50 blur-2xl pointer-events-none" />
|
||
</section>
|
||
);
|
||
}
|
||
|
||
// ── Section: The Problem ────────────────────────────────────────
|
||
function TheProblem() {
|
||
return (
|
||
<section className="py-20 px-5 bg-white">
|
||
<div className="max-w-2xl mx-auto">
|
||
<p className="text-xs font-semibold text-rose-500 uppercase tracking-widest mb-4">The 3am reality</p>
|
||
|
||
<h2 className="text-3xl font-bold text-gray-900 mb-6 leading-tight">
|
||
You're awake at 3am.<br />
|
||
When did she last feed?
|
||
</h2>
|
||
|
||
<div className="space-y-4 text-gray-600 leading-relaxed">
|
||
<p>
|
||
You scroll back through WhatsApp messages to your mother-in-law. You check a
|
||
sticky note on the refrigerator. You open a notes app you downloaded last week
|
||
and another one you downloaded the week before that.
|
||
</p>
|
||
<p>
|
||
Every precious detail — the exact weight at the six-week checkup, the tiny smile
|
||
at eleven weeks, the first solid feed — is scattered across six apps, two
|
||
notebooks, and a dozen photographs that may or may not be backed up.
|
||
</p>
|
||
<p>
|
||
And somewhere underneath the exhaustion, a quieter fear: <em>I'm going to forget this.</em>
|
||
</p>
|
||
</div>
|
||
|
||
<div className="mt-8 grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||
{[
|
||
{ icon: "📱", text: "Notes scattered across 4+ apps" },
|
||
{ icon: "😰", text: "Fear of losing precious moments" },
|
||
{ icon: "🌙", text: "No answers at 3am" },
|
||
].map(item => (
|
||
<div key={item.text} className="flex items-start gap-3 bg-rose-50 rounded-xl p-4">
|
||
<span className="text-2xl flex-shrink-0">{item.icon}</span>
|
||
<p className="text-sm text-gray-700 font-medium">{item.text}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
// ── Section: Features ──────────────────────────────────────────
|
||
const FEATURES = [
|
||
{
|
||
icon: "🍼",
|
||
title: "Log in 5 seconds",
|
||
body: "Feed, sleep, diaper — one tap. Tia timestamps everything automatically. At 3am, you should be sleeping, not typing.",
|
||
example: "\"Fed 90ml at 2:47am\" → logged and archived forever.",
|
||
},
|
||
{
|
||
icon: "💉",
|
||
title: "IAP vaccination schedule",
|
||
body: "Tia tracks your baby's vaccination schedule against the Indian Academy of Pediatrics (IAP) recommended schedule. Reminders arrive via Telegram — the one app you actually check.",
|
||
example: "BCG, OPV, Hepatitis B — all tracked. Telegram alert: \"Pentavalent 2 due in 3 days.\"",
|
||
},
|
||
{
|
||
icon: "🔮",
|
||
title: "Ask Tia",
|
||
body: "Ask Tia parenting logistics questions — feeding windows, sleep patterns, when to introduce solids. For anything medical, Tia defers to your pediatrician. That restraint is intentional — it's a trust feature.",
|
||
example: "\"Is 90ml normal at 6 weeks?\" → Tia gives context, then: \"Your pediatrician can confirm this for your baby specifically.\"",
|
||
},
|
||
{
|
||
icon: "📚",
|
||
title: "The heirloom archive",
|
||
body: "Every log, photo, milestone, and memory becomes part of a permanent, private archive. Not a feed. A complete record — searchable, exportable, and theirs to keep.",
|
||
example: "\"Show me everything from her first month\" → every feed, every photo, every note.",
|
||
},
|
||
{
|
||
icon: "👨👩👧",
|
||
title: "Family circle",
|
||
body: "Role-based access so everyone in your baby's life can be as involved as they should be. Grandparents get view-only access. The nanny gets caregiver access. You stay the admin.",
|
||
example: "Nani in Jaipur sees today's photos in real time. The daai logs the afternoon feed.",
|
||
},
|
||
{
|
||
icon: "📈",
|
||
title: "Growth tracking",
|
||
body: "Weight, length, and head circumference plotted on clear charts. See how your baby is growing over time and carry the full history into every pediatric visit.",
|
||
example: "\"She's been in the 60th percentile for weight since month two.\"",
|
||
},
|
||
];
|
||
|
||
function Features() {
|
||
return (
|
||
<section className="py-20 px-5 bg-gray-50">
|
||
<div className="max-w-5xl mx-auto">
|
||
<p className="text-xs font-semibold text-rose-500 uppercase tracking-widest mb-4 text-center">What Tia does</p>
|
||
<h2 className="text-3xl font-bold text-gray-900 text-center mb-12">
|
||
Everything in one private place.
|
||
</h2>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
{FEATURES.map(f => (
|
||
<div
|
||
key={f.title}
|
||
className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:border-rose-200 hover:shadow-md transition-all duration-200 group flex flex-col"
|
||
>
|
||
<span className="text-3xl mb-4 transition-transform duration-200 group-hover:scale-110 block">
|
||
{f.icon}
|
||
</span>
|
||
<h3 className="font-bold text-gray-900 text-lg mb-2">{f.title}</h3>
|
||
<p
|
||
className="text-gray-600 text-sm leading-relaxed mb-4 flex-1"
|
||
dangerouslySetInnerHTML={{ __html: f.body }}
|
||
/>
|
||
<div className="bg-rose-50 rounded-lg px-3 py-2 text-xs text-rose-700 italic mt-auto">
|
||
{f.example}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
// ── Section: Founder Story ─────────────────────────────────────
|
||
function FounderStory() {
|
||
return (
|
||
<section className="py-20 px-5 bg-white">
|
||
<div className="max-w-2xl mx-auto">
|
||
<p className="text-xs font-semibold text-rose-500 uppercase tracking-widest mb-4">Why Tia exists</p>
|
||
|
||
<div className="bg-amber-50 border border-amber-200 rounded-2xl p-6 sm:p-8">
|
||
{/*
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ PLACEHOLDER — Manohar, this section is yours to write. │
|
||
│ Tell the story of your daughter. The specific 3am moment in │
|
||
│ Gurugram that made you start building. The fear that she'd │
|
||
│ grow up and you'd have nothing but blurry photos. The reason │
|
||
│ you want her to be able to read her own first chapter one day. │
|
||
│ Replace everything below the avatar block with your own words. │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
*/}
|
||
<div className="flex items-center gap-3 mb-5">
|
||
<div className="w-10 h-10 rounded-full bg-rose-200 flex items-center justify-center text-lg">👨💻</div>
|
||
<div>
|
||
<p className="font-semibold text-gray-900">Manohar Gupta</p>
|
||
<p className="text-xs text-gray-500">Founder, Tia · Gurugram</p>
|
||
</div>
|
||
</div>
|
||
|
||
<blockquote className="text-gray-700 leading-relaxed space-y-4 italic text-sm sm:text-base">
|
||
<p>
|
||
[PLACEHOLDER] My daughter was born and within two weeks I realised I was already
|
||
forgetting things. Not forgetting them completely — just losing the texture. The
|
||
exact weight on day five. The time of the first real smile. The way she sounded
|
||
when she figured out her own hands.
|
||
</p>
|
||
<p>
|
||
[PLACEHOLDER] I wanted to build something that would let her read her own first
|
||
chapter one day. Not a social media highlight reel. A real archive — private,
|
||
complete, and hers to keep. That's Tia.
|
||
</p>
|
||
<p className="text-gray-400 not-italic text-xs">
|
||
— Replace these paragraphs with your story in your own words.
|
||
</p>
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
// ── Section: The Heirloom Vision ───────────────────────────────
|
||
function HeirloomVision() {
|
||
return (
|
||
<section className="py-20 px-5 bg-gradient-to-br from-rose-50 to-amber-50">
|
||
<div className="max-w-2xl mx-auto text-center">
|
||
<p className="text-xs font-semibold text-rose-500 uppercase tracking-widest mb-4">The heirloom vision</p>
|
||
|
||
<h2 className="text-3xl font-bold text-gray-900 mb-6 leading-tight">
|
||
One day, your child will be able to{" "}
|
||
<span className="text-rose-500" style={{ fontFamily: "var(--font-caveat)", fontSize: "1.1em" }}>
|
||
read their own story.
|
||
</span>
|
||
</h2>
|
||
|
||
<p className="text-gray-600 leading-relaxed mb-8 max-w-xl mx-auto">
|
||
Everything you log today is a letter to your future child. The 2:47am feed.
|
||
The first solid. The doctor visit you worried about for a week. The photo from
|
||
the moment you realised she could recognise your voice.
|
||
</p>
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-left">
|
||
{[
|
||
{ icon: "📖", title: "A complete record", desc: "Not highlights. Everything — because you can't know yet which moment will matter most." },
|
||
{ icon: "🔒", title: "Private and permanent", desc: "No public feed. No algorithm. Your family's archive, locked to your family." },
|
||
{ icon: "💾", title: "Fully exportable", desc: "Your data is yours. Export everything at any time. The heirloom is portable." },
|
||
].map(item => (
|
||
<div key={item.title} className="bg-white/80 rounded-2xl p-5 border border-rose-100 hover:border-rose-300 hover:shadow-sm transition-all duration-200">
|
||
<span className="text-2xl mb-3 block">{item.icon}</span>
|
||
<h3 className="font-bold text-gray-900 mb-1">{item.title}</h3>
|
||
<p className="text-sm text-gray-600 leading-relaxed">{item.desc}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
// ── Section: Privacy & Trust ───────────────────────────────────
|
||
function Privacy() {
|
||
return (
|
||
<section className="py-20 px-5 bg-white">
|
||
<div className="max-w-2xl mx-auto">
|
||
<p className="text-xs font-semibold text-rose-500 uppercase tracking-widest mb-4">Privacy & trust</p>
|
||
|
||
<h2 className="text-3xl font-bold text-gray-900 mb-4">
|
||
We don't sell your data —<br />
|
||
<span className="text-rose-500">we preserve it.</span>
|
||
</h2>
|
||
|
||
<p className="text-gray-600 leading-relaxed mb-8">
|
||
Tia is a baby-tracking app. Your child's records are not the product.
|
||
They are the point.
|
||
</p>
|
||
|
||
<div className="space-y-3">
|
||
{[
|
||
{ icon: "🏛️", title: "Row-Level Security", desc: "Your family's data is isolated at the database level. No other user — no other family — can reach your records." },
|
||
{ icon: "🚫", title: "No ads. No data resale.", desc: "We do not sell, share, or monetise your data with third parties. Ever." },
|
||
{ icon: "📤", title: "Full export at any time", desc: "Export everything: logs, photos, milestones, vaccinations. Your data leaves with you whenever you want." },
|
||
{ icon: "🔐", title: "Google Sign-In only", desc: "We don't store passwords. Authentication is handled by Google — the same account you already trust for everything else." },
|
||
].map(item => (
|
||
<div key={item.title} className="flex items-start gap-4 p-4 bg-gray-50 hover:bg-rose-50 rounded-xl transition-colors duration-150">
|
||
<span className="text-xl flex-shrink-0 mt-0.5">{item.icon}</span>
|
||
<div>
|
||
<p className="font-semibold text-gray-900 text-sm">{item.title}</p>
|
||
<p className="text-sm text-gray-600 leading-relaxed mt-0.5">{item.desc}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
// ── Section: Early Access ──────────────────────────────────────
|
||
function EarlyAccess() {
|
||
return (
|
||
<section className="py-16 px-5 bg-gray-50 border-y border-gray-100">
|
||
<div className="max-w-2xl mx-auto">
|
||
<p className="text-xs font-semibold text-rose-500 uppercase tracking-widest mb-4 text-center">Private early access</p>
|
||
<h2 className="text-2xl font-bold text-gray-900 text-center mb-6">
|
||
Built by a parent, being tested by parents.
|
||
</h2>
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
{[
|
||
{ icon: "🌱", title: "Free during early access", desc: "Core features — activity logging and the heirloom archive — are free while Tia is in early access. Early families keep their terms for life." },
|
||
{ icon: "🇮🇳", title: "India-native from day one", desc: "IAP vaccination schedule. Telegram alerts. Indian naming conventions. Built for how Indian families actually live." },
|
||
].map(item => (
|
||
<div key={item.title} className="bg-white rounded-2xl p-5 border border-gray-100 shadow-sm">
|
||
<span className="text-2xl mb-3 block">{item.icon}</span>
|
||
<h3 className="font-bold text-gray-900 mb-2">{item.title}</h3>
|
||
<p className="text-sm text-gray-600 leading-relaxed">{item.desc}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
// ── Section: Final CTA ─────────────────────────────────────────
|
||
function FinalCTA() {
|
||
return (
|
||
<section className="py-24 px-5 bg-gradient-to-br from-rose-500 to-rose-600 text-white text-center">
|
||
<div className="max-w-xl mx-auto">
|
||
<h2 className="text-3xl sm:text-4xl font-bold mb-4 leading-tight">
|
||
Start preserving your<br />child's story today.
|
||
</h2>
|
||
|
||
<p className="text-rose-100 mb-8 leading-relaxed">
|
||
Free during early access. No credit card. Your data is yours — always.
|
||
</p>
|
||
|
||
<Link
|
||
href="/login"
|
||
className="inline-flex items-center gap-2.5 bg-white text-rose-600 font-bold px-8 py-4 rounded-full text-base hover:bg-rose-50 hover:shadow-xl active:scale-95 transition-all duration-200 shadow-lg"
|
||
>
|
||
<GoogleG />
|
||
Continue with Google
|
||
</Link>
|
||
|
||
<p className="mt-4 text-xs text-rose-200">
|
||
Invite-only early access — join from a shared link or reach out directly.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
// ── Page ───────────────────────────────────────────────────────
|
||
export default function MarketingHomePage() {
|
||
return (
|
||
<>
|
||
{/* Structured data — Organization, WebSite, and SoftwareApplication */}
|
||
<script
|
||
type="application/ld+json"
|
||
dangerouslySetInnerHTML={jsonLdScript([
|
||
organizationSchema(),
|
||
websiteSchema(),
|
||
softwareApplicationSchema(),
|
||
])}
|
||
/>
|
||
<Hero />
|
||
<TheProblem />
|
||
<Features />
|
||
<FounderStory />
|
||
<HeirloomVision />
|
||
<Privacy />
|
||
<EarlyAccess />
|
||
<FinalCTA />
|
||
</>
|
||
);
|
||
}
|