Simplify: strip clock clutter, drop 3x3-system's decorative dot-grid icon

Lebensuhr clock: each of the 8 points had 3 stacked text lines (age,
time, vorm./nachm.) plus a leader line — too much text crammed
around a small dial. Down to just the age number per point; the
matching time is one glance away in the table.

3x3-system: removed the IconGrid3x3 decorative mark per explicit
feedback that it added nothing.
This commit is contained in:
Marco
2026-08-26 16:05:49 +00:00
parent 5e48b67588
commit 3be8682e1a
2 changed files with 22 additions and 52 deletions
+1 -18
View File
@@ -89,20 +89,6 @@ function IconShield() {
);
}
// Small decorative mark — same role the clock face plays on
// /lebensuhr/page.tsx (a page-identity graphic, not carrying any
// information of its own). A literal 3×3 dot grid.
function IconGrid3x3() {
const positions = [0, 1, 2].flatMap((row) => [0, 1, 2].map((col) => [row, col] as const));
return (
<svg width="44" height="44" viewBox="0 0 44 44" aria-hidden="true">
{positions.map(([row, col]) => (
<circle key={`${row}-${col}`} cx={7 + col * 15} cy={7 + row * 15} r="4" fill="var(--color-brand)" />
))}
</svg>
);
}
const categories = [
{ icon: <IconTarget />, label: "Verantwortung", desc: "Etwas, das erledigt werden muss und für das du Verantwortung trägst." },
{ icon: <IconTrendingUp />, label: "Fortschritt", desc: "Etwas, das dich beruflich oder persönlich ein Stück weiterbringt." },
@@ -185,12 +171,9 @@ export default function DreiXDreiSystemPage() {
{/* Full-width band, same structural role AND same icon-above-text/
StepArrow row treatment as /7-tage-klarheits-check's "So
funktioniert" section and /lebensuhr's phase row — a plain
3-card grid here read out of place next to those. IconGrid3x3
stays as this page's own identity graphic, paralleling
/lebensuhr's clock face. */}
3-card grid here read out of place next to those. */}
<section className="bg-bg-muted w-full py-10 lg:py-14">
<div className="px-8 lg:px-[5rem] max-w-[1280px] mx-auto flex flex-col items-center gap-10">
<IconGrid3x3 />
<RevealGroup className="flex flex-col lg:flex-row items-center lg:items-start gap-8 lg:gap-2 w-full">
{categories.flatMap((c, i) => [
<RevealItem key={c.label} className="group flex flex-col items-center gap-4 lg:gap-5 flex-1 min-w-0">