@sonordev/agency-site-kit 0.1.0

package/dist/CTASection-BJA72XIL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/CTASection.tsx"],"names":[],"mappings":"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","file":"CTASection-BJA72XIL.js","sourcesContent":["'use client';\n\nimport React, { useRef, useCallback } from 'react';\nimport gsap from 'gsap';\nimport type { PortfolioCTAData } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\nimport GlassCard from '../primitives/GlassCard';\n\ninterface CTASectionProps {\n  data: PortfolioCTAData;\n}\n\nexport default function CTASection({ data }: CTASectionProps) {\n  const buttonRef = useRef<HTMLAnchorElement>(null);\n  const style = data.style || 'primary';\n\n  const handleMouseEnter = useCallback(() => {\n    if (!buttonRef.current) return;\n    gsap.to(buttonRef.current, {\n      scale: 1.05,\n      y: -2,\n      duration: 0.25,\n      ease: 'power2.out',\n    });\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    if (!buttonRef.current) return;\n    gsap.to(buttonRef.current, {\n      scale: 1,\n      y: 0,\n      duration: 0.25,\n      ease: 'power2.out',\n    });\n  }, []);\n\n  const content = (\n    <div className=\"flex flex-col items-center text-center gap-6 py-12 px-8 md:px-16\">\n      <ScrollReveal y={30}>\n        <h2\n          className=\"text-3xl md:text-4xl lg:text-5xl font-bold leading-tight\"\n          style={{\n            color: style === 'primary' ? '#ffffff' : 'var(--sk-text-primary, #ffffff)',\n            fontFamily: 'var(--sk-font-heading, inherit)',\n          }}\n        >\n          {data.headline}\n        </h2>\n      </ScrollReveal>\n\n      <ScrollReveal y={20} delay={0.15}>\n        <p\n          className=\"text-base md:text-lg max-w-xl leading-relaxed\"\n          style={{\n            color: style === 'primary' ? 'rgba(255,255,255,0.85)' : 'var(--sk-text-secondary, #a1a1aa)',\n          }}\n        >\n          {data.description}\n        </p>\n      </ScrollReveal>\n\n      <ScrollReveal y={20} delay={0.3}>\n        <a\n          ref={buttonRef}\n          href={data.buttonUrl}\n          onMouseEnter={handleMouseEnter}\n          onMouseLeave={handleMouseLeave}\n          className=\"inline-flex items-center gap-2 px-8 py-4 rounded-xl text-base font-semibold transition-colors\"\n          style={{\n            background:\n              style === 'primary'\n                ? '#ffffff'\n                : 'var(--sk-primary, #6366f1)',\n            color:\n              style === 'primary'\n                ? 'var(--sk-primary, #6366f1)'\n                : '#ffffff',\n            boxShadow: '0 4px 20px rgba(0,0,0,0.2)',\n            willChange: 'transform',\n          }}\n        >\n          {data.buttonText}\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n            <path d=\"M3.75 9h10.5M9.75 4.5L14.25 9l-4.5 4.5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          </svg>\n        </a>\n      </ScrollReveal>\n    </div>\n  );\n\n  return (\n    <section className=\"w-full py-20 md:py-28\">\n      <div className=\"max-w-5xl mx-auto px-6\">\n        {style === 'primary' ? (\n          <div\n            className=\"relative overflow-hidden rounded-2xl\"\n            style={{\n              background: `linear-gradient(135deg, var(--sk-primary, #6366f1) 0%, color-mix(in srgb, var(--sk-primary, #6366f1) 70%, #000000) 100%)`,\n            }}\n          >\n            {/* Background gradient decorations */}\n            <div\n              className=\"absolute -top-24 -right-24 w-64 h-64 rounded-full opacity-20\"\n              style={{\n                background: 'radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%)',\n              }}\n            />\n            <div\n              className=\"absolute -bottom-16 -left-16 w-48 h-48 rounded-full opacity-15\"\n              style={{\n                background: 'radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%)',\n              }}\n            />\n            <div className=\"relative z-10\">{content}</div>\n          </div>\n        ) : (\n          <GlassCard padding=\"sm\" hover={false}>\n            {content}\n          </GlassCard>\n        )}\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/ChallengesSection-GEQGVSJN.js

@@ -0,0 +1,180 @@
+import { GlassCard } from './chunk-YB4B3OMC.js';
+import { ScrollReveal } from './chunk-7CFFAKDM.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function ChallengeIcon({ name }) {
+  if (!name) return null;
+  const icons = {
+    speed: /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+    seo: /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+      /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8", stroke: "currentColor", strokeWidth: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M21 21l-4.35-4.35", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+    ] }),
+    design: /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+    conversion: /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M22 12h-4l-3 9L9 3l-3 9H2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+    mobile: /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+      /* @__PURE__ */ jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", stroke: "currentColor", strokeWidth: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 18h.01", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+    ] }),
+    content: /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+      /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsx("path", { d: "M14 2v6h6M16 13H8M16 17H8M10 9H8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+    ] })
+  };
+  return /* @__PURE__ */ jsx("span", { style: { color: "var(--sk-primary, #6366f1)" }, children: icons[name] || icons.speed });
+}
+function ChallengesSection({ data }) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: "w-full py-20 md:py-28",
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      children: /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto px-6", children: [
+        /* @__PURE__ */ jsxs(ScrollReveal, { y: 30, children: [
+          /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: "text-3xl md:text-4xl font-bold mb-4",
+              style: {
+                color: "var(--sk-text-primary, #ffffff)",
+                fontFamily: "var(--sk-font-heading, inherit)"
+              },
+              children: "Challenges & Solutions"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-lg mb-12 max-w-2xl",
+              style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+              children: "Every great project starts with obstacles to overcome. Here is how we tackled them."
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-8", children: data.items.map((item, index) => {
+          const isEven = index % 2 === 0;
+          return /* @__PURE__ */ jsx(ScrollReveal, { y: 40, delay: index * 0.1, children: /* @__PURE__ */ jsx(GlassCard, { padding: "lg", hover: false, children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `flex flex-col lg:flex-row gap-8 ${isEven ? "" : "lg:flex-row-reverse"}`,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-3", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "flex items-center justify-center w-10 h-10 rounded-full text-sm font-bold shrink-0",
+                        style: {
+                          background: "color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)",
+                          color: "var(--sk-primary, #6366f1)",
+                          border: "1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 25%, transparent)"
+                        },
+                        children: String(index + 1).padStart(2, "0")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(ChallengeIcon, { name: item.icon }),
+                    /* @__PURE__ */ jsx(
+                      "h3",
+                      {
+                        className: "text-xl font-semibold",
+                        style: { color: "var(--sk-text-primary, #ffffff)" },
+                        children: item.title
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: "text-base leading-relaxed",
+                      style: { color: "var(--sk-text-tertiary, #71717a)" },
+                      children: item.description
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "hidden lg:block w-px self-stretch",
+                    style: {
+                      background: "var(--sk-border, rgba(255,255,255,0.1))"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "lg:hidden h-px w-full",
+                    style: {
+                      background: "var(--sk-border, rgba(255,255,255,0.1))"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-3", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        width: "20",
+                        height: "20",
+                        viewBox: "0 0 20 20",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        style: { color: "#10b981" },
+                        children: /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            d: "M16.667 5L7.5 14.167 3.333 10",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round"
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "text-sm font-semibold uppercase tracking-wider",
+                        style: { color: "#10b981" },
+                        children: "Solution"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: "text-base leading-relaxed",
+                      style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+                      children: item.solution
+                    }
+                  ),
+                  item.result && /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "mt-2 px-4 py-2 rounded-lg text-sm",
+                      style: {
+                        background: "color-mix(in srgb, var(--sk-primary, #6366f1) 8%, transparent)",
+                        color: "var(--sk-primary, #6366f1)",
+                        border: "1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Result:" }),
+                        " ",
+                        item.result
+                      ]
+                    }
+                  )
+                ] })
+              ]
+            }
+          ) }) }, index);
+        }) })
+      ] })
+    }
+  );
+}
+
+export { ChallengesSection as default };
+//# sourceMappingURL=ChallengesSection-GEQGVSJN.js.map
+//# sourceMappingURL=ChallengesSection-GEQGVSJN.js.map

