Marco
5f219c23f9
The flex-wrap experiment (2 badges per row + 1 wrapped centered below) looked disorganized with exactly 3 badges — the wrapped single item doesn't align under either item in the row above it, reported as "durcheinander". Reverts to strict single-column stacking below lg: (the inner-shrink-to-fit-group + outer center/left-align pattern), which stays visually clean regardless of how many badges exist.
59 lines
3.2 KiB
TypeScript
59 lines
3.2 KiB
TypeScript
import Image from "next/image";
|
|
import { getTrustBadges } from "../lib/payload";
|
|
|
|
// Content now lives in Payload (TrustBadges collection) instead of being
|
|
// hardcoded here, so copy (e.g. the shipping timeframe/threshold numbers)
|
|
// can be updated without a code deploy. If the fetch fails or nothing is
|
|
// seeded yet, the row just doesn't render rather than showing stale
|
|
// hardcoded fallback text that could drift from the real numbers.
|
|
export async function TrustRow() {
|
|
const items = await getTrustBadges();
|
|
if (items.length === 0) return null;
|
|
|
|
return (
|
|
// Structural breakpoint is lg:, not sm: — a deliberate exception to
|
|
// the site's sm: (640px) structural consolidation, same category as
|
|
// Footer's legal-links row (see that component's own comment):
|
|
// multiple whitespace-nowrap title+description badges side by side
|
|
// don't fit in one row below ~1024px regardless of fluid scaling.
|
|
// Confirmed via a real horizontal-overflow measurement against the
|
|
// live site (2026-07-29): scrollWidth exceeded the viewport by
|
|
// ~100px at 666px and ~54px at 768px before this fix.
|
|
//
|
|
// Outer wrapper only positions the *whole badge group* (center below
|
|
// sm:, left-aligned sm:-lg:, centered row again at lg:) — it does NOT
|
|
// align each badge individually. A first attempt put items-center
|
|
// directly on this container with each badge as a sibling; since
|
|
// flex's align-items centers each item within the container's own
|
|
// width independently, badges with different title/description
|
|
// lengths ended up with different left edges (not lining up with
|
|
// each other — reported 2026-07-29, exactly the "sonst sieht es
|
|
// schief aus" risk). Fixed by wrapping all badges in one inner
|
|
// group (below) that's always internally left-aligned to itself,
|
|
// then centering/left-aligning that single group as a unit here.
|
|
<div className="w-full bg-bg-base flex justify-center sm:justify-start lg:justify-center py-8 px-[var(--layout-padding-x)]">
|
|
{/* Inner group — shrink-to-fit width (not w-full), so it's exactly
|
|
as wide as its widest badge; items-start keeps every badge's
|
|
left edge flush with every other badge's, regardless of each
|
|
one's own content width. This single group is what the outer
|
|
wrapper above centers/left-aligns as one block. */}
|
|
<div className="flex flex-col lg:flex-row gap-6 lg:gap-12 items-start lg:items-center">
|
|
{items.map((item, i) => (
|
|
<div key={item.id} className="flex items-center gap-6 lg:gap-12">
|
|
{i > 0 && <div className="hidden lg:block h-10 w-px bg-border" />}
|
|
<div className="flex gap-4 items-center">
|
|
<div className="relative size-8 shrink-0">
|
|
<Image alt="" src={item.icon} fill sizes="32px" className="object-contain" />
|
|
</div>
|
|
<div className="flex flex-col gap-0.5 items-start">
|
|
<p className="font-semibold text-body text-text-primary whitespace-nowrap">{item.title}</p>
|
|
<p className="text-body-sm text-text-muted whitespace-nowrap">{item.description}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|