Action Cards

<section class="ws-cards bg-[var(--ws-cards-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mb-12 text-center">
      <h2 class="text-3xl font-bold tracking-tight text-[var(--ws-cards-text)] sm:text-4xl">Take action</h2>
      <p class="mx-auto mt-4 max-w-xl text-lg text-[var(--ws-cards-text-soft)]">Explore our offerings and get started with the right plan for you.</p>
    </div>

    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
      <article class="group relative flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] transition duration-300 hover:-translate-y-1 hover:shadow-xl">
        <div class="relative aspect-[4/3] bg-gradient-to-br from-indigo-100 to-violet-100">
          <span class="absolute right-3 top-3 rounded-full bg-indigo-600 px-2.5 py-0.5 text-xs font-semibold text-white shadow-sm">New</span>
        </div>
        <div class="flex flex-1 flex-col p-6">
          <h3 class="text-lg font-semibold text-[var(--ws-cards-text)] group-hover:text-[var(--ws-cards-accent)]">Quick Start</h3>
          <p class="mt-2 flex-1 text-sm text-[var(--ws-cards-text-soft)]">Get up and running in minutes with our beginner-friendly starter template.</p>
          <div class="mt-6 flex items-center gap-3">
            <a href="#" class="inline-flex flex-1 items-center justify-center rounded-lg bg-[var(--ws-cards-accent)] px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Get started</a>
            <a href="#" class="inline-flex flex-1 items-center justify-center rounded-lg border border-[var(--ws-cards-border)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-cards-text)] transition hover:opacity-80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Details</a>
          </div>
        </div>
      </article>

      <article class="group relative flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] transition duration-300 hover:-translate-y-1 hover:shadow-xl">
        <div class="relative aspect-[4/3] bg-gradient-to-br from-emerald-100 to-teal-100">
          <span class="absolute right-3 top-3 rounded-full bg-emerald-600 px-2.5 py-0.5 text-xs font-semibold text-white shadow-sm">Popular</span>
        </div>
        <div class="flex flex-1 flex-col p-6">
          <h3 class="text-lg font-semibold text-[var(--ws-cards-text)] group-hover:text-[var(--ws-cards-accent)]">Pro Toolkit</h3>
          <p class="mt-2 flex-1 text-sm text-[var(--ws-cards-text-soft)]">Advanced components and integrations for teams building production applications.</p>
          <div class="mt-6 flex items-center gap-3">
            <a href="#" class="inline-flex flex-1 items-center justify-center rounded-lg bg-[var(--ws-cards-accent)] px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Get started</a>
            <a href="#" class="inline-flex flex-1 items-center justify-center rounded-lg border border-[var(--ws-cards-border)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-cards-text)] transition hover:opacity-80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Details</a>
          </div>
        </div>
      </article>

      <article class="group relative flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] transition duration-300 hover:-translate-y-1 hover:shadow-xl">
        <div class="relative aspect-[4/3] bg-gradient-to-br from-amber-100 to-orange-100">
          <span class="absolute right-3 top-3 rounded-full bg-amber-600 px-2.5 py-0.5 text-xs font-semibold text-white shadow-sm">Limited</span>
        </div>
        <div class="flex flex-1 flex-col p-6">
          <h3 class="text-lg font-semibold text-[var(--ws-cards-text)] group-hover:text-[var(--ws-cards-accent)]">Enterprise Suite</h3>
          <p class="mt-2 flex-1 text-sm text-[var(--ws-cards-text-soft)]">Full platform access with custom branding, SSO, and dedicated account management.</p>
          <div class="mt-6 flex items-center gap-3">
            <a href="#" class="inline-flex flex-1 items-center justify-center rounded-lg bg-[var(--ws-cards-accent)] px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Get started</a>
            <a href="#" class="inline-flex flex-1 items-center justify-center rounded-lg border border-[var(--ws-cards-border)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-cards-text)] transition hover:opacity-80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Details</a>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>