@deriv-web-design/ui 0.0.4 → 0.0.6

package/dist/index.js

@@ -36,6 +36,7 @@ __export(index_exports, {
   Footer: () => Footer,
   Hero: () => Hero,
   Link: () => Link,
+  Navbar: () => Navbar,
   Pagination: () => Pagination,
   PaymentMethods: () => PaymentMethods,
   SCROLLYTELLING_DATA: () => SCROLLYTELLING_DATA,
@@ -1080,7 +1081,7 @@ var FeatureCards = ({
   ] }) });
 };
 
-// templates/Footer/Footer.tsx
+// components/Footer/Footer.tsx
 var import_react7 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var ExternalLinkIcon = () => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -1130,40 +1131,42 @@ var DerivGoBadges = ({
   appStoreBadge,
   huaweiBadge,
   availabilityNote
-}) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "footer__app-badges", children: [
-  googlePlayBadge && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    "a",
-    {
-      href: googlePlayBadge.href,
-      className: googlePlayBadge.icon ? "footer__app-badge-svg" : "footer__app-badge",
-      "aria-label": googlePlayBadge.imageAlt,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      children: googlePlayBadge.icon ?? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("img", { src: googlePlayBadge.imageSrc, alt: googlePlayBadge.imageAlt })
-    }
-  ),
-  appStoreBadge && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    "a",
-    {
-      href: appStoreBadge.href,
-      className: appStoreBadge.icon ? "footer__app-badge-svg" : "footer__app-badge",
-      "aria-label": appStoreBadge.imageAlt,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      children: appStoreBadge.icon ?? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("img", { src: appStoreBadge.imageSrc, alt: appStoreBadge.imageAlt })
-    }
-  ),
-  huaweiBadge && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    "a",
-    {
-      href: huaweiBadge.href,
-      className: huaweiBadge.icon ? "footer__app-badge-svg" : "footer__app-badge",
-      "aria-label": huaweiBadge.imageAlt,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      children: huaweiBadge.icon ?? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("img", { src: huaweiBadge.imageSrc, alt: huaweiBadge.imageAlt })
-    }
-  ),
+}) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "footer__app-badges", children: [
+    googlePlayBadge && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "a",
+      {
+        href: googlePlayBadge.href,
+        className: googlePlayBadge.icon ? "footer__app-badge-svg" : "footer__app-badge",
+        "aria-label": googlePlayBadge.imageAlt,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: googlePlayBadge.icon ?? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("img", { src: googlePlayBadge.imageSrc, alt: googlePlayBadge.imageAlt })
+      }
+    ),
+    appStoreBadge && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "a",
+      {
+        href: appStoreBadge.href,
+        className: appStoreBadge.icon ? "footer__app-badge-svg" : "footer__app-badge",
+        "aria-label": appStoreBadge.imageAlt,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: appStoreBadge.icon ?? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("img", { src: appStoreBadge.imageSrc, alt: appStoreBadge.imageAlt })
+      }
+    ),
+    huaweiBadge && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "a",
+      {
+        href: huaweiBadge.href,
+        className: huaweiBadge.icon ? "footer__app-badge-svg" : "footer__app-badge",
+        "aria-label": huaweiBadge.imageAlt,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: huaweiBadge.icon ?? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("img", { src: huaweiBadge.imageSrc, alt: huaweiBadge.imageAlt })
+      }
+    )
+  ] }),
   availabilityNote && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "footer__app-note", children: availabilityNote })
 ] });
 var NavLink = ({ label, href, isExternal, onClick }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
@@ -1228,11 +1231,10 @@ var Footer = ({
               "a",
               {
                 href: item.href,
-                className: "footer__ai-icon",
                 "aria-label": item.imageAlt,
                 target: "_blank",
                 rel: "noopener noreferrer",
-                children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("img", { src: item.imageSrc, alt: item.imageAlt })
+                children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("img", { className: "footer__ai-icon", src: item.imageSrc, alt: item.imageAlt })
               },
               i
             )) })
@@ -1256,11 +1258,10 @@ var Footer = ({
             "a",
             {
               href: item.href,
-              className: "footer__ai-icon",
               "aria-label": item.imageAlt,
               target: "_blank",
               rel: "noopener noreferrer",
-              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("img", { src: item.imageSrc, alt: item.imageAlt })
+              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("img", { className: "footer__ai-icon", src: item.imageSrc, alt: item.imageAlt })
             },
             i
           )) })
@@ -1301,7 +1302,7 @@ var Footer = ({
                     className: "footer__deriv-go-qr-img"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "footer__deriv-go-qr-label", children: "Scan to download" })
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "footer__deriv-go-qr-label", children: derivGo.scanToDownloadLabel ?? "Scan to download" })
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 DerivGoBadges,
@@ -1981,153 +1982,240 @@ var SPRING = { stiffness: 80, damping: 30, restDelta: 1e-3 };
 var LOCK_AT = 0.5;
 var PLACEHOLDER_URL = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/68da5c86c91c54f39c86ce1a_footer-member-5.webp";
 var AVATAR_DATA = [
-  /* ── Rank 0 — bottom-centre-ish (dist ≈ 285) ─── */
+  /* ── Rank 0 — top-centre (col 6, row 1) ─────── */
   {
-    id: 11,
+    id: 12,
     staggerRank: 0,
     imageUrl: PLACEHOLDER_URL,
-    desktopPos: { left: "45.7%", top: "84.9%" },
-    mobilePos: { left: "calc(50% - var(--ctab-avatar-size) / 2)", top: "81.8%" },
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 6)", top: "calc(var(--ctab-grid-cell) * 1)" },
+    mobilePos: { left: "calc(50% - var(--ctab-avatar-size) / 2)", top: "calc(var(--ctab-grid-cell) * 1)" },
     mobileVisible: true
   },
