ProductCards

Props

Source apps/www/src/sections/ProductCards.astro @ gitt.one

---
/**
 * ProductCards — the catalog teaser: the heading on a dark band and the
 * <Product> cards straddling its lower edge onto the white below.
 */
interface Props {
  id?: string;
  kicker?: string;
  title?: string;
  description?: string;
  columns?: 2 | 3 | 4;
}
const { id, kicker, title, description, columns } = Astro.props;
const cols = columns ? { 2: 'lg:grid-cols-2', 3: 'md:grid-cols-3', 4: 'md:grid-cols-2 lg:grid-cols-4' }[columns] : undefined;
---

<div id={id} class="relative bg-gray-900">
  <div class="px-4 pt-12 sm:px-6 lg:px-8 lg:pt-20">
    <div class="mx-auto max-w-4xl text-center">
      {kicker && <p class="text-base font-semibold uppercase leading-6 tracking-wider text-gray-300">{kicker}</p>}
      {title && <h2 class="mt-2 text-3xl font-extrabold text-white sm:text-4xl">{title}</h2>}
      {description && <p class="mx-auto mt-3 max-w-4xl text-xl text-gray-300 sm:mt-5">{description}</p>}
    </div>
  </div>
  <div class="mt-16 bg-white pb-8 lg:mt-20 lg:pb-16">
    <div class="relative z-0">
      <div class="absolute inset-0 h-5/6 bg-gray-900 lg:h-2/3"></div>
      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class:list={['relative grid gap-8', cols ?? 'lg:grid-flow-col lg:gap-16']} data-variant="cards">
          <slot />
        </div>
      </div>
    </div>
  </div>
</div>