<section id="cta" class="relative overflow-hidden bg-blue-600 py-20 sm:py-32">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative">
    <div class="mx-auto max-w-2xl lg:text-center mb-16">
      <h2 class="text-base font-semibold leading-7 text-blue-200">
        {{ sections.cta.badge }}
      </h2>
      <p class="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl">
        {{ sections.cta.finalMessage.title }}
      </p>
      <p class="mt-6 text-lg leading-8 text-blue-100">
        {{ sections.cta.description }}
      </p>
    </div>

    <div class="flex justify-center mt-10">
      <a
        class="group inline-flex items-center justify-center rounded-full py-2 px-6 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 bg-white text-slate-900 hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white"
        color="white"
        variant="solid"
        href="{{ sections.cta.buttons[0].url }}"
        >{{ sections.cta.buttons[0].label }}</a
      >
    </div>
  </div>
</section>
