From 5e48b675887885993d418e9ab79a9812d1063fe2 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Wed, 26 Aug 2026 15:55:17 +0000
Subject: [PATCH] 3x3-system: match icon-row/StepArrow pattern used site-wide
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Category cards were a standalone 3-card grid with red/amber/green
accents (matching the original blog post) — out of step with how
every other icon-row on the site looks. Now the same icon-above-
text + StepArrow layout as /7-tage-klarheits-check's "So
funktioniert" and /lebensuhr's phase row, and the icons are a single
brand-orange line-icon style instead of per-category colors.
---
 app/3x3-system/page.tsx | 74 ++++++++++++++++++++++++-----------------
 1 file changed, 44 insertions(+), 30 deletions(-)

diff --git a/app/3x3-system/page.tsx b/app/3x3-system/page.tsx
index c99baa4..257d231 100644
--- a/app/3x3-system/page.tsx
+++ b/app/3x3-system/page.tsx
@@ -3,6 +3,7 @@ import Link from "next/link";
 import Image from "next/image";
 import { Reveal, RevealGroup, RevealItem } from "../components/Reveal";
 import { Footer } from "../components/Footer";
+import { StepArrow } from "../components/StepArrow";
 
 const title = "Das 3×3-System: Zu wenig geschafft oder zu viel gewollt?";
 const description =
@@ -57,29 +58,33 @@ function Quote({ children }: { children: React.ReactNode }) {
   );
 }
 
-function IconTarget({ color }: { color: string }) {
+// Same brand-orange line-icon language as /lebensuhr's IconSunrise etc. —
+// switched from per-category red/amber/green (matching the original blog
+// post's 🔴🟡🟢) to a single brand color, for consistency with every
+// other icon-row on the site, none of which color-code their icons.
+function IconTarget() {
   return (
-    <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
-      <circle cx="14" cy="14" r="11" stroke={color} strokeWidth="2" />
-      <circle cx="14" cy="14" r="6" stroke={color} strokeWidth="2" />
-      <circle cx="14" cy="14" r="1.5" fill={color} />
+    <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
+      <circle cx="20" cy="20" r="16" stroke="#f6a701" strokeWidth="2" />
+      <circle cx="20" cy="20" r="9" stroke="#f6a701" strokeWidth="2" />
+      <circle cx="20" cy="20" r="2" fill="#f6a701" />
     </svg>
   );
 }
 
-function IconTrendingUp({ color }: { color: string }) {
+function IconTrendingUp() {
   return (
-    <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
-      <path d="M4 20l7-7 4 4 9-9" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M17 8h7v7" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    <svg width="44" height="40" viewBox="0 0 44 40" fill="none">
+      <path d="M4 30l10-10 6 6 14-14" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M24 10h10v10" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
   );
 }
 
-function IconShield({ color }: { color: string }) {
+function IconShield() {
   return (
-    <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
-      <path d="M14 3l9 3.5v6c0 6-4 10.5-9 12.5-5-2-9-6.5-9-12.5v-6L14 3z" stroke={color} strokeWidth="2" strokeLinejoin="round" />
+    <svg width="36" height="40" viewBox="0 0 36 40" fill="none">
+      <path d="M18 3l14 5v9c0 9-6 16-14 20-8-4-14-11-14-20v-9l14-5z" stroke="#f6a701" strokeWidth="2" strokeLinejoin="round" />
     </svg>
   );
 }
@@ -98,10 +103,10 @@ function IconGrid3x3() {
   );
 }
 
-const categories: { color: string; icon: (color: string) => React.ReactNode; label: string; desc: string }[] = [
-  { color: "#ef4444", icon: (c) => <IconTarget color={c} />, label: "Verantwortung", desc: "Etwas, das erledigt werden muss und für das du Verantwortung trägst." },
-  { color: "#f59e0b", icon: (c) => <IconTrendingUp color={c} />, label: "Fortschritt", desc: "Etwas, das dich beruflich oder persönlich ein Stück weiterbringt." },
-  { color: "#22c55e", icon: (c) => <IconShield color={c} />, label: "Stabilität", desc: "Etwas, das deinen Alltag ordnet, deiner Gesundheit guttut oder Gleichgewicht schafft." },
+const categories = [
+  { icon: <IconTarget />, label: "Verantwortung", desc: "Etwas, das erledigt werden muss und für das du Verantwortung trägst." },
+  { icon: <IconTrendingUp />, label: "Fortschritt", desc: "Etwas, das dich beruflich oder persönlich ein Stück weiterbringt." },
+  { icon: <IconShield />, label: "Stabilität", desc: "Etwas, das deinen Alltag ordnet, deiner Gesundheit guttut oder Gleichgewicht schafft." },
 ];
 
 export default function DreiXDreiSystemPage() {
@@ -177,23 +182,32 @@ export default function DreiXDreiSystemPage() {
           </P>
         </Reveal>
 
-        {/* Full-width band, same structural role as /lebensuhr's phase-row
-            section (bg-bg-muted, breaks out of the 48rem column) — plus
-            the IconGrid3x3 mark as this page's own identity graphic,
-            paralleling that page's clock face. */}
+        {/* Full-width band, same structural role AND same icon-above-text/
+            StepArrow row treatment as /7-tage-klarheits-check's "So
+            funktioniert" section and /lebensuhr's phase row — a plain
+            3-card grid here read out of place next to those. IconGrid3x3
+            stays as this page's own identity graphic, paralleling
+            /lebensuhr's clock face. */}
         <section className="bg-bg-muted w-full py-10 lg:py-14">
-          <div className="px-8 lg:px-[5rem] max-w-[1280px] mx-auto flex flex-col items-center gap-8">
+          <div className="px-8 lg:px-[5rem] max-w-[1280px] mx-auto flex flex-col items-center gap-10">
             <IconGrid3x3 />
-            <RevealGroup className="grid sm:grid-cols-3 gap-4 w-full max-w-[48rem]">
-              {categories.map((c) => (
-                <RevealItem key={c.label}>
-                  <div className="bg-bg-base rounded-lg p-5 flex flex-col gap-2 border-t-4 h-full" style={{ borderTopColor: c.color }}>
-                    {c.icon(c.color)}
-                    <p className="font-semibold text-text-primary">{c.label}</p>
-                    <p className="text-body-sm text-text-muted">{c.desc}</p>
+            <RevealGroup className="flex flex-col lg:flex-row items-center lg:items-start gap-8 lg:gap-2 w-full">
+              {categories.flatMap((c, i) => [
+                <RevealItem key={c.label} className="group flex flex-col items-center gap-4 lg:gap-5 flex-1 min-w-0">
+                  <div className="flex items-center justify-center w-16 h-14 shrink-0 transition-transform duration-300 group-hover:scale-110">
+                    {c.icon}
                   </div>
-                </RevealItem>
-              ))}
+                  <div className="flex flex-col gap-1 text-center">
+                    <p className="font-semibold text-text-primary text-[1rem]">{c.label}</p>
+                    <p className="text-[0.875rem] text-text-muted leading-[1.5]">{c.desc}</p>
+                  </div>
+                </RevealItem>,
+                i < categories.length - 1 ? (
+                  <div key={`arrow-${i}`} className="flex items-center justify-center shrink-0 lg:mt-5">
+                    <StepArrow className="w-8 h-8 rotate-90 lg:w-10 lg:h-4 lg:rotate-0" />
+                  </div>
+                ) : null,
+              ])}
             </RevealGroup>
           </div>
         </section>