CTA Sections

<section class="cta-1 relative isolate overflow-hidden bg-gray-900 px-6 py-16 dark:bg-gray-950 sm:py-24 lg:px-8">
  <div class="cta-1-content mx-auto max-w-2xl text-center">
    <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">Ready to get started?</h2>
    <p class="mx-auto mt-6 max-w-xl text-lg leading-8 text-gray-300">Start your free trial today. No credit card required.</p>
    <div class="mt-10 flex items-center justify-center gap-x-6">
      <a href="#" class="rounded-full bg-white px-4 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white transition-colors duration-200">Get started</a>
      <a href="#" class="text-sm font-semibold leading-6 text-white transition-colors duration-200 hover:opacity-80">Contact sales <span aria-hidden="true">→</span></a>
    </div>
  </div>
</section>
<style>
  .cta-1-content {
    animation: cta-1-fade-in 0.5s ease-out forwards;
  }
  @keyframes cta-1-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>

<section class="cta-2 bg-indigo-700 dark:bg-indigo-900 px-6 py-16 sm:py-24">
  <div class="cta-2-content mx-auto max-w-2xl text-center">
    <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">Boost your productivity</h2>
    <p class="mt-4 text-lg leading-8 text-indigo-100">Start your free trial today. No credit card required.</p>
    <a href="#" class="mt-8 inline-block rounded-full bg-white px-5 py-2.5 text-sm font-semibold text-indigo-600 hover:bg-indigo-50 transition-colors duration-200">Get started</a>
  </div>
</section>
<style>
  .cta-2-content {
    animation: cta-2-fade-in 0.5s ease-out forwards;
  }
  @keyframes cta-2-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>

<section class="bg-white dark:bg-gray-950">
  <div class="mx-auto max-w-7xl px-6 py-24 lg:flex lg:items-center lg:gap-x-10 lg:px-8">
    <div class="lg:w-1/2">
      <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">Ready to dive in?</h2>
      <p class="mt-4 text-lg text-gray-600 dark:text-gray-300">Start your free trial today. No credit card required.</p>
      <a href="#" class="mt-6 inline-block rounded-full bg-gray-900 px-4 py-2.5 text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Get started</a>
    </div>
    <div class="mt-12 lg:mt-0 lg:w-1/2">
      <div class="aspect-video rounded-2xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center text-gray-400 dark:text-gray-500">Image</div>
    </div>
  </div>
</section>

<section class="px-6 py-24">
  <div class="mx-auto max-w-2xl">
    <div class="rounded-2xl border-2 border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-12 text-center">
      <h2 class="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">Start your free trial</h2>
      <p class="mt-4 text-gray-600 dark:text-gray-300">No credit card required. Cancel anytime.</p>
      <a href="#" class="mt-8 inline-block rounded-full bg-gray-900 px-5 py-2.5 text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Get started</a>
    </div>
  </div>
</section>

<section class="cta-5 bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-700 dark:to-purple-700 px-6 py-20">
  <div class="cta-5-content mx-auto max-w-2xl text-center">
    <h2 class="text-3xl font-bold text-white sm:text-4xl">Ready to get started?</h2>
    <p class="mt-4 text-indigo-100">Join thousands of happy customers.</p>
    <a href="#" class="mt-8 inline-block rounded-full bg-white px-5 py-2.5 text-sm font-semibold text-indigo-600 hover:bg-indigo-50 transition-colors duration-200">Start free trial</a>
  </div>
</section>
<style>
  .cta-5-content {
    animation: cta-5-fade-in 0.5s ease-out forwards;
  }
  @keyframes cta-5-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>

<section class="py-16">
  <div class="mx-auto max-w-3xl border-t border-gray-200 dark:border-gray-700 pt-16 text-center">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Ready to get started?</h2>
    <a href="#" class="mt-4 inline-block text-sm font-semibold text-indigo-600 dark:text-indigo-400 hover:text-indigo-500">Get started →</a>
  </div>
</section>

<section class="bg-white dark:bg-gray-950 py-24">
  <div class="mx-auto max-w-2xl text-center">
    <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-900/30 text-2xl">↑</div>
    <h2 class="mt-6 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">Level up your workflow</h2>
    <p class="mt-4 text-lg text-gray-600 dark:text-gray-300">Start your free trial today.</p>
    <a href="#" class="mt-8 inline-block rounded-full bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400">Get started</a>
  </div>
