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