Landing Page Feature Section with Gradient Cards

<main class="overflow-hidden relative">
    <!-- Subtle vignette + grid -->
    <div class="pointer-events-none absolute inset-0">
      <div class="absolute inset-0 bg-[radial-gradient(1200px_600px_at_0%_-10%,rgba(59,130,246,0.08),transparent_60%),radial-gradient(800px_500px_at_100%_10%,rgba(16,185,129,0.07),transparent_60%)]"></div>
      <div class="absolute inset-0 opacity-[0.35] [mask-image:radial-gradient(1200px_600px_at_50%_10%,black,transparent_80%)] bg-[linear-gradient(to_right,rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.04)_1px,transparent_1px)] [background-size:48px_48px]"></div>
    </div>

    <section class="relative mx-auto max-w-7xl px-6 sm:px-8 py-20 md:py-28">
      <!-- Top heading row -->
      <div class="grid grid-cols-1 md:grid-cols-12 gap-y-8 md:gap-10 items-start">
        <div class="md:col-span-8">
          <h1 class="text-[36px] sm:text-[44px] md:text-[56px] leading-[1.05] font-semibold tracking-tight text-white/95">
            Designed for seamless
            <br class="hidden sm:block">
            collaboration
          </h1>
        </div>
        <div class="md:col-span-4">
          <p class="text-sm sm:text-base text-white/70 md:max-w-xs">
            Purpose-built tools that empower teams to work together and ship products faster.
          </p>
        </div>
      </div>

      <!-- Feature cards -->
      <div class="md:mt-16 grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8 mt-12">
        <!-- Card 1: Deploy instantly -->
        <article class="overflow-hidden border-white/10 border rounded-[28px] relative shadow-[0_0_0_1px_rgba(255,255,255,0.02)_inset,0_10px_30px_-10px_rgba(0,0,0,0.6)]">
          <script src="https://cdn.jsdelivr.net/npm/lucide@0.452.0/dist/umd/lucide.min.js"></script>
          
          <div class="absolute inset-0 opacity-[0.22] [mask-image:radial-gradient(120%_80%_at_50%_0%,black,transparent)] bg-[linear-gradient(to_right,rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.04)_1px,transparent_1px)] [background-size:40px_40px] pointer-events-none"></div>

          <!-- Visual -->
          <div class="md:h-72 h-64 pt-6 pr-6 pb-6 pl-6 relative">
            <div class="opacity-60 absolute top-0 right-0 bottom-0 left-0 blur-3xl translate-y-2"></div>
            <div class="relative mx-auto h-full w-full flex items-center justify-center">
              <div class="scale-[0.75]">
                <div class="backdrop-blur-[2px] bg-gradient-to-b from-white/[0.06] to-white/[0.02] border-white/15 border rounded-2xl shadow-[0_10px_30px_-10px_rgba(0,0,0,0.7)]">
                  <div class="px-4 py-3 border-b border-white/10 flex items-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="code-2" class="lucide lucide-code-2 w-4 h-4 text-white/70"><path d="m18 16 4-4-4-4" class=""></path><path d="m6 8-4 4 4 4" class=""></path><path d="m14.5 4-5 16" class=""></path></svg>
                    <span class="text-[11px] font-medium text-white/80">config.tsx</span>
                    <span class="ml-auto text-[10px] text-white/50">modified</span>
                  </div>
                  <pre class="text-[11px] leading-relaxed text-white/80 pt-4 pr-4 pb-4 pl-4">export const appConfig = {
  framework: "next",
  runtime: "edge",
  regions: ["sfo1", "iad1"],
  env: {
    DATABASE_URL: process.env.DB,
    REDIS_TOKEN: process.env.CACHE
  }
}

