@deriv-web-design/ui 0.0.13 → 0.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -32,18 +32,22 @@ __export(index_exports, {
32
32
  Chip: () => Chip,
33
33
  ChipDropdown: () => ChipDropdown,
34
34
  DayNightTransition: () => DayNightTransition,
35
+ DownloadBadge: () => DownloadBadge,
36
+ DownloadBanner: () => DownloadBanner,
35
37
  FeatureCards: () => FeatureCards,
38
+ FeatureCardsSecondary: () => FeatureCardsSecondary,
36
39
  Footer: () => Footer,
37
40
  Hero: () => Hero,
38
41
  Link: () => Link,
42
+ LogoMarquee: () => LogoMarquee,
39
43
  Navbar: () => Navbar,
40
44
  Pagination: () => Pagination,
41
- PaymentMethods: () => PaymentMethods,
42
45
  SCROLLYTELLING_DATA: () => SCROLLYTELLING_DATA,
43
46
  STEPS_DATA: () => STEPS_DATA,
44
47
  Scrollytelling: () => Scrollytelling,
45
48
  SearchField: () => SearchField,
46
49
  Stats: () => Stats,
50
+ Steps: () => Steps,
47
51
  StickyStackedCards: () => StickyStackedCards,
48
52
  TEXT_CONTENT: () => TEXT_CONTENT,
49
53
  Tag: () => Tag,
@@ -1083,10 +1087,50 @@ var FeatureCards = ({
1083
1087
  ] }) });
1084
1088
  };
1085
1089
 
1090
+ // templates/FeatureCardsSecondary/FeatureCardsSecondary.tsx
1091
+ var import_jsx_runtime17 = require("react/jsx-runtime");
1092
+ var FeatureCardsSecondary = ({
1093
+ sectionTitle,
1094
+ sectionDescription,
1095
+ showLink = false,
1096
+ linkText = "Learn more",
1097
+ onLinkClick,
1098
+ cards
1099
+ }) => {
1100
+ return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("section", { className: "fcs-section", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "fcs-container", children: [
1101
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "fcs-header", children: [
1102
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h2", { className: "fcs-sectionTitle", children: sectionTitle }),
1103
+ sectionDescription && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "fcs-sectionDescription", children: sectionDescription }),
1104
+ showLink && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1105
+ Link,
1106
+ {
1107
+ colorScheme: "coral",
1108
+ label: linkText,
1109
+ onClick: onLinkClick
1110
+ }
1111
+ )
1112
+ ] }),
1113
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `fcs-grid fcs-grid--${cards.length === 4 ? "4" : "3"}`, children: cards.map((card, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1114
+ Card,
1115
+ {
1116
+ variant: "secondary",
1117
+ title: card.title,
1118
+ description: card.description,
1119
+ icon: card.icon,
1120
+ showIcon: card.showIcon,
1121
+ showLink: card.showLink,
1122
+ linkText: card.linkText,
1123
+ onLinkClick: card.onLinkClick
1124
+ },
1125
+ index
1126
+ )) })
1127
+ ] }) });
1128
+ };
1129
+
1086
1130
  // components/Footer/Footer.tsx
1087
1131
  var import_react7 = require("react");
1088
- var import_jsx_runtime17 = require("react/jsx-runtime");
1089
- var ExternalLinkIcon = () => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1132
+ var import_jsx_runtime18 = require("react/jsx-runtime");
1133
+ var ExternalLinkIcon = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1090
1134
  "svg",
1091
1135
  {
1092
1136
  width: "12",
@@ -1095,7 +1139,7 @@ var ExternalLinkIcon = () => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1095
1139
  fill: "none",
1096
1140
  "aria-hidden": "true",
1097
1141
  focusable: "false",
1098
- children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1142
+ children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1099
1143
  "path",
1100
1144
  {
1101
1145
  d: "M2 2H10M10 2V10M10 2L2 10",
@@ -1107,7 +1151,7 @@ var ExternalLinkIcon = () => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1107
1151
  )
1108
1152
  }
1109
1153
  );
1110
- var ChevronDownIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1154
+ var ChevronDownIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1111
1155
  "svg",
1112
1156
  {
1113
1157
  width: "12",
@@ -1116,7 +1160,7 @@ var ChevronDownIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1116
1160
  fill: "none",
1117
1161
  "aria-hidden": "true",
1118
1162
  focusable: "false",
1119
- children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1163
+ children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1120
1164
  "path",
1121
1165
  {
1122
1166
  d: "M2 4L6 8L10 4",
@@ -1133,9 +1177,9 @@ var DerivGoBadges = ({
1133
1177
  appStoreBadge,
1134
1178
  huaweiBadge,
1135
1179
  availabilityNote
1136
- }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
1137
- /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "footer__app-badges", children: [
1138
- googlePlayBadge && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1180
+ }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
1181
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "footer__app-badges", children: [
1182
+ googlePlayBadge && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1139
1183
  "a",
1140
1184
  {
1141
1185
  href: googlePlayBadge.href,
@@ -1143,10 +1187,10 @@ var DerivGoBadges = ({
1143
1187
  "aria-label": googlePlayBadge.imageAlt,
1144
1188
  target: "_blank",
1145
1189
  rel: "noopener noreferrer",
1146
- children: googlePlayBadge.icon ?? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("img", { src: googlePlayBadge.imageSrc, alt: googlePlayBadge.imageAlt })
1190
+ children: googlePlayBadge.icon ?? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("img", { src: googlePlayBadge.imageSrc, alt: googlePlayBadge.imageAlt })
1147
1191
  }
1148
1192
  ),
1149
- appStoreBadge && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1193
+ appStoreBadge && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1150
1194
  "a",
1151
1195
  {
1152
1196
  href: appStoreBadge.href,
@@ -1154,10 +1198,10 @@ var DerivGoBadges = ({
1154
1198
  "aria-label": appStoreBadge.imageAlt,
1155
1199
  target: "_blank",
1156
1200
  rel: "noopener noreferrer",
1157
- children: appStoreBadge.icon ?? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("img", { src: appStoreBadge.imageSrc, alt: appStoreBadge.imageAlt })
1201
+ children: appStoreBadge.icon ?? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("img", { src: appStoreBadge.imageSrc, alt: appStoreBadge.imageAlt })
1158
1202
  }
1159
1203
  ),
1160
- huaweiBadge && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1204
+ huaweiBadge && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1161
1205
  "a",
1162
1206
  {
1163
1207
  href: huaweiBadge.href,
@@ -1165,13 +1209,13 @@ var DerivGoBadges = ({
1165
1209
  "aria-label": huaweiBadge.imageAlt,
1166
1210
  target: "_blank",
1167
1211
  rel: "noopener noreferrer",
1168
- children: huaweiBadge.icon ?? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("img", { src: huaweiBadge.imageSrc, alt: huaweiBadge.imageAlt })
1212
+ children: huaweiBadge.icon ?? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("img", { src: huaweiBadge.imageSrc, alt: huaweiBadge.imageAlt })
1169
1213
  }
1170
1214
  )
1171
1215
  ] }),
1172
- availabilityNote && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "footer__app-note", children: availabilityNote })
1216
+ availabilityNote && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "footer__app-note", children: availabilityNote })
1173
1217
  ] });
1174
- var NavLink = ({ label, href, isExternal, onClick }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
1218
+ var NavLink = ({ label, href, isExternal, onClick }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
1175
1219
  "a",
1176
1220
  {
1177
1221
  href,
@@ -1180,7 +1224,7 @@ var NavLink = ({ label, href, isExternal, onClick }) => /* @__PURE__ */ (0, impo
1180
1224
  ...isExternal ? { target: "_blank", rel: "noopener noreferrer" } : {},
1181
1225
  children: [
1182
1226
  label,
1183
- isExternal && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ExternalLinkIcon, {})
1227
+ isExternal && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ExternalLinkIcon, {})
1184
1228
  ]
1185
1229
  }
1186
1230
  );
@@ -1212,14 +1256,14 @@ var Footer = ({
1212
1256
  });
1213
1257
  };
1214
1258
  const aiLabel = aiSummary?.label ?? "Ask AI for a summary of Deriv";
1215
- return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1259
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1216
1260
  "footer",
1217
1261
  {
1218
1262
  className: ["footer", className].filter(Boolean).join(" "),
1219
1263
  ...props,
1220
- children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "footer__inner", children: [
1221
- /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "footer__header", children: [
1222
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "footer__logo-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1264
+ children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "footer__inner", children: [
1265
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "footer__header", children: [
1266
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "footer__logo-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1223
1267
  "img",
1224
1268
  {
1225
1269
  src: logoSrc,
@@ -1227,21 +1271,21 @@ var Footer = ({
1227
1271
  className: "footer__logo"
1228
1272
  }
1229
1273
  ) }),
1230
- aiSummary && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "footer__ai-bar footer__ai-bar--inline", children: [
1231
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "footer__ai-bar-label", children: aiLabel }),
1232
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "footer__ai-bar-icons", children: aiSummary.items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1274
+ aiSummary && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "footer__ai-bar footer__ai-bar--inline", children: [
1275
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "footer__ai-bar-label", children: aiLabel }),
1276
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "footer__ai-bar-icons", children: aiSummary.items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1233
1277
  "a",
1234
1278
  {
1235
1279
  href: item.href,
1236
1280
  "aria-label": item.imageAlt,
1237
1281
  target: "_blank",
1238
1282
  rel: "noopener noreferrer",
1239
- children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("img", { className: "footer__ai-icon", src: item.imageSrc, alt: item.imageAlt })
1283
+ children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("img", { className: "footer__ai-icon", src: item.imageSrc, alt: item.imageAlt })
1240
1284
  },
1241
1285
  i
1242
1286
  )) })
1243
1287
  ] }),
1244
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "footer__social footer__social--in-header", children: socialLinks.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1288
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "footer__social footer__social--in-header", children: socialLinks.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1245
1289
  "a",
1246
1290
  {
1247
1291
  href: link.href,
@@ -1254,27 +1298,27 @@ var Footer = ({
1254
1298
  i
1255
1299
  )) })
1256
1300
  ] }),
1257
- aiSummary && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "footer__ai-section", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "footer__ai-bar footer__ai-bar--block", children: [
1258
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "footer__ai-bar-label", children: aiLabel }),
1259
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "footer__ai-bar-icons", children: aiSummary.items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1301
+ aiSummary && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "footer__ai-section", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "footer__ai-bar footer__ai-bar--block", children: [
1302
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "footer__ai-bar-label", children: aiLabel }),
1303
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "footer__ai-bar-icons", children: aiSummary.items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1260
1304
  "a",
1261
1305
  {
1262
1306
  href: item.href,
1263
1307
  "aria-label": item.imageAlt,
1264
1308
  target: "_blank",
1265
1309
  rel: "noopener noreferrer",
1266
- children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("img", { className: "footer__ai-icon", src: item.imageSrc, alt: item.imageAlt })
1310
+ children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("img", { className: "footer__ai-icon", src: item.imageSrc, alt: item.imageAlt })
1267
1311
  },
1268
1312
  i
1269
1313
  )) })
1270
1314
  ] }) }),
1271
- /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "footer__nav footer__nav--columns", children: [
1272
- navColumns.map((column, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "footer__column", children: column.map((section, secIdx) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "footer__nav-section", children: [
1273
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "footer__nav-title", children: section.title }),
1274
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("ul", { className: "footer__nav-links", children: section.links.map((link, linkIdx) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(NavLink, { ...link }) }, linkIdx)) })
1315
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "footer__nav footer__nav--columns", children: [
1316
+ navColumns.map((column, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "footer__column", children: column.map((section, secIdx) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "footer__nav-section", children: [
1317
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "footer__nav-title", children: section.title }),
1318
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ul", { className: "footer__nav-links", children: section.links.map((link, linkIdx) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NavLink, { ...link }) }, linkIdx)) })
1275
1319
  ] }, secIdx)) }, colIdx)),
1276
- /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "footer__sidebar", children: [
1277
- investorsInPeopleSrc && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "footer__investors-card", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1320
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "footer__sidebar", children: [
1321
+ investorsInPeopleSrc && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "footer__investors-card", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1278
1322
  "img",
1279
1323
  {
1280
1324
  src: investorsInPeopleSrc,
@@ -1282,9 +1326,9 @@ var Footer = ({
1282
1326
  className: "footer__investors-img"
1283
1327
  }
1284
1328
  ) }),
1285
- derivGo && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "footer__deriv-go-card", children: [
1286
- /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "footer__deriv-go-header", children: [
1287
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1329
+ derivGo && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "footer__deriv-go-card", children: [
1330
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "footer__deriv-go-header", children: [
1331
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1288
1332
  "img",
1289
1333
  {
1290
1334
  src: derivGo.logoSrc,
@@ -1292,11 +1336,11 @@ var Footer = ({
1292
1336
  className: "footer__deriv-go-logo"
1293
1337
  }
1294
1338
  ),
1295
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "footer__deriv-go-title", children: derivGo.title ?? "Deriv GO" })
1339
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "footer__deriv-go-title", children: derivGo.title ?? "Deriv GO" })
1296
1340
  ] }),
1297
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "footer__deriv-go-desc", children: derivGo.description ?? "Trade multipliers on our mobile app." }),
1298
- (derivGo.qrCodeSrc || derivGo.qrCodeIcon) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "footer__deriv-go-qr", children: [
1299
- derivGo.qrCodeIcon ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "footer__deriv-go-qr-icon", children: derivGo.qrCodeIcon }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1341
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "footer__deriv-go-desc", children: derivGo.description ?? "Trade multipliers on our mobile app." }),
1342
+ (derivGo.qrCodeSrc || derivGo.qrCodeIcon) && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "footer__deriv-go-qr", children: [
1343
+ derivGo.qrCodeIcon ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "footer__deriv-go-qr-icon", children: derivGo.qrCodeIcon }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1300
1344
  "img",
