feat: hoe inschrijven

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

@@ -47,6 +47,19 @@ export default function EventRegistrationForm() {
 		);
 	}
 
+	if (!isOpen) {
+		return (
+			<section
+				id="registration"
+				className="relative z-30 w-full bg-[#214e51]/96 px-6 py-16 md:px-12"
+			>
+				<div className="mx-auto w-full max-w-6xl">
+					<CountdownBanner />
+				</div>
+			</section>
+		);
+	}
+
 	return (
 		<section
 			id="registration"
@@ -63,61 +76,55 @@ export default function EventRegistrationForm() {
 					Doe je mee of kom je kijken? Kies je rol en vul het formulier in.
 				</p>
 
-				{!isOpen ? (
+				{/* Login nudge — shown only to guests */}
-					<CountdownBanner />
+				{!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">
-						{/* Login nudge — shown only to guests */}
+							<span className="mr-1 font-semibold text-teal-300">
-						{!isLoggedIn && (
+								Al een account?
-							<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">
+							</span>
-								<p className="text-sm text-white/80">
+							Log in om je gegevens automatisch in te vullen en je Drinkkaart
-									<span className="mr-1 font-semibold text-teal-300">
+							direct te activeren na registratie.
-										Al een account?
+						</p>
-									</span>
+						<div className="flex shrink-0 items-center gap-3 text-sm">
-									Log in om je gegevens automatisch in te vullen en je
+							<Link
-									Drinkkaart direct te activeren na registratie.
+								to="/login"
-								</p>
+								className="font-medium text-teal-300 underline-offset-2 transition-colors hover:underline"
-								<div className="flex shrink-0 items-center gap-3 text-sm">
+							>
-									<Link
+								Inloggen
-										to="/login"
+							</Link>
-										className="font-medium text-teal-300 underline-offset-2 transition-colors hover:underline"
+							<span className="text-white/30">·</span>
-									>
+							<Link
-										Inloggen
+								to="/login"
-									</Link>
+								search={{ signup: "1" }}
-									<span className="text-white/30">·</span>
+								className="text-white/60 transition-colors hover:text-white"
-									<Link
+							>
-										to="/login"
+								Nog geen account? Aanmaken
-										search={{ signup: "1" }}
+							</Link>
-										className="text-white/60 transition-colors hover:text-white"
+						</div>
-									>
+					</div>
-										Nog geen account? Aanmaken
+				)}
-									</Link>
+				{!selectedType && <TypeSelector onSelect={setSelectedType} />}
-								</div>
+				{selectedType === "performer" && (
-							</div>
+					<PerformerForm
-						)}
+						onBack={() => setSelectedType(null)}
-						{!selectedType && <TypeSelector onSelect={setSelectedType} />}
+						onSuccess={(token, email, name) =>
-						{selectedType === "performer" && (
+							setSuccessState({ token, email, name })
-							<PerformerForm
+						}
-								onBack={() => setSelectedType(null)}
+						prefillFirstName={prefillFirstName}
-								onSuccess={(token, email, name) =>
+						prefillLastName={prefillLastName}
-									setSuccessState({ token, email, name })
+						prefillEmail={prefillEmail}
-								}
+						isLoggedIn={isLoggedIn}
-								prefillFirstName={prefillFirstName}
+					/>
-								prefillLastName={prefillLastName}
+				)}
-								prefillEmail={prefillEmail}
+				{selectedType === "watcher" && (
-								isLoggedIn={isLoggedIn}
+					<WatcherForm
-							/>
+						onBack={() => setSelectedType(null)}
-						)}
+						prefillFirstName={prefillFirstName}
-						{selectedType === "watcher" && (
+						prefillLastName={prefillLastName}
-							<WatcherForm
+						prefillEmail={prefillEmail}
-								onBack={() => setSelectedType(null)}
+						isLoggedIn={isLoggedIn}
-								prefillFirstName={prefillFirstName}
+					/>
-								prefillLastName={prefillLastName}
-								prefillEmail={prefillEmail}
-								isLoggedIn={isLoggedIn}
-							/>
-						)}
-					</>
 				)}
 			</div>
 		</section>

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

@@ -0,0 +1,75 @@
+export default function HoeInschrijven() {
+	return (
+		<section className="relative z-25 w-full bg-[#f8f8f8] px-6 py-16 md:px-12">
+			<div className="mx-auto max-w-6xl">
+				<h2 className="mb-4 font-['Intro',sans-serif] text-4xl text-[#214e51] md:text-5xl">
+					Hoe schrijf ik mij in?
+				</h2>
+				<p className="mb-10 max-w-3xl text-[#214e51]/70 text-lg">
+					Inschrijven doe je eenvoudig via deze website zodra de inschrijvingen
+					openen.
+				</p>
+
+				{/* Step cards */}
+				<div className="grid gap-6 md:grid-cols-3">
+					{/* Step 1 */}
+					<div className="flex flex-col gap-3 rounded-2xl border border-[#214e51]/15 bg-white p-6 shadow-sm">
+						<div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#d82560] font-['Intro',sans-serif] font-bold text-lg text-white">
+							1
+						</div>
+						<h3 className="font-['Intro',sans-serif] text-[#214e51] text-xl">
+							Kies je rol
+						</h3>
+						<p className="text-[#214e51]/70 text-base leading-relaxed">
+							Registreer je als{" "}
+							<strong className="text-[#214e51]">artiest</strong> als je wil
+							optreden, of als{" "}
+							<strong className="text-[#214e51]">bezoeker</strong> als je wil
+							komen kijken. Je kunt ook aangeven met hoeveel mensen je komt.
+						</p>
+					</div>
+
+					{/* Step 2 */}
+					<div className="flex flex-col gap-3 rounded-2xl border border-[#214e51]/15 bg-white p-6 shadow-sm">
+						<div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#d82560] font-['Intro',sans-serif] font-bold text-lg text-white">
+							2
+						</div>
+						<h3 className="font-['Intro',sans-serif] text-[#214e51] text-xl">
+							Bevestig je plaats
+						</h3>
+						<p className="text-[#214e51]/70 text-base leading-relaxed">
+							We vragen een bijdrage van{" "}
+							<strong className="text-[#214e51]">€5 per inschrijving</strong> en{" "}
+							<strong className="text-[#214e51]">€2 per extra persoon</strong>{" "}
+							die je meebrengt.
+						</p>
+					</div>
+
+					{/* Step 3 */}
+					<div className="flex flex-col gap-3 rounded-2xl border border-[#214e51]/15 bg-white p-6 shadow-sm">
+						<div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#d82560] font-['Intro',sans-serif] font-bold text-lg text-white">
+							3
+						</div>
+						<h3 className="font-['Intro',sans-serif] text-[#214e51] text-xl">
+							Geniet van de avond
+						</h3>
+						<p className="text-[#214e51]/70 text-base leading-relaxed">
+							Je bijdrage gaat{" "}
+							<strong className="text-[#214e51]">niet verloren</strong> — het
+							wordt volledig op{" "}
+							<strong className="text-[#214e51]">je drankkaart</strong> gezet.
+							Zo kun je tijdens de avond iets drinken of een snack nemen.
+						</p>
+					</div>
+				</div>
+
+				{/* Bottom note */}
+				<p className="mt-8 max-w-3xl text-[#214e51]/60 text-base leading-relaxed">
+					Zo zorgen we ervoor dat iedereen die zich inschrijft ook echt een
+					plaats heeft — en dat we samen kunnen genieten van een gezellige,
+					inspirerende avond vol muziek, poëzie en andere kunst.
+				</p>
+			</div>
+		</section>
+	);
+}

apps/web/src/routes/index.tsx

@@ -1,9 +1,8 @@
 import { createFileRoute } from "@tanstack/react-router";
-
-import ArtForms from "@/components/homepage/ArtForms";
 import EventRegistrationForm from "@/components/homepage/EventRegistrationForm";
 import Footer from "@/components/homepage/Footer";
 import Hero from "@/components/homepage/Hero";
+import HoeInschrijven from "@/components/homepage/HoeInschrijven";
 import Info from "@/components/homepage/Info";
 
 export const Route = createFileRoute("/")({
@@ -16,7 +15,7 @@ function HomePage() {
 			<main className="relative">
 				<Hero />
 				<Info />
-				<ArtForms />
+				<HoeInschrijven />
 				<EventRegistrationForm />
 				<Footer />
 			</main>