feat: hoe inschrijven
This commit is contained in:
@@ -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 ? (
|
||||
<CountdownBanner />
|
||||
) : (
|
||||
<>
|
||||
{/* 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={(token, email, name) =>
|
||||
setSuccessState({ token, email, name })
|
||||
}
|
||||
prefillFirstName={prefillFirstName}
|
||||
prefillLastName={prefillLastName}
|
||||
prefillEmail={prefillEmail}
|
||||
isLoggedIn={isLoggedIn}
|
||||
/>
|
||||
)}
|
||||
{selectedType === "watcher" && (
|
||||
<WatcherForm
|
||||
onBack={() => setSelectedType(null)}
|
||||
prefillFirstName={prefillFirstName}
|
||||
prefillLastName={prefillLastName}
|
||||
prefillEmail={prefillEmail}
|
||||
isLoggedIn={isLoggedIn}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
{/* 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={(token, email, name) =>
|
||||
setSuccessState({ token, email, name })
|
||||
}
|
||||
prefillFirstName={prefillFirstName}
|
||||
prefillLastName={prefillLastName}
|
||||
prefillEmail={prefillEmail}
|
||||
isLoggedIn={isLoggedIn}
|
||||
/>
|
||||
)}
|
||||
{selectedType === "watcher" && (
|
||||
<WatcherForm
|
||||
onBack={() => setSelectedType(null)}
|
||||
prefillFirstName={prefillFirstName}
|
||||
prefillLastName={prefillLastName}
|
||||
prefillEmail={prefillEmail}
|
||||
isLoggedIn={isLoggedIn}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
75
apps/web/src/components/homepage/HoeInschrijven.tsx
Normal file
75
apps/web/src/components/homepage/HoeInschrijven.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user