create new component call login

src/app/page.tsx

@@ -1,40 +1,5 @@
-"use client"; // <-- OBLIGATORIO
+import Login from "@/components/Login";
 
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-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<HTMLFormElement>) => {
-    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 (
-    <div className="login-container">
-      <h2>Iniciar sesión</h2>
-      {error && <p className="error">{error}</p>}
-      <form onSubmit={handleSubmit}>
-        <input type="email" placeholder="Correo" value={email} onChange={(e) => setEmail(e.target.value)} required />
-        <input type="password" placeholder="Contraseña" value={password} onChange={(e) => setPassword(e.target.value)} required />
-        <button type="submit">Ingresar</button>
-      </form>
-    </div>
-  );
-}
+export default function page() {
+  return <Login />;
+}

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;

src/app/styles/layout/header.module.scss

@@ -45,7 +45,7 @@
 .header::after {
   content: "";
   top: 0;
-  left: -40px;
+  left: -60px;
   position: absolute;
   background-color: #003e79;
   height: 100%;
@@ -57,7 +57,7 @@
 .header::before {
   content: "";
   top: 0;
-  left: -20px;
+  left: -40px;
   position: absolute;
   background-color: rgb(1, 92, 184);
   height: 100%;

src/app/styles/layout/login.scss

@@ -1,7 +1,7 @@
 .login-container {
   width: 300px;
   margin: 100px auto;
-  padding: 30px;
+  padding: 2rem;
   border: 1px solid #ccc;
   border-radius: 10px;
   background: #f8f9fa;