From 45644f78df0a66698d2af137cd7c94891ca26ff2 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Tue, 30 Jun 2026 20:50:17 +0000
Subject: [PATCH] =?UTF-8?q?fix(Hero):=20exact=20Figma=20structure=20?=
 =?UTF-8?q?=E2=80=94=20w-[min-content]=20heading,=202px=20avatar=20gap,=20?=
 =?UTF-8?q?correct=20spans?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
index b43c0e1..d767a80 100644
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -1,67 +1,69 @@
 import Link from "next/link";
 import Image from "next/image";
 
-const avatars = [
-  { src: "/avatar-1.jpg", alt: "Nutzer 1" },
-  { src: "/avatar-2.jpg", alt: "Nutzer 2" },
-  { src: "/avatar-3.jpg", alt: "Nutzer 3" },
-];
-
 export function Hero() {
   return (
-    <section className="bg-[#f5f0e8] flex items-center justify-between overflow-hidden">
+    <section className="bg-[#f5f0e8] flex items-center justify-between relative w-full overflow-hidden">
 
       {/* Left: text content */}
-      <div className="flex flex-col gap-[1.75rem] pl-[5rem] pr-[2.5rem] flex-[1_0_0] min-w-0 overflow-clip">
+      <div className="flex flex-[1_0_0] flex-col gap-[1.75rem] items-start min-w-px overflow-clip pl-[5rem] pr-[2.5rem] relative">
 
-        <h1
-          className="text-[4rem] font-semibold leading-[4.5rem] text-black"
+        {/* Heading — w-[min-content] forces wrap at widest word ("Produktivität") */}
+        <p
+          className="font-semibold leading-[0] min-w-full shrink-0 text-[0px] text-black w-[min-content] [word-break:break-word]"
           style={{ fontFamily: "var(--font-playfair)" }}
         >
-          Produktivität darf sich leicht anfühlen
-          <span className="text-[#fdb705]">.</span>
-        </h1>
+          <span className="leading-[4.5rem] text-[4rem]">Produktivität darf sich leicht anfühlen</span>
+          <span className="leading-[4.5rem] text-[4rem] text-[#fdb705]">.</span>
+        </p>
 
-        <p className="text-[1.5rem] font-semibold text-[#222221] leading-[2.375rem]">
+        {/* Subheading */}
+        <p className="font-semibold leading-[2.375rem] min-w-full shrink-0 text-[#222221] text-[1.5rem] w-[min-content] [word-break:break-word] not-italic">
           Für Menschen mit Familie, Verantwortung und zu wenig Zeit
         </p>
 
-        <div>
-          <Link
-            href="/challenge"
-            className="inline-flex items-center gap-[1rem] px-[1.5rem] py-[0.75rem] rounded-[0.5rem] bg-[#f6a701] text-[1.375rem] font-semibold text-[#222221] hover:brightness-95 transition-all"
-          >
+        {/* CTA */}
+        <Link
+          href="/challenge"
+          className="flex gap-[1rem] items-center justify-center overflow-clip px-[1.5rem] py-[0.75rem] rounded-[0.5rem] shrink-0 bg-[#f6a701] hover:brightness-95 transition-all"
+        >
+          <span className="font-semibold leading-[2.375rem] text-[#222221] text-[1.375rem] whitespace-nowrap not-italic">
             Starte mit der 7-Tage-Challenge
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src="/icon-check.svg" alt="" width={25} height={19} className="shrink-0" />
-          </Link>
-        </div>
+          </span>
+          <div className="relative h-[1.1875rem] w-[1.5625rem] shrink-0">
+            <img
+              alt=""
+              src="/icon-check.svg"
+              className="absolute inset-0 w-full h-full"
+            />
+          </div>
+        </Link>
 
-        <div className="flex items-center gap-[0.75rem]">
-          <div className="flex items-center">
-            {avatars.map((avatar, i) => (
+        {/* Social proof */}
+        <div className="flex gap-[0.75rem] items-start overflow-clip shrink-0 w-full">
+          {/* Avatars — gap 2px, not overlapping */}
+          <div className="flex gap-[0.125rem] items-center shrink-0">
+            {["/avatar-1.jpg", "/avatar-2.jpg", "/avatar-3.jpg"].map((src, i) => (
               <div
-                key={avatar.src}
-                className="relative w-[2.8125rem] h-[2.8125rem] rounded-full overflow-hidden border-2 border-[#f5f0e8] shrink-0"
-                style={{ marginLeft: i === 0 ? 0 : "-0.625rem" }}
+                key={i}
+                className="relative w-[2.8125rem] h-[2.8125rem] rounded-full overflow-hidden shrink-0"
               >
-                <Image src={avatar.src} alt={avatar.alt} fill className="object-cover" />
+                <Image src={src} alt="" fill className="object-cover" />
               </div>
             ))}
           </div>
-          <p className="text-[1rem] text-[#222221] leading-[1.5rem]">
-            <span className="font-semibold">10.000+</span> Menschen vertrauen einfach-produktiv
+          <p className="flex-[1_0_0] font-normal leading-[1.5rem] text-[#222221] text-[1rem] [word-break:break-word]">
+            10.000+ Menschen vertrauen einfach-produktiv
           </p>
         </div>
       </div>
 
-      {/* Right: hero image — fixed Figma dimensions, drives section height */}
-      <div className="relative shrink-0 w-[55.4375rem] h-[36.4375rem]">
-        {/* eslint-disable-next-line @next/next/no-img-element */}
+      {/* Right: hero image — fixed Figma dimensions drive section height */}
+      <div className="h-[36.4375rem] relative shrink-0 w-[55.4375rem]">
         <img
-          src="/hero.jpg"
           alt="Notizbuch mit Tagesplan und Kaffee"
-          className="absolute inset-0 w-full h-full object-cover object-center"
+          src="/hero.jpg"
+          className="absolute inset-0 max-w-none object-cover w-full h-full"
         />
       </div>