@deriv-web-design/ui 0.0.14 → 0.0.15

package/dist/index.js

@@ -32,19 +32,20 @@ __export(index_exports, {
   Chip: () => Chip,
   ChipDropdown: () => ChipDropdown,
   DayNightTransition: () => DayNightTransition,
+  DotLottieInView: () => DotLottieInView,
   DownloadBadge: () => DownloadBadge,
   DownloadBanner: () => DownloadBanner,
+  FEATURE_SCROLL_DATA: () => FEATURE_SCROLL_DATA,
   FeatureCards: () => FeatureCards,
   FeatureCardsSecondary: () => FeatureCardsSecondary,
+  FeatureScroll: () => FeatureScroll,
   Footer: () => Footer,
   Hero: () => Hero,
   Link: () => Link,
   LogoMarquee: () => LogoMarquee,
   Navbar: () => Navbar,
   Pagination: () => Pagination,
-  SCROLLYTELLING_DATA: () => SCROLLYTELLING_DATA,
   STEPS_DATA: () => STEPS_DATA,
-  Scrollytelling: () => Scrollytelling,
   SearchField: () => SearchField,
   Stats: () => Stats,
   Steps: () => Steps,
@@ -1850,11 +1851,76 @@ var Stats = ({
   );
 };
 
-// templates/Scrollytelling/Scrollytelling.tsx
+// templates/FeatureScroll/FeatureScroll.tsx
+var import_react11 = require("react");
+
+// components/DotLottieInView/DotLottieInView.tsx
 var import_react10 = require("react");
 var import_dotlottie_react = require("@lottiefiles/dotlottie-react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var SCROLLYTELLING_DATA = [
+function DotLottieInView({
+  enabled = true,
+  rootMargin = "0px",
+  threshold = 0.2,
+  className,
+  style,
+  ...dotProps
+}) {
+  const wrapRef = (0, import_react10.useRef)(null);
+  const [inView, setInView] = (0, import_react10.useState)(false);
+  const [dotLottie, setDotLottie] = (0, import_react10.useState)(null);
+  (0, import_react10.useEffect)(() => {
+    const el = wrapRef.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setInView(entry.isIntersecting);
+      },
+      { root: null, rootMargin, threshold }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [rootMargin, threshold]);
+  (0, import_react10.useEffect)(() => {
+    if (!dotLottie) return;
+    if (!enabled || !inView) {
+      dotLottie.stop();
+      return;
+    }
+    dotLottie.stop();
+    dotLottie.play();
+  }, [dotLottie, enabled, inView]);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "div",
+    {
+      ref: wrapRef,
+      className,
+      style: {
+        width: "100%",
+        height: "100%",
+        minHeight: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "transparent",
+        ...style
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        import_dotlottie_react.DotLottieReact,
+        {
+          ...dotProps,
+          loop: false,
+          autoplay: false,
+          dotLottieRefCallback: setDotLottie
+        }
+      )
+    }
+  );
+}
+
+// templates/FeatureScroll/FeatureScroll.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var FEATURE_SCROLL_DATA = [
   {
     title: "Forex",
     description: "Trade the most popular currency pairs with high leverage, tight spreads, and fast execution.",
@@ -1898,16 +1964,16 @@ var SCROLLYTELLING_DATA = [
     mediaUrl: "https://cdn.prod.website-files.com/66fbaad381fa6866fa4991f3/675a9064f2c16e4e0732abfb_Stock%20Indices.lottie"
   }
 ];
-var ChevronRight2 = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+var ChevronRight2 = () => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
   "svg",
   {
-    className: "scrolly__item-link-icon",
+    className: "fs__item-link-icon",
     width: "16",
     height: "16",
     viewBox: "0 0 16 16",
     fill: "none",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "path",
       {
         d: "M6 3l5 5-5 5",
@@ -1925,16 +1991,15 @@ function resolveMediaType(item) {
 }
 var MediaRenderer = ({ item, active }) => {
   if (resolveMediaType(item) === "lottie") {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      import_dotlottie_react.DotLottieReact,
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      DotLottieInView,
       {
         src: item.mediaUrl,
-        loop: true,
-        autoplay: active
+        enabled: active
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "img",
     {
       src: item.mediaUrl,
@@ -1943,87 +2008,121 @@ var MediaRenderer = ({ item, active }) => {
     }
   );
 };
-var Scrollytelling = ({
+var FeatureScroll = ({
   header,
   items,
   variant = "media-right",
   className,
   ...props
 }) => {
-  const [activeIndex, setActiveIndex] = (0, import_react10.useState)(0);
-  const itemRefs = (0, import_react10.useRef)([]);
-  (0, import_react10.useEffect)(() => {
-    const elements = itemRefs.current.filter(Boolean);
-    if (!elements.length) return;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            const idx = itemRefs.current.indexOf(
-              entry.target
-            );
-            if (idx !== -1) setActiveIndex(idx);
-          }
-        });
-      },
-      {
-        /* Fire when 50 % of the text block is visible.
-           rootMargin trims the effective viewport to its
-           middle third, preventing accidental fires when
-           items are only just entering / leaving the screen. */
-        threshold: 0.5,
-        rootMargin: "-15% 0px -15% 0px"
+  const [activeIndex, setActiveIndex] = (0, import_react11.useState)(0);
+  const titleRefs = (0, import_react11.useRef)([]);
+  const mediaColRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useLayoutEffect)(() => {
+    if (items.length === 0) return;
+    const readThresholdPx = () => {
+      const col = mediaColRef.current;
+      if (!col) return 80;
+      const top = getComputedStyle(col).top;
+      const px = parseFloat(top);
+      return Number.isFinite(px) ? px : 80;
+    };
+    let rafId = 0;
+    const tick = () => {
+      rafId = 0;
+      if (typeof window === "undefined") return;
+      if (!window.matchMedia("(min-width: 992px)").matches) return;
+      const threshold = readThresholdPx();
+      const refs = titleRefs.current;
+      let pinned = -1;
+      for (let i = 0; i < items.length; i++) {
+        const el = refs[i];
+        if (!el) continue;
+        if (el.getBoundingClientRect().top <= threshold) pinned = i;
       }
-    );
-    elements.forEach((el) => observer.observe(el));
-    return () => observer.disconnect();
+      const mediaIndex = Math.min(
+        items.length - 1,
+        pinned + 1
+      );
+      setActiveIndex(
+        (prev) => prev === mediaIndex ? prev : mediaIndex
+      );
+    };
+    const schedule = () => {
+      if (rafId !== 0) return;
+      rafId = window.requestAnimationFrame(tick);
+    };
+    tick();
+    window.addEventListener("scroll", schedule, { passive: true });
+    window.addEventListener("resize", schedule, { passive: true });
+    const mq = window.matchMedia("(min-width: 992px)");
+    mq.addEventListener("change", schedule);
+    return () => {
+      window.removeEventListener("scroll", schedule);
+      window.removeEventListener("resize", schedule);
+      mq.removeEventListener("change", schedule);
+      if (rafId !== 0) window.cancelAnimationFrame(rafId);
+    };
   }, [items.length]);
   const rootClass = [
-    "scrolly",
-    `scrolly--${variant}`,
+    "fs",
+    `fs--${variant}`,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("section", { className: rootClass, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "scrolly__inner", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { className: "scrolly__header", children: header }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "scrolly__layout", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "scrolly__media-col", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "scrolly__media-wrap", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  if (items.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("section", { className: rootClass, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "fs__inner", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { className: "fs__header", children: header }) }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("section", { className: rootClass, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "fs__inner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { className: "fs__header", children: header }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "fs__layout", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "fs__media-col", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "div",
         {
-          className: [
-            "scrolly__media-item",
-            i === activeIndex ? "scrolly__media-item--active" : ""
-          ].filter(Boolean).join(" "),
-          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            MediaRenderer,
+          ref: mediaColRef,
+          className: "fs__media-sticky",
+          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "fs__media-wrap", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "div",
             {
-              item,
-              active: i === activeIndex
-            }
-          )
-        },
-        i
-      )) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "scrolly__content-col", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+              className: [
+                "fs__media-item",
+                i === activeIndex ? "fs__media-item--active" : ""
+              ].filter(Boolean).join(" "),
+              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                MediaRenderer,
+                {
+                  item,
+                  active: i === activeIndex
+                }
+              )
+            },
+            i
+          )) })
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "fs__content-col", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
         "div",
         {
-          ref: (el) => {
-            itemRefs.current[i] = el;
-          },
-          className: [
-            "scrolly__item",
-            i === activeIndex ? "scrolly__item--active" : "scrolly__item--inactive"
-          ].join(" "),
+          className: "fs__item",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "scrolly__item-title", children: item.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "scrolly__item-desc", children: item.description }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              "h3",
+              {
+                ref: (el) => {
+                  titleRefs.current[i] = el;
+                },
+                className: "fs__item-title",
+                children: item.title
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "fs__item-desc", children: item.description }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
               "a",
               {
                 href: item.link,
-                className: "scrolly__item-link",
+                className: "fs__item-link",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: item.linkLabel }),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronRight2, {})
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: item.linkLabel }),
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChevronRight2, {})
                 ]
               }
             )
