From 5e1d88d13e80e5c21c5739a877c5923e7604c1b1 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Wed, 29 Jul 2026 11:05:59 +0000
Subject: [PATCH] Left-align Hero's social proof row below lg:

Centered avatars+text below lg: read as floating/disconnected from the
left-aligned heading/subheading/CTA above it. Left-aligned now to match
the rest of the column; still switches to a single centered row at lg:.
---
 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 0fee20f..c5662e9 100644
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -122,8 +122,14 @@ 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. */}
-          <div className="flex flex-col lg:flex-row gap-3 items-center justify-center overflow-clip shrink-0 w-full">
+              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">
             {/* 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) => (
@@ -136,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-center [word-break:break-word]">
+            <p className="flex-[1_0_0] font-normal leading-[1.5rem] text-text-primary text-body text-left [word-break:break-word]">
               1.120+ Menschen vertrauen <span className="whitespace-nowrap">einfach-produktiv</span>
             </p>
           </div>