Update img tags to NuxtImg

frontend/components/global/AvatarGroup.vue

@@ -36,7 +36,7 @@ const remaining = computed(() => items.value.length - max.value);
             :class="index < 0 ? '' : ''"
             :style="{ width: size, height: size, zIndex: index + 2 }"
         >
-            <img
+            <NuxtImg
                 :src="item"
                 alt="avatar"
                 class="rounded-full object-cover w-full h-full"

frontend/components/global/BlogPost.vue

@@ -54,7 +54,7 @@ const createdAt = usePersianTimeAgo(new Date(date.value));
                     {{ category.name }}
                 </Tag>
 
-                <img
+                <NuxtImg
                     :src="image"
                     class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
                     alt=""
@@ -104,7 +104,7 @@ const createdAt = usePersianTimeAgo(new Date(date.value));
                 </div>
             </div>
 
-            <img
+            <NuxtImg
                 v-if="variant === 'lg'"
                 :src="image"
                 class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"

frontend/components/global/CategoryCard.vue

@@ -25,7 +25,7 @@ const { colorObject } = useImageColor(`#category-image-${id.value}`);
 <template>
     <NuxtLink :to="`/products?category=${id}`">
         <div class="group relative rounded-150 overflow-hidden w-full aspect-square bg-white brightness-[97%]">
-            <img
+            <NuxtImg
                 :id="`category-image-${id}`"
                 class="group-hover:scale-105 transition-transform duration-200 absolute object-contain size-full"
                 :src="picture"

frontend/components/global/Footer.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="bg-black relative overflow-hidden">
 
-        <img src="/img/footer-bg.jpg" alt="" class="absolute z-10 object-cover opacity-45" />
+        <NuxtImg src="/img/footer-bg.jpg" alt="" class="absolute z-10 object-cover opacity-45" />
 
         <div class="flex flex-col gap-4 items-center justify-center relative z-20">
 

frontend/components/global/LoadingOverlay.vue

@@ -55,7 +55,7 @@ onMounted(() => {
         id="loading-overlay"
         class="fixed inset-0 size-full z-9999 flex-center bg-black"
     >
-        <img
+        <NuxtImg
             id="loading-overlay-image"
             src="/img/heymlz/heymlz-loading-1.gif"
             class="opacity-0 scale-70 absolute z-20"

frontend/components/global/ServiceHighlights.vue

@@ -40,7 +40,7 @@ const highlights = ref<Highlight[]>([
         >
             <template v-for="(highlight, index) in highlights" :key="index">
                 <div class="flex flex-col-center gap-[.75rem] px-5">
-                    <img
+                    <NuxtImg
                         :src="highlight.icon"
                         class="size-[70px] md:size-[90px]"
                         alt=""

frontend/components/global/product-detail/Slider.vue

@@ -54,7 +54,7 @@ const changeSlide = (id: number) => {
             class="bg-white brightness-[97%] w-full relative aspect-square overflow-hidden rounded-[12px] md:rounded-200"
         >
             <Transition name="zoom" mode="out-in">
-                <img
+                <NuxtImg
                     :key="selectedSlideDetail.id"
                     class="size-full absolute object-contain"
                     :src="selectedSlideDetail.image"
@@ -84,7 +84,7 @@ const changeSlide = (id: number) => {
                         "
                         class="active:scale-95 hover:border-slate-200 transition-all cursor-pointer brightness-[97%] bg-white aspect-square border-2 rounded-[12px] md:rounded-200 w-full overflow-hidden relative"
                     >
-                        <img
+                        <NuxtImg
                             class="absolute object-cover size-full"
                             :src="slide.image"
                             :alt="String(slide.id)"

frontend/components/global/product/ProductCard.vue

@@ -36,7 +36,7 @@ const { colorObject } = useImageColor(`#product-image-${id.value}`);
                 <div
                     class="group relative size-full aspect-square rounded-xl @[280px]:rounded-2xl bg-white brightness-[98%] overflow-hidden p-6"
                 >
-                    <img
+                    <NuxtImg
                         :id="`product-image-${id}`"
                         :src="picture"
                         class="group-hover:scale-105 transition-transform duration-200 size-full object-contain absolute inset-0"

frontend/components/global/product/StickyCard.vue

@@ -20,7 +20,7 @@ const { picture, price, title, color } = toRefs(props);
     <div class="max-w-[500px] w-full h-[116px] flex items-center justify-between py-2 pe-6 ps-2 bg-white rounded-150">
         <div class="flex items-center gap-4">
             <div class="relative size-[100px] rounded-100 overflow-hidden border-[0.5px] border-slate-200">
-                <img :src="picture" :alt="title" class="object-cover absolute" />
+                <NuxtImg :src="picture" :alt="title" class="object-cover absolute" />
             </div>
             <div class="flex flex-col gap-1.5">
                 <span class="typo-sub-h-md text-black">{{ title }}</span>