feat(pitch-deck): USP slide — larger circle, title back, infinity hub

- 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) <noreply@anthropic.com>

pitch-deck/components/slides/USPSlide.tsx

@@ -76,105 +76,133 @@ export default function USPSlide({ lang }: USPSlideProps) {
 
   return (
     <div>
-      <FadeInView className="text-center mb-4">
+      {/* Title */}
-        <p className="text-base text-white/50 max-w-3xl mx-auto">{subtitle}</p>
+      <FadeInView className="text-center mb-2">
+        <h2 className="text-4xl md:text-5xl font-bold mb-1">
+          <GradientText>USP</GradientText>
+        </h2>
+        <p className="text-sm text-white/50 max-w-3xl mx-auto">{subtitle}</p>
       </FadeInView>
 
       <FadeInView delay={0.2}>
-        <div className="grid grid-cols-12 gap-3 max-w-6xl mx-auto items-center">
+        <div className="relative max-w-6xl mx-auto" style={{ height: '480px' }}>
 
-          {/* Left column: 2 cards */}
+          {/* ===== CENTER: Large circle ===== */}
-          <div className="col-span-3 space-y-3">
+          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" style={{ width: '380px', height: '380px' }}>
-            {capabilities.slice(0, 2).map((cap, idx) => {
-              const Icon = cap.icon
-              return (
-                <div key={idx} className={`border ${cap.border} ${cap.bg} rounded-xl p-3`}>
-                  <div className="flex items-center gap-1.5 mb-1.5">
-                    <Icon className={`w-4 h-4 ${cap.color}`} />
-                    <span className={`text-xs font-bold ${cap.color}`}>{cap.label}</span>
-                  </div>
-                  <p className="text-[10px] text-white/45 leading-relaxed">{cap.desc}</p>
-                </div>
-              )
-            })}
-          </div>
 
-          {/* Center: Large circle with spinning ring */}
+            {/* Outer spinning dashed ring */}
-          <div className="col-span-6 flex items-center justify-center">
+            <div className="absolute inset-0 rounded-full border-2 border-dashed border-indigo-500/20 animate-[spin_20s_linear_infinite]" />
-            <div className="relative" style={{ width: '320px', height: '320px' }}>
 
-              {/* Outer spinning dashed ring */}
+            {/* Inner ring */}
-              <div className="absolute inset-0 rounded-full border-2 border-dashed border-indigo-500/20 animate-[spin_20s_linear_infinite]" />
+            <div className="absolute inset-4 rounded-full border border-white/[0.06] bg-white/[0.015]" />
 
-              {/* Inner solid ring */}
+            {/* Center hub: Infinity symbol */}
-              <div className="absolute inset-3 rounded-full border border-white/[0.06] bg-white/[0.015]" />
+            <div className="absolute inset-0 flex items-center justify-center z-10">
-
+              <div className="w-20 h-20 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-xl shadow-indigo-500/30">
-              {/* Center hub: USP */}
+                <span className="text-3xl font-black text-white">&#x221E;</span>
-              <div className="absolute inset-0 flex items-center justify-center z-10">
-                <div className="w-16 h-16 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-xl shadow-indigo-500/30">
-                  <span className="text-sm font-black text-white">USP</span>
-                </div>
               </div>
-
-              {/* Left half: Compliance & Audits */}
-              <div className="absolute left-6 top-1/2 -translate-y-1/2 w-[100px] z-10">
-                <div className="flex items-center gap-1 mb-1.5">
-                  <FileCheck className="w-3 h-3 text-indigo-400" />
-                  <span className="text-[10px] font-bold text-indigo-400">Compliance</span>
-                </div>
-                <ul className="space-y-1">
-                  {complianceItems.map((item, idx) => (
-                    <li key={idx} className="flex items-center gap-1 text-[9px] text-white/50">
-                      <span className="w-1 h-1 rounded-full bg-indigo-400 shrink-0" />
-                      {item}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-
-              {/* Right half: Code & Security */}
-              <div className="absolute right-6 top-1/2 -translate-y-1/2 w-[100px] z-10">
-                <div className="flex items-center gap-1 mb-1.5">
-                  <Code className="w-3 h-3 text-purple-400" />
-                  <span className="text-[10px] font-bold text-purple-400">Code</span>
-                </div>
-                <ul className="space-y-1">
-                  {codeItems.map((item, idx) => (
-                    <li key={idx} className="flex items-center gap-1 text-[9px] text-white/50">
-                      <span className="w-1 h-1 rounded-full bg-purple-400 shrink-0" />
-                      {item}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-
-              {/* 4 directional arrows pointing outward to the cards */}
-              {/* Top-left arrow */}
-              <div className="absolute top-[15%] left-[15%] text-indigo-400/50 text-sm z-20">&#x25C0;</div>
-              {/* Top-right arrow */}
-              <div className="absolute top-[15%] right-[15%] text-purple-400/50 text-sm z-20">&#x25B6;</div>
-              {/* Bottom-left arrow */}
-              <div className="absolute bottom-[15%] left-[15%] text-amber-400/50 text-sm z-20">&#x25C0;</div>
-              {/* Bottom-right arrow */}
-              <div className="absolute bottom-[15%] right-[15%] text-emerald-400/50 text-sm z-20">&#x25B6;</div>
             </div>
+
+            {/* Left half: Compliance */}
+            <div className="absolute left-8 top-1/2 -translate-y-1/2 w-[120px] z-10">
+              <div className="flex items-center gap-1.5 mb-2">
+                <FileCheck className="w-4 h-4 text-indigo-400" />
+                <span className="text-xs font-bold text-indigo-400">Compliance</span>
+              </div>
+              <ul className="space-y-1.5">
+                {complianceItems.map((item, idx) => (
+                  <li key={idx} className="flex items-center gap-1.5 text-[11px] text-white/50">
+                    <span className="w-1.5 h-1.5 rounded-full bg-indigo-400 shrink-0" />
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* Right half: Code */}
+            <div className="absolute right-8 top-1/2 -translate-y-1/2 w-[120px] z-10">
+              <div className="flex items-center gap-1.5 mb-2">
+                <Code className="w-4 h-4 text-purple-400" />
+                <span className="text-xs font-bold text-purple-400">Code & Security</span>
+              </div>
+              <ul className="space-y-1.5">
+                {codeItems.map((item, idx) => (
+                  <li key={idx} className="flex items-center gap-1.5 text-[11px] text-white/50">
+                    <span className="w-1.5 h-1.5 rounded-full bg-purple-400 shrink-0" />
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* 4 directional arrows */}
+            <div className="absolute top-[12%] left-[12%] text-indigo-400/60 text-lg z-20">&#x25C0;</div>
+            <div className="absolute top-[12%] right-[12%] text-purple-400/60 text-lg z-20">&#x25B6;</div>
+            <div className="absolute bottom-[12%] left-[12%] text-amber-400/60 text-lg z-20">&#x25C0;</div>
+            <div className="absolute bottom-[12%] right-[12%] text-emerald-400/60 text-lg z-20">&#x25B6;</div>
           </div>
 
-          {/* Right column: 2 cards */}
+          {/* ===== CARDS: 4 corners, spread out ===== */}
-          <div className="col-span-3 space-y-3">
+
-            {capabilities.slice(2, 4).map((cap, idx) => {
+          {/* Top Left */}
-              const Icon = cap.icon
+          <div className="absolute top-0 left-0 w-[220px]">
-              return (
+            {(() => { const Icon = capabilities[0].icon; const cap = capabilities[0]; return (
-                <div key={idx} className={`border ${cap.border} ${cap.bg} rounded-xl p-3`}>
+              <div className={`border ${cap.border} ${cap.bg} rounded-xl p-4`}>
-                  <div className="flex items-center gap-1.5 mb-1.5">
+                <div className="flex items-center gap-2 mb-2">
-                    <Icon className={`w-4 h-4 ${cap.color}`} />
+                  <Icon className={`w-5 h-5 ${cap.color}`} />
-                    <span className={`text-xs font-bold ${cap.color}`}>{cap.label}</span>
+                  <span className={`text-sm font-bold ${cap.color}`}>{cap.label}</span>
-                  </div>
-                  <p className="text-[10px] text-white/45 leading-relaxed">{cap.desc}</p>
                 </div>
-              )
+                <p className="text-xs text-white/50 leading-relaxed">{cap.desc}</p>
-            })}
+              </div>
+            )})()}
           </div>
+
+          {/* Top Right */}
+          <div className="absolute top-0 right-0 w-[220px]">
+            {(() => { const Icon = capabilities[1].icon; const cap = capabilities[1]; return (
+              <div className={`border ${cap.border} ${cap.bg} rounded-xl p-4`}>
+                <div className="flex items-center gap-2 mb-2">
+                  <Icon className={`w-5 h-5 ${cap.color}`} />
+                  <span className={`text-sm font-bold ${cap.color}`}>{cap.label}</span>
+                </div>
+                <p className="text-xs text-white/50 leading-relaxed">{cap.desc}</p>
+              </div>
+            )})()}
+          </div>
+
+          {/* Bottom Left */}
+          <div className="absolute bottom-0 left-0 w-[220px]">
+            {(() => { const Icon = capabilities[2].icon; const cap = capabilities[2]; return (
+              <div className={`border ${cap.border} ${cap.bg} rounded-xl p-4`}>
+                <div className="flex items-center gap-2 mb-2">
+                  <Icon className={`w-5 h-5 ${cap.color}`} />
+                  <span className={`text-sm font-bold ${cap.color}`}>{cap.label}</span>
+                </div>
+                <p className="text-xs text-white/50 leading-relaxed">{cap.desc}</p>
+              </div>
+            )})()}
+          </div>
+
+          {/* Bottom Right */}
+          <div className="absolute bottom-0 right-0 w-[220px]">
+            {(() => { const Icon = capabilities[3].icon; const cap = capabilities[3]; return (
+              <div className={`border ${cap.border} ${cap.bg} rounded-xl p-4`}>
+                <div className="flex items-center gap-2 mb-2">
+                  <Icon className={`w-5 h-5 ${cap.color}`} />
+                  <span className={`text-sm font-bold ${cap.color}`}>{cap.label}</span>
+                </div>
+                <p className="text-xs text-white/50 leading-relaxed">{cap.desc}</p>
+              </div>
+            )})()}
+          </div>
+
+          {/* Dashed connection lines from circle to cards */}
+          <svg className="absolute inset-0 w-full h-full pointer-events-none z-0" preserveAspectRatio="none" viewBox="0 0 100 100">
+            <line x1="32" y1="28" x2="22" y2="18" stroke="rgba(99,102,241,0.15)" strokeWidth="0.3" strokeDasharray="1 1" />
+            <line x1="68" y1="28" x2="78" y2="18" stroke="rgba(168,85,247,0.15)" strokeWidth="0.3" strokeDasharray="1 1" />
+            <line x1="32" y1="72" x2="22" y2="82" stroke="rgba(245,158,11,0.15)" strokeWidth="0.3" strokeDasharray="1 1" />
+            <line x1="68" y1="72" x2="78" y2="82" stroke="rgba(16,185,129,0.15)" strokeWidth="0.3" strokeDasharray="1 1" />
+          </svg>
         </div>
       </FadeInView>
     </div>