From d2572757cdc23bdadc0054cc8eeb2d62924f73ff Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Sat, 12 Sep 2026 18:16:29 +0200
Subject: [PATCH] perf(site): feature card tilt & news card zoom
 micro-interactions

- Feature cards: group hover zoom & rotate on icon badge, smoother
  card lift on hover (-translate-y-1.5).
- Stats cards: primary accent on numbers, pill badge for labels.
- News cards: smoother 500ms transition with scale-108 image zoom.
---
 src/app/(site)/page.tsx | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/app/(site)/page.tsx b/src/app/(site)/page.tsx
index d93d8f90..0e3540b8 100644
--- a/src/app/(site)/page.tsx
+++ b/src/app/(site)/page.tsx
@@ -409,10 +409,10 @@ export default async function Home() {
 						{features.map((f) => (
 							<SurfaceCard
 								key={f.title}
-								className="card-glow relative p-4 sm:p-5 text-center hover:-translate-y-1"
+								className="group card-glow 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"
+									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)",
@@ -487,9 +487,16 @@ export default async function Home() {
 						].map((s) => (
 							<SurfaceCard
 								key={s.label}
-								className="card-glow relative p-3 sm:p-5 text-center hover:-translate-y-1"
+								className="card-glow 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-0.5 text-2xl sm:text-3xl font-black tracking-tight md:text-4xl">
+								<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 ? (
@@ -499,14 +506,18 @@ export default async function Home() {
 									)}
 								</div>
 								<div
-									className="text-[10px] sm:text-xs font-bold uppercase tracking-widest flex items-center justify-center gap-1 sm:gap-1.5"
-									style={{ color: "var(--color-text-muted)" }}
+									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: "var(--color-text-muted)",
+									}}
 								>
 									<Image
 										src={s.icon}
 										alt=""
-										width={14}
-										height={14}
+										width={13}
+										height={13}
 										unoptimized
 									/>
 									{s.label}
@@ -596,12 +607,12 @@ export default async function Home() {
 									<Link
 										key={a.slug}
 										href={`/news/${a.slug}`}
-										className="group relative w-full overflow-hidden rounded-xl transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
+										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)",
 											backgroundColor: "var(--color-background)",
 											border:
-												"1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+												"1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
 										}}
 									>
 										<div className="relative h-full w-full overflow-hidden rounded-xl">
@@ -610,7 +621,7 @@ export default async function Home() {
 												alt={a.title}
 												fill
 												sizes="(max-width: 640px) 100vw, 400px"
-												className="rounded-xl object-cover transition-all duration-300 group-hover:scale-105"
+												className="rounded-xl object-cover transition-transform duration-700 ease-out group-hover:scale-108"
 											/>
 											<div className="absolute right-2.5 top-2.5 flex h-8 w-8 translate-x-1 items-center justify-center rounded-full bg-foreground/50 opacity-0 backdrop-blur-sm transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
 												<span className="text-sm font-bold text-primary-foreground">