diff --git a/app/3x3-system/page.tsx b/app/3x3-system/page.tsx index ce8ca6b..354cd78 100644 --- a/app/3x3-system/page.tsx +++ b/app/3x3-system/page.tsx @@ -4,6 +4,7 @@ import Image from "next/image"; import { Reveal, RevealGroup, RevealItem } from "../components/Reveal"; import { Footer } from "../components/Footer"; import { StepArrow } from "../components/StepArrow"; +import { STEP_ICONS } from "../components/icons/StepIcons"; const title = "Das 3×3-System: Zu wenig geschafft oder zu viel gewollt?"; const description = @@ -58,41 +59,10 @@ function Quote({ children }: { children: React.ReactNode }) { ); } -// Same brand-orange line-icon language as /lebensuhr's IconSunrise etc. — -// switched from per-category red/amber/green (matching the original blog -// post's 🔴🟡🟢) to a single brand color, for consistency with every -// other icon-row on the site, none of which color-code their icons. -function IconTarget() { - return ( - - - - - - ); -} - -function IconTrendingUp() { - return ( - - - - - ); -} - -function IconShield() { - return ( - - - - ); -} - const categories = [ - { icon: , label: "Verantwortung", desc: "Etwas, das erledigt werden muss und für das du Verantwortung trägst." }, - { icon: , label: "Fortschritt", desc: "Etwas, das dich beruflich oder persönlich ein Stück weiterbringt." }, - { icon: , label: "Stabilität", desc: "Etwas, das deinen Alltag ordnet, deiner Gesundheit guttut oder Gleichgewicht schafft." }, + { icon: STEP_ICONS.target(), label: "Verantwortung", desc: "Etwas, das erledigt werden muss und für das du Verantwortung trägst." }, + { icon: STEP_ICONS.trendingUp(), label: "Fortschritt", desc: "Etwas, das dich beruflich oder persönlich ein Stück weiterbringt." }, + { icon: STEP_ICONS.shield(), label: "Stabilität", desc: "Etwas, das deinen Alltag ordnet, deiner Gesundheit guttut oder Gleichgewicht schafft." }, ]; export default function DreiXDreiSystemPage() { diff --git a/app/7-tage-klarheits-check/page.tsx b/app/7-tage-klarheits-check/page.tsx index 5f966fc..b90db15 100644 --- a/app/7-tage-klarheits-check/page.tsx +++ b/app/7-tage-klarheits-check/page.tsx @@ -5,6 +5,7 @@ import { draftMode } from "next/headers"; import { Footer } from "../components/Footer"; import { Reveal, RevealGroup, RevealItem } from "../components/Reveal"; import { StepArrow } from "../components/StepArrow"; +import { STEP_ICONS } from "../components/icons/StepIcons"; import { TestimonialsGrid } from "../components/TestimonialsGrid"; import { LiveTestimonialsGrid } from "../components/LiveTestimonialsGrid"; import { getTestimonials } from "../lib/payload"; @@ -33,49 +34,6 @@ export const metadata: Metadata = { }, }; -function IconEnvelope() { - return ( - - - - - ); -} - -function IconMailLines() { - return ( - - - - - - - - ); -} - -function IconNotepad() { - return ( - - - - - - - - - ); -} - -function IconCheckCircle() { - return ( - - - - - ); -} - function Check() { return ( @@ -86,22 +44,22 @@ function Check() { const steps = [ { - icon: , + icon: STEP_ICONS.envelope(), title: "1. Anmelden", desc: "Trage dich mit deiner E-Mail-Adresse ein und starte sofort.", }, { - icon: , + icon: STEP_ICONS.mailLines(), title: "2. E-Mail erhalten", desc: "Du bekommst 7 Tage lang jeweils einen Impuls direkt in dein Postfach.", }, { - icon: , + icon: STEP_ICONS.notepad(), title: "3. Umsetzen", desc: "Gehe die einfachen Gedankenanstöße in wenigen Minuten durch – für mehr Klarheit und Fokus", }, { - icon: , + icon: STEP_ICONS.checkCircle(), title: "4. Dranbleiben", desc: "Kleine Schritte führen zu großen Veränderungen – Tag für Tag.", }, diff --git a/app/components/icons/StepIcons.tsx b/app/components/icons/StepIcons.tsx new file mode 100644 index 0000000..3ff81b4 --- /dev/null +++ b/app/components/icons/StepIcons.tsx @@ -0,0 +1,133 @@ +// Shared registry of the site's hand-drawn brand-line icons, used by +// StepArrow-connected icon rows (/lebensuhr's phase row, /3x3-system's +// category row, /7-tage-klarheits-check's "So funktioniert"). Previously +// each page defined its own copy of these locally — consolidated here so +// the Payload page-builder's `stepRow` block can select one by a fixed +// key (see PageBlocks.tsx), and so the icons aren't duplicated per page +// anymore. The Payload StepRowBlock's `icon` select options MUST stay in +// sync with STEP_ICON_KEYS below by hand — no automatic sync between the +// two repos. + +function IconSunrise() { + return ( + + + + + + + + ); +} + +function IconGrowthBars() { + return ( + + + + + + + ); +} + +function IconSunHigh() { + return ( + + + + + + + + + + + + ); +} + +function IconEnvelope() { + return ( + + + + + ); +} + +function IconMailLines() { + return ( + + + + + + + + ); +} + +function IconNotepad() { + return ( + + + + + + + + + ); +} + +function IconCheckCircle() { + return ( + + + + + ); +} + +function IconTarget() { + return ( + + + + + + ); +} + +function IconTrendingUp() { + return ( + + + + + ); +} + +function IconShield() { + return ( + + + + ); +} + +// Keys MUST match the Payload StepRowBlock's `icon` select field options +// (docker/payload/src/blocks/StepRowBlock.ts) exactly. +export const STEP_ICONS: Record React.ReactNode> = { + sunrise: IconSunrise, + growthBars: IconGrowthBars, + sunHigh: IconSunHigh, + envelope: IconEnvelope, + mailLines: IconMailLines, + notepad: IconNotepad, + checkCircle: IconCheckCircle, + target: IconTarget, + trendingUp: IconTrendingUp, + shield: IconShield, +}; diff --git a/app/lebensuhr/page.tsx b/app/lebensuhr/page.tsx index 09cbebd..0ab2aa2 100644 --- a/app/lebensuhr/page.tsx +++ b/app/lebensuhr/page.tsx @@ -3,6 +3,7 @@ import Link from "next/link"; import { Reveal, RevealGroup, RevealItem } from "../components/Reveal"; import { Footer } from "../components/Footer"; import { StepArrow } from "../components/StepArrow"; +import { STEP_ICONS } from "../components/icons/StepIcons"; const title = "Die Lebensuhr: Wie spät ist es in deinem Leben?"; const description = @@ -84,45 +85,6 @@ function IconClockSymbol() { // "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 ( - - - - - - - - ); -} - -function IconGrowthBars() { - return ( - - - - - - - ); -} - -function IconSunHigh() { - return ( - - - - - - - - - - - - ); -} - // Same checkmark used by /7-tage-klarheits-check's "Das erwartet dich" // checklist. function Check() { @@ -140,19 +102,19 @@ function Check() { // breakpoints), not derived from it. const phases = [ { - icon: , + icon: STEP_ICONS.sunrise(), title: "Der Morgen: Ausprobieren", ageRange: "ca. 0–25 Jahre", desc: "Man probiert aus, lernt, macht Fehler, entdeckt Interessen. Man muss noch nicht alles perfekt können.", }, { - icon: , + icon: STEP_ICONS.growthBars(), title: "Der Vormittag: Aufbauen", ageRange: "ca. 25–45 Jahre", desc: "Jetzt wird gebaut – Gewohnheiten, Beziehungen, Fähigkeiten. Ein Leben, das sich nach dem eigenen anfühlt.", }, { - icon: , + icon: STEP_ICONS.sunHigh(), title: "Der Nachmittag: Stärken", ageRange: "ca. 45–65 Jahre", desc: "Nicht alles neu, sondern das Bestehende wird stärker: Erfahrung zahlt sich aus, Entscheidungen fallen leichter.", @@ -160,7 +122,7 @@ const phases = [ { // Same icon as the morning — a rising and a setting sun both show as // the same arc-above-the-horizon silhouette, rays above it. - icon: , + icon: STEP_ICONS.sunrise(), title: "Der Abend: Weitergeben", ageRange: "ca. 65–90 Jahre", desc: "Weniger Wachstum, mehr Bedeutung – weiterzugeben, was man aufgebaut hat.",