Show both books on About with matching covers and downloads.

The section mixed Structure Before Crisis art with the Community Rules booklet; pairing each title to its own cover and PDF, and cropping the Figma cover padding, keeps the two cards consistent.

Co-authored-by: Cursor <cursoragent@cursor.com>

tests/pages/about.test.tsx

@@ -0,0 +1,66 @@
+import { afterEach, describe, expect, test } from "vitest";
+import { within } from "@testing-library/react";
+import {
+  cleanup,
+  renderWithProviders as render,
+  screen,
+} from "../utils/test-utils";
+import AboutPage from "../../app/(marketing)/about/page";
+import {
+  ASSETS,
+  getAssetPath,
+  governanceBookletPath,
+  structureBeforeCrisisPath,
+} from "../../lib/assetUtils";
+import messages from "../../messages/en/index";
+
+afterEach(() => {
+  cleanup();
+});
+
+function bookSection(title: string) {
+  const heading = screen.getByRole("heading", { name: title });
+  const section = heading.closest("section");
+  expect(section).not.toBeNull();
+  return within(section as HTMLElement);
+}
+
+describe("AboutPage", () => {
+  test("pairs each book cover, heading, alt, and download with the same title", () => {
+    render(<AboutPage />);
+    const page = messages.pages.about;
+
+    const structureBeforeCrisis = bookSection(page.structureBeforeCrisis.title);
+    expect(
+      structureBeforeCrisis.getByText(page.structureBeforeCrisis.description),
+    ).toBeInTheDocument();
+    expect(
+      structureBeforeCrisis.getByRole("img", {
+        name: page.structureBeforeCrisis.imageAlt,
+      }),
+    ).toHaveAttribute(
+      "src",
+      getAssetPath(ASSETS.STRUCTURE_BEFORE_CRISIS_COVER),
+    );
+    expect(
+      structureBeforeCrisis.getByRole("link", {
+        name: page.structureBeforeCrisis.buttonText,
+      }),
+    ).toHaveAttribute("href", getAssetPath(structureBeforeCrisisPath()));
+
+    const communityRules = bookSection(page.communityRules.title);
+    expect(
+      communityRules.getByText(page.communityRules.description),
+    ).toBeInTheDocument();
+    expect(
+      communityRules.getByRole("img", {
+        name: page.communityRules.imageAlt,
+      }),
+    ).toHaveAttribute("src", getAssetPath(ASSETS.COMMUNITY_RULES_COVER));
+    expect(
+      communityRules.getByRole("link", {
+        name: page.communityRules.buttonText,
+      }),
+    ).toHaveAttribute("href", getAssetPath(governanceBookletPath()));
+  });
+});

tests/unit/lib/governanceBooklet.test.ts

@@ -1,18 +1,21 @@
-import { existsSync, readFileSync } from "node:fs";
+import { readFileSync } from "node:fs";
 import { join } from "node:path";
 import { describe, expect, it } from "vitest";
-import { getAssetPath, governanceBookletPath } from "../../../lib/assetUtils";
+import {
+  governanceBookletPath,
+  structureBeforeCrisisPath,
+} from "../../../lib/assetUtils";
 
-describe("governance booklet", () => {
-  it("ships a PDF at the About Book download path", () => {
-    const relative = governanceBookletPath();
-    expect(relative).toBe("assets/marketing/governance-booklet.pdf");
-    expect(getAssetPath(relative)).toBe("/assets/marketing/governance-booklet.pdf");
+const publicRoot = join(process.cwd(), "public");
 
-    const abs = join(process.cwd(), "public", relative);
-    expect(existsSync(abs)).toBe(true);
+function assertPdf(relativePath: string) {
+  const bytes = readFileSync(join(publicRoot, relativePath));
+  expect(bytes.subarray(0, 5).toString("ascii")).toBe("%PDF-");
+}
 
-    const header = readFileSync(abs).subarray(0, 5).toString("latin1");
-    expect(header).toBe("%PDF-");
+describe("marketing book PDFs", () => {
+  it("ships both About book downloads as PDFs", () => {
+    assertPdf(governanceBookletPath());
+    assertPdf(structureBeforeCrisisPath());
   });
 });