Update categories slider slides count problem

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/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

frontend/pages/index.vue

@@ -23,14 +23,14 @@ if (response.isError) {
 <template>
     <div class="w-full">
         <!-- <LoadingOverlay /> -->
-        <Hero class="mb-20 max-md:mt-[80px]" />
+        <Hero class="mb-20 max-md:mt-20" />
         <Preview />
         <ProductsShowcase class="lg:mb-12" />
-        <div class="py-[5rem]">
+        <div class="py-20">
             <ProductsSlider
-            title="محصولات پرفروش"
+                title="محصولات پرفروش"
-            :products="homeData!.products"
+                :products="homeData!.products"
-        />
+            />
         </div>
         <Categories class="mt-12" />
         <Brands />