@sonordev/agency-site-kit 0.1.0

package/dist/VideoSection-4A2HC6K6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/VideoSection.tsx"],"names":[],"mappings":"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","file":"VideoSection-4A2HC6K6.js","sourcesContent":["'use client';\n\nimport React, { useState, useCallback } from 'react';\nimport type { PortfolioVideoData } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\nimport GlassCard from '../primitives/GlassCard';\n\ninterface VideoSectionProps {\n  data: PortfolioVideoData;\n}\n\nfunction getEmbedUrl(data: PortfolioVideoData): string {\n  if (data.embedUrl) return data.embedUrl;\n  if (!data.url) return '';\n\n  // Parse YouTube URLs\n  const ytMatch = data.url.match(\n    /(?:youtube\\.com\\/(?:watch\\?v=|embed\\/)|youtu\\.be\\/)([a-zA-Z0-9_-]{11})/,\n  );\n  if (ytMatch) return `https://www.youtube.com/embed/${ytMatch[1]}?autoplay=1`;\n\n  // Parse Vimeo URLs\n  const vimeoMatch = data.url.match(/vimeo\\.com\\/(\\d+)/);\n  if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}?autoplay=1`;\n\n  return data.url;\n}\n\nexport default function VideoSection({ data }: VideoSectionProps) {\n  const [playing, setPlaying] = useState(false);\n\n  const thumbnailUrl = data.thumbnail?.asset?._ref || '';\n  const embedUrl = getEmbedUrl(data);\n\n  const handlePlay = useCallback(() => {\n    if (embedUrl) setPlaying(true);\n  }, [embedUrl]);\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        <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            {data.title}\n          </h2>\n        </ScrollReveal>\n\n        <ScrollReveal y={40} delay={0.15}>\n          <GlassCard padding=\"sm\" hover={false}>\n            <div className=\"relative w-full overflow-hidden rounded-xl\" style={{ aspectRatio: '16/9' }}>\n              {playing ? (\n                <iframe\n                  src={embedUrl}\n                  className=\"absolute inset-0 w-full h-full\"\n                  allow=\"autoplay; fullscreen; picture-in-picture\"\n                  allowFullScreen\n                  title={data.title}\n                  style={{ border: 'none' }}\n                />\n              ) : (\n                <button\n                  onClick={handlePlay}\n                  className=\"absolute inset-0 w-full h-full group cursor-pointer\"\n                  aria-label={`Play ${data.title}`}\n                >\n                  {/* Thumbnail */}\n                  {thumbnailUrl && (\n                    <img\n                      src={thumbnailUrl}\n                      alt={data.title}\n                      className=\"w-full h-full object-cover\"\n                    />\n                  )}\n\n                  {/* Dark overlay */}\n                  <div\n                    className=\"absolute inset-0 transition-opacity duration-300 group-hover:opacity-60\"\n                    style={{ background: 'rgba(0,0,0,0.4)', opacity: 0.5 }}\n                  />\n\n                  {/* Play button */}\n                  <div className=\"absolute inset-0 flex items-center justify-center\">\n                    <div\n                      className=\"flex items-center justify-center w-20 h-20 rounded-full transition-transform duration-300 group-hover:scale-110\"\n                      style={{\n                        background: 'var(--sk-primary, #6366f1)',\n                        boxShadow: '0 8px 32px color-mix(in srgb, var(--sk-primary, #6366f1) 40%, transparent)',\n                      }}\n                    >\n                      <svg\n                        width=\"32\"\n                        height=\"32\"\n                        viewBox=\"0 0 32 32\"\n                        fill=\"none\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                      >\n                        <path d=\"M12 8l14 8-14 8V8z\" fill=\"#ffffff\" />\n                      </svg>\n                    </div>\n                  </div>\n\n                  {/* Duration badge */}\n                  {data.duration && (\n                    <span\n                      className=\"absolute bottom-4 right-4 px-3 py-1 rounded-lg text-xs font-medium\"\n                      style={{\n                        background: 'rgba(0,0,0,0.6)',\n                        color: '#ffffff',\n                        backdropFilter: 'blur(4px)',\n                      }}\n                    >\n                      {data.duration}\n                    </span>\n                  )}\n                </button>\n              )}\n            </div>\n          </GlassCard>\n        </ScrollReveal>\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/VideoSection-G3DFS7UH.cjs

@@ -0,0 +1,118 @@
+'use strict';
+
+var chunkKEOHORIH_cjs = require('./chunk-KEOHORIH.cjs');
+var chunkIKBK7HYX_cjs = require('./chunk-IKBK7HYX.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function getEmbedUrl(data) {
+  if (data.embedUrl) return data.embedUrl;
+  if (!data.url) return "";
+  const ytMatch = data.url.match(
+    /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
+  );
+  if (ytMatch) return `https://www.youtube.com/embed/${ytMatch[1]}?autoplay=1`;
+  const vimeoMatch = data.url.match(/vimeo\.com\/(\d+)/);
+  if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}?autoplay=1`;
+  return data.url;
+}
+function VideoSection({ data }) {
+  const [playing, setPlaying] = react.useState(false);
+  const thumbnailUrl = data.thumbnail?.asset?._ref || "";
+  const embedUrl = getEmbedUrl(data);
+  const handlePlay = react.useCallback(() => {
+    if (embedUrl) setPlaying(true);
+  }, [embedUrl]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "section",
+    {
+      className: "w-full py-20 md:py-28",
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-5xl mx-auto px-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 30, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "h2",
+          {
+            className: "text-3xl md:text-4xl font-bold mb-4",
+            style: {
+              color: "var(--sk-text-primary, #ffffff)",
+              fontFamily: "var(--sk-font-heading, inherit)"
+            },
+            children: data.title
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 40, delay: 0.15, children: /* @__PURE__ */ jsxRuntime.jsx(chunkKEOHORIH_cjs.GlassCard, { padding: "sm", hover: false, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-hidden rounded-xl", style: { aspectRatio: "16/9" }, children: playing ? /* @__PURE__ */ jsxRuntime.jsx(
+          "iframe",
+          {
+            src: embedUrl,
+            className: "absolute inset-0 w-full h-full",
+            allow: "autoplay; fullscreen; picture-in-picture",
+            allowFullScreen: true,
+            title: data.title,
+            style: { border: "none" }
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handlePlay,
+            className: "absolute inset-0 w-full h-full group cursor-pointer",
+            "aria-label": `Play ${data.title}`,
+            children: [
+              thumbnailUrl && /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: thumbnailUrl,
+                  alt: data.title,
+                  className: "w-full h-full object-cover"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute inset-0 transition-opacity duration-300 group-hover:opacity-60",
+                  style: { background: "rgba(0,0,0,0.4)", opacity: 0.5 }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "flex items-center justify-center w-20 h-20 rounded-full transition-transform duration-300 group-hover:scale-110",
+                  style: {
+                    background: "var(--sk-primary, #6366f1)",
+                    boxShadow: "0 8px 32px color-mix(in srgb, var(--sk-primary, #6366f1) 40%, transparent)"
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "svg",
+                    {
+                      width: "32",
+                      height: "32",
+                      viewBox: "0 0 32 32",
+                      fill: "none",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8l14 8-14 8V8z", fill: "#ffffff" })
+                    }
+                  )
+                }
+              ) }),
+              data.duration && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "absolute bottom-4 right-4 px-3 py-1 rounded-lg text-xs font-medium",
+                  style: {
+                    background: "rgba(0,0,0,0.6)",
+                    color: "#ffffff",
+                    backdropFilter: "blur(4px)"
+                  },
+                  children: data.duration
+                }
+              )
+            ]
+          }
+        ) }) }) })
+      ] })
+    }
+  );
+}
+
+module.exports = VideoSection;
+//# sourceMappingURL=VideoSection-G3DFS7UH.cjs.map
+//# sourceMappingURL=VideoSection-G3DFS7UH.cjs.map

package/dist/VideoSection-G3DFS7UH.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/VideoSection.tsx"],"names":["useState","useCallback","jsx","jsxs","ScrollReveal","GlassCard"],"mappings":"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","file":"VideoSection-G3DFS7UH.cjs","sourcesContent":["'use client';\n\nimport React, { useState, useCallback } from 'react';\nimport type { PortfolioVideoData } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\nimport GlassCard from '../primitives/GlassCard';\n\ninterface VideoSectionProps {\n  data: PortfolioVideoData;\n}\n\nfunction getEmbedUrl(data: PortfolioVideoData): string {\n  if (data.embedUrl) return data.embedUrl;\n  if (!data.url) return '';\n\n  // Parse YouTube URLs\n  const ytMatch = data.url.match(\n    /(?:youtube\\.com\\/(?:watch\\?v=|embed\\/)|youtu\\.be\\/)([a-zA-Z0-9_-]{11})/,\n  );\n  if (ytMatch) return `https://www.youtube.com/embed/${ytMatch[1]}?autoplay=1`;\n\n  // Parse Vimeo URLs\n  const vimeoMatch = data.url.match(/vimeo\\.com\\/(\\d+)/);\n  if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}?autoplay=1`;\n\n  return data.url;\n}\n\nexport default function VideoSection({ data }: VideoSectionProps) {\n  const [playing, setPlaying] = useState(false);\n\n  const thumbnailUrl = data.thumbnail?.asset?._ref || '';\n  const embedUrl = getEmbedUrl(data);\n\n  const handlePlay = useCallback(() => {\n    if (embedUrl) setPlaying(true);\n  }, [embedUrl]);\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        <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            {data.title}\n          </h2>\n        </ScrollReveal>\n\n        <ScrollReveal y={40} delay={0.15}>\n          <GlassCard padding=\"sm\" hover={false}>\n            <div className=\"relative w-full overflow-hidden rounded-xl\" style={{ aspectRatio: '16/9' }}>\n              {playing ? (\n                <iframe\n                  src={embedUrl}\n                  className=\"absolute inset-0 w-full h-full\"\n                  allow=\"autoplay; fullscreen; picture-in-picture\"\n                  allowFullScreen\n                  title={data.title}\n                  style={{ border: 'none' }}\n                />\n              ) : (\n                <button\n                  onClick={handlePlay}\n                  className=\"absolute inset-0 w-full h-full group cursor-pointer\"\n                  aria-label={`Play ${data.title}`}\n                >\n                  {/* Thumbnail */}\n                  {thumbnailUrl && (\n                    <img\n                      src={thumbnailUrl}\n                      alt={data.title}\n                      className=\"w-full h-full object-cover\"\n                    />\n                  )}\n\n                  {/* Dark overlay */}\n                  <div\n                    className=\"absolute inset-0 transition-opacity duration-300 group-hover:opacity-60\"\n                    style={{ background: 'rgba(0,0,0,0.4)', opacity: 0.5 }}\n                  />\n\n                  {/* Play button */}\n                  <div className=\"absolute inset-0 flex items-center justify-center\">\n                    <div\n                      className=\"flex items-center justify-center w-20 h-20 rounded-full transition-transform duration-300 group-hover:scale-110\"\n                      style={{\n                        background: 'var(--sk-primary, #6366f1)',\n                        boxShadow: '0 8px 32px color-mix(in srgb, var(--sk-primary, #6366f1) 40%, transparent)',\n                      }}\n                    >\n                      <svg\n                        width=\"32\"\n                        height=\"32\"\n                        viewBox=\"0 0 32 32\"\n                        fill=\"none\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                      >\n                        <path d=\"M12 8l14 8-14 8V8z\" fill=\"#ffffff\" />\n                      </svg>\n                    </div>\n                  </div>\n\n                  {/* Duration badge */}\n                  {data.duration && (\n                    <span\n                      className=\"absolute bottom-4 right-4 px-3 py-1 rounded-lg text-xs font-medium\"\n                      style={{\n                        background: 'rgba(0,0,0,0.6)',\n                        color: '#ffffff',\n                        backdropFilter: 'blur(4px)',\n                      }}\n                    >\n                      {data.duration}\n                    </span>\n                  )}\n                </button>\n              )}\n            </div>\n          </GlassCard>\n        </ScrollReveal>\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/chunk-2VNNFAG6.js

@@ -0,0 +1,415 @@
+'use client';
+import { AnimatedCounter } from './chunk-2Y4O3LWM.js';
+import { GlassCard } from './chunk-YB4B3OMC.js';
+import { ScrollReveal } from './chunk-7CFFAKDM.js';
+import dynamic from 'next/dynamic';
+import { useRef, useEffect, useMemo } from 'react';
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function SplitHeadline({
+  children,
+  tag: Tag = "h2",
+  className,
+  style,
+  delay = 0,
+  duration = 0.8,
+  staggerAmount = 0.02
+}) {
+  const ref = useRef(null);
+  const splitContent = useMemo(() => {
+    const words = children.split(" ");
+    return words.map((word, wi) => /* @__PURE__ */ jsxs("span", { style: { display: "inline-block", whiteSpace: "nowrap" }, children: [
+      word.split("").map((char, ci) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "split-char",
+          style: { display: "inline-block" },
+          children: char
+        },
+        ci
+      )),
+      wi < words.length - 1 && /* @__PURE__ */ jsx("span", { style: { display: "inline-block" }, children: "\xA0" })
+    ] }, wi));
+  }, [children]);
+  useEffect(() => {
+    gsap.registerPlugin(ScrollTrigger);
+    const el = ref.current;
+    if (!el) return;
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (prefersReducedMotion) {
+      gsap.set(el.querySelectorAll(".split-char"), { opacity: 1, y: 0 });
+      return;
+    }
+    const chars = el.querySelectorAll(".split-char");
+    const ctx = gsap.context(() => {
+      gsap.fromTo(
+        chars,
+        {
+          opacity: 0,
+          y: 20
+        },
+        {
+          opacity: 1,
+          y: 0,
+          duration,
+          delay,
+          stagger: staggerAmount,
+          ease: "power2.out",
+          scrollTrigger: {
+            trigger: el,
+            start: "top 85%",
+            toggleActions: "play none none none"
+          }
+        }
+      );
+    }, el);
+    return () => ctx.revert();
+  }, [delay, duration, staggerAmount]);
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      className,
+      style: { overflow: "hidden", ...style },
+      children: splitContent
+    }
+  );
+}
+function HeroSection({ data, screenshots, liveUrl }) {
+  const bgRef = useRef(null);
+  const deviceRef = useRef(null);
+  const shots = screenshots || data.screenshots;
+  const url = liveUrl || data.liveUrl;
+  useEffect(() => {
+    gsap.registerPlugin(ScrollTrigger);
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (prefersReducedMotion) return;
+    const ctx = gsap.context(() => {
+      if (bgRef.current) {
+        gsap.to(bgRef.current, {
+          yPercent: 30,
+          ease: "none",
+          scrollTrigger: {
+            trigger: bgRef.current.parentElement,
+            start: "top top",
+            end: "bottom top",
+            scrub: true
+          }
+        });
+      }
+      if (deviceRef.current) {
+        const devices = deviceRef.current.children;
+        gsap.fromTo(
+          devices,
+          { y: 60, opacity: 0, scale: 0.95 },
+          {
+            y: 0,
+            opacity: 1,
+            scale: 1,
+            duration: 1,
+            stagger: 0.15,
+            ease: "power3.out",
+            delay: 0.6
+          }
+        );
+      }
+    });
+    return () => ctx.revert();
+  }, []);
+  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(
+          "div",
+          {
+            ref: bgRef,
+            className: "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 px-6 py-24 lg:py-32", children: /* @__PURE__ */ jsxs("div", { className: "grid lg:grid-cols-2 gap-12 lg:gap-16 items-center", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+            /* @__PURE__ */ jsx(ScrollReveal, { y: 20, duration: 0.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
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              SplitHeadline,
+              {
+                tag: "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)"
+                },
+                children: data.headline
+              }
+            ),
+            /* @__PURE__ */ jsx(ScrollReveal, { y: 20, delay: 0.2, children: /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "text-xl md:text-2xl font-medium",
+                style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+                children: data.subheadline
+              }
+            ) }),
+            /* @__PURE__ */ jsx(ScrollReveal, { y: 20, delay: 0.3, children: /* @__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(ScrollReveal, { y: 20, delay: 0.4, stagger: 0.05, children: /* @__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__ */ jsx(ScrollReveal, { y: 20, delay: 0.5, children: /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: url,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                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" }) })
+                ]
+              }
+            ) }),
+            data.kpis.length > 0 && /* @__PURE__ */ jsx(ScrollReveal, { y: 30, delay: 0.6, stagger: 0.1, children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4 mt-4", 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
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "inline-block mt-1.5 px-2 py-0.5 rounded text-[10px] uppercase tracking-wider font-medium",
+                  style: {
+                    background: kpi.source === "measured" ? "color-mix(in srgb, #10b981 15%, transparent)" : "color-mix(in srgb, #f59e0b 15%, transparent)",
+                    color: kpi.source === "measured" ? "#10b981" : "#f59e0b"
+                  },
+                  children: kpi.source
+                }
+              )
+            ] }, i)) }) })
+          ] }),
+          (shots?.desktop || shots?.tablet || shots?.mobile) && /* @__PURE__ */ jsxs("div", { ref: deviceRef, className: "relative flex items-end justify-center gap-3 lg:gap-4 min-h-[400px]", children: [
+            shots.desktop && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "relative w-full max-w-[480px] rounded-lg overflow-hidden shadow-2xl",
+                style: {
+                  border: "2px solid var(--sk-border, rgba(255,255,255,0.1))",
+                  aspectRatio: "16/10"
+                },
+                children: /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: shots.desktop,
+                    alt: "Desktop screenshot",
+                    className: "w-full h-full object-cover object-top",
+                    loading: "eager"
+                  }
+                )
+              }
+            ),
+            shots.tablet && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute bottom-0 right-0 w-[45%] max-w-[220px] rounded-lg overflow-hidden shadow-2xl z-10",
+                style: {
+                  border: "2px solid var(--sk-border, rgba(255,255,255,0.1))",
+                  aspectRatio: "3/4",
+                  transform: "translateX(10%) translateY(5%)"
+                },
+                children: /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: shots.tablet,
+                    alt: "Tablet screenshot",
+                    className: "w-full h-full object-cover object-top",
+                    loading: "eager"
+                  }
+                )
+              }
+            ),
+            shots.mobile && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute bottom-0 right-[15%] w-[25%] max-w-[120px] rounded-xl overflow-hidden shadow-2xl z-20",
+                style: {
+                  border: "2px solid var(--sk-border, rgba(255,255,255,0.1))",
+                  aspectRatio: "9/19",
+                  transform: "translateY(10%)"
+                },
+                children: /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: shots.mobile,
+                    alt: "Mobile screenshot",
+                    className: "w-full h-full object-cover object-top",
+                    loading: "eager"
+                  }
+                )
+              }
+            )
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+var ChallengesSection = dynamic(() => import('./ChallengesSection-GEQGVSJN.js'), { ssr: true });
+var StrategySection = dynamic(() => import('./StrategySection-VUWMIYYP.js'), { ssr: true });
+var ResultsSection = dynamic(() => import('./ResultsSection-DFUJ5U6M.js'), { ssr: true });
+var TechStackSection = dynamic(() => import('./TechStackSection-OCUYG4XT.js'), { ssr: true });
+var ServicesSection = dynamic(() => import('./ServicesSection-D5V3Q4GR.js'), { ssr: true });
+var TestimonialSection = dynamic(() => import('./TestimonialSection-6RGSMXQB.js'), { ssr: true });
+var GallerySection = dynamic(() => import('./GallerySection-VMKORC47.js'), { ssr: true });
+var VideoSection = dynamic(() => import('./VideoSection-4A2HC6K6.js'), { ssr: true });
+var TeamSection = dynamic(() => import('./TeamSection-HGKFW6PQ.js'), { ssr: true });
+var FeatureSpotlightSection = dynamic(() => import('./FeatureSpotlightSection-B7P3JGNL.js'), { ssr: true });
+var BeforeAfterSection = dynamic(() => import('./BeforeAfterSection-6QUJOBO2.js'), { ssr: true });
+var MetricsTimelineSection = dynamic(() => import('./MetricsTimelineSection-6BT5GNFV.js'), { ssr: true });
+var ConversionFunnelSection = dynamic(() => import('./ConversionFunnelSection-D3GE4NKE.js'), { ssr: true });
+var DetailsSection = dynamic(() => import('./DetailsSection-FB763FS7.js'), { ssr: true });
+var CTASection = dynamic(() => import('./CTASection-BJA72XIL.js'), { ssr: true });
+function renderSection(section, item, index) {
+  const key = `${section.sectionType}-${index}`;
+  switch (section.sectionType) {
+    case "portfolioHero":
+      return /* @__PURE__ */ jsx(
+        HeroSection,
+        {
+          data: section.data,
+          screenshots: item.hero_screenshots ?? void 0,
+          liveUrl: item.live_url ?? void 0
+        },
+        key
+      );
+    case "portfolioChallenges":
+      return /* @__PURE__ */ jsx(ChallengesSection, { data: section.data }, key);
+    case "portfolioStrategy":
+      return /* @__PURE__ */ jsx(StrategySection, { data: section.data }, key);
+    case "portfolioResults":
+      return /* @__PURE__ */ jsx(ResultsSection, { data: section.data }, key);
+    case "portfolioTechStack":
+      return /* @__PURE__ */ jsx(TechStackSection, { data: section.data }, key);
+    case "portfolioServices":
+      return /* @__PURE__ */ jsx(ServicesSection, { data: section.data }, key);
+    case "portfolioTestimonial":
+      return /* @__PURE__ */ jsx(TestimonialSection, { data: section.data }, key);
+    case "portfolioGallery":
+      return /* @__PURE__ */ jsx(GallerySection, { data: section.data }, key);
+    case "portfolioVideo":
+      return /* @__PURE__ */ jsx(VideoSection, { data: section.data }, key);
+    case "portfolioTeam":
+      return /* @__PURE__ */ jsx(TeamSection, { data: section.data }, key);
+    case "portfolioFeatureSpotlight":
+      return /* @__PURE__ */ jsx(FeatureSpotlightSection, { data: section.data }, key);
+    case "portfolioBeforeAfter":
+      return /* @__PURE__ */ jsx(BeforeAfterSection, { data: section.data }, key);
+    case "portfolioMetricsTimeline":
+      return /* @__PURE__ */ jsx(MetricsTimelineSection, { data: section.data }, key);
+    case "portfolioConversionFunnel":
+      return /* @__PURE__ */ jsx(ConversionFunnelSection, { data: section.data }, key);
+    case "portfolioDetails":
+      return /* @__PURE__ */ jsx(DetailsSection, { data: section.data }, key);
+    case "portfolioCTA":
+      return /* @__PURE__ */ jsx(CTASection, { data: section.data }, key);
+    case "portfolioSeo":
+      return null;
+    default:
+      return null;
+  }
+}
+function PortfolioPage({ item }) {
+  return /* @__PURE__ */ jsx("article", { className: "w-full flex flex-col", children: item.sections.map((section, index) => {
+    const rendered = renderSection(section, item, index);
+    if (!rendered) return null;
+    return /* @__PURE__ */ jsx("div", { className: "w-full", children: rendered }, `wrapper-${section.sectionType}-${index}`);
+  }) });
+}
+
+// src/types.ts
+var PORTFOLIO_SECTION_TYPES = [
+  "portfolioHero",
+  "portfolioChallenges",
+  "portfolioStrategy",
+  "portfolioResults",
+  "portfolioTechStack",
+  "portfolioServices",
+  "portfolioTestimonial",
+  "portfolioGallery",
+  "portfolioVideo",
+  "portfolioTeam",
+  "portfolioFeatureSpotlight",
+  "portfolioBeforeAfter",
+  "portfolioMetricsTimeline",
+  "portfolioConversionFunnel",
+  "portfolioDetails",
+  "portfolioSeo",
+  "portfolioCTA"
+];
+
+export { PORTFOLIO_SECTION_TYPES, PortfolioPage };
+//# sourceMappingURL=chunk-2VNNFAG6.js.map
+//# sourceMappingURL=chunk-2VNNFAG6.js.map