- PasstDazu.tsx now takes a productSlug prop and reads its cross-sell
target from the product's own relatedProduct field (Payload) instead
of hardcoding "todo-karten" — reusable on any product page now.
- payload.ts: Product/PayloadProduct gained relatedProduct, resolved via
a bounded-recursion mapPayloadProduct call (safe — the fetch's depth:2
means the nested relation's own relatedProduct is never populated).
- Focus.tsx icons: added the black stroked circle back around each glyph
(matches icon-step-3.png exactly) — dropped in the previous pass by
mistake while fixing the color/fill.
Bold uniform-weight black outline, no fill, no circle badge — same
language as tool-icon-todo-karten.png / icon-step-2.png / icon-step-3.png,
not the brand-orange circle-badge treatment tried previously.
- Removed the brand-story "Warum Der Eine.?" section entirely — for a
6,90€ accessory item its one unique fact (the two-sided engraving) was
already covered by Hero/Focus, the rest was pure narrative that didn't
aid the buying decision.
- Focus.tsx ("Was kann er?") widened to max-w-[75rem] (the site's
standard content width, same as Tools.tsx/HowItWorks.tsx) instead of
the narrower inset borrowed from HowItWorks' 3-item version.
- Icons switched from plain black line icons to a circle-badge + brand
orange (#f6a701) stroke treatment — matching the icon language already
used elsewhere on this page (IconCheck) and site (HowItWorks' own
stroked-circle step icon), the flat black icons read as a mismatched
style.
Same card shape as todo-cards/components/HowItWorks.tsx (icon on top,
centered, RevealGroup/RevealItem, identical typography) instead of the
inline-checkmark bullets tried first. Icons drawn from the der-eine.png
mockup's own icon row (pencil/sparkle/shield/pen line icons — no matching
/public asset existed for these concepts).
The full mockup-driven redesign (Banner/Lifestyle sections, restyled
Focus/Why/Pricing) was more than asked for — reverted back to the
pre-redesign version (Hero/Focus/Why exactly match commit 13fb37e), with
only the two changes actually requested applied on top:
- Focus.tsx ("Was kann er?"): dropped the product photo, plain text
section now — a second product shot here was redundant with Hero's own.
- Pricing.tsx (bottom price/buy bar) replaced by PasstDazu.tsx, a
"Passt dazu" cross-sell card linking to ToDo-Karten — same markup as
blog/[slug]/page.tsx's own related-product card, hardcoded to
"todo-karten" the same way Hero.tsx hardcodes "stift-kugelschreiber".
Kept the Payload product.image/gallery repointed at the mockup-derived
photos (ids 88/89) rather than reverting those too — the previous gallery
was mismatched stock photos of a different-colored pen, an independent
correction from the layout redesign.
Sections rebuilt to match der-eine.png (hero, tagline banner, brand-story
+ feature icons, lifestyle photo, final CTA bar with trust badges), but
each piece is built from patterns that already exist elsewhere on the
site rather than one-off layouts:
- Focus.tsx (feature icons) mirrors todo-cards/HowItWorks.tsx's exact
icon-top/title/desc card shape and typography
- Why.tsx (brand story) mirrors todo-cards/Focus.tsx's photo+text layout
- Pricing.tsx's trust-badge row reuses getCartTrustBadges() (real,
already-vetted copy) with /cart's own markup, not invented text
- Banner.tsx reuses --font-caveat and /icon-separator-right.svg (both
already used in Divider.tsx) instead of introducing new assets
Photos: product.image/gallery repointed (via direct DB write, see
reference_payload_direct_db_access) to two new Payload media docs
cropped directly from the mockup — the previous gallery was mismatched
supplier stock photos of a different-colored pen. Lifestyle.tsx's
desk photo is a static /public asset (page decoration showing the pen
next to another product, not a photo of the pen alone, so it doesn't
belong in Products.gallery).
New copy throughout (hero, "Was kann er?", the "Warum Der Eine.?" brand-story
section replacing the old phone-vs-pen scenario grid, final CTA) plus the
Payload product's name/detailHref updated to match (done directly via psql,
no Payload admin API key available — see reference_payload_direct_db_access).
Marco