Split CTA

<section class="ws-cta bg-[var(--ws-cta-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="overflow-hidden rounded-3xl bg-[var(--ws-cta-bg)]">
      <div class="grid items-center lg:grid-cols-2">
        <div class="px-8 py-12 sm:px-12 lg:py-16">
          <p class="text-sm font-semibold uppercase tracking-[0.18em] text-indigo-400">Limited time</p>
          <h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-white sm:text-4xl">Start building beautiful interfaces today</h2>
          <p class="mt-4 text-pretty text-lg text-slate-300">Access the full pattern library and ship production-ready pages in minutes, not hours.</p>
          <div class="mt-8 flex flex-wrap gap-3">
            <a href="#" class="rounded-xl bg-indigo-500 px-6 py-3 text-sm font-semibold text-white transition hover:bg-indigo-400">Get started free</a>
            <a href="#" class="rounded-xl border border-white/20 bg-white/5 px-6 py-3 text-sm font-semibold text-white transition hover:bg-white/10">See examples</a>
          </div>
        </div>
        <div class="hidden aspect-[4/3] bg-gradient-to-br from-indigo-500/20 to-purple-500/20 lg:block">
          <div class="flex h-full items-center justify-center">
            <div class="h-48 w-64 rounded-2xl border border-white/10 bg-white/5 backdrop-blur-sm"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>