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)/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"
-							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)",
-							}}
+							className="relative p-5 text-center transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
 						>
 							<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
-							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)",
-							}}
-						>
+						<SurfaceCard className="transition-all duration-200 group-hover:shadow-lg">
 							<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>