From cdc779aebebe742710ba6e3967c34191e40bdfa7 Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 26 Aug 2026 15:36:47 +0000 Subject: [PATCH] 3x3-system: card layout for categories, matrix image, CTA card; lebensuhr fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit /3x3-system: - Categories now a 3-card grid (icon + colored top border) instead of a plain bulleted list. - Embeds the original blog post's Arbeit/Familie/Persönlich matrix graphic, framed like the challenge page's image, with a caption clarifying it's one example application (the surrounding text only ever describes 3 categories, not a 3x3 grid). - Closing CTA is now the same bordered-card link /lebensuhr uses. - Tightened remaining prose. /lebensuhr: - Fixed missing side padding below 640px (the table card's full-bleed negative-margin trick ate the page's own padding). - Added a small decorative clock-face SVG above the table (8 ages plotted at their proportional position) — company piece for the table, which stays the actual data source. --- app/3x3-system/page.tsx | 104 ++++++++++++++++++++++++++++------- app/lebensuhr/page.tsx | 55 +++++++++++++++++- public/3x3-system-matrix.png | Bin 0 -> 1034752 bytes 3 files changed, 139 insertions(+), 20 deletions(-) create mode 100644 public/3x3-system-matrix.png diff --git a/app/3x3-system/page.tsx b/app/3x3-system/page.tsx index ebcfd19..e8c533b 100644 --- a/app/3x3-system/page.tsx +++ b/app/3x3-system/page.tsx @@ -1,5 +1,6 @@ import type { Metadata } from "next"; import Link from "next/link"; +import Image from "next/image"; import { Reveal } from "../components/Reveal"; import { Footer } from "../components/Footer"; @@ -56,10 +57,37 @@ function Quote({ children }: { children: React.ReactNode }) { ); } -const categories: { dot: string; label: string; desc: string }[] = [ - { dot: "bg-red-500", label: "Verantwortung", desc: "Etwas, das erledigt werden muss und für das du Verantwortung trägst." }, - { dot: "bg-amber-400", label: "Fortschritt", desc: "Etwas, das dich beruflich oder persönlich ein Stück weiterbringt." }, - { dot: "bg-green-500", label: "Stabilität", desc: "Etwas, das deinen Alltag ordnet, deiner Gesundheit guttut oder Gleichgewicht schafft." }, +function IconTarget({ color }: { color: string }) { + return ( + + + + + + ); +} + +function IconTrendingUp({ color }: { color: string }) { + return ( + + + + + ); +} + +function IconShield({ color }: { color: string }) { + return ( + + + + ); +} + +const categories: { color: string; icon: (color: string) => React.ReactNode; label: string; desc: string }[] = [ + { color: "#ef4444", icon: (c) => , label: "Verantwortung", desc: "Etwas, das erledigt werden muss und für das du Verantwortung trägst." }, + { color: "#f59e0b", icon: (c) => , label: "Fortschritt", desc: "Etwas, das dich beruflich oder persönlich ein Stück weiterbringt." }, + { color: "#22c55e", icon: (c) => , label: "Stabilität", desc: "Etwas, das deinen Alltag ordnet, deiner Gesundheit guttut oder Gleichgewicht schafft." }, ]; export default function DreiXDreiSystemPage() { @@ -133,17 +161,38 @@ export default function DreiXDreiSystemPage() { aber die drei, die zählen sollen, wenn der Tag wieder voller wird als geplant. Damit daraus nicht einfach drei weitere beliebige Aufgaben werden, verteile ich sie auf drei Bereiche:

-
    +
    {categories.map((c) => ( -
  • - -

    - {c.label} – {c.desc} -

    -
    • +
    + {c.icon(c.color)} +

    {c.label}

    +

    {c.desc}

    +
    ))} -
+

Mehr kommt nicht auf diese Liste.

+ + {/* Same rounded-xl framed-image treatment /7-tage-klarheits-check's + "Das erwartet dich" section uses. Shows one concrete + application of the three categories (across Arbeit/Familie/ + Persönlich) — an example, not a required 4th dimension of + the system, hence the caption spelling that out rather than + leaving the image to imply a grid the text above never + mentioned. */} +
+ Beispielraster: Verantwortung, Fortschritt und Stabilität je einmal über Arbeit, Familie und Persönliches verteilt +
+

+ Ein Beispiel: An diesem Tag steckt die Verantwortung im Job, der Fortschritt in der Familie + und die Stabilität im Privaten. An einem anderen Tag sieht die Verteilung anders aus. +

+

Diese drei Punkte sind keine vollständige Tagesplanung. Sie sollen nicht verhindern, dass das Leben dazwischenkommt – sie sorgen nur dafür, dass der Tag eine Richtung hat, bevor andere @@ -181,14 +230,31 @@ export default function DreiXDreiSystemPage() {

Du möchtest das 3×3-System selbst ausprobieren?

- Falls dir das Gefühl gerade bekannt vorkommt: Im{" "} - - 7-Tage-Klarheits-Check - {" "} - begleite ich dich sieben Tage lang beim Einstieg ins 3×3-System – keine langen Lektionen, - sondern kurze Impulse, die du direkt im Alltag ausprobieren kannst. Denn genau dort entscheidet - sich, ob eine Idee funktioniert: nicht auf dem Papier, sondern mitten im echten Leben. + Falls dir das Gefühl bekannt vorkommt: Eine Idee zeigt sich nicht auf dem Papier, sondern + mitten im echten Leben.

+ + {/* Same bordered CTA-card treatment /lebensuhr/page.tsx uses. */} + +
+

Nächster Schritt:

+

+ 7-Tage-Klarheits-Check +

+

Sieben Tage, kurze Impulse, direkt im Alltag.

+
+ +