@@ -2032,28 +2131,28 @@ var Scrollytelling = ({
         i
       )) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "scrolly__mobile-list", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "scrolly__mobile-item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "scrolly__item-title", children: item.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "scrolly__item-desc", children: item.description }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "fs__mobile-list", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "fs__mobile-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: "fs__item-title", children: item.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "fs__mobile-media", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MediaRenderer, { item, active: true }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "fs__item-desc", children: item.description }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
         "a",
         {
           href: item.link,
-          className: "scrolly__item-link",
+          className: "fs__item-link",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Learn more" }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronRight2, {})
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: item.linkLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChevronRight2, {})
           ]
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "scrolly__mobile-media", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MediaRenderer, { item, active: true }) })
+      )
     ] }, i)) })
   ] }) });
 };
 
 // templates/StickyStackedCards/StickyStackedCards.tsx
-var import_react11 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var PLACEHOLDER_IMAGE = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/69b9309379ac08e59ca8210a_1f3f555da9a5cbb13a6fe1bf0d5fe1b6_placeholder-image.webp";
 var STEPS_DATA = [
   {
@@ -2082,8 +2181,8 @@ var StickyStackedCards = ({
   className,
   ...props
 }) => {
-  const cardRefs = (0, import_react11.useRef)([]);
-  (0, import_react11.useEffect)(() => {
+  const cardRefs = (0, import_react12.useRef)([]);
+  (0, import_react12.useEffect)(() => {
     if (typeof window === "undefined") return;
     let rafId = 0;
     const update = () => {
@@ -2117,14 +2216,14 @@ var StickyStackedCards = ({
       cancelAnimationFrame(rafId);
     };
   }, [items.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "section",
     {
       className: ["ssc", className].filter(Boolean).join(" "),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "ssc__inner", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { className: "ssc__header", children: header }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "ssc__track", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "ssc__inner", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h2", { className: "ssc__header", children: header }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "ssc__track", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "div",
           {
             ref: (el) => {
@@ -2150,11 +2249,11 @@ var StickyStackedCards = ({
               top: `calc(var(--ssc-sticky-top) + ${i} * var(--ssc-peek-offset))`
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "ssc__card-content", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: "ssc__card-title", children: item.title }),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "ssc__card-desc", children: item.description })
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "ssc__card-content", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { className: "ssc__card-title", children: item.title }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "ssc__card-desc", children: item.description })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "ssc__card-image", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "ssc__card-image", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 "img",
                 {
                   src: item.imageUrl,
@@ -2172,9 +2271,9 @@ var StickyStackedCards = ({
 };
 
 // templates/CTABanner/CTABanner.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_framer_motion = require("framer-motion");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var ENTRANCE = {
   near: 80,
   mid: 130,
@@ -2420,7 +2519,7 @@ var CTABanner = ({
   ...props
 }) => {
   const resolvedAvatars = avatars ?? (variant === "compact" ? COMPACT_AVATAR_DATA : AVATAR_DATA);
-  const sectionRef = (0, import_react12.useRef)(null);
+  const sectionRef = (0, import_react13.useRef)(null);
   const { scrollYProgress } = (0, import_framer_motion.useScroll)({
     target: sectionRef,
     offset: ["start end", "end start"]
@@ -2438,14 +2537,14 @@ var CTABanner = ({
   const compactXValues = useCompactAvatarXValues(smooth);
   const avatarYValues = variant === "compact" ? compactYValues : standardYValues;
   const avatarXValues = variant === "compact" ? compactXValues : standardXValues;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "section",
     {
       ref: sectionRef,
       className: ["ctab", variant === "compact" ? "ctab--compact" : "", className].filter(Boolean).join(" "),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           import_framer_motion.motion.div,
           {
             className: "ctab__grid",
@@ -2453,7 +2552,7 @@ var CTABanner = ({
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "ctab__inner", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "ctab__stage", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "ctab__inner", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "ctab__stage", children: [
           resolvedAvatars.map((avatar, index) => {
             const posStyle = {};
             if (avatar.desktopPos.left) posStyle["--av-d-left"] = avatar.desktopPos.left;
@@ -2462,7 +2561,7 @@ var CTABanner = ({
             if (avatar.mobilePos?.left) posStyle["--av-m-left"] = avatar.mobilePos.left;
             if (avatar.mobilePos?.right) posStyle["--av-m-right"] = avatar.mobilePos.right;
             if (avatar.mobilePos?.top) posStyle["--av-m-top"] = avatar.mobilePos.top;
-            return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               import_framer_motion.motion.div,
               {
                 className: [
@@ -2476,7 +2575,7 @@ var CTABanner = ({
                   opacity: avatarOpacity,
                   filter: avatarFilter
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   "img",
                   {
                     src: avatar.imageUrl,
@@ -2489,14 +2588,14 @@ var CTABanner = ({
               avatar.id
             );
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
             import_framer_motion.motion.div,
             {
               className: "ctab__hero",
               style: { y: heroY, opacity: heroOpacity },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h2", { className: "ctab__headline", children: headline }),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { colorScheme: "black", variant: "primary", label: ctaLabel }) })
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h2", { className: "ctab__headline", children: headline }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { colorScheme: "black", variant: "primary", label: ctaLabel }) })
               ]
             }
           )
@@ -2507,14 +2606,14 @@ var CTABanner = ({
 };
 
 // components/Navbar/Navbar.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_framer_motion2 = require("framer-motion");
 
 // assets/icon-globe.svg
 var icon_globe_default = "./icon-globe-S54WYYEK.svg";
 
 // components/Navbar/Navbar.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var EASE_OUT_EXPO = [0.16, 1, 0.3, 1];
 var dropdownVariants = {
   hidden: { opacity: 0, scale: 0.96, y: -8 },
@@ -2528,7 +2627,7 @@ var accordionVariants = {
   hidden: { height: 0, opacity: 0 },
   visible: { height: "auto", opacity: 1 }
 };
-var ChevronDownIcon3 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var ChevronDownIcon3 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   "svg",
   {
     className,
@@ -2537,7 +2636,7 @@ var ChevronDownIcon3 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime
     viewBox: "0 0 14 14",
     fill: "none",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "path",
       {
         d: "M2.625 4.8125L7 9.1875L11.375 4.8125",
@@ -2549,7 +2648,7 @@ var ChevronDownIcon3 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime
     )
   }
 );
-var ArrowRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var ArrowRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   "path",
   {
     d: "M2.625 7H11.375M11.375 7L7.875 3.5M11.375 7L7.875 10.5",
@@ -2559,7 +2658,7 @@ var ArrowRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg",
     strokeLinejoin: "round"
   }
 ) });
-var ArrowUpRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var ArrowUpRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   "path",
   {
     d: "M4.5 11.5L11.5 4.5M11.5 4.5H5.5M11.5 4.5V10.5",
@@ -2569,7 +2668,7 @@ var ArrowUpRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg"
     strokeLinejoin: "round"
   }
 ) });
-var BarsIcon = () => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var BarsIcon = () => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   "path",
   {
     d: "M2.5 5H17.5M2.5 10H17.5M2.5 15H17.5",
@@ -2578,7 +2677,7 @@ var BarsIcon = () => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { widt
     strokeLinecap: "round"
   }
 ) });
-var XMarkIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var XMarkIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   "path",
   {
     d: "M15 5L5 15M5 5L15 15",
@@ -2587,7 +2686,7 @@ var XMarkIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { wi
     strokeLinecap: "round"
   }
 ) });
-var ChevronLeftIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var ChevronLeftIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   "svg",
   {
     className,
@@ -2596,7 +2695,7 @@ var ChevronLeftIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2
     viewBox: "0 0 24 24",
     fill: "none",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "path",
       {
         d: "M15 18L9 12L15 6",
@@ -2608,11 +2707,11 @@ var ChevronLeftIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2
     )
   }
 );
-var GlobeIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("img", { src: icon_globe_default, alt: "", "aria-hidden": "true", width: "20", height: "20", className });
+var GlobeIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("img", { src: icon_globe_default, alt: "", "aria-hidden": "true", width: "20", height: "20", className });
 var DropdownPanel = ({ item, onMouseEnter, onMouseLeave }) => {
   const { dropdown } = item;
   if (!dropdown) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     import_framer_motion2.motion.div,
     {
       className: "navbar__dropdown",
@@ -2623,10 +2722,10 @@ var DropdownPanel = ({ item, onMouseEnter, onMouseLeave }) => {
       transition: { duration: 0.18, ease: EASE_OUT_EXPO },
       onMouseEnter,
       onMouseLeave,
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "navbar__dropdown-inner", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "navbar__dropdown-left", children: dropdown.columns.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "navbar__dropdown-col", children: col.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "navbar__dropdown-col-list", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "navbar__dropdown-col-title", children: section.title }),
-          section.items.map((link) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "navbar__dropdown-inner", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "navbar__dropdown-left", children: dropdown.columns.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "navbar__dropdown-col", children: col.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "navbar__dropdown-col-list", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "navbar__dropdown-col-title", children: section.title }),
+          section.items.map((link) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
             "a",
             {
               href: link.href,
@@ -2635,24 +2734,24 @@ var DropdownPanel = ({ item, onMouseEnter, onMouseLeave }) => {
               rel: link.external ? "noopener noreferrer" : void 0,
               children: [
                 link.label,
-                link.external ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ArrowUpRightIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ArrowRightIcon, {})
+                link.external ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ArrowUpRightIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ArrowRightIcon, {})
               ]
             },
             link.href
           ))
         ] }, section.title)) }, colIdx)) }),
-        dropdown.feature && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "navbar__dropdown-right", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FeatureCard, { feature: dropdown.feature }) })
+        dropdown.feature && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "navbar__dropdown-right", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(FeatureCard, { feature: dropdown.feature }) })
       ] })
     }
   );
 };
