Modificaciones al front

src/app/page.tsx

@@ -15,12 +15,14 @@ export default function Home() {
     }
 
     try {
-      const response = await axios.get(
+      const response = await axios.post(
         'https://sistemas.acatlan.unam.mx/wsdsc/api/consultaDirectorioPorArea',
         {
           params: {
-            depid: area
-          }
+            ve: 'A294KwHrIQzgX5UkwMvxBjZ1KKAe2c4uy2jsM|h|BCA=',
+            uf: 'x0PUzGIf@5M7aD9Bicp71eQYmNP2|kY4eunsatoXto2TSzyMlwqhJSdy6l1dYdRqrhNBg0UnTVzrNUq1jNsqLQ==',
+            depid: area,
+          },
         }
       )
       console.log('Respuesta de API area: ', response.data);
@@ -82,14 +84,11 @@ export default function Home() {
             {resultados.map((persona, i) => (
               <div key={i} className="col-12 col-md-6 col-lg-4">
                 <div className="card h-100 shadow-sm">
-                  <div className="card-body d-flex flex-row align-items-center">
-                    <div className="me-3 flex-shrink-0">
-                    </div>
-                    <div>
-                      <h5 className="card-title fw-bold mb-2">{persona.nombre}</h5>
-                      <p className="card-text mb-1"><strong>Ubicación:</strong> {persona.ubicacion || 'Sin información'}</p>
-                      <p className="card-text mb-0"><strong>Correo:</strong> {persona.correo || 'No disponible'}</p>
-                    </div>
+                  <div className="card-body">
+                    <h5 className="card-title fw-bold mb-2">{persona.nombre}</h5>
+                    <p className="card-text mb-1"><strong>Apellidos:</strong> {persona.apellidos || 'No disponible'}</p>
+                    <p className="card-text mb-1"><strong>Teléfono:</strong> {persona.telefono || 'No disponible'}</p>
+                    <p className="card-text mb-0"><strong>Correo:</strong> {persona.correo || 'No disponible'}</p>
                   </div>
                 </div>
               </div>