@sonordev/agency-site-kit 0.3.1 → 0.4.1

package/dist/portfolio/sections/StrategySection.js.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":"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","names":[]}

package/dist/portfolio/sections/TeamSection.cjs

@@ -0,0 +1,162 @@
+'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/TeamSection.tsx
+var TeamSection_exports = {};
+__export(TeamSection_exports, {
+  default: () => TeamSection
+});
+module.exports = __toCommonJS(TeamSection_exports);
+var import_image = __toESM(require("next/image"), 1);
+
+// src/shared/images.ts
+var SANITY_ASSET_REF = /^image-[A-Za-z0-9]+-\d+x\d+-[a-z0-9]+$/;
+var FILENAME_DIMS = /-(\d{2,5})x(\d{2,5})\.[a-z0-9]+(?:\?.*)?$/i;
+var warnedAboutRefs = false;
+function resolvePortfolioImage(input) {
+  const raw = typeof input === "string" ? input : input?.asset?._ref ?? "";
+  const value = (raw || "").trim();
+  if (!value) return null;
+  if (SANITY_ASSET_REF.test(value)) {
+    if (!warnedAboutRefs && typeof console !== "undefined") {
+      warnedAboutRefs = true;
+      console.warn(
+        "[@sonordev/agency-site-kit] Received a raw Sanity asset ref instead of an image URL \u2014 skipping render. The Sonor API should resolve image refs to cdn.sanity.io URLs before returning portfolio sections."
+      );
+    }
+    return null;
+  }
+  if (!/^https?:\/\//i.test(value) && !value.startsWith("/")) return null;
+  const dims = value.match(FILENAME_DIMS);
+  if (dims) {
+    const width = parseInt(dims[1], 10);
+    const height = parseInt(dims[2], 10);
+    if (width > 0 && height > 0) return { url: value, width, height };
+  }
+  return { url: value };
+}
+
+// src/portfolio/components/sections/TeamSection.tsx
+var import_ScrollReveal = __toESM(require("@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal"), 1);
+var import_GlassCard = __toESM(require("@sonordev/agency-site-kit/portfolio/primitives/GlassCard"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var TEAM_CARD_CSS = `
+.sk-team-card .team-avatar{transition:transform .3s cubic-bezier(.25,.46,.45,.94)}
+.sk-team-card:hover .team-avatar{transform:scale(1.08)}
+@media (prefers-reduced-motion:reduce){.sk-team-card .team-avatar{transition:none}.sk-team-card:hover .team-avatar{transform:none}}
+`;
+function TeamCard({ member }) {
+  const avatar = resolvePortfolioImage(member.avatar);
+  const initials = member.name.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sk-team-card", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlassCard.default, { padding: "md", hover: true, className: "text-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
+    avatar ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_image.default,
+      {
+        src: avatar.url,
+        alt: member.name,
+        width: 80,
+        height: 80,
+        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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "h3",
+        {
+          className: "text-base font-semibold",
+          style: { color: "var(--sk-text-primary, #ffffff)" },
+          children: member.name
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "p",
+        {
+          className: "text-sm mt-1",
+          style: { color: "var(--sk-text-tertiary, #71717a)" },
+          children: member.role
+        }
+      )
+    ] })
+  ] }) }) });
+}
+function TeamSection({ data }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "section",
+    {
+      className: "w-full py-20 md:py-28",
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { href: "sk-team-card", precedence: "default", children: TEAM_CARD_CSS }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "max-w-7xl 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: "The Team"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_ScrollReveal.default, { stagger: 0.1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6", children: data.members.map((member, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamCard, { member }, index)) }) })
+        ] })
+      ]
+    }
+  );
+}
+//# sourceMappingURL=TeamSection.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/TeamSection.tsx","../../../src/shared/images.ts"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport Image from 'next/image';\nimport type { PortfolioTeamData, PortfolioTeamMember } from '../../../types';\nimport { resolvePortfolioImage } from '../../../shared/images';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\n\ninterface TeamSectionProps {\n  data: PortfolioTeamData;\n}\n\n// Avatar zoom on card hover — pure CSS, no mouse handlers. .3s with a\n// power2.out-style ease matches the old hover tween.\nconst TEAM_CARD_CSS = `\n.sk-team-card .team-avatar{transition:transform .3s cubic-bezier(.25,.46,.45,.94)}\n.sk-team-card:hover .team-avatar{transform:scale(1.08)}\n@media (prefers-reduced-motion:reduce){.sk-team-card .team-avatar{transition:none}.sk-team-card:hover .team-avatar{transform:none}}\n`;\n\nfunction TeamCard({ member }: { member: PortfolioTeamMember }) {\n  const avatar = resolvePortfolioImage(member.avatar);\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 className=\"sk-team-card\">\n      <GlassCard padding=\"md\" hover className=\"text-center\">\n        <div className=\"flex flex-col items-center gap-4\">\n          {avatar ? (\n            <Image\n              src={avatar.url}\n              alt={member.name}\n              width={80}\n              height={80}\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      {/* Hover CSS (React 19 hoists + dedupes via href/precedence) */}\n      <style href=\"sk-team-card\" precedence=\"default\">\n        {TEAM_CARD_CSS}\n      </style>\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","/**\n * Portfolio image resolution — single source of truth for turning the mixed\n * image shapes the API sends (plain URL strings, Supabase Storage URLs,\n * Sanity image objects) into something safe to render.\n *\n * IMPORTANT: a raw Sanity asset _ref (`image-{id}-{W}x{H}-{fmt}`) is an asset\n * ID, NOT a URL. Rendering it as `src` issues a garbage relative request\n * against the agency site's origin. Resolving refs to cdn.sanity.io URLs is\n * the API's job (it owns the Sanity project config); this helper refuses refs\n * so a broken image can never render, and warns once so the gap is visible.\n *\n * When a URL carries `-{W}x{H}.{ext}` dimensions (Sanity CDN URLs always do),\n * they're parsed out so callers can give next/image exact intrinsic sizes.\n */\n\nexport interface ResolvedPortfolioImage {\n  url: string;\n  width?: number;\n  height?: number;\n}\n\n/** Raw Sanity asset reference — an ID, not a URL. */\nconst SANITY_ASSET_REF = /^image-[A-Za-z0-9]+-\\d+x\\d+-[a-z0-9]+$/;\n\n/** `…-1200x800.png` (optionally with a query string) → intrinsic dimensions. */\nconst FILENAME_DIMS = /-(\\d{2,5})x(\\d{2,5})\\.[a-z0-9]+(?:\\?.*)?$/i;\n\ninterface SanityImageLike {\n  asset?: { _ref?: string };\n}\n\nlet warnedAboutRefs = false;\n\n/**\n * Resolve a portfolio image input into a renderable URL (+ intrinsic\n * dimensions when they can be derived). Returns null for empty values and\n * for unresolved Sanity refs — callers skip rendering in that case.\n */\nexport function resolvePortfolioImage(\n  input: string | SanityImageLike | null | undefined,\n): ResolvedPortfolioImage | null {\n  const raw =\n    typeof input === 'string' ? input : input?.asset?._ref ?? '';\n  const value = (raw || '').trim();\n  if (!value) return null;\n\n  if (SANITY_ASSET_REF.test(value)) {\n    if (!warnedAboutRefs && typeof console !== 'undefined') {\n      warnedAboutRefs = true;\n      console.warn(\n        '[@sonordev/agency-site-kit] Received a raw Sanity asset ref instead of an ' +\n          'image URL — skipping render. The Sonor API should resolve image refs to ' +\n          'cdn.sanity.io URLs before returning portfolio sections.',\n      );\n    }\n    return null;\n  }\n\n  // Only absolute http(s) URLs or site-rooted paths are renderable.\n  if (!/^https?:\\/\\//i.test(value) && !value.startsWith('/')) return null;\n\n  const dims = value.match(FILENAME_DIMS);\n  if (dims) {\n    const width = parseInt(dims[1], 10);\n    const height = parseInt(dims[2], 10);\n    if (width > 0 && height > 0) return { url: value, width, height };\n  }\n\n  return { url: value };\n}\n"],"mappings":"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","names":["GlassCard","Image","ScrollReveal"]}

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

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

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

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

