@sonordev/agency-site-kit 0.3.1 → 0.4.0

package/dist/portfolio/primitives/SplitHeadline.cjs

@@ -0,0 +1,107 @@
+'use client';
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/portfolio/components/primitives/SplitHeadline.tsx
+var SplitHeadline_exports = {};
+__export(SplitHeadline_exports, {
+  default: () => SplitHeadline
+});
+module.exports = __toCommonJS(SplitHeadline_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var EASE = "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
+function SplitHeadline({
+  children,
+  tag: Tag = "h2",
+  className,
+  style,
+  delay = 0,
+  duration = 0.8,
+  staggerAmount = 0.02
+}) {
+  const ref = (0, import_react.useRef)(null);
+  const splitContent = (0, import_react.useMemo)(() => {
+    const words = children.split(" ");
+    return words.map((word, wi) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { display: "inline-block", whiteSpace: "nowrap" }, children: [
+      word.split("").map((char, ci) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          className: "split-char",
+          style: { display: "inline-block" },
+          children: char
+        },
+        ci
+      )),
+      wi < words.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { display: "inline-block" }, children: "\xA0" })
+    ] }, wi));
+  }, [children]);
+  (0, import_react.useEffect)(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const rect = el.getBoundingClientRect();
+    if (rect.top < window.innerHeight && rect.bottom > 0) return;
+    const chars = Array.from(el.querySelectorAll(".split-char"));
+    for (const char of chars) {
+      char.style.opacity = "0";
+      char.style.transform = "translateY(20px)";
+    }
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        chars.forEach((char, i) => {
+          const charDelay = delay + i * staggerAmount;
+          char.style.transition = `opacity ${duration}s ${EASE} ${charDelay}s, transform ${duration}s ${EASE} ${charDelay}s`;
+          char.style.opacity = "1";
+          char.style.transform = "translateY(0px)";
+        });
+        io.disconnect();
+      },
+      { rootMargin: "0px 0px -15% 0px" }
+      // ≈ 'top 85%' trigger start
+    );
+    io.observe(el);
+    return () => {
+      io.disconnect();
+      for (const char of chars) {
+        char.style.transition = "";
+        char.style.opacity = "";
+        char.style.transform = "";
+      }
+    };
+  }, [delay, duration, staggerAmount]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Tag,
+    {
+      ref,
+      className,
+      style: {
+        overflowX: "clip",
+        overflowY: "hidden",
+        overflowWrap: "break-word",
+        wordBreak: "break-word",
+        ...style
+      },
+      children: splitContent
+    }
+  );
+}
+//# sourceMappingURL=SplitHeadline.cjs.map

