Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

3x3-system: pull the category row back into the article column

Browse Source 
The full-width bg-bg-muted band made the three categories read as
a disconnected banner, separate from the paragraph right above it
introducing them. Now inline in the same 48rem column as the rest
of the article — still icon-above-text with StepArrow connectors,
just not broken out into its own section anymore.
This commit is contained in:
Marco
2026-08-26 16:24:13 +00:00
parent b26a44b979
commit cf5d7f8739
1 changed files with 25 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/3x3-system/page.tsx
+25 -28
View File
@@ -159,36 +159,33 @@ export default function DreiXDreiSystemPage() {
Kein großes System – eher der Versuch, dem Tag eine klare Richtung zu geben. Statt zehn
Prioritäten gleichzeitig treffe ich drei bewusste Entscheidungen, verteilt auf drei Bereiche:
</P>
</Reveal>
{/* 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. */}
<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">
<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">
<div className="flex items-center justify-center w-16 h-14 shrink-0 transition-transform duration-300 group-hover:scale-110">
{c.icon}
</div>
<div className="flex flex-col gap-1 text-center">
<p className="font-semibold text-text-primary text-[1rem]">{c.label}</p>
<p className="text-[0.875rem] text-text-muted leading-[1.5]">{c.desc}</p>
</div>
</RevealItem>,
i < categories.length - 1 ? (
<div key={`arrow-${i}`} className="flex items-center justify-center shrink-0 lg:mt-5">
<StepArrow className="w-8 h-8 rotate-90 lg:w-10 lg:h-4 lg:rotate-0" />
</div>
) : null,
])}
</RevealGroup>
</div>
</section>
{/* Same icon-above-text/StepArrow row treatment as
/7-tage-klarheits-check's "So funktioniert" section and
/lebensuhr's phase row — but inline in the article column
now, not broken out into its own full-width bg-bg-muted
band. That band made it read as a separate banner,
disconnected from the paragraph right above it explaining
what these three things are. */}
<RevealGroup className="flex flex-col sm:flex-row items-center sm:items-start gap-6 sm:gap-2 w-full py-2">
{categories.flatMap((c, i) => [
<RevealItem key={c.label} className="group flex flex-col items-center gap-3 flex-1 min-w-0">
<div className="flex items-center justify-center w-14 h-12 shrink-0 transition-transform duration-300 group-hover:scale-110">
{c.icon}
</div>
<div className="flex flex-col gap-1 text-center">
<p className="font-semibold text-text-primary text-[1rem]">{c.label}</p>
<p className="text-[0.875rem] text-text-muted leading-[1.5]">{c.desc}</p>
</div>
</RevealItem>,
i < categories.length - 1 ? (
<div key={`arrow-${i}`} className="flex items-center justify-center shrink-0 sm:mt-4">
<StepArrow className="w-8 h-8 rotate-90 sm:w-10 sm:h-4 sm:rotate-0" />
</div>
) : null,
])}
</RevealGroup>
<Reveal delay={0.1} className="w-full max-w-[48rem] mx-auto px-[var(--layout-padding-x)] pt-10 pb-14 flex flex-col gap-5">
<P>Mehr kommt nicht auf diese Liste.</P>
{/* Same rounded-xl framed-image treatment /7-tage-klarheits-check's