@sonordev/agency-site-kit 0.3.1 → 0.4.1

package/dist/portfolio/sections/ChallengesSection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/ChallengesSection.tsx"],"names":[],"mappings":"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","file":"ChallengesSection.js","sourcesContent":["// Server component — renders on the server; the client primitives below cross the\n// RSC boundary via package subpaths (never import them relatively here).\nimport React from 'react';\nimport type { PortfolioChallengesData } from '../../../types';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\n\ninterface ChallengesSectionProps {\n  data: PortfolioChallengesData;\n}\n\n/** Icon registry lookup. Returns an inline SVG for known icon keys. */\nfunction ChallengeIcon({ name }: { name?: string }) {\n  if (!name) return null;\n\n  const icons: Record<string, React.ReactNode> = {\n    speed: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    ),\n    seo: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"11\" cy=\"11\" r=\"8\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        <path d=\"M21 21l-4.35-4.35\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n      </svg>\n    ),\n    design: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    ),\n    conversion: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M22 12h-4l-3 9L9 3l-3 9H2\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    ),\n    mobile: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        <path d=\"M12 18h.01\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n      </svg>\n    ),\n    content: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        <path d=\"M14 2v6h6M16 13H8M16 17H8M10 9H8\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    ),\n  };\n\n  return (\n    <span style={{ color: 'var(--sk-primary, #6366f1)' }}>\n      {icons[name] || icons.speed}\n    </span>\n  );\n}\n\nexport default function ChallengesSection({ data }: ChallengesSectionProps) {\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-7xl mx-auto px-6\">\n        <ScrollReveal y={30}>\n          <h2\n            className=\"text-3xl md:text-4xl font-bold mb-4\"\n            style={{\n              color: 'var(--sk-text-primary, #ffffff)',\n              fontFamily: 'var(--sk-font-heading, inherit)',\n            }}\n          >\n            Challenges &amp; Solutions\n          </h2>\n          <p\n            className=\"text-lg mb-12 max-w-2xl\"\n            style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n          >\n            What stood in the way, and how we cleared it.\n          </p>\n        </ScrollReveal>\n\n        <div className=\"flex flex-col gap-8\">\n          {data.items.map((item, index) => {\n            const isEven = index % 2 === 0;\n            return (\n              <ScrollReveal key={index} y={40} delay={index * 0.1}>\n                <GlassCard padding=\"lg\" hover={false}>\n                  <div\n                    className={`flex flex-col lg:flex-row gap-8 ${\n                      isEven ? '' : 'lg:flex-row-reverse'\n                    }`}\n                  >\n                    {/* Challenge side */}\n                    <div className=\"flex-1 flex flex-col gap-3\">\n                      <div className=\"flex items-center gap-3\">\n                        {/* Number badge */}\n                        <span\n                          className=\"flex items-center justify-center w-10 h-10 rounded-full text-sm font-bold shrink-0\"\n                          style={{\n                            background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)',\n                            color: 'var(--sk-primary, #6366f1)',\n                            border: '1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 25%, transparent)',\n                          }}\n                        >\n                          {String(index + 1).padStart(2, '0')}\n                        </span>\n                        <ChallengeIcon name={item.icon} />\n                        <h3\n                          className=\"text-xl font-semibold\"\n                          style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                        >\n                          {item.title}\n                        </h3>\n                      </div>\n                      <p\n                        className=\"text-base leading-relaxed\"\n                        style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                      >\n                        {item.description}\n                      </p>\n                    </div>\n\n                    {/* Divider */}\n                    <div\n                      className=\"hidden lg:block w-px self-stretch\"\n                      style={{\n                        background: 'var(--sk-border, rgba(255,255,255,0.1))',\n                      }}\n                    />\n                    <div\n                      className=\"lg:hidden h-px w-full\"\n                      style={{\n                        background: 'var(--sk-border, rgba(255,255,255,0.1))',\n                      }}\n                    />\n\n                    {/* Solution side */}\n                    <div className=\"flex-1 flex flex-col gap-3\">\n                      <div className=\"flex items-center gap-2\">\n                        <svg\n                          width=\"20\"\n                          height=\"20\"\n                          viewBox=\"0 0 20 20\"\n                          fill=\"none\"\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          style={{ color: '#10b981' }}\n                        >\n                          <path\n                            d=\"M16.667 5L7.5 14.167 3.333 10\"\n                            stroke=\"currentColor\"\n                            strokeWidth=\"2\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                          />\n                        </svg>\n                        <span\n                          className=\"text-sm font-semibold uppercase tracking-wider\"\n                          style={{ color: '#10b981' }}\n                        >\n                          Solution\n                        </span>\n                      </div>\n                      <p\n                        className=\"text-base leading-relaxed\"\n                        style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n                      >\n                        {item.solution}\n                      </p>\n                      {item.result && (\n                        <div\n                          className=\"mt-2 px-4 py-2 rounded-lg text-sm\"\n                          style={{\n                            background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 8%, transparent)',\n                            color: 'var(--sk-primary, #6366f1)',\n                            border: '1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)',\n                          }}\n                        >\n                          <span className=\"font-semibold\">Result:</span> {item.result}\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                </GlassCard>\n              </ScrollReveal>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/portfolio/sections/ConversionFunnelSection.cjs