package/dist/ChallengesSection-GEQGVSJN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/ChallengesSection.tsx"],"names":[],"mappings":"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","file":"ChallengesSection-GEQGVSJN.js","sourcesContent":["'use client';\n\nimport React from 'react';\nimport type { PortfolioChallengesData } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\nimport GlassCard from '../primitives/GlassCard';\n\ninterface ChallengesSectionProps {\n  data: PortfolioChallengesData;\n}\n\n/** Icon registry lookup. Returns an inline SVG for known icon keys. */\nfunction ChallengeIcon({ name }: { name?: string }) {\n  if (!name) return null;\n\n  const icons: Record<string, React.ReactNode> = {\n    speed: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    ),\n    seo: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"11\" cy=\"11\" r=\"8\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        <path d=\"M21 21l-4.35-4.35\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n      </svg>\n    ),\n    design: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    ),\n    conversion: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M22 12h-4l-3 9L9 3l-3 9H2\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    ),\n    mobile: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        <path d=\"M12 18h.01\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n      </svg>\n    ),\n    content: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        <path d=\"M14 2v6h6M16 13H8M16 17H8M10 9H8\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    ),\n  };\n\n  return (\n    <span style={{ color: 'var(--sk-primary, #6366f1)' }}>\n      {icons[name] || icons.speed}\n    </span>\n  );\n}\n\nexport default function ChallengesSection({ data }: ChallengesSectionProps) {\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-7xl mx-auto px-6\">\n        <ScrollReveal y={30}>\n          <h2\n            className=\"text-3xl md:text-4xl font-bold mb-4\"\n            style={{\n              color: 'var(--sk-text-primary, #ffffff)',\n              fontFamily: 'var(--sk-font-heading, inherit)',\n            }}\n          >\n            Challenges &amp; Solutions\n          </h2>\n          <p\n            className=\"text-lg mb-12 max-w-2xl\"\n            style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n          >\n            Every great project starts with obstacles to overcome. Here is how we tackled them.\n          </p>\n        </ScrollReveal>\n\n        <div className=\"flex flex-col gap-8\">\n          {data.items.map((item, index) => {\n            const isEven = index % 2 === 0;\n            return (\n              <ScrollReveal key={index} y={40} delay={index * 0.1}>\n                <GlassCard padding=\"lg\" hover={false}>\n                  <div\n                    className={`flex flex-col lg:flex-row gap-8 ${\n                      isEven ? '' : 'lg:flex-row-reverse'\n                    }`}\n                  >\n                    {/* Challenge side */}\n                    <div className=\"flex-1 flex flex-col gap-3\">\n                      <div className=\"flex items-center gap-3\">\n                        {/* Number badge */}\n                        <span\n                          className=\"flex items-center justify-center w-10 h-10 rounded-full text-sm font-bold shrink-0\"\n                          style={{\n                            background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)',\n                            color: 'var(--sk-primary, #6366f1)',\n                            border: '1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 25%, transparent)',\n                          }}\n                        >\n                          {String(index + 1).padStart(2, '0')}\n                        </span>\n                        <ChallengeIcon name={item.icon} />\n                        <h3\n                          className=\"text-xl font-semibold\"\n                          style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                        >\n                          {item.title}\n                        </h3>\n                      </div>\n                      <p\n                        className=\"text-base leading-relaxed\"\n                        style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                      >\n                        {item.description}\n                      </p>\n                    </div>\n\n                    {/* Divider */}\n                    <div\n                      className=\"hidden lg:block w-px self-stretch\"\n                      style={{\n                        background: 'var(--sk-border, rgba(255,255,255,0.1))',\n                      }}\n                    />\n                    <div\n                      className=\"lg:hidden h-px w-full\"\n                      style={{\n                        background: 'var(--sk-border, rgba(255,255,255,0.1))',\n                      }}\n                    />\n\n                    {/* Solution side */}\n                    <div className=\"flex-1 flex flex-col gap-3\">\n                      <div className=\"flex items-center gap-2\">\n                        <svg\n                          width=\"20\"\n                          height=\"20\"\n                          viewBox=\"0 0 20 20\"\n                          fill=\"none\"\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          style={{ color: '#10b981' }}\n                        >\n                          <path\n                            d=\"M16.667 5L7.5 14.167 3.333 10\"\n                            stroke=\"currentColor\"\n                            strokeWidth=\"2\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                          />\n                        </svg>\n                        <span\n                          className=\"text-sm font-semibold uppercase tracking-wider\"\n                          style={{ color: '#10b981' }}\n                        >\n                          Solution\n                        </span>\n                      </div>\n                      <p\n                        className=\"text-base leading-relaxed\"\n                        style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n                      >\n                        {item.solution}\n                      </p>\n                      {item.result && (\n                        <div\n                          className=\"mt-2 px-4 py-2 rounded-lg text-sm\"\n                          style={{\n                            background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 8%, transparent)',\n                            color: 'var(--sk-primary, #6366f1)',\n                            border: '1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)',\n                          }}\n                        >\n                          <span className=\"font-semibold\">Result:</span> {item.result}\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                </GlassCard>\n              </ScrollReveal>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/ChallengesSection-IZ3DHECS.cjs

@@ -0,0 +1,182 @@
+'use strict';
+
+var chunkKEOHORIH_cjs = require('./chunk-KEOHORIH.cjs');
+var chunkIKBK7HYX_cjs = require('./chunk-IKBK7HYX.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+
+function ChallengeIcon({ name }) {
+  if (!name) return null;
+  const icons = {
+    speed: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+    seo: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8", stroke: "currentColor", strokeWidth: "2" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 21l-4.35-4.35", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+    ] }),
+    design: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+    conversion: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 12h-4l-3 9L9 3l-3 9H2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+    mobile: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", stroke: "currentColor", strokeWidth: "2" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 18h.01", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+    ] }),
+    content: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2v6h6M16 13H8M16 17H8M10 9H8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+    ] })
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--sk-primary, #6366f1)" }, children: icons[name] || icons.speed });
+}
+function ChallengesSection({ data }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "section",
+    {
+      className: "w-full py-20 md:py-28",
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-7xl mx-auto px-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkIKBK7HYX_cjs.ScrollReveal, { y: 30, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: "text-3xl md:text-4xl font-bold mb-4",
+              style: {
+                color: "var(--sk-text-primary, #ffffff)",
+                fontFamily: "var(--sk-font-heading, inherit)"
+              },
+              children: "Challenges & Solutions"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "text-lg mb-12 max-w-2xl",
+              style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+              children: "Every great project starts with obstacles to overcome. Here is how we tackled them."
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-8", children: data.items.map((item, index) => {
+          const isEven = index % 2 === 0;
+          return /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 40, delay: index * 0.1, children: /* @__PURE__ */ jsxRuntime.jsx(chunkKEOHORIH_cjs.GlassCard, { padding: "lg", hover: false, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: `flex flex-col lg:flex-row gap-8 ${isEven ? "" : "lg:flex-row-reverse"}`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col gap-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: "flex items-center justify-center w-10 h-10 rounded-full text-sm font-bold shrink-0",
+                        style: {
+                          background: "color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)",
+                          color: "var(--sk-primary, #6366f1)",
+                          border: "1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 25%, transparent)"
+                        },
+                        children: String(index + 1).padStart(2, "0")
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(ChallengeIcon, { name: item.icon }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "h3",
+                      {
+                        className: "text-xl font-semibold",
+                        style: { color: "var(--sk-text-primary, #ffffff)" },
+                        children: item.title
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: "text-base leading-relaxed",
+                      style: { color: "var(--sk-text-tertiary, #71717a)" },
+                      children: item.description
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "hidden lg:block w-px self-stretch",
+                    style: {
+                      background: "var(--sk-border, rgba(255,255,255,0.1))"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "lg:hidden h-px w-full",
+                    style: {
+                      background: "var(--sk-border, rgba(255,255,255,0.1))"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col gap-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "svg",
+                      {
+                        width: "20",
+                        height: "20",
+                        viewBox: "0 0 20 20",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        style: { color: "#10b981" },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          "path",
+                          {
+                            d: "M16.667 5L7.5 14.167 3.333 10",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round"
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: "text-sm font-semibold uppercase tracking-wider",
+                        style: { color: "#10b981" },
+                        children: "Solution"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: "text-base leading-relaxed",
+                      style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+                      children: item.solution
+                    }
+                  ),
+                  item.result && /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: "mt-2 px-4 py-2 rounded-lg text-sm",
+                      style: {
+                        background: "color-mix(in srgb, var(--sk-primary, #6366f1) 8%, transparent)",
+                        color: "var(--sk-primary, #6366f1)",
+                        border: "1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: "Result:" }),
+                        " ",
+                        item.result
+                      ]
+                    }
+                  )
+                ] })
+              ]
+            }
+          ) }) }, index);
+        }) })
+      ] })
+    }
+  );
+}
+
+module.exports = ChallengesSection;
+//# sourceMappingURL=ChallengesSection-IZ3DHECS.cjs.map
+//# sourceMappingURL=ChallengesSection-IZ3DHECS.cjs.map

