From 29b9a4b0dc883c3e1cb4c6de7d64c28c243b8ced Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Sat, 12 Sep 2026 16:29:55 +0200
Subject: [PATCH] feat(site): professional card system and tidy landing layout

Refine the public UI for a cleaner, more professional and scannable
landing experience without leaving the classic Habbo style:

- SurfaceCard: softer layered shadow, gradient accent hairline on the top
  edge and a bolder header title across all public cards.
- Home: gradient hotel-name in the hero headline, shine effect on the
  primary CTA, hairline on the top bar.
- Login/register: consistent avatar tiles with rounded corners, subtle
  borders and a gentle hover lift; uniform username sizing.
- Add reusable theme-aware .card-hairline and .gradient-text utilities.
---
 src/app/(site)/login/page.tsx    | 20 ++++++++++-------
 src/app/(site)/page.tsx          | 12 +++++++----
 src/app/(site)/register/page.tsx | 16 ++++++++------
 src/app/globals.css              | 37 ++++++++++++++++++++++++++++++++
 src/components/surface-card.tsx  | 10 +++++----
 5 files changed, 73 insertions(+), 22 deletions(-)

diff --git a/src/app/(site)/login/page.tsx b/src/app/(site)/login/page.tsx
index 4e56990f..402a2dfb 100644
--- a/src/app/(site)/login/page.tsx
+++ b/src/app/(site)/login/page.tsx
@@ -122,24 +122,26 @@ export default async function LoginPage() {
 								bodyClassName="p-4"
 								className="card-glow"
 							>
-								<div className="grid grid-cols-4 gap-1.5">
+								<div className="grid grid-cols-4 gap-1.5 sm:gap-2">
 									{recentUsers.map((u) => (
 										<div
 											key={u.username}
-											className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
+											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"
 											style={{
 												background:
 													"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+												borderColor:
+													"color-mix(in srgb, var(--color-primary) 10%, transparent)",
 											}}
 										>
 											<UserAvatarThumbnail
 												figure={u.look}
 												alt=""
 												options={{ direction: 2 }}
-												className="rounded-md"
+												className="rounded-lg"
 											/>
 											<span
-												className="text-[8px] font-bold truncate w-full text-center leading-tight"
+												className="w-full truncate text-center text-[9px] font-bold leading-tight"
 												style={{ color: "var(--color-text-readable)" }}
 											>
 												{u.username}
@@ -157,24 +159,26 @@ export default async function LoginPage() {
 								bodyClassName="p-4"
 								className="card-glow"
 							>
-								<div className="grid grid-cols-4 gap-1.5">
+								<div className="grid grid-cols-4 gap-1.5 sm:gap-2">
 									{latestUsers.map((u) => (
 										<div
 											key={u.username}
-											className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
+											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"
 											style={{
 												background:
 													"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+												borderColor:
+													"color-mix(in srgb, var(--color-primary) 10%, transparent)",
 											}}
 										>
 											<UserAvatarThumbnail
 												figure={u.look}
 												alt=""
 												options={{ direction: 2 }}
-												className="rounded-md"
+												className="rounded-lg"
 											/>
 											<span
-												className="text-[8px] font-bold truncate w-full text-center leading-tight"
+												className="w-full truncate text-center text-[9px] font-bold leading-tight"
 												style={{ color: "var(--color-text-readable)" }}
 											>
 												{u.username}
diff --git a/src/app/(site)/page.tsx b/src/app/(site)/page.tsx
index 2d91dedf..8ab7a302 100644
--- a/src/app/(site)/page.tsx
+++ b/src/app/(site)/page.tsx
@@ -143,7 +143,7 @@ export default async function Home() {
 			{/* ── Top Bar ── */}
 			<Reveal>
 				<div
-					className="relative flex items-center justify-between rounded-xl border px-3 py-2.5 sm:px-5 sm:py-3"
+					className="relative flex items-center justify-between rounded-xl border px-3 py-2.5 sm:px-5 sm:py-3 card-hairline"
 					style={{
 						background:
 							"color-mix(in srgb, var(--color-surface) 60%, transparent)",
@@ -269,11 +269,15 @@ export default async function Home() {
 						<h1
 							className="text-2xl font-black leading-[1.05] tracking-tight mb-2 sm:text-3xl md:text-5xl lg:text-6xl"
 							style={{
-								color: "var(--color-text-readable)",
 								fontFamily: "var(--font-nunito)",
 							}}
 						>
-							<TypewriterText text={tp("welcome", { hotelName })} />
+							<span style={{ color: "var(--color-text-readable)" }}>
+								{tp("welcome", { hotelName: "" })}
+							</span>{" "}
+							<span className="gradient-text">
+								<TypewriterText text={hotelName} />
+							</span>
 						</h1>
 						<p
 							className="text-sm leading-relaxed max-w-2xl mb-5 sm:text-base md:text-lg md:mb-8"
@@ -284,7 +288,7 @@ export default async function Home() {
 						<div className="flex flex-wrap gap-2.5 sm:gap-3 justify-center">
 							<Link
 								href="/register"
-								className="inline-flex items-center gap-2 sm:gap-2.5 font-extrabold text-xs sm:text-sm px-5 sm:px-8 py-3 sm:py-4 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg"
+								className="btn-shine inline-flex items-center gap-2 sm:gap-2.5 font-extrabold text-xs sm:text-sm px-5 sm:px-8 py-3 sm:py-4 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg"
 								style={{
 									background: "var(--color-primary)",
 									color: "var(--color-primary-foreground)",
diff --git a/src/app/(site)/register/page.tsx b/src/app/(site)/register/page.tsx
index f3d79659..faf7984b 100644
--- a/src/app/(site)/register/page.tsx
+++ b/src/app/(site)/register/page.tsx
@@ -135,20 +135,22 @@ export default async function RegisterPage() {
 									{recentUsers.map((u) => (
 										<div
 											key={u.username}
-											className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
+											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"
 											style={{
 												background:
 													"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+												borderColor:
+													"color-mix(in srgb, var(--color-primary) 10%, transparent)",
 											}}
 										>
 											<UserAvatarThumbnail
 												figure={u.look}
 												alt=""
 												options={{ direction: 2 }}
-												className="rounded-md"
+												className="rounded-lg"
 											/>
 											<span
-												className="text-[8px] font-bold truncate w-full text-center leading-tight"
+												className="w-full truncate text-center text-[9px] font-bold leading-tight"
 												style={{ color: "var(--color-text-readable)" }}
 											>
 												{u.username}
@@ -170,20 +172,22 @@ export default async function RegisterPage() {
 									{latestUsers.map((u) => (
 										<div
 											key={u.username}
-											className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
+											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"
 											style={{
 												background:
 													"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+												borderColor:
+													"color-mix(in srgb, var(--color-primary) 10%, transparent)",
 											}}
 										>
 											<UserAvatarThumbnail
 												figure={u.look}
 												alt=""
 												options={{ direction: 2 }}
-												className="rounded-md"
+												className="rounded-lg"
 											/>
 											<span
-												className="text-[10px] font-bold truncate w-full text-center leading-tight"
+												className="w-full truncate text-center text-[9px] font-bold leading-tight"
 												style={{ color: "var(--color-text-readable)" }}
 											>
 												{u.username}
diff --git a/src/app/globals.css b/src/app/globals.css
index 8ff35c5b..1b64b51d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2018,3 +2018,40 @@ details[open] > summary .details-open\:rotate-180 {
 		0 12px 32px -10px color-mix(in srgb, var(--color-primary) 32%, transparent),
 		0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent);
 }
+
+/* Gradient accent hairline drawn on the top edge of a relative card. */
+.card-hairline {
+	position: relative;
+}
+.card-hairline::before {
+	content: "";
+	position: absolute;
+	inset-inline: 2%;
+	top: 0;
+	height: 2px;
+	border-radius: 999px;
+	background: linear-gradient(
+		90deg,
+		transparent,
+		color-mix(in srgb, var(--color-primary) 75%, transparent) 30%,
+		var(--color-primary) 50%,
+		color-mix(in srgb, var(--color-accent) 70%, transparent) 70%,
+		transparent
+	);
+	opacity: 0.55;
+	pointer-events: none;
+	z-index: 1;
+}
+
+/* Brand gradient text (primary → accent). */
+.gradient-text {
+	background: linear-gradient(
+		115deg,
+		var(--color-primary) 10%,
+		color-mix(in srgb, var(--color-primary) 55%, var(--color-accent)) 48%,
+		color-mix(in srgb, var(--color-accent) 92%, var(--color-primary)) 92%
+	);
+	-webkit-background-clip: text;
+	background-clip: text;
+	color: transparent;
+}
diff --git a/src/components/surface-card.tsx b/src/components/surface-card.tsx
index 5703f84e..516ec847 100644
--- a/src/components/surface-card.tsx
+++ b/src/components/surface-card.tsx
@@ -43,13 +43,15 @@ export function SurfaceCard({
 }: SurfaceCardProps) {
 	const hasHeader = Boolean(title || icon || (actionHref && actionLabel));
 
+	const CARD_SHADOW =
+		"0 1px 2px rgba(0,0,0,0.05), 0 8px 24px -10px color-mix(in srgb, var(--color-text-muted) 22%, transparent), 0 0 0 0.5px color-mix(in srgb, var(--color-text-muted) 6%, transparent)";
+
 	return (
 		<div
-			className={`surface-card overflow-hidden rounded-2xl border bg-[var(--color-surface)] ${className}`}
+			className={`surface-card card-hairline overflow-hidden rounded-2xl border bg-[var(--color-surface)] ${className}`}
 			style={{
 				borderColor: CARD_BORDER,
-				boxShadow:
-					"0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.03), 0 0 0 0.5px color-mix(in srgb, var(--color-text-muted) 6%, transparent)",
+				boxShadow: CARD_SHADOW,
 				...style,
 			}}
 		>
@@ -81,7 +83,7 @@ export function SurfaceCard({
 						)}
 						{title && (
 							<h2
-								className="text-sm font-bold tracking-tight"
+								className="text-sm font-extrabold tracking-wide"
 								style={{
 									fontFamily: "var(--font-nunito)",
 									color: "var(--color-text-readable)",