feat: sb verses extracted

2026-04-14 15:58:06 +05:30
parent 82e720b10a
commit c5d4194d00
6502 changed files with 16345 additions and 7851 deletions
@@ -1,7 +1,10 @@
 import fs from "fs";
 import path from "path";
 import Link from "next/link";
+import { PageHeader } from "@/components/page-header";
 import { notFound } from "next/navigation";
+import { Card, CardHeader, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
 import { VerseIndex } from "./verse-index";

 type Synonym = {
@@ -70,20 +73,18 @@ export default async function ChapterPage({
  }));

  return (
-    <div className="min-h-screen bg-amber-50 dark:bg-zinc-950">
-      <header className="border-b border-amber-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-6 py-6 sticky top-0 z-20">
-        <div className="max-w-5xl mx-auto">
-          <Link
-            href="/books/bg"
-            className="text-sm text-amber-600 hover:text-amber-800 dark:text-zinc-400 dark:hover:text-zinc-100"
-          >
-            &larr; Bhagavad-gītā
-          </Link>
-          <h1 className="mt-2 text-2xl font-bold text-zinc-900 dark:text-zinc-100">
-            Chapter {chapter}: {title}
-          </h1>
-        </div>
-      </header>
+    <div className="min-h-screen bg-background">
+      <PageHeader sticky wide>
+        <Link
+          href="/books/bg"
+          className="text-sm text-muted-foreground hover:text-foreground"
+        >
+          &larr; Bhagavad-gītā
+        </Link>
+        <h1 className="mt-2 text-2xl font-bold text-foreground">
+          Chapter {chapter}: {title}
+        </h1>
+      </PageHeader>

      <div className="w-full md:max-w-5xl mx-auto flex">
        {/* Left sidebar — verse index */}
@@ -92,19 +93,17 @@ export default async function ChapterPage({
        {/* Main content */}
        <main className="flex-1 min-w-0 px-6 py-8 space-y-12">
          {verses.map((verse) => (
-            <article
+            <Card
              key={verse.reference}
              id={`verse-${verse.verse}`}
-              className="bg-white dark:bg-zinc-900 rounded-lg border border-amber-200 dark:border-zinc-800 overflow-hidden scroll-mt-24"
+              className="scroll-mt-24"
            >
              {/* Header */}
-              <div className="px-6 py-3 bg-amber-100 dark:bg-zinc-800 border-b border-amber-200 dark:border-zinc-700">
-                <span className="text-sm font-semibold text-amber-700 dark:text-amber-400">
-                  {verse.reference}
-                </span>
-              </div>
+              <CardHeader className="border-b border-border bg-muted/50 py-3">
+                <Badge variant="secondary">{verse.reference}</Badge>
+              </CardHeader>

-              <div className="px-6 py-5 space-y-5">
+              <CardContent className="space-y-5 pt-5">
                {/* Devanagari */}
                <div className="text-center">
                  <p className="text-xl leading-relaxed text-red-800 dark:text-red-400 whitespace-pre-line font-serif">
@@ -114,7 +113,7 @@ export default async function ChapterPage({

                {/* Transliteration */}
                <div className="text-center">
-                  <p className="text-base italic text-zinc-700 dark:text-zinc-300 whitespace-pre-line">
+                  <p className="text-base text-muted-foreground italic whitespace-pre-line">
                    {verse.transliteration}
                  </p>
                </div>
@@ -122,13 +121,13 @@ export default async function ChapterPage({
                {/* Synonyms */}
                {verse.synonyms.length > 0 && (
                  <div>
-                    <h3 className="text-xs font-bold uppercase tracking-wider text-amber-600 dark:text-amber-500 mb-2">
+                    <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-2">
                      Synonyms
                    </h3>
-                    <p className="text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">
+                    <p className="text-sm text-muted-foreground leading-relaxed">
                      {verse.synonyms.map((s, i) => (
                        <span key={i}>
-                          <span className="italic text-zinc-800 dark:text-zinc-200">
+                          <span className="text-foreground italic">
                            {s.word}
                          </span>
                          —{s.meanings.join(", ")}
@@ -141,11 +140,11 @@ export default async function ChapterPage({

                {/* Translation */}
                <div>
-                  <h3 className="text-xs font-bold uppercase tracking-wider text-amber-600 dark:text-amber-500 mb-2">
+                  <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-2">
                    Translation
                  </h3>
                  <p
-                    className="text-base text-zinc-900 dark:text-zinc-100 leading-relaxed font-medium"
+                    className="text-base text-foreground leading-relaxed font-medium"
                    dangerouslySetInnerHTML={{ __html: verse.translation }}
                  />
                </div>
@@ -153,18 +152,18 @@ export default async function ChapterPage({
                {/* Purport */}
                {verse.purport.length > 0 && (
                  <div>
-                    <h3 className="text-xs font-bold uppercase tracking-wider text-amber-600 dark:text-amber-500 mb-2">
+                    <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-2">
                      Purport
                    </h3>
-                    <div className="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed space-y-3">
+                    <div className="text-sm text-muted-foreground leading-relaxed space-y-3">
                      {verse.purport.map((p, i) => (
                        <p key={i} dangerouslySetInnerHTML={{ __html: p }} />
                      ))}
                    </div>
                  </div>
                )}
-              </div>
-            </article>
+              </CardContent>
+            </Card>
          ))}
        </main>
      </div>
@@ -39,7 +39,7 @@ export function VerseIndex({

  return (
    <aside className="hidden lg:block w-48 shrink-0 sticky top-[89px] self-start max-h-[calc(100vh-89px)] overflow-y-auto py-8 pr-4">
-      <h2 className="text-xs font-bold uppercase tracking-wider text-amber-600 dark:text-amber-500 mb-3 px-2">
+      <h2 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3 px-2">
        Verses
      </h2>
      <nav className="grid grid-cols-3 gap-0.5">
@@ -47,10 +47,10 @@ export function VerseIndex({
          <a
            key={v.verse}
            href={`#verse-${v.verse}`}
-            className={`px-2 py-1 rounded text-sm text-center transition-colors ${
+            className={`px-2 py-1 rounded-md text-sm text-center transition-colors ${
              activeVerse === v.verse
-                ? "bg-amber-200 dark:bg-amber-900/40 text-amber-900 dark:text-amber-300 font-medium"
-                : "text-zinc-600 dark:text-zinc-400 hover:bg-amber-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-zinc-200"
+                ? "bg-primary/10 text-primary font-medium"
+                : "text-muted-foreground hover:bg-muted hover:text-foreground"
            }`}
          >
            {v.verse_end ? `${v.verse}–${v.verse_end}` : v.verse}
@@ -1,6 +1,8 @@
 import fs from "fs";
 import path from "path";
 import Link from "next/link";
+import { PageHeader } from "@/components/page-header";
+import { Card, CardContent } from "@/components/ui/card";
 import { ExtractedVerseCount } from "../extracted-verse-count";

 type ChapterInfo = {
@@ -22,46 +24,44 @@ export default function BgPage() {
  const intro: Intro = JSON.parse(fs.readFileSync(introPath, "utf-8"));

  return (
-    <div className="min-h-screen bg-amber-50 dark:bg-zinc-950">
-      <header className="border-b border-amber-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-6 py-8">
-        <div className="max-w-3xl mx-auto">
-          <Link
-            href="/books"
-            className="text-sm text-amber-600 hover:text-amber-800 dark:text-zinc-400 dark:hover:text-zinc-100"
-          >
-            &larr; Books
-          </Link>
-          <h1 className="mt-3 text-3xl font-bold text-zinc-900 dark:text-zinc-100">
-            {intro.title}
-          </h1>
-          <p className="mt-1 text-zinc-500 dark:text-zinc-400">
-            {intro.author}
-          </p>
-        </div>
-      </header>
+    <div className="min-h-screen bg-background">
+      <PageHeader>
+        <Link
+          href="/books"
+          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          &larr; Books
+        </Link>
+        <h1 className="mt-3 text-3xl font-bold text-foreground">
+          {intro.title}
+        </h1>
+        <p className="mt-1 text-muted-foreground">{intro.author}</p>
+      </PageHeader>
      <main className="max-w-3xl mx-auto px-6 py-8">
-        <ul className="divide-y divide-amber-200 dark:divide-zinc-800 bg-white dark:bg-zinc-900 rounded-lg border border-amber-200 dark:border-zinc-800 overflow-hidden">
-          {intro.chapters.map((ch) => (
-            <li key={ch.number}>
-              <Link
-                href={`/books/bg/${ch.number}`}
-                className="flex items-center justify-between px-5 py-4 hover:bg-amber-50 dark:hover:bg-zinc-800 transition-colors"
-              >
-                <div>
-                  <span className="text-sm text-amber-600 dark:text-amber-500 font-medium">
-                    Chapter {ch.number}
-                  </span>
-                  <p className="font-medium text-zinc-900 dark:text-zinc-100">
-                    {ch.title}
-                  </p>
-                </div>
-                <span className="text-sm text-zinc-400 shrink-0 ml-4">
-                  <ExtractedVerseCount count={ch.totalVerses} />
-                </span>
-              </Link>
-            </li>
-          ))}
-        </ul>
+        <Card className="divide-y divide-border py-0">
+          <CardContent className="p-0">
+            <ul className="divide-y divide-border">
+              {intro.chapters.map((ch) => (
+                <li key={ch.number}>
+                  <Link
+                    href={`/books/bg/${ch.number}`}
+                    className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                  >
+                    <div>
+                      <span className="text-sm text-primary font-medium">
+                        Chapter {ch.number}
+                      </span>
+                      <p className="font-medium text-foreground">{ch.title}</p>
+                    </div>
+                    <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                      <ExtractedVerseCount count={ch.totalVerses} />
+                    </span>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </CardContent>
+        </Card>
      </main>
    </div>
  );
@@ -1,6 +1,11 @@
 "use client";

-import { useState, useRef, useEffect } from "react";
+import { Info } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";

 const TOOLTIP_TEXT =
  "This is the number of extracted verse entries from Śrīla Prabhupāda's original translations and purports. Some consecutive verses are merged into a single entry (e.g. Texts 16–18), so the actual verse count in the original manuscript may differ.";
@@ -14,47 +19,26 @@ export function ExtractedVerseCount({
  label?: string;
  className?: string;
 }) {
-  const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLSpanElement>(null);
-
-  useEffect(() => {
-    if (!open) return;
-    function handleClick(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
-        setOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, [open]);
-
  return (
-    <span ref={ref} className={`inline-flex items-center gap-1 ${className}`}>
+    <span className={`inline-flex items-center gap-1 ${className}`}>
      <span>
        {count.toLocaleString()} {label}
      </span>
-      <span className="relative inline-flex">
-        <button
-          type="button"
+      <Tooltip>
+        <TooltipTrigger
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
-            setOpen((v) => !v);
          }}
-          onMouseEnter={() => setOpen(true)}
-          onMouseLeave={() => setOpen(false)}
-          className="inline-flex items-center justify-center w-4 h-4 rounded-full border border-current opacity-50 hover:opacity-80 transition-opacity text-[10px] leading-none font-semibold"
+          className="inline-flex items-center justify-center opacity-50 hover:opacity-80 transition-opacity"
          aria-label="About verse count"
        >
-          i
-        </button>
-        {open && (
-          <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 px-3 py-2 rounded-lg bg-zinc-900 dark:bg-zinc-700 text-white text-xs leading-relaxed shadow-lg z-50 pointer-events-none">
-            {TOOLTIP_TEXT}
-            <span className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-zinc-900 dark:border-t-zinc-700" />
-          </span>
-        )}
-      </span>
+          <Info className="size-3.5" />
+        </TooltipTrigger>
+        <TooltipContent side="top" className="max-w-xs text-pretty">
+          {TOOLTIP_TEXT}
+        </TooltipContent>
+      </Tooltip>
    </span>
  );
 }
@@ -1,6 +1,16 @@
 import fs from "fs";
 import path from "path";
 import Link from "next/link";
+import { PageHeader } from "@/components/page-header";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
 import { ExtractedVerseCount } from "./extracted-verse-count";

 type BookInfo = {
@@ -68,51 +78,47 @@ export default function BooksPage() {
  const books = loadBooks();

  return (
-    <div className="min-h-screen bg-amber-50 dark:bg-zinc-950">
-      <header className="border-b border-amber-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-6 py-8">
-        <div className="max-w-3xl mx-auto">
-          <Link
-            href="/"
-            className="text-sm text-amber-600 hover:text-amber-800 dark:text-zinc-400 dark:hover:text-zinc-100"
-          >
-            &larr; Home
-          </Link>
-          <h1 className="mt-3 text-3xl font-bold text-zinc-900 dark:text-zinc-100">
-            Books
-          </h1>
-          <p className="mt-1 text-zinc-500 dark:text-zinc-400">
-            Structured verse-by-verse editions with Devanagari, transliteration,
-            synonyms, translation &amp; purports
-          </p>
-        </div>
-      </header>
+    <div className="min-h-screen bg-background">
+      <PageHeader>
+        <Link
+          href="/"
+          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          &larr; Home
+        </Link>
+        <h1 className="mt-3 text-3xl font-bold text-foreground">Books</h1>
+        <p className="mt-1 text-muted-foreground">
+          Structured verse-by-verse editions with Devanagari, transliteration,
+          synonyms, translation &amp; purports
+        </p>
+      </PageHeader>

      <main className="max-w-3xl mx-auto px-6 py-8">
        <div className="grid gap-4">
          {books.map((book) => (
-            <Link
-              key={book.slug}
-              href={book.href}
-              className="block bg-white dark:bg-zinc-900 rounded-lg border border-amber-200 dark:border-zinc-800 overflow-hidden hover:border-amber-400 dark:hover:border-zinc-600 hover:shadow-md transition-all"
-            >
-              <div className="px-6 py-5">
-                <h2 className="text-xl font-bold text-zinc-900 dark:text-zinc-100">
-                  {book.title}
-                </h2>
-                <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
-                  {book.author}
-                </p>
-                <div className="mt-3 flex items-center gap-3 text-sm">
-                  <span className="inline-flex items-center rounded-full bg-amber-100 dark:bg-zinc-800 px-3 py-0.5 text-amber-700 dark:text-amber-400 font-medium">
-                    {book.description}
-                  </span>
-                  <ExtractedVerseCount
-                    count={book.totalVerses}
-                    label="extracted verses"
-                    className="text-zinc-400 dark:text-zinc-500"
-                  />
-                </div>
-              </div>
+            <Link key={book.slug} href={book.href} className="block">
+              <Card
+                className={cn(
+                  "transition-all hover:shadow-md hover:ring-foreground/20",
+                )}
+              >
+                <CardHeader>
+                  <CardTitle className="text-xl font-bold">
+                    {book.title}
+                  </CardTitle>
+                  <CardDescription>{book.author}</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="flex items-center gap-3 text-sm">
+                    <Badge variant="secondary">{book.description}</Badge>
+                    <ExtractedVerseCount
+                      count={book.totalVerses}
+                      label="extracted verses"
+                      className="text-muted-foreground"
+                    />
+                  </div>
+                </CardContent>
+              </Card>
            </Link>
          ))}
        </div>
@@ -1,7 +1,10 @@
 import fs from "fs";
 import path from "path";
 import Link from "next/link";
+import { PageHeader } from "@/components/page-header";
 import { notFound } from "next/navigation";
+import { Card, CardHeader, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
 import { VerseIndex } from "./verse-index";

 type Synonym = {
@@ -72,9 +75,7 @@ function getCantoAndChapterInfo(
 ): { cantoInfo: CantoInfo; chapterInfo: ChapterInfo } | null {
  const introPath = path.join(process.cwd(), "app/lib/books/sb/intro.json");
  const intro: Intro = JSON.parse(fs.readFileSync(introPath, "utf-8"));
-  const cantoInfo = intro.cantos.find(
-    (c) => c.number === parseInt(canto),
-  );
+  const cantoInfo = intro.cantos.find((c) => c.number === parseInt(canto));
  if (!cantoInfo) return null;
  const chapterInfo = cantoInfo.chapters.find(
    (ch) => ch.number === parseInt(chapter),
@@ -104,20 +105,18 @@ export default async function SbChapterPage({
  }));

  return (
-    <div className="min-h-screen bg-amber-50 dark:bg-zinc-950">
-      <header className="border-b border-amber-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-6 py-6 sticky top-0 z-20">
-        <div className="max-w-5xl mx-auto">
-          <Link
-            href={`/books/sb/${canto}`}
-            className="text-sm text-amber-600 hover:text-amber-800 dark:text-zinc-400 dark:hover:text-zinc-100"
-          >
-            &larr; Canto {cantoInfo.number}: {cantoInfo.title}
-          </Link>
-          <h1 className="mt-2 text-2xl font-bold text-zinc-900 dark:text-zinc-100">
-            Chapter {chapter}: {chapterInfo.title}
-          </h1>
-        </div>
-      </header>
+    <div className="min-h-screen bg-background">
+      <PageHeader sticky wide>
+        <Link
+          href={`/books/sb/${canto}`}
+          className="text-sm text-muted-foreground hover:text-foreground"
+        >
+          &larr; Canto {cantoInfo.number}: {cantoInfo.title}
+        </Link>
+        <h1 className="mt-2 text-2xl font-bold text-foreground">
+          Chapter {chapter}: {chapterInfo.title}
+        </h1>
+      </PageHeader>

      <div className="w-full md:max-w-5xl mx-auto flex">
        {/* Left sidebar — verse index */}
@@ -126,19 +125,17 @@ export default async function SbChapterPage({
        {/* Main content */}
        <main className="flex-1 min-w-0 px-6 py-8 space-y-12">
          {verses.map((verse) => (
-            <article
+            <Card
              key={verse.reference}
              id={`verse-${verse.verse}`}
-              className="bg-white dark:bg-zinc-900 rounded-lg border border-amber-200 dark:border-zinc-800 overflow-hidden scroll-mt-24"
+              className="scroll-mt-24"
            >
              {/* Header */}
-              <div className="px-6 py-3 bg-amber-100 dark:bg-zinc-800 border-b border-amber-200 dark:border-zinc-700">
-                <span className="text-sm font-semibold text-amber-700 dark:text-amber-400">
-                  {verse.reference}
-                </span>
-              </div>
+              <CardHeader className="border-b border-border bg-muted/50 py-3">
+                <Badge variant="secondary">{verse.reference}</Badge>
+              </CardHeader>

-              <div className="px-6 py-5 space-y-5">
+              <CardContent className="space-y-5 pt-5">
                {/* Devanagari */}
                <div className="text-center">
                  <p className="text-xl leading-relaxed text-red-800 dark:text-red-400 whitespace-pre-line font-serif">
@@ -148,7 +145,7 @@ export default async function SbChapterPage({

                {/* Transliteration */}
                <div className="text-center">
-                  <p className="text-base italic text-zinc-700 dark:text-zinc-300 whitespace-pre-line">
+                  <p className="text-base italic text-muted-foreground whitespace-pre-line">
                    {verse.transliteration}
                  </p>
                </div>
@@ -156,13 +153,13 @@ export default async function SbChapterPage({
                {/* Synonyms */}
                {verse.synonyms.length > 0 && (
                  <div>
-                    <h3 className="text-xs font-bold uppercase tracking-wider text-amber-600 dark:text-amber-500 mb-2">
+                    <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-2">
                      Synonyms
                    </h3>
-                    <p className="text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">
+                    <p className="text-sm text-muted-foreground leading-relaxed">
                      {verse.synonyms.map((s, i) => (
                        <span key={i}>
-                          <span className="italic text-zinc-800 dark:text-zinc-200">
+                          <span className="italic text-foreground">
                            {s.word}
                          </span>
                          —{s.meanings.join(", ")}
@@ -175,11 +172,11 @@ export default async function SbChapterPage({

                {/* Translation */}
                <div>
-                  <h3 className="text-xs font-bold uppercase tracking-wider text-amber-600 dark:text-amber-500 mb-2">
+                  <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-2">
                    Translation
                  </h3>
                  <p
-                    className="text-base text-zinc-900 dark:text-zinc-100 leading-relaxed font-medium"
+                    className="text-base text-foreground leading-relaxed font-medium"
                    dangerouslySetInnerHTML={{ __html: verse.translation }}
                  />
                </div>
@@ -187,18 +184,18 @@ export default async function SbChapterPage({
                {/* Purport */}
                {verse.purport.length > 0 && (
                  <div>
-                    <h3 className="text-xs font-bold uppercase tracking-wider text-amber-600 dark:text-amber-500 mb-2">
+                    <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-2">
                      Purport
                    </h3>
-                    <div className="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed space-y-3">
+                    <div className="text-sm text-muted-foreground leading-relaxed space-y-3">
                      {verse.purport.map((p, i) => (
                        <p key={i} dangerouslySetInnerHTML={{ __html: p }} />
                      ))}
                    </div>
                  </div>
                )}
-              </div>
-            </article>
+              </CardContent>
+            </Card>
          ))}
        </main>
      </div>
@@ -39,7 +39,7 @@ export function VerseIndex({

  return (
    <aside className="hidden lg:block w-48 shrink-0 sticky top-[89px] self-start max-h-[calc(100vh-89px)] overflow-y-auto py-8 pr-4">
-      <h2 className="text-xs font-bold uppercase tracking-wider text-amber-600 dark:text-amber-500 mb-3 px-2">
+      <h2 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3 px-2">
        Verses
      </h2>
      <nav className="grid grid-cols-3 gap-0.5">
@@ -47,10 +47,10 @@ export function VerseIndex({
          <a
            key={v.verse}
            href={`#verse-${v.verse}`}
-            className={`px-2 py-1 rounded text-sm text-center transition-colors ${
+            className={`px-2 py-1 rounded-md text-sm text-center transition-colors ${
              activeVerse === v.verse
-                ? "bg-amber-200 dark:bg-amber-900/40 text-amber-900 dark:text-amber-300 font-medium"
-                : "text-zinc-600 dark:text-zinc-400 hover:bg-amber-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-zinc-200"
+                ? "bg-primary/10 text-primary font-medium"
+                : "text-muted-foreground hover:bg-muted hover:text-foreground"
            }`}
          >
            {v.verse_end ? `${v.verse}–${v.verse_end}` : v.verse}
@@ -1,7 +1,9 @@
 import fs from "fs";
 import path from "path";
 import Link from "next/link";
+import { PageHeader } from "@/components/page-header";
 import { notFound } from "next/navigation";
+import { Card, CardContent } from "@/components/ui/card";
 import { ExtractedVerseCount } from "../../extracted-verse-count";

 type ChapterInfo = {
@@ -48,47 +50,47 @@ export default async function CantoPage({
  );

  return (
-    <div className="min-h-screen bg-amber-50 dark:bg-zinc-950">
-      <header className="border-b border-amber-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-6 py-8">
-        <div className="max-w-3xl mx-auto">
-          <Link
-            href="/books/sb"
-            className="text-sm text-amber-600 hover:text-amber-800 dark:text-zinc-400 dark:hover:text-zinc-100"
-          >
-            &larr; Śrīmad-Bhāgavatam
-          </Link>
-          <h1 className="mt-3 text-3xl font-bold text-zinc-900 dark:text-zinc-100">
-            Canto {cantoInfo.number}: {cantoInfo.title}
-          </h1>
-          <p className="mt-1 text-zinc-500 dark:text-zinc-400">
-            {cantoInfo.totalChapters} chapters ·{" "}
-            <ExtractedVerseCount count={totalVerses} label="extracted verses" />
-          </p>
-        </div>
-      </header>
+    <div className="min-h-screen bg-background">
+      <PageHeader>
+        <Link
+          href="/books/sb"
+          className="text-sm text-muted-foreground hover:text-foreground"
+        >
+          &larr; Śrīmad-Bhāgavatam
+        </Link>
+        <h1 className="mt-3 text-3xl font-bold text-foreground">
+          Canto {cantoInfo.number}: {cantoInfo.title}
+        </h1>
+        <p className="mt-1 text-muted-foreground">
+          {cantoInfo.totalChapters} chapters ·{" "}
+          <ExtractedVerseCount count={totalVerses} label="extracted verses" />
+        </p>
+      </PageHeader>
      <main className="max-w-3xl mx-auto px-6 py-8">
-        <ul className="divide-y divide-amber-200 dark:divide-zinc-800 bg-white dark:bg-zinc-900 rounded-lg border border-amber-200 dark:border-zinc-800 overflow-hidden">
-          {cantoInfo.chapters.map((ch) => (
-            <li key={ch.number}>
-              <Link
-                href={`/books/sb/${cantoNum}/${ch.number}`}
-                className="flex items-center justify-between px-5 py-4 hover:bg-amber-50 dark:hover:bg-zinc-800 transition-colors"
-              >
-                <div>
-                  <span className="text-sm text-amber-600 dark:text-amber-500 font-medium">
-                    Chapter {ch.number}
-                  </span>
-                  <p className="font-medium text-zinc-900 dark:text-zinc-100">
-                    {ch.title}
-                  </p>
-                </div>
-                <span className="text-sm text-zinc-400 shrink-0 ml-4">
-                  <ExtractedVerseCount count={ch.totalVerses} />
-                </span>
-              </Link>
-            </li>
-          ))}
-        </ul>
+        <Card className="divide-y divide-border">
+          <CardContent className="p-0">
+            <ul className="divide-y divide-border">
+              {cantoInfo.chapters.map((ch) => (
+                <li key={ch.number}>
+                  <Link
+                    href={`/books/sb/${cantoNum}/${ch.number}`}
+                    className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                  >
+                    <div>
+                      <span className="text-sm text-primary font-medium">
+                        Chapter {ch.number}
+                      </span>
+                      <p className="font-medium text-foreground">{ch.title}</p>
+                    </div>
+                    <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                      <ExtractedVerseCount count={ch.totalVerses} />
+                    </span>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </CardContent>
+        </Card>
      </main>
    </div>
  );
@@ -1,6 +1,9 @@
 import fs from "fs";
 import path from "path";
 import Link from "next/link";
+import { PageHeader } from "@/components/page-header";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
 import { ExtractedVerseCount } from "../extracted-verse-count";

 type ChapterInfo = {
@@ -29,56 +32,56 @@ export default function SbPage() {
  const intro: Intro = JSON.parse(fs.readFileSync(introPath, "utf-8"));

  return (
-    <div className="min-h-screen bg-amber-50 dark:bg-zinc-950">
-      <header className="border-b border-amber-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-6 py-8">
-        <div className="max-w-3xl mx-auto">
-          <Link
-            href="/books"
-            className="text-sm text-amber-600 hover:text-amber-800 dark:text-zinc-400 dark:hover:text-zinc-100"
-          >
-            &larr; Books
-          </Link>
-          <h1 className="mt-3 text-3xl font-bold text-zinc-900 dark:text-zinc-100">
-            {intro.title}
-          </h1>
-          <p className="mt-1 text-zinc-500 dark:text-zinc-400">
-            {intro.author}
-          </p>
-        </div>
-      </header>
+    <div className="min-h-screen bg-background">
+      <PageHeader>
+        <Link
+          href="/books"
+          className="text-sm text-muted-foreground hover:text-foreground"
+        >
+          &larr; Books
+        </Link>
+        <h1 className="mt-3 text-3xl font-bold text-foreground">
+          {intro.title}
+        </h1>
+        <p className="mt-1 text-muted-foreground">{intro.author}</p>
+      </PageHeader>
      <main className="max-w-3xl mx-auto px-6 py-8">
-        <ul className="divide-y divide-amber-200 dark:divide-zinc-800 bg-white dark:bg-zinc-900 rounded-lg border border-amber-200 dark:border-zinc-800 overflow-hidden">
-          {intro.cantos.map((canto) => {
-            const totalVerses = canto.chapters.reduce(
-              (sum, ch) => sum + ch.totalVerses,
-              0,
-            );
-            return (
-              <li key={canto.number}>
-                <Link
-                  href={`/books/sb/${canto.number}`}
-                  className="flex items-center justify-between px-5 py-4 hover:bg-amber-50 dark:hover:bg-zinc-800 transition-colors"
-                >
-                  <div>
-                    <span className="text-sm text-amber-600 dark:text-amber-500 font-medium">
-                      Canto {canto.number}
-                    </span>
-                    <p className="font-medium text-zinc-900 dark:text-zinc-100">
-                      {canto.title}
-                    </p>
-                  </div>
-                  <span className="text-sm text-zinc-400 shrink-0 ml-4">
-                    {canto.totalChapters} chapters ·{" "}
-                    <ExtractedVerseCount
-                      count={totalVerses}
-                      label="extracted verses"
-                    />
-                  </span>
-                </Link>
-              </li>
-            );
-          })}
-        </ul>
+        <Card className="divide-y divide-border">
+          <CardContent className="p-0">
+            <ul className="divide-y divide-border">
+              {intro.cantos.map((canto) => {
+                const totalVerses = canto.chapters.reduce(
+                  (sum, ch) => sum + ch.totalVerses,
+                  0,
+                );
+                return (
+                  <li key={canto.number}>
+                    <Link
+                      href={`/books/sb/${canto.number}`}
+                      className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                    >
+                      <div>
+                        <Badge variant="secondary" className="mb-1">
+                          Canto {canto.number}
+                        </Badge>
+                        <p className="font-medium text-foreground">
+                          {canto.title}
+                        </p>
+                      </div>
+                      <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                        {canto.totalChapters} chapters ·{" "}
+                        <ExtractedVerseCount
+                          count={totalVerses}
+                          label="extracted verses"
+                        />
+                      </span>
+                    </Link>
+                  </li>
+                );
+              })}
+            </ul>
+          </CardContent>
+        </Card>
      </main>
    </div>
  );