@sonordev/agency-site-kit 0.1.0 → 0.1.2

package/dist/chunk-JTI3F3QY.cjs

@@ -0,0 +1,619 @@
+'use strict';
+
+var chunkXONXEFJY_cjs = require('./chunk-XONXEFJY.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-EE6VQSXM.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: 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-JTI3F3QY.cjs.map
+//# sourceMappingURL=chunk-JTI3F3QY.cjs.map