From 8a4e1968640d876d8aa286d43cc73f70d08b3231 Mon Sep 17 00:00:00 2001 From: Sharang Parnerkar <30073382+mighty840@users.noreply.github.com> Date: Tue, 21 Apr 2026 10:03:18 +0200 Subject: [PATCH] feat(pitch-deck): redesign USP slide with symmetric bridge composition MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Port Claude Design's USP v2 exactly: Compliance ↔ Code bridge with a central glowing orb, two pillar rows per column, animated SVG flow connectors, and four Under-the-Hood feature cards with live tickers. Detail modal (Framer Motion AnimatePresence) slides in on click for all 9 interactive elements. Star field background. All text is our actual content (RFQ Verification, Process Compliance, Bidirectional Sync, Continuous, End-to-End Traceability, Compliance Optimizer, EU Trust Stack, killer quote). Full DE/EN i18n. Co-Authored-By: Claude Sonnet 4.6 --- pitch-deck/components/slides/USPSlide.tsx | 931 +++++++++++++++++----- 1 file changed, 749 insertions(+), 182 deletions(-) diff --git a/pitch-deck/components/slides/USPSlide.tsx b/pitch-deck/components/slides/USPSlide.tsx index 7c0904b..84ece33 100644 --- a/pitch-deck/components/slides/USPSlide.tsx +++ b/pitch-deck/components/slides/USPSlide.tsx @@ -1,222 +1,789 @@ 'use client' +import { useState, useEffect, useRef, useMemo } from 'react' +import { motion, AnimatePresence } from 'framer-motion' import { Language } from '@/lib/types' import GradientText from '../ui/GradientText' import FadeInView from '../ui/FadeInView' -import GlassCard from '../ui/GlassCard' -import { - FileCheck, - Code, - Zap, - Shield, - GitPullRequest, - ArrowLeftRight, -} from 'lucide-react' +import { X } from 'lucide-react' -interface USPSlideProps { - lang: Language +interface USPSlideProps { lang: Language } + +const MONO: React.CSSProperties = { + fontFamily: '"JetBrains Mono","SF Mono",ui-monospace,monospace', + fontVariantNumeric: 'tabular-nums', } -export default function USPSlide({ lang }: USPSlideProps) { - const de = lang === 'de' +const CSS_KF = ` + @keyframes uspFlowR { 0%{stroke-dashoffset:0} 100%{stroke-dashoffset:-14px} } + @keyframes uspSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} } + @keyframes uspPulse { + 0%,100% { box-shadow: 0 0 38px rgba(167,139,250,.55), 0 0 80px rgba(167,139,250,.2), inset 0 3px 0 rgba(255,255,255,.35), inset 0 -6px 12px rgba(0,0,0,.35); } + 50% { box-shadow: 0 0 58px rgba(167,139,250,.85), 0 0 110px rgba(167,139,250,.35), inset 0 3px 0 rgba(255,255,255,.4), inset 0 -6px 12px rgba(0,0,0,.35); } + } + @keyframes uspHeading { + 0%,100% { text-shadow: 0 0 22px rgba(167,139,250,.3); } + 50% { text-shadow: 0 0 36px rgba(167,139,250,.55); } + } +` - const subtitle = de - ? 'Die erste Plattform, die Compliance-Dokumente und tatsächliche Code-Umsetzung verbindet' - : 'The first platform that connects compliance documents with actual code implementation' +// ── Ticker ──────────────────────────────────────────────────────────────────── +function useTicker(fn: () => void, min = 180, max = 420, skip = 0.1) { + const ref = useRef(fn) + ref.current = fn + useEffect(() => { + let t: ReturnType + const loop = () => { + if (Math.random() > skip) ref.current() + t = setTimeout(loop, min + Math.random() * (max - min)) + } + loop() + return () => clearTimeout(t) + }, [min, max, skip]) +} - const complianceItems = de - ? ['DSGVO-Dokumente', 'Audit-Management', 'RFQ-Anforderungen', 'CE-Bewertungen'] - : ['GDPR documents', 'Audit management', 'RFQ requirements', 'CE assessments'] +function TickerShell({ tint, children }: { tint: string; children: React.ReactNode }) { + return ( +
{children}
+ ) +} - const codeItems = de - ? ['SAST / DAST / SBOM', 'Pentesting', 'Issue-Tracker', 'Auto-Fixes'] - : ['SAST / DAST / SBOM', 'Pentesting', 'Issue tracker', 'Auto-fixes'] +function TickTrace({ tint }: { tint: string }) { + const [n, setN] = useState(12748) + useTicker(() => setN(v => v + 1 + Math.floor(Math.random() * 3)), 250, 500) + return ( + + ● + trace + {n.toLocaleString()} + evidence-chain + + ) +} - 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 TickEngine({ tint }: { tint: string }) { + 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 }: { tint: string }) { + 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 }: { tint: string }) { + 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 }: { + side: 'left' | 'right' + title: string; body: string; tint: string + onClick: () => void; active: 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}
+
+
+ ) +} + +// ── Column header ───────────────────────────────────────────────────────────── +function ColHeader({ side, label, color, icon, sub }: { + side: 'left' | 'right'; label: string; color: string; icon: string; sub: string +}) { + const isLeft = side === 'left' + return ( +
+
{icon}
+
+
{label}
+
{sub}
+
+
+ ) +} + +// ── Central hub ─────────────────────────────────────────────────────────────── +function CentralHub({ caption }: { caption: string }) { + return ( +
+
+
+
+ + + +
+
{caption}
+
+ ) +} + +// ── Bridge SVG connectors ───────────────────────────────────────────────────── +function BridgeConnectors() { + const rfpY = 130 + const sub2Y = 250 + const hubCx = 500 + const hubR = 72 + return ( + + + + + + + + + + + + + + + + + + + + {([rfpY, sub2Y] as number[]).map(y => ( + + + + + + + ))} + + + + + + + + + + + ) +} + +// ── Under-the-hood feature card ─────────────────────────────────────────────── +function FeatureCard({ icon, title, body, tint, Ticker, onClick, active }: { + icon: string; title: string; body: string; tint: string + Ticker: React.ComponentType<{ tint: string }> + onClick: () => void; active: boolean +}) { + const [hover, setHover] = useState(false) + const lit = hover || active + return ( +
setHover(true)} + onMouseLeave={() => setHover(false)} + style={{ + position: 'relative', padding: '13px 15px', + background: `linear-gradient(180deg, ${tint}${lit ? '2a' : '1a'} 0%, ${tint}07 55%, rgba(14,8,28,.85) 100%)`, + border: `1px solid ${lit ? tint : tint + '4a'}`, + borderRadius: 12, + boxShadow: lit + ? `0 18px 40px ${tint}33, 0 0 0 1px ${tint}66, inset 0 1px 0 ${tint}60` + : `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}
+ +
+ ) +} + +// ── Detail modal ────────────────────────────────────────────────────────────── +function DetailModal({ item, onClose }: { item: DetailItem | null; onClose: () => void }) { + useEffect(() => { + if (!item) return + const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose() } + window.addEventListener('keydown', onKey) + return () => window.removeEventListener('keydown', onKey) + }, [item, onClose]) + + return ( + + {item && ( + + e.stopPropagation()} + style={{ + width: 560, maxWidth: '88%', + background: `linear-gradient(180deg, ${item.tint}18 0%, rgba(20,10,40,.96) 50%, rgba(14,8,28,.98) 100%)`, + border: `1px solid ${item.tint}66`, + borderRadius: 16, + boxShadow: `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: '#ece9f7', + }} + > +
+
{item.icon}
+
+
+ {item.kicker} +
+
{item.title}
+
+ +
+
+ {item.body} +
+ {item.bullets && ( +
+ {item.bullets.map((b, i) => ( +
+ ▸ + {b} +
+ ))} +
+ )} + {item.stat && ( +
+ ● + {item.stat.k} + {item.stat.v} +
+ )} + + + )} + + ) +} + +// ── Star field ──────────────────────────────────────────────────────────────── +function StarField() { + 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 })) + }, []) + return ( +
+ {stars.map((st, i) => ( +
+ ))} +
+ ) +} + +// ── Main slide ──────────────────────────────────────────────────────────────── +export default function USPSlide({ lang }: USPSlideProps) { + const de = lang === 'de' + const details = getDetails(de) + const [detail, setDetail] = useState(null) + const open = (k: string) => setDetail(details[k]) + const close = () => setDetail(null) return (
- -

+ + + +

USP

-

{subtitle}

 - -
+ + {/* ── MAIN CANVAS ───────────────────────────────────────────────── */} +
+ {/* Ambient glow */} +
+ - {/* CENTER: Large circle */} -
-
-
- -
-
- ∞ -
-
- -
-
- - Compliance -
-
    - {complianceItems.map((item, idx) => ( -
  • - - {item} -
    • - ))} -
-
- -
-
- - Code -
-
    - {codeItems.map((item, idx) => ( -
  • - - {item} -
    • - ))} -
-
- -
◀
-
▶
-
◀
-
▶
+ {/* Interaction hint */} +
+ + {de ? 'Element anklicken' : 'Click any element'}
- {/* 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}

+ {/* Heading */} +
+
+ {de ? 'Alleinstellungsmerkmal' : 'Unique Selling Proposition'} +
+

+ {de ? 'Die erste Plattform, die ' : 'The first platform bridging '} + + {de ? 'Compliance' : 'compliance'} + + {' ↔ '} + + {de ? 'Code' : 'code'} + + {de ? ' verbindet' : ''} +

+
+ + {/* 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 */} +

+
+ + {de ? 'Unter der Haube' : '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.'} + " +
+ +