@deriv-web-design/ui 0.0.12 → 0.0.14

package/dist/index.mjs

@@ -1030,10 +1030,50 @@ var FeatureCards = ({
   ] }) });
 };
 
+// templates/FeatureCardsSecondary/FeatureCardsSecondary.tsx
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+var FeatureCardsSecondary = ({
+  sectionTitle,
+  sectionDescription,
+  showLink = false,
+  linkText = "Learn more",
+  onLinkClick,
+  cards
+}) => {
+  return /* @__PURE__ */ jsx17("section", { className: "fcs-section", children: /* @__PURE__ */ jsxs16("div", { className: "fcs-container", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "fcs-header", children: [
+      /* @__PURE__ */ jsx17("h2", { className: "fcs-sectionTitle", children: sectionTitle }),
+      sectionDescription && /* @__PURE__ */ jsx17("p", { className: "fcs-sectionDescription", children: sectionDescription }),
+      showLink && /* @__PURE__ */ jsx17(
+        Link,
+        {
+          colorScheme: "coral",
+          label: linkText,
+          onClick: onLinkClick
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx17("div", { className: `fcs-grid fcs-grid--${cards.length === 4 ? "4" : "3"}`, children: cards.map((card, index) => /* @__PURE__ */ jsx17(
+      Card,
+      {
+        variant: "secondary",
+        title: card.title,
+        description: card.description,
+        icon: card.icon,
+        showIcon: card.showIcon,
+        showLink: card.showLink,
+        linkText: card.linkText,
+        onLinkClick: card.onLinkClick
+      },
+      index
+    )) })
+  ] }) });
+};
+
 // components/Footer/Footer.tsx
 import { useState as useState5 } from "react";
-import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
-var ExternalLinkIcon = () => /* @__PURE__ */ jsx17(
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+var ExternalLinkIcon = () => /* @__PURE__ */ jsx18(
   "svg",
   {
     width: "12",
@@ -1042,7 +1082,7 @@ var ExternalLinkIcon = () => /* @__PURE__ */ jsx17(
     fill: "none",
     "aria-hidden": "true",
     focusable: "false",
-    children: /* @__PURE__ */ jsx17(
+    children: /* @__PURE__ */ jsx18(
       "path",
       {
         d: "M2 2H10M10 2V10M10 2L2 10",
@@ -1054,7 +1094,7 @@ var ExternalLinkIcon = () => /* @__PURE__ */ jsx17(
     )
   }
 );
-var ChevronDownIcon2 = () => /* @__PURE__ */ jsx17(
+var ChevronDownIcon2 = () => /* @__PURE__ */ jsx18(
   "svg",
   {
     width: "12",
@@ -1063,7 +1103,7 @@ var ChevronDownIcon2 = () => /* @__PURE__ */ jsx17(
     fill: "none",
     "aria-hidden": "true",
     focusable: "false",
-    children: /* @__PURE__ */ jsx17(
+    children: /* @__PURE__ */ jsx18(
       "path",
       {
         d: "M2 4L6 8L10 4",
@@ -1080,9 +1120,9 @@ var DerivGoBadges = ({
   appStoreBadge,
   huaweiBadge,
   availabilityNote
-}) => /* @__PURE__ */ jsxs16(Fragment2, { children: [
-  /* @__PURE__ */ jsxs16("div", { className: "footer__app-badges", children: [
-    googlePlayBadge && /* @__PURE__ */ jsx17(
+}) => /* @__PURE__ */ jsxs17(Fragment2, { children: [
+  /* @__PURE__ */ jsxs17("div", { className: "footer__app-badges", children: [
+    googlePlayBadge && /* @__PURE__ */ jsx18(
       "a",
       {
         href: googlePlayBadge.href,
@@ -1090,10 +1130,10 @@ var DerivGoBadges = ({
         "aria-label": googlePlayBadge.imageAlt,
         target: "_blank",
         rel: "noopener noreferrer",
-        children: googlePlayBadge.icon ?? /* @__PURE__ */ jsx17("img", { src: googlePlayBadge.imageSrc, alt: googlePlayBadge.imageAlt })
+        children: googlePlayBadge.icon ?? /* @__PURE__ */ jsx18("img", { src: googlePlayBadge.imageSrc, alt: googlePlayBadge.imageAlt })
       }
     ),
-    appStoreBadge && /* @__PURE__ */ jsx17(
+    appStoreBadge && /* @__PURE__ */ jsx18(
       "a",
       {
         href: appStoreBadge.href,
@@ -1101,10 +1141,10 @@ var DerivGoBadges = ({
         "aria-label": appStoreBadge.imageAlt,
         target: "_blank",
         rel: "noopener noreferrer",
-        children: appStoreBadge.icon ?? /* @__PURE__ */ jsx17("img", { src: appStoreBadge.imageSrc, alt: appStoreBadge.imageAlt })
+        children: appStoreBadge.icon ?? /* @__PURE__ */ jsx18("img", { src: appStoreBadge.imageSrc, alt: appStoreBadge.imageAlt })
       }
     ),
-    huaweiBadge && /* @__PURE__ */ jsx17(
+    huaweiBadge && /* @__PURE__ */ jsx18(
       "a",
       {
         href: huaweiBadge.href,
@@ -1112,13 +1152,13 @@ var DerivGoBadges = ({
         "aria-label": huaweiBadge.imageAlt,
         target: "_blank",
         rel: "noopener noreferrer",
-        children: huaweiBadge.icon ?? /* @__PURE__ */ jsx17("img", { src: huaweiBadge.imageSrc, alt: huaweiBadge.imageAlt })
+        children: huaweiBadge.icon ?? /* @__PURE__ */ jsx18("img", { src: huaweiBadge.imageSrc, alt: huaweiBadge.imageAlt })
       }
     )
   ] }),
-  availabilityNote && /* @__PURE__ */ jsx17("p", { className: "footer__app-note", children: availabilityNote })
+  availabilityNote && /* @__PURE__ */ jsx18("p", { className: "footer__app-note", children: availabilityNote })
 ] });
-var NavLink = ({ label, href, isExternal, onClick }) => /* @__PURE__ */ jsxs16(
+var NavLink = ({ label, href, isExternal, onClick }) => /* @__PURE__ */ jsxs17(
   "a",
   {
     href,
@@ -1127,7 +1167,7 @@ var NavLink = ({ label, href, isExternal, onClick }) => /* @__PURE__ */ jsxs16(
     ...isExternal ? { target: "_blank", rel: "noopener noreferrer" } : {},
     children: [
       label,
-      isExternal && /* @__PURE__ */ jsx17(ExternalLinkIcon, {})
+      isExternal && /* @__PURE__ */ jsx18(ExternalLinkIcon, {})
     ]
   }
 );
@@ -1159,14 +1199,14 @@ var Footer = ({
     });
   };
   const aiLabel = aiSummary?.label ?? "Ask AI for a summary of Deriv";
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "footer",
     {
       className: ["footer", className].filter(Boolean).join(" "),
       ...props,
-      children: /* @__PURE__ */ jsxs16("div", { className: "footer__inner", children: [
-        /* @__PURE__ */ jsxs16("div", { className: "footer__header", children: [
-          /* @__PURE__ */ jsx17("div", { className: "footer__logo-wrapper", children: /* @__PURE__ */ jsx17(
+      children: /* @__PURE__ */ jsxs17("div", { className: "footer__inner", children: [
+        /* @__PURE__ */ jsxs17("div", { className: "footer__header", children: [
+          /* @__PURE__ */ jsx18("div", { className: "footer__logo-wrapper", children: /* @__PURE__ */ jsx18(
             "img",
             {
               src: logoSrc,
@@ -1174,21 +1214,21 @@ var Footer = ({
               className: "footer__logo"
             }
           ) }),
-          aiSummary && /* @__PURE__ */ jsxs16("div", { className: "footer__ai-bar footer__ai-bar--inline", children: [
-            /* @__PURE__ */ jsx17("span", { className: "footer__ai-bar-label", children: aiLabel }),
-            /* @__PURE__ */ jsx17("div", { className: "footer__ai-bar-icons", children: aiSummary.items.map((item, i) => /* @__PURE__ */ jsx17(
+          aiSummary && /* @__PURE__ */ jsxs17("div", { className: "footer__ai-bar footer__ai-bar--inline", children: [
+            /* @__PURE__ */ jsx18("span", { className: "footer__ai-bar-label", children: aiLabel }),
+            /* @__PURE__ */ jsx18("div", { className: "footer__ai-bar-icons", children: aiSummary.items.map((item, i) => /* @__PURE__ */ jsx18(
               "a",
               {
                 href: item.href,
                 "aria-label": item.imageAlt,
                 target: "_blank",
                 rel: "noopener noreferrer",
-                children: /* @__PURE__ */ jsx17("img", { className: "footer__ai-icon", src: item.imageSrc, alt: item.imageAlt })
+                children: /* @__PURE__ */ jsx18("img", { className: "footer__ai-icon", src: item.imageSrc, alt: item.imageAlt })
               },
               i
             )) })
           ] }),
-          /* @__PURE__ */ jsx17("div", { className: "footer__social footer__social--in-header", children: socialLinks.map((link, i) => /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18("div", { className: "footer__social footer__social--in-header", children: socialLinks.map((link, i) => /* @__PURE__ */ jsx18(
             "a",
             {
               href: link.href,
@@ -1201,27 +1241,27 @@ var Footer = ({
             i
           )) })
         ] }),
-        aiSummary && /* @__PURE__ */ jsx17("div", { className: "footer__ai-section", children: /* @__PURE__ */ jsxs16("div", { className: "footer__ai-bar footer__ai-bar--block", children: [
-          /* @__PURE__ */ jsx17("span", { className: "footer__ai-bar-label", children: aiLabel }),
-          /* @__PURE__ */ jsx17("div", { className: "footer__ai-bar-icons", children: aiSummary.items.map((item, i) => /* @__PURE__ */ jsx17(
+        aiSummary && /* @__PURE__ */ jsx18("div", { className: "footer__ai-section", children: /* @__PURE__ */ jsxs17("div", { className: "footer__ai-bar footer__ai-bar--block", children: [
+          /* @__PURE__ */ jsx18("span", { className: "footer__ai-bar-label", children: aiLabel }),
+          /* @__PURE__ */ jsx18("div", { className: "footer__ai-bar-icons", children: aiSummary.items.map((item, i) => /* @__PURE__ */ jsx18(
             "a",
             {
               href: item.href,
               "aria-label": item.imageAlt,
               target: "_blank",
               rel: "noopener noreferrer",
-              children: /* @__PURE__ */ jsx17("img", { className: "footer__ai-icon", src: item.imageSrc, alt: item.imageAlt })
+              children: /* @__PURE__ */ jsx18("img", { className: "footer__ai-icon", src: item.imageSrc, alt: item.imageAlt })
             },
             i
           )) })
         ] }) }),
-        /* @__PURE__ */ jsxs16("div", { className: "footer__nav footer__nav--columns", children: [
-          navColumns.map((column, colIdx) => /* @__PURE__ */ jsx17("div", { className: "footer__column", children: column.map((section, secIdx) => /* @__PURE__ */ jsxs16("div", { className: "footer__nav-section", children: [
-            /* @__PURE__ */ jsx17("p", { className: "footer__nav-title", children: section.title }),
-            /* @__PURE__ */ jsx17("ul", { className: "footer__nav-links", children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx17("li", { children: /* @__PURE__ */ jsx17(NavLink, { ...link }) }, linkIdx)) })
+        /* @__PURE__ */ jsxs17("div", { className: "footer__nav footer__nav--columns", children: [
+          navColumns.map((column, colIdx) => /* @__PURE__ */ jsx18("div", { className: "footer__column", children: column.map((section, secIdx) => /* @__PURE__ */ jsxs17("div", { className: "footer__nav-section", children: [
+            /* @__PURE__ */ jsx18("p", { className: "footer__nav-title", children: section.title }),
+            /* @__PURE__ */ jsx18("ul", { className: "footer__nav-links", children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx18("li", { children: /* @__PURE__ */ jsx18(NavLink, { ...link }) }, linkIdx)) })
           ] }, secIdx)) }, colIdx)),
-          /* @__PURE__ */ jsxs16("div", { className: "footer__sidebar", children: [
-            investorsInPeopleSrc && /* @__PURE__ */ jsx17("div", { className: "footer__investors-card", children: /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsxs17("div", { className: "footer__sidebar", children: [
+            investorsInPeopleSrc && /* @__PURE__ */ jsx18("div", { className: "footer__investors-card", children: /* @__PURE__ */ jsx18(
               "img",
               {
                 src: investorsInPeopleSrc,
@@ -1229,9 +1269,9 @@ var Footer = ({
                 className: "footer__investors-img"
               }
             ) }),
-            derivGo && /* @__PURE__ */ jsxs16("div", { className: "footer__deriv-go-card", children: [
-              /* @__PURE__ */ jsxs16("div", { className: "footer__deriv-go-header", children: [
-                /* @__PURE__ */ jsx17(
+            derivGo && /* @__PURE__ */ jsxs17("div", { className: "footer__deriv-go-card", children: [
+              /* @__PURE__ */ jsxs17("div", { className: "footer__deriv-go-header", children: [
+                /* @__PURE__ */ jsx18(
                   "img",
                   {
                     src: derivGo.logoSrc,
@@ -1239,11 +1279,11 @@ var Footer = ({
                     className: "footer__deriv-go-logo"
                   }
                 ),
-                /* @__PURE__ */ jsx17("span", { className: "footer__deriv-go-title", children: derivGo.title ?? "Deriv GO" })
+                /* @__PURE__ */ jsx18("span", { className: "footer__deriv-go-title", children: derivGo.title ?? "Deriv GO" })
               ] }),
-              /* @__PURE__ */ jsx17("p", { className: "footer__deriv-go-desc", children: derivGo.description ?? "Trade multipliers on our mobile app." }),
-              (derivGo.qrCodeSrc || derivGo.qrCodeIcon) && /* @__PURE__ */ jsxs16("div", { className: "footer__deriv-go-qr", children: [
-                derivGo.qrCodeIcon ? /* @__PURE__ */ jsx17("div", { className: "footer__deriv-go-qr-icon", children: derivGo.qrCodeIcon }) : /* @__PURE__ */ jsx17(
+              /* @__PURE__ */ jsx18("p", { className: "footer__deriv-go-desc", children: derivGo.description ?? "Trade multipliers on our mobile app." }),
+              (derivGo.qrCodeSrc || derivGo.qrCodeIcon) && /* @__PURE__ */ jsxs17("div", { className: "footer__deriv-go-qr", children: [
+                derivGo.qrCodeIcon ? /* @__PURE__ */ jsx18("div", { className: "footer__deriv-go-qr-icon", children: derivGo.qrCodeIcon }) : /* @__PURE__ */ jsx18(
                   "img",
                   {
                     src: derivGo.qrCodeSrc,
@@ -1251,9 +1291,9 @@ var Footer = ({
                     className: "footer__deriv-go-qr-img"
                   }
                 ),
-                /* @__PURE__ */ jsx17("span", { className: "footer__deriv-go-qr-label", children: derivGo.scanToDownloadLabel ?? "Scan to download" })
+                /* @__PURE__ */ jsx18("span", { className: "footer__deriv-go-qr-label", children: derivGo.scanToDownloadLabel ?? "Scan to download" })
               ] }),
-              /* @__PURE__ */ jsx17(
+              /* @__PURE__ */ jsx18(
                 DerivGoBadges,
                 {
                   googlePlayBadge: derivGo.googlePlayBadge,
@@ -1265,9 +1305,9 @@ var Footer = ({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx17("div", { className: "footer__nav footer__nav--accordion", children: allSections.map((section, idx) => {
+        /* @__PURE__ */ jsx18("div", { className: "footer__nav footer__nav--accordion", children: allSections.map((section, idx) => {
           const isOpen = openSections.has(idx);
-          return /* @__PURE__ */ jsxs16(
+          return /* @__PURE__ */ jsxs17(
             "div",
             {
               className: [
@@ -1275,7 +1315,7 @@ var Footer = ({
                 isOpen && "footer__accordion-item--open"
               ].filter(Boolean).join(" "),
               children: [
-                /* @__PURE__ */ jsxs16(
+                /* @__PURE__ */ jsxs17(
                   "button",
                   {
                     type: "button",
@@ -1283,18 +1323,18 @@ var Footer = ({
                     onClick: () => toggleSection(idx),
                     "aria-expanded": isOpen,
                     children: [
-                      /* @__PURE__ */ jsx17("span", { className: "footer__accordion-label", children: section.title }),
-                      /* @__PURE__ */ jsx17("span", { className: "footer__accordion-chevron", children: /* @__PURE__ */ jsx17(ChevronDownIcon2, {}) })
+                      /* @__PURE__ */ jsx18("span", { className: "footer__accordion-label", children: section.title }),
+                      /* @__PURE__ */ jsx18("span", { className: "footer__accordion-chevron", children: /* @__PURE__ */ jsx18(ChevronDownIcon2, {}) })
                     ]
                   }
                 ),
-                isOpen && /* @__PURE__ */ jsx17("ul", { className: "footer__accordion-links", children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx17("li", { children: /* @__PURE__ */ jsx17(NavLink, { ...link }) }, linkIdx)) })
+                isOpen && /* @__PURE__ */ jsx18("ul", { className: "footer__accordion-links", children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx18("li", { children: /* @__PURE__ */ jsx18(NavLink, { ...link }) }, linkIdx)) })
               ]
             },
             idx
           );
         }) }),
-        socialLinks.length > 0 && /* @__PURE__ */ jsx17("div", { className: "footer__social footer__social--standalone", children: socialLinks.map((link, i) => /* @__PURE__ */ jsx17(
+        socialLinks.length > 0 && /* @__PURE__ */ jsx18("div", { className: "footer__social footer__social--standalone", children: socialLinks.map((link, i) => /* @__PURE__ */ jsx18(
           "a",
           {
             href: link.href,
@@ -1306,10 +1346,10 @@ var Footer = ({
           },
           i
         )) }),
-        derivGo && /* @__PURE__ */ jsxs16("div", { className: "footer__deriv-go-banner", children: [
-          /* @__PURE__ */ jsxs16("div", { className: "footer__deriv-go-banner-info", children: [
-            /* @__PURE__ */ jsxs16("div", { className: "footer__deriv-go-header", children: [
-              /* @__PURE__ */ jsx17(
+        derivGo && /* @__PURE__ */ jsxs17("div", { className: "footer__deriv-go-banner", children: [
+          /* @__PURE__ */ jsxs17("div", { className: "footer__deriv-go-banner-info", children: [
+            /* @__PURE__ */ jsxs17("div", { className: "footer__deriv-go-header", children: [
+              /* @__PURE__ */ jsx18(
                 "img",
                 {
                   src: derivGo.logoSrc,
@@ -1317,11 +1357,11 @@ var Footer = ({
                   className: "footer__deriv-go-logo"
                 }
               ),
-              /* @__PURE__ */ jsx17("span", { className: "footer__deriv-go-title", children: derivGo.title ?? "Deriv GO" })
+              /* @__PURE__ */ jsx18("span", { className: "footer__deriv-go-title", children: derivGo.title ?? "Deriv GO" })
             ] }),
-            /* @__PURE__ */ jsx17("p", { className: "footer__deriv-go-desc", children: derivGo.description ?? "Trade multipliers on our mobile app." })
+            /* @__PURE__ */ jsx18("p", { className: "footer__deriv-go-desc", children: derivGo.description ?? "Trade multipliers on our mobile app." })
           ] }),
-          /* @__PURE__ */ jsx17("div", { className: "footer__deriv-go-banner-badges", children: /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18("div", { className: "footer__deriv-go-banner-badges", children: /* @__PURE__ */ jsx18(
             DerivGoBadges,
             {
               googlePlayBadge: derivGo.googlePlayBadge,
@@ -1331,11 +1371,11 @@ var Footer = ({
             }
           ) })
         ] }),
-        (licenseText || riskWarningText) && /* @__PURE__ */ jsxs16("div", { className: "footer__legal-block", children: [
-          licenseText && /* @__PURE__ */ jsx17("div", { className: "footer__license", children: licenseText }),
-          riskWarningText && /* @__PURE__ */ jsx17("div", { className: "footer__risk-warning", children: /* @__PURE__ */ jsx17("p", { className: "footer__risk-warning-text", children: riskWarningText }) })
+        (licenseText || riskWarningText) && /* @__PURE__ */ jsxs17("div", { className: "footer__legal-block", children: [
+          licenseText && /* @__PURE__ */ jsx18("div", { className: "footer__license", children: licenseText }),
+          riskWarningText && /* @__PURE__ */ jsx18("div", { className: "footer__risk-warning", children: /* @__PURE__ */ jsx18("p", { className: "footer__risk-warning-text", children: riskWarningText }) })
         ] }),
-        investorsInPeopleSrc && /* @__PURE__ */ jsx17("div", { className: "footer__investors-stacked", children: /* @__PURE__ */ jsx17(
+        investorsInPeopleSrc && /* @__PURE__ */ jsx18("div", { className: "footer__investors-stacked", children: /* @__PURE__ */ jsx18(
           "img",
           {
             src: investorsInPeopleSrc,
@@ -1349,12 +1389,13 @@ var Footer = ({
 };
 
 // templates/Hero/Hero.tsx
-import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
 var Visual = ({
   src,
   className,
   alt = ""
-}) => /* @__PURE__ */ jsx18("div", { className, children: typeof src === "string" ? /* @__PURE__ */ jsx18("img", { src, alt }) : src });
+}) => /* @__PURE__ */ jsx19("div", { className, children: typeof src === "string" ? /* @__PURE__ */ jsx19("img", { src, alt }) : src });
 var Hero = ({
   variant,
   subtitle,
@@ -1366,17 +1407,52 @@ var Hero = ({
   heroImage,
   leftVisual,
   rightVisual,
+  productImage,
+  floatingImage,
   className,
   ...props
 }) => {
   const variantClass = `hero--${variant}`;
-  const textBlock = /* @__PURE__ */ jsxs17("div", { className: "hero__text", children: [
-    subtitle && /* @__PURE__ */ jsx18("p", { className: "hero__subtitle", children: subtitle }),
-    /* @__PURE__ */ jsx18("p", { className: "hero__title", children: title }),
-    description && /* @__PURE__ */ jsx18("p", { className: "hero__description", children: description })
+  const sectionRef = useRef3(null);
+  const leftRef = useRef3(null);
+  const rightRef = useRef3(null);
+  useEffect3(() => {
+    if (variant !== "visuals") return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const section = sectionRef.current;
+    const leftEl = leftRef.current;
+    const rightEl = rightRef.current;
+    if (!section || !leftEl || !rightEl) return;
+    const STRENGTH = 60;
+    const onScroll = () => {
+      const rect = section.getBoundingClientRect();
+      const viewH = window.innerHeight;
+      const progress = 1 - rect.bottom / (viewH + rect.height);
+      const clamped = Math.max(0, Math.min(1, progress));
+      const offset = (clamped - 0.5) * STRENGTH * 2;
+      leftEl.style.transform = `translateY(${-offset}px)`;
+      rightEl.style.transform = `translateY(${offset}px)`;
+    };
+    const scrollEl = (() => {
+      let el = section.parentElement;
+      while (el && el !== document.documentElement) {
+        const { overflow, overflowY } = getComputedStyle(el);
+        if (/auto|scroll/.test(overflow + overflowY)) return el;
+        el = el.parentElement;
+      }
+      return window;
+    })();
+    scrollEl.addEventListener("scroll", onScroll, { passive: true });
+    onScroll();
+    return () => scrollEl.removeEventListener("scroll", onScroll);
+  }, [variant]);
+  const textBlock = /* @__PURE__ */ jsxs18("div", { className: "hero__text", children: [
+    subtitle && /* @__PURE__ */ jsx19("p", { className: "hero__subtitle", children: subtitle }),
+    /* @__PURE__ */ jsx19("h2", { className: "hero__title", children: title }),
+    description && /* @__PURE__ */ jsx19("p", { className: "hero__description", children: description })
   ] });
-  const buttonBlock = (primaryButton || secondaryButton) && /* @__PURE__ */ jsxs17("div", { className: "hero__buttons", children: [
-    primaryButton && (primaryButton.href ? /* @__PURE__ */ jsx18("a", { href: primaryButton.href, children: /* @__PURE__ */ jsx18(
+  const buttonBlock = (primaryButton || secondaryButton) && /* @__PURE__ */ jsxs18("div", { className: "hero__buttons", children: [
+    primaryButton && (primaryButton.href ? /* @__PURE__ */ jsx19("a", { href: primaryButton.href, children: /* @__PURE__ */ jsx19(
       Button,
       {
         colorScheme: "coral",
@@ -1384,7 +1460,7 @@ var Hero = ({
         label: primaryButton.label,
         onClick: primaryButton.onClick
       }
-    ) }) : /* @__PURE__ */ jsx18(
+    ) }) : /* @__PURE__ */ jsx19(
       Button,
       {
         colorScheme: "coral",
@@ -1393,7 +1469,7 @@ var Hero = ({
         onClick: primaryButton.onClick
       }
     )),
-    secondaryButton && (secondaryButton.href ? /* @__PURE__ */ jsx18("a", { href: secondaryButton.href, children: /* @__PURE__ */ jsx18(
+    secondaryButton && (secondaryButton.href ? /* @__PURE__ */ jsx19("a", { href: secondaryButton.href, children: /* @__PURE__ */ jsx19(
       Button,
       {
         colorScheme: "white",
@@ -1401,7 +1477,7 @@ var Hero = ({
         label: secondaryButton.label,
         onClick: secondaryButton.onClick
       }
-    ) }) : /* @__PURE__ */ jsx18(
+    ) }) : /* @__PURE__ */ jsx19(
       Button,
       {
         colorScheme: "white",
@@ -1411,23 +1487,16 @@ var Hero = ({
       }
     ))
   ] });
-  if (variant === "homepage") {
-    return /* @__PURE__ */ jsxs17(
+  if (variant === "split") {
+    return /* @__PURE__ */ jsxs18(
       "section",
       {
         className: ["hero", variantClass, className].filter(Boolean).join(" "),
+        style: backgroundImageSrc ? { backgroundImage: `url(${backgroundImageSrc})` } : void 0,
         ...props,
         children: [
-          backgroundImageSrc && /* @__PURE__ */ jsx18(
-            "img",
-            {
-              src: backgroundImageSrc,
-              alt: "",
-              className: "hero__bg-image",
-              "aria-hidden": "true"
-            }
-          ),
-          heroImage && /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19("div", { className: "hero__overlay", "aria-hidden": "true" }),
+          heroImage && /* @__PURE__ */ jsx19(
             Visual,
             {
               src: heroImage,
@@ -1435,65 +1504,193 @@ var Hero = ({
               alt: ""
             }
           ),
-          /* @__PURE__ */ jsx18("div", { className: "hero__overlay", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx18("div", { className: "hero__inner", children: /* @__PURE__ */ jsx18("div", { className: "hero__content", children: /* @__PURE__ */ jsx18("div", { className: "hero__left", children: /* @__PURE__ */ jsxs17("div", { className: "hero__body", children: [
-            textBlock,
-            buttonBlock
+          /* @__PURE__ */ jsx19("div", { className: "hero__inner", children: /* @__PURE__ */ jsx19("div", { className: "hero__content", children: /* @__PURE__ */ jsx19("div", { className: "hero__left", children: /* @__PURE__ */ jsxs18("div", { className: "hero__body", children: [
+            /* @__PURE__ */ jsxs18("div", { className: "hero__text", children: [
+              subtitle && /* @__PURE__ */ jsx19("p", { className: "hero__subtitle", children: subtitle }),
+              /* @__PURE__ */ jsx19("h2", { className: "hero__title", children: title }),
+              description && /* @__PURE__ */ jsx19("p", { className: "hero__description", children: description })
+            ] }),
+            (primaryButton || secondaryButton) && /* @__PURE__ */ jsxs18("div", { className: "hero__buttons", children: [
+              primaryButton && (primaryButton.href ? /* @__PURE__ */ jsx19("a", { href: primaryButton.href, children: /* @__PURE__ */ jsx19(
+                Button,
+                {
+                  colorScheme: "coral",
+                  variant: "primary",
+                  label: primaryButton.label,
+                  onClick: primaryButton.onClick
+                }
+              ) }) : /* @__PURE__ */ jsx19(
+                Button,
+                {
+                  colorScheme: "coral",
+                  variant: "primary",
+                  label: primaryButton.label,
+                  onClick: primaryButton.onClick
+                }
+              )),
+              secondaryButton && (secondaryButton.href ? /* @__PURE__ */ jsx19("a", { href: secondaryButton.href, children: /* @__PURE__ */ jsx19(
+                Button,
+                {
+                  colorScheme: "white",
+                  variant: "secondary",
+                  label: secondaryButton.label,
+                  onClick: secondaryButton.onClick
+                }
+              ) }) : /* @__PURE__ */ jsx19(
+                Button,
+                {
+                  colorScheme: "white",
+                  variant: "secondary",
+                  label: secondaryButton.label,
+                  onClick: secondaryButton.onClick
+                }
+              ))
+            ] })
           ] }) }) }) })
         ]
       }
     );
   }
-  if (variant === "full-image") {
-    return /* @__PURE__ */ jsxs17(
+  if (variant === "centered") {
+    return /* @__PURE__ */ jsxs18(
       "section",
       {
         className: ["hero", variantClass, className].filter(Boolean).join(" "),
+        style: backgroundImageSrc ? { backgroundImage: `url(${backgroundImageSrc})` } : void 0,
         ...props,
         children: [
-          backgroundImageSrc && /* @__PURE__ */ jsx18(
-            "img",
-            {
-              src: backgroundImageSrc,
-              alt: "",
-              className: "hero__bg-image",
-              "aria-hidden": "true"
-            }
-          ),
-          /* @__PURE__ */ jsx18("div", { className: "hero__overlay", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx18("div", { className: "hero__inner", children: /* @__PURE__ */ jsx18("div", { className: "hero__content", children: /* @__PURE__ */ jsxs17("div", { className: "hero__body", children: [
-            textBlock,
-            buttonBlock
-          ] }) }) })
+          /* @__PURE__ */ jsx19("div", { className: "hero__overlay", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx19("div", { className: "hero__inner", children: /* @__PURE__ */ jsxs18("div", { className: "hero__content", children: [
+            /* @__PURE__ */ jsxs18("div", { className: "hero__text", children: [
+              subtitle && /* @__PURE__ */ jsx19("p", { className: "hero__subtitle", children: subtitle }),
+              /* @__PURE__ */ jsx19("h2", { className: "hero__title", children: title }),
+              description && /* @__PURE__ */ jsx19("p", { className: "hero__description", children: description })
+            ] }),
+            (primaryButton || secondaryButton) && /* @__PURE__ */ jsxs18("div", { className: "hero__buttons", children: [
+              primaryButton && (primaryButton.href ? /* @__PURE__ */ jsx19("a", { href: primaryButton.href, children: /* @__PURE__ */ jsx19(
+                Button,
+                {
+                  colorScheme: "coral",
+                  variant: "primary",
+                  label: primaryButton.label,
+                  onClick: primaryButton.onClick
+                }
+              ) }) : /* @__PURE__ */ jsx19(
+                Button,
+                {
+                  colorScheme: "coral",
+                  variant: "primary",
+                  label: primaryButton.label,
+                  onClick: primaryButton.onClick
+                }
+              )),
+              secondaryButton && (secondaryButton.href ? /* @__PURE__ */ jsx19("a", { href: secondaryButton.href, children: /* @__PURE__ */ jsx19(
+                Button,
+                {
+                  colorScheme: "white",
+                  variant: "secondary",
+                  label: secondaryButton.label,
+                  onClick: secondaryButton.onClick
+                }
+              ) }) : /* @__PURE__ */ jsx19(
+                Button,
+                {
+                  colorScheme: "white",
+                  variant: "secondary",
+                  label: secondaryButton.label,
+                  onClick: secondaryButton.onClick
+                }
+              ))
+            ] })
+          ] }) })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs17(
+  if (variant === "showcase") {
+    return /* @__PURE__ */ jsxs18(
+      "section",
+      {
+        className: ["hero", variantClass, className].filter(Boolean).join(" "),
+        style: backgroundImageSrc ? { backgroundImage: `url(${backgroundImageSrc})` } : void 0,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx19("div", { className: "hero__overlay", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx19("div", { className: "hero__inner", children: /* @__PURE__ */ jsxs18("div", { className: "hero__content", children: [
+            /* @__PURE__ */ jsxs18("div", { className: "hero__text", children: [
+              subtitle && /* @__PURE__ */ jsx19("p", { className: "hero__subtitle", children: subtitle }),
+              /* @__PURE__ */ jsx19("h2", { className: "hero__title", children: title }),
+              description && /* @__PURE__ */ jsx19("p", { className: "hero__description", children: description })
+            ] }),
+            (primaryButton || secondaryButton) && /* @__PURE__ */ jsxs18("div", { className: "hero__buttons", children: [
+              primaryButton && (primaryButton.href ? /* @__PURE__ */ jsx19("a", { href: primaryButton.href, children: /* @__PURE__ */ jsx19(
+                Button,
+                {
+                  colorScheme: "coral",
+                  variant: "primary",
+                  label: primaryButton.label,
+                  onClick: primaryButton.onClick
+                }
+              ) }) : /* @__PURE__ */ jsx19(
+                Button,
+                {
+                  colorScheme: "coral",
+                  variant: "primary",
+                  label: primaryButton.label,
+                  onClick: primaryButton.onClick
+                }
+              )),
+              secondaryButton && (secondaryButton.href ? /* @__PURE__ */ jsx19("a", { href: secondaryButton.href, children: /* @__PURE__ */ jsx19(
+                Button,
+                {
+                  colorScheme: "white",
+                  variant: "secondary",
+                  label: secondaryButton.label,
+                  onClick: secondaryButton.onClick
+                }
+              ) }) : /* @__PURE__ */ jsx19(
+                Button,
+                {
+                  colorScheme: "white",
+                  variant: "secondary",
+                  label: secondaryButton.label,
+                  onClick: secondaryButton.onClick
+                }
+              ))
+            ] }),
+            productImage && /* @__PURE__ */ jsx19(
+              Visual,
+              {
+                src: productImage,
+                className: "hero__product-image",
+                alt: ""
+              }
+            ),
+            floatingImage && /* @__PURE__ */ jsx19(
+              Visual,
+              {
+                src: floatingImage,
+                className: "hero__floating-image",
+                alt: ""
+              }
+            )
+          ] }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs18(
     "section",
     {
+      ref: sectionRef,
       className: ["hero", variantClass, className].filter(Boolean).join(" "),
       ...props,
       children: [
-        /* @__PURE__ */ jsx18("div", { className: "hero__grid", "aria-hidden": "true" }),
-        variant === "visuals" && leftVisual && /* @__PURE__ */ jsx18(
-          Visual,
-          {
-            src: leftVisual,
-            className: "hero__visual hero__visual--left",
-            alt: ""
-          }
-        ),
-        variant === "visuals" && rightVisual && /* @__PURE__ */ jsx18(
-          Visual,
-          {
-            src: rightVisual,
-            className: "hero__visual hero__visual--right",
-            alt: ""
-          }
-        ),
-        /* @__PURE__ */ jsx18("div", { className: "hero__overlay", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx18("div", { className: "hero__inner", children: /* @__PURE__ */ jsx18("div", { className: "hero__content", children: /* @__PURE__ */ jsxs17("div", { className: "hero__body", children: [
+        /* @__PURE__ */ jsx19("div", { className: "hero__grid", "aria-hidden": "true" }),
+        variant === "visuals" && leftVisual && /* @__PURE__ */ jsx19("div", { ref: leftRef, className: "hero__visual hero__visual--left", children: typeof leftVisual === "string" ? /* @__PURE__ */ jsx19("img", { src: leftVisual, alt: "" }) : leftVisual }),
+        variant === "visuals" && rightVisual && /* @__PURE__ */ jsx19("div", { ref: rightRef, className: "hero__visual hero__visual--right", children: typeof rightVisual === "string" ? /* @__PURE__ */ jsx19("img", { src: rightVisual, alt: "" }) : rightVisual }),
+        /* @__PURE__ */ jsx19("div", { className: "hero__overlay", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx19("div", { className: "hero__inner", children: /* @__PURE__ */ jsx19("div", { className: "hero__content", children: /* @__PURE__ */ jsxs18("div", { className: "hero__body", children: [
           textBlock,
           buttonBlock
         ] }) }) })
@@ -1503,8 +1700,8 @@ var Hero = ({
 };
 
 // templates/Stats/Stats.tsx
-import { useEffect as useEffect3, useRef as useRef3, useState as useState6 } from "react";
-import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState6 } from "react";
+import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
 var INTERVAL_MS = 2e3;
 var TRANSITION = "transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1)";
 function relativePos(index, active, total) {
@@ -1528,7 +1725,7 @@ function getStatStyle(rel) {
     transition: TRANSITION
   };
 }
-var AwardBadge = ({ imageSrc, imageAlt = "" }) => /* @__PURE__ */ jsx19("div", { className: "stats__award", children: /* @__PURE__ */ jsx19("img", { src: imageSrc, alt: imageAlt, className: "stats__award-image" }) });
+var AwardBadge = ({ imageSrc, imageAlt = "" }) => /* @__PURE__ */ jsx20("div", { className: "stats__award", children: /* @__PURE__ */ jsx20("img", { src: imageSrc, alt: imageAlt, className: "stats__award-image" }) });
 var Stats = ({
   title,
   description,
@@ -1539,11 +1736,11 @@ var Stats = ({
   ...props
 }) => {
   const [activeIndex, setActiveIndex] = useState6(0);
-  const intervalRef = useRef3(null);
+  const intervalRef = useRef4(null);
   const hasAwards = leftAwards.length > 0 || rightAwards.length > 0;
   const allAwards = [...leftAwards, ...rightAwards];
   const total = stats.length;
-  useEffect3(() => {
+  useEffect4(() => {
     if (total <= 1) return;
     intervalRef.current = setInterval(() => {
       setActiveIndex((prev) => (prev + 1) % total);
@@ -1552,25 +1749,25 @@ var Stats = ({
       if (intervalRef.current) clearInterval(intervalRef.current);
     };
   }, [total]);
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "section",
     {
       className: ["stats", className].filter(Boolean).join(" "),
       ...props,
-      children: /* @__PURE__ */ jsxs18("div", { className: "stats__inner", children: [
-        /* @__PURE__ */ jsxs18("div", { className: "stats__header", children: [
-          /* @__PURE__ */ jsx19("h2", { className: "stats__title", children: title }),
-          description && /* @__PURE__ */ jsx19("p", { className: "stats__description", children: description })
+      children: /* @__PURE__ */ jsxs19("div", { className: "stats__inner", children: [
+        /* @__PURE__ */ jsxs19("div", { className: "stats__header", children: [
+          /* @__PURE__ */ jsx20("h2", { className: "stats__title", children: title }),
+          description && /* @__PURE__ */ jsx20("p", { className: "stats__description", children: description })
         ] }),
-        /* @__PURE__ */ jsxs18("div", { className: "stats__content", children: [
-          leftAwards.length > 0 && /* @__PURE__ */ jsx19("div", { className: "stats__awards-col stats__awards-col--left", children: leftAwards.map((award, i) => /* @__PURE__ */ jsx19(AwardBadge, { ...award }, i)) }),
-          /* @__PURE__ */ jsx19("div", { className: "stats__card", children: /* @__PURE__ */ jsxs18("div", { className: "stats__card-track", children: [
-            /* @__PURE__ */ jsx19("div", { className: "stats__fade stats__fade--top", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx19("div", { className: "stats__fade stats__fade--bottom", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs19("div", { className: "stats__content", children: [
+          leftAwards.length > 0 && /* @__PURE__ */ jsx20("div", { className: "stats__awards-col stats__awards-col--left", children: leftAwards.map((award, i) => /* @__PURE__ */ jsx20(AwardBadge, { ...award }, i)) }),
+          /* @__PURE__ */ jsx20("div", { className: "stats__card", children: /* @__PURE__ */ jsxs19("div", { className: "stats__card-track", children: [
+            /* @__PURE__ */ jsx20("div", { className: "stats__fade stats__fade--top", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx20("div", { className: "stats__fade stats__fade--bottom", "aria-hidden": "true" }),
             stats.map((stat, i) => {
               const rel = relativePos(i, activeIndex, total);
               const active = rel === 0;
-              return /* @__PURE__ */ jsxs18(
+              return /* @__PURE__ */ jsxs19(
                 "div",
                 {
                   className: [
@@ -1580,16 +1777,16 @@ var Stats = ({
                   style: getStatStyle(rel),
                   "aria-hidden": !active,
                   children: [
-                    /* @__PURE__ */ jsx19("span", { className: "stats__stat-value", children: stat.value }),
-                    /* @__PURE__ */ jsx19("span", { className: "stats__stat-label", children: stat.label })
+                    /* @__PURE__ */ jsx20("span", { className: "stats__stat-value", children: stat.value }),
+                    /* @__PURE__ */ jsx20("span", { className: "stats__stat-label", children: stat.label })
                   ]
                 },
                 i
               );
             })
           ] }) }),
-          rightAwards.length > 0 && /* @__PURE__ */ jsx19("div", { className: "stats__awards-col stats__awards-col--right", children: rightAwards.map((award, i) => /* @__PURE__ */ jsx19(AwardBadge, { ...award }, i)) }),
-          hasAwards && /* @__PURE__ */ jsx19("div", { className: "stats__awards-mobile", children: allAwards.map((award, i) => /* @__PURE__ */ jsx19(AwardBadge, { ...award }, i)) })
+          rightAwards.length > 0 && /* @__PURE__ */ jsx20("div", { className: "stats__awards-col stats__awards-col--right", children: rightAwards.map((award, i) => /* @__PURE__ */ jsx20(AwardBadge, { ...award }, i)) }),
+          hasAwards && /* @__PURE__ */ jsx20("div", { className: "stats__awards-mobile", children: allAwards.map((award, i) => /* @__PURE__ */ jsx20(AwardBadge, { ...award }, i)) })
         ] })
       ] })
     }
@@ -1597,9 +1794,9 @@ var Stats = ({
 };
 
 // templates/Scrollytelling/Scrollytelling.tsx
-import { useEffect as useEffect4, useRef as useRef4, useState as useState7 } from "react";
+import { useEffect as useEffect5, useRef as useRef5, useState as useState7 } from "react";
 import { DotLottieReact } from "@lottiefiles/dotlottie-react";
-import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
 var SCROLLYTELLING_DATA = [
   {
     title: "Forex",
@@ -1644,7 +1841,7 @@ var SCROLLYTELLING_DATA = [
     mediaUrl: "https://cdn.prod.website-files.com/66fbaad381fa6866fa4991f3/675a9064f2c16e4e0732abfb_Stock%20Indices.lottie"
   }
 ];
-var ChevronRight2 = () => /* @__PURE__ */ jsx20(
+var ChevronRight2 = () => /* @__PURE__ */ jsx21(
   "svg",
   {
     className: "scrolly__item-link-icon",
@@ -1653,7 +1850,7 @@ var ChevronRight2 = () => /* @__PURE__ */ jsx20(
     viewBox: "0 0 16 16",
     fill: "none",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx20(
+    children: /* @__PURE__ */ jsx21(
       "path",
       {
         d: "M6 3l5 5-5 5",
@@ -1671,7 +1868,7 @@ function resolveMediaType(item) {
 }
 var MediaRenderer = ({ item, active }) => {
   if (resolveMediaType(item) === "lottie") {
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx21(
       DotLottieReact,
       {
         src: item.mediaUrl,
@@ -1680,7 +1877,7 @@ var MediaRenderer = ({ item, active }) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "img",
     {
       src: item.mediaUrl,
@@ -1697,8 +1894,8 @@ var Scrollytelling = ({
   ...props
 }) => {
   const [activeIndex, setActiveIndex] = useState7(0);
-  const itemRefs = useRef4([]);
-  useEffect4(() => {
+  const itemRefs = useRef5([]);
+  useEffect5(() => {
     const elements = itemRefs.current.filter(Boolean);
     if (!elements.length) return;
     const observer = new IntersectionObserver(
@@ -1729,17 +1926,17 @@ var Scrollytelling = ({
     `scrolly--${variant}`,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx20("section", { className: rootClass, ...props, children: /* @__PURE__ */ jsxs19("div", { className: "scrolly__inner", children: [
-    /* @__PURE__ */ jsx20("h2", { className: "scrolly__header", children: header }),
-    /* @__PURE__ */ jsxs19("div", { className: "scrolly__layout", children: [
-      /* @__PURE__ */ jsx20("div", { className: "scrolly__media-col", "aria-hidden": "true", children: /* @__PURE__ */ jsx20("div", { className: "scrolly__media-wrap", children: items.map((item, i) => /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21("section", { className: rootClass, ...props, children: /* @__PURE__ */ jsxs20("div", { className: "scrolly__inner", children: [
+    /* @__PURE__ */ jsx21("h2", { className: "scrolly__header", children: header }),
+    /* @__PURE__ */ jsxs20("div", { className: "scrolly__layout", children: [
+      /* @__PURE__ */ jsx21("div", { className: "scrolly__media-col", "aria-hidden": "true", children: /* @__PURE__ */ jsx21("div", { className: "scrolly__media-wrap", children: items.map((item, i) => /* @__PURE__ */ jsx21(
         "div",
         {
           className: [
             "scrolly__media-item",
             i === activeIndex ? "scrolly__media-item--active" : ""
           ].filter(Boolean).join(" "),
-          children: /* @__PURE__ */ jsx20(
+          children: /* @__PURE__ */ jsx21(
             MediaRenderer,
             {
               item,
@@ -1749,7 +1946,7 @@ var Scrollytelling = ({
         },
         i
       )) }) }),
-      /* @__PURE__ */ jsx20("div", { className: "scrolly__content-col", children: items.map((item, i) => /* @__PURE__ */ jsxs19(
+      /* @__PURE__ */ jsx21("div", { className: "scrolly__content-col", children: items.map((item, i) => /* @__PURE__ */ jsxs20(
         "div",
         {
           ref: (el) => {
@@ -1760,16 +1957,16 @@ var Scrollytelling = ({
             i === activeIndex ? "scrolly__item--active" : "scrolly__item--inactive"
           ].join(" "),
           children: [
-            /* @__PURE__ */ jsx20("h3", { className: "scrolly__item-title", children: item.title }),
-            /* @__PURE__ */ jsx20("p", { className: "scrolly__item-desc", children: item.description }),
-            /* @__PURE__ */ jsxs19(
+            /* @__PURE__ */ jsx21("h3", { className: "scrolly__item-title", children: item.title }),
+            /* @__PURE__ */ jsx21("p", { className: "scrolly__item-desc", children: item.description }),
+            /* @__PURE__ */ jsxs20(
               "a",
               {
                 href: item.link,
                 className: "scrolly__item-link",
                 children: [
-                  /* @__PURE__ */ jsx20("span", { children: item.linkLabel }),
-                  /* @__PURE__ */ jsx20(ChevronRight2, {})
+                  /* @__PURE__ */ jsx21("span", { children: item.linkLabel }),
+                  /* @__PURE__ */ jsx21(ChevronRight2, {})
                 ]
               }
             )
@@ -1778,45 +1975,46 @@ var Scrollytelling = ({
         i
       )) })
     ] }),
-    /* @__PURE__ */ jsx20("div", { className: "scrolly__mobile-list", children: items.map((item, i) => /* @__PURE__ */ jsxs19("div", { className: "scrolly__mobile-item", children: [
-      /* @__PURE__ */ jsx20("h3", { className: "scrolly__item-title", children: item.title }),
-      /* @__PURE__ */ jsx20("p", { className: "scrolly__item-desc", children: item.description }),
-      /* @__PURE__ */ jsxs19(
+    /* @__PURE__ */ jsx21("div", { className: "scrolly__mobile-list", children: items.map((item, i) => /* @__PURE__ */ jsxs20("div", { className: "scrolly__mobile-item", children: [
+      /* @__PURE__ */ jsx21("h3", { className: "scrolly__item-title", children: item.title }),
+      /* @__PURE__ */ jsx21("p", { className: "scrolly__item-desc", children: item.description }),
+      /* @__PURE__ */ jsxs20(
         "a",
         {
           href: item.link,
           className: "scrolly__item-link",
           children: [
-            /* @__PURE__ */ jsx20("span", { children: "Learn more" }),
-            /* @__PURE__ */ jsx20(ChevronRight2, {})
+            /* @__PURE__ */ jsx21("span", { children: "Learn more" }),
+            /* @__PURE__ */ jsx21(ChevronRight2, {})
           ]
         }
       ),
-      /* @__PURE__ */ jsx20("div", { className: "scrolly__mobile-media", children: /* @__PURE__ */ jsx20(MediaRenderer, { item, active: true }) })
+      /* @__PURE__ */ jsx21("div", { className: "scrolly__mobile-media", children: /* @__PURE__ */ jsx21(MediaRenderer, { item, active: true }) })
     ] }, i)) })
   ] }) });
 };
 
 // templates/StickyStackedCards/StickyStackedCards.tsx
-import { useEffect as useEffect5, useRef as useRef5 } from "react";
-import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
+import { useEffect as useEffect6, useRef as useRef6 } from "react";
+import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+var PLACEHOLDER_IMAGE = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/69b9309379ac08e59ca8210a_1f3f555da9a5cbb13a6fe1bf0d5fe1b6_placeholder-image.webp";
 var STEPS_DATA = [
   {
-    title: "Sign up",
-    description: "Sign up in minutes. Practise with a zero-risk demo account.",
-    imageUrl: "https://cdn.prod.website-files.com/66585fe0e1dc7e70cc75d440/677cfad9dd757e95ee7fb4d9_image%20phone.webp",
+    title: "Title goes here",
+    description: "Explain how this specific feature helps your user.",
+    imageUrl: PLACEHOLDER_IMAGE,
     theme: "light"
   },
   {
-    title: "Deposit",
-    description: "Use your favourite local payment method to fund your account.",
-    imageUrl: "https://cdn.prod.website-files.com/66585fe0e1dc7e70cc75d440/6757df583bf331c84b6c6a61_card-2.webp",
+    title: "Title goes here",
+    description: "Explain how this specific feature helps your user.",
+    imageUrl: PLACEHOLDER_IMAGE,
     theme: "coral"
   },
   {
-    title: "Trade",
-    description: "Start your trading journey.",
-    imageUrl: "https://cdn.prod.website-files.com/66585fe0e1dc7e70cc75d440/6757df583bf331c84b6c6a59_card-3.webp",
+    title: "Title goes here",
+    description: "Explain how this specific feature helps your user.",
+    imageUrl: PLACEHOLDER_IMAGE,
     theme: "dark"
   }
 ];
@@ -1827,8 +2025,8 @@ var StickyStackedCards = ({
   className,
   ...props
 }) => {
-  const cardRefs = useRef5([]);
-  useEffect5(() => {
+  const cardRefs = useRef6([]);
+  useEffect6(() => {
     if (typeof window === "undefined") return;
     let rafId = 0;
     const update = () => {
@@ -1862,14 +2060,14 @@ var StickyStackedCards = ({
       cancelAnimationFrame(rafId);
     };
   }, [items.length]);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "section",
     {
       className: ["ssc", className].filter(Boolean).join(" "),
       ...props,
-      children: /* @__PURE__ */ jsxs20("div", { className: "ssc__inner", children: [
-        /* @__PURE__ */ jsx21("h2", { className: "ssc__header", children: header }),
-        /* @__PURE__ */ jsx21("div", { className: "ssc__track", children: items.map((item, i) => /* @__PURE__ */ jsxs20(
+      children: /* @__PURE__ */ jsxs21("div", { className: "ssc__inner", children: [
+        /* @__PURE__ */ jsx22("h2", { className: "ssc__header", children: header }),
+        /* @__PURE__ */ jsx22("div", { className: "ssc__track", children: items.map((item, i) => /* @__PURE__ */ jsxs21(
           "div",
           {
             ref: (el) => {
@@ -1895,11 +2093,11 @@ var StickyStackedCards = ({
               top: `calc(var(--ssc-sticky-top) + ${i} * var(--ssc-peek-offset))`
             },
             children: [
-              /* @__PURE__ */ jsxs20("div", { className: "ssc__card-content", children: [
-                /* @__PURE__ */ jsx21("h3", { className: "ssc__card-title", children: item.title }),
-                /* @__PURE__ */ jsx21("p", { className: "ssc__card-desc", children: item.description })
+              /* @__PURE__ */ jsxs21("div", { className: "ssc__card-content", children: [
+                /* @__PURE__ */ jsx22("h3", { className: "ssc__card-title", children: item.title }),
+                /* @__PURE__ */ jsx22("p", { className: "ssc__card-desc", children: item.description })
               ] }),
-              /* @__PURE__ */ jsx21("div", { className: "ssc__card-image", children: /* @__PURE__ */ jsx21(
+              /* @__PURE__ */ jsx22("div", { className: "ssc__card-image", children: /* @__PURE__ */ jsx22(
                 "img",
                 {
                   src: item.imageUrl,
@@ -1917,7 +2115,7 @@ var StickyStackedCards = ({
 };
 
 // templates/CTABanner/CTABanner.tsx
-import { useRef as useRef6 } from "react";
+import { useRef as useRef7 } from "react";
 import {
   motion,
   useScroll,
@@ -1925,7 +2123,7 @@ import {
   useTransform,
   useMotionTemplate
 } from "framer-motion";
-import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
 var ENTRANCE = {
   near: 80,
   mid: 130,
@@ -2171,7 +2369,7 @@ var CTABanner = ({
   ...props
 }) => {
   const resolvedAvatars = avatars ?? (variant === "compact" ? COMPACT_AVATAR_DATA : AVATAR_DATA);
-  const sectionRef = useRef6(null);
+  const sectionRef = useRef7(null);
   const { scrollYProgress } = useScroll({
     target: sectionRef,
     offset: ["start end", "end start"]
@@ -2189,14 +2387,14 @@ var CTABanner = ({
   const compactXValues = useCompactAvatarXValues(smooth);
   const avatarYValues = variant === "compact" ? compactYValues : standardYValues;
   const avatarXValues = variant === "compact" ? compactXValues : standardXValues;
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "section",
     {
       ref: sectionRef,
       className: ["ctab", variant === "compact" ? "ctab--compact" : "", className].filter(Boolean).join(" "),
       ...props,
       children: [
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           motion.div,
           {
             className: "ctab__grid",
@@ -2204,7 +2402,7 @@ var CTABanner = ({
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsx22("div", { className: "ctab__inner", children: /* @__PURE__ */ jsxs21("div", { className: "ctab__stage", children: [
+        /* @__PURE__ */ jsx23("div", { className: "ctab__inner", children: /* @__PURE__ */ jsxs22("div", { className: "ctab__stage", children: [
           resolvedAvatars.map((avatar, index) => {
             const posStyle = {};
             if (avatar.desktopPos.left) posStyle["--av-d-left"] = avatar.desktopPos.left;
@@ -2213,7 +2411,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__ */ jsx22(
+            return /* @__PURE__ */ jsx23(
               motion.div,
               {
                 className: [
@@ -2227,7 +2425,7 @@ var CTABanner = ({
                   opacity: avatarOpacity,
                   filter: avatarFilter
                 },
-                children: /* @__PURE__ */ jsx22(
+                children: /* @__PURE__ */ jsx23(
                   "img",
                   {
                     src: avatar.imageUrl,
@@ -2240,14 +2438,14 @@ var CTABanner = ({
               avatar.id
             );
           }),
-          /* @__PURE__ */ jsxs21(
+          /* @__PURE__ */ jsxs22(
             motion.div,
             {
               className: "ctab__hero",
               style: { y: heroY, opacity: heroOpacity },
               children: [
-                /* @__PURE__ */ jsx22("h2", { className: "ctab__headline", children: headline }),
-                /* @__PURE__ */ jsx22("a", { href: ctaHref, children: /* @__PURE__ */ jsx22(Button, { colorScheme: "black", variant: "primary", label: ctaLabel }) })
+                /* @__PURE__ */ jsx23("h2", { className: "ctab__headline", children: headline }),
+                /* @__PURE__ */ jsx23("a", { href: ctaHref, children: /* @__PURE__ */ jsx23(Button, { colorScheme: "black", variant: "primary", label: ctaLabel }) })
               ]
             }
           )
@@ -2258,14 +2456,14 @@ var CTABanner = ({
 };
 
 // components/Navbar/Navbar.tsx
-import { useRef as useRef7, useState as useState8, useEffect as useEffect6, useCallback as useCallback2 } from "react";
+import { useRef as useRef8, useState as useState8, useEffect as useEffect7, useCallback as useCallback2 } from "react";
 import { motion as motion2, AnimatePresence } from "framer-motion";
 
 // assets/icon-globe.svg
 var icon_globe_default = "./icon-globe-S54WYYEK.svg";
 
 // components/Navbar/Navbar.tsx
-import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
 var EASE_OUT_EXPO = [0.16, 1, 0.3, 1];
 var dropdownVariants = {
   hidden: { opacity: 0, scale: 0.96, y: -8 },
@@ -2279,7 +2477,7 @@ var accordionVariants = {
   hidden: { height: 0, opacity: 0 },
   visible: { height: "auto", opacity: 1 }
 };
-var ChevronDownIcon3 = ({ className }) => /* @__PURE__ */ jsx23(
+var ChevronDownIcon3 = ({ className }) => /* @__PURE__ */ jsx24(
   "svg",
   {
     className,
@@ -2288,7 +2486,7 @@ var ChevronDownIcon3 = ({ className }) => /* @__PURE__ */ jsx23(
     viewBox: "0 0 14 14",
     fill: "none",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx23(
+    children: /* @__PURE__ */ jsx24(
       "path",
       {
         d: "M2.625 4.8125L7 9.1875L11.375 4.8125",
@@ -2300,7 +2498,7 @@ var ChevronDownIcon3 = ({ className }) => /* @__PURE__ */ jsx23(
     )
   }
 );
-var ArrowRightIcon = () => /* @__PURE__ */ jsx23("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx23(
+var ArrowRightIcon = () => /* @__PURE__ */ jsx24("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx24(
   "path",
   {
     d: "M2.625 7H11.375M11.375 7L7.875 3.5M11.375 7L7.875 10.5",
@@ -2310,7 +2508,7 @@ var ArrowRightIcon = () => /* @__PURE__ */ jsx23("svg", { width: "14", height: "
     strokeLinejoin: "round"
   }
 ) });
-var ArrowUpRightIcon = () => /* @__PURE__ */ jsx23("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx23(
+var ArrowUpRightIcon = () => /* @__PURE__ */ jsx24("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx24(
   "path",
   {
     d: "M4.5 11.5L11.5 4.5M11.5 4.5H5.5M11.5 4.5V10.5",
@@ -2320,7 +2518,7 @@ var ArrowUpRightIcon = () => /* @__PURE__ */ jsx23("svg", { width: "16", height:
     strokeLinejoin: "round"
   }
 ) });
-var BarsIcon = () => /* @__PURE__ */ jsx23("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx23(
+var BarsIcon = () => /* @__PURE__ */ jsx24("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx24(
   "path",
   {
     d: "M2.5 5H17.5M2.5 10H17.5M2.5 15H17.5",
@@ -2329,7 +2527,7 @@ var BarsIcon = () => /* @__PURE__ */ jsx23("svg", { width: "20", height: "20", v
     strokeLinecap: "round"
   }
 ) });
-var XMarkIcon2 = () => /* @__PURE__ */ jsx23("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx23(
+var XMarkIcon2 = () => /* @__PURE__ */ jsx24("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx24(
   "path",
   {
     d: "M15 5L5 15M5 5L15 15",
@@ -2338,11 +2536,32 @@ var XMarkIcon2 = () => /* @__PURE__ */ jsx23("svg", { width: "20", height: "20",
     strokeLinecap: "round"
   }
 ) });
-var GlobeIcon = ({ className }) => /* @__PURE__ */ jsx23("img", { src: icon_globe_default, alt: "", "aria-hidden": "true", width: "20", height: "20", className });
+var ChevronLeftIcon = ({ className }) => /* @__PURE__ */ jsx24(
+  "svg",
+  {
+    className,
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx24(
+      "path",
+      {
+        d: "M15 18L9 12L15 6",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+var GlobeIcon = ({ className }) => /* @__PURE__ */ jsx24("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__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     motion2.div,
     {
       className: "navbar__dropdown",
@@ -2353,10 +2572,10 @@ var DropdownPanel = ({ item, onMouseEnter, onMouseLeave }) => {
       transition: { duration: 0.18, ease: EASE_OUT_EXPO },
       onMouseEnter,
       onMouseLeave,
-      children: /* @__PURE__ */ jsxs22("div", { className: "navbar__dropdown-inner", children: [
-        /* @__PURE__ */ jsx23("div", { className: "navbar__dropdown-left", children: dropdown.columns.map((col, colIdx) => /* @__PURE__ */ jsx23("div", { className: "navbar__dropdown-col", children: col.sections.map((section) => /* @__PURE__ */ jsxs22("div", { className: "navbar__dropdown-col-list", children: [
-          /* @__PURE__ */ jsx23("p", { className: "navbar__dropdown-col-title", children: section.title }),
-          section.items.map((link) => /* @__PURE__ */ jsxs22(
+      children: /* @__PURE__ */ jsxs23("div", { className: "navbar__dropdown-inner", children: [
+        /* @__PURE__ */ jsx24("div", { className: "navbar__dropdown-left", children: dropdown.columns.map((col, colIdx) => /* @__PURE__ */ jsx24("div", { className: "navbar__dropdown-col", children: col.sections.map((section) => /* @__PURE__ */ jsxs23("div", { className: "navbar__dropdown-col-list", children: [
+          /* @__PURE__ */ jsx24("p", { className: "navbar__dropdown-col-title", children: section.title }),
+          section.items.map((link) => /* @__PURE__ */ jsxs23(
             "a",
             {
               href: link.href,
@@ -2365,24 +2584,24 @@ var DropdownPanel = ({ item, onMouseEnter, onMouseLeave }) => {
               rel: link.external ? "noopener noreferrer" : void 0,
               children: [
                 link.label,
-                link.external ? /* @__PURE__ */ jsx23(ArrowUpRightIcon, {}) : /* @__PURE__ */ jsx23(ArrowRightIcon, {})
+                link.external ? /* @__PURE__ */ jsx24(ArrowUpRightIcon, {}) : /* @__PURE__ */ jsx24(ArrowRightIcon, {})
               ]
             },
             link.href
           ))
         ] }, section.title)) }, colIdx)) }),
-        dropdown.feature && /* @__PURE__ */ jsx23("div", { className: "navbar__dropdown-right", children: /* @__PURE__ */ jsx23(FeatureCard, { feature: dropdown.feature }) })
+        dropdown.feature && /* @__PURE__ */ jsx24("div", { className: "navbar__dropdown-right", children: /* @__PURE__ */ jsx24(FeatureCard, { feature: dropdown.feature }) })
       ] })
     }
   );
 };
-var FeatureCard = ({ feature, mobile }) => /* @__PURE__ */ jsxs22(
+var FeatureCard = ({ feature, mobile }) => /* @__PURE__ */ jsxs23(
   "div",
   {
     className: mobile ? "navbar__drawer-feature" : "navbar__dropdown-feature",
     style: feature.backgroundImageUrl ? { backgroundImage: `url(${feature.backgroundImageUrl})` } : void 0,
     children: [
-      feature.backgroundImageUrl && /* @__PURE__ */ jsx23(
+      feature.backgroundImageUrl && /* @__PURE__ */ jsx24(
         "img",
         {
           src: feature.backgroundImageUrl,
@@ -2391,20 +2610,20 @@ var FeatureCard = ({ feature, mobile }) => /* @__PURE__ */ jsxs22(
           "aria-hidden": "true"
         }
       ),
-      /* @__PURE__ */ jsx23("div", { className: mobile ? "navbar__drawer-feature-overlay" : "navbar__dropdown-feature-overlay", "aria-hidden": "true" }),
-      /* @__PURE__ */ jsxs22("div", { className: mobile ? "navbar__drawer-feature-content" : "navbar__dropdown-feature-content", children: [
-        /* @__PURE__ */ jsxs22("div", { children: [
-          /* @__PURE__ */ jsx23("p", { className: mobile ? "navbar__drawer-feature-title" : "navbar__dropdown-feature-title", children: feature.title }),
-          /* @__PURE__ */ jsx23("p", { className: mobile ? "navbar__drawer-feature-desc" : "navbar__dropdown-feature-desc", children: feature.description })
+      /* @__PURE__ */ jsx24("div", { className: mobile ? "navbar__drawer-feature-overlay" : "navbar__dropdown-feature-overlay", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxs23("div", { className: mobile ? "navbar__drawer-feature-content" : "navbar__dropdown-feature-content", children: [
+        /* @__PURE__ */ jsxs23("div", { children: [
+          /* @__PURE__ */ jsx24("p", { className: mobile ? "navbar__drawer-feature-title" : "navbar__dropdown-feature-title", children: feature.title }),
+          /* @__PURE__ */ jsx24("p", { className: mobile ? "navbar__drawer-feature-desc" : "navbar__dropdown-feature-desc", children: feature.description })
         ] }),
-        /* @__PURE__ */ jsxs22(
+        /* @__PURE__ */ jsxs23(
           "a",
           {
             href: feature.ctaHref,
             className: mobile ? "navbar__drawer-feature-cta" : "navbar__dropdown-feature-cta",
             children: [
               feature.ctaLabel,
-              /* @__PURE__ */ jsx23(ArrowRightIcon, {})
+              /* @__PURE__ */ jsx24(ArrowRightIcon, {})
             ]
           }
         )
@@ -2414,8 +2633,8 @@ var FeatureCard = ({ feature, mobile }) => /* @__PURE__ */ jsxs22(
 );
 var DrawerAccordion = ({ item, isOpen, onToggle }) => {
   const { dropdown } = item;
-  return /* @__PURE__ */ jsxs22("div", { className: "navbar__drawer-item", children: [
-    /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23("div", { className: "navbar__drawer-item", children: [
+    /* @__PURE__ */ jsxs23(
       "button",
       {
         className: `navbar__drawer-trigger ${isOpen ? "navbar__drawer-trigger--open" : ""}`,
@@ -2423,11 +2642,11 @@ var DrawerAccordion = ({ item, isOpen, onToggle }) => {
         "aria-expanded": isOpen,
         children: [
           item.label,
-          /* @__PURE__ */ jsx23(ChevronDownIcon3, { className: "navbar__drawer-trigger__chevron" })
+          /* @__PURE__ */ jsx24(ChevronDownIcon3, { className: "navbar__drawer-trigger__chevron" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx23(AnimatePresence, { initial: false, children: isOpen && dropdown && /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(AnimatePresence, { initial: false, children: isOpen && dropdown && /* @__PURE__ */ jsx24(
       motion2.div,
       {
         className: "navbar__drawer-panel",
@@ -2436,10 +2655,10 @@ var DrawerAccordion = ({ item, isOpen, onToggle }) => {
         animate: "visible",
         exit: "hidden",
         transition: { duration: 0.22, ease: EASE_OUT_EXPO },
-        children: /* @__PURE__ */ jsxs22("div", { className: "navbar__drawer-panel-inner", children: [
-          /* @__PURE__ */ jsx23("div", { className: "navbar__drawer-panel-cols", children: dropdown.columns.map((col, colIdx) => /* @__PURE__ */ jsx23("div", { className: "navbar__drawer-panel-col", children: col.sections.map((section) => /* @__PURE__ */ jsxs22("div", { className: "navbar__drawer-col-section", children: [
-            /* @__PURE__ */ jsx23("p", { className: "navbar__drawer-col-title", children: section.title }),
-            /* @__PURE__ */ jsx23("div", { className: "navbar__drawer-col-links", children: section.items.map((link) => /* @__PURE__ */ jsx23(
+        children: /* @__PURE__ */ jsxs23("div", { className: "navbar__drawer-panel-inner", children: [
+          /* @__PURE__ */ jsx24("div", { className: "navbar__drawer-panel-cols", children: dropdown.columns.map((col, colIdx) => /* @__PURE__ */ jsx24("div", { className: "navbar__drawer-panel-col", children: col.sections.map((section) => /* @__PURE__ */ jsxs23("div", { className: "navbar__drawer-col-section", children: [
+            /* @__PURE__ */ jsx24("p", { className: "navbar__drawer-col-title", children: section.title }),
+            /* @__PURE__ */ jsx24("div", { className: "navbar__drawer-col-links", children: section.items.map((link) => /* @__PURE__ */ jsx24(
               "a",
               {
                 href: link.href,
@@ -2451,7 +2670,7 @@ var DrawerAccordion = ({ item, isOpen, onToggle }) => {
               link.href
             )) })
           ] }, section.title)) }, colIdx)) }),
-          dropdown.feature && /* @__PURE__ */ jsx23(FeatureCard, { feature: dropdown.feature, mobile: true })
+          dropdown.feature && /* @__PURE__ */ jsx24(FeatureCard, { feature: dropdown.feature, mobile: true })
         ] })
       }
     ) })
@@ -2469,6 +2688,9 @@ var Navbar = ({
   ctaHref,
   languageLabel,
   onLanguageClick,
+  languageItems,
+  activeLanguageCode,
+  onLanguageSelect,
   className,
   ...props
 }) => {
@@ -2476,31 +2698,40 @@ var Navbar = ({
   const [mobileOpen, setMobileOpen] = useState8(false);
   const [mobileExpanded, setMobileExpanded] = useState8(null);
   const [scrolled, setScrolled] = useState8(false);
-  const hoverTimeoutRef = useRef7(null);
-  const pillAreaRef = useRef7(null);
+  const [langDropdownOpen, setLangDropdownOpen] = useState8(false);
+  const [mobileLangOpen, setMobileLangOpen] = useState8(false);
+  const hoverTimeoutRef = useRef8(null);
+  const langHoverTimeoutRef = useRef8(null);
+  const pillAreaRef = useRef8(null);
+  const langBtnRef = useRef8(null);
+  const hasLangDropdown = Boolean(languageItems && languageItems.length > 0);
   const resolvedLogo = theme === "light" ? logoSrcDark ?? logoSrc : logoSrc;
-  useEffect6(() => {
+  useEffect7(() => {
     const onScroll = () => setScrolled(window.scrollY > 0);
     window.addEventListener("scroll", onScroll, { passive: true });
     return () => window.removeEventListener("scroll", onScroll);
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     const onKey = (e) => {
       if (e.key === "Escape") {
         setOpenDropdown(null);
         setMobileOpen(false);
+        setMobileLangOpen(false);
       }
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
+    if (!mobileOpen) setMobileLangOpen(false);
+  }, [mobileOpen]);
+  useEffect7(() => {
     document.body.style.overflow = mobileOpen ? "hidden" : "";
     return () => {
       document.body.style.overflow = "";
     };
   }, [mobileOpen]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!openDropdown) return;
     const onPointerDown = (e) => {
       if (pillAreaRef.current && !pillAreaRef.current.contains(e.target)) {
@@ -2516,6 +2747,25 @@ var Navbar = ({
       hoverTimeoutRef.current = null;
     }
   }, []);
+  const clearLangHoverTimeout = useCallback2(() => {
+    if (langHoverTimeoutRef.current) {
+      clearTimeout(langHoverTimeoutRef.current);
+      langHoverTimeoutRef.current = null;
+    }
+  }, []);
+  const handleLangEnter = useCallback2(() => {
+    clearLangHoverTimeout();
+    setLangDropdownOpen(true);
+  }, [clearLangHoverTimeout]);
+  const handleLangLeave = useCallback2(() => {
+    clearLangHoverTimeout();
+    langHoverTimeoutRef.current = setTimeout(() => setLangDropdownOpen(false), 150);
+  }, [clearLangHoverTimeout]);
+  const handleLangSelect = useCallback2((code) => {
+    setLangDropdownOpen(false);
+    setMobileLangOpen(false);
+    onLanguageSelect?.(code);
+  }, [onLanguageSelect]);
   const handleNavEnter = useCallback2((label) => {
     clearHoverTimeout();
     setOpenDropdown(label);
@@ -2525,20 +2775,20 @@ var Navbar = ({
     hoverTimeoutRef.current = setTimeout(() => setOpenDropdown(null), 120);
   }, [clearHoverTimeout]);
   const activeDropdownItem = navItems.find((item) => item.label === openDropdown);
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "nav",
     {
       className: ["navbar", `navbar--${theme}`, scrolled && "navbar--scrolled", mobileOpen && "navbar--menu-open", className].filter(Boolean).join(" "),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs22("div", { className: "navbar__bar", children: [
-          /* @__PURE__ */ jsx23("a", { href: logoHref, className: "navbar__logo", "aria-label": "Home", children: /* @__PURE__ */ jsx23("img", { src: resolvedLogo, alt: "Logo" }) }),
-          /* @__PURE__ */ jsx23("div", { className: "navbar__nav-center", ref: pillAreaRef, children: /* @__PURE__ */ jsxs22("div", { className: "navbar__pill", children: [
-            /* @__PURE__ */ jsx23("a", { href: logoHref, className: "navbar__pill-logo", "aria-label": "Home", children: /* @__PURE__ */ jsx23("img", { src: logoSrcDark ?? logoSrc, alt: "Logo" }) }),
-            /* @__PURE__ */ jsxs22("div", { className: "navbar__nav-group", children: [
+        /* @__PURE__ */ jsxs23("div", { className: "navbar__bar", children: [
+          /* @__PURE__ */ jsx24("a", { href: logoHref, className: "navbar__logo", "aria-label": "Home", children: /* @__PURE__ */ jsx24("img", { src: resolvedLogo, alt: "Logo" }) }),
+          /* @__PURE__ */ jsx24("div", { className: "navbar__nav-center", ref: pillAreaRef, children: /* @__PURE__ */ jsxs23("div", { className: "navbar__pill", children: [
+            /* @__PURE__ */ jsx24("a", { href: logoHref, className: "navbar__pill-logo", "aria-label": "Home", children: /* @__PURE__ */ jsx24("img", { src: logoSrcDark ?? logoSrc, alt: "Logo" }) }),
+            /* @__PURE__ */ jsxs23("div", { className: "navbar__nav-group", children: [
               navItems.map((item) => {
                 if (item.external) {
-                  return /* @__PURE__ */ jsxs22(
+                  return /* @__PURE__ */ jsxs23(
                     "a",
                     {
                       href: item.href,
@@ -2547,14 +2797,14 @@ var Navbar = ({
                       rel: "noopener noreferrer",
                       children: [
                         item.label,
-                        /* @__PURE__ */ jsx23(ArrowUpRightIcon, {})
+                        /* @__PURE__ */ jsx24(ArrowUpRightIcon, {})
                       ]
                     },
                     item.label
                   );
                 }
                 if (item.dropdown) {
-                  return /* @__PURE__ */ jsxs22(
+                  return /* @__PURE__ */ jsxs23(
                     "button",
                     {
                       className: [
@@ -2567,25 +2817,43 @@ var Navbar = ({
                       "aria-haspopup": "true",
                       children: [
                         item.label,
-                        /* @__PURE__ */ jsx23(ChevronDownIcon3, { className: "navbar__nav-item__chevron" })
+                        /* @__PURE__ */ jsx24(ChevronDownIcon3, { className: "navbar__nav-item__chevron" })
                       ]
                     },
                     item.label
                   );
                 }
-                return /* @__PURE__ */ jsx23("a", { href: item.href, className: "navbar__nav-item", children: item.label }, item.label);
+                return /* @__PURE__ */ jsx24("a", { href: item.href, className: "navbar__nav-item", children: item.label }, item.label);
               }),
-              languageLabel && /* @__PURE__ */ jsxs22("button", { className: "navbar__nav-item navbar__lang-btn", onClick: onLanguageClick, children: [
-                /* @__PURE__ */ jsx23(GlobeIcon, { className: "navbar__lang-globe" }),
-                languageLabel
-              ] })
+              languageLabel && /* @__PURE__ */ jsx24(
+                "div",
+                {
+                  className: "navbar__lang-wrapper",
+                  onMouseEnter: hasLangDropdown ? handleLangEnter : void 0,
+                  onMouseLeave: hasLangDropdown ? handleLangLeave : void 0,
+                  children: /* @__PURE__ */ jsxs23(
+                    "button",
+                    {
+                      ref: langBtnRef,
+                      className: "navbar__nav-item navbar__lang-btn",
+                      onClick: hasLangDropdown ? () => setLangDropdownOpen((o) => !o) : onLanguageClick,
+                      "aria-haspopup": hasLangDropdown ? "true" : void 0,
+                      "aria-expanded": hasLangDropdown ? langDropdownOpen : void 0,
+                      children: [
+                        /* @__PURE__ */ jsx24(GlobeIcon, { className: "navbar__lang-globe" }),
+                        languageLabel
+                      ]
+                    }
+                  )
+                }
+              )
             ] }),
-            /* @__PURE__ */ jsxs22("div", { className: "navbar__pill-actions", children: [
-              loginHref && /* @__PURE__ */ jsx23("a", { href: loginHref, children: /* @__PURE__ */ jsx23(Button, { colorScheme: "black", variant: "secondary", label: loginLabel }) }),
-              ctaHref && /* @__PURE__ */ jsx23("a", { href: ctaHref, children: /* @__PURE__ */ jsx23(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
+            /* @__PURE__ */ jsxs23("div", { className: "navbar__pill-actions", children: [
+              loginHref && /* @__PURE__ */ jsx24("a", { href: loginHref, children: /* @__PURE__ */ jsx24(Button, { colorScheme: "black", variant: "secondary", label: loginLabel }) }),
+              ctaHref && /* @__PURE__ */ jsx24("a", { href: ctaHref, children: /* @__PURE__ */ jsx24(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
             ] })
           ] }) }),
-          /* @__PURE__ */ jsx23(AnimatePresence, { children: openDropdown && activeDropdownItem?.dropdown && /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx24(AnimatePresence, { children: openDropdown && activeDropdownItem?.dropdown && /* @__PURE__ */ jsx24(
             DropdownPanel,
             {
               item: activeDropdownItem,
@@ -2594,8 +2862,40 @@ var Navbar = ({
             },
             "dropdown"
           ) }),
-          /* @__PURE__ */ jsxs22("div", { className: "navbar__actions", children: [
-            loginHref && /* @__PURE__ */ jsx23("a", { href: loginHref, className: "navbar__actions-login", children: /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx24(AnimatePresence, { children: hasLangDropdown && langDropdownOpen && /* @__PURE__ */ jsx24(
+            motion2.div,
+            {
+              className: "navbar__lang-dropdown",
+              variants: dropdownVariants,
+              initial: "hidden",
+              animate: "visible",
+              exit: "hidden",
+              transition: { duration: 0.18, ease: EASE_OUT_EXPO },
+              onMouseEnter: clearLangHoverTimeout,
+              onMouseLeave: handleLangLeave,
+              children: /* @__PURE__ */ jsx24(
+                "div",
+                {
+                  className: "navbar__lang-dropdown-grid",
+                  style: { "--lang-rows": Math.ceil(languageItems.length / 3) },
+                  children: languageItems.map((lang) => /* @__PURE__ */ jsx24(
+                    "button",
+                    {
+                      className: [
+                        "navbar__lang-dropdown-item",
+                        lang.code === activeLanguageCode ? "navbar__lang-dropdown-item--active" : ""
+                      ].filter(Boolean).join(" "),
+                      onClick: () => handleLangSelect(lang.code),
+                      children: lang.label
+                    },
+                    lang.code
+                  ))
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsxs23("div", { className: "navbar__actions", children: [
+            loginHref && /* @__PURE__ */ jsx24("a", { href: loginHref, className: "navbar__actions-login", children: /* @__PURE__ */ jsx24(
               Button,
               {
                 colorScheme: theme === "dark" ? "white" : "black",
@@ -2603,10 +2903,10 @@ var Navbar = ({
                 label: loginLabel
               }
             ) }),
-            ctaHref && /* @__PURE__ */ jsx23("a", { href: ctaHref, children: /* @__PURE__ */ jsx23(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
+            ctaHref && /* @__PURE__ */ jsx24("a", { href: ctaHref, children: /* @__PURE__ */ jsx24(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
           ] }),
-          /* @__PURE__ */ jsxs22("div", { className: "navbar__mobile-actions", children: [
-            loginHref && /* @__PURE__ */ jsx23("a", { href: loginHref, children: /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsxs23("div", { className: "navbar__mobile-actions", children: [
+            loginHref && /* @__PURE__ */ jsx24("a", { href: loginHref, children: /* @__PURE__ */ jsx24(
               Button,
               {
                 colorScheme: scrolled || theme === "light" ? "black" : "white",
@@ -2614,18 +2914,18 @@ var Navbar = ({
                 label: loginLabel
               }
             ) }),
-            /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsx24(
               "button",
               {
                 className: "navbar__mobile-trigger",
                 onClick: () => setMobileOpen((o) => !o),
                 "aria-label": mobileOpen ? "Close navigation menu" : "Open navigation menu",
-                children: mobileOpen ? /* @__PURE__ */ jsx23(XMarkIcon2, {}) : /* @__PURE__ */ jsx23(BarsIcon, {})
+                children: mobileOpen ? /* @__PURE__ */ jsx24(XMarkIcon2, {}) : /* @__PURE__ */ jsx24(BarsIcon, {})
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx23("div", { className: "navbar__drawer-clip", children: /* @__PURE__ */ jsx23(AnimatePresence, { children: mobileOpen && /* @__PURE__ */ jsxs22(
+        /* @__PURE__ */ jsx24("div", { className: "navbar__drawer-clip", children: /* @__PURE__ */ jsx24(AnimatePresence, { children: mobileOpen && /* @__PURE__ */ jsxs23(
           motion2.div,
           {
             className: "navbar__drawer",
@@ -2638,10 +2938,10 @@ var Navbar = ({
             role: "dialog",
             "aria-label": "Navigation menu",
             children: [
-              /* @__PURE__ */ jsxs22("nav", { className: "navbar__drawer-nav", children: [
+              /* @__PURE__ */ jsxs23("nav", { className: "navbar__drawer-nav", children: [
                 navItems.map((item) => {
                   if (item.dropdown) {
-                    return /* @__PURE__ */ jsx23(
+                    return /* @__PURE__ */ jsx24(
                       DrawerAccordion,
                       {
                         item,
@@ -2653,7 +2953,7 @@ var Navbar = ({
                       item.label
                     );
                   }
-                  return /* @__PURE__ */ jsxs22(
+                  return /* @__PURE__ */ jsxs23(
                     "a",
                     {
                       href: item.href,
@@ -2662,19 +2962,30 @@ var Navbar = ({
                       rel: item.external ? "noopener noreferrer" : void 0,
                       children: [
                         item.label,
-                        item.external && /* @__PURE__ */ jsx23(ArrowUpRightIcon, {})
+                        item.external && /* @__PURE__ */ jsx24(ArrowUpRightIcon, {})
                       ]
                     },
                     item.label
                   );
                 }),
-                languageLabel && /* @__PURE__ */ jsxs22("button", { className: "navbar__drawer-lang", onClick: onLanguageClick, children: [
-                  /* @__PURE__ */ jsx23(GlobeIcon, { className: "navbar__lang-globe" }),
+                languageLabel && !hasLangDropdown && /* @__PURE__ */ jsxs23("button", { className: "navbar__drawer-lang", onClick: onLanguageClick, children: [
+                  /* @__PURE__ */ jsx24(GlobeIcon, { className: "navbar__lang-globe" }),
                   languageLabel
-                ] })
+                ] }),
+                languageLabel && hasLangDropdown && /* @__PURE__ */ jsxs23(
+                  "button",
+                  {
+                    className: "navbar__drawer-lang",
+                    onClick: () => setMobileLangOpen(true),
+                    children: [
+                      /* @__PURE__ */ jsx24(GlobeIcon, { className: "navbar__lang-globe" }),
+                      languageLabel
+                    ]
+                  }
+                )
               ] }),
-              /* @__PURE__ */ jsxs22("div", { className: "navbar__drawer-footer", children: [
-                loginHref && /* @__PURE__ */ jsx23("a", { href: loginHref, style: { display: "block" }, children: /* @__PURE__ */ jsx23(
+              !mobileLangOpen && /* @__PURE__ */ jsxs23("div", { className: "navbar__drawer-footer", children: [
+                loginHref && /* @__PURE__ */ jsx24("a", { href: loginHref, style: { display: "block" }, children: /* @__PURE__ */ jsx24(
                   Button,
                   {
                     colorScheme: "black",
@@ -2683,7 +2994,7 @@ var Navbar = ({
                     fullWidth: true
                   }
                 ) }),
-                ctaHref && /* @__PURE__ */ jsx23("a", { href: ctaHref, style: { display: "block" }, children: /* @__PURE__ */ jsx23(
+                ctaHref && /* @__PURE__ */ jsx24("a", { href: ctaHref, style: { display: "block" }, children: /* @__PURE__ */ jsx24(
                   Button,
                   {
                     colorScheme: "coral",
@@ -2692,7 +3003,40 @@ var Navbar = ({
                     fullWidth: true
                   }
                 ) })
-              ] })
+              ] }),
+              /* @__PURE__ */ jsx24(AnimatePresence, { children: hasLangDropdown && mobileLangOpen && /* @__PURE__ */ jsxs23(
+                motion2.div,
+                {
+                  className: "navbar__drawer-lang-panel",
+                  initial: { y: "100%" },
+                  animate: { y: 0 },
+                  exit: { y: "100%" },
+                  transition: { duration: 0.25, ease: EASE_OUT_EXPO },
+                  children: [
+                    /* @__PURE__ */ jsx24(
+                      "button",
+                      {
+                        className: "navbar__drawer-lang-back",
+                        onClick: () => setMobileLangOpen(false),
+                        "aria-label": "Back to menu",
+                        children: /* @__PURE__ */ jsx24(ChevronLeftIcon, {})
+                      }
+                    ),
+                    /* @__PURE__ */ jsx24("div", { className: "navbar__drawer-lang-grid", children: languageItems.map((lang) => /* @__PURE__ */ jsx24(
+                      "button",
+                      {
+                        className: [
+                          "navbar__drawer-lang-item",
+                          lang.code === activeLanguageCode ? "navbar__drawer-lang-item--active" : ""
+                        ].filter(Boolean).join(" "),
+                        onClick: () => handleLangSelect(lang.code),
+                        children: lang.label
+                      },
+                      lang.code
+                    )) })
+                  ]
+                }
+              ) })
             ]
           }
         ) }) })
@@ -2702,7 +3046,7 @@ var Navbar = ({
 };
 
 // templates/DayNightTransition/DayNightTransition.tsx
-import { useRef as useRef8 } from "react";
+import { useRef as useRef9 } from "react";
 import {
   motion as motion3,
   useScroll as useScroll2,
@@ -2710,7 +3054,7 @@ import {
   useTransform as useTransform2,
   useMotionTemplate as useMotionTemplate2
 } from "framer-motion";
-import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
 var SPRING2 = { stiffness: 80, damping: 30, restDelta: 1e-3 };
 var FADE_START = 0.35;
 var FADE_END = 0.65;
@@ -2730,7 +3074,7 @@ var DayNightTransition = ({
   className,
   ...props
 }) => {
-  const wrapperRef = useRef8(null);
+  const wrapperRef = useRef9(null);
   const { scrollYProgress } = useScroll2({
     target: wrapperRef,
     offset: ["start end", "end start"]
@@ -2742,14 +3086,14 @@ var DayNightTransition = ({
   const dayOpacity = useTransform2(smooth, [WORD_START, WORD_END], [1, 0]);
   const nightOpacity2 = useTransform2(smooth, [WORD_START, WORD_END], [0, 1]);
   const hasDescription = Boolean(dayDescription || nightDescription);
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       ref: wrapperRef,
       className: ["dnt", className].filter(Boolean).join(" "),
       ...props,
-      children: /* @__PURE__ */ jsxs23("div", { className: "dnt__sticky", children: [
-        /* @__PURE__ */ jsx24(
+      children: /* @__PURE__ */ jsxs24("div", { className: "dnt__sticky", children: [
+        /* @__PURE__ */ jsx25(
           "img",
           {
             className: "dnt__bg dnt__bg--day",
@@ -2759,7 +3103,7 @@ var DayNightTransition = ({
             draggable: false
           }
         ),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(
           motion3.img,
           {
             className: "dnt__bg dnt__bg--night",
@@ -2770,14 +3114,14 @@ var DayNightTransition = ({
             style: { opacity: nightOpacity }
           }
         ),
-        /* @__PURE__ */ jsx24("div", { className: "dnt__content", children: /* @__PURE__ */ jsxs23(
+        /* @__PURE__ */ jsx25("div", { className: "dnt__content", children: /* @__PURE__ */ jsxs24(
           motion3.div,
           {
             className: "dnt__text-wrap",
             style: { color: textColor },
             children: [
-              /* @__PURE__ */ jsxs23("div", { className: "dnt__crossfade-wrap", children: [
-                /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsxs24("div", { className: "dnt__crossfade-wrap", children: [
+                /* @__PURE__ */ jsx25(
                   motion3.h2,
                   {
                     className: "dnt__headline",
@@ -2785,7 +3129,7 @@ var DayNightTransition = ({
                     children: dayHeadline
                   }
                 ),
-                /* @__PURE__ */ jsx24(
+                /* @__PURE__ */ jsx25(
                   motion3.h2,
                   {
                     className: "dnt__headline",
@@ -2795,8 +3139,8 @@ var DayNightTransition = ({
                   }
                 )
               ] }),
-              hasDescription && /* @__PURE__ */ jsxs23("div", { className: "dnt__crossfade-wrap", children: [
-                /* @__PURE__ */ jsx24(
+              hasDescription && /* @__PURE__ */ jsxs24("div", { className: "dnt__crossfade-wrap", children: [
+                /* @__PURE__ */ jsx25(
                   motion3.p,
                   {
                     className: "dnt__description",
@@ -2804,7 +3148,7 @@ var DayNightTransition = ({
                     children: dayDescription ?? ""
                   }
                 ),
-                /* @__PURE__ */ jsx24(
+                /* @__PURE__ */ jsx25(
                   motion3.p,
                   {
                     className: "dnt__description",
@@ -2814,7 +3158,7 @@ var DayNightTransition = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx24("a", { href: ctaHref, className: "dnt__btn", children: ctaLabel })
+              /* @__PURE__ */ jsx25("a", { href: ctaHref, className: "dnt__btn", children: ctaLabel })
             ]
           }
         ) })
@@ -2823,8 +3167,8 @@ var DayNightTransition = ({
   );
 };
 
-// templates/PaymentMethods/PaymentMethods.tsx
-import { useRef as useRef9 } from "react";
+// templates/LogoMarquee/LogoMarquee.tsx
+import { useRef as useRef10 } from "react";
 import {
   motion as motion4,
   useScroll as useScroll3,
@@ -2832,7 +3176,7 @@ import {
   useAnimationFrame,
   useMotionValue
 } from "framer-motion";
-import { jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
 function modWrap(min, max, v) {
   const range = max - min;
   return ((v - min) % range + range) % range + min;
@@ -2840,41 +3184,41 @@ function modWrap(min, max, v) {
 var VELOCITY_FACTOR = 0.4;
 var MAX_SCROLL_V = 2500;
 var DEADZONE = 2;
-var CDN = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/";
+var PLACEHOLDER_IMAGE2 = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/69b9309379ac08e59ca8210a_1f3f555da9a5cbb13a6fe1bf0d5fe1b6_placeholder-image.webp";
 var COL_ONE_LOGOS = [
-  { name: "Mastercard", url: `${CDN}68dcd915dc1a82f278b6c061_payment%20method-mastercard.svg` },
-  { name: "Visa", url: `${CDN}68dcd9d10fda048e2d53a3a1_payment%20method-visa.svg` },
-  { name: "Visa Electron", url: `${CDN}68dcd9d10fda048e2d53a3a1_payment%20method-visa-electron.svg` },
-  { name: "Maestro", url: `${CDN}68dcd9d183a5dcfaa9a06587_payment%20method-maestro.svg` },
-  { name: "Pix", url: `${CDN}68dcd9d13461263dcd8ccf54_payment%20method-pix.svg` },
-  { name: "Help2Pay", url: `${CDN}68dcd9d13461263dcd8ccf54_payment%20method-help2pay.svg` },
-  { name: "UPI Neo", url: `${CDN}68dcd9d13461263dcd8ccf54_payment%20method-upineo.svg` },
-  { name: "M-Pesa", url: `${CDN}68dcd9d13461263dcd8ccf54_payment%20method-mpesa.svg` },
-  { name: "Ozow", url: `${CDN}68dcd9d13461263dcd8ccf54_payment%20method-ozow.svg` },
-  { name: "MTN", url: `${CDN}68dcd9d13461263dcd8ccf54_payment%20method-mtn.svg` },
-  { name: "Airtm", url: `${CDN}68dcd9d13461263dcd8ccf54_payment%20method-airtm.svg` }
+  { name: "Logo 1", url: PLACEHOLDER_IMAGE2 },
+  { name: "Logo 2", url: PLACEHOLDER_IMAGE2 },
+  { name: "Logo 3", url: PLACEHOLDER_IMAGE2 },
+  { name: "Logo 4", url: PLACEHOLDER_IMAGE2 },
+  { name: "Logo 5", url: PLACEHOLDER_IMAGE2 },
+  { name: "Logo 6", url: PLACEHOLDER_IMAGE2 },
+  { name: "Logo 7", url: PLACEHOLDER_IMAGE2 },
+  { name: "Logo 8", url: PLACEHOLDER_IMAGE2 },
+  { name: "Logo 9", url: PLACEHOLDER_IMAGE2 },
+  { name: "Logo 10", url: PLACEHOLDER_IMAGE2 },
+  { name: "Logo 11", url: PLACEHOLDER_IMAGE2 }
 ];
 var COL_TWO_LOGOS = [
-  { name: "Bitcoin", url: `${CDN}68dcd9d13384aff3f072511a_payment%20method-bitcoin.svg` },
-  { name: "Ethereum", url: `${CDN}68dcd9d10fda048e2d53a3a1_payment%20method-ethereum.svg` },
-  { name: "Tron", url: `${CDN}68dcd9d109305b54383580e5_payment%20method-tron.svg` },
-  { name: "Skrill", url: `${CDN}68dcd9d183a5dcfaa9a06587_payment%20method-skrill.svg` },
-  { name: "Skrill 1-tap", url: `${CDN}68dcd9d183a5dcfaa9a06587_payment%20method-skrill-1tap.svg` },
-  { name: "SticPay", url: `${CDN}68dcd9d183a5dcfaa9a06587_payment%20method-sticpay.svg` },
-  { name: "Litecoin", url: `${CDN}68dcd9d13384aff3f072511a_payment%20method-litecoin.svg` },
-  { name: "USD Coin", url: `${CDN}68dcd9d13384aff3f072511a_payment%20method-usdc.svg` },
-  { name: "Dogecoin", url: `${CDN}68dcd9d13384aff3f072511a_payment%20method-dogecoin.svg` },
-  { name: "Cardano", url: `${CDN}68dcd9d13384aff3f072511a_payment%20method-cardano.svg` },
-  { name: "BNB", url: `${CDN}68dcd9d13384aff3f072511a_payment%20method-bnb.svg` }
+  { name: "Logo 1", url: PLACEHOLDER_IMAGE2 },
+  { name: "Logo 2", url: PLACEHOLDER_IMAGE2 },
+  { name: "Logo 3", url: PLACEHOLDER_IMAGE2 },
+  { name: "Logo 4", url: PLACEHOLDER_IMAGE2 },
+  { name: "Logo 5", url: PLACEHOLDER_IMAGE2 },
+  { name: "Logo 6", url: PLACEHOLDER_IMAGE2 },
+  { name: "Logo 7", url: PLACEHOLDER_IMAGE2 },
+  { name: "Logo 8", url: PLACEHOLDER_IMAGE2 },
+  { name: "Logo 9", url: PLACEHOLDER_IMAGE2 },
+  { name: "Logo 10", url: PLACEHOLDER_IMAGE2 },
+  { name: "Logo 11", url: PLACEHOLDER_IMAGE2 }
 ];
 var TEXT_CONTENT = {
-  headline: "Your money, your way",
-  body: "Quick deposits, easy withdrawals, and 60+ payment options mean your money is always accessible.",
-  disclaimer: "*Availability of payment methods and processing speeds may vary based on location and selected payment option.",
+  headline: "Section title goes here",
+  body: "Explain how this specific feature helps your user.",
+  disclaimer: "*Add any relevant disclaimers or legal copy here.",
   ctaLabel: "Learn more",
   ctaHref: "#"
 };
-var PaymentMethods = ({
+var LogoMarquee = ({
   headline = TEXT_CONTENT.headline,
   body = TEXT_CONTENT.body,
   disclaimer = TEXT_CONTENT.disclaimer,
@@ -2889,8 +3233,8 @@ var PaymentMethods = ({
   const scrollVelocity = useVelocity(scrollY);
   const col1Y = useMotionValue(0);
   const col2Y = useMotionValue(0);
-  const col1Ref = useRef9(null);
-  const col2Ref = useRef9(null);
+  const col1Ref = useRef10(null);
+  const col2Ref = useRef10(null);
   useAnimationFrame((_, delta) => {
     const raw = scrollVelocity.get();
     if (Math.abs(raw) < DEADZONE) return;
@@ -2903,21 +3247,21 @@ var PaymentMethods = ({
   });
   const track1 = [...col1Logos, ...col1Logos];
   const track2 = [...col2Logos, ...col2Logos];
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "section",
     {
-      className: ["pm", className].filter(Boolean).join(" "),
+      className: ["lm", className].filter(Boolean).join(" "),
       ...props,
-      children: /* @__PURE__ */ jsxs24("div", { className: "pm__inner", children: [
-        /* @__PURE__ */ jsx25("div", { className: "pm__media", children: /* @__PURE__ */ jsxs24("div", { className: "pm__carousel", children: [
-          /* @__PURE__ */ jsx25("div", { className: "pm__fade pm__fade--top", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx25(
+      children: /* @__PURE__ */ jsxs25("div", { className: "lm__inner", children: [
+        /* @__PURE__ */ jsx26("div", { className: "lm__media", children: /* @__PURE__ */ jsxs25("div", { className: "lm__carousel", children: [
+          /* @__PURE__ */ jsx26("div", { className: "lm__fade lm__fade--top", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx26(
             motion4.div,
             {
               ref: col1Ref,
-              className: "pm__col",
+              className: "lm__col",
               style: { y: col1Y },
-              children: track1.map((logo, i) => /* @__PURE__ */ jsx25("div", { className: "pm__card", children: /* @__PURE__ */ jsx25("div", { className: "pm__card-img-wrap", children: /* @__PURE__ */ jsx25(
+              children: track1.map((logo, i) => /* @__PURE__ */ jsx26("div", { className: "lm__card", children: /* @__PURE__ */ jsx26("div", { className: "lm__card-img-wrap", children: /* @__PURE__ */ jsx26(
                 "img",
                 {
                   src: logo.url,
@@ -2928,13 +3272,13 @@ var PaymentMethods = ({
               ) }) }, `c1-${i}`))
             }
           ),
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx26(
             motion4.div,
             {
               ref: col2Ref,
-              className: "pm__col",
+              className: "lm__col",
               style: { y: col2Y },
-              children: track2.map((logo, i) => /* @__PURE__ */ jsx25("div", { className: "pm__card", children: /* @__PURE__ */ jsx25("div", { className: "pm__card-img-wrap", children: /* @__PURE__ */ jsx25(
+              children: track2.map((logo, i) => /* @__PURE__ */ jsx26("div", { className: "lm__card", children: /* @__PURE__ */ jsx26("div", { className: "lm__card-img-wrap", children: /* @__PURE__ */ jsx26(
                 "img",
                 {
                   src: logo.url,
@@ -2945,23 +3289,203 @@ var PaymentMethods = ({
               ) }) }, `c2-${i}`))
             }
           ),
-          /* @__PURE__ */ jsx25("div", { className: "pm__fade pm__fade--bottom", "aria-hidden": "true" })
+          /* @__PURE__ */ jsx26("div", { className: "lm__fade lm__fade--bottom", "aria-hidden": "true" })
         ] }) }),
-        /* @__PURE__ */ jsxs24("div", { className: "pm__content", children: [
-          /* @__PURE__ */ jsx25("h2", { className: "pm__headline", children: headline }),
-          /* @__PURE__ */ jsxs24("div", { className: "pm__text-group", children: [
-            /* @__PURE__ */ jsx25("p", { className: "pm__body", children: body }),
-            /* @__PURE__ */ jsx25("p", { className: "pm__disclaimer", children: disclaimer })
+        /* @__PURE__ */ jsxs25("div", { className: "lm__content", children: [
+          /* @__PURE__ */ jsx26("h2", { className: "lm__headline", children: headline }),
+          /* @__PURE__ */ jsxs25("div", { className: "lm__text-group", children: [
+            /* @__PURE__ */ jsx26("p", { className: "lm__body", children: body }),
+            /* @__PURE__ */ jsx26("p", { className: "lm__disclaimer", children: disclaimer })
           ] }),
-          /* @__PURE__ */ jsxs24("a", { href: ctaHref, className: "pm__link", children: [
+          /* @__PURE__ */ jsxs25("a", { href: ctaHref, className: "lm__link", children: [
             ctaLabel,
-            /* @__PURE__ */ jsx25("span", { "aria-hidden": "true", children: "\u2192" })
+            /* @__PURE__ */ jsx26("span", { className: "lm__link-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx26("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx26("path", { d: "M3 8H13M13 8L9 4M13 8L9 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
           ] })
         ] })
       ] })
     }
   );
 };
+
+// assets/appstore-googleplay-light.svg
+var appstore_googleplay_light_default = "./appstore-googleplay-light-W3CS6NAG.svg";
+
+// assets/appstore-appstore-light.svg
+var appstore_appstore_light_default = "./appstore-appstore-light-BEVC5PJZ.svg";
+
+// assets/appstore-appgallery-light.svg
+var appstore_appgallery_light_default = "./appstore-appgallery-light-VF62CF5X.svg";
+
+// assets/appstore-windows-light.svg
+var appstore_windows_light_default = "./appstore-windows-light-TCALZSJM.svg";
+
+// assets/appstore-macos-light.svg
+var appstore_macos_light_default = "./appstore-macos-light-5LI6ESAV.svg";
+
+// assets/appstore-linux-light.svg
+var appstore_linux_light_default = "./appstore-linux-light-WQECAJRC.svg";
+
+// assets/appstore-browser-light.svg
+var appstore_browser_light_default = "./appstore-browser-light-HBKTW4SI.svg";
+
+// assets/appstore-googleplay-dark.svg
+var appstore_googleplay_dark_default = "./appstore-googleplay-dark-HWTOQTL6.svg";
+
+// assets/appstore-appstore-dark.svg
+var appstore_appstore_dark_default = "./appstore-appstore-dark-FDUROOKK.svg";
+
+// assets/appstore-appgallery-dark.svg
+var appstore_appgallery_dark_default = "./appstore-appgallery-dark-2QPFCM4A.svg";
+
+// assets/appstore-windows-dark.svg
+var appstore_windows_dark_default = "./appstore-windows-dark-ZDWELB42.svg";
+
+// assets/appstore-macos-dark.svg
+var appstore_macos_dark_default = "./appstore-macos-dark-2A3UM5YI.svg";
+
+// assets/appstore-linux-dark.svg
+var appstore_linux_dark_default = "./appstore-linux-dark-RVH7CBM4.svg";
+
+// assets/appstore-browser-dark.svg
+var appstore_browser_dark_default = "./appstore-browser-dark-2E6TK6JH.svg";
+
+// primitives/DownloadBadge/DownloadBadge.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+var BADGE_ASSETS = {
+  light: {
+    googleplay: { src: appstore_googleplay_light_default, alt: "Get it on Google Play" },
+    appstore: { src: appstore_appstore_light_default, alt: "Download on the App Store" },
+    appgallery: { src: appstore_appgallery_light_default, alt: "Explore it on AppGallery" },
+    windows: { src: appstore_windows_light_default, alt: "Download for Windows" },
+    macos: { src: appstore_macos_light_default, alt: "Download on the Mac App Store" },
+    linux: { src: appstore_linux_light_default, alt: "Installation on Linux" },
+    web: { src: appstore_browser_light_default, alt: "Trade on Web browser" }
+  },
+  dark: {
+    googleplay: { src: appstore_googleplay_dark_default, alt: "Get it on Google Play" },
+    appstore: { src: appstore_appstore_dark_default, alt: "Download on the App Store" },
+    appgallery: { src: appstore_appgallery_dark_default, alt: "Explore it on AppGallery" },
+    windows: { src: appstore_windows_dark_default, alt: "Download for Windows" },
+    macos: { src: appstore_macos_dark_default, alt: "Download on the Mac App Store" },
+    linux: { src: appstore_linux_dark_default, alt: "Installation on Linux" },
+    web: { src: appstore_browser_dark_default, alt: "Trade on Web browser" }
+  }
+};
+var DownloadBadge = ({
+  platform,
+  colorScheme = "light",
+  href,
+  className,
+  ...props
+}) => {
+  const { src, alt } = BADGE_ASSETS[colorScheme][platform];
+  return /* @__PURE__ */ jsx27(
+    "a",
+    {
+      className: [
+        "download-badge",
+        `download-badge--${colorScheme}`,
+        className
+      ].filter(Boolean).join(" "),
+      href: href ?? "#",
+      "aria-label": alt,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      ...props,
+      children: /* @__PURE__ */ jsx27("img", { className: "download-badge__img", src, alt })
+    }
+  );
+};
+
+// templates/Steps/Steps.tsx
+import { jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
+var Steps = ({
+  title,
+  steps,
+  image,
+  imageAlt = "",
+  imagePosition = "left"
+}) => {
+  const containerClass = [
+    "steps__container",
+    imagePosition === "right" ? "steps__container--image-right" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx28("section", { className: "steps", children: /* @__PURE__ */ jsxs26("div", { className: containerClass, children: [
+    image && /* @__PURE__ */ jsx28("div", { className: "steps__image-wrapper", children: /* @__PURE__ */ jsx28(
+      "img",
+      {
+        src: image,
+        alt: imageAlt,
+        className: "steps__image"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs26("div", { className: "steps__content", children: [
+      /* @__PURE__ */ jsx28("h2", { className: "steps__title", children: title }),
+      /* @__PURE__ */ jsx28("ol", { className: "steps__list", children: steps.map((step, index) => /* @__PURE__ */ jsx28("li", { className: "steps__item", children: /* @__PURE__ */ jsxs26("div", { className: "steps__item-inner", children: [
+        /* @__PURE__ */ jsx28("span", { className: "steps__number", "aria-hidden": "true", children: index + 1 }),
+        /* @__PURE__ */ jsxs26("div", { className: "steps__item-body", children: [
+          /* @__PURE__ */ jsx28("h3", { className: "steps__item-title", children: step.title }),
+          /* @__PURE__ */ jsx28("p", { className: "steps__item-description", children: step.description })
+        ] })
+      ] }) }, index)) })
+    ] })
+  ] }) });
+};
+
+// templates/DownloadBanner/DownloadBanner.tsx
+import { jsx as jsx29, jsxs as jsxs27 } from "react/jsx-runtime";
+var DownloadBanner = ({
+  style = "light-2",
+  qrCodeImage,
+  qrCodeAlt = "QR code to download the app",
+  qrTitle = "Scan to download",
+  qrSubtitle = "Android & iOS",
+  mobileTitle = "Available on",
+  showAppStore = true,
+  showGooglePlay = true,
+  showAppGallery = true,
+  showWindows = true,
+  showMacOS = true,
+  showLinux = true,
+  showWeb = true,
+  appStoreHref,
+  googlePlayHref,
+  appGalleryHref,
+  windowsHref,
+  macOSHref,
+  linuxHref,
+  webHref,
+  disclaimer
+}) => {
+  const colorScheme = style === "dark" ? "dark" : "light";
+  return /* @__PURE__ */ jsx29("section", { className: `db-section db-section--${style}`, children: /* @__PURE__ */ jsx29("div", { className: "db-container", children: /* @__PURE__ */ jsxs27("div", { className: "db-card", children: [
+    /* @__PURE__ */ jsxs27("div", { className: "db-qr-block", children: [
+      qrCodeImage && /* @__PURE__ */ jsx29(
+        "img",
+        {
+          className: "db-qr-image",
+          src: qrCodeImage,
+          alt: qrCodeAlt
+        }
+      ),
+      /* @__PURE__ */ jsxs27("div", { className: "db-qr-text", children: [
+        /* @__PURE__ */ jsx29("span", { className: "db-qr-text__title db-qr-text__title--desktop", children: qrTitle }),
+        /* @__PURE__ */ jsx29("h2", { className: "db-qr-text__subtitle db-qr-text__subtitle--desktop", children: qrSubtitle }),
+        /* @__PURE__ */ jsx29("span", { className: "db-qr-text__title db-qr-text__title--mobile", children: mobileTitle }),
+        disclaimer && /* @__PURE__ */ jsx29("span", { className: "db-disclaimer", children: disclaimer })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs27("div", { className: "db-badges", children: [
+      showGooglePlay && /* @__PURE__ */ jsx29(DownloadBadge, { platform: "googleplay", colorScheme, href: googlePlayHref }),
+      showAppGallery && /* @__PURE__ */ jsx29(DownloadBadge, { platform: "appgallery", colorScheme, href: appGalleryHref }),
+      showMacOS && /* @__PURE__ */ jsx29(DownloadBadge, { platform: "macos", colorScheme, href: macOSHref }),
+      showWindows && /* @__PURE__ */ jsx29(DownloadBadge, { platform: "windows", colorScheme, href: windowsHref }),
+      showLinux && /* @__PURE__ */ jsx29(DownloadBadge, { platform: "linux", colorScheme, href: linuxHref }),
+      showAppStore && /* @__PURE__ */ jsx29(DownloadBadge, { platform: "appstore", colorScheme, href: appStoreHref }),
+      showWeb && /* @__PURE__ */ jsx29(DownloadBadge, { platform: "web", colorScheme, href: webHref })
+    ] })
+  ] }) }) });
+};
 export {
   AVATAR_DATA,
   Accordion,
@@ -2975,18 +3499,22 @@ export {
   Chip,
   ChipDropdown,
   DayNightTransition,
+  DownloadBadge,
+  DownloadBanner,
   FeatureCards,
+  FeatureCardsSecondary,
   Footer,
   Hero,
   Link,
+  LogoMarquee,
   Navbar,
   Pagination,
-  PaymentMethods,
   SCROLLYTELLING_DATA,
   STEPS_DATA,
   Scrollytelling,
   SearchField,
   Stats,
+  Steps,
   StickyStackedCards,
   TEXT_CONTENT,
   Tag,