@commandcenterio/convert-ui 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +752 -0
- package/dist/index.d.mts +288 -0
- package/dist/index.d.ts +288 -0
- package/dist/index.js +1095 -0
- package/dist/index.mjs +1038 -0
- package/package.json +41 -0
package/dist/index.js
ADDED
@@ -0,0 +1,1095 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __create = Object.create;
|
3
|
+
var __defProp = Object.defineProperty;
|
4
|
+
var __defProps = Object.defineProperties;
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
6
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
7
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
8
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
9
|
+
var __getProtoOf = Object.getPrototypeOf;
|
10
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
11
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
12
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
13
|
+
var __spreadValues = (a, b) => {
|
14
|
+
for (var prop in b || (b = {}))
|
15
|
+
if (__hasOwnProp.call(b, prop))
|
16
|
+
__defNormalProp(a, prop, b[prop]);
|
17
|
+
if (__getOwnPropSymbols)
|
18
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
19
|
+
if (__propIsEnum.call(b, prop))
|
20
|
+
__defNormalProp(a, prop, b[prop]);
|
21
|
+
}
|
22
|
+
return a;
|
23
|
+
};
|
24
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
25
|
+
var __objRest = (source, exclude) => {
|
26
|
+
var target = {};
|
27
|
+
for (var prop in source)
|
28
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
29
|
+
target[prop] = source[prop];
|
30
|
+
if (source != null && __getOwnPropSymbols)
|
31
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
32
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
33
|
+
target[prop] = source[prop];
|
34
|
+
}
|
35
|
+
return target;
|
36
|
+
};
|
37
|
+
var __export = (target, all) => {
|
38
|
+
for (var name in all)
|
39
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
40
|
+
};
|
41
|
+
var __copyProps = (to, from, except, desc) => {
|
42
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
43
|
+
for (let key of __getOwnPropNames(from))
|
44
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
45
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
46
|
+
}
|
47
|
+
return to;
|
48
|
+
};
|
49
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
50
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
51
|
+
// file that has been converted to a CommonJS file using a Babel-
|
52
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
53
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
54
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
55
|
+
mod
|
56
|
+
));
|
57
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
58
|
+
|
59
|
+
// src/index.tsx
|
60
|
+
var src_exports = {};
|
61
|
+
__export(src_exports, {
|
62
|
+
AccordionContainer: () => AccordionContainer,
|
63
|
+
AccordionItem: () => AccordionItem,
|
64
|
+
AnimateBorder: () => AnimateBorder,
|
65
|
+
AnimatedHeader: () => AnimatedHeader,
|
66
|
+
AnimationObserver: () => AnimationObserver,
|
67
|
+
BentoBox: () => BentoBox,
|
68
|
+
BookNow: () => BookNow,
|
69
|
+
Button: () => Button,
|
70
|
+
CTA: () => CTA,
|
71
|
+
CookieConsentForm: () => CookieConsentForm,
|
72
|
+
Footer: () => Footer,
|
73
|
+
Hero: () => Hero,
|
74
|
+
Masonry: () => Masonry,
|
75
|
+
Navbar: () => Navbar,
|
76
|
+
Offer: () => Offer,
|
77
|
+
PrettyCard: () => PrettyCard,
|
78
|
+
Ratings: () => Ratings,
|
79
|
+
SectionContainer: () => SectionContainer,
|
80
|
+
SectionHeader: () => SectionHeader,
|
81
|
+
SellingPropContainer: () => SellingPropContainer,
|
82
|
+
SellingProposition: () => SellingProposition,
|
83
|
+
StackedScroller: () => StackedScroller,
|
84
|
+
TestimonialCard: () => TestimonialCard,
|
85
|
+
TestimonialDisplay: () => TestimonialDisplay
|
86
|
+
});
|
87
|
+
module.exports = __toCommonJS(src_exports);
|
88
|
+
|
89
|
+
// src/Accordion/Accordion.tsx
|
90
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
91
|
+
var AccordionContainer = ({ children }) => {
|
92
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "join join-vertical w-full", children });
|
93
|
+
};
|
94
|
+
var AccordionItem = ({ title, content, isOpen = false }) => {
|
95
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "collapse collapse-arrow join-item border border-base-300 bg-dark-200 text-base-content", children: [
|
96
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "radio", name: "my-accordion-4", defaultChecked: isOpen }),
|
97
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "collapse-title text-xl font-medium", children: title }),
|
98
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "collapse-content p-0", style: { padding: "0 !important" }, children: content })
|
99
|
+
] });
|
100
|
+
};
|
101
|
+
|
102
|
+
// src/Observer/AnimationObserver.tsx
|
103
|
+
var import_react = require("react");
|
104
|
+
var import_react_intersection_observer = require("react-intersection-observer");
|
105
|
+
var AnimationObserver = function({
|
106
|
+
children,
|
107
|
+
animationClassNames,
|
108
|
+
threshold = 0.2,
|
109
|
+
defaultClassNames
|
110
|
+
}) {
|
111
|
+
const { ref, inView } = (0, import_react_intersection_observer.useInView)({
|
112
|
+
threshold
|
113
|
+
});
|
114
|
+
return (0, import_react.cloneElement)(children, {
|
115
|
+
ref,
|
116
|
+
className: `${children.props.className} ${inView ? animationClassNames : defaultClassNames}`.trim()
|
117
|
+
});
|
118
|
+
};
|
119
|
+
|
120
|
+
// src/BorderAnimation/BorderAnimation.tsx
|
121
|
+
var import_react2 = require("react");
|
122
|
+
var import_react_intersection_observer2 = require("react-intersection-observer");
|
123
|
+
var import_classnames = __toESM(require("classnames"));
|
124
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
125
|
+
var AnimateBorder = ({
|
126
|
+
elementToAnimate,
|
127
|
+
children,
|
128
|
+
speed = "5s",
|
129
|
+
hideOverflow,
|
130
|
+
iconsToAnimate,
|
131
|
+
borderRadius = "lg"
|
132
|
+
}) => {
|
133
|
+
const parentRef = (0, import_react2.useRef)(null);
|
134
|
+
const { inView, ref: viewRef } = (0, import_react_intersection_observer2.useInView)({ threshold: 0.2 });
|
135
|
+
const cloneElementWithAnimation = (element, index = 0) => {
|
136
|
+
const animationDelay = `${index * 0.5}s`;
|
137
|
+
return (0, import_react2.cloneElement)(element, {
|
138
|
+
style: __spreadProps(__spreadValues({}, element.props.style), { animationDelay }),
|
139
|
+
className: (0, import_classnames.default)({
|
140
|
+
"absolute": inView,
|
141
|
+
"hidden": !inView,
|
142
|
+
"ml-4": index !== 0,
|
143
|
+
[element.props.className]: true,
|
144
|
+
"animatedElement": true
|
145
|
+
})
|
146
|
+
});
|
147
|
+
};
|
148
|
+
const clonedAnimatedElement = elementToAnimate && cloneElementWithAnimation(elementToAnimate);
|
149
|
+
const clonedIconElements = iconsToAnimate == null ? void 0 : iconsToAnimate.map(cloneElementWithAnimation);
|
150
|
+
(0, import_react2.useEffect)(() => {
|
151
|
+
const handleResize = () => {
|
152
|
+
if (parentRef.current) {
|
153
|
+
document.documentElement.style.setProperty("--parent-width", `${parentRef.current.offsetWidth}px`);
|
154
|
+
document.documentElement.style.setProperty("--parent-height", `${parentRef.current.offsetHeight}px`);
|
155
|
+
document.documentElement.style.setProperty("--animated-speed", speed);
|
156
|
+
document.documentElement.style.setProperty("--animated-border-radius", `var(--rounded-${borderRadius})`);
|
157
|
+
}
|
158
|
+
};
|
159
|
+
handleResize();
|
160
|
+
window.addEventListener("resize", handleResize);
|
161
|
+
return () => window.removeEventListener("resize", handleResize);
|
162
|
+
}, []);
|
163
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
164
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: viewRef, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ref: viewRef, className: `relative ${hideOverflow && "overflow-hidden"}`, children: [
|
165
|
+
clonedAnimatedElement && !hideOverflow && clonedAnimatedElement,
|
166
|
+
clonedIconElements && hideOverflow && clonedIconElements,
|
167
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: parentRef, className: "flex items-center z-50 relative justify-center p-1", children })
|
168
|
+
] }) }),
|
169
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `
|
170
|
+
::root {
|
171
|
+
/* --border-radius: 0px; */
|
172
|
+
--parent-height: 0px;
|
173
|
+
--parent-width: 0px;
|
174
|
+
--animated-speed: 10s;
|
175
|
+
}
|
176
|
+
@keyframes moveAround {
|
177
|
+
from {
|
178
|
+
offset-distance: 0%;
|
179
|
+
}
|
180
|
+
to {
|
181
|
+
offset-distance: 100%;
|
182
|
+
}
|
183
|
+
}
|
184
|
+
|
185
|
+
@keyframes loop {
|
186
|
+
to {
|
187
|
+
offset-distance: 100%;
|
188
|
+
}
|
189
|
+
}
|
190
|
+
|
191
|
+
.animatedElement {
|
192
|
+
anchor-offset: 100% 50%;
|
193
|
+
position: absolute;
|
194
|
+
animation: loop var(--animated-speed) infinite linear;
|
195
|
+
offset-path: rect(0px var(--parent-width) var(--parent-height) 0px round 5%);
|
196
|
+
}
|
197
|
+
` })
|
198
|
+
] });
|
199
|
+
};
|
200
|
+
|
201
|
+
// src/AnimatedHeader/AnimatedHeader.tsx
|
202
|
+
var import_react3 = require("@gsap/react");
|
203
|
+
var import_gsap_core = require("gsap/gsap-core");
|
204
|
+
var import_all = require("gsap/all");
|
205
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
206
|
+
import_gsap_core.gsap.registerPlugin(import_all.TextPlugin, import_all.ScrollTrigger);
|
207
|
+
var AnimatedHeader = function({
|
208
|
+
textToAnimate,
|
209
|
+
textClassNames,
|
210
|
+
containerClassNames,
|
211
|
+
textAnimation,
|
212
|
+
scaleAnimation,
|
213
|
+
identifiers,
|
214
|
+
pin = false,
|
215
|
+
once = false
|
216
|
+
}) {
|
217
|
+
const modifiedId = "#" + identifiers.child;
|
218
|
+
const modifiedParentId = "#" + identifiers.parent;
|
219
|
+
(0, import_react3.useGSAP)(() => {
|
220
|
+
import_gsap_core.gsap.timeline().fromTo(
|
221
|
+
modifiedId,
|
222
|
+
{
|
223
|
+
scale: scaleAnimation.start
|
224
|
+
},
|
225
|
+
{
|
226
|
+
scale: scaleAnimation.end,
|
227
|
+
scrollTrigger: {
|
228
|
+
// markers: true,
|
229
|
+
trigger: modifiedParentId,
|
230
|
+
start: textAnimation.start,
|
231
|
+
end: textAnimation.end,
|
232
|
+
once,
|
233
|
+
scrub: 1,
|
234
|
+
pin,
|
235
|
+
pinSpacing: pin
|
236
|
+
},
|
237
|
+
text: {
|
238
|
+
value: textToAnimate,
|
239
|
+
delimiter: ""
|
240
|
+
},
|
241
|
+
ease: "linear",
|
242
|
+
duration: 1
|
243
|
+
}
|
244
|
+
);
|
245
|
+
}, []);
|
246
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
247
|
+
"div",
|
248
|
+
{
|
249
|
+
id: identifiers.parent,
|
250
|
+
className: `flex items-center justify-center ${containerClassNames} `,
|
251
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { id: identifiers.child, className: textClassNames })
|
252
|
+
}
|
253
|
+
);
|
254
|
+
};
|
255
|
+
|
256
|
+
// src/Bento/BentoBox.tsx
|
257
|
+
var import_react4 = __toESM(require("react"));
|
258
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
259
|
+
var BentoBox = ({ children, classNames: classNames2 = "" }) => {
|
260
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "@container", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `${classNames2}`, children: import_react4.default.Children.map(
|
261
|
+
children,
|
262
|
+
(child, index) => import_react4.default.isValidElement(child) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
263
|
+
"div",
|
264
|
+
{
|
265
|
+
className: child.props.className,
|
266
|
+
children: child.props.children
|
267
|
+
},
|
268
|
+
`bento-box-${index}`
|
269
|
+
) : null
|
270
|
+
) }) });
|
271
|
+
};
|
272
|
+
|
273
|
+
// src/BookNow/BookNow.tsx
|
274
|
+
var import_react5 = require("react");
|
275
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
276
|
+
var BookNow = ({
|
277
|
+
scriptPathUrl,
|
278
|
+
show,
|
279
|
+
vendor,
|
280
|
+
dataUrl,
|
281
|
+
className,
|
282
|
+
dataPath
|
283
|
+
}) => {
|
284
|
+
(0, import_react5.useEffect)(() => {
|
285
|
+
if (show) {
|
286
|
+
if (document.getElementById("calendar-script")) {
|
287
|
+
return;
|
288
|
+
}
|
289
|
+
const script = document.createElement("script");
|
290
|
+
script.id = "calendar-script";
|
291
|
+
script.src = scriptPathUrl;
|
292
|
+
script.async = true;
|
293
|
+
script.defer = true;
|
294
|
+
if (vendor === "calendly") {
|
295
|
+
script.type = "text/javascript";
|
296
|
+
}
|
297
|
+
document.body.appendChild(script);
|
298
|
+
return () => {
|
299
|
+
document.body.removeChild(script);
|
300
|
+
};
|
301
|
+
}
|
302
|
+
}, [show, scriptPathUrl, vendor]);
|
303
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
304
|
+
"div",
|
305
|
+
{
|
306
|
+
id: "book-now",
|
307
|
+
className: `w-[100%] ${className}`,
|
308
|
+
style: { display: show ? "block" : "none" },
|
309
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
310
|
+
"div",
|
311
|
+
{
|
312
|
+
className: `${vendor === "tidycal" && "tidycal-embed"} ${vendor === "calendly" && "calendly-inline-widget h-[700px] min-w-[320px]"}`,
|
313
|
+
"data-path": dataPath,
|
314
|
+
"data-url": dataUrl
|
315
|
+
}
|
316
|
+
)
|
317
|
+
}
|
318
|
+
);
|
319
|
+
};
|
320
|
+
|
321
|
+
// src/CookieConsentForm/cookieformstyles.module.css
|
322
|
+
var cookieformstyles_default = {};
|
323
|
+
|
324
|
+
// src/CookieConsentForm/CookieConsentForm.tsx
|
325
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
326
|
+
var CookieConsentForm = function({
|
327
|
+
positionX,
|
328
|
+
positionY,
|
329
|
+
cookieHeader = "We value your privacy",
|
330
|
+
cookieText,
|
331
|
+
onAccept,
|
332
|
+
onReject,
|
333
|
+
show,
|
334
|
+
classNames: classNames2,
|
335
|
+
type = "fixed"
|
336
|
+
}) {
|
337
|
+
const handleSelection = (permission) => {
|
338
|
+
if (permission) {
|
339
|
+
onAccept();
|
340
|
+
} else {
|
341
|
+
onReject();
|
342
|
+
}
|
343
|
+
};
|
344
|
+
return show ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
345
|
+
"div",
|
346
|
+
{
|
347
|
+
className: `z-[100] h-auto w-full max-w-[350px] rounded-box p-4 shadow-lg @container ${type} ${positionX} ${positionY} ${classNames2}`,
|
348
|
+
children: [
|
349
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: cookieformstyles_default.header, children: cookieHeader }),
|
350
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: cookieformstyles_default.text, children: cookieText }),
|
351
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cookieformstyles_default.button_container, children: [
|
352
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
353
|
+
"button",
|
354
|
+
{
|
355
|
+
onClick: () => handleSelection(true),
|
356
|
+
className: cookieformstyles_default.accept_button,
|
357
|
+
children: "Accept"
|
358
|
+
}
|
359
|
+
),
|
360
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
361
|
+
"button",
|
362
|
+
{
|
363
|
+
onClick: () => handleSelection(false),
|
364
|
+
className: cookieformstyles_default.reject_button,
|
365
|
+
children: "Reject"
|
366
|
+
}
|
367
|
+
)
|
368
|
+
] })
|
369
|
+
]
|
370
|
+
}
|
371
|
+
) : null;
|
372
|
+
};
|
373
|
+
|
374
|
+
// src/CTA/CTA.tsx
|
375
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
376
|
+
var CTA = function({
|
377
|
+
type = "basic",
|
378
|
+
ctaText,
|
379
|
+
onClick,
|
380
|
+
subheading,
|
381
|
+
paragraph,
|
382
|
+
smallheading,
|
383
|
+
classNames: classNames2
|
384
|
+
}) {
|
385
|
+
const basicLayoutStyles = classNames2 ? classNames2 : "bg-base-300 w-[100%] px-4 py-12 sm:px-8 sm:py-24 md:px-16 md:py-32 lg:py-32";
|
386
|
+
const renderCTALayout = () => {
|
387
|
+
switch (type) {
|
388
|
+
case "emphasized":
|
389
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {});
|
390
|
+
case "minimal":
|
391
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {});
|
392
|
+
default:
|
393
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `${basicLayoutStyles} @container`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex w-full flex-col items-center @2xl:flex-row gap-8", children: [
|
394
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex w-full flex-col items-center gap-2 @2xl:items-start", children: [
|
395
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "mb-3 text-center text-sm font-semibold uppercase tracking-[0.5px] text-secondary", children: smallheading }),
|
396
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { className: "mb-4 text-center text-3xl font-semibold @2xl:text-start", children: subheading }),
|
397
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "mb-4 text-center opacity-60 @2xl:text-start", children: paragraph })
|
398
|
+
] }),
|
399
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "relative z-50 flex flex-col min-w-[15vw] items-center @2xl:items-end", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { onClick, className: "btn btn-primary w-full transform duration-300 hover:scale-[0.95] @xl:w-auto", children: ctaText }) })
|
400
|
+
] }) });
|
401
|
+
}
|
402
|
+
};
|
403
|
+
return renderCTALayout();
|
404
|
+
};
|
405
|
+
|
406
|
+
// src/Footer/Footer.tsx
|
407
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
408
|
+
var Footer = function({
|
409
|
+
links,
|
410
|
+
logo,
|
411
|
+
logoText,
|
412
|
+
newsletter,
|
413
|
+
socialLinks,
|
414
|
+
maxLogoHeight,
|
415
|
+
leftElement,
|
416
|
+
openingHours
|
417
|
+
}) {
|
418
|
+
const logoHeight = maxLogoHeight ? maxLogoHeight : "50px";
|
419
|
+
const logoHeightStyle = {
|
420
|
+
"--footer-logo-height": logoHeight
|
421
|
+
};
|
422
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "h-full w-full @container", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("footer", { className: "footer flex w-full flex-col items-center justify-center gap-10 bg-base-200 p-10 text-base-content @xl:flex-row @xl:items-start", children: [
|
423
|
+
leftElement ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("aside", { className: "flex flex-col items-center justify-center gap-4 mt-auto px-8 border-b-[1px] pb-4 border-base-100 md:border-r-[1px] md:border-b-0 md:pb-0 md:mt-0", children: leftElement }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("aside", { className: "flex flex-col items-center justify-center gap-4 mt-auto px-8 border-b-[1px] pb-4 border-base-100 md:border-r-[1px] md:border-b-0 md:pb-0 md:mt-0", children: [
|
424
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: logoHeightStyle, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: logo || "", alt: "Company Logo", className: "h-[var(--footer-logo-height)]" }) }),
|
425
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: logoText })
|
426
|
+
] }),
|
427
|
+
links == null ? void 0 : links.map((item, index) => {
|
428
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("nav", { children: [
|
429
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("header", { className: "footer-title mx-auto @xl:mx-0", children: item.header }),
|
430
|
+
item.links.map((link, index2) => {
|
431
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
432
|
+
"a",
|
433
|
+
{
|
434
|
+
className: "link-hover link mx-auto @xl:mx-0",
|
435
|
+
href: link.url,
|
436
|
+
children: link.text
|
437
|
+
},
|
438
|
+
index2
|
439
|
+
);
|
440
|
+
})
|
441
|
+
] }, index);
|
442
|
+
}),
|
443
|
+
socialLinks && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("nav", { children: [
|
444
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("header", { className: "footer-title mx-auto @xl:mx-0", children: "Social" }),
|
445
|
+
socialLinks == null ? void 0 : socialLinks.map((link, index) => {
|
446
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
447
|
+
"a",
|
448
|
+
{
|
449
|
+
href: link.url,
|
450
|
+
className: "link-hover link mx-auto @xl:mx-0",
|
451
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(link.icon, { className: "text-base-content", size: 30 })
|
452
|
+
},
|
453
|
+
index
|
454
|
+
);
|
455
|
+
})
|
456
|
+
] }),
|
457
|
+
openingHours && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-2 w-fit", children: [
|
458
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("header", { className: "footer-title mx-auto @xl:mx-0", children: openingHours.header }),
|
459
|
+
openingHours.hours.map(({ day, openingTime }, index, arr) => {
|
460
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center w-[200px] justify-between", children: [
|
461
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "inline-block w-fit", children: day }),
|
462
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
463
|
+
"p",
|
464
|
+
{
|
465
|
+
className: `inline-block w-fit ${openingTime === "Closed" && "font-semibold"}`,
|
466
|
+
children: openingTime
|
467
|
+
}
|
468
|
+
)
|
469
|
+
] }, index);
|
470
|
+
})
|
471
|
+
] })
|
472
|
+
] }) });
|
473
|
+
};
|
474
|
+
|
475
|
+
// src/Hero/Hero.tsx
|
476
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
477
|
+
var Hero = function({
|
478
|
+
styleType,
|
479
|
+
headline,
|
480
|
+
subheadline,
|
481
|
+
children,
|
482
|
+
imageSrc,
|
483
|
+
classNames: classNames2 = "h-screen",
|
484
|
+
imageAlt = "",
|
485
|
+
imageOverlayOpacity = 0.7
|
486
|
+
}) {
|
487
|
+
const backgroundImageStyle = styleType === "Image" && imageSrc ? { backgroundImage: `url(${imageSrc})` } : {};
|
488
|
+
const overlayOpacityStyle = styleType === "Image" ? { opacity: imageOverlayOpacity } : {};
|
489
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
490
|
+
"div",
|
491
|
+
{
|
492
|
+
style: backgroundImageStyle,
|
493
|
+
className: `${classNames2} hero relative w-full overflow-hidden @container`,
|
494
|
+
"aria-label": styleType === "Image" ? imageAlt : void 0,
|
495
|
+
children: [
|
496
|
+
styleType === "Image" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: overlayOpacityStyle, className: "hero-overlay absolute left-0 top-0 z-0 h-[100%] w-[100%] bg-base-100" }),
|
497
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "hero-content flex h-auto pt-48 max-w-3xl flex-col gap-4 text-center md:gap-6", children: [
|
498
|
+
headline && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h1", { className: "text-4xl font-bold md:text-5xl lg:text-6xl xl:text-7xl", children: headline }),
|
499
|
+
subheadline && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "mb-8 mt-6 text-base sm:text-lg", children: subheadline }),
|
500
|
+
children
|
501
|
+
] })
|
502
|
+
]
|
503
|
+
}
|
504
|
+
);
|
505
|
+
};
|
506
|
+
|
507
|
+
// src/Masonry/Masonry.tsx
|
508
|
+
var import_react6 = __toESM(require("react"));
|
509
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
510
|
+
var Masonry = ({
|
511
|
+
children,
|
512
|
+
classNames: classNames2 = "mx-auto w-full columns-1 space-y-4 p-4 @2xl:columns-2 @3xl:columns-3 @4xl:w-[90%] @5xl:w-[85%]",
|
513
|
+
itemMaxWidth = "max-w-[425px]"
|
514
|
+
}) => {
|
515
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-full w-full @container", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `${classNames2}`, children: import_react6.default.Children.map(
|
516
|
+
children,
|
517
|
+
(child, index) => import_react6.default.isValidElement(child) ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
518
|
+
"div",
|
519
|
+
{
|
520
|
+
className: `${child.props.className} mx-auto ${itemMaxWidth}`,
|
521
|
+
children: child.props.children
|
522
|
+
},
|
523
|
+
index
|
524
|
+
) : null
|
525
|
+
) }) });
|
526
|
+
};
|
527
|
+
|
528
|
+
// src/Navbar/Navbar.tsx
|
529
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
530
|
+
var Navbar = function({
|
531
|
+
logo,
|
532
|
+
links,
|
533
|
+
type = "default",
|
534
|
+
ctaElement,
|
535
|
+
classNames: classNames2,
|
536
|
+
maxLogoHeight,
|
537
|
+
children
|
538
|
+
}) {
|
539
|
+
const renderMenuItem = () => {
|
540
|
+
return links.map((link, idx) => {
|
541
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("a", { href: link.link, className: "btn btn-sm btn-ghost", children: link.text }, idx);
|
542
|
+
});
|
543
|
+
};
|
544
|
+
const roundedClassNames = type === "rounded" ? "navbar mx-auto flex max-w-[95%] items-center justify-between rounded-full bg-base-200 px-4 py-2 shadow-sm @xl:max-w-[90%] @2xl:max-w-[85%] @3xl:max-w-[80%] @4xl:max-w-[75%]" : null;
|
545
|
+
const fullClassNames = type === "full" ? "flex w-[100%] items-center justify-between bg-base-200 px-4 py-2" : null;
|
546
|
+
const defaultClassNames = type === "default" ? "navbar mx-auto flex w-full items-center justify-between rounded-box px-4 py-2 shadow-sm" : null;
|
547
|
+
const containerClasses = roundedClassNames || fullClassNames || defaultClassNames;
|
548
|
+
const logoHeight = maxLogoHeight ? maxLogoHeight : "50px";
|
549
|
+
const logoHeightStyle = { "--logo-height": logoHeight };
|
550
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "w-full @container", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `${containerClasses} ${classNames2}`, children: [
|
551
|
+
!!children ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex flex-row justify-between items-center", children }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "h-[var(--logo-height)]", style: logoHeightStyle, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("img", { className: "h-[var(--logo-height)]", src: logo || "", alt: "logo" }) }),
|
552
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ul", { className: "menu menu-horizontal hidden items-center gap-2 px-1 @2xl:flex flex-nowrap", children: renderMenuItem() }),
|
553
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ul", { className: "menu menu-horizontal items-center gap-2 px-1 @2xl:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("details", { className: "items-start", children: [
|
554
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("summary", { children: "Navigate" }),
|
555
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex flex-col gap-2 absolute bg-base-300 rounded-box mt-2 p-4", children: renderMenuItem() })
|
556
|
+
] }) }) }),
|
557
|
+
ctaElement && ctaElement
|
558
|
+
] }) });
|
559
|
+
};
|
560
|
+
|
561
|
+
// src/Offer/Offer.tsx
|
562
|
+
var import_react7 = require("react");
|
563
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
564
|
+
var Offer = ({
|
565
|
+
offer,
|
566
|
+
offerDateEnd,
|
567
|
+
ctaText,
|
568
|
+
ctaFunctionality,
|
569
|
+
btnClassnames = "btn btn-secondary btn-sm",
|
570
|
+
fontSize = "text-3xl",
|
571
|
+
classNames: classNames2 = "p-4 bg-accent text-white"
|
572
|
+
}) => {
|
573
|
+
const [timeRemaining, setTimeRemaining] = (0, import_react7.useState)({
|
574
|
+
days: 0,
|
575
|
+
hours: 0,
|
576
|
+
minutes: 0,
|
577
|
+
seconds: 0
|
578
|
+
});
|
579
|
+
(0, import_react7.useEffect)(() => {
|
580
|
+
const intervalId = setInterval(() => updateCountdown(offerDateEnd), 1e3);
|
581
|
+
return () => clearInterval(intervalId);
|
582
|
+
}, [offerDateEnd]);
|
583
|
+
function updateCountdown(endDate) {
|
584
|
+
const now = /* @__PURE__ */ new Date();
|
585
|
+
const difference = endDate.getTime() - now.getTime();
|
586
|
+
if (difference <= 0) {
|
587
|
+
setTimeRemaining({ days: 0, hours: 0, minutes: 0, seconds: 0 });
|
588
|
+
return;
|
589
|
+
}
|
590
|
+
const seconds = Math.floor(difference / 1e3 % 60);
|
591
|
+
const minutes = Math.floor(difference / 1e3 / 60 % 60);
|
592
|
+
const hours = Math.floor(difference / (1e3 * 60 * 60) % 24);
|
593
|
+
const days = Math.floor(difference / (1e3 * 60 * 60 * 24));
|
594
|
+
setTimeRemaining({ days, hours, minutes, seconds });
|
595
|
+
}
|
596
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `w-full flex items-center justify-between ${classNames2}`, children: [
|
597
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-col flex-1 justify-center items-start", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "offer_text", children: offer }) }),
|
598
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex gap-4 items-center justify-center", children: [
|
599
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "invisible w-0 grid grid-flow-col gap-5 text-center auto-cols-max md:visible md:w-auto", children: [
|
600
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col", children: [
|
601
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `countdown font-mono text-5xl ${fontSize}`, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { "--value": timeRemaining.days } }) }),
|
602
|
+
"days"
|
603
|
+
] }),
|
604
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col", children: [
|
605
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `countdown font-mono text-5xl ${fontSize}`, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { "--value": timeRemaining.hours } }) }),
|
606
|
+
"hours"
|
607
|
+
] }),
|
608
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col", children: [
|
609
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `countdown font-mono text-5xl ${fontSize}`, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { "--value": timeRemaining.minutes } }) }),
|
610
|
+
"min"
|
611
|
+
] }),
|
612
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col", children: [
|
613
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `countdown font-mono text-5xl ${fontSize}`, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { "--value": timeRemaining.seconds } }) }),
|
614
|
+
"sec"
|
615
|
+
] })
|
616
|
+
] }),
|
617
|
+
ctaText && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { onClick: ctaFunctionality, className: btnClassnames, children: ctaText })
|
618
|
+
] })
|
619
|
+
] });
|
620
|
+
};
|
621
|
+
|
622
|
+
// src/PrettyCard/PrettyCard.tsx
|
623
|
+
var import_react8 = __toESM(require("react"));
|
624
|
+
var import_react9 = require("@gsap/react");
|
625
|
+
var import_gsap = __toESM(require("gsap"));
|
626
|
+
var import_all2 = require("gsap/all");
|
627
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
628
|
+
import_gsap.default.registerPlugin(import_all2.ScrollTrigger);
|
629
|
+
var PrettyCard = ({
|
630
|
+
buttonText,
|
631
|
+
altButtonJsx,
|
632
|
+
content,
|
633
|
+
cardImage,
|
634
|
+
children,
|
635
|
+
gradientColors,
|
636
|
+
showAnimationOnce = false,
|
637
|
+
className = "relative bg-base-300/40 z-10 box-border shadow-lg flex flex-col items-center justify-end md:h-[38.75rem] mb-5 p-12 rounded-box overflow-hidden lg:h-[38.75rem] lg:p-20 xl:h-[45.75rem]"
|
638
|
+
}) => {
|
639
|
+
(0, import_react9.useGSAP)(() => {
|
640
|
+
let btnId = "#cta-button";
|
641
|
+
if (import_react8.default.isValidElement(altButtonJsx)) {
|
642
|
+
const { id } = altButtonJsx.props;
|
643
|
+
btnId = "#" + id;
|
644
|
+
}
|
645
|
+
const tl = import_gsap.default.timeline();
|
646
|
+
tl.fromTo(
|
647
|
+
"#gradient-element",
|
648
|
+
{
|
649
|
+
scale: 2,
|
650
|
+
opacity: 0.5
|
651
|
+
},
|
652
|
+
{
|
653
|
+
scale: 1,
|
654
|
+
opacity: 1,
|
655
|
+
scrollTrigger: {
|
656
|
+
once: showAnimationOnce,
|
657
|
+
trigger: "#parent-element",
|
658
|
+
start: "center center+=80",
|
659
|
+
end: "center center+=10",
|
660
|
+
scrub: true
|
661
|
+
},
|
662
|
+
ease: "linear"
|
663
|
+
}
|
664
|
+
);
|
665
|
+
tl.fromTo(
|
666
|
+
btnId,
|
667
|
+
{
|
668
|
+
xPercent: -125,
|
669
|
+
opacity: 0
|
670
|
+
},
|
671
|
+
{
|
672
|
+
opacity: 1,
|
673
|
+
xPercent: 0,
|
674
|
+
scrollTrigger: {
|
675
|
+
once: showAnimationOnce,
|
676
|
+
trigger: "#parent-element",
|
677
|
+
start: "center center+=10",
|
678
|
+
end: "center center",
|
679
|
+
scrub: true
|
680
|
+
},
|
681
|
+
ease: "linear"
|
682
|
+
}
|
683
|
+
);
|
684
|
+
tl.fromTo(
|
685
|
+
"#image-element",
|
686
|
+
{
|
687
|
+
opacity: 0,
|
688
|
+
scale: 2
|
689
|
+
},
|
690
|
+
{
|
691
|
+
opacity: 1,
|
692
|
+
scale: 1,
|
693
|
+
scrollTrigger: {
|
694
|
+
once: showAnimationOnce,
|
695
|
+
trigger: "#parent-element",
|
696
|
+
start: "center center+=100",
|
697
|
+
end: "center center+=50",
|
698
|
+
scrub: true
|
699
|
+
},
|
700
|
+
ease: "linear"
|
701
|
+
}
|
702
|
+
);
|
703
|
+
tl.fromTo(
|
704
|
+
"#card-element",
|
705
|
+
{
|
706
|
+
xPercent: 125,
|
707
|
+
opacity: 0
|
708
|
+
},
|
709
|
+
{
|
710
|
+
xPercent: 0,
|
711
|
+
opacity: 1,
|
712
|
+
scrollTrigger: {
|
713
|
+
once: showAnimationOnce,
|
714
|
+
trigger: "#parent-element",
|
715
|
+
start: "center center+=80",
|
716
|
+
end: "center center+=10",
|
717
|
+
scrub: true
|
718
|
+
},
|
719
|
+
ease: "linear"
|
720
|
+
}
|
721
|
+
);
|
722
|
+
}, []);
|
723
|
+
const gradient = gradientColors ? `bg-gradient-to-br ${gradientColors.start} ${gradientColors.end}` : "bg-gradient-to-br from-accent to-primary";
|
724
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
725
|
+
"div",
|
726
|
+
{
|
727
|
+
id: "parent-element",
|
728
|
+
className: `${className}`,
|
729
|
+
children: [
|
730
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute top-0 right-0 flex justify-center md:justify-start lg:left-0 lg:top-0 w-full h-full pointer-events-none xl:w-auto", children: cardImage && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
731
|
+
"img",
|
732
|
+
{
|
733
|
+
id: "image-element",
|
734
|
+
alt: "card",
|
735
|
+
loading: "lazy",
|
736
|
+
decoding: "async",
|
737
|
+
className: "invisible hidden sm:inline-block sm:visible transition-opacity w-full h-full object-cover md:object-left relative z-10 opacity-90 max-w-[65%]",
|
738
|
+
src: cardImage
|
739
|
+
}
|
740
|
+
) }),
|
741
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { id: "card-element", className: `relative z-10 lg:ml-auto`, children: [
|
742
|
+
content,
|
743
|
+
children
|
744
|
+
] }),
|
745
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex w-full justify-center absolute px-4 bottom-4 lg:justify-start", children: [
|
746
|
+
altButtonJsx && altButtonJsx,
|
747
|
+
!altButtonJsx && buttonText && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { id: "cta-button", className: "btn btn-primary z-10 shadow-md", children: buttonText })
|
748
|
+
] }),
|
749
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
750
|
+
"div",
|
751
|
+
{
|
752
|
+
id: "gradient-element",
|
753
|
+
style: { transform: "translate3d(0, 0, 0)" },
|
754
|
+
className: `z-0 w-[80vw] h-[80vh] rounded-full blur-[90px] absolute bottom-0 right-0 opacity-60 ${gradient}`
|
755
|
+
}
|
756
|
+
)
|
757
|
+
]
|
758
|
+
}
|
759
|
+
);
|
760
|
+
};
|
761
|
+
|
762
|
+
// src/Ratings/Ratings.tsx
|
763
|
+
var import_fa6 = require("react-icons/fa6");
|
764
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
765
|
+
var Ratings = function({ imagesSrc, rating, trusted, column }) {
|
766
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex items-center justify-center py-4 @container", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
767
|
+
"div",
|
768
|
+
{
|
769
|
+
className: `mx-auto flex items-center justify-center ${column && "flex-col"} gap-2`,
|
770
|
+
children: [
|
771
|
+
imagesSrc && imagesSrc.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "@apply relative h-[45px] w-[165px]", children: imagesSrc == null ? void 0 : imagesSrc.map((src, idx) => {
|
772
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
773
|
+
"div",
|
774
|
+
{
|
775
|
+
style: { left: `${idx * 30}px` },
|
776
|
+
className: "@apply absolute flex h-[40px] w-[40px] items-center justify-center rounded-full bg-base-100",
|
777
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
778
|
+
"img",
|
779
|
+
{
|
780
|
+
src,
|
781
|
+
alt: "Client profile picture",
|
782
|
+
height: 50,
|
783
|
+
width: 50,
|
784
|
+
className: "@apply h-[35px] w-[35px] rounded-full object-cover"
|
785
|
+
}
|
786
|
+
)
|
787
|
+
},
|
788
|
+
idx
|
789
|
+
);
|
790
|
+
}) }),
|
791
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
792
|
+
"div",
|
793
|
+
{
|
794
|
+
className: `flex flex-col gap-2 ${column && "items-center"}`,
|
795
|
+
children: [
|
796
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "@apply text-left text-xs", children: [
|
797
|
+
"Trusted by ",
|
798
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("strong", { children: [
|
799
|
+
trusted || 100,
|
800
|
+
"+"
|
801
|
+
] }),
|
802
|
+
" people"
|
803
|
+
] }),
|
804
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "@apply flex w-full items-center justify-center", children: [...Array(5)].map((_, idx) => {
|
805
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
806
|
+
import_fa6.FaStar,
|
807
|
+
{
|
808
|
+
size: 22.5,
|
809
|
+
className: `
|
810
|
+
${idx >= rating ? "text-gray-400" : "text-primary"} `
|
811
|
+
},
|
812
|
+
idx
|
813
|
+
);
|
814
|
+
}) })
|
815
|
+
]
|
816
|
+
}
|
817
|
+
)
|
818
|
+
]
|
819
|
+
}
|
820
|
+
) });
|
821
|
+
};
|
822
|
+
|
823
|
+
// src/SectionContainer/SectionContainer.tsx
|
824
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
825
|
+
var SectionContainer = ({ children, classNames: classNames2, padded = true, id }) => {
|
826
|
+
const paddingClasses = padded ? "px-4 py-12 sm:px-8 sm:py-20 md:px-16 md:py-30 lg:px-30 lg:py-32" : "";
|
827
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `${paddingClasses} ${classNames2}`, id: id || "", children });
|
828
|
+
};
|
829
|
+
|
830
|
+
// src/SectionHeader/SectionHeader.tsx
|
831
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
832
|
+
var SectionHeader = function({
|
833
|
+
headline,
|
834
|
+
subheadline,
|
835
|
+
classNames: classNames2,
|
836
|
+
children,
|
837
|
+
breakpoint = "sm",
|
838
|
+
headlineTag = "h2",
|
839
|
+
mobileAlignment = "center",
|
840
|
+
desktopAlignment = "center",
|
841
|
+
gap = "4"
|
842
|
+
}) {
|
843
|
+
const isTwoColumnLayout = children !== void 0;
|
844
|
+
const HeadlineTag = headlineTag;
|
845
|
+
const alignmentClass = `${breakpoint}:text-${mobileAlignment} text-${desktopAlignment}`;
|
846
|
+
const twoColumnClasses = `flex flex-col ${breakpoint}:flex-row gap-${gap} w-full justify-between items-center`;
|
847
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
848
|
+
"div",
|
849
|
+
{
|
850
|
+
className: `w-full ${classNames2 || ""} mb-${Number(gap) * 2}`,
|
851
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
852
|
+
"div",
|
853
|
+
{
|
854
|
+
className: `${isTwoColumnLayout ? twoColumnClasses : ""}`,
|
855
|
+
"data-breakpoint": breakpoint,
|
856
|
+
children: [
|
857
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("article", { className: `prose ${alignmentClass} gap-${gap} flex flex-col`, children: [
|
858
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(HeadlineTag, { className: "text-4xl font-bold", children: headline }),
|
859
|
+
subheadline && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h5", { className: "text-2xl font-semibold", children: subheadline })
|
860
|
+
] }),
|
861
|
+
isTwoColumnLayout && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children })
|
862
|
+
]
|
863
|
+
}
|
864
|
+
)
|
865
|
+
}
|
866
|
+
);
|
867
|
+
};
|
868
|
+
|
869
|
+
// src/SellingProposition/SellingProposition.tsx
|
870
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
871
|
+
var SellingProposition = function({
|
872
|
+
sellingItems,
|
873
|
+
containerClassNames
|
874
|
+
}) {
|
875
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "w-[100%] @container", children: sellingItems == null ? void 0 : sellingItems.map((item, index) => {
|
876
|
+
if (typeof item.a === "string") {
|
877
|
+
item.a = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { dangerouslySetInnerHTML: { __html: item.a } });
|
878
|
+
}
|
879
|
+
if (typeof item.b === "string") {
|
880
|
+
item.b = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { dangerouslySetInnerHTML: { __html: item.b } });
|
881
|
+
}
|
882
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: `mx-auto mb-8 flex w-[100%] flex-col items-center gap-2 rounded-box py-4 @xs:w-[90%] @sm:w-[85%] @md:max-w-[500px] @3xl:w-[100%] @3xl:max-w-[900px] @3xl:flex-row ${containerClassNames}`, children: [
|
883
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "card grid w-full max-w-[95%] flex-grow place-items-center rounded-box @3xl:max-w-[50%] @3xl:p-8", children: index % 2 === 0 ? item.a : item.b }),
|
884
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "card grid w-full max-w-[95%] flex-grow place-items-center rounded-box @3xl:max-w-[50%] @3xl:p-8", children: index % 2 === 0 ? item.b : item.a })
|
885
|
+
] }, index);
|
886
|
+
}) });
|
887
|
+
};
|
888
|
+
|
889
|
+
// src/SellingPropContainer/SellingPropContainer.tsx
|
890
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
891
|
+
var SellingPropContainer = function({
|
892
|
+
smallHeader,
|
893
|
+
mainHeader,
|
894
|
+
text,
|
895
|
+
ctaText,
|
896
|
+
ctaFunctionality
|
897
|
+
}) {
|
898
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "w-full @container", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex w-full flex-col items-center justify-between gap-4 p-4", children: [
|
899
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-center text-sm font-semibold uppercase text-secondary", children: smallHeader }),
|
900
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("h3", { className: "text-center text-2xl font-bold", children: [
|
901
|
+
mainHeader,
|
902
|
+
mainHeader
|
903
|
+
] }),
|
904
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-center", children: text }),
|
905
|
+
ctaText && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { className: "btn btn-outline", onClick: ctaFunctionality, children: ctaText })
|
906
|
+
] }) });
|
907
|
+
};
|
908
|
+
|
909
|
+
// src/StackedScroller/StackedScroller.tsx
|
910
|
+
var import_gsap2 = __toESM(require("gsap"));
|
911
|
+
var import_react10 = require("@gsap/react");
|
912
|
+
var import_all3 = require("gsap/all");
|
913
|
+
var import_react11 = require("react");
|
914
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
915
|
+
import_gsap2.default.registerPlugin(import_all3.ScrollTrigger);
|
916
|
+
var StackedScroller = function({
|
917
|
+
services,
|
918
|
+
defaultHeading,
|
919
|
+
activeHeaderClassNames,
|
920
|
+
activeTextClassNames,
|
921
|
+
activeContainerClassNames,
|
922
|
+
defaultContainerClassNames
|
923
|
+
}) {
|
924
|
+
const [firstRound, setFirstRound] = (0, import_react11.useState)(true);
|
925
|
+
const newServices = services.map((item, index) => {
|
926
|
+
return __spreadProps(__spreadValues({}, item), {
|
927
|
+
id: "item-" + (index + 1),
|
928
|
+
active: false
|
929
|
+
});
|
930
|
+
});
|
931
|
+
const [activeElements, setActiveElements] = (0, import_react11.useState)(newServices);
|
932
|
+
const updateActiveElements = (id) => {
|
933
|
+
const newOne = newServices.map((item, index) => {
|
934
|
+
if (id === `item-${index + 1}`)
|
935
|
+
return __spreadProps(__spreadValues({}, item), { active: true });
|
936
|
+
return item;
|
937
|
+
});
|
938
|
+
return newOne;
|
939
|
+
};
|
940
|
+
const update = (id) => {
|
941
|
+
const newActiveElements = updateActiveElements(id);
|
942
|
+
setActiveElements(newActiveElements);
|
943
|
+
};
|
944
|
+
(0, import_react10.useGSAP)(() => {
|
945
|
+
newServices.forEach(({ id }, index) => {
|
946
|
+
import_gsap2.default.fromTo(
|
947
|
+
`#${id}`,
|
948
|
+
{
|
949
|
+
opacity: firstRound ? 0 : 1,
|
950
|
+
x: firstRound ? index % 2 === 0 ? -100 : 100 : 0
|
951
|
+
},
|
952
|
+
{
|
953
|
+
opacity: 1,
|
954
|
+
x: 0,
|
955
|
+
scrollTrigger: {
|
956
|
+
trigger: "#" + id,
|
957
|
+
once: firstRound,
|
958
|
+
start: "center center+=150",
|
959
|
+
end: "center center+=50",
|
960
|
+
scrub: true,
|
961
|
+
// markers: true,
|
962
|
+
onLeave: () => {
|
963
|
+
if (index === newServices.length - 1)
|
964
|
+
setFirstRound(false);
|
965
|
+
},
|
966
|
+
onEnter: () => {
|
967
|
+
update(id);
|
968
|
+
},
|
969
|
+
onEnterBack: () => {
|
970
|
+
update(id);
|
971
|
+
},
|
972
|
+
onLeaveBack: () => {
|
973
|
+
update(id);
|
974
|
+
}
|
975
|
+
},
|
976
|
+
ease: "linear"
|
977
|
+
}
|
978
|
+
);
|
979
|
+
});
|
980
|
+
}, [firstRound]);
|
981
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
982
|
+
"div",
|
983
|
+
{
|
984
|
+
id: "stacked-scroller",
|
985
|
+
className: "w-full py-6 flex flex-col items-center gap-20",
|
986
|
+
children: newServices.map(({ text, title, id }, index) => {
|
987
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
988
|
+
"div",
|
989
|
+
{
|
990
|
+
id,
|
991
|
+
className: `${activeElements[index].active && activeContainerClassNames} ${defaultContainerClassNames} max-w-[90vw] sm:max-w-[80vw] md:max-w-[75vw] duration-200 lg:max-w-[65vw] flex p-4 flex-col gap-2 items-center`,
|
992
|
+
children: [
|
993
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
994
|
+
"h4",
|
995
|
+
{
|
996
|
+
className: `${activeElements[index].active ? activeHeaderClassNames : defaultHeading} `,
|
997
|
+
children: title
|
998
|
+
}
|
999
|
+
),
|
1000
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: activeTextClassNames, children: text })
|
1001
|
+
]
|
1002
|
+
},
|
1003
|
+
index
|
1004
|
+
);
|
1005
|
+
})
|
1006
|
+
}
|
1007
|
+
);
|
1008
|
+
};
|
1009
|
+
|
1010
|
+
// src/TestimonialCard/TestimonialCard.tsx
|
1011
|
+
var import_fa62 = require("react-icons/fa6");
|
1012
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
1013
|
+
var TestimonialCard = function({
|
1014
|
+
testimonialContent,
|
1015
|
+
carousel,
|
1016
|
+
classNames: classNames2 = ""
|
1017
|
+
}) {
|
1018
|
+
const { text, author, photoUrl, link, companyOrPosition } = testimonialContent;
|
1019
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
1020
|
+
"div",
|
1021
|
+
{
|
1022
|
+
className: `${classNames2} ${carousel ? "gap-4" : "m-0"} relative flex w-auto break-inside-avoid flex-col items-center justify-center gap-4 rounded-box p-2 px-1 py-4 @container @md:p-4`,
|
1023
|
+
children: [
|
1024
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex w-full items-center justify-center text-4xl opacity-30 @sm:justify-end @sm:text-2xl @lg:text-4xl", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_fa62.FaQuoteLeft, {}) }),
|
1025
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "flex w-full items-center justify-center p-0 text-center leading-[22px] @sm:justify-start @sm:px-6 @sm:py-2 @sm:text-left", children: text }),
|
1026
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "my-2 h-[0.5px] w-full border-t border-base-content opacity-10" }),
|
1027
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex w-full flex-col items-center gap-2 px-6 py-2 opacity-70 @sm:flex-row @sm:items-start @sm:gap-4", children: [
|
1028
|
+
photoUrl ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("img", { src: photoUrl, alt: "user profile image", className: "rounded-full max-w-[50px]" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_fa62.FaRegUser, { className: "my-auto h-auto text-inherit" }),
|
1029
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "", children: [
|
1030
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("a", { href: link || "", className: "w-full text-center text-sm @sm:text-left", children: author }),
|
1031
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "w-full text-center text-sm @sm:text-left", children: companyOrPosition })
|
1032
|
+
] })
|
1033
|
+
] })
|
1034
|
+
]
|
1035
|
+
}
|
1036
|
+
);
|
1037
|
+
};
|
1038
|
+
|
1039
|
+
// src/TestimonialDisplay/TestimonialDisplay.tsx
|
1040
|
+
var import_react_fast_marquee = __toESM(require("react-fast-marquee"));
|
1041
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
1042
|
+
var TestimonialDisplay = function({
|
1043
|
+
style,
|
1044
|
+
children
|
1045
|
+
}) {
|
1046
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "@container w-full", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "box-border flex items-center justify-center @container/inner", children: style === "carousel" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
1047
|
+
import_react_fast_marquee.default,
|
1048
|
+
{
|
1049
|
+
play: true,
|
1050
|
+
className: "max-w-[90vw]",
|
1051
|
+
direction: "left",
|
1052
|
+
speed: 25,
|
1053
|
+
loop: 0,
|
1054
|
+
autoFill: true,
|
1055
|
+
pauseOnHover: true,
|
1056
|
+
pauseOnClick: true,
|
1057
|
+
children
|
1058
|
+
}
|
1059
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "grid w-full columns-1 gap-4 p-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4", children }) }) });
|
1060
|
+
};
|
1061
|
+
|
1062
|
+
// src/button.tsx
|
1063
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
1064
|
+
function Button(_a) {
|
1065
|
+
var _b = _a, { children } = _b, other = __objRest(_b, ["children"]);
|
1066
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", __spreadProps(__spreadValues({ type: "button" }, other), { children }));
|
1067
|
+
}
|
1068
|
+
Button.displayName = "Button";
|
1069
|
+
// Annotate the CommonJS export names for ESM import in node:
|
1070
|
+
0 && (module.exports = {
|
1071
|
+
AccordionContainer,
|
1072
|
+
AccordionItem,
|
1073
|
+
AnimateBorder,
|
1074
|
+
AnimatedHeader,
|
1075
|
+
AnimationObserver,
|
1076
|
+
BentoBox,
|
1077
|
+
BookNow,
|
1078
|
+
Button,
|
1079
|
+
CTA,
|
1080
|
+
CookieConsentForm,
|
1081
|
+
Footer,
|
1082
|
+
Hero,
|
1083
|
+
Masonry,
|
1084
|
+
Navbar,
|
1085
|
+
Offer,
|
1086
|
+
PrettyCard,
|
1087
|
+
Ratings,
|
1088
|
+
SectionContainer,
|
1089
|
+
SectionHeader,
|
1090
|
+
SellingPropContainer,
|
1091
|
+
SellingProposition,
|
1092
|
+
StackedScroller,
|
1093
|
+
TestimonialCard,
|
1094
|
+
TestimonialDisplay
|
1095
|
+
});
|