nuevos cambios

frontend/package-lock.json

@@ -21,6 +21,7 @@
         "eslint-plugin-react": "^7.34.1",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.6",
+        "react-router-dom": "^6.23.1",
         "vite": "^5.2.0"
       }
     },
@@ -929,6 +930,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
+      "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.14.3",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.3.tgz",
@@ -3668,6 +3678,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.23.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz",
+      "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==",
+      "dev": true,
+      "dependencies": {
+        "@remix-run/router": "1.16.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.23.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz",
+      "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==",
+      "dev": true,
+      "dependencies": {
+        "@remix-run/router": "1.16.1",
+        "react-router": "6.23.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",

frontend/package.json

@@ -23,6 +23,7 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "react-router-dom": "^6.23.1",
     "vite": "^5.2.0"
   }
 }

frontend/src/Comprobante.jsx

@@ -0,0 +1,12 @@
+import React, { useState } from 'react';
+
+function Comprobante() {
+
+  return (
+    <>
+    
+    </>
+  );
+}
+
+export default Comprobante;

frontend/src/Encabezado.css

@@ -1,43 +1,41 @@
-.contenedor {
+header.headerOE{
-    max-height: none;
+  display: inline;
-    width: 100%;
+  width: 100%;
+  height: 18%;
+  text-align: center;
 }
-
+div.grupo1{
-.banner {
+  background-color: #444941;
-  background-color: #333;
-  color: white;
-  padding: 2px;
 }
-
+#logo{
-.banner h1 {
+  width: 70px;
-  font-size: 35px;
+  height:min-content;
-  margin-left: 2%;
-  pointer-events: none; /* Evita que el cursor se posicione sobre el título */
 }
-
+div.grupo2{
-.banner nav {
+  background-color: #444941;
-  display: flex;
+  margin-top: 20px;
-  justify-content: space-between; /* Alinea los elementos al principio y al final */
+  margin-left: 30px;
-  align-items: center; /* Alinea verticalmente los elementos */
+  padding: 15px;
+  text-align: left;
+  font-size: x-large;
 }
-
+li.tit{
-.opciones {
+  background-color: #444941;
-  list-style: none;
+  color: #ffffff;
-  padding: 0;
+  font-size: xx-large;
-  margin: 0;
+  font-weight: bold;
 }
-
+nav ul {
-.opciones li {
+  list-style-type: none;
-  display: inline-block;
+  background-color:#444941;  
-  margin-left: 10px; /* Espacio entre elementos */
+  
-  margin-right: 30px; /* Espacio entre elementos */
 }
-
+nav ul li {
-.opciones li a {
+  display: inline;
-  color: white;
+  margin-right: 80px;
-  text-decoration: none; /* Quita el punto de los enlaces */
+  
 }
-
+li a{
-.opciones li a:hover {
+  background-color: #D5EEBB;
-  text-decoration: underline; /* Subraya los enlaces al pasar el mouse sobre ellos */
+  color:rgb(172, 104, 9);
 }

frontend/src/Encabezado.jsx

@@ -3,7 +3,23 @@ import './Encabezado.css';
 
 function Encabezado(){
     return (
-    <div className="contenedor">
+      <header className='headerOE'>
+                <nav>
+                    <ul>
+                        <div className='grupo1'>
+                        <img id='logo' src="logo.png" alt='Imagen'/>
+                        <li className='tit'>Universidad Filadelfia de México</li>
+                        </div>
+                        <div className='grupo2'>
+                        <li><a href="">Nosotros</a></li>
+                        <li><a href="">Visión</a></li>
+                        <li><a href="">Misión</a></li>
+                        <li><a href="">Instalaciones</a></li>
+                        </div>
+                    </ul>
+                </nav>
+        </header>
+    /*<div className="contenedor">
       <div className="banner">
         <nav>
           <h1>Universidad de Huacoxla</h1>
@@ -17,7 +33,8 @@ function Encabezado(){
           </ul>
         </nav>
        </div>
-      </div>
+      </div>*/
+      
     );
 }
 

frontend/src/Licenciatura.css

@@ -0,0 +1,65 @@
+#bodyLicenciatura{
+    margin-top: 11%;
+}
+#h1Programas{
+    margin-top: 0%;
+    padding-left: 0%;
+    text-align: center;
+}
+#opciones{
+    margin-left: 18%;
+    margin-top: 2%;
+}
+#informacion{
+    margin-left: 5%;
+    margin-right: 5%;
+}
+
+#labelSelect{
+    margin-right: 10px;
+    font-size: x-large;
+    color: #55574f;
+    font-weight: bold;
+}
+
+#area{
+    margin-right: 8%;
+    font-size: larger;
+    text-transform: capitalize;
+}
+#licenciaturas{
+    font-size: larger;
+    text-transform: capitalize;
+}
+#subtitulo{
+    font-size: x-large;
+    font-weight: bold;
+}
+#campusDisponibles{
+    font-weight: 100;
+}
+#campus1{
+    margin-right: 3%;
+}
+#grupoP{
+    margin-bottom: 2%;
+}
+#subtituloIngreso{
+    font-size: 20px;
+}
+#subtituloTexto{
+    font-size: large;
+    font-weight: 100;
+}
+.btnElegirCarrera{
+    display: flex;
+    justify-content: center;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    font-weight: bold;
+    font-size: x-large;
+    color: #D5EEBB;
+    background-color: #474941;
+}
+.btnElegirCarrera:hover{
+    background-color: #55574f;
+}

frontend/src/Licenciatura.jsx