package/dist/portfolio/primitives/SplitHeadline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/primitives/SplitHeadline.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect, useMemo } from 'react';\n\ninterface SplitHeadlineProps {\n  children: string;\n  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'p';\n  className?: string;\n  style?: React.CSSProperties;\n  delay?: number;\n  duration?: number;\n  staggerAmount?: number;\n}\n\nconst EASE = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'; // ≈ power2.out\n\n/**\n * Per-character staggered headline reveal — IntersectionObserver + CSS\n * transitions.\n *\n * SSR renders the full headline visible (crawlers and no-JS users always see\n * the text). Characters are hidden at hydration ONLY when the headline is\n * still below the viewport, so above-the-fold copy is never re-hidden (house\n * LCP rule). Each character transitions in with an incremental delay,\n * matching the old staggered tween.\n */\nexport default function SplitHeadline({\n  children,\n  tag: Tag = 'h2',\n  className,\n  style,\n  delay = 0,\n  duration = 0.8,\n  staggerAmount = 0.02,\n}: SplitHeadlineProps) {\n  const ref = useRef<HTMLElement>(null);\n\n  // Split text into words and characters, preserving spaces\n  const splitContent = useMemo(() => {\n    const words = children.split(' ');\n    return words.map((word, wi) => (\n      <span key={wi} style={{ display: 'inline-block', whiteSpace: 'nowrap' }}>\n        {word.split('').map((char, ci) => (\n          <span\n            key={ci}\n            className=\"split-char\"\n            style={{ display: 'inline-block' }}\n          >\n            {char}\n          </span>\n        ))}\n        {wi < words.length - 1 && (\n          <span style={{ display: 'inline-block' }}>&nbsp;</span>\n        )}\n      </span>\n    ));\n  }, [children]);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    // Respect prefers-reduced-motion — the SSR markup is already visible.\n    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n\n    // Never re-hide a headline already in the viewport at hydration.\n    const rect = el.getBoundingClientRect();\n    if (rect.top < window.innerHeight && rect.bottom > 0) return;\n\n    const chars = Array.from(el.querySelectorAll<HTMLElement>('.split-char'));\n\n    for (const char of chars) {\n      char.style.opacity = '0';\n      char.style.transform = 'translateY(20px)';\n    }\n\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry.isIntersecting) return;\n        chars.forEach((char, i) => {\n          const charDelay = delay + i * staggerAmount;\n          char.style.transition = `opacity ${duration}s ${EASE} ${charDelay}s, transform ${duration}s ${EASE} ${charDelay}s`;\n          char.style.opacity = '1';\n          char.style.transform = 'translateY(0px)';\n        });\n        io.disconnect();\n      },\n      { rootMargin: '0px 0px -15% 0px' }, // ≈ 'top 85%' trigger start\n    );\n    io.observe(el);\n\n    return () => {\n      io.disconnect();\n      for (const char of chars) {\n        char.style.transition = '';\n        char.style.opacity = '';\n        char.style.transform = '';\n      }\n    };\n  }, [delay, duration, staggerAmount]);\n\n  return (\n    <Tag\n      ref={ref as React.RefObject<any>}\n      className={className}\n      style={{\n        overflowX: 'clip',\n        overflowY: 'hidden',\n        overflowWrap: 'break-word',\n        wordBreak: 'break-word',\n        ...style,\n      }}\n    >\n      {splitContent}\n    </Tag>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAkD;AAuC5C;AA3BN,IAAM,OAAO;AAYE,SAAR,cAA+B;AAAA,EACpC;AAAA,EACA,KAAK,MAAM;AAAA,EACX;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,gBAAgB;AAClB,GAAuB;AACrB,QAAM,UAAM,qBAAoB,IAAI;AAGpC,QAAM,mBAAe,sBAAQ,MAAM;AACjC,UAAM,QAAQ,SAAS,MAAM,GAAG;AAChC,WAAO,MAAM,IAAI,CAAC,MAAM,OACtB,6CAAC,UAAc,OAAO,EAAE,SAAS,gBAAgB,YAAY,SAAS,GACnE;AAAA,WAAK,MAAM,EAAE,EAAE,IAAI,CAAC,MAAM,OACzB;AAAA,QAAC;AAAA;AAAA,UAEC,WAAU;AAAA,UACV,OAAO,EAAE,SAAS,eAAe;AAAA,UAEhC;AAAA;AAAA,QAJI;AAAA,MAKP,CACD;AAAA,MACA,KAAK,MAAM,SAAS,KACnB,4CAAC,UAAK,OAAO,EAAE,SAAS,eAAe,GAAG,kBAAM;AAAA,SAXzC,EAaX,CACD;AAAA,EACH,GAAG,CAAC,QAAQ,CAAC;AAEb,8BAAU,MAAM;AACd,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AAGT,QAAI,OAAO,WAAW,kCAAkC,EAAE,QAAS;AAGnE,UAAM,OAAO,GAAG,sBAAsB;AACtC,QAAI,KAAK,MAAM,OAAO,eAAe,KAAK,SAAS,EAAG;AAEtD,UAAM,QAAQ,MAAM,KAAK,GAAG,iBAA8B,aAAa,CAAC;AAExE,eAAW,QAAQ,OAAO;AACxB,WAAK,MAAM,UAAU;AACrB,WAAK,MAAM,YAAY;AAAA,IACzB;AAEA,UAAM,KAAK,IAAI;AAAA,MACb,CAAC,CAAC,KAAK,MAAM;AACX,YAAI,CAAC,MAAM,eAAgB;AAC3B,cAAM,QAAQ,CAAC,MAAM,MAAM;AACzB,gBAAM,YAAY,QAAQ,IAAI;AAC9B,eAAK,MAAM,aAAa,WAAW,QAAQ,KAAK,IAAI,IAAI,SAAS,gBAAgB,QAAQ,KAAK,IAAI,IAAI,SAAS;AAC/G,eAAK,MAAM,UAAU;AACrB,eAAK,MAAM,YAAY;AAAA,QACzB,CAAC;AACD,WAAG,WAAW;AAAA,MAChB;AAAA,MACA,EAAE,YAAY,mBAAmB;AAAA;AAAA,IACnC;AACA,OAAG,QAAQ,EAAE;AAEb,WAAO,MAAM;AACX,SAAG,WAAW;AACd,iBAAW,QAAQ,OAAO;AACxB,aAAK,MAAM,aAAa;AACxB,aAAK,MAAM,UAAU;AACrB,aAAK,MAAM,YAAY;AAAA,MACzB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,UAAU,aAAa,CAAC;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACL,WAAW;AAAA,QACX,WAAW;AAAA,QACX,cAAc;AAAA,QACd,WAAW;AAAA,QACX,GAAG;AAAA,MACL;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/portfolio/primitives/SplitHeadline.d.cts