</section>

<section class="bg-gray-50 dark:bg-gray-900/50 py-24">
  <div class="mx-auto max-w-2xl text-center">
    <h2 class="text-3xl font-bold text-gray-900 dark:text-white sm:text-4xl">Ready to get started?</h2>
    <p class="mt-4 text-gray-600 dark:text-gray-300">Choose the option that works for you.</p>
    <div class="mt-8 flex flex-wrap justify-center gap-4">
      <a href="#" class="rounded-full bg-gray-900 px-5 py-2.5 text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Start free trial</a>
      <a href="#" class="rounded-full border border-gray-300 px-5 py-2.5 text-sm font-semibold text-gray-900 hover:bg-gray-100 dark:border-gray-600 dark:text-white dark:hover:bg-gray-800">Contact sales</a>
    </div>
  </div>
</section>

<section class="py-24">
  <div class="mx-auto max-w-xl px-6 text-center">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">Subscribe to our newsletter</h2>
    <p class="mt-4 text-gray-600 dark:text-gray-300">The latest updates, right in your inbox.</p>
    <form class="mt-8 flex flex-col gap-3 sm:flex-row">
      <input type="email" placeholder="Enter your email" class="min-w-0 flex-auto rounded-full border border-gray-300 px-4 py-2.5 dark:border-gray-600 dark:bg-gray-900 dark:text-white dark:placeholder:text-gray-500" />
      <button type="submit" class="rounded-full bg-gray-900 px-4 py-2.5 text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Subscribe</button>
    </form>
  </div>
</section>

<section class="border-t border-gray-200 bg-white/95 px-6 py-4 backdrop-blur dark:border-gray-800 dark:bg-gray-950/95">
  <div class="mx-auto flex max-w-4xl items-center justify-between gap-4">
    <p class="text-sm font-medium text-gray-900 dark:text-white">Ready to get started? Start your free trial today.</p>
    <a href="#" class="shrink-0 rounded-full bg-gray-900 px-4 py-2 text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Get started</a>
  </div>
</section>

<section class="px-6 py-24">
  <div class="mx-auto max-w-2xl">
    <div class="rounded-2xl bg-gray-900 dark:bg-gray-950 p-12 text-center">
      <span class="inline-block rounded-full bg-white/10 px-3 py-1 text-xs font-medium text-white">New</span>
      <h2 class="mt-4 text-2xl font-bold text-white sm:text-3xl">Get 20% off your first year</h2>
      <p class="mt-4 text-gray-300">Limited time offer. No credit card required.</p>
      <a href="#" class="mt-8 inline-block rounded-full bg-white px-5 py-2.5 text-sm font-semibold text-gray-900 hover:bg-gray-100">Claim offer</a>
    </div>
  </div>
</section>

<section class="cta-12 border-t border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 py-16">
  <div class="cta-12-content mx-auto max-w-2xl px-6 text-center">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">Join the waitlist</h2>
    <p class="mt-2 text-gray-600 dark:text-gray-300">Be the first to know when we launch.</p>
    <a href="#" class="mt-6 inline-block rounded-full border-2 border-gray-900 px-5 py-2.5 text-sm font-semibold text-gray-900 hover:bg-gray-900 hover:text-white dark:border-white dark:text-white dark:hover:bg-white dark:hover:text-gray-900 transition-colors duration-200">Notify me</a>
  </div>
</section>
<style>
  .cta-12-content {
    animation: cta-12-fade-in 0.5s ease-out forwards;
  }
  @keyframes cta-12-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
</style>

<section class="cta-13 bg-indigo-50 dark:bg-indigo-950/40 py-20">
  <div class="cta-13-content mx-auto max-w-2xl px-6 text-center">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">Try it free for 14 days</h2>
    <p class="mt-3 text-gray-600 dark:text-gray-300">No credit card required. Cancel anytime.</p>
    <a href="#" class="mt-6 inline-block rounded-full bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400 transition-colors duration-200">Start free trial</a>
  </div>
</section>
<style>
  .cta-13-content {
    animation: cta-13-fade-in 0.5s ease-out forwards;
  }
  @keyframes cta-13-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>