From bd37ff807ef5cb29c5e232818c41daabe1491300 Mon Sep 17 00:00:00 2001 From: Benjamin Admin Date: Wed, 15 Apr 2026 13:25:03 +0200 Subject: [PATCH] =?UTF-8?q?fix(pitch-deck):=20USP=20slide=20complete=20red?= =?UTF-8?q?esign=20=E2=80=94=20grid=20layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace broken absolute positioning with clean grid layout: - Top: Compliance card | BreakPilot hub (spinning) | Code card - Arrows + sync labels between cards - Bottom: 4 capability cards in a row - No more floating text, no overlapping elements Co-Authored-By: Claude Opus 4.6 (1M context) --- pitch-deck/components/slides/USPSlide.tsx | 185 +++++++++++----------- 1 file changed, 93 insertions(+), 92 deletions(-) diff --git a/pitch-deck/components/slides/USPSlide.tsx b/pitch-deck/components/slides/USPSlide.tsx index 085942d..7159a89 100644 --- a/pitch-deck/components/slides/USPSlide.tsx +++ b/pitch-deck/components/slides/USPSlide.tsx @@ -3,6 +3,7 @@ import { Language } from '@/lib/types' import GradientText from '../ui/GradientText' import FadeInView from '../ui/FadeInView' +import GlassCard from '../ui/GlassCard' import { FileCheck, Code, @@ -10,6 +11,9 @@ import { Shield, GitPullRequest, ArrowLeftRight, + ArrowRight, + ArrowDown, + RotateCw, } from 'lucide-react' interface USPSlideProps { @@ -32,146 +36,143 @@ export default function USPSlide({ lang }: USPSlideProps) { ? ['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 outerCapabilities = [ + const capabilities = [ { icon: GitPullRequest, color: 'text-indigo-400', - border: 'border-indigo-500/30', + border: 'border-indigo-500/20', 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', + desc: de ? 'Kunden-Dokumente automatisch gegen Code prüfen' : 'Verify customer docs against code automatically', }, { icon: ArrowLeftRight, color: 'text-purple-400', - border: 'border-purple-500/30', + border: 'border-purple-500/20', bg: 'bg-purple-500/10', label: de ? 'Bidirektional' : 'Bidirectional', - desc: de ? 'Code ↔ Docs synchronisiert' : 'Code ↔ Docs synchronized', - position: 'top-right', + desc: de ? 'Code ↔ Compliance-Docs immer synchron' : 'Code ↔ Compliance docs always in sync', }, { icon: Zap, color: 'text-amber-400', - border: 'border-amber-500/30', + border: 'border-amber-500/20', bg: 'bg-amber-500/10', label: de ? 'Prozess-Compliance' : 'Process Compliance', - desc: de ? 'Finding → Ticket → Fix automatisch' : 'Finding → Ticket → Fix automatic', - position: 'bottom-left', + desc: de ? 'Finding → Ticket → Fix vollautomatisch' : 'Finding → Ticket → Fix fully automatic', }, { icon: Shield, color: 'text-emerald-400', - border: 'border-emerald-500/30', + border: 'border-emerald-500/20', bg: 'bg-emerald-500/10', label: de ? 'Kontinuierlich' : 'Continuous', - desc: de ? 'Bei jeder Code-Änderung' : 'On every code change', - position: 'bottom-right', + desc: de ? 'Bei jeder Code-Änderung, nicht jährlich' : 'On every code change, not annually', }, ] return (
-

+

{title}

{subtitle}

 + {/* Main bridge: Compliance ← BreakPilot → Code */} -
- - {/* Outer rotating ring */} -
-
-
- - {/* Inner solid ring */} -
-
+
+ {/* Left: Compliance */} +
+ +
+
+ +
+ Compliance & Audits +
+
    + {complianceItems.map((item, idx) => ( +
  • + + {item} +
    • + ))} +
+
{/* Center: BreakPilot Hub */} -
-
-
- Break - Pilot +
+ {/* Arrow left */} +
+ + {de ? 'synchron' : 'sync'} + +
+ + {/* Spinning ring + hub */} +
+
+
+
+
+ Break + Pilot +
-
- {/* Left half: Compliance & Audits */} -
-
- - Compliance + {/* Cycle indicator */} +
+ + {de ? 'Kreislauf' : 'Loop'}
-
    - {complianceItems.map((item, idx) => ( -
  • - - {item} -
    • - ))} -
- {/* Right half: Code & Security */} -
-
- - Code & Security -
-
    - {codeItems.map((item, idx) => ( -
  • - - {item} -
    • - ))} -
-
- - {/* Connecting arrows inside circle */} -
-
◀
-
▶
-
▲
-
▼
-
- - {/* Outer capability cards — 4 corners */} - {outerCapabilities.map((cap, idx) => { - const Icon = cap.icon - const posClass = idx === 0 ? 'top-0 left-0' - : idx === 1 ? 'top-0 right-0' - : idx === 2 ? 'bottom-0 left-0' - : 'bottom-0 right-0' - return ( -
-
-
- - {cap.label} -
-

{cap.desc}

+ {/* Right: Code & Security */} +
+ +
+
+
+ Code & Security +
+
    + {codeItems.map((item, idx) => ( +
  • + + {item} +
    • + ))} +
+ +
+
+ + + {/* Arrow down */} + + + + + {/* Bottom: 4 capability cards */} + +
+ {capabilities.map((cap, idx) => { + const Icon = cap.icon + return ( +
+
+ + {cap.label} +
+

{cap.desc}

) })} - - {/* Dashed connection lines from corners to circle */} - - - - - -