FAQ Columns

<section class="ws-faq bg-[var(--ws-faq-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mb-12 text-center">
      <h2 class="text-3xl font-bold tracking-tight text-[var(--ws-faq-text)] sm:text-4xl">Common questions</h2>
      <p class="mx-auto mt-4 max-w-xl text-lg text-[var(--ws-faq-text-soft)]">Quick answers to help you get started.</p>
    </div>

    <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
      <div>
        <h3 class="font-semibold text-[var(--ws-faq-text)]">What is included?</h3>
        <p class="mt-2 text-[var(--ws-faq-text-soft)]">All CSS snippets, UI patterns, CLI access, and JSON API. Everything is open source under the MIT license.</p>
      </div>
      <div>
        <h3 class="font-semibold text-[var(--ws-faq-text)]">Which frameworks are supported?</h3>
        <p class="mt-2 text-[var(--ws-faq-text-soft)]">Patterns are plain HTML + Tailwind and work with any framework. Astro components are auto-generated from the HTML source.</p>
      </div>
      <div>
        <h3 class="font-semibold text-[var(--ws-faq-text)]">Do I need to install anything?</h3>
        <p class="mt-2 text-[var(--ws-faq-text-soft)]">No. Copy the code directly from the website. Optionally use the CLI for faster workflow: <code class="rounded bg-[var(--ws-color-surface-alt)] px-1.5 py-0.5 text-sm">npx @webspire/cli add</code>.</p>
      </div>
      <div>
        <h3 class="font-semibold text-[var(--ws-faq-text)]">Can I use this commercially?</h3>
        <p class="mt-2 text-[var(--ws-faq-text-soft)]">Yes. MIT licensed — use in client projects, SaaS products, or internal tools without attribution or fees.</p>
      </div>
      <div>
        <h3 class="font-semibold text-[var(--ws-faq-text)]">How often is it updated?</h3>
        <p class="mt-2 text-[var(--ws-faq-text-soft)]">New patterns and snippets are added regularly. Follow the changelog or subscribe to the newsletter for updates.</p>
      </div>
      <div>
        <h3 class="font-semibold text-[var(--ws-faq-text)]">Is dark mode supported?</h3>
        <p class="mt-2 text-[var(--ws-faq-text-soft)]">Every pattern includes dark mode variants using Tailwind's <code class="rounded bg-[var(--ws-color-surface-alt)] px-1.5 py-0.5 text-sm">dark:</code> prefix. Toggle to see it in action.</p>
      </div>
    </div>
  </div>
</section>