From 9c23068a4f1e8ad5191c08980dfa6bec99726710 Mon Sep 17 00:00:00 2001 From: Benjamin Admin Date: Wed, 15 Apr 2026 14:26:59 +0200 Subject: [PATCH] =?UTF-8?q?feat(pitch-deck):=20USP=20slide=20=E2=80=94=20l?= =?UTF-8?q?arge=20circle=20with=20cards=20on=20sides?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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) --- pitch-deck/components/slides/USPSlide.tsx | 196 +++++++++++----------- 1 file changed, 99 insertions(+), 97 deletions(-) diff --git a/pitch-deck/components/slides/USPSlide.tsx b/pitch-deck/components/slides/USPSlide.tsx index 7159a89..d418ca6 100644 --- a/pitch-deck/components/slides/USPSlide.tsx +++ b/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 (
- -

- {title} -

+

{subtitle}

 - {/* Main bridge: Compliance ← BreakPilot → Code */} -
- {/* Left: Compliance */} -
- -
-
- +
+ + {/* Left column: 2 cards */} +
+ {capabilities.slice(0, 2).map((cap, idx) => { + const Icon = cap.icon + return ( +
+
+ + {cap.label} +
+

{cap.desc}

- Compliance & Audits -
-
    - {complianceItems.map((item, idx) => ( -
  • - - {item} -
    • - ))} -
- + ) + })}
- {/* Center: BreakPilot Hub */} -
- {/* Arrow left */} -
- - {de ? 'synchron' : 'sync'} - -
+ {/* Center: Large circle with spinning ring */} +
+
- {/* Spinning ring + hub */} -
-
-
-
-
- Break - Pilot + {/* Outer spinning dashed ring */} +
+ + {/* Inner solid ring */} +
+ + {/* Center hub: USP */} +
+
+ USP
-
- {/* Cycle indicator */} -
- - {de ? 'Kreislauf' : 'Loop'} + {/* Left half: Compliance & Audits */} +
+
+ + Compliance +
+
    + {complianceItems.map((item, idx) => ( +
  • + + {item} +
    • + ))} +
+
+ + {/* Right half: Code & Security */} +
+
+ + Code +
+
    + {codeItems.map((item, idx) => ( +
  • + + {item} +
    • + ))} +
+
+ + {/* 4 directional arrows pointing outward to the cards */} + {/* Top-left arrow */} +
◀
+ {/* Top-right arrow */} +
▶
+ {/* Bottom-left arrow */} +
◀
+ {/* Bottom-right arrow */} +
▶
- {/* Right: Code & Security */} -
- -
-
- + {/* Right column: 2 cards */} +
+ {capabilities.slice(2, 4).map((cap, idx) => { + const Icon = cap.icon + return ( +
+
+ + {cap.label} +
+

{cap.desc}

- 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}

-
- ) - })} -
-
) }