From a255b941df164021365050889f799a358675af69 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Wed, 16 Apr 2025 22:12:15 +0330
Subject: [PATCH] Updated

---
 frontend/components/home/Hero.vue | 186 +++++++++++++++++++-----------
 1 file changed, 119 insertions(+), 67 deletions(-)

diff --git a/frontend/components/home/Hero.vue b/frontend/components/home/Hero.vue
index 25ba9d1..24b10c7 100644
--- a/frontend/components/home/Hero.vue
+++ b/frontend/components/home/Hero.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 // import
 
 import { Swiper, SwiperSlide } from "swiper/vue";
@@ -15,12 +14,9 @@ const swiper_instance = ref<SwiperClass | null>(null);
 const observerTarget = ref(null);
 const shouldPauseVideos = ref(false);
 
-useIntersectionObserver(
-    observerTarget,
-    ([entry], observerElement) => {
-        shouldPauseVideos.value = entry.rootBounds ? !entry.isIntersecting : false;
-    }
-);
+useIntersectionObserver(observerTarget, ([entry], observerElement) => {
+    shouldPauseVideos.value = entry.rootBounds ? !entry.isIntersecting : false;
+});
 
 const isMuted = ref(true);
 const slidesPerView = ref(1);
@@ -37,7 +33,7 @@ const onSwiper = (swiper: SwiperClass) => {
 const updateVideoStates = () => {
     const activeIndex = swiper_instance.value?.realIndex || 0;
     const videosElements = document.querySelectorAll(`.slide-video`) as NodeListOf<HTMLVideoElement>;
-    videosElements.forEach(videoElement => {
+    videosElements.forEach((videoElement) => {
         if (videoElement.id === `slide-video-${activeIndex}` && !shouldPauseVideos.value) {
             videoElement.play();
         } else {
@@ -48,58 +44,84 @@ const updateVideoStates = () => {
 
 // watch
 
-watch(() => [shouldPauseVideos.value, swiper_instance.value?.realIndex], () => {
-    updateVideoStates();
-});
+watch(
+    () => [shouldPauseVideos.value, swiper_instance.value?.realIndex],
+    () => {
+        updateVideoStates();
+    }
+);
 
 // lifecycle
 
 const initializeGsapAnimation = () => {
     gsapTimeline
-        .fromTo(".header-slider-item", {
-            borderRadius: 0,
-            height: "100svh"
-        }, {
-            height: "80svh",
-            borderRadius: "20px"
-        })
-        .fromTo(slidesPerView, {
-            value: 1
-        }, {
-            value: 1.2
-        }, "=")
-        .fromTo(".header-navbar-item", {
-            filter: "invert(100%)"
-        }, {
-            filter: "invert(0%)"
-        }, "=")
-        .fromTo("#header-navbar", {
-            background: "transparent"
-        }, {
-            background: "white"
-        })
-        .fromTo("#header-slider-wrapper", {
-            marginTop: "0px",
-            scale: 1.025
-        }, {
-            marginTop: () => {
-                const navbarEl = document.querySelector("#header-navbar") as HTMLDivElement;
-                return `${navbarEl.clientHeight}px`;
+        .fromTo(
+            ".header-slider-item",
+            {
+                borderRadius: 0,
+                height: "100svh",
             },
-            scale: 1
-        }, "=");
+            {
+                height: "80svh",
+                borderRadius: "20px",
+            }
+        )
+        .fromTo(
+            slidesPerView,
+            {
+                value: 1,
+            },
+            {
+                value: 1.2,
+            },
+            "="
+        )
+        .fromTo(
+            ".header-navbar-item",
+            {
+                filter: "invert(100%)",
+            },
+            {
+                filter: "invert(0%)",
+            },
+            "="
+        )
+        .fromTo(
+            "#header-navbar",
+            {
+                background: "transparent",
+            },
+            {
+                background: "white",
+            }
+        )
+        .fromTo(
+            "#header-slider-wrapper",
+            {
+                marginTop: "0px",
+                scale: 1.025,
+            },
+            {
+                marginTop: () => {
+                    const navbarEl = document.querySelector("#header-navbar") as HTMLDivElement;
+                    return `${navbarEl.clientHeight}px`;
+                },
+                scale: 1,
+            },
+            "="
+        );
 };
 
 const resetTimelineForMobile = () => {
     gsap.to("#header-navbar", {
-        background: "white"
+        background: "white",
     });
     gsap.to(".header-navbar-item", {
-        filter: "invert(0%)"
+        filter: "invert(0%)",
     });
     gsap.set(".header-slider-item", {
         borderRadius: "20px",
-        height: "450px"
+        height: "450px",
     });
 };
 
@@ -118,7 +140,7 @@ onMounted(() => {
         pin: true,
         start: "top top",
         // markers: true,
-        end: "bottom top"
+        end: "bottom top",
     });
 
     const calculateOnResize = () => {
@@ -141,14 +163,12 @@ onMounted(() => {
     window.addEventListener("resize", () => {
         calculateOnResize();
     });
-
 });
 
 onUnmounted(() => {
     resetTimelineForMobile();
     scrollTrigger.disable();
 });
-
 </script>
 
 <template>
@@ -156,7 +176,10 @@ onUnmounted(() => {
         id="header-slider-container"
         class="w-full z-50"
     >
-        <div id="header-slider-wrapper" class="relative">
+        <div
+            id="header-slider-wrapper"
+            class="relative"
+        >
             <Swiper
                 ref="observerTarget"
                 :slides-per-view="slidesPerView"
@@ -164,8 +187,8 @@ onUnmounted(() => {
                 :centered-slides="true"
                 :breakpoints="{
                     768: {
-                        spaceBetween : 40
-                    }
+                        spaceBetween: 40,
+                    },
                 }"
                 @swiper="onSwiper"
             >
@@ -174,9 +197,7 @@ onUnmounted(() => {
                     :key="slide.id"
                 >
                     <div class="max-md:container">
-                        <div
-                            class="header-slider-item relative w-full overflow-hidden max-md:rounded-[20px]"
-                        >
+                        <div class="header-slider-item relative w-full overflow-hidden max-md:rounded-[20px]">
                             <template v-if="!!slide.video">
                                 <video
                                     :id="`slide-video-${index}`"
@@ -202,14 +223,15 @@ onUnmounted(() => {
                                 :class="swiper_instance?.realIndex !== index ? 'opacity-0' : ''"
                                 class="w-full transition-opacity pb-6 xs:pb-10 lg:pb-16 px-6 xs:px-10 lg:px-16 gap-6 xs:gap-10 lg:gap-12 container flex flex-col h-full justify-end relative z-10"
                             >
-
                                 <div class="header-slider-item-child w-full">
                                     <div class="border-b border-white/10 pb-6 flex flex-col gap-2 md:gap-4">
                                         <div class="flex items-center gap-4 lg:gap-8">
                                             <div
-                                                class="hover:scale-110 size-[36px] md:size-[42px] lg:size-[50px] relative flex items-center justify-center">
+                                                class="hover:scale-110 size-[36px] md:size-[42px] lg:size-[50px] relative flex items-center justify-center"
+                                            >
                                                 <div
-                                                    class="size-full scale-75 bg-white absolute rounded-full animate-ping" />
+                                                    class="size-full scale-75 bg-white absolute rounded-full animate-ping"
+                                                />
                                                 <button
                                                     @click="isMuted = !isMuted"
                                                     class="transition-all cursor-pointer flex-center bg-white z-10 size-full rounded-full"
@@ -244,7 +266,11 @@ onUnmounted(() => {
                                     id="header-slider-pagination-child"
                                     class="flex items-center justify-between"
                                 >
-                                    <button @click="swiper_instance?.slidePrev()">
+                                    <button
+                                        @click="swiper_instance?.slidePrev()"
+                                        class="relative"
+                                    >
+                                        <div class="size-8 blur-xl bg-white absolute ping-animation max-sm:hidden"></div>
                                         <Icon
                                             class="**:stroke-white cursor-pointer size-6 md:size-8"
                                             name="ci:arrow-right"
@@ -253,27 +279,53 @@ onUnmounted(() => {
                                     <div class="flex items-center justify-center gap-3 text-white">
                                         <div
                                             v-for="(_slide, index) in homeData!.sliders"
-                                            :class="swiper_instance?.realIndex === index ? 'bg-white' : 'bg-transparent'"
+                                            :class="
+                                                swiper_instance?.realIndex === index ? 'bg-white' : 'bg-transparent'
+                                            "
                                             class="border border-white size-2 md:size-3 rounded-full transition-all duration-200"
-                                        >
-                                        </div>
+                                        ></div>
                                     </div>
-                                    <button>
+                                    <button
+                                        @click="swiper_instance?.slideNext()"
+                                        class="relative"
+                                    >
+                                        <div class="size-8 blur-xl bg-white absolute ping-animation max-sm:hidden"></div>
                                         <Icon
-                                            @click="swiper_instance?.slideNext()"
                                             class="**:stroke-white cursor-pointer size-6 md:size-8"
                                             name="ci:arrow-left"
                                         />
                                     </button>
                                 </div>
-
                             </div>
-
                         </div>
                     </div>
                 </SwiperSlide>
             </Swiper>
         </div>
-
     </div>
-</template>
\ No newline at end of file
+</template>
+
+<style>
+@keyframes ping-anime {
+    0% {
+        scale: 0.7;
+        opacity: 1;
+    }
+
+    10% {
+        scale: 2;
+        opacity: 0;
+    }
+
+    100% {
+        scale: 2;
+        opacity: 0;
+    }
+}
+
+.ping-animation {
+    animation-name: ping-anime;
+    animation-iteration-count: infinite;
+    animation-duration: 6s;
+}
+</style>