refactor: consolidate card components into a single SurfaceCard

Replace the three near-identical public card primitives (ContentCard for
content pages, SectionCard for auth/account, and the new SurfaceCard) by
merging SectionCard into SurfaceCard, which now supports an optional header
(title/icon/action). Every remaining ad-hoc inline `rounded-2xl border`
card across (site) is converted to SurfaceCard, preserving each card's unique
visuals (background images, blur, gradients) via the style passthrough.

Net result: the public site uses exactly two card components — ContentCard
(CMS/content pages) and SurfaceCard (everything else) — and the shadcn Card
in components/ui/card.tsx is left untouched for admin.

Also deletes the now-unused components/home-section.tsx.

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

@@ -5,10 +5,10 @@ import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { LoginForm } from "@/components/auth/login-form";
 import { Clock } from "@/components/clock";
-import { SectionCard } from "@/components/home-section";
 import { LanguageSwitcher } from "@/components/language-switcher";
 import { Reveal } from "@/components/motion-reveal";
 import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
+import { SurfaceCard } from "@/components/surface-card";
 import { ThemeSwitcher } from "@/components/theme-switcher";
 import { cached } from "@/lib/cache";
 import { db, User } from "@/lib/db";
@@ -123,13 +123,12 @@ export default async function LoginPage() {
 				<div className="flex flex-col gap-8 lg:flex-row">
 					{/* Left panel */}
 					<div className="lg:w-80 shrink-0 space-y-4">
-						<div
+						<SurfaceCard
-							className="relative overflow-hidden rounded-2xl border p-6 text-center"
+							className="relative 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`,
-								boxShadow: "var(--shadow-card)",
 							}}
 						>
 							<div
@@ -182,10 +181,10 @@ export default async function LoginPage() {
 									{t("welcomeBackSub", { hotelName })}
 								</p>
 							</div>
-						</div>
+						</SurfaceCard>
 
 						{recentUsers.length > 0 && (
-							<SectionCard
+							<SurfaceCard
 								title={th("online", { count: online, hotel: "" }).trim()}
 								icon="/assets/images/icons/navigation/goody.png"
 								bodyClassName="p-4"
@@ -215,11 +214,11 @@ export default async function LoginPage() {
 										</div>
 									))}
 								</div>
-							</SectionCard>
+							</SurfaceCard>
 						)}
 
 						{latestUsers.length > 0 && (
-							<SectionCard
+							<SurfaceCard
 								title="Newest citizens"
 								icon="/assets/images/icons/friends.png"
 								bodyClassName="p-4"
@@ -249,7 +248,7 @@ export default async function LoginPage() {
 										</div>
 									))}
 								</div>
-							</SectionCard>
+							</SurfaceCard>
 						)}
 
 						<p
@@ -271,7 +270,7 @@ export default async function LoginPage() {
 
 					{/* Right: form */}
 					<div className="flex-1">
-						<SectionCard
+						<SurfaceCard
 							title={t("title")}
 							icon="/assets/images/icons/navigation/me.png"
 							bodyClassName="p-6"
@@ -290,7 +289,7 @@ export default async function LoginPage() {
 								}}
 								nonce={nonce}
 							/>
-						</SectionCard>
+						</SurfaceCard>
 					</div>
 				</div>
 			</Reveal>

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

@@ -254,8 +254,8 @@ export default async function MePage({
 				) : null}
 
 				<Reveal>