-  /* ── Rank 1 — top-centre (dist ≈ 293) ────────── */
+  /* ── Rank 1 — bot-centre (col 6, row 7) ─────── */
   {
-    id: 12,
+    id: 11,
     staggerRank: 1,
     imageUrl: PLACEHOLDER_URL,
-    desktopPos: { left: "calc(50% - var(--ctab-avatar-size) / 2)", top: "0%" },
-    mobilePos: { left: "calc(50% - var(--ctab-avatar-size) / 2)", top: "9.2%" },
-    mobileVisible: true
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 6)", top: "calc(var(--ctab-grid-cell) * 7)" },
+    mobilePos: null,
+    mobileVisible: false
   },
-  /* ── Rank 2 — right mid-lower (dist ≈ 341) ───── */
+  /* ── Rank 2 — upper-inner-left (col 3, row 2) ── */
   {
-    id: 10,
+    id: 3,
     staggerRank: 2,
     imageUrl: PLACEHOLDER_URL,
-    desktopPos: { left: "68.5%", top: "70.7%" },
-    mobilePos: null,
-    mobileVisible: false
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 3)", top: "calc(var(--ctab-grid-cell) * 2)" },
+    mobilePos: { left: "0", top: "calc(var(--ctab-grid-cell) * 2)" },
+    mobileVisible: true
   },
-  /* ── Rank 3 — left mid-lower (dist ≈ 342) ────── */
+  /* ── Rank 3 — upper-inner-right (col 9, row 2) ── */
   {
-    id: 1,
+    id: 6,
     staggerRank: 3,
     imageUrl: PLACEHOLDER_URL,
-    desktopPos: { left: "24.0%", top: "70.7%" },
-    mobilePos: null,
-    mobileVisible: false
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 9)", top: "calc(var(--ctab-grid-cell) * 2)" },
+    mobilePos: { right: "0", top: "calc(var(--ctab-grid-cell) * 2)" },
+    mobileVisible: true
   },
-  /* ── Rank 4 — left upper (dist ≈ 345) ────────── */
+  /* ── Rank 4 — lower-inner-left (col 3, row 6) ── */
   {
-    id: 3,
+    id: 1,
     staggerRank: 4,
     imageUrl: PLACEHOLDER_URL,
-    desktopPos: { left: "24.0%", top: "14.4%" },
-    mobilePos: { left: "8.3%", top: "18.2%" },
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 3)", top: "calc(var(--ctab-grid-cell) * 6)" },
+    mobilePos: { left: "calc(50% - var(--ctab-avatar-size) / 2)", top: "calc(var(--ctab-grid-cell) * 9)" },
     mobileVisible: true
   },
-  /* ── Rank 5 — right upper (dist ≈ 345) ───────── */
+  /* ── Rank 5 — lower-inner-right (col 9, row 6) ── */
   {
-    id: 6,
+    id: 10,
     staggerRank: 5,
     imageUrl: PLACEHOLDER_URL,
-    desktopPos: { left: "68.5%", top: "14.4%" },
-    mobilePos: { right: "7.8%", top: "18.3%" },
-    mobileVisible: true
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 9)", top: "calc(var(--ctab-grid-cell) * 6)" },
+    mobilePos: null,
+    mobileVisible: false
   },
-  /* ── Rank 6 — far-right middle (dist ≈ 572) ──── */
+  /* ── Rank 6 — mid-left (col 0, row 4) ──────── */
   {
-    id: 8,
+    id: 5,
     staggerRank: 6,
     imageUrl: PLACEHOLDER_URL,
-    desktopPos: { left: "91.0%", top: "43.0%" },
-    mobilePos: { right: "7.8%", top: "77.2%" },
+    desktopPos: { left: "0", top: "calc(var(--ctab-grid-cell) * 4)" },
+    mobilePos: { left: "0", top: "calc(var(--ctab-grid-cell) * 8)" },
     mobileVisible: true
   },
-  /* ── Rank 7 — far-left middle (dist ≈ 577) ───── */
+  /* ── Rank 7 — mid-right (col 12, row 4) ────── */
   {
-    id: 5,
+    id: 8,
     staggerRank: 7,
     imageUrl: PLACEHOLDER_URL,
-    desktopPos: { left: "1.25%", top: "43.0%" },
-    mobilePos: { left: "8.6%", top: "72.8%" },
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 12)", top: "calc(var(--ctab-grid-cell) * 4)" },
+    mobilePos: { right: "0", top: "calc(var(--ctab-grid-cell) * 8)" },
     mobileVisible: true
   },
