Merge branch 'main' of https://github.com/Byeto-Company/hossein_por_shop

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

@@ -27,12 +27,12 @@ const onSwiper = (swiper: SwiperClass) => {
 </script>
 
 <template>
-    <section class="w-full flex flex-col gap-10 md:gap-[4rem] lg:container">
+    <section class="w-full flex flex-col gap-10 md:gap-16 lg:container">
         <div class="w-full flex justify-between items-center max-lg:container">
             <span class="text-black typo-h-6 md:typo-h-5 lg:typo-h-4">
                 {{ title }}
             </span>
-            <div class="flex-center gap-[.5rem]">
+            <div class="flex-center gap-2">
                 <button
                     @click="swiper_instance?.slidePrev()"
                     :disabled="swiper_instance?.isBeginning"
@@ -41,7 +41,7 @@ const onSwiper = (swiper: SwiperClass) => {
                             ? 'border-slate-200 cursor-not-allowed'
                             : 'border-black cursor-pointer'
                     "
-                    class="size-[30px] md:size-[35px] lg:size-[2.75rem] rounded-full border-[1.5px] click-effect flex-center"
+                    class="size-[30px] md:size-[35px] lg:size-11 rounded-full border-[1.5px] click-effect flex-center"
                 >
                     <Icon
                         name="ci:chevron-right"
@@ -55,7 +55,7 @@ const onSwiper = (swiper: SwiperClass) => {
                     :class="
                         swiper_instance?.isEnd ? 'border-slate-200 cursor-not-allowed' : 'border-black cursor-pointer'
                     "
-                    class="size-[30px] md:size-[35px] lg:size-[2.75rem] rounded-full border-[1.5px] click-effect flex-center"
+                    class="size-[30px] md:size-[35px] lg:size-11 rounded-full border-[1.5px] click-effect flex-center"
                 >
                     <Icon
                         name="ci:chevron-left"

frontend/components/global/product/ProductCard.vue

@@ -108,7 +108,7 @@ const parallaxStyle = computed(() => {
             </div>
 
             <div class="flex flex-col gap-1 px-2 items-start w-full text-black mt-4">
-                <span class="typo-sub-h-sm font-normal w-full truncate">
+                <span class="typo-sub-h-sm font-normal w-full line-clamp-2 leading-[175%]">
                     {{ title }}
                 </span>
                 <div class="flex flex-col w-full mt-1">
@@ -118,7 +118,11 @@ const parallaxStyle = computed(() => {
                     >
                         {{ price }}
                     </span>
-                    <span v-if="priceAfter" class="whitespace-nowrap !font-bold">{{ priceAfter }}</span>
+                    <span
+                        v-if="priceAfter"
+                        class="whitespace-nowrap !font-bold"
+                        >{{ priceAfter }}</span
+                    >
                 </div>
             </div>
         </div>

frontend/components/home/Categories.vue

@@ -16,6 +16,12 @@ const activeIndex = ref(0);
 const slideElement = ref<HTMLDivElement | null>(null);
 const { width: slideWidth } = useElementSize(slideElement);
 
+// computed
+
+const slides = computed(() => {
+    return [...homeData.value!.main_categories, ...homeData.value!.main_categories];
+});
+
 // methods
 
 const onSwiper = (swiper: SwiperClass) => {
@@ -101,7 +107,7 @@ const onSlideChange = (swiper: SwiperClass) => {
             >
                 <SwiperSlide
                     ref="slideElement"
-                    v-for="(slide, index) in homeData!.main_categories"
+                    v-for="(slide, index) in slides"
                     :key="slide.id"
                 >
                     <CategoryCard