added image

src/app/layout.tsx

@@ -5,7 +5,7 @@ import "../app/styles/base/_globales.scss"; // si tienes estilos globales
 // Carga optimizada de fuentes
 const inter = Inter({
   subsets: ["latin"],
-  weight: ["400", "700"],
+  weight: ["400", "500", "700"],
   variable: "--font-inter",
 });
 const montserrat = Montserrat({

src/app/styles/base/_globales.scss

@@ -40,7 +40,7 @@ h1,
 h2,
 h3 {
   margin: 0 0 5rem 0;
-  font-weight: 900;
+  font-weight: 600;
   font-family: "Montserrat", sans-serif; /* 👈 Títulos con Montserrat */
 }
 

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

@@ -25,13 +25,14 @@
   content: "";
   top: 0;
   left: -20px;
-  width: 65%;
+  width: 100%;
   height: 30px;
   min-width: 300px;
-  background: #bd8c01;
+  background: linear-gradient(to right, #bd8c01 40%, #fff 100%);
   transform: skew(-45deg);
   z-index: 0;
 }
+
 .header {
   background-color: #fff;
   display: grid;

src/app/styles/layout/login.scss

@@ -6,7 +6,7 @@
 }
 
 .login-container {
-  width: 400px;
+  width: 300px;
   margin: 100px auto;
   padding: 1.5rem;
   text-align: center;
@@ -39,3 +39,7 @@
     margin-bottom: 10px;
   }
 }
+
+.imageContainer {
+  border-radius: 20px;
+}

src/components/Login.tsx

@@ -4,6 +4,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";
 
 export default function Login() {
   const [email, setEmail] = useState("");
@@ -40,9 +41,17 @@ export default function Login() {
               required
             />
           </div>
-          <button type="submit">Ingresar</button>
+          <button type="submit">Iniciar sesión</button>
         </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>
     </section>
   );
 }

src/components/header.tsx

@@ -21,7 +21,7 @@ function Header() {
           src="/logo-blanco.png"
           alt="Logo FES"
           width={250}
-          height={60}
+          height={70}
         />
       </Link>
       <div className={header.yellowPart}></div>