Smart Portfolio Analytics Card with Dashboard Preview

<article
  class="group relative overflow-hidden transition-shadow hover:shadow-md bg-neutral-900 border-neutral-800 border rounded-3xl shadow-sm max-w-[500px]">
  <div class="sm:p-8 pt-6 pr-6 pb-6 pl-6">
    <!-- Illustration with portfolio dashboard -->
    <div class="relative h-56 sm:h-64 rounded-2xl bg-neutral-900 ring-1 ring-inset ring-white/5 overflow-hidden">
      <!-- subtle grid pattern -->
      <svg class="absolute inset-0 h-full w-full text-neutral-800" aria-hidden="true">
        <defs>
          <pattern id="grid" width="24" height="24" patternUnits="userSpaceOnUse">
            <path d="M24 0H0V24" fill="none" stroke="currentColor" stroke-width="1"></path>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid)" class=""></rect>
      </svg>
      <span class="absolute left-6 top-4 h-0.5 w-10 rounded bg-blue-500"></span>

      <!-- Portfolio dashboard window -->
      <div
        class="absolute right-6 top-8 sm:right-10 sm:top-10 w-[78%] rounded-2xl border border-neutral-800 bg-neutral-900 shadow-lg">
        <!-- window chrome -->
        <div class="flex items-center gap-2 px-4 py-3 border-b border-neutral-800">
          <span class="h-2.5 w-2.5 rounded-full bg-red-500/80"></span>
          <span class="h-2.5 w-2.5 rounded-full bg-yellow-500/80"></span>
          <span class="h-2.5 w-2.5 rounded-full bg-green-500/80"></span>
          <div class="ml-3 flex items-center gap-2">
            <span class="text-xs text-neutral-400">Portfolio</span>
            <div class="h-2 w-16 rounded bg-neutral-800"></div>
          </div>
        </div>
        <!-- portfolio content -->
        <div class="p-4 space-y-3">
          <!-- Portfolio value -->
          <div class="text-center py-2">
            <div class="text-xl font-semibold text-green-400">$127,348.92</div>
            <div class="text-xs text-green-400">+$2,847.23 (+2.3%)</div>
          </div>
          <!-- Holdings grid -->
          <div class="grid grid-cols-2 gap-2">
            <div class="rounded-lg border border-neutral-800 bg-neutral-950 p-2">
              <div class="flex items-center justify-between">
                <span class="text-xs font-medium text-neutral-300">AAPL</span>
                <span class="text-xs text-green-400">+2.1%</span>
              </div>
              <div class="mt-1 text-xs text-neutral-400">25 shares</div>
            </div>
            <div class="rounded-lg border border-neutral-800 bg-neutral-950 p-2">
              <div class="flex items-center justify-between">
                <span class="text-xs font-medium text-neutral-300">TSLA</span>
                <span class="text-xs text-red-400">-1.5%</span>
              </div>
              <div class="mt-1 text-xs text-neutral-400">10 shares</div>
            </div>
            <div class="rounded-lg border border-neutral-800 bg-neutral-950 p-2">
              <div class="flex items-center justify-between">
                <span class="text-xs font-medium text-neutral-300">MSFT</span>
                <span class="text-xs text-green-400">+0.8%</span>
              </div>
              <div class="mt-1 text-xs text-neutral-400">15 shares</div>
            </div>
            <div class="rounded-lg border border-neutral-800 bg-neutral-950 p-2">
              <div class="flex items-center justify-between">
                <span class="text-xs font-medium text-neutral-300">GOOGL</span>
                <span class="text-xs text-green-400">+1.2%</span>
              </div>
              <div class="mt-1 text-xs text-neutral-400">8 shares</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Content -->
    <div class="mt-6 sm:mt-8">
      <div class="flex items-center gap-3">
        <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="pie-chart" class="lucide lucide-pie-chart h-5 w-5 text-blue-400">
          <path
            d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z">
          </path>
          <path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path>
        </svg>
        <h3 class="text-xl sm:text-2xl font-semibold tracking-tight text-white">Smart Portfolio Analytics</h3>
      </div>
      <p class="mt-3 text-neutral-400 text-sm">AI‑powered insights, risk analysis, and automated rebalancing to optimize
        your investment performance.</p>
      <div class="mt-4">
        <a href="#" class="inline-flex items-center gap-2 text-xs font-medium text-neutral-100 hover:text-neutral-300"
          title="Link disabled in preview mode">
          View portfolio
          <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="arrow-right" class="lucide lucide-arrow-right h-4 w-4">
            <path d="M5 12h14"></path>
            <path d="m12 5 7 7-7 7"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</article>