revert(site): restore classic Habbo landing with soft theme polish

Replace the premium dark-gaming redesign of home, login and register with
the original classic landing (Habbo sky background, AuthTopBar, SurfaceCard
layout). Keeps the theme background visible again and adds a subtle
theme-aware brand halo behind the hero/Frank plus a soft primary glow on
card hover.

Also upgrades dependencies: next 16.3.5, vite 8.3.0 (typescript 7.0.2 was
already latest). Temporarily lowers pnpm minimumReleaseAge to 60 min so the
fresh 16.3.5 release can be installed; restore to 1440 once it is 24h old.

package.json

@@ -66,7 +66,7 @@
 		"motion": "13.2.0",
 		"music-metadata": "11.15.0",
 		"mysql2": "3.24.3",
-		"next": "16.3.4",
+		"next": "16.3.5",
 		"next-auth": "5.0.0-beta.32",
 		"next-intl": "4.14.2",
 		"otplib": "13.5.0",
@@ -102,6 +102,7 @@
 		"tailwindcss": "4.3.3",
 		"tsx": "4.23.13",
 		"typescript": "7.0.2",
+		"vite": "8.3.0",
 		"vitest": "5.0.0"
 	}
 }

pnpm-workspace.yaml

@@ -5,7 +5,7 @@ allowBuilds:
   "@swc/core": true
   msw: false
 
-minimumReleaseAge: 1440
+minimumReleaseAge: 60
 
 overrides:
   # drizzle-kit still uses an obsolete development-server dependency.

src/components/auth/auth-shell.tsx

@@ -1,47 +0,0 @@
-import type { ReactNode } from "react";
-import { AmbientOrbs } from "@/components/ambient-orbs";
-import { LandingTopBar } from "@/components/landing-top-bar";
-
-/**
- * Premium dark-gaming shell shared by the login and register pages.
- * Renders an always-dark hero canvas (brand glows + grid overlay) with a
- * hotel header on top, a brand/side column on the left and the auth form
- * (rendered by the page) on the right in a frosted glass panel.
- */
-export function AuthShell({
-	hotelName,
-	logo,
-	side,
-	footer,
-	children,
-}: {
-	hotelName: string;
-	logo?: string | null;
-	side: ReactNode;
-	footer?: ReactNode;
-	children: ReactNode;
-}) {
-	return (
-		<section className="landing-hero w-full overflow-hidden rounded-2xl border border-white/10 sm:rounded-3xl">
-			{/* Ambient glows */}
-			<AmbientOrbs />
-
-			{/* Header */}
-			<LandingTopBar hotelName={hotelName} logo={logo} />
-
-			{/* Body */}
-			<div className="relative z-10 grid gap-8 px-4 pb-8 pt-6 sm:px-7 sm:pb-10 sm:pt-8 lg:grid-cols-[1fr_1.05fr] lg:gap-12">
-				<div className="flex flex-col">{side}</div>
-				<div className="glass-panel relative h-fit w-full rounded-2xl p-5 sm:p-7 lg:sticky lg:top-6">
-					{children}
-				</div>
-			</div>
-
-			{footer ? (
-				<div className="relative z-10 border-t border-white/10 px-4 py-4 text-center sm:px-7">
-					{footer}
-				</div>
-			) : null}
-		</section>
-	);
-}

src/components/auth/brand-frank.tsx

@@ -1,32 +0,0 @@
-import Image from "next/image";
-
-/**
- * Floating brand art for the premium auth pages: the welcome character
- * hovers over a pulsing primary halo with a faint slow-orbiting ring.
- */
-export function BrandFrank({ size = 150 }: { size?: number }) {
-	return (
-		<div className="relative flex items-center justify-center">
-			<style>{`@keyframes spin-slow { to { transform: rotate(360deg); } }`}</style>
-			<span className="hero-halo h-40 w-40 sm:h-48 sm:w-48" />
-			<span
-				className="absolute h-52 w-52 rounded-full border border-dashed sm:h-64 sm:w-64"
-				style={{
-					borderColor: "color-mix(in srgb, #ffffff 16%, transparent)",
-					animation: "spin-slow 28s linear infinite",
-				}}
-			/>
-			<div className="animate-float relative z-10 drop-shadow-[0_20px_30px_rgba(0,0,0,0.45)]">
-				<Image
-					src="/assets/images/FrankwithBag.gif"
-					alt=""
-					width={size}
-					height={Math.round(size * 1.29)}
-					className="object-contain"
-					unoptimized
-					priority
-				/>
-			</div>
-		</div>
-	);
-}

src/components/auth/register-form.tsx

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

src/components/landing-top-bar.tsx

@@ -1,53 +0,0 @@
-import Image from "next/image";
-import { Clock } from "@/components/clock";
-import { LanguageSwitcher } from "@/components/language-switcher";
-import { ThemeSwitcher } from "@/components/theme-switcher";
-
-/**
- * Frosted top bar shared by the home hero and the premium auth pages.
- * Dark-styled to sit on the "always-dark" landing canvas.
- */
-export function LandingTopBar({
-	hotelName,
-	logo,
-}: {
-	hotelName: string;
-	logo?: string | null;
-}) {
-	return (
-		<div className="relative z-10 flex items-center justify-between gap-3 border-b border-white/10 px-4 py-3 sm:px-7 sm:py-4">
-			<div className="flex min-w-0 items-center gap-2.5 sm:gap-3">
-				{logo ? (
-					<Image
-						src={logo}
-						alt={hotelName}
-						width={110}
-						height={30}
-						className="shrink-0 object-contain"
-						unoptimized
-						style={{ maxHeight: 30, width: "auto", height: "auto" }}
-					/>
-				) : (
-					<Image
-						src="/assets/images/icons/lighthouse.png"
-						alt={hotelName}
-						width={30}
-						height={30}
-						className="shrink-0"
-						unoptimized
-					/>
-				)}
-				<span className="hidden truncate text-sm font-extrabold uppercase tracking-widest landing-text-secondary sm:inline">
-					{hotelName}
-				</span>
-			</div>
-			<div className="flex shrink-0 items-center gap-1 rounded-xl border border-white/10 landing-chip px-1.5 py-1 sm:px-2">
-				<LanguageSwitcher />
-				<div className="hidden h-5 w-px landing-divider sm:block" />
-				<Clock />
-				<div className="h-5 w-px landing-divider" />
-				<ThemeSwitcher />
-			</div>
-		</div>
-	);
-}