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

feat(marketing): 2-col hero, 3-col features grid, expanded footer + stub pages

Browse source 
- Hero: split into 2-column lg layout (copy left, phone mockup right)
- Features: grid cols 1→2→3 with icon-on-top flex cards
- Footer: brand block left + Company/Legal/Contact 3-column group right;
  bottom bar condenses copyright + privacy tagline left, India badge right
- Add /about, /blog, /partners stub pages (all static)
- Middleware: whitelist /about, /blog, /partners as public routes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Manohar Gupta 2026-05-28 10:23:22 +05:30
parent ef30f27e9c
commit 52ec89f5a4
6 changed files with 300 additions and 127 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,52 @@
import type { Metadata } from "next";
import Link from "next/link";
export const metadata: Metadata = {
title: "About",
description: "The story behind Tia — built for Indian families by a parent who wanted something better.",
};
export default function AboutPage() {
return (
<div className="min-h-screen bg-white">
<div className="max-w-2xl mx-auto px-5 py-20">
<div className="mb-3 text-sm font-medium text-rose-500 uppercase tracking-widest">Our story</div>
<h1 className="text-4xl font-bold text-gray-900 mb-6 leading-tight">About Tia</h1>
<div className="prose prose-gray max-w-none text-gray-600 leading-relaxed space-y-5">
<p>
Tia was born from a simple frustration: every baby tracking app out there felt foreign — built for
Western families, obsessed with data exports and minimalist dashboards, and completely silent on the
things Indian parents actually care about.
</p>
<p>
Where was the IAP vaccination schedule? Why did I have to manually track which relatives had visited
during a fever? Why was there no way to share updates with grandparents without giving them full
edit access?
</p>
<p className="font-medium text-gray-700 italic">
[Founder story — Manohar writes this section]
</p>
<p>
Tia is built on a simple belief: the first years of your child&apos;s life are irreplaceable. Every
feed, every milestone, every silly face — these deserve to be preserved with care, not mined for
ad revenue.
</p>
<p>
We don&apos;t sell your data. We don&apos;t run ads. We don&apos;t build engagement loops. We build
a digital heirloom your child will one day inherit.
</p>
</div>
<div className="mt-12 pt-8 border-t border-gray-100">
<Link
href="/"
className="inline-flex items-center gap-2 text-sm font-medium text-rose-600 hover:text-rose-700 transition-colors"
>
← Back to home
</Link>
</div>
</div>
</div>
);
}

36
src/app/(marketing)/blog/page.tsx Normal file
View file

@ -0,0 +1,36 @@
import type { Metadata } from "next";
import Link from "next/link";
export const metadata: Metadata = {
title: "Blog",
description: "Thoughts on parenting, privacy, and building Tia.",
};
export default function BlogPage() {
return (
<div className="min-h-screen bg-white">
<div className="max-w-2xl mx-auto px-5 py-20">
<div className="mb-3 text-sm font-medium text-rose-500 uppercase tracking-widest">Journal</div>
<h1 className="text-4xl font-bold text-gray-900 mb-6 leading-tight">Blog</h1>
<div className="bg-rose-50 rounded-2xl p-8 text-center border border-rose-100">
<div className="text-4xl mb-4">✍️</div>
<h2 className="text-xl font-semibold text-gray-800 mb-3">Coming soon</h2>
<p className="text-gray-500 leading-relaxed max-w-sm mx-auto">
We&apos;re working on thoughtful posts about parenting, privacy, and what it means to build
technology for families — not for advertisers.
</p>
</div>
<div className="mt-12 pt-8 border-t border-gray-100">
<Link
href="/"
className="inline-flex items-center gap-2 text-sm font-medium text-rose-600 hover:text-rose-700 transition-colors"
>
← Back to home
</Link>
</div>
</div>
</div>
);
}

57
src/app/(marketing)/layout.tsx
View file

