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

feat: add registration management with token-based access

Browse Source 
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.
This commit is contained in:
ッ
2026-03-02 22:27:21 +01:00
parent 37d9a415eb
commit 4b0e132b03
18 changed files with 2092 additions and 627 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
apps/web/src/components/homepage/ArtForms.tsx
View File

@@ -1,4 +1,4 @@
import { Camera, Drama, Mic2, Music, Palette, PenTool } from "lucide-react";
import { Drama, Music, Palette, PersonStanding } from "lucide-react";
const artForms = [
{
@@ -6,15 +6,13 @@ const artForms = [
title: "Muziek",
description:
"Van akoestische singer-songwriter sets tot volledige band optredens. Ontdek je sound en deel je muziek met een warm publiek.",
trajectory: "Muziek Traject",
color: "#d82560",
},
{
icon: Drama,
title: "Theater",
icon: PersonStanding,
title: "Dans",
description:
"Monologen, sketches, improvisatie of mime. Het podium is van jou — breng karakters tot leven en vertel verhalen die raken.",
trajectory: "Theater Traject",
"Contemporary, ballet, hiphop of freestyle. Beweging vertelt verhalen die woorden niet kunnen vangen.",
color: "#52979b",
},
{
@@ -22,33 +20,15 @@ const artForms = [
title: "Beeldende Kunst",
description:
"Live schilderen, illustraties maken, of mixed media performances. Toon je creatieve proces terwijl het publiek toekijkt.",
trajectory: "Beeldende Kunst Traject",
color: "#d09035",
},
{
icon: PenTool,
title: "Woordkunst",
icon: Drama,
title: "Drama",
description:
"Poëzie, spoken word, storytelling of rap. Laat je woorden dansen en raak het publiek met de kracht van taal.",
trajectory: "Woordkunst Traject",
"Monologen, sketches, improvisatie of mime. Het podium is van jou — breng karakters tot leven en vertel verhalen die raken.",
color: "#214e51",
},
{
icon: Camera,
title: "Dans",
description:
"Contemporary, ballet, hiphop of freestyle. Beweging vertelt verhalen die woorden niet kunnen vangen.",
trajectory: "Dans Traject",
color: "#d82560",
},
{
icon: Mic2,
title: "Comedy",
description:
"Stand-up, improv of cabaret. Maak het publiek aan het lachen met je unieke kijk op de wereld.",
trajectory: "Comedy Traject",
color: "#52979b",
},
];
export default function ArtForms() {
@@ -64,18 +44,18 @@ export default function ArtForms() {
ervaringsdeskundigen.
</p>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
{artForms.map((art, index) => {
const IconComponent = art.icon;
return (
<article
key={art.title}
className="group relative overflow-hidden bg-white p-8 transition-all focus-within:ring-2 focus-within:ring-[#214e51] focus-within:ring-offset-2 hover:-translate-y-2 hover:shadow-xl motion-reduce:transition-none"
className="relative overflow-hidden bg-white p-8"
aria-labelledby={`art-title-${index}`}
>
{/* Color bar at top */}
<div
className="absolute top-0 left-0 h-1 w-full transition-all group-hover:h-2 motion-reduce:transition-none"
className="absolute top-0 left-0 h-1 w-full"
style={{ backgroundColor: art.color }}
aria-hidden="true"
/>
@@ -102,21 +82,6 @@ export default function ArtForms() {
<p className="mb-6 text-gray-600 leading-relaxed">
{art.description}
</p>
<div className="flex items-center justify-between border-gray-100 border-t pt-4">
<span
className="font-medium text-sm"
style={{ color: art.color }}
>
{art.trajectory}
</span>
<span
className="text-2xl text-gray-300 transition-all group-hover:translate-x-1 group-hover:text-gray-600 motion-reduce:transition-none"
aria-hidden="true"
>
→
</span>
</div>
</article>
);
})}