@mdxui/services 0.3.0 → 0.4.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/components/index.d.ts +18 -3
- package/dist/components/index.js +163 -31
- package/dist/components/index.js.map +1 -1
- package/dist/{index-D2nWoFGI.d.ts → index-DNgc8Joy.d.ts} +33 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +339 -192
- package/dist/index.js.map +1 -1
- package/dist/schemas/index.d.ts +1 -1
- package/dist/schemas/index.js +14 -1
- package/dist/schemas/index.js.map +1 -1
- package/dist/shared/index.d.ts +7 -1
- package/dist/shared/index.js +3 -1
- package/dist/shared/index.js.map +1 -1
- package/dist/styles.css +9 -0
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -7,7 +7,7 @@ var __export = (target, all) => {
|
|
|
7
7
|
// src/shared/scroll-reveal.tsx
|
|
8
8
|
import { useEffect, useRef, useState } from "react";
|
|
9
9
|
import { jsx } from "react/jsx-runtime";
|
|
10
|
-
function ScrollReveal({ children }) {
|
|
10
|
+
function ScrollReveal({ id, className, children }) {
|
|
11
11
|
const ref = useRef(null);
|
|
12
12
|
const [visible, setVisible] = useState(false);
|
|
13
13
|
useEffect(() => {
|
|
@@ -33,6 +33,8 @@ function ScrollReveal({ children }) {
|
|
|
33
33
|
"div",
|
|
34
34
|
{
|
|
35
35
|
ref,
|
|
36
|
+
id,
|
|
37
|
+
className,
|
|
36
38
|
"data-scroll-reveal": true,
|
|
37
39
|
"data-visible": visible,
|
|
38
40
|
style: {
|
|
@@ -45,50 +47,181 @@ function ScrollReveal({ children }) {
|
|
|
45
47
|
}
|
|
46
48
|
|
|
47
49
|
// src/components/Masthead.tsx
|
|
50
|
+
import Link2 from "next/link";
|
|
51
|
+
|
|
52
|
+
// src/components/MobileNav.tsx
|
|
53
|
+
import { useEffect as useEffect2, useState as useState2 } from "react";
|
|
48
54
|
import Link from "next/link";
|
|
49
|
-
import {
|
|
50
|
-
|
|
51
|
-
|
|
55
|
+
import { Menu, X } from "lucide-react";
|
|
56
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
57
|
+
function MobileNav({ links, cta, brand, narrow }) {
|
|
58
|
+
const [open, setOpen] = useState2(false);
|
|
59
|
+
const [scrollbarWidth, setScrollbarWidth] = useState2(0);
|
|
60
|
+
useEffect2(() => {
|
|
61
|
+
if (!open) return;
|
|
62
|
+
const onKey = (e) => {
|
|
63
|
+
if (e.key === "Escape") setOpen(false);
|
|
64
|
+
};
|
|
65
|
+
const prevOverflow = document.body.style.overflow;
|
|
66
|
+
const prevPaddingRight = document.body.style.paddingRight;
|
|
67
|
+
document.body.style.overflow = "hidden";
|
|
68
|
+
if (scrollbarWidth > 0) {
|
|
69
|
+
document.body.style.paddingRight = `${scrollbarWidth}px`;
|
|
70
|
+
}
|
|
71
|
+
window.addEventListener("keydown", onKey);
|
|
72
|
+
return () => {
|
|
73
|
+
document.body.style.overflow = prevOverflow;
|
|
74
|
+
document.body.style.paddingRight = prevPaddingRight;
|
|
75
|
+
window.removeEventListener("keydown", onKey);
|
|
76
|
+
};
|
|
77
|
+
}, [open, scrollbarWidth]);
|
|
78
|
+
const openMenu = () => {
|
|
79
|
+
setScrollbarWidth(window.innerWidth - document.documentElement.clientWidth);
|
|
80
|
+
setOpen(true);
|
|
81
|
+
};
|
|
82
|
+
const row = "mx-auto px-6 sm:px-10 " + (narrow ? "max-w-[900px]" : "max-w-container");
|
|
83
|
+
return /* @__PURE__ */ jsxs("div", { className: "md:hidden", children: [
|
|
84
|
+
/* @__PURE__ */ jsx2(
|
|
85
|
+
"button",
|
|
86
|
+
{
|
|
87
|
+
type: "button",
|
|
88
|
+
"aria-label": "Open menu",
|
|
89
|
+
"aria-expanded": open,
|
|
90
|
+
onClick: openMenu,
|
|
91
|
+
className: "flex h-9 w-9 items-center justify-center rounded-cta text-ink transition-colors hover:bg-surface",
|
|
92
|
+
children: /* @__PURE__ */ jsx2(Menu, { className: "h-5 w-5", strokeWidth: 1.75, "aria-hidden": "true" })
|
|
93
|
+
}
|
|
94
|
+
),
|
|
95
|
+
/* @__PURE__ */ jsx2(
|
|
96
|
+
"div",
|
|
97
|
+
{
|
|
98
|
+
"aria-hidden": "true",
|
|
99
|
+
onClick: () => setOpen(false),
|
|
100
|
+
className: "fixed inset-0 z-50 bg-ink/40 transition-opacity duration-[220ms] ease-out-quart " + (open ? "opacity-100" : "pointer-events-none opacity-0")
|
|
101
|
+
}
|
|
102
|
+
),
|
|
103
|
+
/* @__PURE__ */ jsxs(
|
|
104
|
+
"div",
|
|
105
|
+
{
|
|
106
|
+
role: "dialog",
|
|
107
|
+
"aria-modal": "true",
|
|
108
|
+
"aria-label": "Site navigation",
|
|
109
|
+
style: scrollbarWidth ? { paddingRight: scrollbarWidth } : void 0,
|
|
110
|
+
className: "fixed inset-x-0 top-0 z-50 origin-top bg-paper shadow-sheet transition-[transform,opacity] duration-[220ms] ease-out-quart " + (open ? "translate-y-0 opacity-100" : "pointer-events-none -translate-y-3 opacity-0"),
|
|
111
|
+
children: [
|
|
112
|
+
/* @__PURE__ */ jsxs(
|
|
113
|
+
"div",
|
|
114
|
+
{
|
|
115
|
+
className: `flex items-center justify-between gap-4 border-b border-line py-5 ${row}`,
|
|
116
|
+
children: [
|
|
117
|
+
/* @__PURE__ */ jsx2(
|
|
118
|
+
Link,
|
|
119
|
+
{
|
|
120
|
+
href: brand.href,
|
|
121
|
+
onClick: () => setOpen(false),
|
|
122
|
+
className: "font-display text-[18px] tracking-tightish text-ink",
|
|
123
|
+
children: brand.primary
|
|
124
|
+
}
|
|
125
|
+
),
|
|
126
|
+
/* @__PURE__ */ jsx2(
|
|
127
|
+
"button",
|
|
128
|
+
{
|
|
129
|
+
type: "button",
|
|
130
|
+
"aria-label": "Close menu",
|
|
131
|
+
onClick: () => setOpen(false),
|
|
132
|
+
className: "flex h-9 w-9 items-center justify-center rounded-cta text-ink transition-colors hover:bg-surface",
|
|
133
|
+
children: /* @__PURE__ */ jsx2(X, { className: "h-5 w-5", strokeWidth: 1.75, "aria-hidden": "true" })
|
|
134
|
+
}
|
|
135
|
+
)
|
|
136
|
+
]
|
|
137
|
+
}
|
|
138
|
+
),
|
|
139
|
+
/* @__PURE__ */ jsx2("nav", { className: `flex flex-col py-2 ${row}`, children: links.map((l) => /* @__PURE__ */ jsx2(
|
|
140
|
+
Link,
|
|
141
|
+
{
|
|
142
|
+
href: l.href,
|
|
143
|
+
onClick: () => setOpen(false),
|
|
144
|
+
className: "border-b border-line py-4 font-display text-[20px] tracking-tightish text-ink transition-colors last:border-b-0 hover:text-accent",
|
|
145
|
+
children: l.label
|
|
146
|
+
},
|
|
147
|
+
l.href
|
|
148
|
+
)) }),
|
|
149
|
+
cta && /* @__PURE__ */ jsx2("div", { className: `pb-6 pt-3 ${row}`, children: /* @__PURE__ */ jsx2(
|
|
150
|
+
Link,
|
|
151
|
+
{
|
|
152
|
+
href: cta.href,
|
|
153
|
+
onClick: () => setOpen(false),
|
|
154
|
+
className: "block rounded-cta bg-cta px-4 py-3 text-center text-[13px] font-medium tracking-tightish text-cta-fg transition-colors hover:bg-cta-hover",
|
|
155
|
+
children: cta.label
|
|
156
|
+
}
|
|
157
|
+
) })
|
|
158
|
+
]
|
|
159
|
+
}
|
|
160
|
+
)
|
|
161
|
+
] });
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
// src/components/Masthead.tsx
|
|
165
|
+
import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
166
|
+
function Masthead({ brand, cta, links, eyebrow, narrow }) {
|
|
167
|
+
const hasNav = Boolean(links && links.length > 0);
|
|
168
|
+
return /* @__PURE__ */ jsx3("header", { className: "border-b border-line", children: /* @__PURE__ */ jsxs2(
|
|
52
169
|
"div",
|
|
53
170
|
{
|
|
54
|
-
className: "mx-auto flex items-center justify-between gap-4 px-6 py-5 sm:px-10 " + (narrow ? "max-w-[900px]" : "max-w-container"),
|
|
171
|
+
className: "relative mx-auto flex items-center justify-between gap-4 px-6 py-5 sm:px-10 " + (narrow ? "max-w-[900px]" : "max-w-container"),
|
|
55
172
|
children: [
|
|
56
|
-
/* @__PURE__ */
|
|
57
|
-
/* @__PURE__ */
|
|
58
|
-
|
|
173
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
|
|
174
|
+
/* @__PURE__ */ jsxs2(
|
|
175
|
+
Link2,
|
|
59
176
|
{
|
|
60
177
|
href: brand.href,
|
|
61
|
-
className: "font-display text-[18px] tracking-tightish text-ink",
|
|
62
|
-
children:
|
|
178
|
+
className: "inline-flex items-center gap-2 font-display text-[18px] tracking-tightish text-ink",
|
|
179
|
+
children: [
|
|
180
|
+
brand.logo && // eslint-disable-next-line @next/next/no-img-element
|
|
181
|
+
/* @__PURE__ */ jsx3("img", { src: brand.logo.src, alt: brand.logo.alt, className: "h-6 w-auto" }),
|
|
182
|
+
brand.primary
|
|
183
|
+
]
|
|
63
184
|
}
|
|
64
185
|
),
|
|
65
|
-
brand.secondary && /* @__PURE__ */
|
|
66
|
-
/* @__PURE__ */
|
|
67
|
-
/* @__PURE__ */
|
|
186
|
+
brand.secondary && /* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
187
|
+
/* @__PURE__ */ jsx3("span", { className: "hidden h-4 w-px bg-line2 sm:inline-block" }),
|
|
188
|
+
/* @__PURE__ */ jsx3("span", { className: "hidden text-[11px] uppercase tracking-[0.18em] text-ink3 sm:inline", children: brand.secondary })
|
|
68
189
|
] })
|
|
69
190
|
] }),
|
|
70
|
-
|
|
71
|
-
|
|
191
|
+
hasNav && /* @__PURE__ */ jsx3("nav", { className: "absolute left-1/2 hidden -translate-x-1/2 items-center gap-7 md:flex", children: links.map((l) => /* @__PURE__ */ jsx3(
|
|
192
|
+
Link2,
|
|
72
193
|
{
|
|
73
|
-
href:
|
|
74
|
-
className: "
|
|
75
|
-
children:
|
|
76
|
-
}
|
|
77
|
-
|
|
194
|
+
href: l.href,
|
|
195
|
+
className: "text-[13px] tracking-tightish text-ink2 transition-colors hover:text-ink",
|
|
196
|
+
children: l.label
|
|
197
|
+
},
|
|
198
|
+
l.href
|
|
199
|
+
)) }),
|
|
200
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
|
|
201
|
+
cta ? /* @__PURE__ */ jsx3(
|
|
202
|
+
Link2,
|
|
203
|
+
{
|
|
204
|
+
href: cta.href,
|
|
205
|
+
className: "rounded-cta bg-cta px-4 py-2 text-[12px] font-medium tracking-tightish text-cta-fg transition-colors hover:bg-cta-hover",
|
|
206
|
+
children: cta.label
|
|
207
|
+
}
|
|
208
|
+
) : eyebrow ? /* @__PURE__ */ jsx3("span", { className: "text-[10.5px] uppercase tracking-[0.18em] text-ink3", children: eyebrow }) : null,
|
|
209
|
+
hasNav && /* @__PURE__ */ jsx3(MobileNav, { links, cta, brand, narrow })
|
|
210
|
+
] })
|
|
78
211
|
]
|
|
79
212
|
}
|
|
80
213
|
) });
|
|
81
214
|
}
|
|
82
215
|
|
|
83
216
|
// src/components/ScrollHeader.tsx
|
|
84
|
-
import { useEffect as
|
|
85
|
-
import { jsx as
|
|
217
|
+
import { useEffect as useEffect3, useState as useState3 } from "react";
|
|
218
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
86
219
|
function ScrollHeader({
|
|
87
220
|
threshold = 480,
|
|
88
221
|
...mastheadProps
|
|
89
222
|
}) {
|
|
90
|
-
const [visible, setVisible] =
|
|
91
|
-
|
|
223
|
+
const [visible, setVisible] = useState3(false);
|
|
224
|
+
useEffect3(() => {
|
|
92
225
|
let raf = 0;
|
|
93
226
|
const update = () => {
|
|
94
227
|
raf = 0;
|
|
@@ -105,24 +238,24 @@ function ScrollHeader({
|
|
|
105
238
|
if (raf) cancelAnimationFrame(raf);
|
|
106
239
|
};
|
|
107
240
|
}, [threshold]);
|
|
108
|
-
return /* @__PURE__ */
|
|
241
|
+
return /* @__PURE__ */ jsx4(
|
|
109
242
|
"div",
|
|
110
243
|
{
|
|
111
244
|
"aria-hidden": !visible,
|
|
112
245
|
className: "pointer-events-none fixed inset-x-0 top-0 z-40 transition-[transform,opacity] duration-[220ms] ease-out-quart " + (visible ? "translate-y-0 opacity-100" : "-translate-y-full opacity-0"),
|
|
113
|
-
children: /* @__PURE__ */
|
|
246
|
+
children: /* @__PURE__ */ jsx4("div", { className: "pointer-events-auto bg-paper shadow-sheet", children: /* @__PURE__ */ jsx4(Masthead, { ...mastheadProps }) })
|
|
114
247
|
}
|
|
115
248
|
);
|
|
116
249
|
}
|
|
117
250
|
|
|
118
251
|
// src/components/Footer.tsx
|
|
119
|
-
import
|
|
120
|
-
import { jsx as
|
|
252
|
+
import Link3 from "next/link";
|
|
253
|
+
import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
121
254
|
function Footer({ text, links }) {
|
|
122
|
-
return /* @__PURE__ */
|
|
123
|
-
/* @__PURE__ */
|
|
124
|
-
links && links.length > 0 && /* @__PURE__ */
|
|
125
|
-
|
|
255
|
+
return /* @__PURE__ */ jsx5("footer", { className: "border-t border-line", children: /* @__PURE__ */ jsxs3("div", { className: "mx-auto flex max-w-container flex-col items-center gap-4 px-6 py-10 text-center text-[12px] text-ink3 sm:flex-row sm:justify-between sm:px-10 sm:text-left", children: [
|
|
256
|
+
/* @__PURE__ */ jsx5("p", { children: text }),
|
|
257
|
+
links && links.length > 0 && /* @__PURE__ */ jsx5("ul", { className: "flex flex-wrap items-center justify-center gap-x-5 gap-y-2 sm:justify-end", children: links.map((l) => /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsx5(
|
|
258
|
+
Link3,
|
|
126
259
|
{
|
|
127
260
|
href: l.href,
|
|
128
261
|
className: "text-ink3 no-underline transition-colors hover:text-ink",
|
|
@@ -133,9 +266,9 @@ function Footer({ text, links }) {
|
|
|
133
266
|
}
|
|
134
267
|
|
|
135
268
|
// src/components/HeroSplit.tsx
|
|
136
|
-
import
|
|
269
|
+
import Link4 from "next/link";
|
|
137
270
|
import { ChevronRight } from "lucide-react";
|
|
138
|
-
import { jsx as
|
|
271
|
+
import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
139
272
|
function HeroSplit({
|
|
140
273
|
eyebrow,
|
|
141
274
|
headline,
|
|
@@ -150,22 +283,22 @@ function HeroSplit({
|
|
|
150
283
|
illustration
|
|
151
284
|
}) {
|
|
152
285
|
const effectiveGlyphOnMobile = glyphOnMobile ?? Boolean(illustration);
|
|
153
|
-
return /* @__PURE__ */
|
|
154
|
-
/* @__PURE__ */
|
|
155
|
-
/* @__PURE__ */
|
|
156
|
-
/* @__PURE__ */
|
|
157
|
-
/* @__PURE__ */
|
|
158
|
-
/* @__PURE__ */
|
|
159
|
-
/* @__PURE__ */
|
|
160
|
-
secondary && /* @__PURE__ */
|
|
286
|
+
return /* @__PURE__ */ jsx6("section", { className: "border-b border-line", children: /* @__PURE__ */ jsx6("div", { className: "mx-auto max-w-container px-6 py-16 sm:px-10 sm:py-28 lg:py-32", children: /* @__PURE__ */ jsxs4("div", { className: showGlyph ? "lg:grid lg:grid-cols-[minmax(0,1fr)_360px] lg:items-center lg:gap-16" : "", children: [
|
|
287
|
+
/* @__PURE__ */ jsxs4("div", { children: [
|
|
288
|
+
/* @__PURE__ */ jsx6("p", { className: "text-[11px] uppercase tracking-[0.18em] text-ink3", children: eyebrow }),
|
|
289
|
+
/* @__PURE__ */ jsx6("h1", { className: "mt-5 max-w-[18ch] font-display text-display-hero leading-[1.04] tracking-tighter2 text-ink", children: headline }),
|
|
290
|
+
/* @__PURE__ */ jsx6("p", { className: "mt-6 max-w-[58ch] text-[16px] leading-relaxed text-ink2 sm:mt-7 sm:text-[17px]", children: body }),
|
|
291
|
+
/* @__PURE__ */ jsxs4("div", { className: "mt-10 flex flex-col items-stretch gap-4 sm:flex-row sm:flex-wrap sm:items-center", children: [
|
|
292
|
+
/* @__PURE__ */ jsx6(PrimaryAction, { action: primary }),
|
|
293
|
+
secondary && /* @__PURE__ */ jsx6(SecondaryAction, { action: secondary })
|
|
161
294
|
] })
|
|
162
295
|
] }),
|
|
163
|
-
showGlyph && /* @__PURE__ */
|
|
296
|
+
showGlyph && /* @__PURE__ */ jsx6(
|
|
164
297
|
"div",
|
|
165
298
|
{
|
|
166
299
|
className: effectiveGlyphOnMobile ? "mt-12 lg:mt-0 lg:block" : "hidden lg:block",
|
|
167
300
|
"aria-hidden": "true",
|
|
168
|
-
children: illustration ?? /* @__PURE__ */
|
|
301
|
+
children: illustration ?? /* @__PURE__ */ jsx6(HeroGlyph, {})
|
|
169
302
|
}
|
|
170
303
|
)
|
|
171
304
|
] }) }) });
|
|
@@ -173,7 +306,7 @@ function HeroSplit({
|
|
|
173
306
|
function PrimaryAction({ action }) {
|
|
174
307
|
const className = "inline-flex w-full items-center justify-center gap-1.5 rounded-cta bg-cta px-5 py-3 text-[14px] font-medium tracking-tightish text-cta-fg transition-colors hover:bg-cta-hover sm:w-auto sm:justify-start";
|
|
175
308
|
if (action.external) {
|
|
176
|
-
return /* @__PURE__ */
|
|
309
|
+
return /* @__PURE__ */ jsxs4(
|
|
177
310
|
"a",
|
|
178
311
|
{
|
|
179
312
|
href: action.href,
|
|
@@ -182,20 +315,20 @@ function PrimaryAction({ action }) {
|
|
|
182
315
|
className,
|
|
183
316
|
children: [
|
|
184
317
|
action.label,
|
|
185
|
-
/* @__PURE__ */
|
|
318
|
+
/* @__PURE__ */ jsx6(ChevronRight, { className: "h-4 w-4", strokeWidth: 1.7 })
|
|
186
319
|
]
|
|
187
320
|
}
|
|
188
321
|
);
|
|
189
322
|
}
|
|
190
|
-
return /* @__PURE__ */
|
|
323
|
+
return /* @__PURE__ */ jsxs4(Link4, { href: action.href, className, children: [
|
|
191
324
|
action.label,
|
|
192
|
-
/* @__PURE__ */
|
|
325
|
+
/* @__PURE__ */ jsx6(ChevronRight, { className: "h-4 w-4", strokeWidth: 1.7 })
|
|
193
326
|
] });
|
|
194
327
|
}
|
|
195
328
|
function SecondaryAction({ action }) {
|
|
196
329
|
const className = "inline-flex items-center justify-center gap-1.5 text-[13px] font-medium tracking-tightish text-ink2 transition-colors hover:text-accentDeep sm:justify-start";
|
|
197
330
|
if (action.external) {
|
|
198
|
-
return /* @__PURE__ */
|
|
331
|
+
return /* @__PURE__ */ jsxs4(
|
|
199
332
|
"a",
|
|
200
333
|
{
|
|
201
334
|
href: action.href,
|
|
@@ -204,18 +337,18 @@ function SecondaryAction({ action }) {
|
|
|
204
337
|
className,
|
|
205
338
|
children: [
|
|
206
339
|
action.label,
|
|
207
|
-
/* @__PURE__ */
|
|
340
|
+
/* @__PURE__ */ jsx6(ChevronRight, { className: "h-3.5 w-3.5", strokeWidth: 1.7 })
|
|
208
341
|
]
|
|
209
342
|
}
|
|
210
343
|
);
|
|
211
344
|
}
|
|
212
|
-
return /* @__PURE__ */
|
|
345
|
+
return /* @__PURE__ */ jsxs4(Link4, { href: action.href, className, children: [
|
|
213
346
|
action.label,
|
|
214
|
-
/* @__PURE__ */
|
|
347
|
+
/* @__PURE__ */ jsx6(ChevronRight, { className: "h-3.5 w-3.5", strokeWidth: 1.7 })
|
|
215
348
|
] });
|
|
216
349
|
}
|
|
217
350
|
function HeroGlyph() {
|
|
218
|
-
return /* @__PURE__ */
|
|
351
|
+
return /* @__PURE__ */ jsxs4(
|
|
219
352
|
"svg",
|
|
220
353
|
{
|
|
221
354
|
viewBox: "0 0 360 280",
|
|
@@ -223,22 +356,22 @@ function HeroGlyph() {
|
|
|
223
356
|
fill: "none",
|
|
224
357
|
role: "presentation",
|
|
225
358
|
children: [
|
|
226
|
-
/* @__PURE__ */
|
|
359
|
+
/* @__PURE__ */ jsxs4(
|
|
227
360
|
"g",
|
|
228
361
|
{
|
|
229
362
|
stroke: "oklch(var(--ink3) / 0.55)",
|
|
230
363
|
strokeWidth: "1.5",
|
|
231
364
|
strokeLinecap: "round",
|
|
232
365
|
children: [
|
|
233
|
-
/* @__PURE__ */
|
|
234
|
-
/* @__PURE__ */
|
|
235
|
-
/* @__PURE__ */
|
|
236
|
-
/* @__PURE__ */
|
|
237
|
-
/* @__PURE__ */
|
|
366
|
+
/* @__PURE__ */ jsx6("line", { x1: "40", y1: "40", x2: "180", y2: "40" }),
|
|
367
|
+
/* @__PURE__ */ jsx6("line", { x1: "60", y1: "78", x2: "220", y2: "78" }),
|
|
368
|
+
/* @__PURE__ */ jsx6("line", { x1: "40", y1: "172", x2: "200", y2: "172" }),
|
|
369
|
+
/* @__PURE__ */ jsx6("line", { x1: "80", y1: "210", x2: "260", y2: "210" }),
|
|
370
|
+
/* @__PURE__ */ jsx6("line", { x1: "60", y1: "248", x2: "180", y2: "248" })
|
|
238
371
|
]
|
|
239
372
|
}
|
|
240
373
|
),
|
|
241
|
-
/* @__PURE__ */
|
|
374
|
+
/* @__PURE__ */ jsx6(
|
|
242
375
|
"line",
|
|
243
376
|
{
|
|
244
377
|
x1: "40",
|
|
@@ -250,18 +383,18 @@ function HeroGlyph() {
|
|
|
250
383
|
strokeLinecap: "round"
|
|
251
384
|
}
|
|
252
385
|
),
|
|
253
|
-
/* @__PURE__ */
|
|
254
|
-
/* @__PURE__ */
|
|
386
|
+
/* @__PURE__ */ jsx6("circle", { cx: "280", cy: "135", r: "4", fill: "oklch(var(--accent-deep))" }),
|
|
387
|
+
/* @__PURE__ */ jsxs4(
|
|
255
388
|
"g",
|
|
256
389
|
{
|
|
257
390
|
stroke: "oklch(var(--accent-deep) / 0.85)",
|
|
258
391
|
strokeWidth: "1",
|
|
259
392
|
strokeLinecap: "round",
|
|
260
393
|
children: [
|
|
261
|
-
/* @__PURE__ */
|
|
262
|
-
/* @__PURE__ */
|
|
263
|
-
/* @__PURE__ */
|
|
264
|
-
/* @__PURE__ */
|
|
394
|
+
/* @__PURE__ */ jsx6("line", { x1: "312", y1: "100", x2: "312", y2: "170" }),
|
|
395
|
+
/* @__PURE__ */ jsx6("line", { x1: "306", y1: "100", x2: "318", y2: "100" }),
|
|
396
|
+
/* @__PURE__ */ jsx6("line", { x1: "306", y1: "170", x2: "318", y2: "170" }),
|
|
397
|
+
/* @__PURE__ */ jsx6("line", { x1: "308", y1: "135", x2: "316", y2: "135" })
|
|
265
398
|
]
|
|
266
399
|
}
|
|
267
400
|
)
|
|
@@ -271,7 +404,7 @@ function HeroGlyph() {
|
|
|
271
404
|
}
|
|
272
405
|
|
|
273
406
|
// src/components/HeroStacked.tsx
|
|
274
|
-
import { jsx as
|
|
407
|
+
import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
275
408
|
function HeroStacked({
|
|
276
409
|
eyebrow,
|
|
277
410
|
headline,
|
|
@@ -280,70 +413,70 @@ function HeroStacked({
|
|
|
280
413
|
secondary,
|
|
281
414
|
illustration
|
|
282
415
|
}) {
|
|
283
|
-
return /* @__PURE__ */
|
|
284
|
-
/* @__PURE__ */
|
|
285
|
-
/* @__PURE__ */
|
|
286
|
-
/* @__PURE__ */
|
|
287
|
-
/* @__PURE__ */
|
|
288
|
-
/* @__PURE__ */
|
|
289
|
-
/* @__PURE__ */
|
|
290
|
-
secondary && /* @__PURE__ */
|
|
416
|
+
return /* @__PURE__ */ jsx7("section", { className: "border-b border-line", children: /* @__PURE__ */ jsxs5("div", { className: "mx-auto max-w-container px-6 py-16 sm:px-10 sm:py-28 lg:py-32", children: [
|
|
417
|
+
/* @__PURE__ */ jsxs5("div", { className: "text-center", children: [
|
|
418
|
+
/* @__PURE__ */ jsx7("p", { className: "text-[11px] uppercase tracking-[0.18em] text-ink3", children: eyebrow }),
|
|
419
|
+
/* @__PURE__ */ jsx7("h1", { className: "mx-auto mt-5 max-w-[22ch] font-display text-display-hero leading-[1.04] tracking-tighter2 text-ink", children: headline }),
|
|
420
|
+
/* @__PURE__ */ jsx7("p", { className: "mx-auto mt-6 max-w-[60ch] text-[16px] leading-relaxed text-ink2 sm:mt-7 sm:text-[17px]", children: body }),
|
|
421
|
+
/* @__PURE__ */ jsxs5("div", { className: "mt-10 flex flex-col items-stretch justify-center gap-4 sm:flex-row sm:flex-wrap sm:items-center", children: [
|
|
422
|
+
/* @__PURE__ */ jsx7(PrimaryAction, { action: primary }),
|
|
423
|
+
secondary && /* @__PURE__ */ jsx7(SecondaryAction, { action: secondary })
|
|
291
424
|
] })
|
|
292
425
|
] }),
|
|
293
|
-
/* @__PURE__ */
|
|
426
|
+
/* @__PURE__ */ jsx7("div", { className: "mx-auto mt-14 max-w-[1080px] sm:mt-16", "aria-hidden": "true", children: illustration })
|
|
294
427
|
] }) });
|
|
295
428
|
}
|
|
296
429
|
|
|
297
430
|
// src/components/Hero.tsx
|
|
298
|
-
import { jsx as
|
|
431
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
299
432
|
function Hero(props) {
|
|
300
433
|
if (props.variant === "stacked-illustration-below" && props.illustration) {
|
|
301
|
-
return /* @__PURE__ */
|
|
434
|
+
return /* @__PURE__ */ jsx8(HeroStacked, { ...props });
|
|
302
435
|
}
|
|
303
|
-
return /* @__PURE__ */
|
|
436
|
+
return /* @__PURE__ */ jsx8(HeroSplit, { ...props });
|
|
304
437
|
}
|
|
305
438
|
|
|
306
439
|
// src/shared/section-eyebrow.tsx
|
|
307
|
-
import { jsx as
|
|
440
|
+
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
308
441
|
function SectionEyebrow({ children }) {
|
|
309
|
-
return /* @__PURE__ */
|
|
442
|
+
return /* @__PURE__ */ jsx9("p", { className: "text-[11px] uppercase tracking-[0.18em] text-ink3", children });
|
|
310
443
|
}
|
|
311
444
|
|
|
312
445
|
// src/components/Problem.tsx
|
|
313
|
-
import { jsx as
|
|
446
|
+
import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
314
447
|
function Problem({ eyebrow, heading, items }) {
|
|
315
|
-
return /* @__PURE__ */
|
|
316
|
-
/* @__PURE__ */
|
|
317
|
-
/* @__PURE__ */
|
|
318
|
-
/* @__PURE__ */
|
|
448
|
+
return /* @__PURE__ */ jsx10("section", { className: "border-b border-line", children: /* @__PURE__ */ jsxs6("div", { className: "mx-auto max-w-container px-6 py-16 sm:px-10 sm:py-24", children: [
|
|
449
|
+
/* @__PURE__ */ jsx10(SectionEyebrow, { children: eyebrow }),
|
|
450
|
+
/* @__PURE__ */ jsx10("h2", { className: "mt-3 max-w-[22ch] font-display text-display-section leading-[1.08] tracking-tightish text-ink", children: heading }),
|
|
451
|
+
/* @__PURE__ */ jsx10("div", { className: "mt-12 grid gap-8 md:grid-cols-3", children: items.map((item) => /* @__PURE__ */ jsx10(ProblemCard, { ...item }, item.label)) })
|
|
319
452
|
] }) });
|
|
320
453
|
}
|
|
321
454
|
function ProblemCard({ label, cost, outcome, body }) {
|
|
322
|
-
return /* @__PURE__ */
|
|
323
|
-
/* @__PURE__ */
|
|
324
|
-
/* @__PURE__ */
|
|
325
|
-
/* @__PURE__ */
|
|
326
|
-
/* @__PURE__ */
|
|
455
|
+
return /* @__PURE__ */ jsxs6("article", { children: [
|
|
456
|
+
/* @__PURE__ */ jsx10("p", { className: "text-[10.5px] uppercase tracking-[0.16em] text-ink3", children: label }),
|
|
457
|
+
/* @__PURE__ */ jsx10("p", { className: "mt-3 font-display text-[24px] leading-tight tracking-tightish text-ink", children: cost }),
|
|
458
|
+
/* @__PURE__ */ jsx10("p", { className: "mt-4 text-body-sm font-medium leading-snug tracking-tightish text-accentDeep", children: outcome }),
|
|
459
|
+
/* @__PURE__ */ jsx10("p", { className: "mt-3 text-body-sm leading-relaxed text-ink2", children: body })
|
|
327
460
|
] });
|
|
328
461
|
}
|
|
329
462
|
|
|
330
463
|
// src/components/WhatYouGet.tsx
|
|
331
|
-
import { jsx as
|
|
464
|
+
import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
332
465
|
function WhatYouGet({ eyebrow, heading, sections }) {
|
|
333
466
|
if (sections.length === 0) return null;
|
|
334
|
-
return /* @__PURE__ */
|
|
335
|
-
/* @__PURE__ */
|
|
336
|
-
/* @__PURE__ */
|
|
337
|
-
/* @__PURE__ */
|
|
338
|
-
/* @__PURE__ */
|
|
339
|
-
/* @__PURE__ */
|
|
340
|
-
/* @__PURE__ */
|
|
467
|
+
return /* @__PURE__ */ jsx11("section", { className: "border-b border-line", children: /* @__PURE__ */ jsxs7("div", { className: "mx-auto max-w-container px-6 py-16 sm:px-10 sm:py-24", children: [
|
|
468
|
+
/* @__PURE__ */ jsx11(SectionEyebrow, { children: eyebrow }),
|
|
469
|
+
/* @__PURE__ */ jsx11("h2", { className: "mt-3 max-w-[22ch] font-display text-display-section leading-[1.08] tracking-tightish text-ink", children: heading }),
|
|
470
|
+
/* @__PURE__ */ jsx11("ul", { className: "mt-12 grid gap-x-8 gap-y-7 md:grid-cols-2 lg:grid-cols-3", children: sections.map((s) => /* @__PURE__ */ jsxs7("li", { children: [
|
|
471
|
+
/* @__PURE__ */ jsx11("p", { className: "font-display text-[14px] tracking-tightish text-ink3", children: s.n }),
|
|
472
|
+
/* @__PURE__ */ jsx11("p", { className: "mt-1.5 text-[15px] font-medium tracking-tightish text-ink", children: s.title }),
|
|
473
|
+
/* @__PURE__ */ jsx11("p", { className: "mt-1.5 text-[13.5px] leading-relaxed text-ink2", children: s.body })
|
|
341
474
|
] }, s.n)) })
|
|
342
475
|
] }) });
|
|
343
476
|
}
|
|
344
477
|
|
|
345
478
|
// src/components/HowItWorks.tsx
|
|
346
|
-
import { jsx as
|
|
479
|
+
import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
347
480
|
function HowItWorks({
|
|
348
481
|
eyebrow,
|
|
349
482
|
heading,
|
|
@@ -352,16 +485,16 @@ function HowItWorks({
|
|
|
352
485
|
}) {
|
|
353
486
|
if (steps.length === 0) return null;
|
|
354
487
|
const hasIllustrations = stepIllustrations !== void 0 && stepIllustrations.length === steps.length;
|
|
355
|
-
return /* @__PURE__ */
|
|
356
|
-
/* @__PURE__ */
|
|
357
|
-
/* @__PURE__ */
|
|
358
|
-
/* @__PURE__ */
|
|
488
|
+
return /* @__PURE__ */ jsx12("section", { className: "border-b border-line", children: /* @__PURE__ */ jsxs8("div", { className: "mx-auto max-w-container px-6 py-16 sm:px-10 sm:py-24", children: [
|
|
489
|
+
/* @__PURE__ */ jsx12(SectionEyebrow, { children: eyebrow }),
|
|
490
|
+
/* @__PURE__ */ jsx12("h2", { className: "mt-3 max-w-[22ch] font-display text-display-section leading-[1.08] tracking-tightish text-ink", children: heading }),
|
|
491
|
+
/* @__PURE__ */ jsx12(
|
|
359
492
|
"ol",
|
|
360
493
|
{
|
|
361
494
|
itemScope: true,
|
|
362
495
|
itemType: "https://schema.org/HowTo",
|
|
363
496
|
className: "mt-12 grid gap-10 md:grid-cols-3",
|
|
364
|
-
children: steps.map((s, i) => /* @__PURE__ */
|
|
497
|
+
children: steps.map((s, i) => /* @__PURE__ */ jsx12(
|
|
365
498
|
Step,
|
|
366
499
|
{
|
|
367
500
|
...s,
|
|
@@ -379,18 +512,18 @@ function Step({
|
|
|
379
512
|
body,
|
|
380
513
|
illustration: Illustration
|
|
381
514
|
}) {
|
|
382
|
-
return /* @__PURE__ */
|
|
515
|
+
return /* @__PURE__ */ jsxs8(
|
|
383
516
|
"li",
|
|
384
517
|
{
|
|
385
518
|
itemScope: true,
|
|
386
519
|
itemType: "https://schema.org/HowToStep",
|
|
387
520
|
className: Illustration ? "flex flex-col" : void 0,
|
|
388
521
|
children: [
|
|
389
|
-
Illustration && /* @__PURE__ */
|
|
390
|
-
/* @__PURE__ */
|
|
391
|
-
/* @__PURE__ */
|
|
392
|
-
/* @__PURE__ */
|
|
393
|
-
/* @__PURE__ */
|
|
522
|
+
Illustration && /* @__PURE__ */ jsx12("div", { className: "mb-6 w-full lg:max-w-[320px]", children: /* @__PURE__ */ jsx12(Illustration, {}) }),
|
|
523
|
+
/* @__PURE__ */ jsxs8("div", { className: Illustration ? "mt-auto" : void 0, children: [
|
|
524
|
+
/* @__PURE__ */ jsx12("p", { className: "font-display text-[36px] leading-none tracking-tighter2 text-ink3/60", children: n }),
|
|
525
|
+
/* @__PURE__ */ jsx12("p", { className: "mt-4 font-display text-[20px] leading-tight tracking-tightish text-ink", children: title }),
|
|
526
|
+
/* @__PURE__ */ jsx12("p", { className: "mt-3 text-body-sm leading-relaxed text-ink2", children: body })
|
|
394
527
|
] })
|
|
395
528
|
]
|
|
396
529
|
}
|
|
@@ -398,34 +531,34 @@ function Step({
|
|
|
398
531
|
}
|
|
399
532
|
|
|
400
533
|
// src/components/Defensibility.tsx
|
|
401
|
-
import { jsx as
|
|
534
|
+
import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
402
535
|
function Defensibility({
|
|
403
536
|
eyebrow,
|
|
404
537
|
heading,
|
|
405
538
|
columns,
|
|
406
539
|
caveat
|
|
407
540
|
}) {
|
|
408
|
-
return /* @__PURE__ */
|
|
409
|
-
/* @__PURE__ */
|
|
410
|
-
/* @__PURE__ */
|
|
411
|
-
/* @__PURE__ */
|
|
412
|
-
caveat && /* @__PURE__ */
|
|
541
|
+
return /* @__PURE__ */ jsx13("section", { className: "border-b border-line", children: /* @__PURE__ */ jsxs9("div", { className: "mx-auto max-w-container px-6 py-16 sm:px-10 sm:py-24", children: [
|
|
542
|
+
/* @__PURE__ */ jsx13(SectionEyebrow, { children: eyebrow }),
|
|
543
|
+
/* @__PURE__ */ jsx13("h2", { className: "mt-3 max-w-[22ch] font-display text-display-section leading-[1.08] tracking-tightish text-ink", children: heading }),
|
|
544
|
+
/* @__PURE__ */ jsx13("div", { className: "mt-10 grid gap-10 lg:grid-cols-2", children: columns.map((col) => /* @__PURE__ */ jsx13(Column, { ...col }, col.heading)) }),
|
|
545
|
+
caveat && /* @__PURE__ */ jsx13("p", { className: "mt-12 max-w-[68ch] text-body-xs leading-relaxed text-ink3", children: caveat })
|
|
413
546
|
] }) });
|
|
414
547
|
}
|
|
415
548
|
function Column({ heading, bullets }) {
|
|
416
|
-
return /* @__PURE__ */
|
|
417
|
-
/* @__PURE__ */
|
|
418
|
-
/* @__PURE__ */
|
|
419
|
-
/* @__PURE__ */
|
|
420
|
-
/* @__PURE__ */
|
|
549
|
+
return /* @__PURE__ */ jsxs9("div", { children: [
|
|
550
|
+
/* @__PURE__ */ jsx13("h3", { className: "font-display text-[18px] leading-tight tracking-tightish text-ink", children: heading }),
|
|
551
|
+
/* @__PURE__ */ jsx13("ul", { className: "mt-4 space-y-3 text-body-sm leading-relaxed text-ink2", children: bullets.map((b, i) => /* @__PURE__ */ jsxs9("li", { className: "flex gap-2.5", children: [
|
|
552
|
+
/* @__PURE__ */ jsx13("span", { className: "mt-2 h-1 w-1 shrink-0 rounded-full bg-ink3" }),
|
|
553
|
+
/* @__PURE__ */ jsx13("span", { children: b })
|
|
421
554
|
] }, i)) })
|
|
422
555
|
] });
|
|
423
556
|
}
|
|
424
557
|
|
|
425
558
|
// src/components/Pricing.tsx
|
|
426
|
-
import
|
|
559
|
+
import Link5 from "next/link";
|
|
427
560
|
import { ChevronRight as ChevronRight2 } from "lucide-react";
|
|
428
|
-
import { Fragment as Fragment2, jsx as
|
|
561
|
+
import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
429
562
|
var GRID_COLS = {
|
|
430
563
|
1: "max-w-[420px]",
|
|
431
564
|
2: "max-w-[820px] md:grid-cols-2",
|
|
@@ -433,9 +566,9 @@ var GRID_COLS = {
|
|
|
433
566
|
};
|
|
434
567
|
function Pricing(props) {
|
|
435
568
|
if ("kind" in props && props.kind === "unit") {
|
|
436
|
-
return /* @__PURE__ */
|
|
569
|
+
return /* @__PURE__ */ jsx14(UnitPricing, { ...props });
|
|
437
570
|
}
|
|
438
|
-
return /* @__PURE__ */
|
|
571
|
+
return /* @__PURE__ */ jsx14(TieredPricing, { ...props });
|
|
439
572
|
}
|
|
440
573
|
function TieredPricing({
|
|
441
574
|
eyebrow,
|
|
@@ -445,11 +578,11 @@ function TieredPricing({
|
|
|
445
578
|
}) {
|
|
446
579
|
if (tiers.length === 0) return null;
|
|
447
580
|
const count = tiers.length === 1 || tiers.length === 2 ? tiers.length : 3;
|
|
448
|
-
return /* @__PURE__ */
|
|
449
|
-
/* @__PURE__ */
|
|
450
|
-
/* @__PURE__ */
|
|
451
|
-
/* @__PURE__ */
|
|
452
|
-
footnote && /* @__PURE__ */
|
|
581
|
+
return /* @__PURE__ */ jsx14("section", { className: "border-b border-line bg-surface", children: /* @__PURE__ */ jsxs10("div", { className: "mx-auto max-w-container px-6 py-16 sm:px-10 sm:py-24", children: [
|
|
582
|
+
/* @__PURE__ */ jsx14(SectionEyebrow, { children: eyebrow }),
|
|
583
|
+
/* @__PURE__ */ jsx14("h2", { className: "mt-3 max-w-[22ch] font-display text-display-section leading-[1.08] tracking-tightish text-ink", children: heading }),
|
|
584
|
+
/* @__PURE__ */ jsx14("div", { className: `mt-12 mx-auto grid gap-6 ${GRID_COLS[count]}`, children: tiers.map((t) => /* @__PURE__ */ jsx14(PriceCard, { ...t }, t.tier)) }),
|
|
585
|
+
footnote && /* @__PURE__ */ jsx14("p", { className: "mt-10 max-w-[64ch] text-[13px] text-ink3", children: footnote })
|
|
453
586
|
] }) });
|
|
454
587
|
}
|
|
455
588
|
function formatPerUnit(perUnit, currency) {
|
|
@@ -470,10 +603,10 @@ function UnitPricing({
|
|
|
470
603
|
billingCadence
|
|
471
604
|
}) {
|
|
472
605
|
const formatted = formatPerUnit(perUnit, currency);
|
|
473
|
-
return /* @__PURE__ */
|
|
474
|
-
/* @__PURE__ */
|
|
475
|
-
/* @__PURE__ */
|
|
476
|
-
/* @__PURE__ */
|
|
606
|
+
return /* @__PURE__ */ jsx14("section", { className: "border-b border-line bg-surface", children: /* @__PURE__ */ jsxs10("div", { className: "mx-auto max-w-container px-6 py-16 sm:px-10 sm:py-24", children: [
|
|
607
|
+
/* @__PURE__ */ jsx14(SectionEyebrow, { children: eyebrow }),
|
|
608
|
+
/* @__PURE__ */ jsx14("h2", { className: "mt-3 max-w-[22ch] font-display text-display-section leading-[1.08] tracking-tightish text-ink", children: heading }),
|
|
609
|
+
/* @__PURE__ */ jsx14("div", { className: "mt-12 mx-auto max-w-[420px]", children: /* @__PURE__ */ jsxs10(
|
|
477
610
|
"article",
|
|
478
611
|
{
|
|
479
612
|
itemScope: true,
|
|
@@ -481,15 +614,15 @@ function UnitPricing({
|
|
|
481
614
|
"data-pricing-kind": "unit",
|
|
482
615
|
className: "flex flex-col rounded-card border border-line bg-paper p-7",
|
|
483
616
|
children: [
|
|
484
|
-
/* @__PURE__ */
|
|
485
|
-
/* @__PURE__ */
|
|
486
|
-
/* @__PURE__ */
|
|
487
|
-
/* @__PURE__ */
|
|
617
|
+
/* @__PURE__ */ jsx14("p", { className: "text-[10.5px] uppercase tracking-[0.16em] text-ink3", children: "Per call" }),
|
|
618
|
+
/* @__PURE__ */ jsxs10("p", { className: "mt-3 flex items-baseline gap-2", children: [
|
|
619
|
+
/* @__PURE__ */ jsx14("span", { className: "font-display text-[40px] leading-none tracking-tighter2 text-ink", children: formatted }),
|
|
620
|
+
/* @__PURE__ */ jsx14("span", { className: "text-[12px] text-ink3", children: billingCadence })
|
|
488
621
|
] })
|
|
489
622
|
]
|
|
490
623
|
}
|
|
491
624
|
) }),
|
|
492
|
-
footnote && /* @__PURE__ */
|
|
625
|
+
footnote && /* @__PURE__ */ jsx14("p", { className: "mt-10 max-w-[64ch] text-[13px] text-ink3", children: footnote })
|
|
493
626
|
] }) });
|
|
494
627
|
}
|
|
495
628
|
function splitPrice(price) {
|
|
@@ -515,7 +648,7 @@ function PriceCard({
|
|
|
515
648
|
const isMailto = cta.href.startsWith("mailto:");
|
|
516
649
|
const { core } = splitPrice(price);
|
|
517
650
|
const suffix = resolvePriceSuffix(price, priceSuffix);
|
|
518
|
-
return /* @__PURE__ */
|
|
651
|
+
return /* @__PURE__ */ jsxs10(
|
|
519
652
|
"article",
|
|
520
653
|
{
|
|
521
654
|
itemScope: true,
|
|
@@ -523,22 +656,22 @@ function PriceCard({
|
|
|
523
656
|
"data-tier-key": tierKey,
|
|
524
657
|
className: "flex flex-col rounded-card border bg-paper p-7 " + (featured ? "border-accent shadow-lift" : "border-line"),
|
|
525
658
|
children: [
|
|
526
|
-
/* @__PURE__ */
|
|
527
|
-
/* @__PURE__ */
|
|
528
|
-
/* @__PURE__ */
|
|
529
|
-
suffix && /* @__PURE__ */
|
|
659
|
+
/* @__PURE__ */ jsx14("p", { className: "text-[10.5px] uppercase tracking-[0.16em] text-ink3", children: tier }),
|
|
660
|
+
/* @__PURE__ */ jsxs10("p", { className: "mt-3 flex items-baseline gap-2", children: [
|
|
661
|
+
/* @__PURE__ */ jsx14("span", { className: "font-display text-[40px] leading-none tracking-tighter2 text-ink", children: core }),
|
|
662
|
+
suffix && /* @__PURE__ */ jsx14("span", { className: "text-[12px] text-ink3", children: suffix })
|
|
530
663
|
] }),
|
|
531
|
-
/* @__PURE__ */
|
|
532
|
-
/* @__PURE__ */
|
|
533
|
-
/* @__PURE__ */
|
|
664
|
+
/* @__PURE__ */ jsx14("p", { className: "mt-2 text-[13px] text-ink2", children: audience }),
|
|
665
|
+
/* @__PURE__ */ jsx14("ul", { className: "mt-6 flex-1 space-y-2.5 text-[13.5px] text-ink2", children: features.map((f) => /* @__PURE__ */ jsxs10("li", { className: "flex gap-2.5", children: [
|
|
666
|
+
/* @__PURE__ */ jsx14(
|
|
534
667
|
"span",
|
|
535
668
|
{
|
|
536
669
|
className: "mt-2 h-1 w-1 shrink-0 rounded-full " + (featured ? "bg-accent" : "bg-ink3")
|
|
537
670
|
}
|
|
538
671
|
),
|
|
539
|
-
/* @__PURE__ */
|
|
672
|
+
/* @__PURE__ */ jsx14("span", { children: f })
|
|
540
673
|
] }, f)) }),
|
|
541
|
-
/* @__PURE__ */
|
|
674
|
+
/* @__PURE__ */ jsx14(
|
|
542
675
|
PriceCardCta,
|
|
543
676
|
{
|
|
544
677
|
label: cta.label,
|
|
@@ -560,57 +693,57 @@ function PriceCardCta({
|
|
|
560
693
|
const baseClass = "mt-7 inline-flex w-full items-center justify-center gap-1.5 rounded-cta px-5 py-2.5 text-[13.5px] font-medium tracking-tightish transition-colors";
|
|
561
694
|
const variantClass = featured ? "bg-cta text-cta-fg hover:bg-cta-hover" : "border border-line2 bg-paper text-ink hover:border-ink hover:text-ink";
|
|
562
695
|
const className = `${baseClass} ${variantClass}`;
|
|
563
|
-
const body = /* @__PURE__ */
|
|
696
|
+
const body = /* @__PURE__ */ jsxs10(Fragment2, { children: [
|
|
564
697
|
label,
|
|
565
|
-
/* @__PURE__ */
|
|
698
|
+
/* @__PURE__ */ jsx14(ChevronRight2, { className: "h-3.5 w-3.5", strokeWidth: 1.7 })
|
|
566
699
|
] });
|
|
567
700
|
if (external) {
|
|
568
|
-
return /* @__PURE__ */
|
|
701
|
+
return /* @__PURE__ */ jsx14("a", { className, href, "data-action": "buy", children: body });
|
|
569
702
|
}
|
|
570
|
-
return /* @__PURE__ */
|
|
703
|
+
return /* @__PURE__ */ jsx14(Link5, { className, href, "data-action": "buy", children: body });
|
|
571
704
|
}
|
|
572
705
|
|
|
573
706
|
// src/components/Faq.tsx
|
|
574
|
-
import { jsx as
|
|
707
|
+
import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
575
708
|
function Faq({ eyebrow, heading, items }) {
|
|
576
709
|
if (items.length === 0) return null;
|
|
577
|
-
return /* @__PURE__ */
|
|
578
|
-
/* @__PURE__ */
|
|
579
|
-
/* @__PURE__ */
|
|
580
|
-
/* @__PURE__ */
|
|
581
|
-
/* @__PURE__ */
|
|
582
|
-
/* @__PURE__ */
|
|
710
|
+
return /* @__PURE__ */ jsx15("section", { className: "border-b border-line", children: /* @__PURE__ */ jsxs11("div", { className: "mx-auto max-w-container px-6 py-16 sm:px-10 sm:py-24", children: [
|
|
711
|
+
/* @__PURE__ */ jsx15(SectionEyebrow, { children: eyebrow }),
|
|
712
|
+
/* @__PURE__ */ jsx15("h2", { className: "mt-3 max-w-[20ch] font-display text-display-section leading-[1.08] tracking-tightish text-ink", children: heading }),
|
|
713
|
+
/* @__PURE__ */ jsx15("dl", { className: "mt-12 grid gap-x-12 gap-y-10 md:grid-cols-2", children: items.map((f) => /* @__PURE__ */ jsxs11("div", { itemScope: true, itemType: "https://schema.org/Question", children: [
|
|
714
|
+
/* @__PURE__ */ jsx15("dt", { className: "font-display text-body leading-snug tracking-tightish text-ink", children: f.q }),
|
|
715
|
+
/* @__PURE__ */ jsx15("dd", { className: "mt-2 text-body-sm leading-relaxed text-ink2", children: f.a })
|
|
583
716
|
] }, f.q)) })
|
|
584
717
|
] }) });
|
|
585
718
|
}
|
|
586
719
|
|
|
587
720
|
// src/components/FinalCta.tsx
|
|
588
|
-
import
|
|
721
|
+
import Link6 from "next/link";
|
|
589
722
|
import { ChevronRight as ChevronRight3 } from "lucide-react";
|
|
590
|
-
import { Fragment as Fragment3, jsx as
|
|
723
|
+
import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
591
724
|
function FinalCta({
|
|
592
725
|
eyebrow,
|
|
593
726
|
headline,
|
|
594
727
|
primary,
|
|
595
728
|
secondary
|
|
596
729
|
}) {
|
|
597
|
-
return /* @__PURE__ */
|
|
598
|
-
/* @__PURE__ */
|
|
599
|
-
/* @__PURE__ */
|
|
600
|
-
/* @__PURE__ */
|
|
601
|
-
/* @__PURE__ */
|
|
602
|
-
secondary && /* @__PURE__ */
|
|
730
|
+
return /* @__PURE__ */ jsx16("section", { children: /* @__PURE__ */ jsxs12("div", { className: "mx-auto max-w-container px-6 py-20 text-center sm:px-10 sm:py-32", children: [
|
|
731
|
+
/* @__PURE__ */ jsx16("p", { className: "text-[11px] uppercase tracking-[0.18em] text-ink3", children: eyebrow }),
|
|
732
|
+
/* @__PURE__ */ jsx16("h2", { className: "mx-auto mt-4 max-w-[22ch] font-display text-[36px] leading-[1.04] tracking-tighter2 text-ink sm:text-[52px]", children: headline }),
|
|
733
|
+
/* @__PURE__ */ jsxs12("div", { className: "mt-10 flex flex-col items-stretch gap-4 sm:flex-row sm:flex-wrap sm:items-center sm:justify-center", children: [
|
|
734
|
+
/* @__PURE__ */ jsx16(PrimaryButton, { action: primary }),
|
|
735
|
+
secondary && /* @__PURE__ */ jsx16(SecondaryLink, { action: secondary })
|
|
603
736
|
] })
|
|
604
737
|
] }) });
|
|
605
738
|
}
|
|
606
739
|
function PrimaryButton({ action }) {
|
|
607
740
|
const className = "inline-flex w-full items-center justify-center gap-1.5 rounded-cta bg-cta px-6 py-3 text-[14px] font-medium tracking-tightish text-cta-fg transition-colors hover:bg-cta-hover sm:w-auto";
|
|
608
|
-
const body = /* @__PURE__ */
|
|
741
|
+
const body = /* @__PURE__ */ jsxs12(Fragment3, { children: [
|
|
609
742
|
action.label,
|
|
610
|
-
/* @__PURE__ */
|
|
743
|
+
/* @__PURE__ */ jsx16(ChevronRight3, { className: "h-4 w-4", strokeWidth: 1.7 })
|
|
611
744
|
] });
|
|
612
745
|
if (action.external) {
|
|
613
|
-
return /* @__PURE__ */
|
|
746
|
+
return /* @__PURE__ */ jsx16(
|
|
614
747
|
"a",
|
|
615
748
|
{
|
|
616
749
|
href: action.href,
|
|
@@ -621,12 +754,12 @@ function PrimaryButton({ action }) {
|
|
|
621
754
|
}
|
|
622
755
|
);
|
|
623
756
|
}
|
|
624
|
-
return /* @__PURE__ */
|
|
757
|
+
return /* @__PURE__ */ jsx16(Link6, { href: action.href, className, children: body });
|
|
625
758
|
}
|
|
626
759
|
function SecondaryLink({ action }) {
|
|
627
760
|
const className = "inline-flex items-center justify-center gap-1.5 text-[13px] font-medium tracking-tightish text-ink3 transition-colors hover:text-ink";
|
|
628
761
|
if (action.external) {
|
|
629
|
-
return /* @__PURE__ */
|
|
762
|
+
return /* @__PURE__ */ jsx16(
|
|
630
763
|
"a",
|
|
631
764
|
{
|
|
632
765
|
href: action.href,
|
|
@@ -637,45 +770,45 @@ function SecondaryLink({ action }) {
|
|
|
637
770
|
}
|
|
638
771
|
);
|
|
639
772
|
}
|
|
640
|
-
return /* @__PURE__ */
|
|
773
|
+
return /* @__PURE__ */ jsx16(Link6, { href: action.href, className, children: action.label });
|
|
641
774
|
}
|
|
642
775
|
|
|
643
776
|
// src/views/ServicesLandingView.tsx
|
|
644
777
|
import { DialectShell } from "@mdxui/dialect";
|
|
645
|
-
import { jsx as
|
|
778
|
+
import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
646
779
|
function ServicesLandingView({ content, theme, mode }) {
|
|
647
780
|
return (
|
|
648
781
|
// texture off: the editorial Services surface keeps its own treatment; the
|
|
649
782
|
// shell's only job here is the <Site> theming envelope (services previously
|
|
650
783
|
// wrapped none, relying on the consumer — now it's self-contained).
|
|
651
|
-
/* @__PURE__ */
|
|
652
|
-
/* @__PURE__ */
|
|
653
|
-
/* @__PURE__ */
|
|
784
|
+
/* @__PURE__ */ jsx17(DialectShell, { theme, mode, texture: false, children: /* @__PURE__ */ jsxs13("div", { "data-dialect": "services", children: [
|
|
785
|
+
/* @__PURE__ */ jsx17(Masthead, { ...content.masthead }),
|
|
786
|
+
/* @__PURE__ */ jsx17(
|
|
654
787
|
ScrollHeader,
|
|
655
788
|
{
|
|
656
789
|
...content.masthead,
|
|
657
790
|
threshold: content.scrollHeaderThreshold
|
|
658
791
|
}
|
|
659
792
|
),
|
|
660
|
-
/* @__PURE__ */
|
|
661
|
-
/* @__PURE__ */
|
|
662
|
-
content.problem && /* @__PURE__ */
|
|
663
|
-
content.whatYouGet && /* @__PURE__ */
|
|
664
|
-
content.howItWorks && /* @__PURE__ */
|
|
665
|
-
content.defensibility && /* @__PURE__ */
|
|
666
|
-
content.pricing && /* @__PURE__ */
|
|
667
|
-
content.faq && /* @__PURE__ */
|
|
668
|
-
/* @__PURE__ */
|
|
793
|
+
/* @__PURE__ */ jsxs13("main", { children: [
|
|
794
|
+
/* @__PURE__ */ jsx17(ScrollReveal, { children: /* @__PURE__ */ jsx17(Hero, { ...content.hero, showGlyph: content.heroShowGlyph }) }),
|
|
795
|
+
content.problem && /* @__PURE__ */ jsx17(ScrollReveal, { children: /* @__PURE__ */ jsx17(Problem, { ...content.problem }) }),
|
|
796
|
+
content.whatYouGet && /* @__PURE__ */ jsx17(ScrollReveal, { children: /* @__PURE__ */ jsx17(WhatYouGet, { ...content.whatYouGet }) }),
|
|
797
|
+
content.howItWorks && /* @__PURE__ */ jsx17(ScrollReveal, { id: "how-it-works", className: "scroll-mt-24", children: /* @__PURE__ */ jsx17(HowItWorks, { ...content.howItWorks }) }),
|
|
798
|
+
content.defensibility && /* @__PURE__ */ jsx17(ScrollReveal, { children: /* @__PURE__ */ jsx17(Defensibility, { ...content.defensibility }) }),
|
|
799
|
+
content.pricing && /* @__PURE__ */ jsx17(ScrollReveal, { id: "pricing", className: "scroll-mt-24", children: /* @__PURE__ */ jsx17(Pricing, { ...content.pricing }) }),
|
|
800
|
+
content.faq && /* @__PURE__ */ jsx17(ScrollReveal, { id: "faq", className: "scroll-mt-24", children: /* @__PURE__ */ jsx17(Faq, { ...content.faq }) }),
|
|
801
|
+
/* @__PURE__ */ jsx17(ScrollReveal, { children: /* @__PURE__ */ jsx17(FinalCta, { ...content.finalCta }) })
|
|
669
802
|
] }),
|
|
670
|
-
/* @__PURE__ */
|
|
803
|
+
/* @__PURE__ */ jsx17(Footer, { ...content.footer })
|
|
671
804
|
] }) })
|
|
672
805
|
);
|
|
673
806
|
}
|
|
674
807
|
|
|
675
808
|
// src/shared/svg-inline.tsx
|
|
676
|
-
import { jsx as
|
|
809
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
677
810
|
function SvgInline({ svg }) {
|
|
678
|
-
return /* @__PURE__ */
|
|
811
|
+
return /* @__PURE__ */ jsx18(
|
|
679
812
|
"div",
|
|
680
813
|
{
|
|
681
814
|
className: "h-auto w-full",
|
|
@@ -735,6 +868,7 @@ __export(schemas_exports, {
|
|
|
735
868
|
LandingPublicCopySchema: () => LandingPublicCopySchema,
|
|
736
869
|
LogoUploadPropsSchema: () => LogoUploadPropsSchema,
|
|
737
870
|
MastheadPropsSchema: () => MastheadPropsSchema,
|
|
871
|
+
NavLinkSchema: () => NavLinkSchema,
|
|
738
872
|
OrderFieldSchema: () => OrderFieldSchema,
|
|
739
873
|
OrderFlowSchema: () => OrderFlowSchema,
|
|
740
874
|
OrderGroupSchema: () => OrderGroupSchema,
|
|
@@ -1043,13 +1177,25 @@ var FinalCtaPropsSchema = z.object({
|
|
|
1043
1177
|
primary: SiteActionSchema,
|
|
1044
1178
|
secondary: SiteActionSchema.optional()
|
|
1045
1179
|
});
|
|
1180
|
+
var NavLinkSchema = z.object({
|
|
1181
|
+
label: z.string(),
|
|
1182
|
+
href: z.string()
|
|
1183
|
+
});
|
|
1046
1184
|
var MastheadPropsSchema = z.object({
|
|
1047
1185
|
brand: z.object({
|
|
1048
1186
|
primary: z.string(),
|
|
1049
1187
|
secondary: z.string().optional(),
|
|
1050
|
-
href: z.string()
|
|
1188
|
+
href: z.string(),
|
|
1189
|
+
/** Optional brand logo, shown to the LEFT of the wordmark. With it the
|
|
1190
|
+
* navbar reads `[logo] <primary>`; without it the wordmark stands alone. */
|
|
1191
|
+
logo: z.object({ src: z.string(), alt: z.string() }).optional()
|
|
1051
1192
|
}),
|
|
1052
1193
|
cta: z.object({ label: z.string(), href: z.string() }).optional(),
|
|
1194
|
+
/** Page links shown centered on `md`+; collapsed into the mobile dropdown
|
|
1195
|
+
* below `md`. 3–5 links — 5 is the hard cap (more crowds the centered nav +
|
|
1196
|
+
* mobile overlay). Hrefs are typically in-page section anchors
|
|
1197
|
+
* (`#how-it-works` / `#pricing` / `#faq`) but any route works. */
|
|
1198
|
+
links: z.array(NavLinkSchema).max(5).optional(),
|
|
1053
1199
|
eyebrow: z.string().optional(),
|
|
1054
1200
|
narrow: z.boolean().optional()
|
|
1055
1201
|
});
|
|
@@ -1310,6 +1456,7 @@ export {
|
|
|
1310
1456
|
HowItWorks,
|
|
1311
1457
|
Masthead,
|
|
1312
1458
|
MdxuiParseError,
|
|
1459
|
+
MobileNav,
|
|
1313
1460
|
Pricing,
|
|
1314
1461
|
PrimaryAction,
|
|
1315
1462
|
Problem,
|