From 801a5a43f5746ea752fa2efa92886ea2c3cf8d81 Mon Sep 17 00:00:00 2001 From: Benjamin Admin Date: Wed, 15 Apr 2026 14:33:28 +0200 Subject: [PATCH] =?UTF-8?q?feat(pitch-deck):=20USP=20slide=20=E2=80=94=20l?= =?UTF-8?q?arger=20circle,=20title=20back,=20infinity=20hub?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - USP as slide title (GradientText) above - Circle doubled to 380px with spinning ring - Infinity symbol (∞) in center hub instead of text - Compliance left, Code right inside circle — larger font - 4 cards in corners (220px wide, larger text, ~5 lines each) - Cards spread to corners (top/bottom, left/right) - Dashed SVG lines connecting circle to cards Co-Authored-By: Claude Opus 4.6 (1M context) --- pitch-deck/components/slides/USPSlide.tsx | 200 ++++++++++++---------- 1 file changed, 114 insertions(+), 86 deletions(-) diff --git a/pitch-deck/components/slides/USPSlide.tsx b/pitch-deck/components/slides/USPSlide.tsx index d418ca6..613ecd7 100644 --- a/pitch-deck/components/slides/USPSlide.tsx +++ b/pitch-deck/components/slides/USPSlide.tsx @@ -76,105 +76,133 @@ export default function USPSlide({ lang }: USPSlideProps) { return (
- -

{subtitle}

+ {/* Title */} + +

+ USP +

+

{subtitle}

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

{cap.desc}

-
- ) - })} -
+ {/* ===== CENTER: Large circle ===== */} +
- {/* Center: Large circle with spinning ring */} -
-
+ {/* Outer spinning dashed ring */} +
- {/* Outer spinning dashed ring */} -
+ {/* Inner ring */} +
- {/* Inner solid ring */} -
- - {/* Center hub: USP */} -
-
- USP -
+ {/* Center hub: Infinity symbol */} +
+
+ ∞
- - {/* 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 */} -
▶
+ + {/* Left half: Compliance */} +
+
+ + Compliance +
+
    + {complianceItems.map((item, idx) => ( +
  • + + {item} +
    • + ))} +
+
+ + {/* Right half: Code */} +
+
+ + Code & Security +
+
    + {codeItems.map((item, idx) => ( +
  • + + {item} +
    • + ))} +
+
+ + {/* 4 directional arrows */} +
◀
+
▶
+
◀
+
▶
- {/* Right column: 2 cards */} -
- {capabilities.slice(2, 4).map((cap, idx) => { - const Icon = cap.icon - return ( -
-
- - {cap.label} -
-

{cap.desc}

+ {/* ===== CARDS: 4 corners, spread out ===== */} + + {/* Top Left */} +
+ {(() => { const Icon = capabilities[0].icon; const cap = capabilities[0]; return ( +
+
+ + {cap.label}
- ) - })} +

{cap.desc}

+
+ )})()}
+ + {/* Top Right */} +
+ {(() => { const Icon = capabilities[1].icon; const cap = capabilities[1]; return ( +
+
+ + {cap.label} +
+

{cap.desc}

+
+ )})()} +
+ + {/* Bottom Left */} +
+ {(() => { const Icon = capabilities[2].icon; const cap = capabilities[2]; return ( +
+
+ + {cap.label} +
+

{cap.desc}

+
+ )})()} +
+ + {/* Bottom Right */} +
+ {(() => { const Icon = capabilities[3].icon; const cap = capabilities[3]; return ( +
+
+ + {cap.label} +
+

{cap.desc}

+
+ )})()} +
+ + {/* Dashed connection lines from circle to cards */} + + + + + +