-  /* ── Rank 8 — far-right bottom (dist ≈ 639) ──── */
+  /* ── Rank 8 — top-left corner (col 0, row 1) ── */
   {
-    id: 9,
+    id: 4,
     staggerRank: 8,
     imageUrl: PLACEHOLDER_URL,
-    desktopPos: { left: "91.0%", top: "84.9%" },
+    desktopPos: { left: "0", top: "calc(var(--ctab-grid-cell) * 1)" },
     mobilePos: null,
     mobileVisible: false
   },
-  /* ── Rank 9 — far-right top (dist ≈ 642) ─────── */
+  /* ── Rank 9 — top-right corner (col 12, row 1) ── */
   {
     id: 7,
     staggerRank: 9,
     imageUrl: PLACEHOLDER_URL,
-    desktopPos: { left: "91.0%", top: "0%" },
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 12)", top: "calc(var(--ctab-grid-cell) * 1)" },
     mobilePos: null,
     mobileVisible: false
   },
-  /* ── Rank 10 — far-left bottom (dist ≈ 643) ──── */
+  /* ── Rank 10 — bot-left corner (col 0, row 7) ── */
   {
     id: 2,
     staggerRank: 10,
     imageUrl: PLACEHOLDER_URL,
-    desktopPos: { left: "1.25%", top: "84.9%" },
+    desktopPos: { left: "0", top: "calc(var(--ctab-grid-cell) * 7)" },
     mobilePos: null,
     mobileVisible: false
   },
-  /* ── Rank 11 — far-left top (dist ≈ 647) ─────── */
+  /* ── Rank 11 — bot-right corner (col 12, row 7) ── */
   {
-    id: 4,
+    id: 9,
     staggerRank: 11,
     imageUrl: PLACEHOLDER_URL,
-    desktopPos: { left: "1.25%", top: "0%" },
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 12)", top: "calc(var(--ctab-grid-cell) * 7)" },
+    mobilePos: null,
+    mobileVisible: false
+  }
+];
+var COMPACT_AVATAR_DATA = [
+  /* ── Rank 0 — top-centre (col ~6, row 1) ── */
+  {
+    id: 12,
+    staggerRank: 0,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "calc(50% - var(--ctab-avatar-size) / 2)", top: "calc(var(--ctab-grid-cell) * 1)" },
+    mobilePos: { left: "calc(50% - var(--ctab-avatar-size) / 2)", top: "calc(var(--ctab-grid-cell) * 1)" },
+    mobileVisible: true
+  },
+  /* ── Rank 1 — top-left (col 2, row 1) ───── */
+  {
+    id: 3,
+    staggerRank: 1,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 2)", top: "calc(var(--ctab-grid-cell) * 1)" },
+    mobilePos: { left: "0", top: "calc(var(--ctab-grid-cell) * 2)" },
+    mobileVisible: true
+  },
+  /* ── Rank 2 — top-right (col 10, row 1) ─── */
+  {
+    id: 6,
+    staggerRank: 2,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 10)", top: "calc(var(--ctab-grid-cell) * 1)" },
+    mobilePos: { right: "0", top: "calc(var(--ctab-grid-cell) * 2)" },
+    mobileVisible: true
+  },
+  /* ── Rank 3 — mid-left (col 0, row 3) ────── */
+  {
+    id: 5,
+    staggerRank: 3,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "0", top: "calc(var(--ctab-grid-cell) * 3)" },
+    mobilePos: { left: "0", top: "calc(var(--ctab-grid-cell) * 8)" },
+    mobileVisible: true
+  },
+  /* ── Rank 4 — mid-right (col 12, row 3) ──── */
+  {
+    id: 8,
+    staggerRank: 4,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 12)", top: "calc(var(--ctab-grid-cell) * 3)" },
+    mobilePos: { right: "0", top: "calc(var(--ctab-grid-cell) * 8)" },
+    mobileVisible: true
+  },
+  /* ── Rank 5 — bot-left (col 2, row 5) ────── */
+  {
+    id: 1,
+    staggerRank: 5,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 2)", top: "calc(var(--ctab-grid-cell) * 5)" },
+    mobilePos: { left: "calc(50% - var(--ctab-avatar-size) / 2)", top: "calc(var(--ctab-grid-cell) * 9)" },
+    mobileVisible: true
+  },
+  /* ── Rank 6 — bot-right (col 10, row 5) — desktop only ─── */
+  {
+    id: 11,
+    staggerRank: 6,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "calc(var(--ctab-grid-cell) * 10)", top: "calc(var(--ctab-grid-cell) * 5)" },
     mobilePos: null,
     mobileVisible: false
   }
 ];
 function useAvatarYValues(smooth) {
-  const y0 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.near, 0]);
-  const y1 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.near, 0]);
-  const y2 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
-  const y3 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
-  const y4 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
-  const y5 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
+  const y0 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.near, 0]);
+  const y1 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.near, 0]);
+  const y2 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
+  const y3 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
+  const y4 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
+  const y5 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
   const y6 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [0, 0]);
   const y7 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [0, 0]);
-  const y8 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.far, 0]);
+  const y8 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.edge, 0]);
   const y9 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.edge, 0]);
   const y10 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.edge, 0]);
