@web-my-money/blocks 1.0.0
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/app.d.mts +454 -0
- package/dist/app.d.ts +454 -0
- package/dist/app.js +1293 -0
- package/dist/app.mjs +53 -0
- package/dist/chunk-L6OIX4DG.mjs +70 -0
- package/dist/chunk-PJO7WJ4G.mjs +10 -0
- package/dist/chunk-UM2RDUPI.mjs +1183 -0
- package/dist/chunk-X6SF4TT2.mjs +2205 -0
- package/dist/funnel.d.mts +80 -0
- package/dist/funnel.d.ts +80 -0
- package/dist/funnel.js +281 -0
- package/dist/funnel.mjs +235 -0
- package/dist/fx.d.mts +314 -0
- package/dist/fx.d.ts +314 -0
- package/dist/fx.js +1142 -0
- package/dist/fx.mjs +1084 -0
- package/dist/index-D5sr_PKq.d.mts +29 -0
- package/dist/index-D5sr_PKq.d.ts +29 -0
- package/dist/index.d.mts +4 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +3525 -0
- package/dist/index.mjs +121 -0
- package/dist/next.d.mts +32 -0
- package/dist/next.d.ts +32 -0
- package/dist/next.js +65 -0
- package/dist/next.mjs +28 -0
- package/dist/site.d.mts +532 -0
- package/dist/site.d.ts +532 -0
- package/dist/site.js +2338 -0
- package/dist/site.mjs +77 -0
- package/package.json +93 -0
package/dist/site.js
ADDED
|
@@ -0,0 +1,2338 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/site.ts
|
|
31
|
+
var site_exports = {};
|
|
32
|
+
__export(site_exports, {
|
|
33
|
+
AvatarGroup: () => AvatarGroup,
|
|
34
|
+
BentoGrid: () => BentoGrid,
|
|
35
|
+
CTABanner: () => CTABanner,
|
|
36
|
+
CaseStudiesSection: () => CaseStudiesSection,
|
|
37
|
+
ComparisonTable: () => ComparisonTable,
|
|
38
|
+
ContactForm: () => ContactForm,
|
|
39
|
+
DEFAULT_WAVES: () => DEFAULT_WAVES,
|
|
40
|
+
FadeUp: () => FadeUp,
|
|
41
|
+
Faq: () => Faq,
|
|
42
|
+
FeatureGrid: () => FeatureGrid,
|
|
43
|
+
Footer: () => Footer,
|
|
44
|
+
HeroCanvas: () => HeroCanvas,
|
|
45
|
+
HeroSection: () => HeroSection,
|
|
46
|
+
LayeredButton: () => LayeredButton,
|
|
47
|
+
LightboxGallery: () => LightboxGallery,
|
|
48
|
+
LogoCloud: () => LogoCloud,
|
|
49
|
+
Marquee: () => Marquee,
|
|
50
|
+
NavBar: () => NavBar,
|
|
51
|
+
PricingTable: () => PricingTable,
|
|
52
|
+
ProcessSteps: () => ProcessSteps,
|
|
53
|
+
ScrollReveal: () => ScrollReveal,
|
|
54
|
+
SectionGlow: () => SectionGlow,
|
|
55
|
+
SectionIntro: () => SectionIntro,
|
|
56
|
+
SectionLabel: () => SectionLabel,
|
|
57
|
+
SocialProof: () => SocialProof,
|
|
58
|
+
StatsSection: () => StatsSection,
|
|
59
|
+
TechCarousel: () => TechCarousel,
|
|
60
|
+
TestimonialCarousel: () => TestimonialCarousel,
|
|
61
|
+
TestimonialsCarousel: () => TestimonialsCarousel,
|
|
62
|
+
TestimonialsSection: () => TestimonialsSection,
|
|
63
|
+
TextRotator: () => TextRotator,
|
|
64
|
+
Thumbnail: () => Thumbnail,
|
|
65
|
+
UseCasesSection: () => UseCasesSection,
|
|
66
|
+
ValueStackSection: () => ValueStackSection,
|
|
67
|
+
WaveCanvas: () => WaveCanvas
|
|
68
|
+
});
|
|
69
|
+
module.exports = __toCommonJS(site_exports);
|
|
70
|
+
|
|
71
|
+
// src/fade-up/index.tsx
|
|
72
|
+
var import_framer_motion = require("framer-motion");
|
|
73
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
74
|
+
var SPRING_EASE = [0.22, 1, 0.36, 1];
|
|
75
|
+
function FadeUp({
|
|
76
|
+
children,
|
|
77
|
+
className,
|
|
78
|
+
delay = 0
|
|
79
|
+
}) {
|
|
80
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
81
|
+
import_framer_motion.motion.div,
|
|
82
|
+
{
|
|
83
|
+
className,
|
|
84
|
+
initial: { opacity: 0, y: 30 },
|
|
85
|
+
whileInView: { opacity: 1, y: 0 },
|
|
86
|
+
viewport: { once: true, amount: 0.2 },
|
|
87
|
+
transition: { duration: 0.7, delay, ease: SPRING_EASE },
|
|
88
|
+
style: { willChange: "transform, opacity" },
|
|
89
|
+
children
|
|
90
|
+
}
|
|
91
|
+
);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
// src/scroll-reveal/index.tsx
|
|
95
|
+
var React = __toESM(require("react"));
|
|
96
|
+
var import_framer_motion2 = require("framer-motion");
|
|
97
|
+
|
|
98
|
+
// src/utils.ts
|
|
99
|
+
var import_clsx = require("clsx");
|
|
100
|
+
var import_tailwind_merge = require("tailwind-merge");
|
|
101
|
+
function cn(...inputs) {
|
|
102
|
+
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// src/scroll-reveal/index.tsx
|
|
106
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
107
|
+
var offset = { up: { y: 24 }, down: { y: -24 }, left: { x: 24 }, right: { x: -24 }, none: {} };
|
|
108
|
+
function ScrollReveal({
|
|
109
|
+
children,
|
|
110
|
+
className,
|
|
111
|
+
direction = "up",
|
|
112
|
+
delay = 0,
|
|
113
|
+
once = true,
|
|
114
|
+
amount = 0.3
|
|
115
|
+
}) {
|
|
116
|
+
const ref = React.useRef(null);
|
|
117
|
+
const inView = (0, import_framer_motion2.useInView)(ref, { once, amount });
|
|
118
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
119
|
+
import_framer_motion2.motion.div,
|
|
120
|
+
{
|
|
121
|
+
ref,
|
|
122
|
+
"data-wmm-fx": true,
|
|
123
|
+
className: cn(className),
|
|
124
|
+
initial: { opacity: 0, ...offset[direction] },
|
|
125
|
+
animate: inView ? { opacity: 1, x: 0, y: 0 } : {},
|
|
126
|
+
transition: { duration: 0.5, delay, ease: [0.22, 1, 0.36, 1] },
|
|
127
|
+
children
|
|
128
|
+
}
|
|
129
|
+
);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
// src/section-label/index.tsx
|
|
133
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
134
|
+
function SectionLabel({
|
|
135
|
+
children,
|
|
136
|
+
variant = "pill",
|
|
137
|
+
index,
|
|
138
|
+
dotColor = "var(--primary)",
|
|
139
|
+
className
|
|
140
|
+
}) {
|
|
141
|
+
if (variant === "rule") {
|
|
142
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("flex items-center gap-3", className), children: [
|
|
143
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-px flex-1 bg-border" }),
|
|
144
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs font-semibold uppercase tracking-widest text-muted-foreground", children }),
|
|
145
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-px flex-1 bg-border" })
|
|
146
|
+
] });
|
|
147
|
+
}
|
|
148
|
+
if (variant === "indexed") {
|
|
149
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("inline-flex items-center gap-2.5", className), children: [
|
|
150
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
151
|
+
"span",
|
|
152
|
+
{
|
|
153
|
+
className: "flex h-5 w-5 items-center justify-center rounded-full text-[10px] font-bold",
|
|
154
|
+
style: { background: "var(--primary)", color: "var(--primary-foreground)" },
|
|
155
|
+
children: index ?? "\xB7"
|
|
156
|
+
}
|
|
157
|
+
),
|
|
158
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs font-semibold uppercase tracking-widest text-muted-foreground", children })
|
|
159
|
+
] });
|
|
160
|
+
}
|
|
161
|
+
if (variant === "flanked") {
|
|
162
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("inline-flex items-center gap-2 text-muted-foreground", className), children: [
|
|
163
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-primary select-none", children: "\u2014" }),
|
|
164
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs font-semibold uppercase tracking-widest", children }),
|
|
165
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-primary select-none", children: "\u2014" })
|
|
166
|
+
] });
|
|
167
|
+
}
|
|
168
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
169
|
+
"div",
|
|
170
|
+
{
|
|
171
|
+
className: cn(
|
|
172
|
+
"inline-flex items-center gap-2 rounded-full border border-border bg-foreground/[0.06] px-4 py-1.5 backdrop-blur-md",
|
|
173
|
+
className
|
|
174
|
+
),
|
|
175
|
+
children: [
|
|
176
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
177
|
+
"div",
|
|
178
|
+
{
|
|
179
|
+
className: "h-1.5 w-1.5 rounded-full shrink-0",
|
|
180
|
+
style: { backgroundColor: dotColor }
|
|
181
|
+
}
|
|
182
|
+
),
|
|
183
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs font-medium uppercase tracking-[0.15em] text-muted-foreground", children })
|
|
184
|
+
]
|
|
185
|
+
}
|
|
186
|
+
);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
// src/section-glow/index.tsx
|
|
190
|
+
var import_framer_motion3 = require("framer-motion");
|
|
191
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
192
|
+
function SectionGlow({ variant = "primary", className }) {
|
|
193
|
+
const reduce = (0, import_framer_motion3.useReducedMotion)();
|
|
194
|
+
const color = variant === "secondary" ? "color-mix(in srgb, var(--secondary, #1f2d56) 18%, transparent)" : "color-mix(in srgb, var(--primary, #8fccb6) 16%, transparent)";
|
|
195
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
196
|
+
"div",
|
|
197
|
+
{
|
|
198
|
+
"aria-hidden": true,
|
|
199
|
+
className: cn(
|
|
200
|
+
"pointer-events-none absolute left-1/2 -top-40 -translate-x-1/2",
|
|
201
|
+
className
|
|
202
|
+
),
|
|
203
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
204
|
+
import_framer_motion3.motion.div,
|
|
205
|
+
{
|
|
206
|
+
className: "h-[460px] w-[min(820px,94vw)] rounded-full blur-[60px]",
|
|
207
|
+
style: {
|
|
208
|
+
background: `radial-gradient(circle at 50% 50%, ${color}, transparent 70%)`
|
|
209
|
+
},
|
|
210
|
+
initial: reduce ? false : { opacity: 0, scale: 0.92 },
|
|
211
|
+
whileInView: { opacity: 1, scale: 1 },
|
|
212
|
+
viewport: { once: true, margin: "-8% 0px -8% 0px" },
|
|
213
|
+
transition: { duration: 1, ease: [0.22, 0.61, 0.36, 1] }
|
|
214
|
+
}
|
|
215
|
+
)
|
|
216
|
+
}
|
|
217
|
+
);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
// src/section-intro/index.tsx
|
|
221
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
222
|
+
function SectionIntro({
|
|
223
|
+
label,
|
|
224
|
+
title,
|
|
225
|
+
body,
|
|
226
|
+
centered = false
|
|
227
|
+
}) {
|
|
228
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
229
|
+
"div",
|
|
230
|
+
{
|
|
231
|
+
className: cn(
|
|
232
|
+
"relative z-10 max-w-3xl",
|
|
233
|
+
centered && "mx-auto text-center"
|
|
234
|
+
),
|
|
235
|
+
children: [
|
|
236
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SectionLabel, { children: label }),
|
|
237
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
238
|
+
"h2",
|
|
239
|
+
{
|
|
240
|
+
className: "mt-6 font-display text-4xl font-black tracking-[-0.04em] text-foreground sm:text-5xl md:text-6xl",
|
|
241
|
+
style: { textShadow: "0 18px 60px rgba(0,0,0,0.24)" },
|
|
242
|
+
children: title
|
|
243
|
+
}
|
|
244
|
+
),
|
|
245
|
+
body ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
246
|
+
"p",
|
|
247
|
+
{
|
|
248
|
+
className: cn(
|
|
249
|
+
"mt-6 max-w-2xl text-base leading-8 text-muted-foreground md:text-lg",
|
|
250
|
+
centered && "mx-auto"
|
|
251
|
+
),
|
|
252
|
+
children: body
|
|
253
|
+
}
|
|
254
|
+
) : null
|
|
255
|
+
]
|
|
256
|
+
}
|
|
257
|
+
);
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
// src/text-rotator/index.tsx
|
|
261
|
+
var React2 = __toESM(require("react"));
|
|
262
|
+
var import_framer_motion4 = require("framer-motion");
|
|
263
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
264
|
+
var SPRING = [0.16, 1, 0.3, 1];
|
|
265
|
+
function TextRotator({
|
|
266
|
+
phrases,
|
|
267
|
+
interval = 2800,
|
|
268
|
+
className,
|
|
269
|
+
phraseClassName
|
|
270
|
+
}) {
|
|
271
|
+
const [index, setIndex] = React2.useState(0);
|
|
272
|
+
React2.useEffect(() => {
|
|
273
|
+
const id = setInterval(
|
|
274
|
+
() => setIndex((i) => (i + 1) % phrases.length),
|
|
275
|
+
interval
|
|
276
|
+
);
|
|
277
|
+
return () => clearInterval(id);
|
|
278
|
+
}, [phrases.length, interval]);
|
|
279
|
+
return (
|
|
280
|
+
/* clip container so exiting phrase doesn't overflow */
|
|
281
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
282
|
+
"span",
|
|
283
|
+
{
|
|
284
|
+
className: cn("relative inline-flex overflow-hidden align-bottom", className),
|
|
285
|
+
style: { minWidth: "1ch" },
|
|
286
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_framer_motion4.AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
287
|
+
import_framer_motion4.motion.span,
|
|
288
|
+
{
|
|
289
|
+
initial: { y: "100%", opacity: 0 },
|
|
290
|
+
animate: { y: 0, opacity: 1 },
|
|
291
|
+
exit: { y: "-100%", opacity: 0 },
|
|
292
|
+
transition: { duration: 0.55, ease: SPRING },
|
|
293
|
+
className: cn("inline-block", phraseClassName),
|
|
294
|
+
children: phrases[index]
|
|
295
|
+
},
|
|
296
|
+
phrases[index]
|
|
297
|
+
) })
|
|
298
|
+
}
|
|
299
|
+
)
|
|
300
|
+
);
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
// src/avatar-group/index.tsx
|
|
304
|
+
var import_jsx_runtime7 = (
|
|
305
|
+
// eslint-disable-next-line @next/next/no-img-element
|
|
306
|
+
require("react/jsx-runtime")
|
|
307
|
+
);
|
|
308
|
+
var sizePx = {
|
|
309
|
+
sm: "h-7 w-7 text-[10px]",
|
|
310
|
+
md: "h-9 w-9 text-xs",
|
|
311
|
+
lg: "h-11 w-11 text-sm"
|
|
312
|
+
};
|
|
313
|
+
var overlapPx = {
|
|
314
|
+
sm: "-ml-2",
|
|
315
|
+
md: "-ml-2.5",
|
|
316
|
+
lg: "-ml-3"
|
|
317
|
+
};
|
|
318
|
+
function AvatarGroup({
|
|
319
|
+
avatars,
|
|
320
|
+
max = 5,
|
|
321
|
+
label,
|
|
322
|
+
size = "md",
|
|
323
|
+
className
|
|
324
|
+
}) {
|
|
325
|
+
const shown = avatars.slice(0, max);
|
|
326
|
+
const overflow = avatars.length - max;
|
|
327
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("flex items-center gap-3", className), children: [
|
|
328
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center", children: [
|
|
329
|
+
shown.map((av, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
330
|
+
"div",
|
|
331
|
+
{
|
|
332
|
+
title: av.name,
|
|
333
|
+
className: cn(
|
|
334
|
+
"relative rounded-full ring-2 ring-background overflow-hidden shrink-0",
|
|
335
|
+
sizePx[size],
|
|
336
|
+
i > 0 && overlapPx[size]
|
|
337
|
+
),
|
|
338
|
+
children: av.src ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
339
|
+
"img",
|
|
340
|
+
{
|
|
341
|
+
src: av.src,
|
|
342
|
+
alt: av.name,
|
|
343
|
+
className: "h-full w-full object-cover"
|
|
344
|
+
}
|
|
345
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
346
|
+
"span",
|
|
347
|
+
{
|
|
348
|
+
className: "flex h-full w-full items-center justify-center font-semibold bg-primary/20 text-primary",
|
|
349
|
+
children: av.initials ?? av.name.slice(0, 2).toUpperCase()
|
|
350
|
+
}
|
|
351
|
+
)
|
|
352
|
+
},
|
|
353
|
+
i
|
|
354
|
+
)),
|
|
355
|
+
overflow > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
356
|
+
"div",
|
|
357
|
+
{
|
|
358
|
+
className: cn(
|
|
359
|
+
"relative rounded-full ring-2 ring-background shrink-0",
|
|
360
|
+
"flex items-center justify-center font-semibold",
|
|
361
|
+
"bg-muted text-muted-foreground",
|
|
362
|
+
sizePx[size],
|
|
363
|
+
overlapPx[size]
|
|
364
|
+
),
|
|
365
|
+
children: [
|
|
366
|
+
"+",
|
|
367
|
+
overflow
|
|
368
|
+
]
|
|
369
|
+
}
|
|
370
|
+
)
|
|
371
|
+
] }),
|
|
372
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-sm text-muted-foreground", children: label })
|
|
373
|
+
] });
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
// src/marquee/index.tsx
|
|
377
|
+
var React3 = __toESM(require("react"));
|
|
378
|
+
var import_framer_motion5 = require("framer-motion");
|
|
379
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
380
|
+
function Marquee({
|
|
381
|
+
children,
|
|
382
|
+
reverse = false,
|
|
383
|
+
speed = 30,
|
|
384
|
+
gap = "2rem",
|
|
385
|
+
pauseOnHover = true,
|
|
386
|
+
fadeWidth = "6rem",
|
|
387
|
+
className
|
|
388
|
+
}) {
|
|
389
|
+
const [paused, setPaused] = React3.useState(false);
|
|
390
|
+
const doubled = [...children, ...children];
|
|
391
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
392
|
+
"div",
|
|
393
|
+
{
|
|
394
|
+
className: cn("relative overflow-hidden", className),
|
|
395
|
+
onMouseEnter: () => pauseOnHover && setPaused(true),
|
|
396
|
+
onMouseLeave: () => pauseOnHover && setPaused(false),
|
|
397
|
+
children: [
|
|
398
|
+
fadeWidth !== "0" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
|
|
399
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
400
|
+
"div",
|
|
401
|
+
{
|
|
402
|
+
"aria-hidden": true,
|
|
403
|
+
className: "pointer-events-none absolute inset-y-0 left-0 z-10",
|
|
404
|
+
style: {
|
|
405
|
+
width: fadeWidth,
|
|
406
|
+
background: "linear-gradient(to right, var(--background), transparent)"
|
|
407
|
+
}
|
|
408
|
+
}
|
|
409
|
+
),
|
|
410
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
411
|
+
"div",
|
|
412
|
+
{
|
|
413
|
+
"aria-hidden": true,
|
|
414
|
+
className: "pointer-events-none absolute inset-y-0 right-0 z-10",
|
|
415
|
+
style: {
|
|
416
|
+
width: fadeWidth,
|
|
417
|
+
background: "linear-gradient(to left, var(--background), transparent)"
|
|
418
|
+
}
|
|
419
|
+
}
|
|
420
|
+
)
|
|
421
|
+
] }),
|
|
422
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
423
|
+
import_framer_motion5.motion.div,
|
|
424
|
+
{
|
|
425
|
+
className: "flex",
|
|
426
|
+
style: { gap },
|
|
427
|
+
animate: { x: reverse ? ["-50%", "0%"] : ["0%", "-50%"] },
|
|
428
|
+
transition: {
|
|
429
|
+
duration: speed,
|
|
430
|
+
ease: "linear",
|
|
431
|
+
repeat: Infinity
|
|
432
|
+
},
|
|
433
|
+
...paused && { animate: { x: reverse ? "-50%" : "0%" } },
|
|
434
|
+
children: doubled.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "shrink-0", children: child }, i))
|
|
435
|
+
}
|
|
436
|
+
)
|
|
437
|
+
]
|
|
438
|
+
}
|
|
439
|
+
);
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
// src/layered-button/index.tsx
|
|
443
|
+
var import_framer_motion6 = require("framer-motion");
|
|
444
|
+
var import_lucide_react = require("lucide-react");
|
|
445
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
446
|
+
function LayeredButton({
|
|
447
|
+
href,
|
|
448
|
+
children,
|
|
449
|
+
variant = "solid",
|
|
450
|
+
className,
|
|
451
|
+
disabled = false,
|
|
452
|
+
icon,
|
|
453
|
+
onClick,
|
|
454
|
+
type = "button"
|
|
455
|
+
}) {
|
|
456
|
+
const innerClassName = variant === "solid" ? "bg-cta-gradient text-white shadow-glow" : "bg-white/[0.06] text-white/88";
|
|
457
|
+
const iconNode = icon ?? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.ArrowRight, { className: "h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" });
|
|
458
|
+
const wrapperClassName = cn(
|
|
459
|
+
"group relative inline-flex translate-gpu disabled:pointer-events-none disabled:opacity-60",
|
|
460
|
+
disabled && "pointer-events-none opacity-60",
|
|
461
|
+
className
|
|
462
|
+
);
|
|
463
|
+
const buttonChrome = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
|
|
464
|
+
variant === "solid" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute -inset-1 animate-pulse rounded-full bg-cta-gradient opacity-50 blur-xl transition duration-500 group-hover:opacity-80" }),
|
|
465
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
466
|
+
"div",
|
|
467
|
+
{
|
|
468
|
+
className: cn(
|
|
469
|
+
"relative w-full rounded-full p-px",
|
|
470
|
+
variant === "solid" ? "border border-white/60" : "border border-white/20"
|
|
471
|
+
),
|
|
472
|
+
children: [
|
|
473
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute left-1/4 top-0 h-3 w-1/2 rounded-full bg-white/40 blur-md" }),
|
|
474
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
475
|
+
"div",
|
|
476
|
+
{
|
|
477
|
+
className: cn(
|
|
478
|
+
"relative flex w-full items-center justify-center gap-2 overflow-hidden rounded-full px-7 py-3 text-sm font-medium transition duration-300 group-hover:shadow-glow-strong",
|
|
479
|
+
innerClassName
|
|
480
|
+
),
|
|
481
|
+
children: [
|
|
482
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "pointer-events-none absolute inset-y-0 -left-1/3 w-1/3 -skew-x-12 bg-[linear-gradient(90deg,transparent,rgba(255,255,255,0.24),transparent)] opacity-0 transition-all duration-700 group-hover:left-[120%] group-hover:opacity-100" }),
|
|
483
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children }),
|
|
484
|
+
iconNode
|
|
485
|
+
]
|
|
486
|
+
}
|
|
487
|
+
)
|
|
488
|
+
]
|
|
489
|
+
}
|
|
490
|
+
)
|
|
491
|
+
] });
|
|
492
|
+
if (href) {
|
|
493
|
+
const handleClick = (event) => {
|
|
494
|
+
onClick?.(event);
|
|
495
|
+
if (event.defaultPrevented || disabled) return;
|
|
496
|
+
};
|
|
497
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
498
|
+
import_framer_motion6.motion.a,
|
|
499
|
+
{
|
|
500
|
+
href,
|
|
501
|
+
onClick: handleClick,
|
|
502
|
+
whileHover: disabled ? void 0 : { scale: 1.02, y: -2 },
|
|
503
|
+
whileTap: disabled ? void 0 : { scale: 0.99 },
|
|
504
|
+
className: wrapperClassName,
|
|
505
|
+
style: { willChange: "transform" },
|
|
506
|
+
"aria-disabled": disabled,
|
|
507
|
+
children: buttonChrome
|
|
508
|
+
}
|
|
509
|
+
);
|
|
510
|
+
}
|
|
511
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
512
|
+
import_framer_motion6.motion.button,
|
|
513
|
+
{
|
|
514
|
+
type,
|
|
515
|
+
onClick,
|
|
516
|
+
whileHover: disabled ? void 0 : { scale: 1.02, y: -2 },
|
|
517
|
+
whileTap: disabled ? void 0 : { scale: 0.99 },
|
|
518
|
+
className: wrapperClassName,
|
|
519
|
+
style: { willChange: "transform" },
|
|
520
|
+
disabled,
|
|
521
|
+
children: buttonChrome
|
|
522
|
+
}
|
|
523
|
+
);
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
// src/nav-bar/index.tsx
|
|
527
|
+
var React4 = __toESM(require("react"));
|
|
528
|
+
var import_framer_motion7 = require("framer-motion");
|
|
529
|
+
var import_lucide_react2 = require("lucide-react");
|
|
530
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
531
|
+
function NavBar({ data, logo, className }) {
|
|
532
|
+
const [open, setOpen] = React4.useState(false);
|
|
533
|
+
const [scrolled, setScrolled] = React4.useState(false);
|
|
534
|
+
React4.useEffect(() => {
|
|
535
|
+
const update = () => setScrolled(window.scrollY > 12);
|
|
536
|
+
window.addEventListener("scroll", update, { passive: true });
|
|
537
|
+
update();
|
|
538
|
+
return () => window.removeEventListener("scroll", update);
|
|
539
|
+
}, []);
|
|
540
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
541
|
+
"header",
|
|
542
|
+
{
|
|
543
|
+
className: cn(
|
|
544
|
+
"fixed inset-x-0 top-0 z-50 transition-all duration-300",
|
|
545
|
+
scrolled ? "border-b border-border/60 backdrop-blur-xl" : "border-b border-transparent",
|
|
546
|
+
className
|
|
547
|
+
),
|
|
548
|
+
style: scrolled ? { background: "var(--glass-bg-strong, rgba(255,255,255,0.08))" } : void 0,
|
|
549
|
+
children: [
|
|
550
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("nav", { className: "container mx-auto flex h-16 items-center justify-between px-4 md:px-6", children: [
|
|
551
|
+
logo && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("a", { href: "/", "aria-label": "Home", className: "inline-flex shrink-0 items-center", children: logo }),
|
|
552
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { className: "hidden md:flex items-center gap-7", children: data.links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
553
|
+
"a",
|
|
554
|
+
{
|
|
555
|
+
href: link.href,
|
|
556
|
+
className: "text-sm text-muted-foreground transition-colors hover:text-foreground",
|
|
557
|
+
children: link.label
|
|
558
|
+
}
|
|
559
|
+
) }, link.href)) }),
|
|
560
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
561
|
+
data.cta && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
562
|
+
"a",
|
|
563
|
+
{
|
|
564
|
+
href: data.cta.href,
|
|
565
|
+
className: "hidden md:inline-flex items-center justify-center rounded-full px-5 py-2 text-sm font-semibold bg-primary text-primary-foreground transition-all hover:opacity-90 active:scale-[0.97]",
|
|
566
|
+
children: data.cta.label
|
|
567
|
+
}
|
|
568
|
+
),
|
|
569
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
570
|
+
"button",
|
|
571
|
+
{
|
|
572
|
+
"aria-label": open ? "Close menu" : "Open menu",
|
|
573
|
+
onClick: () => setOpen((v) => !v),
|
|
574
|
+
className: "md:hidden rounded-lg p-2 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors",
|
|
575
|
+
children: open ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.X, { size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.Menu, { size: 20 })
|
|
576
|
+
}
|
|
577
|
+
)
|
|
578
|
+
] })
|
|
579
|
+
] }),
|
|
580
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_framer_motion7.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
581
|
+
import_framer_motion7.motion.div,
|
|
582
|
+
{
|
|
583
|
+
initial: { opacity: 0, height: 0 },
|
|
584
|
+
animate: { opacity: 1, height: "auto" },
|
|
585
|
+
exit: { opacity: 0, height: 0 },
|
|
586
|
+
transition: { duration: 0.22, ease: "easeInOut" },
|
|
587
|
+
className: "md:hidden overflow-hidden border-b border-border backdrop-blur-xl",
|
|
588
|
+
style: { background: "var(--glass-bg-strong, var(--background))" },
|
|
589
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("ul", { className: "container mx-auto flex flex-col px-4 pb-5 pt-1 gap-0.5", children: [
|
|
590
|
+
data.links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
591
|
+
"a",
|
|
592
|
+
{
|
|
593
|
+
href: link.href,
|
|
594
|
+
onClick: () => setOpen(false),
|
|
595
|
+
className: "block rounded-lg px-3 py-2.5 text-sm text-muted-foreground hover:text-foreground hover:bg-accent transition-colors",
|
|
596
|
+
children: link.label
|
|
597
|
+
}
|
|
598
|
+
) }, link.href)),
|
|
599
|
+
data.cta && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { className: "mt-3 pt-3 border-t border-border", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
600
|
+
"a",
|
|
601
|
+
{
|
|
602
|
+
href: data.cta.href,
|
|
603
|
+
onClick: () => setOpen(false),
|
|
604
|
+
className: "block rounded-full px-5 py-2.5 text-sm font-semibold text-center bg-primary text-primary-foreground hover:opacity-90 transition-opacity",
|
|
605
|
+
children: data.cta.label
|
|
606
|
+
}
|
|
607
|
+
) })
|
|
608
|
+
] })
|
|
609
|
+
},
|
|
610
|
+
"mobile-menu"
|
|
611
|
+
) })
|
|
612
|
+
]
|
|
613
|
+
}
|
|
614
|
+
);
|
|
615
|
+
}
|
|
616
|
+
|
|
617
|
+
// src/cta-banner/index.tsx
|
|
618
|
+
var import_framer_motion8 = require("framer-motion");
|
|
619
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
620
|
+
function CTABanner({ data, className }) {
|
|
621
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
622
|
+
"section",
|
|
623
|
+
{
|
|
624
|
+
className: cn("relative w-full py-24 lg:py-36 overflow-hidden", className),
|
|
625
|
+
children: [
|
|
626
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
627
|
+
"div",
|
|
628
|
+
{
|
|
629
|
+
"aria-hidden": true,
|
|
630
|
+
className: "absolute inset-0",
|
|
631
|
+
style: {
|
|
632
|
+
background: "var(--gradient-cta, linear-gradient(135deg, var(--primary) 0%, var(--ring) 100%))"
|
|
633
|
+
}
|
|
634
|
+
}
|
|
635
|
+
),
|
|
636
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
637
|
+
"div",
|
|
638
|
+
{
|
|
639
|
+
"aria-hidden": true,
|
|
640
|
+
className: "absolute -top-32 left-1/3 w-96 h-96 rounded-full blur-3xl opacity-30 pointer-events-none",
|
|
641
|
+
style: { background: "var(--primary, #8fccb6)" }
|
|
642
|
+
}
|
|
643
|
+
),
|
|
644
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
645
|
+
"div",
|
|
646
|
+
{
|
|
647
|
+
"aria-hidden": true,
|
|
648
|
+
className: "absolute -bottom-32 right-1/4 w-96 h-96 rounded-full blur-3xl opacity-20 pointer-events-none",
|
|
649
|
+
style: { background: "var(--wmm-violet, #869ce2)" }
|
|
650
|
+
}
|
|
651
|
+
),
|
|
652
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative container mx-auto px-4 md:px-6 text-center max-w-3xl", children: [
|
|
653
|
+
data.badge && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
654
|
+
import_framer_motion8.motion.div,
|
|
655
|
+
{
|
|
656
|
+
initial: { opacity: 0, y: 12 },
|
|
657
|
+
whileInView: { opacity: 1, y: 0 },
|
|
658
|
+
viewport: { once: true },
|
|
659
|
+
transition: { duration: 0.5 },
|
|
660
|
+
className: "flex justify-center mb-5",
|
|
661
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SectionLabel, { className: "border-white/20 text-white/90", children: data.badge })
|
|
662
|
+
}
|
|
663
|
+
),
|
|
664
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
665
|
+
import_framer_motion8.motion.h2,
|
|
666
|
+
{
|
|
667
|
+
initial: { opacity: 0, y: 24 },
|
|
668
|
+
whileInView: { opacity: 1, y: 0 },
|
|
669
|
+
viewport: { once: true },
|
|
670
|
+
transition: { duration: 0.6, delay: data.badge ? 0.08 : 0 },
|
|
671
|
+
className: "text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-white mb-5",
|
|
672
|
+
children: data.heading
|
|
673
|
+
}
|
|
674
|
+
),
|
|
675
|
+
data.subheading && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
676
|
+
import_framer_motion8.motion.p,
|
|
677
|
+
{
|
|
678
|
+
initial: { opacity: 0, y: 16 },
|
|
679
|
+
whileInView: { opacity: 1, y: 0 },
|
|
680
|
+
viewport: { once: true },
|
|
681
|
+
transition: { duration: 0.6, delay: 0.12 },
|
|
682
|
+
className: "text-lg md:text-xl text-white/75 max-w-xl mx-auto mb-10",
|
|
683
|
+
children: data.subheading
|
|
684
|
+
}
|
|
685
|
+
),
|
|
686
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
687
|
+
import_framer_motion8.motion.div,
|
|
688
|
+
{
|
|
689
|
+
initial: { opacity: 0, y: 16 },
|
|
690
|
+
whileInView: { opacity: 1, y: 0 },
|
|
691
|
+
viewport: { once: true },
|
|
692
|
+
transition: { duration: 0.5, delay: 0.2 },
|
|
693
|
+
className: "flex flex-col sm:flex-row items-center justify-center gap-3",
|
|
694
|
+
children: [
|
|
695
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
696
|
+
"a",
|
|
697
|
+
{
|
|
698
|
+
href: data.primaryCta.href,
|
|
699
|
+
className: "inline-flex items-center justify-center rounded-full px-8 py-3.5 text-sm font-semibold bg-white text-foreground shadow-lg hover:bg-white/92 transition-all active:scale-[0.97]",
|
|
700
|
+
children: data.primaryCta.label
|
|
701
|
+
}
|
|
702
|
+
),
|
|
703
|
+
data.secondaryCta && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
704
|
+
"a",
|
|
705
|
+
{
|
|
706
|
+
href: data.secondaryCta.href,
|
|
707
|
+
className: "inline-flex items-center justify-center rounded-full px-8 py-3.5 text-sm font-semibold text-white border border-white/30 hover:bg-white/10 transition-all",
|
|
708
|
+
children: data.secondaryCta.label
|
|
709
|
+
}
|
|
710
|
+
)
|
|
711
|
+
]
|
|
712
|
+
}
|
|
713
|
+
)
|
|
714
|
+
] })
|
|
715
|
+
]
|
|
716
|
+
}
|
|
717
|
+
);
|
|
718
|
+
}
|
|
719
|
+
|
|
720
|
+
// src/process-steps/index.tsx
|
|
721
|
+
var import_framer_motion9 = require("framer-motion");
|
|
722
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
723
|
+
function ProcessSteps({
|
|
724
|
+
label,
|
|
725
|
+
heading,
|
|
726
|
+
subheading,
|
|
727
|
+
steps,
|
|
728
|
+
layout = "horizontal",
|
|
729
|
+
className
|
|
730
|
+
}) {
|
|
731
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("section", { className: cn("w-full py-16 lg:py-28", className), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "container px-4 md:px-6 max-w-5xl mx-auto", children: [
|
|
732
|
+
(label || heading || subheading) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "text-center mb-14 space-y-4", children: [
|
|
733
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SectionLabel, { children: label }) }),
|
|
734
|
+
heading && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { className: "text-3xl md:text-4xl font-bold tracking-tight text-foreground", children: heading }),
|
|
735
|
+
subheading && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-muted-foreground max-w-xl mx-auto", children: subheading })
|
|
736
|
+
] }),
|
|
737
|
+
layout === "horizontal" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
738
|
+
"div",
|
|
739
|
+
{
|
|
740
|
+
className: cn(
|
|
741
|
+
"grid gap-8",
|
|
742
|
+
steps.length <= 3 ? "md:grid-cols-3" : "md:grid-cols-2 lg:grid-cols-4"
|
|
743
|
+
),
|
|
744
|
+
children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
745
|
+
import_framer_motion9.motion.div,
|
|
746
|
+
{
|
|
747
|
+
initial: { opacity: 0, y: 20 },
|
|
748
|
+
whileInView: { opacity: 1, y: 0 },
|
|
749
|
+
viewport: { once: true },
|
|
750
|
+
transition: { duration: 0.5, delay: i * 0.1 },
|
|
751
|
+
className: "relative flex flex-col gap-4",
|
|
752
|
+
children: [
|
|
753
|
+
i < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
754
|
+
"div",
|
|
755
|
+
{
|
|
756
|
+
"aria-hidden": true,
|
|
757
|
+
className: "hidden md:block absolute top-5 left-[calc(50%+24px)] right-0 h-px",
|
|
758
|
+
style: { background: "var(--gradient-primary, var(--primary))", opacity: 0.25 }
|
|
759
|
+
}
|
|
760
|
+
),
|
|
761
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
762
|
+
"div",
|
|
763
|
+
{
|
|
764
|
+
className: "flex h-10 w-10 items-center justify-center rounded-xl border border-primary/30 bg-primary/10 shrink-0",
|
|
765
|
+
children: step.icon ?? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-sm font-bold text-primary", children: String(i + 1).padStart(2, "0") })
|
|
766
|
+
}
|
|
767
|
+
),
|
|
768
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
|
|
769
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm font-semibold text-foreground mb-1", children: step.title }),
|
|
770
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm text-muted-foreground", children: step.description })
|
|
771
|
+
] })
|
|
772
|
+
]
|
|
773
|
+
},
|
|
774
|
+
i
|
|
775
|
+
))
|
|
776
|
+
}
|
|
777
|
+
) : (
|
|
778
|
+
/* Vertical layout */
|
|
779
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "max-w-2xl mx-auto space-y-0", children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
780
|
+
import_framer_motion9.motion.div,
|
|
781
|
+
{
|
|
782
|
+
initial: { opacity: 0, x: -16 },
|
|
783
|
+
whileInView: { opacity: 1, x: 0 },
|
|
784
|
+
viewport: { once: true },
|
|
785
|
+
transition: { duration: 0.5, delay: i * 0.08 },
|
|
786
|
+
className: "relative flex gap-6 pb-10 last:pb-0",
|
|
787
|
+
children: [
|
|
788
|
+
i < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
789
|
+
"div",
|
|
790
|
+
{
|
|
791
|
+
"aria-hidden": true,
|
|
792
|
+
className: "absolute left-5 top-10 bottom-0 w-px",
|
|
793
|
+
style: { background: "var(--border)" }
|
|
794
|
+
}
|
|
795
|
+
),
|
|
796
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "shrink-0 flex h-10 w-10 items-center justify-center rounded-xl border border-primary/30 bg-primary/10 z-10", children: step.icon ?? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-sm font-bold text-primary", children: String(i + 1).padStart(2, "0") }) }),
|
|
797
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "pt-1.5", children: [
|
|
798
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm font-semibold text-foreground mb-1", children: step.title }),
|
|
799
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm text-muted-foreground", children: step.description })
|
|
800
|
+
] })
|
|
801
|
+
]
|
|
802
|
+
},
|
|
803
|
+
i
|
|
804
|
+
)) })
|
|
805
|
+
)
|
|
806
|
+
] }) });
|
|
807
|
+
}
|
|
808
|
+
|
|
809
|
+
// src/contact-form/index.tsx
|
|
810
|
+
var React5 = __toESM(require("react"));
|
|
811
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
812
|
+
function ContactForm({ data, onSubmit, className }) {
|
|
813
|
+
const [values, setValues] = React5.useState({});
|
|
814
|
+
const [loading, setLoading] = React5.useState(false);
|
|
815
|
+
const [sent, setSent] = React5.useState(false);
|
|
816
|
+
const set = (name, val) => setValues((prev) => ({ ...prev, [name]: val }));
|
|
817
|
+
const handleSubmit = async (e) => {
|
|
818
|
+
e.preventDefault();
|
|
819
|
+
if (!onSubmit) {
|
|
820
|
+
setSent(true);
|
|
821
|
+
return;
|
|
822
|
+
}
|
|
823
|
+
setLoading(true);
|
|
824
|
+
try {
|
|
825
|
+
await onSubmit(values);
|
|
826
|
+
setSent(true);
|
|
827
|
+
} finally {
|
|
828
|
+
setLoading(false);
|
|
829
|
+
}
|
|
830
|
+
};
|
|
831
|
+
const inputBase = "w-full rounded-lg border border-input bg-background px-3.5 py-2.5 text-sm text-foreground placeholder:text-muted-foreground/60 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent disabled:opacity-50";
|
|
832
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("section", { className: cn("w-full py-16 lg:py-28", className), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "container px-4 md:px-6 max-w-5xl mx-auto", children: [
|
|
833
|
+
(data.label || data.heading || data.subheading) && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "text-center mb-12 space-y-4", children: [
|
|
834
|
+
data.label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SectionLabel, { children: data.label }) }),
|
|
835
|
+
data.heading && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: "text-3xl md:text-4xl font-bold tracking-tight text-foreground", children: data.heading }),
|
|
836
|
+
data.subheading && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-muted-foreground max-w-xl mx-auto", children: data.subheading })
|
|
837
|
+
] }),
|
|
838
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("grid gap-12", data.aside ? "md:grid-cols-[1fr_2fr]" : "max-w-2xl mx-auto"), children: [
|
|
839
|
+
data.aside && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: data.aside }),
|
|
840
|
+
sent ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col items-center justify-center text-center gap-4 rounded-2xl border border-border bg-card p-12", children: [
|
|
841
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M20 6 9 17l-5-5" }) }) }),
|
|
842
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-lg font-semibold text-foreground", children: "Message sent!" }),
|
|
843
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm text-muted-foreground", children: "We'll be in touch shortly." })
|
|
844
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
845
|
+
"form",
|
|
846
|
+
{
|
|
847
|
+
onSubmit: handleSubmit,
|
|
848
|
+
className: "grid grid-cols-2 gap-5 rounded-2xl border border-border bg-card p-6 md:p-8",
|
|
849
|
+
style: { boxShadow: "var(--shadow-card)" },
|
|
850
|
+
children: [
|
|
851
|
+
data.fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
852
|
+
"div",
|
|
853
|
+
{
|
|
854
|
+
className: cn(
|
|
855
|
+
"flex flex-col gap-1.5",
|
|
856
|
+
field.colSpan === 2 || field.type === "textarea" ? "col-span-2" : "col-span-2 sm:col-span-1"
|
|
857
|
+
),
|
|
858
|
+
children: [
|
|
859
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
860
|
+
"label",
|
|
861
|
+
{
|
|
862
|
+
htmlFor: field.name,
|
|
863
|
+
className: "text-xs font-medium text-foreground",
|
|
864
|
+
children: [
|
|
865
|
+
field.label,
|
|
866
|
+
field.required && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-primary ml-0.5", children: "*" })
|
|
867
|
+
]
|
|
868
|
+
}
|
|
869
|
+
),
|
|
870
|
+
field.type === "textarea" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
871
|
+
"textarea",
|
|
872
|
+
{
|
|
873
|
+
id: field.name,
|
|
874
|
+
name: field.name,
|
|
875
|
+
rows: 5,
|
|
876
|
+
required: field.required,
|
|
877
|
+
placeholder: field.placeholder,
|
|
878
|
+
value: values[field.name] ?? "",
|
|
879
|
+
onChange: (e) => set(field.name, e.target.value),
|
|
880
|
+
className: cn(inputBase, "resize-none")
|
|
881
|
+
}
|
|
882
|
+
) : field.type === "select" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
883
|
+
"select",
|
|
884
|
+
{
|
|
885
|
+
id: field.name,
|
|
886
|
+
name: field.name,
|
|
887
|
+
required: field.required,
|
|
888
|
+
value: values[field.name] ?? "",
|
|
889
|
+
onChange: (e) => set(field.name, e.target.value),
|
|
890
|
+
className: inputBase,
|
|
891
|
+
children: [
|
|
892
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "", children: field.placeholder ?? "Select\u2026" }),
|
|
893
|
+
field.options?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: opt, children: opt }, opt))
|
|
894
|
+
]
|
|
895
|
+
}
|
|
896
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
897
|
+
"input",
|
|
898
|
+
{
|
|
899
|
+
id: field.name,
|
|
900
|
+
name: field.name,
|
|
901
|
+
type: field.type ?? "text",
|
|
902
|
+
required: field.required,
|
|
903
|
+
placeholder: field.placeholder,
|
|
904
|
+
value: values[field.name] ?? "",
|
|
905
|
+
onChange: (e) => set(field.name, e.target.value),
|
|
906
|
+
className: inputBase
|
|
907
|
+
}
|
|
908
|
+
)
|
|
909
|
+
]
|
|
910
|
+
},
|
|
911
|
+
field.name
|
|
912
|
+
)),
|
|
913
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "col-span-2 mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
914
|
+
"button",
|
|
915
|
+
{
|
|
916
|
+
type: "submit",
|
|
917
|
+
disabled: loading,
|
|
918
|
+
className: "w-full flex items-center justify-center rounded-full px-6 py-3 text-sm font-semibold bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-60 transition-all active:scale-[0.98]",
|
|
919
|
+
children: loading ? "Sending\u2026" : data.submitLabel ?? "Send Message"
|
|
920
|
+
}
|
|
921
|
+
) })
|
|
922
|
+
]
|
|
923
|
+
}
|
|
924
|
+
)
|
|
925
|
+
] })
|
|
926
|
+
] }) });
|
|
927
|
+
}
|
|
928
|
+
|
|
929
|
+
// src/case-studies-section/index.tsx
|
|
930
|
+
var import_framer_motion10 = require("framer-motion");
|
|
931
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
932
|
+
function CaseStudiesSection({
|
|
933
|
+
label,
|
|
934
|
+
heading,
|
|
935
|
+
subheading,
|
|
936
|
+
items,
|
|
937
|
+
className
|
|
938
|
+
}) {
|
|
939
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("section", { className: cn("w-full py-16 lg:py-28", className), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "container px-4 md:px-6 max-w-6xl mx-auto", children: [
|
|
940
|
+
(label || heading || subheading) && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "text-center mb-14 space-y-4", children: [
|
|
941
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SectionLabel, { children: label }) }),
|
|
942
|
+
heading && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h2", { className: "text-3xl md:text-4xl font-bold tracking-tight text-foreground", children: heading }),
|
|
943
|
+
subheading && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-muted-foreground max-w-xl mx-auto", children: subheading })
|
|
944
|
+
] }),
|
|
945
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "grid gap-6 md:grid-cols-2", children: items.map((cs, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
946
|
+
import_framer_motion10.motion.article,
|
|
947
|
+
{
|
|
948
|
+
initial: { opacity: 0, y: 24 },
|
|
949
|
+
whileInView: { opacity: 1, y: 0 },
|
|
950
|
+
whileHover: { y: -4 },
|
|
951
|
+
viewport: { once: true },
|
|
952
|
+
transition: { duration: 0.5, delay: i * 0.08 },
|
|
953
|
+
className: cn(
|
|
954
|
+
"relative flex flex-col rounded-2xl border border-border bg-card overflow-hidden"
|
|
955
|
+
),
|
|
956
|
+
style: { boxShadow: "var(--shadow-card)" },
|
|
957
|
+
children: [
|
|
958
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
959
|
+
"div",
|
|
960
|
+
{
|
|
961
|
+
"aria-hidden": true,
|
|
962
|
+
className: "absolute inset-x-8 top-0 h-px",
|
|
963
|
+
style: { background: "var(--gradient-primary, var(--primary))", opacity: 0.4 }
|
|
964
|
+
}
|
|
965
|
+
),
|
|
966
|
+
cs.image && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "w-full border-b border-border overflow-hidden max-h-48", children: cs.image }),
|
|
967
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col flex-1 p-6 gap-5", children: [
|
|
968
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2 flex-wrap", children: [
|
|
969
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold bg-primary/12 text-primary", children: cs.client }),
|
|
970
|
+
cs.vertical && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium bg-muted text-muted-foreground", children: cs.vertical })
|
|
971
|
+
] }),
|
|
972
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("dl", { className: "space-y-3", children: [
|
|
973
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex gap-2 items-start", children: [
|
|
974
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("dt", { className: "shrink-0 text-xs font-semibold text-muted-foreground uppercase tracking-widest w-16 pt-0.5", children: "Before" }),
|
|
975
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("dd", { className: "text-sm text-muted-foreground", children: cs.before })
|
|
976
|
+
] }),
|
|
977
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex gap-2 items-start", children: [
|
|
978
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("dt", { className: "shrink-0 text-xs font-semibold text-primary uppercase tracking-widest w-16 pt-0.5", children: "Built" }),
|
|
979
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("dd", { className: "text-sm text-foreground", children: cs.built })
|
|
980
|
+
] }),
|
|
981
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex gap-2 items-start", children: [
|
|
982
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("dt", { className: "shrink-0 text-xs font-semibold text-emerald-500 uppercase tracking-widest w-16 pt-0.5", children: "Result" }),
|
|
983
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("dd", { className: "text-sm font-medium text-foreground", children: cs.result })
|
|
984
|
+
] })
|
|
985
|
+
] }),
|
|
986
|
+
cs.stats && cs.stats.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex gap-4 flex-wrap border-t border-border pt-4", children: cs.stats.map((s, j) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-0.5", children: [
|
|
987
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-xl font-bold text-foreground", children: s.value }),
|
|
988
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-xs text-muted-foreground", children: s.label })
|
|
989
|
+
] }, j)) }),
|
|
990
|
+
cs.quote && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("blockquote", { className: "border-l-2 border-primary/40 pl-4 mt-auto", children: [
|
|
991
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "text-sm italic text-muted-foreground", children: [
|
|
992
|
+
'"',
|
|
993
|
+
cs.quote,
|
|
994
|
+
'"'
|
|
995
|
+
] }),
|
|
996
|
+
cs.quoteAuthor && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("cite", { className: "text-xs text-muted-foreground/70 not-italic mt-1 block", children: [
|
|
997
|
+
"\u2014 ",
|
|
998
|
+
cs.quoteAuthor
|
|
999
|
+
] })
|
|
1000
|
+
] }),
|
|
1001
|
+
cs.href && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1002
|
+
"a",
|
|
1003
|
+
{
|
|
1004
|
+
href: cs.href,
|
|
1005
|
+
className: "mt-auto self-start text-xs font-semibold text-primary hover:text-primary/80 underline-offset-2 hover:underline transition-colors",
|
|
1006
|
+
children: "Read full case study \u2192"
|
|
1007
|
+
}
|
|
1008
|
+
)
|
|
1009
|
+
] })
|
|
1010
|
+
]
|
|
1011
|
+
},
|
|
1012
|
+
i
|
|
1013
|
+
)) })
|
|
1014
|
+
] }) });
|
|
1015
|
+
}
|
|
1016
|
+
|
|
1017
|
+
// src/bento-grid/index.tsx
|
|
1018
|
+
var import_framer_motion11 = require("framer-motion");
|
|
1019
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1020
|
+
var spanCols = {
|
|
1021
|
+
1: "md:col-span-1",
|
|
1022
|
+
2: "md:col-span-2",
|
|
1023
|
+
3: "md:col-span-3"
|
|
1024
|
+
};
|
|
1025
|
+
var spanRows = {
|
|
1026
|
+
1: "",
|
|
1027
|
+
2: "md:row-span-2"
|
|
1028
|
+
};
|
|
1029
|
+
function BentoGrid({
|
|
1030
|
+
label,
|
|
1031
|
+
heading,
|
|
1032
|
+
subheading,
|
|
1033
|
+
cells,
|
|
1034
|
+
className
|
|
1035
|
+
}) {
|
|
1036
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("section", { className: cn("w-full py-16 lg:py-28", className), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "container px-4 md:px-6 max-w-6xl mx-auto", children: [
|
|
1037
|
+
(label || heading || subheading) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "text-center mb-12 space-y-4", children: [
|
|
1038
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SectionLabel, { children: label }) }),
|
|
1039
|
+
heading && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h2", { className: "text-3xl md:text-4xl font-bold tracking-tight text-foreground", children: heading }),
|
|
1040
|
+
subheading && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-muted-foreground max-w-xl mx-auto", children: subheading })
|
|
1041
|
+
] }),
|
|
1042
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 auto-rows-fr", children: cells.map((cell, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
1043
|
+
import_framer_motion11.motion.div,
|
|
1044
|
+
{
|
|
1045
|
+
initial: { opacity: 0, y: 20 },
|
|
1046
|
+
whileInView: { opacity: 1, y: 0 },
|
|
1047
|
+
viewport: { once: true },
|
|
1048
|
+
transition: { duration: 0.5, delay: i * 0.07 },
|
|
1049
|
+
className: cn(
|
|
1050
|
+
"relative flex flex-col rounded-2xl border overflow-hidden p-6 min-h-[180px]",
|
|
1051
|
+
spanCols[cell.colSpan ?? 1],
|
|
1052
|
+
spanRows[cell.rowSpan ?? 1],
|
|
1053
|
+
cell.highlight ? "border-primary/50 bg-card" : "border-border bg-card",
|
|
1054
|
+
cell.className
|
|
1055
|
+
),
|
|
1056
|
+
style: cell.highlight ? { boxShadow: "var(--shadow-glow, none)" } : { boxShadow: "var(--shadow-card)" },
|
|
1057
|
+
children: [
|
|
1058
|
+
cell.highlight && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1059
|
+
"div",
|
|
1060
|
+
{
|
|
1061
|
+
"aria-hidden": true,
|
|
1062
|
+
className: "absolute inset-x-0 top-0 h-px",
|
|
1063
|
+
style: { background: "var(--gradient-primary, var(--primary))" }
|
|
1064
|
+
}
|
|
1065
|
+
),
|
|
1066
|
+
cell.tag && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1067
|
+
"span",
|
|
1068
|
+
{
|
|
1069
|
+
className: cn(
|
|
1070
|
+
"self-start inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium mb-4",
|
|
1071
|
+
cell.highlight ? "bg-primary/15 text-primary" : "bg-muted text-muted-foreground"
|
|
1072
|
+
),
|
|
1073
|
+
children: cell.tag
|
|
1074
|
+
}
|
|
1075
|
+
),
|
|
1076
|
+
cell.visual && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "mb-4 flex-1 flex items-start", children: cell.visual }),
|
|
1077
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "mt-auto", children: [
|
|
1078
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-base font-semibold text-foreground mb-1", children: cell.title }),
|
|
1079
|
+
cell.description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm text-muted-foreground", children: cell.description })
|
|
1080
|
+
] })
|
|
1081
|
+
]
|
|
1082
|
+
},
|
|
1083
|
+
i
|
|
1084
|
+
)) })
|
|
1085
|
+
] }) });
|
|
1086
|
+
}
|
|
1087
|
+
|
|
1088
|
+
// src/stats-section/index.tsx
|
|
1089
|
+
var React6 = __toESM(require("react"));
|
|
1090
|
+
var import_framer_motion12 = require("framer-motion");
|
|
1091
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1092
|
+
function CountUp({ value, animate: shouldAnimate = true }) {
|
|
1093
|
+
const ref = React6.useRef(null);
|
|
1094
|
+
const inView = (0, import_framer_motion12.useInView)(ref, { once: true, margin: "-80px" });
|
|
1095
|
+
const motionVal = (0, import_framer_motion12.useMotionValue)(0);
|
|
1096
|
+
const rounded = (0, import_framer_motion12.useTransform)(motionVal, (v) => Math.round(v));
|
|
1097
|
+
const [display, setDisplay] = React6.useState(shouldAnimate ? 0 : value);
|
|
1098
|
+
React6.useEffect(() => {
|
|
1099
|
+
if (!shouldAnimate) {
|
|
1100
|
+
setDisplay(value);
|
|
1101
|
+
return;
|
|
1102
|
+
}
|
|
1103
|
+
if (!inView) return;
|
|
1104
|
+
const controls = (0, import_framer_motion12.animate)(motionVal, value, { duration: 1.8, ease: "easeOut" });
|
|
1105
|
+
const unsub = rounded.on("change", (v) => setDisplay(v));
|
|
1106
|
+
return () => {
|
|
1107
|
+
controls.stop();
|
|
1108
|
+
unsub();
|
|
1109
|
+
};
|
|
1110
|
+
}, [inView, value, shouldAnimate]);
|
|
1111
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { ref, children: display.toLocaleString() });
|
|
1112
|
+
}
|
|
1113
|
+
function StatsSection({
|
|
1114
|
+
label,
|
|
1115
|
+
heading,
|
|
1116
|
+
subheading,
|
|
1117
|
+
stats,
|
|
1118
|
+
animate: shouldAnimate = true,
|
|
1119
|
+
className
|
|
1120
|
+
}) {
|
|
1121
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
1122
|
+
"section",
|
|
1123
|
+
{
|
|
1124
|
+
className: cn("w-full py-16 lg:py-24 relative overflow-hidden", className),
|
|
1125
|
+
children: [
|
|
1126
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1127
|
+
"div",
|
|
1128
|
+
{
|
|
1129
|
+
"aria-hidden": true,
|
|
1130
|
+
className: "absolute inset-0 pointer-events-none",
|
|
1131
|
+
style: { background: "var(--gradient-teal-glow, none)" }
|
|
1132
|
+
}
|
|
1133
|
+
),
|
|
1134
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "relative container px-4 md:px-6 max-w-5xl mx-auto", children: [
|
|
1135
|
+
(label || heading || subheading) && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "text-center mb-14 space-y-4", children: [
|
|
1136
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SectionLabel, { children: label }) }),
|
|
1137
|
+
heading && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h2", { className: "text-3xl md:text-4xl font-bold tracking-tight text-foreground", children: heading }),
|
|
1138
|
+
subheading && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-muted-foreground max-w-xl mx-auto", children: subheading })
|
|
1139
|
+
] }),
|
|
1140
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1141
|
+
"div",
|
|
1142
|
+
{
|
|
1143
|
+
className: cn(
|
|
1144
|
+
"grid gap-8 sm:gap-12",
|
|
1145
|
+
stats.length === 2 && "sm:grid-cols-2",
|
|
1146
|
+
stats.length === 3 && "sm:grid-cols-3",
|
|
1147
|
+
stats.length >= 4 && "sm:grid-cols-2 lg:grid-cols-4"
|
|
1148
|
+
),
|
|
1149
|
+
children: stats.map((stat, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
1150
|
+
import_framer_motion12.motion.div,
|
|
1151
|
+
{
|
|
1152
|
+
initial: { opacity: 0, y: 24 },
|
|
1153
|
+
whileInView: { opacity: 1, y: 0 },
|
|
1154
|
+
viewport: { once: true },
|
|
1155
|
+
transition: { duration: 0.5, delay: i * 0.1 },
|
|
1156
|
+
className: "flex flex-col items-center text-center gap-2",
|
|
1157
|
+
children: [
|
|
1158
|
+
i > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1159
|
+
"div",
|
|
1160
|
+
{
|
|
1161
|
+
"aria-hidden": true,
|
|
1162
|
+
className: "hidden sm:block absolute h-16 w-px bg-border/60 left-0 top-1/2 -translate-y-1/2"
|
|
1163
|
+
}
|
|
1164
|
+
),
|
|
1165
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { className: "text-5xl md:text-6xl font-black tracking-tight text-foreground tabular-nums", children: [
|
|
1166
|
+
stat.prefix && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-primary", children: stat.prefix }),
|
|
1167
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CountUp, { value: stat.value, animate: shouldAnimate }),
|
|
1168
|
+
stat.suffix && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-primary", children: stat.suffix })
|
|
1169
|
+
] }),
|
|
1170
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-sm font-semibold text-foreground", children: stat.label }),
|
|
1171
|
+
stat.description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-xs text-muted-foreground max-w-[140px]", children: stat.description })
|
|
1172
|
+
]
|
|
1173
|
+
},
|
|
1174
|
+
i
|
|
1175
|
+
))
|
|
1176
|
+
}
|
|
1177
|
+
)
|
|
1178
|
+
] })
|
|
1179
|
+
]
|
|
1180
|
+
}
|
|
1181
|
+
);
|
|
1182
|
+
}
|
|
1183
|
+
|
|
1184
|
+
// src/logo-cloud/index.tsx
|
|
1185
|
+
var import_framer_motion13 = require("framer-motion");
|
|
1186
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1187
|
+
function LogoCloud({
|
|
1188
|
+
eyebrow,
|
|
1189
|
+
items,
|
|
1190
|
+
variant = "marquee",
|
|
1191
|
+
speed = 32,
|
|
1192
|
+
className
|
|
1193
|
+
}) {
|
|
1194
|
+
const doubled = [...items, ...items];
|
|
1195
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("section", { className: cn("w-full py-10 lg:py-16", className), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "container px-4 md:px-6 max-w-6xl mx-auto", children: [
|
|
1196
|
+
eyebrow && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-center text-xs font-medium uppercase tracking-widest text-muted-foreground mb-8", children: eyebrow }),
|
|
1197
|
+
variant === "static" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex flex-wrap items-center justify-center gap-8 md:gap-12", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1198
|
+
import_framer_motion13.motion.div,
|
|
1199
|
+
{
|
|
1200
|
+
initial: { opacity: 0 },
|
|
1201
|
+
whileInView: { opacity: 1 },
|
|
1202
|
+
viewport: { once: true },
|
|
1203
|
+
transition: { duration: 0.4, delay: i * 0.06 },
|
|
1204
|
+
title: item.name,
|
|
1205
|
+
className: "opacity-50 hover:opacity-80 transition-opacity grayscale hover:grayscale-0",
|
|
1206
|
+
children: item.logo
|
|
1207
|
+
},
|
|
1208
|
+
i
|
|
1209
|
+
)) }) : (
|
|
1210
|
+
/* Marquee */
|
|
1211
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative overflow-hidden", children: [
|
|
1212
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1213
|
+
"div",
|
|
1214
|
+
{
|
|
1215
|
+
"aria-hidden": true,
|
|
1216
|
+
className: "pointer-events-none absolute inset-y-0 left-0 w-20 z-10",
|
|
1217
|
+
style: { background: "linear-gradient(to right, var(--background), transparent)" }
|
|
1218
|
+
}
|
|
1219
|
+
),
|
|
1220
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1221
|
+
"div",
|
|
1222
|
+
{
|
|
1223
|
+
"aria-hidden": true,
|
|
1224
|
+
className: "pointer-events-none absolute inset-y-0 right-0 w-20 z-10",
|
|
1225
|
+
style: { background: "linear-gradient(to left, var(--background), transparent)" }
|
|
1226
|
+
}
|
|
1227
|
+
),
|
|
1228
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1229
|
+
import_framer_motion13.motion.div,
|
|
1230
|
+
{
|
|
1231
|
+
className: "flex gap-12 items-center",
|
|
1232
|
+
animate: { x: ["0%", "-50%"] },
|
|
1233
|
+
transition: { duration: speed, ease: "linear", repeat: Infinity },
|
|
1234
|
+
children: doubled.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1235
|
+
"div",
|
|
1236
|
+
{
|
|
1237
|
+
title: item.name,
|
|
1238
|
+
className: "shrink-0 opacity-40 hover:opacity-75 transition-opacity grayscale hover:grayscale-0",
|
|
1239
|
+
children: item.logo
|
|
1240
|
+
},
|
|
1241
|
+
i
|
|
1242
|
+
))
|
|
1243
|
+
}
|
|
1244
|
+
)
|
|
1245
|
+
] })
|
|
1246
|
+
)
|
|
1247
|
+
] }) });
|
|
1248
|
+
}
|
|
1249
|
+
|
|
1250
|
+
// src/hero-section/index.tsx
|
|
1251
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1252
|
+
function HeroSection({
|
|
1253
|
+
headline,
|
|
1254
|
+
subheadline,
|
|
1255
|
+
primaryCta,
|
|
1256
|
+
secondaryCta,
|
|
1257
|
+
className,
|
|
1258
|
+
children
|
|
1259
|
+
}) {
|
|
1260
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1261
|
+
"section",
|
|
1262
|
+
{
|
|
1263
|
+
className: cn(
|
|
1264
|
+
"w-full py-12 md:py-24 lg:py-32 xl:py-48 bg-muted/50 border-b",
|
|
1265
|
+
className
|
|
1266
|
+
),
|
|
1267
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "container px-4 md:px-6", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col items-center space-y-4 text-center", children: [
|
|
1268
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "space-y-2", children: [
|
|
1269
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h1", { className: "text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none", children: headline }),
|
|
1270
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "mx-auto max-w-[700px] text-muted-foreground md:text-xl", children: subheadline })
|
|
1271
|
+
] }),
|
|
1272
|
+
(primaryCta || secondaryCta) && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex gap-4", children: [
|
|
1273
|
+
primaryCta,
|
|
1274
|
+
secondaryCta
|
|
1275
|
+
] }),
|
|
1276
|
+
children
|
|
1277
|
+
] }) })
|
|
1278
|
+
}
|
|
1279
|
+
);
|
|
1280
|
+
}
|
|
1281
|
+
|
|
1282
|
+
// src/feature-grid/index.tsx
|
|
1283
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1284
|
+
function FeatureGrid({
|
|
1285
|
+
sectionTitle,
|
|
1286
|
+
features,
|
|
1287
|
+
columns = 3,
|
|
1288
|
+
className
|
|
1289
|
+
}) {
|
|
1290
|
+
const gridCols = {
|
|
1291
|
+
2: "md:grid-cols-2",
|
|
1292
|
+
3: "md:grid-cols-3",
|
|
1293
|
+
4: "md:grid-cols-2 lg:grid-cols-4"
|
|
1294
|
+
};
|
|
1295
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("section", { className: cn("w-full py-12 lg:py-24", className), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "container px-4 md:px-6", children: [
|
|
1296
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { className: "text-3xl font-bold tracking-tighter text-center mb-8", children: sectionTitle }),
|
|
1297
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("grid grid-cols-1 gap-6", gridCols[columns]), children: features.map((feature, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
1298
|
+
"div",
|
|
1299
|
+
{
|
|
1300
|
+
className: "flex flex-col items-center p-6 border rounded-lg bg-card text-card-foreground shadow-sm",
|
|
1301
|
+
children: [
|
|
1302
|
+
feature.icon ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "mb-4", children: feature.icon }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-12 w-12 rounded-full bg-muted mb-4" }),
|
|
1303
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "text-xl font-bold mb-2", children: feature.title }),
|
|
1304
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm text-muted-foreground text-center", children: feature.description })
|
|
1305
|
+
]
|
|
1306
|
+
},
|
|
1307
|
+
i
|
|
1308
|
+
)) })
|
|
1309
|
+
] }) });
|
|
1310
|
+
}
|
|
1311
|
+
|
|
1312
|
+
// src/pricing-table/index.tsx
|
|
1313
|
+
var React7 = __toESM(require("react"));
|
|
1314
|
+
var import_framer_motion14 = require("framer-motion");
|
|
1315
|
+
var import_lucide_react3 = require("lucide-react");
|
|
1316
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1317
|
+
function formatPrice(p, billing, annualPrice) {
|
|
1318
|
+
if (typeof p === "string") return p;
|
|
1319
|
+
if (billing === "annual" && annualPrice !== void 0) {
|
|
1320
|
+
return typeof annualPrice === "number" ? String(annualPrice) : annualPrice;
|
|
1321
|
+
}
|
|
1322
|
+
return String(p);
|
|
1323
|
+
}
|
|
1324
|
+
function PricingTable({
|
|
1325
|
+
sectionTitle,
|
|
1326
|
+
label,
|
|
1327
|
+
heading,
|
|
1328
|
+
subheading,
|
|
1329
|
+
plans,
|
|
1330
|
+
priceSuffix = "/mo",
|
|
1331
|
+
showToggle = true,
|
|
1332
|
+
annualSavingsLabel = "Save 20%",
|
|
1333
|
+
className
|
|
1334
|
+
}) {
|
|
1335
|
+
const [billing, setBilling] = React7.useState("monthly");
|
|
1336
|
+
const hasAnnual = plans.some((p) => p.annualPrice !== void 0);
|
|
1337
|
+
const title = heading ?? sectionTitle ?? "";
|
|
1338
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("section", { className: cn("w-full py-16 lg:py-28", className), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "container px-4 md:px-6 max-w-6xl mx-auto", children: [
|
|
1339
|
+
(label || title || subheading) && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "text-center mb-10 space-y-4", children: [
|
|
1340
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SectionLabel, { children: label }) }),
|
|
1341
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h2", { className: "text-3xl md:text-4xl font-bold tracking-tight text-foreground", children: title }),
|
|
1342
|
+
subheading && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-muted-foreground max-w-xl mx-auto", children: subheading })
|
|
1343
|
+
] }),
|
|
1344
|
+
showToggle && hasAnnual && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-center gap-3 mb-10", children: [
|
|
1345
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1346
|
+
"span",
|
|
1347
|
+
{
|
|
1348
|
+
className: cn(
|
|
1349
|
+
"text-sm font-medium transition-colors",
|
|
1350
|
+
billing === "monthly" ? "text-foreground" : "text-muted-foreground"
|
|
1351
|
+
),
|
|
1352
|
+
children: "Monthly"
|
|
1353
|
+
}
|
|
1354
|
+
),
|
|
1355
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1356
|
+
"button",
|
|
1357
|
+
{
|
|
1358
|
+
role: "switch",
|
|
1359
|
+
"aria-checked": billing === "annual",
|
|
1360
|
+
onClick: () => setBilling((b) => b === "monthly" ? "annual" : "monthly"),
|
|
1361
|
+
className: cn(
|
|
1362
|
+
"relative inline-flex h-6 w-11 cursor-pointer rounded-full border-2 border-transparent transition-colors",
|
|
1363
|
+
billing === "annual" ? "bg-primary" : "bg-muted-foreground/30"
|
|
1364
|
+
),
|
|
1365
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1366
|
+
"span",
|
|
1367
|
+
{
|
|
1368
|
+
className: cn(
|
|
1369
|
+
"pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow-sm transition-transform",
|
|
1370
|
+
billing === "annual" ? "translate-x-5" : "translate-x-0"
|
|
1371
|
+
)
|
|
1372
|
+
}
|
|
1373
|
+
)
|
|
1374
|
+
}
|
|
1375
|
+
),
|
|
1376
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
1377
|
+
"span",
|
|
1378
|
+
{
|
|
1379
|
+
className: cn(
|
|
1380
|
+
"text-sm font-medium transition-colors",
|
|
1381
|
+
billing === "annual" ? "text-foreground" : "text-muted-foreground"
|
|
1382
|
+
),
|
|
1383
|
+
children: [
|
|
1384
|
+
"Annual",
|
|
1385
|
+
annualSavingsLabel && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ml-1.5 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold bg-primary/15 text-primary", children: annualSavingsLabel })
|
|
1386
|
+
]
|
|
1387
|
+
}
|
|
1388
|
+
)
|
|
1389
|
+
] }),
|
|
1390
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1391
|
+
"div",
|
|
1392
|
+
{
|
|
1393
|
+
className: cn(
|
|
1394
|
+
"grid gap-6",
|
|
1395
|
+
plans.length === 2 && "md:grid-cols-2 max-w-3xl mx-auto",
|
|
1396
|
+
plans.length === 3 && "md:grid-cols-2 lg:grid-cols-3",
|
|
1397
|
+
plans.length >= 4 && "md:grid-cols-2 lg:grid-cols-4"
|
|
1398
|
+
),
|
|
1399
|
+
children: plans.map((plan, i) => {
|
|
1400
|
+
const isFeatured = plan.isPrimary ?? plan.featured ?? false;
|
|
1401
|
+
const displayPrice = formatPrice(plan.price, billing, plan.annualPrice);
|
|
1402
|
+
const suffix = plan.priceSuffix ?? priceSuffix;
|
|
1403
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
1404
|
+
import_framer_motion14.motion.div,
|
|
1405
|
+
{
|
|
1406
|
+
initial: { opacity: 0, y: 24 },
|
|
1407
|
+
whileInView: { opacity: 1, y: 0 },
|
|
1408
|
+
viewport: { once: true },
|
|
1409
|
+
transition: { duration: 0.5, delay: i * 0.08 },
|
|
1410
|
+
className: cn(
|
|
1411
|
+
"relative flex flex-col rounded-2xl border overflow-hidden transition-shadow",
|
|
1412
|
+
isFeatured ? "border-primary/60 bg-card" : "border-border bg-card"
|
|
1413
|
+
),
|
|
1414
|
+
style: isFeatured ? { boxShadow: "var(--shadow-glow, 0 4px 24px oklch(0.58 0.15 175 / 22%))" } : { boxShadow: "var(--shadow-card)" },
|
|
1415
|
+
children: [
|
|
1416
|
+
isFeatured && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1417
|
+
"div",
|
|
1418
|
+
{
|
|
1419
|
+
"aria-hidden": true,
|
|
1420
|
+
className: "absolute inset-x-0 top-0 h-px",
|
|
1421
|
+
style: { background: "var(--gradient-primary, var(--primary))" }
|
|
1422
|
+
}
|
|
1423
|
+
),
|
|
1424
|
+
plan.badge && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "absolute top-4 right-4", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold bg-primary text-primary-foreground", children: plan.badge }) }),
|
|
1425
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "p-6 pb-0", children: [
|
|
1426
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm font-medium text-muted-foreground mb-1", children: plan.name }),
|
|
1427
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-xs text-muted-foreground/70 mb-5", children: plan.target }),
|
|
1428
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-end gap-1 mb-6", children: [
|
|
1429
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-4xl font-bold text-foreground tracking-tight", children: typeof displayPrice === "number" ? `$${displayPrice}` : displayPrice }),
|
|
1430
|
+
typeof plan.price === "number" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-sm text-muted-foreground mb-1.5", children: suffix })
|
|
1431
|
+
] })
|
|
1432
|
+
] }),
|
|
1433
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1 px-6 pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ul", { className: "space-y-3", children: plan.features.map((feature, j) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("li", { className: "flex items-start gap-2.5 text-sm text-muted-foreground", children: [
|
|
1434
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1435
|
+
import_lucide_react3.Check,
|
|
1436
|
+
{
|
|
1437
|
+
size: 15,
|
|
1438
|
+
className: "shrink-0 mt-0.5 text-primary",
|
|
1439
|
+
strokeWidth: 2.5
|
|
1440
|
+
}
|
|
1441
|
+
),
|
|
1442
|
+
feature
|
|
1443
|
+
] }, j)) }) }),
|
|
1444
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "px-6 pb-6", children: plan.cta ?? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1445
|
+
"a",
|
|
1446
|
+
{
|
|
1447
|
+
href: plan.ctaHref ?? "#",
|
|
1448
|
+
className: cn(
|
|
1449
|
+
"flex w-full items-center justify-center rounded-full px-4 py-2.5 text-sm font-semibold transition-all active:scale-[0.97]",
|
|
1450
|
+
isFeatured ? "bg-primary text-primary-foreground hover:opacity-90" : "border border-border bg-background text-foreground hover:bg-accent"
|
|
1451
|
+
),
|
|
1452
|
+
children: plan.ctaText
|
|
1453
|
+
}
|
|
1454
|
+
) })
|
|
1455
|
+
]
|
|
1456
|
+
},
|
|
1457
|
+
i
|
|
1458
|
+
);
|
|
1459
|
+
})
|
|
1460
|
+
}
|
|
1461
|
+
)
|
|
1462
|
+
] }) });
|
|
1463
|
+
}
|
|
1464
|
+
|
|
1465
|
+
// src/testimonial-carousel/index.tsx
|
|
1466
|
+
var import_react = require("react");
|
|
1467
|
+
var import_framer_motion15 = require("framer-motion");
|
|
1468
|
+
var import_lucide_react4 = require("lucide-react");
|
|
1469
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1470
|
+
var SPRING_EASE2 = [0.22, 1, 0.36, 1];
|
|
1471
|
+
function isPlaceholderCompany(company) {
|
|
1472
|
+
return /^TBD\b/i.test(company.trim());
|
|
1473
|
+
}
|
|
1474
|
+
function TestimonialsCarousel({
|
|
1475
|
+
data,
|
|
1476
|
+
filterByVertical,
|
|
1477
|
+
className
|
|
1478
|
+
}) {
|
|
1479
|
+
const reviews = (0, import_react.useMemo)(() => {
|
|
1480
|
+
const visible = data.reviews.filter((r) => !r.hidden);
|
|
1481
|
+
if (!filterByVertical) return visible;
|
|
1482
|
+
const filtered = visible.filter((r) => r.vertical === filterByVertical);
|
|
1483
|
+
return filtered.length > 0 ? filtered : visible;
|
|
1484
|
+
}, [data.reviews, filterByVertical]);
|
|
1485
|
+
const verticalLabels = data.vertical_labels ?? {};
|
|
1486
|
+
const [{ index, direction }, setCarouselState] = (0, import_react.useState)({ index: 0, direction: 1 });
|
|
1487
|
+
const [isPaused, setIsPaused] = (0, import_react.useState)(false);
|
|
1488
|
+
(0, import_react.useEffect)(() => {
|
|
1489
|
+
if (isPaused || reviews.length === 0) return;
|
|
1490
|
+
const id = window.setInterval(() => {
|
|
1491
|
+
setCarouselState((s) => ({ index: (s.index + 1) % reviews.length, direction: 1 }));
|
|
1492
|
+
}, 5e3);
|
|
1493
|
+
return () => window.clearInterval(id);
|
|
1494
|
+
}, [isPaused, reviews.length]);
|
|
1495
|
+
const paginate = (dir) => {
|
|
1496
|
+
if (reviews.length === 0) return;
|
|
1497
|
+
setCarouselState((s) => ({
|
|
1498
|
+
index: (s.index + dir + reviews.length) % reviews.length,
|
|
1499
|
+
direction: dir
|
|
1500
|
+
}));
|
|
1501
|
+
};
|
|
1502
|
+
if (reviews.length === 0) return null;
|
|
1503
|
+
const safeIndex = Math.min(index, reviews.length - 1);
|
|
1504
|
+
const active = reviews[safeIndex];
|
|
1505
|
+
const hasMedia = Boolean(active.video);
|
|
1506
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn("mt-14", className), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
1507
|
+
"div",
|
|
1508
|
+
{
|
|
1509
|
+
className: "relative overflow-hidden rounded-[36px] border border-border bg-[linear-gradient(180deg,color-mix(in_srgb,var(--foreground)_6%,transparent),color-mix(in_srgb,var(--foreground)_2%,transparent))] p-4 shadow-panel md:p-6",
|
|
1510
|
+
onMouseEnter: () => setIsPaused(true),
|
|
1511
|
+
onMouseLeave: () => setIsPaused(false),
|
|
1512
|
+
children: [
|
|
1513
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pointer-events-none absolute inset-0 opacity-[0.05]" }),
|
|
1514
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pointer-events-none absolute left-[8%] top-0 h-24 w-1/3 rounded-full bg-primary/12 blur-3xl" }),
|
|
1515
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pointer-events-none absolute bottom-0 right-[8%] h-28 w-1/3 rounded-full bg-secondary/10 blur-3xl" }),
|
|
1516
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pointer-events-none absolute inset-x-10 bottom-0 h-px bg-gradient-to-r from-transparent via-foreground/15 to-transparent" }),
|
|
1517
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "relative z-10 overflow-hidden rounded-[30px]", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_framer_motion15.AnimatePresence, { initial: false, mode: "wait", custom: direction, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
1518
|
+
import_framer_motion15.motion.div,
|
|
1519
|
+
{
|
|
1520
|
+
custom: direction,
|
|
1521
|
+
initial: { opacity: 0, x: direction > 0 ? 72 : -72, scale: 0.98 },
|
|
1522
|
+
animate: { opacity: 1, x: 0, scale: 1 },
|
|
1523
|
+
exit: { opacity: 0, x: direction > 0 ? -72 : 72, scale: 0.98 },
|
|
1524
|
+
transition: { duration: 0.45, ease: SPRING_EASE2 },
|
|
1525
|
+
className: cn(
|
|
1526
|
+
"glass-panel rounded-[30px] p-6 md:p-8",
|
|
1527
|
+
hasMedia ? "grid gap-8 lg:grid-cols-[0.95fr_1.05fr] lg:items-center lg:gap-10" : "relative overflow-hidden md:p-12"
|
|
1528
|
+
),
|
|
1529
|
+
style: { willChange: "transform, opacity" },
|
|
1530
|
+
children: [
|
|
1531
|
+
hasMedia && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative overflow-hidden rounded-[28px] border border-border bg-[radial-gradient(circle_at_top,color-mix(in_srgb,var(--foreground)_10%,transparent),transparent_40%),linear-gradient(180deg,color-mix(in_srgb,var(--foreground)_5%,transparent),rgba(8,11,20,0.6))]", children: [
|
|
1532
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "aspect-[9/16] w-full" }),
|
|
1533
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1534
|
+
"video",
|
|
1535
|
+
{
|
|
1536
|
+
src: active.thumbnail ? active.video : `${active.video}#t=0.1`,
|
|
1537
|
+
poster: active.thumbnail,
|
|
1538
|
+
preload: "metadata",
|
|
1539
|
+
playsInline: true,
|
|
1540
|
+
controls: true,
|
|
1541
|
+
className: "absolute inset-0 h-full w-full object-cover"
|
|
1542
|
+
}
|
|
1543
|
+
)
|
|
1544
|
+
] }),
|
|
1545
|
+
hasMedia ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
|
|
1546
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center gap-1.5 text-[color:var(--rating-star,#F5C451)]", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react4.Star, { className: "h-4 w-4 fill-current" }, i)) }),
|
|
1547
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react4.Quote, { className: "mt-6 h-8 w-8 text-primary" }),
|
|
1548
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "mt-6 text-xl leading-9 text-foreground md:text-[1.75rem] md:leading-[1.65] lg:max-w-[18ch]", children: active.quote }),
|
|
1549
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "mt-8 border-t border-border pt-6", children: [
|
|
1550
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-sm font-semibold uppercase tracking-[0.12em] text-foreground", children: active.author }),
|
|
1551
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1552
|
+
"p",
|
|
1553
|
+
{
|
|
1554
|
+
className: cn(
|
|
1555
|
+
"mt-2 text-sm",
|
|
1556
|
+
isPlaceholderCompany(active.company) ? "text-amber-300/80" : "text-muted-foreground"
|
|
1557
|
+
),
|
|
1558
|
+
children: isPlaceholderCompany(active.company) ? "Company TBD" : active.company
|
|
1559
|
+
}
|
|
1560
|
+
),
|
|
1561
|
+
active.vertical && verticalLabels[active.vertical] && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "mt-2 inline-block rounded-full border border-border bg-foreground/[0.05] px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-primary/90", children: verticalLabels[active.vertical] })
|
|
1562
|
+
] })
|
|
1563
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative mx-auto max-w-3xl text-center", children: [
|
|
1564
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pointer-events-none absolute left-1/2 top-0 h-40 w-40 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/12 blur-3xl" }),
|
|
1565
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative flex flex-col items-center gap-4", children: [
|
|
1566
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react4.Quote, { className: "h-10 w-10 text-primary" }),
|
|
1567
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center gap-1.5 text-[color:var(--rating-star,#F5C451)]", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react4.Star, { className: "h-4 w-4 fill-current" }, i)) })
|
|
1568
|
+
] }),
|
|
1569
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { className: "relative mt-6 font-display text-2xl font-black leading-[1.35] tracking-[-0.02em] text-foreground md:text-3xl md:leading-[1.4]", children: [
|
|
1570
|
+
"\u201C",
|
|
1571
|
+
active.quote,
|
|
1572
|
+
"\u201D"
|
|
1573
|
+
] }),
|
|
1574
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "relative mx-auto mt-8 h-px w-24 bg-gradient-to-r from-transparent via-primary/50 to-transparent" }),
|
|
1575
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative mt-6", children: [
|
|
1576
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-sm font-semibold uppercase tracking-[0.16em] text-foreground", children: active.author }),
|
|
1577
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1578
|
+
"p",
|
|
1579
|
+
{
|
|
1580
|
+
className: cn(
|
|
1581
|
+
"mt-2 text-sm",
|
|
1582
|
+
isPlaceholderCompany(active.company) ? "text-amber-300/80" : "text-muted-foreground"
|
|
1583
|
+
),
|
|
1584
|
+
children: isPlaceholderCompany(active.company) ? "Company TBD" : active.company
|
|
1585
|
+
}
|
|
1586
|
+
),
|
|
1587
|
+
active.vertical && verticalLabels[active.vertical] && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "mt-3 inline-block rounded-full border border-border bg-foreground/[0.05] px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-primary/90", children: verticalLabels[active.vertical] })
|
|
1588
|
+
] })
|
|
1589
|
+
] })
|
|
1590
|
+
]
|
|
1591
|
+
},
|
|
1592
|
+
`${active.author}-${active.company}`
|
|
1593
|
+
) }) }),
|
|
1594
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative z-10 mt-5 flex items-center justify-between gap-4", children: [
|
|
1595
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
1596
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1597
|
+
"button",
|
|
1598
|
+
{
|
|
1599
|
+
type: "button",
|
|
1600
|
+
onClick: () => paginate(-1),
|
|
1601
|
+
className: "inline-flex h-11 w-11 items-center justify-center rounded-full border border-border bg-foreground/[0.05] text-foreground transition-colors hover:border-border hover:bg-foreground/[0.08]",
|
|
1602
|
+
"aria-label": "Previous testimonial",
|
|
1603
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react4.ChevronLeft, { className: "h-5 w-5" })
|
|
1604
|
+
}
|
|
1605
|
+
),
|
|
1606
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1607
|
+
"button",
|
|
1608
|
+
{
|
|
1609
|
+
type: "button",
|
|
1610
|
+
onClick: () => paginate(1),
|
|
1611
|
+
className: "inline-flex h-11 w-11 items-center justify-center rounded-full border border-border bg-foreground/[0.05] text-foreground transition-colors hover:border-border hover:bg-foreground/[0.08]",
|
|
1612
|
+
"aria-label": "Next testimonial",
|
|
1613
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react4.ChevronRight, { className: "h-5 w-5" })
|
|
1614
|
+
}
|
|
1615
|
+
)
|
|
1616
|
+
] }),
|
|
1617
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
1618
|
+
"div",
|
|
1619
|
+
{
|
|
1620
|
+
className: "font-label text-sm tabular-nums text-muted-foreground",
|
|
1621
|
+
"aria-live": "polite",
|
|
1622
|
+
"aria-label": `Testimonial ${safeIndex + 1} of ${reviews.length}`,
|
|
1623
|
+
children: [
|
|
1624
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-foreground", children: safeIndex + 1 }),
|
|
1625
|
+
" / ",
|
|
1626
|
+
reviews.length
|
|
1627
|
+
]
|
|
1628
|
+
}
|
|
1629
|
+
)
|
|
1630
|
+
] })
|
|
1631
|
+
]
|
|
1632
|
+
}
|
|
1633
|
+
) });
|
|
1634
|
+
}
|
|
1635
|
+
function TestimonialsSection({ data, filterByVertical }) {
|
|
1636
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("section", { id: "testimonials", className: "section-shell", children: [
|
|
1637
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SectionGlow, { variant: "primary" }),
|
|
1638
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-foreground/[0.05] to-transparent" }),
|
|
1639
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "container", children: [
|
|
1640
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FadeUp, { className: "max-w-3xl", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SectionIntro, { label: data.label, title: data.title, body: data.description }) }),
|
|
1641
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TestimonialsCarousel, { data, filterByVertical })
|
|
1642
|
+
] })
|
|
1643
|
+
] });
|
|
1644
|
+
}
|
|
1645
|
+
var TestimonialCarousel = TestimonialsCarousel;
|
|
1646
|
+
|
|
1647
|
+
// src/use-cases/index.tsx
|
|
1648
|
+
var import_lucide_react5 = require("lucide-react");
|
|
1649
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1650
|
+
var DEFAULT_ICONS = {
|
|
1651
|
+
Settings: import_lucide_react5.Settings,
|
|
1652
|
+
ShoppingBag: import_lucide_react5.ShoppingBag,
|
|
1653
|
+
PhoneCall: import_lucide_react5.PhoneCall,
|
|
1654
|
+
Lightbulb: import_lucide_react5.Lightbulb,
|
|
1655
|
+
Store: import_lucide_react5.Store
|
|
1656
|
+
};
|
|
1657
|
+
function UseCasesSection({ data, iconMap }) {
|
|
1658
|
+
const icons = { ...DEFAULT_ICONS, ...iconMap };
|
|
1659
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("section", { id: "use-cases", className: "section-shell overflow-x-clip pb-12 md:pb-24", children: [
|
|
1660
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SectionGlow, { variant: "primary" }),
|
|
1661
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "pointer-events-none absolute inset-0 opacity-[0.03]" }),
|
|
1662
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "pointer-events-none absolute left-[-10%] top-1/4 h-96 w-96 rounded-full bg-secondary/[0.18] blur-[100px]" }),
|
|
1663
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "pointer-events-none absolute right-[-10%] top-2/3 h-96 w-96 rounded-full bg-accent/10 blur-[100px]" }),
|
|
1664
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "container relative z-10", children: [
|
|
1665
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FadeUp, { className: "mx-auto max-w-3xl text-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SectionIntro, { label: data.label, title: data.title, centered: true }) }),
|
|
1666
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FadeUp, { className: "mt-11 md:mt-14", delay: 0.2, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "relative mx-auto grid max-w-6xl grid-cols-2 gap-px lg:grid-cols-6", children: data.cards.map((card, idx) => {
|
|
1667
|
+
const Icon = icons[card.icon] ?? import_lucide_react5.Settings;
|
|
1668
|
+
const colClass = data.cards.length === 5 ? idx < 2 ? "lg:col-span-2" : idx === 2 ? "col-span-2 lg:col-span-2" : "col-span-2 lg:col-span-3" : "";
|
|
1669
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
1670
|
+
"div",
|
|
1671
|
+
{
|
|
1672
|
+
className: cn(
|
|
1673
|
+
"group relative flex flex-col border border-border bg-foreground/[0.04] p-4 transition-colors duration-500 hover:border-border hover:bg-foreground/[0.05] md:p-7",
|
|
1674
|
+
colClass
|
|
1675
|
+
),
|
|
1676
|
+
children: [
|
|
1677
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "pointer-events-none absolute -right-4 -top-4 h-24 w-24 rounded-full bg-foreground/[0.05] blur-2xl transition-all duration-500 group-hover:bg-foreground/10" }),
|
|
1678
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl border border-border bg-foreground/[0.05] text-primary shadow-sm transition-transform duration-500 group-hover:scale-110 group-hover:border-border group-hover:bg-foreground/[0.07] md:h-12 md:w-12", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { className: "h-4 w-4 md:h-5 md:w-5" }) }),
|
|
1679
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "mt-4 flex flex-1 flex-col md:mt-6", children: [
|
|
1680
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: "font-display text-lg font-bold leading-tight tracking-tight text-foreground md:text-2xl", children: card.title }),
|
|
1681
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "mt-2 text-xs font-medium text-muted-foreground md:text-sm", children: card.subtitle }),
|
|
1682
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "mt-auto pt-4 md:pt-6", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-[10px] leading-relaxed text-muted-foreground md:text-xs", children: card.tracking }) })
|
|
1683
|
+
] })
|
|
1684
|
+
]
|
|
1685
|
+
},
|
|
1686
|
+
card.title
|
|
1687
|
+
);
|
|
1688
|
+
}) }) })
|
|
1689
|
+
] })
|
|
1690
|
+
] });
|
|
1691
|
+
}
|
|
1692
|
+
|
|
1693
|
+
// src/value-stack/index.tsx
|
|
1694
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1695
|
+
function StackRows({ rows }) {
|
|
1696
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", { className: "divide-y divide-border", children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1697
|
+
"li",
|
|
1698
|
+
{
|
|
1699
|
+
className: "grid grid-cols-[1fr_auto] items-baseline gap-4 py-2 md:gap-6 md:py-3",
|
|
1700
|
+
children: [
|
|
1701
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "min-w-0", children: [
|
|
1702
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-sm text-foreground/90 md:text-base", children: row.deliverable }),
|
|
1703
|
+
row.note && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mt-0.5 text-[11px] leading-snug text-muted-foreground", children: row.note })
|
|
1704
|
+
] }),
|
|
1705
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "shrink-0 font-display text-sm font-black tracking-[-0.02em] text-foreground md:text-base", children: row.value })
|
|
1706
|
+
]
|
|
1707
|
+
},
|
|
1708
|
+
row.deliverable
|
|
1709
|
+
)) });
|
|
1710
|
+
}
|
|
1711
|
+
function ValueStackSection({ data }) {
|
|
1712
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("section", { id: "value-stack", className: "section-shell relative overflow-x-clip", children: [
|
|
1713
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SectionGlow, { variant: "primary" }),
|
|
1714
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "pointer-events-none absolute -left-20 top-1/3 h-72 w-72 rounded-full bg-accent/10 blur-3xl" }),
|
|
1715
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "pointer-events-none absolute -right-20 bottom-0 h-80 w-80 rounded-full bg-secondary/[0.08] blur-3xl" }),
|
|
1716
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "container", children: [
|
|
1717
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FadeUp, { className: "max-w-3xl", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SectionIntro, { label: data.label, title: data.title, body: data.body }) }),
|
|
1718
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FadeUp, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mt-12 overflow-hidden rounded-[28px] border border-border bg-[linear-gradient(180deg,color-mix(in_srgb,var(--foreground)_5%,transparent),color-mix(in_srgb,var(--foreground)_2%,transparent))] shadow-panel", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "grid divide-border lg:grid-cols-2 lg:divide-x", children: ["setup_block", "ongoing_block"].map((blockKey, i) => {
|
|
1719
|
+
const block = data[blockKey];
|
|
1720
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1721
|
+
"div",
|
|
1722
|
+
{
|
|
1723
|
+
className: cn(
|
|
1724
|
+
"relative p-6 md:p-8",
|
|
1725
|
+
i === 1 && "border-t border-border lg:border-t-0"
|
|
1726
|
+
),
|
|
1727
|
+
children: [
|
|
1728
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { className: "text-xs uppercase tracking-[0.18em] text-primary", children: block.title }),
|
|
1729
|
+
block.subtitle && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: block.subtitle }),
|
|
1730
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mt-5", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StackRows, { rows: block.rows }) })
|
|
1731
|
+
]
|
|
1732
|
+
},
|
|
1733
|
+
blockKey
|
|
1734
|
+
);
|
|
1735
|
+
}) }) }) }),
|
|
1736
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FadeUp, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "mt-8 mx-auto max-w-3xl rounded-[28px] border border-accent/30 bg-[radial-gradient(circle_at_top,rgba(115,136,207,0.14),transparent_55%),linear-gradient(180deg,color-mix(in_srgb,var(--foreground)_5%,transparent),color-mix(in_srgb,var(--foreground)_2%,transparent))] p-6 shadow-panel md:p-8", children: [
|
|
1737
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mb-2 text-[10px] uppercase tracking-[0.22em] text-muted-foreground", children: "If you hire it out" }),
|
|
1738
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "grid gap-3 md:grid-cols-[1fr_auto] md:items-center md:gap-6", children: [
|
|
1739
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "text-sm text-muted-foreground md:text-base", children: data.totals.monthly_label }),
|
|
1740
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "font-display text-xl font-black tracking-[-0.02em] text-foreground/80 md:text-2xl", children: data.totals.monthly_value })
|
|
1741
|
+
] }),
|
|
1742
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "mt-2 grid gap-3 md:grid-cols-[1fr_auto] md:items-center md:gap-6", children: [
|
|
1743
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "text-sm text-muted-foreground md:text-base", children: data.totals.setup_label }),
|
|
1744
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "font-display text-xl font-black tracking-[-0.02em] text-foreground/80 md:text-2xl", children: data.totals.setup_value })
|
|
1745
|
+
] }),
|
|
1746
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "my-6 h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent" }),
|
|
1747
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "grid gap-4 md:grid-cols-[1fr_auto] md:items-center md:gap-6", children: [
|
|
1748
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
|
|
1749
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "text-[11px] uppercase tracking-[0.22em] text-accent", children: data.investment.label }),
|
|
1750
|
+
data.investment.note && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mt-2 text-xs leading-relaxed text-muted-foreground", children: data.investment.note })
|
|
1751
|
+
] }),
|
|
1752
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "font-display text-xl font-black leading-tight tracking-[-0.03em] text-foreground md:text-2xl", children: data.investment.value })
|
|
1753
|
+
] })
|
|
1754
|
+
] }) })
|
|
1755
|
+
] })
|
|
1756
|
+
] });
|
|
1757
|
+
}
|
|
1758
|
+
|
|
1759
|
+
// src/tech-carousel/index.tsx
|
|
1760
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1761
|
+
function TechCarousel({
|
|
1762
|
+
items,
|
|
1763
|
+
className,
|
|
1764
|
+
speed = "normal",
|
|
1765
|
+
reverse = false,
|
|
1766
|
+
hoverColor = "text-teal"
|
|
1767
|
+
}) {
|
|
1768
|
+
const doubled = [...items, ...items];
|
|
1769
|
+
const animClass = reverse ? speed === "slow" ? "animate-marquee-reverse" : "animate-marquee-reverse" : speed === "slow" ? "animate-marquee-slow" : "animate-marquee";
|
|
1770
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1771
|
+
"div",
|
|
1772
|
+
{
|
|
1773
|
+
className: cn(
|
|
1774
|
+
"relative overflow-hidden mask-fade-horizontal",
|
|
1775
|
+
className
|
|
1776
|
+
),
|
|
1777
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cn("flex w-max gap-10 py-4 translate-gpu", animClass), children: doubled.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
1778
|
+
"div",
|
|
1779
|
+
{
|
|
1780
|
+
className: cn(
|
|
1781
|
+
"flex shrink-0 items-center gap-2 text-muted transition-colors duration-300",
|
|
1782
|
+
`hover:${hoverColor}`
|
|
1783
|
+
),
|
|
1784
|
+
children: [
|
|
1785
|
+
item.icon,
|
|
1786
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-sm font-medium whitespace-nowrap", children: item.name })
|
|
1787
|
+
]
|
|
1788
|
+
},
|
|
1789
|
+
i
|
|
1790
|
+
)) })
|
|
1791
|
+
}
|
|
1792
|
+
);
|
|
1793
|
+
}
|
|
1794
|
+
|
|
1795
|
+
// src/footer/index.tsx
|
|
1796
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1797
|
+
function Footer({
|
|
1798
|
+
copyrightText,
|
|
1799
|
+
links,
|
|
1800
|
+
className,
|
|
1801
|
+
children
|
|
1802
|
+
}) {
|
|
1803
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("footer", { className: cn("w-full py-6 bg-background border-t", className), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "container px-4 md:px-6 flex flex-col md:flex-row items-center justify-between", children: [
|
|
1804
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-sm text-muted-foreground", children: copyrightText }),
|
|
1805
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("nav", { className: "flex gap-4 sm:gap-6 mt-4 md:mt-0", children: links.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1806
|
+
"a",
|
|
1807
|
+
{
|
|
1808
|
+
href: link.href,
|
|
1809
|
+
className: "text-sm hover:underline cursor-pointer",
|
|
1810
|
+
children: link.label
|
|
1811
|
+
},
|
|
1812
|
+
i
|
|
1813
|
+
)) }),
|
|
1814
|
+
children
|
|
1815
|
+
] }) });
|
|
1816
|
+
}
|
|
1817
|
+
|
|
1818
|
+
// src/social-proof/index.tsx
|
|
1819
|
+
var import_framer_motion16 = require("framer-motion");
|
|
1820
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1821
|
+
function SocialProof({ items, logos, className }) {
|
|
1822
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("section", { className: cn("w-full py-8 border-y bg-muted/20", className), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "container px-4 md:px-6", children: [
|
|
1823
|
+
logos && logos.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex flex-wrap items-center justify-center gap-8 mb-8 opacity-60", children: logos.map((logo, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { children: logo }, i)) }),
|
|
1824
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-6 text-center", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
1825
|
+
import_framer_motion16.motion.div,
|
|
1826
|
+
{
|
|
1827
|
+
initial: { opacity: 0, y: 20 },
|
|
1828
|
+
whileInView: { opacity: 1, y: 0 },
|
|
1829
|
+
viewport: { once: true },
|
|
1830
|
+
transition: { delay: i * 0.1 },
|
|
1831
|
+
children: [
|
|
1832
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "text-3xl font-bold", children: item.value }),
|
|
1833
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "text-sm text-muted-foreground", children: item.label })
|
|
1834
|
+
]
|
|
1835
|
+
},
|
|
1836
|
+
i
|
|
1837
|
+
)) })
|
|
1838
|
+
] }) });
|
|
1839
|
+
}
|
|
1840
|
+
|
|
1841
|
+
// src/faq/index.tsx
|
|
1842
|
+
var React8 = __toESM(require("react"));
|
|
1843
|
+
var import_framer_motion17 = require("framer-motion");
|
|
1844
|
+
var import_lucide_react6 = require("lucide-react");
|
|
1845
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1846
|
+
function Faq({
|
|
1847
|
+
sectionTitle,
|
|
1848
|
+
label,
|
|
1849
|
+
heading,
|
|
1850
|
+
subheading,
|
|
1851
|
+
items,
|
|
1852
|
+
mode = "single",
|
|
1853
|
+
className
|
|
1854
|
+
}) {
|
|
1855
|
+
const [openSet, setOpenSet] = React8.useState(/* @__PURE__ */ new Set());
|
|
1856
|
+
const title = heading ?? sectionTitle ?? "";
|
|
1857
|
+
const toggle = (i) => {
|
|
1858
|
+
setOpenSet((prev) => {
|
|
1859
|
+
const next = new Set(mode === "multi" ? prev : /* @__PURE__ */ new Set());
|
|
1860
|
+
if (prev.has(i)) next.delete(i);
|
|
1861
|
+
else next.add(i);
|
|
1862
|
+
return next;
|
|
1863
|
+
});
|
|
1864
|
+
};
|
|
1865
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("section", { className: cn("w-full py-16 lg:py-28", className), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "container px-4 md:px-6 max-w-3xl mx-auto", children: [
|
|
1866
|
+
(label || title || subheading) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "text-center mb-12 space-y-4", children: [
|
|
1867
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SectionLabel, { children: label }) }),
|
|
1868
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h2", { className: "text-3xl md:text-4xl font-bold tracking-tight text-foreground", children: title }),
|
|
1869
|
+
subheading && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-muted-foreground max-w-xl mx-auto", children: subheading })
|
|
1870
|
+
] }),
|
|
1871
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "space-y-2", children: items.map((item, i) => {
|
|
1872
|
+
const isOpen = openSet.has(i);
|
|
1873
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
1874
|
+
import_framer_motion17.motion.div,
|
|
1875
|
+
{
|
|
1876
|
+
initial: false,
|
|
1877
|
+
className: cn(
|
|
1878
|
+
"rounded-xl border overflow-hidden transition-colors",
|
|
1879
|
+
isOpen ? "border-primary/40 bg-card" : "border-border bg-card/50"
|
|
1880
|
+
),
|
|
1881
|
+
style: isOpen ? { boxShadow: "var(--glow-primary-sm, none)" } : void 0,
|
|
1882
|
+
children: [
|
|
1883
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
1884
|
+
"button",
|
|
1885
|
+
{
|
|
1886
|
+
className: "flex w-full items-center justify-between gap-4 px-5 py-4 text-left",
|
|
1887
|
+
onClick: () => toggle(i),
|
|
1888
|
+
"aria-expanded": isOpen,
|
|
1889
|
+
children: [
|
|
1890
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1891
|
+
"span",
|
|
1892
|
+
{
|
|
1893
|
+
className: cn(
|
|
1894
|
+
"text-sm font-medium transition-colors",
|
|
1895
|
+
isOpen ? "text-foreground" : "text-foreground/80"
|
|
1896
|
+
),
|
|
1897
|
+
children: item.question
|
|
1898
|
+
}
|
|
1899
|
+
),
|
|
1900
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1901
|
+
"span",
|
|
1902
|
+
{
|
|
1903
|
+
className: cn(
|
|
1904
|
+
"shrink-0 rounded-full p-0.5 border transition-all",
|
|
1905
|
+
isOpen ? "border-primary/50 text-primary" : "border-border text-muted-foreground"
|
|
1906
|
+
),
|
|
1907
|
+
children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react6.Minus, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react6.Plus, { size: 14 })
|
|
1908
|
+
}
|
|
1909
|
+
)
|
|
1910
|
+
]
|
|
1911
|
+
}
|
|
1912
|
+
),
|
|
1913
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_framer_motion17.AnimatePresence, { initial: false, children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1914
|
+
import_framer_motion17.motion.div,
|
|
1915
|
+
{
|
|
1916
|
+
initial: { height: 0, opacity: 0 },
|
|
1917
|
+
animate: { height: "auto", opacity: 1 },
|
|
1918
|
+
exit: { height: 0, opacity: 0 },
|
|
1919
|
+
transition: { duration: 0.25, ease: "easeInOut" },
|
|
1920
|
+
className: "overflow-hidden",
|
|
1921
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "px-5 pb-5 text-sm text-muted-foreground leading-relaxed", children: item.answer })
|
|
1922
|
+
},
|
|
1923
|
+
"answer"
|
|
1924
|
+
) })
|
|
1925
|
+
]
|
|
1926
|
+
},
|
|
1927
|
+
i
|
|
1928
|
+
);
|
|
1929
|
+
}) })
|
|
1930
|
+
] }) });
|
|
1931
|
+
}
|
|
1932
|
+
|
|
1933
|
+
// src/comparison-table/index.tsx
|
|
1934
|
+
var import_lucide_react7 = require("lucide-react");
|
|
1935
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1936
|
+
function ComparisonTable({
|
|
1937
|
+
columns,
|
|
1938
|
+
rows,
|
|
1939
|
+
highlightColumn,
|
|
1940
|
+
className
|
|
1941
|
+
}) {
|
|
1942
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("table", { className: "w-full text-sm", children: [
|
|
1943
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("tr", { className: "border-b", children: [
|
|
1944
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("th", { className: "p-4 text-left font-medium text-muted-foreground", children: "Feature" }),
|
|
1945
|
+
columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1946
|
+
"th",
|
|
1947
|
+
{
|
|
1948
|
+
className: cn(
|
|
1949
|
+
"p-4 text-center font-bold",
|
|
1950
|
+
highlightColumn === i && "bg-primary/5 text-primary"
|
|
1951
|
+
),
|
|
1952
|
+
children: col
|
|
1953
|
+
},
|
|
1954
|
+
i
|
|
1955
|
+
))
|
|
1956
|
+
] }) }),
|
|
1957
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("tr", { className: "border-b last:border-0", children: [
|
|
1958
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("td", { className: "p-4 font-medium", children: row.feature }),
|
|
1959
|
+
row.values.map((val, j) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1960
|
+
"td",
|
|
1961
|
+
{
|
|
1962
|
+
className: cn(
|
|
1963
|
+
"p-4 text-center",
|
|
1964
|
+
highlightColumn === j && "bg-primary/5"
|
|
1965
|
+
),
|
|
1966
|
+
children: typeof val === "boolean" ? val ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react7.CheckIcon, { className: "mx-auto h-4 w-4 text-primary" }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react7.XIcon, { className: "mx-auto h-4 w-4 text-muted-foreground/40" }) : val
|
|
1967
|
+
},
|
|
1968
|
+
j
|
|
1969
|
+
))
|
|
1970
|
+
] }, i)) })
|
|
1971
|
+
] }) });
|
|
1972
|
+
}
|
|
1973
|
+
|
|
1974
|
+
// src/hero-canvas/index.tsx
|
|
1975
|
+
var import_fiber = require("@react-three/fiber");
|
|
1976
|
+
var import_simplex_noise = require("simplex-noise");
|
|
1977
|
+
var import_three = require("three");
|
|
1978
|
+
var import_react2 = require("react");
|
|
1979
|
+
var import_framer_motion18 = require("framer-motion");
|
|
1980
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1981
|
+
function buildNodes(count) {
|
|
1982
|
+
const accentEvery = Math.max(1, Math.floor(count / 15));
|
|
1983
|
+
const nodes = [];
|
|
1984
|
+
for (let index = 0; index < count; index += 1) {
|
|
1985
|
+
const angle = Math.random() * Math.PI * 2;
|
|
1986
|
+
const radius = 1.5 + Math.random() * 5.75;
|
|
1987
|
+
const spread = Math.random() * 1.2;
|
|
1988
|
+
nodes.push({
|
|
1989
|
+
accent: index % accentEvery === 0,
|
|
1990
|
+
baseX: Math.cos(angle) * radius * 1.5,
|
|
1991
|
+
baseY: (Math.random() - 0.5) * 16 + spread,
|
|
1992
|
+
baseZ: (Math.random() - 0.5) * 6,
|
|
1993
|
+
driftX: Math.random() * 100,
|
|
1994
|
+
driftY: Math.random() * 100,
|
|
1995
|
+
driftZ: Math.random() * 100
|
|
1996
|
+
});
|
|
1997
|
+
}
|
|
1998
|
+
return nodes;
|
|
1999
|
+
}
|
|
2000
|
+
function ParticleNetwork({
|
|
2001
|
+
count,
|
|
2002
|
+
accentColor,
|
|
2003
|
+
baseColor
|
|
2004
|
+
}) {
|
|
2005
|
+
const groupRef = (0, import_react2.useRef)(null);
|
|
2006
|
+
const pointsRef = (0, import_react2.useRef)(null);
|
|
2007
|
+
const linesRef = (0, import_react2.useRef)(null);
|
|
2008
|
+
const cursorRef = (0, import_react2.useRef)({ x: 0, y: 0 });
|
|
2009
|
+
const nodes = (0, import_react2.useMemo)(() => buildNodes(count), [count]);
|
|
2010
|
+
const noise3D = (0, import_react2.useMemo)(() => (0, import_simplex_noise.createNoise3D)(), []);
|
|
2011
|
+
const pointPositions = (0, import_react2.useMemo)(() => new Float32Array(count * 3), [count]);
|
|
2012
|
+
const pointColors = (0, import_react2.useMemo)(() => new Float32Array(count * 3), [count]);
|
|
2013
|
+
const cursorOffsetsX = (0, import_react2.useMemo)(() => new Float32Array(count), [count]);
|
|
2014
|
+
const cursorOffsetsY = (0, import_react2.useMemo)(() => new Float32Array(count), [count]);
|
|
2015
|
+
const accent = (0, import_react2.useMemo)(() => new import_three.Color(accentColor), [accentColor]);
|
|
2016
|
+
const base = (0, import_react2.useMemo)(() => new import_three.Color(baseColor), [baseColor]);
|
|
2017
|
+
(0, import_react2.useEffect)(() => {
|
|
2018
|
+
const handleMouseMove = (event) => {
|
|
2019
|
+
cursorRef.current.x = event.clientX / window.innerWidth * 2 - 1;
|
|
2020
|
+
cursorRef.current.y = -(event.clientY / window.innerHeight * 2 - 1);
|
|
2021
|
+
};
|
|
2022
|
+
window.addEventListener("mousemove", handleMouseMove);
|
|
2023
|
+
return () => window.removeEventListener("mousemove", handleMouseMove);
|
|
2024
|
+
}, []);
|
|
2025
|
+
(0, import_react2.useEffect)(() => {
|
|
2026
|
+
nodes.forEach((node, index) => {
|
|
2027
|
+
const pointIndex = index * 3;
|
|
2028
|
+
pointPositions[pointIndex] = node.baseX;
|
|
2029
|
+
pointPositions[pointIndex + 1] = node.baseY;
|
|
2030
|
+
pointPositions[pointIndex + 2] = node.baseZ;
|
|
2031
|
+
const color = node.accent ? accent : base;
|
|
2032
|
+
pointColors[pointIndex] = color.r;
|
|
2033
|
+
pointColors[pointIndex + 1] = color.g;
|
|
2034
|
+
pointColors[pointIndex + 2] = color.b;
|
|
2035
|
+
});
|
|
2036
|
+
const geometry = pointsRef.current?.geometry;
|
|
2037
|
+
if (!geometry) return;
|
|
2038
|
+
geometry.setAttribute("position", new import_three.BufferAttribute(pointPositions, 3));
|
|
2039
|
+
geometry.setAttribute("color", new import_three.BufferAttribute(pointColors, 3));
|
|
2040
|
+
}, [nodes, pointColors, pointPositions, accent, base]);
|
|
2041
|
+
(0, import_fiber.useFrame)(({ clock, pointer }) => {
|
|
2042
|
+
const time = clock.elapsedTime * 0.16;
|
|
2043
|
+
const cursorWorldX = cursorRef.current.x * 9;
|
|
2044
|
+
const cursorWorldY = cursorRef.current.y * 5.5;
|
|
2045
|
+
const attractRadius = 3.2;
|
|
2046
|
+
const attractStrength = 1.4;
|
|
2047
|
+
const lerpFactor = 0.06;
|
|
2048
|
+
for (let index = 0; index < nodes.length; index += 1) {
|
|
2049
|
+
const node = nodes[index];
|
|
2050
|
+
const positionIndex = index * 3;
|
|
2051
|
+
pointPositions[positionIndex] = node.baseX + noise3D(node.driftX, time, node.driftZ) * 0.85;
|
|
2052
|
+
pointPositions[positionIndex + 1] = node.baseY + noise3D(node.driftY, node.driftX, time) * 0.7;
|
|
2053
|
+
pointPositions[positionIndex + 2] = node.baseZ + noise3D(time, node.driftZ, node.driftY) * 0.55;
|
|
2054
|
+
}
|
|
2055
|
+
for (let index = 0; index < nodes.length; index += 1) {
|
|
2056
|
+
const positionIndex = index * 3;
|
|
2057
|
+
const dx = cursorWorldX - pointPositions[positionIndex];
|
|
2058
|
+
const dy = cursorWorldY - pointPositions[positionIndex + 1];
|
|
2059
|
+
const distance = Math.hypot(dx, dy);
|
|
2060
|
+
let targetOffsetX = 0;
|
|
2061
|
+
let targetOffsetY = 0;
|
|
2062
|
+
if (distance < attractRadius) {
|
|
2063
|
+
const influence = 1 - distance / attractRadius;
|
|
2064
|
+
targetOffsetX = dx * influence * attractStrength;
|
|
2065
|
+
targetOffsetY = dy * influence * attractStrength;
|
|
2066
|
+
}
|
|
2067
|
+
cursorOffsetsX[index] += (targetOffsetX - cursorOffsetsX[index]) * lerpFactor;
|
|
2068
|
+
cursorOffsetsY[index] += (targetOffsetY - cursorOffsetsY[index]) * lerpFactor;
|
|
2069
|
+
pointPositions[positionIndex] += cursorOffsetsX[index];
|
|
2070
|
+
pointPositions[positionIndex + 1] += cursorOffsetsY[index];
|
|
2071
|
+
}
|
|
2072
|
+
const pointGeometry = pointsRef.current?.geometry;
|
|
2073
|
+
const lineGeometry = linesRef.current?.geometry;
|
|
2074
|
+
if (pointGeometry?.attributes.position) {
|
|
2075
|
+
pointGeometry.attributes.position.needsUpdate = true;
|
|
2076
|
+
}
|
|
2077
|
+
if (lineGeometry) {
|
|
2078
|
+
const segments = [];
|
|
2079
|
+
const maxSegments = count < 400 ? 540 : 1200;
|
|
2080
|
+
const threshold = count < 400 ? 2.3 : 2.5;
|
|
2081
|
+
const thresholdSq = threshold * threshold;
|
|
2082
|
+
for (let index = 0; index < nodes.length; index += 1) {
|
|
2083
|
+
for (let nextIndex = index + 1; nextIndex < nodes.length; nextIndex += 1) {
|
|
2084
|
+
const offsetA = index * 3;
|
|
2085
|
+
const offsetB = nextIndex * 3;
|
|
2086
|
+
const dx = pointPositions[offsetA] - pointPositions[offsetB];
|
|
2087
|
+
const dy = pointPositions[offsetA + 1] - pointPositions[offsetB + 1];
|
|
2088
|
+
const dz = pointPositions[offsetA + 2] - pointPositions[offsetB + 2];
|
|
2089
|
+
if (dx * dx + dy * dy + dz * dz > thresholdSq) continue;
|
|
2090
|
+
segments.push(
|
|
2091
|
+
pointPositions[offsetA],
|
|
2092
|
+
pointPositions[offsetA + 1],
|
|
2093
|
+
pointPositions[offsetA + 2],
|
|
2094
|
+
pointPositions[offsetB],
|
|
2095
|
+
pointPositions[offsetB + 1],
|
|
2096
|
+
pointPositions[offsetB + 2]
|
|
2097
|
+
);
|
|
2098
|
+
if (segments.length / 6 >= maxSegments) break;
|
|
2099
|
+
}
|
|
2100
|
+
if (segments.length / 6 >= maxSegments) break;
|
|
2101
|
+
}
|
|
2102
|
+
lineGeometry.setAttribute("position", new import_three.BufferAttribute(new Float32Array(segments), 3));
|
|
2103
|
+
}
|
|
2104
|
+
if (groupRef.current) {
|
|
2105
|
+
const baseOffsetX = count < 300 ? 2.1 : 2.75;
|
|
2106
|
+
const baseOffsetY = count < 300 ? 0.1 : -0.15;
|
|
2107
|
+
groupRef.current.position.x += (baseOffsetX + pointer.x * 0.45 - groupRef.current.position.x) * 0.045;
|
|
2108
|
+
groupRef.current.position.y += (baseOffsetY + pointer.y * 0.32 - groupRef.current.position.y) * 0.045;
|
|
2109
|
+
groupRef.current.rotation.y += (pointer.x * 0.06 - groupRef.current.rotation.y) * 0.035;
|
|
2110
|
+
groupRef.current.rotation.x += (-pointer.y * 0.04 - groupRef.current.rotation.x) * 0.035;
|
|
2111
|
+
}
|
|
2112
|
+
});
|
|
2113
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("group", { ref: groupRef, children: [
|
|
2114
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("points", { ref: pointsRef, children: [
|
|
2115
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("bufferGeometry", {}),
|
|
2116
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2117
|
+
"pointsMaterial",
|
|
2118
|
+
{
|
|
2119
|
+
size: count < 400 ? 0.048 : 0.045,
|
|
2120
|
+
sizeAttenuation: true,
|
|
2121
|
+
transparent: true,
|
|
2122
|
+
opacity: 0.92,
|
|
2123
|
+
depthWrite: false,
|
|
2124
|
+
vertexColors: true,
|
|
2125
|
+
blending: import_three.AdditiveBlending
|
|
2126
|
+
}
|
|
2127
|
+
)
|
|
2128
|
+
] }),
|
|
2129
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("lineSegments", { ref: linesRef, children: [
|
|
2130
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("bufferGeometry", {}),
|
|
2131
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2132
|
+
"lineBasicMaterial",
|
|
2133
|
+
{
|
|
2134
|
+
color: baseColor,
|
|
2135
|
+
transparent: true,
|
|
2136
|
+
opacity: count < 400 ? 0.25 : 0.2,
|
|
2137
|
+
depthWrite: false,
|
|
2138
|
+
blending: import_three.AdditiveBlending
|
|
2139
|
+
}
|
|
2140
|
+
)
|
|
2141
|
+
] })
|
|
2142
|
+
] });
|
|
2143
|
+
}
|
|
2144
|
+
function HeroCanvas({
|
|
2145
|
+
accentColor = "#8fccb6",
|
|
2146
|
+
baseColor = "#7388cf",
|
|
2147
|
+
density,
|
|
2148
|
+
className = "pointer-events-none absolute inset-0 z-[2] translate-gpu opacity-60 md:opacity-100"
|
|
2149
|
+
}) {
|
|
2150
|
+
const [count, setCount] = (0, import_react2.useState)(density ?? 400);
|
|
2151
|
+
const containerRef = (0, import_react2.useRef)(null);
|
|
2152
|
+
const isInView = (0, import_framer_motion18.useInView)(containerRef);
|
|
2153
|
+
(0, import_react2.useEffect)(() => {
|
|
2154
|
+
if (density != null) {
|
|
2155
|
+
setCount(density);
|
|
2156
|
+
return;
|
|
2157
|
+
}
|
|
2158
|
+
const media = window.matchMedia("(max-width: 767px)");
|
|
2159
|
+
const updateCount = () => setCount(media.matches ? 350 : 800);
|
|
2160
|
+
updateCount();
|
|
2161
|
+
media.addEventListener("change", updateCount);
|
|
2162
|
+
return () => media.removeEventListener("change", updateCount);
|
|
2163
|
+
}, [density]);
|
|
2164
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref: containerRef, className, style: { willChange: "transform" }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2165
|
+
import_fiber.Canvas,
|
|
2166
|
+
{
|
|
2167
|
+
frameloop: isInView ? "always" : "demand",
|
|
2168
|
+
camera: { fov: 50, position: [0, 0, 12] },
|
|
2169
|
+
dpr: [1, 1.5],
|
|
2170
|
+
gl: { alpha: true, antialias: false, powerPreference: "high-performance" },
|
|
2171
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ParticleNetwork, { count, accentColor, baseColor })
|
|
2172
|
+
}
|
|
2173
|
+
) });
|
|
2174
|
+
}
|
|
2175
|
+
|
|
2176
|
+
// src/wave-canvas/index.tsx
|
|
2177
|
+
var import_fiber2 = require("@react-three/fiber");
|
|
2178
|
+
var import_simplex_noise2 = require("simplex-noise");
|
|
2179
|
+
var import_three2 = require("three");
|
|
2180
|
+
var import_react3 = require("react");
|
|
2181
|
+
var import_framer_motion19 = require("framer-motion");
|
|
2182
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
2183
|
+
var DEFAULT_WAVES = [
|
|
2184
|
+
{ yOffset: 0.55, amplitude: 0.26, freq: 1.4, speed: 0.38, color: "#8fccb6", opacity: 0.9 },
|
|
2185
|
+
{ yOffset: 0.18, amplitude: 0.2, freq: 2.1, speed: 0.55, color: "#5aaa94", opacity: 0.72 },
|
|
2186
|
+
{ yOffset: -0.18, amplitude: 0.28, freq: 1.7, speed: 0.44, color: "#4F72D8", opacity: 0.55 },
|
|
2187
|
+
{ yOffset: -0.55, amplitude: 0.16, freq: 2.6, speed: 0.62, color: "#1f2d56", opacity: 0.42 }
|
|
2188
|
+
];
|
|
2189
|
+
var SEGMENTS = 220;
|
|
2190
|
+
function SineWave({ yOffset, amplitude, freq, speed, color, opacity }) {
|
|
2191
|
+
const noise2D = (0, import_react3.useMemo)(() => (0, import_simplex_noise2.createNoise2D)(), []);
|
|
2192
|
+
const geo = (0, import_react3.useMemo)(() => {
|
|
2193
|
+
const g = new import_three2.BufferGeometry();
|
|
2194
|
+
g.setAttribute("position", new import_three2.BufferAttribute(new Float32Array((SEGMENTS + 1) * 3), 3));
|
|
2195
|
+
return g;
|
|
2196
|
+
}, []);
|
|
2197
|
+
const mat = (0, import_react3.useMemo)(
|
|
2198
|
+
() => new import_three2.LineBasicMaterial({
|
|
2199
|
+
color: new import_three2.Color(color),
|
|
2200
|
+
transparent: true,
|
|
2201
|
+
opacity,
|
|
2202
|
+
blending: import_three2.AdditiveBlending,
|
|
2203
|
+
depthWrite: false
|
|
2204
|
+
}),
|
|
2205
|
+
[color, opacity]
|
|
2206
|
+
);
|
|
2207
|
+
const lineRef = (0, import_react3.useRef)(new import_three2.Line(geo, mat));
|
|
2208
|
+
(0, import_fiber2.useFrame)(({ clock }) => {
|
|
2209
|
+
const t = clock.getElapsedTime() * speed;
|
|
2210
|
+
const pos = geo.attributes.position.array;
|
|
2211
|
+
for (let i = 0; i <= SEGMENTS; i++) {
|
|
2212
|
+
const x = i / SEGMENTS * 4 - 2;
|
|
2213
|
+
const n = noise2D(x * freq * 0.4, t);
|
|
2214
|
+
pos[i * 3] = x;
|
|
2215
|
+
pos[i * 3 + 1] = yOffset + n * amplitude;
|
|
2216
|
+
pos[i * 3 + 2] = 0;
|
|
2217
|
+
}
|
|
2218
|
+
geo.attributes.position.needsUpdate = true;
|
|
2219
|
+
});
|
|
2220
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("primitive", { object: lineRef.current });
|
|
2221
|
+
}
|
|
2222
|
+
function WaveCanvas({ waves = DEFAULT_WAVES, className }) {
|
|
2223
|
+
const containerRef = (0, import_react3.useRef)(null);
|
|
2224
|
+
const isInView = (0, import_framer_motion19.useInView)(containerRef);
|
|
2225
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2226
|
+
"div",
|
|
2227
|
+
{
|
|
2228
|
+
ref: containerRef,
|
|
2229
|
+
className,
|
|
2230
|
+
style: { width: "100%", height: "100%", position: "relative" },
|
|
2231
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2232
|
+
import_fiber2.Canvas,
|
|
2233
|
+
{
|
|
2234
|
+
frameloop: isInView ? "always" : "demand",
|
|
2235
|
+
orthographic: true,
|
|
2236
|
+
camera: { zoom: 120, position: [0, 0, 10] },
|
|
2237
|
+
style: { width: "100%", height: "100%" },
|
|
2238
|
+
gl: { antialias: true, alpha: true },
|
|
2239
|
+
children: waves.map((w, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SineWave, { ...w }, i))
|
|
2240
|
+
}
|
|
2241
|
+
)
|
|
2242
|
+
}
|
|
2243
|
+
);
|
|
2244
|
+
}
|
|
2245
|
+
|
|
2246
|
+
// src/lightbox/index.tsx
|
|
2247
|
+
var React9 = __toESM(require("react"));
|
|
2248
|
+
var import_lightbox = require("@web-my-money/primitives/lightbox");
|
|
2249
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
2250
|
+
function Thumbnail({ image, onClick, className }) {
|
|
2251
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
2252
|
+
"button",
|
|
2253
|
+
{
|
|
2254
|
+
type: "button",
|
|
2255
|
+
"data-slot": "thumbnail",
|
|
2256
|
+
onClick,
|
|
2257
|
+
className: cn(
|
|
2258
|
+
"group relative aspect-square overflow-hidden rounded-lg border border-border outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
|
|
2259
|
+
className
|
|
2260
|
+
),
|
|
2261
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
2262
|
+
"img",
|
|
2263
|
+
{
|
|
2264
|
+
src: image.thumbnailSrc ?? image.src,
|
|
2265
|
+
alt: image.alt ?? "",
|
|
2266
|
+
className: "size-full object-cover transition-transform duration-200 group-hover:scale-105",
|
|
2267
|
+
loading: "lazy"
|
|
2268
|
+
}
|
|
2269
|
+
)
|
|
2270
|
+
}
|
|
2271
|
+
);
|
|
2272
|
+
}
|
|
2273
|
+
function LightboxGallery({ images, className, gridClassName }) {
|
|
2274
|
+
const [openIndex, setOpenIndex] = React9.useState(null);
|
|
2275
|
+
const hasImages = images.length > 0;
|
|
2276
|
+
const active = openIndex !== null ? images[openIndex] : null;
|
|
2277
|
+
const goTo = (dir) => {
|
|
2278
|
+
setOpenIndex((i) => {
|
|
2279
|
+
if (i === null) return i;
|
|
2280
|
+
return (i + dir + images.length) % images.length;
|
|
2281
|
+
});
|
|
2282
|
+
};
|
|
2283
|
+
if (!hasImages) return null;
|
|
2284
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { "data-slot": "lightbox-gallery", className, children: [
|
|
2285
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cn("grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", gridClassName), children: images.map((image, i) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Thumbnail, { image, onClick: () => setOpenIndex(i) }, image.src)) }),
|
|
2286
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lightbox.Lightbox, { open: openIndex !== null, onOpenChange: (open) => !open && setOpenIndex(null), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lightbox.LightboxContent, { children: active && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
|
|
2287
|
+
images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
|
|
2288
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lightbox.LightboxNavButton, { direction: "prev", onClick: () => goTo(-1) }),
|
|
2289
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lightbox.LightboxNavButton, { direction: "next", onClick: () => goTo(1) })
|
|
2290
|
+
] }),
|
|
2291
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lightbox.LightboxImage, { src: active.src, alt: active.alt ?? "" }),
|
|
2292
|
+
active.caption && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lightbox.LightboxCaption, { children: active.caption }),
|
|
2293
|
+
images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("p", { className: "text-xs text-white/60", "aria-live": "polite", children: [
|
|
2294
|
+
(openIndex ?? 0) + 1,
|
|
2295
|
+
" / ",
|
|
2296
|
+
images.length
|
|
2297
|
+
] })
|
|
2298
|
+
] }) }) })
|
|
2299
|
+
] });
|
|
2300
|
+
}
|
|
2301
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
2302
|
+
0 && (module.exports = {
|
|
2303
|
+
AvatarGroup,
|
|
2304
|
+
BentoGrid,
|
|
2305
|
+
CTABanner,
|
|
2306
|
+
CaseStudiesSection,
|
|
2307
|
+
ComparisonTable,
|
|
2308
|
+
ContactForm,
|
|
2309
|
+
DEFAULT_WAVES,
|
|
2310
|
+
FadeUp,
|
|
2311
|
+
Faq,
|
|
2312
|
+
FeatureGrid,
|
|
2313
|
+
Footer,
|
|
2314
|
+
HeroCanvas,
|
|
2315
|
+
HeroSection,
|
|
2316
|
+
LayeredButton,
|
|
2317
|
+
LightboxGallery,
|
|
2318
|
+
LogoCloud,
|
|
2319
|
+
Marquee,
|
|
2320
|
+
NavBar,
|
|
2321
|
+
PricingTable,
|
|
2322
|
+
ProcessSteps,
|
|
2323
|
+
ScrollReveal,
|
|
2324
|
+
SectionGlow,
|
|
2325
|
+
SectionIntro,
|
|
2326
|
+
SectionLabel,
|
|
2327
|
+
SocialProof,
|
|
2328
|
+
StatsSection,
|
|
2329
|
+
TechCarousel,
|
|
2330
|
+
TestimonialCarousel,
|
|
2331
|
+
TestimonialsCarousel,
|
|
2332
|
+
TestimonialsSection,
|
|
2333
|
+
TextRotator,
|
|
2334
|
+
Thumbnail,
|
|
2335
|
+
UseCasesSection,
|
|
2336
|
+
ValueStackSection,
|
|
2337
|
+
WaveCanvas
|
|
2338
|
+
});
|