@sonordev/agency-site-kit 0.1.0

package/dist/BeforeAfterSection-6QUJOBO2.js

@@ -0,0 +1,176 @@
+'use client';
+import { GlassCard } from './chunk-YB4B3OMC.js';
+import { ScrollReveal } from './chunk-7CFFAKDM.js';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import gsap from 'gsap';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function BeforeAfterSection({ data }) {
+  const containerRef = useRef(null);
+  const sliderRef = useRef(null);
+  const [position, setPosition] = useState(data.defaultPosition ?? 50);
+  const isDragging = useRef(false);
+  const beforeUrl = data.before?.asset?._ref || "";
+  const afterUrl = data.after?.asset?._ref || "";
+  useEffect(() => {
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (prefersReducedMotion || !sliderRef.current) return;
+    gsap.fromTo(
+      sliderRef.current,
+      { opacity: 0, scale: 0.8 },
+      { opacity: 1, scale: 1, duration: 0.6, delay: 0.5, ease: "back.out(2)" }
+    );
+  }, []);
+  const updatePosition = useCallback((clientX) => {
+    const container = containerRef.current;
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    const x = clientX - rect.left;
+    const percent = Math.max(0, Math.min(100, x / rect.width * 100));
+    setPosition(percent);
+  }, []);
+  const handlePointerDown = useCallback(
+    (e) => {
+      isDragging.current = true;
+      e.target.setPointerCapture(e.pointerId);
+      updatePosition(e.clientX);
+    },
+    [updatePosition]
+  );
+  const handlePointerMove = useCallback(
+    (e) => {
+      if (!isDragging.current) return;
+      updatePosition(e.clientX);
+    },
+    [updatePosition]
+  );
+  const handlePointerUp = useCallback(() => {
+    isDragging.current = false;
+  }, []);
+  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-5xl 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(ScrollReveal, { y: 40, children: /* @__PURE__ */ jsx(GlassCard, { padding: "sm", hover: false, children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: containerRef,
+            className: "relative w-full overflow-hidden rounded-xl cursor-col-resize select-none",
+            style: { aspectRatio: "16/10" },
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: handlePointerUp,
+            onPointerCancel: handlePointerUp,
+            children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: afterUrl,
+                  alt: "After",
+                  className: "absolute inset-0 w-full h-full object-cover",
+                  draggable: false
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-0 overflow-hidden",
+                  style: { width: `${position}%` },
+                  children: /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: beforeUrl,
+                      alt: "Before",
+                      className: "absolute inset-0 w-full h-full object-cover",
+                      style: { minWidth: containerRef.current?.offsetWidth || "100%" },
+                      draggable: false
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute top-0 bottom-0 w-0.5",
+                  style: {
+                    left: `${position}%`,
+                    transform: "translateX(-50%)",
+                    background: "#ffffff",
+                    boxShadow: "0 0 8px rgba(0,0,0,0.5)"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: sliderRef,
+                  className: "absolute top-1/2 flex items-center justify-center w-10 h-10 rounded-full",
+                  style: {
+                    left: `${position}%`,
+                    transform: "translate(-50%, -50%)",
+                    background: "var(--sk-primary, #6366f1)",
+                    boxShadow: "0 4px 16px rgba(0,0,0,0.3)",
+                    border: "3px solid #ffffff",
+                    zIndex: 5
+                  },
+                  children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M5 3l-4 5 4 5M11 3l4 5-4 5", stroke: "#ffffff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "absolute top-4 left-4 px-3 py-1 rounded-lg text-xs font-semibold uppercase tracking-wider",
+                  style: {
+                    background: "rgba(0,0,0,0.6)",
+                    color: "#ffffff",
+                    backdropFilter: "blur(4px)"
+                  },
+                  children: "Before"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "absolute top-4 right-4 px-3 py-1 rounded-lg text-xs font-semibold uppercase tracking-wider",
+                  style: {
+                    background: "rgba(0,0,0,0.6)",
+                    color: "#ffffff",
+                    backdropFilter: "blur(4px)"
+                  },
+                  children: "After"
+                }
+              )
+            ]
+          }
+        ) }) })
+      ] })
+    }
+  );
+}
+
+export { BeforeAfterSection as default };
+//# sourceMappingURL=BeforeAfterSection-6QUJOBO2.js.map
+//# sourceMappingURL=BeforeAfterSection-6QUJOBO2.js.map

