feat(testimonials): redesign section with modern infinite marquee layout #226
Conversation
There was a problem hiding this comment.
Pull request overview
This PR completely redesigns the testimonials section with a modern infinite marquee layout, replacing the outdated Marquee component with CSS-based animations. The implementation includes premium card styling with gradient accents, smooth scrolling effects, and fallback avatars for failed image loads.
- Replaces Marquee component with custom CSS infinite scroll animation
- Adds shadcn/ui components (Button, Carousel) and supporting utilities
- Upgrades TypeScript and migrates Next.js image configuration to remotePatterns
Reviewed changes
Copilot reviewed 5 out of 8 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| tsconfig.json | Updates TypeScript configuration with new JSX transform and reformatted arrays |
| package.json | Upgrades TypeScript, Next.js, ESLint packages and adds carousel/icon dependencies |
| next.config.js | Migrates deprecated image domains to remotePatterns configuration |
| lib/utils.ts | Adds cn utility function for merging Tailwind classes |
| components/ui/carousel.tsx | Adds new Carousel component using Embla Carousel (currently unused) |
| components/ui/button.tsx | Updates Button component styling and removes custom motion props |
| components/testimonials.tsx | Completely redesigns testimonials with infinite scroll marquee and premium card design |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
ANAMASGARD
force-pushed
the
feat/redesign-testimonials-section
branch
from
52408f1 to
928d2ba
Compare
- Replace outdated marquee with modern CSS-based infinite scroll - Add premium card design with rounded corners and soft shadows - Implement gradient fade overlays for smooth edge blending - Add hover pause and scale effects for better UX - Add fallback avatar with initials for broken Twitter images - Integrate Keploy orange brand colors throughout - Make section fully responsive for all screen sizes - Add shadcn/ui components (Button, Carousel) for future use - Fix Next.js deprecated images.domains warning - Upgrade TypeScript to v5.8.3 Closes keploy/keploy#3082 Signed-off-by: Gauarv Chaudhary <chaudharygaurav2004@gmail.com>
ANAMASGARD
force-pushed
the
feat/redesign-testimonials-section
branch
from
928d2ba to
bc858fc
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 7 changed files in this pull request and generated 6 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Signed-off-by: Gauarv Chaudhary <chaudharygaurav2004@gmail.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 7 changed files in this pull request and generated 5 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add ARIA attributes for accessibility on marquee container - Memoize duplicatedTweets array with useMemo for performance - Remove unused embla-carousel-react dependency - Use unique keys combining tweet.id and index - Remove incorrect heading1 class from name span - Fix uniform card heights with flexbox layout Signed-off-by: Gauarv Chaudhary <chaudharygaurav2004@gmail.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 7 changed files in this pull request and generated 12 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…speed Signed-off-by: Gauarv Chaudhary <chaudharygaurav2004@gmail.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 6 changed files in this pull request and generated 5 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Signed-off-by: Gauarv Chaudhary <chaudharygaurav2004@gmail.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 6 changed files in this pull request and generated 5 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Signed-off-by: Gauarv Chaudhary <chaudharygaurav2004@gmail.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 6 changed files in this pull request and generated 10 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 6 changed files in this pull request and generated 6 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…on bounds Signed-off-by: Gauarv Chaudhary <chaudharygaurav2004@gmail.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 6 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Signed-off-by: Gauarv Chaudhary <chaudharygaurav2004@gmail.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 6 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Signed-off-by: Gauarv Chaudhary <chaudharygaurav2004@gmail.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 6 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: ANAMASGARD <137998824+ANAMASGARD@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 6 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
amaan-bhati
left a comment
amaan-bhati
left a comment
There was a problem hiding this comment.
Hey @ANAMASGARD Thanks for raising this pr, the ui looks promising and is great for the structure and init. But there are a few things we should consider:
- The heading is center aligned here, but in other sections it is left aligned, it breaks the flow and distracts the user's eye, disturbing the natural flow of the user's eye is not really preferred, hence, we should try to stick with left aligned heading.
-
The speed of the marquee is a little slow, we need to speed up the speed by a little bit.
-
The marque needs to be controllable by either fingers or two buttons at the corners.
-
The edges/corners are not blending in with the background, the edges need to have a transparent background so that it blends well with the background of the landing page.
|
Hey @ANAMASGARD I tried running this pr locally, there are a bunch of build failures which i feel need to get addressed, can you please take a look at it? |
|
Yes @amaan-bhati Sir I will do it can you please share the screen shot or just copy and paste all the errors you are facing because when I do npm run dev it is working, please can you elaborate on the build failure part. |
npm run build
> build
> next build
▲ Next.js 16.1.1 (Turbopack)
- Environments: .env.local
✓ Finished TypeScript in 2.5s
Creating an optimized production build ...
✓ Compiled successfully in 2.8s
✓ Collecting page data using 15 workers in 6.7s
tech posts: 22
Warning: data for page "/authors" is 151 kB which exceeds the threshold of 128 kB, this amount of data can reduce performance.
See more info here: https://nextjs.org/docs/messages/large-page-data
Warning: data for page "/technology/[slug]" (path "/technology/future-of-test-automation-in-ai-era") is 137 kB which exceeds the threshold of 128 kB, this amount of data can reduce performance.
See more info here: https://nextjs.org/docs/messages/large-page-data
✓ Generating static pages using 15 workers (1001/1001) in 45s
✓ Finalizing page optimization in 19.6ms
Route (pages) Revalidate Expire
┌ ● / (16949 ms) 10s 1y
├ /_app
├ ○ /404 (13331 ms) 1m 1y
├ ƒ /api/exit-preview
├ ƒ /api/preview
├ ƒ /api/proxy-image
├ ● /authors (25222 ms) 10s 1y
├ ● /authors/[slug] (11402 ms) 1m 1y
│ ├ /authors/alok-kumar (3084 ms)
│ ├ /authors/achanandhi-m (1677 ms)
│ ├ /authors/pratik-mahalle (1669 ms)
│ ├ /authors/sancharini-panda (1660 ms)
│ ├ /authors/himanshu-mandhyan (1660 ms)
│ └ /authors/gurjot-singh-sidhu (1622 ms)
├ ● /community (12315 ms) 10s 1y
├ ● /community/[slug] (56838 ms) 1m 1y
│ ├ /community/api-automation-testing (3668 ms)
│ ├ /community/test-data-management-best-practices (3641 ms)
│ ├ /community/replit-vs-cursor-ai-development-tools (3641 ms)
│ ├ /community/infrastructure-automation-future (3625 ms)
│ ├ /community/how-to-integrate-keploy-in-github-actions (3625 ms)
│ ├ /community/functionality-testing-software-improves-quality (3624 ms)
│ ├ /community/model-based-testing (2743 ms)
│ └ [+15 more paths] (avg 2149 ms)
├ ● /community/search (16015 ms) 1m 1y
├ ● /search (17460 ms) 1m 1y
├ ● /tag (18184 ms) 10s 1y
├ ● /tag/[slug] (1762002 ms) 10s 1y
│ ├ /tag/api-testing (12277 ms)
│ ├ /tag/testing (9711 ms)
│ ├ /tag/opensource (9539 ms)
│ ├ /tag/agile-methodology (9146 ms)
│ ├ /tag/frontend-development (9081 ms)
│ ├ /tag/api-first-development (9016 ms)
│ ├ /tag/Agile development (9007 ms)
│ └ [+931 more paths] (avg 1820 ms)
├ ● /technology (13398 ms) 10s 1y
└ ● /technology/[slug] (45400 ms) 10s 1y
├ /technology/protocol-parsing-guide (2654 ms)
├ /technology/efficient-tcp-server-connection-management (2654 ms)
├ /technology/future-of-test-automation-in-ai-era (2359 ms)
├ /technology/efficient-dom-manipulation-with-the-virtual-dom-and-refs (2350 ms)
├ /technology/my-testing-journey-with-jasmine-and-mocha (2342 ms)
├ /technology/gemini-pro-vs-openai-benchmark-ai-for-software-testing (2164 ms)
├ /technology/building-a-cli-tool-in-go-with-cobra-and-viper (2164 ms)
└ [+15 more paths] (avg 1912 ms)
○ (Static) prerendered as static content
● (SSG) prerendered as static HTML (uses getStaticProps)
ƒ (Dynamic) server-rendered on demand |
amaan-bhati
left a comment
amaan-bhati
left a comment
There was a problem hiding this comment.
Hey @ANAMASGARD Thanks for following up, I pulled the changes and tried running them locally, but I’m still encountering build failures when running npm run build. I’ve attached a screenshot below for reference.
Also for the ui, the marquee speed is still not fixed, the speed needs to be decent enough for a user to see most of the testimonials quickly, as of the first day of 2026, people have a very low attention spam, and they dont tend to spend a lot of time on a single section, hence we need to show most out of a section, hence the speed needs to be maintained properly.
3 participants
FIXES : keploy/keploy#3082
Description
Completely redesigns the testimonials section to address the outdated marquee that overlapped borders and didn't blend well with the background. The new implementation features a modern, premium design with smooth infinite scrolling, consistent Keploy branding, and full responsiveness.
Changes
rounded-3xlcorners and soft shadows (shadow-lg,hover:shadow-2xl)images.domainswarning (migrated toremotePatterns)Type of Change
Testing
Demo
Environment and Dependencies
embla-carousel-react(v8.6.0) - for carousel functionalityembla-carousel-autoplay(v8.6.0) - for autoplay supportlucide-react(v0.524.0) - for iconsclass-variance-authority(v0.7.1) - for component variantsremotePatternsinstead of deprecatedimages.domainsChecklist