<script setup></script>

<template>
  <!-- Hero -->
  <BasePageHeading
    title="FAQ"
    subtitle="Check out answers to the most common questions."
  >
    <template #extra>
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb breadcrumb-alt">
          <li class="breadcrumb-item">
            <a class="link-fx" href="javascript:void(0)">Generic</a>
          </li>
          <li class="breadcrumb-item" aria-current="page">FAQ</li>
        </ol>
      </nav>
    </template>
  </BasePageHeading>
  <!-- END Hero -->

  <!-- Page Content -->
  <div class="content content-boxed">
    <!-- Frequently Asked Questions -->
    <BaseBlock>
      <div class="p-sm-4 p-xl-7">
        <!-- Introduction -->
        <h2 class="h3"><strong>1.</strong> Introduction</h2>
        <div id="faq1" class="mb-5" role="tablist" aria-multiselectable="true">
          <BaseBlock bordered class="overflow-hidden mb-1">
            <template #content>
              <div
                class="block-header block-header-default"
                role="tab"
                id="faq1_h1"
              >
                <a
                  class="text-muted"
                  data-bs-toggle="collapse"
                  data-bs-parent="#faq1"
                  href="#faq1_q1"
                  aria-expanded="true"
                  aria-controls="faq1_q1"
                  >Welcome to our service!</a
                >
              </div>
              <div
                id="faq1_q1"
                class="collapse show"
                role="tabpanel"
                aria-labelledby="faq1_h1"
                data-bs-parent="#faq1"
              >
                <div class="block-content">
                  <p>
                    Dolor posuere proin blandit accumsan senectus netus nullam
                    curae, ornare laoreet adipiscing luctus mauris adipiscing
                    pretium eget fermentum, tristique lobortis est ut metus
                    lobortis tortor tincidunt himenaeos habitant quis dictumst
                    proin odio sagittis purus mi, nec taciti vestibulum quis in
                    sit varius lorem sit metus mi.
                  </p>
                  <p>
                    Dolor posuere proin blandit accumsan senectus netus nullam
                    curae, ornare laoreet adipiscing luctus mauris adipiscing
                    pretium eget fermentum, tristique lobortis est ut metus
                    lobortis tortor tincidunt himenaeos habitant quis dictumst
                    proin odio sagittis purus mi, nec taciti vestibulum quis in
                    sit varius lorem sit metus mi.
                  </p>
                </div>
              </div>
            </template>
          </BaseBlock>
          <BaseBlock bordered class="overflow-hidden mb-1">
            <template #content>
              <div
                class="block-header block-header-default"
                role="tab"
                id="faq1_h2"
              >
                <a
                  class="text-muted"
                  data-bs-toggle="collapse"
                  data-bs-parent="#faq1"
                  href="#faq1_q2"
                  aria-expanded="true"
                  aria-controls="faq1_q2"
                  >Who are we?</a
                >
              </div>
              <div
                id="faq1_q2"
                class="collapse"
                role="tabpanel"
                aria-labelledby="faq1_h2"
                data-bs-parent="#faq1"
              >
                <div class="block-content">
                  <p>
                    Dolor posuere proin blandit accumsan senectus netus nullam
                    curae, ornare laoreet adipiscing luctus mauris adipiscing
                    pretium eget fermentum, tristique lobortis est ut metus
                    lobortis tortor tincidunt himenaeos habitant quis dictumst
                    proin odio sagittis purus mi, nec taciti vestibulum quis in
                    sit varius lorem sit metus mi.
                  </p>
                  <p>
                    Dolor posuere proin blandit accumsan senectus netus nullam
                    curae, ornare laoreet adipiscing luctus mauris adipiscing
                    pretium eget fermentum, tristique lobortis est ut metus
                    lobortis tortor tincidunt himenaeos habitant quis dictumst
                    proin odio sagittis purus mi, nec taciti vestibulum quis in
                    sit varius lorem sit metus mi.
                  </p>
                </div>
              </div>
            </template>
          </BaseBlock>
          <BaseBlock bordered class="overflow-hidden mb-1">
            <template #content>
              <div
                class="block-header block-header-default"
                role="tab"
                id="faq1_h3"
              >
                <a
                  class="text-muted"
                  data-bs-toggle="collapse"
                  data-bs-parent="#faq1"
                  href="#faq1_q3"
                  aria-expanded="true"
                  aria-controls="faq1_q3"
                  >What are our values?</a
                >
              </div>
              <div
                id="faq1_q3"
                class="collapse"
                role="tabpanel"
                aria-labelledby="faq1_h3"
                data-bs-parent="#faq1"
              >
                <div class="block-content">
                  <p>
                    Dolor posuere proin blandit accumsan senectus netus nullam
                    curae, ornare laoreet adipiscing luctus mauris adipiscing
                    pretium eget fermentum, tristique lobortis est ut metus
                    lobortis tortor tincidunt himenaeos habitant quis dictumst
                    proin odio sagittis purus mi, nec taciti vestibulum quis in
                    sit varius lorem sit metus mi.
                  </p>
                </div>
              </div>
            </template>
          </BaseBlock>
        </div>
        <!-- END Introduction -->

        <!-- Functionality -->
        <h2 class="h3"><strong>2.</strong> Functionality</h2>
        <div id="faq2" class="mb-5" role="tablist" aria-multiselectable="true">
          <BaseBlock bordered class="overflow-hidden mb-1">
            <template #content>
              <div
                class="block-header block-header-default"
                role="tab"
                id="faq2_h1"
              >
                <a
                  class="text-muted"
                  data-bs-toggle="collapse"
                  data-bs-parent="#faq2"
                  href="#faq2_q1"
                  aria-expanded="true"
                  aria-controls="faq2_q1"
                  >What are the key features?</a
                >
              </div>
              <div
                id="faq2_q1"
                class="collapse"
                role="tabpanel"
                aria-labelledby="faq2_h1"
                data-bs-parent="#faq2"
              >
                <div class="block-content">
                  <p>
                    Dolor posuere proin blandit accumsan senectus netus nullam
                    curae, ornare laoreet adipiscing luctus mauris adipiscing
                    pretium eget fermentum, tristique lobortis est ut metus
                    lobortis tortor tincidunt himenaeos habitant quis dictumst
                    proin odio sagittis purus mi, nec taciti vestibulum quis in
                    sit varius lorem sit metus mi.
                  </p>
                  <p>
                    Dolor posuere proin blandit accumsan senectus netus nullam
                    curae, ornare laoreet adipiscing luctus mauris adipiscing
                    pretium eget fermentum, tristique lobortis est ut metus
                    lobortis tortor tincidunt himenaeos habitant quis dictumst
                    proin odio sagittis purus mi, nec taciti vestibulum quis in
                    sit varius lorem sit metus mi.
                  </p>
                </div>
              </div>
            </template>
          </BaseBlock>
          <BaseBlock bordered class="overflow-hidden mb-1">
            <template #content>
              <div
                class="block-header block-header-default"
                role="tab"
                id="faq2_h2"
              >
                <a
                  class="text-muted"
                  data-bs-toggle="collapse"
                  data-bs-parent="#faq2"
                  href="#faq2_q2"
                  aria-expanded="true"
                  aria-controls="faq2_q2"
                  >Does your App support mobile devices?</a
                >
              </div>
              <div
                id="faq2_q2"
                class="collapse"
                role="tabpanel"
                aria-labelledby="faq2_h2"
                data-bs-parent="#faq2"
              >
                <div class="block-content">
                  <p>
                    Dolor posuere proin blandit accumsan senectus netus nullam
                    curae, ornare laoreet adipiscing luctus mauris adipiscing
                    pretium eget fermentum, tristique lobortis est ut metus
                    lobortis tortor tincidunt himenaeos habitant quis dictumst
                    proin odio sagittis purus mi, nec taciti vestibulum quis in
                    sit varius lorem sit metus mi.
                  </p>
                  <p>
                    Dolor posuere proin blandit accumsan senectus netus nullam
                    curae, ornare laoreet adipiscing luctus mauris adipiscing
                    pretium eget fermentum, tristique lobortis est ut metus
                    lobortis tortor tincidunt himenaeos habitant quis dictumst
                    proin odio sagittis purus mi, nec taciti vestibulum quis in
                    sit varius lorem sit metus mi.
                  </p>
                </div>
              </div>
            </template>
          </BaseBlock>
          <BaseBlock bordered class="overflow-hidden mb-1">
            <template #content>
              <div
                class="block-header block-header-default"
                role="tab"
                id="faq2_h3"
              >
                <a
                  class="text-muted"
                  data-bs-toggle="collapse"
                  data-bs-parent="#faq2"
                  href="#faq2_q3"
                  aria-expanded="true"
                  aria-controls="faq2_q3"
                  >Why should I choose your service?</a
                >
              </div>
              <div
                id="faq2_q3"
                class="collapse"
                role="tabpanel"
                aria-labelledby="faq2_h3"
                data-bs-parent="#faq2"
              >
                <div class="block-content">
                  <p>
                    Dolor posuere proin blandit accumsan senectus netus nullam
                    curae, ornare laoreet adipiscing luctus mauris adipiscing
                    pretium eget fermentum, tristique lobortis est ut metus
                    lobortis tortor tincidunt himenaeos habitant quis dictumst
                    proin odio sagittis purus mi, nec taciti vestibulum quis in
                    sit varius lorem sit metus mi.
                  </p>
                  <p>
                    Dolor posuere proin blandit accumsan senectus netus nullam
                    curae, ornare laoreet adipiscing luctus mauris adipiscing
                    pretium eget fermentum, tristique lobortis est ut metus
                    lobortis tortor tincidunt himenaeos habitant quis dictumst
                    proin odio sagittis purus mi, nec taciti vestibulum quis in
                    sit varius lorem sit metus mi.
                  </p>
                </div>
              </div>
            </template>
          </BaseBlock>
          <BaseBlock bordered class="overflow-hidden mb-1">
            <template #content>
              <div
                class="block-header block-header-default"
                role="tab"
                id="faq2_h4"
              >
                <a
                  class="text-muted"
                  data-bs-toggle="collapse"
                  data-bs-parent="#faq2"
                  href="#faq2_q4"
                  aria-expanded="true"
                  aria-controls="faq2_q4"
                  >Is my data secure?</a
                >
              </div>
              <div
                id="faq2_q4"
                class="collapse"
                role="tabpanel"
                aria-labelledby="faq2_h4"
                data-bs-parent="#faq2"
              >
                <div class="block-content">
                  <p>
                    Dolor posuere proin blandit accumsan senectus netus nullam
                    curae, ornare laoreet adipiscing luctus mauris adipiscing
                    pretium eget fermentum, tristique lobortis est ut metus
                    lobortis tortor tincidunt himenaeos habitant quis dictumst
                    proin odio sagittis purus mi, nec taciti vestibulum quis in
                    sit varius lorem sit metus mi.
                  </p>
                  <p>
                    Dolor posuere proin blandit accumsan senectus netus nullam
                    curae, ornare laoreet adipiscing luctus mauris adipiscing
                    pretium eget fermentum, tristique lobortis est ut metus
                    lobortis tortor tincidunt himenaeos habitant quis dictumst
                    proin odio sagittis purus mi, nec taciti vestibulum quis in
                    sit varius lorem sit metus mi.
                  </p>
                </div>
              </div>
            </template>
          </BaseBlock>
        </div>
        <!-- END Functionality -->

        <!-- Payments -->
        <h2 class="h3"><strong>3.</strong> Payments</h2>
        <div id="faq3" role="tablist" aria-multiselectable="true">
          <BaseBlock bordered class="overflow-hidden mb-1">
            <template #content>
              <div
                class="block-header block-header-default"
                role="tab"
                id="faq3_h1"
              >
                <a
                  class="text-muted"
                  data-bs-toggle="collapse"
                  data-bs-parent="#faq3"
                  href="#faq3_q1"
                  aria-expanded="true"
                  aria-controls="faq3_q1"
                  >Is there any free plan?</a
                >
              </div>
              <div
                id="faq3_q1"
                class="collapse"
                role="tabpanel"
                aria-labelledby="faq3_h1"
                data-bs-parent="#faq3"
              >
                <div class="block-content">
                  <p>
                    Dolor posuere proin blandit accumsan senectus netus nullam
                    curae, ornare laoreet adipiscing luctus mauris adipiscing
                    pretium eget fermentum, tristique lobortis est ut metus
                    lobortis tortor tincidunt himenaeos habitant quis dictumst
                    proin odio sagittis purus mi, nec taciti vestibulum quis in
                    sit varius lorem sit metus mi.
                  </p>
                  <p>
                    Dolor posuere proin blandit accumsan senectus netus nullam
                    curae, ornare laoreet adipiscing luctus mauris adipiscing
                    pretium eget fermentum, tristique lobortis est ut metus
                    lobortis tortor tincidunt himenaeos habitant quis dictumst
                    proin odio sagittis purus mi, nec taciti vestibulum quis in
                    sit varius lorem sit metus mi.
                  </p>
                </div>
              </div>
            </template>
          </BaseBlock>
          <BaseBlock bordered class="overflow-hidden mb-1">
            <template #content>
              <div
                class="block-header block-header-default"
                role="tab"
                id="faq3_h2"
              >
                <a
                  class="text-muted"
                  data-bs-toggle="collapse"
                  data-bs-parent="#faq3"
                  href="#faq3_q2"
                  aria-expanded="true"
                  aria-controls="faq3_q2"
                  >What are the available payment options?</a
                >
              </div>
              <div
                id="faq3_q2"
                class="collapse"
                role="tabpanel"
                aria-labelledby="faq3_h2"
                data-bs-parent="#faq3"
              >
                <div class="block-content">
                  <p>
                    Dolor posuere proin blandit accumsan senectus netus nullam
                    curae, ornare laoreet adipiscing luctus mauris adipiscing
                    pretium eget fermentum, tristique lobortis est ut metus
                    lobortis tortor tincidunt himenaeos habitant quis dictumst
                    proin odio sagittis purus mi, nec taciti vestibulum quis in
                    sit varius lorem sit metus mi.
                  </p>
                  <p>
                    Dolor posuere proin blandit accumsan senectus netus nullam
                    curae, ornare laoreet adipiscing luctus mauris adipiscing
                    pretium eget fermentum, tristique lobortis est ut metus
                    lobortis tortor tincidunt himenaeos habitant quis dictumst
                    proin odio sagittis purus mi, nec taciti vestibulum quis in
                    sit varius lorem sit metus mi.
                  </p>
                </div>
              </div>
            </template>
          </BaseBlock>
          <BaseBlock bordered class="overflow-hidden mb-1">
            <template #content>
              <div
                class="block-header block-header-default"
                role="tab"
                id="faq3_h3"
              >
                <a
                  class="text-muted"
                  data-bs-toggle="collapse"
                  data-bs-parent="#faq3"
                  href="#faq3_q3"
                  aria-expanded="true"
                  aria-controls="faq3_q3"
                  >Can I get a refund?</a
                >
              </div>
              <div
                id="faq3_q3"
                class="collapse"
                role="tabpanel"
                aria-labelledby="faq3_h3"
                data-bs-parent="#faq3"
              >
                <div class="block-content">
                  <p>
                    Dolor posuere proin blandit accumsan senectus netus nullam
                    curae, ornare laoreet adipiscing luctus mauris adipiscing
                    pretium eget fermentum, tristique lobortis est ut metus
                    lobortis tortor tincidunt himenaeos habitant quis dictumst
                    proin odio sagittis purus mi, nec taciti vestibulum quis in
                    sit varius lorem sit metus mi.
                  </p>
                  <p>
                    Dolor posuere proin blandit accumsan senectus netus nullam
                    curae, ornare laoreet adipiscing luctus mauris adipiscing
                    pretium eget fermentum, tristique lobortis est ut metus
                    lobortis tortor tincidunt himenaeos habitant quis dictumst
                    proin odio sagittis purus mi, nec taciti vestibulum quis in
                    sit varius lorem sit metus mi.
                  </p>
                </div>
              </div>
            </template>
          </BaseBlock>
        </div>
        <!-- END Payments -->
      </div>
    </BaseBlock>
    <!-- END Frequently Asked Questions -->
  </div>
  <!-- END Page Content -->
</template>
