Update category style and add category video

frontend/components/global/CategoryCard.vue

@@ -10,6 +10,7 @@ type Props = {
     description: string;
     picture: string;
     darkLayer?: boolean;
+    isActive: boolean;
 };
 
 // props
@@ -25,37 +26,43 @@ const { colorObject } = useImageColor(`#category-image-${id.value}`);
 <template>
     <NuxtLink :to="`/products?category=${id}`">
         <div class="group relative rounded-150 overflow-hidden w-full aspect-square bg-white brightness-[97%]">
-            <NuxtImg
-                :id="`category-image-${id}`"
-                class="group-hover:scale-105 transition-transform duration-200 absolute object-contain size-full"
-                :src="picture"
-                alt=""
-            />
+            <Transition name="fade">
+                <video
+                    v-if="isActive"
+                    src="/video/category.mp4"
+                    autoplay
+                    muted
+                    loop
+                    playsinline
+                    webkit-playsinline
+                    class="group-hover:scale-105 transition-transform duration-200 absolute object-contain size-full"
+                />
+                <NuxtImg
+                    v-else
+                    :id="`category-image-${id}`"
+                    class="group-hover:scale-105 transition-transform duration-200 absolute object-contain size-full"
+                    :src="picture"
+                    alt=""
+                />
+            </Transition>
+
             <div
                 v-if="darkLayer"
                 class="bg-linear-to-t from-black/50 to-transparent to-40% absolute z-10 size-full"
             />
 
-            <div
-                class="absolute z-20 bottom-0 p-4 md:p-6 flex items-center justify-between w-full"
-            >
-
+            <div class="absolute z-20 bottom-0 p-4 md:p-6 flex items-center justify-between w-full">
                 <div
-                    :class="colorObject?.isLight && !darkLayer ? 'text-black': 'text-white'"
+                    :class="colorObject?.isLight && !darkLayer ? 'text-black' : 'text-white'"
                     class="typo-sub-h-sm md:typo-sub-h-md"
                 >
                     {{ category }}
                 </div>
 
-
                 <Icon
                     name="ci:arrow-left"
                     class="size-5 md:size-6"
-                    :class="
-                        colorObject?.isLight && !darkLayer
-                            ? '**:stroke-black'
-                            : '**:stroke-white'
-                    "
+                    :class="colorObject?.isLight && !darkLayer ? '**:stroke-black' : '**:stroke-white'"
                 />
             </div>
         </div>

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>