@web-my-money/blocks 1.0.0

package/dist/index.js

@@ -0,0 +1,3525 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ActivityFeed: () => ActivityFeed,
+  AppBrand: () => AppBrand,
+  AppShell: () => AppShell,
+  AppearanceSettings: () => AppearanceSettings,
+  AvatarGroup: () => AvatarGroup,
+  BentoGrid: () => BentoGrid,
+  BrandFrame: () => BrandFrame,
+  CTABanner: () => CTABanner,
+  CaseStudiesSection: () => CaseStudiesSection,
+  ComparisonTable: () => ComparisonTable,
+  ContactForm: () => ContactForm,
+  DEFAULT_WAVES: () => DEFAULT_WAVES,
+  DashboardHeader: () => DashboardHeader,
+  DataSummaryCards: () => DataSummaryCards,
+  DataTable: () => DataTable,
+  EmptyState: () => EmptyState,
+  FadeUp: () => FadeUp,
+  Faq: () => Faq,
+  FeatureGrid: () => FeatureGrid,
+  Footer: () => Footer,
+  GlassPanel: () => GlassPanel,
+  HeroCanvas: () => HeroCanvas,
+  HeroSection: () => HeroSection,
+  KPIRow: () => KPIRow,
+  LayeredButton: () => LayeredButton,
+  LayoutToggle: () => LayoutToggle,
+  LightboxGallery: () => LightboxGallery,
+  LogoCloud: () => LogoCloud,
+  Marquee: () => Marquee,
+  NavBar: () => NavBar,
+  NotificationBanner: () => NotificationBanner,
+  PageHeader: () => PageHeader,
+  PageHeaderBanner: () => PageHeaderBanner,
+  PricingTable: () => PricingTable,
+  ProcessSteps: () => ProcessSteps,
+  ScrollReveal: () => ScrollReveal,
+  SectionGlow: () => SectionGlow,
+  SectionIntro: () => SectionIntro,
+  SectionLabel: () => SectionLabel,
+  SidebarNavigation: () => SidebarNavigation,
+  SocialProof: () => SocialProof,
+  StatCard: () => StatCard,
+  StatsSection: () => StatsSection,
+  SubTabs: () => SubTabs,
+  TechCarousel: () => TechCarousel,
+  TestimonialCarousel: () => TestimonialCarousel,
+  TestimonialsCarousel: () => TestimonialsCarousel,
+  TestimonialsSection: () => TestimonialsSection,
+  TextRotator: () => TextRotator,
+  Thumbnail: () => Thumbnail,
+  UseCasesSection: () => UseCasesSection,
+  ValueStackSection: () => ValueStackSection,
+  WaveCanvas: () => WaveCanvas,
+  useActionRunner: () => useActionRunner,
+  useLayoutPreference: () => useLayoutPreference,
+  useOptimisticAction: () => useOptimisticAction
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/fade-up/index.tsx
+var import_framer_motion = require("framer-motion");
+var import_jsx_runtime = require("react/jsx-runtime");
+var SPRING_EASE = [0.22, 1, 0.36, 1];
+function FadeUp({
+  children,
+  className,
+  delay = 0
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_framer_motion.motion.div,
+    {
+      className,
+      initial: { opacity: 0, y: 30 },
+      whileInView: { opacity: 1, y: 0 },
+      viewport: { once: true, amount: 0.2 },
+      transition: { duration: 0.7, delay, ease: SPRING_EASE },
+      style: { willChange: "transform, opacity" },
+      children
+    }
+  );
+}
+
+// src/scroll-reveal/index.tsx
+var React = __toESM(require("react"));
+var import_framer_motion2 = require("framer-motion");
+
+// src/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/scroll-reveal/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var offset = { up: { y: 24 }, down: { y: -24 }, left: { x: 24 }, right: { x: -24 }, none: {} };
+function ScrollReveal({
+  children,
+  className,
+  direction = "up",
+  delay = 0,
+  once = true,
+  amount = 0.3
+}) {
+  const ref = React.useRef(null);
+  const inView = (0, import_framer_motion2.useInView)(ref, { once, amount });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_framer_motion2.motion.div,
+    {
+      ref,
+      "data-wmm-fx": true,
+      className: cn(className),
+      initial: { opacity: 0, ...offset[direction] },
+      animate: inView ? { opacity: 1, x: 0, y: 0 } : {},
+      transition: { duration: 0.5, delay, ease: [0.22, 1, 0.36, 1] },
+      children
+    }
+  );
+}
+
+// src/section-label/index.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function SectionLabel({
+  children,
+  variant = "pill",
+  index,
+  dotColor = "var(--primary)",
+  className
+}) {
+  if (variant === "rule") {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("flex items-center gap-3", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-px flex-1 bg-border" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs font-semibold uppercase tracking-widest text-muted-foreground", children }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-px flex-1 bg-border" })
+    ] });
+  }
+  if (variant === "indexed") {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("inline-flex items-center gap-2.5", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "span",
+        {
+          className: "flex h-5 w-5 items-center justify-center rounded-full text-[10px] font-bold",
+          style: { background: "var(--primary)", color: "var(--primary-foreground)" },
+          children: index ?? "\xB7"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs font-semibold uppercase tracking-widest text-muted-foreground", children })
+    ] });
+  }
+  if (variant === "flanked") {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("inline-flex items-center gap-2 text-muted-foreground", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-primary select-none", children: "\u2014" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs font-semibold uppercase tracking-widest", children }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-primary select-none", children: "\u2014" })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center gap-2 rounded-full border border-border bg-foreground/[0.06] px-4 py-1.5 backdrop-blur-md",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            className: "h-1.5 w-1.5 rounded-full shrink-0",
+            style: { backgroundColor: dotColor }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs font-medium uppercase tracking-[0.15em] text-muted-foreground", children })
+      ]
+    }
+  );
+}
+
+// src/section-glow/index.tsx
+var import_framer_motion3 = require("framer-motion");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function SectionGlow({ variant = "primary", className }) {
+  const reduce = (0, import_framer_motion3.useReducedMotion)();
+  const color = variant === "secondary" ? "color-mix(in srgb, var(--secondary, #1f2d56) 18%, transparent)" : "color-mix(in srgb, var(--primary, #8fccb6) 16%, transparent)";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "pointer-events-none absolute left-1/2 -top-40 -translate-x-1/2",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_framer_motion3.motion.div,
+        {
+          className: "h-[460px] w-[min(820px,94vw)] rounded-full blur-[60px]",
+          style: {
+            background: `radial-gradient(circle at 50% 50%, ${color}, transparent 70%)`
+          },
+          initial: reduce ? false : { opacity: 0, scale: 0.92 },
+          whileInView: { opacity: 1, scale: 1 },
+          viewport: { once: true, margin: "-8% 0px -8% 0px" },
+          transition: { duration: 1, ease: [0.22, 0.61, 0.36, 1] }
+        }
+      )
+    }
+  );
+}
+
+// src/section-intro/index.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function SectionIntro({
+  label,
+  title,
+  body,
+  centered = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className: cn(
+        "relative z-10 max-w-3xl",
+        centered && "mx-auto text-center"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SectionLabel, { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "h2",
+          {
+            className: "mt-6 font-display text-4xl font-black tracking-[-0.04em] text-foreground sm:text-5xl md:text-6xl",
+            style: { textShadow: "0 18px 60px rgba(0,0,0,0.24)" },
+            children: title
+          }
+        ),
+        body ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "p",
+          {
+            className: cn(
+              "mt-6 max-w-2xl text-base leading-8 text-muted-foreground md:text-lg",
+              centered && "mx-auto"
+            ),
+            children: body
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/text-rotator/index.tsx
+var React2 = __toESM(require("react"));
+var import_framer_motion4 = require("framer-motion");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var SPRING = [0.16, 1, 0.3, 1];
+function TextRotator({
+  phrases,
+  interval = 2800,
+  className,
+  phraseClassName
+}) {
+  const [index, setIndex] = React2.useState(0);
+  React2.useEffect(() => {
+    const id = setInterval(
+      () => setIndex((i) => (i + 1) % phrases.length),
+      interval
+    );
+    return () => clearInterval(id);
+  }, [phrases.length, interval]);
+  return (
+    /* clip container so exiting phrase doesn't overflow */
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "span",
+      {
+        className: cn("relative inline-flex overflow-hidden align-bottom", className),
+        style: { minWidth: "1ch" },
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_framer_motion4.AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_framer_motion4.motion.span,
+          {
+            initial: { y: "100%", opacity: 0 },
+            animate: { y: 0, opacity: 1 },
+            exit: { y: "-100%", opacity: 0 },
+            transition: { duration: 0.55, ease: SPRING },
+            className: cn("inline-block", phraseClassName),
+            children: phrases[index]
+          },
+          phrases[index]
+        ) })
+      }
+    )
+  );
+}
+
+// src/avatar-group/index.tsx
+var import_jsx_runtime7 = (
+  // eslint-disable-next-line @next/next/no-img-element
+  require("react/jsx-runtime")
+);
+var sizePx = {
+  sm: "h-7 w-7 text-[10px]",
+  md: "h-9 w-9 text-xs",
+  lg: "h-11 w-11 text-sm"
+};
+var overlapPx = {
+  sm: "-ml-2",
+  md: "-ml-2.5",
+  lg: "-ml-3"
+};
+function AvatarGroup({
+  avatars,
+  max = 5,
+  label,
+  size = "md",
+  className
+}) {
+  const shown = avatars.slice(0, max);
+  const overflow = avatars.length - max;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("flex items-center gap-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center", children: [
+      shown.map((av, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "div",
+        {
+          title: av.name,
+          className: cn(
+            "relative rounded-full ring-2 ring-background overflow-hidden shrink-0",
+            sizePx[size],
+            i > 0 && overlapPx[size]
+          ),
+          children: av.src ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "img",
+            {
+              src: av.src,
+              alt: av.name,
+              className: "h-full w-full object-cover"
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "span",
+            {
+              className: "flex h-full w-full items-center justify-center font-semibold bg-primary/20 text-primary",
+              children: av.initials ?? av.name.slice(0, 2).toUpperCase()
+            }
+          )
+        },
+        i
+      )),
+      overflow > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "div",
+        {
+          className: cn(
+            "relative rounded-full ring-2 ring-background shrink-0",
+            "flex items-center justify-center font-semibold",
+            "bg-muted text-muted-foreground",
+            sizePx[size],
+            overlapPx[size]
+          ),
+          children: [
+            "+",
+            overflow
+          ]
+        }
+      )
+    ] }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-sm text-muted-foreground", children: label })
+  ] });
+}
+
+// src/marquee/index.tsx
+var React3 = __toESM(require("react"));
+var import_framer_motion5 = require("framer-motion");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Marquee({
+  children,
+  reverse = false,
+  speed = 30,
+  gap = "2rem",
+  pauseOnHover = true,
+  fadeWidth = "6rem",
+  className
+}) {
+  const [paused, setPaused] = React3.useState(false);
+  const doubled = [...children, ...children];
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      className: cn("relative overflow-hidden", className),
+      onMouseEnter: () => pauseOnHover && setPaused(true),
+      onMouseLeave: () => pauseOnHover && setPaused(false),
+      children: [
+        fadeWidth !== "0" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute inset-y-0 left-0 z-10",
+              style: {
+                width: fadeWidth,
+                background: "linear-gradient(to right, var(--background), transparent)"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute inset-y-0 right-0 z-10",
+              style: {
+                width: fadeWidth,
+                background: "linear-gradient(to left, var(--background), transparent)"
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_framer_motion5.motion.div,
+          {
+            className: "flex",
+            style: { gap },
+            animate: { x: reverse ? ["-50%", "0%"] : ["0%", "-50%"] },
+            transition: {
+              duration: speed,
+              ease: "linear",
+              repeat: Infinity
+            },
+            ...paused && { animate: { x: reverse ? "-50%" : "0%" } },
+            children: doubled.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "shrink-0", children: child }, i))
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/layered-button/index.tsx
+var import_framer_motion6 = require("framer-motion");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function LayeredButton({
+  href,
+  children,
+  variant = "solid",
+  className,
+  disabled = false,
+  icon,
+  onClick,
+  type = "button"
+}) {
+  const innerClassName = variant === "solid" ? "bg-cta-gradient text-white shadow-glow" : "bg-white/[0.06] text-white/88";
+  const iconNode = icon ?? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.ArrowRight, { className: "h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" });
+  const wrapperClassName = cn(
+    "group relative inline-flex translate-gpu disabled:pointer-events-none disabled:opacity-60",
+    disabled && "pointer-events-none opacity-60",
+    className
+  );
+  const buttonChrome = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    variant === "solid" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute -inset-1 animate-pulse rounded-full bg-cta-gradient opacity-50 blur-xl transition duration-500 group-hover:opacity-80" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "div",
+      {
+        className: cn(
+          "relative w-full rounded-full p-px",
+          variant === "solid" ? "border border-white/60" : "border border-white/20"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute left-1/4 top-0 h-3 w-1/2 rounded-full bg-white/40 blur-md" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            "div",
+            {
+              className: cn(
+                "relative flex w-full items-center justify-center gap-2 overflow-hidden rounded-full px-7 py-3 text-sm font-medium transition duration-300 group-hover:shadow-glow-strong",
+                innerClassName
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "pointer-events-none absolute inset-y-0 -left-1/3 w-1/3 -skew-x-12 bg-[linear-gradient(90deg,transparent,rgba(255,255,255,0.24),transparent)] opacity-0 transition-all duration-700 group-hover:left-[120%] group-hover:opacity-100" }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children }),
+                iconNode
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+  if (href) {
+    const handleClick = (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented || disabled) return;
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_framer_motion6.motion.a,
+      {
+        href,
+        onClick: handleClick,
+        whileHover: disabled ? void 0 : { scale: 1.02, y: -2 },
+        whileTap: disabled ? void 0 : { scale: 0.99 },
+        className: wrapperClassName,
+        style: { willChange: "transform" },
+        "aria-disabled": disabled,
+        children: buttonChrome
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_framer_motion6.motion.button,
+    {
+      type,
+      onClick,
+      whileHover: disabled ? void 0 : { scale: 1.02, y: -2 },
+      whileTap: disabled ? void 0 : { scale: 0.99 },
+      className: wrapperClassName,
+      style: { willChange: "transform" },
+      disabled,
+      children: buttonChrome
+    }
+  );
+}
+
+// src/nav-bar/index.tsx
+var React4 = __toESM(require("react"));
+var import_framer_motion7 = require("framer-motion");
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function NavBar({ data, logo, className }) {
+  const [open, setOpen] = React4.useState(false);
+  const [scrolled, setScrolled] = React4.useState(false);
+  React4.useEffect(() => {
+    const update = () => setScrolled(window.scrollY > 12);
+    window.addEventListener("scroll", update, { passive: true });
+    update();
+    return () => window.removeEventListener("scroll", update);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "header",
+    {
+      className: cn(
+        "fixed inset-x-0 top-0 z-50 transition-all duration-300",
+        scrolled ? "border-b border-border/60 backdrop-blur-xl" : "border-b border-transparent",
+        className
+      ),
+      style: scrolled ? { background: "var(--glass-bg-strong, rgba(255,255,255,0.08))" } : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("nav", { className: "container mx-auto flex h-16 items-center justify-between px-4 md:px-6", children: [
+          logo && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("a", { href: "/", "aria-label": "Home", className: "inline-flex shrink-0 items-center", children: logo }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { className: "hidden md:flex items-center gap-7", children: data.links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "a",
+            {
+              href: link.href,
+              className: "text-sm text-muted-foreground transition-colors hover:text-foreground",
+              children: link.label
+            }
+          ) }, link.href)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-3", children: [
+            data.cta && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "a",
+              {
+                href: data.cta.href,
+                className: "hidden md:inline-flex items-center justify-center rounded-full px-5 py-2 text-sm font-semibold bg-primary text-primary-foreground transition-all hover:opacity-90 active:scale-[0.97]",
+                children: data.cta.label
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "button",
+              {
+                "aria-label": open ? "Close menu" : "Open menu",
+                onClick: () => setOpen((v) => !v),
+                className: "md:hidden rounded-lg p-2 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors",
+                children: open ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.X, { size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.Menu, { size: 20 })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_framer_motion7.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_framer_motion7.motion.div,
+          {
+            initial: { opacity: 0, height: 0 },
+            animate: { opacity: 1, height: "auto" },
+            exit: { opacity: 0, height: 0 },
+            transition: { duration: 0.22, ease: "easeInOut" },
+            className: "md:hidden overflow-hidden border-b border-border backdrop-blur-xl",
+            style: { background: "var(--glass-bg-strong, var(--background))" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("ul", { className: "container mx-auto flex flex-col px-4 pb-5 pt-1 gap-0.5", children: [
+              data.links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "a",
+                {
+                  href: link.href,
+                  onClick: () => setOpen(false),
+                  className: "block rounded-lg px-3 py-2.5 text-sm text-muted-foreground hover:text-foreground hover:bg-accent transition-colors",
+                  children: link.label
+                }
+              ) }, link.href)),
+              data.cta && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { className: "mt-3 pt-3 border-t border-border", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "a",
+                {
+                  href: data.cta.href,
+                  onClick: () => setOpen(false),
+                  className: "block rounded-full px-5 py-2.5 text-sm font-semibold text-center bg-primary text-primary-foreground hover:opacity-90 transition-opacity",
+                  children: data.cta.label
+                }
+              ) })
+            ] })
+          },
+          "mobile-menu"
+        ) })
+      ]
+    }
+  );
+}
+
+// src/cta-banner/index.tsx
+var import_framer_motion8 = require("framer-motion");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function CTABanner({ data, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "section",
+    {
+      className: cn("relative w-full py-24 lg:py-36 overflow-hidden", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute inset-0",
+            style: {
+              background: "var(--gradient-cta, linear-gradient(135deg, var(--primary) 0%, var(--ring) 100%))"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute -top-32 left-1/3 w-96 h-96 rounded-full blur-3xl opacity-30 pointer-events-none",
+            style: { background: "var(--primary, #8fccb6)" }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute -bottom-32 right-1/4 w-96 h-96 rounded-full blur-3xl opacity-20 pointer-events-none",
+            style: { background: "var(--wmm-violet, #869ce2)" }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative container mx-auto px-4 md:px-6 text-center max-w-3xl", children: [
+          data.badge && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_framer_motion8.motion.div,
+            {
+              initial: { opacity: 0, y: 12 },
+              whileInView: { opacity: 1, y: 0 },
+              viewport: { once: true },
+              transition: { duration: 0.5 },
+              className: "flex justify-center mb-5",
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SectionLabel, { className: "border-white/20 text-white/90", children: data.badge })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_framer_motion8.motion.h2,
+            {
+              initial: { opacity: 0, y: 24 },
+              whileInView: { opacity: 1, y: 0 },
+              viewport: { once: true },
+              transition: { duration: 0.6, delay: data.badge ? 0.08 : 0 },
+              className: "text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-white mb-5",
+              children: data.heading
+            }
+          ),
+          data.subheading && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_framer_motion8.motion.p,
+            {
+              initial: { opacity: 0, y: 16 },
+              whileInView: { opacity: 1, y: 0 },
+              viewport: { once: true },
+              transition: { duration: 0.6, delay: 0.12 },
+              className: "text-lg md:text-xl text-white/75 max-w-xl mx-auto mb-10",
+              children: data.subheading
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            import_framer_motion8.motion.div,
+            {
+              initial: { opacity: 0, y: 16 },
+              whileInView: { opacity: 1, y: 0 },
+              viewport: { once: true },
+              transition: { duration: 0.5, delay: 0.2 },
+              className: "flex flex-col sm:flex-row items-center justify-center gap-3",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "a",
+                  {
+                    href: data.primaryCta.href,
+                    className: "inline-flex items-center justify-center rounded-full px-8 py-3.5 text-sm font-semibold bg-white text-foreground shadow-lg hover:bg-white/92 transition-all active:scale-[0.97]",
+                    children: data.primaryCta.label
+                  }
+                ),
+                data.secondaryCta && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "a",
+                  {
+                    href: data.secondaryCta.href,
+                    className: "inline-flex items-center justify-center rounded-full px-8 py-3.5 text-sm font-semibold text-white border border-white/30 hover:bg-white/10 transition-all",
+                    children: data.secondaryCta.label
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/process-steps/index.tsx
+var import_framer_motion9 = require("framer-motion");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function ProcessSteps({
+  label,
+  heading,
+  subheading,
+  steps,
+  layout = "horizontal",
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("section", { className: cn("w-full py-16 lg:py-28", className), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "container px-4 md:px-6 max-w-5xl mx-auto", children: [
+    (label || heading || subheading) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "text-center mb-14 space-y-4", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SectionLabel, { children: label }) }),
+      heading && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { className: "text-3xl md:text-4xl font-bold tracking-tight text-foreground", children: heading }),
+      subheading && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-muted-foreground max-w-xl mx-auto", children: subheading })
+    ] }),
+    layout === "horizontal" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "div",
+      {
+        className: cn(
+          "grid gap-8",
+          steps.length <= 3 ? "md:grid-cols-3" : "md:grid-cols-2 lg:grid-cols-4"
+        ),
+        children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          import_framer_motion9.motion.div,
+          {
+            initial: { opacity: 0, y: 20 },
+            whileInView: { opacity: 1, y: 0 },
+            viewport: { once: true },
+            transition: { duration: 0.5, delay: i * 0.1 },
+            className: "relative flex flex-col gap-4",
+            children: [
+              i < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "div",
+                {
+                  "aria-hidden": true,
+                  className: "hidden md:block absolute top-5 left-[calc(50%+24px)] right-0 h-px",
+                  style: { background: "var(--gradient-primary, var(--primary))", opacity: 0.25 }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "div",
+                {
+                  className: "flex h-10 w-10 items-center justify-center rounded-xl border border-primary/30 bg-primary/10 shrink-0",
+                  children: step.icon ?? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-sm font-bold text-primary", children: String(i + 1).padStart(2, "0") })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm font-semibold text-foreground mb-1", children: step.title }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm text-muted-foreground", children: step.description })
+              ] })
+            ]
+          },
+          i
+        ))
+      }
+    ) : (
+      /* Vertical layout */
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "max-w-2xl mx-auto space-y-0", children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        import_framer_motion9.motion.div,
+        {
+          initial: { opacity: 0, x: -16 },
+          whileInView: { opacity: 1, x: 0 },
+          viewport: { once: true },
+          transition: { duration: 0.5, delay: i * 0.08 },
+          className: "relative flex gap-6 pb-10 last:pb-0",
+          children: [
+            i < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "div",
+              {
+                "aria-hidden": true,
+                className: "absolute left-5 top-10 bottom-0 w-px",
+                style: { background: "var(--border)" }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "shrink-0 flex h-10 w-10 items-center justify-center rounded-xl border border-primary/30 bg-primary/10 z-10", children: step.icon ?? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-sm font-bold text-primary", children: String(i + 1).padStart(2, "0") }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "pt-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm font-semibold text-foreground mb-1", children: step.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm text-muted-foreground", children: step.description })
+            ] })
+          ]
+        },
+        i
+      )) })
+    )
+  ] }) });
+}
+
+// src/contact-form/index.tsx
+var React5 = __toESM(require("react"));
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function ContactForm({ data, onSubmit, className }) {
+  const [values, setValues] = React5.useState({});
+  const [loading, setLoading] = React5.useState(false);
+  const [sent, setSent] = React5.useState(false);
+  const set = (name, val) => setValues((prev) => ({ ...prev, [name]: val }));
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!onSubmit) {
+      setSent(true);
+      return;
+    }
+    setLoading(true);
+    try {
+      await onSubmit(values);
+      setSent(true);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const inputBase = "w-full rounded-lg border border-input bg-background px-3.5 py-2.5 text-sm text-foreground placeholder:text-muted-foreground/60 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent disabled:opacity-50";
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("section", { className: cn("w-full py-16 lg:py-28", className), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "container px-4 md:px-6 max-w-5xl mx-auto", children: [
+    (data.label || data.heading || data.subheading) && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "text-center mb-12 space-y-4", children: [
+      data.label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SectionLabel, { children: data.label }) }),
+      data.heading && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: "text-3xl md:text-4xl font-bold tracking-tight text-foreground", children: data.heading }),
+      data.subheading && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-muted-foreground max-w-xl mx-auto", children: data.subheading })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("grid gap-12", data.aside ? "md:grid-cols-[1fr_2fr]" : "max-w-2xl mx-auto"), children: [
+      data.aside && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: data.aside }),
+      sent ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col items-center justify-center text-center gap-4 rounded-2xl border border-border bg-card p-12", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M20 6 9 17l-5-5" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-lg font-semibold text-foreground", children: "Message sent!" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm text-muted-foreground", children: "We'll be in touch shortly." })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        "form",
+        {
+          onSubmit: handleSubmit,
+          className: "grid grid-cols-2 gap-5 rounded-2xl border border-border bg-card p-6 md:p-8",
+          style: { boxShadow: "var(--shadow-card)" },
+          children: [
+            data.fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col gap-1.5",
+                  field.colSpan === 2 || field.type === "textarea" ? "col-span-2" : "col-span-2 sm:col-span-1"
+                ),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                    "label",
+                    {
+                      htmlFor: field.name,
+                      className: "text-xs font-medium text-foreground",
+                      children: [
+                        field.label,
+                        field.required && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-primary ml-0.5", children: "*" })
+                      ]
+                    }
+                  ),
+                  field.type === "textarea" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    "textarea",
+                    {
+                      id: field.name,
+                      name: field.name,
+                      rows: 5,
+                      required: field.required,
+                      placeholder: field.placeholder,
+                      value: values[field.name] ?? "",
+                      onChange: (e) => set(field.name, e.target.value),
+                      className: cn(inputBase, "resize-none")
+                    }
+                  ) : field.type === "select" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                    "select",
+                    {
+                      id: field.name,
+                      name: field.name,
+                      required: field.required,
+                      value: values[field.name] ?? "",
+                      onChange: (e) => set(field.name, e.target.value),
+                      className: inputBase,
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "", children: field.placeholder ?? "Select\u2026" }),
+                        field.options?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: opt, children: opt }, opt))
+                      ]
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    "input",
+                    {
+                      id: field.name,
+                      name: field.name,
+                      type: field.type ?? "text",
+                      required: field.required,
+                      placeholder: field.placeholder,
+                      value: values[field.name] ?? "",
+                      onChange: (e) => set(field.name, e.target.value),
+                      className: inputBase
+                    }
+                  )
+                ]
+              },
+              field.name
+            )),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "col-span-2 mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "button",
+              {
+                type: "submit",
+                disabled: loading,
+                className: "w-full flex items-center justify-center rounded-full px-6 py-3 text-sm font-semibold bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-60 transition-all active:scale-[0.98]",
+                children: loading ? "Sending\u2026" : data.submitLabel ?? "Send Message"
+              }
+            ) })
+          ]
+        }
+      )
+    ] })
+  ] }) });
+}
+
+// src/case-studies-section/index.tsx
+var import_framer_motion10 = require("framer-motion");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function CaseStudiesSection({
+  label,
+  heading,
+  subheading,
+  items,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("section", { className: cn("w-full py-16 lg:py-28", className), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "container px-4 md:px-6 max-w-6xl mx-auto", children: [
+    (label || heading || subheading) && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "text-center mb-14 space-y-4", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SectionLabel, { children: label }) }),
+      heading && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h2", { className: "text-3xl md:text-4xl font-bold tracking-tight text-foreground", children: heading }),
+      subheading && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-muted-foreground max-w-xl mx-auto", children: subheading })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "grid gap-6 md:grid-cols-2", children: items.map((cs, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      import_framer_motion10.motion.article,
+      {
+        initial: { opacity: 0, y: 24 },
+        whileInView: { opacity: 1, y: 0 },
+        whileHover: { y: -4 },
+        viewport: { once: true },
+        transition: { duration: 0.5, delay: i * 0.08 },
+        className: cn(
+          "relative flex flex-col rounded-2xl border border-border bg-card overflow-hidden"
+        ),
+        style: { boxShadow: "var(--shadow-card)" },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "absolute inset-x-8 top-0 h-px",
+              style: { background: "var(--gradient-primary, var(--primary))", opacity: 0.4 }
+            }
+          ),
+          cs.image && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "w-full border-b border-border overflow-hidden max-h-48", children: cs.image }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col flex-1 p-6 gap-5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2 flex-wrap", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold bg-primary/12 text-primary", children: cs.client }),
+              cs.vertical && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium bg-muted text-muted-foreground", children: cs.vertical })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("dl", { className: "space-y-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex gap-2 items-start", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("dt", { className: "shrink-0 text-xs font-semibold text-muted-foreground uppercase tracking-widest w-16 pt-0.5", children: "Before" }),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("dd", { className: "text-sm text-muted-foreground", children: cs.before })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex gap-2 items-start", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("dt", { className: "shrink-0 text-xs font-semibold text-primary uppercase tracking-widest w-16 pt-0.5", children: "Built" }),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("dd", { className: "text-sm text-foreground", children: cs.built })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex gap-2 items-start", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("dt", { className: "shrink-0 text-xs font-semibold text-emerald-500 uppercase tracking-widest w-16 pt-0.5", children: "Result" }),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("dd", { className: "text-sm font-medium text-foreground", children: cs.result })
+              ] })
+            ] }),
+            cs.stats && cs.stats.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex gap-4 flex-wrap border-t border-border pt-4", children: cs.stats.map((s, j) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-0.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-xl font-bold text-foreground", children: s.value }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-xs text-muted-foreground", children: s.label })
+            ] }, j)) }),
+            cs.quote && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("blockquote", { className: "border-l-2 border-primary/40 pl-4 mt-auto", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "text-sm italic text-muted-foreground", children: [
+                '"',
+                cs.quote,
+                '"'
+              ] }),
+              cs.quoteAuthor && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("cite", { className: "text-xs text-muted-foreground/70 not-italic mt-1 block", children: [
+                "\u2014 ",
+                cs.quoteAuthor
+              ] })
+            ] }),
+            cs.href && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "a",
+              {
+                href: cs.href,
+                className: "mt-auto self-start text-xs font-semibold text-primary hover:text-primary/80 underline-offset-2 hover:underline transition-colors",
+                children: "Read full case study \u2192"
+              }
+            )
+          ] })
+        ]
+      },
+      i
+    )) })
+  ] }) });
+}
+
+// src/bento-grid/index.tsx
+var import_framer_motion11 = require("framer-motion");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var spanCols = {
+  1: "md:col-span-1",
+  2: "md:col-span-2",
+  3: "md:col-span-3"
+};
+var spanRows = {
+  1: "",
+  2: "md:row-span-2"
+};
+function BentoGrid({
+  label,
+  heading,
+  subheading,
+  cells,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("section", { className: cn("w-full py-16 lg:py-28", className), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "container px-4 md:px-6 max-w-6xl mx-auto", children: [
+    (label || heading || subheading) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "text-center mb-12 space-y-4", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SectionLabel, { children: label }) }),
+      heading && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h2", { className: "text-3xl md:text-4xl font-bold tracking-tight text-foreground", children: heading }),
+      subheading && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-muted-foreground max-w-xl mx-auto", children: subheading })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 auto-rows-fr", children: cells.map((cell, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      import_framer_motion11.motion.div,
+      {
+        initial: { opacity: 0, y: 20 },
+        whileInView: { opacity: 1, y: 0 },
+        viewport: { once: true },
+        transition: { duration: 0.5, delay: i * 0.07 },
+        className: cn(
+          "relative flex flex-col rounded-2xl border overflow-hidden p-6 min-h-[180px]",
+          spanCols[cell.colSpan ?? 1],
+          spanRows[cell.rowSpan ?? 1],
+          cell.highlight ? "border-primary/50 bg-card" : "border-border bg-card",
+          cell.className
+        ),
+        style: cell.highlight ? { boxShadow: "var(--shadow-glow, none)" } : { boxShadow: "var(--shadow-card)" },
+        children: [
+          cell.highlight && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "absolute inset-x-0 top-0 h-px",
+              style: { background: "var(--gradient-primary, var(--primary))" }
+            }
+          ),
+          cell.tag && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "span",
+            {
+              className: cn(
+                "self-start inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium mb-4",
+                cell.highlight ? "bg-primary/15 text-primary" : "bg-muted text-muted-foreground"
+              ),
+              children: cell.tag
+            }
+          ),
+          cell.visual && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "mb-4 flex-1 flex items-start", children: cell.visual }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "mt-auto", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-base font-semibold text-foreground mb-1", children: cell.title }),
+            cell.description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm text-muted-foreground", children: cell.description })
+          ] })
+        ]
+      },
+      i
+    )) })
+  ] }) });
+}
+
+// src/stats-section/index.tsx
+var React6 = __toESM(require("react"));
+var import_framer_motion12 = require("framer-motion");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function CountUp({ value, animate: shouldAnimate = true }) {
+  const ref = React6.useRef(null);
+  const inView = (0, import_framer_motion12.useInView)(ref, { once: true, margin: "-80px" });
+  const motionVal = (0, import_framer_motion12.useMotionValue)(0);
+  const rounded = (0, import_framer_motion12.useTransform)(motionVal, (v) => Math.round(v));
+  const [display, setDisplay] = React6.useState(shouldAnimate ? 0 : value);
+  React6.useEffect(() => {
+    if (!shouldAnimate) {
+      setDisplay(value);
+      return;
+    }
+    if (!inView) return;
+    const controls = (0, import_framer_motion12.animate)(motionVal, value, { duration: 1.8, ease: "easeOut" });
+    const unsub = rounded.on("change", (v) => setDisplay(v));
+    return () => {
+      controls.stop();
+      unsub();
+    };
+  }, [inView, value, shouldAnimate]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { ref, children: display.toLocaleString() });
+}
+function StatsSection({
+  label,
+  heading,
+  subheading,
+  stats,
+  animate: shouldAnimate = true,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "section",
+    {
+      className: cn("w-full py-16 lg:py-24 relative overflow-hidden", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute inset-0 pointer-events-none",
+            style: { background: "var(--gradient-teal-glow, none)" }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "relative container px-4 md:px-6 max-w-5xl mx-auto", children: [
+          (label || heading || subheading) && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "text-center mb-14 space-y-4", children: [
+            label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SectionLabel, { children: label }) }),
+            heading && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h2", { className: "text-3xl md:text-4xl font-bold tracking-tight text-foreground", children: heading }),
+            subheading && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-muted-foreground max-w-xl mx-auto", children: subheading })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "div",
+            {
+              className: cn(
+                "grid gap-8 sm:gap-12",
+                stats.length === 2 && "sm:grid-cols-2",
+                stats.length === 3 && "sm:grid-cols-3",
+                stats.length >= 4 && "sm:grid-cols-2 lg:grid-cols-4"
+              ),
+              children: stats.map((stat, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+                import_framer_motion12.motion.div,
+                {
+                  initial: { opacity: 0, y: 24 },
+                  whileInView: { opacity: 1, y: 0 },
+                  viewport: { once: true },
+                  transition: { duration: 0.5, delay: i * 0.1 },
+                  className: "flex flex-col items-center text-center gap-2",
+                  children: [
+                    i > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      "div",
+                      {
+                        "aria-hidden": true,
+                        className: "hidden sm:block absolute h-16 w-px bg-border/60 left-0 top-1/2 -translate-y-1/2"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { className: "text-5xl md:text-6xl font-black tracking-tight text-foreground tabular-nums", children: [
+                      stat.prefix && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-primary", children: stat.prefix }),
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CountUp, { value: stat.value, animate: shouldAnimate }),
+                      stat.suffix && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-primary", children: stat.suffix })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-sm font-semibold text-foreground", children: stat.label }),
+                    stat.description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-xs text-muted-foreground max-w-[140px]", children: stat.description })
+                  ]
+                },
+                i
+              ))
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/logo-cloud/index.tsx
+var import_framer_motion13 = require("framer-motion");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function LogoCloud({
+  eyebrow,
+  items,
+  variant = "marquee",
+  speed = 32,
+  className
+}) {
+  const doubled = [...items, ...items];
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("section", { className: cn("w-full py-10 lg:py-16", className), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "container px-4 md:px-6 max-w-6xl mx-auto", children: [
+    eyebrow && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-center text-xs font-medium uppercase tracking-widest text-muted-foreground mb-8", children: eyebrow }),
+    variant === "static" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex flex-wrap items-center justify-center gap-8 md:gap-12", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      import_framer_motion13.motion.div,
+      {
+        initial: { opacity: 0 },
+        whileInView: { opacity: 1 },
+        viewport: { once: true },
+        transition: { duration: 0.4, delay: i * 0.06 },
+        title: item.name,
+        className: "opacity-50 hover:opacity-80 transition-opacity grayscale hover:grayscale-0",
+        children: item.logo
+      },
+      i
+    )) }) : (
+      /* Marquee */
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative overflow-hidden", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-y-0 left-0 w-20 z-10",
+            style: { background: "linear-gradient(to right, var(--background), transparent)" }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-y-0 right-0 w-20 z-10",
+            style: { background: "linear-gradient(to left, var(--background), transparent)" }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          import_framer_motion13.motion.div,
+          {
+            className: "flex gap-12 items-center",
+            animate: { x: ["0%", "-50%"] },
+            transition: { duration: speed, ease: "linear", repeat: Infinity },
+            children: doubled.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "div",
+              {
+                title: item.name,
+                className: "shrink-0 opacity-40 hover:opacity-75 transition-opacity grayscale hover:grayscale-0",
+                children: item.logo
+              },
+              i
+            ))
+          }
+        )
+      ] })
+    )
+  ] }) });
+}
+
+// src/hero-section/index.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function HeroSection({
+  headline,
+  subheadline,
+  primaryCta,
+  secondaryCta,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "section",
+    {
+      className: cn(
+        "w-full py-12 md:py-24 lg:py-32 xl:py-48 bg-muted/50 border-b",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "container px-4 md:px-6", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col items-center space-y-4 text-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h1", { className: "text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none", children: headline }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "mx-auto max-w-[700px] text-muted-foreground md:text-xl", children: subheadline })
+        ] }),
+        (primaryCta || secondaryCta) && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex gap-4", children: [
+          primaryCta,
+          secondaryCta
+        ] }),
+        children
+      ] }) })
+    }
+  );
+}
+
+// src/feature-grid/index.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function FeatureGrid({
+  sectionTitle,
+  features,
+  columns = 3,
+  className
+}) {
+  const gridCols = {
+    2: "md:grid-cols-2",
+    3: "md:grid-cols-3",
+    4: "md:grid-cols-2 lg:grid-cols-4"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("section", { className: cn("w-full py-12 lg:py-24", className), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "container px-4 md:px-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { className: "text-3xl font-bold tracking-tighter text-center mb-8", children: sectionTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("grid grid-cols-1 gap-6", gridCols[columns]), children: features.map((feature, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      "div",
+      {
+        className: "flex flex-col items-center p-6 border rounded-lg bg-card text-card-foreground shadow-sm",
+        children: [
+          feature.icon ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "mb-4", children: feature.icon }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-12 w-12 rounded-full bg-muted mb-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "text-xl font-bold mb-2", children: feature.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm text-muted-foreground text-center", children: feature.description })
+        ]
+      },
+      i
+    )) })
+  ] }) });
+}
+
+// src/pricing-table/index.tsx
+var React7 = __toESM(require("react"));
+var import_framer_motion14 = require("framer-motion");
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function formatPrice(p, billing, annualPrice) {
+  if (typeof p === "string") return p;
+  if (billing === "annual" && annualPrice !== void 0) {
+    return typeof annualPrice === "number" ? String(annualPrice) : annualPrice;
+  }
+  return String(p);
+}
+function PricingTable({
+  sectionTitle,
+  label,
+  heading,
+  subheading,
+  plans,
+  priceSuffix = "/mo",
+  showToggle = true,
+  annualSavingsLabel = "Save 20%",
+  className
+}) {
+  const [billing, setBilling] = React7.useState("monthly");
+  const hasAnnual = plans.some((p) => p.annualPrice !== void 0);
+  const title = heading ?? sectionTitle ?? "";
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("section", { className: cn("w-full py-16 lg:py-28", className), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "container px-4 md:px-6 max-w-6xl mx-auto", children: [
+    (label || title || subheading) && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "text-center mb-10 space-y-4", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SectionLabel, { children: label }) }),
+      title && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h2", { className: "text-3xl md:text-4xl font-bold tracking-tight text-foreground", children: title }),
+      subheading && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-muted-foreground max-w-xl mx-auto", children: subheading })
+    ] }),
+    showToggle && hasAnnual && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-center gap-3 mb-10", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "span",
+        {
+          className: cn(
+            "text-sm font-medium transition-colors",
+            billing === "monthly" ? "text-foreground" : "text-muted-foreground"
+          ),
+          children: "Monthly"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "button",
+        {
+          role: "switch",
+          "aria-checked": billing === "annual",
+          onClick: () => setBilling((b) => b === "monthly" ? "annual" : "monthly"),
+          className: cn(
+            "relative inline-flex h-6 w-11 cursor-pointer rounded-full border-2 border-transparent transition-colors",
+            billing === "annual" ? "bg-primary" : "bg-muted-foreground/30"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "span",
+            {
+              className: cn(
+                "pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow-sm transition-transform",
+                billing === "annual" ? "translate-x-5" : "translate-x-0"
+              )
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        "span",
+        {
+          className: cn(
+            "text-sm font-medium transition-colors",
+            billing === "annual" ? "text-foreground" : "text-muted-foreground"
+          ),
+          children: [
+            "Annual",
+            annualSavingsLabel && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ml-1.5 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold bg-primary/15 text-primary", children: annualSavingsLabel })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      "div",
+      {
+        className: cn(
+          "grid gap-6",
+          plans.length === 2 && "md:grid-cols-2 max-w-3xl mx-auto",
+          plans.length === 3 && "md:grid-cols-2 lg:grid-cols-3",
+          plans.length >= 4 && "md:grid-cols-2 lg:grid-cols-4"
+        ),
+        children: plans.map((plan, i) => {
+          const isFeatured = plan.isPrimary ?? plan.featured ?? false;
+          const displayPrice = formatPrice(plan.price, billing, plan.annualPrice);
+          const suffix = plan.priceSuffix ?? priceSuffix;
+          return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+            import_framer_motion14.motion.div,
+            {
+              initial: { opacity: 0, y: 24 },
+              whileInView: { opacity: 1, y: 0 },
+              viewport: { once: true },
+              transition: { duration: 0.5, delay: i * 0.08 },
+              className: cn(
+                "relative flex flex-col rounded-2xl border overflow-hidden transition-shadow",
+                isFeatured ? "border-primary/60 bg-card" : "border-border bg-card"
+              ),
+              style: isFeatured ? { boxShadow: "var(--shadow-glow, 0 4px 24px oklch(0.58 0.15 175 / 22%))" } : { boxShadow: "var(--shadow-card)" },
+              children: [
+                isFeatured && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  "div",
+                  {
+                    "aria-hidden": true,
+                    className: "absolute inset-x-0 top-0 h-px",
+                    style: { background: "var(--gradient-primary, var(--primary))" }
+                  }
+                ),
+                plan.badge && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "absolute top-4 right-4", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold bg-primary text-primary-foreground", children: plan.badge }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "p-6 pb-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm font-medium text-muted-foreground mb-1", children: plan.name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-xs text-muted-foreground/70 mb-5", children: plan.target }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-end gap-1 mb-6", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-4xl font-bold text-foreground tracking-tight", children: typeof displayPrice === "number" ? `$${displayPrice}` : displayPrice }),
+                    typeof plan.price === "number" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-sm text-muted-foreground mb-1.5", children: suffix })
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1 px-6 pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ul", { className: "space-y-3", children: plan.features.map((feature, j) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("li", { className: "flex items-start gap-2.5 text-sm text-muted-foreground", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    import_lucide_react3.Check,
+                    {
+                      size: 15,
+                      className: "shrink-0 mt-0.5 text-primary",
+                      strokeWidth: 2.5
+                    }
+                  ),
+                  feature
+                ] }, j)) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "px-6 pb-6", children: plan.cta ?? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  "a",
+                  {
+                    href: plan.ctaHref ?? "#",
+                    className: cn(
+                      "flex w-full items-center justify-center rounded-full px-4 py-2.5 text-sm font-semibold transition-all active:scale-[0.97]",
+                      isFeatured ? "bg-primary text-primary-foreground hover:opacity-90" : "border border-border bg-background text-foreground hover:bg-accent"
+                    ),
+                    children: plan.ctaText
+                  }
+                ) })
+              ]
+            },
+            i
+          );
+        })
+      }
+    )
+  ] }) });
+}
+
+// src/testimonial-carousel/index.tsx
+var import_react = require("react");
+var import_framer_motion15 = require("framer-motion");
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var SPRING_EASE2 = [0.22, 1, 0.36, 1];
+function isPlaceholderCompany(company) {
+  return /^TBD\b/i.test(company.trim());
+}
+function TestimonialsCarousel({
+  data,
+  filterByVertical,
+  className
+}) {
+  const reviews = (0, import_react.useMemo)(() => {
+    const visible = data.reviews.filter((r) => !r.hidden);
+    if (!filterByVertical) return visible;
+    const filtered = visible.filter((r) => r.vertical === filterByVertical);
+    return filtered.length > 0 ? filtered : visible;
+  }, [data.reviews, filterByVertical]);
+  const verticalLabels = data.vertical_labels ?? {};
+  const [{ index, direction }, setCarouselState] = (0, import_react.useState)({ index: 0, direction: 1 });
+  const [isPaused, setIsPaused] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (isPaused || reviews.length === 0) return;
+    const id = window.setInterval(() => {
+      setCarouselState((s) => ({ index: (s.index + 1) % reviews.length, direction: 1 }));
+    }, 5e3);
+    return () => window.clearInterval(id);
+  }, [isPaused, reviews.length]);
+  const paginate = (dir) => {
+    if (reviews.length === 0) return;
+    setCarouselState((s) => ({
+      index: (s.index + dir + reviews.length) % reviews.length,
+      direction: dir
+    }));
+  };
+  if (reviews.length === 0) return null;
+  const safeIndex = Math.min(index, reviews.length - 1);
+  const active = reviews[safeIndex];
+  const hasMedia = Boolean(active.video);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn("mt-14", className), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    "div",
+    {
+      className: "relative overflow-hidden rounded-[36px] border border-border bg-[linear-gradient(180deg,color-mix(in_srgb,var(--foreground)_6%,transparent),color-mix(in_srgb,var(--foreground)_2%,transparent))] p-4 shadow-panel md:p-6",
+      onMouseEnter: () => setIsPaused(true),
+      onMouseLeave: () => setIsPaused(false),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pointer-events-none absolute inset-0 opacity-[0.05]" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pointer-events-none absolute left-[8%] top-0 h-24 w-1/3 rounded-full bg-primary/12 blur-3xl" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pointer-events-none absolute bottom-0 right-[8%] h-28 w-1/3 rounded-full bg-secondary/10 blur-3xl" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pointer-events-none absolute inset-x-10 bottom-0 h-px bg-gradient-to-r from-transparent via-foreground/15 to-transparent" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "relative z-10 overflow-hidden rounded-[30px]", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_framer_motion15.AnimatePresence, { initial: false, mode: "wait", custom: direction, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          import_framer_motion15.motion.div,
+          {
+            custom: direction,
+            initial: { opacity: 0, x: direction > 0 ? 72 : -72, scale: 0.98 },
+            animate: { opacity: 1, x: 0, scale: 1 },
+            exit: { opacity: 0, x: direction > 0 ? -72 : 72, scale: 0.98 },
+            transition: { duration: 0.45, ease: SPRING_EASE2 },
+            className: cn(
+              "glass-panel rounded-[30px] p-6 md:p-8",
+              hasMedia ? "grid gap-8 lg:grid-cols-[0.95fr_1.05fr] lg:items-center lg:gap-10" : "relative overflow-hidden md:p-12"
+            ),
+            style: { willChange: "transform, opacity" },
+            children: [
+              hasMedia && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative overflow-hidden rounded-[28px] border border-border bg-[radial-gradient(circle_at_top,color-mix(in_srgb,var(--foreground)_10%,transparent),transparent_40%),linear-gradient(180deg,color-mix(in_srgb,var(--foreground)_5%,transparent),rgba(8,11,20,0.6))]", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "aspect-[9/16] w-full" }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  "video",
+                  {
+                    src: active.thumbnail ? active.video : `${active.video}#t=0.1`,
+                    poster: active.thumbnail,
+                    preload: "metadata",
+                    playsInline: true,
+                    controls: true,
+                    className: "absolute inset-0 h-full w-full object-cover"
+                  }
+                )
+              ] }),
+              hasMedia ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center gap-1.5 text-[color:var(--rating-star,#F5C451)]", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react4.Star, { className: "h-4 w-4 fill-current" }, i)) }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react4.Quote, { className: "mt-6 h-8 w-8 text-primary" }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "mt-6 text-xl leading-9 text-foreground md:text-[1.75rem] md:leading-[1.65] lg:max-w-[18ch]", children: active.quote }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "mt-8 border-t border-border pt-6", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-sm font-semibold uppercase tracking-[0.12em] text-foreground", children: active.author }),
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                    "p",
+                    {
+                      className: cn(
+                        "mt-2 text-sm",
+                        isPlaceholderCompany(active.company) ? "text-amber-300/80" : "text-muted-foreground"
+                      ),
+                      children: isPlaceholderCompany(active.company) ? "Company TBD" : active.company
+                    }
+                  ),
+                  active.vertical && verticalLabels[active.vertical] && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "mt-2 inline-block rounded-full border border-border bg-foreground/[0.05] px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-primary/90", children: verticalLabels[active.vertical] })
+                ] })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative mx-auto max-w-3xl text-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pointer-events-none absolute left-1/2 top-0 h-40 w-40 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/12 blur-3xl" }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative flex flex-col items-center gap-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react4.Quote, { className: "h-10 w-10 text-primary" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center gap-1.5 text-[color:var(--rating-star,#F5C451)]", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react4.Star, { className: "h-4 w-4 fill-current" }, i)) })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { className: "relative mt-6 font-display text-2xl font-black leading-[1.35] tracking-[-0.02em] text-foreground md:text-3xl md:leading-[1.4]", children: [
+                  "\u201C",
+                  active.quote,
+                  "\u201D"
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "relative mx-auto mt-8 h-px w-24 bg-gradient-to-r from-transparent via-primary/50 to-transparent" }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative mt-6", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-sm font-semibold uppercase tracking-[0.16em] text-foreground", children: active.author }),
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                    "p",
+                    {
+                      className: cn(
+                        "mt-2 text-sm",
+                        isPlaceholderCompany(active.company) ? "text-amber-300/80" : "text-muted-foreground"
+                      ),
+                      children: isPlaceholderCompany(active.company) ? "Company TBD" : active.company
+                    }
+                  ),
+                  active.vertical && verticalLabels[active.vertical] && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "mt-3 inline-block rounded-full border border-border bg-foreground/[0.05] px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-primary/90", children: verticalLabels[active.vertical] })
+                ] })
+              ] })
+            ]
+          },
+          `${active.author}-${active.company}`
+        ) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative z-10 mt-5 flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => paginate(-1),
+                className: "inline-flex h-11 w-11 items-center justify-center rounded-full border border-border bg-foreground/[0.05] text-foreground transition-colors hover:border-border hover:bg-foreground/[0.08]",
+                "aria-label": "Previous testimonial",
+                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react4.ChevronLeft, { className: "h-5 w-5" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => paginate(1),
+                className: "inline-flex h-11 w-11 items-center justify-center rounded-full border border-border bg-foreground/[0.05] text-foreground transition-colors hover:border-border hover:bg-foreground/[0.08]",
+                "aria-label": "Next testimonial",
+                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react4.ChevronRight, { className: "h-5 w-5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+            "div",
+            {
+              className: "font-label text-sm tabular-nums text-muted-foreground",
+              "aria-live": "polite",
+              "aria-label": `Testimonial ${safeIndex + 1} of ${reviews.length}`,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-foreground", children: safeIndex + 1 }),
+                " / ",
+                reviews.length
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+function TestimonialsSection({ data, filterByVertical }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("section", { id: "testimonials", className: "section-shell", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SectionGlow, { variant: "primary" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-foreground/[0.05] to-transparent" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "container", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FadeUp, { className: "max-w-3xl", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SectionIntro, { label: data.label, title: data.title, body: data.description }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TestimonialsCarousel, { data, filterByVertical })
+    ] })
+  ] });
+}
+var TestimonialCarousel = TestimonialsCarousel;
+
+// src/use-cases/index.tsx
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var DEFAULT_ICONS = {
+  Settings: import_lucide_react5.Settings,
+  ShoppingBag: import_lucide_react5.ShoppingBag,
+  PhoneCall: import_lucide_react5.PhoneCall,
+  Lightbulb: import_lucide_react5.Lightbulb,
+  Store: import_lucide_react5.Store
+};
+function UseCasesSection({ data, iconMap }) {
+  const icons = { ...DEFAULT_ICONS, ...iconMap };
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("section", { id: "use-cases", className: "section-shell overflow-x-clip pb-12 md:pb-24", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SectionGlow, { variant: "primary" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "pointer-events-none absolute inset-0 opacity-[0.03]" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "pointer-events-none absolute left-[-10%] top-1/4 h-96 w-96 rounded-full bg-secondary/[0.18] blur-[100px]" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "pointer-events-none absolute right-[-10%] top-2/3 h-96 w-96 rounded-full bg-accent/10 blur-[100px]" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "container relative z-10", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FadeUp, { className: "mx-auto max-w-3xl text-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SectionIntro, { label: data.label, title: data.title, centered: true }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FadeUp, { className: "mt-11 md:mt-14", delay: 0.2, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "relative mx-auto grid max-w-6xl grid-cols-2 gap-px lg:grid-cols-6", children: data.cards.map((card, idx) => {
+        const Icon = icons[card.icon] ?? import_lucide_react5.Settings;
+        const colClass = data.cards.length === 5 ? idx < 2 ? "lg:col-span-2" : idx === 2 ? "col-span-2 lg:col-span-2" : "col-span-2 lg:col-span-3" : "";
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+          "div",
+          {
+            className: cn(
+              "group relative flex flex-col border border-border bg-foreground/[0.04] p-4 transition-colors duration-500 hover:border-border hover:bg-foreground/[0.05] md:p-7",
+              colClass
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "pointer-events-none absolute -right-4 -top-4 h-24 w-24 rounded-full bg-foreground/[0.05] blur-2xl transition-all duration-500 group-hover:bg-foreground/10" }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl border border-border bg-foreground/[0.05] text-primary shadow-sm transition-transform duration-500 group-hover:scale-110 group-hover:border-border group-hover:bg-foreground/[0.07] md:h-12 md:w-12", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { className: "h-4 w-4 md:h-5 md:w-5" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "mt-4 flex flex-1 flex-col md:mt-6", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: "font-display text-lg font-bold leading-tight tracking-tight text-foreground md:text-2xl", children: card.title }),
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "mt-2 text-xs font-medium text-muted-foreground md:text-sm", children: card.subtitle }),
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "mt-auto pt-4 md:pt-6", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-[10px] leading-relaxed text-muted-foreground md:text-xs", children: card.tracking }) })
+              ] })
+            ]
+          },
+          card.title
+        );
+      }) }) })
+    ] })
+  ] });
+}
+
+// src/value-stack/index.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function StackRows({ rows }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", { className: "divide-y divide-border", children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "li",
+    {
+      className: "grid grid-cols-[1fr_auto] items-baseline gap-4 py-2 md:gap-6 md:py-3",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-sm text-foreground/90 md:text-base", children: row.deliverable }),
+          row.note && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mt-0.5 text-[11px] leading-snug text-muted-foreground", children: row.note })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "shrink-0 font-display text-sm font-black tracking-[-0.02em] text-foreground md:text-base", children: row.value })
+      ]
+    },
+    row.deliverable
+  )) });
+}
+function ValueStackSection({ data }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("section", { id: "value-stack", className: "section-shell relative overflow-x-clip", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SectionGlow, { variant: "primary" }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "pointer-events-none absolute -left-20 top-1/3 h-72 w-72 rounded-full bg-accent/10 blur-3xl" }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "pointer-events-none absolute -right-20 bottom-0 h-80 w-80 rounded-full bg-secondary/[0.08] blur-3xl" }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "container", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FadeUp, { className: "max-w-3xl", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SectionIntro, { label: data.label, title: data.title, body: data.body }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FadeUp, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mt-12 overflow-hidden rounded-[28px] border border-border bg-[linear-gradient(180deg,color-mix(in_srgb,var(--foreground)_5%,transparent),color-mix(in_srgb,var(--foreground)_2%,transparent))] shadow-panel", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "grid divide-border lg:grid-cols-2 lg:divide-x", children: ["setup_block", "ongoing_block"].map((blockKey, i) => {
+        const block = data[blockKey];
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          "div",
+          {
+            className: cn(
+              "relative p-6 md:p-8",
+              i === 1 && "border-t border-border lg:border-t-0"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { className: "text-xs uppercase tracking-[0.18em] text-primary", children: block.title }),
+              block.subtitle && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: block.subtitle }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mt-5", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StackRows, { rows: block.rows }) })
+            ]
+          },
+          blockKey
+        );
+      }) }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FadeUp, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "mt-8 mx-auto max-w-3xl rounded-[28px] border border-accent/30 bg-[radial-gradient(circle_at_top,rgba(115,136,207,0.14),transparent_55%),linear-gradient(180deg,color-mix(in_srgb,var(--foreground)_5%,transparent),color-mix(in_srgb,var(--foreground)_2%,transparent))] p-6 shadow-panel md:p-8", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mb-2 text-[10px] uppercase tracking-[0.22em] text-muted-foreground", children: "If you hire it out" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "grid gap-3 md:grid-cols-[1fr_auto] md:items-center md:gap-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "text-sm text-muted-foreground md:text-base", children: data.totals.monthly_label }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "font-display text-xl font-black tracking-[-0.02em] text-foreground/80 md:text-2xl", children: data.totals.monthly_value })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "mt-2 grid gap-3 md:grid-cols-[1fr_auto] md:items-center md:gap-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "text-sm text-muted-foreground md:text-base", children: data.totals.setup_label }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "font-display text-xl font-black tracking-[-0.02em] text-foreground/80 md:text-2xl", children: data.totals.setup_value })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "my-6 h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "grid gap-4 md:grid-cols-[1fr_auto] md:items-center md:gap-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "text-[11px] uppercase tracking-[0.22em] text-accent", children: data.investment.label }),
+            data.investment.note && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mt-2 text-xs leading-relaxed text-muted-foreground", children: data.investment.note })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "font-display text-xl font-black leading-tight tracking-[-0.03em] text-foreground md:text-2xl", children: data.investment.value })
+        ] })
+      ] }) })
+    ] })
+  ] });
+}
+
+// src/tech-carousel/index.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function TechCarousel({
+  items,
+  className,
+  speed = "normal",
+  reverse = false,
+  hoverColor = "text-teal"
+}) {
+  const doubled = [...items, ...items];
+  const animClass = reverse ? speed === "slow" ? "animate-marquee-reverse" : "animate-marquee-reverse" : speed === "slow" ? "animate-marquee-slow" : "animate-marquee";
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden mask-fade-horizontal",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cn("flex w-max gap-10 py-4 translate-gpu", animClass), children: doubled.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        "div",
+        {
+          className: cn(
+            "flex shrink-0 items-center gap-2 text-muted transition-colors duration-300",
+            `hover:${hoverColor}`
+          ),
+          children: [
+            item.icon,
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-sm font-medium whitespace-nowrap", children: item.name })
+          ]
+        },
+        i
+      )) })
+    }
+  );
+}
+
+// src/footer/index.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function Footer({
+  copyrightText,
+  links,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("footer", { className: cn("w-full py-6 bg-background border-t", className), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "container px-4 md:px-6 flex flex-col md:flex-row items-center justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-sm text-muted-foreground", children: copyrightText }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("nav", { className: "flex gap-4 sm:gap-6 mt-4 md:mt-0", children: links.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "a",
+      {
+        href: link.href,
+        className: "text-sm hover:underline cursor-pointer",
+        children: link.label
+      },
+      i
+    )) }),
+    children
+  ] }) });
+}
+
+// src/social-proof/index.tsx
+var import_framer_motion16 = require("framer-motion");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function SocialProof({ items, logos, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("section", { className: cn("w-full py-8 border-y bg-muted/20", className), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "container px-4 md:px-6", children: [
+    logos && logos.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex flex-wrap items-center justify-center gap-8 mb-8 opacity-60", children: logos.map((logo, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { children: logo }, i)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-6 text-center", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      import_framer_motion16.motion.div,
+      {
+        initial: { opacity: 0, y: 20 },
+        whileInView: { opacity: 1, y: 0 },
+        viewport: { once: true },
+        transition: { delay: i * 0.1 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "text-3xl font-bold", children: item.value }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "text-sm text-muted-foreground", children: item.label })
+        ]
+      },
+      i
+    )) })
+  ] }) });
+}
+
+// src/faq/index.tsx
+var React8 = __toESM(require("react"));
+var import_framer_motion17 = require("framer-motion");
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function Faq({
+  sectionTitle,
+  label,
+  heading,
+  subheading,
+  items,
+  mode = "single",
+  className
+}) {
+  const [openSet, setOpenSet] = React8.useState(/* @__PURE__ */ new Set());
+  const title = heading ?? sectionTitle ?? "";
+  const toggle = (i) => {
+    setOpenSet((prev) => {
+      const next = new Set(mode === "multi" ? prev : /* @__PURE__ */ new Set());
+      if (prev.has(i)) next.delete(i);
+      else next.add(i);
+      return next;
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("section", { className: cn("w-full py-16 lg:py-28", className), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "container px-4 md:px-6 max-w-3xl mx-auto", children: [
+    (label || title || subheading) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "text-center mb-12 space-y-4", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SectionLabel, { children: label }) }),
+      title && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h2", { className: "text-3xl md:text-4xl font-bold tracking-tight text-foreground", children: title }),
+      subheading && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-muted-foreground max-w-xl mx-auto", children: subheading })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "space-y-2", children: items.map((item, i) => {
+      const isOpen = openSet.has(i);
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+        import_framer_motion17.motion.div,
+        {
+          initial: false,
+          className: cn(
+            "rounded-xl border overflow-hidden transition-colors",
+            isOpen ? "border-primary/40 bg-card" : "border-border bg-card/50"
+          ),
+          style: isOpen ? { boxShadow: "var(--glow-primary-sm, none)" } : void 0,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+              "button",
+              {
+                className: "flex w-full items-center justify-between gap-4 px-5 py-4 text-left",
+                onClick: () => toggle(i),
+                "aria-expanded": isOpen,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    "span",
+                    {
+                      className: cn(
+                        "text-sm font-medium transition-colors",
+                        isOpen ? "text-foreground" : "text-foreground/80"
+                      ),
+                      children: item.question
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    "span",
+                    {
+                      className: cn(
+                        "shrink-0 rounded-full p-0.5 border transition-all",
+                        isOpen ? "border-primary/50 text-primary" : "border-border text-muted-foreground"
+                      ),
+                      children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react6.Minus, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react6.Plus, { size: 14 })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_framer_motion17.AnimatePresence, { initial: false, children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              import_framer_motion17.motion.div,
+              {
+                initial: { height: 0, opacity: 0 },
+                animate: { height: "auto", opacity: 1 },
+                exit: { height: 0, opacity: 0 },
+                transition: { duration: 0.25, ease: "easeInOut" },
+                className: "overflow-hidden",
+                children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "px-5 pb-5 text-sm text-muted-foreground leading-relaxed", children: item.answer })
+              },
+              "answer"
+            ) })
+          ]
+        },
+        i
+      );
+    }) })
+  ] }) });
+}
+
+// src/comparison-table/index.tsx
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function ComparisonTable({
+  columns,
+  rows,
+  highlightColumn,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("table", { className: "w-full text-sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("tr", { className: "border-b", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("th", { className: "p-4 text-left font-medium text-muted-foreground", children: "Feature" }),
+      columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "th",
+        {
+          className: cn(
+            "p-4 text-center font-bold",
+            highlightColumn === i && "bg-primary/5 text-primary"
+          ),
+          children: col
+        },
+        i
+      ))
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("tr", { className: "border-b last:border-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("td", { className: "p-4 font-medium", children: row.feature }),
+      row.values.map((val, j) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "td",
+        {
+          className: cn(
+            "p-4 text-center",
+            highlightColumn === j && "bg-primary/5"
+          ),
+          children: typeof val === "boolean" ? val ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react7.CheckIcon, { className: "mx-auto h-4 w-4 text-primary" }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react7.XIcon, { className: "mx-auto h-4 w-4 text-muted-foreground/40" }) : val
+        },
+        j
+      ))
+    ] }, i)) })
+  ] }) });
+}
+
+// src/hero-canvas/index.tsx
+var import_fiber = require("@react-three/fiber");
+var import_simplex_noise = require("simplex-noise");
+var import_three = require("three");
+var import_react2 = require("react");
+var import_framer_motion18 = require("framer-motion");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function buildNodes(count) {
+  const accentEvery = Math.max(1, Math.floor(count / 15));
+  const nodes = [];
+  for (let index = 0; index < count; index += 1) {
+    const angle = Math.random() * Math.PI * 2;
+    const radius = 1.5 + Math.random() * 5.75;
+    const spread = Math.random() * 1.2;
+    nodes.push({
+      accent: index % accentEvery === 0,
+      baseX: Math.cos(angle) * radius * 1.5,
+      baseY: (Math.random() - 0.5) * 16 + spread,
+      baseZ: (Math.random() - 0.5) * 6,
+      driftX: Math.random() * 100,
+      driftY: Math.random() * 100,
+      driftZ: Math.random() * 100
+    });
+  }
+  return nodes;
+}
+function ParticleNetwork({
+  count,
+  accentColor,
+  baseColor
+}) {
+  const groupRef = (0, import_react2.useRef)(null);
+  const pointsRef = (0, import_react2.useRef)(null);
+  const linesRef = (0, import_react2.useRef)(null);
+  const cursorRef = (0, import_react2.useRef)({ x: 0, y: 0 });
+  const nodes = (0, import_react2.useMemo)(() => buildNodes(count), [count]);
+  const noise3D = (0, import_react2.useMemo)(() => (0, import_simplex_noise.createNoise3D)(), []);
+  const pointPositions = (0, import_react2.useMemo)(() => new Float32Array(count * 3), [count]);
+  const pointColors = (0, import_react2.useMemo)(() => new Float32Array(count * 3), [count]);
+  const cursorOffsetsX = (0, import_react2.useMemo)(() => new Float32Array(count), [count]);
+  const cursorOffsetsY = (0, import_react2.useMemo)(() => new Float32Array(count), [count]);
+  const accent = (0, import_react2.useMemo)(() => new import_three.Color(accentColor), [accentColor]);
+  const base = (0, import_react2.useMemo)(() => new import_three.Color(baseColor), [baseColor]);
+  (0, import_react2.useEffect)(() => {
+    const handleMouseMove = (event) => {
+      cursorRef.current.x = event.clientX / window.innerWidth * 2 - 1;
+      cursorRef.current.y = -(event.clientY / window.innerHeight * 2 - 1);
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    nodes.forEach((node, index) => {
+      const pointIndex = index * 3;
+      pointPositions[pointIndex] = node.baseX;
+      pointPositions[pointIndex + 1] = node.baseY;
+      pointPositions[pointIndex + 2] = node.baseZ;
+      const color = node.accent ? accent : base;
+      pointColors[pointIndex] = color.r;
+      pointColors[pointIndex + 1] = color.g;
+      pointColors[pointIndex + 2] = color.b;
+    });
+    const geometry = pointsRef.current?.geometry;
+    if (!geometry) return;
+    geometry.setAttribute("position", new import_three.BufferAttribute(pointPositions, 3));
+    geometry.setAttribute("color", new import_three.BufferAttribute(pointColors, 3));
+  }, [nodes, pointColors, pointPositions, accent, base]);
+  (0, import_fiber.useFrame)(({ clock, pointer }) => {
+    const time = clock.elapsedTime * 0.16;
+    const cursorWorldX = cursorRef.current.x * 9;
+    const cursorWorldY = cursorRef.current.y * 5.5;
+    const attractRadius = 3.2;
+    const attractStrength = 1.4;
+    const lerpFactor = 0.06;
+    for (let index = 0; index < nodes.length; index += 1) {
+      const node = nodes[index];
+      const positionIndex = index * 3;
+      pointPositions[positionIndex] = node.baseX + noise3D(node.driftX, time, node.driftZ) * 0.85;
+      pointPositions[positionIndex + 1] = node.baseY + noise3D(node.driftY, node.driftX, time) * 0.7;
+      pointPositions[positionIndex + 2] = node.baseZ + noise3D(time, node.driftZ, node.driftY) * 0.55;
+    }
+    for (let index = 0; index < nodes.length; index += 1) {
+      const positionIndex = index * 3;
+      const dx = cursorWorldX - pointPositions[positionIndex];
+      const dy = cursorWorldY - pointPositions[positionIndex + 1];
+      const distance = Math.hypot(dx, dy);
+      let targetOffsetX = 0;
+      let targetOffsetY = 0;
+      if (distance < attractRadius) {
+        const influence = 1 - distance / attractRadius;
+        targetOffsetX = dx * influence * attractStrength;
+        targetOffsetY = dy * influence * attractStrength;
+      }
+      cursorOffsetsX[index] += (targetOffsetX - cursorOffsetsX[index]) * lerpFactor;
+      cursorOffsetsY[index] += (targetOffsetY - cursorOffsetsY[index]) * lerpFactor;
+      pointPositions[positionIndex] += cursorOffsetsX[index];
+      pointPositions[positionIndex + 1] += cursorOffsetsY[index];
+    }
+    const pointGeometry = pointsRef.current?.geometry;
+    const lineGeometry = linesRef.current?.geometry;
+    if (pointGeometry?.attributes.position) {
+      pointGeometry.attributes.position.needsUpdate = true;
+    }
+    if (lineGeometry) {
+      const segments = [];
+      const maxSegments = count < 400 ? 540 : 1200;
+      const threshold = count < 400 ? 2.3 : 2.5;
+      const thresholdSq = threshold * threshold;
+      for (let index = 0; index < nodes.length; index += 1) {
+        for (let nextIndex = index + 1; nextIndex < nodes.length; nextIndex += 1) {
+          const offsetA = index * 3;
+          const offsetB = nextIndex * 3;
+          const dx = pointPositions[offsetA] - pointPositions[offsetB];
+          const dy = pointPositions[offsetA + 1] - pointPositions[offsetB + 1];
+          const dz = pointPositions[offsetA + 2] - pointPositions[offsetB + 2];
+          if (dx * dx + dy * dy + dz * dz > thresholdSq) continue;
+          segments.push(
+            pointPositions[offsetA],
+            pointPositions[offsetA + 1],
+            pointPositions[offsetA + 2],
+            pointPositions[offsetB],
+            pointPositions[offsetB + 1],
+            pointPositions[offsetB + 2]
+          );
+          if (segments.length / 6 >= maxSegments) break;
+        }
+        if (segments.length / 6 >= maxSegments) break;
+      }
+      lineGeometry.setAttribute("position", new import_three.BufferAttribute(new Float32Array(segments), 3));
+    }
+    if (groupRef.current) {
+      const baseOffsetX = count < 300 ? 2.1 : 2.75;
+      const baseOffsetY = count < 300 ? 0.1 : -0.15;
+      groupRef.current.position.x += (baseOffsetX + pointer.x * 0.45 - groupRef.current.position.x) * 0.045;
+      groupRef.current.position.y += (baseOffsetY + pointer.y * 0.32 - groupRef.current.position.y) * 0.045;
+      groupRef.current.rotation.y += (pointer.x * 0.06 - groupRef.current.rotation.y) * 0.035;
+      groupRef.current.rotation.x += (-pointer.y * 0.04 - groupRef.current.rotation.x) * 0.035;
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("group", { ref: groupRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("points", { ref: pointsRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("bufferGeometry", {}),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        "pointsMaterial",
+        {
+          size: count < 400 ? 0.048 : 0.045,
+          sizeAttenuation: true,
+          transparent: true,
+          opacity: 0.92,
+          depthWrite: false,
+          vertexColors: true,
+          blending: import_three.AdditiveBlending
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("lineSegments", { ref: linesRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("bufferGeometry", {}),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        "lineBasicMaterial",
+        {
+          color: baseColor,
+          transparent: true,
+          opacity: count < 400 ? 0.25 : 0.2,
+          depthWrite: false,
+          blending: import_three.AdditiveBlending
+        }
+      )
+    ] })
+  ] });
+}
+function HeroCanvas({
+  accentColor = "#8fccb6",
+  baseColor = "#7388cf",
+  density,
+  className = "pointer-events-none absolute inset-0 z-[2] translate-gpu opacity-60 md:opacity-100"
+}) {
+  const [count, setCount] = (0, import_react2.useState)(density ?? 400);
+  const containerRef = (0, import_react2.useRef)(null);
+  const isInView = (0, import_framer_motion18.useInView)(containerRef);
+  (0, import_react2.useEffect)(() => {
+    if (density != null) {
+      setCount(density);
+      return;
+    }
+    const media = window.matchMedia("(max-width: 767px)");
+    const updateCount = () => setCount(media.matches ? 350 : 800);
+    updateCount();
+    media.addEventListener("change", updateCount);
+    return () => media.removeEventListener("change", updateCount);
+  }, [density]);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref: containerRef, className, style: { willChange: "transform" }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    import_fiber.Canvas,
+    {
+      frameloop: isInView ? "always" : "demand",
+      camera: { fov: 50, position: [0, 0, 12] },
+      dpr: [1, 1.5],
+      gl: { alpha: true, antialias: false, powerPreference: "high-performance" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ParticleNetwork, { count, accentColor, baseColor })
+    }
+  ) });
+}
+
+// src/wave-canvas/index.tsx
+var import_fiber2 = require("@react-three/fiber");
+var import_simplex_noise2 = require("simplex-noise");
+var import_three2 = require("three");
+var import_react3 = require("react");
+var import_framer_motion19 = require("framer-motion");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var DEFAULT_WAVES = [
+  { yOffset: 0.55, amplitude: 0.26, freq: 1.4, speed: 0.38, color: "#8fccb6", opacity: 0.9 },
+  { yOffset: 0.18, amplitude: 0.2, freq: 2.1, speed: 0.55, color: "#5aaa94", opacity: 0.72 },
+  { yOffset: -0.18, amplitude: 0.28, freq: 1.7, speed: 0.44, color: "#4F72D8", opacity: 0.55 },
+  { yOffset: -0.55, amplitude: 0.16, freq: 2.6, speed: 0.62, color: "#1f2d56", opacity: 0.42 }
+];
+var SEGMENTS = 220;
+function SineWave({ yOffset, amplitude, freq, speed, color, opacity }) {
+  const noise2D = (0, import_react3.useMemo)(() => (0, import_simplex_noise2.createNoise2D)(), []);
+  const geo = (0, import_react3.useMemo)(() => {
+    const g = new import_three2.BufferGeometry();
+    g.setAttribute("position", new import_three2.BufferAttribute(new Float32Array((SEGMENTS + 1) * 3), 3));
+    return g;
+  }, []);
+  const mat = (0, import_react3.useMemo)(
+    () => new import_three2.LineBasicMaterial({
+      color: new import_three2.Color(color),
+      transparent: true,
+      opacity,
+      blending: import_three2.AdditiveBlending,
+      depthWrite: false
+    }),
+    [color, opacity]
+  );
+  const lineRef = (0, import_react3.useRef)(new import_three2.Line(geo, mat));
+  (0, import_fiber2.useFrame)(({ clock }) => {
+    const t = clock.getElapsedTime() * speed;
+    const pos = geo.attributes.position.array;
+    for (let i = 0; i <= SEGMENTS; i++) {
+      const x = i / SEGMENTS * 4 - 2;
+      const n = noise2D(x * freq * 0.4, t);
+      pos[i * 3] = x;
+      pos[i * 3 + 1] = yOffset + n * amplitude;
+      pos[i * 3 + 2] = 0;
+    }
+    geo.attributes.position.needsUpdate = true;
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("primitive", { object: lineRef.current });
+}
+function WaveCanvas({ waves = DEFAULT_WAVES, className }) {
+  const containerRef = (0, import_react3.useRef)(null);
+  const isInView = (0, import_framer_motion19.useInView)(containerRef);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: { width: "100%", height: "100%", position: "relative" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        import_fiber2.Canvas,
+        {
+          frameloop: isInView ? "always" : "demand",
+          orthographic: true,
+          camera: { zoom: 120, position: [0, 0, 10] },
+          style: { width: "100%", height: "100%" },
+          gl: { antialias: true, alpha: true },
+          children: waves.map((w, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SineWave, { ...w }, i))
+        }
+      )
+    }
+  );
+}
+
+// src/lightbox/index.tsx
+var React9 = __toESM(require("react"));
+var import_lightbox = require("@web-my-money/primitives/lightbox");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function Thumbnail({ image, onClick, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    "button",
+    {
+      type: "button",
+      "data-slot": "thumbnail",
+      onClick,
+      className: cn(
+        "group relative aspect-square overflow-hidden rounded-lg border border-border outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        "img",
+        {
+          src: image.thumbnailSrc ?? image.src,
+          alt: image.alt ?? "",
+          className: "size-full object-cover transition-transform duration-200 group-hover:scale-105",
+          loading: "lazy"
+        }
+      )
+    }
+  );
+}
+function LightboxGallery({ images, className, gridClassName }) {
+  const [openIndex, setOpenIndex] = React9.useState(null);
+  const hasImages = images.length > 0;
+  const active = openIndex !== null ? images[openIndex] : null;
+  const goTo = (dir) => {
+    setOpenIndex((i) => {
+      if (i === null) return i;
+      return (i + dir + images.length) % images.length;
+    });
+  };
+  if (!hasImages) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { "data-slot": "lightbox-gallery", className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cn("grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", gridClassName), children: images.map((image, i) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Thumbnail, { image, onClick: () => setOpenIndex(i) }, image.src)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lightbox.Lightbox, { open: openIndex !== null, onOpenChange: (open) => !open && setOpenIndex(null), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lightbox.LightboxContent, { children: active && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+      images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lightbox.LightboxNavButton, { direction: "prev", onClick: () => goTo(-1) }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lightbox.LightboxNavButton, { direction: "next", onClick: () => goTo(1) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lightbox.LightboxImage, { src: active.src, alt: active.alt ?? "" }),
+      active.caption && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lightbox.LightboxCaption, { children: active.caption }),
+      images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("p", { className: "text-xs text-white/60", "aria-live": "polite", children: [
+        (openIndex ?? 0) + 1,
+        " / ",
+        images.length
+      ] })
+    ] }) }) })
+  ] });
+}
+
+// src/notification-banner/index.tsx
+var React10 = __toESM(require("react"));
+var import_framer_motion20 = require("framer-motion");
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var variantConfig = {
+  info: { icon: import_lucide_react8.Info, classes: "bg-primary/10 border-primary/20", iconClass: "text-primary" },
+  success: { icon: import_lucide_react8.CheckCircle2, classes: "bg-emerald-500/10 border-emerald-500/20", iconClass: "text-emerald-500" },
+  warning: { icon: import_lucide_react8.AlertTriangle, classes: "bg-amber-500/10 border-amber-500/20", iconClass: "text-amber-500" },
+  danger: { icon: import_lucide_react8.AlertCircle, classes: "bg-destructive/10 border-destructive/20", iconClass: "text-destructive" },
+  brand: { icon: import_lucide_react8.Info, classes: "border-0", iconClass: "text-white" }
+};
+function NotificationBanner({
+  variant = "info",
+  message,
+  action,
+  dismissible = true,
+  onDismiss,
+  visible = true,
+  className
+}) {
+  const [open, setOpen] = React10.useState(true);
+  const show = visible && open;
+  const dismiss = () => {
+    setOpen(false);
+    onDismiss?.();
+  };
+  const cfg = variantConfig[variant];
+  const Icon = cfg.icon;
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_framer_motion20.AnimatePresence, { children: show && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    import_framer_motion20.motion.div,
+    {
+      initial: { height: 0, opacity: 0 },
+      animate: { height: "auto", opacity: 1 },
+      exit: { height: 0, opacity: 0 },
+      transition: { duration: 0.2, ease: "easeInOut" },
+      className: "overflow-hidden",
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+        "div",
+        {
+          className: cn(
+            "relative flex items-center justify-center gap-3 px-4 py-2.5 text-sm border-b",
+            variant === "brand" ? "text-white" : "text-foreground",
+            cfg.classes,
+            className
+          ),
+          style: variant === "brand" ? { background: "var(--gradient-primary, var(--primary))" } : void 0,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { size: 15, className: cn("shrink-0", cfg.iconClass) }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("p", { className: cn("text-center", variant === "brand" ? "text-white" : "text-foreground/90"), children: [
+              message,
+              action && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+                " ",
+                action.href ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  "a",
+                  {
+                    href: action.href,
+                    className: cn(
+                      "underline underline-offset-2 font-medium ml-1",
+                      variant === "brand" ? "text-white/90 hover:text-white" : "text-primary hover:text-primary/80"
+                    ),
+                    children: action.label
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  "button",
+                  {
+                    onClick: action.onClick,
+                    className: cn(
+                      "underline underline-offset-2 font-medium ml-1",
+                      variant === "brand" ? "text-white/90 hover:text-white" : "text-primary hover:text-primary/80"
+                    ),
+                    children: action.label
+                  }
+                )
+              ] })
+            ] }),
+            dismissible && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              "button",
+              {
+                onClick: dismiss,
+                "aria-label": "Dismiss",
+                className: cn(
+                  "absolute right-3 rounded p-1 transition-colors",
+                  variant === "brand" ? "text-white/70 hover:text-white hover:bg-white/10" : "text-muted-foreground hover:text-foreground hover:bg-accent"
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react8.X, { size: 14 })
+              }
+            )
+          ]
+        }
+      )
+    },
+    "banner"
+  ) });
+}
+
+// src/stat-card/index.tsx
+var import_lucide_react9 = require("lucide-react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function inferStatus(delta) {
+  if (!delta) return "flat";
+  if (delta.startsWith("+") || !delta.startsWith("-") && parseFloat(delta) > 0) return "up";
+  if (delta.startsWith("-") || parseFloat(delta) < 0) return "down";
+  return "flat";
+}
+var statusColors = {
+  success: "text-emerald-500",
+  warning: "text-amber-500",
+  danger: "text-red-500",
+  info: "text-primary"
+};
+function StatCard({
+  title,
+  value,
+  delta,
+  deltaLabel,
+  icon,
+  chart,
+  status,
+  className
+}) {
+  const trend = inferStatus(delta);
+  const deltaColor = status ? statusColors[status] : trend === "up" ? "text-emerald-500" : trend === "down" ? "text-red-500" : "text-muted-foreground";
+  const TrendIcon = trend === "up" ? import_lucide_react9.TrendingUp : trend === "down" ? import_lucide_react9.TrendingDown : import_lucide_react9.Minus;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    "div",
+    {
+      className: cn(
+        "relative flex flex-col gap-3 rounded-xl border bg-card p-5 overflow-hidden",
+        "border-border",
+        className
+      ),
+      style: { boxShadow: "var(--shadow-card)" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute inset-x-0 top-0 h-px opacity-60",
+            style: { background: "var(--gradient-primary, var(--primary))" }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider truncate", children: title }),
+          icon && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "shrink-0 text-muted-foreground/60", children: icon })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-3xl font-bold text-foreground tracking-tight tabular-nums", children: typeof value === "number" ? value.toLocaleString() : value }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-end justify-between gap-2 mt-auto", children: [
+          delta ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cn("flex items-center gap-1 text-xs font-medium", deltaColor), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TrendIcon, { size: 13, strokeWidth: 2.5 }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: delta }),
+            deltaLabel && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-muted-foreground font-normal", children: deltaLabel })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", {}),
+          chart && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "shrink-0", children: chart })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/page-header/index.tsx
+var import_lucide_react10 = require("lucide-react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function PageHeader({
+  title,
+  description,
+  breadcrumb,
+  actions,
+  below,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    "header",
+    {
+      className: cn(
+        "flex flex-col gap-4 pb-6 border-b border-border",
+        className
+      ),
+      children: [
+        breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ol", { className: "flex items-center gap-1 flex-wrap", children: breadcrumb.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("li", { className: "flex items-center gap-1", children: [
+          i > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react10.ChevronRight, { size: 12, className: "text-muted-foreground/50" }),
+          item.href ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            "a",
+            {
+              href: item.href,
+              className: "text-xs text-muted-foreground hover:text-foreground transition-colors",
+              children: item.label
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-xs text-muted-foreground", children: item.label })
+        ] }, i)) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-start justify-between gap-4 flex-wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h1", { className: "text-2xl font-bold tracking-tight text-foreground", children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm text-muted-foreground max-w-xl", children: description })
+          ] }),
+          actions && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex items-center gap-2 flex-wrap", children: actions })
+        ] }),
+        below && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: below })
+      ]
+    }
+  );
+}
+
+// src/empty-state/index.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  secondaryAction,
+  variant = "page",
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center text-center",
+        variant === "page" ? "min-h-[360px] justify-center px-6 py-20" : "rounded-xl border border-border border-dashed bg-card/50 px-6 py-12",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          "div",
+          {
+            className: "mb-5 flex h-14 w-14 items-center justify-center rounded-xl border border-border bg-muted/40 text-muted-foreground",
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-base font-semibold text-foreground mb-2", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-sm text-muted-foreground max-w-xs mb-6", children: description }),
+        (action || secondaryAction) && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col sm:flex-row items-center gap-3", children: [
+          action,
+          secondaryAction
+        ] })
+      ]
+    }
+  );
+}
+
+// src/dashboard-header/index.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function DashboardHeader({
+  pageTitle,
+  notificationsCount = 0,
+  actions,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    "header",
+    {
+      className: cn(
+        "flex h-14 lg:h-[60px] items-center gap-4 border-b bg-muted/20 px-6 justify-between",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "font-semibold text-lg", children: pageTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-4", children: [
+          notificationsCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "h-5 w-5 rounded-full bg-primary/20 aspect-square text-[10px] font-bold flex items-center justify-center", children: notificationsCount }) }),
+          actions
+        ] })
+      ]
+    }
+  );
+}
+
+// src/data-summary-cards/index.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function DataSummaryCards({
+  metrics,
+  columns = 4,
+  className
+}) {
+  const gridCols = {
+    2: "md:grid-cols-2",
+    3: "md:grid-cols-3",
+    4: "md:grid-cols-2 lg:grid-cols-4"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cn("grid gap-4", gridCols[columns], className), children: metrics.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    "div",
+    {
+      className: "rounded-xl bg-card p-4 text-card-foreground ring-1 ring-foreground/10",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-sm font-medium text-muted-foreground", children: item.title }),
+          item.icon ?? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-4 w-4 rounded bg-muted-foreground/20" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "text-2xl font-bold", children: item.value }),
+        item.description && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-xs text-muted-foreground mt-1", children: item.description })
+      ]
+    },
+    i
+  )) });
+}
+
+// src/data-table/index.tsx
+var React11 = __toESM(require("react"));
+var import_pagination = require("@web-my-money/primitives/pagination");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function DataTable({
+  title,
+  columns,
+  rows,
+  activeBadgeLabel = "Active",
+  className,
+  pageSize,
+  page: controlledPage,
+  onPageChange
+}) {
+  const [uncontrolledPage, setUncontrolledPage] = React11.useState(1);
+  const page = controlledPage ?? uncontrolledPage;
+  const pageCount = pageSize ? Math.max(1, Math.ceil(rows.length / pageSize)) : 1;
+  const visibleRows = pageSize ? rows.slice((page - 1) * pageSize, page * pageSize) : rows;
+  const setPage = (next) => {
+    setUncontrolledPage(next);
+    onPageChange?.(next);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cn("rounded-md border", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "p-4 border-b bg-muted/10 font-medium text-lg", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "p-0", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("thead", { className: "border-b bg-muted/20", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("tr", { children: columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        "th",
+        {
+          className: cn(
+            "font-medium p-4",
+            i === 0 ? "text-left" : i === columns.length - 1 ? "text-right" : "text-left"
+          ),
+          children: col
+        },
+        col
+      )) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("tbody", { children: visibleRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        "tr",
+        {
+          className: "border-b last:border-0 hover:bg-muted/10 transition-colors",
+          children: row.cells.map((cell, i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            "td",
+            {
+              className: cn(
+                "p-4",
+                i === 0 ? "font-medium" : i === columns.length - 1 ? "text-right font-medium" : "text-muted-foreground"
+              ),
+              children: i === 1 && row.isActive ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold bg-primary/10 text-primary", children: activeBadgeLabel }) : cell
+            },
+            i
+          ))
+        },
+        row.id
+      )) })
+    ] }) }),
+    pageSize && pageCount > 1 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex justify-center border-t p-3", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_pagination.PaginationBar, { page, pageCount, onPageChange: setPage }) })
+  ] });
+}
+
+// src/sidebar-navigation/index.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+function SidebarNavigation({
+  appName,
+  userName,
+  menuItems,
+  footer,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+    "aside",
+    {
+      className: cn(
+        "w-64 border-r bg-muted/20 h-screen hidden md:flex flex-col",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "h-14 border-b flex items-center px-4 font-bold text-lg", children: appName }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("nav", { className: "flex-1 overflow-auto py-4 px-2 space-y-2", children: menuItems.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+          "a",
+          {
+            href: item.href ?? "#",
+            className: cn(
+              "flex items-center px-3 py-2 text-sm font-medium rounded-md cursor-pointer transition-colors",
+              item.active ? "bg-primary/10 text-primary" : "hover:bg-muted text-muted-foreground"
+            ),
+            children: [
+              item.icon ?? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                "span",
+                {
+                  className: cn(
+                    "h-4 w-4 mr-3 rounded",
+                    item.active ? "bg-primary/50" : "bg-muted-foreground/30"
+                  )
+                }
+              ),
+              item.label
+            ]
+          },
+          i
+        )) }),
+        (userName || footer) && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "p-4 border-t text-sm font-medium", children: footer ?? userName })
+      ]
+    }
+  );
+}
+
+// src/kpi-row/index.tsx
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+function inferTrend(delta) {
+  if (!delta) return "flat";
+  if (delta.startsWith("+") || parseFloat(delta) > 0) return "up";
+  if (delta.startsWith("-") || parseFloat(delta) < 0) return "down";
+  return "flat";
+}
+var deltaColorMap = {
+  up: "text-emerald-500",
+  down: "text-red-500",
+  flat: "text-muted-foreground"
+};
+var statusColorMap = {
+  success: "text-emerald-500",
+  warning: "text-amber-500",
+  danger: "text-red-500",
+  neutral: "text-muted-foreground"
+};
+function KPIRow({ items, dividers = true, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    "div",
+    {
+      className: cn(
+        "grid w-full rounded-xl border border-border bg-card",
+        `grid-cols-${Math.min(items.length, 4)} sm:grid-cols-${items.length}`,
+        className
+      ),
+      style: { gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` },
+      children: items.map((item, i) => {
+        const trend = inferTrend(item.delta);
+        const deltaColor = item.status ? statusColorMap[item.status] : deltaColorMap[trend];
+        const TrendIcon = trend === "up" ? import_lucide_react11.TrendingUp : trend === "down" ? import_lucide_react11.TrendingDown : import_lucide_react11.Minus;
+        return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-1 px-5 py-4",
+              dividers && i < items.length - 1 && "border-r border-border"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground truncate", children: item.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("p", { className: "text-2xl font-bold tabular-nums text-foreground", children: [
+                item.prefix && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-lg font-medium text-muted-foreground", children: item.prefix }),
+                typeof item.value === "number" ? item.value.toLocaleString() : item.value,
+                item.suffix && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-lg font-medium text-muted-foreground ml-0.5", children: item.suffix })
+              ] }),
+              item.delta && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: cn("flex items-center gap-1 text-xs font-medium", deltaColor), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TrendIcon, { size: 11, strokeWidth: 2.5, "aria-hidden": true }),
+                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: item.delta }),
+                item.deltaLabel && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "font-normal text-muted-foreground", children: item.deltaLabel })
+              ] })
+            ]
+          },
+          i
+        );
+      })
+    }
+  );
+}
+
+// src/activity-feed/index.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var typeDot = {
+  task: "bg-primary",
+  comment: "bg-sky-500",
+  alert: "bg-amber-500",
+  success: "bg-emerald-500",
+  info: "bg-muted-foreground",
+  user: "bg-violet-500"
+};
+function getInitials(text) {
+  if (!text) return "?";
+  const w = text.trim().split(/\s+/);
+  return w.length === 1 ? w[0].slice(0, 2).toUpperCase() : (w[0][0] + w[w.length - 1][0]).toUpperCase();
+}
+function ActivityFeed({
+  items,
+  timeline = true,
+  compact = false,
+  className,
+  emptyMessage = "No activity yet."
+}) {
+  if (!items.length) {
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: cn("py-10 text-center text-sm text-muted-foreground", className), children: emptyMessage });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("ul", { className: cn("flex flex-col", compact ? "gap-1" : "gap-0", className), children: items.map((item, i) => {
+    const dotColor = item.dotColor ?? typeDot[item.type ?? "info"];
+    const isLast = i === items.length - 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("li", { className: cn("relative flex gap-4", compact ? "py-2 px-1" : "py-3 px-1"), children: [
+      timeline && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col items-center shrink-0", style: { width: 28 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: cn("mt-0.5 size-2.5 rounded-full ring-2 ring-background shrink-0", dotColor) }),
+        !isLast && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "mt-1 w-px flex-1 bg-border", style: { minHeight: compact ? 16 : 24 } })
+      ] }),
+      !timeline && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "mt-0.5 shrink-0 inline-flex size-8 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground overflow-hidden", children: item.icon ?? (item.avatar ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("img", { src: item.avatar, alt: item.initials ?? "", className: "size-full object-cover" }) : getInitials(item.initials ?? item.title)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: cn("text-sm font-medium text-foreground leading-snug", compact && "text-xs"), children: item.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "shrink-0 text-xs text-muted-foreground whitespace-nowrap", children: item.timestamp })
+        ] }),
+        item.description && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "mt-0.5 text-xs text-muted-foreground line-clamp-2", children: item.description }),
+        item.meta && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "mt-1 text-[11px] text-muted-foreground/70", children: item.meta })
+      ] })
+    ] }, item.id);
+  }) });
+}
+
+// src/app-shell/index.tsx
+var React12 = __toESM(require("react"));
+var import_lucide_react12 = require("lucide-react");
+var import_dropdown_menu = require("@web-my-money/primitives/dropdown-menu");
+
+// src/app-brand/index.tsx
+var import_jsx_runtime42 = (
+  // Mini-logo placeholder — first letter on a primary chip.
+  require("react/jsx-runtime")
+);
+var MARK_SIZE = { sm: "size-6 text-xs", md: "size-7 text-sm" };
+var TITLE_SIZE = { sm: "text-[13px]", md: "text-sm" };
+function AppBrand({
+  appName,
+  prefix = "WMM",
+  logo,
+  subtitle,
+  badge,
+  href,
+  collapsed = false,
+  size = "md",
+  renderLink,
+  className
+}) {
+  const mark = logo ?? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    "span",
+    {
+      className: cn(
+        "grid shrink-0 place-items-center rounded-lg bg-primary font-bold text-primary-foreground",
+        MARK_SIZE[size]
+      ),
+      "aria-hidden": true,
+      children: appName.slice(0, 1)
+    }
+  );
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "flex items-center gap-2.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "grid shrink-0 place-items-center [&_svg]:h-auto", children: mark }),
+    !collapsed && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "flex min-w-0 items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "flex min-w-0 flex-col leading-tight", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: cn("truncate font-semibold tracking-tight", TITLE_SIZE[size]), children: [
+          prefix && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "text-muted-foreground", children: [
+            prefix,
+            " "
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-primary", children: appName })
+        ] }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "truncate text-[11px] text-muted-foreground", children: subtitle })
+      ] }),
+      badge != null && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "border-l border-border pl-2 text-sm font-semibold text-muted-foreground", children: badge })
+    ] })
+  ] });
+  const cls = cn("inline-flex items-center", className);
+  if (href && renderLink) return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_jsx_runtime42.Fragment, { children: renderLink({ href, className: cls, children: inner }) });
+  if (href)
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("a", { href, className: cls, children: inner });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: cls, children: inner });
+}
+
+// src/app-shell/index.tsx
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var railW = "w-14";
+var openW = "w-56";
+var LAYOUT_KEY = "wmm-app-layout";
+function isGroup(n) {
+  return Array.isArray(n.items) && !("href" in n) && !("onClick" in n) && !("icon" in n) && !("badge" in n) && !("shortLabel" in n) && !("external" in n);
+}
+function toGroups(nav) {
+  if (!nav.length) return [];
+  return isGroup(nav[0]) ? nav : [{ items: nav }];
+}
+function allItems(groups) {
+  return groups.flatMap((g) => g.items);
+}
+function withActive(item, pathname) {
+  if (item.active !== void 0 || !pathname || !item.href) return item;
+  const active = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
+  return active ? { ...item, active } : item;
+}
+var LayoutContext = React12.createContext(null);
+function useLayoutPreference(defaultLayout = "sidebar") {
+  const [layout, setLayoutState] = React12.useState(defaultLayout);
+  React12.useEffect(() => {
+    try {
+      const saved = window.localStorage.getItem(LAYOUT_KEY);
+      if (saved === "sidebar" || saved === "top") setLayoutState(saved);
+    } catch {
+    }
+  }, []);
+  const setLayout = React12.useCallback((l) => {
+    setLayoutState(l);
+    try {
+      window.localStorage.setItem(LAYOUT_KEY, l);
+    } catch {
+    }
+  }, []);
+  return [layout, setLayout];
+}
+function LayoutToggle({ className }) {
+  const ctx = React12.useContext(LayoutContext);
+  if (!ctx) return null;
+  const next = ctx.layout === "sidebar" ? "top" : "sidebar";
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick: () => ctx.setLayout(next),
+      className: cn(
+        "inline-flex items-center justify-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+        className
+      ),
+      "aria-label": `Switch to ${next} layout`,
+      title: `Switch to ${next} layout`,
+      children: ctx.layout === "sidebar" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react12.PanelTop, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react12.PanelLeft, { className: "size-4" })
+    }
+  );
+}
+function SidebarNavRow({
+  item,
+  collapsed,
+  renderLink,
+  onNavigate,
+  nested
+}) {
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    "span",
+    {
+      className: cn(
+        "flex items-center gap-2.5 rounded-md px-2.5 py-2 text-[13px] font-medium transition-colors",
+        item.active ? "bg-primary/15 text-primary" : "text-muted-foreground hover:bg-muted hover:text-foreground",
+        collapsed && "justify-center px-0",
+        nested && !collapsed && "ml-3.5 py-1.5"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "grid size-[15px] shrink-0 place-items-center [&_svg]:size-[15px]", children: item.icon }),
+        !collapsed && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: "flex-1 truncate", children: [
+          item.label,
+          item.external && " \u2197"
+        ] }),
+        !collapsed && item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "rounded bg-danger/20 px-1.5 py-px text-[10px] font-semibold text-danger", children: item.badge })
+      ]
+    }
+  );
+  const cls = "block";
+  if (item.href && item.external)
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("a", { href: item.href, target: "_blank", rel: "noopener noreferrer", className: cls, onClick: onNavigate, children: inner });
+  if (item.href && renderLink) return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_jsx_runtime43.Fragment, { children: renderLink({ href: item.href, className: cls, children: inner }) });
+  if (item.href)
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("a", { href: item.href, className: cls, onClick: onNavigate, children: inner });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { type: "button", className: cn(cls, "w-full text-left"), onClick: () => {
+    item.onClick?.();
+    onNavigate?.();
+  }, children: inner });
+}
+function SectionHeader({
+  group,
+  open,
+  onToggle
+}) {
+  if (!group.collapsible) {
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "px-2.5 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground", children: group.label });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick: onToggle,
+      className: "flex w-full items-center gap-1 px-2.5 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground transition-colors hover:text-foreground",
+      children: [
+        open ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react12.ChevronDown, { className: "size-3" }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react12.ChevronRight, { className: "size-3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "flex-1 text-left", children: group.label })
+      ]
+    }
+  );
+}
+function TopLink({
+  item,
+  renderLink
+}) {
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-[13px] font-medium transition-colors [&_svg]:size-4",
+        item.active ? "bg-primary/10 text-primary" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+      ),
+      children: [
+        item.icon,
+        item.label,
+        item.external && " \u2197",
+        item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "rounded bg-danger/20 px-1.5 text-[10px] font-semibold text-danger", children: item.badge })
+      ]
+    }
+  );
+  if (item.href && item.external)
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("a", { href: item.href, target: "_blank", rel: "noopener noreferrer", children: inner });
+  if (item.href && renderLink) return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_jsx_runtime43.Fragment, { children: renderLink({ href: item.href, children: inner }) });
+  if (item.href) return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("a", { href: item.href, children: inner });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { type: "button", onClick: item.onClick, children: inner });
+}
+function TopDropdown({
+  label,
+  items,
+  renderLink
+}) {
+  const hasBadge = items.some((i) => i.badge != null && i.badge !== 0);
+  const anyActive = items.some((i) => i.active);
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_dropdown_menu.DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      import_dropdown_menu.DropdownMenuTrigger,
+      {
+        className: cn(
+          "inline-flex items-center gap-1 rounded-md px-2.5 py-1.5 text-[13px] font-medium transition-colors hover:bg-muted hover:text-foreground",
+          anyActive ? "text-foreground" : "text-muted-foreground"
+        ),
+        children: [
+          label,
+          hasBadge && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "size-1.5 rounded-full bg-primary", "aria-hidden": true }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react12.ChevronDown, { className: "size-3.5 opacity-50" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_dropdown_menu.DropdownMenuContent, { align: "start", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      import_dropdown_menu.DropdownMenuItem,
+      {
+        className: cn(item.active && "text-primary"),
+        onClick: item.onClick,
+        render: item.href ? item.external ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("a", { href: item.href, target: "_blank", rel: "noopener noreferrer" }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("a", { href: item.href }) : void 0,
+        children: [
+          item.icon,
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: "flex-1", children: [
+            item.label,
+            item.external && " \u2197"
+          ] }),
+          item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "rounded bg-danger/20 px-1.5 text-[10px] font-semibold text-danger", children: item.badge })
+        ]
+      },
+      i
+    )) })
+  ] });
+}
+function AppShell({
+  appName,
+  brandPrefix,
+  logo,
+  brandSubtitle,
+  brandBadge,
+  nav,
+  mobileTabs,
+  user,
+  headerActions,
+  sidebarFooter,
+  layout: layoutProp,
+  defaultLayout = "sidebar",
+  onLayoutChange,
+  pathname,
+  contained = false,
+  defaultCollapsed = false,
+  renderLink,
+  children,
+  className
+}) {
+  const [uncontrolled, setUncontrolled] = useLayoutPreference(defaultLayout);
+  const layout = layoutProp ?? uncontrolled;
+  const setLayout = React12.useCallback(
+    (l) => {
+      onLayoutChange?.(l);
+      if (layoutProp === void 0) setUncontrolled(l);
+    },
+    [onLayoutChange, layoutProp, setUncontrolled]
+  );
+  const layoutCtx = React12.useMemo(() => ({ layout, setLayout }), [layout, setLayout]);
+  const [collapsed, setCollapsed] = React12.useState(defaultCollapsed);
+  const [drawer, setDrawer] = React12.useState(false);
+  const [open, setOpen] = React12.useState({});
+  const groups = React12.useMemo(() => {
+    const gs = toGroups(nav);
+    return gs.map((g) => ({ ...g, items: g.items.map((it) => withActive(it, pathname)) }));
+  }, [nav, pathname]);
+  const flat = React12.useMemo(() => allItems(groups), [groups]);
+  const tabs = (mobileTabs ?? flat).slice(0, 5);
+  const brand = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    AppBrand,
+    {
+      appName,
+      prefix: brandPrefix,
+      logo,
+      subtitle: brandSubtitle,
+      badge: brandBadge,
+      renderLink
+    }
+  );
+  const isOpen = (g, i) => !g.collapsible || (open[g.label ?? String(i)] ?? g.defaultOpen ?? true);
+  const SidebarBody = ({ isCollapsed, onNavigate }) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cn("flex h-12 items-center gap-2 border-b border-border px-3", isCollapsed && "justify-center px-0"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AppBrand, { appName, prefix: brandPrefix, logo, subtitle: brandSubtitle, collapsed: isCollapsed, renderLink, href: "/" }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setCollapsed((c) => !c),
+          className: "ml-auto hidden rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground md:inline-flex",
+          "aria-label": "Toggle sidebar",
+          children: isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react12.PanelLeft, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react12.PanelLeftClose, { className: "size-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("nav", { className: "flex-1 space-y-0.5 overflow-y-auto p-2", children: groups.map((g, gi) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cn(gi > 0 && !g.label && "mt-1"), children: [
+      g.label && !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        SectionHeader,
+        {
+          group: g,
+          open: isOpen(g, gi),
+          onToggle: () => setOpen((o) => ({ ...o, [g.label ?? String(gi)]: !isOpen(g, gi) }))
+        }
+      ),
+      isOpen(g, gi) && g.items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(React12.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SidebarNavRow, { item, collapsed: isCollapsed, renderLink, onNavigate }),
+        !isCollapsed && item.items?.map((sub, si) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SidebarNavRow, { item: withActive(sub, pathname), renderLink, onNavigate, nested: true }, si))
+      ] }, i))
+    ] }, g.label ?? gi)) }),
+    (sidebarFooter || user) && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "border-t border-border p-2", children: [
+      sidebarFooter,
+      user && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: cn("mt-1", isCollapsed && "flex justify-center"), children: user })
+    ] })
+  ] });
+  const MobileDrawer = () => drawer ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "fixed inset-0 z-50 md:hidden", role: "dialog", "aria-modal": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "absolute inset-0 bg-black/50", onClick: () => setDrawer(false) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "absolute inset-y-0 left-0 w-[80vw] max-w-xs border-r border-border bg-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setDrawer(false),
+          className: "absolute right-2 top-2 rounded-md p-1.5 text-muted-foreground hover:bg-muted",
+          "aria-label": "Close menu",
+          children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react12.X, { className: "size-4" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SidebarBody, { isCollapsed: false, onNavigate: () => setDrawer(false) })
+    ] })
+  ] }) : null;
+  const BottomTabs = () => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    "nav",
+    {
+      className: "fixed inset-x-0 bottom-0 z-40 flex h-14 items-stretch border-t border-border bg-card md:hidden",
+      style: { paddingBottom: "env(safe-area-inset-bottom)" },
+      children: tabs.map((item, i) => {
+        const content = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: cn("flex h-full flex-1 flex-col items-center justify-center gap-0.5", item.active ? "text-primary" : "text-muted-foreground"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "grid size-5 place-items-center [&_svg]:size-5", children: item.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-[10px] font-medium leading-none", children: item.shortLabel ?? item.label })
+        ] });
+        return item.href && item.external ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("a", { href: item.href, target: "_blank", rel: "noopener noreferrer", className: "flex-1", children: content }, i) : item.href && renderLink ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(React12.Fragment, { children: renderLink({ href: item.href, className: "flex-1", children: content }) }, i) : item.href ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("a", { href: item.href, className: "flex-1", children: content }, i) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { type: "button", className: "flex-1", onClick: item.onClick, children: content }, i);
+      })
+    }
+  );
+  const MobileTopBar = () => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("header", { className: "flex h-12 shrink-0 items-center gap-2 border-b border-border px-3 md:hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { type: "button", onClick: () => setDrawer(true), className: "rounded-md p-1.5 text-muted-foreground hover:bg-muted", "aria-label": "Open menu", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react12.Menu, { className: "size-5" }) }),
+    brand,
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "ml-auto flex items-center gap-1", children: headerActions })
+  ] });
+  if (layout === "top") {
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(LayoutContext.Provider, { value: layoutCtx, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cn("flex min-h-screen flex-col bg-background text-foreground", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("header", { className: "sticky top-0 z-40 hidden h-14 shrink-0 items-center gap-1 border-b border-border bg-card/95 px-4 backdrop-blur md:flex", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "shrink-0", children: brand }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("nav", { className: "ml-4 flex items-center gap-0.5", children: groups.map(
+          (g, gi) => g.label ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TopDropdown, { label: g.label, items: g.items, renderLink }, gi) : g.items.map(
+            (item, i) => item.items ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TopDropdown, { label: item.label, items: item.items, renderLink }, `${gi}-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TopLink, { item, renderLink }, `${gi}-${i}`)
+          )
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "ml-auto flex items-center gap-2", children: [
+          headerActions,
+          user
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(MobileTopBar, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(MobileDrawer, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("main", { className: "flex-1 overflow-y-auto pb-20 md:pb-0", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: cn(contained ? "mx-auto max-w-7xl px-4 py-6 sm:px-6 sm:py-8" : "p-4 sm:p-6"), children }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(BottomTabs, {})
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(LayoutContext.Provider, { value: layoutCtx, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cn("flex h-screen overflow-hidden bg-background text-foreground", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("aside", { className: cn("hidden shrink-0 border-r border-border transition-[width] duration-200 md:block", collapsed ? railW : openW), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SidebarBody, { isCollapsed: collapsed }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(MobileDrawer, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(MobileTopBar, {}),
+      headerActions && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("header", { className: "hidden h-12 shrink-0 items-center border-b border-border px-4 md:flex", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "ml-auto flex items-center gap-2", children: headerActions }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("main", { className: "flex-1 overflow-y-auto pb-20 md:pb-0", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: cn(contained ? "mx-auto max-w-7xl px-4 py-6 sm:px-6 sm:py-8" : "p-4 sm:p-6"), children }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(BottomTabs, {})
+    ] })
+  ] }) });
+}
+
+// src/sub-tabs/index.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+function SubTabs({
+  items,
+  value,
+  onChange,
+  className,
+  "aria-label": ariaLabel
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": ariaLabel,
+      className: cn("inline-flex rounded-lg border border-border bg-card p-0.5", className),
+      children: items.map((it) => {
+        const selected = value === it.id;
+        return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": selected,
+            onClick: () => onChange(it.id),
+            className: cn(
+              "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm transition-colors [&_svg]:size-4",
+              selected ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground"
+            ),
+            children: [
+              it.icon,
+              it.label
+            ]
+          },
+          it.id
+        );
+      })
+    }
+  );
+}
+
+// src/page-header-banner/index.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+function PageHeaderBanner({
+  title,
+  subtitle,
+  actions,
+  gradient = true,
+  icon,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    "div",
+    {
+      className: cn(
+        "mb-6 flex flex-col gap-4 rounded-xl border border-border p-6 sm:mb-8 sm:flex-row sm:items-center sm:p-8",
+        className
+      ),
+      style: gradient ? {
+        background: "linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), color-mix(in srgb, var(--accent) 5%, transparent))"
+      } : { background: "var(--card)" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex min-w-0 items-center gap-4", children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "grid size-12 shrink-0 place-items-center rounded-xl bg-primary/15 text-primary [&_svg]:size-6", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("h1", { className: "font-heading text-2xl font-bold tracking-tight text-foreground sm:text-3xl", children: title }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: subtitle })
+          ] })
+        ] }),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex shrink-0 items-center gap-2 sm:ml-auto", children: actions })
+      ]
+    }
+  );
+}
+
+// src/glass-panel/index.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+function GlassPanel({ strong, glow, className, style, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    "div",
+    {
+      className: cn("rounded-2xl border", className),
+      style: {
+        background: strong ? "var(--glass-bg-strong, rgba(255,255,255,0.08))" : "var(--glass-bg, rgba(255,255,255,0.04))",
+        borderColor: "var(--glass-border, var(--border))",
+        backdropFilter: "var(--glass-blur, blur(20px))",
+        WebkitBackdropFilter: "var(--glass-blur, blur(20px))",
+        boxShadow: glow ? "var(--shadow-glow)" : "var(--shadow-elevated, 0 8px 32px rgba(0,0,0,0.2))",
+        ...style
+      },
+      ...props
+    }
+  );
+}
+
+// src/brand-frame/index.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var POS = {
+  "top-right": "top-4 right-4",
+  "bottom-right": "bottom-4 right-4",
+  center: "inset-0 flex items-center justify-center"
+};
+function BrandFrame({
+  watermark,
+  watermarkPosition = "top-right",
+  watermarkOpacity = 0.06,
+  glow = false,
+  glass = false,
+  animated = false,
+  header,
+  backdrop,
+  className,
+  children,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden rounded-2xl border border-border",
+        glass ? "backdrop-blur-xl" : "bg-card",
+        className
+      ),
+      style: {
+        ...glass ? { background: "var(--glass-bg, color-mix(in srgb, var(--card) 70%, transparent))" } : null,
+        ...glow ? { boxShadow: "var(--shadow-glow, 0 4px 24px color-mix(in srgb, var(--primary) 28%, transparent))" } : null,
+        ...style
+      },
+      ...props,
+      children: [
+        animated && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          "span",
+          {
+            "aria-hidden": true,
+            "data-wmm-fx": true,
+            className: "pointer-events-none absolute inset-x-0 top-0 h-px",
+            style: {
+              background: "var(--gradient-primary, linear-gradient(90deg, var(--primary), var(--accent)))",
+              backgroundSize: "200% 100%",
+              animation: "wmm-shimmer 3s linear infinite"
+            }
+          }
+        ),
+        backdrop && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "pointer-events-none absolute inset-0", children: backdrop }),
+        watermark && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          "div",
+          {
+            "aria-hidden": true,
+            className: cn("pointer-events-none absolute", POS[watermarkPosition]),
+            style: { opacity: watermarkOpacity },
+            children: watermark
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "relative", children: [
+          header && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex items-center justify-between gap-3 border-b border-border px-5 py-3", children: header }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "p-5", children })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/use-action-runner.ts
+var React13 = __toESM(require("react"));
+var import_toast = require("@web-my-money/primitives/toast");
+function useActionRunner() {
+  const toast = (0, import_toast.useToast)();
+  const [pending, setPending] = React13.useState(false);
+  const run = React13.useCallback(
+    async (action, options = {}) => {
+      setPending(true);
+      try {
+        const result = await action();
+        if (result.ok) {
+          if (options.successMessage) {
+            const title = typeof options.successMessage === "function" ? options.successMessage(result.data) : options.successMessage;
+            toast.add({
+              title,
+              actionProps: options.undo ? {
+                children: options.undo.label ?? "Undo",
+                onClick: () => {
+                  void options.undo.action();
+                }
+              } : void 0
+            });
+          }
+          options.onSuccess?.(result.data);
+        } else {
+          const title = typeof options.errorMessage === "function" ? options.errorMessage(result.error) : options.errorMessage ?? result.error;
+          toast.add({ title, type: "error" });
+          options.onError?.(result.error);
+        }
+        return result;
+      } finally {
+        setPending(false);
+        options.onSettled?.();
+      }
+    },
+    [toast]
+  );
+  return { run, pending };
+}
+
+// src/use-optimistic-action.ts
+var React14 = __toESM(require("react"));
+function useOptimisticAction(state, reducer) {
+  const [optimisticState, setOptimistic] = React14.useOptimistic(state, reducer);
+  const [isPending, startTransition] = React14.useTransition();
+  const apply = React14.useCallback(
+    (optimisticValue, action, onResult) => {
+      startTransition(async () => {
+        setOptimistic(optimisticValue);
+        const result = await action();
+        onResult?.(result);
+      });
+    },
+    [setOptimistic]
+  );
+  return [optimisticState, apply, isPending];
+}
+
+// src/appearance-settings/index.tsx
+var import_react4 = require("@web-my-money/tokens/react");
+var import_jsx_runtime48 = require("react/jsx-runtime");
+function AppearanceSettings({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cn("space-y-6", className), "data-slot": "appearance-settings", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center justify-between gap-4", "data-slot": "appearance-settings-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "text-sm font-medium text-foreground", children: "Theme" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "text-xs text-muted-foreground", children: "Light, dark, or the WMM brand theme." })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react4.ThemeToggle, {})
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center justify-between gap-4", "data-slot": "appearance-settings-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "text-sm font-medium text-foreground", children: "Text size" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "text-xs text-muted-foreground", children: "Scales the whole interface." })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react4.FontSizeToggle, {})
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ActivityFeed,
+  AppBrand,
+  AppShell,
+  AppearanceSettings,
+  AvatarGroup,
+  BentoGrid,
+  BrandFrame,
+  CTABanner,
+  CaseStudiesSection,
+  ComparisonTable,
+  ContactForm,
+  DEFAULT_WAVES,
+  DashboardHeader,
+  DataSummaryCards,
+  DataTable,
+  EmptyState,
+  FadeUp,
+  Faq,
+  FeatureGrid,
+  Footer,
+  GlassPanel,
+  HeroCanvas,
+  HeroSection,
+  KPIRow,
+  LayeredButton,
+  LayoutToggle,
+  LightboxGallery,
+  LogoCloud,
+  Marquee,
+  NavBar,
+  NotificationBanner,
+  PageHeader,
+  PageHeaderBanner,
+  PricingTable,
+  ProcessSteps,
+  ScrollReveal,
+  SectionGlow,
+  SectionIntro,
+  SectionLabel,
+  SidebarNavigation,
+  SocialProof,
+  StatCard,
+  StatsSection,
+  SubTabs,
+  TechCarousel,
+  TestimonialCarousel,
+  TestimonialsCarousel,
+  TestimonialsSection,
+  TextRotator,
+  Thumbnail,
+  UseCasesSection,
+  ValueStackSection,
+  WaveCanvas,
+  useActionRunner,
+  useLayoutPreference,
+  useOptimisticAction
+});