Create use cases pages

app/components/sections/AskOrganizer/AskOrganizer.container.tsx

@@ -11,7 +11,7 @@ import type {
 } from "./AskOrganizer.types";
 
 const VARIANT_STYLES: Record<
-  "centered" | "left-aligned" | "compact" | "inverse",
+  AskOrganizerVariant,
   { container: string; buttonContainer: string }
 > = {
   centered: {
@@ -30,9 +30,13 @@ const VARIANT_STYLES: Record<
     container: "text-center",
     buttonContainer: "flex justify-center",
   },
+  "use-case-detail": {
+    container: "w-full text-center",
+    buttonContainer: "flex w-full justify-center",
+  },
 };
 
-/** Figma **Section/AskOrganizer** [18116:15960](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=18116-15960&m=dev) (`lg` shell + type + button). */
+/** Figma **Section/AskOrganizer** [18116:15960](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=18116-15960&m=dev) (`lg` shell + type + button). Use-case detail: [22015:42624](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22015-42624&m=dev). */
 const AskOrganizerContainer = memo<AskOrganizerProps>(
   ({
     title,
@@ -57,12 +61,16 @@ const AskOrganizerContainer = memo<AskOrganizerProps>(
     const sectionPadding =
       resolvedVariant === "compact"
         ? "py-[var(--spacing-scale-016)] px-[var(--spacing-scale-016)] md:py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-032)]"
-        : "py-[var(--spacing-scale-096)] px-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-064)]";
+        : resolvedVariant === "use-case-detail"
+          ? "w-full py-[var(--spacing-scale-096)] px-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-064)]"
+          : "py-[var(--spacing-scale-096)] px-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-064)]";
 
     const contentGap =
       resolvedVariant === "compact"
         ? "gap-[var(--spacing-scale-020)]"
-        : "gap-[var(--spacing-scale-040)]";
+        : resolvedVariant === "use-case-detail"
+          ? "gap-[var(--spacing-scale-040)]"
+          : "gap-[var(--spacing-scale-040)]";
 
     const labelledBy = title ? "ask-organizer-headline" : undefined;
 

app/components/sections/AskOrganizer/AskOrganizer.types.ts

@@ -4,7 +4,8 @@ export type AskOrganizerVariant =
   | "centered"
   | "left-aligned"
   | "compact"
-  | "inverse";
+  | "inverse"
+  | "use-case-detail";
 
 export interface AskOrganizerProps {
   title?: string;

app/components/sections/AskOrganizer/AskOrganizer.view.tsx

@@ -21,6 +21,13 @@ function AskOrganizerView({
 }: AskOrganizerViewProps) {
   const t = useTranslation();
   const ariaLabel = t("askOrganizer.ariaLabel");
+  const isUseCaseDetail = variant === "use-case-detail";
+  const lockupVariant =
+    variant === "inverse" || isUseCaseDetail ? "ask-inverse" : "ask";
+  const lockupAlignment =
+    variant === "left-aligned" ? "left" : "center";
+  const buttonPalette =
+    variant === "inverse" || isUseCaseDetail ? "inverse" : "default";
 
   return (
     <section
@@ -28,16 +35,18 @@ function AskOrganizerView({
       aria-labelledby={labelledBy}
       aria-label={labelledBy ? undefined : ariaLabel}
       tabIndex={-1}
-      data-figma-node="18116-15960"
+      data-figma-node={isUseCaseDetail ? "22015-42624" : "18116-15960"}
     >
-      <div className={`flex flex-col ${contentGap}`}>
+      <div
+        className={`mx-auto flex w-full min-w-[358px] max-w-[1280px] flex-col ${contentGap} ${isUseCaseDetail ? "items-center" : ""}`}
+      >
         {/* Content Lockup */}
         <ContentLockup
           title={title}
           subtitle={subtitle}
           description={description}
-          variant={variant === "inverse" ? "ask-inverse" : "ask"}
-          alignment={variant === "left-aligned" ? "left" : "center"}
+          variant={lockupVariant}
+          alignment={lockupAlignment}
           titleId={labelledBy}
         />
 
@@ -49,7 +58,7 @@ function AskOrganizerView({
             {...(buttonHref ? { href: buttonHref } : {})}
             size="large"
             buttonType="filled"
-            palette={variant === "inverse" ? "inverse" : "default"}
+            palette={buttonPalette}
             className="!px-[var(--spacing-scale-016)] !py-[var(--spacing-scale-012)]"
             onClick={onContactClick}
             ariaLabel={ariaLabel}