@sonordev/agency-site-kit 0.3.1 → 0.4.0

package/dist/{PerformanceSection-24TVVFZA.cjs → portfolio/sections/PerformanceSection.cjs}

@@ -1,16 +1,44 @@
-'use strict';
-
-var chunkKEOHORIH_cjs = require('./chunk-KEOHORIH.cjs');
-var chunkIKBK7HYX_cjs = require('./chunk-IKBK7HYX.cjs');
-var react = require('react');
-var gsap = require('gsap');
-var ScrollTrigger = require('gsap/ScrollTrigger');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var gsap__default = /*#__PURE__*/_interopDefault(gsap);
+'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/PerformanceSection.tsx
+var PerformanceSection_exports = {};
+__export(PerformanceSection_exports, {
+  default: () => PerformanceSection
+});
+module.exports = __toCommonJS(PerformanceSection_exports);
+var import_react = require("react");
+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 CATEGORIES = [
   { key: "performance", label: "Performance", color: "#10b981" },
   { key: "seo", label: "SEO", color: "#6366f1" },
@@ -22,49 +50,65 @@ function getScoreColor(score) {
   if (score >= 50) return "#f59e0b";
   return "#ef4444";
 }
+var EASE = "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
+var RADIUS = 44;
+var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
 function ScoreGauge({
   score,
   label,
   previousScore,
   delay = 0
 }) {
-  const circleRef = react.useRef(null);
-  const [displayScore, setDisplayScore] = react.useState(0);
-  react.useEffect(() => {
-    gsap__default.default.registerPlugin(ScrollTrigger.ScrollTrigger);
-    if (!circleRef.current) return;
-    const radius = 44;
-    const circumference = 2 * Math.PI * radius;
-    const offset = circumference - score / 100 * circumference;
-    gsap__default.default.set(circleRef.current, {
-      strokeDasharray: circumference,
-      strokeDashoffset: circumference
-    });
-    const ctx = gsap__default.default.context(() => {
-      gsap__default.default.to(circleRef.current, {
-        strokeDashoffset: offset,
-        duration: 1.5,
-        ease: "power2.out",
-        delay,
-        scrollTrigger: {
-          trigger: circleRef.current,
-          start: "top 85%",
-          toggleActions: "play none none none"
-        },
-        onUpdate: function() {
-          const progress = 1 - (this.targets()[0].style.strokeDashoffset ? parseFloat(this.targets()[0].style.strokeDashoffset) / circumference : 0);
-          setDisplayScore(Math.round(progress * score));
-        }
-      });
-    });
-    return () => ctx.revert();
+  const circleRef = (0, import_react.useRef)(null);
+  const [displayScore, setDisplayScore] = (0, import_react.useState)(score);
+  (0, import_react.useEffect)(() => {
+    const circle = circleRef.current;
+    if (!circle) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      setDisplayScore(score);
+      return;
+    }
+    const rect = circle.getBoundingClientRect();
+    if (rect.top < window.innerHeight && rect.bottom > 0) {
+      setDisplayScore(score);
+      return;
+    }
+    const finalOffset = CIRCUMFERENCE - score / 100 * CIRCUMFERENCE;
+    circle.style.strokeDashoffset = String(CIRCUMFERENCE);
+    setDisplayScore(0);
+    let raf = 0;
+    const easeOut = (t) => 1 - Math.pow(1 - t, 2);
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        io.disconnect();
+        circle.style.transition = `stroke-dashoffset 1.5s ${EASE} ${delay}s`;
+        circle.style.strokeDashoffset = String(finalOffset);
+        const start = performance.now();
+        const tick = (now) => {
+          const p = Math.min(1, Math.max(0, (now - start - delay * 1e3) / 1500));
+          setDisplayScore(Math.round(easeOut(p) * score));
+          if (p < 1) raf = requestAnimationFrame(tick);
+        };
+        raf = requestAnimationFrame(tick);
+      },
+      { rootMargin: "0px 0px -15% 0px" }
+      // ≈ the old 'top 85%' trigger
+    );
+    io.observe(circle);
+    return () => {
+      io.disconnect();
+      cancelAnimationFrame(raf);
+      circle.style.transition = "";
+      circle.style.strokeDashoffset = "";
+    };
   }, [score, delay]);
   const color = getScoreColor(score);
   const improvement = previousScore ? score - previousScore : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-28 h-28", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "w-full h-full -rotate-90", viewBox: "0 0 100 100", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative w-28 h-28", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "w-full h-full -rotate-90", viewBox: "0 0 100 100", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "circle",
           {
             cx: "50",
@@ -75,21 +119,23 @@ function ScoreGauge({
             strokeWidth: "6"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "circle",
           {
             ref: circleRef,
             cx: "50",
             cy: "50",
-            r: "44",
+            r: RADIUS,
             fill: "none",
             stroke: color,
             strokeWidth: "6",
-            strokeLinecap: "round"
+            strokeLinecap: "round",
+            strokeDasharray: CIRCUMFERENCE,
+            strokeDashoffset: CIRCUMFERENCE - score / 100 * CIRCUMFERENCE
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "span",
         {
           className: "text-2xl font-bold",
@@ -98,7 +144,7 @@ function ScoreGauge({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "span",
       {
         className: "text-sm font-medium text-center",
@@ -106,7 +152,7 @@ function ScoreGauge({
         children: label
       }
     ),
-    improvement !== void 0 && improvement > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+    improvement !== void 0 && improvement > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "span",
       {
         className: "text-xs font-semibold px-2 py-0.5 rounded-full",
@@ -145,14 +191,14 @@ function PerformanceSection({ data }) {
   const hasBeforeAfter = data.before && data.after;
   const scores = data.after || data.before;
   if (!scores && !data.cwv) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime.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.jsxs(chunkIKBK7HYX_cjs.ScrollReveal, { y: 30, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "max-w-5xl mx-auto px-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ScrollReveal.default, { y: 30, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "h2",
             {
               className: "text-3xl md:text-4xl font-bold mb-4",
@@ -163,7 +209,7 @@ function PerformanceSection({ data }) {
               children: "Performance"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "p",
             {
               className: "text-lg mb-12 max-w-2xl",
@@ -172,11 +218,11 @@ function PerformanceSection({ data }) {
             }
           )
         ] }),
-        scores && /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 30, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-8 mb-8", children: CATEGORIES.map((cat, i) => {
+        scores && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollReveal.default, { y: 30, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-8 mb-8", children: CATEGORIES.map((cat, i) => {
           const currentScore = scores[cat.key];
           const previousScore = hasBeforeAfter ? data.before?.[cat.key] : void 0;
           if (currentScore === void 0) return null;
-          return /* @__PURE__ */ jsxRuntime.jsx(
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             ScoreGauge,
             {
               score: currentScore,
@@ -187,13 +233,13 @@ function PerformanceSection({ data }) {
             cat.key
           );
         }) }) }),
-        scores && /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 30, delay: 0.2, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid md:grid-cols-2 gap-4 mb-12", children: CATEGORIES.map((cat) => {
+        scores && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollReveal.default, { y: 30, delay: 0.2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid md:grid-cols-2 gap-4 mb-12", children: CATEGORIES.map((cat) => {
           const currentScore = scores[cat.key];
           if (currentScore === void 0) return null;
           const explanation = SCORE_EXPLANATIONS[cat.key];
           if (!explanation) return null;
-          return /* @__PURE__ */ jsxRuntime.jsx(chunkKEOHORIH_cjs.GlassCard, { padding: "md", hover: false, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlassCard.default, { padding: "md", hover: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "div",
               {
                 className: "w-10 h-10 rounded-lg flex items-center justify-center shrink-0 text-sm font-bold",
@@ -204,8 +250,8 @@ function PerformanceSection({ data }) {
                 children: currentScore
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "h4",
                 {
                   className: "text-sm font-semibold mb-1",
@@ -213,7 +259,7 @@ function PerformanceSection({ data }) {
                   children: cat.label
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "p",
                 {
                   className: "text-xs leading-relaxed mb-2",
@@ -221,7 +267,7 @@ function PerformanceSection({ data }) {
                   children: explanation.why
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "p",
                 {
                   className: "text-xs leading-relaxed",
@@ -232,9 +278,9 @@ function PerformanceSection({ data }) {
             ] })
           ] }) }, cat.key);
         }) }) }),
-        hasBeforeAfter && /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 30, delay: 0.3, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid md:grid-cols-2 gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(chunkKEOHORIH_cjs.GlassCard, { padding: "lg", hover: false, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
+        hasBeforeAfter && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollReveal.default, { y: 30, delay: 0.3, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid md:grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_GlassCard.default, { padding: "lg", hover: false, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "h3",
               {
                 className: "text-sm font-semibold uppercase tracking-wider mb-4",
@@ -242,12 +288,12 @@ function PerformanceSection({ data }) {
                 children: "Before (Original Site)"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3", children: CATEGORIES.map((cat) => {
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-2 gap-3", children: CATEGORIES.map((cat) => {
               const val = data.before?.[cat.key];
               if (val === void 0) return null;
-              return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-2xl font-bold", style: { color: getScoreColor(val) }, children: val }),
-                /* @__PURE__ */ jsxRuntime.jsx(
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-2xl font-bold", style: { color: getScoreColor(val) }, children: val }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   "span",
                   {
                     className: "block text-[11px] mt-1",
@@ -258,8 +304,8 @@ function PerformanceSection({ data }) {
               ] }, cat.key);
             }) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(chunkKEOHORIH_cjs.GlassCard, { padding: "lg", hover: false, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_GlassCard.default, { padding: "lg", hover: false, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "h3",
               {
                 className: "text-sm font-semibold uppercase tracking-wider mb-4",
@@ -267,12 +313,12 @@ function PerformanceSection({ data }) {
                 children: "After (Next.js Rebuild)"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3", children: CATEGORIES.map((cat) => {
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-2 gap-3", children: CATEGORIES.map((cat) => {
               const val = data.after?.[cat.key];
               if (val === void 0) return null;
-              return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-2xl font-bold", style: { color: getScoreColor(val) }, children: val }),
-                /* @__PURE__ */ jsxRuntime.jsx(
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-2xl font-bold", style: { color: getScoreColor(val) }, children: val }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   "span",
                   {
                     className: "block text-[11px] mt-1",
@@ -284,9 +330,9 @@ function PerformanceSection({ data }) {
             }) })
           ] })
         ] }) }),
-        data.cwv && (data.cwv.lcp != null || data.cwv.cls != null || data.cwv.inp != null) && /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 30, delay: 0.4, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-4 mt-8", children: [
-          data.cwv.lcp != null && /* @__PURE__ */ jsxRuntime.jsxs(chunkKEOHORIH_cjs.GlassCard, { padding: "md", hover: false, className: "text-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
+        data.cwv && (data.cwv.lcp != null || data.cwv.cls != null || data.cwv.inp != null) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollReveal.default, { y: 30, delay: 0.4, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-3 gap-4 mt-8", children: [
+          data.cwv.lcp != null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_GlassCard.default, { padding: "md", hover: false, className: "text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
               "span",
               {
                 className: "text-2xl font-bold",
@@ -297,7 +343,7 @@ function PerformanceSection({ data }) {
                 ]
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "span",
               {
                 className: "block text-xs mt-1",
@@ -306,8 +352,8 @@ function PerformanceSection({ data }) {
               }
             )
           ] }),
-          data.cwv.cls != null && /* @__PURE__ */ jsxRuntime.jsxs(chunkKEOHORIH_cjs.GlassCard, { padding: "md", hover: false, className: "text-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
+          data.cwv.cls != null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_GlassCard.default, { padding: "md", hover: false, className: "text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "span",
               {
                 className: "text-2xl font-bold",
@@ -315,7 +361,7 @@ function PerformanceSection({ data }) {
                 children: data.cwv.cls.toFixed(3)
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "span",
               {
                 className: "block text-xs mt-1",
@@ -324,8 +370,8 @@ function PerformanceSection({ data }) {
               }
             )
           ] }),
-          data.cwv.inp != null && /* @__PURE__ */ jsxRuntime.jsxs(chunkKEOHORIH_cjs.GlassCard, { padding: "md", hover: false, className: "text-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
+          data.cwv.inp != null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_GlassCard.default, { padding: "md", hover: false, className: "text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
               "span",
               {
                 className: "text-2xl font-bold",
@@ -336,7 +382,7 @@ function PerformanceSection({ data }) {
                 ]
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "span",
               {
                 className: "block text-xs mt-1",
@@ -350,7 +396,4 @@ function PerformanceSection({ data }) {
     }
   );
 }
-
-module.exports = PerformanceSection;
-//# sourceMappingURL=PerformanceSection-24TVVFZA.cjs.map
-//# sourceMappingURL=PerformanceSection-24TVVFZA.cjs.map
+//# sourceMappingURL=PerformanceSection.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/PerformanceSection.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect, useState } from 'react';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\n\ninterface LighthouseScores {\n  performance?: number;\n  seo?: number;\n  accessibility?: number;\n  bestPractices?: number;\n}\n\ninterface PerformanceSectionProps {\n  data: {\n    before?: LighthouseScores;\n    after?: LighthouseScores;\n    cwv?: {\n      lcp?: number;\n      cls?: number;\n      inp?: number;\n    };\n  };\n}\n\nconst CATEGORIES = [\n  { key: 'performance', label: 'Performance', color: '#10b981' },\n  { key: 'seo', label: 'SEO', color: '#6366f1' },\n  { key: 'accessibility', label: 'Accessibility', color: '#f59e0b' },\n  { key: 'bestPractices', label: 'Best Practices', color: '#3b82f6' },\n] as const;\n\nfunction getScoreColor(score: number): string {\n  if (score >= 90) return '#10b981'; // green\n  if (score >= 50) return '#f59e0b'; // amber\n  return '#ef4444'; // red\n}\n\nconst EASE = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'; // ≈ power2.out\nconst RADIUS = 44;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\n\nfunction ScoreGauge({\n  score,\n  label,\n  previousScore,\n  delay = 0,\n}: {\n  score: number;\n  label: string;\n  previousScore?: number;\n  delay?: number;\n}) {\n  const circleRef = useRef<SVGCircleElement>(null);\n  // SSR renders the real final score + arc (crawlers and no-JS users see the\n  // true number); the count-up only runs for gauges below the viewport.\n  const [displayScore, setDisplayScore] = useState(score);\n\n  useEffect(() => {\n    const circle = circleRef.current;\n    if (!circle) return;\n\n    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n      setDisplayScore(score);\n      return;\n    }\n\n    // Never re-hide a gauge already in the viewport at hydration.\n    const rect = circle.getBoundingClientRect();\n    if (rect.top < window.innerHeight && rect.bottom > 0) {\n      setDisplayScore(score);\n      return;\n    }\n\n    // Hidden state: arc fully retracted, score zeroed.\n    const finalOffset = CIRCUMFERENCE - (score / 100) * CIRCUMFERENCE;\n    circle.style.strokeDashoffset = String(CIRCUMFERENCE);\n    setDisplayScore(0);\n\n    let raf = 0;\n    const easeOut = (t: number) => 1 - Math.pow(1 - t, 2); // ≈ power2.out\n\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry.isIntersecting) return;\n        io.disconnect();\n        // Draw the arc in, and count the score up in sync with the draw.\n        circle.style.transition = `stroke-dashoffset 1.5s ${EASE} ${delay}s`;\n        circle.style.strokeDashoffset = String(finalOffset);\n        const start = performance.now();\n        const tick = (now: number) => {\n          const p = Math.min(1, Math.max(0, (now - start - delay * 1000) / 1500));\n          setDisplayScore(Math.round(easeOut(p) * score));\n          if (p < 1) raf = requestAnimationFrame(tick);\n        };\n        raf = requestAnimationFrame(tick);\n      },\n      { rootMargin: '0px 0px -15% 0px' }, // ≈ the old 'top 85%' trigger\n    );\n    io.observe(circle);\n\n    return () => {\n      io.disconnect();\n      cancelAnimationFrame(raf);\n      circle.style.transition = '';\n      circle.style.strokeDashoffset = '';\n    };\n  }, [score, delay]);\n\n  const color = getScoreColor(score);\n  const improvement = previousScore ? score - previousScore : undefined;\n\n  return (\n    <div className=\"flex flex-col items-center gap-3\">\n      <div className=\"relative w-28 h-28\">\n        <svg className=\"w-full h-full -rotate-90\" viewBox=\"0 0 100 100\">\n          {/* Background circle */}\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"44\"\n            fill=\"none\"\n            stroke=\"var(--sk-surface, rgba(255,255,255,0.05))\"\n            strokeWidth=\"6\"\n          />\n          {/* Score arc — rendered at its final sweep; the effect retracts and\n              redraws it only when the gauge scrolls in */}\n          <circle\n            ref={circleRef}\n            cx=\"50\"\n            cy=\"50\"\n            r={RADIUS}\n            fill=\"none\"\n            stroke={color}\n            strokeWidth=\"6\"\n            strokeLinecap=\"round\"\n            strokeDasharray={CIRCUMFERENCE}\n            strokeDashoffset={CIRCUMFERENCE - (score / 100) * CIRCUMFERENCE}\n          />\n        </svg>\n        {/* Score text */}\n        <div className=\"absolute inset-0 flex items-center justify-center\">\n          <span\n            className=\"text-2xl font-bold\"\n            style={{ color }}\n          >\n            {displayScore}\n          </span>\n        </div>\n      </div>\n      <span\n        className=\"text-sm font-medium text-center\"\n        style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n      >\n        {label}\n      </span>\n      {improvement !== undefined && improvement > 0 && (\n        <span\n          className=\"text-xs font-semibold px-2 py-0.5 rounded-full\"\n          style={{\n            background: 'color-mix(in srgb, #10b981 15%, transparent)',\n            color: '#10b981',\n          }}\n        >\n          +{improvement} pts\n        </span>\n      )}\n    </div>\n  );\n}\n\n/** Explains why each Lighthouse category matters for the business */\nconst SCORE_EXPLANATIONS: Record<string, { why: string; competitors: string }> = {\n  performance: {\n    why: 'Faster sites convert more visitors into customers. A 1-second delay in load time reduces conversions by up to 7%. Google uses page speed as a direct ranking factor.',\n    competitors: 'Wix and GoDaddy sites typically score 30\\u201350 due to bloated JavaScript bundles and shared hosting. Template builders prioritize ease-of-use over speed.',\n  },\n  seo: {\n    why: 'Technical SEO determines whether search engines can properly crawl, index, and rank your pages. Higher scores mean more organic visibility and free traffic.',\n    competitors: 'DIY builders often miss critical SEO fundamentals\\u2014proper meta tags, structured data, canonical URLs, and server-side rendering that search engines need.',\n  },\n  accessibility: {\n    why: 'Accessible sites reach more customers, including the 1 in 4 adults with disabilities. It also reduces legal risk and improves usability for everyone.',\n    competitors: 'Template platforms generate markup that frequently fails WCAG standards\\u2014missing alt text, poor contrast ratios, and keyboard navigation issues.',\n  },\n  bestPractices: {\n    why: 'Best practices cover security (HTTPS, safe APIs), modern code standards, and browser compatibility. They protect your business and your visitors.',\n    competitors: 'Older platforms rely on outdated libraries, insecure dependencies, and legacy patterns that create vulnerabilities and degrade user trust.',\n  },\n};\n\nexport default function PerformanceSection({ data }: PerformanceSectionProps) {\n  const hasBeforeAfter = data.before && data.after;\n  const scores = data.after || data.before;\n  if (!scores && !data.cwv) 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        <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            Performance\n          </h2>\n          <p\n            className=\"text-lg mb-12 max-w-2xl\"\n            style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n          >\n            {hasBeforeAfter\n              ? 'Real Lighthouse scores — before and after our rebuild.'\n              : 'Real performance metrics measured by Google Lighthouse.'}\n          </p>\n        </ScrollReveal>\n\n        {/* Score gauges */}\n        {scores && (\n          <ScrollReveal y={30}>\n            <div className=\"grid grid-cols-2 md:grid-cols-4 gap-8 mb-8\">\n              {CATEGORIES.map((cat, i) => {\n                const currentScore = (scores as any)[cat.key];\n                const previousScore = hasBeforeAfter ? (data.before as any)?.[cat.key] : undefined;\n                if (currentScore === undefined) return null;\n                return (\n                  <ScoreGauge\n                    key={cat.key}\n                    score={currentScore}\n                    label={cat.label}\n                    previousScore={previousScore}\n                    delay={i * 0.15}\n                  />\n                );\n              })}\n            </div>\n          </ScrollReveal>\n        )}\n\n        {/* Why these scores matter — explanation cards */}\n        {scores && (\n          <ScrollReveal y={30} delay={0.2}>\n            <div className=\"grid md:grid-cols-2 gap-4 mb-12\">\n              {CATEGORIES.map((cat) => {\n                const currentScore = (scores as any)[cat.key];\n                if (currentScore === undefined) return null;\n                const explanation = SCORE_EXPLANATIONS[cat.key];\n                if (!explanation) return null;\n                return (\n                  <GlassCard key={cat.key} padding=\"md\" hover={false}>\n                    <div className=\"flex items-start gap-3\">\n                      <div\n                        className=\"w-10 h-10 rounded-lg flex items-center justify-center shrink-0 text-sm font-bold\"\n                        style={{\n                          background: `color-mix(in srgb, ${getScoreColor(currentScore)} 15%, transparent)`,\n                          color: getScoreColor(currentScore),\n                        }}\n                      >\n                        {currentScore}\n                      </div>\n                      <div>\n                        <h4\n                          className=\"text-sm font-semibold mb-1\"\n                          style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                        >\n                          {cat.label}\n                        </h4>\n                        <p\n                          className=\"text-xs leading-relaxed mb-2\"\n                          style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n                        >\n                          {explanation.why}\n                        </p>\n                        <p\n                          className=\"text-xs leading-relaxed\"\n                          style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                        >\n                          {explanation.competitors}\n                        </p>\n                      </div>\n                    </div>\n                  </GlassCard>\n                );\n              })}\n            </div>\n          </ScrollReveal>\n        )}\n\n        {/* Before/After comparison cards */}\n        {hasBeforeAfter && (\n          <ScrollReveal y={30} delay={0.3}>\n            <div className=\"grid md:grid-cols-2 gap-4\">\n              <GlassCard padding=\"lg\" hover={false}>\n                <h3\n                  className=\"text-sm font-semibold uppercase tracking-wider mb-4\"\n                  style={{ color: '#ef4444' }}\n                >\n                  Before (Original Site)\n                </h3>\n                <div className=\"grid grid-cols-2 gap-3\">\n                  {CATEGORIES.map((cat) => {\n                    const val = (data.before as any)?.[cat.key];\n                    if (val === undefined) return null;\n                    return (\n                      <div key={cat.key} className=\"text-center\">\n                        <span className=\"text-2xl font-bold\" style={{ color: getScoreColor(val) }}>\n                          {val}\n                        </span>\n                        <span\n                          className=\"block text-[11px] mt-1\"\n                          style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                        >\n                          {cat.label}\n                        </span>\n                      </div>\n                    );\n                  })}\n                </div>\n              </GlassCard>\n              <GlassCard padding=\"lg\" hover={false}>\n                <h3\n                  className=\"text-sm font-semibold uppercase tracking-wider mb-4\"\n                  style={{ color: '#10b981' }}\n                >\n                  After (Next.js Rebuild)\n                </h3>\n                <div className=\"grid grid-cols-2 gap-3\">\n                  {CATEGORIES.map((cat) => {\n                    const val = (data.after as any)?.[cat.key];\n                    if (val === undefined) return null;\n                    return (\n                      <div key={cat.key} className=\"text-center\">\n                        <span className=\"text-2xl font-bold\" style={{ color: getScoreColor(val) }}>\n                          {val}\n                        </span>\n                        <span\n                          className=\"block text-[11px] mt-1\"\n                          style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                        >\n                          {cat.label}\n                        </span>\n                      </div>\n                    );\n                  })}\n                </div>\n              </GlassCard>\n            </div>\n          </ScrollReveal>\n        )}\n\n        {/* Core Web Vitals */}\n        {data.cwv && (data.cwv.lcp != null || data.cwv.cls != null || data.cwv.inp != null) && (\n          <ScrollReveal y={30} delay={0.4}>\n            <div className=\"grid grid-cols-3 gap-4 mt-8\">\n              {data.cwv.lcp != null && (\n                <GlassCard padding=\"md\" hover={false} className=\"text-center\">\n                  <span\n                    className=\"text-2xl font-bold\"\n                    style={{ color: data.cwv.lcp < 2500 ? '#10b981' : data.cwv.lcp < 4000 ? '#f59e0b' : '#ef4444' }}\n                  >\n                    {(data.cwv.lcp / 1000).toFixed(1)}s\n                  </span>\n                  <span\n                    className=\"block text-xs mt-1\"\n                    style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                  >\n                    LCP\n                  </span>\n                </GlassCard>\n              )}\n              {data.cwv.cls != null && (\n                <GlassCard padding=\"md\" hover={false} className=\"text-center\">\n                  <span\n                    className=\"text-2xl font-bold\"\n                    style={{ color: data.cwv.cls < 0.1 ? '#10b981' : data.cwv.cls < 0.25 ? '#f59e0b' : '#ef4444' }}\n                  >\n                    {data.cwv.cls.toFixed(3)}\n                  </span>\n                  <span\n                    className=\"block text-xs mt-1\"\n                    style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                  >\n                    CLS\n                  </span>\n                </GlassCard>\n              )}\n              {data.cwv.inp != null && (\n                <GlassCard padding=\"md\" hover={false} className=\"text-center\">\n                  <span\n                    className=\"text-2xl font-bold\"\n                    style={{ color: data.cwv.inp < 200 ? '#10b981' : data.cwv.inp < 500 ? '#f59e0b' : '#ef4444' }}\n                  >\n                    {data.cwv.inp}ms\n                  </span>\n                  <span\n                    className=\"block text-xs mt-1\"\n                    style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                  >\n                    INP\n                  </span>\n                </GlassCard>\n              )}\n            </div>\n          </ScrollReveal>\n        )}\n      </div>\n    </section>\n  );\n}\n"],"mappings":"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","names":["ScrollReveal","GlassCard"]}

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

@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface LighthouseScores {
+    performance?: number;
+    seo?: number;
+    accessibility?: number;
+    bestPractices?: number;
+}
+interface PerformanceSectionProps {
+    data: {
+        before?: LighthouseScores;
+        after?: LighthouseScores;
+        cwv?: {
+            lcp?: number;
+            cls?: number;
+            inp?: number;
+        };
+    };
+}
+declare function PerformanceSection({ data }: PerformanceSectionProps): React.JSX.Element | null;
+
+export { PerformanceSection as default };

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

@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface LighthouseScores {
+    performance?: number;
+    seo?: number;
+    accessibility?: number;
+    bestPractices?: number;
+}
+interface PerformanceSectionProps {
+    data: {
+        before?: LighthouseScores;
+        after?: LighthouseScores;
+        cwv?: {
+            lcp?: number;
+            cls?: number;
+            inp?: number;
+        };
+    };
+}
+declare function PerformanceSection({ data }: PerformanceSectionProps): React.JSX.Element | null;
+
+export { PerformanceSection as default };