@sonordev/agency-site-kit 0.1.0

package/dist/DetailsSection-FB763FS7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/DetailsSection.tsx"],"names":[],"mappings":"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","file":"DetailsSection-FB763FS7.js","sourcesContent":["'use client';\n\nimport React from 'react';\nimport type { PortfolioDetailsData } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\nimport GlassCard from '../primitives/GlassCard';\n\ninterface DetailsSectionProps {\n  data: PortfolioDetailsData;\n}\n\ninterface DetailRow {\n  icon: React.ReactNode;\n  label: string;\n  value: string;\n}\n\nexport default function DetailsSection({ data }: DetailsSectionProps) {\n  const rows: DetailRow[] = [];\n\n  if (data.industry) {\n    rows.push({\n      label: 'Industry',\n      value: data.industry,\n      icon: (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n          <path d=\"M3 16.5h12M4.5 1.5h9l1.5 6H3l1.5-6zM6 7.5v9M12 7.5v9M9 7.5v9\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      ),\n    });\n  }\n\n  if (data.location) {\n    rows.push({\n      label: 'Location',\n      value: data.location,\n      icon: (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n          <path d=\"M15 7.5c0 4.5-6 9-6 9s-6-4.5-6-9a6 6 0 1112 0z\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n          <circle cx=\"9\" cy=\"7.5\" r=\"2\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n        </svg>\n      ),\n    });\n  }\n\n  if (data.website) {\n    rows.push({\n      label: 'Website',\n      value: data.website,\n      icon: (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n          <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n          <path d=\"M1.5 9h15M9 1.5a11.25 11.25 0 013 7.5 11.25 11.25 0 01-3 7.5 11.25 11.25 0 01-3-7.5 11.25 11.25 0 013-7.5z\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n        </svg>\n      ),\n    });\n  }\n\n  if (data.timeline) {\n    rows.push({\n      label: 'Timeline',\n      value: data.timeline,\n      icon: (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n          <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n          <path d=\"M9 4.5V9l3 1.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      ),\n    });\n  }\n\n  if (data.launchDate) {\n    rows.push({\n      label: 'Launch Date',\n      value: data.launchDate,\n      icon: (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n          <rect x=\"2.25\" y=\"3\" width=\"13.5\" height=\"12.75\" rx=\"2\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n          <path d=\"M12 1.5v3M6 1.5v3M2.25 7.5h13.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n        </svg>\n      ),\n    });\n  }\n\n  if (data.budgetRange) {\n    rows.push({\n      label: 'Budget Range',\n      value: data.budgetRange,\n      icon: (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n          <path d=\"M9 1.5v15M13.5 4.5H6.75a2.625 2.625 0 000 5.25h4.5a2.625 2.625 0 010 5.25H4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      ),\n    });\n  }\n\n  if (rows.length === 0) return null;\n\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-4xl mx-auto px-6\">\n        <ScrollReveal y={30}>\n          <h2\n            className=\"text-3xl md:text-4xl font-bold mb-8\"\n            style={{\n              color: 'var(--sk-text-primary, #ffffff)',\n              fontFamily: 'var(--sk-font-heading, inherit)',\n            }}\n          >\n            Project Details\n          </h2>\n        </ScrollReveal>\n\n        <ScrollReveal y={40} delay={0.1}>\n          <GlassCard padding=\"lg\" hover={false}>\n            <div className=\"flex flex-col divide-y\" style={{ borderColor: 'var(--sk-border, rgba(255,255,255,0.1))' }}>\n              {rows.map((row, index) => (\n                <div\n                  key={index}\n                  className=\"flex items-center gap-4 py-4 first:pt-0 last:pb-0\"\n                  style={{\n                    borderColor: 'var(--sk-border, rgba(255,255,255,0.1))',\n                  }}\n                >\n                  <span\n                    className=\"flex items-center justify-center w-9 h-9 rounded-lg shrink-0\"\n                    style={{\n                      background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 12%, transparent)',\n                      color: 'var(--sk-primary, #6366f1)',\n                    }}\n                  >\n                    {row.icon}\n                  </span>\n                  <span\n                    className=\"text-sm font-medium w-32 shrink-0\"\n                    style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                  >\n                    {row.label}\n                  </span>\n                  {row.label === 'Website' ? (\n                    <a\n                      href={row.value.startsWith('http') ? row.value : `https://${row.value}`}\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\"\n                      className=\"text-sm font-medium hover:underline\"\n                      style={{ color: 'var(--sk-primary, #6366f1)' }}\n                    >\n                      {row.value}\n                    </a>\n                  ) : (\n                    <span\n                      className=\"text-sm font-medium\"\n                      style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                    >\n                      {row.value}\n                    </span>\n                  )}\n                </div>\n              ))}\n            </div>\n          </GlassCard>\n        </ScrollReveal>\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/DetailsSection-OACJFGH7.cjs

@@ -0,0 +1,137 @@
+'use strict';
+
+var chunkKEOHORIH_cjs = require('./chunk-KEOHORIH.cjs');
+var chunkIKBK7HYX_cjs = require('./chunk-IKBK7HYX.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+
+function DetailsSection({ data }) {
+  const rows = [];
+  if (data.industry) {
+    rows.push({
+      label: "Industry",
+      value: data.industry,
+      icon: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 16.5h12M4.5 1.5h9l1.5 6H3l1.5-6zM6 7.5v9M12 7.5v9M9 7.5v9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+    });
+  }
+  if (data.location) {
+    rows.push({
+      label: "Location",
+      value: data.location,
+      icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 7.5c0 4.5-6 9-6 9s-6-4.5-6-9a6 6 0 1112 0z", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "7.5", r: "2", stroke: "currentColor", strokeWidth: "1.5" })
+      ] })
+    });
+  }
+  if (data.website) {
+    rows.push({
+      label: "Website",
+      value: data.website,
+      icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1.5 9h15M9 1.5a11.25 11.25 0 013 7.5 11.25 11.25 0 01-3 7.5 11.25 11.25 0 01-3-7.5 11.25 11.25 0 013-7.5z", stroke: "currentColor", strokeWidth: "1.5" })
+      ] })
+    });
+  }
+  if (data.timeline) {
+    rows.push({
+      label: "Timeline",
+      value: data.timeline,
+      icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 4.5V9l3 1.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+      ] })
+    });
+  }
+  if (data.launchDate) {
+    rows.push({
+      label: "Launch Date",
+      value: data.launchDate,
+      icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2.25", y: "3", width: "13.5", height: "12.75", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 1.5v3M6 1.5v3M2.25 7.5h13.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+      ] })
+    });
+  }
+  if (data.budgetRange) {
+    rows.push({
+      label: "Budget Range",
+      value: data.budgetRange,
+      icon: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 1.5v15M13.5 4.5H6.75a2.625 2.625 0 000 5.25h4.5a2.625 2.625 0 010 5.25H4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+    });
+  }
+  if (rows.length === 0) return null;
+  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-4xl mx-auto px-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 30, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "h2",
+          {
+            className: "text-3xl md:text-4xl font-bold mb-8",
+            style: {
+              color: "var(--sk-text-primary, #ffffff)",
+              fontFamily: "var(--sk-font-heading, inherit)"
+            },
+            children: "Project Details"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 40, delay: 0.1, children: /* @__PURE__ */ jsxRuntime.jsx(chunkKEOHORIH_cjs.GlassCard, { padding: "lg", hover: false, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col divide-y", style: { borderColor: "var(--sk-border, rgba(255,255,255,0.1))" }, children: rows.map((row, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex items-center gap-4 py-4 first:pt-0 last:pb-0",
+            style: {
+              borderColor: "var(--sk-border, rgba(255,255,255,0.1))"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "flex items-center justify-center w-9 h-9 rounded-lg shrink-0",
+                  style: {
+                    background: "color-mix(in srgb, var(--sk-primary, #6366f1) 12%, transparent)",
+                    color: "var(--sk-primary, #6366f1)"
+                  },
+                  children: row.icon
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "text-sm font-medium w-32 shrink-0",
+                  style: { color: "var(--sk-text-tertiary, #71717a)" },
+                  children: row.label
+                }
+              ),
+              row.label === "Website" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "a",
+                {
+                  href: row.value.startsWith("http") ? row.value : `https://${row.value}`,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "text-sm font-medium hover:underline",
+                  style: { color: "var(--sk-primary, #6366f1)" },
+                  children: row.value
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "text-sm font-medium",
+                  style: { color: "var(--sk-text-primary, #ffffff)" },
+                  children: row.value
+                }
+              )
+            ]
+          },
+          index
+        )) }) }) })
+      ] })
+    }
+  );
+}
+
+module.exports = DetailsSection;
+//# sourceMappingURL=DetailsSection-OACJFGH7.cjs.map
+//# sourceMappingURL=DetailsSection-OACJFGH7.cjs.map

