Product 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">Popular picks</h2>
      <p class="mx-auto mt-4 max-w-xl text-lg text-[var(--ws-cards-text-soft)]">Explore our most popular products and find the perfect fit.</p>
    </div>

    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
      <article class="group overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] transition hover:shadow-lg">
        <div class="aspect-[4/3] bg-gradient-to-br from-indigo-100 to-violet-100"></div>
        <div class="p-6">
          <span class="inline-block rounded-full bg-indigo-100 px-2.5 py-0.5 text-xs font-medium text-indigo-700">New</span>
          <h3 class="mt-3 text-lg font-semibold text-[var(--ws-cards-text)] group-hover:text-[var(--ws-cards-accent)]">Starter Kit</h3>
          <p class="mt-2 text-sm text-[var(--ws-cards-text-soft)]">Everything you need to get started. Perfect for small projects and personal use.</p>
          <div class="mt-4 flex items-center justify-between">
            <p class="text-lg font-bold text-[var(--ws-cards-text)]">$29</p>
            <a href="#" class="text-sm font-semibold text-[var(--ws-cards-accent)]">Learn more &rarr;</a>
          </div>
        </div>
      </article>

      <article class="group overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] transition hover:shadow-lg">
        <div class="aspect-[4/3] bg-gradient-to-br from-emerald-100 to-teal-100"></div>
        <div class="p-6">
          <span class="inline-block rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700">Popular</span>
          <h3 class="mt-3 text-lg font-semibold text-[var(--ws-cards-text)] group-hover:text-[var(--ws-cards-accent)]">Pro Bundle</h3>
          <p class="mt-2 text-sm text-[var(--ws-cards-text-soft)]">Advanced features for growing teams. Includes priority support and all integrations.</p>
          <div class="mt-4 flex items-center justify-between">
            <p class="text-lg font-bold text-[var(--ws-cards-text)]">$79</p>
            <a href="#" class="text-sm font-semibold text-[var(--ws-cards-accent)]">Learn more &rarr;</a>
          </div>
        </div>
      </article>

      <article class="group overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] transition hover:shadow-lg">
        <div class="aspect-[4/3] bg-gradient-to-br from-amber-100 to-orange-100"></div>
        <div class="p-6">
          <span class="inline-block rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-medium text-amber-700">Limited</span>
          <h3 class="mt-3 text-lg font-semibold text-[var(--ws-cards-text)] group-hover:text-[var(--ws-cards-accent)]">Enterprise Suite</h3>
          <p class="mt-2 text-sm text-[var(--ws-cards-text-soft)]">Full platform access with custom branding, SSO, and dedicated account management.</p>
          <div class="mt-4 flex items-center justify-between">
            <p class="text-lg font-bold text-[var(--ws-cards-text)]">$199</p>
            <a href="#" class="text-sm font-semibold text-[var(--ws-cards-accent)]">Learn more &rarr;</a>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>