Testimonials

Props

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

---
/**
 * Testimonials — quotes with a face and a role: cards with a round photo, the
 *   name, the role and the words, on a dark brand band by default
 *   (<Testimonial>).
 *
 * Use for: customer reviews, team voices, "what our clients say" — two to six
 *   short quotes.
 * Not for: one or two long pull quotes on a light page (<Quotes>).
 * Children: <Testimonial> tags.
 * Layout: `columns` 1–3 (default 2).
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';

interface Props {
  /** anchor of the section */
  id?: string;
  /** the section heading */
  title?: string;
  /** a paragraph under the heading */
  description?: string;
  /** cards per row on desktop */
  columns?: 1 | 2 | 3;
  /** background of the section (default "dark") */
  theme?: Theme;
}
const { id, title, description, columns = 2, theme = 'dark' } = Astro.props;
const cols = { 1: 'max-w-3xl mx-auto', 2: 'sm:grid-cols-2', 3: 'sm:grid-cols-2 lg:grid-cols-3' }[columns];
---

<Section id={id} title={title} description={description} theme={theme} heading="left">
  <ul class:list={['grid list-none grid-cols-1 gap-6', cols]} data-variant="grid">
    <slot />
  </ul>
</Section>