@harshit-wander/component-lib 1.1.9 → 1.1.11

package/dist/index.cjs

@@ -274,30 +274,65 @@ var DestinationCard = react.forwardRef(
 DestinationCard.displayName = "DestinationCard";
 var frameClass = "block w-full h-[300px] overflow-hidden rounded-md no-underline text-inherit focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2";
 var EventBanner = react.forwardRef(
-  ({ imageUrl, alt, href, className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("shrink-0 w-full snap-start", className), ...rest, children: href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: frameClass, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: imageUrl, alt, className: "block w-full h-full object-cover" }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: frameClass, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: imageUrl, alt, className: "block w-full h-full object-cover" }) }) })
+  ({ imageUrl, alt, href, className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("shrink-0 w-full snap-start", className), ...rest, children: href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: frameClass, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: imageUrl,
+      alt,
+      loading: "lazy",
+      decoding: "async",
+      className: "block w-full h-full object-cover"
+    }
+  ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: frameClass, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: imageUrl,
+      alt,
+      loading: "lazy",
+      decoding: "async",
+      className: "block w-full h-full object-cover"
+    }
+  ) }) })
 );
 EventBanner.displayName = "EventBanner";
 var frameClass2 = "block w-full h-[300px] overflow-hidden rounded-md no-underline text-inherit focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2";
-var videoClass = "block w-full h-full object-cover";
+var mediaClass = "block w-full h-full object-cover";
 var EventVideoBanner = react.forwardRef(
-  ({ posterUrl, videoUrl, alt, href, className, ...rest }, ref) => {
+  ({
+    posterUrl,
+    videoUrl,
+    alt,
+    href,
+    mobileVideoUrl,
+    mobilePosterUrl,
+    isActive = true,
+    className,
+    ...rest
+  }, ref) => {
     const videoRef = react.useRef(null);
     react.useEffect(() => {
+      if (!isActive) return;
       const video = videoRef.current;
       if (!video || !videoUrl) return;
-      if (!videoUrl.includes(".m3u8")) {
-        video.src = videoUrl;
+      const isMobileViewport = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(max-width: 767px)").matches;
+      const activeUrl = isMobileViewport && mobileVideoUrl ? mobileVideoUrl : videoUrl;
+      const activePoster = isMobileViewport && mobilePosterUrl ? mobilePosterUrl : posterUrl;
+      if (activePoster && video.poster !== activePoster) {
+        video.poster = activePoster;
+      }
+      if (!activeUrl.includes(".m3u8")) {
+        video.src = activeUrl;
         return;
       }
       if (video.canPlayType("application/vnd.apple.mpegurl")) {
-        video.src = videoUrl;
+        video.src = activeUrl;
         return;
       }
       let cancelled = false;
       import('hls.js').then(({ default: Hls }) => {
         if (cancelled || !Hls.isSupported()) return;
         const hls = new Hls({ autoStartLoad: true, startLevel: -1 });
-        hls.loadSource(videoUrl);
+        hls.loadSource(activeUrl);
         hls.attachMedia(video);
         video._hls = hls;
       });
@@ -306,12 +341,11 @@ var EventVideoBanner = react.forwardRef(
         const stored = video._hls;
         stored?.destroy();
       };
-    }, [videoUrl]);
-    const videoEl = /* @__PURE__ */ jsxRuntime.jsx(
+    }, [videoUrl, mobileVideoUrl, posterUrl, mobilePosterUrl, isActive]);
+    const mediaEl = isActive ? /* @__PURE__ */ jsxRuntime.jsx(
       "video",
       {
         ref: videoRef,
-        src: videoUrl?.includes(".m3u8") ? void 0 : videoUrl,
         poster: posterUrl,
         "aria-label": alt,
         muted: true,
@@ -319,10 +353,16 @@ var EventVideoBanner = react.forwardRef(
         loop: true,
         playsInline: true,
         preload: "metadata",
-        className: videoClass
+        className: mediaClass
       }
+    ) : (
+      // <picture> lets the browser pick mobile/desktop poster via CSS, no JS
+      /* @__PURE__ */ jsxRuntime.jsxs("picture", { children: [
+        mobilePosterUrl ? /* @__PURE__ */ jsxRuntime.jsx("source", { media: "(max-width: 767px)", srcSet: mobilePosterUrl }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("img", { src: posterUrl, alt, loading: "lazy", decoding: "async", className: mediaClass })
+      ] })
     );
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("shrink-0 w-full snap-start", className), ...rest, children: href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: frameClass2, children: videoEl }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: frameClass2, children: videoEl }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("shrink-0 w-full snap-start", className), ...rest, children: href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: frameClass2, children: mediaEl }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: frameClass2, children: mediaEl }) });
   }
 );
 EventVideoBanner.displayName = "EventVideoBanner";
