From eab8bfcbd5490f8dd79e87ae9f0dc67c40cdadee Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Sun, 23 Mar 2025 23:22:17 +0330
Subject: [PATCH] Update img tags to NuxtImg

---
 .../cart/global/MinimalCartItem.vue           |  2 +-
 frontend/components/cart/index/CartItem.vue   |  2 +-
 frontend/components/global/AvatarGroup.vue    |  2 +-
 frontend/components/global/BlogPost.vue       |  4 +--
 frontend/components/global/CategoryCard.vue   |  2 +-
 frontend/components/global/Footer.vue         |  2 +-
 frontend/components/global/LoadingOverlay.vue |  2 +-
 .../components/global/ServiceHighlights.vue   |  2 +-
 .../global/product-detail/Slider.vue          |  4 +--
 .../components/global/product/ProductCard.vue |  2 +-
 .../components/global/product/StickyCard.vue  |  2 +-
 frontend/components/home/Categories.vue       | 26 +++++++++++----
 frontend/components/home/Hero.vue             |  2 +-
 .../components/home/MostRecentComments.vue    |  2 +-
 frontend/components/home/Preview.vue          | 24 +++++++++++---
 frontend/components/home/ProductsShowcase.vue |  2 +-
 .../components/product/ProductDetails.vue     |  2 +-
 .../profile/tickets/[id]/TicketBubble.vue     |  2 +-
 frontend/nuxt.config.ts                       | 33 +++++++++----------
 frontend/package.json                         |  2 ++
 frontend/pages/article/[id].vue               |  4 +--
 frontend/pages/cart/checkout.vue              |  2 +-
 frontend/pages/contact-us.vue                 |  2 +-
 23 files changed, 78 insertions(+), 51 deletions(-)

