@sonordev/agency-site-kit 0.1.0

package/dist/ConversionFunnelSection-AUUSJ5HQ.cjs

@@ -0,0 +1,209 @@
+'use strict';
+
+var chunkXONXEFJY_cjs = require('./chunk-XONXEFJY.cjs');
+var chunkKEOHORIH_cjs = require('./chunk-KEOHORIH.cjs');
+var chunkIKBK7HYX_cjs = require('./chunk-IKBK7HYX.cjs');
+var React = require('react');
+var gsap = require('gsap');
+var ScrollTrigger = require('gsap/ScrollTrigger');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var gsap__default = /*#__PURE__*/_interopDefault(gsap);
+
+function ConversionFunnelSection({ data }) {
+  const funnelRef = React.useRef(null);
+  const flowLinesRef = React.useRef(null);
+  React.useEffect(() => {
+    gsap__default.default.registerPlugin(ScrollTrigger.ScrollTrigger);
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (prefersReducedMotion) return;
+    const ctx = gsap__default.default.context(() => {
+      const stages = funnelRef.current?.querySelectorAll(".funnel-stage-fill");
+      if (stages && stages.length > 0) {
+        gsap__default.default.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__default.default.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"
+            }
+          }
+        );
+      }
+    });
+    return () => ctx.revert();
+  }, [data.stages.length]);
+  const maxValue = Math.max(...data.stages.map((s) => s.value), 1);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "section",
+    {
+      className: "w-full py-20 md:py-28",
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-6xl mx-auto px-6", children: [
+        (data.title || data.description) && /* @__PURE__ */ jsxRuntime.jsxs(chunkIKBK7HYX_cjs.ScrollReveal, { y: 30, children: [
+          data.title && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "text-lg mb-12 max-w-2xl",
+              style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+              children: data.description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: funnelRef, className: "hidden md:block", children: /* @__PURE__ */ jsxRuntime.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 dropOff = index > 0 ? Math.round(
+            (data.stages[index - 1].value - stage.value) / data.stages[index - 1].value * 100
+          ) : null;
+          return /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+            dropOff !== null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center px-2 shrink-0", style: { minWidth: 48 }, children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: "text-xs font-medium whitespace-nowrap",
+                  style: { color: "var(--sk-text-tertiary, #71717a)" },
+                  children: [
+                    "-",
+                    dropOff,
+                    "%"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", style: { maxWidth: `${widthPercent}%` }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkKEOHORIH_cjs.GlassCard, { padding: "md", hover: false, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative overflow-hidden rounded-lg", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "funnel-stage-fill absolute inset-0 rounded-lg opacity-15",
+                  style: {
+                    background: stageColor,
+                    willChange: "transform"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col items-center gap-2 py-4", children: [
+                stage.icon && /* @__PURE__ */ jsxRuntime.jsx("img", { src: stage.icon, alt: "", width: 24, height: 24, className: "w-6 h-6 object-contain" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "text-xs font-semibold uppercase tracking-wider text-center",
+                    style: { color: "var(--sk-text-tertiary, #71717a)" },
+                    children: stage.label
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "text-2xl font-bold",
+                    style: { color: stageColor },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(chunkXONXEFJY_cjs.AnimatedCounter, { value: stage.value, duration: 2 })
+                  }
+                )
+              ] })
+            ] }) }) })
+          ] }, index);
+        }) }) }),
+        /* @__PURE__ */ jsxRuntime.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 dropOff = index > 0 ? Math.round(
+            (data.stages[index - 1].value - stage.value) / data.stages[index - 1].value * 100
+          ) : null;
+          return /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+            dropOff !== null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center py-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 4v12M6 12l4 4 4-4", stroke: "var(--sk-text-tertiary, #71717a)", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: "text-xs font-medium ml-2",
+                  style: { color: "var(--sk-text-tertiary, #71717a)" },
+                  children: [
+                    "-",
+                    dropOff,
+                    "% drop-off"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 20, delay: index * 0.1, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: `${widthPercent}%`, marginLeft: "auto", marginRight: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkKEOHORIH_cjs.GlassCard, { padding: "md", hover: false, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+              stage.icon && /* @__PURE__ */ jsxRuntime.jsx("img", { src: stage.icon, alt: "", width: 24, height: 24, className: "w-6 h-6 object-contain shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "text-xs font-semibold uppercase tracking-wider",
+                  style: { color: "var(--sk-text-tertiary, #71717a)" },
+                  children: stage.label
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "text-xl font-bold",
+                  style: { color: stageColor },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(chunkXONXEFJY_cjs.AnimatedCounter, { value: stage.value, duration: 2 })
+                }
+              )
+            ] }) }) }) })
+          ] }, index);
+        }) })
+      ] })
+    }
+  );
+}
+
+module.exports = ConversionFunnelSection;
+//# sourceMappingURL=ConversionFunnelSection-AUUSJ5HQ.cjs.map
+//# sourceMappingURL=ConversionFunnelSection-AUUSJ5HQ.cjs.map