@ -48,35 +48,66 @@ export default function MarketingLayout({
{/* Footer */}
<footer className="bg-gray-50 border-t border-gray-100 mt-20">
<div className="max-w-5xl mx-auto px-5 py-12">
<div className="flex flex-col sm:flex-row justify-between items-start gap-8">
<div>
<div className="flex flex-col lg:flex-row lg:justify-between gap-10 mb-8">
{/* Brand block */}
<div className="lg:max-w-xs">
<div className="flex items-center gap-2 mb-3">
<span className="text-2xl">🌸</span>
<span className="text-xl font-bold text-gray-900" style={{ fontFamily: "var(--font-caveat)" }}>
Tia
</span>
</div>
<p className="text-sm text-gray-500 max-w-xs leading-relaxed">
A digital heirloom for your baby.<br />Every moment, preserved.
<p className="text-sm text-gray-500 leading-relaxed">
A digital heirloom for your baby.<br />Every moment, preserved — privately.
</p>
</div>
<div className="flex flex-col gap-2 text-sm">
<p className="font-semibold text-gray-700 mb-1">Links</p>
<Link href="/pricing" className="text-gray-500 hover:text-rose-600 transition-colors duration-150">Pricing</Link>
<Link href="/privacy" className="text-gray-500 hover:text-rose-600 transition-colors duration-150">Privacy Policy</Link>
<Link href="/terms" className="text-gray-500 hover:text-rose-600 transition-colors duration-150">Terms of Service</Link>
{/* Three-column link group */}
<div className="grid grid-cols-2 sm:grid-cols-3 gap-8 lg:gap-14 text-sm">
{/* Company */}
<div className="flex flex-col gap-2">
<p className="font-semibold text-gray-700 mb-1">Company</p>
<Link href="/about" className="text-gray-500 hover:text-rose-600 transition-colors duration-150">About</Link>
<Link href="/blog" className="text-gray-500 hover:text-rose-600 transition-colors duration-150">Blog</Link>
<Link href="/partners" className="text-gray-500 hover:text-rose-600 transition-colors duration-150">Partners</Link>
</div>
{/* Legal */}
<div className="flex flex-col gap-2">
<p className="font-semibold text-gray-700 mb-1">Legal</p>
<Link href="/pricing" className="text-gray-500 hover:text-rose-600 transition-colors duration-150">Pricing</Link>
<Link href="/privacy" className="text-gray-500 hover:text-rose-600 transition-colors duration-150">Privacy Policy</Link>
<Link href="/terms" className="text-gray-500 hover:text-rose-600 transition-colors duration-150">Terms of Service</Link>
</div>
{/* Contact */}
<div className="flex flex-col gap-2">
<p className="font-semibold text-gray-700 mb-1">Contact</p>
<a
href="tel:+919999999999"
className="text-gray-500 hover:text-rose-600 transition-colors duration-150"
>
+91 XXXXX XXXXX
</a>
<a
href="mailto:hello@tia.baby"
className="text-gray-500 hover:text-rose-600 transition-colors duration-150"
>
hello@tia.baby
</a>
</div>
</div>
</div>
</div>
{/* Bottom bar — different shade */}
<div className="bg-gray-100 border-t border-gray-200">
<div className="max-w-5xl mx-auto px-5 py-4 flex flex-col sm:flex-row items-center justify-between gap-2 text-xs text-gray-500">
<span>© {new Date().getFullYear()} Tia.</span>
<span>We don&apos;t sell your data — we preserve it.</span>
<span>Built with ❤️ in India.</span>
<p>© {new Date().getFullYear()} Tia. &nbsp;·&nbsp; We don&apos;t sell your data — we preserve it.</p>
<p>Built with ❤️ in India.</p>
</div>
</div>
</footer>

227
src/app/(marketing)/page.tsx
View file

@ -7,42 +7,83 @@ export const metadata: Metadata = {
"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.",
};
// ── 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-16 pb-24 px-4">
<div className="max-w-2xl mx-auto text-center">
<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
<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&apos;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-lg active:scale-95"
>
<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>
<h1 className="text-4xl sm:text-5xl font-bold text-gray-900 leading-tight mb-5">
Your baby&apos;s story,{" "}
<span className="text-rose-500" style={{ fontFamily: "var(--font-caveat)", fontSize: "1.1em" }}>
preserved for a lifetime.
</span>
</h1>
{/* RIGHT: phone mockup */}
<div className="flex justify-center lg:justify-end">
<div className="relative" style={{ width: 280 }}>
{/* Device shell */}
<div className="absolute inset-0 -m-3 rounded-[42px] bg-gray-900 shadow-2xl" />
{/* Screen */}
<div className="relative rounded-[34px] overflow-hidden bg-white" style={{ height: 580 }}>
{/* TODO: replace with real export at public/screenshots/home.png (560×1160 PNG, no device frame) */}
<div className="w-full h-full bg-gradient-to-br from-rose-50 via-amber-50 to-rose-100 flex flex-col items-center justify-center gap-4 p-6">
<span className="text-5xl">🌸</span>
<p className="text-xs text-gray-400 text-center leading-relaxed">
App screenshot<br />coming soon
</p>
{/* Mock UI suggestion */}
<div className="w-full space-y-2 mt-2">
{[["🍼","Feed — 90ml","2m ago"],["😴","Sleep — 2h","1h ago"],["🚼","Diaper","3h ago"]].map(([icon,label,time])=>(
<div key={label} className="bg-white/80 rounded-xl px-3 py-2 flex items-center justify-between">
<span className="flex items-center gap-2 text-xs text-gray-700"><span>{icon}</span>{label}</span>
<span className="text-xs text-gray-400">{time}</span>
</div>
))}
</div>
</div>
</div>
{/* Notch */}
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-24 h-6 bg-gray-900 rounded-b-2xl" />
</div>
</div>
<p className="text-xl font-light text-gray-500 leading-loose mb-8 max-w-xl mx-auto">
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-lg active:scale-95"
>
<svg className="w-5 h-5 flex-shrink-0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<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>
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>
{/* Decorative blobs */}
@ -55,7 +96,7 @@ function Hero() {
// ── Section: The Problem ────────────────────────────────────────
function TheProblem() {
return (
<section className="py-20 px-4 bg-white">
<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>
@ -114,19 +155,19 @@ const FEATURES = [
{
icon: "🔮",
title: "Ask Tia",
body: "Ask Tia parenting logistics questions — feeding windows, sleep patterns, when to introduce solids. For anything that sounds medical, Tia will always refer you to your pediatrician. That restraint is intentional. It&apos;s a trust feature, not a limitation.",
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&apos;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. Not a highlights reel. A complete record of your child&apos;s earliest years — searchable, exportable, and theirs to keep.",
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&apos;s life can be as involved as they should be. Grandparents get view-only access to milestones. The nanny gets caregiver access to log feeds. You stay the admin.",
body: "Role-based access so everyone in your baby&apos;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.",
},
{
@ -139,25 +180,29 @@ const FEATURES = [
function Features() {
return (
<section className="py-20 px-4 bg-gray-50">
<div className="max-w-2xl mx-auto">
<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="space-y-4">
<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">
<div className="flex items-start gap-4">
<span className="text-3xl flex-shrink-0 transition-transform duration-200 group-hover:scale-110">{f.icon}</span>
<div>
<h3 className="font-bold text-gray-900 text-lg mb-2">{f.title}</h3>
<p className="text-gray-600 text-sm leading-relaxed mb-3" dangerouslySetInnerHTML={{ __html: f.body }} />
<div className="bg-rose-50 rounded-lg px-3 py-2 text-xs text-rose-700 italic">
{f.example}
</div>
</div>
<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>
))}
@ -170,7 +215,7 @@ function Features() {
// ── Section: Founder Story ─────────────────────────────────────
function FounderStory() {
return (
<section className="py-20 px-4 bg-white">
<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>
@ -178,14 +223,11 @@ function FounderStory() {
{/*
┌─────────────────────────────────────────────────────────────────┐
│ PLACEHOLDER — Manohar, this section is yours to write. │
│ │
│ Tell the story of your daughter. The specific 3am moment in │
│ 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 between these comment tags with your own │
│ words. This section is the moat — it has to be in your voice. │
│ Replace everything below the avatar block with your own words. │
└─────────────────────────────────────────────────────────────────┘
*/}
<div className="flex items-center gap-3 mb-5">
@ -208,9 +250,8 @@ function FounderStory() {
chapter one day. Not a social media highlight reel. A real archive — private,
complete, and hers to keep. That&apos;s Tia.
</p>
<p>
[PLACEHOLDER] — Replace these paragraphs with your story in your own words.
The specific 3am moment. The specific fear. Why Gurugram, why this daughter, why now.
<p className="text-gray-400 not-italic text-xs">
— Replace these paragraphs with your story in your own words.
</p>
</blockquote>
</div>
@ -222,7 +263,7 @@ function FounderStory() {
// ── Section: The Heirloom Vision ───────────────────────────────
function HeirloomVision() {
return (
<section className="py-20 px-4 bg-gradient-to-br from-rose-50 to-amber-50">
<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>
@ -241,26 +282,14 @@ function HeirloomVision() {
<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&apos;t know yet which moment will matter most.",
},
{
icon: "🔒",
title: "Private and permanent",
desc: "No public feed. No algorithm. Your family&apos;s archive, locked to your family.",
},
{
icon: "💾",
title: "Fully exportable",
desc: "Your data is yours. Export everything at any time. The heirloom is portable.",
},
{ 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" dangerouslySetInnerHTML={{ __html: item.desc }} />
<p className="text-sm text-gray-600 leading-relaxed">{item.desc}</p>
</div>
))}
</div>
@ -272,7 +301,7 @@ function HeirloomVision() {
// ── Section: Privacy & Trust ───────────────────────────────────
function Privacy() {
return (
<section className="py-20 px-4 bg-white">
<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>
@ -288,32 +317,16 @@ function Privacy() {
<div className="space-y-3">
{[
{
icon: "🏛️",
title: "Row-Level Security",
desc: "Your family&apos;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&apos;t store passwords. Authentication is handled by Google — the same account you already trust for everything else.",
},
{ 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" dangerouslySetInnerHTML={{ __html: item.desc }} />
<p className="text-sm text-gray-600 leading-relaxed mt-0.5">{item.desc}</p>
</div>
</div>
))}
@ -326,26 +339,17 @@ function Privacy() {
// ── Section: Early Access ──────────────────────────────────────
function EarlyAccess() {
return (
<section className="py-16 px-4 bg-gray-50 border-y border-gray-100">
<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.",
},
{ 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>
@ -362,7 +366,7 @@ function EarlyAccess() {
// ── Section: Final CTA ─────────────────────────────────────────
function FinalCTA() {
return (
<section className="py-24 px-4 bg-gradient-to-br from-rose-500 to-rose-600 text-white text-center">
<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&apos;s story today.
@ -376,12 +380,7 @@ function FinalCTA() {
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"
>
<svg className="w-5 h-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<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>
<GoogleG />
Continue with Google
</Link>

52
src/app/(marketing)/partners/page.tsx Normal file
View file

@ -0,0 +1,52 @@
import type { Metadata } from "next";
import Link from "next/link";
export const metadata: Metadata = {
title: "Partners",
description: "Clinics, pediatricians, and organisations partnering with Tia to support Indian families.",
};
export default function PartnersPage() {
return (
<div className="min-h-screen bg-white">
<div className="max-w-2xl mx-auto px-5 py-20">
<div className="mb-3 text-sm font-medium text-rose-500 uppercase tracking-widest">Work with us</div>
<h1 className="text-4xl font-bold text-gray-900 mb-6 leading-tight">Partners</h1>
<div className="text-gray-600 leading-relaxed space-y-5 mb-10">
<p>
We&apos;re exploring partnerships with pediatric clinics, child-care organisations, and
technology providers who share our belief that parents deserve great tools — without
surveillance.
</p>
<p>
If you run a clinic, a parenting community, or a product that serves Indian families, we&apos;d
love to talk.
</p>
</div>
<div className="bg-rose-50 rounded-2xl p-8 border border-rose-100">
<h2 className="text-lg font-semibold text-gray-800 mb-3">Get in touch</h2>
<p className="text-gray-500 text-sm mb-5">
Send us a note — we respond to every message personally.
</p>
<a
href="mailto:hello@tia.baby"
className="inline-flex items-center gap-2 bg-rose-500 hover:bg-rose-600 text-white text-sm font-semibold px-6 py-3 rounded-full transition-colors duration-200"
>
hello@tia.baby
</a>
</div>
<div className="mt-12 pt-8 border-t border-gray-100">
<Link
href="/"
className="inline-flex items-center gap-2 text-sm font-medium text-rose-600 hover:text-rose-700 transition-colors"
>
← Back to home
</Link>
</div>
</div>
</div>
);
}

3
src/middleware.ts
View file

@ -19,6 +19,9 @@ const publicRoutes = [
"/pricing",
"/privacy",
"/terms",
"/about",
"/blog",
"/partners",
"/login",
"/admin-login",
"/m",