package/dist/BeforeAfterSection-6QUJOBO2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/BeforeAfterSection.tsx"],"names":[],"mappings":";;;;;;AAYe,SAAR,kBAAA,CAAoC,EAAE,IAAA,EAAK,EAA4B;AAC5E,EAAA,MAAM,YAAA,GAAe,OAAuB,IAAI,CAAA;AAChD,EAAA,MAAM,SAAA,GAAY,OAAuB,IAAI,CAAA;AAC7C,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,IAAI,QAAA,CAAS,IAAA,CAAK,mBAAmB,EAAE,CAAA;AACnE,EAAA,MAAM,UAAA,GAAa,OAAO,KAAK,CAAA;AAE/B,EAAA,MAAM,SAAA,GAAY,IAAA,CAAK,MAAA,EAAQ,KAAA,EAAO,IAAA,IAAQ,EAAA;AAC9C,EAAA,MAAM,QAAA,GAAW,IAAA,CAAK,KAAA,EAAO,KAAA,EAAO,IAAA,IAAQ,EAAA;AAG5C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,oBAAA,GAAuB,MAAA,CAAO,UAAA,CAAW,kCAAkC,CAAA,CAAE,OAAA;AACnF,IAAA,IAAI,oBAAA,IAAwB,CAAC,SAAA,CAAU,OAAA,EAAS;AAEhD,IAAA,IAAA,CAAK,MAAA;AAAA,MACH,SAAA,CAAU,OAAA;AAAA,MACV,EAAE,OAAA,EAAS,CAAA,EAAG,KAAA,EAAO,GAAA,EAAI;AAAA,MACzB,EAAE,OAAA,EAAS,CAAA,EAAG,KAAA,EAAO,CAAA,EAAG,UAAU,GAAA,EAAK,KAAA,EAAO,GAAA,EAAK,IAAA,EAAM,aAAA;AAAc,KACzE;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,cAAA,GAAiB,WAAA,CAAY,CAAC,OAAA,KAAoB;AACtD,IAAA,MAAM,YAAY,YAAA,CAAa,OAAA;AAC/B,IAAA,IAAI,CAAC,SAAA,EAAW;AAEhB,IAAA,MAAM,IAAA,GAAO,UAAU,qBAAA,EAAsB;AAC7C,IAAA,MAAM,CAAA,GAAI,UAAU,IAAA,CAAK,IAAA;AACzB,IAAA,MAAM,OAAA,GAAU,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,IAAA,CAAK,GAAA,CAAI,GAAA,EAAM,CAAA,GAAI,IAAA,CAAK,KAAA,GAAS,GAAG,CAAC,CAAA;AACjE,IAAA,WAAA,CAAY,OAAO,CAAA;AAAA,EACrB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,iBAAA,GAAoB,WAAA;AAAA,IACxB,CAAC,CAAA,KAA0B;AACzB,MAAA,UAAA,CAAW,OAAA,GAAU,IAAA;AACrB,MAAC,CAAA,CAAE,MAAA,CAAuB,iBAAA,CAAkB,CAAA,CAAE,SAAS,CAAA;AACvD,MAAA,cAAA,CAAe,EAAE,OAAO,CAAA;AAAA,IAC1B,CAAA;AAAA,IACA,CAAC,cAAc;AAAA,GACjB;AAEA,EAAA,MAAM,iBAAA,GAAoB,WAAA;AAAA,IACxB,CAAC,CAAA,KAA0B;AACzB,MAAA,IAAI,CAAC,WAAW,OAAA,EAAS;AACzB,MAAA,cAAA,CAAe,EAAE,OAAO,CAAA;AAAA,IAC1B,CAAA;AAAA,IACA,CAAC,cAAc;AAAA,GACjB;AAEA,EAAA,MAAM,eAAA,GAAkB,YAAY,MAAM;AACxC,IAAA,UAAA,CAAW,OAAA,GAAU,KAAA;AAAA,EACvB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,uBAAA;AAAA,MACV,KAAA,EAAO,EAAE,UAAA,EAAY,uBAAA,EAAwB;AAAA,MAE7C,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wBAAA,EACX,QAAA,EAAA;AAAA,QAAA,CAAA,IAAA,CAAK,SAAS,IAAA,CAAK,WAAA,qBACnB,IAAA,CAAC,YAAA,EAAA,EAAa,GAAG,EAAA,EACd,QAAA,EAAA;AAAA,UAAA,IAAA,CAAK,KAAA,oBACJ,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,qCAAA;AAAA,cACV,KAAA,EAAO;AAAA,gBACL,KAAA,EAAO,iCAAA;AAAA,gBACP,UAAA,EAAY;AAAA,eACd;AAAA,cAEC,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA,WACR;AAAA,UAED,KAAK,WAAA,oBACJ,GAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,yBAAA;AAAA,cACV,KAAA,EAAO,EAAE,KAAA,EAAO,mCAAA,EAAoC;AAAA,cAEnD,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR,SAAA,EAEJ,CAAA;AAAA,wBAGF,GAAA,CAAC,gBAAa,CAAA,EAAG,EAAA,EACf,8BAAC,SAAA,EAAA,EAAU,OAAA,EAAQ,IAAA,EAAK,KAAA,EAAO,KAAA,EAC7B,QAAA,kBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAK,YAAA;AAAA,YACL,SAAA,EAAU,0EAAA;AAAA,YACV,KAAA,EAAO,EAAE,WAAA,EAAa,OAAA,EAAQ;AAAA,YAC9B,aAAA,EAAe,iBAAA;AAAA,YACf,aAAA,EAAe,iBAAA;AAAA,YACf,WAAA,EAAa,eAAA;AAAA,YACb,eAAA,EAAiB,eAAA;AAAA,YAGjB,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,GAAA,EAAK,QAAA;AAAA,kBACL,GAAA,EAAI,OAAA;AAAA,kBACJ,SAAA,EAAU,6CAAA;AAAA,kBACV,SAAA,EAAW;AAAA;AAAA,eACb;AAAA,8BAGA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,kCAAA;AAAA,kBACV,KAAA,EAAO,EAAE,KAAA,EAAO,CAAA,EAAG,QAAQ,CAAA,CAAA,CAAA,EAAI;AAAA,kBAE/B,QAAA,kBAAA,GAAA;AAAA,oBAAC,KAAA;AAAA,oBAAA;AAAA,sBACC,GAAA,EAAK,SAAA;AAAA,sBACL,GAAA,EAAI,QAAA;AAAA,sBACJ,SAAA,EAAU,6CAAA;AAAA,sBACV,OAAO,EAAE,QAAA,EAAU,YAAA,CAAa,OAAA,EAAS,eAAe,MAAA,EAAO;AAAA,sBAC/D,SAAA,EAAW;AAAA;AAAA;AACb;AAAA,eACF;AAAA,8BAGA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,+BAAA;AAAA,kBACV,KAAA,EAAO;AAAA,oBACL,IAAA,EAAM,GAAG,QAAQ,CAAA,CAAA,CAAA;AAAA,oBACjB,SAAA,EAAW,kBAAA;AAAA,oBACX,UAAA,EAAY,SAAA;AAAA,oBACZ,SAAA,EAAW;AAAA;AACb;AAAA,eACF;AAAA,8BAGA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,GAAA,EAAK,SAAA;AAAA,kBACL,SAAA,EAAU,0EAAA;AAAA,kBACV,KAAA,EAAO;AAAA,oBACL,IAAA,EAAM,GAAG,QAAQ,CAAA,CAAA,CAAA;AAAA,oBACjB,SAAA,EAAW,uBAAA;AAAA,oBACX,UAAA,EAAY,4BAAA;AAAA,oBACZ,SAAA,EAAW,4BAAA;AAAA,oBACX,MAAA,EAAQ,mBAAA;AAAA,oBACR,MAAA,EAAQ;AAAA,mBACV;AAAA,kBAEA,QAAA,kBAAA,GAAA,CAAC,SAAI,KAAA,EAAM,IAAA,EAAK,QAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EACnD,QAAA,kBAAA,GAAA,CAAC,UAAK,CAAA,EAAE,4BAAA,EAA6B,QAAO,SAAA,EAAU,WAAA,EAAY,KAAI,aAAA,EAAc,OAAA,EAAQ,cAAA,EAAe,OAAA,EAAQ,CAAA,EACrH;AAAA;AAAA,eACF;AAAA,8BAGA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,2FAAA;AAAA,kBACV,KAAA,EAAO;AAAA,oBACL,UAAA,EAAY,iBAAA;AAAA,oBACZ,KAAA,EAAO,SAAA;AAAA,oBACP,cAAA,EAAgB;AAAA,mBAClB;AAAA,kBACD,QAAA,EAAA;AAAA;AAAA,eAED;AAAA,8BACA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,4FAAA;AAAA,kBACV,KAAA,EAAO;AAAA,oBACL,UAAA,EAAY,iBAAA;AAAA,oBACZ,KAAA,EAAO,SAAA;AAAA,oBACP,cAAA,EAAgB;AAAA,mBAClB;AAAA,kBACD,QAAA,EAAA;AAAA;AAAA;AAED;AAAA;AAAA,WAEJ,CAAA,EACF;AAAA,OAAA,EACF;AAAA;AAAA,GACF;AAEJ","file":"BeforeAfterSection-6QUJOBO2.js","sourcesContent":["'use client';\n\nimport React, { useRef, useState, useCallback, useEffect } from 'react';\nimport gsap from 'gsap';\nimport type { PortfolioBeforeAfterData } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\nimport GlassCard from '../primitives/GlassCard';\n\ninterface BeforeAfterSectionProps {\n  data: PortfolioBeforeAfterData;\n}\n\nexport default function BeforeAfterSection({ data }: BeforeAfterSectionProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const sliderRef = useRef<HTMLDivElement>(null);\n  const [position, setPosition] = useState(data.defaultPosition ?? 50);\n  const isDragging = useRef(false);\n\n  const beforeUrl = data.before?.asset?._ref || '';\n  const afterUrl = data.after?.asset?._ref || '';\n\n  // Animate slider handle entrance\n  useEffect(() => {\n    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    if (prefersReducedMotion || !sliderRef.current) return;\n\n    gsap.fromTo(\n      sliderRef.current,\n      { opacity: 0, scale: 0.8 },\n      { opacity: 1, scale: 1, duration: 0.6, delay: 0.5, ease: 'back.out(2)' },\n    );\n  }, []);\n\n  const updatePosition = useCallback((clientX: number) => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const rect = container.getBoundingClientRect();\n    const x = clientX - rect.left;\n    const percent = Math.max(0, Math.min(100, (x / rect.width) * 100));\n    setPosition(percent);\n  }, []);\n\n  const handlePointerDown = useCallback(\n    (e: React.PointerEvent) => {\n      isDragging.current = true;\n      (e.target as HTMLElement).setPointerCapture(e.pointerId);\n      updatePosition(e.clientX);\n    },\n    [updatePosition],\n  );\n\n  const handlePointerMove = useCallback(\n    (e: React.PointerEvent) => {\n      if (!isDragging.current) return;\n      updatePosition(e.clientX);\n    },\n    [updatePosition],\n  );\n\n  const handlePointerUp = useCallback(() => {\n    isDragging.current = false;\n  }, []);\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-5xl 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        <ScrollReveal y={40}>\n          <GlassCard padding=\"sm\" hover={false}>\n            <div\n              ref={containerRef}\n              className=\"relative w-full overflow-hidden rounded-xl cursor-col-resize select-none\"\n              style={{ aspectRatio: '16/10' }}\n              onPointerDown={handlePointerDown}\n              onPointerMove={handlePointerMove}\n              onPointerUp={handlePointerUp}\n              onPointerCancel={handlePointerUp}\n            >\n              {/* After image (full background) */}\n              <img\n                src={afterUrl}\n                alt=\"After\"\n                className=\"absolute inset-0 w-full h-full object-cover\"\n                draggable={false}\n              />\n\n              {/* Before image (clipped) */}\n              <div\n                className=\"absolute inset-0 overflow-hidden\"\n                style={{ width: `${position}%` }}\n              >\n                <img\n                  src={beforeUrl}\n                  alt=\"Before\"\n                  className=\"absolute inset-0 w-full h-full object-cover\"\n                  style={{ minWidth: containerRef.current?.offsetWidth || '100%' }}\n                  draggable={false}\n                />\n              </div>\n\n              {/* Slider line */}\n              <div\n                className=\"absolute top-0 bottom-0 w-0.5\"\n                style={{\n                  left: `${position}%`,\n                  transform: 'translateX(-50%)',\n                  background: '#ffffff',\n                  boxShadow: '0 0 8px rgba(0,0,0,0.5)',\n                }}\n              />\n\n              {/* Slider handle */}\n              <div\n                ref={sliderRef}\n                className=\"absolute top-1/2 flex items-center justify-center w-10 h-10 rounded-full\"\n                style={{\n                  left: `${position}%`,\n                  transform: 'translate(-50%, -50%)',\n                  background: 'var(--sk-primary, #6366f1)',\n                  boxShadow: '0 4px 16px rgba(0,0,0,0.3)',\n                  border: '3px solid #ffffff',\n                  zIndex: 5,\n                }}\n              >\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                  <path d=\"M5 3l-4 5 4 5M11 3l4 5-4 5\" stroke=\"#ffffff\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                </svg>\n              </div>\n\n              {/* Before / After labels */}\n              <span\n                className=\"absolute top-4 left-4 px-3 py-1 rounded-lg text-xs font-semibold uppercase tracking-wider\"\n                style={{\n                  background: 'rgba(0,0,0,0.6)',\n                  color: '#ffffff',\n                  backdropFilter: 'blur(4px)',\n                }}\n              >\n                Before\n              </span>\n              <span\n                className=\"absolute top-4 right-4 px-3 py-1 rounded-lg text-xs font-semibold uppercase tracking-wider\"\n                style={{\n                  background: 'rgba(0,0,0,0.6)',\n                  color: '#ffffff',\n                  backdropFilter: 'blur(4px)',\n                }}\n              >\n                After\n              </span>\n            </div>\n          </GlassCard>\n        </ScrollReveal>\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/BeforeAfterSection-DVAWWE4K.cjs

@@ -0,0 +1,181 @@
+'use strict';
+
+var chunkKEOHORIH_cjs = require('./chunk-KEOHORIH.cjs');
+var chunkIKBK7HYX_cjs = require('./chunk-IKBK7HYX.cjs');
+var react = require('react');
+var gsap = require('gsap');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var gsap__default = /*#__PURE__*/_interopDefault(gsap);
+
+function BeforeAfterSection({ data }) {
+  const containerRef = react.useRef(null);
+  const sliderRef = react.useRef(null);
+  const [position, setPosition] = react.useState(data.defaultPosition ?? 50);
+  const isDragging = react.useRef(false);
+  const beforeUrl = data.before?.asset?._ref || "";
+  const afterUrl = data.after?.asset?._ref || "";
+  react.useEffect(() => {
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (prefersReducedMotion || !sliderRef.current) return;
+    gsap__default.default.fromTo(
+      sliderRef.current,
+      { opacity: 0, scale: 0.8 },
+      { opacity: 1, scale: 1, duration: 0.6, delay: 0.5, ease: "back.out(2)" }
+    );
+  }, []);
+  const updatePosition = react.useCallback((clientX) => {
+    const container = containerRef.current;
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    const x = clientX - rect.left;
+    const percent = Math.max(0, Math.min(100, x / rect.width * 100));
+    setPosition(percent);
+  }, []);
+  const handlePointerDown = react.useCallback(
+    (e) => {
+      isDragging.current = true;
+      e.target.setPointerCapture(e.pointerId);
+      updatePosition(e.clientX);
+    },
+    [updatePosition]
+  );
+  const handlePointerMove = react.useCallback(
+    (e) => {
+      if (!isDragging.current) return;
+      updatePosition(e.clientX);
+    },
+    [updatePosition]
+  );
+  const handlePointerUp = react.useCallback(() => {
+    isDragging.current = false;
+  }, []);
+  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-5xl 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(chunkIKBK7HYX_cjs.ScrollReveal, { y: 40, children: /* @__PURE__ */ jsxRuntime.jsx(chunkKEOHORIH_cjs.GlassCard, { padding: "sm", hover: false, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: containerRef,
+            className: "relative w-full overflow-hidden rounded-xl cursor-col-resize select-none",
+            style: { aspectRatio: "16/10" },
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: handlePointerUp,
+            onPointerCancel: handlePointerUp,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: afterUrl,
+                  alt: "After",
+                  className: "absolute inset-0 w-full h-full object-cover",
+                  draggable: false
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute inset-0 overflow-hidden",
+                  style: { width: `${position}%` },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: beforeUrl,
+                      alt: "Before",
+                      className: "absolute inset-0 w-full h-full object-cover",
+                      style: { minWidth: containerRef.current?.offsetWidth || "100%" },
+                      draggable: false
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute top-0 bottom-0 w-0.5",
+                  style: {
+                    left: `${position}%`,
+                    transform: "translateX(-50%)",
+                    background: "#ffffff",
+                    boxShadow: "0 0 8px rgba(0,0,0,0.5)"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  ref: sliderRef,
+                  className: "absolute top-1/2 flex items-center justify-center w-10 h-10 rounded-full",
+                  style: {
+                    left: `${position}%`,
+                    transform: "translate(-50%, -50%)",
+                    background: "var(--sk-primary, #6366f1)",
+                    boxShadow: "0 4px 16px rgba(0,0,0,0.3)",
+                    border: "3px solid #ffffff",
+                    zIndex: 5
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 3l-4 5 4 5M11 3l4 5-4 5", stroke: "#ffffff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "absolute top-4 left-4 px-3 py-1 rounded-lg text-xs font-semibold uppercase tracking-wider",
+                  style: {
+                    background: "rgba(0,0,0,0.6)",
+                    color: "#ffffff",
+                    backdropFilter: "blur(4px)"
+                  },
+                  children: "Before"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "absolute top-4 right-4 px-3 py-1 rounded-lg text-xs font-semibold uppercase tracking-wider",
+                  style: {
+                    background: "rgba(0,0,0,0.6)",
+                    color: "#ffffff",
+                    backdropFilter: "blur(4px)"
+                  },
+                  children: "After"
+                }
+              )
+            ]
+          }
+        ) }) })
+      ] })
+    }
+  );
+}
+
+module.exports = BeforeAfterSection;
+//# sourceMappingURL=BeforeAfterSection-DVAWWE4K.cjs.map
+//# sourceMappingURL=BeforeAfterSection-DVAWWE4K.cjs.map

