From d6111387e48f26f09731186d02997c859897c58f Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Fri, 18 Sep 2026 13:35:22 +0200
Subject: [PATCH] feat(auth): align login and register with themed intro,
 translated social cards

---
 src/app/(site)/login/page.tsx    | 28 ++++++++++++++++------------
 src/app/(site)/register/page.tsx |  8 ++++++--
 src/messages/en.json             |  5 ++++-
 src/messages/it.json             |  5 ++++-
 4 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/app/(site)/login/page.tsx b/src/app/(site)/login/page.tsx
index 35278c30..3eec0a4e 100644
--- a/src/app/(site)/login/page.tsx
+++ b/src/app/(site)/login/page.tsx
@@ -16,7 +16,6 @@ import { ICON_FRIENDS, ICON_NAV_GOODY, ICON_NAV_ME } from "@/lib/site-icons";
 
 export default async function LoginPage() {
 	const t = await getTranslations("pages.login");
-	const th = await getTranslations("header");
 	const [hotelName, cfg, logo] = await Promise.all([
 		resolveHotelName(),
 		captchaConfig(),
@@ -51,24 +50,29 @@ export default async function LoginPage() {
 			<AuthTopBar hotelName={hotelName} logo={logo} />
 
 			<Reveal>
-				<div className="flex flex-col gap-8 lg:flex-row">
+				<div className="flex flex-col gap-8 lg:flex-row lg:items-start">
 					{/* Left panel */}
-					<div className="lg:w-80 shrink-0 space-y-4">
+					<div className="lg:w-96 shrink-0 space-y-4">
 						<SurfaceCard
-							className="card-glow relative p-6 text-center"
+							className="card-glow relative overflow-hidden p-6 text-center"
 							style={{
 								borderColor:
 									"color-mix(in srgb, var(--color-primary) 20%, transparent)",
-								background: `url(/assets/images/background.png) center/cover no-repeat`,
 							}}
 						>
 							<div
 								className="absolute inset-0"
 								style={{
 									background:
-										"linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 85%, transparent) 0%, color-mix(in srgb, var(--color-surface) 40%, transparent) 100%)",
+										"linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, transparent), color-mix(in srgb, var(--color-accent) 10%, transparent))",
 								}}
 							/>
+							<div
+								aria-hidden="true"
+								className="absolute inset-0 overflow-hidden"
+							>
+								<div className="brand-halo left-1/2 top-0 h-64 w-[460px] max-w-full -translate-x-1/2 -translate-y-1/2" />
+							</div>
 							<div className="relative">
 								<div className="brand-halo left-1/2 top-8 h-52 w-52 -translate-x-1/2" />
 								<Image
@@ -95,7 +99,7 @@ export default async function LoginPage() {
 										<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
 										<span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
 									</span>
-									{th("online", { count: online, hotel: "" }).trim()}
+									{t("usersOnline", { count: online })}
 								</div>
 								<h1
 									className="text-xl font-black"
@@ -117,7 +121,7 @@ export default async function LoginPage() {
 
 						{recentUsers.length > 0 && (
 							<SurfaceCard
-								title={th("online", { count: online, hotel: "" }).trim()}
+								title={t("whoIsOnline")}
 								icon={ICON_NAV_GOODY}
 								bodyClassName="p-4"
 								className="card-glow"
@@ -126,7 +130,7 @@ export default async function LoginPage() {
 									{recentUsers.map((u) => (
 										<div
 											key={u.username}
-											className="flex flex-col items-center gap-1.5 rounded-xl border px-1 py-2 transition-all duration-200 hover:-translate-y-0.5"
+											className="flex flex-col items-center gap-1.5 rounded-xl border px-1 py-2 transition-all duration-200 hover:-translate-y-0.5 hover:ring-1 hover:ring-[color-mix(in_srgb,var(--color-primary)_35%,transparent)]"
 											style={{
 												background:
 													"color-mix(in srgb, var(--color-primary) 4%, transparent)",
@@ -154,7 +158,7 @@ export default async function LoginPage() {
 
 						{latestUsers.length > 0 && (
 							<SurfaceCard
-								title="Newest citizens"
+								title={t("newestCitizens")}
 								icon={ICON_FRIENDS}
 								bodyClassName="p-4"
 								className="card-glow"
@@ -163,7 +167,7 @@ export default async function LoginPage() {
 									{latestUsers.map((u) => (
 										<div
 											key={u.username}
-											className="flex flex-col items-center gap-1.5 rounded-xl border px-1 py-2 transition-all duration-200 hover:-translate-y-0.5"
+											className="flex flex-col items-center gap-1.5 rounded-xl border px-1 py-2 transition-all duration-200 hover:-translate-y-0.5 hover:ring-1 hover:ring-[color-mix(in_srgb,var(--color-primary)_35%,transparent)]"
 											style={{
 												background:
 													"color-mix(in srgb, var(--color-primary) 4%, transparent)",
@@ -191,7 +195,7 @@ export default async function LoginPage() {
 					</div>
 
 					{/* Right: form */}
-					<div className="flex-1">
+					<div className="flex-1 lg:sticky lg:top-6">
 						<SurfaceCard
 							title={t("title")}
 							icon={ICON_NAV_ME}
diff --git a/src/app/(site)/register/page.tsx b/src/app/(site)/register/page.tsx
index 11fff2b5..8cd13634 100644
--- a/src/app/(site)/register/page.tsx
+++ b/src/app/(site)/register/page.tsx
@@ -101,7 +101,10 @@ export default async function RegisterPage() {
 													"var(--color-primary-readable, var(--color-primary))",
 											}}
 										>
-											<span className="w-2 h-2 rounded-full bg-primary" />
+											<span className="relative flex h-2 w-2">
+												<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
+												<span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
+											</span>
 											{tpr("usersOnline", { count: online })}
 										</div>
 										<h1
@@ -111,7 +114,8 @@ export default async function RegisterPage() {
 												fontFamily: "var(--font-nunito)",
 											}}
 										>
-											{tpr("title")} — {hotelName}
+											{tpr("title")} —{" "}
+											<span className="gradient-text">{hotelName}</span>
 										</h1>
 										<p
 											className="text-xs mt-1.5 leading-relaxed"
diff --git a/src/messages/en.json b/src/messages/en.json
index da9dbe9f..ac25d2f9 100644
--- a/src/messages/en.json
+++ b/src/messages/en.json
@@ -977,7 +977,10 @@
 			"errorInvalidCredentials": "Invalid username or password",
 			"errorInvalid2fa": "Invalid 2FA code",
 			"errorUnverified": "Please verify your email before signing in.",
-			"errorCaptcha": "Captcha verification failed. Please try again."
+			"errorCaptcha": "Captcha verification failed. Please try again.",
+			"whoIsOnline": "Who's online",
+			"newestCitizens": "Newest citizens",
+			"usersOnline": "{count} online"
 		},
 		"register": {
 			"title": "Create account",
diff --git a/src/messages/it.json b/src/messages/it.json
index e69ff500..18b2cfa6 100644
--- a/src/messages/it.json
+++ b/src/messages/it.json
@@ -951,7 +951,10 @@
 			"errorUnverified": "Verifica la tua email prima di accedere.",
 			"errorCaptcha": "Verifica captcha non riuscita. Riprova.",
 			"welcomeBack": "Bentornato",
-			"welcomeBackSub": "Accedi per continuare su {hotelName}"
+			"welcomeBackSub": "Accedi per continuare su {hotelName}",
+			"whoIsOnline": "Chi è online",
+			"newestCitizens": "Nuovi cittadini",
+			"usersOnline": "{count} online"
 		},
 		"register": {
 			"title": "Crea un account",