@@ -0,0 +1,24 @@
+import React from 'react';
+
+interface SplitHeadlineProps {
+    children: string;
+    tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'p';
+    className?: string;
+    style?: React.CSSProperties;
+    delay?: number;
+    duration?: number;
+    staggerAmount?: number;
+}
+/**
+ * Per-character staggered headline reveal — IntersectionObserver + CSS
+ * transitions.
+ *
+ * SSR renders the full headline visible (crawlers and no-JS users always see
+ * the text). Characters are hidden at hydration ONLY when the headline is
+ * still below the viewport, so above-the-fold copy is never re-hidden (house
+ * LCP rule). Each character transitions in with an incremental delay,
+ * matching the old staggered tween.
+ */
+declare function SplitHeadline({ children, tag: Tag, className, style, delay, duration, staggerAmount, }: SplitHeadlineProps): React.JSX.Element;
+
+export { SplitHeadline as default };

package/dist/portfolio/primitives/SplitHeadline.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+
+interface SplitHeadlineProps {
+    children: string;
+    tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'p';
+    className?: string;
+    style?: React.CSSProperties;
+    delay?: number;
+    duration?: number;
+    staggerAmount?: number;
+}
+/**
+ * Per-character staggered headline reveal — IntersectionObserver + CSS
+ * transitions.
+ *
+ * SSR renders the full headline visible (crawlers and no-JS users always see
+ * the text). Characters are hidden at hydration ONLY when the headline is
+ * still below the viewport, so above-the-fold copy is never re-hidden (house
+ * LCP rule). Each character transitions in with an incremental delay,
+ * matching the old staggered tween.
+ */
+declare function SplitHeadline({ children, tag: Tag, className, style, delay, duration, staggerAmount, }: SplitHeadlineProps): React.JSX.Element;
+
+export { SplitHeadline as default };

package/dist/portfolio/primitives/SplitHeadline.js

@@ -0,0 +1,87 @@
+'use client';
+"use client";
+
+// src/portfolio/components/primitives/SplitHeadline.tsx
+import { useRef, useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EASE = "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
+function SplitHeadline({
+  children,
+  tag: Tag = "h2",
+  className,
+  style,
+  delay = 0,
+  duration = 0.8,
+  staggerAmount = 0.02
+}) {
+  const ref = useRef(null);
+  const splitContent = useMemo(() => {
+    const words = children.split(" ");
+    return words.map((word, wi) => /* @__PURE__ */ jsxs("span", { style: { display: "inline-block", whiteSpace: "nowrap" }, children: [
+      word.split("").map((char, ci) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "split-char",
+          style: { display: "inline-block" },
+          children: char
+        },
+        ci
+      )),
+      wi < words.length - 1 && /* @__PURE__ */ jsx("span", { style: { display: "inline-block" }, children: "\xA0" })
+    ] }, wi));
+  }, [children]);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const rect = el.getBoundingClientRect();
+    if (rect.top < window.innerHeight && rect.bottom > 0) return;
+    const chars = Array.from(el.querySelectorAll(".split-char"));
+    for (const char of chars) {
+      char.style.opacity = "0";
+      char.style.transform = "translateY(20px)";
+    }
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        chars.forEach((char, i) => {
+          const charDelay = delay + i * staggerAmount;
+          char.style.transition = `opacity ${duration}s ${EASE} ${charDelay}s, transform ${duration}s ${EASE} ${charDelay}s`;
+          char.style.opacity = "1";
+          char.style.transform = "translateY(0px)";
+        });
+        io.disconnect();
+      },
+      { rootMargin: "0px 0px -15% 0px" }
+      // ≈ 'top 85%' trigger start
+    );
+    io.observe(el);
+    return () => {
+      io.disconnect();
+      for (const char of chars) {
+        char.style.transition = "";
+        char.style.opacity = "";
+        char.style.transform = "";
+      }
+    };
+  }, [delay, duration, staggerAmount]);
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      className,
+      style: {
+        overflowX: "clip",
+        overflowY: "hidden",
+        overflowWrap: "break-word",
+        wordBreak: "break-word",
+        ...style
+      },
+      children: splitContent
+    }
+  );
+}
+export {
+  SplitHeadline as default
+};
+//# sourceMappingURL=SplitHeadline.js.map

