Final review template

app/create/final-review/page.tsx

@@ -1,25 +1,125 @@
 "use client";
 
+import { useState, useEffect } from "react";
 import { useMediaQuery } from "../../hooks/useMediaQuery";
 import HeaderLockup from "../../components/type/HeaderLockup";
+import RuleCard from "../../components/cards/RuleCard";
+import type { Category } from "../../components/cards/RuleCard/RuleCard.types";
+
+const TITLE = "Review your CommunityRule";
+const DESCRIPTION =
+  "Here's what other people will see. Make sure everything looks good before you finalize everything. Once the rule is finalized, you must use one of your decision-making mechanisms to edit it again.";
+
+const RULE_CARD_TITLE = "Mutual Aid Mondays";
+const RULE_CARD_DESCRIPTION =
+  "Mutual Aid Monday is a grassroots community in Denver, founded in November 2020 by Kelsang Virya, dedicated to supporting neighbors experiencing homelessness.";
+
+/** Static categories for final review (read-only display). */
+const FINAL_REVIEW_CATEGORIES: Category[] = [
+  {
+    name: "Values",
+    chipOptions: [
+      { id: "v1", label: "Consciousness", state: "unselected" },
+      { id: "v2", label: "Ecology", state: "unselected" },
+      { id: "v3", label: "Abundance", state: "unselected" },
+      { id: "v4", label: "Art", state: "unselected" },
+      { id: "v5", label: "Decisiveness", state: "unselected" },
+    ],
+  },
+  {
+    name: "Communication",
+    chipOptions: [{ id: "c1", label: "Signal", state: "unselected" }],
+  },
+  {
+    name: "Membership",
+    chipOptions: [
+      { id: "m1", label: "Open Admission", state: "unselected" },
+    ],
+  },
+  {
+    name: "Decision-making",
+    chipOptions: [
+      { id: "d1", label: "Lazy Consensus", state: "unselected" },
+      { id: "d2", label: "Modified Consensus", state: "unselected" },
+    ],
+  },
+  {
+    name: "Conflict management",
+    chipOptions: [
+      { id: "cf1", label: "Code of Conduct", state: "unselected" },
+      { id: "cf2", label: "Restorative Justice", state: "unselected" },
+    ],
+  },
+];
 
 /**
  * Final review step (right before completed).
- * Figma: 20907-212767
+ * Figma: 20907-212767 (full-size), 20976-220705 (small breakpoint).
  */
 export default function FinalReviewPage() {
+  const [isMounted, setIsMounted] = useState(false);
   const isMdOrLarger = useMediaQuery("(min-width: 640px)");
 
+  // Avoid flash: only use breakpoint after mount so SSR and first paint use same layout (desktop).
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: defer layout breakpoint until after mount to prevent flash
+    setIsMounted(true);
+  }, []);
+
+  const showDesktopLayout = !isMounted || isMdOrLarger;
+
+  if (showDesktopLayout) {
+    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-[var(--measures-spacing-1200,48px)]">
+          <div className="min-w-0 flex flex-col justify-center">
+            <HeaderLockup
+              title={TITLE}
+              description={DESCRIPTION}
+              justification="left"
+              size="L"
+            />
+          </div>
+          <div className="min-w-0 w-full flex flex-col items-stretch">
+            <RuleCard
+              title={RULE_CARD_TITLE}
+              description={RULE_CARD_DESCRIPTION}
+              size="L"
+              expanded={true}
+              backgroundColor="bg-[#c9fef9]"
+              logoUrl="/assets/Vector_MutualAid.svg"
+              logoAlt={RULE_CARD_TITLE}
+              categories={FINAL_REVIEW_CATEGORIES}
+              className="rounded-[24px] !max-w-full !w-full min-w-0"
+              onClick={() => {}}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   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]">
+    <div className="w-full flex flex-col items-center px-5 min-w-0">
+      <div className="flex flex-col gap-4 w-full max-w-[639px]">
         <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"}
+          title={TITLE}
+          description={DESCRIPTION}
+          justification="left"
+          size="M"
+        />
+        <RuleCard
+          title={RULE_CARD_TITLE}
+          description={RULE_CARD_DESCRIPTION}
+          size="L"
+          expanded={true}
+          backgroundColor="bg-[#c9fef9]"
+          logoUrl="/assets/Vector_MutualAid.svg"
+          logoAlt={RULE_CARD_TITLE}
+          categories={FINAL_REVIEW_CATEGORIES}
+          className="w-full rounded-[12px] p-4"
+          onClick={() => {}}
         />
-        {/* Content area: summary or checklist can be added per Figma */}
       </div>
     </div>
   );

app/create/layout.tsx

@@ -92,7 +92,9 @@ function CreateFlowLayoutContent({ children }: { children: ReactNode }) {
               className="md:!text-[14px] md:!leading-[16px] !text-[12px] !leading-[14px] !px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]"
               onClick={handleNext}
             >
-              Next
+              {currentStep === "final-review"
+                ? "Finalize CommunityRule"
+                : "Next"}
             </Button>
           ) : null
         }