package/dist/DetailsSection-OACJFGH7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/DetailsSection.tsx"],"names":["jsxs","jsx","ScrollReveal","GlassCard"],"mappings":"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","file":"DetailsSection-OACJFGH7.cjs","sourcesContent":["'use client';\n\nimport React from 'react';\nimport type { PortfolioDetailsData } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\nimport GlassCard from '../primitives/GlassCard';\n\ninterface DetailsSectionProps {\n  data: PortfolioDetailsData;\n}\n\ninterface DetailRow {\n  icon: React.ReactNode;\n  label: string;\n  value: string;\n}\n\nexport default function DetailsSection({ data }: DetailsSectionProps) {\n  const rows: DetailRow[] = [];\n\n  if (data.industry) {\n    rows.push({\n      label: 'Industry',\n      value: data.industry,\n      icon: (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n          <path d=\"M3 16.5h12M4.5 1.5h9l1.5 6H3l1.5-6zM6 7.5v9M12 7.5v9M9 7.5v9\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      ),\n    });\n  }\n\n  if (data.location) {\n    rows.push({\n      label: 'Location',\n      value: data.location,\n      icon: (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n          <path d=\"M15 7.5c0 4.5-6 9-6 9s-6-4.5-6-9a6 6 0 1112 0z\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n          <circle cx=\"9\" cy=\"7.5\" r=\"2\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n        </svg>\n      ),\n    });\n  }\n\n  if (data.website) {\n    rows.push({\n      label: 'Website',\n      value: data.website,\n      icon: (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n          <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n          <path d=\"M1.5 9h15M9 1.5a11.25 11.25 0 013 7.5 11.25 11.25 0 01-3 7.5 11.25 11.25 0 01-3-7.5 11.25 11.25 0 013-7.5z\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n        </svg>\n      ),\n    });\n  }\n\n  if (data.timeline) {\n    rows.push({\n      label: 'Timeline',\n      value: data.timeline,\n      icon: (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n          <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n          <path d=\"M9 4.5V9l3 1.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      ),\n    });\n  }\n\n  if (data.launchDate) {\n    rows.push({\n      label: 'Launch Date',\n      value: data.launchDate,\n      icon: (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n          <rect x=\"2.25\" y=\"3\" width=\"13.5\" height=\"12.75\" rx=\"2\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n          <path d=\"M12 1.5v3M6 1.5v3M2.25 7.5h13.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n        </svg>\n      ),\n    });\n  }\n\n  if (data.budgetRange) {\n    rows.push({\n      label: 'Budget Range',\n      value: data.budgetRange,\n      icon: (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n          <path d=\"M9 1.5v15M13.5 4.5H6.75a2.625 2.625 0 000 5.25h4.5a2.625 2.625 0 010 5.25H4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      ),\n    });\n  }\n\n  if (rows.length === 0) return null;\n\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-4xl mx-auto px-6\">\n        <ScrollReveal y={30}>\n          <h2\n            className=\"text-3xl md:text-4xl font-bold mb-8\"\n            style={{\n              color: 'var(--sk-text-primary, #ffffff)',\n              fontFamily: 'var(--sk-font-heading, inherit)',\n            }}\n          >\n            Project Details\n          </h2>\n        </ScrollReveal>\n\n        <ScrollReveal y={40} delay={0.1}>\n          <GlassCard padding=\"lg\" hover={false}>\n            <div className=\"flex flex-col divide-y\" style={{ borderColor: 'var(--sk-border, rgba(255,255,255,0.1))' }}>\n              {rows.map((row, index) => (\n                <div\n                  key={index}\n                  className=\"flex items-center gap-4 py-4 first:pt-0 last:pb-0\"\n                  style={{\n                    borderColor: 'var(--sk-border, rgba(255,255,255,0.1))',\n                  }}\n                >\n                  <span\n                    className=\"flex items-center justify-center w-9 h-9 rounded-lg shrink-0\"\n                    style={{\n                      background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 12%, transparent)',\n                      color: 'var(--sk-primary, #6366f1)',\n                    }}\n                  >\n                    {row.icon}\n                  </span>\n                  <span\n                    className=\"text-sm font-medium w-32 shrink-0\"\n                    style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                  >\n                    {row.label}\n                  </span>\n                  {row.label === 'Website' ? (\n                    <a\n                      href={row.value.startsWith('http') ? row.value : `https://${row.value}`}\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\"\n                      className=\"text-sm font-medium hover:underline\"\n                      style={{ color: 'var(--sk-primary, #6366f1)' }}\n                    >\n                      {row.value}\n                    </a>\n                  ) : (\n                    <span\n                      className=\"text-sm font-medium\"\n                      style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                    >\n                      {row.value}\n                    </span>\n                  )}\n                </div>\n              ))}\n            </div>\n          </GlassCard>\n        </ScrollReveal>\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/FeatureSpotlightSection-B7P3JGNL.js

@@ -0,0 +1,205 @@
+'use client';
+import { ScrollReveal } from './chunk-7CFFAKDM.js';
+import { useState, useCallback, useRef, useEffect } from 'react';
+import gsap from 'gsap';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function AnnotationPin({
+  annotation,
+  index,
+  activeIndex,
+  onSelect
+}) {
+  const pinRef = useRef(null);
+  const isActive = activeIndex === index;
+  useEffect(() => {
+    if (!pinRef.current) return;
+    if (isActive) {
+      gsap.to(pinRef.current, {
+        scale: 1.2,
+        duration: 0.3,
+        ease: "back.out(2)"
+      });
+    } else {
+      gsap.to(pinRef.current, {
+        scale: 1,
+        duration: 0.2,
+        ease: "power2.out"
+      });
+    }
+  }, [isActive]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: pinRef,
+      onClick: () => onSelect(isActive ? null : index),
+      className: "absolute z-10 flex items-center justify-center w-8 h-8 rounded-full text-xs font-bold transition-colors cursor-pointer",
+      style: {
+        left: `${annotation.x}%`,
+        top: `${annotation.y}%`,
+        transform: "translate(-50%, -50%)",
+        background: isActive ? "var(--sk-primary, #6366f1)" : "color-mix(in srgb, var(--sk-primary, #6366f1) 80%, transparent)",
+        color: "#ffffff",
+        boxShadow: isActive ? "0 0 20px color-mix(in srgb, var(--sk-primary, #6366f1) 50%, transparent)" : "0 4px 12px rgba(0,0,0,0.3)",
+        border: "2px solid rgba(255,255,255,0.3)",
+        willChange: "transform"
+      },
+      "aria-label": annotation.label,
+      children: [
+        index + 1,
+        isActive && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "absolute bottom-full left-1/2 mb-3 w-56 p-3 rounded-xl text-left",
+            style: {
+              transform: "translateX(-50%)",
+              background: "var(--sk-surface, rgba(255,255,255,0.05))",
+              backdropFilter: "blur(16px)",
+              border: "1px solid var(--sk-border, rgba(255,255,255,0.1))",
+              boxShadow: "0 8px 32px rgba(0,0,0,0.3)"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "text-sm font-semibold mb-1",
+                  style: { color: "var(--sk-text-primary, #ffffff)" },
+                  children: annotation.label
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "text-xs leading-relaxed",
+                  style: { color: "var(--sk-text-tertiary, #71717a)" },
+                  children: annotation.description
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute top-full left-1/2 w-0 h-0",
+                  style: {
+                    transform: "translateX(-50%)",
+                    borderLeft: "6px solid transparent",
+                    borderRight: "6px solid transparent",
+                    borderTop: "6px solid var(--sk-border, rgba(255,255,255,0.1))"
+                  }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function FeatureSpotlightSection({ data }) {
+  const [activeAnnotation, setActiveAnnotation] = useState(null);
+  const imageUrl = data.image?.asset?._ref || "";
+  const layout = data.layout || "left";
+  const handleSelect = useCallback((index) => {
+    setActiveAnnotation(index);
+  }, []);
+  const imageBlock = /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: imageUrl,
+        alt: data.title,
+        className: "w-full h-auto rounded-xl",
+        style: {
+          border: "1px solid var(--sk-border, rgba(255,255,255,0.1))"
+        },
+        loading: "lazy"
+      }
+    ),
+    data.annotations.map((annotation, index) => /* @__PURE__ */ jsx(
+      AnnotationPin,
+      {
+        annotation,
+        index,
+        activeIndex: activeAnnotation,
+        onSelect: handleSelect
+      },
+      index
+    ))
+  ] });
+  const textBlock = /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center gap-4", children: [
+    /* @__PURE__ */ jsx(
+      "h2",
+      {
+        className: "text-3xl md:text-4xl font-bold",
+        style: {
+          color: "var(--sk-text-primary, #ffffff)",
+          fontFamily: "var(--sk-font-heading, inherit)"
+        },
+        children: data.title
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "text-base md:text-lg leading-relaxed",
+        style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+        children: data.description
+      }
+    ),
+    data.annotations.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 mt-4", children: data.annotations.map((annotation, index) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => handleSelect(activeAnnotation === index ? null : index),
+        className: "flex items-start gap-3 text-left p-2 rounded-lg transition-colors cursor-pointer",
+        style: {
+          background: activeAnnotation === index ? "color-mix(in srgb, var(--sk-primary, #6366f1) 10%, transparent)" : "transparent"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold shrink-0",
+              style: {
+                background: "color-mix(in srgb, var(--sk-primary, #6366f1) 20%, transparent)",
+                color: "var(--sk-primary, #6366f1)"
+              },
+              children: index + 1
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-sm font-medium",
+              style: { color: "var(--sk-text-primary, #ffffff)" },
+              children: annotation.label
+            }
+          ) })
+        ]
+      },
+      index
+    )) })
+  ] });
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: "w-full py-20 md:py-28",
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      children: /* @__PURE__ */ jsx("div", { className: "max-w-7xl mx-auto px-6", children: layout === "full" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
+        /* @__PURE__ */ jsx(ScrollReveal, { y: 30, children: textBlock }),
+        /* @__PURE__ */ jsx(ScrollReveal, { y: 40, delay: 0.15, children: /* @__PURE__ */ jsx("div", { className: "relative", children: imageBlock }) })
+      ] }) : /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `grid lg:grid-cols-2 gap-12 items-center ${layout === "right" ? "lg:[direction:rtl] lg:[&>*]:![direction:ltr]" : ""}`,
+          children: [
+            /* @__PURE__ */ jsx(ScrollReveal, { y: 40, children: imageBlock }),
+            /* @__PURE__ */ jsx(ScrollReveal, { y: 40, delay: 0.15, children: textBlock })
+          ]
+        }
+      ) })
+    }
+  );
+}
+
+export { FeatureSpotlightSection as default };
+//# sourceMappingURL=FeatureSpotlightSection-B7P3JGNL.js.map
+//# sourceMappingURL=FeatureSpotlightSection-B7P3JGNL.js.map

