Marco
3da8b75395
- Hero CTA: back to a single line below lg: (wrapping put the icon beside two lines and looked broken), sized down instead so the full phrase fits. - Hero heading: dropped the forced <br> after "darf" at true mobile widths, kept it only for the sm-lg tablet range it was added for. - Hero social proof: avatars+text now wrap and center instead of cramming onto one row (flex-wrap + justify-center, no fixed breakpoint needed). - Newsletter card icon: stacked above the copy and centered below md: instead of squeezed into a row beside it. - TrustRow: left-aligned below md: instead of centered (shop, cart, and every other page using this component). - Cart line item image: full width below sm: instead of a fixed 150px square. - Challenge EmailCapture (top + bottom CTA, same shared component): input and button stack full-width below sm: instead of squeezing into one row. - Challenge steps: icon above text and centered at every breakpoint (previously only from lg: up), connector arrows centered to match.
32 lines
1.4 KiB
TypeScript
32 lines
1.4 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 (
|
|
<div className="w-full bg-bg-base flex flex-col md:flex-row gap-6 md:gap-12 items-start md:items-center justify-center py-8 px-[var(--layout-padding-x)]">
|
|
{items.map((item, i) => (
|
|
<div key={item.id} className="flex items-center gap-6 md:gap-12">
|
|
{i > 0 && <div className="hidden md: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>
|
|
);
|
|
}
|