fix: Onepager — Kacheln-Layout mit gleichen Höhen

- grid-rows-2 für alle 3 Spalten → Höhen exakt synchron
- Umsatzerwartung → "Unternehmensentwicklung" mit MA-Spalte integriert
- Mitarbeiter-Kachel → "Zielmärkte" (Maschinenbau, Automobil, Zulieferer, Produktion)
- Unternehmensentwicklung: 4 Spalten (Jahr, MA, Kunden, ARR)
- Linke + rechte Kacheln haben gleiche Höhe wie mittlere

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-03-27 14:27:40 +01:00
parent 129072e0f0
commit 625906f75a

View File

@@ -474,27 +474,31 @@ export default function ExecutiveSummarySlide({ lang, data }: ExecutiveSummarySl
{/* 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 */}
<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' },
{ 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>
{/* Linke Spalte: Zielmärkte + Markt — Höhe an Mitte angepasst */}
<div className="grid grid-rows-2 gap-3">
<GlassCard delay={0.5} hover={false} className="p-3">
<h3 className="text-xs font-bold text-purple-400 uppercase tracking-wider mb-2">{de ? 'Zielmärkte' : 'Target Markets'}</h3>
<div className="space-y-1.5">
{(de ? [
'Maschinen- & Anlagenbau',
'Automobilindustrie',
'Zulieferindustrie',
'Produzierende Unternehmen',
] : [
'Machine & Plant Manufacturing',
'Automotive Industry',
'Supplier Industry',
'Manufacturing Companies',
]).map((item, idx) => (
<p key={idx} className="text-xs text-white/60 pl-3 relative">
<span className="absolute left-0 top-1 w-1.5 h-1.5 rounded-full bg-purple-400/60" />
{item}
</p>
))}
</div>
</GlassCard>
<GlassCard delay={0.55} hover={false} className="p-3 flex-1">
<GlassCard delay={0.55} hover={false} className="p-3">
<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>
@@ -504,23 +508,24 @@ export default function ExecutiveSummarySlide({ lang, data }: ExecutiveSummarySl
</GlassCard>
</div>
{/* 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-[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>
{/* Mittlere Spalte: Unternehmensentwicklung + Wettbewerber */}
<div className="grid grid-rows-2 gap-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 ? 'Unternehmensentwicklung' : 'Company Growth'}</h3>
<div className="grid grid-cols-[1fr_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">MA</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' },
{ year: '2026', emp: '5', cust: '~30', arr: de ? '~22k EUR' : '~EUR 22k' },
{ year: '2027', emp: '10', cust: '~120', arr: de ? '~750k EUR' : '~EUR 750k' },
{ year: '2028', emp: '17', cust: '~350', arr: de ? '~2,5 Mio. EUR' : '~EUR 2.5M' },
{ year: '2029', emp: '25', cust: '~700', arr: de ? '~5,0 Mio. EUR' : '~EUR 5.0M' },
{ year: '2030', emp: '35', cust: '~1.200', arr: de ? '~8,5 Mio. EUR' : '~EUR 8.5M' },
].map((r, idx) => (
<div key={idx} className="grid grid-cols-[1fr_1fr_1fr] gap-x-2 text-xs">
<div key={idx} className="grid grid-cols-[1fr_1fr_1fr_1fr] gap-x-2 text-xs">
<span className="text-white/40">{r.year}</span>
<span className="text-right text-white/50">{r.emp}</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>
@@ -556,9 +561,9 @@ export default function ExecutiveSummarySlide({ lang, data }: ExecutiveSummarySl
</GlassCard>
</div>
{/* Rechte Spalte: Pricing + Kundenersparnis */}
<div className="flex flex-col gap-3">
<GlassCard delay={0.6} hover={false} className="p-3 flex-1">
{/* Rechte Spalte: Pricing + Kundenersparnis — Höhe an Mitte angepasst */}
<div className="grid grid-rows-2 gap-3">
<GlassCard delay={0.6} hover={false} className="p-3">
<h3 className="text-xs font-bold text-amber-400 uppercase tracking-wider mb-2">{de ? 'Pricing' : 'Pricing'}</h3>
<div className="space-y-1.5">
{[
@@ -575,7 +580,7 @@ export default function ExecutiveSummarySlide({ lang, data }: ExecutiveSummarySl
</div>
</GlassCard>
<GlassCard delay={0.65} hover={false} className="p-3 flex-1">
<GlassCard delay={0.65} hover={false} className="p-3">
<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>