@@ -0,0 +1,238 @@
+import React, { useState } from "react";
+import './Licenciatura.css';
+
+
+const Licenciatura = () => {
+    const [area, setArea] = useState("Tecnica");
+    const [licenciatura, setLicenciatura] = useState("Mátematicas");
+
+
+    const licenciaturas = {
+        "Tecnica": ["Mátematicas", "Física", "Arquitectura"],
+        "Economica": [ "Contabilidad", "Economía","Administración"],
+        "Humanidades": ["Historia", "Antropología", "Pedagogía"],
+        "Biologicas": ["Biología", "Química", "Agronomía"]
+    };
+
+    const infoLicenciaturas = {
+        "Mátematicas": {
+            "campusDisponibles": <div id="campusDisponibles"><span id="campus1">Xalapa</span><span>Orizaba</span></div>,
+            "descripcion": "La Licenciatura en Matemáticas tiene como misión preservar, desarrollar y difundir la cultura matemática en beneficio de la sociedad. Se enfoca en la formación integral de profesionales altamente calificados en matemáticas y con sólidos principios éticos, capaces de integrarse en equipos interdisciplinarios para aplicar su conocimiento matemático en diversas áreas.",
+            "conocimientos": "Aritmética, álgebra, trogonometría, cálculo diferencial e integral, geometría euclidiana, geometría analítica.",
+            "habilidades": "Razonamiento abstracto, concentración, generalizar y particularizar.",
+            "actitudes":"Perseverancia, disciplina, interés científico y capacidad de trabajar en equipo.",
+            "egreso": "El egresado de la Licenciatura en Matemáticas adquiere una sólida formación profesional que le capacita para comunicar ideas matemáticas con claridad y precisión, enseñar matemáticas en diferentes niveles educativos, iniciar investigaciones en su campo, apoyar en el diseño y evaluación de cursos, aplicar conocimientos para resolver problemas en diversos campos como ciencia, tecnología, economía y sociedad, trabajar en equipos interdisciplinarios, interpretar fenómenos naturales de manera crítica y creativa, ser autodidacta, y mantener una actitud de superación constante y actualización.",
+            "mision": "La Facultad de Matemáticas se enfoca en desarrollar, difundir y preservar la cultura matemática, formando profesionales altamente académicos, con un enfoque humanista y comprometidos con la sustentabilidad.",
+            "vision": "La Facultad de Matemáticas se destaca con una planta docente que genera una producción científica influyente y certificada por organismos externos, lo que garantiza la calidad de sus programas educativos. Este entorno propicia el desarrollo integral de los estudiantes, promoviendo valores de sustentabilidad y respeto a los derechos humanos.",
+            "objetivo": "Formar profesionistas de las matemáticas que destaquen por su constancia, creatividad, responsabilidad, compromiso social y aprendizaje de por vida, y como consecuencia participen de manera multi e interdisciplinaria en la docencia, en la generación y aplicación del conocimiento matemático en beneficio de la sociedad."
+        },
+        "Física":{
+            "campusDisponibles": <div id="campusDisponibles"><span id="campus1">Xalapa</span><span>Orizaba</span></div>,
+            "descripcion": "El profesional en Física tiene un amplio espectro de funciones, desde investigación hasta aplicaciones prácticas en industrias y servicios como PEMEX o CFE. El programa educativo consta de 422 créditos y ofrece dos áreas terminales: investigación, para quienes buscan posgrados, y aplicada, que prepara para docencia, análisis de datos o cómputo científico. El dominio del inglés es necesario para la acreditación.",
+            "conocimientos": "álgebra, trigonometría, cálculo diferencial e integral, geometría analítica, y cursos básicos de mecánica, electromagnetismo y termodinámica.",
+            "habilidades": "Habilidad para realizar abstracciones, el uso del lenguaje matemático y asimilar conceptos y conocimientos nuevos.",
+            "actitudes": "Disciplina, disposición para trabajar en equipo y para el trabajo autodidacta.",
+            "egreso": "El egresado de la Licenciatura en Física estará capacitado para trabajar en una amplia gama de sectores, incluyendo gobierno, educación, investigación, industria y empresas, tanto a nivel nacional como internacional. Además, estará preparado para realizar estudios de posgrado y resolver problemas utilizando modelos matemáticos y métodos computacionales. Sus habilidades le permitirán identificar y proponer soluciones a desafíos en su campo, tanto en entornos laborales como sociales a nivel local y global.",
+            "mision": "La Facultad de Física se enfoca en el desarrollo y difusión de las ciencias físicas mediante la formación de recursos humanos y la investigación de alta calidad. Los estudiantes reciben una formación integral que les proporciona habilidades en liderazgo, manejo de herramientas, programación, pensamiento abstracto, docencia y realización de experimentos rigurosos. Esto les permite ingresar al sector productivo o continuar con estudios de posgrado para involucrarse en investigación, innovación y desarrollo tecnológico en el ámbito educativo o industrial.",
+            "vision": "La Facultad de Física busca ser un referente en el sureste mexicano, reconocida por la excelencia académica de sus programas educativos científica y socialmente relevantes, la calidad de sus egresados, la enseñanza y la investigación básica y aplicada de vanguardia con un impacto significativo en la sociedad y la región.",
+            "objetivo": "El objetivo general de la facultad es formar profesionales en Física con competencias para abordar eficazmente los desafíos planteados por la ciencia, la academia, la sociedad, la industria y la empresa, a nivel local y global. Se promueve una actitud crítica, humanista y solidaria, junto con un compromiso ambiental, considerando la complejidad de la realidad. A través de la enseñanza, investigación, difusión cultural y servicios comunitarios, se busca contribuir a una sociedad más productiva, justa y segura, con responsabilidad social y transparencia."
+        },
+        "Arquitectura":{ 
+            "campusDisponibles": <div id="campusDisponibles"><span id="campus1">Xalapa</span><span>Orizaba</span></div>,
+            "descripcion": "El Programa de Arquitectura, ofrece una educación superior de calidad reconocida nacional e internacionalmente, que brinda a los futuros arquitectos la adquisición de herramientas y actitudes necesarias para el desarrollo permanente del conocimiento de la disciplina, que le permitan como egresado dar solución a los problemas y demandas de la sociedad. Dicho plan posee un total de 505 créditos de los que el alumno debe acreditar 415 para obtener el grado, lo anterior en un tiempo estándar de 9 semestres.",
+            "conocimientos": "Razonamiento aritmético, algebraico, estadístico y probabilístico, geométrico y trigonométrico.",
+            "habilidades": "Expresión gráfica (dibujo técnico y mano alzada), básicos de cómputo, conocimientos sobre propiedades de los materiales, óptica.",
+            "actitudes": "Constancia, disciplina, actitud crítica, capacidad reflexiva, actitud proactiva para encontrar soluciones sostenibles, actitud de atención al cuerpo y cuidado de la salud, apreciación del arte, convivencia con inclusión e igualdad, colaboración y trabajo en equipo.",
+            "egreso":"El egresado en Arquitectura debe ser un individuo integral, consciente y comprometido con su entorno, cuyo trabajo profesional se fundamenta en una relación equilibrada entre sociedad y territorio. Debe ser competente e innovador, capaz de resolver de manera creativa los desafíos estéticos y técnicos de los espacios arquitectónicos y urbanos de forma sostenible. Para ello, debe utilizar tecnologías relevantes y generar y gestionar soluciones espaciales, sociales y ambientalmente responsables.",
+            "mision":"La Facultad de Arquitectura se centra en la docencia, investigación, vinculación y gestión, con énfasis en proyectos arquitectónicos, edificación, humanismo y urbanismo, orientados a abordar problemas contemporáneos. Su formación va desde licenciatura hasta doctorado, destacando la sostenibilidad, humanismo, tecnología e innovación, con un enfoque en la pertinencia, equidad y ética. Mantiene colaboraciones estrechas con sectores gubernamentales, sociales, productivos y educativos, promoviendo el desarrollo sustentable para una sociedad inclusiva, humana, justa y segura.",
+            "vision":"La Facultad de Arquitectura lidera la formación de arquitectos con programas educativos de alta calidad y enfoque en la mejora continua. Ofrece programas a nivel licenciatura, especialización, maestría y doctorado, contribuyendo al desarrollo sustentable mediante la investigación y vinculación con diversos sectores. Su objetivo es formar egresados capaces de abordar problemas sociales actuales, promoviendo la inclusión y la sustentabilidad en el diseño de espacios habitables.",
+            "objetivo": "El objetivo es formar arquitectos de manera integral, con habilidades técnicas y sociales para diseñar soluciones arquitectónicas sostenibles que aborden las necesidades del entorno cultural, social y económico a nivel global. Se promueve una actitud comprometida y responsable en la práctica profesional, así como la búsqueda continua de innovación tecnológica para mejorar la calidad de vida de los usuarios."
+        },
+        "Contabilidad":{
+            "campusDisponibles": <div id="campusDisponibles"><span id="campus1">Xalapa</span><span>Orizaba</span></div>,
+            "descripcion":"La contabilidad es crucial para el desarrollo socioeconómico al promover la creación de empresas y atraer inversiones, asegurando un funcionamiento económico estable y estimulando la creación de empleo. Proporciona información financiera esencial para la toma de decisiones, satisfaciendo las necesidades de entidades transnacionales y participantes en los mercados globales.",
+            "conocimientos":"Conocimientos básicos de las ciencias económicas y administrativas.",
+            "habilidades":"Planeación y Organización de trabajo, creatividad, razonamiento lógico, razonamiento matemático, liderazgo, negociación, trabajo en equipo.",
+            "actitudes":"Adaptación al cambio, analizar y sintetizar información, aprender investigar actitudes, seguridad, superación, iniciativa emprendedora, respeto, compromiso, responsabilidad, honestidad, integridad",
+            "egreso":"El egresado de la Licenciatura en Contaduría será un profesional ético y responsable, con sólidos conocimientos en contabilidad financiera, administrativa, auditoría, finanzas y fiscalidad. Estará preparado para enfrentar los desafíos organizacionales en un contexto global y podrá actuar como agente de cambio y líder en su campo de estudio.",
+            "mision":"El programa de Licenciatura en Contaduría forma profesionales comprometidos, con habilidades críticas y creativas, adaptados a los avances tecnológicos y respetuosos de la biodiversidad y multiculturalidad. Su objetivo es impactar positivamente en entidades económicas y la sociedad a nivel local, regional, nacional e internacional, buscando la excelencia.",
+            "vision":"Ser un programa educativo de excelencia, innovador, flexible, abierto al cambio en la formación integral y en la generación y aplicación del conocimiento; reconocido como formador de profesionales líderes, con un alto compromiso social y respeto a la sustentabilidad.",
+            "objetivo":"La formación en Contaduría busca crear profesionales competentes en sistemas de información financiera, administrativa y fiscal, con valores éticos, humanísticos y espíritu emprendedor. Se enfoca en la generación de información útil para micro, pequeñas y medianas empresas, reduciendo el riesgo de fracaso y promoviendo el desarrollo sustentable, sin descuidar su contribución a grandes empresas y otros sectores."
+        },
+        "Economía":{
+            "campusDisponibles": <div id="campusDisponibles"><span id="campus1">Xalapa</span><span>Orizaba</span></div>,
+            "descripcion":"El Programa Educativo de la Licenciatura en Economía está integrado por saberes axiológicos fundamentales y complementarios con los saberes teóricos y heurísticos que deben prevalecer en la formación y desempeño profesional.",
+            "conocimientos":"Manejo apropiado del lenguaje oral y escrito.",
+            "habilidades":"Facilidad para generar y procesar información, manejo de herramientas técnicas y cuantitativas para diagnosticar y ofrecer soluciones a los problemas económicos.",
+            "actitudes":"Vocación para indagar las causas y evolución de la problemática económica de la sociedad.",
+            "egreso":"El programa se enfoca en comprender la realidad socioeconómica a nivel local, regional, nacional e internacional, así como las interacciones entre el Estado, la economía y la sociedad, mediante un enfoque teórico-metodológico. Se promueve la investigación y análisis socioeconómico para entender el impacto de las políticas públicas en aspectos como el empleo, la inflación y la distribución del ingreso, proponiendo soluciones para mejorar la gestión institucional y reducir la pobreza.",
+            "mision":"Formar economistas con un acervo teórico, metodológico e instrumental, que les permita insertarse de manera efectiva al mercado laboral, con aptitudes para analizar los problemas económicos y proponer soluciones en el ámbito local, regional y nacional, con sentido ético y compromiso con la equidad y la justicia social.",
+            "vision":"Ser un programa educativo líder en México, en la generación, transmisión y aplicación del conocimiento de la ciencia económica, con reconocimiento nacional e internacional, certificado en calidad por las instancias correspondientes.",
+            "objetivo":"Formar economistas habilitados para entender su entorno económico y social, capacitados para contribuir a la atención de necesidades de la realidad actual."
+        },
+        "Administración":{
+            "campusDisponibles": <div id="campusDisponibles"><span id="campus1">Xalapa</span><span>Orizaba</span></div>,
+            "descripcion":"La administración integra conocimientos sobre la conducta humana y requiere habilidades multidisciplinarias para resolver problemas organizacionales. Los administradores deben dominar técnicas de diagnóstico y tomar decisiones eficaces para alcanzar objetivos. Por tanto, necesitan conocimientos en psicología, sociología, contabilidad, finanzas, informática, matemáticas, estadísticas, economía, derecho y ecología.",
+            "conocimientos":"Conocimientos relacionados a la cultura general, manejo de paquetería para oficina, manejo del idioma inglés que le permita establecer comunicación verbal y escrita.",
+            "habilidades":"Habilidades del pensamiento y lectura y redacción, razonamiento lógico y matemático.",
+            "actitudes":"Disciplina y trabajo en equipo.",
+            "egreso":"El egresado de la Licenciatura en Administración contará con una formación sólida en administración, lo que le capacitará para abordar los desafíos organizacionales y ofrecer servicios de calidad. Será capaz de tomar decisiones eficientes y aplicar el proceso administrativo en diversas áreas funcionales, contribuyendo a la competitividad y responsabilidad social de las organizaciones en contextos multiculturales.",
+            "mision":"Formar profesionales en ciencias administrativas que puedan abordar las necesidades sociales a través de la aplicación y difusión de conocimientos. Se busca que estos profesionales resuelvan problemas en diversas áreas organizacionales, promoviendo la competitividad y contribuyendo al logro de objetivos institucionales con calidad, pertinencia, responsabilidad y compromiso social.",
+            "vision":"La entidad busca destacar a nivel nacional e internacional con estándares de excelencia académica y de gestión, centrándose en la formación integral de profesionales con relevancia social. Sus programas académicos integran la docencia, investigación, creación y difusión cultural, en consonancia con las necesidades de desarrollo sostenible a nivel local, regional y nacional.",
+            "objetivo":"El programa de administración forma profesionales para abordar desafíos sociales, promoviendo una cultura de calidad y el desarrollo económico y social. Se enfoca en desarrollar habilidades de liderazgo, análisis y toma de decisiones en condiciones inciertas. También fomenta la aplicación de conocimientos estratégicos para mantener la competitividad y comprender el comportamiento humano en las organizaciones."
+        },
+        "Historia":{
+            "campusDisponibles": <div id="campusDisponibles"><span id="campus1">Xalapa</span><span>Orizaba</span></div>,
+            "descripcion":"Los docentes de la Facultad, mayormente con doctorado en Historia, fomentan el pensamiento histórico en los estudiantes y les proveen herramientas para comprender y difundir el conocimiento histórico. Promueven el análisis crítico de los procesos históricos y animan a los alumnos a reflexionar sobre su historia personal y social.",
+            "conocimientos":"Conocer y analizar los fenómenos socioeconómicos, políticos y culturales de México y el mundo en el pasado y el presente.",
+            "habilidades":"Razonamiento verbal y abstracto e interés por participar en la solución de los problemas socioeconómicos y políticos que afectan a la sociedad.",
+            "actitudes":"Aptitudes que le permitan adentrarse en la problemática disciplinar y le posibilite la inserción en el mercado laboral en las mejores condiciones posibles.",
+            "egreso":"El programa busca desarrollar habilidades de investigación en ciencias sociales, ofrecer soluciones basadas en análisis históricos a problemas contemporáneos, formar docentes, contribuir a la producción mediática, gestionar archivos y patrimonio histórico, y proporcionar asesoramiento a instituciones públicas y privadas sobre su contexto histórico y social.",
+            "mision":"El programa busca formar profesionales en Historia interesados en analizar críticamente los hechos y procesos históricos, ofreciendo explicaciones pertinentes que contribuyan al debate social. Se promueve el estudio crítico, la reflexión y la participación social para comprender el pasado y su relevancia en el presente.",
+            "vision":"La Facultad de Historia se compromete a ser una Institución de Educación Superior que contribuya a la formación de un espacio de reflexión y producción del conocimiento histórico. Su equipo de profesores integrales y responsables busca fortalecer una identidad disciplinar y universitaria socialmente responsable, crítica, incluyente e integradora.",
+            "objetivo":"La Facultad de Historia tiene como objetivo formar académicos y profesionales capaces de contribuir al conocimiento y desarrollo de la historia regional y nacional, así como a la reflexión sobre la realidad sociocultural del país. Busca que sus egresados sean competentes, comprometidos con el aprendizaje continuo y responsables socialmente, para abordar los problemas sociales y contribuir al desarrollo del estado y del país."
+        },
+        "Antropología":{
+            "campusDisponibles": <div id="campusDisponibles"><span id="campus1">Xalapa</span><span>Orizaba</span></div>,
+            "descripcion":"La Carrera de Antropología Histórica tiene el propósito de proporcionar una formación Profesionales sobre el patrimonio intangible como la memoria colectiva y la vida cotidiana y sus relaciones con el patrimonio cultural tangible.",
+            "conocimientos":"Conocimientos en el área de humanidades o artes y  conocimiento general de los problemas sociales mas recurrentes en el mundo y en el país.",
+            "habilidades":"Habilidades para los trabajadores prácticos de tipo instrumental.",
+            "actitudes":"Dominio de la comunicación oral y escrita para la lectura, comprensión y exposición de textos en lengua castellana.",
+            "egreso":"El perfil de egreso se define por la habilidad de diseñar y participar en proyectos interdisciplinarios de investigación y promoción cultural, con un énfasis en el patrimonio cultural. El egresado deberá poseer competencias interpretativas para su inserción profesional y social, y fomentar valores de respeto y tolerancia para el trabajo comunitario.",
+            "mision":"El programa forma profesionales con pensamiento crítico y ético para abordar problemáticas socio-culturales, promoviendo el desarrollo sostenible y el respeto a la diversidad cultural. Se integran a proyectos de investigación y vinculación para adquirir habilidades en docencia, investigación y gestión en campos antropológicos.",
+            "vision":"La Facultad de Antropología destaca a nivel nacional e internacional por su calidad educativa y su enfoque en la investigación y la vinculación social. Sus egresados tienen oportunidades para trabajar en diversos ámbitos o continuar sus estudios en programas de posgrado.",
+            "objetivo":"El programa promueve la valoración del patrimonio histórico-cultural mediante el análisis de entornos sociales y culturales, el desarrollo de habilidades comunicativas para el trabajo comunitario y el dominio de técnicas de conservación y difusión del patrimonio."
+        },
+        "Pedagogía":{
+            "campusDisponibles": <div id="campusDisponibles"><span id="campus1">Xalapa</span><span>Orizaba</span></div>,
+            "descripcion":"Otorga prioridad a la formación integral del estudiante universitario, convencida de que a través de sus egresados es como podrá 113 contribuir eficazmente a la transformación de la sociedad. Así su empeño se traduce en la realización plena de la persona humana, mediante la atención cuidadosa de todas sus dimensiones para orientar sus intenciones y tareas hacia el desarrollo de lo intelectual, humano, social y profesional.",
+            "conocimientos":"Conocimientos básicos del área social y humanista, mostrando interés hacia los problemas educativos y del entorno social.",
+            "habilidades":"Habilidad para las relaciones interpersonales, manejo básico de herramientas tecnológicas que le permitan acceder anuevas formas de aprendizaje y comunicación.",
+            "actitudes":"Uso de elementos lingüísticos que le permitan comunicarse de manera oral y escrita.",
+            "egreso":"El estudiante investiga y utiliza información de diversas fuentes, utilizando tecnología de manera autónoma y respetando la propiedad intelectual. Además, crea entornos de aprendizaje basados en principios pedagógicos mediante diseño, planificación, implementación y evaluación didáctica.",
+            "mision":"La formación de profesionales en educación se basa en cultivar valores humanistas y desarrollar habilidades críticas y creativas para promover el cambio a través de proyectos pedagógicos en la sociedad.",
+            "vision":"Fomentar la movilidad estudiantil nacional e internacional, integrando saberes multidisciplinarios y valores adquiridos durante la formación, para influir positivamente en el entorno social y mejorar la calidad de vida mediante innovación, tecnología, proyectos sustentables y colaboración comunitaria, con ética y responsabilidad social.",
+            "objetivo":"El objetivo es formar educadores con una perspectiva integral, crítica, reflexiva, colaborativa e innovadora, capaces de comprender, intervenir y valorar los procesos educativos en todas sus dimensiones, con el fin de promover el desarrollo continuo del país."
+        },
+        "Biología":{
+            "campusDisponibles": <div id="campusDisponibles"><span id="campus1">Xalapa</span><span>Orizaba</span></div>,
+            "descripcion":"El programa educa para enfrentar desafíos en conservación de biodiversidad, seguridad alimentaria, salud, gestión de residuos y energía renovable.",
+            "conocimientos":"Ciencias naturales y exactas así como de antropología, sociología y ética.",
+            "habilidades":"Capacidad de análisis y de síntesis, capacidad de observación y creatividad, agudeza perceptiva y destreza manual",
+            "actitudes":"Disciplina para el estudio, disponibilidad para el trabajo en equipo en actividades propias de la carrera, entre ellas, prácticas de laboratorio y de campo.",
+            "egreso":"Administra programas de conservación con mínimo impacto, aplica biología para salud y ambiente, propone soluciones bajo normativa ambiental.",
+            "mision":"Formar profesionales en el conocimiento, conservación y uso de la biodiversidad para coadyuvar al desarrollo sostenible a través de la aplicación de competencias integrales.",
+            "vision":"Promover la difusión del conocimiento sobre el manejo sostenible de la biodiversidad, especialmente en Veracruz, mediante innovación educativa, tecnologías de información, investigación y pensamiento complejo para satisfacer las necesidades de formación y actualización de los egresados.",
+            "objetivo":"Formar profesionales en biología con compromiso social y capacidad para abordar problemas ambientales como contaminación, pérdida de biodiversidad y cambio climático."
+        },
+        "Química":{
+            "campusDisponibles": <div id="campusDisponibles"><span id="campus1">Xalapa</span><span>Orizaba</span></div>,
+            "descripcion":"El programa de ingeniería química está reconocido y acreditado por formar profesionales competentes y responsables, tanto en licenciatura como en posgrado. Se enfoca en valores de colaboración y éxito académico del estudiante, según su Modelo Educativo Integral y Flexible.",
+            "conocimientos":"Ciencias físicas, matemáticas y químicas, razonamiento para el entendimiento de las transformaciones fisicoquímicas.",
+            "habilidades":"Habilidad para el estudio de técnicas propias de la ingeniería, tales como, estadística, computación, ingeniería económica, comunicación gráfica, comprensión y redacción",
+            "actitudes":"Matemática y razonamiento abstracto, trabajo en equipo",
+            "egreso":"La Universidad prepara ingenieros químicos con sólidos conocimientos y habilidades para diagnosticar, controlar procesos químicos, diseñar instalaciones industriales, gestionar tecnologías ambientalmente responsables y desarrollar soluciones innovadoras para desafíos sociales y económicos.",
+            "mision": "La universidad forma líderes en Ingeniería Química, Ambiental y de Alimentos, y programas relacionados, mediante la enseñanza, investigación, conexión con la comunidad y calidad ética. Opera en instalaciones adecuadas, con responsabilidad social, transparencia y compromiso con el desarrollo sostenible, manteniendo su prestigio institucional.",
+            "vision": "La institución es reconocida por su calidad en la formación de profesionales en ingeniería química, ambiental y de alimentos, a nivel nacional e internacional, con responsabilidad social, innovación y enfoque en el desarrollo sustentable.",
+            "objetivo": "Formar profesionales integrales en Ingeniería Química, comprometidos con el aprendizaje continuo y la responsabilidad social, capaces de contribuir con soluciones innovadoras a problemas sociales en su campo de competencia."
+        },
+        "Agronomía":{
+            "campusDisponibles": <div id="campusDisponibles"><span id="campus1">Xalapa</span><span>Orizaba</span></div>,
+            "descripcion":"El programa de Ingeniero Agrónomo busca abordar los desafíos de la producción y productividad agroindustrial, fomentando el conocimiento teórico y tecnológico. Su objetivo es formar profesionales con una visión integral y crítica, capaces de interpretar y transformar la realidad agropecuaria hacia una agricultura sustentable y productiva, en beneficio de los productores y los recursos naturales.",
+            "conocimientos":"Capacidad de razonamiento abstracto, numérico, espacial y verbal",
+            "habilidades":"Lectura, análisis y redacción de documentos. Dominio en la utilización de herramientas tecnológicas",
+            "actitudes":"Vocación, iniciativa propia, alto sentido de organización y adaptabilidad a diferentes medios sociales.",
+            "egreso":"El ingeniero agrónomo egresado será competente en abordar la problemática de producción, interpretar y divulgar conocimientos agropecuarios, evaluar el uso de recursos naturales, aplicar técnicas para mejorar la producción de especies vegetales y animales, practicar una agricultura sostenible, preservar la identidad cultural y promover el desarrollo comunitario en el sector rural.",
+            "mision": "Formar profesionales con sólidos conocimientos científicos, técnicos y humanísticos, comprometidos con el desarrollo sustentable de los recursos naturales del país y capacitados para analizar y resolver los desafíos en la producción agropecuaria y forestal a través de la generación y aplicación del conocimiento.",
+            "vision": "La meta es ser una institución líder, reconocida por su excelencia académica y comprometida con el desarrollo sostenible del país. A través de sus funciones esenciales, busca ser un referente clave para la formulación de políticas agropecuarias, forestales y educativas tanto en el ámbito público como en el privado.",
+            "objetivo":"Formar ingenieros agrónomos conscientes y responsables para abordar los desafíos de la producción y productividad agroindustrial en México. Desarrollar habilidades tecnológicas y promover valores éticos y sociales, comprometidos con el sector rural y la sociedad en general."
+        }
+    };
+        
+
+    const handleAreaChange = (event) => {
+        setArea(event.target.value);
+        setLicenciatura(licenciaturas[event.target.value][0]);
+    };
+    const handleLicenciaturaChange = (event) => {
+        setLicenciatura(event.target.value);
+    };
+
+    return (
+        <>
+            <body id="bodyLicenciatura">
+                <h1 id="h1Programas">Programas Educativos</h1>
+                <div id="opciones">
+                    <label id="labelSelect">Seleccionar área:</label>
+                    <select id="area" name="area" onChange={handleAreaChange}>
+                    <option value="Tecnica">Técnica</option>
+                    <option value="Economica">Economica-Administrativa</option>
+                    <option value="Humanidades">Humanidades</option>
+                    <option value="Biologicas">Biológicas y Agropecuarias</option>
+                </select>
+                <label id="labelSelect">Seleccionar carrera:</label>
+                <select id="licenciaturas" name="licenciaturas"   onChange={handleLicenciaturaChange}>
+                    {licenciaturas[area].map((licenciatura) => (
+                        <option key={licenciatura} value={licenciatura}>
+                            {licenciatura}
+                        </option>
+                    ))}
+                </select>
+                
+                </div>
+                
+                <div id="informacion">
+                    <p id="grupoP">
+                      <span id="subtitulo">Campus:
+                        {infoLicenciaturas[licenciatura].campusDisponibles}
+                      </span>
+                    </p>
+                    <p id="grupoP">
+                        <span id="subtitulo">Descripción:</span>
+                        <p id="subtituloTexto">
+                            {infoLicenciaturas[licenciatura].descripcion}
+                            </p>
+                    </p>
+                    <p id="grupoP">
+                      <span id="subtitulo">Perfil de ingreso: 
+                        <li id="subtituloIngreso">Conocimientos: <span id="subtituloTexto"> {infoLicenciaturas[licenciatura].conocimientos}</span></li>
+                        <li id="subtituloIngreso">Habilidades: <span id="subtituloTexto">{infoLicenciaturas[licenciatura].habilidades}</span></li>
+                        <li id="subtituloIngreso">Actitudes: <span id="subtituloTexto">{infoLicenciaturas[licenciatura].actitudes}</span></li>
+                      </span>
+                      
+                      
+                    </p>
+                    <p id="grupoP">
+                        <span id="subtitulo">Perfil de egreso:</span>
+                        <p id="subtituloTexto">
+                        {infoLicenciaturas[licenciatura].egreso}
+                        </p>
+                    </p>
+                    <p id="grupoP">
+                      <span id="subtitulo">Misión:</span>
+                      <p id="subtituloTexto">
+                      {infoLicenciaturas[licenciatura].mision}
+                        </p>
+                        
+                    </p>
+                    <p id="grupoP">
+                      <span id="subtitulo">Visión:</span>
+                      <p id="subtituloTexto">
+                      {infoLicenciaturas[licenciatura].vision}
+                        </p>
+                    </p>
+                    <p id="grupoP">
+                      <span id="subtitulo">Objetivo:</span>
+                      <p id="subtituloTexto">
+                      {infoLicenciaturas[licenciatura].objetivo}
+                        </p>
+                    </p>
+                        
+                </div>
+                <input type="submit" className="btnElegirCarrera" value="Elegir Licenciatura" />
+            </body>
+        </>
+    );
+};
+
+export default Licenciatura;