diff --git a/frontend/components/cart/global/MinimalCartItem.vue b/frontend/components/cart/global/MinimalCartItem.vue
index 679f628..b31d185 100644
--- a/frontend/components/cart/global/MinimalCartItem.vue
+++ b/frontend/components/cart/global/MinimalCartItem.vue
@@ -27,7 +27,7 @@ const { isLoading: cartImageIsLoading } = useImage({
             v-if="!cartImageIsLoading"
             class="size-[3.5rem] shrink-0 rounded-100 border border-gray-300 overflow-hidden"
         >
-            <img :src="image" alt="product" class="object-conver" />
+            <NuxtImg :src="image" alt="product" class="object-conver" />
         </div>
         <Skeleton
             v-else
diff --git a/frontend/components/cart/index/CartItem.vue b/frontend/components/cart/index/CartItem.vue
index 4c84b9f..8f8b6a5 100644
--- a/frontend/components/cart/index/CartItem.vue
+++ b/frontend/components/cart/index/CartItem.vue
@@ -121,7 +121,7 @@ watch(
                 v-if="!cartImageIsLoading"
                 class="size-[4rem] lg:size-[12rem] aspect-square shrink-0 rounded-xl border border-slate-200 overflow-hidden"
             >
-                <img
+                <NuxtImg
                     :src="data.product.image"
                     class="object-cover size-full"
                     alt="product"
diff --git a/frontend/components/global/AvatarGroup.vue b/frontend/components/global/AvatarGroup.vue
index 6e65bad..c72afe7 100644
--- a/frontend/components/global/AvatarGroup.vue
+++ b/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"
diff --git a/frontend/components/global/BlogPost.vue b/frontend/components/global/BlogPost.vue
index 5e87211..457a707 100644
--- a/frontend/components/global/BlogPost.vue
+++ b/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"
diff --git a/frontend/components/global/CategoryCard.vue b/frontend/components/global/CategoryCard.vue
index 9f5f38a..9b96646 100644
--- a/frontend/components/global/CategoryCard.vue
+++ b/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"
diff --git a/frontend/components/global/Footer.vue b/frontend/components/global/Footer.vue
index 2a5c925..4afe058 100644
--- a/frontend/components/global/Footer.vue
+++ b/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">
 
diff --git a/frontend/components/global/LoadingOverlay.vue b/frontend/components/global/LoadingOverlay.vue
index 26d13d9..20843ba 100644
--- a/frontend/components/global/LoadingOverlay.vue
+++ b/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"
diff --git a/frontend/components/global/ServiceHighlights.vue b/frontend/components/global/ServiceHighlights.vue
index d2bab9e..1f3edde 100644
--- a/frontend/components/global/ServiceHighlights.vue
+++ b/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=""
diff --git a/frontend/components/global/product-detail/Slider.vue b/frontend/components/global/product-detail/Slider.vue
index 50eb7d2..f82f172 100644
--- a/frontend/components/global/product-detail/Slider.vue
+++ b/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)"
diff --git a/frontend/components/global/product/ProductCard.vue b/frontend/components/global/product/ProductCard.vue
index a4ed9b7..745cdb8 100644
--- a/frontend/components/global/product/ProductCard.vue
+++ b/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"
diff --git a/frontend/components/global/product/StickyCard.vue b/frontend/components/global/product/StickyCard.vue
index 2d49b77..153e1d3 100644
--- a/frontend/components/global/product/StickyCard.vue
+++ b/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>
diff --git a/frontend/components/home/Categories.vue b/frontend/components/home/Categories.vue
index 34a5db5..06ec0dd 100644
--- a/frontend/components/home/Categories.vue
+++ b/frontend/components/home/Categories.vue
@@ -25,13 +25,13 @@ const onSwiper = (swiper: SwiperClass) => {
         class="flex flex-col justify-center gap-4 bg-black h-[150svh] relative overflow-hidden"
     >
 
-        <div class="w-full flex justify-center items-center relative z-10">
-            <span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4">
-                دسته بندی ها
-            </span>
-        </div>
+<!--        <div class="w-full flex justify-center items-center relative z-10">-->
+<!--            <span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4">-->
+<!--                دسته بندی ها-->
+<!--            </span>-->
+<!--        </div>-->
 
-        <img
+        <NuxtImg
             src="/img/categories-gradient.png"
             class="animate-spin [animation-duration:16s] object-cover absolute size-full brightness-45 scale-115 aspect-square"
             :style="{
@@ -41,6 +41,17 @@ const onSwiper = (swiper: SwiperClass) => {
         />
 
         <div class="w-full my-20 relative">
+            <video
+                class="aspect-square w-[450px] translate-[-253px] absolute left-1/2 -translate-x-1/2 z-10"
+                :style="{
+                    filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.4))',
+                }"
+                src="/video/heymlz/heymlz-seat-2.webm"
+                autoplay
+                playsinline
+                webkit-playsinline
+                muted
+            />
             <Swiper
                 :loop="true"
                 :centered-slides="true"
@@ -98,7 +109,8 @@ const onSwiper = (swiper: SwiperClass) => {
 
         <div class="w-full flex justify-center items-center">
             <NuxtLink to="/category">
-                <Button variant="solid" class="invert rounded-full max-xs:typo-label-sm !px-4 xs:!px-8" end-icon="ci:arrow-left">
+                <Button variant="solid" class="invert rounded-full max-xs:typo-label-sm !px-4 xs:!px-8"
+                        end-icon="ci:arrow-left">
                     مشاهده همه دسته ها
                 </Button>
             </NuxtLink>
diff --git a/frontend/components/home/Hero.vue b/frontend/components/home/Hero.vue
index 399bd05..d2622e0 100644
--- a/frontend/components/home/Hero.vue
+++ b/frontend/components/home/Hero.vue
@@ -193,7 +193,7 @@ onUnmounted(() => {
                                 />
                             </template>
 
-                            <img
+                            <NuxtImg
                                 v-else
                                 class="absolute inset-0 size-full object-cover"
                                 :src="slide.image!"
diff --git a/frontend/components/home/MostRecentComments.vue b/frontend/components/home/MostRecentComments.vue
index cfda703..23f1b67 100644
--- a/frontend/components/home/MostRecentComments.vue
+++ b/frontend/components/home/MostRecentComments.vue
@@ -28,7 +28,7 @@ const onSwiper = (swiper: SwiperClass) => {
 
 <template>
     <div class="relative max-h-[700px] flex justify-center items-center h-svh w-full">
-        <img
+        <NuxtImg
             class="absolute size-full object-cover"
             src="/img/hero-bg.jpg"
             alt=""
diff --git a/frontend/components/home/Preview.vue b/frontend/components/home/Preview.vue
index e2fdae1..183e776 100644
--- a/frontend/components/home/Preview.vue
+++ b/frontend/components/home/Preview.vue
@@ -59,7 +59,7 @@ watch(
                 class="rounded-200 overflow-hidden h-[70svh] md:h-[80svh] relative"
             >
                 <Transition name="fade">
-                    <img
+                    <NuxtImg
                         v-if="activeSlideVideo !== 'right'"
                         :src="homeData!.difreance_section.image1"
                         class="select-none absolute size-full object-cover brightness-[95%]"
@@ -77,8 +77,9 @@ watch(
                 </Transition>
 
                 <div class="absolute size-full right-0 w-full">
+
                     <Transition name="fade">
-                        <img
+                        <NuxtImg
                             v-if="activeSlideVideo !== 'left'"
                             :src="homeData!.difreance_section.image2"
                             class="overlay-image select-none absolute object-cover size-full brightness-[95%]"
@@ -94,12 +95,27 @@ watch(
                             class="overlay-image select-none absolute object-cover size-full brightness-[95%]"
                         />
                     </Transition>
+
+                    <video
+                        src="/video/heymlz/heymlz-pulling.webm"
+                        autoplay
+                        muted
+                        playsinline
+                        webkit-playsinline
+                        class="size-[300px] absolute translate-x-[-100px] z-10 top-[32%] -translate-y-1/2"
+                        :style="{
+                            left: `${clipPathPercent}%`,
+                            filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.3))'
+                        }"
+                    />
+
                     <div
                         :style="{
-                        left: `${clipPathPercent}%`,
-                    }"
+                            left: `${clipPathPercent}%`,
+                        }"
                         class="select-none w-2 h-full bg-black absolute left-0 flex items-center justify-center"
                     >
+
                         <div
                             ref="draggableEl"
                             class="cursor-grab hover:scale-115 transition-transform rounded-full absolute bg-black size-11 flex items-center justify-center"
diff --git a/frontend/components/home/ProductsShowcase.vue b/frontend/components/home/ProductsShowcase.vue
index c533e8a..44a7b2e 100644
--- a/frontend/components/home/ProductsShowcase.vue
+++ b/frontend/components/home/ProductsShowcase.vue
@@ -93,7 +93,7 @@ onUnmounted(() => {
                 class="showcase-slide origin-bottom absolute size-full bg-transparent flex items-center justify-center"
             >
 
-                <img
+                <NuxtImg
                     class="w-[280px] xs:w-[350px] lg:w-[500px] xl:w-[650px] z-20 mb-30 sm:mb-20 lg:mb-30"
                     :src="slide.image"
                     :style="{
diff --git a/frontend/components/product/ProductDetails.vue b/frontend/components/product/ProductDetails.vue
index 8362f3d..6d308aa 100644
--- a/frontend/components/product/ProductDetails.vue
+++ b/frontend/components/product/ProductDetails.vue
@@ -35,7 +35,7 @@ const { selectedVariant } = inject("productVariant") as ProductVariantProvideTyp
                                 class="size-[6.25rem] rounded-full border-slate-200 bg-white flex-center"
                             >
                                 <div class="size-11 relative">
-                                    <img
+                                    <NuxtImg
                                         class="size-full absolute object-cover"
                                         :src="inPackItem.cover"
                                         :alt="inPackItem.item_title"
diff --git a/frontend/components/profile/tickets/[id]/TicketBubble.vue b/frontend/components/profile/tickets/[id]/TicketBubble.vue
index b7f0da6..42bfdf6 100644
--- a/frontend/components/profile/tickets/[id]/TicketBubble.vue
+++ b/frontend/components/profile/tickets/[id]/TicketBubble.vue
@@ -54,7 +54,7 @@ const username = computed(() => {
             :class="is_user ? 'rounded-br-none' : 'rounded-bl-none'"
         >
             <div class="w-2/12 flex items-start justify-start">
-                <img :src="profile" class="size-16 rounded-full" />
+                <NuxtImg :src="profile" class="size-16 rounded-full" />
             </div>
 
             <div class="w-10/12 flex flex-col items-start pt-2">
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 61d6676..5845ff7 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -57,24 +57,17 @@ export default defineNuxtConfig({
         ]
     },
 
-    modules: [
-        [
-            "@nuxtjs/google-fonts",
-            {
-                families: {
-                    "DM Sans": "100..900",
-                    Inter: "100..900",
-                    download: true,
-                    inject: false
-                }
+    modules: [[
+        "@nuxtjs/google-fonts",
+        {
+            families: {
+                "DM Sans": "100..900",
+                Inter: "100..900",
+                download: true,
+                inject: false
             }
-        ],
-        "@nuxt/icon",
-        "reka-ui/nuxt",
-        "@vueuse/nuxt",
-        "@formkit/auto-animate/nuxt",
-        "@vite-pwa/nuxt"
-    ],
+        }
+    ], "@nuxt/icon", "reka-ui/nuxt", "@vueuse/nuxt", "@formkit/auto-animate/nuxt", "@vite-pwa/nuxt", "@nuxt/image"],
 
     pwa: {
         strategies: "injectManifest",
@@ -109,10 +102,14 @@ export default defineNuxtConfig({
         typeCheck: false
     },
 
+    image: {
+        quality : 65
+    },
+
     runtimeConfig: {
         public: {
             API_BASE_URL: process.env.API_BASE_URL,
             DEBUG: process.env.DEBUG
         }
     }
-});
+});
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index b2632da..9035be3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,6 +17,7 @@
     "dependencies": {
         "@formkit/auto-animate": "^0.8.2",
         "@nuxt/icon": "^1.10.3",
+        "@nuxt/image": "^1.10.0",
         "@nuxtjs/google-fonts": "^3.2.0",
         "@tanstack/vue-query": "^5.62.2",
         "@tanstack/vue-query-devtools": "^5.62.3",
@@ -51,6 +52,7 @@
         "@tailwindcss/postcss": "^4.0.9",
         "@types/node": "^22.13.11",
         "@types/sanitize-html": "^2.13.0",
+        "@types/web-push": "^3.6.4",
         "autoprefixer": "^10.4.20",
         "postcss": "^8.5.3",
         "tailwindcss": "^4.0.9",
diff --git a/frontend/pages/article/[id].vue b/frontend/pages/article/[id].vue
index b3e18e6..2c2f43e 100644
--- a/frontend/pages/article/[id].vue
+++ b/frontend/pages/article/[id].vue
@@ -28,7 +28,7 @@ if (response.isError) {
 <template>
     <div class="container">
         <div class="w-full h-[80svh] rounded-3xl relative overflow-hidden">
-            <img class="absolute object-cover size-full" :alt="article!.title" :src="article!.cover_image" />
+            <NuxtImg class="absolute object-cover size-full" :alt="article!.title" :src="article!.cover_image" />
             <div class="absolute bg-linear-to-t from-black/75 to-transparent size-full" />
             <div class="absolute pl-10 right-10 bottom-10 flex flex-col gap-6">
                 <h1 class="typo-h-4 text-white pl-8">
@@ -48,7 +48,7 @@ if (response.isError) {
                             class="w-fit pr-2 pl-5 h-[50px] rounded-full flex items-center justify-center gap-3 bg-white">
                             <div
                                 class="relative flex items-center justify-center rounded-full overflow-hidden size-[35px]">
-                                <img
+                                <NuxtImg
                                     class="size-full object-cover absolute"
                                     :src="article!.author.profile_photo"
                                     alt="article-author"
diff --git a/frontend/pages/cart/checkout.vue b/frontend/pages/cart/checkout.vue
index bfdb1b8..4fe5265 100644
--- a/frontend/pages/cart/checkout.vue
+++ b/frontend/pages/cart/checkout.vue
@@ -76,7 +76,7 @@ const selectedGateway = ref<PaymentGateway>(paymentGateways.value[0]);
                     class="w-full p-5 border rounded-xl flex flex-col gap-4 transition-all cursor-pointer"
                 >
                     <div class="aspect-square flex-center">
-                        <img :src="gateway.picture" class="object-cover" />
+                        <NuxtImg :src="gateway.picture" class="object-cover" />
                     </div>
                     <span class="typo-label-sm text-black">
                         {{ gateway.title }}
diff --git a/frontend/pages/contact-us.vue b/frontend/pages/contact-us.vue
index bcd29d1..0fe6368 100644
--- a/frontend/pages/contact-us.vue
+++ b/frontend/pages/contact-us.vue
@@ -133,7 +133,7 @@ const contactWays = ref([
                 </div>
             </div>
             <div class="w-4/12 h-full bg-red-300">
-                <img src="/mlz.jpeg" class="-mt-16" />
+                <NuxtImg src="/mlz.jpeg" class="-mt-16" />
             </div>
         </div>
     </div>