zias/kunstenkamp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: hoe inschrijven

Browse Source
This commit is contained in:
ッ
2026-03-10 14:31:36 +01:00
parent cf47f25a4d
commit d180a33d6e
3 changed files with 139 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
apps/web/src/components/homepage/EventRegistrationForm.tsx
View File

@@ -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,10 +76,6 @@ 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">
@@ -74,8 +83,8 @@ export default function EventRegistrationForm() {
<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.
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
@@ -117,8 +126,6 @@ export default function EventRegistrationForm() {
isLoggedIn={isLoggedIn}
/>
)}
</>
)}
</div>
</section>
);

75
apps/web/src/components/homepage/HoeInschrijven.tsx Normal file
View 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>
);
}

5
apps/web/src/routes/index.tsx
View File

@@ -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>