Fix hero slider bugs

frontend/components/home/Hero.vue

@@ -122,7 +122,7 @@ onMounted(() => {
         end: "bottom top"
     });
 
-    setTimeout(() => {
+    const calculateOnResize = () => {
         if (window.innerWidth > 768) {
             gsap.to("#header-navbar", {
                 background: "transparent",
@@ -133,19 +133,18 @@ onMounted(() => {
             resetTimelineForMobile();
             scrollTrigger.disable();
         }
+    }
+
+    setTimeout(() => {
+        calculateOnResize()
     }, 100);
 
+    setTimeout(() => {
+        calculateOnResize()
+    }, 200);
+
     window.addEventListener("resize", () => {
-        if (window.innerWidth > 768) {
-            gsap.to("#header-navbar", {
-                background: "transparent",
-                filter: "invert(100%)"
-            });
-            scrollTrigger.enable();
-        } else {
-            resetTimelineForMobile();
-            scrollTrigger.disable();
-        }
+        calculateOnResize()
     });
 
 });
@@ -170,7 +169,7 @@ onUnmounted(() => {
                 :centered-slides="true"
                 :breakpoints="{
                     768: {
-                        spaceBetween : 40
+                        spaceBetween : 40,
                     }
                 }"
                 @swiper="onSwiper"
@@ -178,8 +177,8 @@ onUnmounted(() => {
                 <SwiperSlide
                     v-for="(slide, index) in homeData!.sliders"
                     :key="slide.id"
-                    class="max-md:container"
                 >
+                    <div class="max-md:container">
                         <div
                             class="header-slider-item relative w-full overflow-hidden max-md:rounded-[20px]"
                         >
@@ -269,6 +268,7 @@ onUnmounted(() => {
                             </div>
 
                         </div>
+                    </div>
                 </SwiperSlide>
             </Swiper>
         </div>