Timeline Horizontal

<section class="ws-timeline ws-timeline-horizontal bg-[var(--ws-color-surface)] px-6 py-16">
  <div class="mx-auto max-w-5xl">
    <h2 class="mb-12 text-center text-3xl font-bold text-[var(--ws-color-text)]">Product Roadmap</h2>

    <div class="relative">
      <!-- Horizontal line -->
      <div class="absolute left-0 top-5 h-px w-full bg-[var(--ws-color-border)]"></div>

      <div class="flex justify-between">
        <!-- Step 1: Completed -->
        <div class="relative flex w-40 flex-col items-center text-center">
          <div class="relative z-10 flex h-10 w-10 items-center justify-center rounded-full bg-emerald-500 shadow-md">
            <svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
          </div>
          <h3 class="mt-4 text-sm font-semibold text-[var(--ws-color-text)]">Discovery</h3>
          <p class="mt-1 text-xs text-[var(--ws-color-text-muted)]">Research & validation</p>
          <time class="mt-2 text-xs font-medium text-emerald-600">Q1 2025</time>
        </div>

        <!-- Step 2: Completed -->
        <div class="relative flex w-40 flex-col items-center text-center">
          <div class="relative z-10 flex h-10 w-10 items-center justify-center rounded-full bg-emerald-500 shadow-md">
            <svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
          </div>
          <h3 class="mt-4 text-sm font-semibold text-[var(--ws-color-text)]">Foundation</h3>
          <p class="mt-1 text-xs text-[var(--ws-color-text-muted)]">Core architecture</p>
          <time class="mt-2 text-xs font-medium text-emerald-600">Q2 2025</time>
        </div>

        <!-- Step 3: Current -->
        <div class="relative flex w-40 flex-col items-center text-center">
          <div class="relative z-10 flex h-10 w-10 items-center justify-center rounded-full bg-blue-500 shadow-md ring-4 ring-blue-100">
            <span class="h-2.5 w-2.5 rounded-full bg-[var(--ws-color-surface)]"></span>
          </div>
          <h3 class="mt-4 text-sm font-bold text-blue-600">Beta Launch</h3>
          <p class="mt-1 text-xs text-[var(--ws-color-text-muted)]">Public beta release</p>
          <time class="mt-2 text-xs font-medium text-blue-600">Q3 2025</time>
        </div>

        <!-- Step 4: Upcoming -->
        <div class="relative flex w-40 flex-col items-center text-center">
          <div class="relative z-10 flex h-10 w-10 items-center justify-center rounded-full border-2 border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] shadow-sm">
            <span class="h-2.5 w-2.5 rounded-full bg-[var(--ws-color-border)]"></span>
          </div>
          <h3 class="mt-4 text-sm font-semibold text-[var(--ws-color-text-muted)]">Scale</h3>
          <p class="mt-1 text-xs text-[var(--ws-color-text-muted)]">Enterprise features</p>
          <time class="mt-2 text-xs font-medium text-[var(--ws-color-text-muted)]">Q4 2025</time>
        </div>

        <!-- Step 5: Upcoming -->
        <div class="relative flex w-40 flex-col items-center text-center">
          <div class="relative z-10 flex h-10 w-10 items-center justify-center rounded-full border-2 border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] shadow-sm">
            <span class="h-2.5 w-2.5 rounded-full bg-[var(--ws-color-border)]"></span>
          </div>
          <h3 class="mt-4 text-sm font-semibold text-[var(--ws-color-text-muted)]">Ecosystem</h3>
          <p class="mt-1 text-xs text-[var(--ws-color-text-muted)]">Plugins & marketplace</p>
          <time class="mt-2 text-xs font-medium text-[var(--ws-color-text-muted)]">Q1 2026</time>
        </div>
      </div>
    </div>
  </div>
</section>