Analytics Card

<!--
  Day 75: Analytics Card

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Analytics Card -->
<div
  class="relative mx-auto w-full max-w-sm rounded-xl border border-zinc-200 bg-white ring-4 ring-zinc-300/25"
>
  <!-- Header -->
  <div
    class="relative overflow-hidden rounded-t-xl bg-gradient-to-r from-purple-600 to-pink-500 p-6 text-white"
  >
    <!-- Geometric patterns in background -->
    <div
      class="absolute -top-4 -right-4 h-32 w-28 rotate-45 border-2 border-white/10 bg-white/5"
      aria-hidden="true"
    ></div>
    <div
      class="absolute -top-8 -right-8 h-16 w-16 rotate-12 border-2 border-white/5 bg-white/10"
      aria-hidden="true"
    ></div>
    <!-- END Geometric patterns in background -->

    <!-- Header content -->
    <div class="relative z-1 flex items-center justify-between">
      <div class="flex items-center gap-3">
        <div
          class="hidden size-12 items-center justify-center rounded-xl bg-white/20 backdrop-blur-sm sm:flex"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
            class="lucide lucide-trending-up inline-block size-6"
          >
            <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
            <polyline points="16 7 22 7 22 13" />
          </svg>
        </div>
        <div>
          <h2 class="font-bold text-white">Revenue Analytics</h2>
          <p class="text-sm font-medium text-white/90">Monthly performance</p>
        </div>
      </div>
      <div class="text-right text-xl font-bold text-white">$24.8k</div>
    </div>
    <!-- END Header Content-->
  </div>
  <!-- END Header -->

  <!-- Content -->
  <div class="flex flex-col gap-6 p-6">
    <!-- Key Metrics -->
    <div class="grid grid-cols-3 gap-3">
      <div class="text-center">
        <div class="text-2xl font-extrabold text-zinc-900">142%</div>
        <div class="mt-0.5 text-xs font-medium text-zinc-600">Growth</div>
      </div>
      <div class="text-center">
        <div class="text-2xl font-extrabold text-zinc-900">1.2k</div>
        <div class="mt-0.5 text-xs font-medium text-zinc-600">Visitors</div>
      </div>
      <div class="text-center">
        <div class="text-2xl font-extrabold text-zinc-900">8.4%</div>
        <div class="mt-0.5 text-xs font-medium text-zinc-600">Conversion</div>
      </div>
    </div>
    <!-- END Key Metrics -->

    <!-- Chart Area -->
    <div class="rounded-lg border border-zinc-100 bg-zinc-50 p-4">
      <div class="mb-3 flex items-center justify-between">
        <h3 class="text-sm font-semibold text-zinc-900">Weekly Trends</h3>
        <span
          class="inline-flex items-center gap-1 rounded-full bg-purple-100 px-2 py-1 text-xs font-medium text-purple-800"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
            class="lucide lucide-arrow-up-right inline-block size-3"
          >
            <path d="M7 7h10v10" />
            <path d="M7 17 17 7" />
          </svg>
          +12.5%
        </span>
      </div>
      <div class="flex h-32 items-end gap-2">
        <div class="h-20 w-full rounded-t bg-purple-200"></div>
        <div class="h-24 w-full rounded-t bg-purple-300"></div>
        <div class="h-18 w-full rounded-t bg-purple-400"></div>
        <div class="h-28 w-full rounded-t bg-purple-500"></div>
        <div class="h-22 w-full rounded-t bg-purple-600"></div>
        <div class="h-26 w-full rounded-t bg-purple-500"></div>
        <div class="h-21 w-full rounded-t bg-purple-400"></div>
      </div>
    </div>
    <!-- END Chart Area -->

    <!-- Quick Actions -->
    <div class="flex items-center gap-3">
      <button
        type="button"
        class="grow rounded-lg border border-zinc-200 bg-white px-4 py-3 text-center text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:ring-2 focus:ring-purple-500/50 focus:ring-offset-2 focus:outline-none active:bg-zinc-100"
      >
        Export Data
      </button>
      <button
        type="button"
        class="grow rounded-lg bg-purple-600 px-4 py-3 text-center text-sm font-medium text-white hover:bg-purple-700 focus:ring-2 focus:ring-purple-500/50 focus:ring-offset-2 focus:outline-none active:bg-purple-600"
      >
        View Details
      </button>
    </div>
    <!-- END Quick Actions -->
  </div>
</div>
<!-- END Analytics Card -->