Skip to main content
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.
src/components/marketing/testimonials.tsx
// ...
<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

​
id
number
A unique identifier for the testimonial, used as a key for React rendering.
​
name
string
The name of the person giving the testimonial.
​
title
string
The job title of the person.
​
company
string
The company the person works for.
​
image
string
The URL for the person’s avatar image.
​
content
string
The main body of the testimonial text.
​
highlight
string
A short, highlighted snippet that appears at the end of the content.

​
Example: Modifying a Testimonial

src/components/marketing/testimonials.tsx
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.
src/components/marketing/testimonials.tsx
// ...
<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.
src/components/marketing/testimonials.tsx
// ...
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
// ...