From 5a208998082e728583f312cad5452771ff5f1cc1 Mon Sep 17 00:00:00 2001
From: mudabbir-ahmad <mudabbira.uk@gmail.com>
Date: Thu, 20 Mar 2025 19:56:22 +0000
Subject: [PATCH] blinky parrot

---
 app/(auth)/login/page.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/app/(auth)/login/page.js b/app/(auth)/login/page.js
index befbb54..d85f0e3 100644
--- a/app/(auth)/login/page.js
+++ b/app/(auth)/login/page.js
@@ -9,6 +9,7 @@ export default function Login() {
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const [isPasswordHovered, setIsPasswordHovered] = useState(false); // Add state for hover
 
   const router = useRouter();
   const { data: session, status } = useSession();
@@ -61,8 +62,10 @@ export default function Login() {
 
   return (
     <div className="auth-page">
-      {/* Decorative square */}
-      <div className="decorative-square"></div>
+      {/* Decorative square with conditional background based on password hover */}
+      <div
+        className={`decorative-square ${isPasswordHovered ? "hovered" : ""}`}
+      ></div>
 
       <div className="auth-container">
         <div className="auth-card">
@@ -84,6 +87,8 @@ export default function Login() {
                 placeholder="Password"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
+                onMouseEnter={() => setIsPasswordHovered(true)}
+                onMouseLeave={() => setIsPasswordHovered(false)}
                 required
                 className="auth-input"
               />
@@ -103,7 +108,7 @@ export default function Login() {
         </div>
       </div>
 
-      {/* Update styles to reduce gap */}
+      {/* Update styles with hover effect */}
       <style jsx>{`
         .auth-card {
           background-color: #fff;
@@ -159,6 +164,9 @@ export default function Login() {
           border-radius: 4px;
           z-index: 2;
         }
+        .decorative-square.hovered {
+          background-image: url("/images/parrot-hover.svg");
+        }
         .auth-page {
           display: flex;
           flex-direction: column;