1301
1345
  {
1302
1346
  src: derivGo.qrCodeSrc,
@@ -1304,9 +1348,9 @@ var Footer = ({
1304
1348
  className: "footer__deriv-go-qr-img"
1305
1349
  }
1306
1350
  ),
1307
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "footer__deriv-go-qr-label", children: derivGo.scanToDownloadLabel ?? "Scan to download" })
1351
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "footer__deriv-go-qr-label", children: derivGo.scanToDownloadLabel ?? "Scan to download" })
1308
1352
  ] }),
1309
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1353
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1310
1354
  DerivGoBadges,
1311
1355
  {
1312
1356
  googlePlayBadge: derivGo.googlePlayBadge,
@@ -1318,9 +1362,9 @@ var Footer = ({
1318
1362
  ] })
1319
1363
  ] })
1320
1364
  ] }),
1321
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "footer__nav footer__nav--accordion", children: allSections.map((section, idx) => {
1365
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "footer__nav footer__nav--accordion", children: allSections.map((section, idx) => {
1322
1366
  const isOpen = openSections.has(idx);
1323
- return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
1367
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
1324
1368
  "div",
1325
1369
  {
1326
1370
  className: [
@@ -1328,7 +1372,7 @@ var Footer = ({
1328
1372
  isOpen && "footer__accordion-item--open"
1329
1373
  ].filter(Boolean).join(" "),
1330
1374
  children: [
1331
- /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
1375
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
1332
1376
  "button",
1333
1377
  {
1334
1378
  type: "button",
@@ -1336,18 +1380,18 @@ var Footer = ({
1336
1380
  onClick: () => toggleSection(idx),
1337
1381
  "aria-expanded": isOpen,
1338
1382
  children: [
1339
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "footer__accordion-label", children: section.title }),
1340
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "footer__accordion-chevron", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChevronDownIcon2, {}) })
1383
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "footer__accordion-label", children: section.title }),
1384
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "footer__accordion-chevron", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChevronDownIcon2, {}) })
1341
1385
  ]
1342
1386
  }
1343
1387
  ),
1344
- isOpen && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("ul", { className: "footer__accordion-links", children: section.links.map((link, linkIdx) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(NavLink, { ...link }) }, linkIdx)) })
1388
+ isOpen && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ul", { className: "footer__accordion-links", children: section.links.map((link, linkIdx) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NavLink, { ...link }) }, linkIdx)) })
1345
1389
  ]
1346
1390
  },
1347
1391
  idx
1348
1392
  );
1349
1393
  }) }),
1350
- socialLinks.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "footer__social footer__social--standalone", children: socialLinks.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1394
+ socialLinks.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "footer__social footer__social--standalone", children: socialLinks.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1351
1395
  "a",
1352
1396
  {
1353
1397
  href: link.href,
@@ -1359,10 +1403,10 @@ var Footer = ({
1359
1403
  },
1360
1404
  i
1361
1405
  )) }),
1362
- derivGo && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "footer__deriv-go-banner", children: [
1363
- /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "footer__deriv-go-banner-info", children: [
1364
- /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "footer__deriv-go-header", children: [
1365
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1406
+ derivGo && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "footer__deriv-go-banner", children: [
1407
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "footer__deriv-go-banner-info", children: [
1408
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "footer__deriv-go-header", children: [
1409
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1366
1410
  "img",
1367
1411
  {
1368
1412
  src: derivGo.logoSrc,
@@ -1370,11 +1414,11 @@ var Footer = ({
1370
1414
  className: "footer__deriv-go-logo"
1371
1415
  }
1372
1416
  ),
1373
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "footer__deriv-go-title", children: derivGo.title ?? "Deriv GO" })
1417
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "footer__deriv-go-title", children: derivGo.title ?? "Deriv GO" })
1374
1418
  ] }),
1375
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "footer__deriv-go-desc", children: derivGo.description ?? "Trade multipliers on our mobile app." })
1419
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "footer__deriv-go-desc", children: derivGo.description ?? "Trade multipliers on our mobile app." })
1376
1420
  ] }),
1377
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "footer__deriv-go-banner-badges", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1421
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "footer__deriv-go-banner-badges", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1378
1422
  DerivGoBadges,
1379
1423
  {
1380
1424
  googlePlayBadge: derivGo.googlePlayBadge,
@@ -1384,11 +1428,11 @@ var Footer = ({
1384
1428
  }
1385
1429
  ) })
1386
1430
  ] }),
1387
- (licenseText || riskWarningText) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "footer__legal-block", children: [
1388
- licenseText && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "footer__license", children: licenseText }),
1389
- riskWarningText && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "footer__risk-warning", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "footer__risk-warning-text", children: riskWarningText }) })
1431
+ (licenseText || riskWarningText) && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "footer__legal-block", children: [
1432
+ licenseText && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "footer__license", children: licenseText }),
1433
+ riskWarningText && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "footer__risk-warning", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "footer__risk-warning-text", children: riskWarningText }) })
1390
1434
  ] }),
1391
- investorsInPeopleSrc && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "footer__investors-stacked", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1435
+ investorsInPeopleSrc && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "footer__investors-stacked", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1392
1436
  "img",
1393
1437
  {
1394
1438
  src: investorsInPeopleSrc,
@@ -1402,12 +1446,13 @@ var Footer = ({
1402
1446
  };
1403
1447
 
1404
1448
  // templates/Hero/Hero.tsx
1405
- var import_jsx_runtime18 = require("react/jsx-runtime");
1449
+ var import_react8 = require("react");
1450
+ var import_jsx_runtime19 = require("react/jsx-runtime");
1406
1451
  var Visual = ({
1407
1452
  src,
1408
1453
  className,
1409
1454
  alt = ""
1410
- }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className, children: typeof src === "string" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("img", { src, alt }) : src });
1455
+ }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className, children: typeof src === "string" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("img", { src, alt }) : src });
1411
1456
  var Hero = ({
1412
1457
  variant,
1413
1458
  subtitle,
@@ -1419,17 +1464,52 @@ var Hero = ({
1419
1464
  heroImage,
1420
1465
  leftVisual,
1421
1466
  rightVisual,
1467
+ productImage,
1468
+ floatingImage,
1422
1469
  className,
1423
1470
  ...props
1424
1471
  }) => {
1425
1472
  const variantClass = `hero--${variant}`;
1426
- const textBlock = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "hero__text", children: [
1427
- subtitle && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "hero__subtitle", children: subtitle }),
1428
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h2", { className: "hero__title", children: title }),
1429
- description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "hero__description", children: description })
1473
+ const sectionRef = (0, import_react8.useRef)(null);
1474
+ const leftRef = (0, import_react8.useRef)(null);
1475
+ const rightRef = (0, import_react8.useRef)(null);
1476
+ (0, import_react8.useEffect)(() => {
1477
+ if (variant !== "visuals") return;
1478
+ if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
1479
+ const section = sectionRef.current;
1480
+ const leftEl = leftRef.current;
1481
+ const rightEl = rightRef.current;
1482
+ if (!section || !leftEl || !rightEl) return;
1483
+ const STRENGTH = 60;
1484
+ const onScroll = () => {
1485
+ const rect = section.getBoundingClientRect();
1486
+ const viewH = window.innerHeight;
1487
+ const progress = 1 - rect.bottom / (viewH + rect.height);
1488
+ const clamped = Math.max(0, Math.min(1, progress));
1489
+ const offset = (clamped - 0.5) * STRENGTH * 2;
1490
+ leftEl.style.transform = `translateY(${-offset}px)`;
1491
+ rightEl.style.transform = `translateY(${offset}px)`;
1492
+ };
1493
+ const scrollEl = (() => {
1494
+ let el = section.parentElement;
1495
+ while (el && el !== document.documentElement) {
1496
+ const { overflow, overflowY } = getComputedStyle(el);
1497
+ if (/auto|scroll/.test(overflow + overflowY)) return el;
1498
+ el = el.parentElement;
1499
+ }
1500
+ return window;
1501
+ })();
1502
+ scrollEl.addEventListener("scroll", onScroll, { passive: true });
1503
+ onScroll();
1504
+ return () => scrollEl.removeEventListener("scroll", onScroll);
1505
+ }, [variant]);
1506
+ const textBlock = /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "hero__text", children: [
1507
+ subtitle && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "hero__subtitle", children: subtitle }),
1508
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { className: "hero__title", children: title }),
1509
+ description && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "hero__description", children: description })
1430
1510
  ] });
1431
- const buttonBlock = (primaryButton || secondaryButton) && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "hero__buttons", children: [
1432
- primaryButton && (primaryButton.href ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("a", { href: primaryButton.href, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1511
+ const buttonBlock = (primaryButton || secondaryButton) && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "hero__buttons", children: [
1512
+ primaryButton && (primaryButton.href ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("a", { href: primaryButton.href, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1433
1513
  Button,
1434
1514
  {
1435
1515
  colorScheme: "coral",
@@ -1437,7 +1517,7 @@ var Hero = ({
1437
1517
  label: primaryButton.label,
1438
1518
  onClick: primaryButton.onClick
1439
1519
  }
1440
- ) }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1520
+ ) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1441
1521
  Button,
1442
1522
  {
1443
1523
  colorScheme: "coral",
@@ -1446,7 +1526,7 @@ var Hero = ({
1446
1526
  onClick: primaryButton.onClick
1447
1527
  }
1448
1528
  )),
1449
- secondaryButton && (secondaryButton.href ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("a", { href: secondaryButton.href, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1529
+ secondaryButton && (secondaryButton.href ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("a", { href: secondaryButton.href, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1450
1530
  Button,
1451
1531
  {
1452
1532
  colorScheme: "white",
@@ -1454,7 +1534,7 @@ var Hero = ({
1454
1534
  label: secondaryButton.label,
1455
1535
  onClick: secondaryButton.onClick
1456
1536
  }
1457
- ) }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1537
+ ) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1458
1538
  Button,
1459
1539
  {
1460
1540
  colorScheme: "white",
@@ -1464,23 +1544,16 @@ var Hero = ({
1464
1544
  }
1465
1545
  ))
1466
1546
  ] });
1467
- if (variant === "homepage") {
1468
- return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
1547
+ if (variant === "split") {
1548
+ return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
1469
1549
  "section",
1470
1550
  {
1471
1551
  className: ["hero", variantClass, className].filter(Boolean).join(" "),
1552
+ style: backgroundImageSrc ? { backgroundImage: `url(${backgroundImageSrc})` } : void 0,
1472
1553
  ...props,
1473
1554
  children: [
1474
- backgroundImageSrc && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1475
- "img",
1476
- {
1477
- src: backgroundImageSrc,
1478
- alt: "",
1479
- className: "hero__bg-image",
1480
- "aria-hidden": "true"
1481
- }
1482
- ),
1483
- heroImage && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1555
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "hero__overlay", "aria-hidden": "true" }),
1556
+ heroImage && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1484
1557
  Visual,
1485
1558
  {
1486
1559
  src: heroImage,
@@ -1488,65 +1561,193 @@ var Hero = ({
1488
1561
  alt: ""
1489
1562
  }
1490
1563
  ),
1491
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "hero__overlay", "aria-hidden": "true" }),
1492
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "hero__inner", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "hero__content", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "hero__left", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "hero__body", children: [
1493
- textBlock,
1494
- buttonBlock
1564
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "hero__inner", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "hero__content", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "hero__left", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "hero__body", children: [
1565
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "hero__text", children: [
1566
+ subtitle && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "hero__subtitle", children: subtitle }),
1567
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { className: "hero__title", children: title }),
1568
+ description && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "hero__description", children: description })
1569
+ ] }),
1570
+ (primaryButton || secondaryButton) && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "hero__buttons", children: [
1571
+ primaryButton && (primaryButton.href ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("a", { href: primaryButton.href, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1572
+ Button,
1573
+ {
1574
+ colorScheme: "coral",
1575
+ variant: "primary",
1576
+ label: primaryButton.label,
1577
+ onClick: primaryButton.onClick
1578
+ }
1579
+ ) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1580
+ Button,
1581
+ {
1582
+ colorScheme: "coral",
1583
+ variant: "primary",
1584
+ label: primaryButton.label,
1585
+ onClick: primaryButton.onClick
1586
+ }
1587
+ )),
1588
+ secondaryButton && (secondaryButton.href ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("a", { href: secondaryButton.href, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1589
+ Button,
1590
+ {
1591
+ colorScheme: "white",
1592
+ variant: "secondary",
1593
+ label: secondaryButton.label,
1594
+ onClick: secondaryButton.onClick
1595
+ }
1596
+ ) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1597
+ Button,
1598
+ {
1599
+ colorScheme: "white",
1600
+ variant: "secondary",
1601
+ label: secondaryButton.label,
1602
+ onClick: secondaryButton.onClick
1603
+ }
1604
+ ))
1605
+ ] })
1495
1606
  ] }) }) }) })
1496
1607
  ]
1497
1608
  }
1498
1609
  );
1499
1610
  }