@@ -0,0 +1,263 @@
+'use client';
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/portfolio/components/sections/ConversionFunnelSection.tsx
+var ConversionFunnelSection_exports = {};
+__export(ConversionFunnelSection_exports, {
+  default: () => ConversionFunnelSection
+});
+module.exports = __toCommonJS(ConversionFunnelSection_exports);
+var import_react = __toESM(require("react"), 1);
+
+// src/shared/images.ts
+var SANITY_ASSET_REF = /^image-[A-Za-z0-9]+-\d+x\d+-[a-z0-9]+$/;
+var FILENAME_DIMS = /-(\d{2,5})x(\d{2,5})\.[a-z0-9]+(?:\?.*)?$/i;
+var warnedAboutRefs = false;
+function resolvePortfolioImage(input) {
+  const raw = typeof input === "string" ? input : input?.asset?._ref ?? "";
+  const value = (raw || "").trim();
+  if (!value) return null;
+  if (SANITY_ASSET_REF.test(value)) {
+    if (!warnedAboutRefs && typeof console !== "undefined") {
+      warnedAboutRefs = true;
+      console.warn(
+        "[@sonordev/agency-site-kit] Received a raw Sanity asset ref instead of an image URL \u2014 skipping render. The Sonor API should resolve image refs to cdn.sanity.io URLs before returning portfolio sections."
+      );
+    }
+    return null;
+  }
+  if (!/^https?:\/\//i.test(value) && !value.startsWith("/")) return null;
+  const dims = value.match(FILENAME_DIMS);
+  if (dims) {
+    const width = parseInt(dims[1], 10);
+    const height = parseInt(dims[2], 10);
+    if (width > 0 && height > 0) return { url: value, width, height };
+  }
+  return { url: value };
+}
+
+// src/portfolio/components/sections/ConversionFunnelSection.tsx
+var import_ScrollReveal = __toESM(require("@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal"), 1);
+var import_AnimatedCounter = __toESM(require("@sonordev/agency-site-kit/portfolio/primitives/AnimatedCounter"), 1);
+var import_GlassCard = __toESM(require("@sonordev/agency-site-kit/portfolio/primitives/GlassCard"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var EASE = "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
+function ConversionFunnelSection({ data }) {
+  const funnelRef = (0, import_react.useRef)(null);
+  const flowLinesRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const funnel = funnelRef.current;
+    if (!funnel) return;
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (prefersReducedMotion) return;
+    const rect = funnel.getBoundingClientRect();
+    if (rect.top < window.innerHeight && rect.bottom > 0) return;
+    const fills = Array.from(funnel.querySelectorAll(".funnel-stage-fill"));
+    const connectors = Array.from(
+      flowLinesRef.current?.querySelectorAll(".flow-connector") ?? []
+    );
+    if (fills.length === 0 && connectors.length === 0) return;
+    for (const el of [...fills, ...connectors]) {
+      el.style.transformOrigin = "left center";
+      el.style.transform = "scaleX(0)";
+    }
+    for (const el of connectors) el.style.opacity = "0";
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        io.disconnect();
+        fills.forEach((el, i) => {
+          el.style.transition = `transform 0.8s ${EASE} ${i * 0.2}s`;
+          el.style.transform = "scaleX(1)";
+        });
+        connectors.forEach((el, i) => {
+          const d = 0.3 + i * 0.15;
+          el.style.transition = `transform 0.5s ${EASE} ${d}s, opacity 0.5s ${EASE} ${d}s`;
+          el.style.transform = "scaleX(1)";
+          el.style.opacity = "1";
+        });
+      },
+      { rootMargin: "0px 0px -30% 0px" }
+      // ≈ the old 'top 70%' trigger
+    );
+    io.observe(funnel);
+    return () => {
+      io.disconnect();
+      for (const el of [...fills, ...connectors]) {
+        el.style.transformOrigin = "";
+        el.style.transform = "";
+        el.style.transition = "";
+        el.style.opacity = "";
+      }
+    };
+  }, [data.stages.length]);
+  const maxValue = Math.max(...data.stages.map((s) => s.value), 1);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "section",
+    {
+      className: "w-full py-20 md:py-28",
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "max-w-6xl mx-auto px-6", children: [
+        (data.title || data.description) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ScrollReveal.default, { y: 30, children: [
+          data.title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "h2",
+            {
+              className: "text-3xl md:text-4xl font-bold mb-4",
+              style: {
+                color: "var(--sk-text-primary, #ffffff)",
+                fontFamily: "var(--sk-font-heading, inherit)"
+              },
+              children: data.title
+            }
+          ),
+          data.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "p",
+            {
+              className: "text-lg mb-12 max-w-2xl",
+              style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+              children: data.description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: funnelRef, className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-end gap-0 relative", ref: flowLinesRef, children: data.stages.map((stage, index) => {
+          const widthPercent = 60 + stage.value / maxValue * 40;
+          const stageColor = stage.color || "var(--sk-primary, #6366f1)";
+          const icon = resolvePortfolioImage(stage.icon);
+          const dropOff = index > 0 ? Math.round(
+            (data.stages[index - 1].value - stage.value) / data.stages[index - 1].value * 100
+          ) : null;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, { children: [
+            dropOff !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center justify-center px-2 shrink-0", style: { minWidth: 48 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: "flow-connector h-0.5 w-full mb-1",
+                  style: {
+                    background: `linear-gradient(to right, ${data.stages[index - 1].color || "var(--sk-primary, #6366f1)"}, ${stageColor})`,
+                    willChange: "transform"
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "span",
+                {
+                  className: "text-xs font-medium whitespace-nowrap",
+                  style: { color: "var(--sk-text-tertiary, #71717a)" },
+                  children: [
+                    "-",
+                    dropOff,
+                    "%"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1", style: { maxWidth: `${widthPercent}%` }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlassCard.default, { padding: "md", hover: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative overflow-hidden rounded-lg", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: "funnel-stage-fill absolute inset-0 rounded-lg opacity-15",
+                  style: {
+                    background: stageColor,
+                    willChange: "transform"
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex flex-col items-center gap-2 py-4", children: [
+                icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: icon.url, alt: "", width: 24, height: 24, loading: "lazy", decoding: "async", className: "w-6 h-6 object-contain" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
+                  {
+                    className: "text-xs font-semibold uppercase tracking-wider text-center",
+                    style: { color: "var(--sk-text-tertiary, #71717a)" },
+                    children: stage.label
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    className: "text-2xl font-bold",
+                    style: { color: stageColor },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AnimatedCounter.default, { value: stage.value, duration: 2 })
+                  }
+                )
+              ] })
+            ] }) }) })
+          ] }, index);
+        }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "md:hidden flex flex-col gap-3", children: data.stages.map((stage, index) => {
+          const widthPercent = 60 + stage.value / maxValue * 40;
+          const stageColor = stage.color || "var(--sk-primary, #6366f1)";
+          const icon = resolvePortfolioImage(stage.icon);
+          const dropOff = index > 0 ? Math.round(
+            (data.stages[index - 1].value - stage.value) / data.stages[index - 1].value * 100
+          ) : null;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, { children: [
+            dropOff !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-center py-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 4v12M6 12l4 4 4-4", stroke: "var(--sk-text-tertiary, #71717a)", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "span",
+                {
+                  className: "text-xs font-medium ml-2",
+                  style: { color: "var(--sk-text-tertiary, #71717a)" },
+                  children: [
+                    "-",
+                    dropOff,
+                    "% drop-off"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollReveal.default, { y: 20, delay: index * 0.1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: `${widthPercent}%`, marginLeft: "auto", marginRight: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlassCard.default, { padding: "md", hover: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-4", children: [
+              icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: icon.url, alt: "", width: 24, height: 24, loading: "lazy", decoding: "async", className: "w-6 h-6 object-contain shrink-0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  className: "text-xs font-semibold uppercase tracking-wider",
+                  style: { color: "var(--sk-text-tertiary, #71717a)" },
+                  children: stage.label
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: "text-xl font-bold",
+                  style: { color: stageColor },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AnimatedCounter.default, { value: stage.value, duration: 2 })
+                }
+              )
+            ] }) }) }) })
+          ] }, index);
+        }) })
+      ] })
+    }
+  );
+}
+//# sourceMappingURL=ConversionFunnelSection.cjs.map

