@commandcenterio/convert-ui 0.0.1

package/dist/index.mjs

@@ -0,0 +1,1038 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/Accordion/Accordion.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var AccordionContainer = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: "join join-vertical w-full", children });
+};
+var AccordionItem = ({ title, content, isOpen = false }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "collapse collapse-arrow join-item border border-base-300 bg-dark-200 text-base-content", children: [
+    /* @__PURE__ */ jsx("input", { type: "radio", name: "my-accordion-4", defaultChecked: isOpen }),
+    /* @__PURE__ */ jsx("div", { className: "collapse-title text-xl font-medium", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "collapse-content p-0", style: { padding: "0 !important" }, children: content })
+  ] });
+};
+
+// src/Observer/AnimationObserver.tsx
+import { cloneElement } from "react";
+import { useInView } from "react-intersection-observer";
+var AnimationObserver = function({
+  children,
+  animationClassNames,
+  threshold = 0.2,
+  defaultClassNames
+}) {
+  const { ref, inView } = useInView({
+    threshold
+  });
+  return cloneElement(children, {
+    ref,
+    className: `${children.props.className} ${inView ? animationClassNames : defaultClassNames}`.trim()
+  });
+};
+
+// src/BorderAnimation/BorderAnimation.tsx
+import { cloneElement as cloneElement2, useEffect, useRef } from "react";
+import { useInView as useInView2 } from "react-intersection-observer";
+import classNames from "classnames";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var AnimateBorder = ({
+  elementToAnimate,
+  children,
+  speed = "5s",
+  hideOverflow,
+  iconsToAnimate,
+  borderRadius = "lg"
+}) => {
+  const parentRef = useRef(null);
+  const { inView, ref: viewRef } = useInView2({ threshold: 0.2 });
+  const cloneElementWithAnimation = (element, index = 0) => {
+    const animationDelay = `${index * 0.5}s`;
+    return cloneElement2(element, {
+      style: __spreadProps(__spreadValues({}, element.props.style), { animationDelay }),
+      className: classNames({
+        "absolute": inView,
+        "hidden": !inView,
+        "ml-4": index !== 0,
+        [element.props.className]: true,
+        "animatedElement": true
+      })
+    });
+  };
+  const clonedAnimatedElement = elementToAnimate && cloneElementWithAnimation(elementToAnimate);
+  const clonedIconElements = iconsToAnimate == null ? void 0 : iconsToAnimate.map(cloneElementWithAnimation);
+  useEffect(() => {
+    const handleResize = () => {
+      if (parentRef.current) {
+        document.documentElement.style.setProperty("--parent-width", `${parentRef.current.offsetWidth}px`);
+        document.documentElement.style.setProperty("--parent-height", `${parentRef.current.offsetHeight}px`);
+        document.documentElement.style.setProperty("--animated-speed", speed);
+        document.documentElement.style.setProperty("--animated-border-radius", `var(--rounded-${borderRadius})`);
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2("div", { ref: viewRef, children: /* @__PURE__ */ jsxs2("div", { ref: viewRef, className: `relative ${hideOverflow && "overflow-hidden"}`, children: [
+      clonedAnimatedElement && !hideOverflow && clonedAnimatedElement,
+      clonedIconElements && hideOverflow && clonedIconElements,
+      /* @__PURE__ */ jsx2("div", { ref: parentRef, className: "flex items-center z-50 relative justify-center p-1", children })
+    ] }) }),
+    /* @__PURE__ */ jsx2("style", { children: `
+      ::root {
+        /* --border-radius: 0px; */
+        --parent-height: 0px;
+        --parent-width: 0px;
+        --animated-speed: 10s;
+      }
+      @keyframes moveAround {
+        from {
+          offset-distance: 0%;
+        }
+        to {
+          offset-distance: 100%;
+        }
+      }
+      
+      @keyframes loop {
+        to {
+          offset-distance: 100%;
+        }
+      }
+      
+      .animatedElement {
+        anchor-offset: 100% 50%;
+        position: absolute;
+        animation: loop var(--animated-speed) infinite linear;
+        offset-path: rect(0px var(--parent-width) var(--parent-height) 0px round 5%);
+      }
+      ` })
+  ] });
+};
+
+// src/AnimatedHeader/AnimatedHeader.tsx
+import { useGSAP } from "@gsap/react";
+import { gsap } from "gsap/gsap-core";
+import { TextPlugin, ScrollTrigger } from "gsap/all";
+import { jsx as jsx3 } from "react/jsx-runtime";
+gsap.registerPlugin(TextPlugin, ScrollTrigger);
+var AnimatedHeader = function({
+  textToAnimate,
+  textClassNames,
+  containerClassNames,
+  textAnimation,
+  scaleAnimation,
+  identifiers,
+  pin = false,
+  once = false
+}) {
+  const modifiedId = "#" + identifiers.child;
+  const modifiedParentId = "#" + identifiers.parent;
+  useGSAP(() => {
+    gsap.timeline().fromTo(
+      modifiedId,
+      {
+        scale: scaleAnimation.start
+      },
+      {
+        scale: scaleAnimation.end,
+        scrollTrigger: {
+          // markers: true,
+          trigger: modifiedParentId,
+          start: textAnimation.start,
+          end: textAnimation.end,
+          once,
+          scrub: 1,
+          pin,
+          pinSpacing: pin
+        },
+        text: {
+          value: textToAnimate,
+          delimiter: ""
+        },
+        ease: "linear",
+        duration: 1
+      }
+    );
+  }, []);
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      id: identifiers.parent,
+      className: `flex items-center justify-center ${containerClassNames} `,
+      children: /* @__PURE__ */ jsx3("h2", { id: identifiers.child, className: textClassNames })
+    }
+  );
+};
+
+// src/Bento/BentoBox.tsx
+import React3 from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var BentoBox = ({ children, classNames: classNames2 = "" }) => {
+  return /* @__PURE__ */ jsx4("div", { className: "@container", children: /* @__PURE__ */ jsx4("div", { className: `${classNames2}`, children: React3.Children.map(
+    children,
+    (child, index) => React3.isValidElement(child) ? /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: child.props.className,
+        children: child.props.children
+      },
+      `bento-box-${index}`
+    ) : null
+  ) }) });
+};
+
+// src/BookNow/BookNow.tsx
+import { useEffect as useEffect2 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var BookNow = ({
+  scriptPathUrl,
+  show,
+  vendor,
+  dataUrl,
+  className,
+  dataPath
+}) => {
+  useEffect2(() => {
+    if (show) {
+      if (document.getElementById("calendar-script")) {
+        return;
+      }
+      const script = document.createElement("script");
+      script.id = "calendar-script";
+      script.src = scriptPathUrl;
+      script.async = true;
+      script.defer = true;
+      if (vendor === "calendly") {
+        script.type = "text/javascript";
+      }
+      document.body.appendChild(script);
+      return () => {
+        document.body.removeChild(script);
+      };
+    }
+  }, [show, scriptPathUrl, vendor]);
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      id: "book-now",
+      className: `w-[100%] ${className}`,
+      style: { display: show ? "block" : "none" },
+      children: /* @__PURE__ */ jsx5(
+        "div",
+        {
+          className: `${vendor === "tidycal" && "tidycal-embed"} ${vendor === "calendly" && "calendly-inline-widget h-[700px] min-w-[320px]"}`,
+          "data-path": dataPath,
+          "data-url": dataUrl
+        }
+      )
+    }
+  );
+};
+
+// src/CookieConsentForm/cookieformstyles.module.css
+var cookieformstyles_default = {};
+
+// src/CookieConsentForm/CookieConsentForm.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var CookieConsentForm = function({
+  positionX,
+  positionY,
+  cookieHeader = "We value your privacy",
+  cookieText,
+  onAccept,
+  onReject,
+  show,
+  classNames: classNames2,
+  type = "fixed"
+}) {
+  const handleSelection = (permission) => {
+    if (permission) {
+      onAccept();
+    } else {
+      onReject();
+    }
+  };
+  return show ? /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: `z-[100] h-auto w-full max-w-[350px] rounded-box p-4 shadow-lg @container ${type} ${positionX} ${positionY} ${classNames2}`,
+      children: [
+        /* @__PURE__ */ jsx6("p", { className: cookieformstyles_default.header, children: cookieHeader }),
+        /* @__PURE__ */ jsx6("p", { className: cookieformstyles_default.text, children: cookieText }),
+        /* @__PURE__ */ jsxs3("div", { className: cookieformstyles_default.button_container, children: [
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              onClick: () => handleSelection(true),
+              className: cookieformstyles_default.accept_button,
+              children: "Accept"
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              onClick: () => handleSelection(false),
+              className: cookieformstyles_default.reject_button,
+              children: "Reject"
+            }
+          )
+        ] })
+      ]
+    }
+  ) : null;
+};
+
+// src/CTA/CTA.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var CTA = function({
+  type = "basic",
+  ctaText,
+  onClick,
+  subheading,
+  paragraph,
+  smallheading,
+  classNames: classNames2
+}) {
+  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";
+  const renderCTALayout = () => {
+    switch (type) {
+      case "emphasized":
+        return /* @__PURE__ */ jsx7("div", {});
+      case "minimal":
+        return /* @__PURE__ */ jsx7("div", {});
+      default:
+        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: [
+          /* @__PURE__ */ jsxs4("div", { className: "flex w-full flex-col items-center gap-2 @2xl:items-start", children: [
+            /* @__PURE__ */ jsx7("p", { className: "mb-3 text-center text-sm font-semibold uppercase tracking-[0.5px] text-secondary", children: smallheading }),
+            /* @__PURE__ */ jsx7("h3", { className: "mb-4 text-center text-3xl font-semibold @2xl:text-start", children: subheading }),
+            /* @__PURE__ */ jsx7("p", { className: "mb-4 text-center opacity-60 @2xl:text-start", children: paragraph })
+          ] }),
+          /* @__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 }) })
+        ] }) });
+    }
+  };
+  return renderCTALayout();
+};
+
+// src/Footer/Footer.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var Footer = function({
+  links,
+  logo,
+  logoText,
+  newsletter,
+  socialLinks,
+  maxLogoHeight,
+  leftElement,
+  openingHours
+}) {
+  const logoHeight = maxLogoHeight ? maxLogoHeight : "50px";
+  const logoHeightStyle = {
+    "--footer-logo-height": logoHeight
+  };
+  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: [
+    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: [
+      /* @__PURE__ */ jsx8("div", { style: logoHeightStyle, children: /* @__PURE__ */ jsx8("img", { src: logo || "", alt: "Company Logo", className: "h-[var(--footer-logo-height)]" }) }),
+      /* @__PURE__ */ jsx8("p", { children: logoText })
+    ] }),
+    links == null ? void 0 : links.map((item, index) => {
+      return /* @__PURE__ */ jsxs5("nav", { children: [
+        /* @__PURE__ */ jsx8("header", { className: "footer-title mx-auto @xl:mx-0", children: item.header }),
+        item.links.map((link, index2) => {
+          return /* @__PURE__ */ jsx8(
+            "a",
+            {
+              className: "link-hover link mx-auto @xl:mx-0",
+              href: link.url,
+              children: link.text
+            },
+            index2
+          );
+        })
+      ] }, index);
+    }),
+    socialLinks && /* @__PURE__ */ jsxs5("nav", { children: [
+      /* @__PURE__ */ jsx8("header", { className: "footer-title mx-auto @xl:mx-0", children: "Social" }),
+      socialLinks == null ? void 0 : socialLinks.map((link, index) => {
+        return /* @__PURE__ */ jsx8(
+          "a",
+          {
+            href: link.url,
+            className: "link-hover link mx-auto @xl:mx-0",
+            children: /* @__PURE__ */ jsx8(link.icon, { className: "text-base-content", size: 30 })
+          },
+          index
+        );
+      })
+    ] }),
+    openingHours && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2 w-fit", children: [
+      /* @__PURE__ */ jsx8("header", { className: "footer-title mx-auto @xl:mx-0", children: openingHours.header }),
+      openingHours.hours.map(({ day, openingTime }, index, arr) => {
+        return /* @__PURE__ */ jsxs5("div", { className: "flex items-center w-[200px] justify-between", children: [
+          /* @__PURE__ */ jsx8("p", { className: "inline-block w-fit", children: day }),
+          /* @__PURE__ */ jsx8(
+            "p",
+            {
+              className: `inline-block w-fit ${openingTime === "Closed" && "font-semibold"}`,
+              children: openingTime
+            }
+          )
+        ] }, index);
+      })
+    ] })
+  ] }) });
+};
+
+// src/Hero/Hero.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var Hero = function({
+  styleType,
+  headline,
+  subheadline,
+  children,
+  imageSrc,
+  classNames: classNames2 = "h-screen",
+  imageAlt = "",
+  imageOverlayOpacity = 0.7
+}) {
+  const backgroundImageStyle = styleType === "Image" && imageSrc ? { backgroundImage: `url(${imageSrc})` } : {};
+  const overlayOpacityStyle = styleType === "Image" ? { opacity: imageOverlayOpacity } : {};
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      style: backgroundImageStyle,
+      className: `${classNames2} hero relative w-full overflow-hidden @container`,
+      "aria-label": styleType === "Image" ? imageAlt : void 0,
+      children: [
+        styleType === "Image" && /* @__PURE__ */ jsx9("div", { style: overlayOpacityStyle, className: "hero-overlay absolute left-0 top-0 z-0 h-[100%] w-[100%] bg-base-100" }),
+        /* @__PURE__ */ jsxs6("div", { className: "hero-content flex h-auto pt-48 max-w-3xl flex-col gap-4 text-center md:gap-6", children: [
+          headline && /* @__PURE__ */ jsx9("h1", { className: "text-4xl font-bold md:text-5xl lg:text-6xl xl:text-7xl", children: headline }),
+          subheadline && /* @__PURE__ */ jsx9("p", { className: "mb-8 mt-6 text-base sm:text-lg", children: subheadline }),
+          children
+        ] })
+      ]
+    }
+  );
+};
+
+// src/Masonry/Masonry.tsx
+import React4 from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Masonry = ({
+  children,
+  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%]",
+  itemMaxWidth = "max-w-[425px]"
+}) => {
+  return /* @__PURE__ */ jsx10("div", { className: "h-full w-full @container", children: /* @__PURE__ */ jsx10("div", { className: `${classNames2}`, children: React4.Children.map(
+    children,
+    (child, index) => React4.isValidElement(child) ? /* @__PURE__ */ jsx10(
+      "div",
+      {
+        className: `${child.props.className} mx-auto ${itemMaxWidth}`,
+        children: child.props.children
+      },
+      index
+    ) : null
+  ) }) });
+};
+
+// src/Navbar/Navbar.tsx
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var Navbar = function({
+  logo,
+  links,
+  type = "default",
+  ctaElement,
+  classNames: classNames2,
+  maxLogoHeight,
+  children
+}) {
+  const renderMenuItem = () => {
+    return links.map((link, idx) => {
+      return /* @__PURE__ */ jsx11("a", { href: link.link, className: "btn btn-sm btn-ghost", children: link.text }, idx);
+    });
+  };
+  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;
+  const fullClassNames = type === "full" ? "flex w-[100%] items-center justify-between bg-base-200 px-4 py-2" : null;
+  const defaultClassNames = type === "default" ? "navbar mx-auto flex w-full items-center justify-between rounded-box px-4 py-2 shadow-sm" : null;
+  const containerClasses = roundedClassNames || fullClassNames || defaultClassNames;
+  const logoHeight = maxLogoHeight ? maxLogoHeight : "50px";
+  const logoHeightStyle = { "--logo-height": logoHeight };
+  return /* @__PURE__ */ jsx11("div", { className: "w-full @container", children: /* @__PURE__ */ jsxs7("div", { className: `${containerClasses} ${classNames2}`, children: [
+    !!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" }) }),
+    /* @__PURE__ */ jsx11("ul", { className: "menu menu-horizontal hidden items-center gap-2 px-1 @2xl:flex flex-nowrap", children: renderMenuItem() }),
+    /* @__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: [
+      /* @__PURE__ */ jsx11("summary", { children: "Navigate" }),
+      /* @__PURE__ */ jsx11("div", { className: "flex flex-col gap-2 absolute bg-base-300 rounded-box mt-2 p-4", children: renderMenuItem() })
+    ] }) }) }),
+    ctaElement && ctaElement
+  ] }) });
+};
+
+// src/Offer/Offer.tsx
+import { useEffect as useEffect3, useState } from "react";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var Offer = ({
+  offer,
+  offerDateEnd,
+  ctaText,
+  ctaFunctionality,
+  btnClassnames = "btn btn-secondary btn-sm",
+  fontSize = "text-3xl",
+  classNames: classNames2 = "p-4 bg-accent text-white"
+}) => {
+  const [timeRemaining, setTimeRemaining] = useState({
+    days: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0
+  });
+  useEffect3(() => {
+    const intervalId = setInterval(() => updateCountdown(offerDateEnd), 1e3);
+    return () => clearInterval(intervalId);
+  }, [offerDateEnd]);
+  function updateCountdown(endDate) {
+    const now = /* @__PURE__ */ new Date();
+    const difference = endDate.getTime() - now.getTime();
+    if (difference <= 0) {
+      setTimeRemaining({ days: 0, hours: 0, minutes: 0, seconds: 0 });
+      return;
+    }
+    const seconds = Math.floor(difference / 1e3 % 60);
+    const minutes = Math.floor(difference / 1e3 / 60 % 60);
+    const hours = Math.floor(difference / (1e3 * 60 * 60) % 24);
+    const days = Math.floor(difference / (1e3 * 60 * 60 * 24));
+    setTimeRemaining({ days, hours, minutes, seconds });
+  }
+  return /* @__PURE__ */ jsxs8("div", { className: `w-full flex items-center justify-between ${classNames2}`, children: [
+    /* @__PURE__ */ jsx12("div", { className: "flex flex-col flex-1 justify-center items-start", children: /* @__PURE__ */ jsx12("p", { className: "offer_text", children: offer }) }),
+    /* @__PURE__ */ jsxs8("div", { className: "flex gap-4 items-center justify-center", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "invisible w-0 grid grid-flow-col gap-5 text-center auto-cols-max md:visible md:w-auto", children: [
+        /* @__PURE__ */ jsxs8("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx12("span", { className: `countdown font-mono text-5xl ${fontSize}`, children: /* @__PURE__ */ jsx12("span", { style: { "--value": timeRemaining.days } }) }),
+          "days"
+        ] }),
+        /* @__PURE__ */ jsxs8("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx12("span", { className: `countdown font-mono text-5xl ${fontSize}`, children: /* @__PURE__ */ jsx12("span", { style: { "--value": timeRemaining.hours } }) }),
+          "hours"
+        ] }),
+        /* @__PURE__ */ jsxs8("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx12("span", { className: `countdown font-mono text-5xl ${fontSize}`, children: /* @__PURE__ */ jsx12("span", { style: { "--value": timeRemaining.minutes } }) }),
+          "min"
+        ] }),
+        /* @__PURE__ */ jsxs8("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx12("span", { className: `countdown font-mono text-5xl ${fontSize}`, children: /* @__PURE__ */ jsx12("span", { style: { "--value": timeRemaining.seconds } }) }),
+          "sec"
+        ] })
+      ] }),
+      ctaText && /* @__PURE__ */ jsx12("button", { onClick: ctaFunctionality, className: btnClassnames, children: ctaText })
+    ] })
+  ] });
+};
+
+// src/PrettyCard/PrettyCard.tsx
+import React6 from "react";
+import { useGSAP as useGSAP2 } from "@gsap/react";
+import gsap2 from "gsap";
+import { ScrollTrigger as ScrollTrigger2 } from "gsap/all";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+gsap2.registerPlugin(ScrollTrigger2);
+var PrettyCard = ({
+  buttonText,
+  altButtonJsx,
+  content,
+  cardImage,
+  children,
+  gradientColors,
+  showAnimationOnce = false,
+  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]"
+}) => {
+  useGSAP2(() => {
+    let btnId = "#cta-button";
+    if (React6.isValidElement(altButtonJsx)) {
+      const { id } = altButtonJsx.props;
+      btnId = "#" + id;
+    }
+    const tl = gsap2.timeline();
+    tl.fromTo(
+      "#gradient-element",
+      {
+        scale: 2,
+        opacity: 0.5
+      },
+      {
+        scale: 1,
+        opacity: 1,
+        scrollTrigger: {
+          once: showAnimationOnce,
+          trigger: "#parent-element",
+          start: "center center+=80",
+          end: "center center+=10",
+          scrub: true
+        },
+        ease: "linear"
+      }
+    );
+    tl.fromTo(
+      btnId,
+      {
+        xPercent: -125,
+        opacity: 0
+      },
+      {
+        opacity: 1,
+        xPercent: 0,
+        scrollTrigger: {
+          once: showAnimationOnce,
+          trigger: "#parent-element",
+          start: "center center+=10",
+          end: "center center",
+          scrub: true
+        },
+        ease: "linear"
+      }
+    );
+    tl.fromTo(
+      "#image-element",
+      {
+        opacity: 0,
+        scale: 2
+      },
+      {
+        opacity: 1,
+        scale: 1,
+        scrollTrigger: {
+          once: showAnimationOnce,
+          trigger: "#parent-element",
+          start: "center center+=100",
+          end: "center center+=50",
+          scrub: true
+        },
+        ease: "linear"
+      }
+    );
+    tl.fromTo(
+      "#card-element",
+      {
+        xPercent: 125,
+        opacity: 0
+      },
+      {
+        xPercent: 0,
+        opacity: 1,
+        scrollTrigger: {
+          once: showAnimationOnce,
+          trigger: "#parent-element",
+          start: "center center+=80",
+          end: "center center+=10",
+          scrub: true
+        },
+        ease: "linear"
+      }
+    );
+  }, []);
+  const gradient = gradientColors ? `bg-gradient-to-br ${gradientColors.start} ${gradientColors.end}` : "bg-gradient-to-br from-accent to-primary";
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      id: "parent-element",
+      className: `${className}`,
+      children: [
+        /* @__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(
+          "img",
+          {
+            id: "image-element",
+            alt: "card",
+            loading: "lazy",
+            decoding: "async",
+            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%]",
+            src: cardImage
+          }
+        ) }),
+        /* @__PURE__ */ jsxs9("div", { id: "card-element", className: `relative z-10 lg:ml-auto`, children: [
+          content,
+          children
+        ] }),
+        /* @__PURE__ */ jsxs9("div", { className: "flex w-full justify-center absolute px-4 bottom-4 lg:justify-start", children: [
+          altButtonJsx && altButtonJsx,
+          !altButtonJsx && buttonText && /* @__PURE__ */ jsx13("button", { id: "cta-button", className: "btn btn-primary z-10 shadow-md", children: buttonText })
+        ] }),
+        /* @__PURE__ */ jsx13(
+          "div",
+          {
+            id: "gradient-element",
+            style: { transform: "translate3d(0, 0, 0)" },
+            className: `z-0 w-[80vw] h-[80vh] rounded-full blur-[90px] absolute bottom-0 right-0 opacity-60 ${gradient}`
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/Ratings/Ratings.tsx
+import { FaStar } from "react-icons/fa6";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+var Ratings = function({ imagesSrc, rating, trusted, column }) {
+  return /* @__PURE__ */ jsx14("div", { className: "flex items-center justify-center py-4 @container", children: /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: `mx-auto flex items-center justify-center ${column && "flex-col"} gap-2`,
+      children: [
+        imagesSrc && imagesSrc.length > 0 && /* @__PURE__ */ jsx14("div", { className: "@apply relative h-[45px] w-[165px]", children: imagesSrc == null ? void 0 : imagesSrc.map((src, idx) => {
+          return /* @__PURE__ */ jsx14(
+            "div",
+            {
+              style: { left: `${idx * 30}px` },
+              className: "@apply absolute flex h-[40px] w-[40px] items-center justify-center rounded-full bg-base-100",
+              children: /* @__PURE__ */ jsx14(
+                "img",
+                {
+                  src,
+                  alt: "Client profile picture",
+                  height: 50,
+                  width: 50,
+                  className: "@apply h-[35px] w-[35px] rounded-full object-cover"
+                }
+              )
+            },
+            idx
+          );
+        }) }),
+        /* @__PURE__ */ jsxs10(
+          "div",
+          {
+            className: `flex flex-col gap-2 ${column && "items-center"}`,
+            children: [
+              /* @__PURE__ */ jsxs10("p", { className: "@apply text-left text-xs", children: [
+                "Trusted by ",
+                /* @__PURE__ */ jsxs10("strong", { children: [
+                  trusted || 100,
+                  "+"
+                ] }),
+                " people"
+              ] }),
+              /* @__PURE__ */ jsx14("div", { className: "@apply flex w-full items-center justify-center", children: [...Array(5)].map((_, idx) => {
+                return /* @__PURE__ */ jsx14(
+                  FaStar,
+                  {
+                    size: 22.5,
+                    className: `
+            ${idx >= rating ? "text-gray-400" : "text-primary"} `
+                  },
+                  idx
+                );
+              }) })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+// src/SectionContainer/SectionContainer.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var SectionContainer = ({ children, classNames: classNames2, padded = true, id }) => {
+  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" : "";
+  return /* @__PURE__ */ jsx15("div", { className: `${paddingClasses} ${classNames2}`, id: id || "", children });
+};
+
+// src/SectionHeader/SectionHeader.tsx
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+var SectionHeader = function({
+  headline,
+  subheadline,
+  classNames: classNames2,
+  children,
+  breakpoint = "sm",
+  headlineTag = "h2",
+  mobileAlignment = "center",
+  desktopAlignment = "center",
+  gap = "4"
+}) {
+  const isTwoColumnLayout = children !== void 0;
+  const HeadlineTag = headlineTag;
+  const alignmentClass = `${breakpoint}:text-${mobileAlignment} text-${desktopAlignment}`;
+  const twoColumnClasses = `flex flex-col ${breakpoint}:flex-row gap-${gap} w-full justify-between items-center`;
+  return /* @__PURE__ */ jsx16(
+    "div",
+    {
+      className: `w-full ${classNames2 || ""} mb-${Number(gap) * 2}`,
+      children: /* @__PURE__ */ jsxs11(
+        "div",
+        {
+          className: `${isTwoColumnLayout ? twoColumnClasses : ""}`,
+          "data-breakpoint": breakpoint,
+          children: [
+            /* @__PURE__ */ jsxs11("article", { className: `prose ${alignmentClass} gap-${gap} flex flex-col`, children: [
+              /* @__PURE__ */ jsx16(HeadlineTag, { className: "text-4xl font-bold", children: headline }),
+              subheadline && /* @__PURE__ */ jsx16("h5", { className: "text-2xl font-semibold", children: subheadline })
+            ] }),
+            isTwoColumnLayout && /* @__PURE__ */ jsx16("div", { children })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/SellingProposition/SellingProposition.tsx
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+var SellingProposition = function({
+  sellingItems,
+  containerClassNames
+}) {
+  return /* @__PURE__ */ jsx17("div", { className: "w-[100%] @container", children: sellingItems == null ? void 0 : sellingItems.map((item, index) => {
+    if (typeof item.a === "string") {
+      item.a = /* @__PURE__ */ jsx17("div", { dangerouslySetInnerHTML: { __html: item.a } });
+    }
+    if (typeof item.b === "string") {
+      item.b = /* @__PURE__ */ jsx17("div", { dangerouslySetInnerHTML: { __html: item.b } });
+    }
+    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: [
+      /* @__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 }),
+      /* @__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 })
+    ] }, index);
+  }) });
+};
+
+// src/SellingPropContainer/SellingPropContainer.tsx
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+var SellingPropContainer = function({
+  smallHeader,
+  mainHeader,
+  text,
+  ctaText,
+  ctaFunctionality
+}) {
+  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: [
+    /* @__PURE__ */ jsx18("p", { className: "text-center text-sm font-semibold uppercase text-secondary", children: smallHeader }),
+    /* @__PURE__ */ jsxs13("h3", { className: "text-center text-2xl font-bold", children: [
+      mainHeader,
+      mainHeader
+    ] }),
+    /* @__PURE__ */ jsx18("p", { className: "text-center", children: text }),
+    ctaText && /* @__PURE__ */ jsx18("button", { className: "btn btn-outline", onClick: ctaFunctionality, children: ctaText })
+  ] }) });
+};
+
+// src/StackedScroller/StackedScroller.tsx
+import gsap3 from "gsap";
+import { useGSAP as useGSAP3 } from "@gsap/react";
+import { ScrollTrigger as ScrollTrigger3 } from "gsap/all";
+import { useState as useState2 } from "react";
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+gsap3.registerPlugin(ScrollTrigger3);
+var StackedScroller = function({
+  services,
+  defaultHeading,
+  activeHeaderClassNames,
+  activeTextClassNames,
+  activeContainerClassNames,
+  defaultContainerClassNames
+}) {
+  const [firstRound, setFirstRound] = useState2(true);
+  const newServices = services.map((item, index) => {
+    return __spreadProps(__spreadValues({}, item), {
+      id: "item-" + (index + 1),
+      active: false
+    });
+  });
+  const [activeElements, setActiveElements] = useState2(newServices);
+  const updateActiveElements = (id) => {
+    const newOne = newServices.map((item, index) => {
+      if (id === `item-${index + 1}`)
+        return __spreadProps(__spreadValues({}, item), { active: true });
+      return item;
+    });
+    return newOne;
+  };
+  const update = (id) => {
+    const newActiveElements = updateActiveElements(id);
+    setActiveElements(newActiveElements);
+  };
+  useGSAP3(() => {
+    newServices.forEach(({ id }, index) => {
+      gsap3.fromTo(
+        `#${id}`,
+        {
+          opacity: firstRound ? 0 : 1,
+          x: firstRound ? index % 2 === 0 ? -100 : 100 : 0
+        },
+        {
+          opacity: 1,
+          x: 0,
+          scrollTrigger: {
+            trigger: "#" + id,
+            once: firstRound,
+            start: "center center+=150",
+            end: "center center+=50",
+            scrub: true,
+            // markers: true,
+            onLeave: () => {
+              if (index === newServices.length - 1)
+                setFirstRound(false);
+            },
+            onEnter: () => {
+              update(id);
+            },
+            onEnterBack: () => {
+              update(id);
+            },
+            onLeaveBack: () => {
+              update(id);
+            }
+          },
+          ease: "linear"
+        }
+      );
+    });
+  }, [firstRound]);
+  return /* @__PURE__ */ jsx19(
+    "div",
+    {
+      id: "stacked-scroller",
+      className: "w-full py-6 flex flex-col items-center gap-20",
+      children: newServices.map(({ text, title, id }, index) => {
+        return /* @__PURE__ */ jsxs14(
+          "div",
+          {
+            id,
+            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`,
+            children: [
+              /* @__PURE__ */ jsx19(
+                "h4",
+                {
+                  className: `${activeElements[index].active ? activeHeaderClassNames : defaultHeading} `,
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ jsx19("p", { className: activeTextClassNames, children: text })
+            ]
+          },
+          index
+        );
+      })
+    }
+  );
+};
+
+// src/TestimonialCard/TestimonialCard.tsx
+import { FaQuoteLeft, FaRegUser } from "react-icons/fa6";
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+var TestimonialCard = function({
+  testimonialContent,
+  carousel,
+  classNames: classNames2 = ""
+}) {
+  const { text, author, photoUrl, link, companyOrPosition } = testimonialContent;
+  return /* @__PURE__ */ jsxs15(
+    "div",
+    {
+      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`,
+      children: [
+        /* @__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, {}) }),
+        /* @__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 }),
+        /* @__PURE__ */ jsx20("div", { className: "my-2 h-[0.5px] w-full border-t border-base-content opacity-10" }),
+        /* @__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: [
+          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" }),
+          /* @__PURE__ */ jsxs15("div", { className: "", children: [
+            /* @__PURE__ */ jsx20("a", { href: link || "", className: "w-full text-center text-sm @sm:text-left", children: author }),
+            /* @__PURE__ */ jsx20("p", { className: "w-full text-center text-sm @sm:text-left", children: companyOrPosition })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/TestimonialDisplay/TestimonialDisplay.tsx
+import Marquee from "react-fast-marquee";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var TestimonialDisplay = function({
+  style,
+  children
+}) {
+  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(
+    Marquee,
+    {
+      play: true,
+      className: "max-w-[90vw]",
+      direction: "left",
+      speed: 25,
+      loop: 0,
+      autoFill: true,
+      pauseOnHover: true,
+      pauseOnClick: true,
+      children
+    }
+  ) : /* @__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 }) }) });
+};
+
+// src/button.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+function Button(_a) {
+  var _b = _a, { children } = _b, other = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx22("button", __spreadProps(__spreadValues({ type: "button" }, other), { children }));
+}
+Button.displayName = "Button";
+export {
+  AccordionContainer,
+  AccordionItem,
+  AnimateBorder,
+  AnimatedHeader,
+  AnimationObserver,
+  BentoBox,
+  BookNow,
+  Button,
+  CTA,
+  CookieConsentForm,
+  Footer,
+  Hero,
+  Masonry,
+  Navbar,
+  Offer,
+  PrettyCard,
+  Ratings,
+  SectionContainer,
+  SectionHeader,
+  SellingPropContainer,
+  SellingProposition,
+  StackedScroller,
+  TestimonialCard,
+  TestimonialDisplay
+};