feat:UX and fix drinkkaart payment logic

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

@@ -1,23 +1,43 @@
+import { Link } from "@tanstack/react-router";
 import { useState } from "react";
 import { PerformerForm } from "@/components/registration/PerformerForm";
 import { SuccessScreen } from "@/components/registration/SuccessScreen";
 import { TypeSelector } from "@/components/registration/TypeSelector";
 import { WatcherForm } from "@/components/registration/WatcherForm";
+import { authClient } from "@/lib/auth-client";
 
 type RegistrationType = "performer" | "watcher";
 
+interface SuccessState {
+	token: string;
+	email: string;
+	name: string;
+}
+
 export default function EventRegistrationForm() {
+	const { data: session } = authClient.useSession();
 	const [selectedType, setSelectedType] = useState<RegistrationType | null>(
 		null,
 	);
-	const [successToken, setSuccessToken] = useState<string | null>(null);
+	const [successState, setSuccessState] = useState<SuccessState | null>(null);
 
-	if (successToken) {
+	const isLoggedIn = !!session?.user;
+	const user = session?.user as { name?: string; email?: string } | undefined;
+
+	// Split "Jan De Smet" → firstName="Jan", lastName="De Smet"
+	const nameParts = (user?.name ?? "").trim().split(/\s+/);
+	const prefillFirstName = nameParts[0] ?? "";
+	const prefillLastName = nameParts.slice(1).join(" ");
+	const prefillEmail = user?.email ?? "";
+
+	if (successState) {
 		return (
 			<SuccessScreen
-				token={successToken}
+				token={successState.token}
+				email={successState.email}
+				name={successState.name}
 				onReset={() => {
-					setSuccessToken(null);
+					setSuccessState(null);
 					setSelectedType(null);
 				}}
 			/>
@@ -33,21 +53,62 @@ export default function EventRegistrationForm() {
 				<h2 className="mb-2 font-['Intro',sans-serif] text-3xl text-white md:text-4xl">
 					Schrijf je nu in!
 				</h2>
-				<p className="mb-12 max-w-3xl text-lg text-white/80 md:text-xl">
+				<p className="mb-8 max-w-3xl text-lg text-white/80 md:text-xl">
 					Doe je mee of kom je kijken? Kies je rol en vul het formulier in.
 				</p>
 
+				{/* Login nudge — shown only to guests */}
+				{!isLoggedIn && (
+					<div className="mb-10 flex flex-col gap-3 rounded-lg border border-[#52979b]/40 bg-[#52979b]/10 px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
+						<p className="text-sm text-white/80">
+							<span className="mr-1 font-semibold text-teal-300">
+								Al een account?
+							</span>
+							Log in om je gegevens automatisch in te vullen en je Drinkkaart
+							direct te activeren na registratie.
+						</p>
+						<div className="flex shrink-0 items-center gap-3 text-sm">
+							<Link
+								to="/login"
+								className="font-medium text-teal-300 underline-offset-2 transition-colors hover:underline"
+							>
+								Inloggen
+							</Link>
+							<span className="text-white/30">·</span>
+							<Link
+								to="/login"
+								search={{ signup: "1" }}
+								className="text-white/60 transition-colors hover:text-white"
+							>
+								Nog geen account? Aanmaken
+							</Link>
+						</div>
+					</div>
+				)}
+
 				{!selectedType && <TypeSelector onSelect={setSelectedType} />}
 
 				{selectedType === "performer" && (
 					<PerformerForm
 						onBack={() => setSelectedType(null)}
-						onSuccess={setSuccessToken}
+						onSuccess={(token, email, name) =>
+							setSuccessState({ token, email, name })
+						}
+						prefillFirstName={prefillFirstName}
+						prefillLastName={prefillLastName}
+						prefillEmail={prefillEmail}
+						isLoggedIn={isLoggedIn}
 					/>
 				)}
 
 				{selectedType === "watcher" && (
-					<WatcherForm onBack={() => setSelectedType(null)} />
+					<WatcherForm
+						onBack={() => setSelectedType(null)}
+						prefillFirstName={prefillFirstName}
+						prefillLastName={prefillLastName}
+						prefillEmail={prefillEmail}
+						isLoggedIn={isLoggedIn}
+					/>
 				)}
 			</div>
 		</section>

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

@@ -31,21 +31,21 @@ export default function Footer() {
 					Waar creativiteit tot leven komt
 				</p>
 
-				<div className="flex items-center justify-center gap-8 text-sm text-white/70">
+				<div className="flex flex-col items-center justify-center gap-2 text-sm text-white/70 md:flex-row md:gap-8">
 					<a
 						href="/privacy"
 						className="link-hover transition-colors hover:text-white"
 					>
 						Privacy Beleid
 					</a>
-					<span className="text-white/40">|</span>
+					<span className="hidden text-white/40 md:inline">|</span>
 					<a
 						href="/terms"
 						className="link-hover transition-colors hover:text-white"
 					>
 						Algemene Voorwaarden
 					</a>
-					<span className="text-white/40">|</span>
+					<span className="hidden text-white/40 md:inline">|</span>
 					<a
 						href="/contact"
 						className="link-hover transition-colors hover:text-white"
@@ -54,7 +54,7 @@ export default function Footer() {
 					</a>
 					{!isLoading && isAdmin && (
 						<>
-							<span className="text-white/40">|</span>
+							<span className="hidden text-white/40 md:inline">|</span>
 							<Link
 								to="/admin"
 								className="link-hover transition-colors hover:text-white"

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

@@ -88,9 +88,15 @@ export default function Info() {
 					</div>
 
 					{/* Main Title */}
-					<h2 className="font-['Intro',sans-serif] font-black text-6xl text-white uppercase tracking-tight md:text-8xl lg:text-9xl">
+					<h2
+						className="font-['Intro',sans-serif] font-black text-white uppercase tracking-tight"
+						style={{ fontSize: "clamp(1rem, 8vw + 1rem, 8rem)" }}
+					>
 						Ongedesemd
-						<span className="block text-5xl md:text-7xl lg:text-8xl">
+						<span
+							className="block"
+							style={{ fontSize: "clamp(1rem, 6vw + 1rem, 6rem)" }}
+						>
 							Brood?!
 						</span>
 					</h2>
@@ -110,8 +116,16 @@ export default function Info() {
 			</div>
 
 			{/* Content Section */}
-			<div className="w-full px-12 py-16">
-				<div className="mx-auto flex w-full max-w-6xl flex-1 flex-col justify-center gap-16">
+			<div className="relative w-full px-12 py-16">
+				{/* Background texture */}
+				<div
+					className="pointer-events-none absolute inset-0 opacity-10"
+					style={{
+						backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
+					}}
+				/>
+
+				<div className="relative mx-auto flex w-full max-w-6xl flex-1 flex-col justify-center gap-16">
 					{/* Ongedesemd Brood Explanation - Full Width Special Treatment */}
 					<div className="relative flex flex-col gap-6 rounded-2xl border-2 border-white/20 bg-white/5 p-8 md:p-12">
 						<div className="absolute top-0 -left-4 h-full w-1 bg-gradient-to-b from-white/0 via-white/60 to-white/0" />