Fix: ui improved #207
Fix: ui improved #207
Conversation
|
Warning Review ran into problems🔥 ProblemsGit: Failed to clone repository. Please run the ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🎉 Thank you @samradhi29 for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (4)
src/components/HowItWorks.tsx (2)
5-5: Avoid pre-highlighting a step on first render.If the highlight-on-hover is intentional only, initialize to -1 instead of 0.
- const [activeStep, setActiveStep] = useState(0); + const [activeStep, setActiveStep] = useState(-1);
73-129: Use semantic list markup for steps (optional).Consider wrapping the steps in an ordered list (
) with each card as an
- to improve semantics for assistive tech.
Also applies to: 132-172
src/components/Features.tsx (1)
147-151: Marquee card width can clip on 320px devices.Use responsive min-widths to avoid harsh cropping on very small screens.
- className={`group min-w-[380px] bg-transparent p-8 rounded-3xl + className={`group min-w-[280px] sm:min-w-[340px] md:min-w-[380px] bg-transparent p-8 rounded-3xl ${feature.hoverColor} transition-all duration-500 transform hover:scale-105 hover:-translate-y-2 backdrop-blur-sm relative overflow-hidden features-animate-float`}src/components/Hero.tsx (1)
10-25: Cleanup: avoid unnecessary effect dependency.fullText is a const; you can omit it from deps.
- }, [currentIndex, fullText]); + }, [currentIndex]);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/Features.tsx(1 hunks)src/components/Hero.tsx(1 hunks)src/components/HowItWorks.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (3)
src/components/HowItWorks.tsx (1)
src/pages/Home/Home.tsx (1)
Home(5-14)
src/components/Hero.tsx (1)
src/pages/Home/Home.tsx (1)
Home(5-14)
src/components/Features.tsx (2)
src/pages/About/About.tsx (2)
feature(67-80)div(22-85)src/pages/Home/Home.tsx (1)
Home(5-14)
🔇 Additional comments (1)
src/components/Hero.tsx (1)
162-176: ```shell
#!/bin/bash
set -eDisplay lines around the CTA in Hero.tsx
sed -n '150,200p' src/components/Hero.tsx
Check for any onClick handlers on that button
grep -nP '<button[^>]*onClick' src/components/Hero.tsx || echo "No onClick handler found in Hero.tsx"
</blockquote></details> </blockquote></details> </details> <!-- This is an auto-generated comment by CodeRabbit for review status -->
| @keyframes float { | ||
| 0%, 100% { | ||
| transform: translateY(0px); | ||
| } | ||
| 50% { | ||
| transform: translateY(-5px); | ||
| } | ||
| } | ||
There was a problem hiding this comment.
🛠️ Refactor suggestion
CSS naming collision with Hero: “float” keyframes and “animate-float” class.
Both Features and Hero define identically named keyframes/classes with different timings. Last-in-DOM wins, causing unpredictable motion. Prefix component-local names.
- @keyframes float {
+ @keyframes features-float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-5px);
}
}
...
- .animate-float {
- animation: float 3s ease-in-out infinite;
+ .features-animate-float {
+ animation: features-float 3s ease-in-out infinite;
}- backdrop-blur-sm relative overflow-hidden animate-float`}
+ backdrop-blur-sm relative overflow-hidden features-animate-float`}Also applies to: 96-99, 147-151
🤖 Prompt for AI Agents
In src/components/Features.tsx around lines 70-78 (and also affecting lines
96-99 and 147-151), the component defines global @keyframes named "float" and an
"animate-float" class which collides with the same names in Hero, causing
last-in-DOM styling to win; rename these to component-scoped identifiers (e.g.,
"features-float" and "animate-features-float") and update all references within
this file (keyframe declaration, animation-property usages, and any className
strings) so the animation timings remain local to Features and no longer
conflict with Hero.
| @keyframes float { | ||
| 0%, 100% { transform: translateY(0px); } | ||
| 50% { transform: translateY(-10px); } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
CSS naming collision with Features: “float” keyframes and “animate-float”.
Rename Hero’s animation identifiers to avoid cross-component overrides.
- @keyframes float {
+ @keyframes hero-float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
...
- .animate-float {
- animation: float 6s ease-in-out infinite;
+ .hero-animate-float {
+ animation: hero-float 6s ease-in-out infinite;
}- <div className="absolute top-20 left-20 w-2 h-2 bg-blue-500 rounded-full opacity-60 animate-float"></div>
+ <div className="absolute top-20 left-20 w-2 h-2 bg-blue-500 rounded-full opacity-60 hero-animate-float"></div>
- <div className="absolute bottom-20 right-20 w-1.5 h-1.5 bg-pink-500 rounded-full opacity-60 animate-float"></div>
+ <div className="absolute bottom-20 right-20 w-1.5 h-1.5 bg-pink-500 rounded-full opacity-60 hero-animate-float"></div>Also applies to: 76-79, 122-128, 160-176, 189-198
🤖 Prompt for AI Agents
In src/components/Hero.tsx around lines 39-42 (also apply same change at 76-79,
122-128, 160-176, 189-198), the keyframes name "float" and the animation class
"animate-float" collide with the Features component; rename Hero-specific
keyframes and animation classes to unique identifiers (e.g., "hero-float" and
"animate-hero-float") throughout the file, update every corresponding @keyframes
declaration and any className/animation references to the new names, and ensure
no other components are changed so the animation remains scoped to Hero.
| .animate-gradient { | ||
| background: linear-gradient(-45deg, #3b82f6, #8b5cf6, #06b6d4, #10b981); | ||
| background-size: 400% 400%; | ||
| animation: gradient 4s ease infinite; | ||
| } | ||
| .animate-shimmer { | ||
| background: linear-gradient( | ||
| 90deg, | ||
| transparent, | ||
| rgba(255, 255, 255, 0.2), | ||
| transparent | ||
| ); | ||
| background-size: 200% 100%; | ||
| animation: shimmer 2s infinite; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Honor prefers-reduced-motion.
Disable long-running hero animations when the user asks for reduced motion.
.animate-shimmer {
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
background-size: 200% 100%;
animation: shimmer 2s infinite;
}
+
+ @media (prefers-reduced-motion: reduce) {
+ .hero-animate-float,
+ .animate-blob,
+ .animate-gradient,
+ .animate-shimmer,
+ .animation-delay-2000,
+ .animation-delay-4000 {
+ animation: none !important;
+ }
+ }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .animate-gradient { | |
| background: linear-gradient(-45deg, #3b82f6, #8b5cf6, #06b6d4, #10b981); | |
| background-size: 400% 400%; | |
| animation: gradient 4s ease infinite; | |
| } | |
| .animate-shimmer { | |
| background: linear-gradient( | |
| 90deg, | |
| transparent, | |
| rgba(255, 255, 255, 0.2), | |
| transparent | |
| ); | |
| background-size: 200% 100%; | |
| animation: shimmer 2s infinite; | |
| } | |
| .animate-gradient { | |
| background: linear-gradient(-45deg, #3b82f6, #8b5cf6, #06b6d4, #10b981); | |
| background-size: 400% 400%; | |
| animation: gradient 4s ease infinite; | |
| } | |
| .animate-shimmer { | |
| background: linear-gradient( | |
| 90deg, | |
| transparent, | |
| rgba(255, 255, 255, 0.2), | |
| transparent | |
| ); | |
| background-size: 200% 100%; | |
| animation: shimmer 2s infinite; | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .hero-animate-float, | |
| .animate-blob, | |
| .animate-gradient, | |
| .animate-shimmer, | |
| .animation-delay-2000, | |
| .animation-delay-4000 { | |
| animation: none !important; | |
| } | |
| } |
🤖 Prompt for AI Agents
In src/components/Hero.tsx around lines 96 to 111, the long-running
.animate-gradient and .animate-shimmer animations do not respect the user's
prefers-reduced-motion setting; add a CSS media query @media
(prefers-reduced-motion: reduce) that disables animations for these classes (set
animation: none) and reset any animated background-size to a non-animated value
(e.g., background-size: auto or the static value you want) so the hero respects
reduced motion preferences.
| <div | ||
| key={index} | ||
| className="group cursor-pointer" | ||
| onMouseEnter={() => setActiveStep(index)} | ||
| > | ||
| {/* Card */} | ||
| <div className={`relative p-8 rounded-3xl transition-all duration-300 | ||
| ${step.bgColor} backdrop-blur-sm | ||
| border-2 ${step.borderColor} ${step.hoverBorderColor} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Make the interactive cards keyboard-accessible (role, tabIndex, focus, key handlers).
Right now hover-only. Add focus styles and keyboard activation; also reset on mouse leave.
- <div
- key={index}
- className="group cursor-pointer"
- onMouseEnter={() => setActiveStep(index)}
- >
+ <div
+ key={index}
+ className="group cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 rounded-3xl"
+ role="button"
+ tabIndex={0}
+ onMouseEnter={() => setActiveStep(index)}
+ onFocus={() => setActiveStep(index)}
+ onMouseLeave={() => setActiveStep(-1)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ setActiveStep(index);
+ e.preventDefault();
+ }
+ }}
+ >📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div | |
| key={index} | |
| className="group cursor-pointer" | |
| onMouseEnter={() => setActiveStep(index)} | |
| > | |
| {/* Card */} | |
| <div className={`relative p-8 rounded-3xl transition-all duration-300 | |
| ${step.bgColor} backdrop-blur-sm | |
| border-2 ${step.borderColor} ${step.hoverBorderColor} | |
| <div | |
| key={index} | |
| className="group cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 rounded-3xl" | |
| role="button" | |
| tabIndex={0} | |
| onMouseEnter={() => setActiveStep(index)} | |
| onFocus={() => setActiveStep(index)} | |
| onMouseLeave={() => setActiveStep(-1)} | |
| onKeyDown={(e) => { | |
| if (e.key === 'Enter' || e.key === ' ') { | |
| setActiveStep(index); | |
| e.preventDefault(); | |
| } | |
| }} | |
| > |
🤖 Prompt for AI Agents
In src/components/HowItWorks.tsx around lines 78 to 86, the interactive cards
are only mouse-hover driven; make them keyboard-accessible by adding
role="button" and tabIndex={0} on the outer div, wire onFocus={() =>
setActiveStep(index)} and onBlur={() => setActiveStep(-1)} (or the previous
active state) and add onMouseLeave={() => setActiveStep(-1)} to reset on pointer
leave; implement onKeyDown to handle Enter and Space to trigger the same
activation as click/hover (e.g., call the card action or setActiveStep) and
ensure focus styles by adding an appropriate focus-visible/focus:ring class
alongside the existing hover styles so keyboard users see the same visual
feedback.
1 participant
Related Issue
Description
mproved UI by adding animations, marquees, and better card design in both light and dark modes. Check the clip and let me know if you need any changes.
reccord.1.mp4
Type of Change
Summary by CodeRabbit
New Features
Style