feat(home): make index clearer with decluttered hero and live stats panel

src/app/(site)/page.tsx

@@ -349,7 +349,112 @@ export default async function Home() {
 								{th("login")}
 							</Link>
 						</div>
-						<div className="flex flex-wrap items-center justify-center gap-2 sm:gap-2.5">
+					</div>
+				</div>
+			</Reveal>
+
+			{/* ── Features ── */}
+			<Reveal>
+				<div className="flex flex-col gap-4">
+					<div>
+						<span className="eyebrow">{tp("sectionFeaturesLabel")}</span>
+						<h2 className="section-title mt-2 text-xl sm:text-2xl">
+							{tp("sectionFeaturesTitle")}
+						</h2>
+					</div>
+					<div className="grid grid-cols-1 gap-3 sm:grid-cols-3 sm:gap-4">
+						{features.map((f, i) => {
+							const accentVar =
+								i % 2 === 0 ? "var(--color-primary)" : "var(--color-accent)";
+							return (
+								<SurfaceCard
+									key={f.title}
+									className="group card-glow card-hairline relative p-4 sm:p-5 text-center transition-all duration-300 hover:-translate-y-1.5"
+								>
+									<div
+										className="mx-auto mb-3 h-1 w-9 rounded-full opacity-80 transition-all duration-300 group-hover:w-14 group-hover:opacity-100"
+										style={{
+											background: `linear-gradient(90deg, ${accentVar}, color-mix(in srgb, ${accentVar} 45%, var(--color-accent)))`,
+										}}
+									/>
+									<div
+										className="mx-auto mb-3 flex h-11 w-11 sm:h-12 sm:w-12 items-center justify-center rounded-xl transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3"
+										style={{
+											background: `color-mix(in srgb, ${accentVar} 14%, transparent)`,
+											boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${accentVar} 10%, transparent)`,
+										}}
+									>
+										<Image
+											src={f.icon}
+											alt=""
+											width={24}
+											height={24}
+											unoptimized
+										/>
+									</div>
+									<h3
+										className="text-sm sm:text-base font-extrabold mb-1"
+										style={{
+											color: "var(--color-text-readable)",
+											fontFamily: "var(--font-nunito)",
+										}}
+									>
+										{f.title}
+									</h3>
+									<p
+										className="text-xs sm:text-sm leading-relaxed"
+										style={{ color: "var(--color-text-muted)" }}
+									>
+										{f.desc}
+									</p>
+								</SurfaceCard>
+							);
+						})}
+					</div>
+				</div>
+			</Reveal>
+
+			{/* ── Stats + Login ── */}
+			<Reveal>
+				<div className="flex flex-col gap-4">
+					<div className="flex flex-wrap items-end justify-between gap-3">
+						<div>
+							<span className="eyebrow">{tp("sectionStatsLabel")}</span>
+							<h2 className="section-title mt-2 text-xl sm:text-2xl">
+								{tp("sectionStatsTitle")}
+							</h2>
+						</div>
+						<span
+							className="hidden items-center gap-2 rounded-full border px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest sm:inline-flex"
+							style={{
+								borderColor:
+									"color-mix(in srgb, var(--color-primary) 22%, transparent)",
+								background:
+									"color-mix(in srgb, var(--color-primary) 8%, transparent)",
+								color: "var(--color-primary-readable, var(--color-primary))",
+							}}
+						>
+							<span className="relative flex h-1.5 w-1.5">
+								<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
+								<span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-primary" />
+							</span>
+							{tp("liveUpdates")}
+						</span>
+					</div>
+					<div
+						className="card-glow card-hairline relative overflow-hidden rounded-3xl border p-5 sm:p-8"
+						style={{
+							borderColor:
+								"color-mix(in srgb, var(--color-primary) 16%, transparent)",
+							background:
+								"linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, transparent), color-mix(in srgb, var(--color-accent) 8%, transparent))",
+						}}
+					>
+						<div
+							aria-hidden="true"
+							className="brand-halo left-1/2 top-0 h-52 w-[640px] max-w-full -translate-x-1/2 -translate-y-1/2"
+						/>
+						<div className="relative grid grid-cols-2 gap-x-4 gap-y-7 lg:grid-cols-4">
 							{[
 								{
 									value: users,
@@ -369,43 +474,73 @@ export default async function Home() {
 									icon: ICON_NAV_ME,
 									live: true,
 								},
+								{
+									value: articles?.length ?? null,
+									label: tp("statsArticles"),
+									icon: ICON_ARTICLE,
+									live: false,
+								},
 							].map((s) => (
-								<div key={s.label} className="glass-chip">
+								<div
-									<Image
+									key={s.label}
-										src={s.icon}
+									className="group relative flex flex-col items-center gap-2.5 text-center lg:border-l lg:border-[color-mix(in_srgb,var(--color-primary)_14%,transparent)] lg:first:border-l-0 lg:px-4"
-										alt=""
+								>
-										width={12}
+									<div
-										height={12}
+										className="flex h-10 w-10 items-center justify-center rounded-xl transition-transform duration-300 group-hover:scale-110"
-										unoptimized
-										className="opacity-70"
-									/>
-									<span
-										className="glass-chip-dot"
 										style={{
 											background: s.live
-												? "var(--color-primary)"
+												? "color-mix(in srgb, var(--color-primary) 18%, transparent)"
-												: "color-mix(in srgb, var(--color-text-muted) 55%, transparent)",
+												: "color-mix(in srgb, var(--color-accent) 14%, transparent)",
-											boxShadow: s.live
+											boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${
-												? "0 0 10px color-mix(in srgb, var(--color-primary) 70%, transparent)"
+												s.live ? "var(--color-primary)" : "var(--color-accent)"
-												: "none",
+											} 18%, transparent)`,
-										}}
-									/>
-									<span
-										className="glass-chip-value"
-										style={{
-											color: "var(--color-text-readable)",
-											fontSize: "13px",
 										}}
+									>
+										<Image
+											src={s.icon}
+											alt=""
+											width={20}
+											height={20}
+											unoptimized
+										/>
+									</div>
+									<div
+										className={`text-3xl font-black tracking-tight sm:text-4xl ${
+											s.live ? "gradient-text" : ""
+										}`}
+										style={
+											s.live
+												? undefined
+												: { color: "var(--color-text-readable)" }
+										}
 									>
 										{s.value === null ? (
-											<span className="text-xs">{te("unavailable")}</span>
+											<span className="text-base">{te("unavailable")}</span>
 										) : s.live ? (
 											<LiveOnlineCounter initial={s.value} />
 										) : (
 											<AnimatedCounter value={s.value} />
 										)}
-									</span>
+									</div>
-									<span className="glass-chip-label">{s.label}</span>
+									<div
+										className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[10px] font-bold uppercase tracking-widest sm:text-xs"
+										style={{
+											background: s.live
+												? "color-mix(in srgb, var(--color-primary) 12%, transparent)"
+												: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+											color: s.live
+												? "var(--color-primary-readable, var(--color-primary))"
+												: "var(--color-text-muted)",
+										}}
+									>
+										{s.live && (
+											<span className="relative flex h-1.5 w-1.5">
+												<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
+												<span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-primary" />
+											</span>
+										)}
+										{s.label}
+									</div>
 								</div>
 							))}
 						</div>
@@ -413,146 +548,6 @@ export default async function Home() {
 				</div>
 			</Reveal>
 
-			{/* ── Features ── */}
-			<Reveal>
-				<div className="flex flex-col gap-4">
-					<div>
-						<span className="eyebrow">{tp("sectionFeaturesLabel")}</span>
-						<h2 className="section-title mt-2 text-xl sm:text-2xl">
-							{tp("sectionFeaturesTitle")}
-						</h2>
-					</div>
-					<div className="grid grid-cols-1 gap-3 sm:grid-cols-3 sm:gap-4">
-						{features.map((f) => (
-							<SurfaceCard
-								key={f.title}
-								className="group card-glow card-hairline relative p-4 sm:p-5 text-center transition-all duration-300 hover:-translate-y-1.5"
-							>
-								<div
-									className="mx-auto mb-3 flex h-11 w-11 sm:h-12 sm:w-12 items-center justify-center rounded-xl transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3"
-									style={{
-										background:
-											"color-mix(in srgb, var(--color-primary) 14%, transparent)",
-										boxShadow:
-											"inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 10%, transparent)",
-									}}
-								>
-									<Image
-										src={f.icon}
-										alt=""
-										width={24}
-										height={24}
-										unoptimized
-									/>
-								</div>
-								<h3
-									className="text-sm sm:text-base font-extrabold mb-1"
-									style={{
-										color: "var(--color-text-readable)",
-										fontFamily: "var(--font-nunito)",
-									}}
-								>
-									{f.title}
-								</h3>
-								<p
-									className="text-xs sm:text-sm leading-relaxed"
-									style={{ color: "var(--color-text-muted)" }}
-								>
-									{f.desc}
-								</p>
-							</SurfaceCard>
-						))}
-					</div>
-				</div>
-			</Reveal>
-
-			{/* ── Stats + Login ── */}
-			<Reveal>
-				<div className="flex flex-col gap-4">
-					<div>
-						<span className="eyebrow">{tp("sectionStatsLabel")}</span>
-						<h2 className="section-title mt-2 text-xl sm:text-2xl">
-							{tp("sectionStatsTitle")}
-						</h2>
-					</div>
-					<div className="grid grid-cols-2 gap-3 sm:gap-4 md:grid-cols-4">
-						{[
-							{
-								value: users,
-								label: tp("statsCitizens"),
-								icon: ICON_FRIENDS,
-								live: false,
-							},
-							{
-								value: rooms,
-								label: tp("statsRooms"),
-								icon: ICON_CATALOG,
-								live: false,
-							},
-							{
-								value: online,
-								label: tp("statsOnline"),
-								icon: ICON_NAV_ME,
-								live: true,
-							},
-							{
-								value: articles?.length ?? null,
-								label: tp("statsArticles"),
-								icon: ICON_ARTICLE,
-								live: false,
-							},
-						].map((s) => (
-							<SurfaceCard
-								key={s.label}
-								className="card-glow card-hairline relative p-3 sm:p-5 text-center transition-all duration-300 ease-out hover:-translate-y-1.5 hover:shadow-xl"
-							>
-								<div
-									className="mb-1 text-2xl sm:text-3xl font-black tracking-tight md:text-4xl"
-									style={{
-										color: s.live
-											? "var(--color-primary)"
-											: "var(--color-text-readable)",
-									}}
-								>
-									{s.value === null ? (
-										<span className="text-base">{te("unavailable")}</span>
-									) : s.live ? (
-										<LiveOnlineCounter initial={s.value} />
-									) : (
-										<AnimatedCounter value={s.value} />
-									)}
-								</div>
-								<div
-									className="mt-1.5 inline-flex items-center justify-center gap-1.5 px-2.5 py-0.5 rounded-full text-[10px] sm:text-xs font-bold uppercase tracking-widest"
-									style={{
-										background:
-											"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-										color: s.live
-											? "var(--color-primary-readable, var(--color-primary))"
-											: "var(--color-text-muted)",
-									}}
-								>
-									{s.live && (
-										<span className="relative flex h-1.5 w-1.5">
-											<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
-											<span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-primary" />
-										</span>
-									)}
-									<Image
-										src={s.icon}
-										alt=""
-										width={13}
-										height={13}
-										unoptimized
-									/>
-									{s.label}
-								</div>
-							</SurfaceCard>
-						))}
-					</div>
-				</div>
-			</Reveal>
-
 			{/* ── Login + Online users ── */}
 			<div>
 				<span className="eyebrow">{tp("sectionCommunityLabel")}</span>
@@ -635,7 +630,7 @@ export default async function Home() {
 										href={`/news/${a.slug}`}
 										className="group relative w-full overflow-hidden rounded-xl transition-all duration-500 hover:-translate-y-1 hover:shadow-xl"
 										style={{
-											height: "clamp(160px, 20vw, 200px)",
+											height: "clamp(180px, 22vw, 220px)",
 											backgroundColor: "var(--color-background)",
 											border:
 												"1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
@@ -671,7 +666,7 @@ export default async function Home() {
 														"linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, transparent 100%)",
 												}}
 											>
-												<h3 className="truncate text-sm sm:text-base font-bold text-primary-foreground text-shadow-sm">
+												<h3 className="line-clamp-2 text-sm sm:text-base font-bold text-primary-foreground text-shadow-sm">
 													{a.title}
 												</h3>
 												<p

src/messages/en.json

@@ -287,6 +287,7 @@
 			"sectionFeaturesTitle": "Everything a great hotel needs",
 			"sectionStatsLabel": "Live stats",
 			"sectionStatsTitle": "A community that keeps growing",
+			"liveUpdates": "Live updates",
 			"sectionCommunityLabel": "Community",
 			"sectionCommunityTitle": "Make yourself at home",
 			"joinCtaTitle": "Ready to make yourself at home?",

src/messages/it.json

@@ -287,6 +287,7 @@
 			"sectionFeaturesTitle": "Tutto ciò che un grande hotel merita",
 			"sectionStatsLabel": "Statistiche live",
 			"sectionStatsTitle": "Una community che continua a crescere",
+			"liveUpdates": "Aggiornamenti live",
 			"sectionCommunityLabel": "Community",
 			"sectionCommunityTitle": "Fatti sentire a casa",
 			"joinCtaTitle": "Pronto a sentirti a casa?",