// Shift10 Landingpage — So funktioniert's (process) // Dark-mode mirror of the Problem section: centered intro + 3 cards, each with // a step-appropriate animation: // - 01 Verstehen → process map: nodes pulse in sequence + traveling signal (analyzing) // - 02 Ausprobieren → terminal: commands type, run, scroll up (testing on the machine) // - 03 Einführen → checklist: items get checked off one by one (autonomous launch) function ProcessSection() { const lp = useSanityLP(); const sanitySteps = lp?.processSteps || []; const steps = [ { n: "01", verb: "Verstehen", cta: "Workshop buchen", body: "Wir schauen uns eure Prozesse an und zeigen, wo KI konkret hilft. 2 Freitagnachmittage, kein Frontalunterricht — echte Arbeit an euren Fällen.", meta: ["2× Freitagnachmittag", "Vor Ort", "Auf euch Abgestimmt"], anim: "map", icon: (c) => }, { n: "02", verb: "Ausprobieren", cta: "KI-Maschine nutzen", body: "Nach dem Workshop steht eine Mac-Mini-Station mit allen Premium-KI-Tools 1 Woche bei euch im Büro. Einfach machen — ohne Abo.", meta: ["1 Woche im Office", "10+ Premium-Tools", "Kein Abo nötig"], anim: "terminal", icon: (c) => }, { n: "03", verb: "Einführen", cta: "Selber loslegen", body: "Euer Team erhält ein Big Picture wie Ihr gemeinsam mit Eurer IT in die KI-Welt einsteigen könnt.\n\n", meta: ["Eigene Roadmap erstellen", "KI Reifegrade und Fähigkeiten", "Optional: Konzepte und Enabling-Massnahmen"], anim: "checklist", icon: (c) => }]; // ─── Animation 1: process map — nodes pulse + signal travels along edges ─── const MapBackdrop = () => { // 6 nodes laid out as a small graph; lines are stroke-dashed signals const nodes = [ { x: 28, y: 30, d: 0.0 }, { x: 92, y: 60, d: 0.4 }, { x: 156, y: 30, d: 0.8 }, { x: 60, y: 110, d: 1.6 }, { x: 124, y: 110, d: 2.0 }, { x: 188, y: 80, d: 2.4 }]; const edges = [ [0, 1], [1, 2], [1, 3], [3, 4], [4, 5], [2, 5]]; return ( ); }; // ─── Animation 2: terminal — commands type, run, scroll up ─── const TerminalBackdrop = () => { const lines = [ { p: "$ ", c: "tools/list --premium", t: 0, o: "» 12 tools available" }, { p: "$ ", c: "demo run \"invoice-extract\"", t: 1.2, o: "» extracted 47 fields" }, { p: "$ ", c: "compare gpt-4 claude llama", t: 2.6, o: "» benchmark complete" }, { p: "$ ", c: "deploy --pilot team-finance", t: 4.0, o: "» pilot active" }, { p: "$ ", c: "metrics --week", t: 5.4, o: "» 6.2h saved / user" }]; return ( ); }; // ─── Animation 3: checklist — items get checked off one by one ─── const ChecklistBackdrop = () => { const items = [ "KI-Policy verabschiedet", "Tool-Stack ausgewählt", "Champions im Team benannt", "Use-Cases dokumentiert", "DSG-Check abgeschlossen", "Onboarding für 12 Personen", "Roadmap für Q1 fix", "Eigenes Prompt-Playbook"]; return ( ); }; const renderBackdrop = (s) => { if (s.anim === "map") return ; if (s.anim === "terminal") return ; if (s.anim === "checklist") return ; return null; }; // Merge Sanity text data into hardcoded visual structure const mergedSteps = steps.map((base, i) => ({ ...base, verb: sanitySteps[i]?.verb || base.verb, body: sanitySteps[i]?.body || base.body, cta: sanitySteps[i]?.cta || base.cta, meta: sanitySteps[i]?.meta || base.meta, })); return (
{/* Centered intro */}
{lp?.processEyebrow || "So funktioniert's"}

{lp?.processHeadline || "Know-How selber aufbauen."}

{lp?.processSubtext || "Kein Beraterprozess, kein Buzzword-Bingo. Klares Vorgehen, dokumentierte Ergebnisse, ein Team das danach selber kann."}

{/* 3-card grid */}
{mergedSteps.map((s, idx) =>
{/* step number — corner */}
{s.n}
{/* Visual area */}
{renderBackdrop(s)} {/* Medallion */}
{s.icon("currentColor")}
{/* Copy */}
{s.cta}

{s.verb}

{s.body}

{s.meta.map((m, j) =>
{m}
)}
)}
); } Object.assign(window, { ProcessSection });