Se centro el contenido de la pagina menu

src/pages/Menu/index.astro

@@ -3,100 +3,100 @@ import Layout from "../../layouts/Layout.astro";
 ---
 
 <Layout title="Menu">
+    <div class="grid place-items-center">
+        <div class="grid md:grid-cols-2 items-baseline mx-36 space-x-14">
+            <div class="col-span-2 md:col-span-1">
+                <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>
 
-    <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>
+                <h2 class="font-bold text-slate-800 text-lg">FOCCACIA MEATBALLS | $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 CAPRESE | $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 MEATBALLS | $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 CAPRESE | $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 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 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 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 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 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 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 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 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">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>
 
-            <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>
 
-            <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>
 
-            <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>
+            <div class="col-span-2 md:col-span-1">
+                <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>
 
-            <h2 class="font-bold text-slate-800 text-lg">SPAGHETTI BOLOGNESA | $165</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">SPAGHETTI MEATBALLS | $175</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">SPAGHETTI BOLOGNESA | $165</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">SPAGHETTI MEATBALLS | $175</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">SPAGHETTI CHICKEN PARM | $175</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">SPAGHETTI CHICKEN PARM | $175</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 ALFREDO | $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 ALFREDO | $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 TOSCANA | $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 TOSCANA | $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 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 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>
+                <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>
+                <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>
 
-            <h2 class="font-bold text-slate-800 text-lg">SOPA DE TOMATE | $125</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">SOPA DE TOMATE | $125</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">ENSALADA OLIVA | $185</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">ENSALADA OLIVA | $185</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">ENSALADA MEDITERRANEA | $185</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">ENSALADA MEDITERRANEA | $185</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">ENSALADA CESAR | $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">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>
-    
-    </div>
+    </div>    
 </Layout>

src/pages/Productos/index.astro

@@ -8,20 +8,29 @@ 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="font-bold text-slate-800 text-2xl mb-8">Listado de productos</h1>
   
   <div class="grid grid-cols-2">
-    <ul class="">
+    
+  
+  <ul class="">
       {data.resultado.map((Productos) => <li>{Productos.nombre}</li>)}
     </ul>
 
     <ul class="">
       {data.resultado.map((Productos) => <li>{Productos.precio}</li>)}
     </ul>
-
+    
+  
   </div>
   
+
+  
 </Layout>