From adf3bf8301268f8bd43d93d20e5acd8cf8af2bec Mon Sep 17 00:00:00 2001 From: Benjamin Admin Date: Wed, 15 Apr 2026 13:04:06 +0200 Subject: [PATCH] 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) --- pitch-deck/app/api/chat/route.ts | 1 + pitch-deck/components/slides/USPSlide.tsx | 297 ++++++++++------------ pitch-deck/lib/i18n.ts | 2 + 3 files changed, 142 insertions(+), 158 deletions(-) diff --git a/pitch-deck/app/api/chat/route.ts b/pitch-deck/app/api/chat/route.ts index 7986cc4..9d8fc06 100644 --- a/pitch-deck/app/api/chat/route.ts +++ b/pitch-deck/app/api/chat/route.ts @@ -12,6 +12,7 @@ const SLIDE_DISPLAY_NAMES: Record = { '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' }, diff --git a/pitch-deck/components/slides/USPSlide.tsx b/pitch-deck/components/slides/USPSlide.tsx index b17bad6..109cac1 100644 --- a/pitch-deck/components/slides/USPSlide.tsx +++ b/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('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 (
- +

{title}

-

{subtitle}

+

{subtitle}

 - {/* Bridge Visualization */} -
- {/* Left: Compliance */} -
- -
-
- -
-

{bridgeLeft.label}

-
-
    - {bridgeLeft.items.map((item, idx) => ( -
  • - - {item} -
    • - ))} -
- +
+ + {/* Outer rotating ring */} +
+
- {/* Center: Bridge — 3 variants to choose from */} -
- {bridgeVariant === 'A' && ( - /* Variant A: Circular Loop with BreakPilot in center */ -
- {/* Rotating ring */} -
- {/* Arrows on ring */} -
▲
-
▼
-
◀
-
▶
- {/* Center hub */} -
- Break
Pilot -
+ {/* Inner solid ring */} +
+
+
+ + {/* Center: BreakPilot Hub */} +
+
+
+ Break + Pilot
- )} - {bridgeVariant === 'B' && ( - /* Variant B: Infinity Loop */ -
- - - - - - - - - - Break - Pilot - -
- )} - {bridgeVariant === 'C' && ( - /* Variant C: Hexagonal Hub with arrows */ -
-
-
- Break - Pilot - COMPLAI -
-
- {/* Left arrow */} -
◀
- {/* Right arrow */} -
▶
-
- )} - {/* Variant toggle — small buttons below */} -
- {(['A', 'B', 'C'] as BridgeVariant[]).map(v => ( - - ))}
- {/* Right: Code */} -
- -
-
- -
-

{bridgeRight.label}

-
-
    - {bridgeRight.items.map((item, idx) => ( -
  • - - {item} -
    • - ))} -
- + {/* Left half: Compliance & Audits */} +
+
+ + Compliance +
+
    + {complianceItems.map((item, idx) => ( +
  • + + {item} +
    • + ))} +
-
- - {/* Capability Cards */} - -
- {capabilities.map((cap, idx) => { - const Icon = cap.icon - return ( -
-
- -

{cap.title}

-
-

{cap.desc}

+ {/* Right half: Code & Security */} +
+
+ + Code & Security +
+
    + {codeItems.map((item, idx) => ( +
  • + + {item} +
    • + ))} +
+
+ + {/* Connecting arrows inside circle */} +
+
◀
+
▶
+
▲
+
▼
+
+ + {/* Outer capability cards — 4 corners */} + {/* Top Left */} +
+
+
+ + {outerCapabilities[0].label}
- ) - })} +

{outerCapabilities[0].desc}

+
+ {/* Connector line */} +
+
+ + {/* Top Right */} +
+
+
+ + {outerCapabilities[1].label} +
+

{outerCapabilities[1].desc}

+
+
+ + {/* Bottom Left */} +
+
+
+ + {outerCapabilities[2].label} +
+

{outerCapabilities[2].desc}

+
+
+ + {/* Bottom Right */} +
+
+
+ + {outerCapabilities[3].label} +
+

{outerCapabilities[3].desc}

+
+
+ + {/* Dashed connection lines from corners to circle */} + + + + + +
diff --git a/pitch-deck/lib/i18n.ts b/pitch-deck/lib/i18n.ts index db628d0..44f961d 100644 --- a/pitch-deck/lib/i18n.ts +++ b/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',