deploy(appConfig)</pre>
                </div>
              </div>
            </div>
          </div>

          <!-- Copy -->
          <div class="relative p-6 pt-2">
            <h3 class="text-lg font-semibold tracking-tight text-white/95">Deploy instantly</h3>
            <p class="mt-2 text-sm text-white/70">
              Push to production in seconds with zero configuration across global edge networks.
            </p>
          </div>

          <!-- Card-scoped icon init -->
          <script>
            (function () {
              var root = document.currentScript && document.currentScript.closest('article');
              if (root && window.lucide && typeof window.lucide.createIcons === 'function') {
                window.lucide.createIcons({ strokeWidth: 1.5 }, root);
              }
            })();
          </script>
        </article>

        <!-- Card 2: Scale effortlessly -->
        <article class="overflow-hidden border-white/10 border rounded-[28px] relative shadow-[0_0_0_1px_rgba(255,255,255,0.02)_inset,0_10px_30px_-10px_rgba(0,0,0,0.6)]">
          <div class="absolute inset-0 opacity-[0.22] [mask-image:radial-gradient(120%_80%_at_50%_0%,black,transparent)] bg-[linear-gradient(to_right,rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.04)_1px,transparent_1px)] [background-size:40px_40px] pointer-events-none"></div>

          <!-- Visual -->
          <div class="md:h-72 h-64 pt-6 pr-6 pb-6 pl-6 relative">
            <div class="opacity-60 absolute top-0 right-0 bottom-0 left-0 blur-3xl translate-y-2"></div>
            <div class="relative h-full w-full flex items-center justify-center">
              <!-- Content blocks -->
              <div class="grid grid-cols-3 gap-3 w-full max-w-md">
                <div class="space-y-2">
                  <div class="h-16 rounded-xl bg-white/[0.06] border border-white/10"></div>
                  <div class="h-20 rounded-xl bg-white/[0.05] border border-white/10"></div>
                </div>
                <div class="space-y-2">
                  <div class="h-14 rounded-xl bg-white/[0.06] border border-white/10"></div>
                  <div class="h-24 rounded-xl bg-white/[0.05] border border-white/10"></div>
                </div>
                <div class="space-y-2">
                  <div class="h-12 rounded-xl bg-white/[0.06] border border-white/10"></div>
                  <div class="h-24 rounded-xl bg-white/[0.05] border border-white/10"></div>
                </div>
              </div>

              <!-- Analyzing pill -->
              <div class="absolute inset-0 flex items-center justify-center">
                <div class="rounded-xl border border-white/15 bg-white/[0.06] backdrop-blur supports-[backdrop-filter]:bg-white/10 px-3 py-2 shadow-[0_10px_20px_-5px_rgba(0,0,0,0.6)]">
                  <div class="flex items-center gap-2">
                    <span class="inline-block h-2 w-2 rounded-full bg-emerald-400 animate-pulse"></span>
                    <span class="text-xs font-medium text-white/85">Processing…</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Copy -->
          <div class="relative p-6 pt-2">
            <h3 class="text-lg font-semibold tracking-tight text-white/95">Scale effortlessly</h3>
            <p class="mt-2 text-sm text-white/70">
              Automatically handle millions of requests with intelligent load balancing and caching.
            </p>
          </div>
        </article>

        <!-- Card 3: Monitor everything (Chart) -->
        <article class="overflow-hidden border-white/10 border rounded-[28px] relative shadow-[0_0_0_1px_rgba(255,255,255,0.02)_inset,0_10px_30px_-10px_rgba(0,0,0,0.6)]">
          <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
          
          <div class="absolute inset-0 opacity-[0.22] [mask-image:radial-gradient(120%_80%_at_50%_0%,black,transparent)] bg-[linear-gradient(to_right,rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.04)_1px,transparent_1px)] [background-size:40px_40px] pointer-events-none"></div>

          <!-- Visual -->
          <div class="md:h-72 h-64 pt-6 pr-6 pb-6 pl-6 relative">
            <div class="opacity-60 absolute top-0 right-0 bottom-0 left-0 blur-3xl translate-y-2"></div>
            <div class="relative h-full w-full flex items-center justify-center">
              <div class="rounded-2xl border border-white/10 bg-gradient-to-b from-white/[0.06] to-white/[0.02] backdrop-blur p-4 w-[88%] max-w-sm shadow-[0_10px_30px_-10px_rgba(0,0,0,0.7)]">
                <div class="flex items-center justify-between mb-2">
                  <div class="flex items-center gap-2">
                    <span class="h-2.5 w-2.5 rounded-full bg-sky-400/90"></span>
                    <span class="text-[11px] text-white/70">Requests</span>
                  </div>
                  <div class="flex items-center gap-2">
                    <span class="h-2.5 w-2.5 rounded-full bg-amber-300/90"></span>
                    <span class="text-[11px] text-white/70">Latency</span>
                  </div>
                </div>
                <!-- Wrap canvas in a div to avoid layout bug -->
                <div class="relative h-32">
                  <canvas id="miniChart" class="absolute inset-0" width="519" height="256" style="display: block; box-sizing: border-box; height: 128px; width: 259px;"></canvas>
                </div>
              </div>
              <!-- Tooltip mock -->
              <div class="absolute right-10 top-10">
                <div class="rounded-lg border border-white/10 bg-white/[0.06] px-2.5 py-1.5 backdrop-blur">
                  <span class="text-[11px] text-white/85">2.4M req/s</span>
                </div>
              </div>
            </div>
          </div>

          <!-- Copy -->
          <div class="relative p-6 pt-2">
            <h3 class="text-lg font-semibold tracking-tight text-white/95">Monitor everything</h3>
            <p class="mt-2 text-sm text-white/70">
              Real‑time insights into performance metrics, errors, and user behavior across regions.
            </p>
          </div>

          <!-- Card-scoped chart init -->
          <script>
            (function () {
              var root = document.currentScript && document.currentScript.closest('article');
              if (!root || !window.Chart) return;
              var canvas = root.querySelector('canvas');
              if (!canvas) return;

              var ctx = canvas.getContext('2d');
              var gradientBlue = ctx.createLinearGradient(0, 0, 0, 140);
              gradientBlue.addColorStop(0, 'rgba(56, 189, 248, 0.35)');
              gradientBlue.addColorStop(1, 'rgba(56, 189, 248, 0.00)');

              var gradientAmber = ctx.createLinearGradient(0, 0, 0, 140);
              gradientAmber.addColorStop(0, 'rgba(251, 191, 36, 0.35)');
              gradientAmber.addColorStop(1, 'rgba(251, 191, 36, 0.00)');

              new Chart(canvas, {
                type: 'line',
                data: {
                  labels: ['JAN','FEB','MAR','APR','MAY','JUN'],
                  datasets: [
                    {
                      label: 'Requests',
                      data: [18, 32, 48, 65, 42, 28],
                      borderColor: 'rgb(56, 189, 248)',
                      backgroundColor: gradientBlue,
                      pointRadius: 0,
                      borderWidth: 2,
                      tension: 0.42,
                      fill: true,
                    },
                    {
                      label: 'Latency',
                      data: [8, 22, 54, 46, 34, 16],
                      borderColor: 'rgb(251, 191, 36)',
                      backgroundColor: gradientAmber,
                      pointRadius: 0,
                      borderWidth: 2,
                      tension: 0.42,
                      fill: true,
                    }
                  ]
                },
                options: {
                  responsive: true,
                  maintainAspectRatio: false,
                  plugins: {
                    legend: { display: false },
                    tooltip: { enabled: false }
                  },
                  scales: {
                    x: {
                      grid: { color: 'rgba(255,255,255,0.06)', drawTicks: false },
                      ticks: { color: 'rgba(255,255,255,0.55)', font: { size: 10 } }
                    },
                    y: {
                      grid: { color: 'rgba(255,255,255,0.06)', drawTicks: false },
                      ticks: { display: false },
                      min: 0,
                      max: 70
                    }
                  }
                }
              });
            })();
          </script>
        </article>
      </div>
    </section>
  </main>