Rename Der Alltagsstift back to Der Eine., move route to /der-eine

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).
2026-08-25 12:36:03 +00:00
parent 988f259371
commit 13fb37eb5e
8 changed files with 128 additions and 194 deletions
@@ -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 (
+    <section className="w-full bg-bg-base flex flex-col lg:flex-row gap-10 lg:gap-16 items-center py-12 md:py-16 px-[var(--layout-padding-x)]">
+      <Reveal className="group relative w-full max-w-[20rem] lg:shrink-0 aspect-square rounded-md overflow-hidden bg-bg-muted p-10">
+        <Image
+          src={photo}
+          alt={product.name}
+          fill
+          sizes="320px"
+          className="object-contain transition-transform duration-500 group-hover:scale-105"
+        />
+      </Reveal>
+      <Reveal className="flex flex-col gap-6 items-start flex-1 min-w-0 w-full" delay={0.1}>
+        <p
+          className="font-semibold text-h-emphasis text-text-primary"
+          style={{ fontFamily: "var(--font-lora)" }}
+        >
+          Was kann er?
+        </p>
+        <p className="text-body text-text-body">
+          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.
+        </p>
+        <ul className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full">
+          {items.map((item) => (
+            <li key={item.title} className="flex flex-col gap-1 items-start">
+              <span className="font-semibold text-body text-text-primary">{item.title}</span>
+              <span className="text-body-sm text-text-muted">{item.desc}</span>
+            </li>
+          ))}
+        </ul>
+      </Reveal>
+    </section>
+  );
+}
@@ -0,0 +1,141 @@
+import Link from "next/link";
+import { AddToCartButton } from "../../components/AddToCartButton";
+import { ProductGallery } from "../../components/ProductGallery";
+import { Reveal } from "../../components/Reveal";
+import { getProductBySlug, getShippingSettings, getDefaultTaxRatePercent, getKleinunternehmer } from "../../lib/payload";
+import { formatPrice, discountPercent } from "../../lib/format";
+import { effectiveTaxRate } from "../../lib/cartTotals";
+
+// 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 <img
+// src>/next/image, so this stays an inline stroke path per page.
+function IconCheck() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="size-5 shrink-0 mt-1">
+      <path d="M4 10.5l4.5 4.5L16 5.5" stroke="#f6a701" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+// Same "compact early teaser + delivery-time repeated next to every buy
+// button" reasoning as TodoKartenHero.tsx.
+export async function Hero() {
+  const [product, shipping, defaultTaxRate, kleinunternehmer] = await Promise.all([
+    getProductBySlug("stift-kugelschreiber"),
+    getShippingSettings(),
+    getDefaultTaxRatePercent(),
+    getKleinunternehmer(),
+  ]);
+  const discount = product ? discountPercent(product.price, product.compareAtPrice) : null;
+  const taxRate = product ? effectiveTaxRate(product, defaultTaxRate) : null;
+  const anyLowStock = product
+    ? product.active && (product.variants.length > 0 ? product.variants.some((v) => v.lowStock) : product.lowStock)
+    : false;
+
+  return (
+    <section className="bg-bg-base w-full overflow-hidden">
+      <div className="flex flex-col lg:grid lg:grid-cols-12 gap-8 lg:gap-[var(--layout-grid-gap)] pt-10 md:pt-12">
+        <Reveal className="order-1 lg:order-none lg:col-span-5 flex flex-col gap-6 items-start pl-[var(--layout-padding-x)] pr-10 lg:pr-0">
+          <p className="flex items-center gap-2 text-body-sm text-text-muted">
+            <Link href="/" className="hover:text-brand transition-colors">
+              Startseite
+            </Link>
+            <span>›</span>
+            <Link href="/#werkzeuge" className="hover:text-brand transition-colors">
+              Werkzeuge
+            </Link>
+            <span>›</span>
+            <span className="text-text-primary">Der Eine</span>
+          </p>
+
+          <div className="flex flex-col gap-6 items-start w-full flex-1 lg:justify-center">
+            <div className="flex flex-col gap-2 items-start w-full">
+              <p
+                className="font-semibold text-h-page text-text-primary"
+                style={{ fontFamily: "var(--font-playfair)" }}
+              >
+                Der Eine<span className="text-brand">.</span>
+              </p>
+              <p
+                className="font-semibold text-h3 text-text-primary"
+                style={{ fontFamily: "var(--font-lora)" }}
+              >
+                Für die eine Sache, die gerade zählt.
+              </p>
+            </div>
+
+            <p className="text-body text-text-body">
+              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.
+            </p>
+
+            <ul className="flex flex-col gap-3 items-start w-full">
+              {features.map((item) => (
+                <li key={item} className="flex gap-[0.625rem] items-start w-full">
+                  <IconCheck />
+                  <span className="flex-1 text-body text-text-primary">{item}</span>
+                </li>
+              ))}
+            </ul>
+
+            <div className="flex flex-col gap-1 items-start">
+              {product && (
+                <div className="flex gap-2 items-baseline">
+                  {discount !== null && (
+                    <p className="text-body text-text-muted line-through">{formatPrice(product.compareAtPrice!)}</p>
+                  )}
+                  <p className="font-bold text-h3 text-text-primary">{formatPrice(product.price)}</p>
+                  <p className="text-label text-text-muted">
+                    {kleinunternehmer
+                      ? product.noShippingCost
+                        ? "Keine Versandkosten"
+                        : "zzgl. Versand"
+                      : `inkl. ${taxRate}% MwSt. ${product.noShippingCost ? "– keine Versandkosten" : "zzgl. Versand"}`}
+                  </p>
+                </div>
+              )}
+              {!product?.noShippingCost && (
+                <p className="text-label text-text-muted">
+                  Lieferzeit: {shipping.totalDays.min}–{shipping.totalDays.max} Werktage innerhalb Deutschlands
+                </p>
+              )}
+              {anyLowStock && <p className="text-label font-bold text-warning">Nur noch wenige verfügbar</p>}
+            </div>
+
+            {product && (
+              <AddToCartButton
+                label="Der Eine. bestellen"
+                productId={product.id}
+                numericId={product.numericId}
+                outOfStock={!product.active || product.outOfStock}
+                maxQty={product.maxQty}
+                variants={product.active ? product.variants : []}
+              />
+            )}
+          </div>
+        </Reveal>
+
+        {/* max-w cap, not the full lg:col-span-7 width — the source photos
+            are only 338×338px (checked directly against the Payload media
+            API, no larger size exists), so letting ProductGallery stretch
+            to the full column blows them up hard. Capping the display
+            width keeps the upscale factor small enough that it doesn't
+            look broken; it can't fix the underlying resolution, only hide
+            it. Real fix is new source photos, not a layout tweak. */}
+        {product && product.gallery.length > 0 && (
+          <Reveal className="order-2 lg:order-none lg:col-span-7 flex lg:items-center" delay={0.15}>
+            <div className="w-full max-w-[28rem] mx-auto lg:mx-0">
+              <ProductGallery image={product.image} gallery={product.gallery} alt={product.name} />
+            </div>
+          </Reveal>
+        )}
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,96 @@
+import Image from "next/image";
+import { AddToCartButton } from "../../components/AddToCartButton";
+import { Reveal } from "../../components/Reveal";
+import { getProductBySlug, getShippingSettings, getDefaultTaxRatePercent, getKleinunternehmer } from "../../lib/payload";
+import { formatPrice, discountPercent } from "../../lib/format";
+import { effectiveTaxRate } from "../../lib/cartTotals";
+
+// Price/photo come from Payload (same "stift-kugelschreiber" product the
+// shop/cart use), not a hardcoded literal — same reasoning as
+// todo-cards/components/Pricing.tsx. Uses product.image (id 85, the
+// confident macro tip shot) — a third, distinct frame from Hero's gallery
+// opener and Focus's gallery[1] chrome-rings shot.
+export async function Pricing() {
+  const [product, shipping, defaultTaxRate, kleinunternehmer] = await Promise.all([
+    getProductBySlug("stift-kugelschreiber"),
+    getShippingSettings(),
+    getDefaultTaxRatePercent(),
+    getKleinunternehmer(),
+  ]);
+  if (!product) return null;
+  const discount = discountPercent(product.price, product.compareAtPrice);
+  const taxRate = effectiveTaxRate(product, defaultTaxRate);
+  const fullyOutOfStock =
+    !product.active || (product.variants.length > 0 ? product.variants.every((v) => v.outOfStock) : product.outOfStock);
+  const anyLowStock = product.active && (product.variants.length > 0 ? product.variants.some((v) => v.lowStock) : product.lowStock);
+
+  return (
+    <section className="w-full bg-bg-base px-[var(--layout-padding-x)] py-8">
+      <Reveal className="bg-bg-muted rounded-md flex flex-col lg:flex-row gap-8 lg:gap-12 items-center p-6 lg:pl-8 lg:pr-10 lg:py-6">
+        <div className="group relative w-full lg:w-[15.625rem] lg:shrink-0 aspect-square rounded-sm overflow-hidden bg-bg-base">
+          <Image
+            src={product.image}
+            alt="Der Eine."
+            fill
+            sizes="(min-width: 1024px) 250px, 100vw"
+            className="object-contain p-4 transition-transform duration-500 group-hover:scale-105"
+          />
+          {fullyOutOfStock ? (
+            <span className="absolute top-3 left-3 rounded-full bg-text-muted px-2.5 py-1 text-label font-bold text-bg-base">
+              Ausverkauft
+            </span>
+          ) : (
+            discount !== null && (
+              <span className="absolute top-3 left-3 rounded-full bg-brand px-2.5 py-1 text-label font-bold text-text-primary">
+                -{discount}%
+              </span>
+            )
+          )}
+        </div>
+
+        <div className="flex flex-col gap-3 items-start flex-1 min-w-0 w-full">
+          <p
+            className="font-semibold text-h-small text-text-primary"
+            style={{ fontFamily: "var(--font-lora)" }}
+          >
+            Der Eine.
+          </p>
+          <p className="text-body-sm text-text-primary">Metall. Kugelschreiber. Fertig.</p>
+        </div>
+
+        <div className="flex flex-col gap-3 items-start w-full lg:w-[18.75rem] lg:shrink-0">
+          <div className="flex flex-col gap-1 items-start">
+            <div className="flex gap-2 items-baseline">
+              {discount !== null && (
+                <p className="text-body text-text-muted line-through">{formatPrice(product.compareAtPrice!)}</p>
+              )}
+              <p className="font-bold text-h3 text-text-primary">{formatPrice(product.price)}</p>
+            </div>
+            <p className="text-label text-text-muted">
+              {kleinunternehmer
+                ? product.noShippingCost
+                  ? "Keine Versandkosten"
+                  : "zzgl. Versand"
+                : `inkl. ${taxRate}% MwSt. ${product.noShippingCost ? "– keine Versandkosten" : "zzgl. Versand"}`}
+            </p>
+            {!product.noShippingCost && (
+              <p className="text-label text-text-muted">
+                Lieferzeit: {shipping.totalDays.min}–{shipping.totalDays.max} Werktage innerhalb Deutschlands
+              </p>
+            )}
+          </div>
+          {anyLowStock && <p className="text-label font-bold text-warning">Nur noch wenige verfügbar</p>}
+          <AddToCartButton
+            label="In den Warenkorb"
+            className="w-full inline-flex items-center justify-center px-6 py-[0.8125rem] rounded-sm bg-brand hover:bg-brand-hover active:scale-[0.97] transition-all font-bold text-body text-text-primary text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-muted"
+            productId={product.id}
+            numericId={product.numericId}
+            outOfStock={!product.active || product.outOfStock}
+            maxQty={product.maxQty}
+            variants={product.active ? product.variants : []}
+          />
+        </div>
+      </Reveal>
+    </section>
+  );
+}
@@ -0,0 +1,34 @@
+import { Reveal } from "../../components/Reveal";
+
+// Plays the same structural role as todo-cards/components/HowItWorks.tsx (a
+// content section between Hero and the material/Pricing sections, matching
+// the site's established product-page rhythm) — but this is the brand-story
+// section explaining the product's name, so flowing prose fits better than
+// this file's former 2×2 scenario grid (replaced 2026-08-25 alongside the
+// Der Alltagsstift → Der Eine. rename).
+export function Why() {
+  return (
+    <section className="w-full bg-bg-base flex flex-col gap-6 items-center py-12 sm:py-16 px-[var(--layout-padding-x)]">
+      <Reveal className="flex flex-col gap-5 items-start text-left max-w-2xl w-full">
+        <p
+          className="font-semibold text-h-emphasis text-text-primary"
+          style={{ fontFamily: "var(--font-lora)" }}
+        >
+          Warum „Der Eine.“?
+        </p>
+        <p className="text-body text-text-body">
+          Weil du nicht alles gleichzeitig machen kannst.
+        </p>
+        <p className="text-body text-text-body">
+          Aufschreiben hilft dabei, aus all den Dingen im Kopf das herauszuholen, was gerade wichtig ist. Und manchmal ist das eben nur: die eine Sache.
+        </p>
+        <p className="text-body text-text-body">
+          Daher steht auf der einen Seite des Stifts <strong className="font-semibold text-text-primary">Der Eine.</strong> und auf der anderen <strong className="font-semibold text-text-primary">einfach produktiv.</strong>
+        </p>
+        <p className="text-body text-text-body">
+          Mehr steckt eigentlich nicht dahinter. Und vielleicht ist genau das der Punkt.
+        </p>
+      </Reveal>
+    </section>
+  );
+}
@@ -0,0 +1,54 @@
+import type { Metadata } from "next";
+import { Hero } from "./components/Hero";
+import { Why } from "./components/Why";
+import { Focus } from "./components/Focus";
+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 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.";
+
+export const metadata: Metadata = {
+  title,
+  description,
+  alternates: {
+    canonical: "/der-eine",
+  },
+  openGraph: {
+    title,
+    description,
+    url: "/der-eine",
+  },
+  twitter: {
+    title,
+    description,
+  },
+};
+
+export default async function DerEinePage() {
+  const [product, seller] = await Promise.all([
+    getProductBySlug("stift-kugelschreiber"),
+    getCompanySettings(),
+  ]);
+  const productSchema = product
+    ? buildProductSchema(product, "https://einfach-produktiv.mk360.de/der-eine", seller)
+    : null;
+
+  return (
+    <>
+      {productSchema && (
+        <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(productSchema) }} />
+      )}
+      <main className="flex flex-col flex-1">
+        <Hero />
+        <Focus />
+        <Why />
+        <Pricing />
+      </main>
+      <Footer />
+    </>
+  );
+}