-  const y11 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.edge, 0]);
+  const y11 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.edge, 0]);
   return [y0, y1, y2, y3, y4, y5, y6, y7, y8, y9, y10, y11];
 }
 function useAvatarXValues(smooth) {
   const x0 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [0, 0]);
   const x1 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [0, 0]);
-  const x2 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
-  const x3 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
+  const x2 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
+  const x3 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
   const x4 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
   const x5 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
-  const x6 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.far, 0]);
-  const x7 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.far, 0]);
-  const x8 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.far, 0]);
+  const x6 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.far, 0]);
+  const x7 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.far, 0]);
+  const x8 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.edge, 0]);
   const x9 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.edge, 0]);
   const x10 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.edge, 0]);
-  const x11 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.edge, 0]);
+  const x11 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.edge, 0]);
   return [x0, x1, x2, x3, x4, x5, x6, x7, x8, x9, x10, x11];
 }
+function useCompactAvatarYValues(smooth) {
+  const y0 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.near, 0]);
+  const y1 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
+  const y2 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
+  const y3 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [0, 0]);
+  const y4 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [0, 0]);
+  const y5 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
+  const y6 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
+  return [y0, y1, y2, y3, y4, y5, y6];
+}
+function useCompactAvatarXValues(smooth) {
+  const x0 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [0, 0]);
+  const x1 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
+  const x2 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
+  const x3 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.far, 0]);
+  const x4 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.far, 0]);
+  const x5 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
+  const x6 = (0, import_framer_motion.useTransform)(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
+  return [x0, x1, x2, x3, x4, x5, x6];
+}
 var CTABanner = ({
-  headline = "Join 3M+ global traders",
+  headline = "Short section title goes here",
   ctaLabel = "Open account",
   ctaHref = "#",
-  avatars = AVATAR_DATA,
+  avatars,
+  variant = "standard",
   className,
   ...props
 }) => {
+  const resolvedAvatars = avatars ?? (variant === "compact" ? COMPACT_AVATAR_DATA : AVATAR_DATA);
   const sectionRef = (0, import_react11.useRef)(null);
   const { scrollYProgress } = (0, import_framer_motion.useScroll)({
     target: sectionRef,
@@ -2140,13 +2228,17 @@ var CTABanner = ({
   const avatarOpacity = (0, import_framer_motion.useTransform)(smooth, [0, 0.25], [0, 1]);
   const blurPx = (0, import_framer_motion.useTransform)(smooth, [0, 0.3, 0.7, 1], [ENTRANCE.blurStart, 0, 0, ENTRANCE.blurStart]);
   const avatarFilter = import_framer_motion.useMotionTemplate`blur(${blurPx}px)`;
-  const avatarYValues = useAvatarYValues(smooth);
-  const avatarXValues = useAvatarXValues(smooth);
+  const standardYValues = useAvatarYValues(smooth);
+  const standardXValues = useAvatarXValues(smooth);
+  const compactYValues = useCompactAvatarYValues(smooth);
+  const compactXValues = useCompactAvatarXValues(smooth);
+  const avatarYValues = variant === "compact" ? compactYValues : standardYValues;
+  const avatarXValues = variant === "compact" ? compactXValues : standardXValues;
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "section",
     {
       ref: sectionRef,
-      className: ["ctab", className].filter(Boolean).join(" "),
+      className: ["ctab", variant === "compact" ? "ctab--compact" : "", className].filter(Boolean).join(" "),
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -2158,7 +2250,7 @@ var CTABanner = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "ctab__inner", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "ctab__stage", children: [
-          avatars.map((avatar, index) => {
+          resolvedAvatars.map((avatar, index) => {
             const posStyle = {};
             if (avatar.desktopPos.left) posStyle["--av-d-left"] = avatar.desktopPos.left;
             if (avatar.desktopPos.right) posStyle["--av-d-right"] = avatar.desktopPos.right;
@@ -2200,7 +2292,7 @@ var CTABanner = ({
               style: { y: heroY, opacity: heroOpacity },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { className: "ctab__headline", children: headline }),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("a", { href: ctaHref, className: "ctab__btn", children: ctaLabel })
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { colorScheme: "black", variant: "primary", label: ctaLabel }) })
               ]
             }
           )
@@ -2210,10 +2302,458 @@ var CTABanner = ({
   );
 };
 
-// templates/DayNightTransition/DayNightTransition.tsx
+// components/Navbar/Navbar.tsx
 var import_react12 = require("react");
 var import_framer_motion2 = require("framer-motion");
+
+// assets/icon-globe.svg
+var icon_globe_default = "./icon-globe-S54WYYEK.svg";
+
+// components/Navbar/Navbar.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
+var EASE_OUT_EXPO = [0.16, 1, 0.3, 1];
+var dropdownVariants = {
+  hidden: { opacity: 0, scale: 0.96, y: -8 },
+  visible: { opacity: 1, scale: 1, y: 0 }
+};
+var drawerVariants = {
+  hidden: { y: "-100%" },
+  visible: { y: 0 }
+};
+var accordionVariants = {
+  hidden: { height: 0, opacity: 0 },
+  visible: { height: "auto", opacity: 1 }
+};
+var ChevronDownIcon3 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  "svg",
+  {
+    className,
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "path",
+      {
+        d: "M2.625 4.8125L7 9.1875L11.375 4.8125",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+var ArrowRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  "path",
+  {
+    d: "M2.625 7H11.375M11.375 7L7.875 3.5M11.375 7L7.875 10.5",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var ArrowUpRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  "path",
+  {
+    d: "M4.5 11.5L11.5 4.5M11.5 4.5H5.5M11.5 4.5V10.5",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var BarsIcon = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  "path",
+  {
+    d: "M2.5 5H17.5M2.5 10H17.5M2.5 15H17.5",
+    stroke: "currentColor",
+    strokeWidth: "1.75",
+    strokeLinecap: "round"
+  }
+) });
+var XMarkIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  "path",
+  {
+    d: "M15 5L5 15M5 5L15 15",
+    stroke: "currentColor",
+    strokeWidth: "1.75",
+    strokeLinecap: "round"
+  }
+) });
+var GlobeIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: icon_globe_default, alt: "", "aria-hidden": "true", width: "20", height: "20", className });
+var DropdownPanel = ({ item, onMouseEnter, onMouseLeave }) => {
+  const { dropdown } = item;
+  if (!dropdown) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_framer_motion2.motion.div,
+    {
+      className: "navbar__dropdown",
+      variants: dropdownVariants,
+      initial: "hidden",
+      animate: "visible",
+      exit: "hidden",
+      transition: { duration: 0.18, ease: EASE_OUT_EXPO },
+      onMouseEnter,
+      onMouseLeave,
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__dropdown-inner", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__dropdown-left", children: dropdown.columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__dropdown-col", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__dropdown-col-list", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "navbar__dropdown-col-title", children: col.title }),
+          col.items.map((link) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+            "a",
+            {
+              href: link.href,
+              className: "navbar__dropdown-link",
+              target: link.external ? "_blank" : void 0,
+              rel: link.external ? "noopener noreferrer" : void 0,
+              children: [
+                link.label,
+                link.external ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowUpRightIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowRightIcon, {})
+              ]
+            },
+            link.href
+          ))
+        ] }) }, col.title)) }),
+        dropdown.feature && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__dropdown-right", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FeatureCard, { feature: dropdown.feature }) })
+      ] })
+    }
+  );
+};
+var FeatureCard = ({ feature, mobile }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  "div",
+  {
+    className: mobile ? "navbar__drawer-feature" : "navbar__dropdown-feature",
+    style: feature.backgroundImageUrl ? { backgroundImage: `url(${feature.backgroundImageUrl})` } : void 0,
+    children: [
+      feature.backgroundImageUrl && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        "img",
+        {
+          src: feature.backgroundImageUrl,
+          alt: "",
+          className: mobile ? "navbar__drawer-feature-img" : "navbar__dropdown-feature-img",
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: mobile ? "navbar__drawer-feature-overlay" : "navbar__dropdown-feature-overlay", "aria-hidden": "true" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: mobile ? "navbar__drawer-feature-content" : "navbar__dropdown-feature-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: mobile ? "navbar__drawer-feature-title" : "navbar__dropdown-feature-title", children: feature.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: mobile ? "navbar__drawer-feature-desc" : "navbar__dropdown-feature-desc", children: feature.description })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          "a",
+          {
+            href: feature.ctaHref,
+            className: mobile ? "navbar__drawer-feature-cta" : "navbar__dropdown-feature-cta",
+            children: [
+              feature.ctaLabel,
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowRightIcon, {})
+            ]
+          }
+        )
+      ] })
+    ]
+  }
+);
+var DrawerAccordion = ({ item, isOpen, onToggle }) => {
+  const { dropdown } = item;
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__drawer-item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      "button",
+      {
+        className: `navbar__drawer-trigger ${isOpen ? "navbar__drawer-trigger--open" : ""}`,
+        onClick: onToggle,
+        "aria-expanded": isOpen,
+        children: [
+          item.label,
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChevronDownIcon3, { className: "navbar__drawer-trigger__chevron" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_framer_motion2.AnimatePresence, { initial: false, children: isOpen && dropdown && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      import_framer_motion2.motion.div,
+      {
+        className: "navbar__drawer-panel",
+        variants: accordionVariants,
+        initial: "hidden",
+        animate: "visible",
+        exit: "hidden",
+        transition: { duration: 0.22, ease: EASE_OUT_EXPO },
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__drawer-panel-inner", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-panel-cols", children: [0, 1].map((colIdx) => {
+            const colItems = dropdown.columns.filter((_, i) => i % 2 === colIdx);
+            if (colItems.length === 0) return null;
+            return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-panel-col", children: colItems.map((col) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__drawer-col-section", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "navbar__drawer-col-title", children: col.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-col-links", children: col.items.map((link) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                "a",
+                {
+                  href: link.href,
+                  className: "navbar__drawer-link",
+                  target: link.external ? "_blank" : void 0,
+                  rel: link.external ? "noopener noreferrer" : void 0,
+                  children: link.label
+                },
+                link.href
+              )) })
+            ] }, col.title)) }, colIdx);
+          }) }),
+          dropdown.feature && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FeatureCard, { feature: dropdown.feature, mobile: true })
+        ] })
+      }
+    ) })
+  ] });
+};
+var Navbar = ({
+  theme = "dark",
+  logoSrc,
+  logoSrcDark,
+  logoHref = "/",
+  navItems = [],
+  loginLabel = "Log in",
+  loginHref,
+  ctaLabel = "Open account",
+  ctaHref,
+  languageLabel,
+  onLanguageClick,
+  className,
+  ...props
+}) => {
+  const [openDropdown, setOpenDropdown] = (0, import_react12.useState)(null);
+  const [mobileOpen, setMobileOpen] = (0, import_react12.useState)(false);
+  const [mobileExpanded, setMobileExpanded] = (0, import_react12.useState)(null);
+  const [scrolled, setScrolled] = (0, import_react12.useState)(false);
+  const hoverTimeoutRef = (0, import_react12.useRef)(null);
+  const pillAreaRef = (0, import_react12.useRef)(null);
+  const resolvedLogo = theme === "light" ? logoSrcDark ?? logoSrc : logoSrc;
+  (0, import_react12.useEffect)(() => {
+    const onScroll = () => setScrolled(window.scrollY > 0);
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+  (0, import_react12.useEffect)(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        setOpenDropdown(null);
+        setMobileOpen(false);
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, []);
+  (0, import_react12.useEffect)(() => {
+    document.body.style.overflow = mobileOpen ? "hidden" : "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [mobileOpen]);
+  (0, import_react12.useEffect)(() => {
+    if (!openDropdown) return;
+    const onPointerDown = (e) => {
+      if (pillAreaRef.current && !pillAreaRef.current.contains(e.target)) {
+        setOpenDropdown(null);
+      }
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [openDropdown]);
+  const clearHoverTimeout = (0, import_react12.useCallback)(() => {
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = null;
+    }
+  }, []);
+  const handleNavEnter = (0, import_react12.useCallback)((label) => {
+    clearHoverTimeout();
+    setOpenDropdown(label);
+  }, [clearHoverTimeout]);
+  const handleNavLeave = (0, import_react12.useCallback)(() => {
+    clearHoverTimeout();
+    hoverTimeoutRef.current = setTimeout(() => setOpenDropdown(null), 120);
+  }, [clearHoverTimeout]);
+  const activeDropdownItem = navItems.find((item) => item.label === openDropdown);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "nav",
+    {
+      className: ["navbar", `navbar--${theme}`, scrolled && "navbar--scrolled", mobileOpen && "navbar--menu-open", className].filter(Boolean).join(" "),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__bar", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: logoHref, className: "navbar__logo", "aria-label": "Home", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: resolvedLogo, alt: "Logo" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__nav-center", ref: pillAreaRef, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__pill", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: logoHref, className: "navbar__pill-logo", "aria-label": "Home", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: logoSrcDark ?? logoSrc, alt: "Logo" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__nav-group", children: [
+              navItems.map((item) => {
+                if (item.external) {
+                  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                    "a",
+                    {
+                      href: item.href,
+                      className: "navbar__nav-item",
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      children: [
+                        item.label,
+                        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowUpRightIcon, {})
+                      ]
+                    },
+                    item.label
+                  );
+                }
+                if (item.dropdown) {
+                  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                    "button",
+                    {
+                      className: [
+                        "navbar__nav-item",
+                        openDropdown === item.label ? "navbar__nav-item--open" : ""
+                      ].filter(Boolean).join(" "),
+                      onMouseEnter: () => handleNavEnter(item.label),
+                      onMouseLeave: handleNavLeave,
+                      "aria-expanded": openDropdown === item.label,
+                      "aria-haspopup": "true",
+                      children: [
+                        item.label,
+                        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChevronDownIcon3, { className: "navbar__nav-item__chevron" })
+                      ]
+                    },
+                    item.label
+                  );
+                }
+                return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: item.href, className: "navbar__nav-item", children: item.label }, item.label);
+              }),
+              languageLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { className: "navbar__nav-item navbar__lang-btn", onClick: onLanguageClick, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GlobeIcon, { className: "navbar__lang-globe" }),
+                languageLabel
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__pill-actions", children: [
+              loginHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: loginHref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { colorScheme: "black", variant: "secondary", label: loginLabel }) }),
+              ctaHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_framer_motion2.AnimatePresence, { children: openDropdown && activeDropdownItem?.dropdown && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            DropdownPanel,
+            {
+              item: activeDropdownItem,
+              onMouseEnter: clearHoverTimeout,
+              onMouseLeave: handleNavLeave
+            },
+            openDropdown
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__actions", children: [
+            loginHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: loginHref, className: "navbar__actions-login", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              Button,
+              {
+                colorScheme: theme === "dark" ? "white" : "black",
+                variant: "secondary",
+                label: loginLabel
+              }
+            ) }),
+            ctaHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__mobile-actions", children: [
+            loginHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: loginHref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              Button,
+              {
+                colorScheme: scrolled || theme === "light" ? "black" : "white",
+                variant: "secondary",
+                label: loginLabel
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              "button",
+              {
+                className: "navbar__mobile-trigger",
+                onClick: () => setMobileOpen((o) => !o),
+                "aria-label": mobileOpen ? "Close navigation menu" : "Open navigation menu",
+                children: mobileOpen ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(XMarkIcon2, {}) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(BarsIcon, {})
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-clip", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_framer_motion2.AnimatePresence, { children: mobileOpen && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          import_framer_motion2.motion.div,
+          {
+            className: "navbar__drawer",
+            variants: drawerVariants,
+            initial: "hidden",
+            animate: "visible",
+            exit: "hidden",
+            transition: { duration: 0.3, ease: EASE_OUT_EXPO },
+            "aria-modal": "true",
+            role: "dialog",
+            "aria-label": "Navigation menu",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("nav", { className: "navbar__drawer-nav", children: [
+                navItems.map((item) => {
+                  if (item.dropdown) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                      DrawerAccordion,
+                      {
+                        item,
+                        isOpen: mobileExpanded === item.label,
+                        onToggle: () => setMobileExpanded(
+                          (prev) => prev === item.label ? null : item.label
+                        )
+                      },
+                      item.label
+                    );
+                  }
+                  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                    "a",
+                    {
+                      href: item.href,
+                      className: "navbar__drawer-single",
+                      target: item.external ? "_blank" : void 0,
+                      rel: item.external ? "noopener noreferrer" : void 0,
+                      children: [
+                        item.label,
+                        item.external && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowUpRightIcon, {})
+                      ]
+                    },
+                    item.label
+                  );
+                }),
+                languageLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { className: "navbar__drawer-lang", onClick: onLanguageClick, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GlobeIcon, { className: "navbar__lang-globe" }),
+                  languageLabel
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__drawer-footer", children: [
+                loginHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: loginHref, style: { display: "block" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  Button,
+                  {
+                    colorScheme: "black",
+                    variant: "secondary",
+                    label: loginLabel,
+                    fullWidth: true
+                  }
+                ) }),
+                ctaHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: ctaHref, style: { display: "block" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  Button,
+                  {
+                    colorScheme: "coral",
+                    variant: "primary",
+                    label: ctaLabel,
+                    fullWidth: true
+                  }
+                ) })
+              ] })
+            ]
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+
+// templates/DayNightTransition/DayNightTransition.tsx
+var import_react13 = require("react");
+var import_framer_motion3 = require("framer-motion");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var SPRING2 = { stiffness: 80, damping: 30, restDelta: 1e-3 };
 var FADE_START = 0.35;
 var FADE_END = 0.65;
