The 58%-wide/no-muted-bg rewrite left a large visible gap between
the photo and the quote on wide viewports, and its very wide 4.9:1
photo crop needed heavy object-cover zooming to fill a narrower
column. Reverted to the exact structure already shipped and working
on /not-found (w-[45%] column, 40px edge gradient into bg-muted) —
the only real change kept is a fixed h- instead of min-h-, which is
what actually fixed the original height-mismatch complaint.
Also re-cropped the photo twice: first to match 404-testimonial-
photo.jpg's 2.65:1 aspect ratio (avoids the aggressive cropping/zoom
a too-wide source needs to fill a taller column), then pushed the
top edge down further after finding the crop still included a few
residual pixels of a cream/shadow boundary line from the source
mockup — invisible in a downscaled preview but a visible seam once
the browser scales the 126px-tall source up 2-3x via object-cover.
Also overflows the image 4px past its container (-inset-1 instead of
inset-0) as a defensive measure against sub-pixel gaps in general.
Testimonial band: rebuilt as a proper flexbox two-column layout
(photo column with an explicit width, quote in a flex-1 sibling)
instead of an absolutely-positioned text block offset with
percentage margin/padding — that measured against the row's full
width and, combined with a max-w- on the text box, left almost no
room for the actual text on wide viewports (wrapped to one word per
line). Also dropped the muted-bg box behind the quote and widened
the photo fade to match the actual mockup, which has no separate
colored panel there at all.
Hero: removed the separate big checkmark badge — the 4-step bar
right above it already renders every step as a checkmark, so it was
just repeating that. Added more top spacing to compensate. Dropped
"Deine Bestellung macht sich jetzt auf den Weg zu dir." and added
"inkl. MwSt." under Gesamtbetrag for consistency with /cart and
/checkout.
Wired the new Products.spotlightEyebrow field (CMS-editable "Neu im
Shop" label) through lib/payload.ts into ProductSpotlight.tsx.
Matches the Figma mockup (checkmark hero, order summary card,
delivery-status panel, testimonial band) with the checkout's 4-step
bar inserted (all steps done) and the "Bis dahin: Lass dich
inspirieren" block omitted, per request.
Extracted the step bar into a shared CheckoutSteps component so
/checkout and /bestellbestaetigung don't duplicate it. The actually-
selected shipping cost and payment method are captured into a
sessionStorage snapshot by /checkout's "Jetzt kaufen" click (there's
no real order backend, so this click is what "placing the order"
means here) and read back on the confirmation page — not just
defaulted to the first active method of each, so the receipt matches
what the shopper actually picked. Also tightened the checkout
newsletter-consent copy ("Wenn du zustimmst" instead of "Wenn du
oben zustimmst").
Marco
