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>
);
}

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

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

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

@ -7,11 +7,26 @@ 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.", "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 ─────────────────────────────────────────────── // ── Section: Hero ───────────────────────────────────────────────
function Hero() { function Hero() {
return ( 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"> <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-2xl mx-auto text-center"> <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"> <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 <span>✨</span> Free during early access
</div> </div>
@ -23,7 +38,7 @@ function Hero() {
</span> </span>
</h1> </h1>
<p className="text-xl font-light text-gray-500 leading-loose mb-8 max-w-xl mx-auto"> <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 Tia is a digital heirloom — not just a tracker. Every feed, every first
word, every vaccination, archived in one private place your child will word, every vaccination, archived in one private place your child will
one day look back on. one day look back on.
@ -33,18 +48,44 @@ function Hero() {
href="/login" 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" 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"> <GoogleG />
<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 Continue with Google
</Link> </Link>
<p className="mt-4 text-xs text-gray-400">No credit card. No setup fee. Your data is yours.</p> <p className="mt-4 text-xs text-gray-400">No credit card. No setup fee. Your data is yours.</p>
</div> </div>
{/* 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>
</div>
{/* Decorative blobs */} {/* 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 -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" /> <div className="absolute -bottom-16 -left-16 w-48 h-48 bg-amber-100 rounded-full opacity-50 blur-2xl pointer-events-none" />
@ -55,7 +96,7 @@ function Hero() {
// ── Section: The Problem ──────────────────────────────────────── // ── Section: The Problem ────────────────────────────────────────
function TheProblem() { function TheProblem() {
return ( return (
<section className="py-20 px-4 bg-white"> <section className="py-20 px-5 bg-white">
<div className="max-w-2xl mx-auto"> <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> <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: "🔮", icon: "🔮",
title: "Ask Tia", 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.\"", example: "\"Is 90ml normal at 6 weeks?\" → Tia gives context, then: \"Your pediatrician can confirm this for your baby specifically.\"",
}, },
{ {
icon: "📚", icon: "📚",
title: "The heirloom archive", 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.", example: "\"Show me everything from her first month\" → every feed, every photo, every note.",
}, },
{ {
icon: "👨‍👩‍👧", icon: "👨‍👩‍👧",
title: "Family circle", 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.", example: "Nani in Jaipur sees today's photos in real time. The daai logs the afternoon feed.",
}, },
{ {
@ -139,27 +180,31 @@ const FEATURES = [
function Features() { function Features() {
return ( return (
<section className="py-20 px-4 bg-gray-50"> <section className="py-20 px-5 bg-gray-50">
<div className="max-w-2xl mx-auto"> <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> <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"> <h2 className="text-3xl font-bold text-gray-900 text-center mb-12">
Everything in one private place. Everything in one private place.
</h2> </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 => ( {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
<div className="flex items-start gap-4"> key={f.title}
<span className="text-3xl flex-shrink-0 transition-transform duration-200 group-hover:scale-110">{f.icon}</span> 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"
<div> >
<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> <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 }} /> <p
<div className="bg-rose-50 rounded-lg px-3 py-2 text-xs text-rose-700 italic"> 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} {f.example}
</div> </div>
</div> </div>
</div>
</div>
))} ))}
</div> </div>
</div> </div>
@ -170,7 +215,7 @@ function Features() {
// ── Section: Founder Story ───────────────────────────────────── // ── Section: Founder Story ─────────────────────────────────────
function FounderStory() { function FounderStory() {
return ( return (
<section className="py-20 px-4 bg-white"> <section className="py-20 px-5 bg-white">
<div className="max-w-2xl mx-auto"> <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> <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. │ │ 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 │ │ Gurugram that made you start building. The fear that she'd │
│ grow up and you'd have nothing but blurry photos. The reason │ │ 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. │ │ you want her to be able to read her own first chapter one day. │
│ │ │ Replace everything below the avatar block with your own words. │
│ Replace everything between these comment tags with your own │
│ words. This section is the moat — it has to be in your voice. │
└─────────────────────────────────────────────────────────────────┘ └─────────────────────────────────────────────────────────────────┘
*/} */}
<div className="flex items-center gap-3 mb-5"> <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, chapter one day. Not a social media highlight reel. A real archive — private,
complete, and hers to keep. That&apos;s Tia. complete, and hers to keep. That&apos;s Tia.
</p> </p>
<p> <p className="text-gray-400 not-italic text-xs">
[PLACEHOLDER] — Replace these paragraphs with your story in your own words. — 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> </p>
</blockquote> </blockquote>
</div> </div>
@ -222,7 +263,7 @@ function FounderStory() {
// ── Section: The Heirloom Vision ─────────────────────────────── // ── Section: The Heirloom Vision ───────────────────────────────
function HeirloomVision() { function HeirloomVision() {
return ( 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"> <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> <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"> <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: "📖", { icon: "🔒", title: "Private and permanent", desc: "No public feed. No algorithm. Your family's archive, locked to your family." },
title: "A complete record", { icon: "💾", title: "Fully exportable", desc: "Your data is yours. Export everything at any time. The heirloom is portable." },
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.",
},
].map(item => ( ].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"> <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> <span className="text-2xl mb-3 block">{item.icon}</span>
<h3 className="font-bold text-gray-900 mb-1">{item.title}</h3> <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>
))} ))}
</div> </div>
@ -272,7 +301,7 @@ function HeirloomVision() {
// ── Section: Privacy & Trust ─────────────────────────────────── // ── Section: Privacy & Trust ───────────────────────────────────
function Privacy() { function Privacy() {
return ( return (
<section className="py-20 px-4 bg-white"> <section className="py-20 px-5 bg-white">
<div className="max-w-2xl mx-auto"> <div className="max-w-2xl mx-auto">
<p className="text-xs font-semibold text-rose-500 uppercase tracking-widest mb-4">Privacy & trust</p> <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"> <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: "🏛️", { icon: "🚫", title: "No ads. No data resale.", desc: "We do not sell, share, or monetise your data with third parties. Ever." },
title: "Row-Level Security", { icon: "📤", title: "Full export at any time", desc: "Export everything: logs, photos, milestones, vaccinations. Your data leaves with you whenever you want." },
desc: "Your family&apos;s data is isolated at the database level. No other user — no other family — can reach your records.", { 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." },
},
{
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.",
},
].map(item => ( ].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"> <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> <span className="text-xl flex-shrink-0 mt-0.5">{item.icon}</span>
<div> <div>
<p className="font-semibold text-gray-900 text-sm">{item.title}</p> <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>
</div> </div>
))} ))}
@ -326,26 +339,17 @@ function Privacy() {
// ── Section: Early Access ────────────────────────────────────── // ── Section: Early Access ──────────────────────────────────────
function EarlyAccess() { function EarlyAccess() {
return ( 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"> <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> <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"> <h2 className="text-2xl font-bold text-gray-900 text-center mb-6">
Built by a parent, being tested by parents. Built by a parent, being tested by parents.
</h2> </h2>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <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: "🌱", { icon: "🇮🇳", title: "India-native from day one", desc: "IAP vaccination schedule. Telegram alerts. Indian naming conventions. Built for how Indian families actually live." },
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 => ( ].map(item => (
<div key={item.title} className="bg-white rounded-2xl p-5 border border-gray-100 shadow-sm"> <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> <span className="text-2xl mb-3 block">{item.icon}</span>
@ -362,7 +366,7 @@ function EarlyAccess() {
// ── Section: Final CTA ───────────────────────────────────────── // ── Section: Final CTA ─────────────────────────────────────────
function FinalCTA() { function FinalCTA() {
return ( 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"> <div className="max-w-xl mx-auto">
<h2 className="text-3xl sm:text-4xl font-bold mb-4 leading-tight"> <h2 className="text-3xl sm:text-4xl font-bold mb-4 leading-tight">
Start preserving your<br />child&apos;s story today. Start preserving your<br />child&apos;s story today.
@ -376,12 +380,7 @@ function FinalCTA() {
href="/login" 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" 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"> <GoogleG />
<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 Continue with Google
</Link> </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", "/pricing",
"/privacy", "/privacy",
"/terms", "/terms",
"/about",
"/blog",
"/partners",
"/login", "/login",
"/admin-login", "/admin-login",
"/m", "/m",