From 76b9fe35cc1d4b08d8119c3348fc232275359a90 Mon Sep 17 00:00:00 2001
From: Maaxxs <61059039+MaaxxsDev@users.noreply.github.com>
Date: Mon, 6 Jul 2026 22:46:35 +0200
Subject: [PATCH] Fix hero image gap: scale via Framer Motion instead of a
 Tailwind class

The scale-110 utility set the same CSS transform property that Framer
Motion's y-parallax already controlled inline, silently canceling the
scale. The image never actually zoomed in, so the parallax shift had no
overflow buffer and exposed a bare strip at the bottom of the hero.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 hifi-src/src/pages/public/Home.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/hifi-src/src/pages/public/Home.jsx b/hifi-src/src/pages/public/Home.jsx
index b4eed3a..0aa92de 100644
--- a/hifi-src/src/pages/public/Home.jsx
+++ b/hifi-src/src/pages/public/Home.jsx
@@ -97,10 +97,10 @@ export default function Home() {
 
       <section ref={heroRef} className="relative -mt-[89px] h-dvh min-h-[560px] overflow-hidden sm:-mt-[97px]">
         <motion.img
-          style={{ y: heroImageY }}
+          style={{ y: heroImageY, scale: 1.15 }}
           src={heroImage}
           alt={t('home.heroImageAlt')}
-          className="absolute inset-0 h-full w-full scale-110 object-cover"
+          className="absolute inset-0 h-full w-full object-cover"
         />
         <div className="absolute inset-0 bg-gradient-to-t from-neutral-950 via-neutral-950/80 to-neutral-950/40" />