new header and new footer

renderer/components/Layout/Footer.module.css

@@ -0,0 +1,56 @@
+.footer {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  padding: 10px;
+  background-color: #003e79;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.footer p {
+  color: white;
+  max-width: 900px;
+  z-index: 2;
+  font-size: 14px;
+  margin-bottom: 0;
+}
+
+.yellowPart {
+  position: absolute;
+  content: "";
+  top: 0;
+  left: -50px;
+  width: 20%;
+  height: 100%;
+  min-width: 300px;
+  background: linear-gradient(to left, #003e79, #bd8c01);
+  transform: skew(45deg);
+  z-index: 1;
+}
+
+.yellowPartOpuest {
+  position: absolute;
+  content: "";
+  top: 0;
+  right: -50px;
+  width: 20%;
+  height: 100%;
+  min-width: 300px;
+  background: linear-gradient(to right, #003d79, #bd8c01);
+  transform: skew(-45deg);
+  z-index: 1;
+}
+
+@media (max-width: 800px) {
+  .yellowPart {
+    width: 5%;
+    left: -150px;
+  }
+
+  .yellowPartOpuest {
+    width: 5%;
+    right: -150px;
+  }
+}

renderer/components/Layout/Footer.tsx

@@ -1,18 +1,21 @@
-export default function Footer() {
+import footer from "./Footer.module.css"
+
+function Footer() {
   const year = new Date();
   return (
-    <footer className="container-fluid text-center py-3 text-white" style={{background: "#1E3C70", fontSize: "12px"}}>
-      <p className="my-0">
+    <footer className={footer.footer}>
+      <div className={footer.yellowPart}></div>
+      <p>
         Hecho en México, todos los derechos reservados {year.getFullYear()}.
-      </p>
-      <p className="my-0">
         Esta página puede ser reproducida con fines no lucrativos, siempre y
         cuando no se mutile, se cite la fuente
-      </p>
-      <p className="my-0">
         completa y su dirección electrónica. De otra forma, requiere permiso
         previo por escrito de la institución.
       </p>
+      <div className={footer.yellowPartOpuest}></div>
     </footer>
-  );
+  )
 }
+
+export default Footer;
+//IO

renderer/components/Layout/Header.module.css

@@ -1,24 +1,18 @@
 .logo {
   position: relative;
-  filter: invert(1);
   z-index: 3;
   margin: 5px;
 }
 
-.cedetecContainer {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 300px;
-  height: 100%;
-  z-index: -1;
-}
+.logoContainer {
+  position: relative;
+  width: 100%;
+  max-width: 250px;
+  min-width: 200px;
+  height: auto;
+  aspect-ratio: 250/70;
+  margin: 10px 5px;
 
-.cedetecContainer::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(to right, #f9f9f9, rgba(128, 128, 128, 0));
 }
 
 .yellowPart {
@@ -27,48 +21,45 @@
   top: 0;
   left: -20px;
   width: 100%;
-  height: 100%;
-  min-width: 300px;
-  background: linear-gradient(to right, #bd8c01, #f9f9f9);
+  height: 30px;
+  background: linear-gradient(to right, #bd8c01 40%, #fff 100%);
   transform: skew(-45deg);
   z-index: 0;
 }
 
 .header {
+  z-index: 1;
   display: grid;
   grid-template-columns: auto 1fr;
-  padding: 5px 40px;
+  padding: 0 10px;
   position: relative;
   overflow: hidden;
-  background-color: #f9f9f9;
-  z-index: 1;
-  height: 70px;
+  background-color: #ffffff;
 }
 
 .header::after {
   content: "";
   top: 0;
-  left: -40px;
+  left: -60px;
   position: absolute;
   background-color: #003e79;
   height: 100%;
-  width: 30%;
-  min-width: 300px;
+  min-width: 350px;
   transform: skew(45deg);
-  z-index: 1;
+  z-index: 2;
 }
 
 .header::before {
   content: "";
   top: 0;
-  left: -20px;
+  left: -40px;
   position: absolute;
   background-color: rgb(1, 92, 184);
   height: 100%;
-  width: 30%;
-  min-width: 300px;
+  width: 10%;
+  min-width: 350px;
   transform: skew(45deg);
-  z-index: 1;
+  z-index: 2;
 }
 
 @media (max-width: 800px) {

renderer/components/Layout/Header.tsx

@@ -1,16 +1,21 @@
 import Image from "next/image";
-import unam from "../../public/images/Logo-UNAM.png";
-import fes from "../../public/images/logo_acatlan.png";
+import fes from "../../public/images/logo_fes.png";
 import header from "./Header.module.css";
 
 export default function Header() {
   return (
     <header className={header.header}>
-      <Image src={unam} alt="Logo de la UNAM" height={60} width={190} />
-      <Image src={fes} alt="Logo de la UNAM" height={60} width={190} />
+      <div className={header.logoContainer}>
+        <Image
+          className={header.logo}
+          src={fes}
+          alt="Logo FES"
+          layout="fill"
+          style={{ objectFit: "contain" }}
+        />
+      </div>
       <div className={header.yellowPart}></div>
     </header>
   );
 }
-
 //IO