diff --git a/frontend/components/home/ProductsShowcase.vue b/frontend/components/home/ProductsShowcase.vue
index 788d81e..6e8621a 100644
--- a/frontend/components/home/ProductsShowcase.vue
+++ b/frontend/components/home/ProductsShowcase.vue
@@ -2,135 +2,208 @@
 // import
 
 import useHomeData from "~/composables/api/home/useHomeData";
+import { motion } from "motion-v";
 
 // state
 
 const { data: homeData } = useHomeData();
 
-const { $gsap: gsap, $ScrollTrigger: ScrollTrigger } = useNuxtApp();
+const activeSlide = ref(0);
 
-let gsapTimeline: gsap.core.Timeline;
-let scrollTrigger: ScrollTrigger;
+const variants = {
+    hide: { opacity: 0, y: -200 },
+    show: {
+        opacity: 1,
+        y: 0,
+        transition: {
+            when: "beforeChildren",
+            staggerChildren: 0.15,
+        },
+    },
+    exit: (slidesCount: number) => {
+        return {
+            opacity: 0,
+            y: 200,
+            transition: {
+                when: "afterChildren",
+                delay: slidesCount * 0.21,
+                staggerChildren: 0.1,
+                staggerDirection: 1,
+            },
+        };
+    },
+};
 
-// lifecycle
+const childContentVariants = {
+    hide: {
+        filter: "blur(20px)",
+        opacity: 0,
+    },
+    show: {
+        filter: "blur(0px)",
+        opacity: 1,
+    },
+    exit: {
+        filter: "blur(20px)",
+        opacity: 0,
+    },
+};
+
+const childImageVariants = {
+    hide: {
+        filter: "blur(20px)",
+        y: 70,
+        scale: 0.65,
+        opacity: 0,
+    },
+    show: {
+        filter: "blur(0px)",
+        y: 0,
+        scale: 1,
+        opacity: 1,
+        transition: {
+            type: "spring",
+            damping: 20,
+        },
+    },
+    exit: {
+        filter: "blur(20px)",
+        y: 70,
+        scale: 0.65,
+        opacity: 0,
+        transition: {
+            default: {
+                type: "spring",
+                damping: 20,
+            },
+            opacity: {
+                duration: 0.1,
+            },
+        },
+    },
+};
+
+const nextSlide = () => {
+    const slidesCount = homeData.value!.show_case_slider.length;
+    if (activeSlide.value > slidesCount - 2) {
+        activeSlide.value = 0;
+    } else {
+        activeSlide.value = activeSlide.value + 1;
+    }
+};
 
 onMounted(() => {
-    gsapTimeline = gsap.timeline();
-    const showcaseElements = gsap.utils.toArray<HTMLElement>(".showcase-slide");
+    nextSlide();
 
-    setTimeout(() => {
-        showcaseElements.forEach((element, index) => {
-            gsapTimeline.fromTo(
-                element,
-                index === 0
-                    ? {
-                          opacity: 1,
-                          scale: 1,
-                          // rotateX: -25,
-                          zIndex: 1,
-                          top: 0,
-                          ease: "none",
-                      }
-                    : {
-                          opacity: 0,
-                          scale: 1,
-                          // rotateX: -25,
-                          zIndex: 1,
-                          top: 20,
-                          ease: "none",
-                      },
-                {
-                    opacity: 1,
-                    scale: 1,
-                    // rotateX: 0,
-                    zIndex: 5,
-                    top: 0,
-                    ease: "none",
-                },
-                index === 0 ? "-=0%" : undefined
-            );
-
-            if (index < showcaseElements.length - 1) {
-                gsapTimeline.to(element, {
-                    opacity: 0,
-                    scale: 1.03,
-                    // rotateX: 25,
-                    top: -20,
-                    ease: "none",
-                });
-            }
-        });
-
-        scrollTrigger = ScrollTrigger.create({
-            trigger: "#products-showcase-container",
-            animation: gsapTimeline,
-            scrub: 1,
-            pin: true,
-            start: "top top",
-            anticipatePin: 1,
-            // markers: true,
-            end: "bottom top",
-        });
-
-        setTimeout(() => {
-            scrollTrigger.update();
-            scrollTrigger.refresh();
-        }, 1000);
-    }, 1000);
-});
-
-onUnmounted(() => {
-    gsapTimeline.progress(1).pause();
-    gsapTimeline.kill();
+    setInterval(() => {
+        nextSlide();
+    }, 5000);
 });
 </script>
 
 <template>
-    <section
-        id="products-showcase-container"
-        class="perspective-midrange relative z-[999]"
-    >
-        <div class="w-full min-h-[120svh] lg:min-h-[102svh] bg-black">
-            <div
+    <section class="relative z-[999] h-[115svh] min-h-[1000px] pb-20 bg-black overflow-y-hidden flex-center">
+        <AnimatePresence mode="popLayout">
+            <template
                 v-for="(slide, index) in homeData!.show_case_slider"
-                :key="index"
-                class="showcase-slide origin-bottom absolute size-full bg-black flex items-center justify-center max-lg:-mt-16 lg:mt-5"
+                :key="slide.id"
             >
