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)/page.tsx

@@ -8,10 +8,10 @@ import { AmbientOrbs } from "@/components/ambient-orbs";
 import { AnimatedCounter } from "@/components/animated-counter";
 import { HomeLoginForm } from "@/components/auth/home-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 { TypewriterText } from "@/components/typewriter-text";
 import { auth } from "@/lib/auth";
@@ -321,15 +321,9 @@ export default async function Home() {
 							icon: "/assets/images/icons/catalog.png",
 						},
 					].map((s) => (
-						<div
+						<SurfaceCard
 							key={s.label}
-							className="relative overflow-hidden rounded-2xl border bg-[var(--color-surface)] p-5 text-center transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
+							className="relative p-5 text-center transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
-							style={{
-								borderColor:
-									"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-								boxShadow:
-									"0 1px 2px color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-							}}
 						>
 							<div
 								className="absolute -top-6 -right-6 w-20 h-20 rounded-full opacity-[0.06]"
@@ -364,7 +358,7 @@ export default async function Home() {
 									{s.label}
 								</div>
 							</div>
-						</div>
+						</SurfaceCard>
 					))}
 				</div>
 			</Reveal>
@@ -373,7 +367,7 @@ export default async function Home() {
 			<div className="flex flex-col gap-4 md:flex-row">
 				{/* Left: Login & Register */}
 				<Reveal className="flex w-full flex-col gap-4 md:w-1/3 md:flex-shrink-0">
-					<SectionCard
+					<SurfaceCard
 						title={th("login")}
 						icon="/assets/images/icons/navigation/me.png"
 						bodyClassName="p-4"
@@ -386,16 +380,10 @@ export default async function Home() {
 							}}
 							nonce={nonce}
 						/>
-					</SectionCard>
+					</SurfaceCard>
 
 					<Link href="/register" className="relative block group">
-						<div
+						<SurfaceCard className="transition-all duration-200 group-hover:shadow-lg">
-							className="overflow-hidden rounded-2xl border transition-all duration-200 group-hover:shadow-lg"
-							style={{
-								borderColor:
-									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-							}}
-						>
 							<Image
 								src="/assets/images/EnterHubbly.png"
 								alt="Register"
@@ -404,7 +392,7 @@ export default async function Home() {
 								className="block w-full"
 								unoptimized
 							/>
-						</div>
+						</SurfaceCard>
 						<span
 							className="pointer-events-none absolute inset-0 flex items-center text-2xl font-extrabold text-white md:text-3xl"
 							style={{
@@ -418,7 +406,7 @@ export default async function Home() {
 					</Link>
 
 					{latestUsers.length > 0 && (
-						<SectionCard
+						<SurfaceCard
 							title={tp("latestUsers", { count: users.toLocaleString() })}
 							icon="/assets/images/icons/navigation/goody.png"
 							bodyClassName="p-4"
@@ -443,13 +431,13 @@ export default async function Home() {
 									</div>
 								))}
 							</div>
-						</SectionCard>
+						</SurfaceCard>
 					)}
 				</Reveal>
 
 				{/* Right: News */}
 				<Reveal delay={0.15} className="flex w-full flex-col gap-4 md:w-2/3">
-					<SectionCard
+					<SurfaceCard
 						title={tp("latestNews")}
 						icon="/assets/images/icons/article.gif"
 						actionHref="/news"
@@ -509,14 +497,14 @@ export default async function Home() {
 								{tp("noArticles")}
 							</p>
 						)}
-					</SectionCard>
+					</SurfaceCard>
 				</Reveal>
 			</div>
 
 			{/* ── Online users ── */}
 			{recentUsers.length > 0 && (
 				<Reveal>
-					<SectionCard
+					<SurfaceCard
 						title={tp("recentUsers")}
 						icon="/assets/images/icons/navigation/goody.png"
 						actionHref="/community"
@@ -547,7 +535,7 @@ export default async function Home() {
 								</div>
 							))}
 						</div>
-					</SectionCard>
+					</SurfaceCard>
 				</Reveal>
 			)}
 
@@ -601,7 +589,7 @@ export default async function Home() {
 			{/* ── Recent photos ── */}
 			{recentPhotos.length > 0 && (
 				<Reveal>
-					<SectionCard
+					<SurfaceCard
 						title={tp("recentPhotos")}
 						icon="/assets/images/icons/camera.png"
 					>
@@ -627,7 +615,7 @@ export default async function Home() {
 								</Link>
 							))}
 						</div>
-					</SectionCard>
+					</SurfaceCard>
 				</Reveal>
 			)}
 		</div>

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/app/(site)/settings/page.tsx

