fix: increase avatar sizes for newest citizens on index and register; add Enter button below avatar on /me

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

@@ -198,7 +198,7 @@ export default async function MePage({
 						borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
 					}}
 				>
-					<div className="relative shrink-0">
+					<div className="relative shrink-0 flex flex-col items-center gap-3">
 						<div
 							className="absolute -inset-3 rounded-full opacity-[0.15] blur-[40px]"
 							style={{ background: "var(--color-primary)" }}
@@ -212,6 +212,25 @@ export default async function MePage({
 							unoptimized
 							priority
 						/>
+						<Link
+							href="/client"
+							className="btn-shine flex items-center justify-center gap-1.5 rounded-xl border py-2 px-4 font-extrabold text-xs transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg"
+							style={{
+								background: "var(--color-primary)",
+								color: "var(--color-primary-foreground)",
+								borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
+								boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
+							}}
+						>
+							<Image
+								src="/assets/images/EnterHubbly.png"
+								alt=""
+								width={16}
+								height={16}
+								unoptimized
+							/>
+							Enter {hotelName}
+						</Link>
 					</div>
 					<div className="flex-1 text-center sm:text-left">
 						<div

src/app/(site)/page.tsx

@@ -292,20 +292,20 @@ export default async function Home() {
 									{tp("latestUsers", { count: users.toLocaleString() })}
 								</h2>
 							</div>
-							<div className="grid grid-cols-4 sm:grid-cols-6 gap-2 p-3">
+							<div className="grid grid-cols-4 gap-2 p-3">
 								{latestUsers.map((u) => (
 									<div key={u.username} className="flex flex-col items-center gap-1">
 										<div className="relative overflow-visible">
 											<Image
 												src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 3 })}
 												alt={u.username}
-												width={42}
+												width={64}
-												height={52}
+												height={78}
-												style={{ marginTop: "-6px" }}
+												style={{ marginTop: "-8px" }}
 												unoptimized
 											/>
 										</div>
-										<span className="text-[9px] font-bold truncate max-w-[48px] text-center leading-tight" style={{ color: "var(--color-text-readable)" }}>
+										<span className="text-[11px] font-bold truncate max-w-[64px] text-center leading-tight" style={{ color: "var(--color-text-readable)" }}>
 											{u.username}
 										</span>
 									</div>

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

@@ -216,15 +216,15 @@ export default async function RegisterPage() {
 									}}
 								>
 									<Image
-										src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2, size: "s" })}
+										src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2 })}
 										alt=""
-										width={26}
+										width={52}
-										height={32}
+										height={64}
 										className="rounded-md"
 										unoptimized
 									/>
 									<span
-										className="text-[8px] font-bold truncate w-full text-center leading-tight"
+										className="text-[10px] font-bold truncate w-full text-center leading-tight"
 										style={{ color: "var(--color-text-readable)" }}
 									>
 										{u.username}