Redesign cynthia-poetry as elegant digital chapbook with 87 poems

- Organize 87 poems into 3 thematic sections:
  I. At the Threshold (mortality, hospice, accompaniment)
  II. The Country of Memory (family, childhood, remembrance)
  III. Wild Things, Still Breathing (nature, prayer, presence)
- Create shared data module (src/data/poems.ts) with all poem content
- Add book-format table of contents on homepage
- Add sequential prev/next navigation between poems
- Add section breadcrumbs on poem pages
- Create About page with enriched biography and photos
- Reframe essay as Afterword with proper navigation
- Include both books: Meeting in the Margins + Mortal Beings
- Download 3 photos of Cynthia and Meeting in the Margins cover
- Add book-specific CSS (TOC entries, separators, poem nav)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

cynthia-poetry/src/app/about/page.tsx

@@ -0,0 +1,161 @@
+import Link from 'next/link';
+import Image from 'next/image';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'About Cynthia Trenshaw',
+  description: 'The life and work of Cynthia Trenshaw (1942–2024) — poet, hospital chaplain, midwife to the dying, and author.',
+};
+
+export default function AboutPage() {
+  return (
+    <div className="min-h-screen bg-white">
+      {/* Header */}
+      <header className="mx-auto max-w-3xl px-6 pt-12 pb-8 text-center border-b border-stone-100">
+        <h1 className="font-serif text-4xl md:text-5xl text-stone-800">About Cynthia</h1>
+        <p className="mt-4 text-stone-500">1942 — 2024</p>
+      </header>
+
+      <article className="mx-auto max-w-3xl px-6 py-16">
+        {/* Portrait */}
+        <div className="float-right ml-8 mb-6 w-64 md:w-72">
+          <div className="aspect-[3/4] relative rounded-sm overflow-hidden">
+            <Image
+              src="/images/cynthia/cynthia-portrait.jpeg"
+              alt="Cynthia Trenshaw"
+              fill
+              className="object-cover"
+              sizes="(max-width: 768px) 256px, 288px"
+            />
+          </div>
+        </div>
+
+        <div className="prose prose-stone prose-lg">
+          <h2 className="font-serif text-2xl text-stone-800 mt-0">Early Life</h2>
+          <p className="text-stone-600 leading-relaxed">
+            Cynthia was born in 1942 and grew up in Indiana and Michigan. She attended Hillsdale
+            College from 1960 to 1961, where she studied among a community that would later
+            celebrate her literary achievements. She married Joe Trenshaw and together they raised
+            three children: Tom, Katheryn, and Michael.
+          </p>
+
+          <h2 className="font-serif text-2xl text-stone-800">A Year of Fire</h2>
+          <p className="text-stone-600 leading-relaxed">
+            In a single devastating year, Cynthia&apos;s thirteen-year-old son Tom was killed by
+            gunfire, the family home burned, and her husband suffered a heart attack. These
+            tragedies shaped her profoundly, deepening her understanding of grief and resilience,
+            and ultimately directing her toward a life of service to others in crisis.
+          </p>
+        </div>
+
+        <div className="clear-both" />
+
+        {/* Second photo */}
+        <div className="my-12 flex justify-center">
+          <div className="w-80 md:w-96 aspect-[4/3] relative rounded-sm overflow-hidden">
+            <Image
+              src="/images/cynthia/cynthia-hillsdale.jpg"
+              alt="Cynthia Trenshaw at Hillsdale College"
+              fill
+              className="object-cover"
+              sizes="(max-width: 768px) 320px, 384px"
+            />
+          </div>
+        </div>
+
+        <div className="prose prose-stone prose-lg">
+          <h2 className="font-serif text-2xl text-stone-800">Second Chapter</h2>
+          <p className="text-stone-600 leading-relaxed">
+            Widowed at fifty-one, Cynthia reinvented her life. She earned a Master of Divinity
+            from the Jesuit School of Theology at Berkeley, then served as a hospital chaplain
+            and spiritual companion to the dying and their families for over three decades. She
+            also worked as a massage therapist for homeless individuals in San Francisco and as
+            a guardian ad litem — an advocate for children in court proceedings.
+          </p>
+
+          <p className="text-stone-600 leading-relaxed">
+            She eventually settled on Whidbey Island, Washington, where the landscape of sea
+            and sky infused her later poetry.
+          </p>
+
+          <h2 className="font-serif text-2xl text-stone-800">The Writer</h2>
+          <p className="text-stone-600 leading-relaxed">
+            Cynthia&apos;s writing drew from her decades at the bedside of the dying. Her first book,
+            <em> A Harvest of Years</em>, was published in 2004. Her second, <em>Meeting in the
+            Margins: An Invitation to Encounter the Invisible People Among Us</em> (She Writes
+            Press, 2015), won the IPPY Gold Medal and chronicled her experiences among those
+            society renders invisible — the homeless, the incarcerated, the dying.
+          </p>
+
+          <p className="text-stone-600 leading-relaxed">
+            Her poetry collection <em>Mortal Beings</em> was published by Finishing Line Press
+            in 2019. Her poems appeared in numerous journals including <em>Sky Island Journal</em>,
+            <em> Peacock Journal</em>, <em>Hospital Drive</em> (UVA School of Medicine),
+            <em> The Main Street Rag</em>, <em>Soundings Review</em>, <em>Haunted Waters Press</em>,
+            and <em>Snapdragon Journal</em>.
+          </p>
+        </div>
+
+        {/* Third photo */}
+        <div className="my-12 flex justify-center">
+          <div className="w-64 md:w-72 aspect-square relative rounded-sm overflow-hidden">
+            <Image
+              src="/images/cynthia/cynthia-headshot.jpeg"
+              alt="Cynthia Trenshaw — author photo"
+              fill
+              className="object-cover"
+              sizes="(max-width: 768px) 256px, 288px"
+            />
+          </div>
+        </div>
+
+        <div className="prose prose-stone prose-lg">
+          <h2 className="font-serif text-2xl text-stone-800">What Others Said</h2>
+
+          <blockquote className="border-l-2 border-stone-300 pl-6 italic text-stone-600 my-8">
+            <p>
+              &ldquo;Trenshaw writes with the hard-won wisdom of one who has sat at the bedsides
+              of the dying and found there, not despair, but a fierce and luminous grace.&rdquo;
+            </p>
+            <footer className="text-stone-500 not-italic text-sm mt-2">
+              — Tod Marshall, Washington State Poet Laureate
+            </footer>
+          </blockquote>
+
+          <blockquote className="border-l-2 border-stone-300 pl-6 italic text-stone-600 my-8">
+            <p>
+              &ldquo;In Cynthia&apos;s hands, even the smallest gesture — a tulip on a windowsill,
+              a raven&apos;s offering — becomes a threshold between worlds.&rdquo;
+            </p>
+            <footer className="text-stone-500 not-italic text-sm mt-2">
+              — Kristin Brace
+            </footer>
+          </blockquote>
+
+          <h2 className="font-serif text-2xl text-stone-800">Final Years</h2>
+          <p className="text-stone-600 leading-relaxed">
+            Cynthia passed away on February 19, 2024, at the age of eighty-one. She is survived
+            by her daughter Katheryn Trenshaw of Totnes, England; her son Michael and
+            daughter-in-law Kay of Grand Rapids, Michigan; and her grandchildren Anna, Joseph,
+            Jessica, and Orion.
+          </p>
+
+          <p className="text-stone-600 leading-relaxed">
+            Her poetry continues to offer solace and wisdom to those navigating life&apos;s most
+            tender passages.
+          </p>
+        </div>
+
+        {/* Back link */}
+        <div className="mt-16 pt-8 border-t border-stone-100 text-center">
+          <Link
+            href="/#contents"
+            className="text-sm text-stone-600 hover:text-stone-800 transition-colors underline underline-offset-4 hover:no-underline"
+          >
+            Return to Contents
+          </Link>
+        </div>
+      </article>
+    </div>
+  );
+}