@@ -4,8 +4,8 @@ import Link from "next/link";
 import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { updateMotto } from "@/actions/user-settings";
-import { SectionCard } from "@/components/home-section";
 import { Reveal } from "@/components/motion-reveal";
+import { SurfaceCard } from "@/components/surface-card";
 import { auth } from "@/lib/auth";
 import { db, User } from "@/lib/db";
 import { avatarImageUrl } from "@/lib/format";
@@ -47,8 +47,8 @@ export default async function SettingsPage() {
 		<div className="flex flex-col gap-6 pb-14">
 			{/* Header */}
 			<Reveal>
-				<div
+				<SurfaceCard
-					className="relative overflow-hidden rounded-2xl border px-5 py-4"
+					className="relative px-5 py-4"
 					style={{
 						background:
 							"color-mix(in srgb, var(--color-surface) 60%, transparent)",
@@ -92,12 +92,12 @@ export default async function SettingsPage() {
 							</p>
 						</div>
 					</div>
-				</div>
+				</SurfaceCard>
 			</Reveal>
 
 			{/* Profile card */}
 			<Reveal delay={0.05}>
-				<SectionCard
+				<SurfaceCard
 					title={t("publicProfile")}
 					icon="/assets/images/icons/navigation/me.png"
 					bodyClassName="p-5 flex items-center gap-5"
@@ -147,12 +147,12 @@ export default async function SettingsPage() {
 							{user.mail || t("noEmail")}
 						</p>
 					</div>
-				</SectionCard>
+				</SurfaceCard>
 			</Reveal>
 
 			{/* Motto form */}
 			<Reveal delay={0.1}>
-				<SectionCard
+				<SurfaceCard
 					title={t("changeMotto")}
 					icon="/assets/images/icons/star.gif"
 					bodyClassName="p-5"
@@ -197,12 +197,12 @@ export default async function SettingsPage() {
 							</button>
 						</div>
 					</form>
-				</SectionCard>
+				</SurfaceCard>
 			</Reveal>
 
 			{/* Security card */}
 			<Reveal delay={0.15}>
-				<SectionCard
+				<SurfaceCard
 					title={t("securityTitle")}
 					icon="/assets/images/icons/navigation/goody.png"
 					bodyClassName="p-5"
@@ -226,61 +226,56 @@ export default async function SettingsPage() {
 					>
 						{t("twoFactorLink")}
 					</Link>
-				</SectionCard>
+				</SurfaceCard>
 			</Reveal>
 
 			{/* Sessions link */}
 			<Reveal delay={0.2}>
-				<Link
+				<Link href="/settings/sessions" className="block">
-					href="/settings/sessions"
+					<SurfaceCard className="transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5">
-					className="block overflow-hidden rounded-2xl border transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5"
+						<div
-					style={{
+							className="flex items-center justify-between px-5 py-4"
-						borderColor:
+							style={{ backgroundColor: "var(--color-surface)" }}
-							"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-					}}
-				>
-					<div
-						className="flex items-center justify-between px-5 py-4"
-						style={{ backgroundColor: "var(--color-surface)" }}
-					>
-						<div className="flex items-center gap-3">
-							<div
-								className="flex h-10 w-10 items-center justify-center rounded-xl"
-								style={{
-									background:
-										"color-mix(in srgb, var(--color-primary) 14%, transparent)",
-								}}
-							>
-								<Image
-									src="/assets/images/icons/navigation/community.png"
-									alt=""
-									width={20}
-									height={20}
-									unoptimized
-								/>
-							</div>
-							<div>
-								<span
-									className="text-sm font-extrabold"
-									style={{ color: "var(--color-text-readable)" }}
-								>
-									Session Management
-								</span>
-								<p
-									className="text-xs mt-0.5"
-									style={{ color: "var(--color-text-muted)" }}
-								>
-									View active sessions and sign out everywhere
-								</p>
-							</div>
-						</div>
-						<span
-							className="text-lg font-bold"
-							style={{ color: "var(--color-text-muted)" }}
 						>
-							→
+							<div className="flex items-center gap-3">
-						</span>
+								<div
-					</div>
+									className="flex h-10 w-10 items-center justify-center rounded-xl"
+									style={{
+										background:
+											"color-mix(in srgb, var(--color-primary) 14%, transparent)",
+									}}
+								>
+									<Image
+										src="/assets/images/icons/navigation/community.png"
+										alt=""
+										width={20}
+										height={20}
+										unoptimized
+									/>
+								</div>
+								<div>
+									<span
+										className="text-sm font-extrabold"
+										style={{ color: "var(--color-text-readable)" }}
+									>
+										Session Management
+									</span>
+									<p
+										className="text-xs mt-0.5"
+										style={{ color: "var(--color-text-muted)" }}
+									>
+										View active sessions and sign out everywhere
+									</p>
+								</div>
+							</div>
+							<span
+								className="text-lg font-bold"
+								style={{ color: "var(--color-text-muted)" }}
+							>
+								→
+							</span>
+						</div>
+					</SurfaceCard>
 				</Link>
 			</Reveal>
 		</div>

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>
-	);
-}

src/components/surface-card.tsx

@@ -1,22 +1,48 @@
+import Image from "next/image";
+import Link from "next/link";
 import type { CSSProperties, ReactNode } from "react";
 
 const CARD_BORDER =
 	"color-mix(in srgb, var(--color-text-muted) 12%, transparent)";
+const CARD_DIVIDER =
+	"color-mix(in srgb, var(--color-text-muted) 8%, transparent)";
+const CARD_HEADER_BG =
+	"color-mix(in srgb, var(--color-primary) 10%, var(--color-surface))";
 
-/**
+export interface SurfaceCardProps {
- * Public-site surface card. Mirrors the CSS .content-card / SectionCard visual
+	children: ReactNode;
- * language (--radius-lg corners, --shadow-card, hairline border) so every page
+	/** Optional header title. */
- * that opts out of ContentCard still shares one consistent component.
+	title?: string;
- */
+	/** Optional header icon (image URL). */
-export function SurfaceCard({
+	icon?: string;
-	className = "",
+	/** Optional header action link. */
-	style,
+	actionHref?: string;
-	children,
+	actionLabel?: string;
-}: {
+	/** Class for the body wrapper (only used when a header is present). */
+	bodyClassName?: string;
 	className?: string;
 	style?: CSSProperties;
-	children: ReactNode;
+}
-}) {
+
+/**
+ * The single public-site card component. Mirrors the CSS `.content-card` visual
+ * language (--radius-lg corners, --shadow-card, hairline border). Pass `title`
+ * / `icon` / `actionHref` to render a section header, exactly like the old
+ * a card header. Without a header, children render directly so callers control
+ * padding via `className`.
+ */
+export function SurfaceCard({
+	children,
+	title,
+	icon,
+	actionHref,
+	actionLabel,
+	bodyClassName,
+	className = "",
+	style,
+}: SurfaceCardProps) {
+	const hasHeader = Boolean(title || icon || (actionHref && actionLabel));
+
 	return (
 		<div
 			className={`overflow-hidden rounded-2xl border bg-[var(--color-surface)] ${className}`}
@@ -26,18 +52,50 @@ export function SurfaceCard({
 				...style,
 			}}
 		>
-			{children}
+			{hasHeader && (
+				<div
+					className="flex items-center justify-between gap-3 border-b px-5 py-3.5"
+					style={{ borderColor: CARD_DIVIDER, background: CARD_HEADER_BG }}
+				>
+					<div className="flex items-center gap-2.5">
+						{icon && (
+							<Image
+								src={icon}
+								alt=""
+								width={18}
+								height={18}
+								unoptimized
+								className="opacity-90"
+							/>
+						)}
+						{title && (
+							<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>
+			)}
+			{hasHeader ? (
+				<div className={bodyClassName ?? "p-5"}>{children}</div>
+			) : (
+				children
+			)}
 		</div>
 	);
 }
-
-/** Padded body for a SurfaceCard. Override padding via className. */
-export function SurfaceCardBody({
-	className = "p-5",
-	children,
-}: {
-	className?: string;
-	children: ReactNode;
-}) {
-	return <div className={className}>{children}</div>;
-}