From 6eb357650c82030721201a6d09ded44e4f827b16 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Tue, 30 Jun 2026 21:34:25 +0000
Subject: [PATCH] fix(Hero): gradient mask-image to feather sharp PNG alpha
 edges
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PNG has hard alpha cutoff edges — adds left (0%→14%) and top (0%→10%)
linear-gradient masks via mask-composite:intersect so both edges fade
simultaneously into the cream background, matching Figma's seamless look.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/components/Hero.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
index 317c2b0..c94a6b5 100644
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -58,14 +58,20 @@ export function Hero() {
         </div>
       </div>
 
-      {/* Right: hero image as background-image so transparent PNG blends into cream section */}
+      {/* Right: hero image — gradient mask fades left + top edges into the cream background */}
       <div
         className="h-[36.4375rem] shrink-0 w-[55.4375rem]"
         style={{
           backgroundImage: "url('/hero.png')",
-          backgroundSize: "contain",
-          backgroundPosition: "right center",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
           backgroundRepeat: "no-repeat",
+          WebkitMaskImage:
+            "linear-gradient(to right, transparent 0%, black 14%), linear-gradient(to bottom, transparent 0%, black 10%)",
+          WebkitMaskComposite: "destination-in",
+          maskImage:
+            "linear-gradient(to right, transparent 0%, black 14%), linear-gradient(to bottom, transparent 0%, black 10%)",
+          maskComposite: "intersect",
         }}
         aria-hidden="true"
       />