@nimblegiant/stilts 0.1.0

package/dist/index.js

@@ -0,0 +1,2434 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Moon, Sun, X, Menu, ArrowRight } from 'lucide-react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/components/layout/index.ts
+var layout_exports = {};
+__export(layout_exports, {
+  MainNav: () => MainNav
+});
+function MainNav({ currentPath, isPortfolioPage = false }) {
+  const [theme, setTheme] = useState(() => {
+    if (typeof document !== "undefined") {
+      return document.documentElement.getAttribute("data-theme") || "light";
+    }
+    return "light";
+  });
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
+  useEffect(() => {
+    let ticking = false;
+    const handleScroll = () => {
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          setIsScrolled(window.scrollY > 50);
+          ticking = false;
+        });
+        ticking = true;
+      }
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+  useEffect(() => {
+    if (isMenuOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isMenuOpen]);
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && isMenuOpen) {
+        setIsMenuOpen(false);
+      }
+    };
+    window.addEventListener("keydown", handleEscape);
+    return () => window.removeEventListener("keydown", handleEscape);
+  }, [isMenuOpen]);
+  const toggleTheme = useCallback(() => {
+    const newTheme = theme === "light" ? "dark" : "light";
+    setTheme(newTheme);
+    document.documentElement.setAttribute("data-theme", newTheme);
+    localStorage.setItem("theme", newTheme);
+  }, [theme]);
+  const navLinks = [
+    { href: "/", label: "HOME" },
+    { href: "/about", label: "ABOUT" },
+    { href: "/services", label: "SERVICES" },
+    { href: "/contact", label: "CONTACT" }
+  ];
+  const isActive = (href) => {
+    if (href === "/") return currentPath === "/";
+    return currentPath.startsWith(href);
+  };
+  const showLightText = isPortfolioPage && !isScrolled || theme === "dark";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("a", { href: "#main-content", className: "skip-link", children: "Skip to main content" }),
+    /* @__PURE__ */ jsx(
+      "nav",
+      {
+        role: "navigation",
+        "aria-label": "Main navigation",
+        className: `fixed top-0 right-0 left-0 z-[var(--z-nav)] border-b border-[var(--color-border)]/0 transition-all duration-300 ease-out ${isScrolled ? "bg-[var(--color-surface-overlay)]/0 backdrop-blur-sm" : "bg-transparent"} `,
+        children: /* @__PURE__ */ jsxs("div", { className: "container-xl container flex h-20 items-center justify-between sm:p-6 lg:p-14", children: [
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: "/",
+              className: "flex-shrink-0 transition-opacity duration-200 hover:opacity-70",
+              "aria-label": "Nimble Giant - Home",
+              children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: showLightText ? "/images/logo-light.svg" : "/images/logo-dark.svg",
+                  alt: "",
+                  "aria-hidden": "true",
+                  className: "h-10 w-auto"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-12 md:flex", children: [
+            /* @__PURE__ */ jsx("ul", { className: "flex items-center gap-10", role: "list", children: navLinks.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: link.href,
+                className: `relative py-2 text-sm font-medium tracking-wider transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent focus-visible:outline-none ${showLightText ? "text-white/70 hover:text-white" : "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]"} ${isActive(link.href) ? showLightText ? "!text-white" : "!text-[var(--color-text-primary)]" : ""} `,
+                "aria-current": isActive(link.href) ? "page" : void 0,
+                children: [
+                  link.label,
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `absolute right-0 -bottom-1 left-0 h-0.5 rounded-full transition-all duration-200 ${isActive(link.href) ? showLightText ? "bg-gradient-to-r from-[var(--color-dot-magenta)] via-[var(--color-dot-purple)] to-[var(--color-dot-turquoise)]" : "bg-gradient-to-r from-[var(--color-dot-magenta)] via-[var(--color-dot-purple)] to-[var(--color-dot-turquoise)]" : "bg-transparent"} `,
+                      "aria-hidden": "true"
+                    }
+                  )
+                ]
+              }
+            ) }, link.href)) }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: toggleTheme,
+                className: `p-1 transition-all duration-200 focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 focus-visible:outline-none ${showLightText ? "text-white/70 hover:text-white" : "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]"} `,
+                "aria-label": `Switch to ${theme === "light" ? "dark" : "light"} mode`,
+                title: `Switch to ${theme === "light" ? "dark" : "light"} mode`,
+                children: theme === "light" ? /* @__PURE__ */ jsx(Moon, { className: "h-5 w-5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Sun, { className: "h-5 w-5", "aria-hidden": "true" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setIsMenuOpen(!isMenuOpen),
+              className: `p-2 transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:outline-none md:hidden ${showLightText ? "text-white/70 hover:text-white" : "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]"} `,
+              "aria-label": isMenuOpen ? "Close navigation menu" : "Open navigation menu",
+              "aria-expanded": isMenuOpen,
+              "aria-controls": "mobile-menu",
+              children: isMenuOpen ? /* @__PURE__ */ jsx(X, { className: "h-6 w-6", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Menu, { className: "h-6 w-6", "aria-hidden": "true" })
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: "mobile-menu",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Navigation menu",
+        className: `fixed inset-0 z-[calc(var(--z-nav)-1)] transition-all duration-300 ease-out md:hidden ${isMenuOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"} `,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300 ${isMenuOpen ? "opacity-100" : "opacity-0"} `,
+              onClick: () => setIsMenuOpen(false),
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `absolute top-0 right-0 h-full w-full max-w-sm border-l border-[var(--color-border)] bg-[var(--color-background)] transition-transform duration-300 ease-out ${isMenuOpen ? "translate-x-0" : "translate-x-full"} `,
+              children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col px-6 pt-24 pb-8", children: [
+                /* @__PURE__ */ jsx("nav", { className: "flex-1", children: /* @__PURE__ */ jsx("ul", { className: "space-y-1", role: "list", children: navLinks.map((link, index) => /* @__PURE__ */ jsx(
+                  "li",
+                  {
+                    className: `transition-all duration-300 ${isMenuOpen ? "translate-x-0 opacity-100" : "translate-x-8 opacity-0"} `,
+                    style: { transitionDelay: isMenuOpen ? `${index * 50 + 100}ms` : "0ms" },
+                    children: /* @__PURE__ */ jsxs(
+                      "a",
+                      {
+                        href: link.href,
+                        onClick: () => setIsMenuOpen(false),
+                        className: `group flex items-center justify-between rounded-lg px-4 py-3 text-base font-medium tracking-wide transition-colors duration-200 hover:bg-[var(--color-background-muted)] focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:outline-none ${isActive(link.href) ? "bg-[var(--color-background-muted)] text-[var(--color-text-primary)]" : "text-[var(--color-text-muted)]"} `,
+                        "aria-current": isActive(link.href) ? "page" : void 0,
+                        children: [
+                          link.label,
+                          /* @__PURE__ */ jsx(
+                            ArrowRight,
+                            {
+                              className: `h-4 w-4 transition-all duration-200 ${isActive(link.href) ? "opacity-50" : "opacity-0 group-hover:opacity-30"} `,
+                              "aria-hidden": "true"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  },
+                  link.href
+                )) }) }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: `border-t border-[var(--color-border)] pt-6 transition-all duration-300 ${isMenuOpen ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0"} `,
+                    style: { transitionDelay: isMenuOpen ? "300ms" : "0ms" },
+                    children: /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: toggleTheme,
+                        className: "flex w-full items-center justify-between rounded-lg px-4 py-3 text-[var(--color-text-muted)] transition-colors duration-200 hover:bg-[var(--color-background-muted)] hover:text-[var(--color-text-primary)] focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:outline-none",
+                        "aria-label": `Switch to ${theme === "light" ? "dark" : "light"} mode`,
+                        children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-3", children: [
+                          theme === "light" ? /* @__PURE__ */ jsx(Moon, { className: "h-5 w-5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Sun, { className: "h-5 w-5", "aria-hidden": "true" }),
+                          /* @__PURE__ */ jsx("span", { className: "font-medium tracking-wide", children: theme === "light" ? "DARK MODE" : "LIGHT MODE" })
+                        ] })
+                      }
+                    )
+                  }
+                )
+              ] })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/ui/index.ts
+var ui_exports = {};
+__export(ui_exports, {
+  Toast: () => ToastContainer
+});
+var icons = {
+  success: /* @__PURE__ */ jsx("svg", { className: "h-5 w-5 text-green-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+  error: /* @__PURE__ */ jsx("svg", { className: "h-5 w-5 text-red-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }),
+  info: /* @__PURE__ */ jsx("svg", { className: "h-5 w-5 text-blue-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+    }
+  ) }),
+  warning: /* @__PURE__ */ jsx("svg", { className: "h-5 w-5 text-yellow-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+    }
+  ) })
+};
+var typeStyles = {
+  success: "border-green-500/30 bg-green-500/10",
+  error: "border-red-500/30 bg-red-500/10",
+  info: "border-blue-500/30 bg-blue-500/10",
+  warning: "border-yellow-500/30 bg-yellow-500/10"
+};
+function ToastContainer() {
+  const [toasts, setToasts] = useState([]);
+  const removeToast = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const addToast = useCallback(
+    (options) => {
+      const id = Math.random().toString(36).substring(2, 9);
+      const toast = {
+        id,
+        type: options.type || "info",
+        title: options.title,
+        message: options.message,
+        duration: options.duration !== void 0 ? options.duration : 5e3
+      };
+      setToasts((prev) => [...prev, toast]);
+      if (toast.duration && toast.duration > 0) {
+        setTimeout(() => removeToast(id), toast.duration);
+      }
+    },
+    [removeToast]
+  );
+  useEffect(() => {
+    window.showToast = addToast;
+    return () => {
+      delete window.showToast;
+    };
+  }, [addToast, removeToast]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: "toast-container",
+      className: "fixed right-4 bottom-4 z-[var(--z-toast)] flex flex-col gap-2 backdrop-blur-md",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      children: toasts.map((toast) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `animate-in slide-in-from-right flex max-w-md min-w-[300px] items-start gap-3 rounded-lg border px-4 py-3 text-[var(--color-text-primary)] shadow-lg transition-all duration-300 ${typeStyles[toast.type || "info"]}`,
+          role: "alert",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "mt-0.5 shrink-0", children: icons[toast.type || "info"] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+              toast.title && /* @__PURE__ */ jsx("p", { className: "font-medium", children: toast.title }),
+              toast.message && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm opacity-80", children: toast.message })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => removeToast(toast.id),
+                className: "-mt-1 -mr-1 shrink-0 cursor-pointer rounded p-1 opacity-60 transition-opacity hover:opacity-100",
+                "aria-label": "Dismiss",
+                children: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M6 18L18 6M6 6l12 12"
+                  }
+                ) })
+              }
+            )
+          ]
+        },
+        toast.id
+      ))
+    }
+  );
+}
+
+// src/components/patterns/index.ts
+var patterns_exports = {};
+__export(patterns_exports, {
+  ContentPage: () => ContentPage,
+  IndustryGrid: () => IndustryGrid,
+  PageHero: () => PageHero,
+  ProcessSteps: () => ProcessSteps,
+  ServiceSection: () => ServiceSection,
+  StatBar: () => StatBar,
+  TeamGrid: () => TeamGrid,
+  VideoHero: () => VideoHero
+});
+function PageHero({
+  title,
+  subtitle,
+  eyebrow,
+  description,
+  backgroundImage,
+  align = "left",
+  children
+}) {
+  const alignClasses = {
+    left: "",
+    center: "text-center mx-auto",
+    right: "text-right ml-auto"
+  };
+  return /* @__PURE__ */ jsxs("section", { className: "hero-container relative pt-32 pb-20", children: [
+    backgroundImage && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-0", children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: backgroundImage,
+        alt: "",
+        className: "h-full w-full object-cover opacity-25",
+        "aria-hidden": "true"
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "container-xl relative z-10 container", children: /* @__PURE__ */ jsxs("div", { className: `${align !== "left" ? "max-w-4xl" : ""} ${alignClasses[align]}`, children: [
+      eyebrow && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "hero-animate mb-6 inline-flex gap-2 bg-gradient-to-r from-[var(--color-dot-magenta)] via-[var(--color-dot-purple)] to-[var(--color-dot-turquoise)] bg-clip-text py-2 text-sm font-bold tracking-widest text-[var(--color-text-primary)] text-transparent uppercase opacity-0",
+          style: { animationDelay: "0.1s" },
+          children: eyebrow
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "h1",
+        {
+          className: "hero-animate mb-6 w-full text-5xl leading-[1] font-medium tracking-tight text-[var(--color-text-primary)] opacity-0 lg:max-w-3/4",
+          style: { animationDelay: "0.2s" },
+          children: title
+        }
+      ),
+      subtitle && /* @__PURE__ */ jsx(
+        "h2",
+        {
+          className: "hero-animate mb-4 w-full text-xl font-light text-[var(--color-text-primary)] md:text-2xl lg:max-w-3/4",
+          style: { animationDelay: "0.4s" },
+          children: subtitle
+        }
+      ),
+      description && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "hero-animate mb-12 w-full text-lg leading-relaxed font-light text-[var(--color-text-primary)] lg:max-w-3/4",
+          style: { animationDelay: "0.5s" },
+          children: description
+        }
+      ),
+      children
+    ] }) })
+  ] });
+}
+function VideoHero({
+  videoSrc,
+  fallbackImage,
+  eyebrow,
+  title,
+  subtitle,
+  description,
+  serviceCards = [],
+  showScrollIndicator = true,
+  scrollTarget = "#work",
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      id: "main-content",
+      className: "relative flex min-h-screen items-center justify-center overflow-hidden",
+      "aria-label": "Hero section",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "video-bg absolute inset-0 z-0", children: [
+          videoSrc && /* @__PURE__ */ jsx(
+            "video",
+            {
+              className: "h-full w-full object-cover",
+              autoPlay: true,
+              muted: true,
+              loop: true,
+              playsInline: true,
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx("source", { src: videoSrc, type: "video/mp4" })
+            }
+          ),
+          fallbackImage && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: fallbackImage,
+              alt: "",
+              className: `h-full w-full object-cover ${videoSrc ? "absolute inset-0" : ""}`,
+              loading: "eager",
+              "aria-hidden": "true"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "container-xl relative z-20 container pt-28 pb-36", children: /* @__PURE__ */ jsxs("div", { className: "max-w-8xl", children: [
+          eyebrow && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "hero-animate mb-6 inline-flex gap-2 bg-gradient-to-r from-[var(--color-dot-magenta)] via-[var(--color-dot-purple)] to-[var(--color-dot-turquoise)] bg-clip-text py-2 text-sm font-bold tracking-widest text-[var(--color-text-primary)] text-transparent uppercase opacity-0",
+              style: { animationDelay: "0.1s" },
+              children: eyebrow
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: "hero-animate mb-6 w-full text-5xl leading-[1] font-medium tracking-tight text-[var(--color-text-primary)] opacity-0 lg:max-w-3/4",
+              style: { animationDelay: "0.2s" },
+              children: title
+            }
+          ),
+          subtitle && /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: "hero-animate mb-4 w-full text-xl font-light text-[var(--color-text-primary)] md:text-2xl lg:max-w-3/4",
+              style: { animationDelay: "0.4s" },
+              children: subtitle
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "hero-animate mb-12 w-full text-lg leading-relaxed font-light text-[var(--color-text-primary)]/90 lg:max-w-3/4",
+              style: { animationDelay: "0.5s" },
+              children: description
+            }
+          ),
+          serviceCards.length > 0 && /* @__PURE__ */ jsx("nav", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-4", "aria-label": "Our services", children: serviceCards.map((card, index) => /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: card.href,
+              className: "service-card group hero-animate rounded-2xl border border-[var(--color-text-secondary)]/20 bg-white/5 p-6 opacity-0 backdrop-blur-md transition-all duration-300 hover:border-[var(--color-text-secondary)]/20 hover:bg-[var(--color-text-primary)]/98 hover:shadow-lg",
+              style: { animationDelay: `${0.6 + index * 0.1}s` },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "hero-animate mb-4 flex h-10 w-10 items-center justify-center rounded-xl border border-[var(--color-text-primary)]/20 from-[var(--color-dot-magenta)] via-[var(--color-dot-purple)] to-[var(--color-dot-turquoise)] opacity-0 transition-all duration-300 group-hover:border-[var(--color-text-primary)]/95 group-hover:bg-gradient-to-r",
+                    dangerouslySetInnerHTML: { __html: card.icon }
+                  }
+                ),
+                /* @__PURE__ */ jsx("h3", { className: "mb-1 text-lg font-semibold text-[var(--color-text-primary)] transition-colors group-hover:text-[var(--color-dot-turquoise)]", children: card.title }),
+                /* @__PURE__ */ jsxs("p", { className: "[var(--color-text-primary)] text-sm transition-colors group-hover:text-[var(--color-dot-magenta)]", children: [
+                  card.description,
+                  /* @__PURE__ */ jsx("span", { className: "ml-2 transform font-bold opacity-0 transition-all duration-300 group-hover:opacity-100", children: "\u2192" })
+                ] })
+              ]
+            },
+            index
+          )) }),
+          children
+        ] }) }),
+        showScrollIndicator && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "hero-animate absolute bottom-8 left-1/2 z-20 -translate-x-1/2 opacity-0",
+            style: { animationDelay: "1.2s" },
+            children: /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: scrollTarget,
+                className: "group flex flex-col items-center gap-2",
+                "aria-label": "Scroll to see our work",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-xs font-medium tracking-wider text-white/60 uppercase transition-colors group-hover:text-white/80", children: "Scroll" }),
+                  /* @__PURE__ */ jsx("div", { className: "relative h-10 w-6 rounded-full border-2 border-white/30 transition-colors group-hover:border-white/50", children: /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-1/2 h-2 w-1 -translate-x-1/2 animate-bounce rounded-full bg-white/80" }) })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function TeamGrid({ members, cols = 3, title }) {
+  const colsClasses = {
+    2: "md:grid-cols-2",
+    3: "md:grid-cols-2 lg:grid-cols-3",
+    4: "md:grid-cols-2 lg:grid-cols-4"
+  };
+  return /* @__PURE__ */ jsx("section", { className: "py-20 pt-10", children: /* @__PURE__ */ jsxs("div", { className: "container-xl container", children: [
+    title && /* @__PURE__ */ jsx(
+      "h2",
+      {
+        className: "hero-animate mb-12 text-3xl font-medium text-[var(--color-text-primary)] opacity-0 md:text-4xl",
+        style: { animationDelay: ".75s" },
+        children: title
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: `grid gap-8 ${colsClasses[cols]}`, children: members.map((member, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "profile-card scale-99 overflow-hidden rounded-xl border border-[var(--color-border)]/10 bg-[var(--color-surface)] transition-all duration-300 hover:scale-100 hover:border-[var(--color-border-strong)] hover:shadow-lg",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "aspect-square overflow-hidden transition-all duration-300", children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: member.image,
+              alt: member.name,
+              className: "profile-img object-cover transition-all duration-1000 hover:scale-102",
+              loading: "lazy"
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
+            /* @__PURE__ */ jsx("h3", { className: "mb-1 text-xl font-semibold text-[var(--color-text-primary)]", children: member.name }),
+            /* @__PURE__ */ jsxs("p", { className: "mb-3 text-sm leading-[1.5] font-bold tracking-wide text-[var(--color-primary)] uppercase", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[var(--color-dot-magenta)]", children: member.role }),
+              member.title && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("br", {}),
+                member.title
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "text-med mb-4 text-[var(--color-text-secondary)]", children: member.bio }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+              member.linkedin && /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: member.linkedin,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "text-med font-medium text-[var(--color-primary)] hover:underline",
+                  children: "LinkedIn"
+                }
+              ),
+              member.twitter && /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: member.twitter,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "text-med font-medium text-[var(--color-primary)] hover:underline",
+                  children: "Twitter"
+                }
+              ),
+              member.email && /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: `mailto:${member.email}`,
+                  className: "text-med font-medium text-[var(--color-primary)] hover:underline",
+                  children: "Email"
+                }
+              )
+            ] })
+          ] })
+        ]
+      },
+      index
+    )) })
+  ] }) });
+}
+function ServiceSection({ id, title, description, features }) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      id,
+      className: "-mt-10 border-b border-[var(--color-border)]/10 py-20 lg:-mt-20 lg:py-40",
+      children: /* @__PURE__ */ jsxs("div", { className: "container-xl container", children: [
+        /* @__PURE__ */ jsx(
+          "h2",
+          {
+            className: "hero-animate mb-4 w-full text-3xl font-medium text-[var(--color-text-primary)] opacity-0 md:text-4xl lg:max-w-3/4",
+            style: { animationDelay: ".75s" },
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "hero-animate mb-12 text-lg text-[var(--color-text-secondary)] opacity-0 lg:max-w-3/4",
+            style: { animationDelay: ".8s" },
+            children: description
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "hero-animate grid gap-6 opacity-0 sm:grid-cols-2 lg:grid-cols-3",
+            style: { animationDelay: ".85s" },
+            children: features.map((feature, index) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "rounded-xl border border-[var(--color-border)]/10 bg-[var(--color-surface)] p-6 transition-colors hover:bg-[var(--color-surface)]",
+                children: [
+                  /* @__PURE__ */ jsx("h4", { className: "mb-2 text-lg font-semibold text-[var(--color-text-primary)]", children: feature.title }),
+                  /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-secondary)]", children: feature.description })
+                ]
+              },
+              index
+            ))
+          }
+        )
+      ] })
+    }
+  );
+}
+function ProcessSteps({
+  steps,
+  title,
+  variant = "horizontal",
+  background = "muted"
+}) {
+  const bgClasses = {
+    default: "",
+    muted: "bg-[var(--color-background-light)]"
+  };
+  return /* @__PURE__ */ jsx("section", { className: `py-20 ${bgClasses[background]}`, children: /* @__PURE__ */ jsxs("div", { className: "container-xl container", children: [
+    title && /* @__PURE__ */ jsx("h2", { className: "mb-12 text-3xl font-medium text-[var(--color-text-primary)] md:text-4xl", children: title }),
+    variant === "horizontal" ? /* @__PURE__ */ jsx("div", { className: "grid gap-8 md:grid-cols-2 lg:grid-cols-4", children: steps.map((step, index) => /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-4 flex h-12 w-12 items-center justify-center rounded-full border border-[var(--color-text-primary)]/90 bg-[var(--color-text-primary)]/0 text-xl font-medium", children: step.number ?? index + 1 }),
+      /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-semibold text-[var(--color-text-primary)]", children: step.title }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-secondary)]", children: step.description })
+    ] }, index)) }) : /* @__PURE__ */ jsxs("div", { className: "relative pl-8", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute top-0 bottom-0 left-6 w-0.5 bg-[var(--color-border)]",
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "space-y-8", children: steps.map((step, index) => /* @__PURE__ */ jsxs("div", { className: "relative flex gap-6", children: [
+        /* @__PURE__ */ jsx("div", { className: "relative z-10 -ml-6 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-[var(--color-primary)] text-lg font-medium text-white", children: step.number ?? index + 1 }),
+        /* @__PURE__ */ jsxs("div", { className: "pt-2", children: [
+          /* @__PURE__ */ jsx("h3", { className: "mb-1 text-lg font-semibold text-[var(--color-text-primary)]", children: step.title }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-secondary)]", children: step.description })
+        ] })
+      ] }, index)) })
+    ] })
+  ] }) });
+}
+function StatBar({
+  stats,
+  title,
+  description,
+  centered = true,
+  background = "muted"
+}) {
+  const descriptions = Array.isArray(description) ? description : description ? [description] : [];
+  const bgClasses = {
+    default: "",
+    muted: "bg-[var(--color-background-light)]"
+  };
+  return /* @__PURE__ */ jsx("section", { className: `py-20 ${bgClasses[background]}`, children: /* @__PURE__ */ jsxs("div", { className: "container-xl container", children: [
+    (title || descriptions.length > 0) && /* @__PURE__ */ jsxs("div", { className: `mb-12 ${centered ? "mx-auto max-w-2xl text-center" : ""}`, children: [
+      title && /* @__PURE__ */ jsx("h2", { className: "mb-4 text-3xl font-medium text-[var(--color-text-primary)] md:text-4xl", children: title }),
+      descriptions.map((desc, index) => /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "centered mx-auto mb-4 max-w-3/4 text-lg text-[var(--color-text-secondary)] last:mb-0",
+          children: desc
+        },
+        index
+      ))
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `grid max-w-3xl gap-8 ${centered ? "mx-auto" : ""} sm:grid-cols-${stats.length}`,
+        children: stats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-2 bg-clip-text text-4xl font-bold text-[var(--color-text-primary)] md:text-5xl", children: [
+            stat.prefix,
+            stat.value,
+            stat.suffix
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "text-sm text-[var(--color-dot-magenta)]", children: stat.label })
+        ] }, index))
+      }
+    )
+  ] }) });
+}
+function IndustryGrid({ industries, title, cols = 3 }) {
+  const colsClasses = {
+    2: "sm:grid-cols-2",
+    3: "sm:grid-cols-2 lg:grid-cols-3"
+  };
+  return /* @__PURE__ */ jsx("section", { className: "py-20", children: /* @__PURE__ */ jsxs("div", { className: "container-xl container", children: [
+    title && /* @__PURE__ */ jsx("h2", { className: "mb-12 text-3xl font-medium text-[var(--color-text-primary)] md:text-4xl", children: title }),
+    /* @__PURE__ */ jsx("div", { className: `grid gap-6 ${colsClasses[cols]}`, children: industries.map((industry, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "rounded-xl border border-[var(--color-border)]/10 bg-[var(--color-surface)] p-6 transition-all duration-200",
+        children: [
+          /* @__PURE__ */ jsx("h3", { className: "mb-2 text-lg font-semibold text-[var(--color-text-primary)]", children: industry.title }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-secondary)]", children: industry.description })
+        ]
+      },
+      index
+    )) })
+  ] }) });
+}
+function ContentPage({ title, subtitle, lastUpdated, children }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("section", { className: "pt-32 pb-12", children: /* @__PURE__ */ jsxs("div", { className: "container-xl container", children: [
+      /* @__PURE__ */ jsx("h1", { className: "mb-4 text-4xl font-bold text-[var(--color-text-primary)] md:text-5xl", children: title }),
+      subtitle && /* @__PURE__ */ jsx("h2", { className: "mb-2 text-xl text-[var(--color-text-secondary)]", children: subtitle }),
+      lastUpdated && /* @__PURE__ */ jsxs("p", { className: "text-[var(--color-text-muted)]", children: [
+        "Last updated: ",
+        lastUpdated
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx("section", { className: "py-12", children: /* @__PURE__ */ jsx("div", { className: "container-xl container", children: /* @__PURE__ */ jsx("div", { className: "prose prose-lg lg:max-w-3/4", children }) }) })
+  ] });
+}
+function BeforeAfter({ data }) {
+  const [sliderPosition, setSliderPosition] = useState(data.default_offset || 0.5);
+  const [isDragging, setIsDragging] = useState(false);
+  const containerRef = useRef(null);
+  const handleMove = (clientX) => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
+    const percentage = x / rect.width;
+    setSliderPosition(percentage);
+  };
+  const handleMouseDown = () => setIsDragging(true);
+  const handleMouseUp = () => setIsDragging(false);
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      if (isDragging) handleMove(e.clientX);
+    };
+    const handleTouchMove = (e) => {
+      if (isDragging) handleMove(e.touches[0].clientX);
+    };
+    if (isDragging) {
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+      window.addEventListener("touchmove", handleTouchMove);
+      window.addEventListener("touchend", handleMouseUp);
+    }
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+      window.removeEventListener("touchmove", handleTouchMove);
+      window.removeEventListener("touchend", handleMouseUp);
+    };
+  }, [isDragging]);
+  return /* @__PURE__ */ jsx("section", { className: "py-20", children: /* @__PURE__ */ jsxs("div", { className: "wrapper", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-8 max-w-2xl", children: [
+      /* @__PURE__ */ jsx("h4", { className: "mb-4 text-2xl font-bold text-[var(--color-text-primary)]", children: data.title }),
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "text-lg text-[var(--color-text-secondary)]",
+          dangerouslySetInnerHTML: { __html: data.content }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: "relative w-full cursor-ew-resize overflow-hidden rounded-xl select-none",
+        onMouseDown: handleMouseDown,
+        onTouchStart: handleMouseDown,
+        children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: data.after_image,
+              alt: data.after_label || "After",
+              className: "h-auto w-full",
+              draggable: false
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0 overflow-hidden",
+              style: { clipPath: `inset(0 ${100 - sliderPosition * 100}% 0 0)` },
+              children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: data.before_image,
+                  alt: data.before_label || "Before",
+                  className: "h-full w-full object-cover",
+                  draggable: false
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute top-0 bottom-0 w-1 bg-white shadow-lg",
+              style: { left: `${sliderPosition * 100}%`, transform: "translateX(-50%)" },
+              children: /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-1/2 flex h-10 w-10 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-white shadow-lg", children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "h-5 w-5 text-[var(--color-text-primary)]",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M8 9l4-4 4 4m0 6l-4 4-4-4"
+                    }
+                  )
+                }
+              ) })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-4 rounded bg-black/70 px-3 py-1 text-sm text-white", children: data.before_label || "Before" }),
+          /* @__PURE__ */ jsx("div", { className: "absolute right-4 bottom-4 rounded bg-black/70 px-3 py-1 text-sm text-white", children: data.after_label || "After" })
+        ]
+      }
+    ),
+    data.caption && /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "mt-4 text-center text-sm text-[var(--color-text-muted)]",
+        dangerouslySetInnerHTML: { __html: data.caption }
+      }
+    )
+  ] }) });
+}
+function CaseStudyBreakdown({ data }) {
+  return /* @__PURE__ */ jsx("section", { className: "bg-[var(--color-background-light)] py-20", children: /* @__PURE__ */ jsxs("div", { className: "wrapper", children: [
+    /* @__PURE__ */ jsx("h2", { className: "mb-8 text-3xl font-bold text-[var(--color-text-primary)]", children: data.title }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-12 grid gap-8 lg:grid-cols-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] p-6", children: [
+        /* @__PURE__ */ jsx("h5", { className: "mb-3 text-lg font-semibold text-[var(--color-text-primary)]", children: "What We Did" }),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "text-[var(--color-text-secondary)]",
+            dangerouslySetInnerHTML: { __html: data.what_we_did }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] p-6", children: [
+        /* @__PURE__ */ jsx("h5", { className: "mb-3 text-lg font-semibold text-[var(--color-text-primary)]", children: "How We Did It" }),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "text-[var(--color-text-secondary)]",
+            dangerouslySetInnerHTML: { __html: data.how_we_did_it }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] p-6", children: [
+        /* @__PURE__ */ jsx("h5", { className: "mb-3 text-lg font-semibold text-[var(--color-text-primary)]", children: "Services Used" }),
+        /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: data.services_used.map((service, index) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: "flex items-center gap-2 text-[var(--color-text-secondary)]",
+            children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "h-4 w-4 flex-shrink-0 text-[var(--color-primary)]",
+                  fill: "currentColor",
+                  viewBox: "0 0 20 20",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      fillRule: "evenodd",
+                      d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+                      clipRule: "evenodd"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: service })
+            ]
+          },
+          index
+        )) })
+      ] })
+    ] }),
+    data.results && /* @__PURE__ */ jsxs("div", { className: "mb-12", children: [
+      /* @__PURE__ */ jsx("h5", { className: "mb-3 text-xl font-semibold text-[var(--color-text-primary)]", children: "Results" }),
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "text-lg text-[var(--color-text-secondary)]",
+          dangerouslySetInnerHTML: { __html: data.results }
+        }
+      )
+    ] }),
+    data.metrics && data.metrics.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h5", { className: "mb-6 text-xl font-semibold text-[var(--color-text-primary)]", children: "Key Metrics" }),
+      /* @__PURE__ */ jsx("div", { className: "grid gap-6 sm:grid-cols-2 lg:grid-cols-3", children: data.metrics.map((metric, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] p-6 text-center",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-center gap-2", children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-4xl font-bold text-[var(--color-primary)]", children: [
+                metric.value,
+                metric.suffix && /* @__PURE__ */ jsx("span", { className: "text-2xl", children: metric.suffix })
+              ] }),
+              metric.trend && /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: `h-5 w-5 ${metric.trend === "up" ? "text-green-500" : "text-red-500"}`,
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: metric.trend === "up" ? /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M5 10l7-7m0 0l7 7m-7-7v18"
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M19 14l-7 7m0 0l-7-7m7 7V3"
+                    }
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "mb-1 text-sm font-medium text-[var(--color-text-primary)]", children: metric.label }),
+            metric.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--color-text-muted)]", children: metric.description })
+          ]
+        },
+        index
+      )) })
+    ] })
+  ] }) });
+}
+async function submitToHubSpot(data, config) {
+  const { portalId, formId, region = "na1" } = config;
+  const apiDomain = region.startsWith("eu") ? "api.hubspot.eu" : "api.hsforms.com";
+  const response = await fetch(
+    `https://${apiDomain}/submissions/v3/integration/submit/${portalId}/${formId}`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        fields: [
+          { name: "firstname", value: data.firstname },
+          { name: "email", value: data.email }
+        ],
+        context: {
+          pageUri: window.location.href,
+          pageName: document.title
+        }
+      })
+    }
+  );
+  if (!response.ok) {
+    const responseData = await response.json();
+    throw new Error(responseData.message || "Form submission failed");
+  }
+  return response.json();
+}
+function CompactContactForm({
+  portalId,
+  formId,
+  region = "na1",
+  onSubmit,
+  onSuccess,
+  onError,
+  submitButtonText = "Help us!",
+  loadingText = "Sending...",
+  namePlaceholder = "Your Name",
+  emailPlaceholder = "Your Email"
+}) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [firstname, setFirstname] = useState("");
+  const [email, setEmail] = useState("");
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    const formData = { firstname, email };
+    try {
+      if (onSubmit) {
+        await onSubmit(formData);
+      } else if (portalId && formId) {
+        await submitToHubSpot(formData, { portalId, formId, region });
+      } else {
+        throw new Error("Either onSubmit callback or HubSpot config (portalId, formId) is required");
+      }
+      onSuccess?.(formData);
+      setFirstname("");
+      setEmail("");
+    } catch (error) {
+      onError?.(error instanceof Error ? error : new Error("Form submission failed"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsx("form", { className: "group w-full", onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-stretch gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-[180px] flex-1", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "compact-contact-name", className: "sr-only", children: namePlaceholder }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          id: "compact-contact-name",
+          name: "firstname",
+          placeholder: namePlaceholder,
+          required: true,
+          value: firstname,
+          onChange: (e) => setFirstname(e.target.value),
+          className: "w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-background)] px-4 py-3 text-base text-[var(--color-text-primary)] transition-colors placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-primary)] focus:outline-none"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-[180px] flex-1", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "compact-contact-email", className: "sr-only", children: emailPlaceholder }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "email",
+          id: "compact-contact-email",
+          name: "email",
+          placeholder: emailPlaceholder,
+          required: true,
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          className: "w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-background)] px-4 py-3 text-base text-[var(--color-text-primary)] transition-colors placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-primary)] focus:outline-none"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: isLoading,
+        className: "shrink-0 cursor-pointer rounded-lg border-none bg-linear-to-r from-[var(--color-dot-magenta)] via-[var(--color-dot-purple)] to-[var(--color-dot-turquoise)] px-6 py-3 text-base font-medium text-white transition-opacity hover:bg-black hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary)] disabled:cursor-wait disabled:opacity-70",
+        children: isLoading ? loadingText : submitButtonText
+      }
+    )
+  ] }) });
+}
+var DEFAULT_SERVICE_OPTIONS = [
+  { value: "Development", label: "Development" },
+  { value: "AI Adoption", label: "AI Adoption" },
+  { value: "Product Design", label: "Product Design" },
+  { value: "Culture & Transformation", label: "Culture & Transformation" }
+];
+var DEFAULT_BUDGET_OPTIONS = [
+  { value: "$5k-15k", label: "$5K-15K" },
+  { value: "$15K-50K", label: "$15K-50K" },
+  { value: "$50K-100K+", label: "$50K-100K+" }
+];
+async function submitToHubSpot2(data, config) {
+  const { portalId, formId, region = "na1" } = config;
+  const fields = [
+    { name: "firstname", value: data.firstname },
+    { name: "email", value: data.email },
+    { name: "company", value: data.company },
+    { name: "project_budget", value: data.project_budget },
+    { name: "project_description", value: data.project_description }
+  ];
+  if (data.services.length > 0) {
+    fields.push({ name: "services", value: data.services.join(",") });
+  }
+  const apiDomain = region.startsWith("eu") ? "api.hubspot.eu" : "api.hsforms.com";
+  const response = await fetch(
+    `https://${apiDomain}/submissions/v3/integration/submit/${portalId}/${formId}`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        fields,
+        context: {
+          pageUri: window.location.href,
+          pageName: document.title
+        }
+      })
+    }
+  );
+  if (!response.ok) {
+    const data2 = await response.json();
+    throw new Error(data2.message || "Form submission failed");
+  }
+  return response.json();
+}
+function ContactForm({
+  portalId,
+  formId,
+  region = "na1",
+  onSubmit,
+  onSuccess,
+  onError,
+  submitButtonText = "Send Message",
+  loadingText = "Sending...",
+  serviceOptions = DEFAULT_SERVICE_OPTIONS,
+  budgetOptions = DEFAULT_BUDGET_OPTIONS
+}) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [formData, setFormData] = useState({
+    firstname: "",
+    email: "",
+    company: "",
+    services: [],
+    project_budget: budgetOptions[0]?.value || "$5K-15K",
+    project_description: ""
+  });
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+  const handleServiceChange = (value, checked) => {
+    setFormData((prev) => ({
+      ...prev,
+      services: checked ? [...prev.services, value] : prev.services.filter((s) => s !== value)
+    }));
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    try {
+      if (onSubmit) {
+        await onSubmit(formData);
+      } else if (portalId && formId) {
+        await submitToHubSpot2(formData, { portalId, formId, region });
+      } else {
+        throw new Error("Either onSubmit callback or HubSpot config (portalId, formId) is required");
+      }
+      onSuccess?.(formData);
+      setFormData({
+        firstname: "",
+        email: "",
+        company: "",
+        services: [],
+        project_budget: budgetOptions[0]?.value || "$5K-15K",
+        project_description: ""
+      });
+    } catch (error) {
+      onError?.(error instanceof Error ? error : new Error("Form submission failed"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const inputClassName = "w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-background)] px-4 py-3 text-[var(--color-text-primary)] transition-colors placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-primary)] focus:outline-none";
+  return /* @__PURE__ */ jsxs("form", { className: "space-y-6", onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-6 sm:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: "full-name",
+            className: "mb-2 block text-sm font-medium text-[var(--color-text-primary)]",
+            children: [
+              "Name ",
+              /* @__PURE__ */ jsx("span", { className: "text-[var(--color-primary)]", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            id: "full-name",
+            name: "firstname",
+            required: true,
+            value: formData.firstname,
+            onChange: handleChange,
+            className: inputClassName
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "mt-1 text-xs text-[var(--color-text-muted)]", children: "What should we call you?" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: "full-email",
+            className: "mb-2 block text-sm font-medium text-[var(--color-text-primary)]",
+            children: [
+              "Email ",
+              /* @__PURE__ */ jsx("span", { className: "text-[var(--color-primary)]", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "email",
+            id: "full-email",
+            name: "email",
+            required: true,
+            value: formData.email,
+            onChange: handleChange,
+            className: inputClassName
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "mt-1 text-xs text-[var(--color-text-muted)]", children: "We'll use this to get back to you" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: "full-company",
+          className: "mb-2 block text-sm font-medium text-[var(--color-text-primary)]",
+          children: "Company"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          id: "full-company",
+          name: "company",
+          value: formData.company,
+          onChange: handleChange,
+          className: inputClassName
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "mt-1 text-xs text-[var(--color-text-muted)]", children: "Optional - but we'd love to know!" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("label", { className: "mb-2 block text-sm font-medium text-[var(--color-text-primary)]", children: [
+        "What can we help you with?",
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "text-[var(--color-text-muted)]", children: "(Select all that apply)" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "grid gap-4 sm:grid-cols-2", children: serviceOptions.map((option) => /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-center gap-3", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: formData.services.includes(option.value),
+            onChange: (e) => handleServiceChange(option.value, e.target.checked),
+            className: "rounded border-[var(--color-border)]"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-[var(--color-text-secondary)]", children: option.label })
+      ] }, option.value)) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: "full-project_budget",
+          className: "mb-2 block text-sm font-medium text-[var(--color-text-primary)]",
+          children: "Project Budget"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          id: "full-project_budget",
+          name: "project_budget",
+          value: formData.project_budget,
+          onChange: handleChange,
+          className: inputClassName,
+          children: budgetOptions.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "mt-1 text-xs text-[var(--color-text-muted)]", children: "This helps us recommend the right approach" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: "project-description",
+          className: "mb-2 block text-sm font-medium text-[var(--color-text-primary)]",
+          children: "Tell us about your project"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          id: "project-description",
+          name: "project_description",
+          rows: 6,
+          value: formData.project_description,
+          onChange: handleChange,
+          placeholder: "What challenge are you trying to solve? Who is your target audience? What does success look like for this project?",
+          className: `${inputClassName} resize-none`
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "mt-1 text-xs text-[var(--color-text-muted)]", children: "The more context you provide, the better we can help" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "submit",
+          disabled: isLoading,
+          className: "shrink-0 cursor-pointer rounded-lg border-none bg-linear-to-r from-[var(--color-dot-magenta)] via-[var(--color-dot-purple)] to-[var(--color-dot-turquoise)] px-6 py-3 text-base font-medium text-white transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary)] disabled:cursor-wait disabled:opacity-70",
+          children: isLoading ? loadingText : submitButtonText
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-[var(--color-text-muted)]", children: "We'll get back to you within 24 hours. Usually much sooner!" })
+    ] })
+  ] });
+}
+function FullWidthImage({ data }) {
+  return /* @__PURE__ */ jsxs("section", { className: "py-20", children: [
+    (data.title || data.content) && /* @__PURE__ */ jsxs("div", { className: "wrapper mb-8", children: [
+      data.title && /* @__PURE__ */ jsx("h4", { className: "mb-4 text-2xl font-bold text-[var(--color-text-primary)]", children: data.title }),
+      data.content && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "max-w-2xl text-lg text-[var(--color-text-secondary)]",
+          dangerouslySetInnerHTML: { __html: data.content }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: `relative ${data.overlay ? "has-overlay" : ""}`, children: [
+      data.overlay && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `absolute inset-0 z-10 flex items-center justify-center ${data.overlay_type === "gradient" ? "bg-gradient-to-t from-black/70 via-black/30 to-transparent" : "bg-black/50"}`,
+          children: data.overlay_content && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "max-w-2xl p-8 text-center text-white",
+              dangerouslySetInnerHTML: { __html: data.overlay_content }
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("img", { src: data.image, alt: data.alt, className: "h-auto w-full", loading: "lazy" })
+    ] }),
+    data.caption && /* @__PURE__ */ jsx("div", { className: "wrapper", children: /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "mt-4 text-center text-sm text-[var(--color-text-muted)]",
+        dangerouslySetInnerHTML: { __html: data.caption }
+      }
+    ) })
+  ] });
+}
+function ImageGrid({ data }) {
+  const gridClasses = {
+    "50-50": "grid-cols-1 md:grid-cols-2",
+    "2x2": "grid-cols-2",
+    "3x3": "grid-cols-2 md:grid-cols-3"
+  };
+  const getImageData = (image) => {
+    if (typeof image === "string") {
+      return { src: image, alt: "", caption: void 0 };
+    }
+    return image;
+  };
+  return /* @__PURE__ */ jsxs("section", { className: "py-20", children: [
+    (data.title || data.content) && /* @__PURE__ */ jsxs("div", { className: "wrapper mb-8", children: [
+      data.title && /* @__PURE__ */ jsx("h4", { className: "mb-4 text-2xl font-bold text-[var(--color-text-primary)]", children: data.title }),
+      data.content && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "max-w-2xl text-lg text-[var(--color-text-secondary)]",
+          dangerouslySetInnerHTML: { __html: data.content }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: data.full_width ? "px-4" : "wrapper", children: /* @__PURE__ */ jsx("div", { className: `grid gap-4 ${gridClasses[data.grid_type] || gridClasses["50-50"]}`, children: data.images.map((image, index) => {
+      const { src, alt, caption } = getImageData(image);
+      return /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-lg", children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt: alt || `Image ${index + 1}`,
+            className: "h-full w-full object-cover",
+            loading: "lazy"
+          }
+        ),
+        caption && /* @__PURE__ */ jsx("div", { className: "absolute right-0 bottom-0 left-0 bg-gradient-to-t from-black/70 to-transparent p-4", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-white", children: caption }) })
+      ] }, index);
+    }) }) }),
+    data.grid_caption && /* @__PURE__ */ jsx("div", { className: "wrapper", children: /* @__PURE__ */ jsx("p", { className: "mt-4 text-center text-sm text-[var(--color-text-muted)]", children: data.grid_caption }) })
+  ] });
+}
+function ImageGridModal({ data }) {
+  const [modalOpen, setModalOpen] = useState(false);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  useEffect(() => {
+    if (modalOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [modalOpen]);
+  const openModal = (index) => {
+    setCurrentIndex(index);
+    setModalOpen(true);
+  };
+  const closeModal = () => {
+    setModalOpen(false);
+  };
+  const navigate = (direction) => {
+    if (direction === "prev") {
+      setCurrentIndex((prev) => prev === 0 ? data.images.length - 1 : prev - 1);
+    } else {
+      setCurrentIndex((prev) => prev === data.images.length - 1 ? 0 : prev + 1);
+    }
+  };
+  const layoutClasses = {
+    square: "aspect-square",
+    landscape: "aspect-video",
+    portrait: "aspect-[3/4]",
+    wide: "aspect-[21/9]"
+  };
+  return /* @__PURE__ */ jsxs("section", { className: "py-20", children: [
+    /* @__PURE__ */ jsxs("div", { className: "wrapper", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+        /* @__PURE__ */ jsx("h3", { className: "mb-2 text-3xl font-bold text-[var(--color-text-primary)]", children: data.title }),
+        data.subtitle && /* @__PURE__ */ jsx("p", { className: "text-lg text-[var(--color-text-secondary)]", children: data.subtitle })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-3", children: data.images.map((image, index) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => openModal(index),
+          className: `group relative cursor-pointer overflow-hidden rounded-lg ${layoutClasses[image.layout || "landscape"]}`,
+          children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: image.src,
+                alt: image.alt,
+                className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105",
+                loading: "lazy"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/0 transition-colors group-hover:bg-black/30", children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "h-10 w-10 text-white opacity-0 transition-opacity group-hover:opacity-100",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"
+                  }
+                )
+              }
+            ) }),
+            image.caption && /* @__PURE__ */ jsx("div", { className: "absolute right-0 bottom-0 left-0 bg-gradient-to-t from-black/70 to-transparent p-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-white", children: image.caption }) })
+          ]
+        },
+        index
+      )) }),
+      data.description && /* @__PURE__ */ jsx("p", { className: "mt-6 text-[var(--color-text-secondary)]", children: data.description })
+    ] }),
+    modalOpen && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/90", onClick: closeModal }),
+      /* @__PURE__ */ jsxs("div", { className: "relative z-10 mx-4 max-h-[90vh] w-full max-w-5xl", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: closeModal,
+            className: "absolute -top-12 right-0 text-white hover:text-gray-300",
+            children: /* @__PURE__ */ jsx("svg", { className: "h-8 w-8", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M6 18L18 6M6 6l12 12"
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: data.images[currentIndex].src,
+            alt: data.images[currentIndex].alt,
+            className: "mx-auto max-h-[80vh] max-w-full rounded-lg object-contain"
+          }
+        ),
+        data.images[currentIndex].caption && /* @__PURE__ */ jsx("p", { className: "mt-4 text-center text-white", children: data.images[currentIndex].caption }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-center gap-4", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => navigate("prev"),
+              className: "p-2 text-white transition-colors hover:text-gray-300",
+              children: /* @__PURE__ */ jsx("svg", { className: "h-8 w-8", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M15 19l-7-7 7-7"
+                }
+              ) })
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "text-white", children: [
+            currentIndex + 1,
+            " / ",
+            data.images.length
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => navigate("next"),
+              className: "p-2 text-white transition-colors hover:text-gray-300",
+              children: /* @__PURE__ */ jsx("svg", { className: "h-8 w-8", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M9 5l7 7-7 7"
+                }
+              ) })
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function ProblemStatement({ data }) {
+  return /* @__PURE__ */ jsx("section", { className: "py-20", children: /* @__PURE__ */ jsxs("div", { className: "wrapper", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-4 h-1 w-12 bg-[var(--color-primary)]" }),
+      /* @__PURE__ */ jsx("h3", { className: "mb-2 text-3xl font-bold text-[var(--color-text-primary)]", children: data.title }),
+      data.subtitle && /* @__PURE__ */ jsx("p", { className: "text-lg text-[var(--color-text-secondary)]", children: data.subtitle })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-12 grid gap-8 lg:grid-cols-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] p-6", children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--color-primary)]/10", children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "h-5 w-5 text-[var(--color-primary)]",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx("h4", { className: "mb-2 text-lg font-semibold text-[var(--color-text-primary)]", children: "The Challenge" }),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "text-[var(--color-text-secondary)]",
+            dangerouslySetInnerHTML: { __html: data.problem }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] p-6", children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--color-primary)]/10", children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "h-5 w-5 text-[var(--color-primary)]",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx("h4", { className: "mb-2 text-lg font-semibold text-[var(--color-text-primary)]", children: "Background" }),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "text-[var(--color-text-secondary)]",
+            dangerouslySetInnerHTML: { __html: data.context }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] p-6", children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--color-primary)]/10", children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "h-5 w-5 text-[var(--color-primary)]",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx("h4", { className: "mb-2 text-lg font-semibold text-[var(--color-text-primary)]", children: "Project Goals" }),
+        /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: data.goals.map((goal, index) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: "flex items-start gap-2 text-[var(--color-text-secondary)]",
+            children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "mt-1 h-4 w-4 flex-shrink-0 text-[var(--color-primary)]",
+                  fill: "currentColor",
+                  viewBox: "0 0 20 20",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      fillRule: "evenodd",
+                      d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+                      clipRule: "evenodd"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: goal })
+            ]
+          },
+          index
+        )) })
+      ] })
+    ] }),
+    data.stakeholders && data.stakeholders.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h4", { className: "mb-6 text-xl font-semibold text-[var(--color-text-primary)]", children: "Key Stakeholders" }),
+      /* @__PURE__ */ jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: data.stakeholders.map((stakeholder, index) => /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-[var(--color-background-light)] p-4", children: [
+        /* @__PURE__ */ jsx("h5", { className: "mb-1 font-medium text-[var(--color-text-primary)]", children: stakeholder.role }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-secondary)]", children: stakeholder.description })
+      ] }, index)) })
+    ] })
+  ] }) });
+}
+function ProcessTimeline({ data }) {
+  const isHorizontal = data.layout === "horizontal";
+  return /* @__PURE__ */ jsx("section", { className: "bg-[var(--color-background-light)] py-20", children: /* @__PURE__ */ jsxs("div", { className: "wrapper", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center", children: [
+      /* @__PURE__ */ jsx("h2", { className: "mb-2 text-3xl font-bold text-[var(--color-text-primary)]", children: data.title }),
+      data.subtitle && /* @__PURE__ */ jsx("p", { className: "mx-auto max-w-2xl text-lg text-[var(--color-text-secondary)]", children: data.subtitle })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: `relative ${isHorizontal ? "overflow-x-auto" : ""}`, children: [
+      !isHorizontal && /* @__PURE__ */ jsx("div", { className: "absolute top-0 bottom-0 left-8 w-0.5 bg-[var(--color-border)]" }),
+      /* @__PURE__ */ jsx("div", { className: isHorizontal ? "flex min-w-max gap-8 pb-4" : "space-y-8", children: data.steps.map((step, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `relative ${isHorizontal ? "min-w-[280px] flex-1" : "pl-20"}`,
+          "data-step": index + 1,
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `${isHorizontal ? "mx-auto mb-4 h-12 w-12" : "absolute top-0 left-0 h-16 w-16"} z-10 flex items-center justify-center rounded-full bg-[var(--color-primary)] text-lg font-bold text-white`,
+                children: step.icon ? /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: step.icon } }) : index + 1
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `${data.style === "cards" ? "rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] p-6" : ""}`,
+                children: [
+                  step.phase && /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold tracking-wider text-[var(--color-primary)] uppercase", children: step.phase }),
+                  /* @__PURE__ */ jsx("h3", { className: "mt-1 mb-2 text-xl font-semibold text-[var(--color-text-primary)]", children: step.title }),
+                  /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: "text-[var(--color-text-secondary)]",
+                      dangerouslySetInnerHTML: { __html: step.description }
+                    }
+                  ),
+                  step.deliverables && step.deliverables.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+                    /* @__PURE__ */ jsx("h4", { className: "mb-2 text-sm font-semibold text-[var(--color-text-primary)]", children: "Deliverables" }),
+                    /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: step.deliverables.map((deliverable, dIndex) => /* @__PURE__ */ jsxs(
+                      "li",
+                      {
+                        className: "flex items-center gap-2 text-sm text-[var(--color-text-secondary)]",
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "svg",
+                            {
+                              className: "h-4 w-4 flex-shrink-0 text-[var(--color-primary)]",
+                              fill: "currentColor",
+                              viewBox: "0 0 20 20",
+                              children: /* @__PURE__ */ jsx(
+                                "path",
+                                {
+                                  fillRule: "evenodd",
+                                  d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+                                  clipRule: "evenodd"
+                                }
+                              )
+                            }
+                          ),
+                          deliverable
+                        ]
+                      },
+                      dIndex
+                    )) })
+                  ] }),
+                  step.duration && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-2 text-sm", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-[var(--color-text-muted)]", children: "Duration:" }),
+                    /* @__PURE__ */ jsx("span", { className: "font-medium text-[var(--color-text-secondary)]", children: step.duration })
+                  ] })
+                ]
+              }
+            )
+          ]
+        },
+        index
+      )) })
+    ] }),
+    data.summary && /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "mx-auto mt-12 max-w-2xl text-center text-[var(--color-text-secondary)]",
+        dangerouslySetInnerHTML: { __html: data.summary }
+      }
+    )
+  ] }) });
+}
+function RelatedProjects({ data, allProjects }) {
+  if (!data.projects || data.projects.length === 0) return null;
+  const layoutClasses = {
+    grid: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",
+    list: "space-y-6",
+    carousel: "flex gap-6 overflow-x-auto pb-4"
+  };
+  const relatedProjects = data.projects.map((slug) => ({ slug, project: allProjects[slug] })).filter(({ project }) => project);
+  return /* @__PURE__ */ jsx("section", { className: "bg-[var(--color-background-light)] py-20", children: /* @__PURE__ */ jsxs("div", { className: "wrapper", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center", children: [
+      /* @__PURE__ */ jsx("h2", { className: "mb-2 text-3xl font-bold text-[var(--color-text-primary)]", children: data.title }),
+      data.subtitle && /* @__PURE__ */ jsx("p", { className: "text-lg text-[var(--color-text-secondary)]", children: data.subtitle })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: layoutClasses[data.layout], children: relatedProjects.map(({ slug, project }) => /* @__PURE__ */ jsx(
+      "article",
+      {
+        className: `group ${data.layout === "carousel" ? "w-80 flex-shrink-0" : ""}`,
+        children: /* @__PURE__ */ jsxs("a", { href: `/projects/${slug}`, className: "block", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative mb-4 overflow-hidden rounded-xl", children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: project.thumbnail,
+                alt: project.title,
+                className: "aspect-video w-full object-cover transition-transform duration-300 group-hover:scale-105",
+                loading: "lazy"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/0 transition-colors group-hover:bg-black/20", children: /* @__PURE__ */ jsx("span", { className: "font-medium text-white opacity-0 transition-opacity group-hover:opacity-100", children: "View Project" }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-[var(--color-text-primary)] transition-colors group-hover:text-[var(--color-primary)]", children: project.title }),
+            (data.show_role !== false || data.show_year !== false) && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-2 text-sm text-[var(--color-text-muted)]", children: [
+              data.show_role !== false && /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: project.role.split("<br")[0] } }),
+              data.show_role !== false && data.show_year !== false && /* @__PURE__ */ jsx("span", { children: "\u2022" }),
+              data.show_year !== false && /* @__PURE__ */ jsx("span", { children: project.year })
+            ] }),
+            data.show_description !== false && /* @__PURE__ */ jsx("p", { className: "mt-2 line-clamp-2 text-sm text-[var(--color-text-secondary)]", children: project.meta_description })
+          ] })
+        ] })
+      },
+      slug
+    )) }),
+    data.cta && /* @__PURE__ */ jsx("div", { className: "mt-12 text-center", children: /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: data.cta.url,
+        className: `btn ${data.cta.style === "primary" ? "btn-primary" : "btn-outline"}`,
+        children: data.cta.text
+      }
+    ) })
+  ] }) });
+}
+function SolutionSummary({ data }) {
+  return /* @__PURE__ */ jsx("section", { className: "bg-[var(--color-background-light)] py-20", children: /* @__PURE__ */ jsxs("div", { className: "wrapper", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-4 h-1 w-12 bg-[var(--color-primary)]" }),
+      /* @__PURE__ */ jsx("h3", { className: "mb-2 text-3xl font-bold text-[var(--color-text-primary)]", children: data.title }),
+      data.subtitle && /* @__PURE__ */ jsx("p", { className: "text-lg text-[var(--color-text-secondary)]", children: data.subtitle })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mb-12", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-[var(--color-primary)]/10", children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "h-5 w-5 text-[var(--color-primary)]",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h4", { className: "mb-2 text-xl font-semibold text-[var(--color-text-primary)]", children: "Our Solution" }),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "text-lg text-[var(--color-text-secondary)]",
+            dangerouslySetInnerHTML: { __html: data.overview }
+          }
+        )
+      ] })
+    ] }) }),
+    data.approach && data.approach.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-12", children: [
+      /* @__PURE__ */ jsx("h4", { className: "mb-6 text-xl font-semibold text-[var(--color-text-primary)]", children: "Our Approach" }),
+      /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2", children: data.approach.map((step, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex gap-4 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] p-4",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-[var(--color-primary)] text-sm font-semibold text-white", children: index + 1 }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h5", { className: "mb-1 font-medium text-[var(--color-text-primary)]", children: step.title }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-secondary)]", children: step.description })
+            ] })
+          ]
+        },
+        index
+      )) })
+    ] }),
+    data.key_features && data.key_features.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-12", children: [
+      /* @__PURE__ */ jsx("h4", { className: "mb-6 text-xl font-semibold text-[var(--color-text-primary)]", children: "Key Features Delivered" }),
+      /* @__PURE__ */ jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-4", children: data.key_features.map((feature, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] p-4",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "mb-3 flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--color-primary)]/10", children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "h-4 w-4 text-[var(--color-primary)]",
+                fill: "currentColor",
+                viewBox: "0 0 20 20",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    fillRule: "evenodd",
+                    d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+                    clipRule: "evenodd"
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsx("h5", { className: "mb-1 font-medium text-[var(--color-text-primary)]", children: feature.title }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-secondary)]", children: feature.description })
+          ]
+        },
+        index
+      )) })
+    ] }),
+    data.technologies && data.technologies.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-12", children: [
+      /* @__PURE__ */ jsx("h4", { className: "mb-4 text-xl font-semibold text-[var(--color-text-primary)]", children: "Technologies & Tools" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: data.technologies.map((tech, index) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "rounded-full border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-1 text-sm text-[var(--color-text-secondary)]",
+          children: tech
+        },
+        index
+      )) })
+    ] }),
+    data.quote && /* @__PURE__ */ jsxs("blockquote", { className: "border-l-4 border-[var(--color-primary)] py-2 pl-6", children: [
+      /* @__PURE__ */ jsxs("p", { className: "mb-2 text-xl text-[var(--color-text-primary)] italic", children: [
+        '"',
+        data.quote.text,
+        '"'
+      ] }),
+      /* @__PURE__ */ jsxs("cite", { className: "text-[var(--color-text-secondary)] not-italic", children: [
+        "\u2014 ",
+        data.quote.author,
+        data.quote.title && /* @__PURE__ */ jsxs("span", { className: "text-[var(--color-text-muted)]", children: [
+          ", ",
+          data.quote.title
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+var socialIcons = {
+  linkedin: /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" }) }),
+  twitter: /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" }) }),
+  github: /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" }) }),
+  dribbble: /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm10.12-10.358c-.35-.11-3.17-.953-6.384-.438 1.34 3.684 1.887 6.684 1.992 7.308 2.3-1.555 3.936-4.02 4.395-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4 1.73 1.358 3.92 2.166 6.29 2.166 1.42 0 2.77-.29 4-.814zm-11.62-2.58c.232-.4 3.045-5.055 8.332-6.765.135-.045.27-.084.405-.12-.26-.585-.54-1.167-.832-1.74C7.17 11.775 2.206 11.71 1.756 11.7l-.004.312c0 2.633.998 5.037 2.634 6.855zm-2.42-8.955c.46.008 4.683.026 9.477-1.248-1.698-3.018-3.53-5.558-3.8-5.928-2.868 1.35-5.01 3.99-5.676 7.17zM9.6 2.052c.282.38 2.145 2.914 3.822 6 3.645-1.365 5.19-3.44 5.373-3.702-1.81-1.61-4.19-2.586-6.795-2.586-.825 0-1.63.1-2.4.285zm10.335 3.483c-.218.29-1.935 2.493-5.724 4.04.24.49.47.985.68 1.486.08.18.15.36.22.53 3.41-.43 6.8.26 7.14.33-.02-2.42-.88-4.64-2.31-6.38z" }) }),
+  behance: /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M6.938 4.503c.702 0 1.34.06 1.92.188.577.13 1.07.33 1.485.61.41.28.733.65.96 1.12.225.47.34 1.05.34 1.73 0 .74-.17 1.36-.507 1.86-.338.5-.837.9-1.502 1.22.906.26 1.576.72 2.022 1.37.448.66.665 1.45.665 2.36 0 .75-.13 1.39-.41 1.93-.28.55-.67 1-1.16 1.35-.48.348-1.05.6-1.67.767-.61.165-1.252.254-1.91.254H0V4.51h6.938v-.007zM6.545 9.67c.56 0 1.01-.13 1.36-.404.35-.27.52-.678.52-1.22 0-.31-.06-.56-.18-.76-.12-.2-.28-.35-.48-.45-.2-.1-.42-.17-.65-.2-.23-.03-.46-.04-.7-.04H2.91v3.07h3.64zm.18 5.27c.27 0 .52-.02.76-.07.24-.05.46-.13.64-.25.18-.12.33-.29.44-.5.11-.22.16-.49.16-.82 0-.65-.18-1.12-.54-1.4-.36-.28-.85-.42-1.48-.42H2.91v3.46h3.82zM15.47 14.15c.36.42.85.63 1.48.63.45 0 .84-.11 1.17-.33.33-.22.55-.46.67-.7h2.21c-.35 1.06-.87 1.83-1.56 2.3-.7.47-1.54.71-2.54.71-.69 0-1.31-.12-1.87-.36-.56-.24-1.04-.58-1.43-1.01-.39-.43-.7-.94-.9-1.53-.21-.59-.31-1.23-.31-1.92 0-.67.11-1.3.33-1.88.22-.58.53-1.09.93-1.52.4-.43.88-.77 1.43-1.01.56-.24 1.16-.36 1.82-.36.72 0 1.35.14 1.89.42.54.28.99.66 1.36 1.13.37.47.64 1.01.82 1.62.18.61.26 1.25.23 1.92h-6.6c0 .68.17 1.25.53 1.68zm2.49-4.91c-.32-.36-.77-.54-1.35-.54-.38 0-.7.07-.95.2-.25.14-.45.3-.61.5-.16.2-.27.4-.35.62-.08.21-.13.41-.15.58h4.23c-.11-.57-.34-1.01-.65-1.36h-.17zM14.04 4.75h5.27v1.41h-5.27V4.75z" }) })
+};
+function TeamCredits({ data }) {
+  if (!data.members || data.members.length === 0) return null;
+  const layoutClasses = {
+    grid: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",
+    list: "space-y-6",
+    carousel: "flex gap-6 overflow-x-auto pb-4"
+  };
+  return /* @__PURE__ */ jsx("section", { className: "py-20", children: /* @__PURE__ */ jsxs("div", { className: "wrapper", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center", children: [
+      /* @__PURE__ */ jsx("h2", { className: "mb-2 text-3xl font-bold text-[var(--color-text-primary)]", children: data.title }),
+      data.subtitle && /* @__PURE__ */ jsx("p", { className: "text-lg text-[var(--color-text-secondary)]", children: data.subtitle })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: layoutClasses[data.layout], children: data.members.map((member, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `overflow-hidden rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] ${data.layout === "carousel" ? "w-80 flex-shrink-0" : ""}`,
+        children: [
+          member.photo && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: member.photo,
+                alt: member.name,
+                className: "aspect-square w-full object-cover",
+                loading: "lazy"
+              }
+            ),
+            member.company_logo && /* @__PURE__ */ jsx("div", { className: "absolute right-4 bottom-4 rounded-lg bg-white p-2 shadow-md", children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: member.company_logo,
+                alt: member.company || "",
+                className: "h-6 w-auto"
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-[var(--color-text-primary)]", children: member.name }),
+            /* @__PURE__ */ jsx("p", { className: "mb-1 text-[var(--color-primary)]", children: member.role }),
+            member.company && /* @__PURE__ */ jsx("p", { className: "mb-3 text-sm text-[var(--color-text-muted)]", children: member.company }),
+            member.contribution && /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "mb-4 text-sm text-[var(--color-text-secondary)]",
+                dangerouslySetInnerHTML: { __html: member.contribution }
+              }
+            ),
+            member.quote && /* @__PURE__ */ jsxs("blockquote", { className: "mb-4 border-l-2 border-[var(--color-primary)] pl-3 text-sm text-[var(--color-text-secondary)] italic", children: [
+              '"',
+              member.quote,
+              '"'
+            ] }),
+            member.social && Object.keys(member.social).length > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-3", children: Object.entries(member.social).map(([platform, url]) => /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: url,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "text-[var(--color-text-muted)] transition-colors hover:text-[var(--color-primary)]",
+                "aria-label": platform,
+                children: socialIcons[platform] || platform
+              },
+              platform
+            )) })
+          ] })
+        ]
+      },
+      index
+    )) }),
+    data.note && /* @__PURE__ */ jsx("p", { className: "mt-8 text-center text-sm text-[var(--color-text-muted)]", children: data.note })
+  ] }) });
+}
+function StarRating({ rating }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: `h-4 w-4 ${star <= rating ? "text-yellow-400" : "text-gray-300"}`,
+      fill: "currentColor",
+      viewBox: "0 0 20 20",
+      children: /* @__PURE__ */ jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" })
+    },
+    star
+  )) });
+}
+function Testimonial({ data }) {
+  if (data.single_quote) {
+    return /* @__PURE__ */ jsx("section", { className: "bg-[var(--color-background-light)] py-20", children: /* @__PURE__ */ jsx("div", { className: "wrapper", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl text-center", children: [
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "mx-auto mb-6 h-12 w-12 text-[var(--color-primary)]",
+          fill: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /* @__PURE__ */ jsx("path", { d: "M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("blockquote", { children: [
+        /* @__PURE__ */ jsxs("p", { className: "mb-6 text-2xl font-medium text-[var(--color-text-primary)] md:text-3xl", children: [
+          '"',
+          data.single_quote.text,
+          '"'
+        ] }),
+        /* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsxs("cite", { className: "not-italic", children: [
+          /* @__PURE__ */ jsx("strong", { className: "text-lg text-[var(--color-text-primary)]", children: data.single_quote.author }),
+          data.single_quote.title && /* @__PURE__ */ jsx("span", { className: "block text-[var(--color-text-secondary)]", children: data.single_quote.title }),
+          data.single_quote.company && /* @__PURE__ */ jsx("span", { className: "block text-[var(--color-text-muted)]", children: data.single_quote.company })
+        ] }) })
+      ] })
+    ] }) }) });
+  }
+  if (!data.testimonials || data.testimonials.length === 0) return null;
+  return /* @__PURE__ */ jsx("section", { className: "py-20", children: /* @__PURE__ */ jsxs("div", { className: "wrapper", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center", children: [
+      /* @__PURE__ */ jsx("h3", { className: "mb-2 text-3xl font-bold text-[var(--color-text-primary)]", children: data.title }),
+      data.subtitle && /* @__PURE__ */ jsx("p", { className: "text-lg text-[var(--color-text-secondary)]", children: data.subtitle })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid gap-6 md:grid-cols-2 lg:grid-cols-3", children: data.testimonials.map((testimonial, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] p-6",
+        children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "mb-4 h-8 w-8 text-[var(--color-primary)]/30",
+              fill: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx("path", { d: "M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" })
+            }
+          ),
+          /* @__PURE__ */ jsx("blockquote", { className: "mb-4", children: /* @__PURE__ */ jsxs("p", { className: "text-[var(--color-text-secondary)]", children: [
+            '"',
+            testimonial.quote,
+            '"'
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            testimonial.photo && /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: testimonial.photo,
+                alt: testimonial.name,
+                className: "h-12 w-12 rounded-full object-cover",
+                loading: "lazy"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("cite", { className: "font-medium text-[var(--color-text-primary)] not-italic", children: testimonial.name }),
+              testimonial.title && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-muted)]", children: testimonial.title }),
+              testimonial.company && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-muted)]", children: testimonial.company })
+            ] })
+          ] }),
+          testimonial.rating && /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(StarRating, { rating: testimonial.rating }) }),
+          testimonial.context && /* @__PURE__ */ jsx("p", { className: "mt-4 text-sm text-[var(--color-text-muted)] italic", children: testimonial.context })
+        ]
+      },
+      index
+    )) })
+  ] }) });
+}
+function TextBlock({ data }) {
+  const layoutClasses = {
+    standard: "max-w-3xl",
+    wide: "max-w-5xl",
+    centered: "max-w-2xl mx-auto text-center"
+  };
+  const textSizeClasses = {
+    normal: "text-base",
+    large: "text-lg",
+    small: "text-sm"
+  };
+  const alignClasses = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right"
+  };
+  return /* @__PURE__ */ jsx("section", { className: "py-20", children: /* @__PURE__ */ jsx("div", { className: "wrapper", children: /* @__PURE__ */ jsxs("div", { className: `${layoutClasses[data.layout]} ${alignClasses[data.text_align || "left"]}`, children: [
+    data.title && /* @__PURE__ */ jsx("h4", { className: "mb-4 text-2xl font-bold text-[var(--color-text-primary)]", children: data.title }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `text-[var(--color-text-secondary)] ${textSizeClasses[data.text_size || "normal"]} prose prose-lg mb-6 max-w-none`,
+        dangerouslySetInnerHTML: { __html: data.content }
+      }
+    ),
+    data.quote && /* @__PURE__ */ jsxs("blockquote", { className: "my-8 border-l-4 border-[var(--color-primary)] py-2 pl-6", children: [
+      /* @__PURE__ */ jsxs("p", { className: "mb-2 text-xl text-[var(--color-text-primary)] italic", children: [
+        '"',
+        data.quote,
+        '"'
+      ] }),
+      data.quote_author && /* @__PURE__ */ jsxs("cite", { className: "text-[var(--color-text-secondary)] not-italic", children: [
+        "\u2014 ",
+        data.quote_author
+      ] })
+    ] }),
+    data.lists && data.lists.length > 0 && /* @__PURE__ */ jsx("div", { className: "my-8 space-y-8", children: data.lists.map((list, listIndex) => /* @__PURE__ */ jsxs("div", { children: [
+      list.title && /* @__PURE__ */ jsx("h5", { className: "mb-3 text-lg font-semibold text-[var(--color-text-primary)]", children: list.title }),
+      /* @__PURE__ */ jsx(
+        "ul",
+        {
+          className: `space-y-2 ${list.style === "numbered" ? "list-inside list-decimal" : ""}`,
+          children: list.items.map((item, itemIndex) => /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "flex items-start gap-2 text-[var(--color-text-secondary)]",
+              children: [
+                list.style === "checkmarks" && /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: "mt-0.5 h-5 w-5 flex-shrink-0 text-[var(--color-primary)]",
+                    fill: "currentColor",
+                    viewBox: "0 0 20 20",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        fillRule: "evenodd",
+                        d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+                        clipRule: "evenodd"
+                      }
+                    )
+                  }
+                ),
+                list.style === "bullets" && /* @__PURE__ */ jsx("span", { className: "mt-2 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-[var(--color-primary)]" }),
+                /* @__PURE__ */ jsx("span", { children: item })
+              ]
+            },
+            itemIndex
+          ))
+        }
+      )
+    ] }, listIndex)) }),
+    data.cta && /* @__PURE__ */ jsx("div", { className: "mt-8", children: /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: data.cta.url,
+        className: `btn ${data.cta.style === "primary" ? "btn-primary" : "btn-outline"}`,
+        children: data.cta.text
+      }
+    ) })
+  ] }) }) });
+}
+function VideoSection({ data }) {
+  return /* @__PURE__ */ jsxs("section", { className: "py-20", children: [
+    /* @__PURE__ */ jsx("div", { className: "wrapper", children: /* @__PURE__ */ jsxs("div", { className: "mb-8 max-w-2xl", children: [
+      /* @__PURE__ */ jsx("h4", { className: "mb-4 text-2xl font-bold text-[var(--color-text-primary)]", children: data.title }),
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "text-lg text-[var(--color-text-secondary)]",
+          dangerouslySetInnerHTML: { __html: data.content }
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: `relative ${data.overlay ? "has-overlay" : ""}`, children: [
+      data.overlay && data.overlay_content && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `absolute inset-0 z-10 flex bg-black/50 items-${data.overlay_position || "center"} justify-center`,
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "p-8 text-center text-white",
+              dangerouslySetInnerHTML: { __html: data.overlay_content }
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "video",
+          {
+            className: "w-full rounded-xl shadow-xl",
+            autoPlay: data.autoplay !== false,
+            muted: data.muted !== false,
+            loop: data.loop !== false,
+            playsInline: true,
+            children: /* @__PURE__ */ jsx("source", { src: data.video, type: "video/mp4" })
+          }
+        ),
+        data.device_frame && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: data.device_frame,
+            alt: "",
+            className: "pointer-events-none absolute inset-0 h-full w-full object-contain"
+          }
+        )
+      ] })
+    ] }),
+    data.caption && /* @__PURE__ */ jsx("div", { className: "wrapper", children: /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "mt-4 text-center text-sm text-[var(--color-text-muted)]",
+        dangerouslySetInnerHTML: { __html: data.caption }
+      }
+    ) })
+  ] });
+}
+
+// src/tokens/colors.ts
+var colors = {
+  primary: {
+    50: "#e6f9fb",
+    100: "#b3eef3",
+    200: "#80e3eb",
+    300: "#4dd8e3",
+    400: "#26cfdc",
+    DEFAULT: "#02aec2",
+    600: "#029aad",
+    700: "#017d8c",
+    800: "#01606b",
+    900: "#00434a"
+  },
+  accent: {
+    warm: {
+      DEFAULT: "#f59e0b",
+      light: "#fcd34d",
+      dark: "#d97706"
+    },
+    violet: {
+      DEFAULT: "#8b5cf6",
+      light: "#a78bfa",
+      dark: "#7c3aed"
+    },
+    emerald: {
+      DEFAULT: "#10b981",
+      light: "#34d399",
+      dark: "#059669"
+    },
+    rose: {
+      DEFAULT: "#f43f5e",
+      light: "#fb7185",
+      dark: "#e11d48"
+    }
+  },
+  dot: {
+    red: "#ed3125",
+    yellow: "#f8be1a",
+    blue: "#0066d5",
+    magenta: "#ef4467",
+    purple: "#8863f3",
+    turquoise: "#02afc2"
+  },
+  semantic: {
+    success: {
+      DEFAULT: "#10b981",
+      light: "#d1fae5",
+      dark: "#059669"
+    },
+    warning: {
+      DEFAULT: "#f59e0b",
+      light: "#fef3c7",
+      dark: "#d97706"
+    },
+    error: {
+      DEFAULT: "#ef4444",
+      light: "#fee2e2",
+      dark: "#dc2626"
+    },
+    info: {
+      DEFAULT: "#3b82f6",
+      light: "#dbeafe",
+      dark: "#2563eb"
+    }
+  },
+  gray: {
+    50: "#f9fafb",
+    100: "#f3f4f6",
+    200: "#e5e7eb",
+    300: "#d1d5db",
+    400: "#9ca3af",
+    500: "#6b7280",
+    600: "#4b5563",
+    700: "#374151",
+    800: "#1f2937",
+    900: "#111827",
+    950: "#030712"
+  },
+  white: "#ffffff",
+  black: "#000000"
+};
+
+// src/tokens/spacing.ts
+var spacing = {
+  px: "1px",
+  0: "0",
+  0.5: "0.125rem",
+  // 2px
+  1: "0.25rem",
+  // 4px
+  1.5: "0.375rem",
+  // 6px
+  2: "0.5rem",
+  // 8px
+  2.5: "0.625rem",
+  // 10px
+  3: "0.75rem",
+  // 12px
+  3.5: "0.875rem",
+  // 14px
+  4: "1rem",
+  // 16px
+  5: "1.25rem",
+  // 20px
+  6: "1.5rem",
+  // 24px
+  7: "1.75rem",
+  // 28px
+  8: "2rem",
+  // 32px
+  9: "2.25rem",
+  // 36px
+  10: "2.5rem",
+  // 40px
+  11: "2.75rem",
+  // 44px
+  12: "3rem",
+  // 48px
+  14: "3.5rem",
+  // 56px
+  16: "4rem",
+  // 64px
+  20: "5rem",
+  // 80px
+  24: "6rem",
+  // 96px
+  28: "7rem",
+  // 112px
+  32: "8rem",
+  // 128px
+  36: "9rem",
+  // 144px
+  40: "10rem",
+  // 160px
+  44: "11rem",
+  // 176px
+  48: "12rem",
+  // 192px
+  52: "13rem",
+  // 208px
+  56: "14rem",
+  // 224px
+  60: "15rem",
+  // 240px
+  64: "16rem"
+  // 256px
+};
+var sectionPadding = {
+  sm: "var(--section-padding-sm)",
+  md: "var(--section-padding-md)",
+  lg: "var(--section-padding-lg)"
+};
+
+// src/tokens/animations.ts
+var durations = {
+  instant: "0ms",
+  fast: "100ms",
+  normal: "200ms",
+  moderate: "300ms",
+  slow: "400ms",
+  slower: "500ms",
+  slowest: "700ms",
+  glacial: "1000ms"
+};
+var easings = {
+  linear: "linear",
+  in: "cubic-bezier(0.4, 0, 1, 1)",
+  out: "cubic-bezier(0, 0, 0.2, 1)",
+  inOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+  // Expressive easings for whimsy and delight
+  spring: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
+  bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
+  smooth: "cubic-bezier(0.25, 0.1, 0.25, 1)",
+  snappy: "cubic-bezier(0.2, 0, 0, 1)",
+  enter: "cubic-bezier(0, 0, 0.2, 1)",
+  exit: "cubic-bezier(0.4, 0, 1, 1)"
+};
+
+export { BeforeAfter, CaseStudyBreakdown, CompactContactForm, ContactForm, ContentPage, FullWidthImage, ImageGrid, ImageGridModal, IndustryGrid, layout_exports as Layout, MainNav, PageHero, patterns_exports as Patterns, ProblemStatement, ProcessSteps, ProcessTimeline, RelatedProjects, ServiceSection, SolutionSummary, StatBar, TeamCredits, TeamGrid, Testimonial, TextBlock, ToastContainer as Toast, ui_exports as UI, VideoHero, VideoSection, colors, durations, easings, sectionPadding, spacing };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map