Animated Pricing Grid with Typewriter Header

<div
  class="bg-[#e4e4e7] font-['Inter',sans-serif] text-gray-800 flex flex-col items-center justify-center min-h-screen relative overflow-x-hidden antialiased selection:bg-purple-500/30 py-16 px-4 sm:px-8"
  style="font-family: 'Inter', sans-serif;">
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap" rel="stylesheet">

  <!-- Subtle Lamp Lighting -->
  <div
    class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] bg-white/80 blur-[120px] rounded-full pointer-events-none z-0">
  </div>

  <!-- Circuit Board Background (SVG) -->
  <div class="absolute inset-0 flex items-center justify-center pointer-events-none z-0 overflow-hidden opacity-50">
    <svg class="min-w-[1400px] h-[900px]" viewBox="0 0 1400 900" fill="none" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="3" result="blur" />
          <feComposite in="SourceGraphic" in2="blur" operator="over" />
        </filter>
        <linearGradient id="chipGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#ffffff" />
          <stop offset="100%" stop-color="#f4f4f5" />
        </linearGradient>
        <filter id="chipShadow" x="-100%" y="-100%" width="300%" height="300%">
          <feDropShadow dx="0" dy="25" stdDeviation="20" flood-color="#000" flood-opacity="0.15" />
        </filter>
      </defs>
      <g stroke="#d4d4d8" stroke-width="1.5">
        <line x1="120" y1="210" x2="160" y2="210" />
        <line x1="120" y1="220" x2="160" y2="220" />
        <line x1="120" y1="230" x2="160" y2="230" />
      </g>
      <rect x="160" y="195" width="70" height="50" rx="6" fill="url(#chipGrad)" stroke="rgba(0,0,0,0.12)"
        stroke-width="1" filter="url(#chipShadow)" />
      <circle cx="170" cy="205" r="1.5" fill="#a1a1aa">
        <animate attributeName="opacity" values="0.2;1;0.2" dur="1.5s" repeatCount="indefinite" />
      </circle>
      <circle cx="215" cy="220" r="2.5" fill="#ef4444" filter="url(#glow)">
        <animate attributeName="opacity" values="0.3;1;0.3" dur="2s" repeatCount="indefinite" />
      </circle>
      <path d="M 215 220 H 350 L 480 350 H 550" stroke="#d4d4d8" stroke-width="1.5" fill="none" />
      <path d="M 215 220 H 350 L 480 350 H 550" stroke="#a855f7" stroke-width="1.5" fill="none"
        stroke-dasharray="60 600" stroke-dashoffset="600">
        <animate attributeName="stroke-dashoffset" values="600;-60" dur="3s" repeatCount="indefinite" />
      </path>
      <g stroke="#d4d4d8" stroke-width="1.5">
        <line x1="120" y1="670" x2="160" y2="670" />
        <line x1="120" y1="680" x2="160" y2="680" />
        <line x1="120" y1="690" x2="160" y2="690" />
      </g>
      <rect x="160" y="655" width="70" height="50" rx="6" fill="url(#chipGrad)" stroke="rgba(0,0,0,0.12)"
        stroke-width="1" filter="url(#chipShadow)" />
      <circle cx="170" cy="665" r="1.5" fill="#a1a1aa">
        <animate attributeName="opacity" values="0.2;1;0.2" dur="2s" repeatCount="indefinite" />
      </circle>
      <circle cx="215" cy="680" r="2.5" fill="#3b82f6" filter="url(#glow)">
        <animate attributeName="opacity" values="0.3;1;0.3" dur="2.5s" repeatCount="indefinite" />
      </circle>
      <path d="M 215 680 H 350 L 480 550 H 550" stroke="#d4d4d8" stroke-width="1.5" fill="none" />
      <path d="M 215 680 H 350 L 480 550 H 550" stroke="#a855f7" stroke-width="1.5" fill="none"
        stroke-dasharray="60 600" stroke-dashoffset="600">
        <animate attributeName="stroke-dashoffset" values="600;-60" dur="3.5s" repeatCount="indefinite" />
      </path>
      <g stroke="#d4d4d8" stroke-width="1.5">
        <line x1="1280" y1="210" x2="1240" y2="210" />
        <line x1="1280" y1="220" x2="1240" y2="220" />
        <line x1="1280" y1="230" x2="1240" y2="230" />
      </g>
      <rect x="1170" y="195" width="70" height="50" rx="6" fill="url(#chipGrad)" stroke="rgba(0,0,0,0.12)"
        stroke-width="1" filter="url(#chipShadow)" />
      <circle cx="1230" cy="205" r="1.5" fill="#a1a1aa">
        <animate attributeName="opacity" values="0.2;1;0.2" dur="1.7s" repeatCount="indefinite" />
      </circle>
      <circle cx="1185" cy="220" r="2.5" fill="#10b981" filter="url(#glow)">
        <animate attributeName="opacity" values="0.3;1;0.3" dur="3s" repeatCount="indefinite" />
      </circle>
      <path d="M 1185 220 H 1050 L 920 350 H 850" stroke="#d4d4d8" stroke-width="1.5" fill="none" />
      <path d="M 1185 220 H 1050 L 920 350 H 850" stroke="#a855f7" stroke-width="1.5" fill="none"
        stroke-dasharray="60 600" stroke-dashoffset="600">
        <animate attributeName="stroke-dashoffset" values="600;-60" dur="4s" repeatCount="indefinite" />
      </path>
    </svg>
  </div>

  <!-- Header Area -->
  <div class="relative z-10 w-full max-w-5xl mx-auto mb-16 flex flex-col items-center">
    <div class="flex items-center justify-center gap-5 mb-8">
      <div class="flex gap-1.5 opacity-60">
        <div class="dot-light w-1 h-1 rounded-full bg-black opacity-20 transition-all duration-300"></div>
        <div class="dot-light w-1 h-1 rounded-full bg-black opacity-20 transition-all duration-300"></div>
        <div class="dot-light w-1 h-1 rounded-full bg-black opacity-20 transition-all duration-300"></div>
      </div>
      <div
        class="w-14 h-14 bg-gradient-to-b from-[#ffffff] to-[#f4f4f5] rounded-2xl flex items-center justify-center relative overflow-hidden"
        style="box-shadow: inset 0 2px 5px rgba(0,0,0,0.02), inset 0 0 0 1px rgba(0,0,0,0.04), 0 10px 15px -3px rgba(0,0,0,0.05), 0 25px 30px -5px rgba(0,0,0,0.08);">
        <div class="absolute inset-0 opacity-10"
          style="background-image: radial-gradient(circle at 1px 1px, black 1px, transparent 0); background-size: 4px 4px;">
        </div>
        <iconify-icon icon="solar:layers-linear" class="text-2xl text-[#a855f7] relative z-10"
          style="filter: drop-shadow(0 0 6px rgba(168,85,247,0.4));"></iconify-icon>
      </div>
      <div class="flex gap-1.5 opacity-60">
        <div class="dot-light w-1 h-1 rounded-full bg-black opacity-20 transition-all duration-300"></div>
        <div class="dot-light w-1 h-1 rounded-full bg-black opacity-20 transition-all duration-300"></div>
        <div class="dot-light w-1 h-1 rounded-full bg-black opacity-20 transition-all duration-300"></div>
      </div>
    </div>
    <div class="text-center h-20">
      <h1 class="text-3xl sm:text-4xl font-light text-[#18181b] tracking-tight mb-3"
        style="text-shadow: 0 1px 2px rgba(0,0,0,0.05);">
        <span id="typewriter"></span><span class="animate-pulse">_</span>
      </h1>
      <p class="text-base text-[#52525b] font-light max-w-lg mx-auto">Deploy the precise processing power needed for
        your applications. Scale effortlessly as your user base grows.</p>
    </div>
    <script>
      (function() {
                const phrases = ["Compute Levels", "Expand Processing", "Worldwide Edge"];
                let pIdx = 0, cIdx = 0, isDeleting = false;
                const tw = document.getElementById('typewriter');
                function type() {
                    const current = phrases[pIdx];
                    tw.textContent = isDeleting ? current.substring(0, cIdx - 1) : current.substring(0, cIdx + 1);
                    cIdx = isDeleting ? cIdx - 1 : cIdx + 1;
                    let speed = isDeleting ? 40 : 80;
                    if (!isDeleting && cIdx === current.length) { speed = 2500; isDeleting = true; }
                    else if (isDeleting && cIdx === 0) { isDeleting = false; pIdx = (pIdx + 1) % phrases.length; speed = 500; }
                    setTimeout(type, speed);
                }
                type();
                const dots = document.querySelectorAll('.dot-light');
                let dotIdx = 0;
                setInterval(() => {
                    dots.forEach(d => { d.style.opacity = '0.2'; d.style.boxShadow = 'none'; });
                    if(dots[dotIdx]) { dots[dotIdx].style.opacity = '0.8'; dots[dotIdx].style.boxShadow = '0 0 6px rgba(168,85,247,0.5)'; }
                    if(dots[5 - dotIdx]) { dots[5 - dotIdx].style.opacity = '0.8'; dots[5 - dotIdx].style.boxShadow = '0 0 6px rgba(168,85,247,0.5)'; }
                    dotIdx = (dotIdx + 1) % 3;
                }, 300);
            })();
    </script>
  </div>

  <!-- Pricing Grid -->
  <div class="relative z-10 w-full max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
    <!-- Starter Tier -->
    <div
      class="relative p-8 rounded-3xl bg-gradient-to-b from-[#ffffff] to-[#f8f8f8] flex flex-col transition-all duration-500 ease-out hover:-translate-y-2 shadow-[inset_0_1px_0_rgba(255,255,255,1),inset_0_0_0_1px_rgba(0,0,0,0.04),0_10px_30px_-10px_rgba(0,0,0,0.1)]">
      <div class="flex items-center gap-3 mb-4"><iconify-icon icon="solar:shield-linear"
          class="text-2xl text-[#a1a1aa]"></iconify-icon>
        <h3 class="text-lg font-normal text-[#18181b]">Starter</h3>
      </div>
      <div class="text-4xl tracking-tight font-light text-[#18181b] mb-1">$0</div>
      <p class="text-sm text-[#52525b] font-light mb-8">Ideal for local development and initial phases.</p>
      <button class="w-full bg-gradient-to-b from-[#ffffff] to-[#f4f4f5] rounded-xl py-3 text-sm font-light transition-all active:scale-[0.98] text-[#18181b] mb-8" style="box-shadow: inset 0 1px 1px #fff, 0 5px 15px -5px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.06);">Start Free</button>
      <div class="h-px w-full mb-8"
        style="background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent);"></div>
      <ul class="space-y-4 flex-1 text-sm font-light text-[#52525b]">
        <li class="flex items-start gap-3"><iconify-icon icon="solar:check-circle-linear"
            class="text-lg text-[#a1a1aa] shrink-0 mt-0.5"></iconify-icon> 1,000 API calls daily</li>
        <li class="flex items-start gap-3"><iconify-icon icon="solar:check-circle-linear"
            class="text-lg text-[#a1a1aa] shrink-0 mt-0.5"></iconify-icon> Shared units</li>
        <li class="flex items-start gap-3"><iconify-icon icon="solar:check-circle-linear"
            class="text-lg text-[#a1a1aa] shrink-0 mt-0.5"></iconify-icon> Forum assistance</li>
      </ul>
    </div>

    <!-- Advanced Tier -->
    <div
      class="relative p-8 rounded-3xl bg-gradient-to-b from-[#ffffff] to-[#f8f8f8] flex flex-col md:-translate-y-4 transition-all duration-500 ease-out hover:-translate-y-6 shadow-[inset_0_1px_0_rgba(255,255,255,1),inset_0_0_0_1px_rgba(168,85,247,0.4),0_20px_40px_-15px_rgba(147,51,234,0.2)]">
      <div class="absolute top-4 left-4 w-1 h-1 rounded-full bg-purple-500/40 animate-pulse"></div>
      <div class="absolute top-4 right-4 w-1 h-1 rounded-full bg-purple-500/40 animate-pulse"
        style="animation-delay: 0.5s"></div>
      <div class="flex items-center gap-3 mb-4"><iconify-icon icon="solar:cpu-linear"
          class="text-2xl text-[#a855f7]"></iconify-icon>
        <h3 class="text-lg font-normal text-[#18181b]">Advanced</h3>
        <span class="ml-auto px-2.5 py-1 rounded-full bg-purple-100/50 text-[#9333ea] text-xs border border-purple-200/50">TRENDING</span>
      </div>
      <div class="text-4xl tracking-tight font-light text-[#18181b] mb-1">$59
        <span class="text-sm text-[#a1a1aa]">/mo</span>
      </div>
      <p class="text-sm text-[#52525b] font-light mb-8">Tuned for high-traffic live deployments.</p>
      <button class="w-full bg-gradient-to-b from-[#9333ea] to-[#7e22ce] text-white rounded-xl py-3 text-sm font-light transition-all active:scale-[0.98] mb-8" style="box-shadow: inset 0 1px 1px rgba(255,255,255,0.4), 0 10px 20px -5px rgba(147,51,234,0.4), 0 0 0 1px #7e22ce;">Go Advanced</button>
      <div class="h-px w-full mb-8"
        style="background: linear-gradient(90deg, transparent, rgba(168,85,247,0.2), transparent);"></div>
      <ul class="space-y-4 flex-1 text-sm font-light text-[#52525b]">
        <li class="flex items-start gap-3"><iconify-icon icon="solar:check-circle-linear"
            class="text-lg text-[#a855f7] shrink-0 mt-0.5"></iconify-icon> 500k API calls daily</li>
        <li class="flex items-start gap-3"><iconify-icon icon="solar:check-circle-linear"
            class="text-lg text-[#a855f7] shrink-0 mt-0.5"></iconify-icon> Load balancing</li>
        <li class="flex items-start gap-3"><iconify-icon icon="solar:check-circle-linear"
            class="text-lg text-[#a855f7] shrink-0 mt-0.5"></iconify-icon> Priority email</li>
        <li class="flex items-start gap-3"><iconify-icon icon="solar:check-circle-linear"
            class="text-lg text-[#a855f7] shrink-0 mt-0.5"></iconify-icon> Deep observability</li>
      </ul>
    </div>

    <!-- Enterprise Tier -->
    <div
      class="relative p-8 rounded-3xl bg-gradient-to-b from-[#ffffff] to-[#f8f8f8] flex flex-col transition-all duration-500 ease-out hover:-translate-y-2 shadow-[inset_0_1px_0_rgba(255,255,255,1),inset_0_0_0_1px_rgba(0,0,0,0.04),0_10px_30px_-10px_rgba(0,0,0,0.1)]">
      <div class="flex items-center gap-3 mb-4"><iconify-icon icon="solar:server-square-linear"
          class="text-2xl text-[#a1a1aa]"></iconify-icon>
        <h3 class="text-lg font-normal text-[#18181b]">Enterprise</h3>
      </div>
      <div class="text-4xl tracking-tight font-light text-[#18181b] mb-1">Tailored</div>
      <p class="text-sm text-[#52525b] font-light mb-8">Dedicated servers for maximum security.</p>
      <button class="w-full bg-gradient-to-b from-[#ffffff] to-[#f4f4f5] rounded-xl py-3 text-sm font-light transition-all active:scale-[0.98] text-[#18181b] mb-8" style="box-shadow: inset 0 1px 1px #fff, 0 5px 15px -5px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.06);">Contact Sales</button>
      <div class="h-px w-full mb-8"
        style="background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent);"></div>
      <ul class="space-y-4 flex-1 text-sm font-light text-[#52525b]">
        <li class="flex items-start gap-3"><iconify-icon icon="solar:check-circle-linear"
            class="text-lg text-[#a1a1aa] shrink-0 mt-0.5"></iconify-icon> Uncapped API</li>
        <li class="flex items-start gap-3"><iconify-icon icon="solar:check-circle-linear"
            class="text-lg text-[#a1a1aa] shrink-0 mt-0.5"></iconify-icon> Dedicated hardware</li>
        <li class="flex items-start gap-3"><iconify-icon icon="solar:check-circle-linear"
            class="text-lg text-[#a1a1aa] shrink-0 mt-0.5"></iconify-icon> 24/7 Voice support</li>
      </ul>
    </div>
  </div>
</div>