@harshit-wander/component-lib 1.1.6 → 1.1.8

package/dist/index.js

@@ -3,6 +3,8 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
+import { EffectCards } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
 
 // src/components/BrandLogo/BrandLogo.tsx
 var cn = (...inputs) => twMerge(clsx(inputs));
@@ -1123,7 +1125,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))
@@ -1468,7 +1470,7 @@ var ContactSection = forwardRef(
             children: illustration
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "shrink-0 flex justify-center w-full px-md lg:w-auto lg:px-0", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "shrink-0 flex justify-center", children: /* @__PURE__ */ jsx(
           ContactForm,
           {
             eyebrow,
@@ -2750,24 +2752,46 @@ var TripsCategorySection = forwardRef(
       cta.onClick?.();
     };
     const progressWidth = Math.min(33 + scrollProgress * (120 - 33), 120);
-    return /* @__PURE__ */ jsxs("section", { ref, className: cn("relative flex flex-col bg-surface", className), ...rest, children: [
+    return /* @__PURE__ */ jsxs("section", { ref, className: cn("relative flex flex-col bg-surface max-md:overflow-x-hidden", className), ...rest, children: [
       /* @__PURE__ */ jsxs("div", { className: "relative h-[318px] rounded-lg overflow-hidden max-md:h-[260px]", children: [
-        /* @__PURE__ */ 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__ */ jsx("video", { autoPlay: true, muted: true, loop: true, playsInline: true, poster, src: videoSrc }) }),
-        /* @__PURE__ */ 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__ */ jsxs("div", { className: "absolute inset-0", children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: poster,
+              alt: "",
+              "aria-hidden": "true",
+              className: "w-full h-full object-cover md:hidden"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "video",
+            {
+              autoPlay: true,
+              muted: true,
+              loop: true,
+              playsInline: true,
+              poster,
+              src: videoSrc,
+              className: "hidden md:block w-full h-full object-cover"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ 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__ */ jsx("h2", { className: "m-0 text-hero-title max-w-[436px]", children: title }),
-          /* @__PURE__ */ jsx("p", { className: "m-0 text-xs font-bold leading-5", children: description }),
+          /* @__PURE__ */ jsx("p", { className: "max-md:hidden m-0 text-xs font-bold leading-5", children: description }),
           /* @__PURE__ */ 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__ */ jsxs("div", { className: "relative -mt-[68px] py-sm px-[25px]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative -mt-[68px] py-sm px-[25px] hidden md:block", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -2826,7 +2850,35 @@ var TripsCategorySection = forwardRef(
             )
           }
         )
-      ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "relative -mt-[60px] pb-md md:hidden flex justify-center", children: /* @__PURE__ */ jsx(
+        Swiper,
+        {
+          effect: "cards",
+          grabCursor: true,
+          modules: [EffectCards],
+          className: "w-[74vw] [aspect-ratio:289/367]",
+          style: { overflow: "visible" },
+          children: trips.map((trip) => /* @__PURE__ */ jsx(
+            SwiperSlide,
+            {
+              style: { borderRadius: "12px", overflow: "hidden" },
+              children: /* @__PURE__ */ 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`
+          ))
+        }
+      ) })
     ] });
   }
 );