Implement about page

stories/layout/Accordion.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Accordion from "../../app/components/layout/Accordion";
+
+const meta: Meta<typeof Accordion> = {
+  title: "Components/Layout/Accordion",
+  component: Accordion,
+  parameters: {
+    layout: "padded",
+    backgrounds: { default: "dark" },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Accordion>;
+
+export const Default: Story = {
+  args: {
+    title: "What is CommunityRule, and who is it for?",
+    children: "CommunityRule helps groups write operating manuals.",
+    size: "l",
+  },
+};
+
+/** FAQ-style: small header below `lg`, medium at `lg` (Figma 22135-890258). */
+export const SmallWithMediumAtLg: Story = {
+  args: {
+    title: "What is CommunityRule, and who is it for?",
+    children: "CommunityRule helps groups write operating manuals.",
+    size: "s",
+    lgSize: "m",
+  },
+};

stories/sections/QuoteBlock.stories.js

@@ -11,7 +11,7 @@ export default {
 A responsive quote section component that displays inspirational governance quotes with author attribution and decorative geometric elements.
 
 ## Features
-- **Three variants**: compact, standard, and extended layouts
+- **Four variants**: compact, standard, extended, and **statement** (Section/Quote yellow band, dual paragraphs)
 - **Responsive design**: Adapts across all breakpoints
 - **Error handling**: Graceful fallbacks for image loading failures
 - **Accessibility**: WCAG 2.1 AA compliant with proper ARIA labels
@@ -34,12 +34,17 @@ A responsive quote section component that displays inspirational governance quot
   argTypes: {
     variant: {
       control: { type: "select" },
-      options: ["compact", "standard", "extended"],
+      options: ["compact", "standard", "extended", "statement"],
       description: "Layout variant for different use cases",
     },
     quote: {
       control: { type: "text" },
-      description: "The quote text to display",
+      description:
+        "Main quote / first paragraph (for `statement`, pair with quoteSecondary)",
+    },
+    quoteSecondary: {
+      control: { type: "text" },
+      description: "Second paragraph when `variant` is `statement`",
     },
     author: {
       control: { type: "text" },
@@ -124,7 +129,22 @@ export const AllVariants = {
   },
 };
 
-// Error state simulation
+// Statement band (About page / Figma Section/Quote)
+export const StatementAbout = {
+  args: {
+    variant: "statement",
+    id: "story-statement-quote",
+    quote:
+      "Too many of our communities adopt default governance practices that rely on unchecked authority without even basic democratic features.",
+    quoteSecondary:
+      "Community Rule helps communities establish better norms for decision-making, stewardship, and culture.",
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+};
+
+// Error state simulation (avatar load failure)
 export const ErrorState = {
   args: {
     variant: "standard",

stories/sections/Stats.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Stats from "../../app/components/sections/Stats";
+
+const meta: Meta<typeof Stats> = {
+  title: "Components/Sections/Stats",
+  component: Stats,
+  parameters: {
+    layout: "fullscreen",
+    backgrounds: { default: "dark" },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Stats>;
+
+export const Default: Story = {
+  args: {
+    titlePrefix: "From",
+    titleEmphasis: "projects",
+    titleSuffix: "to communities",
+    items: [
+      {
+        value: "420M+",
+        label: "open source projects",
+        asOf: "as of June 30, 2024",
+        shapeVariant: "yellow",
+      },
+      {
+        value: "27%",
+        label: "year over year growth in open source",
+        asOf: "as of June 30, 2024",
+        shapeVariant: "purple",
+      },
+    ],
+  },
+};

stories/type/AboutHeader.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import AboutHeader from "../../app/components/type/AboutHeader";
+
+const meta: Meta<typeof AboutHeader> = {
+  title: "Components/Type/AboutHeader",
+  component: AboutHeader,
+  parameters: {
+    layout: "fullscreen",
+    backgrounds: { default: "dark" },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AboutHeader>;
+
+export const Default: Story = {
+  args: {
+    segments: [
+      { type: "word", text: "CommunityRule" },
+      { type: "icon", icon: "arrow" },
+      { type: "word", text: "is" },
+      { type: "word", text: "a" },
+      { type: "word", text: "tool" },
+      { type: "word", text: "that" },
+      { type: "word", text: "helps" },
+      { type: "word", text: "groups" },
+      { type: "icon", icon: "about" },
+      { type: "word", text: "define" },
+      { type: "word", text: "who" },
+      { type: "word", text: "they" },
+      { type: "word", text: "want" },
+      { type: "word", text: "to" },
+      { type: "word", text: "be" },
+    ],
+  },
+};