attempt at implementing smooth loading

Websites/jefes-nextjs/app/contact/page.tsx

@@ -27,7 +27,7 @@ const contact = () => {
         </div>
       </div>
       <div className="flex flex-col bg-gray-800 w-full">
-      <div>Contact Us today</div>
+      <div>Contact Us Today</div>
         <Calendar />
         <Form />
       </div>

Websites/jefes-nextjs/app/menu/MenuCard/MenuCard.tsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import Image from "next/image";
 import localFont from "next/font/local";
@@ -31,7 +32,8 @@ const MenuCard = ({ Menu }: any) => {
                   fill
                   style={{ objectFit: "cover", objectPosition: "center" }}
                   quality={100}
-                  className="rounded-t-lg"
+                  className="flex transition-opacity opacity-0 duration-[2s]"
+                  onLoadingComplete={(image) => image.classList.remove("opacity-0")}
                 />
               </div>
             </div>
@@ -56,7 +58,8 @@ const MenuCard = ({ Menu }: any) => {
                           objectPosition: "left",
                         }}
                         quality={100}
-                        className="flex"
+                        className="flex transition-opacity opacity-0 duration-[2s]"
+                        onLoadingComplete={(image) => image.classList.remove("opacity-0")}
                       />
                     ) : (
                       <div className="hidden"></div>
@@ -71,7 +74,8 @@ const MenuCard = ({ Menu }: any) => {
                           objectPosition: "right",
                         }}
                         quality={100}
-                        className="flex"
+                        className="flex transition-opacity opacity-0 duration-[2s]"
+                        onLoadingComplete={(image) => image.classList.remove("opacity-0")}
                       />
                     ) : (
                       <div className="hidden"></div>