fix(site): satisfy theme-color and avatar contract tests for landing redesign

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

@@ -1,4 +1,4 @@
-import { count, eq } from "drizzle-orm";
+import { count, desc, eq } from "drizzle-orm";
 import { headers } from "next/headers";
 import Image from "next/image";
 import { getTranslations } from "next-intl/server";
@@ -29,7 +29,7 @@ export default async function LoginPage() {
 	]);
 	const nonce = (await headers()).get("x-nonce") ?? undefined;
 
-	const [online, totalUsers, recentUsers] = await Promise.all([
+	const [online, totalUsers, recentUsers, latestUsers] = await Promise.all([
 		cached("online_count", 10_000, () =>
 			db
 				.select({ total: count() })
@@ -49,6 +49,12 @@ export default async function LoginPage() {
 			.where(eq(User.online, "1"))
 			.limit(6)
 			.catch(() => []),
+		db
+			.select({ username: User.username, look: User.look })
+			.from(User)
+			.orderBy(desc(User.accountCreated))
+			.limit(6)
+			.catch(() => []),
 	]);
 
 	const onlineLabel = th("online", { count: online, hotel: "" }).trim();
@@ -60,11 +66,11 @@ export default async function LoginPage() {
 					hotelName={hotelName}
 					logo={logo}
 					footer={
-						<p className="m-0 text-sm text-white/60">
+						<p className="m-0 text-sm landing-text-muted">
 							{t("noAccount") ?? "No account?"}{" "}
 							<Link
 								href="/register"
-								className="font-extrabold text-white hover:text-white/80 hover:underline"
+								className="font-extrabold landing-text-primary hover:underline"
 							>
 								{t("createOne") ?? "Create one"}
 							</Link>
@@ -73,19 +79,19 @@ export default async function LoginPage() {
 					side={
 						<div className="flex flex-1 flex-col">
 							<div className="text-left">
-								<span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3.5 py-1.5 text-[11px] font-extrabold uppercase tracking-widest text-white/80">
+								<span className="inline-flex items-center gap-2 rounded-full border border-white/10 landing-chip px-3.5 py-1.5 text-[11px] font-extrabold uppercase tracking-widest landing-text-secondary">
 									<span className="relative flex h-2 w-2">
 										<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[var(--color-primary)] opacity-75" />
 										<span className="relative inline-flex h-2 w-2 rounded-full bg-[var(--color-primary)]" />
 									</span>
 									{onlineLabel}
 								</span>
-								<h1 className="mt-5 text-3xl font-black leading-[1.08] tracking-tight text-white sm:text-4xl lg:text-5xl">
+								<h1 className="mt-5 text-3xl font-black leading-[1.08] tracking-tight landing-text-primary sm:text-4xl lg:text-5xl">
 									{t("welcomeBack")}
 									<br />
 									<span className="text-gradient">{hotelName}</span>
 								</h1>
-								<p className="mt-4 max-w-md text-sm leading-relaxed text-white/60 sm:text-base">
+								<p className="mt-4 max-w-md text-sm leading-relaxed landing-text-muted sm:text-base">
 									{t("welcomeBackSub", { hotelName })}
 								</p>
 							</div>
@@ -95,8 +101,10 @@ export default async function LoginPage() {
 							</div>
 
 							<div className="mt-auto grid grid-cols-2 gap-3">
-								<div className="rounded-2xl border border-white/10 bg-white/5 p-4">
-									<div className="text-2xl font-black text-white">{online}</div>
+								<div className="rounded-2xl border border-white/10 landing-chip p-4">
+									<div className="landing-text-primary text-2xl font-black">
+										{online}
+									</div>
 									<p className="mt-1 text-[11px] font-bold uppercase tracking-widest text-[var(--color-primary)]">
 										{onlineLabel}
 									</p>
@@ -114,9 +122,9 @@ export default async function LoginPage() {
 										</div>
 									)}
 								</div>
-								<div className="flex flex-col justify-center rounded-2xl border border-white/10 bg-white/5 p-4">
+								<div className="flex flex-col justify-center rounded-2xl border border-white/10 landing-chip p-4">
 									<div className="flex items-center gap-2">
-										<span className="text-2xl font-black text-white">
+										<span className="landing-text-primary text-2xl font-black">
 											{totalUsers}
 										</span>
 										<Image
@@ -128,19 +136,32 @@ export default async function LoginPage() {
 											className="opacity-80"
 										/>
 									</div>
-									<p className="mt-1 text-[11px] font-bold uppercase tracking-widest text-white/55">
+									<p className="mt-1 text-[11px] font-bold uppercase tracking-widest landing-text-faint">
 										{thp("statsCitizens")}
 									</p>
+									{latestUsers.length > 0 && (
+										<div className="mt-3 flex items-center -space-x-2.5">
+											{latestUsers.slice(0, 5).map((u) => (
+												<UserAvatarThumbnail
+													key={u.username}
+													figure={u.look}
+													alt=""
+													options={{ direction: 2 }}
+													className="rounded-full border-2 border-[#0b1020]"
+												/>
+											))}
+										</div>
+									)}
 								</div>
 							</div>
 						</div>
 					}
 				>
 					<div className="mb-6">
-						<h2 className="m-0 text-2xl font-black tracking-tight text-white">
+						<h2 className="m-0 text-2xl font-black tracking-tight landing-text-primary">
 							{t("title")}
 						</h2>
-						<p className="mt-1.5 text-sm text-white/55">{t("subtitle")}</p>
+						<p className="mt-1.5 text-sm landing-text-muted">{t("subtitle")}</p>
 					</div>
 					<LoginForm
 						captcha={{