@sonordev/agency-site-kit 0.3.1 → 0.4.1

package/dist/{BeforeAfterSection-6BHFLY4Y.js → portfolio/sections/BeforeAfterSection.js}

@@ -1,25 +1,37 @@
 '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';
+"use client";
+import {
+  resolvePortfolioImage
+} from "../../chunk-QDXZ27R7.js";
 
+// src/portfolio/components/sections/BeforeAfterSection.tsx
+import { useRef, useState, useCallback, useEffect } from "react";
+import Image from "next/image";
+import ScrollReveal from "@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal";
+import GlassCard from "@sonordev/agency-site-kit/portfolio/primitives/GlassCard";
+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 [handleHidden, setHandleHidden] = useState(false);
   const isDragging = useRef(false);
-  const beforeUrl = data.beforeUrl || data.before?.asset?._ref || "";
-  const afterUrl = data.afterUrl || data.after?.asset?._ref || "";
+  const before = resolvePortfolioImage(data.beforeUrl || data.before);
+  const after = resolvePortfolioImage(data.afterUrl || data.after);
   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 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 = useCallback((clientX) => {
     const container = containerRef.current;
@@ -47,6 +59,18 @@ function BeforeAfterSection({ data }) {
   const handlePointerUp = useCallback(() => {
     isDragging.current = false;
   }, []);
+  const handleKeyDown = 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__ */ jsx(
     "section",
     {
@@ -78,19 +102,29 @@ function BeforeAfterSection({ data }) {
           "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__ */ jsx(
-                "img",
+                Image,
                 {
-                  src: afterUrl,
+                  src: after.url,
                   alt: "After",
-                  className: "absolute inset-0 w-full h-full object-cover",
+                  fill: true,
+                  sizes: "(max-width: 1280px) 100vw, 1200px",
+                  className: "object-cover",
                   draggable: false
                 }
               ),
@@ -100,11 +134,13 @@ function BeforeAfterSection({ data }) {
                   className: "absolute inset-0 overflow-hidden",
                   style: { width: `${position}%` },
                   children: /* @__PURE__ */ jsx(
-                    "img",
+                    Image,
                     {
-                      src: beforeUrl,
+                      src: before.url,
                       alt: "Before",
-                      className: "absolute inset-0 w-full h-full object-cover",
+                      fill: true,
+                      sizes: "(max-width: 1280px) 100vw, 1200px",
+                      className: "object-cover",
                       style: { minWidth: containerRef.current?.offsetWidth || "100%" },
                       draggable: false
                     }
@@ -126,11 +162,14 @@ function BeforeAfterSection({ data }) {
               /* @__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%)",
+                    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",
@@ -170,7 +209,7 @@ function BeforeAfterSection({ data }) {
     }
   );
 }
-
-export { BeforeAfterSection as default };
-//# sourceMappingURL=BeforeAfterSection-6BHFLY4Y.js.map
-//# sourceMappingURL=BeforeAfterSection-6BHFLY4Y.js.map
+export {
+  BeforeAfterSection as default
+};
+//# sourceMappingURL=BeforeAfterSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/BeforeAfterSection.tsx"],"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"],"mappings":"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","names":[]}

package/dist/portfolio/sections/CTASection.cjs

@@ -0,0 +1,123 @@
+'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/CTASection.tsx
+var CTASection_exports = {};
+__export(CTASection_exports, {
+  default: () => CTASection
+});
+module.exports = __toCommonJS(CTASection_exports);
+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");
+var CTA_BUTTON_CSS = `
+.sk-cta-button{transition:transform .25s cubic-bezier(.25,.46,.45,.94)}
+.sk-cta-button:hover{transform:translateY(-2px) scale(1.05)}
+@media (prefers-reduced-motion:reduce){.sk-cta-button{transition:none}.sk-cta-button:hover{transform:none}}
+`;
+function CTASection({ data }) {
+  const style = data.style || "primary";
+  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center text-center gap-6 py-12 px-8 md:px-16", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollReveal.default, { y: 30, children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_ScrollReveal.default, { y: 20, delay: 0.15, children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_ScrollReveal.default, { y: 20, delay: 0.3, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "a",
+      {
+        href: data.buttonUrl,
+        "data-portfolio-action": "cta",
+        className: "sk-cta-button inline-flex items-center gap-2 px-8 py-4 rounded-xl text-base font-semibold",
+        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__ */ (0, import_jsx_runtime.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("section", { className: "w-full py-20 md:py-28", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { href: "sk-cta-button", precedence: "default", children: CTA_BUTTON_CSS }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "max-w-5xl mx-auto px-6", children: style === "primary" ? /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative z-10", children: content })
+        ]
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlassCard.default, { padding: "sm", hover: false, children: content }) })
+  ] });
+}
+//# sourceMappingURL=CTASection.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/CTASection.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport type { PortfolioCTAData } from '../../../types';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\n\ninterface CTASectionProps {\n  data: PortfolioCTAData;\n}\n\n// Button lift on hover (y -2, scale 1.05) — pure CSS, no mouse handlers.\n// .25s with a power2.out-style ease matches the old hover tween.\nconst CTA_BUTTON_CSS = `\n.sk-cta-button{transition:transform .25s cubic-bezier(.25,.46,.45,.94)}\n.sk-cta-button:hover{transform:translateY(-2px) scale(1.05)}\n@media (prefers-reduced-motion:reduce){.sk-cta-button{transition:none}.sk-cta-button:hover{transform:none}}\n`;\n\nexport default function CTASection({ data }: CTASectionProps) {\n  const style = data.style || 'primary';\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          href={data.buttonUrl}\n          data-portfolio-action=\"cta\"\n          className=\"sk-cta-button inline-flex items-center gap-2 px-8 py-4 rounded-xl text-base font-semibold\"\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      {/* Hover CSS (React 19 hoists + dedupes via href/precedence) */}\n      <style href=\"sk-cta-button\" precedence=\"default\">\n        {CTA_BUTTON_CSS}\n      </style>\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,0BAAyB;AACzB,uBAAsB;AAoBd;AAZR,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAMR,SAAR,WAA4B,EAAE,KAAK,GAAoB;AAC5D,QAAM,QAAQ,KAAK,SAAS;AAE5B,QAAM,UACJ,6CAAC,SAAI,WAAU,oEACb;AAAA,gDAAC,oBAAAA,SAAA,EAAa,GAAG,IACf;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,OAAO,UAAU,YAAY,YAAY;AAAA,UACzC,YAAY;AAAA,QACd;AAAA,QAEC,eAAK;AAAA;AAAA,IACR,GACF;AAAA,IAEA,4CAAC,oBAAAA,SAAA,EAAa,GAAG,IAAI,OAAO,MAC1B;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,OAAO,UAAU,YAAY,2BAA2B;AAAA,QAC1D;AAAA,QAEC,eAAK;AAAA;AAAA,IACR,GACF;AAAA,IAEA,4CAAC,oBAAAA,SAAA,EAAa,GAAG,IAAI,OAAO,KAC1B;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,KAAK;AAAA,QACX,yBAAsB;AAAA,QACtB,WAAU;AAAA,QACV,OAAO;AAAA,UACL,YACE,UAAU,YACN,YACA;AAAA,UACN,OACE,UAAU,YACN,+BACA;AAAA,UACN,WAAW;AAAA,UACX,YAAY;AAAA,QACd;AAAA,QAEC;AAAA,eAAK;AAAA,UACN,4CAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QACnD,sDAAC,UAAK,GAAE,0CAAyC,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,GACtI;AAAA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAGF,SACE,6CAAC,aAAQ,WAAU,yBAEjB;AAAA,gDAAC,WAAM,MAAK,iBAAgB,YAAW,WACpC,0BACH;AAAA,IACA,4CAAC,SAAI,WAAU,0BACZ,oBAAU,YACT;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,YAAY;AAAA,QACd;AAAA,QAGA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,YAAY;AAAA,cACd;AAAA;AAAA,UACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,YAAY;AAAA,cACd;AAAA;AAAA,UACF;AAAA,UACA,4CAAC,SAAI,WAAU,iBAAiB,mBAAQ;AAAA;AAAA;AAAA,IAC1C,IAEA,4CAAC,iBAAAC,SAAA,EAAU,SAAQ,MAAK,OAAO,OAC5B,mBACH,GAEJ;AAAA,KACF;AAEJ;","names":["ScrollReveal","GlassCard"]}

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

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

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

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

package/dist/portfolio/sections/CTASection.js

@@ -0,0 +1,93 @@
+'use client';
+"use client";
+
+// src/portfolio/components/sections/CTASection.tsx
+import ScrollReveal from "@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal";
+import GlassCard from "@sonordev/agency-site-kit/portfolio/primitives/GlassCard";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CTA_BUTTON_CSS = `
+.sk-cta-button{transition:transform .25s cubic-bezier(.25,.46,.45,.94)}
+.sk-cta-button:hover{transform:translateY(-2px) scale(1.05)}
+@media (prefers-reduced-motion:reduce){.sk-cta-button{transition:none}.sk-cta-button:hover{transform:none}}
+`;
+function CTASection({ data }) {
+  const style = data.style || "primary";
+  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",
+      {
+        href: data.buttonUrl,
+        "data-portfolio-action": "cta",
+        className: "sk-cta-button inline-flex items-center gap-2 px-8 py-4 rounded-xl text-base font-semibold",
+        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__ */ jsxs("section", { className: "w-full py-20 md:py-28", children: [
+    /* @__PURE__ */ jsx("style", { href: "sk-cta-button", precedence: "default", children: CTA_BUTTON_CSS }),
+    /* @__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.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/CTASection.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport type { PortfolioCTAData } from '../../../types';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\n\ninterface CTASectionProps {\n  data: PortfolioCTAData;\n}\n\n// Button lift on hover (y -2, scale 1.05) — pure CSS, no mouse handlers.\n// .25s with a power2.out-style ease matches the old hover tween.\nconst CTA_BUTTON_CSS = `\n.sk-cta-button{transition:transform .25s cubic-bezier(.25,.46,.45,.94)}\n.sk-cta-button:hover{transform:translateY(-2px) scale(1.05)}\n@media (prefers-reduced-motion:reduce){.sk-cta-button{transition:none}.sk-cta-button:hover{transform:none}}\n`;\n\nexport default function CTASection({ data }: CTASectionProps) {\n  const style = data.style || 'primary';\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          href={data.buttonUrl}\n          data-portfolio-action=\"cta\"\n          className=\"sk-cta-button inline-flex items-center gap-2 px-8 py-4 rounded-xl text-base font-semibold\"\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      {/* Hover CSS (React 19 hoists + dedupes via href/precedence) */}\n      <style href=\"sk-cta-button\" precedence=\"default\">\n        {CTA_BUTTON_CSS}\n      </style>\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"],"mappings":";;;;AAIA,OAAO,kBAAkB;AACzB,OAAO,eAAe;AAoBd,cAuBA,YAvBA;AAZR,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAMR,SAAR,WAA4B,EAAE,KAAK,GAAoB;AAC5D,QAAM,QAAQ,KAAK,SAAS;AAE5B,QAAM,UACJ,qBAAC,SAAI,WAAU,oEACb;AAAA,wBAAC,gBAAa,GAAG,IACf;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,OAAO,UAAU,YAAY,YAAY;AAAA,UACzC,YAAY;AAAA,QACd;AAAA,QAEC,eAAK;AAAA;AAAA,IACR,GACF;AAAA,IAEA,oBAAC,gBAAa,GAAG,IAAI,OAAO,MAC1B;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,OAAO,UAAU,YAAY,2BAA2B;AAAA,QAC1D;AAAA,QAEC,eAAK;AAAA;AAAA,IACR,GACF;AAAA,IAEA,oBAAC,gBAAa,GAAG,IAAI,OAAO,KAC1B;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,KAAK;AAAA,QACX,yBAAsB;AAAA,QACtB,WAAU;AAAA,QACV,OAAO;AAAA,UACL,YACE,UAAU,YACN,YACA;AAAA,UACN,OACE,UAAU,YACN,+BACA;AAAA,UACN,WAAW;AAAA,UACX,YAAY;AAAA,QACd;AAAA,QAEC;AAAA,eAAK;AAAA,UACN,oBAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QACnD,8BAAC,UAAK,GAAE,0CAAyC,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,GACtI;AAAA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAGF,SACE,qBAAC,aAAQ,WAAU,yBAEjB;AAAA,wBAAC,WAAM,MAAK,iBAAgB,YAAW,WACpC,0BACH;AAAA,IACA,oBAAC,SAAI,WAAU,0BACZ,oBAAU,YACT;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,YAAY;AAAA,QACd;AAAA,QAGA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,YAAY;AAAA,cACd;AAAA;AAAA,UACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,YAAY;AAAA,cACd;AAAA;AAAA,UACF;AAAA,UACA,oBAAC,SAAI,WAAU,iBAAiB,mBAAQ;AAAA;AAAA;AAAA,IAC1C,IAEA,oBAAC,aAAU,SAAQ,MAAK,OAAO,OAC5B,mBACH,GAEJ;AAAA,KACF;AAEJ;","names":[]}

package/dist/{ChallengesSection-IZ3DHECS.cjs → portfolio/sections/ChallengesSection.cjs}

@@ -1,9 +1,15 @@
 'use strict';
 
-var chunkKEOHORIH_cjs = require('./chunk-KEOHORIH.cjs');
-var chunkIKBK7HYX_cjs = require('./chunk-IKBK7HYX.cjs');
+var ScrollReveal = require('@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal');
+var GlassCard = require('@sonordev/agency-site-kit/portfolio/primitives/GlassCard');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var ScrollReveal__default = /*#__PURE__*/_interopDefault(ScrollReveal);
+var GlassCard__default = /*#__PURE__*/_interopDefault(GlassCard);
+
+// src/portfolio/components/sections/ChallengesSection.tsx
 function ChallengeIcon({ name }) {
   if (!name) return null;
   const icons = {
@@ -32,7 +38,7 @@ function ChallengesSection({ data }) {
       className: "w-full py-20 md:py-28",
       style: { background: "var(--sk-bg, #0a0a0a)" },
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-7xl mx-auto px-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(chunkIKBK7HYX_cjs.ScrollReveal, { y: 30, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ScrollReveal__default.default, { y: 30, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "h2",
             {
@@ -49,13 +55,13 @@ function ChallengesSection({ data }) {
             {
               className: "text-lg mb-12 max-w-2xl",
               style: { color: "var(--sk-text-secondary, #a1a1aa)" },
-              children: "Every great project starts with obstacles to overcome. Here is how we tackled them."
+              children: "What stood in the way, and how we cleared it."
             }
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-8", children: data.items.map((item, index) => {
           const isEven = index % 2 === 0;
-          return /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 40, delay: index * 0.1, children: /* @__PURE__ */ jsxRuntime.jsx(chunkKEOHORIH_cjs.GlassCard, { padding: "lg", hover: false, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          return /* @__PURE__ */ jsxRuntime.jsx(ScrollReveal__default.default, { y: 40, delay: index * 0.1, children: /* @__PURE__ */ jsxRuntime.jsx(GlassCard__default.default, { padding: "lg", hover: false, children: /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
               className: `flex flex-col lg:flex-row gap-8 ${isEven ? "" : "lg:flex-row-reverse"}`,
@@ -178,5 +184,5 @@ function ChallengesSection({ data }) {
 }
 
 module.exports = ChallengesSection;
-//# sourceMappingURL=ChallengesSection-IZ3DHECS.cjs.map
-//# sourceMappingURL=ChallengesSection-IZ3DHECS.cjs.map
+//# sourceMappingURL=ChallengesSection.cjs.map
+//# sourceMappingURL=ChallengesSection.cjs.map

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

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

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { c as PortfolioChallengesData } from '../../types-0tVPy4pU.cjs';
+
+interface ChallengesSectionProps {
+    data: PortfolioChallengesData;
+}
+declare function ChallengesSection({ data }: ChallengesSectionProps): React.JSX.Element;
+
+export { ChallengesSection as default };

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { c as PortfolioChallengesData } from '../../types-0tVPy4pU.js';
+
+interface ChallengesSectionProps {
+    data: PortfolioChallengesData;
+}
+declare function ChallengesSection({ data }: ChallengesSectionProps): React.JSX.Element;
+
+export { ChallengesSection as default };

package/dist/{ChallengesSection-GEQGVSJN.js → portfolio/sections/ChallengesSection.js}

@@ -1,7 +1,8 @@
-import { GlassCard } from './chunk-YB4B3OMC.js';
-import { ScrollReveal } from './chunk-7CFFAKDM.js';
+import ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';
+import GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+// src/portfolio/components/sections/ChallengesSection.tsx
 function ChallengeIcon({ name }) {
   if (!name) return null;
   const icons = {
@@ -47,7 +48,7 @@ function ChallengesSection({ data }) {
             {
               className: "text-lg mb-12 max-w-2xl",
               style: { color: "var(--sk-text-secondary, #a1a1aa)" },
-              children: "Every great project starts with obstacles to overcome. Here is how we tackled them."
+              children: "What stood in the way, and how we cleared it."
             }
           )
         ] }),
@@ -176,5 +177,5 @@ function ChallengesSection({ data }) {
 }
 
 export { ChallengesSection as default };
-//# sourceMappingURL=ChallengesSection-GEQGVSJN.js.map
-//# sourceMappingURL=ChallengesSection-GEQGVSJN.js.map
+//# sourceMappingURL=ChallengesSection.js.map
+//# sourceMappingURL=ChallengesSection.js.map