update added photos available and dynamic photo

Websites/jefes-nextjs/app/menu/Appetizers/items.json

@@ -2,6 +2,7 @@
     {
         "id": 1,
         "name": "Guacamole Dip",
+        "photo": "Appetizers/jalapenosDeReboso.jpeg",
         "price_large": 7,
         "price_small": 5,
         "spicy": "no",
@@ -10,6 +11,7 @@
     {
         "id": 2,
         "name": "CHILES TOREADOS",
+        "photo": "Appetizers/jalapenosDeReboso.jpeg",
         "price": 5,
         "spicy": "yes",
         "description": "3 fresh grilled jalepeño peppers topped with caramelized onions, Pico de Gallo, and lime wedges."
@@ -17,6 +19,7 @@
     {
         "id": 3,
         "name": "QUESO DIP",
+        "photo": "Appetizers/jalapenosDeReboso.jpeg",
         "price_large": 8,
         "price_small": 6,
         "spicy": "yes",
@@ -25,6 +28,7 @@
     {
         "id": 4,
         "name": "SAMPLER PLATTER",
+        "photo": "Appetizers/jalapenosDeReboso.jpeg",
         "price": 13,
         "spicy": "no",
         "description": "1 cheese quesadilla, 2 crispy flautas beef/chicken, 2 crunchy tacos beef/chicken and cheesy tacos. Served with a side of salsa, pico de gallo, and queso."

Websites/jefes-nextjs/app/menu/Appetizers/page.tsx

@@ -25,7 +25,7 @@ const Appetizers = () => {
         />
       </div>
       {/* Mapping out the menu */}
-      <div className="bg-red-300 flex flex-wrap gap-8 pt-6 justify-between w-full">
+      <div className=" flex flex-wrap gap-8 pt-6 justify-between w-full">
         {Menu.map((menu_item) => {
           return (
             <div
@@ -34,7 +34,7 @@ const Appetizers = () => {
             >
               <div className="h-[55%] relative w-full overflow-hidden">
                 <Image
-                  src="/food01.jpg"
+                  src={`/${menu_item.photo}`}
                   alt="chili pepper spice"
                   fill
                   style={{ objectFit: "cover", objectPosition: "center" }}