Se agrego el modelo de productos y se implemento en la page de productos

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

src/components/CardList.jsx

@@ -8,7 +8,7 @@ const CardList = () => {
   const getPublicaciones = async () => {
     try {
       const res = await http.get(
-        "publico/publicacion?ordenar=creado-asc",
+        "https://pos.api.turquessacoffee.com/admin/test-productos/productos",
         false
       );
       if (res.status === 200) {

src/components/Tarjeta.tsx

@@ -1,157 +1,163 @@
-
 import React from "react";
+import { Productos } from "../models/Productos.models";
+
+interface ProductListProps {
+  productos: Productos;
+}
 
 
 const ProductList = () => {
     const productos = [
         {
           id: 1,
-          titulo: "Focaccia Clásica",
+          titulo: "Focaccia chicken parm",
           descripcion: "Focaccia con aceite de oliva y romero fresco.",
           imagen: "https://via.placeholder.com/350x300?text=Focaccia+Clasica",
         },
         {
           id: 2,
-          titulo: "Focaccia de Tomate",
+          titulo: "Focaccia meatballs",
           descripcion: "Focaccia cubierta con tomates cherry y hierbas.",
           imagen: "https://via.placeholder.com/350x300?text=Focaccia+Tomate",
         },
         {
           id: 3,
-          titulo: "Focaccia de Aceitunas",
+          titulo: "Focaccia caprese",
           descripcion: "Focaccia con aceitunas negras y verdes.",
           imagen: "https://via.placeholder.com/350x300?text=Focaccia+Aceitunas",
         },
         {
           id: 4,
-          titulo: "Pasta Alfredo",
-          descripcion: "Fideos con salsa Alfredo cremosa.",
-          imagen: "https://via.placeholder.com/350x300?text=Pasta+Alfredo",
+          titulo: "Focaccia pavo romesco",
+          descripcion: "Focaccia con aceitunas negras y verdes.",
+          imagen: "https://via.placeholder.com/350x300?text=Focaccia+Aceitunas",
         },
         {
           id: 5,
-          titulo: "Pasta Bolognesa",
-          descripcion: "Pasta con salsa bolognesa clásica.",
-          imagen: "https://via.placeholder.com/350x300?text=Pasta+Bolognesa",
+          titulo: "Focaccia griega",
+          descripcion: "Focaccia con aceitunas negras y verdes.",
+          imagen: "https://via.placeholder.com/350x300?text=Focaccia+Aceitunas",
         },
         {
           id: 6,
-          titulo: "Pasta Pesto",
-          descripcion: "Pasta con salsa pesto hecha con albahaca fresca.",
-          imagen: "https://via.placeholder.com/350x300?text=Pasta+Pesto",
+          titulo: "Spaghetti carbonara",
+          descripcion: "Fideos con salsa Alfredo cremosa.",
+          imagen: "https://via.placeholder.com/350x300?text=Pasta+Alfredo",
         },
         {
           id: 7,
-          titulo: "Pasta Primavera",
-          descripcion: "Pasta con vegetales frescos y un toque de limón.",
-          imagen: "https://via.placeholder.com/350x300?text=Pasta+Primavera",
+          titulo: "Spaghetti bolognesa",
+          descripcion: "Pasta con salsa bolognesa clásica.",
+          imagen: "https://via.placeholder.com/350x300?text=Pasta+Bolognesa",
         },
         {
           id: 8,
-          titulo: "Ensalada César",
-          descripcion: "Lechuga romana, crutones y aderezo César.",
-          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Cesar",
+          titulo: "Spaghetti meatballs",
+          descripcion: "Pasta con salsa pesto hecha con albahaca fresca.",
+          imagen: "https://via.placeholder.com/350x300?text=Pasta+Pesto",
         },
         {
           id: 9,
-          titulo: "Ensalada Griega",
-          descripcion: "Tomates, pepino, cebolla y queso feta.",
-          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Griega",
+          titulo: "Spaghetti chicken parm",
+          descripcion: "Pasta con salsa pesto hecha con albahaca fresca.",
+          imagen: "https://via.placeholder.com/350x300?text=Pasta+Pesto",
         },
         {
           id: 10,
-          titulo: "Ensalada de Quinoa",
-          descripcion: "Quinoa con verduras frescas y aderezo ligero.",
-          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Quinoa",
+          titulo: "Fettuccine alfredo",
+          descripcion: "Pasta con salsa pesto hecha con albahaca fresca.",
+          imagen: "https://via.placeholder.com/350x300?text=Pasta+Pesto",
         },
         {
           id: 11,
-          titulo: "Ensalada Caprese",
-          descripcion: "Mozzarella fresca, tomate y albahaca.",
-          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Caprese",
+          titulo: "Fettuccine toscana",
+          descripcion: "Pasta con salsa pesto hecha con albahaca fresca.",
+          imagen: "https://via.placeholder.com/350x300?text=Pasta+Pesto",
         },
         {
           id: 12,
-          titulo: "Sopa de Tomate",
-          descripcion: "Sopa de tomate cremosa con albahaca.",
-          imagen: "https://via.placeholder.com/350x300?text=Sopa+Tomate",
+          titulo: "Sopa toscana",
+          descripcion: "Pasta con vegetales frescos y un toque de limón.",
+          imagen: "https://via.placeholder.com/350x300?text=Pasta+Primavera",
         },
         {
           id: 13,
-          titulo: "Sopa Minestrone",
-          descripcion: "Sopa italiana con vegetales y pasta.",
-          imagen: "https://via.placeholder.com/350x300?text=Sopa+Minestrone",
+          titulo: "Sopa tomate",
+          descripcion: "Lechuga romana, crutones y aderezo César.",
+          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Cesar",
         },
         {
           id: 14,
-          titulo: "Sopa de Pollo",
-          descripcion: "Sopa de pollo casera con fideos.",
-          imagen: "https://via.placeholder.com/350x300?text=Sopa+Pollo",
+          titulo: "Ensalada oliva",
+          descripcion: "Tomates, pepino, cebolla y queso feta.",
+          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Griega",
         },
         {
           id: 15,
-          titulo: "Sopa de Lentejas",
-          descripcion: "Sopa nutritiva con lentejas y verduras.",
-          imagen: "https://via.placeholder.com/350x300?text=Sopa+Lentejas",
+          titulo: "Ensalada mediterranea",
+          descripcion: "Quinoa con verduras frescas y aderezo ligero.",
+          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Quinoa",
         },
         {
           id: 16,
-          titulo: "Focaccia de Cebolla",
-          descripcion: "Focaccia con cebolla caramelizada.",
-          imagen: "https://via.placeholder.com/350x300?text=Focaccia+Cebolla",
+          titulo: "Ensalada cesar",
+          descripcion: "Mozzarella fresca, tomate y albahaca.",
+          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Caprese",
         },
         {
           id: 17,
-          titulo: "Ensalada de Espinacas",
-          descripcion: "Espinacas frescas con aderezo balsámico.",
-          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Espinacas",
+          titulo: "Arancinis",
+          descripcion: "Mozzarella fresca, tomate y albahaca.",
+          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Caprese",
         },
         {
           id: 18,
-          titulo: "Pasta Carbonara",
-          descripcion: "Pasta con salsa carbonara cremosa.",
-          imagen: "https://via.placeholder.com/350x300?text=Pasta+Carbonara",
-        },
-        {
-          id: 19,
-          titulo: "Sopa de Calabaza",
-          descripcion: "Sopa cremosa de calabaza con especias.",
-          imagen: "https://via.placeholder.com/350x300?text=Sopa+Calabaza",
-        },
-        {
-          id: 20,
-          titulo: "Focaccia de Queso",
-          descripcion: "Focaccia con mezcla de quesos derretidos.",
-          imagen: "https://via.placeholder.com/350x300?text=Focaccia+Queso",
+          titulo: "Lasagna Italiana",
+          descripcion: "Mozzarella fresca, tomate y albahaca.",
+          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Caprese",
         },
       ];
-      
-  
-    return (
-      <div className="grid grid-cols-2 gap-6 ml-6 mb-10 md:grid md:grid-cols-4 md:mx-10 ">
-        {productos.map((producto) => (
-          <div
-            key={producto.id}
-            className="shadow-xl w-full rounded-lg overflow-hidden bg-white"
-          >
-            <img
-              src={producto.imagen}
-              alt={producto.titulo}
-              className="w-full h-48 object-cover rounded-t-lg"
-            />
-            <div className="p-5">
-              <h1 className="text-xl font-bold text-lime-700 mb-2 ml-2">
-                {producto.titulo}
-              </h1>
-              <p className="text-gray-600 text-sm ml-2 mb-3">
-                {producto.descripcion}
-              </p>
-            </div>
+
+const categorias = {
+  Focaccias:productos.filter((p) => p.titulo.includes("Focaccia")),
+  Pastas:productos.filter((p) => p.titulo.includes("Spaghetti") || p.titulo.includes("Fettuccine")),
+  Ensaladas:productos.filter((p) => p.titulo.includes("Ensalada")),
+  Sopas:productos.filter((p) => p.titulo.includes("Sopa")),
+  Variedades:productos.filter ((p) => p.titulo.includes("Arancinis") || p.titulo.includes("Lasagna"))
+};
+
+  return (
+    <div className="mx-6 mb-10 md:mx-10">
+      {Object.entries(categorias).map(([categoria, productos]) => (
+        <div key={categoria} className="mb-10">
+          <h2 className="text-2xl font-bold text-slate-800 mb-4">{categoria}</h2>
+          <hr className="mb-6 border-2 border-lime-700" />
+          <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
+            {productos.map((producto) => (
+              <div
+                key={producto.id}
+                className="shadow-xl w-full rounded-lg overflow-hidden bg-white"
+              >
+                <img
+                  src={producto.imagen}
+                  alt={producto.titulo}
+                  className="w-full h-48 object-cover rounded-t-lg"
+                />
+                <div className="p-5">
+                  <h1 className="text-xl font-bold text-lime-700 mb-2 ml-2">
+                    {producto.titulo}
+                  </h1>
+                  <p className="text-gray-600 text-sm ml-2 mb-3">
+                    {producto.descripcion}
+                  </p>
+                </div>
+              </div>
+            ))}
           </div>
-        ))}
-      </div>
-    );
-  };
-  
-  export default ProductList;
-  
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ProductList;

src/layouts/Layout.astro

@@ -31,26 +31,27 @@ const { title, ogTitle, ogImage, ogUrl, ogDescription } = Astro.props;
   <body class="bg-amber-50">
    <header>
     <nav class="flex w-full h-16 justify-center">
-        <a href="/"><img src="/public/img/LogoOliva.png" class="mt-4 h-16 w-56" alt="Logo Oliva Mia"></a>
-        <ul class="flex space-x-6 text-sm space-y-10 font-sans text-slate-800 md:space-x-16 md:text-xl">
+        <a href="/"><img src="/public/img/logo oliva mia sin fondo.png" class="mt-4 h-16 w-56" alt="Logo Oliva Mia"></a>
+        <ul class="flex space-x-6 text-base space-y-10 font-sans text-slate-800 md:space-x-16 md:text-xl">
            <li></li>
             <li class="text-slate-800 hover:text-gray-600"><a href="/Menu/">Menú</a></li>
             <li class="text-slate-800 hover:text-gray-600"><a href="/Productos/">Productos</a></li>
             <li class="text-slate-800 hover:text-gray-600"><a href="/Nosotros/">Nosotros</a></li>
             <li class="text-slate-800 hover:text-gray-600"><a href="/Contacto/">Contacto</a></li>
-            <div class="flex space-x-2">
-              <a href="https://www.instagram.com/olivamiadeli/" target="_blank" class="mt-1">
+            <div class="flex space-x-3 md:space-x-2">
+              <a href="https://www.instagram.com/olivamiadeli/" target="_blank" class="md:mb-2">
                 <i class="fa-brands fa-square-instagram"></i>
               </a>
 
-              <a href="#" class="mt-1">
+              <a href="#" class=" md:mb-3">
                 <i class="fa-brands fa-facebook"></i>
               </a>
-              <p class="text-xl text-slate-800">@oliviamiadeli</p>
+              <p class="text-base md:text-xl text-slate-800">@oliviamiadeli</p>
             </div>
         </ul>
     </nav>
-    <hr class="my-7 w-full h-0.5 bg-lime-700 "/></header>
+    <hr class="my-7 w-full h-0.5 bg-lime-700 "/>
+  </header>
     
     <main>
       <slot />
@@ -110,7 +111,6 @@ const { title, ogTitle, ogImage, ogUrl, ogDescription } = Astro.props;
       <div class="flex justify-center space-x-6 mb-6">
         <a href="#" class="text-3xl text-white"><i class="fa-brands fa-facebook-f"></i></a>
         <a href="https://www.instagram.com/olivamiadeli" target="_blank" class="text-3xl text-white"><i class="fa-brands fa-instagram"></i></a>
-        <a href="#" class="text-3xl text-white"><i class="fa-regular fa-envelope"></i></a>
         <a href="#" class="text-3xl text-white"><i class="fa-solid fa-phone"></i></a>
       </div>
     

src/models/Productos.models.ts

@@ -0,0 +1,56 @@
+// To parse this data:
+//
+//   import { Convert, Productos } from "./file";
+//
+//   const productos = Convert.toProductos(json);
+//
+// These functions will throw an error if the JSON doesn't
+// match the expected interface, even if the JSON is valid.
+
+export class Productos {
+    paginacion: Paginacion;
+    resultado:  Resultado[];
+
+    constructor(json?: Partial<Productos>){
+        this.paginacion = new Paginacion();
+        this.resultado = [];
+        if (json !== null) {
+            Object.assign(this, json);
+          }
+    }
+}
+
+export class Paginacion {
+    total:  number;
+    pagina: number;
+    limite: number;
+    
+    constructor(json?: Partial<Productos>){
+        this.total = 0;
+        this.pagina = 0;
+        this.limite =0;
+        if (json !== null) {
+            Object.assign(this, json);
+          }
+    }
+}
+
+export class Resultado {
+    id:             number;
+    nombre:         string;
+    precio:         string;
+    existencia:     number;
+
+    constructor(json?: Partial<Productos>){
+        this.id = 0;
+        this.nombre = "";
+        this.precio = "";
+        this.existencia = 0;
+        if (json !== null) {
+            Object.assign(this, json);
+          }
+    }
+}
+
+// Converts JSON strings to/from your types
+// and asserts the results of JSON.parse at runtime

src/pages/Contacto/index.astro

@@ -28,7 +28,7 @@ import Layout from "../../layouts/Layout.astro";
                 <p class="text-sm">Mollit commodo laborum nulla pariatur non pariatur quis aliqua proident adipisicing tempor.</p>
                 <p class="text-sm"><input type="checkbox" required>  Nisi dolore voluptate fugiat labore dolore ex non sunt dolore cupidatat qui.</p>
             </div>
-            <button class="flex justify-center bg-lime-800 rounded w-full my-3 mb-40 text-white font-bold py-2 transition-transform hover:scale-105 hover:bg-lime-900 hover:ease-out hover:duration-300" 
+            <button class="flex justify-center bg-lime-800 rounded w-full my-3 mb-40 text-white font-bold py-2 transition-transform hover:scale-105 hover:bg-lime-900 hover:shadow-md hover:shadow-black hover:ease-out hover:duration-300" 
             type="submit">Enviar</button>
 
             

src/pages/Menu/index.astro

@@ -4,8 +4,8 @@ import Layout from "../../layouts/Layout.astro";
 
 <Layout title="Menu">
 
-    <div class="grid grid-cols-4 items-baseline gap-10  ">
-        <div class="mx-10">
+    <div class="grid md:grid-cols-4 items-baseline">
+        <div class="col-span-2 md:col-span-2 mx-44">
             <h1 class="text-lime-700 font-bold text-3xl mb-9">Focaccia</h1>
             <h2 class="font-bold text-slate-800 text-lg ">FOCCACIA CHICKEN PARM | $195</h2>
             <p class="text-sm mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
@@ -18,13 +18,43 @@ import Layout from "../../layouts/Layout.astro";
 
             <h2 class="font-bold text-slate-800 text-lg">FOCCACIA PAVO ROMESCO | $190</h2>
             <p class="text-sm mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
-
             <h2 class="font-bold text-slate-800 text-lg">FOCCACIA GRIEGA | $190</h2>
             <p class="text-sm mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
 
+            <h2 class="font-bold text-slate-800 text-lg">FOCCACIA SERRAMO | $195</h2>
+            <p class="text-sm mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
+
+            <h2 class="font-bold text-slate-800 text-lg">FOCCACIA AMANECER | $180</h2>
+            <p class="text-sm mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
+
+            <h2 class="font-bold text-slate-800 text-lg">FOCCACIA ITALIANA | $190</h2>
+            <p class="text-sm mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
+
+            <h2 class="font-bold text-slate-800 text-lg">FOCCACIA VEGETARIANA | $180</h2>
+            <p class="text-sm mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
+
+            <h2 class="font-bold text-slate-800 text-lg">FOCCACIA BIRE | $195</h2>
+            <p class="text-sm mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
+
+            <h2 class="font-bold text-slate-800 text-lg">FOCCACIA FRESA NUTELLA | $145</h2>
+            <p class="text-sm mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
+
+            <h2 class="font-bold text-slate-800 text-lg">FOCCACIA PISTACHELLA | $145</h2>
+            <p class="text-sm mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
+
+            <h2 class="font-bold text-slate-800 text-lg">COMPLEMENTO PARA FOCCACIAS | $35</h2>
+            <p class="text-sm mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
+
+            <h1 class="text-lime-700 font-bold text-3xl mb-9 mt-10">Variedades</h1>
+            <h2 class="font-bold text-slate-800 text-lg">ARANCINIS | $145</h2>
+            <p class="text-sm mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
+
+            <h2 class="font-bold text-slate-800 text-lg">LASAGNA ITALIANA | $145</h2>
+            <p class="text-sm mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
+
         </div>
 
-        <div>
+        <div class="col-span-2 mx-44 md:col-span-2">
             <h1 class="text-lime-700 font-bold text-3xl mb-9">Pastas</h1>
             <h2 class="font-bold text-slate-800 text-lg">SPAGHETTI CARBONARA | $165</h2>
             <p class="text-sm mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
@@ -43,10 +73,14 @@ import Layout from "../../layouts/Layout.astro";
 
             <h2 class="font-bold text-slate-800 text-lg">FETTUCCINE TOSCANA | $190</h2>
             <p class="text-sm mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
-        </div>
 
-        <div>
-            <h1 class="text-lime-700 font-bold text-3xl mb-9">Sopas y Ensaladas</h1>
+            <h2 class="font-bold text-slate-800 text-lg">FETTUCCINE PESTO DE ALBAHACA | $190</h2>
+            <p class="text-sm mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
+
+            <h2 class="font-bold text-slate-800 text-lg">FETTUCCINE PESTO ROSSO | $190</h2>
+            <p class="text-sm mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
+
+            <h1 class="text-lime-700 font-bold text-3xl mb-9 mt-10">Sopas y Ensaladas</h1>
             <h2 class="font-bold text-slate-800 text-lg">SOPA TOSCANA | $125</h2>
             <p class="text-sm mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
 
@@ -61,15 +95,8 @@ import Layout from "../../layouts/Layout.astro";
 
             <h2 class="font-bold text-slate-800 text-lg">ENSALADA CESAR | $180</h2>
             <p class="text-sm mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
-        </div>
-
-        <div>
-            <h1 class="text-lime-700 font-bold text-3xl mb-9 mt-4">Variedades</h1>
-            <h2 class="font-bold text-slate-800 text-lg">ARANCINIS | $145</h2>
-            <p class="text-sm mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
 
-            <h2 class="font-bold text-slate-800 text-lg">LASAGNA ITALIANA | $145</h2>
-            <p class="text-sm mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
         </div>
+    
     </div>
 </Layout>

src/pages/Nosotros/index.astro

@@ -12,11 +12,11 @@ import Layout from "../../layouts/Layout.astro";
       </section>
 
       <div class="w-full mx-10 mt-10">
-        <img src="/img/Focaccia.png" alt="Foccacia" class="relative right-6 w-full h-64 rounded-xl ">
+        <img src="https://via.placeholder.com/350x300?text=Focaccia+Oliva" alt="Foccacia" class="relative right-6 w-full h-64 rounded-xl ">
       </div>
         
       <div class="my-10 mx-10 mt-10">
-        <img src="/img/AceiteOliva.png" alt="Acite de oliva" class="relative right-9 w-full h-64 rounded-xl" >
+        <img src="https://via.placeholder.com/350x300?text=Focaccia+Oliva" alt="Acite de oliva" class="relative right-9 w-full h-64 rounded-xl" >
       </div>
       
       
@@ -34,7 +34,7 @@ import Layout from "../../layouts/Layout.astro";
       </section>
       
       <div class="w-full mx-10 mt-10">
-        <img src="/img/Focaccia.png" alt="Foccacia" class="relative right-9 w-full h-64 rounded-xl ">
+        <img src="https://via.placeholder.com/350x300?text=Focaccia+Oliva" alt="Foccacia" class="relative right-9 w-full h-64 rounded-xl ">
       </div>
          
       <div class="mt-24 text-center col-span-2">
@@ -63,10 +63,6 @@ import Layout from "../../layouts/Layout.astro";
             neque inventore! Hic perspiciatis blanditiis sunt in accusantium Elit anim aliqua enim do mollit dolor in Irure et sint deserunt exercitation labore 
             qui Deserunt ex et eiusmod qui mollit do ex veniam voluptate incididunt labore consectetur velit ullamco.Cupidatat labore commodo eiusmod eu ut aliqua 
             occaecat sint velit cillum aliqua exercitation Lorem sunt.</p>
-
-            <p class="text-xl">Lorem id reprehenderit officia deserunt veniam. Lorem proident fugiat incididunt nisi laborum eiusmod deserunt id. Anim do fugiat laborum commodo voluptate. Et amet consectetur enim in aute cillum id. Amet irure labore ex voluptate deserunt deserunt. Eiusmod fugiat quis cillum deserunt nulla magna amet aliqua culpa. Et ex anim aliquip labore quis officia.
-            Tempor et reprehenderit officia do aliquip labore duis ad labore exercitation anim Lorem. Sit qui consequat sit voluptate esse consectetur minim Lorem ut. Ad ad sint nisi duis enim non minim velit commodo duis fugiat fugiat.
-            Qui sit culpa incididunt commodo voluptate culpa laborum consectetur minim ut ullamco amet duis. Ad anim voluptate enim ex. Eiusmod culpa ex laboris elit velit tempor. Enim id exercitation cupidatat duis proident dolor officia elit reprehenderit ut minim eiusmod quis.</p>
         </div>
       </section>
 
@@ -75,17 +71,17 @@ import Layout from "../../layouts/Layout.astro";
       </div>
 
         <section id="Equipo" class="grid col-span-2">
-          <div class="grid grid-cols-3 gap-8 mx-48 max-w-8xl">
-            <div class="flex flex-col items-center text-center space-y-10 py-4 mx-28">
-              <img src="/img/Mundo.png" alt="Globo terraqueo" class="w-60 h-56">
-              <p class="font-bold text-2xl text-slate-800">2 Sucursales</p>
+          <div class="grid md:grid-cols-3 gap-8 mx-24">
+            <div class="flex flex-col items-center text-center space-y-10">
+              <img src="/img/Mundo.png" alt="Personas" class="w-60 h-56">
+              <p class="font-bold text-2xl text-slate-800">20+ Sucursales</p>
             </div>
             <div class="flex flex-col items-center text-center space-y-10">
               <img src="/img/Personas.png" alt="Personas" class="w-60 h-56">
               <p class="font-bold text-2xl text-slate-800">80+ Empleados</p>
             </div>
             <div class="flex flex-col items-center text-center space-y-10">
-              <img src="/img/Clientes.png" alt="Personas" class="w-60 h-56">              
+              <img src="/img/Clientes.png" alt="Clientes" class="w-60 h-56">              
               <p class="font-bold text-2xl text-slate-800">20,000+ Clientes</p>
             </div>
           </div>
@@ -95,15 +91,11 @@ import Layout from "../../layouts/Layout.astro";
           <div class="my-10">
            <h1 class="font-bold text-3xl mb-7 text-slate-800 text-center">Comparte tu experiencia</h1>
            <form action="POST">
-            <textarea name="Comentario" cols="100" rows="6" placeholder="Comentario" class="border-2 border-lime-700 rounded placeholder:font-bold focus: outline-2 outline-lime-700 placeholder:absolute placeholder:left-4 placeholder:top-2 placeholder:text-slate-600"></textarea>
+            <textarea name="Comentario" cols="90" rows="6" placeholder="Comentario" class="border-2 border-lime-700 rounded placeholder:font-bold focus: outline-2 outline-lime-700 placeholder:absolute placeholder:left-4 placeholder:top-2 placeholder:text-slate-600"></textarea>
             <button type="submit" class="grid bg-lime-700 rounded-lg px-3 py-1 my-3 font-bold text-white duration-300 hover:shadow-md hover:shadow-black hover:bg-lime-900 hover:scale-105">Enviar comentarios</button>
-           </form>
-           
+           </form>        
          </div>
        </section>
-
-       
-      
       </div>
 
 </Layout>

src/pages/Productos/index.astro

@@ -1,10 +1,27 @@
 ---
 import Layout from "../../layouts/Layout.astro";
 import ProductList from "../../components/Tarjeta";
+import {Productos} from "../../models/Productos.models"
+import type { DefaultResponse } from "../../types/responses";
+import { http } from "../../services";
+
+const resp = await fetch("https://pos.api.turquessacoffee.com/admin/test-productos/productos");
+const data = (await resp.json()) as Productos;
+
 ---
 
 <Layout title="Productos" client:load>
-  <h1 class="mx-10 text-slate-800 font-bold text-3xl">Catalogo de Productos</h1>
-  <hr class="my-6 mx-12 border-2 border-lime-700 rounded"/>
-  <ProductList />
+  <h1 class="font-bold text-slate-800 text-2xl mb-8">Listado de productos</h1>
+  
+  <div class="grid grid-cols-2">
+    <ul class="">
+      {data.resultado.map((Productos) => <li>{Productos.nombre}</li>)}
+    </ul>
+
+    <ul class="">
+      {data.resultado.map((Productos) => <li>{Productos.precio}</li>)}
+    </ul>
+
+  </div>
+  
 </Layout>

src/pages/TerminosCondiciones/index.astro

@@ -3,10 +3,13 @@ import Layout from "../../layouts/Layout.astro";
 import Collapse from "../../components/Collapse.astro";
 ---
 
-<Layout title="Terminos y condiciones">
+<Layout title="Términos y condiciones">
 
     <div class="mx-10 my-10">
-        <Collapse title="Terminos y condiciones">
+        <h1 class="text-3xl font-bold text-slate-800 mb-3">Términos y condiciones de uso</h1>
+        <hr class="my-4 border-2 border-lime-700 rounded"/>
+
+        <Collapse title="Términos y condiciones">
             <p class="mx-10">
                Aliqua eu labore labore commodo. Eiusmod ipsum amet ullamco eiusmod voluptate sunt ullamco. Aliquip sit proident cupidatat qui velit irure dolor 
                amet ullamco officia duis excepteur voluptate excepteur. Laboris consectetur nulla est exercitation in velit officia tempor aute cupidatat duis 

src/pages/TrabajaConNosotros/index.astro

@@ -68,7 +68,7 @@ import Layout from "../../layouts/Layout.astro";
                 </div>
 
 
-                <button class="flex justify-center bg-lime-800 rounded w-full my-3 mb-40 text-white font-bold py-2 transition-transform hover:scale-105 hover:bg-lime-900 hover:ease-out hover:duration-300" 
+                <button class="flex justify-center bg-lime-800 rounded w-full my-3 mb-40 text-white font-bold py-2 transition-transform hover:scale-105 hover:bg-lime-900 hover:shadow-md hover:shadow-black hover:ease-out hover:duration-300" 
                 type="submit">Enviar</button>