webpage start

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

@@ -1,47 +1,45 @@
+const questions = [
+	{
+		question: "Wat is een open mic?",
+		answer:
+			"Een open mic is een podium waar iedereen zijn of haar talent kan tonen. Of je nu zingt, danst, een gedicht voordraagt of een instrument bespeelt — alle kunstvormen zijn welkom!",
+	},
+	{
+		question: "Wie mag er deelnemen?",
+		answer:
+			"Iedereen! Of je nu een doorgewinterde artiest bent of voor het eerst op een podium staat — de open mic night is er voor alle niveaus en ervaringen.",
+	},
+	{
+		question: "Hoelang mag mijn optreden duren?",
+		answer:
+			"Elke deelnemer krijgt 5-7 minuten podiumtijd. Zo houden we de avond dynamisch en krijgt iedereen een kans om te shinen.",
+	},
+	{
+		question: "Wat moet ik meenemen?",
+		answer:
+			"We zorgen voor geluidstechniek en een microfoon. Breng je eigen instrument mee als je dat nodig hebt. Vragen? Neem contact op via de registratie!",
+	},
+];
+
 export default function Info() {
 	return (
-		<section
-			style={{
-				minHeight: "100vh",
-				display: "flex",
-				flexDirection: "column",
-				justifyContent: "center",
-				alignItems: "center",
-			}}
-		>
-			<div>
-				<div>
-					<h3>Event Details</h3>
-					<p>
-						Date: TBD
-						<br />
-						Location: TBD
-						<br />
-						Duration: Full Day
-					</p>
-				</div>
-
-				<div>
-					<h3>What to Expect</h3>
-					<p>
-						Keynote speakers
-						<br />
-						Networking opportunities
-						<br />
-						Workshops & sessions
-					</p>
-				</div>
-
-				<div>
-					<h3>Who Should Attend</h3>
-					<p>
-						Industry professionals
-						<br />
-						Students & educators
-						<br />
-						Anyone interested
-					</p>
-				</div>
+		<section className="snap-section relative z-20 flex min-h-screen flex-col bg-[#d82560]/96 px-12 py-16">
+			<div className="mx-auto flex w-full max-w-6xl flex-1 flex-col justify-center gap-16">
+				{questions.map((item, idx) => (
+					<div
+						key={item.question}
+						className={`flex flex-col gap-4 ${
+							idx % 2 === 0 ? "items-start text-left" : "items-end text-right"
+						}`}
+					>
+						<h3 className="font-['Intro',sans-serif] text-4xl text-white">
+							{item.question}
+						</h3>
+						<p className="max-w-xl font-['Intro',sans-serif] text-white/80 text-xl">
+							{item.answer}
+						</p>
+					</div>
+				))}
 			</div>
 		</section>
 	);