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

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

@@ -12,25 +12,22 @@ export default function Hero() {
 	}, []);
 
 	const scrollToRegistration = () => {
-		const registrationSection = document.getElementById("registration");
-		if (registrationSection) {
-			// Temporarily disable scroll-snap to prevent snap-back on mobile
-			document.documentElement.style.scrollSnapType = "none";
-			registrationSection.scrollIntoView({ behavior: "smooth" });
-			// Re-enable scroll-snap after smooth scroll completes
-			setTimeout(() => {
-				document.documentElement.style.scrollSnapType = "";
-			}, 800);
-		}
+		document
+			.getElementById("registration")
+			?.scrollIntoView({ behavior: "smooth" });
+	};
+
+	const scrollToInfo = () => {
+		document.getElementById("info")?.scrollIntoView({ behavior: "smooth" });
 	};
 
 	return (
-		<section className="snap-section relative h-[100dvh] w-full overflow-hidden bg-white">
+		<section className="relative h-[100dvh] 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 ${
+					className={`pointer-events-none absolute z-20 transition-all duration-1000 ease-out motion-reduce:transition-none ${
 						micVisible
 							? "translate-x-0 translate-y-0 opacity-100"
 							: "translate-x-24 -translate-y-24 opacity-0"
@@ -43,8 +40,10 @@ export default function Hero() {
 				>
 					<img
 						src="/assets/mic.png"
-						alt="Vintage microphone"
+						alt="Vintage microfoon - Open Mic Night"
 						className="h-full w-full object-contain drop-shadow-2xl"
+						loading="eager"
+						fetchPriority="high"
 					/>
 				</div>
 
@@ -57,9 +56,13 @@ export default function Hero() {
 							<br />
 							NIGHT
 						</h1>
-						<p className="mt-4 font-['Intro',sans-serif] font-normal text-[clamp(1.25rem,2.5vw,2.625rem)] text-white/90">
+						<button
+							onClick={scrollToInfo}
+							type="button"
+							className="link-hover mt-4 cursor-pointer text-left font-['Intro',sans-serif] font-normal text-[clamp(1.25rem,2.5vw,2.625rem)] text-white/70 transition-colors duration-200 hover:text-white"
+						>
 							Ongedesemd brood
-						</p>
+						</button>
 					</div>
 
 					{/* Top Right - Teal - under mic */}
@@ -88,13 +91,13 @@ export default function Hero() {
 				</div>
 
 				{/* Desktop CTA Button - centered at bottom */}
-				<div className="absolute bottom-[10px] left-1/2 z-30 -translate-x-1/2">
+				<div className="absolute bottom-[10px] left-1/2 z-30 -translate-x-1/2 py-12">
 					<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!
+						Registreer je nu!
 					</button>
 				</div>
 			</div>
@@ -116,7 +119,7 @@ export default function Hero() {
 
 						{/* Mobile Microphone - positioned inside magenta section, clipped by overflow */}
 						<div
-							className={`pointer-events-none absolute z-10 transition-all duration-1000 ease-out ${
+							className={`pointer-events-none absolute z-10 transition-all duration-1000 ease-out motion-reduce:transition-none ${
 								micVisible
 									? "translate-x-0 translate-y-0 opacity-100"
 									: "translate-x-12 -translate-y-12 opacity-0"
@@ -130,8 +133,9 @@ export default function Hero() {
 						>
 							<img
 								src="/assets/mic.png"
-								alt="Vintage microphone"
+								alt="Vintage microfoon - Open Mic Night"
 								className="h-full w-full object-contain object-bottom drop-shadow-2xl"
+								loading="lazy"
 							/>
 						</div>
 					</div>
@@ -162,7 +166,7 @@ export default function Hero() {
 						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!
+						Registreer je nu!
 					</button>
 				</div>
 			</div>