From 94c02d9ee6f72f9a5352edf20c5f0fa475c2bbcf Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Wed, 22 Jul 2026 18:31:10 +0200
Subject: [PATCH] Redesign register + login pages: glass cards, Habbo bg hero
 panels

---
 src/app/(site)/login/page.tsx | 162 ++++++++++++++++++----------------
 1 file changed, 86 insertions(+), 76 deletions(-)

diff --git a/src/app/(site)/login/page.tsx b/src/app/(site)/login/page.tsx
index 50957614..ce7f041b 100644
--- a/src/app/(site)/login/page.tsx
+++ b/src/app/(site)/login/page.tsx
@@ -13,7 +13,7 @@ export default async function LoginPage() {
 	const t = await getTranslations("pages.login");
 	const th = await getTranslations("header");
 	const [hotelName, imagerRaw, cfg] = await Promise.all([
-		siteSettings.get("hotel_name", "Hotel"),
+		siteSettings.get("hotel_name", "Atom"),
 		siteSettings.get(
 			"habbo_imaging_url",
 			"https://www.habbo.com/habbo-imaging/avatarimage",
@@ -41,62 +41,72 @@ export default async function LoginPage() {
 			{/* Left panel */}
 			<div className="lg:w-80 shrink-0 space-y-4">
 				<div
-					className="rounded-2xl border p-6 text-center"
+					className="relative overflow-hidden rounded-2xl border p-6 text-center"
 					style={{
-						borderColor:
-							"color-mix(in srgb, var(--color-primary) 20%, transparent)",
-						background: `linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)), var(--color-surface))`,
+						borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
+						background: `url(/assets/images/background.png) center/cover no-repeat`,
 					}}
 				>
-					<Image
-						src="/assets/images/FrankwithBag.gif"
-						alt="Frank"
-						width={130}
-						height={170}
-						className="object-contain mx-auto drop-shadow-xl"
-						unoptimized
-						priority
-					/>
 					<div
-						className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full text-xs font-bold uppercase tracking-wider mt-4 mb-3 border"
+						className="absolute inset-0"
 						style={{
-							borderColor:
-								"color-mix(in srgb, var(--color-primary) 18%, transparent)",
-							background:
-								"color-mix(in srgb, var(--color-primary) 10%, transparent)",
-							color: "var(--color-primary-readable, var(--color-primary))",
+							background: "linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 85%, transparent) 0%, color-mix(in srgb, var(--color-surface) 50%, transparent) 100%)",
 						}}
-					>
-						<span className="w-2 h-2 rounded-full bg-green-500" />
-						{th("online", { count: online, hotel: "" }).trim()}
+					/>
+					<div className="relative">
+						<Image
+							src="/assets/images/FrankwithBag.gif"
+							alt="Frank"
+							width={130}
+							height={170}
+							className="object-contain mx-auto drop-shadow-xl"
+							unoptimized
+							priority
+						/>
+						<div
+							className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full text-xs font-bold uppercase tracking-wider mt-4 mb-3 border backdrop-blur-sm"
+							style={{
+								borderColor: "color-mix(in srgb, var(--color-primary) 18%, transparent)",
+								background: "color-mix(in srgb, var(--color-primary) 10%, transparent)",
+								color: "var(--color-primary-readable, var(--color-primary))",
+							}}
+						>
+							<span className="relative flex h-2 w-2">
+								<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+								<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
+							</span>
+							{th("online", { count: online, hotel: "" }).trim()}
+						</div>
+						<h1
+							className="text-xl font-black"
+							style={{ color: "var(--color-text-readable)" }}
+						>
+							{t("welcomeBack")}
+						</h1>
+						<p
+							className="text-xs mt-1 mx-auto max-w-[200px] leading-relaxed"
+							style={{ color: "var(--color-text-muted)" }}
+						>
+							{t("welcomeBackSub", { hotelName: hotelName ?? "Atom" })}
+						</p>
 					</div>
-					<h1
-						className="text-xl font-black"
-						style={{ color: "var(--color-text-readable)" }}
-					>
-						{t("welcomeBack")}
-					</h1>
-					<p
-						className="text-xs mt-1 mx-auto max-w-[200px] leading-relaxed"
-						style={{ color: "var(--color-text-muted)" }}
-					>
-						{t("welcomeBackSub", { hotelName: hotelName ?? "Hotel" })}
-					</p>
 				</div>
 
 				{recentUsers.length > 0 && (
 					<div
 						className="rounded-2xl border p-4"
 						style={{
-							background: "var(--color-surface)",
-							borderColor:
-								"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+							background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
+							backdropFilter: "blur(8px)",
+							WebkitBackdropFilter: "blur(8px)",
+							borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
 						}}
 					>
 						<h3
-							className="text-xs font-bold uppercase tracking-widest mb-3"
+							className="text-xs font-bold uppercase tracking-widest mb-3 flex items-center gap-2"
 							style={{ color: "var(--color-text-muted)" }}
 						>
+							<span className="w-2 h-2 rounded-full bg-green-500" />
 							{th("online", { count: online, hotel: "" }).trim()}
 						</h3>
 						<div className="grid grid-cols-4 gap-1.5">
@@ -105,16 +115,11 @@ export default async function LoginPage() {
 									key={u.username}
 									className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
 									style={{
-										background:
-											"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+										background: "color-mix(in srgb, var(--color-primary) 4%, transparent)",
 									}}
 								>
 									<Image
-										src={avatarImageUrl(imager, u.look, {
-											headOnly: true,
-											direction: 2,
-											size: "s",
-										})}
+										src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2, size: "s" })}
 										alt=""
 										width={26}
 										height={32}
@@ -133,47 +138,52 @@ export default async function LoginPage() {
 					</div>
 				)}
 
-				<p
-					className="text-xs text-center"
-					style={{ color: "var(--color-text-muted)" }}
-				>
-					No account?{" "}
+				<p className="text-xs text-center" style={{ color: "var(--color-text-muted)" }}>
+					{t("noAccount") ?? "No account?"}{" "}
 					<Link
 						href="/register"
 						className="font-extrabold hover:underline"
-						style={{
-							color: "var(--color-primary-readable, var(--color-primary))",
-						}}
+						style={{ color: "var(--color-primary-readable, var(--color-primary))" }}
 					>
-						Create one
+						{t("createOne") ?? "Create one"}
 					</Link>
 				</p>
 			</div>
 
 			{/* Right: form */}
 			<div className="flex-1">
-				<div className="mb-6">
-					<h2
-						className="text-2xl font-black tracking-tight"
-						style={{ color: "var(--color-text-readable)" }}
-					>
-						{t("title")}
-					</h2>
-					<p
-						className="text-sm mt-0.5"
-						style={{ color: "var(--color-text-muted)" }}
-					>
-						{t("subtitle")}
-					</p>
-				</div>
-				<LoginForm
-					captcha={{
-						provider: cfg.provider,
-						siteKey: cfg.siteKey || undefined,
-						field: cfg.field || undefined,
+				<div
+					className="rounded-2xl border p-6"
+					style={{
+						background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
+						backdropFilter: "blur(8px)",
+						WebkitBackdropFilter: "blur(8px)",
+						borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
 					}}
-					nonce={nonce}
-				/>
+				>
+					<div className="mb-6">
+						<h2
+							className="text-2xl font-black tracking-tight"
+							style={{ color: "var(--color-text-readable)" }}
+						>
+							{t("title")}
+						</h2>
+						<p
+							className="text-sm mt-0.5"
+							style={{ color: "var(--color-text-muted)" }}
+						>
+							{t("subtitle")}
+						</p>
+					</div>
+					<LoginForm
+						captcha={{
+							provider: cfg.provider,
+							siteKey: cfg.siteKey || undefined,
+							field: cfg.field || undefined,
+						}}
+						nonce={nonce}
+					/>
+				</div>
 			</div>
 		</div>
 	);