Implement use cases page

tests/unit/QuoteBlock.test.jsx

@@ -223,7 +223,7 @@ describe("QuoteBlock Component", () => {
     ).not.toBeInTheDocument();
   });
 
-  test("statement variant renders dual paragraphs without attribution", () => {
+  test("statement variant uses one paragraph with responsive stack (Figma 21967-24638)", () => {
     render(
       <QuoteBlock
         variant="statement"
@@ -237,10 +237,14 @@ describe("QuoteBlock Component", () => {
       name: /first paragraph of the statement/i,
     });
     expect(region).toBeInTheDocument();
+    expect(region).toHaveAttribute("data-figma-node", "21967-24638");
     expect(
       screen.getByText("Second paragraph of the statement."),
     ).toBeInTheDocument();
     expect(screen.queryByRole("cite")).not.toBeInTheDocument();
+
+    const heading = region.querySelector("#about-test-quote-content");
+    expect(heading?.querySelectorAll("span.block.lg\\:inline").length).toBe(2);
   });
 
   test("statement variant logs when quoteSecondary is missing", () => {

tests/unit/RuleStack.test.jsx

@@ -74,6 +74,25 @@ describe("RuleStack Component", () => {
     expect(fetchMock.mock.calls.length).toBe(callsBefore);
   });
 
+  test("uses translationNamespace for section heading copy", () => {
+    render(
+      <RuleStack
+        initialGridEntries={homeFeatured}
+        translationNamespace="pages.useCases.ruleStack"
+      />,
+    );
+    const heading = screen.getByRole("heading", { level: 2 });
+    expect(heading.textContent).toMatch(
+      /Get Templates that help your community run smoothly/,
+    );
+  });
+
+  test("defaults to home rule stack heading copy when namespace omitted", () => {
+    render(<RuleStack initialGridEntries={homeFeatured} />);
+    const heading = screen.getByRole("heading", { level: 2 });
+    expect(heading.textContent).toMatch(/Popular templates/);
+  });
+
   test("renders four featured governance template cards on the home row", async () => {
     render(<RuleStack />);
     await waitForRuleStackCards();
@@ -166,6 +185,7 @@ describe("RuleStack Component", () => {
     await waitForRuleStackCards();
 
     const section = document.querySelector("section");
+    expect(section).toHaveAttribute("data-figma-node", "22085-860413");
     expect(section).toHaveClass("px-[20px]", "py-[32px]");
     expect(section?.className).toMatch(/min-\[640px\]:px-\[32px\]/);
     expect(section?.className).toMatch(/min-\[640px\]:py-\[48px\]/);
@@ -281,6 +301,12 @@ describe("RuleStack Component", () => {
     expect(circlesIcon?.className).toMatch(
       /min-\[640px\]:max-\[1023px\]:h-\[56px\]/,
     );
+    expect(circlesIcon?.className).toMatch(
+      /min-\[1024px\]:max-\[1439px\]:w-\[90px\]/,
+    );
+    expect(circlesIcon?.className).toMatch(
+      /min-\[1024px\]:max-\[1439px\]:h-\[90px\]/,
+    );
     expect(circlesIcon?.className).toMatch(/min-\[1440px\]:w-\[90px\]/);
     expect(circlesIcon?.className).toMatch(/min-\[1440px\]:h-\[90px\]/);
   });