Merge branch 'main' of https://gitlab.epicnabbo.nl/remco/EpicNext-Cms into codex/housekeeping-complete

src/app/(site)/page.tsx

@@ -29,57 +29,43 @@ async function getHotelData() {
 		siteSettings.get("cms_logo", ""),
 	]);
 
-	const [
-		online,
-		users,
-		rooms,
-		articles,
-		recentUsers,
-		recentPhotos,
-		latestUsers,
-	] = await Promise.all([
-		cached("online_count", 10_000, () =>
-			db
-				.select({ total: count() })
-				.from(User)
-				.where(eq(User.online, "1"))
-				.then((rows) => rows[0]?.total ?? 0),
-		).catch(() => 0),
-		cached("total_users", 300_000, () =>
-			db
-				.select({ total: count() })
-				.from(User)
-				.then((rows) => rows[0]?.total ?? 0),
-		).catch(() => 0),
-		cached("total_rooms", 300_000, () =>
-			db
-				.select({ total: count() })
-				.from(Rooms)
-				.then((rows) => rows[0]?.total ?? 0),
-		).catch(() => 0),
-		getNewsList(4),
-		cached("home_online_users", 15_000, () =>
-			db
-				.select({ username: User.username, look: User.look })
-				.from(User)
-				.where(eq(User.online, "1"))
-				.limit(30),
-		).catch(() => []),
-		cached("home_recent_photos", 60_000, () =>
-			db
-				.select({ id: CameraWeb.id, url: CameraWeb.url })
-				.from(CameraWeb)
-				.orderBy(desc(CameraWeb.timestamp))
-				.limit(4),
-		).catch(() => []),
-		cached("home_latest_users", 60_000, () =>
-			db
-				.select({ username: User.username, look: User.look })
-				.from(User)
-				.orderBy(desc(User.accountCreated))
-				.limit(8),
-		).catch(() => []),
-	]);
+	const [online, users, rooms, articles, recentUsers, recentPhotos] =
+		await Promise.all([
+			cached("online_count", 10_000, () =>
+				db
+					.select({ total: count() })
+					.from(User)
+					.where(eq(User.online, "1"))
+					.then((rows) => rows[0]?.total ?? 0),
+			).catch(() => 0),
+			cached("total_users", 300_000, () =>
+				db
+					.select({ total: count() })
+					.from(User)
+					.then((rows) => rows[0]?.total ?? 0),
+			).catch(() => 0),
+			cached("total_rooms", 300_000, () =>
+				db
+					.select({ total: count() })
+					.from(Rooms)
+					.then((rows) => rows[0]?.total ?? 0),
+			).catch(() => 0),
+			getNewsList(4),
+			cached("home_online_users", 15_000, () =>
+				db
+					.select({ username: User.username, look: User.look })
+					.from(User)
+					.where(eq(User.online, "1"))
+					.limit(12),
+			).catch(() => []),
+			cached("home_recent_photos", 60_000, () =>
+				db
+					.select({ id: CameraWeb.id, url: CameraWeb.url })
+					.from(CameraWeb)
+					.orderBy(desc(CameraWeb.timestamp))
+					.limit(4),
+			).catch(() => []),
+		]);
 
 	return {
 		hotelName,
@@ -89,7 +75,6 @@ async function getHotelData() {
 		articles,
 		recentUsers,
 		recentPhotos,
-		latestUsers,
 		logo,
 	};
 }
@@ -108,13 +93,30 @@ export default async function Home() {
 		articles,
 		recentUsers,
 		recentPhotos,
-		latestUsers,
 		logo,
 	} = await getHotelData();
 
 	const captcha = await captchaConfig();
 	const nonce = (await headers()).get("x-nonce") ?? undefined;
 
