feat(site): redesign home, login and register with premium dark gaming theme

Replaced the classic Habbo landing style on the home, login and register pages with a modern premium dark-gaming look: always-dark hero canvas with brand glows, grid overlay and ambient orbs, glass panels, gradient text and floating art. Adds shared LandingTopBar, AuthShell and BrandFrank components plus reusable premium CSS utilities. Build, typecheck and lint pass.

src/components/auth/register-form.tsx

@@ -113,52 +113,30 @@ export function RegisterForm({
 				/>
 			) : null}
 			{/* Header Banner */}
-			<div
-				className="relative overflow-hidden bg-center bg-cover rounded-t-xl"
-				style={{
-					backgroundImage: "url(/assets/images/mybobba_banner.png)",
-					height: "160px",
-				}}
-			>
-				<div
-					className="absolute inset-0 z-10"
-					style={{
-						background:
-							"linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%)",
-					}}
-				/>
-				<div className="relative flex items-center justify-center w-full h-full z-20">
-					<div
-						className="relative animate-float"
-						style={{ width: "140px", height: "140px" }}
+			<div className="mb-7 flex items-center gap-4">
+				<div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl border border-white/10 bg-white/5">
+					<Image
+						src="/assets/images/icons/navigation/me.png"
+						alt=""
+						width={22}
+						height={22}
+						unoptimized
+						className="opacity-90"
+					/>
+				</div>
+				<div className="min-w-0">
+					<p
+						className="text-[11px] font-extrabold uppercase tracking-widest"
+						style={{ color: "var(--color-primary)" }}
 					>
-						<div
-							className="absolute inset-0 rounded-full overflow-hidden"
-							style={{ zIndex: -1 }}
-						>
-							<div
-								className="w-full h-full"
-								style={{
-									background: "black",
-									filter: "blur(8px)",
-									transform: "scale(1.2)",
-									opacity: 0.6,
-								}}
-							/>
-						</div>
-						<Image
-							src="/assets/images/FrankwithBag.gif"
-							alt=""
-							fill
-							className="!static"
-							style={{
-								objectFit: "contain",
-								objectPosition: "center",
-								width: "100%",
-								height: "100%",
-							}}
-						/>
-					</div>
+						{t("accountDetails")}
+					</p>
+					<h2 className="m-0 text-2xl font-black tracking-tight text-white">
+						{t("title")}
+					</h2>
+					<p className="mt-0.5 truncate text-sm text-white/55">
+						{t("subtitle")}
+					</p>
 				</div>
 			</div>
 
@@ -171,12 +149,7 @@ export function RegisterForm({
 					};
 					formAction(fd);
 				}}
-				className="p-6 flex flex-col gap-6"
-				style={{
-					backgroundColor:
-						"color-mix(in srgb, var(--color-background) 50%, var(--color-surface))",
-					borderRadius: "0 0 12px 12px",
-				}}
+				className="flex flex-col gap-6"
 			>
 				{(error || state.error) && (
 					<div
@@ -383,8 +356,7 @@ export function RegisterForm({
 						termsError ? "animate-shake" : ""
 					}`}
 					style={{
-						backgroundColor:
-							"color-mix(in srgb, var(--color-background) 50%, var(--color-surface))",
+						backgroundColor: "var(--color-background)",
 						border: `1px solid ${
 							termsError
 								? "var(--color-danger)"