@sonordev/agency-site-kit 0.1.0

package/dist/StrategySection-3ED3QW4R.cjs

@@ -0,0 +1,180 @@
+'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);
+
+function StrategySection({ data }) {
+  const timelineRef = react.useRef(null);
+  const sectionRef = react.useRef(null);
+  react.useEffect(() => {
+    gsap__default.default.registerPlugin(ScrollTrigger.ScrollTrigger);
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (prefersReducedMotion) return;
+    const ctx = gsap__default.default.context(() => {
+      const line = timelineRef.current?.querySelector(".timeline-line");
+      if (line) {
+        const length = line.getTotalLength?.() || sectionRef.current?.offsetHeight || 800;
+        gsap__default.default.set(line, {
+          strokeDasharray: length,
+          strokeDashoffset: length
+        });
+        gsap__default.default.to(line, {
+          strokeDashoffset: 0,
+          ease: "none",
+          scrollTrigger: {
+            trigger: sectionRef.current,
+            start: "top 60%",
+            end: "bottom 40%",
+            scrub: 1
+          }
+        });
+      }
+    });
+    return () => ctx.revert();
+  }, [data.phases.length]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "section",
+    {
+      className: "w-full py-20 md:py-28",
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-5xl mx-auto px-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkIKBK7HYX_cjs.ScrollReveal, { y: 30, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: "text-3xl md:text-4xl font-bold mb-4",
+              style: {
+                color: "var(--sk-text-primary, #ffffff)",
+                fontFamily: "var(--sk-font-heading, inherit)"
+              },
+              children: "Our Strategy"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { ref: sectionRef, className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              ref: timelineRef,
+              className: "absolute left-6 md:left-8 top-0 bottom-0 hidden md:block",
+              width: "2",
+              height: "100%",
+              style: { overflow: "visible" },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "line",
+                {
+                  className: "timeline-line",
+                  x1: "1",
+                  y1: "0",
+                  x2: "1",
+                  y2: "100%",
+                  stroke: "var(--sk-primary, #6366f1)",
+                  strokeWidth: "2",
+                  strokeLinecap: "round"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-12", children: data.phases.map((phase, index) => /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 40, delay: index * 0.15, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-6 md:gap-8", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center shrink-0", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(chunkKEOHORIH_cjs.GlassCard, { padding: "lg", hover: false, className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "h3",
+                  {
+                    className: "text-xl font-semibold",
+                    style: { color: "var(--sk-text-primary, #ffffff)" },
+                    children: phase.title
+                  }
+                ),
+                phase.timeline && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: "text-base leading-relaxed",
+                  style: { color: "var(--sk-text-tertiary, #71717a)" },
+                  children: phase.description
+                }
+              ),
+              phase.deliverables && phase.deliverables.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-2 mt-2", children: phase.deliverables.map((deliverable, di) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    width: "18",
+                    height: "18",
+                    viewBox: "0 0 18 18",
+                    fill: "none",
+                    className: "shrink-0 mt-0.5",
+                    style: { color: "#10b981" },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        d: "M15 4.5L6.75 12.75 3 9",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "text-sm",
+                    style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+                    children: deliverable
+                  }
+                )
+              ] }, di)) })
+            ] }) })
+          ] }) }, index)) })
+        ] })
+      ] })
+    }
+  );
+}
+
+module.exports = StrategySection;
+//# sourceMappingURL=StrategySection-3ED3QW4R.cjs.map
+//# sourceMappingURL=StrategySection-3ED3QW4R.cjs.map

