restructuring layout

app/(private)/Alta/page.tsx

@@ -1,75 +1,12 @@
-"use client";
-import { useState } from "react";
-import StepNavigator from "@/app/Components/StepNavigator/StepNavigator";
+import RegisterAlta from "@/app/Components/Inscripciones/Alta/registerAlta";
+import "./style.css";
 
 export default function Page() {
-  const [step, setStep] = useState(1);
-  const [major, setMajor] = useState("");
-
   return (
     <section className="containerSection">
       <h1 className="title">ALTA</h1>
 
-      <StepNavigator totalSteps={2} onFinish={() => console.log()}>
-        <form className="containerForm gap">
-          <label className="label">No.Cuenta</label>
-          <input
-            type="text"
-            //value={user}
-            //onChange={(e) => setUser(e.target.value)}
-            placeholder="Coloca un número de cuenta..."
-          />
-
-          <label className="label">Nombre</label>
-          <input
-            type="text"
-            //value={user}
-            //onChange={(e) => setUser(e.target.value)}
-            placeholder="Coloca el nombre"
-          />
-
-          <label className="label">Apellido Paterno</label>
-          <input
-            type="text"
-            //value={user}
-            //onChange={(e) => setUser(e.target.value)}
-            placeholder="Coloca el apellido paterno"
-          />
-
-          <label className="label">Apellido Materno</label>
-          <input
-            type="text"
-            //value={user}
-            //onChange={(e) => setUser(e.target.value)}
-            placeholder="Coloca el apellido materno"
-          />
-        </form>
-        <form className="gap">
-          <label className="label">Email</label>
-          <input
-            type="text"
-            //value={user}
-            //onChange={(e) => setUser(e.target.value)}
-            placeholder="Coloca "
-          />
-
-          <label className="label">Fecha Nacimiento</label>
-          <input
-            type="text"
-            //value={user}
-            //onChange={(e) => setUser(e.target.value)}
-            placeholder="Coloca "
-          />
-
-          <label className="label">Carrera</label>
-          <select value={major} onChange={(e) => setMajor(e.target.value)}>
-            <option value="">-- Selecciona un tiempo --</option>
-            <option value="15">15 minutos</option>
-          </select>
-
-          <button className="button buttonSearch">registrar</button>
-        </form>
-      </StepNavigator>
+      <RegisterAlta />
     </section>
   );
 }

app/(private)/Alta/style.css

@@ -0,0 +1,23 @@
+.gridAlta {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+.containerAlta {
+  background-color: #f9f9f9;
+  width: 100%;
+  max-width: 900px;
+  padding: 1rem;
+  border-radius: 4px;
+}
+
+@media (max-width: 800px) {
+  .gridAlta {
+    grid-template-columns: 1fr;
+    justify-items: center;
+    min-width: max-content;
+  }
+
+  .containerAlta {
+    width: 80%;
+  }
+}