feat: Add Academy, Whistleblower, Incidents SDK modules, pitch-deck, blog and CI/CD config
Some checks failed
ci/woodpecker/push/integration Pipeline failed
ci/woodpecker/push/main Pipeline failed
CI/CD Pipeline / Go Tests (push) Has been cancelled
CI/CD Pipeline / Python Tests (push) Has been cancelled
CI/CD Pipeline / Website Tests (push) Has been cancelled
CI/CD Pipeline / Linting (push) Has been cancelled
CI/CD Pipeline / Security Scan (push) Has been cancelled
CI/CD Pipeline / Docker Build & Push (push) Has been cancelled
CI/CD Pipeline / Integration Tests (push) Has been cancelled
CI/CD Pipeline / Deploy to Staging (push) Has been cancelled
CI/CD Pipeline / Deploy to Production (push) Has been cancelled
CI/CD Pipeline / CI Summary (push) Has been cancelled
Security Scanning / Secret Scanning (push) Has been cancelled
Security Scanning / Dependency Vulnerability Scan (push) Has been cancelled
Security Scanning / Go Security Scan (push) Has been cancelled
Security Scanning / Python Security Scan (push) Has been cancelled
Security Scanning / Node.js Security Scan (push) Has been cancelled
Security Scanning / Docker Image Security (push) Has been cancelled
Security Scanning / Security Summary (push) Has been cancelled
Tests / Go Tests (push) Has been cancelled
Tests / Python Tests (push) Has been cancelled
Tests / Integration Tests (push) Has been cancelled
Tests / Go Lint (push) Has been cancelled
Tests / Python Lint (push) Has been cancelled
Tests / Security Scan (push) Has been cancelled
Tests / All Checks Passed (push) Has been cancelled
Some checks failed
ci/woodpecker/push/integration Pipeline failed
ci/woodpecker/push/main Pipeline failed
CI/CD Pipeline / Go Tests (push) Has been cancelled
CI/CD Pipeline / Python Tests (push) Has been cancelled
CI/CD Pipeline / Website Tests (push) Has been cancelled
CI/CD Pipeline / Linting (push) Has been cancelled
CI/CD Pipeline / Security Scan (push) Has been cancelled
CI/CD Pipeline / Docker Build & Push (push) Has been cancelled
CI/CD Pipeline / Integration Tests (push) Has been cancelled
CI/CD Pipeline / Deploy to Staging (push) Has been cancelled
CI/CD Pipeline / Deploy to Production (push) Has been cancelled
CI/CD Pipeline / CI Summary (push) Has been cancelled
Security Scanning / Secret Scanning (push) Has been cancelled
Security Scanning / Dependency Vulnerability Scan (push) Has been cancelled
Security Scanning / Go Security Scan (push) Has been cancelled
Security Scanning / Python Security Scan (push) Has been cancelled
Security Scanning / Node.js Security Scan (push) Has been cancelled
Security Scanning / Docker Image Security (push) Has been cancelled
Security Scanning / Security Summary (push) Has been cancelled
Tests / Go Tests (push) Has been cancelled
Tests / Python Tests (push) Has been cancelled
Tests / Integration Tests (push) Has been cancelled
Tests / Go Lint (push) Has been cancelled
Tests / Python Lint (push) Has been cancelled
Tests / Security Scan (push) Has been cancelled
Tests / All Checks Passed (push) Has been cancelled
- Academy, Whistleblower, Incidents frontend pages with API proxies and types - Vendor compliance API proxy route - Go backend handlers and models for all new SDK modules - Investor pitch-deck app with interactive slides - Blog section with DSGVO, AI Act, NIS2, glossary articles - MkDocs documentation site - CI/CD pipelines (Woodpecker, GitHub Actions), security scanning config - Planning and implementation documentation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
40
pitch-deck/components/slides/AIQASlide.tsx
Normal file
40
pitch-deck/components/slides/AIQASlide.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
'use client'
|
||||
|
||||
import { Language } from '@/lib/types'
|
||||
import { t } from '@/lib/i18n'
|
||||
import { Bot } from 'lucide-react'
|
||||
import GradientText from '../ui/GradientText'
|
||||
import FadeInView from '../ui/FadeInView'
|
||||
import ChatInterface from '../ui/ChatInterface'
|
||||
import LiveIndicator from '../ui/LiveIndicator'
|
||||
|
||||
interface AIQASlideProps {
|
||||
lang: Language
|
||||
}
|
||||
|
||||
export default function AIQASlide({ lang }: AIQASlideProps) {
|
||||
const i = t(lang)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FadeInView className="text-center mb-8">
|
||||
<div className="flex items-center justify-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-indigo-500/20 flex items-center justify-center">
|
||||
<Bot className="w-6 h-6 text-indigo-400" />
|
||||
</div>
|
||||
<LiveIndicator />
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-3">
|
||||
<GradientText>{i.aiqa.title}</GradientText>
|
||||
</h2>
|
||||
<p className="text-lg text-white/50 max-w-2xl mx-auto">{i.aiqa.subtitle}</p>
|
||||
</FadeInView>
|
||||
|
||||
<FadeInView delay={0.3}>
|
||||
<div className="max-w-3xl mx-auto bg-white/[0.04] border border-white/10 rounded-2xl p-6">
|
||||
<ChatInterface lang={lang} />
|
||||
</div>
|
||||
</FadeInView>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
99
pitch-deck/components/slides/BusinessModelSlide.tsx
Normal file
99
pitch-deck/components/slides/BusinessModelSlide.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import { Language, PitchProduct } from '@/lib/types'
|
||||
import { t } from '@/lib/i18n'
|
||||
import GradientText from '../ui/GradientText'
|
||||
import FadeInView from '../ui/FadeInView'
|
||||
import GlassCard from '../ui/GlassCard'
|
||||
import { DollarSign, Repeat, TrendingUp } from 'lucide-react'
|
||||
|
||||
interface BusinessModelSlideProps {
|
||||
lang: Language
|
||||
products: PitchProduct[]
|
||||
}
|
||||
|
||||
export default function BusinessModelSlide({ lang, products }: BusinessModelSlideProps) {
|
||||
const i = t(lang)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FadeInView className="text-center mb-12">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-3">
|
||||
<GradientText>{i.businessModel.title}</GradientText>
|
||||
</h2>
|
||||
<p className="text-lg text-white/50 max-w-2xl mx-auto">{i.businessModel.subtitle}</p>
|
||||
</FadeInView>
|
||||
|
||||
{/* Key Metrics */}
|
||||
<div className="grid md:grid-cols-3 gap-4 mb-8">
|
||||
<GlassCard delay={0.2} className="text-center">
|
||||
<Repeat className="w-6 h-6 text-indigo-400 mx-auto mb-2" />
|
||||
<p className="text-sm text-white/50 mb-1">{i.businessModel.recurringRevenue}</p>
|
||||
<p className="text-2xl font-bold text-white">100%</p>
|
||||
<p className="text-xs text-white/30">SaaS / Subscription</p>
|
||||
</GlassCard>
|
||||
<GlassCard delay={0.3} className="text-center">
|
||||
<DollarSign className="w-6 h-6 text-green-400 mx-auto mb-2" />
|
||||
<p className="text-sm text-white/50 mb-1">{i.businessModel.margin}</p>
|
||||
<p className="text-2xl font-bold text-white">>70%</p>
|
||||
<p className="text-xs text-white/30">{lang === 'de' ? 'nach Amortisation' : 'post amortization'}</p>
|
||||
</GlassCard>
|
||||
<GlassCard delay={0.4} className="text-center">
|
||||
<TrendingUp className="w-6 h-6 text-purple-400 mx-auto mb-2" />
|
||||
<p className="text-sm text-white/50 mb-1">{i.businessModel.amortization}</p>
|
||||
<p className="text-2xl font-bold text-white">24 {i.businessModel.months}</p>
|
||||
<p className="text-xs text-white/30">{lang === 'de' ? 'Hardware-Amortisation' : 'Hardware Amortization'}</p>
|
||||
</GlassCard>
|
||||
</div>
|
||||
|
||||
{/* Unit Economics per Product */}
|
||||
<FadeInView delay={0.5}>
|
||||
<h3 className="text-lg font-semibold mb-4 text-white/70">{i.businessModel.unitEconomics}</h3>
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
{products.map((p, idx) => {
|
||||
const amort = p.hardware_cost_eur > 0 ? Math.round(p.hardware_cost_eur / 24) : 0
|
||||
const monthlyMargin = p.monthly_price_eur - amort - (p.operating_cost_eur > 0 ? p.operating_cost_eur : 0)
|
||||
const marginPct = Math.round((monthlyMargin / p.monthly_price_eur) * 100)
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={p.id}
|
||||
initial={{ opacity: 0, rotateY: -15 }}
|
||||
animate={{ opacity: 1, rotateY: 0 }}
|
||||
transition={{ delay: 0.6 + idx * 0.15 }}
|
||||
className="bg-white/[0.05] border border-white/10 rounded-2xl p-5"
|
||||
>
|
||||
<h4 className="font-bold text-white mb-3">{p.name}</h4>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/50">{lang === 'de' ? 'Monatspreis' : 'Monthly Price'}</span>
|
||||
<span className="text-white font-medium">{p.monthly_price_eur} EUR</span>
|
||||
</div>
|
||||
{p.hardware_cost_eur > 0 && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/50">{i.businessModel.hardwareCost}</span>
|
||||
<span className="text-white/70">-{amort} EUR/Mo</span>
|
||||
</div>
|
||||
)}
|
||||
{p.operating_cost_eur > 0 && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/50">{i.businessModel.operatingCost}</span>
|
||||
<span className="text-white/70">-{p.operating_cost_eur.toLocaleString('de-DE')} EUR/Mo</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="border-t border-white/10 pt-2 flex justify-between">
|
||||
<span className="text-white/50">{i.businessModel.margin}</span>
|
||||
<span className={`font-bold ${marginPct > 0 ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{marginPct > 0 ? '+' : ''}{monthlyMargin} EUR ({marginPct}%)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</FadeInView>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
106
pitch-deck/components/slides/CompetitionSlide.tsx
Normal file
106
pitch-deck/components/slides/CompetitionSlide.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
'use client'
|
||||
|
||||
import { Language, PitchFeature, PitchCompetitor } from '@/lib/types'
|
||||
import { t } from '@/lib/i18n'
|
||||
import { ShieldCheck, Code2, ScanLine, FileSearch, Package, Bug } from 'lucide-react'
|
||||
import GradientText from '../ui/GradientText'
|
||||
import FadeInView from '../ui/FadeInView'
|
||||
import FeatureMatrix from '../ui/FeatureMatrix'
|
||||
import GlassCard from '../ui/GlassCard'
|
||||
|
||||
interface CompetitionSlideProps {
|
||||
lang: Language
|
||||
features: PitchFeature[]
|
||||
competitors: PitchCompetitor[]
|
||||
}
|
||||
|
||||
const securityFeatures = {
|
||||
de: [
|
||||
{ icon: ShieldCheck, title: 'DevSecOps Security Suite', desc: '6 integrierte Security-Tools fuer kontinuierliche Sicherheitsueberwachung' },
|
||||
{ icon: ScanLine, title: 'SAST & Secrets Detection', desc: 'Automatische Code-Analyse (Semgrep) + Secrets-Scanning (Gitleaks) in der CI/CD Pipeline' },
|
||||
{ icon: Bug, title: 'Container & Dependency Scanning', desc: 'Trivy + Grype scannen Container-Images und Abhaengigkeiten auf CVEs' },
|
||||
{ icon: Package, title: 'SBOM-Generator (NIS2-konform)', desc: 'CycloneDX/SPDX Software Bill of Materials fuer NIS2 und ISO 27001 Compliance' },
|
||||
{ icon: FileSearch, title: 'Software-Risikoanalyse', desc: 'Automatisierte Risikoklassifizierung fuer Embedded-Entwicklung und AI-Act-konforme Systeme' },
|
||||
{ icon: Code2, title: 'KI-Code-Assistent (1000b)', desc: 'Das Cloud-LLM unterstuetzt Entwickler bei Code-Reviews, Security-Fixes und Compliance-Dokumentation' },
|
||||
],
|
||||
en: [
|
||||
{ icon: ShieldCheck, title: 'DevSecOps Security Suite', desc: '6 integrated security tools for continuous security monitoring' },
|
||||
{ icon: ScanLine, title: 'SAST & Secrets Detection', desc: 'Automatic code analysis (Semgrep) + secrets scanning (Gitleaks) in CI/CD pipeline' },
|
||||
{ icon: Bug, title: 'Container & Dependency Scanning', desc: 'Trivy + Grype scan container images and dependencies for CVEs' },
|
||||
{ icon: Package, title: 'SBOM Generator (NIS2 compliant)', desc: 'CycloneDX/SPDX Software Bill of Materials for NIS2 and ISO 27001 compliance' },
|
||||
{ icon: FileSearch, title: 'Software Risk Analysis', desc: 'Automated risk classification for embedded development and AI Act compliant systems' },
|
||||
{ icon: Code2, title: 'AI Code Assistant (1000b)', desc: 'Cloud LLM assists developers with code reviews, security fixes and compliance documentation' },
|
||||
],
|
||||
}
|
||||
|
||||
export default function CompetitionSlide({ lang, features, competitors }: CompetitionSlideProps) {
|
||||
const i = t(lang)
|
||||
const coreFeatures = features.filter(f => f.category !== 'security')
|
||||
const secFeats = securityFeatures[lang]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FadeInView className="text-center mb-8">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-3">
|
||||
<GradientText>{i.competition.title}</GradientText>
|
||||
</h2>
|
||||
<p className="text-lg text-white/50 max-w-2xl mx-auto">{i.competition.subtitle}</p>
|
||||
</FadeInView>
|
||||
|
||||
{/* Feature Matrix (Core Compliance) */}
|
||||
<FadeInView delay={0.3}>
|
||||
<GlassCard className="mb-6 p-4 overflow-x-auto" hover={false}>
|
||||
<FeatureMatrix features={coreFeatures} lang={lang} />
|
||||
</GlassCard>
|
||||
</FadeInView>
|
||||
|
||||
{/* Security & Developer Features — nur bei ComplAI */}
|
||||
<FadeInView delay={0.5}>
|
||||
<div className="mb-6">
|
||||
<h3 className="text-sm font-semibold text-indigo-400 mb-3 flex items-center gap-2">
|
||||
<ShieldCheck className="w-4 h-4" />
|
||||
{lang === 'de' ? 'Integrierte Security & Developer Tools — nur bei ComplAI' : 'Integrated Security & Developer Tools — ComplAI only'}
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
{secFeats.map((feat, idx) => {
|
||||
const Icon = feat.icon
|
||||
return (
|
||||
<FadeInView key={idx} delay={0.6 + idx * 0.08}>
|
||||
<div className="bg-indigo-500/5 border border-indigo-500/10 rounded-xl p-3">
|
||||
<div className="flex items-center gap-2 mb-1.5">
|
||||
<Icon className="w-4 h-4 text-indigo-400 shrink-0" />
|
||||
<span className="text-xs font-semibold text-white">{feat.title}</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-white/40 leading-relaxed">{feat.desc}</p>
|
||||
</div>
|
||||
</FadeInView>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</FadeInView>
|
||||
|
||||
{/* Competitor Summary */}
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
{competitors.map((c, idx) => (
|
||||
<FadeInView key={c.id} delay={0.9 + idx * 0.1}>
|
||||
<div className="bg-white/[0.04] border border-white/5 rounded-xl p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h4 className="font-medium text-white/70">{c.name}</h4>
|
||||
<span className="text-xs text-white/30">{c.customers_count.toLocaleString()} {lang === 'de' ? 'Kunden' : 'customers'}</span>
|
||||
</div>
|
||||
<p className="text-xs text-white/40 mb-2">{c.pricing_range}</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{(c.weaknesses || []).slice(0, 2).map((w, widx) => (
|
||||
<span key={widx} className="text-xs px-2 py-0.5 rounded-full bg-red-500/10 text-red-400">
|
||||
{w}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</FadeInView>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
88
pitch-deck/components/slides/CoverSlide.tsx
Normal file
88
pitch-deck/components/slides/CoverSlide.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import { Language } from '@/lib/types'
|
||||
import { t } from '@/lib/i18n'
|
||||
import { ArrowRight } from 'lucide-react'
|
||||
import GradientText from '../ui/GradientText'
|
||||
|
||||
interface CoverSlideProps {
|
||||
lang: Language
|
||||
onNext: () => void
|
||||
}
|
||||
|
||||
export default function CoverSlide({ lang, onNext }: CoverSlideProps) {
|
||||
const i = t(lang)
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center text-center min-h-[70vh]">
|
||||
{/* Logo / Brand */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.5 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
|
||||
className="mb-8"
|
||||
>
|
||||
<div className="w-20 h-20 mx-auto mb-6 rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600
|
||||
flex items-center justify-center shadow-lg shadow-indigo-500/30">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none">
|
||||
<path d="M8 12L20 6L32 12V28L20 34L8 28V12Z" stroke="white" strokeWidth="2" fill="none" />
|
||||
<path d="M20 6V34" stroke="white" strokeWidth="1.5" opacity="0.5" />
|
||||
<path d="M8 12L32 28" stroke="white" strokeWidth="1.5" opacity="0.3" />
|
||||
<path d="M32 12L8 28" stroke="white" strokeWidth="1.5" opacity="0.3" />
|
||||
<circle cx="20" cy="20" r="4" fill="white" opacity="0.8" />
|
||||
</svg>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Company Name */}
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="text-5xl md:text-7xl font-bold mb-4 tracking-tight"
|
||||
>
|
||||
BreakPilot{' '}
|
||||
<GradientText className="text-5xl md:text-7xl font-bold" delay={0.5}>
|
||||
ComplAI
|
||||
</GradientText>
|
||||
</motion.h1>
|
||||
|
||||
{/* Tagline */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
className="text-xl md:text-2xl text-white/60 mb-2 max-w-2xl"
|
||||
>
|
||||
{i.cover.tagline}
|
||||
</motion.p>
|
||||
|
||||
{/* Subtitle */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.8 }}
|
||||
className="text-sm text-white/30 font-mono tracking-wider mb-12"
|
||||
>
|
||||
{i.cover.subtitle}
|
||||
</motion.p>
|
||||
|
||||
{/* CTA */}
|
||||
<motion.button
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 1.2 }}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={onNext}
|
||||
className="group flex items-center gap-2 px-8 py-3 rounded-full
|
||||
bg-indigo-500 hover:bg-indigo-600 transition-colors text-white font-medium
|
||||
shadow-lg shadow-indigo-500/30"
|
||||
>
|
||||
{i.cover.cta}
|
||||
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
||||
</motion.button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
93
pitch-deck/components/slides/FinancialsSlide.tsx
Normal file
93
pitch-deck/components/slides/FinancialsSlide.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Language, PitchFinancial } from '@/lib/types'
|
||||
import { t, formatEur } from '@/lib/i18n'
|
||||
import GradientText from '../ui/GradientText'
|
||||
import FadeInView from '../ui/FadeInView'
|
||||
import FinancialChart from '../ui/FinancialChart'
|
||||
import FinancialSliders from '../ui/FinancialSliders'
|
||||
import GlassCard from '../ui/GlassCard'
|
||||
import AnimatedCounter from '../ui/AnimatedCounter'
|
||||
|
||||
interface FinancialsSlideProps {
|
||||
lang: Language
|
||||
financials: PitchFinancial[]
|
||||
}
|
||||
|
||||
export default function FinancialsSlide({ lang, financials }: FinancialsSlideProps) {
|
||||
const i = t(lang)
|
||||
const [growthRate, setGrowthRate] = useState(100)
|
||||
const [churnRate, setChurnRate] = useState(5)
|
||||
const [arpu, setArpu] = useState(500)
|
||||
|
||||
const growthMultiplier = growthRate / 100
|
||||
const lastYear = financials[financials.length - 1]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FadeInView className="text-center mb-8">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-3">
|
||||
<GradientText>{i.financials.title}</GradientText>
|
||||
</h2>
|
||||
<p className="text-lg text-white/50 max-w-2xl mx-auto">{i.financials.subtitle}</p>
|
||||
</FadeInView>
|
||||
|
||||
{/* Key Numbers */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
|
||||
<GlassCard delay={0.2} className="p-4 text-center">
|
||||
<p className="text-xs text-white/40 mb-1">{i.financials.arr} 2030</p>
|
||||
<p className="text-xl font-bold text-white">
|
||||
<AnimatedCounter
|
||||
target={Math.round((lastYear?.arr_eur || 0) * growthMultiplier / 1_000_000)}
|
||||
suffix={lang === 'de' ? ' Mio.' : 'M'}
|
||||
duration={1200}
|
||||
/>
|
||||
</p>
|
||||
</GlassCard>
|
||||
<GlassCard delay={0.25} className="p-4 text-center">
|
||||
<p className="text-xs text-white/40 mb-1">{i.financials.customers} 2030</p>
|
||||
<p className="text-xl font-bold text-white">
|
||||
<AnimatedCounter target={Math.round((lastYear?.customers_count || 0) * growthMultiplier)} duration={1200} />
|
||||
</p>
|
||||
</GlassCard>
|
||||
<GlassCard delay={0.3} className="p-4 text-center">
|
||||
<p className="text-xs text-white/40 mb-1">{i.financials.employees} 2030</p>
|
||||
<p className="text-xl font-bold text-white">{lastYear?.employees_count || 0}</p>
|
||||
</GlassCard>
|
||||
<GlassCard delay={0.35} className="p-4 text-center">
|
||||
<p className="text-xs text-white/40 mb-1">{i.financials.mrr} 2030</p>
|
||||
<p className="text-xl font-bold text-white">
|
||||
<AnimatedCounter
|
||||
target={Math.round((lastYear?.mrr_eur || 0) * growthMultiplier / 1_000)}
|
||||
suffix="k"
|
||||
duration={1200}
|
||||
/>
|
||||
</p>
|
||||
</GlassCard>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{/* Chart */}
|
||||
<FadeInView delay={0.4} className="md:col-span-2">
|
||||
<GlassCard hover={false} className="p-4">
|
||||
<FinancialChart financials={financials} lang={lang} growthMultiplier={growthMultiplier} />
|
||||
</GlassCard>
|
||||
</FadeInView>
|
||||
|
||||
{/* Sliders */}
|
||||
<FadeInView delay={0.5}>
|
||||
<FinancialSliders
|
||||
growthRate={growthRate}
|
||||
churnRate={churnRate}
|
||||
arpu={arpu}
|
||||
onGrowthChange={setGrowthRate}
|
||||
onChurnChange={setChurnRate}
|
||||
onArpuChange={setArpu}
|
||||
lang={lang}
|
||||
/>
|
||||
</FadeInView>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
65
pitch-deck/components/slides/HowItWorksSlide.tsx
Normal file
65
pitch-deck/components/slides/HowItWorksSlide.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import { Language } from '@/lib/types'
|
||||
import { t } from '@/lib/i18n'
|
||||
import { Plug, Settings, RefreshCw, CheckCircle2 } from 'lucide-react'
|
||||
import GradientText from '../ui/GradientText'
|
||||
import FadeInView from '../ui/FadeInView'
|
||||
|
||||
interface HowItWorksSlideProps {
|
||||
lang: Language
|
||||
}
|
||||
|
||||
const stepIcons = [Plug, Settings, RefreshCw, CheckCircle2]
|
||||
const stepColors = ['text-blue-400', 'text-indigo-400', 'text-purple-400', 'text-green-400']
|
||||
|
||||
export default function HowItWorksSlide({ lang }: HowItWorksSlideProps) {
|
||||
const i = t(lang)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FadeInView className="text-center mb-12">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-3">
|
||||
<GradientText>{i.howItWorks.title}</GradientText>
|
||||
</h2>
|
||||
<p className="text-lg text-white/50 max-w-2xl mx-auto">{i.howItWorks.subtitle}</p>
|
||||
</FadeInView>
|
||||
|
||||
<div className="relative max-w-4xl mx-auto">
|
||||
{/* Connection Line */}
|
||||
<div className="absolute left-8 top-12 bottom-12 w-px bg-gradient-to-b from-blue-500 via-purple-500 to-green-500 hidden md:block" />
|
||||
|
||||
<div className="space-y-8">
|
||||
{i.howItWorks.steps.map((step, idx) => {
|
||||
const Icon = stepIcons[idx]
|
||||
return (
|
||||
<motion.div
|
||||
key={idx}
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.3 + idx * 0.2, duration: 0.5 }}
|
||||
className="flex items-start gap-6 relative"
|
||||
>
|
||||
<div className={`
|
||||
w-16 h-16 rounded-2xl bg-white/[0.06] border border-white/10
|
||||
flex items-center justify-center shrink-0 relative z-10
|
||||
${stepColors[idx]}
|
||||
`}>
|
||||
<Icon className="w-7 h-7" />
|
||||
</div>
|
||||
<div className="pt-2">
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<span className="text-xs font-mono text-white/30">0{idx + 1}</span>
|
||||
<h3 className="text-xl font-bold text-white">{step.title}</h3>
|
||||
</div>
|
||||
<p className="text-sm text-white/50 leading-relaxed max-w-lg">{step.desc}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
91
pitch-deck/components/slides/MarketSlide.tsx
Normal file
91
pitch-deck/components/slides/MarketSlide.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import { Language, PitchMarket } from '@/lib/types'
|
||||
import { t, formatEur } from '@/lib/i18n'
|
||||
import GradientText from '../ui/GradientText'
|
||||
import FadeInView from '../ui/FadeInView'
|
||||
import AnimatedCounter from '../ui/AnimatedCounter'
|
||||
|
||||
interface MarketSlideProps {
|
||||
lang: Language
|
||||
market: PitchMarket[]
|
||||
}
|
||||
|
||||
const sizes = [280, 200, 130]
|
||||
const colors = ['border-indigo-500/30 bg-indigo-500/5', 'border-purple-500/30 bg-purple-500/5', 'border-blue-500/30 bg-blue-500/5']
|
||||
const textColors = ['text-indigo-400', 'text-purple-400', 'text-blue-400']
|
||||
|
||||
export default function MarketSlide({ lang, market }: MarketSlideProps) {
|
||||
const i = t(lang)
|
||||
const labels = [i.market.tamLabel, i.market.samLabel, i.market.somLabel]
|
||||
const segments = [i.market.tam, i.market.sam, i.market.som]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FadeInView className="text-center mb-12">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-3">
|
||||
<GradientText>{i.market.title}</GradientText>
|
||||
</h2>
|
||||
<p className="text-lg text-white/50 max-w-2xl mx-auto">{i.market.subtitle}</p>
|
||||
</FadeInView>
|
||||
|
||||
<div className="flex flex-col md:flex-row items-center justify-center gap-12">
|
||||
{/* Circles */}
|
||||
<div className="relative flex items-center justify-center" style={{ width: 300, height: 300 }}>
|
||||
{market.map((m, idx) => (
|
||||
<motion.div
|
||||
key={m.id}
|
||||
initial={{ scale: 0, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ delay: 0.3 + idx * 0.2, type: 'spring', stiffness: 200 }}
|
||||
className={`absolute rounded-full border-2 ${colors[idx]} flex items-center justify-center`}
|
||||
style={{
|
||||
width: sizes[idx],
|
||||
height: sizes[idx],
|
||||
}}
|
||||
>
|
||||
{idx === market.length - 1 && (
|
||||
<div className="text-center">
|
||||
<span className={`text-xs font-mono ${textColors[idx]}`}>{segments[idx]}</span>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Labels */}
|
||||
<div className="space-y-6">
|
||||
{market.map((m, idx) => (
|
||||
<motion.div
|
||||
key={m.id}
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.5 + idx * 0.15 }}
|
||||
className="flex items-center gap-4"
|
||||
>
|
||||
<div className={`w-3 h-3 rounded-full ${textColors[idx]} bg-current`} />
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`text-sm font-bold ${textColors[idx]}`}>{segments[idx]}</span>
|
||||
<span className="text-xs text-white/30">{labels[idx]}</span>
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-white">
|
||||
<AnimatedCounter
|
||||
target={m.value_eur / 1_000_000_000}
|
||||
suffix={lang === 'de' ? ' Mrd. EUR' : 'B EUR'}
|
||||
decimals={1}
|
||||
duration={1500}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs text-white/40">
|
||||
{i.market.growth}: {m.growth_rate_pct}% · {i.market.source}: {m.source}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
54
pitch-deck/components/slides/ProblemSlide.tsx
Normal file
54
pitch-deck/components/slides/ProblemSlide.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import { Language } from '@/lib/types'
|
||||
import { t } from '@/lib/i18n'
|
||||
import { AlertTriangle, Scale, Shield } from 'lucide-react'
|
||||
import GlassCard from '../ui/GlassCard'
|
||||
import GradientText from '../ui/GradientText'
|
||||
import FadeInView from '../ui/FadeInView'
|
||||
|
||||
interface ProblemSlideProps {
|
||||
lang: Language
|
||||
}
|
||||
|
||||
const icons = [AlertTriangle, Scale, Shield]
|
||||
|
||||
export default function ProblemSlide({ lang }: ProblemSlideProps) {
|
||||
const i = t(lang)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FadeInView className="text-center mb-12">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-3">
|
||||
<GradientText>{i.problem.title}</GradientText>
|
||||
</h2>
|
||||
<p className="text-lg text-white/50 max-w-2xl mx-auto">{i.problem.subtitle}</p>
|
||||
</FadeInView>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6 mb-12">
|
||||
{i.problem.cards.map((card, idx) => {
|
||||
const Icon = icons[idx]
|
||||
return (
|
||||
<GlassCard key={idx} delay={0.2 + idx * 0.15} className="text-center">
|
||||
<div className="w-12 h-12 mx-auto mb-4 rounded-xl bg-red-500/10 flex items-center justify-center">
|
||||
<Icon className="w-6 h-6 text-red-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold mb-2 text-white">{card.title}</h3>
|
||||
<p className="text-3xl font-bold text-red-400 mb-3">{card.stat}</p>
|
||||
<p className="text-sm text-white/50 leading-relaxed">{card.desc}</p>
|
||||
</GlassCard>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<FadeInView delay={0.8} className="max-w-3xl mx-auto">
|
||||
<blockquote className="text-center">
|
||||
<p className="text-lg md:text-xl text-white/70 italic leading-relaxed">
|
||||
“{i.problem.quote}”
|
||||
</p>
|
||||
</blockquote>
|
||||
</FadeInView>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
33
pitch-deck/components/slides/ProductSlide.tsx
Normal file
33
pitch-deck/components/slides/ProductSlide.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
'use client'
|
||||
|
||||
import { Language, PitchProduct } from '@/lib/types'
|
||||
import { t } from '@/lib/i18n'
|
||||
import GradientText from '../ui/GradientText'
|
||||
import FadeInView from '../ui/FadeInView'
|
||||
import PricingCard from '../ui/PricingCard'
|
||||
|
||||
interface ProductSlideProps {
|
||||
lang: Language
|
||||
products: PitchProduct[]
|
||||
}
|
||||
|
||||
export default function ProductSlide({ lang, products }: ProductSlideProps) {
|
||||
const i = t(lang)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FadeInView className="text-center mb-12">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-3">
|
||||
<GradientText>{i.product.title}</GradientText>
|
||||
</h2>
|
||||
<p className="text-lg text-white/50 max-w-2xl mx-auto">{i.product.subtitle}</p>
|
||||
</FadeInView>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{products.map((product, idx) => (
|
||||
<PricingCard key={product.id} product={product} lang={lang} delay={0.2 + idx * 0.15} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
54
pitch-deck/components/slides/SolutionSlide.tsx
Normal file
54
pitch-deck/components/slides/SolutionSlide.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import { Language } from '@/lib/types'
|
||||
import { t } from '@/lib/i18n'
|
||||
import { Server, ShieldCheck, Bot } from 'lucide-react'
|
||||
import GlassCard from '../ui/GlassCard'
|
||||
import GradientText from '../ui/GradientText'
|
||||
import FadeInView from '../ui/FadeInView'
|
||||
|
||||
interface SolutionSlideProps {
|
||||
lang: Language
|
||||
}
|
||||
|
||||
const icons = [Server, ShieldCheck, Bot]
|
||||
const colors = ['from-blue-500 to-cyan-500', 'from-indigo-500 to-purple-500', 'from-purple-500 to-pink-500']
|
||||
|
||||
export default function SolutionSlide({ lang }: SolutionSlideProps) {
|
||||
const i = t(lang)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FadeInView className="text-center mb-12">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-3">
|
||||
<GradientText>{i.solution.title}</GradientText>
|
||||
</h2>
|
||||
<p className="text-lg text-white/50 max-w-2xl mx-auto">{i.solution.subtitle}</p>
|
||||
</FadeInView>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{i.solution.pillars.map((pillar, idx) => {
|
||||
const Icon = icons[idx]
|
||||
return (
|
||||
<motion.div
|
||||
key={idx}
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: 0.3 + idx * 0.2, duration: 0.5 }}
|
||||
>
|
||||
<GlassCard className="text-center h-full" delay={0}>
|
||||
<div className={`w-16 h-16 mx-auto mb-5 rounded-2xl bg-gradient-to-br ${colors[idx]}
|
||||
flex items-center justify-center shadow-lg`}>
|
||||
<Icon className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-white">{pillar.title}</h3>
|
||||
<p className="text-sm text-white/50 leading-relaxed">{pillar.desc}</p>
|
||||
</GlassCard>
|
||||
</motion.div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
76
pitch-deck/components/slides/TeamSlide.tsx
Normal file
76
pitch-deck/components/slides/TeamSlide.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import { Language, PitchTeamMember } from '@/lib/types'
|
||||
import { t } from '@/lib/i18n'
|
||||
import { User } from 'lucide-react'
|
||||
import GradientText from '../ui/GradientText'
|
||||
import FadeInView from '../ui/FadeInView'
|
||||
|
||||
interface TeamSlideProps {
|
||||
lang: Language
|
||||
team: PitchTeamMember[]
|
||||
}
|
||||
|
||||
export default function TeamSlide({ lang, team }: TeamSlideProps) {
|
||||
const i = t(lang)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FadeInView className="text-center mb-12">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-3">
|
||||
<GradientText>{i.team.title}</GradientText>
|
||||
</h2>
|
||||
<p className="text-lg text-white/50 max-w-2xl mx-auto">{i.team.subtitle}</p>
|
||||
</FadeInView>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
||||
{team.map((member, idx) => (
|
||||
<motion.div
|
||||
key={member.id}
|
||||
initial={{ opacity: 0, x: idx === 0 ? -40 : 40 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.3 + idx * 0.2, duration: 0.6 }}
|
||||
className="bg-white/[0.08] backdrop-blur-xl border border-white/10 rounded-3xl p-8"
|
||||
>
|
||||
<div className="flex items-start gap-5">
|
||||
{/* Avatar */}
|
||||
<div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600
|
||||
flex items-center justify-center shrink-0 shadow-lg">
|
||||
<User className="w-10 h-10 text-white" />
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold text-white mb-1">{member.name}</h3>
|
||||
<p className="text-indigo-400 text-sm font-medium mb-3">
|
||||
{lang === 'de' ? member.role_de : member.role_en}
|
||||
</p>
|
||||
<p className="text-sm text-white/50 leading-relaxed mb-4">
|
||||
{lang === 'de' ? member.bio_de : member.bio_en}
|
||||
</p>
|
||||
|
||||
{/* Equity */}
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="text-xs text-white/40">{i.team.equity}:</span>
|
||||
<span className="text-sm font-bold text-white">{member.equity_pct}%</span>
|
||||
</div>
|
||||
|
||||
{/* Expertise Tags */}
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{(member.expertise || []).map((skill, sidx) => (
|
||||
<span
|
||||
key={sidx}
|
||||
className="text-xs px-2.5 py-1 rounded-full bg-indigo-500/10 text-indigo-300 border border-indigo-500/20"
|
||||
>
|
||||
{skill}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
127
pitch-deck/components/slides/TheAskSlide.tsx
Normal file
127
pitch-deck/components/slides/TheAskSlide.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import { Language, PitchFunding } from '@/lib/types'
|
||||
import { t } from '@/lib/i18n'
|
||||
import GradientText from '../ui/GradientText'
|
||||
import FadeInView from '../ui/FadeInView'
|
||||
import AnimatedCounter from '../ui/AnimatedCounter'
|
||||
import GlassCard from '../ui/GlassCard'
|
||||
import { Target, Calendar, FileText } from 'lucide-react'
|
||||
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts'
|
||||
|
||||
interface TheAskSlideProps {
|
||||
lang: Language
|
||||
funding: PitchFunding
|
||||
}
|
||||
|
||||
const COLORS = ['#6366f1', '#a78bfa', '#60a5fa', '#34d399', '#fbbf24']
|
||||
|
||||
export default function TheAskSlide({ lang, funding }: TheAskSlideProps) {
|
||||
const i = t(lang)
|
||||
const useOfFunds = funding?.use_of_funds || []
|
||||
|
||||
const pieData = useOfFunds.map((item) => ({
|
||||
name: lang === 'de' ? item.label_de : item.label_en,
|
||||
value: item.percentage,
|
||||
}))
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FadeInView className="text-center mb-10">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-3">
|
||||
<GradientText>{i.theAsk.title}</GradientText>
|
||||
</h2>
|
||||
<p className="text-lg text-white/50 max-w-2xl mx-auto">{i.theAsk.subtitle}</p>
|
||||
</FadeInView>
|
||||
|
||||
{/* Main Number */}
|
||||
<FadeInView delay={0.2} className="text-center mb-10">
|
||||
<motion.div
|
||||
initial={{ scale: 0.5, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ delay: 0.4, type: 'spring', stiffness: 200 }}
|
||||
>
|
||||
<p className="text-6xl md:text-8xl font-bold text-white mb-2">
|
||||
<AnimatedCounter target={200} suffix="k" duration={2000} />
|
||||
<span className="text-3xl md:text-4xl text-white/50 ml-2">EUR</span>
|
||||
</p>
|
||||
</motion.div>
|
||||
</FadeInView>
|
||||
|
||||
{/* Details */}
|
||||
<div className="grid md:grid-cols-3 gap-4 mb-8">
|
||||
<GlassCard delay={0.5} className="text-center p-5">
|
||||
<FileText className="w-6 h-6 text-indigo-400 mx-auto mb-2" />
|
||||
<p className="text-xs text-white/40 mb-1">{i.theAsk.instrument}</p>
|
||||
<p className="text-lg font-bold text-white">{funding?.instrument || 'SAFE'}</p>
|
||||
</GlassCard>
|
||||
<GlassCard delay={0.6} className="text-center p-5">
|
||||
<Calendar className="w-6 h-6 text-purple-400 mx-auto mb-2" />
|
||||
<p className="text-xs text-white/40 mb-1">{i.theAsk.targetDate}</p>
|
||||
<p className="text-lg font-bold text-white">Q3 2026</p>
|
||||
</GlassCard>
|
||||
<GlassCard delay={0.7} className="text-center p-5">
|
||||
<Target className="w-6 h-6 text-blue-400 mx-auto mb-2" />
|
||||
<p className="text-xs text-white/40 mb-1">{lang === 'de' ? 'Runway' : 'Runway'}</p>
|
||||
<p className="text-lg font-bold text-white">18 {lang === 'de' ? 'Monate' : 'Months'}</p>
|
||||
</GlassCard>
|
||||
</div>
|
||||
|
||||
{/* Use of Funds */}
|
||||
<FadeInView delay={0.8}>
|
||||
<GlassCard hover={false} className="p-6">
|
||||
<h3 className="text-lg font-semibold text-white mb-4 text-center">{i.theAsk.useOfFunds}</h3>
|
||||
<div className="flex flex-col md:flex-row items-center gap-8">
|
||||
{/* Pie Chart */}
|
||||
<div className="w-48 h-48">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={pieData}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
innerRadius={50}
|
||||
outerRadius={80}
|
||||
dataKey="value"
|
||||
stroke="none"
|
||||
>
|
||||
{pieData.map((_, idx) => (
|
||||
<Cell key={idx} fill={COLORS[idx % COLORS.length]} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
background: 'rgba(10, 10, 26, 0.9)',
|
||||
border: '1px solid rgba(255,255,255,0.1)',
|
||||
borderRadius: 8,
|
||||
color: '#fff',
|
||||
fontSize: 13,
|
||||
}}
|
||||
formatter={(value: number) => `${value}%`}
|
||||
/>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
<div className="flex-1 space-y-3">
|
||||
{useOfFunds.map((item, idx) => (
|
||||
<div key={idx} className="flex items-center gap-3">
|
||||
<div className="w-3 h-3 rounded-full" style={{ backgroundColor: COLORS[idx] }} />
|
||||
<span className="flex-1 text-sm text-white/70">
|
||||
{lang === 'de' ? item.label_de : item.label_en}
|
||||
</span>
|
||||
<span className="text-sm font-bold text-white">{item.percentage}%</span>
|
||||
<span className="text-xs text-white/30">
|
||||
{((funding.amount_eur * item.percentage) / 100).toLocaleString('de-DE')} EUR
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</GlassCard>
|
||||
</FadeInView>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
58
pitch-deck/components/slides/TractionSlide.tsx
Normal file
58
pitch-deck/components/slides/TractionSlide.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
'use client'
|
||||
|
||||
import { Language, PitchMilestone, PitchMetric } from '@/lib/types'
|
||||
import { t } from '@/lib/i18n'
|
||||
import GradientText from '../ui/GradientText'
|
||||
import FadeInView from '../ui/FadeInView'
|
||||
import GlassCard from '../ui/GlassCard'
|
||||
import Timeline from '../ui/Timeline'
|
||||
import LiveIndicator from '../ui/LiveIndicator'
|
||||
|
||||
interface TractionSlideProps {
|
||||
lang: Language
|
||||
milestones: PitchMilestone[]
|
||||
metrics: PitchMetric[]
|
||||
}
|
||||
|
||||
export default function TractionSlide({ lang, milestones, metrics }: TractionSlideProps) {
|
||||
const i = t(lang)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FadeInView className="text-center mb-10">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-3">
|
||||
<GradientText>{i.traction.title}</GradientText>
|
||||
</h2>
|
||||
<p className="text-lg text-white/50 max-w-2xl mx-auto">{i.traction.subtitle}</p>
|
||||
</FadeInView>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{/* KPI Cards */}
|
||||
<div>
|
||||
<div className="grid grid-cols-2 gap-3 mb-6">
|
||||
{metrics.slice(0, 6).map((m, idx) => (
|
||||
<GlassCard key={m.id} delay={0.2 + idx * 0.08} className="p-4">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-xs text-white/40">
|
||||
{lang === 'de' ? m.label_de : m.label_en}
|
||||
</span>
|
||||
{m.is_live && <LiveIndicator />}
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-white">
|
||||
{m.value}{m.unit ? ` ${m.unit}` : ''}
|
||||
</p>
|
||||
</GlassCard>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Timeline */}
|
||||
<FadeInView delay={0.4}>
|
||||
<div className="bg-white/[0.03] rounded-2xl p-5 border border-white/5 max-h-[400px] overflow-y-auto">
|
||||
<Timeline milestones={milestones} lang={lang} />
|
||||
</div>
|
||||
</FadeInView>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user