From c5d0d1b1cb8b1209f7f804a579fce2e5d8dc56ef Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Sun, 22 Feb 2026 01:07:57 +0330
Subject: [PATCH] Update categories slider slides count problem

---
 .../global/product-detail/ProductsSlider.vue           |  8 ++++----
 frontend/components/home/Categories.vue                |  8 +++++++-
 frontend/pages/index.vue                               | 10 +++++-----
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/frontend/components/global/product-detail/ProductsSlider.vue b/frontend/components/global/product-detail/ProductsSlider.vue
index d2593c2..401149f 100644
--- a/frontend/components/global/product-detail/ProductsSlider.vue
+++ b/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"
diff --git a/frontend/components/home/Categories.vue b/frontend/components/home/Categories.vue
index 68a066d..3d83cec 100644
--- a/frontend/components/home/Categories.vue
+++ b/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
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 153e429..4d68984 100644
--- a/frontend/pages/index.vue
+++ b/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="محصولات پرفروش"
-            :products="homeData!.products"
-        />
+                title="محصولات پرفروش"
+                :products="homeData!.products"
+            />
         </div>
         <Categories class="mt-12" />
         <Brands />