From dfb6eb5e232ceba75e51485e80b3e592b3bedfcb Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Wed, 29 Jul 2026 11:08:40 +0000
Subject: [PATCH] Re-center Hero social proof below 640px, keep it left-aligned
 at Tablet
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Centering it site-wide below lg: overcorrected — true Mobile (<640px)
should stay centered (matches the CTA there), only the 640-1023px
Tablet band needed the left-align fix from the previous commit.
---
 app/components/Hero.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
index c5662e9..f542fe2 100644
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -123,13 +123,13 @@ export function Hero() {
           {/* Social proof — always avatars-then-text on two lines below
               lg: (not just when it happens to overflow), single row again
               from lg: up where the real column width fits it fine.
-              Left-aligned below lg: (items-start/justify-start/text-left)
-              to match the heading/subheading/CTA above it — centered read
-              as floating/disconnected from the rest of the left-aligned
-              column (reported 2026-07-29). CTA itself stays separately
-              centered on true Mobile only (self-center, see above) — this
-              row was never part of that request. */}
-          <div className="flex flex-col lg:flex-row gap-3 items-start lg:items-center justify-start lg:justify-center overflow-clip shrink-0 w-full">
+              Centered on true Mobile (<640px, matches the CTA above it,
+              see self-center there); left-aligned in the 640-1023px
+              Tablet band instead, matching the left-aligned heading/
+              subheading — plain centered there read as floating/
+              disconnected from that column (reported 2026-07-29); back to
+              a centered row at lg:. */}
+          <div className="flex flex-col lg:flex-row gap-3 items-center sm:items-start lg:items-center justify-center sm:justify-start lg:justify-center 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) => (
@@ -142,7 +142,7 @@ export function Hero() {
                 </div>
               ))}
             </div>
-            <p className="flex-[1_0_0] font-normal leading-[1.5rem] text-text-primary text-body text-left [word-break:break-word]">
+            <p className="flex-[1_0_0] font-normal leading-[1.5rem] text-text-primary text-body text-center sm:text-left [word-break:break-word]">
               1.120+ Menschen vertrauen <span className="whitespace-nowrap">einfach-produktiv</span>
             </p>
           </div>