@@ -2233,26 +2773,26 @@ var DayNightTransition = ({
   className,
   ...props
 }) => {
-  const wrapperRef = (0, import_react12.useRef)(null);
-  const { scrollYProgress } = (0, import_framer_motion2.useScroll)({
+  const wrapperRef = (0, import_react13.useRef)(null);
+  const { scrollYProgress } = (0, import_framer_motion3.useScroll)({
     target: wrapperRef,
     offset: ["start end", "end start"]
   });
-  const smooth = (0, import_framer_motion2.useSpring)(scrollYProgress, SPRING2);
-  const nightOpacity = (0, import_framer_motion2.useTransform)(smooth, [FADE_START, FADE_END], [0, 1]);
-  const channel = (0, import_framer_motion2.useTransform)(smooth, [FADE_START, FADE_END], [TEXT_CHANNEL_DAY, TEXT_CHANNEL_NIGHT]);
-  const textColor = import_framer_motion2.useMotionTemplate`rgb(${channel}, ${channel}, ${channel})`;
-  const dayOpacity = (0, import_framer_motion2.useTransform)(smooth, [WORD_START, WORD_END], [1, 0]);
-  const nightOpacity2 = (0, import_framer_motion2.useTransform)(smooth, [WORD_START, WORD_END], [0, 1]);
+  const smooth = (0, import_framer_motion3.useSpring)(scrollYProgress, SPRING2);
+  const nightOpacity = (0, import_framer_motion3.useTransform)(smooth, [FADE_START, FADE_END], [0, 1]);
+  const channel = (0, import_framer_motion3.useTransform)(smooth, [FADE_START, FADE_END], [TEXT_CHANNEL_DAY, TEXT_CHANNEL_NIGHT]);
+  const textColor = import_framer_motion3.useMotionTemplate`rgb(${channel}, ${channel}, ${channel})`;
+  const dayOpacity = (0, import_framer_motion3.useTransform)(smooth, [WORD_START, WORD_END], [1, 0]);
+  const nightOpacity2 = (0, import_framer_motion3.useTransform)(smooth, [WORD_START, WORD_END], [0, 1]);
   const hasDescription = Boolean(dayDescription || nightDescription);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
     {
       ref: wrapperRef,
       className: ["dnt", className].filter(Boolean).join(" "),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "dnt__sticky", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "dnt__sticky", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "img",
           {
             className: "dnt__bg dnt__bg--day",
@@ -2262,8 +2802,8 @@ var DayNightTransition = ({
             draggable: false
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          import_framer_motion2.motion.img,
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          import_framer_motion3.motion.img,
           {
             className: "dnt__bg dnt__bg--night",
             src: nightImageUrl,
@@ -2273,23 +2813,23 @@ var DayNightTransition = ({
             style: { opacity: nightOpacity }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "dnt__content", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-          import_framer_motion2.motion.div,
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "dnt__content", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+          import_framer_motion3.motion.div,
           {
             className: "dnt__text-wrap",
             style: { color: textColor },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                  import_framer_motion2.motion.h2,
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  import_framer_motion3.motion.h2,
                   {
                     className: "dnt__headline",
                     style: { opacity: dayOpacity },
                     children: dayHeadline
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                  import_framer_motion2.motion.h2,
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  import_framer_motion3.motion.h2,
                   {
                     className: "dnt__headline",
                     "aria-hidden": "true",
@@ -2298,17 +2838,17 @@ var DayNightTransition = ({
                   }
                 )
               ] }),
-              hasDescription && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                  import_framer_motion2.motion.p,
+              hasDescription && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  import_framer_motion3.motion.p,
                   {
                     className: "dnt__description",
                     style: { opacity: dayOpacity },
                     children: dayDescription ?? ""
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                  import_framer_motion2.motion.p,
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  import_framer_motion3.motion.p,
                   {
                     className: "dnt__description",
                     "aria-hidden": "true",
@@ -2317,7 +2857,7 @@ var DayNightTransition = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: ctaHref, className: "dnt__btn", children: ctaLabel })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: ctaHref, className: "dnt__btn", children: ctaLabel })
             ]
           }
         ) })
@@ -2327,9 +2867,9 @@ var DayNightTransition = ({
 };
 
 // templates/PaymentMethods/PaymentMethods.tsx
-var import_react13 = require("react");
-var import_framer_motion3 = require("framer-motion");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_framer_motion4 = require("framer-motion");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function modWrap(min, max, v) {
   const range = max - min;
   return ((v - min) % range + range) % range + min;
@@ -2382,13 +2922,13 @@ var PaymentMethods = ({
   className,
   ...props
 }) => {
-  const { scrollY } = (0, import_framer_motion3.useScroll)();
-  const scrollVelocity = (0, import_framer_motion3.useVelocity)(scrollY);
-  const col1Y = (0, import_framer_motion3.useMotionValue)(0);
-  const col2Y = (0, import_framer_motion3.useMotionValue)(0);
-  const col1Ref = (0, import_react13.useRef)(null);
-  const col2Ref = (0, import_react13.useRef)(null);
-  (0, import_framer_motion3.useAnimationFrame)((_, delta) => {
+  const { scrollY } = (0, import_framer_motion4.useScroll)();
+  const scrollVelocity = (0, import_framer_motion4.useVelocity)(scrollY);
+  const col1Y = (0, import_framer_motion4.useMotionValue)(0);
+  const col2Y = (0, import_framer_motion4.useMotionValue)(0);
+  const col1Ref = (0, import_react14.useRef)(null);
+  const col2Ref = (0, import_react14.useRef)(null);
+  (0, import_framer_motion4.useAnimationFrame)((_, delta) => {
     const raw = scrollVelocity.get();
     if (Math.abs(raw) < DEADZONE) return;
     const clamped = Math.sign(raw) * Math.min(Math.abs(raw), MAX_SCROLL_V);
@@ -2400,21 +2940,21 @@ var PaymentMethods = ({
   });
   const track1 = [...col1Logos, ...col1Logos];
   const track2 = [...col2Logos, ...col2Logos];
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "section",
     {
       className: ["pm", className].filter(Boolean).join(" "),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "pm__inner", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "pm__media", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "pm__carousel", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "pm__fade pm__fade--top", "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-            import_framer_motion3.motion.div,
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "pm__inner", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pm__media", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "pm__carousel", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pm__fade pm__fade--top", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            import_framer_motion4.motion.div,
             {
               ref: col1Ref,
               className: "pm__col",
               style: { y: col1Y },
-              children: track1.map((logo, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "pm__card", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "pm__card-img-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              children: track1.map((logo, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pm__card", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pm__card-img-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 "img",
                 {
                   src: logo.url,
@@ -2425,13 +2965,13 @@ var PaymentMethods = ({
               ) }) }, `c1-${i}`))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-            import_framer_motion3.motion.div,
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            import_framer_motion4.motion.div,
             {
               ref: col2Ref,
               className: "pm__col",
               style: { y: col2Y },
-              children: track2.map((logo, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "pm__card", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "pm__card-img-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              children: track2.map((logo, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pm__card", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pm__card-img-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 "img",
                 {
                   src: logo.url,
@@ -2442,17 +2982,17 @@ var PaymentMethods = ({
               ) }) }, `c2-${i}`))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "pm__fade pm__fade--bottom", "aria-hidden": "true" })
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pm__fade pm__fade--bottom", "aria-hidden": "true" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "pm__content", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h2", { className: "pm__headline", children: headline }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "pm__text-group", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "pm__body", children: body }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "pm__disclaimer", children: disclaimer })
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "pm__content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h2", { className: "pm__headline", children: headline }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "pm__text-group", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "pm__body", children: body }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "pm__disclaimer", children: disclaimer })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("a", { href: ctaHref, className: "pm__link", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("a", { href: ctaHref, className: "pm__link", children: [
             ctaLabel,
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { "aria-hidden": "true", children: "\u2192" })
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { "aria-hidden": "true", children: "\u2192" })
           ] })
         ] })
       ] })
@@ -2477,6 +3017,7 @@ var PaymentMethods = ({
   Footer,
   Hero,
   Link,
+  Navbar,
   Pagination,
   PaymentMethods,
   SCROLLYTELLING_DATA,