feat(home): rebuild the landing page on a shared panel system

The homepage mixed four different translucent washes (surface 44-60% plus a
backdrop-filter each), rendered the same four counters twice, and showed a
dangling "Welcome to " eyebrow because the localized string expected the hotel
name. A missing theme wallpaper replaced the whole sky gradient with flat
white, and stale CMS image references produced broken images and 404s.

Replace the ad-hoc panels with one opaque, theme-derived `.panel` token set
(surface, border, shadow, header, radius) and a `.panel-float` variant for the
counter strip that straddles the hero edge. The strip is now the single home
of the four headline counters; a failed read renders "unavailable" instead of
silently dropping a cell. Add the fourth feature card (Games) that already had
translated copy, link recent users to their profiles, and fall back to themed
placeholders for news covers and camera photos without an upload.

Add `pages.home.heroEyebrow` to all 25 locales, layer the CMS wallpaper over
`--site-bg-gradient` instead of replacing it, and keep the sky in dark mode.
Add `publicAssetExists` so local uploads that no longer exist are skipped
(wallpaper, help topics) rather than rendered broken. Fix the `/help` topic
icons to use the `/assets/images/help-center/` base the detail page already
used.

Throttle the spotlight glow to one update per animation frame, drop the dead
`.glass-chip` rules, define the missing `.panel-float`, and fix the stat
divider and reduced-motion selectors. Stat labels use the readable text token
so they clear WCAG AA, and the language button's accessible name now contains
its visible label.

Verified: tsc, biome, 3590 unit tests, i18n audit unchanged, axe 0 violations
at 390/768/1024/1280/1440 in light and dark, quality e2e 16/16.

src/app/(site)/help/[category]/page.tsx

@@ -6,6 +6,7 @@ import { ContentCard } from "@/components/public/ui";
 import { SanitizedHtml } from "@/components/shared/sanitized-html";
 import { db, WebsiteHelpCenterCategories } from "@/lib/db";
 import { resolveHotelName } from "@/lib/hotel-name";
+import { publicAssetExists } from "@/lib/public-asset";
 import { sanitize } from "@/lib/sanitize";
 
 // Asset path matches AtomCMS's Blade view: asset('/assets/images/help-center/<image_url>').