package/dist/portfolio/primitives/SplitHeadline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/primitives/SplitHeadline.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect, useMemo } from 'react';\n\ninterface SplitHeadlineProps {\n  children: string;\n  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'p';\n  className?: string;\n  style?: React.CSSProperties;\n  delay?: number;\n  duration?: number;\n  staggerAmount?: number;\n}\n\nconst EASE = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'; // ≈ power2.out\n\n/**\n * Per-character staggered headline reveal — IntersectionObserver + CSS\n * transitions.\n *\n * SSR renders the full headline visible (crawlers and no-JS users always see\n * the text). Characters are hidden at hydration ONLY when the headline is\n * still below the viewport, so above-the-fold copy is never re-hidden (house\n * LCP rule). Each character transitions in with an incremental delay,\n * matching the old staggered tween.\n */\nexport default function SplitHeadline({\n  children,\n  tag: Tag = 'h2',\n  className,\n  style,\n  delay = 0,\n  duration = 0.8,\n  staggerAmount = 0.02,\n}: SplitHeadlineProps) {\n  const ref = useRef<HTMLElement>(null);\n\n  // Split text into words and characters, preserving spaces\n  const splitContent = useMemo(() => {\n    const words = children.split(' ');\n    return words.map((word, wi) => (\n      <span key={wi} style={{ display: 'inline-block', whiteSpace: 'nowrap' }}>\n        {word.split('').map((char, ci) => (\n          <span\n            key={ci}\n            className=\"split-char\"\n            style={{ display: 'inline-block' }}\n          >\n            {char}\n          </span>\n        ))}\n        {wi < words.length - 1 && (\n          <span style={{ display: 'inline-block' }}>&nbsp;</span>\n        )}\n      </span>\n    ));\n  }, [children]);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    // Respect prefers-reduced-motion — the SSR markup is already visible.\n    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n\n    // Never re-hide a headline already in the viewport at hydration.\n    const rect = el.getBoundingClientRect();\n    if (rect.top < window.innerHeight && rect.bottom > 0) return;\n\n    const chars = Array.from(el.querySelectorAll<HTMLElement>('.split-char'));\n\n    for (const char of chars) {\n      char.style.opacity = '0';\n      char.style.transform = 'translateY(20px)';\n    }\n\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry.isIntersecting) return;\n        chars.forEach((char, i) => {\n          const charDelay = delay + i * staggerAmount;\n          char.style.transition = `opacity ${duration}s ${EASE} ${charDelay}s, transform ${duration}s ${EASE} ${charDelay}s`;\n          char.style.opacity = '1';\n          char.style.transform = 'translateY(0px)';\n        });\n        io.disconnect();\n      },\n      { rootMargin: '0px 0px -15% 0px' }, // ≈ 'top 85%' trigger start\n    );\n    io.observe(el);\n\n    return () => {\n      io.disconnect();\n      for (const char of chars) {\n        char.style.transition = '';\n        char.style.opacity = '';\n        char.style.transform = '';\n      }\n    };\n  }, [delay, duration, staggerAmount]);\n\n  return (\n    <Tag\n      ref={ref as React.RefObject<any>}\n      className={className}\n      style={{\n        overflowX: 'clip',\n        overflowY: 'hidden',\n        overflowWrap: 'break-word',\n        wordBreak: 'break-word',\n        ...style,\n      }}\n    >\n      {splitContent}\n    </Tag>\n  );\n}\n"],"mappings":";;;;AAEA,SAAgB,QAAQ,WAAW,eAAe;AAuC5C,SAEI,KAFJ;AA3BN,IAAM,OAAO;AAYE,SAAR,cAA+B;AAAA,EACpC;AAAA,EACA,KAAK,MAAM;AAAA,EACX;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,gBAAgB;AAClB,GAAuB;AACrB,QAAM,MAAM,OAAoB,IAAI;AAGpC,QAAM,eAAe,QAAQ,MAAM;AACjC,UAAM,QAAQ,SAAS,MAAM,GAAG;AAChC,WAAO,MAAM,IAAI,CAAC,MAAM,OACtB,qBAAC,UAAc,OAAO,EAAE,SAAS,gBAAgB,YAAY,SAAS,GACnE;AAAA,WAAK,MAAM,EAAE,EAAE,IAAI,CAAC,MAAM,OACzB;AAAA,QAAC;AAAA;AAAA,UAEC,WAAU;AAAA,UACV,OAAO,EAAE,SAAS,eAAe;AAAA,UAEhC;AAAA;AAAA,QAJI;AAAA,MAKP,CACD;AAAA,MACA,KAAK,MAAM,SAAS,KACnB,oBAAC,UAAK,OAAO,EAAE,SAAS,eAAe,GAAG,kBAAM;AAAA,SAXzC,EAaX,CACD;AAAA,EACH,GAAG,CAAC,QAAQ,CAAC;AAEb,YAAU,MAAM;AACd,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AAGT,QAAI,OAAO,WAAW,kCAAkC,EAAE,QAAS;AAGnE,UAAM,OAAO,GAAG,sBAAsB;AACtC,QAAI,KAAK,MAAM,OAAO,eAAe,KAAK,SAAS,EAAG;AAEtD,UAAM,QAAQ,MAAM,KAAK,GAAG,iBAA8B,aAAa,CAAC;AAExE,eAAW,QAAQ,OAAO;AACxB,WAAK,MAAM,UAAU;AACrB,WAAK,MAAM,YAAY;AAAA,IACzB;AAEA,UAAM,KAAK,IAAI;AAAA,MACb,CAAC,CAAC,KAAK,MAAM;AACX,YAAI,CAAC,MAAM,eAAgB;AAC3B,cAAM,QAAQ,CAAC,MAAM,MAAM;AACzB,gBAAM,YAAY,QAAQ,IAAI;AAC9B,eAAK,MAAM,aAAa,WAAW,QAAQ,KAAK,IAAI,IAAI,SAAS,gBAAgB,QAAQ,KAAK,IAAI,IAAI,SAAS;AAC/G,eAAK,MAAM,UAAU;AACrB,eAAK,MAAM,YAAY;AAAA,QACzB,CAAC;AACD,WAAG,WAAW;AAAA,MAChB;AAAA,MACA,EAAE,YAAY,mBAAmB;AAAA;AAAA,IACnC;AACA,OAAG,QAAQ,EAAE;AAEb,WAAO,MAAM;AACX,SAAG,WAAW;AACd,iBAAW,QAAQ,OAAO;AACxB,aAAK,MAAM,aAAa;AACxB,aAAK,MAAM,UAAU;AACrB,aAAK,MAAM,YAAY;AAAA,MACzB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,UAAU,aAAa,CAAC;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACL,WAAW;AAAA,QACX,WAAW;AAAA,QACX,cAAc;AAAA,QACd,WAAW;AAAA,QACX,GAAG;AAAA,MACL;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/portfolio/sections/BeforeAfterSection.cjs