package/dist/BeforeAfterSection-DVAWWE4K.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/BeforeAfterSection.tsx"],"names":["useRef","useState","useEffect","gsap","useCallback","jsx","jsxs","ScrollReveal","GlassCard"],"mappings":"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","file":"BeforeAfterSection-DVAWWE4K.cjs","sourcesContent":["'use client';\n\nimport React, { useRef, useState, useCallback, useEffect } from 'react';\nimport gsap from 'gsap';\nimport type { PortfolioBeforeAfterData } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\nimport GlassCard from '../primitives/GlassCard';\n\ninterface BeforeAfterSectionProps {\n  data: PortfolioBeforeAfterData;\n}\n\nexport default function BeforeAfterSection({ data }: BeforeAfterSectionProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const sliderRef = useRef<HTMLDivElement>(null);\n  const [position, setPosition] = useState(data.defaultPosition ?? 50);\n  const isDragging = useRef(false);\n\n  const beforeUrl = data.before?.asset?._ref || '';\n  const afterUrl = data.after?.asset?._ref || '';\n\n  // Animate slider handle entrance\n  useEffect(() => {\n    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    if (prefersReducedMotion || !sliderRef.current) return;\n\n    gsap.fromTo(\n      sliderRef.current,\n      { opacity: 0, scale: 0.8 },\n      { opacity: 1, scale: 1, duration: 0.6, delay: 0.5, ease: 'back.out(2)' },\n    );\n  }, []);\n\n  const updatePosition = useCallback((clientX: number) => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const rect = container.getBoundingClientRect();\n    const x = clientX - rect.left;\n    const percent = Math.max(0, Math.min(100, (x / rect.width) * 100));\n    setPosition(percent);\n  }, []);\n\n  const handlePointerDown = useCallback(\n    (e: React.PointerEvent) => {\n      isDragging.current = true;\n      (e.target as HTMLElement).setPointerCapture(e.pointerId);\n      updatePosition(e.clientX);\n    },\n    [updatePosition],\n  );\n\n  const handlePointerMove = useCallback(\n    (e: React.PointerEvent) => {\n      if (!isDragging.current) return;\n      updatePosition(e.clientX);\n    },\n    [updatePosition],\n  );\n\n  const handlePointerUp = useCallback(() => {\n    isDragging.current = false;\n  }, []);\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-5xl 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        <ScrollReveal y={40}>\n          <GlassCard padding=\"sm\" hover={false}>\n            <div\n              ref={containerRef}\n              className=\"relative w-full overflow-hidden rounded-xl cursor-col-resize select-none\"\n              style={{ aspectRatio: '16/10' }}\n              onPointerDown={handlePointerDown}\n              onPointerMove={handlePointerMove}\n              onPointerUp={handlePointerUp}\n              onPointerCancel={handlePointerUp}\n            >\n              {/* After image (full background) */}\n              <img\n                src={afterUrl}\n                alt=\"After\"\n                className=\"absolute inset-0 w-full h-full object-cover\"\n                draggable={false}\n              />\n\n              {/* Before image (clipped) */}\n              <div\n                className=\"absolute inset-0 overflow-hidden\"\n                style={{ width: `${position}%` }}\n              >\n                <img\n                  src={beforeUrl}\n                  alt=\"Before\"\n                  className=\"absolute inset-0 w-full h-full object-cover\"\n                  style={{ minWidth: containerRef.current?.offsetWidth || '100%' }}\n                  draggable={false}\n                />\n              </div>\n\n              {/* Slider line */}\n              <div\n                className=\"absolute top-0 bottom-0 w-0.5\"\n                style={{\n                  left: `${position}%`,\n                  transform: 'translateX(-50%)',\n                  background: '#ffffff',\n                  boxShadow: '0 0 8px rgba(0,0,0,0.5)',\n                }}\n              />\n\n              {/* Slider handle */}\n              <div\n                ref={sliderRef}\n                className=\"absolute top-1/2 flex items-center justify-center w-10 h-10 rounded-full\"\n                style={{\n                  left: `${position}%`,\n                  transform: 'translate(-50%, -50%)',\n                  background: 'var(--sk-primary, #6366f1)',\n                  boxShadow: '0 4px 16px rgba(0,0,0,0.3)',\n                  border: '3px solid #ffffff',\n                  zIndex: 5,\n                }}\n              >\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                  <path d=\"M5 3l-4 5 4 5M11 3l4 5-4 5\" stroke=\"#ffffff\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                </svg>\n              </div>\n\n              {/* Before / After labels */}\n              <span\n                className=\"absolute top-4 left-4 px-3 py-1 rounded-lg text-xs font-semibold uppercase tracking-wider\"\n                style={{\n                  background: 'rgba(0,0,0,0.6)',\n                  color: '#ffffff',\n                  backdropFilter: 'blur(4px)',\n                }}\n              >\n                Before\n              </span>\n              <span\n                className=\"absolute top-4 right-4 px-3 py-1 rounded-lg text-xs font-semibold uppercase tracking-wider\"\n                style={{\n                  background: 'rgba(0,0,0,0.6)',\n                  color: '#ffffff',\n                  backdropFilter: 'blur(4px)',\n                }}\n              >\n                After\n              </span>\n            </div>\n          </GlassCard>\n        </ScrollReveal>\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/CTASection-4JKLXEUF.cjs

@@ -0,0 +1,111 @@
+'use strict';
+
+var chunkKEOHORIH_cjs = require('./chunk-KEOHORIH.cjs');
+var chunkIKBK7HYX_cjs = require('./chunk-IKBK7HYX.cjs');
+var react = require('react');
+var gsap = require('gsap');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var gsap__default = /*#__PURE__*/_interopDefault(gsap);
+
+function CTASection({ data }) {
+  const buttonRef = react.useRef(null);
+  const style = data.style || "primary";
+  const handleMouseEnter = react.useCallback(() => {
+    if (!buttonRef.current) return;
+    gsap__default.default.to(buttonRef.current, {
+      scale: 1.05,
+      y: -2,
+      duration: 0.25,
+      ease: "power2.out"
+    });
+  }, []);
+  const handleMouseLeave = react.useCallback(() => {
+    if (!buttonRef.current) return;
+    gsap__default.default.to(buttonRef.current, {
+      scale: 1,
+      y: 0,
+      duration: 0.25,
+      ease: "power2.out"
+    });
+  }, []);
+  const content = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center text-center gap-6 py-12 px-8 md:px-16", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 30, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "h2",
+      {
+        className: "text-3xl md:text-4xl lg:text-5xl font-bold leading-tight",
+        style: {
+          color: style === "primary" ? "#ffffff" : "var(--sk-text-primary, #ffffff)",
+          fontFamily: "var(--sk-font-heading, inherit)"
+        },
+        children: data.headline
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 20, delay: 0.15, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: "text-base md:text-lg max-w-xl leading-relaxed",
+        style: {
+          color: style === "primary" ? "rgba(255,255,255,0.85)" : "var(--sk-text-secondary, #a1a1aa)"
+        },
+        children: data.description
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 20, delay: 0.3, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "a",
+      {
+        ref: buttonRef,
+        href: data.buttonUrl,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        className: "inline-flex items-center gap-2 px-8 py-4 rounded-xl text-base font-semibold transition-colors",
+        style: {
+          background: style === "primary" ? "#ffffff" : "var(--sk-primary, #6366f1)",
+          color: style === "primary" ? "var(--sk-primary, #6366f1)" : "#ffffff",
+          boxShadow: "0 4px 20px rgba(0,0,0,0.2)",
+          willChange: "transform"
+        },
+        children: [
+          data.buttonText,
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.75 9h10.5M9.75 4.5L14.25 9l-4.5 4.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+        ]
+      }
+    ) })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "w-full py-20 md:py-28", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-5xl mx-auto px-6", children: style === "primary" ? /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "relative overflow-hidden rounded-2xl",
+      style: {
+        background: `linear-gradient(135deg, var(--sk-primary, #6366f1) 0%, color-mix(in srgb, var(--sk-primary, #6366f1) 70%, #000000) 100%)`
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute -top-24 -right-24 w-64 h-64 rounded-full opacity-20",
+            style: {
+              background: "radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute -bottom-16 -left-16 w-48 h-48 rounded-full opacity-15",
+            style: {
+              background: "radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10", children: content })
+      ]
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(chunkKEOHORIH_cjs.GlassCard, { padding: "sm", hover: false, children: content }) }) });
+}
+
+module.exports = CTASection;
+//# sourceMappingURL=CTASection-4JKLXEUF.cjs.map
+//# sourceMappingURL=CTASection-4JKLXEUF.cjs.map

