Testimonials

The Testimonials component displays a section featuring client testimonials.

Props

The Testimonials component accepts the following props:

• testimonials (array of objects, required): An array of testimonial objects, each containing the following properties:

  • name (string): The name of the person providing the testimonial.

  • role (string): The role or position of the person providing the testimonial.

  • image (string): The image path representing the person providing the testimonial.

  • content (string): The content or text of the testimonial.

Usage Example

<Testimonials testimonials={[
  {
    name: 'Devid Smith',
    role: 'Founder @democompany',
    image: './images/user/user-01.svg',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris hendrerit, ligula sit amet cursus tincidunt, lorem sem elementum nisi, convallis fringilla ante nibh non urna.',
  },
  {
    name: 'Jhon Abraham',
    role: 'Founder @democompany',
    image: './images/user/user-02.svg',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris hendrerit, ligula sit amet cursus tincidunt, lorem sem elementum nisi, convallis fringilla ante nibh non urna.',
  },
]} />

In the example above, the Testimonials component is used with sample testimonial data to render a section featuring client testimonials. Make sure to replace the prop values with the appropriate data and adjust the image paths based on your project structure.

Styling

The Testimonials component utilizes CSS classes for styling. You can customize the component's appearance by modifying these classes or extending them with your own styles.

For more information on styling with CSS in React, refer to the official documentation: https://reactjs.org/docs/faq-styling.html

Swiper Integration

The Testimonials component utilizes the Swiper library for the testimonial slideshow. Swiper is a powerful and flexible touch slider/carousel library.

For more information on Swiper and its configuration options, refer to the official documentation: https://swiperjs.com/

Make sure to include the necessary Swiper dependencies and stylesheets in your project for the testimonial slideshow to function correctly.

Swiper is already loaded in the package.json file as a dependency, to install, run the following:

yarn install

In the Testimonials component, Swiper is already imported as follows:

import SwiperCore, { Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

SwiperCore.use([Pagination]);

Image Paths

Ensure that the image paths provided in the testimonials prop are accurate and correspond to the location of the testimonial images within your project directory.