Cut /3x3-system over to the page builder
Content recreated as a 17-block Pages document (hero, prose sections, the 2 key-line quotes, the pill list, the category step row, the matrix example image — uploaded to Media fresh since the closest existing media doc turned out to be a different file — and the closing CTA card). Verified via a temporary alternate slug against the live catch-all route (including the inline bold "Klarheit." formatting) before switching back and removing the static file.
This commit is contained in:
Marco
@@ -1,229 +0,0 @@
|
||||
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";
|
||||
import { STEP_ICONS } from "../components/icons/StepIcons";
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
const categories = [
|
||||
{ icon: STEP_ICONS.target(), label: "Verantwortung", desc: "Etwas, das erledigt werden muss und für das du Verantwortung trägst." },
|
||||
{ icon: STEP_ICONS.trendingUp(), label: "Fortschritt", desc: "Etwas, das dich beruflich oder persönlich ein Stück weiterbringt." },
|
||||
{ icon: STEP_ICONS.shield(), 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, sondern weil trotz vollem Tag dieses Gefühl
|
||||
bleibt: beschäftigt, aber nicht wirklich vorangekommen. Meine erste Vermutung: Es fehlt Zeit.
|
||||
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 wichtig? Jede kostet nur wenig Energie, die Summe wird trotzdem schwer.
|
||||
Besonders wenn man versucht, allem gerecht zu werden:
|
||||
</P>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{["Arbeit", "Familie", "eigene Projekte", "Gesundheit", "Haushalt", "Freundschaften", "Erholung"].map((tag) => (
|
||||
<span key={tag} className="text-body-sm text-text-muted bg-bg-muted rounded-full px-3 py-1">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
<P>
|
||||
Lange dachte ich, mein Problem sei die Länge meiner To-do-Liste. Heute glaube ich: Es ist 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 überlegt, wie ich mehr schaffen könnte. Die interessantere Frage: warum ich
|
||||
überhaupt glaubte, alles gleichzeitig schaffen zu müssen.
|
||||
</P>
|
||||
<Quote>Du schaffst nicht zu wenig. Du willst zu viel.</Quote>
|
||||
<P>
|
||||
Unbequem, weil wir lieber die Umstände verantwortlich machen. Aber ehrlich betrachtet:
|
||||
beruflich vorankommen, für die Familie da sein, Gesundheit, Haushalt, eigene Projekte – und
|
||||
das alles entspannt. Jeder Wunsch für sich nachvollziehbar, zusammen aber selten realistisch.
|
||||
Die Folge: nicht mehr Produktivität, sondern mehr Frust.
|
||||
</P>
|
||||
|
||||
<H2>Was ist das 3×3-System?</H2>
|
||||
<P>
|
||||
Kein großes System – eher der Versuch, dem Tag eine klare Richtung zu geben. Statt zehn
|
||||
Prioritäten gleichzeitig treffe ich drei bewusste Entscheidungen, verteilt auf drei Bereiche:
|
||||
</P>
|
||||
|
||||
{/* Same icon-above-text/StepArrow row treatment as
|
||||
/7-tage-klarheits-check's "So funktioniert" section and
|
||||
/lebensuhr's phase row — but inline in the article column
|
||||
now, not broken out into its own full-width bg-bg-muted
|
||||
band. That band made it read as a separate banner,
|
||||
disconnected from the paragraph right above it explaining
|
||||
what these three things are. */}
|
||||
<RevealGroup className="flex flex-col sm:flex-row items-center sm:items-start gap-6 sm:gap-2 w-full py-2">
|
||||
{categories.flatMap((c, i) => [
|
||||
<RevealItem key={c.label} className="group flex flex-col items-center gap-3 flex-1 min-w-0">
|
||||
<div className="flex items-center justify-center w-14 h-12 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 sm:mt-4">
|
||||
<StepArrow className="w-8 h-8 rotate-90 sm:w-10 sm:h-4 sm:rotate-0" />
|
||||
</div>
|
||||
) : null,
|
||||
])}
|
||||
</RevealGroup>
|
||||
|
||||
<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>
|
||||
Keine vollständige Tagesplanung – nur eine Richtung, bevor andere Termine und Anfragen sie
|
||||
bestimmen. Der Unterschied: 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 es ein persönlicher Versuch, mit weniger Ballast durch den Tag zu gehen.
|
||||
Inzwischen zeigt sich: Viele haben dasselbe Problem – nicht zu wenig schaffen, sondern zu
|
||||
viele Dinge gleichzeitig wichtig sein lassen. Das 3×3-System löst nicht jedes Problem, aber es
|
||||
schafft etwas, das selten ist: <span className="font-semibold text-text-primary">Klarheit.</span>
|
||||
</P>
|
||||
|
||||
<H2>Wenn alles wichtig ist, entscheidet am Ende der Zufall</H2>
|
||||
<P>Viele Systeme versprechen mehr Output. Das 3×3-System will nur eins: dass du morgens weißt, was zählt.</P>
|
||||
<Quote>Wenn alles wichtig ist, entscheidet der Zufall. Wenn drei Dinge wichtig sind, entscheidest wieder du.</Quote>
|
||||
|
||||
<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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user