Marco
5e48b67588
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.
307 lines
15 KiB
TypeScript
307 lines
15 KiB
TypeScript
import type { Metadata } from "next";
|
||
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 =
|
||
"Du schaffst nicht zu wenig – du willst zu viel. Das 3×3-System hilft dir, jeden Tag drei bewusste Prioritäten zu setzen, statt zehn gleichzeitig im Kopf zu behalten.";
|
||
|
||
export const metadata: Metadata = {
|
||
title,
|
||
description,
|
||
alternates: { canonical: "/3x3-system" },
|
||
openGraph: {
|
||
title,
|
||
description,
|
||
url: "/3x3-system",
|
||
type: "article",
|
||
},
|
||
twitter: {
|
||
title,
|
||
description,
|
||
},
|
||
};
|
||
|
||
// Same hand-copied "H2 with brand underline" treatment as
|
||
// /lebensuhr/page.tsx uses — see that file's own comment on why this
|
||
// isn't shared with RichText.tsx's converter (no CMS post backs this
|
||
// page either).
|
||
function H2({ children }: { children: React.ReactNode }) {
|
||
return (
|
||
<h2
|
||
className="font-semibold text-h-small text-text-primary mt-4 first:mt-0"
|
||
style={{ fontFamily: "var(--font-lora)" }}
|
||
>
|
||
{children}
|
||
<span className="block h-[0.125rem] w-8 bg-brand mt-2" aria-hidden />
|
||
</h2>
|
||
);
|
||
}
|
||
|
||
function P({ children }: { children: React.ReactNode }) {
|
||
return <p className="text-body text-text-body">{children}</p>;
|
||
}
|
||
|
||
// Same visual language as RichText.tsx's Quote component (Caveat script +
|
||
// brand divider) — for the article's two key one-line callouts.
|
||
function Quote({ children }: { children: React.ReactNode }) {
|
||
return (
|
||
<div className="relative flex items-start gap-6 w-full my-2">
|
||
<div className="w-px self-stretch bg-brand shrink-0" />
|
||
<p className="text-text-primary text-[1.75rem] leading-[1.1] flex-1" style={{ fontFamily: "var(--font-caveat)" }}>
|
||
{children}
|
||
</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 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="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() {
|
||
return (
|
||
<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() {
|
||
return (
|
||
<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>
|
||
);
|
||
}
|
||
|
||
// Small decorative mark — same role the clock face plays on
|
||
// /lebensuhr/page.tsx (a page-identity graphic, not carrying any
|
||
// information of its own). A literal 3×3 dot grid.
|
||
function IconGrid3x3() {
|
||
const positions = [0, 1, 2].flatMap((row) => [0, 1, 2].map((col) => [row, col] as const));
|
||
return (
|
||
<svg width="44" height="44" viewBox="0 0 44 44" aria-hidden="true">
|
||
{positions.map(([row, col]) => (
|
||
<circle key={`${row}-${col}`} cx={7 + col * 15} cy={7 + row * 15} r="4" fill="var(--color-brand)" />
|
||
))}
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
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() {
|
||
return (
|
||
<>
|
||
<main className="flex flex-col flex-1 bg-bg-base">
|
||
<Reveal className="flex flex-col gap-4 items-start pt-10 pb-8 px-[var(--layout-padding-x)] w-full max-w-[48rem] mx-auto">
|
||
<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>
|
||
<span className="text-text-primary">3x3-System</span>
|
||
</p>
|
||
<p
|
||
className="font-semibold text-[clamp(2.25rem,1.393rem+1.786vw,3rem)] text-text-primary leading-[1.15]"
|
||
style={{ fontFamily: "var(--font-playfair)" }}
|
||
>
|
||
Das 3×3-System: Warum du nicht zu wenig schaffst, sondern zu viel willst
|
||
</p>
|
||
</Reveal>
|
||
|
||
<Reveal delay={0.1} className="w-full max-w-[48rem] mx-auto px-[var(--layout-padding-x)] pb-14 flex flex-col gap-5">
|
||
<H2>Das Gefühl, den ganzen Tag beschäftigt gewesen zu sein</H2>
|
||
<P>
|
||
Es gibt Tage, an denen man abends auf die Uhr schaut und sich fragt, wo die Zeit geblieben
|
||
ist. Nicht, weil man nichts gemacht hätte – der Tag war voll, zwischen Arbeit, Familie,
|
||
Nachrichten und allem, was spontan dazwischenkam. Und trotzdem bleibt dieses Gefühl zurück:
|
||
beschäftigt gewesen, aber nicht wirklich vorangekommen.
|
||
</P>
|
||
<P>
|
||
Meine erste Vermutung war die naheliegende: Es fehlt Zeit. Wäre die Woche ruhiger, hätten
|
||
die Tage ein paar Stunden mehr, würde sich vieles von selbst lösen. Je länger ich darüber
|
||
nachgedacht habe, desto klarer wurde mir: Zeit ist gar nicht das eigentliche Problem.
|
||
</P>
|
||
|
||
<H2>Warum die meisten von uns kein Zeitproblem haben</H2>
|
||
<Quote>Die meisten von uns haben kein Zeitproblem. Sie haben ein Entscheidungsproblem.</Quote>
|
||
<P>
|
||
Vom Aufstehen bis zum Schlafengehen treffen wir Entscheidungen. Worauf reagiere ich zuerst?
|
||
Was ist dringend, was ist wichtig? Jede einzelne kostet nur wenig Energie – die Summe kann
|
||
trotzdem erstaunlich schwer werden. Besonders dann, wenn man versucht, allem gerecht zu
|
||
werden: der Arbeit, der Familie, den eigenen Projekten, all den Dingen, die irgendwann mal
|
||
wichtig waren und jetzt auf einer Liste stehen.
|
||
</P>
|
||
<P>
|
||
Lange dachte ich, mein Problem sei die Länge meiner To-do-Liste. Heute glaube ich etwas
|
||
anderes: Das Problem ist nicht die Anzahl der Aufgaben, sondern die Anzahl der Dinge, die
|
||
gleichzeitig wichtig sein sollen. Genau hier setzt das 3×3-System an – nicht indem es
|
||
Aufgaben reduziert, sondern indem es Entscheidungen erzwingt.
|
||
</P>
|
||
|
||
<H2>Die Erkenntnis hinter dem 3×3-System</H2>
|
||
<P>
|
||
Ich habe lange darüber nachgedacht, wie ich mehr schaffen könnte. Die interessantere Frage
|
||
war aber, warum ich überhaupt glaubte, all diese Dinge gleichzeitig schaffen zu müssen.
|
||
</P>
|
||
<Quote>Du schaffst nicht zu wenig. Du willst zu viel.</Quote>
|
||
<P>
|
||
Unbequem, weil wir uns lieber einreden, dass die Umstände schuld sind. Aber ehrlich
|
||
betrachtet: Ich möchte beruflich vorankommen, für meine Familie da sein, Zeit für eigene
|
||
Projekte finden, meine Gesundheit nicht vernachlässigen, den Haushalt im Griff behalten –
|
||
und das Ganze möglichst entspannt. Jeder Wunsch für sich ist nachvollziehbar. Zusammen
|
||
ergeben sie eine Liste, die an den meisten Tagen nicht realistisch ist. Die Folge ist nicht
|
||
mehr Produktivität, sondern mehr Frust.
|
||
</P>
|
||
|
||
<H2>Was ist das 3×3-System?</H2>
|
||
<P>
|
||
Kein großes System, keine komplizierte Methode – eher der Versuch, meinem Tag wieder eine
|
||
klare Richtung zu geben. Statt morgens zehn Prioritäten gleichzeitig im Kopf zu haben, treffe
|
||
ich drei bewusste Entscheidungen. Nicht die einzigen Dinge, die an diesem Tag passieren –
|
||
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:
|
||
</P>
|
||
</Reveal>
|
||
|
||
{/* 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-10">
|
||
<IconGrid3x3 />
|
||
<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>
|
||
<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>
|
||
|
||
<Reveal delay={0.1} className="w-full max-w-[48rem] mx-auto px-[var(--layout-padding-x)] pt-10 pb-14 flex flex-col gap-5">
|
||
<P>Mehr kommt nicht auf diese Liste.</P>
|
||
|
||
{/* 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. */}
|
||
<div className="relative w-full rounded-xl overflow-hidden bg-bg-muted" style={{ aspectRatio: "1500/1000" }}>
|
||
<Image
|
||
alt="Beispielraster: Verantwortung, Fortschritt und Stabilität je einmal über Arbeit, Familie und Persönliches verteilt"
|
||
src="/3x3-system-matrix.png"
|
||
fill
|
||
sizes="(min-width: 768px) 48rem, 100vw"
|
||
className="object-contain"
|
||
/>
|
||
</div>
|
||
<p className="text-body-sm text-text-muted text-center -mt-2">
|
||
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.
|
||
</p>
|
||
|
||
<P>
|
||
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
|
||
Menschen, Termine und spontane Anfragen sie bestimmen. Termine und Überraschungen
|
||
verschwinden dadurch nicht. Der Unterschied ist nur: Ich weiß morgens schon, welche drei
|
||
Dinge zählen, wenn alles andere durcheinandergerät.
|
||
</P>
|
||
|
||
<H2>Warum ich das 3×3-System heute anders sehe</H2>
|
||
<P>
|
||
Am Anfang war die Idee vor allem ein persönlicher Versuch, mit weniger mentalem Ballast durch
|
||
den Tag zu gehen. Inzwischen ist daraus mehr geworden – nicht weil das System komplizierter
|
||
wurde, sondern weil sich zeigt, dass viele Menschen dasselbe Problem haben: Sie versuchen
|
||
nicht zu wenig zu schaffen. Sie versuchen zu viele Dinge gleichzeitig wichtig sein zu lassen.
|
||
</P>
|
||
<P>
|
||
Das 3×3-System löst nicht jedes Problem des Alltags, und es sorgt nicht dafür, dass plötzlich
|
||
alles nach Plan läuft. Aber es schafft etwas, das in vielen Produktivitätssystemen
|
||
erstaunlich selten vorkommt: <span className="font-semibold text-text-primary">Klarheit.</span>{" "}
|
||
Oft ist genau das der Unterschied zwischen einem Tag, der sich chaotisch anfühlt, und einem
|
||
Tag, der trotz aller Unvorhersehbarkeit eine Richtung behält.
|
||
</P>
|
||
|
||
<H2>Wenn alles wichtig ist, entscheidet am Ende der Zufall</H2>
|
||
<P>
|
||
Viele Produktivitätssysteme versprechen mehr Output, bessere Planung oder mehr Effizienz. Das
|
||
3×3-System verfolgt ein anderes Ziel: Es soll dir helfen, morgens zu wissen, was zählt – nicht
|
||
weil der Rest unwichtig wäre, sondern weil ein Tag nur begrenzt Aufmerksamkeit verträgt.
|
||
</P>
|
||
<P>
|
||
Wenn alles wichtig ist, entscheidet am Ende der Zufall darüber, worauf deine Energie geht.
|
||
Wenn drei Dinge wichtig sind, entscheidest wieder du. Genau deshalb geht es beim 3×3-System
|
||
nicht darum, mehr zu schaffen. Es geht darum, bewusster zu entscheiden.
|
||
</P>
|
||
|
||
<H2>Du möchtest das 3×3-System selbst ausprobieren?</H2>
|
||
<P>
|
||
Falls dir das Gefühl bekannt vorkommt: Eine Idee zeigt sich nicht auf dem Papier, sondern
|
||
mitten im echten Leben.
|
||
</P>
|
||
|
||
{/* Same bordered CTA-card treatment /lebensuhr/page.tsx uses. */}
|
||
<Link
|
||
href="/7-tage-klarheits-check"
|
||
className="group flex items-center justify-between gap-4 border border-border rounded-md px-6 py-5 mt-2 hover:border-brand transition-colors"
|
||
>
|
||
<div className="flex flex-col gap-1">
|
||
<p className="font-bold text-[0.8125rem] text-brand">Nächster Schritt:</p>
|
||
<p className="font-semibold text-body text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
|
||
7-Tage-Klarheits-Check
|
||
</p>
|
||
<p className="text-body-sm text-text-muted">Sieben Tage, kurze Impulse, direkt im Alltag.</p>
|
||
</div>
|
||
<svg
|
||
viewBox="0 0 20 20"
|
||
className="size-4 shrink-0 text-text-primary transition-transform duration-200 group-hover:translate-x-1"
|
||
fill="none"
|
||
aria-hidden="true"
|
||
>
|
||
<path d="M4 10h12m0 0-5-5m5 5-5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||
</svg>
|
||
</Link>
|
||
</Reveal>
|
||
</main>
|
||
<Footer />
|
||
</>
|
||
);
|
||
}
|