Hero Feature Card with Glow Button & Metric Charts

<div data-card="hero-feature"
  class="max-w-5xl overflow-hidden sm:p-8 bg-center bg-neutral-900/70 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/0e462543-eb2b-45e3-ab99-f68cecbaef90_1600w.jpg)] bg-cover border-white/10 border rounded-2xl pt-6 pr-6 pb-6 pl-6 relative">
  <div class="absolute inset-x-0 bottom-0 h-40 pointer-events-none"
    style="background: radial-gradient(120% 120% at 50% 120%, rgba(244,63,94,0.25) 0%, rgba(244,63,94,0.12) 35%, rgba(244,63,94,0.05) 55%, rgba(0,0,0,0) 75%);">
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
    <div class="">
      <h3 class="text-xl font-medium">Transparent Reporting Made Simple</h3>
      <p class="mt-3 text-sm text-neutral-300">
        Build shareable reports your whole org understands. No hidden metrics—just precise, readable insights your team
        can act on.
      </p>
      <div class="slide-up stagger-3 flex flex-col sm:flex-row gap-4 gap-x-4 gap-y-4 justify-start">

        <title>Purple Glow-Follow Button</title>
        <style>
          :root {
            --glow-core: rgba(255, 255, 255, 0.8);
            --glow-color: rgba(192, 132, 252, 0.35);
            /* soft purple */
            --glow-color-strong: rgba(192, 132, 252, 0.55);
            /* stronger purple */
          }

          body {
            min-height: 100vh;
            display: grid;
            place-items: center;
            background: #0d1117;
            margin: 0;
            font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
          }

          .glow-btn {
            --x: 50%;
            --y: 50%;
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            appearance: none;
            border: 1px solid #e5e7eb;
            background: #fff;
            color: #111827;
            padding: 14px 28px;
            font-weight: 700;
            border-radius: 9999px;
            /* fully round */
            cursor: pointer;
            letter-spacing: .2px;
            transition: transform .2s ease, border-color .2s ease;
            box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .08);
            isolation: isolate;
          }

          .glow-btn:hover {
            transform: translateY(-1px);
            border-color: #d1d5db;
          }

          .glow-btn::before,
          .glow-btn::after {
            content: "";
            position: absolute;
            inset: -4px;
            border-radius: inherit;
            pointer-events: none;
            opacity: 0;
            transition: opacity .2s ease;
            will-change: background;
            z-index: -1;
          }

          .glow-btn::before {
            background:
              radial-gradient(90px 90px at var(--x) var(--y),
                var(--glow-core) 0%,
                rgba(255, 255, 255, 0.25) 45%,
                transparent 70%),
              radial-gradient(140px 140px at var(--x) var(--y),
                var(--glow-color-strong) 0%,
                transparent 75%);
            mix-blend-mode: screen;
          }

          .glow-btn::after {
            inset: -8px;
            border-radius: inherit;
            background:
              radial-gradient(200px 200px at var(--x) var(--y),
                var(--glow-color) 0%,
                transparent 80%);
            filter: blur(20px);
            z-index: -2;
          }

          .glow-btn:hover::before,
          .glow-btn:hover::after {
            opacity: 1;
          }

          .icon-box {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
          }

          .icon-box svg {
            width: 20px;
            height: 20px;
            stroke: currentColor;
          }
        </style>



        <button class="glow-btn my-6" style="--x: 135px; --y: 10.25px">
                            <span class="icon-box">
                              <!-- Right arrow -->
                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-[24px] h-[24px]" data-icon-replaced="true" style="width: 24px; height: 24px; color: rgb(17, 24, 39);"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                            </span>
                            Get Started
                          </button>

        <script>
          const btn = document.querySelector('.glow-btn');
                          btn.addEventListener('mousemove', (e) => {
                            const rect = btn.getBoundingClientRect();
                            const x = e.clientX - rect.left;
                            const y = e.clientY - rect.top;
                            btn.style.setProperty('--x', x + 'px');
                            btn.style.setProperty('--y', y + 'px');
                          });
        </script>






      </div>
    </div>

    <div class="relative">
      <!-- Background mini line card -->
      <div
        class="absolute -top-2 right-0 w-64 sm:w-80 rounded-xl border p-4 backdrop-blur border-white/10 bg-neutral-900/70">
        <div class="flex items-center justify-between">
          <span class="text-xs text-neutral-300">Total Revenue</span>
          <button class="p-1 rounded transition hover:bg-white/5" aria-label="More">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" class="lucide lucide-more-horizontal">
                  <circle cx="12" cy="12" r="1" class=""></circle>
                  <circle cx="19" cy="12" r="1" class=""></circle>
                  <circle cx="5" cy="12" r="1" class=""></circle>
                </svg>
              </button>
        </div>
        <div class="mt-2 text-2xl font-semibold tracking-tight">$86,577.41</div>
        <div class="mt-3 h-24 rounded-lg border p-2 bg-neutral-900/70 border-white/10">
          <div class="h-full">
            <canvas data-canvas="hero-line" width="536" height="156"
              style="display: block; box-sizing: border-box; height: 78px; width: 268px;" class=""></canvas>
          </div>
        </div>
      </div>

      <!-- Foreground growth card -->
      <div
        class="sm:mt-32 lg:mt-24 [--fx-filter:blur(13px)_liquid-glass(5,10)_saturate(1.25)_noise(0.5,1,0)] bg-neutral-900/10 w-full max-w-sm border-white/10 border rounded-xl ring-white/10 ring-1 mt-32 pt-4 pr-4 pb-4 pl-4 relative backdrop-blur">
        <div class="text-xs text-neutral-300">Revenue Growth</div>
        <div class="text-[13px] text-neutral-400">Weekly report</div>
        <div class="mt-2 flex items-baseline gap-2">
          <div class="text-3xl font-semibold tracking-tight">$6,742.77</div>
          <span class="inline-flex items-center gap-1 text-xs ring-1 px-1.5 py-0.5 rounded-full text-emerald-300 bg-emerald-400/10 ring-emerald-400/30" style="">

                8.0%
              </span>
        </div>
        <div
          class="bg-neutral-900/70 h-28 border-white/10 border rounded-lg mt-3 pt-2 pr-2 pb-2 pl-2 overflow-hidden relative"
          style="background: linear-gradient(135deg, rgba(244,63,94,0.1) 0%, rgba(56,189,248,0.1) 100%);">
          <div class="h-full relative">
            <canvas data-canvas="hero-bars" width="664" height="188"
              style="display: block; box-sizing: border-box; height: 94px; width: 332px;" class=""></canvas>

            <!-- Animated Schema Overlay -->
            <svg class="absolute inset-0 w-full h-full pointer-events-none"
              style="mix-blend-mode: screen; opacity: 0.3;">
              <defs class="">


              </defs>

              <!-- Animated connection lines -->
              <g class="schema-lines" style="animation: schemaFloat 4s ease-in-out infinite;">
                <line x1="10%" y1="20%" x2="30%" y2="50%" stroke="url(#schemaGrad1)" stroke-width="1.5" opacity="0.6"
                  filter="url(#glow)" style="animation: schemaPulse 2s ease-in-out infinite;" class=""></line>
                <line x1="30%" y1="50%" x2="50%" y2="30%" stroke="url(#schemaGrad1)" stroke-width="1.5" opacity="0.6"
                  filter="url(#glow)" style="animation: schemaPulse 2s ease-in-out 0.3s infinite;" class=""></line>
                <line x1="50%" y1="30%" x2="70%" y2="60%" stroke="url(#schemaGrad1)" stroke-width="1.5" opacity="0.6"
                  filter="url(#glow)" style="animation: schemaPulse 2s ease-in-out 0.6s infinite;" class=""></line>
                <line x1="70%" y1="60%" x2="90%" y2="40%" stroke="url(#schemaGrad1)" stroke-width="1.5" opacity="0.6"
                  filter="url(#glow)" style="animation: schemaPulse 2s ease-in-out 0.9s infinite;" class=""></line>
              </g>

              <!-- Animated nodes -->
              <circle cx="10%" cy="20%" r="3" fill="rgb(244,63,94)" filter="url(#glow)"
                style="animation: schemaNode 2s ease-in-out infinite;" class=""></circle>
              <circle cx="30%" cy="50%" r="3" fill="rgb(168,85,247)" filter="url(#glow)"
                style="animation: schemaNode 2s ease-in-out 0.3s infinite;" class=""></circle>
              <circle cx="50%" cy="30%" r="3" fill="rgb(56,189,248)" filter="url(#glow)"
                style="animation: schemaNode 2s ease-in-out 0.6s infinite;" class=""></circle>
              <circle cx="70%" cy="60%" r="3" fill="rgb(251,191,36)" filter="url(#glow)"
                style="animation: schemaNode 2s ease-in-out 0.9s infinite;" class=""></circle>
              <circle cx="90%" cy="40%" r="3" fill="rgb(52,211,153)" filter="url(#glow)"
                style="animation: schemaNode 2s ease-in-out 1.2s infinite;" class=""></circle>
            </svg>
          </div>

          <style>
            @keyframes schemaFloat {

              0%,
              100% {
                transform: translateY(0px);
              }

              50% {
                transform: translateY(-3px);
              }
            }

            @keyframes schemaPulse {

              0%,
              100% {
                opacity: 0.4;
                stroke-width: 1.5;
              }

              50% {
                opacity: 0.8;
                stroke-width: 2;
              }
            }

            @keyframes schemaNode {

              0%,
              100% {
                transform: scale(1);
                opacity: 0.8;
              }

              50% {
                transform: scale(1.4);
                opacity: 1;
              }
            }
          </style>
        </div>




































      </div>

      <!-- Scripts (scoped to hero card) -->
      <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
      <script>
        (function (container) {
              if (!container || !window.Chart) return;
              const lineEl = container.querySelector('canvas[data-canvas="hero-line"]');
              const barEl = container.querySelector('canvas[data-canvas="hero-bars"]');
              if (!lineEl || !barEl) return;

              const lctx = lineEl.getContext('2d');
              const bctx = barEl.getContext('2d');

              const lineColor = 'rgba(244,63,94,1)'; // rose-500
              const lg = lctx.createLinearGradient(0, 0, 0, 120);
              lg.addColorStop(0, 'rgba(244,63,94,0.35)');
              lg.addColorStop(1, 'rgba(244,63,94,0)');

              new Chart(lctx, {
                type: 'line',
                data: {
                  labels: Array.from({ length: 14 }, (_, i) => i + 1),
                  datasets: [{
                    data: [42,45,44,46,49,53,52,55,58,60,64,63,68,72],
                    borderColor: lineColor,
                    backgroundColor: lg,
                    tension: 0.35,
                    borderWidth: 2,
                    pointRadius: 0,
                    fill: true
                  }]
                },
                options: {
                  responsive: true,
                  maintainAspectRatio: false,
                  plugins: { legend: { display: false }, tooltip: { enabled: true, intersect: false, mode: 'index' } },
                  scales: { x: { display: false }, y: { display: false } }
                }
              });

              new Chart(bctx, {
                type: 'bar',
                data: {
                  labels: ['Mo','Tu','We','Th','Fr','Sa','Su'],
                  datasets: [{
                    data: [12,18,14,22,36,28,24],
                    backgroundColor: 'rgba(244,63,94,1)',
                    borderRadius: 6,
                    maxBarThickness: 18
                  }]
                },
                options: {
                  responsive: true,
                  maintainAspectRatio: false,
                  plugins: { legend: { display: false }, tooltip: { enabled: true } },
                  scales: { x: { display: false }, y: { display: false } }
                }
              });
            })(document.currentScript.closest('[data-card="hero-feature"]'));
      </script>
    </div>
  </div>
</div>