Added animated testimonial section #351
Conversation
|
@Sawan-Kushwah is attempting to deploy a commit to the bunty's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe Changes
Possibly related PRs
Suggested labels
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (1)
frontend/src/components/ui/ReviewCarousel.jsx (1)
68-82: Use descriptive variable names for better readabilityThe variable
sttis not descriptive, which can make the code harder to understand and maintain. Using meaningful variable names enhances code clarity.Suggested Action:
Rename
sttto a more descriptive name likeoffsetIndexorstep:-let stt = 0; +let offsetIndex = 0; -for (let i = active + 1; i < itemsElement.length; i++) { - stt++; - itemsElement[i].style.transform = `translateX(${120 * stt}px) scale(${1 - 0.2 * stt}) perspective(16px) rotateY(-1deg)`; - // ... -} +for (let i = active + 1; i < itemsElement.length; i++) { + offsetIndex++; + itemsElement[i].style.transform = `translateX(${120 * offsetIndex}px) scale(${1 - 0.2 * offsetIndex}) perspective(16px) rotateY(-1deg)`; + // ... +} // Similarly for the previous items -offsetIndex = 0; +offsetIndex = 0; for (let i = active - 1; i >= 0; i--) { offsetIndex++; itemsElement[i].style.transform = `translateX(${-120 * offsetIndex}px) scale(${1 - 0.2 * offsetIndex}) perspective(16px) rotateY(1deg)`; // ... }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- frontend/src/components/ui/ReviewCarousel.jsx (1 hunks)
🧰 Additional context used
🔇 Additional comments (1)
frontend/src/components/ui/ReviewCarousel.jsx (1)
7-12: Duplicate 'img' URLs in the items arrayThe
imgURLs for the first and last items appear to be the same. This might be unintentional and could lead to duplicate images in the carousel.Action Needed:
Please verify if the duplicate image URLs are correct or if they need to be updated to reflect different images.
If different images are intended, consider changing the
imgURL for one of the items:// Item at lines 47-52 { img: "https://i.pravatar.cc/250?u=unique-user-id", // ... }Also applies to: 47-52
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@Sawan-Kushwah make it responsive and auto scroll |
Untitled.video.-.Made.with.Clipchamp.14.mp4check it out i have make it responsive and also autoscrolable |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (2)
frontend/src/components/ui/ReviewCarousel.jsx (2)
56-62: Simplify the dependency array in the useEffect hookSince the
itemsarray is static and its length doesn't change, you can use an empty dependency array[]in theuseEffecthook. This ensures the interval is set up once when the component mounts.Apply this diff to update the dependency array:
useEffect(() => { const interval = setInterval(() => { setActive(prev => (prev + 1) % items.length); }, 2500); return () => clearInterval(interval); - }, [items.length]); + }, []);
119-121: Enhance accessibility with descriptive 'alt' text for imagesThe
altattribute should be descriptive to improve accessibility for users relying on screen readers. Including the reviewer's name provides more context.Apply this change to make the
alttext more descriptive:<img src={item.img} - alt="User Avatar" + alt={`Avatar of ${item.name.substring(2).trim()}`} className='w-[150px] h-[150px] rounded-lg object-cover mb-[20px] cursor-pointer max-sm:h-[120px] mb-0'
RamakrushnaBiswal
added
enhancement
issue #342
Untitled.video.-.Made.with.Clipchamp.11.mp4
here is the testimonial if changes required then comment i will do it !!
Summary by CodeRabbit
New Features
ReviewCarouselcomponent with a more interactive and visually appealing layout.Bug Fixes