1500
- if (variant === "full-image") {
1501
- return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
1611
+ if (variant === "centered") {
1612
+ return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
1502
1613
  "section",
1503
1614
  {
1504
1615
  className: ["hero", variantClass, className].filter(Boolean).join(" "),
1616
+ style: backgroundImageSrc ? { backgroundImage: `url(${backgroundImageSrc})` } : void 0,
1505
1617
  ...props,
1506
1618
  children: [
1507
- backgroundImageSrc && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1508
- "img",
1509
- {
1510
- src: backgroundImageSrc,
1511
- alt: "",
1512
- className: "hero__bg-image",
1513
- "aria-hidden": "true"
1514
- }
1515
- ),
1516
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "hero__overlay", "aria-hidden": "true" }),
1517
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "hero__inner", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "hero__content", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "hero__body", children: [
1518
- textBlock,
1519
- buttonBlock
1520
- ] }) }) })
1619
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "hero__overlay", "aria-hidden": "true" }),
1620
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "hero__inner", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "hero__content", children: [
1621
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "hero__text", children: [
1622
+ subtitle && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "hero__subtitle", children: subtitle }),
1623
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { className: "hero__title", children: title }),
1624
+ description && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "hero__description", children: description })
1625
+ ] }),
1626
+ (primaryButton || secondaryButton) && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "hero__buttons", children: [
1627
+ primaryButton && (primaryButton.href ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("a", { href: primaryButton.href, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1628
+ Button,
1629
+ {
1630
+ colorScheme: "coral",
1631
+ variant: "primary",
1632
+ label: primaryButton.label,
1633
+ onClick: primaryButton.onClick
1634
+ }
1635
+ ) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1636
+ Button,
1637
+ {
1638
+ colorScheme: "coral",
1639
+ variant: "primary",
1640
+ label: primaryButton.label,
1641
+ onClick: primaryButton.onClick
1642
+ }
1643
+ )),
1644
+ secondaryButton && (secondaryButton.href ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("a", { href: secondaryButton.href, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1645
+ Button,
1646
+ {
1647
+ colorScheme: "white",
1648
+ variant: "secondary",
1649
+ label: secondaryButton.label,
1650
+ onClick: secondaryButton.onClick
1651
+ }
1652
+ ) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1653
+ Button,
1654
+ {
1655
+ colorScheme: "white",
1656
+ variant: "secondary",
1657
+ label: secondaryButton.label,
1658
+ onClick: secondaryButton.onClick
1659
+ }
1660
+ ))
1661
+ ] })
1662
+ ] }) })
1663
+ ]
1664
+ }
1665
+ );
1666
+ }
1667
+ if (variant === "showcase") {
1668
+ return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
1669
+ "section",
1670
+ {
1671
+ className: ["hero", variantClass, className].filter(Boolean).join(" "),
1672
+ style: backgroundImageSrc ? { backgroundImage: `url(${backgroundImageSrc})` } : void 0,
1673
+ ...props,
1674
+ children: [
1675
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "hero__overlay", "aria-hidden": "true" }),
1676
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "hero__inner", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "hero__content", children: [
1677
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "hero__text", children: [
1678
+ subtitle && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "hero__subtitle", children: subtitle }),
1679
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { className: "hero__title", children: title }),
1680
+ description && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "hero__description", children: description })
1681
+ ] }),
1682
+ (primaryButton || secondaryButton) && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "hero__buttons", children: [
1683
+ primaryButton && (primaryButton.href ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("a", { href: primaryButton.href, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1684
+ Button,
1685
+ {
1686
+ colorScheme: "coral",
1687
+ variant: "primary",
1688
+ label: primaryButton.label,
1689
+ onClick: primaryButton.onClick
1690
+ }
1691
+ ) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1692
+ Button,
1693
+ {
1694
+ colorScheme: "coral",
1695
+ variant: "primary",
1696
+ label: primaryButton.label,
1697
+ onClick: primaryButton.onClick
1698
+ }
1699
+ )),
1700
+ secondaryButton && (secondaryButton.href ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("a", { href: secondaryButton.href, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1701
+ Button,
1702
+ {
1703
+ colorScheme: "white",
1704
+ variant: "secondary",
1705
+ label: secondaryButton.label,
1706
+ onClick: secondaryButton.onClick
1707
+ }
1708
+ ) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1709
+ Button,
1710
+ {
1711
+ colorScheme: "white",
1712
+ variant: "secondary",
1713
+ label: secondaryButton.label,
1714
+ onClick: secondaryButton.onClick
1715
+ }
1716
+ ))
1717
+ ] }),
1718
+ productImage && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1719
+ Visual,
1720
+ {
1721
+ src: productImage,
1722
+ className: "hero__product-image",
1723
+ alt: ""
1724
+ }
1725
+ ),
1726
+ floatingImage && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1727
+ Visual,
1728
+ {
1729
+ src: floatingImage,
1730
+ className: "hero__floating-image",
1731
+ alt: ""
1732
+ }
1733
+ )
1734
+ ] }) })
1521
1735
  ]
1522
1736
  }
1523
1737
  );
1524
1738
  }
1525
- return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
1739
+ return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
1526
1740
  "section",
1527
1741
  {
1742
+ ref: sectionRef,
1528
1743
  className: ["hero", variantClass, className].filter(Boolean).join(" "),
1529
1744
  ...props,
1530
1745
  children: [
1531
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "hero__grid", "aria-hidden": "true" }),
1532
- variant === "visuals" && leftVisual && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1533
- Visual,
1534
- {
1535
- src: leftVisual,
1536
- className: "hero__visual hero__visual--left",
1537
- alt: ""
1538
- }
1539
- ),
1540
- variant === "visuals" && rightVisual && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1541
- Visual,
1542
- {
1543
- src: rightVisual,
1544
- className: "hero__visual hero__visual--right",
1545
- alt: ""
1546
- }
1547
- ),
1548
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "hero__overlay", "aria-hidden": "true" }),
1549
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "hero__inner", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "hero__content", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "hero__body", children: [
1746
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "hero__grid", "aria-hidden": "true" }),
1747
+ variant === "visuals" && leftVisual && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref: leftRef, className: "hero__visual hero__visual--left", children: typeof leftVisual === "string" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("img", { src: leftVisual, alt: "" }) : leftVisual }),
1748
+ variant === "visuals" && rightVisual && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref: rightRef, className: "hero__visual hero__visual--right", children: typeof rightVisual === "string" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("img", { src: rightVisual, alt: "" }) : rightVisual }),
1749
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "hero__overlay", "aria-hidden": "true" }),
1750
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "hero__inner", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "hero__content", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "hero__body", children: [
1550
1751
  textBlock,
1551
1752
  buttonBlock
1552
1753
  ] }) }) })
@@ -1556,8 +1757,8 @@ var Hero = ({
1556
1757
  };
1557
1758
 
1558
1759
  // templates/Stats/Stats.tsx
1559
- var import_react8 = require("react");
1560
- var import_jsx_runtime19 = require("react/jsx-runtime");
1760
+ var import_react9 = require("react");
1761
+ var import_jsx_runtime20 = require("react/jsx-runtime");
1561
1762
  var INTERVAL_MS = 2e3;
1562
1763
  var TRANSITION = "transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1)";
1563
1764
  function relativePos(index, active, total) {
@@ -1581,7 +1782,7 @@ function getStatStyle(rel) {
1581
1782
  transition: TRANSITION
1582
1783
  };
1583
1784
  }
1584
- var AwardBadge = ({ imageSrc, imageAlt = "" }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "stats__award", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("img", { src: imageSrc, alt: imageAlt, className: "stats__award-image" }) });
1785
+ var AwardBadge = ({ imageSrc, imageAlt = "" }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "stats__award", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("img", { src: imageSrc, alt: imageAlt, className: "stats__award-image" }) });
1585
1786
  var Stats = ({
1586
1787
  title,
1587
1788
  description,
@@ -1591,12 +1792,12 @@ var Stats = ({
1591
1792
  className,
1592
1793
  ...props
1593
1794
  }) => {
1594
- const [activeIndex, setActiveIndex] = (0, import_react8.useState)(0);
1595
- const intervalRef = (0, import_react8.useRef)(null);
1795
+ const [activeIndex, setActiveIndex] = (0, import_react9.useState)(0);
1796
+ const intervalRef = (0, import_react9.useRef)(null);
1596
1797
  const hasAwards = leftAwards.length > 0 || rightAwards.length > 0;
1597
1798
  const allAwards = [...leftAwards, ...rightAwards];
1598
1799
  const total = stats.length;
1599
- (0, import_react8.useEffect)(() => {
1800
+ (0, import_react9.useEffect)(() => {
1600
1801
  if (total <= 1) return;
1601
1802
  intervalRef.current = setInterval(() => {
1602
1803
  setActiveIndex((prev) => (prev + 1) % total);
@@ -1605,25 +1806,25 @@ var Stats = ({
1605
1806
  if (intervalRef.current) clearInterval(intervalRef.current);
1606
1807
  };
1607
1808
  }, [total]);
1608
- return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1809
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1609
1810
  "section",
1610
1811
  {
1611
1812
  className: ["stats", className].filter(Boolean).join(" "),
1612
1813
  ...props,
1613
- children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "stats__inner", children: [
1614
- /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "stats__header", children: [
1615
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { className: "stats__title", children: title }),
1616
- description && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "stats__description", children: description })
1814
+ children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "stats__inner", children: [
1815
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "stats__header", children: [
1816
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h2", { className: "stats__title", children: title }),
1817
+ description && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "stats__description", children: description })
1617
1818
  ] }),
1618
- /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "stats__content", children: [
1619
- leftAwards.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "stats__awards-col stats__awards-col--left", children: leftAwards.map((award, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AwardBadge, { ...award }, i)) }),
1620
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "stats__card", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "stats__card-track", children: [
1621
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "stats__fade stats__fade--top", "aria-hidden": "true" }),
1622
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "stats__fade stats__fade--bottom", "aria-hidden": "true" }),
1819
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "stats__content", children: [
1820
+ leftAwards.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "stats__awards-col stats__awards-col--left", children: leftAwards.map((award, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AwardBadge, { ...award }, i)) }),
1821
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "stats__card", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "stats__card-track", children: [
1822
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "stats__fade stats__fade--top", "aria-hidden": "true" }),
1823
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "stats__fade stats__fade--bottom", "aria-hidden": "true" }),
1623
1824
  stats.map((stat, i) => {
1624
1825
  const rel = relativePos(i, activeIndex, total);
1625
1826
  const active = rel === 0;
1626
- return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
1827
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
1627
1828
  "div",
1628
1829
  {
1629
1830
  className: [
@@ -1633,16 +1834,16 @@ var Stats = ({
1633
1834
  style: getStatStyle(rel),
1634
1835
  "aria-hidden": !active,
1635
1836
  children: [
1636
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "stats__stat-value", children: stat.value }),
1637
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "stats__stat-label", children: stat.label })
1837
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "stats__stat-value", children: stat.value }),
1838
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "stats__stat-label", children: stat.label })
1638
1839
  ]
1639
1840
  },
1640
1841
  i
1641
1842
  );
1642
1843
  })
1643
1844
  ] }) }),
1644
- rightAwards.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "stats__awards-col stats__awards-col--right", children: rightAwards.map((award, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AwardBadge, { ...award }, i)) }),
1645
- hasAwards && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "stats__awards-mobile", children: allAwards.map((award, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AwardBadge, { ...award }, i)) })
1845
+ rightAwards.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "stats__awards-col stats__awards-col--right", children: rightAwards.map((award, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AwardBadge, { ...award }, i)) }),
1846
+ hasAwards && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "stats__awards-mobile", children: allAwards.map((award, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AwardBadge, { ...award }, i)) })
1646
1847
  ] })
1647
1848
  ] })
1648
1849
  }
