Benjamin_Boenisch/breakpilot-core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pitch-deck): TheAsk slide — Wandeldarlehen version with Pre-Seed BW, Cap Table
All checks were successful
Build pitch-deck / build-push-deploy (push) Successful in 1m12s
Details
CI / go-lint (push) Has been skipped
Details
CI / python-lint (push) Has been skipped
Details
CI / nodejs-lint (push) Has been skipped
Details
CI / test-go-consent (push) Successful in 35s
Details
CI / test-python-voice (push) Successful in 37s
Details
CI / test-bqas (push) Successful in 36s
Details

Browse Source 
- Conditional sections only shown when instrument is "Wandeldarlehen"
- 200k investor ask + 200k L-Bank = 400k total funding visualization
- 3-step explanation: Investment → Conversion → Investor advantage
- Pre-Seed BW / L-Bank co-financing info box
- Cap Table before/after conversion example
- Use of Funds EUR amounts based on 400k total budget
- "1 Mio." version remains completely unaffected

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-04-16 07:36:44 +02:00
parent 24ce8ccd20
commit 8f44d907a5
1 changed files with 140 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
pitch-deck/components/slides/TheAskSlide.tsx
View File

@@ -8,8 +8,7 @@ import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import AnimatedCounter from '../ui/AnimatedCounter'
import GlassCard from '../ui/GlassCard'
import { Landmark } from 'lucide-react'
import { Target, Calendar, FileText } from 'lucide-react'
import { Landmark, Banknote, ArrowRightLeft, TrendingUp, ShieldCheck, Target, Calendar, FileText } from 'lucide-react'
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts'
interface TheAskSlideProps {
@@ -43,10 +42,12 @@ function formatTargetDate(dateStr: string, lang: Language): string {
export default function TheAskSlide({ lang, funding }: TheAskSlideProps) {
const i = t(lang)
const de = lang === 'de'
const isWandeldarlehen = (funding?.instrument || '').toLowerCase().includes('wandeldarlehen')
const rawFunds = funding?.use_of_funds
const useOfFunds = Array.isArray(rawFunds) ? rawFunds : (typeof rawFunds === 'string' ? JSON.parse(rawFunds) : [])
const amount = Number(funding?.amount_eur) || 0
const { target, suffix } = formatFundingAmount(amount)
const totalBudget = isWandeldarlehen ? amount * 2 : amount
const pieData = useOfFunds.map((item: Record<string, unknown>) => ({
name: (de ? item.label_de : item.label_en) as string || 'N/A',
@@ -74,6 +75,24 @@ export default function TheAskSlide({ lang, funding }: TheAskSlideProps) {
<span className="text-3xl md:text-4xl text-white/50 ml-2">EUR</span>
</p>
</motion.div>
{isWandeldarlehen && (
<div className="flex items-center justify-center gap-3 mt-4">
<div className="text-center px-4 py-2 bg-indigo-500/10 border border-indigo-500/20 rounded-xl">
<p className="text-xs text-white/40">{de ? 'Ihr Investment' : 'Your Investment'}</p>
<p className="text-lg font-bold text-indigo-400">200k EUR</p>
</div>
<span className="text-2xl text-white/30 font-light">+</span>
<div className="text-center px-4 py-2 bg-emerald-500/10 border border-emerald-500/20 rounded-xl">
<p className="text-xs text-white/40">L-Bank Pre-Seed</p>
<p className="text-lg font-bold text-emerald-400">200k EUR</p>
</div>
<span className="text-2xl text-white/30 font-light">=</span>
<div className="text-center px-4 py-2 bg-white/5 border border-white/10 rounded-xl">
<p className="text-xs text-white/40">{de ? 'Gesamtfinanzierung' : 'Total Funding'}</p>
<p className="text-lg font-bold text-white">400k EUR</p>
</div>
</div>
)}
</FadeInView>
{/* Details — dynamisch aus funding-Objekt */}
@@ -97,6 +116,124 @@ export default function TheAskSlide({ lang, funding }: TheAskSlideProps) {
</GlassCard>
</div>
{/* Wandeldarlehen Explanation — only shown for Wandeldarlehen versions */}
{isWandeldarlehen && (
<>
{/* How it works */}
<FadeInView delay={0.5} className="mb-6">
<GlassCard hover={false} className="p-6">
<h3 className="text-lg font-semibold text-white mb-4 text-center">
{de ? 'So funktioniert das Wandeldarlehen' : 'How the Convertible Loan Works'}
</h3>
<div className="grid md:grid-cols-3 gap-4">
<div className="text-center p-4 bg-white/5 rounded-xl">
<Banknote className="w-6 h-6 text-indigo-400 mx-auto mb-2" />
<p className="text-sm font-bold text-white mb-1">
{de ? '1. Investition' : '1. Investment'}
</p>
<p className="text-xs text-white/50 leading-relaxed">
{de
? 'Investor stellt Darlehen bereit — keine sofortige Bewertung, keine sofortige Verwässerung.'
: 'Investor provides a loan — no immediate valuation, no immediate dilution.'}
</p>
</div>
<div className="text-center p-4 bg-white/5 rounded-xl">
<ArrowRightLeft className="w-6 h-6 text-purple-400 mx-auto mb-2" />
<p className="text-sm font-bold text-white mb-1">
{de ? '2. Conversion' : '2. Conversion'}
</p>
<p className="text-xs text-white/50 leading-relaxed">
{de
? 'Bei der nächsten Finanzierungsrunde wandelt das Darlehen in Anteile — mit Discount für den Frühphasen-Investor.'
: 'At the next funding round, the loan converts to equity — with a discount for the early-stage investor.'}
</p>
</div>
<div className="text-center p-4 bg-white/5 rounded-xl">
<TrendingUp className="w-6 h-6 text-emerald-400 mx-auto mb-2" />
<p className="text-sm font-bold text-white mb-1">
{de ? '3. Investor-Vorteil' : '3. Investor Advantage'}
</p>
<p className="text-xs text-white/50 leading-relaxed">
{de
? 'Durch den Discount erhält der Investor mehr Anteile pro Euro als spätere Investoren — Prämie für frühes Vertrauen.'
: 'The discount gives the investor more shares per euro than later investors — a premium for early trust.'}
</p>
</div>
</div>
</GlassCard>
</FadeInView>
{/* Pre-Seed BW / L-Bank */}
<FadeInView delay={0.6} className="mb-6">
<div className="bg-gradient-to-r from-emerald-500/10 to-blue-500/10 border border-emerald-500/20 rounded-xl px-5 py-3">
<div className="flex items-start gap-3">
<ShieldCheck className="w-5 h-5 text-emerald-400 mt-0.5 shrink-0" />
<div>
<p className="text-sm font-bold text-white mb-1">
{de ? 'Pre-Seed BW — Staatliche Co-Finanzierung (L-Bank)' : 'Pre-Seed BW — Government Co-Financing (L-Bank)'}
</p>
<p className="text-xs text-white/50 leading-relaxed">
{de
? 'Das Investment wird über das Pre-Seed-Programm von Start-up BW / L-Bank staatlich co-finanziert. Die L-Bank stellt eine Zuwendung mit Wandlungsvorbehalt bereit — das reduziert das Risiko für private Investoren und signalisiert staatliches Vertrauen in das Geschäftsmodell.'
: 'The investment is co-financed through the Pre-Seed BW / L-Bank government program. L-Bank provides a grant with conversion option — reducing risk for private investors and signaling government confidence in the business model.'}
</p>
</div>
</div>
</div>
</FadeInView>
{/* Cap Table */}
<FadeInView delay={0.7} className="mb-6">
<GlassCard hover={false} className="p-6">
<h3 className="text-lg font-semibold text-white mb-4 text-center">
{de ? 'Cap Table — Beispielrechnung' : 'Cap Table — Example Calculation'}
</h3>
<div className="grid md:grid-cols-2 gap-6">
<div>
<p className="text-xs text-white/40 mb-3 text-center font-semibold uppercase tracking-wider">
{de ? 'Vor Conversion' : 'Before Conversion'}
</p>
<div className="space-y-2">
<div className="flex justify-between items-center bg-white/5 rounded-lg px-4 py-2">
<span className="text-sm text-white/70">{de ? 'Gründer' : 'Founders'}</span>
<span className="text-sm font-bold text-white">100%</span>
</div>
<div className="flex justify-between items-center bg-indigo-500/10 border border-indigo-500/20 rounded-lg px-4 py-2">
<span className="text-sm text-indigo-300">{de ? 'Wandeldarlehen' : 'Convertible Loan'}</span>
<span className="text-xs font-semibold text-indigo-400">{de ? 'ausstehend' : 'outstanding'}</span>
</div>
</div>
</div>
<div>
<p className="text-xs text-white/40 mb-3 text-center font-semibold uppercase tracking-wider">
{de ? 'Nach Conversion (Beispiel)' : 'After Conversion (Example)'}
</p>
<div className="space-y-2">
<div className="flex justify-between items-center bg-white/5 rounded-lg px-4 py-2">
<span className="text-sm text-white/70">{de ? 'Gründer' : 'Founders'}</span>
<span className="text-sm font-bold text-white">~80-85%</span>
</div>
<div className="flex justify-between items-center bg-indigo-500/10 rounded-lg px-4 py-2">
<span className="text-sm text-indigo-300">{de ? 'Investor' : 'Investor'}</span>
<span className="text-sm font-bold text-indigo-400">~10-15%</span>
</div>
<div className="flex justify-between items-center bg-emerald-500/10 rounded-lg px-4 py-2">
<span className="text-sm text-emerald-300">L-Bank / Pre-Seed</span>
<span className="text-sm font-bold text-emerald-400">~5%</span>
</div>
</div>
</div>
</div>
<p className="text-[11px] text-white/30 mt-4 text-center italic">
{de
? '* Beispielhafte Darstellung. Tatsächliche Anteile abhängig von Bewertung und Discount bei Conversion.'
: '* Illustrative example. Actual shares depend on valuation and discount at conversion.'}
</p>
</GlassCard>
</FadeInView>
</>
)}
{/* Use of Funds */}
<FadeInView delay={0.8}>
<GlassCard hover={false} className="p-6">
@@ -143,7 +280,7 @@ export default function TheAskSlide({ lang, funding }: TheAskSlideProps) {
</span>
<span className="text-sm font-bold text-white">{item.percentage}%</span>
<span className="text-xs text-white/30">
{((amount * item.percentage) / 100).toLocaleString('de-DE')} EUR
{((totalBudget * item.percentage) / 100).toLocaleString('de-DE')} EUR
</span>
</div>
))}