feat: Executive Summary komplett ueberarbeitet — Onepager + Exec kombiniert
Slide-Ansicht (scrollbar, passt nicht auf einen Screen): - Hero-Text: 4 Zeilen Plattform-Beschreibung (aus Onepager) - USP-Banner - Problem + Loesung (aus bisheriger Exec Summary) - 6 KPI-Kacheln (170+, 40k+, 84, 10, 761K, 1M) - Compliance Scanner Features (5 Punkte, aus Onepager) - ComplAI Plattform Features (5 Punkte, aus Onepager) - Roadmap: Q4/2026 → Q3/2029 Break-Even - 4-Spalten: Geschaeftsmodell, Zielmaerkte, Gruender, Funding+Markt PDF-Download (DIN A3 Hochformat, 297x420mm): - Plus Jakarta Sans Font - Gradient Top-Bar - Alle Sektionen auf A3 optimiert - Druckfertig mit print-color-adjust Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
@@ -6,7 +6,7 @@ import { t, formatEur } from '@/lib/i18n'
|
||||
import GradientText from '../ui/GradientText'
|
||||
import FadeInView from '../ui/FadeInView'
|
||||
import GlassCard from '../ui/GlassCard'
|
||||
import { Download, Shield, Server, Brain, TrendingUp, Users, FileText, Target } from 'lucide-react'
|
||||
import { Download, Shield, Server, Brain, TrendingUp, FileText, Target, ScanLine, CheckCircle2, ClipboardCheck, GraduationCap, Cpu, Map, Users } from 'lucide-react'
|
||||
|
||||
interface ExecutiveSummarySlideProps {
|
||||
lang: Language
|
||||
@@ -16,6 +16,7 @@ interface ExecutiveSummarySlideProps {
|
||||
export default function ExecutiveSummarySlide({ lang, data }: ExecutiveSummarySlideProps) {
|
||||
const i = t(lang)
|
||||
const es = i.executiveSummary
|
||||
const de = lang === 'de'
|
||||
|
||||
const funding = data.funding
|
||||
const amount = funding?.amount_eur || 0
|
||||
@@ -37,283 +38,392 @@ export default function ExecutiveSummarySlide({ lang, data }: ExecutiveSummarySl
|
||||
const somVal = som ? formatEur(som.value_eur, lang) : '—'
|
||||
|
||||
const teamHtml = data.team?.map(m =>
|
||||
`<div style="margin-bottom:6px;">
|
||||
<strong>${m.name}</strong> — ${lang === 'de' ? m.role_de : m.role_en}
|
||||
</div>`
|
||||
`<div class="founder"><strong>${m.name}</strong><span>${de ? m.role_de : m.role_en}</span></div>`
|
||||
).join('') || ''
|
||||
|
||||
const useOfFundsHtml = funding?.use_of_funds?.map(f =>
|
||||
`<div style="display:flex;justify-content:space-between;margin-bottom:3px;">
|
||||
<span>${lang === 'de' ? f.label_de : f.label_en}</span>
|
||||
<span><strong>${f.percentage}%</strong></span>
|
||||
</div>`
|
||||
`<div class="fund-row"><span>${de ? f.label_de : f.label_en}</span><strong>${f.percentage}%</strong></div>`
|
||||
).join('') || ''
|
||||
|
||||
printWindow.document.write(`<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="${lang}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>BreakPilot ComplAI — Executive Summary</title>
|
||||
<style>
|
||||
@page { size: A4; margin: 20mm 18mm; }
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
color: #1a1a2e; font-size: 11px; line-height: 1.5;
|
||||
background: #fff;
|
||||
}
|
||||
.header {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
border-bottom: 3px solid #6366f1; padding-bottom: 12px; margin-bottom: 16px;
|
||||
}
|
||||
.header h1 { font-size: 22px; color: #1a1a2e; }
|
||||
.header h1 span { color: #6366f1; }
|
||||
.header .tagline { font-size: 12px; color: #666; }
|
||||
.header .badge {
|
||||
background: #6366f1; color: #fff; padding: 4px 12px;
|
||||
border-radius: 20px; font-size: 11px; font-weight: 600;
|
||||
}
|
||||
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
|
||||
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 14px; }
|
||||
.section { margin-bottom: 14px; }
|
||||
.section-title {
|
||||
font-size: 12px; font-weight: 700; color: #6366f1;
|
||||
text-transform: uppercase; letter-spacing: 0.5px;
|
||||
margin-bottom: 6px; border-bottom: 1px solid #e5e7eb; padding-bottom: 3px;
|
||||
}
|
||||
.card {
|
||||
background: #f8f9fa; border: 1px solid #e5e7eb;
|
||||
border-radius: 8px; padding: 10px;
|
||||
}
|
||||
.card.highlight { border-left: 3px solid #6366f1; }
|
||||
.kpi { text-align: center; }
|
||||
.kpi .value { font-size: 20px; font-weight: 800; color: #6366f1; }
|
||||
.kpi .label { font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.market-row { display: flex; justify-content: space-between; margin-bottom: 3px; }
|
||||
.market-label { font-weight: 600; color: #6366f1; min-width: 40px; }
|
||||
.footer {
|
||||
margin-top: 16px; padding-top: 10px; border-top: 1px solid #e5e7eb;
|
||||
display: flex; justify-content: space-between; font-size: 10px; color: #888;
|
||||
}
|
||||
.usp-box {
|
||||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||||
color: #fff; border-radius: 8px; padding: 10px; margin-bottom: 14px;
|
||||
}
|
||||
.usp-box strong { font-size: 12px; }
|
||||
@media print {
|
||||
body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
<title>BreakPilot ComplAI — Executive Summary</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
@page { size: 297mm 420mm; margin: 0; }
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
|
||||
background: #fff; color: #1a1a2e;
|
||||
width: 297mm; min-height: 420mm;
|
||||
position: relative; font-size: 10.5px; line-height: 1.45;
|
||||
}
|
||||
@media print { body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
|
||||
|
||||
.top-bar { height: 6px; background: linear-gradient(90deg, #6366f1, #8b5cf6, #a78bfa, #06b6d4); }
|
||||
.container { padding: 18px 30px 12px; }
|
||||
|
||||
/* Header */
|
||||
.header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
|
||||
.header h1 { font-size: 28px; font-weight: 800; letter-spacing: -1px; color: #4f46e5; }
|
||||
.header .tagline { font-size: 11px; color: #64748b; margin-top: 2px; }
|
||||
.badge { background: #4f46e5; color: #fff; padding: 4px 14px; border-radius: 20px; font-size: 10px; font-weight: 700; }
|
||||
|
||||
/* Hero */
|
||||
.hero { background: linear-gradient(135deg, #eef2ff, #f0f9ff); border-radius: 10px; padding: 12px 18px; margin-bottom: 12px; border-left: 4px solid #6366f1; }
|
||||
.hero p { font-size: 11.5px; line-height: 1.45; color: #334155; }
|
||||
.hero strong { color: #4f46e5; font-weight: 700; }
|
||||
|
||||
/* USP */
|
||||
.usp { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; border-radius: 8px; padding: 10px 16px; margin-bottom: 12px; text-align: center; }
|
||||
.usp strong { font-size: 11px; }
|
||||
|
||||
/* Grid layouts */
|
||||
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
|
||||
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 10px; }
|
||||
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
|
||||
.grid6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 10px; }
|
||||
|
||||
/* Sections */
|
||||
.section-title { font-size: 10px; font-weight: 700; color: #4f46e5; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; border-bottom: 1px solid #e5e7eb; padding-bottom: 3px; }
|
||||
.card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 9px 11px; }
|
||||
.card.highlight { border-left: 3px solid #6366f1; }
|
||||
.card.cyan { border-left: 3px solid #06b6d4; }
|
||||
|
||||
/* KPIs */
|
||||
.kpi { text-align: center; padding: 8px 4px; border-radius: 8px; background: #f8fafc; border: 1px solid #e2e8f0; }
|
||||
.kpi .value { font-size: 18px; font-weight: 800; color: #4f46e5; }
|
||||
.kpi .label { font-size: 7.5px; color: #64748b; margin-top: 1px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; }
|
||||
|
||||
/* Product cards */
|
||||
.product-card { border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 13px; position: relative; overflow: hidden; }
|
||||
.product-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
|
||||
.product-card.scanner::before { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
|
||||
.product-card.platform::before { background: linear-gradient(90deg, #06b6d4, #0ea5e9); }
|
||||
.product-card h3 { font-size: 12px; font-weight: 800; margin-bottom: 1px; }
|
||||
.product-card.scanner h3 { color: #4f46e5; }
|
||||
.product-card.platform h3 { color: #0891b2; }
|
||||
.product-card .sub { font-size: 8px; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }
|
||||
.product-card ul { list-style: none; }
|
||||
.product-card li { font-size: 9px; line-height: 1.3; padding: 1.5px 0 1.5px 12px; position: relative; color: #475569; }
|
||||
.product-card li::before { content: ''; position: absolute; left: 0; top: 6px; width: 5px; height: 5px; border-radius: 50%; }
|
||||
.product-card.scanner li::before { background: #818cf8; }
|
||||
.product-card.platform li::before { background: #22d3ee; }
|
||||
|
||||
/* Roadmap */
|
||||
.roadmap-item { padding: 7px 9px; border-radius: 7px; border: 1px dashed #c7d2fe; background: #fefce8; }
|
||||
.roadmap-item .rm-title { font-size: 9px; font-weight: 700; color: #92400e; margin-bottom: 1px; }
|
||||
.roadmap-item .rm-desc { font-size: 7.5px; color: #78716c; line-height: 1.25; }
|
||||
|
||||
/* Bottom sections */
|
||||
.bottom-card ul { list-style: none; }
|
||||
.bottom-card li { font-size: 9px; color: #475569; padding: 1.5px 0 1.5px 11px; position: relative; line-height: 1.3; }
|
||||
.bottom-card li::before { content: '\\2192'; position: absolute; left: 0; color: #8b5cf6; font-weight: 700; }
|
||||
.market-row { display: flex; justify-content: space-between; margin-bottom: 2px; font-size: 9.5px; }
|
||||
.market-label { font-weight: 700; color: #4f46e5; min-width: 35px; }
|
||||
.fund-row { display: flex; justify-content: space-between; font-size: 9px; margin-bottom: 1px; }
|
||||
.founder { display: flex; justify-content: space-between; font-size: 9px; margin-bottom: 2px; }
|
||||
.founder span { color: #64748b; }
|
||||
|
||||
/* Footer */
|
||||
.footer { padding: 8px 30px; background: #f8fafc; border-top: 1px solid #e2e8f0; display: flex; justify-content: space-between; font-size: 8px; color: #94a3b8; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar"></div>
|
||||
<div class="container">
|
||||
|
||||
<div class="header">
|
||||
<div>
|
||||
<h1>BreakPilot <span>ComplAI</span></h1>
|
||||
<div class="tagline">${lang === 'de'
|
||||
? 'Compliance & Code-Security f\u00fcr den Maschinenbau'
|
||||
: 'Compliance & Code Security for Machine Manufacturers'}</div>
|
||||
<h1>BreakPilot ComplAI</h1>
|
||||
<div class="tagline">${de ? 'Compliance & Code-Security f\\u00fcr den Maschinenbau' : 'Compliance & Code Security for Machine Manufacturers'}</div>
|
||||
</div>
|
||||
<div class="badge">Pre-Seed ${funding?.target_date ? 'Q' + Math.ceil((new Date(funding.target_date).getMonth() + 1) / 3) + ' ' + new Date(funding.target_date).getFullYear() : 'Q4 2026'}</div>
|
||||
</div>
|
||||
|
||||
<div class="usp-box">
|
||||
<strong>${es.usp}:</strong> ${es.uspText}
|
||||
<div class="hero">
|
||||
<p>${de
|
||||
? 'BreakPilot ComplAI ist eine <strong>DSGVO-konforme, datensouver\\u00e4ne KI-Plattform</strong>, die kontinuierliches Sicherheitsscanning mit intelligenter Compliance-Automatisierung vereint. Wir helfen Maschinenbauern, ihren <strong>Code abzusichern</strong>, <strong>Compliance skalierbar durchzusetzen</strong> und <strong>volle Datensouver\\u00e4nit\\u00e4t zu bewahren</strong> \\u2014 gest\\u00fctzt auf \\u00fcber 40.000 extrahierte Controls, KI-gest\\u00fctzte Triage und einen l\\u00fcckenlosen Audit-Trail.'
|
||||
: 'BreakPilot ComplAI is a <strong>GDPR-compliant, data-sovereign AI platform</strong> that combines continuous security scanning with intelligent compliance automation. We help machine manufacturers <strong>secure their code</strong>, <strong>enforce compliance at scale</strong> and <strong>maintain full data sovereignty</strong> \\u2014 powered by 40,000+ extracted controls, AI-driven triage and a complete audit trail.'
|
||||
}</p>
|
||||
</div>
|
||||
|
||||
<div class="usp"><strong>${es.usp}:</strong> ${es.uspText}</div>
|
||||
|
||||
<div class="grid2">
|
||||
<div class="card highlight">
|
||||
<div class="section-title">${es.problem}</div>
|
||||
<div>${es.problemText}</div>
|
||||
<div style="font-size:10px;">${es.problemText}</div>
|
||||
</div>
|
||||
<div class="card highlight">
|
||||
<div class="section-title">${es.solution}</div>
|
||||
<div>${es.solutionText}</div>
|
||||
<div style="font-size:10px;">${es.solutionText}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">${es.keyMetrics}</div>
|
||||
<div class="grid3">
|
||||
<div class="card kpi">
|
||||
<div class="value">170+</div>
|
||||
<div class="label">${es.documents}</div>
|
||||
</div>
|
||||
<div class="card kpi">
|
||||
<div class="value">40.000+</div>
|
||||
<div class="label">${es.controls}</div>
|
||||
</div>
|
||||
<div class="card kpi">
|
||||
<div class="value">84</div>
|
||||
<div class="label">${es.regulations}</div>
|
||||
</div>
|
||||
<div class="card kpi">
|
||||
<div class="value">10</div>
|
||||
<div class="label">${es.industries}</div>
|
||||
</div>
|
||||
<div class="card kpi">
|
||||
<div class="value">761K</div>
|
||||
<div class="label">${es.linesOfCode}</div>
|
||||
</div>
|
||||
<div class="card kpi">
|
||||
<div class="value">${amountLabel}</div>
|
||||
<div class="label">${es.theAsk}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid6">
|
||||
<div class="kpi"><div class="value">170+</div><div class="label">${es.documents}</div></div>
|
||||
<div class="kpi"><div class="value">40.000+</div><div class="label">${es.controls}</div></div>
|
||||
<div class="kpi"><div class="value">84</div><div class="label">${es.regulations}</div></div>
|
||||
<div class="kpi"><div class="value">10</div><div class="label">${es.industries}</div></div>
|
||||
<div class="kpi"><div class="value">761K</div><div class="label">${es.linesOfCode}</div></div>
|
||||
<div class="kpi"><div class="value">${amountLabel}</div><div class="label">${es.theAsk}</div></div>
|
||||
</div>
|
||||
|
||||
<div class="grid2">
|
||||
<div class="section">
|
||||
<div class="section-title">${es.market}</div>
|
||||
<div class="card">
|
||||
<div class="market-row"><span class="market-label">TAM</span><span>${tamVal}</span></div>
|
||||
<div class="market-row"><span class="market-label">SAM</span><span>${samVal}</span></div>
|
||||
<div class="market-row"><span class="market-label">SOM</span><span>${somVal}</span></div>
|
||||
</div>
|
||||
<div class="product-card scanner">
|
||||
<h3>${de ? 'Compliance Scanner' : 'Compliance Scanner'}</h3>
|
||||
<div class="sub">${de ? 'Kontinuierlicher KI-Sicherheitsagent' : 'Continuous AI Security Agent'}</div>
|
||||
<ul>
|
||||
<li><strong>SAST + DAST + SBOM</strong> ${de ? '\\u2014 Vollumf\\u00e4ngliche Sicherheitstests bei jeder Code-\\u00c4nderung' : '\\u2014 Full security testing on every code change'}</li>
|
||||
<li><strong>${de ? 'KI-gest\\u00fctztes Pentesting' : 'AI-powered Pentesting'}</strong> ${de ? '\\u2014 Kontinuierlich statt einmal im Jahr' : '\\u2014 Continuous instead of once a year'}</li>
|
||||
<li><strong>CE-Software-Risikobeurteilung</strong> ${de ? '\\u2014 F\\u00fcr Maschinenverordnung und Produktsicherheit' : '\\u2014 For Machinery Regulation and product safety'}</li>
|
||||
<li><strong>Jira-Integration</strong> ${de ? '\\u2014 Findings als Tickets mit Implementierungsvorschl\\u00e4gen' : '\\u2014 Findings as tickets with implementation suggestions'}</li>
|
||||
<li><strong>Audit-Trail</strong> ${de ? '\\u2014 L\\u00fcckenloser Nachweis von Erkennung bis Behebung' : '\\u2014 Complete evidence from detection to remediation'}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="section-title">${es.roi || es.businessModel}</div>
|
||||
<div class="card">${es.roiText || es.businessModelText}</div>
|
||||
<div class="product-card platform">
|
||||
<h3>${de ? 'ComplAI Plattform' : 'ComplAI Platform'}</h3>
|
||||
<div class="sub">${de ? 'Souver\\u00e4ne Compliance-Infrastruktur' : 'Sovereign Compliance Infrastructure'}</div>
|
||||
<ul>
|
||||
<li><strong>${de ? 'Compliance-Dokumente' : 'Compliance Documents'}</strong> ${de ? '\\u2014 VVT, TOMs, DSFA, L\\u00f6schfristen automatisch' : '\\u2014 RoPA, TOMs, DPIA, retention automatically'}</li>
|
||||
<li><strong>Audit Manager</strong> ${de ? '\\u2014 Abweichungen End-to-End: Rollen, Stichtage, Eskalation' : '\\u2014 Deviations end-to-end: roles, deadlines, escalation'}</li>
|
||||
<li><strong>Compliance LLM</strong> ${de ? '\\u2014 GPT f\\u00fcr Text und Audio, sicher in der EU gehostet' : '\\u2014 GPT for text and audio, securely hosted in EU'}</li>
|
||||
<li><strong>Academy</strong> ${de ? '\\u2014 Online-Schulungen f\\u00fcr GF und Mitarbeiter' : '\\u2014 Online training for management and employees'}</li>
|
||||
<li><strong>${de ? 'BSI-Cloud DE / OVH FR' : 'BSI Cloud DE / OVH FR'}</strong> ${de ? '\\u2014 Keine US-SaaS, Jitsi, Matrix, volle Integration' : '\\u2014 No US SaaS, Jitsi, Matrix, full integration'}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid2">
|
||||
<div class="section">
|
||||
<div class="section-title">Team</div>
|
||||
<div class="card">${teamHtml}</div>
|
||||
<div class="section-title">${de ? 'Roadmap' : 'Roadmap'}</div>
|
||||
<div class="grid4">
|
||||
<div class="roadmap-item"><div class="rm-title">${de ? 'Q4 2026: Launch' : 'Q4 2026: Launch'}</div><div class="rm-desc">${de ? 'Gr\\u00fcndung, erste Pilotkunden, Cloud-Plattform live' : 'Founding, first pilot customers, cloud platform live'}</div></div>
|
||||
<div class="roadmap-item"><div class="rm-title">${de ? 'Q2 2027: Scale' : 'Q2 2027: Scale'}</div><div class="rm-desc">${de ? 'Vertriebsteam, Messen, Marketing-Offensive' : 'Sales team, trade fairs, marketing push'}</div></div>
|
||||
<div class="roadmap-item"><div class="rm-title">${de ? 'Q4 2027: Enterprise' : 'Q4 2027: Enterprise'}</div><div class="rm-desc">${de ? 'Enterprise-Kunden, Distributor-Partnerschaften' : 'Enterprise customers, distributor partnerships'}</div></div>
|
||||
<div class="roadmap-item"><div class="rm-title">${de ? 'Q3 2029: Break-Even' : 'Q3 2029: Break-Even'}</div><div class="rm-desc">${de ? 'Profitabilit\\u00e4t, Series A Vorbereitung' : 'Profitability, Series A preparation'}</div></div>
|
||||
</div>
|
||||
|
||||
<div class="grid2" style="grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px;">
|
||||
<div class="card bottom-card">
|
||||
<div class="section-title">${de ? 'Gesch\\u00e4ftsmodell' : 'Business Model'}</div>
|
||||
<ul>
|
||||
<li><strong>SaaS Cloud</strong> ${de ? '\\u2014 BSI DE / OVH FR, mitarbeiterbasiert' : '\\u2014 BSI DE / OVH FR, employee-based'}</li>
|
||||
<li><strong>${de ? 'Modular w\\u00e4hlbar' : 'Modular choice'}</strong> ${de ? '\\u2014 Einzelne Module oder Full Compliance' : '\\u2014 Single modules or full compliance'}</li>
|
||||
<li><strong>${de ? 'ROI ab Tag 1' : 'ROI from day 1'}</strong> ${de ? '\\u2014 Kunde spart 50.000+ EUR/Jahr' : '\\u2014 Customer saves EUR 50,000+/year'}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="section-title">${es.theAsk} — ${amountLabel}</div>
|
||||
<div class="card">
|
||||
<div style="margin-bottom:6px;"><strong>${es.round}:</strong> ${funding?.round_name || 'Pre-Seed'}</div>
|
||||
<div style="margin-bottom:6px;"><strong>Instrument:</strong> ${funding?.instrument || 'SAFE'}</div>
|
||||
<div class="card bottom-card">
|
||||
<div class="section-title">${de ? 'Zielm\\u00e4rkte' : 'Target Markets'}</div>
|
||||
<ul>
|
||||
<li><strong>${de ? 'Maschinenbau KMU' : 'Manufacturing SMEs'}</strong> ${de ? '\\u2014 10-500 MA, Eigenentwicklung' : '\\u2014 10-500 emp., own development'}</li>
|
||||
<li><strong>${de ? 'Regulierte Branchen' : 'Regulated Industries'}</strong> ${de ? '\\u2014 Gesundheit, Finanzen, KRITIS' : '\\u2014 Healthcare, finance, critical infra'}</li>
|
||||
<li><strong>${de ? 'EU-Datensouver\\u00e4nit\\u00e4t' : 'EU Data Sovereignty'}</strong> ${de ? '\\u2014 Unternehmen die US-SaaS ablehnen' : '\\u2014 Companies rejecting US SaaS'}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card bottom-card">
|
||||
<div class="section-title">${de ? 'Gr\\u00fcnder' : 'Founders'}</div>
|
||||
${teamHtml}
|
||||
</div>
|
||||
<div class="card bottom-card">
|
||||
<div class="section-title">${es.theAsk} \\u2014 ${amountLabel}</div>
|
||||
<div class="market-row"><span class="market-label">TAM</span><span>${tamVal}</span></div>
|
||||
<div class="market-row"><span class="market-label">SAM</span><span>${samVal}</span></div>
|
||||
<div class="market-row"><span class="market-label">SOM</span><span>${somVal}</span></div>
|
||||
<div style="border-top:1px solid #e5e7eb;margin-top:4px;padding-top:4px;">
|
||||
${useOfFundsHtml}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<span>${data.company?.website || 'breakpilot.ai'}</span>
|
||||
<span>${data.company?.hq_city || ''}</span>
|
||||
<span>${lang === 'de' ? 'Vertraulich' : 'Confidential'}</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>`)
|
||||
</div>
|
||||
<div class="footer">
|
||||
<span>${de ? 'Vertraulich \\u2014 Nur f\\u00fcr Investoren' : 'Confidential \\u2014 Investors only'}</span>
|
||||
<span>${data.company?.website || 'breakpilot.ai'} \\u2014 ${data.company?.hq_city || ''}</span>
|
||||
<span>BreakPilot ComplAI \\u2014 ${de ? 'M\\u00e4rz' : 'March'} 2026</span>
|
||||
</div>
|
||||
</body></html>`)
|
||||
|
||||
printWindow.document.close()
|
||||
setTimeout(() => printWindow.print(), 300)
|
||||
}, [lang, data, es, funding, tam, sam, som, amountLabel])
|
||||
}, [lang, data, es, funding, tam, sam, som, amountLabel, de])
|
||||
|
||||
// === SLIDE VIEW ===
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<FadeInView className="text-center mb-6">
|
||||
<div className="max-w-6xl mx-auto overflow-y-auto max-h-[85vh] pr-2">
|
||||
<FadeInView className="text-center mb-4">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-2">
|
||||
<GradientText>{es.title}</GradientText>
|
||||
</h2>
|
||||
<p className="text-base text-white/50 max-w-2xl mx-auto">{es.subtitle}</p>
|
||||
</FadeInView>
|
||||
|
||||
{/* USP Banner */}
|
||||
<FadeInView delay={0.1} className="mb-5">
|
||||
<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>
|
||||
<p className="text-sm text-white/80 mt-1">{es.uspText}</p>
|
||||
{/* Hero Description */}
|
||||
<FadeInView delay={0.05} className="mb-4">
|
||||
<div className="bg-gradient-to-r from-indigo-500/10 to-cyan-500/10 border-l-4 border-indigo-500 rounded-r-xl px-5 py-3">
|
||||
<p className="text-xs text-white/70 leading-relaxed">
|
||||
{de
|
||||
? <>BreakPilot ComplAI ist eine <strong className="text-indigo-300">DSGVO-konforme, datensouveraene KI-Plattform</strong>, die kontinuierliches Sicherheitsscanning mit intelligenter Compliance-Automatisierung vereint. Wir helfen Maschinenbauern, ihren <strong className="text-indigo-300">Code abzusichern</strong>, <strong className="text-indigo-300">Compliance skalierbar durchzusetzen</strong> und <strong className="text-indigo-300">volle Datensouveraenitaet zu bewahren</strong>.</>
|
||||
: <>BreakPilot ComplAI is a <strong className="text-indigo-300">GDPR-compliant, data-sovereign AI platform</strong> that combines continuous security scanning with intelligent compliance automation. We help manufacturers <strong className="text-indigo-300">secure their code</strong>, <strong className="text-indigo-300">enforce compliance at scale</strong> and <strong className="text-indigo-300">maintain full data sovereignty</strong>.</>
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
</FadeInView>
|
||||
|
||||
{/* Problem + Solution — 2 columns */}
|
||||
<div className="grid md:grid-cols-2 gap-4 mb-5">
|
||||
<GlassCard delay={0.2} hover={false} className="p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Shield className="w-4 h-4 text-red-400" />
|
||||
<h3 className="text-xs font-bold text-red-400 uppercase tracking-wider">{es.problem}</h3>
|
||||
</div>
|
||||
<p className="text-xs text-white/70 leading-relaxed">{es.problemText}</p>
|
||||
</GlassCard>
|
||||
{/* USP Banner */}
|
||||
<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">
|
||||
<span className="text-[10px] font-bold text-indigo-400 uppercase tracking-wider">{es.usp}</span>
|
||||
<p className="text-xs text-white/80 mt-0.5">{es.uspText}</p>
|
||||
</div>
|
||||
</FadeInView>
|
||||
|
||||
<GlassCard delay={0.3} hover={false} className="p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Server className="w-4 h-4 text-emerald-400" />
|
||||
<h3 className="text-xs font-bold text-emerald-400 uppercase tracking-wider">{es.solution}</h3>
|
||||
{/* Problem + Solution */}
|
||||
<div className="grid md:grid-cols-2 gap-3 mb-4">
|
||||
<GlassCard delay={0.15} hover={false} className="p-3">
|
||||
<div className="flex items-center gap-2 mb-1.5">
|
||||
<Shield className="w-3.5 h-3.5 text-red-400" />
|
||||
<h3 className="text-[10px] font-bold text-red-400 uppercase tracking-wider">{es.problem}</h3>
|
||||
</div>
|
||||
<p className="text-xs text-white/70 leading-relaxed">{es.solutionText}</p>
|
||||
<p className="text-[10px] text-white/70 leading-relaxed">{es.problemText}</p>
|
||||
</GlassCard>
|
||||
<GlassCard delay={0.2} hover={false} className="p-3">
|
||||
<div className="flex items-center gap-2 mb-1.5">
|
||||
<CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" />
|
||||
<h3 className="text-[10px] font-bold text-emerald-400 uppercase tracking-wider">{es.solution}</h3>
|
||||
</div>
|
||||
<p className="text-[10px] text-white/70 leading-relaxed">{es.solutionText}</p>
|
||||
</GlassCard>
|
||||
</div>
|
||||
|
||||
{/* KPI Row */}
|
||||
<FadeInView delay={0.4} className="mb-5">
|
||||
<div className="grid grid-cols-3 md:grid-cols-6 gap-3">
|
||||
<FadeInView delay={0.25} className="mb-4">
|
||||
<div className="grid grid-cols-3 md:grid-cols-6 gap-2">
|
||||
{[
|
||||
{ value: '170+', label: es.documents, icon: FileText, color: '#6366f1' },
|
||||
{ value: '40.000+', label: es.controls, icon: Shield, color: '#a78bfa' },
|
||||
{ value: '84', label: es.regulations, icon: Brain, color: '#60a5fa' },
|
||||
{ value: '10', label: es.industries, icon: Server, color: '#34d399' },
|
||||
{ value: '761K', label: es.linesOfCode, icon: Target, color: '#fbbf24' },
|
||||
{ value: '10', label: es.industries, icon: Target, color: '#34d399' },
|
||||
{ value: '761K', label: es.linesOfCode, icon: Cpu, color: '#fbbf24' },
|
||||
{ value: amountLabel, label: es.theAsk, icon: TrendingUp, color: '#f472b6' },
|
||||
].map((kpi, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="bg-white/[0.06] backdrop-blur-xl border border-white/10 rounded-xl p-3 text-center"
|
||||
>
|
||||
<kpi.icon className="w-4 h-4 mx-auto mb-1 opacity-60" style={{ color: kpi.color }} />
|
||||
<p className="text-lg md:text-xl font-bold text-white">{kpi.value}</p>
|
||||
<p className="text-[9px] text-white/40 uppercase tracking-wider">{kpi.label}</p>
|
||||
<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 }} />
|
||||
<p className="text-base font-bold text-white">{kpi.value}</p>
|
||||
<p className="text-[8px] text-white/40 uppercase tracking-wider">{kpi.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</FadeInView>
|
||||
|
||||
{/* Market + Business Model + Team + The Ask — compact 2x2 */}
|
||||
<div className="grid md:grid-cols-2 gap-4 mb-5">
|
||||
<GlassCard delay={0.5} hover={false} className="p-4">
|
||||
<h3 className="text-xs font-bold text-indigo-400 uppercase tracking-wider mb-2">{es.market}</h3>
|
||||
{/* Product Cards — Scanner + Platform */}
|
||||
<div className="grid md:grid-cols-2 gap-3 mb-4">
|
||||
<GlassCard delay={0.3} hover={false} className="p-3 border-t-2 border-t-indigo-500">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<ScanLine className="w-4 h-4 text-indigo-400" />
|
||||
<h3 className="text-xs font-bold text-indigo-400">Compliance Scanner</h3>
|
||||
</div>
|
||||
<p className="text-[8px] text-white/30 uppercase tracking-wider mb-2">{de ? 'Kontinuierlicher KI-Sicherheitsagent' : 'Continuous AI Security Agent'}</p>
|
||||
<div className="space-y-1">
|
||||
{[
|
||||
{ label: 'TAM', data: tam },
|
||||
{ label: 'SAM', data: sam },
|
||||
{ label: 'SOM', data: som },
|
||||
].map(({ label, data: m }) => (
|
||||
<div key={label} className="flex justify-between items-center">
|
||||
<span className="text-xs font-semibold text-indigo-300">{label}</span>
|
||||
<span className="text-xs text-white/70">{m ? formatEur(m.value_eur, lang) : '—'}</span>
|
||||
</div>
|
||||
de ? 'SAST + DAST + SBOM — bei jeder Code-Aenderung' : 'SAST + DAST + SBOM — on every code change',
|
||||
de ? 'KI-gestuetztes Pentesting — kontinuierlich statt jaehrlich' : 'AI-powered pentesting — continuous not annual',
|
||||
de ? 'CE-Software-Risikobeurteilung fuer Maschinenverordnung' : 'CE software risk assessment for Machinery Regulation',
|
||||
de ? 'Jira-Integration — Tickets mit Implementierungsvorschlaegen' : 'Jira integration — tickets with implementation suggestions',
|
||||
de ? 'Lueckenloser Audit-Trail von Erkennung bis Behebung' : 'Complete audit trail from detection to remediation',
|
||||
].map((item, idx) => (
|
||||
<p key={idx} className="text-[9px] 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" />
|
||||
{item}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</GlassCard>
|
||||
|
||||
<GlassCard delay={0.6} hover={false} className="p-4">
|
||||
<h3 className="text-xs font-bold text-emerald-400 uppercase tracking-wider mb-2">{es.roi || es.businessModel}</h3>
|
||||
<p className="text-xs text-white/70 leading-relaxed">{es.roiText || es.businessModelText}</p>
|
||||
<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">
|
||||
<Server className="w-4 h-4 text-cyan-400" />
|
||||
<h3 className="text-xs font-bold text-cyan-400">ComplAI Plattform</h3>
|
||||
</div>
|
||||
<p className="text-[8px] text-white/30 uppercase tracking-wider mb-2">{de ? 'Souveraene Compliance-Infrastruktur' : 'Sovereign Compliance Infrastructure'}</p>
|
||||
<div className="space-y-1">
|
||||
{[
|
||||
de ? 'VVT, TOMs, DSFA, Loeschfristen — 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 ? 'Compliance LLM — GPT fuer 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 ? 'BSI-Cloud DE / OVH FR — Jitsi, Matrix, volle Integration' : 'BSI Cloud DE / OVH FR — Jitsi, Matrix, full integration',
|
||||
].map((item, idx) => (
|
||||
<p key={idx} className="text-[9px] text-white/60 pl-3 relative">
|
||||
<span className="absolute left-0 top-1 w-1.5 h-1.5 rounded-full bg-cyan-400/60" />
|
||||
{item}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</GlassCard>
|
||||
</div>
|
||||
|
||||
{/* Roadmap */}
|
||||
<FadeInView delay={0.4} className="mb-4">
|
||||
<h3 className="text-[10px] font-bold text-white/40 uppercase tracking-wider mb-2">Roadmap</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
|
||||
{[
|
||||
{ title: 'Q4 2026', desc: de ? 'Gruendung, Pilotkunden, Cloud live' : 'Founding, pilots, cloud live' },
|
||||
{ title: 'Q2 2027', desc: de ? 'Vertrieb, Messen, Marketing' : 'Sales, trade fairs, marketing' },
|
||||
{ title: 'Q4 2027', desc: de ? 'Enterprise, Distributoren' : 'Enterprise, distributors' },
|
||||
{ title: 'Q3 2029', desc: de ? 'Break-Even, Series A' : 'Break-even, Series A' },
|
||||
].map((item, idx) => (
|
||||
<div key={idx} className="bg-amber-500/10 border border-amber-500/20 rounded-lg px-3 py-2">
|
||||
<p className="text-[10px] font-bold text-amber-300">{item.title}</p>
|
||||
<p className="text-[8px] text-white/40">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</FadeInView>
|
||||
|
||||
{/* Bottom 4-column: Geschaeftsmodell + Zielmaerkte + Gruender + Funding */}
|
||||
<div className="grid md:grid-cols-4 gap-3 mb-4">
|
||||
<GlassCard delay={0.45} hover={false} className="p-3">
|
||||
<h3 className="text-[10px] font-bold text-purple-400 uppercase tracking-wider mb-1.5">{de ? 'Geschaeftsmodell' : 'Business Model'}</h3>
|
||||
<div className="space-y-1 text-[9px] text-white/60">
|
||||
<p><strong className="text-white/80">SaaS Cloud</strong> — BSI DE / OVH FR</p>
|
||||
<p><strong className="text-white/80">{de ? 'Modular' : 'Modular'}</strong> — {de ? 'Einzeln oder Full Compliance' : 'Single or full compliance'}</p>
|
||||
<p><strong className="text-white/80">ROI</strong> — {de ? 'Kunde spart 50k+/Jahr' : 'Customer saves 50k+/year'}</p>
|
||||
</div>
|
||||
</GlassCard>
|
||||
|
||||
<GlassCard delay={0.7} hover={false} className="p-4">
|
||||
<h3 className="text-xs font-bold text-emerald-400 uppercase tracking-wider mb-2">Team</h3>
|
||||
<GlassCard delay={0.5} hover={false} className="p-3">
|
||||
<h3 className="text-[10px] font-bold text-blue-400 uppercase tracking-wider mb-1.5">{de ? 'Zielmaerkte' : 'Target Markets'}</h3>
|
||||
<div className="space-y-1 text-[9px] text-white/60">
|
||||
<p><strong className="text-white/80">{de ? 'Maschinenbau KMU' : 'Manufacturing SMEs'}</strong></p>
|
||||
<p><strong className="text-white/80">{de ? 'Regulierte Branchen' : 'Regulated Industries'}</strong></p>
|
||||
<p><strong className="text-white/80">{de ? 'EU-Datensouveraenitaet' : 'EU Data Sovereignty'}</strong></p>
|
||||
</div>
|
||||
</GlassCard>
|
||||
|
||||
<GlassCard delay={0.55} hover={false} className="p-3">
|
||||
<h3 className="text-[10px] font-bold text-emerald-400 uppercase tracking-wider mb-1.5">{de ? 'Gruender' : 'Founders'}</h3>
|
||||
<div className="space-y-1">
|
||||
{data.team?.slice(0, 4).map((m, idx) => (
|
||||
<div key={idx} className="flex justify-between items-center">
|
||||
<span className="text-xs text-white/80 font-medium">{m.name}</span>
|
||||
<span className="text-[10px] text-white/50">{lang === 'de' ? m.role_de : m.role_en}</span>
|
||||
<span className="text-[9px] text-white/80 font-medium">{m.name}</span>
|
||||
<span className="text-[8px] text-white/40">{de ? m.role_de : m.role_en}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</GlassCard>
|
||||
|
||||
<GlassCard delay={0.8} hover={false} className="p-4">
|
||||
<h3 className="text-xs font-bold text-amber-400 uppercase tracking-wider mb-2">
|
||||
{es.theAsk} — {amountLabel}
|
||||
</h3>
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between text-xs">
|
||||
<span className="text-white/50">{es.round}</span>
|
||||
<span className="text-white/80">{funding?.round_name || 'Pre-Seed'}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs">
|
||||
<span className="text-white/50">Instrument</span>
|
||||
<span className="text-white/80">{funding?.instrument || 'SAFE'}</span>
|
||||
</div>
|
||||
<GlassCard delay={0.6} hover={false} className="p-3">
|
||||
<h3 className="text-[10px] font-bold text-amber-400 uppercase tracking-wider mb-1.5">{es.theAsk} — {amountLabel}</h3>
|
||||
<div className="space-y-0.5 text-[9px]">
|
||||
<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">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 text-xs">
|
||||
<span className="text-white/50">{lang === 'de' ? f.label_de : f.label_en}</span>
|
||||
<span className="text-white/80">{f.percentage}%</span>
|
||||
<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>
|
||||
@@ -321,15 +431,13 @@ export default function ExecutiveSummarySlide({ lang, data }: ExecutiveSummarySl
|
||||
</div>
|
||||
|
||||
{/* PDF Download Button */}
|
||||
<FadeInView delay={0.9} className="text-center">
|
||||
<FadeInView delay={0.7} className="text-center pb-4">
|
||||
<button
|
||||
onClick={handleDownloadPdf}
|
||||
className="inline-flex items-center gap-2 px-6 py-2.5 rounded-full
|
||||
bg-indigo-500 hover:bg-indigo-600 transition-colors text-white text-sm font-medium
|
||||
shadow-lg shadow-indigo-500/30 hover:shadow-indigo-500/50"
|
||||
className="inline-flex items-center gap-2 px-6 py-2.5 rounded-full bg-indigo-500 hover:bg-indigo-600 transition-colors text-white text-sm font-medium shadow-lg shadow-indigo-500/30"
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
{es.downloadPdf}
|
||||
{es.downloadPdf} (DIN A3)
|
||||
</button>
|
||||
</FadeInView>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user