Help Center Base

<section class="ws-help-center bg-slate-50 py-16">
  <div class="mx-auto max-w-4xl px-6">
    <!-- Search hero -->
    <div class="text-center">
      <h1 class="text-3xl font-bold text-slate-900">How can we help?</h1>
      <div class="relative mx-auto mt-6 max-w-xl">
        <svg class="absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
        <input type="search" placeholder="Search articles, guides, and FAQs..." class="w-full rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] py-3.5 pl-12 pr-4 text-sm shadow-sm placeholder:text-slate-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500">
      </div>
    </div>

    <!-- Category cards -->
    <div class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
      <button class="rounded-xl border-2 border-blue-500 bg-blue-50 p-5 text-center transition">
        <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100">
          <svg class="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
        </div>
        <h3 class="mt-3 text-sm font-semibold text-blue-900">Getting Started</h3>
        <p class="mt-1 text-xs text-blue-600">8 articles</p>
      </button>

      <button class="rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-5 text-center transition hover:border-slate-300 hover:shadow-sm dark:hover:border-slate-600">
        <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-xl bg-slate-100">
          <svg class="h-6 w-6 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
        </div>
        <h3 class="mt-3 text-sm font-semibold text-slate-900">Account Settings</h3>
        <p class="mt-1 text-xs text-slate-500">12 articles</p>
      </button>

      <button class="rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-5 text-center transition hover:border-slate-300 hover:shadow-sm dark:hover:border-slate-600">
        <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-xl bg-slate-100">
          <svg class="h-6 w-6 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
        </div>
        <h3 class="mt-3 text-sm font-semibold text-slate-900">Billing & Plans</h3>
        <p class="mt-1 text-xs text-slate-500">6 articles</p>
      </button>

      <button class="rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-5 text-center transition hover:border-slate-300 hover:shadow-sm dark:hover:border-slate-600">
        <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-xl bg-slate-100">
          <svg class="h-6 w-6 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        </div>
        <h3 class="mt-3 text-sm font-semibold text-slate-900">General FAQ</h3>
        <p class="mt-1 text-xs text-slate-500">15 articles</p>
      </button>
    </div>

    <!-- FAQ accordion for selected category -->
    <div class="mt-10 rounded-2xl border border-slate-200 bg-[var(--ws-color-surface)]">
      <details class="group border-b border-slate-100" open>
        <summary class="flex cursor-pointer items-center justify-between px-6 py-4 text-sm font-medium text-slate-900">
          How do I get started with Webspire?
          <svg class="h-5 w-5 shrink-0 text-slate-400 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
        </summary>
        <p class="px-6 pb-4 text-sm text-slate-600">Install the CLI with `npm install -g @webspire/cli`, then run `webspire init` in your project directory. Browse available patterns with `webspire list` and add them with `webspire add`.</p>
      </details>
      <details class="group border-b border-slate-100">
        <summary class="flex cursor-pointer items-center justify-between px-6 py-4 text-sm font-medium text-slate-900">
          Can I customize the patterns after adding them?
          <svg class="h-5 w-5 shrink-0 text-slate-400 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
        </summary>
        <p class="px-6 pb-4 text-sm text-slate-600">Absolutely. Patterns are copied into your project as plain HTML with Tailwind classes. You own the code and can modify everything freely.</p>
      </details>
      <details class="group">
        <summary class="flex cursor-pointer items-center justify-between px-6 py-4 text-sm font-medium text-slate-900">
          Do patterns work with any framework?
          <svg class="h-5 w-5 shrink-0 text-slate-400 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
        </summary>
        <p class="px-6 pb-4 text-sm text-slate-600">Yes. All patterns are HTML-first with Tailwind utilities. They work in any framework that supports HTML — React, Vue, Svelte, Astro, plain HTML, and more.</p>
      </details>
    </div>
  </div>
</section>