Redesign Testimonial Component #54
Conversation
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
|
@koppadipranaykumar is attempting to deploy a commit to the mihir2006's projects Team on Vercel. A member of the Team first needs to authorize it. |
Thanks for creating this PRWe'll review it as soon as possible. If there are any unresolved review comments, feel free to resolve them. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @koppadipranaykumar, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request significantly upgrades the user experience by replacing the existing static testimonial display with a new, visually engaging, and interactive marquee component. The change aims to present customer feedback more dynamically and professionally, enhancing the overall aesthetic and modern feel of the application's landing page.
Highlights
- Testimonial Component Redesign: Replaced the static testimonial section with a dynamic, modern marquee-style component.
- Marquee Animation: Implemented a dual-row infinite scroll marquee with opposite directions, smooth 60-second animation cycles, and seamless loops.
- Interactive UI/UX: Added pause/resume functionality on hover and via a dedicated button, along with glassmorphism cards, gradient effects, and responsive design.
- New Component & Integration: Introduced a new Testimonials.tsx component, fully type-safe with TypeScript, and integrated it into the Landing.tsx page.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
|
@MIHIR2006 here is the new PR I hope the issue got solved |
There was a problem hiding this comment.
Code Review
This pull request introduces a well-crafted, modern marquee-style testimonial component, which is a great visual and functional upgrade. The code is clean and the animations are smooth. My review focuses on a few key areas to further enhance the new component: introducing full TypeScript safety as intended, fixing a functional bug in the pause/resume logic, improving the component's robustness against changes in data, and some minor code cleanup. Overall, excellent work on the redesign.
| onMouseEnter={() => setIsPaused(true)} | ||
| onMouseLeave={() => setIsPaused(false)} |
There was a problem hiding this comment.
These onMouseEnter and onMouseLeave handlers conflict with the pause/resume button's logic. If a user clicks 'Pause', the animation should stay paused regardless of mouse movement. The hover:pause-animation CSS class already handles pausing on hover, so these handlers are causing a bug and are redundant. A similar issue exists on lines 137-138 for the other marquee.
| onMouseEnter={() => setIsPaused(true)} | ||
| onMouseLeave={() => setIsPaused(false)} |
There was a problem hiding this comment.
Similar to the other marquee row, these onMouseEnter and onMouseLeave handlers conflict with the pause/resume button's logic and should be removed. The hover:pause-animation class is sufficient for handling the hover-to-pause behavior.
| @@ -0,0 +1,215 @@ | |||
| import React, { useState } from 'react'; | |||
|
|
|||
There was a problem hiding this comment.
To provide full type safety as mentioned in the PR description, let's define interfaces for the Testimonial data and the TestimonialCard props. This will make the code more robust and self-documenting. You can then apply these types to the components and data arrays in subsequent changes.
interface Testimonial {
id: number;
name: string;
role: string;
company: string;
content: string;
avatar: string;
rating: number;
}
interface TestimonialCardProps {
testimonial: Testimonial;
}
| const Testimonials = () => { | ||
| const [isPaused, setIsPaused] = useState(false); | ||
|
|
||
| const testimonials = [ |
There was a problem hiding this comment.
Following the addition of the Testimonial interface, let's apply the types to the Testimonials component and the testimonials array to enforce type safety.
const Testimonials: React.FC = () => {
const [isPaused, setIsPaused] = useState(false);
const testimonials: Testimonial[] = [
| } | ||
| ]; | ||
|
|
||
| const TestimonialCard = ({ testimonial }) => ( |
There was a problem hiding this comment.
To complete the type safety implementation, let's type the TestimonialCard component using React.FC and the TestimonialCardProps interface.
const TestimonialCard: React.FC<TestimonialCardProps> = ({ testimonial }) => (
| {testimonials.slice(0, 3).map((testimonial) => ( | ||
| <TestimonialCard key={`first-${testimonial.id}`} testimonial={testimonial} /> | ||
| ))} | ||
| {/* Duplicate for seamless loop */} | ||
| {testimonials.slice(0, 3).map((testimonial) => ( | ||
| <TestimonialCard key={`first-dup-${testimonial.id}`} testimonial={testimonial} /> | ||
| ))} |
There was a problem hiding this comment.
Using a hardcoded value 3 in slice(0, 3) makes the component brittle. If the number of testimonials changes, this may break the layout or lead to an uneven distribution. It's better to split the array dynamically based on its length.
{testimonials.slice(0, Math.ceil(testimonials.length / 2)).map((testimonial) => (
<TestimonialCard key={`first-${testimonial.id}`} testimonial={testimonial} />
))}
{/* Duplicate for seamless loop */}
{testimonials.slice(0, Math.ceil(testimonials.length / 2)).map((testimonial) => (
<TestimonialCard key={`first-dup-${testimonial.id}`} testimonial={testimonial} />
))}
| {testimonials.slice(3).map((testimonial) => ( | ||
| <TestimonialCard key={`second-${testimonial.id}`} testimonial={testimonial} /> | ||
| ))} | ||
| {/* Duplicate for seamless loop */} | ||
| {testimonials.slice(3).map((testimonial) => ( | ||
| <TestimonialCard key={`second-dup-${testimonial.id}`} testimonial={testimonial} /> | ||
| ))} |
There was a problem hiding this comment.
The hardcoded slice(3) is brittle and depends on the total number of testimonials being exactly 6. To make this component more robust, this slice should also be dynamic, taking all items from the middle of the array to the end.
{testimonials.slice(Math.ceil(testimonials.length / 2)).map((testimonial) => (
<TestimonialCard key={`second-${testimonial.id}`} testimonial={testimonial} />
))}
{/* Duplicate for seamless loop */}
{testimonials.slice(Math.ceil(testimonials.length / 2)).map((testimonial) => (
<TestimonialCard key={`second-dup-${testimonial.id}`} testimonial={testimonial} />
))}
| > | ||
| {isPaused ? ( | ||
| <> | ||
| <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
There was a problem hiding this comment.
The SVG for the 'Resume' icon is using stroke="currentColor" with fill="none", which creates an outlined shape. For better visibility and a more standard appearance for icons like this, it's better to use a filled shape.
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
| </> | ||
| ) : ( | ||
| <> | ||
| <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
There was a problem hiding this comment.
Similar to the 'Resume' icon, the 'Pause' icon SVG should use fill="currentColor" instead of stroke="currentColor" and fill="none" to render as a solid, filled shape for better UI consistency.
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
| import { getServerSession } from "next-auth"; | ||
| import { redirect } from "next/navigation"; | ||
| import authOptions from "../api/auth/[...nextauth]/authOptions"; | ||
| import Testimonials from '../components/Testimonials'; |
There was a problem hiding this comment.
The Testimonials component is imported but not used in this file. This unused import should be removed to keep the code clean.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@MIHIR2006 can you add the gssoc label |
MIHIR2006
added
level: easy
2 participants
##issue
#33
Summary
Redesigned the Testimonial component with a modern marquee-style layout featuring smooth animations and enhanced user experience.
✨ What's New
Marquee Animation: Dual-row infinite scroll with opposite directions
Modern UI: Glassmorphism cards with gradient effects
Interactive Controls: Pause/resume functionality on hover and button click
TypeScript Support: Full type safety with proper interfaces
Accessibility: Responsive design with readable content
Professional Content: Financial industry testimonials matching StockVision theme
🚀 Features
Smooth 60-second animation cycles
Seamless infinite loops
Hover effects for enhanced readability
Gradient edge overlays for visual polish
Mobile-responsive design
Dark theme integration
📁 Files Changed
components/Testimonials.tsx - New marquee testimonial component
🎯 Design References
Inspired by Aceternity UI 3D Marquee
Magic UI Marquee Component patterns
Animata Marquee Container concepts
🧪 Testing
Component renders correctly
Animations work smoothly
Hover interactions function properly
Responsive on mobile devices
TypeScript compilation passes
📱 Screenshots
before
after
🔗 Integration
Ready to be imported and used in any page: