Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Left-align Hero's social proof row below lg:

Browse Source 
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:.
This commit is contained in:
Marco
2026-07-29 11:05:59 +00:00
parent c3a6c84d8a
commit 5e1d88d13e
1 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Hero.tsx
+9 -3
View File
@@ -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>