1b5c2a156c
KPIs Tab: 15 Kennzahlen pro Jahr (2026-2030) MRR, ARR, Kunden, ARPU, Mitarbeiter, Umsatz/MA, Personalkosten, EBIT, EBIT-Marge, Steuern, Jahresüberschuss, Serverkosten/Kunde, Bruttomarge, Burn Rate, Runway Grafiken Tab: - MRR & Kundenentwicklung (Balkendiagramm, 5 Jahre) - EBIT (Rot/Grün je nach Verlust/Gewinn) - Personalaufbau (Balkendiagramm 5→35) ROI korrigiert (Ersparnis ÷ Preis): KMU: 3,5x, Mittelstand: 7,5x, Konzern: 20,8x Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
162 lines
8.7 KiB
TypeScript
162 lines
8.7 KiB
TypeScript
'use client'
|
||
|
||
import { Language } from '@/lib/types'
|
||
import GradientText from '../ui/GradientText'
|
||
import FadeInView from '../ui/FadeInView'
|
||
import GlassCard from '../ui/GlassCard'
|
||
import { TrendingDown, Building2, Factory, Building } from 'lucide-react'
|
||
|
||
interface SavingsSlideProps {
|
||
lang: Language
|
||
}
|
||
|
||
export default function SavingsSlide({ lang }: SavingsSlideProps) {
|
||
const de = lang === 'de'
|
||
|
||
const companies = [
|
||
{
|
||
icon: Building2,
|
||
color: 'text-indigo-400',
|
||
bg: 'border-indigo-500/20',
|
||
name: de ? 'KMU (25 MA)' : 'SME (25 emp.)',
|
||
desc: de ? '2-3 Apps, 1-2 Produkte mit SW' : '2-3 apps, 1-2 products with SW',
|
||
bp_price: de ? '15.000 EUR/Jahr' : 'EUR 15,000/yr',
|
||
savings: [
|
||
{ label: de ? 'Pentests (2-3 Apps × 6.000€)' : 'Pentests (2-3 apps × €6,000)', without: '18.000', with: '5.000', save: '13.000' },
|
||
{ label: de ? 'CE-SW-Risikobeurteilung (1-2 Produkte)' : 'CE SW risk assessment (1-2 products)', without: '12.000', with: '3.000', save: '9.000' },
|
||
{ label: de ? 'Ext. Datenschutzbeauftragter' : 'External DPO', without: '6.000', with: '0', save: '6.000' },
|
||
{ label: de ? 'Compliance-Dokumentation (VVT, TOMs)' : 'Compliance docs (RoPA, TOMs)', without: '8.000', with: '0', save: '8.000' },
|
||
{ label: de ? 'Entwickler-Produktivität (Shift-Left)' : 'Developer productivity (shift-left)', without: '26.000', with: '10.000', save: '16.000' },
|
||
{ label: de ? 'Audit-Vorbereitung' : 'Audit preparation', without: '12.000', with: '3.000', save: '9.000' },
|
||
],
|
||
totalWithout: '97.750',
|
||
totalWith: '44.530',
|
||
totalSave: '53.220',
|
||
roi: '3,5x',
|
||
},
|
||
{
|
||
icon: Factory,
|
||
color: 'text-emerald-400',
|
||
bg: 'border-emerald-500/20',
|
||
name: de ? 'Mittelstand (100 MA)' : 'Mid-size (100 emp.)',
|
||
desc: de ? '5-8 Apps, 3-5 Produkte, MES/ERP' : '5-8 apps, 3-5 products, MES/ERP',
|
||
bp_price: de ? '30.000 EUR/Jahr' : 'EUR 30,000/yr',
|
||
savings: [
|
||
{ label: de ? 'Pentests (5-8 Apps × 8.000€)' : 'Pentests (5-8 apps × €8,000)', without: '56.000', with: '15.000', save: '41.000' },
|
||
{ label: de ? 'CE-SW-Risiko (3-5 Produkte × 15.000€)' : 'CE SW risk (3-5 products × €15,000)', without: '60.000', with: '10.000', save: '50.000' },
|
||
{ label: de ? 'Compliance-Team (0,5 FTE Audit Manager)' : 'Compliance team (0.5 FTE audit manager)', without: '35.000', with: '10.000', save: '25.000' },
|
||
{ label: de ? 'TISAX / ISO 27001 Zertifizierung' : 'TISAX / ISO 27001 certification', without: '25.000', with: '8.000', save: '17.000' },
|
||
{ label: de ? 'Entwickler-Produktivität (5 Devs)' : 'Developer productivity (5 devs)', without: '130.000', with: '50.000', save: '80.000' },
|
||
{ label: de ? 'CRA/NIS2 Compliance-Aufwand' : 'CRA/NIS2 compliance effort', without: '45.000', with: '15.000', save: '30.000' },
|
||
],
|
||
totalWithout: '419.500',
|
||
totalWith: '193.880',
|
||
totalSave: '225.620',
|
||
roi: '7,5x',
|
||
},
|
||
{
|
||
icon: Building,
|
||
color: 'text-amber-400',
|
||
bg: 'border-amber-500/20',
|
||
name: de ? 'Konzern (500+ MA)' : 'Enterprise (500+ emp.)',
|
||
desc: de ? '15-25 Apps, 10-20 Produkte, SCADA/ICS' : '15-25 apps, 10-20 products, SCADA/ICS',
|
||
bp_price: de ? '50.000 EUR/Jahr' : 'EUR 50,000/yr',
|
||
savings: [
|
||
{ label: de ? 'Pentests (15-25 Apps × 10.000€)' : 'Pentests (15-25 apps × €10,000)', without: '200.000', with: '50.000', save: '150.000' },
|
||
{ label: de ? 'CE-SW-Risiko (10-20 Produkte × 18.000€)' : 'CE SW risk (10-20 products × €18,000)', without: '270.000', with: '50.000', save: '220.000' },
|
||
{ label: de ? 'Compliance-Abteilung (2-3 FTE)' : 'Compliance department (2-3 FTE)', without: '250.000', with: '100.000', save: '150.000' },
|
||
{ label: de ? 'Externe Berater (TÜV, DEKRA, Anwälte)' : 'External consultants (TÜV, DEKRA, lawyers)', without: '120.000', with: '30.000', save: '90.000' },
|
||
{ label: de ? 'Entwickler-Produktivität (20+ Devs)' : 'Developer productivity (20+ devs)', without: '540.000', with: '200.000', save: '340.000' },
|
||
{ label: de ? 'Incident Response / Strafvermeidung' : 'Incident response / penalty avoidance', without: '150.000', with: '50.000', save: '100.000' },
|
||
],
|
||
totalWithout: '2.113.500',
|
||
totalWith: '1.074.080',
|
||
totalSave: '1.039.420',
|
||
roi: '20,8x',
|
||
},
|
||
]
|
||
|
||
return (
|
||
<div className="max-w-6xl mx-auto">
|
||
<FadeInView className="text-center mb-5">
|
||
<h2 className="text-3xl md:text-4xl font-bold mb-2">
|
||
<GradientText>{de ? 'Kundenersparnis im Detail' : 'Customer Savings in Detail'}</GradientText>
|
||
</h2>
|
||
<p className="text-sm text-white/50 max-w-3xl mx-auto">
|
||
{de
|
||
? 'Jede Anwendung braucht einen eigenen Pentest. Jedes Produkt eine eigene CE-Beurteilung. Die Kosten skalieren linear — unsere Plattform nicht.'
|
||
: 'Each application needs its own pentest. Each product its own CE assessment. Costs scale linearly — our platform does not.'}
|
||
</p>
|
||
</FadeInView>
|
||
|
||
<div className="space-y-4">
|
||
{companies.map((co, idx) => {
|
||
const Icon = co.icon
|
||
return (
|
||
<FadeInView key={idx} delay={0.1 + idx * 0.1}>
|
||
<GlassCard hover={false} className={`p-4 border-t-2 ${co.bg}`}>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<div className="flex items-center gap-3">
|
||
<Icon className={`w-6 h-6 ${co.color}`} />
|
||
<div>
|
||
<h3 className={`text-sm font-bold ${co.color}`}>{co.name}</h3>
|
||
<p className="text-[10px] text-white/40">{co.desc}</p>
|
||
</div>
|
||
</div>
|
||
<div className="text-right">
|
||
<p className="text-xs text-white/40">BreakPilot COMPL<span className="text-indigo-400">AI</span></p>
|
||
<p className={`text-sm font-bold ${co.color}`}>{co.bp_price}</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Savings table */}
|
||
<div className="grid grid-cols-[1fr_80px_80px_80px] gap-x-2 text-[10px] text-white/30 uppercase tracking-wider mb-1.5 border-b border-white/10 pb-1">
|
||
<span>{de ? 'Kostenposition' : 'Cost Item'}</span>
|
||
<span className="text-right">{de ? 'Ohne' : 'Without'}</span>
|
||
<span className="text-right">{de ? 'Mit' : 'With'}</span>
|
||
<span className="text-right">{de ? 'Ersparnis' : 'Savings'}</span>
|
||
</div>
|
||
<div className="space-y-1">
|
||
{co.savings.map((s, i) => (
|
||
<div key={i} className="grid grid-cols-[1fr_80px_80px_80px] gap-x-2 text-xs">
|
||
<span className="text-white/60 truncate">{s.label}</span>
|
||
<span className="text-right text-red-400/60">{s.without}€</span>
|
||
<span className="text-right text-white/40">{s.with}€</span>
|
||
<span className="text-right text-emerald-400 font-bold">{s.save}€</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Total */}
|
||
<div className="grid grid-cols-[1fr_80px_80px_80px] gap-x-2 mt-2 pt-2 border-t border-white/10 text-xs font-bold">
|
||
<span className="text-white/80">{de ? 'GESAMT pro Jahr' : 'TOTAL per year'}</span>
|
||
<span className="text-right text-red-400">{co.totalWithout}€</span>
|
||
<span className="text-right text-white/60">{co.totalWith}€</span>
|
||
<span className="text-right text-emerald-300 text-sm">{co.totalSave}€</span>
|
||
</div>
|
||
|
||
<div className="flex justify-end mt-1">
|
||
<span className={`text-xs font-bold ${co.color} bg-white/[0.05] px-2 py-0.5 rounded-full`}>
|
||
ROI {co.roi}
|
||
</span>
|
||
</div>
|
||
</GlassCard>
|
||
</FadeInView>
|
||
)
|
||
})}
|
||
</div>
|
||
|
||
{/* Key Insight */}
|
||
<FadeInView delay={0.5} className="mt-4">
|
||
<div className="bg-gradient-to-r from-emerald-500/10 to-indigo-500/10 border border-emerald-500/20 rounded-xl px-5 py-3 text-center">
|
||
<p className="text-sm text-white/70">
|
||
{de
|
||
? '„Der größte versteckte Kostentreiber ist Entwickler-Produktivität: Ohne automatisierte Security-Tools verbringen Entwickler 19% ihrer Arbeitszeit mit Sicherheitsaufgaben statt mit Features." — IDC'
|
||
: '"The largest hidden cost driver is developer productivity: without automated security tools, developers spend 19% of their time on security tasks instead of features." — IDC'}
|
||
</p>
|
||
</div>
|
||
</FadeInView>
|
||
</div>
|
||
)
|
||
}
|