package/dist/ConversionFunnelSection-AUUSJ5HQ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/ConversionFunnelSection.tsx"],"names":["useRef","useEffect","gsap","ScrollTrigger","jsx","jsxs","ScrollReveal","React","GlassCard","AnimatedCounter"],"mappings":"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","file":"ConversionFunnelSection-AUUSJ5HQ.cjs","sourcesContent":["'use client';\n\nimport React, { useRef, useEffect } from 'react';\nimport gsap from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nimport type { PortfolioConversionFunnelData } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\nimport AnimatedCounter from '../primitives/AnimatedCounter';\nimport GlassCard from '../primitives/GlassCard';\n\ninterface ConversionFunnelSectionProps {\n  data: PortfolioConversionFunnelData;\n}\n\nexport default function ConversionFunnelSection({ data }: ConversionFunnelSectionProps) {\n  const funnelRef = useRef<HTMLDivElement>(null);\n  const flowLinesRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger);\n\n    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    if (prefersReducedMotion) return;\n\n    const ctx = gsap.context(() => {\n      // Fill stages left-to-right with color\n      const stages = funnelRef.current?.querySelectorAll('.funnel-stage-fill');\n      if (stages && stages.length > 0) {\n        gsap.fromTo(\n          stages,\n          { scaleX: 0 },\n          {\n            scaleX: 1,\n            duration: 0.8,\n            stagger: 0.2,\n            ease: 'power2.out',\n            transformOrigin: 'left center',\n            scrollTrigger: {\n              trigger: funnelRef.current,\n              start: 'top 70%',\n              toggleActions: 'play none none none',\n            },\n          },\n        );\n      }\n\n      // Animate flow line connectors\n      const flowLines = flowLinesRef.current?.querySelectorAll('.flow-connector');\n      if (flowLines && flowLines.length > 0) {\n        gsap.fromTo(\n          flowLines,\n          { scaleX: 0, opacity: 0 },\n          {\n            scaleX: 1,\n            opacity: 1,\n            duration: 0.5,\n            stagger: 0.15,\n            delay: 0.3,\n            ease: 'power2.out',\n            transformOrigin: 'left center',\n            scrollTrigger: {\n              trigger: funnelRef.current,\n              start: 'top 70%',\n              toggleActions: 'play none none none',\n            },\n          },\n        );\n      }\n    });\n\n    return () => ctx.revert();\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 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                          {stage.icon && (\n                            <img src={stage.icon} alt=\"\" width={24} height={24} 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 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                        {stage.icon && (\n                          <img src={stage.icon} alt=\"\" width={24} height={24} 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"]}

package/dist/ConversionFunnelSection-D3GE4NKE.js

@@ -0,0 +1,203 @@
+'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';
+
+function ConversionFunnelSection({ data }) {
+  const funnelRef = useRef(null);
+  const flowLinesRef = useRef(null);
+  useEffect(() => {
+    gsap.registerPlugin(ScrollTrigger);
+    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"
+            }
+          }
+        );
+      }
+    });
+    return () => ctx.revert();
+  }, [data.stages.length]);
+  const maxValue = Math.max(...data.stages.map((s) => s.value), 1);
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: "w-full py-20 md:py-28",
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      children: /* @__PURE__ */ jsxs("div", { className: "max-w-6xl mx-auto px-6", children: [
+        (data.title || data.description) && /* @__PURE__ */ jsxs(ScrollReveal, { y: 30, children: [
+          data.title && /* @__PURE__ */ 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__ */ jsx(
+            "p",
+            {
+              className: "text-lg mb-12 max-w-2xl",
+              style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+              children: data.description
+            }
+          )
+        ] }),
+        /* @__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 dropOff = index > 0 ? Math.round(
+            (data.stages[index - 1].value - stage.value) / data.stages[index - 1].value * 100
+          ) : null;
+          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            dropOff !== null && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center px-2 shrink-0", style: { minWidth: 48 }, children: [
+              /* @__PURE__ */ 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__ */ jsxs(
+                "span",
+                {
+                  className: "text-xs font-medium whitespace-nowrap",
+                  style: { color: "var(--sk-text-tertiary, #71717a)" },
+                  children: [
+                    "-",
+                    dropOff,
+                    "%"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex-1", style: { maxWidth: `${widthPercent}%` }, children: /* @__PURE__ */ jsx(GlassCard, { padding: "md", hover: false, children: /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-lg", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "funnel-stage-fill absolute inset-0 rounded-lg opacity-15",
+                  style: {
+                    background: stageColor,
+                    willChange: "transform"
+                  }
+                }
+              ),
+              /* @__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" }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "text-xs font-semibold uppercase tracking-wider text-center",
+                    style: { color: "var(--sk-text-tertiary, #71717a)" },
+                    children: stage.label
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "text-2xl font-bold",
+                    style: { color: stageColor },
+                    children: /* @__PURE__ */ jsx(AnimatedCounter, { value: stage.value, duration: 2 })
+                  }
+                )
+              ] })
+            ] }) }) })
+          ] }, index);
+        }) }) }),
+        /* @__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 dropOff = index > 0 ? Math.round(
+            (data.stages[index - 1].value - stage.value) / data.stages[index - 1].value * 100
+          ) : null;
+          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            dropOff !== null && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-1", children: [
+              /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M10 4v12M6 12l4 4 4-4", stroke: "var(--sk-text-tertiary, #71717a)", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: "text-xs font-medium ml-2",
+                  style: { color: "var(--sk-text-tertiary, #71717a)" },
+                  children: [
+                    "-",
+                    dropOff,
+                    "% drop-off"
+                  ]
+                }
+              )
+            ] }),
+            /* @__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" }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "text-xs font-semibold uppercase tracking-wider",
+                  style: { color: "var(--sk-text-tertiary, #71717a)" },
+                  children: stage.label
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "text-xl font-bold",
+                  style: { color: stageColor },
+                  children: /* @__PURE__ */ jsx(AnimatedCounter, { value: stage.value, duration: 2 })
+                }
+              )
+            ] }) }) }) })
+          ] }, index);
+        }) })
+      ] })
+    }
+  );
+}
+
+export { ConversionFunnelSection as default };
+//# sourceMappingURL=ConversionFunnelSection-D3GE4NKE.js.map
+//# sourceMappingURL=ConversionFunnelSection-D3GE4NKE.js.map

