feat:simplify dx and improve payment functions

apps/web/src/components/registration/SuccessScreen.tsx

@@ -0,0 +1,72 @@
+interface Props {
+	token: string;
+	onReset: () => void;
+}
+
+export function SuccessScreen({ token, onReset }: Props) {
+	const manageUrl =
+		typeof window !== "undefined"
+			? `${window.location.origin}/manage/${token}`
+			: `/manage/${token}`;
+
+	return (
+		<section
+			id="registration"
+			className="relative z-30 flex w-full items-center justify-center bg-[#214e51]/96 px-6 py-16 md:px-12"
+		>
+			<div className="mx-auto w-full max-w-3xl">
+				<div className="rounded-lg border border-white/20 bg-white/5 p-8 md:p-12">
+					<div className="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-green-500/20 text-green-400">
+						<svg
+							className="h-8 w-8"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							strokeWidth={2}
+							aria-label="Succes"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+					</div>
+					<h2 className="mb-4 font-['Intro',sans-serif] text-3xl text-white md:text-4xl">
+						Gelukt!
+					</h2>
+					<p className="mb-6 text-lg text-white/80">
+						Je inschrijving is bevestigd. We sturen je zo dadelijk een
+						bevestigingsmail.
+					</p>
+					<div className="mb-8 rounded-lg border border-white/10 bg-white/5 p-6">
+						<p className="mb-2 text-sm text-white/60">
+							Geen mail ontvangen? Gebruik deze link:
+						</p>
+						<a
+							href={manageUrl}
+							className="break-all text-sm text-white/80 underline underline-offset-2 hover:text-white"
+						>
+							{manageUrl}
+						</a>
+					</div>
+					<div className="flex flex-wrap items-center gap-4">
+						<a
+							href={manageUrl}
+							className="inline-flex items-center bg-white px-6 py-3 font-['Intro',sans-serif] text-[#214e51] text-lg transition-all hover:scale-105 hover:bg-gray-100"
+						>
+							Bekijk mijn inschrijving
+						</a>
+						<button
+							type="button"
+							onClick={onReset}
+							className="text-white/60 underline underline-offset-2 transition-colors hover:text-white"
+						>
+							Nog een inschrijving
+						</button>
+					</div>
+				</div>
+			</div>
+		</section>
+	);
+}