From f9bbe27fa9e69bbaf9f61dcf02863421ae7c504b Mon Sep 17 00:00:00 2001
From: ImAlpha <arcticjcb@gmail.com>
Date: Thu, 1 Feb 2024 04:29:24 -0800
Subject: [PATCH] updated images for optimization loading

---
 .../jefes-nextjs/app/menu/MenuCard/MenuCard.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/Websites/jefes-nextjs/app/menu/MenuCard/MenuCard.tsx b/Websites/jefes-nextjs/app/menu/MenuCard/MenuCard.tsx
index 70678fa..9f842e3 100644
--- a/Websites/jefes-nextjs/app/menu/MenuCard/MenuCard.tsx
+++ b/Websites/jefes-nextjs/app/menu/MenuCard/MenuCard.tsx
@@ -31,9 +31,9 @@ const MenuCard = ({ Menu }: any) => {
                   alt="chili pepper spice"
                   fill
                   style={{ objectFit: "cover", objectPosition: "center" }}
-                  quality={100}
-                  className="flex transition-opacity opacity-0 duration-[2s]"
-                  onLoadingComplete={(image) => image.classList.remove("opacity-0")}
+                  quality={75}
+                  sizes="(max-width: 325px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                  className="flex"
                 />
               </div>
             </div>
@@ -55,11 +55,12 @@ const MenuCard = ({ Menu }: any) => {
                         fill
                         style={{
                           objectFit: "contain",
-                          objectPosition: "left",
+                          objectPosition: "center",
                         }}
                         quality={100}
-                        className="flex transition-opacity opacity-0 duration-[2s]"
-                        onLoadingComplete={(image) => image.classList.remove("opacity-0")}
+                        sizes="(max-width: 25px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                        className="flex"
+                        
                       />
                     ) : (
                       <div className="hidden"></div>
@@ -74,8 +75,8 @@ const MenuCard = ({ Menu }: any) => {
                           objectPosition: "right",
                         }}
                         quality={100}
-                        className="flex transition-opacity opacity-0 duration-[2s]"
-                        onLoadingComplete={(image) => image.classList.remove("opacity-0")}
+                        sizes="(max-width: 25px) 100vw, (max-width: 325px) 50vw, 33vw"
+                        className="flex"
                       />
                     ) : (
                       <div className="hidden"></div>