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,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,
+  },
+};