webpage start
This commit is contained in:
115
apps/web/src/components/homepage/ArtForms.tsx
Normal file
115
apps/web/src/components/homepage/ArtForms.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -4,11 +4,12 @@ import { useState } from "react";
|
||||
|
||||
export default function EventRegistrationForm() {
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
company: "",
|
||||
dietaryRequirements: "",
|
||||
artForm: "",
|
||||
experience: "",
|
||||
});
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
@@ -27,85 +28,156 @@ export default function EventRegistrationForm() {
|
||||
|
||||
return (
|
||||
<section
|
||||
style={{
|
||||
minHeight: "100vh",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
id="registration"
|
||||
className="snap-section relative z-30 min-h-screen w-full bg-[#214e51]/96 px-12 py-16"
|
||||
>
|
||||
<h2>Register for the Event</h2>
|
||||
<div className="mx-auto flex h-full max-w-6xl flex-col">
|
||||
<h2 className="mb-2 font-['Intro',sans-serif] text-4xl text-white">
|
||||
Schrijf je nu in!
|
||||
</h2>
|
||||
<p className="mb-12 max-w-3xl font-['Intro',sans-serif] text-white/80 text-xl">
|
||||
Doet dit jouw creatieve geest borellen? Vul nog even dit formulier in
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<label htmlFor="name">Full Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
placeholder="Enter your full name"
|
||||
/>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit} className="flex flex-1 flex-col">
|
||||
<div className="flex flex-col gap-8">
|
||||
{/* Row 1: First Name + Last Name */}
|
||||
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
|
||||
<div className="flex flex-col gap-2">
|
||||
<label
|
||||
htmlFor="firstName"
|
||||
className="font-['Intro',sans-serif] text-2xl text-white"
|
||||
>
|
||||
Voornaam
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="firstName"
|
||||
name="firstName"
|
||||
value={formData.firstName}
|
||||
onChange={handleChange}
|
||||
placeholder="Jouw voornaam"
|
||||
className="border-white/30 border-b bg-transparent pb-2 font-['Intro',sans-serif] text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email">Email Address *</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
placeholder="Enter your email"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label
|
||||
htmlFor="lastName"
|
||||
className="font-['Intro',sans-serif] text-2xl text-white"
|
||||
>
|
||||
Achternaam
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="lastName"
|
||||
name="lastName"
|
||||
value={formData.lastName}
|
||||
onChange={handleChange}
|
||||
placeholder="Jouw achternaam"
|
||||
className="border-white/30 border-b bg-transparent pb-2 font-['Intro',sans-serif] text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="phone">Phone Number</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
placeholder="Enter your phone number"
|
||||
/>
|
||||
</div>
|
||||
{/* Row 2: Email + Phone */}
|
||||
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
|
||||
<div className="flex flex-col gap-2">
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="font-['Intro',sans-serif] text-2xl text-white"
|
||||
>
|
||||
E-mail
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
placeholder="jouw@email.nl"
|
||||
className="border-white/30 border-b bg-transparent pb-2 font-['Intro',sans-serif] text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="company">Company / Organization</label>
|
||||
<input
|
||||
type="text"
|
||||
id="company"
|
||||
name="company"
|
||||
value={formData.company}
|
||||
onChange={handleChange}
|
||||
placeholder="Enter your company or organization"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label
|
||||
htmlFor="phone"
|
||||
className="font-['Intro',sans-serif] text-2xl text-white"
|
||||
>
|
||||
Telefoon
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
placeholder="06-12345678"
|
||||
className="border-white/30 border-b bg-transparent pb-2 font-['Intro',sans-serif] text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="dietaryRequirements">
|
||||
Dietary Requirements / Special Requests
|
||||
</label>
|
||||
<textarea
|
||||
id="dietaryRequirements"
|
||||
name="dietaryRequirements"
|
||||
value={formData.dietaryRequirements}
|
||||
onChange={handleChange}
|
||||
rows={3}
|
||||
placeholder="Any dietary restrictions or special requests?"
|
||||
/>
|
||||
</div>
|
||||
{/* Row 3: Art Form (full width) */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<label
|
||||
htmlFor="artForm"
|
||||
className="font-['Intro',sans-serif] text-2xl text-white"
|
||||
>
|
||||
Kunstvorm
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="artForm"
|
||||
name="artForm"
|
||||
value={formData.artForm}
|
||||
onChange={handleChange}
|
||||
placeholder="Muziek, Theater, Dans, etc."
|
||||
className="border-white/30 border-b bg-transparent pb-2 font-['Intro',sans-serif] text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit">Submit Registration</button>
|
||||
{/* Row 4: Experience (full width) */}
|
||||
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
|
||||
<div className="flex flex-col gap-2">
|
||||
<label
|
||||
htmlFor="experience"
|
||||
className="font-['Intro',sans-serif] text-2xl text-white"
|
||||
>
|
||||
Ervaring
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="experience"
|
||||
name="experience"
|
||||
value={formData.experience}
|
||||
onChange={handleChange}
|
||||
placeholder="Beginner / Gevorderd / Professional"
|
||||
className="border-white/30 border-b bg-transparent pb-2 font-['Intro',sans-serif] text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>* Required fields</p>
|
||||
</form>
|
||||
{/* Submit button */}
|
||||
<div className="mt-auto flex flex-col items-center gap-4 pt-12">
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-white px-12 py-4 font-['Intro',sans-serif] text-2xl text-[#214e51] transition-all hover:scale-105 hover:bg-gray-100"
|
||||
>
|
||||
Bevestigen
|
||||
</button>
|
||||
|
||||
<p className="text-center font-['Intro',sans-serif] text-sm text-white/60">
|
||||
Nu al een act / idee van wat jij graag zou willen brengen,{" "}
|
||||
<span className="cursor-pointer underline hover:text-white">
|
||||
klik HIER
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,13 +1,33 @@
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer>
|
||||
<div>
|
||||
<div>© 2024 My App. All rights reserved.</div>
|
||||
<footer className="snap-section relative z-40 flex h-[250px] flex-col items-center justify-center bg-[#d09035]">
|
||||
<div className="text-center">
|
||||
<h3 className="mb-4 font-['Intro',sans-serif] text-2xl text-white">
|
||||
Kunstenkamp
|
||||
</h3>
|
||||
<p className="mb-6 font-['Intro',sans-serif] text-white/80">
|
||||
Waar creativiteit tot leven komt
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<a href="/privacy">Privacy Policy</a>
|
||||
<a href="/terms">Terms of Service</a>
|
||||
<a href="/contact">Contact</a>
|
||||
<div className="flex items-center justify-center gap-8 font-['Intro',sans-serif] text-sm text-white/70">
|
||||
<a href="/privacy" className="transition-colors hover:text-white">
|
||||
Privacy Policy
|
||||
</a>
|
||||
<span className="text-white/40">|</span>
|
||||
<a href="/terms" className="transition-colors hover:text-white">
|
||||
Terms of Service
|
||||
</a>
|
||||
<span className="text-white/40">|</span>
|
||||
<a href="/contact" className="transition-colors hover:text-white">
|
||||
Contact
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 font-['Intro',sans-serif] text-white/50 text-xs">
|
||||
© 2026 Kunstenkamp. Alle rechten voorbehouden.
|
||||
</div>
|
||||
<div className="font-['Intro',sans-serif] text-white/50 text-xs">
|
||||
<a href="https://zias.be">Gemaakt met ♥ door zias.be</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -1,21 +1,164 @@
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function Hero() {
|
||||
const [micVisible, setMicVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Trigger entrance animation after component mounts
|
||||
const timer = setTimeout(() => {
|
||||
setMicVisible(true);
|
||||
}, 100);
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
const scrollToRegistration = () => {
|
||||
const registrationSection = document.getElementById("registration");
|
||||
if (registrationSection) {
|
||||
registrationSection.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
style={{
|
||||
minHeight: "100vh",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<h1>Welcome to Our Event</h1>
|
||||
<p>
|
||||
Join us for an amazing experience. Register now to secure your spot.
|
||||
</p>
|
||||
<div>
|
||||
<button type="button">Register Now</button>
|
||||
<button type="button">Learn More</button>
|
||||
<section className="snap-section relative h-screen w-full overflow-hidden bg-white">
|
||||
{/* Desktop Layout - hidden on mobile */}
|
||||
<div className="relative hidden h-full w-full flex-col gap-[10px] p-[10px] lg:flex">
|
||||
{/* Desktop Microphone - positioned on top of top sections, under bottom sections */}
|
||||
<div
|
||||
className={`pointer-events-none absolute z-20 transition-all duration-1000 ease-out ${
|
||||
micVisible
|
||||
? "translate-x-0 translate-y-0 opacity-100"
|
||||
: "translate-x-24 -translate-y-24 opacity-0"
|
||||
}`}
|
||||
style={{
|
||||
right: "5%",
|
||||
top: "0",
|
||||
width: "38%",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/assets/mic.png"
|
||||
alt="Vintage microphone"
|
||||
className="h-full w-full object-contain drop-shadow-2xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Top row - 2:1 ratio using flex */}
|
||||
<div className="relative flex h-[65%] min-h-0 flex-shrink-0 gap-[10px]">
|
||||
{/* Top Left - Magenta with title - under mic */}
|
||||
<div className="relative z-10 flex min-w-0 flex-[2] flex-col justify-center bg-[#d82560] px-[5%] py-[5%]">
|
||||
<h1 className="font-['Intro',sans-serif] font-normal text-[clamp(3rem,7vw,6rem)] text-white uppercase leading-[1]">
|
||||
OPEN MIC
|
||||
<br />
|
||||
NIGHT
|
||||
</h1>
|
||||
<p className="mt-4 font-['Intro',sans-serif] font-normal text-[clamp(1.25rem,2.5vw,2.625rem)] text-white/90">
|
||||
Ongedesemd brood
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Top Right - Teal - under mic */}
|
||||
<div className="relative z-10 min-w-0 flex-1 bg-[#52979b]" />
|
||||
</div>
|
||||
|
||||
{/* Bottom row - equal width */}
|
||||
<div className="relative z-30 flex min-h-0 flex-1 gap-[10px]">
|
||||
{/* Bottom Left - Mustard - above mic */}
|
||||
<div className="relative flex flex-1 items-center bg-[#d09035] px-[3%]">
|
||||
<p className="font-['Intro',sans-serif] font-normal text-[clamp(1.25rem,2.5vw,2.625rem)] text-white leading-tight">
|
||||
Een kunstenkamp
|
||||
<br />
|
||||
initiatief
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Bottom Right - Dark Teal with date - above mic */}
|
||||
<div className="relative flex flex-1 items-center justify-end bg-[#214e51]">
|
||||
<p className="px-12 text-right font-['Intro',sans-serif] font-normal text-[clamp(2rem,5vw,6rem)] text-white uppercase leading-[1.1]">
|
||||
VRIJDAG 18
|
||||
<br />
|
||||
april
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop CTA Button - centered at bottom */}
|
||||
<div className="absolute bottom-[10px] left-1/2 z-30 -translate-x-1/2">
|
||||
<button
|
||||
onClick={scrollToRegistration}
|
||||
type="button"
|
||||
className="bg-black px-[40px] py-[10px] font-['Intro',sans-serif] font-normal text-[30px] text-white transition-all hover:scale-105 hover:bg-gray-900"
|
||||
>
|
||||
Registreer nu!
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Responsive Layout */}
|
||||
<div className="relative flex h-full w-full flex-col lg:hidden">
|
||||
{/* Mobile: Single column stacked */}
|
||||
<div className="flex flex-1 flex-col gap-[10px] overflow-hidden p-[10px]">
|
||||
{/* Mobile Top - Magenta */}
|
||||
<div className="relative z-10 flex flex-1 flex-col justify-center overflow-hidden bg-[#d82560] px-6 py-8">
|
||||
<h1 className="font-['Intro',sans-serif] font-normal text-[15vw] text-white uppercase leading-[0.95]">
|
||||
OPEN MIC
|
||||
<br />
|
||||
NIGHT
|
||||
</h1>
|
||||
<p className="mt-4 font-['Intro',sans-serif] font-normal text-[5vw] text-white/90">
|
||||
Ongedesemd brood
|
||||
</p>
|
||||
|
||||
{/* Mobile Microphone - positioned inside magenta section, clipped by overflow */}
|
||||
<div
|
||||
className={`pointer-events-none absolute z-10 transition-all duration-1000 ease-out ${
|
||||
micVisible
|
||||
? "translate-x-0 translate-y-0 opacity-100"
|
||||
: "translate-x-12 -translate-y-12 opacity-0"
|
||||
}`}
|
||||
style={{
|
||||
right: "-30%",
|
||||
bottom: "-55%",
|
||||
width: "70%",
|
||||
height: "130%",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/assets/mic.png"
|
||||
alt="Vintage microphone"
|
||||
className="h-full w-full object-contain object-bottom drop-shadow-2xl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Bottom Row - Mustard + Dark Teal */}
|
||||
<div className="relative z-20 flex flex-1 gap-[10px]">
|
||||
<div className="flex flex-1 items-center bg-[#d09035] px-4">
|
||||
<p className="font-['Intro',sans-serif] font-normal text-[4vw] text-white leading-tight">
|
||||
Een kunstenkamp
|
||||
<br />
|
||||
initiatief
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col items-end justify-center bg-[#214e51] p-4">
|
||||
<p className="text-right font-['Intro',sans-serif] font-normal text-[8vw] text-white uppercase leading-tight">
|
||||
VRIJDAG
|
||||
<br />
|
||||
18 april
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile CTA */}
|
||||
<div className="px-[10px] pb-[10px]">
|
||||
<button
|
||||
onClick={scrollToRegistration}
|
||||
type="button"
|
||||
className="w-full bg-black py-3 font-['Intro',sans-serif] font-normal text-lg text-white transition-all hover:scale-105 hover:bg-gray-900"
|
||||
>
|
||||
Registreer nu!
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user