package/dist/FeatureSpotlightSection-B7P3JGNL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/FeatureSpotlightSection.tsx"],"names":[],"mappings":"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","file":"FeatureSpotlightSection-B7P3JGNL.js","sourcesContent":["'use client';\n\nimport React, { useRef, useEffect, useState, useCallback } from 'react';\nimport gsap from 'gsap';\nimport type { PortfolioFeatureSpotlightData, PortfolioAnnotation } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\n\ninterface FeatureSpotlightSectionProps {\n  data: PortfolioFeatureSpotlightData;\n}\n\nfunction AnnotationPin({\n  annotation,\n  index,\n  activeIndex,\n  onSelect,\n}: {\n  annotation: PortfolioAnnotation;\n  index: number;\n  activeIndex: number | null;\n  onSelect: (index: number | null) => void;\n}) {\n  const pinRef = useRef<HTMLButtonElement>(null);\n  const isActive = activeIndex === index;\n\n  useEffect(() => {\n    if (!pinRef.current) return;\n\n    if (isActive) {\n      gsap.to(pinRef.current, {\n        scale: 1.2,\n        duration: 0.3,\n        ease: 'back.out(2)',\n      });\n    } else {\n      gsap.to(pinRef.current, {\n        scale: 1,\n        duration: 0.2,\n        ease: 'power2.out',\n      });\n    }\n  }, [isActive]);\n\n  return (\n    <button\n      ref={pinRef}\n      onClick={() => onSelect(isActive ? null : index)}\n      className=\"absolute z-10 flex items-center justify-center w-8 h-8 rounded-full text-xs font-bold transition-colors cursor-pointer\"\n      style={{\n        left: `${annotation.x}%`,\n        top: `${annotation.y}%`,\n        transform: 'translate(-50%, -50%)',\n        background: isActive\n          ? 'var(--sk-primary, #6366f1)'\n          : 'color-mix(in srgb, var(--sk-primary, #6366f1) 80%, transparent)',\n        color: '#ffffff',\n        boxShadow: isActive\n          ? '0 0 20px color-mix(in srgb, var(--sk-primary, #6366f1) 50%, transparent)'\n          : '0 4px 12px rgba(0,0,0,0.3)',\n        border: '2px solid rgba(255,255,255,0.3)',\n        willChange: 'transform',\n      }}\n      aria-label={annotation.label}\n    >\n      {index + 1}\n\n      {/* Tooltip */}\n      {isActive && (\n        <div\n          className=\"absolute bottom-full left-1/2 mb-3 w-56 p-3 rounded-xl text-left\"\n          style={{\n            transform: 'translateX(-50%)',\n            background: 'var(--sk-surface, rgba(255,255,255,0.05))',\n            backdropFilter: 'blur(16px)',\n            border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n            boxShadow: '0 8px 32px rgba(0,0,0,0.3)',\n          }}\n        >\n          <div\n            className=\"text-sm font-semibold mb-1\"\n            style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n          >\n            {annotation.label}\n          </div>\n          <div\n            className=\"text-xs leading-relaxed\"\n            style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n          >\n            {annotation.description}\n          </div>\n          {/* Arrow */}\n          <div\n            className=\"absolute top-full left-1/2 w-0 h-0\"\n            style={{\n              transform: 'translateX(-50%)',\n              borderLeft: '6px solid transparent',\n              borderRight: '6px solid transparent',\n              borderTop: '6px solid var(--sk-border, rgba(255,255,255,0.1))',\n            }}\n          />\n        </div>\n      )}\n    </button>\n  );\n}\n\nexport default function FeatureSpotlightSection({ data }: FeatureSpotlightSectionProps) {\n  const [activeAnnotation, setActiveAnnotation] = useState<number | null>(null);\n\n  const imageUrl = data.image?.asset?._ref || '';\n  const layout = data.layout || 'left';\n\n  const handleSelect = useCallback((index: number | null) => {\n    setActiveAnnotation(index);\n  }, []);\n\n  const imageBlock = (\n    <div className=\"relative w-full\">\n      <img\n        src={imageUrl}\n        alt={data.title}\n        className=\"w-full h-auto rounded-xl\"\n        style={{\n          border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n        }}\n        loading=\"lazy\"\n      />\n      {/* Annotation pins */}\n      {data.annotations.map((annotation, index) => (\n        <AnnotationPin\n          key={index}\n          annotation={annotation}\n          index={index}\n          activeIndex={activeAnnotation}\n          onSelect={handleSelect}\n        />\n      ))}\n    </div>\n  );\n\n  const textBlock = (\n    <div className=\"flex flex-col justify-center gap-4\">\n      <h2\n        className=\"text-3xl md:text-4xl font-bold\"\n        style={{\n          color: 'var(--sk-text-primary, #ffffff)',\n          fontFamily: 'var(--sk-font-heading, inherit)',\n        }}\n      >\n        {data.title}\n      </h2>\n      <p\n        className=\"text-base md:text-lg leading-relaxed\"\n        style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n      >\n        {data.description}\n      </p>\n\n      {/* Annotation legend */}\n      {data.annotations.length > 0 && (\n        <div className=\"flex flex-col gap-2 mt-4\">\n          {data.annotations.map((annotation, index) => (\n            <button\n              key={index}\n              onClick={() => handleSelect(activeAnnotation === index ? null : index)}\n              className=\"flex items-start gap-3 text-left p-2 rounded-lg transition-colors cursor-pointer\"\n              style={{\n                background:\n                  activeAnnotation === index\n                    ? 'color-mix(in srgb, var(--sk-primary, #6366f1) 10%, transparent)'\n                    : 'transparent',\n              }}\n            >\n              <span\n                className=\"flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold shrink-0\"\n                style={{\n                  background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 20%, transparent)',\n                  color: 'var(--sk-primary, #6366f1)',\n                }}\n              >\n                {index + 1}\n              </span>\n              <div>\n                <span\n                  className=\"text-sm font-medium\"\n                  style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                >\n                  {annotation.label}\n                </span>\n              </div>\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\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-7xl mx-auto px-6\">\n        {layout === 'full' ? (\n          <div className=\"flex flex-col gap-8\">\n            <ScrollReveal y={30}>{textBlock}</ScrollReveal>\n            <ScrollReveal y={40} delay={0.15}>\n              <div className=\"relative\">{imageBlock}</div>\n            </ScrollReveal>\n          </div>\n        ) : (\n          <div\n            className={`grid lg:grid-cols-2 gap-12 items-center ${\n              layout === 'right' ? 'lg:[direction:rtl] lg:[&>*]:![direction:ltr]' : ''\n            }`}\n          >\n            <ScrollReveal y={40}>{imageBlock}</ScrollReveal>\n            <ScrollReveal y={40} delay={0.15}>{textBlock}</ScrollReveal>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/FeatureSpotlightSection-WRHXS7TU.cjs

@@ -0,0 +1,210 @@
+'use strict';
+
+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 AnnotationPin({
+  annotation,
+  index,
+  activeIndex,
+  onSelect
+}) {
+  const pinRef = react.useRef(null);
+  const isActive = activeIndex === index;
+  react.useEffect(() => {
+    if (!pinRef.current) return;
+    if (isActive) {
+      gsap__default.default.to(pinRef.current, {
+        scale: 1.2,
+        duration: 0.3,
+        ease: "back.out(2)"
+      });
+    } else {
+      gsap__default.default.to(pinRef.current, {
+        scale: 1,
+        duration: 0.2,
+        ease: "power2.out"
+      });
+    }
+  }, [isActive]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ref: pinRef,
+      onClick: () => onSelect(isActive ? null : index),
+      className: "absolute z-10 flex items-center justify-center w-8 h-8 rounded-full text-xs font-bold transition-colors cursor-pointer",
+      style: {
+        left: `${annotation.x}%`,
+        top: `${annotation.y}%`,
+        transform: "translate(-50%, -50%)",
+        background: isActive ? "var(--sk-primary, #6366f1)" : "color-mix(in srgb, var(--sk-primary, #6366f1) 80%, transparent)",
+        color: "#ffffff",
+        boxShadow: isActive ? "0 0 20px color-mix(in srgb, var(--sk-primary, #6366f1) 50%, transparent)" : "0 4px 12px rgba(0,0,0,0.3)",
+        border: "2px solid rgba(255,255,255,0.3)",
+        willChange: "transform"
+      },
+      "aria-label": annotation.label,
+      children: [
+        index + 1,
+        isActive && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "absolute bottom-full left-1/2 mb-3 w-56 p-3 rounded-xl text-left",
+            style: {
+              transform: "translateX(-50%)",
+              background: "var(--sk-surface, rgba(255,255,255,0.05))",
+              backdropFilter: "blur(16px)",
+              border: "1px solid var(--sk-border, rgba(255,255,255,0.1))",
+              boxShadow: "0 8px 32px rgba(0,0,0,0.3)"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "text-sm font-semibold mb-1",
+                  style: { color: "var(--sk-text-primary, #ffffff)" },
+                  children: annotation.label
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "text-xs leading-relaxed",
+                  style: { color: "var(--sk-text-tertiary, #71717a)" },
+                  children: annotation.description
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute top-full left-1/2 w-0 h-0",
+                  style: {
+                    transform: "translateX(-50%)",
+                    borderLeft: "6px solid transparent",
+                    borderRight: "6px solid transparent",
+                    borderTop: "6px solid var(--sk-border, rgba(255,255,255,0.1))"
+                  }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function FeatureSpotlightSection({ data }) {
+  const [activeAnnotation, setActiveAnnotation] = react.useState(null);
+  const imageUrl = data.image?.asset?._ref || "";
+  const layout = data.layout || "left";
+  const handleSelect = react.useCallback((index) => {
+    setActiveAnnotation(index);
+  }, []);
+  const imageBlock = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: imageUrl,
+        alt: data.title,
+        className: "w-full h-auto rounded-xl",
+        style: {
+          border: "1px solid var(--sk-border, rgba(255,255,255,0.1))"
+        },
+        loading: "lazy"
+      }
+    ),
+    data.annotations.map((annotation, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      AnnotationPin,
+      {
+        annotation,
+        index,
+        activeIndex: activeAnnotation,
+        onSelect: handleSelect
+      },
+      index
+    ))
+  ] });
+  const textBlock = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "h2",
+      {
+        className: "text-3xl md:text-4xl font-bold",
+        style: {
+          color: "var(--sk-text-primary, #ffffff)",
+          fontFamily: "var(--sk-font-heading, inherit)"
+        },
+        children: data.title
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: "text-base md:text-lg leading-relaxed",
+        style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+        children: data.description
+      }
+    ),
+    data.annotations.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 mt-4", children: data.annotations.map((annotation, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: () => handleSelect(activeAnnotation === index ? null : index),
+        className: "flex items-start gap-3 text-left p-2 rounded-lg transition-colors cursor-pointer",
+        style: {
+          background: activeAnnotation === index ? "color-mix(in srgb, var(--sk-primary, #6366f1) 10%, transparent)" : "transparent"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold shrink-0",
+              style: {
+                background: "color-mix(in srgb, var(--sk-primary, #6366f1) 20%, transparent)",
+                color: "var(--sk-primary, #6366f1)"
+              },
+              children: index + 1
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "text-sm font-medium",
+              style: { color: "var(--sk-text-primary, #ffffff)" },
+              children: annotation.label
+            }
+          ) })
+        ]
+      },
+      index
+    )) })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "section",
+    {
+      className: "w-full py-20 md:py-28",
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-7xl mx-auto px-6", children: layout === "full" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 30, children: textBlock }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 40, delay: 0.15, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: imageBlock }) })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: `grid lg:grid-cols-2 gap-12 items-center ${layout === "right" ? "lg:[direction:rtl] lg:[&>*]:![direction:ltr]" : ""}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 40, children: imageBlock }),
+            /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 40, delay: 0.15, children: textBlock })
+          ]
+        }
+      ) })
+    }
+  );
+}
+
+module.exports = FeatureSpotlightSection;
+//# sourceMappingURL=FeatureSpotlightSection-WRHXS7TU.cjs.map
+//# sourceMappingURL=FeatureSpotlightSection-WRHXS7TU.cjs.map