Invite people after review, then finish the Rule, with login before inviting and Invite your members on Profile.

app/(app)/create/components/MembershipInvitePreviewCard.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import type { MembershipInvitePreview } from "../../../../lib/create/membershipInvitePreview";
+
+export function MembershipInvitePreviewCard({
+  preview,
+  fromYourRuleLabel,
+  whoBelongsLabel,
+  joiningLabel,
+}: {
+  preview: MembershipInvitePreview;
+  fromYourRuleLabel: string;
+  whoBelongsLabel: string;
+  joiningLabel: string;
+}) {
+  return (
+    <div className="flex w-full min-w-0 flex-col gap-[var(--space-300)]">
+      <p className="text-small-label text-[var(--color-content-default-tertiary)]">
+        {fromYourRuleLabel}
+      </p>
+      <div className="flex w-full min-w-0 flex-col gap-[var(--space-200)] rounded-[var(--radius-400)] bg-[var(--color-surface-invert-brand-teal)] p-[var(--space-500)] text-[var(--color-content-invert-primary)]">
+        <p className="text-small-label text-[var(--color-content-invert-secondary)]">
+          {preview.categoryName}
+        </p>
+        <p className="font-bricolage text-x-small-heading">
+          {preview.title}
+        </p>
+        {preview.eligibility ? (
+          <p className="text-small-paragraph">
+            <span className="font-bold">{whoBelongsLabel}</span>
+            {` ${preview.eligibility}`}
+          </p>
+        ) : null}
+        {preview.joiningProcess ? (
+          <p className="text-small-paragraph">
+            <span className="font-bold">{joiningLabel}</span>
+            {` ${preview.joiningProcess}`}
+          </p>
+        ) : null}
+      </div>
+    </div>
+  );
+}