feat:add registration management with token-based access

Add management tokens to registrations allowing users to view, edit, and
cancel their registration via a unique URL. Implement email
notifications
for confirmations, updates, and cancellations using nodemailer. Simplify
art forms grid from 6 to 4 items and remove trajectory links. Translate
footer links to Dutch and fix matzah spelling in info section.

apps/web/src/components/homepage/EventRegistrationForm.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useMutation } from "@tanstack/react-query";
+
 import { useCallback, useState } from "react";
 import { toast } from "sonner";
 import { orpc } from "@/utils/orpc";
@@ -27,6 +28,7 @@ export default function EventRegistrationForm() {
 	});
 	const [errors, setErrors] = useState<FormErrors>({});
 	const [touched, setTouched] = useState<Record<string, boolean>>({});
+	const [successToken, setSuccessToken] = useState<string | null>(null);
 
 	const validateField = useCallback(
 		(
@@ -67,10 +69,10 @@ export default function EventRegistrationForm() {
 
 	const submitMutation = useMutation({
 		...orpc.submitRegistration.mutationOptions(),
-		onSuccess: () => {
-			toast.success(
-				"Registratie succesvol! We nemen binnenkort contact met je op.",
-			);
+		onSuccess: (data) => {
+			if (data.managementToken) {
+				setSuccessToken(data.managementToken);
+			}
 			setFormData({
 				firstName: "",
 				lastName: "",
@@ -89,6 +91,10 @@ export default function EventRegistrationForm() {
 		},
 	});
 
+	const handleReset = useCallback(() => {
+		setSuccessToken(null);
+	}, []);
+
 	const handleChange = useCallback(
 		(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
 			const { name, value, type } = e.target;
@@ -191,6 +197,76 @@ export default function EventRegistrationForm() {
 		return `${baseClasses} ${errorClasses}`;
 	};
 
+	const manageUrl = successToken
+		? `${typeof window !== "undefined" ? window.location.origin : ""}/manage/${successToken}`
+		: "";
+
+	if (successToken) {
+		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 flex w-full max-w-6xl flex-col">
+					<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 max-w-2xl text-lg text-white/80">
+							Je inschrijving is bevestigd. We sturen je zo dadelijk een
+							bevestigingsmail met alle details.
+						</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? Controleer je spam-map of 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={handleReset}
+								className="text-white/60 underline underline-offset-2 transition-colors hover:text-white"
+							>
+								Nog een inschrijving
+							</button>
+						</div>
+					</div>
+				</div>
+			</section>
+		);
+	}
+
 	return (
 		<section
 			id="registration"