xertica-ui 2.7.0 → 2.9.6

package/dist/MarketingFooter-nB7G7gQ5.js

@@ -0,0 +1,682 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { C as Card, e as CardHeader, S as Skeleton, b as CardContent, d as CardFooter, f as CardTitle, c as CardDescription } from './skeleton-Bysq8yeB.js';
+import { c as cn, B as Button } from './button-DFa-rtPy.js';
+import { I as ImageWithFallback } from './ImageWithFallback-BOh1FM3I.js';
+import { L as LanguageSelector } from './LanguageSelector-Cj6zl0CM.js';
+import { useTranslation } from 'react-i18next';
+import { Lock, X, Menu, CheckCircle2, Check } from 'lucide-react';
+import { useMemo, useState } from 'react';
+
+function FeatureCardSkeleton({
+  showAction = true,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Card, { className: cn("flex flex-col h-full", className), ...props, children: [
+    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "size-10 rounded-[var(--radius)] shrink-0" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 min-w-0", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-28" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-12 rounded-full" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-5/6" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-4/6" })
+    ] }),
+    showAction && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full rounded-md" }) })
+  ] });
+}
+
+function AuthPageShell({ imageSrc, imageAlt, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "h-screen w-full flex overflow-y-auto", children: [
+    /* @__PURE__ */ jsxs("div", { className: "hidden lg:flex lg:flex-1 relative overflow-hidden", children: [
+      /* @__PURE__ */ jsx(
+        ImageWithFallback,
+        {
+          src: imageSrc,
+          alt: imageAlt,
+          className: "absolute inset-0 w-full h-full object-cover"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[image:var(--gradient-diagonal)] opacity-80" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8 lg:flex-none lg:w-1/2 relative bg-muted", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-20", children: /* @__PURE__ */ jsx(LanguageSelector, { variant: "minimal", showIcon: false }) }),
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 lg:hidden bg-[image:var(--gradient-diagonal)] opacity-10 dark:opacity-5" }),
+      /* @__PURE__ */ jsx("div", { className: "w-full max-w-sm space-y-6 relative z-10", children })
+    ] })
+  ] });
+}
+
+const DEFAULT_PROVIDERS = ["google", "mtLogin", "govBr"];
+function SocialLoginButtons({
+  onSocialLogin,
+  providers = DEFAULT_PROVIDERS
+}) {
+  const { t } = useTranslation();
+  if (providers.length === 0) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx("div", { className: "w-full border-t border-border" }) }),
+      /* @__PURE__ */ jsx("div", { className: "relative flex justify-center text-sm", children: /* @__PURE__ */ jsx("span", { className: "bg-muted px-2 text-muted-foreground", children: t("login.orContinueWith") }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      providers.includes("google") && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          className: "w-full justify-center",
+          onClick: () => onSocialLogin("Google"),
+          children: [
+            /* @__PURE__ */ jsxs("svg", { className: "w-5 h-5 mr-2", viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  fill: "#EA4335",
+                  d: "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  fill: "#4285F4",
+                  d: "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  fill: "#FBBC05",
+                  d: "M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  fill: "#34A853",
+                  d: "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
+                }
+              ),
+              /* @__PURE__ */ jsx("path", { fill: "none", d: "M0 0h48v48H0z" })
+            ] }),
+            /* @__PURE__ */ jsx("span", { children: t("login.signInWithGoogle") })
+          ]
+        }
+      ),
+      providers.includes("mtLogin") && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          className: "w-full justify-center",
+          onClick: () => onSocialLogin("MT Login"),
+          children: [
+            /* @__PURE__ */ jsx(Lock, { className: "w-5 h-5 mr-2 text-[var(--chart-4)]" }),
+            /* @__PURE__ */ jsx("span", { children: t("login.signInWithMTLogin") })
+          ]
+        }
+      ),
+      providers.includes("govBr") && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          className: "w-full justify-center font-normal",
+          onClick: () => onSocialLogin("gov.br"),
+          children: /* @__PURE__ */ jsxs("span", { children: [
+            t("login.signInWithGovBr").split("gov.br")[0],
+            /* @__PURE__ */ jsx("strong", { className: "font-semibold", children: "gov.br" }),
+            t("login.signInWithGovBr").split("gov.br")[1] || ""
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+
+function usePasswordStrength(password) {
+  return useMemo(() => {
+    if (password.length === 0) return null;
+    if (password.length < 6) return "weak";
+    if (password.length < 10) return "medium";
+    return "strong";
+  }, [password]);
+}
+
+const BAR_WIDTH = {
+  weak: "w-1/3 bg-destructive",
+  medium: "w-2/3 bg-[var(--chart-3)]",
+  strong: "w-full bg-[var(--chart-2)]"
+};
+const TEXT_COLOR = {
+  weak: "text-destructive",
+  medium: "text-[var(--chart-3)]",
+  strong: "text-[var(--chart-2)]"
+};
+const LABEL_KEY = {
+  weak: "resetPassword.strengthWeak",
+  medium: "resetPassword.strengthMedium",
+  strong: "resetPassword.strengthStrong"
+};
+function PasswordStrengthMeter({ strength }) {
+  const { t } = useTranslation();
+  if (!strength) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-1 h-1 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: `h-full transition-all duration-300 ${BAR_WIDTH[strength]}` }) }),
+    /* @__PURE__ */ jsx("span", { className: `text-small ${TEXT_COLOR[strength]}`, children: t(LABEL_KEY[strength]) })
+  ] });
+}
+
+const colorTokens$3 = {
+  primary: { bg: "bg-primary/10", icon: "text-primary" },
+  "chart-1": { bg: "bg-[var(--chart-1)]/15", icon: "text-[var(--chart-1)]" },
+  "chart-2": { bg: "bg-[var(--chart-2)]/15", icon: "text-[var(--chart-2)]" },
+  "chart-3": { bg: "bg-[var(--chart-3)]/15", icon: "text-[var(--chart-3)]" },
+  "chart-4": { bg: "bg-[var(--chart-4)]/15", icon: "text-[var(--chart-4)]" },
+  "chart-5": { bg: "bg-[var(--chart-5)]/15", icon: "text-[var(--chart-5)]" },
+  success: { bg: "bg-success/10", icon: "text-success" },
+  info: { bg: "bg-info/10", icon: "text-info" },
+  warning: { bg: "bg-warning/10", icon: "text-warning" },
+  destructive: { bg: "bg-destructive/10", icon: "text-destructive" }
+};
+function PillBadge({
+  children,
+  icon,
+  color = "primary",
+  className,
+  ...props
+}) {
+  const { bg, icon: textColor } = colorTokens$3[color];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wide",
+        bg,
+        textColor,
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "flex items-center [&>svg]:size-3.5", "aria-hidden": "true", children: icon }),
+        children
+      ]
+    }
+  );
+}
+
+function MarketingNavbar({
+  logo,
+  links,
+  cta,
+  secondaryCta,
+  className
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const closeMenu = () => setIsOpen(false);
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        "sticky top-0 z-50 w-full border-b border-border bg-card/80 backdrop-blur",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("nav", { className: "mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center", children: logo }),
+          /* @__PURE__ */ jsx("div", { className: "hidden flex-1 items-center justify-center gap-8 md:flex", children: links.map((link) => /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: link.href,
+              className: "text-sm font-medium text-muted-foreground transition-colors hover:text-foreground",
+              children: link.label
+            },
+            link.href
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "hidden shrink-0 items-center gap-3 md:flex", children: [
+            secondaryCta && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                asChild: !!secondaryCta.href,
+                onClick: secondaryCta.onClick,
+                children: secondaryCta.href ? /* @__PURE__ */ jsx("a", { href: secondaryCta.href, children: secondaryCta.label }) : secondaryCta.label
+              }
+            ),
+            cta && /* @__PURE__ */ jsx(Button, { variant: "default", asChild: !!cta.href, onClick: cta.onClick, children: cta.href ? /* @__PURE__ */ jsx("a", { href: cta.href, children: cta.label }) : cta.label })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "md:hidden",
+              onClick: () => setIsOpen((prev) => !prev),
+              "aria-label": isOpen ? "Close menu" : "Open menu",
+              "aria-expanded": isOpen,
+              children: isOpen ? /* @__PURE__ */ jsx(X, { className: "size-5" }) : /* @__PURE__ */ jsx(Menu, { className: "size-5" })
+            }
+          )
+        ] }),
+        isOpen && /* @__PURE__ */ jsx("div", { className: "border-t border-border bg-card/95 backdrop-blur md:hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 px-4 py-4 sm:px-6", children: [
+          links.map((link) => /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: link.href,
+              onClick: closeMenu,
+              className: "rounded-[var(--radius)] px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+              children: link.label
+            },
+            link.href
+          )),
+          (secondaryCta || cta) && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-col gap-2 border-t border-border pt-4", children: [
+            secondaryCta && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                className: "w-full",
+                asChild: !!secondaryCta.href,
+                onClick: () => {
+                  closeMenu();
+                  secondaryCta.onClick?.();
+                },
+                children: secondaryCta.href ? /* @__PURE__ */ jsx("a", { href: secondaryCta.href, children: secondaryCta.label }) : secondaryCta.label
+              }
+            ),
+            cta && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "default",
+                className: "w-full",
+                asChild: !!cta.href,
+                onClick: () => {
+                  closeMenu();
+                  cta.onClick?.();
+                },
+                children: cta.href ? /* @__PURE__ */ jsx("a", { href: cta.href, children: cta.label }) : cta.label
+              }
+            )
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+
+function HeroCtaButton({
+  cta,
+  variant
+}) {
+  if (cta.href) {
+    return /* @__PURE__ */ jsx(Button, { asChild: true, variant, size: "lg", children: /* @__PURE__ */ jsx("a", { href: cta.href, onClick: cta.onClick, children: cta.label }) });
+  }
+  return /* @__PURE__ */ jsx(Button, { variant, size: "lg", onClick: cta.onClick, children: cta.label });
+}
+function Hero({
+  eyebrow,
+  title,
+  description,
+  primaryCta,
+  secondaryCta,
+  visual,
+  align = "left",
+  decorative = false,
+  className,
+  ...props
+}) {
+  const isCentered = align === "center";
+  return /* @__PURE__ */ jsxs("section", { className: cn("relative overflow-hidden py-16 md:py-24", className), ...props, children: [
+    decorative && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "pointer-events-none absolute inset-0 z-0 overflow-hidden",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-1/2 h-72 w-72 -translate-x-1/2 -translate-y-1/2 rounded-full bg-[linear-gradient(135deg,var(--gradient-start),var(--gradient-end))] opacity-20 blur-3xl md:h-[28rem] md:w-[28rem] lg:h-[36rem] lg:w-[36rem]" })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("grid items-center gap-12", visual ? "lg:grid-cols-2" : "mx-auto max-w-3xl"),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex flex-col gap-6",
+                isCentered ? "items-center text-center" : "items-start text-left"
+              ),
+              children: [
+                eyebrow && /* @__PURE__ */ jsx(PillBadge, { icon: eyebrow.icon, children: eyebrow.label }),
+                /* @__PURE__ */ jsx("h1", { className: "text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", children: title }),
+                description && /* @__PURE__ */ jsx("p", { className: "max-w-2xl text-lg text-muted-foreground", children: description }),
+                (primaryCta || secondaryCta) && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex flex-col gap-3 pt-2 sm:flex-row",
+                      isCentered && "sm:justify-center"
+                    ),
+                    children: [
+                      primaryCta && /* @__PURE__ */ jsx(HeroCtaButton, { cta: primaryCta, variant: "default" }),
+                      secondaryCta && /* @__PURE__ */ jsx(HeroCtaButton, { cta: secondaryCta, variant: "outline" })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          visual && /* @__PURE__ */ jsx("div", { className: "relative", children: visual })
+        ]
+      }
+    ) })
+  ] });
+}
+
+function LogoCloud({ title, logos, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full text-center", className), ...props, children: [
+    title && /* @__PURE__ */ jsx("p", { className: "mb-6 text-xs font-medium uppercase tracking-wider text-muted-foreground sm:mb-8", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-8 md:gap-12", children: logos.map((logo, index) => /* @__PURE__ */ jsx(
+      ImageWithFallback,
+      {
+        src: logo.src,
+        alt: logo.alt,
+        className: "h-6 w-auto object-contain grayscale opacity-60 transition-all hover:opacity-100 hover:grayscale-0 md:h-8"
+      },
+      `${logo.alt}-${index}`
+    )) })
+  ] });
+}
+
+const colorTokens$2 = {
+  primary: { bg: "bg-primary/10", icon: "text-primary" },
+  "chart-1": { bg: "bg-[var(--chart-1)]/15", icon: "text-[var(--chart-1)]" },
+  "chart-2": { bg: "bg-[var(--chart-2)]/15", icon: "text-[var(--chart-2)]" },
+  "chart-3": { bg: "bg-[var(--chart-3)]/15", icon: "text-[var(--chart-3)]" },
+  "chart-4": { bg: "bg-[var(--chart-4)]/15", icon: "text-[var(--chart-4)]" },
+  "chart-5": { bg: "bg-[var(--chart-5)]/15", icon: "text-[var(--chart-5)]" },
+  success: { bg: "bg-success/10", icon: "text-success" },
+  info: { bg: "bg-info/10", icon: "text-info" },
+  warning: { bg: "bg-warning/10", icon: "text-warning" },
+  destructive: { bg: "bg-destructive/10", icon: "text-destructive" }
+};
+const columnClasses$1 = {
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-4"
+};
+function StatBand({ stats, columns, className, ...props }) {
+  const resolvedColumns = columns ?? Math.min(stats.length, 4);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("grid grid-cols-2 gap-8", columnClasses$1[resolvedColumns] ?? columnClasses$1[4], className),
+      ...props,
+      children: stats.map((stat, index) => {
+        const { icon: valueColor } = colorTokens$2[stat.color ?? "primary"];
+        return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center sm:items-start sm:text-left", children: [
+          /* @__PURE__ */ jsx("span", { className: cn("text-3xl md:text-5xl font-bold tracking-tight", valueColor), children: stat.value }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground mt-1", children: stat.label })
+        ] }, index);
+      })
+    }
+  );
+}
+
+function FeatureRow({
+  eyebrow,
+  title,
+  description,
+  bullets,
+  visual,
+  reverse = false,
+  tone = "default",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: cn("py-16 md:py-24", tone === "muted" ? "bg-muted" : "bg-background", className),
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto grid max-w-6xl gap-12 px-4 sm:px-6 lg:grid-cols-2 lg:items-center lg:px-8", children: [
+        /* @__PURE__ */ jsxs("div", { className: cn(reverse ? "lg:order-last" : "lg:order-first"), children: [
+          eyebrow && /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold uppercase tracking-wide text-primary", children: eyebrow }),
+          /* @__PURE__ */ jsx("h2", { className: cn("text-2xl font-bold text-foreground md:text-3xl", eyebrow && "mt-2"), children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "mt-4 text-muted-foreground leading-relaxed", children: description }),
+          bullets && bullets.length > 0 && /* @__PURE__ */ jsx("ul", { className: "mt-4 space-y-2", children: bullets.map((bullet) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsx(CheckCircle2, { className: "size-5 shrink-0 text-primary" }),
+            /* @__PURE__ */ jsx("span", { className: "text-foreground", children: bullet })
+          ] }, bullet)) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: cn(reverse ? "lg:order-first" : "lg:order-last"), children: visual })
+      ] })
+    }
+  );
+}
+
+const colorTokens$1 = {
+  primary: { bg: "bg-primary/10", icon: "text-primary" },
+  "chart-1": { bg: "bg-[var(--chart-1)]/15", icon: "text-[var(--chart-1)]" },
+  "chart-2": { bg: "bg-[var(--chart-2)]/15", icon: "text-[var(--chart-2)]" },
+  "chart-3": { bg: "bg-[var(--chart-3)]/15", icon: "text-[var(--chart-3)]" },
+  "chart-4": { bg: "bg-[var(--chart-4)]/15", icon: "text-[var(--chart-4)]" },
+  "chart-5": { bg: "bg-[var(--chart-5)]/15", icon: "text-[var(--chart-5)]" },
+  success: { bg: "bg-success/10", icon: "text-success" },
+  info: { bg: "bg-info/10", icon: "text-info" },
+  warning: { bg: "bg-warning/10", icon: "text-warning" },
+  destructive: { bg: "bg-destructive/10", icon: "text-destructive" }
+};
+const columnClasses = {
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-4"
+};
+function ServiceCardGrid({
+  items,
+  variant = "card",
+  columns = 3,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 gap-6 md:gap-8", columnClasses[columns], className), children: items.map((item, index) => /* @__PURE__ */ jsx(ServiceCard, { variant, ...item }, `${item.title}-${index}`)) });
+}
+function ServiceCard({
+  icon,
+  color = "primary",
+  category,
+  title,
+  description,
+  checklist,
+  bullets,
+  cta,
+  variant = "card",
+  className
+}) {
+  const { bg, icon: iconColor } = colorTokens$1[color];
+  const iconChip = /* @__PURE__ */ jsx("div", { className: cn("w-fit rounded-[var(--radius)] p-3", bg), children: /* @__PURE__ */ jsx("div", { className: cn("[&>svg]:size-6", iconColor), children: icon }) });
+  if (variant === "plain") {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), children: [
+      iconChip,
+      /* @__PURE__ */ jsxs("div", { children: [
+        category && /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: category }),
+        /* @__PURE__ */ jsx("h3", { className: cn("text-base font-semibold text-foreground", category && "mt-1"), children: title })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: description })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Card, { className: cn("flex h-full flex-col", className), children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      iconChip,
+      /* @__PURE__ */ jsxs("div", { children: [
+        category && /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: category }),
+        /* @__PURE__ */ jsx(CardTitle, { className: category ? "mt-1" : void 0, children: title })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "flex-1 space-y-4", children: [
+      /* @__PURE__ */ jsx(CardDescription, { className: "leading-relaxed", children: description }),
+      checklist && checklist.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: checklist.map((item) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 rounded-[var(--radius)] bg-muted p-3", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "flex size-5 shrink-0 items-center justify-center rounded-[var(--radius)]",
+              bg,
+              iconColor
+            ),
+            children: /* @__PURE__ */ jsx(Check, { className: "size-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground", children: item })
+      ] }, item)) }),
+      bullets && bullets.length > 0 && /* @__PURE__ */ jsx("ul", { className: "space-y-1.5", children: bullets.map((bullet) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { className: "mt-2 size-1.5 shrink-0 rounded-full bg-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { children: bullet })
+      ] }, bullet)) })
+    ] }),
+    cta && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(Button, { variant: "outline", className: "w-full", onClick: cta.onClick, asChild: !!cta.href, children: cta.href ? /* @__PURE__ */ jsx("a", { href: cta.href, children: cta.label }) : cta.label }) })
+  ] });
+}
+
+const colorTokens = {
+  primary: { bg: "bg-primary/10", icon: "text-primary" },
+  "chart-1": { bg: "bg-[var(--chart-1)]/15", icon: "text-[var(--chart-1)]" },
+  "chart-2": { bg: "bg-[var(--chart-2)]/15", icon: "text-[var(--chart-2)]" },
+  "chart-3": { bg: "bg-[var(--chart-3)]/15", icon: "text-[var(--chart-3)]" },
+  "chart-4": { bg: "bg-[var(--chart-4)]/15", icon: "text-[var(--chart-4)]" },
+  "chart-5": { bg: "bg-[var(--chart-5)]/15", icon: "text-[var(--chart-5)]" },
+  success: { bg: "bg-success/10", icon: "text-success" },
+  info: { bg: "bg-info/10", icon: "text-info" },
+  warning: { bg: "bg-warning/10", icon: "text-warning" },
+  destructive: { bg: "bg-destructive/10", icon: "text-destructive" }
+};
+function EvidenceTimeline({ items, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative pl-12", className), ...props, children: [
+    /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "absolute left-4 top-4 bottom-4 w-px bg-border" }),
+    /* @__PURE__ */ jsx("ol", { className: "relative", children: items.map((item, index) => {
+      const { bg, icon: iconColor } = colorTokens[item.color ?? "primary"];
+      return /* @__PURE__ */ jsxs("li", { className: "relative flex items-start gap-4 pb-10 last:pb-0", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute -left-12 top-0 flex size-8 shrink-0 items-center justify-center rounded-full z-10 [&>svg]:size-4",
+              bg,
+              iconColor
+            ),
+            children: item.icon ?? /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: item.number ?? index + 1 })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "font-semibold text-foreground", children: item.title }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: item.description })
+        ] })
+      ] }, index);
+    }) })
+  ] });
+}
+
+function ComplianceBadgeRow({ badges, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-wrap items-start justify-center gap-8 md:gap-12", className),
+      ...props,
+      children: badges.map((badge, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex max-w-[10rem] flex-col items-center gap-2 text-center",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center rounded-full border border-border bg-card p-3 [&>svg]:size-6", children: badge.icon }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: badge.label }),
+            badge.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: badge.description })
+          ]
+        },
+        `${badge.label}-${index}`
+      ))
+    }
+  );
+}
+
+function CTASection({
+  title,
+  description,
+  cta,
+  secondaryCta,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(
+        "w-full rounded-[var(--radius-card)] bg-[image:var(--gradient-diagonal)] px-6 py-16 text-center md:py-20",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-white md:text-4xl", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "mx-auto mt-3 max-w-xl text-white/80", children: description }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              asChild: !!cta.href,
+              onClick: cta.onClick,
+              className: "border-0 bg-white text-foreground hover:bg-white/90",
+              children: cta.href ? /* @__PURE__ */ jsx("a", { href: cta.href, children: cta.label }) : cta.label
+            }
+          ),
+          secondaryCta && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              asChild: !!secondaryCta.href,
+              onClick: secondaryCta.onClick,
+              className: "border-white/40 text-white hover:bg-white/10",
+              children: secondaryCta.href ? /* @__PURE__ */ jsx("a", { href: secondaryCta.href, children: secondaryCta.label }) : secondaryCta.label
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+const gridColsClasses = {
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-4",
+  5: "md:grid-cols-5",
+  6: "md:grid-cols-6"
+};
+function MarketingFooter({
+  logo,
+  tagline,
+  columns,
+  legalLinks,
+  copyright,
+  className
+}) {
+  const resolvedCols = Math.min(Math.max(columns.length + 1, 2), 6);
+  return /* @__PURE__ */ jsx("footer", { className: cn("border-t border-border bg-card", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-2 gap-8 py-12", gridColsClasses[resolvedCols]), children: [
+      /* @__PURE__ */ jsxs("div", { className: "col-span-2 md:col-span-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center", children: logo }),
+        tagline && /* @__PURE__ */ jsx("p", { className: "mt-3 max-w-xs text-sm text-muted-foreground", children: tagline })
+      ] }),
+      columns.map((column) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "mb-3 text-sm font-semibold text-foreground", children: column.heading }),
+        /* @__PURE__ */ jsx("ul", { className: "space-y-2 text-sm text-muted-foreground", children: column.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: link.href, className: "transition-colors hover:text-foreground", children: link.label }) }, link.href)) })
+      ] }, column.heading))
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-between gap-4 border-t border-border pt-6 pb-8 text-xs text-muted-foreground md:flex-row", children: [
+      copyright && /* @__PURE__ */ jsx("p", { children: copyright }),
+      legalLinks && legalLinks.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap items-center gap-4", children: legalLinks.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: link.href, className: "transition-colors hover:text-foreground", children: link.label }) }, link.href)) })
+    ] })
+  ] }) });
+}
+
+export { AuthPageShell as A, CTASection as C, EvidenceTimeline as E, FeatureCardSkeleton as F, Hero as H, LogoCloud as L, MarketingFooter as M, PasswordStrengthMeter as P, ServiceCard as S, ComplianceBadgeRow as a, FeatureRow as b, MarketingNavbar as c, PillBadge as d, ServiceCardGrid as e, SocialLoginButtons as f, StatBand as g, usePasswordStrength as u };