[DESIGN]: (Testimonals)

[MisbahAnsar]

Describe the Issue

The current design of Testimonals section doesn not has a proper layout, the some testimonal take some extra space and some less!

Here's how the current design of Testimonals looks like:

Expected Outcome

updating the above design into something like this:

Why ? Updating it will make it have a proper height and proper width(basically a proper layout for each card!).

Ready to work on it. Assign me.

Screenshots

No response

Steps to Reproduce

Change the design to have a proper width and height such that each testimonal is in a card, and it keeps moving horizontally, making it a more better ui for the user!

Browser/Device

i was using brave.

Additional Notes

No response

Check Before Submitting

• [x] I have looked for similar issues to avoid duplicates.
• [x] I have reviewed the Contributing Guidelines.

Would you like to help fix this issue? (Not required, but appreciated!)

• [x] Yes, I am interested in contributing to the fix.
• [ ] No, I am just reporting the issue.

[github-actions[bot]]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[ved17-git]

Can i work on this?

[DhruvHarani1]

Hi @MisbahAnsar I'd love to take this on.

I’ve analyzed the current testimonial layout and noticed it could benefit from a more modern, dynamic feel. I have already developed a working prototype with the following approach:

• New UI: Transitioning from the static grid to a sleek Card-based design with top-aligned avatars and handles.
• Dynamic Interaction: Implementing an Infinite Horizontal Scroll carousel.
• Visual Polish: Adding Gradient Masks on the left and right edges to create a smooth "fade-out" effect, similar to high-end SaaS landing pages.
• Performance: Powered by pure Tailwind CSS animations for 60fps smoothness without extra JS libraries.

I have the code ready and tested. May I be assigned to this issue to submit the PR?

---

[DhruvHarani1]

https://github.com/user-attachments/assets/b3b65a0c-6389-41c8-bac4-273a80c694f3

here is a preview of my work

[Sourya07]

how do we handle longer testimonials? it should not be feasible right .

[MisbahAnsar]

@DhruvHarani1 that looks good, i was gonna work on that issue, but cool. you can raise pr if u want.

[DhruvHarani1]

@Sourya07

https://github.com/user-attachments/assets/f9ef676c-d787-4662-91ca-c5e57217e451

@MisbahAnsar

Regarding the handling of longer testimonials, I’ve implemented a "Fluid Expand-in-Place" strategy that balances clean layout with full content accessibility:

• Smart Truncation: By default, testimonials are capped at 4 lines using CSS line-clamping. This ensures that the carousel maintains a consistent height and perfectly aligned rhythm as it rotates.
• Interactive Expansion: Users can click any card to smoothly expand its width and reveal the full text. This transition is handled via CSS transition-all for a premium feel.
• Non-Blocking UX: I chose this over a modal or internal scrollbar to keep the user in the flow of the landing page. The expansion happens directly within the carousel row, and the infinite motion continues seamlessly, allowing the user to read the full quote without interrupting the page's dynamic energy.

This approach resolves the common issue of "jagged" card heights while ensuring that no part of the expert's feedback is permanently hidden.

---

[Sourya07]

how do we handle longer testimonials? it should not be feasible right .

Considering potential future expansion, will the architecture remain feasible and maintainable as more cards are added?

[anshgoyalevil]

cc @Mayaleeeee for design change approval.