feat:accessibility, new routes, cookie consent, and UI improvements
- Add contact, privacy, and terms pages - Add CookieConsent component with accept/decline and localStorage - Add self-hosted DM Sans font with @font-face definitions - Improve registration form with field validation, blur handlers, and performer toggle - Redesign Info section with 'Ongedesemd Brood' hero and FAQ layout - Remove scroll-snap behavior from all sections - Add reduced motion support and selection color theming - Add SVG favicon and SEO meta tags in root layout - Improve accessibility: aria attributes, semantic HTML, focus styles - Add link-hover underline animation utility
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
const questions = [
|
||||
const faqQuestions = [
|
||||
{
|
||||
question: "Wat is een open mic?",
|
||||
answer:
|
||||
@@ -23,23 +23,151 @@ const questions = [
|
||||
|
||||
export default function Info() {
|
||||
return (
|
||||
<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>
|
||||
<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">matze</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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user