DurianPy Testimonials

[ArJSarmiento]

Description:

The DurianPy website requires a Testimonials section to showcase user reviews and community feedback dynamically. This section should be visually engaging, responsive, and interactive, featuring a carousel-style review display with star ratings, user avatars, and feedback snippets.

A “Write a Review” button should also be included, allowing users to submit their own testimonials in the future.

---

Requirements:

1. Layout & Design

✅ Title & Ratings Summary

• Section Title: "DurianPy Ratings"
  • Should be styled with DurianPy’s branding (yellow/green gradient).
• Overall Rating Display:
  • Star rating (4.8) and total reviews count (e.g., "5 reviews") should be positioned below the title.
  • Uses golden/yellow stars for visual appeal.

✅ Review Cards (Carousel Format)

• Each review card should display:
  • Star Rating (1-5 stars)
  • Short review text
  • “Read more” link (currently non-functional)
  • User avatar & name
  • Review timestamp (e.g., “1 month ago”)
• Speech bubble tooltip styling for the review cards.

✅ Navigation Controls

• Left & Right Arrows for manual navigation.
• Pagination Indicators (dots) below the reviews to indicate the number of slides.

✅ “Write a Review” Button

• Yellow button with rounded corners labeled "Write a Review".
• Should currently link to a 404 page until a functional review submission system is implemented.

---

2. Functionality & Technical Details

✅ Carousel Behavior

• Auto-slides every 5 seconds but stops when the user interacts.
• Users can manually swipe or click arrows to navigate reviews.

✅ Responsiveness & Adaptability

• Desktop View:
  • Reviews are displayed in a row format with 3 reviews visible at once.
• Mobile View:
  • Only 1 review at a time is visible for better readability.
  • Ensure text and stars scale properly.

✅ Performance Optimization

• Use Next.js dynamic imports for carousel functionality if needed.
• Use Tailwind CSS grid/flex utilities for layout.
• Optimize images using next/image for avatars.

---

Implementation Details

• Framework: Next.js
• Styling: Tailwind CSS
• Libraries:
  • react-slick or a lightweight custom carousel for performance.

---

Acceptance Criteria:

• Testimonials section is fully responsive (desktop: 3 reviews, mobile: 1 review).
• Star ratings and review text are properly aligned.
• Carousel functionality works smoothly, with auto-slide and manual controls.
• Write a Review button is functional and links to /404.
• Navigation arrows and pagination dots are interactive.

---

References & Design Mockups:

https://www.figma.com/design/fWTw453j5xKUk0Nf6nnQYb/DurianPy?node-id=402-696&m=dev

[ArJSarmiento]

As discussed, estimate of PR will be on May 9 Friday. @wenyngcar @Samshh