@riligar/components-kit 1.0.0

package/dist/index.js

@@ -0,0 +1,1844 @@
+'use strict';
+
+var core = require('@mantine/core');
+var jsxRuntime = require('react/jsx-runtime');
+var hooks = require('@mantine/hooks');
+var iconsReact = require('@tabler/icons-react');
+var react = require('react');
+
+// RiLiGar Design System Theme — same as console
+const theme = core.createTheme({
+  fontFamily: 'Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+  headings: {
+    fontFamily: 'Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+    fontWeight: "900"
+  },
+  colors: {
+    // RiLiGar Monochrome Palette - Zen Optimized
+    gray: ["#FFFFFF",
+    // 0: App Base (Pure White)
+    "#F9FAFB",
+    // 1: Hover / Secondary Background
+    "#F3F4F6",
+    // 2: Border Standard
+    "#E5E7EB",
+    // 3: Disabled / Muted Border
+    "#9CA3AF",
+    // 4: Quaternary Text
+    "#6B7280",
+    // 5: Tertiary Text (Labels)
+    "#4B5563",
+    // 6: Secondary Text
+    "#374151",
+    // 7: Secondary Text Dark
+    "#1F2937",
+    // 8: Primary Text Dark
+    "#11181C" // 9: Primary Text (RiLiGar Absolute)
+    ]
+  },
+  primaryColor: "gray",
+  primaryShade: 9,
+  autoContrast: true,
+  defaultRadius: "0",
+  // Zen prefers sharp or very subtle radius, defaulting to 0 for inputs/buttons
+
+  components: {
+    Container: {
+      defaultProps: {
+        size: "xl",
+        // Zen uses XL containers
+        px: "md"
+      }
+    },
+    Paper: {
+      defaultProps: {
+        withBorder: true,
+        shadow: "none",
+        radius: "0",
+        bg: "white"
+      }
+    },
+    Card: {
+      defaultProps: {
+        withBorder: false,
+        // Zen reduces borders
+        shadow: "none",
+        radius: "0",
+        padding: "xl",
+        bg: "transparent"
+      }
+    },
+    Button: {
+      defaultProps: {
+        size: "md",
+        fw: 800,
+        radius: "0",
+        variant: "filled",
+        color: "gray.9"
+      },
+      styles: {
+        root: {
+          textTransform: "uppercase",
+          letterSpacing: "1px"
+        }
+      }
+    },
+    TextInput: {
+      defaultProps: {
+        size: "lg",
+        radius: "0",
+        variant: "unstyled" // Zen Minimalist Inputs
+      },
+      styles: {
+        input: {
+          borderBottom: "1px solid var(--mantine-color-gray-2)",
+          paddingLeft: 0,
+          paddingRight: 0
+        }
+      }
+    },
+    Title: {
+      defaultProps: {
+        lh: 1.1,
+        c: "gray.9",
+        ls: "-0.04em" // Zen Massive Hierarchy
+      }
+    },
+    Text: {
+      defaultProps: {
+        lh: 1.6,
+        c: "gray.9",
+        size: "md"
+      }
+    },
+    Badge: {
+      defaultProps: {
+        variant: "dot",
+        // Zen Subtle Badges
+        color: "gray",
+        radius: "0",
+        size: "sm"
+      },
+      styles: {
+        root: {
+          textTransform: "uppercase",
+          letterSpacing: "1.5px",
+          fontWeight: 800
+        }
+      }
+    },
+    ThemeIcon: {
+      defaultProps: {
+        variant: "light",
+        color: "gray",
+        radius: "0",
+        size: "lg"
+      }
+    },
+    Divider: {
+      defaultProps: {
+        color: "gray.2"
+      }
+    }
+  }
+});
+
+function SectionHeader({
+  subtitle,
+  title,
+  titleOrder = 2,
+  titleFz = "var(--fz-section-title)",
+  ta = "left",
+  maw
+}) {
+  if (!title && !subtitle) return null;
+  return /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+    gap: "xs",
+    align: ta === "center" ? "center" : "flex-start",
+    ta: ta,
+    children: [subtitle && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+      c: "gray.4",
+      size: "xs",
+      fw: 800,
+      tt: "uppercase",
+      ls: "1.5px",
+      children: subtitle
+    }), title && /*#__PURE__*/jsxRuntime.jsx(core.Title, {
+      order: titleOrder,
+      fz: titleFz,
+      maw: maw,
+      children: title
+    })]
+  });
+}
+
+function MediaBlock({
+  video,
+  image,
+  width = "100%",
+  alt
+}) {
+  if (video) {
+    return /*#__PURE__*/jsxRuntime.jsx(core.Center, {
+      children: /*#__PURE__*/jsxRuntime.jsx(core.Box, {
+        component: "video",
+        src: video.src,
+        autoPlay: true,
+        loop: true,
+        muted: true,
+        playsInline: true,
+        "aria-label": alt || "Demonstração em vídeo",
+        w: video.width || width,
+        h: "auto",
+        style: {
+          filter: video.filter || "none"
+        }
+      })
+    });
+  }
+  if (image) {
+    return /*#__PURE__*/jsxRuntime.jsx(core.Center, {
+      children: /*#__PURE__*/jsxRuntime.jsx(core.Box, {
+        component: "img",
+        src: image,
+        alt: alt || "",
+        w: width,
+        h: "auto"
+      })
+    });
+  }
+  return null;
+}
+
+function CTAButton({
+  label,
+  href,
+  onClick,
+  icon,
+  size = "lg",
+  variant = "filled",
+  color,
+  target,
+  px,
+  fullWidth,
+  leftSection,
+  ...rest
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+    size: size,
+    component: href ? "a" : "button",
+    href: href,
+    onClick: onClick,
+    target: target,
+    rightSection: icon,
+    leftSection: leftSection,
+    variant: variant,
+    color: color,
+    px: px,
+    fullWidth: fullWidth,
+    ...rest,
+    children: label
+  });
+}
+
+function Layout({
+  children,
+  title,
+  subtitle,
+  id,
+  bg = "white",
+  py = {
+    base: 80,
+    md: 120
+  },
+  maw = 800,
+  ta = "left",
+  stackGap = "xl"
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(core.Box, {
+    component: "section",
+    id: id,
+    bg: bg,
+    py: py,
+    style: {
+      overflow: "hidden"
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(core.Container, {
+      size: "lg",
+      children: /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+        gap: stackGap,
+        children: [/*#__PURE__*/jsxRuntime.jsx(SectionHeader, {
+          subtitle: subtitle,
+          title: title,
+          ta: ta,
+          maw: maw
+        }), /*#__PURE__*/jsxRuntime.jsx(core.Box, {
+          children: children
+        })]
+      })
+    })
+  });
+}
+
+function Header({
+  logo,
+  navLinks = [],
+  loginCta,
+  signupCta
+}) {
+  const [scroll] = hooks.useWindowScroll();
+  const scrolled = scroll.y > 10;
+  const handleNavClick = target => {
+    if (target === "top") {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+      });
+    } else {
+      document.getElementById(target)?.scrollIntoView({
+        behavior: "smooth"
+      });
+    }
+  };
+  const handleNavKeyDown = (e, target) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleNavClick(target);
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(core.Box, {
+    component: "header",
+    pos: "sticky",
+    top: 0,
+    w: "100%",
+    style: {
+      zIndex: 100,
+      pointerEvents: "none"
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(core.Container, {
+      size: "xl",
+      py: "md",
+      children: /*#__PURE__*/jsxRuntime.jsx(core.Paper, {
+        shadow: scrolled ? "sm" : "none",
+        radius: "0",
+        p: "xs",
+        bg: "white",
+        bd: scrolled ? "1px solid var(--mantine-color-gray-2)" : "1px solid transparent",
+        style: {
+          pointerEvents: "auto",
+          transition: "all 0.2s ease"
+        },
+        children: /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+          justify: "space-between",
+          align: "center",
+          px: {
+            base: "xs",
+            sm: "md"
+          },
+          children: [logo && /*#__PURE__*/jsxRuntime.jsx("a", {
+            href: "#",
+            "aria-label": "Voltar ao topo",
+            onClick: e => {
+              e.preventDefault();
+              window.scrollTo({
+                top: 0,
+                behavior: "smooth"
+              });
+            },
+            style: {
+              display: "inline-flex"
+            },
+            children: /*#__PURE__*/jsxRuntime.jsx("img", {
+              src: logo.src,
+              alt: logo.alt || "",
+              height: logo.height || 32,
+              style: {
+                objectFit: "contain"
+              }
+            })
+          }), navLinks.length > 0 && /*#__PURE__*/jsxRuntime.jsx(core.Group, {
+            gap: "xl",
+            visibleFrom: "sm",
+            component: "nav",
+            role: "navigation",
+            "aria-label": "Menu principal",
+            children: navLinks.map(link => /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+              size: "sm",
+              fw: 900,
+              tt: "uppercase",
+              ls: "1px",
+              c: "dark",
+              role: "link",
+              tabIndex: 0,
+              style: {
+                cursor: "pointer"
+              },
+              onClick: () => handleNavClick(link.target),
+              onKeyDown: e => handleNavKeyDown(e, link.target),
+              children: link.label
+            }, link.label))
+          }), /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+            gap: "sm",
+            children: [loginCta && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+              variant: "subtle",
+              component: loginCta.href ? "a" : "button",
+              href: loginCta.href,
+              onClick: loginCta.onClick,
+              c: "gray.7",
+              size: "sm",
+              radius: "0",
+              visibleFrom: "xs",
+              fw: 900,
+              children: loginCta.label
+            }), signupCta && /*#__PURE__*/jsxRuntime.jsxs(core.Button, {
+              component: signupCta.href ? "a" : "button",
+              href: signupCta.href,
+              onClick: signupCta.onClick,
+              size: "sm",
+              radius: "0",
+              color: "dark",
+              variant: "filled",
+              children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                span: true,
+                visibleFrom: "sm",
+                c: "white",
+                fw: 900,
+                size: "sm",
+                children: signupCta.label
+              }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                span: true,
+                hiddenFrom: "sm",
+                c: "white",
+                fw: 900,
+                size: "xs",
+                children: signupCta.labelMobile || signupCta.label
+              })]
+            })]
+          })]
+        })
+      })
+    })
+  });
+}
+
+/** @deprecated Use Header instead */
+const Navbar = Header;
+
+function Hero({
+  subtitle,
+  title,
+  description,
+  cta,
+  video,
+  image
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(core.Box, {
+    py: {
+      base: 80,
+      sm: 100,
+      md: 140
+    },
+    id: "hero",
+    bg: "white",
+    children: /*#__PURE__*/jsxRuntime.jsx(core.Container, {
+      size: "lg",
+      children: /*#__PURE__*/jsxRuntime.jsxs(core.SimpleGrid, {
+        cols: {
+          base: 1,
+          md: 2
+        },
+        spacing: {
+          base: 60,
+          md: 100
+        },
+        verticalSpacing: 60,
+        children: [/*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+          align: {
+            base: "center",
+            md: "flex-start"
+          },
+          justify: "center",
+          gap: {
+            base: 32,
+            md: 48
+          },
+          ta: {
+            base: "center",
+            md: "left"
+          },
+          children: [/*#__PURE__*/jsxRuntime.jsx(SectionHeader, {
+            subtitle: subtitle,
+            title: title,
+            titleOrder: 1,
+            titleFz: "var(--fz-hero)",
+            ta: "inherit"
+          }), description && /*#__PURE__*/jsxRuntime.jsx(core.Center, {
+            children: /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+              size: "xl",
+              c: "gray.6",
+              lh: 1.6,
+              maw: 600,
+              children: description
+            })
+          }), cta && /*#__PURE__*/jsxRuntime.jsx(core.Center, {
+            children: /*#__PURE__*/jsxRuntime.jsx(core.Group, {
+              gap: "md",
+              justify: {
+                base: "center",
+                md: "flex-start"
+              },
+              children: /*#__PURE__*/jsxRuntime.jsx(CTAButton, {
+                label: cta.label,
+                href: cta.href,
+                icon: cta.icon,
+                size: cta.size || "xl",
+                px: cta.px || 48,
+                variant: cta.variant,
+                color: cta.color
+              })
+            })
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx(MediaBlock, {
+          video: video,
+          image: image,
+          alt: "Demonstra\xE7\xE3o do produto"
+        })]
+      })
+    })
+  });
+}
+
+function LogoItem({
+  logo,
+  index
+}) {
+  const imageProps = {
+    src: logo.src,
+    alt: logo.alt || `Logo ${index}`,
+    h: logo.height || 50,
+    w: "auto",
+    style: {
+      filter: "grayscale(1) opacity(0.4)",
+      transition: "filter 0.3s ease, opacity 0.3s ease",
+      ...logo.style
+    },
+    onMouseEnter: e => {
+      e.currentTarget.style.filter = "grayscale(0) opacity(0.8)";
+    },
+    onMouseLeave: e => {
+      e.currentTarget.style.filter = "grayscale(1) opacity(0.4)";
+    }
+  };
+  if (logo.url) {
+    return /*#__PURE__*/jsxRuntime.jsx(core.Center, {
+      children: /*#__PURE__*/jsxRuntime.jsx("a", {
+        href: logo.url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: /*#__PURE__*/jsxRuntime.jsx(core.Image, {
+          ...imageProps
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(core.Center, {
+    children: /*#__PURE__*/jsxRuntime.jsx(core.Image, {
+      ...imageProps
+    })
+  });
+}
+
+/**
+ * SocialProof - Logo bar showing partner/client logos.
+ *
+ * @param {string} id     - Section ID for scroll navigation
+ * @param {string} title  - Optional heading text
+ * @param {array}  logos  - [{ src, alt, height, url?, style? }]
+ */
+function SocialProof({
+  id,
+  title,
+  logos
+}) {
+  if (!logos || logos.length === 0) return null;
+  return /*#__PURE__*/jsxRuntime.jsx(core.Box, {
+    component: "section",
+    id: id,
+    py: {
+      base: 40,
+      md: 60
+    },
+    bg: "white",
+    bd: {
+      bottom: "1px solid var(--mantine-color-gray-1)"
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(core.Container, {
+      size: "lg",
+      children: /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+        align: "center",
+        ta: "center",
+        gap: "xl",
+        children: [title && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+          fw: 500,
+          c: "gray.5",
+          size: "sm",
+          tt: "uppercase",
+          ls: "0.1em",
+          children: title
+        }), /*#__PURE__*/jsxRuntime.jsx(core.Group, {
+          justify: "space-between",
+          gap: {
+            base: 40,
+            md: 80
+          },
+          style: {
+            rowGap: 40
+          },
+          w: "100%",
+          children: logos.map((logo, i) => /*#__PURE__*/jsxRuntime.jsx(LogoItem, {
+            logo: logo,
+            index: i
+          }, i))
+        })]
+      })
+    })
+  });
+}
+
+function FeatureSplit({
+  id,
+  subtitle,
+  title,
+  description,
+  featuresList,
+  cta,
+  video,
+  image,
+  reverse = false,
+  bg
+}) {
+  const listComponent = featuresList && featuresList.length > 0 && /*#__PURE__*/jsxRuntime.jsx(core.List, {
+    spacing: "md",
+    size: "md",
+    center: true,
+    icon: /*#__PURE__*/jsxRuntime.jsx(core.ThemeIcon, {
+      color: "gray.2",
+      size: 24,
+      radius: "0",
+      children: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconCheck, {
+        size: 14,
+        color: "var(--mantine-color-gray-9)"
+      })
+    }),
+    children: featuresList.map((item, index) => /*#__PURE__*/jsxRuntime.jsx(core.List.Item, {
+      children: item
+    }, index))
+  });
+  const contentCol = /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+    justify: "center",
+    gap: "lg",
+    children: [description && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+      c: "gray.6",
+      size: "xl",
+      lh: 1.6,
+      children: description
+    }), listComponent, cta && /*#__PURE__*/jsxRuntime.jsx(core.Group, {
+      mt: "md",
+      children: /*#__PURE__*/jsxRuntime.jsx(CTAButton, {
+        label: cta.label,
+        href: cta.href,
+        icon: cta.icon,
+        size: cta.size || "lg",
+        variant: cta.variant,
+        color: cta.color
+      })
+    })]
+  });
+  const mediaCol = (video || image) && /*#__PURE__*/jsxRuntime.jsx(MediaBlock, {
+    video: video,
+    image: image,
+    width: "80%"
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(Layout, {
+    id: id,
+    subtitle: subtitle,
+    title: title,
+    bg: bg,
+    children: /*#__PURE__*/jsxRuntime.jsx(core.SimpleGrid, {
+      cols: {
+        base: 1,
+        md: 2
+      },
+      spacing: {
+        base: 40,
+        md: 80
+      },
+      verticalSpacing: {
+        base: 40,
+        md: 50
+      },
+      children: reverse ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [mediaCol, contentCol]
+      }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [contentCol, mediaCol]
+      })
+    })
+  });
+}
+
+function FeaturesGrid({
+  id,
+  subtitle,
+  title,
+  bg = "gray.0",
+  items = []
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Layout, {
+    id: id,
+    subtitle: subtitle,
+    title: title,
+    bg: bg,
+    children: /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
+      gutter: "lg",
+      children: items.map((item, idx) => /*#__PURE__*/jsxRuntime.jsx(FeatureCard, {
+        ...item
+      }, idx))
+    })
+  });
+}
+function FeatureCard({
+  icon: Icon,
+  iconVariant,
+  iconColor,
+  label,
+  title,
+  titleSize,
+  description,
+  descriptionSize,
+  descriptionMaw,
+  span = {
+    base: 12,
+    md: 6
+  },
+  bg = "white",
+  dark = false,
+  visual,
+  secondaryVisual,
+  layout = "stacked",
+  badges,
+  codeBlock,
+  decorativeContent,
+  style: extraStyle,
+  ...props
+}) {
+  const textColor = dark ? "white" : undefined;
+  const descColor = dark ? "gray.4" : "gray.6";
+  const labelColor = "gray.5";
+  const resolvedIconVariant = iconVariant || (dark ? "filled" : "light");
+  const resolvedIconColor = iconColor || (dark ? "gray.7" : "gray");
+  const resolvedTitleSize = titleSize || (layout === "compact" ? "h4" : "h3");
+  const resolvedDescSize = descriptionSize || (layout === "compact" ? "sm" : "lg");
+  const headerContent = /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+    children: [Icon && /*#__PURE__*/jsxRuntime.jsx(core.ThemeIcon, {
+      size: 48,
+      radius: "0",
+      variant: resolvedIconVariant,
+      color: resolvedIconColor,
+      mb: "lg",
+      style: dark ? {
+        color: "white"
+      } : undefined,
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+        size: 24,
+        stroke: 1.5
+      })
+    }), label && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+      size: "sm",
+      fw: 800,
+      tt: "uppercase",
+      ls: "1.5px",
+      c: labelColor,
+      mb: "xs",
+      children: label
+    }), title && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+      fz: resolvedTitleSize,
+      fw: 900,
+      lh: 1.2,
+      mb: "sm",
+      c: textColor,
+      children: title
+    }), description && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+      c: descColor,
+      size: resolvedDescSize,
+      maw: descriptionMaw,
+      mb: badges ? "xl" : layout === "compact" ? "lg" : undefined,
+      children: description
+    }), badges && badges.length > 0 && /*#__PURE__*/jsxRuntime.jsx(core.Group, {
+      children: badges.map((badge, i) => /*#__PURE__*/jsxRuntime.jsx(core.Badge, {
+        variant: "dot",
+        color: "gray",
+        radius: "0",
+        children: badge
+      }, i))
+    })]
+  });
+  const visualContent = visual ? renderVisual(visual, dark) : null;
+  const secondaryVisualContent = secondaryVisual ? renderVisual(secondaryVisual, dark) : null;
+
+  // Split layout: text left, visual/code right (via inner Grid)
+  if (layout === "split") {
+    return /*#__PURE__*/jsxRuntime.jsx(core.Grid.Col, {
+      span: span,
+      children: /*#__PURE__*/jsxRuntime.jsx(core.Paper, {
+        h: "100%",
+        p: {
+          base: "xl",
+          md: 40
+        },
+        radius: "0",
+        bg: bg,
+        bd: "1px solid var(--mantine-color-gray-2)",
+        style: extraStyle,
+        ...props,
+        children: /*#__PURE__*/jsxRuntime.jsxs(core.Grid, {
+          align: "center",
+          gutter: "xl",
+          children: [/*#__PURE__*/jsxRuntime.jsx(core.Grid.Col, {
+            span: {
+              base: 12,
+              sm: 6
+            },
+            children: headerContent
+          }), /*#__PURE__*/jsxRuntime.jsxs(core.Grid.Col, {
+            span: {
+              base: 12,
+              sm: 6
+            },
+            children: [visualContent, codeBlock && /*#__PURE__*/jsxRuntime.jsx(core.Code, {
+              block: true,
+              color: "gray.0",
+              c: "gray.7",
+              style: {
+                fontSize: 12,
+                lineHeight: 1.4,
+                borderRadius: 0
+              },
+              children: codeBlock
+            })]
+          })]
+        })
+      })
+    });
+  }
+
+  // Compact layout: simpler card
+  if (layout === "compact") {
+    return /*#__PURE__*/jsxRuntime.jsx(core.Grid.Col, {
+      span: span,
+      children: /*#__PURE__*/jsxRuntime.jsxs(core.Paper, {
+        h: "100%",
+        p: {
+          base: "xl",
+          md: 40
+        },
+        radius: "0",
+        bg: bg,
+        bd: "1px solid var(--mantine-color-gray-2)",
+        style: extraStyle,
+        ...props,
+        children: [headerContent, visualContent]
+      })
+    });
+  }
+
+  // Stacked layout with decorative content on the side (e.g. device icons)
+  if (decorativeContent) {
+    return /*#__PURE__*/jsxRuntime.jsx(core.Grid.Col, {
+      span: span,
+      children: /*#__PURE__*/jsxRuntime.jsx(core.Paper, {
+        h: "100%",
+        p: {
+          base: "xl",
+          md: 40
+        },
+        radius: "0",
+        bg: bg,
+        bd: "1px solid var(--mantine-color-gray-2)",
+        pos: "relative",
+        style: extraStyle,
+        ...props,
+        children: /*#__PURE__*/jsxRuntime.jsxs(core.Grid, {
+          gutter: 0,
+          pos: "relative",
+          children: [/*#__PURE__*/jsxRuntime.jsx(core.Grid.Col, {
+            span: {
+              base: 12,
+              sm: 7
+            },
+            style: {
+              zIndex: 1
+            },
+            children: headerContent
+          }), /*#__PURE__*/jsxRuntime.jsx(core.Grid.Col, {
+            span: 5,
+            visibleFrom: "sm",
+            children: decorativeContent
+          })]
+        })
+      })
+    });
+  }
+
+  // Default stacked layout
+  return /*#__PURE__*/jsxRuntime.jsx(core.Grid.Col, {
+    span: span,
+    children: /*#__PURE__*/jsxRuntime.jsxs(core.Paper, {
+      h: "100%",
+      p: {
+        base: "xl",
+        md: 40
+      },
+      radius: "0",
+      bg: bg,
+      bd: "1px solid var(--mantine-color-gray-2)",
+      display: "flex",
+      style: {
+        flexDirection: "column",
+        justifyContent: "space-between",
+        ...extraStyle
+      },
+      ...props,
+      children: [headerContent, visualContent && secondaryVisualContent ? /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+        gap: 40,
+        align: "center",
+        children: [visualContent, secondaryVisualContent]
+      }) : visualContent]
+    })
+  });
+}
+function renderVisual(visual, dark) {
+  if (!visual) return null;
+  switch (visual.type) {
+    case "ring":
+      return /*#__PURE__*/jsxRuntime.jsx(core.RingProgress, {
+        size: visual.size || 140,
+        thickness: visual.thickness || 12,
+        sections: [{
+          value: visual.value || 100,
+          color: "gray.9"
+        }],
+        label: /*#__PURE__*/jsxRuntime.jsx(core.Center, {
+          children: /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+            gap: 0,
+            align: "center",
+            children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+              fw: 900,
+              size: "xl",
+              lh: 1,
+              children: visual.label
+            }), visual.sublabel && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+              size: "xs",
+              c: "gray.5",
+              fw: 700,
+              children: visual.sublabel
+            })]
+          })
+        })
+      });
+    case "metric":
+      return /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+        gap: 0,
+        children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+          fw: 900,
+          fz: 32,
+          c: "gray.9",
+          lh: 1,
+          children: visual.value
+        }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+          size: "sm",
+          c: "gray.5",
+          mt: 4,
+          children: visual.label
+        }), visual.badge && /*#__PURE__*/jsxRuntime.jsx(core.Badge, {
+          mt: "md",
+          color: "gray",
+          variant: "dot",
+          radius: "0",
+          children: visual.badge
+        })]
+      });
+    case "bars":
+      return /*#__PURE__*/jsxRuntime.jsx(core.Group, {
+        align: "flex-end",
+        gap: 8,
+        h: visual.height || 100,
+        preventGrowOverflow: false,
+        children: (visual.data || []).map((h, i) => /*#__PURE__*/jsxRuntime.jsx(core.Box, {
+          w: 20,
+          h: `${h}%`,
+          bg: i === visual.highlight ? "gray.9" : "gray.2",
+          radius: "0"
+        }, i))
+      });
+    case "typography":
+      return /*#__PURE__*/jsxRuntime.jsx(core.Center, {
+        h: visual.height || 160,
+        bg: dark ? "gray.8" : "gray.1",
+        radius: "0",
+        children: /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+          fz: visual.fontSize || 100,
+          fw: 900,
+          c: dark ? "gray.6" : "gray.3",
+          style: {
+            letterSpacing: -6
+          },
+          children: visual.text || "Aa"
+        })
+      });
+    case "icon-large":
+      {
+        const LargeIcon = visual.icon;
+        if (!LargeIcon) return null;
+        return /*#__PURE__*/jsxRuntime.jsx(LargeIcon, {
+          size: visual.size || 64,
+          stroke: visual.stroke || 1,
+          color: visual.color || "var(--mantine-color-gray-2)"
+        });
+      }
+    default:
+      return null;
+  }
+}
+
+function Comparison({
+  id,
+  subtitle,
+  title,
+  traditionalCol,
+  newCol
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Layout, {
+    id: id,
+    subtitle: subtitle,
+    title: title,
+    bg: "white",
+    children: /*#__PURE__*/jsxRuntime.jsx(core.Paper, {
+      radius: "0",
+      bd: "1px solid var(--mantine-color-gray-2)",
+      style: {
+        overflow: "hidden"
+      },
+      children: /*#__PURE__*/jsxRuntime.jsxs(core.SimpleGrid, {
+        cols: {
+          base: 1,
+          md: 2
+        },
+        spacing: 0,
+        children: [/*#__PURE__*/jsxRuntime.jsx(core.Box, {
+          bg: "gray.0",
+          p: {
+            base: 30,
+            md: 60
+          },
+          children: /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+            gap: "xl",
+            children: [/*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+              children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                fw: 900,
+                fz: "h2",
+                c: "gray.9",
+                mb: 4,
+                children: traditionalCol.title
+              }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                size: "sm",
+                fw: 800,
+                tt: "uppercase",
+                ls: "1.5px",
+                c: "gray.5",
+                children: traditionalCol.subtitle
+              })]
+            }), /*#__PURE__*/jsxRuntime.jsx(core.Stack, {
+              gap: "md",
+              mb: 40,
+              children: traditionalCol.items.map((item, index) => /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+                children: [/*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+                  justify: "space-between",
+                  children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                    size: "sm",
+                    c: "gray.6",
+                    children: item.label
+                  }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                    fw: 700,
+                    c: "gray.9",
+                    children: item.value
+                  })]
+                }), index < traditionalCol.items.length - 1 && /*#__PURE__*/jsxRuntime.jsx(core.Divider, {
+                  color: "var(--mantine-color-gray-2)"
+                })]
+              }, index))
+            }), /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+              bg: "white",
+              p: "lg",
+              radius: "0",
+              bd: "1px solid var(--mantine-color-gray-2)",
+              children: [/*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+                justify: "space-between",
+                children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                  fw: 900,
+                  c: "gray.7",
+                  children: traditionalCol.totalLabel || "Total Estimado"
+                }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                  fw: 900,
+                  fz: 32,
+                  c: "gray.9",
+                  children: traditionalCol.totalValue
+                })]
+              }), traditionalCol.footerText && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                size: "xs",
+                c: "red.6",
+                ta: "right",
+                mt: 4,
+                children: traditionalCol.footerText
+              })]
+            })]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(core.Box, {
+          bg: "white",
+          p: {
+            base: 30,
+            md: 60
+          },
+          pos: "relative",
+          children: /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+            gap: "xl",
+            h: "100%",
+            children: [/*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+              children: [/*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+                gap: "xs",
+                children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                  fw: 900,
+                  fz: "h2",
+                  c: "gray.9",
+                  mb: 4,
+                  children: newCol.title
+                }), newCol.badge && /*#__PURE__*/jsxRuntime.jsx(core.Badge, {
+                  color: "gray.9",
+                  variant: "filled",
+                  radius: "0",
+                  children: newCol.badge
+                })]
+              }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                size: "sm",
+                c: "gray.6",
+                children: newCol.description
+              })]
+            }), /*#__PURE__*/jsxRuntime.jsx(core.List, {
+              spacing: "md",
+              size: "md",
+              c: "gray.6",
+              icon: /*#__PURE__*/jsxRuntime.jsx(core.ThemeIcon, {
+                color: "gray.0",
+                size: 20,
+                radius: "0",
+                bd: "1px solid var(--mantine-color-gray-2)",
+                children: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconCheck, {
+                  size: 12,
+                  color: "var(--mantine-color-gray-9)"
+                })
+              }),
+              children: newCol.items.map((item, index) => /*#__PURE__*/jsxRuntime.jsx(core.List.Item, {
+                children: item
+              }, index))
+            }), newCol.pricingBox && /*#__PURE__*/jsxRuntime.jsx(core.Box, {
+              bg: "gray.0",
+              p: "lg",
+              radius: "0",
+              bd: "1px solid var(--mantine-color-gray-2)",
+              children: /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+                gap: 4,
+                children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                  size: "sm",
+                  fw: 800,
+                  tt: "uppercase",
+                  ls: "1.5px",
+                  c: "gray.5",
+                  children: newCol.pricingBox.label
+                }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                  fw: 900,
+                  fz: 48,
+                  c: "gray.9",
+                  lh: 1,
+                  children: newCol.pricingBox.price
+                }), newCol.pricingBox.subtext && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                  size: "xs",
+                  c: "gray.5",
+                  mt: "sm",
+                  children: newCol.pricingBox.subtext
+                })]
+              })
+            }), newCol.cta && /*#__PURE__*/jsxRuntime.jsx(core.Box, {
+              mt: "xl",
+              children: /*#__PURE__*/jsxRuntime.jsx(CTAButton, {
+                label: newCol.cta.label,
+                href: newCol.cta.href,
+                icon: newCol.cta.icon,
+                size: newCol.cta.size || "lg",
+                color: newCol.cta.color || "gray.9",
+                fullWidth: true
+              })
+            })]
+          })
+        })]
+      })
+    })
+  });
+}
+
+function Pricing({
+  id,
+  subtitle,
+  title,
+  billingOptions = [{
+    label: "Mensal",
+    value: "monthly"
+  }, {
+    label: "Anual",
+    value: "annual"
+  }],
+  billing,
+  setBilling,
+  promoBadge,
+  plans
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(Layout, {
+    id: id,
+    subtitle: subtitle,
+    title: title,
+    ta: "center",
+    children: [billingOptions && billingOptions.length > 0 && /*#__PURE__*/jsxRuntime.jsx(core.Stack, {
+      align: "center",
+      gap: "xl",
+      mb: 80,
+      children: /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+        gap: "xs",
+        children: [/*#__PURE__*/jsxRuntime.jsx(core.SegmentedControl, {
+          value: billing,
+          onChange: setBilling,
+          radius: "0",
+          size: "md",
+          data: billingOptions,
+          color: "gray.9",
+          bg: "white",
+          style: {
+            border: "1px solid var(--mantine-color-gray-2)"
+          }
+        }), billing === "annual" && promoBadge && /*#__PURE__*/jsxRuntime.jsx(core.Badge, {
+          variant: "filled",
+          color: "gray.9",
+          radius: "0",
+          size: "lg",
+          children: promoBadge
+        })]
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(core.SimpleGrid, {
+      cols: {
+        base: 1,
+        md: plans.length <= 3 ? plans.length : 3
+      },
+      spacing: "xl",
+      verticalSpacing: "xl",
+      children: plans.map(plan => /*#__PURE__*/jsxRuntime.jsxs(core.Paper, {
+        p: "xl",
+        radius: "0",
+        withBorder: true,
+        bd: plan.highlight ? "2px solid var(--mantine-color-gray-9)" : "1px solid var(--mantine-color-gray-2)",
+        display: "flex",
+        h: "100%",
+        style: {
+          flexDirection: "column"
+        },
+        bg: "white",
+        children: [/*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+          gap: "md",
+          mb: "xl",
+          children: [/*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+            justify: "space-between",
+            align: "center",
+            children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+              size: "xs",
+              fw: 800,
+              tt: "uppercase",
+              ls: "1.5px",
+              c: "gray.4",
+              children: plan.name
+            }), plan.highlight && /*#__PURE__*/jsxRuntime.jsx(core.Badge, {
+              variant: "dot",
+              color: "gray.9",
+              children: plan.highlightBadge || "RECOMENDADO"
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+            size: "sm",
+            c: "gray.6",
+            fw: 500,
+            lh: 1.5,
+            h: {
+              md: 42
+            },
+            children: plan.description
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+          mb: "xl",
+          children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+            size: "xs",
+            c: "gray.4",
+            fw: 800,
+            tt: "uppercase",
+            ls: "1px",
+            mb: 4,
+            children: plan.pricePrefix || "A partir de"
+          }), /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+            gap: 8,
+            align: "flex-start",
+            children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+              size: "xl",
+              fw: 900,
+              c: "gray.9",
+              style: {
+                marginTop: 8
+              },
+              children: plan.priceDisplay?.currency
+            }), /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+              gap: 4,
+              align: "flex-end",
+              children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                fz: "var(--fz-big-metric)",
+                fw: 900,
+                ls: "-0.04em",
+                lh: 0.8,
+                c: "gray.9",
+                children: plan.priceDisplay?.whole
+              }), plan.priceDisplay?.fraction && /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+                gap: 0,
+                mb: 6,
+                children: [/*#__PURE__*/jsxRuntime.jsxs(core.Text, {
+                  size: "xl",
+                  fw: 900,
+                  lh: 1,
+                  c: "gray.9",
+                  children: [",", plan.priceDisplay.fraction]
+                }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                  size: "xs",
+                  c: "gray.5",
+                  fw: 800,
+                  tt: "uppercase",
+                  ls: "0.5px",
+                  children: plan.period || plan.priceSuffix || "/mês"
+                })]
+              })]
+            })]
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx(core.Divider, {
+          mb: "xl",
+          color: "gray.1"
+        }), /*#__PURE__*/jsxRuntime.jsx(core.Stack, {
+          gap: "sm",
+          mb: 40,
+          style: {
+            flex: 1
+          },
+          children: plan.features.map((feature, i) => /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+            gap: "sm",
+            wrap: "nowrap",
+            align: "flex-start",
+            children: [/*#__PURE__*/jsxRuntime.jsx(iconsReact.IconCheck, {
+              size: 16,
+              color: "var(--mantine-color-gray-9)",
+              style: {
+                marginTop: 2,
+                flexShrink: 0
+              }
+            }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+              size: "sm",
+              fw: 500,
+              c: "gray.6",
+              lh: 1.4,
+              children: feature
+            })]
+          }, i))
+        }), /*#__PURE__*/jsxRuntime.jsx(core.Box, {
+          mt: "auto",
+          children: /*#__PURE__*/jsxRuntime.jsx(CTAButton, {
+            label: plan.cta.label,
+            href: plan.cta.href,
+            size: plan.cta.size || "xl",
+            variant: plan.cta.variant,
+            color: plan.cta.color || "gray.9",
+            fullWidth: true
+          })
+        })]
+      }, plan.name))
+    })]
+  });
+}
+
+function FAQ({
+  id,
+  subtitle,
+  title,
+  questions = [],
+  contactCard
+}) {
+  const accordionStyles = {
+    item: {
+      backgroundColor: "white",
+      border: "1px solid var(--mantine-color-gray-2)"
+    },
+    control: {
+      padding: "1.25rem"
+    },
+    content: {
+      padding: "0 1.25rem 1.25rem 1.25rem"
+    },
+    label: {
+      fontWeight: 900,
+      color: "var(--mantine-color-gray-9)"
+    },
+    chevron: {
+      color: "var(--mantine-color-gray-5)"
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(Layout, {
+    id: id,
+    subtitle: subtitle,
+    title: title,
+    bg: "white",
+    children: [/*#__PURE__*/jsxRuntime.jsxs(core.SimpleGrid, {
+      cols: {
+        base: 1,
+        md: 2
+      },
+      spacing: "xl",
+      children: [/*#__PURE__*/jsxRuntime.jsx(core.Accordion, {
+        variant: "separated",
+        radius: "0",
+        chevronPosition: "right",
+        styles: accordionStyles,
+        children: questions.slice(0, Math.ceil(questions.length / 2)).map((item, i) => /*#__PURE__*/jsxRuntime.jsxs(core.Accordion.Item, {
+          value: item.value || String(i),
+          mb: "md",
+          children: [/*#__PURE__*/jsxRuntime.jsx(core.Accordion.Control, {
+            icon: /*#__PURE__*/jsxRuntime.jsx(core.ThemeIcon, {
+              variant: "light",
+              color: "gray",
+              radius: "0",
+              children: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconBolt, {
+                size: 16
+              })
+            }),
+            children: item.question
+          }), /*#__PURE__*/jsxRuntime.jsx(core.Accordion.Panel, {
+            c: "gray.6",
+            children: item.answer
+          })]
+        }, item.value || i))
+      }), /*#__PURE__*/jsxRuntime.jsx(core.Accordion, {
+        variant: "separated",
+        radius: "0",
+        chevronPosition: "right",
+        styles: accordionStyles,
+        children: questions.slice(Math.ceil(questions.length / 2)).map((item, i) => /*#__PURE__*/jsxRuntime.jsxs(core.Accordion.Item, {
+          value: item.value || String(i),
+          mb: "md",
+          children: [/*#__PURE__*/jsxRuntime.jsx(core.Accordion.Control, {
+            icon: /*#__PURE__*/jsxRuntime.jsx(core.ThemeIcon, {
+              variant: "light",
+              color: "gray",
+              radius: "0",
+              children: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconBolt, {
+                size: 16
+              })
+            }),
+            children: item.question
+          }), /*#__PURE__*/jsxRuntime.jsx(core.Accordion.Panel, {
+            c: "gray.6",
+            children: item.answer
+          })]
+        }, item.value || i))
+      })]
+    }), contactCard && /*#__PURE__*/jsxRuntime.jsx(core.Paper, {
+      mt: {
+        base: 40,
+        md: 80
+      },
+      radius: "0",
+      p: {
+        base: "xl",
+        md: 60
+      },
+      bg: "gray.0",
+      bd: "1px solid var(--mantine-color-gray-1)",
+      pos: "relative",
+      style: {
+        overflow: "hidden"
+      },
+      children: /*#__PURE__*/jsxRuntime.jsxs(core.SimpleGrid, {
+        cols: {
+          base: 1,
+          md: 2
+        },
+        spacing: "xl",
+        style: {
+          position: "relative",
+          zIndex: 1,
+          alignItems: "center"
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+          gap: "sm",
+          ta: {
+            base: "center",
+            md: "left"
+          },
+          align: {
+            base: "center",
+            md: "flex-start"
+          },
+          children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+            fz: "h2",
+            fw: 900,
+            c: "gray.9",
+            lh: 1.2,
+            children: contactCard.title
+          }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+            c: "gray.6",
+            maw: 500,
+            size: "lg",
+            children: contactCard.description
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx(core.Stack, {
+          align: {
+            base: "center",
+            md: "flex-end"
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(CTAButton, {
+            label: contactCard.cta.label,
+            href: contactCard.cta.href,
+            target: contactCard.cta.target,
+            leftSection: contactCard.cta.icon,
+            size: contactCard.cta.size || "xl",
+            color: contactCard.cta.color || "dark"
+          })
+        })]
+      })
+    })]
+  });
+}
+
+function Testimonials({
+  id,
+  bg = "gray.0",
+  title,
+  subtitle,
+  items = []
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Layout, {
+    id: id,
+    bg: bg,
+    title: title,
+    subtitle: subtitle,
+    children: /*#__PURE__*/jsxRuntime.jsx(core.SimpleGrid, {
+      cols: {
+        base: 1,
+        md: items.length > 3 ? 4 : items.length || 3
+      },
+      spacing: "xl",
+      children: items.map((item, index) => /*#__PURE__*/jsxRuntime.jsx(core.Paper, {
+        p: "xl",
+        radius: "0",
+        bd: "1px solid var(--mantine-color-gray-2)",
+        bg: "white",
+        children: /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+          gap: "md",
+          align: "flex-start",
+          h: "100%",
+          children: [/*#__PURE__*/jsxRuntime.jsx(iconsReact.IconQuote, {
+            size: 32,
+            color: "var(--mantine-color-gray-3)"
+          }), /*#__PURE__*/jsxRuntime.jsxs(core.Text, {
+            size: "lg",
+            c: "gray.7",
+            lh: 1.6,
+            fs: "italic",
+            flex: 1,
+            children: ["\"", item.content, "\""]
+          }), /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+            gap: "sm",
+            mt: "xl",
+            children: [/*#__PURE__*/jsxRuntime.jsx(core.Avatar, {
+              size: "md",
+              radius: "0",
+              color: "gray",
+              src: item.avatarSrc,
+              children: item.initials
+            }), /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+              gap: 0,
+              children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                size: "sm",
+                fw: 900,
+                children: item.name
+              }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                size: "xs",
+                fw: 800,
+                tt: "uppercase",
+                ls: "1px",
+                c: "gray.5",
+                children: item.role
+              })]
+            })]
+          })]
+        })
+      }, index))
+    })
+  });
+}
+
+function CTABanner({
+  id,
+  title,
+  description,
+  cta,
+  bg = "gray.0"
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Layout, {
+    id: id,
+    bg: bg,
+    ta: "center",
+    children: /*#__PURE__*/jsxRuntime.jsx(core.Paper, {
+      p: {
+        base: "xl",
+        sm: 80
+      },
+      bg: "white",
+      radius: "0",
+      bd: "1px solid var(--mantine-color-gray-2)",
+      style: {
+        borderTop: "4px solid var(--mantine-color-gray-9)"
+      },
+      children: /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+        align: "center",
+        ta: "center",
+        gap: "xl",
+        children: [title && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+          fz: "var(--fz-section-title)",
+          fw: 900,
+          lh: 1.2,
+          ls: "-0.04em",
+          maw: 700,
+          children: title
+        }), description && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+          c: "gray.7",
+          size: "xl",
+          maw: 550,
+          children: description
+        }), cta && /*#__PURE__*/jsxRuntime.jsx(core.Box, {
+          mt: "md",
+          children: /*#__PURE__*/jsxRuntime.jsx(CTAButton, {
+            label: cta.label,
+            href: cta.href,
+            size: cta.size || "xl",
+            px: cta.px || {
+              base: 32,
+              md: 60
+            },
+            variant: cta.variant,
+            color: cta.color
+          })
+        })]
+      })
+    })
+  });
+}
+
+/** @deprecated Use CTABanner instead */
+const SecondaryCTA = CTABanner;
+
+function TrustBadge({
+  text = "Selo Exclusivo RiLiGar",
+  color = "green.6"
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(core.Box, {
+    p: "xs",
+    bg: "gray.1",
+    style: {
+      borderRadius: "8px",
+      border: "1px solid var(--mantine-color-gray-2)",
+      display: "inline-block"
+    },
+    children: /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+      gap: "xs",
+      children: [/*#__PURE__*/jsxRuntime.jsx(core.ThemeIcon, {
+        color: color,
+        variant: "light",
+        size: "sm",
+        radius: "xl",
+        children: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconCircleCheck, {
+          size: 14,
+          "aria-hidden": "true"
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+        size: "xs",
+        fw: 700,
+        c: "gray.7",
+        tt: "uppercase",
+        lts: 0.5,
+        children: text
+      })]
+    })
+  });
+}
+
+/** @deprecated Use TrustBadge instead */
+const SeloExclusivo = TrustBadge;
+
+function Footer({
+  logo,
+  description,
+  sections = [],
+  socialLinks = [],
+  copyrightText,
+  madeByText,
+  bg = "gray.0"
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(core.Box, {
+    component: "footer",
+    py: "xl",
+    bg: bg,
+    bd: {
+      top: "1px solid var(--mantine-color-gray-2)"
+    },
+    children: /*#__PURE__*/jsxRuntime.jsxs(core.Container, {
+      size: "xl",
+      children: [/*#__PURE__*/jsxRuntime.jsxs(core.SimpleGrid, {
+        cols: {
+          base: 1,
+          sm: 2
+        },
+        spacing: "xl",
+        children: [/*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+          gap: "lg",
+          children: [logo && /*#__PURE__*/jsxRuntime.jsx("img", {
+            src: logo.src,
+            alt: logo.alt || "",
+            height: logo.height || 32,
+            style: {
+              objectFit: "contain",
+              objectPosition: "left"
+            }
+          }), description && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+            size: "md",
+            c: "gray.6",
+            lh: 1.6,
+            maw: 400,
+            children: description
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsxs(core.SimpleGrid, {
+          cols: {
+            base: 2,
+            sm: sections.length || 4
+          },
+          spacing: "xl",
+          children: [sections.map((section, idx) => /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+            gap: "md",
+            children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+              fw: 900,
+              size: "xs",
+              tt: "uppercase",
+              ls: "1.5px",
+              children: section.title
+            }), /*#__PURE__*/jsxRuntime.jsx(core.Stack, {
+              gap: "xs",
+              children: section.links.map((link, linkIdx) => /*#__PURE__*/jsxRuntime.jsx(core.Anchor, {
+                c: "gray.6",
+                size: "sm",
+                component: link.href ? "a" : "button",
+                href: link.href,
+                onClick: link.onClick,
+                fw: 500,
+                children: link.label
+              }, linkIdx))
+            })]
+          }, idx)), socialLinks && socialLinks.length > 0 && /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+            gap: "md",
+            children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+              fw: 900,
+              size: "xs",
+              tt: "uppercase",
+              ls: "1.5px",
+              children: "Social"
+            }), /*#__PURE__*/jsxRuntime.jsx(core.Group, {
+              gap: "xs",
+              children: socialLinks.map((social, socialIdx) => /*#__PURE__*/jsxRuntime.jsx(core.ActionIcon, {
+                size: "md",
+                variant: "subtle",
+                color: "gray",
+                component: "a",
+                href: social.href,
+                target: "_blank",
+                radius: "0",
+                "aria-label": social.label || `Social link ${socialIdx + 1}`,
+                children: social.icon
+              }, socialIdx))
+            })]
+          })]
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx(core.Divider, {
+        my: "xl",
+        color: "gray.2"
+      }), /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+        justify: "space-between",
+        mt: 30,
+        wrap: "wrap",
+        gap: "sm",
+        children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+          size: "xs",
+          fw: 800,
+          tt: "uppercase",
+          ls: "1px",
+          c: "gray.5",
+          children: copyrightText
+        }), madeByText && /*#__PURE__*/jsxRuntime.jsx(core.Group, {
+          gap: "sm",
+          children: /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+            size: "xs",
+            fw: 800,
+            tt: "uppercase",
+            ls: "1px",
+            c: "gray.5",
+            children: madeByText
+          })
+        })]
+      })]
+    })
+  });
+}
+
+exports.CTABanner = CTABanner;
+exports.CTAButton = CTAButton;
+exports.Comparison = Comparison;
+exports.FAQ = FAQ;
+exports.FeatureSplit = FeatureSplit;
+exports.FeaturesGrid = FeaturesGrid;
+exports.Footer = Footer;
+exports.Header = Header;
+exports.Hero = Hero;
+exports.Layout = Layout;
+exports.MediaBlock = MediaBlock;
+exports.Navbar = Navbar;
+exports.Pricing = Pricing;
+exports.SecondaryCTA = SecondaryCTA;
+exports.SectionHeader = SectionHeader;
+exports.SeloExclusivo = SeloExclusivo;
+exports.SocialProof = SocialProof;
+exports.Testimonials = Testimonials;
+exports.TrustBadge = TrustBadge;
+exports.theme = theme;
+//# sourceMappingURL=index.js.map