diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx index b35da16..9016f9f 100644 --- a/app/components/Navbar.tsx +++ b/app/components/Navbar.tsx @@ -60,7 +60,10 @@ function getNavLinks(singleActiveProduct: boolean) { // mark "Werkzeuge" active in the nav for the same reason — confirmed by // page-weekly-impulses's own breadcrumb ("Startseite › Werkzeuge › // Impulse & Tipps") and active-underline position, same as page-todo-karten's. -const WERKZEUGE_ROUTES = ["/todo-cards", "/lebensuhr", "/newsletter"]; +// /der-eine and /tasse-die-pause (both bespoke product detail pages, same +// "own route, not nested" shape as /todo-cards) added here for the same +// reason (2026-08-25). +const WERKZEUGE_ROUTES = ["/todo-cards", "/lebensuhr", "/newsletter", "/der-eine", "/tasse-die-pause"]; function isNavLinkActive(href: string, pathname: string, activeSection: string): boolean { if (href === "#werkzeuge") { diff --git a/app/der-alltagsstift/components/Focus.tsx b/app/der-alltagsstift/components/Focus.tsx deleted file mode 100644 index dad572d..0000000 --- a/app/der-alltagsstift/components/Focus.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import Image from "next/image"; -import { Reveal } from "../../components/Reveal"; -import { getProductBySlug } from "../../lib/payload"; - -// Only visually-verifiable claims (Metallkorpus/Chromringe from the -// product photos) — no engraving/color claim, both still unconfirmed -// (see plan notes: Farbvariante/Gravur-Merkmal open as of 2026-08-24). -const bullets = [ - "Korpus aus Metall, kein Plastik", - "Liegt gut in der Hand", - "Passt in jede Tasche", -]; - -// Same fix/reasoning as Hero.tsx's own IconCheck. -function IconCheck() { - return ( - - - - ); -} - -// Unlike todo-cards/components/Focus.tsx, this product has no dedicated -// lifestyle photo yet — only 3 supplier catalog macro shots exist, all -// 338×338px (no larger source, confirmed against the Payload media API). -// Rather than object-cover-stretching a small square into a wide rectangle -// (blurs badly, and is exactly what Pricing.tsx's photo slot already does — -// see plan notes on the "einheitlich" feedback), this uses a contained, -// padded square tile so the source resolution reads as a deliberate macro -// crop instead of a blown-up thumbnail. Uses gallery[1] (the chrome-rings -// close-up) — deliberately not gallery[0], which shows an assortment -// including a black pen and would imply a color variant that isn't -// confirmed yet (see Focus's bullets comment). -export async function Focus() { - const product = await getProductBySlug("stift-kugelschreiber"); - if (!product) return null; - const photo = product.gallery[1] ?? product.image; - - return ( -
- {/* Fixed max-width, not a viewport-percentage width — same reasoning - as Hero.tsx's gallery cap: the source is only 338×338px, and a - percentage width grows past that on wide screens, exaggerating - the upscale blur. */} - - {product.name} - - -

- Ein Stift, der bleibt -

-

- Die meisten Kugelschreiber landen irgendwann in einer Schublade und werden nicht wieder rausgeholt. Der Alltagsstift soll man behalten. -

- - -
- ); -} diff --git a/app/der-alltagsstift/components/HowItWorks.tsx b/app/der-alltagsstift/components/HowItWorks.tsx deleted file mode 100644 index 18fa315..0000000 --- a/app/der-alltagsstift/components/HowItWorks.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { Fragment } from "react"; -import Image from "next/image"; -import { Reveal, RevealGroup, RevealItem } from "../../components/Reveal"; -import { StepArrow } from "../../components/StepArrow"; - -// Same 3 generic step icons as todo-cards/components/HowItWorks.tsx — their -// artwork (pen tip, checklist, arrow) reads generically enough to carry a -// different 3-step flow without looking mismatched. -const steps = [ - { - icon: "/icon-step-1.png", - width: 165, - height: 177, - title: "1. Griffbereit halten", - desc: "Der Alltagsstift liegt dort, wo du ihn brauchst – Tasche, Schreibtisch, Notizbuch.", - }, - { - icon: "/icon-step-2.png", - width: 180, - height: 168, - title: "2. Sofort notieren", - desc: "Du musst nicht erst dein Handy entsperren oder eine App öffnen.", - }, - { - icon: "/icon-step-3.png", - width: 180, - height: 177, - title: "3. Weitermachen", - desc: "Notiert ist notiert, du machst einfach da weiter, wo du warst.", - }, -]; - -export function HowItWorks() { - return ( -
- -

