Fix: testimonials slider with improved styling and layout #263

Gagan202005 · 2026-01-08T14:25:33Z

Related Tickets & Documents

Fixes: keploy/keploy#3440

Description

Enhanced the testimonials slider component with improved styling, layout, and user experience.

Changes

Card Styling: Upgraded testimonial cards with modern design including:
- Gradient backgrounds (white to orange tint)
- Enhanced borders with hover effects (orange-500 border on hover)
- Improved shadows and glassmorphism effects
- Larger avatars (44px) with decorative rings
- Added online indicator dot on avatars
- Subtle quote icon in the background
- Hover Effects: Implemented isolated hover interactions:
- Individual card scaling (1.05x) on hover
- Orange border highlight for hovered card only
- Smooth transitions (300ms duration)
- Other cards remain unaffected
Typography & Icons:
- Added X (Twitter) icon next to usernames
- Improved text hierarchy with better font weights and colors
- Enhanced readability with better line heights and spacing
Layout Improvements:
- Matched container width with other sections (max-w-7xl)
- Responsive padding (px-5 sm:px-6)
- Better alignment with existing page sections
Heading & Subtitle:
- Refined heading with softer orange gradient underline
- Added subtitle: "Join thousands of developers who trust Keploy for their testing needs"
- Improved tracking and spacing
Content Display:
- Cards now have minimum height with flexible content display
- Full comment text visible (no truncation)
- Better spacing and padding throughout

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

Hover effects work correctly on individual cards
Responsive layout tested on mobile, tablet, and desktop
All content displays properly without truncation
Animations are smooth and performant
Layout matches other sections on the page

Demo

Testing video of Testimonial slider

testimonial.testing.mov

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

Signed-off-by: Gagan202005 <gagansinghal2005@gmail.com>

Copilot

Pull request overview

This pull request enhances the testimonials slider component with improved styling, layout, and user experience. The changes include modern card designs with gradient backgrounds, hover effects, and better typography, while also fixing layout consistency issues across the page.

Key Changes:

Simplified testimonial display from two rows to a single row marquee
Enhanced card styling with gradients, borders, hover effects, and decorative elements (avatars with rings, online indicators, quote icons)
Improved container layout to match site-wide consistency with max-w-7xl width and responsive padding

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-08T14:28:24Z

components/testimonials.tsx

+              alt=""
+              src={proxiedAvatar}
+            />
+            <div className="absolute -bottom-1 -right-1 w-4 h-4 bg-orange-400 rounded-full border-2 border-white"></div>


The decorative orange dot element lacks semantic meaning or alternative text. For better accessibility, consider adding aria-hidden="true" to this div since it's purely decorative and doesn't convey meaningful information to screen reader users.

Suggested change

<div className="absolute -bottom-1 -right-1 w-4 h-4 bg-orange-400 rounded-full border-2 border-white"></div>

<div

className="absolute -bottom-1 -right-1 w-4 h-4 bg-orange-400 rounded-full border-2 border-white"

aria-hidden="true"

></div>

Copilot · 2026-01-08T14:28:24Z

components/testimonials.tsx

+          <svg className="w-10 h-10 text-orange-300/40" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
+          </svg>


The decorative quote icon SVG should have aria-hidden="true" added to it. Since this is purely decorative and doesn't convey meaningful information beyond what's already in the content, it should be hidden from assistive technologies.

Copilot · 2026-01-08T14:28:25Z

components/testimonials.tsx

+              <svg className="w-3 h-3 text-gray-500" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+              </svg>


The X (Twitter) icon SVG should have aria-hidden="true" added to it since it's decorative and the username information is already conveyed through the text. This improves accessibility by preventing screen readers from announcing redundant information.

Copilot · 2026-01-08T14:28:25Z

components/testimonials.tsx

-          <div className="flex flex-col">
-            <figcaption className="text-sm font-bold">{name}</figcaption>
-            <p className="text-xs font-medium ">{id}</p>
+    <a href={post} target="_blank" className="lg:mx-2 inline-block">


The anchor tag opens in a new tab with target="_blank" but is missing rel="noopener noreferrer" for security. This is a security best practice to prevent the new page from accessing the window.opener property and to avoid passing the referrer information.

Suggested change

<a href={post} target="_blank" className="lg:mx-2 inline-block">

<a href={post} target="_blank" rel="noopener noreferrer" className="lg:mx-2 inline-block">

Copilot · 2026-01-08T14:28:25Z

components/testimonials.tsx

