feat: revamp 'What our community thinks' section with premium design

[Atul-Chahar]

Related Tickets & Documents

Fixes: #3440 keploy/keploy#3440

Description

This PR refactors the testimonials.tsx component to implement a high-quality "What our community thinks" section, replacing the old design with a premium, responsive infinite marquee.

• Addresses the design requirements from the issue, including specific card styling and header improvements.
• Removes legacy proxy logic for better image loading performance.

Changes

• Premium Card Styling: Refactored ReviewCard with rounded-3xl corners, soft shadows, white backgrounds, and scaling hover effects (hover:scale-105).
• Improved Layout: Reorganized card content to feature the testimonial text first (with a new Quote icon using lucide-react) followed by user details.
• Enhanced Header: Updated the section header with a stylized "community" highlight and the subtitle: "Join thousands of developers who trust Keploy for their testing needs".
• Performance Fix: Removed proxiedAvatar logic, switching to direct avatar URLs.
• Visual Polish: Added smooth gradient fades on the marquee edges.

Type of Change

• Chore (maintenance, refactoring, tooling updates)
• Bug fix (non-breaking change that fixes an issue)
• New feature (change that adds functionality)
• Breaking Change (may require updates in existing code)
• UI improvement (visual or design changes)
• Performance improvement (optimization or efficiency enhancements)
• Documentation update (changes to README, guides, etc.)
• CI (updates to continuous integration workflows)
• Revert (undo a previous commit or merge)

Testing

• Linting: Ran npm run lint which passed (only pre-existing warnings for <img> tags).
• Manual Verification: Verified the component renders correctly with the double-row marquee, hover pauses, and responsiveness.
• Build: Verified via npm run build run perfectly without any error in my Linux machine.

Demo

screenrecording-2026-01-19_11-35-25.mp4

Environment and Dependencies

• New Dependencies: None (Uses existing lucide-react).
• Configuration Changes: None.

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation
• I have added corresponding tests
• I have run the build command to ensure there are no build errors
• My changes have been tested across relevant browsers/devices
• For UI changes, I've included visual evidence of my changes

[amaan-bhati]

Hey @Atul-Chahar Thanks for raising this pr. I tried to review the changes on my local but there are a few red flags that needs to be taken care of or either removed:

• The quotes block is way too big, it is taking up a lot of space inside of the card, we dont really need this much of space there, we can either entireley remove the quotes block, or maybe remove the block, and place a quotes behind the text with low opacity, here is a reference image for how to place quotes behind the text:

we could have something like this instead of having a block for the quotes which takes up too much space and also leaving a lot of empty space on the top right side of each tesimonial card.

• Two red flags here: there is too much empty space for nothing and if the image breaks the alt msg takes up too much space.

• The ui breaks when hovered over a tweet in the first row, there is a clear shadow that makes the borders of the 2nd row visible that doesnot really look good in terms of attention to detail. reference image for the issue that i am talking about: