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

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

@@ -0,0 +1,15 @@
+export default function Footer() {
+	return (
+		<footer>
+			<div>
+				<div>© 2024 My App. All rights reserved.</div>
+
+				<div>
+					<a href="/privacy">Privacy Policy</a>
+					<a href="/terms">Terms of Service</a>
+					<a href="/contact">Contact</a>
+				</div>
+			</div>
+		</footer>
+	);
+}

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

@@ -0,0 +1,22 @@
+export default function Hero() {
+	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>
+			</div>
+		</section>
+	);
+}

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

@@ -0,0 +1,48 @@
+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>
+			</div>
+		</section>
+	);
+}