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)/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
-							className="relative overflow-hidden rounded-2xl border p-6 text-center"
+						<SurfaceCard
+							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>