@dreamtree-org/landing-kit 0.2.1 → 0.5.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/MIGRATION.md +9 -0
- package/README.md +81 -5
- package/auth.css +42 -0
- package/auth.d.ts +3 -2
- package/demo-server.d.ts +41 -0
- package/dist/auth.cjs +176 -32
- package/dist/auth.js +176 -32
- package/dist/demo-server.cjs +121 -0
- package/dist/demo-server.js +88 -0
- package/dist/index.cjs +484 -340
- package/dist/index.js +477 -333
- package/index.d.ts +74 -1
- package/package.json +7 -1
- package/styles.css +42 -0
package/dist/index.cjs
CHANGED
|
@@ -28,6 +28,8 @@ __export(index_exports, {
|
|
|
28
28
|
Breadcrumbs: () => Breadcrumbs,
|
|
29
29
|
Cta: () => Cta,
|
|
30
30
|
DEFAULT_DEMO_FIELDS: () => DEFAULT_DEMO_FIELDS,
|
|
31
|
+
DEMO_ACCOUNTS_URL: () => DEMO_ACCOUNTS_URL,
|
|
32
|
+
DemoAccounts: () => DemoAccounts,
|
|
31
33
|
DemoCta: () => DemoCta,
|
|
32
34
|
DemoDialog: () => DemoDialog,
|
|
33
35
|
DreamtreeFooter: () => DreamtreeFooter,
|
|
@@ -52,18 +54,126 @@ __export(index_exports, {
|
|
|
52
54
|
brandStyle: () => brandStyle,
|
|
53
55
|
brands: () => brands,
|
|
54
56
|
createDemoIsland: () => createDemoIsland,
|
|
57
|
+
fetchDemoAccounts: () => fetchDemoAccounts,
|
|
55
58
|
getBrand: () => getBrand,
|
|
59
|
+
normalizeDemoAccounts: () => normalizeDemoAccounts,
|
|
56
60
|
resolveHref: () => resolveHref,
|
|
57
|
-
|
|
61
|
+
stashDemoFill: () => stashDemoFill,
|
|
62
|
+
takeDemoFill: () => takeDemoFill,
|
|
63
|
+
toLandingBrand: () => toLandingBrand,
|
|
64
|
+
useLanding: () => useLanding,
|
|
65
|
+
useTapReveal: () => useTapReveal
|
|
58
66
|
});
|
|
59
67
|
module.exports = __toCommonJS(index_exports);
|
|
60
68
|
|
|
61
69
|
// src/LandingPage.jsx
|
|
62
|
-
var
|
|
70
|
+
var import_react7 = require("react");
|
|
63
71
|
|
|
64
72
|
// src/AuthShell.jsx
|
|
73
|
+
var import_react3 = require("react");
|
|
74
|
+
|
|
75
|
+
// src/DemoAccounts.jsx
|
|
65
76
|
var import_react = require("react");
|
|
77
|
+
|
|
78
|
+
// src/demoFill.js
|
|
79
|
+
var DEMO_ACCOUNTS_URL = "/api/auth/demo-accounts";
|
|
80
|
+
var FILL_KEY = "dt-demo-fill";
|
|
81
|
+
async function fetchDemoAccounts(url = DEMO_ACCOUNTS_URL, init = {}) {
|
|
82
|
+
try {
|
|
83
|
+
const res = await fetch(url, { credentials: "include", cache: "no-store", ...init, headers: { Accept: "application/json", ...init.headers } });
|
|
84
|
+
if (!res.ok) return { accounts: [] };
|
|
85
|
+
return normalizeDemoAccounts(await res.json());
|
|
86
|
+
} catch {
|
|
87
|
+
return { accounts: [] };
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
function normalizeDemoAccounts(data) {
|
|
91
|
+
const list = Array.isArray(data) ? data : Array.isArray(data == null ? void 0 : data.accounts) ? data.accounts : [];
|
|
92
|
+
const accounts = list.filter((a) => a && typeof a.label === "string" && typeof a.identifier === "string");
|
|
93
|
+
let sharedPassword = typeof (data == null ? void 0 : data.sharedPassword) === "string" ? data.sharedPassword : void 0;
|
|
94
|
+
if (!sharedPassword && accounts.length > 1 && accounts.every((a) => a.password && a.password === accounts[0].password)) {
|
|
95
|
+
sharedPassword = accounts[0].password;
|
|
96
|
+
}
|
|
97
|
+
return sharedPassword ? { accounts, sharedPassword } : { accounts };
|
|
98
|
+
}
|
|
99
|
+
function stashDemoFill(account) {
|
|
100
|
+
var _a;
|
|
101
|
+
try {
|
|
102
|
+
sessionStorage.setItem(FILL_KEY, JSON.stringify({ identifier: account.identifier, password: (_a = account.password) != null ? _a : "", company: account.company }));
|
|
103
|
+
} catch {
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
function takeDemoFill() {
|
|
107
|
+
try {
|
|
108
|
+
const raw = sessionStorage.getItem(FILL_KEY);
|
|
109
|
+
if (!raw) return null;
|
|
110
|
+
sessionStorage.removeItem(FILL_KEY);
|
|
111
|
+
return JSON.parse(raw);
|
|
112
|
+
} catch {
|
|
113
|
+
return null;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
// src/DemoAccounts.jsx
|
|
66
118
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
119
|
+
function DemoAccounts({ load, onSelect, className = "" }) {
|
|
120
|
+
const [state, setState] = (0, import_react.useState)({ status: "loading", accounts: [] });
|
|
121
|
+
const [picked, setPicked] = (0, import_react.useState)(null);
|
|
122
|
+
const loadRef = (0, import_react.useRef)(load);
|
|
123
|
+
(0, import_react.useEffect)(() => {
|
|
124
|
+
let live = true;
|
|
125
|
+
Promise.resolve().then(() => loadRef.current()).then((data) => live && setState({ status: "ready", ...normalizeDemoAccounts(data) })).catch(() => live && setState({ status: "ready", accounts: [] }));
|
|
126
|
+
return () => {
|
|
127
|
+
live = false;
|
|
128
|
+
};
|
|
129
|
+
}, []);
|
|
130
|
+
if (state.status === "ready" && !state.accounts.length) return null;
|
|
131
|
+
const pick = (account, i) => {
|
|
132
|
+
setPicked(i);
|
|
133
|
+
onSelect == null ? void 0 : onSelect(account);
|
|
134
|
+
};
|
|
135
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `dt-auth-demo ${className}`, "aria-busy": state.status === "loading" || void 0, children: [
|
|
136
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dt-auth-demo-label", children: "Demo accounts" }),
|
|
137
|
+
state.status === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dt-auth-demo-chips", "aria-hidden": "true", children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dt-auth-demo-chip dt-auth-demo-chip--skeleton" }, i)) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
138
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dt-auth-demo-chips", children: state.accounts.map((a, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
139
|
+
"button",
|
|
140
|
+
{
|
|
141
|
+
type: "button",
|
|
142
|
+
className: "dt-auth-demo-chip",
|
|
143
|
+
"aria-pressed": picked === i,
|
|
144
|
+
title: a.company ? `${a.identifier} \xB7 ${a.company}` : a.identifier,
|
|
145
|
+
onClick: () => pick(a, i),
|
|
146
|
+
children: a.label
|
|
147
|
+
},
|
|
148
|
+
`${a.label}-${a.identifier}`
|
|
149
|
+
)) }),
|
|
150
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dt-auth-demo-note", children: state.sharedPassword ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
151
|
+
"Shared password ",
|
|
152
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children: state.sharedPassword }),
|
|
153
|
+
" \u2014 tap a role to fill."
|
|
154
|
+
] }) : "Tap a role to fill." })
|
|
155
|
+
] })
|
|
156
|
+
] });
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
// src/useTapReveal.js
|
|
160
|
+
var import_react2 = require("react");
|
|
161
|
+
function useTapReveal({ taps = 4, windowMs = 1500 } = {}) {
|
|
162
|
+
const [revealed, setRevealed] = (0, import_react2.useState)(false);
|
|
163
|
+
const count = (0, import_react2.useRef)(0);
|
|
164
|
+
const last = (0, import_react2.useRef)(0);
|
|
165
|
+
const onClick = (0, import_react2.useCallback)(() => {
|
|
166
|
+
if (revealed) return;
|
|
167
|
+
const now = Date.now();
|
|
168
|
+
count.current = now - last.current <= windowMs ? count.current + 1 : 1;
|
|
169
|
+
last.current = now;
|
|
170
|
+
if (count.current >= taps) setRevealed(true);
|
|
171
|
+
}, [revealed, taps, windowMs]);
|
|
172
|
+
return { revealed, tapProps: { onClick, style: { userSelect: "none", WebkitUserSelect: "none" } } };
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
// src/AuthShell.jsx
|
|
176
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
67
177
|
var DEFAULT_LEGAL = [
|
|
68
178
|
{ label: "Privacy Policy", href: "/privacy" },
|
|
69
179
|
{ label: "Terms", href: "/terms" },
|
|
@@ -71,10 +181,10 @@ var DEFAULT_LEGAL = [
|
|
|
71
181
|
];
|
|
72
182
|
function BrandMark({ brand, size }) {
|
|
73
183
|
if (brand.logoSrc) {
|
|
74
|
-
return /* @__PURE__ */ (0,
|
|
184
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { className: "dt-auth-mark-img", src: brand.logoSrc, alt: "", width: size, height: size });
|
|
75
185
|
}
|
|
76
|
-
if (brand.mark) return /* @__PURE__ */ (0,
|
|
77
|
-
return /* @__PURE__ */ (0,
|
|
186
|
+
if (brand.mark) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "dt-auth-mark-node", children: brand.mark });
|
|
187
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "dt-auth-monogram", style: { width: size, height: size }, "aria-hidden": "true", children: brand.name.charAt(0) });
|
|
78
188
|
}
|
|
79
189
|
function brandStyle(brand) {
|
|
80
190
|
return {
|
|
@@ -92,50 +202,53 @@ function AuthShell({
|
|
|
92
202
|
variant = "tenant",
|
|
93
203
|
legalLinks = DEFAULT_LEGAL,
|
|
94
204
|
linkComponent: LinkComponent,
|
|
95
|
-
className = ""
|
|
205
|
+
className = "",
|
|
206
|
+
demoAccounts
|
|
96
207
|
}) {
|
|
97
|
-
var _a;
|
|
98
|
-
const headingId = (0,
|
|
208
|
+
var _a, _b;
|
|
209
|
+
const headingId = (0, import_react3.useId)();
|
|
210
|
+
const { revealed, tapProps } = useTapReveal({ taps: (_a = demoAccounts == null ? void 0 : demoAccounts.taps) != null ? _a : 4 });
|
|
99
211
|
const isPlatform = variant === "platform";
|
|
100
212
|
const headline = isPlatform ? brand.platformHeadline || "Platform administration" : brand.headline;
|
|
101
213
|
const pitch = isPlatform ? brand.platformPitch || `Super administrator console for ${brand.name}. Every action here is audited.` : brand.pitch;
|
|
102
|
-
const renderLink = (l) => LinkComponent ? /* @__PURE__ */ (0,
|
|
103
|
-
return /* @__PURE__ */ (0,
|
|
214
|
+
const renderLink = (l) => LinkComponent ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LinkComponent, { to: l.href, href: l.href, className: "dt-auth-legal-link", children: l.label }, l.href) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: l.href, className: "dt-auth-legal-link", children: l.label }, l.href);
|
|
215
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
104
216
|
"div",
|
|
105
217
|
{
|
|
106
218
|
className: `dt-auth ${isPlatform ? "dt-auth--platform" : ""} ${className}`,
|
|
107
219
|
style: brandStyle(brand),
|
|
108
220
|
"data-product": brand.id,
|
|
109
221
|
children: [
|
|
110
|
-
/* @__PURE__ */ (0,
|
|
111
|
-
/* @__PURE__ */ (0,
|
|
112
|
-
/* @__PURE__ */ (0,
|
|
113
|
-
/* @__PURE__ */ (0,
|
|
114
|
-
isPlatform ? /* @__PURE__ */ (0,
|
|
222
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("aside", { className: "dt-auth-panel", children: [
|
|
223
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("a", { href: "/", className: "dt-auth-brand", children: [
|
|
224
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BrandMark, { brand, size: 28 }),
|
|
225
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "dt-auth-brand-name", children: brand.name }),
|
|
226
|
+
isPlatform ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "dt-auth-badge", children: "Platform" }) : null
|
|
115
227
|
] }),
|
|
116
|
-
/* @__PURE__ */ (0,
|
|
117
|
-
/* @__PURE__ */ (0,
|
|
118
|
-
pitch ? /* @__PURE__ */ (0,
|
|
119
|
-
!isPlatform && ((
|
|
228
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "dt-auth-pitch", children: [
|
|
229
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { children: headline }),
|
|
230
|
+
pitch ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: pitch }) : null,
|
|
231
|
+
!isPlatform && ((_b = brand.points) == null ? void 0 : _b.length) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { children: brand.points.map((p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { children: p }, p)) }) : null
|
|
120
232
|
] }),
|
|
121
|
-
/* @__PURE__ */ (0,
|
|
233
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "dt-auth-panel-foot", children: brand.category || "by Dreamtree-Org" })
|
|
122
234
|
] }),
|
|
123
|
-
/* @__PURE__ */ (0,
|
|
124
|
-
/* @__PURE__ */ (0,
|
|
125
|
-
/* @__PURE__ */ (0,
|
|
126
|
-
/* @__PURE__ */ (0,
|
|
127
|
-
isPlatform ? /* @__PURE__ */ (0,
|
|
235
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("main", { className: "dt-auth-main", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "dt-auth-column", children: [
|
|
236
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("a", { href: "/", className: "dt-auth-brand dt-auth-brand--mobile", children: [
|
|
237
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BrandMark, { brand, size: 24 }),
|
|
238
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "dt-auth-brand-name", children: brand.name }),
|
|
239
|
+
isPlatform ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "dt-auth-badge", children: "Platform" }) : null
|
|
128
240
|
] }),
|
|
129
|
-
/* @__PURE__ */ (0,
|
|
130
|
-
/* @__PURE__ */ (0,
|
|
131
|
-
/* @__PURE__ */ (0,
|
|
132
|
-
subtitle ? /* @__PURE__ */ (0,
|
|
241
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { className: "dt-auth-card", "aria-labelledby": headingId, children: [
|
|
242
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("header", { className: "dt-auth-head", children: [
|
|
243
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { id: headingId, ...demoAccounts ? tapProps : {}, children: title }),
|
|
244
|
+
subtitle ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: subtitle }) : null
|
|
133
245
|
] }),
|
|
134
|
-
children
|
|
246
|
+
children,
|
|
247
|
+
demoAccounts && revealed ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DemoAccounts, { load: demoAccounts.load, onSelect: demoAccounts.onSelect }) : null
|
|
135
248
|
] }),
|
|
136
|
-
footer ? /* @__PURE__ */ (0,
|
|
137
|
-
(legalLinks == null ? void 0 : legalLinks.length) ? /* @__PURE__ */ (0,
|
|
138
|
-
i > 0 ? /* @__PURE__ */ (0,
|
|
249
|
+
footer ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "dt-auth-footer", children: footer }) : null,
|
|
250
|
+
(legalLinks == null ? void 0 : legalLinks.length) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("nav", { className: "dt-auth-legal", "aria-label": "Legal", children: legalLinks.map((l, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "dt-auth-legal-item", children: [
|
|
251
|
+
i > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": "true", children: "\xB7" }) : null,
|
|
139
252
|
renderLink(l)
|
|
140
253
|
] }, l.href)) }) : null
|
|
141
254
|
] }) })
|
|
@@ -145,11 +258,11 @@ function AuthShell({
|
|
|
145
258
|
}
|
|
146
259
|
|
|
147
260
|
// src/context.jsx
|
|
148
|
-
var
|
|
149
|
-
var
|
|
150
|
-
var LandingContext = (0,
|
|
261
|
+
var import_react4 = require("react");
|
|
262
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
263
|
+
var LandingContext = (0, import_react4.createContext)({ brand: null, linkComponent: null, onBookDemo: null, home: true });
|
|
151
264
|
var LandingProvider = LandingContext.Provider;
|
|
152
|
-
var useLanding = () => (0,
|
|
265
|
+
var useLanding = () => (0, import_react4.useContext)(LandingContext);
|
|
153
266
|
function resolveHref(href, home) {
|
|
154
267
|
if (!href) return href;
|
|
155
268
|
return !home && href.startsWith("#") ? `/${href}` : href;
|
|
@@ -159,17 +272,17 @@ function SmartLink({ href, children, className, reload, ...rest }) {
|
|
|
159
272
|
const to = resolveHref(href, home);
|
|
160
273
|
const internal = to && to.startsWith("/") && !to.startsWith("//") && !to.includes("#");
|
|
161
274
|
if (Link && internal && !reload) {
|
|
162
|
-
return /* @__PURE__ */ (0,
|
|
275
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Link, { to, href: to, className, ...rest, children });
|
|
163
276
|
}
|
|
164
|
-
return /* @__PURE__ */ (0,
|
|
277
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: to, className, ...rest, children });
|
|
165
278
|
}
|
|
166
279
|
|
|
167
280
|
// src/Header.jsx
|
|
168
|
-
var
|
|
281
|
+
var import_react6 = require("react");
|
|
169
282
|
|
|
170
283
|
// src/icons.jsx
|
|
171
|
-
var
|
|
172
|
-
var
|
|
284
|
+
var import_react5 = require("react");
|
|
285
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
173
286
|
var base = {
|
|
174
287
|
viewBox: "0 0 24 24",
|
|
175
288
|
fill: "none",
|
|
@@ -181,73 +294,73 @@ var base = {
|
|
|
181
294
|
focusable: "false"
|
|
182
295
|
};
|
|
183
296
|
var make = (paths) => function Icon({ size = 16, className = "dt-lp-icon" }) {
|
|
184
|
-
return /* @__PURE__ */ (0,
|
|
297
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { ...base, width: size, height: size, className, children: paths });
|
|
185
298
|
};
|
|
186
|
-
var ArrowRight = make(/* @__PURE__ */ (0,
|
|
187
|
-
var ChevronRight = make(/* @__PURE__ */ (0,
|
|
188
|
-
var Check = make(/* @__PURE__ */ (0,
|
|
299
|
+
var ArrowRight = make(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M5 12h14M13 6l6 6-6 6" }));
|
|
300
|
+
var ChevronRight = make(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m9 6 6 6-6 6" }));
|
|
301
|
+
var Check = make(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M20 6 9 17l-5-5" }));
|
|
189
302
|
var Help = make(
|
|
190
|
-
/* @__PURE__ */ (0,
|
|
191
|
-
/* @__PURE__ */ (0,
|
|
192
|
-
/* @__PURE__ */ (0,
|
|
303
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
304
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
|
|
305
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01" })
|
|
193
306
|
] })
|
|
194
307
|
);
|
|
195
308
|
var Alert = make(
|
|
196
|
-
/* @__PURE__ */ (0,
|
|
197
|
-
/* @__PURE__ */ (0,
|
|
198
|
-
/* @__PURE__ */ (0,
|
|
309
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
310
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" }),
|
|
311
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 9v4M12 17h.01" })
|
|
199
312
|
] })
|
|
200
313
|
);
|
|
201
|
-
var MenuIcon = make(/* @__PURE__ */ (0,
|
|
202
|
-
var Close = make(/* @__PURE__ */ (0,
|
|
314
|
+
var MenuIcon = make(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M4 6h16M4 12h16M4 18h16" }));
|
|
315
|
+
var Close = make(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M18 6 6 18M6 6l12 12" }));
|
|
203
316
|
var Calendar = make(
|
|
204
|
-
/* @__PURE__ */ (0,
|
|
205
|
-
/* @__PURE__ */ (0,
|
|
206
|
-
/* @__PURE__ */ (0,
|
|
317
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
318
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
|
|
319
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M16 2v4M8 2v4M3 10h18m-12 6 2 2 4-4" })
|
|
207
320
|
] })
|
|
208
321
|
);
|
|
209
322
|
function renderIcon(icon, size = 20, className = "dt-lp-icon") {
|
|
210
323
|
if (!icon) return null;
|
|
211
|
-
if ((0,
|
|
212
|
-
return (0,
|
|
324
|
+
if ((0, import_react5.isValidElement)(icon)) return icon;
|
|
325
|
+
return (0, import_react5.createElement)(icon, { size, "aria-hidden": true, className, strokeWidth: 1.8 });
|
|
213
326
|
}
|
|
214
327
|
|
|
215
328
|
// src/Brand.jsx
|
|
216
|
-
var
|
|
329
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
217
330
|
function BrandMark2({ brand, size = 36 }) {
|
|
218
331
|
if (brand.logoSrc) {
|
|
219
|
-
return /* @__PURE__ */ (0,
|
|
332
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { className: "dt-lp-mark-img", src: brand.logoSrc, alt: "", width: size, height: size });
|
|
220
333
|
}
|
|
221
|
-
if (brand.mark) return /* @__PURE__ */ (0,
|
|
222
|
-
return /* @__PURE__ */ (0,
|
|
334
|
+
if (brand.mark) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "dt-lp-mark-node", "aria-hidden": "true", children: brand.mark });
|
|
335
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "dt-lp-monogram", style: { width: size, height: size }, "aria-hidden": "true", children: brand.name.charAt(0) });
|
|
223
336
|
}
|
|
224
337
|
function Wordmark({ name }) {
|
|
225
338
|
const m = /^(.+?)(Pro)$/.exec(name);
|
|
226
|
-
if (!m) return /* @__PURE__ */ (0,
|
|
227
|
-
return /* @__PURE__ */ (0,
|
|
339
|
+
if (!m) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "dt-lp-wordmark", children: name });
|
|
340
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "dt-lp-wordmark", children: [
|
|
228
341
|
m[1],
|
|
229
|
-
/* @__PURE__ */ (0,
|
|
342
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "dt-lp-wordmark-hi", children: m[2] })
|
|
230
343
|
] });
|
|
231
344
|
}
|
|
232
345
|
function BrandLockup({ brand: own, byline = "by Dreamtree-Org", href = "/" }) {
|
|
233
346
|
const ctx = useLanding();
|
|
234
347
|
const brand = own || ctx.brand;
|
|
235
348
|
if (!brand) return null;
|
|
236
|
-
return /* @__PURE__ */ (0,
|
|
237
|
-
/* @__PURE__ */ (0,
|
|
238
|
-
/* @__PURE__ */ (0,
|
|
239
|
-
/* @__PURE__ */ (0,
|
|
240
|
-
byline ? /* @__PURE__ */ (0,
|
|
349
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("a", { href, className: "dt-lp-brand", "aria-label": `${brand.name}${byline ? ` ${byline}` : ""}, home`, children: [
|
|
350
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BrandMark2, { brand }),
|
|
351
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "dt-lp-brand-text", "aria-hidden": "true", children: [
|
|
352
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Wordmark, { name: brand.name }),
|
|
353
|
+
byline ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "dt-lp-byline", children: byline }) : null
|
|
241
354
|
] })
|
|
242
355
|
] });
|
|
243
356
|
}
|
|
244
357
|
|
|
245
358
|
// src/BookDemoButton.jsx
|
|
246
|
-
var
|
|
359
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
247
360
|
function BookDemoButton({ size = "md", variant = "primary", className = "", children = "Book a demo", onClick }) {
|
|
248
361
|
const { onBookDemo } = useLanding();
|
|
249
362
|
const handler = onClick || (onBookDemo ? (e) => onBookDemo(e.currentTarget) : void 0);
|
|
250
|
-
return /* @__PURE__ */ (0,
|
|
363
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
251
364
|
"button",
|
|
252
365
|
{
|
|
253
366
|
type: "button",
|
|
@@ -261,61 +374,61 @@ function BookDemoButton({ size = "md", variant = "primary", className = "", chil
|
|
|
261
374
|
}
|
|
262
375
|
|
|
263
376
|
// src/Section.jsx
|
|
264
|
-
var
|
|
377
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
265
378
|
function Wrap({ className = "", narrow, children }) {
|
|
266
|
-
return /* @__PURE__ */ (0,
|
|
379
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `dt-lp-wrap${narrow ? " dt-lp-wrap--narrow" : ""} ${className}`.trim(), children });
|
|
267
380
|
}
|
|
268
381
|
function Eyebrow({ children, className = "" }) {
|
|
269
382
|
if (!children) return null;
|
|
270
|
-
return /* @__PURE__ */ (0,
|
|
383
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: `dt-lp-eyebrow ${className}`.trim(), children });
|
|
271
384
|
}
|
|
272
385
|
function SectionIntro({ id, eyebrow, title, body, align = "start", children }) {
|
|
273
|
-
return /* @__PURE__ */ (0,
|
|
274
|
-
/* @__PURE__ */ (0,
|
|
275
|
-
/* @__PURE__ */ (0,
|
|
276
|
-
body ? /* @__PURE__ */ (0,
|
|
386
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `dt-lp-intro dt-lp-intro--${align}`, children: [
|
|
387
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Eyebrow, { children: eyebrow }),
|
|
388
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { id, className: "dt-lp-h2", children: title }),
|
|
389
|
+
body ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "dt-lp-lead", children: body }) : null,
|
|
277
390
|
children
|
|
278
391
|
] });
|
|
279
392
|
}
|
|
280
393
|
function Section({ id, labelledBy, tone = "plain", className = "", children, narrow }) {
|
|
281
|
-
return /* @__PURE__ */ (0,
|
|
394
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("section", { id, "aria-labelledby": labelledBy, className: `dt-lp-section dt-lp-tone--${tone} ${className}`.trim(), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Wrap, { narrow, children }) });
|
|
282
395
|
}
|
|
283
396
|
function TextLink({ href, children, className = "", ...rest }) {
|
|
284
|
-
return /* @__PURE__ */ (0,
|
|
397
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(SmartLink, { href, className: `dt-lp-textlink ${className}`.trim(), ...rest, children: [
|
|
285
398
|
children,
|
|
286
399
|
" ",
|
|
287
|
-
/* @__PURE__ */ (0,
|
|
400
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ArrowRight, {})
|
|
288
401
|
] });
|
|
289
402
|
}
|
|
290
403
|
function Cta({ cta, className = "" }) {
|
|
291
404
|
if (!cta) return null;
|
|
292
405
|
if (Array.isArray(cta)) {
|
|
293
406
|
if (!cta.length) return null;
|
|
294
|
-
return /* @__PURE__ */ (0,
|
|
407
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `dt-lp-ctas ${className}`.trim(), children: cta.map((c2, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Cta, { cta: c2 }, i)) });
|
|
295
408
|
}
|
|
296
409
|
const c = typeof cta === "string" ? { label: cta, demo: true } : cta;
|
|
297
|
-
if (c.href && !c.demo) return /* @__PURE__ */ (0,
|
|
298
|
-
return /* @__PURE__ */ (0,
|
|
410
|
+
if (c.href && !c.demo) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TextLink, { href: c.href, className, children: c.label });
|
|
411
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(BookDemoButton, { size: "lg", className, children: [
|
|
299
412
|
c.label,
|
|
300
413
|
" ",
|
|
301
|
-
/* @__PURE__ */ (0,
|
|
414
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ArrowRight, {})
|
|
302
415
|
] });
|
|
303
416
|
}
|
|
304
417
|
|
|
305
418
|
// src/Header.jsx
|
|
306
|
-
var
|
|
419
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
307
420
|
function Header({ nav = [], login = { label: "Log in", href: "/login" }, cta = "Book a demo", brand }) {
|
|
308
421
|
const { home } = useLanding();
|
|
309
|
-
const [open, setOpen] = (0,
|
|
422
|
+
const [open, setOpen] = (0, import_react6.useState)(false);
|
|
310
423
|
const items = login ? [...nav, login] : nav;
|
|
311
|
-
return /* @__PURE__ */ (0,
|
|
312
|
-
/* @__PURE__ */ (0,
|
|
313
|
-
/* @__PURE__ */ (0,
|
|
314
|
-
nav.length ? /* @__PURE__ */ (0,
|
|
315
|
-
/* @__PURE__ */ (0,
|
|
316
|
-
login ? /* @__PURE__ */ (0,
|
|
317
|
-
cta ? /* @__PURE__ */ (0,
|
|
318
|
-
items.length ? /* @__PURE__ */ (0,
|
|
424
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("header", { className: "dt-lp-header", children: [
|
|
425
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Wrap, { className: "dt-lp-header-bar", children: [
|
|
426
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BrandLockup, { brand }),
|
|
427
|
+
nav.length ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("nav", { "aria-label": "Primary", className: "dt-lp-nav", children: nav.map((n) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SmartLink, { href: n.href, className: "dt-lp-nav-link", children: n.label }, n.href)) }) : null,
|
|
428
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dt-lp-header-actions", children: [
|
|
429
|
+
login ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SmartLink, { href: login.href, className: "dt-lp-nav-link dt-lp-login", reload: true, children: login.label }) : null,
|
|
430
|
+
cta ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BookDemoButton, { size: "sm", children: cta }) : null,
|
|
431
|
+
items.length ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
319
432
|
"button",
|
|
320
433
|
{
|
|
321
434
|
type: "button",
|
|
@@ -326,29 +439,29 @@ function Header({ nav = [], login = { label: "Log in", href: "/login" }, cta = "
|
|
|
326
439
|
"data-menu-toggle": "",
|
|
327
440
|
onClick: () => setOpen((o) => !o),
|
|
328
441
|
children: [
|
|
329
|
-
/* @__PURE__ */ (0,
|
|
330
|
-
/* @__PURE__ */ (0,
|
|
442
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "dt-lp-menu-open", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MenuIcon, { size: 20 }) }),
|
|
443
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "dt-lp-menu-close", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Close, { size: 20 }) })
|
|
331
444
|
]
|
|
332
445
|
}
|
|
333
446
|
) : null
|
|
334
447
|
] })
|
|
335
448
|
] }),
|
|
336
|
-
items.length ? /* @__PURE__ */ (0,
|
|
449
|
+
items.length ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("nav", { id: "mobile-nav", "aria-label": "Mobile", className: "dt-lp-mobile-nav", hidden: !open, onClick: (e) => {
|
|
337
450
|
var _a, _b;
|
|
338
451
|
return ((_b = (_a = e.target).closest) == null ? void 0 : _b.call(_a, "a")) && setOpen(false);
|
|
339
|
-
}, children: /* @__PURE__ */ (0,
|
|
452
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Wrap, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { children: items.map((n) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SmartLink, { href: n.href, reload: n === login, children: n.label }) }, n.href)) }) }) }) : null
|
|
340
453
|
] });
|
|
341
454
|
}
|
|
342
455
|
|
|
343
456
|
// src/DreamtreeFooter.jsx
|
|
344
|
-
var
|
|
457
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
345
458
|
function DreamtreeMark({ size = 28 }) {
|
|
346
|
-
return /* @__PURE__ */ (0,
|
|
347
|
-
/* @__PURE__ */ (0,
|
|
348
|
-
/* @__PURE__ */ (0,
|
|
349
|
-
/* @__PURE__ */ (0,
|
|
459
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "dt-lp-org", role: "img", "aria-label": "Dreamtree-Org", children: [
|
|
460
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { viewBox: "0 0 48.35 48.35", width: size, height: size, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { fill: "none", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round", stroke: "#0f766e", children: [
|
|
461
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M23.01,44.02c-9.02.03-16.36-7.27-16.39-16.29-.02-7.98,5.72-14.81,13.59-16.16,13.31-2.57,16.81-3.78,21.48-9.57,2.33,4.67,4.67,9.76,4.67,18.67,0,12.84-11.16,23.34-23.34,23.34Z" }),
|
|
462
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M2,46.35c0-7,4.32-12.51,11.86-14.01,5.65-1.12,11.49-4.67,13.82-7" })
|
|
350
463
|
] }) }),
|
|
351
|
-
/* @__PURE__ */ (0,
|
|
464
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "aria-hidden": "true", className: "dt-lp-org-name", children: "Dreamtree-Org" })
|
|
352
465
|
] });
|
|
353
466
|
}
|
|
354
467
|
function DreamtreeFooter({
|
|
@@ -362,27 +475,27 @@ function DreamtreeFooter({
|
|
|
362
475
|
}) {
|
|
363
476
|
const ctx = useLanding();
|
|
364
477
|
const brand = own || ctx.brand;
|
|
365
|
-
return /* @__PURE__ */ (0,
|
|
366
|
-
/* @__PURE__ */ (0,
|
|
367
|
-
/* @__PURE__ */ (0,
|
|
368
|
-
/* @__PURE__ */ (0,
|
|
369
|
-
blurb ? /* @__PURE__ */ (0,
|
|
478
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("footer", { className: "dt-lp-footer", children: [
|
|
479
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Wrap, { className: `dt-lp-footer-grid dt-lp-footer-grid--${Math.min(columns.length, 3)}`, children: [
|
|
480
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "dt-lp-footer-about", children: [
|
|
481
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DreamtreeMark, {}),
|
|
482
|
+
blurb ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: blurb }) : null
|
|
370
483
|
] }),
|
|
371
|
-
columns.map((col) => /* @__PURE__ */ (0,
|
|
372
|
-
/* @__PURE__ */ (0,
|
|
373
|
-
/* @__PURE__ */ (0,
|
|
484
|
+
columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("nav", { "aria-label": col.label || col.title, className: "dt-lp-footer-col", children: [
|
|
485
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "dt-lp-footer-title", children: col.title }),
|
|
486
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { className: col.links.length > 5 && col.compact !== false ? "dt-lp-footer-links" : "dt-lp-footer-links dt-lp-footer-links--one", children: col.links.map((l) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SmartLink, { href: l.href, reload: l.reload, children: l.label }) }, l.href)) })
|
|
374
487
|
] }, col.title))
|
|
375
488
|
] }),
|
|
376
|
-
/* @__PURE__ */ (0,
|
|
377
|
-
/* @__PURE__ */ (0,
|
|
489
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "dt-lp-footer-bar", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Wrap, { className: "dt-lp-footer-bar-inner", children: [
|
|
490
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { children: [
|
|
378
491
|
"\xA9 ",
|
|
379
492
|
year,
|
|
380
493
|
" ",
|
|
381
494
|
org,
|
|
382
495
|
". All rights reserved."
|
|
383
496
|
] }),
|
|
384
|
-
legal.length ? /* @__PURE__ */ (0,
|
|
385
|
-
brand && tagline ? /* @__PURE__ */ (0,
|
|
497
|
+
legal.length ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("nav", { "aria-label": "Legal", className: "dt-lp-footer-legal", children: legal.map((l) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SmartLink, { href: l.href, children: l.label }, l.href)) }) : null,
|
|
498
|
+
brand && tagline ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { children: [
|
|
386
499
|
brand.name,
|
|
387
500
|
": ",
|
|
388
501
|
tagline
|
|
@@ -392,7 +505,7 @@ function DreamtreeFooter({
|
|
|
392
505
|
}
|
|
393
506
|
|
|
394
507
|
// src/MarketingLayout.jsx
|
|
395
|
-
var
|
|
508
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
396
509
|
function MarketingLayout({
|
|
397
510
|
brand,
|
|
398
511
|
nav = [],
|
|
@@ -408,16 +521,16 @@ function MarketingLayout({
|
|
|
408
521
|
if (!brand || !brand.name) {
|
|
409
522
|
throw new Error(`landing-kit: "brand" is missing. Pass getBrand('<product>') from @dreamtree-org/auth-kit, or your own { id, name, primary }.`);
|
|
410
523
|
}
|
|
411
|
-
return /* @__PURE__ */ (0,
|
|
412
|
-
/* @__PURE__ */ (0,
|
|
413
|
-
/* @__PURE__ */ (0,
|
|
414
|
-
/* @__PURE__ */ (0,
|
|
415
|
-
footer === false ? null : /* @__PURE__ */ (0,
|
|
524
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LandingProvider, { value: { brand, linkComponent, onBookDemo, home }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `dt-landing ${className}`.trim(), style: brandStyle(brand), "data-product": brand.id, children: [
|
|
525
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("a", { href: "#main", className: "dt-lp-skip", children: "Skip to content" }),
|
|
526
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Header, { nav, ...login !== void 0 ? { login } : {}, ...cta !== void 0 ? { cta } : {} }),
|
|
527
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("main", { id: "main", children }),
|
|
528
|
+
footer === false ? null : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DreamtreeFooter, { ...footer || {} })
|
|
416
529
|
] }) });
|
|
417
530
|
}
|
|
418
531
|
|
|
419
532
|
// src/Hero.jsx
|
|
420
|
-
var
|
|
533
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
421
534
|
function Hero({
|
|
422
535
|
eyebrow,
|
|
423
536
|
title,
|
|
@@ -432,169 +545,169 @@ function Hero({
|
|
|
432
545
|
backdrop
|
|
433
546
|
}) {
|
|
434
547
|
const [first, hi] = Array.isArray(title) ? title : [title, null];
|
|
435
|
-
return /* @__PURE__ */ (0,
|
|
436
|
-
/* @__PURE__ */ (0,
|
|
437
|
-
backdrop ? /* @__PURE__ */ (0,
|
|
438
|
-
/* @__PURE__ */ (0,
|
|
439
|
-
/* @__PURE__ */ (0,
|
|
440
|
-
/* @__PURE__ */ (0,
|
|
548
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("section", { id, "aria-labelledby": "hero-title", className: `dt-lp-hero${overlap ? " dt-lp-hero--overlap" : ""}`, children: [
|
|
549
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "dt-lp-hero-glow", "aria-hidden": "true" }),
|
|
550
|
+
backdrop ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "dt-lp-hero-backdrop", "aria-hidden": "true", children: backdrop }) : null,
|
|
551
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Wrap, { className: "dt-lp-hero-inner", children: [
|
|
552
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Eyebrow, { children: eyebrow }),
|
|
553
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("h1", { id: "hero-title", className: "dt-lp-h1", children: [
|
|
441
554
|
first,
|
|
442
|
-
hi ? /* @__PURE__ */ (0,
|
|
555
|
+
hi ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
|
|
443
556
|
" ",
|
|
444
|
-
/* @__PURE__ */ (0,
|
|
557
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "dt-lp-h1-hi", children: hi })
|
|
445
558
|
] }) : null
|
|
446
559
|
] }),
|
|
447
|
-
subtitle ? /* @__PURE__ */ (0,
|
|
448
|
-
lead ? /* @__PURE__ */ (0,
|
|
449
|
-
/* @__PURE__ */ (0,
|
|
450
|
-
cta ? /* @__PURE__ */ (0,
|
|
451
|
-
secondary ? /* @__PURE__ */ (0,
|
|
560
|
+
subtitle ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "dt-lp-hero-subtitle", children: subtitle }) : null,
|
|
561
|
+
lead ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "dt-lp-hero-lead", children: lead }) : null,
|
|
562
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "dt-lp-actions", children: [
|
|
563
|
+
cta ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BookDemoButton, { size: "lg", children: cta }) : null,
|
|
564
|
+
secondary ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TextLink, { href: secondary.href, children: secondary.label }) : null
|
|
452
565
|
] }),
|
|
453
|
-
(chips == null ? void 0 : chips.length) ? /* @__PURE__ */ (0,
|
|
566
|
+
(chips == null ? void 0 : chips.length) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ul", { className: "dt-lp-chips", "aria-label": chipsLabel, children: chips.map((c) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { children: c }, c)) }) : null
|
|
454
567
|
] })
|
|
455
568
|
] });
|
|
456
569
|
}
|
|
457
570
|
|
|
458
571
|
// src/FeatureSection.jsx
|
|
459
|
-
var
|
|
572
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
460
573
|
var asItem = (x) => typeof x === "string" ? { title: x } : x;
|
|
461
574
|
function Items({ items, kind }) {
|
|
462
|
-
return /* @__PURE__ */ (0,
|
|
463
|
-
f.icon ? /* @__PURE__ */ (0,
|
|
464
|
-
/* @__PURE__ */ (0,
|
|
465
|
-
f.label ? /* @__PURE__ */ (0,
|
|
466
|
-
/* @__PURE__ */ (0,
|
|
467
|
-
f.body ? /* @__PURE__ */ (0,
|
|
575
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { className: `dt-lp-grid dt-lp-grid--${kind}`, children: items.map(asItem).map((f) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("li", { className: `dt-lp-card dt-lp-card--${kind}`, children: [
|
|
576
|
+
f.icon ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "dt-lp-icon-tile", children: renderIcon(f.icon, 20) }) : null,
|
|
577
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "dt-lp-card-text", children: [
|
|
578
|
+
f.label ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "dt-lp-kicker", children: f.label }) : null,
|
|
579
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "dt-lp-h3", children: f.href ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SmartLink, { href: f.href, children: f.title }) : f.title }),
|
|
580
|
+
f.body ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: f.body }) : null
|
|
468
581
|
] })
|
|
469
582
|
] }, f.title)) });
|
|
470
583
|
}
|
|
471
584
|
function Checklist({ items, icon: Icon = Check, tone = "good", labelledBy }) {
|
|
472
|
-
return /* @__PURE__ */ (0,
|
|
473
|
-
/* @__PURE__ */ (0,
|
|
474
|
-
/* @__PURE__ */ (0,
|
|
585
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { className: `dt-lp-checklist dt-lp-checklist--${tone}`, "aria-labelledby": labelledBy, children: items.map((x) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("li", { children: [
|
|
586
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { size: 18 }),
|
|
587
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: x })
|
|
475
588
|
] }, x)) });
|
|
476
589
|
}
|
|
477
590
|
function InlineItems({ items }) {
|
|
478
591
|
if (!(items == null ? void 0 : items.length)) return null;
|
|
479
|
-
return /* @__PURE__ */ (0,
|
|
592
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { className: "dt-lp-inline-items", children: items.map(asItem).map((f) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("li", { children: [
|
|
480
593
|
f.icon ? renderIcon(f.icon, 22) : null,
|
|
481
|
-
/* @__PURE__ */ (0,
|
|
482
|
-
/* @__PURE__ */ (0,
|
|
483
|
-
f.body ? /* @__PURE__ */ (0,
|
|
594
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
|
|
595
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "dt-lp-inline-title", children: f.title }),
|
|
596
|
+
f.body ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "dt-lp-inline-body", children: f.body }) : null
|
|
484
597
|
] })
|
|
485
598
|
] }, f.title)) });
|
|
486
599
|
}
|
|
487
600
|
function Media({ children }) {
|
|
488
|
-
return /* @__PURE__ */ (0,
|
|
601
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "dt-lp-media", children });
|
|
489
602
|
}
|
|
490
603
|
function Pair({ className, reverse, text, side }) {
|
|
491
|
-
return /* @__PURE__ */ (0,
|
|
604
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `${className}${reverse ? " dt-lp-pair--reverse" : ""}`, children: [
|
|
492
605
|
reverse ? side : text,
|
|
493
606
|
reverse ? text : side
|
|
494
607
|
] });
|
|
495
608
|
}
|
|
496
609
|
function Chips({ items, label, className = "" }) {
|
|
497
610
|
if (!(items == null ? void 0 : items.length)) return null;
|
|
498
|
-
return /* @__PURE__ */ (0,
|
|
611
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { className: `dt-lp-chips dt-lp-chips--start ${className}`.trim(), "aria-label": label, children: items.map((c) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { children: c }, c)) });
|
|
499
612
|
}
|
|
500
613
|
function FeatureSection(props) {
|
|
501
614
|
const { id, variant = "cards", tone, eyebrow, title, body, items = [], cta, footnote, media, reverse, bullets } = props;
|
|
502
615
|
const hid = `${id || variant}-title`;
|
|
503
616
|
const defaultTone = { highlight: "dark", split: "tinted", compare: "muted" }[variant] || "plain";
|
|
504
|
-
const shell = (children, extra = {}) => /* @__PURE__ */ (0,
|
|
617
|
+
const shell = (children, extra = {}) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Section, { id, labelledBy: hid, tone: tone || defaultTone, className: `dt-lp-feature dt-lp-feature--${variant}`, ...extra, children });
|
|
505
618
|
switch (variant) {
|
|
506
619
|
case "split":
|
|
507
620
|
return shell(
|
|
508
|
-
/* @__PURE__ */ (0,
|
|
621
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
509
622
|
Pair,
|
|
510
623
|
{
|
|
511
624
|
className: "dt-lp-split",
|
|
512
625
|
reverse,
|
|
513
|
-
text: /* @__PURE__ */ (0,
|
|
514
|
-
media ? /* @__PURE__ */ (0,
|
|
515
|
-
(bullets == null ? void 0 : bullets.length) ? /* @__PURE__ */ (0,
|
|
516
|
-
/* @__PURE__ */ (0,
|
|
626
|
+
text: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(SectionIntro, { id: hid, eyebrow, title, body, children: [
|
|
627
|
+
media ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(InlineItems, { items }) : null,
|
|
628
|
+
(bullets == null ? void 0 : bullets.length) ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Checklist, { items: bullets }) : null,
|
|
629
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Cta, { cta, className: "dt-lp-mt" })
|
|
517
630
|
] }, "text"),
|
|
518
|
-
side: media ? /* @__PURE__ */ (0,
|
|
631
|
+
side: media ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Media, { children: media }, "side") : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Items, { items, kind: "split" }, "side")
|
|
519
632
|
}
|
|
520
633
|
)
|
|
521
634
|
);
|
|
522
635
|
case "list":
|
|
523
636
|
return shell(
|
|
524
|
-
/* @__PURE__ */ (0,
|
|
525
|
-
/* @__PURE__ */ (0,
|
|
526
|
-
/* @__PURE__ */ (0,
|
|
527
|
-
/* @__PURE__ */ (0,
|
|
637
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
|
|
638
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SectionIntro, { id: hid, eyebrow, title, body, align: "center" }),
|
|
639
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Items, { items, kind: "list" }),
|
|
640
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Cta, { cta, className: "dt-lp-mt" })
|
|
528
641
|
] })
|
|
529
642
|
);
|
|
530
643
|
case "intro": {
|
|
531
644
|
const { subtitle, detail, note, glance = [], glanceTitle = "At a glance", link } = props;
|
|
532
645
|
return shell(
|
|
533
|
-
/* @__PURE__ */ (0,
|
|
534
|
-
/* @__PURE__ */ (0,
|
|
535
|
-
/* @__PURE__ */ (0,
|
|
536
|
-
subtitle ? /* @__PURE__ */ (0,
|
|
537
|
-
detail ? /* @__PURE__ */ (0,
|
|
538
|
-
note ? /* @__PURE__ */ (0,
|
|
539
|
-
/* @__PURE__ */ (0,
|
|
646
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "dt-lp-intro-grid", children: [
|
|
647
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
|
|
648
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SectionIntro, { id: hid, eyebrow, title, body }),
|
|
649
|
+
subtitle ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "dt-lp-h3 dt-lp-h3--lg", children: subtitle }) : null,
|
|
650
|
+
detail ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "dt-lp-body", children: detail }) : null,
|
|
651
|
+
note ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "dt-lp-note", children: note }) : null,
|
|
652
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Cta, { cta, className: "dt-lp-mt" })
|
|
540
653
|
] }),
|
|
541
|
-
glance.length ? /* @__PURE__ */ (0,
|
|
542
|
-
/* @__PURE__ */ (0,
|
|
543
|
-
/* @__PURE__ */ (0,
|
|
544
|
-
props.glanceNote ? /* @__PURE__ */ (0,
|
|
545
|
-
link ? /* @__PURE__ */ (0,
|
|
654
|
+
glance.length ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("aside", { className: "dt-lp-glance", "aria-labelledby": `${hid}-glance`, children: [
|
|
655
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { id: `${hid}-glance`, className: "dt-lp-eyebrow", children: glanceTitle }),
|
|
656
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Checklist, { items: glance }),
|
|
657
|
+
props.glanceNote ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "dt-lp-note", children: props.glanceNote }) : null,
|
|
658
|
+
link ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TextLink, { href: link.href, className: "dt-lp-mt", children: link.label }) : null
|
|
546
659
|
] }) : null
|
|
547
660
|
] })
|
|
548
661
|
);
|
|
549
662
|
}
|
|
550
663
|
case "highlight": {
|
|
551
664
|
const { note, noteLabel = "Important:" } = props;
|
|
552
|
-
const text = /* @__PURE__ */ (0,
|
|
553
|
-
/* @__PURE__ */ (0,
|
|
554
|
-
/* @__PURE__ */ (0,
|
|
555
|
-
body ? /* @__PURE__ */ (0,
|
|
556
|
-
note ? /* @__PURE__ */ (0,
|
|
557
|
-
/* @__PURE__ */ (0,
|
|
558
|
-
/* @__PURE__ */ (0,
|
|
559
|
-
/* @__PURE__ */ (0,
|
|
665
|
+
const text = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "dt-lp-intro", children: [
|
|
666
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Eyebrow, { children: eyebrow }),
|
|
667
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { id: hid, className: "dt-lp-h2", children: title }),
|
|
668
|
+
body ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "dt-lp-lead", children: body }) : null,
|
|
669
|
+
note ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { className: "dt-lp-callout", children: [
|
|
670
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Alert, { size: 20 }),
|
|
671
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
|
|
672
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("strong", { children: noteLabel }),
|
|
560
673
|
" ",
|
|
561
674
|
note
|
|
562
675
|
] })
|
|
563
676
|
] }) : null,
|
|
564
|
-
media ? /* @__PURE__ */ (0,
|
|
565
|
-
/* @__PURE__ */ (0,
|
|
677
|
+
media ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(InlineItems, { items }) : null,
|
|
678
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Cta, { cta, className: "dt-lp-mt" })
|
|
566
679
|
] }, "text");
|
|
567
|
-
const side = media ? /* @__PURE__ */ (0,
|
|
680
|
+
const side = media ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Media, { children: media }, "side") : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { className: "dt-lp-grid dt-lp-grid--chips", children: items.map(asItem).map((f) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("li", { className: "dt-lp-chip-card", children: [
|
|
568
681
|
renderIcon(f.icon, 22),
|
|
569
|
-
/* @__PURE__ */ (0,
|
|
682
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: f.title })
|
|
570
683
|
] }, f.title)) }, "side");
|
|
571
|
-
return shell(/* @__PURE__ */ (0,
|
|
684
|
+
return shell(/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Pair, { className: "dt-lp-split dt-lp-split--wide", reverse, text, side }));
|
|
572
685
|
}
|
|
573
686
|
case "band": {
|
|
574
687
|
const { examples, examplesLabel = "Examples" } = props;
|
|
575
|
-
const text = /* @__PURE__ */ (0,
|
|
576
|
-
/* @__PURE__ */ (0,
|
|
577
|
-
/* @__PURE__ */ (0,
|
|
578
|
-
media ? /* @__PURE__ */ (0,
|
|
579
|
-
/* @__PURE__ */ (0,
|
|
688
|
+
const text = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
|
|
689
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SectionIntro, { id: hid, eyebrow, title, body }),
|
|
690
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Chips, { items: examples, label: examplesLabel, className: "dt-lp-mt" }),
|
|
691
|
+
media ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(InlineItems, { items }) : null,
|
|
692
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Cta, { cta, className: "dt-lp-mt" })
|
|
580
693
|
] }, "text");
|
|
581
|
-
const side = media ? /* @__PURE__ */ (0,
|
|
694
|
+
const side = media ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Media, { children: media }, "side") : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { className: "dt-lp-band-list", children: items.map(asItem).map((f) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("li", { children: [
|
|
582
695
|
renderIcon(f.icon, 22),
|
|
583
|
-
/* @__PURE__ */ (0,
|
|
696
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: f.title })
|
|
584
697
|
] }, f.title)) }, "side");
|
|
585
|
-
return shell(/* @__PURE__ */ (0,
|
|
698
|
+
return shell(/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Pair, { className: "dt-lp-band", reverse, text, side }));
|
|
586
699
|
}
|
|
587
700
|
case "compare": {
|
|
588
701
|
const { columns = [] } = props;
|
|
589
702
|
return shell(
|
|
590
|
-
/* @__PURE__ */ (0,
|
|
591
|
-
/* @__PURE__ */ (0,
|
|
592
|
-
/* @__PURE__ */ (0,
|
|
703
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
|
|
704
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SectionIntro, { id: hid, eyebrow, title, body }),
|
|
705
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "dt-lp-compare", children: columns.map((col, i) => {
|
|
593
706
|
const cid = `${id || "compare"}-${i + 1}`;
|
|
594
707
|
const tone2 = col.tone || (i === 0 ? "good" : "check");
|
|
595
|
-
return /* @__PURE__ */ (0,
|
|
596
|
-
/* @__PURE__ */ (0,
|
|
597
|
-
/* @__PURE__ */ (0,
|
|
708
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "dt-lp-card dt-lp-card--compare", children: [
|
|
709
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { id: cid, className: "dt-lp-h3 dt-lp-h3--lg", children: col.title }),
|
|
710
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Checklist, { items: col.items, tone: tone2, icon: tone2 === "good" ? Check : Help, labelledBy: cid })
|
|
598
711
|
] }, cid);
|
|
599
712
|
}) })
|
|
600
713
|
] })
|
|
@@ -602,124 +715,124 @@ function FeatureSection(props) {
|
|
|
602
715
|
}
|
|
603
716
|
case "links":
|
|
604
717
|
return shell(
|
|
605
|
-
/* @__PURE__ */ (0,
|
|
606
|
-
/* @__PURE__ */ (0,
|
|
607
|
-
/* @__PURE__ */ (0,
|
|
608
|
-
/* @__PURE__ */ (0,
|
|
718
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
|
|
719
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SectionIntro, { id: hid, eyebrow, title, body }),
|
|
720
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { className: "dt-lp-grid dt-lp-grid--links", children: items.map((s) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(SmartLink, { href: s.href, className: "dt-lp-linkcard", children: [
|
|
721
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "dt-lp-linkcard-title", children: [
|
|
609
722
|
s.title,
|
|
610
723
|
" ",
|
|
611
|
-
/* @__PURE__ */ (0,
|
|
724
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ArrowRight, {})
|
|
612
725
|
] }),
|
|
613
|
-
s.body ? /* @__PURE__ */ (0,
|
|
726
|
+
s.body ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "dt-lp-linkcard-body", children: s.body }) : null
|
|
614
727
|
] }) }, s.href)) })
|
|
615
728
|
] })
|
|
616
729
|
);
|
|
617
730
|
case "detail": {
|
|
618
731
|
return shell(
|
|
619
|
-
/* @__PURE__ */ (0,
|
|
620
|
-
/* @__PURE__ */ (0,
|
|
621
|
-
/* @__PURE__ */ (0,
|
|
622
|
-
body ? /* @__PURE__ */ (0,
|
|
623
|
-
(bullets == null ? void 0 : bullets.length) ? /* @__PURE__ */ (0,
|
|
732
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "dt-lp-detail", children: [
|
|
733
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { id: hid, className: "dt-lp-h2", children: title }),
|
|
734
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
|
|
735
|
+
body ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "dt-lp-body", children: body }) : null,
|
|
736
|
+
(bullets == null ? void 0 : bullets.length) ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Checklist, { items: bullets }) : null
|
|
624
737
|
] })
|
|
625
738
|
] })
|
|
626
739
|
);
|
|
627
740
|
}
|
|
628
741
|
default:
|
|
629
742
|
return shell(
|
|
630
|
-
/* @__PURE__ */ (0,
|
|
631
|
-
/* @__PURE__ */ (0,
|
|
632
|
-
/* @__PURE__ */ (0,
|
|
633
|
-
footnote ? /* @__PURE__ */ (0,
|
|
634
|
-
/* @__PURE__ */ (0,
|
|
743
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
|
|
744
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SectionIntro, { id: hid, eyebrow, title, body }),
|
|
745
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Items, { items, kind: "cards" }),
|
|
746
|
+
footnote ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "dt-lp-footnote", children: footnote }) : null,
|
|
747
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Cta, { cta, className: "dt-lp-mt" })
|
|
635
748
|
] })
|
|
636
749
|
);
|
|
637
750
|
}
|
|
638
751
|
}
|
|
639
752
|
|
|
640
753
|
// src/Audiences.jsx
|
|
641
|
-
var
|
|
754
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
642
755
|
function Audiences({ id = "audiences", eyebrow, title, body, items = [], linkLabel = "See how it works", tone = "muted" }) {
|
|
643
756
|
const hid = `${id}-title`;
|
|
644
|
-
return /* @__PURE__ */ (0,
|
|
645
|
-
/* @__PURE__ */ (0,
|
|
646
|
-
/* @__PURE__ */ (0,
|
|
757
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Section, { id, labelledBy: hid, tone, className: "dt-lp-audiences", children: [
|
|
758
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SectionIntro, { id: hid, eyebrow, title, body, align: "center" }),
|
|
759
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `dt-lp-grid dt-lp-grid--audiences dt-lp-grid--n${Math.min(items.length, 4)}`, children: items.map((a, i) => {
|
|
647
760
|
var _a;
|
|
648
761
|
const aid = a.id || `${id}-${i + 1}`;
|
|
649
|
-
return /* @__PURE__ */ (0,
|
|
650
|
-
a.icon ? /* @__PURE__ */ (0,
|
|
651
|
-
/* @__PURE__ */ (0,
|
|
652
|
-
/* @__PURE__ */ (0,
|
|
653
|
-
a.keyword ? /* @__PURE__ */ (0,
|
|
654
|
-
/* @__PURE__ */ (0,
|
|
655
|
-
/* @__PURE__ */ (0,
|
|
762
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("article", { id: aid, "aria-labelledby": `${aid}-title`, className: "dt-lp-card dt-lp-card--audience", children: [
|
|
763
|
+
a.icon ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "dt-lp-audience-icon", children: renderIcon(a.icon, 30) }) : null,
|
|
764
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: a.media ? "dt-lp-audience-head" : void 0, children: [
|
|
765
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
|
|
766
|
+
a.keyword ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "dt-lp-kicker", children: a.keyword }) : null,
|
|
767
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { id: `${aid}-title`, className: "dt-lp-h3 dt-lp-h3--lg", children: a.title }),
|
|
768
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: a.media || a.features ? void 0 : "dt-lp-grow", children: a.body })
|
|
656
769
|
] }),
|
|
657
|
-
a.media ? /* @__PURE__ */ (0,
|
|
770
|
+
a.media ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "dt-lp-audience-media", "aria-hidden": "true", children: a.media }) : null
|
|
658
771
|
] }),
|
|
659
|
-
((_a = a.features) == null ? void 0 : _a.length) ? /* @__PURE__ */ (0,
|
|
772
|
+
((_a = a.features) == null ? void 0 : _a.length) ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ul", { className: "dt-lp-audience-features dt-lp-grow", children: a.features.map((f) => {
|
|
660
773
|
const it = typeof f === "string" ? { title: f } : f;
|
|
661
|
-
return /* @__PURE__ */ (0,
|
|
774
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { children: [
|
|
662
775
|
it.icon ? renderIcon(it.icon, 22) : null,
|
|
663
|
-
/* @__PURE__ */ (0,
|
|
776
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: it.title })
|
|
664
777
|
] }, it.title);
|
|
665
778
|
}) }) : null,
|
|
666
|
-
a.href ? /* @__PURE__ */ (0,
|
|
779
|
+
a.href ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TextLink, { href: a.href, "aria-label": `${a.keyword || a.title}: ${(a.linkLabel || linkLabel).toLowerCase()}`, children: a.linkLabel || linkLabel }) : null
|
|
667
780
|
] }, aid);
|
|
668
781
|
}) })
|
|
669
782
|
] });
|
|
670
783
|
}
|
|
671
784
|
|
|
672
785
|
// src/HowItWorks.jsx
|
|
673
|
-
var
|
|
786
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
674
787
|
function HowItWorks({ id = "how-it-works", eyebrow, title, body, steps, items, tone = "plain", cta }) {
|
|
675
788
|
const list = steps || items || [];
|
|
676
789
|
const hid = `${id}-title`;
|
|
677
|
-
return /* @__PURE__ */ (0,
|
|
678
|
-
/* @__PURE__ */ (0,
|
|
679
|
-
/* @__PURE__ */ (0,
|
|
680
|
-
/* @__PURE__ */ (0,
|
|
681
|
-
/* @__PURE__ */ (0,
|
|
682
|
-
/* @__PURE__ */ (0,
|
|
790
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Section, { id, labelledBy: hid, tone, className: "dt-lp-steps", children: [
|
|
791
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SectionIntro, { id: hid, eyebrow, title, body }),
|
|
792
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ol", { className: "dt-lp-grid dt-lp-grid--steps", children: list.map((st, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("li", { className: "dt-lp-card", children: [
|
|
793
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "dt-lp-step-num", "aria-hidden": "true", children: i + 1 }),
|
|
794
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "dt-lp-h3", children: st.name || st.title }),
|
|
795
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { children: st.text || st.body })
|
|
683
796
|
] }, st.name || st.title)) }),
|
|
684
|
-
/* @__PURE__ */ (0,
|
|
797
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Cta, { cta, className: "dt-lp-mt" })
|
|
685
798
|
] });
|
|
686
799
|
}
|
|
687
800
|
|
|
688
801
|
// src/Faq.jsx
|
|
689
|
-
var
|
|
802
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
690
803
|
function Faq({ id = "faq", eyebrow, title = "Frequently asked questions", intro, items = [], openFirst = true, tone = "muted" }) {
|
|
691
804
|
const hid = `${id}-title`;
|
|
692
|
-
return /* @__PURE__ */ (0,
|
|
693
|
-
/* @__PURE__ */ (0,
|
|
694
|
-
/* @__PURE__ */ (0,
|
|
695
|
-
/* @__PURE__ */ (0,
|
|
696
|
-
/* @__PURE__ */ (0,
|
|
697
|
-
/* @__PURE__ */ (0,
|
|
805
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Section, { id, labelledBy: hid, tone, narrow: true, className: "dt-lp-faq", children: [
|
|
806
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SectionIntro, { id: hid, eyebrow, title, body: intro, align: "center" }),
|
|
807
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "dt-lp-faq-list", children: items.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("details", { className: "dt-lp-faq-item", open: openFirst && i === 0, children: [
|
|
808
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("summary", { children: [
|
|
809
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "dt-lp-h3", children: f.q }),
|
|
810
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronRight, { size: 18, className: "dt-lp-icon dt-lp-faq-chevron" })
|
|
698
811
|
] }),
|
|
699
|
-
/* @__PURE__ */ (0,
|
|
812
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { children: f.a })
|
|
700
813
|
] }, f.q)) })
|
|
701
814
|
] });
|
|
702
815
|
}
|
|
703
816
|
|
|
704
817
|
// src/DemoCta.jsx
|
|
705
|
-
var
|
|
818
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
706
819
|
function DemoCta({ id = "demo", eyebrow, title, body, label = "Book a demo", chips, chipsLabel = "Business types", note, link }) {
|
|
707
|
-
return /* @__PURE__ */ (0,
|
|
708
|
-
eyebrow ? /* @__PURE__ */ (0,
|
|
709
|
-
/* @__PURE__ */ (0,
|
|
710
|
-
body ? /* @__PURE__ */ (0,
|
|
711
|
-
/* @__PURE__ */ (0,
|
|
712
|
-
(chips == null ? void 0 : chips.length) ? /* @__PURE__ */ (0,
|
|
713
|
-
note ? /* @__PURE__ */ (0,
|
|
714
|
-
note.title ? /* @__PURE__ */ (0,
|
|
715
|
-
note.body ? /* @__PURE__ */ (0,
|
|
820
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("section", { id, "aria-labelledby": `${id}-title`, className: "dt-lp-section dt-lp-cta", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Wrap, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "dt-lp-cta-panel", children: [
|
|
821
|
+
eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "dt-lp-eyebrow dt-lp-eyebrow--inverse", children: eyebrow }) : null,
|
|
822
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h2", { id: `${id}-title`, className: "dt-lp-h2 dt-lp-h2--cta", children: title }),
|
|
823
|
+
body ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "dt-lp-cta-body", children: body }) : null,
|
|
824
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BookDemoButton, { size: "lg", variant: "inverse", children: label }),
|
|
825
|
+
(chips == null ? void 0 : chips.length) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { className: "dt-lp-chips dt-lp-chips--inverse", "aria-label": chipsLabel, children: chips.map((k) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { children: k }, k)) }) : null,
|
|
826
|
+
note ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "dt-lp-cta-note", children: [
|
|
827
|
+
note.title ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "dt-lp-h3", children: note.title }) : null,
|
|
828
|
+
note.body ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { children: note.body }) : null
|
|
716
829
|
] }) : null,
|
|
717
|
-
link ? /* @__PURE__ */ (0,
|
|
830
|
+
link ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "dt-lp-cta-link", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SmartLink, { href: link.href, reload: link.reload, children: link.label }) }) : null
|
|
718
831
|
] }) }) });
|
|
719
832
|
}
|
|
720
833
|
|
|
721
834
|
// src/LandingPage.jsx
|
|
722
|
-
var
|
|
835
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
723
836
|
var BLOCKS = { audiences: Audiences, steps: HowItWorks, faq: Faq, cta: DemoCta };
|
|
724
837
|
var TAIL = ["audiences", "steps", "faq", "cta"];
|
|
725
838
|
function LandingPage({ brand, content, preview = null, slots = {}, linkComponent, onBookDemo, home = true, className }) {
|
|
@@ -732,23 +845,23 @@ function LandingPage({ brand, content, preview = null, slots = {}, linkComponent
|
|
|
732
845
|
const render = (s, i) => {
|
|
733
846
|
var _a;
|
|
734
847
|
if (!s) return null;
|
|
735
|
-
if ((0,
|
|
736
|
-
if (s.use === "preview") return preview ? /* @__PURE__ */ (0,
|
|
848
|
+
if ((0, import_react7.isValidElement)(s)) return (0, import_react7.cloneElement)(s, { key: (_a = s.key) != null ? _a : `el-${i}` });
|
|
849
|
+
if (s.use === "preview") return preview ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: preview }, "preview") : null;
|
|
737
850
|
if (s.use) {
|
|
738
851
|
if (slots && Object.prototype.hasOwnProperty.call(slots, s.use)) {
|
|
739
852
|
const node = slots[s.use];
|
|
740
|
-
return node ? /* @__PURE__ */ (0,
|
|
853
|
+
return node ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react7.Fragment, { children: node }, `slot-${s.use}`) : null;
|
|
741
854
|
}
|
|
742
855
|
const Block = BLOCKS[s.use];
|
|
743
856
|
if (!Block) {
|
|
744
857
|
const known = ["preview", ...TAIL, ...Object.keys(slots || {})].join(", ");
|
|
745
858
|
throw new Error(`landing-kit: unknown section use "${s.use}" (known: ${known}). Pass custom sections as <LandingPage slots={{ ${s.use}: <YourSection /> }} />.`);
|
|
746
859
|
}
|
|
747
|
-
return content[s.use] ? /* @__PURE__ */ (0,
|
|
860
|
+
return content[s.use] ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Block, { ...content[s.use] }, s.use) : null;
|
|
748
861
|
}
|
|
749
|
-
return /* @__PURE__ */ (0,
|
|
862
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FeatureSection, { ...s }, s.id || `section-${i}`);
|
|
750
863
|
};
|
|
751
|
-
return /* @__PURE__ */ (0,
|
|
864
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
752
865
|
MarketingLayout,
|
|
753
866
|
{
|
|
754
867
|
brand,
|
|
@@ -761,12 +874,12 @@ function LandingPage({ brand, content, preview = null, slots = {}, linkComponent
|
|
|
761
874
|
onBookDemo,
|
|
762
875
|
className,
|
|
763
876
|
children: [
|
|
764
|
-
/* @__PURE__ */ (0,
|
|
877
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Hero, { ...hero, overlap: !!preview && !previewInline }),
|
|
765
878
|
preview && !previewInline ? preview : null,
|
|
766
879
|
sections.map(render),
|
|
767
880
|
TAIL.filter((k) => !used.has(k) && content[k]).map((k) => {
|
|
768
881
|
const Block = BLOCKS[k];
|
|
769
|
-
return /* @__PURE__ */ (0,
|
|
882
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Block, { ...content[k] }, k);
|
|
770
883
|
})
|
|
771
884
|
]
|
|
772
885
|
}
|
|
@@ -774,7 +887,7 @@ function LandingPage({ brand, content, preview = null, slots = {}, linkComponent
|
|
|
774
887
|
}
|
|
775
888
|
|
|
776
889
|
// src/PreviewFrame.jsx
|
|
777
|
-
var
|
|
890
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
778
891
|
function PreviewFrame({
|
|
779
892
|
id = "product",
|
|
780
893
|
heading,
|
|
@@ -786,25 +899,25 @@ function PreviewFrame({
|
|
|
786
899
|
}) {
|
|
787
900
|
const ctx = useLanding();
|
|
788
901
|
const brand = own || ctx.brand;
|
|
789
|
-
return /* @__PURE__ */ (0,
|
|
790
|
-
/* @__PURE__ */ (0,
|
|
791
|
-
/* @__PURE__ */ (0,
|
|
792
|
-
/* @__PURE__ */ (0,
|
|
793
|
-
/* @__PURE__ */ (0,
|
|
794
|
-
brand ? /* @__PURE__ */ (0,
|
|
795
|
-
meta ? /* @__PURE__ */ (0,
|
|
902
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("section", { id, "aria-labelledby": `${id}-title`, className: "dt-lp-preview", children: [
|
|
903
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h2", { id: `${id}-title`, className: "dt-lp-sr-only", children: heading || `${brand ? brand.name : "Product"} overview` }),
|
|
904
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Wrap, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("figure", { className: "dt-lp-preview-frame", children: [
|
|
905
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "dt-lp-preview-bar", children: [
|
|
906
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "dt-lp-preview-title", children: [
|
|
907
|
+
brand ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Wordmark, { name: brand.name }) : null,
|
|
908
|
+
meta ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "dt-lp-preview-meta", children: meta }) : null
|
|
796
909
|
] }),
|
|
797
|
-
badge ? /* @__PURE__ */ (0,
|
|
910
|
+
badge ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "dt-lp-preview-badge", children: badge }) : null
|
|
798
911
|
] }),
|
|
799
|
-
/* @__PURE__ */ (0,
|
|
800
|
-
caption ? /* @__PURE__ */ (0,
|
|
912
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dt-lp-preview-body", children }),
|
|
913
|
+
caption ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("figcaption", { className: "dt-lp-sr-only", children: caption }) : null
|
|
801
914
|
] }) })
|
|
802
915
|
] });
|
|
803
916
|
}
|
|
804
917
|
|
|
805
918
|
// src/DemoDialog.jsx
|
|
806
|
-
var
|
|
807
|
-
var
|
|
919
|
+
var import_react8 = require("react");
|
|
920
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
808
921
|
var DEFAULT_DEMO_FIELDS = [
|
|
809
922
|
{ name: "name", label: "Your name", required: true, maxLength: 120, autoComplete: "name" },
|
|
810
923
|
{ name: "phone", label: "Mobile", type: "tel", required: true, maxLength: 20, autoComplete: "tel", inputMode: "tel" },
|
|
@@ -826,14 +939,14 @@ function Field({ f, value, onChange, error }) {
|
|
|
826
939
|
};
|
|
827
940
|
let control;
|
|
828
941
|
if (f.type === "select") {
|
|
829
|
-
control = /* @__PURE__ */ (0,
|
|
830
|
-
/* @__PURE__ */ (0,
|
|
831
|
-
(f.options || []).map((o) => /* @__PURE__ */ (0,
|
|
942
|
+
control = /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("select", { ...common, children: [
|
|
943
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: "", children: f.placeholder || "Choose one" }),
|
|
944
|
+
(f.options || []).map((o) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: o.value, children: o.label }, o.value))
|
|
832
945
|
] });
|
|
833
946
|
} else if (f.type === "textarea") {
|
|
834
|
-
control = /* @__PURE__ */ (0,
|
|
947
|
+
control = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("textarea", { ...common, rows: f.rows || 3, maxLength: f.maxLength });
|
|
835
948
|
} else {
|
|
836
|
-
control = /* @__PURE__ */ (0,
|
|
949
|
+
control = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
837
950
|
"input",
|
|
838
951
|
{
|
|
839
952
|
...common,
|
|
@@ -846,13 +959,13 @@ function Field({ f, value, onChange, error }) {
|
|
|
846
959
|
}
|
|
847
960
|
);
|
|
848
961
|
}
|
|
849
|
-
return /* @__PURE__ */ (0,
|
|
850
|
-
/* @__PURE__ */ (0,
|
|
962
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { htmlFor: id, className: `dt-lp-field${f.wide || f.type === "textarea" ? " dt-lp-field--wide" : ""}`, children: [
|
|
963
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { children: [
|
|
851
964
|
f.label,
|
|
852
965
|
f.required ? " *" : ""
|
|
853
966
|
] }),
|
|
854
967
|
control,
|
|
855
|
-
error ? /* @__PURE__ */ (0,
|
|
968
|
+
error ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { id: errId, className: "dt-lp-field-error", children: error }) : null
|
|
856
969
|
] });
|
|
857
970
|
}
|
|
858
971
|
function DemoDialog({
|
|
@@ -872,16 +985,16 @@ function DemoDialog({
|
|
|
872
985
|
successMessage,
|
|
873
986
|
validate
|
|
874
987
|
}) {
|
|
875
|
-
const ref = (0,
|
|
876
|
-
const [form, setForm] = (0,
|
|
877
|
-
const [website, setWebsite] = (0,
|
|
878
|
-
const [consent, setConsent] = (0,
|
|
879
|
-
const [busy, setBusy] = (0,
|
|
880
|
-
const [err, setErr] = (0,
|
|
881
|
-
const [fieldErrors, setFieldErrors] = (0,
|
|
882
|
-
const [sent, setSent] = (0,
|
|
988
|
+
const ref = (0, import_react8.useRef)(null);
|
|
989
|
+
const [form, setForm] = (0, import_react8.useState)(() => initial(fields));
|
|
990
|
+
const [website, setWebsite] = (0, import_react8.useState)("");
|
|
991
|
+
const [consent, setConsent] = (0, import_react8.useState)(false);
|
|
992
|
+
const [busy, setBusy] = (0, import_react8.useState)(false);
|
|
993
|
+
const [err, setErr] = (0, import_react8.useState)("");
|
|
994
|
+
const [fieldErrors, setFieldErrors] = (0, import_react8.useState)({});
|
|
995
|
+
const [sent, setSent] = (0, import_react8.useState)(false);
|
|
883
996
|
const name = brand ? brand.name : "a";
|
|
884
|
-
(0,
|
|
997
|
+
(0, import_react8.useEffect)(() => {
|
|
885
998
|
const dlg = ref.current;
|
|
886
999
|
if (open && dlg && !dlg.open && typeof dlg.showModal === "function") dlg.showModal();
|
|
887
1000
|
}, [open]);
|
|
@@ -916,7 +1029,7 @@ function DemoDialog({
|
|
|
916
1029
|
};
|
|
917
1030
|
const first = String(form.name || "").trim().split(/\s+/)[0] || "there";
|
|
918
1031
|
const thanks = typeof successMessage === "function" ? successMessage(form) : successMessage || `Thanks, ${first}. We have your request. Someone from the ${name} team will call you within one working day to fix a time.`;
|
|
919
|
-
return /* @__PURE__ */ (0,
|
|
1032
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
920
1033
|
"dialog",
|
|
921
1034
|
{
|
|
922
1035
|
ref,
|
|
@@ -929,33 +1042,33 @@ function DemoDialog({
|
|
|
929
1042
|
onClose();
|
|
930
1043
|
},
|
|
931
1044
|
children: [
|
|
932
|
-
/* @__PURE__ */ (0,
|
|
933
|
-
/* @__PURE__ */ (0,
|
|
934
|
-
/* @__PURE__ */ (0,
|
|
1045
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "dt-lp-dialog-head", children: [
|
|
1046
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { id: "dt-demo-title", children: sent ? "Thank you" : title || `Book a ${name} demo` }),
|
|
1047
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", className: "dt-lp-dialog-x", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Close, { size: 18 }) })
|
|
935
1048
|
] }),
|
|
936
|
-
/* @__PURE__ */ (0,
|
|
937
|
-
/* @__PURE__ */ (0,
|
|
938
|
-
/* @__PURE__ */ (0,
|
|
939
|
-
] }) : /* @__PURE__ */ (0,
|
|
940
|
-
intro ? /* @__PURE__ */ (0,
|
|
941
|
-
err ? /* @__PURE__ */ (0,
|
|
942
|
-
/* @__PURE__ */ (0,
|
|
943
|
-
/* @__PURE__ */ (0,
|
|
1049
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "dt-lp-dialog-body", children: sent ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "dt-lp-stack", children: [
|
|
1050
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { role: "status", children: thanks }),
|
|
1051
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", className: "dt-lp-btn dt-lp-btn--outline dt-lp-btn--md", onClick: onClose, children: "Close" })
|
|
1052
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("form", { className: "dt-lp-stack", onSubmit: submit, noValidate: true, children: [
|
|
1053
|
+
intro ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "dt-lp-muted", children: intro }) : null,
|
|
1054
|
+
err ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { role: "alert", className: "dt-lp-error", children: err }) : null,
|
|
1055
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "dt-lp-fields", children: fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Field, { f, value: form[f.name], onChange: set(f.name), error: fieldErrors[f.name] }, f.name)) }),
|
|
1056
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { "aria-hidden": "true", className: "dt-lp-honeypot", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { children: [
|
|
944
1057
|
"Website",
|
|
945
|
-
/* @__PURE__ */ (0,
|
|
1058
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("input", { type: "text", name: "website", tabIndex: -1, autoComplete: "off", value: website, onChange: (e) => setWebsite(e.target.value) })
|
|
946
1059
|
] }) }),
|
|
947
|
-
/* @__PURE__ */ (0,
|
|
948
|
-
/* @__PURE__ */ (0,
|
|
949
|
-
/* @__PURE__ */ (0,
|
|
1060
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "dt-lp-consent", children: [
|
|
1061
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("input", { type: "checkbox", checked: consent, onChange: (e) => setConsent(e.target.checked) }),
|
|
1062
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: consentText || `I agree that ${fiduciary} may call, message or email me about this demo.` })
|
|
950
1063
|
] }),
|
|
951
|
-
privacyHref ? /* @__PURE__ */ (0,
|
|
1064
|
+
privacyHref ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("p", { className: "dt-lp-fineprint", children: [
|
|
952
1065
|
"Used only to arrange your demo. See the ",
|
|
953
|
-
/* @__PURE__ */ (0,
|
|
1066
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("a", { href: privacyHref, children: "privacy policy" }),
|
|
954
1067
|
policyVersion ? ` (v${policyVersion})` : "",
|
|
955
1068
|
"."
|
|
956
1069
|
] }) : null,
|
|
957
|
-
/* @__PURE__ */ (0,
|
|
958
|
-
/* @__PURE__ */ (0,
|
|
1070
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("button", { type: "submit", className: "dt-lp-btn dt-lp-btn--primary dt-lp-btn--md", disabled: !ready || busy, "aria-busy": busy ? "true" : void 0, children: [
|
|
1071
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Calendar, { size: 16 }),
|
|
959
1072
|
busy ? "Sending\u2026" : submitLabel
|
|
960
1073
|
] })
|
|
961
1074
|
] }) })
|
|
@@ -965,33 +1078,33 @@ function DemoDialog({
|
|
|
965
1078
|
}
|
|
966
1079
|
|
|
967
1080
|
// src/PageHero.jsx
|
|
968
|
-
var
|
|
1081
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
969
1082
|
function Breadcrumbs({ items = [] }) {
|
|
970
1083
|
if (!items.length) return null;
|
|
971
|
-
return /* @__PURE__ */ (0,
|
|
1084
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("nav", { "aria-label": "Breadcrumb", className: "dt-lp-crumbs", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ol", { children: items.map((c, i) => {
|
|
972
1085
|
const last = i === items.length - 1;
|
|
973
|
-
return /* @__PURE__ */ (0,
|
|
974
|
-
i > 0 ? /* @__PURE__ */ (0,
|
|
975
|
-
last || !c.href ? /* @__PURE__ */ (0,
|
|
1086
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("li", { children: [
|
|
1087
|
+
i > 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronRight, { size: 14 }) : null,
|
|
1088
|
+
last || !c.href ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { "aria-current": last ? "page" : void 0, children: c.label }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SmartLink, { href: c.href, children: c.label })
|
|
976
1089
|
] }, `${c.label}-${i}`);
|
|
977
1090
|
}) }) });
|
|
978
1091
|
}
|
|
979
1092
|
function PageHero({ breadcrumbs, eyebrow, title, lead, cta = "Book a demo", secondary }) {
|
|
980
|
-
return /* @__PURE__ */ (0,
|
|
981
|
-
/* @__PURE__ */ (0,
|
|
982
|
-
/* @__PURE__ */ (0,
|
|
983
|
-
/* @__PURE__ */ (0,
|
|
984
|
-
lead ? /* @__PURE__ */ (0,
|
|
985
|
-
/* @__PURE__ */ (0,
|
|
986
|
-
cta ? /* @__PURE__ */ (0,
|
|
987
|
-
secondary ? /* @__PURE__ */ (0,
|
|
1093
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("section", { "aria-labelledby": "hero-title", className: "dt-lp-hero dt-lp-hero--page", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Wrap, { className: "dt-lp-hero-inner dt-lp-hero-inner--start", children: [
|
|
1094
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Breadcrumbs, { items: breadcrumbs }),
|
|
1095
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Eyebrow, { className: "dt-lp-mt-lg", children: eyebrow }),
|
|
1096
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h1", { id: "hero-title", className: "dt-lp-h1 dt-lp-h1--page", children: title }),
|
|
1097
|
+
lead ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { id: "answer", className: "dt-lp-hero-lead", children: lead }) : null,
|
|
1098
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "dt-lp-actions dt-lp-actions--start", children: [
|
|
1099
|
+
cta ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BookDemoButton, { size: "lg", children: cta }) : null,
|
|
1100
|
+
secondary ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TextLink, { href: secondary.href, children: secondary.label }) : null
|
|
988
1101
|
] })
|
|
989
1102
|
] }) });
|
|
990
1103
|
}
|
|
991
1104
|
|
|
992
1105
|
// src/island.jsx
|
|
993
1106
|
var import_client = require("react-dom/client");
|
|
994
|
-
var
|
|
1107
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
995
1108
|
function createDemoIsland(props) {
|
|
996
1109
|
let root;
|
|
997
1110
|
let returnTo = null;
|
|
@@ -1010,7 +1123,7 @@ function createDemoIsland(props) {
|
|
|
1010
1123
|
root = (0, import_client.createRoot)(host);
|
|
1011
1124
|
}
|
|
1012
1125
|
const p = typeof props === "function" ? props() : props;
|
|
1013
|
-
root.render(/* @__PURE__ */ (0,
|
|
1126
|
+
root.render(/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DemoDialog, { ...p, onClose: close }, Date.now()));
|
|
1014
1127
|
},
|
|
1015
1128
|
close
|
|
1016
1129
|
};
|
|
@@ -1131,8 +1244,39 @@ var brands = {
|
|
|
1131
1244
|
category: "by Dreamtree-Org"
|
|
1132
1245
|
}
|
|
1133
1246
|
};
|
|
1247
|
+
var warned = false;
|
|
1134
1248
|
function getBrand(id) {
|
|
1249
|
+
if (!warned && typeof console !== "undefined") {
|
|
1250
|
+
warned = true;
|
|
1251
|
+
console.warn('landing-kit: getBrand() and the built-in brands are deprecated (removed in 0.5.0). Keep your brand in dreamtree.brand.json and use toLandingBrand(require("./dreamtree.brand.json"), copy).');
|
|
1252
|
+
}
|
|
1135
1253
|
const b = brands[id];
|
|
1136
1254
|
if (!b) throw new Error(`landing-kit: unknown brand "${id}" (known: ${Object.keys(brands).join(", ")})`);
|
|
1137
1255
|
return b;
|
|
1138
1256
|
}
|
|
1257
|
+
|
|
1258
|
+
// src/brandFile.js
|
|
1259
|
+
var shellOf = (role) => {
|
|
1260
|
+
const shell = role && role.shell;
|
|
1261
|
+
return typeof shell === "string" ? shell : shell && shell.light;
|
|
1262
|
+
};
|
|
1263
|
+
function toLandingBrand(file, copy = {}) {
|
|
1264
|
+
if (!file || typeof file !== "object") throw new Error("landing-kit: toLandingBrand needs the parsed dreamtree.brand.json object.");
|
|
1265
|
+
const id = file.id || file.name;
|
|
1266
|
+
if (!id) throw new Error('landing-kit: the brand file has no "id". Run `npx @dreamtree-org/twreact-ui brand validate`.');
|
|
1267
|
+
const scale = file.color && file.color.primary || {};
|
|
1268
|
+
const marketing = file.marketing || {};
|
|
1269
|
+
const primary = marketing.primary || scale["600"] || scale["700"] || scale["500"];
|
|
1270
|
+
if (!primary) throw new Error(`landing-kit: brand "${id}" sets no primary colour (color.primary.600 or marketing.primary).`);
|
|
1271
|
+
const brand = {
|
|
1272
|
+
id,
|
|
1273
|
+
name: (file.id ? file.name : file.label) || id,
|
|
1274
|
+
primary,
|
|
1275
|
+
accent: marketing.accent || scale["300"] || void 0,
|
|
1276
|
+
panel: marketing.panel || shellOf(file.role) || void 0,
|
|
1277
|
+
logoSrc: file.logo && file.logo.mark || void 0,
|
|
1278
|
+
headline: "",
|
|
1279
|
+
...copy
|
|
1280
|
+
};
|
|
1281
|
+
return Object.fromEntries(Object.entries(brand).filter(([, v]) => v !== void 0));
|
|
1282
|
+
}
|