package/dist/StrategySection-3ED3QW4R.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/StrategySection.tsx"],"names":["useRef","useEffect","gsap","ScrollTrigger","jsx","jsxs","ScrollReveal","GlassCard"],"mappings":"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","file":"StrategySection-3ED3QW4R.cjs","sourcesContent":["'use client';\n\nimport React, { useRef, useEffect } from 'react';\nimport gsap from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nimport type { PortfolioStrategyData } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\nimport GlassCard from '../primitives/GlassCard';\n\ninterface StrategySectionProps {\n  data: PortfolioStrategyData;\n}\n\nexport default function StrategySection({ data }: StrategySectionProps) {\n  const timelineRef = useRef<SVGSVGElement>(null);\n  const sectionRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger);\n\n    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    if (prefersReducedMotion) return;\n\n    const ctx = gsap.context(() => {\n      // Animate the vertical timeline line drawing in\n      const line = timelineRef.current?.querySelector('.timeline-line');\n      if (line) {\n        const length = (line as SVGLineElement).getTotalLength?.()\n          || sectionRef.current?.offsetHeight\n          || 800;\n\n        gsap.set(line, {\n          strokeDasharray: length,\n          strokeDashoffset: length,\n        });\n\n        gsap.to(line, {\n          strokeDashoffset: 0,\n          ease: 'none',\n          scrollTrigger: {\n            trigger: sectionRef.current,\n            start: 'top 60%',\n            end: 'bottom 40%',\n            scrub: 1,\n          },\n        });\n      }\n    });\n\n    return () => ctx.revert();\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          {/* SVG vertical timeline line */}\n          <svg\n            ref={timelineRef}\n            className=\"absolute left-6 md:left-8 top-0 bottom-0 hidden md:block\"\n            width=\"2\"\n            height=\"100%\"\n            style={{ overflow: 'visible' }}\n          >\n            <line\n              className=\"timeline-line\"\n              x1=\"1\"\n              y1=\"0\"\n              x2=\"1\"\n              y2=\"100%\"\n              stroke=\"var(--sk-primary, #6366f1)\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n            />\n          </svg>\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 on the timeline */}\n                  <div className=\"flex flex-col items-center shrink-0\">\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"]}

package/dist/StrategySection-VUWMIYYP.js

@@ -0,0 +1,175 @@
+'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';
+
+function StrategySection({ data }) {
+  const timelineRef = useRef(null);
+  const sectionRef = useRef(null);
+  useEffect(() => {
+    gsap.registerPlugin(ScrollTrigger);
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (prefersReducedMotion) return;
+    const ctx = gsap.context(() => {
+      const line = timelineRef.current?.querySelector(".timeline-line");
+      if (line) {
+        const length = line.getTotalLength?.() || sectionRef.current?.offsetHeight || 800;
+        gsap.set(line, {
+          strokeDasharray: length,
+          strokeDashoffset: length
+        });
+        gsap.to(line, {
+          strokeDashoffset: 0,
+          ease: "none",
+          scrollTrigger: {
+            trigger: sectionRef.current,
+            start: "top 60%",
+            end: "bottom 40%",
+            scrub: 1
+          }
+        });
+      }
+    });
+    return () => ctx.revert();
+  }, [data.phases.length]);
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: "w-full py-20 md:py-28",
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      children: /* @__PURE__ */ jsxs("div", { className: "max-w-5xl mx-auto px-6", children: [
+        /* @__PURE__ */ jsxs(ScrollReveal, { y: 30, children: [
+          /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { ref: sectionRef, className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              ref: timelineRef,
+              className: "absolute left-6 md:left-8 top-0 bottom-0 hidden md:block",
+              width: "2",
+              height: "100%",
+              style: { overflow: "visible" },
+              children: /* @__PURE__ */ jsx(
+                "line",
+                {
+                  className: "timeline-line",
+                  x1: "1",
+                  y1: "0",
+                  x2: "1",
+                  y2: "100%",
+                  stroke: "var(--sk-primary, #6366f1)",
+                  strokeWidth: "2",
+                  strokeLinecap: "round"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-12", children: data.phases.map((phase, index) => /* @__PURE__ */ jsx(ScrollReveal, { y: 40, delay: index * 0.15, children: /* @__PURE__ */ jsxs("div", { className: "flex gap-6 md:gap-8", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center shrink-0", children: /* @__PURE__ */ 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__ */ jsx(GlassCard, { padding: "lg", hover: false, className: "flex-1", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [
+                /* @__PURE__ */ jsx(
+                  "h3",
+                  {
+                    className: "text-xl font-semibold",
+                    style: { color: "var(--sk-text-primary, #ffffff)" },
+                    children: phase.title
+                  }
+                ),
+                phase.timeline && /* @__PURE__ */ 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__ */ jsx(
+                "p",
+                {
+                  className: "text-base leading-relaxed",
+                  style: { color: "var(--sk-text-tertiary, #71717a)" },
+                  children: phase.description
+                }
+              ),
+              phase.deliverables && phase.deliverables.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2 mt-2", children: phase.deliverables.map((deliverable, di) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    width: "18",
+                    height: "18",
+                    viewBox: "0 0 18 18",
+                    fill: "none",
+                    className: "shrink-0 mt-0.5",
+                    style: { color: "#10b981" },
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M15 4.5L6.75 12.75 3 9",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "text-sm",
+                    style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+                    children: deliverable
+                  }
+                )
+              ] }, di)) })
+            ] }) })
+          ] }) }, index)) })
+        ] })
+      ] })
+    }
+  );
+}
+
+export { StrategySection as default };
+//# sourceMappingURL=StrategySection-VUWMIYYP.js.map
+//# sourceMappingURL=StrategySection-VUWMIYYP.js.map