-var FeatureCard = ({ feature, mobile }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+var FeatureCard = ({ feature, mobile }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
   "div",
   {
     className: mobile ? "navbar__drawer-feature" : "navbar__dropdown-feature",
     style: feature.backgroundImageUrl ? { backgroundImage: `url(${feature.backgroundImageUrl})` } : void 0,
     children: [
-      feature.backgroundImageUrl && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      feature.backgroundImageUrl && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         "img",
         {
           src: feature.backgroundImageUrl,
@@ -2661,20 +2760,20 @@ var FeatureCard = ({ feature, mobile }) => /* @__PURE__ */ (0, import_jsx_runtim
           "aria-hidden": "true"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: mobile ? "navbar__drawer-feature-overlay" : "navbar__dropdown-feature-overlay", "aria-hidden": "true" }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: mobile ? "navbar__drawer-feature-content" : "navbar__dropdown-feature-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: mobile ? "navbar__drawer-feature-title" : "navbar__dropdown-feature-title", children: feature.title }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: mobile ? "navbar__drawer-feature-desc" : "navbar__dropdown-feature-desc", children: feature.description })
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: mobile ? "navbar__drawer-feature-overlay" : "navbar__dropdown-feature-overlay", "aria-hidden": "true" }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: mobile ? "navbar__drawer-feature-content" : "navbar__dropdown-feature-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: mobile ? "navbar__drawer-feature-title" : "navbar__dropdown-feature-title", children: feature.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: mobile ? "navbar__drawer-feature-desc" : "navbar__dropdown-feature-desc", children: feature.description })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
           "a",
           {
             href: feature.ctaHref,
             className: mobile ? "navbar__drawer-feature-cta" : "navbar__dropdown-feature-cta",
             children: [
               feature.ctaLabel,
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ArrowRightIcon, {})
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ArrowRightIcon, {})
             ]
           }
         )
@@ -2684,8 +2783,8 @@ var FeatureCard = ({ feature, mobile }) => /* @__PURE__ */ (0, import_jsx_runtim
 );
 var DrawerAccordion = ({ item, isOpen, onToggle }) => {
   const { dropdown } = item;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "navbar__drawer-item", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "navbar__drawer-item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "button",
       {
         className: `navbar__drawer-trigger ${isOpen ? "navbar__drawer-trigger--open" : ""}`,
@@ -2693,11 +2792,11 @@ var DrawerAccordion = ({ item, isOpen, onToggle }) => {
         "aria-expanded": isOpen,
         children: [
           item.label,
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChevronDownIcon3, { className: "navbar__drawer-trigger__chevron" })
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChevronDownIcon3, { className: "navbar__drawer-trigger__chevron" })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_framer_motion2.AnimatePresence, { initial: false, children: isOpen && dropdown && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_framer_motion2.AnimatePresence, { initial: false, children: isOpen && dropdown && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       import_framer_motion2.motion.div,
       {
         className: "navbar__drawer-panel",
@@ -2706,10 +2805,10 @@ var DrawerAccordion = ({ item, isOpen, onToggle }) => {
         animate: "visible",
         exit: "hidden",
         transition: { duration: 0.22, ease: EASE_OUT_EXPO },
-        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "navbar__drawer-panel-inner", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "navbar__drawer-panel-cols", children: dropdown.columns.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "navbar__drawer-panel-col", children: col.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "navbar__drawer-col-section", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "navbar__drawer-col-title", children: section.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "navbar__drawer-col-links", children: section.items.map((link) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "navbar__drawer-panel-inner", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "navbar__drawer-panel-cols", children: dropdown.columns.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "navbar__drawer-panel-col", children: col.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "navbar__drawer-col-section", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "navbar__drawer-col-title", children: section.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "navbar__drawer-col-links", children: section.items.map((link) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               "a",
               {
                 href: link.href,
@@ -2721,7 +2820,7 @@ var DrawerAccordion = ({ item, isOpen, onToggle }) => {
               link.href
             )) })
           ] }, section.title)) }, colIdx)) }),
