pagina productos creada

src/components/Tarjeta.tsx

@@ -0,0 +1,157 @@
+
+import React from "react";
+
+
+const ProductList = () => {
+    const productos = [
+        {
+          id: 1,
+          titulo: "Focaccia Clásica",
+          descripcion: "Focaccia con aceite de oliva y romero fresco.",
+          imagen: "https://via.placeholder.com/350x300?text=Focaccia+Clasica",
+        },
+        {
+          id: 2,
+          titulo: "Focaccia de Tomate",
+          descripcion: "Focaccia cubierta con tomates cherry y hierbas.",
+          imagen: "https://via.placeholder.com/350x300?text=Focaccia+Tomate",
+        },
+        {
+          id: 3,
+          titulo: "Focaccia de Aceitunas",
+          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",
+        },
+        {
+          id: 5,
+          titulo: "Pasta Bolognesa",
+          descripcion: "Pasta con salsa bolognesa clásica.",
+          imagen: "https://via.placeholder.com/350x300?text=Pasta+Bolognesa",
+        },
+        {
+          id: 6,
+          titulo: "Pasta Pesto",
+          descripcion: "Pasta con salsa pesto hecha con albahaca fresca.",
+          imagen: "https://via.placeholder.com/350x300?text=Pasta+Pesto",
+        },
+        {
+          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",
+        },
+        {
+          id: 8,
+          titulo: "Ensalada César",
+          descripcion: "Lechuga romana, crutones y aderezo César.",
+          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Cesar",
+        },
+        {
+          id: 9,
+          titulo: "Ensalada Griega",
+          descripcion: "Tomates, pepino, cebolla y queso feta.",
+          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Griega",
+        },
+        {
+          id: 10,
+          titulo: "Ensalada de Quinoa",
+          descripcion: "Quinoa con verduras frescas y aderezo ligero.",
+          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Quinoa",
+        },
+        {
+          id: 11,
+          titulo: "Ensalada Caprese",
+          descripcion: "Mozzarella fresca, tomate y albahaca.",
+          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Caprese",
+        },
+        {
+          id: 12,
+          titulo: "Sopa de Tomate",
+          descripcion: "Sopa de tomate cremosa con albahaca.",
+          imagen: "https://via.placeholder.com/350x300?text=Sopa+Tomate",
+        },
+        {
+          id: 13,
+          titulo: "Sopa Minestrone",
+          descripcion: "Sopa italiana con vegetales y pasta.",
+          imagen: "https://via.placeholder.com/350x300?text=Sopa+Minestrone",
+        },
+        {
+          id: 14,
+          titulo: "Sopa de Pollo",
+          descripcion: "Sopa de pollo casera con fideos.",
+          imagen: "https://via.placeholder.com/350x300?text=Sopa+Pollo",
+        },
+        {
+          id: 15,
+          titulo: "Sopa de Lentejas",
+          descripcion: "Sopa nutritiva con lentejas y verduras.",
+          imagen: "https://via.placeholder.com/350x300?text=Sopa+Lentejas",
+        },
+        {
+          id: 16,
+          titulo: "Focaccia de Cebolla",
+          descripcion: "Focaccia con cebolla caramelizada.",
+          imagen: "https://via.placeholder.com/350x300?text=Focaccia+Cebolla",
+        },
+        {
+          id: 17,
+          titulo: "Ensalada de Espinacas",
+          descripcion: "Espinacas frescas con aderezo balsámico.",
+          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Espinacas",
+        },
+        {
+          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",
+        },
+      ];
+      
+  
+    return (
+      <div className="grid grid-cols-2 gap-6 ml-6 mb-10 md:grid md:grid-cols-4 md:space-x-3 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>
+          </div>
+        ))}
+      </div>
+    );
+  };
+  
+  export default ProductList;
+  

src/pages/Contacto/index.astro

@@ -14,13 +14,13 @@ import Layout from "../../layouts/Layout.astro";
     <div class="flex justify-center mt-10 ">
         <form action="POST" autocomplete="on">
             <div class="flex flex-col-2 space-x-3">
-                <input type="text" placeholder="Nombre" required class="bg-slate-800 mt-10 text-white font-bold px-3 py-2 rounded w-full focus: outline-2 outline-lime-700">
-                <input type="email" placeholder="Email" required class="bg-slate-800 mt-10 text-white font-bold px-3 py-2 rounded w-full focus: outline-2 outline-lime-700">
+                <input type="text" placeholder="Nombre" required class="border-2 border-lime-700 mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full placeholder:text-slate-600 focus: outline-2 outline-lime-700">
+                <input type="email" placeholder="Email" required class="border-2 border-lime-700 mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full placeholder:text-slate-600 focus: outline-2 outline-lime-700">
             </div>
 
             <div class="flex flex-col-2 space-x-3">
