style: make home page layout more professional

Unify the per-section neon gradient headers (blue/green/purple) into a
single consistent SectionCard component with a calm surface header and
hairline divider, constrain the page to a centered max-w-6xl container,
and soften the hero/cards with rounded-3xl corners and subtle shadows.

src/components/home-section.tsx

@@ -0,0 +1,84 @@
+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:
+					"0 1px 2px color-mix(in srgb, var(--color-text-muted) 12%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
+			}}
+		>
+			<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) 10%, transparent)",
+					background:
+						"color-mix(in srgb, var(--color-text-muted) 4%, transparent)",
+				}}
+			>
+				<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>
+	);
+}