@opensite/ui 2.2.9 → 2.3.1

package/dist/registry.cjs

@@ -6,10 +6,10 @@ var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var img = require('@page-speed/img');
 var classVarianceAuthority = require('class-variance-authority');
-var icon = require('@page-speed/icon');
 var react = require('motion/react');
 var reactSlot = require('@radix-ui/react-slot');
 var PopoverPrimitive = require('@radix-ui/react-popover');
+var icon = require('@page-speed/icon');
 var usePlatformFromUrl = require('@opensite/hooks/usePlatformFromUrl');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var forms = require('@page-speed/forms');
@@ -1828,458 +1828,6 @@ function AboutVisionGallery({
     }
   );
 }
-var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
-function DynamicIcon({ apiKey, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
-}
-function AboutDeveloperStory({
-  className,
-  containerClassName,
-  title,
-  titleClassName,
-  description,
-  descriptionClassName,
-  actions,
-  actionsSlot,
-  actionsClassName,
-  logos,
-  logosSlot,
-  logosClassName,
-  stats,
-  statsSlot,
-  statsClassName,
-  storyTitle,
-  storyTitleClassName,
-  storyContent,
-  storyContentClassName,
-  storyImage,
-  storyImageClassName,
-  optixFlowConfig,
-  background,
-  spacing,
-  pattern,
-  patternOpacity
-}) {
-  const actionsContent = React26.useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cn("flex flex-wrap justify-center gap-4", actionsClassName),
-        children: actions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-          Pressable,
-          {
-            href: action.href,
-            onClick: action.onClick,
-            size: action.size || "lg",
-            variant: action.variant || "default",
-            asButton: true,
-            children: [
-              action.label,
-              idx === 1 && /* @__PURE__ */ jsxRuntime.jsx(
-                DynamicIcon,
-                {
-                  name: "lucide/arrow-right",
-                  size: 16,
-                  className: "ml-2"
-                }
-              )
-            ]
-          },
-          idx
-        ))
-      }
-    );
-  }, [actionsSlot, actions, actionsClassName]);
-  const logosContent = React26.useMemo(() => {
-    if (logosSlot) return logosSlot;
-    if (!logos || logos.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cn(
-          "mt-20 flex flex-wrap items-center justify-center gap-8 opacity-60",
-          logosClassName
-        ),
-        children: logos.map((logo, idx) => {
-          if (typeof logo.src === "string") {
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
-              {
-                src: logo.src,
-                alt: logo.alt,
-                className: "h-8 w-auto grayscale",
-                optixFlowConfig
-              },
-              idx
-            );
-          }
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-8", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
-              {
-                src: logo.src.light,
-                alt: logo.alt,
-                className: "h-42 w-auto object-contain grayscale dark:hidden",
-                optixFlowConfig
-              }
-            ),
-            logo.src.dark && /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
-              {
-                src: logo.src.dark,
-                alt: logo.alt,
-                className: "hidden h-42 w-auto object-contain grayscale dark:block",
-                optixFlowConfig
-              }
-            )
-          ] }, idx);
-        })
-      }
-    );
-  }, [logosSlot, logos, logosClassName, optixFlowConfig]);
-  const statsContent = React26.useMemo(() => {
-    if (statsSlot) return statsSlot;
-    if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cn(
-          "mt-20 grid grid-cols-1 gap-8 border-y py-12 md:grid-cols-3",
-          statsClassName
-        ),
-        children: stats.map((stat, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-          stat.value && (typeof stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-4xl font-bold", children: stat.value }) : stat.value),
-          stat.label && (typeof stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2", getTextColor(background, "muted")), children: stat.label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: stat.label }))
-        ] }, idx))
-      }
-    );
-  }, [statsSlot, stats, statsClassName]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Section,
-    {
-      background,
-      spacing,
-      pattern,
-      patternOpacity,
-      className: cn(className),
-      containerClassName,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex max-w-4xl flex-col items-center gap-8 text-center", children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "h1",
-            {
-              className: cn(
-                "text-4xl font-bold tracking-tight md:text-6xl text-balance",
-                titleClassName
-              ),
-              children: title
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
-            {
-              className: cn(
-                "max-w-2xl text-lg md:text-xl text-balance",
-                getTextColor(background, "muted"),
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          actionsContent
-        ] }),
-        logosContent,
-        statsContent,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-20 grid gap-12 md:grid-cols-2 md:items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            storyTitle && (typeof storyTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "h2",
-              {
-                className: cn(
-                  "text-3xl font-bold md:text-4xl",
-                  storyTitleClassName
-                ),
-                children: storyTitle
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: storyTitleClassName, children: storyTitle })),
-            storyContent && (typeof storyContent === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                className: cn(
-                  "mt-6 text-lg whitespace-pre-line",
-                  getTextColor(background, "muted"),
-                  storyContentClassName
-                ),
-                children: storyContent
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6", storyContentClassName), children: storyContent }))
-          ] }),
-          storyImage && /* @__PURE__ */ jsxRuntime.jsx(
-            img.Img,
-            {
-              src: storyImage.src,
-              alt: storyImage.alt,
-              className: cn(
-                "rounded-2xl object-cover w-full h-auto",
-                storyImageClassName
-              ),
-              optixFlowConfig
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-function AboutStoryGallery({
-  className,
-  title,
-  titleClassName,
-  description,
-  descriptionClassName,
-  images,
-  imagesSlot,
-  imagesClassName,
-  optixFlowConfig,
-  background,
-  spacing = "py-8 md:py-32",
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  pattern,
-  patternOpacity
-}) {
-  const imagesContent = React26.useMemo(() => {
-    if (imagesSlot) return imagesSlot;
-    if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cn(
-          "mt-7 md:mt-16 grid gap-4 md:grid-cols-3",
-          imagesClassName
-        ),
-        children: images.map((image, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-          img.Img,
-          {
-            src: image.src,
-            alt: image.alt,
-            className: cn(
-              "h-64 w-full rounded-xl object-cover",
-              image.className
-            ),
-            optixFlowConfig
-          },
-          idx
-        ))
-      }
-    );
-  }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Section,
-    {
-      background,
-      spacing,
-      pattern,
-      patternOpacity,
-      className,
-      containerClassName,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl text-center", children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "h1",
-            {
-              className: cn(
-                "text-4xl font-bold tracking-tight md:text-5xl text-balance",
-                titleClassName
-              ),
-              children: title
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
-            {
-              className: cn(
-                "mt-6 text-lg whitespace-pre-line text-balance",
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6", descriptionClassName), children: description }))
-        ] }),
-        imagesContent
-      ]
-    }
-  );
-}
-function AboutStreamlineTeam({
-  className,
-  containerClassName,
-  title,
-  titleClassName,
-  description,
-  descriptionClassName,
-  primaryImage,
-  primaryImageClassName,
-  secondaryImage,
-  secondaryImageClassName,
-  teamTitle,
-  teamTitleClassName,
-  teamDescription,
-  teamDescriptionClassName,
-  actions,
-  actionsSlot,
-  actionsClassName,
-  features,
-  featuresSlot,
-  featuresClassName,
-  teamSectionClassName,
-  optixFlowConfig,
-  background,
-  spacing,
-  pattern,
-  patternOpacity
-}) {
-  const featuresContent = React26.useMemo(() => {
-    if (featuresSlot) return featuresSlot;
-    if (!features || features.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-10 space-y-6", featuresClassName), children: features.map((feature, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: cn(
-            "flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10",
-            feature.iconBgClass
-          ),
-          children: feature.icon
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold", children: feature.title }) : feature.title),
-        feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: feature.description }) : feature.description)
-      ] })
-    ] }, idx)) });
-  }, [featuresSlot, features, featuresClassName, background]);
-  const actionsContent = React26.useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8", actionsClassName), children: actions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-      Pressable,
-      {
-        href: action.href,
-        onClick: action.onClick,
-        size: action.size || "lg",
-        variant: action.variant || "default",
-        asButton: true,
-        children: [
-          action.label,
-          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16, className: "ml-2" })
-        ]
-      },
-      idx
-    )) });
-  }, [actionsSlot, actions, actionsClassName]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Section,
-    {
-      background,
-      spacing,
-      pattern,
-      patternOpacity,
-      className: cn(className),
-      containerClassName,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-12 lg:grid-cols-2 lg:items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-            primaryImage && /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
-              {
-                src: primaryImage.src,
-                alt: primaryImage.alt,
-                className: cn(
-                  "rounded-2xl object-cover w-auto h-full",
-                  primaryImageClassName
-                ),
-                optixFlowConfig
-              }
-            ),
-            secondaryImage && /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
-              {
-                src: secondaryImage.src,
-                alt: secondaryImage.alt,
-                className: cn(
-                  "absolute -bottom-8 -right-8 h-48 w-48 rounded-xl border-4 border-background object-cover shadow-lg",
-                  secondaryImageClassName
-                ),
-                optixFlowConfig
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "h1",
-              {
-                className: cn(
-                  "text-4xl font-bold tracking-tight md:text-5xl",
-                  titleClassName
-                ),
-                children: title
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                className: cn(
-                  "mt-6 text-lg",
-                  getTextColor(background, "muted"),
-                  descriptionClassName
-                ),
-                children: description
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6", descriptionClassName), children: description })),
-            featuresContent
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "mt-6 md:mt-32 rounded-2xl p-8 md:p-16",
-              getNestedCardBg(background),
-              getNestedCardTextColor(background),
-              teamSectionClassName
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-2xl text-center", children: [
-              teamTitle && (typeof teamTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "h2",
-                {
-                  className: cn(
-                    "text-3xl font-bold md:text-4xl",
-                    teamTitleClassName
-                  ),
-                  children: teamTitle
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: teamTitleClassName, children: teamTitle })),
-              teamDescription && (typeof teamDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "mt-4 text-lg",
-                    getTextColor(background, "muted"),
-                    teamDescriptionClassName
-                  ),
-                  children: teamDescription
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", teamDescriptionClassName), children: teamDescription })),
-              actionsContent
-            ] })
-          }
-        )
-      ]
-    }
-  );
-}
 var slideVariants = {
   initial: {
     scale: 0.98,
@@ -2591,6 +2139,10 @@ function PopoverContent({
     }
   ) });
 }
