Implement use cases page

2026-05-17 21:41:54 -06:00
parent b6b9b63608
commit 450da4d8ab
78 changed files with 1870 additions and 118 deletions
@@ -0,0 +1,43 @@
+import PageHeader from "../../app/components/type/PageHeader";
+
+export default {
+  title: "Components/Type/PageHeader",
+  component: PageHeader,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Figma **Type / PageHeader** ([21004-15902](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=21004-15902)). Marketing hero: title, body, optional inverse pill CTA.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  args: {
+    title: "Mutual aid groups should define structure before they need it",
+    description:
+      "Many mutual aid groups deprioritize guidelines in favor of immediate action, but setting up a few key agreements early protects the group's mission.",
+    ctaText: "Create CommunityRule",
+    ctaHref: "/create",
+  },
+};
+
+export const WithoutCta = {
+  args: {
+    title: "Headline only",
+    description: "Supporting copy without a call to action.",
+  },
+};
+
+/** Use cases header: stacked below `lg`; single line at **`lg`** ([21004-24825](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=21004-24825&m=dev)). */
+export const UseCasesMinimal = {
+  args: {
+    title: ["See how groups use", "CommunityRule"],
+    headingAlign: "center",
+    sectionMinimal: true,
+    singleLineTitleFromLg: true,
+  },
+};
@@ -0,0 +1,40 @@
+import TripleStep from "../../app/components/type/TripleStep";
+
+const sampleSteps = [
+  {
+    title: "Get your stakeholders together",
+    body: "If you're just getting started, you might begin with shared values, decision-making plan, and conflict resolution process.",
+  },
+  {
+    title: "Define how your group should operate",
+    body: "Involving everyone in shaping these agreements through group discussions, workshops, or a tool like CommunityRule can help build collective buy-in.",
+  },
+  {
+    title: "Have a durable impact",
+    body: "Consider treating guidelines as a living document that evolves with your group's needs.",
+  },
+];
+
+export default {
+  title: "Components/Type/TripleStep",
+  component: TripleStep,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Figma **Section / Triple Step** ([22084-859405](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22084-859405&m=dev)); type baseline ([22112-871527](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22112-871527)). Headline uses **Large/Heading** from **md**; steps use **18px/22px** Bricolage medium + **Small/Paragraph** (14/20); outline CTA; **md+** second column shows **`triple-step.svg`**.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  args: {
+    heading: "Get recommendations that will make organizing easier",
+    steps: sampleSteps,
+    ctaText: "Create Rule",
+    ctaHref: "/create",
+  },
+};