@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.mjs
CHANGED
|
@@ -1912,36 +1912,182 @@ var Header = ({
|
|
|
1912
1912
|
);
|
|
1913
1913
|
};
|
|
1914
1914
|
|
|
1915
|
-
// templates/Stats/
|
|
1916
|
-
import { useEffect as useEffect4, useRef as useRef4, useState as useState7 } from "react";
|
|
1915
|
+
// templates/Stats/StatsV2.tsx
|
|
1916
|
+
import { useEffect as useEffect4, useMemo, useRef as useRef4, useState as useState7 } from "react";
|
|
1917
1917
|
import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
1918
|
-
var
|
|
1919
|
-
var
|
|
1920
|
-
var
|
|
1921
|
-
var
|
|
1922
|
-
var
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1918
|
+
var HOLD_MS = 1e3;
|
|
1919
|
+
var STEP_DURATION_MS = 700;
|
|
1920
|
+
var INTERVAL_MS = HOLD_MS + STEP_DURATION_MS;
|
|
1921
|
+
var EASING = "cubic-bezier(0.33, 1, 0.68, 1)";
|
|
1922
|
+
var TRANSITION = `transform ${STEP_DURATION_MS}ms ${EASING}, opacity ${STEP_DURATION_MS}ms ${EASING}`;
|
|
1923
|
+
var PARALLAX_START = 0.1;
|
|
1924
|
+
var PARALLAX_END = 0.45;
|
|
1925
|
+
var PARALLAX_MAX_PERCENT = 26.3;
|
|
1926
|
+
var PARALLAX_BREAKPOINT = 992;
|
|
1927
|
+
var SLOT_OFFSET = "var(--stats-v2-slot-offset, 110%)";
|
|
1928
|
+
var CENTER = "translate(-50%, -50%)";
|
|
1929
|
+
function getSlotStyle(slot, transition) {
|
|
1930
|
+
switch (slot) {
|
|
1931
|
+
case "active":
|
|
1932
|
+
return {
|
|
1933
|
+
transform: `${CENTER} translateY(0%) scale(1)`,
|
|
1934
|
+
opacity: 1,
|
|
1935
|
+
zIndex: 2,
|
|
1936
|
+
transition
|
|
1937
|
+
};
|
|
1938
|
+
case "above":
|
|
1939
|
+
return {
|
|
1940
|
+
transform: `${CENTER} translateY(calc(${SLOT_OFFSET} * -1)) scale(0.65)`,
|
|
1941
|
+
opacity: 1,
|
|
1942
|
+
zIndex: 1,
|
|
1943
|
+
transition
|
|
1944
|
+
};
|
|
1945
|
+
case "below":
|
|
1946
|
+
return {
|
|
1947
|
+
transform: `${CENTER} translateY(${SLOT_OFFSET}) scale(0.65)`,
|
|
1948
|
+
opacity: 1,
|
|
1949
|
+
zIndex: 1,
|
|
1950
|
+
transition
|
|
1951
|
+
};
|
|
1952
|
+
case "exiting":
|
|
1953
|
+
return {
|
|
1954
|
+
transform: `${CENTER} translateY(calc(${SLOT_OFFSET} * -1)) scale(0.4)`,
|
|
1955
|
+
opacity: 0,
|
|
1956
|
+
zIndex: 0,
|
|
1957
|
+
transition
|
|
1958
|
+
};
|
|
1959
|
+
case "queued":
|
|
1960
|
+
default:
|
|
1961
|
+
return {
|
|
1962
|
+
transform: `${CENTER} translateY(${SLOT_OFFSET}) scale(0.4)`,
|
|
1963
|
+
opacity: 0,
|
|
1964
|
+
zIndex: 0,
|
|
1965
|
+
transition
|
|
1966
|
+
};
|
|
1936
1967
|
}
|
|
1937
|
-
return {
|
|
1938
|
-
transform: rel < 0 ? "translateY(calc(-50% - 110%)) scale(0.4)" : "translateY(calc(-50% + 110%)) scale(0.4)",
|
|
1939
|
-
opacity: 0,
|
|
1940
|
-
zIndex: 0,
|
|
1941
|
-
transition: TRANSITION
|
|
1942
|
-
};
|
|
1943
1968
|
}
|
|
1944
|
-
|
|
1969
|
+
function slotForIndex(index, step) {
|
|
1970
|
+
const rel = index - step - 1;
|
|
1971
|
+
if (rel === 0) return "active";
|
|
1972
|
+
if (rel === -1) return "above";
|
|
1973
|
+
if (rel === 1) return "below";
|
|
1974
|
+
if (rel < -1) return "exiting";
|
|
1975
|
+
return "queued";
|
|
1976
|
+
}
|
|
1977
|
+
var Laurel = ({ flip = false }) => /* @__PURE__ */ jsx24(
|
|
1978
|
+
"svg",
|
|
1979
|
+
{
|
|
1980
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1981
|
+
width: "32",
|
|
1982
|
+
height: "84",
|
|
1983
|
+
viewBox: "0 0 32 84",
|
|
1984
|
+
fill: "none",
|
|
1985
|
+
"aria-hidden": "true",
|
|
1986
|
+
focusable: "false",
|
|
1987
|
+
className: [
|
|
1988
|
+
"stats-v2__laurel",
|
|
1989
|
+
flip ? "stats-v2__laurel--flip" : ""
|
|
1990
|
+
].filter(Boolean).join(" "),
|
|
1991
|
+
children: /* @__PURE__ */ jsxs22("g", { opacity: "0.2", children: [
|
|
1992
|
+
/* @__PURE__ */ jsx24(
|
|
1993
|
+
"path",
|
|
1994
|
+
{
|
|
1995
|
+
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",
|
|
1996
|
+
fill: "currentColor",
|
|
1997
|
+
stroke: "currentColor"
|
|
1998
|
+
}
|
|
1999
|
+
),
|
|
2000
|
+
/* @__PURE__ */ jsx24(
|
|
2001
|
+
"path",
|
|
2002
|
+
{
|
|
2003
|
+
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",
|
|
2004
|
+
fill: "currentColor",
|
|
2005
|
+
stroke: "currentColor"
|
|
2006
|
+
}
|
|
2007
|
+
),
|
|
2008
|
+
/* @__PURE__ */ jsx24(
|
|
2009
|
+
"path",
|
|
2010
|
+
{
|
|
2011
|
+
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",
|
|
2012
|
+
fill: "currentColor",
|
|
2013
|
+
stroke: "currentColor"
|
|
2014
|
+
}
|
|
2015
|
+
),
|
|
2016
|
+
/* @__PURE__ */ jsx24(
|
|
2017
|
+
"path",
|
|
2018
|
+
{
|
|
2019
|
+
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",
|
|
2020
|
+
fill: "currentColor",
|
|
2021
|
+
stroke: "currentColor"
|
|
2022
|
+
}
|
|
2023
|
+
),
|
|
2024
|
+
/* @__PURE__ */ jsx24(
|
|
2025
|
+
"path",
|
|
2026
|
+
{
|
|
2027
|
+
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",
|
|
2028
|
+
fill: "currentColor",
|
|
2029
|
+
stroke: "currentColor"
|
|
2030
|
+
}
|
|
2031
|
+
),
|
|
2032
|
+
/* @__PURE__ */ jsx24(
|
|
2033
|
+
"path",
|
|
2034
|
+
{
|
|
2035
|
+
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",
|
|
2036
|
+
fill: "currentColor",
|
|
2037
|
+
stroke: "currentColor"
|
|
2038
|
+
}
|
|
2039
|
+
),
|
|
2040
|
+
/* @__PURE__ */ jsx24(
|
|
2041
|
+
"path",
|
|
2042
|
+
{
|
|
2043
|
+
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",
|
|
2044
|
+
fill: "currentColor",
|
|
2045
|
+
stroke: "currentColor"
|
|
2046
|
+
}
|
|
2047
|
+
),
|
|
2048
|
+
/* @__PURE__ */ jsx24(
|
|
2049
|
+
"path",
|
|
2050
|
+
{
|
|
2051
|
+
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",
|
|
2052
|
+
fill: "currentColor",
|
|
2053
|
+
stroke: "currentColor"
|
|
2054
|
+
}
|
|
2055
|
+
),
|
|
2056
|
+
/* @__PURE__ */ jsx24(
|
|
2057
|
+
"path",
|
|
2058
|
+
{
|
|
2059
|
+
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",
|
|
2060
|
+
fill: "currentColor",
|
|
2061
|
+
stroke: "currentColor"
|
|
2062
|
+
}
|
|
2063
|
+
),
|
|
2064
|
+
/* @__PURE__ */ jsx24(
|
|
2065
|
+
"path",
|
|
2066
|
+
{
|
|
2067
|
+
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",
|
|
2068
|
+
fill: "currentColor",
|
|
2069
|
+
stroke: "currentColor"
|
|
2070
|
+
}
|
|
2071
|
+
),
|
|
2072
|
+
/* @__PURE__ */ jsx24(
|
|
2073
|
+
"path",
|
|
2074
|
+
{
|
|
2075
|
+
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",
|
|
2076
|
+
fill: "currentColor",
|
|
2077
|
+
stroke: "currentColor"
|
|
2078
|
+
}
|
|
2079
|
+
)
|
|
2080
|
+
] })
|
|
2081
|
+
}
|
|
2082
|
+
);
|
|
2083
|
+
var AwardBadge = ({ heading, subheading }) => /* @__PURE__ */ jsxs22("div", { className: "stats-v2__award", children: [
|
|
2084
|
+
/* @__PURE__ */ jsx24(Laurel, {}),
|
|
2085
|
+
/* @__PURE__ */ jsxs22("div", { className: "stats-v2__award-text", children: [
|
|
2086
|
+
/* @__PURE__ */ jsx24("div", { className: "stats-v2__award-heading", children: heading }),
|
|
2087
|
+
/* @__PURE__ */ jsx24("div", { className: "stats-v2__award-subheading", children: subheading })
|
|
2088
|
+
] }),
|
|
2089
|
+
/* @__PURE__ */ jsx24(Laurel, { flip: true })
|
|
2090
|
+
] });
|
|
1945
2091
|
var Stats = ({
|
|
1946
2092
|
title,
|
|
1947
2093
|
description,
|
|
@@ -1951,105 +2097,283 @@ var Stats = ({
|
|
|
1951
2097
|
className,
|
|
1952
2098
|
...props
|
|
1953
2099
|
}) => {
|
|
1954
|
-
const [activeIndex, setActiveIndex] = useState7(0);
|
|
1955
|
-
const intervalRef = useRef4(null);
|
|
1956
2100
|
const sectionRef = useRef4(null);
|
|
1957
2101
|
const leftColRef = useRef4(null);
|
|
1958
2102
|
const rightColRef = useRef4(null);
|
|
1959
2103
|
const rafRef = useRef4(null);
|
|
2104
|
+
const N = stats.length;
|
|
1960
2105
|
const hasAwards = leftAwards.length > 0 || rightAwards.length > 0;
|
|
1961
2106
|
const allAwards = [...leftAwards, ...rightAwards];
|
|
1962
|
-
const
|
|
2107
|
+
const strip = useMemo(() => {
|
|
2108
|
+
if (N === 0) return [];
|
|
2109
|
+
const target = Math.max(2 * N, N + 3);
|
|
2110
|
+
return Array.from({ length: target }, (_, i) => stats[i % N]);
|
|
2111
|
+
}, [stats, N]);
|
|
2112
|
+
const [step, setStep] = useState7(0);
|
|
2113
|
+
const [phase, setPhase] = useState7("idle");
|
|
2114
|
+
const scheduleRef = useRef4(null);
|
|
1963
2115
|
useEffect4(() => {
|
|
1964
|
-
if (
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
2116
|
+
if (N <= 1) return;
|
|
2117
|
+
let timerId = null;
|
|
2118
|
+
let cancelled = false;
|
|
2119
|
+
const advance = () => {
|
|
2120
|
+
timerId = null;
|
|
2121
|
+
if (cancelled) return;
|
|
2122
|
+
setStep((prev) => {
|
|
2123
|
+
if (prev >= N) {
|
|
2124
|
+
setPhase("snap-disable");
|
|
2125
|
+
return prev;
|
|
2126
|
+
}
|
|
2127
|
+
const next = prev + 1;
|
|
2128
|
+
const delayMs = next >= N ? STEP_DURATION_MS : INTERVAL_MS;
|
|
2129
|
+
schedule(delayMs);
|
|
2130
|
+
return next;
|
|
2131
|
+
});
|
|
2132
|
+
};
|
|
2133
|
+
const schedule = (delayMs) => {
|
|
2134
|
+
if (cancelled) return;
|
|
2135
|
+
if (timerId !== null) window.clearTimeout(timerId);
|
|
2136
|
+
timerId = window.setTimeout(advance, delayMs);
|
|
2137
|
+
};
|
|
2138
|
+
scheduleRef.current = schedule;
|
|
2139
|
+
schedule(HOLD_MS);
|
|
1968
2140
|
return () => {
|
|
1969
|
-
|
|
2141
|
+
cancelled = true;
|
|
2142
|
+
scheduleRef.current = null;
|
|
2143
|
+
if (timerId !== null) window.clearTimeout(timerId);
|
|
1970
2144
|
};
|
|
1971
|
-
}, [
|
|
2145
|
+
}, [N]);
|
|
1972
2146
|
useEffect4(() => {
|
|
1973
|
-
|
|
2147
|
+
if (phase === "snap-disable") {
|
|
2148
|
+
const raf = requestAnimationFrame(() => {
|
|
2149
|
+
setStep(0);
|
|
2150
|
+
setPhase("snap-jump");
|
|
2151
|
+
});
|
|
2152
|
+
rafRef.current = raf;
|
|
2153
|
+
return () => cancelAnimationFrame(raf);
|
|
2154
|
+
}
|
|
2155
|
+
if (phase === "snap-jump") {
|
|
2156
|
+
const raf = requestAnimationFrame(() => {
|
|
2157
|
+
setPhase("idle");
|
|
2158
|
+
scheduleRef.current?.(HOLD_MS);
|
|
2159
|
+
});
|
|
2160
|
+
rafRef.current = raf;
|
|
2161
|
+
return () => cancelAnimationFrame(raf);
|
|
2162
|
+
}
|
|
2163
|
+
}, [phase]);
|
|
2164
|
+
useEffect4(() => {
|
|
2165
|
+
setStep(0);
|
|
2166
|
+
setPhase("idle");
|
|
2167
|
+
}, [N]);
|
|
2168
|
+
useEffect4(() => {
|
|
2169
|
+
const apply = () => {
|
|
1974
2170
|
const section = sectionRef.current;
|
|
1975
|
-
if (!section || window.innerWidth <
|
|
2171
|
+
if (!section || window.innerWidth < PARALLAX_BREAKPOINT) {
|
|
1976
2172
|
if (leftColRef.current) leftColRef.current.style.transform = "";
|
|
1977
|
-
if (rightColRef.current)
|
|
2173
|
+
if (rightColRef.current)
|
|
2174
|
+
rightColRef.current.style.transform = "";
|
|
1978
2175
|
return;
|
|
1979
2176
|
}
|
|
1980
2177
|
const rect = section.getBoundingClientRect();
|
|
1981
|
-
const
|
|
1982
|
-
const
|
|
1983
|
-
const
|
|
1984
|
-
const
|
|
1985
|
-
|
|
1986
|
-
|
|
2178
|
+
const viewport = window.innerHeight;
|
|
2179
|
+
const totalTravel = rect.height + viewport;
|
|
2180
|
+
const traveled = viewport - rect.top;
|
|
2181
|
+
const rawProgress = traveled / totalTravel;
|
|
2182
|
+
const progress = Math.max(0, Math.min(1, rawProgress));
|
|
2183
|
+
const normalised = Math.max(
|
|
2184
|
+
0,
|
|
2185
|
+
Math.min(
|
|
2186
|
+
1,
|
|
2187
|
+
(progress - PARALLAX_START) / (PARALLAX_END - PARALLAX_START)
|
|
2188
|
+
)
|
|
2189
|
+
);
|
|
2190
|
+
const remaining = 1 - normalised;
|
|
2191
|
+
const leftOffset = -PARALLAX_MAX_PERCENT * remaining;
|
|
2192
|
+
const rightOffset = PARALLAX_MAX_PERCENT * remaining;
|
|
2193
|
+
if (leftColRef.current) {
|
|
2194
|
+
leftColRef.current.style.transform = `translateY(${leftOffset}%)`;
|
|
2195
|
+
}
|
|
2196
|
+
if (rightColRef.current) {
|
|
2197
|
+
rightColRef.current.style.transform = `translateY(${rightOffset}%)`;
|
|
2198
|
+
}
|
|
1987
2199
|
};
|
|
1988
2200
|
const onScroll = () => {
|
|
1989
|
-
|
|
1990
|
-
rafRef.current = requestAnimationFrame(applyParallax);
|
|
2201
|
+
requestAnimationFrame(apply);
|
|
1991
2202
|
};
|
|
1992
|
-
|
|
2203
|
+
apply();
|
|
1993
2204
|
window.addEventListener("scroll", onScroll, { passive: true });
|
|
1994
2205
|
window.addEventListener("resize", onScroll, { passive: true });
|
|
1995
2206
|
return () => {
|
|
1996
2207
|
window.removeEventListener("scroll", onScroll);
|
|
1997
2208
|
window.removeEventListener("resize", onScroll);
|
|
1998
|
-
if (rafRef.current) cancelAnimationFrame(rafRef.current);
|
|
1999
2209
|
};
|
|
2000
2210
|
}, []);
|
|
2211
|
+
const transition = phase === "idle" ? TRANSITION : "none";
|
|
2001
2212
|
return /* @__PURE__ */ jsx24(
|
|
2002
2213
|
"section",
|
|
2003
2214
|
{
|
|
2004
2215
|
ref: sectionRef,
|
|
2005
|
-
className: ["stats", className].filter(Boolean).join(" "),
|
|
2216
|
+
className: ["stats-v2", className].filter(Boolean).join(" "),
|
|
2006
2217
|
...props,
|
|
2007
|
-
children: /* @__PURE__ */ jsxs22("div", { className: "
|
|
2008
|
-
/* @__PURE__ */ jsxs22("div", { className: "
|
|
2009
|
-
/* @__PURE__ */ jsx24("h2", { className: "
|
|
2010
|
-
description && /* @__PURE__ */ jsx24("p", { className: "
|
|
2218
|
+
children: /* @__PURE__ */ jsxs22("div", { className: "stats-v2__inner", children: [
|
|
2219
|
+
/* @__PURE__ */ jsxs22("div", { className: "stats-v2__header", children: [
|
|
2220
|
+
/* @__PURE__ */ jsx24("h2", { className: "stats-v2__title", children: title }),
|
|
2221
|
+
description && /* @__PURE__ */ jsx24("p", { className: "stats-v2__description", children: description })
|
|
2011
2222
|
] }),
|
|
2012
|
-
/* @__PURE__ */ jsxs22("div", { className: "
|
|
2013
|
-
leftAwards.length > 0 && /* @__PURE__ */ jsx24(
|
|
2014
|
-
|
|
2015
|
-
|
|
2016
|
-
|
|
2017
|
-
|
|
2018
|
-
|
|
2019
|
-
|
|
2223
|
+
/* @__PURE__ */ jsxs22("div", { className: "stats-v2__content", children: [
|
|
2224
|
+
leftAwards.length > 0 && /* @__PURE__ */ jsx24(
|
|
2225
|
+
"div",
|
|
2226
|
+
{
|
|
2227
|
+
ref: leftColRef,
|
|
2228
|
+
className: "stats-v2__awards-col stats-v2__awards-col--left",
|
|
2229
|
+
children: leftAwards.map((award, i) => /* @__PURE__ */ jsx24(AwardBadge, { ...award }, `l-${i}`))
|
|
2230
|
+
}
|
|
2231
|
+
),
|
|
2232
|
+
/* @__PURE__ */ jsx24("div", { className: "stats-v2__card", children: /* @__PURE__ */ jsxs22("div", { className: "stats-v2__card-track", children: [
|
|
2233
|
+
/* @__PURE__ */ jsx24(
|
|
2234
|
+
"div",
|
|
2235
|
+
{
|
|
2236
|
+
className: "stats-v2__fade stats-v2__fade--top",
|
|
2237
|
+
"aria-hidden": "true"
|
|
2238
|
+
}
|
|
2239
|
+
),
|
|
2240
|
+
/* @__PURE__ */ jsx24(
|
|
2241
|
+
"div",
|
|
2242
|
+
{
|
|
2243
|
+
className: "stats-v2__fade stats-v2__fade--bottom",
|
|
2244
|
+
"aria-hidden": "true"
|
|
2245
|
+
}
|
|
2246
|
+
),
|
|
2247
|
+
strip.map((stat, i) => {
|
|
2248
|
+
const slot = slotForIndex(i, step);
|
|
2249
|
+
const active = slot === "active";
|
|
2020
2250
|
return /* @__PURE__ */ jsxs22(
|
|
2021
2251
|
"div",
|
|
2022
2252
|
{
|
|
2023
2253
|
className: [
|
|
2024
|
-
"
|
|
2025
|
-
active ? "
|
|
2254
|
+
"stats-v2__stat",
|
|
2255
|
+
active ? "stats-v2__stat--active" : "stats-v2__stat--inactive"
|
|
2026
2256
|
].join(" "),
|
|
2027
|
-
style:
|
|
2257
|
+
style: getSlotStyle(slot, transition),
|
|
2028
2258
|
"aria-hidden": !active,
|
|
2029
2259
|
children: [
|
|
2030
|
-
/* @__PURE__ */ jsx24("span", { className: "
|
|
2031
|
-
/* @__PURE__ */ jsx24("span", { className: "
|
|
2260
|
+
/* @__PURE__ */ jsx24("span", { className: "stats-v2__stat-value", children: stat.value }),
|
|
2261
|
+
/* @__PURE__ */ jsx24("span", { className: "stats-v2__stat-label", children: stat.label })
|
|
2032
2262
|
]
|
|
2033
2263
|
},
|
|
2034
2264
|
i
|
|
2035
2265
|
);
|
|
2036
2266
|
})
|
|
2037
2267
|
] }) }),
|
|
2038
|
-
rightAwards.length > 0 && /* @__PURE__ */ jsx24(
|
|
2039
|
-
|
|
2268
|
+
rightAwards.length > 0 && /* @__PURE__ */ jsx24(
|
|
2269
|
+
"div",
|
|
2270
|
+
{
|
|
2271
|
+
ref: rightColRef,
|
|
2272
|
+
className: "stats-v2__awards-col stats-v2__awards-col--right",
|
|
2273
|
+
children: rightAwards.map((award, i) => /* @__PURE__ */ jsx24(AwardBadge, { ...award }, `r-${i}`))
|
|
2274
|
+
}
|
|
2275
|
+
),
|
|
2276
|
+
hasAwards && /* @__PURE__ */ jsx24("div", { className: "stats-v2__awards-mobile", children: allAwards.map((award, i) => /* @__PURE__ */ jsx24(AwardBadge, { ...award }, `m-${i}`)) })
|
|
2040
2277
|
] })
|
|
2041
2278
|
] })
|
|
2042
2279
|
}
|
|
2043
2280
|
);
|
|
2044
2281
|
};
|
|
2045
2282
|
|
|
2283
|
+
// templates/Stats/StatsSimple.tsx
|
|
2284
|
+
import { useEffect as useEffect5, useRef as useRef5, useState as useState8 } from "react";
|
|
2285
|
+
import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2286
|
+
function parseValue(raw) {
|
|
2287
|
+
const match = raw.match(/^([^0-9]*)([0-9]+(?:\.[0-9]+)?)(.*)$/);
|
|
2288
|
+
if (!match) return { prefix: "", number: 0, suffix: raw };
|
|
2289
|
+
return {
|
|
2290
|
+
prefix: match[1],
|
|
2291
|
+
number: parseFloat(match[2]),
|
|
2292
|
+
suffix: match[3]
|
|
2293
|
+
};
|
|
2294
|
+
}
|
|
2295
|
+
var DURATION_MS = 1800;
|
|
2296
|
+
var EASING2 = (t) => 1 - Math.pow(1 - t, 3);
|
|
2297
|
+
function useCountUp(target, active) {
|
|
2298
|
+
const [display, setDisplay] = useState8(0);
|
|
2299
|
+
const rafRef = useRef5(null);
|
|
2300
|
+
const startRef = useRef5(null);
|
|
2301
|
+
useEffect5(() => {
|
|
2302
|
+
if (!active) return;
|
|
2303
|
+
startRef.current = null;
|
|
2304
|
+
const tick = (now) => {
|
|
2305
|
+
if (startRef.current === null) startRef.current = now;
|
|
2306
|
+
const elapsed = now - startRef.current;
|
|
2307
|
+
const progress = Math.min(elapsed / DURATION_MS, 1);
|
|
2308
|
+
const eased = EASING2(progress);
|
|
2309
|
+
setDisplay(Math.round(eased * target));
|
|
2310
|
+
if (progress < 1) {
|
|
2311
|
+
rafRef.current = requestAnimationFrame(tick);
|
|
2312
|
+
}
|
|
2313
|
+
};
|
|
2314
|
+
rafRef.current = requestAnimationFrame(tick);
|
|
2315
|
+
return () => {
|
|
2316
|
+
if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
|
|
2317
|
+
};
|
|
2318
|
+
}, [target, active]);
|
|
2319
|
+
return display;
|
|
2320
|
+
}
|
|
2321
|
+
var AnimatedValue = ({
|
|
2322
|
+
raw,
|
|
2323
|
+
active
|
|
2324
|
+
}) => {
|
|
2325
|
+
const { prefix, number, suffix } = parseValue(raw);
|
|
2326
|
+
const count = useCountUp(number, active);
|
|
2327
|
+
const formatted = number >= 1e3 && !/[KMBkmb]/.test(suffix) ? count.toLocaleString() : String(count);
|
|
2328
|
+
return /* @__PURE__ */ jsxs23("span", { className: "stats-simple__value", children: [
|
|
2329
|
+
prefix,
|
|
2330
|
+
formatted,
|
|
2331
|
+
suffix
|
|
2332
|
+
] });
|
|
2333
|
+
};
|
|
2334
|
+
var StatsSimple = ({
|
|
2335
|
+
stats,
|
|
2336
|
+
className,
|
|
2337
|
+
...props
|
|
2338
|
+
}) => {
|
|
2339
|
+
const sectionRef = useRef5(null);
|
|
2340
|
+
const [animated, setAnimated] = useState8(false);
|
|
2341
|
+
useEffect5(() => {
|
|
2342
|
+
const el = sectionRef.current;
|
|
2343
|
+
if (!el) return;
|
|
2344
|
+
const observer = new IntersectionObserver(
|
|
2345
|
+
([entry]) => {
|
|
2346
|
+
if (entry.isIntersecting) {
|
|
2347
|
+
setAnimated(true);
|
|
2348
|
+
observer.disconnect();
|
|
2349
|
+
}
|
|
2350
|
+
},
|
|
2351
|
+
{ threshold: 0.25 }
|
|
2352
|
+
);
|
|
2353
|
+
observer.observe(el);
|
|
2354
|
+
return () => observer.disconnect();
|
|
2355
|
+
}, []);
|
|
2356
|
+
return /* @__PURE__ */ jsx25(
|
|
2357
|
+
"section",
|
|
2358
|
+
{
|
|
2359
|
+
ref: sectionRef,
|
|
2360
|
+
className: ["stats-simple", className].filter(Boolean).join(" "),
|
|
2361
|
+
...props,
|
|
2362
|
+
children: /* @__PURE__ */ jsx25("div", { className: "stats-simple__inner", children: stats.map((stat, i) => /* @__PURE__ */ jsxs23("div", { className: "stats-simple__item", children: [
|
|
2363
|
+
/* @__PURE__ */ jsx25(AnimatedValue, { raw: stat.value, active: animated }),
|
|
2364
|
+
/* @__PURE__ */ jsx25("span", { className: "stats-simple__label", children: stat.label })
|
|
2365
|
+
] }, i)) })
|
|
2366
|
+
}
|
|
2367
|
+
);
|
|
2368
|
+
};
|
|
2369
|
+
|
|
2046
2370
|
// templates/FeatureScroll/FeatureScroll.tsx
|
|
2047
|
-
import { useLayoutEffect, useRef as
|
|
2371
|
+
import { useLayoutEffect, useRef as useRef7, useState as useState10 } from "react";
|
|
2048
2372
|
|
|
2049
2373
|
// components/DotLottieInView/DotLottieInView.tsx
|
|
2050
|
-
import { useEffect as
|
|
2374
|
+
import { useEffect as useEffect6, useRef as useRef6, useState as useState9 } from "react";
|
|
2051
2375
|
import { DotLottieReact } from "@lottiefiles/dotlottie-react";
|
|
2052
|
-
import { jsx as
|
|
2376
|
+
import { jsx as jsx26 } from "react/jsx-runtime";
|
|
2053
2377
|
function DotLottieInView({
|
|
2054
2378
|
enabled = true,
|
|
2055
2379
|
rootMargin = "0px",
|
|
@@ -2058,10 +2382,10 @@ function DotLottieInView({
|
|
|
2058
2382
|
style,
|
|
2059
2383
|
...dotProps
|
|
2060
2384
|
}) {
|
|
2061
|
-
const wrapRef =
|
|
2062
|
-
const [inView, setInView] =
|
|
2063
|
-
const [dotLottie, setDotLottie] =
|
|
2064
|
-
|
|
2385
|
+
const wrapRef = useRef6(null);
|
|
2386
|
+
const [inView, setInView] = useState9(false);
|
|
2387
|
+
const [dotLottie, setDotLottie] = useState9(null);
|
|
2388
|
+
useEffect6(() => {
|
|
2065
2389
|
const el = wrapRef.current;
|
|
2066
2390
|
if (!el) return;
|
|
2067
2391
|
const observer = new IntersectionObserver(
|
|
@@ -2073,7 +2397,7 @@ function DotLottieInView({
|
|
|
2073
2397
|
observer.observe(el);
|
|
2074
2398
|
return () => observer.disconnect();
|
|
2075
2399
|
}, [rootMargin, threshold]);
|
|
2076
|
-
|
|
2400
|
+
useEffect6(() => {
|
|
2077
2401
|
if (!dotLottie) return;
|
|
2078
2402
|
if (!enabled || !inView) {
|
|
2079
2403
|
dotLottie.stop();
|
|
@@ -2082,7 +2406,7 @@ function DotLottieInView({
|
|
|
2082
2406
|
dotLottie.stop();
|
|
2083
2407
|
dotLottie.play();
|
|
2084
2408
|
}, [dotLottie, enabled, inView]);
|
|
2085
|
-
return /* @__PURE__ */
|
|
2409
|
+
return /* @__PURE__ */ jsx26(
|
|
2086
2410
|
"div",
|
|
2087
2411
|
{
|
|
2088
2412
|
ref: wrapRef,
|
|
@@ -2097,7 +2421,7 @@ function DotLottieInView({
|
|
|
2097
2421
|
backgroundColor: "transparent",
|
|
2098
2422
|
...style
|
|
2099
2423
|
},
|
|
2100
|
-
children: /* @__PURE__ */
|
|
2424
|
+
children: /* @__PURE__ */ jsx26(
|
|
2101
2425
|
DotLottieReact,
|
|
2102
2426
|
{
|
|
2103
2427
|
...dotProps,
|
|
@@ -2111,7 +2435,7 @@ function DotLottieInView({
|
|
|
2111
2435
|
}
|
|
2112
2436
|
|
|
2113
2437
|
// templates/FeatureScroll/FeatureScroll.tsx
|
|
2114
|
-
import { jsx as
|
|
2438
|
+
import { jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2115
2439
|
var FEATURE_SCROLL_DATA = [
|
|
2116
2440
|
{
|
|
2117
2441
|
title: "Forex",
|
|
@@ -2156,7 +2480,7 @@ var FEATURE_SCROLL_DATA = [
|
|
|
2156
2480
|
mediaUrl: "https://cdn.prod.website-files.com/66fbaad381fa6866fa4991f3/675a9064f2c16e4e0732abfb_Stock%20Indices.lottie"
|
|
2157
2481
|
}
|
|
2158
2482
|
];
|
|
2159
|
-
var ChevronRight2 = () => /* @__PURE__ */
|
|
2483
|
+
var ChevronRight2 = () => /* @__PURE__ */ jsx27(
|
|
2160
2484
|
"svg",
|
|
2161
2485
|
{
|
|
2162
2486
|
className: "fs__item-link-icon",
|
|
@@ -2165,7 +2489,7 @@ var ChevronRight2 = () => /* @__PURE__ */ jsx26(
|
|
|
2165
2489
|
viewBox: "0 0 16 16",
|
|
2166
2490
|
fill: "none",
|
|
2167
2491
|
"aria-hidden": "true",
|
|
2168
|
-
children: /* @__PURE__ */
|
|
2492
|
+
children: /* @__PURE__ */ jsx27(
|
|
2169
2493
|
"path",
|
|
2170
2494
|
{
|
|
2171
2495
|
d: "M6 3l5 5-5 5",
|
|
@@ -2183,7 +2507,7 @@ function resolveMediaType(item) {
|
|
|
2183
2507
|
}
|
|
2184
2508
|
var MediaRenderer = ({ item, active }) => {
|
|
2185
2509
|
if (resolveMediaType(item) === "lottie") {
|
|
2186
|
-
return /* @__PURE__ */
|
|
2510
|
+
return /* @__PURE__ */ jsx27(
|
|
2187
2511
|
DotLottieInView,
|
|
2188
2512
|
{
|
|
2189
2513
|
src: item.mediaUrl,
|
|
@@ -2191,7 +2515,7 @@ var MediaRenderer = ({ item, active }) => {
|
|
|
2191
2515
|
}
|
|
2192
2516
|
);
|
|
2193
2517
|
}
|
|
2194
|
-
return /* @__PURE__ */
|
|
2518
|
+
return /* @__PURE__ */ jsx27(
|
|
2195
2519
|
"img",
|
|
2196
2520
|
{
|
|
2197
2521
|
src: item.mediaUrl,
|
|
@@ -2207,9 +2531,9 @@ var FeatureScroll = ({
|
|
|
2207
2531
|
className,
|
|
2208
2532
|
...props
|
|
2209
2533
|
}) => {
|
|
2210
|
-
const [activeIndex, setActiveIndex] =
|
|
2211
|
-
const titleRefs =
|
|
2212
|
-
const mediaColRef =
|
|
2534
|
+
const [activeIndex, setActiveIndex] = useState10(0);
|
|
2535
|
+
const titleRefs = useRef7([]);
|
|
2536
|
+
const mediaColRef = useRef7(null);
|
|
2213
2537
|
useLayoutEffect(() => {
|
|
2214
2538
|
if (items.length === 0) return;
|
|
2215
2539
|
const readThresholdPx = () => {
|
|
@@ -2262,24 +2586,24 @@ var FeatureScroll = ({
|
|
|
2262
2586
|
className
|
|
2263
2587
|
].filter(Boolean).join(" ");
|
|
2264
2588
|
if (items.length === 0) {
|
|
2265
|
-
return /* @__PURE__ */
|
|
2589
|
+
return /* @__PURE__ */ jsx27("section", { className: rootClass, ...props, children: /* @__PURE__ */ jsx27("div", { className: "fs__inner", children: /* @__PURE__ */ jsx27("h2", { className: "fs__header", children: header }) }) });
|
|
2266
2590
|
}
|
|
2267
|
-
return /* @__PURE__ */
|
|
2268
|
-
/* @__PURE__ */
|
|
2269
|
-
/* @__PURE__ */
|
|
2270
|
-
/* @__PURE__ */
|
|
2591
|
+
return /* @__PURE__ */ jsx27("section", { className: rootClass, ...props, children: /* @__PURE__ */ jsxs24("div", { className: "fs__inner", children: [
|
|
2592
|
+
/* @__PURE__ */ jsx27("h2", { className: "fs__header", children: header }),
|
|
2593
|
+
/* @__PURE__ */ jsxs24("div", { className: "fs__layout", children: [
|
|
2594
|
+
/* @__PURE__ */ jsx27("div", { className: "fs__media-col", "aria-hidden": "true", children: /* @__PURE__ */ jsx27(
|
|
2271
2595
|
"div",
|
|
2272
2596
|
{
|
|
2273
2597
|
ref: mediaColRef,
|
|
2274
2598
|
className: "fs__media-sticky",
|
|
2275
|
-
children: /* @__PURE__ */
|
|
2599
|
+
children: /* @__PURE__ */ jsx27("div", { className: "fs__media-wrap", children: items.map((item, i) => /* @__PURE__ */ jsx27(
|
|
2276
2600
|
"div",
|
|
2277
2601
|
{
|
|
2278
2602
|
className: [
|
|
2279
2603
|
"fs__media-item",
|
|
2280
2604
|
i === activeIndex ? "fs__media-item--active" : ""
|
|
2281
2605
|
].filter(Boolean).join(" "),
|
|
2282
|
-
children: /* @__PURE__ */
|
|
2606
|
+
children: /* @__PURE__ */ jsx27(
|
|
2283
2607
|
MediaRenderer,
|
|
2284
2608
|
{
|
|
2285
2609
|
item,
|
|
@@ -2291,12 +2615,12 @@ var FeatureScroll = ({
|
|
|
2291
2615
|
)) })
|
|
2292
2616
|
}
|
|
2293
2617
|
) }),
|
|
2294
|
-
/* @__PURE__ */
|
|
2618
|
+
/* @__PURE__ */ jsx27("div", { className: "fs__content-col", children: items.map((item, i) => /* @__PURE__ */ jsxs24(
|
|
2295
2619
|
"div",
|
|
2296
2620
|
{
|
|
2297
2621
|
className: "fs__item",
|
|
2298
2622
|
children: [
|
|
2299
|
-
/* @__PURE__ */
|
|
2623
|
+
/* @__PURE__ */ jsx27(
|
|
2300
2624
|
"h3",
|
|
2301
2625
|
{
|
|
2302
2626
|
ref: (el) => {
|
|
@@ -2306,15 +2630,15 @@ var FeatureScroll = ({
|
|
|
2306
2630
|
children: item.title
|
|
2307
2631
|
}
|
|
2308
2632
|
),
|
|
2309
|
-
/* @__PURE__ */
|
|
2310
|
-
/* @__PURE__ */
|
|
2633
|
+
/* @__PURE__ */ jsx27("p", { className: "fs__item-desc", children: item.description }),
|
|
2634
|
+
/* @__PURE__ */ jsxs24(
|
|
2311
2635
|
"a",
|
|
2312
2636
|
{
|
|
2313
2637
|
href: item.link,
|
|
2314
2638
|
className: "fs__item-link",
|
|
2315
2639
|
children: [
|
|
2316
|
-
/* @__PURE__ */
|
|
2317
|
-
/* @__PURE__ */
|
|
2640
|
+
/* @__PURE__ */ jsx27("span", { children: item.linkLabel }),
|
|
2641
|
+
/* @__PURE__ */ jsx27(ChevronRight2, {})
|
|
2318
2642
|
]
|
|
2319
2643
|
}
|
|
2320
2644
|
)
|
|
@@ -2323,18 +2647,18 @@ var FeatureScroll = ({
|
|
|
2323
2647
|
i
|
|
2324
2648
|
)) })
|
|
2325
2649
|
] }),
|
|
2326
|
-
/* @__PURE__ */
|
|
2327
|
-
/* @__PURE__ */
|
|
2328
|
-
/* @__PURE__ */
|
|
2329
|
-
/* @__PURE__ */
|
|
2330
|
-
/* @__PURE__ */
|
|
2650
|
+
/* @__PURE__ */ jsx27("div", { className: "fs__mobile-list", children: items.map((item, i) => /* @__PURE__ */ jsxs24("div", { className: "fs__mobile-item", children: [
|
|
2651
|
+
/* @__PURE__ */ jsx27("h3", { className: "fs__item-title", children: item.title }),
|
|
2652
|
+
/* @__PURE__ */ jsx27("div", { className: "fs__mobile-media", children: /* @__PURE__ */ jsx27(MediaRenderer, { item, active: true }) }),
|
|
2653
|
+
/* @__PURE__ */ jsx27("p", { className: "fs__item-desc", children: item.description }),
|
|
2654
|
+
/* @__PURE__ */ jsxs24(
|
|
2331
2655
|
"a",
|
|
2332
2656
|
{
|
|
2333
2657
|
href: item.link,
|
|
2334
2658
|
className: "fs__item-link",
|
|
2335
2659
|
children: [
|
|
2336
|
-
/* @__PURE__ */
|
|
2337
|
-
/* @__PURE__ */
|
|
2660
|
+
/* @__PURE__ */ jsx27("span", { children: item.linkLabel }),
|
|
2661
|
+
/* @__PURE__ */ jsx27(ChevronRight2, {})
|
|
2338
2662
|
]
|
|
2339
2663
|
}
|
|
2340
2664
|
)
|
|
@@ -2343,8 +2667,8 @@ var FeatureScroll = ({
|
|
|
2343
2667
|
};
|
|
2344
2668
|
|
|
2345
2669
|
// templates/StickyStackedCards/StickyStackedCards.tsx
|
|
2346
|
-
import { useEffect as
|
|
2347
|
-
import { jsx as
|
|
2670
|
+
import { useEffect as useEffect7, useRef as useRef8 } from "react";
|
|
2671
|
+
import { jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2348
2672
|
var PLACEHOLDER_IMAGE = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/69b9309379ac08e59ca8210a_1f3f555da9a5cbb13a6fe1bf0d5fe1b6_placeholder-image.webp";
|
|
2349
2673
|
var STEPS_DATA = [
|
|
2350
2674
|
{
|
|
@@ -2373,8 +2697,8 @@ var StickyStackedCards = ({
|
|
|
2373
2697
|
className,
|
|
2374
2698
|
...props
|
|
2375
2699
|
}) => {
|
|
2376
|
-
const cardRefs =
|
|
2377
|
-
|
|
2700
|
+
const cardRefs = useRef8([]);
|
|
2701
|
+
useEffect7(() => {
|
|
2378
2702
|
if (typeof window === "undefined") return;
|
|
2379
2703
|
let rafId = 0;
|
|
2380
2704
|
const update = () => {
|
|
@@ -2408,14 +2732,14 @@ var StickyStackedCards = ({
|
|
|
2408
2732
|
cancelAnimationFrame(rafId);
|
|
2409
2733
|
};
|
|
2410
2734
|
}, [items.length]);
|
|
2411
|
-
return /* @__PURE__ */
|
|
2735
|
+
return /* @__PURE__ */ jsx28(
|
|
2412
2736
|
"section",
|
|
2413
2737
|
{
|
|
2414
2738
|
className: ["ssc", className].filter(Boolean).join(" "),
|
|
2415
2739
|
...props,
|
|
2416
|
-
children: /* @__PURE__ */
|
|
2417
|
-
/* @__PURE__ */
|
|
2418
|
-
/* @__PURE__ */
|
|
2740
|
+
children: /* @__PURE__ */ jsxs25("div", { className: "ssc__inner", children: [
|
|
2741
|
+
/* @__PURE__ */ jsx28("h2", { className: "ssc__header", children: header }),
|
|
2742
|
+
/* @__PURE__ */ jsx28("div", { className: "ssc__track", children: items.map((item, i) => /* @__PURE__ */ jsxs25(
|
|
2419
2743
|
"div",
|
|
2420
2744
|
{
|
|
2421
2745
|
ref: (el) => {
|
|
@@ -2441,11 +2765,11 @@ var StickyStackedCards = ({
|
|
|
2441
2765
|
top: `calc(var(--ssc-sticky-top) + ${i} * var(--ssc-peek-offset))`
|
|
2442
2766
|
},
|
|
2443
2767
|
children: [
|
|
2444
|
-
/* @__PURE__ */
|
|
2445
|
-
/* @__PURE__ */
|
|
2446
|
-
/* @__PURE__ */
|
|
2768
|
+
/* @__PURE__ */ jsxs25("div", { className: "ssc__card-content", children: [
|
|
2769
|
+
/* @__PURE__ */ jsx28("h3", { className: "ssc__card-title", children: item.title }),
|
|
2770
|
+
/* @__PURE__ */ jsx28("p", { className: "ssc__card-desc", children: item.description })
|
|
2447
2771
|
] }),
|
|
2448
|
-
/* @__PURE__ */
|
|
2772
|
+
/* @__PURE__ */ jsx28("div", { className: "ssc__card-image", children: /* @__PURE__ */ jsx28(
|
|
2449
2773
|
"img",
|
|
2450
2774
|
{
|
|
2451
2775
|
src: item.imageUrl,
|
|
@@ -2463,7 +2787,7 @@ var StickyStackedCards = ({
|
|
|
2463
2787
|
};
|
|
2464
2788
|
|
|
2465
2789
|
// templates/CTABanner/CTABanner.tsx
|
|
2466
|
-
import { useRef as
|
|
2790
|
+
import { useRef as useRef9 } from "react";
|
|
2467
2791
|
import {
|
|
2468
2792
|
motion,
|
|
2469
2793
|
useScroll,
|
|
@@ -2471,7 +2795,7 @@ import {
|
|
|
2471
2795
|
useTransform,
|
|
2472
2796
|
useMotionTemplate
|
|
2473
2797
|
} from "framer-motion";
|
|
2474
|
-
import { jsx as
|
|
2798
|
+
import { jsx as jsx29, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2475
2799
|
var ENTRANCE = {
|
|
2476
2800
|
near: 80,
|
|
2477
2801
|
mid: 130,
|
|
@@ -2717,7 +3041,7 @@ var CTABanner = ({
|
|
|
2717
3041
|
...props
|
|
2718
3042
|
}) => {
|
|
2719
3043
|
const resolvedAvatars = avatars ?? (variant === "compact" ? COMPACT_AVATAR_DATA : AVATAR_DATA);
|
|
2720
|
-
const sectionRef =
|
|
3044
|
+
const sectionRef = useRef9(null);
|
|
2721
3045
|
const { scrollYProgress } = useScroll({
|
|
2722
3046
|
target: sectionRef,
|
|
2723
3047
|
offset: ["start end", "end start"]
|
|
@@ -2735,14 +3059,14 @@ var CTABanner = ({
|
|
|
2735
3059
|
const compactXValues = useCompactAvatarXValues(smooth);
|
|
2736
3060
|
const avatarYValues = variant === "compact" ? compactYValues : standardYValues;
|
|
2737
3061
|
const avatarXValues = variant === "compact" ? compactXValues : standardXValues;
|
|
2738
|
-
return /* @__PURE__ */
|
|
3062
|
+
return /* @__PURE__ */ jsxs26(
|
|
2739
3063
|
"section",
|
|
2740
3064
|
{
|
|
2741
3065
|
ref: sectionRef,
|
|
2742
3066
|
className: ["ctab", variant === "compact" ? "ctab--compact" : "", className].filter(Boolean).join(" "),
|
|
2743
3067
|
...props,
|
|
2744
3068
|
children: [
|
|
2745
|
-
/* @__PURE__ */
|
|
3069
|
+
/* @__PURE__ */ jsx29(
|
|
2746
3070
|
motion.div,
|
|
2747
3071
|
{
|
|
2748
3072
|
className: "ctab__grid",
|
|
@@ -2750,7 +3074,7 @@ var CTABanner = ({
|
|
|
2750
3074
|
"aria-hidden": "true"
|
|
2751
3075
|
}
|
|
2752
3076
|
),
|
|
2753
|
-
/* @__PURE__ */
|
|
3077
|
+
/* @__PURE__ */ jsx29("div", { className: "ctab__inner", children: /* @__PURE__ */ jsxs26("div", { className: "ctab__stage", children: [
|
|
2754
3078
|
resolvedAvatars.map((avatar, index) => {
|
|
2755
3079
|
const posStyle = {};
|
|
2756
3080
|
if (avatar.desktopPos.left) posStyle["--av-d-left"] = avatar.desktopPos.left;
|
|
@@ -2759,7 +3083,7 @@ var CTABanner = ({
|
|
|
2759
3083
|
if (avatar.mobilePos?.left) posStyle["--av-m-left"] = avatar.mobilePos.left;
|
|
2760
3084
|
if (avatar.mobilePos?.right) posStyle["--av-m-right"] = avatar.mobilePos.right;
|
|
2761
3085
|
if (avatar.mobilePos?.top) posStyle["--av-m-top"] = avatar.mobilePos.top;
|
|
2762
|
-
return /* @__PURE__ */
|
|
3086
|
+
return /* @__PURE__ */ jsx29(
|
|
2763
3087
|
motion.div,
|
|
2764
3088
|
{
|
|
2765
3089
|
className: [
|
|
@@ -2773,7 +3097,7 @@ var CTABanner = ({
|
|
|
2773
3097
|
opacity: avatarOpacity,
|
|
2774
3098
|
filter: avatarFilter
|
|
2775
3099
|
},
|
|
2776
|
-
children: /* @__PURE__ */
|
|
3100
|
+
children: /* @__PURE__ */ jsx29(
|
|
2777
3101
|
"img",
|
|
2778
3102
|
{
|
|
2779
3103
|
src: avatar.imageUrl,
|
|
@@ -2786,14 +3110,14 @@ var CTABanner = ({
|
|
|
2786
3110
|
avatar.id
|
|
2787
3111
|
);
|
|
2788
3112
|
}),
|
|
2789
|
-
/* @__PURE__ */
|
|
3113
|
+
/* @__PURE__ */ jsxs26(
|
|
2790
3114
|
motion.div,
|
|
2791
3115
|
{
|
|
2792
3116
|
className: "ctab__hero",
|
|
2793
3117
|
style: { y: heroY, opacity: heroOpacity },
|
|
2794
3118
|
children: [
|
|
2795
|
-
/* @__PURE__ */
|
|
2796
|
-
/* @__PURE__ */
|
|
3119
|
+
/* @__PURE__ */ jsx29("h2", { className: "ctab__headline", children: headline }),
|
|
3120
|
+
/* @__PURE__ */ jsx29("a", { href: ctaHref, children: /* @__PURE__ */ jsx29(Button, { colorScheme: "black", variant: "primary", label: ctaLabel }) })
|
|
2797
3121
|
]
|
|
2798
3122
|
}
|
|
2799
3123
|
)
|
|
@@ -2804,14 +3128,14 @@ var CTABanner = ({
|
|
|
2804
3128
|
};
|
|
2805
3129
|
|
|
2806
3130
|
// components/Navbar/Navbar.tsx
|
|
2807
|
-
import { useRef as
|
|
3131
|
+
import { useRef as useRef10, useState as useState11, useEffect as useEffect8, useCallback as useCallback2 } from "react";
|
|
2808
3132
|
import { motion as motion2, AnimatePresence } from "framer-motion";
|
|
2809
3133
|
|
|
2810
3134
|
// assets/icon-globe.svg
|
|
2811
3135
|
var icon_globe_default = "./icon-globe-S54WYYEK.svg";
|
|
2812
3136
|
|
|
2813
3137
|
// components/Navbar/Navbar.tsx
|
|
2814
|
-
import { jsx as
|
|
3138
|
+
import { jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
2815
3139
|
var EASE_OUT_EXPO = [0.16, 1, 0.3, 1];
|
|
2816
3140
|
var dropdownVariants = {
|
|
2817
3141
|
hidden: { opacity: 0, scale: 0.96, y: -8 },
|
|
@@ -2825,7 +3149,7 @@ var accordionVariants = {
|
|
|
2825
3149
|
hidden: { height: 0, opacity: 0 },
|
|
2826
3150
|
visible: { height: "auto", opacity: 1 }
|
|
2827
3151
|
};
|
|
2828
|
-
var ChevronDownIcon3 = ({ className }) => /* @__PURE__ */
|
|
3152
|
+
var ChevronDownIcon3 = ({ className }) => /* @__PURE__ */ jsx30(
|
|
2829
3153
|
"svg",
|
|
2830
3154
|
{
|
|
2831
3155
|
className,
|
|
@@ -2834,7 +3158,7 @@ var ChevronDownIcon3 = ({ className }) => /* @__PURE__ */ jsx29(
|
|
|
2834
3158
|
viewBox: "0 0 14 14",
|
|
2835
3159
|
fill: "none",
|
|
2836
3160
|
"aria-hidden": "true",
|
|
2837
|
-
children: /* @__PURE__ */
|
|
3161
|
+
children: /* @__PURE__ */ jsx30(
|
|
2838
3162
|
"path",
|
|
2839
3163
|
{
|
|
2840
3164
|
d: "M2.625 4.8125L7 9.1875L11.375 4.8125",
|
|
@@ -2846,7 +3170,7 @@ var ChevronDownIcon3 = ({ className }) => /* @__PURE__ */ jsx29(
|
|
|
2846
3170
|
)
|
|
2847
3171
|
}
|
|
2848
3172
|
);
|
|
2849
|
-
var ArrowRightIcon = () => /* @__PURE__ */
|
|
3173
|
+
var ArrowRightIcon = () => /* @__PURE__ */ jsx30("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx30(
|
|
2850
3174
|
"path",
|
|
2851
3175
|
{
|
|
2852
3176
|
d: "M2.625 7H11.375M11.375 7L7.875 3.5M11.375 7L7.875 10.5",
|
|
@@ -2856,7 +3180,7 @@ var ArrowRightIcon = () => /* @__PURE__ */ jsx29("svg", { width: "14", height: "
|
|
|
2856
3180
|
strokeLinejoin: "round"
|
|
2857
3181
|
}
|
|
2858
3182
|
) });
|
|
2859
|
-
var ArrowUpRightIcon = () => /* @__PURE__ */
|
|
3183
|
+
var ArrowUpRightIcon = () => /* @__PURE__ */ jsx30("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx30(
|
|
2860
3184
|
"path",
|
|
2861
3185
|
{
|
|
2862
3186
|
d: "M4.5 11.5L11.5 4.5M11.5 4.5H5.5M11.5 4.5V10.5",
|
|
@@ -2866,7 +3190,7 @@ var ArrowUpRightIcon = () => /* @__PURE__ */ jsx29("svg", { width: "16", height:
|
|
|
2866
3190
|
strokeLinejoin: "round"
|
|
2867
3191
|
}
|
|
2868
3192
|
) });
|
|
2869
|
-
var BarsIcon = () => /* @__PURE__ */
|
|
3193
|
+
var BarsIcon = () => /* @__PURE__ */ jsx30("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx30(
|
|
2870
3194
|
"path",
|
|
2871
3195
|
{
|
|
2872
3196
|
d: "M2.5 5H17.5M2.5 10H17.5M2.5 15H17.5",
|
|
@@ -2875,7 +3199,7 @@ var BarsIcon = () => /* @__PURE__ */ jsx29("svg", { width: "20", height: "20", v
|
|
|
2875
3199
|
strokeLinecap: "round"
|
|
2876
3200
|
}
|
|
2877
3201
|
) });
|
|
2878
|
-
var XMarkIcon2 = () => /* @__PURE__ */
|
|
3202
|
+
var XMarkIcon2 = () => /* @__PURE__ */ jsx30("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx30(
|
|
2879
3203
|
"path",
|
|
2880
3204
|
{
|
|
2881
3205
|
d: "M15 5L5 15M5 5L15 15",
|
|
@@ -2884,7 +3208,7 @@ var XMarkIcon2 = () => /* @__PURE__ */ jsx29("svg", { width: "20", height: "20",
|
|
|
2884
3208
|
strokeLinecap: "round"
|
|
2885
3209
|
}
|
|
2886
3210
|
) });
|
|
2887
|
-
var ChevronLeftIcon = ({ className }) => /* @__PURE__ */
|
|
3211
|
+
var ChevronLeftIcon = ({ className }) => /* @__PURE__ */ jsx30(
|
|
2888
3212
|
"svg",
|
|
2889
3213
|
{
|
|
2890
3214
|
className,
|
|
@@ -2893,7 +3217,7 @@ var ChevronLeftIcon = ({ className }) => /* @__PURE__ */ jsx29(
|
|
|
2893
3217
|
viewBox: "0 0 24 24",
|
|
2894
3218
|
fill: "none",
|
|
2895
3219
|
"aria-hidden": "true",
|
|
2896
|
-
children: /* @__PURE__ */
|
|
3220
|
+
children: /* @__PURE__ */ jsx30(
|
|
2897
3221
|
"path",
|
|
2898
3222
|
{
|
|
2899
3223
|
d: "M15 18L9 12L15 6",
|
|
@@ -2905,11 +3229,11 @@ var ChevronLeftIcon = ({ className }) => /* @__PURE__ */ jsx29(
|
|
|
2905
3229
|
)
|
|
2906
3230
|
}
|
|
2907
3231
|
);
|
|
2908
|
-
var GlobeIcon = ({ className }) => /* @__PURE__ */
|
|
3232
|
+
var GlobeIcon = ({ className }) => /* @__PURE__ */ jsx30("img", { src: icon_globe_default, alt: "", "aria-hidden": "true", width: "20", height: "20", className });
|
|
2909
3233
|
var DropdownPanel = ({ item, onMouseEnter, onMouseLeave }) => {
|
|
2910
3234
|
const { dropdown } = item;
|
|
2911
3235
|
if (!dropdown) return null;
|
|
2912
|
-
return /* @__PURE__ */
|
|
3236
|
+
return /* @__PURE__ */ jsx30(
|
|
2913
3237
|
motion2.div,
|
|
2914
3238
|
{
|
|
2915
3239
|
className: "navbar__dropdown",
|
|
@@ -2920,10 +3244,10 @@ var DropdownPanel = ({ item, onMouseEnter, onMouseLeave }) => {
|
|
|
2920
3244
|
transition: { duration: 0.18, ease: EASE_OUT_EXPO },
|
|
2921
3245
|
onMouseEnter,
|
|
2922
3246
|
onMouseLeave,
|
|
2923
|
-
children: /* @__PURE__ */
|
|
2924
|
-
/* @__PURE__ */
|
|
2925
|
-
/* @__PURE__ */
|
|
2926
|
-
section.items.map((link) => /* @__PURE__ */
|
|
3247
|
+
children: /* @__PURE__ */ jsxs27("div", { className: "navbar__dropdown-inner", children: [
|
|
3248
|
+
/* @__PURE__ */ jsx30("div", { className: "navbar__dropdown-left", children: dropdown.columns.map((col, colIdx) => /* @__PURE__ */ jsx30("div", { className: "navbar__dropdown-col", children: col.sections.map((section) => /* @__PURE__ */ jsxs27("div", { className: "navbar__dropdown-col-list", children: [
|
|
3249
|
+
/* @__PURE__ */ jsx30("p", { className: "navbar__dropdown-col-title", children: section.title }),
|
|
3250
|
+
section.items.map((link) => /* @__PURE__ */ jsxs27(
|
|
2927
3251
|
"a",
|
|
2928
3252
|
{
|
|
2929
3253
|
href: link.href,
|
|
@@ -2932,24 +3256,24 @@ var DropdownPanel = ({ item, onMouseEnter, onMouseLeave }) => {
|
|
|
2932
3256
|
rel: link.external ? "noopener noreferrer" : void 0,
|
|
2933
3257
|
children: [
|
|
2934
3258
|
link.label,
|
|
2935
|
-
link.external ? /* @__PURE__ */
|
|
3259
|
+
link.external ? /* @__PURE__ */ jsx30(ArrowUpRightIcon, {}) : /* @__PURE__ */ jsx30(ArrowRightIcon, {})
|
|
2936
3260
|
]
|
|
2937
3261
|
},
|
|
2938
3262
|
link.href
|
|
2939
3263
|
))
|
|
2940
3264
|
] }, section.title)) }, colIdx)) }),
|
|
2941
|
-
dropdown.feature && /* @__PURE__ */
|
|
3265
|
+
dropdown.feature && /* @__PURE__ */ jsx30("div", { className: "navbar__dropdown-right", children: /* @__PURE__ */ jsx30(FeatureCard, { feature: dropdown.feature }) })
|
|
2942
3266
|
] })
|
|
2943
3267
|
}
|
|
2944
3268
|
);
|
|
2945
3269
|
};
|
|
2946
|
-
var FeatureCard = ({ feature, mobile }) => /* @__PURE__ */
|
|
3270
|
+
var FeatureCard = ({ feature, mobile }) => /* @__PURE__ */ jsxs27(
|
|
2947
3271
|
"div",
|
|
2948
3272
|
{
|
|
2949
3273
|
className: mobile ? "navbar__drawer-feature" : "navbar__dropdown-feature",
|
|
2950
3274
|
style: feature.backgroundImageUrl ? { backgroundImage: `url(${feature.backgroundImageUrl})` } : void 0,
|
|
2951
3275
|
children: [
|
|
2952
|
-
feature.backgroundImageUrl && /* @__PURE__ */
|
|
3276
|
+
feature.backgroundImageUrl && /* @__PURE__ */ jsx30(
|
|
2953
3277
|
"img",
|
|
2954
3278
|
{
|
|
2955
3279
|
src: feature.backgroundImageUrl,
|
|
@@ -2958,20 +3282,20 @@ var FeatureCard = ({ feature, mobile }) => /* @__PURE__ */ jsxs26(
|
|
|
2958
3282
|
"aria-hidden": "true"
|
|
2959
3283
|
}
|
|
2960
3284
|
),
|
|
2961
|
-
/* @__PURE__ */
|
|
2962
|
-
/* @__PURE__ */
|
|
2963
|
-
/* @__PURE__ */
|
|
2964
|
-
/* @__PURE__ */
|
|
2965
|
-
/* @__PURE__ */
|
|
3285
|
+
/* @__PURE__ */ jsx30("div", { className: mobile ? "navbar__drawer-feature-overlay" : "navbar__dropdown-feature-overlay", "aria-hidden": "true" }),
|
|
3286
|
+
/* @__PURE__ */ jsxs27("div", { className: mobile ? "navbar__drawer-feature-content" : "navbar__dropdown-feature-content", children: [
|
|
3287
|
+
/* @__PURE__ */ jsxs27("div", { children: [
|
|
3288
|
+
/* @__PURE__ */ jsx30("p", { className: mobile ? "navbar__drawer-feature-title" : "navbar__dropdown-feature-title", children: feature.title }),
|
|
3289
|
+
/* @__PURE__ */ jsx30("p", { className: mobile ? "navbar__drawer-feature-desc" : "navbar__dropdown-feature-desc", children: feature.description })
|
|
2966
3290
|
] }),
|
|
2967
|
-
/* @__PURE__ */
|
|
3291
|
+
/* @__PURE__ */ jsxs27(
|
|
2968
3292
|
"a",
|
|
2969
3293
|
{
|
|
2970
3294
|
href: feature.ctaHref,
|
|
2971
3295
|
className: mobile ? "navbar__drawer-feature-cta" : "navbar__dropdown-feature-cta",
|
|
2972
3296
|
children: [
|
|
2973
3297
|
feature.ctaLabel,
|
|
2974
|
-
/* @__PURE__ */
|
|
3298
|
+
/* @__PURE__ */ jsx30(ArrowRightIcon, {})
|
|
2975
3299
|
]
|
|
2976
3300
|
}
|
|
2977
3301
|
)
|
|
@@ -2981,8 +3305,8 @@ var FeatureCard = ({ feature, mobile }) => /* @__PURE__ */ jsxs26(
|
|
|
2981
3305
|
);
|
|
2982
3306
|
var DrawerAccordion = ({ item, isOpen, onToggle }) => {
|
|
2983
3307
|
const { dropdown } = item;
|
|
2984
|
-
return /* @__PURE__ */
|
|
2985
|
-
/* @__PURE__ */
|
|
3308
|
+
return /* @__PURE__ */ jsxs27("div", { className: "navbar__drawer-item", children: [
|
|
3309
|
+
/* @__PURE__ */ jsxs27(
|
|
2986
3310
|
"button",
|
|
2987
3311
|
{
|
|
2988
3312
|
className: `navbar__drawer-trigger ${isOpen ? "navbar__drawer-trigger--open" : ""}`,
|
|
@@ -2990,11 +3314,11 @@ var DrawerAccordion = ({ item, isOpen, onToggle }) => {
|
|
|
2990
3314
|
"aria-expanded": isOpen,
|
|
2991
3315
|
children: [
|
|
2992
3316
|
item.label,
|
|
2993
|
-
/* @__PURE__ */
|
|
3317
|
+
/* @__PURE__ */ jsx30(ChevronDownIcon3, { className: "navbar__drawer-trigger__chevron" })
|
|
2994
3318
|
]
|
|
2995
3319
|
}
|
|
2996
3320
|
),
|
|
2997
|
-
/* @__PURE__ */
|
|
3321
|
+
/* @__PURE__ */ jsx30(AnimatePresence, { initial: false, children: isOpen && dropdown && /* @__PURE__ */ jsx30(
|
|
2998
3322
|
motion2.div,
|
|
2999
3323
|
{
|
|
3000
3324
|
className: "navbar__drawer-panel",
|
|
@@ -3003,10 +3327,10 @@ var DrawerAccordion = ({ item, isOpen, onToggle }) => {
|
|
|
3003
3327
|
animate: "visible",
|
|
3004
3328
|
exit: "hidden",
|
|
3005
3329
|
transition: { duration: 0.22, ease: EASE_OUT_EXPO },
|
|
3006
|
-
children: /* @__PURE__ */
|
|
3007
|
-
/* @__PURE__ */
|
|
3008
|
-
/* @__PURE__ */
|
|
3009
|
-
/* @__PURE__ */
|
|
3330
|
+
children: /* @__PURE__ */ jsxs27("div", { className: "navbar__drawer-panel-inner", children: [
|
|
3331
|
+
/* @__PURE__ */ jsx30("div", { className: "navbar__drawer-panel-cols", children: dropdown.columns.map((col, colIdx) => /* @__PURE__ */ jsx30("div", { className: "navbar__drawer-panel-col", children: col.sections.map((section) => /* @__PURE__ */ jsxs27("div", { className: "navbar__drawer-col-section", children: [
|
|
3332
|
+
/* @__PURE__ */ jsx30("p", { className: "navbar__drawer-col-title", children: section.title }),
|
|
3333
|
+
/* @__PURE__ */ jsx30("div", { className: "navbar__drawer-col-links", children: section.items.map((link) => /* @__PURE__ */ jsx30(
|
|
3010
3334
|
"a",
|
|
3011
3335
|
{
|
|
3012
3336
|
href: link.href,
|
|
@@ -3018,7 +3342,7 @@ var DrawerAccordion = ({ item, isOpen, onToggle }) => {
|
|
|
3018
3342
|
link.href
|
|
3019
3343
|
)) })
|
|
3020
3344
|
] }, section.title)) }, colIdx)) }),
|
|
3021
|
-
dropdown.feature && /* @__PURE__ */
|
|
3345
|
+
dropdown.feature && /* @__PURE__ */ jsx30(FeatureCard, { feature: dropdown.feature, mobile: true })
|
|
3022
3346
|
] })
|
|
3023
3347
|
}
|
|
3024
3348
|
) })
|
|
@@ -3042,24 +3366,24 @@ var Navbar = ({
|
|
|
3042
3366
|
className,
|
|
3043
3367
|
...props
|
|
3044
3368
|
}) => {
|
|
3045
|
-
const [openDropdown, setOpenDropdown] =
|
|
3046
|
-
const [mobileOpen, setMobileOpen] =
|
|
3047
|
-
const [mobileExpanded, setMobileExpanded] =
|
|
3048
|
-
const [scrolled, setScrolled] =
|
|
3049
|
-
const [langDropdownOpen, setLangDropdownOpen] =
|
|
3050
|
-
const [mobileLangOpen, setMobileLangOpen] =
|
|
3051
|
-
const hoverTimeoutRef =
|
|
3052
|
-
const langHoverTimeoutRef =
|
|
3053
|
-
const pillAreaRef =
|
|
3054
|
-
const langBtnRef =
|
|
3369
|
+
const [openDropdown, setOpenDropdown] = useState11(null);
|
|
3370
|
+
const [mobileOpen, setMobileOpen] = useState11(false);
|
|
3371
|
+
const [mobileExpanded, setMobileExpanded] = useState11(null);
|
|
3372
|
+
const [scrolled, setScrolled] = useState11(false);
|
|
3373
|
+
const [langDropdownOpen, setLangDropdownOpen] = useState11(false);
|
|
3374
|
+
const [mobileLangOpen, setMobileLangOpen] = useState11(false);
|
|
3375
|
+
const hoverTimeoutRef = useRef10(null);
|
|
3376
|
+
const langHoverTimeoutRef = useRef10(null);
|
|
3377
|
+
const pillAreaRef = useRef10(null);
|
|
3378
|
+
const langBtnRef = useRef10(null);
|
|
3055
3379
|
const hasLangDropdown = Boolean(languageItems && languageItems.length > 0);
|
|
3056
3380
|
const resolvedLogo = theme === "light" ? logoSrcDark ?? logoSrc : logoSrc;
|
|
3057
|
-
|
|
3381
|
+
useEffect8(() => {
|
|
3058
3382
|
const onScroll = () => setScrolled(window.scrollY > 0);
|
|
3059
3383
|
window.addEventListener("scroll", onScroll, { passive: true });
|
|
3060
3384
|
return () => window.removeEventListener("scroll", onScroll);
|
|
3061
3385
|
}, []);
|
|
3062
|
-
|
|
3386
|
+
useEffect8(() => {
|
|
3063
3387
|
const onKey = (e) => {
|
|
3064
3388
|
if (e.key === "Escape") {
|
|
3065
3389
|
setOpenDropdown(null);
|
|
@@ -3070,16 +3394,16 @@ var Navbar = ({
|
|
|
3070
3394
|
document.addEventListener("keydown", onKey);
|
|
3071
3395
|
return () => document.removeEventListener("keydown", onKey);
|
|
3072
3396
|
}, []);
|
|
3073
|
-
|
|
3397
|
+
useEffect8(() => {
|
|
3074
3398
|
if (!mobileOpen) setMobileLangOpen(false);
|
|
3075
3399
|
}, [mobileOpen]);
|
|
3076
|
-
|
|
3400
|
+
useEffect8(() => {
|
|
3077
3401
|
document.body.style.overflow = mobileOpen ? "hidden" : "";
|
|
3078
3402
|
return () => {
|
|
3079
3403
|
document.body.style.overflow = "";
|
|
3080
3404
|
};
|
|
3081
3405
|
}, [mobileOpen]);
|
|
3082
|
-
|
|
3406
|
+
useEffect8(() => {
|
|
3083
3407
|
if (!openDropdown) return;
|
|
3084
3408
|
const onPointerDown = (e) => {
|
|
3085
3409
|
if (pillAreaRef.current && !pillAreaRef.current.contains(e.target)) {
|
|
@@ -3123,20 +3447,20 @@ var Navbar = ({
|
|
|
3123
3447
|
hoverTimeoutRef.current = setTimeout(() => setOpenDropdown(null), 120);
|
|
3124
3448
|
}, [clearHoverTimeout]);
|
|
3125
3449
|
const activeDropdownItem = navItems.find((item) => item.label === openDropdown);
|
|
3126
|
-
return /* @__PURE__ */
|
|
3450
|
+
return /* @__PURE__ */ jsxs27(
|
|
3127
3451
|
"nav",
|
|
3128
3452
|
{
|
|
3129
3453
|
className: ["navbar", `navbar--${theme}`, scrolled && "navbar--scrolled", mobileOpen && "navbar--menu-open", className].filter(Boolean).join(" "),
|
|
3130
3454
|
...props,
|
|
3131
3455
|
children: [
|
|
3132
|
-
/* @__PURE__ */
|
|
3133
|
-
/* @__PURE__ */
|
|
3134
|
-
/* @__PURE__ */
|
|
3135
|
-
/* @__PURE__ */
|
|
3136
|
-
/* @__PURE__ */
|
|
3456
|
+
/* @__PURE__ */ jsxs27("div", { className: "navbar__bar", children: [
|
|
3457
|
+
/* @__PURE__ */ jsx30("a", { href: logoHref, className: "navbar__logo", "aria-label": "Home", children: /* @__PURE__ */ jsx30("img", { src: resolvedLogo, alt: "Logo" }) }),
|
|
3458
|
+
/* @__PURE__ */ jsx30("div", { className: "navbar__nav-center", ref: pillAreaRef, children: /* @__PURE__ */ jsxs27("div", { className: "navbar__pill", children: [
|
|
3459
|
+
/* @__PURE__ */ jsx30("a", { href: logoHref, className: "navbar__pill-logo", "aria-label": "Home", children: /* @__PURE__ */ jsx30("img", { src: logoSrcDark ?? logoSrc, alt: "Logo" }) }),
|
|
3460
|
+
/* @__PURE__ */ jsxs27("div", { className: "navbar__nav-group", children: [
|
|
3137
3461
|
navItems.map((item) => {
|
|
3138
3462
|
if (item.external) {
|
|
3139
|
-
return /* @__PURE__ */
|
|
3463
|
+
return /* @__PURE__ */ jsxs27(
|
|
3140
3464
|
"a",
|
|
3141
3465
|
{
|
|
3142
3466
|
href: item.href,
|
|
@@ -3145,14 +3469,14 @@ var Navbar = ({
|
|
|
3145
3469
|
rel: "noopener noreferrer",
|
|
3146
3470
|
children: [
|
|
3147
3471
|
item.label,
|
|
3148
|
-
/* @__PURE__ */
|
|
3472
|
+
/* @__PURE__ */ jsx30(ArrowUpRightIcon, {})
|
|
3149
3473
|
]
|
|
3150
3474
|
},
|
|
3151
3475
|
item.label
|
|
3152
3476
|
);
|
|
3153
3477
|
}
|
|
3154
3478
|
if (item.dropdown) {
|
|
3155
|
-
return /* @__PURE__ */
|
|
3479
|
+
return /* @__PURE__ */ jsxs27(
|
|
3156
3480
|
"button",
|
|
3157
3481
|
{
|
|
3158
3482
|
className: [
|
|
@@ -3165,21 +3489,21 @@ var Navbar = ({
|
|
|
3165
3489
|
"aria-haspopup": "true",
|
|
3166
3490
|
children: [
|
|
3167
3491
|
item.label,
|
|
3168
|
-
/* @__PURE__ */
|
|
3492
|
+
/* @__PURE__ */ jsx30(ChevronDownIcon3, { className: "navbar__nav-item__chevron" })
|
|
3169
3493
|
]
|
|
3170
3494
|
},
|
|
3171
3495
|
item.label
|
|
3172
3496
|
);
|
|
3173
3497
|
}
|
|
3174
|
-
return /* @__PURE__ */
|
|
3498
|
+
return /* @__PURE__ */ jsx30("a", { href: item.href, className: "navbar__nav-item", children: item.label }, item.label);
|
|
3175
3499
|
}),
|
|
3176
|
-
languageLabel && /* @__PURE__ */
|
|
3500
|
+
languageLabel && /* @__PURE__ */ jsx30(
|
|
3177
3501
|
"div",
|
|
3178
3502
|
{
|
|
3179
3503
|
className: "navbar__lang-wrapper",
|
|
3180
3504
|
onMouseEnter: hasLangDropdown ? handleLangEnter : void 0,
|
|
3181
3505
|
onMouseLeave: hasLangDropdown ? handleLangLeave : void 0,
|
|
3182
|
-
children: /* @__PURE__ */
|
|
3506
|
+
children: /* @__PURE__ */ jsxs27(
|
|
3183
3507
|
"button",
|
|
3184
3508
|
{
|
|
3185
3509
|
ref: langBtnRef,
|
|
@@ -3192,7 +3516,7 @@ var Navbar = ({
|
|
|
3192
3516
|
"aria-haspopup": hasLangDropdown ? "true" : void 0,
|
|
3193
3517
|
"aria-expanded": hasLangDropdown ? langDropdownOpen : void 0,
|
|
3194
3518
|
children: [
|
|
3195
|
-
/* @__PURE__ */
|
|
3519
|
+
/* @__PURE__ */ jsx30(GlobeIcon, { className: "navbar__lang-globe" }),
|
|
3196
3520
|
languageLabel
|
|
3197
3521
|
]
|
|
3198
3522
|
}
|
|
@@ -3200,12 +3524,12 @@ var Navbar = ({
|
|
|
3200
3524
|
}
|
|
3201
3525
|
)
|
|
3202
3526
|
] }),
|
|
3203
|
-
/* @__PURE__ */
|
|
3204
|
-
loginHref && /* @__PURE__ */
|
|
3205
|
-
ctaHref && /* @__PURE__ */
|
|
3527
|
+
/* @__PURE__ */ jsxs27("div", { className: "navbar__pill-actions", children: [
|
|
3528
|
+
loginHref && /* @__PURE__ */ jsx30("a", { href: loginHref, children: /* @__PURE__ */ jsx30(Button, { colorScheme: "black", variant: "secondary", label: loginLabel }) }),
|
|
3529
|
+
ctaHref && /* @__PURE__ */ jsx30("a", { href: ctaHref, children: /* @__PURE__ */ jsx30(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
|
|
3206
3530
|
] })
|
|
3207
3531
|
] }) }),
|
|
3208
|
-
/* @__PURE__ */
|
|
3532
|
+
/* @__PURE__ */ jsx30(AnimatePresence, { children: openDropdown && activeDropdownItem?.dropdown && /* @__PURE__ */ jsx30(
|
|
3209
3533
|
DropdownPanel,
|
|
3210
3534
|
{
|
|
3211
3535
|
item: activeDropdownItem,
|
|
@@ -3214,7 +3538,7 @@ var Navbar = ({
|
|
|
3214
3538
|
},
|
|
3215
3539
|
"dropdown"
|
|
3216
3540
|
) }),
|
|
3217
|
-
/* @__PURE__ */
|
|
3541
|
+
/* @__PURE__ */ jsx30(AnimatePresence, { children: hasLangDropdown && langDropdownOpen && /* @__PURE__ */ jsx30(
|
|
3218
3542
|
motion2.div,
|
|
3219
3543
|
{
|
|
3220
3544
|
className: "navbar__lang-dropdown",
|
|
@@ -3225,12 +3549,12 @@ var Navbar = ({
|
|
|
3225
3549
|
transition: { duration: 0.18, ease: EASE_OUT_EXPO },
|
|
3226
3550
|
onMouseEnter: clearLangHoverTimeout,
|
|
3227
3551
|
onMouseLeave: handleLangLeave,
|
|
3228
|
-
children: /* @__PURE__ */
|
|
3552
|
+
children: /* @__PURE__ */ jsx30(
|
|
3229
3553
|
"div",
|
|
3230
3554
|
{
|
|
3231
3555
|
className: "navbar__lang-dropdown-grid",
|
|
3232
3556
|
style: { "--lang-rows": Math.ceil(languageItems.length / 3) },
|
|
3233
|
-
children: languageItems.map((lang) => /* @__PURE__ */
|
|
3557
|
+
children: languageItems.map((lang) => /* @__PURE__ */ jsx30(
|
|
3234
3558
|
"button",
|
|
3235
3559
|
{
|
|
3236
3560
|
className: [
|
|
@@ -3246,8 +3570,8 @@ var Navbar = ({
|
|
|
3246
3570
|
)
|
|
3247
3571
|
}
|
|
3248
3572
|
) }),
|
|
3249
|
-
/* @__PURE__ */
|
|
3250
|
-
loginHref && /* @__PURE__ */
|
|
3573
|
+
/* @__PURE__ */ jsxs27("div", { className: "navbar__actions", children: [
|
|
3574
|
+
loginHref && /* @__PURE__ */ jsx30("a", { href: loginHref, className: "navbar__actions-login", children: /* @__PURE__ */ jsx30(
|
|
3251
3575
|
Button,
|
|
3252
3576
|
{
|
|
3253
3577
|
colorScheme: theme === "dark" ? "white" : "black",
|
|
@@ -3255,10 +3579,10 @@ var Navbar = ({
|
|
|
3255
3579
|
label: loginLabel
|
|
3256
3580
|
}
|
|
3257
3581
|
) }),
|
|
3258
|
-
ctaHref && /* @__PURE__ */
|
|
3582
|
+
ctaHref && /* @__PURE__ */ jsx30("a", { href: ctaHref, children: /* @__PURE__ */ jsx30(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
|
|
3259
3583
|
] }),
|
|
3260
|
-
/* @__PURE__ */
|
|
3261
|
-
loginHref && /* @__PURE__ */
|
|
3584
|
+
/* @__PURE__ */ jsxs27("div", { className: "navbar__mobile-actions", children: [
|
|
3585
|
+
loginHref && /* @__PURE__ */ jsx30("a", { href: loginHref, children: /* @__PURE__ */ jsx30(
|
|
3262
3586
|
Button,
|
|
3263
3587
|
{
|
|
3264
3588
|
colorScheme: scrolled || theme === "light" ? "black" : "white",
|
|
@@ -3266,18 +3590,18 @@ var Navbar = ({
|
|
|
3266
3590
|
label: loginLabel
|
|
3267
3591
|
}
|
|
3268
3592
|
) }),
|
|
3269
|
-
/* @__PURE__ */
|
|
3593
|
+
/* @__PURE__ */ jsx30(
|
|
3270
3594
|
"button",
|
|
3271
3595
|
{
|
|
3272
3596
|
className: "navbar__mobile-trigger",
|
|
3273
3597
|
onClick: () => setMobileOpen((o) => !o),
|
|
3274
3598
|
"aria-label": mobileOpen ? "Close navigation menu" : "Open navigation menu",
|
|
3275
|
-
children: mobileOpen ? /* @__PURE__ */
|
|
3599
|
+
children: mobileOpen ? /* @__PURE__ */ jsx30(XMarkIcon2, {}) : /* @__PURE__ */ jsx30(BarsIcon, {})
|
|
3276
3600
|
}
|
|
3277
3601
|
)
|
|
3278
3602
|
] })
|
|
3279
3603
|
] }),
|
|
3280
|
-
/* @__PURE__ */
|
|
3604
|
+
/* @__PURE__ */ jsx30("div", { className: "navbar__drawer-clip", children: /* @__PURE__ */ jsx30(AnimatePresence, { children: mobileOpen && /* @__PURE__ */ jsxs27(
|
|
3281
3605
|
motion2.div,
|
|
3282
3606
|
{
|
|
3283
3607
|
className: "navbar__drawer",
|
|
@@ -3290,10 +3614,10 @@ var Navbar = ({
|
|
|
3290
3614
|
role: "dialog",
|
|
3291
3615
|
"aria-label": "Navigation menu",
|
|
3292
3616
|
children: [
|
|
3293
|
-
/* @__PURE__ */
|
|
3617
|
+
/* @__PURE__ */ jsxs27("nav", { className: "navbar__drawer-nav", children: [
|
|
3294
3618
|
navItems.map((item) => {
|
|
3295
3619
|
if (item.dropdown) {
|
|
3296
|
-
return /* @__PURE__ */
|
|
3620
|
+
return /* @__PURE__ */ jsx30(
|
|
3297
3621
|
DrawerAccordion,
|
|
3298
3622
|
{
|
|
3299
3623
|
item,
|
|
@@ -3305,7 +3629,7 @@ var Navbar = ({
|
|
|
3305
3629
|
item.label
|
|
3306
3630
|
);
|
|
3307
3631
|
}
|
|
3308
|
-
return /* @__PURE__ */
|
|
3632
|
+
return /* @__PURE__ */ jsxs27(
|
|
3309
3633
|
"a",
|
|
3310
3634
|
{
|
|
3311
3635
|
href: item.href,
|
|
@@ -3314,30 +3638,30 @@ var Navbar = ({
|
|
|
3314
3638
|
rel: item.external ? "noopener noreferrer" : void 0,
|
|
3315
3639
|
children: [
|
|
3316
3640
|
item.label,
|
|
3317
|
-
item.external && /* @__PURE__ */
|
|
3641
|
+
item.external && /* @__PURE__ */ jsx30(ArrowUpRightIcon, {})
|
|
3318
3642
|
]
|
|
3319
3643
|
},
|
|
3320
3644
|
item.label
|
|
3321
3645
|
);
|
|
3322
3646
|
}),
|
|
3323
|
-
languageLabel && !hasLangDropdown && /* @__PURE__ */
|
|
3324
|
-
/* @__PURE__ */
|
|
3647
|
+
languageLabel && !hasLangDropdown && /* @__PURE__ */ jsxs27("button", { className: "navbar__drawer-lang", onClick: onLanguageClick, children: [
|
|
3648
|
+
/* @__PURE__ */ jsx30(GlobeIcon, { className: "navbar__lang-globe" }),
|
|
3325
3649
|
languageLabel
|
|
3326
3650
|
] }),
|
|
3327
|
-
languageLabel && hasLangDropdown && /* @__PURE__ */
|
|
3651
|
+
languageLabel && hasLangDropdown && /* @__PURE__ */ jsxs27(
|
|
3328
3652
|
"button",
|
|
3329
3653
|
{
|
|
3330
3654
|
className: "navbar__drawer-lang",
|
|
3331
3655
|
onClick: () => setMobileLangOpen(true),
|
|
3332
3656
|
children: [
|
|
3333
|
-
/* @__PURE__ */
|
|
3657
|
+
/* @__PURE__ */ jsx30(GlobeIcon, { className: "navbar__lang-globe" }),
|
|
3334
3658
|
languageLabel
|
|
3335
3659
|
]
|
|
3336
3660
|
}
|
|
3337
3661
|
)
|
|
3338
3662
|
] }),
|
|
3339
|
-
!mobileLangOpen && /* @__PURE__ */
|
|
3340
|
-
loginHref && /* @__PURE__ */
|
|
3663
|
+
!mobileLangOpen && /* @__PURE__ */ jsxs27("div", { className: "navbar__drawer-footer", children: [
|
|
3664
|
+
loginHref && /* @__PURE__ */ jsx30("a", { href: loginHref, style: { display: "block" }, children: /* @__PURE__ */ jsx30(
|
|
3341
3665
|
Button,
|
|
3342
3666
|
{
|
|
3343
3667
|
colorScheme: "black",
|
|
@@ -3346,7 +3670,7 @@ var Navbar = ({
|
|
|
3346
3670
|
fullWidth: true
|
|
3347
3671
|
}
|
|
3348
3672
|
) }),
|
|
3349
|
-
ctaHref && /* @__PURE__ */
|
|
3673
|
+
ctaHref && /* @__PURE__ */ jsx30("a", { href: ctaHref, style: { display: "block" }, children: /* @__PURE__ */ jsx30(
|
|
3350
3674
|
Button,
|
|
3351
3675
|
{
|
|
3352
3676
|
colorScheme: "coral",
|
|
@@ -3356,7 +3680,7 @@ var Navbar = ({
|
|
|
3356
3680
|
}
|
|
3357
3681
|
) })
|
|
3358
3682
|
] }),
|
|
3359
|
-
/* @__PURE__ */
|
|
3683
|
+
/* @__PURE__ */ jsx30(AnimatePresence, { children: hasLangDropdown && mobileLangOpen && /* @__PURE__ */ jsxs27(
|
|
3360
3684
|
motion2.div,
|
|
3361
3685
|
{
|
|
3362
3686
|
className: "navbar__drawer-lang-panel",
|
|
@@ -3365,16 +3689,16 @@ var Navbar = ({
|
|
|
3365
3689
|
exit: { y: "100%" },
|
|
3366
3690
|
transition: { duration: 0.25, ease: EASE_OUT_EXPO },
|
|
3367
3691
|
children: [
|
|
3368
|
-
/* @__PURE__ */
|
|
3692
|
+
/* @__PURE__ */ jsx30(
|
|
3369
3693
|
"button",
|
|
3370
3694
|
{
|
|
3371
3695
|
className: "navbar__drawer-lang-back",
|
|
3372
3696
|
onClick: () => setMobileLangOpen(false),
|
|
3373
3697
|
"aria-label": "Back to menu",
|
|
3374
|
-
children: /* @__PURE__ */
|
|
3698
|
+
children: /* @__PURE__ */ jsx30(ChevronLeftIcon, {})
|
|
3375
3699
|
}
|
|
3376
3700
|
),
|
|
3377
|
-
/* @__PURE__ */
|
|
3701
|
+
/* @__PURE__ */ jsx30("div", { className: "navbar__drawer-lang-grid", children: languageItems.map((lang) => /* @__PURE__ */ jsx30(
|
|
3378
3702
|
"button",
|
|
3379
3703
|
{
|
|
3380
3704
|
className: [
|
|
@@ -3398,7 +3722,7 @@ var Navbar = ({
|
|
|
3398
3722
|
};
|
|
3399
3723
|
|
|
3400
3724
|
// templates/DayNightTransition/DayNightTransition.tsx
|
|
3401
|
-
import { useEffect as
|
|
3725
|
+
import { useEffect as useEffect9, useLayoutEffect as useLayoutEffect2, useRef as useRef11, useState as useState12 } from "react";
|
|
3402
3726
|
import {
|
|
3403
3727
|
motion as motion3,
|
|
3404
3728
|
useScroll as useScroll2,
|
|
@@ -3481,7 +3805,7 @@ function webflowV2DayClipPercent(t, media) {
|
|
|
3481
3805
|
}
|
|
3482
3806
|
|
|
3483
3807
|
// templates/DayNightTransition/DayNightTransition.tsx
|
|
3484
|
-
import { Fragment as Fragment3, jsx as
|
|
3808
|
+
import { Fragment as Fragment3, jsx as jsx31, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
3485
3809
|
var SPRING2 = { stiffness: 80, damping: 30, restDelta: 1e-3 };
|
|
3486
3810
|
var FADE_START = 0.35;
|
|
3487
3811
|
var FADE_END = 0.65;
|
|
@@ -3513,13 +3837,13 @@ var DayNightTransition = ({
|
|
|
3513
3837
|
className,
|
|
3514
3838
|
...props
|
|
3515
3839
|
}) => {
|
|
3516
|
-
const wrapperRef =
|
|
3517
|
-
const dayWordRef =
|
|
3518
|
-
const [nightMarginStart, setNightMarginStart] =
|
|
3519
|
-
const [nightMarginEnd, setNightMarginEnd] =
|
|
3520
|
-
const [ixMedia, setIxMedia] =
|
|
3840
|
+
const wrapperRef = useRef11(null);
|
|
3841
|
+
const dayWordRef = useRef11(null);
|
|
3842
|
+
const [nightMarginStart, setNightMarginStart] = useState12("0px");
|
|
3843
|
+
const [nightMarginEnd, setNightMarginEnd] = useState12("0px");
|
|
3844
|
+
const [ixMedia, setIxMedia] = useState12("desktop");
|
|
3521
3845
|
const webflowV2 = scrollPreset === "webflow-day-night-v2";
|
|
3522
|
-
|
|
3846
|
+
useEffect9(() => {
|
|
3523
3847
|
const mq = window.matchMedia("(max-width: 991px)");
|
|
3524
3848
|
const sync = () => setIxMedia(mq.matches ? "mobile" : "desktop");
|
|
3525
3849
|
sync();
|
|
@@ -3618,15 +3942,15 @@ var DayNightTransition = ({
|
|
|
3618
3942
|
descriptionLevel === "body-lg" && "dnt--desc-body-lg",
|
|
3619
3943
|
className
|
|
3620
3944
|
].filter(Boolean).join(" ");
|
|
3621
|
-
return /* @__PURE__ */
|
|
3945
|
+
return /* @__PURE__ */ jsxs28(
|
|
3622
3946
|
"div",
|
|
3623
3947
|
{
|
|
3624
3948
|
ref: wrapperRef,
|
|
3625
3949
|
className: rootClass,
|
|
3626
3950
|
...props,
|
|
3627
3951
|
children: [
|
|
3628
|
-
webflowV2 && /* @__PURE__ */
|
|
3629
|
-
/* @__PURE__ */
|
|
3952
|
+
webflowV2 && /* @__PURE__ */ jsxs28("div", { className: "dnt__v2-background-wrapper", "aria-hidden": "true", children: [
|
|
3953
|
+
/* @__PURE__ */ jsx31(
|
|
3630
3954
|
motion3.div,
|
|
3631
3955
|
{
|
|
3632
3956
|
className: "dnt__v2-bg-day trade-day-night_background-day is-alternative",
|
|
@@ -3636,7 +3960,7 @@ var DayNightTransition = ({
|
|
|
3636
3960
|
}
|
|
3637
3961
|
}
|
|
3638
3962
|
),
|
|
3639
|
-
/* @__PURE__ */
|
|
3963
|
+
/* @__PURE__ */ jsx31(
|
|
3640
3964
|
"div",
|
|
3641
3965
|
{
|
|
3642
3966
|
className: "dnt__v2-bg-night trade-day-night_background-night is-alternative",
|
|
@@ -3644,9 +3968,9 @@ var DayNightTransition = ({
|
|
|
3644
3968
|
}
|
|
3645
3969
|
)
|
|
3646
3970
|
] }),
|
|
3647
|
-
/* @__PURE__ */
|
|
3648
|
-
!webflowV2 && /* @__PURE__ */
|
|
3649
|
-
/* @__PURE__ */
|
|
3971
|
+
/* @__PURE__ */ jsxs28("div", { className: webflowV2 ? "dnt__sticky dnt__sticky--webflow-v2" : "dnt__sticky", children: [
|
|
3972
|
+
!webflowV2 && /* @__PURE__ */ jsxs28(Fragment3, { children: [
|
|
3973
|
+
/* @__PURE__ */ jsx31(
|
|
3650
3974
|
"img",
|
|
3651
3975
|
{
|
|
3652
3976
|
className: "dnt__bg dnt__bg--day",
|
|
@@ -3656,7 +3980,7 @@ var DayNightTransition = ({
|
|
|
3656
3980
|
draggable: false
|
|
3657
3981
|
}
|
|
3658
3982
|
),
|
|
3659
|
-
/* @__PURE__ */
|
|
3983
|
+
/* @__PURE__ */ jsx31(
|
|
3660
3984
|
motion3.img,
|
|
3661
3985
|
{
|
|
3662
3986
|
className: "dnt__bg dnt__bg--night",
|
|
@@ -3668,17 +3992,17 @@ var DayNightTransition = ({
|
|
|
3668
3992
|
}
|
|
3669
3993
|
)
|
|
3670
3994
|
] }),
|
|
3671
|
-
/* @__PURE__ */
|
|
3672
|
-
useInlineHeadline && inlineDayNightHeadline ? /* @__PURE__ */
|
|
3995
|
+
/* @__PURE__ */ jsx31("div", { className: "dnt__content", children: /* @__PURE__ */ jsx31("div", { className: "dnt__inner", children: webflowV2 ? /* @__PURE__ */ jsxs28("div", { className: "dnt__text-wrap", children: [
|
|
3996
|
+
useInlineHeadline && inlineDayNightHeadline ? /* @__PURE__ */ jsxs28(
|
|
3673
3997
|
MotionHeadline,
|
|
3674
3998
|
{
|
|
3675
3999
|
className: "dnt__headline dnt__headline--inline-day-night",
|
|
3676
4000
|
style: { color: v2TitleColor },
|
|
3677
4001
|
"aria-label": `${inlineDayNightHeadline.prefix}${inlineDayNightHeadline.dayWord} / ${inlineDayNightHeadline.prefix}${inlineDayNightHeadline.nightWord}`,
|
|
3678
4002
|
children: [
|
|
3679
|
-
/* @__PURE__ */
|
|
3680
|
-
/* @__PURE__ */
|
|
3681
|
-
/* @__PURE__ */
|
|
4003
|
+
/* @__PURE__ */ jsx31("span", { className: "dnt__headline-prefix", children: inlineDayNightHeadline.prefix }),
|
|
4004
|
+
/* @__PURE__ */ jsxs28("span", { className: "dnt__headline-pair", children: [
|
|
4005
|
+
/* @__PURE__ */ jsx31(
|
|
3682
4006
|
motion3.span,
|
|
3683
4007
|
{
|
|
3684
4008
|
ref: dayWordRef,
|
|
@@ -3687,7 +4011,7 @@ var DayNightTransition = ({
|
|
|
3687
4011
|
children: inlineDayNightHeadline.dayWord
|
|
3688
4012
|
}
|
|
3689
4013
|
),
|
|
3690
|
-
/* @__PURE__ */
|
|
4014
|
+
/* @__PURE__ */ jsx31(
|
|
3691
4015
|
motion3.span,
|
|
3692
4016
|
{
|
|
3693
4017
|
className: "dnt__headline-wnight",
|
|
@@ -3702,8 +4026,8 @@ var DayNightTransition = ({
|
|
|
3702
4026
|
] })
|
|
3703
4027
|
]
|
|
3704
4028
|
}
|
|
3705
|
-
) : /* @__PURE__ */
|
|
3706
|
-
/* @__PURE__ */
|
|
4029
|
+
) : /* @__PURE__ */ jsxs28("div", { className: "dnt__crossfade-wrap", children: [
|
|
4030
|
+
/* @__PURE__ */ jsx31(
|
|
3707
4031
|
MotionHeadline,
|
|
3708
4032
|
{
|
|
3709
4033
|
className: "dnt__headline",
|
|
@@ -3711,7 +4035,7 @@ var DayNightTransition = ({
|
|
|
3711
4035
|
children: dayHeadline
|
|
3712
4036
|
}
|
|
3713
4037
|
),
|
|
3714
|
-
/* @__PURE__ */
|
|
4038
|
+
/* @__PURE__ */ jsx31(
|
|
3715
4039
|
MotionHeadline,
|
|
3716
4040
|
{
|
|
3717
4041
|
className: "dnt__headline",
|
|
@@ -3721,8 +4045,8 @@ var DayNightTransition = ({
|
|
|
3721
4045
|
}
|
|
3722
4046
|
)
|
|
3723
4047
|
] }),
|
|
3724
|
-
hasDescription && /* @__PURE__ */
|
|
3725
|
-
/* @__PURE__ */
|
|
4048
|
+
hasDescription && /* @__PURE__ */ jsxs28("div", { className: "dnt__crossfade-wrap", children: [
|
|
4049
|
+
/* @__PURE__ */ jsx31(
|
|
3726
4050
|
motion3.p,
|
|
3727
4051
|
{
|
|
3728
4052
|
className: "dnt__description",
|
|
@@ -3733,7 +4057,7 @@ var DayNightTransition = ({
|
|
|
3733
4057
|
children: dayDescription ?? ""
|
|
3734
4058
|
}
|
|
3735
4059
|
),
|
|
3736
|
-
/* @__PURE__ */
|
|
4060
|
+
/* @__PURE__ */ jsx31(
|
|
3737
4061
|
motion3.p,
|
|
3738
4062
|
{
|
|
3739
4063
|
className: "dnt__description",
|
|
@@ -3746,22 +4070,22 @@ var DayNightTransition = ({
|
|
|
3746
4070
|
}
|
|
3747
4071
|
)
|
|
3748
4072
|
] }),
|
|
3749
|
-
!hideCta && /* @__PURE__ */
|
|
3750
|
-
] }) : /* @__PURE__ */
|
|
4073
|
+
!hideCta && /* @__PURE__ */ jsx31("a", { href: ctaHref, className: "dnt__btn", children: ctaLabel })
|
|
4074
|
+
] }) : /* @__PURE__ */ jsxs28(
|
|
3751
4075
|
motion3.div,
|
|
3752
4076
|
{
|
|
3753
4077
|
className: "dnt__text-wrap",
|
|
3754
4078
|
style: { color: textColor },
|
|
3755
4079
|
children: [
|
|
3756
|
-
useInlineHeadline && inlineDayNightHeadline ? /* @__PURE__ */
|
|
4080
|
+
useInlineHeadline && inlineDayNightHeadline ? /* @__PURE__ */ jsxs28(
|
|
3757
4081
|
MotionHeadline,
|
|
3758
4082
|
{
|
|
3759
4083
|
className: "dnt__headline dnt__headline--inline-day-night",
|
|
3760
4084
|
"aria-label": `${inlineDayNightHeadline.prefix}${inlineDayNightHeadline.dayWord} / ${inlineDayNightHeadline.prefix}${inlineDayNightHeadline.nightWord}`,
|
|
3761
4085
|
children: [
|
|
3762
|
-
/* @__PURE__ */
|
|
3763
|
-
/* @__PURE__ */
|
|
3764
|
-
/* @__PURE__ */
|
|
4086
|
+
/* @__PURE__ */ jsx31("span", { className: "dnt__headline-prefix", children: inlineDayNightHeadline.prefix }),
|
|
4087
|
+
/* @__PURE__ */ jsxs28("span", { className: "dnt__headline-pair", children: [
|
|
4088
|
+
/* @__PURE__ */ jsx31(
|
|
3765
4089
|
motion3.span,
|
|
3766
4090
|
{
|
|
3767
4091
|
ref: dayWordRef,
|
|
@@ -3770,7 +4094,7 @@ var DayNightTransition = ({
|
|
|
3770
4094
|
children: inlineDayNightHeadline.dayWord
|
|
3771
4095
|
}
|
|
3772
4096
|
),
|
|
3773
|
-
/* @__PURE__ */
|
|
4097
|
+
/* @__PURE__ */ jsx31(
|
|
3774
4098
|
motion3.span,
|
|
3775
4099
|
{
|
|
3776
4100
|
className: "dnt__headline-wnight",
|
|
@@ -3785,8 +4109,8 @@ var DayNightTransition = ({
|
|
|
3785
4109
|
] })
|
|
3786
4110
|
]
|
|
3787
4111
|
}
|
|
3788
|
-
) : /* @__PURE__ */
|
|
3789
|
-
/* @__PURE__ */
|
|
4112
|
+
) : /* @__PURE__ */ jsxs28("div", { className: "dnt__crossfade-wrap", children: [
|
|
4113
|
+
/* @__PURE__ */ jsx31(
|
|
3790
4114
|
MotionHeadline,
|
|
3791
4115
|
{
|
|
3792
4116
|
className: "dnt__headline",
|
|
@@ -3794,7 +4118,7 @@ var DayNightTransition = ({
|
|
|
3794
4118
|
children: dayHeadline
|
|
3795
4119
|
}
|
|
3796
4120
|
),
|
|
3797
|
-
/* @__PURE__ */
|
|
4121
|
+
/* @__PURE__ */ jsx31(
|
|
3798
4122
|
MotionHeadline,
|
|
3799
4123
|
{
|
|
3800
4124
|
className: "dnt__headline",
|
|
@@ -3804,8 +4128,8 @@ var DayNightTransition = ({
|
|
|
3804
4128
|
}
|
|
3805
4129
|
)
|
|
3806
4130
|
] }),
|
|
3807
|
-
hasDescription && /* @__PURE__ */
|
|
3808
|
-
/* @__PURE__ */
|
|
4131
|
+
hasDescription && /* @__PURE__ */ jsxs28("div", { className: "dnt__crossfade-wrap", children: [
|
|
4132
|
+
/* @__PURE__ */ jsx31(
|
|
3809
4133
|
motion3.p,
|
|
3810
4134
|
{
|
|
3811
4135
|
className: "dnt__description",
|
|
@@ -3813,7 +4137,7 @@ var DayNightTransition = ({
|
|
|
3813
4137
|
children: dayDescription ?? ""
|
|
3814
4138
|
}
|
|
3815
4139
|
),
|
|
3816
|
-
/* @__PURE__ */
|
|
4140
|
+
/* @__PURE__ */ jsx31(
|
|
3817
4141
|
motion3.p,
|
|
3818
4142
|
{
|
|
3819
4143
|
className: "dnt__description",
|
|
@@ -3823,7 +4147,7 @@ var DayNightTransition = ({
|
|
|
3823
4147
|
}
|
|
3824
4148
|
)
|
|
3825
4149
|
] }),
|
|
3826
|
-
!hideCta && /* @__PURE__ */
|
|
4150
|
+
!hideCta && /* @__PURE__ */ jsx31("a", { href: ctaHref, className: "dnt__btn", children: ctaLabel })
|
|
3827
4151
|
]
|
|
3828
4152
|
}
|
|
3829
4153
|
) }) })
|
|
@@ -3848,7 +4172,7 @@ var dayNightTransitionV2Preset = {
|
|
|
3848
4172
|
};
|
|
3849
4173
|
|
|
3850
4174
|
// templates/LogoMarquee/LogoMarquee.tsx
|
|
3851
|
-
import { useRef as
|
|
4175
|
+
import { useRef as useRef12 } from "react";
|
|
3852
4176
|
import {
|
|
3853
4177
|
motion as motion4,
|
|
3854
4178
|
useScroll as useScroll3,
|
|
@@ -3856,7 +4180,7 @@ import {
|
|
|
3856
4180
|
useAnimationFrame,
|
|
3857
4181
|
useMotionValue
|
|
3858
4182
|
} from "framer-motion";
|
|
3859
|
-
import { jsx as
|
|
4183
|
+
import { jsx as jsx32, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
3860
4184
|
function modWrap(min, max, v) {
|
|
3861
4185
|
const range = max - min;
|
|
3862
4186
|
return ((v - min) % range + range) % range + min;
|
|
@@ -3913,8 +4237,8 @@ var LogoMarquee = ({
|
|
|
3913
4237
|
const scrollVelocity = useVelocity(scrollY);
|
|
3914
4238
|
const col1Y = useMotionValue(0);
|
|
3915
4239
|
const col2Y = useMotionValue(0);
|
|
3916
|
-
const col1Ref =
|
|
3917
|
-
const col2Ref =
|
|
4240
|
+
const col1Ref = useRef12(null);
|
|
4241
|
+
const col2Ref = useRef12(null);
|
|
3918
4242
|
useAnimationFrame((_, delta) => {
|
|
3919
4243
|
const raw = scrollVelocity.get();
|
|
3920
4244
|
if (Math.abs(raw) < DEADZONE) return;
|
|
@@ -3927,21 +4251,21 @@ var LogoMarquee = ({
|
|
|
3927
4251
|
});
|
|
3928
4252
|
const track1 = [...col1Logos, ...col1Logos];
|
|
3929
4253
|
const track2 = [...col2Logos, ...col2Logos];
|
|
3930
|
-
return /* @__PURE__ */
|
|
4254
|
+
return /* @__PURE__ */ jsx32(
|
|
3931
4255
|
"section",
|
|
3932
4256
|
{
|
|
3933
4257
|
className: ["lm", className].filter(Boolean).join(" "),
|
|
3934
4258
|
...props,
|
|
3935
|
-
children: /* @__PURE__ */
|
|
3936
|
-
/* @__PURE__ */
|
|
3937
|
-
/* @__PURE__ */
|
|
3938
|
-
/* @__PURE__ */
|
|
4259
|
+
children: /* @__PURE__ */ jsxs29("div", { className: "lm__inner", children: [
|
|
4260
|
+
/* @__PURE__ */ jsx32("div", { className: "lm__media", children: /* @__PURE__ */ jsxs29("div", { className: "lm__carousel", children: [
|
|
4261
|
+
/* @__PURE__ */ jsx32("div", { className: "lm__fade lm__fade--top", "aria-hidden": "true" }),
|
|
4262
|
+
/* @__PURE__ */ jsx32(
|
|
3939
4263
|
motion4.div,
|
|
3940
4264
|
{
|
|
3941
4265
|
ref: col1Ref,
|
|
3942
4266
|
className: "lm__col",
|
|
3943
4267
|
style: { y: col1Y },
|
|
3944
|
-
children: track1.map((logo, i) => /* @__PURE__ */
|
|
4268
|
+
children: track1.map((logo, i) => /* @__PURE__ */ jsx32("div", { className: "lm__card", children: /* @__PURE__ */ jsx32("div", { className: "lm__card-img-wrap", children: /* @__PURE__ */ jsx32(
|
|
3945
4269
|
"img",
|
|
3946
4270
|
{
|
|
3947
4271
|
src: logo.url,
|
|
@@ -3952,13 +4276,13 @@ var LogoMarquee = ({
|
|
|
3952
4276
|
) }) }, `c1-${i}`))
|
|
3953
4277
|
}
|
|
3954
4278
|
),
|
|
3955
|
-
/* @__PURE__ */
|
|
4279
|
+
/* @__PURE__ */ jsx32(
|
|
3956
4280
|
motion4.div,
|
|
3957
4281
|
{
|
|
3958
4282
|
ref: col2Ref,
|
|
3959
4283
|
className: "lm__col",
|
|
3960
4284
|
style: { y: col2Y },
|
|
3961
|
-
children: track2.map((logo, i) => /* @__PURE__ */
|
|
4285
|
+
children: track2.map((logo, i) => /* @__PURE__ */ jsx32("div", { className: "lm__card", children: /* @__PURE__ */ jsx32("div", { className: "lm__card-img-wrap", children: /* @__PURE__ */ jsx32(
|
|
3962
4286
|
"img",
|
|
3963
4287
|
{
|
|
3964
4288
|
src: logo.url,
|
|
@@ -3969,17 +4293,17 @@ var LogoMarquee = ({
|
|
|
3969
4293
|
) }) }, `c2-${i}`))
|
|
3970
4294
|
}
|
|
3971
4295
|
),
|
|
3972
|
-
/* @__PURE__ */
|
|
4296
|
+
/* @__PURE__ */ jsx32("div", { className: "lm__fade lm__fade--bottom", "aria-hidden": "true" })
|
|
3973
4297
|
] }) }),
|
|
3974
|
-
/* @__PURE__ */
|
|
3975
|
-
/* @__PURE__ */
|
|
3976
|
-
/* @__PURE__ */
|
|
3977
|
-
/* @__PURE__ */
|
|
3978
|
-
/* @__PURE__ */
|
|
4298
|
+
/* @__PURE__ */ jsxs29("div", { className: "lm__content", children: [
|
|
4299
|
+
/* @__PURE__ */ jsx32("h2", { className: "lm__headline", children: headline }),
|
|
4300
|
+
/* @__PURE__ */ jsxs29("div", { className: "lm__text-group", children: [
|
|
4301
|
+
/* @__PURE__ */ jsx32("p", { className: "lm__body", children: body }),
|
|
4302
|
+
/* @__PURE__ */ jsx32("p", { className: "lm__disclaimer", children: disclaimer })
|
|
3979
4303
|
] }),
|
|
3980
|
-
/* @__PURE__ */
|
|
4304
|
+
/* @__PURE__ */ jsxs29("a", { href: ctaHref, className: "lm__link", children: [
|
|
3981
4305
|
ctaLabel,
|
|
3982
|
-
/* @__PURE__ */
|
|
4306
|
+
/* @__PURE__ */ jsx32("span", { className: "lm__link-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx32("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx32("path", { d: "M3 8H13M13 8L9 4M13 8L9 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
|
|
3983
4307
|
] })
|
|
3984
4308
|
] })
|
|
3985
4309
|
] })
|
|
@@ -4030,7 +4354,7 @@ var appstore_linux_dark_default = "./appstore-linux-dark-RVH7CBM4.svg";
|
|
|
4030
4354
|
var appstore_browser_dark_default = "./appstore-browser-dark-2E6TK6JH.svg";
|
|
4031
4355
|
|
|
4032
4356
|
// primitives/DownloadBadge/DownloadBadge.tsx
|
|
4033
|
-
import { jsx as
|
|
4357
|
+
import { jsx as jsx33 } from "react/jsx-runtime";
|
|
4034
4358
|
var BADGE_ASSETS = {
|
|
4035
4359
|
light: {
|
|
4036
4360
|
googleplay: { src: appstore_googleplay_light_default, alt: "Get it on Google Play" },
|
|
@@ -4059,7 +4383,7 @@ var DownloadBadge = ({
|
|
|
4059
4383
|
...props
|
|
4060
4384
|
}) => {
|
|
4061
4385
|
const { src, alt } = BADGE_ASSETS[colorScheme][platform];
|
|
4062
|
-
return /* @__PURE__ */
|
|
4386
|
+
return /* @__PURE__ */ jsx33(
|
|
4063
4387
|
"a",
|
|
4064
4388
|
{
|
|
4065
4389
|
className: [
|
|
@@ -4072,13 +4396,13 @@ var DownloadBadge = ({
|
|
|
4072
4396
|
target: "_blank",
|
|
4073
4397
|
rel: "noopener noreferrer",
|
|
4074
4398
|
...props,
|
|
4075
|
-
children: /* @__PURE__ */
|
|
4399
|
+
children: /* @__PURE__ */ jsx33("img", { className: "download-badge__img", src, alt })
|
|
4076
4400
|
}
|
|
4077
4401
|
);
|
|
4078
4402
|
};
|
|
4079
4403
|
|
|
4080
4404
|
// templates/Steps/Steps.tsx
|
|
4081
|
-
import { jsx as
|
|
4405
|
+
import { jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
4082
4406
|
var Steps = ({
|
|
4083
4407
|
title,
|
|
4084
4408
|
steps,
|
|
@@ -4090,8 +4414,8 @@ var Steps = ({
|
|
|
4090
4414
|
"steps__container",
|
|
4091
4415
|
imagePosition === "right" ? "steps__container--image-right" : ""
|
|
4092
4416
|
].filter(Boolean).join(" ");
|
|
4093
|
-
return /* @__PURE__ */
|
|
4094
|
-
image && /* @__PURE__ */
|
|
4417
|
+
return /* @__PURE__ */ jsx34("section", { className: "steps", children: /* @__PURE__ */ jsxs30("div", { className: containerClass, children: [
|
|
4418
|
+
image && /* @__PURE__ */ jsx34("div", { className: "steps__image-wrapper", children: /* @__PURE__ */ jsx34(
|
|
4095
4419
|
"img",
|
|
4096
4420
|
{
|
|
4097
4421
|
src: image,
|
|
@@ -4099,13 +4423,13 @@ var Steps = ({
|
|
|
4099
4423
|
className: "steps__image"
|
|
4100
4424
|
}
|
|
4101
4425
|
) }),
|
|
4102
|
-
/* @__PURE__ */
|
|
4103
|
-
/* @__PURE__ */
|
|
4104
|
-
/* @__PURE__ */
|
|
4105
|
-
/* @__PURE__ */
|
|
4106
|
-
/* @__PURE__ */
|
|
4107
|
-
/* @__PURE__ */
|
|
4108
|
-
/* @__PURE__ */
|
|
4426
|
+
/* @__PURE__ */ jsxs30("div", { className: "steps__content", children: [
|
|
4427
|
+
/* @__PURE__ */ jsx34("h2", { className: "steps__title", children: title }),
|
|
4428
|
+
/* @__PURE__ */ jsx34("ol", { className: "steps__list", children: steps.map((step, index) => /* @__PURE__ */ jsx34("li", { className: "steps__item", children: /* @__PURE__ */ jsxs30("div", { className: "steps__item-inner", children: [
|
|
4429
|
+
/* @__PURE__ */ jsx34("span", { className: "steps__number", "aria-hidden": "true", children: index + 1 }),
|
|
4430
|
+
/* @__PURE__ */ jsxs30("div", { className: "steps__item-body", children: [
|
|
4431
|
+
/* @__PURE__ */ jsx34("h3", { className: "steps__item-title", children: step.title }),
|
|
4432
|
+
/* @__PURE__ */ jsx34("p", { className: "steps__item-description", children: step.description })
|
|
4109
4433
|
] })
|
|
4110
4434
|
] }) }, index)) })
|
|
4111
4435
|
] })
|
|
@@ -4113,7 +4437,7 @@ var Steps = ({
|
|
|
4113
4437
|
};
|
|
4114
4438
|
|
|
4115
4439
|
// templates/DownloadBanner/DownloadBanner.tsx
|
|
4116
|
-
import { jsx as
|
|
4440
|
+
import { jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
4117
4441
|
var DownloadBanner = ({
|
|
4118
4442
|
style = "light-2",
|
|
4119
4443
|
qrCodeImage,
|
|
@@ -4138,9 +4462,9 @@ var DownloadBanner = ({
|
|
|
4138
4462
|
disclaimer
|
|
4139
4463
|
}) => {
|
|
4140
4464
|
const colorScheme = style === "dark" ? "dark" : "light";
|
|
4141
|
-
return /* @__PURE__ */
|
|
4142
|
-
/* @__PURE__ */
|
|
4143
|
-
qrCodeImage && /* @__PURE__ */
|
|
4465
|
+
return /* @__PURE__ */ jsx35("section", { className: `db-section db-section--${style}`, children: /* @__PURE__ */ jsx35("div", { className: "db-container", children: /* @__PURE__ */ jsxs31("div", { className: "db-card", children: [
|
|
4466
|
+
/* @__PURE__ */ jsxs31("div", { className: "db-qr-block", children: [
|
|
4467
|
+
qrCodeImage && /* @__PURE__ */ jsx35(
|
|
4144
4468
|
"img",
|
|
4145
4469
|
{
|
|
4146
4470
|
className: "db-qr-image",
|
|
@@ -4148,36 +4472,36 @@ var DownloadBanner = ({
|
|
|
4148
4472
|
alt: qrCodeAlt
|
|
4149
4473
|
}
|
|
4150
4474
|
),
|
|
4151
|
-
/* @__PURE__ */
|
|
4152
|
-
/* @__PURE__ */
|
|
4153
|
-
/* @__PURE__ */
|
|
4154
|
-
/* @__PURE__ */
|
|
4155
|
-
disclaimer && /* @__PURE__ */
|
|
4475
|
+
/* @__PURE__ */ jsxs31("div", { className: "db-qr-text", children: [
|
|
4476
|
+
/* @__PURE__ */ jsx35("span", { className: "db-qr-text__title db-qr-text__title--desktop", children: qrTitle }),
|
|
4477
|
+
/* @__PURE__ */ jsx35("h2", { className: "db-qr-text__subtitle db-qr-text__subtitle--desktop", children: qrSubtitle }),
|
|
4478
|
+
/* @__PURE__ */ jsx35("span", { className: "db-qr-text__title db-qr-text__title--mobile", children: mobileTitle }),
|
|
4479
|
+
disclaimer && /* @__PURE__ */ jsx35("span", { className: "db-disclaimer", children: disclaimer })
|
|
4156
4480
|
] })
|
|
4157
4481
|
] }),
|
|
4158
|
-
/* @__PURE__ */
|
|
4159
|
-
showGooglePlay && /* @__PURE__ */
|
|
4160
|
-
showAppGallery && /* @__PURE__ */
|
|
4161
|
-
showMacOS && /* @__PURE__ */
|
|
4162
|
-
showWindows && /* @__PURE__ */
|
|
4163
|
-
showLinux && /* @__PURE__ */
|
|
4164
|
-
showAppStore && /* @__PURE__ */
|
|
4165
|
-
showWeb && /* @__PURE__ */
|
|
4482
|
+
/* @__PURE__ */ jsxs31("div", { className: "db-badges", children: [
|
|
4483
|
+
showGooglePlay && /* @__PURE__ */ jsx35(DownloadBadge, { platform: "googleplay", colorScheme, href: googlePlayHref }),
|
|
4484
|
+
showAppGallery && /* @__PURE__ */ jsx35(DownloadBadge, { platform: "appgallery", colorScheme, href: appGalleryHref }),
|
|
4485
|
+
showMacOS && /* @__PURE__ */ jsx35(DownloadBadge, { platform: "macos", colorScheme, href: macOSHref }),
|
|
4486
|
+
showWindows && /* @__PURE__ */ jsx35(DownloadBadge, { platform: "windows", colorScheme, href: windowsHref }),
|
|
4487
|
+
showLinux && /* @__PURE__ */ jsx35(DownloadBadge, { platform: "linux", colorScheme, href: linuxHref }),
|
|
4488
|
+
showAppStore && /* @__PURE__ */ jsx35(DownloadBadge, { platform: "appstore", colorScheme, href: appStoreHref }),
|
|
4489
|
+
showWeb && /* @__PURE__ */ jsx35(DownloadBadge, { platform: "web", colorScheme, href: webHref })
|
|
4166
4490
|
] })
|
|
4167
4491
|
] }) }) });
|
|
4168
4492
|
};
|
|
4169
4493
|
|
|
4170
4494
|
// templates/TextScroll/TextScroll.tsx
|
|
4171
|
-
import { useEffect as
|
|
4495
|
+
import { useEffect as useEffect10, useRef as useRef13 } from "react";
|
|
4172
4496
|
import { gsap } from "gsap";
|
|
4173
4497
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
4174
|
-
import { jsx as
|
|
4498
|
+
import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
4175
4499
|
gsap.registerPlugin(ScrollTrigger);
|
|
4176
4500
|
var TextScroll = ({ text, className }) => {
|
|
4177
|
-
const sectionRef =
|
|
4178
|
-
const wordsRef =
|
|
4501
|
+
const sectionRef = useRef13(null);
|
|
4502
|
+
const wordsRef = useRef13([]);
|
|
4179
4503
|
const words = text.split(/\s+/).filter(Boolean);
|
|
4180
|
-
|
|
4504
|
+
useEffect10(() => {
|
|
4181
4505
|
const section = sectionRef.current;
|
|
4182
4506
|
const wordEls = wordsRef.current.filter(Boolean);
|
|
4183
4507
|
if (!section || wordEls.length === 0) return;
|
|
@@ -4211,12 +4535,12 @@ var TextScroll = ({ text, className }) => {
|
|
|
4211
4535
|
gsap.set(wordEls, { clearProps: "opacity" });
|
|
4212
4536
|
};
|
|
4213
4537
|
}, [text]);
|
|
4214
|
-
return /* @__PURE__ */
|
|
4538
|
+
return /* @__PURE__ */ jsx36(
|
|
4215
4539
|
"section",
|
|
4216
4540
|
{
|
|
4217
4541
|
ref: sectionRef,
|
|
4218
4542
|
className: ["ts", className].filter(Boolean).join(" "),
|
|
4219
|
-
children: /* @__PURE__ */
|
|
4543
|
+
children: /* @__PURE__ */ jsx36("div", { className: "ts__inner", children: /* @__PURE__ */ jsx36("p", { className: "ts__text", "aria-label": text, children: words.map((word, i) => /* @__PURE__ */ jsxs32(
|
|
4220
4544
|
"span",
|
|
4221
4545
|
{
|
|
4222
4546
|
ref: (el) => {
|
|
@@ -4236,8 +4560,8 @@ var TextScroll = ({ text, className }) => {
|
|
|
4236
4560
|
};
|
|
4237
4561
|
|
|
4238
4562
|
// templates/StickyMarketCards/StickyMarketCards.tsx
|
|
4239
|
-
import { useEffect as
|
|
4240
|
-
import { jsx as
|
|
4563
|
+
import { useEffect as useEffect11, useRef as useRef14 } from "react";
|
|
4564
|
+
import { jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
4241
4565
|
var PLACEHOLDER_IMAGE3 = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/69b9309379ac08e59ca8210a_1f3f555da9a5cbb13a6fe1bf0d5fe1b6_placeholder-image.webp";
|
|
4242
4566
|
var StickyMarketCards = ({
|
|
4243
4567
|
sectionTitle,
|
|
@@ -4246,9 +4570,9 @@ var StickyMarketCards = ({
|
|
|
4246
4570
|
className,
|
|
4247
4571
|
...props
|
|
4248
4572
|
}) => {
|
|
4249
|
-
const cardRefs =
|
|
4250
|
-
const cardInnerRefs =
|
|
4251
|
-
|
|
4573
|
+
const cardRefs = useRef14([]);
|
|
4574
|
+
const cardInnerRefs = useRef14([]);
|
|
4575
|
+
useEffect11(() => {
|
|
4252
4576
|
if (typeof window === "undefined") return;
|
|
4253
4577
|
let rafId = 0;
|
|
4254
4578
|
const update = () => {
|
|
@@ -4289,7 +4613,7 @@ var StickyMarketCards = ({
|
|
|
4289
4613
|
cancelAnimationFrame(rafId);
|
|
4290
4614
|
};
|
|
4291
4615
|
}, [items.length]);
|
|
4292
|
-
|
|
4616
|
+
useEffect11(() => {
|
|
4293
4617
|
if (typeof window === "undefined") return;
|
|
4294
4618
|
const syncHeights = () => {
|
|
4295
4619
|
const inners = cardInnerRefs.current.filter(Boolean);
|
|
@@ -4318,20 +4642,20 @@ var StickyMarketCards = ({
|
|
|
4318
4642
|
const n = items.length;
|
|
4319
4643
|
const maxStack = 4;
|
|
4320
4644
|
const baseIndex = Math.max(0, n - maxStack);
|
|
4321
|
-
return /* @__PURE__ */
|
|
4645
|
+
return /* @__PURE__ */ jsx37(
|
|
4322
4646
|
"section",
|
|
4323
4647
|
{
|
|
4324
4648
|
className: ["smc", className].filter(Boolean).join(" "),
|
|
4325
4649
|
...props,
|
|
4326
|
-
children: /* @__PURE__ */
|
|
4327
|
-
/* @__PURE__ */
|
|
4328
|
-
/* @__PURE__ */
|
|
4329
|
-
sectionDescription && /* @__PURE__ */
|
|
4650
|
+
children: /* @__PURE__ */ jsxs33("div", { className: "smc__inner", children: [
|
|
4651
|
+
/* @__PURE__ */ jsxs33("div", { className: "smc__header-wrap", children: [
|
|
4652
|
+
/* @__PURE__ */ jsx37("h2", { className: "smc__header", children: sectionTitle }),
|
|
4653
|
+
sectionDescription && /* @__PURE__ */ jsx37("p", { className: "smc__description", children: sectionDescription })
|
|
4330
4654
|
] }),
|
|
4331
|
-
/* @__PURE__ */
|
|
4655
|
+
/* @__PURE__ */ jsx37("div", { className: "smc__track", children: items.map((item, i) => {
|
|
4332
4656
|
const theme = item.theme ?? "dark";
|
|
4333
4657
|
const offsetMultiplier = Math.max(0, i - baseIndex);
|
|
4334
|
-
return /* @__PURE__ */
|
|
4658
|
+
return /* @__PURE__ */ jsx37(
|
|
4335
4659
|
"div",
|
|
4336
4660
|
{
|
|
4337
4661
|
ref: (el) => {
|
|
@@ -4342,7 +4666,7 @@ var StickyMarketCards = ({
|
|
|
4342
4666
|
["--smc-card-index"]: String(offsetMultiplier),
|
|
4343
4667
|
zIndex: i + 1
|
|
4344
4668
|
},
|
|
4345
|
-
children: /* @__PURE__ */
|
|
4669
|
+
children: /* @__PURE__ */ jsxs33(
|
|
4346
4670
|
"div",
|
|
4347
4671
|
{
|
|
4348
4672
|
ref: (el) => {
|
|
@@ -4353,8 +4677,8 @@ var StickyMarketCards = ({
|
|
|
4353
4677
|
`smc__card-inner--${theme}`
|
|
4354
4678
|
].join(" "),
|
|
4355
4679
|
children: [
|
|
4356
|
-
/* @__PURE__ */
|
|
4357
|
-
/* @__PURE__ */
|
|
4680
|
+
/* @__PURE__ */ jsxs33("div", { className: "smc__card-bg", children: [
|
|
4681
|
+
/* @__PURE__ */ jsx37(
|
|
4358
4682
|
"img",
|
|
4359
4683
|
{
|
|
4360
4684
|
src: item.imageUrl ?? PLACEHOLDER_IMAGE3,
|
|
@@ -4363,7 +4687,7 @@ var StickyMarketCards = ({
|
|
|
4363
4687
|
loading: i === 0 ? "eager" : "lazy"
|
|
4364
4688
|
}
|
|
4365
4689
|
),
|
|
4366
|
-
/* @__PURE__ */
|
|
4690
|
+
/* @__PURE__ */ jsx37(
|
|
4367
4691
|
"div",
|
|
4368
4692
|
{
|
|
4369
4693
|
className: [
|
|
@@ -4373,9 +4697,9 @@ var StickyMarketCards = ({
|
|
|
4373
4697
|
}
|
|
4374
4698
|
)
|
|
4375
4699
|
] }),
|
|
4376
|
-
/* @__PURE__ */
|
|
4377
|
-
/* @__PURE__ */
|
|
4378
|
-
/* @__PURE__ */
|
|
4700
|
+
/* @__PURE__ */ jsxs33("div", { className: "smc__card-content", children: [
|
|
4701
|
+
/* @__PURE__ */ jsx37("div", { className: "smc__card-title-wrap", children: /* @__PURE__ */ jsx37("h3", { className: "smc__card-title", children: item.title }) }),
|
|
4702
|
+
/* @__PURE__ */ jsx37("div", { className: "smc__card-desc-wrap", children: /* @__PURE__ */ jsx37("p", { className: "smc__card-desc", children: item.description }) })
|
|
4379
4703
|
] })
|
|
4380
4704
|
]
|
|
4381
4705
|
}
|
|
@@ -4390,12 +4714,12 @@ var StickyMarketCards = ({
|
|
|
4390
4714
|
};
|
|
4391
4715
|
|
|
4392
4716
|
// templates/Table/Table.tsx
|
|
4393
|
-
import { useState as
|
|
4394
|
-
import { Fragment as Fragment4, jsx as
|
|
4395
|
-
var InfoIcon = ({ className }) => /* @__PURE__ */
|
|
4396
|
-
/* @__PURE__ */
|
|
4397
|
-
/* @__PURE__ */
|
|
4398
|
-
/* @__PURE__ */
|
|
4717
|
+
import { useState as useState13, useMemo as useMemo2 } from "react";
|
|
4718
|
+
import { Fragment as Fragment4, jsx as jsx38, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
4719
|
+
var InfoIcon = ({ className }) => /* @__PURE__ */ jsxs34("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", className, children: [
|
|
4720
|
+
/* @__PURE__ */ jsx38("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "1.5" }),
|
|
4721
|
+
/* @__PURE__ */ jsx38("path", { d: "M12 16V12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
|
|
4722
|
+
/* @__PURE__ */ jsx38("circle", { cx: "12", cy: "8", r: "1", fill: "currentColor", stroke: "currentColor", strokeWidth: "1" })
|
|
4399
4723
|
] });
|
|
4400
4724
|
var Table = ({
|
|
4401
4725
|
sectionTitle,
|
|
@@ -4408,11 +4732,11 @@ var Table = ({
|
|
|
4408
4732
|
className,
|
|
4409
4733
|
...props
|
|
4410
4734
|
}) => {
|
|
4411
|
-
const [search, setSearch] =
|
|
4412
|
-
const [page, setPage] =
|
|
4413
|
-
const [tooltip, setTooltip] =
|
|
4735
|
+
const [search, setSearch] = useState13("");
|
|
4736
|
+
const [page, setPage] = useState13(1);
|
|
4737
|
+
const [tooltip, setTooltip] = useState13({ visible: false, heading: "", description: "", x: 0, y: 0, arrowOffset: 0 });
|
|
4414
4738
|
const mainKey = mainColumnKey ?? columns.find((c) => c.width === "main")?.key ?? columns[0]?.key;
|
|
4415
|
-
const filtered =
|
|
4739
|
+
const filtered = useMemo2(() => {
|
|
4416
4740
|
const q = search.trim().toLowerCase();
|
|
4417
4741
|
if (!q) return rows;
|
|
4418
4742
|
return rows.filter(
|
|
@@ -4432,12 +4756,12 @@ var Table = ({
|
|
|
4432
4756
|
setSearch("");
|
|
4433
4757
|
setPage(1);
|
|
4434
4758
|
};
|
|
4435
|
-
return /* @__PURE__ */
|
|
4436
|
-
sectionTitle && /* @__PURE__ */
|
|
4437
|
-
/* @__PURE__ */
|
|
4438
|
-
/* @__PURE__ */
|
|
4439
|
-
/* @__PURE__ */
|
|
4440
|
-
/* @__PURE__ */
|
|
4759
|
+
return /* @__PURE__ */ jsxs34("section", { className: ["tbl-section", className].filter(Boolean).join(" "), ...props, children: [
|
|
4760
|
+
sectionTitle && /* @__PURE__ */ jsx38("div", { className: "tbl-section__header", children: /* @__PURE__ */ jsx38("h2", { className: "tbl-section__title", children: sectionTitle }) }),
|
|
4761
|
+
/* @__PURE__ */ jsxs34("div", { className: "tbl-section__content", children: [
|
|
4762
|
+
/* @__PURE__ */ jsxs34("div", { className: "tbl", children: [
|
|
4763
|
+
/* @__PURE__ */ jsxs34("div", { className: "tbl__topbar", children: [
|
|
4764
|
+
/* @__PURE__ */ jsx38("div", { className: "tbl__search-wrap", children: /* @__PURE__ */ jsx38(
|
|
4441
4765
|
SearchField,
|
|
4442
4766
|
{
|
|
4443
4767
|
placeholder: searchPlaceholder,
|
|
@@ -4448,7 +4772,7 @@ var Table = ({
|
|
|
4448
4772
|
"aria-label": searchPlaceholder
|
|
4449
4773
|
}
|
|
4450
4774
|
) }),
|
|
4451
|
-
/* @__PURE__ */
|
|
4775
|
+
/* @__PURE__ */ jsx38("div", { className: "tbl__summary", children: filtered.length > 0 ? /* @__PURE__ */ jsxs34(Fragment4, { children: [
|
|
4452
4776
|
"Showing ",
|
|
4453
4777
|
startIdx + 1,
|
|
4454
4778
|
"- ",
|
|
@@ -4457,12 +4781,12 @@ var Table = ({
|
|
|
4457
4781
|
filtered.length
|
|
4458
4782
|
] }) : "No results" })
|
|
4459
4783
|
] }),
|
|
4460
|
-
/* @__PURE__ */
|
|
4461
|
-
/* @__PURE__ */
|
|
4784
|
+
/* @__PURE__ */ jsx38("div", { className: "tbl__scroll-wrapper", children: /* @__PURE__ */ jsxs34("table", { className: "tbl__table", children: [
|
|
4785
|
+
/* @__PURE__ */ jsx38("thead", { children: /* @__PURE__ */ jsx38("tr", { className: "tbl__tr", children: columns.map((col, colIdx) => {
|
|
4462
4786
|
const isFirst = colIdx === 0;
|
|
4463
4787
|
const isLast = colIdx === columns.length - 1;
|
|
4464
4788
|
const isMain = col.width === "main" || col.key === mainKey;
|
|
4465
|
-
return /* @__PURE__ */
|
|
4789
|
+
return /* @__PURE__ */ jsx38(
|
|
4466
4790
|
"th",
|
|
4467
4791
|
{
|
|
4468
4792
|
className: [
|
|
@@ -4470,7 +4794,7 @@ var Table = ({
|
|
|
4470
4794
|
isMain ? "tbl__th--main" : "",
|
|
4471
4795
|
col.width === "big" ? "tbl__th--big" : ""
|
|
4472
4796
|
].filter(Boolean).join(" "),
|
|
4473
|
-
children: /* @__PURE__ */
|
|
4797
|
+
children: /* @__PURE__ */ jsx38(
|
|
4474
4798
|
"div",
|
|
4475
4799
|
{
|
|
4476
4800
|
className: "tbl__th-inner",
|
|
@@ -4500,9 +4824,9 @@ var Table = ({
|
|
|
4500
4824
|
setTooltip((prev) => ({ ...prev, visible: false }));
|
|
4501
4825
|
}
|
|
4502
4826
|
},
|
|
4503
|
-
children: /* @__PURE__ */
|
|
4827
|
+
children: /* @__PURE__ */ jsx38("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__ */ jsxs34("span", { children: [
|
|
4504
4828
|
line,
|
|
4505
|
-
li < col.header.length - 1 && /* @__PURE__ */
|
|
4829
|
+
li < col.header.length - 1 && /* @__PURE__ */ jsx38("br", {})
|
|
4506
4830
|
] }, li)) : col.header })
|
|
4507
4831
|
}
|
|
4508
4832
|
)
|
|
@@ -4510,10 +4834,10 @@ var Table = ({
|
|
|
4510
4834
|
col.key
|
|
4511
4835
|
);
|
|
4512
4836
|
}) }) }),
|
|
4513
|
-
/* @__PURE__ */
|
|
4837
|
+
/* @__PURE__ */ jsx38("tbody", { className: "tbl__tbody", children: visible.length > 0 ? visible.map((row, rowIdx) => /* @__PURE__ */ jsx38("tr", { className: "tbl__tr", children: columns.map((col) => {
|
|
4514
4838
|
const isMain = col.width === "main" || col.key === mainKey;
|
|
4515
4839
|
const iconUrl = row[`${col.key}_iconUrl`];
|
|
4516
|
-
return /* @__PURE__ */
|
|
4840
|
+
return /* @__PURE__ */ jsx38(
|
|
4517
4841
|
"td",
|
|
4518
4842
|
{
|
|
4519
4843
|
className: [
|
|
@@ -4521,8 +4845,8 @@ var Table = ({
|
|
|
4521
4845
|
isMain ? "tbl__td--main" : "",
|
|
4522
4846
|
col.width === "big" ? "tbl__td--big" : ""
|
|
4523
4847
|
].filter(Boolean).join(" "),
|
|
4524
|
-
children: isMain ? /* @__PURE__ */
|
|
4525
|
-
iconUrl && /* @__PURE__ */
|
|
4848
|
+
children: isMain ? /* @__PURE__ */ jsxs34("div", { className: "tbl__cell-inner", children: [
|
|
4849
|
+
iconUrl && /* @__PURE__ */ jsx38(
|
|
4526
4850
|
"img",
|
|
4527
4851
|
{
|
|
4528
4852
|
src: iconUrl,
|
|
@@ -4534,18 +4858,18 @@ var Table = ({
|
|
|
4534
4858
|
height: "24"
|
|
4535
4859
|
}
|
|
4536
4860
|
),
|
|
4537
|
-
/* @__PURE__ */
|
|
4538
|
-
] }) : /* @__PURE__ */
|
|
4861
|
+
/* @__PURE__ */ jsx38("span", { className: "tbl__cell-text tbl__cell-text--bold", children: row[col.key] ?? "" })
|
|
4862
|
+
] }) : /* @__PURE__ */ jsx38("span", { className: "tbl__cell-text", children: row[col.key] ?? "" })
|
|
4539
4863
|
},
|
|
4540
4864
|
col.key
|
|
4541
4865
|
);
|
|
4542
|
-
}) }, rowIdx)) : /* @__PURE__ */
|
|
4866
|
+
}) }, rowIdx)) : /* @__PURE__ */ jsx38("tr", { className: "tbl__tr", children: /* @__PURE__ */ jsxs34("td", { colSpan: columns.length, className: "tbl__empty-cell", children: [
|
|
4543
4867
|
'No results found for "',
|
|
4544
4868
|
search,
|
|
4545
4869
|
'"'
|
|
4546
4870
|
] }) }) })
|
|
4547
4871
|
] }) }),
|
|
4548
|
-
totalPages > 1 && /* @__PURE__ */
|
|
4872
|
+
totalPages > 1 && /* @__PURE__ */ jsx38("div", { className: "tbl__footer", children: /* @__PURE__ */ jsx38("div", { className: "tbl__pagination-wrap", children: /* @__PURE__ */ jsx38(
|
|
4549
4873
|
Pagination,
|
|
4550
4874
|
{
|
|
4551
4875
|
currentPage,
|
|
@@ -4554,19 +4878,19 @@ var Table = ({
|
|
|
4554
4878
|
}
|
|
4555
4879
|
) }) })
|
|
4556
4880
|
] }),
|
|
4557
|
-
infoText && /* @__PURE__ */
|
|
4558
|
-
/* @__PURE__ */
|
|
4559
|
-
/* @__PURE__ */
|
|
4881
|
+
infoText && /* @__PURE__ */ jsxs34("div", { className: "tbl-section__info-box", children: [
|
|
4882
|
+
/* @__PURE__ */ jsx38(InfoIcon, { className: "tbl-section__info-icon" }),
|
|
4883
|
+
/* @__PURE__ */ jsx38("p", { className: "tbl-section__info-text", children: infoText })
|
|
4560
4884
|
] })
|
|
4561
4885
|
] }),
|
|
4562
|
-
/* @__PURE__ */
|
|
4886
|
+
/* @__PURE__ */ jsxs34(
|
|
4563
4887
|
"div",
|
|
4564
4888
|
{
|
|
4565
4889
|
className: ["tbl__global-hint", tooltip.visible ? "tbl__global-hint--visible" : ""].filter(Boolean).join(" "),
|
|
4566
4890
|
style: { left: tooltip.x, top: tooltip.y - 8 },
|
|
4567
4891
|
children: [
|
|
4568
|
-
/* @__PURE__ */
|
|
4569
|
-
/* @__PURE__ */
|
|
4892
|
+
/* @__PURE__ */ jsx38("div", { className: "tbl__global-hint-desc", children: tooltip.description }),
|
|
4893
|
+
/* @__PURE__ */ jsx38(
|
|
4570
4894
|
"div",
|
|
4571
4895
|
{
|
|
4572
4896
|
className: "tbl__global-hint-arrow",
|
|
@@ -4580,41 +4904,41 @@ var Table = ({
|
|
|
4580
4904
|
};
|
|
4581
4905
|
|
|
4582
4906
|
// templates/Leaders/Leaders.tsx
|
|
4583
|
-
import { useState as
|
|
4584
|
-
import { Fragment as Fragment5, jsx as
|
|
4585
|
-
var
|
|
4586
|
-
var
|
|
4587
|
-
var
|
|
4588
|
-
|
|
4589
|
-
/* @__PURE__ */ jsx38("div", { className: "leaders__image-wrapper", children: /* @__PURE__ */ jsx38(
|
|
4907
|
+
import { useState as useState14 } from "react";
|
|
4908
|
+
import { Fragment as Fragment5, jsx as jsx39, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
4909
|
+
var ChevronDownIcon4 = () => /* @__PURE__ */ jsx39("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx39("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
4910
|
+
var ChevronUpIcon = () => /* @__PURE__ */ jsx39("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx39("path", { d: "M12 10L8 6L4 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
4911
|
+
var CardContent = ({ item }) => /* @__PURE__ */ jsxs35(Fragment5, { children: [
|
|
4912
|
+
/* @__PURE__ */ jsx39("div", { className: "avatar-grid__image-wrapper", children: /* @__PURE__ */ jsx39(
|
|
4590
4913
|
"img",
|
|
4591
4914
|
{
|
|
4592
4915
|
src: item.imageUrl,
|
|
4593
4916
|
alt: item.name,
|
|
4594
|
-
className: "
|
|
4917
|
+
className: "avatar-grid__image",
|
|
4595
4918
|
loading: "lazy"
|
|
4596
4919
|
}
|
|
4597
4920
|
) }),
|
|
4598
|
-
/* @__PURE__ */
|
|
4599
|
-
/* @__PURE__ */
|
|
4600
|
-
/* @__PURE__ */
|
|
4921
|
+
/* @__PURE__ */ jsxs35("div", { className: "avatar-grid__content", children: [
|
|
4922
|
+
/* @__PURE__ */ jsx39("h3", { className: "avatar-grid__name", children: item.name }),
|
|
4923
|
+
/* @__PURE__ */ jsx39("p", { className: "avatar-grid__role", children: item.role })
|
|
4601
4924
|
] }),
|
|
4602
|
-
item.
|
|
4925
|
+
item.linkUrl && /* @__PURE__ */ jsx39(
|
|
4603
4926
|
Link,
|
|
4604
4927
|
{
|
|
4605
|
-
href: item.
|
|
4928
|
+
href: item.linkUrl,
|
|
4606
4929
|
target: "_blank",
|
|
4607
4930
|
rel: "noopener noreferrer",
|
|
4608
|
-
icon:
|
|
4609
|
-
label: "
|
|
4931
|
+
icon: item.linkIcon,
|
|
4932
|
+
label: item.linkLabel ?? "Profile",
|
|
4610
4933
|
colorScheme: "black",
|
|
4611
4934
|
showChevron: false,
|
|
4612
|
-
className: "
|
|
4935
|
+
className: "avatar-grid__link"
|
|
4613
4936
|
}
|
|
4614
4937
|
)
|
|
4615
4938
|
] });
|
|
4616
|
-
var
|
|
4617
|
-
title
|
|
4939
|
+
var AvatarGrid = ({
|
|
4940
|
+
title,
|
|
4941
|
+
description,
|
|
4618
4942
|
items,
|
|
4619
4943
|
initialVisibleCount = 4,
|
|
4620
4944
|
expandText = "View all",
|
|
@@ -4622,56 +4946,257 @@ var Leaders = ({
|
|
|
4622
4946
|
className,
|
|
4623
4947
|
...props
|
|
4624
4948
|
}) => {
|
|
4625
|
-
const [isExpanded, setIsExpanded] =
|
|
4949
|
+
const [isExpanded, setIsExpanded] = useState14(false);
|
|
4626
4950
|
const hasMore = items.length > initialVisibleCount;
|
|
4627
4951
|
const visibleItems = items.slice(0, initialVisibleCount);
|
|
4628
4952
|
const extraItems = items.slice(initialVisibleCount);
|
|
4629
|
-
return /* @__PURE__ */
|
|
4630
|
-
title && /* @__PURE__ */
|
|
4631
|
-
|
|
4632
|
-
|
|
4633
|
-
|
|
4953
|
+
return /* @__PURE__ */ jsx39("section", { className: ["avatar-grid", className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ jsxs35("div", { className: "avatar-grid__container", children: [
|
|
4954
|
+
(title || description) && /* @__PURE__ */ jsxs35("div", { className: "avatar-grid__header", children: [
|
|
4955
|
+
title && /* @__PURE__ */ jsx39("h2", { className: "avatar-grid__title", children: title }),
|
|
4956
|
+
description && /* @__PURE__ */ jsx39("p", { className: "avatar-grid__description", children: description })
|
|
4957
|
+
] }),
|
|
4958
|
+
/* @__PURE__ */ jsxs35("div", { className: "avatar-grid__grid-wrapper", children: [
|
|
4959
|
+
/* @__PURE__ */ jsx39("div", { className: "avatar-grid__grid", children: visibleItems.map((item, i) => /* @__PURE__ */ jsx39("div", { className: "avatar-grid__card", children: /* @__PURE__ */ jsx39(CardContent, { item }) }, i)) }),
|
|
4960
|
+
hasMore && /* @__PURE__ */ jsx39(
|
|
4634
4961
|
"div",
|
|
4635
4962
|
{
|
|
4636
4963
|
className: [
|
|
4637
|
-
"
|
|
4638
|
-
isExpanded ? "
|
|
4964
|
+
"avatar-grid__extra-cards",
|
|
4965
|
+
isExpanded ? "avatar-grid__extra-cards--open" : ""
|
|
4639
4966
|
].join(" "),
|
|
4640
4967
|
"aria-hidden": !isExpanded,
|
|
4641
|
-
children: /* @__PURE__ */
|
|
4968
|
+
children: /* @__PURE__ */ jsx39("div", { className: "avatar-grid__extra-grid", children: extraItems.map((item, i) => /* @__PURE__ */ jsx39(
|
|
4642
4969
|
"div",
|
|
4643
4970
|
{
|
|
4644
4971
|
className: [
|
|
4645
|
-
"
|
|
4646
|
-
"
|
|
4647
|
-
isExpanded ? "
|
|
4972
|
+
"avatar-grid__card",
|
|
4973
|
+
"avatar-grid__extra-card",
|
|
4974
|
+
isExpanded ? "avatar-grid__extra-card--visible" : ""
|
|
4648
4975
|
].join(" "),
|
|
4649
4976
|
style: {
|
|
4650
4977
|
transitionDelay: isExpanded ? `${i * 70 + 120}ms` : "0ms"
|
|
4651
4978
|
},
|
|
4652
|
-
children: /* @__PURE__ */
|
|
4979
|
+
children: /* @__PURE__ */ jsx39(CardContent, { item })
|
|
4653
4980
|
},
|
|
4654
4981
|
i
|
|
4655
4982
|
)) })
|
|
4656
4983
|
}
|
|
4657
4984
|
)
|
|
4658
4985
|
] }),
|
|
4659
|
-
hasMore && /* @__PURE__ */
|
|
4986
|
+
hasMore && /* @__PURE__ */ jsx39("div", { className: "avatar-grid__actions", children: /* @__PURE__ */ jsx39(
|
|
4660
4987
|
Button,
|
|
4661
4988
|
{
|
|
4662
4989
|
variant: "secondary",
|
|
4663
4990
|
colorScheme: "black",
|
|
4664
4991
|
onClick: () => setIsExpanded(!isExpanded),
|
|
4665
4992
|
iconPosition: "icon-right",
|
|
4666
|
-
icon: isExpanded ? /* @__PURE__ */
|
|
4993
|
+
icon: isExpanded ? /* @__PURE__ */ jsx39(ChevronUpIcon, {}) : /* @__PURE__ */ jsx39(ChevronDownIcon4, {}),
|
|
4994
|
+
fullWidth: true,
|
|
4667
4995
|
children: isExpanded ? collapseText : expandText
|
|
4668
4996
|
}
|
|
4669
4997
|
) })
|
|
4670
4998
|
] }) });
|
|
4671
4999
|
};
|
|
5000
|
+
var PeopleGrid = AvatarGrid;
|
|
5001
|
+
var Leaders = AvatarGrid;
|
|
5002
|
+
|
|
5003
|
+
// templates/ImageBanner/ImageBanner.tsx
|
|
5004
|
+
import { jsx as jsx40, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
5005
|
+
var ImageBanner = ({
|
|
5006
|
+
variant = "split",
|
|
5007
|
+
title = "Join our global community",
|
|
5008
|
+
description = "Connect with traders around the world to exchange insights, explore portfolios, and gain valuable expertise.",
|
|
5009
|
+
ctaLabel = "Trader's Hub",
|
|
5010
|
+
ctaHref,
|
|
5011
|
+
onCtaClick,
|
|
5012
|
+
imageUrl,
|
|
5013
|
+
imageAlt = "",
|
|
5014
|
+
className,
|
|
5015
|
+
...props
|
|
5016
|
+
}) => {
|
|
5017
|
+
const isFullBg = variant === "full-bg";
|
|
5018
|
+
return /* @__PURE__ */ jsx40(
|
|
5019
|
+
"section",
|
|
5020
|
+
{
|
|
5021
|
+
className: ["image-banner", className].filter(Boolean).join(" "),
|
|
5022
|
+
...props,
|
|
5023
|
+
children: /* @__PURE__ */ jsxs36(
|
|
5024
|
+
"div",
|
|
5025
|
+
{
|
|
5026
|
+
className: [
|
|
5027
|
+
"image-banner__inner",
|
|
5028
|
+
`image-banner__inner--${variant}`
|
|
5029
|
+
].join(" "),
|
|
5030
|
+
children: [
|
|
5031
|
+
isFullBg && imageUrl && /* @__PURE__ */ jsxs36("div", { className: "image-banner__bg-image-wrapper", children: [
|
|
5032
|
+
/* @__PURE__ */ jsx40(
|
|
5033
|
+
"img",
|
|
5034
|
+
{
|
|
5035
|
+
src: imageUrl,
|
|
5036
|
+
alt: imageAlt,
|
|
5037
|
+
className: "image-banner__bg-image",
|
|
5038
|
+
loading: "lazy"
|
|
5039
|
+
}
|
|
5040
|
+
),
|
|
5041
|
+
/* @__PURE__ */ jsx40("div", { className: "image-banner__bg-overlay", "aria-hidden": "true" })
|
|
5042
|
+
] }),
|
|
5043
|
+
/* @__PURE__ */ jsxs36("div", { className: "image-banner__content", children: [
|
|
5044
|
+
/* @__PURE__ */ jsx40("h2", { className: "image-banner__title", children: title }),
|
|
5045
|
+
description && /* @__PURE__ */ jsx40("p", { className: "image-banner__description", children: description }),
|
|
5046
|
+
ctaLabel && /* @__PURE__ */ jsx40("div", { className: "image-banner__actions", children: /* @__PURE__ */ jsx40(
|
|
5047
|
+
Link,
|
|
5048
|
+
{
|
|
5049
|
+
colorScheme: "coral",
|
|
5050
|
+
label: ctaLabel,
|
|
5051
|
+
href: ctaHref,
|
|
5052
|
+
onClick: onCtaClick,
|
|
5053
|
+
showChevron: true,
|
|
5054
|
+
className: "image-banner__cta-link"
|
|
5055
|
+
}
|
|
5056
|
+
) })
|
|
5057
|
+
] }),
|
|
5058
|
+
!isFullBg && imageUrl && /* @__PURE__ */ jsx40("div", { className: "image-banner__image-wrapper", children: /* @__PURE__ */ jsx40(
|
|
5059
|
+
"img",
|
|
5060
|
+
{
|
|
5061
|
+
src: imageUrl,
|
|
5062
|
+
alt: imageAlt,
|
|
5063
|
+
className: "image-banner__image",
|
|
5064
|
+
loading: "lazy"
|
|
5065
|
+
}
|
|
5066
|
+
) })
|
|
5067
|
+
]
|
|
5068
|
+
}
|
|
5069
|
+
)
|
|
5070
|
+
}
|
|
5071
|
+
);
|
|
5072
|
+
};
|
|
5073
|
+
|
|
5074
|
+
// templates/Testimonial/Testimonial.tsx
|
|
5075
|
+
import { useState as useState15, useEffect as useEffect12, useRef as useRef15 } from "react";
|
|
5076
|
+
|
|
5077
|
+
// assets/quote-left.webp
|
|
5078
|
+
var quote_left_default = "./quote-left-63QMW5NQ.webp";
|
|
5079
|
+
|
|
5080
|
+
// assets/quote-right.webp
|
|
5081
|
+
var quote_right_default = "./quote-right-W6AS4YHN.webp";
|
|
5082
|
+
|
|
5083
|
+
// templates/Testimonial/Testimonial.tsx
|
|
5084
|
+
import { jsx as jsx41, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
5085
|
+
var Testimonial = ({
|
|
5086
|
+
title,
|
|
5087
|
+
items,
|
|
5088
|
+
className,
|
|
5089
|
+
...props
|
|
5090
|
+
}) => {
|
|
5091
|
+
const [activeIndex, setActiveIndex] = useState15(0);
|
|
5092
|
+
const [phase, setPhase] = useState15("idle");
|
|
5093
|
+
const pendingIndex = useRef15(null);
|
|
5094
|
+
const autoRef = useRef15(null);
|
|
5095
|
+
const goTo = (next) => {
|
|
5096
|
+
if (next === activeIndex || phase !== "idle") return;
|
|
5097
|
+
pendingIndex.current = next;
|
|
5098
|
+
setPhase("exiting");
|
|
5099
|
+
};
|
|
5100
|
+
useEffect12(() => {
|
|
5101
|
+
if (phase === "exiting") {
|
|
5102
|
+
const t = setTimeout(() => {
|
|
5103
|
+
setActiveIndex(pendingIndex.current ?? activeIndex);
|
|
5104
|
+
setPhase("idle");
|
|
5105
|
+
}, 200);
|
|
5106
|
+
return () => clearTimeout(t);
|
|
5107
|
+
}
|
|
5108
|
+
}, [phase, activeIndex]);
|
|
5109
|
+
useEffect12(() => {
|
|
5110
|
+
if (items.length <= 1) return;
|
|
5111
|
+
autoRef.current = setTimeout(() => {
|
|
5112
|
+
const next = (activeIndex + 1) % items.length;
|
|
5113
|
+
pendingIndex.current = next;
|
|
5114
|
+
setPhase("exiting");
|
|
5115
|
+
}, 5e3);
|
|
5116
|
+
return () => {
|
|
5117
|
+
if (autoRef.current) clearTimeout(autoRef.current);
|
|
5118
|
+
};
|
|
5119
|
+
}, [activeIndex, items.length]);
|
|
5120
|
+
if (!items || items.length === 0) return null;
|
|
5121
|
+
return /* @__PURE__ */ jsx41(
|
|
5122
|
+
"section",
|
|
5123
|
+
{
|
|
5124
|
+
className: ["testimonial", className].filter(Boolean).join(" "),
|
|
5125
|
+
...props,
|
|
5126
|
+
children: /* @__PURE__ */ jsxs37("div", { className: "testimonial__container", children: [
|
|
5127
|
+
title && /* @__PURE__ */ jsx41("h2", { className: "testimonial__title", children: title }),
|
|
5128
|
+
/* @__PURE__ */ jsxs37("div", { className: "testimonial__carousel", children: [
|
|
5129
|
+
/* @__PURE__ */ jsx41("div", { className: "testimonial__slides", children: items.map((item, i) => {
|
|
5130
|
+
const isActive = i === activeIndex;
|
|
5131
|
+
const isExiting = isActive && phase === "exiting";
|
|
5132
|
+
const slideClass = [
|
|
5133
|
+
"testimonial__slide",
|
|
5134
|
+
isActive && !isExiting ? "testimonial__slide--active" : "",
|
|
5135
|
+
isExiting ? "testimonial__slide--exiting" : ""
|
|
5136
|
+
].filter(Boolean).join(" ");
|
|
5137
|
+
return /* @__PURE__ */ jsx41(
|
|
5138
|
+
"div",
|
|
5139
|
+
{
|
|
5140
|
+
className: slideClass,
|
|
5141
|
+
role: "region",
|
|
5142
|
+
"aria-label": `Testimonial ${i + 1} of ${items.length}`,
|
|
5143
|
+
"aria-hidden": !isActive,
|
|
5144
|
+
children: /* @__PURE__ */ jsxs37("div", { className: "testimonial__card", children: [
|
|
5145
|
+
/* @__PURE__ */ jsx41("span", { className: "testimonial__quotemark testimonial__quotemark--open", "aria-hidden": "true", children: /* @__PURE__ */ jsx41("img", { src: quote_left_default, alt: "", className: "testimonial__quotemark-img" }) }),
|
|
5146
|
+
/* @__PURE__ */ jsx41("p", { className: "testimonial__quote", children: item.quote }),
|
|
5147
|
+
/* @__PURE__ */ jsxs37("div", { className: "testimonial__author", children: [
|
|
5148
|
+
item.avatarUrl && /* @__PURE__ */ jsx41(
|
|
5149
|
+
"img",
|
|
5150
|
+
{
|
|
5151
|
+
src: item.avatarUrl,
|
|
5152
|
+
alt: item.authorName,
|
|
5153
|
+
className: "testimonial__author-avatar",
|
|
5154
|
+
loading: "lazy"
|
|
5155
|
+
}
|
|
5156
|
+
),
|
|
5157
|
+
/* @__PURE__ */ jsx41("p", { className: "testimonial__author-name", children: item.authorName }),
|
|
5158
|
+
item.authorLocation && /* @__PURE__ */ jsx41("p", { className: "testimonial__author-location", children: item.authorLocation })
|
|
5159
|
+
] }),
|
|
5160
|
+
/* @__PURE__ */ jsx41("span", { className: "testimonial__quotemark testimonial__quotemark--close", "aria-hidden": "true", children: /* @__PURE__ */ jsx41("img", { src: quote_right_default, alt: "", className: "testimonial__quotemark-img" }) })
|
|
5161
|
+
] })
|
|
5162
|
+
},
|
|
5163
|
+
i
|
|
5164
|
+
);
|
|
5165
|
+
}) }),
|
|
5166
|
+
items.length > 1 && /* @__PURE__ */ jsx41(
|
|
5167
|
+
"div",
|
|
5168
|
+
{
|
|
5169
|
+
className: "testimonial__dots",
|
|
5170
|
+
role: "tablist",
|
|
5171
|
+
"aria-label": "Testimonial navigation",
|
|
5172
|
+
children: items.map((_, i) => /* @__PURE__ */ jsx41(
|
|
5173
|
+
"button",
|
|
5174
|
+
{
|
|
5175
|
+
role: "tab",
|
|
5176
|
+
"aria-selected": i === activeIndex,
|
|
5177
|
+
"aria-label": `Go to testimonial ${i + 1}`,
|
|
5178
|
+
className: [
|
|
5179
|
+
"testimonial__dot",
|
|
5180
|
+
i === activeIndex ? "testimonial__dot--active" : ""
|
|
5181
|
+
].filter(Boolean).join(" "),
|
|
5182
|
+
onClick: () => {
|
|
5183
|
+
if (autoRef.current) clearTimeout(autoRef.current);
|
|
5184
|
+
goTo(i);
|
|
5185
|
+
}
|
|
5186
|
+
},
|
|
5187
|
+
i
|
|
5188
|
+
))
|
|
5189
|
+
}
|
|
5190
|
+
)
|
|
5191
|
+
] })
|
|
5192
|
+
] })
|
|
5193
|
+
}
|
|
5194
|
+
);
|
|
5195
|
+
};
|
|
4672
5196
|
export {
|
|
4673
5197
|
AVATAR_DATA,
|
|
4674
5198
|
Accordion,
|
|
5199
|
+
AvatarGrid,
|
|
4675
5200
|
BottomSheet,
|
|
4676
5201
|
Breadcrumb,
|
|
4677
5202
|
Button,
|
|
@@ -4694,14 +5219,17 @@ export {
|
|
|
4694
5219
|
Footer,
|
|
4695
5220
|
Header,
|
|
4696
5221
|
Hero,
|
|
5222
|
+
ImageBanner,
|
|
4697
5223
|
Leaders,
|
|
4698
5224
|
Link,
|
|
4699
5225
|
LogoMarquee,
|
|
4700
5226
|
Navbar,
|
|
4701
5227
|
Pagination,
|
|
5228
|
+
PeopleGrid,
|
|
4702
5229
|
STEPS_DATA,
|
|
4703
5230
|
SearchField,
|
|
4704
5231
|
Stats,
|
|
5232
|
+
StatsSimple,
|
|
4705
5233
|
Steps,
|
|
4706
5234
|
StickyMarketCards,
|
|
4707
5235
|
StickyStackedCards,
|
|
@@ -4709,6 +5237,7 @@ export {
|
|
|
4709
5237
|
Table,
|
|
4710
5238
|
Tabs,
|
|
4711
5239
|
Tag,
|
|
5240
|
+
Testimonial,
|
|
4712
5241
|
TextField,
|
|
4713
5242
|
TextScroll,
|
|
4714
5243
|
dayNightTransitionV2Preset
|