-                <input type="text" placeholder="Teléfono"  required class= "bg-slate-800 mt-10 text-white font-bold px-3 py-2 rounded w-full focus: outline-2 outline-lime-700"> 
-                <input type="text" placeholder="Dirección" required class= "bg-slate-800 mt-10 text-white font-bold px-3 py-2 rounded w-full focus: outline-2 outline-lime-700 autofill:bg-slate-800">
+                <input type="text" placeholder="Teléfono"  required class= "border-2 border-lime-700 mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full placeholder:text-slate-600 focus: outline-2 outline-lime-700"> 
+                <input type="text" placeholder="Dirección" required class= "border-2 border-lime-700 mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full placeholder:text-slate-600 focus: outline-2 outline-lime-700">
             </div>
             <div class="grid place-items-center my-10">
                 <p>INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS</p>

src/pages/Menu/index.astro

@@ -2,9 +2,9 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 
-<Layout title="Olivia Mia">
+<Layout title="Menu">
 
-    <div class="grid grid-cols-4 place-items-center space-x-5  ">
+    <div class="grid grid-cols-4 items-baseline gap-10  ">
         <div class="mx-10">
             <h1 class="text-lime-700 font-bold text-xl mb-9">Focaccia</h1>
             <h2 class="font-bold text-slate-800 ">FOCCACIA CHICKEN PARM | $195</h2>
@@ -45,7 +45,7 @@ import Layout from "../../layouts/Layout.astro";
             <p class="text-sm mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
         </div>
 
-        <div class="relative bottom-11">
+        <div>
             <h1 class="text-lime-700 font-bold text-xl mb-9">Sopas y Ensaladas</h1>
             <h2 class="font-bold text-slate-800">SOPA TOSCANA | $125</h2>
             <p class="text-sm mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
@@ -63,23 +63,16 @@ import Layout from "../../layouts/Layout.astro";
             <p class="text-sm mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
         </div>
 
-        <div class="relative bottom-52">
+        <div>
             <h1 class="text-lime-700 font-bold text-xl mb-9 mt-4">Variedades</h1>
             <h2 class="font-bold text-slate-800">ARANCINIS | $145</h2>
-            <p class="text-sm MB-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
+            <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">LASAGNA ITALIANA | $145</h2>
-            <p class="text-sm MB-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
+            <p class="text-sm mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, iste maxime? Voluptates.</p>
         </div>
     </div>
 
-    <div class="grid grid-rows-2 grid-cols-6">
-        <div class="bg-slate-100">
-            <img src="" alt="">
-        </div>
-
-
-    </div>
 
 
 </Layout>

src/pages/Nosotros/index.astro

@@ -67,7 +67,7 @@ import Layout from "../../layouts/Layout.astro";
             <p>Deja tu comentario y ayúdanos a mejorar. Tu feedback nos ayuda a crecer y ofrecerte una</p>
             <p>experiencia cada vez mejor.</p>
             <p class="mb-10">Gracias por ser parte de nuestra comunidad.</p>
-            <textarea name="Mensaje" id="" cols="90" rows="4" placeholder="Comentarios" class="bg-slate-800 rounded placeholder:font-bold focus: outline-2 outline-lime-700 placeholder:absolute placeholder:left-4 placeholder:top-2"></textarea>
+            <textarea name="Mensaje" id="" cols="90" rows="4" placeholder="Comentarios" class=" text-slate-800 font-bold border-2 border-lime-700 rounded placeholder:font-bold placeholder:text-slate-500 placeholder:absolute placeholder:left-4 placeholder:top-2"></textarea>
           </div>
 
         </section>

src/pages/Productos/index.astro

@@ -1,47 +1,10 @@
 ---
 import Layout from "../../layouts/Layout.astro";
----
-
-<Layout title="Productos">
-  <div
-    class="grid place-items-center grid-cols-5 my-10 mx-10 max-w-sm w-52 bg-white shadow-lg rounded-lg overflow-hidden"
-  >
-    <img
-      src="/public/img/SI.png"
-      alt="Pasta carbonara"
-      class="flex justify-start w-10 h-56 object-cover"
-    />
-
-    <div class="p-6">
-      <h2 class="text-2xl font-bold text-gray-800 mb-2">Pasta Carbonara</h2>
-      <h3 class="font-semibold mb-3">$167</h3>
-
-      <p class="text-gray-600 text-base mb-10">
-        Labore tempor commodo pariatur veniam irure est nulla nisi proident
-        esse.
-      </p>
-    </div>
-  </div>
+import Tarjeta from "../../components/Tarjeta";
 
