3x3-system: match icon-row/StepArrow pattern used site-wide
Category cards were a standalone 3-card grid with red/amber/green accents (matching the original blog post) — out of step with how every other icon-row on the site looks. Now the same icon-above- text + StepArrow layout as /7-tage-klarheits-check's "So funktioniert" and /lebensuhr's phase row, and the icons are a single brand-orange line-icon style instead of per-category colors.
This commit is contained in:
Marco
+44
-30
@@ -3,6 +3,7 @@ import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { Reveal, RevealGroup, RevealItem } from "../components/Reveal";
|
||||
import { Footer } from "../components/Footer";
|
||||
import { StepArrow } from "../components/StepArrow";
|
||||
|
||||
const title = "Das 3×3-System: Zu wenig geschafft oder zu viel gewollt?";
|
||||
const description =
|
||||
@@ -57,29 +58,33 @@ function Quote({ children }: { children: React.ReactNode }) {
|
||||
);
|
||||
}
|
||||
|
||||
function IconTarget({ color }: { color: string }) {
|
||||
// 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 (
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
|
||||
<circle cx="14" cy="14" r="11" stroke={color} strokeWidth="2" />
|
||||
<circle cx="14" cy="14" r="6" stroke={color} strokeWidth="2" />
|
||||
<circle cx="14" cy="14" r="1.5" fill={color} />
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none">
|
||||
<circle cx="20" cy="20" r="16" stroke="#f6a701" strokeWidth="2" />
|
||||
<circle cx="20" cy="20" r="9" stroke="#f6a701" strokeWidth="2" />
|
||||
<circle cx="20" cy="20" r="2" fill="#f6a701" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function IconTrendingUp({ color }: { color: string }) {
|
||||
function IconTrendingUp() {
|
||||
return (
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
|
||||
<path d="M4 20l7-7 4 4 9-9" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M17 8h7v7" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<svg width="44" height="40" viewBox="0 0 44 40" fill="none">
|
||||
<path d="M4 30l10-10 6 6 14-14" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M24 10h10v10" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function IconShield({ color }: { color: string }) {
|
||||
function IconShield() {
|
||||
return (
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
|
||||
<path d="M14 3l9 3.5v6c0 6-4 10.5-9 12.5-5-2-9-6.5-9-12.5v-6L14 3z" stroke={color} strokeWidth="2" strokeLinejoin="round" />
|
||||
<svg width="36" height="40" viewBox="0 0 36 40" fill="none">
|
||||
<path d="M18 3l14 5v9c0 9-6 16-14 20-8-4-14-11-14-20v-9l14-5z" stroke="#f6a701" strokeWidth="2" strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -98,10 +103,10 @@ function IconGrid3x3() {
|
||||
);
|
||||
}
|
||||
|
||||
const categories: { color: string; icon: (color: string) => React.ReactNode; label: string; desc: string }[] = [
|
||||
{ color: "#ef4444", icon: (c) => <IconTarget color={c} />, label: "Verantwortung", desc: "Etwas, das erledigt werden muss und für das du Verantwortung trägst." },
|
||||
{ color: "#f59e0b", icon: (c) => <IconTrendingUp color={c} />, label: "Fortschritt", desc: "Etwas, das dich beruflich oder persönlich ein Stück weiterbringt." },
|
||||
{ color: "#22c55e", icon: (c) => <IconShield color={c} />, label: "Stabilität", desc: "Etwas, das deinen Alltag ordnet, deiner Gesundheit guttut oder Gleichgewicht schafft." },
|
||||
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." },
|
||||
{ icon: <IconShield />, label: "Stabilität", desc: "Etwas, das deinen Alltag ordnet, deiner Gesundheit guttut oder Gleichgewicht schafft." },
|
||||
];
|
||||
|
||||
export default function DreiXDreiSystemPage() {
|
||||
@@ -177,23 +182,32 @@ export default function DreiXDreiSystemPage() {
|
||||
</P>
|
||||
</Reveal>
|
||||
|
||||
{/* Full-width band, same structural role as /lebensuhr's phase-row
|
||||
section (bg-bg-muted, breaks out of the 48rem column) — plus
|
||||
the IconGrid3x3 mark as this page's own identity graphic,
|
||||
paralleling that page's clock face. */}
|
||||
{/* 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. */}
|
||||
<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-8">
|
||||
<div className="px-8 lg:px-[5rem] max-w-[1280px] mx-auto flex flex-col items-center gap-10">
|
||||
<IconGrid3x3 />
|
||||
<RevealGroup className="grid sm:grid-cols-3 gap-4 w-full max-w-[48rem]">
|
||||
{categories.map((c) => (
|
||||
<RevealItem key={c.label}>
|
||||
<div className="bg-bg-base rounded-lg p-5 flex flex-col gap-2 border-t-4 h-full" style={{ borderTopColor: c.color }}>
|
||||
{c.icon(c.color)}
|
||||
<p className="font-semibold text-text-primary">{c.label}</p>
|
||||
<p className="text-body-sm text-text-muted">{c.desc}</p>
|
||||
<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>
|
||||
</RevealItem>
|
||||
))}
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user