Polish public error and 404 screens with brand atmosphere.

Shared ErrorScreen composition, i18n for en/nl/it, Sentry on route errors, and a self-contained global-error fallback that matches the hotel gold theme.

Co-authored-by: Cursor <[email protected]>

src/app/error.tsx

@@ -1,12 +1,15 @@
 "use client";
 
+import * as Sentry from "@sentry/nextjs";
+import { Home, RefreshCw } from "lucide-react";
 import Link from "next/link";
+import { useTranslations } from "next-intl";
 import { useEffect } from "react";
+import { ErrorScreen } from "@/components/error-screen";
 
 /**
  * Route-segment error boundary. Renders inside the root layout (so the shell
- * stays), shows a friendly card, and offers a reset. The raw error is logged to
- * the console, never shown to the user.
+ * stays). Never shows the raw error to the user.
  */
 export default function ErrorPage({
 	error,
@@ -15,51 +18,38 @@ export default function ErrorPage({
 	error: Error & { digest?: string };
 	reset: () => void;
 }) {
+	const t = useTranslations("pages.error");
+
 	useEffect(() => {
 		console.error(error);
+		Sentry.captureException(error);
 	}, [error]);
 
 	return (
-		<main style={{ display: "grid", gap: "1.5rem" }}>
-			<div className="content-card">
-				<div className="content-card-head">
-					<span className="content-card-icon" aria-hidden>
-						⚠️
-					</span>
-					<div className="content-card-head-text">
-						<p className="content-card-title">Something went wrong</p>
-						<p className="content-card-subtitle">
-							An unexpected error occurred
-						</p>
-					</div>
-				</div>
-				<div className="content-card-body">
-					<p className="muted" style={{ marginTop: 0 }}>
-						Try again — if the problem persists, please contact a member of
-						staff.
+		<ErrorScreen
+			code={t("code")}
+			title={t("title")}
+			subtitle={t("subtitle")}
+			body={t("body")}
+			actions={
+				<>
+					<button type="button" className="btn btn-primary" onClick={() => reset()}>
+						<RefreshCw className="error-screen-btn-icon" aria-hidden />
+						{t("tryAgain")}
+					</button>
+					<Link className="btn btn-outline" href="/">
+						<Home className="error-screen-btn-icon" aria-hidden />
+						{t("backHome")}
+					</Link>
+				</>
+			}
+			footer={
+				error.digest ? (
+					<p className="error-screen-digest">
+						{t("reference", { digest: error.digest })}
 					</p>
-					<div style={{ display: "flex", gap: "0.6rem", flexWrap: "wrap" }}>
-						<button
-							type="button"
-							className="btn btn-primary"
-							onClick={() => reset()}
-						>
-							Try again
-						</button>
-						<Link className="btn btn-outline" href="/">
-							Back home
-						</Link>
-					</div>
-					{error.digest ? (
-						<p
-							className="muted"
-							style={{ marginTop: "0.75rem", fontSize: "0.75rem" }}
-						>
-							Reference: {error.digest}
-						</p>
-					) : null}
-				</div>
-			</div>
-		</main>
+				) : null
+			}
+		/>
 	);
 }