classroomio/apps/website/src/lib/components/faq.svelte

<script>
  import { faqs } from '$lib/utils/faqs';
  import { PageSignupCTA } from '$lib/components';
  import * as Accordion from '@cio/ui/base/accordion';
</script>

<div class="mt-10 mb-20 flex flex-col items-center justify-center gap-6">
  <header class="space-y-2 text-center">
    <h1 class="mt-2 text-xl md:text-4xl">Questions & Answers</h1>
    <p
      class="ui:text-muted-foreground text-sm font-normal tracking-normal md:text-lg lg:px-[20%] lg:text-xl lg:tracking-wide"
    >
      Can't find the answer you're looking for?
      <a class="text-blue-700 hover:underline" href="mailto:help@classroomio.com" target="_blank">Shoot us an email</a> and
      we'll get back to you ASAP.
    </p>
  </header>

  <div class="mx-auto w-full max-w-3xl px-2 lg:m-0">
    <Accordion.Root type="single" class="w-full">
      {#each faqs as faq, index}
        <Accordion.Item value="faq-{index}">
          <Accordion.Trigger>{faq.question}</Accordion.Trigger>
          <Accordion.Content>
            {faq.answer}
          </Accordion.Content>
        </Accordion.Item>
      {/each}
    </Accordion.Root>
  </div>

  <PageSignupCTA
    header="Your Custom Academy – Up & Running in Minutes!"
    subText="Try before you buy. No credit card required."
    btnLabel="Book a demo"
    link="classroomio/demo"
  />
</div>