From 1b5ccd4dec16735028c84e7564e0793f56dab3ba Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBook-Pro.local>
Date: Wed, 15 Apr 2026 12:57:30 +0200
Subject: [PATCH] feat(pitch-deck): solution text fixes + USP bridge 3 variants
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Solution: 30k → 15k+ EUR per year per application
- Solution: DE oder FR → Deutschland
- USP title: Unser USP → USP
- USP bridge: 3 switchable variants (A: circular loop,
  B: infinity loop, C: hexagonal hub) with toggle buttons

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 pitch-deck/components/slides/USPSlide.tsx | 73 ++++++++++++++++++++---
 pitch-deck/lib/i18n.ts                    |  8 +--
 2 files changed, 70 insertions(+), 11 deletions(-)

diff --git a/pitch-deck/components/slides/USPSlide.tsx b/pitch-deck/components/slides/USPSlide.tsx
index d1b2afd..b17bad6 100644
--- a/pitch-deck/components/slides/USPSlide.tsx
+++ b/pitch-deck/components/slides/USPSlide.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { useState } from 'react'
 import { Language } from '@/lib/types'
 import GradientText from '../ui/GradientText'
 import FadeInView from '../ui/FadeInView'
@@ -17,10 +18,13 @@ 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 = de ? 'Unser USP' : 'Our USP'
+  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'
@@ -112,14 +116,69 @@ export default function USPSlide({ lang }: USPSlideProps) {
             </GlassCard>
           </div>
 
-          {/* Center: Bridge */}
+          {/* Center: Bridge — 3 variants to choose from */}
           <div className="col-span-1 flex flex-col items-center justify-center">
-            <div className="w-14 h-14 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg shadow-indigo-500/30 mb-2">
-              <ArrowLeftRight className="w-6 h-6 text-white" />
+            {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>
+              </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>
-            <p className="text-[10px] font-bold text-white/40 uppercase tracking-wider text-center">
-              {de ? 'Brücke' : 'Bridge'}
-            </p>
           </div>
 
           {/* Right: Code */}
diff --git a/pitch-deck/lib/i18n.ts b/pitch-deck/lib/i18n.ts
index 07b4513..db628d0 100644
--- a/pitch-deck/lib/i18n.ts
+++ b/pitch-deck/lib/i18n.ts
@@ -95,7 +95,7 @@ const translations = {
       pillars: [
         {
           title: 'Kontinuierliche Code-Security',
-          desc: 'SAST, DAST, SBOM und Pentesting bei jeder Code-Änderung — nicht einmal im Jahr. Findings direkt als Tickets im Issue-Tracker deiner Wahl, mit Implementierungsvorschlägen. 30.000+ EUR/Jahr Pentest-Kosten gespart.',
+          desc: 'SAST, DAST, SBOM und Pentesting bei jeder Code-Änderung — nicht einmal im Jahr. Findings direkt als Tickets im Issue-Tracker deiner Wahl, mit Implementierungsvorschlägen. 15.000+ EUR pro Jahr und Anwendung an Pentest-Kosten gespart.',
           icon: 'scan',
         },
         {
@@ -105,7 +105,7 @@ const translations = {
         },
         {
           title: 'Deutsche Cloud, volle Integration',
-          desc: 'BSI-zertifizierte Cloud in DE oder FR. Live-Support über Jitsi (Video) und Matrix (Chat). Keine US-SaaS im Source Code. Optional Mac Mini/Studio für maximale Privacy.',
+          desc: 'BSI-zertifizierte Cloud in Deutschland. Live-Support über Jitsi (Video) und Matrix (Chat). Keine US-SaaS im Source Code. Optional Mac Mini/Studio für maximale Privacy.',
           icon: 'server',
         },
       ],
@@ -390,7 +390,7 @@ const translations = {
       pillars: [
         {
           title: 'Continuous Code Security',
-          desc: 'SAST, DAST, SBOM and pentesting on every code change — not once a year. Findings as tickets in the issue tracker of your choice, with implementation suggestions. EUR 30,000+/year pentest costs saved.',
+          desc: 'SAST, DAST, SBOM and pentesting on every code change — not once a year. Findings as tickets in the issue tracker of your choice, with implementation suggestions. EUR 15,000+ per year per application in pentest costs saved.',
           icon: 'scan',
         },
         {
@@ -400,7 +400,7 @@ const translations = {
         },
         {
           title: 'German Cloud, Full Integration',
-          desc: 'BSI-certified cloud in DE or FR. Live support via Jitsi (video) and Matrix (chat). No US SaaS in source code. Optional Mac Mini/Studio for maximum privacy.',
+          desc: 'BSI-certified cloud in Germany. Live support via Jitsi (video) and Matrix (chat). No US SaaS in source code. Optional Mac Mini/Studio for maximum privacy.',
           icon: 'server',
         },
       ],