// Shared shell for inner discipline / careers pages. // Each page mounts with its own content. // Reuses Nav, Footer, Logo, Icon, Eyebrow from Core.jsx (loaded as globals via window). const DISCIPLINES = [ { k: "platform-engineering", num: "01", title: "Platform Engineering", sub: "smooth ops, happy devs", icon: "layers" }, { k: "devex", num: "02", title: "Developer Experience", sub: "happy developers · better products", icon: "git-branch" }, { k: "data", num: "03", title: "Data Engineering", sub: "data that delivers", icon: "database" }, { k: "ai", num: "04", title: "AI & Machine Learning", sub: "AI that empowers people", icon: "zap" }, { k: "transformation", num: "05", title: "Tech Transformations", sub: "ecosystems in harmony", icon: "aperture" }, ]; // ---------- Discipline page hero — EDITORIAL variant ---------- const DiscHeroEditorial = ({num, eyebrow, title, lede, body}) => (
// discipline / {num} {eyebrow}

{title}

{lede}

{body && (

{body}

)}
); // ---------- Discipline page hero — TERMINAL variant (V5-style split) ---------- // Tiny self-contained terminal log keyed to the discipline so each page reads differently. const DiscTerminalLog = ({lines}) => { const safeLines = Array.isArray(lines) ? lines.filter(Boolean) : []; const [shown, setShown] = React.useState([]); const [tick, setTick] = React.useState(0); // Stable signature so we re-run the typewriter only when content actually changes, // not on every parent re-render (the parent ticks once per second for the ●/○ pulse). const sig = React.useMemo( () => safeLines.map(l => `${l?.k||""}|${l?.t||""}`).join("\n"), // eslint-disable-next-line [JSON.stringify(safeLines)] ); React.useEffect(() => { setShown([]); let i = 0; let alive = true; const tick1 = () => { if (!alive) return; if (i >= safeLines.length) return; const next = safeLines[i]; i += 1; if (next) setShown(s => [...s, next]); timer = setTimeout(tick1, 480 + Math.random() * 320); }; let timer = setTimeout(tick1, 600); return () => { alive = false; clearTimeout(timer); }; // eslint-disable-next-line }, [sig]); React.useEffect(() => { const t = setInterval(() => setTick(x => x + 1), 1100); return () => clearInterval(t); }, []); const cursor = tick % 2 === 0 ? "▌" : " "; return (
~/devleaps · zsh
{shown.filter(Boolean).map((l, i) => (
{l.k === "cmd" && <>$ {l.t}} {l.k === "out" && {l.t}} {l.k === "ok" && <>✓ {l.t}} {l.k === "warn"&& <>! {l.t}}
))} {shown.length >= safeLines.length && safeLines.length > 0 && (
$ {cursor}
)}
); }; const DiscHeroTerminal = ({num, eyebrow, title, lede, body, terminal}) => { const [tick, setTick] = React.useState(0); React.useEffect(() => { const t = setInterval(() => setTick(x => x + 1), 1200); return () => clearInterval(t); }, []); const dot = tick % 2 === 0 ? "●" : "○"; return (
{dot} // discipline / {num} · {eyebrow.replace(/^\/\/\s*/, "")}

{title}

{lede}

{body &&

{body}

}
); }; // Generic fallback if a page doesn't pass terminal lines. const DEFAULT_TERMINAL = [ { k:"cmd", t:"devleaps engage --discipline" }, { k:"out", t:"› reading context · stakeholders · existing systems" }, { k:"ok", t:"baseline captured" }, { k:"cmd", t:"devleaps plan --duration 2w" }, { k:"out", t:"› drafting paved roads · risks · cost model" }, { k:"ok", t:"plan ready" }, { k:"cmd", t:"devleaps ship --first-value" }, ]; // Switching wrapper used by sub-pages — reads variant from SubPageCtx if not passed. const DiscHero = (props) => { const ctx = React.useContext(SubPageCtx); const variant = props.heroVariant || ctx.heroVariant || "editorial"; if (variant === "terminal") return ; return ; }; // ---------- Question pillars ---------- const QuestionBlock = ({eyebrow, title, items}) => (
{eyebrow}
{title &&

{title}

}
{items.map((it, i) => (
// {String(i+1).padStart(2,"0")}

{it.k}

{it.d}

))}
); // ---------- Capability cards (numbered grid) ---------- const Capabilities = ({eyebrow, title, items, columns = 2}) => (
{eyebrow}

