Add /lebensuhr article page
Content page about the "life clock" concept, ending with an internal link to /7-tage-klarheits-check. Styled by hand (headings/quote match RichText.tsx's converter output) since it's not CMS-backed content.
This commit is contained in:
Marco
@@ -0,0 +1,230 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { Reveal } from "../components/Reveal";
|
||||
import { Footer } from "../components/Footer";
|
||||
|
||||
const title = "Die Lebensuhr: Wie spät ist es in deinem Leben?";
|
||||
const description =
|
||||
"Wie spät ist es eigentlich in deinem Leben? Die Lebensuhr zeigt dir, wo du gerade stehst – und was in dieser Phase wirklich zählt.";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title,
|
||||
description,
|
||||
alternates: { canonical: "/lebensuhr" },
|
||||
openGraph: {
|
||||
title,
|
||||
description,
|
||||
url: "/lebensuhr",
|
||||
type: "article",
|
||||
},
|
||||
twitter: {
|
||||
title,
|
||||
description,
|
||||
},
|
||||
};
|
||||
|
||||
// Same "H2 with brand underline" treatment RichText.tsx's heading
|
||||
// converter uses for CMS-driven content — this page is hand-written (no
|
||||
// Payload post backs it, it lives at the plain /lebensuhr slug, not
|
||||
// /blog/…), so the styling is copied by hand instead of shared.
|
||||
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 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>;
|
||||
}
|
||||
|
||||
// Same visual language as RichText.tsx's Quote component (Caveat script +
|
||||
// brand divider) — copied rather than imported since that component is
|
||||
// tied to the CMS quoteLabel prop this static page has no use for.
|
||||
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 lebensuhrRows: [string, string][] = [
|
||||
["10", "02:40 Uhr"],
|
||||
["20", "05:20 Uhr"],
|
||||
["30", "08:00 Uhr"],
|
||||
["40", "10:40 Uhr"],
|
||||
["50", "13:20 Uhr"],
|
||||
["60", "16:00 Uhr"],
|
||||
["70", "18:40 Uhr"],
|
||||
["80", "21:20 Uhr"],
|
||||
];
|
||||
|
||||
export default function LebensuhrPage() {
|
||||
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">Lebensuhr</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)" }}
|
||||
>
|
||||
Die Lebensuhr: Wie spät ist es eigentlich in deinem Leben?
|
||||
</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">
|
||||
<P>Wie spät ist es eigentlich in deinem Leben?</P>
|
||||
<P>Keine philosophische Frage. Eine überraschend praktische.</P>
|
||||
<P>
|
||||
Wir planen unsere Tage bis auf die Stunde. Wir blocken Meetings, setzen Erinnerungen und
|
||||
schreiben To-do-Listen. Aber kaum jemand weiß, wie er seine aktuelle Lebensphase eigentlich
|
||||
nutzen möchte.
|
||||
</P>
|
||||
|
||||
<H2>Die Lebensuhr: Dein Leben in 24 Stunden</H2>
|
||||
<P>
|
||||
Stell dir vor, dein ganzes Leben wäre auf einen einzigen Tag mit 24 Stunden komprimiert.
|
||||
Wirst du 90 Jahre alt, sieht das ungefähr so aus:
|
||||
</P>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
<th className="py-2 pr-4 font-semibold text-body-sm text-text-muted uppercase tracking-wide">Alter</th>
|
||||
<th className="py-2 font-semibold text-body-sm text-text-muted uppercase tracking-wide">Uhrzeit</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{lebensuhrRows.map(([alter, uhrzeit]) => (
|
||||
<tr key={alter} className="border-b border-border/60">
|
||||
<td className="py-2 pr-4 text-body text-text-body">{alter}</td>
|
||||
<td className="py-2 text-body text-text-body">{uhrzeit}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<P>Und? Wie spät ist es gerade bei dir?</P>
|
||||
|
||||
<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.
|
||||
</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.
|
||||
</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.
|
||||
</P>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<Quote>
|
||||
Wer hier 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.
|
||||
</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.
|
||||
</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>
|
||||
</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.
|
||||
</P>
|
||||
</Reveal>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user