Redesign Der Eine. PDP from mockup, reusing existing site patterns

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).
This commit is contained in:
Marco
2026-08-25 13:10:00 +00:00
parent 4fa80d6bfb
commit 71cd75425d
8 changed files with 187 additions and 127 deletions
+7 -3
View File
@@ -1,15 +1,17 @@
import type { Metadata } from "next";
import { Hero } from "./components/Hero";
import { Banner } from "./components/Banner";
import { Why } from "./components/Why";
import { Focus } from "./components/Focus";
import { Lifestyle } from "./components/Lifestyle";
import { Pricing } from "./components/Pricing";
import { Footer } from "../components/Footer";
import { getProductBySlug, getCompanySettings } from "../lib/payload";
import { buildProductSchema } from "../lib/structuredData";
const title = "Der Eine. Für die eine Sache, die gerade zählt.";
const title = "Der Eine. Der Kugelschreiber zu unseren ToDo-Karten.";
const description =
"Der Eine. ist ein schlichter Kugelschreiber aus Metall. Angenehm in der Hand, klein genug für die Tasche und gemacht für alles, was kurz raus aus dem Kopf und irgendwo hin muss.";
"Der Eine. ist ein Kugelschreiber aus Metall, mit schwarzer Mine und „Der Eine.“ auf der Seite — der Stift zu unseren ToDo-Karten.";
export const metadata: Metadata = {
title,
@@ -44,8 +46,10 @@ export default async function DerEinePage() {
)}
<main className="flex flex-col flex-1">
<Hero />
<Focus />
<Banner />
<Why />
<Focus />
<Lifestyle />
<Pricing />
</main>
<Footer />