From 932cf60c5c11c467c5c8eaeb216142739fd6f825 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Wed, 29 Jul 2026 10:58:36 +0000
Subject: [PATCH] Fix About Tablet layout, center Hero CTA on Mobile

The sm:/lg: ratio collapse in About.tsx from the breakpoint migration
was wrong: the Tablet-specific wider text share wasn't just compensating
for the grid arriving too early, it's what the inner quote/bio row and
the photo's -ml-48 overlap actually need room for. Restores the
two-tier ratio (wider text, no overlap at sm:; real ratio + overlap
only at lg:), just anchored to sm: instead of the old md:.

Also centers the Hero CTA button below sm: (Mobile) per feedback.
---
 app/components/About.tsx | 45 +++++++++++++++++++++-------------------
 app/components/Hero.tsx  |  6 ++++--
 2 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/app/components/About.tsx b/app/components/About.tsx
index a1f76bd..33e3879 100644
--- a/app/components/About.tsx
+++ b/app/components/About.tsx
@@ -6,17 +6,20 @@ export function About() {
     <section id="ueber-bjoern" className="bg-bg-dark flex flex-col sm:flex-row sm:items-stretch w-full">
 
       {/* Text content — relative + z-10 so it renders above the overlapping
-          photo from sm+. Comes first in DOM at every breakpoint (no
-          reorder here — unlike Hero, there's no conversion CTA at stake).
-          Used to be md:flex-[1.4_0_0] lg:flex-[1_0_0]: a two-step ratio
-          where Tablet got a wider, non-overlap-ready share and only
-          reverted to the real 1:1.4 Desktop ratio at lg: — that in-between
-          step existed purely to compensate for the grid arriving (at the
-          old md: 768px) before the fluid tokens had room to shrink.
-          Now the grid itself starts at sm: (640px), aligned with the
-          fluid floor, so the single real ratio applies from sm: up
-          directly — no intermediate step needed. */}
-      <Reveal className="flex flex-col gap-4 justify-center px-[var(--layout-padding-x)] py-8 sm:flex-[1_0_0] min-w-0 relative z-10">
+          photo at lg+. Comes first in DOM at every breakpoint (no reorder
+          here — unlike Hero, there's no conversion CTA at stake).
+          sm:flex-[1.4_0_0] lg:flex-[1_0_0] — at Tablet the text column
+          gets the wider 1.4:1 share (moved down from the old md:, not
+          collapsed away as a first pass here tried): this isn't just
+          compensation for the grid arriving before the fluid floor had
+          room, it's also what the *inner* quote/divider/bio row (still
+          lg:-only, see below) and the photo's own -ml-48 overlap actually
+          need — collapsing straight to the 1:1.4 Desktop ratio at sm:
+          left the text column too narrow and the photo overlapping too
+          aggressively at real Tablet widths (reported 2026-07-29).
+          Reverts to the real ratio from lg: up, where the overlap trick
+          needs the image to have more room. */}
+      <Reveal className="flex flex-col gap-4 justify-center px-[var(--layout-padding-x)] py-8 sm:flex-[1.4_0_0] lg:flex-[1_0_0] min-w-0 relative z-10">
 
         {/* Large serif statement — width-constrained as per design */}
         <p
@@ -83,14 +86,14 @@ export function About() {
         </div>
       </Reveal>
 
-      {/* Author photo — overlaps the text column via -ml-48 from sm+ now
-          (moved down together with the ratio collapse above — the overlap
-          trick and the 1:1.4 share are the same Desktop-style treatment,
-          previously gated behind the extra lg: step for the same reason
-          the ratio was, so both move together); plain full-width photo
-          below the text on true Mobile only. */}
+      {/* Author photo — plain side-by-side (no overlap) at Tablet, sharing
+          the narrower 1:1.4 flex-basis with the text column above;
+          overlaps the text column via -ml-48 only from lg+, where the
+          text column has reverted to its narrower share and there's real
+          room for the photo to bleed under it. Plain full-width photo
+          below the text on true Mobile. */}
       <Reveal
-        className="relative overflow-hidden w-full sm:flex-[1.4_0_0] sm:-ml-48"
+        className="relative overflow-hidden w-full sm:flex-[1_0_0] lg:flex-[1.4_0_0] lg:-ml-48"
         style={{ minHeight: "14rem" }}
         delay={0.15}
       >
@@ -98,11 +101,11 @@ export function About() {
           alt="Björn"
           src="/about-author.jpg"
           fill
-          sizes="(min-width: 640px) 58vw, 100vw"
+          sizes="(min-width: 1024px) 58vw, (min-width: 640px) 42vw, 100vw"
           className="object-cover object-center pointer-events-none"
         />
-        {/* Left gradient: wide enough to cover the text-column overlap — moved to sm+ with the overlap itself */}
-        <div className="hidden sm:block absolute inset-y-0 left-0 w-72 bg-gradient-to-r from-bg-dark to-transparent pointer-events-none" />
+        {/* Left gradient: wide enough to cover the text-column overlap — lg+ only, matching the overlap itself */}
+        <div className="hidden lg:block absolute inset-y-0 left-0 w-72 bg-gradient-to-r from-bg-dark to-transparent pointer-events-none" />
       </Reveal>
 
     </section>
diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
index 88a6e03..0fee20f 100644
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -95,10 +95,12 @@ export function Hero() {
             Ich helfe dir, zwischen Job, Familie und eigenen Projekten nicht unterzugehen
           </p>
 
-          {/* CTA */}
+          {/* CTA — centered below sm: (reads better against the centered
+              image/banner above it on true Mobile), left-aligned with the
+              rest of the text column again from sm: up. */}
           <Link
             href="/challenge"
-            className="flex gap-4 items-center justify-center overflow-clip px-6 py-3 rounded-sm shrink-0 max-w-full bg-brand hover:brightness-95 active:scale-[0.97] transition-all"
+            className="flex gap-4 items-center justify-center overflow-clip px-6 py-3 rounded-sm shrink-0 max-w-full bg-brand hover:brightness-95 active:scale-[0.97] transition-all self-center sm:self-auto"
           >
             {/* Letting this wrap to two lines below lg: (tried 2026-07-24)
                 put the icon beside a two-line text block, which read as