Implement use cases page

tests/components/type/PageHeader.test.tsx

@@ -0,0 +1,72 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import PageHeader from "../../../app/components/type/PageHeader";
+
+describe("PageHeader", () => {
+  it("renders title and description", () => {
+    render(
+      <PageHeader
+        title="Test title"
+        description="Test description body."
+        ctaText="Go"
+        ctaHref="/create"
+      />,
+    );
+
+    expect(
+      screen.getByRole("heading", { level: 1, name: "Test title" }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Test description body.")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "Go" })).toHaveAttribute(
+      "href",
+      "/create",
+    );
+  });
+
+  it("omits CTA when ctaText is absent", () => {
+    render(
+      <PageHeader title="Only title" description="Only description" />,
+    );
+
+    expect(screen.queryByRole("link")).not.toBeInTheDocument();
+  });
+
+  it("omits description when omitted and renders stacked centered title lines", () => {
+    render(
+      <PageHeader
+        title={["See how groups use", "CommunityRule"]}
+        headingAlign="center"
+        sectionMinimal
+      />,
+    );
+
+    const heading = screen.getByRole("heading", { level: 1 });
+    expect(heading).toHaveTextContent(/See how groups useCommunityRule/);
+    expect(
+      heading.querySelectorAll("span.block"),
+    ).toHaveLength(2);
+    expect(screen.queryByRole("paragraph")).not.toBeInTheDocument();
+    expect(screen.queryByRole("link")).not.toBeInTheDocument();
+  });
+
+  it("renders use-cases lg single-line title segments when singleLineTitleFromLg", () => {
+    render(
+      <PageHeader
+        title={["See how groups use", "CommunityRule"]}
+        headingAlign="center"
+        sectionMinimal
+        singleLineTitleFromLg
+      />,
+    );
+
+    const heading = screen.getByRole("heading", { level: 1 });
+    expect(heading).toHaveTextContent(/See how groups use CommunityRule/);
+    expect(
+      heading.querySelectorAll("span.block.lg\\:inline"),
+    ).toHaveLength(2);
+    expect(heading.closest("section")).toHaveAttribute(
+      "data-figma-node",
+      "21004-24825",
+    );
+  });
+});

tests/components/type/TripleStep.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import TripleStep from "../../../app/components/type/TripleStep";
+
+describe("TripleStep", () => {
+  it("renders heading, steps, and CTA", () => {
+    render(
+      <TripleStep
+        heading="Get organized"
+        steps={[
+          { title: "Step one", body: "Body one." },
+          { title: "Step two", body: "Body two." },
+          { title: "Step three", body: "Body three." },
+        ]}
+        ctaText="Create Rule"
+        ctaHref="/create"
+      />,
+    );
+
+    expect(
+      screen.getByRole("heading", { level: 2, name: "Get organized" }),
+    ).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-figma-node="22084-859405"]'),
+    ).toBeTruthy();
+    expect(screen.getByText("Step one")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "Create Rule" })).toHaveAttribute(
+      "href",
+      "/create",
+    );
+  });
+});

tests/components/type/TripleTextBlock.test.tsx

@@ -48,4 +48,45 @@ describe("TripleTextBlock", () => {
     );
     expect(screen.getByText("Only body.")).toBeInTheDocument();
   });
+
+  it("useCases preset renders persistent section heading, column h3 titles, dual paragraphs, outline CTA", () => {
+    const { container } = render(
+      <TripleTextBlock
+        layoutPreset="useCases"
+        title="Why Horizontal groups need CommunityRule"
+        ctaText="Setup your community"
+        ctaHref="/create"
+        columns={[
+          {
+            title: "Share Leadership",
+            description: "First paragraph.",
+            descriptionSecondary: "Second paragraph.",
+          },
+        ]}
+      />,
+    );
+
+    expect(
+      container.querySelector('[data-figma-node="22085-860414"]'),
+    ).toBeTruthy();
+
+    expect(
+      screen.getByRole("heading", {
+        level: 2,
+        name: "Why Horizontal groups need CommunityRule",
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", {
+        level: 3,
+        name: "Share Leadership",
+      }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("First paragraph.")).toBeInTheDocument();
+    expect(screen.getByText("Second paragraph.")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "Setup your community" })).toHaveAttribute(
+      "href",
+      "/create",
+    );
+  });
 });