feat(pitch-deck): USP slide redesign + add to sidebar

- USP added to slideNames (DE+EN) and chat display names
- Circular layout: BreakPilot hub center, rotating ring,
  Compliance & Code sections inside circle
- 4 capability cards in corners connected by dashed lines
- Removed variant toggle (kept variant A design)

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

pitch-deck/app/api/chat/route.ts

@@ -12,6 +12,7 @@ const SLIDE_DISPLAY_NAMES: Record<string, { de: string; en: string }> = {
   'cover': { de: 'Cover', en: 'Cover' },
   'problem': { de: 'Das Problem', en: 'The Problem' },
   'solution': { de: 'Die Lösung', en: 'The Solution' },
+  'usp': { de: 'USP', en: 'USP' },
   'product': { de: 'Produkte', en: 'Products' },
   'how-it-works': { de: 'So funktioniert\'s', en: 'How It Works' },
   'market': { de: 'Markt', en: 'Market' },

pitch-deck/components/slides/USPSlide.tsx

@@ -1,223 +1,204 @@
 'use client'
 
-import { useState } from 'react'
 import { Language } from '@/lib/types'
 import GradientText from '../ui/GradientText'
 import FadeInView from '../ui/FadeInView'
-import GlassCard from '../ui/GlassCard'
 import {
   FileCheck,
   Code,
-  ArrowLeftRight,
   Zap,
   Shield,
   GitPullRequest,
+  ArrowLeftRight,
 } from 'lucide-react'
 
 interface USPSlideProps {
   lang: Language
 }
 
-type BridgeVariant = 'A' | 'B' | 'C'
-
 export default function USPSlide({ lang }: USPSlideProps) {
   const de = lang === 'de'
-  const [bridgeVariant, setBridgeVariant] = useState<BridgeVariant>('A')
 
   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 bridgeLeft = {
-    icon: FileCheck,
-    label: de ? 'Compliance & Audits' : 'Compliance & Audits',
-    items: 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'],
-  }
+  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']
 
-  const bridgeRight = {
-    icon: Code,
-    label: de ? 'Code & Security' : 'Code & Security',
-    items: de
-      ? ['SAST / DAST / SBOM-Analyse', 'Kontinuierliches Pentesting', 'Issue-Tracker-Integration', 'Automatische Code-Aenderungen']
-      : ['SAST / DAST / SBOM analysis', 'Continuous pentesting', 'Issue tracker integration', 'Automatic code changes'],
-  }
+  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']
 
-  const capabilities = [
+  const outerCapabilities = [
     {
       icon: GitPullRequest,
       color: 'text-indigo-400',
-      bg: 'bg-indigo-500/10 border-indigo-500/20',
-      title: de ? 'RFQ-gegen-Code Prüfung' : 'RFQ-to-Code Verification',
-      desc: de
-        ? 'Kunden-Anforderungsdokumente werden automatisiert gegen die aktuelle Source-Code-Umsetzung geprüft. Abweichungen werden erkannt, Änderungen vorgeschlagen und auf Wunsch automatisiert umgesetzt.'
-        : 'Customer requirement documents are automatically verified against current source code implementation. Deviations are detected, changes proposed and automatically implemented on request.',
+      border: 'border-indigo-500/30',
+      bg: 'bg-indigo-500/10',
+      label: de ? 'RFQ-Prüfung' : 'RFQ Verification',
+      desc: de ? 'Kunden-Dokumente gegen Code prüfen' : 'Verify customer docs against code',
+      position: 'top-left',
     },
     {
       icon: ArrowLeftRight,
       color: 'text-purple-400',
-      bg: 'bg-purple-500/10 border-purple-500/20',
-      title: de ? 'Bidirektionale Synchronisation' : 'Bidirectional Synchronization',
-      desc: de
-        ? 'Compliance-Anforderungen fliessen direkt in den Code — und Code-Aenderungen aktualisieren automatisch die Compliance-Dokumentation. Kein manuelles Nacharbeiten.'
-        : 'Compliance requirements flow directly into code — and code changes automatically update compliance documentation. No manual rework.',
+      border: 'border-purple-500/30',
+      bg: 'bg-purple-500/10',
+      label: de ? 'Bidirektional' : 'Bidirectional',
+      desc: de ? 'Code ↔ Docs synchronisiert' : 'Code ↔ Docs synchronized',
+      position: 'top-right',
     },
     {
       icon: Zap,
       color: 'text-amber-400',
-      bg: 'bg-amber-500/10 border-amber-500/20',
-      title: de ? 'Automatisierte Prozess-Compliance' : 'Automated Process Compliance',
-      desc: de
-        ? 'Vom Audit-Finding über das Ticket bis zur Code-Aenderung — der gesamte Prozess laeuft automatisiert durch. Rollen, Fristen, Eskalation und Nachweise werden End-to-End verwaltet.'
-        : 'From audit finding to ticket to code change — the entire process runs automatically. Roles, deadlines, escalation and evidence are managed end-to-end.',
+      border: 'border-amber-500/30',
+      bg: 'bg-amber-500/10',
+      label: de ? 'Prozess-Compliance' : 'Process Compliance',
+      desc: de ? 'Finding → Ticket → Fix automatisch' : 'Finding → Ticket → Fix automatic',
+      position: 'bottom-left',
     },
     {
       icon: Shield,
       color: 'text-emerald-400',
-      bg: 'bg-emerald-500/10 border-emerald-500/20',
-      title: de ? 'Kontinuierlich statt jährlich' : 'Continuous Instead of Annual',
-      desc: de
-        ? 'Klassische Compliance prüft einmal im Jahr und hofft auf das Beste. Unsere Plattform prüft bei jeder Code-Aenderung — Findings werden sofort zu Tickets mit konkreten Implementierungsvorschlaegen.'
-        : '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.',
+      border: 'border-emerald-500/30',
+      bg: 'bg-emerald-500/10',
+      label: de ? 'Kontinuierlich' : 'Continuous',
+      desc: de ? 'Bei jeder Code-Änderung' : 'On every code change',
+      position: 'bottom-right',
     },
   ]
 
   return (
     <div>
-      <FadeInView className="text-center mb-8">
+      <FadeInView className="text-center mb-6">
         <h2 className="text-4xl md:text-5xl font-bold mb-3">
           <GradientText>{title}</GradientText>
         </h2>
-        <p className="text-lg text-white/50 max-w-3xl mx-auto">{subtitle}</p>
+        <p className="text-base text-white/50 max-w-3xl mx-auto">{subtitle}</p>
       </FadeInView>
 
-      {/* Bridge Visualization */}
       <FadeInView delay={0.2}>
-        <div className="grid grid-cols-5 gap-3 items-center mb-8 max-w-4xl mx-auto">
-          {/* Left: Compliance */}
-          <div className="col-span-2">
-            <GlassCard hover={false} className="p-4">
-              <div className="flex items-center gap-2 mb-3">
-                <div className="w-8 h-8 rounded-lg bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center">
-                  <bridgeLeft.icon className="w-4 h-4 text-indigo-400" />
-                </div>
-                <p className="text-sm font-bold text-white">{bridgeLeft.label}</p>
-              </div>
-              <ul className="space-y-1.5">
-                {bridgeLeft.items.map((item, idx) => (
-                  <li key={idx} className="flex items-center gap-2 text-xs text-white/50">
-                    <span className="w-1.5 h-1.5 rounded-full bg-indigo-400 shrink-0" />
-                    {item}
-                  </li>
-                ))}
-              </ul>
-            </GlassCard>
+        <div className="relative max-w-4xl mx-auto" style={{ height: '420px' }}>
+
+          {/* Outer rotating ring */}
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div
+              className="w-[340px] h-[340px] rounded-full border-2 border-dashed border-indigo-500/20 animate-[spin_20s_linear_infinite]"
+            />
           </div>
 
-          {/* Center: Bridge — 3 variants to choose from */}
-          <div className="col-span-1 flex flex-col items-center justify-center">
-            {bridgeVariant === 'A' && (
-              /* Variant A: Circular Loop with BreakPilot in center */
-              <div className="relative w-24 h-24">
-                {/* Rotating ring */}
-                <div className="absolute inset-0 rounded-full border-2 border-dashed border-indigo-500/30 animate-[spin_12s_linear_infinite]" />
-                {/* Arrows on ring */}
-                <div className="absolute -top-1 left-1/2 -translate-x-1/2 text-indigo-400 text-xs">&#x25B2;</div>
-                <div className="absolute -bottom-1 left-1/2 -translate-x-1/2 text-purple-400 text-xs">&#x25BC;</div>
-                <div className="absolute top-1/2 -left-1 -translate-y-1/2 text-indigo-400 text-xs">&#x25C0;</div>
-                <div className="absolute top-1/2 -right-1 -translate-y-1/2 text-purple-400 text-xs">&#x25B6;</div>
-                {/* Center hub */}
-                <div className="absolute inset-3 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg shadow-indigo-500/30">
-                  <span className="text-[9px] font-black text-white leading-tight text-center">Break<br/>Pilot</span>
-                </div>
+          {/* Inner solid ring */}
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="w-[300px] h-[300px] rounded-full border border-white/[0.08] bg-white/[0.02]" />
+          </div>
+
+          {/* Center: BreakPilot Hub */}
+          <div className="absolute inset-0 flex items-center justify-center">
+            <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 z-10">
+              <div className="text-center">
+                <span className="text-[10px] font-black text-white block leading-tight">Break</span>
+                <span className="text-[10px] font-black text-white block leading-tight">Pilot</span>
               </div>
-            )}
-            {bridgeVariant === 'B' && (
-              /* Variant B: Infinity Loop */
-              <div className="relative w-28 h-16 flex items-center justify-center">
-                <svg viewBox="0 0 120 50" className="w-full h-full">
-                  <path d="M60,25 C60,10 40,0 25,10 C10,20 10,30 25,40 C40,50 60,40 60,25 C60,10 80,0 95,10 C110,20 110,30 95,40 C80,50 60,40 60,25" fill="none" stroke="url(#inf-grad)" strokeWidth="2" strokeDasharray="4 2" className="animate-[dash_3s_linear_infinite]" />
-                  <defs>
-                    <linearGradient id="inf-grad" x1="0%" y1="0%" x2="100%" y2="0%">
-                      <stop offset="0%" stopColor="#6366f1" />
-                      <stop offset="100%" stopColor="#a855f7" />
-                    </linearGradient>
-                  </defs>
-                  <circle cx="60" cy="25" r="14" fill="url(#inf-grad)" />
-                  <text x="60" y="23" textAnchor="middle" fill="white" fontSize="6" fontWeight="bold">Break</text>
-                  <text x="60" y="30" textAnchor="middle" fill="white" fontSize="6" fontWeight="bold">Pilot</text>
-                </svg>
-              </div>
-            )}
-            {bridgeVariant === 'C' && (
-              /* Variant C: Hexagonal Hub with arrows */
-              <div className="relative">
-                <div className="w-20 h-20 bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg shadow-indigo-500/30" style={{ clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)' }}>
-                  <div className="text-center">
-                    <span className="text-[8px] font-black text-white block leading-tight">Break</span>
-                    <span className="text-[8px] font-black text-white block leading-tight">Pilot</span>
-                    <span className="text-[6px] text-white/60 block mt-0.5">COMPLAI</span>
-                  </div>
-                </div>
-                {/* Left arrow */}
-                <div className="absolute top-1/2 -left-3 -translate-y-1/2 text-indigo-400">&#x25C0;</div>
-                {/* Right arrow */}
-                <div className="absolute top-1/2 -right-3 -translate-y-1/2 text-purple-400">&#x25B6;</div>
-              </div>
-            )}
-            {/* Variant toggle — small buttons below */}
-            <div className="flex gap-1 mt-2">
-              {(['A', 'B', 'C'] as BridgeVariant[]).map(v => (
-                <button
-                  key={v}
-                  onClick={() => setBridgeVariant(v)}
-                  className={`w-5 h-5 rounded text-[9px] font-bold transition-all ${bridgeVariant === v ? 'bg-indigo-500 text-white' : 'bg-white/10 text-white/30 hover:text-white/60'}`}
-                >
-                  {v}
-                </button>
-              ))}
             </div>
           </div>
 
-          {/* Right: Code */}
-          <div className="col-span-2">
-            <GlassCard hover={false} className="p-4">
-              <div className="flex items-center gap-2 mb-3">
-                <div className="w-8 h-8 rounded-lg bg-purple-500/10 border border-purple-500/20 flex items-center justify-center">
-                  <bridgeRight.icon className="w-4 h-4 text-purple-400" />
-                </div>
-                <p className="text-sm font-bold text-white">{bridgeRight.label}</p>
-              </div>
-              <ul className="space-y-1.5">
-                {bridgeRight.items.map((item, idx) => (
-                  <li key={idx} className="flex items-center gap-2 text-xs text-white/50">
-                    <span className="w-1.5 h-1.5 rounded-full bg-purple-400 shrink-0" />
-                    {item}
-                  </li>
-                ))}
-              </ul>
-            </GlassCard>
+          {/* Left half: Compliance & Audits */}
+          <div className="absolute left-1/2 top-1/2 -translate-x-[190px] -translate-y-1/2 w-[130px]">
+            <div className="flex items-center gap-1.5 mb-2">
+              <FileCheck className="w-3.5 h-3.5 text-indigo-400" />
+              <span className="text-[11px] font-bold text-indigo-400">Compliance</span>
+            </div>
+            <ul className="space-y-1.5">
+              {complianceItems.map((item, idx) => (
+                <li key={idx} className="flex items-start gap-1.5 text-[10px] text-white/50 leading-tight">
+                  <span className="w-1 h-1 rounded-full bg-indigo-400 mt-1 shrink-0" />
+                  {item}
+                </li>
+              ))}
+            </ul>
           </div>
-        </div>
-      </FadeInView>
 
-      {/* Capability Cards */}
-      <FadeInView delay={0.4}>
-        <div className="grid md:grid-cols-2 gap-3 max-w-4xl mx-auto">
-          {capabilities.map((cap, idx) => {
-            const Icon = cap.icon
-            return (
-              <div key={idx} className={`border rounded-xl p-4 ${cap.bg}`}>
-                <div className="flex items-center gap-2 mb-2">
-                  <Icon className={`w-4 h-4 ${cap.color}`} />
-                  <h3 className="text-sm font-bold text-white">{cap.title}</h3>
-                </div>
-                <p className="text-xs text-white/50 leading-relaxed">{cap.desc}</p>
+          {/* Right half: Code & Security */}
+          <div className="absolute left-1/2 top-1/2 translate-x-[60px] -translate-y-1/2 w-[130px]">
+            <div className="flex items-center gap-1.5 mb-2">
+              <Code className="w-3.5 h-3.5 text-purple-400" />
+              <span className="text-[11px] font-bold text-purple-400">Code & Security</span>
+            </div>
+            <ul className="space-y-1.5">
+              {codeItems.map((item, idx) => (
+                <li key={idx} className="flex items-start gap-1.5 text-[10px] text-white/50 leading-tight">
+                  <span className="w-1 h-1 rounded-full bg-purple-400 mt-1 shrink-0" />
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Connecting arrows inside circle */}
+          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+            <div className="absolute left-1/2 top-1/2 -translate-x-[48px] -translate-y-1/2 text-indigo-400/40 text-lg">&#x25C0;</div>
+            <div className="absolute left-1/2 top-1/2 translate-x-[38px] -translate-y-1/2 text-purple-400/40 text-lg">&#x25B6;</div>
+            <div className="absolute left-1/2 top-1/2 -translate-x-[5px] -translate-y-[48px] text-white/20 text-lg">&#x25B2;</div>
+            <div className="absolute left-1/2 top-1/2 -translate-x-[5px] translate-y-[32px] text-white/20 text-lg">&#x25BC;</div>
+          </div>
+
+          {/* Outer capability cards — 4 corners */}
+          {/* Top Left */}
+          <div className="absolute top-0 left-0 w-[180px]">
+            <div className={`border ${outerCapabilities[0].border} ${outerCapabilities[0].bg} rounded-xl p-3`}>
+              <div className="flex items-center gap-1.5 mb-1">
+                <outerCapabilities[0].icon className={`w-3.5 h-3.5 ${outerCapabilities[0].color}`} />
+                <span className={`text-[11px] font-bold ${outerCapabilities[0].color}`}>{outerCapabilities[0].label}</span>
               </div>
-            )
-          })}
+              <p className="text-[10px] text-white/40 leading-tight">{outerCapabilities[0].desc}</p>
+            </div>
+            {/* Connector line */}
+            <div className="absolute bottom-0 right-0 w-8 h-8 border-b border-r border-white/10 rounded-br-xl translate-x-4 translate-y-4" />
+          </div>
+
+          {/* Top Right */}
+          <div className="absolute top-0 right-0 w-[180px]">
+            <div className={`border ${outerCapabilities[1].border} ${outerCapabilities[1].bg} rounded-xl p-3`}>
+              <div className="flex items-center gap-1.5 mb-1">
+                <outerCapabilities[1].icon className={`w-3.5 h-3.5 ${outerCapabilities[1].color}`} />
+                <span className={`text-[11px] font-bold ${outerCapabilities[1].color}`}>{outerCapabilities[1].label}</span>
+              </div>
+              <p className="text-[10px] text-white/40 leading-tight">{outerCapabilities[1].desc}</p>
+            </div>
+          </div>
+
+          {/* Bottom Left */}
+          <div className="absolute bottom-0 left-0 w-[180px]">
+            <div className={`border ${outerCapabilities[2].border} ${outerCapabilities[2].bg} rounded-xl p-3`}>
+              <div className="flex items-center gap-1.5 mb-1">
+                <outerCapabilities[2].icon className={`w-3.5 h-3.5 ${outerCapabilities[2].color}`} />
+                <span className={`text-[11px] font-bold ${outerCapabilities[2].color}`}>{outerCapabilities[2].label}</span>
+              </div>
+              <p className="text-[10px] text-white/40 leading-tight">{outerCapabilities[2].desc}</p>
+            </div>
+          </div>
+
+          {/* Bottom Right */}
+          <div className="absolute bottom-0 right-0 w-[180px]">
+            <div className={`border ${outerCapabilities[3].border} ${outerCapabilities[3].bg} rounded-xl p-3`}>
+              <div className="flex items-center gap-1.5 mb-1">
+                <outerCapabilities[3].icon className={`w-3.5 h-3.5 ${outerCapabilities[3].color}`} />
+                <span className={`text-[11px] font-bold ${outerCapabilities[3].color}`}>{outerCapabilities[3].label}</span>
+              </div>
+              <p className="text-[10px] text-white/40 leading-tight">{outerCapabilities[3].desc}</p>
+            </div>
+          </div>
+
+          {/* Dashed connection lines from corners to circle */}
+          <svg className="absolute inset-0 w-full h-full pointer-events-none" viewBox="0 0 800 420">
+            <line x1="180" y1="60" x2="310" y2="160" stroke="rgba(99,102,241,0.2)" strokeWidth="1" strokeDasharray="4 4" />
+            <line x1="620" y1="60" x2="490" y2="160" stroke="rgba(168,85,247,0.2)" strokeWidth="1" strokeDasharray="4 4" />
+            <line x1="180" y1="360" x2="310" y2="260" stroke="rgba(245,158,11,0.2)" strokeWidth="1" strokeDasharray="4 4" />
+            <line x1="620" y1="360" x2="490" y2="260" stroke="rgba(16,185,129,0.2)" strokeWidth="1" strokeDasharray="4 4" />
+          </svg>
         </div>
       </FadeInView>
     </div>

pitch-deck/lib/i18n.ts

@@ -13,6 +13,7 @@ const translations = {
       'Cover',
       'Das Problem',
       'Die Lösung',
+      'USP',
       'Regulatorische Landschaft',
       'Modularer Baukasten',
       'So funktioniert\'s',
@@ -308,6 +309,7 @@ const translations = {
       'Cover',
       'The Problem',
       'The Solution',
+      'USP',
       'Regulatory Landscape',
       'Modular Toolkit',
       'How It Works',