@@ -99,7 +100,10 @@ export default async function HelpCategoryPage({
 	const title = withHotel(cat.name, hotelName);
 	const content = withHotel(cat.content, hotelName);
 	const buttonText = withHotel(cat.buttonText, hotelName);
-	const imageSrc = cat.imageUrl ? `${HELP_IMAGE_BASE}/${cat.imageUrl}` : "";
+	const imageSrc =
+		cat.imageUrl && publicAssetExists(`${HELP_IMAGE_BASE}/${cat.imageUrl}`)
+			? `${HELP_IMAGE_BASE}/${cat.imageUrl}`
+			: "";
 	const hasButton = Boolean(cat.buttonText && cat.buttonText.trim() !== "");
 
 	return (

src/app/(site)/help/page.tsx

@@ -23,6 +23,10 @@ import {
 	WebsiteRuleCategories,
 	WebsiteRules,
 } from "@/lib/db";
+import { publicAssetExists } from "@/lib/public-asset";
+
+// Asset path matches AtomCMS's Blade view: asset('/assets/images/help-center/<image_url>').
+const HELP_IMAGE_BASE = "/assets/images/help-center";
 
 type HelpCategory = {
 	id: bigint;
@@ -149,66 +153,71 @@ export default async function HelpCenterPage() {
 					<EmptyState icon="🧭">{t("topicsEmpty")}</EmptyState>
 				) : (
 					<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
-						{categories.map((c) => (
-							<article key={String(c.id)} className="card hover">
-								<div
-									style={{
-										display: "flex",
-										gap: "0.85rem",
-										alignItems: "flex-start",
-									}}
-								>
-									{c.imageUrl ? (
-										<img
-											src={c.imageUrl}
-											alt=""
-											width={48}
-											height={48}
-											style={{ flexShrink: 0, objectFit: "contain" }}
-										/>
-									) : null}
-									<div style={{ flex: 1, minWidth: 0 }}>
-										<h3 style={{ margin: "0 0 0.35rem", fontSize: "1rem" }}>
-											{c.name}
-										</h3>
-										<p className="muted" style={{ margin: 0 }}>
-											{c.content}
-										</p>
-										{c.buttonUrl && c.buttonText ? (
-											<div style={{ marginTop: "0.85rem" }}>
-												{isExternal(c.buttonUrl) ? (
-													<a
-														className="btn btn-outline"
-														href={c.buttonUrl}
-														target="_blank"
-														rel="noreferrer"
-														style={{
-															background: c.buttonColor,
-															borderColor: c.buttonBorderColor,
-															color: "#3a2c05",
-														}}
-													>
-														{c.buttonText}
-													</a>
-												) : (
-													<Link
-														className="btn btn-outline"
-														href={c.buttonUrl}
-														style={{
-															background: c.buttonColor,
-															borderColor: c.buttonBorderColor,
-															color: "#3a2c05",
-														}}
-													>
-														{c.buttonText}
-													</Link>
-												)}
-											</div>
+						{categories.map((c) => {
+							const imageSrc = c.imageUrl
+								? `${HELP_IMAGE_BASE}/${c.imageUrl}`
+								: "";
+							return (
+								<article key={String(c.id)} className="card hover">
+									<div
+										style={{
+											display: "flex",
+											gap: "0.85rem",
+											alignItems: "flex-start",
+										}}
+									>
+										{imageSrc && publicAssetExists(imageSrc) ? (
+											<img
+												src={imageSrc}
+												alt=""
+												width={48}
+												height={48}
+												style={{ flexShrink: 0, objectFit: "contain" }}
+											/>
 										) : null}
+										<div style={{ flex: 1, minWidth: 0 }}>
+											<h3 style={{ margin: "0 0 0.35rem", fontSize: "1rem" }}>
+												{c.name}
+											</h3>
+											<p className="muted" style={{ margin: 0 }}>
+												{c.content}
+											</p>
+											{c.buttonUrl && c.buttonText ? (
+												<div style={{ marginTop: "0.85rem" }}>
+													{isExternal(c.buttonUrl) ? (
+														<a
+															className="btn btn-outline"
+															href={c.buttonUrl}
+															target="_blank"
+															rel="noreferrer"
+															style={{
+																background: c.buttonColor,
+																borderColor: c.buttonBorderColor,
+																color: "#3a2c05",
+															}}
+														>
+															{c.buttonText}
+														</a>
+													) : (
+														<Link
+															className="btn btn-outline"
+															href={c.buttonUrl}
+															style={{
+																background: c.buttonColor,
+																borderColor: c.buttonBorderColor,
+																color: "#3a2c05",
+															}}
+														>
+															{c.buttonText}
+														</Link>
+													)}
+												</div>
+											) : null}
+										</div>
 									</div>
-								</div>
-							</article>
-						))}
+								</article>
+							);
+						})}
 					</div>
 				)}
 			</ContentCard>

src/app/globals.css

@@ -500,9 +500,14 @@ summary,
 	}
 }
 
-/* ── Site background: Habbo sky ── */
+/* ── Site background: Habbo sky ──
+   The sky lives in a custom property so the Theme Manager can layer a CMS
+   wallpaper *on top of* it (`background-image: url(...), var(--site-bg-gradient)`)
+   instead of replacing it. Painting the wallpaper as the only layer meant a
+   missing upload silently erased the whole gradient and left the site on flat
+   white. */
 .site-bg {
-	background: linear-gradient(
+	--site-bg-gradient: linear-gradient(
 		180deg,
 		color-mix(in srgb, var(--color-primary) 4%, #b3d9f7) 0%,
 		color-mix(in srgb, var(--color-primary) 6%, #d4e8fa) 25%,
@@ -510,7 +515,10 @@ summary,
 		color-mix(in srgb, var(--color-primary) 10%, #f0e8d8) 75%,
 		color-mix(in srgb, var(--color-primary) 14%, var(--color-background)) 100%
 	);
+	background-image: var(--site-bg-gradient);
 	background-attachment: fixed;
+	background-size: cover;
+	background-repeat: no-repeat;
 	position: relative;
 }
 /* Habbo-style clouds */
@@ -711,13 +719,16 @@ html.dark .cloud {
 		);
 }
 html.dark .site-bg {
-	background: linear-gradient(
+	--site-bg-gradient: linear-gradient(
 		180deg,
 		color-mix(in srgb, var(--color-primary) 6%, #0a0e1a) 0%,
 		color-mix(in srgb, var(--color-primary) 8%, #10152a) 30%,
 		color-mix(in srgb, var(--color-primary) 10%, #161c30) 60%,
 		color-mix(in srgb, var(--color-primary) 12%, #0f141f) 100%
 	);
+	/* Re-declaring `background-image` here would out-specify the wallpaper
+	   layer injected by ThemeVars (body.site-bg) and silently drop it in dark
+	   mode. The gradient is picked up through `--site-bg-gradient` instead. */
 	background-attachment: fixed;
 }
 html.dark .site-bg::before {
@@ -2559,17 +2570,6 @@ details[open] > summary .details-open\:rotate-180 {
 /* ── Classic-landing polish (theme-aware) ────────────────────────────
    Keeps the Habbo sky and theme colors; adds subtle depth + glow to the
    restored landing pages. Everything is driven by theme CSS variables. */
-.brand-halo {
-	position: absolute;
-	pointer-events: none;
-	border-radius: 999px;
-	background: radial-gradient(
-		circle,
-		color-mix(in srgb, var(--color-primary) 30%, transparent) 0%,
-		transparent 70%
-	);
-	filter: blur(20px);
-}
 .card-glow {
 	transition:
 		box-shadow 0.3s ease,
@@ -2647,6 +2647,123 @@ details[open] > summary .details-open\:rotate-180 {
 	letter-spacing: -0.02em;
 }
 
+/* ── Landing panel system ────────────────────────────────────────────
+   One recipe for every card on the public pages. The old panels each mixed
+   their own translucent washes (surface 44–60% + backdrop blur), which read as
+   a milky smear over the sky gradient, gave the same four numbers two
+   different-looking boxes, and cost a backdrop snapshot per panel on every
+   scroll. These tokens are opaque, theme-derived and shared. */
+:root {
+	--panel-surface: color-mix(
+		in srgb,
+		var(--color-surface) 93%,
+		var(--color-primary)
+	);
+	--panel-surface-alt: color-mix(
+		in srgb,
+		var(--color-surface) 88%,
+		var(--color-accent)
+	);
+	--panel-surface-sunken: color-mix(
+		in srgb,
+		var(--color-surface) 96%,
+		var(--color-background)
+	);
+	--panel-border: color-mix(in srgb, var(--color-text-muted) 16%, transparent);
+	--panel-border-strong: color-mix(
+		in srgb,
+		var(--color-primary) 32%,
+		transparent
+	);
+	--panel-shadow:
+		0 1px 2px color-mix(in srgb, #0b1220 7%, transparent),
+		0 18px 40px -26px color-mix(in srgb, #0b1220 55%, transparent);
+	--panel-header-bg: color-mix(
+		in srgb,
+		var(--color-primary) 8%,
+		var(--color-surface)
+	);
+	--panel-header-border: color-mix(
+		in srgb,
+		var(--color-text-muted) 12%,
+		transparent
+	);
+	--panel-radius: 18px;
+}
+html.dark {
+	--panel-surface: color-mix(
+		in srgb,
+		var(--color-surface) 88%,
+		var(--color-background)
+	);
+	--panel-surface-alt: color-mix(
+		in srgb,
+		var(--color-surface) 82%,
+		var(--color-background)
+	);
+	--panel-surface-sunken: color-mix(
+		in srgb,
+		var(--color-surface) 92%,
+		var(--color-background)
+	);
+	--panel-border: color-mix(in srgb, var(--color-text-muted) 24%, transparent);
+	--panel-border-strong: color-mix(
+		in srgb,
+		var(--color-primary) 46%,
+		transparent
+	);
+	--panel-shadow:
+		0 1px 2px rgb(0 0 0 / 0.4), 0 24px 48px -28px rgb(0 0 0 / 0.85);
+	--panel-header-bg: color-mix(
+		in srgb,
+		var(--color-primary) 13%,
+		var(--color-surface)
+	);
+	--panel-header-border: color-mix(
+		in srgb,
+		var(--color-text-muted) 20%,
+		transparent
+	);
+}
+
+/* The standard card. `rounded-[--panel-radius]` is spelled out in the
+   component, this class only owns colour, border and depth. */
+.panel {
+	background: var(--panel-surface);
+	border: 1px solid var(--panel-border);
+	box-shadow: var(--panel-shadow);
+}
+/* A panel that floats over the hero, so it needs a deeper shadow. */
+.panel-float {
+	box-shadow:
+		0 2px 6px color-mix(in srgb, #0b1220 10%, transparent),
+		0 34px 64px -30px color-mix(in srgb, #0b1220 62%, transparent);
+}
+html.dark .panel-float {
+	box-shadow:
+		0 2px 6px rgb(0 0 0 / 0.5),
+		0 36px 70px -30px rgb(0 0 0 / 0.9);
+}
+/* A tile that sits *inside* a panel — icon chips, stat wells, list rows. */
+.panel-sunken {
+	background: var(--panel-surface-sunken);
+	border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);
+}
+.panel-header {
+	background: var(--panel-header-bg);
+	border-bottom: 1px solid var(--panel-header-border);
+}
+/* Icon chip inside a panel. `--panel-tint` is set per instance. */
+.panel-tile {
+	background: color-mix(
+		in srgb,
+		var(--panel-tint, var(--color-primary)) 15%,
+		transparent
+	);
+	box-shadow: inset 0 0 0 1px
+		color-mix(in srgb, var(--panel-tint, var(--color-primary)) 26%, transparent);
+}
+
 /* ── Smooth motion (landing) ───────────────────────────────────────── */
 html {
 	scroll-behavior: smooth;
@@ -2668,6 +2785,15 @@ html {
 
 /* Gentle breathing pulse for the brand glows behind Frank / the hero. */
 .brand-halo {
+	position: absolute;
+	pointer-events: none;
+	border-radius: 999px;
+	background: radial-gradient(
+		circle,
+		color-mix(in srgb, var(--color-primary) 30%, transparent) 0%,
+		transparent 70%
+	);
+	filter: blur(20px);
 	animation: hero-halo-pulse 6s ease-in-out infinite;
 	will-change: transform;
 }
@@ -2691,8 +2817,7 @@ html {
 	.brand-halo {
 		animation: none;
 	}
-	.hero-ring,
-	.glass-chip {
+	.hero-ring {
 		animation: none;
 	}
 }
@@ -2734,48 +2859,6 @@ html {
 	}
 }
 
-/* Frosted floating stat chips that bob gently on the hero.
-   No backdrop-filter while animating: sampling the backdrop every frame is
-   expensive, so the chips use a higher-opacity fill instead. */
-.glass-chip {
-	display: inline-flex;
-	align-items: center;
-	gap: 0.45rem;
-	padding: 0.45rem 0.85rem;
-	border-radius: 999px;
-	background: color-mix(in srgb, var(--color-surface) 72%, transparent);
-	border: 1px solid color-mix(in srgb, var(--color-text-muted) 14%, transparent);
-	box-shadow:
-		0 10px 26px -10px color-mix(in srgb, #000 30%, transparent),
-		inset 0 1px 0 0 color-mix(in srgb, #fff 12%, transparent);
-	animation: float 5s ease-in-out infinite;
-	will-change: transform;
-}
-.glass-chip:nth-child(2) {
-	animation-delay: -1.7s;
-}
-.glass-chip:nth-child(3) {
-	animation-delay: -3.4s;
-}
-.glass-chip-dot {
-	width: 0.45rem;
-	height: 0.45rem;
-	border-radius: 999px;
-	flex-shrink: 0;
-}
-.glass-chip-value {
-	font-weight: 900;
-	font-variant-numeric: tabular-nums;
-	line-height: 1;
-}
-.glass-chip-label {
-	font-size: 9px;
-	font-weight: 700;
-	text-transform: uppercase;
-	letter-spacing: 0.12em;
-	color: var(--color-text-muted);
-}
-
 /* ── Public page polish: buttons ──────────────────────────────────── */
 .btn-brand {
 	position: relative;
@@ -2957,10 +3040,9 @@ html {
 	font-size: 0.85rem;
 	font-weight: 700;
 	color: var(--color-text-readable);
-	background: color-mix(in srgb, var(--color-surface) 55%, transparent);
-	border: 1px solid color-mix(in srgb, var(--color-text-muted) 16%, transparent);
-	-webkit-backdrop-filter: blur(10px);
-	backdrop-filter: blur(10px);
+	background: var(--panel-surface);
+	border: 1px solid var(--panel-border);
+	box-shadow: 0 1px 2px color-mix(in srgb, #0b1220 6%, transparent);
 	transition:
 		background 0.25s ease,
 		border-color 0.25s ease,
@@ -2970,13 +3052,13 @@ html {
 .explore-pill:hover {
 	background: color-mix(
 		in srgb,
-		var(--color-primary) 16%,
-		var(--color-surface)
+		var(--color-primary) 14%,
+		var(--panel-surface)
 	);
-	border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
+	border-color: var(--panel-border-strong);
 	transform: translateY(-2px);
-	box-shadow: 0 12px 26px -14px
-		color-mix(in srgb, var(--color-primary) 80%, transparent);
+	box-shadow: 0 14px 28px -16px
+		color-mix(in srgb, var(--color-primary) 85%, transparent);
 }
 .explore-pill .pill-arrow {
 	opacity: 0;
@@ -3079,30 +3161,44 @@ html {
 	}
 }
 
-/* Dividers between the four counters in the stats panel. */
+/* Hairlines between the headline counters.
+   The strip is two-up on narrow screens and four-up from `lg`. The old rules
+   only knew the four-up layout: on mobile they drew a single vertical line
+   between the two rows instead of between the two columns, and none between
+   the columns at all. Both rules are drawn from the same token so the grid
+   always reads as four separate figures. */
 .stat-cell {
 	position: relative;
 }
+.stat-cell::before,
+.stat-cell::after {
+	content: "";
+	position: absolute;
+	background: color-mix(in srgb, var(--color-text-muted) 20%, transparent);
+}
 @media (min-width: 1024px) {
+	/* Four across: a vertical rule in front of every cell but the first. */
 	.stat-cell:not(:first-child)::before {
-		content: "";
-		position: absolute;
-		left: -0.5rem;
-		top: 18%;
-		height: 64%;
+		left: -0.75rem;
+		top: 8%;
+		height: 84%;
 		width: 1px;
-		background: color-mix(in srgb, var(--color-text-muted) 20%, transparent);
 	}
 }
 @media (max-width: 1023px) {
-	.stat-cell:nth-child(3)::before {
-		content: "";
-		position: absolute;
-		left: -0.5rem;
-		top: 10%;
-		height: 80%;
+	/* Two across: a vertical rule between the two columns of each row… */
+	.stat-cell:nth-child(even)::before {
+		left: -0.75rem;
+		top: 8%;
+		height: 84%;
 		width: 1px;
-		background: color-mix(in srgb, var(--color-text-muted) 20%, transparent);
+	}
+	/* …and a horizontal rule between the two rows. */
+	.stat-cell:nth-child(n + 3)::after {
+		left: 6%;
+		right: 6%;
+		top: -0.75rem;
+		height: 1px;
 	}
 }
 

src/components/auth/auth-top-bar.tsx

@@ -26,16 +26,10 @@ export function AuthTopBar({
 	return (
 		<Reveal>
 			<div
-				className="relative flex items-center justify-between gap-3 rounded-full border px-3 py-2.5 sm:px-5"
+				className="panel relative flex items-center justify-between gap-3 rounded-full px-3 py-2.5 sm:px-5"
 				style={{
 					background:
-						"linear-gradient(90deg, color-mix(in srgb, var(--color-surface) 62%, transparent), color-mix(in srgb, var(--color-primary) 7%, transparent))",
-					backdropFilter: "blur(14px)",
-					WebkitBackdropFilter: "blur(14px)",
-					borderColor:
-						"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-					boxShadow:
-						"0 1px 3px rgba(0,0,0,0.04), 0 0 0 0.5px color-mix(in srgb, var(--color-text-muted) 6%, transparent)",
+						"linear-gradient(90deg, var(--panel-surface), color-mix(in srgb, var(--color-primary) 7%, var(--panel-surface)))",
 				}}
 			>
 				<div className="flex min-w-0 items-center gap-2 sm:gap-3">

src/components/language-switcher.tsx

@@ -267,7 +267,7 @@ export function LanguageSwitcher({
 				type="button"
 				onClick={() => setOpen(!open)}
 				disabled={pending}
-				aria-label="Change language"
+				aria-label={`Change language — ${current.code.toUpperCase()}`}
 				title="Language"
 				aria-expanded={open}
 				aria-haspopup="listbox"

src/components/spotlight-card.tsx

@@ -1,6 +1,12 @@
 "use client";
 
-import type { CSSProperties, MouseEvent, ReactNode } from "react";
+import {
+	type CSSProperties,
+	type MouseEvent,
+	type ReactNode,
+	useEffect,
+	useRef,
+} from "react";
 
 interface SpotlightCardProps {
 	children: ReactNode;
@@ -12,22 +18,48 @@ interface SpotlightCardProps {
  * Wraps a card with a mouse-tracking radial glow. The pointer position is
  * written to `--spot-x` / `--spot-y` and consumed by the `.spotlight::before`
  * overlay in globals.css.
+ *
+ * The pointer move handler is throttled to one update per animation frame:
+ * a pointermove fires far more often than the browser paints, and every
+ * extra write re-styles the card (and its ::before gradient) for nothing.
  */
 export function SpotlightCard({
 	children,
 	className,
 	style,
 }: SpotlightCardProps) {
+	const frame = useRef(0);
+	const pending = useRef<{ x: number; y: number } | null>(null);
+
+	// Drop the queued frame if the card is removed mid-gesture.
+	useEffect(
+		() => () => {
+			if (frame.current) cancelAnimationFrame(frame.current);
+		},
+		[],
+	);
+
 	const handlePointerMove = (event: MouseEvent<HTMLDivElement>) => {
 		const el = event.currentTarget;
 		const rect = el.getBoundingClientRect();
-		el.style.setProperty("--spot-x", `${event.clientX - rect.left}px`);
-		el.style.setProperty("--spot-y", `${event.clientY - rect.top}px`);
+		pending.current = {
+			x: event.clientX - rect.left,
+			y: event.clientY - rect.top,
+		};
+		if (frame.current) return;
+
+		frame.current = requestAnimationFrame(() => {
+			frame.current = 0;
+			const point = pending.current;
+			if (!point) return;
+			el.style.setProperty("--spot-x", `${point.x}px`);
+			el.style.setProperty("--spot-y", `${point.y}px`);
+		});
 	};
 
 	return (
 		<div
-			className={className}
+			className={className ? `spotlight ${className}` : "spotlight"}
 			style={
 				{ "--spot-x": "50%", "--spot-y": "50%", ...style } as CSSProperties
 			}

src/components/theme-vars.tsx

@@ -1,4 +1,5 @@
 import type { CSSProperties } from "react";
+import { publicAssetExists } from "@/lib/public-asset";
 import { siteSettings } from "@/lib/services/site-settings";
 import {
 	BACKGROUND_DEFAULTS,
@@ -240,9 +241,19 @@ export async function ThemeVars({ nonce }: { nonce?: string } = {}) {
 		? Math.min(parseInt(backgroundOverlayOpacity as string, 10), 90)
 		: 0;
 
+	// The wallpaper is painted as the *first* background layer on top of the
+	// theme gradient (`--site-bg-gradient`). It used to be the only layer,
+	// which meant a missing upload wiped the sky entirely and left the site on
+	// flat white. Layering keeps the gradient as a guaranteed fallback.
+	//
+	// A local wallpaper that no longer exists on disk (deleted upload, stale
+	// theme setting) would also fire a 404 on every page view, so only emit the
+	// layer when the file is actually there. Remote URLs are trusted as-is.
 	const backgroundCss =
-		backgroundImage && isSafeBackgroundUrl(backgroundImage)
-			? `body.site-bg{background-image:url("${backgroundImage}");background-position:${safeBgPosition};background-size:${safeBgSize};background-repeat:${safeBgRepeat}}`
+		backgroundImage &&
+		isSafeBackgroundUrl(backgroundImage) &&
+		publicAssetExists(backgroundImage)
+			? `body.site-bg{background-image:url("${backgroundImage}"),var(--site-bg-gradient);background-position:${safeBgPosition},center top;background-size:${safeBgSize},cover;background-repeat:${safeBgRepeat},no-repeat}`
 			: "";
 
 	const backdropStyle: CSSProperties | undefined = safeOverlay

src/lib/public-asset.test.ts

@@ -0,0 +1,51 @@
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { publicAssetExists } from "./public-asset";
+
+describe("publicAssetExists", () => {
+	const originalCwd = process.cwd();
+	let root: string;
+
+	beforeAll(() => {
+		root = mkdtempSync(join(tmpdir(), "public-asset-"));
+		mkdirSync(join(root, "public", "assets"), { recursive: true });
+		writeFileSync(join(root, "public", "assets", "present.png"), "");
+		process.chdir(root);
+	});
+
+	afterAll(() => {
+		process.chdir(originalCwd);
+		rmSync(root, { recursive: true, force: true });
+	});
+
+	it("accepts a local file that exists", () => {
+		expect(publicAssetExists("/assets/present.png")).toBe(true);
+	});
+
+	it("ignores query strings and hashes", () => {
+		expect(publicAssetExists("/assets/present.png?v=2#x")).toBe(true);
+	});
+
+	it("rejects a local file that is missing", () => {
+		expect(publicAssetExists("/assets/gone.png")).toBe(false);
+	});
+
+	it("rejects empty input", () => {
+		expect(publicAssetExists(null)).toBe(false);
+		expect(publicAssetExists(undefined)).toBe(false);
+		expect(publicAssetExists("")).toBe(false);
+	});
+
+	it("trusts remote and protocol-relative URLs", () => {
+		expect(publicAssetExists("https://cdn.example.com/a.png")).toBe(true);
+		expect(publicAssetExists("http://cdn.example.com/a.png")).toBe(true);
+		expect(publicAssetExists("//cdn.example.com/a.png")).toBe(true);
+	});
+
+	it("rejects non-http schemes", () => {
+		expect(publicAssetExists("javascript:alert(1)")).toBe(false);
+		expect(publicAssetExists("data:image/png;base64,AAAA")).toBe(false);
+	});
+});

src/lib/public-asset.ts

@@ -0,0 +1,26 @@
+import { existsSync } from "node:fs";
+import { join } from "node:path";
+
+/**
+ * True when a site-relative URL points at a file that really exists under
+ * `public/`. CMS records can keep pointing at an upload that has since been
+ * deleted, and a stale reference renders a broken image (or a 404 background
+ * layer) on every page view. Server-only: it stats the filesystem.
+ *
+ * Remote URLs (`http:`, `https:`, protocol-relative) are trusted as-is because
+ * we cannot stat them, and data/blob URIs are rejected outright.
+ */
+export function publicAssetExists(url: string | null | undefined): boolean {
+	if (!url) return false;
+	if (url.startsWith("//")) return true;
+	if (/^[a-z][a-z0-9+.-]*:/i.test(url)) {
+		return /^https?:/i.test(url);
+	}
+	if (!url.startsWith("/")) return true;
+	try {
+		const file = decodeURIComponent(url.split(/[?#]/)[0] ?? "");
+		return existsSync(join(process.cwd(), "public", file));
+	} catch {
+		return false;
+	}
+}

src/messages/ar.json

@@ -5353,6 +5353,7 @@
 		},
 		"home": {
 			"welcome": "Welcome to {hotelName}",
+			"heroEyebrow": "أهلاً بك",
 			"welcomeSubtitle": "Your retro hotel, now powered by Next.js",
 			"welcomeBody": "Hang out, collect furni, and meet friends.",
 			"enterHotel": "Enter {hotelName}",

src/messages/bg.json

@@ -232,6 +232,7 @@
 		},
 		"home": {
 			"welcome": "Добре дошли в {hotelName}",
+			"heroEyebrow": "Добре дошли",
 			"welcomeSubtitle": "Вашият ретро хотел, сега захранван от Next.js",
 			"welcomeBody": "Излизайте, събирайте мебели и се срещайте с приятели.",
 			"enterHotel": "Въведете {hotelName}",

src/messages/cs.json

@@ -232,6 +232,7 @@
 		},
 		"home": {
 			"welcome": "Vítejte v {hotelName}",
+			"heroEyebrow": "Vítejte",
 			"welcomeSubtitle": "Váš retro hotel, nyní poháněný Next.js",
 			"welcomeBody": "Setkejte se, sbírejte nábytek a setkejte se s přáteli.",
 			"enterHotel": "Zadejte {hotelName}",

src/messages/da.json

@@ -232,6 +232,7 @@
 		},
 		"home": {
 			"welcome": "Velkommen til {hotelName}",
+			"heroEyebrow": "Velkommen",
 			"welcomeSubtitle": "Dit retrohotel, nu drevet af Next.js",
 			"welcomeBody": "Hæng ud, saml møbler og mød venner.",
 			"enterHotel": "Indtast {hotelName}",

src/messages/de.json

@@ -232,6 +232,7 @@
 		},
 		"home": {
 			"welcome": "Willkommen bei {hotelName}",
+			"heroEyebrow": "Willkommen",
 			"welcomeSubtitle": "Dein Retro-Hotel, jetzt mit Next.js",
 			"welcomeBody": "Abhängen, Möbel sammeln und Freunde treffen.",
 			"enterHotel": "{hotelName} betreten",

src/messages/el.json

@@ -232,6 +232,7 @@
 		},
 		"home": {
 			"welcome": "Καλώς ήρθατε στο {hotelName}",
+			"heroEyebrow": "Καλώς ήρθατε",
 			"welcomeSubtitle": "Το ρετρό ξενοδοχείο σας, τώρα με την υποστήριξη του Next.js",
 			"welcomeBody": "Κάντε παρέα, μαζέψτε έπιπλα και συναντήστε φίλους.",
 			"enterHotel": "Εισαγάγετε {hotelName}",

src/messages/en.json

@@ -278,6 +278,7 @@
 		},
 		"home": {
 			"welcome": "Welcome to {hotelName}",
+			"heroEyebrow": "Welcome",
 			"welcomeSubtitle": "Your retro hotel, now powered by Next.js",
 			"welcomeBody": "Hang out, collect furni, and meet friends.",
 			"enterHotel": "Enter {hotelName}",

src/messages/es.json

@@ -232,6 +232,7 @@
 		},
 		"home": {
 			"welcome": "Bienvenido a {hotelName}",
+			"heroEyebrow": "Bienvenido",
 			"welcomeSubtitle": "Tu hotel retro, ahora impulsado por Next.js",
 			"welcomeBody": "Pasa el rato, colecciona furni y conoce amigos.",
 			"enterHotel": "Entrar a {hotelName}",

src/messages/fi.json

@@ -5353,6 +5353,7 @@
 		},
 		"home": {
 			"welcome": "Welcome to {hotelName}",
+			"heroEyebrow": "Tervetuloa",
 			"welcomeSubtitle": "Your retro hotel, now powered by Next.js",
 			"welcomeBody": "Hang out, collect furni, and meet friends.",
 			"enterHotel": "Enter {hotelName}",

src/messages/fr.json

@@ -232,6 +232,7 @@
 		},
 		"home": {
 			"welcome": "Bienvenue sur {hotelName}",
+			"heroEyebrow": "Bienvenue",
 			"welcomeSubtitle": "Votre hôtel rétro, désormais propulsé par Next.js",
 			"welcomeBody": "Traînez, collectionnez des meubles et rencontrez des amis.",
 			"enterHotel": "Entrer dans {hotelName}",

src/messages/hr.json

@@ -232,6 +232,7 @@
 		},
 		"home": {
 			"welcome": "Dobro došli u {hotelName}",
+			"heroEyebrow": "Dobrodošli",
 			"welcomeSubtitle": "Vaš retro hotel, sada pokreće Next.js",
 			"welcomeBody": "Družite se, skupljajte namještaj i upoznajte prijatelje.",
 			"enterHotel": "Unesite {hotelName}",

src/messages/hu.json

@@ -232,6 +232,7 @@
 		},
 		"home": {
 			"welcome": "Üdvözöljük itt: {hotelName}",
+			"heroEyebrow": "Üdvözöljük",
 			"welcomeSubtitle": "Az Ön retro szállodája, amelyet most a Next.js üzemeltet",
 			"welcomeBody": "Tárcsázz, gyűjts bútorokat és találkozz barátokkal.",
 			"enterHotel": "Írja be a következőt: {hotelName}",

src/messages/it.json

@@ -274,6 +274,7 @@
 		},
 		"home": {
 			"welcome": "Benvenuto su {hotelName}",
+			"heroEyebrow": "Benvenuto",
 			"welcomeSubtitle": "Il tuo hotel retrò, ora con tecnologia Next.js",
 			"welcomeBody": "Rilassati, colleziona furni e fai nuove amicizie.",
 			"enterHotel": "Entra in {hotelName}",

src/messages/ja.json

@@ -5353,6 +5353,7 @@
 		},
 		"home": {
 			"welcome": "Welcome to {hotelName}",
+			"heroEyebrow": "ようこそ",
 			"welcomeSubtitle": "Your retro hotel, now powered by Next.js",
 			"welcomeBody": "Hang out, collect furni, and meet friends.",
 			"enterHotel": "Enter {hotelName}",

src/messages/nl.json

@@ -274,6 +274,7 @@
 		},
 		"home": {
 			"welcome": "Welkom bij {hotelName}",
+			"heroEyebrow": "Welkom",
 			"welcomeSubtitle": "Je retro hotel, nu mogelijk gemaakt door Next.js",
 			"welcomeBody": "Rondhangen, meubels verzamelen en vrienden ontmoeten.",
 			"enterHotel": "{hotelName} betreden",

src/messages/no.json

@@ -232,6 +232,7 @@
 		},
 		"home": {
 			"welcome": "Velkommen til {hotelName}",
+			"heroEyebrow": "Velkommen",
 			"welcomeSubtitle": "Ditt retrohotell, nå drevet av Next.js",
 			"welcomeBody": "Heng med, samle møbler og møt venner.",
 			"enterHotel": "Skriv inn {hotelName}",

src/messages/pl.json

@@ -232,6 +232,7 @@
 		},
 		"home": {
 			"welcome": "Witamy w {hotelName}",
+			"heroEyebrow": "Witamy",
 			"welcomeSubtitle": "Twój hotel w stylu retro, teraz obsługiwany przez Next.js",
 			"welcomeBody": "Spędzaj czas, zbieraj meble i spotykaj się z przyjaciółmi.",
 			"enterHotel": "Wpisz {hotelName}",

src/messages/pt.json

@@ -232,6 +232,7 @@
 		},
 		"home": {
 			"welcome": "Bem-vindo ao {hotelName}",
+			"heroEyebrow": "Bem-vindo",
 			"welcomeSubtitle": "Seu hotel retrô, agora com tecnologia Next.js",
 			"welcomeBody": "Saia, colete mobis e encontre amigos.",
 			"enterHotel": "Digite {hotelName}",

src/messages/ro.json

@@ -232,6 +232,7 @@
 		},
 		"home": {
 			"welcome": "Bun venit la {hotelName}",
+			"heroEyebrow": "Bine ai venit",
 			"welcomeSubtitle": "Hotelul tău retro, acum dezvoltat de Next.js",
 			"welcomeBody": "Ieșiți, strângeți mobilier și întâlniți-vă cu prietenii.",
 			"enterHotel": "Introdu {hotelName}",

src/messages/ru.json

@@ -232,6 +232,7 @@
 		},
 		"home": {
 			"welcome": "Добро пожаловать в {hotelName}",
+			"heroEyebrow": "Добро пожаловать",
 			"welcomeSubtitle": "Ваш ретро-отель на базе Next.js",
 			"welcomeBody": "Тусуйтесь, собирайте мебель и встречайтесь с друзьями.",
 			"enterHotel": "Введите {hotelName}",

src/messages/sk.json

@@ -232,6 +232,7 @@
 		},
 		"home": {
 			"welcome": "Vitajte v {hotelName}",
+			"heroEyebrow": "Vitajte",
 			"welcomeSubtitle": "Váš retro hotel, ktorý teraz používa Next.js",
 			"welcomeBody": "Stretnite sa, zbierajte nábytok a stretávajte sa s priateľmi.",
 			"enterHotel": "Zadajte {hotelName}",

src/messages/sr.json

@@ -232,6 +232,7 @@
 		},
 		"home": {
 			"welcome": "Добро дошли у {hotelName}",
+			"heroEyebrow": "Добродошли",
 			"welcomeSubtitle": "Your retro hotel, now powered by Next.js",
 			"welcomeBody": "Hang out, collect furni, and meet friends.",
 			"enterHotel": "Унесите {hotelName}",

src/messages/sv.json

@@ -232,6 +232,7 @@
 		},
 		"home": {
 			"welcome": "Välkommen till {hotelName}",
+			"heroEyebrow": "Välkommen",
 			"welcomeSubtitle": "Ditt retrohotell, nu drivs av Next.js",
 			"welcomeBody": "Umgås, samla möbler och träffa vänner.",
 			"enterHotel": "Ange {hotelName}",

src/messages/tr.json

@@ -232,6 +232,7 @@
 		},
 		"home": {
 			"welcome": "{hotelName}'e hoş geldiniz",
+			"heroEyebrow": "Hoş geldiniz",
 			"welcomeSubtitle": "Retro oteliniz artık Next.js tarafından destekleniyor",
 			"welcomeBody": "Takılın, mobilya toplayın ve arkadaşlarla tanışın.",
 			"enterHotel": "{hotelName} girin",

src/messages/uk.json

@@ -232,6 +232,7 @@
 		},
 		"home": {
 			"welcome": "Ласкаво просимо до {hotelName}",
+			"heroEyebrow": "Ласкаво просимо",
 			"welcomeSubtitle": "Ваш ретро-готель, тепер на базі Next.js",
 			"welcomeBody": "Гуляйте, збирайте меблі та зустрічайтеся з друзями.",
 			"enterHotel": "Введіть {hotelName}",