@@ -1650,9 +1851,9 @@ var Stats = ({
1650
1851
  };
1651
1852
 
1652
1853
  // templates/Scrollytelling/Scrollytelling.tsx
1653
- var import_react9 = require("react");
1854
+ var import_react10 = require("react");
1654
1855
  var import_dotlottie_react = require("@lottiefiles/dotlottie-react");
1655
- var import_jsx_runtime20 = require("react/jsx-runtime");
1856
+ var import_jsx_runtime21 = require("react/jsx-runtime");
1656
1857
  var SCROLLYTELLING_DATA = [
1657
1858
  {
1658
1859
  title: "Forex",
@@ -1697,7 +1898,7 @@ var SCROLLYTELLING_DATA = [
1697
1898
  mediaUrl: "https://cdn.prod.website-files.com/66fbaad381fa6866fa4991f3/675a9064f2c16e4e0732abfb_Stock%20Indices.lottie"
1698
1899
  }
1699
1900
  ];
1700
- var ChevronRight2 = () => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1901
+ var ChevronRight2 = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1701
1902
  "svg",
1702
1903
  {
1703
1904
  className: "scrolly__item-link-icon",
@@ -1706,7 +1907,7 @@ var ChevronRight2 = () => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1706
1907
  viewBox: "0 0 16 16",
1707
1908
  fill: "none",
1708
1909
  "aria-hidden": "true",
1709
- children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1910
+ children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1710
1911
  "path",
1711
1912
  {
1712
1913
  d: "M6 3l5 5-5 5",
@@ -1724,7 +1925,7 @@ function resolveMediaType(item) {
1724
1925
  }
1725
1926
  var MediaRenderer = ({ item, active }) => {
1726
1927
  if (resolveMediaType(item) === "lottie") {
1727
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1928
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1728
1929
  import_dotlottie_react.DotLottieReact,
1729
1930
  {
1730
1931
  src: item.mediaUrl,
@@ -1733,7 +1934,7 @@ var MediaRenderer = ({ item, active }) => {
1733
1934
  }
1734
1935
  );
1735
1936
  }
1736
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1937
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1737
1938
  "img",
1738
1939
  {
1739
1940
  src: item.mediaUrl,
@@ -1749,9 +1950,9 @@ var Scrollytelling = ({
1749
1950
  className,
1750
1951
  ...props
1751
1952
  }) => {
1752
- const [activeIndex, setActiveIndex] = (0, import_react9.useState)(0);
1753
- const itemRefs = (0, import_react9.useRef)([]);
1754
- (0, import_react9.useEffect)(() => {
1953
+ const [activeIndex, setActiveIndex] = (0, import_react10.useState)(0);
1954
+ const itemRefs = (0, import_react10.useRef)([]);
1955
+ (0, import_react10.useEffect)(() => {
1755
1956
  const elements = itemRefs.current.filter(Boolean);
1756
1957
  if (!elements.length) return;
1757
1958
  const observer = new IntersectionObserver(
@@ -1782,17 +1983,17 @@ var Scrollytelling = ({
1782
1983
  `scrolly--${variant}`,
1783
1984
  className
1784
1985
  ].filter(Boolean).join(" ");
1785
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("section", { className: rootClass, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "scrolly__inner", children: [
1786
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h2", { className: "scrolly__header", children: header }),
1787
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "scrolly__layout", children: [
1788
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "scrolly__media-col", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "scrolly__media-wrap", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1986
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("section", { className: rootClass, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "scrolly__inner", children: [
1987
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { className: "scrolly__header", children: header }),
1988
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "scrolly__layout", children: [
1989
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "scrolly__media-col", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "scrolly__media-wrap", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1789
1990
  "div",
1790
1991
  {
1791
1992
  className: [
1792
1993
  "scrolly__media-item",
1793
1994
  i === activeIndex ? "scrolly__media-item--active" : ""
1794
1995
  ].filter(Boolean).join(" "),
1795
- children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1996
+ children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1796
1997
  MediaRenderer,
1797
1998
  {
1798
1999
  item,
@@ -1802,7 +2003,7 @@ var Scrollytelling = ({
1802
2003
  },
1803
2004
  i
1804
2005
  )) }) }),
1805
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "scrolly__content-col", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
2006
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "scrolly__content-col", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
1806
2007
  "div",
1807
2008
  {
1808
2009
  ref: (el) => {
@@ -1813,16 +2014,16 @@ var Scrollytelling = ({
1813
2014
  i === activeIndex ? "scrolly__item--active" : "scrolly__item--inactive"
1814
2015
  ].join(" "),
1815
2016
  children: [
1816
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "scrolly__item-title", children: item.title }),
1817
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "scrolly__item-desc", children: item.description }),
1818
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
2017
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "scrolly__item-title", children: item.title }),
2018
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "scrolly__item-desc", children: item.description }),
2019
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
1819
2020
  "a",
1820
2021
  {
1821
2022
  href: item.link,
1822
2023
  className: "scrolly__item-link",
1823
2024
  children: [
1824
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: item.linkLabel }),
1825
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronRight2, {})
2025
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: item.linkLabel }),
2026
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronRight2, {})
1826
2027
  ]
1827
2028
  }
1828
2029
  )
@@ -1831,45 +2032,46 @@ var Scrollytelling = ({
1831
2032
  i
1832
2033
  )) })
1833
2034
  ] }),
1834
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "scrolly__mobile-list", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "scrolly__mobile-item", children: [
1835
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "scrolly__item-title", children: item.title }),
1836
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "scrolly__item-desc", children: item.description }),
1837
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
2035
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "scrolly__mobile-list", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "scrolly__mobile-item", children: [
2036
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "scrolly__item-title", children: item.title }),
2037
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "scrolly__item-desc", children: item.description }),
2038
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
1838
2039
  "a",
1839
2040
  {
1840
2041
  href: item.link,
1841
2042
  className: "scrolly__item-link",
1842
2043
  children: [
1843
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "Learn more" }),
1844
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronRight2, {})
2044
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Learn more" }),
2045
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronRight2, {})
1845
2046
  ]
1846
2047
  }
1847
2048
  ),
1848
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "scrolly__mobile-media", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MediaRenderer, { item, active: true }) })
2049
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "scrolly__mobile-media", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MediaRenderer, { item, active: true }) })
1849
2050
  ] }, i)) })
1850
2051
  ] }) });
1851
2052
  };
1852
2053
 
1853
2054
  // templates/StickyStackedCards/StickyStackedCards.tsx
1854
- var import_react10 = require("react");
1855
- var import_jsx_runtime21 = require("react/jsx-runtime");
2055
+ var import_react11 = require("react");
2056
+ var import_jsx_runtime22 = require("react/jsx-runtime");
2057
+ var PLACEHOLDER_IMAGE = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/69b9309379ac08e59ca8210a_1f3f555da9a5cbb13a6fe1bf0d5fe1b6_placeholder-image.webp";
1856
2058
  var STEPS_DATA = [
1857
2059
  {
1858
- title: "Sign up",
1859
- description: "Sign up in minutes. Practise with a zero-risk demo account.",
1860
- imageUrl: "https://cdn.prod.website-files.com/66585fe0e1dc7e70cc75d440/677cfad9dd757e95ee7fb4d9_image%20phone.webp",
2060
+ title: "Title goes here",
2061
+ description: "Explain how this specific feature helps your user.",
2062
+ imageUrl: PLACEHOLDER_IMAGE,
1861
2063
  theme: "light"
1862
2064
  },
1863
2065
  {
1864
- title: "Deposit",
1865
- description: "Use your favourite local payment method to fund your account.",
1866
- imageUrl: "https://cdn.prod.website-files.com/66585fe0e1dc7e70cc75d440/6757df583bf331c84b6c6a61_card-2.webp",
2066
+ title: "Title goes here",
2067
+ description: "Explain how this specific feature helps your user.",
2068
+ imageUrl: PLACEHOLDER_IMAGE,
1867
2069
  theme: "coral"
1868
2070
  },
1869
2071
  {
1870
- title: "Trade",
1871
- description: "Start your trading journey.",
1872
- imageUrl: "https://cdn.prod.website-files.com/66585fe0e1dc7e70cc75d440/6757df583bf331c84b6c6a59_card-3.webp",
2072
+ title: "Title goes here",
2073
+ description: "Explain how this specific feature helps your user.",
2074
+ imageUrl: PLACEHOLDER_IMAGE,
1873
2075
  theme: "dark"
1874
2076
  }
1875
2077
  ];
@@ -1880,8 +2082,8 @@ var StickyStackedCards = ({
1880
2082
  className,
1881
2083
  ...props
1882
2084
  }) => {
1883
- const cardRefs = (0, import_react10.useRef)([]);
1884
- (0, import_react10.useEffect)(() => {
2085
+ const cardRefs = (0, import_react11.useRef)([]);
2086
+ (0, import_react11.useEffect)(() => {
1885
2087
  if (typeof window === "undefined") return;
1886
2088
  let rafId = 0;
1887
2089
  const update = () => {
@@ -1915,14 +2117,14 @@ var StickyStackedCards = ({
1915
2117
  cancelAnimationFrame(rafId);
1916
2118
  };
1917
2119
  }, [items.length]);
1918
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
2120
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1919
2121
  "section",
1920
2122
  {
1921
2123
  className: ["ssc", className].filter(Boolean).join(" "),
1922
2124
  ...props,
1923
- children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "ssc__inner", children: [
1924
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { className: "ssc__header", children: header }),
1925
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "ssc__track", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
2125
+ children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "ssc__inner", children: [
2126
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { className: "ssc__header", children: header }),
2127
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "ssc__track", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
1926
2128
  "div",
1927
2129
  {
1928
2130
  ref: (el) => {
@@ -1948,11 +2150,11 @@ var StickyStackedCards = ({
1948
2150
  top: `calc(var(--ssc-sticky-top) + ${i} * var(--ssc-peek-offset))`
1949
2151
  },
1950
2152
  children: [
1951
- /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "ssc__card-content", children: [
1952
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "ssc__card-title", children: item.title }),
1953
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "ssc__card-desc", children: item.description })
2153
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "ssc__card-content", children: [
2154
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: "ssc__card-title", children: item.title }),
2155
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "ssc__card-desc", children: item.description })
1954
2156
  ] }),
1955
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "ssc__card-image", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
2157
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "ssc__card-image", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1956
2158
  "img",
1957
2159
  {
1958
2160
  src: item.imageUrl,
@@ -1970,9 +2172,9 @@ var StickyStackedCards = ({
1970
2172
  };
1971
2173
 
1972
2174
  // templates/CTABanner/CTABanner.tsx
1973
- var import_react11 = require("react");
2175
+ var import_react12 = require("react");
1974
2176
  var import_framer_motion = require("framer-motion");
1975
- var import_jsx_runtime22 = require("react/jsx-runtime");
2177
+ var import_jsx_runtime23 = require("react/jsx-runtime");
1976
2178
  var ENTRANCE = {
1977
2179
  near: 80,
1978
2180
  mid: 130,
@@ -2218,7 +2420,7 @@ var CTABanner = ({
2218
2420
  ...props
2219
2421
  }) => {
2220
2422
  const resolvedAvatars = avatars ?? (variant === "compact" ? COMPACT_AVATAR_DATA : AVATAR_DATA);
2221
- const sectionRef = (0, import_react11.useRef)(null);
2423
+ const sectionRef = (0, import_react12.useRef)(null);
2222
2424
  const { scrollYProgress } = (0, import_framer_motion.useScroll)({
2223
2425
  target: sectionRef,
2224
2426
  offset: ["start end", "end start"]
@@ -2236,14 +2438,14 @@ var CTABanner = ({
2236
2438
  const compactXValues = useCompactAvatarXValues(smooth);
2237
2439
  const avatarYValues = variant === "compact" ? compactYValues : standardYValues;
2238
2440
  const avatarXValues = variant === "compact" ? compactXValues : standardXValues;
2239
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
2441
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2240
2442
  "section",
2241
2443
  {
2242
2444
  ref: sectionRef,
2243
2445
  className: ["ctab", variant === "compact" ? "ctab--compact" : "", className].filter(Boolean).join(" "),
2244
2446
  ...props,
2245
2447
  children: [
2246
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
2448
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2247
2449
  import_framer_motion.motion.div,
2248
2450
  {
2249
2451
  className: "ctab__grid",
@@ -2251,7 +2453,7 @@ var CTABanner = ({
2251
2453
  "aria-hidden": "true"
2252
2454
  }
2253
2455
  ),
2254
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "ctab__inner", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "ctab__stage", children: [
2456
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "ctab__inner", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "ctab__stage", children: [
2255
2457
  resolvedAvatars.map((avatar, index) => {
2256
2458
  const posStyle = {};
2257
2459
  if (avatar.desktopPos.left) posStyle["--av-d-left"] = avatar.desktopPos.left;
@@ -2260,7 +2462,7 @@ var CTABanner = ({
2260
2462
  if (avatar.mobilePos?.left) posStyle["--av-m-left"] = avatar.mobilePos.left;
2261
2463
  if (avatar.mobilePos?.right) posStyle["--av-m-right"] = avatar.mobilePos.right;
2262
2464
  if (avatar.mobilePos?.top) posStyle["--av-m-top"] = avatar.mobilePos.top;
2263
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
2465
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2264
2466
  import_framer_motion.motion.div,
2265
2467
  {
2266
2468
  className: [
@@ -2274,7 +2476,7 @@ var CTABanner = ({
2274
2476
  opacity: avatarOpacity,
2275
2477
  filter: avatarFilter
2276
2478
  },
2277
- children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
2479
+ children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2278
2480
  "img",
2279
2481
  {
2280
2482
  src: avatar.imageUrl,
@@ -2287,14 +2489,14 @@ var CTABanner = ({
2287
2489
  avatar.id
2288
2490
  );
2289
2491
  }),
2290
- /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
2492
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2291
2493
  import_framer_motion.motion.div,
2292
2494
  {
2293
2495
  className: "ctab__hero",
2294
2496
  style: { y: heroY, opacity: heroOpacity },
2295
2497
  children: [
2296
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { className: "ctab__headline", children: headline }),
2297
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { colorScheme: "black", variant: "primary", label: ctaLabel }) })
2498
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h2", { className: "ctab__headline", children: headline }),
2499
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { colorScheme: "black", variant: "primary", label: ctaLabel }) })
2298
2500
  ]
2299
2501
  }
2300
2502
  )
@@ -2305,14 +2507,14 @@ var CTABanner = ({
2305
2507
  };
2306
2508
 
2307
2509
  // components/Navbar/Navbar.tsx
2308
- var import_react12 = require("react");
2510
+ var import_react13 = require("react");
2309
2511
  var import_framer_motion2 = require("framer-motion");
2310
2512
 
2311
2513
  // assets/icon-globe.svg
2312
2514
  var icon_globe_default = "./icon-globe-S54WYYEK.svg";
2313
2515
 
2314
2516
  // components/Navbar/Navbar.tsx
2315
- var import_jsx_runtime23 = require("react/jsx-runtime");
2517
+ var import_jsx_runtime24 = require("react/jsx-runtime");
2316
2518
  var EASE_OUT_EXPO = [0.16, 1, 0.3, 1];
2317
2519
  var dropdownVariants = {
2318
2520
  hidden: { opacity: 0, scale: 0.96, y: -8 },
@@ -2326,7 +2528,7 @@ var accordionVariants = {
2326
2528
  hidden: { height: 0, opacity: 0 },
2327
2529
  visible: { height: "auto", opacity: 1 }
2328
2530
  };
2329
- var ChevronDownIcon3 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2531
+ var ChevronDownIcon3 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2330
2532
  "svg",
2331
2533
  {
2332
2534
  className,
@@ -2335,7 +2537,7 @@ var ChevronDownIcon3 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime
2335
2537
  viewBox: "0 0 14 14",
2336
2538
  fill: "none",
2337
2539
  "aria-hidden": "true",
2338
- children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2540
+ children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2339
2541
  "path",
2340
2542
  {
2341
2543
  d: "M2.625 4.8125L7 9.1875L11.375 4.8125",
@@ -2347,7 +2549,7 @@ var ChevronDownIcon3 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime
2347
2549
  )
2348
2550
  }
2349
2551
  );
2350
- 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)(
2552
+ var ArrowRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2351
2553
  "path",
2352
2554
  {
2353
2555
  d: "M2.625 7H11.375M11.375 7L7.875 3.5M11.375 7L7.875 10.5",
@@ -2357,7 +2559,7 @@ var ArrowRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg",
2357
2559
  strokeLinejoin: "round"
2358
2560
  }
2359
2561
  ) });
2360
- 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)(
2562
+ var ArrowUpRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2361
2563
  "path",
2362
2564
  {
2363
2565
  d: "M4.5 11.5L11.5 4.5M11.5 4.5H5.5M11.5 4.5V10.5",
@@ -2367,7 +2569,7 @@ var ArrowUpRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg"
2367
2569
  strokeLinejoin: "round"
2368
2570
  }
2369
2571
  ) });
2370
- 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)(
2572
+ var BarsIcon = () => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2371
2573
  "path",
2372
2574
  {
2373
2575
  d: "M2.5 5H17.5M2.5 10H17.5M2.5 15H17.5",
@@ -2376,7 +2578,7 @@ var BarsIcon = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { widt
2376
2578
  strokeLinecap: "round"
2377
2579
  }
2378
2580
  ) });
2379
- 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)(
2581
+ var XMarkIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2380
2582
  "path",
2381
2583
  {
2382
2584
  d: "M15 5L5 15M5 5L15 15",
@@ -2385,7 +2587,7 @@ var XMarkIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { wi
2385
2587
  strokeLinecap: "round"
2386
2588
  }
2387
2589
  ) });
2388
- var ChevronLeftIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2590
+ var ChevronLeftIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2389
2591
  "svg",
2390
2592
  {
2391
2593
  className,
@@ -2394,7 +2596,7 @@ var ChevronLeftIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2
2394
2596
  viewBox: "0 0 24 24",
2395
2597
  fill: "none",
2396
2598
  "aria-hidden": "true",
2397
- children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2599
+ children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2398
2600
  "path",
2399
2601
  {
2400
2602
  d: "M15 18L9 12L15 6",
@@ -2406,11 +2608,11 @@ var ChevronLeftIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2
2406
2608
  )
2407
2609
  }
2408
2610
  );
2409
- var GlobeIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: icon_globe_default, alt: "", "aria-hidden": "true", width: "20", height: "20", className });
2611
+ var GlobeIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("img", { src: icon_globe_default, alt: "", "aria-hidden": "true", width: "20", height: "20", className });
2410
2612
  var DropdownPanel = ({ item, onMouseEnter, onMouseLeave }) => {
2411
2613
  const { dropdown } = item;
2412
2614
  if (!dropdown) return null;
2413
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2615
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2414
2616
  import_framer_motion2.motion.div,
2415
2617
  {
2416
2618
  className: "navbar__dropdown",
@@ -2421,10 +2623,10 @@ var DropdownPanel = ({ item, onMouseEnter, onMouseLeave }) => {
2421
2623
  transition: { duration: 0.18, ease: EASE_OUT_EXPO },
2422
2624
  onMouseEnter,
2423
2625
  onMouseLeave,
2424
- children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__dropdown-inner", children: [
2425
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__dropdown-left", children: dropdown.columns.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__dropdown-col", children: col.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__dropdown-col-list", children: [
2426
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "navbar__dropdown-col-title", children: section.title }),
2427
- section.items.map((link) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2626
+ children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "navbar__dropdown-inner", children: [
2627
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "navbar__dropdown-left", children: dropdown.columns.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "navbar__dropdown-col", children: col.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "navbar__dropdown-col-list", children: [
2628
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "navbar__dropdown-col-title", children: section.title }),
2629
+ section.items.map((link) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
2428
2630
  "a",
2429
2631
  {
2430
2632
  href: link.href,
@@ -2433,24 +2635,24 @@ var DropdownPanel = ({ item, onMouseEnter, onMouseLeave }) => {
2433
2635
  rel: link.external ? "noopener noreferrer" : void 0,
2434
2636
  children: [
2435
2637
  link.label,
2436
- link.external ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowUpRightIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowRightIcon, {})
2638
+ link.external ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ArrowUpRightIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ArrowRightIcon, {})
2437
2639
  ]
2438
2640
  },
2439
2641
  link.href
2440
2642
  ))
2441
2643
  ] }, section.title)) }, colIdx)) }),
