From 6debcd5a46951b7e274155fa287db05f5fef1043 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Tue, 25 Aug 2026 13:29:07 +0000
Subject: [PATCH] Der Eine.: drop "Warum" section, widen + restyle Focus icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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.
---
 app/der-eine/components/Focus.tsx | 40 ++++++++++++++++++++-----------
 app/der-eine/components/Why.tsx   | 34 --------------------------
 app/der-eine/page.tsx             |  2 --
 3 files changed, 26 insertions(+), 50 deletions(-)
 delete mode 100644 app/der-eine/components/Why.tsx

diff --git a/app/der-eine/components/Focus.tsx b/app/der-eine/components/Focus.tsx
index b341a5d..ffac73f 100644
--- a/app/der-eine/components/Focus.tsx
+++ b/app/der-eine/components/Focus.tsx
@@ -1,40 +1,52 @@
+import type { ReactNode } from "react";
 import { Reveal, RevealGroup, RevealItem } from "../../components/Reveal";
 
-// Line icons matching the der-eine.png mockup's icon row — no matching
-// /public asset existed for these concepts (checked: pencil/pen/sparkle/
-// shield), so drawn fresh rather than upscaling a raster crop from the
-// mockup, same reasoning as this page's own IconCheck below.
+// Circle-badge + brand-orange stroke — same treatment as
+// todo-cards/HowItWorks.tsx's step-3 checkmark icon (a stroked circle
+// around the glyph) and this page's own IconCheck (brand-orange #f6a701
+// stroke), instead of the earlier plain black line icons, which read as a
+// different, colder icon language than the rest of the site.
+function IconBadge({ children }: { children: ReactNode }) {
+  return (
+    <div className="size-16 rounded-full border-2 border-brand flex items-center justify-center shrink-0">
+      <svg width="28" height="28" viewBox="0 0 28 28" fill="none" strokeWidth="1.6" stroke="#f6a701" strokeLinecap="round" strokeLinejoin="round">
+        {children}
+      </svg>
+    </div>
+  );
+}
+
 function IconPencil() {
   return (
-    <svg width="40" height="40" viewBox="0 0 28 28" fill="none" strokeWidth="1.5" stroke="#1a1a1a" strokeLinecap="round" strokeLinejoin="round" className="h-10 w-auto">
+    <IconBadge>
       <path d="M18.5 4.5l5 5L9 24H4v-5L18.5 4.5z" />
       <path d="M15.5 7.5l5 5" />
-    </svg>
+    </IconBadge>
   );
 }
 
 function IconPen() {
   return (
-    <svg width="40" height="40" viewBox="0 0 28 28" fill="none" strokeWidth="1.5" stroke="#1a1a1a" strokeLinecap="round" strokeLinejoin="round" className="h-10 w-auto">
+    <IconBadge>
       <path d="M6 22l3-1 13-13-2-2L7 19l-1 3z" />
       <path d="M17 8l3 3" />
-    </svg>
+    </IconBadge>
   );
 }
 
 function IconSparkle() {
   return (
-    <svg width="40" height="40" viewBox="0 0 28 28" fill="none" strokeWidth="1.5" stroke="#1a1a1a" strokeLinecap="round" strokeLinejoin="round" className="h-10 w-auto">
+    <IconBadge>
       <path d="M14 3v8M14 17v8M3 14h8M17 14h8M6.5 6.5l5.5 5.5M16 16l5.5 5.5M21.5 6.5L16 12M12 16l-5.5 5.5" />
-    </svg>
+    </IconBadge>
   );
 }
 
 function IconShield() {
   return (
-    <svg width="40" height="40" viewBox="0 0 28 28" fill="none" strokeWidth="1.5" stroke="#1a1a1a" strokeLinecap="round" strokeLinejoin="round" className="h-10 w-auto">
+    <IconBadge>
       <path d="M14 3l9 3.5v6c0 6-4 10-9 12.5-5-2.5-9-6.5-9-12.5v-6L14 3z" />
-    </svg>
+    </IconBadge>
   );
 }
 
@@ -62,12 +74,12 @@ export function Focus() {
         >
           Was kann er?
         </p>
-        <p className="text-body text-text-muted max-w-[36rem]">
+        <p className="text-body text-text-muted max-w-[42rem]">
           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>
       </Reveal>
 
-      <RevealGroup className="flex flex-col sm:flex-row gap-8 items-start sm:items-start w-full lg:px-[16.25rem]">
+      <RevealGroup className="flex flex-col sm:flex-row gap-8 items-start sm:items-start w-full max-w-[75rem] mx-auto">
         {items.map(({ icon: Icon, title, desc }) => (
           <RevealItem key={title} className="group flex flex-col gap-4 items-center text-center flex-1 max-w-xs sm:max-w-none mx-auto">
             <Icon />
diff --git a/app/der-eine/components/Why.tsx b/app/der-eine/components/Why.tsx
deleted file mode 100644
index 841674f..0000000
--- a/app/der-eine/components/Why.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-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>
-  );
-}
diff --git a/app/der-eine/page.tsx b/app/der-eine/page.tsx
index ae3d36d..965107c 100644
--- a/app/der-eine/page.tsx
+++ b/app/der-eine/page.tsx
@@ -1,6 +1,5 @@
 import type { Metadata } from "next";
 import { Hero } from "./components/Hero";
-import { Why } from "./components/Why";
 import { Focus } from "./components/Focus";
 import { PasstDazu } from "./components/PasstDazu";
 import { Footer } from "../components/Footer";
@@ -45,7 +44,6 @@ export default async function DerEinePage() {
       <main className="flex flex-col flex-1">
         <Hero />
         <Focus />
-        <Why />
         <PasstDazu />
       </main>
       <Footer />