@planetaexo/design-system 0.78.0 → 0.79.0

package/dist/index.cjs

@@ -19255,6 +19255,167 @@ function USP({
     )
   ] }) });
 }
+var C = {
+  imageOverlay: "linear-gradient(90deg, rgba(7,33,27,.93) 0%, rgba(8,42,34,.82) 52%, rgba(8,42,34,.62) 100%)",
+  baseBg: "#0a2c25",
+  eyebrow: "#a7e8c4",
+  head: "#f4f1e9",
+  sub: "rgba(244,241,233,.78)",
+  desc: "rgba(244,241,233,.72)",
+  divider: "rgba(244,241,233,.16)",
+  chipBg: "rgba(167,232,196,.16)",
+  chipIcon: "#bff0d6",
+  ctaBg: "#bff0d6",
+  ctaText: "#08231e"
+};
+var COLS2 = {
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 lg:grid-cols-3",
+  4: "sm:grid-cols-2 lg:grid-cols-4"
+};
+var ArrowIcon3 = () => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "18",
+    height: "18",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    className: "ml-2",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m12 5 7 7-7 7" })
+    ]
+  }
+);
+function USPBand({
+  eyebrow,
+  heading,
+  subheading,
+  items,
+  imageSrc,
+  cta,
+  columns,
+  className
+}) {
+  const cols = columns != null ? columns : Math.min(Math.max(items.length, 2), 4);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: cn("relative w-full overflow-hidden", className),
+      style: { backgroundColor: C.baseBg },
+      children: [
+        imageSrc && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: imageSrc,
+              alt: "",
+              "aria-hidden": true,
+              loading: "lazy",
+              decoding: "async",
+              className: "absolute inset-0 h-full w-full object-cover"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "absolute inset-0",
+              style: { background: C.imageOverlay }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mx-auto w-full max-w-6xl px-6 py-20 sm:px-8 sm:py-24", children: [
+          eyebrow && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "font-heading text-xs font-bold uppercase tracking-[0.2em]",
+              style: { color: C.eyebrow },
+              children: eyebrow
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: "mt-4 max-w-[15ch] font-heading text-3xl font-black uppercase leading-[0.98] tracking-tight sm:text-4xl lg:text-5xl",
+              style: { color: C.head },
+              children: heading
+            }
+          ),
+          subheading && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "mt-4 max-w-[52ch] font-sans text-lg leading-relaxed",
+              style: { color: C.sub },
+              children: subheading
+            }
+          ),
+          cta && /* @__PURE__ */ jsxRuntime.jsxs(
+            "a",
+            {
+              href: cta.href,
+              onClick: cta.onClick,
+              className: "mt-7 inline-flex items-center rounded-full px-6 py-3 font-heading text-sm font-bold uppercase tracking-wide no-underline transition-transform duration-200 hover:-translate-y-0.5",
+              style: { backgroundColor: C.ctaBg, color: C.ctaText },
+              children: [
+                cta.label,
+                /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon3, {})
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "mt-14 grid grid-cols-1 gap-x-8 gap-y-10 lg:gap-x-0",
+                COLS2[cols]
+              ),
+              children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "lg:px-7 lg:[&:first-child]:pl-0 lg:[&:not(:first-child)]:border-l lg:[&:not(:first-child)]:border-solid",
+                  style: { borderColor: C.divider },
+                  children: [
+                    item.icon && /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: "mb-5 flex h-[54px] w-[54px] items-center justify-center rounded-full [&>svg]:size-6",
+                        style: { backgroundColor: C.chipBg, color: C.chipIcon },
+                        children: item.icon
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "h3",
+                      {
+                        className: "font-heading text-lg font-bold leading-snug",
+                        style: { color: C.head },
+                        children: item.title
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "p",
+                      {
+                        className: "mt-3 font-sans text-[15px] leading-relaxed",
+                        style: { color: C.desc },
+                        children: item.description
+                      }
+                    )
+                  ]
+                },
+                i
+              ))
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 function RotatingSubtitle({
   phrases,
   interval,
@@ -19975,6 +20136,7 @@ exports.TripHeader = TripHeader;
 exports.TripPage = TripPage;
 exports.TrustpilotEmbed = TrustpilotEmbed;
 exports.USP = USP;
+exports.USPBand = USPBand;
 exports.buttonVariants = buttonVariants;
 exports.chipVariants = chipVariants;
 exports.cn = cn;