-					<div
+					<SurfaceCard
-						className="relative overflow-hidden rounded-2xl border p-6 flex items-start gap-6"
+						className="relative p-6 flex items-start gap-6"
 						style={{
 							background: `linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)), var(--color-surface))`,
 							borderColor:
@@ -343,13 +343,13 @@ export default async function MePage({
 								</span>
 							</div>
 						</div>
-					</div>
+					</SurfaceCard>
 				</Reveal>
 
 				{alertRaw ? (
 					<Reveal delay={0.05}>
-						<div
+						<SurfaceCard
-							className="rounded-2xl border px-6 py-4 text-center"
+							className="px-6 py-4 text-center"
 							style={{
 								background:
 									"color-mix(in srgb, var(--color-accent) 12%, transparent)",
@@ -363,7 +363,7 @@ export default async function MePage({
 							>
 								{alertRaw}
 							</p>
-						</div>
+						</SurfaceCard>
 					</Reveal>
 				) : null}
 

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

@@ -5,10 +5,10 @@ import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { RegisterForm } from "@/components/auth/register-form";
 import { Clock } from "@/components/clock";
-import { SectionCard } from "@/components/home-section";
 import { LanguageSwitcher } from "@/components/language-switcher";
 import { Reveal } from "@/components/motion-reveal";
 import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
+import { SurfaceCard } from "@/components/surface-card";
 import { ThemeSwitcher } from "@/components/theme-switcher";
 import { cached } from "@/lib/cache";
 import { db, User } from "@/lib/db";
@@ -125,13 +125,12 @@ export default async function RegisterPage() {
 				<div className="flex flex-col gap-8 lg:flex-row">
 					{/* Left panel */}
 					<div className="lg:w-80 shrink-0 space-y-4">
-						<div
+						<SurfaceCard
-							className="relative overflow-hidden rounded-2xl border p-6 text-center"
+							className="relative 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`,
-								boxShadow: "var(--shadow-card)",
 							}}
 						>
 							<div
@@ -181,10 +180,10 @@ export default async function RegisterPage() {
 									{th("tagline")}
 								</p>
 							</div>
-						</div>
+						</SurfaceCard>
 
 						{recentUsers.length > 0 && (
-							<SectionCard
+							<SurfaceCard
 								title={tpr("whoIsOnline")}
 								icon="/assets/images/icons/navigation/goody.png"
 								bodyClassName="p-4"
@@ -214,11 +213,11 @@ export default async function RegisterPage() {
 										</div>
 									))}
 								</div>
-							</SectionCard>
+							</SurfaceCard>
 						)}
 
 						{latestUsers.length > 0 && (
-							<SectionCard
+							<SurfaceCard
 								title="Newest citizens"
 								icon="/assets/images/icons/friends.png"
 								bodyClassName="p-4"
@@ -248,7 +247,7 @@ export default async function RegisterPage() {
 										</div>
 									))}
 								</div>
-							</SectionCard>
+							</SurfaceCard>
 						)}
 
 						<p
@@ -270,7 +269,7 @@ export default async function RegisterPage() {
 
 					{/* Right: form */}
 					<div className="flex-1">
-						<SectionCard
+						<SurfaceCard
 							title={tpr("title")}
 							icon="/assets/images/icons/navigation/me.png"
 							bodyClassName="p-6"
@@ -289,7 +288,7 @@ export default async function RegisterPage() {
 								}}
 								nonce={nonce}
 							/>
-						</SectionCard>
+						</SurfaceCard>
 					</div>
 				</div>
 			</Reveal>

src/components/home-section.tsx

@@ -1,83 +0,0 @@
-import Image from "next/image";
-import Link from "next/link";
-import type { ReactNode } from "react";
-
-interface SectionCardProps {
-	title: string;
-	icon?: string;
-	actionHref?: string;
-	actionLabel?: string;
-	children: ReactNode;
-	className?: string;
-	bodyClassName?: string;
-}
-
-/**
- * Consistent, restrained panel used across the home page. Replaces the
- * per-section neon gradients with a single calm surface + hairline divider so
- * the page reads as professional rather than game-like.
- */
-export function SectionCard({
-	title,
-	icon,
-	actionHref,
-	actionLabel,
-	children,
-	className,
-	bodyClassName,
-}: SectionCardProps) {
-	return (
-		<div
-			className={`overflow-hidden rounded-2xl border bg-[var(--color-surface)] ${
-				className ?? ""
-			}`}
-			style={{
-				borderColor:
-					"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-				boxShadow: "var(--shadow-card)",
-			}}
-		>
-			<div
-				className="flex items-center justify-between gap-3 border-b px-5 py-3.5"
-				style={{
-					borderColor:
-						"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-					background:
-						"color-mix(in srgb, var(--color-primary) 10%, var(--color-surface))",
-				}}
-			>
-				<div className="flex items-center gap-2.5">
-					{icon && (
-						<Image
-							src={icon}
-							alt=""
-							width={18}
-							height={18}
-							unoptimized
-							className="opacity-90"
-						/>
-					)}
-					<h2
-						className="text-sm font-bold tracking-tight"
-						style={{
-							fontFamily: "var(--font-nunito)",
-							color: "var(--color-text-readable)",
-						}}
-					>
-						{title}
-					</h2>
-				</div>
-				{actionHref && actionLabel && (
-					<Link
-						href={actionHref}
-						className="text-xs font-semibold transition-colors hover:text-[var(--color-primary)] hover:underline"
-						style={{ color: "var(--color-text-muted)" }}
-					>
-						{actionLabel}
-					</Link>
-				)}
-			</div>
-			<div className={bodyClassName ?? "p-5"}>{children}</div>
-		</div>
-	);
-}