@deriv-web-design/ui 0.0.25 → 0.0.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +623 -162
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +109 -28
- package/dist/index.d.ts +109 -28
- package/dist/index.js +956 -422
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +943 -414
- package/dist/index.mjs.map +1 -1
- package/dist/quote-left-63QMW5NQ.webp +0 -0
- package/dist/quote-right-W6AS4YHN.webp +0 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -22,6 +22,7 @@ var index_exports = {};
|
|
|
22
22
|
__export(index_exports, {
|
|
23
23
|
AVATAR_DATA: () => AVATAR_DATA,
|
|
24
24
|
Accordion: () => Accordion,
|
|
25
|
+
AvatarGrid: () => AvatarGrid,
|
|
25
26
|
BottomSheet: () => BottomSheet,
|
|
26
27
|
Breadcrumb: () => Breadcrumb,
|
|
27
28
|
Button: () => Button,
|
|
@@ -44,14 +45,17 @@ __export(index_exports, {
|
|
|
44
45
|
Footer: () => Footer,
|
|
45
46
|
Header: () => Header,
|
|
46
47
|
Hero: () => Hero,
|
|
48
|
+
ImageBanner: () => ImageBanner,
|
|
47
49
|
Leaders: () => Leaders,
|
|
48
50
|
Link: () => Link,
|
|
49
51
|
LogoMarquee: () => LogoMarquee,
|
|
50
52
|
Navbar: () => Navbar,
|
|
51
53
|
Pagination: () => Pagination,
|
|
54
|
+
PeopleGrid: () => PeopleGrid,
|
|
52
55
|
STEPS_DATA: () => STEPS_DATA,
|
|
53
56
|
SearchField: () => SearchField,
|
|
54
57
|
Stats: () => Stats,
|
|
58
|
+
StatsSimple: () => StatsSimple,
|
|
55
59
|
Steps: () => Steps,
|
|
56
60
|
StickyMarketCards: () => StickyMarketCards,
|
|
57
61
|
StickyStackedCards: () => StickyStackedCards,
|
|
@@ -59,6 +63,7 @@ __export(index_exports, {
|
|
|
59
63
|
Table: () => Table,
|
|
60
64
|
Tabs: () => Tabs,
|
|
61
65
|
Tag: () => Tag,
|
|
66
|
+
Testimonial: () => Testimonial,
|
|
62
67
|
TextField: () => TextField,
|
|
63
68
|
TextScroll: () => TextScroll,
|
|
64
69
|
dayNightTransitionV2Preset: () => dayNightTransitionV2Preset
|
|
@@ -1979,36 +1984,182 @@ var Header = ({
|
|
|
1979
1984
|
);
|
|
1980
1985
|
};
|
|
1981
1986
|
|
|
1982
|
-
// templates/Stats/
|
|
1987
|
+
// templates/Stats/StatsV2.tsx
|
|
1983
1988
|
var import_react10 = require("react");
|
|
1984
1989
|
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1985
|
-
var
|
|
1986
|
-
var
|
|
1987
|
-
var
|
|
1988
|
-
var
|
|
1989
|
-
var
|
|
1990
|
-
|
|
1991
|
-
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
|
|
2001
|
-
|
|
2002
|
-
|
|
1990
|
+
var HOLD_MS = 1e3;
|
|
1991
|
+
var STEP_DURATION_MS = 700;
|
|
1992
|
+
var INTERVAL_MS = HOLD_MS + STEP_DURATION_MS;
|
|
1993
|
+
var EASING = "cubic-bezier(0.33, 1, 0.68, 1)";
|
|
1994
|
+
var TRANSITION = `transform ${STEP_DURATION_MS}ms ${EASING}, opacity ${STEP_DURATION_MS}ms ${EASING}`;
|
|
1995
|
+
var PARALLAX_START = 0.1;
|
|
1996
|
+
var PARALLAX_END = 0.45;
|
|
1997
|
+
var PARALLAX_MAX_PERCENT = 26.3;
|
|
1998
|
+
var PARALLAX_BREAKPOINT = 992;
|
|
1999
|
+
var SLOT_OFFSET = "var(--stats-v2-slot-offset, 110%)";
|
|
2000
|
+
var CENTER = "translate(-50%, -50%)";
|
|
2001
|
+
function getSlotStyle(slot, transition) {
|
|
2002
|
+
switch (slot) {
|
|
2003
|
+
case "active":
|
|
2004
|
+
return {
|
|
2005
|
+
transform: `${CENTER} translateY(0%) scale(1)`,
|
|
2006
|
+
opacity: 1,
|
|
2007
|
+
zIndex: 2,
|
|
2008
|
+
transition
|
|
2009
|
+
};
|
|
2010
|
+
case "above":
|
|
2011
|
+
return {
|
|
2012
|
+
transform: `${CENTER} translateY(calc(${SLOT_OFFSET} * -1)) scale(0.65)`,
|
|
2013
|
+
opacity: 1,
|
|
2014
|
+
zIndex: 1,
|
|
2015
|
+
transition
|
|
2016
|
+
};
|
|
2017
|
+
case "below":
|
|
2018
|
+
return {
|
|
2019
|
+
transform: `${CENTER} translateY(${SLOT_OFFSET}) scale(0.65)`,
|
|
2020
|
+
opacity: 1,
|
|
2021
|
+
zIndex: 1,
|
|
2022
|
+
transition
|
|
2023
|
+
};
|
|
2024
|
+
case "exiting":
|
|
2025
|
+
return {
|
|
2026
|
+
transform: `${CENTER} translateY(calc(${SLOT_OFFSET} * -1)) scale(0.4)`,
|
|
2027
|
+
opacity: 0,
|
|
2028
|
+
zIndex: 0,
|
|
2029
|
+
transition
|
|
2030
|
+
};
|
|
2031
|
+
case "queued":
|
|
2032
|
+
default:
|
|
2033
|
+
return {
|
|
2034
|
+
transform: `${CENTER} translateY(${SLOT_OFFSET}) scale(0.4)`,
|
|
2035
|
+
opacity: 0,
|
|
2036
|
+
zIndex: 0,
|
|
2037
|
+
transition
|
|
2038
|
+
};
|
|
2003
2039
|
}
|
|
2004
|
-
return {
|
|
2005
|
-
transform: rel < 0 ? "translateY(calc(-50% - 110%)) scale(0.4)" : "translateY(calc(-50% + 110%)) scale(0.4)",
|
|
2006
|
-
opacity: 0,
|
|
2007
|
-
zIndex: 0,
|
|
2008
|
-
transition: TRANSITION
|
|
2009
|
-
};
|
|
2010
2040
|
}
|
|
2011
|
-
|
|
2041
|
+
function slotForIndex(index, step) {
|
|
2042
|
+
const rel = index - step - 1;
|
|
2043
|
+
if (rel === 0) return "active";
|
|
2044
|
+
if (rel === -1) return "above";
|
|
2045
|
+
if (rel === 1) return "below";
|
|
2046
|
+
if (rel < -1) return "exiting";
|
|
2047
|
+
return "queued";
|
|
2048
|
+
}
|
|
2049
|
+
var Laurel = ({ flip = false }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2050
|
+
"svg",
|
|
2051
|
+
{
|
|
2052
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2053
|
+
width: "32",
|
|
2054
|
+
height: "84",
|
|
2055
|
+
viewBox: "0 0 32 84",
|
|
2056
|
+
fill: "none",
|
|
2057
|
+
"aria-hidden": "true",
|
|
2058
|
+
focusable: "false",
|
|
2059
|
+
className: [
|
|
2060
|
+
"stats-v2__laurel",
|
|
2061
|
+
flip ? "stats-v2__laurel--flip" : ""
|
|
2062
|
+
].filter(Boolean).join(" "),
|
|
2063
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("g", { opacity: "0.2", children: [
|
|
2064
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2065
|
+
"path",
|
|
2066
|
+
{
|
|
2067
|
+
d: "M20.8655 76.0151C21.3631 78.5487 22.4577 80.4673 23.4245 81.7447C23.7945 82.2337 24.145 82.6275 24.4343 82.9245C24.5003 81.0424 24.5392 77.0209 23.854 73.543C23.3836 71.2282 22.6189 69.4263 21.9723 68.1997C21.7486 67.7754 21.539 67.42 21.3608 67.1361C21.2158 67.6487 21.042 68.3446 20.8935 69.1718C20.5634 71.0111 20.3623 73.4782 20.8655 76.0151Z",
|
|
2068
|
+
fill: "currentColor",
|
|
2069
|
+
stroke: "currentColor"
|
|
2070
|
+
}
|
|
2071
|
+
),
|
|
2072
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2073
|
+
"path",
|
|
2074
|
+
{
|
|
2075
|
+
d: "M9.19518 69.4464C8.5612 69.2311 8.01354 69.0792 7.6041 68.9776C7.77674 69.5261 8.03563 70.2542 8.40971 71.0711C9.16156 72.713 10.3603 74.6729 12.1472 76.0342C13.9141 77.3864 15.8077 77.7752 17.2669 77.8239C17.9963 77.8483 18.6126 77.7873 19.0419 77.7209C18.3715 76.5307 16.6347 73.8279 14.0892 71.9349C12.4167 70.7081 10.6015 69.924 9.19518 69.4464Z",
|
|
2076
|
+
fill: "currentColor",
|
|
2077
|
+
stroke: "currentColor"
|
|
2078
|
+
}
|
|
2079
|
+
),
|
|
2080
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2081
|
+
"path",
|
|
2082
|
+
{
|
|
2083
|
+
d: "M14.1789 62.4853C14.1095 65.0056 14.7018 67.1343 15.3106 68.6265C15.5268 69.1563 15.7445 69.6045 15.9342 69.9597C16.0737 69.4242 16.2473 68.7196 16.4239 67.9038C16.8294 66.0308 17.2467 63.5892 17.309 61.2688C17.3584 58.9612 17.0322 57.019 16.6942 55.65C16.5809 55.1908 16.4663 54.7965 16.3643 54.4749C16.1414 54.8952 15.8702 55.4487 15.5956 56.1107C14.9268 57.7233 14.2444 59.9642 14.1789 62.4853Z",
|
|
2084
|
+
fill: "currentColor",
|
|
2085
|
+
stroke: "currentColor"
|
|
2086
|
+
}
|
|
2087
|
+
),
|
|
2088
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2089
|
+
"path",
|
|
2090
|
+
{
|
|
2091
|
+
d: "M6.16644 56.5363L5.92729 56.2113C4.18123 53.9739 2.10237 52.4221 0.99942 51.685C1.0448 52.2219 1.13195 52.9558 1.29599 53.7969C1.6458 55.5904 2.33816 57.834 3.68889 59.699C5.02796 61.5534 6.66938 62.5331 7.97363 63.0496C8.56984 63.2857 9.09434 63.4244 9.48448 63.5049C9.08235 62.1271 8.06278 59.1136 6.16644 56.5363Z",
|
|
2092
|
+
fill: "currentColor",
|
|
2093
|
+
stroke: "currentColor"
|
|
2094
|
+
}
|
|
2095
|
+
),
|
|
2096
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2097
|
+
"path",
|
|
2098
|
+
{
|
|
2099
|
+
d: "M12.9202 41.9556C12.9103 41.468 12.8857 41.0438 12.8578 40.6964C12.5852 41.0139 12.2554 41.4254 11.9043 41.9234C10.9787 43.2365 9.91222 45.1415 9.34811 47.5086L9.21888 48.0509C8.78948 50.2094 8.89878 52.2002 9.13088 53.6853C9.21855 54.2463 9.32345 54.7333 9.42253 55.1275C10.2101 53.5777 11.6117 50.5783 12.3444 47.5177C12.8519 45.3454 12.9491 43.3817 12.9202 41.9556Z",
|
|
2100
|
+
fill: "currentColor",
|
|
2101
|
+
stroke: "currentColor"
|
|
2102
|
+
}
|
|
2103
|
+
),
|
|
2104
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2105
|
+
"path",
|
|
2106
|
+
{
|
|
2107
|
+
d: "M4.26838 40.1575C3.16507 37.3338 1.55966 35.0449 0.658674 33.8839C0.595099 34.3962 0.53299 35.0674 0.509766 35.8425C0.454879 37.6743 0.618233 40.0556 1.46849 42.2871C2.30759 44.5064 3.60611 45.9871 4.68907 46.9107C5.12959 47.2864 5.53393 47.5694 5.85602 47.7717C5.82536 47.3041 5.77132 46.6715 5.67501 45.9295C5.46619 44.3205 5.06044 42.211 4.27156 40.1569L4.26838 40.1575Z",
|
|
2108
|
+
fill: "currentColor",
|
|
2109
|
+
stroke: "currentColor"
|
|
2110
|
+
}
|
|
2111
|
+
),
|
|
2112
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2113
|
+
"path",
|
|
2114
|
+
{
|
|
2115
|
+
d: "M12.6632 27.4606C11.6314 28.3597 10.3804 29.7129 9.40352 31.5834L9.20135 32.004C8.19489 34.0975 7.83678 36.2499 7.73379 37.8807C7.69736 38.4576 7.693 38.9667 7.70264 39.3814C7.98105 39.0479 8.31846 38.6306 8.68777 38.1462C9.68653 36.8365 10.9078 35.0512 11.829 33.1204C12.7356 31.1936 13.238 29.3215 13.5154 27.9233C13.6157 27.4178 13.6864 26.9753 13.7361 26.6158C13.4324 26.8302 13.0648 27.1106 12.6632 27.4606Z",
|
|
2116
|
+
fill: "currentColor",
|
|
2117
|
+
stroke: "currentColor"
|
|
2118
|
+
}
|
|
2119
|
+
),
|
|
2120
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2121
|
+
"path",
|
|
2122
|
+
{
|
|
2123
|
+
d: "M7.15889 23.0454L7.23043 22.5253C7.54518 19.6881 7.36017 17.0948 7.19664 15.6517C6.9244 16.0575 6.59747 16.5777 6.25738 17.1905C5.37216 18.7855 4.41002 20.986 4.07631 23.4177C3.74032 25.8399 4.108 27.8499 4.55657 29.25C4.7215 29.7648 4.89717 30.1965 5.05235 30.5349C5.64762 29.1157 6.71893 26.2445 7.15889 23.0454Z",
|
|
2124
|
+
fill: "currentColor",
|
|
2125
|
+
stroke: "currentColor"
|
|
2126
|
+
}
|
|
2127
|
+
),
|
|
2128
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2129
|
+
"path",
|
|
2130
|
+
{
|
|
2131
|
+
d: "M20.7056 14.8951C19.4372 15.269 17.7724 15.9875 16.1554 17.3693L16.021 17.4932C14.3576 18.9542 13.2217 20.7665 12.5041 22.2202C12.2403 22.7546 12.0346 23.2374 11.8812 23.6318C12.2297 23.4596 12.6507 23.2423 13.1195 22.9822C14.4495 22.2442 16.1506 21.1686 17.6705 19.808C19.177 18.446 20.3493 16.9414 21.1512 15.7693C21.4549 15.3255 21.7047 14.9307 21.8987 14.6109C21.5673 14.6707 21.1626 14.7604 20.7056 14.8951Z",
|
|
2132
|
+
fill: "currentColor",
|
|
2133
|
+
stroke: "currentColor"
|
|
2134
|
+
}
|
|
2135
|
+
),
|
|
2136
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2137
|
+
"path",
|
|
2138
|
+
{
|
|
2139
|
+
d: "M15.246 9.89451L15.3989 9.48769C16.3817 6.71545 16.8681 4.08928 17.0948 2.56556C16.7641 2.88544 16.3703 3.28963 15.9481 3.76978C14.7583 5.12276 13.3571 7.06214 12.4902 9.40367C11.6163 11.7394 11.483 13.8564 11.5665 15.3854C11.595 15.9081 11.6489 16.3613 11.7069 16.7298C11.9415 16.3768 12.2271 15.9318 12.5414 15.4103C13.3841 14.0121 14.4266 12.0747 15.246 9.89451Z",
|
|
2140
|
+
fill: "currentColor",
|
|
2141
|
+
stroke: "currentColor"
|
|
2142
|
+
}
|
|
2143
|
+
),
|
|
2144
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2145
|
+
"path",
|
|
2146
|
+
{
|
|
2147
|
+
d: "M24.236 2.86551C22.4046 4.24716 21.0854 6.09763 20.225 7.6144C19.8673 8.24502 19.5916 8.81333 19.3933 9.25894C19.765 9.11933 20.2233 8.93634 20.7396 8.70812C22.1292 8.09394 23.9267 7.15785 25.5896 5.86671C27.2408 4.56435 28.6049 3.04428 29.5633 1.84034C29.9762 1.32163 30.3123 0.863542 30.5622 0.509562C30.206 0.526204 29.7564 0.567871 29.2396 0.659382C27.8788 0.900297 26.0564 1.48555 24.236 2.86551Z",
|
|
2148
|
+
fill: "currentColor",
|
|
2149
|
+
stroke: "currentColor"
|
|
2150
|
+
}
|
|
2151
|
+
)
|
|
2152
|
+
] })
|
|
2153
|
+
}
|
|
2154
|
+
);
|
|
2155
|
+
var AwardBadge = ({ heading, subheading }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "stats-v2__award", children: [
|
|
2156
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Laurel, {}),
|
|
2157
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "stats-v2__award-text", children: [
|
|
2158
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "stats-v2__award-heading", children: heading }),
|
|
2159
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "stats-v2__award-subheading", children: subheading })
|
|
2160
|
+
] }),
|
|
2161
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Laurel, { flip: true })
|
|
2162
|
+
] });
|
|
2012
2163
|
var Stats = ({
|
|
2013
2164
|
title,
|
|
2014
2165
|
description,
|
|
@@ -2018,105 +2169,283 @@ var Stats = ({
|
|
|
2018
2169
|
className,
|
|
2019
2170
|
...props
|
|
2020
2171
|
}) => {
|
|
2021
|
-
const [activeIndex, setActiveIndex] = (0, import_react10.useState)(0);
|
|
2022
|
-
const intervalRef = (0, import_react10.useRef)(null);
|
|
2023
2172
|
const sectionRef = (0, import_react10.useRef)(null);
|
|
2024
2173
|
const leftColRef = (0, import_react10.useRef)(null);
|
|
2025
2174
|
const rightColRef = (0, import_react10.useRef)(null);
|
|
2026
2175
|
const rafRef = (0, import_react10.useRef)(null);
|
|
2176
|
+
const N = stats.length;
|
|
2027
2177
|
const hasAwards = leftAwards.length > 0 || rightAwards.length > 0;
|
|
2028
2178
|
const allAwards = [...leftAwards, ...rightAwards];
|
|
2029
|
-
const
|
|
2179
|
+
const strip = (0, import_react10.useMemo)(() => {
|
|
2180
|
+
if (N === 0) return [];
|
|
2181
|
+
const target = Math.max(2 * N, N + 3);
|
|
2182
|
+
return Array.from({ length: target }, (_, i) => stats[i % N]);
|
|
2183
|
+
}, [stats, N]);
|
|
2184
|
+
const [step, setStep] = (0, import_react10.useState)(0);
|
|
2185
|
+
const [phase, setPhase] = (0, import_react10.useState)("idle");
|
|
2186
|
+
const scheduleRef = (0, import_react10.useRef)(null);
|
|
2030
2187
|
(0, import_react10.useEffect)(() => {
|
|
2031
|
-
if (
|
|
2032
|
-
|
|
2033
|
-
|
|
2034
|
-
|
|
2188
|
+
if (N <= 1) return;
|
|
2189
|
+
let timerId = null;
|
|
2190
|
+
let cancelled = false;
|
|
2191
|
+
const advance = () => {
|
|
2192
|
+
timerId = null;
|
|
2193
|
+
if (cancelled) return;
|
|
2194
|
+
setStep((prev) => {
|
|
2195
|
+
if (prev >= N) {
|
|
2196
|
+
setPhase("snap-disable");
|
|
2197
|
+
return prev;
|
|
2198
|
+
}
|
|
2199
|
+
const next = prev + 1;
|
|
2200
|
+
const delayMs = next >= N ? STEP_DURATION_MS : INTERVAL_MS;
|
|
2201
|
+
schedule(delayMs);
|
|
2202
|
+
return next;
|
|
2203
|
+
});
|
|
2204
|
+
};
|
|
2205
|
+
const schedule = (delayMs) => {
|
|
2206
|
+
if (cancelled) return;
|
|
2207
|
+
if (timerId !== null) window.clearTimeout(timerId);
|
|
2208
|
+
timerId = window.setTimeout(advance, delayMs);
|
|
2209
|
+
};
|
|
2210
|
+
scheduleRef.current = schedule;
|
|
2211
|
+
schedule(HOLD_MS);
|
|
2035
2212
|
return () => {
|
|
2036
|
-
|
|
2213
|
+
cancelled = true;
|
|
2214
|
+
scheduleRef.current = null;
|
|
2215
|
+
if (timerId !== null) window.clearTimeout(timerId);
|
|
2037
2216
|
};
|
|
2038
|
-
}, [
|
|
2217
|
+
}, [N]);
|
|
2039
2218
|
(0, import_react10.useEffect)(() => {
|
|
2040
|
-
|
|
2219
|
+
if (phase === "snap-disable") {
|
|
2220
|
+
const raf = requestAnimationFrame(() => {
|
|
2221
|
+
setStep(0);
|
|
2222
|
+
setPhase("snap-jump");
|
|
2223
|
+
});
|
|
2224
|
+
rafRef.current = raf;
|
|
2225
|
+
return () => cancelAnimationFrame(raf);
|
|
2226
|
+
}
|
|
2227
|
+
if (phase === "snap-jump") {
|
|
2228
|
+
const raf = requestAnimationFrame(() => {
|
|
2229
|
+
setPhase("idle");
|
|
2230
|
+
scheduleRef.current?.(HOLD_MS);
|
|
2231
|
+
});
|
|
2232
|
+
rafRef.current = raf;
|
|
2233
|
+
return () => cancelAnimationFrame(raf);
|
|
2234
|
+
}
|
|
2235
|
+
}, [phase]);
|
|
2236
|
+
(0, import_react10.useEffect)(() => {
|
|
2237
|
+
setStep(0);
|
|
2238
|
+
setPhase("idle");
|
|
2239
|
+
}, [N]);
|
|
2240
|
+
(0, import_react10.useEffect)(() => {
|
|
2241
|
+
const apply = () => {
|
|
2041
2242
|
const section = sectionRef.current;
|
|
2042
|
-
if (!section || window.innerWidth <
|
|
2243
|
+
if (!section || window.innerWidth < PARALLAX_BREAKPOINT) {
|
|
2043
2244
|
if (leftColRef.current) leftColRef.current.style.transform = "";
|
|
2044
|
-
if (rightColRef.current)
|
|
2245
|
+
if (rightColRef.current)
|
|
2246
|
+
rightColRef.current.style.transform = "";
|
|
2045
2247
|
return;
|
|
2046
2248
|
}
|
|
2047
2249
|
const rect = section.getBoundingClientRect();
|
|
2048
|
-
const
|
|
2049
|
-
const
|
|
2050
|
-
const
|
|
2051
|
-
const
|
|
2052
|
-
|
|
2053
|
-
|
|
2250
|
+
const viewport = window.innerHeight;
|
|
2251
|
+
const totalTravel = rect.height + viewport;
|
|
2252
|
+
const traveled = viewport - rect.top;
|
|
2253
|
+
const rawProgress = traveled / totalTravel;
|
|
2254
|
+
const progress = Math.max(0, Math.min(1, rawProgress));
|
|
2255
|
+
const normalised = Math.max(
|
|
2256
|
+
0,
|
|
2257
|
+
Math.min(
|
|
2258
|
+
1,
|
|
2259
|
+
(progress - PARALLAX_START) / (PARALLAX_END - PARALLAX_START)
|
|
2260
|
+
)
|
|
2261
|
+
);
|
|
2262
|
+
const remaining = 1 - normalised;
|
|
2263
|
+
const leftOffset = -PARALLAX_MAX_PERCENT * remaining;
|
|
2264
|
+
const rightOffset = PARALLAX_MAX_PERCENT * remaining;
|
|
2265
|
+
if (leftColRef.current) {
|
|
2266
|
+
leftColRef.current.style.transform = `translateY(${leftOffset}%)`;
|
|
2267
|
+
}
|
|
2268
|
+
if (rightColRef.current) {
|
|
2269
|
+
rightColRef.current.style.transform = `translateY(${rightOffset}%)`;
|
|
2270
|
+
}
|
|
2054
2271
|
};
|
|
2055
2272
|
const onScroll = () => {
|
|
2056
|
-
|
|
2057
|
-
rafRef.current = requestAnimationFrame(applyParallax);
|
|
2273
|
+
requestAnimationFrame(apply);
|
|
2058
2274
|
};
|
|
2059
|
-
|
|
2275
|
+
apply();
|
|
2060
2276
|
window.addEventListener("scroll", onScroll, { passive: true });
|
|
2061
2277
|
window.addEventListener("resize", onScroll, { passive: true });
|
|
2062
2278
|
return () => {
|
|
2063
2279
|
window.removeEventListener("scroll", onScroll);
|
|
2064
2280
|
window.removeEventListener("resize", onScroll);
|
|
2065
|
-
if (rafRef.current) cancelAnimationFrame(rafRef.current);
|
|
2066
2281
|
};
|
|
2067
2282
|
}, []);
|
|
2283
|
+
const transition = phase === "idle" ? TRANSITION : "none";
|
|
2068
2284
|
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2069
2285
|
"section",
|
|
2070
2286
|
{
|
|
2071
2287
|
ref: sectionRef,
|
|
2072
|
-
className: ["stats", className].filter(Boolean).join(" "),
|
|
2288
|
+
className: ["stats-v2", className].filter(Boolean).join(" "),
|
|
2073
2289
|
...props,
|
|
2074
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "
|
|
2075
|
-
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "
|
|
2076
|
-
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h2", { className: "
|
|
2077
|
-
description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "
|
|
2290
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "stats-v2__inner", children: [
|
|
2291
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "stats-v2__header", children: [
|
|
2292
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h2", { className: "stats-v2__title", children: title }),
|
|
2293
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "stats-v2__description", children: description })
|
|
2078
2294
|
] }),
|
|
2079
|
-
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "
|
|
2080
|
-
leftAwards.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2295
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "stats-v2__content", children: [
|
|
2296
|
+
leftAwards.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2297
|
+
"div",
|
|
2298
|
+
{
|
|
2299
|
+
ref: leftColRef,
|
|
2300
|
+
className: "stats-v2__awards-col stats-v2__awards-col--left",
|
|
2301
|
+
children: leftAwards.map((award, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AwardBadge, { ...award }, `l-${i}`))
|
|
2302
|
+
}
|
|
2303
|
+
),
|
|
2304
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "stats-v2__card", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "stats-v2__card-track", children: [
|
|
2305
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2306
|
+
"div",
|
|
2307
|
+
{
|
|
2308
|
+
className: "stats-v2__fade stats-v2__fade--top",
|
|
2309
|
+
"aria-hidden": "true"
|
|
2310
|
+
}
|
|
2311
|
+
),
|
|
2312
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2313
|
+
"div",
|
|
2314
|
+
{
|
|
2315
|
+
className: "stats-v2__fade stats-v2__fade--bottom",
|
|
2316
|
+
"aria-hidden": "true"
|
|
2317
|
+
}
|
|
2318
|
+
),
|
|
2319
|
+
strip.map((stat, i) => {
|
|
2320
|
+
const slot = slotForIndex(i, step);
|
|
2321
|
+
const active = slot === "active";
|
|
2087
2322
|
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2088
2323
|
"div",
|
|
2089
2324
|
{
|
|
2090
2325
|
className: [
|
|
2091
|
-
"
|
|
2092
|
-
active ? "
|
|
2326
|
+
"stats-v2__stat",
|
|
2327
|
+
active ? "stats-v2__stat--active" : "stats-v2__stat--inactive"
|
|
2093
2328
|
].join(" "),
|
|
2094
|
-
style:
|
|
2329
|
+
style: getSlotStyle(slot, transition),
|
|
2095
2330
|
"aria-hidden": !active,
|
|
2096
2331
|
children: [
|
|
2097
|
-
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "
|
|
2098
|
-
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "
|
|
2332
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "stats-v2__stat-value", children: stat.value }),
|
|
2333
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "stats-v2__stat-label", children: stat.label })
|
|
2099
2334
|
]
|
|
2100
2335
|
},
|
|
2101
2336
|
i
|
|
2102
2337
|
);
|
|
2103
2338
|
})
|
|
2104
2339
|
] }) }),
|
|
2105
|
-
rightAwards.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2106
|
-
|
|
2340
|
+
rightAwards.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2341
|
+
"div",
|
|
2342
|
+
{
|
|
2343
|
+
ref: rightColRef,
|
|
2344
|
+
className: "stats-v2__awards-col stats-v2__awards-col--right",
|
|
2345
|
+
children: rightAwards.map((award, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AwardBadge, { ...award }, `r-${i}`))
|
|
2346
|
+
}
|
|
2347
|
+
),
|
|
2348
|
+
hasAwards && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "stats-v2__awards-mobile", children: allAwards.map((award, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AwardBadge, { ...award }, `m-${i}`)) })
|
|
2107
2349
|
] })
|
|
2108
2350
|
] })
|
|
2109
2351
|
}
|
|
2110
2352
|
);
|
|
2111
2353
|
};
|
|
2112
2354
|
|
|
2355
|
+
// templates/Stats/StatsSimple.tsx
|
|
2356
|
+
var import_react11 = require("react");
|
|
2357
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
2358
|
+
function parseValue(raw) {
|
|
2359
|
+
const match = raw.match(/^([^0-9]*)([0-9]+(?:\.[0-9]+)?)(.*)$/);
|
|
2360
|
+
if (!match) return { prefix: "", number: 0, suffix: raw };
|
|
2361
|
+
return {
|
|
2362
|
+
prefix: match[1],
|
|
2363
|
+
number: parseFloat(match[2]),
|
|
2364
|
+
suffix: match[3]
|
|
2365
|
+
};
|
|
2366
|
+
}
|
|
2367
|
+
var DURATION_MS = 1800;
|
|
2368
|
+
var EASING2 = (t) => 1 - Math.pow(1 - t, 3);
|
|
2369
|
+
function useCountUp(target, active) {
|
|
2370
|
+
const [display, setDisplay] = (0, import_react11.useState)(0);
|
|
2371
|
+
const rafRef = (0, import_react11.useRef)(null);
|
|
2372
|
+
const startRef = (0, import_react11.useRef)(null);
|
|
2373
|
+
(0, import_react11.useEffect)(() => {
|
|
2374
|
+
if (!active) return;
|
|
2375
|
+
startRef.current = null;
|
|
2376
|
+
const tick = (now) => {
|
|
2377
|
+
if (startRef.current === null) startRef.current = now;
|
|
2378
|
+
const elapsed = now - startRef.current;
|
|
2379
|
+
const progress = Math.min(elapsed / DURATION_MS, 1);
|
|
2380
|
+
const eased = EASING2(progress);
|
|
2381
|
+
setDisplay(Math.round(eased * target));
|
|
2382
|
+
if (progress < 1) {
|
|
2383
|
+
rafRef.current = requestAnimationFrame(tick);
|
|
2384
|
+
}
|
|
2385
|
+
};
|
|
2386
|
+
rafRef.current = requestAnimationFrame(tick);
|
|
2387
|
+
return () => {
|
|
2388
|
+
if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
|
|
2389
|
+
};
|
|
2390
|
+
}, [target, active]);
|
|
2391
|
+
return display;
|
|
2392
|
+
}
|
|
2393
|
+
var AnimatedValue = ({
|
|
2394
|
+
raw,
|
|
2395
|
+
active
|
|
2396
|
+
}) => {
|
|
2397
|
+
const { prefix, number, suffix } = parseValue(raw);
|
|
2398
|
+
const count = useCountUp(number, active);
|
|
2399
|
+
const formatted = number >= 1e3 && !/[KMBkmb]/.test(suffix) ? count.toLocaleString() : String(count);
|
|
2400
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "stats-simple__value", children: [
|
|
2401
|
+
prefix,
|
|
2402
|
+
formatted,
|
|
2403
|
+
suffix
|
|
2404
|
+
] });
|
|
2405
|
+
};
|
|
2406
|
+
var StatsSimple = ({
|
|
2407
|
+
stats,
|
|
2408
|
+
className,
|
|
2409
|
+
...props
|
|
2410
|
+
}) => {
|
|
2411
|
+
const sectionRef = (0, import_react11.useRef)(null);
|
|
2412
|
+
const [animated, setAnimated] = (0, import_react11.useState)(false);
|
|
2413
|
+
(0, import_react11.useEffect)(() => {
|
|
2414
|
+
const el = sectionRef.current;
|
|
2415
|
+
if (!el) return;
|
|
2416
|
+
const observer = new IntersectionObserver(
|
|
2417
|
+
([entry]) => {
|
|
2418
|
+
if (entry.isIntersecting) {
|
|
2419
|
+
setAnimated(true);
|
|
2420
|
+
observer.disconnect();
|
|
2421
|
+
}
|
|
2422
|
+
},
|
|
2423
|
+
{ threshold: 0.25 }
|
|
2424
|
+
);
|
|
2425
|
+
observer.observe(el);
|
|
2426
|
+
return () => observer.disconnect();
|
|
2427
|
+
}, []);
|
|
2428
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2429
|
+
"section",
|
|
2430
|
+
{
|
|
2431
|
+
ref: sectionRef,
|
|
2432
|
+
className: ["stats-simple", className].filter(Boolean).join(" "),
|
|
2433
|
+
...props,
|
|
2434
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "stats-simple__inner", children: stats.map((stat, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "stats-simple__item", children: [
|
|
2435
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AnimatedValue, { raw: stat.value, active: animated }),
|
|
2436
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "stats-simple__label", children: stat.label })
|
|
2437
|
+
] }, i)) })
|
|
2438
|
+
}
|
|
2439
|
+
);
|
|
2440
|
+
};
|
|
2441
|
+
|
|
2113
2442
|
// templates/FeatureScroll/FeatureScroll.tsx
|
|
2114
|
-
var
|
|
2443
|
+
var import_react13 = require("react");
|
|
2115
2444
|
|
|
2116
2445
|
// components/DotLottieInView/DotLottieInView.tsx
|
|
2117
|
-
var
|
|
2446
|
+
var import_react12 = require("react");
|
|
2118
2447
|
var import_dotlottie_react = require("@lottiefiles/dotlottie-react");
|
|
2119
|
-
var
|
|
2448
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
2120
2449
|
function DotLottieInView({
|
|
2121
2450
|
enabled = true,
|
|
2122
2451
|
rootMargin = "0px",
|
|
@@ -2125,10 +2454,10 @@ function DotLottieInView({
|
|
|
2125
2454
|
style,
|
|
2126
2455
|
...dotProps
|
|
2127
2456
|
}) {
|
|
2128
|
-
const wrapRef = (0,
|
|
2129
|
-
const [inView, setInView] = (0,
|
|
2130
|
-
const [dotLottie, setDotLottie] = (0,
|
|
2131
|
-
(0,
|
|
2457
|
+
const wrapRef = (0, import_react12.useRef)(null);
|
|
2458
|
+
const [inView, setInView] = (0, import_react12.useState)(false);
|
|
2459
|
+
const [dotLottie, setDotLottie] = (0, import_react12.useState)(null);
|
|
2460
|
+
(0, import_react12.useEffect)(() => {
|
|
2132
2461
|
const el = wrapRef.current;
|
|
2133
2462
|
if (!el) return;
|
|
2134
2463
|
const observer = new IntersectionObserver(
|
|
@@ -2140,7 +2469,7 @@ function DotLottieInView({
|
|
|
2140
2469
|
observer.observe(el);
|
|
2141
2470
|
return () => observer.disconnect();
|
|
2142
2471
|
}, [rootMargin, threshold]);
|
|
2143
|
-
(0,
|
|
2472
|
+
(0, import_react12.useEffect)(() => {
|
|
2144
2473
|
if (!dotLottie) return;
|
|
2145
2474
|
if (!enabled || !inView) {
|
|
2146
2475
|
dotLottie.stop();
|
|
@@ -2149,7 +2478,7 @@ function DotLottieInView({
|
|
|
2149
2478
|
dotLottie.stop();
|
|
2150
2479
|
dotLottie.play();
|
|
2151
2480
|
}, [dotLottie, enabled, inView]);
|
|
2152
|
-
return /* @__PURE__ */ (0,
|
|
2481
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2153
2482
|
"div",
|
|
2154
2483
|
{
|
|
2155
2484
|
ref: wrapRef,
|
|
@@ -2164,7 +2493,7 @@ function DotLottieInView({
|
|
|
2164
2493
|
backgroundColor: "transparent",
|
|
2165
2494
|
...style
|
|
2166
2495
|
},
|
|
2167
|
-
children: /* @__PURE__ */ (0,
|
|
2496
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2168
2497
|
import_dotlottie_react.DotLottieReact,
|
|
2169
2498
|
{
|
|
2170
2499
|
...dotProps,
|
|
@@ -2178,7 +2507,7 @@ function DotLottieInView({
|
|
|
2178
2507
|
}
|
|
2179
2508
|
|
|
2180
2509
|
// templates/FeatureScroll/FeatureScroll.tsx
|
|
2181
|
-
var
|
|
2510
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
2182
2511
|
var FEATURE_SCROLL_DATA = [
|
|
2183
2512
|
{
|
|
2184
2513
|
title: "Forex",
|
|
@@ -2223,7 +2552,7 @@ var FEATURE_SCROLL_DATA = [
|
|
|
2223
2552
|
mediaUrl: "https://cdn.prod.website-files.com/66fbaad381fa6866fa4991f3/675a9064f2c16e4e0732abfb_Stock%20Indices.lottie"
|
|
2224
2553
|
}
|
|
2225
2554
|
];
|
|
2226
|
-
var ChevronRight2 = () => /* @__PURE__ */ (0,
|
|
2555
|
+
var ChevronRight2 = () => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2227
2556
|
"svg",
|
|
2228
2557
|
{
|
|
2229
2558
|
className: "fs__item-link-icon",
|
|
@@ -2232,7 +2561,7 @@ var ChevronRight2 = () => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
|
2232
2561
|
viewBox: "0 0 16 16",
|
|
2233
2562
|
fill: "none",
|
|
2234
2563
|
"aria-hidden": "true",
|
|
2235
|
-
children: /* @__PURE__ */ (0,
|
|
2564
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2236
2565
|
"path",
|
|
2237
2566
|
{
|
|
2238
2567
|
d: "M6 3l5 5-5 5",
|
|
@@ -2250,7 +2579,7 @@ function resolveMediaType(item) {
|
|
|
2250
2579
|
}
|
|
2251
2580
|
var MediaRenderer = ({ item, active }) => {
|
|
2252
2581
|
if (resolveMediaType(item) === "lottie") {
|
|
2253
|
-
return /* @__PURE__ */ (0,
|
|
2582
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2254
2583
|
DotLottieInView,
|
|
2255
2584
|
{
|
|
2256
2585
|
src: item.mediaUrl,
|
|
@@ -2258,7 +2587,7 @@ var MediaRenderer = ({ item, active }) => {
|
|
|
2258
2587
|
}
|
|
2259
2588
|
);
|
|
2260
2589
|
}
|
|
2261
|
-
return /* @__PURE__ */ (0,
|
|
2590
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2262
2591
|
"img",
|
|
2263
2592
|
{
|
|
2264
2593
|
src: item.mediaUrl,
|
|
@@ -2274,10 +2603,10 @@ var FeatureScroll = ({
|
|
|
2274
2603
|
className,
|
|
2275
2604
|
...props
|
|
2276
2605
|
}) => {
|
|
2277
|
-
const [activeIndex, setActiveIndex] = (0,
|
|
2278
|
-
const titleRefs = (0,
|
|
2279
|
-
const mediaColRef = (0,
|
|
2280
|
-
(0,
|
|
2606
|
+
const [activeIndex, setActiveIndex] = (0, import_react13.useState)(0);
|
|
2607
|
+
const titleRefs = (0, import_react13.useRef)([]);
|
|
2608
|
+
const mediaColRef = (0, import_react13.useRef)(null);
|
|
2609
|
+
(0, import_react13.useLayoutEffect)(() => {
|
|
2281
2610
|
if (items.length === 0) return;
|
|
2282
2611
|
const readThresholdPx = () => {
|
|
2283
2612
|
const col = mediaColRef.current;
|
|
@@ -2329,24 +2658,24 @@ var FeatureScroll = ({
|
|
|
2329
2658
|
className
|
|
2330
2659
|
].filter(Boolean).join(" ");
|
|
2331
2660
|
if (items.length === 0) {
|
|
2332
|
-
return /* @__PURE__ */ (0,
|
|
2661
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("section", { className: rootClass, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "fs__inner", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h2", { className: "fs__header", children: header }) }) });
|
|
2333
2662
|
}
|
|
2334
|
-
return /* @__PURE__ */ (0,
|
|
2335
|
-
/* @__PURE__ */ (0,
|
|
2336
|
-
/* @__PURE__ */ (0,
|
|
2337
|
-
/* @__PURE__ */ (0,
|
|
2663
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("section", { className: rootClass, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "fs__inner", children: [
|
|
2664
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h2", { className: "fs__header", children: header }),
|
|
2665
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "fs__layout", children: [
|
|
2666
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "fs__media-col", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2338
2667
|
"div",
|
|
2339
2668
|
{
|
|
2340
2669
|
ref: mediaColRef,
|
|
2341
2670
|
className: "fs__media-sticky",
|
|
2342
|
-
children: /* @__PURE__ */ (0,
|
|
2671
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "fs__media-wrap", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2343
2672
|
"div",
|
|
2344
2673
|
{
|
|
2345
2674
|
className: [
|
|
2346
2675
|
"fs__media-item",
|
|
2347
2676
|
i === activeIndex ? "fs__media-item--active" : ""
|
|
2348
2677
|
].filter(Boolean).join(" "),
|
|
2349
|
-
children: /* @__PURE__ */ (0,
|
|
2678
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2350
2679
|
MediaRenderer,
|
|
2351
2680
|
{
|
|
2352
2681
|
item,
|
|
@@ -2358,12 +2687,12 @@ var FeatureScroll = ({
|
|
|
2358
2687
|
)) })
|
|
2359
2688
|
}
|
|
2360
2689
|
) }),
|
|
2361
|
-
/* @__PURE__ */ (0,
|
|
2690
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "fs__content-col", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
2362
2691
|
"div",
|
|
2363
2692
|
{
|
|
2364
2693
|
className: "fs__item",
|
|
2365
2694
|
children: [
|
|
2366
|
-
/* @__PURE__ */ (0,
|
|
2695
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2367
2696
|
"h3",
|
|
2368
2697
|
{
|
|
2369
2698
|
ref: (el) => {
|
|
@@ -2373,15 +2702,15 @@ var FeatureScroll = ({
|
|
|
2373
2702
|
children: item.title
|
|
2374
2703
|
}
|
|
2375
2704
|
),
|
|
2376
|
-
/* @__PURE__ */ (0,
|
|
2377
|
-
/* @__PURE__ */ (0,
|
|
2705
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "fs__item-desc", children: item.description }),
|
|
2706
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
2378
2707
|
"a",
|
|
2379
2708
|
{
|
|
2380
2709
|
href: item.link,
|
|
2381
2710
|
className: "fs__item-link",
|
|
2382
2711
|
children: [
|
|
2383
|
-
/* @__PURE__ */ (0,
|
|
2384
|
-
/* @__PURE__ */ (0,
|
|
2712
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: item.linkLabel }),
|
|
2713
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ChevronRight2, {})
|
|
2385
2714
|
]
|
|
2386
2715
|
}
|
|
2387
2716
|
)
|
|
@@ -2390,18 +2719,18 @@ var FeatureScroll = ({
|
|
|
2390
2719
|
i
|
|
2391
2720
|
)) })
|
|
2392
2721
|
] }),
|
|
2393
|
-
/* @__PURE__ */ (0,
|
|
2394
|
-
/* @__PURE__ */ (0,
|
|
2395
|
-
/* @__PURE__ */ (0,
|
|
2396
|
-
/* @__PURE__ */ (0,
|
|
2397
|
-
/* @__PURE__ */ (0,
|
|
2722
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "fs__mobile-list", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "fs__mobile-item", children: [
|
|
2723
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h3", { className: "fs__item-title", children: item.title }),
|
|
2724
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "fs__mobile-media", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MediaRenderer, { item, active: true }) }),
|
|
2725
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "fs__item-desc", children: item.description }),
|
|
2726
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
2398
2727
|
"a",
|
|
2399
2728
|
{
|
|
2400
2729
|
href: item.link,
|
|
2401
2730
|
className: "fs__item-link",
|
|
2402
2731
|
children: [
|
|
2403
|
-
/* @__PURE__ */ (0,
|
|
2404
|
-
/* @__PURE__ */ (0,
|
|
2732
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: item.linkLabel }),
|
|
2733
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ChevronRight2, {})
|
|
2405
2734
|
]
|
|
2406
2735
|
}
|
|
2407
2736
|
)
|
|
@@ -2410,8 +2739,8 @@ var FeatureScroll = ({
|
|
|
2410
2739
|
};
|
|
2411
2740
|
|
|
2412
2741
|
// templates/StickyStackedCards/StickyStackedCards.tsx
|
|
2413
|
-
var
|
|
2414
|
-
var
|
|
2742
|
+
var import_react14 = require("react");
|
|
2743
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
2415
2744
|
var PLACEHOLDER_IMAGE = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/69b9309379ac08e59ca8210a_1f3f555da9a5cbb13a6fe1bf0d5fe1b6_placeholder-image.webp";
|
|
2416
2745
|
var STEPS_DATA = [
|
|
2417
2746
|
{
|
|
@@ -2440,8 +2769,8 @@ var StickyStackedCards = ({
|
|
|
2440
2769
|
className,
|
|
2441
2770
|
...props
|
|
2442
2771
|
}) => {
|
|
2443
|
-
const cardRefs = (0,
|
|
2444
|
-
(0,
|
|
2772
|
+
const cardRefs = (0, import_react14.useRef)([]);
|
|
2773
|
+
(0, import_react14.useEffect)(() => {
|
|
2445
2774
|
if (typeof window === "undefined") return;
|
|
2446
2775
|
let rafId = 0;
|
|
2447
2776
|
const update = () => {
|
|
@@ -2475,14 +2804,14 @@ var StickyStackedCards = ({
|
|
|
2475
2804
|
cancelAnimationFrame(rafId);
|
|
2476
2805
|
};
|
|
2477
2806
|
}, [items.length]);
|
|
2478
|
-
return /* @__PURE__ */ (0,
|
|
2807
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2479
2808
|
"section",
|
|
2480
2809
|
{
|
|
2481
2810
|
className: ["ssc", className].filter(Boolean).join(" "),
|
|
2482
2811
|
...props,
|
|
2483
|
-
children: /* @__PURE__ */ (0,
|
|
2484
|
-
/* @__PURE__ */ (0,
|
|
2485
|
-
/* @__PURE__ */ (0,
|
|
2812
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "ssc__inner", children: [
|
|
2813
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { className: "ssc__header", children: header }),
|
|
2814
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "ssc__track", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
2486
2815
|
"div",
|
|
2487
2816
|
{
|
|
2488
2817
|
ref: (el) => {
|
|
@@ -2508,11 +2837,11 @@ var StickyStackedCards = ({
|
|
|
2508
2837
|
top: `calc(var(--ssc-sticky-top) + ${i} * var(--ssc-peek-offset))`
|
|
2509
2838
|
},
|
|
2510
2839
|
children: [
|
|
2511
|
-
/* @__PURE__ */ (0,
|
|
2512
|
-
/* @__PURE__ */ (0,
|
|
2513
|
-
/* @__PURE__ */ (0,
|
|
2840
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "ssc__card-content", children: [
|
|
2841
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "ssc__card-title", children: item.title }),
|
|
2842
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "ssc__card-desc", children: item.description })
|
|
2514
2843
|
] }),
|
|
2515
|
-
/* @__PURE__ */ (0,
|
|
2844
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "ssc__card-image", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2516
2845
|
"img",
|
|
2517
2846
|
{
|
|
2518
2847
|
src: item.imageUrl,
|
|
@@ -2530,9 +2859,9 @@ var StickyStackedCards = ({
|
|
|
2530
2859
|
};
|
|
2531
2860
|
|
|
2532
2861
|
// templates/CTABanner/CTABanner.tsx
|
|
2533
|
-
var
|
|
2862
|
+
var import_react15 = require("react");
|
|
2534
2863
|
var import_framer_motion = require("framer-motion");
|
|
2535
|
-
var
|
|
2864
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
2536
2865
|
var ENTRANCE = {
|
|
2537
2866
|
near: 80,
|
|
2538
2867
|
mid: 130,
|
|
@@ -2778,7 +3107,7 @@ var CTABanner = ({
|
|
|
2778
3107
|
...props
|
|
2779
3108
|
}) => {
|
|
2780
3109
|
const resolvedAvatars = avatars ?? (variant === "compact" ? COMPACT_AVATAR_DATA : AVATAR_DATA);
|
|
2781
|
-
const sectionRef = (0,
|
|
3110
|
+
const sectionRef = (0, import_react15.useRef)(null);
|
|
2782
3111
|
const { scrollYProgress } = (0, import_framer_motion.useScroll)({
|
|
2783
3112
|
target: sectionRef,
|
|
2784
3113
|
offset: ["start end", "end start"]
|
|
@@ -2796,14 +3125,14 @@ var CTABanner = ({
|
|
|
2796
3125
|
const compactXValues = useCompactAvatarXValues(smooth);
|
|
2797
3126
|
const avatarYValues = variant === "compact" ? compactYValues : standardYValues;
|
|
2798
3127
|
const avatarXValues = variant === "compact" ? compactXValues : standardXValues;
|
|
2799
|
-
return /* @__PURE__ */ (0,
|
|
3128
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
2800
3129
|
"section",
|
|
2801
3130
|
{
|
|
2802
3131
|
ref: sectionRef,
|
|
2803
3132
|
className: ["ctab", variant === "compact" ? "ctab--compact" : "", className].filter(Boolean).join(" "),
|
|
2804
3133
|
...props,
|
|
2805
3134
|
children: [
|
|
2806
|
-
/* @__PURE__ */ (0,
|
|
3135
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2807
3136
|
import_framer_motion.motion.div,
|
|
2808
3137
|
{
|
|
2809
3138
|
className: "ctab__grid",
|
|
@@ -2811,7 +3140,7 @@ var CTABanner = ({
|
|
|
2811
3140
|
"aria-hidden": "true"
|
|
2812
3141
|
}
|
|
2813
3142
|
),
|
|
2814
|
-
/* @__PURE__ */ (0,
|
|
3143
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "ctab__inner", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "ctab__stage", children: [
|
|
2815
3144
|
resolvedAvatars.map((avatar, index) => {
|
|
2816
3145
|
const posStyle = {};
|
|
2817
3146
|
if (avatar.desktopPos.left) posStyle["--av-d-left"] = avatar.desktopPos.left;
|
|
@@ -2820,7 +3149,7 @@ var CTABanner = ({
|
|
|
2820
3149
|
if (avatar.mobilePos?.left) posStyle["--av-m-left"] = avatar.mobilePos.left;
|
|
2821
3150
|
if (avatar.mobilePos?.right) posStyle["--av-m-right"] = avatar.mobilePos.right;
|
|
2822
3151
|
if (avatar.mobilePos?.top) posStyle["--av-m-top"] = avatar.mobilePos.top;
|
|
2823
|
-
return /* @__PURE__ */ (0,
|
|
3152
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2824
3153
|
import_framer_motion.motion.div,
|
|
2825
3154
|
{
|
|
2826
3155
|
className: [
|
|
@@ -2834,7 +3163,7 @@ var CTABanner = ({
|
|
|
2834
3163
|
opacity: avatarOpacity,
|
|
2835
3164
|
filter: avatarFilter
|
|
2836
3165
|
},
|
|
2837
|
-
children: /* @__PURE__ */ (0,
|
|
3166
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2838
3167
|
"img",
|
|
2839
3168
|
{
|
|
2840
3169
|
src: avatar.imageUrl,
|
|
@@ -2847,14 +3176,14 @@ var CTABanner = ({
|
|
|
2847
3176
|
avatar.id
|
|
2848
3177
|
);
|
|
2849
3178
|
}),
|
|
2850
|
-
/* @__PURE__ */ (0,
|
|
3179
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
2851
3180
|
import_framer_motion.motion.div,
|
|
2852
3181
|
{
|
|
2853
3182
|
className: "ctab__hero",
|
|
2854
3183
|
style: { y: heroY, opacity: heroOpacity },
|
|
2855
3184
|
children: [
|
|
2856
|
-
/* @__PURE__ */ (0,
|
|
2857
|
-
/* @__PURE__ */ (0,
|
|
3185
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h2", { className: "ctab__headline", children: headline }),
|
|
3186
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button, { colorScheme: "black", variant: "primary", label: ctaLabel }) })
|
|
2858
3187
|
]
|
|
2859
3188
|
}
|
|
2860
3189
|
)
|
|
@@ -2865,14 +3194,14 @@ var CTABanner = ({
|
|
|
2865
3194
|
};
|
|
2866
3195
|
|
|
2867
3196
|
// components/Navbar/Navbar.tsx
|
|
2868
|
-
var
|
|
3197
|
+
var import_react16 = require("react");
|
|
2869
3198
|
var import_framer_motion2 = require("framer-motion");
|
|
2870
3199
|
|
|
2871
3200
|
// assets/icon-globe.svg
|
|
2872
3201
|
var icon_globe_default = "./icon-globe-S54WYYEK.svg";
|
|
2873
3202
|
|
|
2874
3203
|
// components/Navbar/Navbar.tsx
|
|
2875
|
-
var
|
|
3204
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
2876
3205
|
var EASE_OUT_EXPO = [0.16, 1, 0.3, 1];
|
|
2877
3206
|
var dropdownVariants = {
|
|
2878
3207
|
hidden: { opacity: 0, scale: 0.96, y: -8 },
|
|
@@ -2886,7 +3215,7 @@ var accordionVariants = {
|
|
|
2886
3215
|
hidden: { height: 0, opacity: 0 },
|
|
2887
3216
|
visible: { height: "auto", opacity: 1 }
|
|
2888
3217
|
};
|
|
2889
|
-
var ChevronDownIcon3 = ({ className }) => /* @__PURE__ */ (0,
|
|
3218
|
+
var ChevronDownIcon3 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2890
3219
|
"svg",
|
|
2891
3220
|
{
|
|
2892
3221
|
className,
|
|
@@ -2895,7 +3224,7 @@ var ChevronDownIcon3 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime
|
|
|
2895
3224
|
viewBox: "0 0 14 14",
|
|
2896
3225
|
fill: "none",
|
|
2897
3226
|
"aria-hidden": "true",
|
|
2898
|
-
children: /* @__PURE__ */ (0,
|
|
3227
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2899
3228
|
"path",
|
|
2900
3229
|
{
|
|
2901
3230
|
d: "M2.625 4.8125L7 9.1875L11.375 4.8125",
|
|
@@ -2907,7 +3236,7 @@ var ChevronDownIcon3 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime
|
|
|
2907
3236
|
)
|
|
2908
3237
|
}
|
|
2909
3238
|
);
|
|
2910
|
-
var ArrowRightIcon = () => /* @__PURE__ */ (0,
|
|
3239
|
+
var ArrowRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2911
3240
|
"path",
|
|
2912
3241
|
{
|
|
2913
3242
|
d: "M2.625 7H11.375M11.375 7L7.875 3.5M11.375 7L7.875 10.5",
|
|
@@ -2917,7 +3246,7 @@ var ArrowRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg",
|
|
|
2917
3246
|
strokeLinejoin: "round"
|
|
2918
3247
|
}
|
|
2919
3248
|
) });
|
|
2920
|
-
var ArrowUpRightIcon = () => /* @__PURE__ */ (0,
|
|
3249
|
+
var ArrowUpRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2921
3250
|
"path",
|
|
2922
3251
|
{
|
|
2923
3252
|
d: "M4.5 11.5L11.5 4.5M11.5 4.5H5.5M11.5 4.5V10.5",
|
|
@@ -2927,7 +3256,7 @@ var ArrowUpRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg"
|
|
|
2927
3256
|
strokeLinejoin: "round"
|
|
2928
3257
|
}
|
|
2929
3258
|
) });
|
|
2930
|
-
var BarsIcon = () => /* @__PURE__ */ (0,
|
|
3259
|
+
var BarsIcon = () => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2931
3260
|
"path",
|
|
2932
3261
|
{
|
|
2933
3262
|
d: "M2.5 5H17.5M2.5 10H17.5M2.5 15H17.5",
|
|
@@ -2936,7 +3265,7 @@ var BarsIcon = () => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { widt
|
|
|
2936
3265
|
strokeLinecap: "round"
|
|
2937
3266
|
}
|
|
2938
3267
|
) });
|
|
2939
|
-
var XMarkIcon2 = () => /* @__PURE__ */ (0,
|
|
3268
|
+
var XMarkIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2940
3269
|
"path",
|
|
2941
3270
|
{
|
|
2942
3271
|
d: "M15 5L5 15M5 5L15 15",
|
|
@@ -2945,7 +3274,7 @@ var XMarkIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { wi
|
|
|
2945
3274
|
strokeLinecap: "round"
|
|
2946
3275
|
}
|
|
2947
3276
|
) });
|
|
2948
|
-
var ChevronLeftIcon = ({ className }) => /* @__PURE__ */ (0,
|
|
3277
|
+
var ChevronLeftIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2949
3278
|
"svg",
|
|
2950
3279
|
{
|
|
2951
3280
|
className,
|
|
@@ -2954,7 +3283,7 @@ var ChevronLeftIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2
|
|
|
2954
3283
|
viewBox: "0 0 24 24",
|
|
2955
3284
|
fill: "none",
|
|
2956
3285
|
"aria-hidden": "true",
|
|
2957
|
-
children: /* @__PURE__ */ (0,
|
|
3286
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2958
3287
|
"path",
|
|
2959
3288
|
{
|
|
2960
3289
|
d: "M15 18L9 12L15 6",
|
|
@@ -2966,11 +3295,11 @@ var ChevronLeftIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2
|
|
|
2966
3295
|
)
|
|
2967
3296
|
}
|
|
2968
3297
|
);
|
|
2969
|
-
var GlobeIcon = ({ className }) => /* @__PURE__ */ (0,
|
|
3298
|
+
var GlobeIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { src: icon_globe_default, alt: "", "aria-hidden": "true", width: "20", height: "20", className });
|
|
2970
3299
|
var DropdownPanel = ({ item, onMouseEnter, onMouseLeave }) => {
|
|
2971
3300
|
const { dropdown } = item;
|
|
2972
3301
|
if (!dropdown) return null;
|
|
2973
|
-
return /* @__PURE__ */ (0,
|
|
3302
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2974
3303
|
import_framer_motion2.motion.div,
|
|
2975
3304
|
{
|
|
2976
3305
|
className: "navbar__dropdown",
|
|
@@ -2981,10 +3310,10 @@ var DropdownPanel = ({ item, onMouseEnter, onMouseLeave }) => {
|
|
|
2981
3310
|
transition: { duration: 0.18, ease: EASE_OUT_EXPO },
|
|
2982
3311
|
onMouseEnter,
|
|
2983
3312
|
onMouseLeave,
|
|
2984
|
-
children: /* @__PURE__ */ (0,
|
|
2985
|
-
/* @__PURE__ */ (0,
|
|
2986
|
-
/* @__PURE__ */ (0,
|
|
2987
|
-
section.items.map((link) => /* @__PURE__ */ (0,
|
|
3313
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "navbar__dropdown-inner", children: [
|
|
3314
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "navbar__dropdown-left", children: dropdown.columns.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "navbar__dropdown-col", children: col.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "navbar__dropdown-col-list", children: [
|
|
3315
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "navbar__dropdown-col-title", children: section.title }),
|
|
3316
|
+
section.items.map((link) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
2988
3317
|
"a",
|
|
2989
3318
|
{
|
|
2990
3319
|
href: link.href,
|
|
@@ -2993,24 +3322,24 @@ var DropdownPanel = ({ item, onMouseEnter, onMouseLeave }) => {
|
|
|
2993
3322
|
rel: link.external ? "noopener noreferrer" : void 0,
|
|
2994
3323
|
children: [
|
|
2995
3324
|
link.label,
|
|
2996
|
-
link.external ? /* @__PURE__ */ (0,
|
|
3325
|
+
link.external ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ArrowUpRightIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ArrowRightIcon, {})
|
|
2997
3326
|
]
|
|
2998
3327
|
},
|
|
2999
3328
|
link.href
|
|
3000
3329
|
))
|
|
3001
3330
|
] }, section.title)) }, colIdx)) }),
|
|
3002
|
-
dropdown.feature && /* @__PURE__ */ (0,
|
|
3331
|
+
dropdown.feature && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "navbar__dropdown-right", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FeatureCard, { feature: dropdown.feature }) })
|
|
3003
3332
|
] })
|
|
3004
3333
|
}
|
|
3005
3334
|
);
|
|
3006
3335
|
};
|
|
3007
|
-
var FeatureCard = ({ feature, mobile }) => /* @__PURE__ */ (0,
|
|
3336
|
+
var FeatureCard = ({ feature, mobile }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
3008
3337
|
"div",
|
|
3009
3338
|
{
|
|
3010
3339
|
className: mobile ? "navbar__drawer-feature" : "navbar__dropdown-feature",
|
|
3011
3340
|
style: feature.backgroundImageUrl ? { backgroundImage: `url(${feature.backgroundImageUrl})` } : void 0,
|
|
3012
3341
|
children: [
|
|
3013
|
-
feature.backgroundImageUrl && /* @__PURE__ */ (0,
|
|
3342
|
+
feature.backgroundImageUrl && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
3014
3343
|
"img",
|
|
3015
3344
|
{
|
|
3016
3345
|
src: feature.backgroundImageUrl,
|
|
@@ -3019,20 +3348,20 @@ var FeatureCard = ({ feature, mobile }) => /* @__PURE__ */ (0, import_jsx_runtim
|
|
|
3019
3348
|
"aria-hidden": "true"
|
|
3020
3349
|
}
|
|
3021
3350
|
),
|
|
3022
|
-
/* @__PURE__ */ (0,
|
|
3023
|
-
/* @__PURE__ */ (0,
|
|
3024
|
-
/* @__PURE__ */ (0,
|
|
3025
|
-
/* @__PURE__ */ (0,
|
|
3026
|
-
/* @__PURE__ */ (0,
|
|
3351
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: mobile ? "navbar__drawer-feature-overlay" : "navbar__dropdown-feature-overlay", "aria-hidden": "true" }),
|
|
3352
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: mobile ? "navbar__drawer-feature-content" : "navbar__dropdown-feature-content", children: [
|
|
3353
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { children: [
|
|
3354
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: mobile ? "navbar__drawer-feature-title" : "navbar__dropdown-feature-title", children: feature.title }),
|
|
3355
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: mobile ? "navbar__drawer-feature-desc" : "navbar__dropdown-feature-desc", children: feature.description })
|
|
3027
3356
|
] }),
|
|
3028
|
-
/* @__PURE__ */ (0,
|
|
3357
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
3029
3358
|
"a",
|
|
3030
3359
|
{
|
|
3031
3360
|
href: feature.ctaHref,
|
|
3032
3361
|
className: mobile ? "navbar__drawer-feature-cta" : "navbar__dropdown-feature-cta",
|
|
3033
3362
|
children: [
|
|
3034
3363
|
feature.ctaLabel,
|
|
3035
|
-
/* @__PURE__ */ (0,
|
|
3364
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ArrowRightIcon, {})
|
|
3036
3365
|
]
|
|
3037
3366
|
}
|
|
3038
3367
|
)
|
|
@@ -3042,8 +3371,8 @@ var FeatureCard = ({ feature, mobile }) => /* @__PURE__ */ (0, import_jsx_runtim
|
|
|
3042
3371
|
);
|
|
3043
3372
|
var DrawerAccordion = ({ item, isOpen, onToggle }) => {
|
|
3044
3373
|
const { dropdown } = item;
|
|
3045
|
-
return /* @__PURE__ */ (0,
|
|
3046
|
-
/* @__PURE__ */ (0,
|
|
3374
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "navbar__drawer-item", children: [
|
|
3375
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
3047
3376
|
"button",
|
|
3048
3377
|
{
|
|
3049
3378
|
className: `navbar__drawer-trigger ${isOpen ? "navbar__drawer-trigger--open" : ""}`,
|
|
@@ -3051,11 +3380,11 @@ var DrawerAccordion = ({ item, isOpen, onToggle }) => {
|
|
|
3051
3380
|
"aria-expanded": isOpen,
|
|
3052
3381
|
children: [
|
|
3053
3382
|
item.label,
|
|
3054
|
-
/* @__PURE__ */ (0,
|
|
3383
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ChevronDownIcon3, { className: "navbar__drawer-trigger__chevron" })
|
|
3055
3384
|
]
|
|
3056
3385
|
}
|
|
3057
3386
|
),
|
|
3058
|
-
/* @__PURE__ */ (0,
|
|
3387
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_framer_motion2.AnimatePresence, { initial: false, children: isOpen && dropdown && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
3059
3388
|
import_framer_motion2.motion.div,
|
|
3060
3389
|
{
|
|
3061
3390
|
className: "navbar__drawer-panel",
|
|
@@ -3064,10 +3393,10 @@ var DrawerAccordion = ({ item, isOpen, onToggle }) => {
|
|
|
3064
3393
|
animate: "visible",
|
|
3065
3394
|
exit: "hidden",
|
|
3066
3395
|
transition: { duration: 0.22, ease: EASE_OUT_EXPO },
|
|
3067
|
-
children: /* @__PURE__ */ (0,
|
|
3068
|
-
/* @__PURE__ */ (0,
|
|
3069
|
-
/* @__PURE__ */ (0,
|
|
3070
|
-
/* @__PURE__ */ (0,
|
|
3396
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "navbar__drawer-panel-inner", children: [
|
|
3397
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "navbar__drawer-panel-cols", children: dropdown.columns.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "navbar__drawer-panel-col", children: col.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "navbar__drawer-col-section", children: [
|
|
3398
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "navbar__drawer-col-title", children: section.title }),
|
|
3399
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "navbar__drawer-col-links", children: section.items.map((link) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
3071
3400
|
"a",
|
|
3072
3401
|
{
|
|
3073
3402
|
href: link.href,
|
|
@@ -3079,7 +3408,7 @@ var DrawerAccordion = ({ item, isOpen, onToggle }) => {
|
|
|
3079
3408
|
link.href
|
|
3080
3409
|
)) })
|
|
3081
3410
|
] }, section.title)) }, colIdx)) }),
|
|
3082
|
-
dropdown.feature && /* @__PURE__ */ (0,
|
|
3411
|
+
dropdown.feature && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FeatureCard, { feature: dropdown.feature, mobile: true })
|
|
3083
3412
|
] })
|
|
3084
3413
|
}
|
|
3085
3414
|
) })
|
|
@@ -3103,24 +3432,24 @@ var Navbar = ({
|
|
|
3103
3432
|
className,
|
|
3104
3433
|
...props
|
|
3105
3434
|
}) => {
|
|
3106
|
-
const [openDropdown, setOpenDropdown] = (0,
|
|
3107
|
-
const [mobileOpen, setMobileOpen] = (0,
|
|
3108
|
-
const [mobileExpanded, setMobileExpanded] = (0,
|
|
3109
|
-
const [scrolled, setScrolled] = (0,
|
|
3110
|
-
const [langDropdownOpen, setLangDropdownOpen] = (0,
|
|
3111
|
-
const [mobileLangOpen, setMobileLangOpen] = (0,
|
|
3112
|
-
const hoverTimeoutRef = (0,
|
|
3113
|
-
const langHoverTimeoutRef = (0,
|
|
3114
|
-
const pillAreaRef = (0,
|
|
3115
|
-
const langBtnRef = (0,
|
|
3435
|
+
const [openDropdown, setOpenDropdown] = (0, import_react16.useState)(null);
|
|
3436
|
+
const [mobileOpen, setMobileOpen] = (0, import_react16.useState)(false);
|
|
3437
|
+
const [mobileExpanded, setMobileExpanded] = (0, import_react16.useState)(null);
|
|
3438
|
+
const [scrolled, setScrolled] = (0, import_react16.useState)(false);
|
|
3439
|
+
const [langDropdownOpen, setLangDropdownOpen] = (0, import_react16.useState)(false);
|
|
3440
|
+
const [mobileLangOpen, setMobileLangOpen] = (0, import_react16.useState)(false);
|
|
3441
|
+
const hoverTimeoutRef = (0, import_react16.useRef)(null);
|
|
3442
|
+
const langHoverTimeoutRef = (0, import_react16.useRef)(null);
|
|
3443
|
+
const pillAreaRef = (0, import_react16.useRef)(null);
|
|
3444
|
+
const langBtnRef = (0, import_react16.useRef)(null);
|
|
3116
3445
|
const hasLangDropdown = Boolean(languageItems && languageItems.length > 0);
|
|
3117
3446
|
const resolvedLogo = theme === "light" ? logoSrcDark ?? logoSrc : logoSrc;
|
|
3118
|
-
(0,
|
|
3447
|
+
(0, import_react16.useEffect)(() => {
|
|
3119
3448
|
const onScroll = () => setScrolled(window.scrollY > 0);
|
|
3120
3449
|
window.addEventListener("scroll", onScroll, { passive: true });
|
|
3121
3450
|
return () => window.removeEventListener("scroll", onScroll);
|
|
3122
3451
|
}, []);
|
|
3123
|
-
(0,
|
|
3452
|
+
(0, import_react16.useEffect)(() => {
|
|
3124
3453
|
const onKey = (e) => {
|
|
3125
3454
|
if (e.key === "Escape") {
|
|
3126
3455
|
setOpenDropdown(null);
|
|
@@ -3131,16 +3460,16 @@ var Navbar = ({
|
|
|
3131
3460
|
document.addEventListener("keydown", onKey);
|
|
3132
3461
|
return () => document.removeEventListener("keydown", onKey);
|
|
3133
3462
|
}, []);
|
|
3134
|
-
(0,
|
|
3463
|
+
(0, import_react16.useEffect)(() => {
|
|
3135
3464
|
if (!mobileOpen) setMobileLangOpen(false);
|
|
3136
3465
|
}, [mobileOpen]);
|
|
3137
|
-
(0,
|
|
3466
|
+
(0, import_react16.useEffect)(() => {
|
|
3138
3467
|
document.body.style.overflow = mobileOpen ? "hidden" : "";
|
|
3139
3468
|
return () => {
|
|
3140
3469
|
document.body.style.overflow = "";
|
|
3141
3470
|
};
|
|
3142
3471
|
}, [mobileOpen]);
|
|
3143
|
-
(0,
|
|
3472
|
+
(0, import_react16.useEffect)(() => {
|
|
3144
3473
|
if (!openDropdown) return;
|
|
3145
3474
|
const onPointerDown = (e) => {
|
|
3146
3475
|
if (pillAreaRef.current && !pillAreaRef.current.contains(e.target)) {
|
|
@@ -3150,54 +3479,54 @@ var Navbar = ({
|
|
|
3150
3479
|
document.addEventListener("pointerdown", onPointerDown);
|
|
3151
3480
|
return () => document.removeEventListener("pointerdown", onPointerDown);
|
|
3152
3481
|
}, [openDropdown]);
|
|
3153
|
-
const clearHoverTimeout = (0,
|
|
3482
|
+
const clearHoverTimeout = (0, import_react16.useCallback)(() => {
|
|
3154
3483
|
if (hoverTimeoutRef.current) {
|
|
3155
3484
|
clearTimeout(hoverTimeoutRef.current);
|
|
3156
3485
|
hoverTimeoutRef.current = null;
|
|
3157
3486
|
}
|
|
3158
3487
|
}, []);
|
|
3159
|
-
const clearLangHoverTimeout = (0,
|
|
3488
|
+
const clearLangHoverTimeout = (0, import_react16.useCallback)(() => {
|
|
3160
3489
|
if (langHoverTimeoutRef.current) {
|
|
3161
3490
|
clearTimeout(langHoverTimeoutRef.current);
|
|
3162
3491
|
langHoverTimeoutRef.current = null;
|
|
3163
3492
|
}
|
|
3164
3493
|
}, []);
|
|
3165
|
-
const handleLangEnter = (0,
|
|
3494
|
+
const handleLangEnter = (0, import_react16.useCallback)(() => {
|
|
3166
3495
|
clearLangHoverTimeout();
|
|
3167
3496
|
setLangDropdownOpen(true);
|
|
3168
3497
|
}, [clearLangHoverTimeout]);
|
|
3169
|
-
const handleLangLeave = (0,
|
|
3498
|
+
const handleLangLeave = (0, import_react16.useCallback)(() => {
|
|
3170
3499
|
clearLangHoverTimeout();
|
|
3171
3500
|
langHoverTimeoutRef.current = setTimeout(() => setLangDropdownOpen(false), 150);
|
|
3172
3501
|
}, [clearLangHoverTimeout]);
|
|
3173
|
-
const handleLangSelect = (0,
|
|
3502
|
+
const handleLangSelect = (0, import_react16.useCallback)((code) => {
|
|
3174
3503
|
setLangDropdownOpen(false);
|
|
3175
3504
|
setMobileLangOpen(false);
|
|
3176
3505
|
onLanguageSelect?.(code);
|
|
3177
3506
|
}, [onLanguageSelect]);
|
|
3178
|
-
const handleNavEnter = (0,
|
|
3507
|
+
const handleNavEnter = (0, import_react16.useCallback)((label) => {
|
|
3179
3508
|
clearHoverTimeout();
|
|
3180
3509
|
setOpenDropdown(label);
|
|
3181
3510
|
}, [clearHoverTimeout]);
|
|
3182
|
-
const handleNavLeave = (0,
|
|
3511
|
+
const handleNavLeave = (0, import_react16.useCallback)(() => {
|
|
3183
3512
|
clearHoverTimeout();
|
|
3184
3513
|
hoverTimeoutRef.current = setTimeout(() => setOpenDropdown(null), 120);
|
|
3185
3514
|
}, [clearHoverTimeout]);
|
|
3186
3515
|
const activeDropdownItem = navItems.find((item) => item.label === openDropdown);
|
|
3187
|
-
return /* @__PURE__ */ (0,
|
|
3516
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
3188
3517
|
"nav",
|
|
3189
3518
|
{
|
|
3190
3519
|
className: ["navbar", `navbar--${theme}`, scrolled && "navbar--scrolled", mobileOpen && "navbar--menu-open", className].filter(Boolean).join(" "),
|
|
3191
3520
|
...props,
|
|
3192
3521
|
children: [
|
|
3193
|
-
/* @__PURE__ */ (0,
|
|
3194
|
-
/* @__PURE__ */ (0,
|
|
3195
|
-
/* @__PURE__ */ (0,
|
|
3196
|
-
/* @__PURE__ */ (0,
|
|
3197
|
-
/* @__PURE__ */ (0,
|
|
3522
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "navbar__bar", children: [
|
|
3523
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("a", { href: logoHref, className: "navbar__logo", "aria-label": "Home", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { src: resolvedLogo, alt: "Logo" }) }),
|
|
3524
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "navbar__nav-center", ref: pillAreaRef, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "navbar__pill", children: [
|
|
3525
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("a", { href: logoHref, className: "navbar__pill-logo", "aria-label": "Home", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { src: logoSrcDark ?? logoSrc, alt: "Logo" }) }),
|
|
3526
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "navbar__nav-group", children: [
|
|
3198
3527
|
navItems.map((item) => {
|
|
3199
3528
|
if (item.external) {
|
|
3200
|
-
return /* @__PURE__ */ (0,
|
|
3529
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
3201
3530
|
"a",
|
|
3202
3531
|
{
|
|
3203
3532
|
href: item.href,
|
|
@@ -3206,14 +3535,14 @@ var Navbar = ({
|
|
|
3206
3535
|
rel: "noopener noreferrer",
|
|
3207
3536
|
children: [
|
|
3208
3537
|
item.label,
|
|
3209
|
-
/* @__PURE__ */ (0,
|
|
3538
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ArrowUpRightIcon, {})
|
|
3210
3539
|
]
|
|
3211
3540
|
},
|
|
3212
3541
|
item.label
|
|
3213
3542
|
);
|
|
3214
3543
|
}
|
|
3215
3544
|
if (item.dropdown) {
|
|
3216
|
-
return /* @__PURE__ */ (0,
|
|
3545
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
3217
3546
|
"button",
|
|
3218
3547
|
{
|
|
3219
3548
|
className: [
|
|
@@ -3226,21 +3555,21 @@ var Navbar = ({
|
|
|
3226
3555
|
"aria-haspopup": "true",
|
|
3227
3556
|
children: [
|
|
3228
3557
|
item.label,
|
|
3229
|
-
/* @__PURE__ */ (0,
|
|
3558
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ChevronDownIcon3, { className: "navbar__nav-item__chevron" })
|
|
3230
3559
|
]
|
|
3231
3560
|
},
|
|
3232
3561
|
item.label
|
|
3233
3562
|
);
|
|
3234
3563
|
}
|
|
3235
|
-
return /* @__PURE__ */ (0,
|
|
3564
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("a", { href: item.href, className: "navbar__nav-item", children: item.label }, item.label);
|
|
3236
3565
|
}),
|
|
3237
|
-
languageLabel && /* @__PURE__ */ (0,
|
|
3566
|
+
languageLabel && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
3238
3567
|
"div",
|
|
3239
3568
|
{
|
|
3240
3569
|
className: "navbar__lang-wrapper",
|
|
3241
3570
|
onMouseEnter: hasLangDropdown ? handleLangEnter : void 0,
|
|
3242
3571
|
onMouseLeave: hasLangDropdown ? handleLangLeave : void 0,
|
|
3243
|
-
children: /* @__PURE__ */ (0,
|
|
3572
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
3244
3573
|
"button",
|
|
3245
3574
|
{
|
|
3246
3575
|
ref: langBtnRef,
|
|
@@ -3253,7 +3582,7 @@ var Navbar = ({
|
|
|
3253
3582
|
"aria-haspopup": hasLangDropdown ? "true" : void 0,
|
|
3254
3583
|
"aria-expanded": hasLangDropdown ? langDropdownOpen : void 0,
|
|
3255
3584
|
children: [
|
|
3256
|
-
/* @__PURE__ */ (0,
|
|
3585
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GlobeIcon, { className: "navbar__lang-globe" }),
|
|
3257
3586
|
languageLabel
|
|
3258
3587
|
]
|
|
3259
3588
|
}
|
|
@@ -3261,12 +3590,12 @@ var Navbar = ({
|
|
|
3261
3590
|
}
|
|
3262
3591
|
)
|
|
3263
3592
|
] }),
|
|
3264
|
-
/* @__PURE__ */ (0,
|
|
3265
|
-
loginHref && /* @__PURE__ */ (0,
|
|
3266
|
-
ctaHref && /* @__PURE__ */ (0,
|
|
3593
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "navbar__pill-actions", children: [
|
|
3594
|
+
loginHref && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("a", { href: loginHref, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button, { colorScheme: "black", variant: "secondary", label: loginLabel }) }),
|
|
3595
|
+
ctaHref && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
|
|
3267
3596
|
] })
|
|
3268
3597
|
] }) }),
|
|
3269
|
-
/* @__PURE__ */ (0,
|
|
3598
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_framer_motion2.AnimatePresence, { children: openDropdown && activeDropdownItem?.dropdown && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
3270
3599
|
DropdownPanel,
|
|
3271
3600
|
{
|
|
3272
3601
|
item: activeDropdownItem,
|
|
@@ -3275,7 +3604,7 @@ var Navbar = ({
|
|
|
3275
3604
|
},
|
|
3276
3605
|
"dropdown"
|
|
3277
3606
|
) }),
|
|
3278
|
-
/* @__PURE__ */ (0,
|
|
3607
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_framer_motion2.AnimatePresence, { children: hasLangDropdown && langDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
3279
3608
|
import_framer_motion2.motion.div,
|
|
3280
3609
|
{
|
|
3281
3610
|
className: "navbar__lang-dropdown",
|
|
@@ -3286,12 +3615,12 @@ var Navbar = ({
|
|
|
3286
3615
|
transition: { duration: 0.18, ease: EASE_OUT_EXPO },
|
|
3287
3616
|
onMouseEnter: clearLangHoverTimeout,
|
|
3288
3617
|
onMouseLeave: handleLangLeave,
|
|
3289
|
-
children: /* @__PURE__ */ (0,
|
|
3618
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
3290
3619
|
"div",
|
|
3291
3620
|
{
|
|
3292
3621
|
className: "navbar__lang-dropdown-grid",
|
|
3293
3622
|
style: { "--lang-rows": Math.ceil(languageItems.length / 3) },
|
|
3294
|
-
children: languageItems.map((lang) => /* @__PURE__ */ (0,
|
|
3623
|
+
children: languageItems.map((lang) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
3295
3624
|
"button",
|
|
3296
3625
|
{
|
|
3297
3626
|
className: [
|
|
@@ -3307,8 +3636,8 @@ var Navbar = ({
|
|
|
3307
3636
|
)
|
|
3308
3637
|
}
|
|
3309
3638
|
) }),
|
|
3310
|
-
/* @__PURE__ */ (0,
|
|
3311
|
-
loginHref && /* @__PURE__ */ (0,
|
|
3639
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "navbar__actions", children: [
|
|
3640
|
+
loginHref && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("a", { href: loginHref, className: "navbar__actions-login", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
3312
3641
|
Button,
|
|
3313
3642
|
{
|
|
3314
3643
|
colorScheme: theme === "dark" ? "white" : "black",
|
|
@@ -3316,10 +3645,10 @@ var Navbar = ({
|
|
|
3316
3645
|
label: loginLabel
|
|
3317
3646
|
}
|
|
3318
3647
|
) }),
|
|
3319
|
-
ctaHref && /* @__PURE__ */ (0,
|
|
3648
|
+
ctaHref && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
|
|
3320
3649
|
] }),
|
|
3321
|
-
/* @__PURE__ */ (0,
|
|
3322
|
-
loginHref && /* @__PURE__ */ (0,
|
|
3650
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "navbar__mobile-actions", children: [
|
|
3651
|
+
loginHref && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("a", { href: loginHref, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
3323
3652
|
Button,
|
|
3324
3653
|
{
|
|
3325
3654
|
colorScheme: scrolled || theme === "light" ? "black" : "white",
|
|
@@ -3327,18 +3656,18 @@ var Navbar = ({
|
|
|
3327
3656
|
label: loginLabel
|
|
3328
3657
|
}
|
|
3329
3658
|
) }),
|
|
3330
|
-
/* @__PURE__ */ (0,
|
|
3659
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
3331
3660
|
"button",
|
|
3332
3661
|
{
|
|
3333
3662
|
className: "navbar__mobile-trigger",
|
|
3334
3663
|
onClick: () => setMobileOpen((o) => !o),
|
|
3335
3664
|
"aria-label": mobileOpen ? "Close navigation menu" : "Open navigation menu",
|
|
3336
|
-
children: mobileOpen ? /* @__PURE__ */ (0,
|
|
3665
|
+
children: mobileOpen ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(XMarkIcon2, {}) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BarsIcon, {})
|
|
3337
3666
|
}
|
|
3338
3667
|
)
|
|
3339
3668
|
] })
|
|
3340
3669
|
] }),
|
|
3341
|
-
/* @__PURE__ */ (0,
|
|
3670
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "navbar__drawer-clip", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_framer_motion2.AnimatePresence, { children: mobileOpen && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
3342
3671
|
import_framer_motion2.motion.div,
|
|
3343
3672
|
{
|
|
3344
3673
|
className: "navbar__drawer",
|
|
@@ -3351,10 +3680,10 @@ var Navbar = ({
|
|
|
3351
3680
|
role: "dialog",
|
|
3352
3681
|
"aria-label": "Navigation menu",
|
|
3353
3682
|
children: [
|
|
3354
|
-
/* @__PURE__ */ (0,
|
|
3683
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("nav", { className: "navbar__drawer-nav", children: [
|
|
3355
3684
|
navItems.map((item) => {
|
|
3356
3685
|
if (item.dropdown) {
|
|
3357
|
-
return /* @__PURE__ */ (0,
|
|
3686
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
3358
3687
|
DrawerAccordion,
|
|
3359
3688
|
{
|
|
3360
3689
|
item,
|
|
@@ -3366,7 +3695,7 @@ var Navbar = ({
|
|
|
3366
3695
|
item.label
|
|
3367
3696
|
);
|
|
3368
3697
|
}
|
|
3369
|
-
return /* @__PURE__ */ (0,
|
|
3698
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
3370
3699
|
"a",
|
|
3371
3700
|
{
|
|
3372
3701
|
href: item.href,
|
|
@@ -3375,30 +3704,30 @@ var Navbar = ({
|
|
|
3375
3704
|
rel: item.external ? "noopener noreferrer" : void 0,
|
|
3376
3705
|
children: [
|
|
3377
3706
|
item.label,
|
|
3378
|
-
item.external && /* @__PURE__ */ (0,
|
|
3707
|
+
item.external && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ArrowUpRightIcon, {})
|
|
3379
3708
|
]
|
|
3380
3709
|
},
|
|
3381
3710
|
item.label
|
|
3382
3711
|
);
|
|
3383
3712
|
}),
|
|
3384
|
-
languageLabel && !hasLangDropdown && /* @__PURE__ */ (0,
|
|
3385
|
-
/* @__PURE__ */ (0,
|
|
3713
|
+
languageLabel && !hasLangDropdown && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("button", { className: "navbar__drawer-lang", onClick: onLanguageClick, children: [
|
|
3714
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GlobeIcon, { className: "navbar__lang-globe" }),
|
|
3386
3715
|
languageLabel
|
|
3387
3716
|
] }),
|
|
3388
|
-
languageLabel && hasLangDropdown && /* @__PURE__ */ (0,
|
|
3717
|
+
languageLabel && hasLangDropdown && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
3389
3718
|
"button",
|
|
3390
3719
|
{
|
|
3391
3720
|
className: "navbar__drawer-lang",
|
|
3392
3721
|
onClick: () => setMobileLangOpen(true),
|
|
3393
3722
|
children: [
|
|
3394
|
-
/* @__PURE__ */ (0,
|
|
3723
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GlobeIcon, { className: "navbar__lang-globe" }),
|
|
3395
3724
|
languageLabel
|
|
3396
3725
|
]
|
|
3397
3726
|
}
|
|
3398
3727
|
)
|
|
3399
3728
|
] }),
|
|
3400
|
-
!mobileLangOpen && /* @__PURE__ */ (0,
|
|
3401
|
-
loginHref && /* @__PURE__ */ (0,
|
|
3729
|
+
!mobileLangOpen && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "navbar__drawer-footer", children: [
|
|
3730
|
+
loginHref && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("a", { href: loginHref, style: { display: "block" }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
3402
3731
|
Button,
|
|
3403
3732
|
{
|
|
3404
3733
|
colorScheme: "black",
|
|
@@ -3407,7 +3736,7 @@ var Navbar = ({
|
|
|
3407
3736
|
fullWidth: true
|
|
3408
3737
|
}
|
|
3409
3738
|
) }),
|
|
3410
|
-
ctaHref && /* @__PURE__ */ (0,
|
|
3739
|
+
ctaHref && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("a", { href: ctaHref, style: { display: "block" }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
3411
3740
|
Button,
|
|
3412
3741
|
{
|
|
3413
3742
|
colorScheme: "coral",
|
|
@@ -3417,7 +3746,7 @@ var Navbar = ({
|
|
|
3417
3746
|
}
|
|
3418
3747
|
) })
|
|
3419
3748
|
] }),
|
|
3420
|
-
/* @__PURE__ */ (0,
|
|
3749
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_framer_motion2.AnimatePresence, { children: hasLangDropdown && mobileLangOpen && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
3421
3750
|
import_framer_motion2.motion.div,
|
|
3422
3751
|
{
|
|
3423
3752
|
className: "navbar__drawer-lang-panel",
|
|
@@ -3426,16 +3755,16 @@ var Navbar = ({
|
|
|
3426
3755
|
exit: { y: "100%" },
|
|
3427
3756
|
transition: { duration: 0.25, ease: EASE_OUT_EXPO },
|
|
3428
3757
|
children: [
|
|
3429
|
-
/* @__PURE__ */ (0,
|
|
3758
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
3430
3759
|
"button",
|
|
3431
3760
|
{
|
|
3432
3761
|
className: "navbar__drawer-lang-back",
|
|
3433
3762
|
onClick: () => setMobileLangOpen(false),
|
|
3434
3763
|
"aria-label": "Back to menu",
|
|
3435
|
-
children: /* @__PURE__ */ (0,
|
|
3764
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ChevronLeftIcon, {})
|
|
3436
3765
|
}
|
|
3437
3766
|
),
|
|
3438
|
-
/* @__PURE__ */ (0,
|
|
3767
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "navbar__drawer-lang-grid", children: languageItems.map((lang) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
3439
3768
|
"button",
|
|
3440
3769
|
{
|
|
3441
3770
|
className: [
|
|
@@ -3459,7 +3788,7 @@ var Navbar = ({
|
|
|
3459
3788
|
};
|
|
3460
3789
|
|
|
3461
3790
|
// templates/DayNightTransition/DayNightTransition.tsx
|
|
3462
|
-
var
|
|
3791
|
+
var import_react17 = require("react");
|
|
3463
3792
|
var import_framer_motion3 = require("framer-motion");
|
|
3464
3793
|
|
|
3465
3794
|
// templates/DayNightTransition/webflowDayNightV2Ix.ts
|
|
@@ -3536,7 +3865,7 @@ function webflowV2DayClipPercent(t, media) {
|
|
|
3536
3865
|
}
|
|
3537
3866
|
|
|
3538
3867
|
// templates/DayNightTransition/DayNightTransition.tsx
|
|
3539
|
-
var
|
|
3868
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
3540
3869
|
var SPRING2 = { stiffness: 80, damping: 30, restDelta: 1e-3 };
|
|
3541
3870
|
var FADE_START = 0.35;
|
|
3542
3871
|
var FADE_END = 0.65;
|
|
@@ -3568,13 +3897,13 @@ var DayNightTransition = ({
|
|
|
3568
3897
|
className,
|
|
3569
3898
|
...props
|
|
3570
3899
|
}) => {
|
|
3571
|
-
const wrapperRef = (0,
|
|
3572
|
-
const dayWordRef = (0,
|
|
3573
|
-
const [nightMarginStart, setNightMarginStart] = (0,
|
|
3574
|
-
const [nightMarginEnd, setNightMarginEnd] = (0,
|
|
3575
|
-
const [ixMedia, setIxMedia] = (0,
|
|
3900
|
+
const wrapperRef = (0, import_react17.useRef)(null);
|
|
3901
|
+
const dayWordRef = (0, import_react17.useRef)(null);
|
|
3902
|
+
const [nightMarginStart, setNightMarginStart] = (0, import_react17.useState)("0px");
|
|
3903
|
+
const [nightMarginEnd, setNightMarginEnd] = (0, import_react17.useState)("0px");
|
|
3904
|
+
const [ixMedia, setIxMedia] = (0, import_react17.useState)("desktop");
|
|
3576
3905
|
const webflowV2 = scrollPreset === "webflow-day-night-v2";
|
|
3577
|
-
(0,
|
|
3906
|
+
(0, import_react17.useEffect)(() => {
|
|
3578
3907
|
const mq = window.matchMedia("(max-width: 991px)");
|
|
3579
3908
|
const sync = () => setIxMedia(mq.matches ? "mobile" : "desktop");
|
|
3580
3909
|
sync();
|
|
@@ -3582,7 +3911,7 @@ var DayNightTransition = ({
|
|
|
3582
3911
|
return () => mq.removeEventListener("change", sync);
|
|
3583
3912
|
}, []);
|
|
3584
3913
|
const MotionHeadline = headlineLevel === "h1" ? import_framer_motion3.motion.h1 : import_framer_motion3.motion.h2;
|
|
3585
|
-
(0,
|
|
3914
|
+
(0, import_react17.useLayoutEffect)(() => {
|
|
3586
3915
|
if (!inlineDayNightHeadline) return;
|
|
3587
3916
|
const syncNightPull = () => {
|
|
3588
3917
|
const dayEl = dayWordRef.current;
|
|
@@ -3673,15 +4002,15 @@ var DayNightTransition = ({
|
|
|
3673
4002
|
descriptionLevel === "body-lg" && "dnt--desc-body-lg",
|
|
3674
4003
|
className
|
|
3675
4004
|
].filter(Boolean).join(" ");
|
|
3676
|
-
return /* @__PURE__ */ (0,
|
|
4005
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
3677
4006
|
"div",
|
|
3678
4007
|
{
|
|
3679
4008
|
ref: wrapperRef,
|
|
3680
4009
|
className: rootClass,
|
|
3681
4010
|
...props,
|
|
3682
4011
|
children: [
|
|
3683
|
-
webflowV2 && /* @__PURE__ */ (0,
|
|
3684
|
-
/* @__PURE__ */ (0,
|
|
4012
|
+
webflowV2 && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "dnt__v2-background-wrapper", "aria-hidden": "true", children: [
|
|
4013
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
3685
4014
|
import_framer_motion3.motion.div,
|
|
3686
4015
|
{
|
|
3687
4016
|
className: "dnt__v2-bg-day trade-day-night_background-day is-alternative",
|
|
@@ -3691,7 +4020,7 @@ var DayNightTransition = ({
|
|
|
3691
4020
|
}
|
|
3692
4021
|
}
|
|
3693
4022
|
),
|
|
3694
|
-
/* @__PURE__ */ (0,
|
|
4023
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
3695
4024
|
"div",
|
|
3696
4025
|
{
|
|
3697
4026
|
className: "dnt__v2-bg-night trade-day-night_background-night is-alternative",
|
|
@@ -3699,9 +4028,9 @@ var DayNightTransition = ({
|
|
|
3699
4028
|
}
|
|
3700
4029
|
)
|
|
3701
4030
|
] }),
|
|
3702
|
-
/* @__PURE__ */ (0,
|
|
3703
|
-
!webflowV2 && /* @__PURE__ */ (0,
|
|
3704
|
-
/* @__PURE__ */ (0,
|
|
4031
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: webflowV2 ? "dnt__sticky dnt__sticky--webflow-v2" : "dnt__sticky", children: [
|
|
4032
|
+
!webflowV2 && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
|
|
4033
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
3705
4034
|
"img",
|
|
3706
4035
|
{
|
|
3707
4036
|
className: "dnt__bg dnt__bg--day",
|
|
@@ -3711,7 +4040,7 @@ var DayNightTransition = ({
|
|
|
3711
4040
|
draggable: false
|
|
3712
4041
|
}
|
|
3713
4042
|
),
|
|
3714
|
-
/* @__PURE__ */ (0,
|
|
4043
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
3715
4044
|
import_framer_motion3.motion.img,
|
|
3716
4045
|
{
|
|
3717
4046
|
className: "dnt__bg dnt__bg--night",
|
|
@@ -3723,17 +4052,17 @@ var DayNightTransition = ({
|
|
|
3723
4052
|
}
|
|
3724
4053
|
)
|
|
3725
4054
|
] }),
|
|
3726
|
-
/* @__PURE__ */ (0,
|
|
3727
|
-
useInlineHeadline && inlineDayNightHeadline ? /* @__PURE__ */ (0,
|
|
4055
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "dnt__content", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "dnt__inner", children: webflowV2 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "dnt__text-wrap", children: [
|
|
4056
|
+
useInlineHeadline && inlineDayNightHeadline ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
3728
4057
|
MotionHeadline,
|
|
3729
4058
|
{
|
|
3730
4059
|
className: "dnt__headline dnt__headline--inline-day-night",
|
|
3731
4060
|
style: { color: v2TitleColor },
|
|
3732
4061
|
"aria-label": `${inlineDayNightHeadline.prefix}${inlineDayNightHeadline.dayWord} / ${inlineDayNightHeadline.prefix}${inlineDayNightHeadline.nightWord}`,
|
|
3733
4062
|
children: [
|
|
3734
|
-
/* @__PURE__ */ (0,
|
|
3735
|
-
/* @__PURE__ */ (0,
|
|
3736
|
-
/* @__PURE__ */ (0,
|
|
4063
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "dnt__headline-prefix", children: inlineDayNightHeadline.prefix }),
|
|
4064
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "dnt__headline-pair", children: [
|
|
4065
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
3737
4066
|
import_framer_motion3.motion.span,
|
|
3738
4067
|
{
|
|
3739
4068
|
ref: dayWordRef,
|
|
@@ -3742,7 +4071,7 @@ var DayNightTransition = ({
|
|
|
3742
4071
|
children: inlineDayNightHeadline.dayWord
|
|
3743
4072
|
}
|
|
3744
4073
|
),
|
|
3745
|
-
/* @__PURE__ */ (0,
|
|
4074
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
3746
4075
|
import_framer_motion3.motion.span,
|
|
3747
4076
|
{
|
|
3748
4077
|
className: "dnt__headline-wnight",
|
|
@@ -3757,8 +4086,8 @@ var DayNightTransition = ({
|
|
|
3757
4086
|
] })
|
|
3758
4087
|
]
|
|
3759
4088
|
}
|
|
3760
|
-
) : /* @__PURE__ */ (0,
|
|
3761
|
-
/* @__PURE__ */ (0,
|
|
4089
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
|
|
4090
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
3762
4091
|
MotionHeadline,
|
|
3763
4092
|
{
|
|
3764
4093
|
className: "dnt__headline",
|
|
@@ -3766,7 +4095,7 @@ var DayNightTransition = ({
|
|
|
3766
4095
|
children: dayHeadline
|
|
3767
4096
|
}
|
|
3768
4097
|
),
|
|
3769
|
-
/* @__PURE__ */ (0,
|
|
4098
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
3770
4099
|
MotionHeadline,
|
|
3771
4100
|
{
|
|
3772
4101
|
className: "dnt__headline",
|
|
@@ -3776,8 +4105,8 @@ var DayNightTransition = ({
|
|
|
3776
4105
|
}
|
|
3777
4106
|
)
|
|
3778
4107
|
] }),
|
|
3779
|
-
hasDescription && /* @__PURE__ */ (0,
|
|
3780
|
-
/* @__PURE__ */ (0,
|
|
4108
|
+
hasDescription && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
|
|
4109
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
3781
4110
|
import_framer_motion3.motion.p,
|
|
3782
4111
|
{
|
|
3783
4112
|
className: "dnt__description",
|
|
@@ -3788,7 +4117,7 @@ var DayNightTransition = ({
|
|
|
3788
4117
|
children: dayDescription ?? ""
|
|
3789
4118
|
}
|
|
3790
4119
|
),
|
|
3791
|
-
/* @__PURE__ */ (0,
|
|
4120
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
3792
4121
|
import_framer_motion3.motion.p,
|
|
3793
4122
|
{
|
|
3794
4123
|
className: "dnt__description",
|
|
@@ -3801,22 +4130,22 @@ var DayNightTransition = ({
|
|
|
3801
4130
|
}
|
|
3802
4131
|
)
|
|
3803
4132
|
] }),
|
|
3804
|
-
!hideCta && /* @__PURE__ */ (0,
|
|
3805
|
-
] }) : /* @__PURE__ */ (0,
|
|
4133
|
+
!hideCta && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("a", { href: ctaHref, className: "dnt__btn", children: ctaLabel })
|
|
4134
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
3806
4135
|
import_framer_motion3.motion.div,
|
|
3807
4136
|
{
|
|
3808
4137
|
className: "dnt__text-wrap",
|
|
3809
4138
|
style: { color: textColor },
|
|
3810
4139
|
children: [
|
|
3811
|
-
useInlineHeadline && inlineDayNightHeadline ? /* @__PURE__ */ (0,
|
|
4140
|
+
useInlineHeadline && inlineDayNightHeadline ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
3812
4141
|
MotionHeadline,
|
|
3813
4142
|
{
|
|
3814
4143
|
className: "dnt__headline dnt__headline--inline-day-night",
|
|
3815
4144
|
"aria-label": `${inlineDayNightHeadline.prefix}${inlineDayNightHeadline.dayWord} / ${inlineDayNightHeadline.prefix}${inlineDayNightHeadline.nightWord}`,
|
|
3816
4145
|
children: [
|
|
3817
|
-
/* @__PURE__ */ (0,
|
|
3818
|
-
/* @__PURE__ */ (0,
|
|
3819
|
-
/* @__PURE__ */ (0,
|
|
4146
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "dnt__headline-prefix", children: inlineDayNightHeadline.prefix }),
|
|
4147
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "dnt__headline-pair", children: [
|
|
4148
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
3820
4149
|
import_framer_motion3.motion.span,
|
|
3821
4150
|
{
|
|
3822
4151
|
ref: dayWordRef,
|
|
@@ -3825,7 +4154,7 @@ var DayNightTransition = ({
|
|
|
3825
4154
|
children: inlineDayNightHeadline.dayWord
|
|
3826
4155
|
}
|
|
3827
4156
|
),
|
|
3828
|
-
/* @__PURE__ */ (0,
|
|
4157
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
3829
4158
|
import_framer_motion3.motion.span,
|
|
3830
4159
|
{
|
|
3831
4160
|
className: "dnt__headline-wnight",
|
|
@@ -3840,8 +4169,8 @@ var DayNightTransition = ({
|
|
|
3840
4169
|
] })
|
|
3841
4170
|
]
|
|
3842
4171
|
}
|
|
3843
|
-
) : /* @__PURE__ */ (0,
|
|
3844
|
-
/* @__PURE__ */ (0,
|
|
4172
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
|
|
4173
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
3845
4174
|
MotionHeadline,
|
|
3846
4175
|
{
|
|
3847
4176
|
className: "dnt__headline",
|
|
@@ -3849,7 +4178,7 @@ var DayNightTransition = ({
|
|
|
3849
4178
|
children: dayHeadline
|
|
3850
4179
|
}
|
|
3851
4180
|
),
|
|
3852
|
-
/* @__PURE__ */ (0,
|
|
4181
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
3853
4182
|
MotionHeadline,
|
|
3854
4183
|
{
|
|
3855
4184
|
className: "dnt__headline",
|
|
@@ -3859,8 +4188,8 @@ var DayNightTransition = ({
|
|
|
3859
4188
|
}
|
|
3860
4189
|
)
|
|
3861
4190
|
] }),
|
|
3862
|
-
hasDescription && /* @__PURE__ */ (0,
|
|
3863
|
-
/* @__PURE__ */ (0,
|
|
4191
|
+
hasDescription && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
|
|
4192
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
3864
4193
|
import_framer_motion3.motion.p,
|
|
3865
4194
|
{
|
|
3866
4195
|
className: "dnt__description",
|
|
@@ -3868,7 +4197,7 @@ var DayNightTransition = ({
|
|
|
3868
4197
|
children: dayDescription ?? ""
|
|
3869
4198
|
}
|
|
3870
4199
|
),
|
|
3871
|
-
/* @__PURE__ */ (0,
|
|
4200
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
3872
4201
|
import_framer_motion3.motion.p,
|
|
3873
4202
|
{
|
|
3874
4203
|
className: "dnt__description",
|
|
@@ -3878,7 +4207,7 @@ var DayNightTransition = ({
|
|
|
3878
4207
|
}
|
|
3879
4208
|
)
|
|
3880
4209
|
] }),
|
|
3881
|
-
!hideCta && /* @__PURE__ */ (0,
|
|
4210
|
+
!hideCta && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("a", { href: ctaHref, className: "dnt__btn", children: ctaLabel })
|
|
3882
4211
|
]
|
|
3883
4212
|
}
|
|
3884
4213
|
) }) })
|
|
@@ -3903,9 +4232,9 @@ var dayNightTransitionV2Preset = {
|
|
|
3903
4232
|
};
|
|
3904
4233
|
|
|
3905
4234
|
// templates/LogoMarquee/LogoMarquee.tsx
|
|
3906
|
-
var
|
|
4235
|
+
var import_react18 = require("react");
|
|
3907
4236
|
var import_framer_motion4 = require("framer-motion");
|
|
3908
|
-
var
|
|
4237
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
3909
4238
|
function modWrap(min, max, v) {
|
|
3910
4239
|
const range = max - min;
|
|
3911
4240
|
return ((v - min) % range + range) % range + min;
|
|
@@ -3962,8 +4291,8 @@ var LogoMarquee = ({
|
|
|
3962
4291
|
const scrollVelocity = (0, import_framer_motion4.useVelocity)(scrollY);
|
|
3963
4292
|
const col1Y = (0, import_framer_motion4.useMotionValue)(0);
|
|
3964
4293
|
const col2Y = (0, import_framer_motion4.useMotionValue)(0);
|
|
3965
|
-
const col1Ref = (0,
|
|
3966
|
-
const col2Ref = (0,
|
|
4294
|
+
const col1Ref = (0, import_react18.useRef)(null);
|
|
4295
|
+
const col2Ref = (0, import_react18.useRef)(null);
|
|
3967
4296
|
(0, import_framer_motion4.useAnimationFrame)((_, delta) => {
|
|
3968
4297
|
const raw = scrollVelocity.get();
|
|
3969
4298
|
if (Math.abs(raw) < DEADZONE) return;
|
|
@@ -3976,21 +4305,21 @@ var LogoMarquee = ({
|
|
|
3976
4305
|
});
|
|
3977
4306
|
const track1 = [...col1Logos, ...col1Logos];
|
|
3978
4307
|
const track2 = [...col2Logos, ...col2Logos];
|
|
3979
|
-
return /* @__PURE__ */ (0,
|
|
4308
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3980
4309
|
"section",
|
|
3981
4310
|
{
|
|
3982
4311
|
className: ["lm", className].filter(Boolean).join(" "),
|
|
3983
4312
|
...props,
|
|
3984
|
-
children: /* @__PURE__ */ (0,
|
|
3985
|
-
/* @__PURE__ */ (0,
|
|
3986
|
-
/* @__PURE__ */ (0,
|
|
3987
|
-
/* @__PURE__ */ (0,
|
|
4313
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "lm__inner", children: [
|
|
4314
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "lm__media", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "lm__carousel", children: [
|
|
4315
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "lm__fade lm__fade--top", "aria-hidden": "true" }),
|
|
4316
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3988
4317
|
import_framer_motion4.motion.div,
|
|
3989
4318
|
{
|
|
3990
4319
|
ref: col1Ref,
|
|
3991
4320
|
className: "lm__col",
|
|
3992
4321
|
style: { y: col1Y },
|
|
3993
|
-
children: track1.map((logo, i) => /* @__PURE__ */ (0,
|
|
4322
|
+
children: track1.map((logo, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "lm__card", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "lm__card-img-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3994
4323
|
"img",
|
|
3995
4324
|
{
|
|
3996
4325
|
src: logo.url,
|
|
@@ -4001,13 +4330,13 @@ var LogoMarquee = ({
|
|
|
4001
4330
|
) }) }, `c1-${i}`))
|
|
4002
4331
|
}
|
|
4003
4332
|
),
|
|
4004
|
-
/* @__PURE__ */ (0,
|
|
4333
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
4005
4334
|
import_framer_motion4.motion.div,
|
|
4006
4335
|
{
|
|
4007
4336
|
ref: col2Ref,
|
|
4008
4337
|
className: "lm__col",
|
|
4009
4338
|
style: { y: col2Y },
|
|
4010
|
-
children: track2.map((logo, i) => /* @__PURE__ */ (0,
|
|
4339
|
+
children: track2.map((logo, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "lm__card", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "lm__card-img-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
4011
4340
|
"img",
|
|
4012
4341
|
{
|
|
4013
4342
|
src: logo.url,
|
|
@@ -4018,17 +4347,17 @@ var LogoMarquee = ({
|
|
|
4018
4347
|
) }) }, `c2-${i}`))
|
|
4019
4348
|
}
|
|
4020
4349
|
),
|
|
4021
|
-
/* @__PURE__ */ (0,
|
|
4350
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "lm__fade lm__fade--bottom", "aria-hidden": "true" })
|
|
4022
4351
|
] }) }),
|
|
4023
|
-
/* @__PURE__ */ (0,
|
|
4024
|
-
/* @__PURE__ */ (0,
|
|
4025
|
-
/* @__PURE__ */ (0,
|
|
4026
|
-
/* @__PURE__ */ (0,
|
|
4027
|
-
/* @__PURE__ */ (0,
|
|
4352
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "lm__content", children: [
|
|
4353
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h2", { className: "lm__headline", children: headline }),
|
|
4354
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "lm__text-group", children: [
|
|
4355
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "lm__body", children: body }),
|
|
4356
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "lm__disclaimer", children: disclaimer })
|
|
4028
4357
|
] }),
|
|
4029
|
-
/* @__PURE__ */ (0,
|
|
4358
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("a", { href: ctaHref, className: "lm__link", children: [
|
|
4030
4359
|
ctaLabel,
|
|
4031
|
-
/* @__PURE__ */ (0,
|
|
4360
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "lm__link-icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime32.jsx)("path", { d: "M3 8H13M13 8L9 4M13 8L9 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
|
|
4032
4361
|
] })
|
|
4033
4362
|
] })
|
|
4034
4363
|
] })
|
|
@@ -4079,7 +4408,7 @@ var appstore_linux_dark_default = "./appstore-linux-dark-RVH7CBM4.svg";
|
|
|
4079
4408
|
var appstore_browser_dark_default = "./appstore-browser-dark-2E6TK6JH.svg";
|
|
4080
4409
|
|
|
4081
4410
|
// primitives/DownloadBadge/DownloadBadge.tsx
|
|
4082
|
-
var
|
|
4411
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
4083
4412
|
var BADGE_ASSETS = {
|
|
4084
4413
|
light: {
|
|
4085
4414
|
googleplay: { src: appstore_googleplay_light_default, alt: "Get it on Google Play" },
|
|
@@ -4108,7 +4437,7 @@ var DownloadBadge = ({
|
|
|
4108
4437
|
...props
|
|
4109
4438
|
}) => {
|
|
4110
4439
|
const { src, alt } = BADGE_ASSETS[colorScheme][platform];
|
|
4111
|
-
return /* @__PURE__ */ (0,
|
|
4440
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
4112
4441
|
"a",
|
|
4113
4442
|
{
|
|
4114
4443
|
className: [
|
|
@@ -4121,13 +4450,13 @@ var DownloadBadge = ({
|
|
|
4121
4450
|
target: "_blank",
|
|
4122
4451
|
rel: "noopener noreferrer",
|
|
4123
4452
|
...props,
|
|
4124
|
-
children: /* @__PURE__ */ (0,
|
|
4453
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("img", { className: "download-badge__img", src, alt })
|
|
4125
4454
|
}
|
|
4126
4455
|
);
|
|
4127
4456
|
};
|
|
4128
4457
|
|
|
4129
4458
|
// templates/Steps/Steps.tsx
|
|
4130
|
-
var
|
|
4459
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
4131
4460
|
var Steps = ({
|
|
4132
4461
|
title,
|
|
4133
4462
|
steps,
|
|
@@ -4139,8 +4468,8 @@ var Steps = ({
|
|
|
4139
4468
|
"steps__container",
|
|
4140
4469
|
imagePosition === "right" ? "steps__container--image-right" : ""
|
|
4141
4470
|
].filter(Boolean).join(" ");
|
|
4142
|
-
return /* @__PURE__ */ (0,
|
|
4143
|
-
image && /* @__PURE__ */ (0,
|
|
4471
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("section", { className: "steps", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: containerClass, children: [
|
|
4472
|
+
image && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "steps__image-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
4144
4473
|
"img",
|
|
4145
4474
|
{
|
|
4146
4475
|
src: image,
|
|
@@ -4148,13 +4477,13 @@ var Steps = ({
|
|
|
4148
4477
|
className: "steps__image"
|
|
4149
4478
|
}
|
|
4150
4479
|
) }),
|
|
4151
|
-
/* @__PURE__ */ (0,
|
|
4152
|
-
/* @__PURE__ */ (0,
|
|
4153
|
-
/* @__PURE__ */ (0,
|
|
4154
|
-
/* @__PURE__ */ (0,
|
|
4155
|
-
/* @__PURE__ */ (0,
|
|
4156
|
-
/* @__PURE__ */ (0,
|
|
4157
|
-
/* @__PURE__ */ (0,
|
|
4480
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "steps__content", children: [
|
|
4481
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h2", { className: "steps__title", children: title }),
|
|
4482
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ol", { className: "steps__list", children: steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("li", { className: "steps__item", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "steps__item-inner", children: [
|
|
4483
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "steps__number", "aria-hidden": "true", children: index + 1 }),
|
|
4484
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "steps__item-body", children: [
|
|
4485
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "steps__item-title", children: step.title }),
|
|
4486
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "steps__item-description", children: step.description })
|
|
4158
4487
|
] })
|
|
4159
4488
|
] }) }, index)) })
|
|
4160
4489
|
] })
|
|
@@ -4162,7 +4491,7 @@ var Steps = ({
|
|
|
4162
4491
|
};
|
|
4163
4492
|
|
|
4164
4493
|
// templates/DownloadBanner/DownloadBanner.tsx
|
|
4165
|
-
var
|
|
4494
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
4166
4495
|
var DownloadBanner = ({
|
|
4167
4496
|
style = "light-2",
|
|
4168
4497
|
qrCodeImage,
|
|
@@ -4187,9 +4516,9 @@ var DownloadBanner = ({
|
|
|
4187
4516
|
disclaimer
|
|
4188
4517
|
}) => {
|
|
4189
4518
|
const colorScheme = style === "dark" ? "dark" : "light";
|
|
4190
|
-
return /* @__PURE__ */ (0,
|
|
4191
|
-
/* @__PURE__ */ (0,
|
|
4192
|
-
qrCodeImage && /* @__PURE__ */ (0,
|
|
4519
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("section", { className: `db-section db-section--${style}`, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "db-container", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "db-card", children: [
|
|
4520
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "db-qr-block", children: [
|
|
4521
|
+
qrCodeImage && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
4193
4522
|
"img",
|
|
4194
4523
|
{
|
|
4195
4524
|
className: "db-qr-image",
|
|
@@ -4197,36 +4526,36 @@ var DownloadBanner = ({
|
|
|
4197
4526
|
alt: qrCodeAlt
|
|
4198
4527
|
}
|
|
4199
4528
|
),
|
|
4200
|
-
/* @__PURE__ */ (0,
|
|
4201
|
-
/* @__PURE__ */ (0,
|
|
4202
|
-
/* @__PURE__ */ (0,
|
|
4203
|
-
/* @__PURE__ */ (0,
|
|
4204
|
-
disclaimer && /* @__PURE__ */ (0,
|
|
4529
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "db-qr-text", children: [
|
|
4530
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "db-qr-text__title db-qr-text__title--desktop", children: qrTitle }),
|
|
4531
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h2", { className: "db-qr-text__subtitle db-qr-text__subtitle--desktop", children: qrSubtitle }),
|
|
4532
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "db-qr-text__title db-qr-text__title--mobile", children: mobileTitle }),
|
|
4533
|
+
disclaimer && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "db-disclaimer", children: disclaimer })
|
|
4205
4534
|
] })
|
|
4206
4535
|
] }),
|
|
4207
|
-
/* @__PURE__ */ (0,
|
|
4208
|
-
showGooglePlay && /* @__PURE__ */ (0,
|
|
4209
|
-
showAppGallery && /* @__PURE__ */ (0,
|
|
4210
|
-
showMacOS && /* @__PURE__ */ (0,
|
|
4211
|
-
showWindows && /* @__PURE__ */ (0,
|
|
4212
|
-
showLinux && /* @__PURE__ */ (0,
|
|
4213
|
-
showAppStore && /* @__PURE__ */ (0,
|
|
4214
|
-
showWeb && /* @__PURE__ */ (0,
|
|
4536
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "db-badges", children: [
|
|
4537
|
+
showGooglePlay && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DownloadBadge, { platform: "googleplay", colorScheme, href: googlePlayHref }),
|
|
4538
|
+
showAppGallery && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DownloadBadge, { platform: "appgallery", colorScheme, href: appGalleryHref }),
|
|
4539
|
+
showMacOS && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DownloadBadge, { platform: "macos", colorScheme, href: macOSHref }),
|
|
4540
|
+
showWindows && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DownloadBadge, { platform: "windows", colorScheme, href: windowsHref }),
|
|
4541
|
+
showLinux && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DownloadBadge, { platform: "linux", colorScheme, href: linuxHref }),
|
|
4542
|
+
showAppStore && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DownloadBadge, { platform: "appstore", colorScheme, href: appStoreHref }),
|
|
4543
|
+
showWeb && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DownloadBadge, { platform: "web", colorScheme, href: webHref })
|
|
4215
4544
|
] })
|
|
4216
4545
|
] }) }) });
|
|
4217
4546
|
};
|
|
4218
4547
|
|
|
4219
4548
|
// templates/TextScroll/TextScroll.tsx
|
|
4220
|
-
var
|
|
4549
|
+
var import_react19 = require("react");
|
|
4221
4550
|
var import_gsap = require("gsap");
|
|
4222
4551
|
var import_ScrollTrigger = require("gsap/ScrollTrigger");
|
|
4223
|
-
var
|
|
4552
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
4224
4553
|
import_gsap.gsap.registerPlugin(import_ScrollTrigger.ScrollTrigger);
|
|
4225
4554
|
var TextScroll = ({ text, className }) => {
|
|
4226
|
-
const sectionRef = (0,
|
|
4227
|
-
const wordsRef = (0,
|
|
4555
|
+
const sectionRef = (0, import_react19.useRef)(null);
|
|
4556
|
+
const wordsRef = (0, import_react19.useRef)([]);
|
|
4228
4557
|
const words = text.split(/\s+/).filter(Boolean);
|
|
4229
|
-
(0,
|
|
4558
|
+
(0, import_react19.useEffect)(() => {
|
|
4230
4559
|
const section = sectionRef.current;
|
|
4231
4560
|
const wordEls = wordsRef.current.filter(Boolean);
|
|
4232
4561
|
if (!section || wordEls.length === 0) return;
|
|
@@ -4260,12 +4589,12 @@ var TextScroll = ({ text, className }) => {
|
|
|
4260
4589
|
import_gsap.gsap.set(wordEls, { clearProps: "opacity" });
|
|
4261
4590
|
};
|
|
4262
4591
|
}, [text]);
|
|
4263
|
-
return /* @__PURE__ */ (0,
|
|
4592
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
4264
4593
|
"section",
|
|
4265
4594
|
{
|
|
4266
4595
|
ref: sectionRef,
|
|
4267
4596
|
className: ["ts", className].filter(Boolean).join(" "),
|
|
4268
|
-
children: /* @__PURE__ */ (0,
|
|
4597
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "ts__inner", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "ts__text", "aria-label": text, children: words.map((word, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
4269
4598
|
"span",
|
|
4270
4599
|
{
|
|
4271
4600
|
ref: (el) => {
|
|
@@ -4285,8 +4614,8 @@ var TextScroll = ({ text, className }) => {
|
|
|
4285
4614
|
};
|
|
4286
4615
|
|
|
4287
4616
|
// templates/StickyMarketCards/StickyMarketCards.tsx
|
|
4288
|
-
var
|
|
4289
|
-
var
|
|
4617
|
+
var import_react20 = require("react");
|
|
4618
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
4290
4619
|
var PLACEHOLDER_IMAGE3 = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/69b9309379ac08e59ca8210a_1f3f555da9a5cbb13a6fe1bf0d5fe1b6_placeholder-image.webp";
|
|
4291
4620
|
var StickyMarketCards = ({
|
|
4292
4621
|
sectionTitle,
|
|
@@ -4295,9 +4624,9 @@ var StickyMarketCards = ({
|
|
|
4295
4624
|
className,
|
|
4296
4625
|
...props
|
|
4297
4626
|
}) => {
|
|
4298
|
-
const cardRefs = (0,
|
|
4299
|
-
const cardInnerRefs = (0,
|
|
4300
|
-
(0,
|
|
4627
|
+
const cardRefs = (0, import_react20.useRef)([]);
|
|
4628
|
+
const cardInnerRefs = (0, import_react20.useRef)([]);
|
|
4629
|
+
(0, import_react20.useEffect)(() => {
|
|
4301
4630
|
if (typeof window === "undefined") return;
|
|
4302
4631
|
let rafId = 0;
|
|
4303
4632
|
const update = () => {
|
|
@@ -4338,7 +4667,7 @@ var StickyMarketCards = ({
|
|
|
4338
4667
|
cancelAnimationFrame(rafId);
|
|
4339
4668
|
};
|
|
4340
4669
|
}, [items.length]);
|
|
4341
|
-
(0,
|
|
4670
|
+
(0, import_react20.useEffect)(() => {
|
|
4342
4671
|
if (typeof window === "undefined") return;
|
|
4343
4672
|
const syncHeights = () => {
|
|
4344
4673
|
const inners = cardInnerRefs.current.filter(Boolean);
|
|
@@ -4367,20 +4696,20 @@ var StickyMarketCards = ({
|
|
|
4367
4696
|
const n = items.length;
|
|
4368
4697
|
const maxStack = 4;
|
|
4369
4698
|
const baseIndex = Math.max(0, n - maxStack);
|
|
4370
|
-
return /* @__PURE__ */ (0,
|
|
4699
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
4371
4700
|
"section",
|
|
4372
4701
|
{
|
|
4373
4702
|
className: ["smc", className].filter(Boolean).join(" "),
|
|
4374
4703
|
...props,
|
|
4375
|
-
children: /* @__PURE__ */ (0,
|
|
4376
|
-
/* @__PURE__ */ (0,
|
|
4377
|
-
/* @__PURE__ */ (0,
|
|
4378
|
-
sectionDescription && /* @__PURE__ */ (0,
|
|
4704
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "smc__inner", children: [
|
|
4705
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "smc__header-wrap", children: [
|
|
4706
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h2", { className: "smc__header", children: sectionTitle }),
|
|
4707
|
+
sectionDescription && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "smc__description", children: sectionDescription })
|
|
4379
4708
|
] }),
|
|
4380
|
-
/* @__PURE__ */ (0,
|
|
4709
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "smc__track", children: items.map((item, i) => {
|
|
4381
4710
|
const theme = item.theme ?? "dark";
|
|
4382
4711
|
const offsetMultiplier = Math.max(0, i - baseIndex);
|
|
4383
|
-
return /* @__PURE__ */ (0,
|
|
4712
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
4384
4713
|
"div",
|
|
4385
4714
|
{
|
|
4386
4715
|
ref: (el) => {
|
|
@@ -4391,7 +4720,7 @@ var StickyMarketCards = ({
|
|
|
4391
4720
|
["--smc-card-index"]: String(offsetMultiplier),
|
|
4392
4721
|
zIndex: i + 1
|
|
4393
4722
|
},
|
|
4394
|
-
children: /* @__PURE__ */ (0,
|
|
4723
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
4395
4724
|
"div",
|
|
4396
4725
|
{
|
|
4397
4726
|
ref: (el) => {
|
|
@@ -4402,8 +4731,8 @@ var StickyMarketCards = ({
|
|
|
4402
4731
|
`smc__card-inner--${theme}`
|
|
4403
4732
|
].join(" "),
|
|
4404
4733
|
children: [
|
|
4405
|
-
/* @__PURE__ */ (0,
|
|
4406
|
-
/* @__PURE__ */ (0,
|
|
4734
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "smc__card-bg", children: [
|
|
4735
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
4407
4736
|
"img",
|
|
4408
4737
|
{
|
|
4409
4738
|
src: item.imageUrl ?? PLACEHOLDER_IMAGE3,
|
|
@@ -4412,7 +4741,7 @@ var StickyMarketCards = ({
|
|
|
4412
4741
|
loading: i === 0 ? "eager" : "lazy"
|
|
4413
4742
|
}
|
|
4414
4743
|
),
|
|
4415
|
-
/* @__PURE__ */ (0,
|
|
4744
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
4416
4745
|
"div",
|
|
4417
4746
|
{
|
|
4418
4747
|
className: [
|
|
@@ -4422,9 +4751,9 @@ var StickyMarketCards = ({
|
|
|
4422
4751
|
}
|
|
4423
4752
|
)
|
|
4424
4753
|
] }),
|
|
4425
|
-
/* @__PURE__ */ (0,
|
|
4426
|
-
/* @__PURE__ */ (0,
|
|
4427
|
-
/* @__PURE__ */ (0,
|
|
4754
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "smc__card-content", children: [
|
|
4755
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "smc__card-title-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", { className: "smc__card-title", children: item.title }) }),
|
|
4756
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "smc__card-desc-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "smc__card-desc", children: item.description }) })
|
|
4428
4757
|
] })
|
|
4429
4758
|
]
|
|
4430
4759
|
}
|
|
@@ -4439,12 +4768,12 @@ var StickyMarketCards = ({
|
|
|
4439
4768
|
};
|
|
4440
4769
|
|
|
4441
4770
|
// templates/Table/Table.tsx
|
|
4442
|
-
var
|
|
4443
|
-
var
|
|
4444
|
-
var InfoIcon = ({ className }) => /* @__PURE__ */ (0,
|
|
4445
|
-
/* @__PURE__ */ (0,
|
|
4446
|
-
/* @__PURE__ */ (0,
|
|
4447
|
-
/* @__PURE__ */ (0,
|
|
4771
|
+
var import_react21 = require("react");
|
|
4772
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
4773
|
+
var InfoIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", className, children: [
|
|
4774
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "1.5" }),
|
|
4775
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M12 16V12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
|
|
4776
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("circle", { cx: "12", cy: "8", r: "1", fill: "currentColor", stroke: "currentColor", strokeWidth: "1" })
|
|
4448
4777
|
] });
|
|
4449
4778
|
var Table = ({
|
|
4450
4779
|
sectionTitle,
|
|
@@ -4457,11 +4786,11 @@ var Table = ({
|
|
|
4457
4786
|
className,
|
|
4458
4787
|
...props
|
|
4459
4788
|
}) => {
|
|
4460
|
-
const [search, setSearch] = (0,
|
|
4461
|
-
const [page, setPage] = (0,
|
|
4462
|
-
const [tooltip, setTooltip] = (0,
|
|
4789
|
+
const [search, setSearch] = (0, import_react21.useState)("");
|
|
4790
|
+
const [page, setPage] = (0, import_react21.useState)(1);
|
|
4791
|
+
const [tooltip, setTooltip] = (0, import_react21.useState)({ visible: false, heading: "", description: "", x: 0, y: 0, arrowOffset: 0 });
|
|
4463
4792
|
const mainKey = mainColumnKey ?? columns.find((c) => c.width === "main")?.key ?? columns[0]?.key;
|
|
4464
|
-
const filtered = (0,
|
|
4793
|
+
const filtered = (0, import_react21.useMemo)(() => {
|
|
4465
4794
|
const q = search.trim().toLowerCase();
|
|
4466
4795
|
if (!q) return rows;
|
|
4467
4796
|
return rows.filter(
|
|
@@ -4481,12 +4810,12 @@ var Table = ({
|
|
|
4481
4810
|
setSearch("");
|
|
4482
4811
|
setPage(1);
|
|
4483
4812
|
};
|
|
4484
|
-
return /* @__PURE__ */ (0,
|
|
4485
|
-
sectionTitle && /* @__PURE__ */ (0,
|
|
4486
|
-
/* @__PURE__ */ (0,
|
|
4487
|
-
/* @__PURE__ */ (0,
|
|
4488
|
-
/* @__PURE__ */ (0,
|
|
4489
|
-
/* @__PURE__ */ (0,
|
|
4813
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("section", { className: ["tbl-section", className].filter(Boolean).join(" "), ...props, children: [
|
|
4814
|
+
sectionTitle && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "tbl-section__header", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h2", { className: "tbl-section__title", children: sectionTitle }) }),
|
|
4815
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "tbl-section__content", children: [
|
|
4816
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "tbl", children: [
|
|
4817
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "tbl__topbar", children: [
|
|
4818
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "tbl__search-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
4490
4819
|
SearchField,
|
|
4491
4820
|
{
|
|
4492
4821
|
placeholder: searchPlaceholder,
|
|
@@ -4497,7 +4826,7 @@ var Table = ({
|
|
|
4497
4826
|
"aria-label": searchPlaceholder
|
|
4498
4827
|
}
|
|
4499
4828
|
) }),
|
|
4500
|
-
/* @__PURE__ */ (0,
|
|
4829
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "tbl__summary", children: filtered.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
|
|
4501
4830
|
"Showing ",
|
|
4502
4831
|
startIdx + 1,
|
|
4503
4832
|
"- ",
|
|
@@ -4506,12 +4835,12 @@ var Table = ({
|
|
|
4506
4835
|
filtered.length
|
|
4507
4836
|
] }) : "No results" })
|
|
4508
4837
|
] }),
|
|
4509
|
-
/* @__PURE__ */ (0,
|
|
4510
|
-
/* @__PURE__ */ (0,
|
|
4838
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "tbl__scroll-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("table", { className: "tbl__table", children: [
|
|
4839
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("tr", { className: "tbl__tr", children: columns.map((col, colIdx) => {
|
|
4511
4840
|
const isFirst = colIdx === 0;
|
|
4512
4841
|
const isLast = colIdx === columns.length - 1;
|
|
4513
4842
|
const isMain = col.width === "main" || col.key === mainKey;
|
|
4514
|
-
return /* @__PURE__ */ (0,
|
|
4843
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
4515
4844
|
"th",
|
|
4516
4845
|
{
|
|
4517
4846
|
className: [
|
|
@@ -4519,7 +4848,7 @@ var Table = ({
|
|
|
4519
4848
|
isMain ? "tbl__th--main" : "",
|
|
4520
4849
|
col.width === "big" ? "tbl__th--big" : ""
|
|
4521
4850
|
].filter(Boolean).join(" "),
|
|
4522
|
-
children: /* @__PURE__ */ (0,
|
|
4851
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
4523
4852
|
"div",
|
|
4524
4853
|
{
|
|
4525
4854
|
className: "tbl__th-inner",
|
|
@@ -4549,9 +4878,9 @@ var Table = ({
|
|
|
4549
4878
|
setTooltip((prev) => ({ ...prev, visible: false }));
|
|
4550
4879
|
}
|
|
4551
4880
|
},
|
|
4552
|
-
children: /* @__PURE__ */ (0,
|
|
4881
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: ["tbl__col-label", col.tooltip ? "tbl__col-label--dashed" : ""].filter(Boolean).join(" "), children: Array.isArray(col.header) ? col.header.map((line, li) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { children: [
|
|
4553
4882
|
line,
|
|
4554
|
-
li < col.header.length - 1 && /* @__PURE__ */ (0,
|
|
4883
|
+
li < col.header.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("br", {})
|
|
4555
4884
|
] }, li)) : col.header })
|
|
4556
4885
|
}
|
|
4557
4886
|
)
|
|
@@ -4559,10 +4888,10 @@ var Table = ({
|
|
|
4559
4888
|
col.key
|
|
4560
4889
|
);
|
|
4561
4890
|
}) }) }),
|
|
4562
|
-
/* @__PURE__ */ (0,
|
|
4891
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("tbody", { className: "tbl__tbody", children: visible.length > 0 ? visible.map((row, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("tr", { className: "tbl__tr", children: columns.map((col) => {
|
|
4563
4892
|
const isMain = col.width === "main" || col.key === mainKey;
|
|
4564
4893
|
const iconUrl = row[`${col.key}_iconUrl`];
|
|
4565
|
-
return /* @__PURE__ */ (0,
|
|
4894
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
4566
4895
|
"td",
|
|
4567
4896
|
{
|
|
4568
4897
|
className: [
|
|
@@ -4570,8 +4899,8 @@ var Table = ({
|
|
|
4570
4899
|
isMain ? "tbl__td--main" : "",
|
|
4571
4900
|
col.width === "big" ? "tbl__td--big" : ""
|
|
4572
4901
|
].filter(Boolean).join(" "),
|
|
4573
|
-
children: isMain ? /* @__PURE__ */ (0,
|
|
4574
|
-
iconUrl && /* @__PURE__ */ (0,
|
|
4902
|
+
children: isMain ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "tbl__cell-inner", children: [
|
|
4903
|
+
iconUrl && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
4575
4904
|
"img",
|
|
4576
4905
|
{
|
|
4577
4906
|
src: iconUrl,
|
|
@@ -4583,18 +4912,18 @@ var Table = ({
|
|
|
4583
4912
|
height: "24"
|
|
4584
4913
|
}
|
|
4585
4914
|
),
|
|
4586
|
-
/* @__PURE__ */ (0,
|
|
4587
|
-
] }) : /* @__PURE__ */ (0,
|
|
4915
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "tbl__cell-text tbl__cell-text--bold", children: row[col.key] ?? "" })
|
|
4916
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "tbl__cell-text", children: row[col.key] ?? "" })
|
|
4588
4917
|
},
|
|
4589
4918
|
col.key
|
|
4590
4919
|
);
|
|
4591
|
-
}) }, rowIdx)) : /* @__PURE__ */ (0,
|
|
4920
|
+
}) }, rowIdx)) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("tr", { className: "tbl__tr", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("td", { colSpan: columns.length, className: "tbl__empty-cell", children: [
|
|
4592
4921
|
'No results found for "',
|
|
4593
4922
|
search,
|
|
4594
4923
|
'"'
|
|
4595
4924
|
] }) }) })
|
|
4596
4925
|
] }) }),
|
|
4597
|
-
totalPages > 1 && /* @__PURE__ */ (0,
|
|
4926
|
+
totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "tbl__footer", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "tbl__pagination-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
4598
4927
|
Pagination,
|
|
4599
4928
|
{
|
|
4600
4929
|
currentPage,
|
|
@@ -4603,19 +4932,19 @@ var Table = ({
|
|
|
4603
4932
|
}
|
|
4604
4933
|
) }) })
|
|
4605
4934
|
] }),
|
|
4606
|
-
infoText && /* @__PURE__ */ (0,
|
|
4607
|
-
/* @__PURE__ */ (0,
|
|
4608
|
-
/* @__PURE__ */ (0,
|
|
4935
|
+
infoText && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "tbl-section__info-box", children: [
|
|
4936
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(InfoIcon, { className: "tbl-section__info-icon" }),
|
|
4937
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "tbl-section__info-text", children: infoText })
|
|
4609
4938
|
] })
|
|
4610
4939
|
] }),
|
|
4611
|
-
/* @__PURE__ */ (0,
|
|
4940
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
4612
4941
|
"div",
|
|
4613
4942
|
{
|
|
4614
4943
|
className: ["tbl__global-hint", tooltip.visible ? "tbl__global-hint--visible" : ""].filter(Boolean).join(" "),
|
|
4615
4944
|
style: { left: tooltip.x, top: tooltip.y - 8 },
|
|
4616
4945
|
children: [
|
|
4617
|
-
/* @__PURE__ */ (0,
|
|
4618
|
-
/* @__PURE__ */ (0,
|
|
4946
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "tbl__global-hint-desc", children: tooltip.description }),
|
|
4947
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
4619
4948
|
"div",
|
|
4620
4949
|
{
|
|
4621
4950
|
className: "tbl__global-hint-arrow",
|
|
@@ -4629,41 +4958,41 @@ var Table = ({
|
|
|
4629
4958
|
};
|
|
4630
4959
|
|
|
4631
4960
|
// templates/Leaders/Leaders.tsx
|
|
4632
|
-
var
|
|
4633
|
-
var
|
|
4634
|
-
var
|
|
4635
|
-
var
|
|
4636
|
-
var
|
|
4637
|
-
|
|
4638
|
-
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "leaders__image-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
4961
|
+
var import_react22 = require("react");
|
|
4962
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
4963
|
+
var ChevronDownIcon4 = () => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
4964
|
+
var ChevronUpIcon = () => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { d: "M12 10L8 6L4 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
4965
|
+
var CardContent = ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
|
|
4966
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "avatar-grid__image-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
4639
4967
|
"img",
|
|
4640
4968
|
{
|
|
4641
4969
|
src: item.imageUrl,
|
|
4642
4970
|
alt: item.name,
|
|
4643
|
-
className: "
|
|
4971
|
+
className: "avatar-grid__image",
|
|
4644
4972
|
loading: "lazy"
|
|
4645
4973
|
}
|
|
4646
4974
|
) }),
|
|
4647
|
-
/* @__PURE__ */ (0,
|
|
4648
|
-
/* @__PURE__ */ (0,
|
|
4649
|
-
/* @__PURE__ */ (0,
|
|
4975
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "avatar-grid__content", children: [
|
|
4976
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h3", { className: "avatar-grid__name", children: item.name }),
|
|
4977
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "avatar-grid__role", children: item.role })
|
|
4650
4978
|
] }),
|
|
4651
|
-
item.
|
|
4979
|
+
item.linkUrl && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
4652
4980
|
Link,
|
|
4653
4981
|
{
|
|
4654
|
-
href: item.
|
|
4982
|
+
href: item.linkUrl,
|
|
4655
4983
|
target: "_blank",
|
|
4656
4984
|
rel: "noopener noreferrer",
|
|
4657
|
-
icon:
|
|
4658
|
-
label: "
|
|
4985
|
+
icon: item.linkIcon,
|
|
4986
|
+
label: item.linkLabel ?? "Profile",
|
|
4659
4987
|
colorScheme: "black",
|
|
4660
4988
|
showChevron: false,
|
|
4661
|
-
className: "
|
|
4989
|
+
className: "avatar-grid__link"
|
|
4662
4990
|
}
|
|
4663
4991
|
)
|
|
4664
4992
|
] });
|
|
4665
|
-
var
|
|
4666
|
-
title
|
|
4993
|
+
var AvatarGrid = ({
|
|
4994
|
+
title,
|
|
4995
|
+
description,
|
|
4667
4996
|
items,
|
|
4668
4997
|
initialVisibleCount = 4,
|
|
4669
4998
|
expandText = "View all",
|
|
@@ -4671,57 +5000,258 @@ var Leaders = ({
|
|
|
4671
5000
|
className,
|
|
4672
5001
|
...props
|
|
4673
5002
|
}) => {
|
|
4674
|
-
const [isExpanded, setIsExpanded] = (0,
|
|
5003
|
+
const [isExpanded, setIsExpanded] = (0, import_react22.useState)(false);
|
|
4675
5004
|
const hasMore = items.length > initialVisibleCount;
|
|
4676
5005
|
const visibleItems = items.slice(0, initialVisibleCount);
|
|
4677
5006
|
const extraItems = items.slice(initialVisibleCount);
|
|
4678
|
-
return /* @__PURE__ */ (0,
|
|
4679
|
-
title
|
|
4680
|
-
|
|
4681
|
-
|
|
4682
|
-
|
|
5007
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("section", { className: ["avatar-grid", className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "avatar-grid__container", children: [
|
|
5008
|
+
(title || description) && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "avatar-grid__header", children: [
|
|
5009
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h2", { className: "avatar-grid__title", children: title }),
|
|
5010
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "avatar-grid__description", children: description })
|
|
5011
|
+
] }),
|
|
5012
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "avatar-grid__grid-wrapper", children: [
|
|
5013
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "avatar-grid__grid", children: visibleItems.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "avatar-grid__card", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CardContent, { item }) }, i)) }),
|
|
5014
|
+
hasMore && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
4683
5015
|
"div",
|
|
4684
5016
|
{
|
|
4685
5017
|
className: [
|
|
4686
|
-
"
|
|
4687
|
-
isExpanded ? "
|
|
5018
|
+
"avatar-grid__extra-cards",
|
|
5019
|
+
isExpanded ? "avatar-grid__extra-cards--open" : ""
|
|
4688
5020
|
].join(" "),
|
|
4689
5021
|
"aria-hidden": !isExpanded,
|
|
4690
|
-
children: /* @__PURE__ */ (0,
|
|
5022
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "avatar-grid__extra-grid", children: extraItems.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
4691
5023
|
"div",
|
|
4692
5024
|
{
|
|
4693
5025
|
className: [
|
|
4694
|
-
"
|
|
4695
|
-
"
|
|
4696
|
-
isExpanded ? "
|
|
5026
|
+
"avatar-grid__card",
|
|
5027
|
+
"avatar-grid__extra-card",
|
|
5028
|
+
isExpanded ? "avatar-grid__extra-card--visible" : ""
|
|
4697
5029
|
].join(" "),
|
|
4698
5030
|
style: {
|
|
4699
5031
|
transitionDelay: isExpanded ? `${i * 70 + 120}ms` : "0ms"
|
|
4700
5032
|
},
|
|
4701
|
-
children: /* @__PURE__ */ (0,
|
|
5033
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CardContent, { item })
|
|
4702
5034
|
},
|
|
4703
5035
|
i
|
|
4704
5036
|
)) })
|
|
4705
5037
|
}
|
|
4706
5038
|
)
|
|
4707
5039
|
] }),
|
|
4708
|
-
hasMore && /* @__PURE__ */ (0,
|
|
5040
|
+
hasMore && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "avatar-grid__actions", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
4709
5041
|
Button,
|
|
4710
5042
|
{
|
|
4711
5043
|
variant: "secondary",
|
|
4712
5044
|
colorScheme: "black",
|
|
4713
5045
|
onClick: () => setIsExpanded(!isExpanded),
|
|
4714
5046
|
iconPosition: "icon-right",
|
|
4715
|
-
icon: isExpanded ? /* @__PURE__ */ (0,
|
|
5047
|
+
icon: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ChevronUpIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ChevronDownIcon4, {}),
|
|
5048
|
+
fullWidth: true,
|
|
4716
5049
|
children: isExpanded ? collapseText : expandText
|
|
4717
5050
|
}
|
|
4718
5051
|
) })
|
|
4719
5052
|
] }) });
|
|
4720
5053
|
};
|
|
5054
|
+
var PeopleGrid = AvatarGrid;
|
|
5055
|
+
var Leaders = AvatarGrid;
|
|
5056
|
+
|
|
5057
|
+
// templates/ImageBanner/ImageBanner.tsx
|
|
5058
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
5059
|
+
var ImageBanner = ({
|
|
5060
|
+
variant = "split",
|
|
5061
|
+
title = "Join our global community",
|
|
5062
|
+
description = "Connect with traders around the world to exchange insights, explore portfolios, and gain valuable expertise.",
|
|
5063
|
+
ctaLabel = "Trader's Hub",
|
|
5064
|
+
ctaHref,
|
|
5065
|
+
onCtaClick,
|
|
5066
|
+
imageUrl,
|
|
5067
|
+
imageAlt = "",
|
|
5068
|
+
className,
|
|
5069
|
+
...props
|
|
5070
|
+
}) => {
|
|
5071
|
+
const isFullBg = variant === "full-bg";
|
|
5072
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
5073
|
+
"section",
|
|
5074
|
+
{
|
|
5075
|
+
className: ["image-banner", className].filter(Boolean).join(" "),
|
|
5076
|
+
...props,
|
|
5077
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
5078
|
+
"div",
|
|
5079
|
+
{
|
|
5080
|
+
className: [
|
|
5081
|
+
"image-banner__inner",
|
|
5082
|
+
`image-banner__inner--${variant}`
|
|
5083
|
+
].join(" "),
|
|
5084
|
+
children: [
|
|
5085
|
+
isFullBg && imageUrl && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "image-banner__bg-image-wrapper", children: [
|
|
5086
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
5087
|
+
"img",
|
|
5088
|
+
{
|
|
5089
|
+
src: imageUrl,
|
|
5090
|
+
alt: imageAlt,
|
|
5091
|
+
className: "image-banner__bg-image",
|
|
5092
|
+
loading: "lazy"
|
|
5093
|
+
}
|
|
5094
|
+
),
|
|
5095
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "image-banner__bg-overlay", "aria-hidden": "true" })
|
|
5096
|
+
] }),
|
|
5097
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "image-banner__content", children: [
|
|
5098
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h2", { className: "image-banner__title", children: title }),
|
|
5099
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "image-banner__description", children: description }),
|
|
5100
|
+
ctaLabel && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "image-banner__actions", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
5101
|
+
Link,
|
|
5102
|
+
{
|
|
5103
|
+
colorScheme: "coral",
|
|
5104
|
+
label: ctaLabel,
|
|
5105
|
+
href: ctaHref,
|
|
5106
|
+
onClick: onCtaClick,
|
|
5107
|
+
showChevron: true,
|
|
5108
|
+
className: "image-banner__cta-link"
|
|
5109
|
+
}
|
|
5110
|
+
) })
|
|
5111
|
+
] }),
|
|
5112
|
+
!isFullBg && imageUrl && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "image-banner__image-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
5113
|
+
"img",
|
|
5114
|
+
{
|
|
5115
|
+
src: imageUrl,
|
|
5116
|
+
alt: imageAlt,
|
|
5117
|
+
className: "image-banner__image",
|
|
5118
|
+
loading: "lazy"
|
|
5119
|
+
}
|
|
5120
|
+
) })
|
|
5121
|
+
]
|
|
5122
|
+
}
|
|
5123
|
+
)
|
|
5124
|
+
}
|
|
5125
|
+
);
|
|
5126
|
+
};
|
|
5127
|
+
|
|
5128
|
+
// templates/Testimonial/Testimonial.tsx
|
|
5129
|
+
var import_react23 = require("react");
|
|
5130
|
+
|
|
5131
|
+
// assets/quote-left.webp
|
|
5132
|
+
var quote_left_default = "./quote-left-63QMW5NQ.webp";
|
|
5133
|
+
|
|
5134
|
+
// assets/quote-right.webp
|
|
5135
|
+
var quote_right_default = "./quote-right-W6AS4YHN.webp";
|
|
5136
|
+
|
|
5137
|
+
// templates/Testimonial/Testimonial.tsx
|
|
5138
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
5139
|
+
var Testimonial = ({
|
|
5140
|
+
title,
|
|
5141
|
+
items,
|
|
5142
|
+
className,
|
|
5143
|
+
...props
|
|
5144
|
+
}) => {
|
|
5145
|
+
const [activeIndex, setActiveIndex] = (0, import_react23.useState)(0);
|
|
5146
|
+
const [phase, setPhase] = (0, import_react23.useState)("idle");
|
|
5147
|
+
const pendingIndex = (0, import_react23.useRef)(null);
|
|
5148
|
+
const autoRef = (0, import_react23.useRef)(null);
|
|
5149
|
+
const goTo = (next) => {
|
|
5150
|
+
if (next === activeIndex || phase !== "idle") return;
|
|
5151
|
+
pendingIndex.current = next;
|
|
5152
|
+
setPhase("exiting");
|
|
5153
|
+
};
|
|
5154
|
+
(0, import_react23.useEffect)(() => {
|
|
5155
|
+
if (phase === "exiting") {
|
|
5156
|
+
const t = setTimeout(() => {
|
|
5157
|
+
setActiveIndex(pendingIndex.current ?? activeIndex);
|
|
5158
|
+
setPhase("idle");
|
|
5159
|
+
}, 200);
|
|
5160
|
+
return () => clearTimeout(t);
|
|
5161
|
+
}
|
|
5162
|
+
}, [phase, activeIndex]);
|
|
5163
|
+
(0, import_react23.useEffect)(() => {
|
|
5164
|
+
if (items.length <= 1) return;
|
|
5165
|
+
autoRef.current = setTimeout(() => {
|
|
5166
|
+
const next = (activeIndex + 1) % items.length;
|
|
5167
|
+
pendingIndex.current = next;
|
|
5168
|
+
setPhase("exiting");
|
|
5169
|
+
}, 5e3);
|
|
5170
|
+
return () => {
|
|
5171
|
+
if (autoRef.current) clearTimeout(autoRef.current);
|
|
5172
|
+
};
|
|
5173
|
+
}, [activeIndex, items.length]);
|
|
5174
|
+
if (!items || items.length === 0) return null;
|
|
5175
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
5176
|
+
"section",
|
|
5177
|
+
{
|
|
5178
|
+
className: ["testimonial", className].filter(Boolean).join(" "),
|
|
5179
|
+
...props,
|
|
5180
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "testimonial__container", children: [
|
|
5181
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h2", { className: "testimonial__title", children: title }),
|
|
5182
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "testimonial__carousel", children: [
|
|
5183
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "testimonial__slides", children: items.map((item, i) => {
|
|
5184
|
+
const isActive = i === activeIndex;
|
|
5185
|
+
const isExiting = isActive && phase === "exiting";
|
|
5186
|
+
const slideClass = [
|
|
5187
|
+
"testimonial__slide",
|
|
5188
|
+
isActive && !isExiting ? "testimonial__slide--active" : "",
|
|
5189
|
+
isExiting ? "testimonial__slide--exiting" : ""
|
|
5190
|
+
].filter(Boolean).join(" ");
|
|
5191
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
5192
|
+
"div",
|
|
5193
|
+
{
|
|
5194
|
+
className: slideClass,
|
|
5195
|
+
role: "region",
|
|
5196
|
+
"aria-label": `Testimonial ${i + 1} of ${items.length}`,
|
|
5197
|
+
"aria-hidden": !isActive,
|
|
5198
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "testimonial__card", children: [
|
|
5199
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "testimonial__quotemark testimonial__quotemark--open", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("img", { src: quote_left_default, alt: "", className: "testimonial__quotemark-img" }) }),
|
|
5200
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "testimonial__quote", children: item.quote }),
|
|
5201
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "testimonial__author", children: [
|
|
5202
|
+
item.avatarUrl && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
5203
|
+
"img",
|
|
5204
|
+
{
|
|
5205
|
+
src: item.avatarUrl,
|
|
5206
|
+
alt: item.authorName,
|
|
5207
|
+
className: "testimonial__author-avatar",
|
|
5208
|
+
loading: "lazy"
|
|
5209
|
+
}
|
|
5210
|
+
),
|
|
5211
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "testimonial__author-name", children: item.authorName }),
|
|
5212
|
+
item.authorLocation && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "testimonial__author-location", children: item.authorLocation })
|
|
5213
|
+
] }),
|
|
5214
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "testimonial__quotemark testimonial__quotemark--close", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("img", { src: quote_right_default, alt: "", className: "testimonial__quotemark-img" }) })
|
|
5215
|
+
] })
|
|
5216
|
+
},
|
|
5217
|
+
i
|
|
5218
|
+
);
|
|
5219
|
+
}) }),
|
|
5220
|
+
items.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
5221
|
+
"div",
|
|
5222
|
+
{
|
|
5223
|
+
className: "testimonial__dots",
|
|
5224
|
+
role: "tablist",
|
|
5225
|
+
"aria-label": "Testimonial navigation",
|
|
5226
|
+
children: items.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
5227
|
+
"button",
|
|
5228
|
+
{
|
|
5229
|
+
role: "tab",
|
|
5230
|
+
"aria-selected": i === activeIndex,
|
|
5231
|
+
"aria-label": `Go to testimonial ${i + 1}`,
|
|
5232
|
+
className: [
|
|
5233
|
+
"testimonial__dot",
|
|
5234
|
+
i === activeIndex ? "testimonial__dot--active" : ""
|
|
5235
|
+
].filter(Boolean).join(" "),
|
|
5236
|
+
onClick: () => {
|
|
5237
|
+
if (autoRef.current) clearTimeout(autoRef.current);
|
|
5238
|
+
goTo(i);
|
|
5239
|
+
}
|
|
5240
|
+
},
|
|
5241
|
+
i
|
|
5242
|
+
))
|
|
5243
|
+
}
|
|
5244
|
+
)
|
|
5245
|
+
] })
|
|
5246
|
+
] })
|
|
5247
|
+
}
|
|
5248
|
+
);
|
|
5249
|
+
};
|
|
4721
5250
|
// Annotate the CommonJS export names for ESM import in node:
|
|
4722
5251
|
0 && (module.exports = {
|
|
4723
5252
|
AVATAR_DATA,
|
|
4724
5253
|
Accordion,
|
|
5254
|
+
AvatarGrid,
|
|
4725
5255
|
BottomSheet,
|
|
4726
5256
|
Breadcrumb,
|
|
4727
5257
|
Button,
|
|
@@ -4744,14 +5274,17 @@ var Leaders = ({
|
|
|
4744
5274
|
Footer,
|
|
4745
5275
|
Header,
|
|
4746
5276
|
Hero,
|
|
5277
|
+
ImageBanner,
|
|
4747
5278
|
Leaders,
|
|
4748
5279
|
Link,
|
|
4749
5280
|
LogoMarquee,
|
|
4750
5281
|
Navbar,
|
|
4751
5282
|
Pagination,
|
|
5283
|
+
PeopleGrid,
|
|
4752
5284
|
STEPS_DATA,
|
|
4753
5285
|
SearchField,
|
|
4754
5286
|
Stats,
|
|
5287
|
+
StatsSimple,
|
|
4755
5288
|
Steps,
|
|
4756
5289
|
StickyMarketCards,
|
|
4757
5290
|
StickyStackedCards,
|
|
@@ -4759,6 +5292,7 @@ var Leaders = ({
|
|
|
4759
5292
|
Table,
|
|
4760
5293
|
Tabs,
|
|
4761
5294
|
Tag,
|
|
5295
|
+
Testimonial,
|
|
4762
5296
|
TextField,
|
|
4763
5297
|
TextScroll,
|
|
4764
5298
|
dayNightTransitionV2Preset
|