@@ -0,0 +1,271 @@
+'use client';
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/portfolio/components/sections/BeforeAfterSection.tsx
+var BeforeAfterSection_exports = {};
+__export(BeforeAfterSection_exports, {
+  default: () => BeforeAfterSection
+});
+module.exports = __toCommonJS(BeforeAfterSection_exports);
+var import_react = require("react");
+var import_image = __toESM(require("next/image"), 1);
+
+// src/shared/images.ts
+var SANITY_ASSET_REF = /^image-[A-Za-z0-9]+-\d+x\d+-[a-z0-9]+$/;
+var FILENAME_DIMS = /-(\d{2,5})x(\d{2,5})\.[a-z0-9]+(?:\?.*)?$/i;
+var warnedAboutRefs = false;
+function resolvePortfolioImage(input) {
+  const raw = typeof input === "string" ? input : input?.asset?._ref ?? "";
+  const value = (raw || "").trim();
+  if (!value) return null;
+  if (SANITY_ASSET_REF.test(value)) {
+    if (!warnedAboutRefs && typeof console !== "undefined") {
+      warnedAboutRefs = true;
+      console.warn(
+        "[@sonordev/agency-site-kit] Received a raw Sanity asset ref instead of an image URL \u2014 skipping render. The Sonor API should resolve image refs to cdn.sanity.io URLs before returning portfolio sections."
+      );
+    }
+    return null;
+  }
+  if (!/^https?:\/\//i.test(value) && !value.startsWith("/")) return null;
+  const dims = value.match(FILENAME_DIMS);
+  if (dims) {
+    const width = parseInt(dims[1], 10);
+    const height = parseInt(dims[2], 10);
+    if (width > 0 && height > 0) return { url: value, width, height };
+  }
+  return { url: value };
+}
+
+// src/portfolio/components/sections/BeforeAfterSection.tsx
+var import_ScrollReveal = __toESM(require("@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal"), 1);
+var import_GlassCard = __toESM(require("@sonordev/agency-site-kit/portfolio/primitives/GlassCard"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+function BeforeAfterSection({ data }) {
+  const containerRef = (0, import_react.useRef)(null);
+  const [position, setPosition] = (0, import_react.useState)(data.defaultPosition ?? 50);
+  const [handleHidden, setHandleHidden] = (0, import_react.useState)(false);
+  const isDragging = (0, import_react.useRef)(false);
+  const before = resolvePortfolioImage(data.beforeUrl || data.before);
+  const after = resolvePortfolioImage(data.afterUrl || data.after);
+  (0, import_react.useEffect)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const rect = el.getBoundingClientRect();
+    if (rect.top < window.innerHeight && rect.bottom > 0) return;
+    setHandleHidden(true);
+    const io = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) {
+        setHandleHidden(false);
+        io.disconnect();
+      }
+    });
+    io.observe(el);
+    return () => io.disconnect();
+  }, []);
+  const updatePosition = (0, import_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 = (0, import_react.useCallback)(
+    (e) => {
+      isDragging.current = true;
+      e.target.setPointerCapture(e.pointerId);
+      updatePosition(e.clientX);
+    },
+    [updatePosition]
+  );
+  const handlePointerMove = (0, import_react.useCallback)(
+    (e) => {
+      if (!isDragging.current) return;
+      updatePosition(e.clientX);
+    },
+    [updatePosition]
+  );
+  const handlePointerUp = (0, import_react.useCallback)(() => {
+    isDragging.current = false;
+  }, []);
+  const handleKeyDown = (0, import_react.useCallback)((e) => {
+    const step = e.shiftKey ? 10 : 5;
+    const nudge = (delta) => {
+      e.preventDefault();
+      setPosition((prev) => Math.max(0, Math.min(100, prev + delta)));
+    };
+    if (e.key === "ArrowLeft" || e.key === "ArrowDown") nudge(-step);
+    else if (e.key === "ArrowRight" || e.key === "ArrowUp") nudge(step);
+    else if (e.key === "Home") nudge(-100);
+    else if (e.key === "End") nudge(100);
+  }, []);
+  if (!before || !after) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "section",
+    {
+      className: "w-full py-20 md:py-28",
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "max-w-5xl mx-auto px-6", children: [
+        (data.title || data.description) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ScrollReveal.default, { y: 30, children: [
+          data.title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "h2",
+            {
+              className: "text-3xl md:text-4xl font-bold mb-4",
+              style: {
+                color: "var(--sk-text-primary, #ffffff)",
+                fontFamily: "var(--sk-font-heading, inherit)"
+              },
+              children: data.title
+            }
+          ),
+          data.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "p",
+            {
+              className: "text-lg mb-12 max-w-2xl",
+              style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+              children: data.description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollReveal.default, { y: 40, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlassCard.default, { padding: "sm", hover: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            ref: containerRef,
+            role: "slider",
+            tabIndex: 0,
+            "aria-label": "Before and after comparison",
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuenow": Math.round(position),
+            "aria-valuetext": `${Math.round(position)}% before, ${100 - Math.round(position)}% after`,
+            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,
+            onKeyDown: handleKeyDown,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_image.default,
+                {
+                  src: after.url,
+                  alt: "After",
+                  fill: true,
+                  sizes: "(max-width: 1280px) 100vw, 1200px",
+                  className: "object-cover",
+                  draggable: false
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: "absolute inset-0 overflow-hidden",
+                  style: { width: `${position}%` },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_image.default,
+                    {
+                      src: before.url,
+                      alt: "Before",
+                      fill: true,
+                      sizes: "(max-width: 1280px) 100vw, 1200px",
+                      className: "object-cover",
+                      style: { minWidth: containerRef.current?.offsetWidth || "100%" },
+                      draggable: false
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: "absolute top-1/2 flex items-center justify-center w-10 h-10 rounded-full",
+                  style: {
+                    left: `${position}%`,
+                    transform: handleHidden ? "translate(-50%, -50%) scale(0.8)" : "translate(-50%, -50%) scale(1)",
+                    opacity: handleHidden ? 0 : 1,
+                    // Transition only on reveal so the hydration hide is instant;
+                    // .6s back-out overshoot after a .5s beat, like the old entrance.
+                    transition: handleHidden ? "none" : "opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s",
+                    background: "var(--sk-primary, #6366f1)",
+                    boxShadow: "0 4px 16px rgba(0,0,0,0.3)",
+                    border: "3px solid #ffffff",
+                    zIndex: 5
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 3l-4 5 4 5M11 3l4 5-4 5", stroke: "#ffffff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.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: data.beforeLabel || "Before"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.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: data.afterLabel || "After"
+                }
+              )
+            ]
+          }
+        ) }) })
+      ] })
+    }
+  );
+}
+//# sourceMappingURL=BeforeAfterSection.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/BeforeAfterSection.tsx","../../../src/shared/images.ts"],"sourcesContent":["'use client';\n\nimport React, { useRef, useState, useCallback, useEffect } from 'react';\nimport Image from 'next/image';\nimport type { PortfolioBeforeAfterData } from '../../../types';\nimport { resolvePortfolioImage } from '../../../shared/images';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\n\ninterface BeforeAfterSectionProps {\n  data: PortfolioBeforeAfterData;\n}\n\nexport default function BeforeAfterSection({ data }: BeforeAfterSectionProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [position, setPosition] = useState(data.defaultPosition ?? 50);\n  const [handleHidden, setHandleHidden] = useState(false);\n  const isDragging = useRef(false);\n\n  // Support both direct URL strings and (API-resolved) Sanity image objects\n  const before = resolvePortfolioImage((data as any).beforeUrl || data.before);\n  const after = resolvePortfolioImage((data as any).afterUrl || data.after);\n\n  // Slider-handle entrance (ScrollReveal pattern): SSR renders it visible,\n  // hydration hides it only while the comparison is still below the viewport,\n  // then an IntersectionObserver pops it back in via CSS transition.\n  useEffect(() => {\n    const el = containerRef.current;\n    if (!el) return;\n    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n\n    // Never re-hide a handle already in the viewport at hydration.\n    const rect = el.getBoundingClientRect();\n    if (rect.top < window.innerHeight && rect.bottom > 0) return;\n\n    setHandleHidden(true);\n    const io = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting) {\n        setHandleHidden(false);\n        io.disconnect();\n      }\n    });\n    io.observe(el);\n    return () => io.disconnect();\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  // Keyboard operation — arrows nudge, Home/End jump (WAI-ARIA slider)\n  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {\n    const step = e.shiftKey ? 10 : 5;\n    const nudge = (delta: number) => {\n      e.preventDefault();\n      setPosition((prev) => Math.max(0, Math.min(100, prev + delta)));\n    };\n    if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') nudge(-step);\n    else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') nudge(step);\n    else if (e.key === 'Home') nudge(-100);\n    else if (e.key === 'End') nudge(100);\n  }, []);\n\n  // Without both images the comparison is meaningless — render nothing\n  // rather than a frame with broken images.\n  if (!before || !after) return null;\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              role=\"slider\"\n              tabIndex={0}\n              aria-label=\"Before and after comparison\"\n              aria-valuemin={0}\n              aria-valuemax={100}\n              aria-valuenow={Math.round(position)}\n              aria-valuetext={`${Math.round(position)}% before, ${100 - Math.round(position)}% after`}\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              onKeyDown={handleKeyDown}\n            >\n              {/* After image (full background) */}\n              <Image\n                src={after.url}\n                alt=\"After\"\n                fill\n                sizes=\"(max-width: 1280px) 100vw, 1200px\"\n                className=\"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                <Image\n                  src={before.url}\n                  alt=\"Before\"\n                  fill\n                  sizes=\"(max-width: 1280px) 100vw, 1200px\"\n                  className=\"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                className=\"absolute top-1/2 flex items-center justify-center w-10 h-10 rounded-full\"\n                style={{\n                  left: `${position}%`,\n                  transform: handleHidden\n                    ? 'translate(-50%, -50%) scale(0.8)'\n                    : 'translate(-50%, -50%) scale(1)',\n                  opacity: handleHidden ? 0 : 1,\n                  // Transition only on reveal so the hydration hide is instant;\n                  // .6s back-out overshoot after a .5s beat, like the old entrance.\n                  transition: handleHidden\n                    ? 'none'\n                    : 'opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s',\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                {(data as any).beforeLabel || '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                {(data as any).afterLabel || 'After'}\n              </span>\n            </div>\n          </GlassCard>\n        </ScrollReveal>\n      </div>\n    </section>\n  );\n}\n","/**\n * Portfolio image resolution — single source of truth for turning the mixed\n * image shapes the API sends (plain URL strings, Supabase Storage URLs,\n * Sanity image objects) into something safe to render.\n *\n * IMPORTANT: a raw Sanity asset _ref (`image-{id}-{W}x{H}-{fmt}`) is an asset\n * ID, NOT a URL. Rendering it as `src` issues a garbage relative request\n * against the agency site's origin. Resolving refs to cdn.sanity.io URLs is\n * the API's job (it owns the Sanity project config); this helper refuses refs\n * so a broken image can never render, and warns once so the gap is visible.\n *\n * When a URL carries `-{W}x{H}.{ext}` dimensions (Sanity CDN URLs always do),\n * they're parsed out so callers can give next/image exact intrinsic sizes.\n */\n\nexport interface ResolvedPortfolioImage {\n  url: string;\n  width?: number;\n  height?: number;\n}\n\n/** Raw Sanity asset reference — an ID, not a URL. */\nconst SANITY_ASSET_REF = /^image-[A-Za-z0-9]+-\\d+x\\d+-[a-z0-9]+$/;\n\n/** `…-1200x800.png` (optionally with a query string) → intrinsic dimensions. */\nconst FILENAME_DIMS = /-(\\d{2,5})x(\\d{2,5})\\.[a-z0-9]+(?:\\?.*)?$/i;\n\ninterface SanityImageLike {\n  asset?: { _ref?: string };\n}\n\nlet warnedAboutRefs = false;\n\n/**\n * Resolve a portfolio image input into a renderable URL (+ intrinsic\n * dimensions when they can be derived). Returns null for empty values and\n * for unresolved Sanity refs — callers skip rendering in that case.\n */\nexport function resolvePortfolioImage(\n  input: string | SanityImageLike | null | undefined,\n): ResolvedPortfolioImage | null {\n  const raw =\n    typeof input === 'string' ? input : input?.asset?._ref ?? '';\n  const value = (raw || '').trim();\n  if (!value) return null;\n\n  if (SANITY_ASSET_REF.test(value)) {\n    if (!warnedAboutRefs && typeof console !== 'undefined') {\n      warnedAboutRefs = true;\n      console.warn(\n        '[@sonordev/agency-site-kit] Received a raw Sanity asset ref instead of an ' +\n          'image URL — skipping render. The Sonor API should resolve image refs to ' +\n          'cdn.sanity.io URLs before returning portfolio sections.',\n      );\n    }\n    return null;\n  }\n\n  // Only absolute http(s) URLs or site-rooted paths are renderable.\n  if (!/^https?:\\/\\//i.test(value) && !value.startsWith('/')) return null;\n\n  const dims = value.match(FILENAME_DIMS);\n  if (dims) {\n    const width = parseInt(dims[1], 10);\n    const height = parseInt(dims[2], 10);\n    if (width > 0 && height > 0) return { url: value, width, height };\n  }\n\n  return { url: value };\n}\n"],"mappings":"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","names":["ScrollReveal","GlassCard","Image"]}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { P as PortfolioBeforeAfterData } from '../../types-D0nb6KAx.cjs';
+
+interface BeforeAfterSectionProps {
+    data: PortfolioBeforeAfterData;
+}
+declare function BeforeAfterSection({ data }: BeforeAfterSectionProps): React.JSX.Element | null;
+
+export { BeforeAfterSection as default };

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { P as PortfolioBeforeAfterData } from '../../types-D0nb6KAx.js';
+
+interface BeforeAfterSectionProps {
+    data: PortfolioBeforeAfterData;
+}
+declare function BeforeAfterSection({ data }: BeforeAfterSectionProps): React.JSX.Element | null;
+
+export { BeforeAfterSection as default };