cambios menores

src/components/Tarjeta.tsx

@@ -1,119 +1,137 @@
 import React from "react";
-import { Productos } from "../models/Productos.models";
+import { useState } from "react";
+import { Producto } from "../models/Producto.models";
 
 interface ProductListProps {
-  productos: Productos;
+  productos: Producto;
 }
 
-
 const ProductList = () => {
     const productos = [
         {
           id: 1,
           titulo: "Focaccia chicken parm",
           descripcion: "Focaccia con aceite de oliva y romero fresco.",
+          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Focaccia+Clasica",
         },
         {
           id: 2,
           titulo: "Focaccia meatballs",
           descripcion: "Focaccia cubierta con tomates cherry y hierbas.",
+          precio: 120,
           imagen: "https://via.placeholder.com/350x300?text=Focaccia+Tomate",
         },
         {
           id: 3,
           titulo: "Focaccia caprese",
           descripcion: "Focaccia con aceitunas negras y verdes.",
+          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Focaccia+Aceitunas",
         },
         {
           id: 4,
           titulo: "Focaccia pavo romesco",
           descripcion: "Focaccia con aceitunas negras y verdes.",
+          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Focaccia+Aceitunas",
         },
         {
           id: 5,
           titulo: "Focaccia griega",
           descripcion: "Focaccia con aceitunas negras y verdes.",
+          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Focaccia+Aceitunas",
         },
         {
           id: 6,
           titulo: "Spaghetti carbonara",
           descripcion: "Fideos con salsa Alfredo cremosa.",
+          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Pasta+Alfredo",
         },
         {
           id: 7,
           titulo: "Spaghetti bolognesa",
           descripcion: "Pasta con salsa bolognesa clásica.",
+          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Pasta+Bolognesa",
         },
         {
           id: 8,
           titulo: "Spaghetti meatballs",
           descripcion: "Pasta con salsa pesto hecha con albahaca fresca.",
+          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Pasta+Pesto",
         },
         {
           id: 9,
           titulo: "Spaghetti chicken parm",
           descripcion: "Pasta con salsa pesto hecha con albahaca fresca.",
+          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Pasta+Pesto",
         },
         {
           id: 10,
           titulo: "Fettuccine alfredo",
           descripcion: "Pasta con salsa pesto hecha con albahaca fresca.",
+          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Pasta+Pesto",
         },
         {
           id: 11,
           titulo: "Fettuccine toscana",
           descripcion: "Pasta con salsa pesto hecha con albahaca fresca.",
+          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Pasta+Pesto",
         },
         {
           id: 12,
           titulo: "Sopa toscana",
           descripcion: "Pasta con vegetales frescos y un toque de limón.",
+          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Pasta+Primavera",
         },
         {
           id: 13,
           titulo: "Sopa tomate",
           descripcion: "Lechuga romana, crutones y aderezo César.",
+          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Ensalada+Cesar",
         },
         {
           id: 14,
           titulo: "Ensalada oliva",
           descripcion: "Tomates, pepino, cebolla y queso feta.",
+          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Ensalada+Griega",
         },
         {
           id: 15,
           titulo: "Ensalada mediterranea",
           descripcion: "Quinoa con verduras frescas y aderezo ligero.",
+          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Ensalada+Quinoa",
         },
         {
           id: 16,
           titulo: "Ensalada cesar",
           descripcion: "Mozzarella fresca, tomate y albahaca.",
+          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Ensalada+Caprese",
         },
         {
           id: 17,
           titulo: "Arancinis",
           descripcion: "Mozzarella fresca, tomate y albahaca.",
+          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Ensalada+Caprese",
         },
         {
           id: 18,
           titulo: "Lasagna Italiana",
           descripcion: "Mozzarella fresca, tomate y albahaca.",
+          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Ensalada+Caprese",
         },
       ];
@@ -126,38 +144,39 @@ const categorias = {
   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>
+
+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>
+                <button className="bg-lime-700 text-white rounded px-3 py-1 hover:bg-lime-800 hover:scale-105 duration-200">
+                  Agregar al carrito
+                </button>
               </div>
-            ))}
-          </div>
+            </div>
+          ))}
         </div>
-      ))}
-    </div>
-  );
-};
-
-export default ProductList;
+      </div>
+    ))}
+  </div>  );
+export default ProductList;

src/layouts/Layout.astro

@@ -34,10 +34,10 @@ const { title, ogTitle, ogImage, ogUrl, ogDescription } = Astro.props;
         <a href="/"><img src="/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>
+            <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>
             <li>
               <a href="/Pedidos/">
                 <i class="fa-solid fa-cart-shopping fa-lg"></i>
@@ -51,7 +51,7 @@ const { title, ogTitle, ogImage, ogUrl, ogDescription } = Astro.props;
               <a href="#" class=" md:mb-3">
                 <i class="fa-brands fa-facebook"></i>
               </a>
