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:
@@ -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)" }}
|
||||
|
||||
Reference in New Issue
Block a user