@planetaexo/design-system 0.80.0 → 0.89.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 = {
@@ -19452,16 +19450,16 @@ var SIZES = {
   md: {
     pad: "py-20 sm:py-28",
     heading: "text-2xl sm:text-3xl lg:text-4xl",
-    chip: "px-5 py-2.5 text-sm",
-    gap: "gap-2.5",
-    chipsMt: "mt-9"
+    chip: "px-4 py-2 text-[13px] sm:px-5 sm:py-2.5 sm:text-sm",
+    gap: "gap-2 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-3.5 py-1.5 text-[13px]",
-    gap: "gap-2",
-    chipsMt: "mt-7"
+    chip: "px-3.5 py-1.5 text-xs 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 = `
@@ -20072,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: {
@@ -20273,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;