feat: Executive Summary Onepager-Slide mit PDF-Download

Neue Folie als erste Content-Slide (nach Intro) mit kompakter Investor-Uebersicht: Problem/Loesung, KPIs, Markt, Team, Funding. PDF-Download via window.print() ohne zusaetzliche Dependencies. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-26 15:00:54 +01:00
parent 322e2d9cb3
commit 4bce3724f2
6 changed files with 411 additions and 1 deletions
--- a/pitch-deck/components/PitchDeck.tsx
+++ b/pitch-deck/components/PitchDeck.tsx
@@ -19,6 +19,7 @@ import PresenterOverlay from './presenter/PresenterOverlay'
 import AvatarPlaceholder from './presenter/AvatarPlaceholder'

 import IntroPresenterSlide from './slides/IntroPresenterSlide'
+import ExecutiveSummarySlide from './slides/ExecutiveSummarySlide'
 import CoverSlide from './slides/CoverSlide'
 import ProblemSlide from './slides/ProblemSlide'
 import SolutionSlide from './slides/SolutionSlide'
@@ -117,6 +118,8 @@ export default function PitchDeck({ lang, onToggleLanguage }: PitchDeckProps) {
            isPresenting={presenter.state !== 'idle'}
          />
        )
+      case 'executive-summary':
+        return <ExecutiveSummarySlide lang={lang} data={data} />
      case 'cover':
        return <CoverSlide lang={lang} onNext={nav.nextSlide} funding={data.funding} />
      case 'problem':
