Create flow UX updates

app/create/review/page.tsx

@@ -1,34 +1,40 @@
 "use client";
 
-import HeaderLockup from "../../components/type/HeaderLockup";
 import RuleCard from "../../components/cards/RuleCard";
+import { useTranslation } from "../../contexts/MessagesContext";
+import { CreateFlowHeaderLockup } from "../components/CreateFlowHeaderLockup";
+import { CreateFlowStepShell } from "../components/CreateFlowStepShell";
 
 /** Mid-flow review step (after upload, before cards). */
 export default function ReviewPage() {
+  const t = useTranslation("create.review");
+
   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)]">
+    <CreateFlowStepShell
+      variant="wideGridLoosePadding"
+      contentTopBelowMd="space-1400"
+    >
+      <div className="flex w-full min-w-0 flex-col gap-4 md:grid md:grid-cols-2 md:gap-[var(--measures-spacing-1200,48px)]">
         <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."
+          <CreateFlowHeaderLockup
+            title={t("header.title")}
+            description={t("header.description")}
             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."
+            title={t("ruleCard.title")}
+            description={t("ruleCard.description")}
             size="L"
             expanded={false}
             backgroundColor="bg-[#c9fef9]"
             logoUrl="/assets/Vector_MutualAid.svg"
-            logoAlt="Mutual Aid Mondays"
+            logoAlt={t("ruleCard.logoAlt")}
             className="rounded-[16px]"
           />
         </div>
       </div>
-    </div>
+    </CreateFlowStepShell>
   );
 }