Implement a customer review carousel component that displays user feedback on our website. The carousel should include customer names, their review text, and a star rating to improve the user experience by showcasing positive feedback in an engaging way.
Requirements
Use a carousel library like react-slick to display reviews.
Each slide should display:
Customer name
Review text
Star rating (1-5 stars)
Carousel should automatically scroll, with options for manual control (previous/next buttons).
Make it responsive for mobile and desktop views.
Design Suggestions
Place the carousel in the Customer Reviews section of the homepage.
Basic styling with borders, background color, and centered text for each review slide.
Dot indicators or previous/next arrows for navigation.
Example Data
Here’s some sample data that can be used for initial implementation/testing:
const reviews = [
{
name: 'John Doe',
review: 'Fantastic product! It has made my life so much easier.',
rating: 5,
},
{
name: 'Emily Davis',
review: 'Good quality, but delivery took longer than expected.',
rating: 3,
},
{
name: 'Sophia Wilson',
review: 'Not what I expected, but customer service was helpful.',
rating: 2,
},
{
name: 'James Anderson',
review: 'Exceeded all expectations. I will definitely be back!',
rating: 5,
},
// Add more as needed
];
This template gives clear details for the implementation and any additional requirements for the carousel.
Feel free to adjust specifics to match your project's style and requirements!
Add Customer Review Carousel
Description
Implement a customer review carousel component that displays user feedback on our website. The carousel should include customer names, their review text, and a star rating to improve the user experience by showcasing positive feedback in an engaging way.
Requirements
react-slick
to display reviews.Design Suggestions
Example Data
Here’s some sample data that can be used for initial implementation/testing: