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/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))",
+						"linear-gradient(90deg, var(--panel-surface), color-mix(in srgb, var(--color-primary) 7%, var(--panel-surface)))",
-					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)",
 				}}
 			>
 				<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`);
+		pending.current = {
-		el.style.setProperty("--spot-y", `${event.clientY - rect.top}px`);
+			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)
+		backgroundImage &&
-			? `body.site-bg{background-image:url("${backgroundImage}");background-position:${safeBgPosition};background-size:${safeBgSize};background-repeat:${safeBgRepeat}}`
+		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}",