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

src/app/(site)/page.tsx

@@ -1,5 +1,5 @@
 import { count, desc, eq } from "drizzle-orm";
-import { ChevronDown } from "lucide-react";
+import { ArrowRight, ChevronDown } from "lucide-react";
 import type { Metadata } from "next";
 import { headers } from "next/headers";
 import Image from "next/image";
@@ -15,6 +15,7 @@ import { LiveOnlineCounter } from "@/components/live-online-counter";
 import { Reveal } from "@/components/motion-reveal";
 import { PublicLoadError } from "@/components/public/load-error";
 import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
+import { SpotlightCard } from "@/components/spotlight-card";
 import { ThemeSwitcher } from "@/components/theme-switcher";
 import { TypewriterText } from "@/components/typewriter-text";
 import { auth } from "@/lib/auth";
@@ -311,7 +312,7 @@ export default async function Home() {
 						className="text-sm font-bold"
 						style={{ color: "rgba(255,255,255,0.95)" }}
 					>
-						→
+						<ArrowRight className="h-4 w-4" aria-hidden="true" />
 					</span>
 				</div>
 				<div
@@ -578,12 +579,13 @@ export default async function Home() {
 
 						{recentUsers !== null && recentUsers.length > 0 && (
 							<div
-								className="mt-7 inline-flex items-center gap-3 rounded-full border px-3 py-1.5"
+								className="animate-fade-in-up mt-7 inline-flex items-center gap-3 rounded-full border px-3 py-1.5"
 								style={{
 									background: "rgba(255,255,255,0.08)",
 									borderColor: "rgba(255,255,255,0.22)",
 									backdropFilter: "blur(12px)",
 									WebkitBackdropFilter: "blur(12px)",
+									animationDelay: "0.08s",
 								}}
 							>
 								<div className="flex -space-x-2.5">
@@ -606,7 +608,10 @@ export default async function Home() {
 							</div>
 						)}
 
-						<div className="mt-9 flex flex-wrap items-center justify-center gap-3">
+						<div
+							className="animate-fade-in-up mt-9 flex flex-wrap items-center justify-center gap-3"
+							style={{ animationDelay: "0.2s" }}
+						>
 							<Link
 								href="/register"
 								className="btn-brand btn-shine px-8 py-4 text-sm font-black uppercase tracking-wider"
@@ -627,15 +632,18 @@ export default async function Home() {
 								{th("login")}
 								<span
 									aria-hidden="true"
-									className="transition-transform duration-300 group-hover:translate-x-1"
+									className="inline-flex transition-transform duration-300 group-hover:translate-x-1"
 								>
-									→
+									<ArrowRight className="h-4 w-4" />
 								</span>
 							</Link>
 						</div>
 
 						{/* Floating stat chips */}
-						<div className="mt-12 flex flex-wrap items-center justify-center gap-2.5 sm:gap-3">
+						<div
+							className="animate-fade-in-up mt-12 flex flex-wrap items-center justify-center gap-2.5 sm:gap-3"
+							style={{ animationDelay: "0.32s" }}
+						>
 							{statChips.map((s) => (
 								<span key={s.label} className="glass-chip">
 									<span
@@ -723,15 +731,13 @@ export default async function Home() {
 								}}
 							/>
 							{l.label}
-							<span
+							<ArrowRight
 								aria-hidden="true"
-								className="pill-arrow text-[11px]"
+								className="pill-arrow h-3.5 w-3.5"
 								style={{
 									color: "var(--color-primary-readable, var(--color-primary))",
 								}}
-							>
-								→
-							</span>
+							/>
 						</Link>
 					))}
 				</nav>
@@ -756,9 +762,9 @@ export default async function Home() {
 							const accentVar =
 								i % 2 === 0 ? "var(--color-primary)" : "var(--color-accent)";
 							return (
-								<div
+								<SpotlightCard
 									key={f.title}
-									className="card-glow card-hairline group relative overflow-hidden rounded-2xl border p-6 transition-all duration-500 hover:-translate-y-1.5 hover:shadow-2xl sm:p-7"
+									className="spotlight card-glow card-hairline group relative overflow-hidden rounded-2xl border p-6 transition-all duration-500 hover:-translate-y-1.5 hover:shadow-2xl sm:p-7"
 									style={{
 										background: GLASS_TILE_BG,
 										backdropFilter: "blur(16px)",
@@ -811,7 +817,7 @@ export default async function Home() {
 									>
 										{f.desc}
 									</p>
-								</div>
+								</SpotlightCard>
 							);
 						})}
 					</div>
@@ -1106,8 +1112,11 @@ export default async function Home() {
 							className="btn-brand btn-shine group px-8 py-4 text-sm font-black uppercase tracking-wide"
 						>
 							{tp("ctaJoin")}
-							<span className="transition-transform duration-300 group-hover:translate-x-1">
-								→
+							<span
+								aria-hidden="true"
+								className="inline-flex transition-transform duration-300 group-hover:translate-x-1"
+							>
+								<ArrowRight className="h-4 w-4" />
 							</span>
 						</Link>
 						<Link