feat: Login Style

src/pages/login/Login.module.css

@@ -19,6 +19,11 @@
     /* background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%); */
 }
 
+.loginForm {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+}
 .formWrapper {
     width: 100%;
     max-width: 400px;
@@ -29,6 +34,17 @@
     backdrop-filter: blur(10px);
 }
 
+.formWrapperTitle {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+}
+
+.loginAvatar {
+    width: 150px;
+}
+
 .container h1 {
     color: ;
     text-align: center;
@@ -71,11 +87,3 @@
     font-weight: 600;
     color: #555;
 }
-
-.container img {
-    width: 100%;
-    height: 150px;
-    object-fit: cover;
-    border-radius: 8px;
-    margin-bottom: 20px;
-}

src/pages/login/Login.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import styles from './Login.module.css'
+import Avatar from "../../assets/Avatar.svg"
 
 
 const Login = () => {
@@ -24,15 +25,21 @@ const Login = () => {
   return (
     <div className={styles.container}>
       <div className={styles.formWrapper}>
-        <form onSubmit={handleSubmit}>
+        <form  className={styles.loginForm}  onSubmit={handleSubmit}>
+          <div className={styles.formWrapperTitle}>
             <h1>Inicia Sesión.</h1>
-          <img src="https://picsum.photos/300/200?random=1" alt="Imagen"/>
+            <img className={styles.loginAvatar} src={Avatar} alt="Imagen"/>
+          </div>
 
+          <div>
             <label>Usuario:</label>
             <input type="text" value={user} onChange={handleUserChange}/>
+          </div>
 
+          <div>
             <label>Contraseña</label>
             <input type="password" value={password} onChange={handlePasswordChange}/>
+          </div>
 
           <input type="submit" value="Iniciar sesión"/>
         </form>