[FEAT] External Static Pages > Landing Page > Client Testimonials Carousel

[Petersonbabs]

Description

Develop a carousel component for the client testimonials section displayed on the landing page using the pre-made testimonial card component. This task is a section on the landing page. The carousel must be functional and meet all the requirements specified below.

Requirements

• Make use of the client testimonial card component that's already been created by someone else.
• That pre-made component is coming with props: (text content, ratings/stars, profile image, name, job role, etc.)
• Ensure that the typography (text colors, font weights, font sizes, etc.) remains consistent with the brand design system.
• Ensure that the carousel is responsive on various device sizes (check the provided Figma link and screenshots below for examples).
• Please make sure that the carousel is functional (the user can click the arrow right/left button to see overflowing testimonial cards).
• Make use of shadcn and tailwind.

Testing

• Use React Testing Library to write unit tests for this component (Note that this library is already installed in the project codebase).
• Put yourself in the shoes of the user to test different cases of using this component.

Task

• [ ] Create a component for the client testimonial carousel section.
• [ ] Make use of the pre-made client testimonial cards for the carousel contents.
• [ ] Supply values to the props that the component is expecting.
• [ ] Make the carousel component responsive on various screen sizes.
• [ ] Make the carousel functional.
• [ ] Write unit tests to ensure the component works as expected.

Acceptance Criteria

1. The component must be functional. Users can click on the control buttons and scroll to the corresponding directions.
2. The component is responsive on various screen sizes.
3. The component has the heading text ("Client Testimonials"), sub-heading ("Don't just take our word for it - see what actual users of our product have to say about their experience), the control buttons, and the carousel.
4. You've written a unit test for the component to model its behavior.

Links

The figma link

Images

PC view: Mobile view:

[williamwebs]

can this task please be assigned to me??