-              <p class="text-base md:text-xl text-slate-800">@oliviamiadeli</p>
+              <p class="text-base md:text-xl text-slate-800">@olivamiadeli</p>
             </div>
         </ul>
     </nav>
@@ -70,17 +70,17 @@ const { title, ogTitle, ogImage, ogUrl, ogDescription } = Astro.props;
 
         <div class="text-white text-lg mx-24">
           <ul class="space-y-2">
-            <li class="underline underline-offset-4 hover:ease-out transition-all duration-500 hover:scale-105 hover:no-underline">
-              <a href="Nosotros/">Nosotros</a>
+            <li class="hover:ease-out transition-all duration-500 hover:scale-105 hover:underline">
+              <a href="nosotros/">Nosotros</a>
             </li>
-            <li class="underline underline-offset-4 hover:ease-out transition-all duration-500 hover:scale-105 hover:no-underline">
-              <a href="/Nosotros/#Equipo">Equipo</a>
+            <li class="hover:ease-out transition-all duration-500 hover:scale-105 hover:underline">
+              <a href="/nosotros/#Equipo">Equipo</a>
             </li>
-            <li class="underline underline-offset-4 hover:ease-out transition-all duration-500 hover:scale-105 hover:no-underline">
-              <a href="/Nosotros/#Mision">Misión</a>
+            <li class="hover:ease-out transition-all duration-500 hover:scale-105 hover:underline">
+              <a href="/nosotros/#Mision">Misión</a>
             </li>
-            <li class="underline underline-offset-4 hover:ease-out transition-all duration-500 hover:scale-105 hover:no-underline">
-              <a href="/Nosotros/#Vision">Visión</a>
+            <li class="hover:ease-out transition-all duration-500 hover:scale-105 hover:underline">
+              <a href="/nosotros/#Vision">Visión</a>
             </li>
           </ul>
         </div>
@@ -93,17 +93,17 @@ const { title, ogTitle, ogImage, ogUrl, ogDescription } = Astro.props;
 
         <div class="text-white text-lg flex justify-end mx-24">
           <ul class="space-y-2">
-            <li class="underline underline-offset-4 hover:ease-out transition-all duration-500 hover:scale-105 hover:no-underline">
-              <a href="TerminosCondiciones/">Términos y condiciones</a>
+            <li class="hover:ease-out transition-all duration-500 hover:scale-105 hover:underline">
+              <a href="terminos-condiciones/">Términos y condiciones</a>
             </li>
-            <li class="underline underline-offset-4 hover:ease-out transition-all duration-500 hover:scale-105 hover:no-underline">
-              <a href="/TerminosCondiciones/#Privacidad">Aviso de privacidad</a>
+            <li class="hover:ease-out transition-all duration-500 hover:scale-105 hover:underline">
+              <a href="/terminos-condiciones/#Privacidad">Aviso de privacidad</a>
             </li>
-            <li class="underline underline-offset-4 hover:ease-out transition-all duration-500 hover:scale-105 hover:no-underline">
-              <a href="/Nosotros/#Comentarios">Comentarios</a>
+            <li class="hover:ease-out transition-all duration-500 hover:scale-105 hover:underline">
+              <a href="/nosotros/#Comentarios">Comentarios</a>
             </li>
-            <li class="underline underline-offset-4 hover:ease-out transition-all duration-500 hover:scale-105 hover:no-underline">
-              <a href="/TrabajaConNosotros/">Trabaja con nosotros</a>
+            <li class="hover:ease-out transition-all duration-500 hover:scale-105 hover:underline">
+              <a href="/trabaja-con-nosotros/">Trabaja con nosotros</a>
             </li>
           </ul>
         </div>

src/pages/trabaja-con-nosotros/index.astro

@@ -8,19 +8,18 @@ import Layout from "../../layouts/Layout.astro";
       <h1 class="text-3xl font-bold text-slate-800 mb-3">
         <b class="text-lime-700">Se busca gente para</b> unirse a nuestro equipo
       </h1>
-      <p>
+      <p class="text-center">
         Dolor ad proident pariatur ex laborum voluptate non sunt excepteur non.
-      </p>
-      <p>
         Elit quis aliquip irure magna occaecat cillum dolor nisi cupidatat
         cillum minim consectetur.
+        Laboris irure culpa sint elit.
       </p>
-      <p>Laboris irure culpa sint elit.</p>
-      <p>
+
+      <p class="text-center">
         Amet nisi adipisicing laboris labore velit occaecat id amet ad ullamco
         enim.
+        Eu amet aliquip aute proident dolor.
       </p>
-      <p>Eu amet aliquip aute proident dolor.</p>
 
       <div class="my-10"></div>