Redesign register + login pages: glass cards, Habbo bg hero panels

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,13 +41,19 @@ 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:
+						borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
-							"color-mix(in srgb, var(--color-primary) 20%, transparent)",
+						background: `url(/assets/images/background.png) center/cover no-repeat`,
-						background: `linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)), var(--color-surface))`,
 					}}
 				>
+					<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) 50%, transparent) 100%)",
+						}}
+					/>
+					<div className="relative">
 						<Image
 							src="/assets/images/FrankwithBag.gif"
 							alt="Frank"
@@ -58,16 +64,17 @@ export default async function LoginPage() {
 							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="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:
+								borderColor: "color-mix(in srgb, var(--color-primary) 18%, transparent)",
-								"color-mix(in srgb, var(--color-primary) 18%, transparent)",
+								background: "color-mix(in srgb, var(--color-primary) 10%, transparent)",
-							background:
-								"color-mix(in srgb, var(--color-primary) 10%, transparent)",
 								color: "var(--color-primary-readable, var(--color-primary))",
 							}}
 						>
-						<span className="w-2 h-2 rounded-full bg-green-500" />
+							<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
@@ -80,23 +87,26 @@ export default async function LoginPage() {
 							className="text-xs mt-1 mx-auto max-w-[200px] leading-relaxed"
 							style={{ color: "var(--color-text-muted)" }}
 						>
-						{t("welcomeBackSub", { hotelName: hotelName ?? "Hotel" })}
+							{t("welcomeBackSub", { hotelName: hotelName ?? "Atom" })}
 						</p>
 					</div>
+				</div>
 
 				{recentUsers.length > 0 && (
 					<div
 						className="rounded-2xl border p-4"
 						style={{
-							background: "var(--color-surface)",
+							background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
-							borderColor:
+							backdropFilter: "blur(8px)",
-								"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+							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:
+										background: "color-mix(in srgb, var(--color-primary) 4%, transparent)",
-											"color-mix(in srgb, var(--color-primary) 4%, transparent)",
 									}}
 								>
 									<Image
-										src={avatarImageUrl(imager, u.look, {
+										src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2, size: "s" })}
-											headOnly: true,
-											direction: 2,
-											size: "s",
-										})}
 										alt=""
 										width={26}
 										height={32}
@@ -133,25 +138,29 @@ export default async function LoginPage() {
 					</div>
 				)}
 
-				<p
+				<p className="text-xs text-center" style={{ color: "var(--color-text-muted)" }}>
-					className="text-xs text-center"
+					{t("noAccount") ?? "No account?"}{" "}
-					style={{ color: "var(--color-text-muted)" }}
-				>
-					No account?{" "}
 					<Link
 						href="/register"
 						className="font-extrabold hover:underline"
-						style={{
+						style={{ color: "var(--color-primary-readable, var(--color-primary))" }}
-							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="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)",
+					}}
+				>
 					<div className="mb-6">
 						<h2
 							className="text-2xl font-black tracking-tight"
@@ -176,5 +185,6 @@ export default async function LoginPage() {
 					/>
 				</div>
 			</div>
+		</div>
 	);
 }