fix: Onepager Layout + Wettbewerber-Daten aktualisiert
Layout: grid-cols-[1fr_1.6fr_1fr], flex-1 für gleiche Höhen - Links: Mitarbeiter + Markt (schmal, gleiche Höhe) - Mitte: Umsatz + Wettbewerber (breiter, grid-cols für saubere Spalten) - Rechts: Pricing + Kundenersparnis (schmal, gleiche Höhe) Wettbewerber aktualisiert mit recherchierten Daten: - +Delve (🇺🇸 2024, 24 MA, $2,6M ARR, $35M Invest) - +Mitarbeiter-Spalte (MA) für alle - Sprinto: $38M ARR (Latka) - DataGuard: €20-30M ARR, €65M Invest - Proliance: €5-10M ARR - heyData: €3-10M ARR Go-to-Market: farbige Bullet Points pro Phase Spalten in Umsatz + Wettbewerber: grid mit 1fr statt fixer px Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -436,8 +436,8 @@ export default function ExecutiveSummarySlide({ lang, data }: ExecutiveSummarySl
|
||||
<div key={idx} className={`${phase.color} border rounded-lg px-3 py-3`}>
|
||||
<p className={`text-sm font-bold ${phase.textColor} mb-1.5`}>{phase.title}</p>
|
||||
{phase.items.map((item, i) => (
|
||||
<p key={i} className="text-xs text-white/60 pl-3 relative leading-relaxed">
|
||||
<span className="absolute left-0 top-1 w-1.5 h-1.5 rounded-full bg-white/20" />{item}
|
||||
<p key={i} className="text-xs text-white/60 pl-4 relative leading-relaxed">
|
||||
<span className={`absolute left-0 top-1 w-1.5 h-1.5 rounded-full ${phase.textColor === 'text-indigo-300' ? 'bg-indigo-400/60' : phase.textColor === 'text-purple-300' ? 'bg-purple-400/60' : 'bg-emerald-400/60'}`} />{item}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
@@ -471,14 +471,14 @@ export default function ExecutiveSummarySlide({ lang, data }: ExecutiveSummarySl
|
||||
</div>
|
||||
</FadeInView>
|
||||
|
||||
{/* 3-Spalten Layout: schmal | breit | schmal */}
|
||||
<div className="grid md:grid-cols-[1fr_2fr_1fr] gap-3 mb-4">
|
||||
{/* 3-Spalten Layout: schmal | mittel-breit | schmal */}
|
||||
<div className="grid md:grid-cols-[1fr_1.6fr_1fr] gap-3 mb-4">
|
||||
|
||||
{/* 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">
|
||||
{/* Linke Spalte: Mitarbeiter + Markt */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<GlassCard delay={0.5} hover={false} className="p-3 flex-1">
|
||||
<h3 className="text-xs font-bold text-purple-400 uppercase tracking-wider mb-2">{de ? 'Mitarbeiter' : 'Headcount'}</h3>
|
||||
<div className="space-y-1.5 text-xs">
|
||||
{[
|
||||
{ year: '2026', count: '5' },
|
||||
{ year: '2027', count: '10' },
|
||||
@@ -494,9 +494,9 @@ export default function ExecutiveSummarySlide({ lang, data }: ExecutiveSummarySl
|
||||
</div>
|
||||
</GlassCard>
|
||||
|
||||
<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">
|
||||
<GlassCard delay={0.55} hover={false} className="p-3 flex-1">
|
||||
<h3 className="text-xs font-bold text-amber-400 uppercase tracking-wider mb-2">{de ? 'Markt' : 'Market'}</h3>
|
||||
<div className="space-y-1.5 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>
|
||||
@@ -504,11 +504,11 @@ export default function ExecutiveSummarySlide({ lang, data }: ExecutiveSummarySl
|
||||
</GlassCard>
|
||||
</div>
|
||||
|
||||
{/* Mittlere Spalte: Umsatzerwartung + Wettbewerber (breit, gestapelt) */}
|
||||
<div className="space-y-3">
|
||||
<GlassCard delay={0.5} hover={false} className="p-3">
|
||||
{/* Mittlere Spalte: Umsatzerwartung + Wettbewerber */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<GlassCard delay={0.5} hover={false} className="p-3 flex-1">
|
||||
<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">
|
||||
<div className="grid grid-cols-[1fr_1fr_1fr] gap-x-2 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">
|
||||
@@ -519,7 +519,7 @@ export default function ExecutiveSummarySlide({ lang, data }: ExecutiveSummarySl
|
||||
{ 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">
|
||||
<div key={idx} className="grid grid-cols-[1fr_1fr_1fr] gap-x-2 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>
|
||||
@@ -528,23 +528,25 @@ export default function ExecutiveSummarySlide({ lang, data }: ExecutiveSummarySl
|
||||
</div>
|
||||
</GlassCard>
|
||||
|
||||
<GlassCard delay={0.55} hover={false} className="p-3">
|
||||
<GlassCard delay={0.55} hover={false} className="p-3 flex-1">
|
||||
<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 className="grid grid-cols-[1.2fr_0.6fr_0.6fr_0.8fr_0.8fr_0.8fr] gap-x-1 text-[8px] text-white/30 uppercase tracking-wider mb-1.5 border-b border-white/10 pb-1">
|
||||
<span></span><span>{de ? 'Gegr.' : 'Est.'}</span><span>MA</span><span className="text-right">{de ? 'Kunden' : 'Cust.'}</span><span className="text-right">ARR</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' },
|
||||
{ name: 'Vanta', flag: '🇺🇸', year: '2018', emp: '500+', cust: '8.000+', rev: '$220M', invest: '$504M' },
|
||||
{ name: 'Drata', flag: '🇺🇸', year: '2020', emp: '500+', cust: '5.000+', rev: '$100M', invest: '$328M' },
|
||||
{ name: 'Sprinto', flag: '🇮🇳', year: '2020', emp: '345', cust: '2.000+', rev: '$38M', invest: '$32M' },
|
||||
{ name: 'Delve', flag: '🇺🇸', year: '2024', emp: '24', cust: '—', rev: '$2,6M', invest: '$35M' },
|
||||
{ name: 'DataGuard', flag: '🇩🇪', year: '2017', emp: '400+', cust: '4.000+', rev: '€20-30M', invest: '€65M' },
|
||||
{ name: 'Proliance', flag: '🇩🇪', year: '2017', emp: '100+', cust: '2.500+', rev: '€5-10M', invest: 'k.A.' },
|
||||
{ name: 'heyData', flag: '🇩🇪', year: '2019', emp: '80+', cust: '2.000+', rev: '€3-10M', invest: '€18M' },
|
||||
].map((c, idx) => (
|
||||
<div key={idx} className="grid grid-cols-[90px_40px_55px_55px_55px] gap-x-2 text-[10px]">
|
||||
<div key={idx} className="grid grid-cols-[1.2fr_0.6fr_0.6fr_0.8fr_0.8fr_0.8fr] gap-x-1 text-[9px]">
|
||||
<span className="text-white/70">{c.flag} {c.name}</span>
|
||||
<span className="text-white/30">{c.year}</span>
|
||||
<span className="text-white/40">{c.emp}</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>
|
||||
@@ -554,10 +556,10 @@ export default function ExecutiveSummarySlide({ lang, data }: ExecutiveSummarySl
|
||||
</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>
|
||||
{/* Rechte Spalte: Pricing + Kundenersparnis */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<GlassCard delay={0.6} hover={false} className="p-3 flex-1">
|
||||
<h3 className="text-xs font-bold text-amber-400 uppercase tracking-wider mb-2">{de ? 'Pricing' : 'Pricing'}</h3>
|
||||
<div className="space-y-1.5">
|
||||
{[
|
||||
{ tier: 'Startup / <10', price: de ? 'ab 3.600€/J.' : 'from €3,600/yr' },
|
||||
@@ -573,13 +575,13 @@ export default function ExecutiveSummarySlide({ lang, data }: ExecutiveSummarySl
|
||||
</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">
|
||||
<GlassCard delay={0.65} hover={false} className="p-3 flex-1">
|
||||
<h3 className="text-xs font-bold text-emerald-400 uppercase tracking-wider mb-2">{de ? 'Kundenersparnis' : 'Customer Savings'}</h3>
|
||||
<div className="space-y-1.5 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 className="flex justify-between border-t border-white/10 pt-1 mt-1"><span className="font-bold text-white/80">{de ? 'pro Jahr' : '/year'}</span><strong className="text-emerald-300">50-110k</strong></div>
|
||||
</div>
|
||||
</GlassCard>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user