merge and add created at filed to product

frontend/components/articles/ArticlesList.vue

@@ -27,8 +27,9 @@ const isMobile = useMediaQuery('(max-width: 1024px)');
             :title="article.title"
             :comments="2"
             :id="article.id"
+            :slug="article.slug"
             :date="article.created_at"
-            :variant="isMobile ? 'sm' : 'lg'"
+            :variant="'sm'"
             :category="article.category"
             tag="تگ ندارد"
         />

frontend/components/global/BlogPost.vue

@@ -1,24 +1,24 @@
 <script setup lang="ts">
-
 // types
 
 import { usePersianTimeAgo } from "~/composables/global/usePersianTimeAgo";
 
 type Props = {
     id: number;
+    slug: string;
     tag: string;
     date: string;
     title: string;
     description: string;
     variant?: "sm" | "lg";
     category: SubCategory;
-    image: string,
-}
+    image: string;
+};
 
 // props
 
 const props = withDefaults(defineProps<Props>(), {
-    variant: "lg"
+    variant: "lg",
 });
 
 const { date } = toRefs(props);
@@ -26,17 +26,15 @@ const { date } = toRefs(props);
 // state
 
 const createdAt = usePersianTimeAgo(new Date(date.value));
-
 </script>
 
 <template>
     <div>
         <NuxtLink
-            :to="`/article/${id}`"
+            :to="`/article/${slug}`"
             :class="variant === 'lg' ? 'aspect-square rounded-150 overflow-hidden' : 'h-fit'"
             class="group w-full relative block"
         >
-
             <Tag
                 v-if="variant === 'lg'"
                 class="bg-slate-950 absolute left-6 top-6 z-20"
@@ -48,9 +46,7 @@ const createdAt = usePersianTimeAgo(new Date(date.value));
                 v-if="variant === 'sm'"
                 class="aspect-square w-full rounded-150 overflow-hidden relative"
             >
-                <Tag
-                    class="bg-slate-950 absolute z-20 left-4 sm:left-6 top-4 sm:top-6 max-sm:text-xs"
-                >
+                <Tag class="bg-slate-950 absolute z-20 left-4 sm:left-6 top-4 sm:top-6 max-sm:text-xs">
                     {{ category.name }}
                 </Tag>
 
@@ -65,16 +61,13 @@ const createdAt = usePersianTimeAgo(new Date(date.value));
                 :class="variant === 'lg' ? 'absolute px-6' : 'invert mt-6'"
                 class="bottom-6 lg:bottom-8 flex flex-col gap-4 z-20"
             >
-
                 <div class="flex items-center gap-4 lg:gap-6">
                     <div class="flex items-center gap-2">
                         <Icon
                             name="ci:comment"
                             class="**:stroke-white size-3 md:size-3.5"
                         />
-                        <span class="typo-p-xs md:typo-p-sm text-white">
-                            ۰ نظر
-                        </span>
+                        <span class="typo-p-xs md:typo-p-sm text-white"> ۰ نظر </span>
                     </div>
                     <div class="flex items-center gap-2">
                         <Icon
@@ -117,4 +110,4 @@ const createdAt = usePersianTimeAgo(new Date(date.value));
             />
         </NuxtLink>
     </div>
-</template>
+</template>

frontend/components/global/ProductsGrid.vue

@@ -26,7 +26,7 @@ withDefaults(defineProps<Props>(), {
             <NuxtLink to="/products">
                 <Button
                     variant="primary"
-                    class="rounded-full max-sm:typo-label-sm max-sm:py-2"
+                    class="rounded-full max-md:h-[38px] max-md:text-xs"
                     end-icon="ci:arrow-left"
                 >
                     نمایش همه

frontend/components/home/Categories.vue

@@ -60,11 +60,24 @@ const onSlideChange = (swiper: SwiperClass) => {
                     slideShadows: true,
                 }"
                 :breakpoints="{
+                    320: {
+                        coverflowEffect: {
+                            stretch: -50,
+                        },
+                        slidesPerView: 1.75,
+                        centeredSlides: true,
+                    },
                     640: {
+                        coverflowEffect: {
+                            stretch: -100,
+                        },
                         centeredSlides: true,
                         slidesPerView: 2.65,
                     },
                     1024: {
+                        coverflowEffect: {
+                            stretch: -100,
+                        },
                         centeredSlides: true,
                         slidesPerView: 3.65,
                     },
@@ -95,7 +108,7 @@ const onSlideChange = (swiper: SwiperClass) => {
                 :style="{
                     right: `calc(50% - ${slideWidth / 2}px - 20px)`,
                 }"
-                class="max-xs:hidden absolute z-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
+                class="absolute z-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
             >
                 <Icon
                     name="ci:arrow-right"
@@ -109,7 +122,7 @@ const onSlideChange = (swiper: SwiperClass) => {
                 :style="{
                     left: `calc(50% - ${slideWidth / 2}px - 20px)`,
                 }"
-                class="max-xs:hidden absolute z-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
+                class="absolute z-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
             >
                 <Icon
                     name="ci:arrow-left"