Create use cases pages

stories/sections/AskOrganizer.stories.js

@@ -34,7 +34,7 @@ export default {
     },
     variant: {
       control: { type: "select" },
-      options: ["centered", "left-aligned", "compact", "inverse"],
+      options: ["centered", "left-aligned", "compact", "inverse", "use-case-detail"],
       description: "Layout variant for the component",
     },
     onContactClick: {
@@ -84,6 +84,26 @@ export const Inverse = {
   },
 };
 
+export const UseCaseDetail = {
+  args: {
+    title: "Still have questions?",
+    subtitle: "Get answers from an experienced organizer",
+    buttonText: "Ask an Organizer",
+    variant: "use-case-detail",
+    onContactClick: (data) => console.log("Contact clicked:", data),
+  },
+  decorators: [
+    (Story) => (
+      <div
+        className="min-h-[360px] w-full"
+        style={{ background: "var(--color-content-default-brand-lavender)" }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
 /** Legacy: CTA is a link (no inquiry modal). */
 export const LinkCta = {
   args: {

stories/sections/ContentBanner.stories.js

@@ -55,7 +55,11 @@ export default {
     },
     variant: {
       control: "select",
-      options: ["article", "guide"],
+      options: ["article", "guide", "useCase"],
+    },
+    rulePreview: {
+      control: "object",
+      description: "useCase variant only",
     },
   },
 };
@@ -67,6 +71,34 @@ export const Article = {
   },
 };
 
+const useCaseRulePreview = {
+  title: "Mutual Aid Colorado Operating Manual",
+  description:
+    "Shared values, resource distribution, volunteer shifts, and consensus-minus-one decisions.",
+  backgroundColor: "bg-[var(--color-surface-invert-brand-lavender)]",
+  iconPath: "assets/case-study/case-study-mutual-aid.svg",
+};
+
+export const UseCase = {
+  args: {
+    post: guidePost,
+    variant: "useCase",
+    rulePreview: useCaseRulePreview,
+    leadingImageAlt: "Mutual Aid Colorado logo",
+    contentTone: "onLight",
+  },
+  decorators: [
+    (Story) => (
+      <div
+        className="min-h-screen"
+        style={{ background: "var(--color-content-default-brand-lavender)" }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
 export const Guide = {
   args: {
     post: guidePost,