From 6c92f2d89610dd5f267dcf6f798b940e5adea773 Mon Sep 17 00:00:00 2001
From: "Olomana (multica agent)" <whitney.server@users.noreply.github.com>
Date: Fri, 6 Nov 2026 18:53:47 -0800
Subject: [PATCH] PWS-12: Match About page typography to recipe content

The About page is hand-written JSX, so it never picked up the recipe
styles, and its prose margins stacked with space-y and pt-6. Share the
recipe tab body classes through MARKDOWN_BODY_CLASSES and use them on
About, along with the recipe page header and column layout.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-authored-by: multica-agent <github@multica.ai>
---
 .claude/CLAUDE.md             |  1 +
 .claude/rules/architecture.md |  1 +
 app/about/page.tsx            | 43 ++++++++++++++++-------------------
 components/RecipeTabs.tsx     | 17 ++------------
 components/markdown-styles.ts | 18 +++++++++++++++
 5 files changed, 42 insertions(+), 38 deletions(-)
 create mode 100644 components/markdown-styles.ts

diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md
index 943f323..9592b49 100644
--- a/.claude/CLAUDE.md
+++ b/.claude/CLAUDE.md
@@ -39,6 +39,7 @@ components/
   RecipeGridCard.tsx          # Recipe grid card for listing page
   RecipeTabs.tsx              # Tabbed recipe sections (client)
   RecipeMarkdown.tsx          # Renders a parsed markdown tree to React (server)
+  markdown-styles.ts          # Shared body typography classes (recipe tabs, About page)
   RecipeCardPanel.tsx         # Recipe Card tab: card image previews (server)
   RecipeCardImage.tsx         # Card preview that enlarges to full screen on click (client)
   RecipePageLayout.tsx        # Recipe detail page layout (server component)
diff --git a/.claude/rules/architecture.md b/.claude/rules/architecture.md
index a5a83af..c02a829 100644
--- a/.claude/rules/architecture.md
+++ b/.claude/rules/architecture.md
@@ -18,4 +18,5 @@
 - Card fonts are read from `node_modules/@fontsource/*` at build time; satori needs woff/ttf (not woff2) and doesn't support variable fonts
 - `lib/recipes.ts` uses Node.js `fs` — server-side only; never import in client components
 - Build warnings about `<img>` vs `<Image />` in RecipeMarkdown and RecipeCardImage are intentional
+- The About page is hand-written JSX, not markdown; it shares body typography with recipe tabs through `MARKDOWN_BODY_CLASSES`. Change spacing there rather than per page. Class strings must live in `components/` or `app/` — Tailwind doesn't scan `lib/`
 - Never add redundant ARIA roles on semantic elements (`<main>`, `<aside>`, `<footer>` already carry implicit roles)
