Overview Card

<!--
  Day 74: Overview 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
-->

<!-- Overview 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-indigo-600 to-indigo-500 p-6 text-white"
  >
    <!-- Circle detail in background -->
    <div
      class="absolute -inset-y-8 -right-18 w-40 rounded-full border-4 border-white/5 bg-white/5 ring-4 ring-zinc-950/5"
      aria-hidden="true"
    ></div>
    <!-- END Circle detail in background -->

    <!-- Header content -->
    <div class="relative z-1 flex items-center justify-between">
      <div class="flex items-center gap-3">
        <div
          class="flex size-10 items-center justify-center rounded-lg bg-zinc-950/20 backdrop-blur-sm"
        >
          <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-users inline-block size-6"
          >
            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
            <circle cx="9" cy="7" r="4" />
            <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
            <path d="M16 3.13a4 4 0 0 1 0 7.75" />
          </svg>
        </div>
        <div>
          <h2 class="font-semibold text-white">Team Dashboard</h2>
          <p class="text-xs font-medium text-indigo-200">
            Manage your workspace
          </p>
        </div>
      </div>
      <button
        type="button"
        class="flex size-8 items-center justify-center rounded-lg bg-white/20 text-white backdrop-blur-sm hover:bg-white/30 active:bg-white/20"
      >
        <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-plus inline-block size-6"
        >
          <path d="M5 12h14" />
          <path d="M12 5v14" />
        </svg>
      </button>
    </div>
    <!-- END Header Content-->
  </div>
  <!-- END Header -->

  <!-- Content -->
  <div class="flex flex-col gap-6 p-6">
    <!-- Stats Grid -->
    <div class="grid grid-cols-2 gap-4">
      <div class="rounded-lg border border-zinc-100 bg-zinc-50 p-4 text-center">
        <div class="text-xl font-bold text-zinc-900">46</div>
        <div class="mt-1 text-xs font-medium text-zinc-600">
          Active Projects
        </div>
      </div>
      <div class="rounded-lg border border-zinc-100 bg-zinc-50 p-4 text-center">
        <div class="text-xl font-bold text-zinc-900">25</div>
        <div class="mt-1 text-xs font-medium text-zinc-600">Team Members</div>
      </div>
    </div>
    <!-- END Stats Grid -->

    <!-- Recent Activity -->
    <div class="flex flex-col gap-4">
      <h3 class="text-sm font-semibold text-zinc-900">Recent Activity</h3>
      <div class="flex flex-col gap-4">
        <div class="flex items-center gap-3">
          <div
            class="flex size-10 flex-none items-center justify-center rounded-full bg-indigo-100 text-indigo-600"
          >
            <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-briefcase-business inline-block size-5"
            >
              <path d="M12 12h.01" />
              <path d="M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2" />
              <path d="M22 13a18.15 18.15 0 0 1-20 0" />
              <rect width="20" height="14" x="2" y="6" rx="2" />
            </svg>
          </div>
          <div class="grow">
            <p class="text-sm text-zinc-900">Project X updated</p>
            <p class="text-xs text-zinc-600">2 hours ago</p>
          </div>
        </div>
        <div class="flex items-center gap-3">
          <div
            class="flex size-10 flex-none items-center justify-center rounded-full bg-indigo-100 text-indigo-600"
          >
            <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-user-plus inline-block size-5"
            >
              <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
              <circle cx="9" cy="7" r="4" />
              <line x1="19" x2="19" y1="8" y2="14" />
              <line x1="22" x2="16" y1="11" y2="11" />
            </svg>
          </div>
          <div class="grow">
            <p class="text-sm text-zinc-900">New team member joined</p>
            <p class="text-xs text-zinc-600">5 hours ago</p>
          </div>
        </div>
      </div>
    </div>
    <!-- END Recent Activity -->

    <!-- Projects link -->
    <a
      href="javascript:void(0)"
      class="w-full rounded-lg bg-indigo-600 px-4 py-3 text-center text-sm font-medium text-white hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500/50 focus:ring-offset-2 focus:outline-none active:bg-indigo-600"
    >
      View All Projects
    </a>
    <!-- END Projects link -->
  </div>
</div>
<!-- END Overview Card -->