feat: redesign home and register pages for cleaner overview

Rebuild the home landing layout into a streamlined, more scannable
design: a centered focused hero, feature cards, a compact stats row,
and clearer news/users sections. Rework the register page into a
balanced two-column layout with a tidier intro panel and sticky form.
Add statsArticles translation key across locale files; verified with
tsc and biome.

src/app/(site)/page.tsx

@@ -99,6 +99,24 @@ export default async function Home() {
 	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 ── */}
@@ -196,12 +214,11 @@ 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"
+							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)",
@@ -226,15 +243,15 @@ export default async function Home() {
 							<TypewriterText text={tp("welcome", { hotelName })} />
 						</h1>
 						<p
-								className="text-base leading-relaxed max-w-xl mb-7 md:text-lg"
+							className="text-base leading-relaxed max-w-2xl mb-8 md:text-lg"
 							style={{ color: "var(--color-text-muted)" }}
 						>
-								{th("tagline")}
+							{tp("welcomeBody")}
 						</p>
-							<div className="flex flex-wrap gap-3 justify-center md:justify-start">
+						<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-7 py-3.5 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg"
+								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)",
@@ -253,7 +270,7 @@ export default async function Home() {
 							</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"
+								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)",
@@ -266,28 +283,49 @@ export default async function Home() {
 							</Link>
 						</div>
 					</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
-							/>
-						</div>
-					</div>
 				</div>
 			</Reveal>
 
-			{/* ── Stats ── */}
+			{/* ── Features ── */}
 			<Reveal>
-				<div className="grid grid-cols-2 gap-4 stagger-children mx-auto max-w-2xl">
+				<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: users,
@@ -299,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
+							<div className="mb-0.5 text-3xl font-black tracking-tight md:text-4xl">
-								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"
+								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>
-							</div>
 						</SurfaceCard>
 					))}
 				</div>
 			</Reveal>
 
-			{/* ── Login + News ── */}
+			{/* ── Login + Online users ── */}
 			<div className="flex flex-col gap-4 md:flex-row">
-				{/* Left: Login & Online users */}
 				<Reveal className="flex w-full flex-col gap-4 md:w-1/3 md:flex-shrink-0">
 					<SurfaceCard
 						title={th("login")}
@@ -398,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")}
@@ -471,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,36 +121,45 @@ export default async function RegisterPage() {
 			</Reveal>
 
 			<Reveal>
-				<div className="flex flex-col gap-8 lg:flex-row">
+				<div className="flex flex-col gap-8 lg:flex-row lg:items-start">
-					{/* Left panel */}
+					{/* Left: intro panel */}
-					<div className="lg:w-80 shrink-0 space-y-4">
+					<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">
+								<div className="flex items-center gap-4">
+									<div className="shrink-0 animate-float">
 										<Image
 											src="/assets/images/FrankwithBag.gif"
 											alt="Frank"
-									width={130}
+											width={110}
-									height={170}
+											height={145}
-									className="object-contain mx-auto drop-shadow-xl animate-float"
+											className="object-contain drop-shadow-xl"
 											unoptimized
 											priority
 										/>
+									</div>
+									<div className="flex-1">
 										<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"
+											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)",
@@ -165,7 +173,7 @@ export default async function RegisterPage() {
 											{tpr("usersOnline", { count: online })}
 										</div>
 										<h1
-									className="text-xl font-black"
+											className="text-lg font-black leading-tight"
 											style={{
 												color: "var(--color-text-readable)",
 												fontFamily: "var(--font-nunito)",
@@ -174,12 +182,14 @@ export default async function RegisterPage() {
 											{tpr("title")} — {hotelName}
 										</h1>
 										<p
-									className="text-xs mt-1 mx-auto max-w-[200px] leading-relaxed"
+											className="text-xs mt-1.5 leading-relaxed"
 											style={{ color: "var(--color-text-muted)" }}
 										>
-									{th("tagline")}
+											{tpr("subtitle")}
 										</p>
 									</div>
+								</div>
+							</div>
 						</SurfaceCard>
 
 						{recentUsers.length > 0 && (
@@ -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/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": "Меблі",