update ppu ui with right icons + cool grid background

Author: minor

ppu-pilot.mdx

@@ -9,21 +9,31 @@ import { Button } from '/snippets/button.mdx';
 <div
   className="relative w-full flex items-center justify-center"
   style={{
-    height: '28rem',
-    backgroundColor: '#08090a',
-    backgroundImage: 'radial-gradient(39vw circle at 50% 50%, rgba(144,172,255,0.2) 0, rgba(144,172,255,0) 100%)',
-    backgroundRepeat: 'no-repeat',
-    backgroundPosition: '50%',
-    backgroundSize: '78vw 78vw',
+    minHeight: '28rem',
+    backgroundColor: 'black',
+    backgroundImage: 'linear-gradient(to right, rgba(71,85,105,0.15) 1px, transparent 1px), linear-gradient(to bottom, rgba(71,85,105,0.15) 1px, transparent 1px)',
+    backgroundSize: '40px 40px',
   }}
 >
+  {/* Gradient overlay */}
+  <div 
+    style={{
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      background: 'radial-gradient(circle at 50% 60%, rgba(236,72,153,0.15) 0%, rgba(168,85,247,0.05) 40%, transparent 70%)',
+      pointerEvents: 'none'
+    }}
+  />
   {/* Content */}
-  <div style={{ position: 'absolute', textAlign: 'center', padding: '0 1rem', maxWidth: '56rem' }}>
+  <div style={{ position: 'relative', textAlign: 'center', padding: '0 1rem', maxWidth: '56rem', zIndex: 1 }}>
     <div className="text-white font-branded text-hero">
       X API Pay-Per-Use Pricing Pilot
     </div>
     <p
