180 lines
6.3 KiB
TypeScript
180 lines
6.3 KiB
TypeScript
const faqQuestions = [
|
|
{
|
|
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: "Is er een minimumleeftijd?",
|
|
answer:
|
|
"Als je wilt optreden, moet je minimaal 15 jaar oud zijn & toestemming hebben van je ouders. Er is geen maximumleeftijd — iedereen is welkom!",
|
|
},
|
|
{
|
|
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 id="info" className="relative z-20 flex flex-col bg-[#d82560]/96">
|
|
{/* Hero Section - Ongedesemd Brood */}
|
|
<div className="relative w-full border-white/20 border-b-4">
|
|
{/* Background pattern */}
|
|
<div
|
|
className="absolute inset-0 opacity-10"
|
|
style={{
|
|
backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
|
|
}}
|
|
/>
|
|
|
|
<div className="relative flex flex-col items-center justify-center px-8 py-12 text-center">
|
|
{/* Decorative top element */}
|
|
<div className="mb-8 flex items-center gap-4">
|
|
<div className="h-px w-24 bg-gradient-to-r from-transparent via-white/60 to-transparent" />
|
|
<svg
|
|
className="h-14 w-20 text-white/80"
|
|
viewBox="0 0 80 56"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-label="Ongedesemd brood"
|
|
>
|
|
{/* Flat matzo cracker - slightly rounded rect */}
|
|
<rect
|
|
x="2"
|
|
y="8"
|
|
width="76"
|
|
height="40"
|
|
rx="4"
|
|
fill="currentColor"
|
|
/>
|
|
{/* Perforation dots - characteristic matzo pattern */}
|
|
{[16, 28, 40, 52, 64].map((x) =>
|
|
[18, 28, 38].map((y) => (
|
|
<circle
|
|
key={`${x}-${y}`}
|
|
cx={x}
|
|
cy={y}
|
|
r="2"
|
|
fill="rgba(0,0,0,0.25)"
|
|
/>
|
|
)),
|
|
)}
|
|
{/* Score lines */}
|
|
<line
|
|
x1="2"
|
|
y1="22"
|
|
x2="78"
|
|
y2="22"
|
|
stroke="rgba(0,0,0,0.15)"
|
|
strokeWidth="1"
|
|
/>
|
|
<line
|
|
x1="2"
|
|
y1="34"
|
|
x2="78"
|
|
y2="34"
|
|
stroke="rgba(0,0,0,0.15)"
|
|
strokeWidth="1"
|
|
/>
|
|
</svg>
|
|
<div className="h-px w-24 bg-gradient-to-r from-transparent via-white/60 to-transparent" />
|
|
</div>
|
|
|
|
{/* Main Title */}
|
|
<h2 className="font-['Intro',sans-serif] font-black text-6xl text-white uppercase tracking-tight md:text-8xl lg:text-9xl">
|
|
Ongedesemd
|
|
<span className="block text-5xl md:text-7xl lg:text-8xl">
|
|
Brood?!
|
|
</span>
|
|
</h2>
|
|
|
|
{/* Subtitle / Tagline */}
|
|
<p className="mt-8 max-w-3xl font-['Intro',sans-serif] font-light text-2xl text-white/90 uppercase tracking-widest md:text-3xl">
|
|
Kunst zonder franje · Puur vanuit het hart
|
|
</p>
|
|
|
|
{/* Decorative bottom element */}
|
|
<div className="mt-10 flex items-center gap-3">
|
|
<div className="h-2 w-2 rotate-45 bg-white/60" />
|
|
<div className="h-2 w-2 rotate-45 bg-white/40" />
|
|
<div className="h-2 w-2 rotate-45 bg-white/60" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content Section */}
|
|
<div className="w-full px-12 py-16">
|
|
<div className="mx-auto flex w-full max-w-6xl flex-1 flex-col justify-center gap-16">
|
|
{/* Ongedesemd Brood Explanation - Full Width Special Treatment */}
|
|
<div className="relative flex flex-col gap-6 rounded-2xl border-2 border-white/20 bg-white/5 p-8 md:p-12">
|
|
<div className="absolute top-0 -left-4 h-full w-1 bg-gradient-to-b from-white/0 via-white/60 to-white/0" />
|
|
|
|
<h3 className="font-['Intro',sans-serif] text-3xl text-white md:text-4xl">
|
|
Waarom deze naam?
|
|
</h3>
|
|
|
|
<div className="grid gap-8 md:grid-cols-2">
|
|
<div className="flex flex-col gap-4">
|
|
<p className="text-lg text-white/90 leading-relaxed">
|
|
In de Bijbel staat ongedesemd brood (ook wel{" "}
|
|
<em className="text-white">matzah</em> genoemd) symbool voor
|
|
eenvoud en zuiverheid, zonder de 'ballast' van
|
|
desem.
|
|
</p>
|
|
<p className="text-lg text-white/80 leading-relaxed">
|
|
Het werd gegeten tijdens Pesach als herinnering aan de
|
|
haastige uittocht uit Egypte, toen er geen tijd was om brood
|
|
te laten rijzen.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col gap-4">
|
|
<p className="text-lg text-white/80 leading-relaxed">
|
|
Bij ons staat het voor kunst zonder franje: geen ingewikkelde
|
|
regels of hoge drempels, gewoon authentieke expressie vanuit
|
|
het hart.
|
|
</p>
|
|
<div className="rounded-xl border border-white/30 bg-white/10 p-6">
|
|
<p className="font-['Intro',sans-serif] font-semibold text-white text-xl">
|
|
Kom vooral ook gewoon kijken!
|
|
</p>
|
|
<p className="mt-2 text-white/80">
|
|
Je hoeft absoluut niet te performen om te genieten van een
|
|
inspirerende avond vol muziek, poëzie en andere kunst.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* FAQ Section */}
|
|
{faqQuestions.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 text-white/80 text-xl">{item.answer}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|