diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 09e3670..e4b0d55 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -3,10 +3,22 @@ import { Inter, Montserrat } from "next/font/google"; import "../app/styles/base/_globales.scss"; // si tienes estilos globales // Carga optimizada de fuentes -const inter = Inter({ subsets: ["latin"], weight: ["400", "700"], variable: "--font-inter" }); -const montserrat = Montserrat({ subsets: ["latin"], weight: ["400", "700"], variable: "--font-montserrat" }); +const inter = Inter({ + subsets: ["latin"], + weight: ["400", "700"], + variable: "--font-inter", +}); +const montserrat = Montserrat({ + subsets: ["latin"], + weight: ["400", "700"], + variable: "--font-montserrat", +}); -export default function RootLayout({ children }: { children: React.ReactNode }) { +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { return ( diff --git a/src/app/page.tsx b/src/app/page.tsx index d1a5300..92aca92 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,41 +1,6 @@ -"use client"; +import Login from "@/components/Login"; +import "../app/styles/base/_globales.scss"; -import { useState } from "react"; -import { useRouter } from "next/navigation"; -import "../app/styles/base/_globales.scss" -import "../app/styles/layout/login.scss"; -export default function Login() { - const router = useRouter(); - const [email, setEmail] = useState(""); - const [password, setPassword] = useState(""); - const [error, setError] = useState(""); - - const mockUsers = [ - { email: "admin@escuela.com", password: "1234" }, - { email: "usuario@escuela.com", password: "abcd" }, - ]; - - const handleSubmit = (e: React.FormEvent) => { - e.preventDefault(); - const user = mockUsers.find(u => u.email === email && u.password === password); - - if (user) { - localStorage.setItem("loggedIn", "true"); - router.push("/dashboard"); - } else { - setError("Usuario o contraseña incorrectos"); - } - }; - - return ( -
-

Iniciar sesión

- {error &&

{error}

} -
- setEmail(e.target.value)} required /> - setPassword(e.target.value)} required /> - -
-
- ); -} \ No newline at end of file +export default function page() { + return ; +} diff --git a/src/app/styles/base/_globales.scss b/src/app/styles/base/_globales.scss index a6892d5..abacb2a 100644 --- a/src/app/styles/base/_globales.scss +++ b/src/app/styles/base/_globales.scss @@ -4,7 +4,7 @@ html { scroll-padding-top: 0rem; } -*, +*, *:before, *:after { margin: 0; @@ -13,10 +13,14 @@ html { } body { - font-family: 'Inter', sans-serif; + background-color: #f5f5f7; + font-family: "Inter", sans-serif; /* 👈 Fuente principal */ font-style: normal; font-size: 2rem; font-optical-sizing: auto; + min-height: 100dvh; + width: 100%; + max-width: 100vw; &.overflow-hidden { overflow: hidden; @@ -32,25 +36,23 @@ a { text-decoration: none; } -h1, h2, h3 { +h1, +h2, +h3 { margin: 0 0 5rem 0; font-weight: 900; - font-family: 'Montserrat', sans-serif; /* 👈 Títulos con Montserrat */ + font-family: "Montserrat", sans-serif; /* 👈 Títulos con Montserrat */ } h1 { - font-size: 4rem; + font-size: 2rem; } h2 { - font-size: 4.6rem; + font-size: 3rem; } h3 { - font-size: 6rem; + font-size: 4rem; text-align: center; } - -body > section { - padding: 10rem 0; -} diff --git a/src/app/styles/layout/BarNavigation.scss b/src/app/styles/layout/BarNavigation.scss index dd3dc50..9afbbb3 100644 --- a/src/app/styles/layout/BarNavigation.scss +++ b/src/app/styles/layout/BarNavigation.scss @@ -24,10 +24,6 @@ font-size: 1.5rem; } -.barNavigation li:hover { - background-color: #bd8c01; -} - .barNavigation ul.active { display: flex; width: 100%; @@ -109,11 +105,6 @@ font-size: 1.5rem; } -.subMenu:hover > span, -.subMenu > a:hover > span { - color: white; -} - .containerLinks { padding: 0 !important; border-radius: 0 0 4px 4px; diff --git a/src/app/styles/layout/header.module.scss b/src/app/styles/layout/header.module.scss index 2f2d107..2ae8617 100644 --- a/src/app/styles/layout/header.module.scss +++ b/src/app/styles/layout/header.module.scss @@ -1,6 +1,5 @@ .logo { position: relative; - filter: invert(1); z-index: 3; margin: 5px; } @@ -34,9 +33,10 @@ z-index: 0; } .header { + background-color: #fff; display: grid; grid-template-columns: auto 1fr; - padding: 0 40px; + padding: 0 10px; position: relative; z-index: 1; height: 90px; @@ -45,11 +45,11 @@ .header::after { content: ""; top: 0; - left: -40px; + left: -60px; position: absolute; background-color: #003e79; height: 100%; - min-width: 300px; + min-width: 400px; transform: skew(45deg); z-index: 2; } @@ -57,12 +57,12 @@ .header::before { content: ""; top: 0; - left: -20px; + left: -40px; position: absolute; background-color: rgb(1, 92, 184); height: 100%; width: 10%; - min-width: 300px; + min-width: 400px; transform: skew(45deg); z-index: 2; } diff --git a/src/app/styles/layout/login.scss b/src/app/styles/layout/login.scss index 70631b9..63fae1d 100644 --- a/src/app/styles/layout/login.scss +++ b/src/app/styles/layout/login.scss @@ -1,13 +1,20 @@ +.containerGrid { + display: grid; + grid-template-columns: 1fr 1fr; + min-height: 100%; + margin: 0 100px; +} + .login-container { - width: 300px; + width: 400px; margin: 100px auto; - padding: 30px; - border: 1px solid #ccc; - border-radius: 10px; - background: #f8f9fa; + padding: 1.5rem; text-align: center; - h2 { margin-bottom: 20px; color: #004aad; } + h2 { + margin-bottom: 20px; + color: #bd8c01; + } input { width: 100%; @@ -27,5 +34,8 @@ cursor: pointer; } - .error { color: red; margin-bottom: 10px; } + .error { + color: red; + margin-bottom: 10px; + } } diff --git a/src/components/BarNavigation.tsx b/src/components/BarNavigation.tsx index d87db01..7526030 100644 --- a/src/components/BarNavigation.tsx +++ b/src/components/BarNavigation.tsx @@ -23,76 +23,14 @@ function BarNavigation() { @@ -101,4 +39,4 @@ function BarNavigation() { } export default BarNavigation; -//IO \ No newline at end of file +//IO diff --git a/src/components/Login.tsx b/src/components/Login.tsx new file mode 100644 index 0000000..7fa8b92 --- /dev/null +++ b/src/components/Login.tsx @@ -0,0 +1,43 @@ +"use client"; + +import { useState } from "react"; + +import "../app/styles/layout/login.scss"; + +export default function Login() { + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [error, setError] = useState(""); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + }; + + return ( +
+
+

Iniciar sesión

+ {error &&

{error}

} +
+ + setEmail(e.target.value)} + required + /> + + setPassword(e.target.value)} + required + /> + +
+
+
+ ); +} diff --git a/src/components/header.tsx b/src/components/header.tsx index 8a54704..4ad2e9c 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -20,8 +20,8 @@ function Header() { className={header.logo} src="/logo-blanco.png" alt="Logo FES" - width={200} - height={50} + width={250} + height={60} />
@@ -43,4 +43,4 @@ function Header() { } export default Header; -//IO \ No newline at end of file +//IO