-            <figcaption className="text-sm font-bold">{name}</figcaption>
-            <p className="text-xs font-medium ">{id}</p>
+    <a href={post} target="_blank" className="lg:mx-2 inline-block">
+      <figure className="relative w-80 min-h-64 cursor-pointer overflow-visible rounded-2xl border-2 border-gray-200/50 hover:border-orange-500 hover:shadow-xl hover:shadow-orange-200/50 hover:scale-[1.05] p-5 bg-gradient-to-br from-white to-orange-50/30 backdrop-blur-sm shadow-lg transition-all duration-300 flex flex-col">


The figure element has overflow-visible set, which may cause the hover scale effect (hover:scale-[1.05]) and shadow (hover:shadow-xl) to be clipped by parent containers. Consider verifying that parent elements have appropriate overflow handling or adjust this to overflow-hidden if clipping occurs.

Suggested change

<figure className="relative w-80 min-h-64 cursor-pointer overflow-visible rounded-2xl border-2 border-gray-200/50 hover:border-orange-500 hover:shadow-xl hover:shadow-orange-200/50 hover:scale-[1.05] p-5 bg-gradient-to-br from-white to-orange-50/30 backdrop-blur-sm shadow-lg transition-all duration-300 flex flex-col">

<figure className="relative w-80 min-h-64 cursor-pointer overflow-hidden rounded-2xl border-2 border-gray-200/50 hover:border-orange-500 hover:shadow-xl hover:shadow-orange-200/50 hover:scale-[1.05] p-5 bg-gradient-to-br from-white to-orange-50/30 backdrop-blur-sm shadow-lg transition-all duration-300 flex flex-col">

Copilot · 2026-01-08T14:28:26Z

components/testimonials.tsx

+        <p className="text-center lg:text-left text-gray-600 text-base mb-8">
+          Join thousands of developers who trust Keploy for their testing needs
+        </p>
+      <div className="relative flex mb-8 h-fix w-full flex-col items-center justify-center overflow-hidden rounded-2xl border border-gray-200/50 bg-gradient-to-br from-orange-50/30 via-white to-orange-50/20 p-8 shadow-inner">


The class h-fix appears to be a typo and is not a valid Tailwind CSS class. This should likely be h-full or a specific height value like h-[700px] (as it was in the original code). This will cause the container to not render with the intended height.

Suggested change

<div className="relative flex mb-8 h-fix w-full flex-col items-center justify-center overflow-hidden rounded-2xl border border-gray-200/50 bg-gradient-to-br from-orange-50/30 via-white to-orange-50/20 p-8 shadow-inner">

<div className="relative flex mb-8 h-[700px] w-full flex-col items-center justify-center overflow-hidden rounded-2xl border border-gray-200/50 bg-gradient-to-br from-orange-50/30 via-white to-orange-50/20 p-8 shadow-inner">

Copilot · 2026-01-08T14:28:26Z

components/testimonials.tsx

+          </div>
+        </div>
+        <blockquote className="text-sm leading-relaxed text-gray-700 flex-1">{content}</blockquote>
+        <div className="absolute top-3 right-3 opacity-8">


The opacity value opacity-8 is invalid. Tailwind CSS opacity classes use values from 0-100 in increments (e.g., opacity-10, opacity-20, etc.). This should be changed to a valid opacity value like opacity-10 or opacity-20.

amaan-bhati

Hey @Gagan202005 Thanks for raising this pr and also for actively contributing to keploy. I reviewed this pr locally and i have a few suggestions:

The section seems to have different background as compared to the landing background, the section needs to blend well with the background hence i would suggest to either match the same bg or make this section have a transparent background.
The best practice here would be to make the section have no background at all since there might be a case we might be using the same section at different places in the site, hence it is better to make the section have no background at all so that it blends well with the same background.
Here's a reference image for better understanding of what i am talking about:

- Importance of attention to detail here: There's only a minor difference in both the background but smhw causes discomfort to the eye causing a bad user experience, also it is would be good practices to not have a bg here so that the section blends everywhere we use it.

There's only one row in this section where the testimonials are moving in a direction, the better ui would be having two marquees moving in opposite directions, I hope you get it, if you want any further clarifications, you can reach out to us on slack!

Signed-off-by: Gagan202005 <gagansinghal2005@gmail.com>

Gagan202005 · 2026-01-08T21:30:06Z

Hi @amaan-bhati

Thanks a lot for the detailed review and suggestions — they were really helpful.
I’ve made the requested changes in the PR:

Removed the background from the testimonials section so it remains transparent and blends well with different backgrounds.
Added a second marquee row moving in the opposite direction to improve the overall UI and visual balance.

Testing :

Screen.Recording.2026-01-09.at.2.54.49.AM.mov

Could you please take another look and let me know if everything looks good now?
Happy to make further adjustments if needed.

