Order Tracker Base

<section class="ws-order-tracker mx-auto max-w-3xl px-6 py-12">
  <h2 class="mb-8 text-2xl font-bold text-slate-900">Track Your Order</h2>

  <!-- Order summary cards -->
  <div class="mb-8 grid gap-4 sm:grid-cols-3">
    <div class="rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-4">
      <p class="text-xs font-medium uppercase tracking-wider text-slate-400">Order Number</p>
      <p class="mt-1 text-sm font-bold text-slate-900">#ORD-2026-4281</p>
    </div>
    <div class="rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-4">
      <p class="text-xs font-medium uppercase tracking-wider text-slate-400">Product</p>
      <p class="mt-1 text-sm font-bold text-slate-900">Premium Cotton T-Shirt × 2</p>
    </div>
    <div class="rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-4">
      <p class="text-xs font-medium uppercase tracking-wider text-slate-400">Expected Delivery</p>
      <p class="mt-1 text-sm font-bold text-emerald-600">March 25, 2026</p>
    </div>
  </div>

  <!-- Status pipeline -->
  <div class="rounded-2xl border border-slate-200 bg-[var(--ws-color-surface)] p-6">
    <div class="flex items-center justify-between">
      <!-- Step 1: Completed -->
      <div class="flex flex-col items-center text-center">
        <div class="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-500 text-white shadow">
          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
        </div>
        <p class="mt-2 text-xs font-semibold text-emerald-600">Confirmed</p>
        <p class="text-[10px] text-slate-400">Mar 20</p>
      </div>

      <div class="flex-1 border-t-2 border-emerald-500 mx-2"></div>

      <!-- Step 2: Completed -->
      <div class="flex flex-col items-center text-center">
        <div class="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-500 text-white shadow">
          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
        </div>
        <p class="mt-2 text-xs font-semibold text-emerald-600">Processing</p>
        <p class="text-[10px] text-slate-400">Mar 21</p>
      </div>

      <div class="flex-1 border-t-2 border-emerald-500 mx-2"></div>

      <!-- Step 3: Current -->
      <div class="flex flex-col items-center text-center">
        <div class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-500 text-white shadow ring-4 ring-blue-100">
          <span class="text-xs font-bold">3</span>
        </div>
        <p class="mt-2 text-xs font-bold text-blue-600">Shipped</p>
        <p class="text-[10px] text-slate-400">Mar 22</p>
      </div>

      <div class="flex-1 border-t-2 border-slate-200 mx-2"></div>

      <!-- Step 4: Pending -->
      <div class="flex flex-col items-center text-center">
        <div class="flex h-10 w-10 items-center justify-center rounded-full border-2 border-slate-300 bg-[var(--ws-color-surface)] text-slate-400">
          <span class="text-xs font-bold">4</span>
        </div>
        <p class="mt-2 text-xs font-medium text-slate-400">Out for Delivery</p>
        <p class="text-[10px] text-slate-400">—</p>
      </div>

      <div class="flex-1 border-t-2 border-slate-200 mx-2"></div>

      <!-- Step 5: Pending -->
      <div class="flex flex-col items-center text-center">
        <div class="flex h-10 w-10 items-center justify-center rounded-full border-2 border-slate-300 bg-[var(--ws-color-surface)] text-slate-400">
          <span class="text-xs font-bold">5</span>
        </div>
        <p class="mt-2 text-xs font-medium text-slate-400">Delivered</p>
        <p class="text-[10px] text-slate-400">—</p>
      </div>
    </div>
  </div>
</section>