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

pnpm-lock.yaml

@@ -166,6 +166,7 @@ overrides:
   glob: ^11.0.0
   '@esbuild-kit/core-utils': npm:tsx@^4.23.15
   '@esbuild-kit/esm-loader': npm:tsx@^4.23.15
+  source-map-js: 1.2.2
 
 importers:
 
@@ -3463,8 +3464,8 @@ packages:
       '@types/react':
         optional: true
 
-  [email protected].1:
-    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+  [email protected].2:
+    resolution: {integrity: sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw==}
     engines: {node: '>=0.10.0'}
 
   [email protected]:
@@ -4862,7 +4863,7 @@ snapshots:
       jiti: 2.7.0
       lightningcss: 1.32.0
       magic-string: 0.30.21
-      source-map-js: 1.2.1
+      source-map-js: 1.2.2
       tailwindcss: 4.3.3
 
   '@tailwindcss/[email protected]':
@@ -5339,7 +5340,7 @@ snapshots:
   [email protected]:
     dependencies:
       mdn-data: 2.27.1
-      source-map-js: 1.2.1
+      source-map-js: 1.2.2
 
   [email protected]: {}
 
@@ -5831,7 +5832,7 @@ snapshots:
     dependencies:
       '@babel/parser': 7.29.9
       '@babel/types': 7.29.8
-      source-map-js: 1.2.1
+      source-map-js: 1.2.2
 
   [email protected]: {}
 
@@ -6086,13 +6087,13 @@ snapshots:
     dependencies:
       nanoid: 3.3.19
       picocolors: 1.1.1
-      source-map-js: 1.2.1
+      source-map-js: 1.2.2
 
   [email protected]:
     dependencies:
       nanoid: 3.3.19
       picocolors: 1.1.1
-      source-map-js: 1.2.1
+      source-map-js: 1.2.2
 
   [email protected]([email protected]):
     dependencies:
@@ -6328,7 +6329,7 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.3.0
 
-  [email protected].1: {}
+  [email protected].2: {}
 
   [email protected]: {}
 

pnpm-workspace.yaml

@@ -16,3 +16,4 @@ overrides:
   glob: '^11.0.0'
   '@esbuild-kit/core-utils': 'npm:tsx@^4.23.15'
   '@esbuild-kit/esm-loader': 'npm:tsx@^4.23.15'
+  source-map-js: '1.2.2'

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

@@ -47,7 +47,31 @@ export default async function LoginPage() {
 
 	return (
 		<div className="mx-auto w-full max-w-6xl flex flex-col gap-8 pb-16">
-			<AuthTopBar hotelName={hotelName} logo={logo} />
+			<div className="relative">
+				<div
+					aria-hidden="true"
+					className="pointer-events-none absolute -inset-x-16 -top-24 overflow-hidden"
+				>
+					<div
+						className="aurora-blob -left-20 top-0 h-80 w-80"
+						style={{
+							background:
+								"color-mix(in srgb, var(--color-primary) 34%, transparent)",
+							opacity: 0.45,
+						}}
+					/>
+					<div
+						className="aurora-blob -right-20 top-6 h-72 w-72"
+						style={{
+							background:
+								"color-mix(in srgb, var(--color-accent) 30%, transparent)",
+							animationDelay: "-7s",
+							opacity: 0.4,
+						}}
+					/>
+				</div>
+				<AuthTopBar hotelName={hotelName} logo={logo} />
+			</div>
 
 			<Reveal>
 				<div className="flex flex-col gap-8 lg:flex-row lg:items-start">

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

@@ -57,7 +57,31 @@ export default async function RegisterPage() {
 
 	return (
 		<div className="mx-auto w-full max-w-6xl flex flex-col gap-8 pb-16">
-			<AuthTopBar hotelName={hotelName} logo={logo} />
+			<div className="relative">
+				<div
+					aria-hidden="true"
+					className="pointer-events-none absolute -inset-x-16 -top-24 overflow-hidden"
+				>
+					<div
+						className="aurora-blob -left-20 top-0 h-80 w-80"
+						style={{
+							background:
+								"color-mix(in srgb, var(--color-primary) 34%, transparent)",
+							opacity: 0.45,
+						}}
+					/>
+					<div
+						className="aurora-blob -right-20 top-6 h-72 w-72"
+						style={{
+							background:
+								"color-mix(in srgb, var(--color-accent) 30%, transparent)",
+							animationDelay: "-7s",
+							opacity: 0.4,
+						}}
+					/>
+				</div>
+				<AuthTopBar hotelName={hotelName} logo={logo} />
+			</div>
 
 			<Reveal>
 				<div className="flex flex-col gap-8 lg:flex-row lg:items-start">

src/app/globals.css

@@ -2837,3 +2837,57 @@ html {
 		background: color-mix(in srgb, var(--color-text-muted) 20%, transparent);
 	}
 }
+
+/* Mouse-tracking spotlight glow for premium cards. The dot position comes
+   from CSS custom properties updated on pointermove (see SpotlightCard). */
+.spotlight {
+	position: relative;
+	isolation: isolate;
+}
+.spotlight::before {
+	content: "";
+	position: absolute;
+	inset: 0;
+	border-radius: inherit;
+	pointer-events: none;
+	opacity: 0;
+	transition: opacity 0.4s ease;
+	background: radial-gradient(
+		340px circle at var(--spot-x, 50%) var(--spot-y, 50%),
+		color-mix(in srgb, var(--color-primary) 20%, transparent),
+		transparent 70%
+	);
+	z-index: -1;
+}
+.spotlight:hover::before,
+.spotlight:focus-within::before {
+	opacity: 1;
+}
+
+/* Section number mark (01 / 02 / …) used as a faint watermark in headers. */
+.number-mark {
+	font-family: var(--font-nunito);
+	font-weight: 900;
+	letter-spacing: -0.02em;
+	line-height: 1;
+	background: linear-gradient(
+		120deg,
+		color-mix(in srgb, var(--color-primary) 65%, transparent),
+		color-mix(in srgb, var(--color-accent) 50%, transparent)
+	);
+	-webkit-background-clip: text;
+	background-clip: text;
+	color: transparent;
+	opacity: 0.85;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.spotlight::before {
+		transition: none;
+	}
+	.animate-fade-in-up,
+	.animate-scale-in,
+	.animate-count {
+		animation: none;
+	}
+}

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