@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/appstore-appgallery-dark-2QPFCM4A.svg +12 -0
- package/dist/appstore-appgallery-light-VF62CF5X.svg +19 -0
- package/dist/appstore-appstore-dark-FDUROOKK.svg +24 -0
- package/dist/appstore-appstore-light-BEVC5PJZ.svg +24 -0
- package/dist/appstore-browser-dark-2E6TK6JH.svg +32 -0
- package/dist/appstore-browser-light-HBKTW4SI.svg +32 -0
- package/dist/appstore-googleplay-dark-HWTOQTL6.svg +14 -0
- package/dist/appstore-googleplay-light-W3CS6NAG.svg +14 -0
- package/dist/appstore-linux-dark-RVH7CBM4.svg +46 -0
- package/dist/appstore-linux-light-WQECAJRC.svg +46 -0
- package/dist/appstore-macos-dark-2A3UM5YI.svg +23 -0
- package/dist/appstore-macos-light-5LI6ESAV.svg +23 -0
- package/dist/appstore-windows-dark-ZDWELB42.svg +31 -0
- package/dist/appstore-windows-light-TCALZSJM.svg +31 -0
- package/dist/index.css +1030 -256
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +129 -15
- package/dist/index.d.ts +129 -15
- package/dist/index.js +761 -375
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +741 -359
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/tokens.css +9 -5
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
|
|
1089
|
-
var ExternalLinkIcon = () => /* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
1137
|
-
/* @__PURE__ */ (0,
|
|
1138
|
-
googlePlayBadge && /* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
1221
|
-
/* @__PURE__ */ (0,
|
|
1222
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
1231
|
-
/* @__PURE__ */ (0,
|
|
1232
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
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,
|
|
1258
|
-
/* @__PURE__ */ (0,
|
|
1259
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
1272
|
-
navColumns.map((column, colIdx) => /* @__PURE__ */ (0,
|
|
1273
|
-
/* @__PURE__ */ (0,
|
|
1274
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
1277
|
-
investorsInPeopleSrc && /* @__PURE__ */ (0,
|
|
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,
|
|
1286
|
-
/* @__PURE__ */ (0,
|
|
1287
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
1339
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "footer__deriv-go-title", children: derivGo.title ?? "Deriv GO" })
|
|
1296
1340
|
] }),
|
|
1297
|
-
/* @__PURE__ */ (0,
|
|
1298
|
-
(derivGo.qrCodeSrc || derivGo.qrCodeIcon) && /* @__PURE__ */ (0,
|
|
1299
|
-
derivGo.qrCodeIcon ? /* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
1340
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
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,
|
|
1363
|
-
/* @__PURE__ */ (0,
|
|
1364
|
-
/* @__PURE__ */ (0,
|
|
1365
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
1417
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "footer__deriv-go-title", children: derivGo.title ?? "Deriv GO" })
|
|
1374
1418
|
] }),
|
|
1375
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
1388
|
-
licenseText && /* @__PURE__ */ (0,
|
|
1389
|
-
riskWarningText && /* @__PURE__ */ (0,
|
|
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,
|
|
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
|
|
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,
|
|
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
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
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,
|
|
1432
|
-
primaryButton && (primaryButton.href ? /* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
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,
|
|
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 === "
|
|
1468
|
-
return /* @__PURE__ */ (0,
|
|
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
|
-
|
|
1475
|
-
|
|
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,
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
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 === "
|
|
1501
|
-
return /* @__PURE__ */ (0,
|
|
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
|
-
|
|
1508
|
-
|
|
1509
|
-
{
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
className: "
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
|
|
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,
|
|
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,
|
|
1532
|
-
variant === "visuals" && leftVisual && /* @__PURE__ */ (0,
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
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
|
|
1560
|
-
var
|
|
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,
|
|
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,
|
|
1595
|
-
const intervalRef = (0,
|
|
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,
|
|
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,
|
|
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,
|
|
1614
|
-
/* @__PURE__ */ (0,
|
|
1615
|
-
/* @__PURE__ */ (0,
|
|
1616
|
-
description && /* @__PURE__ */ (0,
|
|
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,
|
|
1619
|
-
leftAwards.length > 0 && /* @__PURE__ */ (0,
|
|
1620
|
-
/* @__PURE__ */ (0,
|
|
1621
|
-
/* @__PURE__ */ (0,
|
|
1622
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
1637
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
1645
|
-
hasAwards && /* @__PURE__ */ (0,
|
|
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
|
|
1854
|
+
var import_react10 = require("react");
|
|
1654
1855
|
var import_dotlottie_react = require("@lottiefiles/dotlottie-react");
|
|
1655
|
-
var
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
1753
|
-
const itemRefs = (0,
|
|
1754
|
-
(0,
|
|
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,
|
|
1786
|
-
/* @__PURE__ */ (0,
|
|
1787
|
-
/* @__PURE__ */ (0,
|
|
1788
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
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,
|
|
1817
|
-
/* @__PURE__ */ (0,
|
|
1818
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
1825
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
1835
|
-
/* @__PURE__ */ (0,
|
|
1836
|
-
/* @__PURE__ */ (0,
|
|
1837
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
1844
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
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
|
|
1855
|
-
var
|
|
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: "
|
|
1859
|
-
description: "
|
|
1860
|
-
imageUrl:
|
|
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: "
|
|
1865
|
-
description: "
|
|
1866
|
-
imageUrl:
|
|
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: "
|
|
1871
|
-
description: "
|
|
1872
|
-
imageUrl:
|
|
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,
|
|
1884
|
-
(0,
|
|
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,
|
|
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,
|
|
1924
|
-
/* @__PURE__ */ (0,
|
|
1925
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
1952
|
-
/* @__PURE__ */ (0,
|
|
1953
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
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
|
|
2175
|
+
var import_react12 = require("react");
|
|
1974
2176
|
var import_framer_motion = require("framer-motion");
|
|
1975
|
-
var
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
2297
|
-
/* @__PURE__ */ (0,
|
|
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
|
|
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
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
2425
|
-
/* @__PURE__ */ (0,
|
|
2426
|
-
/* @__PURE__ */ (0,
|
|
2427
|
-
section.items.map((link) => /* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
2463
|
-
/* @__PURE__ */ (0,
|
|
2464
|
-
/* @__PURE__ */ (0,
|
|
2465
|
-
/* @__PURE__ */ (0,
|
|
2466
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
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,
|
|
2486
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
2696
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChevronDownIcon3, { className: "navbar__drawer-trigger__chevron" })
|
|
2495
2697
|
]
|
|
2496
2698
|
}
|
|
2497
2699
|
),
|
|
2498
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
2508
|
-
/* @__PURE__ */ (0,
|
|
2509
|
-
/* @__PURE__ */ (0,
|
|
2510
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
2547
|
-
const [mobileOpen, setMobileOpen] = (0,
|
|
2548
|
-
const [mobileExpanded, setMobileExpanded] = (0,
|
|
2549
|
-
const [scrolled, setScrolled] = (0,
|
|
2550
|
-
const [langDropdownOpen, setLangDropdownOpen] = (0,
|
|
2551
|
-
const [mobileLangOpen, setMobileLangOpen] = (0,
|
|
2552
|
-
const hoverTimeoutRef = (0,
|
|
2553
|
-
const langHoverTimeoutRef = (0,
|
|
2554
|
-
const pillAreaRef = (0,
|
|
2555
|
-
const langBtnRef = (0,
|
|
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,
|
|
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,
|
|
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,
|
|
2776
|
+
(0, import_react13.useEffect)(() => {
|
|
2575
2777
|
if (!mobileOpen) setMobileLangOpen(false);
|
|
2576
2778
|
}, [mobileOpen]);
|
|
2577
|
-
(0,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
2807
|
+
const handleLangEnter = (0, import_react13.useCallback)(() => {
|
|
2606
2808
|
clearLangHoverTimeout();
|
|
2607
2809
|
setLangDropdownOpen(true);
|
|
2608
2810
|
}, [clearLangHoverTimeout]);
|
|
2609
|
-
const handleLangLeave = (0,
|
|
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,
|
|
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,
|
|
2820
|
+
const handleNavEnter = (0, import_react13.useCallback)((label) => {
|
|
2619
2821
|
clearHoverTimeout();
|
|
2620
2822
|
setOpenDropdown(label);
|
|
2621
2823
|
}, [clearHoverTimeout]);
|
|
2622
|
-
const handleNavLeave = (0,
|
|
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,
|
|
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,
|
|
2634
|
-
/* @__PURE__ */ (0,
|
|
2635
|
-
/* @__PURE__ */ (0,
|
|
2636
|
-
/* @__PURE__ */ (0,
|
|
2637
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
2701
|
-
loginHref && /* @__PURE__ */ (0,
|
|
2702
|
-
ctaHref && /* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
2747
|
-
loginHref && /* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
2758
|
-
loginHref && /* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
2821
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
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,
|
|
2837
|
-
loginHref && /* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
3073
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChevronLeftIcon, {})
|
|
2872
3074
|
}
|
|
2873
3075
|
),
|
|
2874
|
-
/* @__PURE__ */ (0,
|
|
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
|
|
3100
|
+
var import_react14 = require("react");
|
|
2899
3101
|
var import_framer_motion3 = require("framer-motion");
|
|
2900
|
-
var
|
|
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,
|
|
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,
|
|
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,
|
|
2939
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
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,
|
|
2967
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
2986
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
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/
|
|
3014
|
-
var
|
|
3215
|
+
// templates/LogoMarquee/LogoMarquee.tsx
|
|
3216
|
+
var import_react15 = require("react");
|
|
3015
3217
|
var import_framer_motion4 = require("framer-motion");
|
|
3016
|
-
var
|
|
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
|
|
3226
|
+
var PLACEHOLDER_IMAGE2 = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/69b9309379ac08e59ca8210a_1f3f555da9a5cbb13a6fe1bf0d5fe1b6_placeholder-image.webp";
|
|
3025
3227
|
var COL_ONE_LOGOS = [
|
|
3026
|
-
{ name: "
|
|
3027
|
-
{ name: "
|
|
3028
|
-
{ name: "
|
|
3029
|
-
{ name: "
|
|
3030
|
-
{ name: "
|
|
3031
|
-
{ name: "
|
|
3032
|
-
{ name: "
|
|
3033
|
-
{ name: "
|
|
3034
|
-
{ name: "
|
|
3035
|
-
{ name: "
|
|
3036
|
-
{ name: "
|
|
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: "
|
|
3040
|
-
{ name: "
|
|
3041
|
-
{ name: "
|
|
3042
|
-
{ name: "
|
|
3043
|
-
{ name: "
|
|
3044
|
-
{ name: "
|
|
3045
|
-
{ name: "
|
|
3046
|
-
{ name: "
|
|
3047
|
-
{ name: "
|
|
3048
|
-
{ name: "
|
|
3049
|
-
{ name: "
|
|
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: "
|
|
3053
|
-
body: "
|
|
3054
|
-
disclaimer: "*
|
|
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
|
|
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,
|
|
3074
|
-
const col2Ref = (0,
|
|
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,
|
|
3289
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3088
3290
|
"section",
|
|
3089
3291
|
{
|
|
3090
|
-
className: ["
|
|
3292
|
+
className: ["lm", className].filter(Boolean).join(" "),
|
|
3091
3293
|
...props,
|
|
3092
|
-
children: /* @__PURE__ */ (0,
|
|
3093
|
-
/* @__PURE__ */ (0,
|
|
3094
|
-
/* @__PURE__ */ (0,
|
|
3095
|
-
/* @__PURE__ */ (0,
|
|
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: "
|
|
3301
|
+
className: "lm__col",
|
|
3100
3302
|
style: { y: col1Y },
|
|
3101
|
-
children: track1.map((logo, i) => /* @__PURE__ */ (0,
|
|
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,
|
|
3314
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3113
3315
|
import_framer_motion4.motion.div,
|
|
3114
3316
|
{
|
|
3115
3317
|
ref: col2Ref,
|
|
3116
|
-
className: "
|
|
3318
|
+
className: "lm__col",
|
|
3117
3319
|
style: { y: col2Y },
|
|
3118
|
-
children: track2.map((logo, i) => /* @__PURE__ */ (0,
|
|
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,
|
|
3331
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "lm__fade lm__fade--bottom", "aria-hidden": "true" })
|
|
3130
3332
|
] }) }),
|
|
3131
|
-
/* @__PURE__ */ (0,
|
|
3132
|
-
/* @__PURE__ */ (0,
|
|
3133
|
-
/* @__PURE__ */ (0,
|
|
3134
|
-
/* @__PURE__ */ (0,
|
|
3135
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
3339
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("a", { href: ctaHref, className: "lm__link", children: [
|
|
3138
3340
|
ctaLabel,
|
|
3139
|
-
/* @__PURE__ */ (0,
|
|
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,
|