CTA Gradient

<section class="ws-cta py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="relative overflow-hidden rounded-3xl bg-gradient-to-r from-indigo-600 via-purple-600 to-indigo-600 px-8 py-16 text-center shadow-2xl sm:px-16 sm:py-20" style="--cta-accent: var(--ws-color-primary);">
      <!-- Decorative elements -->
      <div class="absolute -left-20 -top-20 h-60 w-60 rounded-full bg-white/10 blur-3xl" aria-hidden="true"></div>
      <div class="absolute -bottom-20 -right-20 h-60 w-60 rounded-full bg-white/10 blur-3xl" aria-hidden="true"></div>

      <div class="relative">
        <h2 class="text-balance text-3xl font-bold tracking-tight text-white sm:text-4xl">Ready to transform your workflow?</h2>
        <p class="mx-auto mt-4 max-w-xl text-pretty text-lg text-indigo-100">Join thousands of developers shipping beautiful interfaces faster with production-ready patterns.</p>
        <div class="mt-8 flex flex-wrap justify-center gap-3">
          <a href="#" class="rounded-xl bg-white px-6 py-3 text-sm font-semibold text-indigo-700 shadow-sm transition hover:bg-indigo-50">Get started free</a> <!-- ws-ok -->
          <a href="#" class="rounded-xl border border-white/30 bg-white/10 px-6 py-3 text-sm font-semibold text-white backdrop-blur transition hover:bg-white/20">Talk to sales</a>
        </div>
      </div>
    </div>
  </div>
</section>