2442
- dropdown.feature && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__dropdown-right", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FeatureCard, { feature: dropdown.feature }) })
2644
+ dropdown.feature && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "navbar__dropdown-right", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FeatureCard, { feature: dropdown.feature }) })
2443
2645
  ] })
2444
2646
  }
2445
2647
  );
2446
2648
  };
2447
- var FeatureCard = ({ feature, mobile }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2649
+ var FeatureCard = ({ feature, mobile }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
2448
2650
  "div",
2449
2651
  {
2450
2652
  className: mobile ? "navbar__drawer-feature" : "navbar__dropdown-feature",
2451
2653
  style: feature.backgroundImageUrl ? { backgroundImage: `url(${feature.backgroundImageUrl})` } : void 0,
2452
2654
  children: [
2453
- feature.backgroundImageUrl && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2655
+ feature.backgroundImageUrl && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2454
2656
  "img",
2455
2657
  {
2456
2658
  src: feature.backgroundImageUrl,
@@ -2459,20 +2661,20 @@ var FeatureCard = ({ feature, mobile }) => /* @__PURE__ */ (0, import_jsx_runtim
2459
2661
  "aria-hidden": "true"
2460
2662
  }
2461
2663
  ),
2462
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: mobile ? "navbar__drawer-feature-overlay" : "navbar__dropdown-feature-overlay", "aria-hidden": "true" }),
2463
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: mobile ? "navbar__drawer-feature-content" : "navbar__dropdown-feature-content", children: [
2464
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
2465
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: mobile ? "navbar__drawer-feature-title" : "navbar__dropdown-feature-title", children: feature.title }),
2466
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: mobile ? "navbar__drawer-feature-desc" : "navbar__dropdown-feature-desc", children: feature.description })
2664
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: mobile ? "navbar__drawer-feature-overlay" : "navbar__dropdown-feature-overlay", "aria-hidden": "true" }),
2665
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: mobile ? "navbar__drawer-feature-content" : "navbar__dropdown-feature-content", children: [
2666
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
2667
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: mobile ? "navbar__drawer-feature-title" : "navbar__dropdown-feature-title", children: feature.title }),
2668
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: mobile ? "navbar__drawer-feature-desc" : "navbar__dropdown-feature-desc", children: feature.description })
2467
2669
  ] }),
2468
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2670
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
2469
2671
  "a",
2470
2672
  {
2471
2673
  href: feature.ctaHref,
2472
2674
  className: mobile ? "navbar__drawer-feature-cta" : "navbar__dropdown-feature-cta",
2473
2675
  children: [
2474
2676
  feature.ctaLabel,
2475
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowRightIcon, {})
2677
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ArrowRightIcon, {})
2476
2678
  ]
2477
2679
  }
2478
2680
  )
@@ -2482,8 +2684,8 @@ var FeatureCard = ({ feature, mobile }) => /* @__PURE__ */ (0, import_jsx_runtim
2482
2684
  );
2483
2685
  var DrawerAccordion = ({ item, isOpen, onToggle }) => {
2484
2686
  const { dropdown } = item;
2485
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__drawer-item", children: [
2486
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2687
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "navbar__drawer-item", children: [
2688
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
2487
2689
  "button",
2488
2690
  {
2489
2691
  className: `navbar__drawer-trigger ${isOpen ? "navbar__drawer-trigger--open" : ""}`,
@@ -2491,11 +2693,11 @@ var DrawerAccordion = ({ item, isOpen, onToggle }) => {
2491
2693
  "aria-expanded": isOpen,
2492
2694
  children: [
2493
2695
  item.label,
2494
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChevronDownIcon3, { className: "navbar__drawer-trigger__chevron" })
2696
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChevronDownIcon3, { className: "navbar__drawer-trigger__chevron" })
2495
2697
  ]
2496
2698
  }
2497
2699
  ),
2498
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_framer_motion2.AnimatePresence, { initial: false, children: isOpen && dropdown && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2700
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_framer_motion2.AnimatePresence, { initial: false, children: isOpen && dropdown && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2499
2701
  import_framer_motion2.motion.div,
2500
2702
  {
2501
2703
  className: "navbar__drawer-panel",
@@ -2504,10 +2706,10 @@ var DrawerAccordion = ({ item, isOpen, onToggle }) => {
2504
2706
  animate: "visible",
2505
2707
  exit: "hidden",
2506
2708
  transition: { duration: 0.22, ease: EASE_OUT_EXPO },
2507
- children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__drawer-panel-inner", children: [
2508
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-panel-cols", children: dropdown.columns.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-panel-col", children: col.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__drawer-col-section", children: [
2509
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "navbar__drawer-col-title", children: section.title }),
2510
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-col-links", children: section.items.map((link) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2709
+ children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "navbar__drawer-panel-inner", children: [
2710
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "navbar__drawer-panel-cols", children: dropdown.columns.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "navbar__drawer-panel-col", children: col.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "navbar__drawer-col-section", children: [
2711
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "navbar__drawer-col-title", children: section.title }),
2712
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "navbar__drawer-col-links", children: section.items.map((link) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2511
2713
  "a",
2512
2714
  {
2513
2715
  href: link.href,
@@ -2519,7 +2721,7 @@ var DrawerAccordion = ({ item, isOpen, onToggle }) => {
2519
2721
  link.href
2520
2722
  )) })
2521
2723
  ] }, section.title)) }, colIdx)) }),
2522
- dropdown.feature && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FeatureCard, { feature: dropdown.feature, mobile: true })
2724
+ dropdown.feature && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FeatureCard, { feature: dropdown.feature, mobile: true })
2523
2725
  ] })
2524
2726
  }
2525
2727
  ) })
