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>

src/app/(marketing)/blog/[slug]/page.tsx

@@ -2,6 +2,17 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 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() {
   return POSTS.map((p) => ({ slug: p.slug }));
@@ -30,18 +41,32 @@ export default async function BlogPostPage({
   const post = getPost(slug);
   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 (
     <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="max-w-2xl mx-auto px-5 pt-12 pb-10">
-          <Link
-            href="/blog"
-            className="inline-flex items-center gap-1.5 text-sm text-rose-500 hover:text-rose-700 font-medium mb-8 transition-colors"
-          >
-            ← All articles
-          </Link>
+        <div className="max-w-6xl mx-auto px-5 pt-5 pb-10">
+          {/* Breadcrumb */}
+          <div className="mb-8">
+            <Breadcrumb
+              items={[
+                { label: "Home", href: "/" },
+                { label: "Blog", href: "/blog" },
+                { label: post.title },
+              ]}
+            />
+          </div>
 
+          <div className="max-w-2xl">
             <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}
@@ -52,23 +77,68 @@ export default async function BlogPostPage({
             </div>
 
             <h1 className="text-3xl sm:text-4xl font-bold text-gray-900 leading-tight mb-4">
-            {post.title}
+              {post.emoji} {post.title}
             </h1>
             <p className="text-lg text-gray-500 leading-relaxed">{post.excerpt}</p>
 
-          <div className="mt-6 text-sm text-gray-400">
+            <div className="mt-5 text-sm text-gray-400">
               By <span className="text-gray-600 font-medium">{post.author}</span>
             </div>
           </div>
         </div>
+      </div>
 
-      {/* Article body */}
-      <div className="max-w-2xl mx-auto px-5 py-12">
+      {/* 3-column body */}
+      <div className="max-w-6xl mx-auto px-5 py-10">
+        <div className="grid grid-cols-1 lg:grid-cols-[220px_minmax(0,1fr)_200px] gap-10">
+
+          {/* ── LEFT SIDEBAR: Table of Contents ── */}
+          <aside className="hidden lg:block">
+            <div className="sticky top-24">
+              <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">
+                  {headings.map((h, i) => (
+                    <li key={i}>
+                      <a
+                        href={`#${h.id}`}
+                        className="group flex items-start gap-2 text-sm text-gray-500 hover:text-rose-600 transition-colors duration-150"
+                      >
+                        <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">
+                          {i + 1}
+                        </span>
+                        <span className="leading-snug">{h.text}</span>
+                      </a>
+                    </li>
+                  ))}
+                </ol>
+              ) : (
+                <p className="text-xs text-gray-400">No sections</p>
+              )}
+
+              <div className="mt-8 pt-6 border-t border-gray-100">
+                <Link
+                  href="/blog"
+                  className="flex items-center gap-1.5 text-sm text-rose-500 hover:text-rose-700 font-medium transition-colors"
+                >
+                  ← All articles
+                </Link>
+              </div>
+            </div>
+          </aside>
+
+          {/* ── CENTER: Article body ── */}
+          <article className="min-w-0">
             <div className="space-y-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>
+                    <h2
+                      id={slugifyHeading(section.heading)}
+                      className="text-xl font-bold text-gray-900 mb-4 mt-2 scroll-mt-28"
+                    >
+                      {section.heading}
+                    </h2>
                   )}
 
                   {section.paragraphs?.map((p, j) => (
@@ -78,14 +148,14 @@ export default async function BlogPostPage({
                   ))}
 
                   {section.table && (
-                <div className="overflow-x-auto mb-4">
+                    <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 border-rose-100 first:rounded-tl-lg last:rounded-tr-lg"
+                                className="text-left px-4 py-3 font-semibold text-gray-700 border-b border-rose-100"
                               >
                                 {h}
                               </th>
@@ -94,9 +164,9 @@ export default async function BlogPostPage({
                         </thead>
                         <tbody>
                           {section.table.rows.map((row, j) => (
-                        <tr key={j} className="border-b border-gray-100 hover:bg-gray-50">
+                            <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 border border-gray-100">
+                                <td key={k} className="px-4 py-3 text-gray-600">
                                   {cell}
                                 </td>
                               ))}
@@ -133,8 +203,8 @@ export default async function BlogPostPage({
               ))}
             </div>
 
-        {/* Footer CTA */}
-        <div className="mt-16 pt-10 border-t border-gray-100">
+            {/* 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>
@@ -149,16 +219,78 @@ export default async function BlogPostPage({
                 </Link>
               </div>
 
-          <div className="mt-10 flex items-center justify-between">
+              {/* 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">By {post.author} · {formatDate(post.date)}</span>
+                <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>
       </div>
     </div>
   );

src/app/(marketing)/blog/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import Link from "next/link";
 import { POSTS, formatDate } from "./posts";
+import { Breadcrumb } from "@/components/marketing/Breadcrumb";
 
 export const metadata: Metadata = {
   title: "Blog",
@@ -8,27 +9,75 @@ export const metadata: Metadata = {
     "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() {
   return (
     <div className="min-h-screen bg-white">
-      {/* Header */}
-      <div className="bg-gradient-to-br from-rose-50 to-pink-50 border-b border-rose-100">
-        <div className="max-w-3xl mx-auto px-5 py-16 text-center">
-          <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-4 leading-tight">The Tia Blog</h1>
-          <p className="text-lg 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 — written for Indian families.
+      {/* Breadcrumb */}
+      <div className="max-w-6xl mx-auto px-5 pt-5">
+        <Breadcrumb items={[{ label: "Home", href: "/" }, { label: "Blog" }]} />
+      </div>
+
+      {/* Page header */}
+      <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>
         </div>
       </div>
 
-      {/* Post grid */}
-      <div className="max-w-3xl mx-auto px-5 py-14">
-        <div className="flex flex-col gap-8">
+      {/* 3-column layout */}
+      <div className="max-w-6xl mx-auto px-5 py-10">
+        <div className="grid grid-cols-1 lg:grid-cols-[220px_minmax(0,1fr)_200px] gap-10">
+
+          {/* ── LEFT SIDEBAR: timeline ── */}
+          <aside className="hidden lg:block">
+            <div className="sticky top-24">
+              <p className="text-xs font-bold text-gray-400 uppercase tracking-widest mb-5">All posts</p>
+              <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-7 hover:border-rose-200 hover:shadow-md transition-all duration-200 bg-white"
+                  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">
@@ -38,7 +87,7 @@ export default function BlogPage() {
                       </div>
 
                       <div className="flex-1 min-w-0">
-                    {/* Meta row */}
+                        {/* 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}
@@ -48,10 +97,12 @@ export default function BlogPage() {
                           <span className="text-xs text-gray-400">{post.readTime}</span>
                         </div>
 
-                    <h2 className="text-xl font-bold text-gray-900 leading-snug mb-2 group-hover:text-rose-700 transition-colors duration-150">
+                        <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-3">{post.excerpt}</p>
+                        <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 →
@@ -62,6 +113,71 @@ export default function BlogPage() {
                 </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 className="text-xs text-gray-400 font-medium">{cat.count} {cat.count === 1 ? "post" : "posts"}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* 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>
   );

src/app/(marketing)/layout.tsx

@@ -105,9 +105,10 @@ export default function MarketingLayout({
 
         {/* 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">
-            <p>© {new Date().getFullYear()} Tia. &nbsp;·&nbsp; We don&apos;t sell your data — we preserve it.</p>
-            <p>Built with <span className="inline-block transition-transform duration-300 hover:scale-150 cursor-default select-none">❤️</span> in India.</p>
+          <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.</p>
+            <p className="sm:text-center">We don&apos;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>
       </footer>

src/components/marketing/Breadcrumb.tsx

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