Roadmap Base

<section class="ws-roadmap bg-[var(--ws-color-surface)] py-16">
  <div class="mx-auto max-w-3xl px-6">
    <div class="text-center">
      <h2 class="text-3xl font-bold text-slate-900">
        Product Roadmap
      </h2>
      <p class="mt-3 text-lg text-slate-500">
        What we're building and what's coming next.
      </p>
    </div>

    <div class="relative mt-12">
      <!-- Connector line -->
      <div
        class="absolute left-5 top-0 h-full w-px bg-slate-200"
      ></div>

      <div class="space-y-8">
        <!-- Done -->
        <div class="relative flex gap-5">
          <div
            class="relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-emerald-500 shadow"
          >
            <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>
          <div
            class="flex-1 rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-5"
          >
            <div class="flex items-center justify-between">
              <h3
                class="text-base font-semibold text-slate-900"
              >
                Pattern Registry v1
              </h3>
              <span
                class="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-semibold text-emerald-700"
                >Done</span
              >
            </div>
            <p class="mt-2 text-sm text-slate-500">
              A large pattern library with search, filters, and copy-paste
              support.
            </p>
            <time class="mt-2 block text-xs text-slate-400">Q1 2026</time>
          </div>
        </div>

        <!-- In Progress -->
        <div class="relative flex gap-5">
          <div
            class="relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-blue-500 shadow ring-4 ring-blue-100"
          >
            <span class="h-2.5 w-2.5 rounded-full bg-[var(--ws-color-surface)]"></span>
          </div>
          <div
            class="flex-1 rounded-xl border-2 border-blue-200 bg-blue-50/50 p-5"
          >
            <div class="flex items-center justify-between">
              <h3 class="text-base font-bold text-blue-900">
                CLI & MCP Tools
              </h3>
              <span
                class="rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-semibold text-blue-700"
                >In Progress</span
              >
            </div>
            <p class="mt-2 text-sm text-blue-700">
              npm packages for CLI installation and MCP server integration with
              AI coding tools.
            </p>
            <time class="mt-2 block text-xs text-blue-400">Q1 2026</time>
          </div>
        </div>

        <!-- Planned -->
        <div class="relative flex gap-5">
          <div
            class="relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-2 border-slate-300 bg-[var(--ws-color-surface)]"
          >
            <span
              class="h-2.5 w-2.5 rounded-full bg-slate-300"
            ></span>
          </div>
          <div
            class="flex-1 rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-5"
          >
            <div class="flex items-center justify-between">
              <h3
                class="text-base font-semibold text-slate-900"
              >
                Template Builder
              </h3>
              <span
                class="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-semibold text-slate-500"
                >Planned</span
              >
            </div>
            <p class="mt-2 text-sm text-slate-500">
              Visual template builder for composing full pages from pattern
              combinations.
            </p>
            <time class="mt-2 block text-xs text-slate-400">Q2 2026</time>
          </div>
        </div>

        <!-- Planned -->
        <div class="relative flex gap-5">
          <div
            class="relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-2 border-slate-300 bg-[var(--ws-color-surface)]"
          >
            <span
              class="h-2.5 w-2.5 rounded-full bg-slate-300"
            ></span>
          </div>
          <div
            class="flex-1 rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-5"
          >
            <div class="flex items-center justify-between">
              <h3
                class="text-base font-semibold text-slate-900"
              >
                Component Marketplace
              </h3>
              <span
                class="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-semibold text-slate-500"
                >Planned</span
              >
            </div>
            <p class="mt-2 text-sm text-slate-500">
              Community-driven marketplace for premium patterns and custom theme
              packs.
            </p>
            <time class="mt-2 block text-xs text-slate-400">Q3 2026</time>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>