From b46c0bd994951be8e203be34b6d81b342183ebca Mon Sep 17 00:00:00 2001
From: MartinCaballero812 <caballeromarting08@gmail.com>
Date: Sat, 19 Aug 2023 19:39:10 -0300
Subject: [PATCH 1/6] Register and Login Design

---
 client/src/components/Footer.js      |  14 +-
 client/src/components/Nav.js         |   2 +-
 client/src/pages/Correlatives.js     |   2 +-
 client/src/pages/Home.js             |   6 +-
 client/src/pages/Load_Datas.js       | 274 ++++++++++++++---
 client/src/pages/Login.js            |  54 ++--
 client/src/pages/Profile.js          |   2 +-
 client/src/pages/Registration.js     |  54 ++--
 client/src/pages/index.js            |   2 +-
 client/src/styles/Home.module.css    | 272 -----------------
 client/src/styles/general.module.css | 433 +++++++++++++++++++++++++++
 11 files changed, 747 insertions(+), 368 deletions(-)
 delete mode 100644 client/src/styles/Home.module.css
 create mode 100644 client/src/styles/general.module.css

diff --git a/client/src/components/Footer.js b/client/src/components/Footer.js
index 37c64f8..3a752b7 100644
--- a/client/src/components/Footer.js
+++ b/client/src/components/Footer.js
@@ -1,7 +1,7 @@
 
 import React from "react";
 
-import styles from "@/styles/Home.module.css";
+import styles from "@/styles/general.module.css";
 
 
 
