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>

stories/sections/Book.stories.js

@@ -1,5 +1,10 @@
 import Book from "../../app/components/sections/Book";
-import { getAssetPath, governanceBookletPath } from "../../lib/assetUtils";
+import {
+  ASSETS,
+  getAssetPath,
+  governanceBookletPath,
+  structureBeforeCrisisPath,
+} from "../../lib/assetUtils";
 import messages from "../../messages/en/pages/about.json";
 
 export default {
@@ -11,12 +16,27 @@ export default {
   },
 };
 
+const structureBeforeCrisis = messages.structureBeforeCrisis;
+const communityRules = messages.communityRules;
+
 export const Default = {
   args: {
-    title: messages.book.title,
-    description: messages.book.description,
-    buttonText: messages.book.buttonText,
-    buttonHref: getAssetPath(governanceBookletPath()),
-    imageAlt: messages.book.imageAlt,
+    title: structureBeforeCrisis.title,
+    description: structureBeforeCrisis.description,
+    buttonText: structureBeforeCrisis.buttonText,
+    buttonHref: getAssetPath(structureBeforeCrisisPath()),
+    imageSrc: getAssetPath(ASSETS.STRUCTURE_BEFORE_CRISIS_COVER),
+    imageAlt: structureBeforeCrisis.imageAlt,
+  },
+};
+
+export const CommunityRules = {
+  args: {
+    title: communityRules.title,
+    description: communityRules.description,
+    buttonText: communityRules.buttonText,
+    buttonHref: getAssetPath(governanceBookletPath()),
+    imageSrc: getAssetPath(ASSETS.COMMUNITY_RULES_COVER),
+    imageAlt: communityRules.imageAlt,
   },
 };