Project Timeline Status Card

<div class="sm:p-4 bg-neutral-900/60 max-w-none border-white/10 border rounded-3xl pt-6 pr-6 pb-6 pl-6">
  <div class="flex items-center justify-between mb-3">
    <div class="flex items-center gap-3">

      <div class="flex items-center rounded-full bg-white/5 border border-white/10 p-1">
        <button class="px-3 py-1.5 rounded-full text-xs text-white/70 hover:text-white">Timeline</button>
        <button class="px-3 py-1.5 rounded-full text-xs bg-white/10 text-white border border-white/10">Active</button>
      </div>
    </div>
    <button class="h-8 w-8 grid place-items-center rounded-full bg-white/5 border border-white/10 text-white/70 hover:text-white">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="list" class="lucide lucide-list w-4 h-4" data-icon-replaced="true" style="width: 16px; height: 16px; color: rgb(255, 255, 255);"><path d="M3 5h.01" class=""></path><path d="M3 12h.01" class=""></path><path d="M3 19h.01" class=""></path><path d="M8 5h13" class=""></path><path d="M8 12h13" class=""></path><path d="M8 19h13" class=""></path></svg>
          </button>
  </div>

  <div class="divide-y divide-white/10">
    <!-- Row -->
    <div class="flex items-center justify-between py-3">
      <div class="flex items-center gap-3 min-w-0">
        <div class="w-2 h-2 rounded-full bg-emerald-400"></div>
        <div class="min-w-0">
          <p class="text-sm text-white truncate">Discovery &amp; Research</p>
          <p class="text-xs text-white/50">Week 1</p>
        </div>
      </div>
      <div class="flex items-center gap-3">
        <span class="px-2 py-1 text-[11px] rounded bg-emerald-400/10 border border-emerald-400/20 text-emerald-400">Done</span>
      </div>
    </div>
    <div class="flex items-center justify-between py-3">
      <div class="flex items-center gap-3 min-w-0">
        <div class="w-2 h-2 rounded-full bg-blue-400"></div>
        <div class="min-w-0">
          <p class="text-sm text-white truncate">Design &amp; Prototyping</p>
          <p class="text-xs text-white/50">Week 2-3</p>
        </div>
      </div>
      <div class="flex items-center gap-3">
        <span class="px-2 py-1 text-[11px] rounded bg-blue-400/10 border border-blue-400/20 text-blue-400">Active</span>
      </div>
    </div>
    <div class="flex items-center justify-between py-3">
      <div class="flex items-center gap-3 min-w-0">
        <div class="w-2 h-2 rounded-full bg-white/30"></div>
        <div class="min-w-0">
          <p class="text-sm text-white truncate">Development</p>
          <p class="text-xs text-white/50">Week 4-6</p>
        </div>
      </div>
      <div class="flex items-center gap-3">
        <span class="px-2 py-1 text-[11px] rounded bg-white/5 border border-white/10 text-white/70">Pending</span>
      </div>
    </div>
    <div class="flex items-center justify-between py-3">
      <div class="flex items-center gap-3 min-w-0">
        <div class="w-2 h-2 rounded-full bg-white/30"></div>
        <div class="min-w-0">
          <p class="text-sm text-white truncate">Launch &amp; Optimization</p>
          <p class="text-xs text-white/50">Week 7</p>
        </div>
      </div>
      <div class="flex items-center gap-3">
        <span class="px-2 py-1 text-[11px] rounded bg-white/5 border border-white/10 text-white/70">Pending</span>
      </div>
    </div>
  </div>

  <!-- Subtle bottom fade and CTA ghost -->
  <div class="relative mt-4 overflow-hidden rounded-lg border border-white/10 bg-white/5">
    <button class="w-full py-2 text-sm text-white/50">View full timeline</button>
    <div class="pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t from-black/40 to-transparent">
    </div>
  </div>
</div>