From e4e7c8adfbf3f0e6f4927e785bdb6941521bc165 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Thu, 22 May 2025 01:07:05 +0330
Subject: [PATCH] Update arrow buttons and swiper responsive

---
 frontend/components/home/Categories.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/components/home/Categories.vue b/frontend/components/home/Categories.vue
index af8912e..a4e65bf 100644
--- a/frontend/components/home/Categories.vue
+++ b/frontend/components/home/Categories.vue
@@ -60,7 +60,17 @@ 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,
                     },
@@ -95,7 +105,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 +119,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"