@@ -395,7 +435,16 @@ var cardClass2 = "shrink-0 w-[132px] flex flex-col bg-surface border border-bord
 var ExploreCard = react.forwardRef(
   ({ image, alt, label, href, className, ...rest }, ref) => {
     const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("img", { src: image, alt, className: "block w-full h-[102px] object-cover" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: image,
+          alt,
+          loading: "lazy",
+          decoding: "async",
+          className: "block w-full h-[102px] object-cover"
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center justify-center min-h-[56px] py-sm px-md text-md font-medium leading-card text-secondary text-center", children: label })
     ] });
     if (href) {
@@ -518,7 +567,16 @@ var GalleryPhoto = react.forwardRef(
       ),
       ...rest,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("img", { src: image, alt, className: "block w-full h-full object-cover" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: image,
+            alt,
+            loading: "lazy",
+            decoding: "async",
+            className: "block w-full h-full object-cover"
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-12 left-sm inline-flex items-center gap-xs py-[2px] px-[6px] bg-black/40 border-[0.5px] border-secondary rounded-full text-on-dark text-xs font-normal leading-4 max-md:bottom-8", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "span",
@@ -774,7 +832,7 @@ var TestimonialCard = react.forwardRef(
   ({ thumbnail, thumbnailAlt, logo, logoAlt, caption, videoHref, onPlayClick, className, ...rest }, ref) => {
     const playLabel = `Play testimonial: ${caption}`;
     const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("img", { src: thumbnail, alt: thumbnailAlt }),
+      /* @__PURE__ */ jsxRuntime.jsx("img", { src: thumbnail, alt: thumbnailAlt, loading: "lazy", decoding: "async" }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 inline-flex items-center justify-center w-[56px] h-[56px] pointer-events-none z-[1] text-white", children: /* @__PURE__ */ jsxRuntime.jsx(PlaySvg, {}) })
     ] });
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -809,7 +867,16 @@ var TestimonialCard = react.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-sm w-full py-md", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: logoAlt, className: "w-[60px] h-[60px] object-contain shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: logo,
+                alt: logoAlt,
+                loading: "lazy",
+                decoding: "async",
+                className: "w-[60px] h-[60px] object-contain shrink-0"
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-md font-medium leading-8 text-secondary", children: caption })
           ] })
         ]
