@sonordev/agency-site-kit 0.3.1 → 0.4.1

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/SiteArchitectureSection.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 PageGroup {\n  label: string;\n  count: number;\n  // path is optional: PortfolioPage strips raw client-site paths before they\n  // reach this client component so they never enter the RSC flight payload\n  // (Googlebot crawls path-like strings against the host site → 404 floods).\n  pages: Array<{ path?: string; title: string }>;\n}\n\nexport interface SiteArchitectureData {\n  totalPages: number;\n  totalWords: number;\n  groups: PageGroup[];\n}\n\ninterface SiteArchitectureSectionProps {\n  data: SiteArchitectureData;\n}\n\n/** Generates a pleasing color from the brand palette for each branch */\nfunction getBranchColor(index: number): string {\n  const hues = [\n    'var(--sk-primary, #6366f1)',\n    '#10b981',\n    '#f59e0b',\n    '#8b5cf6',\n    '#ec4899',\n    '#06b6d4',\n    '#f97316',\n    '#14b8a6',\n  ];\n  return hues[index % hues.length];\n}\n\nconst EASE = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'; // ≈ power2.out\nconst EASE_BACK = 'cubic-bezier(0.34, 1.4, 0.64, 1)'; // ≈ back.out(1.4)\n\nexport default function SiteArchitectureSection({ data }: SiteArchitectureSectionProps) {\n  const { totalPages, totalWords, groups } = data;\n  const treeRef = useRef<HTMLDivElement>(null);\n  const [expandedGroup, setExpandedGroup] = useState<number | null>(null);\n\n  // Animate each branch node in on scroll\n  useEffect(() => {\n    const tree = treeRef.current;\n    if (!tree) return;\n    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n\n    // Never re-hide a tree already in the viewport at hydration.\n    const rect = tree.getBoundingClientRect();\n    if (rect.top < window.innerHeight && rect.bottom > 0) return;\n\n    const nodes = Array.from(tree.querySelectorAll<HTMLElement>('.arch-node'));\n    if (nodes.length === 0) return;\n\n    // Hidden state — nodes pop in with a slight back-out overshoot on reveal.\n    for (const node of nodes) {\n      node.style.opacity = '0';\n      node.style.transform = 'translateY(20px) scale(0.8)';\n      node.style.willChange = 'opacity, transform';\n    }\n\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry.isIntersecting) return;\n        io.disconnect();\n        nodes.forEach((node, i) => {\n          const d = i * 0.08;\n          node.style.transition = `opacity 0.5s ${EASE} ${d}s, transform 0.5s ${EASE_BACK} ${d}s`;\n          node.style.opacity = '1';\n          node.style.transform = 'translateY(0px) scale(1)';\n        });\n      },\n      { rootMargin: '0px 0px -30% 0px' }, // ≈ the old 'top 70%' trigger\n    );\n    io.observe(tree);\n\n    return () => {\n      io.disconnect();\n      for (const node of nodes) {\n        node.style.opacity = '';\n        node.style.transform = '';\n        node.style.transition = '';\n        node.style.willChange = '';\n      }\n    };\n  }, [groups.length]);\n\n  const hasWords = totalWords > 0;\n  const subtitle = hasWords\n    ? `${totalPages} pages structured across ${groups.length} content ${groups.length === 1 ? 'category' : 'categories'} with ${totalWords.toLocaleString()} words of content.`\n    : `${totalPages} pages structured across ${groups.length} content ${groups.length === 1 ? 'category' : 'categories'}.`;\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-6xl 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            Site Architecture\n          </h2>\n          <p\n            className=\"text-lg mb-16 max-w-3xl\"\n            style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n          >\n            {subtitle}\n          </p>\n        </ScrollReveal>\n\n        {/* Visual Tree */}\n        <div ref={treeRef} className=\"relative\">\n          {/* Root node — the domain */}\n          <div className=\"flex justify-center mb-8\">\n            <div\n              className=\"arch-node relative px-6 py-3 rounded-xl text-center\"\n              style={{\n                background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 15%, var(--sk-bg, #0a0a0a))',\n                border: '2px solid var(--sk-primary, #6366f1)',\n                boxShadow: '0 0 30px color-mix(in srgb, var(--sk-primary, #6366f1) 20%, transparent)',\n              }}\n            >\n              <span\n                className=\"text-sm font-bold tracking-wide\"\n                style={{ color: 'var(--sk-primary, #6366f1)' }}\n              >\n                /\n              </span>\n              <span\n                className=\"block text-xs mt-0.5\"\n                style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n              >\n                {totalPages} pages\n              </span>\n            </div>\n          </div>\n\n          {/* Branch nodes — each page group */}\n          <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4\">\n            {groups.map((group, gi) => {\n              const color = getBranchColor(gi);\n              const isExpanded = expandedGroup === gi;\n              const hasChildren = group.pages.length > 0;\n\n              return (\n                <div\n                  key={gi}\n                  className=\"arch-node flex flex-col\"\n                >\n                  {/* Branch connector line (vertical from root) */}\n                  <div\n                    className=\"w-px h-6 mx-auto mb-2\"\n                    style={{\n                      background: `linear-gradient(to bottom, color-mix(in srgb, ${color} 40%, transparent), ${color})`,\n                    }}\n                  />\n\n                  {/* Branch node */}\n                  <button\n                    onClick={() => hasChildren && setExpandedGroup(isExpanded ? null : gi)}\n                    className=\"relative rounded-xl p-4 text-left transition-all duration-300 cursor-pointer group\"\n                    style={{\n                      background: `color-mix(in srgb, ${color} 8%, var(--sk-bg, #0a0a0a))`,\n                      border: `1.5px solid color-mix(in srgb, ${color} ${isExpanded ? '40' : '20'}%, transparent)`,\n                      boxShadow: isExpanded\n                        ? `0 0 20px color-mix(in srgb, ${color} 15%, transparent)`\n                        : 'none',\n                    }}\n                  >\n                    {/* Count badge */}\n                    <div\n                      className=\"absolute -top-2.5 -right-2 px-2 py-0.5 rounded-full text-xs font-bold\"\n                      style={{\n                        background: color,\n                        color: '#000',\n                        boxShadow: `0 0 10px color-mix(in srgb, ${color} 40%, transparent)`,\n                      }}\n                    >\n                      {group.count}\n                    </div>\n\n                    <div className=\"flex items-center gap-2\">\n                      {/* Branch icon — folder-like indicator */}\n                      <div\n                        className=\"w-2 h-2 rounded-full shrink-0\"\n                        style={{ background: color }}\n                      />\n                      <span\n                        className=\"text-sm font-semibold truncate\"\n                        style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                      >\n                        {group.label}\n                      </span>\n                    </div>\n\n                    {/* Expand indicator */}\n                    {hasChildren && (\n                      <span\n                        className=\"text-[10px] mt-1 block transition-colors\"\n                        style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                      >\n                        {isExpanded ? 'click to collapse' : `${group.count} ${group.count === 1 ? 'page' : 'pages'} · click to expand`}\n                      </span>\n                    )}\n                  </button>\n\n                  {/* Expanded page list */}\n                  {isExpanded && hasChildren && (\n                    <div\n                      className=\"mt-2 rounded-lg overflow-hidden\"\n                      style={{\n                        background: `color-mix(in srgb, ${color} 5%, var(--sk-bg, #0a0a0a))`,\n                        border: `1px solid color-mix(in srgb, ${color} 15%, transparent)`,\n                      }}\n                    >\n                      {group.pages.map((page, pi) => (\n                        <div\n                          key={pi}\n                          className=\"flex items-center gap-2 px-3 py-1.5\"\n                          style={{\n                            borderBottom:\n                              pi < group.pages.length - 1\n                                ? `1px solid color-mix(in srgb, ${color} 8%, transparent)`\n                                : 'none',\n                          }}\n                        >\n                          <div\n                            className=\"w-1 h-1 rounded-full shrink-0\"\n                            style={{ background: color, opacity: 0.5 }}\n                          />\n                          <span\n                            className=\"text-xs truncate\"\n                            style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                            title={page.title || page.path}\n                          >\n                            {page.title || page.path}\n                          </span>\n                        </div>\n                      ))}\n                      {group.count > group.pages.length && (\n                        <div\n                          className=\"px-3 py-1.5 text-xs italic\"\n                          style={{ color: 'var(--sk-text-tertiary, #71717a)', opacity: 0.6 }}\n                        >\n                          +{group.count - group.pages.length} more pages\n                        </div>\n                      )}\n                    </div>\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        </div>\n\n        {/* Bottom stats bar */}\n        <ScrollReveal y={20} delay={0.4}>\n          <div\n            className=\"mt-12 flex items-center justify-center gap-8 md:gap-12 py-4 px-6 rounded-xl mx-auto max-w-2xl\"\n            style={{\n              background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 5%, var(--sk-bg, #0a0a0a))',\n              border: '1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)',\n            }}\n          >\n            <div className=\"text-center\">\n              <span\n                className=\"text-2xl font-bold block\"\n                style={{ color: 'var(--sk-primary, #6366f1)' }}\n              >\n                {totalPages}\n              </span>\n              <span\n                className=\"text-[10px] uppercase tracking-wider block mt-0.5\"\n                style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n              >\n                Pages\n              </span>\n            </div>\n            <div\n              className=\"w-px h-8\"\n              style={{ background: 'color-mix(in srgb, var(--sk-text-tertiary, #71717a) 20%, transparent)' }}\n            />\n            <div className=\"text-center\">\n              <span\n                className=\"text-2xl font-bold block\"\n                style={{ color: 'var(--sk-primary, #6366f1)' }}\n              >\n                {groups.length}\n              </span>\n              <span\n                className=\"text-[10px] uppercase tracking-wider block mt-0.5\"\n                style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n              >\n                Categories\n              </span>\n            </div>\n            {hasWords && (\n              <>\n                <div\n                  className=\"w-px h-8\"\n                  style={{ background: 'color-mix(in srgb, var(--sk-text-tertiary, #71717a) 20%, transparent)' }}\n                />\n                <div className=\"text-center\">\n                  <span\n                    className=\"text-2xl font-bold block\"\n                    style={{ color: 'var(--sk-primary, #6366f1)' }}\n                  >\n                    {totalWords > 1000 ? `${(totalWords / 1000).toFixed(0)}k` : totalWords}\n                  </span>\n                  <span\n                    className=\"text-[10px] uppercase tracking-wider block mt-0.5\"\n                    style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                  >\n                    Words\n                  </span>\n                </div>\n              </>\n            )}\n          </div>\n        </ScrollReveal>\n      </div>\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{SpeedComparisonSection-EZKFQVGW.cjs → portfolio/sections/SpeedComparisonSection.cjs}

@@ -1,11 +1,17 @@
 'use strict';
 
-var chunkKEOHORIH_cjs = require('./chunk-KEOHORIH.cjs');
-var chunkIKBK7HYX_cjs = require('./chunk-IKBK7HYX.cjs');
+var ScrollReveal = require('@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal');
+var GlassCard = require('@sonordev/agency-site-kit/portfolio/primitives/GlassCard');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var ScrollReveal__default = /*#__PURE__*/_interopDefault(ScrollReveal);
+var GlassCard__default = /*#__PURE__*/_interopDefault(GlassCard);
+
+// src/portfolio/components/sections/SpeedComparisonSection.tsx
 var CATEGORIES = [
-  { key: "performance", label: "Performance", why: "Faster sites convert better \u2014 every 100ms of improvement increases conversions by up to 8%." },
+  { key: "performance", label: "Performance", why: "Faster sites convert better: every 100ms of improvement increases conversions by up to 8%." },
   { key: "seo", label: "SEO", why: "Higher SEO scores mean better search rankings, more organic traffic, and lower customer acquisition costs." },
   { key: "accessibility", label: "Accessibility", why: "Accessible sites reach 15-20% more users and reduce legal liability." },
   { key: "bestPractices", label: "Best Practices", why: "Modern security headers, HTTPS, and optimized assets build trust and protect users." }
@@ -67,7 +73,7 @@ function SpeedComparisonSection({ data }) {
       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.jsxs(ScrollReveal__default.default, { y: 30, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "h2",
             {
@@ -104,7 +110,7 @@ function SpeedComparisonSection({ data }) {
           const ours = actual[cat.key];
           const theirs = benchmarks[cat.key];
           const diff = ours - theirs;
-          return /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 20, delay: ci * 0.1, children: /* @__PURE__ */ jsxRuntime.jsx(chunkKEOHORIH_cjs.GlassCard, { padding: "lg", hover: false, className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-5", children: [
+          return /* @__PURE__ */ jsxRuntime.jsx(ScrollReveal__default.default, { y: 20, delay: ci * 0.1, children: /* @__PURE__ */ jsxRuntime.jsx(GlassCard__default.default, { padding: "lg", hover: false, className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-5", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3 shrink-0", children: [
               /* @__PURE__ */ jsxRuntime.jsx(ScoreRing, { score: ours }),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -170,5 +176,5 @@ function SpeedComparisonSection({ data }) {
 }
 
 module.exports = SpeedComparisonSection;
-//# sourceMappingURL=SpeedComparisonSection-EZKFQVGW.cjs.map
-//# sourceMappingURL=SpeedComparisonSection-EZKFQVGW.cjs.map
+//# sourceMappingURL=SpeedComparisonSection.cjs.map
+//# sourceMappingURL=SpeedComparisonSection.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/SpeedComparisonSection.tsx"],"names":["jsxs","jsx","ScrollReveal","GlassCard"],"mappings":"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","file":"SpeedComparisonSection.cjs","sourcesContent":["// Server component — renders on the server; the client primitives below cross the\n// RSC boundary via package subpaths (never import them relatively here).\nimport React from 'react';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\n\ninterface Scores {\n  performance: number;\n  seo: number;\n  accessibility: number;\n  bestPractices: number;\n}\n\nexport interface SpeedComparisonData {\n  platform: string;\n  platformLabel: string;\n  benchmarks: Scores;\n  actual: Scores;\n}\n\ninterface SpeedComparisonSectionProps {\n  data: SpeedComparisonData;\n}\n\nconst CATEGORIES: Array<{ key: keyof Scores; label: string; why: string }> = [\n  { key: 'performance', label: 'Performance', why: 'Faster sites convert better: every 100ms of improvement increases conversions by up to 8%.' },\n  { key: 'seo', label: 'SEO', why: 'Higher SEO scores mean better search rankings, more organic traffic, and lower customer acquisition costs.' },\n  { key: 'accessibility', label: 'Accessibility', why: 'Accessible sites reach 15-20% more users and reduce legal liability.' },\n  { key: 'bestPractices', label: 'Best Practices', why: 'Modern security headers, HTTPS, and optimized assets build trust and protect users.' },\n];\n\nfunction getScoreColor(score: number): string {\n  if (score >= 90) return '#10b981';\n  if (score >= 50) return '#f59e0b';\n  return '#ef4444';\n}\n\n/** Circular score gauge */\nfunction ScoreRing({ score, size = 72 }: { score: number; size?: number }) {\n  const strokeWidth = 5;\n  const radius = (size - strokeWidth) / 2;\n  const circumference = 2 * Math.PI * radius;\n  const progress = (score / 100) * circumference;\n  const color = getScoreColor(score);\n\n  return (\n    <div className=\"relative\" style={{ width: size, height: size }}>\n      <svg width={size} height={size} className=\"transform -rotate-90\">\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={strokeWidth}\n          style={{ color: 'color-mix(in srgb, var(--sk-text-tertiary, #71717a) 20%, transparent)' }}\n        />\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          fill=\"none\"\n          stroke={color}\n          strokeWidth={strokeWidth}\n          strokeDasharray={`${progress} ${circumference - progress}`}\n          strokeLinecap=\"round\"\n        />\n      </svg>\n      <span\n        className=\"absolute inset-0 flex items-center justify-center text-lg font-bold\"\n        style={{ color }}\n      >\n        {score}\n      </span>\n    </div>\n  );\n}\n\nexport default function SpeedComparisonSection({ data }: SpeedComparisonSectionProps) {\n  const { platformLabel, benchmarks, actual } = data;\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            Why This Matters\n          </h2>\n          <p\n            className=\"text-lg mb-4 max-w-3xl\"\n            style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n          >\n            Lighthouse measures real-world site quality across performance, SEO, accessibility, and best practices.\n            These scores directly impact search rankings, conversion rates, and user experience.\n          </p>\n          <p\n            className=\"text-base mb-12 max-w-3xl\"\n            style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n          >\n            Here&apos;s how this Next.js build compares to the average {platformLabel} site.\n          </p>\n        </ScrollReveal>\n\n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n          {CATEGORIES.map((cat, ci) => {\n            const ours = actual[cat.key];\n            const theirs = benchmarks[cat.key];\n            const diff = ours - theirs;\n\n            return (\n              <ScrollReveal key={cat.key} y={20} delay={ci * 0.1}>\n                <GlassCard padding=\"lg\" hover={false} className=\"h-full\">\n                  <div className=\"flex items-start gap-5\">\n                    {/* Score rings side by side */}\n                    <div className=\"flex flex-col items-center gap-3 shrink-0\">\n                      <ScoreRing score={ours} />\n                      <span\n                        className=\"text-[10px] font-medium uppercase tracking-wider\"\n                        style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                      >\n                        Next.js\n                      </span>\n                    </div>\n                    <div className=\"flex flex-col items-center gap-3 shrink-0\">\n                      <ScoreRing score={theirs} />\n                      <span\n                        className=\"text-[10px] font-medium uppercase tracking-wider\"\n                        style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                      >\n                        {platformLabel}\n                      </span>\n                    </div>\n\n                    {/* Details */}\n                    <div className=\"flex-1 min-w-0\">\n                      <div className=\"flex items-center gap-2 mb-2\">\n                        <h3\n                          className=\"text-base font-semibold\"\n                          style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                        >\n                          {cat.label}\n                        </h3>\n                        {diff > 0 && (\n                          <span\n                            className=\"text-xs font-bold px-2 py-0.5 rounded-full\"\n                            style={{\n                              background: 'color-mix(in srgb, #10b981 15%, transparent)',\n                              color: '#10b981',\n                            }}\n                          >\n                            +{diff} pts\n                          </span>\n                        )}\n                      </div>\n                      <p\n                        className=\"text-sm leading-relaxed\"\n                        style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                      >\n                        {cat.why}\n                      </p>\n                    </div>\n                  </div>\n                </GlassCard>\n              </ScrollReveal>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n"]}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface Scores {
+    performance: number;
+    seo: number;
+    accessibility: number;
+    bestPractices: number;
+}
+interface SpeedComparisonData {
+    platform: string;
+    platformLabel: string;
+    benchmarks: Scores;
+    actual: Scores;
+}
+interface SpeedComparisonSectionProps {
+    data: SpeedComparisonData;
+}
+declare function SpeedComparisonSection({ data }: SpeedComparisonSectionProps): React.JSX.Element;
+
+export { type SpeedComparisonData, SpeedComparisonSection as default };

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

@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface Scores {
+    performance: number;
+    seo: number;
+    accessibility: number;
+    bestPractices: number;
+}
+interface SpeedComparisonData {
+    platform: string;
+    platformLabel: string;
+    benchmarks: Scores;
+    actual: Scores;
+}
+interface SpeedComparisonSectionProps {
+    data: SpeedComparisonData;
+}
+declare function SpeedComparisonSection({ data }: SpeedComparisonSectionProps): React.JSX.Element;
+
+export { type SpeedComparisonData, SpeedComparisonSection as default };

package/dist/{SpeedComparisonSection-Y3K7OFZQ.js → portfolio/sections/SpeedComparisonSection.js}

@@ -1,9 +1,10 @@
-import { GlassCard } from './chunk-YB4B3OMC.js';
-import { ScrollReveal } from './chunk-7CFFAKDM.js';
+import ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';
+import GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+// src/portfolio/components/sections/SpeedComparisonSection.tsx
 var CATEGORIES = [
-  { key: "performance", label: "Performance", why: "Faster sites convert better \u2014 every 100ms of improvement increases conversions by up to 8%." },
+  { key: "performance", label: "Performance", why: "Faster sites convert better: every 100ms of improvement increases conversions by up to 8%." },
   { key: "seo", label: "SEO", why: "Higher SEO scores mean better search rankings, more organic traffic, and lower customer acquisition costs." },
   { key: "accessibility", label: "Accessibility", why: "Accessible sites reach 15-20% more users and reduce legal liability." },
   { key: "bestPractices", label: "Best Practices", why: "Modern security headers, HTTPS, and optimized assets build trust and protect users." }
@@ -168,5 +169,5 @@ function SpeedComparisonSection({ data }) {
 }
 
 export { SpeedComparisonSection as default };
-//# sourceMappingURL=SpeedComparisonSection-Y3K7OFZQ.js.map
-//# sourceMappingURL=SpeedComparisonSection-Y3K7OFZQ.js.map
+//# sourceMappingURL=SpeedComparisonSection.js.map
+//# sourceMappingURL=SpeedComparisonSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/SpeedComparisonSection.tsx"],"names":[],"mappings":"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","file":"SpeedComparisonSection.js","sourcesContent":["// Server component — renders on the server; the client primitives below cross the\n// RSC boundary via package subpaths (never import them relatively here).\nimport React from 'react';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\n\ninterface Scores {\n  performance: number;\n  seo: number;\n  accessibility: number;\n  bestPractices: number;\n}\n\nexport interface SpeedComparisonData {\n  platform: string;\n  platformLabel: string;\n  benchmarks: Scores;\n  actual: Scores;\n}\n\ninterface SpeedComparisonSectionProps {\n  data: SpeedComparisonData;\n}\n\nconst CATEGORIES: Array<{ key: keyof Scores; label: string; why: string }> = [\n  { key: 'performance', label: 'Performance', why: 'Faster sites convert better: every 100ms of improvement increases conversions by up to 8%.' },\n  { key: 'seo', label: 'SEO', why: 'Higher SEO scores mean better search rankings, more organic traffic, and lower customer acquisition costs.' },\n  { key: 'accessibility', label: 'Accessibility', why: 'Accessible sites reach 15-20% more users and reduce legal liability.' },\n  { key: 'bestPractices', label: 'Best Practices', why: 'Modern security headers, HTTPS, and optimized assets build trust and protect users.' },\n];\n\nfunction getScoreColor(score: number): string {\n  if (score >= 90) return '#10b981';\n  if (score >= 50) return '#f59e0b';\n  return '#ef4444';\n}\n\n/** Circular score gauge */\nfunction ScoreRing({ score, size = 72 }: { score: number; size?: number }) {\n  const strokeWidth = 5;\n  const radius = (size - strokeWidth) / 2;\n  const circumference = 2 * Math.PI * radius;\n  const progress = (score / 100) * circumference;\n  const color = getScoreColor(score);\n\n  return (\n    <div className=\"relative\" style={{ width: size, height: size }}>\n      <svg width={size} height={size} className=\"transform -rotate-90\">\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={strokeWidth}\n          style={{ color: 'color-mix(in srgb, var(--sk-text-tertiary, #71717a) 20%, transparent)' }}\n        />\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          fill=\"none\"\n          stroke={color}\n          strokeWidth={strokeWidth}\n          strokeDasharray={`${progress} ${circumference - progress}`}\n          strokeLinecap=\"round\"\n        />\n      </svg>\n      <span\n        className=\"absolute inset-0 flex items-center justify-center text-lg font-bold\"\n        style={{ color }}\n      >\n        {score}\n      </span>\n    </div>\n  );\n}\n\nexport default function SpeedComparisonSection({ data }: SpeedComparisonSectionProps) {\n  const { platformLabel, benchmarks, actual } = data;\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            Why This Matters\n          </h2>\n          <p\n            className=\"text-lg mb-4 max-w-3xl\"\n            style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n          >\n            Lighthouse measures real-world site quality across performance, SEO, accessibility, and best practices.\n            These scores directly impact search rankings, conversion rates, and user experience.\n          </p>\n          <p\n            className=\"text-base mb-12 max-w-3xl\"\n            style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n          >\n            Here&apos;s how this Next.js build compares to the average {platformLabel} site.\n          </p>\n        </ScrollReveal>\n\n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n          {CATEGORIES.map((cat, ci) => {\n            const ours = actual[cat.key];\n            const theirs = benchmarks[cat.key];\n            const diff = ours - theirs;\n\n            return (\n              <ScrollReveal key={cat.key} y={20} delay={ci * 0.1}>\n                <GlassCard padding=\"lg\" hover={false} className=\"h-full\">\n                  <div className=\"flex items-start gap-5\">\n                    {/* Score rings side by side */}\n                    <div className=\"flex flex-col items-center gap-3 shrink-0\">\n                      <ScoreRing score={ours} />\n                      <span\n                        className=\"text-[10px] font-medium uppercase tracking-wider\"\n                        style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                      >\n                        Next.js\n                      </span>\n                    </div>\n                    <div className=\"flex flex-col items-center gap-3 shrink-0\">\n                      <ScoreRing score={theirs} />\n                      <span\n                        className=\"text-[10px] font-medium uppercase tracking-wider\"\n                        style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                      >\n                        {platformLabel}\n                      </span>\n                    </div>\n\n                    {/* Details */}\n                    <div className=\"flex-1 min-w-0\">\n                      <div className=\"flex items-center gap-2 mb-2\">\n                        <h3\n                          className=\"text-base font-semibold\"\n                          style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                        >\n                          {cat.label}\n                        </h3>\n                        {diff > 0 && (\n                          <span\n                            className=\"text-xs font-bold px-2 py-0.5 rounded-full\"\n                            style={{\n                              background: 'color-mix(in srgb, #10b981 15%, transparent)',\n                              color: '#10b981',\n                            }}\n                          >\n                            +{diff} pts\n                          </span>\n                        )}\n                      </div>\n                      <p\n                        className=\"text-sm leading-relaxed\"\n                        style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                      >\n                        {cat.why}\n                      </p>\n                    </div>\n                  </div>\n                </GlassCard>\n              </ScrollReveal>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/portfolio/sections/StrategySection.cjs

@@ -0,0 +1,233 @@
+'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/StrategySection.tsx
+var StrategySection_exports = {};
+__export(StrategySection_exports, {
+  default: () => StrategySection
+});
+module.exports = __toCommonJS(StrategySection_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");
+function StrategySection({ data }) {
+  const timelineRef = (0, import_react.useRef)(null);
+  const sectionRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const line = timelineRef.current;
+    const section = sectionRef.current;
+    if (!line || !section) return;
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (prefersReducedMotion) return;
+    const progressAt = () => {
+      const rect = section.getBoundingClientRect();
+      const vh = window.innerHeight;
+      const scrolled = vh * 0.6 - rect.top;
+      const range = Math.max(rect.height - vh * 0.2, 1);
+      return Math.min(1, Math.max(0, scrolled / range));
+    };
+    line.style.transformOrigin = "top center";
+    line.style.willChange = "transform";
+    let current = progressAt();
+    line.style.transform = `scaleY(${current})`;
+    let raf = 0;
+    let last = 0;
+    const step = (now) => {
+      raf = 0;
+      const dt = last ? Math.min((now - last) / 1e3, 0.1) : 1 / 60;
+      last = now;
+      const target = progressAt();
+      current += (target - current) * Math.min(1, dt * 3);
+      if (Math.abs(target - current) < 1e-3) current = target;
+      line.style.transform = `scaleY(${current})`;
+      if (current !== target) raf = requestAnimationFrame(step);
+    };
+    const onScroll = () => {
+      if (!raf) {
+        last = 0;
+        raf = requestAnimationFrame(step);
+      }
+    };
+    const io = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) {
+        window.addEventListener("scroll", onScroll, { passive: true });
+        window.addEventListener("resize", onScroll);
+        onScroll();
+      } else {
+        window.removeEventListener("scroll", onScroll);
+        window.removeEventListener("resize", onScroll);
+      }
+    });
+    io.observe(section);
+    return () => {
+      io.disconnect();
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+      cancelAnimationFrame(raf);
+      line.style.transformOrigin = "";
+      line.style.willChange = "";
+      line.style.transform = "";
+    };
+  }, [data.phases.length]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "section",
+    {
+      className: "w-full py-20 md:py-28",
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "max-w-5xl mx-auto px-6", children: [
+        /* @__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",
+              style: {
+                color: "var(--sk-text-primary, #ffffff)",
+                fontFamily: "var(--sk-font-heading, inherit)"
+              },
+              children: "Our Strategy"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "p",
+            {
+              className: "text-lg mb-16 max-w-2xl",
+              style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+              children: "A phased approach to delivering measurable results."
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: sectionRef, className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              ref: timelineRef,
+              className: "absolute top-0 bottom-0 hidden md:block pointer-events-none w-12 md:w-16",
+              style: { left: 0 },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: "absolute top-0 bottom-0",
+                  style: {
+                    left: "50%",
+                    transform: "translateX(-50%)",
+                    width: "2px",
+                    background: "var(--sk-primary, #6366f1)",
+                    opacity: 0.3
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-12", children: data.phases.map((phase, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollReveal.default, { y: 40, delay: index * 0.15, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-6 md:gap-8", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col items-center shrink-0 w-12 md:w-16", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: "flex items-center justify-center w-12 h-12 md:w-16 md:h-16 rounded-full text-lg md:text-xl font-bold z-10",
+                style: {
+                  background: "var(--sk-bg, #0a0a0a)",
+                  border: "3px solid var(--sk-primary, #6366f1)",
+                  color: "var(--sk-primary, #6366f1)",
+                  boxShadow: "0 0 20px color-mix(in srgb, var(--sk-primary, #6366f1) 30%, transparent)"
+                },
+                children: phase.number
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlassCard.default, { padding: "lg", hover: false, className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3 flex-wrap", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "h3",
+                  {
+                    className: "text-xl font-semibold",
+                    style: { color: "var(--sk-text-primary, #ffffff)" },
+                    children: phase.title
+                  }
+                ),
+                phase.timeline && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
+                  {
+                    className: "px-3 py-0.5 rounded-full text-xs font-medium",
+                    style: {
+                      background: "color-mix(in srgb, var(--sk-primary, #6366f1) 12%, transparent)",
+                      color: "var(--sk-primary, #6366f1)",
+                      border: "1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 20%, transparent)"
+                    },
+                    children: phase.timeline
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "p",
+                {
+                  className: "text-base leading-relaxed",
+                  style: { color: "var(--sk-text-tertiary, #71717a)" },
+                  children: phase.description
+                }
+              ),
+              phase.deliverables && phase.deliverables.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "flex flex-col gap-2 mt-2", children: phase.deliverables.map((deliverable, di) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "flex items-start gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "svg",
+                  {
+                    width: "18",
+                    height: "18",
+                    viewBox: "0 0 18 18",
+                    fill: "none",
+                    className: "shrink-0 mt-0.5",
+                    style: { color: "#10b981" },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "path",
+                      {
+                        d: "M15 4.5L6.75 12.75 3 9",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
+                  {
+                    className: "text-sm",
+                    style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+                    children: deliverable
+                  }
+                )
+              ] }, di)) })
+            ] }) })
+          ] }) }, index)) })
+        ] })
+      ] })
+    }
+  );
+}
+//# sourceMappingURL=StrategySection.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/StrategySection.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect } from 'react';\nimport type { PortfolioStrategyData } from '../../../types';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\n\ninterface StrategySectionProps {\n  data: PortfolioStrategyData;\n}\n\nexport default function StrategySection({ data }: StrategySectionProps) {\n  const timelineRef = useRef<HTMLDivElement>(null);\n  const sectionRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const line = timelineRef.current;\n    const section = sectionRef.current;\n    if (!line || !section) return;\n\n    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    if (prefersReducedMotion) return;\n\n    // Scroll-scrubbed timeline line draw via scaleY: progress maps the range\n    // \"section top at 60% of the viewport\" → \"section bottom at 40%\", with a\n    // time-based catch-up (~1s to converge) matching the old scrubbed feel.\n    const progressAt = () => {\n      const rect = section.getBoundingClientRect();\n      const vh = window.innerHeight;\n      const scrolled = vh * 0.6 - rect.top;\n      const range = Math.max(rect.height - vh * 0.2, 1);\n      return Math.min(1, Math.max(0, scrolled / range));\n    };\n\n    line.style.transformOrigin = 'top center';\n    line.style.willChange = 'transform';\n\n    // Snap to the progress for the current scroll position, so content\n    // already in the viewport at hydration is never re-hidden.\n    let current = progressAt();\n    line.style.transform = `scaleY(${current})`;\n\n    let raf = 0;\n    let last = 0;\n\n    const step = (now: number) => {\n      raf = 0;\n      const dt = last ? Math.min((now - last) / 1000, 0.1) : 1 / 60;\n      last = now;\n      const target = progressAt();\n      current += (target - current) * Math.min(1, dt * 3);\n      if (Math.abs(target - current) < 0.001) current = target;\n      line.style.transform = `scaleY(${current})`;\n      if (current !== target) raf = requestAnimationFrame(step);\n    };\n\n    const onScroll = () => {\n      if (!raf) {\n        last = 0;\n        raf = requestAnimationFrame(step);\n      }\n    };\n\n    // Only do per-scroll work while the section is near the viewport.\n    const io = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting) {\n        window.addEventListener('scroll', onScroll, { passive: true });\n        window.addEventListener('resize', onScroll);\n        onScroll();\n      } else {\n        window.removeEventListener('scroll', onScroll);\n        window.removeEventListener('resize', onScroll);\n      }\n    });\n    io.observe(section);\n\n    return () => {\n      io.disconnect();\n      window.removeEventListener('scroll', onScroll);\n      window.removeEventListener('resize', onScroll);\n      cancelAnimationFrame(raf);\n      line.style.transformOrigin = '';\n      line.style.willChange = '';\n      line.style.transform = '';\n    };\n  }, [data.phases.length]);\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            Our Strategy\n          </h2>\n          <p\n            className=\"text-lg mb-16 max-w-2xl\"\n            style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n          >\n            A phased approach to delivering measurable results.\n          </p>\n        </ScrollReveal>\n\n        <div ref={sectionRef} className=\"relative\">\n          {/* Vertical timeline line — uses the circle column width to find center */}\n          <div\n            ref={timelineRef}\n            className=\"absolute top-0 bottom-0 hidden md:block pointer-events-none w-12 md:w-16\"\n            style={{ left: 0 }}\n          >\n            <div\n              className=\"absolute top-0 bottom-0\"\n              style={{\n                left: '50%',\n                transform: 'translateX(-50%)',\n                width: '2px',\n                background: 'var(--sk-primary, #6366f1)',\n                opacity: 0.3,\n              }}\n            />\n          </div>\n\n          <div className=\"flex flex-col gap-12\">\n            {data.phases.map((phase, index) => (\n              <ScrollReveal key={index} y={40} delay={index * 0.15}>\n                <div className=\"flex gap-6 md:gap-8\">\n                  {/* Number circle — fixed-width column so line can center on it */}\n                  <div className=\"flex flex-col items-center shrink-0 w-12 md:w-16\">\n                    <div\n                      className=\"flex items-center justify-center w-12 h-12 md:w-16 md:h-16 rounded-full text-lg md:text-xl font-bold z-10\"\n                      style={{\n                        background: 'var(--sk-bg, #0a0a0a)',\n                        border: '3px solid var(--sk-primary, #6366f1)',\n                        color: 'var(--sk-primary, #6366f1)',\n                        boxShadow: '0 0 20px color-mix(in srgb, var(--sk-primary, #6366f1) 30%, transparent)',\n                      }}\n                    >\n                      {phase.number}\n                    </div>\n                  </div>\n\n                  {/* Phase content */}\n                  <GlassCard padding=\"lg\" hover={false} className=\"flex-1\">\n                    <div className=\"flex flex-col gap-3\">\n                      <div className=\"flex items-center gap-3 flex-wrap\">\n                        <h3\n                          className=\"text-xl font-semibold\"\n                          style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                        >\n                          {phase.title}\n                        </h3>\n                        {phase.timeline && (\n                          <span\n                            className=\"px-3 py-0.5 rounded-full text-xs font-medium\"\n                            style={{\n                              background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 12%, transparent)',\n                              color: 'var(--sk-primary, #6366f1)',\n                              border: '1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 20%, transparent)',\n                            }}\n                          >\n                            {phase.timeline}\n                          </span>\n                        )}\n                      </div>\n\n                      <p\n                        className=\"text-base leading-relaxed\"\n                        style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                      >\n                        {phase.description}\n                      </p>\n\n                      {/* Deliverables */}\n                      {phase.deliverables && phase.deliverables.length > 0 && (\n                        <ul className=\"flex flex-col gap-2 mt-2\">\n                          {phase.deliverables.map((deliverable, di) => (\n                            <li key={di} className=\"flex items-start gap-2\">\n                              <svg\n                                width=\"18\"\n                                height=\"18\"\n                                viewBox=\"0 0 18 18\"\n                                fill=\"none\"\n                                className=\"shrink-0 mt-0.5\"\n                                style={{ color: '#10b981' }}\n                              >\n                                <path\n                                  d=\"M15 4.5L6.75 12.75 3 9\"\n                                  stroke=\"currentColor\"\n                                  strokeWidth=\"2\"\n                                  strokeLinecap=\"round\"\n                                  strokeLinejoin=\"round\"\n                                />\n                              </svg>\n                              <span\n                                className=\"text-sm\"\n                                style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n                              >\n                                {deliverable}\n                              </span>\n                            </li>\n                          ))}\n                        </ul>\n                      )}\n                    </div>\n                  </GlassCard>\n                </div>\n              </ScrollReveal>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAyC;AAEzC,0BAAyB;AACzB,uBAAsB;AAwFd;AAlFO,SAAR,gBAAiC,EAAE,KAAK,GAAyB;AACtE,QAAM,kBAAc,qBAAuB,IAAI;AAC/C,QAAM,iBAAa,qBAAuB,IAAI;AAE9C,8BAAU,MAAM;AACd,UAAM,OAAO,YAAY;AACzB,UAAM,UAAU,WAAW;AAC3B,QAAI,CAAC,QAAQ,CAAC,QAAS;AAEvB,UAAM,uBAAuB,OAAO,WAAW,kCAAkC,EAAE;AACnF,QAAI,qBAAsB;AAK1B,UAAM,aAAa,MAAM;AACvB,YAAM,OAAO,QAAQ,sBAAsB;AAC3C,YAAM,KAAK,OAAO;AAClB,YAAM,WAAW,KAAK,MAAM,KAAK;AACjC,YAAM,QAAQ,KAAK,IAAI,KAAK,SAAS,KAAK,KAAK,CAAC;AAChD,aAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,WAAW,KAAK,CAAC;AAAA,IAClD;AAEA,SAAK,MAAM,kBAAkB;AAC7B,SAAK,MAAM,aAAa;AAIxB,QAAI,UAAU,WAAW;AACzB,SAAK,MAAM,YAAY,UAAU,OAAO;AAExC,QAAI,MAAM;AACV,QAAI,OAAO;AAEX,UAAM,OAAO,CAAC,QAAgB;AAC5B,YAAM;AACN,YAAM,KAAK,OAAO,KAAK,KAAK,MAAM,QAAQ,KAAM,GAAG,IAAI,IAAI;AAC3D,aAAO;AACP,YAAM,SAAS,WAAW;AAC1B,kBAAY,SAAS,WAAW,KAAK,IAAI,GAAG,KAAK,CAAC;AAClD,UAAI,KAAK,IAAI,SAAS,OAAO,IAAI,KAAO,WAAU;AAClD,WAAK,MAAM,YAAY,UAAU,OAAO;AACxC,UAAI,YAAY,OAAQ,OAAM,sBAAsB,IAAI;AAAA,IAC1D;AAEA,UAAM,WAAW,MAAM;AACrB,UAAI,CAAC,KAAK;AACR,eAAO;AACP,cAAM,sBAAsB,IAAI;AAAA,MAClC;AAAA,IACF;AAGA,UAAM,KAAK,IAAI,qBAAqB,CAAC,CAAC,KAAK,MAAM;AAC/C,UAAI,MAAM,gBAAgB;AACxB,eAAO,iBAAiB,UAAU,UAAU,EAAE,SAAS,KAAK,CAAC;AAC7D,eAAO,iBAAiB,UAAU,QAAQ;AAC1C,iBAAS;AAAA,MACX,OAAO;AACL,eAAO,oBAAoB,UAAU,QAAQ;AAC7C,eAAO,oBAAoB,UAAU,QAAQ;AAAA,MAC/C;AAAA,IACF,CAAC;AACD,OAAG,QAAQ,OAAO;AAElB,WAAO,MAAM;AACX,SAAG,WAAW;AACd,aAAO,oBAAoB,UAAU,QAAQ;AAC7C,aAAO,oBAAoB,UAAU,QAAQ;AAC7C,2BAAqB,GAAG;AACxB,WAAK,MAAM,kBAAkB;AAC7B,WAAK,MAAM,aAAa;AACxB,WAAK,MAAM,YAAY;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,KAAK,OAAO,MAAM,CAAC;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,YAAY,wBAAwB;AAAA,MAE7C,uDAAC,SAAI,WAAU,0BACb;AAAA,qDAAC,oBAAAA,SAAA,EAAa,GAAG,IACf;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO;AAAA,gBACP,YAAY;AAAA,cACd;AAAA,cACD;AAAA;AAAA,UAED;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,OAAO,oCAAoC;AAAA,cACrD;AAAA;AAAA,UAED;AAAA,WACF;AAAA,QAEA,6CAAC,SAAI,KAAK,YAAY,WAAU,YAE9B;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,WAAU;AAAA,cACV,OAAO,EAAE,MAAM,EAAE;AAAA,cAEjB;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,MAAM;AAAA,oBACN,WAAW;AAAA,oBACX,OAAO;AAAA,oBACP,YAAY;AAAA,oBACZ,SAAS;AAAA,kBACX;AAAA;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UAEA,4CAAC,SAAI,WAAU,wBACZ,eAAK,OAAO,IAAI,CAAC,OAAO,UACvB,4CAAC,oBAAAA,SAAA,EAAyB,GAAG,IAAI,OAAO,QAAQ,MAC9C,uDAAC,SAAI,WAAU,uBAEb;AAAA,wDAAC,SAAI,WAAU,oDACb;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,YAAY;AAAA,kBACZ,QAAQ;AAAA,kBACR,OAAO;AAAA,kBACP,WAAW;AAAA,gBACb;AAAA,gBAEC,gBAAM;AAAA;AAAA,YACT,GACF;AAAA,YAGA,4CAAC,iBAAAC,SAAA,EAAU,SAAQ,MAAK,OAAO,OAAO,WAAU,UAC9C,uDAAC,SAAI,WAAU,uBACb;AAAA,2DAAC,SAAI,WAAU,qCACb;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO,EAAE,OAAO,kCAAkC;AAAA,oBAEjD,gBAAM;AAAA;AAAA,gBACT;AAAA,gBACC,MAAM,YACL;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO;AAAA,sBACL,YAAY;AAAA,sBACZ,OAAO;AAAA,sBACP,QAAQ;AAAA,oBACV;AAAA,oBAEC,gBAAM;AAAA;AAAA,gBACT;AAAA,iBAEJ;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO,EAAE,OAAO,mCAAmC;AAAA,kBAElD,gBAAM;AAAA;AAAA,cACT;AAAA,cAGC,MAAM,gBAAgB,MAAM,aAAa,SAAS,KACjD,4CAAC,QAAG,WAAU,4BACX,gBAAM,aAAa,IAAI,CAAC,aAAa,OACpC,6CAAC,QAAY,WAAU,0BACrB;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAM;AAAA,oBACN,QAAO;AAAA,oBACP,SAAQ;AAAA,oBACR,MAAK;AAAA,oBACL,WAAU;AAAA,oBACV,OAAO,EAAE,OAAO,UAAU;AAAA,oBAE1B;AAAA,sBAAC;AAAA;AAAA,wBACC,GAAE;AAAA,wBACF,QAAO;AAAA,wBACP,aAAY;AAAA,wBACZ,eAAc;AAAA,wBACd,gBAAe;AAAA;AAAA,oBACjB;AAAA;AAAA,gBACF;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO,EAAE,OAAO,oCAAoC;AAAA,oBAEnD;AAAA;AAAA,gBACH;AAAA,mBAtBO,EAuBT,CACD,GACH;AAAA,eAEJ,GACF;AAAA,aACF,KAjFiB,KAkFnB,CACD,GACH;AAAA,WACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;","names":["ScrollReveal","GlassCard"]}

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

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

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

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

package/dist/{StrategySection-DI5RSCJU.js → portfolio/sections/StrategySection.js}

@@ -1,35 +1,69 @@
 'use client';
-import { GlassCard } from './chunk-YB4B3OMC.js';
-import { ScrollReveal } from './chunk-7CFFAKDM.js';
-import { useRef, useEffect } from 'react';
-import gsap from 'gsap';
-import { ScrollTrigger } from 'gsap/ScrollTrigger';
-import { jsx, jsxs } from 'react/jsx-runtime';
+"use client";
 
+// src/portfolio/components/sections/StrategySection.tsx
+import { useRef, useEffect } from "react";
+import ScrollReveal from "@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal";
+import GlassCard from "@sonordev/agency-site-kit/portfolio/primitives/GlassCard";
+import { jsx, jsxs } from "react/jsx-runtime";
 function StrategySection({ data }) {
   const timelineRef = useRef(null);
   const sectionRef = useRef(null);
   useEffect(() => {
-    gsap.registerPlugin(ScrollTrigger);
+    const line = timelineRef.current;
+    const section = sectionRef.current;
+    if (!line || !section) return;
     const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
     if (prefersReducedMotion) return;
-    const ctx = gsap.context(() => {
-      const line = timelineRef.current;
-      if (line) {
-        gsap.set(line, { scaleY: 0, transformOrigin: "top center" });
-        gsap.to(line, {
-          scaleY: 1,
-          ease: "none",
-          scrollTrigger: {
-            trigger: sectionRef.current,
-            start: "top 60%",
-            end: "bottom 40%",
-            scrub: 1
-          }
-        });
+    const progressAt = () => {
+      const rect = section.getBoundingClientRect();
+      const vh = window.innerHeight;
+      const scrolled = vh * 0.6 - rect.top;
+      const range = Math.max(rect.height - vh * 0.2, 1);
+      return Math.min(1, Math.max(0, scrolled / range));
+    };
+    line.style.transformOrigin = "top center";
+    line.style.willChange = "transform";
+    let current = progressAt();
+    line.style.transform = `scaleY(${current})`;
+    let raf = 0;
+    let last = 0;
+    const step = (now) => {
+      raf = 0;
+      const dt = last ? Math.min((now - last) / 1e3, 0.1) : 1 / 60;
+      last = now;
+      const target = progressAt();
+      current += (target - current) * Math.min(1, dt * 3);
+      if (Math.abs(target - current) < 1e-3) current = target;
+      line.style.transform = `scaleY(${current})`;
+      if (current !== target) raf = requestAnimationFrame(step);
+    };
+    const onScroll = () => {
+      if (!raf) {
+        last = 0;
+        raf = requestAnimationFrame(step);
+      }
+    };
+    const io = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) {
+        window.addEventListener("scroll", onScroll, { passive: true });
+        window.addEventListener("resize", onScroll);
+        onScroll();
+      } else {
+        window.removeEventListener("scroll", onScroll);
+        window.removeEventListener("resize", onScroll);
       }
     });
-    return () => ctx.revert();
+    io.observe(section);
+    return () => {
+      io.disconnect();
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+      cancelAnimationFrame(raf);
+      line.style.transformOrigin = "";
+      line.style.willChange = "";
+      line.style.transform = "";
+    };
   }, [data.phases.length]);
   return /* @__PURE__ */ jsx(
     "section",
@@ -163,7 +197,7 @@ function StrategySection({ data }) {
     }
   );
 }
-
-export { StrategySection as default };
-//# sourceMappingURL=StrategySection-DI5RSCJU.js.map
-//# sourceMappingURL=StrategySection-DI5RSCJU.js.map
+export {
+  StrategySection as default
+};
+//# sourceMappingURL=StrategySection.js.map