ui/ux: missing transition entry animation on Login component container

[atharv96k]

Description

There is a visual animation discrepancy when navigating between the authentication routes. While the SignUp component utilizes a smooth framer-motion initialization slide-and-fade animation wrapper (initial={{ opacity: 0, y: 30 }}) when entering the view, the Login component lacks any entry animation configurations. This causes the interface to transition abruptly when navigating backwards from signup to login, disrupting user experience continuity.

Steps to Reproduce

1. Start the application locally and navigate to the /login route.
2. Click the link at the bottom: "Sign up here". Observe the fluid animation as the signup card populates.
3. On the signup screen, click the link at the bottom: "Sign in here".
4. Observe the abrupt, static route shift back onto the Login layout without any animation effects.

Expected vs. Actual Behavior

• Expected: Both authentication components should leverage matching transition wrappers so that flipping between them feels cohesive, smooth, and intentional.
• Actual: The Signup card animates dynamically, whereas the Login card mounts instantly with zero visual cushioning.

Technical Analysis & Suggested Fix

The root cause is that the parent card wrapper container in src/pages/Login/Login.tsx is structured as a standard HTML layout div, while src/pages/Signup/Signup.tsx successfully wraps its card content inside a <motion.div> component.

Visual Proof

Below is a screen recording demonstrating the abrupt transition when moving back to the Login route, compared to the smooth entry animation on the Signup route:

Github.Tracker.-.Google.Chrome.2026-05-25.17-53-41.mp4