@planetaexo/design-system 0.79.0 → 0.88.0

package/dist/index.cjs

@@ -15163,7 +15163,7 @@ var VARIANT2 = {
     heading: "text-foreground",
     body: "text-foreground/75",
     muted: "text-foreground/60",
-    link: "text-foreground/85 hover:text-primary-800 underline decoration-foreground/25 underline-offset-4 hover:decoration-primary-800",
+    link: "rounded-full px-3 py-1.5 -ml-3 transition-colors text-foreground/85 hover:bg-primary hover:text-white",
     badgeStroke: "text-foreground/80",
     /** Inverts white logos so they read on the light background. */
     badgeFilter: "[filter:invert(1)_brightness(0.2)]",
@@ -15180,7 +15180,7 @@ var VARIANT2 = {
     heading: "text-white",
     body: "text-white/75",
     muted: "text-white/55",
-    link: "text-white/85 hover:text-primary-400 underline decoration-white/20 underline-offset-4 hover:decoration-primary-400",
+    link: "rounded-full px-3 py-1.5 -ml-3 transition-colors text-white/85 hover:bg-primary hover:text-white",
     badgeStroke: "text-white",
     badgeFilter: "",
     socialBtn: "bg-white/10 text-white hover:bg-primary-400 hover:text-primary-900",
@@ -15390,8 +15390,8 @@ function SiteFooter({
     title: "Basecamp S\xE3o Paulo",
     lines: ["Av. Paulista, 1234", "01310-100 S\xE3o Paulo \xB7 Brasil"]
   },
-  phone = "+55 11 9999-0000",
-  email = "ola@planetaexo.com",
+  phone,
+  email,
   socials = DEFAULT_FOOTER_SOCIALS,
   themesTitle = "Temas",
   themes = DEFAULT_FOOTER_THEMES,
@@ -15400,11 +15400,7 @@ function SiteFooter({
   destinationsMore = { label: "Ver todos os destinos", href: "#" },
   pagesTitle = "P\xE1ginas",
   pages = DEFAULT_FOOTER_PAGES,
-  cta = {
-    title: "Colaborar?",
-    label: "parceiros@planetaexo.com",
-    href: "mailto:parceiros@planetaexo.com"
-  },
+  cta,
   copyright,
   legalLinks = DEFAULT_FOOTER_LEGAL,
   className
@@ -15504,22 +15500,22 @@ function SiteFooter({
       ] }),
       themes.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:col-span-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx(ColumnHeading, { className: t.heading, children: themesTitle }),
-        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2.5", children: themes.map((c) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-0.5", children: themes.map((c) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
           "a",
           {
             href: c.href,
-            className: cn("text-sm font-ui font-bold", t.link),
+            className: cn("inline-block text-sm font-ui font-bold", t.link),
             children: c.label
           }
         ) }, c.label)) })
       ] }),
       destinations.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:col-span-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx(ColumnHeading, { className: t.heading, children: destinationsTitle }),
-        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2.5", children: destinations.map((c) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-0.5", children: destinations.map((c) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
           "a",
           {
             href: c.href,
-            className: cn("text-sm font-ui font-bold", t.link),
+            className: cn("inline-block text-sm font-ui font-bold", t.link),
             children: c.label
           }
         ) }, c.label)) }),
@@ -15541,11 +15537,11 @@ function SiteFooter({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:col-span-2 space-y-8", children: [
         pages.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx(ColumnHeading, { className: t.heading, children: pagesTitle }),
-          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2.5", children: pages.map((p) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-0.5", children: pages.map((p) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
             "a",
             {
               href: p.href,
-              className: cn("text-sm font-ui font-bold", t.link),
+              className: cn("inline-block text-sm font-ui font-bold", t.link),
               children: p.label
             }
           ) }, p.label)) })
@@ -15684,6 +15680,7 @@ function TripPage({
   perPersonLabel,
   siteHeader,
   footerBadges,
+  footer,
   uiVariant = "v1",
   features,
   className
@@ -16318,7 +16315,7 @@ function TripPage({
               }
             ) }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-20 lg:hidden" }),
-            /* @__PURE__ */ jsxRuntime.jsx(SiteFooter, { badges: footerBadges })
+            /* @__PURE__ */ jsxRuntime.jsx(SiteFooter, __spreadValues({ badges: footerBadges }, footer))
           ]
         }
       )
@@ -16382,6 +16379,7 @@ function CategoryPage2({
   cardLabels,
   filterLabels,
   footerBadges,
+  footer,
   className
 }) {
   var _a;
@@ -16714,7 +16712,7 @@ function CategoryPage2({
         ) })
       ] });
     })(),
-    /* @__PURE__ */ jsxRuntime.jsx(SiteFooter, { badges: footerBadges })
+    /* @__PURE__ */ jsxRuntime.jsx(SiteFooter, __spreadValues({ badges: footerBadges }, footer))
   ] });
 }
 var sizeConfig3 = {
@@ -19416,6 +19414,159 @@ function USPBand({
     }
   );
 }