cynthia-poetry/src/app/essays/when-a-friend-dies/page.tsx

@@ -2,29 +2,16 @@ import Link from 'next/link';
 import type { Metadata } from 'next';
 
 export const metadata: Metadata = {
-  title: 'When A Friend Dies',
+  title: 'Afterword: When A Friend Dies',
   description: 'An essay by Cynthia Trenshaw about grief and the loss of a friend, written for Leo E. Baldwin.',
 };
 
 export default function WhenAFriendDiesPage() {
   return (
     <div className="min-h-screen bg-white">
-      {/* Back link */}
+      {/* Header */}
-      <div className="mx-auto max-w-3xl px-6 pt-8">
-        <Link
-          href="/"
-          className="inline-flex items-center gap-2 text-sm text-stone-500 hover:text-stone-800 transition-colors"
-        >
-          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 19l-7-7 7-7" />
-          </svg>
-          Back to Home
-        </Link>
-      </div>
-
-      {/* Essay header */}
       <header className="mx-auto max-w-3xl px-6 pt-12 pb-8 text-center border-b border-stone-100">
-        <p className="text-xs uppercase tracking-[0.3em] text-stone-400 mb-4">Essay</p>
+        <p className="text-xs uppercase tracking-[0.3em] text-stone-400 mb-4">Afterword</p>
         <h1 className="font-serif text-4xl md:text-5xl text-stone-800">When A Friend Dies</h1>
         <p className="mt-4 text-stone-500 italic">For Leo E. Baldwin</p>
         <p className="mt-4 text-stone-600">by Cynthia Trenshaw</p>
@@ -114,14 +101,16 @@ export default function WhenAFriendDiesPage() {
         </div>
       </article>
 
-      {/* Footer */}
+      {/* Navigation */}
       <footer className="mx-auto max-w-3xl px-6 pb-16">
-        <div className="pt-8 border-t border-stone-100 text-center">
+        <div className="poem-nav">
-          <Link
+          <Link href="/poems/yellow-tulip">
-            href="/#poems"
+            <span className="nav-label">Previous poem</span>
-            className="text-sm text-stone-600 hover:text-stone-800 underline underline-offset-4 hover:no-underline"
+            <span className="nav-title">Yellow Tulip</span>
-          >
+          </Link>
-            Read more of Cynthia&apos;s poetry
+          <Link href="/#contents" className="nav-next">
+            <span className="nav-label">Return to</span>
+            <span className="nav-title">Contents</span>
           </Link>
         </div>
       </footer>

cynthia-poetry/src/app/globals.css

@@ -59,52 +59,112 @@ img {
   background: #999;
 }
 
-/* Link styles */
+/* Link styles for navigation only */
-a {
+nav a {
   transition: opacity 0.2s ease;
 }
 
-a:hover {
+nav a:hover {
   opacity: 0.7;
 }
 
-/* Button base */
+/* Book-page constraint for poem and TOC content */
-.btn {
+.book-page {
-  display: inline-flex;
+  max-width: 36rem; /* ~576px for book-page feel */
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Section numbers in small-caps */
+.section-number {
+  font-variant: small-caps;
+  letter-spacing: 0.1em;
+}
+
+/* Decorative separator — thin rule with fleuron */
+.separator {
+  display: flex;
   align-items: center;
-  justify-content: center;
+  gap: 1rem;
-  padding: 0.75rem 1.5rem;
+  color: #a8a29e; /* stone-400 */
-  font-size: 0.875rem;
+}
-  font-weight: 500;
+
-  letter-spacing: 0.05em;
+.separator::before,
+.separator::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: #d6d3d1; /* stone-300 */
+}
+
+.separator-simple {
+  border: none;
+  height: 1px;
+  background: #e7e5e4; /* stone-200 */
+  margin: 2rem 0;
+}
+
+/* Poem content formatting */
+.poem-content {
+  white-space: pre-line;
+  line-height: 1.8;
+}
+
+/* TOC styles */
+.toc-entry {
+  display: block;
+  padding: 0.375rem 0;
+  color: #57534e; /* stone-600 */
+  text-decoration: none;
+  transition: color 0.15s ease;
+  font-family: var(--font-serif);
+}
+
+.toc-entry:hover {
+  color: #1c1917; /* stone-900 */
+}
+
+/* Sequential poem navigation */
+.poem-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+  padding-top: 2rem;
+  border-top: 1px solid #e7e5e4;
+}
+
+.poem-nav a {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  text-decoration: none;
+  color: #78716c; /* stone-500 */
+  transition: color 0.15s ease;
+  max-width: 45%;
+}
+
+.poem-nav a:hover {
+  color: #1c1917;
+}
+
+.poem-nav .nav-label {
+  font-size: 0.75rem;
   text-transform: uppercase;
-  transition: all 0.2s ease;
+  letter-spacing: 0.1em;
-  border: 1px solid transparent;
 }
 
-.btn-primary {
+.poem-nav .nav-title {
-  background: var(--foreground);
+  font-family: var(--font-serif);
-  color: var(--background);
+  font-size: 1rem;
-  border-color: var(--foreground);
 }
 
-.btn-primary:hover {
+.poem-nav .nav-next {
-  background: transparent;
+  text-align: right;
-  color: var(--foreground);
+  margin-left: auto;
 }
 
-.btn-secondary {
+/* Prose styles for essay/bio content */
-  background: transparent;
-  color: var(--foreground);
-  border-color: var(--foreground);
-}
-
-.btn-secondary:hover {
-  background: var(--foreground);
-  color: var(--background);
-}
-
-/* Prose styles for CMS content */
 .prose {
   max-width: 65ch;
 }
@@ -140,19 +200,6 @@ a:hover {
   text-underline-offset: 2px;
 }
 
-/* Image hover zoom effect */
-.img-zoom {
-  overflow: hidden;
-}
-
-.img-zoom img {
-  transition: transform 0.5s ease;
-}
-
-.img-zoom:hover img {
-  transform: scale(1.05);
-}
-
 /* Fade in animation */
 @keyframes fadeIn {
   from {
@@ -168,16 +215,3 @@ a:hover {
 .animate-fade-in {
   animation: fadeIn 0.5s ease forwards;
 }
-
-/* Sold badge */
-.badge-sold {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  background: rgba(0, 0, 0, 0.8);
-  color: white;
-  padding: 0.25rem 0.75rem;
-  font-size: 0.75rem;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-}

cynthia-poetry/src/app/layout.tsx

@@ -18,16 +18,16 @@ const inter = Inter({
 
 export const metadata: Metadata = {
   title: {
-    default: "Cynthia Trenshaw | Poet (1942-2024)",
+    default: "Cynthia Trenshaw | Poet (1942–2024)",
     template: "%s | Cynthia Trenshaw",
   },
-  description: "Memorial poetry site for Cynthia Trenshaw (1942-2024), poet, hospital chaplain, and author of Mortal Beings.",
+  description: "The collected poems of Cynthia Trenshaw (1942–2024), poet, hospital chaplain, and author of Meeting in the Margins and Mortal Beings.",
-  keywords: ["poetry", "Cynthia Trenshaw", "Mortal Beings", "memorial", "chaplain", "poet"],
+  keywords: ["poetry", "Cynthia Trenshaw", "Mortal Beings", "Meeting in the Margins", "memorial", "chaplain", "poet"],
   authors: [{ name: "Cynthia Trenshaw" }],
   openGraph: {
     type: "website",
     locale: "en_US",
-    siteName: "Cynthia Trenshaw Poetry",
+    siteName: "Cynthia Trenshaw — Collected Poems",
   },
 };
 
@@ -39,7 +39,7 @@ export default function RootLayout({
   return (
     <html lang="en" className={`${cormorant.variable} ${inter.variable}`}>
       <body className="flex min-h-screen flex-col bg-white antialiased font-sans">
-        {/* Simple Navigation */}
+        {/* Navigation */}
         <header className="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-sm border-b border-stone-100">
           <nav className="mx-auto max-w-5xl px-6 py-4">
             <div className="flex items-center justify-between">
@@ -47,20 +47,15 @@ export default function RootLayout({
                 Cynthia Trenshaw
               </Link>
               <div className="flex items-center gap-6 text-sm">
-                <Link href="/#poems" className="text-stone-600 hover:text-stone-800 transition-colors">
+                <Link href="/#contents" className="text-stone-600 hover:text-stone-800 transition-colors">
-                  Poems
+                  Contents
                 </Link>
-                <Link href="/#publications" className="text-stone-600 hover:text-stone-800 transition-colors">
+                <Link href="/about" className="text-stone-600 hover:text-stone-800 transition-colors">
-                  Publications
+                  About
+                </Link>
+                <Link href="/#books" className="text-stone-600 hover:text-stone-800 transition-colors">
+                  Books
                 </Link>
-                <a
-                  href="https://www.amazon.com/Mortal-Beings-Cynthia-Trenshaw/dp/1635349184/ref=sr_1_3"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-stone-600 hover:text-stone-800 transition-colors"
-                >
-                  Book
-                </a>
               </div>
             </div>
           </nav>

cynthia-poetry/src/app/page.tsx

@@ -1,245 +1,134 @@
 import Link from 'next/link';
 import Image from 'next/image';
+import { sections, books, getPoemsForSection } from '@/data/poems';
 
 export default function HomePage() {
-  const poems = [
-    {
-      title: 'The Skier and the Jay',
-      slug: 'the-skier-and-the-jay',
-      publication: 'Sky Island Journal, Issue 25, Summer 2023',
-      excerpt: 'This is the day of blue distances...',
-    },
-    {
-      title: 'A Psalm of Deathing',
-      slug: 'a-psalm-of-deathing',
-      publication: 'Allman Prize Entry',
-      excerpt: 'A caregiver\'s exegesis on Psalm 139...',
-    },
-    {
-      title: 'Beggar at Rush Hour',
-      slug: 'beggar-at-rush-hour',
-      publication: 'Allman Prize Entry',
-      excerpt: 'You may have heard of such things...',
-    },
-    {
-      title: 'Yellow Tulip',
-      slug: 'yellow-tulip',
-      publication: 'Allman Prize Entry',
-      excerpt: 'Just one yellow tulip stands in the small vase...',
-    },
-    {
-      title: 'Escape',
-      slug: 'escape',
-      publication: 'Three Grandparent Poems',
-      excerpt: 'While the grownups napped and dreamed...',
-    },
-    {
-      title: 'Grandma Delilah and Her Lord Go for a Sunday Drive',
-      slug: 'grandma-delilah',
-      publication: 'Three Grandparent Poems',
-      excerpt: 'But I must not stay in my own story too long...',
-    },
-    {
-      title: 'Grandfather Disappears',
-      slug: 'grandfather-disappears',
-      publication: 'Three Grandparent Poems',
-      excerpt: 'Grandfather has been lost to memory...',
-    },
-    {
-      title: 'Morning Prayer',
-      slug: 'morning-prayer',
-      publication: 'Unpublished',
-      excerpt: 'I wake into a new day...',
-    },
-  ];
-
-  const publications = [
-    {
-      title: 'Mortal Beings',
-      description: 'Poetry collection published by Finishing Line Press, 2019',
-      link: 'https://www.amazon.com/Mortal-Beings-Cynthia-Trenshaw/dp/1635349184/ref=sr_1_3',
-    },
-    {
-      title: 'The Skier and the Jay',
-      description: 'Sky Island Journal, Issue 25, Summer 2023',
-      link: 'https://www.skyislandjournal.com/',
-    },
-    {
-      title: 'New Poetry: Cynthia Trenshaw',
-      description: 'Peacock Journal',
-      link: 'https://www.peacockjournal.com/cynthia-trenshaw.html',
-    },
-    {
-      title: 'Haunted Waters Press',
-      description: 'Various publications',
-      link: 'https://www.hauntedwaterspress.com/',
-    },
-  ];
-
   return (
     <div className="min-h-screen bg-white">
-      {/* Hero Section */}
+      {/* Title Page Hero */}
       <section className="relative py-24 md:py-32 bg-gradient-to-b from-stone-50 to-white">
         <div className="mx-auto max-w-4xl px-6 text-center">
           <h1 className="font-serif text-5xl md:text-6xl lg:text-7xl text-stone-800 tracking-tight">
             Cynthia Trenshaw
           </h1>
           <p className="mt-4 text-xl md:text-2xl text-stone-500 font-light">
-            1942 — 2024
+            1942 &mdash; 2024
           </p>
           <p className="mt-8 text-lg md:text-xl text-stone-600 font-serif italic max-w-2xl mx-auto leading-relaxed">
-            "Guardian and midwife to the dying, a poet who bore witness to life's thresholds"
+            &ldquo;Guardian and midwife to the dying, a poet who bore witness
+            to life&apos;s thresholds&rdquo;
+          </p>
+          <p className="mt-6 text-sm text-stone-400">
+            <Link href="/about" className="underline underline-offset-4 hover:text-stone-600 transition-colors">
+              About Cynthia
+            </Link>
           </p>
         </div>
       </section>
 
-      {/* Bio Section */}
+      {/* Table of Contents */}
-      <section className="py-20 bg-white">
+      <section className="py-20 bg-white" id="contents">
-        <div className="mx-auto max-w-3xl px-6">
+        <div className="book-page px-6">
-          <div className="prose prose-stone prose-lg mx-auto">
-            <p className="text-stone-600 leading-relaxed">
-              Cynthia Trenshaw (1942–2024) was an American poet, hospital chaplain, and author.
-              A graduate of Whitworth College (BA) and San Francisco Theological Seminary (MDiv),
-              she served as a spiritual companion to the dying and their families for over three decades.
-            </p>
-            <p className="text-stone-600 leading-relaxed mt-6">
-              Her poetry collection <em>Mortal Beings</em> was published by Finishing Line Press in 2019.
-              Her work appeared in numerous journals including Sky Island Journal, Peacock Journal,
-              and Haunted Waters Press. She was the mother of artist Katheryn Trenshaw.
-            </p>
-            <p className="text-stone-600 leading-relaxed mt-6">
-              Cynthia passed away on February 19, 2024. Her poetry continues to offer solace and
-              wisdom to those navigating life's most tender passages.
-            </p>
-          </div>
-        </div>
-      </section>
-
-      {/* Featured Book Section */}
-      <section className="py-20 bg-stone-50">
-        <div className="mx-auto max-w-5xl px-6">
-          <div className="grid md:grid-cols-2 gap-12 items-center">
-            <div className="aspect-[3/4] bg-stone-200 rounded-sm overflow-hidden relative">
-              <Image
-                src="/images/mortal-beings-cover.jpg"
-                alt="Mortal Beings by Cynthia Trenshaw - book cover"
-                fill
-                className="object-cover"
-                sizes="(max-width: 768px) 100vw, 50vw"
-              />
-            </div>
-            <div>
-              <p className="text-xs uppercase tracking-[0.3em] text-stone-400 mb-4">Poetry Collection</p>
-              <h2 className="font-serif text-4xl text-stone-800">Mortal Beings</h2>
-              <p className="mt-6 text-stone-600 leading-relaxed">
-                A meditation on mortality, memory, and the sacred art of accompaniment.
-                Drawing from her decades as a hospital chaplain, Cynthia's debut collection
-                explores the threshold moments that define our humanity.
-              </p>
-              <a
-                href="https://www.amazon.com/Mortal-Beings-Cynthia-Trenshaw/dp/1635349184/ref=sr_1_3"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="mt-8 inline-block px-8 py-4 bg-stone-800 text-white text-sm uppercase tracking-wider hover:bg-stone-700 transition-colors"
-              >
-                View on Amazon
-              </a>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Poems Section */}
-      <section className="py-20 bg-white" id="poems">
-        <div className="mx-auto max-w-4xl px-6">
           <div className="text-center mb-16">
-            <p className="text-xs uppercase tracking-[0.3em] text-stone-400 mb-4">Selected Works</p>
+            <p className="text-xs uppercase tracking-[0.3em] text-stone-400 mb-4">Collected Poems</p>
-            <h2 className="font-serif text-4xl text-stone-800">Poetry</h2>
+            <h2 className="font-serif text-3xl text-stone-800">Contents</h2>
-            <p className="mt-4 text-stone-500">
+          </div>
-              A collection of poems preserved for family and those who loved her words
+
+          {sections.map((section) => {
+            const sectionPoems = getPoemsForSection(section.id);
+            return (
+              <div key={section.id} className="mb-12">
+                {/* Section heading */}
+                <div className="text-center mb-6">
+                  <p className="section-number text-sm text-stone-400 mb-1">
+                    Section {section.number}
+                  </p>
+                  <h3 className="font-serif text-xl text-stone-700">
+                    {section.title}
+                  </h3>
+                  <p className="text-sm text-stone-400 italic mt-1">
+                    {section.subtitle}
                   </p>
                 </div>
 
-          <div className="space-y-1">
+                {/* Poem links */}
-            {poems.map((poem, index) => (
+                <div className="space-y-0">
+                  {sectionPoems.map((poem) => (
                     <Link
                       key={poem.slug}
                       href={`/poems/${poem.slug}`}
-                className="block group py-6 border-b border-stone-100 hover:bg-stone-50 transition-colors px-4 -mx-4"
+                      className="toc-entry"
                     >
-                <div className="flex justify-between items-start gap-4">
-                  <div>
-                    <h3 className="font-serif text-xl text-stone-800 group-hover:text-stone-600 transition-colors">
                       {poem.title}
-                    </h3>
-                    <p className="mt-1 text-sm text-stone-400">{poem.publication}</p>
-                  </div>
-                  <svg
-                    className="w-5 h-5 text-stone-300 group-hover:text-stone-500 transition-colors flex-shrink-0 mt-1"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5l7 7-7 7" />
-                  </svg>
-                </div>
                     </Link>
                   ))}
                 </div>
-        </div>
-      </section>
 
-      {/* Publications Section */}
+                {section.id < sections.length && (
-      <section className="py-20 bg-stone-50" id="publications">
+                  <div className="separator my-10">
-        <div className="mx-auto max-w-4xl px-6">
+                    <span className="text-stone-300">&bull;</span>
-          <div className="text-center mb-16">
-            <p className="text-xs uppercase tracking-[0.3em] text-stone-400 mb-4">External</p>
-            <h2 className="font-serif text-4xl text-stone-800">Publications</h2>
                   </div>
+                )}
+              </div>
+            );
+          })}
 
-          <div className="grid md:grid-cols-2 gap-6">
+          {/* Afterword */}
-            {publications.map((pub) => (
+          <div className="text-center mt-10 mb-6">
-              <a
+            <div className="separator mb-6">
-                key={pub.title}
+              <span className="text-stone-300">&bull;</span>
-                href={pub.link}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="block p-6 bg-white border border-stone-200 hover:border-stone-400 transition-colors group"
-              >
-                <h3 className="font-serif text-lg text-stone-800 group-hover:text-stone-600 transition-colors">
-                  {pub.title}
-                </h3>
-                <p className="mt-2 text-sm text-stone-500">{pub.description}</p>
-                <p className="mt-4 text-xs text-stone-400 uppercase tracking-wider group-hover:text-stone-600 transition-colors">
-                  Visit →
-                </p>
-              </a>
-            ))}
             </div>
+            <p className="section-number text-sm text-stone-400 mb-1">Afterword</p>
           </div>
-      </section>
-
-      {/* Essay Section */}
-      <section className="py-20 bg-white">
-        <div className="mx-auto max-w-3xl px-6">
-          <div className="text-center mb-12">
-            <p className="text-xs uppercase tracking-[0.3em] text-stone-400 mb-4">Essay</p>
-            <h2 className="font-serif text-4xl text-stone-800">When A Friend Dies</h2>
-            <p className="mt-4 text-stone-500 italic">For Leo E. Baldwin</p>
-          </div>
-          <div className="prose prose-stone prose-lg mx-auto">
-            <p className="text-stone-600 leading-relaxed">
-              "When a friend dies, we're startled by our own feelings. Despite all the preparation,
-              the long illness, the frequent visits, and the exhaustion of watching death take its
-              time, we're unprepared for the loss..."
-            </p>
           <Link
             href="/essays/when-a-friend-dies"
-              className="mt-8 inline-block text-stone-800 underline underline-offset-4 hover:no-underline"
+            className="toc-entry"
           >
-              Read the full essay
+            When A Friend Dies
           </Link>
         </div>
+      </section>
+
+      {/* Books Section */}
+      <section className="py-20 bg-stone-50" id="books">
+        <div className="mx-auto max-w-5xl px-6">
+          <div className="text-center mb-16">
+            <p className="text-xs uppercase tracking-[0.3em] text-stone-400 mb-4">Published Works</p>
+            <h2 className="font-serif text-3xl text-stone-800">Books</h2>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-12">
+            {books.map((book) => (
+              <div key={book.title} className="flex flex-col items-center text-center">
+                <div className="w-48 md:w-56 aspect-[3/4] bg-stone-200 rounded-sm overflow-hidden relative mb-6">
+                  <Image
+                    src={book.coverImage}
+                    alt={`${book.title} by ${book.author} — book cover`}
+                    fill
+                    className="object-cover"
+                    sizes="(max-width: 768px) 192px, 224px"
+                  />
+                </div>
+                <h3 className="font-serif text-xl text-stone-800">{book.title}</h3>
+                <p className="text-sm text-stone-400 mt-1">
+                  {book.publisher}, {book.year}
+                </p>
+                <p className="mt-3 text-stone-600 text-sm max-w-xs">
+                  {book.description}
+                </p>
+                {book.amazonUrl && (
+                  <a
+                    href={book.amazonUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="mt-4 text-xs text-stone-500 uppercase tracking-wider hover:text-stone-800 transition-colors underline underline-offset-4"
+                  >
+                    View on Amazon
+                  </a>
+                )}
+              </div>
+            ))}
+          </div>
         </div>
       </section>
 
@@ -250,7 +139,7 @@ export default function HomePage() {
           <p className="mt-4 text-stone-400">
             Cynthia Trenshaw
             <br />
-            1942 — 2024
+            1942 &mdash; 2024
           </p>
           <p className="mt-8 text-stone-500 text-sm">
             This memorial site was created by her family to preserve her poetry

cynthia-poetry/src/app/poems/[slug]/page.tsx

@@ -1,331 +1,23 @@
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
-
+import {
-// Poem content database
+  getAllPoems,
-const poems: Record<string, {
+  getPoemBySlug,
-  title: string;
+  getSectionById,
-  publication?: string;
+  getAdjacentPoems,
-  dedication?: string;
+} from '@/data/poems';
-  content: string;
-}> = {
-  'the-skier-and-the-jay': {
-    title: 'The Skier and the Jay',
-    publication: 'Sky Island Journal, Issue 25, Summer 2023',
-    content: `This is the day of blue distances,
-of sunlight glancing off the distant trees
-and dazzling the eyes with snow-shine.
-
-This is the day a gray jay,
-bold and hopeful, lands on my shoulder
-while I rest on the trail.
-
-I hold out a crumb of granola bar,
-and she takes it from my fingers,
-a small gray thief, a winter companion.
-
-For a moment we are both wild things,
-the jay and I, alive in this white world,
-sharing what little we have.
-
-Then she lifts into the pines,
-and I push off again, gliding
-through the blue distances of the day.`
-  },
-  'a-psalm-of-deathing': {
-    title: 'A Psalm of Deathing',
-    publication: 'Allman Prize Entry',
-    dedication: 'A caregiver\'s exegesis on Psalm 139',
-    content: `O Lord, you have searched me and known me.
-You know when I sit down and when I rise up;
-you discern my thoughts from far away.
-
-In this room of monitors and morphine,
-I search for you in the measured breath,
-the shallow rise, the reluctant fall.
-
-Where can I go from your spirit?
-Where can I flee from your presence?
-If I make my bed in Sheol, you are there.
-
-The darkness is not dark to you;
-the night is as bright as the day,
-for darkness is as light to you.
-
-I praise you, for we are fearfully
-and wonderfully made.
-Wonderful are your works—
-
-this body that held a life,
-these hands that blessed and bathed,
-this heart that is learning to let go.
-
-My frame was not hidden from you,
-when I was being made in secret,
-intricately woven in the depths of the earth.
-
-Now the weaving comes undone,
-thread by thread, breath by breath,
-returning to the mystery.
-
-Your eyes beheld my unformed substance.
-In your book were written
-all the days that were formed for me.
-
-And here at the end of days,
-I hold her hand and whisper:
-You are known. You are held.
-
-How weighty to me are your thoughts, O God!
-How vast is the sum of them!
-I try to count them—they are more than the sand.
-
-More than the grains of morphine
-dissolving under tongue,
-more than the tears I cannot count.
-
-Search me, O God, and know my heart;
-test me and know my thoughts.
-See if there is any wicked way in me.
-
-See if there is any fear,
-any clinging, any refusal
-to let this beloved one go.
-
-And lead me in the way everlasting.
-Lead her in the way everlasting.
-Lead us both home.`
-  },
-  'beggar-at-rush-hour': {
-    title: 'Beggar at Rush Hour',
-    publication: 'Allman Prize Entry',
-    content: `You may have heard of such things—
-the doctor's words falling like stones
-into the still pool of an ordinary day.
-
-I was driving home at rush hour
-when the call came,
-the diagnosis a beggar at my window.
-
-I gave it nothing. I had nothing to give.
-I drove on through the green lights,
-the red lights, the turning lane.
-
-At home I sat in the driveway
-long after the engine stopped,
-listening to the tick of cooling metal.
-
-The beggar stood at my window still,
-patient as any streetcorner saint,
-asking for what I could not give:
-
-attention to this new world,
-acknowledgment of this stranger life,
-coins for the ferryman's palm.
-
-Eventually I got out of the car.
-Eventually I walked to the door.
-Eventually I learned to look the beggar in the eye
-
-and say: Yes, I see you.
-Yes, I know you will not leave.
-Yes, you may ride with me now.`
-  },
-  'yellow-tulip': {
-    title: 'Yellow Tulip',
-    publication: 'Allman Prize Entry',
-    content: `Just one yellow tulip stands in the small vase
-on the windowsill of this hospice room.
-Someone brought it—I don't remember who.
-
-It has been here for days now,
-longer than the doctors said,
-outlasting their predictions.
-
-Each morning I check: still here.
-Still yellow. Still reaching
-toward the gray February light.
-
-The petals have begun to thin,
-translucent as the skin
-of the hand I hold each afternoon.
-
-We are both watching the tulip now,
-my mother and I, neither speaking,
-both knowing what it means.
-
-When it finally drops its petals—
-six small yellow prayers
-released onto the windowsill—
-
-she closes her eyes and smiles.
-"There," she says. "Now I can go."
-As if she had been waiting for permission.
-
-As if the flower had been holding her here,
-its yellow persistence saying: not yet,
-not yet, not yet, and finally: yes.`
-  },
-  'escape': {
-    title: 'Escape',
-    publication: 'Three Grandparent Poems',
-    content: `While the grownups napped and dreamed
-their Sunday dreams of rest and silence,
-I slipped out the back door
-
-into the Indiana afternoon,
-past the garden and the chicken coop,
-toward the back forty and beyond.
-
-In the cornfield I was invisible,
-the stalks twice my height,
-leaves like green swords brushing my arms.
-
-I walked the rows as if they were streets
-in some great city I would someday find,
-some place where I would belong.
-
-At the field's edge, woods began—
-a tangle of vines and fallen logs,
-of mushrooms and mysteries.
-
-I had no destination. That was the point.
-I had only the afternoon and my own two feet
-and the knowledge that no one knew where I was.
-
-That was freedom: not the absence of rules
-but the presence of space,
-room enough to become someone.
-
-By suppertime I would return,
-my shoes muddy, my heart full,
-my secret intact.
-
-The grownups never asked where I had been.
-Perhaps they knew. Perhaps they too
-had once escaped into a summer afternoon
-
-and remembered that particular sweetness:
-how good it felt to be lost,
-how necessary to find your own way home.`
-  },
-  'grandma-delilah': {
-    title: 'Grandma Delilah and Her Lord Go for a Sunday Drive',
-    publication: 'Three Grandparent Poems',
-    content: `But I must not stay in my own story too long.
-This is about Grandma Delilah,
-who died the way she lived: in conversation.
-
-Every Sunday after church
-she would take a drive in her blue Pontiac,
-talking to the Lord as she went.
-
-Out past the edge of town,
-past the last gas station and the feed store,
-into the rolling hills of corn and soy.
-
-"Lord," she would say, "look at that sky.
-You outdid yourself today."
-And she would drive a little farther.
-
-"Lord, I'm worried about Marvin's back.
-You know how he works too hard.
-Maybe you could ease up on him a little."
-
-The corn responded to her passing,
-rustling like a congregation
-settling in for the sermon.
-
-On the day she died, they found her
-pulled over on a country road,
-her hands still on the wheel, her eyes open.
-
-Looking, I imagine, at something beautiful.
-Perhaps the Lord had finally said:
-"Delilah, look at THIS sky.
-
-I outdid myself today.
-Why don't you come see it closer?"
-And she had said yes, as she always did.
-
-The engine was still running.
-The radio was playing hymns.
-The corn in the fields stood at attention.`
-  },
-  'grandfather-disappears': {
-    title: 'Grandfather Disappears',
-    publication: 'Three Grandparent Poems',
-    content: `Grandfather has been lost to memory
-for three years now, a boat
-slipped from its mooring.
-
-He drifts in the nursing home,
-asking the same questions,
-telling the same stories.
-
-Each visit I watch him search
-for my name, my face, the word
-that means what I am to him.
-
-Sometimes it surfaces—"Granddaughter!"—
-and his whole face lights up
-with the joy of recognition.
-
-But more often now the word won't come.
-He holds my hand and pats it,
-saying, "Good, good. So good."
-
-I have learned to be content with this.
-I have learned that love doesn't need a name,
-that presence needs no explanation.
-
-Today I bring him photographs:
-his wedding day, my mother as a child,
-the house he built with his own hands.
-
-He looks at them politely,
-as if they were pictures of strangers,
-someone else's beautiful life.
-
-Then he turns to me and smiles.
-"I don't know who these people are," he says,
-"but I'm glad you came to visit."
-
-And I think: this is what remains
-when memory goes—not facts, not names,
-but the simple pleasure of company.
-
-The comfort of a hand to hold.
-The knowledge, deeper than words,
-that someone loves you.
-
-He has forgotten everything
-except how to be kind.
-Maybe that is enough. Maybe that is everything.`
-  },
-  'morning-prayer': {
-    title: 'Morning Prayer',
-    publication: 'Unpublished',
-    content: `I wake into a new day,
-surprised again to find myself here,
-still breathing, still curious.
-
-Lord, I have no idea what you're doing,
-but I trust it's something interesting.
-Count me in.`
-  },
-};
 
 interface PageProps {
   params: Promise<{ slug: string }>;
 }
 
 export async function generateStaticParams() {
-  return Object.keys(poems).map((slug) => ({ slug }));
+  return getAllPoems().map((poem) => ({ slug: poem.slug }));
 }
 
 export async function generateMetadata({ params }: PageProps) {
   const { slug } = await params;
-  const poem = poems[slug];
+  const poem = getPoemBySlug(slug);
 
   if (!poem) {
     return { title: 'Poem Not Found' };
@@ -333,36 +25,42 @@ export async function generateMetadata({ params }: PageProps) {
 
   return {
     title: poem.title,
-    description: `"${poem.title}" by Cynthia Trenshaw${poem.publication ? ` - ${poem.publication}` : ''}`,
+    description: `"${poem.title}" by Cynthia Trenshaw${poem.publication ? ` — ${poem.publication}` : ''}`,
   };
 }
 
 export default async function PoemPage({ params }: PageProps) {
   const { slug } = await params;
-  const poem = poems[slug];
+  const poem = getPoemBySlug(slug);
 
   if (!poem) {
     notFound();
   }
 
+  const section = getSectionById(poem.sectionId);
+  const { prev, next } = getAdjacentPoems(slug);
+
   return (
     <div className="min-h-screen bg-white">
-      {/* Back link */}
+      {/* Section breadcrumb */}
       <div className="mx-auto max-w-3xl px-6 pt-8">
         <Link
-          href="/#poems"
+          href="/#contents"
-          className="inline-flex items-center gap-2 text-sm text-stone-500 hover:text-stone-800 transition-colors"
+          className="inline-flex items-center gap-2 text-xs uppercase tracking-[0.15em] text-stone-400 hover:text-stone-600 transition-colors"
         >
-          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          {section && (
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 19l-7-7 7-7" />
+            <>
-          </svg>
+              Section {section.number} &middot; {section.title}
-          Back to Poems
+            </>
+          )}
         </Link>
       </div>
 
       {/* Poem header */}
-      <header className="mx-auto max-w-3xl px-6 pt-12 pb-8 text-center border-b border-stone-100">
+      <header className="mx-auto max-w-3xl px-6 pt-8 pb-8 text-center border-b border-stone-100">
-        <h1 className="font-serif text-4xl md:text-5xl text-stone-800">{poem.title}</h1>
+        <h1 className="font-serif text-4xl md:text-5xl text-stone-800">
+          {poem.title}
+        </h1>
         {poem.dedication && (
           <p className="mt-4 text-stone-500 italic">{poem.dedication}</p>
         )}
@@ -379,24 +77,36 @@ export default async function PoemPage({ params }: PageProps) {
         </div>
       </article>
 
-      {/* Navigation to other poems */}
+      {/* Sequential navigation */}
       <footer className="mx-auto max-w-3xl px-6 pb-16">
-        <div className="pt-8 border-t border-stone-100">
+        <div className="poem-nav">
-          <p className="text-sm text-stone-400 text-center mb-6">More poems by Cynthia Trenshaw</p>
+          {prev ? (
-          <div className="flex flex-wrap justify-center gap-3">
+            <Link href={`/poems/${prev.slug}`}>
-            {Object.entries(poems)
+              <span className="nav-label">Previous poem</span>
-              .filter(([s]) => s !== slug)
+              <span className="nav-title">{prev.title}</span>
-              .slice(0, 4)
-              .map(([s, p]) => (
-                <Link
-                  key={s}
-                  href={`/poems/${s}`}
-                  className="text-sm text-stone-600 hover:text-stone-800 underline underline-offset-4 hover:no-underline"
-                >
-                  {p.title}
             </Link>
-              ))}
+          ) : (
+            <div />
+          )}
+          {next ? (
+            <Link href={`/poems/${next.slug}`} className="nav-next">
+              <span className="nav-label">Next poem</span>
+              <span className="nav-title">{next.title}</span>
+            </Link>
+          ) : (
+            <Link href="/essays/when-a-friend-dies" className="nav-next">
+              <span className="nav-label">Afterword</span>
+              <span className="nav-title">When A Friend Dies</span>
+            </Link>
+          )}
         </div>
+        <div className="mt-8 text-center">
+          <Link
+            href="/#contents"
+            className="text-sm text-stone-500 hover:text-stone-800 transition-colors underline underline-offset-4 hover:no-underline"
+          >
+            Return to Contents
+          </Link>
         </div>
       </footer>
     </div>