- So einfach ist er im Alltag -

-

- Du nimmst ihn, schreibst, steckst ihn wieder ein. Mehr braucht es nicht. -

- - - - {steps.map((step, i) => ( - - - -

{step.title}

-

{step.desc}

- - {i < steps.length - 1 && ( -
- -
- )} - - ))} - -
- ); -} diff --git a/app/der-eine/components/Focus.tsx b/app/der-eine/components/Focus.tsx new file mode 100644 index 0000000..6c60049 --- /dev/null +++ b/app/der-eine/components/Focus.tsx @@ -0,0 +1,62 @@ +import Image from "next/image"; +import { Reveal } from "../../components/Reveal"; +import { getProductBySlug } from "../../lib/payload"; + +// Distinct from Hero.tsx's own (shorter) feature bullets — this is the +// "Was kann er?" section's full four-item breakdown (build, engraving, +// size, use case), each with its own one-line explanation rather than a +// bare phrase. +const items = [ + { title: "Metallgehäuse", desc: "Robust, wertig und angenehm in der Hand." }, + { title: "Lasergravur", desc: "„Der Eine.“ auf der einen Seite. „einfach produktiv.“ auf der anderen." }, + { title: "Kompakt", desc: "Passt ans Notizbuch, auf den Schreibtisch oder in die Tasche." }, + { title: "Für jeden Tag", desc: "Für Notizen, Gedanken, Listen und alles, was du lieber aufschreibst, bevor du es wieder vergisst." }, +]; + +// Unlike todo-cards/components/Focus.tsx, this product has no dedicated +// lifestyle photo — only 3 supplier catalog macro shots exist, all +// 338×338px (no larger source, confirmed against the Payload media API). +// Uses gallery[1] (the chrome-rings close-up) — deliberately a different +// frame than Hero's gallery (which opens on `image`, id 85) and Pricing's +// own photo (product.image again, but cropped/treated differently there), +// so the same handful of source photos don't read as one repeated image +// across the page. Contained square tile, not object-cover, for the same +// "don't blow up a 338px source" reasoning as Hero's gallery cap. +export async function Focus() { + const product = await getProductBySlug("stift-kugelschreiber"); + if (!product) return null; + const photo = product.gallery[1] ?? product.image; + + return ( +
+ + {product.name} + + +

+ Was kann er? +

+

+ Schreiben. Und das ziemlich gut. Metallgehäuse, angenehmes Gewicht und eine klassische Kugelschreibermine — kein besonderes Produktivitäts-Gadget, sondern einfach ein guter Stift, den du gern zur Hand nimmst. +

+ + +
+ ); +} diff --git a/app/der-alltagsstift/components/Hero.tsx b/app/der-eine/components/Hero.tsx similarity index 84% rename from app/der-alltagsstift/components/Hero.tsx rename to app/der-eine/components/Hero.tsx index 72a95b5..5908698 100644 --- a/app/der-alltagsstift/components/Hero.tsx +++ b/app/der-eine/components/Hero.tsx @@ -6,11 +6,12 @@ import { getProductBySlug, getShippingSettings, getDefaultTaxRatePercent, getKle import { formatPrice, discountPercent } from "../../lib/format"; import { effectiveTaxRate } from "../../lib/cartTotals"; -const checklist = [ - "Funktioniert ohne Strom oder Internet", - "Aus Metall, kein Einwegstift", - "Passt in jede Tasche", -]; +// The one bullet list on this page — after feedback that three separate +// lists across Hero/Focus/Pricing was too much, this is the single place +// features get enumerated, everywhere else stays prose. A subset of the +// "Was kann er?" section's four cards (Focus.tsx) — "Für jeden Tag" is a +// use case, not a build fact, so it's covered by the body copy instead. +const features = ["Massives Metallgehäuse", "Lasergravur: „Der Eine.“ & „einfach produktiv.“", "Kompakt genug für jede Tasche"]; // Same fix/reasoning as TodoKartenHero.tsx's IconCheck — icon-check.svg's // fill can't be recolored from outside the SVG when loaded via › - Der Alltagsstift + Der Eine

@@ -60,22 +61,22 @@ export async function Hero() { className="font-semibold text-h-page text-text-primary" style={{ fontFamily: "var(--font-playfair)" }} > - Der Alltagsstift. + Der Eine.

- Ein Stift, der einfach da ist, wenn du ihn brauchst. + Für die eine Sache, die gerade zählt.

- Der Kugelschreiber für die eine Sache, die heute zählt. Schlicht, hochwertig und immer griffbereit. + Manchmal reicht ein Stift und ein Stück Papier. 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.