Accordion

<!-- Accordion -->
<!-- An Alpine.js and Tailwind CSS component by https://pinemix.com -->
<div
  x-data="{
    active: 'q1',
    setActive(question) {
      this.active = (this.active !== question) ? question : '';
    }
  }"
  class="mx-auto max-w-xl divide-y divide-zinc-200/75 overflow-hidden rounded-lg border border-zinc-200/75 text-sm/relaxed dark:divide-zinc-700/50 dark:border-zinc-700/50"
>
  <details x-bind:open="active === 'q1'" class="group">
    <summary
      x-on:click.prevent="setActive('q1')"
      class="flex cursor-pointer list-none items-center justify-between p-4 hover:bg-zinc-50 group-open:bg-zinc-50 dark:hover:bg-zinc-800/50 dark:group-open:bg-zinc-800/50 [&::-webkit-details-marker]:hidden"
    >
      <h4 class="text-left font-semibold">What features are included?</h4>
      <div class="relative size-5 opacity-40">
        <svg
          class="hi-mini hi-chevron-down absolute inline-block size-5 transition duration-150 ease-out group-open:translate-y-4 group-open:opacity-0"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          aria-hidden="true"
        >
          <path
            fill-rule="evenodd"
            d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
            clip-rule="evenodd"
          />
        </svg>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          data-slot="icon"
          class="hi-mini hi-chevron-up absolute inline-block size-5 -translate-y-4 opacity-0 transition duration-150 ease-out group-open:translate-y-0 group-open:opacity-100"
        >
          <path
            fill-rule="evenodd"
            d="M9.47 6.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06L10 8.06l-3.72 3.72a.75.75 0 0 1-1.06-1.06l4.25-4.25Z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
    </summary>
    <p class="p-4 text-zinc-600 dark:text-zinc-400">
      In our template, you'll find an array of features that enhance your
      website's functionality. These include a responsive design to ensure
      compatibility across devices, customizable widgets to tailor your site to
      your preferences, and SEO optimization to boost your online visibility.
    </p>
  </details>
  <details x-bind:open="active === 'q2'" class="group">
    <summary
      x-on:click.prevent="setActive('q2')"
      class="flex cursor-pointer list-none items-center justify-between p-4 hover:bg-zinc-50 group-open:bg-zinc-50 dark:hover:bg-zinc-800/50 dark:group-open:bg-zinc-800/50 [&::-webkit-details-marker]:hidden"
    >
      <h4 class="text-left font-semibold">Can I use PayPal to pay you?</h4>
      <div class="relative size-5 opacity-40">
        <svg
          class="hi-mini hi-chevron-down absolute inline-block size-5 transition duration-150 ease-out group-open:translate-y-4 group-open:opacity-0"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          aria-hidden="true"
        >
          <path
            fill-rule="evenodd"
            d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
            clip-rule="evenodd"
          />
        </svg>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          data-slot="icon"
          class="hi-mini hi-chevron-up absolute inline-block size-5 -translate-y-4 opacity-0 transition duration-150 ease-out group-open:translate-y-0 group-open:opacity-100"
        >
          <path
            fill-rule="evenodd"
            d="M9.47 6.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06L10 8.06l-3.72 3.72a.75.75 0 0 1-1.06-1.06l4.25-4.25Z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
    </summary>
    <p class="p-4 text-zinc-600 dark:text-zinc-400">
      Certainly! We offer PayPal as a secure and convenient payment option for
      your transactions. You can use it to make payments with ease.
    </p>
  </details>
  <details x-bind:open="active === 'q3'" class="group">
    <summary
      x-on:click.prevent="setActive('q3')"
      class="flex cursor-pointer list-none items-center justify-between p-4 hover:bg-zinc-50 group-open:bg-zinc-50 dark:hover:bg-zinc-800/50 dark:group-open:bg-zinc-800/50 [&::-webkit-details-marker]:hidden"
    >
      <h4 class="text-left font-semibold">Do I get access to the community?</h4>
      <div class="relative size-5 opacity-40">
        <svg
          class="hi-mini hi-chevron-down absolute inline-block size-5 transition duration-150 ease-out group-open:translate-y-4 group-open:opacity-0"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          aria-hidden="true"
        >
          <path
            fill-rule="evenodd"
            d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
            clip-rule="evenodd"
          />
        </svg>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          data-slot="icon"
          class="hi-mini hi-chevron-up absolute inline-block size-5 -translate-y-4 opacity-0 transition duration-150 ease-out group-open:translate-y-0 group-open:opacity-100"
        >
          <path
            fill-rule="evenodd"
            d="M9.47 6.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06L10 8.06l-3.72 3.72a.75.75 0 0 1-1.06-1.06l4.25-4.25Z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
    </summary>
    <p class="p-4 text-zinc-600 dark:text-zinc-400">
      Upon purchasing our template, you'll gain access to our thriving
      community. Here, you can engage in discussions, seek advice, and receive
      support from fellow users and our team.
    </p>
  </details>
  <details x-bind:open="active === 'q4'" class="group">
    <summary
      x-on:click.prevent="setActive('q4')"
      class="flex cursor-pointer list-none items-center justify-between p-4 hover:bg-zinc-50 group-open:bg-zinc-50 dark:hover:bg-zinc-800/50 dark:group-open:bg-zinc-800/50 [&::-webkit-details-marker]:hidden"
    >
      <h4 class="text-left font-semibold">Can I get a refund just in case?</h4>
      <div class="relative size-5 opacity-40">
        <svg
          class="hi-mini hi-chevron-down absolute inline-block size-5 transition duration-150 ease-out group-open:translate-y-4 group-open:opacity-0"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          aria-hidden="true"
        >
          <path
            fill-rule="evenodd"
            d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
            clip-rule="evenodd"
          />
        </svg>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          data-slot="icon"
          class="hi-mini hi-chevron-up absolute inline-block size-5 -translate-y-4 opacity-0 transition duration-150 ease-out group-open:translate-y-0 group-open:opacity-100"
        >
          <path
            fill-rule="evenodd"
            d="M9.47 6.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06L10 8.06l-3.72 3.72a.75.75 0 0 1-1.06-1.06l4.25-4.25Z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
    </summary>
    <p class="p-4 text-zinc-600 dark:text-zinc-400">
      Your satisfaction is our priority. We provide a 7-day money-back
      guarantee, giving you peace of mind. If the template doesn't meet your
      expectations, you can request a refund within this period.
    </p>
  </details>
  <details x-bind:open="active === 'q5'" class="group">
    <summary
      x-on:click.prevent="setActive('q5')"
      class="flex cursor-pointer list-none items-center justify-between p-4 hover:bg-zinc-50 group-open:bg-zinc-50 dark:hover:bg-zinc-800/50 dark:group-open:bg-zinc-800/50 [&::-webkit-details-marker]:hidden"
    >
      <h4 class="text-left font-semibold">Do you offer email support?</h4>
      <div class="relative size-5 opacity-40">
        <svg
          class="hi-mini hi-chevron-down absolute inline-block size-5 transition duration-150 ease-out group-open:translate-y-4 group-open:opacity-0"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          aria-hidden="true"
        >
          <path
            fill-rule="evenodd"
            d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
            clip-rule="evenodd"
          />
        </svg>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          data-slot="icon"
          class="hi-mini hi-chevron-up absolute inline-block size-5 -translate-y-4 opacity-0 transition duration-150 ease-out group-open:translate-y-0 group-open:opacity-100"
        >
          <path
            fill-rule="evenodd"
            d="M9.47 6.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06L10 8.06l-3.72 3.72a.75.75 0 0 1-1.06-1.06l4.25-4.25Z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
    </summary>
    <p class="p-4 text-zinc-600 dark:text-zinc-400">
      We're committed to assisting you. We offer email support to address any
      questions or issues you may encounter while using our template. Reach out
      to us, and we'll be happy to help.
    </p>
  </details>
  <details x-bind:open="active === 'q6'" class="group">
    <summary
      x-on:click.prevent="setActive('q6')"
      class="flex cursor-pointer list-none items-center justify-between p-4 hover:bg-zinc-50 group-open:bg-zinc-50 dark:hover:bg-zinc-800/50 dark:group-open:bg-zinc-800/50 [&::-webkit-details-marker]:hidden"
    >
      <h4 class="text-left font-semibold">Are the updates free for life?</h4>
      <div class="relative size-5 opacity-40">
        <svg
          class="hi-mini hi-chevron-down absolute inline-block size-5 transition duration-150 ease-out group-open:translate-y-4 group-open:opacity-0"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          aria-hidden="true"
        >
          <path
            fill-rule="evenodd"
            d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
            clip-rule="evenodd"
          />
        </svg>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          data-slot="icon"
          class="hi-mini hi-chevron-up absolute inline-block size-5 -translate-y-4 opacity-0 transition duration-150 ease-out group-open:translate-y-0 group-open:opacity-100"
        >
          <path
            fill-rule="evenodd"
            d="M9.47 6.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06L10 8.06l-3.72 3.72a.75.75 0 0 1-1.06-1.06l4.25-4.25Z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
    </summary>
    <p class="p-4 text-zinc-600 dark:text-zinc-400">
      As a valued customer, you'll enjoy free updates for the template. These
      updates will continue to be available to you as long as you remain a
      customer, ensuring your template stays current and relevant.
    </p>
  </details>
</div>
<!-- END Accordion -->