f689b892de
Problem: Regulierungs-Tsunami (5+ Gesetze, persoenliche GF-Haftung), jaehrliche Stichproben (50k+ EUR/Jahr), Datensouveraenitaet (0 DE-Alternativen) Loesung: Kontinuierliche Code-Security statt Stichproben, Compliance auf Autopilot (VVT, TOMs, DSFA, Loeschfristen, CE), Deutsche Cloud (BSI DE / OVH FR), Jitsi, Matrix, Jira-Integration ROI: Kunde zahlt 50k/Jahr, spart 50k+ (Pentests, CE, Auditmanager) DB: Funding 1M EUR, SOM 24M EUR Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
338 lines
14 KiB
TypeScript
338 lines
14 KiB
TypeScript
'use client'
|
|
|
|
import { useCallback } from 'react'
|
|
import { Language, PitchData } from '@/lib/types'
|
|
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'
|
|
|
|
interface ExecutiveSummarySlideProps {
|
|
lang: Language
|
|
data: PitchData
|
|
}
|
|
|
|
export default function ExecutiveSummarySlide({ lang, data }: ExecutiveSummarySlideProps) {
|
|
const i = t(lang)
|
|
const es = i.executiveSummary
|
|
|
|
const funding = data.funding
|
|
const amount = funding?.amount_eur || 0
|
|
const amountLabel = amount >= 1_000_000
|
|
? `${(amount / 1_000_000).toFixed(1)} Mio. EUR`
|
|
: `${(amount / 1_000).toFixed(0)}k EUR`
|
|
|
|
const market = data.market || []
|
|
const tam = market.find(m => m.market_segment === 'TAM')
|
|
const sam = market.find(m => m.market_segment === 'SAM')
|
|
const som = market.find(m => m.market_segment === 'SOM')
|
|
|
|
const handleDownloadPdf = useCallback(() => {
|
|
const printWindow = window.open('', '_blank')
|
|
if (!printWindow) return
|
|
|
|
const tamVal = tam ? formatEur(tam.value_eur, lang) : '—'
|
|
const samVal = sam ? formatEur(sam.value_eur, lang) : '—'
|
|
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>`
|
|
).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>`
|
|
).join('') || ''
|
|
|
|
printWindow.document.write(`<!DOCTYPE html>
|
|
<html>
|
|
<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>
|
|
</head>
|
|
<body>
|
|
<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>
|
|
</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>
|
|
|
|
<div class="grid2">
|
|
<div class="card highlight">
|
|
<div class="section-title">${es.problem}</div>
|
|
<div>${es.problemText}</div>
|
|
</div>
|
|
<div class="card highlight">
|
|
<div class="section-title">${es.solution}</div>
|
|
<div>${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>
|
|
|
|
<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>
|
|
<div class="section">
|
|
<div class="section-title">${es.roi || es.businessModel}</div>
|
|
<div class="card">${es.roiText || es.businessModelText}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid2">
|
|
<div class="section">
|
|
<div class="section-title">Team</div>
|
|
<div class="card">${teamHtml}</div>
|
|
</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>
|
|
${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>`)
|
|
|
|
printWindow.document.close()
|
|
setTimeout(() => printWindow.print(), 300)
|
|
}, [lang, data, es, funding, tam, sam, som, amountLabel])
|
|
|
|
return (
|
|
<div className="max-w-6xl mx-auto">
|
|
<FadeInView className="text-center mb-6">
|
|
<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>
|
|
</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>
|
|
|
|
<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>
|
|
</div>
|
|
<p className="text-xs 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">
|
|
{[
|
|
{ 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: 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>
|
|
))}
|
|
</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>
|
|
<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>
|
|
))}
|
|
</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>
|
|
|
|
<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>
|
|
<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>
|
|
</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>
|
|
{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>
|
|
))}
|
|
</div>
|
|
</GlassCard>
|
|
</div>
|
|
|
|
{/* PDF Download Button */}
|
|
<FadeInView delay={0.9} className="text-center">
|
|
<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"
|
|
>
|
|
<Download className="w-4 h-4" />
|
|
{es.downloadPdf}
|
|
</button>
|
|
</FadeInView>
|
|
</div>
|
|
)
|
|
}
|