Update category style and add category video

frontend/components/home/Categories.vue

@@ -4,17 +4,23 @@
 import { Swiper, SwiperSlide } from "swiper/vue";
 import type { SwiperClass } from "swiper/react";
 import useHomeData from "~/composables/api/home/useHomeData";
+import { EffectCoverflow } from "swiper/modules";
 
 // state
 
 const { data: homeData } = useHomeData();
 const swiper_instance = ref<SwiperClass | null>(null);
+const activeIndex = ref(0);
 
 // methods
 
 const onSwiper = (swiper: SwiperClass) => {
     swiper_instance.value = swiper;
 };
+
+const onSlideChange = (swiper: SwiperClass) => {
+    activeIndex.value = swiper.realIndex;
+};
 </script>
 
 <template>
@@ -23,7 +29,7 @@ const onSwiper = (swiper: SwiperClass) => {
         class="flex flex-col justify-center gap-4 bg-black sm:min-h-[110svh] relative overflow-hidden shrink-0 py-24 lg:py-32"
     >
         <div class="w-full relative flex-center z-10 container">
-            <span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4 2xl:typo-h-2"> دسته بندی ها </span>
+            <span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4 min-[2000px]:typo-h-2"> دسته بندی ها </span>
         </div>
 
         <div class="w-full mt-44 lg:mt-64 relative">
@@ -38,8 +44,17 @@ const onSwiper = (swiper: SwiperClass) => {
                 :loop="true"
                 :centered-slides="true"
                 :slides-per-view="1.5"
-                :space-between="20"
                 @swiper="onSwiper"
+                @slideChange="onSlideChange"
+                :modules="[EffectCoverflow]"
+                :effect="'coverflow'"
+                :coverflowEffect="{
+                    rotate: 10,
+                    stretch: -100,
+                    depth: 200,
+                    modifier: 1,
+                    slideShadows: true,
+                }"
                 :breakpoints="{
                     640: {
                         centeredSlides: true,
@@ -52,7 +67,7 @@ const onSwiper = (swiper: SwiperClass) => {
                 }"
             >
                 <SwiperSlide
-                    v-for="slide in homeData!.sub_categories"
+                    v-for="(slide, index) in homeData!.sub_categories"
                     :key="slide.id"
                 >
                     <CategoryCard
@@ -61,6 +76,7 @@ const onSwiper = (swiper: SwiperClass) => {
                         :category="slide.name"
                         :picture="slide.image"
                         :count="slide.product_count"
+                        :isActive="activeIndex === index"
                         description="توضیحات دسته بندی"
                     />
                 </SwiperSlide>