/* PulseSections1.jsx — PULSE page · Header, Hero + HKI Radar, Footer, Problem * Loaded after Icons.jsx. Classic babel script: top-level consts/functions * are shared with the other PULSE section files. Names are PULSE-prefixed to * avoid collisions. Guardrails: copper/amber = PULSE active; cobalt/teal = * use-case/decision/evidence; green = status only; no invented metrics/IDs. */ /* ---------- responsive hook ---------- * Single source of truth for the "mobile" layout switch. Reads the live * viewport (works standalone AND inside the design-canvas iframes, where the * frame width drives the media query). Keeps the `is-mobile` class in * sync so CSS-only branches (workflow accordion, header chrome) match the JS * component branches (compact radar, platform accordion). Updates on resize. */ function usePulseMobile(query = '(max-width: 760px)') { const read = () => typeof window !== 'undefined' && window.matchMedia(query).matches; const [mobile, setMobile] = React.useState(read); React.useEffect(() => { const mq = window.matchMedia(query); const on = () => setMobile(mq.matches); on(); if (mq.addEventListener) mq.addEventListener('change', on);else mq.addListener(on); return () => {if (mq.removeEventListener) mq.removeEventListener('change', on);else mq.removeListener(on);}; }, [query]); React.useEffect(() => { document.body.classList.toggle('is-mobile', mobile); }, [mobile]); return mobile; } /* ---------- shared reveal hook ---------- */ function usePulseReveal(threshold = 0.2) { const ref = React.useRef(null); const [shown, setShown] = React.useState(false); React.useEffect(() => { if (!ref.current) return; if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {setShown(true);return;} const io = new IntersectionObserver((es) => { es.forEach((e) => {if (e.isIntersecting) {setShown(true);io.disconnect();}}); }, { threshold }); io.observe(ref.current); return () => io.disconnect(); }, [threshold]); return [ref, shown]; } /* ========================================================= HEADER (1:1 with Novemcore homepage — dropdowns + mobile drawer) ========================================================= */ const PULSE_OPP_SCAN = "/de/pulse-opportunity-scan"; const PULSE_PLATFORM_PAGE = "pulse.html"; const PULSE_EXPERTISE = "/de/leistungen"; const PULSE_NAV = [ { label: 'PULSE', sub: [ { label: 'Plattform', href: PULSE_PLATFORM_PAGE }, { label: 'Opportunity Scan', href: PULSE_OPP_SCAN }, ]}, { label: 'Leistungen', href: '#' }, { label: 'Fallstudien', href: '#' }, { label: 'Ressourcen', sub: [ { label: 'Fallstudien', href: '#' }, { label: 'Automations', href: '#' }, { label: 'Tools', href: '#' }, { label: 'Podcast', href: '#' }, { label: 'Newsletter', href: '#' }, { label: 'Blog & Papers', href: '#' }, ]}, { label: 'Über uns', sub: [ { label: 'Unternehmen', href: '#' }, { label: 'Karriere', href: '#' }, { label: 'Kontakt', href: '#' }, ]}, ]; function PulseMobileMenu({ isOpen, onClose }) { React.useEffect(() => { document.body.style.overflow = isOpen ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [isOpen]); return (
); } function PulseHeader() { const [lang, setLang] = React.useState('DE'); const [menuOpen, setMenuOpen] = React.useState(false); // Nav + lang are always rendered and hidden by CSS at ≤1024px; the hamburger // is always rendered and shown by CSS at ≤1024px. This keeps the header // correct at every width — including the tablet frame — without JS branching. return ( <>
Novemcore
{['DE', 'EN'].map((l) => )}
Scan buchen
setMenuOpen(false)} /> ); } /* ========================================================= HUMAN KNOWLEDGE INTELLIGENCE RADAR (hero visual) Sequence: center → 3 platform layers → primary use cases → additional use cases → final (center + layers held). Hover any node updates the caption. Reduced motion → final. ========================================================= */ const RADAR_LAYERS = [ { key: 'agent', angle: -90, label: 'AI Interview Agent', cap: { h: 'AI Interview Agent', t: 'Führt strukturierte Interviews und fragt kontextbezogen nach.' }, icon: 'msg' }, { key: 'context', angle: 135, label: 'Knowledge & Context Layer', cap: { h: 'Knowledge & Context Layer', t: 'Verbindet Projektkontext, Wissensbasen, Dokumente und Anforderungen.' }, icon: 'layers' }, { key: 'analysis', angle: 45, label: 'Analysis Engine', cap: { h: 'Analysis Engine', t: 'Erkennt Muster, Widersprüche, Prioritäten, Risiken und Potenziale.' }, icon: 'spark' }]; const RADAR_USECASES = [ { key: 'process', angle: -67.5, strong: true, label: 'Process & Automation', cap: { h: 'Prozessrealität sichtbar machen', t: 'Erkennen, wo Arbeit stockt, manueller Aufwand entsteht und Automatisierung sinnvoll ansetzt.' }, icon: 'cog' }, { key: 'reqs', angle: -22.5, strong: true, label: 'Requirements & Software', cap: { h: 'Anforderungen strukturiert verstehen', t: 'Stakeholderwissen, Prozesskontext, Fit-Gap-Fragen für bessere Entscheidungen bündeln.' }, icon: 'doc' }, { key: 'transform', angle: -112.5, strong: true, label: 'Transformation & Strategy', cap: { h: 'Transformation überprüfbar machen', t: 'Barrieren, Risiken, Verständnis und Umsetzungsfähigkeit strukturiert erfassen.' }, icon: 'road' }, { key: 'customer', angle: 22.5, strong: false, label: 'Kundenanalyse', cap: { h: 'Kundenwissen systematisch erheben', t: 'Kundenperspektiven strukturiert erfassen und wiederkehrend vergleichbar machen.' }, icon: 'users' }, { key: 'risk', angle: 67.5, strong: false, label: 'Risikoerkennung', cap: { h: 'Risiken früher erkennen', t: 'Schwache Signale, Abhängigkeiten und kritische Wissenslücken sichtbar machen.' }, icon: 'warn' }, { key: 'dd', angle: 112.5, strong: false, label: 'Due Diligence & Wertsteigerung', cap: { h: 'Schneller verstehen, wo Wert entsteht', t: 'Prozessrealität, Risiken und Verbesserungspotenziale für Value Creation strukturieren.' }, icon: 'shield' }, { key: 'innovation', angle: 157.5, strong: false, label: 'Innovation & Wachstum', cap: { h: 'Wachstumshebel entdecken', t: 'Ideen, Marktimpulse und interne Perspektiven zu konkreten Chancen verdichten.' }, icon: 'zap' }, { key: 'wikis', angle: 202.5, strong: false, label: 'Wissenssicherung / Wikis', cap: { h: 'Wissen sichern, bevor es verloren geht', t: 'Erfahrungswissen aus den Köpfen von Mitarbeitenden in nutzbare Wissensbasen überführen.' }, icon: 'book' }]; const RADAR_CENTER_CAP = { h: 'Menschliches Wissen wird zur nutzbaren Evidenz.', t: 'PULSE verbindet Interviews, Kontext und Analyse zu wiederverwendbarer Entscheidungsgrundlage.' }; function radarPos(angleDeg, r) { const a = angleDeg * Math.PI / 180; return { x: 50 + r * Math.cos(a), y: 50 + r * Math.sin(a) }; } function PulseRadar({ compact }) { const R_IN = 30,R_OUT = 40; const [stage, setStage] = React.useState(0); // 0..4 const [done, setDone] = React.useState(false); const [hover, setHover] = React.useState(null); // node key React.useEffect(() => { if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { setStage(4);setDone(true);return; } const ids = [ setTimeout(() => setStage(1), 400), // center fades in + copper edge setTimeout(() => setStage(2), 1700), // three platform layers setTimeout(() => setStage(3), 3200), // primary use cases connect setTimeout(() => setStage(4), 4700), // secondary use cases, quieter setTimeout(() => setDone(true), 6000) // final held state ]; return () => ids.forEach(clearTimeout); }, []); const layerVisible = stage >= 2; const strongVisible = stage >= 3; const allVisible = stage >= 4; // Resolve caption from hover or default center let cap = RADAR_CENTER_CAP,capCool = false; if (hover) { const L = RADAR_LAYERS.find((n) => n.key === hover); const U = RADAR_USECASES.find((n) => n.key === hover); if (L) {cap = L.cap;capCool = false;} if (U) {cap = U.cap;capCool = true;} } const allNodes = [ ...RADAR_LAYERS.map((n) => ({ ...n, ring: 'in' })), ...RADAR_USECASES.map((n) => ({ ...n, ring: 'out' }))]; // Touch-friendly: tap a chip to pin its caption, tap again to clear. const onPick = (key) => setHover((h) => h === key ? null : key); // ---- Mobile: compact list of use-case + layer chips around the center ---- if (compact) { return (
= 1 ? ' is-on' : '')}>
Human Knowledge Intelligence
PULSE
Plattform-Schichten
{RADAR_LAYERS.map((n) => )}
Anwendungsfelder
{RADAR_USECASES.map((n) => { const vis = n.strong ? strongVisible : allVisible; return ( ); })}
); } return (
{/* center module */}
= 1 ? '' : ' is-hidden')} onMouseEnter={() => done && setHover(null)}>
Human Knowledge Intelligence
PULSE
{/* nodes */} {allNodes.map((n) => { const r = n.ring === 'in' ? R_IN : R_OUT; const p = radarPos(n.angle, r); const vis = n.ring === 'in' ? layerVisible : n.strong ? strongVisible : allVisible; const cls = n.ring === 'in' ? 'radar__node radar__layer' : 'radar__node radar__uc' + (n.strong ? ' radar__uc--strong' : ' is-faint'); return (
done && setHover(n.key)} onMouseLeave={() => done && setHover(null)} onFocus={() => done && setHover(n.key)} onBlur={() => done && setHover(null)} tabIndex={done ? 0 : -1} role="button" aria-label={n.label}> {Ico[n.icon] && Ico[n.icon]()} {n.label}
); })}
{/* caption */}
); } /* ========================================================= HERO — Section 01 ========================================================= */ function PulseHero({ mobile }) { return (
PULSE HUMAN KNOWLEDGE INTELLIGENCE

PULSE macht Wissen für Entscheidungen nutzbar.

PULSE verbindet AI-gestützte Interviews, Kontextwissen und Analysen, um verborgenes Erfahrungswissen, Anforderungen, Prozessrealität und Potenziale sichtbar zu machen.

); } /* ========================================================= PROBLEM — Section 02 · navy base, copper highlights Layered "Human Knowledge Below The Surface" visual: three knowledge layers (documented → lived reality → experience), a PULSE extraction beam, and the structured evidence it lifts out. Hovering a pain card highlights its source layer + evidence card; hovering a layer highlights its pain cards. ========================================================= */ /* Three depth layers. ev = the structured evidence PULSE lifts out. */ const PP_LAYERS = [ { key: 'doc', depth: 'OBERFLÄCHE', name: 'Dokumentiertes Wissen', ex: ['SOPs', 'Prozessdokumente', 'Reports', 'Tickets', 'Vorhandene Daten'], ev: { icon: 'doc', t: 'Prozess-Soll', tag: 'STRUKTUR' } }, { key: 'real', depth: 'DARUNTER', name: 'Gelebte Realität', ex: ['Ausnahmen', 'Übergaben', 'Manuelle Arbeit', 'Informelle Entscheidungen'], ev: { icon: 'flow', t: 'Reale Abläufe', tag: 'EVIDENZ' } }, { key: 'exp', depth: 'TIEFENSCHICHT', name: 'Erfahrungswissen', ex: ['Risiken', 'Abhängigkeiten', 'Kundenwissen', 'Expertenwissen', 'Implizite Regeln'], ev: { icon: 'brain', t: 'Implizites Wissen', tag: 'EVIDENZ' } }]; /* Six pain cards. link = which layer/beam element they highlight. */ const PP_CARDS = [ { t: 'Wissen geht verloren', icon: 'book', link: 'exp', d: 'Kritisches Erfahrungswissen bleibt in Köpfen und verschwindet, wenn Rollen wechseln oder Mitarbeitende ausscheiden.' }, { t: 'Prozesse sind anders als Dokumente', icon: 'flow', link: 'real', d: 'SOPs zeigen selten Ausnahmen, Rückfragen, lokale Workarounds und tatsächliche Übergaben.' }, { t: 'Daten zeigen nicht alles', icon: 'chart', link: 'doc', d: 'Process Mining und Systemdaten helfen nur dort, wo relevante Daten überhaupt verfügbar und interpretierbar sind.' }, { t: 'Workshops verzerren Perspektiven', icon: 'users', link: 'real', d: 'Gruppendynamik, Hierarchie und Zeitdruck verhindern oft ehrliche, vergleichbare Einsichten.' }, { t: 'Interviews skalieren schlecht', icon: 'msg', link: 'exp', d: 'Manuelle Interviewreihen sind aufwendig, inkonsistent und schwer über viele Stimmen hinweg auszuwerten.' }, { t: 'Einmalige Erhebungen veralten', icon: 'clock', link: 'beam', d: 'Statische Analysen verlieren schnell an Wert, wenn Prozesse, Teams und Prioritäten sich verändern.' }]; function PulseProblem() { const [visRef, visShown] = usePulseReveal(0.2); const [gridRef, gridShown] = usePulseReveal(0.12); const [stage, setStage] = React.useState(0); // 0 → 5 reveal sequence const [hot, setHot] = React.useState(null); // 'doc' | 'real' | 'exp' | 'beam' React.useEffect(() => { if (!visShown) return; if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {setStage(5);return;} const ids = [ setTimeout(() => setStage(1), 140), // documented layer setTimeout(() => setStage(2), 420), // lived reality setTimeout(() => setStage(3), 700), // experience setTimeout(() => setStage(4), 1020), // extraction beam draws setTimeout(() => setStage(5), 1340) // structured evidence lifts out ]; return () => ids.forEach(clearTimeout); }, [visShown]); return (
DAS UNGENUTZTE WISSENSPOTENZIAL

Es gibt häufig kein Datenproblem,
sondern ein unstrukturiertes Wissensproblem.

Entscheidendes Wissen liegt nicht in Systemen, sondern bei bei den Mitarbeitenden, Kunden, in Routinen, Ausnahmen und Erfahrung. Es ist verteilt, implizit, schwer vergleichbar und oft nicht dort verfügbar, wo Entscheidungen vorbereitet werden.

PULSE verknüpft Wissen und Datenpunkte. Bisher verborgenes Wissen wird erstmals nutzbar und durch AI Kontext-Analysen erweitert. 

{/* ---- Layered visual: knowledge below the surface ---- */}
Menschliches Wissen unter der Oberfläche
{PP_LAYERS.map((L, i) =>
i ? ' is-on' : '') + (hot === L.key ? ' is-hot' : '')} onMouseEnter={() => setHot(L.key)} onMouseLeave={() => setHot(null)}>
{L.depth} {L.name}
{L.ex.map((e) => {e})}
)}
{/* extraction beam */}
= 4 ? ' is-on' : '') + (hot === 'beam' ? ' is-hot' : '')} aria-hidden="true" onMouseEnter={() => setHot('beam')} onMouseLeave={() => setHot(null)}>
{/* structured evidence */}
= 5 ? ' is-on' : '')}>Strukturierte Evidenz
{PP_LAYERS.map((L, i) =>
= 5 ? ' is-on' : '') + (hot === L.key ? ' is-hot' : '')} onMouseEnter={() => setHot(L.key)} onMouseLeave={() => setHot(null)}> {Ico[L.ev.icon]()} {L.ev.t} {L.ev.tag}
)}
PULSE hebt strukturierte Evidenz aus allen Schichten
{PP_CARDS.map((c, i) =>
setHot(c.link)} onMouseLeave={() => setHot(null)}> {Ico[c.icon]()}

{c.t}

{c.d}

)}
); }