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

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>
+	);
+}