Add glassy gradient hover animation to Get Started button#40
Merged
Zahnentferner merged 1 commit intoDjedAlliance:mainfrom Mar 2, 2026
Merged
Conversation
📝 WalkthroughWalkthroughThe "Get Started" button in Home.tsx was refactored to replace a plain anchor element with a styled, animated button. The new implementation adds structural elements and CSS classes to enable a hover animation effect while maintaining the existing smooth-scroll navigation behavior. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/components/pages/home/Home.tsx (1)
27-30: Add reduced-motion fallbacks for the hover animation.Looks good visually, but Line 27 and Line 28 should respect
prefers-reduced-motionto avoid motion-heavy transitions for sensitive users.♿ Suggested Tailwind update
- <a href="#djed_apps" onClick={(e) => { e.preventDefault(); document.getElementById('djed_apps')?.scrollIntoView({ behavior: 'smooth' }); }} className="link-text w-64 flex items-center justify-center py-3 text-base font-medium text-center text-white bg-black rounded-full cursor-pointer relative overflow-hidden group transition-all duration-300"> + <a href="#djed_apps" onClick={(e) => { e.preventDefault(); document.getElementById('djed_apps')?.scrollIntoView({ behavior: 'smooth' }); }} className="link-text w-64 flex items-center justify-center py-3 text-base font-medium text-center text-white bg-black rounded-full cursor-pointer relative overflow-hidden group transition-all duration-300 motion-reduce:transition-none"> - <span className="absolute inset-0 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-700 ease-out" style={{ background: 'linear-gradient(90deg, rgba(243, 193, 129, 0.3) 0%, rgba(243, 193, 129, 0.5) 50%, rgba(243, 193, 129, 0.3) 100%)', backdropFilter: 'blur(12px)' }}></span> + <span className="absolute inset-0 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-700 ease-out motion-reduce:transform-none motion-reduce:transition-none" style={{ background: 'linear-gradient(90deg, rgba(243, 193, 129, 0.3) 0%, rgba(243, 193, 129, 0.5) 50%, rgba(243, 193, 129, 0.3) 100%)', backdropFilter: 'blur(12px)' }}></span>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/pages/home/Home.tsx` around lines 27 - 30, The hover animation doesn't respect users' prefers-reduced-motion setting; update the anchor and its animated span classNames so transitions and transforms are only applied for users who allow motion. Specifically, on the <a> with className="... group transition-all duration-300" add motion-safe prefixes (e.g., motion-safe:transition-all motion-safe:duration-300) and on the inner absolute span that uses "transform -translate-x-full group-hover:translate-x-0 transition-transform duration-700 ease-out" prefix those classes with motion-safe (e.g., motion-safe:transform motion-safe:-translate-x-full motion-safe:group-hover:translate-x-0 motion-safe:transition-transform motion-safe:duration-700) so that when prefers-reduced-motion is set the animation/transform is suppressed.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/components/pages/home/Home.tsx`:
- Around line 27-30: The hover animation doesn't respect users'
prefers-reduced-motion setting; update the anchor and its animated span
classNames so transitions and transforms are only applied for users who allow
motion. Specifically, on the <a> with className="... group transition-all
duration-300" add motion-safe prefixes (e.g., motion-safe:transition-all
motion-safe:duration-300) and on the inner absolute span that uses "transform
-translate-x-full group-hover:translate-x-0 transition-transform duration-700
ease-out" prefix those classes with motion-safe (e.g., motion-safe:transform
motion-safe:-translate-x-full motion-safe:group-hover:translate-x-0
motion-safe:transition-transform motion-safe:duration-700) so that when
prefers-reduced-motion is set the animation/transform is suppressed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Addressed Issues:
Fixes #39
Recordings:
Ankit.Djed.mp4
Additional Notes:
This PR introduces a smooth glassy gradient hover animation to the "Get Started" button to improve visual feedback and user interaction.
Changes Made:
Technical Details:
This enhancement is small in scope and isolated to a single component, making it easy to review and maintain.
It is also a great beginner-friendly improvement, as it requires minimal code changes while improving overall UI polish.
Checklist:
Summary by CodeRabbit
Release Notes