Project Roadmap Progress Card

<div class="flex flex-col bg-white rounded-3xl pt-5 pr-6 pb-5 pl-6 shadow-sm">
    <div class="flex items-center justify-between mb-4">
      <div class="">
        <h2 class="text-xl sm:text-[22px] tracking-tight font-semibold text-slate-900">Project roadmap</h2>
        <p class="text-xs text-slate-500 mt-1">Track each phase of your learning launch.</p>
      </div>
      <button class="inline-flex items-center gap-1.5 rounded-full bg-slate-900 text-white px-3 py-1.5 text-[11px] font-medium hover:bg-slate-800 transition">
        <span>New task</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus w-3.5 h-3.5"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
      </button>
    </div>

    <div class="mt-2 space-y-3">
      <!-- Intro -->
      <div class="flex items-center gap-3">
        <div class="w-16 text-[11px] text-slate-500">Intro</div>
        <div class="flex-1">
          <div class="h-2 rounded-full bg-slate-100 overflow-hidden">
            <div class="h-full w-full bg-slate-900"></div>
          </div>
        </div>
        <div class="flex items-center gap-2 text-[11px] text-slate-600">
          <span class="font-medium">100%</span>
          <div class="flex -space-x-2">
            <img src="https://images.unsplash.com/photo-1544723795-3fb6469f5b39?auto=format&amp;fit=crop&amp;w=120&amp;h=120&amp;q=80" class="w-5 h-5 rounded-full border border-white" alt="Member">
            <img src="https://images.unsplash.com/photo-1544723795-3fb6469f5b39?auto=format&amp;fit=crop&amp;w=120&amp;h=120&amp;q=80" class="w-5 h-5 rounded-full border border-white" alt="Member">
          </div>
        </div>
      </div>

      <!-- Audit -->
      <div class="flex items-center gap-3">
        <div class="w-16 text-[11px] text-slate-500">Audit</div>
        <div class="flex-1">
          <div class="h-2 rounded-full bg-slate-100 overflow-hidden">
            <div class="h-full w-[59%] bg-slate-900"></div>
          </div>
        </div>
        <div class="flex items-center gap-2 text-[11px] text-slate-600">
          <span class="font-medium">59%</span>
          <div class="flex -space-x-2">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4734259a-bad7-422f-981e-ce01e79184f2_1600w.jpg" class="w-5 h-5 rounded-full border border-white" alt="Member">
          </div>
        </div>
      </div>

      <!-- Research -->
      <div class="flex items-center gap-3">
        <div class="w-16 text-[11px] text-slate-500">Research</div>
        <div class="flex-1">
          <div class="h-2 rounded-full bg-slate-100 overflow-hidden">
            <div class="h-full w-[75%] bg-[#d6f14a]"></div>
          </div>
        </div>
        <div class="flex items-center gap-2 text-[11px] text-slate-600">
          <span class="font-medium">75%</span>
          <div class="flex -space-x-2">
            <img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&amp;fit=crop&amp;w=120&amp;h=120&amp;q=80" class="w-5 h-5 rounded-full border border-white" alt="Member">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-5 h-5 rounded-full border border-white" alt="Member">
          </div>
        </div>
      </div>
    </div>

    <div class="mt-4 border-t border-slate-100 pt-3">
      <div class="flex items-center justify-between text-[11px] text-slate-500">
        <div class="flex items-center gap-4">
          <span>Mon 12</span>
          <span class="">Tue 13</span>
          <span>Wed 14</span>
          <span class="font-medium text-slate-900">Thu 15</span>
          <span>Fri 16</span>
        </div>
        <div class="inline-flex items-center gap-1 rounded-full bg-slate-900/5 px-2 py-1">
          <span class="h-1.5 w-1.5 rounded-full bg-[#d6f14a]"></span>
          <span class="text-[10px] text-slate-800">Current day</span>
        </div>
      </div>
    </div>
  </div>