Lebensuhr: add a purely symbolic clock icon above the headline

No numbers, no age/time data — just a clock silhouette (circle,
ticks, hands at 10:10). Every previous clock attempt tried to carry
actual data and kept going wrong; this one carries nothing, so
there's nothing to get wrong.
This commit is contained in:
Marco
2026-08-26 16:23:26 +00:00
parent 0fedb386b4
commit b26a44b979
+23
View File
@@ -58,6 +58,28 @@ function Quote({ children }: { children: React.ReactNode }) {
);
}
// Purely symbolic — no numbers, no data, just a clock silhouette above the
// headline. The earlier clock-face attempts all tried to carry the actual
// age/time data (see git history) and never quite worked; this one carries
// nothing, so there's nothing to get wrong. Hands fixed at ~10:10 (the
// classic symmetric watch-ad position), not "now".
function IconClockSymbol() {
return (
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" aria-hidden="true">
<circle cx="24" cy="24" r="21" stroke="#f6a701" strokeWidth="2" />
{[0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330].map((deg) => {
const rad = (deg * Math.PI) / 180;
const x1 = 24 + 16 * Math.sin(rad), y1 = 24 - 16 * Math.cos(rad);
const x2 = 24 + 18.5 * Math.sin(rad), y2 = 24 - 18.5 * Math.cos(rad);
return <line key={deg} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#f6a701" strokeWidth="1.5" strokeLinecap="round" />;
})}
<line x1="24" y1="24" x2="17" y2="15" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<line x1="24" y1="24" x2="32" y2="15" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<circle cx="24" cy="24" r="1.8" fill="#f6a701" />
</svg>
);
}
// 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
@@ -172,6 +194,7 @@ export default function LebensuhrPage() {
<span></span>
<span className="text-text-primary">Lebensuhr</span>
</p>
<IconClockSymbol />
<p
className="font-semibold text-[clamp(2.25rem,1.393rem+1.786vw,3rem)] text-text-primary leading-[1.15]"
style={{ fontFamily: "var(--font-playfair)" }}