package/dist/ChallengesSection-IZ3DHECS.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/ChallengesSection.tsx"],"names":["jsx","jsxs","ScrollReveal","GlassCard"],"mappings":"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","file":"ChallengesSection-IZ3DHECS.cjs","sourcesContent":["'use client';\n\nimport React from 'react';\nimport type { PortfolioChallengesData } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\nimport GlassCard from '../primitives/GlassCard';\n\ninterface ChallengesSectionProps {\n  data: PortfolioChallengesData;\n}\n\n/** Icon registry lookup. Returns an inline SVG for known icon keys. */\nfunction ChallengeIcon({ name }: { name?: string }) {\n  if (!name) return null;\n\n  const icons: Record<string, React.ReactNode> = {\n    speed: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    ),\n    seo: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"11\" cy=\"11\" r=\"8\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        <path d=\"M21 21l-4.35-4.35\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n      </svg>\n    ),\n    design: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    ),\n    conversion: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M22 12h-4l-3 9L9 3l-3 9H2\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    ),\n    mobile: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        <path d=\"M12 18h.01\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n      </svg>\n    ),\n    content: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        <path d=\"M14 2v6h6M16 13H8M16 17H8M10 9H8\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    ),\n  };\n\n  return (\n    <span style={{ color: 'var(--sk-primary, #6366f1)' }}>\n      {icons[name] || icons.speed}\n    </span>\n  );\n}\n\nexport default function ChallengesSection({ data }: ChallengesSectionProps) {\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-7xl mx-auto px-6\">\n        <ScrollReveal y={30}>\n          <h2\n            className=\"text-3xl md:text-4xl font-bold mb-4\"\n            style={{\n              color: 'var(--sk-text-primary, #ffffff)',\n              fontFamily: 'var(--sk-font-heading, inherit)',\n            }}\n          >\n            Challenges &amp; Solutions\n          </h2>\n          <p\n            className=\"text-lg mb-12 max-w-2xl\"\n            style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n          >\n            Every great project starts with obstacles to overcome. Here is how we tackled them.\n          </p>\n        </ScrollReveal>\n\n        <div className=\"flex flex-col gap-8\">\n          {data.items.map((item, index) => {\n            const isEven = index % 2 === 0;\n            return (\n              <ScrollReveal key={index} y={40} delay={index * 0.1}>\n                <GlassCard padding=\"lg\" hover={false}>\n                  <div\n                    className={`flex flex-col lg:flex-row gap-8 ${\n                      isEven ? '' : 'lg:flex-row-reverse'\n                    }`}\n                  >\n                    {/* Challenge side */}\n                    <div className=\"flex-1 flex flex-col gap-3\">\n                      <div className=\"flex items-center gap-3\">\n                        {/* Number badge */}\n                        <span\n                          className=\"flex items-center justify-center w-10 h-10 rounded-full text-sm font-bold shrink-0\"\n                          style={{\n                            background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)',\n                            color: 'var(--sk-primary, #6366f1)',\n                            border: '1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 25%, transparent)',\n                          }}\n                        >\n                          {String(index + 1).padStart(2, '0')}\n                        </span>\n                        <ChallengeIcon name={item.icon} />\n                        <h3\n                          className=\"text-xl font-semibold\"\n                          style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                        >\n                          {item.title}\n                        </h3>\n                      </div>\n                      <p\n                        className=\"text-base leading-relaxed\"\n                        style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                      >\n                        {item.description}\n                      </p>\n                    </div>\n\n                    {/* Divider */}\n                    <div\n                      className=\"hidden lg:block w-px self-stretch\"\n                      style={{\n                        background: 'var(--sk-border, rgba(255,255,255,0.1))',\n                      }}\n                    />\n                    <div\n                      className=\"lg:hidden h-px w-full\"\n                      style={{\n                        background: 'var(--sk-border, rgba(255,255,255,0.1))',\n                      }}\n                    />\n\n                    {/* Solution side */}\n                    <div className=\"flex-1 flex flex-col gap-3\">\n                      <div className=\"flex items-center gap-2\">\n                        <svg\n                          width=\"20\"\n                          height=\"20\"\n                          viewBox=\"0 0 20 20\"\n                          fill=\"none\"\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          style={{ color: '#10b981' }}\n                        >\n                          <path\n                            d=\"M16.667 5L7.5 14.167 3.333 10\"\n                            stroke=\"currentColor\"\n                            strokeWidth=\"2\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                          />\n                        </svg>\n                        <span\n                          className=\"text-sm font-semibold uppercase tracking-wider\"\n                          style={{ color: '#10b981' }}\n                        >\n                          Solution\n                        </span>\n                      </div>\n                      <p\n                        className=\"text-base leading-relaxed\"\n                        style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n                      >\n                        {item.solution}\n                      </p>\n                      {item.result && (\n                        <div\n                          className=\"mt-2 px-4 py-2 rounded-lg text-sm\"\n                          style={{\n                            background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 8%, transparent)',\n                            color: 'var(--sk-primary, #6366f1)',\n                            border: '1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)',\n                          }}\n                        >\n                          <span className=\"font-semibold\">Result:</span> {item.result}\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                </GlassCard>\n              </ScrollReveal>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n"]}