Benjamin_Boenisch/breakpilot-core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Onepager Layout — 3 Spalten gestapelt + 5. Problem-Bullet

Browse Source 
Layout: schmal | breit | schmal (grid-cols-[1fr_2fr_1fr])
- Links: Mitarbeiter + Markt (übereinander, schmal)
- Mitte: Umsatzerwartung + Wettbewerber (übereinander, breit)
  Mit sauberen Grid-Spalten und größeren Spaltenüberschriften
- Rechts: Pricing + Kundenersparnis (übereinander, schmal)

Problem: 5. Bullet "Pentests und CE-Zertifizierungen kosten 50.000+
EUR/Jahr — prüfen aber nur einmal"

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-03-27 13:42:32 +01:00
parent cf476ea986
commit dbc4e59e24
1 changed files with 112 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
pitch-deck/components/slides/ExecutiveSummarySlide.tsx
View File

@@ -306,12 +306,14 @@ export default function ExecutiveSummarySlide({ lang, data }: ExecutiveSummarySl
{(de ? [ {(de ? [
'Ohne KI verlieren sie ihre Wettbewerbsfähigkeit', 'Ohne KI verlieren sie ihre Wettbewerbsfähigkeit',
'Mit US-KI riskieren sie, die Kontrolle über ihre sensibelsten Daten zu verlieren', 'Mit US-KI riskieren sie, die Kontrolle über ihre sensibelsten Daten zu verlieren',
'Neue EU-Regulierungen (AI Act, CRA, NIS2) zwingen über 30.000 Unternehmen in Deutschland in hochkomplexe Compliance-Prozesse', 'Neue EU-Regulierungen (AI Act, CRA, NIS2) zwingen über 30.000 Unternehmen in hochkomplexe Compliance-Prozesse',
'Pentests und CE-Zertifizierungen kosten 50.000+ EUR/Jahr — prüfen aber nur einmal',
'Das Ergebnis: Stillstand in einer Phase, in der Geschwindigkeit entscheidend ist', 'Das Ergebnis: Stillstand in einer Phase, in der Geschwindigkeit entscheidend ist',
] : [ ] : [
'Without AI they lose their competitiveness', 'Without AI they lose their competitiveness',
'With US AI they risk losing control over their most sensitive data', 'With US AI they risk losing control over their most sensitive data',
'New EU regulations (AI Act, CRA, NIS2) force over 30,000 companies in Germany into complex compliance processes', 'New EU regulations (AI Act, CRA, NIS2) force over 30,000 companies into complex compliance processes',
'Pentests and CE certifications cost EUR 50,000+/year — but only check once',
'The result: standstill in a phase where speed is decisive', 'The result: standstill in a phase where speed is decisive',
]).map((item, idx) => ( ]).map((item, idx) => (
<p key={idx} className="text-xs text-white/70 pl-4 relative leading-relaxed"> <p key={idx} className="text-xs text-white/70 pl-4 relative leading-relaxed">
@@ -469,111 +471,119 @@ export default function ExecutiveSummarySlide({ lang, data }: ExecutiveSummarySl
</div> </div>
</FadeInView> </FadeInView>
{/* Umsatzerwartung + Mitarbeiter + Pricing */} {/* 3-Spalten Layout: schmal | breit | schmal */}
<div className="grid md:grid-cols-3 gap-3 mb-4"> <div className="grid md:grid-cols-[1fr_2fr_1fr] gap-3 mb-4">
<GlassCard delay={0.5} hover={false} className="p-3">
<h3 className="text-xs font-bold text-indigo-400 uppercase tracking-wider mb-1.5">{de ? 'Umsatzerwartung' : 'Revenue Forecast'}</h3>
<div className="flex justify-between text-[7px] text-white/30 uppercase tracking-wider mb-1">
<span></span><span>{de ? 'Kunden' : 'Cust.'}</span><span>ARR</span>
</div>
<div className="space-y-1 text-xs">
{[
{ year: '2026', cust: '~30', arr: de ? '~22k EUR' : '~EUR 22k' },
{ year: '2027', cust: '~120', arr: de ? '~750k EUR' : '~EUR 750k' },
{ year: '2028', cust: '~350', arr: de ? '~2,5 Mio. EUR' : '~EUR 2.5M' },
{ year: '2029', cust: '~700', arr: de ? '~5,0 Mio. EUR' : '~EUR 5.0M' },
{ year: '2030', cust: '~1.200', arr: de ? '~8,5 Mio. EUR' : '~EUR 8.5M' },
].map((r, idx) => (
<div key={idx} className="flex justify-between">
<span className="text-white/40">{r.year}</span>
<span className="text-white/40 text-[10px]">{r.cust}</span>
<span className={`font-mono ${idx >= 3 ? 'text-emerald-300 font-bold' : 'text-white/70'}`}>{r.arr}</span>
</div>
))}
</div>
</GlassCard>
<GlassCard delay={0.55} hover={false} className="p-3"> {/* Linke Spalte: Mitarbeiter + Markt (schmal, gestapelt) */}
<h3 className="text-xs font-bold text-purple-400 uppercase tracking-wider mb-1.5">{de ? 'Mitarbeiterentwicklung' : 'Headcount Growth'}</h3> <div className="space-y-3">
<div className="space-y-1 text-xs"> <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 ? 'Mitarbeiter' : 'Headcount'}</h3>
{ year: '2026', count: '5' }, <div className="space-y-1 text-xs">
{ year: '2027', count: '10' }, {[
{ year: '2028', count: '17' }, { year: '2026', count: '5' },
{ year: '2029', count: '25' }, { year: '2027', count: '10' },
{ year: '2030', count: '35' }, { year: '2028', count: '17' },
].map((r, idx) => ( { year: '2029', count: '25' },
<div key={idx} className="flex justify-between"> { year: '2030', count: '35' },
<span className="text-white/40">{r.year}</span> ].map((r, idx) => (
<span className="text-white/70 font-mono">{r.count}</span> <div key={idx} className="flex justify-between">
</div> <span className="text-white/40">{r.year}</span>
))} <span className="text-white/70 font-mono">{r.count}</span>
</div> </div>
</GlassCard> ))}
</div>
</GlassCard>
<GlassCard delay={0.6} hover={false} className="p-3"> <GlassCard delay={0.55} hover={false} className="p-3">
<h3 className="text-xs font-bold text-amber-400 uppercase tracking-wider mb-1.5">{de ? 'Pricing nach Unternehmensgröße' : 'Pricing by Company Size'}</h3> <h3 className="text-xs font-bold text-amber-400 uppercase tracking-wider mb-1.5">{de ? 'Markt' : 'Market'}</h3>
<div className="space-y-1.5"> <div className="space-y-1 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>
{ tier: 'Startup / < 10', price: de ? 'ab 3.600 EUR/Jahr' : 'from EUR 3,600/yr', note: de ? '14 Tage Test' : '14-day trial' }, <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>
{ tier: '10 – 50 MA', price: de ? 'ab 15.000 EUR/Jahr' : 'from EUR 15,000/yr' }, <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>
{ tier: '50 – 250 MA', price: de ? 'ab 30.000 EUR/Jahr' : 'from EUR 30,000/yr' }, </div>
{ tier: '250+ MA', price: de ? 'ab 40.000 EUR/Jahr' : 'from EUR 40,000/yr', highlight: true }, </GlassCard>
].map((t, idx) => ( </div>
<div key={idx} className={`flex justify-between items-center text-xs ${t.highlight ? 'text-amber-300 font-bold' : 'text-white/60'}`}>
<span>{t.tier}</span>
<span className="font-mono text-[10px]">{t.price}</span>
</div>
))}
</div>
</GlassCard>
</div>
{/* Bottom: Kundenersparnis + Wettbewerber + Markt */} {/* Mittlere Spalte: Umsatzerwartung + Wettbewerber (breit, gestapelt) */}
<div className="grid md:grid-cols-3 gap-3 mb-4"> <div className="space-y-3">
<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-emerald-400 uppercase tracking-wider mb-1.5">{de ? 'Kundenersparnis' : 'Customer Savings'}</h3> <h3 className="text-xs font-bold text-indigo-400 uppercase tracking-wider mb-2">{de ? 'Umsatzerwartung' : 'Revenue Forecast'}</h3>
<div className="space-y-1 text-xs text-white/60"> <div className="grid grid-cols-[60px_1fr_1fr] gap-x-3 text-[10px] text-white/30 uppercase tracking-wider mb-1.5 border-b border-white/10 pb-1">
<div className="flex justify-between"><span>Pentests</span><strong className="text-emerald-300">30.000 EUR</strong></div> <span>{de ? 'Jahr' : 'Year'}</span><span className="text-right">{de ? 'Kunden' : 'Customers'}</span><span className="text-right">ARR</span>
<div className="flex justify-between"><span>CE-Beurteilungen</span><strong className="text-emerald-300">20.000 EUR</strong></div> </div>
<div className="flex justify-between"><span>Auditmanager</span><strong className="text-emerald-300">60.000+ EUR</strong></div> <div className="space-y-1">
<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> { year: '2026', cust: '~30', arr: de ? '~22k EUR' : '~EUR 22k' },
</GlassCard> { year: '2027', cust: '~120', arr: de ? '~750k EUR' : '~EUR 750k' },
{ year: '2028', cust: '~350', arr: de ? '~2,5 Mio. EUR' : '~EUR 2.5M' },
{ year: '2029', cust: '~700', arr: de ? '~5,0 Mio. EUR' : '~EUR 5.0M' },
{ year: '2030', cust: '~1.200', arr: de ? '~8,5 Mio. EUR' : '~EUR 8.5M' },
].map((r, idx) => (
<div key={idx} className="grid grid-cols-[60px_1fr_1fr] gap-x-3 text-xs">
<span className="text-white/40">{r.year}</span>
<span className="text-right text-white/50">{r.cust}</span>
<span className={`text-right font-mono ${idx >= 3 ? 'text-emerald-300 font-bold' : 'text-white/70'}`}>{r.arr}</span>
</div>
))}
</div>
</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-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-2">{de ? 'Wettbewerber' : 'Competitors'}</h3>
<div className="flex justify-between text-[7px] text-white/30 uppercase tracking-wider mb-1 px-0.5"> <div className="grid grid-cols-[90px_40px_55px_55px_55px] gap-x-2 text-[9px] text-white/30 uppercase tracking-wider mb-1.5 border-b border-white/10 pb-1">
<span></span><span>{de ? 'Gegr.' : 'Est.'}</span><span>{de ? 'Kunden' : 'Cust.'}</span><span>{de ? 'Umsatz' : 'Rev.'}</span><span>Invest</span> <span></span><span>{de ? 'Gegr.' : 'Est.'}</span><span className="text-right">{de ? 'Kunden' : 'Cust.'}</span><span className="text-right">{de ? 'Umsatz' : 'Revenue'}</span><span className="text-right">Invest</span>
</div> </div>
<div className="space-y-0.5"> <div className="space-y-1">
{[ {[
{ name: 'Vanta', flag: '🇺🇸', year: '2018', cust: '8.000+', rev: '$220M', invest: '$504M' }, { name: 'Vanta', flag: '🇺🇸', year: '2018', cust: '8.000+', rev: '$220M', invest: '$504M' },
{ name: 'Drata', flag: '🇺🇸', year: '2020', cust: '5.000+', rev: '$100M', invest: '$328M' }, { name: 'Drata', flag: '🇺🇸', year: '2020', cust: '5.000+', rev: '$100M', invest: '$328M' },
{ name: 'Sprinto', flag: '🇮🇳', year: '2020', cust: '2.000+', rev: '—', invest: '$32M' }, { name: 'Sprinto', flag: '🇮🇳', year: '2020', cust: '2.000+', rev: '—', invest: '$32M' },
{ name: 'DataGuard', flag: '🇩🇪', year: '2017', cust: '4.000+', rev: '€52M', invest: '€80M' }, { name: 'DataGuard', flag: '🇩🇪', year: '2017', cust: '4.000+', rev: '€52M', invest: '€80M' },
{ name: 'Proliance', flag: '🇩🇪', year: '2017', cust: '2.500+', rev: '—', invest: 'Pre-Seed' }, { name: 'Proliance', flag: '🇩🇪', year: '2017', cust: '2.500+', rev: '—', invest: 'Pre-Seed' },
{ name: 'heyData', flag: '🇩🇪', year: '2019', cust: '1.500+', rev: '—', invest: '€18M' }, { name: 'heyData', flag: '🇩🇪', year: '2019', cust: '1.500+', rev: '—', invest: '€18M' },
].map((c, idx) => ( ].map((c, idx) => (
<div key={idx} className="flex items-center justify-between text-[9px] gap-1"> <div key={idx} className="grid grid-cols-[90px_40px_55px_55px_55px] gap-x-2 text-[10px]">
<span className="text-white/70 shrink-0 min-w-[70px]">{c.flag} {c.name}</span> <span className="text-white/70">{c.flag} {c.name}</span>
<span className="text-white/30 text-[8px]">{c.year}</span> <span className="text-white/30">{c.year}</span>
<span className="text-white/40 text-[8px]">{c.cust}</span> <span className="text-right text-white/50">{c.cust}</span>
<span className="text-white/40 text-[8px]">{c.rev}</span> <span className="text-right text-white/50">{c.rev}</span>
<span className="text-white/60 font-mono text-[8px] shrink-0">{c.invest}</span> <span className="text-right text-white/60 font-mono">{c.invest}</span>
</div> </div>
))} ))}
</div> </div>
</GlassCard> </GlassCard>
</div>
{/* Rechte Spalte: Pricing + Kundenersparnis (schmal, gestapelt) */}
<div className="space-y-3">
<GlassCard delay={0.6} hover={false} className="p-3">
<h3 className="text-xs font-bold text-amber-400 uppercase tracking-wider mb-1.5">{de ? 'Pricing' : 'Pricing'}</h3>
<div className="space-y-1.5">
{[
{ tier: 'Startup / <10', price: de ? 'ab 3.600€/J.' : 'from €3,600/yr' },
{ tier: '10–50 MA', price: de ? 'ab 15.000€/J.' : 'from €15k/yr' },
{ tier: '50–250 MA', price: de ? 'ab 30.000€/J.' : 'from €30k/yr' },
{ tier: '250+ MA', price: de ? 'ab 40.000€/J.' : 'from €40k/yr', highlight: true },
].map((t, idx) => (
<div key={idx} className={`flex justify-between text-xs ${t.highlight ? 'text-amber-300 font-bold' : 'text-white/60'}`}>
<span>{t.tier}</span>
<span className="font-mono text-[10px]">{t.price}</span>
</div>
))}
</div>
</GlassCard>
<GlassCard delay={0.65} hover={false} className="p-3">
<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="flex justify-between"><span>Pentests</span><strong className="text-emerald-300">30k</strong></div>
<div className="flex justify-between"><span>CE-Beurt.</span><strong className="text-emerald-300">20k</strong></div>
<div className="flex justify-between"><span>Audit Mgr.</span><strong className="text-emerald-300">60k+</strong></div>
<div className="flex justify-between border-t border-white/10 pt-1 mt-1"><span className="font-bold text-white/80">{de ? 'pro Jahr' : 'per year'}</span><strong className="text-emerald-300">50-110k</strong></div>
</div>
</GlassCard>
</div>
<GlassCard delay={0.6} hover={false} className="p-3">
<h3 className="text-xs font-bold text-amber-400 uppercase tracking-wider mb-1.5">{de ? 'Markt' : 'Market'}</h3>
<div className="space-y-1 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">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>
</GlassCard>
</div> </div>
{/* Disclaimer */} {/* Disclaimer */}