Timeline Alternating

<section class="ws-timeline mx-auto max-w-3xl px-6 py-16">
  <h2 class="mb-12 text-center text-3xl font-bold text-[var(--ws-color-text)]">Our Journey</h2>

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

    <!-- Event: Left side -->
    <div class="relative mb-12 flex items-center">
      <div class="w-1/2 pr-8 text-right">
        <div class="rounded-xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] p-5 shadow-sm">
          <time class="text-xs font-medium uppercase tracking-wider text-[var(--ws-color-text-muted)]">March 2026</time>
          <h3 class="mt-2 text-lg font-semibold text-[var(--ws-color-text)]">Platform Launch</h3>
          <p class="mt-1 text-sm text-[var(--ws-color-text-soft)]">Released the first version with core features and pattern library.</p>
        </div>
      </div>
      <div class="absolute left-1/2 -translate-x-1/2">
        <div class="flex h-10 w-10 items-center justify-center rounded-full border-4 border-[var(--ws-color-surface)] bg-blue-500 shadow">
          <svg class="h-4 w-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg>
        </div>
      </div>
      <div class="w-1/2"></div>
    </div>

    <!-- Event: Right side -->
    <div class="relative mb-12 flex items-center">
      <div class="w-1/2"></div>
      <div class="absolute left-1/2 -translate-x-1/2">
        <div class="flex h-10 w-10 items-center justify-center rounded-full border-4 border-[var(--ws-color-surface)] bg-emerald-500 shadow">
          <svg class="h-4 w-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
        </div>
      </div>
      <div class="w-1/2 pl-8">
        <div class="rounded-xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] p-5 shadow-sm">
          <time class="text-xs font-medium uppercase tracking-wider text-[var(--ws-color-text-muted)]">January 2026</time>
          <h3 class="mt-2 text-lg font-semibold text-[var(--ws-color-text)]">1,000 Users</h3>
          <p class="mt-1 text-sm text-[var(--ws-color-text-soft)]">Reached our first thousand active users and 50 pattern contributions.</p>
          <div class="mt-3 flex -space-x-1.5">
            <div class="h-6 w-6 rounded-full bg-slate-300 ring-2 ring-[var(--ws-color-surface)]"></div>
            <div class="h-6 w-6 rounded-full bg-slate-400 ring-2 ring-[var(--ws-color-surface)]"></div>
            <div class="h-6 w-6 rounded-full bg-slate-500 ring-2 ring-[var(--ws-color-surface)]"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Event: Left side -->
    <div class="relative mb-12 flex items-center">
      <div class="w-1/2 pr-8 text-right">
        <div class="rounded-xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] p-5 shadow-sm">
          <time class="text-xs font-medium uppercase tracking-wider text-[var(--ws-color-text-muted)]">October 2025</time>
          <h3 class="mt-2 text-lg font-semibold text-[var(--ws-color-text)]">Seed Funding</h3>
          <p class="mt-1 text-sm text-[var(--ws-color-text-soft)]">Secured initial funding to accelerate development and grow the team.</p>
        </div>
      </div>
      <div class="absolute left-1/2 -translate-x-1/2">
        <div class="flex h-10 w-10 items-center justify-center rounded-full border-4 border-[var(--ws-color-surface)] bg-amber-500 shadow">
          <svg class="h-4 w-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        </div>
      </div>
      <div class="w-1/2"></div>
    </div>

    <!-- Event: Right side -->
    <div class="relative flex items-center">
      <div class="w-1/2"></div>
      <div class="absolute left-1/2 -translate-x-1/2">
        <div class="flex h-10 w-10 items-center justify-center rounded-full border-4 border-[var(--ws-color-surface)] bg-purple-500 shadow">
          <svg class="h-4 w-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
        </div>
      </div>
      <div class="w-1/2 pl-8">
        <div class="rounded-xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] p-5 shadow-sm">
          <time class="text-xs font-medium uppercase tracking-wider text-[var(--ws-color-text-muted)]">July 2025</time>
          <h3 class="mt-2 text-lg font-semibold text-[var(--ws-color-text)]">Idea Born</h3>
          <p class="mt-1 text-sm text-[var(--ws-color-text-soft)]">The concept for a pattern registry emerged from real-world design system challenges.</p>
        </div>
      </div>
    </div>
  </div>
</section>