package/dist/portfolio/sections/ConversionFunnelSection.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/ConversionFunnelSection.tsx","../../../src/shared/images.ts"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect } from 'react';\nimport type { PortfolioConversionFunnelData } from '../../../types';\nimport { resolvePortfolioImage } from '../../../shared/images';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport AnimatedCounter from '@sonordev/agency-site-kit/portfolio/primitives/AnimatedCounter';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\n\ninterface ConversionFunnelSectionProps {\n  data: PortfolioConversionFunnelData;\n}\n\nconst EASE = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'; // ≈ power2.out\n\nexport default function ConversionFunnelSection({ data }: ConversionFunnelSectionProps) {\n  const funnelRef = useRef<HTMLDivElement>(null);\n  const flowLinesRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const funnel = funnelRef.current;\n    if (!funnel) return;\n\n    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    if (prefersReducedMotion) return;\n\n    // Never re-hide a funnel already in the viewport at hydration.\n    const rect = funnel.getBoundingClientRect();\n    if (rect.top < window.innerHeight && rect.bottom > 0) return;\n\n    // Stage fills sweep left-to-right; flow connectors follow after.\n    const fills = Array.from(funnel.querySelectorAll<HTMLElement>('.funnel-stage-fill'));\n    const connectors = Array.from(\n      flowLinesRef.current?.querySelectorAll<HTMLElement>('.flow-connector') ?? [],\n    );\n    if (fills.length === 0 && connectors.length === 0) return;\n\n    // Hidden state\n    for (const el of [...fills, ...connectors]) {\n      el.style.transformOrigin = 'left center';\n      el.style.transform = 'scaleX(0)';\n    }\n    for (const el of connectors) el.style.opacity = '0';\n\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry.isIntersecting) return;\n        io.disconnect();\n        fills.forEach((el, i) => {\n          el.style.transition = `transform 0.8s ${EASE} ${i * 0.2}s`;\n          el.style.transform = 'scaleX(1)';\n        });\n        connectors.forEach((el, i) => {\n          const d = 0.3 + i * 0.15;\n          el.style.transition = `transform 0.5s ${EASE} ${d}s, opacity 0.5s ${EASE} ${d}s`;\n          el.style.transform = 'scaleX(1)';\n          el.style.opacity = '1';\n        });\n      },\n      { rootMargin: '0px 0px -30% 0px' }, // ≈ the old 'top 70%' trigger\n    );\n    io.observe(funnel);\n\n    return () => {\n      io.disconnect();\n      for (const el of [...fills, ...connectors]) {\n        el.style.transformOrigin = '';\n        el.style.transform = '';\n        el.style.transition = '';\n        el.style.opacity = '';\n      }\n    };\n  }, [data.stages.length]);\n\n  const maxValue = Math.max(...data.stages.map((s) => s.value), 1);\n\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-6xl mx-auto px-6\">\n        {(data.title || data.description) && (\n          <ScrollReveal y={30}>\n            {data.title && (\n              <h2\n                className=\"text-3xl md:text-4xl font-bold mb-4\"\n                style={{\n                  color: 'var(--sk-text-primary, #ffffff)',\n                  fontFamily: 'var(--sk-font-heading, inherit)',\n                }}\n              >\n                {data.title}\n              </h2>\n            )}\n            {data.description && (\n              <p\n                className=\"text-lg mb-12 max-w-2xl\"\n                style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n              >\n                {data.description}\n              </p>\n            )}\n          </ScrollReveal>\n        )}\n\n        {/* Desktop: horizontal funnel */}\n        <div ref={funnelRef} className=\"hidden md:block\">\n          <div className=\"flex items-end gap-0 relative\" ref={flowLinesRef}>\n            {data.stages.map((stage, index) => {\n              const widthPercent = 60 + (stage.value / maxValue) * 40;\n              const stageColor = stage.color || 'var(--sk-primary, #6366f1)';\n              const icon = resolvePortfolioImage(stage.icon);\n              const dropOff =\n                index > 0\n                  ? Math.round(\n                      ((data.stages[index - 1].value - stage.value) /\n                        data.stages[index - 1].value) *\n                        100,\n                    )\n                  : null;\n\n              return (\n                <React.Fragment key={index}>\n                  {/* Drop-off connector */}\n                  {dropOff !== null && (\n                    <div className=\"flex flex-col items-center justify-center px-2 shrink-0\" style={{ minWidth: 48 }}>\n                      <div\n                        className=\"flow-connector h-0.5 w-full mb-1\"\n                        style={{\n                          background: `linear-gradient(to right, ${data.stages[index - 1].color || 'var(--sk-primary, #6366f1)'}, ${stageColor})`,\n                          willChange: 'transform',\n                        }}\n                      />\n                      <span\n                        className=\"text-xs font-medium whitespace-nowrap\"\n                        style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                      >\n                        -{dropOff}%\n                      </span>\n                    </div>\n                  )}\n\n                  {/* Stage card */}\n                  <div className=\"flex-1\" style={{ maxWidth: `${widthPercent}%` }}>\n                    <GlassCard padding=\"md\" hover={false}>\n                      <div className=\"relative overflow-hidden rounded-lg\">\n                        {/* Animated fill bar */}\n                        <div\n                          className=\"funnel-stage-fill absolute inset-0 rounded-lg opacity-15\"\n                          style={{\n                            background: stageColor,\n                            willChange: 'transform',\n                          }}\n                        />\n                        <div className=\"relative flex flex-col items-center gap-2 py-4\">\n                          {/* Icon */}\n                          {icon && (\n                            <img src={icon.url} alt=\"\" width={24} height={24} loading=\"lazy\" decoding=\"async\" className=\"w-6 h-6 object-contain\" />\n                          )}\n                          <span\n                            className=\"text-xs font-semibold uppercase tracking-wider text-center\"\n                            style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                          >\n                            {stage.label}\n                          </span>\n                          <div\n                            className=\"text-2xl font-bold\"\n                            style={{ color: stageColor }}\n                          >\n                            <AnimatedCounter value={stage.value} duration={2} />\n                          </div>\n                        </div>\n                      </div>\n                    </GlassCard>\n                  </div>\n                </React.Fragment>\n              );\n            })}\n          </div>\n        </div>\n\n        {/* Mobile: vertical funnel */}\n        <div className=\"md:hidden flex flex-col gap-3\">\n          {data.stages.map((stage, index) => {\n            const widthPercent = 60 + (stage.value / maxValue) * 40;\n            const stageColor = stage.color || 'var(--sk-primary, #6366f1)';\n            const icon = resolvePortfolioImage(stage.icon);\n            const dropOff =\n              index > 0\n                ? Math.round(\n                    ((data.stages[index - 1].value - stage.value) /\n                      data.stages[index - 1].value) *\n                      100,\n                  )\n                : null;\n\n            return (\n              <React.Fragment key={index}>\n                {dropOff !== null && (\n                  <div className=\"flex items-center justify-center py-1\">\n                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                      <path d=\"M10 4v12M6 12l4 4 4-4\" stroke=\"var(--sk-text-tertiary, #71717a)\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                    </svg>\n                    <span\n                      className=\"text-xs font-medium ml-2\"\n                      style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                    >\n                      -{dropOff}% drop-off\n                    </span>\n                  </div>\n                )}\n                <ScrollReveal y={20} delay={index * 0.1}>\n                  <div style={{ width: `${widthPercent}%`, marginLeft: 'auto', marginRight: 'auto' }}>\n                    <GlassCard padding=\"md\" hover={false}>\n                      <div className=\"flex items-center gap-4\">\n                        {icon && (\n                          <img src={icon.url} alt=\"\" width={24} height={24} loading=\"lazy\" decoding=\"async\" className=\"w-6 h-6 object-contain shrink-0\" />\n                        )}\n                        <div className=\"flex-1\">\n                          <span\n                            className=\"text-xs font-semibold uppercase tracking-wider\"\n                            style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                          >\n                            {stage.label}\n                          </span>\n                        </div>\n                        <div\n                          className=\"text-xl font-bold\"\n                          style={{ color: stageColor }}\n                        >\n                          <AnimatedCounter value={stage.value} duration={2} />\n                        </div>\n                      </div>\n                    </GlassCard>\n                  </div>\n                </ScrollReveal>\n              </React.Fragment>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n","/**\n * Portfolio image resolution — single source of truth for turning the mixed\n * image shapes the API sends (plain URL strings, Supabase Storage URLs,\n * Sanity image objects) into something safe to render.\n *\n * IMPORTANT: a raw Sanity asset _ref (`image-{id}-{W}x{H}-{fmt}`) is an asset\n * ID, NOT a URL. Rendering it as `src` issues a garbage relative request\n * against the agency site's origin. Resolving refs to cdn.sanity.io URLs is\n * the API's job (it owns the Sanity project config); this helper refuses refs\n * so a broken image can never render, and warns once so the gap is visible.\n *\n * When a URL carries `-{W}x{H}.{ext}` dimensions (Sanity CDN URLs always do),\n * they're parsed out so callers can give next/image exact intrinsic sizes.\n */\n\nexport interface ResolvedPortfolioImage {\n  url: string;\n  width?: number;\n  height?: number;\n}\n\n/** Raw Sanity asset reference — an ID, not a URL. */\nconst SANITY_ASSET_REF = /^image-[A-Za-z0-9]+-\\d+x\\d+-[a-z0-9]+$/;\n\n/** `…-1200x800.png` (optionally with a query string) → intrinsic dimensions. */\nconst FILENAME_DIMS = /-(\\d{2,5})x(\\d{2,5})\\.[a-z0-9]+(?:\\?.*)?$/i;\n\ninterface SanityImageLike {\n  asset?: { _ref?: string };\n}\n\nlet warnedAboutRefs = false;\n\n/**\n * Resolve a portfolio image input into a renderable URL (+ intrinsic\n * dimensions when they can be derived). Returns null for empty values and\n * for unresolved Sanity refs — callers skip rendering in that case.\n */\nexport function resolvePortfolioImage(\n  input: string | SanityImageLike | null | undefined,\n): ResolvedPortfolioImage | null {\n  const raw =\n    typeof input === 'string' ? input : input?.asset?._ref ?? '';\n  const value = (raw || '').trim();\n  if (!value) return null;\n\n  if (SANITY_ASSET_REF.test(value)) {\n    if (!warnedAboutRefs && typeof console !== 'undefined') {\n      warnedAboutRefs = true;\n      console.warn(\n        '[@sonordev/agency-site-kit] Received a raw Sanity asset ref instead of an ' +\n          'image URL — skipping render. The Sonor API should resolve image refs to ' +\n          'cdn.sanity.io URLs before returning portfolio sections.',\n      );\n    }\n    return null;\n  }\n\n  // Only absolute http(s) URLs or site-rooted paths are renderable.\n  if (!/^https?:\\/\\//i.test(value) && !value.startsWith('/')) return null;\n\n  const dims = value.match(FILENAME_DIMS);\n  if (dims) {\n    const width = parseInt(dims[1], 10);\n    const height = parseInt(dims[2], 10);\n    if (width > 0 && height > 0) return { url: value, width, height };\n  }\n\n  return { url: value };\n}\n"],"mappings":"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","names":["ScrollReveal","React","GlassCard","AnimatedCounter"]}

