refactor: clean premium design, fix header banner, remove clutter

src/app/(site)/register/page.tsx

@@ -36,99 +36,72 @@ export default async function RegisterPage() {
 	]);
 
 	return (
-		<div className="flex flex-col lg:flex-row gap-8 min-h-[600px] animate-fade-in-up">
+		<div className="flex flex-col lg:flex-row gap-10">
-			{/* ── Left: Reception ── */}
+			{/* Left panel */}
 			<div className="lg:w-80 shrink-0 space-y-4">
-				<div className="gradient-border">
+				<div
+					className="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))`,
+					}}
+				>
+					<Image
+						src="/assets/images/FrankwithBag.gif"
+						alt="Frank"
+						width={130}
+						height={170}
+						className="object-contain mx-auto drop-shadow-xl"
+						unoptimized
+						priority
+					/>
 					<div
-						className="relative overflow-hidden rounded-[1.75rem] p-6 text-center animate-gradient"
+						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"
 						style={{
-							background: `linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 20%, var(--color-surface)) 0%, color-mix(in srgb, var(--color-primary) 6%, var(--color-background)) 100%)`,
+							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))",
 						}}
 					>
-						<div
+						<span className="w-2 h-2 rounded-full bg-green-500" />
-							className="absolute inset-0 opacity-[0.04]"
+						{online.toLocaleString()} online
-							style={{
-								backgroundImage:
-									"radial-gradient(circle at 50% 30%, white 0%, transparent 60%)",
-							}}
-						/>
-						<div
-							className="absolute top-0 left-0 right-0 h-px"
-							style={{
-								background:
-									"linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-primary) 30%, transparent), transparent)",
-							}}
-						/>
-						<div className="relative">
-							<Image
-								src="/assets/images/FrankwithBag.gif"
-								alt="Frank"
-								width={130}
-								height={170}
-								className="object-contain mx-auto drop-shadow-2xl animate-float"
-								unoptimized
-								priority
-							/>
-							<div
-								className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-[0.12em] mt-4 mb-3"
-								style={{
-									background:
-										"color-mix(in srgb, var(--color-primary) 16%, transparent)",
-									color: "var(--color-primary-readable, var(--color-primary))",
-									border:
-										"1px solid color-mix(in srgb, var(--color-primary) 18%, transparent)",
-								}}
-							>
-								<span
-									className="w-1.5 h-1.5 rounded-full animate-pulse"
-									style={{ background: "var(--color-success)" }}
-								/>
-								{online.toLocaleString()} online
-							</div>
-							<h1
-								className="text-xl font-black"
-								style={{ color: "var(--color-text-readable)" }}
-							>
-								Join{" "}
-								<span
-									style={{
-										color:
-											"var(--color-primary-readable, var(--color-primary))",
-									}}
-								>
-									{hotelName}
-								</span>
-							</h1>
-							<p
-								className="text-xs mt-1 max-w-[200px] mx-auto leading-relaxed"
-								style={{
-									color:
-										"var(--color-text-muted-readable, var(--color-text-muted))",
-								}}
-							>
-								{t("tagline")}
-							</p>
-						</div>
 					</div>
+					<h1
+						className="text-xl font-black"
+						style={{ color: "var(--color-text-readable)" }}
+					>
+						Join{" "}
+						<span
+							style={{
+								color: "var(--color-primary-readable, var(--color-primary))",
+							}}
+						>
+							{hotelName}
+						</span>
+					</h1>
+					<p
+						className="text-xs mt-1 mx-auto max-w-[200px] leading-relaxed"
+						style={{ color: "var(--color-text-muted)" }}
+					>
+						{t("tagline")}
+					</p>
 				</div>
 
 				{recentUsers.length > 0 && (
 					<div
-						className="rounded-xl border p-4 transition-all duration-300 hover:shadow-md"
+						className="rounded-2xl border p-4"
 						style={{
-							background:
+							background: "var(--color-surface)",
-								"color-mix(in srgb, var(--color-background) 50%, var(--color-surface))",
 							borderColor:
 								"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
 						}}
 					>
 						<h3
-							className="text-[10px] font-extrabold uppercase tracking-[0.15em] mb-2.5"
+							className="text-xs font-bold uppercase tracking-widest mb-3"
-							style={{
+							style={{ color: "var(--color-text-muted)" }}
-								color:
-									"var(--color-text-muted-readable, var(--color-text-muted))",
-							}}
 						>
 							Who&apos;s online
 						</h3>
@@ -136,7 +109,7 @@ export default async function RegisterPage() {
 							{recentUsers.map((u) => (
 								<div
 									key={u.username}
-									className="flex flex-col items-center gap-0.5 rounded-lg p-1.5 transition-all duration-200 hover:scale-105 cursor-default"
+									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)",
@@ -149,8 +122,8 @@ export default async function RegisterPage() {
 											size: "s",
 										})}
 										alt=""
-										width={28}
+										width={26}
-										height={34}
+										height={32}
 										className="rounded-md"
 										unoptimized
 									/>
@@ -168,9 +141,7 @@ export default async function RegisterPage() {
 
 				<p
 					className="text-xs text-center"
-					style={{
+					style={{ color: "var(--color-text-muted)" }}
-						color: "var(--color-text-muted-readable, var(--color-text-muted))",
-					}}
 				>
 					Already have an account?{" "}
 					<Link
@@ -185,9 +156,9 @@ export default async function RegisterPage() {
 				</p>
 			</div>
 
-			{/* ── Right: Registration ── */}
+			{/* Right: form */}
 			<div className="flex-1">
-				<div className="mb-6 text-center lg:text-left">
+				<div className="mb-6">
 					<h2
 						className="text-2xl font-black tracking-tight"
 						style={{ color: "var(--color-text-readable)" }}
@@ -196,12 +167,9 @@ export default async function RegisterPage() {
 					</h2>
 					<p
 						className="text-sm mt-0.5"
-						style={{
+						style={{ color: "var(--color-text-muted)" }}
-							color:
-								"var(--color-text-muted-readable, var(--color-text-muted))",
-						}}
 					>
-						Free and takes less than a minute — no email required
+						Free and takes less than a minute
 					</p>
 				</div>
 				<RegisterForm

src/components/site-header.tsx

@@ -25,7 +25,7 @@ export async function SiteHeader() {
 	const bannerUrl =
 		header && header !== "/assets/images/background.png"
 			? header
-			: "/assets/images/banner.png";
+			: "/assets/images/background.png";
 
 	return (
 		<div