const SLIDES = [ { EN: { eyebrow: 'SERVICE · MANAGED SERVICES', title: ['Infrastructure', 'that doesn\u2019t', 'get in the way.'], italicWord: 'doesn\u2019t', body: 'Streamline business processes through automation, optimized IT infrastructure, and proactive system management\u2014reducing downtime and improving productivity.', metric: { value: '42%', label: 'Infra spend reduced' }, secondary: { value: '2.1\u00d7', label: 'Throughput' } }, DE: { eyebrow: 'SERVICE · MANAGED SERVICES', title: ['Infrastruktur,', 'die nicht im', 'Weg steht.'], italicWord: 'nicht', body: 'Optimieren Sie Gesch\u00e4ftsprozesse durch Automatisierung, eine optimierte IT-Infrastruktur und proaktives Systemmanagement \u2014 weniger Ausfallzeiten, h\u00f6here Produktivit\u00e4t.', metric: { value: '42%', label: 'Infrastrukturkosten reduziert' }, secondary: { value: '2.1\u00d7', label: 'Durchsatz' } }, diagram: 'constellation', tag: 'GLOBAL · 5 REGIONS', }, { EN: { eyebrow: 'SERVICE · MEDICAL DEVICE INTEGRATION', title: ['Lab instruments, X-ray', 'systems and EMR/EHR,', 'finally talking.'], italicWord: 'finally', body: 'HL7, FHIR and DICOM integrations that connect lab analyzers, X-ray systems and EMR/EHR \u2014 automated, bidirectional, audit-ready.', metric: { value: '0', label: 'Manual errors' }, secondary: { value: '2\u00d7', label: 'Faster turnaround' } }, DE: { eyebrow: 'SERVICE · INTEGRATION MEDIZINTECHNIK', title: ['Laborger\u00e4te, R\u00f6ntgen-', 'systeme und EMR/EHR,', 'endlich verbunden.'], italicWord: 'endlich', body: 'HL7-, FHIR- und DICOM-Integrationen, die Laboranalyseger\u00e4te, R\u00f6ntgensysteme und EMR/EHR verbinden \u2014 automatisiert, bidirektional, audit-sicher.', metric: { value: '0', label: 'Manuelle Fehler' }, secondary: { value: '2\u00d7', label: 'Schnellere Bearbeitung' } }, diagram: 'signal-bridge', tag: 'HL7 / FHIR · LIVE', }, { EN: { eyebrow: 'SERVICE · AI SOLUTIONS & SIMULATION', title: ['From complex data', 'to smart', 'decisions\u2014powered by AI.'], italicWord: 'smart', body: 'Address industry-specific challenges with customized AI models and simulation environments.', metric: { value: '6.4\u00d7', label: 'Faster simulation' }, secondary: { value: 'GPU', label: 'Accelerated compute' } }, DE: { eyebrow: 'SERVICE · KI-L\u00d6SUNGEN & SIMULATION', title: ['Von komplexen Daten', 'zu klugen', 'Entscheidungen \u2014 mit KI.'], italicWord: 'klugen', body: 'L\u00f6sen Sie branchenspezifische Herausforderungen mit ma\u00dfgeschneiderten KI-Modellen und Simulationsumgebungen.', metric: { value: '6.4\u00d7', label: 'Schnellere Simulation' }, secondary: { value: 'GPU', label: 'Beschleunigte Rechenleistung' } }, diagram: 'neural-pipeline', tag: 'INFERENCE · ACTIVE', }]; /* ============================================================ SCENE 1 — NETWORK CONSTELLATION ============================================================ */ function NetworkConstellation() { const W = 800, H = 600; const cx = 480, cy = 300; // Scattered constellation nodes const nodes = [ {x: 220, y: 110, label: 'EU-WEST', big: true}, {x: 660, y: 120, label: 'US-EAST', big: true}, {x: 680, y: 410, label: 'APAC', big: true}, {x: 180, y: 300, label: 'CORE', big: true}, {x: 360, y: 80, label: ''}, {x: 540, y: 200, label: ''}, {x: 720, y: 250, label: ''}, {x: 280, y: 460, label: 'CDN'}, {x: 500, y: 520, label: 'EDGE'}, {x: 400, y: 410, label: ''}, {x: 600, y: 480, label: ''}, {x: 320, y: 210, label: ''}, ]; return ( {/* Drifting stars */} {Array.from({length: 60}).map((_, i) => { const sx = (i * 113) % W; const sy = (i * 197) % H; return ( ); })} {/* Glow halo around core */} {/* Connection lines core ↔ nodes */} {nodes.map((n, i) => ( ))} {/* Expanding pulse rings */} {[0, 1, 2].map(i => ( ))} {/* Core */} CORE · LIVE {/* Nodes */} {nodes.map((n, i) => ( {n.big && } {n.big && } {n.big && ( )} {n.label && ( {n.label} )} ))} {/* Data packets traveling along edges */} {[0, 1, 2, 3, 7, 8, 5, 6].map((nodeIdx, i) => { const n = nodes[nodeIdx]; const reverse = i % 2 === 0; const dur = 2.4 + (i % 3) * 0.6; return ( ); })} {/* Stat cards */} UPTIME 99.98% ALERTS 0 REGIONS 5 ); } /* ============================================================ SCENE 2 — SIGNAL BRIDGE (HL7 / FHIR) ============================================================ */ function SignalBridge() { const W = 800, H = 600; const LAB = ['Analyzer', 'Centrifuge', 'Sequencer', 'Imager']; const HOSP = ['EMR / EHR', 'LIS', 'PACS', 'HIS']; const cardW = 160, cardH = 64; const colYTop = 80, colGap = 90; const labX = 60; const hospX = W - 60 - cardW; const busX = W / 2 - 36, busW = 72; const busTop = 60, busBottom = H - 60; return ( {/* Bus glow */} {/* Bus pillar */} {/* Bus header label */} HL7 / FHIR {/* Bus inner pulse */} {[0, 1, 2].map(i => ( ))} {/* Lab devices left column */} {LAB.map((name, i) => { const y = colYTop + i * colGap; const cy_ = y + cardH/2; return ( {/* LED */} LAB · 0{i+1} {name} {/* Connection line to bus */} {/* Packet: lab → bus */} MSG ); })} {/* Hospital systems right column */} {HOSP.map((name, i) => { const y = colYTop + i * colGap; const cy_ = y + cardH/2; return ( HOSPITAL {name} {/* Connection */} {/* Packet: bus → hospital */} ); })} {/* Throughput counter */} THROUGHPUT 12,847 msg/min ); } /* ============================================================ SCENE 3 — NEURAL PIPELINE ============================================================ */ function NeuralPipeline() { const W = 800, H = 600; const layers = [ { x: 120, n: 4, label: 'INPUT' }, { x: 290, n: 6, label: 'HIDDEN' }, { x: 460, n: 6, label: 'ATTN' }, { x: 630, n: 3, label: 'OUTPUT' }, ]; const nodeR = 14; const getY = (count, idx) => H/2 - 110 + (idx - (count - 1) / 2) * 56; // Active path const active = [ { layer: 0, node: 1 }, { layer: 1, node: 2 }, { layer: 2, node: 3 }, { layer: 3, node: 1 }, ]; const isActiveNode = (li, ni) => active.some(p => p.layer === li && p.node === ni); const isActiveEdge = (li, ai, bi) => { const a = active.find(p => p.layer === li); const b = active.find(p => p.layer === li + 1); return a && b && a.node === ai && b.node === bi; }; // Pre-compute random secondary edges with particles const particleEdges = []; for (let li = 0; li < layers.length - 1; li++) { const a = layers[li], b = layers[li + 1]; for (let ai = 0; ai < a.n; ai++) { for (let bi = 0; bi < b.n; bi++) { if (((ai * 7 + bi * 11 + li * 13) % 6) === 0) { // sparse subset particleEdges.push({ li, ai, bi }); } } } } return ( {/* Soft halo behind network */} {/* All edges (dim) */} {layers.slice(0, -1).map((la, li) => { const lb = layers[li + 1]; return Array.from({length: la.n}).map((_, ai) => Array.from({length: lb.n}).map((_, bi) => { const y1 = getY(la.n, ai); const y2 = getY(lb.n, bi); const active = isActiveEdge(li, ai, bi); if (active) return null; return ( ); }) ); })} {/* Continuous particle flow on secondary edges */} {particleEdges.map(({ li, ai, bi }, i) => { const la = layers[li], lb = layers[li + 1]; const y1 = getY(la.n, ai); const y2 = getY(lb.n, bi); const dur = 1.6 + (i % 5) * 0.4; return ( ); })} {/* Active path edges */} {layers.slice(0, -1).map((la, li) => { const lb = layers[li + 1]; const a = active.find(p => p.layer === li); const b = active.find(p => p.layer === li + 1); if (!a || !b) return null; const y1 = getY(la.n, a.node); const y2 = getY(lb.n, b.node); return ( ); })} {/* Nodes */} {layers.map((la, li) => ( Array.from({length: la.n}).map((_, ni) => { const y = getY(la.n, ni); const isOut = li === layers.length - 1; const act = isActiveNode(li, ni); return ( {act && ( <> )} ); }) ))} {/* Layer labels */} {layers.map((la) => ( {la.label} ))} {/* Top-left status */} INFERENCE Active {/* Speedup hero card */} SPEEDUP 6.4× vs CPU baseline {/* Bottom oscilloscope waveform */} LATENCY · 24 ms {Array.from({length: 60}).map((_, i) => { const h = 6 + Math.abs(Math.sin(i * 0.35) * 18) + (i % 4) * 1.5; const isAccent = i > 26 && i < 36; return ( ); })} ); } /* ============================================================ SCENE SWITCHER ============================================================ */ function SlideScene({ kind }) { if (kind === 'constellation') return ; if (kind === 'signal-bridge') return ; if (kind === 'neural-pipeline') return ; return null; } /* ============================================================ SLIDE CONTENT — cinematic split card ============================================================ */ function SlideContent({ slide, lang }) { const t = slide[lang] || slide.EN; return (
{/* Animated Scene panel */}
{/* Top-right tag */}
{slide.tag}
{/* Edge-fade for blend with copy */}
{/* Copy panel */}
{/* Eyebrow */}
{t.eyebrow}
{/* Title */}

{t.title.map((line, i) => { const parts = line.split(t.italicWord); if (parts.length === 2) { return ( {parts[0]} {t.italicWord} {parts[1]} ); } return {line}; })}

{/* Body */}

{t.body}

{/* Metrics + CTA */}
); } /* ============================================================ SLIDER — autoplay + swipe + tape + controls ============================================================ */ function Slider({ lang = 'EN' }) { const [idx, setIdx] = React.useState(0); const [paused, setPaused] = React.useState(false); const total = SLIDES.length; const touch = React.useRef({ x: 0, y: 0, t: 0, active: false }); const AUTOPLAY_MS = 7000; React.useEffect(() => { if (paused) return; const tid = setTimeout(() => setIdx((i) => (i + 1) % total), AUTOPLAY_MS); return () => clearTimeout(tid); }, [idx, paused, total]); const go = (n) => setIdx((n + total) % total); const onTouchStart = (e) => { const tc = e.touches[0]; touch.current = { x: tc.clientX, y: tc.clientY, t: Date.now(), active: true }; setPaused(true); }; const onTouchEnd = (e) => { if (!touch.current.active) return; const tc = e.changedTouches[0]; const dx = tc.clientX - touch.current.x; const dy = tc.clientY - touch.current.y; const dt = Date.now() - touch.current.t; touch.current.active = false; if (Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy) * 1.2 && dt < 800) { if (dx < 0) go(idx + 1); else go(idx - 1); } setTimeout(() => setPaused(false), 4000); }; return (
setPaused(true)} onMouseLeave={() => setPaused(false)} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} style={{ maxWidth: 1440, margin: '0 auto', padding: '16px var(--page-px,40px) 56px', }}>
{/* TOP TAPE */}
GREYSPACEOPS 0{idx + 1} / 0{total} {/* Progress segments */}
{SLIDES.map((_, i) => { const isPast = i < idx; const isActive = i === idx; return ( ); })}
LIVE OPS
{/* SLIDING TRACK */}
{SLIDES.map((s, i) => (
))}
{/* BOTTOM CONTROLS */}
{SLIDES.map((_, i) => (
); } function arrowBtn() { return { width: 40, height: 40, borderRadius: 999, border: '1px solid rgba(255,255,255,0.14)', background: 'rgba(255,255,255,0.06)', color: '#fff', fontSize: 16, cursor: 'pointer', fontFamily: 'inherit', backdropFilter: 'blur(8px)', transition: 'background 160ms, transform 160ms, border-color 160ms', }; } window.Slider = Slider;