add new design

app/AgregarTiempo/addTime.css

@@ -0,0 +1,11 @@
+.addTime {
+    position: relative;
+    max-width: 600px;
+    margin-top: 1rem;
+    border: 1px solid #e5e7eb;
+    border-radius: 4px;
+    background-color: #f9fafb;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+}

app/AgregarTiempo/page.tsx

@@ -1,11 +1,24 @@
+import Information from "../Components/Information/information";
+import Receipt from "../Components/Receipt/Receipt";
 import SearchUser from "../Components/SearchUser/searchUser";
 
+import './addTime.css'
+
 export default function Page() {
   return (
     <section className='containerSection'>
       <h2 className='title'> AGREGAR TIEMPO </h2>
 
       <SearchUser />
+
+      <Information
+        NoCuenta="idcuanta"
+        Nombre="juan"
+      />
+
+      <div className="addTime">
+        <Receipt />
+      </div>
     </section>
 
   );

app/Alta/page.tsx

@@ -1,6 +1,7 @@
 'use client'
 import { useState } from "react";
 import "../globals.css";
+import StepNavigator from "../Components/StepNavigator/StepNavigator";
 
 export default function Page() {
   const [step, setStep] = useState(1);
@@ -20,8 +21,8 @@ export default function Page() {
     <section className="containerSection">
       <h1 className="title">ALTA</h1>
 
-      <form className='containerForm'>
-
+      <StepNavigator totalSteps={2} onFinish={() => console.log()}>
+        <form className='containerForm'>
           <label className='label'>No.Cuenta</label>
           <input
             type='text'
@@ -53,7 +54,8 @@ export default function Page() {
             //onChange={(e) => setUser(e.target.value)}
             placeholder='Coloca '
           />
-
+        </form>
+        <form>
           <label className='label'>Email</label>
           <input
             type='text'
@@ -80,9 +82,11 @@ export default function Page() {
           </select>
 
           <button className="button buttonSearch">registrar</button>
-      </form>
 
-    </section>
+        </form>
+      </StepNavigator>
+
+    </section >
   );
 }
 //IO

app/Components/ChangePassword/changePassword.tsx

@@ -1,7 +1,7 @@
 
 function ChangePassword() {
     return (
-        <section className='center containerSection'>
+        <section className='centerGrid containerSection'>
 
             <form
                 className='login'

app/Components/Footer/Footer.module.css

@@ -0,0 +1,25 @@
+.yellowPart {
+    position: absolute;
+    content: "";
+    top: 0;
+    left: -50px;
+    width: 20%;
+    height: 100%;
+    min-width: 300px;
+    background: linear-gradient(to left, #003d79,#d59f0f);
+    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,#d59f0f);
+    transform: skew(-45deg);
+    z-index: 1;
+}

app/Components/Footer/Footer.tsx

@@ -1,11 +1,14 @@
+import footer from "./Footer.module.css"
 
 function Footer() {
     return (
         <footer>
+            <div className={footer.yellowPart}></div>
             <p>
                 Hecho en México. Todos los derechos reservados 2025.
                 Esta página puede ser reproducida con fines no lucrativos, siempre y cuando no se mutile, se cite la fuente 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>
     )
 }

app/Components/Header/Header.module.css

@@ -25,10 +25,10 @@
     content: "";
     top: 0;
     left: -20px;
-    width: 70%;
+    width: 60%;
     height: 100%;
     min-width: 300px;
-    background-color: #d59f0f;
+    background: #d59f0f;
     transform: skew(-45deg);
     z-index: 0;
 }

app/Components/Header/Header.tsx

@@ -1,21 +1,21 @@
 import Image from "next/image";
-import "./Header.css";
+import header from"./Header.module.css";
 import Link from "next/link";
 
 function Header() {
     return (
         <header>
-            <Link href="https://www.unam.mx/" className="center">
+            <Link href="https://www.unam.mx/" className={header.center}>
                 <Image
-                    className="logo"
+                    className={header.logo}
                     src="/logo_fes.png"
                     alt="Logo FES"
                     width={200}
                     height={50}
                 />
             </Link>
-            <div className="yellowPart"></div>
-            <div className="cedetecContainer">
+            <div className={header.yellowPart}></div>
+            <div className={header.cedetecContainer}>
                 <Image
                     src="/cedetec.jpg"
                     alt="Image of CEDETEC"

app/Components/Login/Login.css

@@ -2,13 +2,6 @@
     width: 300px;
 }
 
-.center {
-  display: grid;
-  grid-template-columns: auto 400px;
-  justify-content: center;
-  align-items: center;
-}
-
 .relative {
     position: relative;
 }

app/Components/Login/Login.tsx

@@ -2,7 +2,7 @@ import "./Login.css";
 
 function Login() {
     return (
-        <section className='center containerSection'>
+        <section className='centerGrid containerSection'>
 
             <form
                 className='login'
@@ -11,7 +11,7 @@ function Login() {
                     //handleLogin();
                 //</section>}}
             >
-                <h2 className='textHeader'>Inicio de sesión</h2>
+                <h2 className='title'>Inicio de sesión</h2>
 
                 <div className='containerInput'>
                     <label className='label'>Usuario</label>

app/Inscritos/page.tsx

@@ -5,7 +5,43 @@ export default function Page() {
     <section className='containerSection'>
       <h2 className='title'> INSCRITOS </h2>
 
-      <SearchUser/>
+      <form className="containerForm">
+        <label>Seleccione el periodo</label>
+        <div className="groupInput">
+          <select
+          >
+            <option value="">-- Seleccione el periodo --</option>
+            <option value="15">1 </option>
+            <option value="30">2 </option>
+            <option value="45">3 </option>
+            <option value="60">4 </option>
+            <option value="90">5 </option>
+            <option value="120">6 </option>
+          </select>
+          <button
+            className='button buttonSearch'
+            type='submit'
+          >Buscar
+          </button>
+        </div>
+
+      </form>
+
+      <div className="tableContainer">
+        <table >
+          <thead>
+            <tr>
+              <th>Carrera</th>
+              <th>Windows</th>
+              <th>Macintosh</th>
+              <th>Linux</th>
+              <th>Profesores</th>
+            </tr>
+          </thead>
+          <tbody>
+          </tbody>
+        </table>
+      </div>
     </section>
 
   );

app/globals.css

@@ -68,16 +68,19 @@ main {
 }
 
 footer {
+  position: relative;
   display: flex;
   justify-content: center;
   text-align: center;
   padding: 10px;
   background-color: rgba(0, 61, 121, 1);
+  z-index: 0;
 }
 
 footer p {
   color: white;
   max-width: 900px;
+  z-index: 2;
 }
 
 .container {
@@ -304,10 +307,55 @@ form {
   border-bottom: 1px solid rgb(1, 92, 184);
 }
 
-p{
+p {
   font-size: 1.5rem;
 }
 
+table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: auto;
+}
+
+table th,
+table td {
+    padding: 10px;
+    text-align: center;
+    border-bottom: 1px solid #cfcfcf;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+
+table th {
+    position: sticky;
+    top: 0px;
+    background-color: rgb(1, 92, 184);
+    color: white;
+}
+
+table tr {
+    min-width: 400px;
+}
+
+.tableContainer {
+    margin-top: 10px;
+    overflow-y: auto;
+    overflow-x: auto;
+    border-radius: 4px;
+    border: 1px solid #cfcfcf;
+    max-height: 430px;
+    scrollbar-color: rgb(1, 92, 184) rgba(0, 0, 0, 0);
+    background-color: #f9f9f9;
+    width: 100%;
+}
+
+.centerGrid {
+  display: grid;
+  grid-template-columns: auto 400px;
+  justify-content: center;
+  align-items: center;
+}
+
 @media (max-width: 800px) {
   header {
     padding: 6px 16px;