package/dist/portfolio/sections/TeamSection.js

@@ -0,0 +1,106 @@
+'use client';
+"use client";
+import {
+  resolvePortfolioImage
+} from "../../chunk-QDXZ27R7.js";
+
+// src/portfolio/components/sections/TeamSection.tsx
+import Image from "next/image";
+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";
+var TEAM_CARD_CSS = `
+.sk-team-card .team-avatar{transition:transform .3s cubic-bezier(.25,.46,.45,.94)}
+.sk-team-card:hover .team-avatar{transform:scale(1.08)}
+@media (prefers-reduced-motion:reduce){.sk-team-card .team-avatar{transition:none}.sk-team-card:hover .team-avatar{transform:none}}
+`;
+function TeamCard({ member }) {
+  const avatar = resolvePortfolioImage(member.avatar);
+  const initials = member.name.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase();
+  return /* @__PURE__ */ jsx("div", { className: "sk-team-card", children: /* @__PURE__ */ jsx(GlassCard, { padding: "md", hover: true, className: "text-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+    avatar ? /* @__PURE__ */ jsx(
+      Image,
+      {
+        src: avatar.url,
+        alt: member.name,
+        width: 80,
+        height: 80,
+        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__ */ jsxs(
+    "section",
+    {
+      className: "w-full py-20 md:py-28",
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      children: [
+        /* @__PURE__ */ jsx("style", { href: "sk-team-card", precedence: "default", children: TEAM_CARD_CSS }),
+        /* @__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.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/TeamSection.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport Image from 'next/image';\nimport type { PortfolioTeamData, PortfolioTeamMember } from '../../../types';\nimport { resolvePortfolioImage } from '../../../shared/images';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\n\ninterface TeamSectionProps {\n  data: PortfolioTeamData;\n}\n\n// Avatar zoom on card hover — pure CSS, no mouse handlers. .3s with a\n// power2.out-style ease matches the old hover tween.\nconst TEAM_CARD_CSS = `\n.sk-team-card .team-avatar{transition:transform .3s cubic-bezier(.25,.46,.45,.94)}\n.sk-team-card:hover .team-avatar{transform:scale(1.08)}\n@media (prefers-reduced-motion:reduce){.sk-team-card .team-avatar{transition:none}.sk-team-card:hover .team-avatar{transform:none}}\n`;\n\nfunction TeamCard({ member }: { member: PortfolioTeamMember }) {\n  const avatar = resolvePortfolioImage(member.avatar);\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 className=\"sk-team-card\">\n      <GlassCard padding=\"md\" hover className=\"text-center\">\n        <div className=\"flex flex-col items-center gap-4\">\n          {avatar ? (\n            <Image\n              src={avatar.url}\n              alt={member.name}\n              width={80}\n              height={80}\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      {/* Hover CSS (React 19 hoists + dedupes via href/precedence) */}\n      <style href=\"sk-team-card\" precedence=\"default\">\n        {TEAM_CARD_CSS}\n      </style>\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"],"mappings":";;;;;;;AAGA,OAAO,WAAW;AAGlB,OAAO,kBAAkB;AACzB,OAAO,eAAe;AA4BV,cAyBF,YAzBE;AApBZ,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAMtB,SAAS,SAAS,EAAE,OAAO,GAAoC;AAC7D,QAAM,SAAS,sBAAsB,OAAO,MAAM;AAClD,QAAM,WAAW,OAAO,KACrB,MAAM,GAAG,EACT,IAAI,CAAC,MAAc,EAAE,CAAC,CAAC,EACvB,KAAK,EAAE,EACP,MAAM,GAAG,CAAC,EACV,YAAY;AAEf,SACE,oBAAC,SAAI,WAAU,gBACb,8BAAC,aAAU,SAAQ,MAAK,OAAK,MAAC,WAAU,eACtC,+BAAC,SAAI,WAAU,oCACZ;AAAA,aACC;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,OAAO;AAAA,QACZ,KAAK,OAAO;AAAA,QACZ,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAU;AAAA,QACV,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,YAAY;AAAA,QACd;AAAA;AAAA,IACF,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,YAAY;AAAA,QACd;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IAGF,qBAAC,SACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,OAAO,kCAAkC;AAAA,UAEjD,iBAAO;AAAA;AAAA,MACV;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,OAAO,mCAAmC;AAAA,UAElD,iBAAO;AAAA;AAAA,MACV;AAAA,OACF;AAAA,KACF,GACF,GACF;AAEJ;AAEe,SAAR,YAA6B,EAAE,KAAK,GAAqB;AAC9D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,YAAY,wBAAwB;AAAA,MAG7C;AAAA,4BAAC,WAAM,MAAK,gBAAe,YAAW,WACnC,yBACH;AAAA,QACA,qBAAC,SAAI,WAAU,0BACb;AAAA,+BAAC,gBAAa,GAAG,IACf;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,OAAO;AAAA,kBACP,YAAY;AAAA,gBACd;AAAA,gBACD;AAAA;AAAA,YAED;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,OAAO,oCAAoC;AAAA,gBACrD;AAAA;AAAA,YAED;AAAA,aACF;AAAA,UAEA,oBAAC,gBAAa,SAAS,KACrB,8BAAC,SAAI,WAAU,wDACZ,eAAK,QAAQ,IAAI,CAAC,QAAQ,UACzB,oBAAC,YAAqB,UAAP,KAAuB,CACvC,GACH,GACF;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/portfolio/sections/TechStackSection.cjs

@@ -0,0 +1,106 @@
+'use strict';
+
+var chunkNI4FVCLS_cjs = require('../../chunk-NI4FVCLS.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);
+
+function TechStackSection({ 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-5xl mx-auto px-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ScrollReveal__default.default, { 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: "Tech Stack"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "text-lg mb-12 max-w-2xl",
+              style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+              children: "The technologies and tools powering this project."
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 lg:grid-cols-3 gap-4", children: data.technologies.map((tech, ti) => {
+          const icon = chunkNI4FVCLS_cjs.resolvePortfolioImage(tech.icon);
+          return /* @__PURE__ */ jsxRuntime.jsx(ScrollReveal__default.default, { y: 20, delay: ti * 0.05, children: /* @__PURE__ */ jsxRuntime.jsxs(GlassCard__default.default, { padding: "md", hover: true, className: "flex items-start gap-3 h-full", children: [
+            icon ? /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: icon.url,
+                alt: tech.name,
+                width: 28,
+                height: 28,
+                loading: "lazy",
+                decoding: "async",
+                className: "w-7 h-7 object-contain shrink-0 mt-0.5"
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "w-7 h-7 rounded-md flex items-center justify-center text-xs font-bold shrink-0 mt-0.5",
+                style: {
+                  background: "color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)",
+                  color: "var(--sk-primary, #6366f1)"
+                },
+                children: tech.name.charAt(0)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-0.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "text-sm font-semibold",
+                    style: { color: "var(--sk-text-primary, #ffffff)" },
+                    children: tech.name
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "text-[10px] font-medium uppercase tracking-wider px-1.5 py-0.5 rounded",
+                    style: {
+                      background: "color-mix(in srgb, var(--sk-primary, #6366f1) 10%, transparent)",
+                      color: "var(--sk-primary, #6366f1)"
+                    },
+                    children: tech.category
+                  }
+                )
+              ] }),
+              tech.description && /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: "text-xs leading-relaxed",
+                  style: { color: "var(--sk-text-tertiary, #71717a)" },
+                  children: tech.description
+                }
+              )
+            ] })
+          ] }) }, ti);
+        }) })
+      ] })
+    }
+  );
+}
+
+module.exports = TechStackSection;
+//# sourceMappingURL=TechStackSection.cjs.map
+//# sourceMappingURL=TechStackSection.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/TechStackSection.tsx"],"names":["jsx","jsxs","ScrollReveal","resolvePortfolioImage","GlassCard"],"mappings":"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","file":"TechStackSection.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 type { PortfolioTechStackData } from '../../../types';\nimport { resolvePortfolioImage } from '../../../shared/images';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\n\ninterface TechStackSectionProps {\n  data: PortfolioTechStackData;\n}\n\nexport default function TechStackSection({ data }: TechStackSectionProps) {\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            Tech Stack\n          </h2>\n          <p\n            className=\"text-lg mb-12 max-w-2xl\"\n            style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n          >\n            The technologies and tools powering this project.\n          </p>\n        </ScrollReveal>\n\n        {/* All technologies in a 2-3 column grid — never single column */}\n        <div className=\"grid grid-cols-2 lg:grid-cols-3 gap-4\">\n          {data.technologies.map((tech, ti) => {\n            const icon = resolvePortfolioImage(tech.icon);\n            return (\n            <ScrollReveal key={ti} y={20} delay={ti * 0.05}>\n              <GlassCard padding=\"md\" hover className=\"flex items-start gap-3 h-full\">\n                {icon ? (\n                  <img\n                    src={icon.url}\n                    alt={tech.name}\n                    width={28}\n                    height={28}\n                    loading=\"lazy\"\n                    decoding=\"async\"\n                    className=\"w-7 h-7 object-contain shrink-0 mt-0.5\"\n                  />\n                ) : (\n                  <div\n                    className=\"w-7 h-7 rounded-md flex items-center justify-center text-xs font-bold shrink-0 mt-0.5\"\n                    style={{\n                      background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)',\n                      color: 'var(--sk-primary, #6366f1)',\n                    }}\n                  >\n                    {tech.name.charAt(0)}\n                  </div>\n                )}\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"flex items-center gap-2 mb-0.5\">\n                    <span\n                      className=\"text-sm font-semibold\"\n                      style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                    >\n                      {tech.name}\n                    </span>\n                    <span\n                      className=\"text-[10px] font-medium uppercase tracking-wider px-1.5 py-0.5 rounded\"\n                      style={{\n                        background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 10%, transparent)',\n                        color: 'var(--sk-primary, #6366f1)',\n                      }}\n                    >\n                      {tech.category}\n                    </span>\n                  </div>\n                  {tech.description && (\n                    <p\n                      className=\"text-xs leading-relaxed\"\n                      style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                    >\n                      {tech.description}\n                    </p>\n                  )}\n                </div>\n              </GlassCard>\n            </ScrollReveal>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n"]}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { h as PortfolioTechStackData } from '../../types-0tVPy4pU.cjs';
+
+interface TechStackSectionProps {
+    data: PortfolioTechStackData;
+}
+declare function TechStackSection({ data }: TechStackSectionProps): React.JSX.Element;
+
+export { TechStackSection as default };

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { h as PortfolioTechStackData } from '../../types-0tVPy4pU.js';
+
+interface TechStackSectionProps {
+    data: PortfolioTechStackData;
+}
+declare function TechStackSection({ data }: TechStackSectionProps): React.JSX.Element;
+
+export { TechStackSection as default };

