@frequencyads/components 0.1.2 → 0.1.3
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/AnimatedCounter/AnimatedCounter.d.ts +19 -0
- package/dist/AnimatedCounter/AnimatedCounter.d.ts.map +1 -0
- package/dist/AnimatedCounter/index.d.ts +2 -0
- package/dist/AnimatedCounter/index.d.ts.map +1 -0
- package/dist/AnimatedWaveform/AnimatedWaveform.d.ts +10 -0
- package/dist/AnimatedWaveform/AnimatedWaveform.d.ts.map +1 -0
- package/dist/AnimatedWaveform/index.d.ts +2 -0
- package/dist/AnimatedWaveform/index.d.ts.map +1 -0
- package/dist/AudioPlayer/AudioPlayer.d.ts +26 -0
- package/dist/AudioPlayer/AudioPlayer.d.ts.map +1 -0
- package/dist/AudioPlayer/index.d.ts +2 -0
- package/dist/AudioPlayer/index.d.ts.map +1 -0
- package/dist/AudioWaveform/AudioWaveform.d.ts +27 -0
- package/dist/AudioWaveform/AudioWaveform.d.ts.map +1 -0
- package/dist/AudioWaveform/index.d.ts +2 -0
- package/dist/AudioWaveform/index.d.ts.map +1 -0
- package/dist/CodeBlock/CodeBlock.d.ts +10 -0
- package/dist/CodeBlock/CodeBlock.d.ts.map +1 -0
- package/dist/CodeBlock/index.d.ts +2 -0
- package/dist/CodeBlock/index.d.ts.map +1 -0
- package/dist/ColorPalette/ColorPalette.d.ts +10 -0
- package/dist/ColorPalette/ColorPalette.d.ts.map +1 -0
- package/dist/ColorPalette/index.d.ts +2 -0
- package/dist/ColorPalette/index.d.ts.map +1 -0
- package/dist/ColorSwatch/ColorSwatch.d.ts +10 -0
- package/dist/ColorSwatch/ColorSwatch.d.ts.map +1 -0
- package/dist/ColorSwatch/index.d.ts +2 -0
- package/dist/ColorSwatch/index.d.ts.map +1 -0
- package/dist/Copyable/Copyable.d.ts +7 -0
- package/dist/Copyable/Copyable.d.ts.map +1 -0
- package/dist/Copyable/index.d.ts +2 -0
- package/dist/Copyable/index.d.ts.map +1 -0
- package/dist/DosDonts/DosDonts.d.ts +10 -0
- package/dist/DosDonts/DosDonts.d.ts.map +1 -0
- package/dist/DosDonts/index.d.ts +2 -0
- package/dist/DosDonts/index.d.ts.map +1 -0
- package/dist/ExpandableCard/ExpandableCard.d.ts +30 -0
- package/dist/ExpandableCard/ExpandableCard.d.ts.map +1 -0
- package/dist/ExpandableCard/index.d.ts +2 -0
- package/dist/ExpandableCard/index.d.ts.map +1 -0
- package/dist/FadeInSection/FadeInSection.d.ts +10 -0
- package/dist/FadeInSection/FadeInSection.d.ts.map +1 -0
- package/dist/FadeInSection/index.d.ts +2 -0
- package/dist/FadeInSection/index.d.ts.map +1 -0
- package/dist/FrequencyWave/FrequencyWave.d.ts +15 -0
- package/dist/FrequencyWave/FrequencyWave.d.ts.map +1 -0
- package/dist/FrequencyWave/index.d.ts +2 -0
- package/dist/FrequencyWave/index.d.ts.map +1 -0
- package/dist/GradientSwatch/GradientSwatch.d.ts +10 -0
- package/dist/GradientSwatch/GradientSwatch.d.ts.map +1 -0
- package/dist/GradientSwatch/index.d.ts +2 -0
- package/dist/GradientSwatch/index.d.ts.map +1 -0
- package/dist/Hero/Hero.d.ts +34 -0
- package/dist/Hero/Hero.d.ts.map +1 -0
- package/dist/Hero/index.d.ts +2 -0
- package/dist/Hero/index.d.ts.map +1 -0
- package/dist/HintBadge/HintBadge.d.ts +8 -0
- package/dist/HintBadge/HintBadge.d.ts.map +1 -0
- package/dist/HintBadge/index.d.ts +2 -0
- package/dist/HintBadge/index.d.ts.map +1 -0
- package/dist/MiniAudioPlayer/MiniAudioPlayer.d.ts +18 -0
- package/dist/MiniAudioPlayer/MiniAudioPlayer.d.ts.map +1 -0
- package/dist/MiniAudioPlayer/index.d.ts +2 -0
- package/dist/MiniAudioPlayer/index.d.ts.map +1 -0
- package/dist/PrincipleCard/PrincipleCard.d.ts +14 -0
- package/dist/PrincipleCard/PrincipleCard.d.ts.map +1 -0
- package/dist/PrincipleCard/index.d.ts +2 -0
- package/dist/PrincipleCard/index.d.ts.map +1 -0
- package/dist/SpeedDial/SpeedDial.d.ts +33 -0
- package/dist/SpeedDial/SpeedDial.d.ts.map +1 -0
- package/dist/SpeedDial/index.d.ts +2 -0
- package/dist/SpeedDial/index.d.ts.map +1 -0
- package/dist/SplitSection/SplitSection.d.ts +35 -0
- package/dist/SplitSection/SplitSection.d.ts.map +1 -0
- package/dist/SplitSection/index.d.ts +2 -0
- package/dist/SplitSection/index.d.ts.map +1 -0
- package/dist/TestimonialCard/TestimonialCard.d.ts +17 -0
- package/dist/TestimonialCard/TestimonialCard.d.ts.map +1 -0
- package/dist/TestimonialCard/index.d.ts +2 -0
- package/dist/TestimonialCard/index.d.ts.map +1 -0
- package/dist/VideoBackground/VideoBackground.d.ts +8 -0
- package/dist/VideoBackground/VideoBackground.d.ts.map +1 -0
- package/dist/VideoBackground/index.d.ts +2 -0
- package/dist/VideoBackground/index.d.ts.map +1 -0
- package/dist/components.css +1 -0
- package/dist/index.d.ts +25 -359
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +1 -1663
- package/dist/index.mjs +849 -1241
- package/package.json +10 -6
- package/dist/index.css +0 -609
- package/dist/index.d.mts +0 -361
package/dist/index.js
CHANGED
|
@@ -1,1664 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
"use strict";
|
|
3
|
-
var __create = Object.create;
|
|
4
|
-
var __defProp = Object.defineProperty;
|
|
5
|
-
var __defProps = Object.defineProperties;
|
|
6
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
7
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
8
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
9
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
10
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
11
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
12
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
13
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
14
|
-
var __spreadValues = (a, b) => {
|
|
15
|
-
for (var prop in b || (b = {}))
|
|
16
|
-
if (__hasOwnProp.call(b, prop))
|
|
17
|
-
__defNormalProp(a, prop, b[prop]);
|
|
18
|
-
if (__getOwnPropSymbols)
|
|
19
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
20
|
-
if (__propIsEnum.call(b, prop))
|
|
21
|
-
__defNormalProp(a, prop, b[prop]);
|
|
22
|
-
}
|
|
23
|
-
return a;
|
|
24
|
-
};
|
|
25
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
26
|
-
var __objRest = (source, exclude) => {
|
|
27
|
-
var target = {};
|
|
28
|
-
for (var prop in source)
|
|
29
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
30
|
-
target[prop] = source[prop];
|
|
31
|
-
if (source != null && __getOwnPropSymbols)
|
|
32
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
33
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
34
|
-
target[prop] = source[prop];
|
|
35
|
-
}
|
|
36
|
-
return target;
|
|
37
|
-
};
|
|
38
|
-
var __export = (target, all) => {
|
|
39
|
-
for (var name in all)
|
|
40
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
41
|
-
};
|
|
42
|
-
var __copyProps = (to, from, except, desc) => {
|
|
43
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
44
|
-
for (let key of __getOwnPropNames(from))
|
|
45
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
46
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
47
|
-
}
|
|
48
|
-
return to;
|
|
49
|
-
};
|
|
50
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
51
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
52
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
53
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
54
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
55
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
56
|
-
mod
|
|
57
|
-
));
|
|
58
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
59
|
-
|
|
60
|
-
// src/index.ts
|
|
61
|
-
var index_exports = {};
|
|
62
|
-
__export(index_exports, {
|
|
63
|
-
AnimatedCounter: () => AnimatedCounter,
|
|
64
|
-
AnimatedWaveform: () => AnimatedWaveform,
|
|
65
|
-
AudioPlayer: () => AudioPlayer,
|
|
66
|
-
AudioWaveform: () => AudioWaveform,
|
|
67
|
-
CodeBlock: () => CodeBlock,
|
|
68
|
-
ColorPalette: () => ColorPalette,
|
|
69
|
-
ColorSwatch: () => ColorSwatch,
|
|
70
|
-
Copyable: () => Copyable,
|
|
71
|
-
DosDonts: () => DosDonts,
|
|
72
|
-
ExpandableCard: () => ExpandableCard,
|
|
73
|
-
FadeInSection: () => FadeInSection,
|
|
74
|
-
FrequencyWave: () => FrequencyWave,
|
|
75
|
-
GradientSwatch: () => GradientSwatch,
|
|
76
|
-
Hero: () => Hero,
|
|
77
|
-
HintBadge: () => HintBadge,
|
|
78
|
-
MiniAudioPlayer: () => MiniAudioPlayer,
|
|
79
|
-
PrincipleCard: () => PrincipleCard,
|
|
80
|
-
SpeedDial: () => SpeedDial,
|
|
81
|
-
SplitSection: () => SplitSection,
|
|
82
|
-
TestimonialCard: () => TestimonialCard,
|
|
83
|
-
VideoBackground: () => VideoBackground
|
|
84
|
-
});
|
|
85
|
-
module.exports = __toCommonJS(index_exports);
|
|
86
|
-
|
|
87
|
-
// src/AnimatedCounter/AnimatedCounter.tsx
|
|
88
|
-
var import_react = require("react");
|
|
89
|
-
var import_core = require("@mantine/core");
|
|
90
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
91
|
-
function AnimatedCounter(_a) {
|
|
92
|
-
var _b = _a, {
|
|
93
|
-
value,
|
|
94
|
-
suffix = "",
|
|
95
|
-
prefix = "",
|
|
96
|
-
duration = 2e3,
|
|
97
|
-
threshold = 0.5,
|
|
98
|
-
abbreviate = true,
|
|
99
|
-
decimals
|
|
100
|
-
} = _b, textProps = __objRest(_b, [
|
|
101
|
-
"value",
|
|
102
|
-
"suffix",
|
|
103
|
-
"prefix",
|
|
104
|
-
"duration",
|
|
105
|
-
"threshold",
|
|
106
|
-
"abbreviate",
|
|
107
|
-
"decimals"
|
|
108
|
-
]);
|
|
109
|
-
const [count, setCount] = (0, import_react.useState)(0);
|
|
110
|
-
const [hasTriggered, setHasTriggered] = (0, import_react.useState)(false);
|
|
111
|
-
const ref = (0, import_react.useRef)(null);
|
|
112
|
-
(0, import_react.useEffect)(() => {
|
|
113
|
-
const el = ref.current;
|
|
114
|
-
if (!el) return;
|
|
115
|
-
const observer = new IntersectionObserver(
|
|
116
|
-
([entry]) => {
|
|
117
|
-
if (entry.isIntersecting && !hasTriggered) {
|
|
118
|
-
setHasTriggered(true);
|
|
119
|
-
}
|
|
120
|
-
},
|
|
121
|
-
{ threshold }
|
|
122
|
-
);
|
|
123
|
-
observer.observe(el);
|
|
124
|
-
return () => observer.disconnect();
|
|
125
|
-
}, [hasTriggered, threshold]);
|
|
126
|
-
(0, import_react.useEffect)(() => {
|
|
127
|
-
if (!hasTriggered) return;
|
|
128
|
-
let startTime;
|
|
129
|
-
let raf;
|
|
130
|
-
const animate = (timestamp) => {
|
|
131
|
-
if (!startTime) startTime = timestamp;
|
|
132
|
-
const progress = Math.min((timestamp - startTime) / duration, 1);
|
|
133
|
-
const eased = 1 - Math.pow(1 - progress, 3);
|
|
134
|
-
setCount(eased * value);
|
|
135
|
-
if (progress < 1) {
|
|
136
|
-
raf = requestAnimationFrame(animate);
|
|
137
|
-
}
|
|
138
|
-
};
|
|
139
|
-
raf = requestAnimationFrame(animate);
|
|
140
|
-
return () => cancelAnimationFrame(raf);
|
|
141
|
-
}, [hasTriggered, value, duration]);
|
|
142
|
-
const formatValue = () => {
|
|
143
|
-
if (abbreviate && value >= 1e3) {
|
|
144
|
-
const kValue = count / 1e3;
|
|
145
|
-
return kValue % 1 === 0 ? `${Math.round(kValue)}K` : `${kValue.toFixed(1)}K`;
|
|
146
|
-
}
|
|
147
|
-
if (decimals !== void 0) {
|
|
148
|
-
return count.toFixed(decimals);
|
|
149
|
-
}
|
|
150
|
-
if (value !== Math.floor(value)) {
|
|
151
|
-
return count.toFixed(1);
|
|
152
|
-
}
|
|
153
|
-
return Math.round(count).toString();
|
|
154
|
-
};
|
|
155
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
156
|
-
import_core.Text,
|
|
157
|
-
__spreadProps(__spreadValues({
|
|
158
|
-
component: "span",
|
|
159
|
-
ref,
|
|
160
|
-
style: { fontVariantNumeric: "tabular-nums" }
|
|
161
|
-
}, textProps), {
|
|
162
|
-
children: [
|
|
163
|
-
prefix,
|
|
164
|
-
formatValue(),
|
|
165
|
-
suffix
|
|
166
|
-
]
|
|
167
|
-
})
|
|
168
|
-
);
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
// src/AnimatedWaveform/AnimatedWaveform.tsx
|
|
172
|
-
var import_react2 = require("react");
|
|
173
|
-
var import_framer_motion = require("framer-motion");
|
|
174
|
-
|
|
175
|
-
// src/AnimatedWaveform/AnimatedWaveform.module.css
|
|
176
|
-
var AnimatedWaveform_default = {};
|
|
177
|
-
|
|
178
|
-
// src/AnimatedWaveform/AnimatedWaveform.tsx
|
|
179
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
180
|
-
var BAR_COUNT = 140;
|
|
181
|
-
var BAR_WIDTH = 3;
|
|
182
|
-
var BAR_GAP = 10;
|
|
183
|
-
var VIEW_HEIGHT = 150;
|
|
184
|
-
var MIDLINE = VIEW_HEIGHT / 2;
|
|
185
|
-
function AnimatedWaveform({
|
|
186
|
-
barCount = BAR_COUNT,
|
|
187
|
-
duration = 3,
|
|
188
|
-
repeatDelay = 3
|
|
189
|
-
}) {
|
|
190
|
-
const [mounted, setMounted] = (0, import_react2.useState)(false);
|
|
191
|
-
(0, import_react2.useEffect)(() => {
|
|
192
|
-
setMounted(true);
|
|
193
|
-
}, []);
|
|
194
|
-
if (!mounted) return null;
|
|
195
|
-
const viewWidth = barCount * BAR_GAP;
|
|
196
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: AnimatedWaveform_default.root, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
197
|
-
"svg",
|
|
198
|
-
{
|
|
199
|
-
className: AnimatedWaveform_default.svg,
|
|
200
|
-
viewBox: `0 0 ${viewWidth} ${VIEW_HEIGHT}`,
|
|
201
|
-
preserveAspectRatio: "none",
|
|
202
|
-
children: [
|
|
203
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("linearGradient", { id: "waveformBarGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
|
|
204
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("stop", { offset: "0%", stopColor: "white", stopOpacity: "0" }),
|
|
205
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("stop", { offset: "15%", stopColor: "white", stopOpacity: "0.15" }),
|
|
206
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("stop", { offset: "50%", stopColor: "white", stopOpacity: "0.25" }),
|
|
207
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("stop", { offset: "85%", stopColor: "white", stopOpacity: "0.15" }),
|
|
208
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("stop", { offset: "100%", stopColor: "white", stopOpacity: "0" })
|
|
209
|
-
] }) }),
|
|
210
|
-
[...Array(barCount)].map((_, i) => {
|
|
211
|
-
const x = i * BAR_GAP;
|
|
212
|
-
const baseHeight = 18 + Math.sin(i * 0.4) * 6 + Math.cos(i * 0.7) * 4;
|
|
213
|
-
const staggerDelay = Math.min(i, barCount - 1 - i) * 0.04;
|
|
214
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
|
|
215
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
216
|
-
import_framer_motion.motion.rect,
|
|
217
|
-
{
|
|
218
|
-
x,
|
|
219
|
-
width: BAR_WIDTH,
|
|
220
|
-
rx: "1.5",
|
|
221
|
-
fill: "url(#waveformBarGradient)",
|
|
222
|
-
initial: { height: baseHeight / 2, y: MIDLINE - baseHeight / 4 },
|
|
223
|
-
animate: {
|
|
224
|
-
height: [baseHeight / 2, baseHeight * 2, baseHeight / 2, baseHeight * 1.2, baseHeight / 2],
|
|
225
|
-
y: [
|
|
226
|
-
MIDLINE - baseHeight / 4,
|
|
227
|
-
MIDLINE - baseHeight,
|
|
228
|
-
MIDLINE - baseHeight / 4,
|
|
229
|
-
MIDLINE - baseHeight * 0.6,
|
|
230
|
-
MIDLINE - baseHeight / 4
|
|
231
|
-
]
|
|
232
|
-
},
|
|
233
|
-
transition: {
|
|
234
|
-
duration,
|
|
235
|
-
repeat: Infinity,
|
|
236
|
-
ease: "easeInOut",
|
|
237
|
-
delay: staggerDelay,
|
|
238
|
-
repeatDelay
|
|
239
|
-
}
|
|
240
|
-
}
|
|
241
|
-
),
|
|
242
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
243
|
-
import_framer_motion.motion.rect,
|
|
244
|
-
{
|
|
245
|
-
x,
|
|
246
|
-
y: MIDLINE,
|
|
247
|
-
width: BAR_WIDTH,
|
|
248
|
-
rx: "1.5",
|
|
249
|
-
fill: "url(#waveformBarGradient)",
|
|
250
|
-
initial: { height: baseHeight / 2 },
|
|
251
|
-
animate: {
|
|
252
|
-
height: [baseHeight / 2, baseHeight * 2, baseHeight / 2, baseHeight * 1.2, baseHeight / 2]
|
|
253
|
-
},
|
|
254
|
-
transition: {
|
|
255
|
-
duration,
|
|
256
|
-
repeat: Infinity,
|
|
257
|
-
ease: "easeInOut",
|
|
258
|
-
delay: staggerDelay,
|
|
259
|
-
repeatDelay
|
|
260
|
-
}
|
|
261
|
-
}
|
|
262
|
-
)
|
|
263
|
-
] }, i);
|
|
264
|
-
})
|
|
265
|
-
]
|
|
266
|
-
}
|
|
267
|
-
) });
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
// src/AudioPlayer/AudioPlayer.tsx
|
|
271
|
-
var import_react4 = require("react");
|
|
272
|
-
var import_core3 = require("@mantine/core");
|
|
273
|
-
var import_icons_react = require("@tabler/icons-react");
|
|
274
|
-
|
|
275
|
-
// src/AudioWaveform/AudioWaveform.tsx
|
|
276
|
-
var import_react3 = require("react");
|
|
277
|
-
var import_core2 = require("@mantine/core");
|
|
278
|
-
|
|
279
|
-
// src/AudioWaveform/AudioWaveform.module.css
|
|
280
|
-
var AudioWaveform_default = {};
|
|
281
|
-
|
|
282
|
-
// src/AudioWaveform/AudioWaveform.tsx
|
|
283
|
-
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
284
|
-
function generateWaveformData(barCount = 100) {
|
|
285
|
-
const data = [];
|
|
286
|
-
for (let i = 0; i < barCount; i++) {
|
|
287
|
-
const progress = i / (barCount - 1);
|
|
288
|
-
const baseHeight = 20 + Math.sin(i * 0.1) * 15;
|
|
289
|
-
const noise = (Math.random() - 0.5) * 20;
|
|
290
|
-
const envelope = Math.sin(progress * Math.PI) * 30;
|
|
291
|
-
const midBoost = progress > 0.2 && progress < 0.8 ? Math.random() * 10 : 0;
|
|
292
|
-
const endTaper = progress < 0.05 || progress > 0.95 ? Math.min(progress / 0.05, (1 - progress) / 0.05) : 1;
|
|
293
|
-
data.push(Math.max(5, Math.min(90, (baseHeight + noise + envelope + midBoost) * endTaper)));
|
|
294
|
-
}
|
|
295
|
-
return data;
|
|
296
|
-
}
|
|
297
|
-
var AudioWaveform = (0, import_react3.forwardRef)(
|
|
298
|
-
({
|
|
299
|
-
audioRef,
|
|
300
|
-
currentTime = 0,
|
|
301
|
-
onSeek,
|
|
302
|
-
loading = false,
|
|
303
|
-
waveColor = "#CCCCCC",
|
|
304
|
-
progressColor = "#169bde",
|
|
305
|
-
height = 60,
|
|
306
|
-
barWidth = 2,
|
|
307
|
-
barGap = 1
|
|
308
|
-
}, ref) => {
|
|
309
|
-
const containerRef = (0, import_react3.useRef)(null);
|
|
310
|
-
const [waveformData] = (0, import_react3.useState)(() => generateWaveformData());
|
|
311
|
-
const [duration, setDuration] = (0, import_react3.useState)(0);
|
|
312
|
-
const [progress, setProgress] = (0, import_react3.useState)(0);
|
|
313
|
-
(0, import_react3.useImperativeHandle)(ref, () => ({
|
|
314
|
-
seekTo: (time) => {
|
|
315
|
-
if (duration > 0) {
|
|
316
|
-
setProgress(Math.max(0, Math.min(100, time / duration * 100)));
|
|
317
|
-
}
|
|
318
|
-
},
|
|
319
|
-
getCurrentTime: () => progress / 100 * duration,
|
|
320
|
-
getDuration: () => duration
|
|
321
|
-
}));
|
|
322
|
-
(0, import_react3.useEffect)(() => {
|
|
323
|
-
const audio = audioRef.current;
|
|
324
|
-
if (!audio) return;
|
|
325
|
-
const handleMeta = () => {
|
|
326
|
-
if (audio.duration && !isNaN(audio.duration)) setDuration(audio.duration);
|
|
327
|
-
};
|
|
328
|
-
const handleTime = () => {
|
|
329
|
-
if (audio.duration > 0) setProgress(audio.currentTime / audio.duration * 100);
|
|
330
|
-
};
|
|
331
|
-
if (audio.duration && !isNaN(audio.duration)) setDuration(audio.duration);
|
|
332
|
-
audio.addEventListener("loadedmetadata", handleMeta);
|
|
333
|
-
audio.addEventListener("timeupdate", handleTime);
|
|
334
|
-
return () => {
|
|
335
|
-
audio.removeEventListener("loadedmetadata", handleMeta);
|
|
336
|
-
audio.removeEventListener("timeupdate", handleTime);
|
|
337
|
-
};
|
|
338
|
-
}, [audioRef]);
|
|
339
|
-
(0, import_react3.useEffect)(() => {
|
|
340
|
-
if (duration > 0 && typeof currentTime === "number") {
|
|
341
|
-
setProgress(currentTime / duration * 100);
|
|
342
|
-
}
|
|
343
|
-
}, [currentTime, duration]);
|
|
344
|
-
const handleClick = (0, import_react3.useCallback)(
|
|
345
|
-
(e) => {
|
|
346
|
-
if (!containerRef.current || !onSeek || duration === 0) return;
|
|
347
|
-
const rect = containerRef.current.getBoundingClientRect();
|
|
348
|
-
const seekTime = (e.clientX - rect.left) / rect.width * duration;
|
|
349
|
-
onSeek(seekTime);
|
|
350
|
-
},
|
|
351
|
-
[onSeek, duration]
|
|
352
|
-
);
|
|
353
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
354
|
-
import_core2.Box,
|
|
355
|
-
{
|
|
356
|
-
ref: containerRef,
|
|
357
|
-
className: AudioWaveform_default.root,
|
|
358
|
-
style: { height },
|
|
359
|
-
onClick: handleClick,
|
|
360
|
-
children: [
|
|
361
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
362
|
-
"div",
|
|
363
|
-
{
|
|
364
|
-
className: AudioWaveform_default.progressOverlay,
|
|
365
|
-
style: { width: `${progress}%`, backgroundColor: `${progressColor}15` }
|
|
366
|
-
}
|
|
367
|
-
),
|
|
368
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: AudioWaveform_default.bars, style: { gap: barGap }, children: waveformData.map((barHeight, i) => {
|
|
369
|
-
const isActive = i / waveformData.length * 100 <= progress;
|
|
370
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
371
|
-
"div",
|
|
372
|
-
{
|
|
373
|
-
className: AudioWaveform_default.bar,
|
|
374
|
-
style: {
|
|
375
|
-
width: barWidth,
|
|
376
|
-
height: `${barHeight}%`,
|
|
377
|
-
backgroundColor: isActive ? progressColor : waveColor
|
|
378
|
-
}
|
|
379
|
-
},
|
|
380
|
-
i
|
|
381
|
-
);
|
|
382
|
-
}) }),
|
|
383
|
-
loading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: AudioWaveform_default.loading, children: "Loading waveform..." })
|
|
384
|
-
]
|
|
385
|
-
}
|
|
386
|
-
);
|
|
387
|
-
}
|
|
388
|
-
);
|
|
389
|
-
AudioWaveform.displayName = "AudioWaveform";
|
|
390
|
-
|
|
391
|
-
// src/AudioPlayer/AudioPlayer.module.css
|
|
392
|
-
var AudioPlayer_default = {};
|
|
393
|
-
|
|
394
|
-
// src/AudioPlayer/AudioPlayer.tsx
|
|
395
|
-
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
396
|
-
function formatTime(seconds) {
|
|
397
|
-
const m = Math.floor(seconds / 60);
|
|
398
|
-
const s = Math.floor(seconds % 60);
|
|
399
|
-
return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
|
|
400
|
-
}
|
|
401
|
-
function AudioPlayer({
|
|
402
|
-
src,
|
|
403
|
-
filename = "audio",
|
|
404
|
-
playButtonColor,
|
|
405
|
-
playButtonSize = 32,
|
|
406
|
-
waveColor = "#D0D0D0",
|
|
407
|
-
progressColor = "#a8a8a8",
|
|
408
|
-
waveHeight = 64,
|
|
409
|
-
barWidth = 3,
|
|
410
|
-
barGap = 2,
|
|
411
|
-
showVolume = true,
|
|
412
|
-
showDownload = true
|
|
413
|
-
}) {
|
|
414
|
-
const audioRef = (0, import_react4.useRef)(null);
|
|
415
|
-
const [isPlaying, setIsPlaying] = (0, import_react4.useState)(false);
|
|
416
|
-
const [currentTime, setCurrentTime] = (0, import_react4.useState)(0);
|
|
417
|
-
const [currentTimeFormatted, setCurrentTimeFormatted] = (0, import_react4.useState)("00:00");
|
|
418
|
-
const [totalDuration, setTotalDuration] = (0, import_react4.useState)("00:00");
|
|
419
|
-
const [volume, setVolume] = (0, import_react4.useState)(50);
|
|
420
|
-
const [prevVolume, setPrevVolume] = (0, import_react4.useState)(50);
|
|
421
|
-
const [isMuted, setIsMuted] = (0, import_react4.useState)(false);
|
|
422
|
-
(0, import_react4.useEffect)(() => {
|
|
423
|
-
const audio = audioRef.current;
|
|
424
|
-
if (!audio) return;
|
|
425
|
-
audio.volume = volume / 100;
|
|
426
|
-
const handleTimeUpdate = () => {
|
|
427
|
-
setCurrentTime(audio.currentTime);
|
|
428
|
-
setCurrentTimeFormatted(formatTime(audio.currentTime));
|
|
429
|
-
};
|
|
430
|
-
const handleMeta = () => setTotalDuration(formatTime(audio.duration));
|
|
431
|
-
const handleEnded = () => {
|
|
432
|
-
setTimeout(() => {
|
|
433
|
-
setCurrentTime(0);
|
|
434
|
-
setCurrentTimeFormatted("00:00");
|
|
435
|
-
setIsPlaying(false);
|
|
436
|
-
}, 500);
|
|
437
|
-
};
|
|
438
|
-
const handlePlay = () => setIsPlaying(true);
|
|
439
|
-
const handlePause = () => setIsPlaying(false);
|
|
440
|
-
audio.addEventListener("timeupdate", handleTimeUpdate);
|
|
441
|
-
audio.addEventListener("loadedmetadata", handleMeta);
|
|
442
|
-
audio.addEventListener("ended", handleEnded);
|
|
443
|
-
audio.addEventListener("play", handlePlay);
|
|
444
|
-
audio.addEventListener("pause", handlePause);
|
|
445
|
-
return () => {
|
|
446
|
-
audio.removeEventListener("timeupdate", handleTimeUpdate);
|
|
447
|
-
audio.removeEventListener("loadedmetadata", handleMeta);
|
|
448
|
-
audio.removeEventListener("ended", handleEnded);
|
|
449
|
-
audio.removeEventListener("play", handlePlay);
|
|
450
|
-
audio.removeEventListener("pause", handlePause);
|
|
451
|
-
};
|
|
452
|
-
}, [src]);
|
|
453
|
-
const togglePlay = (0, import_react4.useCallback)(() => {
|
|
454
|
-
const audio = audioRef.current;
|
|
455
|
-
if (!audio) return;
|
|
456
|
-
if (isPlaying) {
|
|
457
|
-
audio.pause();
|
|
458
|
-
} else {
|
|
459
|
-
audio.play().catch(() => {
|
|
460
|
-
});
|
|
461
|
-
}
|
|
462
|
-
}, [isPlaying]);
|
|
463
|
-
const handleSeek = (0, import_react4.useCallback)((time) => {
|
|
464
|
-
const audio = audioRef.current;
|
|
465
|
-
if (audio && !isNaN(time) && isFinite(time)) {
|
|
466
|
-
audio.currentTime = time;
|
|
467
|
-
setCurrentTime(time);
|
|
468
|
-
setCurrentTimeFormatted(formatTime(time));
|
|
469
|
-
}
|
|
470
|
-
}, []);
|
|
471
|
-
const handleVolumeChange = (0, import_react4.useCallback)(
|
|
472
|
-
(value) => {
|
|
473
|
-
const audio = audioRef.current;
|
|
474
|
-
if (!audio) return;
|
|
475
|
-
audio.volume = value / 100;
|
|
476
|
-
setVolume(value);
|
|
477
|
-
if (value > 0) {
|
|
478
|
-
setPrevVolume(value);
|
|
479
|
-
setIsMuted(false);
|
|
480
|
-
} else {
|
|
481
|
-
setIsMuted(true);
|
|
482
|
-
}
|
|
483
|
-
},
|
|
484
|
-
[]
|
|
485
|
-
);
|
|
486
|
-
const toggleMute = (0, import_react4.useCallback)(() => {
|
|
487
|
-
const audio = audioRef.current;
|
|
488
|
-
if (!audio) return;
|
|
489
|
-
if (isMuted) {
|
|
490
|
-
const restore = prevVolume || 50;
|
|
491
|
-
audio.volume = restore / 100;
|
|
492
|
-
setVolume(restore);
|
|
493
|
-
setIsMuted(false);
|
|
494
|
-
} else {
|
|
495
|
-
setPrevVolume(volume);
|
|
496
|
-
audio.volume = 0;
|
|
497
|
-
setVolume(0);
|
|
498
|
-
setIsMuted(true);
|
|
499
|
-
}
|
|
500
|
-
}, [isMuted, volume, prevVolume]);
|
|
501
|
-
const handleDownload = (0, import_react4.useCallback)(() => {
|
|
502
|
-
fetch(src).then((r) => r.blob()).then((blob) => {
|
|
503
|
-
const url = URL.createObjectURL(blob);
|
|
504
|
-
const a = document.createElement("a");
|
|
505
|
-
a.href = url;
|
|
506
|
-
a.download = filename;
|
|
507
|
-
document.body.appendChild(a);
|
|
508
|
-
a.click();
|
|
509
|
-
document.body.removeChild(a);
|
|
510
|
-
URL.revokeObjectURL(url);
|
|
511
|
-
}).catch(() => window.open(src, "_blank"));
|
|
512
|
-
}, [src, filename]);
|
|
513
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core3.Group, { gap: "sm", wrap: "nowrap", className: AudioPlayer_default.root, children: [
|
|
514
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("audio", { ref: audioRef, src, preload: "metadata" }),
|
|
515
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
516
|
-
import_core3.ActionIcon,
|
|
517
|
-
{
|
|
518
|
-
variant: "filled",
|
|
519
|
-
radius: "xl",
|
|
520
|
-
size: playButtonSize,
|
|
521
|
-
color: playButtonColor,
|
|
522
|
-
onClick: togglePlay,
|
|
523
|
-
"aria-label": isPlaying ? "Pause" : "Play",
|
|
524
|
-
className: AudioPlayer_default.playButton,
|
|
525
|
-
children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react.IconPlayerPauseFilled, { size: playButtonSize * 0.5 }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react.IconPlayerPlayFilled, { size: playButtonSize * 0.5 })
|
|
526
|
-
}
|
|
527
|
-
),
|
|
528
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core3.Text, { size: "xs", ff: "monospace", c: "dimmed", className: AudioPlayer_default.time, children: currentTimeFormatted }),
|
|
529
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core3.Box, { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
530
|
-
AudioWaveform,
|
|
531
|
-
{
|
|
532
|
-
audioRef,
|
|
533
|
-
currentTime,
|
|
534
|
-
onSeek: handleSeek,
|
|
535
|
-
waveColor,
|
|
536
|
-
progressColor,
|
|
537
|
-
height: waveHeight,
|
|
538
|
-
barWidth,
|
|
539
|
-
barGap
|
|
540
|
-
}
|
|
541
|
-
) }),
|
|
542
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core3.Text, { size: "xs", ff: "monospace", c: "dimmed", className: AudioPlayer_default.time, children: totalDuration }),
|
|
543
|
-
showVolume && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core3.Group, { gap: 4, wrap: "nowrap", className: AudioPlayer_default.volumeGroup, children: [
|
|
544
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
545
|
-
import_core3.ActionIcon,
|
|
546
|
-
{
|
|
547
|
-
variant: "subtle",
|
|
548
|
-
size: "sm",
|
|
549
|
-
onClick: toggleMute,
|
|
550
|
-
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
551
|
-
children: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react.IconVolumeOff, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react.IconVolume, { size: 16 })
|
|
552
|
-
}
|
|
553
|
-
),
|
|
554
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
555
|
-
import_core3.Slider,
|
|
556
|
-
{
|
|
557
|
-
value: volume,
|
|
558
|
-
onChange: handleVolumeChange,
|
|
559
|
-
size: "xs",
|
|
560
|
-
w: 80,
|
|
561
|
-
"aria-label": "Volume"
|
|
562
|
-
}
|
|
563
|
-
)
|
|
564
|
-
] }),
|
|
565
|
-
showDownload && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core3.ActionIcon, { variant: "subtle", size: "sm", onClick: handleDownload, "aria-label": "Download", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react.IconDownload, { size: 16 }) })
|
|
566
|
-
] });
|
|
567
|
-
}
|
|
568
|
-
|
|
569
|
-
// src/CodeBlock/CodeBlock.tsx
|
|
570
|
-
var import_react5 = require("react");
|
|
571
|
-
var import_core4 = require("@mantine/core");
|
|
572
|
-
|
|
573
|
-
// src/CodeBlock/CodeBlock.module.css
|
|
574
|
-
var CodeBlock_default = {};
|
|
575
|
-
|
|
576
|
-
// src/CodeBlock/CodeBlock.tsx
|
|
577
|
-
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
578
|
-
function CodeBlock({ code, filename, height = 384 }) {
|
|
579
|
-
const [copied, setCopied] = (0, import_react5.useState)(false);
|
|
580
|
-
const handleCopy = (0, import_react5.useCallback)(async () => {
|
|
581
|
-
try {
|
|
582
|
-
await navigator.clipboard.writeText(code);
|
|
583
|
-
setCopied(true);
|
|
584
|
-
setTimeout(() => setCopied(false), 2e3);
|
|
585
|
-
} catch (e) {
|
|
586
|
-
}
|
|
587
|
-
}, [code]);
|
|
588
|
-
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core4.Box, { className: CodeBlock_default.root, children: [
|
|
589
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core4.Group, { justify: "space-between", mb: "xs", children: [
|
|
590
|
-
filename && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core4.Text, { size: "sm", fw: 500, c: "dimmed", children: filename }),
|
|
591
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
592
|
-
import_core4.Button,
|
|
593
|
-
{
|
|
594
|
-
size: "xs",
|
|
595
|
-
radius: "md",
|
|
596
|
-
color: copied ? "green" : "blue",
|
|
597
|
-
onClick: handleCopy,
|
|
598
|
-
children: copied ? "Copied!" : "Copy"
|
|
599
|
-
}
|
|
600
|
-
)
|
|
601
|
-
] }),
|
|
602
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
603
|
-
"textarea",
|
|
604
|
-
{
|
|
605
|
-
readOnly: true,
|
|
606
|
-
value: code,
|
|
607
|
-
className: CodeBlock_default.textarea,
|
|
608
|
-
style: { height }
|
|
609
|
-
}
|
|
610
|
-
)
|
|
611
|
-
] });
|
|
612
|
-
}
|
|
613
|
-
|
|
614
|
-
// src/ColorPalette/ColorPalette.tsx
|
|
615
|
-
var import_core6 = require("@mantine/core");
|
|
616
|
-
|
|
617
|
-
// src/Copyable/Copyable.tsx
|
|
618
|
-
var import_react6 = require("react");
|
|
619
|
-
var import_core5 = require("@mantine/core");
|
|
620
|
-
|
|
621
|
-
// src/Copyable/Copyable.module.css
|
|
622
|
-
var Copyable_default = {};
|
|
623
|
-
|
|
624
|
-
// src/Copyable/Copyable.tsx
|
|
625
|
-
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
626
|
-
function Copyable({ value, children }) {
|
|
627
|
-
const [toast, setToast] = (0, import_react6.useState)(null);
|
|
628
|
-
const handleCopy = (0, import_react6.useCallback)(() => {
|
|
629
|
-
navigator.clipboard.writeText(value).then(() => {
|
|
630
|
-
setToast(`Copied ${value}`);
|
|
631
|
-
setTimeout(() => setToast(null), 1800);
|
|
632
|
-
});
|
|
633
|
-
}, [value]);
|
|
634
|
-
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
|
|
635
|
-
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
636
|
-
"span",
|
|
637
|
-
{
|
|
638
|
-
onClick: handleCopy,
|
|
639
|
-
className: Copyable_default.root,
|
|
640
|
-
title: `Click to copy ${value}`,
|
|
641
|
-
children
|
|
642
|
-
}
|
|
643
|
-
),
|
|
644
|
-
toast && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core5.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
645
|
-
import_core5.Notification,
|
|
646
|
-
{
|
|
647
|
-
withCloseButton: false,
|
|
648
|
-
className: Copyable_default.toast,
|
|
649
|
-
color: "blue",
|
|
650
|
-
children: toast
|
|
651
|
-
}
|
|
652
|
-
) })
|
|
653
|
-
] });
|
|
654
|
-
}
|
|
655
|
-
|
|
656
|
-
// src/ColorPalette/ColorPalette.module.css
|
|
657
|
-
var ColorPalette_default = {};
|
|
658
|
-
|
|
659
|
-
// src/ColorPalette/ColorPalette.tsx
|
|
660
|
-
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
661
|
-
function ColorPalette({ name, shades, mainIndex = 5 }) {
|
|
662
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: ColorPalette_default.root, children: [
|
|
663
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core6.Title, { order: 4, size: "lg", tt: "capitalize", mb: "xs", children: name }),
|
|
664
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core6.SimpleGrid, { cols: 10, spacing: 4, children: shades.map((hex, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Copyable, { value: hex, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: ColorPalette_default.shade, children: [
|
|
665
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
666
|
-
"div",
|
|
667
|
-
{
|
|
668
|
-
className: `${ColorPalette_default.color} ${i === mainIndex ? ColorPalette_default.main : ""}`,
|
|
669
|
-
style: { backgroundColor: hex }
|
|
670
|
-
}
|
|
671
|
-
),
|
|
672
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core6.Text, { size: "xs", c: "dimmed", ta: "center", mt: 4, children: i }),
|
|
673
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core6.Text, { size: "xs", c: "dimmed", ta: "center", ff: "monospace", children: hex })
|
|
674
|
-
] }) }, i)) })
|
|
675
|
-
] });
|
|
676
|
-
}
|
|
677
|
-
|
|
678
|
-
// src/ColorSwatch/ColorSwatch.tsx
|
|
679
|
-
var import_core7 = require("@mantine/core");
|
|
680
|
-
|
|
681
|
-
// src/ColorSwatch/ColorSwatch.module.css
|
|
682
|
-
var ColorSwatch_default = {};
|
|
683
|
-
|
|
684
|
-
// src/ColorSwatch/ColorSwatch.tsx
|
|
685
|
-
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
686
|
-
function ColorSwatch({ name, hex, label }) {
|
|
687
|
-
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Copyable, { value: hex, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core7.Paper, { className: ColorSwatch_default.root, shadow: "lg", radius: "md", withBorder: false, children: [
|
|
688
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: ColorSwatch_default.preview, style: { backgroundColor: hex } }),
|
|
689
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: ColorSwatch_default.info, children: [
|
|
690
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.Text, { fw: 600, size: "sm", children: name }),
|
|
691
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.Text, { size: "xs", c: "dimmed", ff: "monospace", children: hex }),
|
|
692
|
-
label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.Text, { size: "xs", c: "dimmed", children: label })
|
|
693
|
-
] })
|
|
694
|
-
] }) });
|
|
695
|
-
}
|
|
696
|
-
|
|
697
|
-
// src/DosDonts/DosDonts.tsx
|
|
698
|
-
var import_core8 = require("@mantine/core");
|
|
699
|
-
var import_icons_react2 = require("@tabler/icons-react");
|
|
700
|
-
|
|
701
|
-
// src/DosDonts/DosDonts.module.css
|
|
702
|
-
var DosDonts_default = {};
|
|
703
|
-
|
|
704
|
-
// src/DosDonts/DosDonts.tsx
|
|
705
|
-
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
706
|
-
function DosDonts({ items }) {
|
|
707
|
-
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: DosDonts_default.root, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core8.SimpleGrid, { cols: { base: 1, sm: 2 }, spacing: "md", children: [
|
|
708
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core8.Paper, { className: DosDonts_default.dont, p: "md", radius: "md", children: [
|
|
709
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core8.Group, { gap: 6, mb: 6, children: [
|
|
710
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons_react2.IconX, { size: 16, className: DosDonts_default.dontIcon }),
|
|
711
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Text, { size: "sm", fw: 600, className: DosDonts_default.dontLabel, children: "Don't" })
|
|
712
|
-
] }),
|
|
713
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Text, { size: "sm", children: item.dont })
|
|
714
|
-
] }),
|
|
715
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core8.Paper, { className: DosDonts_default.do, p: "md", radius: "md", children: [
|
|
716
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core8.Group, { gap: 6, mb: 6, children: [
|
|
717
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons_react2.IconCheck, { size: 16, className: DosDonts_default.doIcon }),
|
|
718
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Text, { size: "sm", fw: 600, className: DosDonts_default.doLabel, children: "Do" })
|
|
719
|
-
] }),
|
|
720
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Text, { size: "sm", children: item.do })
|
|
721
|
-
] })
|
|
722
|
-
] }, i)) });
|
|
723
|
-
}
|
|
724
|
-
|
|
725
|
-
// src/ExpandableCard/ExpandableCard.tsx
|
|
726
|
-
var import_react7 = require("react");
|
|
727
|
-
var import_core9 = require("@mantine/core");
|
|
728
|
-
var import_framer_motion2 = require("framer-motion");
|
|
729
|
-
|
|
730
|
-
// src/ExpandableCard/ExpandableCard.module.css
|
|
731
|
-
var ExpandableCard_default = {};
|
|
732
|
-
|
|
733
|
-
// src/ExpandableCard/ExpandableCard.tsx
|
|
734
|
-
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
735
|
-
function ExpandableCard({
|
|
736
|
-
title,
|
|
737
|
-
description,
|
|
738
|
-
expandedContent,
|
|
739
|
-
icon: Icon,
|
|
740
|
-
color = "blue",
|
|
741
|
-
iconSize = "lg",
|
|
742
|
-
collapsedHeight = 120,
|
|
743
|
-
threshold = 0.5,
|
|
744
|
-
delay = 300,
|
|
745
|
-
expanded: controlledExpanded,
|
|
746
|
-
onExpandedChange
|
|
747
|
-
}) {
|
|
748
|
-
const ref = (0, import_react7.useRef)(null);
|
|
749
|
-
const [internalExpanded, setInternalExpanded] = (0, import_react7.useState)(false);
|
|
750
|
-
const isControlled = controlledExpanded !== void 0;
|
|
751
|
-
const isExpanded = isControlled ? controlledExpanded : internalExpanded;
|
|
752
|
-
(0, import_react7.useEffect)(() => {
|
|
753
|
-
if (isControlled) return;
|
|
754
|
-
const el = ref.current;
|
|
755
|
-
if (!el) return;
|
|
756
|
-
const observer = new IntersectionObserver(
|
|
757
|
-
([entry]) => {
|
|
758
|
-
if (entry.isIntersecting) {
|
|
759
|
-
setTimeout(() => {
|
|
760
|
-
setInternalExpanded(true);
|
|
761
|
-
onExpandedChange == null ? void 0 : onExpandedChange(true);
|
|
762
|
-
}, delay);
|
|
763
|
-
}
|
|
764
|
-
},
|
|
765
|
-
{ threshold }
|
|
766
|
-
);
|
|
767
|
-
observer.observe(el);
|
|
768
|
-
return () => observer.disconnect();
|
|
769
|
-
}, [isControlled, threshold, delay, onExpandedChange]);
|
|
770
|
-
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
771
|
-
import_core9.Paper,
|
|
772
|
-
__spreadProps(__spreadValues({
|
|
773
|
-
ref,
|
|
774
|
-
radius: 4,
|
|
775
|
-
className: ExpandableCard_default.root,
|
|
776
|
-
component: import_framer_motion2.motion.div
|
|
777
|
-
}, {
|
|
778
|
-
animate: { height: isExpanded ? "auto" : collapsedHeight },
|
|
779
|
-
transition: { duration: 0.5, ease: "easeOut" }
|
|
780
|
-
}), {
|
|
781
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: ExpandableCard_default.inner, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core9.Group, { align: "flex-start", justify: "space-between", gap: "lg", wrap: "nowrap", children: [
|
|
782
|
-
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core9.Stack, { gap: "xs", style: { flex: 1 }, children: [
|
|
783
|
-
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core9.Text, { fw: 700, size: "xl", lh: 1.3, children: title }),
|
|
784
|
-
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core9.Text, { size: "md", c: "dimmed", children: description }),
|
|
785
|
-
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
786
|
-
import_framer_motion2.motion.div,
|
|
787
|
-
{
|
|
788
|
-
initial: { opacity: 0, height: 0 },
|
|
789
|
-
animate: {
|
|
790
|
-
opacity: isExpanded ? 1 : 0,
|
|
791
|
-
height: isExpanded ? "auto" : 0
|
|
792
|
-
},
|
|
793
|
-
transition: { duration: 0.4, delay: 0.2 },
|
|
794
|
-
style: { overflow: "hidden" },
|
|
795
|
-
children: typeof expandedContent === "string" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core9.Text, { size: "sm", c: "dimmed", mt: "sm", children: expandedContent }) : expandedContent
|
|
796
|
-
}
|
|
797
|
-
)
|
|
798
|
-
] }),
|
|
799
|
-
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
800
|
-
import_framer_motion2.motion.div,
|
|
801
|
-
{
|
|
802
|
-
animate: { scale: isExpanded ? 1.1 : 1 },
|
|
803
|
-
transition: { duration: 0.3 },
|
|
804
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core9.ThemeIcon, { size: iconSize, radius: 4, color, variant: "filled", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { size: 20, stroke: 1.5 }) })
|
|
805
|
-
}
|
|
806
|
-
)
|
|
807
|
-
] }) })
|
|
808
|
-
})
|
|
809
|
-
);
|
|
810
|
-
}
|
|
811
|
-
|
|
812
|
-
// src/FadeInSection/FadeInSection.tsx
|
|
813
|
-
var import_react8 = require("react");
|
|
814
|
-
var import_core10 = require("@mantine/core");
|
|
815
|
-
|
|
816
|
-
// src/FadeInSection/FadeInSection.module.css
|
|
817
|
-
var FadeInSection_default = {};
|
|
818
|
-
|
|
819
|
-
// src/FadeInSection/FadeInSection.tsx
|
|
820
|
-
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
821
|
-
function FadeInSection(_a) {
|
|
822
|
-
var _b = _a, {
|
|
823
|
-
children,
|
|
824
|
-
delay = 0,
|
|
825
|
-
threshold = 0.1,
|
|
826
|
-
className
|
|
827
|
-
} = _b, props = __objRest(_b, [
|
|
828
|
-
"children",
|
|
829
|
-
"delay",
|
|
830
|
-
"threshold",
|
|
831
|
-
"className"
|
|
832
|
-
]);
|
|
833
|
-
const ref = (0, import_react8.useRef)(null);
|
|
834
|
-
const [isVisible, setIsVisible] = (0, import_react8.useState)(false);
|
|
835
|
-
(0, import_react8.useEffect)(() => {
|
|
836
|
-
const el = ref.current;
|
|
837
|
-
if (!el) return;
|
|
838
|
-
const observer = new IntersectionObserver(
|
|
839
|
-
([entry]) => {
|
|
840
|
-
if (entry.isIntersecting) {
|
|
841
|
-
if (delay > 0) {
|
|
842
|
-
setTimeout(() => setIsVisible(true), delay);
|
|
843
|
-
} else {
|
|
844
|
-
setIsVisible(true);
|
|
845
|
-
}
|
|
846
|
-
}
|
|
847
|
-
},
|
|
848
|
-
{ threshold }
|
|
849
|
-
);
|
|
850
|
-
observer.observe(el);
|
|
851
|
-
return () => observer.disconnect();
|
|
852
|
-
}, [delay, threshold]);
|
|
853
|
-
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
854
|
-
import_core10.Box,
|
|
855
|
-
__spreadProps(__spreadValues({
|
|
856
|
-
ref,
|
|
857
|
-
className: `${FadeInSection_default.root} ${isVisible ? FadeInSection_default.visible : ""} ${className != null ? className : ""}`
|
|
858
|
-
}, props), {
|
|
859
|
-
children
|
|
860
|
-
})
|
|
861
|
-
);
|
|
862
|
-
}
|
|
863
|
-
|
|
864
|
-
// src/FrequencyWave/FrequencyWave.tsx
|
|
865
|
-
var import_react9 = require("react");
|
|
866
|
-
var import_core11 = require("@mantine/core");
|
|
867
|
-
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
868
|
-
function FrequencyWave({ isActive = false, height = 60 }) {
|
|
869
|
-
const canvasRef = (0, import_react9.useRef)(null);
|
|
870
|
-
const animationRef = (0, import_react9.useRef)(void 0);
|
|
871
|
-
const [isPulsing, setIsPulsing] = (0, import_react9.useState)(false);
|
|
872
|
-
const lastPulseRef = (0, import_react9.useRef)(null);
|
|
873
|
-
const randomSpikeRef = (0, import_react9.useRef)(null);
|
|
874
|
-
const { colorScheme } = (0, import_core11.useMantineColorScheme)();
|
|
875
|
-
const isDark = colorScheme === "dark";
|
|
876
|
-
const colors = {
|
|
877
|
-
start: isDark ? "#7950F2" : "#9775FA",
|
|
878
|
-
mid: isDark ? "#BE4BDB" : "#DA77F2",
|
|
879
|
-
end: isDark ? "#15AABF" : "#22B8CF"
|
|
880
|
-
};
|
|
881
|
-
const drawWave = (0, import_react9.useCallback)(
|
|
882
|
-
(ctx, width, canvasHeight, time) => {
|
|
883
|
-
var _a;
|
|
884
|
-
ctx.clearRect(0, 0, width, canvasHeight);
|
|
885
|
-
const isAnimating = isActive || isPulsing;
|
|
886
|
-
const waveY = canvasHeight * 0.65;
|
|
887
|
-
const baseAmplitude = isActive ? 5 : isPulsing ? 7 : 1.5;
|
|
888
|
-
if (isAnimating) {
|
|
889
|
-
if (randomSpikeRef.current === null) {
|
|
890
|
-
randomSpikeRef.current = Math.random();
|
|
891
|
-
}
|
|
892
|
-
if (Math.floor(time / 500) !== Math.floor((time - 16) / 500)) {
|
|
893
|
-
randomSpikeRef.current = Math.random();
|
|
894
|
-
}
|
|
895
|
-
}
|
|
896
|
-
const gradient = ctx.createLinearGradient(0, 0, width, 0);
|
|
897
|
-
gradient.addColorStop(0, colors.start);
|
|
898
|
-
gradient.addColorStop(0.5, colors.mid);
|
|
899
|
-
gradient.addColorStop(1, colors.end);
|
|
900
|
-
ctx.strokeStyle = gradient;
|
|
901
|
-
ctx.lineWidth = isAnimating ? 2.5 : 1.5;
|
|
902
|
-
ctx.lineCap = "round";
|
|
903
|
-
ctx.lineJoin = "round";
|
|
904
|
-
if (isAnimating) {
|
|
905
|
-
ctx.shadowColor = colors.mid;
|
|
906
|
-
ctx.shadowBlur = isPulsing ? 12 : 8;
|
|
907
|
-
} else {
|
|
908
|
-
ctx.shadowBlur = 0;
|
|
909
|
-
}
|
|
910
|
-
ctx.beginPath();
|
|
911
|
-
const segments = 300;
|
|
912
|
-
const segmentWidth = width / segments;
|
|
913
|
-
const speed = isActive ? 0.02 : isPulsing ? 0.025 : 3e-3;
|
|
914
|
-
for (let i = 0; i <= segments; i++) {
|
|
915
|
-
const x = i * segmentWidth;
|
|
916
|
-
const normalizedX = x / width;
|
|
917
|
-
let y = waveY;
|
|
918
|
-
if (isAnimating) {
|
|
919
|
-
const wave1 = Math.sin(normalizedX * Math.PI * 6 + time * speed) * baseAmplitude;
|
|
920
|
-
const wave2 = Math.sin(normalizedX * Math.PI * 12 + time * speed * 1.3) * (baseAmplitude * 0.4);
|
|
921
|
-
const wave3 = Math.sin(normalizedX * Math.PI * 18 + time * speed * 0.8) * (baseAmplitude * 0.2);
|
|
922
|
-
const spikePosition = (_a = randomSpikeRef.current) != null ? _a : 0.5;
|
|
923
|
-
const distToSpike = Math.abs(normalizedX - spikePosition);
|
|
924
|
-
const spikeAmplitude = distToSpike < 0.15 ? (1 - distToSpike / 0.15) * baseAmplitude * 1 : 0;
|
|
925
|
-
const spikeWave = Math.sin(normalizedX * Math.PI * 20 + time * speed * 2) * spikeAmplitude;
|
|
926
|
-
let aggressiveWave = 0;
|
|
927
|
-
if (isPulsing) {
|
|
928
|
-
aggressiveWave = Math.sin(normalizedX * Math.PI * 30 + time * 0.03) * baseAmplitude * 0.4;
|
|
929
|
-
aggressiveWave += Math.sin(normalizedX * Math.PI * 8 + time * 0.015) * baseAmplitude * 0.5;
|
|
930
|
-
}
|
|
931
|
-
const combinedWave = wave1 + wave2 + wave3 + spikeWave + aggressiveWave;
|
|
932
|
-
const envelope = Math.sin(normalizedX * Math.PI);
|
|
933
|
-
y = waveY + combinedWave * envelope;
|
|
934
|
-
} else {
|
|
935
|
-
y += Math.sin(normalizedX * Math.PI * 2 + time * speed) * baseAmplitude;
|
|
936
|
-
}
|
|
937
|
-
if (i === 0) {
|
|
938
|
-
ctx.moveTo(x, y);
|
|
939
|
-
} else {
|
|
940
|
-
ctx.lineTo(x, y);
|
|
941
|
-
}
|
|
942
|
-
}
|
|
943
|
-
ctx.stroke();
|
|
944
|
-
if (isActive) {
|
|
945
|
-
const barCount = 80;
|
|
946
|
-
const barWidth = 2;
|
|
947
|
-
const barGap = width / barCount;
|
|
948
|
-
const maxBarHeight = 16;
|
|
949
|
-
ctx.shadowBlur = 3;
|
|
950
|
-
for (let i = 0; i < barCount; i++) {
|
|
951
|
-
const x = i * barGap + barGap / 2;
|
|
952
|
-
const normalizedX = x / width;
|
|
953
|
-
const baseBarHeight = Math.sin(normalizedX * Math.PI * 8 + time * 0.025) * 0.5 + Math.sin(normalizedX * Math.PI * 14 + time * 0.018) * 0.3 + Math.sin(normalizedX * Math.PI * 4 + time * 0.03) * 0.2;
|
|
954
|
-
const envelope = Math.sin(normalizedX * Math.PI);
|
|
955
|
-
const barHeight = Math.abs(baseBarHeight) * maxBarHeight * envelope;
|
|
956
|
-
const barGradient = ctx.createLinearGradient(
|
|
957
|
-
x,
|
|
958
|
-
waveY - barHeight / 2,
|
|
959
|
-
x,
|
|
960
|
-
waveY + barHeight / 2
|
|
961
|
-
);
|
|
962
|
-
barGradient.addColorStop(0, colors.start + "90");
|
|
963
|
-
barGradient.addColorStop(0.5, colors.mid + "70");
|
|
964
|
-
barGradient.addColorStop(1, colors.end + "50");
|
|
965
|
-
ctx.fillStyle = barGradient;
|
|
966
|
-
ctx.fillRect(x - barWidth / 2, waveY - barHeight / 2, barWidth, barHeight);
|
|
967
|
-
}
|
|
968
|
-
}
|
|
969
|
-
if (isPulsing) {
|
|
970
|
-
const particleCount = 15;
|
|
971
|
-
for (let i = 0; i < particleCount; i++) {
|
|
972
|
-
const px = (Math.sin(time * 1e-3 + i * 1.5) * 0.5 + 0.5) * width;
|
|
973
|
-
const py = waveY + Math.sin(time * 2e-3 + i) * 8;
|
|
974
|
-
const radius = 1.5 + Math.sin(time * 3e-3 + i * 2) * 0.5;
|
|
975
|
-
ctx.beginPath();
|
|
976
|
-
ctx.arc(px, py, radius, 0, Math.PI * 2);
|
|
977
|
-
ctx.fillStyle = i % 2 === 0 ? colors.start + "80" : colors.end + "80";
|
|
978
|
-
ctx.fill();
|
|
979
|
-
}
|
|
980
|
-
}
|
|
981
|
-
},
|
|
982
|
-
[isActive, isPulsing, colors.start, colors.mid, colors.end]
|
|
983
|
-
);
|
|
984
|
-
(0, import_react9.useEffect)(() => {
|
|
985
|
-
const canvas = canvasRef.current;
|
|
986
|
-
if (!canvas) return;
|
|
987
|
-
const ctx = canvas.getContext("2d");
|
|
988
|
-
if (!ctx) return;
|
|
989
|
-
const updateSize = () => {
|
|
990
|
-
const dpr = window.devicePixelRatio || 1;
|
|
991
|
-
const rect = canvas.getBoundingClientRect();
|
|
992
|
-
canvas.width = rect.width * dpr;
|
|
993
|
-
canvas.height = rect.height * dpr;
|
|
994
|
-
ctx.scale(dpr, dpr);
|
|
995
|
-
};
|
|
996
|
-
updateSize();
|
|
997
|
-
window.addEventListener("resize", updateSize);
|
|
998
|
-
const startTime = performance.now();
|
|
999
|
-
const animate = (currentTime) => {
|
|
1000
|
-
const elapsed = currentTime - startTime;
|
|
1001
|
-
const rect = canvas.getBoundingClientRect();
|
|
1002
|
-
drawWave(ctx, rect.width, rect.height, elapsed);
|
|
1003
|
-
animationRef.current = requestAnimationFrame(animate);
|
|
1004
|
-
};
|
|
1005
|
-
animationRef.current = requestAnimationFrame(animate);
|
|
1006
|
-
return () => {
|
|
1007
|
-
window.removeEventListener("resize", updateSize);
|
|
1008
|
-
if (animationRef.current) {
|
|
1009
|
-
cancelAnimationFrame(animationRef.current);
|
|
1010
|
-
}
|
|
1011
|
-
};
|
|
1012
|
-
}, [drawWave]);
|
|
1013
|
-
(0, import_react9.useEffect)(() => {
|
|
1014
|
-
if (isActive) {
|
|
1015
|
-
queueMicrotask(() => setIsPulsing(false));
|
|
1016
|
-
lastPulseRef.current = Date.now();
|
|
1017
|
-
return;
|
|
1018
|
-
}
|
|
1019
|
-
const checkForPulse = () => {
|
|
1020
|
-
const now = Date.now();
|
|
1021
|
-
if (lastPulseRef.current === null) {
|
|
1022
|
-
lastPulseRef.current = now;
|
|
1023
|
-
}
|
|
1024
|
-
const timeSinceLastPulse = now - lastPulseRef.current;
|
|
1025
|
-
const pulseInterval = 12e4 + Math.random() * 6e4;
|
|
1026
|
-
if (timeSinceLastPulse >= pulseInterval && !isPulsing) {
|
|
1027
|
-
setIsPulsing(true);
|
|
1028
|
-
lastPulseRef.current = now;
|
|
1029
|
-
setTimeout(() => setIsPulsing(false), 4e3);
|
|
1030
|
-
}
|
|
1031
|
-
};
|
|
1032
|
-
const intervalId = setInterval(checkForPulse, 5e3);
|
|
1033
|
-
return () => clearInterval(intervalId);
|
|
1034
|
-
}, [isActive, isPulsing]);
|
|
1035
|
-
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1036
|
-
import_core11.Box,
|
|
1037
|
-
{
|
|
1038
|
-
style: {
|
|
1039
|
-
position: "relative",
|
|
1040
|
-
width: "100%",
|
|
1041
|
-
height,
|
|
1042
|
-
overflow: "hidden",
|
|
1043
|
-
pointerEvents: "none",
|
|
1044
|
-
opacity: isDark ? 1 : 0.8
|
|
1045
|
-
},
|
|
1046
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1047
|
-
"canvas",
|
|
1048
|
-
{
|
|
1049
|
-
ref: canvasRef,
|
|
1050
|
-
style: {
|
|
1051
|
-
width: "100%",
|
|
1052
|
-
height: "100%",
|
|
1053
|
-
display: "block"
|
|
1054
|
-
}
|
|
1055
|
-
}
|
|
1056
|
-
)
|
|
1057
|
-
}
|
|
1058
|
-
);
|
|
1059
|
-
}
|
|
1060
|
-
|
|
1061
|
-
// src/GradientSwatch/GradientSwatch.tsx
|
|
1062
|
-
var import_core12 = require("@mantine/core");
|
|
1063
|
-
|
|
1064
|
-
// src/GradientSwatch/GradientSwatch.module.css
|
|
1065
|
-
var GradientSwatch_default = {};
|
|
1066
|
-
|
|
1067
|
-
// src/GradientSwatch/GradientSwatch.tsx
|
|
1068
|
-
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1069
|
-
function GradientSwatch({ name, colors, description }) {
|
|
1070
|
-
const css = `linear-gradient(135deg, ${colors[0]} 0%, ${colors[1]} 100%)`;
|
|
1071
|
-
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Copyable, { value: css, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Paper, { className: GradientSwatch_default.root, shadow: "lg", radius: "md", children: [
|
|
1072
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: GradientSwatch_default.preview, style: { background: css } }),
|
|
1073
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: GradientSwatch_default.info, children: [
|
|
1074
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { fw: 600, size: "sm", children: name }),
|
|
1075
|
-
description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "xs", c: "dimmed", children: description }),
|
|
1076
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Text, { size: "xs", c: "dimmed", ff: "monospace", children: [
|
|
1077
|
-
colors[0],
|
|
1078
|
-
" \u2192 ",
|
|
1079
|
-
colors[1]
|
|
1080
|
-
] })
|
|
1081
|
-
] })
|
|
1082
|
-
] }) });
|
|
1083
|
-
}
|
|
1084
|
-
|
|
1085
|
-
// src/Hero/Hero.tsx
|
|
1086
|
-
var import_react10 = require("react");
|
|
1087
|
-
var import_core13 = require("@mantine/core");
|
|
1088
|
-
var import_framer_motion3 = require("framer-motion");
|
|
1089
|
-
var import_frequency_mark_white = __toESM(require("@frequencyads/brand/assets/frequency-mark-white.svg"));
|
|
1090
|
-
var import_colors = require("@frequencyads/brand/colors");
|
|
1091
|
-
|
|
1092
|
-
// src/VideoBackground/VideoBackground.module.css
|
|
1093
|
-
var VideoBackground_default = {};
|
|
1094
|
-
|
|
1095
|
-
// src/VideoBackground/VideoBackground.tsx
|
|
1096
|
-
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1097
|
-
function VideoBackground({ src, opacity = 0.3 }) {
|
|
1098
|
-
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: VideoBackground_default.root, style: { opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("video", { autoPlay: true, muted: true, loop: true, playsInline: true, className: VideoBackground_default.video, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("source", { src, type: "video/mp4" }) }) });
|
|
1099
|
-
}
|
|
1100
|
-
|
|
1101
|
-
// src/Hero/Hero.module.css
|
|
1102
|
-
var Hero_default = {};
|
|
1103
|
-
|
|
1104
|
-
// src/Hero/Hero.tsx
|
|
1105
|
-
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1106
|
-
function Hero({
|
|
1107
|
-
variant = "logo",
|
|
1108
|
-
heading,
|
|
1109
|
-
label,
|
|
1110
|
-
tagline,
|
|
1111
|
-
logoSrc = import_frequency_mark_white.default,
|
|
1112
|
-
gradient: gradientName = "frequencyAlive",
|
|
1113
|
-
shimmer = true,
|
|
1114
|
-
primaryAction,
|
|
1115
|
-
secondaryAction,
|
|
1116
|
-
backgroundVideoSrc,
|
|
1117
|
-
showWaveform,
|
|
1118
|
-
showScrollIndicator = false
|
|
1119
|
-
}) {
|
|
1120
|
-
const [mounted, setMounted] = (0, import_react10.useState)(false);
|
|
1121
|
-
const resolvedHeading = heading != null ? heading : variant === "text" ? "Your Message" : void 0;
|
|
1122
|
-
const resolvedLabel = label || (variant === "logo" ? "Welcome" : void 0);
|
|
1123
|
-
const hasActions = primaryAction || secondaryAction;
|
|
1124
|
-
const waveformVisible = showWaveform != null ? showWaveform : true;
|
|
1125
|
-
const grad = import_colors.gradients[gradientName];
|
|
1126
|
-
(0, import_react10.useEffect)(() => {
|
|
1127
|
-
setMounted(true);
|
|
1128
|
-
}, []);
|
|
1129
|
-
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core13.Box, { component: "section", className: Hero_default.root, children: [
|
|
1130
|
-
backgroundVideoSrc && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(VideoBackground, { src: backgroundVideoSrc }),
|
|
1131
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: Hero_default.content, children: [
|
|
1132
|
-
mounted && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
|
|
1133
|
-
resolvedLabel && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1134
|
-
import_framer_motion3.motion.p,
|
|
1135
|
-
{
|
|
1136
|
-
initial: { opacity: 0 },
|
|
1137
|
-
animate: { opacity: 1 },
|
|
1138
|
-
transition: { duration: 0.8, delay: 0.2 },
|
|
1139
|
-
className: Hero_default.label,
|
|
1140
|
-
children: resolvedLabel
|
|
1141
|
-
}
|
|
1142
|
-
),
|
|
1143
|
-
variant === "logo" && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
1144
|
-
import_framer_motion3.motion.div,
|
|
1145
|
-
{
|
|
1146
|
-
initial: { opacity: 0, scale: 0.8 },
|
|
1147
|
-
animate: { opacity: 1, scale: 1 },
|
|
1148
|
-
transition: { duration: 1.2, delay: 0.3, ease: "easeOut" },
|
|
1149
|
-
className: Hero_default.logoWrapper,
|
|
1150
|
-
children: [
|
|
1151
|
-
waveformVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AnimatedWaveform, {}),
|
|
1152
|
-
waveformVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: Hero_default.vignette }),
|
|
1153
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1154
|
-
import_framer_motion3.motion.img,
|
|
1155
|
-
{
|
|
1156
|
-
src: logoSrc,
|
|
1157
|
-
alt: resolvedHeading != null ? resolvedHeading : "Frequency",
|
|
1158
|
-
className: Hero_default.logo,
|
|
1159
|
-
animate: { rotate: [0, 0.5, -0.5, 0] },
|
|
1160
|
-
transition: { duration: 8, repeat: Infinity, ease: "easeInOut" }
|
|
1161
|
-
}
|
|
1162
|
-
),
|
|
1163
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: Hero_default.glow })
|
|
1164
|
-
]
|
|
1165
|
-
}
|
|
1166
|
-
),
|
|
1167
|
-
variant === "text" && resolvedHeading && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
1168
|
-
import_framer_motion3.motion.div,
|
|
1169
|
-
{
|
|
1170
|
-
initial: { opacity: 0, scale: 0.8 },
|
|
1171
|
-
animate: { opacity: 1, scale: 1 },
|
|
1172
|
-
transition: { duration: 1.2, delay: 0.3, ease: "easeOut" },
|
|
1173
|
-
className: Hero_default.textWrapper,
|
|
1174
|
-
children: [
|
|
1175
|
-
waveformVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AnimatedWaveform, {}),
|
|
1176
|
-
waveformVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: Hero_default.vignette }),
|
|
1177
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1178
|
-
import_core13.Title,
|
|
1179
|
-
{
|
|
1180
|
-
order: 1,
|
|
1181
|
-
className: `${Hero_default.heading} ${shimmer ? Hero_default.shimmer : ""}`,
|
|
1182
|
-
style: {
|
|
1183
|
-
backgroundImage: `linear-gradient(135deg, ${grad.from}, ${grad.to}, ${grad.from})`,
|
|
1184
|
-
backgroundSize: shimmer ? "200% 100%" : void 0
|
|
1185
|
-
},
|
|
1186
|
-
children: resolvedHeading
|
|
1187
|
-
}
|
|
1188
|
-
)
|
|
1189
|
-
]
|
|
1190
|
-
}
|
|
1191
|
-
),
|
|
1192
|
-
tagline && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1193
|
-
import_framer_motion3.motion.div,
|
|
1194
|
-
{
|
|
1195
|
-
initial: { opacity: 0, y: 20 },
|
|
1196
|
-
animate: { opacity: 1, y: 0 },
|
|
1197
|
-
transition: { duration: 0.8, delay: 0.7 },
|
|
1198
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core13.Text, { className: Hero_default.tagline, children: tagline })
|
|
1199
|
-
}
|
|
1200
|
-
),
|
|
1201
|
-
hasActions && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1202
|
-
import_framer_motion3.motion.div,
|
|
1203
|
-
{
|
|
1204
|
-
initial: { opacity: 0, y: 20 },
|
|
1205
|
-
animate: { opacity: 1, y: 0 },
|
|
1206
|
-
transition: { duration: 0.8, delay: 0.9 },
|
|
1207
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core13.Group, { gap: "md", justify: "center", wrap: "wrap", children: [
|
|
1208
|
-
primaryAction && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1209
|
-
import_core13.Button,
|
|
1210
|
-
{
|
|
1211
|
-
component: "a",
|
|
1212
|
-
href: primaryAction.href,
|
|
1213
|
-
size: "lg",
|
|
1214
|
-
radius: 4,
|
|
1215
|
-
className: Hero_default.primaryButton,
|
|
1216
|
-
children: primaryAction.label
|
|
1217
|
-
}
|
|
1218
|
-
),
|
|
1219
|
-
secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1220
|
-
import_core13.Button,
|
|
1221
|
-
{
|
|
1222
|
-
component: "a",
|
|
1223
|
-
href: secondaryAction.href,
|
|
1224
|
-
size: "lg",
|
|
1225
|
-
radius: 4,
|
|
1226
|
-
variant: "outline",
|
|
1227
|
-
className: Hero_default.secondaryButton,
|
|
1228
|
-
children: secondaryAction.label
|
|
1229
|
-
}
|
|
1230
|
-
)
|
|
1231
|
-
] })
|
|
1232
|
-
}
|
|
1233
|
-
)
|
|
1234
|
-
] }),
|
|
1235
|
-
mounted && showScrollIndicator && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
1236
|
-
import_framer_motion3.motion.div,
|
|
1237
|
-
{
|
|
1238
|
-
className: Hero_default.scrollIndicator,
|
|
1239
|
-
initial: { opacity: 0 },
|
|
1240
|
-
animate: { opacity: 1 },
|
|
1241
|
-
transition: { duration: 1, delay: 1.4 },
|
|
1242
|
-
children: [
|
|
1243
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: Hero_default.scrollLabel, children: "Scroll" }),
|
|
1244
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1245
|
-
import_framer_motion3.motion.div,
|
|
1246
|
-
{
|
|
1247
|
-
className: Hero_default.scrollLine,
|
|
1248
|
-
animate: { scaleY: [1, 1.5, 1] },
|
|
1249
|
-
transition: { duration: 1.5, repeat: Infinity }
|
|
1250
|
-
}
|
|
1251
|
-
)
|
|
1252
|
-
]
|
|
1253
|
-
}
|
|
1254
|
-
)
|
|
1255
|
-
] })
|
|
1256
|
-
] });
|
|
1257
|
-
}
|
|
1258
|
-
|
|
1259
|
-
// src/HintBadge/HintBadge.tsx
|
|
1260
|
-
var import_core14 = require("@mantine/core");
|
|
1261
|
-
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1262
|
-
function HintBadge({ variant, children }) {
|
|
1263
|
-
const isDo = variant === "do";
|
|
1264
|
-
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
1265
|
-
import_core14.Badge,
|
|
1266
|
-
{
|
|
1267
|
-
variant: "light",
|
|
1268
|
-
color: isDo ? "green" : "red",
|
|
1269
|
-
size: "lg",
|
|
1270
|
-
radius: "sm",
|
|
1271
|
-
styles: {
|
|
1272
|
-
root: { textTransform: "none", fontWeight: 400 },
|
|
1273
|
-
label: { whiteSpace: "normal", lineHeight: 1.4 }
|
|
1274
|
-
},
|
|
1275
|
-
children: [
|
|
1276
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("strong", { children: [
|
|
1277
|
-
isDo ? "Do" : "Don't",
|
|
1278
|
-
":"
|
|
1279
|
-
] }),
|
|
1280
|
-
" ",
|
|
1281
|
-
children
|
|
1282
|
-
]
|
|
1283
|
-
}
|
|
1284
|
-
);
|
|
1285
|
-
}
|
|
1286
|
-
|
|
1287
|
-
// src/MiniAudioPlayer/MiniAudioPlayer.tsx
|
|
1288
|
-
var import_react11 = require("react");
|
|
1289
|
-
var import_core15 = require("@mantine/core");
|
|
1290
|
-
var import_icons_react3 = require("@tabler/icons-react");
|
|
1291
|
-
|
|
1292
|
-
// src/MiniAudioPlayer/MiniAudioPlayer.module.css
|
|
1293
|
-
var MiniAudioPlayer_default = {};
|
|
1294
|
-
|
|
1295
|
-
// src/MiniAudioPlayer/MiniAudioPlayer.tsx
|
|
1296
|
-
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1297
|
-
var SIZE_CONFIG = {
|
|
1298
|
-
mini: { height: 24, buttonSize: 20, iconSize: 14, waveHeight: 16, barWidth: 1, barGap: 0 },
|
|
1299
|
-
small: { height: 32, buttonSize: 28, iconSize: 16, waveHeight: 20, barWidth: 1, barGap: 0 },
|
|
1300
|
-
compact: { height: 40, buttonSize: 32, iconSize: 18, waveHeight: 24, barWidth: 2, barGap: 1 }
|
|
1301
|
-
};
|
|
1302
|
-
var MiniAudioPlayer = (0, import_react11.forwardRef)(
|
|
1303
|
-
({
|
|
1304
|
-
audioUrl,
|
|
1305
|
-
size = "mini",
|
|
1306
|
-
waveColor = "#CCCCCC",
|
|
1307
|
-
progressColor = "#169bde",
|
|
1308
|
-
onPlay,
|
|
1309
|
-
onPause,
|
|
1310
|
-
className,
|
|
1311
|
-
style
|
|
1312
|
-
}, ref) => {
|
|
1313
|
-
const audioRef = (0, import_react11.useRef)(null);
|
|
1314
|
-
const [isPlaying, setIsPlaying] = (0, import_react11.useState)(false);
|
|
1315
|
-
const [currentTime, setCurrentTime] = (0, import_react11.useState)(0);
|
|
1316
|
-
const config = SIZE_CONFIG[size];
|
|
1317
|
-
(0, import_react11.useEffect)(() => {
|
|
1318
|
-
const audio = audioRef.current;
|
|
1319
|
-
if (!audio) return;
|
|
1320
|
-
const handleTimeUpdate = () => setCurrentTime(audio.currentTime);
|
|
1321
|
-
const handleEnded = () => {
|
|
1322
|
-
setIsPlaying(false);
|
|
1323
|
-
setCurrentTime(0);
|
|
1324
|
-
};
|
|
1325
|
-
const handlePause = () => setIsPlaying(false);
|
|
1326
|
-
const handlePlay = () => setIsPlaying(true);
|
|
1327
|
-
audio.addEventListener("timeupdate", handleTimeUpdate);
|
|
1328
|
-
audio.addEventListener("ended", handleEnded);
|
|
1329
|
-
audio.addEventListener("pause", handlePause);
|
|
1330
|
-
audio.addEventListener("play", handlePlay);
|
|
1331
|
-
return () => {
|
|
1332
|
-
audio.removeEventListener("timeupdate", handleTimeUpdate);
|
|
1333
|
-
audio.removeEventListener("ended", handleEnded);
|
|
1334
|
-
audio.removeEventListener("pause", handlePause);
|
|
1335
|
-
audio.removeEventListener("play", handlePlay);
|
|
1336
|
-
};
|
|
1337
|
-
}, [audioUrl]);
|
|
1338
|
-
const handlePlayPause = (0, import_react11.useCallback)(() => {
|
|
1339
|
-
const audio = audioRef.current;
|
|
1340
|
-
if (!audio) return;
|
|
1341
|
-
if (isPlaying) {
|
|
1342
|
-
audio.pause();
|
|
1343
|
-
onPause == null ? void 0 : onPause();
|
|
1344
|
-
} else {
|
|
1345
|
-
audio.play().catch(() => {
|
|
1346
|
-
});
|
|
1347
|
-
onPlay == null ? void 0 : onPlay();
|
|
1348
|
-
}
|
|
1349
|
-
}, [isPlaying, onPlay, onPause]);
|
|
1350
|
-
const handleSeek = (0, import_react11.useCallback)((time) => {
|
|
1351
|
-
const audio = audioRef.current;
|
|
1352
|
-
if (audio && !isNaN(time) && isFinite(time)) {
|
|
1353
|
-
audio.currentTime = time;
|
|
1354
|
-
setCurrentTime(time);
|
|
1355
|
-
}
|
|
1356
|
-
}, []);
|
|
1357
|
-
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
1358
|
-
import_core15.Group,
|
|
1359
|
-
{
|
|
1360
|
-
ref,
|
|
1361
|
-
gap: size === "mini" ? 6 : size === "small" ? 8 : 10,
|
|
1362
|
-
wrap: "nowrap",
|
|
1363
|
-
className: `${MiniAudioPlayer_default.root} ${className != null ? className : ""}`,
|
|
1364
|
-
style: __spreadValues({ height: config.height }, style),
|
|
1365
|
-
children: [
|
|
1366
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("audio", { ref: audioRef, src: audioUrl, preload: "metadata" }),
|
|
1367
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1368
|
-
import_core15.ActionIcon,
|
|
1369
|
-
{
|
|
1370
|
-
variant: "filled",
|
|
1371
|
-
color: "blue",
|
|
1372
|
-
radius: "xl",
|
|
1373
|
-
size: config.buttonSize,
|
|
1374
|
-
onClick: handlePlayPause,
|
|
1375
|
-
"aria-label": isPlaying ? "Pause" : "Play",
|
|
1376
|
-
className: MiniAudioPlayer_default.playButton,
|
|
1377
|
-
children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_react3.IconPlayerPauseFilled, { size: config.iconSize }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_react3.IconPlayerPlayFilled, { size: config.iconSize })
|
|
1378
|
-
}
|
|
1379
|
-
),
|
|
1380
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core15.Box, { style: { flex: 1, minWidth: 80 }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1381
|
-
AudioWaveform,
|
|
1382
|
-
{
|
|
1383
|
-
audioRef,
|
|
1384
|
-
currentTime,
|
|
1385
|
-
onSeek: handleSeek,
|
|
1386
|
-
waveColor,
|
|
1387
|
-
progressColor,
|
|
1388
|
-
height: config.waveHeight,
|
|
1389
|
-
barWidth: config.barWidth,
|
|
1390
|
-
barGap: config.barGap
|
|
1391
|
-
}
|
|
1392
|
-
) })
|
|
1393
|
-
]
|
|
1394
|
-
}
|
|
1395
|
-
);
|
|
1396
|
-
}
|
|
1397
|
-
);
|
|
1398
|
-
MiniAudioPlayer.displayName = "MiniAudioPlayer";
|
|
1399
|
-
|
|
1400
|
-
// src/PrincipleCard/PrincipleCard.tsx
|
|
1401
|
-
var import_core16 = require("@mantine/core");
|
|
1402
|
-
|
|
1403
|
-
// src/PrincipleCard/PrincipleCard.module.css
|
|
1404
|
-
var PrincipleCard_default = {};
|
|
1405
|
-
|
|
1406
|
-
// src/PrincipleCard/PrincipleCard.tsx
|
|
1407
|
-
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1408
|
-
function PrincipleCard({
|
|
1409
|
-
accentColor,
|
|
1410
|
-
title,
|
|
1411
|
-
description,
|
|
1412
|
-
doHint,
|
|
1413
|
-
dontHint
|
|
1414
|
-
}) {
|
|
1415
|
-
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
1416
|
-
import_core16.Paper,
|
|
1417
|
-
{
|
|
1418
|
-
className: PrincipleCard_default.root,
|
|
1419
|
-
p: "lg",
|
|
1420
|
-
radius: "md",
|
|
1421
|
-
style: { borderLeftColor: accentColor },
|
|
1422
|
-
children: [
|
|
1423
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core16.Title, { order: 3, size: "h4", mb: "xs", children: title }),
|
|
1424
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core16.Text, { c: "dimmed", children: description }),
|
|
1425
|
-
(doHint || dontHint) && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core16.Group, { gap: "sm", mt: "md", wrap: "wrap", children: [
|
|
1426
|
-
doHint && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HintBadge, { variant: "do", children: doHint }),
|
|
1427
|
-
dontHint && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HintBadge, { variant: "dont", children: dontHint })
|
|
1428
|
-
] })
|
|
1429
|
-
]
|
|
1430
|
-
}
|
|
1431
|
-
);
|
|
1432
|
-
}
|
|
1433
|
-
|
|
1434
|
-
// src/SpeedDial/SpeedDial.tsx
|
|
1435
|
-
var import_react12 = require("react");
|
|
1436
|
-
var import_core17 = require("@mantine/core");
|
|
1437
|
-
var import_icons_react4 = require("@tabler/icons-react");
|
|
1438
|
-
|
|
1439
|
-
// src/SpeedDial/SpeedDial.module.css
|
|
1440
|
-
var SpeedDial_default = {};
|
|
1441
|
-
|
|
1442
|
-
// src/SpeedDial/SpeedDial.tsx
|
|
1443
|
-
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1444
|
-
function SpeedDial({
|
|
1445
|
-
actions,
|
|
1446
|
-
icon,
|
|
1447
|
-
openIcon,
|
|
1448
|
-
direction = "up",
|
|
1449
|
-
color = "blue",
|
|
1450
|
-
size = 56,
|
|
1451
|
-
defaultOpen = false,
|
|
1452
|
-
open: controlledOpen,
|
|
1453
|
-
onOpenChange,
|
|
1454
|
-
style,
|
|
1455
|
-
className
|
|
1456
|
-
}) {
|
|
1457
|
-
var _a;
|
|
1458
|
-
const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react12.useState)(defaultOpen);
|
|
1459
|
-
const isOpen = controlledOpen != null ? controlledOpen : uncontrolledOpen;
|
|
1460
|
-
const toggle = (0, import_react12.useCallback)(() => {
|
|
1461
|
-
const next = !isOpen;
|
|
1462
|
-
setUncontrolledOpen(next);
|
|
1463
|
-
onOpenChange == null ? void 0 : onOpenChange(next);
|
|
1464
|
-
}, [isOpen, onOpenChange]);
|
|
1465
|
-
const close = (0, import_react12.useCallback)(() => {
|
|
1466
|
-
setUncontrolledOpen(false);
|
|
1467
|
-
onOpenChange == null ? void 0 : onOpenChange(false);
|
|
1468
|
-
}, [onOpenChange]);
|
|
1469
|
-
const isVertical = direction === "up" || direction === "down";
|
|
1470
|
-
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
1471
|
-
import_core17.Box,
|
|
1472
|
-
{
|
|
1473
|
-
className: `${SpeedDial_default.root} ${className != null ? className : ""}`,
|
|
1474
|
-
style,
|
|
1475
|
-
"data-direction": direction,
|
|
1476
|
-
children: [
|
|
1477
|
-
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: SpeedDial_default.actions, "data-direction": direction, children: actions.map((action, i) => {
|
|
1478
|
-
const index = direction === "up" || direction === "left" ? actions.length - 1 - i : i;
|
|
1479
|
-
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1480
|
-
import_core17.Transition,
|
|
1481
|
-
{
|
|
1482
|
-
mounted: isOpen,
|
|
1483
|
-
transition: isVertical ? "slide-up" : "slide-right",
|
|
1484
|
-
duration: 200,
|
|
1485
|
-
timingFunction: "ease",
|
|
1486
|
-
enterDelay: index * 40,
|
|
1487
|
-
children: (transitionStyles) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core17.Tooltip, { label: action.label, position: isVertical ? "left" : "top", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1488
|
-
import_core17.ActionIcon,
|
|
1489
|
-
{
|
|
1490
|
-
variant: "filled",
|
|
1491
|
-
color: "gray",
|
|
1492
|
-
radius: "xl",
|
|
1493
|
-
size: size * 0.7,
|
|
1494
|
-
style: transitionStyles,
|
|
1495
|
-
className: SpeedDial_default.actionButton,
|
|
1496
|
-
onClick: () => {
|
|
1497
|
-
action.onClick();
|
|
1498
|
-
close();
|
|
1499
|
-
},
|
|
1500
|
-
"aria-label": action.label,
|
|
1501
|
-
children: action.icon
|
|
1502
|
-
}
|
|
1503
|
-
) })
|
|
1504
|
-
},
|
|
1505
|
-
action.label
|
|
1506
|
-
);
|
|
1507
|
-
}) }),
|
|
1508
|
-
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1509
|
-
import_core17.ActionIcon,
|
|
1510
|
-
{
|
|
1511
|
-
variant: "filled",
|
|
1512
|
-
color,
|
|
1513
|
-
radius: "xl",
|
|
1514
|
-
size,
|
|
1515
|
-
onClick: toggle,
|
|
1516
|
-
className: SpeedDial_default.fab,
|
|
1517
|
-
"data-open": isOpen || void 0,
|
|
1518
|
-
"aria-label": isOpen ? "Close actions" : "Open actions",
|
|
1519
|
-
children: isOpen ? (_a = openIcon != null ? openIcon : icon) != null ? _a : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons_react4.IconPlus, { size: size * 0.45 }) : icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons_react4.IconPlus, { size: size * 0.45 })
|
|
1520
|
-
}
|
|
1521
|
-
)
|
|
1522
|
-
]
|
|
1523
|
-
}
|
|
1524
|
-
);
|
|
1525
|
-
}
|
|
1526
|
-
|
|
1527
|
-
// src/SplitSection/SplitSection.tsx
|
|
1528
|
-
var import_core18 = require("@mantine/core");
|
|
1529
|
-
|
|
1530
|
-
// src/SplitSection/SplitSection.module.css
|
|
1531
|
-
var SplitSection_default = {};
|
|
1532
|
-
|
|
1533
|
-
// src/SplitSection/SplitSection.tsx
|
|
1534
|
-
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1535
|
-
function SplitSection({
|
|
1536
|
-
badge,
|
|
1537
|
-
badgeColor = "violet",
|
|
1538
|
-
subtitle,
|
|
1539
|
-
title,
|
|
1540
|
-
titleColor = "blue",
|
|
1541
|
-
preTitle,
|
|
1542
|
-
description,
|
|
1543
|
-
actions,
|
|
1544
|
-
heading,
|
|
1545
|
-
children,
|
|
1546
|
-
stickyHeading = false,
|
|
1547
|
-
py,
|
|
1548
|
-
reversed = false,
|
|
1549
|
-
id,
|
|
1550
|
-
className
|
|
1551
|
-
}) {
|
|
1552
|
-
const headingContent = heading != null ? heading : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core18.Stack, { gap: "sm", children: [
|
|
1553
|
-
badge && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core18.Box, { children: [
|
|
1554
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1555
|
-
import_core18.Badge,
|
|
1556
|
-
{
|
|
1557
|
-
color: badgeColor,
|
|
1558
|
-
variant: "filled",
|
|
1559
|
-
size: "sm",
|
|
1560
|
-
radius: 4,
|
|
1561
|
-
tt: "uppercase",
|
|
1562
|
-
fw: 700,
|
|
1563
|
-
children: badge
|
|
1564
|
-
}
|
|
1565
|
-
),
|
|
1566
|
-
subtitle && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Text, { size: "sm", c: "dimmed", mt: "xs", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: subtitle })
|
|
1567
|
-
] }),
|
|
1568
|
-
!badge && subtitle && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Text, { size: "sm", c: "dimmed", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: subtitle }),
|
|
1569
|
-
(preTitle || title) && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core18.Title, { order: 2, className: SplitSection_default.title, children: [
|
|
1570
|
-
preTitle && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: SplitSection_default.preTitle, children: preTitle }),
|
|
1571
|
-
preTitle && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("br", {}),
|
|
1572
|
-
title && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1573
|
-
import_core18.Text,
|
|
1574
|
-
{
|
|
1575
|
-
component: "span",
|
|
1576
|
-
inherit: true,
|
|
1577
|
-
className: SplitSection_default.titleHighlight,
|
|
1578
|
-
c: titleColor,
|
|
1579
|
-
children: title
|
|
1580
|
-
}
|
|
1581
|
-
)
|
|
1582
|
-
] }),
|
|
1583
|
-
description && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Text, { size: "lg", c: "dimmed", lh: 1.7, className: SplitSection_default.description, children: description }),
|
|
1584
|
-
actions && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Box, { mt: "md", children: actions })
|
|
1585
|
-
] });
|
|
1586
|
-
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1587
|
-
import_core18.Box,
|
|
1588
|
-
{
|
|
1589
|
-
component: "section",
|
|
1590
|
-
py: py != null ? py : "calc(var(--mantine-spacing-xl) * 3)",
|
|
1591
|
-
pos: "relative",
|
|
1592
|
-
id,
|
|
1593
|
-
className,
|
|
1594
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Box, { className: SplitSection_default.container, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core18.Box, { className: `${SplitSection_default.layout} ${reversed ? SplitSection_default.reversed : ""}`, children: [
|
|
1595
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1596
|
-
import_core18.Box,
|
|
1597
|
-
{
|
|
1598
|
-
className: `${SplitSection_default.headingSide} ${stickyHeading ? SplitSection_default.sticky : ""}`,
|
|
1599
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Box, { className: stickyHeading ? SplitSection_default.stickyInner : void 0, children: headingContent })
|
|
1600
|
-
}
|
|
1601
|
-
),
|
|
1602
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Box, { className: SplitSection_default.contentSide, children })
|
|
1603
|
-
] }) })
|
|
1604
|
-
}
|
|
1605
|
-
);
|
|
1606
|
-
}
|
|
1607
|
-
|
|
1608
|
-
// src/TestimonialCard/TestimonialCard.tsx
|
|
1609
|
-
var import_core19 = require("@mantine/core");
|
|
1610
|
-
var import_icons_react5 = require("@tabler/icons-react");
|
|
1611
|
-
|
|
1612
|
-
// src/TestimonialCard/TestimonialCard.module.css
|
|
1613
|
-
var TestimonialCard_default = {};
|
|
1614
|
-
|
|
1615
|
-
// src/TestimonialCard/TestimonialCard.tsx
|
|
1616
|
-
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1617
|
-
function getInitials(name) {
|
|
1618
|
-
return name.split(" ").map((part) => part[0]).join("").toUpperCase().slice(0, 2);
|
|
1619
|
-
}
|
|
1620
|
-
function TestimonialCard({
|
|
1621
|
-
quote,
|
|
1622
|
-
name,
|
|
1623
|
-
role,
|
|
1624
|
-
company,
|
|
1625
|
-
avatarSrc,
|
|
1626
|
-
accentColor = "blue"
|
|
1627
|
-
}) {
|
|
1628
|
-
const borderColor = `var(--mantine-color-${accentColor}-filled)`;
|
|
1629
|
-
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core19.Paper, { className: TestimonialCard_default.root, p: "lg", radius: "md", style: { borderLeftColor: borderColor }, children: [
|
|
1630
|
-
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons_react5.IconQuote, { size: 32, className: TestimonialCard_default.quoteIcon, color: borderColor }),
|
|
1631
|
-
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core19.Text, { fs: "italic", mt: "xs", mb: "md", children: quote }),
|
|
1632
|
-
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core19.Group, { gap: "sm", children: [
|
|
1633
|
-
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core19.Avatar, { src: avatarSrc, alt: name, color: accentColor, radius: "xl", size: "md", children: getInitials(name) }),
|
|
1634
|
-
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core19.Stack, { gap: 0, children: [
|
|
1635
|
-
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core19.Text, { fw: 600, size: "sm", children: name }),
|
|
1636
|
-
(role || company) && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core19.Text, { size: "xs", c: "dimmed", children: [role, company].filter(Boolean).join(", ") })
|
|
1637
|
-
] })
|
|
1638
|
-
] })
|
|
1639
|
-
] });
|
|
1640
|
-
}
|
|
1641
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
1642
|
-
0 && (module.exports = {
|
|
1643
|
-
AnimatedCounter,
|
|
1644
|
-
AnimatedWaveform,
|
|
1645
|
-
AudioPlayer,
|
|
1646
|
-
AudioWaveform,
|
|
1647
|
-
CodeBlock,
|
|
1648
|
-
ColorPalette,
|
|
1649
|
-
ColorSwatch,
|
|
1650
|
-
Copyable,
|
|
1651
|
-
DosDonts,
|
|
1652
|
-
ExpandableCard,
|
|
1653
|
-
FadeInSection,
|
|
1654
|
-
FrequencyWave,
|
|
1655
|
-
GradientSwatch,
|
|
1656
|
-
Hero,
|
|
1657
|
-
HintBadge,
|
|
1658
|
-
MiniAudioPlayer,
|
|
1659
|
-
PrincipleCard,
|
|
1660
|
-
SpeedDial,
|
|
1661
|
-
SplitSection,
|
|
1662
|
-
TestimonialCard,
|
|
1663
|
-
VideoBackground
|
|
1664
|
-
});
|
|
2
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),t=require("@mantine/core"),k=require("framer-motion"),z=require("@tabler/icons-react"),fe=require("@frequencyads/brand/assets/frequency-mark-white.svg"),_e=require("@frequencyads/brand/colors");function ve({value:s,suffix:n="",prefix:i="",duration:a=2e3,threshold:l=.5,abbreviate:p=!0,decimals:g,...j}){const[_,d]=c.useState(0),[h,y]=c.useState(!1),r=c.useRef(null);c.useEffect(()=>{const m=r.current;if(!m)return;const u=new IntersectionObserver(([b])=>{b.isIntersecting&&!h&&y(!0)},{threshold:l});return u.observe(m),()=>u.disconnect()},[h,l]),c.useEffect(()=>{if(!h)return;let m,u;const b=o=>{m||(m=o);const f=Math.min((o-m)/a,1),w=1-Math.pow(1-f,3);d(w*s),f<1&&(u=requestAnimationFrame(b))};return u=requestAnimationFrame(b),()=>cancelAnimationFrame(u)},[h,s,a]);const v=()=>{if(p&&s>=1e3){const m=_/1e3;return m%1===0?`${Math.round(m)}K`:`${m.toFixed(1)}K`}return g!==void 0?_.toFixed(g):s!==Math.floor(s)?_.toFixed(1):Math.round(_).toString()};return e.jsxs(t.Text,{component:"span",ref:r,style:{fontVariantNumeric:"tabular-nums"},...j,children:[i,v(),n]})}const je="_root_1bq7s_1",ge="_svg_1bq7s_12",oe={root:je,svg:ge},ye=140,ne=3,ae=10,he=150,F=he/2;function te({barCount:s=ye,duration:n=3,repeatDelay:i=3}){const[a,l]=c.useState(!1);if(c.useEffect(()=>{l(!0)},[]),!a)return null;const p=s*ae;return e.jsx("div",{className:oe.root,children:e.jsxs("svg",{className:oe.svg,viewBox:`0 0 ${p} ${he}`,preserveAspectRatio:"none",children:[e.jsx("defs",{children:e.jsxs("linearGradient",{id:"waveformBarGradient",x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[e.jsx("stop",{offset:"0%",stopColor:"white",stopOpacity:"0"}),e.jsx("stop",{offset:"15%",stopColor:"white",stopOpacity:"0.15"}),e.jsx("stop",{offset:"50%",stopColor:"white",stopOpacity:"0.25"}),e.jsx("stop",{offset:"85%",stopColor:"white",stopOpacity:"0.15"}),e.jsx("stop",{offset:"100%",stopColor:"white",stopOpacity:"0"})]})}),[...Array(s)].map((g,j)=>{const _=j*ae,d=18+Math.sin(j*.4)*6+Math.cos(j*.7)*4,h=Math.min(j,s-1-j)*.04;return e.jsxs("g",{children:[e.jsx(k.motion.rect,{x:_,width:ne,rx:"1.5",fill:"url(#waveformBarGradient)",initial:{height:d/2,y:F-d/4},animate:{height:[d/2,d*2,d/2,d*1.2,d/2],y:[F-d/4,F-d,F-d/4,F-d*.6,F-d/4]},transition:{duration:n,repeat:1/0,ease:"easeInOut",delay:h,repeatDelay:i}}),e.jsx(k.motion.rect,{x:_,y:F,width:ne,rx:"1.5",fill:"url(#waveformBarGradient)",initial:{height:d/2},animate:{height:[d/2,d*2,d/2,d*1.2,d/2]},transition:{duration:n,repeat:1/0,ease:"easeInOut",delay:h,repeatDelay:i}})]},j)})]})})}const be="_root_1pkxe_1",we="_progressOverlay_1pkxe_9",Ie="_bars_1pkxe_19",Ne="_bar_1pkxe_19",Se="_loading_1pkxe_34",H={root:be,progressOverlay:we,bars:Ie,bar:Ne,loading:Se};function Ce(s=100){const n=[];for(let i=0;i<s;i++){const a=i/(s-1),l=20+Math.sin(i*.1)*15,p=(Math.random()-.5)*20,g=Math.sin(a*Math.PI)*30,j=a>.2&&a<.8?Math.random()*10:0,_=a<.05||a>.95?Math.min(a/.05,(1-a)/.05):1;n.push(Math.max(5,Math.min(90,(l+p+g+j)*_)))}return n}const K=c.forwardRef(({audioRef:s,currentTime:n=0,onSeek:i,loading:a=!1,waveColor:l="#CCCCCC",progressColor:p="#169bde",height:g=60,barWidth:j=2,barGap:_=1},d)=>{const h=c.useRef(null),[y]=c.useState(()=>Ce()),[r,v]=c.useState(0),[m,u]=c.useState(0);c.useImperativeHandle(d,()=>({seekTo:o=>{r>0&&u(Math.max(0,Math.min(100,o/r*100)))},getCurrentTime:()=>m/100*r,getDuration:()=>r})),c.useEffect(()=>{const o=s.current;if(!o)return;const f=()=>{o.duration&&!isNaN(o.duration)&&v(o.duration)},w=()=>{o.duration>0&&u(o.currentTime/o.duration*100)};return o.duration&&!isNaN(o.duration)&&v(o.duration),o.addEventListener("loadedmetadata",f),o.addEventListener("timeupdate",w),()=>{o.removeEventListener("loadedmetadata",f),o.removeEventListener("timeupdate",w)}},[s]),c.useEffect(()=>{r>0&&typeof n=="number"&&u(n/r*100)},[n,r]);const b=c.useCallback(o=>{if(!h.current||!i||r===0)return;const f=h.current.getBoundingClientRect(),w=(o.clientX-f.left)/f.width*r;i(w)},[i,r]);return e.jsxs(t.Box,{ref:h,className:H.root,style:{height:g},onClick:b,children:[e.jsx("div",{className:H.progressOverlay,style:{width:`${m}%`,backgroundColor:`${p}15`}}),e.jsx("div",{className:H.bars,style:{gap:_},children:y.map((o,f)=>{const w=f/y.length*100<=m;return e.jsx("div",{className:H.bar,style:{width:j,height:`${o}%`,backgroundColor:w?p:l}},f)})}),a&&e.jsx("div",{className:H.loading,children:"Loading waveform..."})]})});K.displayName="AudioWaveform";const Te="_root_n9zxy_1",ke="_playButton_n9zxy_8",Me="_time_n9zxy_22",ze="_volumeGroup_n9zxy_28",O={root:Te,playButton:ke,time:Me,volumeGroup:ze};function Q(s){const n=Math.floor(s/60),i=Math.floor(s%60);return`${n.toString().padStart(2,"0")}:${i.toString().padStart(2,"0")}`}function Be({src:s,filename:n="audio",playButtonColor:i,playButtonSize:a=32,waveColor:l="#D0D0D0",progressColor:p="#a8a8a8",waveHeight:g=64,barWidth:j=3,barGap:_=2,showVolume:d=!0,showDownload:h=!0}){const y=c.useRef(null),[r,v]=c.useState(!1),[m,u]=c.useState(0),[b,o]=c.useState("00:00"),[f,w]=c.useState("00:00"),[M,E]=c.useState(50),[W,P]=c.useState(50),[C,N]=c.useState(!1);c.useEffect(()=>{const x=y.current;if(!x)return;x.volume=M/100;const I=()=>{u(x.currentTime),o(Q(x.currentTime))},T=()=>w(Q(x.duration)),A=()=>{setTimeout(()=>{u(0),o("00:00"),v(!1)},500)},V=()=>v(!0),U=()=>v(!1);return x.addEventListener("timeupdate",I),x.addEventListener("loadedmetadata",T),x.addEventListener("ended",A),x.addEventListener("play",V),x.addEventListener("pause",U),()=>{x.removeEventListener("timeupdate",I),x.removeEventListener("loadedmetadata",T),x.removeEventListener("ended",A),x.removeEventListener("play",V),x.removeEventListener("pause",U)}},[s]);const $=c.useCallback(()=>{const x=y.current;x&&(r?x.pause():x.play().catch(()=>{}))},[r]),L=c.useCallback(x=>{const I=y.current;I&&!isNaN(x)&&isFinite(x)&&(I.currentTime=x,u(x),o(Q(x)))},[]),G=c.useCallback(x=>{const I=y.current;I&&(I.volume=x/100,E(x),x>0?(P(x),N(!1)):N(!0))},[]),R=c.useCallback(()=>{const x=y.current;if(x)if(C){const I=W||50;x.volume=I/100,E(I),N(!1)}else P(M),x.volume=0,E(0),N(!0)},[C,M,W]),q=c.useCallback(()=>{fetch(s).then(x=>x.blob()).then(x=>{const I=URL.createObjectURL(x),T=document.createElement("a");T.href=I,T.download=n,document.body.appendChild(T),T.click(),document.body.removeChild(T),URL.revokeObjectURL(I)}).catch(()=>window.open(s,"_blank"))},[s,n]);return e.jsxs(t.Group,{gap:"sm",wrap:"nowrap",className:O.root,children:[e.jsx("audio",{ref:y,src:s,preload:"metadata"}),e.jsx(t.ActionIcon,{variant:"filled",radius:"xl",size:a,color:i,onClick:$,"aria-label":r?"Pause":"Play",className:O.playButton,children:r?e.jsx(z.IconPlayerPauseFilled,{size:a*.5}):e.jsx(z.IconPlayerPlayFilled,{size:a*.5})}),e.jsx(t.Text,{size:"xs",ff:"monospace",c:"dimmed",className:O.time,children:b}),e.jsx(t.Box,{style:{flex:1,minWidth:0},children:e.jsx(K,{audioRef:y,currentTime:m,onSeek:L,waveColor:l,progressColor:p,height:g,barWidth:j,barGap:_})}),e.jsx(t.Text,{size:"xs",ff:"monospace",c:"dimmed",className:O.time,children:f}),d&&e.jsxs(t.Group,{gap:4,wrap:"nowrap",className:O.volumeGroup,children:[e.jsx(t.ActionIcon,{variant:"subtle",size:"sm",onClick:R,"aria-label":C?"Unmute":"Mute",children:C?e.jsx(z.IconVolumeOff,{size:16}):e.jsx(z.IconVolume,{size:16})}),e.jsx(t.Slider,{value:M,onChange:G,size:"xs",w:80,"aria-label":"Volume"})]}),h&&e.jsx(t.ActionIcon,{variant:"subtle",size:"sm",onClick:q,"aria-label":"Download",children:e.jsx(z.IconDownload,{size:16})})]})}const $e="_root_ujac8_1",Pe="_textarea_ujac8_5",ie={root:$e,textarea:Pe};function Le({code:s,filename:n,height:i=384}){const[a,l]=c.useState(!1),p=c.useCallback(async()=>{try{await navigator.clipboard.writeText(s),l(!0),setTimeout(()=>l(!1),2e3)}catch{}},[s]);return e.jsxs(t.Box,{className:ie.root,children:[e.jsxs(t.Group,{justify:"space-between",mb:"xs",children:[n&&e.jsx(t.Text,{size:"sm",fw:500,c:"dimmed",children:n}),e.jsx(t.Button,{size:"xs",radius:"md",color:a?"green":"blue",onClick:p,children:a?"Copied!":"Copy"})]}),e.jsx("textarea",{readOnly:!0,value:s,className:ie.textarea,style:{height:i}})]})}const Ee="_root_ix1b2_1",We="_toast_ix1b2_5",re={root:Ee,toast:We};function J({value:s,children:n}){const[i,a]=c.useState(null),l=c.useCallback(()=>{navigator.clipboard.writeText(s).then(()=>{a(`Copied ${s}`),setTimeout(()=>a(null),1800)})},[s]);return e.jsxs(e.Fragment,{children:[e.jsx("span",{onClick:l,className:re.root,title:`Click to copy ${s}`,children:n}),i&&e.jsx(t.Portal,{children:e.jsx(t.Notification,{withCloseButton:!1,className:re.toast,color:"blue",children:i})})]})}const Ge="_root_3ht5s_1",Re="_shade_3ht5s_5",Fe="_color_3ht5s_10",De="_main_3ht5s_20",X={root:Ge,shade:Re,color:Fe,main:De};function Ae({name:s,shades:n,mainIndex:i=5}){return e.jsxs("div",{className:X.root,children:[e.jsx(t.Title,{order:4,size:"lg",tt:"capitalize",mb:"xs",children:s}),e.jsx(t.SimpleGrid,{cols:10,spacing:4,children:n.map((a,l)=>e.jsx(J,{value:a,children:e.jsxs("div",{className:X.shade,children:[e.jsx("div",{className:`${X.color} ${l===i?X.main:""}`,style:{backgroundColor:a}}),e.jsx(t.Text,{size:"xs",c:"dimmed",ta:"center",mt:4,children:l}),e.jsx(t.Text,{size:"xs",c:"dimmed",ta:"center",ff:"monospace",children:a})]})},l))})]})}const qe="_root_1vxkx_1",He="_preview_1vxkx_11",Oe="_info_1vxkx_15",Z={root:qe,preview:He,info:Oe};function Ve({name:s,hex:n,label:i}){return e.jsx(J,{value:n,children:e.jsxs(t.Paper,{className:Z.root,shadow:"lg",radius:"md",withBorder:!1,children:[e.jsx("div",{className:Z.preview,style:{backgroundColor:n}}),e.jsxs("div",{className:Z.info,children:[e.jsx(t.Text,{fw:600,size:"sm",children:s}),e.jsx(t.Text,{size:"xs",c:"dimmed",ff:"monospace",children:n}),i&&e.jsx(t.Text,{size:"xs",c:"dimmed",children:i})]})]})})}const Ue="_root_dzed6_1",Xe="_dont_dzed6_7",Ye="_dontIcon_dzed6_12",Ke="_dontLabel_dzed6_13",Je="_doIcon_dzed6_22",Qe="_doLabel_dzed6_23",D={root:Ue,dont:Xe,dontIcon:Ye,dontLabel:Ke,do:"_do_dzed6_7",doIcon:Je,doLabel:Qe};function Ze({items:s}){return e.jsx("div",{className:D.root,children:s.map((n,i)=>e.jsxs(t.SimpleGrid,{cols:{base:1,sm:2},spacing:"md",children:[e.jsxs(t.Paper,{className:D.dont,p:"md",radius:"md",children:[e.jsxs(t.Group,{gap:6,mb:6,children:[e.jsx(z.IconX,{size:16,className:D.dontIcon}),e.jsx(t.Text,{size:"sm",fw:600,className:D.dontLabel,children:"Don't"})]}),e.jsx(t.Text,{size:"sm",children:n.dont})]}),e.jsxs(t.Paper,{className:D.do,p:"md",radius:"md",children:[e.jsxs(t.Group,{gap:6,mb:6,children:[e.jsx(z.IconCheck,{size:16,className:D.doIcon}),e.jsx(t.Text,{size:"sm",fw:600,className:D.doLabel,children:"Do"})]}),e.jsx(t.Text,{size:"sm",children:n.do})]})]},i))})}const et="_root_xi08i_1",tt="_inner_xi08i_6",ce={root:et,inner:tt};function st({title:s,description:n,expandedContent:i,icon:a,color:l="blue",iconSize:p="lg",collapsedHeight:g=120,threshold:j=.5,delay:_=300,expanded:d,onExpandedChange:h}){const y=c.useRef(null),[r,v]=c.useState(!1),m=d!==void 0,u=m?d:r;return c.useEffect(()=>{if(m)return;const b=y.current;if(!b)return;const o=new IntersectionObserver(([f])=>{f.isIntersecting&&setTimeout(()=>{v(!0),h==null||h(!0)},_)},{threshold:j});return o.observe(b),()=>o.disconnect()},[m,j,_,h]),e.jsx(t.Paper,{ref:y,radius:4,className:ce.root,component:k.motion.div,animate:{height:u?"auto":g},transition:{duration:.5,ease:"easeOut"},children:e.jsx("div",{className:ce.inner,children:e.jsxs(t.Group,{align:"flex-start",justify:"space-between",gap:"lg",wrap:"nowrap",children:[e.jsxs(t.Stack,{gap:"xs",style:{flex:1},children:[e.jsx(t.Text,{fw:700,size:"xl",lh:1.3,children:s}),e.jsx(t.Text,{size:"md",c:"dimmed",children:n}),e.jsx(k.motion.div,{initial:{opacity:0,height:0},animate:{opacity:u?1:0,height:u?"auto":0},transition:{duration:.4,delay:.2},style:{overflow:"hidden"},children:typeof i=="string"?e.jsx(t.Text,{size:"sm",c:"dimmed",mt:"sm",children:i}):i})]}),e.jsx(k.motion.div,{animate:{scale:u?1.1:1},transition:{duration:.3},children:e.jsx(t.ThemeIcon,{size:p,radius:4,color:l,variant:"filled",children:e.jsx(a,{size:20,stroke:1.5})})})]})})})}const ot="_root_ho0ln_1",nt="_visible_ho0ln_7",le={root:ot,visible:nt};function at({children:s,delay:n=0,threshold:i=.1,className:a,...l}){const p=c.useRef(null),[g,j]=c.useState(!1);return c.useEffect(()=>{const _=p.current;if(!_)return;const d=new IntersectionObserver(([h])=>{h.isIntersecting&&(n>0?setTimeout(()=>j(!0),n):j(!0))},{threshold:i});return d.observe(_),()=>d.disconnect()},[n,i]),e.jsx(t.Box,{ref:p,className:`${le.root} ${g?le.visible:""} ${a??""}`,...l,children:s})}function it({isActive:s=!1,height:n=60}){const i=c.useRef(null),a=c.useRef(void 0),[l,p]=c.useState(!1),g=c.useRef(null),j=c.useRef(null),{colorScheme:_}=t.useMantineColorScheme(),d=_==="dark",h={start:d?"#7950F2":"#9775FA",mid:d?"#BE4BDB":"#DA77F2",end:d?"#15AABF":"#22B8CF"},y=c.useCallback((r,v,m,u)=>{r.clearRect(0,0,v,m);const b=s||l,o=m*.65,f=s?5:l?7:1.5;b&&(j.current===null&&(j.current=Math.random()),Math.floor(u/500)!==Math.floor((u-16)/500)&&(j.current=Math.random()));const w=r.createLinearGradient(0,0,v,0);w.addColorStop(0,h.start),w.addColorStop(.5,h.mid),w.addColorStop(1,h.end),r.strokeStyle=w,r.lineWidth=b?2.5:1.5,r.lineCap="round",r.lineJoin="round",b?(r.shadowColor=h.mid,r.shadowBlur=l?12:8):r.shadowBlur=0,r.beginPath();const M=300,E=v/M,W=s?.02:l?.025:.003;for(let P=0;P<=M;P++){const C=P*E,N=C/v;let $=o;if(b){const L=Math.sin(N*Math.PI*6+u*W)*f,G=Math.sin(N*Math.PI*12+u*W*1.3)*(f*.4),R=Math.sin(N*Math.PI*18+u*W*.8)*(f*.2),q=j.current??.5,x=Math.abs(N-q),I=x<.15?(1-x/.15)*f*1:0,T=Math.sin(N*Math.PI*20+u*W*2)*I;let A=0;l&&(A=Math.sin(N*Math.PI*30+u*.03)*f*.4,A+=Math.sin(N*Math.PI*8+u*.015)*f*.5);const V=L+G+R+T+A,U=Math.sin(N*Math.PI);$=o+V*U}else $+=Math.sin(N*Math.PI*2+u*W)*f;P===0?r.moveTo(C,$):r.lineTo(C,$)}if(r.stroke(),s){const N=v/80,$=16;r.shadowBlur=3;for(let L=0;L<80;L++){const G=L*N+N/2,R=G/v,q=Math.sin(R*Math.PI*8+u*.025)*.5+Math.sin(R*Math.PI*14+u*.018)*.3+Math.sin(R*Math.PI*4+u*.03)*.2,x=Math.sin(R*Math.PI),I=Math.abs(q)*$*x,T=r.createLinearGradient(G,o-I/2,G,o+I/2);T.addColorStop(0,h.start+"90"),T.addColorStop(.5,h.mid+"70"),T.addColorStop(1,h.end+"50"),r.fillStyle=T,r.fillRect(G-2/2,o-I/2,2,I)}}if(l)for(let C=0;C<15;C++){const N=(Math.sin(u*.001+C*1.5)*.5+.5)*v,$=o+Math.sin(u*.002+C)*8,L=1.5+Math.sin(u*.003+C*2)*.5;r.beginPath(),r.arc(N,$,L,0,Math.PI*2),r.fillStyle=C%2===0?h.start+"80":h.end+"80",r.fill()}},[s,l,h.start,h.mid,h.end]);return c.useEffect(()=>{const r=i.current;if(!r)return;const v=r.getContext("2d");if(!v)return;const m=()=>{const o=window.devicePixelRatio||1,f=r.getBoundingClientRect();r.width=f.width*o,r.height=f.height*o,v.scale(o,o)};m(),window.addEventListener("resize",m);const u=performance.now(),b=o=>{const f=o-u,w=r.getBoundingClientRect();y(v,w.width,w.height,f),a.current=requestAnimationFrame(b)};return a.current=requestAnimationFrame(b),()=>{window.removeEventListener("resize",m),a.current&&cancelAnimationFrame(a.current)}},[y]),c.useEffect(()=>{if(s){queueMicrotask(()=>p(!1)),g.current=Date.now();return}const v=setInterval(()=>{const m=Date.now();g.current===null&&(g.current=m);const u=m-g.current,b=12e4+Math.random()*6e4;u>=b&&!l&&(p(!0),g.current=m,setTimeout(()=>p(!1),4e3))},5e3);return()=>clearInterval(v)},[s,l]),e.jsx(t.Box,{style:{position:"relative",width:"100%",height:n,overflow:"hidden",pointerEvents:"none",opacity:d?1:.8},children:e.jsx("canvas",{ref:i,style:{width:"100%",height:"100%",display:"block"}})})}const rt="_root_9li00_1",ct="_preview_9li00_11",lt="_info_9li00_15",ee={root:rt,preview:ct,info:lt};function dt({name:s,colors:n,description:i}){const a=`linear-gradient(135deg, ${n[0]} 0%, ${n[1]} 100%)`;return e.jsx(J,{value:a,children:e.jsxs(t.Paper,{className:ee.root,shadow:"lg",radius:"md",children:[e.jsx("div",{className:ee.preview,style:{background:a}}),e.jsxs("div",{className:ee.info,children:[e.jsx(t.Text,{fw:600,size:"sm",children:s}),i&&e.jsx(t.Text,{size:"xs",c:"dimmed",children:i}),e.jsxs(t.Text,{size:"xs",c:"dimmed",ff:"monospace",children:[n[0]," → ",n[1]]})]})]})})}const ut="_root_1vlvy_1",mt="_video_1vlvy_9",de={root:ut,video:mt};function xe({src:s,opacity:n=.3}){return e.jsx("div",{className:de.root,style:{opacity:n},children:e.jsx("video",{autoPlay:!0,muted:!0,loop:!0,playsInline:!0,className:de.video,children:e.jsx("source",{src:s,type:"video/mp4"})})})}const ht="_root_1suaa_1",xt="_content_1suaa_8",pt="_label_1suaa_21",ft="_vignette_1suaa_37",_t="_logoWrapper_1suaa_50",vt="_logo_1suaa_50",jt="_glow_1suaa_73",gt="_textWrapper_1suaa_85",yt="_heading_1suaa_91",bt="_shimmer_1suaa_125",wt="_tagline_1suaa_129",It="_primaryButton_1suaa_143",Nt="_secondaryButton_1suaa_148",St="_scrollIndicator_1suaa_160",Ct="_scrollLabel_1suaa_171",Tt="_scrollLine_1suaa_179",S={root:ht,content:xt,label:pt,vignette:ft,logoWrapper:_t,logo:vt,glow:jt,textWrapper:gt,heading:yt,shimmer:bt,tagline:wt,primaryButton:It,secondaryButton:Nt,scrollIndicator:St,scrollLabel:Ct,scrollLine:Tt};function kt({variant:s="logo",heading:n,label:i,tagline:a,logoSrc:l=fe,gradient:p="frequencyAlive",shimmer:g=!0,primaryAction:j,secondaryAction:_,backgroundVideoSrc:d,showWaveform:h,showScrollIndicator:y=!1}){const[r,v]=c.useState(!1),m=n??(s==="text"?"Your Message":void 0),u=i||(s==="logo"?"Welcome":void 0),b=j||_,o=h??!0,f=_e.gradients[p];return c.useEffect(()=>{v(!0)},[]),e.jsxs(t.Box,{component:"section",className:S.root,children:[d&&e.jsx(xe,{src:d}),e.jsxs("div",{className:S.content,children:[r&&e.jsxs(e.Fragment,{children:[u&&e.jsx(k.motion.p,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.8,delay:.2},className:S.label,children:u}),s==="logo"&&e.jsxs(k.motion.div,{initial:{opacity:0,scale:.8},animate:{opacity:1,scale:1},transition:{duration:1.2,delay:.3,ease:"easeOut"},className:S.logoWrapper,children:[o&&e.jsx(te,{}),o&&e.jsx("div",{className:S.vignette}),e.jsx(k.motion.img,{src:l,alt:m??"Frequency",className:S.logo,animate:{rotate:[0,.5,-.5,0]},transition:{duration:8,repeat:1/0,ease:"easeInOut"}}),e.jsx("div",{className:S.glow})]}),s==="text"&&m&&e.jsxs(k.motion.div,{initial:{opacity:0,scale:.8},animate:{opacity:1,scale:1},transition:{duration:1.2,delay:.3,ease:"easeOut"},className:S.textWrapper,children:[o&&e.jsx(te,{}),o&&e.jsx("div",{className:S.vignette}),e.jsx(t.Title,{order:1,className:`${S.heading} ${g?S.shimmer:""}`,style:{backgroundImage:`linear-gradient(135deg, ${f.from}, ${f.to}, ${f.from})`,backgroundSize:g?"200% 100%":void 0},children:m})]}),a&&e.jsx(k.motion.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.8,delay:.7},children:e.jsx(t.Text,{className:S.tagline,children:a})}),b&&e.jsx(k.motion.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.8,delay:.9},children:e.jsxs(t.Group,{gap:"md",justify:"center",wrap:"wrap",children:[j&&e.jsx(t.Button,{component:"a",href:j.href,size:"lg",radius:4,className:S.primaryButton,children:j.label}),_&&e.jsx(t.Button,{component:"a",href:_.href,size:"lg",radius:4,variant:"outline",className:S.secondaryButton,children:_.label})]})})]}),r&&y&&e.jsxs(k.motion.div,{className:S.scrollIndicator,initial:{opacity:0},animate:{opacity:1},transition:{duration:1,delay:1.4},children:[e.jsx("span",{className:S.scrollLabel,children:"Scroll"}),e.jsx(k.motion.div,{className:S.scrollLine,animate:{scaleY:[1,1.5,1]},transition:{duration:1.5,repeat:1/0}})]})]})]})}function se({variant:s,children:n}){const i=s==="do";return e.jsxs(t.Badge,{variant:"light",color:i?"green":"red",size:"lg",radius:"sm",styles:{root:{textTransform:"none",fontWeight:400},label:{whiteSpace:"normal",lineHeight:1.4}},children:[e.jsxs("strong",{children:[i?"Do":"Don't",":"]})," ",n]})}const Mt="_root_13w21_1",zt="_playButton_13w21_11",ue={root:Mt,playButton:zt},Bt={mini:{height:24,buttonSize:20,iconSize:14,waveHeight:16,barWidth:1,barGap:0},small:{height:32,buttonSize:28,iconSize:16,waveHeight:20,barWidth:1,barGap:0},compact:{height:40,buttonSize:32,iconSize:18,waveHeight:24,barWidth:2,barGap:1}},pe=c.forwardRef(({audioUrl:s,size:n="mini",waveColor:i="#CCCCCC",progressColor:a="#169bde",onPlay:l,onPause:p,className:g,style:j},_)=>{const d=c.useRef(null),[h,y]=c.useState(!1),[r,v]=c.useState(0),m=Bt[n];c.useEffect(()=>{const o=d.current;if(!o)return;const f=()=>v(o.currentTime),w=()=>{y(!1),v(0)},M=()=>y(!1),E=()=>y(!0);return o.addEventListener("timeupdate",f),o.addEventListener("ended",w),o.addEventListener("pause",M),o.addEventListener("play",E),()=>{o.removeEventListener("timeupdate",f),o.removeEventListener("ended",w),o.removeEventListener("pause",M),o.removeEventListener("play",E)}},[s]);const u=c.useCallback(()=>{const o=d.current;o&&(h?(o.pause(),p==null||p()):(o.play().catch(()=>{}),l==null||l()))},[h,l,p]),b=c.useCallback(o=>{const f=d.current;f&&!isNaN(o)&&isFinite(o)&&(f.currentTime=o,v(o))},[]);return e.jsxs(t.Group,{ref:_,gap:n==="mini"?6:n==="small"?8:10,wrap:"nowrap",className:`${ue.root} ${g??""}`,style:{height:m.height,...j},children:[e.jsx("audio",{ref:d,src:s,preload:"metadata"}),e.jsx(t.ActionIcon,{variant:"filled",color:"blue",radius:"xl",size:m.buttonSize,onClick:u,"aria-label":h?"Pause":"Play",className:ue.playButton,children:h?e.jsx(z.IconPlayerPauseFilled,{size:m.iconSize}):e.jsx(z.IconPlayerPlayFilled,{size:m.iconSize})}),e.jsx(t.Box,{style:{flex:1,minWidth:80},children:e.jsx(K,{audioRef:d,currentTime:r,onSeek:b,waveColor:i,progressColor:a,height:m.waveHeight,barWidth:m.barWidth,barGap:m.barGap})})]})});pe.displayName="MiniAudioPlayer";const $t="_root_1bah1_1",Pt={root:$t};function Lt({accentColor:s,title:n,description:i,doHint:a,dontHint:l}){return e.jsxs(t.Paper,{className:Pt.root,p:"lg",radius:"md",style:{borderLeftColor:s},children:[e.jsx(t.Title,{order:3,size:"h4",mb:"xs",children:n}),e.jsx(t.Text,{c:"dimmed",children:i}),(a||l)&&e.jsxs(t.Group,{gap:"sm",mt:"md",wrap:"wrap",children:[a&&e.jsx(se,{variant:"do",children:a}),l&&e.jsx(se,{variant:"dont",children:l})]})]})}const Et="_root_ydu7j_1",Wt="_actions_ydu7j_22",Gt="_fab_ydu7j_43",Rt="_actionButton_ydu7j_61",Y={root:Et,actions:Wt,fab:Gt,actionButton:Rt};function Ft({actions:s,icon:n,openIcon:i,direction:a="up",color:l="blue",size:p=56,defaultOpen:g=!1,open:j,onOpenChange:_,style:d,className:h}){const[y,r]=c.useState(g),v=j??y,m=c.useCallback(()=>{const o=!v;r(o),_==null||_(o)},[v,_]),u=c.useCallback(()=>{r(!1),_==null||_(!1)},[_]),b=a==="up"||a==="down";return e.jsxs(t.Box,{className:`${Y.root} ${h??""}`,style:d,"data-direction":a,children:[e.jsx("div",{className:Y.actions,"data-direction":a,children:s.map((o,f)=>{const w=a==="up"||a==="left"?s.length-1-f:f;return e.jsx(t.Transition,{mounted:v,transition:b?"slide-up":"slide-right",duration:200,timingFunction:"ease",enterDelay:w*40,children:M=>e.jsx(t.Tooltip,{label:o.label,position:b?"left":"top",children:e.jsx(t.ActionIcon,{variant:"filled",color:"gray",radius:"xl",size:p*.7,style:M,className:Y.actionButton,onClick:()=>{o.onClick(),u()},"aria-label":o.label,children:o.icon})})},o.label)})}),e.jsx(t.ActionIcon,{variant:"filled",color:l,radius:"xl",size:p,onClick:m,className:Y.fab,"data-open":v||void 0,"aria-label":v?"Close actions":"Open actions",children:v?i??n??e.jsx(z.IconPlus,{size:p*.45}):n??e.jsx(z.IconPlus,{size:p*.45})})]})}const Dt="_container_9xj91_1",At="_layout_9xj91_16",qt="_reversed_9xj91_29",Ht="_headingSide_9xj91_39",Ot="_sticky_9xj91_49",Vt="_stickyInner_9xj91_54",Ut="_contentSide_9xj91_65",Xt="_title_9xj91_76",Yt="_preTitle_9xj91_82",Kt="_titleHighlight_9xj91_88",Jt="_description_9xj91_95",B={container:Dt,layout:At,reversed:qt,headingSide:Ht,sticky:Ot,stickyInner:Vt,contentSide:Ut,title:Xt,preTitle:Yt,titleHighlight:Kt,description:Jt};function Qt({badge:s,badgeColor:n="violet",subtitle:i,title:a,titleColor:l="blue",preTitle:p,description:g,actions:j,heading:_,children:d,stickyHeading:h=!1,py:y,reversed:r=!1,id:v,className:m}){const u=_??e.jsxs(t.Stack,{gap:"sm",children:[s&&e.jsxs(t.Box,{children:[e.jsx(t.Badge,{color:n,variant:"filled",size:"sm",radius:4,tt:"uppercase",fw:700,children:s}),i&&e.jsx(t.Text,{size:"sm",c:"dimmed",mt:"xs",tt:"uppercase",style:{letterSpacing:"0.05em"},children:i})]}),!s&&i&&e.jsx(t.Text,{size:"sm",c:"dimmed",tt:"uppercase",style:{letterSpacing:"0.05em"},children:i}),(p||a)&&e.jsxs(t.Title,{order:2,className:B.title,children:[p&&e.jsx("span",{className:B.preTitle,children:p}),p&&e.jsx("br",{}),a&&e.jsx(t.Text,{component:"span",inherit:!0,className:B.titleHighlight,c:l,children:a})]}),g&&e.jsx(t.Text,{size:"lg",c:"dimmed",lh:1.7,className:B.description,children:g}),j&&e.jsx(t.Box,{mt:"md",children:j})]});return e.jsx(t.Box,{component:"section",py:y??"calc(var(--mantine-spacing-xl) * 3)",pos:"relative",id:v,className:m,children:e.jsx(t.Box,{className:B.container,children:e.jsxs(t.Box,{className:`${B.layout} ${r?B.reversed:""}`,children:[e.jsx(t.Box,{className:`${B.headingSide} ${h?B.sticky:""}`,children:e.jsx(t.Box,{className:h?B.stickyInner:void 0,children:u})}),e.jsx(t.Box,{className:B.contentSide,children:d})]})})})}const Zt="_root_ioshc_1",es="_quoteIcon_ioshc_6",me={root:Zt,quoteIcon:es};function ts(s){return s.split(" ").map(n=>n[0]).join("").toUpperCase().slice(0,2)}function ss({quote:s,name:n,role:i,company:a,avatarSrc:l,accentColor:p="blue"}){const g=`var(--mantine-color-${p}-filled)`;return e.jsxs(t.Paper,{className:me.root,p:"lg",radius:"md",style:{borderLeftColor:g},children:[e.jsx(z.IconQuote,{size:32,className:me.quoteIcon,color:g}),e.jsx(t.Text,{fs:"italic",mt:"xs",mb:"md",children:s}),e.jsxs(t.Group,{gap:"sm",children:[e.jsx(t.Avatar,{src:l,alt:n,color:p,radius:"xl",size:"md",children:ts(n)}),e.jsxs(t.Stack,{gap:0,children:[e.jsx(t.Text,{fw:600,size:"sm",children:n}),(i||a)&&e.jsx(t.Text,{size:"xs",c:"dimmed",children:[i,a].filter(Boolean).join(", ")})]})]})]})}exports.AnimatedCounter=ve;exports.AnimatedWaveform=te;exports.AudioPlayer=Be;exports.AudioWaveform=K;exports.CodeBlock=Le;exports.ColorPalette=Ae;exports.ColorSwatch=Ve;exports.Copyable=J;exports.DosDonts=Ze;exports.ExpandableCard=st;exports.FadeInSection=at;exports.FrequencyWave=it;exports.GradientSwatch=dt;exports.Hero=kt;exports.HintBadge=se;exports.MiniAudioPlayer=pe;exports.PrincipleCard=Lt;exports.SpeedDial=Ft;exports.SplitSection=Qt;exports.TestimonialCard=ss;exports.VideoBackground=xe;
|