-  <div
-  class="grid place-items-center grid-cols-5 my-10 mx-10 max-w-sm w-52 bg-white shadow-lg rounded-lg overflow-hidden"
->
-  <img
-    src="/public/img/SI.png"
-    alt="Pasta carbonara"
-    class="flex justify-start w-10 h-56 object-cover"
-  />
-
-  <div class="p-6">
-    <h2 class="text-2xl font-bold text-gray-800 mb-2">Pasta Carbonara</h2>
-    <h3 class="font-semibold mb-3">$167</h3>
+---
 
-    <p class="text-gray-600 text-base mb-10">
-      Labore tempor commodo pariatur veniam irure est nulla nisi proident
-      esse.
-    </p>
-  </div>
-</div>
+<Layout title="Productos" client:load>
+  <Tarjeta/>
   
-
 </Layout>

src/pages/TrabajaConNosotros/index.astro

@@ -42,17 +42,17 @@ import Layout from "../../layouts/Layout.astro";
         <div class="flex justify-center mt-10 ">
             <form action="POST" autocomplete="on">
                 <div class="flex flex-col-2 space-x-3">
-                    <input type="text" placeholder="Nombre" required class="bg-slate-800 mt-10 text-white font-bold px-3 py-2 rounded w-full focus: outline-2 outline-lime-700">
-                    <input type="email" placeholder="Apellido" required class="bg-slate-800 mt-10 text-white font-bold px-3 py-2 rounded w-full focus: outline-2 outline-lime-700">
+                    <input type="text" placeholder="Nombre" required class="mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full border-2 border-lime-700 placeholder:text-slate-600 focus: outline-2 outline-lime-700">
+                    <input type="email" placeholder="Apellido" required class="mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full border-2 border-lime-700 placeholder:text-slate-600 focus: outline-2 outline-lime-700">
                 </div>
     
                 <div class="flex flex-col-2 space-x-3">
-                    <input type="text" placeholder="Teléfono"  required class= "bg-slate-800 mt-10 text-white font-bold px-3 py-2 rounded w-full focus: outline-2 outline-lime-700"> 
-                    <input type="text" placeholder="Dirección" required class= "bg-slate-800 mt-10 text-white font-bold px-3 py-2 rounded w-full focus: outline-2 outline-lime-700 ">
+                    <input type="text" placeholder="Teléfono"  required class= "mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full border-2 border-lime-700 placeholder:text-slate-600 focus: outline-2 outline-lime-700"> 
+                    <input type="text" placeholder="Dirección" required class= "mt-10 text-slate-800 font-bold px-3 py-2 rounded w-full border-2 border-lime-700 placeholder:text-slate-600 focus: outline-2 outline-lime-700 ">
                 </div>
 
                 <div class="flex justify-center flex-row-1 w-full my-6 ">
-                    <textarea name="Mensaje" id="" cols="90" rows="4" placeholder="Mensaje" class="bg-slate-800 rounded placeholder:font-bold focus: outline-2 outline-lime-700 placeholder:absolute placeholder:left-4 placeholder:top-2"></textarea>
+                    <textarea name="Mensaje" id="" cols="90" rows="4" placeholder="Mensaje" 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>
                 </div>
 
                 <div>

src/pages/index.astro

@@ -5,11 +5,11 @@ import Layout from "../layouts/Layout.astro"
 <Layout title="Inicio">
 
   <div class="flex flex-col items-center justify-center mt-36 w-full h-auto md:flex-row md:space-x-28 md:h-100">
-    <img src="/public/img/prox.png" alt="Proximamente">
+    <img src="/public/img/ProximamenteOliva.png" alt="Proximamente">
     <img src="/public/img/OlivaGrande.png" alt="Logo Oliva Mia">
 </div>
 
   <div class="flex justify-center ">
-    <button class="relative top-24 text-center pl-10 pr-10 pt-2 pb-2 mb-72  bg-slate-800 text-white rounded-lg hover:scale-110 hover:shadow-md hover:shadow-black hover:ease-out hover: duration-300">MENÚ</button>
+    <button class="relative top-24 text-center pl-10 pr-10 pt-2 pb-2 mb-72  bg-slate-800 text-white rounded-lg hover:scale-110 hover:shadow-md hover:shadow-black hover:ease-out hover: duration-300"><a href="/Menu/">MENÚ</a></button>
   </div>
 </Layout>