@harshit-wander/component-lib 1.1.5 → 1.1.7

package/dist/index.cjs

@@ -5,6 +5,8 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
+var modules = require('swiper/modules');
+var react$1 = require('swiper/react');
 
 // src/components/BrandLogo/BrandLogo.tsx
 var cn = (...inputs) => tailwindMerge.twMerge(clsx.clsx(inputs));
@@ -477,7 +479,7 @@ var FeatureCard = react.forwardRef(
       style,
       ...rest,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-sm px-lg pt-lg", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 flex flex-col gap-sm px-lg pt-lg", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "m-0 text-lg font-semibold leading-card text-primary", children: h }),
           d ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-sm font-normal leading-body text-text", children: d }) : null
         ] }),
@@ -1125,7 +1127,7 @@ var MobileDrawer = ({
                     {
                       href: item.href,
                       onClick: onClose,
-                      className: "flex items-center py-[10px] px-9 text-text no-underline text-sm font-normal outline-none",
+                      className: "flex items-center py-[10px] px-5 text-text no-underline text-sm font-normal outline-none",
                       children: item.label
                     }
                   ) }, item.href))
@@ -2754,22 +2756,44 @@ var TripsCategorySection = react.forwardRef(
     const progressWidth = Math.min(33 + scrollProgress * (120 - 33), 120);
     return /* @__PURE__ */ jsxRuntime.jsxs("section", { ref, className: cn("relative flex flex-col bg-surface", className), ...rest, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-[318px] rounded-lg overflow-hidden max-md:h-[260px]", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 [&>img]:w-full [&>img]:h-full [&>img]:object-cover [&>video]:w-full [&>video]:h-full [&>video]:object-cover", children: /* @__PURE__ */ jsxRuntime.jsx("video", { autoPlay: true, muted: true, loop: true, playsInline: true, poster, src: videoSrc }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col justify-center gap-lg p-[44px] text-on-image [text-shadow:0px_6px_24px_rgba(0,0,0,0.16)]", 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 md:hidden"
+            }
+          ),
+          /* @__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]", children: title }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-xs font-bold leading-5", children: description }),
+          /* @__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: "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",
+              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]", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative -mt-[68px] py-sm px-[25px] hidden md:block", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -2828,7 +2852,35 @@ var TripsCategorySection = react.forwardRef(
             )
           }
         )
-      ] })
+      ] }),
+      /* @__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,
+            {
+              style: { borderRadius: "12px", overflow: "hidden" },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                TripCategoryCard,
+                {
+                  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`
+          ))
+        }
+      ) })
     ] });
   }
 );