#514 done

[jeetvasoya21]

Related Issue

• Closes: ui/ux: missing transition entry animation on Login component container #514

---

Description

Implemented smooth entry animations for the Login page to match the existing Signup page transition behavior and improve authentication flow consistency.

Changes Made

Login.tsx

• Added framer-motion support:

  import { motion } from "framer-motion";

• Animated branding section using <motion.div>:

  • initial={{ opacity: 0, y: -20 }}
  • animate={{ opacity: 1, y: 0 }}
  • transition={{ duration: 0.6 }}

• Animated login form card using <motion.div>:

  • initial={{ opacity: 0, y: 30 }}
  • animate={{ opacity: 1, y: 0 }}
  • transition={{ duration: 0.6, delay: 0.2 }}

• Fixed unclickable navigation links by adding:

  pointer-events-none

  to the bottom gradient overlay div.

Signup.tsx

• Updated the "Sign in here" link styling for consistency with Login page:

  className="ml-1 text-purple-400 hover:text-purple-300 transition-colors duration-300"

• Fixed unclickable navigation links by adding:

  pointer-events-none

  to the bottom gradient overlay div.

Summary of Improvements

• Added smooth entry animations to Login page
• Matched Signup animation behavior for cohesive route transitions
• Improved visual continuity between authentication pages
• Fixed pointer-event blocking issue affecting navigation links
• Unified authentication link styling across Login and Signup pages

---

How Has This Been Tested?

Animation Transition Test

1. Started the application locally
2. Navigated to /login
3. Clicked "Sign up here" and observed smooth animated transition
4. Clicked "Sign in here" from Signup page
5. Verified Login page now animates smoothly instead of appearing abruptly

Link Interaction Test

• Confirmed all authentication navigation links are clickable
• Verified overlay no longer blocks pointer events

UI Consistency Test

• Confirmed matching animation timing and staggered effects
• Verified consistent link styling across both authentication pages

---

Screenshots (if applicable)

• Added screen recordings/screenshots demonstrating:

  • Smooth Login page entry animation
  • Consistent transitions between Login and Signup pages
  • Updated authentication link styling

Recording.2026-05-25.203147.mp4

---

Type of Change

• Bug fix
• New feature
• Code style update
• Breaking change
• Documentation update

[netlify]

✅ Deploy Preview for github-spy ready!

Name	Link
🔨 Latest commit	ac21d82
🔍 Latest deploy log	https://app.netlify.com/projects/github-spy/deploys/6a19c55f2e3f3e000739b2da
😎 Deploy Preview	https://deploy-preview-523--github-spy.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Warning

Review limit reached

@mehul-m-prajapati, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 35 minutes and 5 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 51ed09fc-d0c7-42ee-b6ed-4420813ae1c3

📥 Commits

Reviewing files that changed from the base of the PR and between ca71a6c and ac21d82.

📒 Files selected for processing (2)

• src/pages/Login/Login.tsx
• src/pages/Signup/Signup.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with 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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🎉🎉 Thank you for your contribution! Your PR #523 has been merged! 🎉🎉