Implement use cases page

stories/sections/Groups.stories.js

@@ -0,0 +1,93 @@
+import Groups from "../../app/components/sections/Groups";
+
+const vectorIconSrc = [
+  "/assets/vector/worker-coop.svg",
+  "/assets/vector/mutual-aid.svg",
+  "/assets/vector/open-source.svg",
+  "/assets/vector/dao.svg",
+];
+
+const sampleItems = [
+  {
+    icon: (
+      <img
+        alt=""
+        aria-hidden
+        className="inline-block size-9 object-contain"
+        height={36}
+        src={vectorIconSrc[0]}
+        width={36}
+      />
+    ),
+    title: "Worker's cooperatives",
+    description:
+      "Employee-owned businesses often need to clarify how power is shared, decisions are made, and how processes operate within their organizations.",
+  },
+  {
+    icon: (
+      <img
+        alt=""
+        aria-hidden
+        className="inline-block size-9 object-contain"
+        height={36}
+        src={vectorIconSrc[1]}
+        width={36}
+      />
+    ),
+    title: "Mutual aid groups",
+    description:
+      "Mutual aid groups must define how resources are shared, decisions are made, and volunteer coordination operates within their organizations.",
+  },
+  {
+    icon: (
+      <img
+        alt=""
+        aria-hidden
+        className="inline-block size-9 object-contain"
+        height={36}
+        src={vectorIconSrc[2]}
+        width={36}
+      />
+    ),
+    title: "Open source projects",
+    description:
+      "Agree to how contributions are managed, technical decisions are made, and community participation operates within their development communities.",
+  },
+  {
+    icon: (
+      <img
+        alt=""
+        aria-hidden
+        className="inline-block size-9 object-contain"
+        height={36}
+        src={vectorIconSrc[3]}
+        width={36}
+      />
+    ),
+    title: "DAOs",
+    description:
+      "Document token-based voting process, proposal patterns, and how community governance operates within their blockchain ecosystems.",
+  },
+];
+
+export default {
+  title: "Components/Sections/Groups",
+  component: Groups,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Figma **Section** (**[22084-859062](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22084-859062&m=dev)**) — baseline stacked cards; **md+** `22084-859470` hairline grid. **`cards/Icon`** tiles (body **12px/16px** from **`lg`**).",
+      },
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  args: {
+    title: "Who is this for?",
+    items: sampleItems,
+  },
+};

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
-- **Four variants**: compact, standard, extended, and **statement** (Section/Quote yellow band, dual paragraphs)
+- **Four variants**: compact, standard, extended, and **statement** (Section/Quote yellow band; two paragraphs below \`lg\`, one paragraph from \`lg\` on /about and /use-cases — [21967-24638](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=21967-24638&m=dev))
 - **Responsive design**: Adapts across all breakpoints
 - **Error handling**: Graceful fallbacks for image loading failures
 - **Accessibility**: WCAG 2.1 AA compliant with proper ARIA labels
@@ -39,12 +39,11 @@ A responsive quote section component that displays inspirational governance quot
     },
     quote: {
       control: { type: "text" },
-      description:
-        "Main quote / first paragraph (for `statement`, pair with quoteSecondary)",
+      description: "Main quote — first statement paragraph",
     },
     quoteSecondary: {
       control: { type: "text" },
-      description: "Second paragraph when `variant` is `statement`",
+      description: "Second statement paragraph",
     },
     author: {
       control: { type: "text" },
@@ -129,7 +128,7 @@ export const AllVariants = {
   },
 };
 
-// Statement band (About page / Figma Section/Quote)
+// Statement band (Section/Quote — same layout as /about + /use-cases)
 export const StatementAbout = {
   args: {
     variant: "statement",

stories/sections/UseCasesOrgs.stories.js

@@ -0,0 +1,33 @@
+import UseCasesOrgs from "../../app/components/sections/UseCasesOrgs";
+import CaseStudy from "../../app/components/cards/CaseStudy";
+
+export default {
+  title: "Components/Sections/UseCasesOrgs",
+  component: UseCasesOrgs,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Figma **Orgs** ([21993-33687](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=21993-33687&m=dev)): **`CaseStudy`** row (**305×305**, **8px** gap, **24px** horizontal / **48px** bottom padding).",
+      },
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  render: () => (
+    <UseCasesOrgs>
+      <CaseStudy
+        surface="lavender"
+        imageAlt="Mutual Aid Colorado logo"
+      />
+      <CaseStudy surface="neutral" imageAlt="Food Not Bombs logo" />
+      <CaseStudy
+        surface="rose"
+        imageAlt="Boulder County Street Medics logo"
+      />
+    </UseCasesOrgs>
+  ),
+};