FAQ Minimal

<section class="ws-faq bg-[var(--ws-faq-bg)] py-20">
  <div class="mx-auto max-w-2xl px-6">
    <h2 class="text-center text-3xl font-bold tracking-tight text-[var(--ws-faq-text)] sm:text-4xl">Frequently asked questions</h2>

    <dl class="mt-12 divide-y divide-[var(--ws-faq-border)]">
      <div class="py-6">
        <dt class="text-base font-semibold text-[var(--ws-faq-text)]">What is Webspire?</dt>
        <dd class="mt-2 text-sm text-[var(--ws-faq-text-soft)]">Webspire is a Tailwind UI pattern registry. It provides production-ready HTML sections you can copy-paste into any project — hero sections, pricing tables, navigation bars, and more.</dd>
      </div>
      <div class="py-6">
        <dt class="text-base font-semibold text-[var(--ws-faq-text)]">Do I need to install any dependencies?</dt>
        <dd class="mt-2 text-sm text-[var(--ws-faq-text-soft)]">No. All patterns are pure HTML with Tailwind CSS classes. Just copy the code and paste it into your project. No npm packages, no build steps required.</dd>
      </div>
      <div class="py-6">
        <dt class="text-base font-semibold text-[var(--ws-faq-text)]">Is it free to use?</dt>
        <dd class="mt-2 text-sm text-[var(--ws-faq-text-soft)]">Yes, Webspire is open source and free to use in personal and commercial projects. No attribution required.</dd>
      </div>
      <div class="py-6">
        <dt class="text-base font-semibold text-[var(--ws-faq-text)]">Does it support dark mode?</dt>
        <dd class="mt-2 text-sm text-[var(--ws-faq-text-soft)]">Every pattern includes dark mode variants using Tailwind's dark: prefix. They work out of the box with Tailwind's dark mode configuration.</dd>
      </div>
      <div class="py-6">
        <dt class="text-base font-semibold text-[var(--ws-faq-text)]">Can I customize the styles?</dt>
        <dd class="mt-2 text-sm text-[var(--ws-faq-text-soft)]">Absolutely. Since everything is just Tailwind classes, you can change colors, spacing, typography, and layout by modifying the utility classes directly.</dd>
      </div>
    </dl>
  </div>
</section>