blank slate

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

@@ -0,0 +1,111 @@
+"use client";
+
+import { useState } from "react";
+
+export default function EventRegistrationForm() {
+	const [formData, setFormData] = useState({
+		name: "",
+		email: "",
+		phone: "",
+		company: "",
+		dietaryRequirements: "",
+	});
+
+	const handleSubmit = (e: React.FormEvent) => {
+		e.preventDefault();
+		console.log("Form submitted:", formData);
+	};
+
+	const handleChange = (
+		e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+	) => {
+		setFormData((prev) => ({
+			...prev,
+			[e.target.name]: e.target.value,
+		}));
+	};
+
+	return (
+		<section
+			style={{
+				minHeight: "100vh",
+				display: "flex",
+				flexDirection: "column",
+				justifyContent: "center",
+				alignItems: "center",
+			}}
+		>
+			<h2>Register for the Event</h2>
+
+			<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>
+
+				<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>
+					<label htmlFor="phone">Phone Number</label>
+					<input
+						type="tel"
+						id="phone"
+						name="phone"
+						value={formData.phone}
+						onChange={handleChange}
+						placeholder="Enter your phone number"
+					/>
+				</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>
+					<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>
+
+				<button type="submit">Submit Registration</button>
+
+				<p>* Required fields</p>
+			</form>
+		</section>
+	);
+}