feat: Onepager komplett überarbeitet

- Problem + Lösung: Bullet Points statt Fließtext
- USP: größere Überschrift + "100% Datensouveränität"
- KPIs: 1M Finanzierung entfernt, 80% Zeitersparnis + 10x günstiger hinzu
- Scanner: "Integration in Kundenprozesse" statt "Jira-Integration"
- 8 Module: gleiche Optik wie Folie 7, mit Icons + Beschreibungen
  8. Modul: "Sichere Kommunikation: Chat + Video mit AI Notetaker"
- Geschäftsmodell → Kundenersparnis (Pentests 30k, CE 20k, Audit 60k+)
- Wettbewerber: + Umsatz (ARR) + Investsumme
- Umlaute überall korrekt (ä, ö, ü)
- COMPLAI mit farbigem AI

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-03-27 12:31:24 +01:00
parent c43d39fd7f
commit 90c7f9d8ec

View File

@@ -280,44 +280,88 @@ export default function ExecutiveSummarySlide({ lang, data }: ExecutiveSummarySl
{/* USP Banner */} {/* USP Banner */}
<FadeInView delay={0.1} className="mb-4"> <FadeInView delay={0.1} className="mb-4">
<div className="bg-gradient-to-r from-indigo-500/20 to-purple-500/20 border border-indigo-500/30 rounded-2xl px-5 py-2.5 text-center"> <div className="bg-gradient-to-r from-indigo-500/20 to-purple-500/20 border border-indigo-500/30 rounded-2xl px-5 py-3 text-center">
<span className="text-xs font-bold text-indigo-400 uppercase tracking-wider">{es.usp}</span> <span className="text-base font-bold text-indigo-400 uppercase tracking-wider">{es.usp}</span>
<p className="text-sm text-white/80 mt-1">{es.uspText}</p> <p className="text-sm text-white/80 mt-1">{es.uspText}</p>
<p className="text-sm font-semibold text-indigo-300 mt-1">{de ? '100% Datensouveränität' : '100% Data Sovereignty'}</p>
</div> </div>
</FadeInView> </FadeInView>
{/* Problem + Solution */} {/* Problem + Solution — Bullet Points */}
<div className="grid md:grid-cols-2 gap-3 mb-4"> <div className="grid md:grid-cols-2 gap-3 mb-4">
<GlassCard delay={0.15} hover={false} className="p-3"> <GlassCard delay={0.15} hover={false} className="p-4">
<div className="flex items-center gap-2 mb-1.5"> <div className="flex items-center gap-2 mb-2">
<Shield className="w-3.5 h-3.5 text-red-400" /> <Shield className="w-4 h-4 text-red-400" />
<h3 className="text-xs font-bold text-red-400 uppercase tracking-wider">{es.problem}</h3> <h3 className="text-sm font-bold text-red-400 uppercase tracking-wider">{es.problem}</h3>
</div>
<div className="space-y-1.5">
{(de ? [
'Um wettbewerbsfähig zu bleiben, müssen Unternehmen KI einsetzen',
'US-basierte KI-Anbieter in sensibelste Systeme integrieren? Zu riskant.',
'Wer auf US-SaaS verzichtet, verliert den Anschluss an die KI-Transformation',
'Wer sie nutzt, riskiert Datenabfluss und regulatorische Unsicherheit',
'Über 30.000 Unternehmen in DE durch AI Act, CRA, NIS2 belastet',
'Ergebnis: Entscheidungsblockade statt Innovation',
] : [
'Companies must adopt AI to stay competitive',
'Integrating US AI providers into core systems? Too risky.',
'Avoiding US SaaS means falling behind the AI transformation',
'Using them risks data leakage and regulatory uncertainty',
'Over 30,000 companies in Germany affected by AI Act, CRA, NIS2',
'Result: Decision paralysis instead of innovation',
]).map((item, idx) => (
<p key={idx} className="text-xs text-white/70 pl-4 relative leading-relaxed">
<span className="absolute left-0 top-1 w-1.5 h-1.5 rounded-full bg-red-400/60" />
{item}
</p>
))}
</div> </div>
<p className="text-sm text-white/70 leading-relaxed">{es.problemText}</p>
</GlassCard> </GlassCard>
<GlassCard delay={0.2} hover={false} className="p-3"> <GlassCard delay={0.2} hover={false} className="p-4">
<div className="flex items-center gap-2 mb-1.5"> <div className="flex items-center gap-2 mb-2">
<CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" /> <CheckCircle2 className="w-4 h-4 text-emerald-400" />
<h3 className="text-xs font-bold text-emerald-400 uppercase tracking-wider">{es.solution}</h3> <h3 className="text-sm font-bold text-emerald-400 uppercase tracking-wider">{es.solution}</h3>
</div>
<div className="space-y-1.5">
{(de ? [
'Ersetzt punktuelle Audits durch kontinuierliche Compliance & Security',
'SAST, DAST, SBOM und Pentests bei jeder Code-Änderung automatisch',
'VVT, TOMs, DSFA, Löschfristen, CE-Risikobeurteilungen fortlaufend generiert',
'Audit-Abweichungen End-to-End: Rollen, Fristen, Tickets, Eskalation an GF',
'Nahtlose Integration in bestehende Workflows (z.\u00a0B. Jira)',
'BSI-Cloud DE oder OVH FR — kontinuierlich statt punktuell',
] : [
'Replaces spot audits with continuous compliance & security',
'SAST, DAST, SBOM and pentests automatically on every code change',
'RoPA, TOMs, DPIA, retention, CE risk assessments continuously generated',
'Audit deviations end-to-end: roles, deadlines, tickets, escalation to mgmt',
'Seamless integration into existing workflows (e.g. Jira)',
'BSI cloud DE or OVH FR — continuous instead of periodic',
]).map((item, idx) => (
<p key={idx} className="text-xs text-white/70 pl-4 relative leading-relaxed">
<span className="absolute left-0 top-1 w-1.5 h-1.5 rounded-full bg-emerald-400/60" />
{item}
</p>
))}
</div> </div>
<p className="text-sm text-white/70 leading-relaxed">{es.solutionText}</p>
</GlassCard> </GlassCard>
</div> </div>
{/* KPI Row */} {/* KPI Row — 6 Kacheln (ohne Finanzierung, mit Zeitersparnis + Pentest-Kosten) */}
<FadeInView delay={0.25} className="mb-4"> <FadeInView delay={0.25} className="mb-4">
<div className="grid grid-cols-3 md:grid-cols-5 gap-2"> <div className="grid grid-cols-3 md:grid-cols-6 gap-2">
{[ {[
{ value: '25.000+', label: es.controls, icon: Shield, color: '#6366f1' }, { value: '25.000+', label: es.controls, icon: Shield, color: '#6366f1' },
{ value: '110', label: es.regulations, icon: Brain, color: '#60a5fa' }, { value: '110', label: es.regulations, icon: Brain, color: '#60a5fa' },
{ value: '10', label: es.industries, icon: Target, color: '#34d399' }, { value: '10', label: es.industries, icon: Target, color: '#34d399' },
{ value: '500K+', label: es.linesOfCode, icon: Cpu, color: '#fbbf24' }, { value: '500K+', label: es.linesOfCode, icon: Cpu, color: '#fbbf24' },
{ value: amountLabel, label: es.theAsk, icon: TrendingUp, color: '#f472b6' }, { value: '80%', label: de ? 'Zeitersparnis bei\nCompliance-Prüfungen' : 'Time saved on\ncompliance checks', icon: TrendingUp, color: '#10b981' },
{ value: '10x', label: de ? 'Günstiger als\nmanuelle Pentests' : 'Cheaper than\nmanual pentests', icon: Shield, color: '#f472b6' },
].map((kpi, idx) => ( ].map((kpi, idx) => (
<div key={idx} className="bg-white/[0.06] backdrop-blur-xl border border-white/10 rounded-xl p-2.5 text-center"> <div key={idx} className="bg-white/[0.06] backdrop-blur-xl border border-white/10 rounded-xl p-2.5 text-center">
<kpi.icon className="w-3.5 h-3.5 mx-auto mb-0.5 opacity-60" style={{ color: kpi.color }} /> <kpi.icon className="w-3.5 h-3.5 mx-auto mb-0.5 opacity-60" style={{ color: kpi.color }} />
<p className="text-lg font-bold text-white">{kpi.value}</p> <p className="text-lg font-bold text-white">{kpi.value}</p>
<p className="text-[10px] text-white/40 uppercase tracking-wider">{kpi.label}</p> <p className="text-[10px] text-white/40 uppercase tracking-wider whitespace-pre-line">{kpi.label}</p>
</div> </div>
))} ))}
</div> </div>
@@ -333,11 +377,11 @@ export default function ExecutiveSummarySlide({ lang, data }: ExecutiveSummarySl
<p className="text-[10px] text-white/30 uppercase tracking-wider mb-2">{de ? 'Kontinuierlicher KI-Sicherheitsagent' : 'Continuous AI Security Agent'}</p> <p className="text-[10px] text-white/30 uppercase tracking-wider mb-2">{de ? 'Kontinuierlicher KI-Sicherheitsagent' : 'Continuous AI Security Agent'}</p>
<div className="space-y-1"> <div className="space-y-1">
{[ {[
de ? 'SAST + DAST + SBOM — bei jeder Code-Aenderung' : 'SAST + DAST + SBOM — on every code change', de ? 'SAST + DAST + SBOM — bei jeder Code-Änderung' : 'SAST + DAST + SBOM — on every code change',
de ? 'KI-gestuetztes Pentesting — kontinuierlich statt jaehrlich' : 'AI-powered pentesting — continuous not annual', de ? 'KI-gestütztes Pentesting — kontinuierlich statt jährlich' : 'AI-powered pentesting — continuous not annual',
de ? 'CE-Software-Risikobeurteilung fuer Maschinenverordnung' : 'CE software risk assessment for Machinery Regulation', de ? 'CE-Software-Risikobeurteilung für Maschinenverordnung' : 'CE software risk assessment for Machinery Regulation',
de ? 'Jira-Integration — Tickets mit Implementierungsvorschlaegen' : 'Jira integration — tickets with implementation suggestions', de ? 'Integration in Kundenprozesse — Tickets mit Implementierungsvorschlägen' : 'Integration into customer processes — tickets with implementation suggestions',
de ? 'Lueckenloser Audit-Trail von Erkennung bis Behebung' : 'Complete audit trail from detection to remediation', de ? 'Lückenloser Audit-Trail von Erkennung bis Behebung' : 'Complete audit trail from detection to remediation',
].map((item, idx) => ( ].map((item, idx) => (
<p key={idx} className="text-xs text-white/60 pl-3 relative"> <p key={idx} className="text-xs text-white/60 pl-3 relative">
<span className="absolute left-0 top-1 w-1.5 h-1.5 rounded-full bg-indigo-400/60" /> <span className="absolute left-0 top-1 w-1.5 h-1.5 rounded-full bg-indigo-400/60" />
@@ -350,15 +394,15 @@ export default function ExecutiveSummarySlide({ lang, data }: ExecutiveSummarySl
<GlassCard delay={0.35} hover={false} className="p-3 border-t-2 border-t-cyan-500"> <GlassCard delay={0.35} hover={false} className="p-3 border-t-2 border-t-cyan-500">
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1">
<Server className="w-4 h-4 text-cyan-400" /> <Server className="w-4 h-4 text-cyan-400" />
<h3 className="text-sm font-bold text-cyan-400">ComplAI Plattform</h3> <h3 className="text-sm font-bold text-cyan-400">COMPL<span className="text-indigo-400">AI</span> Plattform</h3>
</div> </div>
<p className="text-[10px] text-white/30 uppercase tracking-wider mb-2">{de ? 'Souveraene Compliance-Infrastruktur' : 'Sovereign Compliance Infrastructure'}</p> <p className="text-[10px] text-white/30 uppercase tracking-wider mb-2">{de ? 'Souveräne Compliance-Infrastruktur' : 'Sovereign Compliance Infrastructure'}</p>
<div className="space-y-1"> <div className="space-y-1">
{[ {[
de ? 'VVT, TOMs, DSFA, Loeschfristen — automatisch generiert' : 'RoPA, TOMs, DPIA, retention — auto-generated', de ? 'VVT, TOMs, DSFA, Löschfristen — automatisch generiert' : 'RoPA, TOMs, DPIA, retention — auto-generated',
de ? 'Audit Manager — Abweichungen End-to-End mit Eskalation' : 'Audit Manager — deviations end-to-end with escalation', de ? 'Audit Manager — Abweichungen End-to-End mit Eskalation' : 'Audit Manager — deviations end-to-end with escalation',
de ? 'Compliance LLM — GPT fuer Text und Audio, EU-gehostet' : 'Compliance LLM — GPT for text and audio, EU-hosted', de ? 'Compliance LLM — GPT für Text und Audio, EU-gehostet' : 'Compliance LLM — GPT for text and audio, EU-hosted',
de ? 'Academy — Online-Schulungen fuer GF und Mitarbeiter' : 'Academy — online training for management and employees', de ? 'Academy — Online-Schulungen für GF und Mitarbeiter' : 'Academy — online training for management and employees',
de ? 'BSI-Cloud DE / OVH FR — Jitsi, Matrix, volle Integration' : 'BSI Cloud DE / OVH FR — Jitsi, Matrix, full integration', de ? 'BSI-Cloud DE / OVH FR — Jitsi, Matrix, volle Integration' : 'BSI Cloud DE / OVH FR — Jitsi, Matrix, full integration',
].map((item, idx) => ( ].map((item, idx) => (
<p key={idx} className="text-xs text-white/60 pl-3 relative"> <p key={idx} className="text-xs text-white/60 pl-3 relative">
@@ -394,41 +438,46 @@ export default function ExecutiveSummarySlide({ lang, data }: ExecutiveSummarySl
</div> </div>
</FadeInView> </FadeInView>
{/* 8 Module */} {/* 8 Module — gleiche Optik wie Folie 7 */}
<FadeInView delay={0.45} className="mb-4"> <FadeInView delay={0.45} className="mb-4">
<h3 className="text-xs font-bold text-white/40 uppercase tracking-wider mb-2">{de ? 'Modularer Baukasten' : 'Modular Toolkit'}</h3> <h3 className="text-xs font-bold text-white/40 uppercase tracking-wider mb-2">{de ? 'Modularer Baukasten' : 'Modular Toolkit'}</h3>
<div className="grid grid-cols-4 md:grid-cols-8 gap-1.5"> <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
{[ {[
{ name: 'Code Security', color: '#ef4444' }, { name: 'Code Security', desc: de ? 'SAST, DAST, SBOM, kontinuierliches Pentesting' : 'SAST, DAST, SBOM, continuous pentesting', color: '#ef4444', icon: ScanLine },
{ name: de ? 'CE-Risiko' : 'CE Risk', color: '#f97316' }, { name: de ? 'CE-Risikobeurteilung' : 'CE Risk Assessment', desc: de ? 'Software-Risikoanalyse für CE-Kennzeichnung' : 'Software risk assessment for CE marking', color: '#f97316', icon: Shield },
{ name: de ? 'Compliance Docs' : 'Compliance Docs', color: '#6366f1' }, { name: de ? 'Compliance-Dokumente' : 'Compliance Documents', desc: de ? 'VVT, DSFA, TOMs, Löschfristen, AGB, DSE' : 'RoPA, DPIA, TOMs, retention, T&Cs, privacy', color: '#6366f1', icon: FileText },
{ name: 'Audit Manager', color: '#10b981' }, { name: 'Audit Manager', desc: de ? 'Abweichungen, Nachweise, Stichtage, Eskalation' : 'Deviations, evidence, deadlines, escalation', color: '#10b981', icon: CheckCircle2 },
{ name: 'Compliance LLM', color: '#a855f7' }, { name: 'Compliance LLM', desc: de ? 'GPT für Text und Audio — sicher in der EU' : 'GPT for text and audio — securely in EU', color: '#a855f7', icon: Brain },
{ name: 'Academy', color: '#ec4899' }, { name: 'Academy', desc: de ? 'Online-Schulungen für GF und Mitarbeiter' : 'Online training for management and employees', color: '#ec4899', icon: GraduationCap },
{ name: 'Jira-Integration', color: '#0ea5e9' }, { name: de ? 'Integration in Kundenprozesse' : 'Process Integration', desc: de ? 'Jira, Ticketsysteme, Workflows' : 'Jira, ticket systems, workflows', color: '#0ea5e9', icon: Cpu },
{ name: 'Full Compliance', color: '#22c55e' }, { name: de ? 'Sichere Kommunikation' : 'Secure Communication', desc: de ? 'Chat + Video mit AI Notetaker' : 'Chat + video with AI notetaker', color: '#22c55e', icon: Users },
].map((mod, idx) => ( ].map((mod, idx) => {
<div key={idx} className="bg-white/[0.04] border border-white/[0.06] rounded-lg py-1.5 px-1 text-center"> const Icon = mod.icon
<div className="w-2 h-2 rounded-full mx-auto mb-1" style={{ backgroundColor: mod.color }} /> return (
<p className="text-[8px] text-white/60 font-medium leading-tight">{mod.name}</p> <GlassCard key={idx} delay={0.45 + idx * 0.03} hover className="p-3 text-center">
</div> <Icon className="w-5 h-5 mx-auto mb-2" style={{ color: mod.color }} />
))} <p className="text-xs font-bold text-white mb-1">{mod.name}</p>
<p className="text-[10px] text-white/40 leading-tight">{mod.desc}</p>
</GlassCard>
)
})}
</div> </div>
</FadeInView> </FadeInView>
{/* Bottom: Geschäftsmodell + Gründer + Wettbewerber + Funding */} {/* Bottom: Kundenersparnis + Gründer + Wettbewerber + Markt */}
<div className="grid md:grid-cols-4 gap-3 mb-4"> <div className="grid md:grid-cols-4 gap-3 mb-4">
<GlassCard delay={0.5} hover={false} className="p-3"> <GlassCard delay={0.5} hover={false} className="p-3">
<h3 className="text-xs font-bold text-purple-400 uppercase tracking-wider mb-1.5">{de ? 'Geschäftsmodell' : 'Business Model'}</h3> <h3 className="text-xs font-bold text-emerald-400 uppercase tracking-wider mb-1.5">{de ? 'Kundenersparnis' : 'Customer Savings'}</h3>
<div className="space-y-1 text-xs text-white/60"> <div className="space-y-1 text-xs text-white/60">
<p><strong className="text-white/80">SaaS Cloud</strong> BSI DE / OVH FR</p> <div className="flex justify-between"><span>Pentests</span><strong className="text-emerald-300">30.000 EUR</strong></div>
<p><strong className="text-white/80">{de ? 'Modular' : 'Modular'}</strong> {de ? 'Einzeln oder Full Compliance' : 'Single or full compliance'}</p> <div className="flex justify-between"><span>CE-Beurteilungen</span><strong className="text-emerald-300">20.000 EUR</strong></div>
<p><strong className="text-white/80">ROI</strong> {de ? 'Kunde spart 50k+/Jahr' : 'Customer saves 50k+/year'}</p> <div className="flex justify-between"><span>Auditmanager</span><strong className="text-emerald-300">60.000+ EUR</strong></div>
<div className="flex justify-between border-t border-white/10 pt-1 mt-1"><span className="font-bold text-white/80">{de ? 'Ersparnis/Jahr' : 'Savings/year'}</span><strong className="text-emerald-300">50-110k EUR</strong></div>
</div> </div>
</GlassCard> </GlassCard>
<GlassCard delay={0.55} hover={false} className="p-3"> <GlassCard delay={0.55} hover={false} className="p-3">
<h3 className="text-xs font-bold text-emerald-400 uppercase tracking-wider mb-1.5">{de ? 'Gründer' : 'Founders'}</h3> <h3 className="text-xs font-bold text-indigo-400 uppercase tracking-wider mb-1.5">{de ? 'Gründer' : 'Founders'}</h3>
<div className="space-y-1"> <div className="space-y-1">
{data.team?.slice(0, 4).map((m, idx) => ( {data.team?.slice(0, 4).map((m, idx) => (
<div key={idx} className="flex justify-between items-center"> <div key={idx} className="flex justify-between items-center">
@@ -443,33 +492,28 @@ export default function ExecutiveSummarySlide({ lang, data }: ExecutiveSummarySl
<h3 className="text-xs font-bold text-red-400 uppercase tracking-wider mb-1.5">{de ? 'Wettbewerber' : 'Competitors'}</h3> <h3 className="text-xs font-bold text-red-400 uppercase tracking-wider mb-1.5">{de ? 'Wettbewerber' : 'Competitors'}</h3>
<div className="space-y-0.5"> <div className="space-y-0.5">
{[ {[
{ name: 'Vanta', flag: '🇺🇸', val: '$4,15 Mrd.' }, { name: 'Vanta', flag: '🇺🇸', rev: '$220M ARR', invest: '$504M', val: '$4,15B' },
{ name: 'Drata', flag: '🇺🇸', val: '$2 Mrd.' }, { name: 'Drata', flag: '🇺🇸', rev: '$100M ARR', invest: '$328M', val: '$2B' },
{ name: 'Sprinto', flag: '🇮🇳', val: 'Series B' }, { name: 'Sprinto', flag: '🇮🇳', rev: '—', invest: '$32M', val: 'Series B' },
{ name: 'DataGuard', flag: '🇩🇪', val: '€341 Mio.' }, { name: 'DataGuard', flag: '🇩🇪', rev: '€52M', invest: '€80M', val: '€341M' },
{ name: 'Proliance', flag: '🇩🇪', val: 'Pre-Seed' }, { name: 'Proliance', flag: '🇩🇪', rev: '—', invest: 'Pre-Seed', val: '—' },
{ name: 'heyData', flag: '🇩🇪', val: 'Series A' }, { name: 'heyData', flag: '🇩🇪', rev: '—', invest: '€18M', val: 'Series A' },
].map((c, idx) => ( ].map((c, idx) => (
<div key={idx} className="flex items-center justify-between text-[10px]"> <div key={idx} className="flex items-center justify-between text-[9px] gap-1">
<span className="text-white/70">{c.flag} {c.name}</span> <span className="text-white/70 shrink-0">{c.flag} {c.name}</span>
<span className="text-white/40 font-mono text-[9px]">{c.val}</span> <span className="text-white/30 text-[8px]">{c.rev}</span>
<span className="text-white/40 font-mono text-[8px] shrink-0">{c.invest}</span>
</div> </div>
))} ))}
</div> </div>
</GlassCard> </GlassCard>
<GlassCard delay={0.65} hover={false} className="p-3"> <GlassCard delay={0.65} hover={false} className="p-3">
<h3 className="text-xs font-bold text-amber-400 uppercase tracking-wider mb-1.5">{es.theAsk} {amountLabel}</h3> <h3 className="text-xs font-bold text-amber-400 uppercase tracking-wider mb-1.5">{de ? 'Markt' : 'Market'}</h3>
<div className="space-y-0.5 text-xs"> <div className="space-y-0.5 text-xs">
<div className="flex justify-between"><span className="text-white/40">TAM</span><span className="text-white/70">{tam ? formatEur(tam.value_eur, lang) : '—'}</span></div> <div className="flex justify-between"><span className="text-white/40">TAM</span><span className="text-white/70">{tam ? formatEur(tam.value_eur, lang) : '—'}</span></div>
<div className="flex justify-between"><span className="text-white/40">SAM</span><span className="text-white/70">{sam ? formatEur(sam.value_eur, lang) : '—'}</span></div> <div className="flex justify-between"><span className="text-white/40">SAM</span><span className="text-white/70">{sam ? formatEur(sam.value_eur, lang) : '—'}</span></div>
<div className="flex justify-between"><span className="text-white/40">SOM</span><span className="text-white/70">{som ? formatEur(som.value_eur, lang) : '—'}</span></div> <div className="flex justify-between"><span className="text-white/40">SOM</span><span className="text-white/70">{som ? formatEur(som.value_eur, lang) : '—'}</span></div>
{funding?.use_of_funds?.slice(0, 3).map((f, idx) => (
<div key={idx} className="flex justify-between">
<span className="text-white/40">{de ? f.label_de : f.label_en}</span>
<span className="text-white/70">{f.percentage}%</span>
</div>
))}
</div> </div>
</GlassCard> </GlassCard>
</div> </div>