style(landing): add micro-interactions and polish public pages

src/components/auth/register-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Lock, Mail, UserRound } from "lucide-react";
+import { KeyRound, Lock, Mail, ShieldCheck, UserRound } from "lucide-react";
 import Script from "next/script";
 import { signIn } from "next-auth/react";
 import { useTranslations } from "next-intl";
@@ -183,7 +183,24 @@ export function RegisterForm({
 
 				{/* Username & Email */}
 				<div className="space-y-2">
-					<div className="flex items-center gap-2">
+					<div className="flex items-center gap-2.5">
+						<span
+							aria-hidden="true"
+							className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg"
+							style={{
+								background:
+									"color-mix(in srgb, var(--color-primary) 12%, transparent)",
+								boxShadow:
+									"inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent)",
+							}}
+						>
+							<UserRound
+								className="h-3.5 w-3.5"
+								style={{
+									color: "var(--color-primary-readable, var(--color-primary))",
+								}}
+							/>
+						</span>
 						<span
 							className="text-[11px] font-black uppercase tracking-widest"
 							style={{
@@ -199,6 +216,9 @@ export function RegisterForm({
 									"linear-gradient(90deg, color-mix(in srgb, var(--color-text-muted) 18%, transparent), transparent)",
 							}}
 						/>
+						<span aria-hidden="true" className="number-mark text-lg">
+							01
+						</span>
 					</div>
 					<div className="grid grid-cols-1 md:grid-cols-2 gap-4 stagger-children">
 						<div className="space-y-1.5">
@@ -247,7 +267,24 @@ export function RegisterForm({
 
 				{/* Password & Confirm */}
 				<div className="space-y-2">
-					<div className="flex items-center gap-2">
+					<div className="flex items-center gap-2.5">
+						<span
+							aria-hidden="true"
+							className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg"
+							style={{
+								background:
+									"color-mix(in srgb, var(--color-primary) 12%, transparent)",
+								boxShadow:
+									"inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent)",
+							}}
+						>
+							<KeyRound
+								className="h-3.5 w-3.5"
+								style={{
+									color: "var(--color-primary-readable, var(--color-primary))",
+								}}
+							/>
+						</span>
 						<span
 							className="text-[11px] font-black uppercase tracking-widest"
 							style={{
@@ -263,6 +300,9 @@ export function RegisterForm({
 									"linear-gradient(90deg, color-mix(in srgb, var(--color-text-muted) 18%, transparent), transparent)",
 							}}
 						/>
+						<span aria-hidden="true" className="number-mark text-lg">
+							02
+						</span>
 					</div>
 					<div className="grid grid-cols-1 md:grid-cols-2 gap-4 stagger-children">
 						<div className="space-y-1.5">
@@ -313,12 +353,19 @@ export function RegisterForm({
 											/>
 										))}
 									</div>
-									<p
-										className="text-[11px] font-extrabold uppercase tracking-wider"
-										style={{ color: strength.color }}
-									>
-										{strength.label}
-									</p>
+									<div className="flex items-center gap-1.5">
+										<ShieldCheck
+											aria-hidden="true"
+											className="h-3.5 w-3.5 shrink-0"
+											style={{ color: strength.color }}
+										/>
+										<p
+											className="text-[11px] font-extrabold uppercase tracking-wider"
+											style={{ color: strength.color }}
+										>
+											{strength.label}
+										</p>
+									</div>
 								</div>
 							)}
 						</div>

src/components/spotlight-card.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import type { CSSProperties, MouseEvent, ReactNode } from "react";
+
+interface SpotlightCardProps {
+	children: ReactNode;
+	className?: string;
+	style?: CSSProperties;
+}
+
+/**
+ * Wraps a card with a mouse-tracking radial glow. The pointer position is
+ * written to `--spot-x` / `--spot-y` and consumed by the `.spotlight::before`
+ * overlay in globals.css.
+ */
+export function SpotlightCard({
+	children,
+	className,
+	style,
+}: SpotlightCardProps) {
+	const handlePointerMove = (event: MouseEvent<HTMLDivElement>) => {
+		const el = event.currentTarget;
+		const rect = el.getBoundingClientRect();
+		el.style.setProperty("--spot-x", `${event.clientX - rect.left}px`);
+		el.style.setProperty("--spot-y", `${event.clientY - rect.top}px`);
+	};
+
+	return (
+		<div
+			className={className}
+			style={
+				{ "--spot-x": "50%", "--spot-y": "50%", ...style } as CSSProperties
+			}
+			onPointerMove={handlePointerMove}
+		>
+			{children}
+		</div>
+	);
+}