package/dist/portfolio/sections/ConversionFunnelSection.d.cts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { b as PortfolioConversionFunnelData } from '../../types-D0nb6KAx.cjs';
+
+interface ConversionFunnelSectionProps {
+    data: PortfolioConversionFunnelData;
+}
+declare function ConversionFunnelSection({ data }: ConversionFunnelSectionProps): React.JSX.Element;
+
+export { ConversionFunnelSection as default };

package/dist/portfolio/sections/ConversionFunnelSection.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { b as PortfolioConversionFunnelData } from '../../types-D0nb6KAx.js';
+
+interface ConversionFunnelSectionProps {
+    data: PortfolioConversionFunnelData;
+}
+declare function ConversionFunnelSection({ data }: ConversionFunnelSectionProps): React.JSX.Element;
+
+export { ConversionFunnelSection as default };

package/dist/{ConversionFunnelSection-D3GE4NKE.js → portfolio/sections/ConversionFunnelSection.js}

@@ -1,62 +1,64 @@
 'use client';
-import { AnimatedCounter } from './chunk-2Y4O3LWM.js';
-import { GlassCard } from './chunk-YB4B3OMC.js';
-import { ScrollReveal } from './chunk-7CFFAKDM.js';
-import React, { useRef, useEffect } from 'react';
-import gsap from 'gsap';
-import { ScrollTrigger } from 'gsap/ScrollTrigger';
-import { jsx, jsxs } from 'react/jsx-runtime';
+"use client";
+import {
+  resolvePortfolioImage
+} from "../../chunk-QDXZ27R7.js";
 
