Animated Stacked Glassmorphic Credit Card Showcase

<section class="sm:px-8 sm:mt-32 [animation:fadeSlideIn_0.8s_ease-out_0.7s_both] max-w-7xl mt-32 mr-auto ml-auto px-8">
  <div class="relative">
    <div class="sm:p-6 border rounded-2xl ring-1 pt-4 pr-4 pb-4 pl-4 backdrop-blur-md bg-neutral-950/80 border-white/10 ring-white/5" style="mask-image: linear-gradient(180deg, transparent, black 0%, black 0%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, black 0%, black 0%, transparent);">
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
        <!-- Sidebar -->
        <aside class="lg:col-span-3">
          <div class="h-full rounded-xl border p-4 sm:p-5 ring-1 border-white/10 bg-neutral-900/90 ring-white/5">
            <div class="flex items-center justify-between">
              <div class="inline-flex items-center gap-2 text-sm font-semibold tracking-tight font-geist text-white">
                <span class="text-sm font-semibold tracking-tight font-geist text-white">Moneo</span>
              </div>
              <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg ring-1 bg-white/5 ring-white/10">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="20" height="14" x="2" y="5" rx="2" class=""></rect><path d="M2 10h20" class=""></path></svg>
              </span>
            </div>

            <div class="mt-5">
              <div class="relative">
                <svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="m21 21-4.3-4.3" class=""></path>
                  <circle cx="11" cy="11" r="8" class=""></circle>
                </svg>
                <input class="w-full rounded-xl ring-1 pl-9 pr-3 py-2.5 text-sm placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-emerald-400/40 bg-neutral-800/50 ring-white/10 text-white" placeholder="Search anything…">
              </div>
            </div>

            <div class="mt-6">
              <p class="text-xs text-neutral-500 mb-3 uppercase tracking-wide font-geist">Navigation</p>
              <nav class="space-y-3">
                <a class="flex items-center justify-between rounded-xl bg-white/[0.06] ring-1 px-3 py-3 text-sm ring-white/10 text-white" href="#">
                  <span class="inline-flex items-center gap-3 font-geist">
                    <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg ring-1 bg-white/10 ring-white/10">
                      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1" class=""></rect><rect x="14" y="3" width="7" height="7" rx="1" class=""></rect><rect x="14" y="14" width="7" height="7" rx="1" class=""></rect><rect x="3" y="14" width="7" height="7" rx="1" class=""></rect></svg>
                    </span>
                  Overview
                  </span>
                  <span class="h-2 w-2 rounded-full bg-emerald-400"></span>
                </a>

                <a class="flex items-center gap-3 rounded-xl ring-1 px-3 py-3 text-sm transition-colors font-geist hover:bg-white/5 ring-white/10 text-neutral-300" href="#">
                  <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg ring-1 bg-white/5 ring-white/10">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8a6 6 0 0 1-12 0" class=""></path><path d="M6 8V5a6 6 0 1 1 12 0v3" class=""></path><path d="M12 19h.01" class=""></path></svg>
                  </span>
                  Notifications
                </a>

                <a class="flex items-center gap-3 rounded-xl ring-1 px-3 py-3 text-sm transition-colors font-geist hover:bg-white/5 ring-white/10 text-neutral-300" href="#">
                  <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg ring-1 bg-white/5 ring-white/10">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12A9 9 0 1 1 12 3" class=""></path><path d="M3.6 15h10.8" class=""></path><path d="M3.6 11H21" class=""></path></svg>
                  </span>
                  AI Insights
                </a>

                <a class="flex items-center gap-3 rounded-xl ring-1 px-3 py-3 text-sm transition-colors font-geist hover:bg-white/5 ring-white/10 text-neutral-300" href="#">
                  <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg ring-1 bg-white/5 ring-white/10">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6H6" class=""></path><path d="M6 12h12" class=""></path><path d="M6 18h12" class=""></path></svg>
                  </span>
                  Activity
                </a>

                <a class="flex items-center gap-3 rounded-xl ring-1 px-3 py-3 text-sm transition-colors font-geist hover:bg-white/5 ring-white/10 text-neutral-300" href="#">
                  <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg ring-1 bg-white/5 ring-white/10">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2" class=""></rect><path d="M2 10h20" class=""></path></svg>
                  </span>
                  Cards
                </a>
              </nav>
            </div>

            <div class="mt-8">
              <p class="text-xs text-neutral-500 mb-3 uppercase tracking-wide font-geist">AI Assistant</p>
              <div class="rounded-xl bg-white/[0.06] ring-1 p-3 flex items-center gap-3 ring-white/10">
                <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500/15 ring-1 text-emerald-300 ring-emerald-400/30">
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v18" class=""></path><path d="M3 12h18" class=""></path></svg>
                </span>
                <div class="text-sm">
                  <p class="tracking-tight font-medium font-geist text-white">Smart Budget</p>
                  <p class="text-xs font-geist text-neutral-400">AI-powered tracking</p>
                </div>
              </div>
            </div>
          </div>
        </aside>

        <!-- Main -->
        <main class="lg:col-span-9 space-y-6">
          <!-- Tabs / user -->
          <div class="flex items-center justify-between overflow-x-auto">
            <div class="flex gap-2 flex-nowrap pb-2 pr-3">
              <button class="px-4 py-2 rounded-full bg-emerald-500/15 text-sm ring-1 tracking-tight font-geist whitespace-nowrap text-emerald-300 ring-emerald-400/30">Overview</button>
              <button class="px-4 py-2 rounded-full text-sm ring-1 tracking-tight font-geist whitespace-nowrap hover:bg-white/5 text-neutral-300 ring-white/10">Wallet</button>
              <button class="px-4 py-2 rounded-full text-sm ring-1 tracking-tight font-geist whitespace-nowrap hover:bg-white/5 text-neutral-300 ring-white/10">Transfers</button>
              <button class="px-4 py-2 rounded-full text-sm ring-1 tracking-tight font-geist whitespace-nowrap hover:bg-white/5 text-neutral-300 ring-white/10">Reports</button>
              <button class="px-4 py-2 rounded-full text-sm ring-1 tracking-tight font-geist whitespace-nowrap hover:bg-white/5 text-neutral-300 ring-white/10">Team</button>
              <button class="px-4 py-2 rounded-full text-sm ring-1 tracking-tight font-geist whitespace-nowrap hover:bg-white/5 text-neutral-300 ring-white/10">Settings</button>
            </div>
            <div class="flex gap-3 items-center shrink-0 ml-3">
              <img class="w-9 h-9 object-cover ring-1 rounded-full ring-white/15" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" alt="User">
            </div>
          </div>

          <!-- Earnings + Card -->
          <div class="grid grid-cols-1 gap-6 items-stretch lg:[grid-template-columns:minmax(0,_420px)_minmax(0,_1fr)]">
            <!-- Chart -->
            <div class="flex flex-col w-full h-full max-w-lg rounded-2xl ring-1 p-5 border bg-neutral-900/95 ring-white/10 border-white/10">
              <div class="flex items-start justify-between">
                <div class="">
                  <div class="flex items-baseline gap-2">
                    <p class="text-3xl font-geist font-light tracking-tight text-white" style="">$742,560</p>
                    <span class="text-xs rounded-full px-2 py-0.5 font-medium font-geist text-neutral-900 bg-emerald-400">+2.1%</span>
                  </div>
                  <p class="mt-1 text-xs font-geist text-neutral-400">Net inflow · last 7 days</p>
                </div>
              </div>

              <div class="mt-6 grow">
                <div class="relative h-48 sm:h-56 md:h-64">
                  <canvas id="nexa-earnings" class="w-full h-full" width="756" height="512" style="display: block; box-sizing: border-box; height: 256px; width: 378px;"></canvas>
                </div>
              </div>
            </div>

            <!-- Card -->
            <div class="h-full flex flex-col w-full rounded-2xl ring-1 p-5 border bg-neutral-900/95 ring-white/10 border-white/10">
              <div class="rounded-2xl p-5 ring-1 ring-white/10" style="background: radial-gradient(120% 120% at 20% 0%, rgba(240,240,240,0.12) 0%, rgba(163,163,163,0.06) 35%, rgba(20,20,20,0.45) 70%), linear-gradient(135deg, rgba(115,115,115,0.15), rgba(163,163,163,0.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);">
                <div class="flex items-center justify-between">
                  <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-white/10 text-white">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2" class=""></rect><path d="M2 10h20" class=""></path></svg>
                  </span>
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-neutral-300/80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M4 11V7a2 2 0 0 1 2-2h12" class=""></path>
                    <path d="M20 13v4a2 2 0 0 1-2 2H6" class=""></path>
                    <path d="M15 7h.01" class=""></path>
                  </svg>
                </div>

                <div class="mt-6">
                  <div class="inline-flex items-center gap-2 text-white/90">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-neutral-200" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <circle cx="12" cy="12" r="3" class=""></circle>
                      <path d="M2 12a10 10 0 0 1 20 0" class=""></path>
                    </svg>
                    <p class="text-lg sm:text-xl font-semibold tracking-tight font-geist text-white">5312 9087 4421 1160</p>
                  </div>

                  <div class="mt-6 grid grid-cols-2 gap-4 text-white/90">
                    <div>
                      <p class="text-[11px] font-geist text-neutral-400">Valid Thru</p>
                      <p class="text-sm tracking-tight font-geist">09/30</p>
                    </div>
                    <div class="text-right">
                      <p class="text-[11px] font-geist text-neutral-400">CVC</p>
                      <p class="text-sm tracking-tight font-geist">• • • •</p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="mt-5 grid grid-cols-4 gap-3">
                <div class="flex flex-col items-center gap-2">
                  <span class="h-12 w-12 inline-flex items-center justify-center rounded-xl bg-emerald-500/15 ring-1 ring-emerald-400/30">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-emerald-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m7 10 5 5 5-5" class=""></path></svg>
                  </span>
                  <span class="text-xs font-geist text-neutral-400">Pay</span>
                </div>
                <div class="flex flex-col items-center gap-2">
                  <span class="h-12 w-12 inline-flex items-center justify-center rounded-xl ring-1 bg-white/5 ring-white/10">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-neutral-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m17 14-5-5-5 5" class=""></path></svg>
                  </span>
                  <span class="text-xs font-geist text-neutral-400">Request</span>
                </div>
                <div class="flex flex-col items-center gap-2">
                  <span class="h-12 w-12 inline-flex items-center justify-center rounded-xl ring-1 bg-white/5 ring-white/10">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-neutral-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 2v4" class=""></path><path d="M16 2v4" class=""></path><rect x="3" y="8" width="18" height="12" rx="2" class=""></rect></svg>
                  </span>
                  <span class="text-xs font-geist text-neutral-400">Invoice</span>
                </div>
                <div class="flex flex-col items-center gap-2">
                  <span class="h-12 w-12 inline-flex items-center justify-center rounded-xl ring-1 bg-white/5 ring-white/10">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-neutral-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1" class=""></rect><rect x="14" y="3" width="7" height="7" rx="1" class=""></rect><rect x="14" y="14" width="7" height="7" rx="1" class=""></rect><rect x="3" y="14" width="7" height="7" rx="1" class=""></rect></svg>
                  </span>
                  <span class="text-xs font-geist text-neutral-400">Tools</span>
                </div>
              </div>
            </div>
          </div>

          <!-- KPI Cards -->
          <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
            <div class="rounded-2xl ring-1 p-5 border bg-neutral-900/95 ring-white/10 border-white/10">
              <div class="flex items-center justify-between">
                <p class="text-sm font-geist text-neutral-400">Revenue</p>
              </div>
              <div class="mt-3 flex items-baseline class= font-geist" text-3xl="" sm:text-xl="" font-semibold="" text-white="" tracking-tight"="">$31,240.12<p class="text-3xl sm:text-xl font-semibold tracking-tight font-geist text-white"></p>
                <span class="text-xs rounded-full px-2 py-0.5 font-medium font-geist text-neutral-900 bg-emerald-400">+4.2%</span>
              </div>
              <p class="mt-1 text-xs text-neutral-500 font-geist">vs. previous week</p>
            </div>

            <div class="rounded-2xl ring-1 p-5 border bg-neutral-900/95 ring-white/10 border-white/10">
              <div class="flex items-center justify-between">
                <p class="text-sm font-geist text-neutral-400">Operating Costs</p>
                <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg ring-1 bg-white/5 ring-white/10">
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3v18h18" class=""></path><path d="M18 6 6 18" class=""></path></svg>
                </span>
              </div>
              <div class="mt-3 flex items-baseline gap-2">
                <p class="text-3xl sm:text-xl font-semibold tracking-tight font-geist text-white">$4,860.00</p>
                <span class="text-xs rounded-full px-2 py-0.5 font-medium font-geist text-neutral-900 bg-emerald-400">-1.3%</span>
              </div>
              <p class="mt-1 text-xs text-neutral-500 font-geist">vs. previous week</p>
            </div>

            <div class="rounded-2xl ring-1 p-5 border bg-neutral-900/95 ring-white/10 border-white/10">
              <div class="flex items-center justify-between">
                <p class="text-sm font-geist text-neutral-400">Burn Rate</p>
                <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg ring-1 bg-white/5 ring-white/10">
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10" class=""></circle><path d="M12 6v6l4 2" class=""></path></svg>
                </span>
              </div>
              <div class="mt-3 flex items-baseline gap-2">
                <p class="text-3xl sm:text-xl font-semibold tracking-tight font-geist text-white">$2,140.00</p>
                <span class="text-xs rounded-full px-2 py-0.5 font-medium font-geist text-neutral-900 bg-emerald-400">-0.9%</span>
              </div>
              <p class="mt-1 text-xs text-neutral-500 font-geist">rolling 30 days</p>
            </div>

            <div class="rounded-2xl ring-1 p-5 border bg-neutral-900/95 ring-white/10 border-white/10">
              <div class="flex items-center justify-between">
                <p class="text-sm font-geist text-neutral-400">Cash Reserve</p>
                <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg ring-1 bg-white/5 ring-white/10">
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2" class=""></rect><path d="M2 10h20" class=""></path></svg>
                </span>
              </div>
              <div class="mt-3 flex items-baseline gap-2">
                <p class="text-3xl sm:text-xl font-semibold tracking-tight font-geist text-white">$3,980.55</p>
                <span class="text-xs rounded-full px-2 py-0.5 font-medium font-geist text-neutral-900 bg-emerald-400">+1.7%</span>
              </div>
              <p class="mt-1 text-xs text-neutral-500 font-geist">month to date</p>
            </div>
          </div>
        </main>
      </div>
    </div>
  </div>

  <!-- Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js" class=""></script>
  <script class="">
    (function () {
      const el = document.getElementById('nexa-earnings');
      if (!el) return;

      if (window.Chart) {
        const existing = Chart.getChart(el);
        if (existing) existing.destroy();
      }

      const ctx = el.getContext('2d');
      const gradient = ctx.createLinearGradient(0, 0, 0, el.height || 240);
      gradient.addColorStop(0, 'rgba(16, 185, 129, 0.45)');
      gradient.addColorStop(1, 'rgba(16, 185, 129, 0.06)');

      const grid = 'rgba(255,255,255,0.06)';
      const label = 'rgba(255,255,255,0.65)';

      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
          datasets: [{
            label: 'Net inflow',
            data: [8, 19, 14, 27, 35, 22, 18],
            backgroundColor: gradient,
            borderColor: '#10b981',
            borderWidth: 1,
            borderRadius: 8,
            barPercentage: 0.6,
            categoryPercentage: 0.7
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: { display: false },
            tooltip: {
              backgroundColor: 'rgba(17,24,39,0.95)',
              titleColor: '#fff',
              bodyColor: '#e5e7eb',
              displayColors: false,
              padding: 10
            }
          },
          scales: {
            x: { grid: { color: grid, drawBorder: false }, ticks: { color: label, font: { size: 11 } } },
            y: { grid: { color: grid, drawBorder: false }, ticks: { color: label, callback: v => '$' + v + 'k', maxTicksLimit: 5 } }
          }
        }
      });
    })();
  </script>
</section>