Thanks again!

amaan-bhati

Hey @Gagan202005 Thanks for following up on the previous review, i ran the changes on my localhost, i love the fact that when we hover over a tweet, there is a border effect which adds up to the ui in a good way. But there is still a clear difference between the background of this section and the background of the home page, this section still doesnt have a transparent background hence it is not blending with the background, although it does blend well at the bottom, something similar or complete transparence i the entire section would be great too.

Images for reference:

blends well at the bottom but there is still clear difference a the edges.

Gagan202005 · 2026-01-13T18:22:23Z

Hey @Gagan202005 Thanks for following up on the previous review, i ran the changes on my localhost, i love the fact that when we hover over a tweet, there is a border effect which adds up to the ui in a good way. But there is still a clear difference between the background of this section and the background of the home page, this section still doesnt have a transparent background hence it is not blending with the background, although it does blend well at the bottom, something similar or complete transparence i the entire section would be great too.

Images for reference:
blends well at the bottom but there is still clear difference a the edges.

sir if we make whole section transparent, then there will be no blur effect at the edges
@amaan-bhati please confirm me that should i make it whole transparent section

Gagan202005 added 2 commits January 8, 2026 19:42

Enhance testimonials slider with improved styling and layout

a3839df

Signed-off-by: Gagan202005 <gagansinghal2005@gmail.com>

finally fixed

fd6934b

Signed-off-by: Gagan202005 <gagansinghal2005@gmail.com>

Copilot AI review requested due to automatic review settings January 8, 2026 14:25

Copilot started reviewing on behalf of Gagan202005 January 8, 2026 14:25 View session

Copilot AI reviewed Jan 8, 2026

View reviewed changes

Gagan202005 mentioned this pull request Jan 8, 2026

[blog-website]: improve the styling and the ui of the testimonial marquee on blog home page keploy/keploy#3440

Open

Merge branch 'main' into enhance-testimonials-slider

b1cc467

amaan-bhati self-requested a review January 8, 2026 20:01

amaan-bhati requested changes Jan 8, 2026

View reviewed changes

Gagan202005 added 3 commits January 9, 2026 02:09

Merge branch 'main' into enhance-testimonials-slider

01d4b49

fix background

dda0577

Signed-off-by: Gagan202005 <gagansinghal2005@gmail.com>

fix background finally

f19af18

Signed-off-by: Gagan202005 <gagansinghal2005@gmail.com>

Merge branch 'main' into enhance-testimonials-slider

ce8831b

amaan-bhati self-requested a review January 13, 2026 18:11

amaan-bhati requested changes Jan 13, 2026

View reviewed changes

	<a href={post} target="_blank" className="lg:mx-2 inline-block">
	<a href={post} target="_blank" rel="noopener noreferrer" className="lg:mx-2 inline-block">

	<figure className="relative w-80 min-h-64 cursor-pointer overflow-visible rounded-2xl border-2 border-gray-200/50 hover:border-orange-500 hover:shadow-xl hover:shadow-orange-200/50 hover:scale-[1.05] p-5 bg-gradient-to-br from-white to-orange-50/30 backdrop-blur-sm shadow-lg transition-all duration-300 flex flex-col">
	<figure className="relative w-80 min-h-64 cursor-pointer overflow-hidden rounded-2xl border-2 border-gray-200/50 hover:border-orange-500 hover:shadow-xl hover:shadow-orange-200/50 hover:scale-[1.05] p-5 bg-gradient-to-br from-white to-orange-50/30 backdrop-blur-sm shadow-lg transition-all duration-300 flex flex-col">

	<div className="relative flex mb-8 h-fix w-full flex-col items-center justify-center overflow-hidden rounded-2xl border border-gray-200/50 bg-gradient-to-br from-orange-50/30 via-white to-orange-50/20 p-8 shadow-inner">
	<div className="relative flex mb-8 h-[700px] w-full flex-col items-center justify-center overflow-hidden rounded-2xl border border-gray-200/50 bg-gradient-to-br from-orange-50/30 via-white to-orange-50/20 p-8 shadow-inner">

Fix: testimonials slider with improved styling and layout #263

Are you sure you want to change the base?

Fix: testimonials slider with improved styling and layout #263

Uh oh!

Conversation

Gagan202005 commented Jan 8, 2026

Related Tickets & Documents

Description

Changes

Type of Change

Testing

Demo

Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

amaan-bhati left a comment

Choose a reason for hiding this comment

Uh oh!

Gagan202005 commented Jan 8, 2026

Uh oh!

amaan-bhati left a comment

Choose a reason for hiding this comment

Uh oh!

Gagan202005 commented Jan 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants