Connect thumbnails

frontend/components/home/Hero.vue

@@ -117,7 +117,7 @@ const initializeGsapAnimation = () => {
 const resetTimelineForMobile = () => {
     gsap.to("#header-navbar", {
         background: "white",
-        boxShadow: "0 10px 15px -3px rgba(0,0,0,0.05)"
+        boxShadow: "0 10px 15px -3px rgba(0,0,0,0.05)",
     });
     gsap.to(".header-navbar-item", {
         filter: "invert(0%)",
@@ -182,12 +182,13 @@ onUnmounted(() => {
         <div
             id="header-slider-wrapper"
             class="relative"
-            :class="swiper_instance ? '' : 'min-h-svh'"
+            :class="swiper_instance ? '' : 'min-h-svh bg-black'"
         >
             <Swiper
                 ref="observerTarget"
+                :class="swiper_instance ? '' : 'opacity-0'"
                 :slides-per-view="slidesPerView"
-                :loop="true"
+                :loop="false"
                 :centered-slides="true"
                 :breakpoints="{
                     768: {
@@ -211,7 +212,7 @@ onUnmounted(() => {
                                     webkit-playsinline
                                     class="slide-video absolute inset-0 size-full object-cover brightness-90"
                                     :src="slide.video"
-                                    poster="/img/test-thumbnail.jpeg"
+                                    :poster="slide.image!"
                                 />
                             </template>