blinky parrot

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;