@@ -2543,24 +2745,24 @@ var Navbar = ({
2543
2745
  className,
2544
2746
  ...props
2545
2747
  }) => {
2546
- const [openDropdown, setOpenDropdown] = (0, import_react12.useState)(null);
2547
- const [mobileOpen, setMobileOpen] = (0, import_react12.useState)(false);
2548
- const [mobileExpanded, setMobileExpanded] = (0, import_react12.useState)(null);
2549
- const [scrolled, setScrolled] = (0, import_react12.useState)(false);
2550
- const [langDropdownOpen, setLangDropdownOpen] = (0, import_react12.useState)(false);
2551
- const [mobileLangOpen, setMobileLangOpen] = (0, import_react12.useState)(false);
2552
- const hoverTimeoutRef = (0, import_react12.useRef)(null);
2553
- const langHoverTimeoutRef = (0, import_react12.useRef)(null);
2554
- const pillAreaRef = (0, import_react12.useRef)(null);
2555
- const langBtnRef = (0, import_react12.useRef)(null);
2748
+ const [openDropdown, setOpenDropdown] = (0, import_react13.useState)(null);
2749
+ const [mobileOpen, setMobileOpen] = (0, import_react13.useState)(false);
2750
+ const [mobileExpanded, setMobileExpanded] = (0, import_react13.useState)(null);
2751
+ const [scrolled, setScrolled] = (0, import_react13.useState)(false);
2752
+ const [langDropdownOpen, setLangDropdownOpen] = (0, import_react13.useState)(false);
2753
+ const [mobileLangOpen, setMobileLangOpen] = (0, import_react13.useState)(false);
2754
+ const hoverTimeoutRef = (0, import_react13.useRef)(null);
2755
+ const langHoverTimeoutRef = (0, import_react13.useRef)(null);
2756
+ const pillAreaRef = (0, import_react13.useRef)(null);
2757
+ const langBtnRef = (0, import_react13.useRef)(null);
2556
2758
  const hasLangDropdown = Boolean(languageItems && languageItems.length > 0);
2557
2759
  const resolvedLogo = theme === "light" ? logoSrcDark ?? logoSrc : logoSrc;
2558
- (0, import_react12.useEffect)(() => {
2760
+ (0, import_react13.useEffect)(() => {
2559
2761
  const onScroll = () => setScrolled(window.scrollY > 0);
2560
2762
  window.addEventListener("scroll", onScroll, { passive: true });
2561
2763
  return () => window.removeEventListener("scroll", onScroll);
2562
2764
  }, []);
2563
- (0, import_react12.useEffect)(() => {
2765
+ (0, import_react13.useEffect)(() => {
2564
2766
  const onKey = (e) => {
2565
2767
  if (e.key === "Escape") {
2566
2768
  setOpenDropdown(null);
@@ -2571,16 +2773,16 @@ var Navbar = ({
2571
2773
  document.addEventListener("keydown", onKey);
2572
2774
  return () => document.removeEventListener("keydown", onKey);
2573
2775
  }, []);
2574
- (0, import_react12.useEffect)(() => {
2776
+ (0, import_react13.useEffect)(() => {
2575
2777
  if (!mobileOpen) setMobileLangOpen(false);
2576
2778
  }, [mobileOpen]);
2577
- (0, import_react12.useEffect)(() => {
2779
+ (0, import_react13.useEffect)(() => {
2578
2780
  document.body.style.overflow = mobileOpen ? "hidden" : "";
2579
2781
  return () => {
2580
2782
  document.body.style.overflow = "";
2581
2783
  };
2582
2784
  }, [mobileOpen]);
2583
- (0, import_react12.useEffect)(() => {
2785
+ (0, import_react13.useEffect)(() => {
2584
2786
  if (!openDropdown) return;
2585
2787
  const onPointerDown = (e) => {
2586
2788
  if (pillAreaRef.current && !pillAreaRef.current.contains(e.target)) {
@@ -2590,54 +2792,54 @@ var Navbar = ({
2590
2792
  document.addEventListener("pointerdown", onPointerDown);
2591
2793
  return () => document.removeEventListener("pointerdown", onPointerDown);
2592
2794
  }, [openDropdown]);
2593
- const clearHoverTimeout = (0, import_react12.useCallback)(() => {
2795
+ const clearHoverTimeout = (0, import_react13.useCallback)(() => {
2594
2796
  if (hoverTimeoutRef.current) {
2595
2797
  clearTimeout(hoverTimeoutRef.current);
2596
2798
  hoverTimeoutRef.current = null;
2597
2799
  }
2598
2800
  }, []);
2599
- const clearLangHoverTimeout = (0, import_react12.useCallback)(() => {
2801
+ const clearLangHoverTimeout = (0, import_react13.useCallback)(() => {
2600
2802
  if (langHoverTimeoutRef.current) {
2601
2803
  clearTimeout(langHoverTimeoutRef.current);
2602
2804
  langHoverTimeoutRef.current = null;
2603
2805
  }
2604
2806
  }, []);
2605
- const handleLangEnter = (0, import_react12.useCallback)(() => {
2807
+ const handleLangEnter = (0, import_react13.useCallback)(() => {
2606
2808
  clearLangHoverTimeout();
2607
2809
  setLangDropdownOpen(true);
2608
2810
  }, [clearLangHoverTimeout]);
2609
- const handleLangLeave = (0, import_react12.useCallback)(() => {
2811
+ const handleLangLeave = (0, import_react13.useCallback)(() => {
2610
2812
  clearLangHoverTimeout();
2611
2813
  langHoverTimeoutRef.current = setTimeout(() => setLangDropdownOpen(false), 150);
2612
2814
  }, [clearLangHoverTimeout]);
2613
- const handleLangSelect = (0, import_react12.useCallback)((code) => {
2815
+ const handleLangSelect = (0, import_react13.useCallback)((code) => {
2614
2816
  setLangDropdownOpen(false);
2615
2817
  setMobileLangOpen(false);
2616
2818
  onLanguageSelect?.(code);
2617
2819
  }, [onLanguageSelect]);
2618
- const handleNavEnter = (0, import_react12.useCallback)((label) => {
2820
+ const handleNavEnter = (0, import_react13.useCallback)((label) => {
2619
2821
  clearHoverTimeout();
2620
2822
  setOpenDropdown(label);
2621
2823
  }, [clearHoverTimeout]);
2622
- const handleNavLeave = (0, import_react12.useCallback)(() => {
2824
+ const handleNavLeave = (0, import_react13.useCallback)(() => {
2623
2825
  clearHoverTimeout();
2624
2826
  hoverTimeoutRef.current = setTimeout(() => setOpenDropdown(null), 120);
2625
2827
  }, [clearHoverTimeout]);
2626
2828
  const activeDropdownItem = navItems.find((item) => item.label === openDropdown);
2627
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2829
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
2628
2830
  "nav",
2629
2831
  {
2630
2832
  className: ["navbar", `navbar--${theme}`, scrolled && "navbar--scrolled", mobileOpen && "navbar--menu-open", className].filter(Boolean).join(" "),
2631
2833
  ...props,
2632
2834
  children: [
2633
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__bar", children: [
2634
- /* @__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" }) }),
2635
- /* @__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: [
2636
- /* @__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" }) }),
2637
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__nav-group", children: [
2835
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "navbar__bar", children: [
2836
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: logoHref, className: "navbar__logo", "aria-label": "Home", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("img", { src: resolvedLogo, alt: "Logo" }) }),
2837
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "navbar__nav-center", ref: pillAreaRef, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "navbar__pill", children: [
2838
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: logoHref, className: "navbar__pill-logo", "aria-label": "Home", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("img", { src: logoSrcDark ?? logoSrc, alt: "Logo" }) }),
2839
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "navbar__nav-group", children: [
2638
2840
  navItems.map((item) => {
2639
2841
  if (item.external) {
2640
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2842
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
2641
2843
  "a",
2642
2844
  {
2643
2845
  href: item.href,
@@ -2646,14 +2848,14 @@ var Navbar = ({
2646
2848
  rel: "noopener noreferrer",
2647
2849
  children: [
2648
2850
  item.label,
2649
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowUpRightIcon, {})
2851
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ArrowUpRightIcon, {})
2650
2852
  ]
2651
2853
  },
2652
2854
  item.label
2653
2855
  );
2654
2856
  }
2655
2857
  if (item.dropdown) {
2656
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2858
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
2657
2859
  "button",
2658
2860
  {
2659
2861
  className: [
@@ -2666,21 +2868,21 @@ var Navbar = ({
2666
2868
  "aria-haspopup": "true",
2667
2869
  children: [
2668
2870
  item.label,
2669
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChevronDownIcon3, { className: "navbar__nav-item__chevron" })
2871
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChevronDownIcon3, { className: "navbar__nav-item__chevron" })
2670
2872
  ]
2671
2873
  },
2672
2874
  item.label
2673
2875
  );
2674
2876
  }
2675
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: item.href, className: "navbar__nav-item", children: item.label }, item.label);
2877
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: item.href, className: "navbar__nav-item", children: item.label }, item.label);
2676
2878
  }),
2677
- languageLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2879
+ languageLabel && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2678
2880
  "div",
2679
2881
  {
2680
2882
  className: "navbar__lang-wrapper",
2681
2883
  onMouseEnter: hasLangDropdown ? handleLangEnter : void 0,
2682
2884
  onMouseLeave: hasLangDropdown ? handleLangLeave : void 0,
2683
- children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2885
+ children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
2684
2886
  "button",
2685
2887
  {
2686
2888
  ref: langBtnRef,
@@ -2689,7 +2891,7 @@ var Navbar = ({
2689
2891
  "aria-haspopup": hasLangDropdown ? "true" : void 0,
2690
2892
  "aria-expanded": hasLangDropdown ? langDropdownOpen : void 0,
2691
2893
  children: [
2692
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GlobeIcon, { className: "navbar__lang-globe" }),
2894
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GlobeIcon, { className: "navbar__lang-globe" }),
2693
2895
  languageLabel
2694
2896
  ]
2695
2897
  }
@@ -2697,12 +2899,12 @@ var Navbar = ({
2697
2899
  }
2698
2900
  )
2699
2901
  ] }),
2700
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__pill-actions", children: [
2701
- loginHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: loginHref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { colorScheme: "black", variant: "secondary", label: loginLabel }) }),
2702
- ctaHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
2902
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "navbar__pill-actions", children: [
2903
+ loginHref && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: loginHref, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { colorScheme: "black", variant: "secondary", label: loginLabel }) }),
2904
+ ctaHref && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
2703
2905
  ] })
2704
2906
  ] }) }),
2705
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_framer_motion2.AnimatePresence, { children: openDropdown && activeDropdownItem?.dropdown && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2907
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_framer_motion2.AnimatePresence, { children: openDropdown && activeDropdownItem?.dropdown && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2706
2908
  DropdownPanel,
2707
2909
  {
2708
2910
  item: activeDropdownItem,
@@ -2711,7 +2913,7 @@ var Navbar = ({
2711
2913
  },
2712
2914
  "dropdown"
2713
2915
  ) }),
2714
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_framer_motion2.AnimatePresence, { children: hasLangDropdown && langDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2916
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_framer_motion2.AnimatePresence, { children: hasLangDropdown && langDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2715
2917
  import_framer_motion2.motion.div,
2716
2918
  {
2717
2919
  className: "navbar__lang-dropdown",
@@ -2722,12 +2924,12 @@ var Navbar = ({
2722
2924
  transition: { duration: 0.18, ease: EASE_OUT_EXPO },
2723
2925
  onMouseEnter: clearLangHoverTimeout,
2724
2926
  onMouseLeave: handleLangLeave,
2725
- children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2927
+ children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2726
2928
  "div",
2727
2929
  {
2728
2930
  className: "navbar__lang-dropdown-grid",
2729
2931
  style: { "--lang-rows": Math.ceil(languageItems.length / 3) },
2730
- children: languageItems.map((lang) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2932
+ children: languageItems.map((lang) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2731
2933
  "button",
2732
2934
  {
2733
2935
  className: [
@@ -2743,8 +2945,8 @@ var Navbar = ({
2743
2945
  )
2744
2946
  }
2745
2947
  ) }),
2746
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__actions", children: [
2747
- loginHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: loginHref, className: "navbar__actions-login", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2948
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "navbar__actions", children: [
2949
+ loginHref && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: loginHref, className: "navbar__actions-login", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2748
2950
  Button,
2749
2951
  {
2750
2952
  colorScheme: theme === "dark" ? "white" : "black",
@@ -2752,10 +2954,10 @@ var Navbar = ({
2752
2954
  label: loginLabel
2753
2955
  }
2754
2956
  ) }),
2755
- ctaHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
2957
+ ctaHref && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
2756
2958
  ] }),
2757
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__mobile-actions", children: [
2758
- loginHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: loginHref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2959
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "navbar__mobile-actions", children: [
2960
+ loginHref && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: loginHref, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2759
2961
  Button,
2760
2962
  {
2761
2963
  colorScheme: scrolled || theme === "light" ? "black" : "white",
@@ -2763,18 +2965,18 @@ var Navbar = ({
2763
2965
  label: loginLabel
2764
2966
  }
2765
2967
  ) }),
2766
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2968
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2767
2969
  "button",
2768
2970
  {
2769
2971
  className: "navbar__mobile-trigger",
2770
2972
  onClick: () => setMobileOpen((o) => !o),
2771
2973
  "aria-label": mobileOpen ? "Close navigation menu" : "Open navigation menu",
2772
- children: mobileOpen ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(XMarkIcon2, {}) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(BarsIcon, {})
2974
+ children: mobileOpen ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(XMarkIcon2, {}) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(BarsIcon, {})
2773
2975
  }
2774
2976
  )
2775
2977
  ] })
2776
2978
  ] }),
2777
- /* @__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)(
2979
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "navbar__drawer-clip", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_framer_motion2.AnimatePresence, { children: mobileOpen && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
2778
2980
  import_framer_motion2.motion.div,
2779
2981
  {
2780
2982
  className: "navbar__drawer",
@@ -2787,10 +2989,10 @@ var Navbar = ({
2787
2989
  role: "dialog",
2788
2990
  "aria-label": "Navigation menu",
2789
2991
  children: [
2790
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("nav", { className: "navbar__drawer-nav", children: [
2992
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("nav", { className: "navbar__drawer-nav", children: [
2791
2993
  navItems.map((item) => {
2792
2994
  if (item.dropdown) {
2793
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2995
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2794
2996
  DrawerAccordion,
2795
2997
  {
2796
2998
  item,
@@ -2802,7 +3004,7 @@ var Navbar = ({
2802
3004
  item.label
2803
3005
  );
2804
3006
  }
2805
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
3007
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
2806
3008
  "a",
2807
3009
  {
2808
3010
  href: item.href,
@@ -2811,30 +3013,30 @@ var Navbar = ({
2811
3013
  rel: item.external ? "noopener noreferrer" : void 0,
2812
3014
  children: [
2813
3015
  item.label,
2814
- item.external && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowUpRightIcon, {})
3016
+ item.external && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ArrowUpRightIcon, {})
2815
3017
  ]
2816
3018
  },
2817
3019
  item.label
2818
3020
  );
2819
3021
  }),
2820
- languageLabel && !hasLangDropdown && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { className: "navbar__drawer-lang", onClick: onLanguageClick, children: [
2821
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GlobeIcon, { className: "navbar__lang-globe" }),
3022
+ languageLabel && !hasLangDropdown && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("button", { className: "navbar__drawer-lang", onClick: onLanguageClick, children: [
3023
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GlobeIcon, { className: "navbar__lang-globe" }),
2822
3024
  languageLabel
2823
3025
  ] }),
2824
- languageLabel && hasLangDropdown && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
3026
+ languageLabel && hasLangDropdown && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
2825
3027
  "button",
2826
3028
  {
2827
3029
  className: "navbar__drawer-lang",
2828
3030
  onClick: () => setMobileLangOpen(true),
2829
3031
  children: [
2830
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GlobeIcon, { className: "navbar__lang-globe" }),
3032
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GlobeIcon, { className: "navbar__lang-globe" }),
2831
3033
  languageLabel
2832
3034
  ]
2833
3035
  }
2834
3036
  )
2835
3037
  ] }),
2836
- !mobileLangOpen && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__drawer-footer", children: [
2837
- loginHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: loginHref, style: { display: "block" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
3038
+ !mobileLangOpen && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "navbar__drawer-footer", children: [
3039
+ loginHref && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: loginHref, style: { display: "block" }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2838
3040
  Button,
2839
3041
  {
2840
3042
  colorScheme: "black",
@@ -2843,7 +3045,7 @@ var Navbar = ({
2843
3045
  fullWidth: true
2844
3046
  }
2845
3047
  ) }),
2846
- ctaHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: ctaHref, style: { display: "block" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
3048
+ ctaHref && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: ctaHref, style: { display: "block" }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2847
3049
  Button,
2848
3050
  {
2849
3051
  colorScheme: "coral",
@@ -2853,7 +3055,7 @@ var Navbar = ({
2853
3055
  }
2854
3056
  ) })
2855
3057
  ] }),
2856
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_framer_motion2.AnimatePresence, { children: hasLangDropdown && mobileLangOpen && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
3058
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_framer_motion2.AnimatePresence, { children: hasLangDropdown && mobileLangOpen && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
2857
3059
  import_framer_motion2.motion.div,
2858
3060
  {
2859
3061
  className: "navbar__drawer-lang-panel",
@@ -2862,16 +3064,16 @@ var Navbar = ({
2862
3064
  exit: { y: "100%" },
2863
3065
  transition: { duration: 0.25, ease: EASE_OUT_EXPO },
2864
3066
  children: [
2865
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
3067
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2866
3068
  "button",
2867
3069
  {
2868
3070
  className: "navbar__drawer-lang-back",
2869
3071
  onClick: () => setMobileLangOpen(false),
2870
3072
  "aria-label": "Back to menu",
2871
- children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChevronLeftIcon, {})
3073
+ children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChevronLeftIcon, {})
2872
3074
  }
2873
3075
  ),
2874
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-lang-grid", children: languageItems.map((lang) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
3076
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "navbar__drawer-lang-grid", children: languageItems.map((lang) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2875
3077
  "button",
2876
3078
  {
2877
3079
  className: [
@@ -2895,9 +3097,9 @@ var Navbar = ({
2895
3097
  };
2896
3098
 
2897
3099
  // templates/DayNightTransition/DayNightTransition.tsx
2898
- var import_react13 = require("react");
3100
+ var import_react14 = require("react");
2899
3101
  var import_framer_motion3 = require("framer-motion");
2900
- var import_jsx_runtime24 = require("react/jsx-runtime");
3102
+ var import_jsx_runtime25 = require("react/jsx-runtime");
2901
3103
  var SPRING2 = { stiffness: 80, damping: 30, restDelta: 1e-3 };
2902
3104
  var FADE_START = 0.35;
2903
3105
  var FADE_END = 0.65;
@@ -2917,7 +3119,7 @@ var DayNightTransition = ({
2917
3119
  className,
2918
3120
  ...props
2919
3121
  }) => {
2920
- const wrapperRef = (0, import_react13.useRef)(null);
3122
+ const wrapperRef = (0, import_react14.useRef)(null);
2921
3123
  const { scrollYProgress } = (0, import_framer_motion3.useScroll)({
2922
3124
  target: wrapperRef,
2923
3125
  offset: ["start end", "end start"]
@@ -2929,14 +3131,14 @@ var DayNightTransition = ({
2929
3131
  const dayOpacity = (0, import_framer_motion3.useTransform)(smooth, [WORD_START, WORD_END], [1, 0]);
2930
3132
  const nightOpacity2 = (0, import_framer_motion3.useTransform)(smooth, [WORD_START, WORD_END], [0, 1]);
2931
3133
  const hasDescription = Boolean(dayDescription || nightDescription);
2932
- return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
3134
+ return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
2933
3135
  "div",
2934
3136
  {
2935
3137
  ref: wrapperRef,
2936
3138
  className: ["dnt", className].filter(Boolean).join(" "),
2937
3139
  ...props,
2938
- children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "dnt__sticky", children: [
2939
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
3140
+ children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "dnt__sticky", children: [
3141
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
2940
3142
  "img",
2941
3143
  {
2942
3144
  className: "dnt__bg dnt__bg--day",
@@ -2946,7 +3148,7 @@ var DayNightTransition = ({
2946
3148
  draggable: false
2947
3149
  }
2948
3150
  ),
2949
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
3151
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
2950
3152
  import_framer_motion3.motion.img,
2951
3153
  {
2952
3154
  className: "dnt__bg dnt__bg--night",
@@ -2957,14 +3159,14 @@ var DayNightTransition = ({
2957
3159
  style: { opacity: nightOpacity }
2958
3160
  }
2959
3161
  ),
2960
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "dnt__content", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
3162
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "dnt__content", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
2961
3163
  import_framer_motion3.motion.div,
2962
3164
  {
2963
3165
  className: "dnt__text-wrap",
2964
3166
  style: { color: textColor },
2965
3167
  children: [
2966
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
2967
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
3168
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
3169
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
2968
3170
  import_framer_motion3.motion.h2,
2969
3171
  {
2970
3172
  className: "dnt__headline",
@@ -2972,7 +3174,7 @@ var DayNightTransition = ({
2972
3174
  children: dayHeadline
2973
3175
  }
2974
3176
  ),
2975
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
3177
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
2976
3178
  import_framer_motion3.motion.h2,
2977
3179
  {
2978
3180
  className: "dnt__headline",
@@ -2982,8 +3184,8 @@ var DayNightTransition = ({
2982
3184
  }
2983
3185
  )
2984
3186
  ] }),
2985
- hasDescription && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
2986
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
3187
+ hasDescription && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
3188
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
2987
3189
  import_framer_motion3.motion.p,
2988
3190
  {
2989
3191
  className: "dnt__description",
@@ -2991,7 +3193,7 @@ var DayNightTransition = ({
2991
3193
  children: dayDescription ?? ""
2992
3194
  }
2993
3195
  ),
2994
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
3196
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
2995
3197
  import_framer_motion3.motion.p,
2996
3198
  {
2997
3199
  className: "dnt__description",
@@ -3001,7 +3203,7 @@ var DayNightTransition = ({
3001
3203
  }
3002
3204
  )
3003
3205
  ] }),
3004
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: ctaHref, className: "dnt__btn", children: ctaLabel })
3206
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("a", { href: ctaHref, className: "dnt__btn", children: ctaLabel })
3005
3207
  ]
3006
3208
  }
3007
3209
  ) })
@@ -3010,10 +3212,10 @@ var DayNightTransition = ({
3010
3212
  );
3011
3213
  };
3012
3214
 
3013
- // templates/PaymentMethods/PaymentMethods.tsx
3014
- var import_react14 = require("react");
3215
+ // templates/LogoMarquee/LogoMarquee.tsx
3216
+ var import_react15 = require("react");
3015
3217
  var import_framer_motion4 = require("framer-motion");
3016
- var import_jsx_runtime25 = require("react/jsx-runtime");
3218
+ var import_jsx_runtime26 = require("react/jsx-runtime");
3017
3219
  function modWrap(min, max, v) {
3018
3220
  const range = max - min;
3019
3221
  return ((v - min) % range + range) % range + min;
@@ -3021,41 +3223,41 @@ function modWrap(min, max, v) {
3021
3223
  var VELOCITY_FACTOR = 0.4;
3022
3224
  var MAX_SCROLL_V = 2500;
3023
3225
  var DEADZONE = 2;
3024
- var CDN = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/";
3226
+ var PLACEHOLDER_IMAGE2 = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/69b9309379ac08e59ca8210a_1f3f555da9a5cbb13a6fe1bf0d5fe1b6_placeholder-image.webp";
3025
3227
  var COL_ONE_LOGOS = [
3026
- { name: "Mastercard", url: `${CDN}68dcd915dc1a82f278b6c061_payment%20method-mastercard.svg` },
3027
- { name: "Visa", url: `${CDN}68dcd9d10fda048e2d53a3a1_payment%20method-visa.svg` },
3028
- { name: "Visa Electron", url: `${CDN}68dcd9d10fda048e2d53a3a1_payment%20method-visa-electron.svg` },
3029
- { name: "Maestro", url: `${CDN}68dcd9d183a5dcfaa9a06587_payment%20method-maestro.svg` },
3030
- { name: "Pix", url: `${CDN}68dcd9d13461263dcd8ccf54_payment%20method-pix.svg` },
3031
- { name: "Help2Pay", url: `${CDN}68dcd9d13461263dcd8ccf54_payment%20method-help2pay.svg` },
3032
- { name: "UPI Neo", url: `${CDN}68dcd9d13461263dcd8ccf54_payment%20method-upineo.svg` },
3033
- { name: "M-Pesa", url: `${CDN}68dcd9d13461263dcd8ccf54_payment%20method-mpesa.svg` },
3034
- { name: "Ozow", url: `${CDN}68dcd9d13461263dcd8ccf54_payment%20method-ozow.svg` },
3035
- { name: "MTN", url: `${CDN}68dcd9d13461263dcd8ccf54_payment%20method-mtn.svg` },
3036
- { name: "Airtm", url: `${CDN}68dcd9d13461263dcd8ccf54_payment%20method-airtm.svg` }
3228
+ { name: "Logo 1", url: PLACEHOLDER_IMAGE2 },
3229
+ { name: "Logo 2", url: PLACEHOLDER_IMAGE2 },
3230
+ { name: "Logo 3", url: PLACEHOLDER_IMAGE2 },
3231
+ { name: "Logo 4", url: PLACEHOLDER_IMAGE2 },
3232
+ { name: "Logo 5", url: PLACEHOLDER_IMAGE2 },
3233
+ { name: "Logo 6", url: PLACEHOLDER_IMAGE2 },
3234
+ { name: "Logo 7", url: PLACEHOLDER_IMAGE2 },
3235
+ { name: "Logo 8", url: PLACEHOLDER_IMAGE2 },
3236
+ { name: "Logo 9", url: PLACEHOLDER_IMAGE2 },
3237
+ { name: "Logo 10", url: PLACEHOLDER_IMAGE2 },
3238
+ { name: "Logo 11", url: PLACEHOLDER_IMAGE2 }
3037
3239
  ];
3038
3240
  var COL_TWO_LOGOS = [
3039
- { name: "Bitcoin", url: `${CDN}68dcd9d13384aff3f072511a_payment%20method-bitcoin.svg` },
3040
- { name: "Ethereum", url: `${CDN}68dcd9d10fda048e2d53a3a1_payment%20method-ethereum.svg` },
3041
- { name: "Tron", url: `${CDN}68dcd9d109305b54383580e5_payment%20method-tron.svg` },
3042
- { name: "Skrill", url: `${CDN}68dcd9d183a5dcfaa9a06587_payment%20method-skrill.svg` },
3043
- { name: "Skrill 1-tap", url: `${CDN}68dcd9d183a5dcfaa9a06587_payment%20method-skrill-1tap.svg` },
3044
- { name: "SticPay", url: `${CDN}68dcd9d183a5dcfaa9a06587_payment%20method-sticpay.svg` },
3045
- { name: "Litecoin", url: `${CDN}68dcd9d13384aff3f072511a_payment%20method-litecoin.svg` },
3046
- { name: "USD Coin", url: `${CDN}68dcd9d13384aff3f072511a_payment%20method-usdc.svg` },
3047
- { name: "Dogecoin", url: `${CDN}68dcd9d13384aff3f072511a_payment%20method-dogecoin.svg` },
3048
- { name: "Cardano", url: `${CDN}68dcd9d13384aff3f072511a_payment%20method-cardano.svg` },
3049
- { name: "BNB", url: `${CDN}68dcd9d13384aff3f072511a_payment%20method-bnb.svg` }
3241
+ { name: "Logo 1", url: PLACEHOLDER_IMAGE2 },
3242
+ { name: "Logo 2", url: PLACEHOLDER_IMAGE2 },
3243
+ { name: "Logo 3", url: PLACEHOLDER_IMAGE2 },
3244
+ { name: "Logo 4", url: PLACEHOLDER_IMAGE2 },
3245
+ { name: "Logo 5", url: PLACEHOLDER_IMAGE2 },
3246
+ { name: "Logo 6", url: PLACEHOLDER_IMAGE2 },
3247
+ { name: "Logo 7", url: PLACEHOLDER_IMAGE2 },
3248
+ { name: "Logo 8", url: PLACEHOLDER_IMAGE2 },
3249
+ { name: "Logo 9", url: PLACEHOLDER_IMAGE2 },
3250
+ { name: "Logo 10", url: PLACEHOLDER_IMAGE2 },
3251
+ { name: "Logo 11", url: PLACEHOLDER_IMAGE2 }
3050
3252
  ];
3051
3253
  var TEXT_CONTENT = {
3052
- headline: "Your money, your way",
3053
- body: "Quick deposits, easy withdrawals, and 60+ payment options mean your money is always accessible.",
3054
- disclaimer: "*Availability of payment methods and processing speeds may vary based on location and selected payment option.",
3254
+ headline: "Section title goes here",
3255
+ body: "Explain how this specific feature helps your user.",
3256
+ disclaimer: "*Add any relevant disclaimers or legal copy here.",
3055
3257
  ctaLabel: "Learn more",
3056
3258
  ctaHref: "#"
3057
3259
  };
3058
- var PaymentMethods = ({
3260
+ var LogoMarquee = ({
3059
3261
  headline = TEXT_CONTENT.headline,
3060
3262
  body = TEXT_CONTENT.body,
3061
3263
  disclaimer = TEXT_CONTENT.disclaimer,
@@ -3070,8 +3272,8 @@ var PaymentMethods = ({
3070
3272
  const scrollVelocity = (0, import_framer_motion4.useVelocity)(scrollY);
3071
3273
  const col1Y = (0, import_framer_motion4.useMotionValue)(0);
3072
3274
  const col2Y = (0, import_framer_motion4.useMotionValue)(0);
3073
- const col1Ref = (0, import_react14.useRef)(null);
3074
- const col2Ref = (0, import_react14.useRef)(null);
3275
+ const col1Ref = (0, import_react15.useRef)(null);
3276
+ const col2Ref = (0, import_react15.useRef)(null);
3075
3277
  (0, import_framer_motion4.useAnimationFrame)((_, delta) => {
3076
3278
  const raw = scrollVelocity.get();
3077
3279
  if (Math.abs(raw) < DEADZONE) return;
@@ -3084,21 +3286,21 @@ var PaymentMethods = ({
3084
3286
  });
3085
3287
  const track1 = [...col1Logos, ...col1Logos];
3086
3288
  const track2 = [...col2Logos, ...col2Logos];
3087
- return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
3289
+ return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
3088
3290
  "section",
3089
3291
  {
3090
- className: ["pm", className].filter(Boolean).join(" "),
3292
+ className: ["lm", className].filter(Boolean).join(" "),
3091
3293
  ...props,
3092
- children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "pm__inner", children: [
3093
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pm__media", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "pm__carousel", children: [
3094
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pm__fade pm__fade--top", "aria-hidden": "true" }),
3095
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
3294
+ children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "lm__inner", children: [
3295
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "lm__media", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "lm__carousel", children: [
3296
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "lm__fade lm__fade--top", "aria-hidden": "true" }),
3297
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
3096
3298
  import_framer_motion4.motion.div,
3097
3299
  {
3098
3300
  ref: col1Ref,
3099
- className: "pm__col",
3301
+ className: "lm__col",
3100
3302
  style: { y: col1Y },
3101
- 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)(
3303
+ children: track1.map((logo, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "lm__card", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "lm__card-img-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
3102
3304
  "img",
3103
3305
  {
3104
3306
  src: logo.url,
@@ -3109,13 +3311,13 @@ var PaymentMethods = ({
3109
3311
  ) }) }, `c1-${i}`))
3110
3312
  }
3111
3313
  ),
3112
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
3314
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
3113
3315
  import_framer_motion4.motion.div,
3114
3316
  {
3115
3317
  ref: col2Ref,
3116
- className: "pm__col",
3318
+ className: "lm__col",
3117
3319
  style: { y: col2Y },
3118
- 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)(
3320
+ children: track2.map((logo, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "lm__card", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "lm__card-img-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
3119
3321
  "img",
3120
3322
  {
3121
3323
  src: logo.url,
@@ -3126,23 +3328,203 @@ var PaymentMethods = ({
3126
3328
  ) }) }, `c2-${i}`))
3127
3329
  }
3128
3330
  ),
3129
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pm__fade pm__fade--bottom", "aria-hidden": "true" })
3331
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "lm__fade lm__fade--bottom", "aria-hidden": "true" })
3130
3332
  ] }) }),
3131
- /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "pm__content", children: [
3132
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h2", { className: "pm__headline", children: headline }),
3133
- /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "pm__text-group", children: [
3134
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "pm__body", children: body }),
3135
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "pm__disclaimer", children: disclaimer })
3333
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "lm__content", children: [
3334
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h2", { className: "lm__headline", children: headline }),
3335
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "lm__text-group", children: [
3336
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "lm__body", children: body }),
3337
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "lm__disclaimer", children: disclaimer })
3136
3338
  ] }),
3137
- /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("a", { href: ctaHref, className: "pm__link", children: [
3339
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("a", { href: ctaHref, className: "lm__link", children: [
3138
3340
  ctaLabel,
3139
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { "aria-hidden": "true", children: "\u2192" })
3341
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "lm__link-icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M3 8H13M13 8L9 4M13 8L9 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
3140
3342
  ] })
3141
3343
  ] })
3142
3344
  ] })
3143
3345
  }
3144
3346
  );
3145
3347
  };
3348
+
3349
+ // assets/appstore-googleplay-light.svg
3350
+ var appstore_googleplay_light_default = "./appstore-googleplay-light-W3CS6NAG.svg";
3351
+
3352
+ // assets/appstore-appstore-light.svg
3353
+ var appstore_appstore_light_default = "./appstore-appstore-light-BEVC5PJZ.svg";
3354
+
3355
+ // assets/appstore-appgallery-light.svg
3356
+ var appstore_appgallery_light_default = "./appstore-appgallery-light-VF62CF5X.svg";
3357
+
3358
+ // assets/appstore-windows-light.svg
3359
+ var appstore_windows_light_default = "./appstore-windows-light-TCALZSJM.svg";
3360
+
3361
+ // assets/appstore-macos-light.svg
3362
+ var appstore_macos_light_default = "./appstore-macos-light-5LI6ESAV.svg";
3363
+
3364
+ // assets/appstore-linux-light.svg
3365
+ var appstore_linux_light_default = "./appstore-linux-light-WQECAJRC.svg";
3366
+
3367
+ // assets/appstore-browser-light.svg
3368
+ var appstore_browser_light_default = "./appstore-browser-light-HBKTW4SI.svg";
3369
+
3370
+ // assets/appstore-googleplay-dark.svg
3371
+ var appstore_googleplay_dark_default = "./appstore-googleplay-dark-HWTOQTL6.svg";
3372
+
3373
+ // assets/appstore-appstore-dark.svg
3374
+ var appstore_appstore_dark_default = "./appstore-appstore-dark-FDUROOKK.svg";
3375
+
3376
+ // assets/appstore-appgallery-dark.svg
3377
+ var appstore_appgallery_dark_default = "./appstore-appgallery-dark-2QPFCM4A.svg";
3378
+
3379
+ // assets/appstore-windows-dark.svg
3380
+ var appstore_windows_dark_default = "./appstore-windows-dark-ZDWELB42.svg";
3381
+
3382
+ // assets/appstore-macos-dark.svg
3383
+ var appstore_macos_dark_default = "./appstore-macos-dark-2A3UM5YI.svg";
3384
+
3385
+ // assets/appstore-linux-dark.svg
3386
+ var appstore_linux_dark_default = "./appstore-linux-dark-RVH7CBM4.svg";
3387
+
3388
+ // assets/appstore-browser-dark.svg
3389
+ var appstore_browser_dark_default = "./appstore-browser-dark-2E6TK6JH.svg";
3390
+
3391
+ // primitives/DownloadBadge/DownloadBadge.tsx
3392
+ var import_jsx_runtime27 = require("react/jsx-runtime");
3393
+ var BADGE_ASSETS = {
3394
+ light: {
3395
+ googleplay: { src: appstore_googleplay_light_default, alt: "Get it on Google Play" },
3396
+ appstore: { src: appstore_appstore_light_default, alt: "Download on the App Store" },
3397
+ appgallery: { src: appstore_appgallery_light_default, alt: "Explore it on AppGallery" },
3398
+ windows: { src: appstore_windows_light_default, alt: "Download for Windows" },
3399
+ macos: { src: appstore_macos_light_default, alt: "Download on the Mac App Store" },
3400
+ linux: { src: appstore_linux_light_default, alt: "Installation on Linux" },
3401
+ web: { src: appstore_browser_light_default, alt: "Trade on Web browser" }
3402
+ },
3403
+ dark: {
3404
+ googleplay: { src: appstore_googleplay_dark_default, alt: "Get it on Google Play" },
3405
+ appstore: { src: appstore_appstore_dark_default, alt: "Download on the App Store" },
3406
+ appgallery: { src: appstore_appgallery_dark_default, alt: "Explore it on AppGallery" },
3407
+ windows: { src: appstore_windows_dark_default, alt: "Download for Windows" },
3408
+ macos: { src: appstore_macos_dark_default, alt: "Download on the Mac App Store" },
3409
+ linux: { src: appstore_linux_dark_default, alt: "Installation on Linux" },
3410
+ web: { src: appstore_browser_dark_default, alt: "Trade on Web browser" }
3411
+ }
3412
+ };
3413
+ var DownloadBadge = ({
3414
+ platform,
3415
+ colorScheme = "light",
3416
+ href,
3417
+ className,
3418
+ ...props
3419
+ }) => {
3420
+ const { src, alt } = BADGE_ASSETS[colorScheme][platform];
3421
+ return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
3422
+ "a",
3423
+ {
3424
+ className: [
3425
+ "download-badge",
3426
+ `download-badge--${colorScheme}`,
3427
+ className
3428
+ ].filter(Boolean).join(" "),
3429
+ href: href ?? "#",
3430
+ "aria-label": alt,
3431
+ target: "_blank",
3432
+ rel: "noopener noreferrer",
3433
+ ...props,
3434
+ children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("img", { className: "download-badge__img", src, alt })
3435
+ }
3436
+ );
3437
+ };
3438
+
3439
+ // templates/Steps/Steps.tsx
3440
+ var import_jsx_runtime28 = require("react/jsx-runtime");
3441
+ var Steps = ({
3442
+ title,
3443
+ steps,
3444
+ image,
3445
+ imageAlt = "",
3446
+ imagePosition = "left"
3447
+ }) => {
3448
+ const containerClass = [
3449
+ "steps__container",
3450
+ imagePosition === "right" ? "steps__container--image-right" : ""
3451
+ ].filter(Boolean).join(" ");
3452
+ return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("section", { className: "steps", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: containerClass, children: [
3453
+ image && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "steps__image-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
3454
+ "img",
3455
+ {
3456
+ src: image,
3457
+ alt: imageAlt,
3458
+ className: "steps__image"
3459
+ }
3460
+ ) }),
3461
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "steps__content", children: [
3462
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { className: "steps__title", children: title }),
3463
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ol", { className: "steps__list", children: steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { className: "steps__item", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "steps__item-inner", children: [
3464
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "steps__number", "aria-hidden": "true", children: index + 1 }),
3465
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "steps__item-body", children: [
3466
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "steps__item-title", children: step.title }),
3467
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "steps__item-description", children: step.description })
3468
+ ] })
3469
+ ] }) }, index)) })
3470
+ ] })
3471
+ ] }) });
3472
+ };
3473
+
3474
+ // templates/DownloadBanner/DownloadBanner.tsx
3475
+ var import_jsx_runtime29 = require("react/jsx-runtime");
3476
+ var DownloadBanner = ({
3477
+ style = "light-2",
3478
+ qrCodeImage,
3479
+ qrCodeAlt = "QR code to download the app",
3480
+ qrTitle = "Scan to download",
3481
+ qrSubtitle = "Android & iOS",
3482
+ mobileTitle = "Available on",
3483
+ showAppStore = true,
3484
+ showGooglePlay = true,
3485
+ showAppGallery = true,
3486
+ showWindows = true,
3487
+ showMacOS = true,
3488
+ showLinux = true,
3489
+ showWeb = true,
3490
+ appStoreHref,
3491
+ googlePlayHref,
3492
+ appGalleryHref,
3493
+ windowsHref,
3494
+ macOSHref,
3495
+ linuxHref,
3496
+ webHref,
3497
+ disclaimer
3498
+ }) => {
3499
+ const colorScheme = style === "dark" ? "dark" : "light";
3500
+ return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("section", { className: `db-section db-section--${style}`, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "db-container", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "db-card", children: [
3501
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "db-qr-block", children: [
3502
+ qrCodeImage && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
3503
+ "img",
3504
+ {
3505
+ className: "db-qr-image",
3506
+ src: qrCodeImage,
3507
+ alt: qrCodeAlt
3508
+ }
3509
+ ),
3510
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "db-qr-text", children: [
3511
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "db-qr-text__title db-qr-text__title--desktop", children: qrTitle }),
3512
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h2", { className: "db-qr-text__subtitle db-qr-text__subtitle--desktop", children: qrSubtitle }),
3513
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "db-qr-text__title db-qr-text__title--mobile", children: mobileTitle }),
3514
+ disclaimer && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "db-disclaimer", children: disclaimer })
3515
+ ] })
3516
+ ] }),
3517
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "db-badges", children: [
3518
+ showGooglePlay && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DownloadBadge, { platform: "googleplay", colorScheme, href: googlePlayHref }),
3519
+ showAppGallery && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DownloadBadge, { platform: "appgallery", colorScheme, href: appGalleryHref }),
3520
+ showMacOS && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DownloadBadge, { platform: "macos", colorScheme, href: macOSHref }),
3521
+ showWindows && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DownloadBadge, { platform: "windows", colorScheme, href: windowsHref }),
3522
+ showLinux && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DownloadBadge, { platform: "linux", colorScheme, href: linuxHref }),
3523
+ showAppStore && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DownloadBadge, { platform: "appstore", colorScheme, href: appStoreHref }),
3524
+ showWeb && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DownloadBadge, { platform: "web", colorScheme, href: webHref })
3525
+ ] })
3526
+ ] }) }) });
3527
+ };
3146
3528
  // Annotate the CommonJS export names for ESM import in node:
3147
3529
  0 && (module.exports = {
3148
3530
  AVATAR_DATA,
@@ -3157,18 +3539,22 @@ var PaymentMethods = ({
3157
3539
  Chip,
3158
3540
  ChipDropdown,
3159
3541
  DayNightTransition,
3542
+ DownloadBadge,
3543
+ DownloadBanner,
3160
3544
  FeatureCards,
3545
+ FeatureCardsSecondary,
3161
3546
  Footer,
3162
3547
  Hero,
3163
3548
  Link,
3549
+ LogoMarquee,
3164
3550
  Navbar,
3165
3551
  Pagination,
3166
- PaymentMethods,
3167
3552
  SCROLLYTELLING_DATA,
3168
3553
  STEPS_DATA,
3169
3554
  Scrollytelling,
3170
3555
  SearchField,
3171
3556
  Stats,
3557
+ Steps,
3172
3558
  StickyStackedCards,
3173
3559
  TEXT_CONTENT,
3174
3560
  Tag,