zias/kunstenkamp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

webpage start

Browse Source
This commit is contained in:
ッ
2026-03-02 14:47:14 +01:00
parent 0856e154b9
commit 65d5ab71d7
59 changed files with 1889 additions and 1309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
apps/web/src/components/homepage/EventRegistrationForm.tsx
View File

@@ -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>
);
}