zias
4b0e132b03
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.
93 lines
2.6 KiB
TypeScript
93 lines
2.6 KiB
TypeScript
import { Drama, Music, Palette, PersonStanding } from "lucide-react";
|
|
|
|
const artForms = [
|
|
{
|
|
icon: Music,
|
|
title: "Muziek",
|
|
description:
|
|
"Van akoestische singer-songwriter sets tot volledige band optredens. Ontdek je sound en deel je muziek met een warm publiek.",
|
|
color: "#d82560",
|
|
},
|
|
{
|
|
icon: PersonStanding,
|
|
title: "Dans",
|
|
description:
|
|
"Contemporary, ballet, hiphop of freestyle. Beweging vertelt verhalen die woorden niet kunnen vangen.",
|
|
color: "#52979b",
|
|
},
|
|
{
|
|
icon: Palette,
|
|
title: "Beeldende Kunst",
|
|
description:
|
|
"Live schilderen, illustraties maken, of mixed media performances. Toon je creatieve proces terwijl het publiek toekijkt.",
|
|
color: "#d09035",
|
|
},
|
|
{
|
|
icon: Drama,
|
|
title: "Drama",
|
|
description:
|
|
"Monologen, sketches, improvisatie of mime. Het podium is van jou — breng karakters tot leven en vertel verhalen die raken.",
|
|
color: "#214e51",
|
|
},
|
|
];
|
|
|
|
export default function ArtForms() {
|
|
return (
|
|
<section className="relative z-25 w-full bg-[#f8f8f8] px-12 py-16">
|
|
<div className="mx-auto max-w-6xl">
|
|
<h2 className="mb-4 font-['Intro',sans-serif] text-5xl text-[#214e51]">
|
|
Kies Je Traject
|
|
</h2>
|
|
<p className="mb-12 max-w-2xl text-gray-600 text-xl">
|
|
Kunstenkamp biedt trajecten aan voor verschillende kunstvormen. Ontdek
|
|
waar jouw passie ligt en ontwikkel je talent onder begeleiding van
|
|
ervaringsdeskundigen.
|
|
</p>
|
|
|
|
<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="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"
|
|
style={{ backgroundColor: art.color }}
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
<div className="mb-4 flex items-center gap-4">
|
|
<div
|
|
className="flex h-14 w-14 items-center justify-center"
|
|
style={{ backgroundColor: art.color }}
|
|
aria-hidden="true"
|
|
>
|
|
<IconComponent
|
|
className="h-7 w-7 text-white"
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
<h3
|
|
id={`art-title-${index}`}
|
|
className="font-['Intro',sans-serif] text-2xl text-gray-900"
|
|
>
|
|
{art.title}
|
|
</h3>
|
|
</div>
|
|
|
|
<p className="mb-6 text-gray-600 leading-relaxed">
|
|
{art.description}
|
|
</p>
|
|
</article>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|