+var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
+function DynamicIcon({ apiKey, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
+}
 var BUTTON_SIZES = {
   sm: { buttonSize: "size-8", iconSize: 16 },
   md: { buttonSize: "size-10", iconSize: 20 },
@@ -3111,7 +2663,7 @@ function AboutExpandableValues({
   actions,
   actionsSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -3122,7 +2674,7 @@ function AboutExpandableValues({
   ctaDescriptionClassName,
   actionsClassName,
   background,
-  spacing,
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -3130,7 +2682,7 @@ function AboutExpandableValues({
   const toggleExpand = React26.useCallback((id) => {
     setExpandedValue((prev) => prev === id ? null : id);
   }, []);
-  const actionsContent = React26.useMemo(() => {
+  React26.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -3153,10 +2705,8 @@ function AboutExpandableValues({
       "div",
       {
         className: cn(
-          "group overflow-hidden rounded-xl border transition-all duration-300",
-          getNestedCardBg(background, "card"),
-          getNestedCardTextColor(background),
-          expandedValue === value.id ? "col-span-1 shadow-lg md:col-span-2 lg:col-span-3" : ""
+          "group overflow-hidden rounded-xl border transition-all duration-300 col-span-1",
+          expandedValue === value.id ? "shadow-xl" : "shadow-md"
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3167,10 +2717,10 @@ function AboutExpandableValues({
               type: "button",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 rounded-md bg-primary/10 p-3", children: value.icon }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 size-12 flex items-center justify-center rounded-md bg-primary text-primary-foreground shadow-lg", children: value.icon }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                     value.title && (typeof value.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold", children: value.title }) : value.title),
-                    value.shortDescription && (typeof value.shortDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 text-sm", getTextColor(background, "muted")), children: value.shortDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: value.shortDescription }))
+                    value.shortDescription && (typeof value.shortDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 text-sm"), children: value.shortDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: value.shortDescription }))
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -3180,7 +2730,6 @@ function AboutExpandableValues({
                     size: 20,
                     className: cn(
                       "mt-1 shrink-0 transition-transform duration-300",
-                      getTextColor(background, "muted"),
                       expandedValue === value.id ? "rotate-180" : ""
                     )
                   }
@@ -3189,21 +2738,28 @@ function AboutExpandableValues({
             }
           ),
           expandedValue === value.id && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 px-6 pb-6", children: [
-            value.longDescription && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-              "rounded-lg p-4",
-              getNestedCardBg(background, "subtle")
-            ), children: typeof value.longDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: value.longDescription }) : value.longDescription }),
+            value.longDescription && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "rounded-lg p-4 shadow-md",
+                  "bg-muted text-muted-foreground"
+                ),
+                children: typeof value.longDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "relative", children: value.longDescription }) : value.longDescription
+              }
+            ),
             value.examples && value.examples.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: cn("mb-2 text-sm font-semibold", getTextColor(background, "muted")), children: "How we put this into practice:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: cn("mb-2 text-sm font-semibold"), children: "How we put this into practice:" }),
               /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2", children: value.examples.map((example, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-1 flex size-5 shrink-0 items-center justify-center rounded-full", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsxRuntime.jsx(
-                  DynamicIcon,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
                   {
-                    name: "lucide/check",
-                    size: 12,
-                    className: getAccentColor(background)
+                    className: cn(
+                      "mt-1 flex size-5 shrink-0 items-center justify-center rounded-full"
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check", size: 12 })
                   }
-                ) }),
+                ),
                 typeof example === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm pt-2", children: example }) : example
               ] }, index)) })
             ] })
@@ -3220,7 +2776,7 @@ function AboutExpandableValues({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3231,18 +2787,7 @@ function AboutExpandableValues({
               headerClassName
             ),
             children: [
-              badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(
-                    "inline-block rounded-lg px-3 py-1 text-sm",
-                    getNestedCardBg(background, "muted"),
-                    getAccentColor(background),
-                    badgeClassName
-                  ),
-                  children: badgeText
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: badgeText })),
+              badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("px-3", badgeClassName), children: badgeText }) : badgeText),
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "h2",
                 {
@@ -3252,18 +2797,8 @@ function AboutExpandableValues({
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "text-balance",
-                    getTextColor(background, "muted"),
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-balance", descriptionClassName), children: description }) : description)
             ]
           }
         ),
@@ -3272,21 +2807,20 @@ function AboutExpandableValues({
           "div",
           {
             className: cn(
-              "relative mt-8 rounded-lg p-8",
-              getNestedCardBg(background, "accent"),
-              getNestedCardTextColor(background),
+              "relative mt-8 rounded-lg p-8 bg-muted text-muted-foreground",
               ctaClassName
             ),
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl space-y-6 text-center", children: [
-              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: ctaHeadingClassName, children: ctaHeading })),
-              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl space-y-6 text-center flex flex-col items-center gap-6", children: [
+              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
+              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(ctaDescriptionClassName), children: ctaDescription }) : ctaDescription),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                BlockActions,
                 {
-                  className: cn(getTextColor(background, "muted"), ctaDescriptionClassName),
-                  children: ctaDescription
+                  actions,
+                  actionsSlot,
+                  actionsClassName
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: ctaDescriptionClassName, children: ctaDescription })),
-              actionsContent
+              )
             ] })
           }
         )
@@ -7960,6 +7494,442 @@ function ActionComponent({ action }) {
     }
   );
 }
