Project Overview Card

<!--
  Day 76: Project 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
-->

<!-- Project 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-br from-teal-500 to-cyan-600 p-6 text-white"
  >
    <!-- Geometric patterns in background -->
    <div
      class="absolute -top-6 -left-6 h-24 w-24 rotate-12 rounded-full border border-white/20 bg-white/10"
      aria-hidden="true"
    ></div>
    <div
      class="absolute -right-4 -bottom-4 h-20 w-20 -rotate-12 rounded-lg border border-white/10 bg-white/5"
      aria-hidden="true"
    ></div>
    <!-- END Geometric patterns in background -->

    <!-- Header content -->
    <div class="relative z-1">
      <div class="mb-4 flex items-center justify-between">
        <div
          class="flex size-11 items-center justify-center rounded-lg bg-white/25 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-briefcase inline-block size-5"
          >
            <rect width="20" height="14" x="2" y="7" rx="2" ry="2" />
            <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
          </svg>
        </div>
        <div
          class="rounded-full bg-white/20 px-2 py-1 text-xs font-medium text-white/95"
        >
          Active
        </div>
      </div>
      <h2 class="text-xl font-bold text-white">Project Overview</h2>
      <p class="mt-1 text-sm font-medium text-white/90">Development Progress</p>
    </div>
    <!-- END Header Content-->
  </div>
  <!-- END Header -->

  <!-- Content -->
  <div class="p-6">
    <!-- Progress Section -->
    <div class="mb-6">
      <div class="mb-3 flex items-center justify-between">
        <span class="text-sm font-medium text-zinc-700">Overall Progress</span>
        <span class="text-sm font-bold text-teal-600">68%</span>
      </div>
      <div class="h-2 w-full rounded-full bg-zinc-200">
        <div
          class="h-2 rounded-full bg-gradient-to-r from-teal-500 to-cyan-500"
          style="width: 68%"
        ></div>
      </div>
    </div>
    <!-- END Progress Section -->

    <!-- Stats Grid -->
    <div class="mb-6 grid grid-cols-2 gap-4">
      <div class="rounded-lg border border-zinc-100 bg-zinc-50 p-4 text-center">
        <div class="text-2xl font-extrabold text-zinc-900">24</div>
        <div class="mt-1 text-xs font-medium text-zinc-600">Tasks Done</div>
      </div>
      <div class="rounded-lg border border-zinc-100 bg-zinc-50 p-4 text-center">
        <div class="text-2xl font-extrabold text-zinc-900">11</div>
        <div class="mt-1 text-xs font-medium text-zinc-600">Days Left</div>
      </div>
    </div>
    <!-- END Stats Grid -->

    <!-- Team Members -->
    <div class="mb-6">
      <h3 class="mb-3 text-sm font-semibold text-zinc-900">Team Members</h3>
      <div class="flex items-center justify-between">
        <div class="flex -space-x-2">
          <div
            class="size-8 rounded-full border-2 border-white bg-teal-500"
          ></div>
          <div
            class="size-8 rounded-full border-2 border-white bg-cyan-500"
          ></div>
          <div
            class="size-8 rounded-full border-2 border-white bg-zinc-400"
          ></div>
          <div
            class="flex size-8 items-center justify-center rounded-full border-2 border-white bg-zinc-200 text-xs font-semibold text-zinc-600"
          >
            +3
          </div>
        </div>
        <span
          class="inline-flex items-center gap-1 rounded-full bg-teal-100 px-2 py-1 text-xs font-medium text-teal-700"
        >
          <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-3"
          >
            <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>
          6 Members
        </span>
      </div>
    </div>
    <!-- END Team Members -->

    <!-- Action Buttons -->
    <div class="flex items-center gap-3">
      <button
        type="button"
        class="grow rounded-lg border border-zinc-200 bg-zinc-50 px-4 py-2.5 text-center text-sm font-medium text-zinc-700 hover:bg-zinc-100 focus:ring-2 focus:ring-teal-500/50 focus:ring-offset-2 focus:outline-none active:bg-zinc-200"
      >
        View Tasks
      </button>
      <button
        type="button"
        class="grow rounded-lg bg-teal-600 px-4 py-2.5 text-center text-sm font-medium text-white hover:bg-teal-700 focus:ring-2 focus:ring-teal-500/50 focus:ring-offset-2 focus:outline-none active:bg-teal-600"
      >
        Update Status
      </button>
    </div>
    <!-- END Action Buttons -->
  </div>
</div>
<!-- END Project Overview Card -->