From 40d234208684d686abc1a162657fdde9c858f3a6 Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBook-Pro.local>
Date: Wed, 15 Apr 2026 13:14:03 +0200
Subject: [PATCH] fix(pitch-deck): fix JSX syntax error in USPSlide corner
 cards

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 pitch-deck/components/slides/USPSlide.tsx | 61 +++++++----------------
 1 file changed, 17 insertions(+), 44 deletions(-)

diff --git a/pitch-deck/components/slides/USPSlide.tsx b/pitch-deck/components/slides/USPSlide.tsx
index 109cac1..085942d 100644
--- a/pitch-deck/components/slides/USPSlide.tsx
+++ b/pitch-deck/components/slides/USPSlide.tsx
@@ -146,51 +146,24 @@ export default function USPSlide({ lang }: USPSlideProps) {
           </div>
 
           {/* Outer capability cards — 4 corners */}
-          {/* Top Left */}
-          <div className="absolute top-0 left-0 w-[180px]">
-            <div className={`border ${outerCapabilities[0].border} ${outerCapabilities[0].bg} rounded-xl p-3`}>
-              <div className="flex items-center gap-1.5 mb-1">
-                <outerCapabilities[0].icon className={`w-3.5 h-3.5 ${outerCapabilities[0].color}`} />
-                <span className={`text-[11px] font-bold ${outerCapabilities[0].color}`}>{outerCapabilities[0].label}</span>
+          {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 (
+              <div key={idx} className={`absolute ${posClass} w-[180px]`}>
+                <div className={`border ${cap.border} ${cap.bg} rounded-xl p-3`}>
+                  <div className="flex items-center gap-1.5 mb-1">
+                    <Icon className={`w-3.5 h-3.5 ${cap.color}`} />
+                    <span className={`text-[11px] font-bold ${cap.color}`}>{cap.label}</span>
+                  </div>
+                  <p className="text-[10px] text-white/40 leading-tight">{cap.desc}</p>
+                </div>
               </div>
-              <p className="text-[10px] text-white/40 leading-tight">{outerCapabilities[0].desc}</p>
-            </div>
-            {/* Connector line */}
-            <div className="absolute bottom-0 right-0 w-8 h-8 border-b border-r border-white/10 rounded-br-xl translate-x-4 translate-y-4" />
-          </div>
-
-          {/* Top Right */}
-          <div className="absolute top-0 right-0 w-[180px]">
-            <div className={`border ${outerCapabilities[1].border} ${outerCapabilities[1].bg} rounded-xl p-3`}>
-              <div className="flex items-center gap-1.5 mb-1">
-                <outerCapabilities[1].icon className={`w-3.5 h-3.5 ${outerCapabilities[1].color}`} />
-                <span className={`text-[11px] font-bold ${outerCapabilities[1].color}`}>{outerCapabilities[1].label}</span>
-              </div>
-              <p className="text-[10px] text-white/40 leading-tight">{outerCapabilities[1].desc}</p>
-            </div>
-          </div>
-
-          {/* Bottom Left */}
-          <div className="absolute bottom-0 left-0 w-[180px]">
-            <div className={`border ${outerCapabilities[2].border} ${outerCapabilities[2].bg} rounded-xl p-3`}>
-              <div className="flex items-center gap-1.5 mb-1">
-                <outerCapabilities[2].icon className={`w-3.5 h-3.5 ${outerCapabilities[2].color}`} />
-                <span className={`text-[11px] font-bold ${outerCapabilities[2].color}`}>{outerCapabilities[2].label}</span>
-              </div>
-              <p className="text-[10px] text-white/40 leading-tight">{outerCapabilities[2].desc}</p>
-            </div>
-          </div>
-
-          {/* Bottom Right */}
-          <div className="absolute bottom-0 right-0 w-[180px]">
-            <div className={`border ${outerCapabilities[3].border} ${outerCapabilities[3].bg} rounded-xl p-3`}>
-              <div className="flex items-center gap-1.5 mb-1">
-                <outerCapabilities[3].icon className={`w-3.5 h-3.5 ${outerCapabilities[3].color}`} />
-                <span className={`text-[11px] font-bold ${outerCapabilities[3].color}`}>{outerCapabilities[3].label}</span>
-              </div>
-              <p className="text-[10px] text-white/40 leading-tight">{outerCapabilities[3].desc}</p>
-            </div>
-          </div>
+            )
+          })}
 
           {/* Dashed connection lines from corners to circle */}
           <svg className="absolute inset-0 w-full h-full pointer-events-none" viewBox="0 0 800 420">