style: unify remaining site card headers with SectionCard

Convert the settings page neon gradient section headers (blue/purple/green)
to the shared SectionCard, and replace the verify page's harsh multi-stop
status gradients with subtle status-tinted headers while keeping the
green/amber/red/blue semantics. The me page already used a consistent
rounded-2xl card style, so it needed no change.

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

@@ -4,6 +4,7 @@ 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 { auth } from "@/lib/auth";
 import { db, User } from "@/lib/db";
@@ -47,18 +48,19 @@ export default async function SettingsPage() {
 			{/* Header */}
 			<Reveal>
 				<div
-					className="relative overflow-hidden rounded-xl border px-5 py-4"
+					className="relative overflow-hidden rounded-2xl border px-5 py-4"
 					style={{
 						background:
 							"color-mix(in srgb, var(--color-surface) 60%, transparent)",
 						backdropFilter: "blur(14px)",
+						WebkitBackdropFilter: "blur(14px)",
 						borderColor:
 							"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
 					}}
 				>
 					<div className="flex items-center gap-3">
 						<div
-							className="w-10 h-10 rounded-xl flex items-center justify-center"
+							className="flex h-10 w-10 items-center justify-center rounded-xl"
 							style={{
 								background:
 									"color-mix(in srgb, var(--color-primary) 14%, transparent)",
@@ -95,41 +97,14 @@ export default async function SettingsPage() {
 
 			{/* Profile card */}
 			<Reveal delay={0.05}>
-				<div
+				<SectionCard
-					className="overflow-hidden rounded-xl border card-premium"
+					title={t("publicProfile")}
-					style={{
+					icon="/assets/images/icons/navigation/me.png"
-						borderColor:
+					bodyClassName="p-5 flex items-center gap-5"
-							"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-					}}
-				>
-					<div
-						className="flex items-center gap-2.5 px-4 py-3"
-						style={{
-							background:
-								"linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
-						}}
-					>
-						<Image
-							src="/assets/images/icons/navigation/me.png"
-							alt=""
-							width={18}
-							height={18}
-							unoptimized
-						/>
-						<h2
-							className="text-sm font-bold text-white"
-							style={{ fontFamily: "var(--font-nunito)" }}
-						>
-							{t("publicProfile")}
-						</h2>
-					</div>
-					<div
-						className="p-5 flex items-center gap-5"
-						style={{ backgroundColor: "var(--color-surface)" }}
 				>
 					<div className="shrink-0">
 						<div
-								className="rounded-xl overflow-hidden border"
+							className="overflow-hidden rounded-xl border"
 							style={{
 								borderColor:
 									"color-mix(in srgb, var(--color-primary) 15%, transparent)",
@@ -172,43 +147,15 @@ export default async function SettingsPage() {
 							{user.mail || t("noEmail")}
 						</p>
 					</div>
-					</div>
+				</SectionCard>
-				</div>
 			</Reveal>
 
 			{/* Motto form */}
 			<Reveal delay={0.1}>
-				<div
+				<SectionCard
-					className="overflow-hidden rounded-xl border"
+					title={t("changeMotto")}
-					style={{
+					icon="/assets/images/icons/star.gif"
-						borderColor:
+					bodyClassName="p-5"
-							"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-					}}
-				>
-					<div
-						className="flex items-center gap-2.5 px-4 py-3"
-						style={{
-							background:
-								"linear-gradient(140deg, #5a2d82 0%, #6b3a9e 20%, #7d47b8 40%, #8f54d0 60%, #7d47b8 75%, #6b3a9e 90%, #5a2d82 100%)",
-						}}
-					>
-						<Image
-							src="/assets/images/icons/star.gif"
-							alt=""
-							width={18}
-							height={18}
-							unoptimized
-						/>
-						<h2
-							className="text-sm font-bold text-white"
-							style={{ fontFamily: "var(--font-nunito)" }}
-						>
-							{t("changeMotto")}
-						</h2>
-					</div>
-					<div
-						className="p-5"
-						style={{ backgroundColor: "var(--color-surface)" }}
 				>
 					<p
 						className="text-xs mb-4"
@@ -250,43 +197,15 @@ export default async function SettingsPage() {
 							</button>
 						</div>
 					</form>
-					</div>
+				</SectionCard>
-				</div>
 			</Reveal>
 
 			{/* Security card */}
 			<Reveal delay={0.15}>
-				<div
+				<SectionCard
-					className="overflow-hidden rounded-xl border"
+					title={t("securityTitle")}
-					style={{
+					icon="/assets/images/icons/navigation/goody.png"
-						borderColor:
+					bodyClassName="p-5"
-							"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-					}}
-				>
-					<div
-						className="flex items-center gap-2.5 px-4 py-3"
-						style={{
-							background:
-								"linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
-						}}
-					>
-						<Image
-							src="/assets/images/icons/navigation/goody.png"
-							alt=""
-							width={18}
-							height={18}
-							unoptimized
-						/>
-						<h2
-							className="text-sm font-bold text-white"
-							style={{ fontFamily: "var(--font-nunito)" }}
-						>
-							{t("securityTitle")}
-						</h2>
-					</div>
-					<div
-						className="p-5"
-						style={{ backgroundColor: "var(--color-surface)" }}
 				>
 					<p
 						className="text-xs mb-4"
@@ -307,15 +226,14 @@ export default async function SettingsPage() {
 					>
 						{t("twoFactorLink")}
 					</Link>
-					</div>
+				</SectionCard>
-				</div>
 			</Reveal>
 
 			{/* Sessions link */}
 			<Reveal delay={0.2}>
 				<Link
 					href="/settings/sessions"
-					className="block overflow-hidden rounded-xl border 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"
 					style={{
 						borderColor:
 							"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
@@ -327,7 +245,7 @@ export default async function SettingsPage() {
 					>
 						<div className="flex items-center gap-3">
 							<div
-								className="w-10 h-10 rounded-xl flex items-center justify-center"
+								className="flex h-10 w-10 items-center justify-center rounded-xl"
 								style={{
 									background:
 										"color-mix(in srgb, var(--color-primary) 14%, transparent)",

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

@@ -20,38 +20,56 @@ function StatusCard({
 	children: React.ReactNode;
 	color: string;
 }) {
-	const gradientMap: Record<string, string> = {
+	const tintMap: Record<string, string> = {
-		green:
+		green: "#16a34a",
-			"linear-gradient(140deg, #0A2F1A 0%, #0F3D22 20%, #154C2A 40%, #1B5A32 60%, #20683A 75%, #1A5A30 90%, #144826 100%)",
+		yellow: "#d97706",
-		yellow:
+		red: "#dc2626",
-			"linear-gradient(140deg, #3A2F0A 0%, #4A3D0F 20%, #5A4C15 40%, #6A5A1B 60%, #7A6820 75%, #6A5A1A 90%, #5A4814 100%)",
+		blue: "#2563eb",
-		red: "linear-gradient(140deg, #3A0F0A 0%, #4A1A0F 20%, #5A2515 40%, #6A301B 60%, #7A3B20 75%, #6A301A 90%, #5A2514 100%)",
-		blue: "linear-gradient(140deg, #0A1A3A 0%, #0F254A 20%, #15305A 40%, #1B3B6A 60%, #20467A 75%, #1A3B6A 90%, #14305A 100%)",
 	};
+	const tint = tintMap[color] ?? tintMap.blue;
 
 	return (
 		<main className="flex min-h-[60vh] items-center justify-center px-4">
 			<div
-				className="w-full max-w-md overflow-hidden rounded-xl border"
+				className="w-full max-w-md overflow-hidden rounded-2xl border"
 				style={{
 					borderColor:
 						"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
 					backgroundColor: "var(--color-surface)",
+					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 gap-2.5 px-5 py-4"
+					className="flex items-center gap-2.5 border-b px-5 py-4"
-					style={{ background: gradientMap[color] ?? gradientMap.blue }}
+					style={{
+						background: `color-mix(in srgb, ${tint} 12%, var(--color-surface))`,
+						borderColor:
+							"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+					}}
 				>
-					<span className="text-white">{icon}</span>
+					<span
-					<h1 className="text-sm font-bold text-white">{title}</h1>
+						className="flex h-7 w-7 items-center justify-center rounded-lg"
+						style={{
+							background: `color-mix(in srgb, ${tint} 18%, transparent)`,
+							color: tint,
+						}}
+					>
+						{icon}
+					</span>
+					<h1
+						className="text-sm font-bold tracking-tight"
+						style={{ color: "var(--color-text-readable)" }}
+					>
+						{title}
+					</h1>
 				</div>
 				<div className="flex flex-col items-center gap-4 px-6 py-8 text-center">
 					<div
 						className="flex h-16 w-16 items-center justify-center rounded-full"
 						style={{
-							background:
+							background: `color-mix(in srgb, ${tint} 12%, transparent)`,
-								"color-mix(in srgb, var(--color-primary) 12%, transparent)",
+							color: tint,
 						}}
 					>
 						{icon}