+var TONES = {
+  light: {
+    bg: "#faf7f1",
+    vars: {
+      "--ps-eyebrow": "#1a5f56",
+      "--ps-head": "#2e2d2c",
+      "--ps-sub": "#74726e",
+      "--ps-chip-bd": "#ccd2d0",
+      "--ps-chip-fg": "#2e2d2c",
+      "--ps-chip-hover-bg": "#1a5f56",
+      "--ps-chip-hover-fg": "#ffffff",
+      "--ps-feat-bg": "#1a5f56",
+      "--ps-feat-fg": "#ffffff",
+      "--ps-feat-hover-bg": "#0d3832"
+    }
+  },
+  dark: {
+    bg: "#14352e",
+    vars: {
+      "--ps-eyebrow": "#a7e8c4",
+      "--ps-head": "#f4f1e9",
+      "--ps-sub": "rgba(244,241,233,.7)",
+      "--ps-chip-bd": "rgba(244,241,233,.22)",
+      "--ps-chip-fg": "#f4f1e9",
+      "--ps-chip-hover-bg": "#f4f1e9",
+      "--ps-chip-hover-fg": "#14352e",
+      "--ps-feat-bg": "#bff0d6",
+      "--ps-feat-fg": "#08231e",
+      "--ps-feat-hover-bg": "#a7e8c4"
+    }
+  }
+};
+var SIZES = {
+  md: {
+    pad: "py-20 sm:py-28",
+    heading: "text-2xl sm:text-3xl lg:text-4xl",
+    chip: "px-3 py-1 text-xs sm:px-5 sm:py-2.5 sm:text-sm",
+    gap: "gap-1.5 sm:gap-2.5",
+    chipsMt: "mt-6 sm:mt-9"
+  },
+  sm: {
+    pad: "py-16 sm:py-24",
+    heading: "text-xl sm:text-2xl lg:text-3xl",
+    chip: "px-2.5 py-1 text-[11px] sm:px-3.5 sm:py-1.5 sm:text-[13px]",
+    gap: "gap-1.5 sm:gap-2",
+    chipsMt: "mt-5 sm:mt-7"
+  }
+};
+var SCOPED_CSS = `
+.ps-chip{border:1px solid var(--ps-chip-bd);background:transparent;color:var(--ps-chip-fg);text-decoration:none;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
+.ps-chip:hover{background:var(--ps-chip-hover-bg);border-color:var(--ps-chip-hover-bg);color:var(--ps-chip-hover-fg)}
+.ps-chip[data-featured="true"]{background:var(--ps-feat-bg);border-color:var(--ps-feat-bg);color:var(--ps-feat-fg)}
+.ps-chip[data-featured="true"]:hover{background:var(--ps-feat-hover-bg);border-color:var(--ps-feat-hover-bg)}
+`;
+function PopularSearches({
+  eyebrow,
+  title,
+  subtitle,
+  chips,
+  tone = "light",
+  size = "md",
+  align = "center",
+  className
+}) {
+  const t = TONES[tone];
+  const s = SIZES[size];
+  const centered = align === "center";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: cn("ps-root w-full", className),
+      style: __spreadValues({ backgroundColor: t.bg }, t.vars),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: SCOPED_CSS } }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto w-full max-w-6xl px-6 sm:px-8",
+              s.pad,
+              centered && "text-center"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-2xl", centered && "mx-auto"), children: [
+                eyebrow && /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: "mb-3 font-ui text-xs font-bold uppercase tracking-[0.24em]",
+                    style: { color: "var(--ps-eyebrow)" },
+                    children: eyebrow
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "h2",
+                  {
+                    className: cn(
+                      "font-heading font-black uppercase leading-[1.05]",
+                      s.heading
+                    ),
+                    style: { color: "var(--ps-head)" },
+                    children: title
+                  }
+                ),
+                subtitle && /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn("mt-3 max-w-[46ch] text-base", centered && "mx-auto"),
+                    style: { color: "var(--ps-sub)" },
+                    children: subtitle
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex max-w-4xl flex-wrap items-center",
+                    s.gap,
+                    s.chipsMt,
+                    centered ? "mx-auto justify-center" : "justify-start"
+                  ),
+                  children: chips.map((chip, i) => {
+                    const className2 = "ps-chip inline-flex items-center rounded-full font-ui font-bold " + s.chip;
+                    const inner = chip.label;
+                    return chip.href ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "a",
+                      {
+                        href: chip.href,
+                        onClick: chip.onClick,
+                        "data-featured": chip.featured ? "true" : void 0,
+                        className: className2,
+                        children: inner
+                      },
+                      i
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "data-featured": chip.featured ? "true" : void 0,
+                        className: className2,
+                        children: inner
+                      },
+                      i
+                    );
+                  })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 function RotatingSubtitle({
   phrases,
   interval,
@@ -19919,6 +20070,148 @@ function NewHome({
     footer && /* @__PURE__ */ jsxRuntime.jsx(SiteFooter, __spreadValues({}, footer))
   ] });
 }