frontend/src/OfertaEducativa.css

@@ -1,46 +1,13 @@
 h1.tituloOE{
-    color: rgba(36, 15, 103, 0.922);
+    color: #5F7A61;
     text-transform: capitalize;
     padding-inline:initial;
-    margin-top:15%;
+    margin-top: 13%;
-}
+    margin-bottom: 4%;
-header.headerOE{
+    text-align: center;
-    display: inline;
+    font-size: 50px;
-    width: 100%;
-    height: 18%;
-}
-div.grupo1{
-    background-color: #D5EEBB;
-    padding: 0%;
-}
-#logo{
-    width: 70px;
-    height:min-content;
-}
-div.grupo2{
-    background-color: #D5EEBB;
-    margin-top: 10px;
-    margin-left: 10px;
-    text-align: left;
-}
-li.tit{
-    background-color: #D5EEBB;
-    color:rgba(36, 15, 103, 0.922);
-    font-size: 120%;
-}
-nav ul {
-    list-style-type: none;
-    background-color:#D5EEBB;  
-}
-nav ul li {
-    display: inline;
-    margin-right: 80px;
     
 }
-li a{
-    background-color: #D5EEBB;
-    color:rgb(172, 104, 9);
-}
 .container{  
     display: grid;
     grid-template-columns: auto auto auto auto;
@@ -49,12 +16,20 @@ li a{
     align-items: center; /* Ajusta el ancho del contenedor según sea necesario */ 
 }
 div.area{
-    color:rgb(27, 97, 154);
+    color: #b26705;
-    border: 1px solid rgb(27, 97, 154);
+    border: 2px solid rgba(36, 15, 103, 0.922);
     font-size: x-large;   
 }
+
+#areaTecnica{
+    margin-left: 10%;
+}
+#areaBiologica{
+    margin-right: 10%;
+}
+
 div.listaLic{
-    color: rgb(172, 104, 9);
+    color: #474941;
 }
 .footerOE{
     font-size:large;
@@ -63,9 +38,3 @@ div.listaLic{
     width: 100%; 
     font-weight: bold;
 }
-header{
-    text-align: center;
-}
-
-
-

frontend/src/OfertaEducativa.jsx

@@ -1,3 +1,4 @@
+import { Outlet } from 'react-router-dom';
 import './OfertaEducativa.css'
 
 function OfertaEducativa (){
@@ -21,7 +22,7 @@ function OfertaEducativa (){
                 </header>
                 <h1 className='tituloOE'>Oferta Educativa</h1>
                 <div className='container'>
-                    <div className='area'>
+                    <div className='area' id='areaTecnica'>
                         Área Técnica
                         <div className='listaLic'>
                             <ul>
@@ -51,7 +52,7 @@ function OfertaEducativa (){
                         </ul>
                         </div>
                     </div>
-                    <div className='area'>
+                    <div className='area' id='areaBiologica'>
                         Área de Biológicas y Agropecuarias
                         <div className='listaLic'>
                         <ul>

frontend/src/Preinscripcion.css

@@ -0,0 +1,4 @@
+#h1Pre{
+    margin-top: 11%;
+    margin-left: 10%;
+}

frontend/src/Preinscripcion.jsx

@@ -1,12 +1,19 @@
 import SubirPDF from "./SubirPDF";
 import React from 'react';
+import './Preinscripcion.css'
 
 const App = () => {
   return (
-    <div>
+    <>
-      <h1>Subir archivo PDF</h1>
+      <body>
-      <SubirPDF /> 
+      <h1 id="h1Pre">Proceso de Preinscripción</h1>
-    </div>
+      <p>Estamos más cerca de pertenecer a esta gran comunidad estudiantil.</p>
+            
+      <div>
+      <SubirPDF/>
+      </div> 
+      </body>
+    </>
   );
 };
 

frontend/src/Registro.css

@@ -1,53 +1,51 @@
-  .formulario {
+  .bodyRegistro {
     background-color: #e4e4df;
-    max-width: 100%;
+    width: 100%;
     margin: 0 auto;
     padding: 1%;
   }
 
-  .formulario h2 {
+  h1.titRegistro {
     text-align: center;
+    text-transform: capitalize;
     font-size: 40px;
+    margin-top: 11%;
     font-style: Jockey One;
     color: #000000;
     padding: 10px;
   }
 
-  .formulario h4{
+  .bodyRegistro h4{
     font-size: 20px;
+    margin-top: 1.5%;
     font-style: Jockey One;
     color: #000000;
     padding: 10px;
   }
 
 
-  .form {
+  .formRegistro {
-    margin-top: 20px; /* Espacio entre el h5 y el formulario */
+    margin-top: 20px;
     padding: 10px;
     display: flex;
-    flex-wrap: wrap; /* Permite que los elementos se envuelvan si no caben en una sola línea */
+    flex-wrap: wrap;
-  }
+    flex-direction: row;
-
+    justify-content: space-evenly; /* Permite que los elementos se envuelvan si no caben en una sola línea */
-  .form {
-    margin-top: 20px; /* Espacio entre el h5 y el formulario */
-    padding: 10px;
-    display: flex;
-    flex-wrap: wrap; /* Permitir que los elementos se envuelvan en filas */
-    justify-content: space-between; /* Distribuir los elementos en tres columnas */
   }
 
   .campo {
-    width: calc(33.33% - 10px); /* Ancho de cada campo (menos el espacio entre ellos) */
+    width: 28%; /* Ancho de cada campo (menos el espacio entre ellos) */
-    margin-bottom: 20px; /* Espacio entre campos */
+    margin-left: 0%;
+    margin-right: 0%;
+    margin-top: 1.5%;
     display: flex;
     flex-direction: column; /* Cambiar la dirección del flujo a vertical */
     overflow: hidden; /* Oculta cualquier contenido que se desborde del área del input */
 
   }
-
   .campo label {
-    padding: 2%;
+    padding-left: 2%;
-    font-weight: bold;
+    font-size: 25px;
   }
 
   h2{
@@ -64,6 +62,7 @@
   .campo input[type="password"],
   .campo input[type="date"],
   .campo input[type="email"] {
+    background-color: #D5EEBB;
     width: 100%; /* Ocupar todo el ancho disponible */
     padding: 5px;
     border-radius: 5px;
@@ -71,7 +70,7 @@
     box-sizing: border-box;
     font-size: 16px;
     transition: border-color 0.3s ease;
-    margin-top: 5px; /* Espacio entre el label y el input */
+    margin-top: 0px; /* Espacio entre el label y el input */
   }
 
 
@@ -81,19 +80,20 @@
 
   .boton {
     text-align: center;
-    background-color: #007bff;
+    background-color: #474941;
-    color: white;
+    color: #D5EEBB;
     border: none;
+    font-size: larger;
     padding: 15px 30px;
     cursor: pointer;
-    border-radius: 5px;
+    border-radius: 20px;
+    margin-top: 1%;
     font-weight: bold; /* Hace que el texto esté en negrita */
   }
 
   .boton:hover {
-    background-color: #0056b3;
+    background-color: #55574f;
   }
   header{
     text-align: center;
-  }
+  }
-

frontend/src/Registro.jsx

@@ -4,6 +4,115 @@ import './Registro.css'; // Estilo para el formulario
 function Registro(){
 
   return (
+      <body className="bodyRegistro">
+        <h1 className='titRegistro'>Registro</h1>
+        <h4>Datos Personales</h4>
+        <form className='formRegistro'>
+          <div className="campo">
+            <label htmlFor="nombre">Nombre:</label>
+            <input type="text" id="nombre" name='nombre'/>
+          </div>
+          <div className="campo">
+            <label htmlFor="apellidoPaterno">Apellido Paterno:</label>
+            <input type="text" id="apellidoPaterno" name='apellidoPaterno'/>
+          </div>
+          <div className="campo">
+            <label htmlFor="apellidoMaterno">Apellido Materno:</label>
+            <input type="text" id="apellidoMaterno" name="apellidoMaterno" />
+          </div>
+          <div className="campo">
+            <label htmlFor="sexo">Sexo:</label>
+            <select id="sexo" name="sexo">
+              <option value="Masculino">Masculino</option>
+              <option value="Femenino">Femenino</option>
+            </select>
+          </div>
+          <div className="campo">
+            <label htmlFor="nacimiento">Fecha Nacimiento:</label>
+            <input type="date" id="nacimiento" name="nacimiento"/>
+          </div>
+          <div className="campo">
+            <label htmlFor="nacionalidad">Nacionalidad:</label>
+            <input type="text" id="nacionalidad" name="nacionalidad"/>
+          </div>
+          <div className="campo">
+            <label htmlFor="ciudad">Ciudad:</label>
+            <input type="text" id="ciudad" name="ciudad"/>
+          </div>
+          <div className="campo">
+            <label htmlFor="direccion">Dirección:</label>
+            <input type="text" id="direccion" name="direccion"/>
+          </div>
+          <div className="campo">
+            <label htmlFor="codigoPostal">Código Postal:</label>
+            <input type="text" id="codigoPostal" name="codigoPostal"/>
+          </div>
+          <div className="campo" id='campoTelefono'>
+            <label htmlFor="telefono">Teléfono:</label>
+            <input type="text" id="telefono" name="telefono"/>
+          </div>
+          <div className="campo" id='campoTelefonoCasa'>
+            <label htmlFor="telefonoCasa">Teléfono Casa:</label>
+            <input type="text" id="telefonoCasa" name="telefonoCasa"/>
+          </div>
+          <div className="campo" id='campoCorreo'>
+            <label htmlFor="correo">Correo:</label>
+            <input type="email" id="correo" name="correo"/>
+          </div>
+          <div className="campo"id='campoContraseña'>
+            <label htmlFor="contrasena">Contraseña:</label>
+            <input type="password" id="contrasena" name="contrasena"/>
+          </div>
+        </form>
+        
+          <h4>Datos de Tutor</h4>
+          <form className='formRegistro'>
+          <div className="campo">
+            <label htmlFor="nombre">Nombre:</label>
+            <input type="text" id="nombre" name='nombre'/>
+          </div>
+          <div className="campo">
+            <label htmlFor="apellidoPaterno">Apellido Paterno:</label>
+            <input type="text" id="apellidoPaterno" name='apellidoPaterno'/>
+          </div>
+          <div className="campo">
+            <label htmlFor="apellidoMaterno">Apellido Materno:</label>
+            <input type="text" id="apellidoMaterno" name="apellidoMaterno" />
+          </div>
+          <div className="campo">
+            <label htmlFor="sexo">Sexo:</label>
+            <select id="sexo" name="sexo">
+              <option value="Masculino">Masculino</option>
+              <option value="Femenino">Femenino</option>
+            </select>
+          </div>
+          <div className="campo">
+            <label htmlFor="parentesco">Parentesco:</label>
+            <input type="text" id="parentesco" name="parentesco"/>
+          </div>
+          <div className="campo">
+            <label htmlFor="Numero Celular">Numero Celular:</label>
+            <input type="text" id="Numero Celular" name="Numero Celular"/>
+          </div>
+          <div className="campo">
+            <label htmlFor="Numero Casa">Numero Casa:</label>
+            <input type="text" id="Numero Casa" name="Numero Casa"/>
+          </div>
+          <div className="campo">
+            <label htmlFor="edad">Edad:</label>
+            <input type="text" id="edad" name="edad"/>
+          </div>
+          <div className="campo">
+            <label htmlFor="direccion">Dirección:</label>
+            <input type="text" id="direccion" name="direccion"/>
+          </div>
+        </form>
+        
+        <div className="btnenviar">
+            <input type="submit" className="boton" value="Registrar" />
+        </div>
+    </body>
+=
     <div className="formulario">
       <h2>Registro</h2>
       <div><h4>Datos Personales</h4></div>
@@ -33,8 +142,7 @@ function Registro(){
         <button type="submit" className='boton'>Registrarse</button>
       </div>
     </div>
-
   );
 }
 
-export default Registro;
+export default Registro

frontend/src/login.css

@@ -1,5 +1,6 @@
 * {
     background-color:#d8d8d8;
+    margin: auto;
     box-sizing: border-box;
     flex-direction: column;
 }
@@ -11,7 +12,8 @@
 }
 
 .imgColum {
-    margin-top: auto;
+    margin-left: 15%;
+    margin-top: 27%;
 }
 
 .Formulario { 
@@ -35,8 +37,8 @@ input[type="text"], input[type="password"]{
     font-size: large;
 }
 header {
-    color: rgba(36, 15, 103, 0.922);
+    color: #ffffff;
-    background-color: #D5EEBB;
+    background-color: #444941;
     padding: 20px 0; /* Espaciado interno del encabezado */
     position: fixed; /* Hace que el encabezado sea fijo */
     width: 100%; /* Ancho completo del encabezado */
@@ -45,6 +47,9 @@ header {
     font-weight:bold;
     font-size: x-large;
 }
+.encabezado{
+    text-align: center;
+}
 font{
     background-color: transparent;
 }
@@ -57,17 +62,22 @@ form{
 }
 
 h1{
-    color:  rgb(172, 104, 9);
+    color:  #5F7A61;
     font-family: Jockey One;
     text-transform: capitalize;
     margin-top: 30%;
     padding-left: 30%;
 
 }
-#button{
+#bienvenida{
-    background-color: #D5EEBB;
+    margin-top: 20%;
-    color:rgba(36, 15, 103, 0.922);
+    font-size: 40px;
+}
+.button{
+    background-color: #474941;
+    color:#D5EEBB;
     margin-top:  30px;
+    margin-left: 24%;
     stroke: none;
     font-family: Georgia, 'Times New Roman', Times, serif;
     font-weight: bold;
@@ -77,16 +87,25 @@ h1{
     font-size: x-large;
     
 }
+.button:hover{
+    background-color: #55574f;
+}
 label{
-    color: rgb(172, 104, 9);
+    color: #5F7A61;
     font-family: JejuMyeongjo;
     font-size: 40px;
     font-weight: 400;
     text-align: left;
 }
+#labelUsuario{
+    margin-left: 30%;
+}
+#labelContraseña{
+    margin-left: 24%;
+}
+
 footer{
-    color: #000000;
+    background-color: #444941;
-    background-color: #D5EEBB;
     padding: 20px 0; /* Espaciado interno del footer */
     position: absolute; /* Hace que el footer sea fijo en la parte inferior */
     width: 100%; /* Ancho completo del footer */
@@ -106,8 +125,12 @@ footer{
 }
 
 div a{
-    background-color: #D5EEBB;
+    background-color: #444941;
-    color:rgb(172, 104, 9);
+    color:#D5EEBB;
     font-weight: bold;
 }
 
+#pie{
+    color: #ffffff;
+}
+

frontend/src/login.jsx

@@ -10,21 +10,21 @@ function Login() {
           <img src="imagen.jpg" alt='Imagen'/>
         </div>
         <div className='loginColum'>
-        <h1>Bienvenido</h1>
+        <h1 className='bienvenida'>Bienvenido</h1>
         <form className='Formulario'>
-          <label id='usuario'>Usuario:</label>
+          <label id='labelUsuario'>Usuario:</label>
           <input type='text' id='usuario'/>
-          <label>Contraseña:</label>
+          <label id='labelContraseña'>Contraseña:</label>
           <input type="password" id='password'/>
-          <button id='button' >Iniciar sesion</button> 
+          <input type="submit" className="button" value="Iniciar Sesión" />
         </form>
         </div>
       </div>
       
       <footer>  
-          <div id="footerId"><a href=''>uniregistro@outlook.com</a></div>
+          <div id="footerId"><a id="pie" href=''>uniregistro@outlook.com</a></div>
-          <div id="footerId"><a href=''>uniBandeVer</a></div>
+          <div id="footerId"><a id="pie" href=''>uniBandeVer</a></div>
-          <div id="footerId"><a href=''>4582349234</a></div>     
+          <div id="footerId"><a id ="pie" href=''>4582349234</a></div>     
     </footer>  
     </body>
   </>

frontend/src/main.jsx

@@ -1,15 +1,12 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import OfertaEducativa from './OfertaEducativa.jsx'
-
+import Login from './login.jsx'
-
-import './Registro.css'
-import './login.css'
-
 
 ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>  
+  <React.StrictMode>
-    <OfertaEducativa/>
+    <Encabezado/>
+    <Login/>
   </React.StrictMode>,
 )