From 2b39ec757e534512fbf7a89d9627e415be935681 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Tue, 25 Aug 2026 18:42:24 +0000
Subject: [PATCH] Der Eine.: unboxed bold-outline icons, mobile gallery padding
 + justified text

Focus.tsx icons now match the site's established icon-trust-*/icon-step-*
look (bold single-stroke outline, no circle badge) instead of the earlier
thin-stroke circled version. Hero.tsx's gallery now gets the same
horizontal page padding as the text column below lg:, and Focus.tsx's
body copy switches from centered to justified below md: to avoid ragged
centered multi-line text on small screens.
---
 app/der-eine/components/Focus.tsx | 61 +++++++++++++++++--------------
 app/der-eine/components/Hero.tsx  |  2 +-
 2 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/app/der-eine/components/Focus.tsx b/app/der-eine/components/Focus.tsx
index 193e5f0..79ac97c 100644
--- a/app/der-eine/components/Focus.tsx
+++ b/app/der-eine/components/Focus.tsx
@@ -1,50 +1,55 @@
 import type { ReactNode } from "react";
 import { Reveal, RevealGroup, RevealItem } from "../../components/Reveal";
 
-// Bold black outline, no fill, circled — matching /todo-cards'
-// icon-step-3.png exactly (a stroked circle around the glyph, same
-// uniform-weight black stroke as the glyph itself), not the plain
-// uncircled version tried right before this, nor the orange-badge version
-// tried before that.
+// No circle badge, thicker uniform-weight black stroke, no fill — matching
+// the site's established illustrative icon language (public/icon-trust-*.png,
+// public/icon-step-*.png): bold outline glyphs standing on their own, not
+// boxed into a badge shape. Replaces the earlier thin-stroke circled
+// version, which didn't match anything else on the site.
 function IconBadge({ children }: { children: ReactNode }) {
   return (
-    <svg width="56" height="56" viewBox="0 0 28 28" fill="none" strokeWidth="1.8" stroke="#231f20" strokeLinecap="round" strokeLinejoin="round" className="h-14 w-auto shrink-0">
-      <circle cx="14" cy="14" r="12.5" />
-      <g strokeWidth="1.5">{children}</g>
+    <svg width="64" height="64" viewBox="0 0 32 32" fill="none" stroke="#231f20" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" className="h-16 w-auto shrink-0">
+      {children}
     </svg>
   );
 }
 
-function IconPencil() {
+function IconMetal() {
+  // Pen/nib glyph — stands in for the metal body itself.
   return (
     <IconBadge>
-      <path d="M17 8l3 3L10 21H7v-3L17 8z" />
-      <path d="M15 10l3 3" />
-    </IconBadge>
-  );
-}
-
-function IconPen() {
-  return (
-    <IconBadge>
-      <path d="M9 19l2-0.7L20 9l-1.3-1.3L10 17l-1 2z" />
-      <path d="M17 9.5l1.5 1.5" />
+      <path d="M10 22l2.5-0.8L23 10.7l-2.7-2.7L9.8 19.5 9 22z" />
+      <path d="M19 9l3 3" />
     </IconBadge>
   );
 }
 
 function IconSparkle() {
+  // Engraving/laser mark — four-point sparkle, same glyph as before, just
+  // heavier stroke and unboxed to match the rest of the set.
   return (
     <IconBadge>
-      <path d="M14 6.5v4M14 17.5v4M6.5 14h4M17.5 14h4M9 9l2.5 2.5M16.5 16.5L19 19M19 9l-2.5 2.5M11.5 16.5L9 19" />
+      <path d="M16 7v5M16 20v5M7 16h5M20 16h5M10.5 10.5l3 3M18.5 18.5l3 3M21.5 10.5l-3 3M13.5 18.5l-3 3" />
     </IconBadge>
   );
 }
 
-function IconShield() {
+function IconCompact() {
+  // Four corner brackets pointing inward — standard "minimize/fits
+  // anywhere" glyph, reads as compact more directly than a shield ever did.
   return (
     <IconBadge>
-      <path d="M14 6l6 2.3v4c0 4-2.7 6.6-6 8-3.3-1.4-6-4-6-8v-4L14 6z" />
+      <path d="M11 8H8v3M21 8h3v3M11 24H8v-3M21 24h3v-3" />
+    </IconBadge>
+  );
+}
+
+function IconEveryday() {
+  // Sun — everyday/daily use.
+  return (
+    <IconBadge>
+      <circle cx="16" cy="16" r="6" />
+      <path d="M16 4v3M16 25v3M4 16h3M25 16h3M7.5 7.5l2 2M22.5 22.5l2 2M24.5 7.5l-2 2M9.5 22.5l-2 2" />
     </IconBadge>
   );
 }
@@ -57,10 +62,10 @@ function IconShield() {
 // HowItWorks' 3 numbered steps, no connecting arrows (independent facts,
 // not a sequence).
 const items = [
-  { icon: IconPencil, title: "Metallgehäuse", desc: "Robust, wertig und angenehm in der Hand." },
+  { icon: IconMetal, title: "Metallgehäuse", desc: "Robust, wertig und angenehm in der Hand." },
   { icon: IconSparkle, title: "Lasergravur", desc: "„Der Eine.“ auf der einen Seite. „einfach produktiv.“ auf der anderen." },
-  { icon: IconShield, title: "Kompakt", desc: "Passt ans Notizbuch, auf den Schreibtisch oder in die Tasche." },
-  { icon: IconPen, title: "Für jeden Tag", desc: "Für Notizen, Gedanken, Listen und alles, was du lieber aufschreibst, bevor du es wieder vergisst." },
+  { icon: IconCompact, title: "Kompakt", desc: "Passt ans Notizbuch, auf den Schreibtisch oder in die Tasche." },
+  { icon: IconEveryday, title: "Für jeden Tag", desc: "Für Notizen, Gedanken, Listen und alles, was du lieber aufschreibst, bevor du es wieder vergisst." },
 ];
 
 export function Focus() {
@@ -73,7 +78,7 @@ export function Focus() {
         >
           Was kann er?
         </p>
-        <p className="text-body text-text-muted max-w-[42rem]">
+        <p className="text-body text-text-muted max-w-[42rem] w-full text-justify md:text-center">
           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>
@@ -83,7 +88,7 @@ export function Focus() {
           <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 />
             <p className="font-semibold text-body text-text-primary">{title}</p>
-            <p className="text-body-sm text-text-primary text-center">{desc}</p>
+            <p className="text-body-sm text-text-primary w-full text-justify md:text-center">{desc}</p>
           </RevealItem>
         ))}
       </RevealGroup>
diff --git a/app/der-eine/components/Hero.tsx b/app/der-eine/components/Hero.tsx
index 5908698..7d6a229 100644
--- a/app/der-eine/components/Hero.tsx
+++ b/app/der-eine/components/Hero.tsx
@@ -129,7 +129,7 @@ export async function Hero() {
             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}>
+          <Reveal className="order-2 lg:order-none lg:col-span-7 flex lg:items-center px-[var(--layout-padding-x)] lg:px-0" 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>