package/dist/StrategySection-VUWMIYYP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/StrategySection.tsx"],"names":[],"mappings":"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","file":"StrategySection-VUWMIYYP.js","sourcesContent":["'use client';\n\nimport React, { useRef, useEffect } from 'react';\nimport gsap from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nimport type { PortfolioStrategyData } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\nimport GlassCard from '../primitives/GlassCard';\n\ninterface StrategySectionProps {\n  data: PortfolioStrategyData;\n}\n\nexport default function StrategySection({ data }: StrategySectionProps) {\n  const timelineRef = useRef<SVGSVGElement>(null);\n  const sectionRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger);\n\n    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    if (prefersReducedMotion) return;\n\n    const ctx = gsap.context(() => {\n      // Animate the vertical timeline line drawing in\n      const line = timelineRef.current?.querySelector('.timeline-line');\n      if (line) {\n        const length = (line as SVGLineElement).getTotalLength?.()\n          || sectionRef.current?.offsetHeight\n          || 800;\n\n        gsap.set(line, {\n          strokeDasharray: length,\n          strokeDashoffset: length,\n        });\n\n        gsap.to(line, {\n          strokeDashoffset: 0,\n          ease: 'none',\n          scrollTrigger: {\n            trigger: sectionRef.current,\n            start: 'top 60%',\n            end: 'bottom 40%',\n            scrub: 1,\n          },\n        });\n      }\n    });\n\n    return () => ctx.revert();\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          {/* SVG vertical timeline line */}\n          <svg\n            ref={timelineRef}\n            className=\"absolute left-6 md:left-8 top-0 bottom-0 hidden md:block\"\n            width=\"2\"\n            height=\"100%\"\n            style={{ overflow: 'visible' }}\n          >\n            <line\n              className=\"timeline-line\"\n              x1=\"1\"\n              y1=\"0\"\n              x2=\"1\"\n              y2=\"100%\"\n              stroke=\"var(--sk-primary, #6366f1)\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n            />\n          </svg>\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 on the timeline */}\n                  <div className=\"flex flex-col items-center shrink-0\">\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"]}

package/dist/TeamSection-DZVSNZE6.cjs

@@ -0,0 +1,112 @@
+'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 jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var gsap__default = /*#__PURE__*/_interopDefault(gsap);
+
+function TeamCard({ member }) {
+  const cardRef = react.useRef(null);
+  const handleMouseEnter = react.useCallback(() => {
+    if (!cardRef.current) return;
+    const avatar = cardRef.current.querySelector(".team-avatar");
+    if (avatar) {
+      gsap__default.default.to(avatar, { scale: 1.08, duration: 0.3, ease: "power2.out" });
+    }
+  }, []);
+  const handleMouseLeave = react.useCallback(() => {
+    if (!cardRef.current) return;
+    const avatar = cardRef.current.querySelector(".team-avatar");
+    if (avatar) {
+      gsap__default.default.to(avatar, { scale: 1, duration: 0.3, ease: "power2.out" });
+    }
+  }, []);
+  const avatarUrl = member.avatar?.asset?._ref;
+  const initials = member.name.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: cardRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: /* @__PURE__ */ jsxRuntime.jsx(chunkKEOHORIH_cjs.GlassCard, { padding: "md", hover: true, className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+    avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: avatarUrl,
+        alt: member.name,
+        className: "team-avatar w-20 h-20 rounded-full object-cover",
+        style: {
+          border: "3px solid var(--sk-border, rgba(255,255,255,0.1))",
+          willChange: "transform"
+        }
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "team-avatar flex items-center justify-center w-20 h-20 rounded-full text-xl font-bold",
+        style: {
+          background: "color-mix(in srgb, var(--sk-primary, #6366f1) 20%, transparent)",
+          color: "var(--sk-primary, #6366f1)",
+          border: "3px solid color-mix(in srgb, var(--sk-primary, #6366f1) 25%, transparent)",
+          willChange: "transform"
+        },
+        children: initials
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "h3",
+        {
+          className: "text-base font-semibold",
+          style: { color: "var(--sk-text-primary, #ffffff)" },
+          children: member.name
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: "text-sm mt-1",
+          style: { color: "var(--sk-text-tertiary, #71717a)" },
+          children: member.role
+        }
+      )
+    ] })
+  ] }) }) });
+}
+function TeamSection({ data }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "section",
+    {
+      className: "w-full py-20 md:py-28",
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-7xl mx-auto px-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkIKBK7HYX_cjs.ScrollReveal, { y: 30, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: "text-3xl md:text-4xl font-bold mb-4",
+              style: {
+                color: "var(--sk-text-primary, #ffffff)",
+                fontFamily: "var(--sk-font-heading, inherit)"
+              },
+              children: "The Team"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "text-lg mb-12 max-w-2xl",
+              style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+              children: "The people who brought this project to life."
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { stagger: 0.1, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6", children: data.members.map((member, index) => /* @__PURE__ */ jsxRuntime.jsx(TeamCard, { member }, index)) }) })
+      ] })
+    }
+  );
+}
+
+module.exports = TeamSection;
+//# sourceMappingURL=TeamSection-DZVSNZE6.cjs.map
+//# sourceMappingURL=TeamSection-DZVSNZE6.cjs.map