--- a/pitch-deck/components/slides/ExecutiveSummarySlide.tsx
+++ b/pitch-deck/components/slides/ExecutiveSummarySlide.tsx
@@ -0,0 +1,337 @@
+'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">57</div>
+        <div class="label">${es.modules}</div>
+      </div>
+      <div class="card kpi">
+        <div class="value">19</div>
+        <div class="label">${es.regulations}</div>
+      </div>
+      <div class="card kpi">
+        <div class="value">2.274</div>
+        <div class="label">${es.legalTexts}</div>
+      </div>
+      <div class="card kpi">
+        <div class="value">45</div>
+        <div class="label">${es.containers}</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.businessModel}</div>
+      <div class="card">${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: '57', label: es.modules, icon: Brain, color: '#6366f1' },
+            { value: '19', label: es.regulations, icon: FileText, color: '#a78bfa' },
+            { value: '2.274', label: es.legalTexts, icon: Shield, color: '#60a5fa' },
+            { value: '45', label: es.containers, 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-purple-400 uppercase tracking-wider mb-2">{es.businessModel}</h3>
+          <p className="text-xs text-white/70 leading-relaxed">{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>
+  )
+}
--- a/pitch-deck/lib/i18n.ts
+++ b/pitch-deck/lib/i18n.ts
@@ -9,6 +9,7 @@ const translations = {
    },
    slideNames: [
      'Intro',
+      'Executive Summary',
      'Cover',
      'Das Problem',
      'Die Lösung',
@@ -30,6 +31,29 @@ const translations = {
      'Anhang: KI-Pipeline',
      'Anhang: SDK Demo',
    ],
+    executiveSummary: {
+      title: 'Executive Summary',
+      subtitle: 'BreakPilot ComplAI — Ihr Investment auf einen Blick',
+      problem: 'Das Problem',
+      problemText: 'Maschinenbauer entwickeln zunehmend Software — aber DSGVO, AI Act, CRA und NIS2 überfordern interne Teams. Bußgelder von über 4,1 Mrd. EUR und 30.000+ betroffene Unternehmen zeigen den Handlungsdruck.',
+      solution: 'Unsere Lösung',
+      solutionText: 'Self-Hosted KI-Plattform: Mac Mini/Studio im Serverraum scannt Code, bewertet Risiken und generiert Compliance-Dokumente automatisch. 57 Module, 19 Regularien, 2.274 indexierte Rechtstexte — kein Byte verlässt das Unternehmen.',
+      market: 'Markt',
+      businessModel: 'Geschäftsmodell',
+      businessModelText: 'Recurring Revenue mit Hardware-Moat. SaaS-Marge bei Self-Hosted-Sicherheit. Hardware-Einmalkauf + monatliche Lizenz.',
+      keyMetrics: 'Kennzahlen',
+      modules: 'SDK-Module',
+      regulations: 'Regularien',
+      legalTexts: 'Indexierte Rechtstexte',
+      containers: 'Container',
+      linesOfCode: 'Lines of Code',
+      theAsk: 'Finanzierung',
+      round: 'Runde',
+      contact: 'Kontakt',
+      downloadPdf: 'Als PDF herunterladen',
+      usp: 'USP',
+      uspText: 'Einziger Anbieter, der DSGVO + Code-Security + Self-Hosted KI für den Maschinenbau kombiniert.',
+    },
    cover: {
      tagline: 'Compliance & Code-Security für den Maschinenbau',
      subtitle: 'Pre-Seed  ·  Q4 2026',
@@ -233,6 +257,7 @@ const translations = {
    },
    slideNames: [
      'Intro',
+      'Executive Summary',
      'Cover',
      'The Problem',
      'The Solution',
@@ -254,6 +279,29 @@ const translations = {
      'Appendix: AI Pipeline',
      'Appendix: SDK Demo',
    ],
+    executiveSummary: {
+      title: 'Executive Summary',
+      subtitle: 'BreakPilot ComplAI — Your Investment at a Glance',
+      problem: 'The Problem',
+      problemText: 'Machine manufacturers increasingly develop software — but GDPR, AI Act, CRA and NIS2 overwhelm internal teams. Over EUR 4.1B in fines and 30,000+ affected companies show the urgency.',
+      solution: 'Our Solution',
+      solutionText: 'Self-hosted AI platform: Mac Mini/Studio in the server room scans code, assesses risks and generates compliance documents automatically. 57 modules, 19 regulations, 2,274 indexed legal texts — no data leaves the company.',
+      market: 'Market',
+      businessModel: 'Business Model',
+      businessModelText: 'Recurring revenue with hardware moat. SaaS margins with self-hosted security. One-time hardware purchase + monthly license.',
+      keyMetrics: 'Key Metrics',
+      modules: 'SDK Modules',
+      regulations: 'Regulations',
+      legalTexts: 'Indexed Legal Texts',
+      containers: 'Containers',
+      linesOfCode: 'Lines of Code',
+      theAsk: 'Funding',
+      round: 'Round',
+      contact: 'Contact',
+      downloadPdf: 'Download as PDF',
+      usp: 'USP',
+      uspText: 'Only provider combining GDPR + code security + self-hosted AI for machine manufacturing.',
+    },
    cover: {
      tagline: 'Compliance & Code Security for Machine Manufacturers',
      subtitle: 'Pre-Seed  ·  Q4 2026',
--- a/pitch-deck/lib/presenter/presenter-script.ts
+++ b/pitch-deck/lib/presenter/presenter-script.ts
@@ -26,7 +26,27 @@ export const PRESENTER_SCRIPT: SlideScript[] = [
    transition_hint_en: 'Let us begin.',
  },

-  // 1 — cover (20s)
+  // 1 — executive-summary (30s)
+  {
+    slideId: 'executive-summary',
+    duration: 30,
+    paragraphs: [
+      {
+        text_de: 'Bevor wir ins Detail gehen, hier das Wichtigste auf einen Blick: BreakPilot ComplAI ist die einzige Self-Hosted Compliance- und Code-Security-Plattform speziell für den Maschinenbau.',
+        text_en: 'Before we dive into details, here is the key summary: BreakPilot ComplAI is the only self-hosted compliance and code security platform specifically for machine manufacturing.',
+        pause_after: 1500,
+      },
+      {
+        text_de: '57 SDK-Module, 19 Regularien, 761.000 Zeilen Code — und Sie können diesen Onepager als PDF herunterladen, um ihn weiterzuleiten.',
+        text_en: '57 SDK modules, 19 regulations, 761,000 lines of code — and you can download this one-pager as PDF to share it.',
+        pause_after: 1000,
+      },
+    ],
+    transition_hint_de: 'Nun zum vollständigen Pitch.',
+    transition_hint_en: 'Now for the full pitch.',
+  },
+
+  // 2 — cover (20s)
  {
    slideId: 'cover',
    duration: 20,
--- a/pitch-deck/lib/slide-order.ts
+++ b/pitch-deck/lib/slide-order.ts
@@ -2,6 +2,7 @@ import { SlideId } from './types'

 export const SLIDE_ORDER: SlideId[] = [
  'intro-presenter',
+  'executive-summary',
  'cover',
  'problem',
  'solution',
--- a/pitch-deck/lib/types.ts
+++ b/pitch-deck/lib/types.ts
@@ -202,6 +202,7 @@ export interface ChatMessage {

 export type SlideId =
  | 'intro-presenter'
+  | 'executive-summary'
  | 'cover'
  | 'problem'
  | 'solution'