@sonordev/agency-site-kit 0.3.1 → 0.4.0

package/dist/{GallerySection-VMKORC47.js → portfolio/sections/GallerySection.js}

@@ -1,8 +1,14 @@
 'use client';
-import { ScrollReveal } from './chunk-7CFFAKDM.js';
-import { useState, useCallback, useEffect } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+"use client";
+import {
+  resolvePortfolioImage
+} from "../../chunk-QDXZ27R7.js";
 
+// src/portfolio/components/sections/GallerySection.tsx
+import React, { useState, useCallback, useEffect } from "react";
+import Image from "next/image";
+import ScrollReveal from "@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal";
+import { jsx, jsxs } from "react/jsx-runtime";
 var typeBadgeColors = {
   screenshot: {
     bg: "color-mix(in srgb, #6366f1 12%, transparent)",
@@ -27,6 +33,8 @@ var typeBadgeColors = {
 };
 function GallerySection({ data }) {
   const [lightboxIndex, setLightboxIndex] = useState(null);
+  const dialogRef = React.useRef(null);
+  const restoreFocusRef = React.useRef(null);
   const layout = data.layout || "grid";
   const openLightbox = useCallback((index) => {
     setLightboxIndex(index);
@@ -46,20 +54,40 @@ function GallerySection({ data }) {
   }, [data.images.length]);
   useEffect(() => {
     if (lightboxIndex === null) return;
+    restoreFocusRef.current = document.activeElement;
+    const dialog = dialogRef.current;
+    const focusables = () => dialog ? Array.from(
+      dialog.querySelectorAll('button, [href], [tabindex]:not([tabindex="-1"])')
+    ) : [];
+    focusables()[0]?.focus();
     function handleKeyDown(e) {
       if (e.key === "Escape") closeLightbox();
       if (e.key === "ArrowRight") goNext();
       if (e.key === "ArrowLeft") goPrev();
+      if (e.key === "Tab") {
+        const items = focusables();
+        if (items.length === 0) return;
+        const first = items[0];
+        const last = items[items.length - 1];
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
     }
     document.addEventListener("keydown", handleKeyDown);
     document.body.style.overflow = "hidden";
     return () => {
       document.removeEventListener("keydown", handleKeyDown);
       document.body.style.overflow = "";
+      restoreFocusRef.current?.focus?.();
     };
-  }, [lightboxIndex, closeLightbox, goNext, goPrev]);
-  function getImageUrl(image) {
-    return image.image.asset._ref || "";
+  }, [lightboxIndex !== null, closeLightbox, goNext, goPrev]);
+  function getImage(image) {
+    return resolvePortfolioImage(image.image);
   }
   return /* @__PURE__ */ jsxs(
     "section",
@@ -84,8 +112,11 @@ function GallerySection({ data }) {
             {
               className: layout === "masonry" ? "columns-1 md:columns-2 lg:columns-3 gap-4 space-y-4" : "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
               children: data.images.map((img, index) => {
-                const url = getImageUrl(img);
+                const resolved = getImage(img);
+                if (!resolved) return null;
                 const colors = typeBadgeColors[img.type || "screenshot"] || typeBadgeColors.screenshot;
+                const alt = img.caption || `Gallery image ${index + 1}`;
+                const imgClass = "w-full h-auto object-cover transition-transform duration-500 group-hover:scale-105";
                 return /* @__PURE__ */ jsxs(
                   "div",
                   {
@@ -95,13 +126,24 @@ function GallerySection({ data }) {
                     },
                     onClick: () => openLightbox(index),
                     children: [
-                      /* @__PURE__ */ jsx(
+                      resolved.width && resolved.height ? /* @__PURE__ */ jsx(
+                        Image,
+                        {
+                          src: resolved.url,
+                          alt,
+                          width: resolved.width,
+                          height: resolved.height,
+                          sizes: "(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw",
+                          className: imgClass
+                        }
+                      ) : /* @__PURE__ */ jsx(
                         "img",
                         {
-                          src: url,
-                          alt: img.caption || `Gallery image ${index + 1}`,
-                          className: "w-full h-auto object-cover transition-transform duration-500 group-hover:scale-105",
-                          loading: "lazy"
+                          src: resolved.url,
+                          alt,
+                          className: imgClass,
+                          loading: "lazy",
+                          decoding: "async"
                         }
                       ),
                       /* @__PURE__ */ jsx(
@@ -138,6 +180,10 @@ function GallerySection({ data }) {
         lightboxIndex !== null && /* @__PURE__ */ jsxs(
           "div",
           {
+            ref: dialogRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": data.images[lightboxIndex].caption || `Gallery image ${lightboxIndex + 1} of ${data.images.length}`,
             className: "fixed inset-0 z-50 flex items-center justify-center",
             style: { background: "rgba(0,0,0,0.9)" },
             onClick: closeLightbox,
@@ -196,9 +242,10 @@ function GallerySection({ data }) {
                     /* @__PURE__ */ jsx(
                       "img",
                       {
-                        src: getImageUrl(data.images[lightboxIndex]),
+                        src: getImage(data.images[lightboxIndex])?.url,
                         alt: data.images[lightboxIndex].caption || "",
-                        className: "max-w-full max-h-[80vh] object-contain rounded-lg"
+                        className: "max-w-full max-h-[80vh] object-contain rounded-lg",
+                        decoding: "async"
                       }
                     ),
                     data.images[lightboxIndex].caption && /* @__PURE__ */ jsx("p", { className: "text-sm text-white/70 text-center", children: data.images[lightboxIndex].caption })
@@ -212,7 +259,7 @@ function GallerySection({ data }) {
     }
   );
 }
-
-export { GallerySection as default };
-//# sourceMappingURL=GallerySection-VMKORC47.js.map
-//# sourceMappingURL=GallerySection-VMKORC47.js.map
+export {
+  GallerySection as default
+};
+//# sourceMappingURL=GallerySection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/GallerySection.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, useCallback, useEffect } from 'react';\nimport Image from 'next/image';\nimport type { PortfolioGalleryData } from '../../../types';\nimport { resolvePortfolioImage } from '../../../shared/images';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\n\ninterface GallerySectionProps {\n  data: PortfolioGalleryData;\n}\n\nconst typeBadgeColors: Record<string, { bg: string; text: string; border: string }> = {\n  screenshot: {\n    bg: 'color-mix(in srgb, #6366f1 12%, transparent)',\n    text: '#6366f1',\n    border: 'color-mix(in srgb, #6366f1 20%, transparent)',\n  },\n  before: {\n    bg: 'color-mix(in srgb, #f59e0b 12%, transparent)',\n    text: '#f59e0b',\n    border: 'color-mix(in srgb, #f59e0b 20%, transparent)',\n  },\n  after: {\n    bg: 'color-mix(in srgb, #10b981 12%, transparent)',\n    text: '#10b981',\n    border: 'color-mix(in srgb, #10b981 20%, transparent)',\n  },\n  design: {\n    bg: 'color-mix(in srgb, #ec4899 12%, transparent)',\n    text: '#ec4899',\n    border: 'color-mix(in srgb, #ec4899 20%, transparent)',\n  },\n};\n\nexport default function GallerySection({ data }: GallerySectionProps) {\n  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  const restoreFocusRef = React.useRef<HTMLElement | null>(null);\n\n  const layout = data.layout || 'grid';\n\n  const openLightbox = useCallback((index: number) => {\n    setLightboxIndex(index);\n  }, []);\n\n  const closeLightbox = useCallback(() => {\n    setLightboxIndex(null);\n  }, []);\n\n  const goNext = useCallback(() => {\n    setLightboxIndex((prev) =>\n      prev !== null ? (prev + 1) % data.images.length : null,\n    );\n  }, [data.images.length]);\n\n  const goPrev = useCallback(() => {\n    setLightboxIndex((prev) =>\n      prev !== null ? (prev - 1 + data.images.length) % data.images.length : null,\n    );\n  }, [data.images.length]);\n\n  // Keyboard navigation + dialog focus management\n  useEffect(() => {\n    if (lightboxIndex === null) return;\n\n    // Move focus into the dialog; restore it to the trigger on close.\n    restoreFocusRef.current = document.activeElement as HTMLElement | null;\n    const dialog = dialogRef.current;\n    const focusables = () =>\n      dialog\n        ? Array.from(\n            dialog.querySelectorAll<HTMLElement>('button, [href], [tabindex]:not([tabindex=\"-1\"])'),\n          )\n        : [];\n    focusables()[0]?.focus();\n\n    function handleKeyDown(e: KeyboardEvent) {\n      if (e.key === 'Escape') closeLightbox();\n      if (e.key === 'ArrowRight') goNext();\n      if (e.key === 'ArrowLeft') goPrev();\n      if (e.key === 'Tab') {\n        // Trap Tab inside the dialog\n        const items = focusables();\n        if (items.length === 0) return;\n        const first = items[0];\n        const last = items[items.length - 1];\n        if (e.shiftKey && document.activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        } else if (!e.shiftKey && document.activeElement === last) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyDown);\n    document.body.style.overflow = 'hidden';\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.body.style.overflow = '';\n      restoreFocusRef.current?.focus?.();\n    };\n  }, [lightboxIndex !== null, closeLightbox, goNext, goPrev]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  function getImage(image: typeof data.images[0]) {\n    // URL (+ intrinsic dims when derivable); raw Sanity refs resolve to null.\n    return resolvePortfolioImage(image.image);\n  }\n\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-7xl mx-auto px-6\">\n        <ScrollReveal y={30}>\n          <h2\n            className=\"text-3xl md:text-4xl font-bold mb-12\"\n            style={{\n              color: 'var(--sk-text-primary, #ffffff)',\n              fontFamily: 'var(--sk-font-heading, inherit)',\n            }}\n          >\n            Gallery\n          </h2>\n        </ScrollReveal>\n\n        <ScrollReveal stagger={0.08}>\n          <div\n            className={\n              layout === 'masonry'\n                ? 'columns-1 md:columns-2 lg:columns-3 gap-4 space-y-4'\n                : 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'\n            }\n          >\n            {data.images.map((img, index) => {\n              const resolved = getImage(img);\n              if (!resolved) return null;\n              const colors = typeBadgeColors[img.type || 'screenshot'] || typeBadgeColors.screenshot;\n              const alt = img.caption || `Gallery image ${index + 1}`;\n              const imgClass =\n                'w-full h-auto object-cover transition-transform duration-500 group-hover:scale-105';\n\n              return (\n                <div\n                  key={index}\n                  className={`relative group cursor-pointer overflow-hidden rounded-xl ${\n                    layout === 'masonry' ? 'break-inside-avoid' : ''\n                  }`}\n                  style={{\n                    border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n                  }}\n                  onClick={() => openLightbox(index)}\n                >\n                  {resolved.width && resolved.height ? (\n                    <Image\n                      src={resolved.url}\n                      alt={alt}\n                      width={resolved.width}\n                      height={resolved.height}\n                      sizes=\"(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n                      className={imgClass}\n                    />\n                  ) : (\n                    <img\n                      src={resolved.url}\n                      alt={alt}\n                      className={imgClass}\n                      loading=\"lazy\"\n                      decoding=\"async\"\n                    />\n                  )}\n\n                  {/* Overlay on hover */}\n                  <div\n                    className=\"absolute inset-0 flex flex-col justify-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300\"\n                    style={{\n                      background: 'linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%)',\n                    }}\n                  >\n                    {img.caption && (\n                      <p className=\"text-sm text-white font-medium\">{img.caption}</p>\n                    )}\n                  </div>\n\n                  {/* Type badge */}\n                  {img.type && (\n                    <span\n                      className=\"absolute top-3 left-3 px-2.5 py-1 rounded-full text-[11px] uppercase tracking-wider font-medium\"\n                      style={{\n                        background: colors.bg,\n                        color: colors.text,\n                        border: `1px solid ${colors.border}`,\n                        backdropFilter: 'blur(8px)',\n                      }}\n                    >\n                      {img.type}\n                    </span>\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        </ScrollReveal>\n      </div>\n\n      {/* Lightbox modal */}\n      {lightboxIndex !== null && (\n        <div\n          ref={dialogRef}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label={data.images[lightboxIndex].caption || `Gallery image ${lightboxIndex + 1} of ${data.images.length}`}\n          className=\"fixed inset-0 z-50 flex items-center justify-center\"\n          style={{ background: 'rgba(0,0,0,0.9)' }}\n          onClick={closeLightbox}\n        >\n          {/* Close button */}\n          <button\n            onClick={closeLightbox}\n            className=\"absolute top-6 right-6 w-10 h-10 flex items-center justify-center rounded-full transition-colors z-10\"\n            style={{\n              background: 'rgba(255,255,255,0.1)',\n              color: '#ffffff',\n            }}\n            aria-label=\"Close lightbox\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n              <path d=\"M15 5L5 15M5 5l10 10\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n            </svg>\n          </button>\n\n          {/* Prev button */}\n          <button\n            onClick={(e) => { e.stopPropagation(); goPrev(); }}\n            className=\"absolute left-4 md:left-8 w-12 h-12 flex items-center justify-center rounded-full transition-colors z-10\"\n            style={{\n              background: 'rgba(255,255,255,0.1)',\n              color: '#ffffff',\n            }}\n            aria-label=\"Previous image\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n              <path d=\"M12.5 15l-5-5 5-5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n            </svg>\n          </button>\n\n          {/* Next button */}\n          <button\n            onClick={(e) => { e.stopPropagation(); goNext(); }}\n            className=\"absolute right-4 md:right-8 w-12 h-12 flex items-center justify-center rounded-full transition-colors z-10\"\n            style={{\n              background: 'rgba(255,255,255,0.1)',\n              color: '#ffffff',\n            }}\n            aria-label=\"Next image\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n              <path d=\"M7.5 5l5 5-5 5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n            </svg>\n          </button>\n\n          {/* Image */}\n          <div\n            className=\"max-w-[90vw] max-h-[85vh] flex flex-col items-center gap-4\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            <img\n              src={getImage(data.images[lightboxIndex])?.url}\n              alt={data.images[lightboxIndex].caption || ''}\n              className=\"max-w-full max-h-[80vh] object-contain rounded-lg\"\n              decoding=\"async\"\n            />\n            {data.images[lightboxIndex].caption && (\n              <p className=\"text-sm text-white/70 text-center\">\n                {data.images[lightboxIndex].caption}\n              </p>\n            )}\n          </div>\n        </div>\n      )}\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/portfolio/sections/HeroSection.cjs

@@ -0,0 +1,180 @@
+'use strict';
+
+var ScrollReveal = require('@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal');
+var AnimatedCounter = require('@sonordev/agency-site-kit/portfolio/primitives/AnimatedCounter');
+var GlassCard = require('@sonordev/agency-site-kit/portfolio/primitives/GlassCard');
+var DeviceTrifolio = require('@sonordev/agency-site-kit/portfolio/primitives/DeviceTrifolio');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var ScrollReveal__default = /*#__PURE__*/_interopDefault(ScrollReveal);
+var AnimatedCounter__default = /*#__PURE__*/_interopDefault(AnimatedCounter);
+var GlassCard__default = /*#__PURE__*/_interopDefault(GlassCard);
+var DeviceTrifolio__default = /*#__PURE__*/_interopDefault(DeviceTrifolio);
+
+// src/portfolio/components/sections/HeroSection.tsx
+var HERO_PARALLAX_CSS = `
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    .sk-hero-bg {
+      animation: sk-hero-drift linear both;
+      animation-timeline: view(block);
+      animation-range: exit 0% exit 100%;
+    }
+    @keyframes sk-hero-drift {
+      from { transform: translateY(0); }
+      to { transform: translateY(30%); }
+    }
+  }
+}
+`;
+function HeroSection({ data, screenshots, liveUrl }) {
+  const shots = screenshots || data.screenshots;
+  const url = liveUrl || data.liveUrl;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: "relative overflow-hidden w-full",
+      style: {
+        minHeight: "90vh",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        background: "var(--sk-bg, #0a0a0a)"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("style", { href: "sk-hero-parallax", precedence: "default", children: HERO_PARALLAX_CSS }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "sk-hero-bg absolute inset-0 pointer-events-none",
+            style: {
+              background: `radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent) 0%, transparent 70%)`,
+              willChange: "transform"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 max-w-7xl mx-auto w-full min-w-0 px-4 sm:px-6 py-24 lg:py-32", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 min-w-0 lg:grid-cols-2 gap-12 lg:gap-16 items-start", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 max-w-full flex-col gap-6", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "inline-flex items-center self-start px-4 py-1.5 rounded-full text-sm font-medium",
+                style: {
+                  background: "color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)",
+                  color: "var(--sk-primary, #6366f1)",
+                  border: "1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 25%, transparent)"
+                },
+                children: data.category?.replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "h1",
+              {
+                className: "text-4xl md:text-5xl lg:text-6xl font-bold leading-tight",
+                style: {
+                  color: "var(--sk-text-primary, #ffffff)",
+                  fontFamily: "var(--sk-font-heading, inherit)",
+                  overflowWrap: "break-word",
+                  wordBreak: "break-word"
+                },
+                children: data.headline
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: "text-xl md:text-2xl font-medium",
+                style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+                children: data.subheadline
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: "text-base md:text-lg leading-relaxed",
+                style: { color: "var(--sk-text-tertiary, #71717a)" },
+                children: data.description
+              }
+            ),
+            data.services.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: data.services.map((service) => /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "px-3 py-1 rounded-full text-xs font-medium",
+                style: {
+                  background: "var(--sk-surface, rgba(255,255,255,0.05))",
+                  color: "var(--sk-text-secondary, #a1a1aa)",
+                  border: "1px solid var(--sk-border, rgba(255,255,255,0.1))"
+                },
+                children: service
+              },
+              service
+            )) }),
+            url && /* @__PURE__ */ jsxRuntime.jsxs(
+              "a",
+              {
+                href: url,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "data-portfolio-action": "live-site",
+                className: "inline-flex items-center gap-2 self-start px-6 py-3 rounded-xl text-sm font-semibold transition-opacity hover:opacity-90",
+                style: {
+                  background: "var(--sk-primary, #6366f1)",
+                  color: "#ffffff"
+                },
+                children: [
+                  "View Live Site",
+                  /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 3h7v7M13 3L3 13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 max-w-full flex-col gap-10 lg:pt-8", children: [
+            (url || shots?.desktop || shots?.tablet || shots?.mobile) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 max-w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+              DeviceTrifolio__default.default,
+              {
+                screenshots: {
+                  desktop: shots?.desktop,
+                  tablet: shots?.tablet,
+                  mobile: shots?.mobile
+                },
+                url
+              }
+            ) }),
+            data.kpis.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ScrollReveal__default.default, { y: 30, delay: 0.6, stagger: 0.1, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3", children: data.kpis.map((kpi, i) => /* @__PURE__ */ jsxRuntime.jsxs(GlassCard__default.default, { padding: "sm", hover: false, className: "text-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "text-2xl md:text-3xl font-bold",
+                  style: { color: "var(--sk-primary, #6366f1)" },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    AnimatedCounter__default.default,
+                    {
+                      value: kpi.value,
+                      suffix: kpi.suffix,
+                      prefix: kpi.prefix,
+                      duration: 2.5
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "text-xs mt-1 font-medium",
+                  style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+                  children: kpi.label
+                }
+              )
+            ] }, i)) }) })
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+
+module.exports = HeroSection;
+//# sourceMappingURL=HeroSection.cjs.map
+//# sourceMappingURL=HeroSection.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/HeroSection.tsx"],"names":["jsxs","jsx","DeviceTrifolio","ScrollReveal","GlassCard","AnimatedCounter"],"mappings":"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","file":"HeroSection.cjs","sourcesContent":["// Server component — the entire hero renders on the server and ships zero\n// component JS. Client primitives (counter, reveal, trifolio) cross the RSC\n// boundary via package subpaths.\nimport React from 'react';\nimport type { PortfolioHeroData } from '../../../types';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport AnimatedCounter from '@sonordev/agency-site-kit/portfolio/primitives/AnimatedCounter';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\nimport DeviceTrifolio from '@sonordev/agency-site-kit/portfolio/primitives/DeviceTrifolio';\n\n// LCP rule (monorepo CLAUDE.md, Performance): above-the-fold content renders\n// fully static — no entrance animation, no post-hydration re-hide. The text\n// column below must never be wrapped in ScrollReveal/SplitHeadline: hiding\n// the H1 after hydration moves LCP to the tween's end and tanks the mobile\n// Lighthouse score. Reveal animations are for the below-fold KPI cards only.\n\n// Background parallax as a CSS scroll-driven animation — progressive\n// enhancement: browsers without animation-timeline get a static gradient.\nconst HERO_PARALLAX_CSS = `\n@supports (animation-timeline: view()) {\n  @media (prefers-reduced-motion: no-preference) {\n    .sk-hero-bg {\n      animation: sk-hero-drift linear both;\n      animation-timeline: view(block);\n      animation-range: exit 0% exit 100%;\n    }\n    @keyframes sk-hero-drift {\n      from { transform: translateY(0); }\n      to { transform: translateY(30%); }\n    }\n  }\n}\n`;\n\ninterface HeroSectionProps {\n  data: PortfolioHeroData;\n  screenshots?: { desktop?: string; tablet?: string; mobile?: string };\n  liveUrl?: string;\n}\n\nexport default function HeroSection({ data, screenshots, liveUrl }: HeroSectionProps) {\n  const shots = screenshots || data.screenshots;\n  const url = liveUrl || data.liveUrl;\n\n  return (\n    <section\n      className=\"relative overflow-hidden w-full\"\n      style={{\n        minHeight: '90vh',\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'center',\n        background: 'var(--sk-bg, #0a0a0a)',\n      }}\n    >\n      {/* Parallax background layer (CSS scroll-driven) */}\n      <style href=\"sk-hero-parallax\" precedence=\"default\">\n        {HERO_PARALLAX_CSS}\n      </style>\n      <div\n        className=\"sk-hero-bg absolute inset-0 pointer-events-none\"\n        style={{\n          background: `radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent) 0%, transparent 70%)`,\n          willChange: 'transform',\n        }}\n      />\n\n      <div className=\"relative z-10 max-w-7xl mx-auto w-full min-w-0 px-4 sm:px-6 py-24 lg:py-32\">\n        <div className=\"grid grid-cols-1 min-w-0 lg:grid-cols-2 gap-12 lg:gap-16 items-start\">\n          {/* Text column — min-w-0 so grid track can shrink below content intrinsic width (mobile) */}\n          <div className=\"flex min-w-0 max-w-full flex-col gap-6\">\n            {/* Category badge */}\n            <span\n              className=\"inline-flex items-center self-start px-4 py-1.5 rounded-full text-sm font-medium\"\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              {data.category?.replace(/[-_]/g, ' ').replace(/\\b\\w/g, (c: string) => c.toUpperCase())}\n            </span>\n\n            {/* Headline — static, this is usually the LCP element */}\n            <h1\n              className=\"text-4xl md:text-5xl lg:text-6xl font-bold leading-tight\"\n              style={{\n                color: 'var(--sk-text-primary, #ffffff)',\n                fontFamily: 'var(--sk-font-heading, inherit)',\n                overflowWrap: 'break-word',\n                wordBreak: 'break-word',\n              }}\n            >\n              {data.headline}\n            </h1>\n\n            {/* Subheadline */}\n            <p\n              className=\"text-xl md:text-2xl font-medium\"\n              style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n            >\n              {data.subheadline}\n            </p>\n\n            {/* Description */}\n            <p\n              className=\"text-base md:text-lg leading-relaxed\"\n              style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n            >\n              {data.description}\n            </p>\n\n            {/* Services tags */}\n            {data.services.length > 0 && (\n              <div className=\"flex flex-wrap gap-2\">\n                {data.services.map((service) => (\n                  <span\n                    key={service}\n                    className=\"px-3 py-1 rounded-full text-xs font-medium\"\n                    style={{\n                      background: 'var(--sk-surface, rgba(255,255,255,0.05))',\n                      color: 'var(--sk-text-secondary, #a1a1aa)',\n                      border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n                    }}\n                  >\n                    {service}\n                  </span>\n                ))}\n              </div>\n            )}\n\n            {/* CTA button */}\n            {url && (\n              <a\n                href={url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                data-portfolio-action=\"live-site\"\n                className=\"inline-flex items-center gap-2 self-start px-6 py-3 rounded-xl text-sm font-semibold transition-opacity hover:opacity-90\"\n                style={{\n                  background: 'var(--sk-primary, #6366f1)',\n                  color: '#ffffff',\n                }}\n              >\n                View Live Site\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M6 3h7v7M13 3L3 13\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                </svg>\n              </a>\n            )}\n\n          </div>\n\n          {/* Right column — trifolio + KPIs */}\n          <div className=\"flex min-w-0 max-w-full flex-col gap-10 lg:pt-8\">\n            {/* Device trifolio — realistic device frames */}\n            {(url || shots?.desktop || shots?.tablet || shots?.mobile) && (\n              <div className=\"min-w-0 max-w-full\">\n                <DeviceTrifolio\n                  screenshots={{\n                    desktop: shots?.desktop,\n                    tablet: shots?.tablet,\n                    mobile: shots?.mobile,\n                  }}\n                  url={url}\n                />\n              </div>\n            )}\n\n            {/* KPI cards — below trifolio in right column */}\n            {data.kpis.length > 0 && (\n              <ScrollReveal y={30} delay={0.6} stagger={0.1}>\n                <div className=\"grid grid-cols-2 gap-3\">\n                  {data.kpis.map((kpi, i) => (\n                    <GlassCard key={i} padding=\"sm\" hover={false} className=\"text-center\">\n                      <div\n                        className=\"text-2xl md:text-3xl font-bold\"\n                        style={{ color: 'var(--sk-primary, #6366f1)' }}\n                      >\n                        <AnimatedCounter\n                          value={kpi.value}\n                          suffix={kpi.suffix}\n                          prefix={kpi.prefix}\n                          duration={2.5}\n                        />\n                      </div>\n                      <div\n                        className=\"text-xs mt-1 font-medium\"\n                        style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n                      >\n                        {kpi.label}\n                      </div>\n                    </GlassCard>\n                  ))}\n                </div>\n              </ScrollReveal>\n            )}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n"]}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { e as PortfolioHeroData } from '../../types-0tVPy4pU.cjs';
+
+interface HeroSectionProps {
+    data: PortfolioHeroData;
+    screenshots?: {
+        desktop?: string;
+        tablet?: string;
+        mobile?: string;
+    };
+    liveUrl?: string;
+}
+declare function HeroSection({ data, screenshots, liveUrl }: HeroSectionProps): React.JSX.Element;
+
+export { HeroSection as default };

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { e as PortfolioHeroData } from '../../types-0tVPy4pU.js';
+
+interface HeroSectionProps {
+    data: PortfolioHeroData;
+    screenshots?: {
+        desktop?: string;
+        tablet?: string;
+        mobile?: string;
+    };
+    liveUrl?: string;
+}
+declare function HeroSection({ data, screenshots, liveUrl }: HeroSectionProps): React.JSX.Element;
+
+export { HeroSection as default };

package/dist/portfolio/sections/HeroSection.js

@@ -0,0 +1,171 @@
+import ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';
+import AnimatedCounter from '@sonordev/agency-site-kit/portfolio/primitives/AnimatedCounter';
+import GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';
+import DeviceTrifolio from '@sonordev/agency-site-kit/portfolio/primitives/DeviceTrifolio';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/portfolio/components/sections/HeroSection.tsx
+var HERO_PARALLAX_CSS = `
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    .sk-hero-bg {
+      animation: sk-hero-drift linear both;
+      animation-timeline: view(block);
+      animation-range: exit 0% exit 100%;
+    }
+    @keyframes sk-hero-drift {
+      from { transform: translateY(0); }
+      to { transform: translateY(30%); }
+    }
+  }
+}
+`;
+function HeroSection({ data, screenshots, liveUrl }) {
+  const shots = screenshots || data.screenshots;
+  const url = liveUrl || data.liveUrl;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: "relative overflow-hidden w-full",
+      style: {
+        minHeight: "90vh",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        background: "var(--sk-bg, #0a0a0a)"
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { href: "sk-hero-parallax", precedence: "default", children: HERO_PARALLAX_CSS }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "sk-hero-bg absolute inset-0 pointer-events-none",
+            style: {
+              background: `radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent) 0%, transparent 70%)`,
+              willChange: "transform"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "relative z-10 max-w-7xl mx-auto w-full min-w-0 px-4 sm:px-6 py-24 lg:py-32", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 min-w-0 lg:grid-cols-2 gap-12 lg:gap-16 items-start", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 max-w-full flex-col gap-6", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "inline-flex items-center self-start px-4 py-1.5 rounded-full text-sm font-medium",
+                style: {
+                  background: "color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)",
+                  color: "var(--sk-primary, #6366f1)",
+                  border: "1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 25%, transparent)"
+                },
+                children: data.category?.replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "h1",
+              {
+                className: "text-4xl md:text-5xl lg:text-6xl font-bold leading-tight",
+                style: {
+                  color: "var(--sk-text-primary, #ffffff)",
+                  fontFamily: "var(--sk-font-heading, inherit)",
+                  overflowWrap: "break-word",
+                  wordBreak: "break-word"
+                },
+                children: data.headline
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "text-xl md:text-2xl font-medium",
+                style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+                children: data.subheadline
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "text-base md:text-lg leading-relaxed",
+                style: { color: "var(--sk-text-tertiary, #71717a)" },
+                children: data.description
+              }
+            ),
+            data.services.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: data.services.map((service) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "px-3 py-1 rounded-full text-xs font-medium",
+                style: {
+                  background: "var(--sk-surface, rgba(255,255,255,0.05))",
+                  color: "var(--sk-text-secondary, #a1a1aa)",
+                  border: "1px solid var(--sk-border, rgba(255,255,255,0.1))"
+                },
+                children: service
+              },
+              service
+            )) }),
+            url && /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: url,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "data-portfolio-action": "live-site",
+                className: "inline-flex items-center gap-2 self-start px-6 py-3 rounded-xl text-sm font-semibold transition-opacity hover:opacity-90",
+                style: {
+                  background: "var(--sk-primary, #6366f1)",
+                  color: "#ffffff"
+                },
+                children: [
+                  "View Live Site",
+                  /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M6 3h7v7M13 3L3 13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 max-w-full flex-col gap-10 lg:pt-8", children: [
+            (url || shots?.desktop || shots?.tablet || shots?.mobile) && /* @__PURE__ */ jsx("div", { className: "min-w-0 max-w-full", children: /* @__PURE__ */ jsx(
+              DeviceTrifolio,
+              {
+                screenshots: {
+                  desktop: shots?.desktop,
+                  tablet: shots?.tablet,
+                  mobile: shots?.mobile
+                },
+                url
+              }
+            ) }),
+            data.kpis.length > 0 && /* @__PURE__ */ jsx(ScrollReveal, { y: 30, delay: 0.6, stagger: 0.1, children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: data.kpis.map((kpi, i) => /* @__PURE__ */ jsxs(GlassCard, { padding: "sm", hover: false, className: "text-center", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "text-2xl md:text-3xl font-bold",
+                  style: { color: "var(--sk-primary, #6366f1)" },
+                  children: /* @__PURE__ */ jsx(
+                    AnimatedCounter,
+                    {
+                      value: kpi.value,
+                      suffix: kpi.suffix,
+                      prefix: kpi.prefix,
+                      duration: 2.5
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "text-xs mt-1 font-medium",
+                  style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+                  children: kpi.label
+                }
+              )
+            ] }, i)) }) })
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+
+export { HeroSection as default };
+//# sourceMappingURL=HeroSection.js.map
+//# sourceMappingURL=HeroSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/HeroSection.tsx"],"names":[],"mappings":"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","file":"HeroSection.js","sourcesContent":["// Server component — the entire hero renders on the server and ships zero\n// component JS. Client primitives (counter, reveal, trifolio) cross the RSC\n// boundary via package subpaths.\nimport React from 'react';\nimport type { PortfolioHeroData } from '../../../types';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport AnimatedCounter from '@sonordev/agency-site-kit/portfolio/primitives/AnimatedCounter';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\nimport DeviceTrifolio from '@sonordev/agency-site-kit/portfolio/primitives/DeviceTrifolio';\n\n// LCP rule (monorepo CLAUDE.md, Performance): above-the-fold content renders\n// fully static — no entrance animation, no post-hydration re-hide. The text\n// column below must never be wrapped in ScrollReveal/SplitHeadline: hiding\n// the H1 after hydration moves LCP to the tween's end and tanks the mobile\n// Lighthouse score. Reveal animations are for the below-fold KPI cards only.\n\n// Background parallax as a CSS scroll-driven animation — progressive\n// enhancement: browsers without animation-timeline get a static gradient.\nconst HERO_PARALLAX_CSS = `\n@supports (animation-timeline: view()) {\n  @media (prefers-reduced-motion: no-preference) {\n    .sk-hero-bg {\n      animation: sk-hero-drift linear both;\n      animation-timeline: view(block);\n      animation-range: exit 0% exit 100%;\n    }\n    @keyframes sk-hero-drift {\n      from { transform: translateY(0); }\n      to { transform: translateY(30%); }\n    }\n  }\n}\n`;\n\ninterface HeroSectionProps {\n  data: PortfolioHeroData;\n  screenshots?: { desktop?: string; tablet?: string; mobile?: string };\n  liveUrl?: string;\n}\n\nexport default function HeroSection({ data, screenshots, liveUrl }: HeroSectionProps) {\n  const shots = screenshots || data.screenshots;\n  const url = liveUrl || data.liveUrl;\n\n  return (\n    <section\n      className=\"relative overflow-hidden w-full\"\n      style={{\n        minHeight: '90vh',\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'center',\n        background: 'var(--sk-bg, #0a0a0a)',\n      }}\n    >\n      {/* Parallax background layer (CSS scroll-driven) */}\n      <style href=\"sk-hero-parallax\" precedence=\"default\">\n        {HERO_PARALLAX_CSS}\n      </style>\n      <div\n        className=\"sk-hero-bg absolute inset-0 pointer-events-none\"\n        style={{\n          background: `radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent) 0%, transparent 70%)`,\n          willChange: 'transform',\n        }}\n      />\n\n      <div className=\"relative z-10 max-w-7xl mx-auto w-full min-w-0 px-4 sm:px-6 py-24 lg:py-32\">\n        <div className=\"grid grid-cols-1 min-w-0 lg:grid-cols-2 gap-12 lg:gap-16 items-start\">\n          {/* Text column — min-w-0 so grid track can shrink below content intrinsic width (mobile) */}\n          <div className=\"flex min-w-0 max-w-full flex-col gap-6\">\n            {/* Category badge */}\n            <span\n              className=\"inline-flex items-center self-start px-4 py-1.5 rounded-full text-sm font-medium\"\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              {data.category?.replace(/[-_]/g, ' ').replace(/\\b\\w/g, (c: string) => c.toUpperCase())}\n            </span>\n\n            {/* Headline — static, this is usually the LCP element */}\n            <h1\n              className=\"text-4xl md:text-5xl lg:text-6xl font-bold leading-tight\"\n              style={{\n                color: 'var(--sk-text-primary, #ffffff)',\n                fontFamily: 'var(--sk-font-heading, inherit)',\n                overflowWrap: 'break-word',\n                wordBreak: 'break-word',\n              }}\n            >\n              {data.headline}\n            </h1>\n\n            {/* Subheadline */}\n            <p\n              className=\"text-xl md:text-2xl font-medium\"\n              style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n            >\n              {data.subheadline}\n            </p>\n\n            {/* Description */}\n            <p\n              className=\"text-base md:text-lg leading-relaxed\"\n              style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n            >\n              {data.description}\n            </p>\n\n            {/* Services tags */}\n            {data.services.length > 0 && (\n              <div className=\"flex flex-wrap gap-2\">\n                {data.services.map((service) => (\n                  <span\n                    key={service}\n                    className=\"px-3 py-1 rounded-full text-xs font-medium\"\n                    style={{\n                      background: 'var(--sk-surface, rgba(255,255,255,0.05))',\n                      color: 'var(--sk-text-secondary, #a1a1aa)',\n                      border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n                    }}\n                  >\n                    {service}\n                  </span>\n                ))}\n              </div>\n            )}\n\n            {/* CTA button */}\n            {url && (\n              <a\n                href={url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                data-portfolio-action=\"live-site\"\n                className=\"inline-flex items-center gap-2 self-start px-6 py-3 rounded-xl text-sm font-semibold transition-opacity hover:opacity-90\"\n                style={{\n                  background: 'var(--sk-primary, #6366f1)',\n                  color: '#ffffff',\n                }}\n              >\n                View Live Site\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M6 3h7v7M13 3L3 13\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                </svg>\n              </a>\n            )}\n\n          </div>\n\n          {/* Right column — trifolio + KPIs */}\n          <div className=\"flex min-w-0 max-w-full flex-col gap-10 lg:pt-8\">\n            {/* Device trifolio — realistic device frames */}\n            {(url || shots?.desktop || shots?.tablet || shots?.mobile) && (\n              <div className=\"min-w-0 max-w-full\">\n                <DeviceTrifolio\n                  screenshots={{\n                    desktop: shots?.desktop,\n                    tablet: shots?.tablet,\n                    mobile: shots?.mobile,\n                  }}\n                  url={url}\n                />\n              </div>\n            )}\n\n            {/* KPI cards — below trifolio in right column */}\n            {data.kpis.length > 0 && (\n              <ScrollReveal y={30} delay={0.6} stagger={0.1}>\n                <div className=\"grid grid-cols-2 gap-3\">\n                  {data.kpis.map((kpi, i) => (\n                    <GlassCard key={i} padding=\"sm\" hover={false} className=\"text-center\">\n                      <div\n                        className=\"text-2xl md:text-3xl font-bold\"\n                        style={{ color: 'var(--sk-primary, #6366f1)' }}\n                      >\n                        <AnimatedCounter\n                          value={kpi.value}\n                          suffix={kpi.suffix}\n                          prefix={kpi.prefix}\n                          duration={2.5}\n                        />\n                      </div>\n                      <div\n                        className=\"text-xs mt-1 font-medium\"\n                        style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n                      >\n                        {kpi.label}\n                      </div>\n                    </GlassCard>\n                  ))}\n                </div>\n              </ScrollReveal>\n            )}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n"]}