Ajustes a las imgenes de login
This commit is contained in:
+35
-18
@@ -1,9 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
import "../app/styles/layout/login.scss";
|
||||
import "../app/styles/base/globales.scss";
|
||||
import "../app/styles/base/globales.scss";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
@@ -14,47 +13,65 @@ export default function Login() {
|
||||
|
||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
// Autenticacion simulada
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="containerGrid">
|
||||
<div className="login-container">
|
||||
<section className="login-page">
|
||||
<div className="login-form-container">
|
||||
<h2>Inicio sesión</h2>
|
||||
{error && <p className="error">{error}</p>}
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<div className="input-group">
|
||||
<label>Usuario</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Correo"
|
||||
placeholder="Ingresa tu usuario"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="input-group">
|
||||
<label>Contraseña</label>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Contraseña"
|
||||
placeholder="Ingresa tu usuario"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button type="submit">Iniciar sesión</button>
|
||||
<Link href={"#"}>Olvidaste Contraseña?</Link>
|
||||
<Link href={"#"}>Crear Cuenta</Link>
|
||||
<Link href="#" className="forgot-password">
|
||||
Olvidaste Contraseña?
|
||||
</Link>
|
||||
<Link href="#" className="create-account">
|
||||
Crear Cuenta
|
||||
</Link>
|
||||
</form>
|
||||
</div>
|
||||
<div className="imageContainer">
|
||||
<Image src="/Piedra.jpg" alt="Logo FES" width={250} height={150} />
|
||||
<Image src="/image 1.png" alt="Logo FES" width={250} height={150} />
|
||||
<Image src="/estrella.jpg" alt="Logo FES" width={250} height={150} />
|
||||
<Image src="/sorjuana.jpg" alt="Logo FES" width={250} height={150} />
|
||||
<Image src="/fes.jpg" alt="Logo FES" width={250} height={150} />
|
||||
<Image src="/picachu.jpg" alt="Logo FES" width={250} height={150} />
|
||||
|
||||
<div className="image-collage">
|
||||
<div className="collage-item collage-1">
|
||||
<Image src="/Piedra.jpg" alt="UNAM Icatlán" fill style={{ objectFit: 'cover' }} />
|
||||
</div>
|
||||
<div className="collage-item collage-2">
|
||||
<Image src="/image 1.png" alt="UNAM Icatlán" fill style={{ objectFit: 'cover' }} />
|
||||
</div>
|
||||
<div className="collage-item collage-3">
|
||||
<Image src="/estrella.jpg" alt="UNAM Icatlán" fill style={{ objectFit: 'cover' }} />
|
||||
</div>
|
||||
<div className="collage-item collage-4">
|
||||
<Image src="/sorjuana.jpg" alt="UNAM Icatlán" fill style={{ objectFit: 'cover' }} />
|
||||
</div>
|
||||
<div className="collage-item collage-5">
|
||||
<Image src="/fes.jpg" alt="UNAM Icatlán" fill style={{ objectFit: 'cover' }} />
|
||||
</div>
|
||||
<div className="collage-item collage-6">
|
||||
<Image src="/picachu.jpg" alt="UNAM Icatlán" fill style={{ objectFit: 'cover' }} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user