-      className="text-white text-center"
+      className="text-gray-300 text-center"
       style={{
         marginTop: '1rem',
         fontWeight: '400',
@@ -80,16 +90,16 @@ import { Button } from '/snippets/button.mdx';
     Discover why our pay-per-use model is better for developers of all sizes
     </p>
     <Columns cols={2}>
-        <Card title="Flexibility" icon="dollar-sign">
+        <Card title="Flexibility" icon={<svg viewBox="0 0 24 24" aria-hidden="true" className="w-6 h-6"><g><path d="M13.161 7.21V5.8h-2v1.446c-.304.056-.587.137-.847.243-.555.217-.984.533-1.287.95-.295.415-.442.905-.442 1.468 0 1.508.87 2.444 2.613 2.808l1.274.273c.477.096.81.217 1 .364.192.147.287.377.287.69 0 .32-.143.567-.43.74-.285.165-.658.247-1.117.247-.58 0-1.088-.134-1.521-.403-.425-.268-.771-.641-1.04-1.118l-1.69 1.287c.355.633.893 1.131 1.612 1.495.477.233 1.007.39 1.588.47v1.44h2v-1.452c.386-.06.737-.157 1.053-.289.58-.251 1.023-.602 1.326-1.053.312-.45.468-.975.468-1.573 0-.78-.212-1.386-.637-1.82-.416-.433-1.057-.745-1.924-.936l-1.378-.286c-.485-.113-.828-.247-1.027-.403-.2-.156-.3-.368-.3-.637 0-.268.122-.48.365-.637.251-.164.59-.247 1.014-.247.52 0 .997.117 1.43.351.433.234.78.564 1.04.988l1.456-1.339c-.355-.563-.862-.988-1.521-1.274-.418-.187-.873-.315-1.365-.383z" fill="currentColor"></path><path clipRule="evenodd" d="M23 12c0 6.075-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1s11 4.925 11 11zm-2 0c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z" fillRule="evenodd" fill="currentColor"></path></g></svg>}>
             No fixed monthly costs—pay only for what you use.
         </Card>
-        <Card title="Accessibility" icon="users">
+        <Card title="Accessibility" icon={<svg viewBox="0 0 24 24" aria-hidden="true" className="w-6 h-6"><g><path d="M5.73 12.02c-.03.04-.05.07-.08.1-1.26 1.6-2.04 3.63-2.42 5.88H.65l.1-1.09c.13-1.4.57-2.62 1.35-3.51.8-.91 1.89-1.4 3.15-1.4.16 0 .32.01.48.02zM23.35 18l-.1-1.09c-.13-1.4-.57-2.62-1.35-3.51-.8-.91-1.89-1.4-3.15-1.4-.16 0-.32.01-.48.02.08.1.16.2.24.31 1.17 1.56 1.9 3.51 2.26 5.67h2.58zM12 11c-1.94 0-3.59.86-4.78 2.36-1.26 1.59-2 3.86-2.22 6.56L4.92 21h14.16L19 19.92c-.21-2.62-.91-4.82-2.09-6.39C15.7 11.92 14.02 11 12 11zm0-8c-1.93 0-3.5 1.57-3.5 3.5S10.07 10 12 10s3.5-1.57 3.5-3.5S13.93 3 12 3zM5.25 5.5C3.73 5.5 2.5 6.73 2.5 8.25S3.73 11 5.25 11 8 9.77 8 8.25 6.77 5.5 5.25 5.5zm13.5 0C17.23 5.5 16 6.73 16 8.25S17.23 11 18.75 11s2.75-1.23 2.75-2.75-1.23-2.75-2.75-2.75z"></path></g></svg>}>
             Lower barriers for small developers; costs scale with usage, avoiding expensive tier jumps.
         </Card>
-        <Card title="Expanded Access" icon="unlock">
+        <Card title="Expanded Access" icon={<svg viewBox="0 0 24 24" aria-hidden="true" className="w-6 h-6"><g><path d="M11.4 2.041c-1.14.14-2.202.673-3.01 1.514-.65.676-1.079 1.491-1.295 2.465-.058.259-.075.584-.093 1.713L6.98 9.126l-.26.091c-1.37.48-2.35 1.599-2.637 3.01C4.004 12.615 4 12.76 4 15.5s.004 2.885.083 3.273c.228 1.119.902 2.078 1.873 2.663.329.199.854.396 1.287.485.375.076.557.079 4.757.079s4.382-.003 4.757-.079c1.36-.278 2.436-1.166 2.947-2.433.075-.188.173-.516.217-.731.074-.367.079-.554.079-3.257s-.005-2.89-.079-3.257c-.293-1.437-1.284-2.563-2.676-3.039-.568-.195-.77-.204-4.638-.204H8.993l.016-1.27c.016-1.212.021-1.285.115-1.591.294-.956 1.063-1.724 2.015-2.014.416-.126 1.215-.142 1.614-.031.73.202 1.358.655 1.76 1.269.153.235.234.417.427.969.311.883 1.586.875 1.873-.013.087-.269.085-.351-.018-.716-.229-.82-.635-1.498-1.27-2.123-.753-.741-1.595-1.199-2.541-1.382-.402-.077-1.185-.105-1.584-.057m5.123 9.032c.689.18 1.272.787 1.418 1.476.085.399.085 5.503 0 5.902-.078.37-.231.64-.541.953-.281.286-.546.442-.908.536-.343.09-8.641.09-8.984 0-.685-.178-1.259-.746-1.435-1.417-.061-.236-.069-.546-.071-2.995-.002-3.045 0-3.076.263-3.514.281-.471.723-.813 1.212-.941.241-.063.625-.068 4.523-.068s4.282.005 4.523.068m-4.828 1.984c-.229.072-.439.242-.567.459l-.108.184v3.606l.121.197c.402.653 1.316.653 1.718 0l.121-.197V13.7l-.108-.184c-.244-.415-.722-.601-1.177-.459"></path></g></svg>}>
             All endpoints available without tier restrictions, with less restrictive rate limits.
         </Card>
-        <Card title="Transparency" icon="eye">
+        <Card title="Transparency" icon={<svg viewBox="0 0 24 24" aria-hidden="true" className="w-6 h-6"><g><path d="M12 21c-7.605 0-10.804-8.296-10.937-8.648L.932 12l.131-.352C1.196 11.295 4.394 3 12 3s10.804 8.296 10.937 8.648l.131.352-.131.352C22.804 12.705 19.606 21 12 21zm-8.915-9c.658 1.467 3.5 7 8.915 7s8.257-5.533 8.915-7c-.658-1.467-3.5-7-8.915-7s-8.257 5.533-8.915 7zM12 16c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4-1.794 4-4 4zm0-6c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2z"></path></g></svg>}>
             Detailed tracking of consumption in the Developer Console.
         </Card>
     </Columns>
@@ -124,13 +134,13 @@ import { Button } from '/snippets/button.mdx';
     This model uses a credits system where you buy credits upfront and deduct them based on usage.
     </p>
     <Columns cols={3}>
-        <Card className="border-none border-transparent bg-transparent" title="Purchase Credits" icon="credit-card" horizontal>
+        <Card className="border-none border-transparent bg-transparent" title="Purchase Credits" icon={<svg viewBox="0 0 24 24" aria-hidden="true" className="w-6 h-6"><g><path d="M19.502 4h-15c-1.381 0-2.5 1.12-2.5 2.5v11c0 1.38 1.119 2.5 2.5 2.5h15c1.381 0 2.5-1.12 2.5-2.5v-11c0-1.38-1.119-2.5-2.5-2.5zm.5 13.5c0 .28-.224.5-.5.5h-15c-.276 0-.5-.22-.5-.5V11h16v6.5zm0-9.5h-16V6.5c0-.28.224-.5.5-.5h15c.276 0 .5.22.5.5V8z"></path></g></svg>} horizontal>
             Buy from the Developer Console Billing tab.
         </Card>
-        <Card className="border-none border-transparent bg-transparent" title="Track Usage" icon="chart-simple" horizontal>
+        <Card className="border-none border-transparent bg-transparent" title="Track Usage" icon={<div className="flex items-center justify-center"><svg viewBox="0 0 24 24" aria-hidden="true" className="w-6 h-6"><g><path d="M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z"></path></g></svg></div>} horizontal>
             Monitor in real-time via the Dashboard.
         </Card>
-        <Card className="border-none border-transparent bg-transparent" title="Rate Limits" icon="bolt" horizontal>
+        <Card className="border-none border-transparent bg-transparent" title="Rate Limits" icon={<svg viewBox="0 0 24 24" aria-hidden="true" className="w-6 h-6"><g><path d="M7.323 2h11.443l-3 5h6.648L6.586 22.83 7.847 14H2.523l4.8-12zm1.354 2l-3.2 8h4.676l-.739 5.17L17.586 9h-5.352l3-5H8.677z"></path></g></svg>} horizontal>
 Applied per endpoint but more generous than before.
         </Card>
     </Columns>