Updated

frontend/components/global/CategoryCard.vue

@@ -23,48 +23,50 @@ const { colorObject } = useImageColor(`#category-image-${id.value}`);
 </script>
 
 <template>
-    <div class="relative rounded-150 overflow-hidden w-full h-[500px] bg-white brightness-[97%]">
-        <img
-            :id="`category-image-${id}`"
-            class="absolute object-contain size-full"
-            :src="picture"
-            alt=""
-        />
-        <div
-            v-if="darkLayer"
-            class="bg-linear-to-t from-black/50 to-transparent to-40% absolute z-10 size-full"
-        />
-
-        <div
-            class="absolute z-20 bottom-0 p-6 flex items-end justify-between w-full"
-        >
+    <NuxtLink :to="`/products?category=${id}`">
+        <div class="relative rounded-150 overflow-hidden w-full h-[500px] bg-white brightness-[97%]">
+            <img
+                :id="`category-image-${id}`"
+                class="absolute object-contain size-full"
+                :src="picture"
+                alt=""
+            />
             <div
-                :class="
+                v-if="darkLayer"
+                class="bg-linear-to-t from-black/50 to-transparent to-40% absolute z-10 size-full"
+            />
+
+            <div
+                class="absolute z-20 bottom-0 p-6 flex items-end justify-between w-full"
+            >
+                <div
+                    :class="
                     colorObject?.isLight && !darkLayer
                         ? 'text-black'
                         : 'text-white'
                 "
-                class="flex flex-col gap-2"
-            >
-                <div class="typo-s-h-md">
-                    {{ category }}
-                    <span class="typo-p-xs -translate-y-1 inline-block mr-1">
+                    class="flex flex-col gap-2"
+                >
+                    <div class="typo-s-h-md">
+                        {{ category }}
+                        <span class="typo-p-xs -translate-y-1 inline-block mr-1">
                         {{ count }}
                     </span>
+                    </div>
+                    <span class="typo-p-md">محصولات ما را مشاهده کنید</span>
                 </div>
-                <span class="typo-p-md">محصولات ما را مشاهده کنید</span>
-            </div>
 
-            <Icon
-                size="24"
-                name="ci:arrow-left"
-                class="mb-1"
-                :class="
+                <Icon
+                    size="24"
+                    name="ci:arrow-left"
+                    class="mb-1"
+                    :class="
                     colorObject?.isLight && !darkLayer
                         ? '**:stroke-black'
                         : '**:stroke-white'
                 "
-            />
+                />
+            </div>
         </div>
-    </div>
+    </NuxtLink>
 </template>