Restore Resource Distribution card, remove Resource Utilization, apply blank KPI bg to status row

Swap back to Resource Distribution + Infrastructure Map in the middle
row, drop Resource Utilization, and scale the card vignette back so
border art stays readable while still blending into the background.
Apply the new blank KPI background asset to the top status cards row.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF

src/pages/Infrastructure.tsx

@@ -28,14 +28,6 @@ const regions = [
   { name: 'ap-northeast-1', x: '85%', y: '40%', resources: 6 },
 ]
 
-const topResources = [
-  { label: 'db-primary-01', percentage: 92 },
-  { label: 'app-server-03', percentage: 85 },
-  { label: 'cache-cluster-02', percentage: 78 },
-  { label: 'web-frontend-lb', percentage: 64 },
-  { label: 'batch-worker-04', percentage: 51 },
-]
-
 const trendData = Array.from({ length: 14 }, (_, i) => ({
   day: i,
   compute: 60 + i * 0.6 + Math.sin(i / 2) * 3,
@@ -92,9 +84,16 @@ const cardVignette: React.CSSProperties = {
   position: 'absolute',
   inset: 0,
   pointerEvents: 'none',
-  background: 'radial-gradient(ellipse closest-side at center, transparent 45%, var(--color-page) 100%)',
+  background: 'radial-gradient(ellipse closest-side at center, transparent 70%, var(--color-page) 100%)',
 }
 
+const distributionData = [
+  { name: 'Compute', value: 42, color: '#C8A434' },
+  { name: 'Storage', value: 28, color: '#E67E22' },
+  { name: 'Database', value: 18, color: '#2ECC71' },
+  { name: 'Network', value: 12, color: '#7A7D85' },
+]
+
 function Donut({ data, centerLabel }: { data: { name: string; value: number; color: string }[]; centerLabel?: string }) {
   return (
     <div className="flex flex-1 items-center gap-4">
@@ -179,7 +178,9 @@ export default function Infrastructure() {
         {statusCards.map((card) => {
           const Icon = card.icon
           return (
-            <div key={card.label} style={{ ...cardBase, padding: '16px' }} className="hover:!border-gold/20">
+            <div key={card.label} style={{ ...framedCard('/blank-kpi-bg.png'), padding: '16px' }}>
+              <div style={cardVignette} />
+              <div className="relative z-10">
                 <h3 style={{ fontSize: '10px', textTransform: 'uppercase', letterSpacing: '1.5px', color: '#7A7D85', fontWeight: 500, marginBottom: '8px' }}>
                   {card.label}
                 </h3>
@@ -189,13 +190,22 @@ export default function Infrastructure() {
                 </div>
                 <p style={{ fontSize: '10px', color: card.color ?? '#7A7D85', marginTop: '6px' }}>{card.sub}</p>
               </div>
+            </div>
           )
         })}
       </div>
 
       {/* Middle Row */}
       <div className="min-h-0 flex-1">
-        <div className="grid h-full w-full grid-cols-[1.6fr_1fr] gap-6">
+        <div className="grid h-full w-full grid-cols-[1fr_1.6fr] gap-6">
+          {/* Resource Distribution */}
+          <div style={framedCard('/resource-distrabution-bg.png')}>
+            <div style={cardVignette} />
+            <div className="relative z-10 flex flex-1 flex-col items-center justify-center">
+              <Donut data={distributionData} />
+            </div>
+          </div>
+
           {/* Infrastructure Map — expanded */}
           <div style={framedCard('/infra-map-kpi.png')}>
             <div style={cardVignette} />
@@ -210,29 +220,6 @@ export default function Infrastructure() {
               </div>
             </div>
           </div>
-
-          {/* Top Resources by Utilization */}
-          <div style={framedCard('/resource-utilization.png')}>
-            <div style={cardVignette} />
-            <div className="relative z-10 flex flex-1 flex-col">
-              <div className="flex flex-1 flex-col justify-around gap-4">
-                {topResources.map((res) => {
-                  const color = res.percentage >= 90 ? '#E74C3C' : res.percentage >= 70 ? '#E67E22' : '#C8A434'
-                  return (
-                    <div key={res.label}>
-                      <div className="flex items-center justify-between mb-1.5">
-                        <span style={{ fontSize: '12px', color: '#E8E6E0' }}>{res.label}</span>
-                        <span style={{ fontSize: '11px', color: '#7A7D85' }}>{res.percentage}%</span>
-                      </div>
-                      <div style={{ height: '6px', backgroundColor: 'rgba(30,32,37,0.8)', borderRadius: '3px', overflow: 'hidden' }}>
-                        <div style={{ height: '100%', width: `${res.percentage}%`, backgroundColor: color, borderRadius: '3px', transition: 'width 0.8s ease' }} />
-                      </div>
-                    </div>
-                  )
-                })}
-              </div>
-            </div>
-          </div>
         </div>
       </div>