Skip to content

Conversation

@Hell1213
Copy link
Contributor

@Hell1213 Hell1213 commented Feb 5, 2026

Replaced CSS keyframe animations in the Hero section with Framer Motion. Removed 62 lines of custom CSS including keyframes and media queries from index.css. Implemented the same color-shifting glow effect using Framer Motion's animate prop with responsive sizing via Tailwind classes. Visual appearance remains identical.

Fixes: #450

Checklist

  • Ran npx prettier --write . (for formatting)
  • Ran gofmt -w . (for Go backend) - N/A (frontend only)
  • Ran npm test (for JS/TS testing)
  • Added unit tests, if applicable - Updated snapshot test
  • Verified all tests pass - 670 tests passing
  • Updated documentation, if needed - N/A

Additional Notes
This change consolidates animation logic by using the existing Framer Motion dependency instead of maintaining separate CSS animations. The glow effect behind the hero cards animates between pink and blue colors with the same timing and visual result as before.

Screencast.from.2026-02-06.00-29-13.mp4

@github-actions
Copy link

github-actions bot commented Feb 5, 2026

Thank you for opening this PR!

Before a maintainer takes a look, it would be really helpful if you could walk through your changes using GitHub's review tools.

Please take a moment to:

  • Check the "Files changed" tab
  • Leave comments on any lines for functions, comments, etc. that are important, non-obvious, or may need attention
  • Clarify decisions you made or areas you might be unsure about and/or any future updates being considered.
  • Finally, submit all the comments!

More information on how to conduct a self review:
https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request

This helps make the review process smoother and gives us a clearer understanding of your thought process.

Once you've added your self-review, we'll continue from our side. Thank you!

Copy link
Contributor Author

@Hell1213 Hell1213 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replaced Hero section CSS animations with Framer Motion to reduce custom CSS and improve consistency with the rest of the app.

@Hell1213
Copy link
Contributor Author

Hell1213 commented Feb 5, 2026

hey @its-me-abhishek pls take a look , PR is ready to review , I have implemented fix going with framer .

Copy link
Collaborator

@its-me-abhishek its-me-abhishek left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Hell1213 this looks great! I think you forgot about the Homepage though. Moreover can you make this a separate component? maybe in utils, for common access, and better testing.

@Hell1213
Copy link
Contributor Author

Hell1213 commented Feb 8, 2026

@Hell1213 this looks great! I think you forgot about the Homepage though. Moreover can you make this a separate component? maybe in utils, for common access, and better testing.

thanks , yeah i saw that apologies for that , I'll update the pr when its ready

…Replaced CSS keyframe animations with Framer Motion in both Landing and Home page Hero components. Created a shared AnimatedGlow component in utils for better code reusability and testing.
@Hell1213 Hell1213 force-pushed the fix/hero-framer-motion-450 branch from 7b66b5b to 6cd77b1 Compare February 9, 2026 18:40
@Hell1213
Copy link
Contributor Author

Hell1213 commented Feb 9, 2026

@its-me-abhishek pls check now , I have made a separate component in utils for common access as requested .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Hero Section - Dashboard frontend revamp

2 participants