@@ -820,17 +887,21 @@ var TestimonialCard = react.forwardRef(
 TestimonialCard.displayName = "TestimonialCard";
 var cardClass4 = "relative flex flex-col justify-end shrink-0 w-[200px] h-[316px] p-[20px] border-2 border-surface rounded-lg overflow-hidden no-underline text-inherit snap-start focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2";
 var TripCategoryCard = react.forwardRef(
-  ({ image, alt, destination, startingPrice, href, className, ...rest }, ref) => {
+  ({ image, mobileImage, alt, destination, startingPrice, href, className, ...rest }, ref) => {
     const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          role: "img",
-          "aria-label": alt,
-          className: "absolute inset-0 bg-cover bg-center pointer-events-none",
-          style: { backgroundImage: `url(${image})` }
-        }
-      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("picture", { className: "absolute inset-0 pointer-events-none", children: [
+        mobileImage ? /* @__PURE__ */ jsxRuntime.jsx("source", { media: "(max-width: 767px)", srcSet: mobileImage }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: image,
+            alt,
+            loading: "lazy",
+            decoding: "async",
+            className: "absolute inset-0 w-full h-full object-cover"
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
@@ -1574,7 +1645,9 @@ var useScrollSnap = (itemCount) => {
     setScrollProgress(maxScroll > 0 ? el.scrollLeft / maxScroll : 0);
     if (itemCount > 0) {
       const itemWidth = el.scrollWidth / itemCount;
-      setActiveIndex(Math.round(el.scrollLeft / itemWidth));
+      if (itemWidth > 0) {
+        setActiveIndex(Math.round(el.scrollLeft / itemWidth));
+      }
     }
   }, [itemCount]);
   const setRef = react.useCallback(
@@ -1676,13 +1749,16 @@ var EventCarousel = react.forwardRef(
               ref: trackRef,
               className: "flex w-full gap-sm overflow-x-auto snap-x [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
               children: events.map(
-                (event) => "videoUrl" in event ? /* @__PURE__ */ jsxRuntime.jsx(
+                (event, index) => "videoUrl" in event ? /* @__PURE__ */ jsxRuntime.jsx(
                   EventVideoBanner,
                   {
                     posterUrl: event.posterUrl,
                     videoUrl: event.videoUrl,
+                    mobileVideoUrl: event.mobileVideoUrl,
+                    mobilePosterUrl: event.mobilePosterUrl,
                     alt: event.alt,
-                    href: event.href
+                    href: event.href,
+                    isActive: index === activeIndex
                   },
                   `${event.videoUrl}|${event.alt}`
                 ) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -2224,9 +2300,28 @@ var useTypewriter = (phrases, options) => {
   return text;
 };
 var HomeHero = react.forwardRef(
-  ({ videoUrl, posterUrl, title, cyclingPhrases, typewriter, reviews, className, ...rest }, ref) => {
+  ({
+    videoUrl,
+    posterUrl,
+    mobilePosterUrl,
+    title,
+    cyclingPhrases,
+    typewriter,
+    reviews,
+    className,
+    ...rest
+  }, ref) => {
     const currentPhrase = useTypewriter(cyclingPhrases, typewriter);
     const hasReviews = reviews !== void 0 && reviews.length > 0;
+    const videoRef = react.useRef(null);
+    react.useEffect(() => {
+      const video = videoRef.current;
+      if (!video || !mobilePosterUrl) return;
+      if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+      if (window.matchMedia("(max-width: 767px)").matches) {
+        video.poster = mobilePosterUrl;
+      }
+    }, [mobilePosterUrl]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -2237,6 +2332,7 @@ var HomeHero = react.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx(
             "video",
             {
+              ref: videoRef,
               src: videoUrl,
               poster: posterUrl,
               muted: true,
@@ -2715,6 +2811,34 @@ var TextSection = react.forwardRef(
   )
 );
 TextSection.displayName = "TextSection";
+var useDesktopVideoVisible = (ref, breakpointPx = 768) => {
+  const [shouldRender, setShouldRender] = react.useState(false);
+  react.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia(`(min-width: ${breakpointPx}px)`);
+    if (!mq.matches) {
+      setShouldRender(false);
+      return;
+    }
+    const el = ref.current;
+    if (!el || typeof IntersectionObserver === "undefined") {
+      setShouldRender(true);
+      return;
+    }
+    const io = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          setShouldRender(true);
+          io.disconnect();
+        }
+      },
+      { rootMargin: "200px" }
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, [ref, breakpointPx]);
+  return shouldRender;
+};
 var ChevronLeft5 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
   "path",
   {
@@ -2746,6 +2870,8 @@ var TripsCategorySection = react.forwardRef(
       canNext,
       scrollProgress
     } = useScrollSnap(trips.length);
+    const heroRef = react.useRef(null);
+    const showDesktopVideo = useDesktopVideoVisible(heroRef);
     const handleCtaClick = () => {
       if (cta.href) {
         window.location.assign(cta.href);
@@ -2754,134 +2880,154 @@ var TripsCategorySection = react.forwardRef(
       cta.onClick?.();
     };
     const progressWidth = Math.min(33 + scrollProgress * (120 - 33), 120);
-    return /* @__PURE__ */ jsxRuntime.jsxs("section", { ref, className: cn("relative flex flex-col bg-surface max-md:overflow-x-clip", className), ...rest, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-[318px] rounded-lg overflow-hidden max-md:h-[260px]", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "section",
+      {
+        ref,
+        className: cn("relative flex flex-col bg-surface max-md:overflow-x-clip", className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
             {
-              src: poster,
-              alt: "",
-              "aria-hidden": "true",
-              className: "w-full h-full object-cover md:hidden"
+              ref: heroRef,
+              className: "relative h-[318px] rounded-lg overflow-hidden max-md:h-[260px]",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: poster,
+                      alt: "",
+                      "aria-hidden": "true",
+                      className: "w-full h-full object-cover",
+                      loading: "lazy",
+                      decoding: "async"
+                    }
+                  ),
+                  showDesktopVideo && /* @__PURE__ */ jsxRuntime.jsx(
+                    "video",
+                    {
+                      autoPlay: true,
+                      muted: true,
+                      loop: true,
+                      playsInline: true,
+                      preload: "metadata",
+                      poster,
+                      src: videoSrc,
+                      className: "hidden md:block absolute inset-0 w-full h-full object-cover"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col justify-center gap-lg p-[44px] max-md:p-[24px] text-on-image [text-shadow:0px_6px_24px_rgba(0,0,0,0.16)]", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 text-hero-title max-w-[436px] max-md:text-secondary max-md:[text-shadow:none]", children: title }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-md:hidden m-0 text-xs font-bold leading-5", children: description }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleCtaClick,
+                      className: "max-md:hidden inline-flex items-center justify-center self-start h-11 px-xl bg-accent text-secondary border-none rounded-md font-[inherit] text-button cursor-pointer shadow-[inset_0_0_6px_rgba(0,0,0,0.14)] transition-colors duration-150 ease-in hover:bg-accent-hover focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2",
+                      children: cta.label
+                    }
+                  )
+                ] })
+              ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "video",
-            {
-              autoPlay: true,
-              muted: true,
-              loop: true,
-              playsInline: true,
-              poster,
-              src: videoSrc,
-              className: "hidden md:block w-full h-full object-cover"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col justify-center gap-lg p-[44px] max-md:p-[24px] text-on-image [text-shadow:0px_6px_24px_rgba(0,0,0,0.16)]", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 text-hero-title max-w-[436px] max-md:text-secondary max-md:[text-shadow:none]", children: title }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-md:hidden m-0 text-xs font-bold leading-5", children: description }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: handleCtaClick,
-              className: "max-md:hidden inline-flex items-center justify-center self-start h-11 px-xl bg-accent text-secondary border-none rounded-md font-[inherit] text-button cursor-pointer shadow-[inset_0_0_6px_rgba(0,0,0,0.14)] transition-colors duration-150 ease-in hover:bg-accent-hover focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2",
-              children: cta.label
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative -mt-[68px] py-sm px-[25px] hidden md:block", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: scrollPrev,
-            disabled: !canPrev,
-            "aria-label": "Previous trips",
-            className: cn(arrowBase4, "left-2"),
-            children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft5, {})
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            ref: trackRef,
-            className: "flex gap-sm overflow-x-auto snap-x [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-            children: trips.map((trip) => /* @__PURE__ */ jsxRuntime.jsx(
-              TripCategoryCard,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative -mt-[68px] py-sm px-[25px] hidden md:block", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
               {
-                image: trip.image,
-                alt: trip.alt,
-                destination: trip.destination,
-                startingPrice: trip.startingPrice,
-                href: trip.href
-              },
-              `${trip.image}|${trip.destination}`
-            ))
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: scrollNext,
-            disabled: !canNext,
-            "aria-label": "Next trips",
-            className: cn(arrowBase4, "right-2"),
-            children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight5, {})
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            role: "progressbar",
-            "aria-valuenow": Math.round(scrollProgress * 100),
-            "aria-valuemin": 0,
-            "aria-valuemax": 100,
-            "aria-label": "Scroll position",
-            className: "relative w-[120px] h-[6px] mt-md mx-auto bg-track rounded-[32px] overflow-hidden",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
+                type: "button",
+                onClick: scrollPrev,
+                disabled: !canPrev,
+                "aria-label": "Previous trips",
+                className: cn(arrowBase4, "left-2"),
+                children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft5, {})
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
               {
-                className: "absolute top-0 left-0 h-full bg-primary rounded-[32px] transition-[width] duration-200 ease-in",
-                style: { width: `${progressWidth}px` }
+                ref: trackRef,
+                className: "flex gap-sm overflow-x-auto snap-x [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+                children: trips.map((trip) => /* @__PURE__ */ jsxRuntime.jsx(
+                  TripCategoryCard,
+                  {
+                    image: trip.image,
+                    mobileImage: trip.mobileImage,
+                    alt: trip.alt,
+                    destination: trip.destination,
+                    startingPrice: trip.startingPrice,
+                    href: trip.href
+                  },
+                  `${trip.image}|${trip.destination}`
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: scrollNext,
+                disabled: !canNext,
+                "aria-label": "Next trips",
+                className: cn(arrowBase4, "right-2"),
+                children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight5, {})
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                role: "progressbar",
+                "aria-valuenow": Math.round(scrollProgress * 100),
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-label": "Scroll position",
+                className: "relative w-[120px] h-[6px] mt-md mx-auto bg-track rounded-[32px] overflow-hidden",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "absolute top-0 left-0 h-full bg-primary rounded-[32px] transition-[width] duration-200 ease-in",
+                    style: { width: `${progressWidth}px` }
+                  }
+                )
               }
             )
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative -mt-[60px] pb-md md:hidden flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-        react$1.Swiper,
-        {
-          effect: "cards",
-          grabCursor: true,
-          modules: [modules.EffectCards],
-          className: "w-[74vw] [aspect-ratio:289/367]",
-          style: { overflow: "visible" },
-          children: trips.map((trip) => /* @__PURE__ */ jsxRuntime.jsx(
-            react$1.SwiperSlide,
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative -mt-[60px] pb-md md:hidden flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+            react$1.Swiper,
             {
-              style: { borderRadius: "12px", overflow: "hidden" },
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                TripCategoryCard,
+              effect: "cards",
+              grabCursor: true,
+              modules: [modules.EffectCards],
+              className: "w-[74vw] [aspect-ratio:289/367]",
+              style: { overflow: "visible" },
+              children: trips.map((trip) => /* @__PURE__ */ jsxRuntime.jsx(
+                react$1.SwiperSlide,
                 {
-                  image: trip.image,
-                  alt: trip.alt,
-                  destination: trip.destination,
-                  startingPrice: trip.startingPrice,
-                  href: trip.href,
-                  className: "w-full h-full rounded-xl shrink-0"
-                }
-              )
-            },
-            `${trip.image}|${trip.destination}|mobile`
-          ))
-        }
-      ) })
-    ] });
+                  style: { borderRadius: "12px", overflow: "hidden" },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    TripCategoryCard,
+                    {
+                      image: trip.image,
+                      mobileImage: trip.mobileImage,
+                      alt: trip.alt,
+                      destination: trip.destination,
+                      startingPrice: trip.startingPrice,
+                      href: trip.href,
+                      className: "w-full h-full rounded-xl shrink-0"
+                    }
+                  )
+                },
+                `${trip.image}|${trip.destination}|mobile`
+              ))
+            }
+          ) })
+        ]
+      }
+    );
   }
 );
 TripsCategorySection.displayName = "TripsCategorySection";