+	const features = [
+		{
+			title: tp("featuresAvatar"),
+			desc: tp("featuresAvatarDesc"),
+			icon: "/assets/images/icons/friends.png",
+		},
+		{
+			title: tp("featuresFurniture"),
+			desc: tp("featuresFurnitureDesc"),
+			icon: "/assets/images/icons/catalog.png",
+		},
+		{
+			title: tp("featuresCommunity"),
+			desc: tp("featuresCommunityDesc"),
+			icon: "/assets/images/icons/navigation/goody.png",
+		},
+	];
+
 	return (
 		<div className="mx-auto w-full max-w-6xl flex flex-col gap-8 pb-16">
 			{/* ── Top Bar ── */}
@@ -212,104 +214,119 @@ export default async function Home() {
 					/>
 					<AmbientOrbs />
 					<div
-						className="relative flex flex-col items-center gap-8 px-6 py-12 md:flex-row md:px-12 md:py-16"
+						className="relative flex flex-col items-center gap-8 px-6 py-12 text-center md:px-12 md:py-20"
 						style={{ zIndex: 2 }}
 					>
-						<div className="flex-1 text-center md:text-left">
-							<div
-								className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-widest mb-5 border backdrop-blur-sm"
-								style={{
-									background:
-										"color-mix(in srgb, var(--color-primary) 12%, transparent)",
-									borderColor:
-										"color-mix(in srgb, var(--color-primary) 20%, transparent)",
-									color: "var(--color-primary-readable, var(--color-primary))",
-								}}
-							>
-								<span className="relative flex h-2 w-2">
-									<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
-									<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
-								</span>
-								{th("online", { count: online, hotel: hotelName })}
-							</div>
-							<h1
-								className="text-4xl font-black leading-[1.05] tracking-tight mb-3 md:text-5xl lg:text-6xl"
-								style={{
-									color: "var(--color-text-readable)",
-									fontFamily: "var(--font-nunito)",
-								}}
-							>
-								<TypewriterText text={tp("welcome", { hotelName })} />
-							</h1>
-							<p
-								className="text-base leading-relaxed max-w-xl mb-7 md:text-lg"
-								style={{ color: "var(--color-text-muted)" }}
-							>
-								{th("tagline")}
-							</p>
-							<div className="flex flex-wrap gap-3 justify-center md:justify-start">
-								<Link
-									href="/register"
-									className="inline-flex items-center gap-2.5 font-extrabold text-sm px-7 py-3.5 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg"
-									style={{
-										background: "var(--color-primary)",
-										color: "var(--color-primary-foreground)",
-										boxShadow:
-											"0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
-									}}
-								>
-									<Image
-										src="/assets/images/EnterHubbly.png"
-										alt=""
-										width={20}
-										height={20}
-										unoptimized
-									/>
-									{tp("register")}
-								</Link>
-								<Link
-									href="/login"
-									className="inline-flex items-center gap-2 font-bold text-sm px-7 py-3.5 rounded-xl border-2 transition-all duration-200 hover:scale-[1.03] active:scale-95 backdrop-blur-sm"
-									style={{
-										borderColor:
-											"color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
-										color: "var(--color-text-readable)",
-										background:
-											"color-mix(in srgb, var(--color-surface) 50%, transparent)",
-									}}
-								>
-									{th("login")}
-								</Link>
-							</div>
+						<div
+							className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-widest mb-2 border backdrop-blur-sm"
+							style={{
+								background:
+									"color-mix(in srgb, var(--color-primary) 12%, transparent)",
+								borderColor:
+									"color-mix(in srgb, var(--color-primary) 20%, transparent)",
+								color: "var(--color-primary-readable, var(--color-primary))",
+							}}
+						>
+							<span className="relative flex h-2 w-2">
+								<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+								<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
+							</span>
+							{th("online", { count: online, hotel: hotelName })}
 						</div>
-						<div className="shrink-0 relative animate-float">
-							<div
-								className="absolute -bottom-4 -left-4 w-48 h-48 rounded-full opacity-[0.15] blur-[60px]"
-								style={{ background: "var(--color-primary)" }}
-							/>
-							<Image
-								src="/assets/images/FrankwithBag.gif"
-								alt="Frank"
-								width={170}
-								height={230}
-								className="object-contain drop-shadow-2xl relative"
-								unoptimized
-								priority
-							/>
+						<h1
+							className="text-4xl font-black leading-[1.05] tracking-tight mb-3 md:text-5xl lg:text-6xl"
+							style={{
+								color: "var(--color-text-readable)",
+								fontFamily: "var(--font-nunito)",
+							}}
+						>
+							<TypewriterText text={tp("welcome", { hotelName })} />
+						</h1>
+						<p
+							className="text-base leading-relaxed max-w-2xl mb-8 md:text-lg"
+							style={{ color: "var(--color-text-muted)" }}
+						>
+							{tp("welcomeBody")}
+						</p>
+						<div className="flex flex-wrap gap-3 justify-center">
+							<Link
+								href="/register"
+								className="inline-flex items-center gap-2.5 font-extrabold text-sm px-8 py-4 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg"
+								style={{
+									background: "var(--color-primary)",
+									color: "var(--color-primary-foreground)",
+									boxShadow:
+										"0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
+								}}
+							>
+								<Image
+									src="/assets/images/EnterHubbly.png"
+									alt=""
+									width={20}
+									height={20}
+									unoptimized
+								/>
+								{tp("register")}
+							</Link>
+							<Link
+								href="/login"
+								className="inline-flex items-center gap-2 font-bold text-sm px-8 py-4 rounded-xl border-2 transition-all duration-200 hover:scale-[1.03] active:scale-95 backdrop-blur-sm"
+								style={{
+									borderColor:
+										"color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
+									color: "var(--color-text-readable)",
+									background:
+										"color-mix(in srgb, var(--color-surface) 50%, transparent)",
+								}}
+							>
+								{th("login")}
+							</Link>
 						</div>
 					</div>
 				</div>
 			</Reveal>
 
-			{/* ── Stats ── */}
+			{/* ── Features ── */}
 			<Reveal>
-				<div className="grid grid-cols-3 gap-4 stagger-children">
+				<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+					{features.map((f) => (
+						<SurfaceCard
+							key={f.title}
+							className="relative p-5 text-center transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
+						>
+							<div
+								className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-xl"
+								style={{
+									background:
+										"color-mix(in srgb, var(--color-primary) 14%, transparent)",
+								}}
+							>
+								<Image src={f.icon} alt="" width={26} height={26} unoptimized />
+							</div>
+							<h3
+								className="text-base font-extrabold mb-1"
+								style={{
+									color: "var(--color-text-readable)",
+									fontFamily: "var(--font-nunito)",
+								}}
+							>
+								{f.title}
+							</h3>
+							<p
+								className="text-sm leading-relaxed"
+								style={{ color: "var(--color-text-muted)" }}
+							>
+								{f.desc}
+							</p>
+						</SurfaceCard>
+					))}
+				</div>
+			</Reveal>
+
+			{/* ── Stats + Login ── */}
+			<Reveal>
+				<div className="grid grid-cols-1 gap-4 md:grid-cols-4">
 					{[
-						{
-							value: online,
-							label: tp("statsOnline"),
-							icon: "/assets/images/icons/online-friends.png",
-						},
 						{
 							value: users,
 							label: tp("statsCitizens"),
@@ -320,52 +337,38 @@ export default async function Home() {
 							label: tp("statsRooms"),
 							icon: "/assets/images/icons/catalog.png",
 						},
+						{
+							value: online,
+							label: tp("statsOnline"),
+							icon: "/assets/images/icons/navigation/me.png",
+						},
+						{
+							value: articles.length,
+							label: tp("statsArticles"),
+							icon: "/assets/images/icons/article.gif",
+						},
 					].map((s) => (
 						<SurfaceCard
 							key={s.label}
 							className="relative p-5 text-center transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
 						>
+							<div className="mb-0.5 text-3xl font-black tracking-tight md:text-4xl">
+								<AnimatedCounter value={s.value} />
+							</div>
 							<div
-								className="absolute -top-6 -right-6 w-20 h-20 rounded-full opacity-[0.06]"
-								style={{ background: "var(--color-primary)" }}
-							/>
-							<div className="relative">
-								<div
-									className="mx-auto mb-2.5 flex h-10 w-10 items-center justify-center rounded-xl"
-									style={{
-										background:
-											"color-mix(in srgb, var(--color-primary) 14%, transparent)",
-									}}
-								>
-									<Image
-										src={s.icon}
-										alt=""
-										width={24}
-										height={24}
-										unoptimized
-									/>
-								</div>
-								<div
-									className="mb-0.5 text-3xl font-black tracking-tight md:text-4xl"
-									style={{ color: "var(--color-primary)" }}
-								>
-									<AnimatedCounter value={s.value} />
-								</div>
-								<div
-									className="text-xs font-bold uppercase tracking-widest"
-									style={{ color: "var(--color-text-muted)" }}
-								>
-									{s.label}
-								</div>
+								className="text-xs font-bold uppercase tracking-widest flex items-center justify-center gap-1.5"
+								style={{ color: "var(--color-text-muted)" }}
+							>
+								<Image src={s.icon} alt="" width={14} height={14} unoptimized />
+								{s.label}
 							</div>
 						</SurfaceCard>
 					))}
 				</div>
 			</Reveal>
 
-			{/* ── Login + News ── */}
+			{/* ── Login + Online users ── */}
 			<div className="flex flex-col gap-4 md:flex-row">
-				{/* Left: Login & Register */}
 				<Reveal className="flex w-full flex-col gap-4 md:w-1/3 md:flex-shrink-0">
 					<SurfaceCard
 						title={th("login")}
@@ -382,48 +385,32 @@ export default async function Home() {
 						/>
 					</SurfaceCard>
 
-					<Link href="/register" className="relative block group">
-						<SurfaceCard className="transition-all duration-200 group-hover:shadow-lg">
-							<Image
-								src="/assets/images/EnterHubbly.png"
-								alt="Register"
-								width={300}
-								height={100}
-								className="block w-full"
-								unoptimized
-							/>
-						</SurfaceCard>
-						<span
-							className="pointer-events-none absolute inset-0 flex items-center text-2xl font-extrabold text-white md:text-3xl"
-							style={{
-								marginLeft: "18px",
-								fontFamily: "var(--font-nunito)",
-								textShadow: "0 2px 8px rgba(0,0,0,0.6)",
-							}}
-						>
-							{tp("register")}
-						</span>
-					</Link>
-
-					{latestUsers.length > 0 && (
+					{recentUsers.length > 0 && (
 						<SurfaceCard
-							title={tp("latestUsers", { count: users.toLocaleString() })}
+							title={tp("recentUsers")}
 							icon="/assets/images/icons/navigation/goody.png"
+							actionHref="/community"
+							actionLabel={tp("allUsers")}
 							bodyClassName="p-4"
 						>
 							<div className="grid grid-cols-4 gap-2">
-								{latestUsers.map((u) => (
+								{recentUsers.map((u) => (
 									<div
 										key={u.username}
-										className="flex flex-col items-center gap-1"
+										className="flex flex-col items-center gap-0.5 rounded-lg px-1 py-1"
+										style={{
+											background:
+												"color-mix(in srgb, var(--color-primary) 5%, transparent)",
+										}}
 									>
 										<UserAvatarThumbnail
 											figure={u.look}
 											alt={u.username}
-											options={{ direction: 3 }}
+											options={{ direction: 2 }}
+											className="rounded-md"
 										/>
 										<span
-											className="max-w-[64px] truncate text-center text-[11px] font-bold leading-tight"
+											className="max-w-[64px] truncate text-center text-[10px] font-bold leading-tight"
 											style={{ color: "var(--color-text-readable)" }}
 										>
 											{u.username}
@@ -435,7 +422,7 @@ export default async function Home() {
 					)}
 				</Reveal>
 
-				{/* Right: News */}
+				{/* News */}
 				<Reveal delay={0.15} className="flex w-full flex-col gap-4 md:w-2/3">
 					<SurfaceCard
 						title={tp("latestNews")}
@@ -501,91 +488,6 @@ export default async function Home() {
 				</Reveal>
 			</div>
 
-			{/* ── Online users ── */}
-			{recentUsers.length > 0 && (
-				<Reveal>
-					<SurfaceCard
-						title={tp("recentUsers")}
-						icon="/assets/images/icons/navigation/goody.png"
-						actionHref="/community"
-						actionLabel={tp("allUsers")}
-					>
-						<div className="flex flex-wrap justify-center gap-2">
-							{recentUsers.slice(0, 12).map((u) => (
-								<div
-									key={u.username}
-									className="flex flex-col items-center gap-0.5 rounded-lg px-2 py-1.5 transition-all duration-200 hover:scale-110 hover:shadow-md"
-									style={{
-										background:
-											"color-mix(in srgb, var(--color-primary) 5%, transparent)",
-									}}
-								>
-									<UserAvatarThumbnail
-										figure={u.look}
-										alt={u.username}
-										options={{ direction: 2 }}
-										className="rounded-md"
-									/>
-									<span
-										className="max-w-[50px] truncate text-center text-[9px] font-bold leading-tight"
-										style={{ color: "var(--color-text-readable)" }}
-									>
-										{u.username}
-									</span>
-								</div>
-							))}
-						</div>
-					</SurfaceCard>
-				</Reveal>
-			)}
-
-			{/* ── Bottom CTA ── */}
-			<Reveal>
-				<div
-					className="relative overflow-hidden rounded-3xl border px-6 py-12 text-center"
-					style={{
-						background: `linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)), color-mix(in srgb, var(--color-surface) 70%, transparent))`,
-						borderColor:
-							"color-mix(in srgb, var(--color-primary) 15%, transparent)",
-					}}
-				>
-					<h2
-						className="mb-2 text-2xl font-black tracking-tight md:text-3xl"
-						style={{
-							color: "var(--color-text-readable)",
-							fontFamily: "var(--font-nunito)",
-						}}
-					>
-						{tp("joinNow", { hotelName })}
-					</h2>
-					<p
-						className="mb-6 max-w-sm mx-auto text-sm"
-						style={{ color: "var(--color-text-muted)" }}
-					>
-						{tp("welcomeBody")}
-					</p>
-					<Link
-						href="/register"
-						className="inline-flex items-center gap-2.5 font-extrabold text-sm px-8 py-3.5 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg"
-						style={{
-							background: "var(--color-primary)",
-							color: "var(--color-primary-foreground)",
-							boxShadow:
-								"0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
-						}}
-					>
-						<Image
-							src="/assets/images/EnterHubbly.png"
-							alt=""
-							width={20}
-							height={20}
-							unoptimized
-						/>
-						{tp("register")}
-					</Link>
-				</div>
-			</Reveal>
-
 			{/* ── Recent photos ── */}
 			{recentPhotos.length > 0 && (
 				<Reveal>
@@ -593,7 +495,7 @@ export default async function Home() {
 						title={tp("recentPhotos")}
 						icon="/assets/images/icons/camera.png"
 					>
-						<div className="mx-auto grid max-w-sm grid-cols-4 gap-2">
+						<div className="mx-auto grid max-w-md grid-cols-4 gap-2">
 							{recentPhotos.slice(0, 4).map((p) => (
 								<Link
 									key={p.id}

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

@@ -17,7 +17,6 @@ import { captchaConfig } from "@/lib/services/captcha";
 import { siteSettings } from "@/lib/services/site-settings";
 
 export default async function RegisterPage() {
-	const th = await getTranslations("header");
 	const tpr = await getTranslations("pages.register");
 	const [hotelName, cfg, logo] = await Promise.all([
 		resolveHotelName(),
@@ -122,63 +121,74 @@ export default async function RegisterPage() {
 			</Reveal>
 
 			<Reveal>
-				<div className="flex flex-col gap-8 lg:flex-row">
-					{/* Left panel */}
-					<div className="lg:w-80 shrink-0 space-y-4">
+				<div className="flex flex-col gap-8 lg:flex-row lg:items-start">
+					{/* Left: intro panel */}
+					<div className="lg:w-96 shrink-0 space-y-4">
 						<SurfaceCard
-							className="relative p-6 text-center"
+							className="relative overflow-hidden p-6"
 							style={{
 								borderColor:
 									"color-mix(in srgb, var(--color-primary) 20%, transparent)",
-								background: `url(/assets/images/background.png) center/cover no-repeat`,
 							}}
 						>
+							<div
+								className="absolute inset-0"
+								style={{
+									background: `url(/assets/images/background.png) center/cover no-repeat`,
+								}}
+							/>
 							<div
 								className="absolute inset-0"
 								style={{
 									background:
-										"linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 85%, transparent) 0%, color-mix(in srgb, var(--color-surface) 40%, transparent) 100%)",
+										"linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 88%, transparent) 0%, color-mix(in srgb, var(--color-surface) 35%, transparent) 100%)",
 								}}
 							/>
 							<div className="relative">
-								<Image
-									src="/assets/images/FrankwithBag.gif"
-									alt="Frank"
-									width={130}
-									height={170}
-									className="object-contain mx-auto drop-shadow-xl animate-float"
-									unoptimized
-									priority
-								/>
-								<div
-									className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full text-xs font-bold uppercase tracking-wider mt-4 mb-3 border"
-									style={{
-										borderColor:
-											"color-mix(in srgb, var(--color-primary) 18%, transparent)",
-										background:
-											"color-mix(in srgb, var(--color-primary) 10%, transparent)",
-										color:
-											"var(--color-primary-readable, var(--color-primary))",
-									}}
-								>
-									<span className="w-2 h-2 rounded-full bg-green-500" />
-									{tpr("usersOnline", { count: online })}
+								<div className="flex items-center gap-4">
+									<div className="shrink-0 animate-float">
+										<Image
+											src="/assets/images/FrankwithBag.gif"
+											alt="Frank"
+											width={110}
+											height={145}
+											className="object-contain drop-shadow-xl"
+											unoptimized
+											priority
+										/>
+									</div>
+									<div className="flex-1">
+										<div
+											className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider mb-2 border"
+											style={{
+												borderColor:
+													"color-mix(in srgb, var(--color-primary) 18%, transparent)",
+												background:
+													"color-mix(in srgb, var(--color-primary) 10%, transparent)",
+												color:
+													"var(--color-primary-readable, var(--color-primary))",
+											}}
+										>
+											<span className="w-2 h-2 rounded-full bg-green-500" />
+											{tpr("usersOnline", { count: online })}
+										</div>
+										<h1
+											className="text-lg font-black leading-tight"
+											style={{
+												color: "var(--color-text-readable)",
+												fontFamily: "var(--font-nunito)",
+											}}
+										>
+											{tpr("title")} — {hotelName}
+										</h1>
+										<p
+											className="text-xs mt-1.5 leading-relaxed"
+											style={{ color: "var(--color-text-muted)" }}
+										>
+											{tpr("subtitle")}
+										</p>
+									</div>
 								</div>
-								<h1
-									className="text-xl font-black"
-									style={{
-										color: "var(--color-text-readable)",
-										fontFamily: "var(--font-nunito)",
-									}}
-								>
-									{tpr("title")} — {hotelName}
-								</h1>
-								<p
-									className="text-xs mt-1 mx-auto max-w-[200px] leading-relaxed"
-									style={{ color: "var(--color-text-muted)" }}
-								>
-									{th("tagline")}
-								</p>
 							</div>
 						</SurfaceCard>
 
@@ -251,7 +261,7 @@ export default async function RegisterPage() {
 						)}
 
 						<p
-							className="text-xs text-center"
+							className="text-sm text-center"
 							style={{ color: "var(--color-text-muted)" }}
 						>
 							{tpr("alreadyHaveAccountPre")}{" "}
@@ -268,7 +278,7 @@ export default async function RegisterPage() {
 					</div>
 
 					{/* Right: form */}
-					<div className="flex-1">
+					<div className="flex-1 lg:sticky lg:top-6">
 						<SurfaceCard
 							title={tpr("title")}
 							icon="/assets/images/icons/navigation/me.png"

src/components/shared/public-avatar-contract.test.ts

@@ -10,7 +10,7 @@ const compactCallSites = new Map<string, number>([
 	["src/app/(site)/login/page.tsx", 2],
 	["src/app/(site)/me/page.tsx", 1],
 	["src/app/(site)/messages/page.tsx", 2],
-	["src/app/(site)/page.tsx", 2],
+	["src/app/(site)/page.tsx", 1],
 	["src/app/(site)/radio/leaderboard/page.tsx", 1],
 	["src/app/(site)/radio/shouts/page.tsx", 1],
 	["src/app/(site)/rankings/page.tsx", 1],

src/messages/bg.json

@@ -194,6 +194,7 @@
 			"statsOnline": "Онлайн",
 			"statsCitizens": "Граждани",
 			"statsRooms": "Стаи",
+			"statsArticles": "Статии",
 			"featuresAvatar": "Аватар",
 			"featuresAvatarDesc": "Създай своя уникален външен вид",
 			"featuresFurniture": "Мебели",

src/messages/cs.json

@@ -194,6 +194,7 @@
 			"statsOnline": "Online",
 			"statsCitizens": "Občané",
 			"statsRooms": "Pokoje",
+			"statsArticles": "Články",
 			"featuresAvatar": "Avatar",
 			"featuresAvatarDesc": "Vytvoř si svůj jedinečný vzhled",
 			"featuresFurniture": "Nábytek",

src/messages/da.json

@@ -194,6 +194,7 @@
 			"statsOnline": "Online",
 			"statsCitizens": "Borgere",
 			"statsRooms": "Værelser",
+			"statsArticles": "Artikler",
 			"featuresAvatar": "Avatar",
 			"featuresAvatarDesc": "Skab dit unikke look",
 			"featuresFurniture": "Møbler",

src/messages/de.json

@@ -194,6 +194,7 @@
 			"statsOnline": "Online",
 			"statsCitizens": "Bürger",
 			"statsRooms": "Räume",
+			"statsArticles": "Artikel",
 			"featuresAvatar": "Avatar",
 			"featuresAvatarDesc": "Erstelle deinen einzigartigen Look",
 			"featuresFurniture": "Möbel",

src/messages/el.json

@@ -194,6 +194,7 @@
 			"statsOnline": "Συνδεδεμένοι",
 			"statsCitizens": "Πολίτες",
 			"statsRooms": "Δωμάτια",
+			"statsArticles": "Άρθρα",
 			"featuresAvatar": "Άβαταρ",
 			"featuresAvatarDesc": "Δημιούργησε τη μοναδική σου εμφάνιση",
 			"featuresFurniture": "Έπιπλα",

src/messages/en.json

@@ -236,6 +236,7 @@
 			"statsOnline": "Online",
 			"statsCitizens": "Citizens",
 			"statsRooms": "Rooms",
+			"statsArticles": "Articles",
 			"featuresAvatar": "Avatar",
 			"featuresAvatarDesc": "Create your unique look",
 			"featuresFurniture": "Furniture",

src/messages/es.json

@@ -194,6 +194,7 @@
 			"statsOnline": "En línea",
 			"statsCitizens": "Ciudadanos",
 			"statsRooms": "Salas",
+			"statsArticles": "Artículos",
 			"featuresAvatar": "Avatar",
 			"featuresAvatarDesc": "Crea tu look único",
 			"featuresFurniture": "Muebles",

src/messages/fr.json

@@ -194,6 +194,7 @@
 			"statsOnline": "En ligne",
 			"statsCitizens": "Citoyens",
 			"statsRooms": "Salons",
+			"statsArticles": "Articles",
 			"featuresAvatar": "Avatar",
 			"featuresAvatarDesc": "Crée ton look unique",
 			"featuresFurniture": "Meubles",

src/messages/hr.json

@@ -194,6 +194,7 @@
 			"statsOnline": "Online",
 			"statsCitizens": "Građani",
 			"statsRooms": "Sobe",
+			"statsArticles": "Članci",
 			"featuresAvatar": "Avatar",
 			"featuresAvatarDesc": "Stvori svoj jedinstveni izgled",
 			"featuresFurniture": "Namještaj",

src/messages/hu.json

@@ -194,6 +194,7 @@
 			"statsOnline": "Online",
 			"statsCitizens": "Polgárok",
 			"statsRooms": "Szobák",
+			"statsArticles": "Cikkek",
 			"featuresAvatar": "Avatár",
 			"featuresAvatarDesc": "Hozd létre egyedi megjelenésed",
 			"featuresFurniture": "Bútorok",

src/messages/it.json

@@ -236,6 +236,7 @@
 			"statsOnline": "Online",
 			"statsCitizens": "Cittadini",
 			"statsRooms": "Stanze",
+			"statsArticles": "Articoli",
 			"featuresAvatar": "Avatar",
 			"featuresAvatarDesc": "Crea il tuo look unico",
 			"featuresFurniture": "Arredi",

src/messages/nl.json

@@ -234,6 +234,7 @@
 			"statsOnline": "Online",
 			"statsCitizens": "Burgers",
 			"statsRooms": "Kamers",
+			"statsArticles": "Artikelen",
 			"featuresAvatar": "Avatar",
 			"featuresAvatarDesc": "Maak je eigen unieke look",
 			"featuresFurniture": "Meubels",

src/messages/no.json

@@ -194,6 +194,7 @@
 			"statsOnline": "Online",
 			"statsCitizens": "Innbyggere",
 			"statsRooms": "Rom",
+			"statsArticles": "Artikler",
 			"featuresAvatar": "Avatar",
 			"featuresAvatarDesc": "Skap ditt unike utseende",
 			"featuresFurniture": "Møbler",

src/messages/pl.json

@@ -194,6 +194,7 @@
 			"statsOnline": "Online",
 			"statsCitizens": "Obywatele",
 			"statsRooms": "Pokoje",
+			"statsArticles": "Artykuły",
 			"featuresAvatar": "Awatar",
 			"featuresAvatarDesc": "Stwórz swój niepowtarzalny wygląd",
 			"featuresFurniture": "Meble",

src/messages/pt.json

@@ -194,6 +194,7 @@
 			"statsOnline": "Online",
 			"statsCitizens": "Cidadãos",
 			"statsRooms": "Salas",
+			"statsArticles": "Artigos",
 			"featuresAvatar": "Avatar",
 			"featuresAvatarDesc": "Crie seu visual único",
 			"featuresFurniture": "Móveis",

src/messages/ro.json

@@ -194,6 +194,7 @@
 			"statsOnline": "Online",
 			"statsCitizens": "Cetățeni",
 			"statsRooms": "Camere",
+			"statsArticles": "Articole",
 			"featuresAvatar": "Avatar",
 			"featuresAvatarDesc": "Creează-ți aspectul unic",
 			"featuresFurniture": "Mobilier",

src/messages/ru.json

@@ -194,6 +194,7 @@
 			"statsOnline": "Онлайн",
 			"statsCitizens": "Граждане",
 			"statsRooms": "Комнаты",
+			"statsArticles": "Статьи",
 			"featuresAvatar": "Аватар",
 			"featuresAvatarDesc": "Создай свой уникальный образ",
 			"featuresFurniture": "Мебель",

src/messages/sk.json

@@ -194,6 +194,7 @@
 			"statsOnline": "Online",
 			"statsCitizens": "Občania",
 			"statsRooms": "Izby",
+			"statsArticles": "Články",
 			"featuresAvatar": "Avatar",
 			"featuresAvatarDesc": "Vytvor si svoj jedinečný vzhľad",
 			"featuresFurniture": "Nábytok",

src/messages/sr.json

@@ -194,6 +194,7 @@
 			"statsOnline": "Онлајн",
 			"statsCitizens": "Грађани",
 			"statsRooms": "Собе",
+			"statsArticles": "Чланци",
 			"featuresAvatar": "Аватар",
 			"featuresAvatarDesc": "Направи свој јединствени изглед",
 			"featuresFurniture": "Намештај",

src/messages/sv.json

@@ -194,6 +194,7 @@
 			"statsOnline": "Online",
 			"statsCitizens": "Medborgare",
 			"statsRooms": "Rum",
+			"statsArticles": "Artiklar",
 			"featuresAvatar": "Avatar",
 			"featuresAvatarDesc": "Skapa din unika look",
 			"featuresFurniture": "Möbler",

src/messages/tr.json

@@ -194,6 +194,7 @@
 			"statsOnline": "Çevrimiçi",
 			"statsCitizens": "Vatandaşlar",
 			"statsRooms": "Odalar",
+			"statsArticles": "Makaleler",
 			"featuresAvatar": "Avatar",
 			"featuresAvatarDesc": "Kendine özgü görünümünü oluştur",
 			"featuresFurniture": "Mobilya",

src/messages/uk.json

@@ -194,6 +194,7 @@
 			"statsOnline": "Онлайн",
 			"statsCitizens": "Громадяни",
 			"statsRooms": "Кімнати",
+			"statsArticles": "Статті",
 			"featuresAvatar": "Аватар",
 			"featuresAvatarDesc": "Створи свій унікальний вигляд",
 			"featuresFurniture": "Меблі",