feat(blog): 3-col layout, breadcrumbs, TOC + footer 3-col bottom bar
Blog listing (/blog):
- Breadcrumb: Home › Blog
- Left sidebar: chronological timeline with dot + date + category badge
- Right sidebar: "Browse by topic" category counts, quick reads, CTA card
- Still single column on mobile (sidebars hidden)
Blog post (/blog/[slug]):
- Breadcrumb: Home › Blog › Post title
- Left sidebar: numbered Table of Contents (section headings as anchor links)
with "← All articles" back link below
- Right sidebar: "More articles" list + "Filed under" category + CTA
- scroll-mt-28 on headings so sticky nav doesn't cover anchor targets
- Both back-to-listing links visible (sidebar + article footer)
Footer bottom bar:
- Split into 3-column grid: © left · privacy tagline center · ❤️ India right
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
8be6bbe23f
commit
e5a59c5191
4 changed files with 436 additions and 155 deletions
|
|
@ -2,6 +2,17 @@ import type { Metadata } from "next";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { notFound } from "next/navigation";
|
import { notFound } from "next/navigation";
|
||||||
import { POSTS, getPost, formatDate } from "../posts";
|
import { POSTS, getPost, formatDate } from "../posts";
|
||||||
|
import { Breadcrumb } from "@/components/marketing/Breadcrumb";
|
||||||
|
|
||||||
|
// Turn a heading string into a URL-safe anchor ID
|
||||||
|
function slugifyHeading(heading: string): string {
|
||||||
|
return heading
|
||||||
|
.toLowerCase()
|
||||||
|
.replace(/[^a-z0-9\s-]/g, "")
|
||||||
|
.replace(/\s+/g, "-")
|
||||||
|
.replace(/-+/g, "-")
|
||||||
|
.trim();
|
||||||
|
}
|
||||||
|
|
||||||
export function generateStaticParams() {
|
export function generateStaticParams() {
|
||||||
return POSTS.map((p) => ({ slug: p.slug }));
|
return POSTS.map((p) => ({ slug: p.slug }));
|
||||||
|
|
@ -30,134 +41,255 @@ export default async function BlogPostPage({
|
||||||
const post = getPost(slug);
|
const post = getPost(slug);
|
||||||
if (!post) notFound();
|
if (!post) notFound();
|
||||||
|
|
||||||
|
// Extract headings for TOC
|
||||||
|
const headings = post.sections.filter((s) => s.heading).map((s) => ({
|
||||||
|
text: s.heading!,
|
||||||
|
id: slugifyHeading(s.heading!),
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Other posts (exclude current)
|
||||||
|
const otherPosts = POSTS.filter((p) => p.slug !== slug).slice(0, 3);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-white">
|
<div className="min-h-screen bg-white">
|
||||||
{/* Hero */}
|
{/* Post hero / header */}
|
||||||
<div className="bg-gradient-to-br from-rose-50 to-pink-50 border-b border-rose-100">
|
<div className="bg-gradient-to-br from-rose-50 to-pink-50 border-b border-rose-100">
|
||||||
<div className="max-w-2xl mx-auto px-5 pt-12 pb-10">
|
<div className="max-w-6xl mx-auto px-5 pt-5 pb-10">
|
||||||
<Link
|
{/* Breadcrumb */}
|
||||||
href="/blog"
|
<div className="mb-8">
|
||||||
className="inline-flex items-center gap-1.5 text-sm text-rose-500 hover:text-rose-700 font-medium mb-8 transition-colors"
|
<Breadcrumb
|
||||||
>
|
items={[
|
||||||
← All articles
|
{ label: "Home", href: "/" },
|
||||||
</Link>
|
{ label: "Blog", href: "/blog" },
|
||||||
|
{ label: post.title },
|
||||||
<div className="flex flex-wrap items-center gap-2 mb-5">
|
]}
|
||||||
<span className={`text-xs font-semibold px-2.5 py-0.5 rounded-full ${post.categoryColor}`}>
|
/>
|
||||||
{post.category}
|
|
||||||
</span>
|
|
||||||
<span className="text-xs text-gray-400">{formatDate(post.date)}</span>
|
|
||||||
<span className="text-xs text-gray-400">·</span>
|
|
||||||
<span className="text-xs text-gray-400">{post.readTime}</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1 className="text-3xl sm:text-4xl font-bold text-gray-900 leading-tight mb-4">
|
<div className="max-w-2xl">
|
||||||
{post.title}
|
<div className="flex flex-wrap items-center gap-2 mb-5">
|
||||||
</h1>
|
<span className={`text-xs font-semibold px-2.5 py-0.5 rounded-full ${post.categoryColor}`}>
|
||||||
<p className="text-lg text-gray-500 leading-relaxed">{post.excerpt}</p>
|
{post.category}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-gray-400">{formatDate(post.date)}</span>
|
||||||
|
<span className="text-xs text-gray-400">·</span>
|
||||||
|
<span className="text-xs text-gray-400">{post.readTime}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="mt-6 text-sm text-gray-400">
|
<h1 className="text-3xl sm:text-4xl font-bold text-gray-900 leading-tight mb-4">
|
||||||
By <span className="text-gray-600 font-medium">{post.author}</span>
|
{post.emoji} {post.title}
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg text-gray-500 leading-relaxed">{post.excerpt}</p>
|
||||||
|
|
||||||
|
<div className="mt-5 text-sm text-gray-400">
|
||||||
|
By <span className="text-gray-600 font-medium">{post.author}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Article body */}
|
{/* 3-column body */}
|
||||||
<div className="max-w-2xl mx-auto px-5 py-12">
|
<div className="max-w-6xl mx-auto px-5 py-10">
|
||||||
<div className="space-y-10">
|
<div className="grid grid-cols-1 lg:grid-cols-[220px_minmax(0,1fr)_200px] gap-10">
|
||||||
{post.sections.map((section, i) => (
|
|
||||||
<div key={i}>
|
|
||||||
{section.heading && (
|
|
||||||
<h2 className="text-xl font-bold text-gray-900 mb-4 mt-2">{section.heading}</h2>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{section.paragraphs?.map((p, j) => (
|
{/* ── LEFT SIDEBAR: Table of Contents ── */}
|
||||||
<p key={j} className="text-gray-600 leading-relaxed mb-4">
|
<aside className="hidden lg:block">
|
||||||
{p}
|
<div className="sticky top-24">
|
||||||
</p>
|
<p className="text-xs font-bold text-gray-400 uppercase tracking-widest mb-4">In this article</p>
|
||||||
))}
|
{headings.length > 0 ? (
|
||||||
|
<ol className="flex flex-col gap-2">
|
||||||
{section.table && (
|
{headings.map((h, i) => (
|
||||||
<div className="overflow-x-auto mb-4">
|
<li key={i}>
|
||||||
<table className="w-full text-sm border-collapse">
|
<a
|
||||||
<thead>
|
href={`#${h.id}`}
|
||||||
<tr className="bg-rose-50">
|
className="group flex items-start gap-2 text-sm text-gray-500 hover:text-rose-600 transition-colors duration-150"
|
||||||
{section.table.headers.map((h, j) => (
|
>
|
||||||
<th
|
<span className="shrink-0 mt-0.5 w-4 h-4 rounded-full bg-rose-100 text-rose-500 text-[10px] flex items-center justify-center font-bold group-hover:bg-rose-200 transition-colors duration-150">
|
||||||
key={j}
|
{i + 1}
|
||||||
className="text-left px-4 py-3 font-semibold text-gray-700 border border-rose-100 first:rounded-tl-lg last:rounded-tr-lg"
|
</span>
|
||||||
>
|
<span className="leading-snug">{h.text}</span>
|
||||||
{h}
|
</a>
|
||||||
</th>
|
|
||||||
))}
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{section.table.rows.map((row, j) => (
|
|
||||||
<tr key={j} className="border-b border-gray-100 hover:bg-gray-50">
|
|
||||||
{row.map((cell, k) => (
|
|
||||||
<td key={k} className="px-4 py-3 text-gray-600 border border-gray-100">
|
|
||||||
{cell}
|
|
||||||
</td>
|
|
||||||
))}
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{section.list && (
|
|
||||||
<ul className="space-y-2.5 mb-4">
|
|
||||||
{section.list.map((item, j) => (
|
|
||||||
<li key={j} className="flex items-start gap-3 text-sm text-gray-600">
|
|
||||||
<span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-rose-400 shrink-0" />
|
|
||||||
<span>
|
|
||||||
{item.label && (
|
|
||||||
<span className="font-semibold text-gray-800">{item.label}: </span>
|
|
||||||
)}
|
|
||||||
{item.text}
|
|
||||||
</span>
|
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ol>
|
||||||
|
) : (
|
||||||
|
<p className="text-xs text-gray-400">No sections</p>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{section.callout && (
|
<div className="mt-8 pt-6 border-t border-gray-100">
|
||||||
<div className="bg-rose-50 border border-rose-100 rounded-xl p-5 flex gap-3 items-start mb-4">
|
<Link
|
||||||
<span className="text-xl shrink-0 mt-0.5">{section.callout.emoji}</span>
|
href="/blog"
|
||||||
<p className="text-sm text-rose-800 leading-relaxed">{section.callout.text}</p>
|
className="flex items-center gap-1.5 text-sm text-rose-500 hover:text-rose-700 font-medium transition-colors"
|
||||||
</div>
|
>
|
||||||
)}
|
← All articles
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
</aside>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Footer CTA */}
|
{/* ── CENTER: Article body ── */}
|
||||||
<div className="mt-16 pt-10 border-t border-gray-100">
|
<article className="min-w-0">
|
||||||
<div className="bg-gradient-to-br from-rose-50 to-pink-50 rounded-2xl p-8 text-center border border-rose-100">
|
<div className="space-y-10">
|
||||||
<div className="text-3xl mb-3">🌸</div>
|
{post.sections.map((section, i) => (
|
||||||
<h3 className="text-xl font-bold text-gray-900 mb-2">Try Tia — free during early access</h3>
|
<div key={i}>
|
||||||
<p className="text-gray-500 text-sm mb-6 max-w-sm mx-auto">
|
{section.heading && (
|
||||||
Log feeds, track vaccinations, and build a digital heirloom for your child. Built for Indian families.
|
<h2
|
||||||
</p>
|
id={slugifyHeading(section.heading)}
|
||||||
<Link
|
className="text-xl font-bold text-gray-900 mb-4 mt-2 scroll-mt-28"
|
||||||
href="/login"
|
>
|
||||||
className="inline-flex items-center gap-2 bg-rose-500 hover:bg-rose-600 text-white text-sm font-semibold px-7 py-3 rounded-full transition-colors duration-200"
|
{section.heading}
|
||||||
>
|
</h2>
|
||||||
Get started →
|
)}
|
||||||
</Link>
|
|
||||||
</div>
|
{section.paragraphs?.map((p, j) => (
|
||||||
|
<p key={j} className="text-gray-600 leading-relaxed mb-4">
|
||||||
|
{p}
|
||||||
|
</p>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{section.table && (
|
||||||
|
<div className="overflow-x-auto mb-4 rounded-xl border border-gray-100">
|
||||||
|
<table className="w-full text-sm border-collapse">
|
||||||
|
<thead>
|
||||||
|
<tr className="bg-rose-50">
|
||||||
|
{section.table.headers.map((h, j) => (
|
||||||
|
<th
|
||||||
|
key={j}
|
||||||
|
className="text-left px-4 py-3 font-semibold text-gray-700 border-b border-rose-100"
|
||||||
|
>
|
||||||
|
{h}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{section.table.rows.map((row, j) => (
|
||||||
|
<tr key={j} className="border-b border-gray-50 last:border-0 hover:bg-gray-50">
|
||||||
|
{row.map((cell, k) => (
|
||||||
|
<td key={k} className="px-4 py-3 text-gray-600">
|
||||||
|
{cell}
|
||||||
|
</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{section.list && (
|
||||||
|
<ul className="space-y-2.5 mb-4">
|
||||||
|
{section.list.map((item, j) => (
|
||||||
|
<li key={j} className="flex items-start gap-3 text-sm text-gray-600">
|
||||||
|
<span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-rose-400 shrink-0" />
|
||||||
|
<span>
|
||||||
|
{item.label && (
|
||||||
|
<span className="font-semibold text-gray-800">{item.label}: </span>
|
||||||
|
)}
|
||||||
|
{item.text}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{section.callout && (
|
||||||
|
<div className="bg-rose-50 border border-rose-100 rounded-xl p-5 flex gap-3 items-start mb-4">
|
||||||
|
<span className="text-xl shrink-0 mt-0.5">{section.callout.emoji}</span>
|
||||||
|
<p className="text-sm text-rose-800 leading-relaxed">{section.callout.text}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Article footer CTA */}
|
||||||
|
<div className="mt-14 pt-10 border-t border-gray-100">
|
||||||
|
<div className="bg-gradient-to-br from-rose-50 to-pink-50 rounded-2xl p-8 text-center border border-rose-100">
|
||||||
|
<div className="text-3xl mb-3">🌸</div>
|
||||||
|
<h3 className="text-xl font-bold text-gray-900 mb-2">Try Tia — free during early access</h3>
|
||||||
|
<p className="text-gray-500 text-sm mb-6 max-w-sm mx-auto">
|
||||||
|
Log feeds, track vaccinations, and build a digital heirloom for your child. Built for Indian families.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/login"
|
||||||
|
className="inline-flex items-center gap-2 bg-rose-500 hover:bg-rose-600 text-white text-sm font-semibold px-7 py-3 rounded-full transition-colors duration-200"
|
||||||
|
>
|
||||||
|
Get started →
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Back link — visible on mobile too */}
|
||||||
|
<div className="mt-8 flex items-center justify-between">
|
||||||
|
<Link
|
||||||
|
href="/blog"
|
||||||
|
className="inline-flex items-center gap-1.5 text-sm font-medium text-rose-600 hover:text-rose-700 transition-colors"
|
||||||
|
>
|
||||||
|
← All articles
|
||||||
|
</Link>
|
||||||
|
<span className="text-xs text-gray-400">
|
||||||
|
{formatDate(post.date)} · {post.readTime}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
{/* ── RIGHT SIDEBAR: More articles + categories ── */}
|
||||||
|
<aside className="hidden lg:block">
|
||||||
|
<div className="sticky top-24 space-y-8">
|
||||||
|
|
||||||
|
{/* More articles */}
|
||||||
|
<div>
|
||||||
|
<p className="text-xs font-bold text-gray-400 uppercase tracking-widest mb-4">More articles</p>
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
{otherPosts.map((p) => (
|
||||||
|
<Link
|
||||||
|
key={p.slug}
|
||||||
|
href={`/blog/${p.slug}`}
|
||||||
|
className="group flex items-start gap-2.5"
|
||||||
|
>
|
||||||
|
<span className="text-lg shrink-0 mt-0.5">{p.emoji}</span>
|
||||||
|
<div className="min-w-0">
|
||||||
|
<p className="text-xs text-gray-700 group-hover:text-rose-600 leading-snug font-medium transition-colors duration-150 line-clamp-2">
|
||||||
|
{p.title}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-gray-400 mt-0.5">{p.readTime}</p>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border-t border-gray-100" />
|
||||||
|
|
||||||
|
{/* Category badge */}
|
||||||
|
<div>
|
||||||
|
<p className="text-xs font-bold text-gray-400 uppercase tracking-widest mb-3">Filed under</p>
|
||||||
|
<span className={`text-xs font-semibold px-2.5 py-1 rounded-full ${post.categoryColor}`}>
|
||||||
|
{post.category}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border-t border-gray-100" />
|
||||||
|
|
||||||
|
{/* CTA */}
|
||||||
|
<div className="bg-rose-50 rounded-xl p-5 border border-rose-100 text-center">
|
||||||
|
<div className="text-2xl mb-2">🌸</div>
|
||||||
|
<p className="text-sm font-semibold text-gray-800 mb-1">Free early access</p>
|
||||||
|
<p className="text-xs text-gray-500 mb-4 leading-relaxed">
|
||||||
|
Built for Indian families. No ads, no data selling.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/login"
|
||||||
|
className="inline-block w-full text-center bg-rose-500 hover:bg-rose-600 text-white text-xs font-semibold px-4 py-2.5 rounded-full transition-colors duration-200"
|
||||||
|
>
|
||||||
|
Get started →
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
<div className="mt-10 flex items-center justify-between">
|
|
||||||
<Link
|
|
||||||
href="/blog"
|
|
||||||
className="inline-flex items-center gap-1.5 text-sm font-medium text-rose-600 hover:text-rose-700 transition-colors"
|
|
||||||
>
|
|
||||||
← All articles
|
|
||||||
</Link>
|
|
||||||
<span className="text-xs text-gray-400">By {post.author} · {formatDate(post.date)}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { POSTS, formatDate } from "./posts";
|
import { POSTS, formatDate } from "./posts";
|
||||||
|
import { Breadcrumb } from "@/components/marketing/Breadcrumb";
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Blog",
|
title: "Blog",
|
||||||
|
|
@ -8,59 +9,174 @@ export const metadata: Metadata = {
|
||||||
"Guides on baby feeding, health milestones, vaccination schedules, and how to make the most of Tia — written for Indian families.",
|
"Guides on baby feeding, health milestones, vaccination schedules, and how to make the most of Tia — written for Indian families.",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Derive unique categories + counts from posts
|
||||||
|
const CATEGORIES = Object.values(
|
||||||
|
POSTS.reduce<Record<string, { name: string; color: string; count: number }>>((acc, p) => {
|
||||||
|
if (!acc[p.category]) {
|
||||||
|
acc[p.category] = { name: p.category, color: p.categoryColor, count: 0 };
|
||||||
|
}
|
||||||
|
acc[p.category].count++;
|
||||||
|
return acc;
|
||||||
|
}, {})
|
||||||
|
);
|
||||||
|
|
||||||
export default function BlogPage() {
|
export default function BlogPage() {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-white">
|
<div className="min-h-screen bg-white">
|
||||||
{/* Header */}
|
{/* Breadcrumb */}
|
||||||
<div className="bg-gradient-to-br from-rose-50 to-pink-50 border-b border-rose-100">
|
<div className="max-w-6xl mx-auto px-5 pt-5">
|
||||||
<div className="max-w-3xl mx-auto px-5 py-16 text-center">
|
<Breadcrumb items={[{ label: "Home", href: "/" }, { label: "Blog" }]} />
|
||||||
<div className="mb-3 text-sm font-medium text-rose-500 uppercase tracking-widest">Journal</div>
|
</div>
|
||||||
<h1 className="text-4xl font-bold text-gray-900 mb-4 leading-tight">The Tia Blog</h1>
|
|
||||||
<p className="text-lg text-gray-500 leading-relaxed max-w-xl mx-auto">
|
{/* Page header */}
|
||||||
Practical guides on baby feeding, health, vaccination schedules, and getting the most out of Tia — written for Indian families.
|
<div className="bg-gradient-to-br from-rose-50 to-pink-50 border-b border-rose-100 mt-4">
|
||||||
|
<div className="max-w-6xl mx-auto px-5 py-12 text-center">
|
||||||
|
<div className="mb-2 text-sm font-medium text-rose-500 uppercase tracking-widest">Journal</div>
|
||||||
|
<h1 className="text-4xl font-bold text-gray-900 mb-3 leading-tight">The Tia Blog</h1>
|
||||||
|
<p className="text-base text-gray-500 leading-relaxed max-w-xl mx-auto">
|
||||||
|
Practical guides on baby feeding, health, vaccination schedules, and getting the most out of Tia — for Indian families.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Post grid */}
|
{/* 3-column layout */}
|
||||||
<div className="max-w-3xl mx-auto px-5 py-14">
|
<div className="max-w-6xl mx-auto px-5 py-10">
|
||||||
<div className="flex flex-col gap-8">
|
<div className="grid grid-cols-1 lg:grid-cols-[220px_minmax(0,1fr)_200px] gap-10">
|
||||||
{POSTS.map((post) => (
|
|
||||||
<article
|
|
||||||
key={post.slug}
|
|
||||||
className="group border border-gray-100 rounded-2xl p-7 hover:border-rose-200 hover:shadow-md transition-all duration-200 bg-white"
|
|
||||||
>
|
|
||||||
<Link href={`/blog/${post.slug}`} className="block">
|
|
||||||
<div className="flex items-start gap-5">
|
|
||||||
{/* Emoji icon */}
|
|
||||||
<div className="hidden sm:flex shrink-0 w-14 h-14 rounded-xl bg-rose-50 items-center justify-center text-2xl border border-rose-100 group-hover:bg-rose-100 transition-colors duration-200">
|
|
||||||
{post.emoji}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-1 min-w-0">
|
{/* ── LEFT SIDEBAR: timeline ── */}
|
||||||
{/* Meta row */}
|
<aside className="hidden lg:block">
|
||||||
<div className="flex flex-wrap items-center gap-2 mb-3">
|
<div className="sticky top-24">
|
||||||
<span className={`text-xs font-semibold px-2.5 py-0.5 rounded-full ${post.categoryColor}`}>
|
<p className="text-xs font-bold text-gray-400 uppercase tracking-widest mb-5">All posts</p>
|
||||||
{post.category}
|
<ol className="relative border-l-2 border-rose-100 pl-4 space-y-5">
|
||||||
|
{POSTS.map((p) => (
|
||||||
|
<li key={p.slug} className="group relative">
|
||||||
|
{/* Timeline dot */}
|
||||||
|
<span className="absolute -left-[21px] top-1.5 w-2.5 h-2.5 rounded-full bg-rose-200 border-2 border-white group-hover:bg-rose-400 transition-colors duration-150" />
|
||||||
|
|
||||||
|
<p className="text-xs text-gray-400 mb-0.5">
|
||||||
|
{new Date(p.date).toLocaleDateString("en-IN", { day: "numeric", month: "short", year: "numeric" })}
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href={`/blog/${p.slug}`}
|
||||||
|
className="text-sm font-medium text-gray-700 hover:text-rose-600 transition-colors duration-150 leading-snug line-clamp-2 block"
|
||||||
|
>
|
||||||
|
{p.title}
|
||||||
|
</Link>
|
||||||
|
<span className={`mt-1.5 text-xs px-2 py-0.5 rounded-full inline-block ${p.categoryColor}`}>
|
||||||
|
{p.category}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
{/* ── CENTER: post cards ── */}
|
||||||
|
<main>
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
{POSTS.map((post) => (
|
||||||
|
<article
|
||||||
|
key={post.slug}
|
||||||
|
className="group border border-gray-100 rounded-2xl p-6 hover:border-rose-200 hover:shadow-md transition-all duration-200 bg-white"
|
||||||
|
>
|
||||||
|
<Link href={`/blog/${post.slug}`} className="block">
|
||||||
|
<div className="flex items-start gap-5">
|
||||||
|
{/* Emoji icon */}
|
||||||
|
<div className="hidden sm:flex shrink-0 w-14 h-14 rounded-xl bg-rose-50 items-center justify-center text-2xl border border-rose-100 group-hover:bg-rose-100 transition-colors duration-200">
|
||||||
|
{post.emoji}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
{/* Meta */}
|
||||||
|
<div className="flex flex-wrap items-center gap-2 mb-3">
|
||||||
|
<span className={`text-xs font-semibold px-2.5 py-0.5 rounded-full ${post.categoryColor}`}>
|
||||||
|
{post.category}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-gray-400">{formatDate(post.date)}</span>
|
||||||
|
<span className="text-xs text-gray-400">·</span>
|
||||||
|
<span className="text-xs text-gray-400">{post.readTime}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 className="text-lg font-bold text-gray-900 leading-snug mb-2 group-hover:text-rose-700 transition-colors duration-150">
|
||||||
|
{post.title}
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-500 text-sm leading-relaxed line-clamp-2">
|
||||||
|
{post.excerpt}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-4 text-sm font-semibold text-rose-500 group-hover:text-rose-600 transition-colors duration-150">
|
||||||
|
Read article →
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{/* ── RIGHT SIDEBAR: categories + CTA ── */}
|
||||||
|
<aside className="hidden lg:block">
|
||||||
|
<div className="sticky top-24 space-y-8">
|
||||||
|
|
||||||
|
{/* Categories */}
|
||||||
|
<div>
|
||||||
|
<p className="text-xs font-bold text-gray-400 uppercase tracking-widest mb-4">Browse by topic</p>
|
||||||
|
<div className="flex flex-col gap-2.5">
|
||||||
|
{CATEGORIES.map((cat) => (
|
||||||
|
<div key={cat.name} className="flex items-center justify-between">
|
||||||
|
<span className={`text-xs font-semibold px-2.5 py-1 rounded-full ${cat.color}`}>
|
||||||
|
{cat.name}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-xs text-gray-400">{formatDate(post.date)}</span>
|
<span className="text-xs text-gray-400 font-medium">{cat.count} {cat.count === 1 ? "post" : "posts"}</span>
|
||||||
<span className="text-xs text-gray-400">·</span>
|
|
||||||
<span className="text-xs text-gray-400">{post.readTime}</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
))}
|
||||||
<h2 className="text-xl font-bold text-gray-900 leading-snug mb-2 group-hover:text-rose-700 transition-colors duration-150">
|
|
||||||
{post.title}
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-500 text-sm leading-relaxed line-clamp-3">{post.excerpt}</p>
|
|
||||||
|
|
||||||
<div className="mt-4 text-sm font-semibold text-rose-500 group-hover:text-rose-600 transition-colors duration-150">
|
|
||||||
Read article →
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</div>
|
||||||
</article>
|
|
||||||
))}
|
{/* Divider */}
|
||||||
|
<div className="border-t border-gray-100" />
|
||||||
|
|
||||||
|
{/* Quick links */}
|
||||||
|
<div>
|
||||||
|
<p className="text-xs font-bold text-gray-400 uppercase tracking-widest mb-4">Quick reads</p>
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
{POSTS.slice(0, 3).map((p) => (
|
||||||
|
<Link
|
||||||
|
key={p.slug}
|
||||||
|
href={`/blog/${p.slug}`}
|
||||||
|
className="group/ql flex items-start gap-2"
|
||||||
|
>
|
||||||
|
<span className="text-base mt-0.5 shrink-0">{p.emoji}</span>
|
||||||
|
<span className="text-xs text-gray-600 group-hover/ql:text-rose-600 leading-snug transition-colors duration-150 line-clamp-2">
|
||||||
|
{p.title}
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Divider */}
|
||||||
|
<div className="border-t border-gray-100" />
|
||||||
|
|
||||||
|
{/* CTA */}
|
||||||
|
<div className="bg-rose-50 rounded-xl p-5 border border-rose-100 text-center">
|
||||||
|
<div className="text-2xl mb-2">🌸</div>
|
||||||
|
<p className="text-sm font-semibold text-gray-800 mb-1">Free early access</p>
|
||||||
|
<p className="text-xs text-gray-500 mb-4 leading-relaxed">
|
||||||
|
Built for Indian families. No ads, no data selling.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/login"
|
||||||
|
className="inline-block w-full text-center bg-rose-500 hover:bg-rose-600 text-white text-xs font-semibold px-4 py-2.5 rounded-full transition-colors duration-200"
|
||||||
|
>
|
||||||
|
Get started →
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -105,9 +105,10 @@ export default function MarketingLayout({
|
||||||
|
|
||||||
{/* 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 grid grid-cols-1 sm:grid-cols-3 items-center gap-1 text-xs text-gray-500 text-center sm:text-left">
|
||||||
<p>© {new Date().getFullYear()} Tia. · We don't sell your data — we preserve it.</p>
|
<p>© {new Date().getFullYear()} Tia.</p>
|
||||||
<p>Built with <span className="inline-block transition-transform duration-300 hover:scale-150 cursor-default select-none">❤️</span> in India.</p>
|
<p className="sm:text-center">We don't sell your data — we preserve it.</p>
|
||||||
|
<p className="sm:text-right">Built with <span className="inline-block transition-transform duration-300 hover:scale-150 cursor-default select-none">❤️</span> in India.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
32
src/components/marketing/Breadcrumb.tsx
Normal file
32
src/components/marketing/Breadcrumb.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
export interface BreadcrumbItem {
|
||||||
|
label: string;
|
||||||
|
href?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Breadcrumb({ items }: { items: BreadcrumbItem[] }) {
|
||||||
|
return (
|
||||||
|
<nav aria-label="Breadcrumb">
|
||||||
|
<ol className="flex flex-wrap items-center gap-1 text-sm text-gray-400">
|
||||||
|
{items.map((item, i) => (
|
||||||
|
<li key={i} className="flex items-center gap-1">
|
||||||
|
{i > 0 && <span className="text-gray-300 select-none">/</span>}
|
||||||
|
{item.href ? (
|
||||||
|
<Link
|
||||||
|
href={item.href}
|
||||||
|
className="hover:text-rose-600 transition-colors duration-150"
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</Link>
|
||||||
|
) : (
|
||||||
|
<span className="text-gray-700 font-medium truncate max-w-[200px] sm:max-w-xs">
|
||||||
|
{item.label}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue