Fix bugs

frontend/components/home/Hero.vue

@@ -32,7 +32,9 @@ let scrollTrigger: ScrollTrigger;
 // methods
 
 const onSwiper = (swiper: SwiperClass) => {
-    showLoadingOverlay.value = false;
+    setTimeout(() => {
+        showLoadingOverlay.value = false;
+    }, 1000);
     swiper_instance.value = swiper;
 };
 
@@ -70,11 +72,9 @@ const initializeGsapAnimation = () => {
         }, {
             value: 1.2
         }, "=")
-        .fromTo("#header-navbar", {
-            background: "transparent",
+        .fromTo(".header-navbar-item", {
             filter: "invert(100%)"
         }, {
-            background: "transparent",
             filter: "invert(0%)"
         }, "=")
         .fromTo("#header-navbar", {
@@ -96,7 +96,9 @@ const initializeGsapAnimation = () => {
 
 const resetTimelineForMobile = () => {
     gsap.to("#header-navbar", {
-        background: "white",
+        background: "white"
+    });
+    gsap.to(".header-navbar-item", {
         filter: "invert(0%)"
     });
     gsap.set(".header-slider-item", {
@@ -113,6 +115,7 @@ onMounted(() => {
     initializeGsapAnimation();
 
     scrollTrigger = ScrollTrigger.create({
+        anticipatePin: 1,
         trigger: "#header-slider-container",
         animation: gsapTimeline,
         scrub: 1,
@@ -124,27 +127,23 @@ onMounted(() => {
 
     const calculateOnResize = () => {
         if (window.innerWidth > 768) {
-            gsap.to("#header-navbar", {
-                background: "transparent",
-                filter: "invert(100%)"
-            });
             scrollTrigger.enable();
         } else {
             resetTimelineForMobile();
             scrollTrigger.disable();
         }
-    }
+    };
 
     setTimeout(() => {
-        calculateOnResize()
+        calculateOnResize();
     }, 100);
 
     setTimeout(() => {
-        calculateOnResize()
+        calculateOnResize();
     }, 200);
 
     window.addEventListener("resize", () => {
-        calculateOnResize()
+        calculateOnResize();
     });
 
 });
@@ -213,7 +212,8 @@ onUnmounted(() => {
                                         <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">
-                                                <div class="size-full scale-75 bg-white absolute rounded-full animate-ping" />
+                                                <div
+                                                    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"