package/dist/ConversionFunnelSection-D3GE4NKE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/ConversionFunnelSection.tsx"],"names":[],"mappings":"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","file":"ConversionFunnelSection-D3GE4NKE.js","sourcesContent":["'use client';\n\nimport React, { useRef, useEffect } from 'react';\nimport gsap from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nimport type { PortfolioConversionFunnelData } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\nimport AnimatedCounter from '../primitives/AnimatedCounter';\nimport GlassCard from '../primitives/GlassCard';\n\ninterface ConversionFunnelSectionProps {\n  data: PortfolioConversionFunnelData;\n}\n\nexport default function ConversionFunnelSection({ data }: ConversionFunnelSectionProps) {\n  const funnelRef = useRef<HTMLDivElement>(null);\n  const flowLinesRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger);\n\n    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    if (prefersReducedMotion) return;\n\n    const ctx = gsap.context(() => {\n      // Fill stages left-to-right with color\n      const stages = funnelRef.current?.querySelectorAll('.funnel-stage-fill');\n      if (stages && stages.length > 0) {\n        gsap.fromTo(\n          stages,\n          { scaleX: 0 },\n          {\n            scaleX: 1,\n            duration: 0.8,\n            stagger: 0.2,\n            ease: 'power2.out',\n            transformOrigin: 'left center',\n            scrollTrigger: {\n              trigger: funnelRef.current,\n              start: 'top 70%',\n              toggleActions: 'play none none none',\n            },\n          },\n        );\n      }\n\n      // Animate flow line connectors\n      const flowLines = flowLinesRef.current?.querySelectorAll('.flow-connector');\n      if (flowLines && flowLines.length > 0) {\n        gsap.fromTo(\n          flowLines,\n          { scaleX: 0, opacity: 0 },\n          {\n            scaleX: 1,\n            opacity: 1,\n            duration: 0.5,\n            stagger: 0.15,\n            delay: 0.3,\n            ease: 'power2.out',\n            transformOrigin: 'left center',\n            scrollTrigger: {\n              trigger: funnelRef.current,\n              start: 'top 70%',\n              toggleActions: 'play none none none',\n            },\n          },\n        );\n      }\n    });\n\n    return () => ctx.revert();\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 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                          {stage.icon && (\n                            <img src={stage.icon} alt=\"\" width={24} height={24} 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 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                        {stage.icon && (\n                          <img src={stage.icon} alt=\"\" width={24} height={24} 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"]}

package/dist/DetailsSection-FB763FS7.js

@@ -0,0 +1,135 @@
+import { GlassCard } from './chunk-YB4B3OMC.js';
+import { ScrollReveal } from './chunk-7CFFAKDM.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function DetailsSection({ data }) {
+  const rows = [];
+  if (data.industry) {
+    rows.push({
+      label: "Industry",
+      value: data.industry,
+      icon: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 16.5h12M4.5 1.5h9l1.5 6H3l1.5-6zM6 7.5v9M12 7.5v9M9 7.5v9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+    });
+  }
+  if (data.location) {
+    rows.push({
+      label: "Location",
+      value: data.location,
+      icon: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
+        /* @__PURE__ */ jsx("path", { d: "M15 7.5c0 4.5-6 9-6 9s-6-4.5-6-9a6 6 0 1112 0z", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx("circle", { cx: "9", cy: "7.5", r: "2", stroke: "currentColor", strokeWidth: "1.5" })
+      ] })
+    });
+  }
+  if (data.website) {
+    rows.push({
+      label: "Website",
+      value: data.website,
+      icon: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M1.5 9h15M9 1.5a11.25 11.25 0 013 7.5 11.25 11.25 0 01-3 7.5 11.25 11.25 0 01-3-7.5 11.25 11.25 0 013-7.5z", stroke: "currentColor", strokeWidth: "1.5" })
+      ] })
+    });
+  }
+  if (data.timeline) {
+    rows.push({
+      label: "Timeline",
+      value: data.timeline,
+      icon: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M9 4.5V9l3 1.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+      ] })
+    });
+  }
+  if (data.launchDate) {
+    rows.push({
+      label: "Launch Date",
+      value: data.launchDate,
+      icon: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
+        /* @__PURE__ */ jsx("rect", { x: "2.25", y: "3", width: "13.5", height: "12.75", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 1.5v3M6 1.5v3M2.25 7.5h13.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+      ] })
+    });
+  }
+  if (data.budgetRange) {
+    rows.push({
+      label: "Budget Range",
+      value: data.budgetRange,
+      icon: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M9 1.5v15M13.5 4.5H6.75a2.625 2.625 0 000 5.25h4.5a2.625 2.625 0 010 5.25H4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+    });
+  }
+  if (rows.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: "w-full py-20 md:py-28",
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      children: /* @__PURE__ */ jsxs("div", { className: "max-w-4xl mx-auto px-6", children: [
+        /* @__PURE__ */ jsx(ScrollReveal, { y: 30, children: /* @__PURE__ */ jsx(
+          "h2",
+          {
+            className: "text-3xl md:text-4xl font-bold mb-8",
+            style: {
+              color: "var(--sk-text-primary, #ffffff)",
+              fontFamily: "var(--sk-font-heading, inherit)"
+            },
+            children: "Project Details"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(ScrollReveal, { y: 40, delay: 0.1, children: /* @__PURE__ */ jsx(GlassCard, { padding: "lg", hover: false, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col divide-y", style: { borderColor: "var(--sk-border, rgba(255,255,255,0.1))" }, children: rows.map((row, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center gap-4 py-4 first:pt-0 last:pb-0",
+            style: {
+              borderColor: "var(--sk-border, rgba(255,255,255,0.1))"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "flex items-center justify-center w-9 h-9 rounded-lg shrink-0",
+                  style: {
+                    background: "color-mix(in srgb, var(--sk-primary, #6366f1) 12%, transparent)",
+                    color: "var(--sk-primary, #6366f1)"
+                  },
+                  children: row.icon
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "text-sm font-medium w-32 shrink-0",
+                  style: { color: "var(--sk-text-tertiary, #71717a)" },
+                  children: row.label
+                }
+              ),
+              row.label === "Website" ? /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: row.value.startsWith("http") ? row.value : `https://${row.value}`,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "text-sm font-medium hover:underline",
+                  style: { color: "var(--sk-primary, #6366f1)" },
+                  children: row.value
+                }
+              ) : /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "text-sm font-medium",
+                  style: { color: "var(--sk-text-primary, #ffffff)" },
+                  children: row.value
+                }
+              )
+            ]
+          },
+          index
+        )) }) }) })
+      ] })
+    }
+  );
+}
+
+export { DetailsSection as default };
+//# sourceMappingURL=DetailsSection-FB763FS7.js.map
+//# sourceMappingURL=DetailsSection-FB763FS7.js.map