About Timeline

<section class="ws-about bg-[var(--ws-about-bg)] px-6 py-20">
  <div class="mx-auto max-w-3xl text-center">
    <h2
      class="text-3xl font-bold tracking-tight text-[var(--ws-about-text)] sm:text-4xl"
    >
      Our Journey
    </h2>
    <p class="mt-4 text-base text-[var(--ws-about-text-soft)]">
      From a small side project to a platform used by thousands of teams
      worldwide.
    </p>
  </div>

  <div class="relative mx-auto mt-16 max-w-4xl">
    <!-- Vertical line -->
    <div
      class="absolute left-1/2 top-0 hidden h-full w-px -translate-x-1/2 bg-[var(--ws-about-border)] lg:block"
      aria-hidden="true"
    ></div>
    <div
      class="absolute left-4 top-0 h-full w-px bg-[var(--ws-about-border)] lg:hidden"
      aria-hidden="true"
    ></div>

    <div class="space-y-12">
      <!-- 2020 — Left -->
      <div class="relative grid gap-6 lg:grid-cols-2 lg:gap-12">
        <div class="lg:text-right">
          <span
            class="inline-flex rounded-full bg-[var(--ws-about-accent)]/10 px-3 py-1 text-xs font-semibold text-[var(--ws-about-accent)]"
            >2020</span
          >
          <h3 class="mt-3 text-lg font-semibold text-[var(--ws-about-text)]">
            The Beginning
          </h3>
          <p class="mt-2 text-sm text-[var(--ws-about-text-soft)]">
            Started as an internal CSS library with 50 utility classes. The goal
            was simple: stop copy-pasting the same styles across projects.
          </p>
        </div>
        <div class="hidden lg:block"></div>
        <div
          class="absolute left-4 top-1 h-3 w-3 rounded-full border-2 border-[var(--ws-about-accent)] bg-[var(--ws-about-bg)] lg:left-1/2 lg:-translate-x-1/2"
          aria-hidden="true"
        ></div>
      </div>

      <!-- 2022 — Right -->
      <div class="relative grid gap-6 lg:grid-cols-2 lg:gap-12">
        <div class="hidden lg:block"></div>
        <div>
          <span
            class="inline-flex rounded-full bg-[var(--ws-about-accent)]/10 px-3 py-1 text-xs font-semibold text-[var(--ws-about-accent)]"
            >2022</span
          >
          <h3 class="mt-3 text-lg font-semibold text-[var(--ws-about-text)]">
            Open Platform
          </h3>
          <p class="mt-2 text-sm text-[var(--ws-about-text-soft)]">
            Rebuilt as a token-driven pattern registry. Introduced the family
            model, machine-readable metadata, and multi-target output for HTML,
            Astro, and Web Components.
          </p>
        </div>
        <div
          class="absolute left-4 top-1 h-3 w-3 rounded-full border-2 border-[var(--ws-about-accent)] bg-[var(--ws-about-bg)] lg:left-1/2 lg:-translate-x-1/2"
          aria-hidden="true"
        ></div>
      </div>

      <!-- 2024 — Left -->
      <div class="relative grid gap-6 lg:grid-cols-2 lg:gap-12">
        <div class="lg:text-right">
          <span
            class="inline-flex rounded-full bg-[var(--ws-about-accent)]/10 px-3 py-1 text-xs font-semibold text-[var(--ws-about-accent)]"
            >2024</span
          >
          <h3 class="mt-3 text-lg font-semibold text-[var(--ws-about-text)]">
            AI-Ready Registry
          </h3>
          <p class="mt-2 text-sm text-[var(--ws-about-text-soft)]">
            Launched MCP integration and CLI tools. Patterns became discoverable
            by AI agents, enabling natural-language component composition and
            automated design system adoption.
          </p>
        </div>
        <div class="hidden lg:block"></div>
        <div
          class="absolute left-4 top-1 h-3 w-3 rounded-full border-2 border-[var(--ws-about-accent)] bg-[var(--ws-about-bg)] lg:left-1/2 lg:-translate-x-1/2"
          aria-hidden="true"
        ></div>
      </div>

      <!-- 2026 — Right -->
      <div class="relative grid gap-6 lg:grid-cols-2 lg:gap-12">
        <div class="hidden lg:block"></div>
        <div>
          <span
            class="inline-flex rounded-full bg-[var(--ws-about-accent)]/10 px-3 py-1 text-xs font-semibold text-[var(--ws-about-accent)]"
            >2026</span
          >
          <h3 class="mt-3 text-lg font-semibold text-[var(--ws-about-text)]">
            Global Scale
          </h3>
          <p class="mt-2 text-sm text-[var(--ws-about-text-soft)]">
            Serving teams worldwide. The registry keeps growing with new
            patterns, CSS snippets, and production-ready templates.
          </p>
        </div>
        <div
          class="absolute left-4 top-1 h-3 w-3 rounded-full border-2 border-[var(--ws-about-accent)] bg-[var(--ws-about-bg)] lg:left-1/2 lg:-translate-x-1/2"
          aria-hidden="true"
        ></div>
      </div>
    </div>
  </div>
</section>