feat(pitch-deck): USP slide — large circle with cards on sides

- Large spinning circle (320px) with USP hub in center
- Compliance items left, Code items right inside circle
- 4 arrows pointing outward to capability cards
- 2 cards left (RFQ, Bidirectional), 2 cards right (Process, Continuous)
- Longer descriptions (~5 lines per card)
- Grid layout: cards | circle | cards

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

pitch-deck/components/slides/USPSlide.tsx

@@ -3,7 +3,6 @@
 import { Language } from '@/lib/types'
 import GradientText from '../ui/GradientText'
 import FadeInView from '../ui/FadeInView'
-import GlassCard from '../ui/GlassCard'
 import {
   FileCheck,
   Code,
@@ -11,9 +10,6 @@ import {
   Shield,
   GitPullRequest,
   ArrowLeftRight,
-  ArrowRight,
-  ArrowDown,
-  RotateCw,
 } from 'lucide-react'
 
 interface USPSlideProps {
@@ -23,18 +19,17 @@ interface USPSlideProps {
 export default function USPSlide({ lang }: USPSlideProps) {
   const de = lang === 'de'
 
-  const title = 'USP'
   const subtitle = de
     ? 'Die erste Plattform, die Compliance-Dokumente und tatsächliche Code-Umsetzung verbindet'
     : 'The first platform that connects compliance documents with actual code implementation'
 
   const complianceItems = de
-    ? ['DSGVO-Dokumente (VVT, DSFA, TOMs)', 'Audit-Management & Nachweise', 'Kunden-Anforderungen (RFQ)', 'CE-Risikobeurteilungen']
-    : ['GDPR documents (RoPA, DPIA, TOMs)', 'Audit management & evidence', 'Customer requirements (RFQ)', 'CE risk assessments']
+    ? ['DSGVO-Dokumente', 'Audit-Management', 'RFQ-Anforderungen', 'CE-Bewertungen']
+    : ['GDPR documents', 'Audit management', 'RFQ requirements', 'CE assessments']
 
   const codeItems = de
-    ? ['SAST / DAST / SBOM-Analyse', 'Kontinuierliches Pentesting', 'Issue-Tracker-Integration', 'Automatische Code-Änderungen']
-    : ['SAST / DAST / SBOM analysis', 'Continuous pentesting', 'Issue tracker integration', 'Automatic code changes']
+    ? ['SAST / DAST / SBOM', 'Pentesting', 'Issue-Tracker', 'Auto-Fixes']
+    : ['SAST / DAST / SBOM', 'Pentesting', 'Issue tracker', 'Auto-fixes']
 
   const capabilities = [
     {
@@ -43,7 +38,9 @@ export default function USPSlide({ lang }: USPSlideProps) {
       border: 'border-indigo-500/20',
       bg: 'bg-indigo-500/10',
       label: de ? 'RFQ-Prüfung' : 'RFQ Verification',
-      desc: de ? 'Kunden-Dokumente automatisch gegen Code prüfen' : 'Verify customer docs against code automatically',
+      desc: de
+        ? 'Kunden-Anforderungsdokumente werden automatisiert gegen die aktuelle Source-Code-Umsetzung geprüft. Abweichungen werden erkannt, Änderungen vorgeschlagen und auf Wunsch direkt im Code umgesetzt — ohne manuelles Nacharbeiten.'
+        : 'Customer requirement documents are automatically verified against current source code. Deviations are detected, changes proposed and implemented directly in code on request — no manual rework needed.',
     },
     {
       icon: ArrowLeftRight,
@@ -51,7 +48,9 @@ export default function USPSlide({ lang }: USPSlideProps) {
       border: 'border-purple-500/20',
       bg: 'bg-purple-500/10',
       label: de ? 'Bidirektional' : 'Bidirectional',
-      desc: de ? 'Code ↔ Compliance-Docs immer synchron' : 'Code ↔ Compliance docs always in sync',
+      desc: de
+        ? 'Compliance-Anforderungen fliessen direkt in den Code. Umgekehrt aktualisieren Code-Änderungen automatisch die Compliance-Dokumentation. Beide Seiten sind immer synchron — kein Informationsverlust zwischen Audit und Entwicklung.'
+        : 'Compliance requirements flow directly into code. Conversely, code changes automatically update compliance documentation. Both sides always stay in sync — no information loss between audit and development.',
     },
     {
       icon: Zap,
@@ -59,7 +58,9 @@ export default function USPSlide({ lang }: USPSlideProps) {
       border: 'border-amber-500/20',
       bg: 'bg-amber-500/10',
       label: de ? 'Prozess-Compliance' : 'Process Compliance',
-      desc: de ? 'Finding → Ticket → Fix vollautomatisch' : 'Finding → Ticket → Fix fully automatic',
+      desc: de
+        ? 'Vom Audit-Finding über das Ticket bis zur Code-Änderung läuft der gesamte Prozess automatisiert durch. Rollen, Fristen und Eskalation werden End-to-End verwaltet. Nachweise werden automatisch generiert und archiviert.'
+        : 'From audit finding to ticket to code change, the entire process runs automatically. Roles, deadlines and escalation are managed end-to-end. Evidence is automatically generated and archived.',
     },
     {
       icon: Shield,
@@ -67,114 +68,115 @@ export default function USPSlide({ lang }: USPSlideProps) {
       border: 'border-emerald-500/20',
       bg: 'bg-emerald-500/10',
       label: de ? 'Kontinuierlich' : 'Continuous',
-      desc: de ? 'Bei jeder Code-Änderung, nicht jährlich' : 'On every code change, not annually',
+      desc: de
+        ? 'Klassische Compliance prüft einmal im Jahr und hofft auf das Beste. Unsere Plattform prüft bei jeder Code-Änderung. Findings werden sofort zu Tickets mit konkreten Implementierungsvorschlägen im Issue-Tracker der Wahl.'
+        : 'Traditional compliance checks once a year and hopes for the best. Our platform checks on every code change. Findings immediately become tickets with concrete implementation proposals in the issue tracker of choice.',
     },
   ]
 
   return (
     <div>
-      <FadeInView className="text-center mb-6">
-        <h2 className="text-4xl md:text-5xl font-bold mb-2">
-          <GradientText>{title}</GradientText>
-        </h2>
+      <FadeInView className="text-center mb-4">
         <p className="text-base text-white/50 max-w-3xl mx-auto">{subtitle}</p>
       </FadeInView>
 
-      {/* Main bridge: Compliance ← BreakPilot → Code */}
       <FadeInView delay={0.2}>
-        <div className="grid grid-cols-11 gap-2 items-center max-w-5xl mx-auto mb-6">
-          {/* Left: Compliance */}
-          <div className="col-span-4">
-            <GlassCard hover={false} className="p-4 h-full">
-              <div className="flex items-center gap-2 mb-3">
-                <div className="w-7 h-7 rounded-lg bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center">
-                  <FileCheck className="w-3.5 h-3.5 text-indigo-400" />
+        <div className="grid grid-cols-12 gap-3 max-w-6xl mx-auto items-center">
+
+          {/* Left column: 2 cards */}
+          <div className="col-span-3 space-y-3">
+            {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>
-                <span className="text-sm font-bold text-indigo-400">Compliance & Audits</span>
-              </div>
-              <ul className="space-y-2">
-                {complianceItems.map((item, idx) => (
-                  <li key={idx} className="flex items-start gap-2 text-xs text-white/60">
-                    <span className="w-1.5 h-1.5 rounded-full bg-indigo-400 mt-1 shrink-0" />
-                    {item}
-                  </li>
-                ))}
-              </ul>
-            </GlassCard>
+              )
+            })}
           </div>
 
-          {/* Center: BreakPilot Hub */}
-          <div className="col-span-3 flex flex-col items-center justify-center py-4">
-            {/* Arrow left */}
-            <div className="flex items-center gap-2 mb-3">
-              <ArrowRight className="w-4 h-4 text-indigo-400/40 rotate-180" />
-              <span className="text-[9px] text-white/20 uppercase tracking-wider">{de ? 'synchron' : 'sync'}</span>
-              <ArrowRight className="w-4 h-4 text-purple-400/40" />
-            </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' }}>
 
-            {/* Spinning ring + hub */}
-            <div className="relative w-28 h-28">
-              <div className="absolute inset-0 rounded-full border-2 border-dashed border-indigo-500/20 animate-[spin_15s_linear_infinite]" />
-              <div className="absolute inset-2 rounded-full border border-white/[0.06]" />
-              <div className="absolute inset-4 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="text-center">
-                  <span className="text-xs font-black text-white block leading-tight">Break</span>
-                  <span className="text-xs font-black text-white block leading-tight">Pilot</span>
+              {/* Outer spinning dashed ring */}
+              <div className="absolute inset-0 rounded-full border-2 border-dashed border-indigo-500/20 animate-[spin_20s_linear_infinite]" />
+
+              {/* Inner solid ring */}
+              <div className="absolute inset-3 rounded-full border border-white/[0.06] bg-white/[0.015]" />
+
+              {/* Center hub: USP */}
+              <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">
+                  <span className="text-sm font-black text-white">USP</span>
                 </div>
               </div>
-            </div>
 
-            {/* Cycle indicator */}
-            <div className="flex items-center gap-1.5 mt-3">
-              <RotateCw className="w-3 h-3 text-white/20" />
-              <span className="text-[9px] text-white/20 uppercase tracking-wider">{de ? 'Kreislauf' : 'Loop'}</span>
+              {/* Left half: Compliance & Audits */}
+              <div className="absolute left-6 top-1/2 -translate-y-1/2 w-[100px] z-10">
+                <div className="flex items-center gap-1 mb-1.5">
+                  <FileCheck className="w-3 h-3 text-indigo-400" />
+                  <span className="text-[10px] font-bold text-indigo-400">Compliance</span>
+                </div>
+                <ul className="space-y-1">
+                  {complianceItems.map((item, idx) => (
+                    <li key={idx} className="flex items-center gap-1 text-[9px] text-white/50">
+                      <span className="w-1 h-1 rounded-full bg-indigo-400 shrink-0" />
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              {/* Right half: Code & Security */}
+              <div className="absolute right-6 top-1/2 -translate-y-1/2 w-[100px] z-10">
+                <div className="flex items-center gap-1 mb-1.5">
+                  <Code className="w-3 h-3 text-purple-400" />
+                  <span className="text-[10px] font-bold text-purple-400">Code</span>
+                </div>
+                <ul className="space-y-1">
+                  {codeItems.map((item, idx) => (
+                    <li key={idx} className="flex items-center gap-1 text-[9px] text-white/50">
+                      <span className="w-1 h-1 rounded-full bg-purple-400 shrink-0" />
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              {/* 4 directional arrows pointing outward to the cards */}
+              {/* Top-left arrow */}
+              <div className="absolute top-[15%] left-[15%] text-indigo-400/50 text-sm z-20">&#x25C0;</div>
+              {/* Top-right arrow */}
+              <div className="absolute top-[15%] right-[15%] text-purple-400/50 text-sm 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>
 
-          {/* Right: Code & Security */}
-          <div className="col-span-4">
-            <GlassCard hover={false} className="p-4 h-full">
-              <div className="flex items-center gap-2 mb-3">
-                <div className="w-7 h-7 rounded-lg bg-purple-500/10 border border-purple-500/20 flex items-center justify-center">
-                  <Code className="w-3.5 h-3.5 text-purple-400" />
+          {/* Right column: 2 cards */}
+          <div className="col-span-3 space-y-3">
+            {capabilities.slice(2, 4).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>
-                <span className="text-sm font-bold text-purple-400">Code & Security</span>
-              </div>
-              <ul className="space-y-2">
-                {codeItems.map((item, idx) => (
-                  <li key={idx} className="flex items-start gap-2 text-xs text-white/60">
-                    <span className="w-1.5 h-1.5 rounded-full bg-purple-400 mt-1 shrink-0" />
-                    {item}
-                  </li>
-                ))}
-              </ul>
-            </GlassCard>
+              )
+            })}
           </div>
         </div>
       </FadeInView>
-
-      {/* Arrow down */}
-      <FadeInView delay={0.3} className="flex justify-center mb-4">
-        <ArrowDown className="w-5 h-5 text-white/15" />
-      </FadeInView>
-
-      {/* Bottom: 4 capability cards */}
-      <FadeInView delay={0.4}>
-        <div className="grid grid-cols-4 gap-3 max-w-5xl mx-auto">
-          {capabilities.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-[11px] text-white/45 leading-relaxed">{cap.desc}</p>
-              </div>
-            )
-          })}
-        </div>
-      </FadeInView>
     </div>
   )
 }