Testimonials

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

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
// ...

​How to Customize

​Editing the Section Heading

​Managing Testimonial Data

​Understanding the testimonials Array

​Example: Modifying a Testimonial

​Customizing the Marquee Animation

​Adjusting Animation Speed

​Changing Column Distribution

How to Customize

Editing the Section Heading

Managing Testimonial Data

Understanding the `testimonials` Array

Example: Modifying a Testimonial

Customizing the Marquee Animation

Adjusting Animation Speed

Changing Column Distribution