Implement use cases page

tests/components/sections/Groups.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import Groups from "../../../app/components/sections/Groups";
+
+describe("Groups", () => {
+  it("renders a static icon tile grid", () => {
+    const { container } = render(
+      <Groups
+        title="Who is this for?"
+        items={[
+          {
+            icon: <span data-testid="ico-a">a</span>,
+            title: "One",
+            description: "First description text.",
+          },
+          {
+            icon: <span data-testid="ico-b">b</span>,
+            title: "Two",
+            description: "Second description text.",
+          },
+          {
+            icon: <span data-testid="ico-c">c</span>,
+            title: "Three",
+            description: "Third description text.",
+          },
+          {
+            icon: <span data-testid="ico-d">d</span>,
+            title: "Four",
+            description: "Fourth description text.",
+          },
+        ]}
+      />,
+    );
+
+    expect(
+      screen.getByRole("heading", { level: 2, name: "Who is this for?" }),
+    ).toBeInTheDocument();
+    expect(screen.getAllByRole("article")).toHaveLength(4);
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    expect(
+      container.querySelector('[data-figma-node="22085-860411"]'),
+    ).toBeTruthy();
+  });
+});

tests/components/sections/UseCasesOrgs.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import UseCasesOrgs from "../../../app/components/sections/UseCasesOrgs";
+
+describe("UseCasesOrgs", () => {
+  it("renders children", () => {
+    const { container } = render(
+      <UseCasesOrgs>
+        <div>Child A</div>
+        <div>Child B</div>
+      </UseCasesOrgs>,
+    );
+
+    expect(screen.getByText("Child A")).toBeInTheDocument();
+    expect(screen.getByText("Child B")).toBeInTheDocument();
+    expect(
+      container.querySelector('[data-figma-node="21993-33687"]'),
+    ).toBeTruthy();
+  });
+});