+var SURFACE_PRIMARY_9002 = "bg-[oklch(0.27_0.040_179)]";
+function TrustpilotStar({
+  filled,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", className, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "24", height: "24", fill: filled ? "#00b67a" : "#dcdce6" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#ffffff",
+        d: "m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"
+      }
+    )
+  ] });
+}
+function TrustpilotStars({
+  stars = 5,
+  className = "h-7 w-7"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "flex items-center gap-1",
+      "aria-label": `${stars} out of 5 stars`,
+      children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        TrustpilotStar,
+        {
+          filled: i + 1 <= Math.round(stars),
+          className
+        },
+        i
+      ))
+    }
+  );
+}
+function ReviewsSpotlight({
+  eyebrow,
+  title,
+  link,
+  items,
+  intervalMs = 7e3,
+  className
+}) {
+  const [index, setIndex] = React20__namespace.useState(0);
+  const [visible, setVisible] = React20__namespace.useState(true);
+  const reduced = React20__namespace.useRef(false);
+  const swapRef = React20__namespace.useRef(null);
+  React20__namespace.useEffect(() => {
+    var _a;
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    reduced.current = mq.matches;
+    const onChange = () => {
+      reduced.current = mq.matches;
+    };
+    (_a = mq.addEventListener) == null ? void 0 : _a.call(mq, "change", onChange);
+    return () => {
+      var _a2;
+      return (_a2 = mq.removeEventListener) == null ? void 0 : _a2.call(mq, "change", onChange);
+    };
+  }, []);
+  const goTo = React20__namespace.useCallback((resolve) => {
+    if (reduced.current) {
+      setIndex((i) => resolve(i));
+      return;
+    }
+    setVisible(false);
+    swapRef.current = setTimeout(() => {
+      setIndex((i) => resolve(i));
+      setVisible(true);
+    }, 260);
+  }, []);
+  React20__namespace.useEffect(() => {
+    if (items.length <= 1 || intervalMs <= 0) return;
+    const id = setInterval(() => {
+      if (!reduced.current) goTo((i) => (i + 1) % items.length);
+    }, intervalMs);
+    return () => {
+      clearInterval(id);
+      if (swapRef.current) clearTimeout(swapRef.current);
+    };
+  }, [items.length, intervalMs, goTo]);
+  if (!items.length) return null;
+  const safe = Math.min(index, items.length - 1);
+  const review = items[safe];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "section",
+    {
+      className: cn(SURFACE_PRIMARY_9002, "py-24 text-white sm:py-32", className),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto w-full max-w-3xl px-6 text-center sm:px-8", children: [
+        eyebrow && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-ui text-xs font-bold uppercase tracking-[0.22em] text-primary", children: eyebrow }),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "sr-only", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "transition-opacity duration-300",
+              visible ? "opacity-100" : "opacity-0"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-8 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(TrustpilotStars, { stars: review.stars, className: "h-7 w-7" }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("blockquote", { className: "mx-auto mt-8 max-w-[20ch] font-sans text-3xl font-normal italic leading-[1.3] text-white sm:text-4xl", children: [
+                "\u201C",
+                review.quote,
+                "\u201D"
+              ] }),
+              (review.author || review.location) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6", children: [
+                review.author && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-ui text-base font-bold tracking-wide text-white", children: review.author }),
+                review.location && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 font-sans text-sm text-white/55", children: review.location })
+              ] })
+            ]
+          }
+        ),
+        items.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-10 flex justify-center gap-2.5", children: items.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Show review ${i + 1} of ${items.length}`,
+            "aria-current": i === safe,
+            onClick: () => goTo(() => i),
+            className: cn(
+              "h-2 w-2 rounded-full transition-colors",
+              i === safe ? "bg-primary" : "bg-white/25 hover:bg-white/45"
+            )
+          },
+          i
+        )) }),
+        link && /* @__PURE__ */ jsxRuntime.jsxs(
+          "a",
+          {
+            href: link.href,
+            className: "group mt-10 inline-flex items-center gap-1.5 font-ui text-sm font-bold text-primary transition-colors hover:text-primary-800",
+            children: [
+              link.label,
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, { className: "h-4 w-4 transition-transform group-hover:translate-x-1" })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
 var ACTIVE_PILL = "bg-primary text-white shadow-sm";
 var VARIANT3 = {
   black: {
@@ -20111,6 +20404,7 @@ exports.PhoneCountrySelect = PhoneCountrySelect;
 exports.PhotoGallery = PhotoGallery;
 exports.PhotoTourProvider = PhotoTourProvider;
 exports.Picture = Picture;
+exports.PopularSearches = PopularSearches;
 exports.PriceProgress = PriceProgress;
 exports.PricingMatrixCard = PricingMatrixCard;
 exports.PricingTrip = PricingTrip;
@@ -20119,6 +20413,7 @@ exports.RegistrationProgressBar = RegistrationProgressBar;
 exports.RegistrationReminderEmail = RegistrationReminderEmail;
 exports.RegistrationReminderIndividualEmail = RegistrationReminderIndividualEmail;
 exports.RegistrationSuccessCard = RegistrationSuccessCard;
+exports.ReviewsSpotlight = ReviewsSpotlight;
 exports.SegmentedControl = SegmentedControl;
 exports.ShareWidget = ShareWidget;
 exports.SiteFooter = SiteFooter;