remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions 1 Packages Projects Releases Wiki Activity

perf(site): feature card tilt & news card zoom micro-interactions
CI / check (push) Successful in 2m26s
Details
CI / deploy (push) Successful in 1m2s
Details
CI / publish-container (push) Successful in 50s
Details

Browse Source 
- 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.
This commit is contained in:
openhands committed 2026-09-12 18:16:29 +02:00
1 parent 31a89c505d
commit d2572757cd
1 file changed
+22 -11
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(site)/page.tsx
+22 -11
View File
@@ -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">