Implement use cases page

app/components/sections/RuleStack/RuleStack.container.tsx

@@ -28,7 +28,7 @@ declare global {
 }
 
 const RuleStackContainer = memo<RuleStackProps>(
-  ({ className = "", initialGridEntries }) => {
+  ({ className = "", initialGridEntries, translationNamespace, twoColumnsFromMd }) => {
   const router = useRouter();
   const [gridEntries, setGridEntries] = useState<TemplateGridCardEntry[] | null>(
     () => initialGridEntries ?? null,
@@ -103,6 +103,8 @@ const RuleStackContainer = memo<RuleStackProps>(
       className={className}
       onTemplateClick={handleTemplateClick}
       gridEntries={gridEntries}
+      translationNamespace={translationNamespace ?? "pages.home.ruleStack"}
+      twoColumnsFromMd={twoColumnsFromMd}
     />
   );
   },

app/components/sections/RuleStack/RuleStack.types.ts

@@ -7,6 +7,15 @@ export interface RuleStackProps {
    * the client skips the `/api/templates` request.
    */
   initialGridEntries?: TemplateGridCardEntry[];
+  /**
+   * Prefix for `title`, `subtitle`, `button.seeAllTemplates` keys (default
+   * matches home: `pages.home.ruleStack`).
+   */
+  translationNamespace?: string;
+  /**
+   * Use **`md`** (640px) for two template columns — `/use-cases` Rule Stack.
+   */
+  twoColumnsFromMd?: boolean;
 }
 
 export interface RuleStackViewProps {
@@ -14,4 +23,6 @@ export interface RuleStackViewProps {
   onTemplateClick: (_slug: string) => void;
   /** `null` while loading curated templates from the API. */
   gridEntries: TemplateGridCardEntry[] | null;
+  translationNamespace: string;
+  twoColumnsFromMd?: boolean;
 }

app/components/sections/RuleStack/RuleStack.view.tsx

@@ -7,16 +7,20 @@ import { GovernanceTemplateGrid } from "../GovernanceTemplateGrid";
 import { GovernanceTemplateGridSkeleton } from "../GovernanceTemplateGrid/GovernanceTemplateGridSkeleton";
 import type { RuleStackViewProps } from "./RuleStack.types";
 
+/** Figma **Section / RuleStack** [22085:860413](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22085-860413&m=dev). */
 export function RuleStackView({
   className,
   onTemplateClick,
   gridEntries,
+  translationNamespace,
+  twoColumnsFromMd = false,
 }: RuleStackViewProps) {
-  const t = useTranslation("pages.home.ruleStack");
+  const t = useTranslation(translationNamespace);
   const buttonText = t("button.seeAllTemplates");
 
   return (
     <section
+      data-figma-node="22085-860413"
       className={`
         w-full bg-transparent flex flex-col
         px-[20px] py-[32px]
@@ -34,14 +38,19 @@ export function RuleStackView({
         title={t("title")}
         subtitle={t("subtitle")}
         variant="multi-line"
+        ruleStackDesktopTypeScale
       />
 
       {gridEntries === null ? (
-        <GovernanceTemplateGridSkeleton count={4} />
+        <GovernanceTemplateGridSkeleton
+          count={4}
+          twoColumnsFromMd={twoColumnsFromMd}
+        />
       ) : (
         <GovernanceTemplateGrid
           entries={gridEntries}
           onTemplateClick={onTemplateClick}
+          twoColumnsFromMd={twoColumnsFromMd}
         />
       )}