<section layout="container" space="p-x:medium-3x tw-lg:p-x:big-3x m-y:large tw-lg:m-y:big-3x m-x:auto p-y:big tw-lg:p-y:big-4x" visual="bg:blue-600 text:white rounded:medium">
  <div space="m-b:large tw-lg:m-b:big max-w:[3xl] m-x:auto" visual="text:center">
    <h1 space="m-b:medium" visual="text-size:grand tw-lg:text-size:mount font:tw-bold">Got Questions? We've Got Answers!</h1>
    <p visual="text-size:large tw-lg:text-size:big text:blue-100">
      We've compiled a list of the most common questions. If you don't find what you're looking for, feel free to reach out.
    </p>
  </div>
  <div space="max-w:[3xl] m-x:auto" class="space-y-3">
    <div x-data="{ isOpen: false }" visual="bg:blue-700 rounded:medium">
      <h2 @click="isOpen = !isOpen" visual="cursor:pointer">
        <button type="button" layout="flex items:center justify:between" space="w:[100%] p:medium-2x" visual="font:tw-medium text:left">
          <span>Is SenangStart free to use?</span>
          <i visual="transition:transform duration:normal" class="fas fa-chevron-right" :class="{':'transform rotate-90': isOpen}"></i>
        </button>
      </h2>
      <div x-show="isOpen" x-collapse space="p:medium-2x" visual="border:blue-800" class="border-t">
        <p visual="text:blue-50">
          Yes, many of our core components and sections are free to use. We may offer premium templates or advanced kits in the future, but the foundational library aims to be accessible.
        </p>
      </div>
    </div>
    <div x-data="{ isOpen: false }" visual="bg:blue-700 rounded:medium">
      <h2 @click="isOpen = !isOpen" visual="cursor:pointer">
        <button type="button" layout="flex items:center justify:between" space="w:[100%] p:medium-2x" visual="font:tw-medium text:left">
          <span>What browsers are supported?</span>
          <i visual="transition:transform duration:normal" class="fas fa-chevron-right" :class="{':'transform rotate-90': isOpen}"></i>
        </button>
      </h2>
      <div x-show="isOpen" x-collapse space="p:medium-2x" visual="border:blue-800" class="border-t">
        <p visual="text:blue-50">
          Our components are designed to work on all modern browsers, including Chrome, Firefox, Safari, and Edge. We strive for broad compatibility.
        </p>
      </div>
    </div>
    <div x-data="{ isOpen: false }" visual="bg:blue-700 rounded:medium">
      <h2 @click="isOpen = !isOpen" visual="cursor:pointer">
        <button type="button" layout="flex items:center justify:between" space="w:[100%] p:medium-2x" visual="font:tw-medium text:left">
          <span>Can I contribute to SenangStart?</span>
          <i visual="transition:transform duration:normal" class="fas fa-chevron-right" :class="{':'transform rotate-90': isOpen}"></i>
        </button>
      </h2>
      <div x-show="isOpen" x-collapse space="p:medium-2x" visual="border:blue-800" class="border-t">
        <p visual="text:blue-50">
          We welcome contributions! If you have ideas for new components or improvements, please check our GitHub repository for contribution guidelines or get in touch with our team.
        </p>
      </div>
    </div>
    <div x-data="{ isOpen: false }" visual="bg:blue-700 rounded:medium">
      <h2 @click="isOpen = !isOpen" visual="cursor:pointer">
        <button type="button" layout="flex items:center justify:between" space="w:[100%] p:medium-2x" visual="font:tw-medium text:left">
          <span>How often is the library updated?</span>
          <i visual="transition:transform duration:normal" class="fas fa-chevron-right" :class="{':'transform rotate-90': isOpen}"></i>
        </button>
      </h2>
      <div x-show="isOpen" x-collapse space="p:medium-2x" visual="border:blue-800" class="border-t">
        <p visual="text:blue-50">
          We aim to release updates regularly, including new components, bug fixes, and enhancements based on user feedback and evolving design trends.
        </p>
      </div>
    </div>
  </div>
</section>