-          dropdown.feature && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FeatureCard, { feature: dropdown.feature, mobile: true })
+          dropdown.feature && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(FeatureCard, { feature: dropdown.feature, mobile: true })
         ] })
       }
     ) })
@@ -2745,24 +2844,24 @@ var Navbar = ({
   className,
   ...props
 }) => {
-  const [openDropdown, setOpenDropdown] = (0, import_react13.useState)(null);
-  const [mobileOpen, setMobileOpen] = (0, import_react13.useState)(false);
-  const [mobileExpanded, setMobileExpanded] = (0, import_react13.useState)(null);
-  const [scrolled, setScrolled] = (0, import_react13.useState)(false);
-  const [langDropdownOpen, setLangDropdownOpen] = (0, import_react13.useState)(false);
-  const [mobileLangOpen, setMobileLangOpen] = (0, import_react13.useState)(false);
-  const hoverTimeoutRef = (0, import_react13.useRef)(null);
-  const langHoverTimeoutRef = (0, import_react13.useRef)(null);
-  const pillAreaRef = (0, import_react13.useRef)(null);
-  const langBtnRef = (0, import_react13.useRef)(null);
+  const [openDropdown, setOpenDropdown] = (0, import_react14.useState)(null);
+  const [mobileOpen, setMobileOpen] = (0, import_react14.useState)(false);
+  const [mobileExpanded, setMobileExpanded] = (0, import_react14.useState)(null);
+  const [scrolled, setScrolled] = (0, import_react14.useState)(false);
+  const [langDropdownOpen, setLangDropdownOpen] = (0, import_react14.useState)(false);
+  const [mobileLangOpen, setMobileLangOpen] = (0, import_react14.useState)(false);
+  const hoverTimeoutRef = (0, import_react14.useRef)(null);
+  const langHoverTimeoutRef = (0, import_react14.useRef)(null);
+  const pillAreaRef = (0, import_react14.useRef)(null);
+  const langBtnRef = (0, import_react14.useRef)(null);
   const hasLangDropdown = Boolean(languageItems && languageItems.length > 0);
   const resolvedLogo = theme === "light" ? logoSrcDark ?? logoSrc : logoSrc;
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const onScroll = () => setScrolled(window.scrollY > 0);
     window.addEventListener("scroll", onScroll, { passive: true });
     return () => window.removeEventListener("scroll", onScroll);
   }, []);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const onKey = (e) => {
       if (e.key === "Escape") {
         setOpenDropdown(null);
@@ -2773,16 +2872,16 @@ var Navbar = ({
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, []);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!mobileOpen) setMobileLangOpen(false);
   }, [mobileOpen]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     document.body.style.overflow = mobileOpen ? "hidden" : "";
     return () => {
       document.body.style.overflow = "";
     };
   }, [mobileOpen]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!openDropdown) return;
     const onPointerDown = (e) => {
       if (pillAreaRef.current && !pillAreaRef.current.contains(e.target)) {
@@ -2792,54 +2891,54 @@ var Navbar = ({
     document.addEventListener("pointerdown", onPointerDown);
     return () => document.removeEventListener("pointerdown", onPointerDown);
   }, [openDropdown]);
-  const clearHoverTimeout = (0, import_react13.useCallback)(() => {
+  const clearHoverTimeout = (0, import_react14.useCallback)(() => {
     if (hoverTimeoutRef.current) {
       clearTimeout(hoverTimeoutRef.current);
       hoverTimeoutRef.current = null;
     }
   }, []);
-  const clearLangHoverTimeout = (0, import_react13.useCallback)(() => {
+  const clearLangHoverTimeout = (0, import_react14.useCallback)(() => {
     if (langHoverTimeoutRef.current) {
       clearTimeout(langHoverTimeoutRef.current);
       langHoverTimeoutRef.current = null;
     }
   }, []);
-  const handleLangEnter = (0, import_react13.useCallback)(() => {
+  const handleLangEnter = (0, import_react14.useCallback)(() => {
     clearLangHoverTimeout();
     setLangDropdownOpen(true);
   }, [clearLangHoverTimeout]);
-  const handleLangLeave = (0, import_react13.useCallback)(() => {
+  const handleLangLeave = (0, import_react14.useCallback)(() => {
     clearLangHoverTimeout();
     langHoverTimeoutRef.current = setTimeout(() => setLangDropdownOpen(false), 150);
   }, [clearLangHoverTimeout]);
-  const handleLangSelect = (0, import_react13.useCallback)((code) => {
+  const handleLangSelect = (0, import_react14.useCallback)((code) => {
     setLangDropdownOpen(false);
     setMobileLangOpen(false);
     onLanguageSelect?.(code);
   }, [onLanguageSelect]);
-  const handleNavEnter = (0, import_react13.useCallback)((label) => {
+  const handleNavEnter = (0, import_react14.useCallback)((label) => {
     clearHoverTimeout();
     setOpenDropdown(label);
   }, [clearHoverTimeout]);
-  const handleNavLeave = (0, import_react13.useCallback)(() => {
+  const handleNavLeave = (0, import_react14.useCallback)(() => {
     clearHoverTimeout();
     hoverTimeoutRef.current = setTimeout(() => setOpenDropdown(null), 120);
   }, [clearHoverTimeout]);
   const activeDropdownItem = navItems.find((item) => item.label === openDropdown);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "nav",
     {
       className: ["navbar", `navbar--${theme}`, scrolled && "navbar--scrolled", mobileOpen && "navbar--menu-open", className].filter(Boolean).join(" "),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "navbar__bar", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: logoHref, className: "navbar__logo", "aria-label": "Home", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("img", { src: resolvedLogo, alt: "Logo" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "navbar__nav-center", ref: pillAreaRef, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "navbar__pill", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: logoHref, className: "navbar__pill-logo", "aria-label": "Home", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("img", { src: logoSrcDark ?? logoSrc, alt: "Logo" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "navbar__nav-group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "navbar__bar", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("a", { href: logoHref, className: "navbar__logo", "aria-label": "Home", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("img", { src: resolvedLogo, alt: "Logo" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "navbar__nav-center", ref: pillAreaRef, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "navbar__pill", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("a", { href: logoHref, className: "navbar__pill-logo", "aria-label": "Home", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("img", { src: logoSrcDark ?? logoSrc, alt: "Logo" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "navbar__nav-group", children: [
               navItems.map((item) => {
                 if (item.external) {
-                  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                     "a",
                     {
                       href: item.href,
@@ -2848,14 +2947,14 @@ var Navbar = ({
                       rel: "noopener noreferrer",
                       children: [
                         item.label,
-                        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ArrowUpRightIcon, {})
+                        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ArrowUpRightIcon, {})
                       ]
                     },
                     item.label
                   );
                 }
                 if (item.dropdown) {
-                  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                     "button",
                     {
                       className: [
@@ -2868,21 +2967,21 @@ var Navbar = ({
                       "aria-haspopup": "true",
                       children: [
                         item.label,
-                        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChevronDownIcon3, { className: "navbar__nav-item__chevron" })
+                        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChevronDownIcon3, { className: "navbar__nav-item__chevron" })
                       ]
                     },
                     item.label
                   );
                 }
-                return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: item.href, className: "navbar__nav-item", children: item.label }, item.label);
+                return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("a", { href: item.href, className: "navbar__nav-item", children: item.label }, item.label);
               }),
-              languageLabel && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              languageLabel && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 "div",
                 {
                   className: "navbar__lang-wrapper",
                   onMouseEnter: hasLangDropdown ? handleLangEnter : void 0,
                   onMouseLeave: hasLangDropdown ? handleLangLeave : void 0,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                     "button",
                     {
                       ref: langBtnRef,
@@ -2891,7 +2990,7 @@ var Navbar = ({
                       "aria-haspopup": hasLangDropdown ? "true" : void 0,
                       "aria-expanded": hasLangDropdown ? langDropdownOpen : void 0,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GlobeIcon, { className: "navbar__lang-globe" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(GlobeIcon, { className: "navbar__lang-globe" }),
                         languageLabel
                       ]
                     }
@@ -2899,12 +2998,12 @@ var Navbar = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "navbar__pill-actions", children: [
-              loginHref && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: loginHref, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { colorScheme: "black", variant: "secondary", label: loginLabel }) }),
-              ctaHref && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "navbar__pill-actions", children: [
+              loginHref && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("a", { href: loginHref, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { colorScheme: "black", variant: "secondary", label: loginLabel }) }),
+              ctaHref && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
             ] })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_framer_motion2.AnimatePresence, { children: openDropdown && activeDropdownItem?.dropdown && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_framer_motion2.AnimatePresence, { children: openDropdown && activeDropdownItem?.dropdown && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             DropdownPanel,
             {
               item: activeDropdownItem,
@@ -2913,7 +3012,7 @@ var Navbar = ({
             },
             "dropdown"
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_framer_motion2.AnimatePresence, { children: hasLangDropdown && langDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_framer_motion2.AnimatePresence, { children: hasLangDropdown && langDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             import_framer_motion2.motion.div,
             {
               className: "navbar__lang-dropdown",
@@ -2924,12 +3023,12 @@ var Navbar = ({
               transition: { duration: 0.18, ease: EASE_OUT_EXPO },
               onMouseEnter: clearLangHoverTimeout,
               onMouseLeave: handleLangLeave,
-              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 "div",
                 {
                   className: "navbar__lang-dropdown-grid",
                   style: { "--lang-rows": Math.ceil(languageItems.length / 3) },
-                  children: languageItems.map((lang) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  children: languageItems.map((lang) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                     "button",
                     {
                       className: [
@@ -2945,8 +3044,8 @@ var Navbar = ({
               )
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "navbar__actions", children: [
-            loginHref && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: loginHref, className: "navbar__actions-login", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "navbar__actions", children: [
+            loginHref && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("a", { href: loginHref, className: "navbar__actions-login", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               Button,
               {
                 colorScheme: theme === "dark" ? "white" : "black",
@@ -2954,10 +3053,10 @@ var Navbar = ({
                 label: loginLabel
               }
             ) }),
-            ctaHref && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
+            ctaHref && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "navbar__mobile-actions", children: [
-            loginHref && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: loginHref, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "navbar__mobile-actions", children: [
+            loginHref && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("a", { href: loginHref, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               Button,
               {
                 colorScheme: scrolled || theme === "light" ? "black" : "white",
@@ -2965,18 +3064,18 @@ var Navbar = ({
                 label: loginLabel
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               "button",
               {
                 className: "navbar__mobile-trigger",
                 onClick: () => setMobileOpen((o) => !o),
                 "aria-label": mobileOpen ? "Close navigation menu" : "Open navigation menu",
-                children: mobileOpen ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(XMarkIcon2, {}) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(BarsIcon, {})
+                children: mobileOpen ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(XMarkIcon2, {}) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(BarsIcon, {})
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "navbar__drawer-clip", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_framer_motion2.AnimatePresence, { children: mobileOpen && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "navbar__drawer-clip", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_framer_motion2.AnimatePresence, { children: mobileOpen && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
           import_framer_motion2.motion.div,
           {
             className: "navbar__drawer",
@@ -2989,10 +3088,10 @@ var Navbar = ({
             role: "dialog",
             "aria-label": "Navigation menu",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("nav", { className: "navbar__drawer-nav", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("nav", { className: "navbar__drawer-nav", children: [
                 navItems.map((item) => {
                   if (item.dropdown) {
-                    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                       DrawerAccordion,
                       {
                         item,
@@ -3004,7 +3103,7 @@ var Navbar = ({
                       item.label
                     );
                   }
-                  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                     "a",
                     {
                       href: item.href,
@@ -3013,30 +3112,30 @@ var Navbar = ({
                       rel: item.external ? "noopener noreferrer" : void 0,
                       children: [
                         item.label,
-                        item.external && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ArrowUpRightIcon, {})
+                        item.external && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ArrowUpRightIcon, {})
                       ]
                     },
                     item.label
                   );
                 }),
-                languageLabel && !hasLangDropdown && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("button", { className: "navbar__drawer-lang", onClick: onLanguageClick, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GlobeIcon, { className: "navbar__lang-globe" }),
+                languageLabel && !hasLangDropdown && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("button", { className: "navbar__drawer-lang", onClick: onLanguageClick, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(GlobeIcon, { className: "navbar__lang-globe" }),
                   languageLabel
                 ] }),
-                languageLabel && hasLangDropdown && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+                languageLabel && hasLangDropdown && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                   "button",
                   {
                     className: "navbar__drawer-lang",
                     onClick: () => setMobileLangOpen(true),
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GlobeIcon, { className: "navbar__lang-globe" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(GlobeIcon, { className: "navbar__lang-globe" }),
                       languageLabel
                     ]
                   }
                 )
               ] }),
-              !mobileLangOpen && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "navbar__drawer-footer", children: [
-                loginHref && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: loginHref, style: { display: "block" }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              !mobileLangOpen && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "navbar__drawer-footer", children: [
+                loginHref && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("a", { href: loginHref, style: { display: "block" }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                   Button,
                   {
                     colorScheme: "black",
@@ -3045,7 +3144,7 @@ var Navbar = ({
                     fullWidth: true
                   }
                 ) }),
-                ctaHref && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: ctaHref, style: { display: "block" }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                ctaHref && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("a", { href: ctaHref, style: { display: "block" }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                   Button,
                   {
                     colorScheme: "coral",
@@ -3055,7 +3154,7 @@ var Navbar = ({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_framer_motion2.AnimatePresence, { children: hasLangDropdown && mobileLangOpen && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_framer_motion2.AnimatePresence, { children: hasLangDropdown && mobileLangOpen && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                 import_framer_motion2.motion.div,
                 {
                   className: "navbar__drawer-lang-panel",
@@ -3064,16 +3163,16 @@ var Navbar = ({
                   exit: { y: "100%" },
                   transition: { duration: 0.25, ease: EASE_OUT_EXPO },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                       "button",
                       {
                         className: "navbar__drawer-lang-back",
                         onClick: () => setMobileLangOpen(false),
                         "aria-label": "Back to menu",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChevronLeftIcon, {})
+                        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChevronLeftIcon, {})
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "navbar__drawer-lang-grid", children: languageItems.map((lang) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "navbar__drawer-lang-grid", children: languageItems.map((lang) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                       "button",
                       {
                         className: [
@@ -3097,9 +3196,9 @@ var Navbar = ({
 };
 
 // templates/DayNightTransition/DayNightTransition.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_framer_motion3 = require("framer-motion");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var SPRING2 = { stiffness: 80, damping: 30, restDelta: 1e-3 };
 var FADE_START = 0.35;
 var FADE_END = 0.65;
@@ -3110,16 +3209,16 @@ var TEXT_CHANNEL_NIGHT = 255;
 var DayNightTransition = ({
   dayImageUrl,
   nightImageUrl,
-  dayHeadline = "Trade all day",
-  nightHeadline = "Trade all night",
-  dayDescription,
-  nightDescription,
+  dayHeadline = "Medium length section title goes here",
+  nightHeadline = "Medium length section title goes here",
+  dayDescription = "Description goes here. Description goes here. Description goes here.",
+  nightDescription = "Description goes here. Description goes here. Description goes here.",
   ctaLabel = "Get started",
   ctaHref = "#",
   className,
   ...props
 }) => {
-  const wrapperRef = (0, import_react14.useRef)(null);
+  const wrapperRef = (0, import_react15.useRef)(null);
   const { scrollYProgress } = (0, import_framer_motion3.useScroll)({
     target: wrapperRef,
     offset: ["start end", "end start"]
@@ -3131,14 +3230,14 @@ var DayNightTransition = ({
   const dayOpacity = (0, import_framer_motion3.useTransform)(smooth, [WORD_START, WORD_END], [1, 0]);
   const nightOpacity2 = (0, import_framer_motion3.useTransform)(smooth, [WORD_START, WORD_END], [0, 1]);
   const hasDescription = Boolean(dayDescription || nightDescription);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       ref: wrapperRef,
       className: ["dnt", className].filter(Boolean).join(" "),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "dnt__sticky", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "dnt__sticky", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "img",
           {
             className: "dnt__bg dnt__bg--day",
@@ -3148,7 +3247,7 @@ var DayNightTransition = ({
             draggable: false
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           import_framer_motion3.motion.img,
           {
             className: "dnt__bg dnt__bg--night",
@@ -3159,14 +3258,14 @@ var DayNightTransition = ({
             style: { opacity: nightOpacity }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "dnt__content", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "dnt__content", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "dnt__inner", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           import_framer_motion3.motion.div,
           {
             className: "dnt__text-wrap",
             style: { color: textColor },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   import_framer_motion3.motion.h2,
                   {
                     className: "dnt__headline",
@@ -3174,7 +3273,7 @@ var DayNightTransition = ({
                     children: dayHeadline
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   import_framer_motion3.motion.h2,
                   {
                     className: "dnt__headline",
@@ -3184,8 +3283,8 @@ var DayNightTransition = ({
                   }
                 )
               ] }),
-              hasDescription && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              hasDescription && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   import_framer_motion3.motion.p,
                   {
                     className: "dnt__description",
@@ -3193,7 +3292,7 @@ var DayNightTransition = ({
                     children: dayDescription ?? ""
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   import_framer_motion3.motion.p,
                   {
                     className: "dnt__description",
@@ -3203,19 +3302,19 @@ var DayNightTransition = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("a", { href: ctaHref, className: "dnt__btn", children: ctaLabel })
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("a", { href: ctaHref, className: "dnt__btn", children: ctaLabel })
             ]
           }
-        ) })
+        ) }) })
       ] })
     }
   );
 };
 
 // templates/LogoMarquee/LogoMarquee.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_framer_motion4 = require("framer-motion");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function modWrap(min, max, v) {
   const range = max - min;
   return ((v - min) % range + range) % range + min;
@@ -3272,8 +3371,8 @@ var LogoMarquee = ({
   const scrollVelocity = (0, import_framer_motion4.useVelocity)(scrollY);
   const col1Y = (0, import_framer_motion4.useMotionValue)(0);
   const col2Y = (0, import_framer_motion4.useMotionValue)(0);
-  const col1Ref = (0, import_react15.useRef)(null);
-  const col2Ref = (0, import_react15.useRef)(null);
+  const col1Ref = (0, import_react16.useRef)(null);
+  const col2Ref = (0, import_react16.useRef)(null);
   (0, import_framer_motion4.useAnimationFrame)((_, delta) => {
     const raw = scrollVelocity.get();
     if (Math.abs(raw) < DEADZONE) return;
@@ -3286,21 +3385,21 @@ var LogoMarquee = ({
   });
   const track1 = [...col1Logos, ...col1Logos];
   const track2 = [...col2Logos, ...col2Logos];
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "section",
     {
       className: ["lm", className].filter(Boolean).join(" "),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "lm__inner", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "lm__media", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "lm__carousel", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "lm__fade lm__fade--top", "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "lm__inner", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "lm__media", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "lm__carousel", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "lm__fade lm__fade--top", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             import_framer_motion4.motion.div,
             {
               ref: col1Ref,
               className: "lm__col",
               style: { y: col1Y },
-              children: track1.map((logo, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "lm__card", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "lm__card-img-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              children: track1.map((logo, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "lm__card", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "lm__card-img-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 "img",
                 {
                   src: logo.url,
@@ -3311,13 +3410,13 @@ var LogoMarquee = ({
               ) }) }, `c1-${i}`))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             import_framer_motion4.motion.div,
             {
               ref: col2Ref,
               className: "lm__col",
               style: { y: col2Y },
-              children: track2.map((logo, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "lm__card", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "lm__card-img-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              children: track2.map((logo, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "lm__card", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "lm__card-img-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 "img",
                 {
                   src: logo.url,
@@ -3328,17 +3427,17 @@ var LogoMarquee = ({
               ) }) }, `c2-${i}`))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "lm__fade lm__fade--bottom", "aria-hidden": "true" })
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "lm__fade lm__fade--bottom", "aria-hidden": "true" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "lm__content", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h2", { className: "lm__headline", children: headline }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "lm__text-group", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "lm__body", children: body }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "lm__disclaimer", children: disclaimer })
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "lm__content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h2", { className: "lm__headline", children: headline }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "lm__text-group", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "lm__body", children: body }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "lm__disclaimer", children: disclaimer })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("a", { href: ctaHref, className: "lm__link", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("a", { href: ctaHref, className: "lm__link", children: [
             ctaLabel,
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "lm__link-icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M3 8H13M13 8L9 4M13 8L9 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "lm__link-icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { d: "M3 8H13M13 8L9 4M13 8L9 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
           ] })
         ] })
       ] })
@@ -3389,7 +3488,7 @@ var appstore_linux_dark_default = "./appstore-linux-dark-RVH7CBM4.svg";
 var appstore_browser_dark_default = "./appstore-browser-dark-2E6TK6JH.svg";
 
 // primitives/DownloadBadge/DownloadBadge.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var BADGE_ASSETS = {
   light: {
     googleplay: { src: appstore_googleplay_light_default, alt: "Get it on Google Play" },
@@ -3418,7 +3517,7 @@ var DownloadBadge = ({
   ...props
 }) => {
   const { src, alt } = BADGE_ASSETS[colorScheme][platform];
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "a",
     {
       className: [
@@ -3431,13 +3530,13 @@ var DownloadBadge = ({
       target: "_blank",
       rel: "noopener noreferrer",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("img", { className: "download-badge__img", src, alt })
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("img", { className: "download-badge__img", src, alt })
     }
   );
 };
 
 // templates/Steps/Steps.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var Steps = ({
   title,
   steps,
@@ -3449,8 +3548,8 @@ var Steps = ({
     "steps__container",
     imagePosition === "right" ? "steps__container--image-right" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("section", { className: "steps", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: containerClass, children: [
-    image && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "steps__image-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("section", { className: "steps", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: containerClass, children: [
+    image && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "steps__image-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "img",
       {
         src: image,
@@ -3458,13 +3557,13 @@ var Steps = ({
         className: "steps__image"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "steps__content", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { className: "steps__title", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ol", { className: "steps__list", children: steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { className: "steps__item", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "steps__item-inner", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "steps__number", "aria-hidden": "true", children: index + 1 }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "steps__item-body", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "steps__item-title", children: step.title }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "steps__item-description", children: step.description })
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "steps__content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h2", { className: "steps__title", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("ol", { className: "steps__list", children: steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("li", { className: "steps__item", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "steps__item-inner", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "steps__number", "aria-hidden": "true", children: index + 1 }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "steps__item-body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h3", { className: "steps__item-title", children: step.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "steps__item-description", children: step.description })
         ] })
       ] }) }, index)) })
     ] })
@@ -3472,7 +3571,7 @@ var Steps = ({
 };
 
 // templates/DownloadBanner/DownloadBanner.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var DownloadBanner = ({
   style = "light-2",
   qrCodeImage,
@@ -3497,9 +3596,9 @@ var DownloadBanner = ({
   disclaimer
 }) => {
   const colorScheme = style === "dark" ? "dark" : "light";
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("section", { className: `db-section db-section--${style}`, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "db-container", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "db-card", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "db-qr-block", children: [
-      qrCodeImage && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("section", { className: `db-section db-section--${style}`, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "db-container", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "db-card", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "db-qr-block", children: [
+      qrCodeImage && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "img",
         {
           className: "db-qr-image",
@@ -3507,21 +3606,21 @@ var DownloadBanner = ({
           alt: qrCodeAlt
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "db-qr-text", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "db-qr-text__title db-qr-text__title--desktop", children: qrTitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h2", { className: "db-qr-text__subtitle db-qr-text__subtitle--desktop", children: qrSubtitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "db-qr-text__title db-qr-text__title--mobile", children: mobileTitle }),
-        disclaimer && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "db-disclaimer", children: disclaimer })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "db-qr-text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "db-qr-text__title db-qr-text__title--desktop", children: qrTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h2", { className: "db-qr-text__subtitle db-qr-text__subtitle--desktop", children: qrSubtitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "db-qr-text__title db-qr-text__title--mobile", children: mobileTitle }),
+        disclaimer && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "db-disclaimer", children: disclaimer })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "db-badges", children: [
-      showGooglePlay && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DownloadBadge, { platform: "googleplay", colorScheme, href: googlePlayHref }),
-      showAppGallery && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DownloadBadge, { platform: "appgallery", colorScheme, href: appGalleryHref }),
-      showMacOS && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DownloadBadge, { platform: "macos", colorScheme, href: macOSHref }),
-      showWindows && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DownloadBadge, { platform: "windows", colorScheme, href: windowsHref }),
-      showLinux && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DownloadBadge, { platform: "linux", colorScheme, href: linuxHref }),
-      showAppStore && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DownloadBadge, { platform: "appstore", colorScheme, href: appStoreHref }),
-      showWeb && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DownloadBadge, { platform: "web", colorScheme, href: webHref })
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "db-badges", children: [
+      showGooglePlay && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DownloadBadge, { platform: "googleplay", colorScheme, href: googlePlayHref }),
+      showAppGallery && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DownloadBadge, { platform: "appgallery", colorScheme, href: appGalleryHref }),
+      showMacOS && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DownloadBadge, { platform: "macos", colorScheme, href: macOSHref }),
+      showWindows && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DownloadBadge, { platform: "windows", colorScheme, href: windowsHref }),
+      showLinux && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DownloadBadge, { platform: "linux", colorScheme, href: linuxHref }),
+      showAppStore && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DownloadBadge, { platform: "appstore", colorScheme, href: appStoreHref }),
+      showWeb && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DownloadBadge, { platform: "web", colorScheme, href: webHref })
     ] })
   ] }) }) });
 };
@@ -3539,19 +3638,20 @@ var DownloadBanner = ({
   Chip,
   ChipDropdown,
   DayNightTransition,
+  DotLottieInView,
   DownloadBadge,
   DownloadBanner,
+  FEATURE_SCROLL_DATA,
   FeatureCards,
   FeatureCardsSecondary,
+  FeatureScroll,
   Footer,
   Hero,
   Link,
   LogoMarquee,
   Navbar,
   Pagination,
-  SCROLLYTELLING_DATA,
   STEPS_DATA,
-  Scrollytelling,
   SearchField,
   Stats,
   Steps,