webpage start

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

@@ -0,0 +1,115 @@
+import { Camera, Drama, Mic2, Music, Palette, PenTool } 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.",
+		trajectory: "Muziek Traject",
+		color: "#d82560",
+	},
+	{
+		icon: Drama,
+		title: "Theater",
+		description:
+			"Monologen, sketches, improvisatie of mime. Het podium is van jou — breng karakters tot leven en vertel verhalen die raken.",
+		trajectory: "Theater Traject",
+		color: "#52979b",
+	},
+	{
+		icon: Palette,
+		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",
+		description:
+			"Poëzie, spoken word, storytelling of rap. Laat je woorden dansen en raak het publiek met de kracht van taal.",
+		trajectory: "Woordkunst Traject",
+		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() {
+	return (
+		<section className="snap-section relative z-25 min-h-screen 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 font-['Intro',sans-serif] 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-3">
+					{artForms.map((art) => {
+						const IconComponent = art.icon;
+						return (
+							<div
+								key={art.title}
+								className="group relative overflow-hidden bg-white p-8 transition-all hover:-translate-y-2 hover:shadow-xl"
+							>
+								{/* Color bar at top */}
+								<div
+									className="absolute top-0 left-0 h-1 w-full transition-all group-hover:h-2"
+									style={{ backgroundColor: art.color }}
+								/>
+
+								<div className="mb-4 flex items-center gap-4">
+									<div
+										className="flex h-14 w-14 items-center justify-center"
+										style={{ backgroundColor: art.color }}
+									>
+										<IconComponent className="h-7 w-7 text-white" />
+									</div>
+									<h3 className="font-['Intro',sans-serif] text-2xl text-gray-900">
+										{art.title}
+									</h3>
+								</div>
+
+								<p className="mb-6 font-['Intro',sans-serif] 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-['Intro',sans-serif] 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">
+										→
+									</span>
+								</div>
+							</div>
+						);
+					})}
+				</div>
+			</div>
+		</section>
+	);
+}