-
- {securityFeatures.map((feat, idx) => {
- const Icon = feat.icon
+ {/* ── Main canvas ── */}
+
+
+ {/* Ambient glows */}
+ {!isLight && (
+ <>
+
+
+
+ )}
+
+ {/* Slabs + connectors */}
+
+ {LAYERS.map((layer, li) => {
+ const nodes = layer.nodeIds.map(id => nodeMap[id])
return (
-
- {feat.label}
-
+
+
)
})}
-
+
+ {/* Footer badges */}
+
+ {([
+ { Icon: Lock, label: de ? 'Kein US-Anbieter · 100% DSGVO' : 'No US providers · 100% GDPR' },
+ { Icon: Server, label: de ? 'BSI-zertifiziertes Rechenzentrum' : 'BSI-certified data center' },
+ { Icon: BadgeCheck, label: de ? 'EU-souveräne Inferenz' : 'EU-sovereign inference' },
+ ] as { Icon: React.ElementType; label: string }[]).map(({ Icon, label }) => (
+
+
+ ))}
+
+
+ {/* Detail panel */}
+
+ {active && (
+
+
+
+
+
+
+
+
+ {active.title}
+
+
+ {active.tier === 'product' ? (de ? 'Anwendung' : 'Application') :
+ active.tier === 'proxy' ? 'Gateway' :
+ (de ? 'Inferenz' : 'Inference')}
+
+
+
+ {active.subtitle}
+
+
+
+
setActiveId(null)}
+ style={{
+ background: 'transparent',
+ border: `1px solid ${isLight ? 'rgba(0,0,0,.15)' : 'rgba(167,139,250,.25)'}`,
+ color: isLight ? '#64748b' : 'rgba(236,233,247,.5)',
+ width: 28, height: 28, borderRadius: 14,
+ cursor: 'pointer', display: 'flex',
+ alignItems: 'center', justifyContent: 'center', flexShrink: 0,
+ }}
+ >
+
+
+
+
+
+ {de ? 'Stack' : 'Tech Stack'}
+
+
+ {active.tech.map(tk => (
+ {tk}
+ ))}
+
+
+
+
+ {de ? 'Funktionen' : 'Capabilities'}
+
+
+ {active.services.map(s => (
+
+
+
{s.name}
+
{s.desc}
+
+ ))}
+
+
+
+
+ )}
+
+
+ {stars.map((st, i) => (
+
+ ))}
+
+ )
+}
+
+// ── Timeline ──────────────────────────────────────────────────────────────────
+interface MilestoneWithPos extends Milestone { x: number; row: 'top' | 'bottom' }
+
+function Timeline({ onSelect, selectedId, t, de }: {
+ onSelect: (m: Milestone) => void
+ selectedId: string | null
+ t: Theme
+ de: boolean
+}) {
+ const trackW = 1160
+ const innerPad = 120
+ const usableW = trackW - innerPad * 2
+ const positions = MILESTONES.map((_, i) => innerPad + (usableW * i) / (MILESTONES.length - 1))
+ const todayX = innerPad + usableW * TODAY_POSITION
+
+ const layout: MilestoneWithPos[] = MILESTONES.map((m, i) => ({
+ ...m, x: positions[i],
+ row: i % 2 === 0 ? 'top' : 'bottom',
+ }))
+
+ const railColor = t.key === 'dark' ? '#a78bfa' : '#7c3aed'
+
+ return (
+
+
+
+
+
+
+
+
+
+ {/* rail background */}
+
+
+
+
+
+
+ {/* HEUTE pill — HTML so it sits above milestone cards */}
+
HEUTE
+
+ {layout.map((m) => (
+
onSelect(m)}
+ active={selectedId === m.id} />
+ ))}
+ setHover(true)}
+ onMouseLeave={() => setHover(false)}
+ style={{
+ position: 'absolute', left: m.x - 14, top: 180 - 14,
+ width: 28, height: 28, borderRadius: '50%',
+ background: m.done
+ ? `radial-gradient(circle at 35% 30%, ${t.doneBright}, ${t.doneSolid} 60%, ${t.doneDeep})`
+ : `radial-gradient(circle at 35% 30%, ${m.tint}dd, ${m.tint}66 60%, ${t.dotTodoDeep})`,
+ border: `2px solid ${lit ? '#fff' : nodeColor}`,
+ boxShadow: lit
+ ? `0 0 22px ${nodeColor}, 0 0 44px ${nodeColor}66, inset 0 1px 0 ${t.dotLitHi}`
+ : `0 0 10px ${nodeColor}88, inset 0 1px 0 ${t.dotSoftHi}`,
+ display: 'flex', alignItems: 'center', justifyContent: 'center',
+ color: '#fff', fontSize: 11, fontWeight: 700,
+ cursor: 'pointer', zIndex: 5,
+ transition: 'all .25s',
+ transform: lit ? 'scale(1.15)' : 'scale(1)',
+ }}>
+ {m.done ? '✓' : (m.next ? '◉' : '○')}
+
+
+ {/* card */}
+ setHover(true)}
+ onMouseLeave={() => setHover(false)}
+ style={{
+ position: 'absolute', left: m.x - 112, top: cardY,
+ width: 224, height: 150, padding: '12px 14px',
+ borderRadius: 12,
+ background: cardBg,
+ border: `1px solid ${lit ? m.tint : m.tint + '55'}`,
+ boxShadow: lit ? t.cardShadowLift(m.tint) : t.cardShadowSoft,
+ cursor: 'pointer', zIndex: 4,
+ transition: 'all .25s',
+ transform: lit ? `translateY(${isTop ? -2 : 2}px)` : 'translateY(0)',
+ display: 'flex', flexDirection: 'column', gap: 6,
+ backdropFilter: t.key === 'light' ? 'blur(6px)' : 'none',
+ }}>
+
+ {m.tick}
+ {badge}
+
+
+ {de ? m.title.de : m.title.en}
+
+
+ {de ? m.short.de : m.short.en}
+
+
+ {m.when}
+ {de ? 'Details →' : 'Details →'}
+
+
setHover(true)}
+ onMouseLeave={() => setHover(false)}
+ style={{
+ position: 'relative', padding: '14px 18px', borderRadius: 12,
+ background: `linear-gradient(180deg, ${bgTop} 0%, ${bgMid} 60%, ${t.cardBase}${t.cardBaseA})`,
+ border: `1px solid ${hover ? item.tint : item.tint + '55'}`,
+ boxShadow: hover ? t.statShadowLift(item.tint) : t.statShadowSoft,
+ transform: hover ? 'translateY(-3px)' : 'translateY(0)',
+ transition: 'all .25s',
+ overflow: 'hidden',
+ backdropFilter: t.key === 'light' ? 'blur(6px)' : 'none',
+ }}>
+
+
+ {de ? item.k.de : item.k.en}
+
+
+ {item.v}
+
+
+
+
+
+
+
+
+
e.stopPropagation()} style={{
+ width: 580, maxWidth: '88%',
+ background: `linear-gradient(180deg, ${tint}22 0%, ${t.modalBgMid} 50%, ${t.modalBgLow} 100%)`,
+ border: `1px solid ${tint}77`,
+ borderRadius: 16,
+ boxShadow: t.modalShadow(tint),
+ padding: '24px 28px', color: t.fg,
+ animation: 'msScaleIn .22s ease-out',
+ }}>
+
+
{item.done ? '✓' : (item.next ? '◉' : '○')}
+
+
+ {badge}
+ {item.when}
+
+
+ {de ? item.title.de : item.title.en}
+
+
+
✕
+
+
+ {de ? item.body.de : item.body.en}
+
+
+ {(de ? item.bullets.de : item.bullets.en).map((b, i) => (
+
+
+ {item.done ? '✓' : '▸'}
+
+ {b}
+
+ ))}
+
+
+
+ {/* Ambient glow */}
+
+
+ {t.stars ?
:
}
+
+ {/* Progress indicator */}
+
+
+ {de ? 'Fortschritt' : 'Progress'}
+
+
+
+ {doneCnt}
+ / {total}
+
+
+
+ {/* Tip */}
+
+ {de ? 'Tipp:' : 'Tip:'}
+ {de ? 'Klick auf einen Meilenstein' : 'Click any milestone'}
+
+
+ {/* Timeline */}
+
+
+
+ {/* Stats */}
+
+ {STATS.map(s =>
+
+ {/* Footer */}
+
+ {de ? 'Stand heute · live-Metriken aus der Plattform' : 'As of today · live metrics from the platform'}
+
+
+
setSel(null)} t={t} de={de} />
+ (null)
+ const [scale, setScale] = useState(1)
+ const containerRef = useRef(null)
+
+ const calcScale = useCallback(() => {
+ if (containerRef.current) {
+ const w = containerRef.current.offsetWidth
+ setScale(Math.min(w / INNER_W, 1))
+ }
+ }, [])
+
+ useEffect(() => {
+ calcScale()
+ const obs = new ResizeObserver(calcScale)
+ if (containerRef.current) obs.observe(containerRef.current)
+ return () => obs.disconnect()
+ }, [calcScale])
+
+ return (
+
+
+
+
+
+ {de ? 'Meilensteine' : 'Milestones'}
+
+
+
+
+
+
+
+ const loop = () => {
+ if (Math.random() > skip) ref.current()
+ t = setTimeout(loop, min + Math.random() * (max - min))
+ }
+ loop()
+ return () => clearTimeout(t)
+ }, [min, max, skip])
+}
- const codeItems = de
- ? ['SAST / DAST / SBOM', 'Pentesting', 'Issue-Tracker', 'Auto-Fixes']
- : ['SAST / DAST / SBOM', 'Pentesting', 'Issue tracker', 'Auto-fixes']
+function TickerShell({ tint, isLight, children }: { tint: string; isLight: boolean; children: React.ReactNode }) {
+ return (
+ {children}
+ )
+}
- const capabilities = [
- {
- icon: GitPullRequest,
- color: 'text-indigo-400',
- label: de ? 'RFQ-Prüfung' : 'RFQ Verification',
- desc: de
- ? 'Kunden-Anforderungsdokumente werden automatisiert gegen die aktuelle Source-Code-Umsetzung geprüft. Abweichungen werden erkannt, Änderungen vorgeschlagen und auf Wunsch direkt im Code umgesetzt — ohne manuelles Nacharbeiten.'
+function TickTrace({ tint, isLight }: { tint: string; isLight: boolean }) {
+ const [n, setN] = useState(12748)
+ useTicker(() => setN(v => v + 1 + Math.floor(Math.random() * 3)), 250, 500)
+ return (
+
+ ●
+ trace
+ {n.toLocaleString()}
+ evidence-chain
+
+ )
+}
+
+function TickEngine({ tint, isLight }: { tint: string; isLight: boolean }) {
+ const [v, setV] = useState(428)
+ const [rate, setRate] = useState(99.4)
+ useTicker(() => {
+ setV(x => x + 1 + Math.floor(Math.random() * 4))
+ setRate(r => Math.max(97, Math.min(99.9, r + (Math.random() - 0.5) * 0.3)))
+ }, 220, 420)
+ return (
+
+ ●
+ validate
+ {v.toLocaleString()}
+ {rate.toFixed(1)}%
+
+ )
+}
+
+function TickOptimizer({ tint, isLight }: { tint: string; isLight: boolean }) {
+ const ops = ['ROI: 2.418 € / dev', 'gap → policy §4.2', 'dedup 128 tickets', 'sweet-spot: 22 KLOC', 'tradeoff: speed↔risk']
+ const [i, setI] = useState(0)
+ useTicker(() => setI(x => (x + 1) % ops.length), 900, 1600, 0.05)
+ return (
+
+ ✦
+ optimize
+ {ops[i]}
+
+ )
+}
+
+function TickStack({ tint, isLight }: { tint: string; isLight: boolean }) {
+ const regs = ['DSGVO', 'NIS-2', 'DORA', 'EU AI Act', 'ISO 27001', 'BSI C5']
+ const [i, setI] = useState(0)
+ const [c, setC] = useState(1208)
+ useTicker(() => { setI(x => (x + 1) % regs.length); setC(v => v + Math.floor(Math.random() * 3)) }, 800, 1400, 0.05)
+ return (
+
+ ●
+ check
+ {regs[i]}
+ ·
+ {c.toLocaleString()}
+
+ )
+}
+
+// ── Data ──────────────────────────────────────────────────────────────────────
+interface DetailItem {
+ tint: string
+ icon: string
+ kicker: string
+ title: string
+ body: string
+ bullets?: string[]
+ stat?: { k: string; v: string }
+}
+
+function getDetails(de: boolean): Record {
+ return {
+ rfq: {
+ tint: '#a78bfa', icon: '⇄',
+ kicker: de ? 'Säule · Compliance' : 'Pillar · Compliance',
+ title: de ? 'RFQ-Prüfung' : 'RFQ Verification',
+ body: de
+ ? 'Kunden-Anforderungsdokumente werden automatisch gegen den aktuellen Source-Code geprüft. Abweichungen werden erkannt, Änderungen vorgeschlagen und auf Wunsch direkt im Code umgesetzt — ohne manuelles Nacharbeiten.'
: 'Customer requirement documents are automatically verified against current source code. Deviations are detected, changes proposed and implemented directly in code on request — no manual rework needed.',
+ bullets: de
+ ? ['Klauseln automatisch gegen SBOM, SAST-Findings und Policy-Docs abgeglichen', 'Lücken mit konkreten Implementierungsvorschlägen markiert', 'RFQ-Antworten in Stunden statt Wochen']
+ : ['Auto-match clauses against SBOM, SAST findings and policy docs', 'Flag gaps with concrete implementation proposals', 'Win-ready RFQ replies in hours, not weeks'],
+ stat: { k: de ? 'Ø Antwortzeit' : 'avg response time', v: de ? '4,2h (war 12 Tage)' : '4.2h (was 12 days)' },
},
- {
- icon: ArrowLeftRight,
- color: 'text-purple-400',
- label: de ? 'Bidirektional' : 'Bidirectional',
- desc: de
- ? 'Compliance-Anforderungen fliessen direkt in den Code. Umgekehrt aktualisieren Code-Änderungen automatisch die Compliance-Dokumentation. Beide Seiten sind immer synchron — kein Informationsverlust zwischen Audit und Entwicklung.'
- : 'Compliance requirements flow directly into code. Conversely, code changes automatically update compliance documentation. Both sides always stay in sync — no information loss between audit and development.',
- },
- {
- icon: Zap,
- color: 'text-amber-400',
- label: de ? 'Prozess-Compliance' : 'Process Compliance',
- desc: de
+ process: {
+ tint: '#c084fc', icon: '⟲',
+ kicker: de ? 'Säule · Compliance' : 'Pillar · Compliance',
+ title: de ? 'Prozess-Compliance' : 'Process Compliance',
+ body: de
? 'Vom Audit-Finding über das Ticket bis zur Code-Änderung läuft der gesamte Prozess automatisiert durch. Rollen, Fristen und Eskalation werden End-to-End verwaltet. Nachweise werden automatisch generiert und archiviert.'
: 'From audit finding to ticket to code change, the entire process runs automatically. Roles, deadlines and escalation are managed end-to-end. Evidence is automatically generated and archived.',
+ bullets: de
+ ? ['Finding → Ticket → PR → Nachweis in einem Thread', 'SLA-Tracking pro Control mit Auto-Eskalation', 'Unveränderliches Audit-Log, pro Änderung signiert']
+ : ['Finding → ticket → PR → evidence in one thread', 'SLA tracking per control with auto-escalation', 'Immutable audit log signed per change'],
+ stat: { k: de ? 'automatisierte Prozessschritte' : 'process steps automated', v: '87%' },
},
- {
- icon: Shield,
- color: 'text-emerald-400',
- label: de ? 'Kontinuierlich' : 'Continuous',
- desc: de
+ bidir: {
+ tint: '#fbbf24', icon: '⟷',
+ kicker: de ? 'Säule · Code' : 'Pillar · Code',
+ title: de ? 'Bidirektional' : 'Bidirectional Sync',
+ body: de
+ ? 'Compliance-Anforderungen fliessen direkt in den Code. Umgekehrt aktualisieren Code-Änderungen automatisch die Compliance-Dokumentation. Beide Seiten sind immer synchron — kein Informationsverlust zwischen Audit und Entwicklung.'
+ : 'Compliance requirements flow directly into code. Conversely, code changes automatically update compliance documentation. Both sides always stay in sync — no information loss between audit and development.',
+ bullets: de
+ ? ['Policy ↔ Code-Mapping via semantischem Diff', 'Git-nativ: jede Änderung als PR', 'Zero Drift zwischen Audit-Artefakten und Realität']
+ : ['Policy ↔ code mapping via semantic diff', 'Git-native: every change shipped as a PR', 'Zero drift between audit artefacts and reality'],
+ stat: { k: de ? 'Drift-Vorfälle' : 'drift incidents', v: de ? '0 seit März 2024' : '0 since Mar-2024' },
+ },
+ cont: {
+ tint: '#f59e0b', icon: '◎',
+ kicker: de ? 'Säule · Code' : 'Pillar · Code',
+ title: de ? 'Kontinuierlich' : 'Continuous, Not Yearly',
+ body: de
? 'Klassische Compliance prüft einmal im Jahr und hofft auf das Beste. Unsere Plattform prüft bei jeder Code-Änderung. Findings werden sofort zu Tickets mit konkreten Implementierungsvorschlägen im Issue-Tracker der Wahl.'
: 'Traditional compliance checks once a year and hopes for the best. Our platform checks on every code change. Findings immediately become tickets with concrete implementation proposals in the issue tracker of choice.',
+ bullets: de
+ ? ['CI-integrierte Validierung bei jedem Push', 'Fix-Vorschläge generiert, nicht nur gemeldet', 'Compliance-Frische: Minuten statt Monate']
+ : ['CI-integrated validation on each push', 'Fix suggestions generated, not just reported', 'Compliance freshness: minutes, not months'],
+ stat: { k: de ? 'Validierungen / Tag' : 'validations / day', v: '~2.400 / repo' },
},
- ]
+ trace: {
+ tint: '#a78bfa', icon: '⇄',
+ kicker: de ? 'Under the Hood' : 'Under the Hood',
+ title: de ? 'End-to-End Rückverfolgbarkeit' : 'End-to-End Traceability',
+ body: de
+ ? 'Regulatorische Anforderungen (Gesetz → Obligation → Control) deterministisch mit realem Systemzustand und Code verknüpft — inklusive revisionssicherem Evidence-Layer.'
+ : 'Regulatory requirements (law → obligation → control) deterministically linked to real system state and code — including audit-proof evidence layer.',
+ bullets: de
+ ? ['Versionierter Evidence-Chain, unveränderlich gespeichert', 'Ein Klick von Klausel bis Codezeile', 'Signierte Attestierungen pro Build']
+ : ['Versioned evidence chain stored immutably', 'One-click drill from clause to line of code', 'Signed attestations per build'],
+ },
+ engine: {
+ tint: '#c084fc', icon: '◉',
+ kicker: de ? 'Under the Hood' : 'Under the Hood',
+ title: de ? 'Continuous Compliance Engine' : 'Continuous Compliance Engine',
+ body: de
+ ? 'Statt punktueller Audits: Validierung bei jeder Änderung (Code, Infrastruktur, Prozesse) mit auditierbaren Nachweisen in Echtzeit.'
+ : 'Instead of point-in-time audits: validation on every change (code, infrastructure, processes) with auditable evidence in real time.',
+ bullets: de
+ ? ['Rule-Packs pro Framework (NIS-2, DORA, …)', 'Verarbeitet Code, IaC und Prozess-Events', 'Findings automatisch ans richtige Team geroutet']
+ : ['Rule packs per framework (NIS-2, DORA, …)', 'Handles code, infra-as-code, and process events', 'Findings routed to the right team automatically'],
+ },
+ opt: {
+ tint: '#fbbf24', icon: '✦',
+ kicker: de ? 'Under the Hood' : 'Under the Hood',
+ title: de ? 'Compliance Optimizer' : 'Compliance Optimizer',
+ body: de
+ ? 'Nicht nur „erlaubt/verboten", sondern die maximal zulässige Ausgestaltung jedes KI-Use-Cases. Deterministische Constraint-Optimierung zeigt den Sweet Spot zwischen Regulierung und Innovation — ersetzt 20–200k EUR Anwaltskosten.'
+ : 'Not just "allowed/forbidden" but the maximum permissible configuration of every AI use case. Deterministic constraint optimization shows the sweet spot between regulation and innovation — replaces EUR 20–200k in legal fees.',
+ bullets: de
+ ? ['ROI-Ranking jedes offenen Findings', 'Abwägung zwischen Liefergeschwindigkeit und Restrisiko', 'Low-Hanging-Wins zuerst']
+ : ['ROI-ranks every open finding', 'Balances speed of delivery with residual risk', 'Highlights low-hanging wins first'],
+ },
+ stack: {
+ tint: '#f59e0b', icon: '◎',
+ kicker: de ? 'Under the Hood' : 'Under the Hood',
+ title: de ? 'EU-Trust & Governance Stack' : 'EU Trust & Governance Stack',
+ body: de
+ ? 'Souveräne, DSGVO-/AI-Act-konforme Architektur (EU-Hosting, Isolation, Betriebsrat-Fähigkeit) — Marktzugang, den US-Lösungen strukturell nicht erreichen.'
+ : 'Sovereign, GDPR/AI Act compliant architecture (EU hosting, isolation, works council capability) — market access that US solutions structurally cannot achieve.',
+ bullets: de
+ ? ['DSGVO · NIS-2 · DORA · EU AI Act · ISO 27001 · BSI C5', 'EU-souveränes Hosting und Key-Management', 'Eine Plattform, ein Audit, eine Rechnung']
+ : ['DSGVO · NIS-2 · DORA · EU AI Act · ISO 27001 · BSI C5', 'EU-sovereign hosting and key-management', 'One platform, one audit, one bill'],
+ },
+ hub: {
+ tint: '#a78bfa', icon: '∞',
+ kicker: de ? 'Die Schleife' : 'The Loop',
+ title: de ? 'Compliance ↔ Code · Immer in Sync' : 'Compliance ↔ Code · Always in sync',
+ body: de
+ ? 'Die Plattform ist eine einzige geschlossene Schleife. Jede Policy-Änderung fliesst in den Code; jede Code-Änderung fliesst in die Policy zurück.'
+ : 'The platform is a single closed loop. Every policy change ripples into code; every code change ripples back into policy. That\'s the USP in one diagram.',
+ bullets: de
+ ? ['Single Source of Truth, zwei Oberflächen', 'Echtzeit-Sync, kein Batch-Abgleich', 'Auditoren, Entwickler und Sales fragen denselben Graphen ab']
+ : ['Single source of truth, two surfaces', 'Real-time sync, not batch reconciliation', 'Auditors, engineers and sales all query the same graph'],
+ },
+ }
+}
+
+// ── Pillar row ────────────────────────────────────────────────────────────────
+function PillarRow({ side, title, body, tint, onClick, active, isLight }: {
+ side: 'left' | 'right'
+ title: string; body: string; tint: string
+ onClick: () => void; active: boolean; isLight: boolean
+}) {
+ const [hover, setHover] = useState(false)
+ const lit = hover || active
+ const isLeft = side === 'left'
+ return (
+ setHover(true)}
+ onMouseLeave={() => setHover(false)}
+ style={{
+ display: 'flex', alignItems: 'flex-start', gap: 12,
+ flexDirection: isLeft ? 'row-reverse' : 'row',
+ textAlign: isLeft ? 'right' : 'left',
+ padding: '10px 14px', borderRadius: 10, cursor: 'pointer',
+ transition: 'transform .25s, background .25s, box-shadow .25s',
+ background: lit
+ ? `linear-gradient(${isLeft ? '270deg' : '90deg'}, ${tint}24 0%, ${tint}0a 70%, transparent 100%)`
+ : 'transparent',
+ boxShadow: lit
+ ? `0 10px 30px ${tint}26, inset 0 0 0 1px ${tint}44`
+ : 'inset 0 0 0 1px transparent',
+ transform: lit ? (isLeft ? 'translateX(-3px)' : 'translateX(3px)') : 'translateX(0)',
+ }}
+ >
+
◆
+
+
+ {title}
+ {isLeft ? '‹' : '›'}
+
+
{body}
+
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+ )
+}
+
+// ── Under-the-hood feature card ───────────────────────────────────────────────
+function FeatureCard({ icon, title, body, tint, Ticker, onClick, active, isLight }: {
+ icon: string; title: string; body: string; tint: string
+ Ticker: React.ComponentType<{ tint: string; isLight: boolean }>
+ onClick: () => void; active: boolean; isLight: boolean
+}) {
+ const [hover, setHover] = useState(false)
+ const lit = hover || active
+ return (
+ setHover(true)}
+ onMouseLeave={() => setHover(false)}
+ style={{
+ position: 'relative', padding: '13px 15px',
+ background: isLight
+ ? lit
+ ? `linear-gradient(180deg, ${tint}18 0%, ${tint}08 55%, rgba(248,250,252,.95) 100%)`
+ : 'linear-gradient(180deg, #ffffff, #f8fafc)'
+ : `linear-gradient(180deg, ${tint}${lit ? '2a' : '1a'} 0%, ${tint}07 55%, rgba(14,8,28,.85) 100%)`,
+ border: `1px solid ${lit ? tint : isLight ? 'rgba(0,0,0,.1)' : tint + '4a'}`,
+ borderRadius: 12,
+ boxShadow: lit
+ ? `0 18px 40px ${tint}33, 0 0 0 1px ${tint}66, inset 0 1px 0 ${tint}60`
+ : isLight
+ ? '0 2px 8px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.8)'
+ : `0 10px 24px rgba(0,0,0,.4), inset 0 1px 0 ${tint}35`,
+ minWidth: 0, cursor: 'pointer',
+ transform: lit ? 'translateY(-3px)' : 'translateY(0)',
+ transition: 'transform .25s, box-shadow .25s, background .25s, border-color .25s',
+ }}
+ >
+
+ {icon}
+ {title}
+ ↗
+
+
{body}
+
+
+ {item && (
+
+ e.stopPropagation()}
+ style={{
+ width: 560, maxWidth: '88%',
+ background: isLight
+ ? `linear-gradient(180deg, ${item.tint}10 0%, rgba(255,255,255,.98) 50%, rgba(248,250,252,.99) 100%)`
+ : `linear-gradient(180deg, ${item.tint}18 0%, rgba(20,10,40,.96) 50%, rgba(14,8,28,.98) 100%)`,
+ border: `1px solid ${item.tint}${isLight ? '44' : '66'}`,
+ borderRadius: 16,
+ boxShadow: isLight
+ ? `0 20px 60px rgba(0,0,0,.12), 0 0 40px ${item.tint}18, inset 0 1px 0 rgba(255,255,255,.9)`
+ : `0 30px 80px rgba(0,0,0,.6), 0 0 60px ${item.tint}33, inset 0 1px 0 ${item.tint}55`,
+ padding: '22px 26px',
+ color: isLight ? '#1a1a2e' : '#ece9f7',
+ }}
+ >
+
+
{item.icon}
+
+
+ {item.kicker}
+
+
{item.title}
+
+
+
+
+ {item.body}
+
+ {item.bullets && (
+
+ {item.bullets.map((b, i) => (
+
+ ▸
+ {b}
+
+ ))}
+
+ ●
+ {item.stat.k}
+ {item.stat.v}
+
+ )}
+
+
+ )}
+
+ )
+}
+
+// ── Star field ────────────────────────────────────────────────────────────────
+function StarField({ isLight }: { isLight: boolean }) {
+ const stars = useMemo(() => {
+ let s = 41
+ const r = () => { s = (s * 9301 + 49297) % 233280; return s / 233280 }
+ return Array.from({ length: 90 }, () => ({ x: r() * 100, y: r() * 100, size: r() * 1.4 + 0.3, op: r() * 0.5 + 0.15 }))
+ }, [])
+ if (isLight) return null
+ return (
+
+ {stars.map((st, i) => (
+
+ ))}
+
(null)
+ const open = (k: string) => setDetail(details[k])
+ const close = () => setDetail(null)
return (
-
-
+
+
+
+
USP
- {subtitle}
-
-
+
+ {/* ── MAIN CANVAS ───────────────────────────────────────────────── */}
+
+ {/* Ambient glow — dark only */}
+ {!isLight && (
+
+ )}
+
- {/* CENTER: Large circle */}
-
-
-
-
-
-
-
-
- Compliance
-
-
- {complianceItems.map((item, idx) => (
-
-
- ))}
-
-
-
-
-
- Code
-
-
- {codeItems.map((item, idx) => (
-
-
- ))}
-
-
-
-
◀
-
▶
-
◀
-
▶
+ {/* Interaction hint */}
+
+
- {/* 4 CORNER CARDS */}
- {capabilities.map((cap, idx) => {
- const Icon = cap.icon
- const posClass = idx === 0 ? 'top-0 left-0'
- : idx === 1 ? 'top-0 right-0'
- : idx === 2 ? 'bottom-0 left-0'
- : 'bottom-0 right-0'
- return (
-
-
-
-
-
{cap.label}
+ {/* Bridge */}
+
+
+
+ {/* LEFT — Compliance */}
+
+
+
+
+
+
open('rfq')}
+ active={detail?.title === details.rfq.title}
+ />
-
{cap.desc}
-
+
+
+
+
open('process')}
+ active={detail?.title === details.process.title}
+ />
+
+
- )
- })}
- {/* SVG connection lines */}
-
-
-
-
+ {/* CENTER hub */}
+
+
open('hub')}
+ style={{ cursor: 'pointer', transition: 'transform .25s, filter .25s' }}
+ onMouseEnter={e => { (e.currentTarget as HTMLDivElement).style.transform = 'scale(1.05)'; (e.currentTarget as HTMLDivElement).style.filter = 'brightness(1.15)' }}
+ onMouseLeave={e => { (e.currentTarget as HTMLDivElement).style.transform = 'scale(1)'; (e.currentTarget as HTMLDivElement).style.filter = 'brightness(1)' }}
+ >
+
+
- {/* MOAT — 3 Sätze */}
-
-
- {de ? 'Unser MOAT' : 'Our MOAT'}
-
-
-
-
-
-
End-to-End Traceability
+ {/* RIGHT — Code */}
+
+
+
+
+
+
open('bidir')}
+ active={detail?.title === details.bidir.title}
+ />
+
+
+
+
+
open('cont')}
+ active={detail?.title === details.cont.title}
+ />
+
+
+
- {de
- ? 'Regulatorische Anforderungen (Gesetz → Obligation → Control) deterministisch mit realem Systemzustand und Code verknüpft — inklusive revisionssicherem Evidence-Layer.'
- : 'Regulatory requirements (law → obligation → control) deterministically linked to real system state and code — including audit-proof evidence layer.'}
-
-
-
-
-
Continuous Compliance Engine
-
-
- {de
- ? 'Statt punktueller Audits: Validierung bei jeder Änderung (Code, Infrastruktur, Prozesse) mit auditierbaren Nachweisen in Echtzeit.'
- : 'Instead of point-in-time audits: validation on every change (code, infrastructure, processes) with auditable evidence in real time.'}
-
-
-
-
-
-
Compliance Optimizer
-
- {de
- ? 'Nicht nur „erlaubt/verboten", sondern die maximal zulässige Ausgestaltung jedes KI-Use-Cases. Deterministische Constraint-Optimierung zeigt den Sweet Spot zwischen Regulierung und Innovation — ersetzt 20-200k EUR Anwaltskosten.'
- : 'Not just "allowed/forbidden" but the maximum permissible configuration of every AI use case. Deterministic constraint optimization shows the sweet spot between regulation and innovation — replaces EUR 20-200k in legal fees.'}
-
-
-
-
-
EU-Trust & Governance Stack
-
-
- {de
- ? 'Souveräne, DSGVO-/AI-Act-konforme Architektur (EU-Hosting, Isolation, Betriebsrat-Fähigkeit) — Marktzugang, den US-Lösungen strukturell nicht erreichen.'
- : 'Sovereign, GDPR/AI Act compliant architecture (EU hosting, isolation, works council capability) — market access that US solutions structurally cannot achieve.'}
-
-
-
+
- {/* Killer Quote */}
-
-
-
+ {/* Under the Hood */}
+
+
+
+
+ open('trace')}
+ active={detail?.title === details.trace.title}
+ Ticker={TickTrace}
+ />
+ open('engine')}
+ active={detail?.title === details.engine.title}
+ Ticker={TickEngine}
+ />
+ open('opt')}
+ active={detail?.title === details.opt.title}
+ Ticker={TickOptimizer}
+ />
+ open('stack')}
+ active={detail?.title === details.stack.title}
+ Ticker={TickStack}
+ />
+
+
+
+ {/* Killer quote */}
+
+ "
{de
- ? '„Jeder kann sagen, was verboten ist. Kaum jemand kann sagen, wie weit du maximal gehen kannst. Das ist unser Produkt."'
- : '"Everyone can say what is forbidden. Almost no one can say how far you can go. That is our product."'}
-
+ ? 'Jeder kann sagen, was verboten ist. Kaum jemand kann sagen, wie weit du maximal gehen kannst. Das ist unser Produkt.'
+ : 'Anyone can say what\'s forbidden. Almost no one can tell you how far you can actually go. That\'s our product.'}
+ "
+
+
+