Review template

app/create/final-review/page.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useMediaQuery } from "../../hooks/useMediaQuery";
+import HeaderLockup from "../../components/type/HeaderLockup";
+
+/**
+ * Final review step (right before completed).
+ * Figma: 20907-212767
+ */
+export default function FinalReviewPage() {
+  const isMdOrLarger = useMediaQuery("(min-width: 640px)");
+
+  return (
+    <div className="w-full flex flex-col items-center px-[var(--spacing-measures-spacing-500,20px)] md:px-[64px]">
+      <div className="flex flex-col gap-[48px] items-center w-full max-w-[640px]">
+        <HeaderLockup
+          title="Review before submitting"
+          description="One last look at your CommunityRule before you complete. Submit when you're ready."
+          justification={isMdOrLarger ? "center" : "left"}
+          size={isMdOrLarger ? "L" : "M"}
+        />
+        {/* Content area: summary or checklist can be added per Figma */}
+      </div>
+    </div>
+  );
+}

app/create/review/page.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import HeaderLockup from "../../components/type/HeaderLockup";
+import RuleCard from "../../components/cards/RuleCard";
+
+/** Mid-flow review step (after upload, before compact-cards). */
+export default function ReviewPage() {
+  return (
+    <div className="w-full max-w-[1280px] shrink-0 px-5 md:px-16">
+      <div className="flex w-full flex-col gap-4 min-w-0 sm:grid sm:grid-cols-2 sm:gap-12">
+        <div className="min-w-0">
+          <HeaderLockup
+            title="Your community is added - congrats!"
+            description="In the next section, we'll go through membership, decision-making, conflict resolution, and community values and create a custom operating manual for your organization based on the specifics you just shared."
+            justification="left"
+            size="L"
+          />
+        </div>
+        <div className="min-w-0 w-full">
+          <RuleCard
+            title="Mutual Aid Mondays"
+            description="Mutual Aid Monday is a grassroots community in Denver, founded in November 2020 by Kelsang Virya, dedicated to supporting neighbors experiencing homelessness."
+            size="L"
+            expanded={false}
+            backgroundColor="bg-[#c9fef9]"
+            logoUrl="/assets/Vector_MutualAid.svg"
+            logoAlt="Mutual Aid Mondays"
+            className="rounded-[16px]"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

stories/pages/ReviewPage.stories.js

@@ -0,0 +1,39 @@
+import ReviewPage from "../../app/create/review/page";
+
+export default {
+  title: "Pages/Create Flow/Review",
+  component: ReviewPage,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Mid-flow review step (after upload). 640px+: HeaderLockup left (L), RuleCard right (L, collapsed). Below 640px: single column with HeaderLockup M and RuleCard M. Figma: 19688-13891, 19706-12120.",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-screen bg-black flex items-center justify-center">
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ["autodocs"],
+};
+
+export const Desktop = {
+  parameters: {
+    viewport: {
+      defaultViewport: "desktop",
+    },
+  },
+};
+
+export const Mobile = {
+  parameters: {
+    viewport: {
+      defaultViewport: "mobile1",
+    },
+  },
+};

tests/components/ReviewPage.test.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { renderWithProviders as render, screen } from "../utils/test-utils";
+import "@testing-library/jest-dom/vitest";
+import ReviewPage from "../../app/create/review/page";
+
+describe("ReviewPage", () => {
+  it("renders without crashing", () => {
+    render(<ReviewPage />);
+    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
+  });
+
+  it("renders HeaderLockup with expected title", () => {
+    render(<ReviewPage />);
+    expect(
+      screen.getByRole("heading", { name: "Your community is added - congrats!" }),
+    ).toBeInTheDocument();
+  });
+
+  it("renders HeaderLockup with expected description", () => {
+    render(<ReviewPage />);
+    expect(
+      screen.getByText(
+        /In the next section, we'll go through membership, decision-making, conflict resolution, and community values and create a custom operating manual for your organization based on the specifics you just shared./i,
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("renders RuleCard with title", () => {
+    render(<ReviewPage />);
+    expect(screen.getByText("Mutual Aid Mondays")).toBeInTheDocument();
+  });
+
+  it("renders RuleCard with description", () => {
+    render(<ReviewPage />);
+    expect(
+      screen.getByText(
+        /Mutual Aid Monday is a grassroots community in Denver, founded in November 2020 by Kelsang Virya, dedicated to supporting neighbors experiencing homelessness./i,
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("renders RuleCard as a button (card is interactive)", () => {
+    render(<ReviewPage />);
+    const buttons = screen.getAllByRole("button");
+    expect(buttons.length).toBeGreaterThanOrEqual(1);
+    expect(buttons.some((el) => el.textContent?.includes("Mutual Aid Mondays"))).toBe(true);
+  });
+});