diff --git a/src/app/styles/base/_globales.scss b/src/app/styles/base/_globales.scss index c07d2b5..235e55f 100644 --- a/src/app/styles/base/_globales.scss +++ b/src/app/styles/base/_globales.scss @@ -14,15 +14,15 @@ html { } body { + display: grid; + grid-template-rows: auto 1fr; background-color: #f5f5f7; - font-family: "Inter", sans-serif; /* 👈 Fuente principal */ + font-family: "Inter", sans-serif; font-style: normal; font-size: 2rem; font-optical-sizing: auto; min-height: 100dvh; width: 100vw; - - } p { @@ -31,7 +31,10 @@ p { } a { + color: #003e79; + display: block; text-decoration: none; + margin: 10px 5px; } h1, @@ -60,3 +63,7 @@ label { text-align: start; width: 100%; } + +img { + object-fit: cover; +} diff --git a/src/app/styles/layout/login.scss b/src/app/styles/layout/login.scss index fa561df..5f93fc3 100644 --- a/src/app/styles/layout/login.scss +++ b/src/app/styles/layout/login.scss @@ -1,13 +1,15 @@ .containerGrid { - display: grid; + display: flex; grid-template-columns: 1fr 1fr; min-height: 100%; margin: 0 100px; + justify-content: center; + align-items: center; + gap: 150px; } .login-container { - width: 300px; - margin: 100px auto; + width: 350px; padding: 1.5rem; text-align: center; @@ -41,5 +43,11 @@ } .imageContainer { - border-radius: 20px; + display: flex; + flex-wrap: wrap; + max-width: 500px; + max-height: 450px; + border-radius: 10px; + overflow: hidden; + height: min-content; } diff --git a/src/components/Login.tsx b/src/components/Login.tsx index 5c7f35b..f19cb71 100644 --- a/src/components/Login.tsx +++ b/src/components/Login.tsx @@ -5,6 +5,7 @@ import { useState } from "react"; import "../app/styles/layout/login.scss"; import "../app/styles/base/_globales.scss"; // si tienes estilos globales import Image from "next/image"; +import Link from "next/link"; export default function Login() { const [email, setEmail] = useState(""); @@ -42,6 +43,8 @@ export default function Login() { /> + Olvidaste Contraseña? + Crear Cuenta