package/dist/CTASection-4JKLXEUF.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/CTASection.tsx"],"names":["useRef","useCallback","gsap","jsxs","jsx","ScrollReveal","GlassCard"],"mappings":";;;;;;;;;;;;AAYe,SAAR,UAAA,CAA4B,EAAE,IAAA,EAAK,EAAoB;AAC5D,EAAA,MAAM,SAAA,GAAYA,aAA0B,IAAI,CAAA;AAChD,EAAA,MAAM,KAAA,GAAQ,KAAK,KAAA,IAAS,SAAA;AAE5B,EAAA,MAAM,gBAAA,GAAmBC,kBAAY,MAAM;AACzC,IAAA,IAAI,CAAC,UAAU,OAAA,EAAS;AACxB,IAAAC,qBAAA,CAAK,EAAA,CAAG,UAAU,OAAA,EAAS;AAAA,MACzB,KAAA,EAAO,IAAA;AAAA,MACP,CAAA,EAAG,EAAA;AAAA,MACH,QAAA,EAAU,IAAA;AAAA,MACV,IAAA,EAAM;AAAA,KACP,CAAA;AAAA,EACH,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,gBAAA,GAAmBD,kBAAY,MAAM;AACzC,IAAA,IAAI,CAAC,UAAU,OAAA,EAAS;AACxB,IAAAC,qBAAA,CAAK,EAAA,CAAG,UAAU,OAAA,EAAS;AAAA,MACzB,KAAA,EAAO,CAAA;AAAA,MACP,CAAA,EAAG,CAAA;AAAA,MACH,QAAA,EAAU,IAAA;AAAA,MACV,IAAA,EAAM;AAAA,KACP,CAAA;AAAA,EACH,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,OAAA,mBACJC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kEAAA,EACb,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,8BAAA,EAAA,EAAa,GAAG,EAAA,EACf,QAAA,kBAAAD,cAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,0DAAA;AAAA,QACV,KAAA,EAAO;AAAA,UACL,KAAA,EAAO,KAAA,KAAU,SAAA,GAAY,SAAA,GAAY,iCAAA;AAAA,UACzC,UAAA,EAAY;AAAA,SACd;AAAA,QAEC,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA,KACR,EACF,CAAA;AAAA,oBAEAA,cAAA,CAACC,8BAAA,EAAA,EAAa,CAAA,EAAG,EAAA,EAAI,OAAO,IAAA,EAC1B,QAAA,kBAAAD,cAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,+CAAA;AAAA,QACV,KAAA,EAAO;AAAA,UACL,KAAA,EAAO,KAAA,KAAU,SAAA,GAAY,wBAAA,GAA2B;AAAA,SAC1D;AAAA,QAEC,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA,KACR,EACF,CAAA;AAAA,oBAEAA,cAAA,CAACC,8BAAA,EAAA,EAAa,CAAA,EAAG,EAAA,EAAI,OAAO,GAAA,EAC1B,QAAA,kBAAAF,eAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,SAAA;AAAA,QACL,MAAM,IAAA,CAAK,SAAA;AAAA,QACX,YAAA,EAAc,gBAAA;AAAA,QACd,YAAA,EAAc,gBAAA;AAAA,QACd,SAAA,EAAU,+FAAA;AAAA,QACV,KAAA,EAAO;AAAA,UACL,UAAA,EACE,KAAA,KAAU,SAAA,GACN,SAAA,GACA,4BAAA;AAAA,UACN,KAAA,EACE,KAAA,KAAU,SAAA,GACN,4BAAA,GACA,SAAA;AAAA,UACN,SAAA,EAAW,4BAAA;AAAA,UACX,UAAA,EAAY;AAAA,SACd;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,IAAA,CAAK,UAAA;AAAA,0BACNC,cAAA,CAAC,SAAI,KAAA,EAAM,IAAA,EAAK,QAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EACnD,QAAA,kBAAAA,cAAA,CAAC,UAAK,CAAA,EAAE,wCAAA,EAAyC,QAAO,cAAA,EAAe,WAAA,EAAY,KAAI,aAAA,EAAc,OAAA,EAAQ,cAAA,EAAe,OAAA,EAAQ,CAAA,EACtI;AAAA;AAAA;AAAA,KACF,EACF;AAAA,GAAA,EACF,CAAA;AAGF,EAAA,uBACEA,cAAA,CAAC,aAAQ,SAAA,EAAU,uBAAA,EACjB,yCAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wBAAA,EACZ,QAAA,EAAA,KAAA,KAAU,SAAA,mBACTD,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,sCAAA;AAAA,MACV,KAAA,EAAO;AAAA,QACL,UAAA,EAAY,CAAA,wHAAA;AAAA,OACd;AAAA,MAGA,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,8DAAA;AAAA,YACV,KAAA,EAAO;AAAA,cACL,UAAA,EAAY;AAAA;AACd;AAAA,SACF;AAAA,wBACAA,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,gEAAA;AAAA,YACV,KAAA,EAAO;AAAA,cACL,UAAA,EAAY;AAAA;AACd;AAAA,SACF;AAAA,wBACAA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,eAAA,EAAiB,QAAA,EAAA,OAAA,EAAQ;AAAA;AAAA;AAAA,GAC1C,kCAECE,2BAAA,EAAA,EAAU,OAAA,EAAQ,MAAK,KAAA,EAAO,KAAA,EAC5B,QAAA,EAAA,OAAA,EACH,CAAA,EAEJ,CAAA,EACF,CAAA;AAEJ","file":"CTASection-4JKLXEUF.cjs","sourcesContent":["'use client';\n\nimport React, { useRef, useCallback } from 'react';\nimport gsap from 'gsap';\nimport type { PortfolioCTAData } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\nimport GlassCard from '../primitives/GlassCard';\n\ninterface CTASectionProps {\n  data: PortfolioCTAData;\n}\n\nexport default function CTASection({ data }: CTASectionProps) {\n  const buttonRef = useRef<HTMLAnchorElement>(null);\n  const style = data.style || 'primary';\n\n  const handleMouseEnter = useCallback(() => {\n    if (!buttonRef.current) return;\n    gsap.to(buttonRef.current, {\n      scale: 1.05,\n      y: -2,\n      duration: 0.25,\n      ease: 'power2.out',\n    });\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    if (!buttonRef.current) return;\n    gsap.to(buttonRef.current, {\n      scale: 1,\n      y: 0,\n      duration: 0.25,\n      ease: 'power2.out',\n    });\n  }, []);\n\n  const content = (\n    <div className=\"flex flex-col items-center text-center gap-6 py-12 px-8 md:px-16\">\n      <ScrollReveal y={30}>\n        <h2\n          className=\"text-3xl md:text-4xl lg:text-5xl font-bold leading-tight\"\n          style={{\n            color: style === 'primary' ? '#ffffff' : 'var(--sk-text-primary, #ffffff)',\n            fontFamily: 'var(--sk-font-heading, inherit)',\n          }}\n        >\n          {data.headline}\n        </h2>\n      </ScrollReveal>\n\n      <ScrollReveal y={20} delay={0.15}>\n        <p\n          className=\"text-base md:text-lg max-w-xl leading-relaxed\"\n          style={{\n            color: style === 'primary' ? 'rgba(255,255,255,0.85)' : 'var(--sk-text-secondary, #a1a1aa)',\n          }}\n        >\n          {data.description}\n        </p>\n      </ScrollReveal>\n\n      <ScrollReveal y={20} delay={0.3}>\n        <a\n          ref={buttonRef}\n          href={data.buttonUrl}\n          onMouseEnter={handleMouseEnter}\n          onMouseLeave={handleMouseLeave}\n          className=\"inline-flex items-center gap-2 px-8 py-4 rounded-xl text-base font-semibold transition-colors\"\n          style={{\n            background:\n              style === 'primary'\n                ? '#ffffff'\n                : 'var(--sk-primary, #6366f1)',\n            color:\n              style === 'primary'\n                ? 'var(--sk-primary, #6366f1)'\n                : '#ffffff',\n            boxShadow: '0 4px 20px rgba(0,0,0,0.2)',\n            willChange: 'transform',\n          }}\n        >\n          {data.buttonText}\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n            <path d=\"M3.75 9h10.5M9.75 4.5L14.25 9l-4.5 4.5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          </svg>\n        </a>\n      </ScrollReveal>\n    </div>\n  );\n\n  return (\n    <section className=\"w-full py-20 md:py-28\">\n      <div className=\"max-w-5xl mx-auto px-6\">\n        {style === 'primary' ? (\n          <div\n            className=\"relative overflow-hidden rounded-2xl\"\n            style={{\n              background: `linear-gradient(135deg, var(--sk-primary, #6366f1) 0%, color-mix(in srgb, var(--sk-primary, #6366f1) 70%, #000000) 100%)`,\n            }}\n          >\n            {/* Background gradient decorations */}\n            <div\n              className=\"absolute -top-24 -right-24 w-64 h-64 rounded-full opacity-20\"\n              style={{\n                background: 'radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%)',\n              }}\n            />\n            <div\n              className=\"absolute -bottom-16 -left-16 w-48 h-48 rounded-full opacity-15\"\n              style={{\n                background: 'radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%)',\n              }}\n            />\n            <div className=\"relative z-10\">{content}</div>\n          </div>\n        ) : (\n          <GlassCard padding=\"sm\" hover={false}>\n            {content}\n          </GlassCard>\n        )}\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/CTASection-BJA72XIL.js

@@ -0,0 +1,106 @@
+'use client';
+import { GlassCard } from './chunk-YB4B3OMC.js';
+import { ScrollReveal } from './chunk-7CFFAKDM.js';
+import { useRef, useCallback } from 'react';
+import gsap from 'gsap';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function CTASection({ data }) {
+  const buttonRef = useRef(null);
+  const style = data.style || "primary";
+  const handleMouseEnter = useCallback(() => {
+    if (!buttonRef.current) return;
+    gsap.to(buttonRef.current, {
+      scale: 1.05,
+      y: -2,
+      duration: 0.25,
+      ease: "power2.out"
+    });
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    if (!buttonRef.current) return;
+    gsap.to(buttonRef.current, {
+      scale: 1,
+      y: 0,
+      duration: 0.25,
+      ease: "power2.out"
+    });
+  }, []);
+  const content = /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center gap-6 py-12 px-8 md:px-16", children: [
+    /* @__PURE__ */ jsx(ScrollReveal, { y: 30, children: /* @__PURE__ */ jsx(
+      "h2",
+      {
+        className: "text-3xl md:text-4xl lg:text-5xl font-bold leading-tight",
+        style: {
+          color: style === "primary" ? "#ffffff" : "var(--sk-text-primary, #ffffff)",
+          fontFamily: "var(--sk-font-heading, inherit)"
+        },
+        children: data.headline
+      }
+    ) }),
+    /* @__PURE__ */ jsx(ScrollReveal, { y: 20, delay: 0.15, children: /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "text-base md:text-lg max-w-xl leading-relaxed",
+        style: {
+          color: style === "primary" ? "rgba(255,255,255,0.85)" : "var(--sk-text-secondary, #a1a1aa)"
+        },
+        children: data.description
+      }
+    ) }),
+    /* @__PURE__ */ jsx(ScrollReveal, { y: 20, delay: 0.3, children: /* @__PURE__ */ jsxs(
+      "a",
+      {
+        ref: buttonRef,
+        href: data.buttonUrl,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        className: "inline-flex items-center gap-2 px-8 py-4 rounded-xl text-base font-semibold transition-colors",
+        style: {
+          background: style === "primary" ? "#ffffff" : "var(--sk-primary, #6366f1)",
+          color: style === "primary" ? "var(--sk-primary, #6366f1)" : "#ffffff",
+          boxShadow: "0 4px 20px rgba(0,0,0,0.2)",
+          willChange: "transform"
+        },
+        children: [
+          data.buttonText,
+          /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3.75 9h10.5M9.75 4.5L14.25 9l-4.5 4.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+        ]
+      }
+    ) })
+  ] });
+  return /* @__PURE__ */ jsx("section", { className: "w-full py-20 md:py-28", children: /* @__PURE__ */ jsx("div", { className: "max-w-5xl mx-auto px-6", children: style === "primary" ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative overflow-hidden rounded-2xl",
+      style: {
+        background: `linear-gradient(135deg, var(--sk-primary, #6366f1) 0%, color-mix(in srgb, var(--sk-primary, #6366f1) 70%, #000000) 100%)`
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute -top-24 -right-24 w-64 h-64 rounded-full opacity-20",
+            style: {
+              background: "radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute -bottom-16 -left-16 w-48 h-48 rounded-full opacity-15",
+            style: {
+              background: "radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "relative z-10", children: content })
+      ]
+    }
+  ) : /* @__PURE__ */ jsx(GlassCard, { padding: "sm", hover: false, children: content }) }) });
+}
+
+export { CTASection as default };
+//# sourceMappingURL=CTASection-BJA72XIL.js.map
+//# sourceMappingURL=CTASection-BJA72XIL.js.map