diff --git a/app/about/page.tsx b/app/about/page.tsx
index 1085d94..9695030 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from 'next';
+import { MARKDOWN_BODY_CLASSES } from '@/components/markdown-styles';
 
 export const metadata: Metadata = {
   title: 'About - PWS Recipes',
@@ -7,48 +8,44 @@ export const metadata: Metadata = {
 
 export default function AboutPage() {
   return (
-    <div className="max-w-3xl space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold text-gray-900 dark:text-white">
+    <article className="max-w-4xl mx-auto">
+      <header className="mb-8 space-y-4">
+        <h1 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white">
           About PWS Recipes
         </h1>
-        <p className="text-lg text-gray-600 dark:text-gray-400">
+        <p className="text-xl text-gray-600 dark:text-gray-400">
           Explore recipes in a user-friendly manner on a website that prioritizes your cooking experience over monetizing your clicks.
         </p>
-      </div>
+      </header>
 
-      <div className="prose dark:prose-invert max-w-none">
-        <section className="space-y-4">
-          <h2 className="text-2xl font-semibold text-gray-900 dark:text-white">
-            The PWS Mission
-          </h2>
-          <p className="text-gray-600 dark:text-gray-400">
+      <div className={`space-y-8 ${MARKDOWN_BODY_CLASSES}
+        [&_h2]:text-2xl [&_h2]:font-bold [&_h2]:text-gray-900 dark:[&_h2]:text-white [&_h2]:mb-3
+      `}>
+        <section>
+          <h2>The PWS Mission</h2>
+          <p>
             We believe that cooking should be accessible, enjoyable, and creative. Our goal while collecting and organizing these recipes is to make knowledge readily available and keep your cooking experience a cathartic and fun one.
           </p>
         </section>
 
-        <section className="space-y-4 pt-6">
-          <h2 className="text-2xl font-semibold text-gray-900 dark:text-white">
-            Content Structure
-          </h2>
-          <p className="text-gray-600 dark:text-gray-400">
+        <section>
+          <h2>Content Structure</h2>
+          <p>
             Each recipe is organized in its own folder with:
           </p>
-          <ul className="list-disc list-inside space-y-2 text-gray-600 dark:text-gray-400 ml-4">
+          <ul>
             <li>Markdown file with metadata frontmatter, recipe content, and instructions</li>
             <li>Assets folder for images and other media</li>
           </ul>
         </section>
 
-        <section className="space-y-4 pt-6">
-          <h2 className="text-2xl font-semibold text-gray-900 dark:text-white">
-            Technology
-          </h2>
-          <p className="text-gray-600 dark:text-gray-400">
+        <section>
+          <h2>Technology</h2>
+          <p>
             Built with modern web technologies including Next.js, React, TypeScript, and Tailwind CSS to ensure fast performance.
           </p>
         </section>
       </div>
-    </div>
+    </article>
   );
 }
diff --git a/components/RecipeTabs.tsx b/components/RecipeTabs.tsx
index 4b38ae3..8b75f1e 100644
--- a/components/RecipeTabs.tsx
+++ b/components/RecipeTabs.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
+import { MARKDOWN_BODY_CLASSES } from './markdown-styles';
 
 export interface RecipeTab {
   id: string;
@@ -65,21 +66,7 @@ export default function RecipeTabs({ tabs }: { tabs: RecipeTab[] }) {
           id={`tab-panel-${tab.id}`}
           aria-labelledby={`tab-${tab.id}`}
           hidden={tab.id !== activeId}
-          className="p-8 max-w-none text-base leading-relaxed
-            [&_h3]:text-lg [&_h3]:font-semibold [&_h3]:text-gray-900 dark:[&_h3]:text-white [&_h3]:mt-5 [&_h3]:mb-2
-            [&_p]:text-gray-700 dark:[&_p]:text-gray-300 [&_p]:my-2
-            [&_strong]:text-gray-900 dark:[&_strong]:text-white
-            [&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:space-y-2 [&_ol]:my-4
-            [&_ul]:list-disc [&_ul]:pl-6 [&_ul]:space-y-2 [&_ul]:my-4
-            [&_li]:text-gray-700 dark:[&_li]:text-gray-300
-            [&_li]:marker:text-gray-500 dark:[&_li]:marker:text-gray-400
-            [&_code]:text-gray-900 dark:[&_code]:text-gray-100 [&_code]:bg-gray-100 dark:[&_code]:bg-gray-800 [&_code]:rounded [&_code]:px-1.5 [&_code]:py-0.5
-            [&_pre]:bg-gray-100 dark:[&_pre]:bg-gray-900
-            [&_table]:border-collapse
-            [&_th]:border [&_th]:border-gray-300 dark:[&_th]:border-gray-600
-            [&_td]:border [&_td]:border-gray-300 dark:[&_td]:border-gray-600
-            [&_figure]:my-6
-            [&_figcaption]:mt-2 [&_figcaption]:text-center [&_figcaption]:text-sm [&_figcaption]:italic [&_figcaption]:text-gray-600 dark:[&_figcaption]:text-gray-400"
+          className={`p-8 ${MARKDOWN_BODY_CLASSES}`}
         >
           <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
             {tab.title}
diff --git a/components/markdown-styles.ts b/components/markdown-styles.ts
new file mode 100644
index 0000000..9ee831f
--- /dev/null
+++ b/components/markdown-styles.ts
@@ -0,0 +1,18 @@
+// Typography for markdown-style body content (recipe tabs, About page).
+// Lives in components/ because Tailwind only scans components/ and app/ for class names,
+// and outside RecipeTabs because a 'use client' module can't share values with server components.
+export const MARKDOWN_BODY_CLASSES = `max-w-none text-base leading-relaxed
+  [&_h3]:text-lg [&_h3]:font-semibold [&_h3]:text-gray-900 dark:[&_h3]:text-white [&_h3]:mt-5 [&_h3]:mb-2
+  [&_p]:text-gray-700 dark:[&_p]:text-gray-300 [&_p]:my-2
+  [&_strong]:text-gray-900 dark:[&_strong]:text-white
+  [&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:space-y-2 [&_ol]:my-4
+  [&_ul]:list-disc [&_ul]:pl-6 [&_ul]:space-y-2 [&_ul]:my-4
+  [&_li]:text-gray-700 dark:[&_li]:text-gray-300
+  [&_li]:marker:text-gray-500 dark:[&_li]:marker:text-gray-400
+  [&_code]:text-gray-900 dark:[&_code]:text-gray-100 [&_code]:bg-gray-100 dark:[&_code]:bg-gray-800 [&_code]:rounded [&_code]:px-1.5 [&_code]:py-0.5
+  [&_pre]:bg-gray-100 dark:[&_pre]:bg-gray-900
+  [&_table]:border-collapse
+  [&_th]:border [&_th]:border-gray-300 dark:[&_th]:border-gray-600
+  [&_td]:border [&_td]:border-gray-300 dark:[&_td]:border-gray-600
+  [&_figure]:my-6
+  [&_figcaption]:mt-2 [&_figcaption]:text-center [&_figcaption]:text-sm [&_figcaption]:italic [&_figcaption]:text-gray-600 dark:[&_figcaption]:text-gray-400`;