fix: Onepager Layout — 3 Spalten gestapelt + 5. Problem-Bullet
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
@@ -306,12 +306,14 @@ export default function ExecutiveSummarySlide({ lang, data }: ExecutiveSummarySl
|
||||
{(de ? [
|
||||
'Ohne KI verlieren sie ihre Wettbewerbsfähigkeit',
|
||||
'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',
|
||||
] : [
|
||||
'Without AI they lose their competitiveness',
|
||||
'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',
|
||||
]).map((item, idx) => (
|
||||
<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>
|
||||
</FadeInView>
|
||||
|
||||
{/* Umsatzerwartung + Mitarbeiter + Pricing */}
|
||||
<div className="grid md:grid-cols-3 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>
|
||||
{/* 3-Spalten Layout: schmal | breit | schmal */}
|
||||
<div className="grid md:grid-cols-[1fr_2fr_1fr] gap-3 mb-4">
|
||||
|
||||
<GlassCard delay={0.55} hover={false} className="p-3">
|
||||
<h3 className="text-xs font-bold text-purple-400 uppercase tracking-wider mb-1.5">{de ? 'Mitarbeiterentwicklung' : 'Headcount Growth'}</h3>
|
||||
<div className="space-y-1 text-xs">
|
||||
{[
|
||||
{ year: '2026', count: '5' },
|
||||
{ year: '2027', count: '10' },
|
||||
{ year: '2028', count: '17' },
|
||||
{ year: '2029', count: '25' },
|
||||
{ year: '2030', count: '35' },
|
||||
].map((r, idx) => (
|
||||
<div key={idx} className="flex justify-between">
|
||||
<span className="text-white/40">{r.year}</span>
|
||||
<span className="text-white/70 font-mono">{r.count}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</GlassCard>
|
||||
{/* Linke Spalte: Mitarbeiter + Markt (schmal, gestapelt) */}
|
||||
<div className="space-y-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 ? 'Mitarbeiter' : 'Headcount'}</h3>
|
||||
<div className="space-y-1 text-xs">
|
||||
{[
|
||||
{ year: '2026', count: '5' },
|
||||
{ year: '2027', count: '10' },
|
||||
{ year: '2028', count: '17' },
|
||||
{ year: '2029', count: '25' },
|
||||
{ year: '2030', count: '35' },
|
||||
].map((r, idx) => (
|
||||
<div key={idx} className="flex justify-between">
|
||||
<span className="text-white/40">{r.year}</span>
|
||||
<span className="text-white/70 font-mono">{r.count}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</GlassCard>
|
||||
|
||||
<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 nach Unternehmensgröße' : 'Pricing by Company Size'}</h3>
|
||||
<div className="space-y-1.5">
|
||||
{[
|
||||
{ tier: 'Startup / < 10', price: de ? 'ab 3.600 EUR/Jahr' : 'from EUR 3,600/yr', note: de ? '14 Tage Test' : '14-day trial' },
|
||||
{ tier: '10 – 50 MA', price: de ? 'ab 15.000 EUR/Jahr' : 'from EUR 15,000/yr' },
|
||||
{ tier: '50 – 250 MA', price: de ? 'ab 30.000 EUR/Jahr' : 'from EUR 30,000/yr' },
|
||||
{ tier: '250+ MA', price: de ? 'ab 40.000 EUR/Jahr' : 'from EUR 40,000/yr', highlight: true },
|
||||
].map((t, idx) => (
|
||||
<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>
|
||||
<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 ? '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>
|
||||
|
||||
{/* Bottom: Kundenersparnis + Wettbewerber + Markt */}
|
||||
<div className="grid md:grid-cols-3 gap-3 mb-4">
|
||||
<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>
|
||||
<div className="space-y-1 text-xs text-white/60">
|
||||
<div className="flex justify-between"><span>Pentests</span><strong className="text-emerald-300">30.000 EUR</strong></div>
|
||||
<div className="flex justify-between"><span>CE-Beurteilungen</span><strong className="text-emerald-300">20.000 EUR</strong></div>
|
||||
<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>
|
||||
</GlassCard>
|
||||
{/* Mittlere Spalte: Umsatzerwartung + Wettbewerber (breit, gestapelt) */}
|
||||
<div className="space-y-3">
|
||||
<GlassCard delay={0.5} hover={false} className="p-3">
|
||||
<h3 className="text-xs font-bold text-indigo-400 uppercase tracking-wider mb-2">{de ? 'Umsatzerwartung' : 'Revenue Forecast'}</h3>
|
||||
<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">
|
||||
<span>{de ? 'Jahr' : 'Year'}</span><span className="text-right">{de ? 'Kunden' : 'Customers'}</span><span className="text-right">ARR</span>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
{[
|
||||
{ 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="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">
|
||||
<h3 className="text-xs font-bold text-red-400 uppercase tracking-wider mb-1.5">{de ? 'Wettbewerber' : 'Competitors'}</h3>
|
||||
<div className="flex justify-between text-[7px] text-white/30 uppercase tracking-wider mb-1 px-0.5">
|
||||
<span></span><span>{de ? 'Gegr.' : 'Est.'}</span><span>{de ? 'Kunden' : 'Cust.'}</span><span>{de ? 'Umsatz' : 'Rev.'}</span><span>Invest</span>
|
||||
</div>
|
||||
<div className="space-y-0.5">
|
||||
{[
|
||||
{ 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: 'Sprinto', flag: '🇮🇳', year: '2020', cust: '2.000+', rev: '—', invest: '$32M' },
|
||||
{ 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: 'heyData', flag: '🇩🇪', year: '2019', cust: '1.500+', rev: '—', invest: '€18M' },
|
||||
].map((c, idx) => (
|
||||
<div key={idx} className="flex items-center justify-between text-[9px] gap-1">
|
||||
<span className="text-white/70 shrink-0 min-w-[70px]">{c.flag} {c.name}</span>
|
||||
<span className="text-white/30 text-[8px]">{c.year}</span>
|
||||
<span className="text-white/40 text-[8px]">{c.cust}</span>
|
||||
<span className="text-white/40 text-[8px]">{c.rev}</span>
|
||||
<span className="text-white/60 font-mono text-[8px] shrink-0">{c.invest}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</GlassCard>
|
||||
<GlassCard delay={0.55} hover={false} className="p-3">
|
||||
<h3 className="text-xs font-bold text-red-400 uppercase tracking-wider mb-2">{de ? 'Wettbewerber' : 'Competitors'}</h3>
|
||||
<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 className="text-right">{de ? 'Kunden' : 'Cust.'}</span><span className="text-right">{de ? 'Umsatz' : 'Revenue'}</span><span className="text-right">Invest</span>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
{[
|
||||
{ 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: 'Sprinto', flag: '🇮🇳', year: '2020', cust: '2.000+', rev: '—', invest: '$32M' },
|
||||
{ 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: 'heyData', flag: '🇩🇪', year: '2019', cust: '1.500+', rev: '—', invest: '€18M' },
|
||||
].map((c, idx) => (
|
||||
<div key={idx} className="grid grid-cols-[90px_40px_55px_55px_55px] gap-x-2 text-[10px]">
|
||||
<span className="text-white/70">{c.flag} {c.name}</span>
|
||||
<span className="text-white/30">{c.year}</span>
|
||||
<span className="text-right text-white/50">{c.cust}</span>
|
||||
<span className="text-right text-white/50">{c.rev}</span>
|
||||
<span className="text-right text-white/60 font-mono">{c.invest}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</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>
|
||||
|
||||
{/* Disclaimer */}
|
||||
|
||||
Reference in New Issue
Block a user