package/dist/TeamSection-DZVSNZE6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/TeamSection.tsx"],"names":["useRef","useCallback","gsap","jsx","GlassCard","jsxs","ScrollReveal"],"mappings":"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","file":"TeamSection-DZVSNZE6.cjs","sourcesContent":["'use client';\n\nimport React, { useRef, useCallback } from 'react';\nimport gsap from 'gsap';\nimport type { PortfolioTeamData, PortfolioTeamMember } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\nimport GlassCard from '../primitives/GlassCard';\n\ninterface TeamSectionProps {\n  data: PortfolioTeamData;\n}\n\nfunction TeamCard({ member }: { member: PortfolioTeamMember }) {\n  const cardRef = useRef<HTMLDivElement>(null);\n\n  const handleMouseEnter = useCallback(() => {\n    if (!cardRef.current) return;\n    const avatar = cardRef.current.querySelector('.team-avatar');\n    if (avatar) {\n      gsap.to(avatar, { scale: 1.08, duration: 0.3, ease: 'power2.out' });\n    }\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    if (!cardRef.current) return;\n    const avatar = cardRef.current.querySelector('.team-avatar');\n    if (avatar) {\n      gsap.to(avatar, { scale: 1, duration: 0.3, ease: 'power2.out' });\n    }\n  }, []);\n\n  const avatarUrl = member.avatar?.asset?._ref;\n  const initials = member.name\n    .split(' ')\n    .map((w: string) => w[0])\n    .join('')\n    .slice(0, 2)\n    .toUpperCase();\n\n  return (\n    <div ref={cardRef} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n      <GlassCard padding=\"md\" hover className=\"text-center\">\n        <div className=\"flex flex-col items-center gap-4\">\n          {avatarUrl ? (\n            <img\n              src={avatarUrl}\n              alt={member.name}\n              className=\"team-avatar w-20 h-20 rounded-full object-cover\"\n              style={{\n                border: '3px solid var(--sk-border, rgba(255,255,255,0.1))',\n                willChange: 'transform',\n              }}\n            />\n          ) : (\n            <div\n              className=\"team-avatar flex items-center justify-center w-20 h-20 rounded-full text-xl font-bold\"\n              style={{\n                background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 20%, transparent)',\n                color: 'var(--sk-primary, #6366f1)',\n                border: '3px solid color-mix(in srgb, var(--sk-primary, #6366f1) 25%, transparent)',\n                willChange: 'transform',\n              }}\n            >\n              {initials}\n            </div>\n          )}\n\n          <div>\n            <h3\n              className=\"text-base font-semibold\"\n              style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n            >\n              {member.name}\n            </h3>\n            <p\n              className=\"text-sm mt-1\"\n              style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n            >\n              {member.role}\n            </p>\n          </div>\n        </div>\n      </GlassCard>\n    </div>\n  );\n}\n\nexport default function TeamSection({ data }: TeamSectionProps) {\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-7xl mx-auto px-6\">\n        <ScrollReveal y={30}>\n          <h2\n            className=\"text-3xl md:text-4xl font-bold mb-4\"\n            style={{\n              color: 'var(--sk-text-primary, #ffffff)',\n              fontFamily: 'var(--sk-font-heading, inherit)',\n            }}\n          >\n            The Team\n          </h2>\n          <p\n            className=\"text-lg mb-12 max-w-2xl\"\n            style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n          >\n            The people who brought this project to life.\n          </p>\n        </ScrollReveal>\n\n        <ScrollReveal stagger={0.1}>\n          <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6\">\n            {data.members.map((member, index) => (\n              <TeamCard key={index} member={member} />\n            ))}\n          </div>\n        </ScrollReveal>\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/TeamSection-HGKFW6PQ.js

@@ -0,0 +1,107 @@
+'use client';
+import { GlassCard } from './chunk-YB4B3OMC.js';
+import { ScrollReveal } from './chunk-7CFFAKDM.js';
+import { useRef, useCallback } from 'react';
+import gsap from 'gsap';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function TeamCard({ member }) {
+  const cardRef = useRef(null);
+  const handleMouseEnter = useCallback(() => {
+    if (!cardRef.current) return;
+    const avatar = cardRef.current.querySelector(".team-avatar");
+    if (avatar) {
+      gsap.to(avatar, { scale: 1.08, duration: 0.3, ease: "power2.out" });
+    }
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    if (!cardRef.current) return;
+    const avatar = cardRef.current.querySelector(".team-avatar");
+    if (avatar) {
+      gsap.to(avatar, { scale: 1, duration: 0.3, ease: "power2.out" });
+    }
+  }, []);
+  const avatarUrl = member.avatar?.asset?._ref;
+  const initials = member.name.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase();
+  return /* @__PURE__ */ jsx("div", { ref: cardRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: /* @__PURE__ */ jsx(GlassCard, { padding: "md", hover: true, className: "text-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+    avatarUrl ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: avatarUrl,
+        alt: member.name,
+        className: "team-avatar w-20 h-20 rounded-full object-cover",
+        style: {
+          border: "3px solid var(--sk-border, rgba(255,255,255,0.1))",
+          willChange: "transform"
+        }
+      }
+    ) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "team-avatar flex items-center justify-center w-20 h-20 rounded-full text-xl font-bold",
+        style: {
+          background: "color-mix(in srgb, var(--sk-primary, #6366f1) 20%, transparent)",
+          color: "var(--sk-primary, #6366f1)",
+          border: "3px solid color-mix(in srgb, var(--sk-primary, #6366f1) 25%, transparent)",
+          willChange: "transform"
+        },
+        children: initials
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        "h3",
+        {
+          className: "text-base font-semibold",
+          style: { color: "var(--sk-text-primary, #ffffff)" },
+          children: member.name
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "text-sm mt-1",
+          style: { color: "var(--sk-text-tertiary, #71717a)" },
+          children: member.role
+        }
+      )
+    ] })
+  ] }) }) });
+}
+function TeamSection({ data }) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: "w-full py-20 md:py-28",
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      children: /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto px-6", children: [
+        /* @__PURE__ */ jsxs(ScrollReveal, { y: 30, children: [
+          /* @__PURE__ */ 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: "The Team"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-lg mb-12 max-w-2xl",
+              style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+              children: "The people who brought this project to life."
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(ScrollReveal, { stagger: 0.1, children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6", children: data.members.map((member, index) => /* @__PURE__ */ jsx(TeamCard, { member }, index)) }) })
+      ] })
+    }
+  );
+}
+
+export { TeamSection as default };
+//# sourceMappingURL=TeamSection-HGKFW6PQ.js.map
+//# sourceMappingURL=TeamSection-HGKFW6PQ.js.map