refactor: Consolidate standalone services into admin-v2, add new SDK modules
Remove standalone services (ai-compliance-sdk root, developer-portal, dsms-gateway, dsms-node, night-scheduler) and legacy compliance/dsgvo pages. Add new SDK pipeline modules (academy, document-crawler, dsb-portal, incidents, whistleblower, reporting, sso, multi-tenant, industry-templates). Add drafting engine, legal corpus files (AT/CH/DE), pitch-deck, blog and Förderantrag pages. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
212
pitch-deck/components/slides/TheAskSlide.tsx
Normal file
212
pitch-deck/components/slides/TheAskSlide.tsx
Normal file
@@ -0,0 +1,212 @@
|
||||
'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, Building2, Users, Landmark, TrendingUp } from 'lucide-react'
|
||||
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts'
|
||||
|
||||
interface TheAskSlideProps {
|
||||
lang: Language
|
||||
funding: PitchFunding
|
||||
}
|
||||
|
||||
const COLORS = ['#6366f1', '#a78bfa', '#60a5fa', '#34d399', '#fbbf24', '#f87171']
|
||||
|
||||
const FUNDING_TIMELINE = [
|
||||
{
|
||||
month: 'Aug 2026',
|
||||
amount: 25000,
|
||||
icon: Building2,
|
||||
color: '#6366f1',
|
||||
label_de: 'Stammkapital',
|
||||
label_en: 'Share Capital',
|
||||
desc_de: 'GmbH-Gruendung',
|
||||
desc_en: 'GmbH Founding',
|
||||
},
|
||||
{
|
||||
month: 'Sep 2026',
|
||||
amount: 25000,
|
||||
icon: Users,
|
||||
color: '#a78bfa',
|
||||
label_de: 'Angel-Runde',
|
||||
label_en: 'Angel Round',
|
||||
desc_de: '5% Anteile',
|
||||
desc_en: '5% Equity',
|
||||
},
|
||||
{
|
||||
month: 'Okt 2026',
|
||||
amount: 200000,
|
||||
icon: Landmark,
|
||||
color: '#60a5fa',
|
||||
label_de: 'Wandeldarlehen',
|
||||
label_en: 'Convertible Note',
|
||||
desc_de: '40k Investor + 160k L-Bank',
|
||||
desc_en: '40k Investor + 160k L-Bank',
|
||||
},
|
||||
{
|
||||
month: 'Jul 2027',
|
||||
amount: 1000000,
|
||||
icon: TrendingUp,
|
||||
color: '#34d399',
|
||||
label_de: 'Series A',
|
||||
label_en: 'Series A',
|
||||
desc_de: 'Skalierungskapital',
|
||||
desc_en: 'Growth Capital',
|
||||
},
|
||||
]
|
||||
|
||||
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,
|
||||
}))
|
||||
|
||||
const totalFunding = 1250000
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FadeInView className="text-center mb-8">
|
||||
<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-8">
|
||||
<motion.div
|
||||
initial={{ scale: 0.5, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ delay: 0.4, type: 'spring', stiffness: 200 }}
|
||||
>
|
||||
<p className="text-5xl md:text-7xl font-bold text-white mb-1">
|
||||
<AnimatedCounter target={1.25} suffix="M" duration={2000} decimals={2} />
|
||||
<span className="text-2xl md:text-3xl text-white/50 ml-2">EUR</span>
|
||||
</p>
|
||||
<p className="text-sm text-white/40">
|
||||
{lang === 'de' ? 'Gestaffelte Finanzierung 2026-2027' : 'Staged Funding 2026-2027'}
|
||||
</p>
|
||||
</motion.div>
|
||||
</FadeInView>
|
||||
|
||||
{/* Funding Timeline */}
|
||||
<FadeInView delay={0.4} className="mb-8">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{FUNDING_TIMELINE.map((event, idx) => {
|
||||
const Icon = event.icon
|
||||
return (
|
||||
<motion.div
|
||||
key={idx}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.5 + idx * 0.15 }}
|
||||
>
|
||||
<GlassCard delay={0} className="p-4 text-center h-full">
|
||||
<Icon className="w-5 h-5 mx-auto mb-2" style={{ color: event.color }} />
|
||||
<p className="text-xs text-white/40 mb-1">{event.month}</p>
|
||||
<p className="text-lg font-bold text-white mb-0.5">
|
||||
{event.amount >= 1000000
|
||||
? `${(event.amount / 1000000).toFixed(0)}M`
|
||||
: `${(event.amount / 1000).toFixed(0)}k`}
|
||||
</p>
|
||||
<p className="text-xs font-medium text-white/70">
|
||||
{lang === 'de' ? event.label_de : event.label_en}
|
||||
</p>
|
||||
<p className="text-[10px] text-white/30 mt-0.5">
|
||||
{lang === 'de' ? event.desc_de : event.desc_en}
|
||||
</p>
|
||||
</GlassCard>
|
||||
</motion.div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</FadeInView>
|
||||
|
||||
{/* Details Row */}
|
||||
<div className="grid md:grid-cols-3 gap-3 mb-6">
|
||||
<GlassCard delay={0.8} className="text-center p-4">
|
||||
<FileText className="w-5 h-5 text-indigo-400 mx-auto mb-2" />
|
||||
<p className="text-xs text-white/40 mb-1">{i.theAsk.instrument}</p>
|
||||
<p className="text-sm font-bold text-white">{funding?.instrument || 'Stammkapital + Wandeldarlehen + Equity'}</p>
|
||||
</GlassCard>
|
||||
<GlassCard delay={0.9} className="text-center p-4">
|
||||
<Calendar className="w-5 h-5 text-purple-400 mx-auto mb-2" />
|
||||
<p className="text-xs text-white/40 mb-1">{i.theAsk.targetDate}</p>
|
||||
<p className="text-sm font-bold text-white">
|
||||
{lang === 'de' ? 'Aug 2026 — Jul 2027' : 'Aug 2026 — Jul 2027'}
|
||||
</p>
|
||||
</GlassCard>
|
||||
<GlassCard delay={1.0} className="text-center p-4">
|
||||
<Target className="w-5 h-5 text-blue-400 mx-auto mb-2" />
|
||||
<p className="text-xs text-white/40 mb-1">{lang === 'de' ? 'Runway' : 'Runway'}</p>
|
||||
<p className="text-sm font-bold text-white">36+ {lang === 'de' ? 'Monate' : 'Months'}</p>
|
||||
</GlassCard>
|
||||
</div>
|
||||
|
||||
{/* Use of Funds */}
|
||||
<FadeInView delay={1.1}>
|
||||
<GlassCard hover={false} className="p-5">
|
||||
<h3 className="text-base font-semibold text-white mb-3 text-center">
|
||||
{i.theAsk.useOfFunds} (1,25 Mio. EUR)
|
||||
</h3>
|
||||
<div className="flex flex-col md:flex-row items-center gap-6">
|
||||
{/* Pie Chart */}
|
||||
<div className="w-40 h-40">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={pieData}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
innerRadius={45}
|
||||
outerRadius={70}
|
||||
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: 12,
|
||||
}}
|
||||
formatter={(value: number) => `${value}%`}
|
||||
/>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
<div className="flex-1 space-y-2">
|
||||
{useOfFunds.map((item, idx) => (
|
||||
<div key={idx} className="flex items-center gap-3">
|
||||
<div className="w-2.5 h-2.5 rounded-full flex-shrink-0" 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">
|
||||
{((totalFunding * item.percentage) / 100).toLocaleString('de-DE')} EUR
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</GlassCard>
|
||||
</FadeInView>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user