+// src/portfolio/components/sections/ConversionFunnelSection.tsx
+import React, { useRef, useEffect } from "react";
+import ScrollReveal from "@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal";
+import AnimatedCounter from "@sonordev/agency-site-kit/portfolio/primitives/AnimatedCounter";
+import GlassCard from "@sonordev/agency-site-kit/portfolio/primitives/GlassCard";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EASE = "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
 function ConversionFunnelSection({ data }) {
   const funnelRef = useRef(null);
   const flowLinesRef = useRef(null);
   useEffect(() => {
-    gsap.registerPlugin(ScrollTrigger);
+    const funnel = funnelRef.current;
+    if (!funnel) return;
     const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
     if (prefersReducedMotion) return;
-    const ctx = gsap.context(() => {
-      const stages = funnelRef.current?.querySelectorAll(".funnel-stage-fill");
-      if (stages && stages.length > 0) {
-        gsap.fromTo(
-          stages,
-          { scaleX: 0 },
-          {
-            scaleX: 1,
-            duration: 0.8,
-            stagger: 0.2,
-            ease: "power2.out",
-            transformOrigin: "left center",
-            scrollTrigger: {
-              trigger: funnelRef.current,
-              start: "top 70%",
-              toggleActions: "play none none none"
-            }
-          }
-        );
-      }
-      const flowLines = flowLinesRef.current?.querySelectorAll(".flow-connector");
-      if (flowLines && flowLines.length > 0) {
-        gsap.fromTo(
-          flowLines,
-          { scaleX: 0, opacity: 0 },
-          {
-            scaleX: 1,
-            opacity: 1,
-            duration: 0.5,
-            stagger: 0.15,
-            delay: 0.3,
-            ease: "power2.out",
-            transformOrigin: "left center",
-            scrollTrigger: {
-              trigger: funnelRef.current,
-              start: "top 70%",
-              toggleActions: "play none none none"
-            }
-          }
-        );
+    const rect = funnel.getBoundingClientRect();
+    if (rect.top < window.innerHeight && rect.bottom > 0) return;
+    const fills = Array.from(funnel.querySelectorAll(".funnel-stage-fill"));
+    const connectors = Array.from(
+      flowLinesRef.current?.querySelectorAll(".flow-connector") ?? []
+    );
+    if (fills.length === 0 && connectors.length === 0) return;
+    for (const el of [...fills, ...connectors]) {
+      el.style.transformOrigin = "left center";
+      el.style.transform = "scaleX(0)";
+    }
+    for (const el of connectors) el.style.opacity = "0";
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        io.disconnect();
+        fills.forEach((el, i) => {
+          el.style.transition = `transform 0.8s ${EASE} ${i * 0.2}s`;
+          el.style.transform = "scaleX(1)";
+        });
+        connectors.forEach((el, i) => {
+          const d = 0.3 + i * 0.15;
+          el.style.transition = `transform 0.5s ${EASE} ${d}s, opacity 0.5s ${EASE} ${d}s`;
+          el.style.transform = "scaleX(1)";
+          el.style.opacity = "1";
+        });
+      },
+      { rootMargin: "0px 0px -30% 0px" }
+      // ≈ the old 'top 70%' trigger
+    );
+    io.observe(funnel);
+    return () => {
+      io.disconnect();
+      for (const el of [...fills, ...connectors]) {
+        el.style.transformOrigin = "";
+        el.style.transform = "";
+        el.style.transition = "";
+        el.style.opacity = "";
       }
-    });
-    return () => ctx.revert();
+    };
   }, [data.stages.length]);
   const maxValue = Math.max(...data.stages.map((s) => s.value), 1);
   return /* @__PURE__ */ jsx(
@@ -89,6 +91,7 @@ function ConversionFunnelSection({ data }) {
         /* @__PURE__ */ jsx("div", { ref: funnelRef, className: "hidden md:block", children: /* @__PURE__ */ jsx("div", { className: "flex items-end gap-0 relative", ref: flowLinesRef, children: data.stages.map((stage, index) => {
           const widthPercent = 60 + stage.value / maxValue * 40;
           const stageColor = stage.color || "var(--sk-primary, #6366f1)";
+          const icon = resolvePortfolioImage(stage.icon);
           const dropOff = index > 0 ? Math.round(
             (data.stages[index - 1].value - stage.value) / data.stages[index - 1].value * 100
           ) : null;
@@ -129,7 +132,7 @@ function ConversionFunnelSection({ data }) {
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center gap-2 py-4", children: [
-                stage.icon && /* @__PURE__ */ jsx("img", { src: stage.icon, alt: "", width: 24, height: 24, className: "w-6 h-6 object-contain" }),
+                icon && /* @__PURE__ */ jsx("img", { src: icon.url, alt: "", width: 24, height: 24, loading: "lazy", decoding: "async", className: "w-6 h-6 object-contain" }),
                 /* @__PURE__ */ jsx(
                   "span",
                   {
@@ -153,6 +156,7 @@ function ConversionFunnelSection({ data }) {
         /* @__PURE__ */ jsx("div", { className: "md:hidden flex flex-col gap-3", children: data.stages.map((stage, index) => {
           const widthPercent = 60 + stage.value / maxValue * 40;
           const stageColor = stage.color || "var(--sk-primary, #6366f1)";
+          const icon = resolvePortfolioImage(stage.icon);
           const dropOff = index > 0 ? Math.round(
             (data.stages[index - 1].value - stage.value) / data.stages[index - 1].value * 100
           ) : null;
@@ -173,7 +177,7 @@ function ConversionFunnelSection({ data }) {
               )
             ] }),
             /* @__PURE__ */ jsx(ScrollReveal, { y: 20, delay: index * 0.1, children: /* @__PURE__ */ jsx("div", { style: { width: `${widthPercent}%`, marginLeft: "auto", marginRight: "auto" }, children: /* @__PURE__ */ jsx(GlassCard, { padding: "md", hover: false, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-              stage.icon && /* @__PURE__ */ jsx("img", { src: stage.icon, alt: "", width: 24, height: 24, className: "w-6 h-6 object-contain shrink-0" }),
+              icon && /* @__PURE__ */ jsx("img", { src: icon.url, alt: "", width: 24, height: 24, loading: "lazy", decoding: "async", className: "w-6 h-6 object-contain shrink-0" }),
               /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
                 "span",
                 {
@@ -197,7 +201,7 @@ function ConversionFunnelSection({ data }) {
     }
   );
 }
-
-export { ConversionFunnelSection as default };
-//# sourceMappingURL=ConversionFunnelSection-D3GE4NKE.js.map
-//# sourceMappingURL=ConversionFunnelSection-D3GE4NKE.js.map
+export {
+  ConversionFunnelSection as default
+};
+//# sourceMappingURL=ConversionFunnelSection.js.map

package/dist/portfolio/sections/ConversionFunnelSection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/ConversionFunnelSection.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect } from 'react';\nimport type { PortfolioConversionFunnelData } from '../../../types';\nimport { resolvePortfolioImage } from '../../../shared/images';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport AnimatedCounter from '@sonordev/agency-site-kit/portfolio/primitives/AnimatedCounter';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\n\ninterface ConversionFunnelSectionProps {\n  data: PortfolioConversionFunnelData;\n}\n\nconst EASE = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'; // ≈ power2.out\n\nexport default function ConversionFunnelSection({ data }: ConversionFunnelSectionProps) {\n  const funnelRef = useRef<HTMLDivElement>(null);\n  const flowLinesRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const funnel = funnelRef.current;\n    if (!funnel) return;\n\n    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    if (prefersReducedMotion) return;\n\n    // Never re-hide a funnel already in the viewport at hydration.\n    const rect = funnel.getBoundingClientRect();\n    if (rect.top < window.innerHeight && rect.bottom > 0) return;\n\n    // Stage fills sweep left-to-right; flow connectors follow after.\n    const fills = Array.from(funnel.querySelectorAll<HTMLElement>('.funnel-stage-fill'));\n    const connectors = Array.from(\n      flowLinesRef.current?.querySelectorAll<HTMLElement>('.flow-connector') ?? [],\n    );\n    if (fills.length === 0 && connectors.length === 0) return;\n\n    // Hidden state\n    for (const el of [...fills, ...connectors]) {\n      el.style.transformOrigin = 'left center';\n      el.style.transform = 'scaleX(0)';\n    }\n    for (const el of connectors) el.style.opacity = '0';\n\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry.isIntersecting) return;\n        io.disconnect();\n        fills.forEach((el, i) => {\n          el.style.transition = `transform 0.8s ${EASE} ${i * 0.2}s`;\n          el.style.transform = 'scaleX(1)';\n        });\n        connectors.forEach((el, i) => {\n          const d = 0.3 + i * 0.15;\n          el.style.transition = `transform 0.5s ${EASE} ${d}s, opacity 0.5s ${EASE} ${d}s`;\n          el.style.transform = 'scaleX(1)';\n          el.style.opacity = '1';\n        });\n      },\n      { rootMargin: '0px 0px -30% 0px' }, // ≈ the old 'top 70%' trigger\n    );\n    io.observe(funnel);\n\n    return () => {\n      io.disconnect();\n      for (const el of [...fills, ...connectors]) {\n        el.style.transformOrigin = '';\n        el.style.transform = '';\n        el.style.transition = '';\n        el.style.opacity = '';\n      }\n    };\n  }, [data.stages.length]);\n\n  const maxValue = Math.max(...data.stages.map((s) => s.value), 1);\n\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-6xl mx-auto px-6\">\n        {(data.title || data.description) && (\n          <ScrollReveal y={30}>\n            {data.title && (\n              <h2\n                className=\"text-3xl md:text-4xl font-bold mb-4\"\n                style={{\n                  color: 'var(--sk-text-primary, #ffffff)',\n                  fontFamily: 'var(--sk-font-heading, inherit)',\n                }}\n              >\n                {data.title}\n              </h2>\n            )}\n            {data.description && (\n              <p\n                className=\"text-lg mb-12 max-w-2xl\"\n                style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n              >\n                {data.description}\n              </p>\n            )}\n          </ScrollReveal>\n        )}\n\n        {/* Desktop: horizontal funnel */}\n        <div ref={funnelRef} className=\"hidden md:block\">\n          <div className=\"flex items-end gap-0 relative\" ref={flowLinesRef}>\n            {data.stages.map((stage, index) => {\n              const widthPercent = 60 + (stage.value / maxValue) * 40;\n              const stageColor = stage.color || 'var(--sk-primary, #6366f1)';\n              const icon = resolvePortfolioImage(stage.icon);\n              const dropOff =\n                index > 0\n                  ? Math.round(\n                      ((data.stages[index - 1].value - stage.value) /\n                        data.stages[index - 1].value) *\n                        100,\n                    )\n                  : null;\n\n              return (\n                <React.Fragment key={index}>\n                  {/* Drop-off connector */}\n                  {dropOff !== null && (\n                    <div className=\"flex flex-col items-center justify-center px-2 shrink-0\" style={{ minWidth: 48 }}>\n                      <div\n                        className=\"flow-connector h-0.5 w-full mb-1\"\n                        style={{\n                          background: `linear-gradient(to right, ${data.stages[index - 1].color || 'var(--sk-primary, #6366f1)'}, ${stageColor})`,\n                          willChange: 'transform',\n                        }}\n                      />\n                      <span\n                        className=\"text-xs font-medium whitespace-nowrap\"\n                        style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                      >\n                        -{dropOff}%\n                      </span>\n                    </div>\n                  )}\n\n                  {/* Stage card */}\n                  <div className=\"flex-1\" style={{ maxWidth: `${widthPercent}%` }}>\n                    <GlassCard padding=\"md\" hover={false}>\n                      <div className=\"relative overflow-hidden rounded-lg\">\n                        {/* Animated fill bar */}\n                        <div\n                          className=\"funnel-stage-fill absolute inset-0 rounded-lg opacity-15\"\n                          style={{\n                            background: stageColor,\n                            willChange: 'transform',\n                          }}\n                        />\n                        <div className=\"relative flex flex-col items-center gap-2 py-4\">\n                          {/* Icon */}\n                          {icon && (\n                            <img src={icon.url} alt=\"\" width={24} height={24} loading=\"lazy\" decoding=\"async\" className=\"w-6 h-6 object-contain\" />\n                          )}\n                          <span\n                            className=\"text-xs font-semibold uppercase tracking-wider text-center\"\n                            style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                          >\n                            {stage.label}\n                          </span>\n                          <div\n                            className=\"text-2xl font-bold\"\n                            style={{ color: stageColor }}\n                          >\n                            <AnimatedCounter value={stage.value} duration={2} />\n                          </div>\n                        </div>\n                      </div>\n                    </GlassCard>\n                  </div>\n                </React.Fragment>\n              );\n            })}\n          </div>\n        </div>\n\n        {/* Mobile: vertical funnel */}\n        <div className=\"md:hidden flex flex-col gap-3\">\n          {data.stages.map((stage, index) => {\n            const widthPercent = 60 + (stage.value / maxValue) * 40;\n            const stageColor = stage.color || 'var(--sk-primary, #6366f1)';\n            const icon = resolvePortfolioImage(stage.icon);\n            const dropOff =\n              index > 0\n                ? Math.round(\n                    ((data.stages[index - 1].value - stage.value) /\n                      data.stages[index - 1].value) *\n                      100,\n                  )\n                : null;\n\n            return (\n              <React.Fragment key={index}>\n                {dropOff !== null && (\n                  <div className=\"flex items-center justify-center py-1\">\n                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                      <path d=\"M10 4v12M6 12l4 4 4-4\" stroke=\"var(--sk-text-tertiary, #71717a)\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                    </svg>\n                    <span\n                      className=\"text-xs font-medium ml-2\"\n                      style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                    >\n                      -{dropOff}% drop-off\n                    </span>\n                  </div>\n                )}\n                <ScrollReveal y={20} delay={index * 0.1}>\n                  <div style={{ width: `${widthPercent}%`, marginLeft: 'auto', marginRight: 'auto' }}>\n                    <GlassCard padding=\"md\" hover={false}>\n                      <div className=\"flex items-center gap-4\">\n                        {icon && (\n                          <img src={icon.url} alt=\"\" width={24} height={24} loading=\"lazy\" decoding=\"async\" className=\"w-6 h-6 object-contain shrink-0\" />\n                        )}\n                        <div className=\"flex-1\">\n                          <span\n                            className=\"text-xs font-semibold uppercase tracking-wider\"\n                            style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                          >\n                            {stage.label}\n                          </span>\n                        </div>\n                        <div\n                          className=\"text-xl font-bold\"\n                          style={{ color: stageColor }}\n                        >\n                          <AnimatedCounter value={stage.value} duration={2} />\n                        </div>\n                      </div>\n                    </GlassCard>\n                  </div>\n                </ScrollReveal>\n              </React.Fragment>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;AAEA,OAAO,SAAS,QAAQ,iBAAiB;AAGzC,OAAO,kBAAkB;AACzB,OAAO,qBAAqB;AAC5B,OAAO,eAAe;AA4EZ,SAEI,KAFJ;AAtEV,IAAM,OAAO;AAEE,SAAR,wBAAyC,EAAE,KAAK,GAAiC;AACtF,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,eAAe,OAAuB,IAAI;AAEhD,YAAU,MAAM;AACd,UAAM,SAAS,UAAU;AACzB,QAAI,CAAC,OAAQ;AAEb,UAAM,uBAAuB,OAAO,WAAW,kCAAkC,EAAE;AACnF,QAAI,qBAAsB;AAG1B,UAAM,OAAO,OAAO,sBAAsB;AAC1C,QAAI,KAAK,MAAM,OAAO,eAAe,KAAK,SAAS,EAAG;AAGtD,UAAM,QAAQ,MAAM,KAAK,OAAO,iBAA8B,oBAAoB,CAAC;AACnF,UAAM,aAAa,MAAM;AAAA,MACvB,aAAa,SAAS,iBAA8B,iBAAiB,KAAK,CAAC;AAAA,IAC7E;AACA,QAAI,MAAM,WAAW,KAAK,WAAW,WAAW,EAAG;AAGnD,eAAW,MAAM,CAAC,GAAG,OAAO,GAAG,UAAU,GAAG;AAC1C,SAAG,MAAM,kBAAkB;AAC3B,SAAG,MAAM,YAAY;AAAA,IACvB;AACA,eAAW,MAAM,WAAY,IAAG,MAAM,UAAU;AAEhD,UAAM,KAAK,IAAI;AAAA,MACb,CAAC,CAAC,KAAK,MAAM;AACX,YAAI,CAAC,MAAM,eAAgB;AAC3B,WAAG,WAAW;AACd,cAAM,QAAQ,CAAC,IAAI,MAAM;AACvB,aAAG,MAAM,aAAa,kBAAkB,IAAI,IAAI,IAAI,GAAG;AACvD,aAAG,MAAM,YAAY;AAAA,QACvB,CAAC;AACD,mBAAW,QAAQ,CAAC,IAAI,MAAM;AAC5B,gBAAM,IAAI,MAAM,IAAI;AACpB,aAAG,MAAM,aAAa,kBAAkB,IAAI,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC;AAC7E,aAAG,MAAM,YAAY;AACrB,aAAG,MAAM,UAAU;AAAA,QACrB,CAAC;AAAA,MACH;AAAA,MACA,EAAE,YAAY,mBAAmB;AAAA;AAAA,IACnC;AACA,OAAG,QAAQ,MAAM;AAEjB,WAAO,MAAM;AACX,SAAG,WAAW;AACd,iBAAW,MAAM,CAAC,GAAG,OAAO,GAAG,UAAU,GAAG;AAC1C,WAAG,MAAM,kBAAkB;AAC3B,WAAG,MAAM,YAAY;AACrB,WAAG,MAAM,aAAa;AACtB,WAAG,MAAM,UAAU;AAAA,MACrB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,KAAK,OAAO,MAAM,CAAC;AAEvB,QAAM,WAAW,KAAK,IAAI,GAAG,KAAK,OAAO,IAAI,CAAC,MAAM,EAAE,KAAK,GAAG,CAAC;AAE/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,YAAY,wBAAwB;AAAA,MAE7C,+BAAC,SAAI,WAAU,0BACX;AAAA,cAAK,SAAS,KAAK,gBACnB,qBAAC,gBAAa,GAAG,IACd;AAAA,eAAK,SACJ;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO;AAAA,gBACP,YAAY;AAAA,cACd;AAAA,cAEC,eAAK;AAAA;AAAA,UACR;AAAA,UAED,KAAK,eACJ;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,OAAO,oCAAoC;AAAA,cAEnD,eAAK;AAAA;AAAA,UACR;AAAA,WAEJ;AAAA,QAIF,oBAAC,SAAI,KAAK,WAAW,WAAU,mBAC7B,8BAAC,SAAI,WAAU,iCAAgC,KAAK,cACjD,eAAK,OAAO,IAAI,CAAC,OAAO,UAAU;AACjC,gBAAM,eAAe,KAAM,MAAM,QAAQ,WAAY;AACrD,gBAAM,aAAa,MAAM,SAAS;AAClC,gBAAM,OAAO,sBAAsB,MAAM,IAAI;AAC7C,gBAAM,UACJ,QAAQ,IACJ,KAAK;AAAA,aACD,KAAK,OAAO,QAAQ,CAAC,EAAE,QAAQ,MAAM,SACrC,KAAK,OAAO,QAAQ,CAAC,EAAE,QACvB;AAAA,UACJ,IACA;AAEN,iBACE,qBAAC,MAAM,UAAN,EAEE;AAAA,wBAAY,QACX,qBAAC,SAAI,WAAU,2DAA0D,OAAO,EAAE,UAAU,GAAG,GAC7F;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,YAAY,6BAA6B,KAAK,OAAO,QAAQ,CAAC,EAAE,SAAS,4BAA4B,KAAK,UAAU;AAAA,oBACpH,YAAY;AAAA,kBACd;AAAA;AAAA,cACF;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO,EAAE,OAAO,mCAAmC;AAAA,kBACpD;AAAA;AAAA,oBACG;AAAA,oBAAQ;AAAA;AAAA;AAAA,cACZ;AAAA,eACF;AAAA,YAIF,oBAAC,SAAI,WAAU,UAAS,OAAO,EAAE,UAAU,GAAG,YAAY,IAAI,GAC5D,8BAAC,aAAU,SAAQ,MAAK,OAAO,OAC7B,+BAAC,SAAI,WAAU,uCAEb;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,YAAY;AAAA,oBACZ,YAAY;AAAA,kBACd;AAAA;AAAA,cACF;AAAA,cACA,qBAAC,SAAI,WAAU,kDAEZ;AAAA,wBACC,oBAAC,SAAI,KAAK,KAAK,KAAK,KAAI,IAAG,OAAO,IAAI,QAAQ,IAAI,SAAQ,QAAO,UAAS,SAAQ,WAAU,0BAAyB;AAAA,gBAEvH;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO,EAAE,OAAO,mCAAmC;AAAA,oBAElD,gBAAM;AAAA;AAAA,gBACT;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO,EAAE,OAAO,WAAW;AAAA,oBAE3B,8BAAC,mBAAgB,OAAO,MAAM,OAAO,UAAU,GAAG;AAAA;AAAA,gBACpD;AAAA,iBACF;AAAA,eACF,GACF,GACF;AAAA,eApDmB,KAqDrB;AAAA,QAEJ,CAAC,GACH,GACF;AAAA,QAGA,oBAAC,SAAI,WAAU,iCACZ,eAAK,OAAO,IAAI,CAAC,OAAO,UAAU;AACjC,gBAAM,eAAe,KAAM,MAAM,QAAQ,WAAY;AACrD,gBAAM,aAAa,MAAM,SAAS;AAClC,gBAAM,OAAO,sBAAsB,MAAM,IAAI;AAC7C,gBAAM,UACJ,QAAQ,IACJ,KAAK;AAAA,aACD,KAAK,OAAO,QAAQ,CAAC,EAAE,QAAQ,MAAM,SACrC,KAAK,OAAO,QAAQ,CAAC,EAAE,QACvB;AAAA,UACJ,IACA;AAEN,iBACE,qBAAC,MAAM,UAAN,EACE;AAAA,wBAAY,QACX,qBAAC,SAAI,WAAU,yCACb;AAAA,kCAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QACnD,8BAAC,UAAK,GAAE,yBAAwB,QAAO,oCAAmC,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,GAC3I;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO,EAAE,OAAO,mCAAmC;AAAA,kBACpD;AAAA;AAAA,oBACG;AAAA,oBAAQ;AAAA;AAAA;AAAA,cACZ;AAAA,eACF;AAAA,YAEF,oBAAC,gBAAa,GAAG,IAAI,OAAO,QAAQ,KAClC,8BAAC,SAAI,OAAO,EAAE,OAAO,GAAG,YAAY,KAAK,YAAY,QAAQ,aAAa,OAAO,GAC/E,8BAAC,aAAU,SAAQ,MAAK,OAAO,OAC7B,+BAAC,SAAI,WAAU,2BACZ;AAAA,sBACC,oBAAC,SAAI,KAAK,KAAK,KAAK,KAAI,IAAG,OAAO,IAAI,QAAQ,IAAI,SAAQ,QAAO,UAAS,SAAQ,WAAU,mCAAkC;AAAA,cAEhI,oBAAC,SAAI,WAAU,UACb;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO,EAAE,OAAO,mCAAmC;AAAA,kBAElD,gBAAM;AAAA;AAAA,cACT,GACF;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO,EAAE,OAAO,WAAW;AAAA,kBAE3B,8BAAC,mBAAgB,OAAO,MAAM,OAAO,UAAU,GAAG;AAAA;AAAA,cACpD;AAAA,eACF,GACF,GACF,GACF;AAAA,eAtCmB,KAuCrB;AAAA,QAEJ,CAAC,GACH;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/{DesignSystemSection-KXIQXITF.cjs → portfolio/sections/DesignSystemSection.cjs}

@@ -1,9 +1,15 @@
 'use strict';
 
-var chunkKEOHORIH_cjs = require('./chunk-KEOHORIH.cjs');
-var chunkIKBK7HYX_cjs = require('./chunk-IKBK7HYX.cjs');
+var ScrollReveal = require('@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal');
+var GlassCard = require('@sonordev/agency-site-kit/portfolio/primitives/GlassCard');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var ScrollReveal__default = /*#__PURE__*/_interopDefault(ScrollReveal);
+var GlassCard__default = /*#__PURE__*/_interopDefault(GlassCard);
+
+// src/portfolio/components/sections/DesignSystemSection.tsx
 function isLightColor(hex) {
   const c = hex.replace("#", "");
   const r = parseInt(c.substring(0, 2), 16);
@@ -22,7 +28,7 @@ function DesignSystemSection({ data }) {
       className: "w-full py-20 md:py-28",
       style: { background: "var(--sk-bg, #0a0a0a)" },
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-5xl mx-auto px-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(chunkIKBK7HYX_cjs.ScrollReveal, { y: 30, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ScrollReveal__default.default, { y: 30, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "h2",
             {
@@ -44,7 +50,7 @@ function DesignSystemSection({ data }) {
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", children: [
-          colors.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 20, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkKEOHORIH_cjs.GlassCard, { padding: "lg", hover: false, children: [
+          colors.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ScrollReveal__default.default, { y: 20, children: /* @__PURE__ */ jsxRuntime.jsxs(GlassCard__default.default, { padding: "lg", hover: false, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "h3",
               {
@@ -85,7 +91,7 @@ function DesignSystemSection({ data }) {
               )
             ] }, ci)) })
           ] }) }),
-          fonts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 20, delay: 0.1, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkKEOHORIH_cjs.GlassCard, { padding: "lg", hover: false, children: [
+          fonts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ScrollReveal__default.default, { y: 20, delay: 0.1, children: /* @__PURE__ */ jsxRuntime.jsxs(GlassCard__default.default, { padding: "lg", hover: false, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "h3",
               {
@@ -170,5 +176,5 @@ function DesignSystemSection({ data }) {
 }
 
 module.exports = DesignSystemSection;
-//# sourceMappingURL=DesignSystemSection-KXIQXITF.cjs.map
-//# sourceMappingURL=DesignSystemSection-KXIQXITF.cjs.map
+//# sourceMappingURL=DesignSystemSection.cjs.map
+//# sourceMappingURL=DesignSystemSection.cjs.map