Project Status Card

<!--
  Day 73: Project Status 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 Status 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"
>
  <div class="flex flex-col gap-6 p-8">
    <!-- Header -->
    <div class="flex items-start justify-between">
      <div>
        <h2 class="text-lg font-bold text-zinc-900">Project Alpha</h2>
        <p class="mt-1 text-sm text-zinc-600">Development in progress</p>
      </div>
      <div
        class="flex items-center gap-1.5 rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-medium text-emerald-700"
      >
        <div class="size-1.5 rounded-full bg-emerald-500"></div>
        Active
      </div>
    </div>
    <div class="space-y-4">
      <div class="flex items-center justify-between text-sm">
        <h3 class="font-semibold text-zinc-900">Overall Progress</h3>
        <div class="font-medium text-zinc-600">73%</div>
      </div>
      <div class="h-2 overflow-hidden rounded-full bg-zinc-200">
        <div
          class="h-full rounded-full bg-gradient-to-r from-blue-500 to-purple-600"
          style="width: 73%"
        ></div>
      </div>
    </div>
    <!-- END Header -->

    <!-- Stats -->
    <div class="grid grid-cols-2 gap-4">
      <div class="rounded-lg bg-white p-4 shadow-sm ring-1 ring-zinc-200">
        <div class="flex items-center gap-4">
          <div
            class="flex size-8 items-center justify-center rounded-md bg-blue-100 text-blue-600"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="hi-micro hi-check-circle inline-block size-4"
            >
              <path
                fill-rule="evenodd"
                d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z"
                clip-rule="evenodd"
              />
            </svg>
          </div>
          <div>
            <div class="text-xs font-medium text-zinc-600">Completed</div>
            <div class="text-lg font-bold text-zinc-900">24</div>
          </div>
        </div>
      </div>
      <div class="rounded-lg bg-white p-4 shadow-sm ring-1 ring-zinc-200">
        <div class="flex items-center gap-4">
          <div
            class="flex size-8 items-center justify-center rounded-md bg-orange-100 text-orange-600"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="hi-micro hi-plus-circle inline-block size-4"
            >
              <path
                fill-rule="evenodd"
                d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm.75-10.25v2.5h2.5a.75.75 0 0 1 0 1.5h-2.5v2.5a.75.75 0 0 1-1.5 0v-2.5h-2.5a.75.75 0 0 1 0-1.5h2.5v-2.5a.75.75 0 0 1 1.5 0Z"
                clip-rule="evenodd"
              />
            </svg>
          </div>
          <div>
            <div class="text-xs font-medium text-zinc-600">Pending</div>
            <div class="text-lg font-bold text-zinc-900">9</div>
          </div>
        </div>
      </div>
    </div>
    <!-- END Stats -->

    <!-- Team -->
    <div class="space-y-3">
      <h3 class="text-sm font-semibold text-zinc-900">Team Members</h3>
      <div class="flex items-center justify-between gap-2">
        <div class="flex -space-x-2">
          <div
            class="size-8 rounded-full bg-gradient-to-br from-pink-400 to-red-400 ring-2 ring-white"
          ></div>
          <div
            class="size-8 rounded-full bg-gradient-to-br from-blue-400 to-cyan-400 ring-2 ring-white"
          ></div>
          <div
            class="size-8 rounded-full bg-gradient-to-br from-emerald-400 to-emerald-400 ring-2 ring-white"
          ></div>
          <div
            class="flex size-8 items-center justify-center rounded-full bg-zinc-200 text-xs font-semibold text-zinc-600 ring-2 ring-white"
          >
            +3
          </div>
        </div>
        <button
          type="button"
          class="text-xs font-medium text-blue-600 hover:text-blue-700"
        >
          View all
        </button>
      </div>
    </div>
    <!-- END Team -->

    <!-- Actions -->
    <div class="flex gap-2">
      <button
        type="button"
        class="flex grow items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-800 px-4 py-3 text-sm leading-5 font-medium text-white hover:border-zinc-900 hover:bg-zinc-900 hover:text-white focus:ring-2 focus:ring-zinc-500/50 focus:outline-hidden active:border-zinc-700 active:bg-zinc-700"
      >
        View details
      </button>
      <button
        type="button"
        class="flex items-center justify-center gap-2 rounded-lg border border-zinc-200 bg-white px-4 py-3 text-sm leading-5 font-medium text-zinc-700 hover:border-zinc-300 hover:bg-zinc-50 hover:text-zinc-900 focus:ring-2 focus:ring-zinc-500/50 focus:outline-hidden active:border-zinc-400 active:bg-zinc-100"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-arrow-down-tray inline-block size-4"
        >
          <path
            d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z"
          />
          <path
            d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"
          />
        </svg>
        <span class="sr-only">Download</span>
      </button>
    </div>
    <!-- END Actions -->
  </div>
</div>
<!-- END Project Status Card -->