@@ -10,13 +10,13 @@ function Footer() {
 
     return (
       <div className={styles.footer}>
-        <div className={styles.textfooter}>
-        
-         CONTACTO:
-            <br />
-           caballeromarting08@gmail.com 1.0.0 (VERSIÓN WEB)
-      
+        <div className={styles.text_footer}>
+
+          CONTACTO:
+          caballeromarting08@gmail.com
+          <br />
         </div>
+        <h2222 className={styles.text_footer_version}> 1.0.0 (VERSIÓN WEB)</h2222>
       </div>
     );
 
diff --git a/client/src/components/Nav.js b/client/src/components/Nav.js
index 81b742b..0ab4baf 100644
--- a/client/src/components/Nav.js
+++ b/client/src/components/Nav.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { Inter, Staatliches } from "next/font/google";
 import Link from "next/link";
-import styles from "@/styles/Home.module.css";
+import styles from "@/styles/general.module.css";
 
 
 function NavWeb() {
diff --git a/client/src/pages/Correlatives.js b/client/src/pages/Correlatives.js
index e5ff7b2..bc7c398 100644
--- a/client/src/pages/Correlatives.js
+++ b/client/src/pages/Correlatives.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import Nav from "@/components/Nav";
 import Footer from "@/components/Footer";
-import styles from "@/styles/Home.module.css";
+import styles from "@/styles/general.module.css";
 import Head from "next/head";
 import { useRouter } from "next/router";
 
diff --git a/client/src/pages/Home.js b/client/src/pages/Home.js
index 149cc1b..015f80f 100644
--- a/client/src/pages/Home.js
+++ b/client/src/pages/Home.js
@@ -1,12 +1,11 @@
 import React, { useState } from "react";
 import Nav from "@/components/Nav";
 import Footer from "@/components/Footer";
-
+import styles from "@/styles/general.module.css";
 import Head from "next/head";
 import axios from "axios";
 import { useRouter } from "next/router";
 
-import styles from "@/styles/Home.module.css";
 
 export default function Home() {
   const [email, setEmail] = useState("");
@@ -40,9 +39,8 @@ export default function Home() {
       <Nav />
       {/*--------NAV----------- */}
       {/*--------BODY----------- */}
-      <div className={styles.text}>
+      <div className={styles.text_title_home}>
         <h1> Bienvenido </h1>
-       
       </div>
       {/*--------BODY----------- */}
       {/*--------FOOTER---------- */}
diff --git a/client/src/pages/Load_Datas.js b/client/src/pages/Load_Datas.js
index fb38846..b6690fe 100644
--- a/client/src/pages/Load_Datas.js
+++ b/client/src/pages/Load_Datas.js
@@ -2,16 +2,151 @@ import React, { useState } from "react";
 import Link from "next/link";
 import Footer from "@/components/Footer";
 import Nav from "@/components/Nav";
-import styles from "@/styles/Home.module.css";
+import styles from "@/styles/general.module.css";
 import Head from "next/head";
 
+
 function Load_Dates() {
+  const [color_1year_buttom, setcolor_1year_buttom] = useState("#1f77cc");
+  const [color_1year_text, setcolor_1year_text] = useState("white");
+  const [color_2year_buttom, setcolor_2year_buttom] = useState("#1f77cc");
+  const [color_2ear_text, setcolor_2year_text] = useState("white");
+  const [color_3year_buttom, setcolor_3year_buttom] = useState("#1f77cc");
+  const [color_3year_text, setcolor_3year_text] = useState("white");
+  const [color_4year_buttom, setcolor_4year_buttom] = useState("#1f77cc");
+  const [color_4year_text, setcolor_4year_text] = useState("white");
+  const [color_5year_buttom, setcolor_5year_buttom] = useState("#1f77cc");
+  const [color_5ear_text, setcolor_5year_text] = useState("white");
   const [show, setShow] = useState();
   const [show2, setShow2] = useState(false);
   const [show3, setShow3] = useState(false);
   const [show4, setShow4] = useState(false);
   const [show5, setShow5] = useState(false);
-
+  
+   const handleButtonClick = () => {
+     setShow(!show);
+
+     if (!show) {
+       setcolor_1year_buttom("white"); // Cambiar el color a blanco
+     setcolor_1year_text("#1f77cc"); // Cambiar el color a celeste
+     } else {
+    setcolor_1year_buttom("#1f77cc"); // Cambiar el color a celeste
+      setcolor_1year_text("white"); // Cambiar el color a blanco
+     }
+   };
+
+
+  
+    const handleButton2Click = () => {
+      setShow2(!show2);
+          if (!show2) {
+       setcolor_2year_buttom("white"); // Cambiar el color a blanco
+     setcolor_2year_text("#1f77cc"); // Cambiar el color a celeste
+     } else {
+    setcolor_2year_buttom("#1f77cc"); // Cambiar el color a celeste
+      setcolor_2year_text("white"); // Cambiar el color a blanco
+     }
+   };
+  
+    const handleButton3Click = () => {
+      setShow3(!show3);
+      if (!show3) {
+        setcolor_3year_buttom("white"); // Cambiar el color a blanco
+        setcolor_3year_text("#1f77cc"); // Cambiar el color a celeste
+      } else {
+        setcolor_3year_buttom("#1f77cc"); // Cambiar el color a celeste
+        setcolor_3year_text("white"); // Cambiar el color a blanco
+      }
+    };
+  
+    
+    const handleButton4Click = () => {
+      setShow4(!show4);
+      if (!show4) {
+        setcolor_4year_buttom("white"); // Cambiar el color a blanco
+        setcolor_4year_text("#1f77cc"); // Cambiar el color a celeste
+      } else {
+        setcolor_4year_buttom("#1f77cc"); // Cambiar el color a celeste
+        setcolor_4year_text("white"); // Cambiar el color a blanco
+      }
+    };
+  
+      const handleButton5Click = () => {
+        setShow5(!show5);
+        if (!show5) {
+          setcolor_5year_buttom("white"); // Cambiar el color a blanco
+          setcolor_5year_text("#1f77cc"); // Cambiar el color a celeste
+        } else {
+          setcolor_5year_buttom("#1f77cc"); // Cambiar el color a celeste
+          setcolor_5year_text("white"); // Cambiar el color a blanco
+        }
+      };
+  
+
+
+ 
+  
+     const buttonStyles = {
+       padding: "15px",
+       color: show || show ? color_1year_text : "white", // Cambia el color del texto según show
+       borderRadius: "100px",
+       backgroundColor: show || show ? color_1year_buttom : "#1f77cc", // Cambia el valor según show
+       bottom: "20px",
+       marginRight: "50px",
+       marginLeft: "50px",
+       cursor: "pointer",
+       transition: "color 0.7s, background-color 0.7s",
+     };
+     const buttonStyles2 = {
+       padding: "15px",
+       color: show2 ? color_2ear_text : "white", // Cambia el color del texto según show
+       borderRadius: "100px",
+       backgroundColor: show2 ? color_2year_buttom : "#1f77cc", // Cambia el valor según show
+       bottom: "20px",
+       marginRight: "50px",
+       marginLeft: "50px",
+       cursor: "pointer",
+       transition: "color 0.7s, background-color 0.7s",
+     };
+   const buttonStyles3 = {
+     padding: "15px",
+     color: show3 ? color_3year_text : "white", // Cambia el color del texto según show
+     borderRadius: "100px",
+     backgroundColor: show3 ? color_3year_buttom : "#1f77cc", // Cambia el valor según show
+     bottom: "20px",
+     marginRight: "50px",
+     marginLeft: "50px",
+     cursor: "pointer",
+     transition: "color 0.7s, background-color 0.7s",
+   };
+   const buttonStyles4 = {
+     padding: "15px",
+     color:  show4 ? color_4year_text : "white", // Cambia el color del texto según show
+     borderRadius: "100px",
+     backgroundColor: show4 || show2 ? color_4year_buttom : "#1f77cc", // Cambia el valor según show
+     bottom: "20px",
+     marginRight: "50px",
+     marginLeft: "50px",
+     cursor: "pointer",
+     transition: "color 0.7s, background-color 0.7s",
+   };
+
+     const buttonStyles5 = {
+       padding: "15px",
+       color: show5 ? color_5ear_text : "white", // Cambia el color del texto según show
+       borderRadius: "100px",
+       backgroundColor: show5 || show2 ? color_5year_buttom : "#1f77cc", // Cambia el valor según show
+       bottom: "20px",
+       marginRight: "50px",
+       marginLeft: "50px",
+       cursor: "pointer",
+       transition: "color 0.7s, background-color 0.7s",
+     };
+
+  
+  
+  
+  
   const firstYear = {
     firstSemester: [
       {
@@ -55,7 +190,7 @@ const secondYear = {
   firstSemester: [
     {
       key: 9,
-      name: "Analisis Matemático II",
+      name : "Analisis Matemático II",
     },
     {
       key: 10,
@@ -100,7 +235,12 @@ const secondYear = {
     }
   }
 
+
   const SUBJECT_STATUS = [
+    {
+      key: "notInprogress",
+      label: "No cursada",
+    },
     {
       key: "approved",
       label: "Aprobado",
@@ -113,10 +253,6 @@ const secondYear = {
       key: "inprogress",
       label: "Cursando",
     },
-    {
-      key: "notInprogress",
-      label: "No cursada",
-    },
 
     {
       key: "free",
@@ -133,12 +269,16 @@ const secondYear = {
       );
     }
     return (
-      <select id={`${subject.id}`} name={`${subject.id}`}>
-        {options}
-      </select>
+
+        <select id={`${subject.id}`} name={`${subject.id}`}>
+          {options}
+        </select>
+
     );
   }
 
+
+
   const Semester = ({ semester }) => {
     const result = [];
     for (const subject of semester) {
@@ -146,7 +286,7 @@ const secondYear = {
 
       const subjectHTML = (
         <fieldset>
-          <h4> {subject.name} </h4>
+          <h4 className={styles.text_subject_load_dates}> {subject.name} </h4>
           {subjectStatus}
         </fieldset>
       );
@@ -172,19 +312,19 @@ const secondYear = {
         <br />
         <br />
         <br />
-        <button className={styles.text} onClick={() => setShow(!show)}>
-          Primer Año
+        <button onClick={handleButtonClick} style={buttonStyles}>
+          Primer año
         </button>
-        <button className={styles.text} onClick={() => setShow2(!show2)}>
+        <button onClick={handleButton2Click} style={buttonStyles2}>
           Segundo Año
         </button>
-        <button className={styles.text} onClick={() => setShow3(!show3)}>
+        <button onClick={handleButton3Click} style={buttonStyles3}>
           Tercer Año
         </button>
-        <button className={styles.text} onClick={() => setShow4(!show4)}>
+        <button onClick={handleButton4Click} style={buttonStyles4}>
           Cuarto Año
         </button>
-        <button className={styles.text} onClick={() => setShow5(!show5)}>
+        <button onClick={handleButton5Click} style={buttonStyles5}>
           Quinto Año
         </button>
       </div>
@@ -195,24 +335,26 @@ const secondYear = {
         {show ? (
           <form>
             <div>
-              <div>
-                <br />
+              <div className={styles.text_title_load_datas}>
                 <h3 align="center"> PRIMER AÑO</h3>
               </div>
-              <div>
+              <div className={styles.text_sub_title_load_datas}>
                 <h3> Primer Cuatrimestre </h3>
                 <br />
               </div>
               <Semester semester={firstYear.firstSemester} />
               <div>
                 <br />
-                <h3> Segundo Cuatrimestre </h3>
+                <h3 className={styles.text_sub_title_load_datas}>
+                  {" "}
+                  Segundo Cuatrimestre
+                </h3>
                 <br />
               </div>
             </div>
             <Semester semester={firstYear.secondSemester} />
             <br />
-            <button className={styles.text} type="sumit">
+            <button className={styles.button_sumit_form} type="sumit">
               ENVIAR
             </button>
           </form>
@@ -223,10 +365,16 @@ const secondYear = {
           <form>
             <div>
               <br />
-              <h3 align="center"> SEGUNDO AÑO</h3>
+              <h3 align="center" className={styles.text_title_load_datas}>
+                {" "}
+                SEGUNDO AÑO
+              </h3>
               <br />
               <div>
-                <h3> Primer Cuatrimestre </h3>
+                <h3 className={styles.text_sub_title_load_datas}>
+                  {" "}
+                  Primer Cuatrimestre{" "}
+                </h3>
                 <br />
               </div>
               <br />
@@ -234,12 +382,15 @@ const secondYear = {
 
               <div>
                 <br />
-                <h3> Segundo Cuatrimestre </h3>
+                <h3 className={styles.text_sub_title_load_datas}>
+                  {" "}
+                  Segundo Cuatrimestre{" "}
+                </h3>
                 <br />
               </div>
               <div>
                 <br />
-                <h3> Anual </h3>
+                <h3 className={styles.text_sub_title_load_datas}> Anual </h3>
                 <br />
               </div>
               <div>
@@ -251,7 +402,7 @@ const secondYear = {
               </div>
             </div>
             <br />
-            <button className={styles.text2} type="sumit">
+            <button className={styles.button_sumit_form} type="sumit">
               ENVIAR
             </button>
           </form>
@@ -262,9 +413,15 @@ const secondYear = {
           <form>
             <div>
               <br />
-              <h3 align="center"> TERCER AÑO </h3>
+              <h3 align="center" className={styles.text_title_load_datas}>
+                {" "}
+                TERCER AÑO{" "}
+              </h3>
               <br />
-              <h3> Primer Cuatrimestre </h3>
+              <h3 className={styles.text_sub_title_load_datas}>
+                {" "}
+                Primer Cuatrimestre{" "}
+              </h3>
               <br />
               <div>{/*--------Probability and statistics---------- */}</div>
               <fieldset>
@@ -452,7 +609,10 @@ const secondYear = {
               </fieldset>
               <br />
               <div>{/*--------Data Communication---------- */}</div>
-              <h3> Segundo Cuatrimestre </h3>
+              <h3 className={styles.text_sub_title_load_datas}>
+                {" "}
+                Segundo Cuatrimestre{" "}
+              </h3>
               <br />
               <div>{/*--------Software development---------- */}</div>
               <fieldset>
@@ -548,7 +708,7 @@ const secondYear = {
               </fieldset>
               <div>{/*--------Numerical analysis---------- */}</div>
               <br />
-              <h3> Anual </h3>
+              <h3 className={styles.text_sub_title_load_datas}> Anual </h3>
               <br />
               <div>{/*--------Design of information systems---------- */}</div>
               <fieldset>
@@ -598,7 +758,7 @@ const secondYear = {
               <br />
               <div>{/*--------Design of information systems---------- */}</div>
             </div>
-            <button className={styles.text2} type="sumit">
+            <button className={styles.button_sumit_form} type="sumit">
               ENVIAR
             </button>
           </form>
@@ -609,11 +769,17 @@ const secondYear = {
           <form>
             <div>
               <br />
-              <h3 align="center"> CUARTO AÑO</h3>
+              <h3 align="center" className={styles.text_title_load_datas}>
+                {" "}
+                CUARTO AÑO
+              </h3>
               <br />
               <div>
                 <br />
-                <h3> Primer Cuatrimestre </h3>
+                <h3 className={styles.text_sub_title_load_datas}>
+                  {" "}
+                  Primer Cuatrimestre{" "}
+                </h3>
                 <br />
               </div>
               <div>{/*--------Legislation---------- */}</div>
@@ -756,7 +922,10 @@ const secondYear = {
               <div>{/*--------Simulation---------- */}</div>
               <div>
                 <br />
-                <h3> Segundo Cuatrimestre </h3>
+                <h3 className={styles.text_sub_title_load_datas}>
+                  {" "}
+                  Segundo Cuatrimestre{" "}
+                </h3>
                 <br />
               </div>
               <div>{/*-------- Data network---------- */}</div>
@@ -854,7 +1023,7 @@ const secondYear = {
               <div>
                 <div>
                   <br />
-                  <h3> Anual </h3>
+                  <h3 className={styles.text_sub_title_load_datas}> Anual </h3>
                   <br />
                 </div>
                 <div>
@@ -952,8 +1121,8 @@ const secondYear = {
                 </div>
               </div>
             </div>
-            <button className={styles.text2} type="sumit">
-              <br />
+            <br />
+            <button className={styles.button_sumit_form} type="sumit">
               ENVIAR
             </button>
           </form>
@@ -964,11 +1133,17 @@ const secondYear = {
           <form>
             <div>
               <br />
-              <h3 align="center"> QUINTO AÑO</h3>
+              <h3 align="center" className={styles.text_title_load_datas}>
+                {" "}
+                QUINTO AÑO
+              </h3>
               <br />
               <div>
                 <br />
-                <h3> Primer Cuatrimestre </h3>
+                <h3 className={styles.text_sub_title_load_datas}>
+                  {" "}
+                  Primer Cuatrimestre{" "}
+                </h3>
                 <br />
               </div>
               <div>
@@ -1114,7 +1289,10 @@ const secondYear = {
               <div>
                 <div>
                   <br />
-                  <h3> Segundo Cuatrimestre </h3>
+                  <h3 className={styles.text_sub_title_load_datas}>
+                    {" "}
+                    Segundo Cuatrimestre{" "}
+                  </h3>
                   <br />
                 </div>
                 {/*--------Data Science---------- */}
@@ -1213,7 +1391,7 @@ const secondYear = {
               <div>
                 <div>
                   <br />
-                  <h3> Anual </h3>
+                  <h3 className={styles.text_sub_title_load_datas}> Anual </h3>
                   <br />
                 </div>
                 {/*--------Final project--------- */}
@@ -1264,17 +1442,25 @@ const secondYear = {
               </div>
             </div>
             <br />
-            <button className={styles.text2} type="sumit">
+            <button className={styles.button_sumit_form} type="sumit">
               ENVIAR
             </button>
           </form>
         ) : null}
         <div>{/*--------FIFRTH YEAR---------- */}</div>
       </div>
+      <br />
+      <br />
+
+      <br />
+      <br />
       <div>{/*--------YEARS----------- */}</div>
 
-      <div className={styles.style5}>
+      <div>
         {/*--------FOOTER---------- */}
+        <br />
+        <br />
+
         <Footer />
         {/*--------FOOTER----------- */}
       </div>
diff --git a/client/src/pages/Login.js b/client/src/pages/Login.js
index 5b29392..b21ffe4 100644
--- a/client/src/pages/Login.js
+++ b/client/src/pages/Login.js
@@ -3,7 +3,9 @@ import axios from "axios";
 import { useRouter } from "next/router";
 import Home from "./Home";
 import Link from "next/link";
+import Head from "next/head";
 import Profile from "./Profile";
+import styles from "@/styles/general.module.css";
 
 import * as yup from "yup";
 
@@ -35,25 +37,39 @@ export default function Login() {
 
   return (
     <>
-      <h1>Iniciar sesión</h1>
-      <input
-        type="text"
-        placeholder="Correo electrónico"
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-      />
-      <br />
-      <input
-        type="password"
-        placeholder="Contraseña"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-      />
-      <br />
-      <button onClick={handleLogin}>Iniciar sesión</button>
-      <button>
-        <Link href="/Registration">Registro</Link>
-      </button>
+      <Head>
+        <title>Project-1</title>
+        <link rel="png" href="icon2.png" />
+      </Head>
+      <div className={styles.container_login}>
+        <div className={styles.form_login}>
+          <div className={styles.form_title_login}>
+            <h1>INICIAR SESIÓN</h1>
+          </div>
+          <input
+            type="text"
+            placeholder="Correo electrónico"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+          <br />
+          <input
+            type="password"
+            placeholder="Contraseña"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+          <br />
+
+          <button onClick={handleLogin}>Iniciar sesión</button>
+          <div>
+            <h22> No te has registrado? </h22>
+            <Link href="/Registration" className={styles.form_buttom_login}>
+              Registrarte
+            </Link>
+          </div>
+        </div>
+      </div>
     </>
   );
 }
diff --git a/client/src/pages/Profile.js b/client/src/pages/Profile.js
index a1663ef..b535341 100644
--- a/client/src/pages/Profile.js
+++ b/client/src/pages/Profile.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import Nav from "@/components/Nav";
 import Footer from "@/components/Footer";
-import styles from "@/styles/Home.module.css";
+import styles from "@/styles/general.module.css";
 import Head from "next/head";
 import { useRouter } from "next/router";
 
diff --git a/client/src/pages/Registration.js b/client/src/pages/Registration.js
index b3713f6..b5d9be6 100644
--- a/client/src/pages/Registration.js
+++ b/client/src/pages/Registration.js
@@ -2,7 +2,11 @@
 import React from "react";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as yup from "yup";
+import styles from "@/styles/general.module.css";
 import axios from "axios";
+import { Staatliches } from "next/font/google";
+import Link from "next/link";
+import Head from "next/head";
 
 export default function Registration() {
   const handleRegister = async (values) => {
@@ -36,32 +40,46 @@ export default function Registration() {
 
   return (
     <>
+      <Head>
+        <title>Project-1</title>
+      </Head>
       <Formik
         initialValues={{ email: "", password: "", confirmation: "" }}
         onSubmit={handleRegister}
         validationSchema={validationsRegister}
       >
-        <Form>
-          <div>
-            <h1>Registro</h1>
-            <Field type="text" name="email" placeholder="Email" />
-            <ErrorMessage name="email" component="div" />
-            <br />
-            <Field type="password" name="password" placeholder="Contraseña" />
-            <ErrorMessage name="password" component="div" />
-            <br />
-            <Field
-              type="password"
-              name="confirmation"
-              placeholder="Confirmación de Contraseña"
-            />
-            <ErrorMessage name="confirmation" component="div" />
-            <br />
-            <button type="submit">Registrar</button>
+        <div className={styles.container_register}>
+          <div className={styles.form_register}>
+            <div className={styles.form_title_register}>
+              <h1>REGISTRO </h1>
+            </div>
+            <div>
+              <Field type="text" name="email" placeholder="Email" />
+              <ErrorMessage name="email" component="div" />
+            </div>
+
+            <div>
+              <Field type="password" name="password" placeholder="Contraseña" />
+              <ErrorMessage name="password" component="div" />
+            </div>
+            <div>
+              <Field
+                type="password"
+                name="confirmation"
+                placeholder="Confirmación de Contraseña"
+              />
+              <ErrorMessage name="confirmation" component="div" />
+            </div>
+
+            <button> Registrarse</button>
             <br />
+            <Link href="/Login" className={styles.form_buttom_register}>
+              Volver al inicio
+            </Link>
           </div>
-        </Form>
+        </div>
       </Formik>
     </>
   );
 }
+
diff --git a/client/src/pages/index.js b/client/src/pages/index.js
index bb960b2..a93f8db 100644
--- a/client/src/pages/index.js
+++ b/client/src/pages/index.js
@@ -1,7 +1,7 @@
 import Head from "next/head";
 import { Inter } from "next/font/google";
 import App from "./App";
-import styles from "@/styles/Home.module.css";
+import styles from "@/styles/general.module.css";
 const inter = Inter({ subsets: ["latin"] });
 import Nav from "@/components/Nav";
 
diff --git a/client/src/styles/Home.module.css b/client/src/styles/Home.module.css
deleted file mode 100644
index 0074d61..0000000
--- a/client/src/styles/Home.module.css
+++ /dev/null
@@ -1,272 +0,0 @@
-
-
-.formlogin{
-
-  margin-right: auto;
-  text-align: center;
-  padding-top: 10%;
-
-}
-.formregister{
-
-  margin-right: auto;
-  text-align: center;
-  padding-top: 5%;
-
-}
-
-
-
-.select {
-
-  text-align: center;
-  border: white solid  1px;
-  padding-top: 1000%;
-  margin: 20px;
-  padding: 1rem;
-  border-radius: 100px;
-
-}
-.nav {
-  border-bottom-left-radius: 40px;
-  margin: 0;
-  top: 0;
-  position: absolute;
-  right: 0%; /* Cambiar este valor según el porcentaje deseado de la izquierda */
-  background-color: #ff7676;
-  width: 40%; /* Cambiar este valor según el porcentaje deseado del ancho */
-  justify-content: flex-start;
-  box-sizing: border-box; /* Para que el padding y el borde no aumenten el tamaño total */
-  padding: 0.4%;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr; /* Divide el contenedor en 3 columnas, con diferentes proporciones de ancho */
-  grid-gap: 5%; /* Espacio entre los elementos */
-}
-
-
-.nav button {
-  background: none;
-  border: none;
-  position: -ms-page;
-  padding: 0%;
-  width: 100%; /* Usar la unidad vw para el ancho del botón */
-  font-size: 1%; /* Modificar este valor para cambiar el tamaño del botón */
-  /* box-sizing: border-box; Para que el padding y el borde no aumenten el tamaño total */
-  grid-gap: 100%;
-
-
-}
-
-.nav a {
-  color: #242121;
-  text-decoration: none;
-  background: none;
-  cursor: pointer;
-  margin-right: 2%;
-  white-space: nowrap;
-  font-size: 15px;
-  padding-left: 10px;
- 
-  letter-spacing: 1px;
-
-
-}
-
-  
-.footer{
-  text-align: center;
-  padding: 5px;
-  margin: 0px;
-  background-color: #ff7676;  
-  bottom: 0px;
-  right: 0px;
-  width: 100%;
-  position: fixed;
-    min-height: 1%; 
-
-}
-.textfooter{ 
-  text-align: center;
-  color:  #c20000;
-  text-decoration: none;
-  background: none;
-    padding: 0px;
-  margin: 0px;
-  min-height: 1%; 
-  }
-/* 
-.style2{
-
-font-family: sans-serif;
-  border: 10;
-  background-color: rgb(255, 255, 255);
-  position:static;
-   min-height: 100vh;
-  display:flex ;
-  flex-direction: column;
-  min-height: 100vh;    
-
-} */
-
-
-
-/* 
-
-.style4{
-
-  text-align: center;
-  top: 20px;
-  bottom: 2000px;
-  position: relative;
-  
-} */
-
-
-
-.years{
-
-  text-align: center;
-
-  background-position: 200px;
-
-}
-
-.years button {
-
-   padding: 15px;
-  border-radius: 100px;
-  background-color:  #ff7676;  
-  bottom: 20px;
- margin-right: 50px;
- margin-left: 50px;
-   cursor: pointer;
-
-}
-
-.textbutom {
-  text-align: center;
-  color:  #c20000;
-  text-decoration: none;
-  background: none;
-  cursor: pointer;
-}
-
-/* .text2{
-  text-align: center;
-  color:  #c20000;
-  text-decoration: none;
-  background: none;
-  cursor: pointer;
-} */
-
-.years a {
-  text-align: center;
-  color:  #c20000;
-  text-decoration: none;
-  background: none;
-  cursor: pointer;
-}
-
-.text{
-  text-align: center;
-  color:  #c20000;
-  text-decoration: none;
-  background: none;
-  
-}
-
-
-@media screen  and (max-width: 480px) {
-
-  .nav {
-
-
-
-  right: 0%; /* Cambiar este valor según el porcentaje deseado de la izquierda */
-    border-bottom-right-radius: 40px;
-  width: 100%; /* Cambiar este valor según el porcentaje deseado del ancho */
-
-  grid-gap: 1%; /* Espacio entre los elementos */
-}
-
- .footer{
-  padding: 1px;
-}
-.textfooter {
-   font-size: 01px;
-}
-}
-  
-@media screen and (min-width: 481px) and (max-width: 768px){ 
-
-  .nav{
-
-  background-color: #ff7676;  
-  width: 70%; 
-  }
-  
-  .footer{
-  padding: 1px;
-}
-.textfooter {
-   font-size: 3px;
-}
-  
-}
-@media screen and (min-width: 769px) and (max-width: 1024px) { 
-
-  .nav{
-  background-color: #ff7676;  
-  width: 70%; /* Cambiar este valor según el porcentaje deseado del ancho */
-
-  }
-
-      .footer{
-  padding: 5px;
-}
-.textfooter {
-   font-size: 10px;
-}
-  
-}
-@media screen and (min-width: 1025px) and (max-width: 1200px) { 
-
-  .nav{
-
-  background-color: #ff7676;
-  right: 0%; /* Cambiar este valor según el porcentaje deseado de la izquierda */
-
-  width: 60%; /* Cambiar este valor según el porcentaje deseado del ancho */
-  }
-  .nav a {
-  font-size: 20px;
-    }
-  }
-    .footer{
-  padding: 5px;
-}
-.textfooter {
-   font-size: 10px;
-}
-  
-@media screen and (min-width: 1201px){ 
-  .nav{
-  background-color: #ff7676;  
-    border-bottom-left-radius: 80px;
-  }
-  .nav a {
-  font-size: 15px;
-    }
-  }
-  .footer{
-  padding: 10px;
-}
-.textfooter{
-   font-size: 25px;
-}
-  
-
-
-
-
-
diff --git a/client/src/styles/general.module.css b/client/src/styles/general.module.css
new file mode 100644
index 0000000..9467a99
--- /dev/null
+++ b/client/src/styles/general.module.css
@@ -0,0 +1,433 @@
+/*LOGIN */
+.container_login{
+
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+position: fixed;
+
+justify-content: center;
+display: flex;
+align-items: center;
+
+  background: linear-gradient(  #2898ee, #1f77cc,
+  
+   #1a6eba,
+#155eaa,
+#105c9a,
+#0b4a89,
+#064878,
+#013668);
+}
+
+  
+
+
+
+.form_login{
+  text-align: center;
+  outline: 6px solid #9fc7e5;
+  background-color: white;
+  border-radius: 10%;
+  margin: 30%;
+  width: 50%;
+  height: 70%;
+  
+  justify-content: center;
+  
+
+
+}
+
+.form_login input{
+ border: none;
+  outline: none;
+  margin: 4%;
+  background: none;
+     font-size: 30px;
+  list-style: 1;
+    border-bottom: 2px solid #2898ee; /* Añadir el subrayado */
+      font-family: "fantasy", serif;  
+}
+
+
+.form_login button {
+  top: 100%;
+  background-color: #2898ee;
+  height: auto;
+  width: 50%;
+  outline: 1px solid #9fc7e5;
+  color: white;
+  margin: 6%;
+  border-radius: 16px;
+  font-size: 20px;
+  cursor: pointer;
+  transition: background-color 0.3s, color 0.3s, transform 0.3s;
+}
+
+.form_login button:hover {
+  background-color: white;
+  color: #2898ee;
+  transform: scale(1.1);
+}
+
+
+.form_title_login{
+ color: #1f77cc;
+   font-size: 22px;
+margin-top: 1%;
+  font-family: "fantasy", serif;
+
+}
+
+/*LOGIN */
+/*REGISTRO */
+
+.container_register{
+
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+position: fixed;
+
+justify-content: center;
+display: flex;
+align-items: center;
+
+  background: linear-gradient(   #1f77cc,
+  
+   #1a6eba,
+#155eaa,
+#105c9a,
+#0b4a89,
+#064878,
+#013668);
+}
+
+.form_register{
+  text-align: center;
+  outline: 6px solid #9fc7e5;
+  background-color: white;
+  border-radius: 10%;
+  margin: 30%;
+  width: 40%;
+  height: 70%;
+  
+  justify-content: center;
+  
+
+
+}
+
+.form_register input{
+ border: none;
+  outline: none;
+  margin: 2%;
+  background: none;
+ font-size: 30px;
+  list-style: 1;
+    border-bottom: 2px solid #2898ee; /* Añadir el subrayado */
+      font-family: "fantasy", serif;  
+}
+
+.form_register a{
+  text-decoration: none;
+}
+.form_register button {
+  top: 100%;
+  background-color: #2898ee;
+  height: 28px;
+  padding: 0 4px;
+  width: 50%;
+  outline: 1px solid #9fc7e5;
+  color: white;
+  margin: 6%;
+  font-size: 20px;
+    border-radius: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s, color 0.3s, transform 0.3s;
+}
+
+.form_register button:hover {
+  background-color: white;
+  color: #2898ee;
+  transform: scale(1.1);
+}
+
+
+.form_title_register{
+ color: #1f77cc;
+   font-size: 22px;
+margin-top: 1%;
+  font-family: "fantasy", serif;
+
+}
+
+/*REGISTRO */
+.select {
+
+  text-align: center;
+  border: white solid  1px;
+  padding-top: 1000%;
+  margin: 20px;
+  padding: 1rem;
+  border-radius: 100px;
+
+}
+.nav {
+  border-bottom-left-radius: 40px;
+  margin: 0;
+  top: 0;
+  position: fixed;
+  right: 0%; /* Cambiar este valor según el porcentaje deseado de la izquierda */
+background: linear-gradient(   #1f77cc,
+  
+   #1a6eba,
+#155eaa,
+#105c9a,
+#0b4a89,
+#064878,
+#013668);
+  width: 40%; /* Cambiar este valor según el porcentaje deseado del ancho */
+  justify-content: flex-start;
+  box-sizing: border-box; /* Para que el padding y el borde no aumenten el tamaño total */
+  padding: 0.4%;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr; /* Divide el contenedor en 3 columnas, con diferentes proporciones de ancho */
+  grid-gap: 5%; /* Espacio entre los elementos */
+}
+
+
+.nav button {
+  background: none;
+  border: none;
+  position: -ms-page;
+  padding: 0%;
+  width: 100%; /* Usar la unidad vw para el ancho del botón */
+  font-size: 1%; /* Modificar este valor para cambiar el tamaño del botón */
+  /* box-sizing: border-box; Para que el padding y el borde no aumenten el tamaño total */
+  grid-gap: 100%;
+
+
+}
+
+.nav a {
+  color: white;
+  text-decoration: none;
+  background: none;
+  cursor: pointer;
+  margin-right: 2%;
+  white-space: nowrap;
+  font-size: 15px;
+  padding-left: 10px;
+ 
+  letter-spacing: 1px;
+
+
+}
+
+
+.footer{
+    text-align: center;
+   margin: 0%;
+   width: 10%;
+  bottom: 0;
+  position: fixed;
+  width: 100%;
+
+    min-height: 1%; 
+background: linear-gradient(   #1f77cc,
+#1a6eba,
+#155eaa,
+#105c9a,
+#0b4a89,
+#064878,
+#013668);
+
+
+}
+.text_footer{ 
+  color:  white;
+  text-decoration: none;
+   font-size: 20pxx;
+
+  }
+  .text_footer_version{ 
+  text-align: center;
+  color:  white;
+ font-size: 10px;
+  }
+
+
+
+.button_sumit_form{
+  color:  white;  
+  margin-left: 45%;
+  width: 10%;
+  background-color: #2898ee;
+       transition: "color 0.7s, background-color 0.7s",
+
+}
+
+.button_sumit_form:hover{
+  color:  #2898ee;  
+  margin-left: 45%;
+  width: 10%;
+  background-color: white;
+
+   transition: background-color 0.4s, color 0.4s, margin-left 0.4s, width 0.4s;
+}
+
+
+
+
+.text_title_load_datas{
+    color:  #1f77cc;  
+    font-size: 50px;
+    margin: 1%;
+    text-align: center;
+    
+
+}
+.text_sub_title_load_datas{
+      color:  #1f77cc;  
+      font-size: 30px;
+      margin-left: 20px;
+}
+.text_subject_load_dates{
+      color:  #1f77cc;  
+}
+
+.years{
+
+  text-align: center;
+
+  background-position: 200px;
+
+}
+
+
+
+
+/* .years a{
+
+    color: white;
+}
+.textbutom {
+  text-align: center;
+  color: white;
+  text-decoration: none;
+  background: none;
+  cursor: pointer;
+} */
+
+
+
+
+
+.text_title_home{ 
+ color: #1f77cc;
+   font-size: 60px;
+  text-align: center;
+margin-top: 0%;
+  font-family: "fantasy", serif;
+  
+}
+
+
+@media screen  and (max-width: 480px) {
+
+  .nav {
+
+
+
+  right: 0%; /* Cambiar este valor según el porcentaje deseado de la izquierda */
+    border-bottom-right-radius: 40px;
+  width: 100%; /* Cambiar este valor según el porcentaje deseado del ancho */
+
+  grid-gap: 1%; /* Espacio entre los elementos */
+}
+
+ .footer{
+  padding: 1px;
+}
+.textfooter {
+   font-size: 01px;
+}
+}
+  
+@media screen and (min-width: 481px) and (max-width: 768px){ 
+
+  .nav{
+
+  background-color: #ff7676;  
+  width: 70%; 
+  }
+  
+  .footer{
+  padding: 1px;
+}
+.textfooter {
+   font-size: 3px;
+}
+  
+}
+@media screen and (min-width: 769px) and (max-width: 1024px) { 
+
+  .nav{
+  background-color: #ff7676;  
+  width: 70%; /* Cambiar este valor según el porcentaje deseado del ancho */
+
+  }
+
+      .footer{
+  padding: 5px;
+}
+.textfooter {
+   font-size: 10px;
+}
+  
+}
+@media screen and (min-width: 1025px) and (max-width: 1200px) { 
+
+  .nav{
+
+  background-color: #ff7676;
+  right: 0%; /* Cambiar este valor según el porcentaje deseado de la izquierda */
+
+  width: 60%; /* Cambiar este valor según el porcentaje deseado del ancho */
+  }
+  .nav a {
+  font-size: 20px;
+    }
+  }
+    .footer{
+  padding: 5px;
+}
+.textfooter {
+   font-size: 10px;
+}
+  
+@media screen and (min-width: 1201px){ 
+  .nav{
+  background-color: #ff7676;  
+    border-bottom-left-radius: 80px;
+  }
+  .nav a {
+  font-size: 15px;
+    }
+  }
+  .footer{
+  padding: 10px;
+}
+.textfooter{
+   font-size: 25px;
+}
+  
+
+
+
+
+

From 59a026e45ab3b61b26fa0d84fc43973cd75d1545 Mon Sep 17 00:00:00 2001
From: MartinCaballero812 <caballeromarting08@gmail.com>
Date: Sat, 19 Aug 2023 19:46:51 -0300
Subject: [PATCH 2/6] Fix Import

---
 client/src/pages/App.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/pages/App.js b/client/src/pages/App.js
index 47988f6..b3db1eb 100644
--- a/client/src/pages/App.js
+++ b/client/src/pages/App.js
@@ -1,7 +1,7 @@
 import React from "react";
 import Login from "./Login";
 import Link from "next/link";
-import styles from "@/styles/Home.module.css";
+import styles from "@/styles/general.module.css";
 import Nav from "@/components/Nav";
 import Footer from "@/components/Footer";
 

From dff37d95188e2791977c7d615fc2208338b19fc5 Mon Sep 17 00:00:00 2001
From: MartinCaballero812 <caballeromarting08@gmail.com>
Date: Sat, 26 Aug 2023 17:59:00 -0300
Subject: [PATCH 3/6] Design and more efficient code

---
 client/src/pages/App.js              |    7 +-
 client/src/pages/Load_Datas.js       | 1186 ++++----------------------
 client/src/pages/Login.js            |    6 +-
 client/src/pages/Registration.js     |    1 +
 client/src/styles/general.module.css |  142 ++-
 5 files changed, 300 insertions(+), 1042 deletions(-)

diff --git a/client/src/pages/App.js b/client/src/pages/App.js
index b3db1eb..e71bc0d 100644
--- a/client/src/pages/App.js
+++ b/client/src/pages/App.js
@@ -1,6 +1,7 @@
 import React from "react";
 import Login from "./Login";
 import Link from "next/link";
+import Head from "next/head";
 import styles from "@/styles/general.module.css";
 import Nav from "@/components/Nav";
 import Footer from "@/components/Footer";
@@ -8,7 +9,11 @@ import Footer from "@/components/Footer";
 export default function App() {
   return (
     <>
-        <Login />
+      <Head>
+        <title>Project-1</title>
+    
+      </Head>
+      <Login />
     </>
   );
 }
diff --git a/client/src/pages/Load_Datas.js b/client/src/pages/Load_Datas.js
index b6690fe..be008e1 100644
--- a/client/src/pages/Load_Datas.js
+++ b/client/src/pages/Load_Datas.js
@@ -17,34 +17,41 @@ function Load_Dates() {
   const [color_4year_text, setcolor_4year_text] = useState("white");
   const [color_5year_buttom, setcolor_5year_buttom] = useState("#1f77cc");
   const [color_5ear_text, setcolor_5year_text] = useState("white");
-  const [show, setShow] = useState();
+  const [show, setShow] = useState(false);
   const [show2, setShow2] = useState(false);
   const [show3, setShow3] = useState(false);
   const [show4, setShow4] = useState(false);
   const [show5, setShow5] = useState(false);
+
+
   
    const handleButtonClick = () => {
-     setShow(!show);
+     setShow(!show)
 
      if (!show) {
+
        setcolor_1year_buttom("white"); // Cambiar el color a blanco
-     setcolor_1year_text("#1f77cc"); // Cambiar el color a celeste
-     } else {
-    setcolor_1year_buttom("#1f77cc"); // Cambiar el color a celeste
-      setcolor_1year_text("white"); // Cambiar el color a blanco
-     }
+       setcolor_1year_text("#1f77cc"); // Cambiar el color a celeste
+         setShow(true);
+         setShow2(false);
+         setShow3(false);
+         setShow4(false);
+         setShow5(false);
+     } 
    };
 
 
+
   
     const handleButton2Click = () => {
       setShow2(!show2);
           if (!show2) {
        setcolor_2year_buttom("white"); // Cambiar el color a blanco
-     setcolor_2year_text("#1f77cc"); // Cambiar el color a celeste
-     } else {
-    setcolor_2year_buttom("#1f77cc"); // Cambiar el color a celeste
-      setcolor_2year_text("white"); // Cambiar el color a blanco
+            setcolor_2year_text("#1f77cc"); // Cambiar el color a celeste
+              setShow(false);
+              setShow3(false);
+              setShow4(false);
+              setShow5(false);
      }
    };
   
@@ -53,10 +60,12 @@ function Load_Dates() {
       if (!show3) {
         setcolor_3year_buttom("white"); // Cambiar el color a blanco
         setcolor_3year_text("#1f77cc"); // Cambiar el color a celeste
-      } else {
-        setcolor_3year_buttom("#1f77cc"); // Cambiar el color a celeste
-        setcolor_3year_text("white"); // Cambiar el color a blanco
-      }
+          setShow(false);
+          setShow2(false);
+          setShow3(true);
+          setShow4(false);
+          setShow5(false);
+      } 
     };
   
     
@@ -65,10 +74,12 @@ function Load_Dates() {
       if (!show4) {
         setcolor_4year_buttom("white"); // Cambiar el color a blanco
         setcolor_4year_text("#1f77cc"); // Cambiar el color a celeste
-      } else {
-        setcolor_4year_buttom("#1f77cc"); // Cambiar el color a celeste
-        setcolor_4year_text("white"); // Cambiar el color a blanco
-      }
+          setShow(false);
+         setShow2(false);
+         setShow3(false);
+         setShow4(true);
+         setShow5(false);
+      } 
     };
   
       const handleButton5Click = () => {
@@ -76,10 +87,12 @@ function Load_Dates() {
         if (!show5) {
           setcolor_5year_buttom("white"); // Cambiar el color a blanco
           setcolor_5year_text("#1f77cc"); // Cambiar el color a celeste
-        } else {
-          setcolor_5year_buttom("#1f77cc"); // Cambiar el color a celeste
-          setcolor_5year_text("white"); // Cambiar el color a blanco
-        }
+            setShow(false);
+            setShow2(false);
+            setShow3(false);
+            setShow4(false);
+            setShow5(true);
+        } 
       };
   
 
@@ -88,9 +101,9 @@ function Load_Dates() {
   
      const buttonStyles = {
        padding: "15px",
-       color: show || show ? color_1year_text : "white", // Cambia el color del texto según show
+       color:  show ? color_1year_text : "white", // Cambia el color del texto según show
        borderRadius: "100px",
-       backgroundColor: show || show ? color_1year_buttom : "#1f77cc", // Cambia el valor según show
+       backgroundColor:  show ? color_1year_buttom : "#1f77cc", // Cambia el valor según show
        bottom: "20px",
        marginRight: "50px",
        marginLeft: "50px",
@@ -99,9 +112,9 @@ function Load_Dates() {
      };
      const buttonStyles2 = {
        padding: "15px",
-       color: show2 ? color_2ear_text : "white", // Cambia el color del texto según show
+       color: show2 ? color_2ear_text : "white", // Cambia el color del texto según show2
        borderRadius: "100px",
-       backgroundColor: show2 ? color_2year_buttom : "#1f77cc", // Cambia el valor según show
+       backgroundColor: show2 ? color_2year_buttom : "#1f77cc", // Cambia el valor según show2
        bottom: "20px",
        marginRight: "50px",
        marginLeft: "50px",
@@ -110,9 +123,9 @@ function Load_Dates() {
      };
    const buttonStyles3 = {
      padding: "15px",
-     color: show3 ? color_3year_text : "white", // Cambia el color del texto según show
+     color: show3 ? color_3year_text : "white", // Cambia el color del texto según show3
      borderRadius: "100px",
-     backgroundColor: show3 ? color_3year_buttom : "#1f77cc", // Cambia el valor según show
+     backgroundColor: show3 ? color_3year_buttom : "#1f77cc", // Cambia el valor según show3
      bottom: "20px",
      marginRight: "50px",
      marginLeft: "50px",
@@ -121,9 +134,9 @@ function Load_Dates() {
    };
    const buttonStyles4 = {
      padding: "15px",
-     color:  show4 ? color_4year_text : "white", // Cambia el color del texto según show
+     color:  show4 ? color_4year_text : "white", // Cambia el color del texto según show4
      borderRadius: "100px",
-     backgroundColor: show4 || show2 ? color_4year_buttom : "#1f77cc", // Cambia el valor según show
+     backgroundColor: show4 || show4 ? color_4year_buttom : "#1f77cc", // Cambia el valor según show4
      bottom: "20px",
      marginRight: "50px",
      marginLeft: "50px",
@@ -133,9 +146,9 @@ function Load_Dates() {
 
      const buttonStyles5 = {
        padding: "15px",
-       color: show5 ? color_5ear_text : "white", // Cambia el color del texto según show
+       color: show5 ? color_5ear_text : "white", // Cambia el color del texto según show5
        borderRadius: "100px",
-       backgroundColor: show5 || show2 ? color_5year_buttom : "#1f77cc", // Cambia el valor según show
+       backgroundColor: show5 || show5 ? color_5year_buttom : "#1f77cc", // Cambia el valor según show5
        bottom: "20px",
        marginRight: "50px",
        marginLeft: "50px",
@@ -190,41 +203,44 @@ const secondYear = {
   firstSemester: [
     {
       key: 9,
-      name : "Analisis Matemático II",
+      name: "Analisis Matemático II",
     },
     {
-      key: 10,
+      key: 11,
       name: "Ingeniería y Sociedad",
     },
     {
-      key: 11,
+      key: 13,
       name: "Sintaxis y Semántica de los Lenguajes ",
     },
     {
       key: 12,
-      name: "Física I",
+      name: "Inglés II",
     },
   ],
   secondSemester: [
     {
-      key: 13,
-      name: "Inglés II",
+      key: 10,
+      name: "Física II",
     },
-
     {
       key: 14,
-      name: "Física II",
+      name: "Paradigmas de Programación ",
     },
     {
       key: 15,
-      name: "Paradigmas de Programación ",
+      name: "Sistemas Operativo",
     },
+  ],
+anual: [
     {
-      key: 16,
-      name: "Sistemas Operativo",
+      key: 10,
+      name: "Física II",
     },
+
   ],
 };
+  
 
   for (let i = 0; i < firstYear.firstSemester.length; i++) {
     const subject = firstYear.firstSemester[i];
@@ -235,7 +251,113 @@ const secondYear = {
     }
   }
 
+const thirdYear = {
+  firstSemester: [
+    {
+      key: 17,
+      name: "Probabilidad y Estadistica",
+    },
+    {
+      key: 18,
+      name: "Economía",
+    },
+    {
+      key: 19,
+      name: "Bases de Datos ",
+    },
+    {
+      key: 21,
+      name: "Comunicación de Datos",
+    },
+  ],
+  secondSemester: [
+    {
+      key: 20,
+      name: "Desarrollo de Software",
+    },
 
+    {
+      key: 22,
+      name: "Análisis Numérico",
+    },
+   
+  ],
+  
+};
+  
+  const fourthYear = {
+    firstSemester: [
+      {
+        key: 24,
+        name: "Legislación",
+      },
+      {
+        key: 27,
+        name: "Investigación Operativa ",
+      },
+      {
+        key: 28,
+        name: "Simulación ",
+      },
+      {
+        key: 37,
+        name: "Seminario Integrador ",
+      },
+    ],
+    secondSemester: [
+      {
+        key: 26,
+        name: "Redes de datos",
+      },
+
+      {
+        key: 29,
+        name: "Tecnología para la Automatización",
+      },
+    ],
+  };
+    const fifthYear = {
+      firstSemester: [
+        {
+          key: 31,
+          name: "Inteligencia Artificial",
+        },
+        {
+          key: 32,
+          name: "Gestión Gerencia ",
+        },
+      ],
+      secondSemester: [
+        {
+          key: 33,
+          name: "Sistemas de Gestión  ",
+        },
+        {
+          key: 34,
+          name: "Ciencias de Datos ",
+        },
+
+        {
+          key: 35,
+          name: "Seguridad en los Sistemas de Información ",
+        },
+      ],
+      annual: [
+        {
+          key: 36,
+          name: " ",
+        },
+      ],
+    };
+
+for (let i = 0; i < firstYear.firstSemester.length; i++) {
+  const subject = firstYear.firstSemester[i];
+}
+for (const firstYearKey in firstYear) {
+  const semester = firstYear[firstYearKey];
+  for (const subject of semester) {
+  }
+}
   const SUBJECT_STATUS = [
     {
       key: "notInprogress",
@@ -346,17 +468,12 @@ const secondYear = {
               <div>
                 <br />
                 <h3 className={styles.text_sub_title_load_datas}>
-                  {" "}
                   Segundo Cuatrimestre
                 </h3>
                 <br />
               </div>
             </div>
             <Semester semester={firstYear.secondSemester} />
-            <br />
-            <button className={styles.button_sumit_form} type="sumit">
-              ENVIAR
-            </button>
           </form>
         ) : null}
         <div>{/*--------FIRST YEAR---------- */}</div>
@@ -386,6 +503,7 @@ const secondYear = {
                   {" "}
                   Segundo Cuatrimestre{" "}
                 </h3>
+                <Semester semester={secondYear.secondSemester} />
                 <br />
               </div>
               <div>
@@ -393,18 +511,8 @@ const secondYear = {
                 <h3 className={styles.text_sub_title_load_datas}> Anual </h3>
                 <br />
               </div>
-              <div>
-                {/*--------Information System Analysis---------- */}
-                <fieldset>
-                  <h4> Análisis de Sistema de Información </h4>
-                </fieldset>
-                {/*--------Information System Analysis---------- */}
-              </div>
+              <div></div>
             </div>
-            <br />
-            <button className={styles.button_sumit_form} type="sumit">
-              ENVIAR
-            </button>
           </form>
         ) : null}
         <div>{/*--------SECOND YEAR---------- */}</div>
@@ -414,353 +522,28 @@ const secondYear = {
             <div>
               <br />
               <h3 align="center" className={styles.text_title_load_datas}>
-                {" "}
-                TERCER AÑO{" "}
+                TERCER AÑO
               </h3>
               <br />
               <h3 className={styles.text_sub_title_load_datas}>
-                {" "}
-                Primer Cuatrimestre{" "}
+                Primer Cuatrimestre
               </h3>
               <br />
-              <div>{/*--------Probability and statistics---------- */}</div>
-              <fieldset>
-                <h4>Probabilidad y Estadistica </h4>
-                <input
-                  type="radio"
-                  id="approved"
-                  name="statistics"
-                  value="approved"
-                />
-                <label for="approved">Aprobada </label>
-
-                <input
-                  type="radio"
-                  id="regularized "
-                  name="statistics"
-                  value="regularized"
-                />
-                <label for="regularized"> Regularizada </label>
-
-                <input
-                  type="radio"
-                  id="disapproved "
-                  name="statistics"
-                  value="disapproved"
-                />
-                <label for="disapproved"> Desaporbada </label>
-
-                <input
-                  type="radio"
-                  id="currently "
-                  name="statistics"
-                  value="currently"
-                />
-                <label for="currently"> Cursando </label>
-
-                <input
-                  type="radio"
-                  id="not_currently "
-                  name="statistics"
-                  value="not_currently"
-                  defaultChecked
-                />
-                <label for="not_currently"> No cursada </label>
-              </fieldset>
-              <br />
-              <div>{/*--------Probability and statistics---------- */}</div>
-              <div>{/*--------Economy---------- */}</div>
-              <fieldset>
-                <h4>Economía </h4>
-                <input
-                  type="radio"
-                  id="approved"
-                  name="Economy "
-                  value="approved"
-                />
-                <label for="approved">Aprobada </label>
-
-                <input
-                  type="radio"
-                  id="regularized "
-                  name="Economy "
-                  value="regularized"
-                />
-                <label for="regularized"> Regularizada </label>
-
-                <input
-                  type="radio"
-                  id="disapproved "
-                  name="Engineering_Society "
-                  value="disapproved"
-                />
-                <label for="disapproved"> Desaporbada </label>
-
-                <input
-                  type="radio"
-                  id="currently "
-                  name="Economy "
-                  value="currently"
-                />
-                <label for="currently"> Cursando </label>
-
-                <input
-                  type="radio"
-                  id="not_currently "
-                  name="Economy "
-                  value="not_currently"
-                  defaultChecked
-                />
-                <label for="not_currently"> No cursada </label>
-              </fieldset>
-              <br />
-              <div>{/*--------Economy---------- */}</div>
-              <div>{/*--------Databases---------- */}</div>
-              <fieldset>
-                <h4> Bases de Datos </h4>
-                <input
-                  type="radio"
-                  id="approved"
-                  name="Databases"
-                  value="approved"
-                />
-                <label for="approved">Aprobada </label>
-
-                <input
-                  type="radio"
-                  id="regularized "
-                  name="Databases"
-                  value="regularized"
-                />
-                <label for="regularized"> Regularizada </label>
-
-                <input
-                  type="radio"
-                  id="disapproved "
-                  name="Databases"
-                  value="disapproved"
-                />
-                <label for="disapproved"> Desaporbada </label>
-
-                <input
-                  type="radio"
-                  id="currently "
-                  name="Databases"
-                  value="currently"
-                />
-                <label for="currently"> Cursando </label>
-
-                <input
-                  type="radio"
-                  id="not_currently "
-                  name="Databases"
-                  value="not_currently"
-                  defaultChecked
-                />
-                <label for="not_currently"> No cursada </label>
-              </fieldset>
-              <br />
-              <div>
-                <div>{/*--------Databases---------- */}</div>
-              </div>
-              <div>{/*--------Data Communication---------- */}</div>
-              <fieldset>
-                <h4>Comunicación de Datos</h4>
-                <input
-                  type="radio"
-                  id="approved"
-                  name="Communication-"
-                  value="approved"
-                />
-                <label for="approved">Aprobada </label>
-
-                <input
-                  type="radio"
-                  id="regularized "
-                  name="Communication-"
-                  value="regularized"
-                />
-                <label for="regularized"> Regularizada </label>
-
-                <input
-                  type="radio"
-                  id="disapproved "
-                  name="Communication-"
-                  value="disapproved"
-                />
-                <label for="disapproved"> Desaporbada </label>
-
-                <input
-                  type="radio"
-                  id="currently "
-                  name="Communication-"
-                  value="currently"
-                />
-                <label for="currently"> Cursando </label>
-
-                <input
-                  type="radio"
-                  id="not_currently "
-                  name="Communication-"
-                  value="not_currently"
-                  defaultChecked
-                />
-                <label for="not_currently"> No cursada </label>
-              </fieldset>
+            </div>
+            <Semester semester={thirdYear.firstSemester} />
+            <div>
               <br />
-              <div>{/*--------Data Communication---------- */}</div>
               <h3 className={styles.text_sub_title_load_datas}>
-                {" "}
-                Segundo Cuatrimestre{" "}
+                Segundo Cuatrimestre
               </h3>
               <br />
-              <div>{/*--------Software development---------- */}</div>
-              <fieldset>
-                <h4>Desarrollo de Software </h4>
-                <input
-                  type="radio"
-                  id="approved"
-                  name="Software_development"
-                  value="approved"
-                />
-                <label for="approved">Aprobada </label>
-
-                <input
-                  type="radio"
-                  id="regularized "
-                  name="Software_development"
-                  value="regularized"
-                />
-                <label for="regularized"> Regularizada </label>
-
-                <input
-                  type="radio"
-                  id="disapproved "
-                  name="Física2"
-                  value="disapproved"
-                />
-                <label for="disapproved"> Desaporbada </label>
-
-                <input
-                  type="radio"
-                  id="currently "
-                  name="Software_development"
-                  value="currently"
-                />
-                <label for="currently"> Cursando </label>
-
-                <input
-                  type="radio"
-                  id="not_currently "
-                  name="Software_development"
-                  value="not_currently"
-                  defaultChecked
-                />
-                <label for="not_currently"> No cursada </label>
-              </fieldset>
-              <br />
-              <div>{/*--------Software development---------- */}</div>
-              <div>{/*-------- Physics II---------- */}</div>
-
-              <div>{/*--------Numerical analysis---------- */}</div>
-              <fieldset>
-                <h4>Análisis Numérico </h4>
-                <input
-                  type="radio"
-                  id="approved"
-                  name="-Numerical_analysis "
-                  value="approved"
-                />
-                <label for="approved">Aprobada </label>
-
-                <input
-                  type="radio"
-                  id="regularized "
-                  name="-Numerical_analysis "
-                  value="regularized"
-                />
-                <label for="regularized"> Regularizada </label>
-
-                <input
-                  type="radio"
-                  id="disapproved "
-                  name="-Numerical_analysis "
-                  value="disapproved"
-                />
-                <label for="disapproved"> Desaporbada </label>
-
-                <input
-                  type="radio"
-                  id="currently "
-                  name="-Numerical_analysis "
-                  value="currently"
-                />
-                <label for="currently"> Cursando </label>
-
-                <input
-                  type="radio"
-                  id="not_currently "
-                  name="-Numerical_analysis "
-                  value="not_currently"
-                  defaultChecked
-                />
-                <label for="not_currently"> No cursada </label>
-              </fieldset>
-              <div>{/*--------Numerical analysis---------- */}</div>
+            </div>
+            <Semester semester={thirdYear.secondSemester} />
+            <div>
               <br />
               <h3 className={styles.text_sub_title_load_datas}> Anual </h3>
               <br />
-              <div>{/*--------Design of information systems---------- */}</div>
-              <fieldset>
-                <h4>Diseño de Sistemas de Información </h4>
-                <br />
-                <input
-                  type="radio"
-                  id="approved"
-                  name="Design_systems"
-                  value="approved"
-                />
-                <label for="approved">Aprobada </label>
-
-                <input
-                  type="radio"
-                  id="regularized "
-                  name="Design_systems"
-                  value="regularized"
-                />
-                <label for="regularized"> Regularizada </label>
-
-                <input
-                  type="radio"
-                  id="disapproved "
-                  name="Design_systems"
-                  value="disapproved"
-                />
-                <label for="disapproved"> Desaporbada </label>
-
-                <input
-                  type="radio"
-                  id="currently "
-                  name="Design_systems"
-                  value="currently"
-                />
-                <label for="currently"> Cursando </label>
-
-                <input
-                  type="radio"
-                  id="not_currently "
-                  name="Design_systems"
-                  value="not_currently"
-                  defaultChecked
-                />
-                <label for="not_currently"> No cursada </label>
-              </fieldset>
-              <br />
-              <div>{/*--------Design of information systems---------- */}</div>
             </div>
-            <button className={styles.button_sumit_form} type="sumit">
-              ENVIAR
-            </button>
           </form>
         ) : null}
         <div>{/*--------TRID YEAR---------- */}</div>
@@ -782,349 +565,28 @@ const secondYear = {
                 </h3>
                 <br />
               </div>
-              <div>{/*--------Legislation---------- */}</div>
-              <fieldset>
-                <h4>Legislación</h4>
-                <input
-                  type="radio"
-                  id="approved"
-                  name="Legislation"
-                  value="approved"
-                />
-                <label for="approved">Aprobada </label>
-
-                <input
-                  type="radio"
-                  id="regularized "
-                  name="Legislation"
-                  value="regularized"
-                />
-                <label for="regularized"> Regularizada </label>
-
-                <input
-                  type="radio"
-                  id="disapproved "
-                  name="Legislation"
-                  value="disapproved"
-                />
-                <label for="disapproved"> Desaporbada </label>
-
-                <input
-                  type="radio"
-                  id="currently "
-                  name="Legislation"
-                  value="currently"
-                />
-                <label for="currently"> Cursando </label>
-
-                <input
-                  type="radio"
-                  id="not_currently "
-                  name="Legislation"
-                  value="not_currently"
-                  defaultChecked
-                />
-                <label for="not_currently"> No cursada </label>
-              </fieldset>
-              <br />
-              <div>{/*--------Legislation---------- */}</div>
-              <div>{/*--------Operative investigation---------- */}</div>
-              <fieldset>
-                <h4>Investigación Operativa </h4>
-                <input
-                  type="radio"
-                  id="approved"
-                  name="Operative_investigation"
-                  value="approved"
-                />
-                <label for="approved">Aprobada </label>
-
-                <input
-                  type="radio"
-                  id="regularized "
-                  name="Operative_investigation"
-                  value="regularized"
-                />
-                <label for="regularized"> Regularizada </label>
-
-                <input
-                  type="radio"
-                  id="disapproved "
-                  name="Operative_investigation"
-                  value="disapproved"
-                />
-                <label for="disapproved"> Desaporbada </label>
-
-                <input
-                  type="radio"
-                  id="currently "
-                  name="Operative_investigation"
-                  value="currently"
-                />
-                <label for="currently"> Cursando </label>
-
-                <input
-                  type="radio"
-                  id="not_currently "
-                  name="Operative_investigation"
-                  value="not_currently"
-                  defaultChecked
-                />
-                <label for="not_currently"> No cursada </label>
-              </fieldset>
-              <br />
-              <div>{/*--------Operative investigation---------- */}</div>
-              <div>{/*--------Simulation---------- */}</div>
-              <fieldset>
-                <h4> Simulación </h4>
-                <input
-                  type="radio"
-                  id="approved"
-                  name="Simulation"
-                  value="approved"
-                />
-                <label for="approved">Aprobada </label>
-
-                <input
-                  type="radio"
-                  id="regularized "
-                  name="Simulation"
-                  value="regularized"
-                />
-                <label for="regularized"> Regularizada </label>
-
-                <input
-                  type="radio"
-                  id="disapproved "
-                  name="Simulation"
-                  value="disapproved"
-                />
-                <label for="disapproved"> Desaporbada </label>
-
-                <input
-                  type="radio"
-                  id="currently "
-                  name="Simulation"
-                  value="currently"
-                />
-                <label for="currently"> Cursando </label>
-
-                <input
-                  type="radio"
-                  id="not_currently "
-                  name="Simulation"
-                  value="not_currently"
-                  defaultChecked
-                />
-                <label for="not_currently"> No cursada </label>
-              </fieldset>
-              <br />
-              <div>{/*--------Simulation---------- */}</div>
+              <Semester semester={fourthYear.firstSemester} />
               <div>
                 <br />
                 <h3 className={styles.text_sub_title_load_datas}>
                   {" "}
                   Segundo Cuatrimestre{" "}
                 </h3>
+              </div>
+              <Semester semester={fourthYear.secondSemester} />
+              <div>
                 <br />
               </div>
-              <div>{/*-------- Data network---------- */}</div>
-              <fieldset>
-                <h4>Redes de Datos </h4>
-                <input
-                  type="radio"
-                  id="approved"
-                  name="Data_network"
-                  value="approved"
-                />
-                <label for="approved">Aprobada </label>
-
-                <input
-                  type="radio"
-                  id="regularized "
-                  name="Data_network"
-                  value="regularized"
-                />
-                <label for="regularized"> Regularizada </label>
-
-                <input
-                  type="radio"
-                  id="disapproved "
-                  name="Data_network"
-                  value="disapproved"
-                />
-                <label for="disapproved"> Desaporbada </label>
-
-                <input
-                  type="radio"
-                  id="currently "
-                  name="Data_network"
-                  value="currently"
-                />
-                <label for="currently"> Cursando </label>
-
-                <input
-                  type="radio"
-                  id="not_currently "
-                  name="Data_network"
-                  value="not_currently"
-                  defaultChecked
-                />
-                <label for="not_currently"> No cursada </label>
-              </fieldset>
-              <br />
-              {/*-------- Data network---------- */}
-              {/*--------Technologies for authentication---------- */}
-              <fieldset>
-                <h4> Tecnologías para la Autenticación </h4>
-                <input
-                  type="radio"
-                  id="approved"
-                  name="Technologies_ authentication"
-                  value="approved"
-                />
-                <label for="approved">Aprobada </label>
-
-                <input
-                  type="radio"
-                  id="regularized "
-                  name="Technologies_ authentication"
-                  value="regularized"
-                />
-                <label for="regularized"> Regularizada </label>
-
-                <input
-                  type="radio"
-                  id="disapproved "
-                  name="Technologies_ authentication"
-                  value="disapproved"
-                />
-                <label for="disapproved"> Desaporbada </label>
-
-                <input
-                  type="radio"
-                  id="currently "
-                  name="Technologies_ authentication"
-                  value="currently"
-                />
-                <label for="currently"> Cursando </label>
-
-                <input
-                  type="radio"
-                  id="not_currently "
-                  name="Technologies_ authentication"
-                  value="not_currently"
-                  defaultChecked
-                />
-                <label for="not_currently"> No cursada </label>
-              </fieldset>
-              <br />
-              {/*--------Technologies for authentication---------- */}
               <div>
                 <div>
                   <br />
                   <h3 className={styles.text_sub_title_load_datas}> Anual </h3>
                   <br />
                 </div>
-                <div>
-                  {/*--------Engineering and Software Quality---------- */}
-                  <fieldset>
-                    <h4>Ingeniería y Calidad de Software</h4>
-                    <input
-                      type="radio"
-                      id="approved"
-                      name="Software_Quality"
-                      value="approved"
-                    />
-                    <label for="approved">Aprobada </label>
-
-                    <input
-                      type="radio"
-                      id="regularized "
-                      name="Software_Quality"
-                      value="regularized"
-                    />
-                    <label for="regularized"> Regularizada </label>
-
-                    <input
-                      type="radio"
-                      id="disapproved "
-                      name="Software_Quality"
-                      value="disapproved"
-                    />
-                    <label for="disapproved"> Desaporbada </label>
-
-                    <input
-                      type="radio"
-                      id="currently "
-                      name="Software_Quality"
-                      value="currently"
-                    />
-                    <label for="currently"> Cursando </label>
-
-                    <input
-                      type="radio"
-                      id="not_currently "
-                      name="Software_Quality"
-                      value="not_currently"
-                      defaultChecked
-                    />
-                    <label for="not_currently"> No cursada </label>
-                  </fieldset>
-                  <br />
-                  {/*--------Engineering and Software Quality---------- */}
-                  {/*--------Information Systems Administration--------- */}
-                  <fieldset>
-                    <h4> Administración de Sistemas de Información </h4>
-                    <input
-                      type="radio"
-                      id="approved"
-                      name="Systems_Administratio"
-                      value="approved"
-                    />
-                    <label for="approved">Aprobada </label>
-
-                    <input
-                      type="radio"
-                      id="regularized "
-                      name="Systems_Administratio"
-                      value="regularized"
-                    />
-                    <label for="regularized"> Regularizada </label>
-
-                    <input
-                      type="radio"
-                      id="disapproved "
-                      name="Systems_Administratio"
-                      value="disapproved"
-                    />
-                    <label for="disapproved"> Desaporbada </label>
-
-                    <input
-                      type="radio"
-                      id="currently "
-                      name="Systems_Administratio"
-                      value="currently"
-                    />
-                    <label for="currently"> Cursando </label>
-
-                    <input
-                      type="radio"
-                      id="not_currently "
-                      name="Systems_Administratio"
-                      value="not_currently"
-                      defaultChecked
-                    />
-                    <label for="not_currently"> No cursada </label>
-                  </fieldset>
-                  {/*--------Information Systems Administration--------- */}
-                </div>
+         
               </div>
             </div>
             <br />
-            <button className={styles.button_sumit_form} type="sumit">
-              ENVIAR
-            </button>
           </form>
         ) : null}
         <div>{/*--------FOURTH YEAR---------- */}</div>
@@ -1144,148 +606,12 @@ const secondYear = {
                   {" "}
                   Primer Cuatrimestre{" "}
                 </h3>
-                <br />
               </div>
+              <Semester semester={fifthYear.firstSemester} />
               <div>
-                {/*--------Artificial_intelligence---------- */}
-                <fieldset>
-                  <h4>Inteligencia Artificial</h4>
-                  <input
-                    type="radio"
-                    id="approved"
-                    name="Artificial_intelligence"
-                    value="approved"
-                  />
-                  <label for="approved">Aprobada </label>
-
-                  <input
-                    type="radio"
-                    id="regularized "
-                    name="Artificial_intelligence"
-                    value="regularized"
-                  />
-                  <label for="regularized"> Regularizada </label>
-
-                  <input
-                    type="radio"
-                    id="disapproved "
-                    name="Artificial_intelligence"
-                    value="disapproved"
-                  />
-                  <label for="disapproved"> Desaporbada </label>
-
-                  <input
-                    type="radio"
-                    id="currently "
-                    name="Artificial_intelligence"
-                    value="currently"
-                  />
-                  <label for="currently"> Cursando </label>
-
-                  <input
-                    type="radio"
-                    id="not_currently "
-                    name="Artificial_intelligence"
-                    value="not_currently"
-                    defaultChecked
-                  />
-                  <label for="not_currently"> No cursada </label>
-                </fieldset>
-                <br />
-                {/*--------Artificial_intelligence---------- */}
-                {/*--------Management Management---------- */}
-                <fieldset>
-                  <h4>Gestión Gerencia </h4>
-                  <input
-                    type="radio"
-                    id="approved"
-                    name="Management"
-                    value="approved"
-                  />
-                  <label for="approved">Aprobada </label>
-
-                  <input
-                    type="radio"
-                    id="regularized "
-                    name="Management"
-                    value="regularized"
-                  />
-                  <label for="regularized"> Regularizada </label>
-
-                  <input
-                    type="radio"
-                    id="disapproved "
-                    name="Management"
-                    value="disapproved"
-                  />
-                  <label for="disapproved"> Desaporbada </label>
-
-                  <input
-                    type="radio"
-                    id="currently "
-                    name="Management"
-                    value="currently"
-                  />
-                  <label for="currently"> Cursando </label>
-
-                  <input
-                    type="radio"
-                    id="not_currently "
-                    name="Management"
-                    value="not_currently"
-                    defaultChecked
-                  />
-                  <label for="not_currently"> No cursada </label>
-                </fieldset>
-                <br />
-                {/*--------Management Management---------- */}
-                {/*--------Management systems---------- */}
-                <fieldset>
-                  <h4> Sistemas de Gestión </h4>
-                  <input
-                    type="radio"
-                    id="approved"
-                    name="Management_systems"
-                    value="approved"
-                  />
-                  <label for="approved">Aprobada </label>
-
-                  <input
-                    type="radio"
-                    id="regularized "
-                    name="Management_systems"
-                    value="regularized"
-                  />
-                  <label for="regularized"> Regularizada </label>
-
-                  <input
-                    type="radio"
-                    id="disapproved "
-                    name="Management_systems"
-                    value="disapproved"
-                  />
-                  <label for="disapproved"> Desaporbada </label>
-
-                  <input
-                    type="radio"
-                    id="currently "
-                    name="Management_systems"
-                    value="currently"
-                  />
-                  <label for="currently"> Cursando </label>
-
-                  <input
-                    type="radio"
-                    id="not_currently "
-                    name="Management_systems"
-                    value="not_currently"
-                    defaultChecked
-                  />
-                  <label for="not_currently"> No cursada </label>
-                </fieldset>
                 <br />
-                {/*--------Management systems---------- */}
               </div>
+              <div></div>
               <div>
                 <div>
                   <br />
@@ -1293,100 +619,11 @@ const secondYear = {
                     {" "}
                     Segundo Cuatrimestre{" "}
                   </h3>
+                </div>
+                <Semester semester={fifthYear.secondSemester} />
+                <div>
                   <br />
                 </div>
-                {/*--------Data Science---------- */}
-                <fieldset>
-                  <h4>Ciencias de Datos </h4>
-                  <input
-                    type="radio"
-                    id="approved"
-                    name="Data_Science"
-                    value="approved"
-                  />
-                  <label for="approved">Aprobada </label>
-
-                  <input
-                    type="radio"
-                    id="regularized "
-                    name="Data_Science"
-                    value="regularized"
-                  />
-                  <label for="regularized"> Regularizada </label>
-
-                  <input
-                    type="radio"
-                    id="disapproved "
-                    name="Data_Science"
-                    value="disapproved"
-                  />
-                  <label for="disapproved"> Desaporbada </label>
-
-                  <input
-                    type="radio"
-                    id="currently "
-                    name="Data_Science"
-                    value="currently"
-                  />
-                  <label for="currently"> Cursando </label>
-
-                  <input
-                    type="radio"
-                    id="not_currently "
-                    name="Data_Science"
-                    value="not_currently"
-                    defaultChecked
-                  />
-                  <label for="not_currently"> No cursada </label>
-                </fieldset>
-                <br />
-                {/*--------Engineering and Software Quality---------- */}
-                {/*--------Security in Information Systems---------- */}
-                <fieldset>
-                  <h4>Seguridad en los Sistemas de Información </h4>
-                  <input
-                    type="radio"
-                    id="approved"
-                    name="Security"
-                    value="approved"
-                  />
-                  <label for="approved">Aprobada </label>
-
-                  <input
-                    type="radio"
-                    id="regularized "
-                    name="Security"
-                    value="regularized"
-                  />
-                  <label for="regularized"> Regularizada </label>
-
-                  <input
-                    type="radio"
-                    id="disapproved "
-                    name="Security"
-                    value="disapproved"
-                  />
-                  <label for="disapproved"> Desaporbada </label>
-
-                  <input
-                    type="radio"
-                    id="currently "
-                    name="Security"
-                    value="currently"
-                  />
-                  <label for="currently"> Cursando </label>
-
-                  <input
-                    type="radio"
-                    id="not_currently "
-                    name="Security"
-                    value="not_currently"
-                    defaultChecked
-                  />
-                  <label for="not_currently"> No cursada </label>
-                </fieldset>
-                <br />
-                {/*--------Security in Information Systems---------- */}
               </div>
               <div>
                 <div>
@@ -1394,64 +631,15 @@ const secondYear = {
                   <h3 className={styles.text_sub_title_load_datas}> Anual </h3>
                   <br />
                 </div>
-                {/*--------Final project--------- */}
-                <fieldset>
-                  <h4> Proyecto Final </h4>
-                  <input
-                    type="radio"
-                    id="approved"
-                    name="Final project"
-                    value="approved"
-                  />
-                  <label for="approved">Aprobada </label>
-
-                  <input
-                    type="radio"
-                    id="regularized "
-                    name="Final project"
-                    value="regularized"
-                  />
-                  <label for="regularized"> Regularizada </label>
-
-                  <input
-                    type="radio"
-                    id="disapproved "
-                    name="Final project"
-                    value="disapproved"
-                  />
-                  <label for="disapproved"> Desaporbada </label>
-
-                  <input
-                    type="radio"
-                    id="currently "
-                    name="Final project"
-                    value="currently"
-                  />
-                  <label for="currently"> Cursando </label>
-
-                  <input
-                    type="radio"
-                    id="not_currently "
-                    name="Final project"
-                    value="not_currently"
-                    defaultChecked
-                  />
-                  <label for="not_currently"> No cursada </label>
-                </fieldset>
-                {/*--------Final project--------- */}
               </div>
             </div>
             <br />
-            <button className={styles.button_sumit_form} type="sumit">
-              ENVIAR
-            </button>
           </form>
         ) : null}
         <div>{/*--------FIFRTH YEAR---------- */}</div>
       </div>
       <br />
       <br />
-
       <br />
       <br />
       <div>{/*--------YEARS----------- */}</div>
diff --git a/client/src/pages/Login.js b/client/src/pages/Login.js
index b21ffe4..4412e5f 100644
--- a/client/src/pages/Login.js
+++ b/client/src/pages/Login.js
@@ -63,9 +63,9 @@ export default function Login() {
 
           <button onClick={handleLogin}>Iniciar sesión</button>
           <div>
-            <h22> No te has registrado? </h22>
-            <Link href="/Registration" className={styles.form_buttom_login}>
-              Registrarte
+            <h22 className={styles.form_login_text}> No te has registrado? </h22>
+            <Link href="/Registration" >
+              Registrate
             </Link>
           </div>
         </div>
diff --git a/client/src/pages/Registration.js b/client/src/pages/Registration.js
index b5d9be6..93f7736 100644
--- a/client/src/pages/Registration.js
+++ b/client/src/pages/Registration.js
@@ -83,3 +83,4 @@ export default function Registration() {
   );
 }
 
+  
\ No newline at end of file
diff --git a/client/src/styles/general.module.css b/client/src/styles/general.module.css
index 9467a99..2b35ae2 100644
--- a/client/src/styles/general.module.css
+++ b/client/src/styles/general.module.css
@@ -80,7 +80,14 @@ margin-top: 1%;
   font-family: "fantasy", serif;
 
 }
+.form_login_text{
+     font-size: 20px;
+}
 
+.form_login a{
+  text-decoration: none;
+  color: #2898ee;
+}
 /*LOGIN */
 /*REGISTRO */
 
@@ -112,9 +119,10 @@ align-items: center;
   background-color: white;
   border-radius: 10%;
   margin: 30%;
-  width: 40%;
+  width: 50%;
   height: 70%;
   
+  
   justify-content: center;
   
 
@@ -132,9 +140,7 @@ align-items: center;
       font-family: "fantasy", serif;  
 }
 
-.form_register a{
-  text-decoration: none;
-}
+
 .form_register button {
   top: 100%;
   background-color: #2898ee;
@@ -162,7 +168,11 @@ align-items: center;
    font-size: 22px;
 margin-top: 1%;
   font-family: "fantasy", serif;
-
+  color: #2898ee;
+}
+.form_register a{
+  text-decoration: none;
+  color: #2898ee;
 }
 
 /*REGISTRO */
@@ -231,7 +241,7 @@ background: linear-gradient(   #1f77cc,
 
 .footer{
     text-align: center;
-   margin: 0%;
+   margin-top: 500px;
    width: 10%;
   bottom: 0;
   position: fixed;
@@ -311,18 +321,6 @@ background: linear-gradient(   #1f77cc,
 
 
 
-/* .years a{
-
-    color: white;
-}
-.textbutom {
-  text-align: center;
-  color: white;
-  text-decoration: none;
-  background: none;
-  cursor: pointer;
-} */
-
 
 
 
@@ -348,13 +346,79 @@ margin-top: 0%;
   width: 100%; /* Cambiar este valor según el porcentaje deseado del ancho */
 
   grid-gap: 1%; /* Espacio entre los elementos */
-}
+  }
 
  .footer{
   padding: 1px;
-}
+  }
 .textfooter {
    font-size: 01px;
+  }
+
+.container_login{
+  
+  margin: 0%;
+  height: 100%;
+  width: 100%;
+
+  
+
+}
+.form_login{
+  width: 100%;
+  height: 34%;
+  margin: 15%;
+
+
+
+}
+
+.form_login input{
+     font-size: 21px;
+
+}
+.form_login button {
+  height: auto;
+  width: 50%;
+  font-size: 12px;
+
+}
+
+.form_title_login{
+ color: #1f77cc;
+   font-size: 20px;
+}
+.container_register{
+  
+  margin: 0%;
+  height: 100%;
+  width: 100%;
+
+  
+
+}
+.form_register{
+  width: 100%;
+  height: 40%;
+  margin: 15%;
+}
+.form_register button {
+  height: auto;
+  width: 50%;
+  margin: 6%;
+  border-radius: 16px;
+  font-size: 21px;
+
+}
+
+.form_register input{
+
+     font-size: 20px;
+
+}
+.form_title_register{
+ color: #1f77cc;
+   font-size: 20px;
 }
 }
   
@@ -372,25 +436,9 @@ margin-top: 0%;
 .textfooter {
    font-size: 3px;
 }
-  
-}
-@media screen and (min-width: 769px) and (max-width: 1024px) { 
 
-  .nav{
-  background-color: #ff7676;  
-  width: 70%; /* Cambiar este valor según el porcentaje deseado del ancho */
-
-  }
-
-      .footer{
-  padding: 5px;
-}
-.textfooter {
-   font-size: 10px;
-}
-  
 }
-@media screen and (min-width: 1025px) and (max-width: 1200px) { 
+  @media screen and (min-width: 1025px) and (max-width: 1200px) { 
 
   .nav{
 
@@ -402,14 +450,22 @@ margin-top: 0%;
   .nav a {
   font-size: 20px;
     }
-  }
     .footer{
   padding: 5px;
 }
 .textfooter {
    font-size: 10px;
 }
-  
+.form_register{
+  width: 50%;
+  height: 40%;
+}
+.form_login{
+  width: 50%;
+  height: 40%;
+}
+
+}
 @media screen and (min-width: 1201px){ 
   .nav{
   background-color: #ff7676;  
@@ -425,6 +481,14 @@ margin-top: 0%;
 .textfooter{
    font-size: 25px;
 }
+.form_register{
+  width: 50%;
+  height: 40%;
+}
+.form_login{
+  width: 50%;
+  height: 40%;
+}
   
 
 

From e091a107edc2cb8dc54ffff959bd58f9263fdba4 Mon Sep 17 00:00:00 2001
From: MartinCaballero812 <caballeromarting08@gmail.com>
Date: Sat, 26 Aug 2023 18:22:31 -0300
Subject: [PATCH 4/6] Bug desing fixed

---
 client/src/styles/general.module.css | 24 +-----------------------
 1 file changed, 1 insertion(+), 23 deletions(-)

diff --git a/client/src/styles/general.module.css b/client/src/styles/general.module.css
index 2b35ae2..9052776 100644
--- a/client/src/styles/general.module.css
+++ b/client/src/styles/general.module.css
@@ -466,29 +466,7 @@ margin-top: 0%;
 }
 
 }
-@media screen and (min-width: 1201px){ 
-  .nav{
-  background-color: #ff7676;  
-    border-bottom-left-radius: 80px;
-  }
-  .nav a {
-  font-size: 15px;
-    }
-  }
-  .footer{
-  padding: 10px;
-}
-.textfooter{
-   font-size: 25px;
-}
-.form_register{
-  width: 50%;
-  height: 40%;
-}
-.form_login{
-  width: 50%;
-  height: 40%;
-}
+
   
 
 

From adade8ffdb881643bfa9fdf853cdfb62d9617a6c Mon Sep 17 00:00:00 2001
From: MartinCaballero812 <caballeromarting08@gmail.com>
Date: Sun, 27 Aug 2023 17:40:03 -0300
Subject: [PATCH 5/6] Resolution fixed

---
 client/package-lock.json             | 60 ++++++++++++++++++++++++++++
 client/src/styles/general.module.css |  7 ++++
 2 files changed, 67 insertions(+)

diff --git a/client/package-lock.json b/client/package-lock.json
index 97166bf..48b8d55 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -3370,6 +3370,66 @@
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
+    },
+    "node_modules/@next/swc-android-arm-eabi": {
+      "version": "13.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.2.4.tgz",
+      "integrity": "sha512-DWlalTSkLjDU11MY11jg17O1gGQzpRccM9Oes2yTqj2DpHndajrXHGxj9HGtJ+idq2k7ImUdJVWS2h2l/EDJOw==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-android-arm64": {
+      "version": "13.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.2.4.tgz",
+      "integrity": "sha512-sRavmUImUCf332Gy+PjIfLkMhiRX1Ez4SI+3vFDRs1N5eXp+uNzjFUK/oLMMOzk6KFSkbiK/3Wt8+dHQR/flNg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-freebsd-x64": {
+      "version": "13.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.2.4.tgz",
+      "integrity": "sha512-kkbzKVZGPaXRBPisoAQkh3xh22r+TD+5HwoC5bOkALraJ0dsOQgSMAvzMXKsN3tMzJUPS0tjtRf1cTzrQ0I5vQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm-gnueabihf": {
+      "version": "13.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.2.4.tgz",
+      "integrity": "sha512-7qA1++UY0fjprqtjBZaOA6cas/7GekpjVsZn/0uHvquuITFCdKGFCsKNBx3S0Rpxmx6WYo0GcmhNRM9ru08BGg==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
     }
   }
 }
diff --git a/client/src/styles/general.module.css b/client/src/styles/general.module.css
index 9052776..12c117b 100644
--- a/client/src/styles/general.module.css
+++ b/client/src/styles/general.module.css
@@ -436,7 +436,14 @@ margin-top: 0%;
 .textfooter {
    font-size: 3px;
 }
+.form_login{
+  width: 100%;
+  height: 40%;
+  margin: 9%;
 
+
+
+}
 }
   @media screen and (min-width: 1025px) and (max-width: 1200px) { 
 

From 2c077d07a15bad2d807ef87f44640970062a4077 Mon Sep 17 00:00:00 2001
From: MartinCaballero812 <caballeromarting08@gmail.com>
Date: Sun, 27 Aug 2023 17:58:31 -0300
Subject: [PATCH 6/6] Resolution fixed

---
 client/src/styles/general.module.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/src/styles/general.module.css b/client/src/styles/general.module.css
index 12c117b..0fea1a4 100644
--- a/client/src/styles/general.module.css
+++ b/client/src/styles/general.module.css
@@ -441,8 +441,11 @@ margin-top: 0%;
   height: 40%;
   margin: 9%;
 
-
-
+}
+.form_register{
+  width: 100%;
+  height: 40%;
+  margin: 15%;
 }
 }
   @media screen and (min-width: 1025px) and (max-width: 1200px) {