From 782271a31ba93cab243d7fc27b3976b352051555 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Wed, 22 Jul 2026 19:30:54 +0200
Subject: [PATCH] Premium polish: enhanced toolbar, glass cards, Habbo bg
 panels, animations

---
 src/app/(site)/login/page.tsx    | 36 +++++++++++------
 src/app/(site)/page.tsx          | 63 ++++++++++++++++++++---------
 src/app/(site)/register/page.tsx | 69 +++++++++++++++++++++++---------
 3 files changed, 119 insertions(+), 49 deletions(-)

diff --git a/src/app/(site)/login/page.tsx b/src/app/(site)/login/page.tsx
index 9a590848..e90fdf04 100644
--- a/src/app/(site)/login/page.tsx
+++ b/src/app/(site)/login/page.tsx
@@ -48,17 +48,29 @@ export default async function LoginPage() {
 
 	return (
 		<div className="flex flex-col gap-6">
-			<div
-				className="flex items-center justify-end gap-2 rounded-2xl border px-4 py-2.5"
-				style={{
-					background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
-					backdropFilter: "blur(8px)",
-					WebkitBackdropFilter: "blur(8px)",
-					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-				}}
-			>
-				<LanguageSwitcher />
-				<ThemeSwitcher />
+			<div className="relative">
+				<div
+					className="absolute -inset-6 rounded-full opacity-[0.06] blur-[40px]"
+					style={{ background: "var(--color-primary)" }}
+				/>
+				<div
+					className="relative flex items-center justify-between rounded-2xl border px-5 py-3"
+					style={{
+						background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
+						backdropFilter: "blur(12px)",
+						WebkitBackdropFilter: "blur(12px)",
+						borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+					}}
+				>
+					<span className="text-xs font-bold uppercase tracking-[0.15em] opacity-40" style={{ color: "var(--color-text-muted)" }}>
+						{hotelName}
+					</span>
+					<div className="flex items-center gap-1">
+						<LanguageSwitcher />
+						<div className="w-px h-5 mx-1" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
+						<ThemeSwitcher />
+					</div>
+				</div>
 			</div>
 			<div className="flex flex-col lg:flex-row gap-10">
 			{/* Left panel */}
@@ -73,7 +85,7 @@ export default async function LoginPage() {
 					<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%)",
+							background: "linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 85%, transparent) 0%, color-mix(in srgb, var(--color-surface) 40%, transparent) 100%)",
 						}}
 					/>
 					<div className="relative">
diff --git a/src/app/(site)/page.tsx b/src/app/(site)/page.tsx
index 1b3f9ff5..b85f38db 100644
--- a/src/app/(site)/page.tsx
+++ b/src/app/(site)/page.tsx
@@ -86,18 +86,39 @@ export default async function Home() {
 
 	return (
 		<div className="flex flex-col gap-14 pb-14">
+			<style>{`
+				@keyframes hero-glow {
+					0%, 100% { opacity: 0.08; transform: scale(1); }
+					50% { opacity: 0.15; transform: scale(1.05); }
+				}
+				.hero-glow {
+					animation: hero-glow 6s ease-in-out infinite;
+				}
+			`}</style>
 			{/* ── Toolbar ── */}
-			<div
-				className="flex items-center justify-end gap-2 rounded-2xl border px-4 py-2.5"
-				style={{
-					background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
-					backdropFilter: "blur(8px)",
-					WebkitBackdropFilter: "blur(8px)",
-					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-				}}
-			>
-				<LanguageSwitcher />
-				<ThemeSwitcher />
+			<div className="relative">
+				<div
+					className="absolute -inset-6 rounded-full opacity-[0.06] blur-[40px]"
+					style={{ background: "var(--color-primary)" }}
+				/>
+				<div
+					className="relative flex items-center justify-between rounded-2xl border px-5 py-3"
+					style={{
+						background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
+						backdropFilter: "blur(12px)",
+						WebkitBackdropFilter: "blur(12px)",
+						borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+					}}
+				>
+					<span className="text-xs font-bold uppercase tracking-[0.15em] opacity-40" style={{ color: "var(--color-text-muted)" }}>
+						{hotelName}
+					</span>
+					<div className="flex items-center gap-1">
+						<LanguageSwitcher />
+						<div className="w-px h-5 mx-1" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
+						<ThemeSwitcher />
+					</div>
+				</div>
 			</div>
 			{/* ── 1. Hero ── */}
 			<div
@@ -107,13 +128,19 @@ export default async function Home() {
 					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
 				}}
 			>
-				<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) 50%, color-mix(in srgb, var(--color-surface) 20%, transparent) 100%)",
-					}}
-				/>
+		<div
+				className="absolute inset-0 hero-glow"
+				style={{
+					background: "radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--color-primary) 20%, transparent) 0%, transparent 60%)",
+				}}
+			/>
+			<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) 50%, color-mix(in srgb, var(--color-surface) 15%, transparent) 100%)",
+				}}
+			/>
 				<div className="relative flex flex-col lg:flex-row items-center gap-8 lg:gap-14">
 					<div className="flex-1 text-center lg:text-left">
 						<div
diff --git a/src/app/(site)/register/page.tsx b/src/app/(site)/register/page.tsx
index 5e265dc4..c0fe8229 100644
--- a/src/app/(site)/register/page.tsx
+++ b/src/app/(site)/register/page.tsx
@@ -48,29 +48,47 @@ export default async function RegisterPage() {
 
 	return (
 		<div className="flex flex-col gap-6">
-			<div
-				className="flex items-center justify-end gap-2 rounded-2xl border px-4 py-2.5"
-				style={{
-					background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
-					backdropFilter: "blur(8px)",
-					WebkitBackdropFilter: "blur(8px)",
-					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-				}}
-			>
-				<LanguageSwitcher />
-				<ThemeSwitcher />
+			<div className="relative">
+				<div
+					className="absolute -inset-6 rounded-full opacity-[0.06] blur-[40px]"
+					style={{ background: "var(--color-primary)" }}
+				/>
+				<div
+					className="relative flex items-center justify-between rounded-2xl border px-5 py-3"
+					style={{
+						background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
+						backdropFilter: "blur(12px)",
+						WebkitBackdropFilter: "blur(12px)",
+						borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+					}}
+				>
+					<span className="text-xs font-bold uppercase tracking-[0.15em] opacity-40" style={{ color: "var(--color-text-muted)" }}>
+						{hotelName}
+					</span>
+					<div className="flex items-center gap-1">
+						<LanguageSwitcher />
+						<div className="w-px h-5 mx-1" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
+						<ThemeSwitcher />
+					</div>
+				</div>
 			</div>
 			<div className="flex flex-col lg:flex-row gap-10">
 			{/* 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`,
 					}}
 				>
+					<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%)",
+						}}
+					/>
+					<div className="relative">
 					<Image
 						src="/assets/images/FrankwithBag.gif"
 						alt="Frank"
@@ -106,20 +124,23 @@ export default async function RegisterPage() {
 						{th("tagline")}
 					</p>
 				</div>
+			</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" />
 							{tpr("whoIsOnline")}
 						</h3>
 						<div className="grid grid-cols-4 gap-1.5">
@@ -220,6 +241,15 @@ export default async function RegisterPage() {
 
 			{/* 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"
@@ -245,5 +275,6 @@ export default async function RegisterPage() {
 			</div>
 			</div>
 		</div>
+		</div>
 	);
 }