Add shadow to header gsap

frontend/components/home/Hero.vue

@@ -48,7 +48,7 @@ watch(
     () => [shouldPauseVideos.value, swiper_instance.value?.realIndex],
     () => {
         updateVideoStates();
-    }
+    },
 );
 
 // lifecycle
@@ -64,7 +64,7 @@ const initializeGsapAnimation = () => {
             {
                 height: "80svh",
                 borderRadius: "20px",
-            }
+            },
         )
         .fromTo(
             slidesPerView,
@@ -74,7 +74,7 @@ const initializeGsapAnimation = () => {
             {
                 value: 1.2,
             },
-            "="
+            "=",
         )
         .fromTo(
             ".header-navbar-item",
@@ -84,16 +84,18 @@ const initializeGsapAnimation = () => {
             {
                 filter: "invert(0%)",
             },
-            "="
+            "=",
         )
         .fromTo(
             "#header-navbar",
             {
+                boxShadow: "0 10px 15px -3px rgba(0,0,0,0)",
                 background: "transparent",
             },
             {
+                boxShadow: "0 10px 15px -3px rgba(0,0,0,0.05)",
                 background: "white",
-            }
+            },
         )
         .fromTo(
             "#header-slider-wrapper",
@@ -108,13 +110,14 @@ const initializeGsapAnimation = () => {
                 },
                 scale: 1,
             },
-            "="
+            "=",
         );
 };
 
 const resetTimelineForMobile = () => {
     gsap.to("#header-navbar", {
         background: "white",
+        boxShadow: "0 10px 15px -3px rgba(0,0,0,0.05)"
     });
     gsap.to(".header-navbar-item", {
         filter: "invert(0%)",
@@ -243,7 +246,9 @@ onUnmounted(() => {
                                                     class="transition-all cursor-pointer flex-center bg-white z-10 size-full rounded-full"
                                                 >
                                                     <Icon
-                                                        :name="isMuted ? 'ci:bi-volume-mute-fill' : 'ci:bi-volume-up-fill'"
+                                                        :name="
+                                                            isMuted ? 'ci:bi-volume-mute-fill' : 'ci:bi-volume-up-fill'
+                                                        "
                                                         class="text-black size-4 md:size-[18px] lg:size-[24px]"
                                                     />
                                                 </button>