@sonordev/agency-site-kit 0.3.1 → 0.4.1

package/dist/chunk-AVCH4LMG.cjs

@@ -1,620 +0,0 @@
-'use strict';
-
-var chunkXONXEFJY_cjs = require('./chunk-XONXEFJY.cjs');
-var chunk633UMQQH_cjs = require('./chunk-633UMQQH.cjs');
-var chunkKEOHORIH_cjs = require('./chunk-KEOHORIH.cjs');
-var chunkIKBK7HYX_cjs = require('./chunk-IKBK7HYX.cjs');
-var dynamic = require('next/dynamic');
-var react = require('react');
-var gsap2 = require('gsap');
-var ScrollTrigger = require('gsap/ScrollTrigger');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var dynamic__default = /*#__PURE__*/_interopDefault(dynamic);
-var gsap2__default = /*#__PURE__*/_interopDefault(gsap2);
-
-function SplitHeadline({
-  children,
-  tag: Tag = "h2",
-  className,
-  style,
-  delay = 0,
-  duration = 0.8,
-  staggerAmount = 0.02
-}) {
-  const ref = react.useRef(null);
-  const splitContent = react.useMemo(() => {
-    const words = children.split(" ");
-    return words.map((word, wi) => /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-block", whiteSpace: "nowrap" }, children: [
-      word.split("").map((char, ci) => /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: "split-char",
-          style: { display: "inline-block" },
-          children: char
-        },
-        ci
-      )),
-      wi < words.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-block" }, children: "\xA0" })
-    ] }, wi));
-  }, [children]);
-  react.useEffect(() => {
-    gsap2__default.default.registerPlugin(ScrollTrigger.ScrollTrigger);
-    const el = ref.current;
-    if (!el) return;
-    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    if (prefersReducedMotion) {
-      gsap2__default.default.set(el.querySelectorAll(".split-char"), { opacity: 1, y: 0 });
-      return;
-    }
-    const chars = el.querySelectorAll(".split-char");
-    const ctx = gsap2__default.default.context(() => {
-      gsap2__default.default.fromTo(
-        chars,
-        {
-          opacity: 0,
-          y: 20
-        },
-        {
-          opacity: 1,
-          y: 0,
-          duration,
-          delay,
-          stagger: staggerAmount,
-          ease: "power2.out",
-          scrollTrigger: {
-            trigger: el,
-            start: "top 85%",
-            toggleActions: "play none none none"
-          }
-        }
-      );
-    }, el);
-    return () => ctx.revert();
-  }, [delay, duration, staggerAmount]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Tag,
-    {
-      ref,
-      className,
-      style: {
-        overflowX: "clip",
-        overflowY: "hidden",
-        overflowWrap: "break-word",
-        wordBreak: "break-word",
-        ...style
-      },
-      children: splitContent
-    }
-  );
-}
-function useScaledIframe(viewportWidth) {
-  const containerRef = react.useRef(null);
-  const [scale, setScale] = react.useState(1);
-  react.useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-    const updateScale = () => {
-      const containerWidth = container.offsetWidth;
-      setScale(containerWidth / viewportWidth);
-    };
-    updateScale();
-    const resizeObserver = new ResizeObserver(updateScale);
-    resizeObserver.observe(container);
-    return () => resizeObserver.disconnect();
-  }, [viewportWidth]);
-  return { containerRef, scale };
-}
-function useIframeLoadDetection() {
-  const [loaded, setLoaded] = react.useState(false);
-  const iframeRef = react.useRef(null);
-  const onLoad = react.useCallback(() => {
-    const iframe = iframeRef.current;
-    if (!iframe) return;
-    setTimeout(() => {
-      try {
-        const doc = iframe.contentDocument;
-        if (!doc?.body) {
-          return;
-        }
-        const numElements = doc.querySelectorAll("*").length;
-        if (numElements > 20) setLoaded(true);
-      } catch {
-        setLoaded(true);
-      }
-    }, 1500);
-  }, []);
-  return { iframeRef, loaded, onLoad };
-}
-function MacBookFrame({ url, screenshot }) {
-  const viewportWidth = 1440;
-  const viewportHeight = 900;
-  const { containerRef, scale } = useScaledIframe(viewportWidth);
-  const { iframeRef, loaded: iframeLoaded, onLoad: onIframeLoad } = useIframeLoadDetection();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "relative rounded-t-[10px] p-[4px] pb-0",
-        style: {
-          background: "linear-gradient(135deg, #e8e8ed 0%, #d1d1d6 100%)",
-          boxShadow: "0 -4px 30px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.9)"
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: "relative rounded-t-[7px] px-[8px] pt-[8px] pb-0",
-            style: { background: "#0a0a0a" },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: "absolute top-0 left-1/2 -translate-x-1/2 w-[70px] h-[18px] flex items-center justify-center z-10",
-                  style: { background: "#0a0a0a", borderRadius: "0 0 10px 10px" },
-                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[5px] h-[5px] rounded-full", style: { background: "#2a3a2a", boxShadow: "0 0 0 1px #1a1a1a" } })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "relative overflow-hidden rounded-t-[3px]", style: { aspectRatio: `${viewportWidth}/${viewportHeight}`, background: "#0a0a0a" }, children: [
-                screenshot && /* @__PURE__ */ jsxRuntime.jsx("img", { src: screenshot, alt: "Desktop preview", style: { width: "100%", height: "100%", objectFit: "cover", objectPosition: "top center", display: "block", position: "absolute", inset: 0, zIndex: 2, opacity: iframeLoaded ? 0 : 1, transition: "opacity 0.8s ease", pointerEvents: "none" } }),
-                url && /* @__PURE__ */ jsxRuntime.jsx("iframe", { src: url, title: "Desktop", loading: "eager", scrolling: "no", tabIndex: -1, sandbox: "allow-scripts allow-same-origin", ref: iframeRef, onLoad: onIframeLoad, className: "border-0 pointer-events-none", style: { position: "absolute", top: 0, left: 0, width: `${viewportWidth}px`, height: `${viewportHeight}px`, transformOrigin: "top left", transform: `scale(${scale})` } })
-              ] })
-            ]
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[8px]", style: { background: "#0a0a0a", boxShadow: "0 1px 4px rgba(0,0,0,0.3)" } }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "relative h-[12px] rounded-b-[10px]",
-        style: {
-          background: "linear-gradient(to bottom, #e0e0e5, #c8c8cd 20%, #b0b0b5 80%, #a0a0a5)",
-          boxShadow: "0 4px 15px rgba(0,0,0,0.3)"
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "absolute top-0 left-1/2 -translate-x-1/2 w-[25%] h-[4px] rounded-b-[4px]",
-            style: { background: "linear-gradient(to bottom, #909095, #a8a8ad)" }
-          }
-        )
-      }
-    )
-  ] });
-}
-function IPadFrame({ url, screenshot }) {
-  const viewportWidth = 768;
-  const viewportHeight = 1024;
-  const { containerRef, scale } = useScaledIframe(viewportWidth);
-  const { iframeRef, loaded: iframeLoaded, onLoad: onIframeLoad } = useIframeLoadDetection();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative p-[1.5%]", style: { background: "linear-gradient(135deg, #e8e8ed 0%, #d1d1d6 100%)", borderRadius: "8% / 6%", boxShadow: "0 30px 60px -15px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.9) inset, inset 0 1px 0 rgba(255,255,255,0.8)" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative p-[2%]", style: { background: "#0a0a0a", borderRadius: "6% / 4.5%" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[1.2%] left-1/2 -translate-x-1/2 w-[1.8%] aspect-square rounded-full z-10", style: { background: "#1a1a1f" } }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "relative overflow-hidden", style: { borderRadius: "2%", aspectRatio: `${viewportWidth}/${viewportHeight}`, background: "#0a0a0a" }, children: [
-      screenshot && /* @__PURE__ */ jsxRuntime.jsx("img", { src: screenshot, alt: "Tablet preview", style: { width: "100%", height: "100%", objectFit: "cover", objectPosition: "top center", display: "block", position: "absolute", inset: 0, zIndex: 2, opacity: iframeLoaded ? 0 : 1, transition: "opacity 0.8s ease", pointerEvents: "none" } }),
-      url && /* @__PURE__ */ jsxRuntime.jsx("iframe", { src: url, title: "Tablet", loading: "eager", scrolling: "no", tabIndex: -1, sandbox: "allow-scripts allow-same-origin", ref: iframeRef, onLoad: onIframeLoad, className: "border-0 pointer-events-none", style: { position: "absolute", top: 0, left: 0, width: `${viewportWidth}px`, height: `${viewportHeight}px`, transformOrigin: "top left", transform: `scale(${scale})` } })
-    ] })
-  ] }) });
-}
-function IPhoneFrame({ url, screenshot }) {
-  const viewportWidth = 393;
-  const viewportHeight = 852;
-  const { containerRef, scale } = useScaledIframe(viewportWidth);
-  const { iframeRef, loaded: iframeLoaded, onLoad: onIframeLoad } = useIframeLoadDetection();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: "relative p-[2.5%]",
-      style: {
-        background: "linear-gradient(135deg, #e8e8ed 0%, #d1d1d6 100%)",
-        borderRadius: "18% / 8%",
-        boxShadow: "0 30px 60px -15px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.9) inset, inset 0 1px 0 rgba(255,255,255,0.8)"
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-[18%] w-[1%] h-[6%] rounded-l-sm", style: { background: "#c8c8cd" } }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-[26%] w-[1%] h-[10%] rounded-l-sm", style: { background: "#c8c8cd" } }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-[38%] w-[1%] h-[10%] rounded-l-sm", style: { background: "#c8c8cd" } }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 top-[22%] w-[1%] h-[12%] rounded-r-sm", style: { background: "#c8c8cd" } }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: "relative p-[3%]",
-            style: { background: "#0a0a0a", borderRadius: "14% / 6%" },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: "absolute top-[2.5%] left-1/2 -translate-x-1/2 w-[28%] h-[3.5%] rounded-full z-10",
-                  style: { background: "#1a1a1a" }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "relative overflow-hidden", style: { borderRadius: "8% / 4%", aspectRatio: `${viewportWidth}/${viewportHeight}`, background: "#0a0a0a" }, children: [
-                screenshot && /* @__PURE__ */ jsxRuntime.jsx("img", { src: screenshot, alt: "Mobile preview", style: { width: "100%", height: "100%", objectFit: "cover", objectPosition: "top center", display: "block", position: "absolute", inset: 0, zIndex: 2, opacity: iframeLoaded ? 0 : 1, transition: "opacity 0.8s ease", pointerEvents: "none" } }),
-                url && /* @__PURE__ */ jsxRuntime.jsx("iframe", { src: url, title: "Mobile", loading: "eager", scrolling: "no", tabIndex: -1, sandbox: "allow-scripts allow-same-origin", ref: iframeRef, onLoad: onIframeLoad, className: "border-0 pointer-events-none", style: { position: "absolute", top: 0, left: 0, width: `${viewportWidth}px`, height: `${viewportHeight}px`, transformOrigin: "top left", transform: `scale(${scale})` } })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: "absolute bottom-[2%] left-1/2 -translate-x-1/2 w-[34%] h-[1%] rounded-full",
-                  style: { background: "rgba(255,255,255,0.25)" }
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-function DeviceTrifolio({
-  url,
-  screenshots,
-  className = "",
-  disableAnimation = false
-}) {
-  const trifolioRef = react.useRef(null);
-  const frameUrl = url || "";
-  react.useEffect(() => {
-    gsap2__default.default.registerPlugin(ScrollTrigger.ScrollTrigger);
-    const container = trifolioRef.current;
-    if (!container || disableAnimation) return;
-    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    if (prefersReducedMotion) return;
-    const macbook = container.querySelector('[data-device="macbook"]');
-    const ipad = container.querySelector('[data-device="ipad"]');
-    const iphone = container.querySelector('[data-device="iphone"]');
-    if (!macbook || !ipad || !iphone) return;
-    const ctx = gsap2__default.default.context(() => {
-      gsap2__default.default.set(container, { opacity: 0 });
-      gsap2__default.default.set(macbook, { opacity: 0, y: 40 });
-      gsap2__default.default.set(ipad, { opacity: 0, x: -60, y: 30 });
-      gsap2__default.default.set(iphone, { opacity: 0, x: 60, y: 30 });
-      const tl = gsap2__default.default.timeline({
-        scrollTrigger: {
-          trigger: container,
-          start: "top bottom",
-          toggleActions: "play none none none"
-        }
-      });
-      tl.to(container, { opacity: 1, duration: 0.3 }).to(macbook, { opacity: 1, y: 0, duration: 0.7, ease: "power2.out" }, 0.1).to(ipad, { opacity: 1, x: 0, y: 0, duration: 0.6, ease: "power2.out" }, 0.25).to(iphone, { opacity: 1, x: 0, y: 0, duration: 0.6, ease: "power2.out" }, 0.4);
-    }, container);
-    return () => ctx.revert();
-  }, [disableAnimation]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: trifolioRef,
-      "data-screenshot-target": "device-trifolio",
-      className: `relative w-full min-w-0 max-w-full overflow-x-clip ${className}`,
-      style: { aspectRatio: "11/5", minHeight: "200px" },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            "data-device": "macbook",
-            className: "absolute left-1/2 -translate-x-1/2 bottom-0 w-[65%] z-10",
-            children: /* @__PURE__ */ jsxRuntime.jsx(MacBookFrame, { url: frameUrl, screenshot: screenshots?.desktop })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            "data-device": "ipad",
-            className: "absolute left-[8%] bottom-0 w-[28%] z-20",
-            children: /* @__PURE__ */ jsxRuntime.jsx(IPadFrame, { url: frameUrl, screenshot: screenshots?.tablet })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            "data-device": "iphone",
-            className: "absolute right-[10%] bottom-0 w-[14%] z-30",
-            children: /* @__PURE__ */ jsxRuntime.jsx(IPhoneFrame, { url: frameUrl, screenshot: screenshots?.mobile })
-          }
-        )
-      ]
-    }
-  );
-}
-function HeroSection({ data, screenshots, liveUrl }) {
-  const bgRef = react.useRef(null);
-  const deviceRef = react.useRef(null);
-  const shots = screenshots || data.screenshots;
-  const url = liveUrl || data.liveUrl;
-  react.useEffect(() => {
-    gsap2__default.default.registerPlugin(ScrollTrigger.ScrollTrigger);
-    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    if (prefersReducedMotion) return;
-    const ctx = gsap2__default.default.context(() => {
-      if (bgRef.current) {
-        gsap2__default.default.to(bgRef.current, {
-          yPercent: 30,
-          ease: "none",
-          scrollTrigger: {
-            trigger: bgRef.current.parentElement,
-            start: "top top",
-            end: "bottom top",
-            scrub: true
-          }
-        });
-      }
-    });
-    return () => ctx.revert();
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "section",
-    {
-      className: "relative overflow-hidden w-full",
-      style: {
-        minHeight: "90vh",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        background: "var(--sk-bg, #0a0a0a)"
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            ref: bgRef,
-            className: "absolute inset-0 pointer-events-none",
-            style: {
-              background: `radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent) 0%, transparent 70%)`,
-              willChange: "transform"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 max-w-7xl mx-auto w-full min-w-0 px-4 sm:px-6 py-24 lg:py-32", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 min-w-0 lg:grid-cols-2 gap-12 lg:gap-16 items-start", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 max-w-full flex-col gap-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 20, duration: 0.6, children: /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: "inline-flex items-center self-start px-4 py-1.5 rounded-full text-sm font-medium",
-                style: {
-                  background: "color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)",
-                  color: "var(--sk-primary, #6366f1)",
-                  border: "1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 25%, transparent)"
-                },
-                children: data.category?.replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              SplitHeadline,
-              {
-                tag: "h1",
-                className: "text-4xl md:text-5xl lg:text-6xl font-bold leading-tight",
-                style: {
-                  color: "var(--sk-text-primary, #ffffff)",
-                  fontFamily: "var(--sk-font-heading, inherit)"
-                },
-                children: data.headline
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 20, delay: 0.2, children: /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                className: "text-xl md:text-2xl font-medium",
-                style: { color: "var(--sk-text-secondary, #a1a1aa)" },
-                children: data.subheadline
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 20, delay: 0.3, children: /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                className: "text-base md:text-lg leading-relaxed",
-                style: { color: "var(--sk-text-tertiary, #71717a)" },
-                children: data.description
-              }
-            ) }),
-            data.services.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 20, delay: 0.4, stagger: 0.05, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: data.services.map((service) => /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: "px-3 py-1 rounded-full text-xs font-medium",
-                style: {
-                  background: "var(--sk-surface, rgba(255,255,255,0.05))",
-                  color: "var(--sk-text-secondary, #a1a1aa)",
-                  border: "1px solid var(--sk-border, rgba(255,255,255,0.1))"
-                },
-                children: service
-              },
-              service
-            )) }) }),
-            url && /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 20, delay: 0.5, children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "a",
-              {
-                href: url,
-                target: "_blank",
-                rel: "noopener noreferrer",
-                className: "inline-flex items-center gap-2 self-start px-6 py-3 rounded-xl text-sm font-semibold transition-opacity hover:opacity-90",
-                style: {
-                  background: "var(--sk-primary, #6366f1)",
-                  color: "#ffffff"
-                },
-                children: [
-                  "View Live Site",
-                  /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 3h7v7M13 3L3 13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
-                ]
-              }
-            ) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 max-w-full flex-col gap-10 lg:pt-8", children: [
-            (url || shots?.desktop || shots?.tablet || shots?.mobile) && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: deviceRef, className: "min-w-0 max-w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
-              DeviceTrifolio,
-              {
-                screenshots: {
-                  desktop: shots?.desktop,
-                  tablet: shots?.tablet,
-                  mobile: shots?.mobile
-                },
-                url
-              }
-            ) }),
-            data.kpis.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 30, delay: 0.6, stagger: 0.1, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3", children: data.kpis.map((kpi, i) => /* @__PURE__ */ jsxRuntime.jsxs(chunkKEOHORIH_cjs.GlassCard, { padding: "sm", hover: false, className: "text-center", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: "text-2xl md:text-3xl font-bold",
-                  style: { color: "var(--sk-primary, #6366f1)" },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    chunkXONXEFJY_cjs.AnimatedCounter,
-                    {
-                      value: kpi.value,
-                      suffix: kpi.suffix,
-                      prefix: kpi.prefix,
-                      duration: 2.5
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: "text-xs mt-1 font-medium",
-                  style: { color: "var(--sk-text-secondary, #a1a1aa)" },
-                  children: kpi.label
-                }
-              )
-            ] }, i)) }) })
-          ] })
-        ] }) })
-      ]
-    }
-  );
-}
-var ChallengesSection = dynamic__default.default(() => import('./ChallengesSection-IZ3DHECS.cjs'), { ssr: true });
-var StrategySection = dynamic__default.default(() => import('./StrategySection-CJ7Y6OFQ.cjs'), { ssr: true });
-var ResultsSection = dynamic__default.default(() => import('./ResultsSection-XLGMMQKY.cjs'), { ssr: true });
-var TechStackSection = dynamic__default.default(() => import('./TechStackSection-VTNNZR5V.cjs'), { ssr: true });
-var ServicesSection = dynamic__default.default(() => import('./ServicesSection-WJMGK2MF.cjs'), { ssr: true });
-var TestimonialSection = dynamic__default.default(() => import('./TestimonialSection-XPTFUQIN.cjs'), { ssr: true });
-var GallerySection = dynamic__default.default(() => import('./GallerySection-WJ4PQDBI.cjs'), { ssr: true });
-var VideoSection = dynamic__default.default(() => import('./VideoSection-G3DFS7UH.cjs'), { ssr: true });
-var TeamSection = dynamic__default.default(() => import('./TeamSection-DZVSNZE6.cjs'), { ssr: true });
-var FeatureSpotlightSection = dynamic__default.default(() => import('./FeatureSpotlightSection-WRHXS7TU.cjs'), { ssr: true });
-var BeforeAfterSection = dynamic__default.default(() => import('./BeforeAfterSection-JTORBR3A.cjs'), { ssr: true });
-var MetricsTimelineSection = dynamic__default.default(() => import('./MetricsTimelineSection-4L6DUHJ5.cjs'), { ssr: true });
-var ConversionFunnelSection = dynamic__default.default(() => import('./ConversionFunnelSection-AUUSJ5HQ.cjs'), { ssr: true });
-var PerformanceSection = dynamic__default.default(() => import('./PerformanceSection-24TVVFZA.cjs'), { ssr: true });
-var SiteArchitectureSection = dynamic__default.default(() => import('./SiteArchitectureSection-J7BPBERH.cjs'), { ssr: true });
-var SpeedComparisonSection = dynamic__default.default(() => import('./SpeedComparisonSection-EZKFQVGW.cjs'), { ssr: true });
-var DesignSystemSection = dynamic__default.default(() => import('./DesignSystemSection-KXIQXITF.cjs'), { ssr: true });
-var DetailsSection = dynamic__default.default(() => import('./DetailsSection-TTUZAPZZ.cjs'), { ssr: true });
-var CTASection = dynamic__default.default(() => import('./CTASection-4JKLXEUF.cjs'), { ssr: true });
-function renderSection(section, item, index) {
-  const key = `${section.sectionType}-${index}`;
-  switch (section.sectionType) {
-    case "portfolioHero":
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        HeroSection,
-        {
-          data: section.data,
-          screenshots: item.hero_screenshots ?? void 0,
-          liveUrl: item.live_url ?? void 0
-        },
-        key
-      );
-    case "portfolioChallenges":
-      return /* @__PURE__ */ jsxRuntime.jsx(ChallengesSection, { data: section.data }, key);
-    case "portfolioStrategy":
-      return /* @__PURE__ */ jsxRuntime.jsx(StrategySection, { data: section.data }, key);
-    case "portfolioResults":
-      return /* @__PURE__ */ jsxRuntime.jsx(ResultsSection, { data: section.data }, key);
-    case "portfolioTechStack":
-      return /* @__PURE__ */ jsxRuntime.jsx(TechStackSection, { data: section.data }, key);
-    case "portfolioServices":
-      return /* @__PURE__ */ jsxRuntime.jsx(ServicesSection, { data: section.data }, key);
-    case "portfolioTestimonial":
-      return /* @__PURE__ */ jsxRuntime.jsx(TestimonialSection, { data: section.data }, key);
-    case "portfolioGallery":
-      return /* @__PURE__ */ jsxRuntime.jsx(GallerySection, { data: section.data }, key);
-    case "portfolioVideo":
-      return /* @__PURE__ */ jsxRuntime.jsx(VideoSection, { data: section.data }, key);
-    case "portfolioTeam":
-      return /* @__PURE__ */ jsxRuntime.jsx(TeamSection, { data: section.data }, key);
-    case "portfolioFeatureSpotlight":
-      return /* @__PURE__ */ jsxRuntime.jsx(FeatureSpotlightSection, { data: section.data }, key);
-    case "portfolioBeforeAfter":
-      return /* @__PURE__ */ jsxRuntime.jsx(BeforeAfterSection, { data: section.data }, key);
-    case "portfolioMetricsTimeline":
-      return /* @__PURE__ */ jsxRuntime.jsx(MetricsTimelineSection, { data: section.data }, key);
-    case "portfolioConversionFunnel":
-      return /* @__PURE__ */ jsxRuntime.jsx(ConversionFunnelSection, { data: section.data }, key);
-    case "portfolioPerformance":
-      return /* @__PURE__ */ jsxRuntime.jsx(PerformanceSection, { data: section.data }, key);
-    case "portfolioSpeedComparison":
-      return /* @__PURE__ */ jsxRuntime.jsx(SpeedComparisonSection, { data: section.data }, key);
-    case "portfolioSiteArchitecture":
-      return /* @__PURE__ */ jsxRuntime.jsx(SiteArchitectureSection, { data: chunk633UMQQH_cjs.sanitizeSiteArchitectureData(section.data) }, key);
-    case "portfolioDesignSystem":
-      return /* @__PURE__ */ jsxRuntime.jsx(DesignSystemSection, { data: section.data }, key);
-    case "portfolioDetails":
-      return /* @__PURE__ */ jsxRuntime.jsx(DetailsSection, { data: section.data }, key);
-    case "portfolioCTA":
-      return /* @__PURE__ */ jsxRuntime.jsx(CTASection, { data: section.data }, key);
-    case "portfolioSeo":
-      return null;
-    default:
-      return null;
-  }
-}
-var SECTION_ORDER = {
-  portfolioHero: 0,
-  portfolioChallenges: 1,
-  portfolioStrategy: 2,
-  portfolioResults: 3,
-  portfolioPerformance: 4,
-  portfolioSpeedComparison: 5,
-  portfolioSiteArchitecture: 6,
-  portfolioTechStack: 7,
-  portfolioDesignSystem: 8,
-  portfolioServices: 9,
-  portfolioBeforeAfter: 10,
-  portfolioTestimonial: 11,
-  portfolioMetricsTimeline: 12,
-  portfolioConversionFunnel: 13,
-  portfolioDetails: 11,
-  portfolioSeo: 12,
-  portfolioCta: 13
-};
-function PortfolioPage({ item }) {
-  const sortedSections = [...item.sections].sort(
-    (a, b) => (SECTION_ORDER[a.sectionType] ?? 99) - (SECTION_ORDER[b.sectionType] ?? 99)
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx("article", { className: "flex w-full min-w-0 max-w-full flex-col overflow-x-clip", children: sortedSections.map((section, index) => {
-    const rendered = renderSection(section, item, index);
-    if (!rendered) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: rendered }, `wrapper-${section.sectionType}-${index}`);
-  }) });
-}
-
-// src/types.ts
-var PORTFOLIO_SECTION_TYPES = [
-  "portfolioHero",
-  "portfolioChallenges",
-  "portfolioStrategy",
-  "portfolioResults",
-  "portfolioTechStack",
-  "portfolioServices",
-  "portfolioTestimonial",
-  "portfolioGallery",
-  "portfolioVideo",
-  "portfolioTeam",
-  "portfolioFeatureSpotlight",
-  "portfolioBeforeAfter",
-  "portfolioMetricsTimeline",
-  "portfolioConversionFunnel",
-  "portfolioPerformance",
-  "portfolioSpeedComparison",
-  "portfolioSiteArchitecture",
-  "portfolioDesignSystem",
-  "portfolioDetails",
-  "portfolioSeo",
-  "portfolioCTA"
-];
-
-exports.PORTFOLIO_SECTION_TYPES = PORTFOLIO_SECTION_TYPES;
-exports.PortfolioPage = PortfolioPage;
-//# sourceMappingURL=chunk-AVCH4LMG.cjs.map
-//# sourceMappingURL=chunk-AVCH4LMG.cjs.map