Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle /lebensuhr with shared step/checklist/CTA-card patterns

Browse Source 
Reuses /7-tage-klarheits-check's StepArrow icon-row for the four life
phases (was plain H3 blocks), the checkmark-list pattern for the
closing three questions, and the blog's bordered "Passend dazu"
card treatment for the closing CTA. Also tightened the prose —
cut repeated points and filler transitions.
This commit is contained in:
Marco
2026-08-26 15:22:14 +00:00
parent 2dee2e7871
commit cfa658a210
1 changed files with 178 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/lebensuhr/page.tsx
+178 -76
View File
@@ -1,7 +1,8 @@
import type { Metadata } from "next";
import Link from "next/link";
import { Reveal } from "../components/Reveal";
import { Reveal, RevealGroup, RevealItem } from "../components/Reveal";
import { Footer } from "../components/Footer";
import { StepArrow } from "../components/StepArrow";
const title = "Die Lebensuhr: Wie spät ist es in deinem Leben?";
const description =
@@ -39,14 +40,6 @@ function H2({ children }: { children: React.ReactNode }) {
);
}
function H3({ children }: { children: React.ReactNode }) {
return (
<h3 className="font-semibold text-body text-text-primary mt-2" style={{ fontFamily: "var(--font-lora)" }}>
{children}
</h3>
);
}
function P({ children }: { children: React.ReactNode }) {
return <p className="text-body text-text-body">{children}</p>;
}
@@ -65,6 +58,100 @@ function Quote({ children }: { children: React.ReactNode }) {
);
}
// Same "icon-above-text, StepArrow-connected" row /7-tage-klarheits-check's
// "So funktioniert" section and /todo-cards's/newsletter's own "How it
// works" sections use — reused here for the four life phases instead of
// stacking them as plain H3 blocks.
function IconSunrise() {
return (
<svg width="44" height="40" viewBox="0 0 44 40" fill="none">
<line x1="4" y1="30" x2="40" y2="30" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<path d="M13 30a9 9 0 0 1 18 0" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<line x1="22" y1="4" x2="22" y2="10" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<line x1="9" y1="10" x2="13" y2="14" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<line x1="35" y1="10" x2="31" y2="14" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
</svg>
);
}
function IconGrowthBars() {
return (
<svg width="44" height="40" viewBox="0 0 44 40" fill="none">
<line x1="4" y1="36" x2="40" y2="36" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<rect x="7" y="25" width="7" height="11" rx="1" stroke="#f6a701" strokeWidth="2" />
<rect x="18.5" y="16" width="7" height="20" rx="1" stroke="#f6a701" strokeWidth="2" />
<rect x="30" y="6" width="7" height="30" rx="1" stroke="#f6a701" strokeWidth="2" />
</svg>
);
}
function IconSunHigh() {
return (
<svg width="40" height="40" viewBox="0 0 40 40" fill="none">
<circle cx="20" cy="20" r="8" stroke="#f6a701" strokeWidth="2" />
<line x1="20" y1="2" x2="20" y2="7" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<line x1="20" y1="33" x2="20" y2="38" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<line x1="2" y1="20" x2="7" y2="20" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<line x1="33" y1="20" x2="38" y2="20" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<line x1="7" y1="7" x2="10.5" y2="10.5" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<line x1="29.5" y1="29.5" x2="33" y2="33" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<line x1="33" y1="7" x2="29.5" y2="10.5" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<line x1="10.5" y1="29.5" x2="7" y2="33" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
</svg>
);
}
function IconSunset() {
return (
<svg width="44" height="40" viewBox="0 0 44 40" fill="none">
<line x1="4" y1="30" x2="40" y2="30" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<path d="M13 30a9 9 0 0 1 18 0" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<line x1="22" y1="35" x2="22" y2="30" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<line x1="9" y1="35" x2="13" y2="31" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<line x1="35" y1="35" x2="31" y2="31" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
</svg>
);
}
// Same checkmark used by /7-tage-klarheits-check's "Das erwartet dich"
// checklist.
function Check() {
return (
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" className="shrink-0 mt-1">
<path d="M3 9.5l4 4L15 4" stroke="#f6a701" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}
const phases = [
{
icon: <IconSunrise />,
title: "Der Morgen: Ausprobieren",
desc: "Man probiert aus, lernt, macht Fehler, entdeckt Interessen. Man muss noch nicht alles perfekt können.",
},
{
icon: <IconGrowthBars />,
title: "Der Vormittag: Aufbauen",
desc: "Jetzt wird gebaut – Gewohnheiten, Beziehungen, Fähigkeiten. Ein Leben, das sich nach dem eigenen anfühlt.",
},
{
icon: <IconSunHigh />,
title: "Der Nachmittag: Stärken",
desc: "Nicht alles neu, sondern das Bestehende wird stärker: Erfahrung zahlt sich aus, Entscheidungen fallen leichter.",
},
{
icon: <IconSunset />,
title: "Der Abend: Weitergeben",
desc: "Weniger Wachstum, mehr Bedeutung – weiterzugeben, was man aufgebaut hat.",
},
];
const questions = [
"Wie spät ist es gerade in meinem Leben?",
"Was passt eigentlich zu dieser Tageszeit?",
"Und welche Aufgabe schleppe ich noch mit mir herum, obwohl sie zu einer früheren Stunde gehört?",
];
const lebensuhrRows: [string, string][] = [
["10", "02:40 Uhr"],
["20", "05:20 Uhr"],
@@ -130,98 +217,113 @@ export default function LebensuhrPage() {
<H2>Warum die Lebensuhr mehr zeigt als dein Alter</H2>
<P>
Viele Menschen haben nicht das Gefühl, zu wenig Zeit zu haben. Sie haben das Gefühl, nicht
dort zu sein, wo sie sein wollten. Das sind zwei völlig unterschiedliche Dinge. Man kann
morgens schon erschöpft sein oder abends voller Energie – die Uhr erklärt nicht, wie du dich
fühlst, sie zeigt nur, wie viel Tag noch vor dir liegt.
Viele Menschen haben gar nicht das Gefühl, zu wenig Zeit zu haben. Sie haben das Gefühl,
nicht dort zu sein, wo sie sein wollten. Zwei verschiedene Dinge. Man kann morgens schon
erschöpft sein oder abends voller Energie – die Uhr sagt nichts darüber, wie du dich fühlst,
nur wie viel Tag noch vor dir liegt.
</P>
<P>Die spannendere Frage lautet deshalb: Lebst du gerade so, wie es zu deiner Tageszeit passt?</P>
<P>
Und gleich vorweg: Die Lebensuhr ist kein Fahrplan. Sie sagt dir nicht, was du zu tun hast,
nur weil du an einem bestimmten Punkt stehst. Manche fangen mit 45 nochmal komplett neu an,
manche bauen mit 60 ihr erstes eigenes Ding auf. Die Uhr zeigt eine Tendenz, keine Vorschrift.
</P>
<P>
Sie bewertet auch nicht. Sie sagt nicht, ob du "weiter" bist als andere. Sie sagt nur, welche
Art von Aufgabe in deiner aktuellen Lebensphase besonders gut zu dir passen könnte. Genau wie
ein Vormittag nicht besser ist als ein Abend – sondern einfach anders.
Die Lebensuhr ist dabei kein Fahrplan. Sie schreibt dir nichts vor, nur weil du an einem
bestimmten Punkt stehst – manche fangen mit 45 nochmal komplett neu an, manche bauen mit 60
ihr erstes eigenes Ding auf. Sie zeigt eine Tendenz, keine Vorschrift, und sie bewertet auch
nicht, ob du "weiter" bist als andere. Sie zeigt nur, welche Art von Aufgabe in deiner
aktuellen Phase gut zu dir passen könnte. Ein Vormittag ist schließlich auch nicht besser als
ein Abend – nur anders.
</P>
<H2>Was zu welcher Lebensphase passt</H2>
<P>
Ein Morgen sieht anders aus als ein Nachmittag. Nicht besser, nicht schlechter, einfach
anders. Und diese Aufgaben halten sich nicht immer strikt an die Uhr: Manchmal probiert man
am Nachmittag noch einmal etwas komplett Neues aus, manchmal beginnt man morgens schon,
etwas weiterzugeben. Die folgenden Zuordnungen sind ein Muster, kein Gesetz – nimm dir davon,
was zu deiner Situation passt, und lass den Rest liegen.
Diese Zuordnungen halten sich nicht strikt an die Uhr – manchmal probiert man am Nachmittag
nochmal etwas komplett Neues aus, manchmal gibt man schon morgens etwas weiter. Sie sind ein
Muster, kein Gesetz: Nimm dir davon, was zu deiner Situation passt.
</P>
</Reveal>
<H3>Der Morgen: Ausprobieren</H3>
<P>
Am Morgen probiert man aus, man lernt, man macht Fehler, man entdeckt Interessen. Man muss
noch nicht alles perfekt können.
</P>
{/* Full-width StepArrow row — same pattern as /7-tage-klarheits-check's
"So funktioniert" section, reused here for the four life phases
instead of stacking them as plain headings. */}
<section className="bg-bg-muted w-full py-10 lg:py-14">
<div className="px-8 lg:px-[5rem] max-w-[1280px] mx-auto">
<RevealGroup className="flex flex-col lg:flex-row items-center lg:items-start gap-8 lg:gap-2 w-full">
{phases.flatMap((phase, i) => [
<RevealItem key={phase.title} 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">
{phase.icon}
</div>
<div className="flex flex-col gap-1 text-center">
<p className="font-semibold text-text-primary text-[1rem]">{phase.title}</p>
<p className="text-[0.875rem] text-text-muted leading-[1.5]">{phase.desc}</p>
</div>
</RevealItem>,
i < phases.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>
<H3>Der Vormittag: Aufbauen</H3>
<P>
Jetzt wird gebaut – Gewohnheiten, Beziehungen, Fähigkeiten. Vielleicht eine Familie,
vielleicht ein Unternehmen, vielleicht einfach ein Leben, das sich nach dem eigenen anfühlt.
</P>
<H3>Der Nachmittag: Stärken</H3>
<P>
Jetzt beginnt das Spannende. Nicht alles neu, sondern das Bestehende wird stärker: Erfahrung
zahlt sich aus, Netzwerke tragen, Entscheidungen fallen leichter.
</P>
<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">
<Quote>
Wer hier immer wieder bei null anfängt, verschenkt oft das Wertvollste, was er besitzt – den
Zinseszins des eigenen Lebens.
Wer am Nachmittag immer wieder bei null anfängt, verschenkt oft das Wertvollste, was er
besitzt – den Zinseszins des eigenen Lebens.
</Quote>
<H3>Der Abend: Weitergeben</H3>
<P>
Es geht weniger um Wachstum, mehr um Bedeutung, mehr um Menschen, mehr darum, weiterzugeben,
was man aufgebaut hat. Nicht, weil nichts Neues mehr möglich wäre, sondern weil manche Dinge
erst mit der Zeit ihren eigentlichen Wert bekommen.
</P>
<H2>Produktivität beginnt mit der richtigen Lebensphase</H2>
<P>
Eines der größten Missverständnisse liegt vielleicht genau hier: Wir behandeln jede
Lebensphase gleich – immer schneller, immer mehr, immer weiter. Dabei erwarten wir von einem
Abend dieselbe Dynamik wie von einem frühen Morgen. Das funktioniert weder an einem einzigen
Tag noch in einem ganzen Leben.
Wir behandeln oft jede Lebensphase gleich – immer schneller, immer mehr, immer weiter. Dabei
erwarten wir von einem Abend dieselbe Dynamik wie von einem frühen Morgen. Das funktioniert
weder an einem einzigen Tag noch in einem ganzen Leben.
</P>
<P>
Produktivität bedeutet für mich deshalb etwas anderes: das Richtige zur richtigen Zeit zu
tun. Nicht ständig neu anzufangen, wenn es Zeit wäre, etwas wachsen zu lassen. Nicht
krampfhaft festzuhalten, wenn es Zeit wäre, loszulassen. Und nicht darauf zu warten, dass
irgendwann "der richtige Moment" kommt – denn die Wahrheit ist: Du lebst bereits in ihm.
krampfhaft festzuhalten, wenn es Zeit wäre, loszulassen. Und nicht auf "den richtigen
Moment" warten – du lebst bereits in ihm.
</P>
<H2>Drei Fragen für deine persönliche Lebensuhr</H2>
<P>
Schau heute Abend noch einmal auf deine Uhr. Nicht auf die am Handgelenk, sondern auf deine
Lebensuhr. Frag dich nur drei Dinge:
</P>
<ul className="flex flex-col gap-2 text-body text-text-body list-disc pl-5">
<li>Wie spät ist es gerade in meinem Leben?</li>
<li>Was passt eigentlich zu dieser Tageszeit?</li>
<li>Und welche Aufgabe schleppe ich noch mit mir herum, obwohl sie zu einer früheren Stunde gehört?</li>
<P>Schau heute Abend noch mal auf deine Uhr. Nicht die am Handgelenk – deine Lebensuhr.</P>
<ul className="flex flex-col gap-3">
{questions.map((q) => (
<li key={q} className="flex items-start gap-3">
<Check />
<p className="text-body text-text-body">{q}</p>
</li>
))}
</ul>
<P>
Vielleicht zeigt dir die Lebensuhr heute nicht, dass du dich beeilen musst. Vielleicht zeigt
sie dir etwas viel Wertvolleres: dass genau jetzt die richtige Zeit für das ist, was gerade
vor dir liegt. Und manchmal reicht diese Erkenntnis schon, um den nächsten Schritt mit
deutlich mehr Klarheit zu gehen.
</P>
<P>
Wenn du danach Lust hast, dieser Klarheit sieben Tage lang nachzugehen, findest du im{" "}
<Link href="/7-tage-klarheits-check" className="text-brand hover:underline">
7-Tage-Klarheits-Check
</Link>{" "}
einen ruhigen Einstieg dafür.
Vielleicht zeigt dir die Lebensuhr heute nicht, dass du dich beeilen musst – sondern dass
genau jetzt die richtige Zeit für das ist, was vor dir liegt. Manchmal reicht das schon, um
den nächsten Schritt klarer zu gehen.
</P>
{/* Same bordered CTA-card treatment as the blog's "Passend dazu"
link — more click surface and visibility than a plain inline
text link. */}
<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">Ein ruhiger Einstieg, sieben Tage lang.</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 />