From fafe9980946e01f3cdf240dc7304fa17dca66655 Mon Sep 17 00:00:00 2001
From: Jeet Vasoya <jeetvasoya007@gmail.com>
Date: Mon, 25 May 2026 20:27:04 +0530
Subject: [PATCH] #514 done

---
 src/pages/Login/Login.tsx   | 21 ++++++++++++++++-----
 src/pages/Signup/Signup.tsx |  9 ++++++---
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
index 92b7073e..38845b35 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -1,6 +1,7 @@
 import React, { useState, ChangeEvent, FormEvent, useContext } from "react";
 import axios from "axios";
 import { useNavigate, Link } from "react-router-dom";
+import { motion } from "framer-motion";
 import { ThemeContext } from "../../context/ThemeContext";
 import type { ThemeContextType } from "../../context/ThemeContext";
 
@@ -65,7 +66,12 @@ const Login: React.FC = () => {
 
       <div className="relative w-full max-w-md px-4 sm:px-6">
         {/* Branding */}
-        <div className="text-center mb-10">
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="text-center mb-10"
+        >
           <div className="inline-flex items-center justify-center w-20 h-20 bg-white rounded-3xl mb-6 shadow-2xl transform hover:scale-105 transition-transform duration-300 overflow-hidden">
             <img src="/crl-icon.png" alt="Logo" className="w-14 h-14 object-contain" />
           </div>
@@ -80,10 +86,15 @@ const Login: React.FC = () => {
           <p className={`${mode === "dark" ? "text-slate-300" : "text-gray-700"} text-lg font-medium`}>
             Track your GitHub journey
           </p>
-        </div>
+        </motion.div>
 
         {/* Form Card */}
-        <div className={`rounded-3xl p-6 sm:p-10 shadow-2xl border ${mode === "dark" ? "bg-white/10 backdrop-blur-xl border-white/20 text-white" : "bg-white border-gray-200 text-black"}`}>
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.2 }}
+          className={`rounded-3xl p-6 sm:p-10 shadow-2xl border ${mode === "dark" ? "bg-white/10 backdrop-blur-xl border-white/20 text-white" : "bg-white border-gray-200 text-black"}`}
+        >
           <h2 className={`text-2xl font-bold text-center mb-8 ${mode === "dark" ? "text-white" : "text-gray-800"}`}>
             Welcome Back
           </h2>
@@ -155,10 +166,10 @@ const Login: React.FC = () => {
               </Link>
             </p>
           </div>
-        </div>
+        </motion.div>
       </div>
 
-      <div className={`${mode === "dark" ? "from-slate-900" : "from-slate-100"} absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t to-transparent`} />
+      <div className={`${mode === "dark" ? "from-slate-900" : "from-slate-100"} absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t to-transparent pointer-events-none`} />
     </div>
   );
 };
diff --git a/src/pages/Signup/Signup.tsx b/src/pages/Signup/Signup.tsx
index 2ac51dcc..6f00ae82 100644
--- a/src/pages/Signup/Signup.tsx
+++ b/src/pages/Signup/Signup.tsx
@@ -221,8 +221,11 @@ const SignUp: React.FC = () => {
 
           <div className="text-center mt-8">
             <p className={mode === "dark" ? "text-gray-300" : "text-gray-600"}>
-              Already have an account?{" "}
-              <Link to="/login" className={`font-medium hover:underline transition-colors duration-300 ${mode === "dark" ? "text-white" : "text-black"}`}>
+              Already have an account?
+              <Link
+                to="/login"
+                className="ml-1 text-purple-400 hover:text-purple-300 transition-colors duration-300"
+              >
                 Sign in here
               </Link>
             </p>
@@ -233,7 +236,7 @@ const SignUp: React.FC = () => {
       <div
         className={`${
           mode === "dark" ? "from-slate-900" : "from-slate-100"
-        } absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t to-transparent`}
+        } absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t to-transparent pointer-events-none`}
       />
     </div>
   );