+function AboutDeveloperStory({
+  className,
+  title,
+  titleClassName,
+  description,
+  descriptionClassName,
+  actions,
+  actionsSlot,
+  actionsClassName,
+  logos,
+  logosSlot,
+  logosClassName,
+  stats,
+  statsSlot,
+  statsClassName,
+  storyTitle,
+  storyTitleClassName,
+  storyContent,
+  storyContentClassName,
+  storyImage,
+  storyImageClassName,
+  optixFlowConfig,
+  background,
+  spacing = "xl",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  pattern,
+  patternOpacity
+}) {
+  const logosContent = React26.useMemo(() => {
+    if (logosSlot) return logosSlot;
+    if (!logos || logos.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "mt-20 flex flex-wrap items-center justify-center gap-8 opacity-60",
+          logosClassName
+        ),
+        children: logos.map((logo, idx) => {
+          if (typeof logo.src === "string") {
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: logo.src,
+                alt: logo.alt,
+                className: "h-8 w-auto grayscale",
+                optixFlowConfig
+              },
+              idx
+            );
+          }
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-8", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: logo.src.light,
+                alt: logo.alt,
+                className: "h-42 w-auto object-contain grayscale dark:hidden",
+                optixFlowConfig
+              }
+            ),
+            logo.src.dark && /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: logo.src.dark,
+                alt: logo.alt,
+                className: "hidden h-42 w-auto object-contain grayscale dark:block",
+                optixFlowConfig
+              }
+            )
+          ] }, idx);
+        })
+      }
+    );
+  }, [logosSlot, logos, logosClassName, optixFlowConfig]);
+  const statsContent = React26.useMemo(() => {
+    if (statsSlot) return statsSlot;
+    if (!stats || stats.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "mt-20 grid grid-cols-1 gap-8 border-y py-12 md:grid-cols-3",
+          statsClassName
+        ),
+        children: stats.map((stat, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+          stat.value && (typeof stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-4xl font-bold", children: stat.value }) : stat.value),
+          stat.label && (typeof stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2", children: stat.label }) : stat.label)
+        ] }, idx))
+      }
+    );
+  }, [statsSlot, stats, statsClassName]);
+  const contentItems = React26.useMemo(() => {
+    const items = [];
+    if (title) {
+      if (typeof title === "string") {
+        items.push({
+          _type: "text",
+          as: "h1",
+          className: cn(
+            "text-4xl font-bold tracking-tight md:text-6xl text-balance",
+            title
+          ),
+          children: title
+        });
+      } else {
+        items.push(title);
+      }
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items.push({
+          _type: "text",
+          as: "p",
+          className: cn(
+            "max-w-2xl text-lg md:text-xl text-balance",
+            descriptionClassName
+          ),
+          children: description
+        });
+      } else {
+        items.push(description);
+      }
+    }
+    return items;
+  }, [title, titleClassName, description, descriptionClassName]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      containerClassName,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex max-w-4xl flex-col items-center gap-8 text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ContentGroup, { items: contentItems }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            BlockActions,
+            {
+              actions,
+              actionsSlot,
+              actionsClassName
+            }
+          )
+        ] }),
+        logosContent,
+        statsContent,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-20 grid gap-12 md:grid-cols-2 md:items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            storyTitle && (typeof storyTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h2",
+              {
+                className: cn(
+                  "text-3xl font-bold md:text-4xl",
+                  storyTitleClassName
+                ),
+                children: storyTitle
+              }
+            ) : storyTitle),
+            storyContent && (typeof storyContent === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "mt-6 text-lg whitespace-pre-line",
+                  storyContentClassName
+                ),
+                children: storyContent
+              }
+            ) : storyContent)
+          ] }),
+          storyImage && /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: storyImage.src,
+              alt: storyImage.alt,
+              className: cn(
+                "rounded-2xl object-cover w-full h-auto",
+                storyImageClassName
+              ),
+              optixFlowConfig
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function AboutStoryGallery({
+  className,
+  title,
+  titleClassName,
+  description,
+  descriptionClassName,
+  images,
+  imagesSlot,
+  imagesClassName,
+  optixFlowConfig,
+  background,
+  spacing = "py-8 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  pattern,
+  patternOpacity
+}) {
+  const imagesContent = React26.useMemo(() => {
+    if (imagesSlot) return imagesSlot;
+    if (!images || images.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "mt-7 md:mt-16 grid gap-4 md:grid-cols-3",
+          imagesClassName
+        ),
+        children: images.map((image, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: image.src,
+            alt: image.alt,
+            className: cn(
+              "h-64 w-full rounded-xl object-cover",
+              image.className
+            ),
+            optixFlowConfig
+          },
+          idx
+        ))
+      }
+    );
+  }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      containerClassName,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl text-center", children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-bold tracking-tight md:text-5xl text-balance",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mt-6 text-lg whitespace-pre-line text-balance",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6", descriptionClassName), children: description }))
+        ] }),
+        imagesContent
+      ]
+    }
+  );
+}
+function AboutStreamlineTeam({
+  className,
+  containerClassName,
+  title,
+  titleClassName,
+  description,
+  descriptionClassName,
+  primaryImage,
+  primaryImageClassName,
+  secondaryImage,
+  secondaryImageClassName,
+  teamTitle,
+  teamTitleClassName,
+  teamDescription,
+  teamDescriptionClassName,
+  actions,
+  actionsSlot,
+  actionsClassName,
+  features,
+  featuresSlot,
+  featuresClassName,
+  teamSectionClassName,
+  optixFlowConfig,
+  background,
+  spacing,
+  pattern,
+  patternOpacity
+}) {
+  const featuresContent = React26.useMemo(() => {
+    if (featuresSlot) return featuresSlot;
+    if (!features || features.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-10 space-y-6", featuresClassName), children: features.map((feature, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10",
+            feature.iconBgClass
+          ),
+          children: feature.icon
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold", children: feature.title }) : feature.title),
+        feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: feature.description }) : feature.description)
+      ] })
+    ] }, idx)) });
+  }, [featuresSlot, features, featuresClassName, background]);
+  const actionsContent = React26.useMemo(() => {
+    if (actionsSlot) return actionsSlot;
+    if (!actions || actions.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8", actionsClassName), children: actions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+      Pressable,
+      {
+        href: action.href,
+        onClick: action.onClick,
+        size: action.size || "lg",
+        variant: action.variant || "default",
+        asButton: true,
+        children: [
+          action.label,
+          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16, className: "ml-2" })
+        ]
+      },
+      idx
+    )) });
+  }, [actionsSlot, actions, actionsClassName]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      containerClassName,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-12 lg:grid-cols-2 lg:items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            primaryImage && /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: primaryImage.src,
+                alt: primaryImage.alt,
+                className: cn(
+                  "rounded-2xl object-cover w-auto h-full",
+                  primaryImageClassName
+                ),
+                optixFlowConfig
+              }
+            ),
+            secondaryImage && /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: secondaryImage.src,
+                alt: secondaryImage.alt,
+                className: cn(
+                  "absolute -bottom-8 -right-8 h-48 w-48 rounded-xl border-4 border-background object-cover shadow-lg",
+                  secondaryImageClassName
+                ),
+                optixFlowConfig
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h1",
+              {
+                className: cn(
+                  "text-4xl font-bold tracking-tight md:text-5xl",
+                  titleClassName
+                ),
+                children: title
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "mt-6 text-lg",
+                  getTextColor(background, "muted"),
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6", descriptionClassName), children: description })),
+            featuresContent
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-6 md:mt-32 rounded-2xl p-8 md:p-16",
+              getNestedCardBg(background),
+              getNestedCardTextColor(background),
+              teamSectionClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-2xl text-center", children: [
+              teamTitle && (typeof teamTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-bold md:text-4xl",
+                    teamTitleClassName
+                  ),
+                  children: teamTitle
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: teamTitleClassName, children: teamTitle })),
+              teamDescription && (typeof teamDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-4 text-lg",
+                    getTextColor(background, "muted"),
+                    teamDescriptionClassName
+                  ),
+                  children: teamDescription
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", teamDescriptionClassName), children: teamDescription })),
+              actionsContent
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
 function AboutDeveloperProfile({
   name,
   role,
@@ -8575,7 +8545,6 @@ function AboutInteractiveTabs({
   tabs,
   tabsSlot,
   className,
-  containerClassName,
   headerClassName,
   titleClassName,
   subtitleClassName,
@@ -8588,7 +8557,8 @@ function AboutInteractiveTabs({
   tabContentImageClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity
 }) {
@@ -8615,15 +8585,15 @@ function AboutInteractiveTabs({
             {
               onClick: () => handleTabChange(tab.id),
               className: cn(
-                "flex-shrink-0 whitespace-nowrap px-6 py-3 text-sm font-medium transition-colors",
+                "shrink-0 whitespace-nowrap px-6 py-3 text-sm font-medium transition-colors",
                 activeTab === tab.id ? cn(
-                  "border-b-2",
-                  getBorderColor(background, "accent"),
-                  getAccentColor(background),
+                  "border-b-2 border-primary",
+                  "bg-primary text-primary-foreground",
                   activeTabClassName
                 ) : cn(
-                  getTextColor(background, "muted"),
-                  `hover:${getAccentColor(background)}`
+                  "border-b-2 border-muted",
+                  "bg-muted text-muted-foreground",
+                  "hover:bg-primary hover:text-primary-foreground hover:border-primary"
                 ),
                 tabButtonClassName
               ),
@@ -8652,11 +8622,7 @@ function AboutInteractiveTabs({
               typeof activeContent.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "p",
                 {
-                  className: cn(
-                    "mt-4 text-lg",
-                    getTextColor(background, "muted"),
-                    tabContentDescriptionClassName
-                  ),
+                  className: cn("mt-4 text-lg", tabContentDescriptionClassName),
                   children: activeContent.description
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", tabContentDescriptionClassName), children: activeContent.description })
@@ -8699,7 +8665,7 @@ function AboutInteractiveTabs({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl text-center", headerClassName), children: [
@@ -8712,18 +8678,8 @@ function AboutInteractiveTabs({
               ),
               children: title
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
-            {
-              className: cn(
-                "mt-4 text-lg text-balance",
-                getTextColor(background, "muted"),
-                subtitleClassName
-              ),
-              children: subtitle
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", subtitleClassName), children: subtitle }))
+          ) : title),
+          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-balance", subtitleClassName), children: subtitle }) : subtitle)
         ] }),
         (tabsSlot || tabs && tabs.length > 0) && tabsContent
       ]
@@ -18948,7 +18904,7 @@ function ContactHelpCenter({
   patternOpacity,
   className,
   contactItemsSlot,
-  spacing = "py-8 md:py-32",
+  spacing = "py-16 md:py-32",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   leftColumnClassName,
@@ -18966,10 +18922,10 @@ function ContactHelpCenter({
       Pressable,
       {
         href: item.href,
-        className: "flex items-start gap-4 rounded-lg p-4 ",
+        className: "flex items-start gap-4",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 20 }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-12 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 20 }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-1", children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: item.title }),
             item.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: item.subtitle }) : null
           ] })
@@ -18987,7 +18943,7 @@ function ContactHelpCenter({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-3xl p-8 md:p-12", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-2", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-5", leftColumnClassName), children: [
           eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "p",
@@ -19003,23 +18959,23 @@ function ContactHelpCenter({
             "h2",
             {
               className: cn(
-                "text-3xl font-bold md:text-4xl text-balance",
+                "text-3xl font-bold md:text-4xl text-pretty",
                 headingClassName
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          ) : heading),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-balance", descriptionClassName), children: description }) : description)
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
-              "rounded-2xl bg-background p-8 shadow-lg",
+              "rounded-2xl bg-card text-card-foreground py-8 px-4 md:px-8 shadow-lg",
               cardPanelClassName
             ),
             children: [
-              cardTitle ? typeof cardTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-xl font-bold", cardTitleClassName), children: cardTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardTitleClassName, children: cardTitle }) : null,
+              cardTitle ? typeof cardTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-xl font-bold", cardTitleClassName), children: cardTitle }) : cardTitle : null,
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6 space-y-4", contactItemsClassName), children: renderContactItems() })
             ]
           }
@@ -51987,34 +51943,6 @@ function HeroPresentationPlatformVideo({
     }
     return items;
   }, [subtitle, heading, headingClassName, description, descriptionClassName]);
-  React26.useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 font-medium md:flex-row", children: actions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
-  }, [actionsSlot, actions]);
   const renderVideo = React26.useMemo(() => {
     if (videoSlot) return videoSlot;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -98168,13 +98096,6 @@ function TimelineScrollHighlight({
     }
   );
 }
-
-// lib/blockBrandedIconsAndPlaceholders.ts
-var blockBrandedIconsAndPlaceholders = {
-  avatar1: "https://cdn.ing/assets/i/r/286239/ebm7o3j2kx48vw98emnwjaf5qvl6/avatar-1.webp",
-  avatar2: "https://cdn.ing/assets/i/r/286240/vgf3rrkwn0769pfdtpal60uo5vpw/avatar-2.webp",
-  avatar4: "https://cdn.ing/assets/i/r/286242/y0zkazxawxrl3twwkw63twf04pdt/avatar-4.webp",
-  avatar5: "https://cdn.ing/assets/i/r/286243/alziyfoo570m3vade3usufzlzj6x/avatar-5.webp"};
 function LinkTreeBlock({
   brandName,
   brandTagline,
@@ -98260,7 +98181,7 @@ function LinkTreeBlock({
     return value;
   };
   const nameForAlt = typeof brandName === "string" ? brandName : "Brand avatar";
-  const resolvedAvatar = resolveImage(brandAvatar || brandLogo, nameForAlt) || resolveImage(blockBrandedIconsAndPlaceholders.avatar1, nameForAlt);
+  const resolvedAvatar = resolveImage(brandAvatar || brandLogo, nameForAlt);
   const renderBrandHeader = React26__namespace.useMemo(() => {
     if (brandSlot) return brandSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -98294,7 +98215,7 @@ function LinkTreeBlock({
               "div",
               {
                 className: cn(
-                  "absolute -bottom-1 -right-1 rounded-full bg-primary p-1",
+                  "absolute -bottom-1 -right-1 rounded-full bg-primary text-primary-foreground p-1",
                   verifiedBadgeClassName
                 ),
                 children: verifiedIcon ?? /* @__PURE__ */ jsxRuntime.jsx(
@@ -98379,8 +98300,8 @@ function LinkTreeBlock({
           {
             className: cn(
               "group relative flex w-full items-center gap-3 rounded-xl px-4 py-3.5 transition-all duration-200",
-              "hover:scale-[1.02] active:scale-[0.98]",
-              isFeatured ? "bg-primary text-primary-foreground shadow-lg hover:bg-primary/90" : "border border-border bg-card text-card-foreground hover:bg-accent",
+              "border border-border",
+              isFeatured ? "bg-primary text-primary-foreground shadow-lg hover:bg-primary/90" : "bg-card text-card-foreground hover:bg-primary hover:text-primary-foreground",
               linkClassName,
               isFeatured ? featuredLinkClassName : null,
               linkItemClassName
@@ -98396,8 +98317,8 @@ function LinkTreeBlock({
         {
           className: cn(
             "group relative flex w-full items-center gap-3 rounded-xl px-4 py-3.5 transition-all duration-200",
-            "hover:scale-[1.02] active:scale-[0.98]",
-            isFeatured ? "bg-primary text-primary-foreground shadow-lg hover:bg-primary/90" : "border border-border bg-card text-card-foreground hover:bg-accent",
+            "border border-border",
+            isFeatured ? "bg-primary text-primary-foreground shadow-lg hover:bg-primary/90" : "bg-card text-card-foreground hover:bg-primary hover:text-primary-foreground",
             linkClassName,
             isFeatured ? featuredLinkClassName : null,
             linkItemClassName
@@ -98415,18 +98336,17 @@ function LinkTreeBlock({
                   ),
                   children: label
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: linkLabelClassName, children: label })),
+              ) : label),
               description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
                   className: cn(
                     "mt-0.5 block truncate text-xs",
-                    isFeatured ? "text-primary-foreground/70" : "",
                     linkDescriptionClassName
                   ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: linkDescriptionClassName, children: description }))
+              ) : description)
             ] }),
             link.badge && /* @__PURE__ */ jsxRuntime.jsx(
               Badge,
@@ -98443,7 +98363,7 @@ function LinkTreeBlock({
                 size: 16,
                 className: cn(
                   "shrink-0 transition-transform group-hover:translate-x-0.5",
-                  isFeatured ? "text-primary-foreground/70" : "",
+                  isFeatured ? "text-primary-foreground" : "",
                   linkChevronClassName
                 )
               }
@@ -98479,7 +98399,7 @@ function LinkTreeBlock({
           ),
           children: mediaGalleryTitle
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: mediaGalleryTitleClassName, children: mediaGalleryTitle })),
+      ) : mediaGalleryTitle),
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
@@ -98489,7 +98409,6 @@ function LinkTreeBlock({
             {
               className: cn(
                 "group relative aspect-square overflow-hidden rounded-lg cursor-pointer",
-                "transition-all duration-200 hover:scale-[1.02]",
                 "ring-1",
                 mediaGalleryItemClassName,
                 item.className
@@ -98530,7 +98449,7 @@ function LinkTreeBlock({
                     src: item.src,
                     alt: item.alt || "",
                     className: cn(
-                      "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105",
+                      "h-full w-full object-cover transition-transform duration-300",
                       mediaGalleryMediaClassName,
                       item.mediaClassName
                     ),
@@ -98541,7 +98460,7 @@ function LinkTreeBlock({
                   "div",
                   {
                     className: cn(
-                      "absolute inset-0 flex items-center justify-center bg-black/0 transition-colors duration-200 group-hover:bg-black/20",
+                      "absolute inset-0 flex items-center justify-center bg-black/0 transition-colors duration-200",
                       mediaGalleryOverlayClassName
                     ),
                     children: item.type === "video" && /* @__PURE__ */ jsxRuntime.jsx(
@@ -98607,7 +98526,6 @@ function LinkTreeBlock({
               "aria-label": ariaLabel,
               className: cn(
                 "flex h-12 w-12 items-center justify-center rounded-full p-2.5 transition-all duration-200",
-                "hover:scale-110 active:scale-95",
                 socialLinkClassName,
                 social.className
               ),
@@ -98702,7 +98620,7 @@ function LinkPageMinimalProfile({
   name,
   bio,
   avatar,
-  avatarUrl = blockBrandedIconsAndPlaceholders.avatar2,
+  avatarUrl,
   profileSlot,
   links,
   linksSlot,
@@ -98711,7 +98629,6 @@ function LinkPageMinimalProfile({
   footerAction,
   footerSlot,
   className,
-  containerClassName,
   contentClassName,
   headerClassName,
   avatarClassName,
@@ -98725,20 +98642,20 @@ function LinkPageMinimalProfile({
   socialLinkClassName,
   socialIconClassName,
   footerClassName,
-  background = "default",
-  spacing,
+  background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
   optixFlowConfig
 }) {
-  const resolvedBackground = background;
-  const resolvedAvatar = avatar || (avatarUrl ? {
-    src: avatarUrl,
-    alt: typeof name === "string" ? name : "Profile avatar"
-  } : void 0);
   const renderProfile = React26.useMemo(() => {
     if (profileSlot) return profileSlot;
+    const resolvedAvatar = avatar || (avatarUrl ? {
+      src: avatarUrl,
+      alt: typeof name === "string" ? name : "Profile avatar"
+    } : void 0);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -98752,7 +98669,6 @@ function LinkPageMinimalProfile({
             {
               className: cn(
                 "h-20 w-20 overflow-hidden rounded-full",
-                getNestedCardBg(resolvedBackground),
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -98767,32 +98683,24 @@ function LinkPageMinimalProfile({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-            name && (typeof name === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "h1",
-              {
-                className: cn(
-                  "text-xl font-semibold",
-                  nameClassName
-                ),
-                children: name
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: nameClassName, children: name })),
-            bio && (typeof bio === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                className: cn(
-                  "text-sm",
-                  getTextColor(resolvedBackground, "muted"),
-                  bioClassName
-                ),
-                children: bio
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: bioClassName, children: bio }))
+            name && (typeof name === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-xl font-semibold", nameClassName), children: name }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: nameClassName, children: name })),
+            bio && (typeof bio === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", bioClassName), children: bio }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: bioClassName, children: bio }))
           ] })
         ]
       }
     );
-  }, [profileSlot, resolvedAvatar, avatarClassName, optixFlowConfig, name, resolvedBackground, nameClassName, bio, bioClassName, headerClassName]);
+  }, [
+    avatar,
+    avatarUrl,
+    profileSlot,
+    avatarClassName,
+    optixFlowConfig,
+    name,
+    nameClassName,
+    bio,
+    bioClassName,
+    headerClassName
+  ]);
   const renderLinks = React26.useMemo(() => {
     if (linksSlot) return linksSlot;
     if (!links || links.length === 0) return null;
@@ -98818,10 +98726,9 @@ function LinkPageMinimalProfile({
           Pressable,
           {
             className: cn(
-              "flex w-full items-center gap-3 rounded-lg px-4 py-3 transition-colors",
-              getNestedCardBg(resolvedBackground),
-              getNestedCardTextColor(resolvedBackground),
-              "hover:opacity-80",
+              "flex w-full items-center gap-3 rounded-lg px-4 py-3",
+              "bg-card text-card-foreground border shadow-lg",
+              "transition-all duration-500 hover:opacity-80",
               linkClassName,
               linkItemClassName
             ),
@@ -98836,8 +98743,6 @@ function LinkPageMinimalProfile({
         {
           className: cn(
             "flex w-full items-center gap-3 rounded-lg px-4 py-3 transition-colors",
-            getNestedCardBg(resolvedBackground),
-            getNestedCardTextColor(resolvedBackground),
             "hover:opacity-80",
             linkClassName,
             linkItemClassName
@@ -98857,7 +98762,14 @@ function LinkPageMinimalProfile({
         link.id ?? index
       );
     }) });
-  }, [linksSlot, links, linksClassName, linkIconClassName, resolvedBackground, linkClassName, linkLabelClassName]);
+  }, [
+    linksSlot,
+    links,
+    linksClassName,
+    linkIconClassName,
+    linkClassName,
+    linkLabelClassName
+  ]);
   const renderSocialLinks = React26.useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
@@ -98886,7 +98798,6 @@ function LinkPageMinimalProfile({
               "aria-label": ariaLabel,
               className: cn(
                 "rounded-full p-2 transition-colors",
-                getTextColor(resolvedBackground, "muted"),
                 "hover:opacity-80",
                 socialLinkClassName,
                 social.className
@@ -98898,7 +98809,13 @@ function LinkPageMinimalProfile({
         })
       }
     );
-  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, resolvedBackground, socialLinkClassName]);
+  }, [
+    socialLinksSlot,
+    socialLinks,
+    socialLinksClassName,
+    socialIconClassName,
+    socialLinkClassName
+  ]);
   const renderFooter = React26.useMemo(() => {
     if (footerSlot) return footerSlot;
     if (!footerAction) return null;
@@ -98917,7 +98834,6 @@ function LinkPageMinimalProfile({
       {
         className: cn(
           "flex items-center justify-center gap-1.5 text-xs transition-opacity hover:opacity-80",
-          getTextColor(resolvedBackground, "subtle"),
           footerClassName,
           actionClassName
         ),
@@ -98929,11 +98845,11 @@ function LinkPageMinimalProfile({
         ] })
       }
     );
-  }, [footerSlot, footerAction, resolvedBackground, footerClassName]);
+  }, [footerSlot, footerAction, footerClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      background: resolvedBackground,
+      background,
       spacing,
       className,
       pattern,
@@ -98957,6 +98873,22 @@ function LinkPageMinimalProfile({
     }
   );
 }
+var DEFAULT_STYLE_RULES43 = {
+  formContainer: "w-full flex flex-col gap-3 justify-center items-center",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: ""
+};
+var DEFAULT_FORM_FIELDS47 = [
+  {
+    name: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "Enter your email",
+    required: true,
+    columnSpan: 12
+  }
+];
 function LinkPageNewsletterSocial({
   name,
   bio,
@@ -98965,13 +98897,11 @@ function LinkPageNewsletterSocial({
   profileSlot,
   newsletterHeading,
   newsletterDescription,
-  emailPlaceholder,
-  buttonText,
-  submitAction,
+  formEngineSetup,
+  buttonAction,
+  helperText,
   newsletterSlot,
   formSlot,
-  submittingLabel,
-  submittingIcon = /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/loader-2", size: 16, className: "animate-spin" }),
   links,
   linksSlot,
   linkChevronIcon,
@@ -98991,9 +98921,6 @@ function LinkPageNewsletterSocial({
   newsletterCardClassName,
   newsletterHeadingClassName,
   newsletterDescriptionClassName,
-  formClassName,
-  inputClassName,
-  submitButtonClassName,
   linksClassName,
   linkClassName,
   linkIconClassName,
@@ -99006,75 +98933,15 @@ function LinkPageNewsletterSocial({
   pattern,
   patternOpacity,
   patternClassName,
-  formConfig,
-  onSubmit,
-  onSuccess,
-  onError,
   optixFlowConfig
 }) {
-  const resolvedBackground = background;
-  const resolvedAvatar = avatar || (avatarUrl ? {
-    src: avatarUrl,
-    alt: typeof name === "string" ? name : "Profile avatar"
-  } : void 0);
-  const form = forms.useForm({
-    initialValues: {
-      email: ""
-    },
-    validationSchema: {
-      email: (value) => {
-        if (!value) return "Email is required";
-        if (!integration.isValidEmail(value)) return "Please enter a valid email address";
-        return void 0;
-      }
-    },
-    onSubmit: async (values, helpers) => {
-      const shouldAutoSubmit = Boolean(formConfig?.endpoint);
-      if (!shouldAutoSubmit && !onSubmit) {
-        return;
-      }
-      try {
-        let result;
-        if (shouldAutoSubmit) {
-          result = await integration.submitPageSpeedForm(values, formConfig);
-        }
-        if (onSubmit) {
-          await onSubmit(values.email);
-        }
-        if (shouldAutoSubmit || onSubmit) {
-          if (formConfig?.resetOnSuccess !== false) {
-            helpers.resetForm();
-          }
-          onSuccess?.(result);
-        }
-      } catch (error) {
-        if (error instanceof integration.PageSpeedFormSubmissionError && error.formErrors) {
-          helpers.setErrors(error.formErrors);
-        }
-        onError?.(error);
-        throw error;
-      }
-    }
-  });
-  const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
-  const resolvedSubmitAction = React26.useMemo(() => {
-    if (submitAction) {
-      return {
-        ...submitAction,
-        label: buttonText || submitAction?.label || "Submit",
-        variant: submitAction?.variant || "default",
-        size: submitAction?.size || "lg"
-      };
-    }
-    return {
-      label: buttonText || "Submit",
-      variant: "default",
-      size: "lg"
-    };
-  }, [submitAction, buttonText]);
   const resolvedChevronIcon = linkChevronIcon ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 });
   const renderProfile = React26.useMemo(() => {
     if (profileSlot) return profileSlot;
+    const resolvedAvatar = avatar || (avatarUrl ? {
+      src: avatarUrl,
+      alt: typeof name === "string" ? name : "Profile avatar"
+    } : void 0);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -99110,11 +98977,11 @@ function LinkPageNewsletterSocial({
     );
   }, [
     profileSlot,
-    resolvedAvatar,
+    avatar,
+    avatarUrl,
     avatarClassName,
     optixFlowConfig,
     name,
-    resolvedBackground,
     nameClassName,
     bio,
     bioClassName,
@@ -99165,63 +99032,43 @@ function LinkPageNewsletterSocial({
     socialLinks,
     socialLinksClassName,
     socialIconClassName,
-    resolvedBackground,
     socialLinkClassName
   ]);
-  const renderFormFields = React26.useMemo(() => {
+  const renderForm = React26.useMemo(() => {
     if (formSlot) return formSlot;
-    const {
-      label,
-      icon,
-      iconAfter,
-      children,
-      className: actionClassName,
-      ...pressableProps
-    } = resolvedSubmitAction;
+    if (!formEngineSetup) return null;
+    const defaultButtonAction = {
+      label: "Submit",
+      variant: "default"
+    };
+    const action = buttonAction || defaultButtonAction;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsx(
-        TextInput,
-        {
-          ...field,
-          type: "email",
-          placeholder: emailPlaceholder,
-          error: meta.touched && !!meta.error,
-          className: cn("w-full", inputClassName),
-          "aria-label": emailPlaceholder || "Email address"
-        }
-      ) }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        Pressable,
+        integration.FormEngine,
         {
-          componentType: "button",
-          type: "submit",
-          variant: resolvedSubmitAction.variant ?? "default",
-          size: resolvedSubmitAction.size ?? "lg",
-          className: cn("w-full", submitButtonClassName, actionClassName),
-          asButton: true,
-          disabled: form.isSubmitting,
-          ...pressableProps,
-          children: form.isSubmitting ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            submittingIcon,
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: submittingLabel })
-          ] }) : children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
+          formEngineSetup: {
+            ...formEngineSetup,
+            formLayoutSettings: {
+              ...formEngineSetup.formLayoutSettings,
+              formLayout: "button-group",
+              buttonGroupSetup: {
+                ...formEngineSetup.formLayoutSettings?.buttonGroupSetup,
+                size: "lg",
+                submitLabel: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  action.label,
+                  action.iconAfter
+                ] }),
+                submitVariant: action.variant || "default"
+              }
+            }
+          },
+          defaultFields: DEFAULT_FORM_FIELDS47,
+          defaultStyleRules: DEFAULT_STYLE_RULES43
         }
-      )
+      ),
+      helperText && (typeof helperText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm mt-2 text-center"), children: helperText }) : helperText)
     ] });
-  }, [
-    formSlot,
-    resolvedSubmitAction,
-    emailPlaceholder,
-    inputClassName,
-    submitButtonClassName,
-    form.isSubmitting,
-    submittingIcon,
-    submittingLabel
-  ]);
+  }, [formSlot, formEngineSetup, buttonAction, helperText]);
   const renderNewsletter = React26.useMemo(() => {
     if (newsletterSlot) return newsletterSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -99246,16 +99093,7 @@ function LinkPageNewsletterSocial({
             ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: newsletterHeadingClassName, children: newsletterHeading })),
             newsletterDescription && (typeof newsletterDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", newsletterDescriptionClassName), children: newsletterDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: newsletterDescriptionClassName, children: newsletterDescription }))
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            forms.Form,
-            {
-              form,
-              action: formConfig?.endpoint,
-              method: formMethod,
-              className: cn("space-y-3", formClassName),
-              children: renderFormFields
-            }
-          )
+          renderForm
         ]
       }
     );
@@ -99265,13 +99103,8 @@ function LinkPageNewsletterSocial({
     newsletterHeading,
     newsletterHeadingClassName,
     newsletterDescription,
-    resolvedBackground,
     newsletterDescriptionClassName,
-    form,
-    formConfig?.endpoint,
-    formMethod,
-    formClassName,
-    renderFormFields
+    renderForm
   ]);
   const renderLinks = React26.useMemo(() => {
     if (linksSlot) return linksSlot;
@@ -99344,7 +99177,6 @@ function LinkPageNewsletterSocial({
     links,
     linksClassName,
     linkIconClassName,
-    resolvedBackground,
     linkClassName,
     linkLabelClassName,
     linkChevronClassName,
@@ -99380,11 +99212,11 @@ function LinkPageNewsletterSocial({
         ] })
       }
     );
-  }, [footerSlot, footerAction, resolvedBackground, footerClassName]);
+  }, [footerSlot, footerAction, footerClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      background: resolvedBackground,
+      background,
       spacing,
       className,
       pattern,
@@ -99405,7 +99237,7 @@ function LinkPageGridCards({
   name,
   bio,
   avatar,
-  avatarUrl = blockBrandedIconsAndPlaceholders.avatar4,
+  avatarUrl,
   profileSlot,
   links,
   linksSlot,
@@ -99415,7 +99247,6 @@ function LinkPageGridCards({
   footerAction,
   footerSlot,
   className,
-  containerClassName,
   contentClassName,
   headerClassName,
   avatarClassName,
@@ -99431,20 +99262,20 @@ function LinkPageGridCards({
   cardLabelClassName,
   cardDescriptionClassName,
   footerClassName,
-  background = "gray",
-  spacing,
+  background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
   optixFlowConfig
 }) {
-  const resolvedBackground = background;
-  const resolvedAvatar = avatar || (avatarUrl ? {
-    src: avatarUrl,
-    alt: typeof name === "string" ? name : "Profile avatar"
-  } : void 0);
   const renderProfile = React26.useMemo(() => {
     if (profileSlot) return profileSlot;
+    const resolvedAvatar = avatar || (avatarUrl ? {
+      src: avatarUrl,
+      alt: typeof name === "string" ? name : "Profile avatar"
+    } : void 0);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -99457,7 +99288,7 @@ function LinkPageGridCards({
             "div",
             {
               className: cn(
-                "h-20 w-20 overflow-hidden rounded-2xl shadow-lg ring-2 ring-neutral-200",
+                "h-20 w-20 overflow-hidden rounded-2xl shadow-lg ring-2 ring-primary",
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -99472,32 +99303,24 @@ function LinkPageGridCards({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-            name && (typeof name === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "h1",
-              {
-                className: cn(
-                  "text-2xl font-bold",
-                  nameClassName
-                ),
-                children: name
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: nameClassName, children: name })),
-            bio && (typeof bio === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                className: cn(
-                  "text-sm",
-                  getTextColor(resolvedBackground, "muted"),
-                  bioClassName
-                ),
-                children: bio
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: bioClassName, children: bio }))
+            name && (typeof name === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-2xl font-bold", nameClassName), children: name }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: nameClassName, children: name })),
+            bio && (typeof bio === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", bioClassName), children: bio }) : bio)
           ] })
         ]
       }
     );
-  }, [profileSlot, resolvedAvatar, resolvedBackground, avatarClassName, optixFlowConfig, name, nameClassName, bio, bioClassName, headerClassName]);
+  }, [
+    profileSlot,
+    avatar,
+    avatarUrl,
+    avatarClassName,
+    optixFlowConfig,
+    name,
+    nameClassName,
+    bio,
+    bioClassName,
+    headerClassName
+  ]);
   const renderSocialLinks = React26.useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
@@ -99526,9 +99349,8 @@ function LinkPageGridCards({
               "aria-label": ariaLabel,
               className: cn(
                 "rounded-lg p-2 transition-all duration-200",
-                "hover:scale-110 active:scale-95",
-                "bg-card hover:opacity-80",
-                getTextColor(resolvedBackground, "muted"),
+                "bg-card text-card-foreground hover:opacity-80",
+                "size-12 flex items-center justify-center",
                 socialLinkClassName,
                 social.className
               ),
@@ -99539,7 +99361,13 @@ function LinkPageGridCards({
         })
       }
     );
-  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, resolvedBackground, socialLinkClassName]);
+  }, [
+    socialLinksSlot,
+    socialLinks,
+    socialLinksClassName,
+    socialIconClassName,
+    socialLinkClassName
+  ]);
   const renderLinks = React26.useMemo(() => {
     if (linksSlot) return linksSlot;
     if (!links || links.length === 0) return null;
@@ -99574,9 +99402,10 @@ function LinkPageGridCards({
               Pressable,
               {
                 className: cn(
-                  "group flex flex-col items-center gap-2 rounded-xl p-4 transition-all duration-200",
-                  "hover:scale-[1.03] active:scale-[0.97]",
-                  "border border-border bg-card shadow-sm hover:shadow-md",
+                  "group flex flex-col items-center gap-2 rounded-xl p-4",
+                  "transition-all duration-200 shadow-md",
+                  "border border-border hover:shadow-xl",
+                  "text-card-foreground bg-card",
                   cardClassName,
                   linkClassName
                 ),
@@ -99590,8 +99419,9 @@ function LinkPageGridCards({
             Pressable,
             {
               className: cn(
-                "group flex flex-col items-center gap-2 rounded-xl p-4 transition-all duration-200",
+                "group flex flex-col items-center gap-2 rounded-xl",
                 "hover:scale-[1.03] active:scale-[0.97]",
+                "transition-all duration-200 p-4",
                 "border border-border bg-card shadow-sm hover:shadow-md",
                 cardClassName,
                 linkClassName
@@ -99602,9 +99432,8 @@ function LinkPageGridCards({
                   "div",
                   {
                     className: cn(
-                      "flex h-12 w-12 items-center justify-center rounded-xl transition-colors",
-                      getNestedCardBg(resolvedBackground),
-                      getNestedCardTextColor(resolvedBackground),
+                      "flex size-12 items-center justify-center",
+                      "rounded-xl transition-colors",
                       "group-hover:opacity-80",
                       cardIconWrapperClassName
                     ),
@@ -99621,18 +99450,14 @@ function LinkPageGridCards({
                       ),
                       children: label
                     }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardLabelClassName, children: label })),
+                  ) : label),
                   description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                     "span",
                     {
-                      className: cn(
-                        "block text-xs",
-                        getTextColor(resolvedBackground, "muted"),
-                        cardDescriptionClassName
-                      ),
+                      className: cn("block text-sm", cardDescriptionClassName),
                       children: description
                     }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardDescriptionClassName, children: description }))
+                  ) : description)
                 ] })
               ]
             },
@@ -99641,7 +99466,17 @@ function LinkPageGridCards({
         })
       }
     );
-  }, [linksSlot, links, columns, gridClassName, cardIconClassName, resolvedBackground, cardClassName, cardIconWrapperClassName, cardLabelClassName, cardDescriptionClassName]);
+  }, [
+    linksSlot,
+    links,
+    columns,
+    gridClassName,
+    cardIconClassName,
+    cardClassName,
+    cardIconWrapperClassName,
+    cardLabelClassName,
+    cardDescriptionClassName
+  ]);
   const renderFooter = React26.useMemo(() => {
     if (footerSlot) return footerSlot;
     if (!footerAction) return null;
@@ -99659,9 +99494,9 @@ function LinkPageGridCards({
       Pressable,
       {
         className: cn(
-          "flex items-center justify-center gap-1.5 text-xs transition-opacity hover:opacity-80",
-          getTextColor(resolvedBackground, "muted"),
-          "opacity-50",
+          "flex items-center justify-center",
+          "text-xs transition-opacity hover:opacity-80",
+          "opacity-50 gap-1.5",
           footerClassName,
           actionClassName
         ),
@@ -99673,11 +99508,11 @@ function LinkPageGridCards({
         ] })
       }
     );
-  }, [footerSlot, footerAction, resolvedBackground, footerClassName]);
+  }, [footerSlot, footerAction, footerClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      background: resolvedBackground,
+      background,
       spacing,
       className,
       pattern,
@@ -99705,7 +99540,7 @@ function LinkPageBentoLayout({
   name,
   bio,
   avatar,
-  avatarUrl = blockBrandedIconsAndPlaceholders.avatar5,
+  avatarUrl,
   profileSlot,
   links,
   linksSlot,
@@ -99716,7 +99551,6 @@ function LinkPageBentoLayout({
   footerAction,
   footerSlot,
   className,
-  containerClassName,
   contentClassName,
   headerClassName,
   avatarClassName,
@@ -99739,14 +99573,14 @@ function LinkPageBentoLayout({
   regularLinkIconClassName,
   regularLinkLabelClassName,
   footerClassName,
-  background = "white",
-  spacing,
+  background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
   optixFlowConfig
 }) {
-  const resolvedBackground = background;
   const resolvedAvatar = avatar || (avatarUrl ? {
     src: avatarUrl,
     alt: typeof name === "string" ? name : "Profile avatar"
@@ -99775,7 +99609,6 @@ function LinkPageBentoLayout({
           className: cn(
             "rounded-full p-2 transition-all duration-200",
             "hover:scale-110 active:scale-95",
-            getTextColor(resolvedBackground, "muted"),
             "hover:opacity-80",
             socialLinkClassName,
             social.className
@@ -99790,7 +99623,6 @@ function LinkPageBentoLayout({
     socialLinks,
     socialLinksClassName,
     socialIconClassName,
-    resolvedBackground,
     socialLinkClassName
   ]);
   const renderFeaturedLinks = React26.useMemo(() => {
@@ -99823,9 +99655,7 @@ function LinkPageBentoLayout({
           Pressable,
           {
             className: cn(
-              "group relative aspect-4/3 overflow-hidden rounded-2xl transition-all duration-200",
-              "hover:scale-[1.02] active:scale-[0.98]",
-              "border border-border bg-muted",
+              "group relative aspect-4/3 overflow-hidden rounded-xl",
               featuredLinkClassName,
               linkClassName
             ),
@@ -99839,9 +99669,7 @@ function LinkPageBentoLayout({
         Pressable,
         {
           className: cn(
-            "group relative aspect-4/3 overflow-hidden rounded-2xl transition-all duration-200",
-            "hover:scale-[1.02] active:scale-[0.98]",
-            "border border-border bg-muted",
+            "group relative aspect-4/3 overflow-hidden rounded-xl",
             featuredLinkClassName,
             linkClassName
           ),
@@ -99853,7 +99681,7 @@ function LinkPageBentoLayout({
                 src: imageSource,
                 alt: imageAlt,
                 className: cn(
-                  "absolute inset-0 h-full w-full object-cover transition-transform duration-300 group-hover:scale-105",
+                  "absolute inset-0 h-full w-full object-cover",
                   featuredLinkImageClassName
                 ),
                 optixFlowConfig
@@ -99864,7 +99692,7 @@ function LinkPageBentoLayout({
               {
                 className: cn(
                   "absolute inset-0 transition-opacity",
-                  imageSource ? "bg-linear-to-t from-black/80 via-black/40 to-transparent" : "bg-linear-to-t from-neutral-200/50 to-transparent",
+                  imageSource ? "bg-linear-to-t from-black/80 via-black/40 to-transparent text-white" : "bg-primary text-primary-foreground",
                   featuredLinkOverlayClassName
                 )
               }
@@ -99877,7 +99705,6 @@ function LinkPageBentoLayout({
                   {
                     className: cn(
                       "text-sm font-semibold",
-                      imageSource && "text-background",
                       featuredLinkLabelClassName
                     ),
                     children: label
@@ -99889,12 +99716,11 @@ function LinkPageBentoLayout({
                 {
                   className: cn(
                     "mt-0.5 text-xs",
-                    imageSource ? "text-background/70" : getTextColor(resolvedBackground, "muted"),
                     featuredLinkDescriptionClassName
                   ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: featuredLinkDescriptionClassName, children: description }))
+              ) : description)
             ] })
           ]
         },
@@ -99904,7 +99730,6 @@ function LinkPageBentoLayout({
   }, [
     featuredLinksSlot,
     featuredLinks,
-    resolvedBackground,
     featuredLinkClassName,
     featuredLinkImageClassName,
     optixFlowConfig,
@@ -99938,9 +99763,7 @@ function LinkPageBentoLayout({
           Pressable,
           {
             className: cn(
-              "group flex items-center gap-3 rounded-xl p-3 transition-all duration-200",
-              "hover:scale-[1.02] active:scale-[0.98]",
-              "border border-border bg-muted/50 hover:opacity-80",
+              "group flex items-center gap-3 rounded-xl p-3",
               regularLinkClassName,
               linkClassName
             ),
@@ -99954,9 +99777,8 @@ function LinkPageBentoLayout({
         Pressable,
         {
           className: cn(
-            "group flex items-center gap-3 rounded-xl p-3 transition-all duration-200",
-            "hover:scale-[1.02] active:scale-[0.98]",
-            "border border-border bg-muted/50 hover:opacity-80",
+            "group flex items-center gap-3 rounded-xl p-3",
+            "bg-card text-card-foreground",
             regularLinkClassName,
             linkClassName
           ),
@@ -99967,8 +99789,6 @@ function LinkPageBentoLayout({
               {
                 className: cn(
                   "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg",
-                  getNestedCardBg(resolvedBackground, "card"),
-                  getNestedCardTextColor(resolvedBackground),
                   regularLinkIconWrapperClassName
                 ),
                 children: iconElement
@@ -99992,7 +99812,6 @@ function LinkPageBentoLayout({
   }, [
     regularLinksSlot,
     regularLinks,
-    resolvedBackground,
     regularLinkClassName,
     regularLinkIconWrapperClassName,
     regularLinkIconClassName,
@@ -100004,8 +99823,8 @@ function LinkPageBentoLayout({
     const hasFeatured = Boolean(featuredLinksSlot) || featuredLinks.length > 0;
     const hasRegular = Boolean(regularLinksSlot) || regularLinks.length > 0;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-3", linksClassName), children: [
-      hasFeatured && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-2 gap-3", featuredLinksClassName), children: renderFeaturedLinks }),
-      hasRegular && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-2 gap-3", regularLinksClassName), children: renderRegularLinks })
+      hasFeatured && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-1 gap-3", featuredLinksClassName), children: renderFeaturedLinks }),
+      hasRegular && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-1 gap-3", regularLinksClassName), children: renderRegularLinks })
     ] });
   }, [
     linksSlot,
@@ -100049,18 +99868,8 @@ function LinkPageBentoLayout({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-            name && (typeof name === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-xl font-bold", nameClassName), children: name }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: nameClassName, children: name })),
-            bio && (typeof bio === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                className: cn(
-                  "max-w-xs text-sm",
-                  getTextColor(resolvedBackground, "muted"),
-                  bioClassName
-                ),
-                children: bio
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: bioClassName, children: bio }))
+            name && (typeof name === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-xl font-bold", nameClassName), children: name }) : name),
+            bio && (typeof bio === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-xs text-sm", bioClassName), children: bio }) : bio)
           ] }),
           renderSocialLinks
         ]
@@ -100069,7 +99878,6 @@ function LinkPageBentoLayout({
   }, [
     profileSlot,
     resolvedAvatar,
-    resolvedBackground,
     avatarClassName,
     optixFlowConfig,
     name,
@@ -100097,7 +99905,6 @@ function LinkPageBentoLayout({
       {
         className: cn(
           "flex items-center justify-center gap-1.5 text-xs transition-opacity hover:opacity-80",
-          getTextColor(resolvedBackground, "muted"),
           "opacity-50",
           footerClassName,
           actionClassName
@@ -100110,30 +99917,22 @@ function LinkPageBentoLayout({
         ] })
       }
     );
-  }, [footerSlot, footerAction, resolvedBackground, footerClassName]);
+  }, [footerSlot, footerAction, footerClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      background: resolvedBackground,
+      background,
       spacing,
       className,
       pattern,
       patternOpacity,
       patternClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: cn(
-            "flex min-h-screen w-full items-start justify-center py-12",
-            containerClassName
-          ),
-          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full max-w-lg space-y-6", contentClassName), children: [
-            renderProfile,
-            renderLinks,
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4", children: renderFooter })
-          ] })
-        }
-      )
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full space-y-6", contentClassName), children: [
+        renderProfile,
+        renderLinks,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4", children: renderFooter })
+      ] }) })
     }
   );
 }
@@ -116386,7 +116185,7 @@ var BLOCK_REGISTRY = {
   "link-page-newsletter-social": {
     id: "link-page-newsletter-social",
     name: "Link Page Newsletter Social",
-    description: "A link page with integrated newsletter signup form. Features profile section with avatar, newsletter signup form with email validation and @page-speed/forms integration, social media links, and additional links section. Supports universal REST API integration, custom submission handlers, and DashTrack Rails backend. Ideal for content creators, bloggers, and marketers who want to grow their email list.",
+    description: "A link page with integrated newsletter signup form powered by FormEngine. Features profile section with avatar, newsletter signup form with email validation via @page-speed/forms/integration, social media links, and additional links section. Supports universal REST API integration via formEngineSetup. Ideal for content creators, bloggers, and marketers who want to grow their email list.",
     semanticTags: [
       "link-page",
       "newsletter",
@@ -116407,8 +116206,10 @@ var BLOCK_REGISTRY = {
   name="Content Creator"
   bio="Weekly tips on growing your audience"
   newsletterHeading="Join my newsletter"
-  formConfig={{ endpoint: "/api/subscribe" }}
-  onSuccess={() => console.log("Subscribed!")}
+  formEngineSetup={{
+    formConfig: { endpoint: "/api/subscribe", format: "json" },
+  }}
+  buttonAction={{ label: "Subscribe", variant: "default" }}
   links={[
     { id: "1", label: "My Website", href: "https://example.com", icon: "lucide/globe" }
   ]}