package/dist/portfolio/sections/TechStackSection.js

@@ -0,0 +1,99 @@
+import { resolvePortfolioImage } from '../../chunk-XJ434N7I.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';
+
+function TechStackSection({ 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-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: "Tech Stack"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-lg mb-12 max-w-2xl",
+              style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+              children: "The technologies and tools powering this project."
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 lg:grid-cols-3 gap-4", children: data.technologies.map((tech, ti) => {
+          const icon = resolvePortfolioImage(tech.icon);
+          return /* @__PURE__ */ jsx(ScrollReveal, { y: 20, delay: ti * 0.05, children: /* @__PURE__ */ jsxs(GlassCard, { padding: "md", hover: true, className: "flex items-start gap-3 h-full", children: [
+            icon ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: icon.url,
+                alt: tech.name,
+                width: 28,
+                height: 28,
+                loading: "lazy",
+                decoding: "async",
+                className: "w-7 h-7 object-contain shrink-0 mt-0.5"
+              }
+            ) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "w-7 h-7 rounded-md flex items-center justify-center text-xs font-bold shrink-0 mt-0.5",
+                style: {
+                  background: "color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)",
+                  color: "var(--sk-primary, #6366f1)"
+                },
+                children: tech.name.charAt(0)
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-0.5", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "text-sm font-semibold",
+                    style: { color: "var(--sk-text-primary, #ffffff)" },
+                    children: tech.name
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "text-[10px] font-medium uppercase tracking-wider px-1.5 py-0.5 rounded",
+                    style: {
+                      background: "color-mix(in srgb, var(--sk-primary, #6366f1) 10%, transparent)",
+                      color: "var(--sk-primary, #6366f1)"
+                    },
+                    children: tech.category
+                  }
+                )
+              ] }),
+              tech.description && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "text-xs leading-relaxed",
+                  style: { color: "var(--sk-text-tertiary, #71717a)" },
+                  children: tech.description
+                }
+              )
+            ] })
+          ] }) }, ti);
+        }) })
+      ] })
+    }
+  );
+}
+
+export { TechStackSection as default };
+//# sourceMappingURL=TechStackSection.js.map
+//# sourceMappingURL=TechStackSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/TechStackSection.tsx"],"names":[],"mappings":"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","file":"TechStackSection.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 type { PortfolioTechStackData } from '../../../types';\nimport { resolvePortfolioImage } from '../../../shared/images';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\n\ninterface TechStackSectionProps {\n  data: PortfolioTechStackData;\n}\n\nexport default function TechStackSection({ data }: TechStackSectionProps) {\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            Tech Stack\n          </h2>\n          <p\n            className=\"text-lg mb-12 max-w-2xl\"\n            style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n          >\n            The technologies and tools powering this project.\n          </p>\n        </ScrollReveal>\n\n        {/* All technologies in a 2-3 column grid — never single column */}\n        <div className=\"grid grid-cols-2 lg:grid-cols-3 gap-4\">\n          {data.technologies.map((tech, ti) => {\n            const icon = resolvePortfolioImage(tech.icon);\n            return (\n            <ScrollReveal key={ti} y={20} delay={ti * 0.05}>\n              <GlassCard padding=\"md\" hover className=\"flex items-start gap-3 h-full\">\n                {icon ? (\n                  <img\n                    src={icon.url}\n                    alt={tech.name}\n                    width={28}\n                    height={28}\n                    loading=\"lazy\"\n                    decoding=\"async\"\n                    className=\"w-7 h-7 object-contain shrink-0 mt-0.5\"\n                  />\n                ) : (\n                  <div\n                    className=\"w-7 h-7 rounded-md flex items-center justify-center text-xs font-bold shrink-0 mt-0.5\"\n                    style={{\n                      background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)',\n                      color: 'var(--sk-primary, #6366f1)',\n                    }}\n                  >\n                    {tech.name.charAt(0)}\n                  </div>\n                )}\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"flex items-center gap-2 mb-0.5\">\n                    <span\n                      className=\"text-sm font-semibold\"\n                      style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                    >\n                      {tech.name}\n                    </span>\n                    <span\n                      className=\"text-[10px] font-medium uppercase tracking-wider px-1.5 py-0.5 rounded\"\n                      style={{\n                        background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 10%, transparent)',\n                        color: 'var(--sk-primary, #6366f1)',\n                      }}\n                    >\n                      {tech.category}\n                    </span>\n                  </div>\n                  {tech.description && (\n                    <p\n                      className=\"text-xs leading-relaxed\"\n                      style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                    >\n                      {tech.description}\n                    </p>\n                  )}\n                </div>\n              </GlassCard>\n            </ScrollReveal>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n"]}