{title}

{items.map((it, i) => { const col = i % columns; const row = Math.floor(i / columns); const lastRow = Math.floor((items.length-1) / columns); return (
// {it.n || String(i+1).padStart(2,"0")} {it.tag && {it.tag}}

{it.t}

{it.d}

{it.bullets && (
    {it.bullets.map((b, j) => (
  • › {b}
    • ))}
)}
); })}
); // ---------- Process strip (horizontal phases) ---------- const ProcessStrip = ({eyebrow, title, phases, dark = true}) => (
{dark &&
}
{eyebrow}

{title}

{phases.map((p, i) => (
{String(i+1).padStart(2,"0")} ─

{p.t}

{p.d &&

{p.d}

}
))}
); // ---------- Plain prose section ---------- const Prose = ({eyebrow, title, paragraphs, blockquote}) => (
{eyebrow &&
{eyebrow}
} {title &&

{title}

} {paragraphs?.map((p, i) => (

{p}

))} {blockquote && (
{blockquote}
)}
); // ---------- Big CTA ---------- const PageCTA = ({eyebrow, title, body, btn = "Let's talk"}) => (
{eyebrow}

{title}

{body &&

{body}

}
); // ---------- Sibling discipline navigation ---------- const SiblingNav = ({current}) => { const others = DISCIPLINES.filter(d => d.k !== current); return (
// other disciplines
); }; // ---------- Floating sub-page controls (theme + hero variant) ---------- const SUB_THEMES = [ { k:"black", name:"Black/Red" }, { k:"green", name:"Green/Red" }, { k:"light", name:"Black/Blue" }, { k:"blue", name:"Blue/Blue" }, ]; const SUB_VARIANTS = [ { k:"editorial", name:"Editorial", sub:"Oversized type · full-bleed" }, { k:"terminal", name:"Terminal", sub:"Split hero · live log" }, ]; const SubControls = ({theme, onTheme, variant, onVariant}) => { const [collapsed, setCollapsed] = React.useState(false); const seg = (active) => ({ background: active ? "rgba(255,255,255,.14)" : "transparent", color: active ? "#fff" : "rgba(255,255,255,.6)", border:"none", padding:"7px 11px", cursor:"pointer", fontFamily:"inherit", fontSize:11, letterSpacing:"0.06em", textTransform:"uppercase", transition:"all 160ms", whiteSpace:"nowrap" }); const accent = (active) => ({ ...seg(active), background: active ? "var(--accent)" : "transparent", color: active ? "var(--accent-fg)" : "rgba(255,255,255,.65)", }); const groupBox = {display:"inline-flex", border:"1px solid rgba(255,255,255,.16)", borderRadius:2, overflow:"hidden"}; const div = (i, last) => ({borderRight: i < last ? "1px solid rgba(255,255,255,.14)" : "none"}); if (collapsed) { return ( ); } return (
hero
{SUB_VARIANTS.map((v, i) => ( ))}
theme
{SUB_THEMES.map((t, i) => ( ))}
); }; // Context so DiscHero can read the active variant without prop-drilling. const SubPageCtx = React.createContext({heroVariant:"editorial"}); // ---------- Top-level page wrapper ---------- // Production: theme from prop, defaultHero variant, no control panels. const InnerPage = ({theme:initialTheme = "green", current, defaultHero = "editorial", children}) => { const heroVariant = defaultHero; React.useEffect(() => { document.documentElement.dataset.theme = initialTheme; }, [initialTheme]); return (