-                <NuxtImg
-                    class="w-[280px] xs:w-[350px] lg:w-[500px] xl:w-[650px] z-20 mb-30 sm:mb-20 lg:mb-30"
-                    :src="slide.image"
-                    :style="{
-                        mask: 'linear-gradient(to bottom, black 0%, rgba(0,0,0,0) 100%)',
-                    }"
-                    alt=""
-                />
-                <div class="flex flex-col items-center justify-center gap-6 text-center absolute z-20 mt-20">
-                    <span class="text-white typo-h-6 sm:typo-h-5 lg:typo-h-4 xl:typo-h-3">
-                        {{ slide.title }}
-                    </span>
-                    <p
-                        class="text-white max-w-[320px] xs:max-w-[360px] sm:max-w-[480px] lg:max-w-[550px] xl:max-w-[750px] typo-p-sm lg:typo-p-md xl:typo-p-lg"
-                    >
-                        {{ slide.description }}
-                    </p>
-                    <NuxtLink
-                        :to="`/resellers/category/${slide.id}`"
-                        class="relative"
-                    >
-                        <NuxtImg
-                            src="/img/heymlz/heymlz-falling.gif"
-                            class="absolute top-[101px] sm:top-[100px] lg:top-[117px] left-1/2 -translate-1/2 w-[200px] lg:w-[250px] drop-shadow-md"
-                        />
-                        <Button
-                            variant="primary"
-                            end-icon="ci:arrow-left"
-                            class="mt-8 max-sm:py-2 max-lg:typo-label-xs px-10 rounded-full hover:bg-transparent"
+                <motion.div
+                    v-if="activeSlide === index"
+                    :initial="{ opacity: 0 }"
+                    :animate="{ opacity: 1 }"
+                    :exit="{ opacity: 0 }"
+                    :transition="{ duration: 1 }"
+                    class="absolute size-full inset-0 -z-10"
+                >
+                    <NuxtImg
+                        :src="slide.background_image"
+                        class="absolute size-full object-cover"
+                    />
+                </motion.div>
+            </template>
+        </AnimatePresence>
+
+        <AnimatePresence mode="popLayout">
+            <template
+                v-for="(slide, index) in homeData!.show_case_slider"
+                :key="slide.id"
+            >
+                <motion.div
+                    v-if="activeSlide === index"
+                    :custom="homeData!.show_case_slider.length"
+                    :variants="variants"
+                    initial="hide"
+                    animate="show"
+                    exit="exit"
+                    class="size-full flex flex-col gap-20 items-center justify-center"
+                >
+                    <div class="flex items-center gap-6 perspective-midrange">
+                        <motion.div
+                            :variants="childImageVariants"
+                            class="origin-bottom-left"
                         >
-                            مشاهده دسته بندی
-                        </Button>
-                    </NuxtLink>
-                </div>
-            </div>
-        </div>
+                            <NuxtImg
+                                class="w-[300px] z-20 mt-40"
+                                :src="slide.image3"
+                                alt=""
+                            />
+                        </motion.div>
+
+                        <motion.div
+                            :variants="childImageVariants"
+                            class="origin-bottom"
+                        >
+                            <NuxtImg
+                                class="w-[300px] z-20"
+                                :src="slide.image2"
+                                alt=""
+                            />
+                        </motion.div>
+
+                        <motion.div
+                            :variants="childImageVariants"
+                            class="origin-bottom-right"
+                        >
+                            <NuxtImg
+                                class="w-[300px] z-20 mt-40"
+                                :src="slide.image1"
+                                alt=""
+                            />
+                        </motion.div>
+                    </div>
+
+                    <motion.div
+                        :variants="childContentVariants"
+                        class="flex flex-col items-center justify-center gap-6 text-center"
+                    >
+                        <span class="text-white typo-h-6 sm:typo-h-5 lg:typo-h-4 xl:typo-h-3">
+                            {{ slide.title }}
+                        </span>
+                        <p
+                            class="text-white max-w-[320px] xs:max-w-[360px] sm:max-w-[480px] lg:max-w-[550px] xl:max-w-[750px] typo-p-sm lg:typo-p-md xl:typo-p-lg"
+                        >
+                            {{ slide.description }}
+                        </p>
+                        <NuxtLink
+                            :to="`/resellers/category/${slide.id}`"
+                            class="relative"
+                        >
+                            <NuxtImg
+                                src="/img/heymlz/heymlz-falling.gif"
+                                class="absolute top-[101px] sm:top-[100px] lg:top-[117px] left-1/2 -translate-1/2 w-[200px] lg:w-[250px] drop-shadow-md"
+                            />
+                            <Button
+                                variant="primary"
+                                end-icon="ci:arrow-left"
+                                class="mt-8 max-sm:py-2 max-lg:typo-label-xs px-10 rounded-full hover:bg-transparent"
+                            >
+                                مشاهده دسته بندی
+                            </Button>
+                        </NuxtLink>
+                    </motion.div>
+                </motion.div>
+            </template>
+        </AnimatePresence>
     </section>
 </template>