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

feat(pitch-deck): USP slide — larger circle, title back, infinity hub
All checks were successful
Build pitch-deck / build-push-deploy (push) Successful in 1m6s
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 34s
Details
CI / test-python-voice (push) Successful in 33s
Details
CI / test-bqas (push) Successful in 34s
Details

Browse Source 
- USP as slide title (GradientText) above
- Circle doubled to 380px with spinning ring
- Infinity symbol (∞) in center hub instead of text
- Compliance left, Code right inside circle — larger font
- 4 cards in corners (220px wide, larger text, ~5 lines each)
- Cards spread to corners (top/bottom, left/right)
- Dashed SVG lines connecting circle to cards

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-04-15 14:33:28 +02:00
parent 9c23068a4f
commit 801a5a43f5
1 changed files with 114 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
pitch-deck/components/slides/USPSlide.tsx
View File

@@ -76,105 +76,133 @@ export default function USPSlide({ lang }: USPSlideProps) {
return ( return (
<div> <div>
<FadeInView className="text-center mb-4"> {/* Title */}
<p className="text-base text-white/50 max-w-3xl mx-auto">{subtitle}</p> <FadeInView className="text-center mb-2">
<h2 className="text-4xl md:text-5xl font-bold mb-1">
<GradientText>USP</GradientText>
</h2>
<p className="text-sm text-white/50 max-w-3xl mx-auto">{subtitle}</p>
</FadeInView> </FadeInView>
<FadeInView delay={0.2}> <FadeInView delay={0.2}>
<div className="grid grid-cols-12 gap-3 max-w-6xl mx-auto items-center"> <div className="relative max-w-6xl mx-auto" style={{ height: '480px' }}>
{/* Left column: 2 cards */} {/* ===== CENTER: Large circle ===== */}
<div className="col-span-3 space-y-3"> <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" style={{ width: '380px', height: '380px' }}>
{capabilities.slice(0, 2).map((cap, idx) => {
const Icon = cap.icon
return (
<div key={idx} className={`border ${cap.border} ${cap.bg} rounded-xl p-3`}>
<div className="flex items-center gap-1.5 mb-1.5">
<Icon className={`w-4 h-4 ${cap.color}`} />
<span className={`text-xs font-bold ${cap.color}`}>{cap.label}</span>
</div>
<p className="text-[10px] text-white/45 leading-relaxed">{cap.desc}</p>
</div>
)
})}
</div>
{/* Center: Large circle with spinning ring */}
<div className="col-span-6 flex items-center justify-center">
<div className="relative" style={{ width: '320px', height: '320px' }}>
{/* Outer spinning dashed ring */} {/* Outer spinning dashed ring */}
<div className="absolute inset-0 rounded-full border-2 border-dashed border-indigo-500/20 animate-[spin_20s_linear_infinite]" /> <div className="absolute inset-0 rounded-full border-2 border-dashed border-indigo-500/20 animate-[spin_20s_linear_infinite]" />
{/* Inner solid ring */} {/* Inner ring */}
<div className="absolute inset-3 rounded-full border border-white/[0.06] bg-white/[0.015]" /> <div className="absolute inset-4 rounded-full border border-white/[0.06] bg-white/[0.015]" />
{/* Center hub: USP */} {/* Center hub: Infinity symbol */}
<div className="absolute inset-0 flex items-center justify-center z-10"> <div className="absolute inset-0 flex items-center justify-center z-10">
<div className="w-16 h-16 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-xl shadow-indigo-500/30"> <div className="w-20 h-20 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-xl shadow-indigo-500/30">
<span className="text-sm font-black text-white">USP</span> <span className="text-3xl font-black text-white">&#x221E;</span>
</div> </div>
</div> </div>
{/* Left half: Compliance & Audits */} {/* Left half: Compliance */}
<div className="absolute left-6 top-1/2 -translate-y-1/2 w-[100px] z-10"> <div className="absolute left-8 top-1/2 -translate-y-1/2 w-[120px] z-10">
<div className="flex items-center gap-1 mb-1.5"> <div className="flex items-center gap-1.5 mb-2">
<FileCheck className="w-3 h-3 text-indigo-400" /> <FileCheck className="w-4 h-4 text-indigo-400" />
<span className="text-[10px] font-bold text-indigo-400">Compliance</span> <span className="text-xs font-bold text-indigo-400">Compliance</span>
</div> </div>
<ul className="space-y-1"> <ul className="space-y-1.5">
{complianceItems.map((item, idx) => ( {complianceItems.map((item, idx) => (
<li key={idx} className="flex items-center gap-1 text-[9px] text-white/50"> <li key={idx} className="flex items-center gap-1.5 text-[11px] text-white/50">
<span className="w-1 h-1 rounded-full bg-indigo-400 shrink-0" /> <span className="w-1.5 h-1.5 rounded-full bg-indigo-400 shrink-0" />
{item} {item}
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
{/* Right half: Code & Security */} {/* Right half: Code */}
<div className="absolute right-6 top-1/2 -translate-y-1/2 w-[100px] z-10"> <div className="absolute right-8 top-1/2 -translate-y-1/2 w-[120px] z-10">
<div className="flex items-center gap-1 mb-1.5"> <div className="flex items-center gap-1.5 mb-2">
<Code className="w-3 h-3 text-purple-400" /> <Code className="w-4 h-4 text-purple-400" />
<span className="text-[10px] font-bold text-purple-400">Code</span> <span className="text-xs font-bold text-purple-400">Code & Security</span>
</div> </div>
<ul className="space-y-1"> <ul className="space-y-1.5">
{codeItems.map((item, idx) => ( {codeItems.map((item, idx) => (
<li key={idx} className="flex items-center gap-1 text-[9px] text-white/50"> <li key={idx} className="flex items-center gap-1.5 text-[11px] text-white/50">
<span className="w-1 h-1 rounded-full bg-purple-400 shrink-0" /> <span className="w-1.5 h-1.5 rounded-full bg-purple-400 shrink-0" />
{item} {item}
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
{/* 4 directional arrows pointing outward to the cards */} {/* 4 directional arrows */}
{/* Top-left arrow */} <div className="absolute top-[12%] left-[12%] text-indigo-400/60 text-lg z-20">&#x25C0;</div>
<div className="absolute top-[15%] left-[15%] text-indigo-400/50 text-sm z-20">&#x25C0;</div> <div className="absolute top-[12%] right-[12%] text-purple-400/60 text-lg z-20">&#x25B6;</div>
{/* Top-right arrow */} <div className="absolute bottom-[12%] left-[12%] text-amber-400/60 text-lg z-20">&#x25C0;</div>
<div className="absolute top-[15%] right-[15%] text-purple-400/50 text-sm z-20">&#x25B6;</div> <div className="absolute bottom-[12%] right-[12%] text-emerald-400/60 text-lg z-20">&#x25B6;</div>
{/* Bottom-left arrow */}
<div className="absolute bottom-[15%] left-[15%] text-amber-400/50 text-sm z-20">&#x25C0;</div>
{/* Bottom-right arrow */}
<div className="absolute bottom-[15%] right-[15%] text-emerald-400/50 text-sm z-20">&#x25B6;</div>
</div>
</div> </div>
{/* Right column: 2 cards */} {/* ===== CARDS: 4 corners, spread out ===== */}
<div className="col-span-3 space-y-3">
{capabilities.slice(2, 4).map((cap, idx) => { {/* Top Left */}
const Icon = cap.icon <div className="absolute top-0 left-0 w-[220px]">
return ( {(() => { const Icon = capabilities[0].icon; const cap = capabilities[0]; return (
<div key={idx} className={`border ${cap.border} ${cap.bg} rounded-xl p-3`}> <div className={`border ${cap.border} ${cap.bg} rounded-xl p-4`}>
<div className="flex items-center gap-1.5 mb-1.5"> <div className="flex items-center gap-2 mb-2">
<Icon className={`w-4 h-4 ${cap.color}`} /> <Icon className={`w-5 h-5 ${cap.color}`} />
<span className={`text-xs font-bold ${cap.color}`}>{cap.label}</span> <span className={`text-sm font-bold ${cap.color}`}>{cap.label}</span>
</div> </div>
<p className="text-[10px] text-white/45 leading-relaxed">{cap.desc}</p> <p className="text-xs text-white/50 leading-relaxed">{cap.desc}</p>
</div> </div>
) )})()}
})}
</div> </div>
{/* Top Right */}
<div className="absolute top-0 right-0 w-[220px]">
{(() => { const Icon = capabilities[1].icon; const cap = capabilities[1]; return (
<div className={`border ${cap.border} ${cap.bg} rounded-xl p-4`}>
<div className="flex items-center gap-2 mb-2">
<Icon className={`w-5 h-5 ${cap.color}`} />
<span className={`text-sm font-bold ${cap.color}`}>{cap.label}</span>
</div>
<p className="text-xs text-white/50 leading-relaxed">{cap.desc}</p>
</div>
)})()}
</div>
{/* Bottom Left */}
<div className="absolute bottom-0 left-0 w-[220px]">
{(() => { const Icon = capabilities[2].icon; const cap = capabilities[2]; return (
<div className={`border ${cap.border} ${cap.bg} rounded-xl p-4`}>
<div className="flex items-center gap-2 mb-2">
<Icon className={`w-5 h-5 ${cap.color}`} />
<span className={`text-sm font-bold ${cap.color}`}>{cap.label}</span>
</div>
<p className="text-xs text-white/50 leading-relaxed">{cap.desc}</p>
</div>
)})()}
</div>
{/* Bottom Right */}
<div className="absolute bottom-0 right-0 w-[220px]">
{(() => { const Icon = capabilities[3].icon; const cap = capabilities[3]; return (
<div className={`border ${cap.border} ${cap.bg} rounded-xl p-4`}>
<div className="flex items-center gap-2 mb-2">
<Icon className={`w-5 h-5 ${cap.color}`} />
<span className={`text-sm font-bold ${cap.color}`}>{cap.label}</span>
</div>
<p className="text-xs text-white/50 leading-relaxed">{cap.desc}</p>
</div>
)})()}
</div>
{/* Dashed connection lines from circle to cards */}
<svg className="absolute inset-0 w-full h-full pointer-events-none z-0" preserveAspectRatio="none" viewBox="0 0 100 100">
<line x1="32" y1="28" x2="22" y2="18" stroke="rgba(99,102,241,0.15)" strokeWidth="0.3" strokeDasharray="1 1" />
<line x1="68" y1="28" x2="78" y2="18" stroke="rgba(168,85,247,0.15)" strokeWidth="0.3" strokeDasharray="1 1" />
<line x1="32" y1="72" x2="22" y2="82" stroke="rgba(245,158,11,0.15)" strokeWidth="0.3" strokeDasharray="1 1" />
<line x1="68" y1="72" x2="78" y2="82" stroke="rgba(16,185,129,0.15)" strokeWidth="0.3" strokeDasharray="1 1" />
</svg>
</div> </div>
</FadeInView> </FadeInView>
</div> </div>