> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Testimonials

> Learn how to customize the testimonials section, including managing content and adjusting the scrolling animation.

The Testimonials section displays a scrolling marquee of user reviews to build social proof.

**File Location:** `src/components/marketing/testimonials.tsx`

## How to Customize

Customizing the testimonials section involves editing the heading, managing the testimonial data, and adjusting the animation.

### Editing the Section Heading

The main heading and subheading are hardcoded at the top of the component's return statement. Find the following code and change the text to match your brand's voice.

```tsx src/components/marketing/testimonials.tsx theme={null}
// ...
<div className="mx-auto max-w-xl flex flex-col items-center justify-center gap-2">
  <h2 className="text-3xl md:text-4xl font-medium tracking-tighter text-center text-balance">
    Loved by people worldwide
  </h2>
  <p className="text-muted-foreground text-center text-balance font-medium">
    See what our users have to say about our product.
  </p>
</div>
// ...
```

### Managing Testimonial Data

Testimonial content is managed through the `testimonials` array at the top of the file. Each object in the array represents one testimonial card and must conform to the `Testimonial` TypeScript interface.

#### Understanding the `testimonials` Array

<ParamField path="id" type="number">
  A unique identifier for the testimonial, used as a `key` for React rendering.
</ParamField>

<ParamField path="name" type="string">
  The name of the person giving the testimonial.
</ParamField>

<ParamField path="title" type="string">
  The job title of the person.
</ParamField>

<ParamField path="company" type="string">
  The company the person works for.
</ParamField>

<ParamField path="image" type="string">
  The URL for the person’s avatar image.
</ParamField>

<ParamField path="content" type="string">
  The main body of the testimonial text.
</ParamField>

<ParamField path="highlight" type="string">
  A short, highlighted snippet that appears at the end of the `content`.
</ParamField>

#### Example: Modifying a Testimonial

```tsx src/components/marketing/testimonials.tsx theme={null}
const testimonials: Testimonial[] = [
  {
    id: 1,
    name: "Alex Rivera",
    title: "CTO",
    company: "InnovateTech",
    image: "https://randomuser.me/api/portraits/men/91.jpg",
    content:
      "The AI-driven analytics have revolutionized our product development cycle.",
    highlight: "Insights are now more accurate and faster than ever.",
  },
  // ... more testimonials
];
```

### Customizing the Marquee Animation

The scrolling animation is handled by the `Marquee` component from Magic UI. You can adjust its speed and the number of columns displayed.

#### Adjusting Animation Speed

The speed of the marquee is controlled by a CSS custom property `--duration`. A higher value results in a slower animation. You can change this directly on the `Marquee` component.

```tsx src/components/marketing/testimonials.tsx theme={null}
// ...
<Marquee pauseOnHover className="[--duration:60s]">
  {firstRow.map((testimonial) => (
// ...
```

#### Changing Column Distribution

The component displays testimonials across three columns, which are defined by slicing the main `testimonials` array. You can change how many testimonials appear in each column by adjusting the `.slice()` method.

```tsx src/components/marketing/testimonials.tsx theme={null}
// ...
const column1 = testimonials.slice(0, 4); // First 4 testimonials
const column2 = testimonials.slice(4, 8); // Next 4 testimonials
const column3 = testimonials.slice(8, 12); // Last 4 testimonials
// ...
```