@opensite/ui 2.3.2 → 2.3.3

package/dist/registry.cjs

@@ -546,13 +546,46 @@ var Section = React26__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+function TextInner({ as, className, children, ...props }, ref) {
+  const Component = as || "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cn(className), ...props, children });
+}
+var Text = React26__namespace.forwardRef(TextInner);
+Text.displayName = "Text";
+function isContentTextItem(item) {
+  return item !== null && typeof item === "object" && !React26__namespace.isValidElement(item) && "_type" in item && item._type === "text";
+}
+var ContentGroup = React26__namespace.forwardRef(
+  ({ items, className, children, ...props }, ref) => {
+    const hasContent = items && items.length > 0;
+    if (!hasContent) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn(className), ...props, children: [
+      items.map((item, idx) => {
+        if (isContentTextItem(item)) {
+          const { _type, ...textProps } = item;
+          return /* @__PURE__ */ jsxRuntime.jsx(Text, { ...textProps }, idx);
+        }
+        const reactNode = item;
+        if (React26__namespace.isValidElement(reactNode)) {
+          return React26__namespace.cloneElement(reactNode, { key: reactNode.key ?? idx });
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(React26__namespace.Fragment, { children: reactNode }, idx);
+      }),
+      children
+    ] });
+  }
+);
+ContentGroup.displayName = "ContentGroup";
 function AlternatingBlocks({
   sections,
   sectionsSlot,
   title,
   subtitle,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "lg",
   className,
   contentClassName,
   sectionsClassName,
@@ -568,9 +601,21 @@ function AlternatingBlocks({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-12", sectionsClassName), children: sections.map((section, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn("grid items-center gap-8 md:grid-cols-2 md:gap-12", sectionItemClassName),
+        className: cn(
+          "grid items-center gap-8 md:grid-cols-2 md:gap-12",
+          sectionItemClassName
+        ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(section.mediaLeft ? "md:order-2" : "", sectionContentClassName), children: section.content }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                section.mediaLeft ? "md:order-2" : "",
+                sectionContentClassName
+              ),
+              children: section.content
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -586,22 +631,55 @@ function AlternatingBlocks({
       },
       index
     )) });
-  }, [sectionsSlot, sections, sectionsClassName, sectionItemClassName, sectionContentClassName, sectionMediaClassName]);
+  }, [
+    sectionsSlot,
+    sections,
+    sectionsClassName,
+    sectionItemClassName,
+    sectionContentClassName,
+    sectionMediaClassName
+  ]);
+  const headerItems = React26.useMemo(() => {
+    const items = [];
+    if (subtitle) {
+      items.push(
+        typeof subtitle === "string" ? {
+          _type: "text",
+          as: "p",
+          className: "mb-2 text-sm font-semibold uppercase tracking-wider",
+          children: subtitle
+        } : subtitle
+      );
+    }
+    if (title) {
+      items.push(
+        typeof title === "string" ? {
+          _type: "text",
+          as: "h2",
+          className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl",
+          children: title
+        } : title
+      );
+    }
+    return items;
+  }, [title, subtitle]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
-      title: typeof title === "string" ? title : void 0,
-      subtitle: typeof subtitle === "string" ? subtitle : void 0,
       background,
       spacing,
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: [
-        title && typeof title !== "string" || subtitle && typeof subtitle !== "string" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-          subtitle && typeof subtitle !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2 text-sm font-semibold uppercase tracking-wider", getAccentColor(background)), children: subtitle }),
-          title && typeof title !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-        ] }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ContentGroup,
+          {
+            className: "mb-12 text-center md:mb-16",
+            items: headerItems
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto w-full max-w-[900px]", contentClassName), children: sectionsContent })
       ]
     }
@@ -619,7 +697,6 @@ function AboutMissionFeatures({
   features,
   featuresSlot,
   className,
-  containerClassName,
   titleClassName,
   descriptionClassName,
   missionLabelClassName,
@@ -631,7 +708,8 @@ function AboutMissionFeatures({
   featuresClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -662,7 +740,8 @@ function AboutMissionFeatures({
       pattern,
       patternOpacity,
       className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8 lg:gap-16", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 lg:gap-8", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h1",
@@ -767,7 +846,6 @@ function AboutMissionFeatures({
 }
 function AboutStatsShowcase({
   className,
-  containerClassName,
   title,
   titleClassName,
   description,
@@ -792,7 +870,8 @@ function AboutStatsShowcase({
   benefitsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity
 }) {
@@ -830,10 +909,7 @@ function AboutStatsShowcase({
   const logosContent = React26.useMemo(() => {
     if (logosSlot) return logosSlot;
     if (!logos || logos.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-      "py-24",
-      getNestedCardBg(background, "subtle")
-    ), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col items-center gap-11", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("py-24", getNestedCardBg(background, "subtle")), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col items-center gap-11", children: [
       logosTitle && (typeof logosTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
         "p",
         {
@@ -902,15 +978,21 @@ function AboutStatsShowcase({
                 optixFlowConfig
               }
             ),
-            benefit.stat && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-              "flex flex-col justify-center rounded-xl p-8",
-              getNestedCardBg(background),
-              getNestedCardTextColor(background)
-            ), children: [
-              benefit.stat.value && (typeof benefit.stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-4xl font-medium", children: benefit.stat.value }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: benefit.stat.value })),
-              benefit.stat.label && (typeof benefit.stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 font-semibold", children: benefit.stat.label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: benefit.stat.label })),
-              benefit.stat.description && (typeof benefit.stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: benefit.stat.description }) : benefit.stat.description)
-            ] }),
+            benefit.stat && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col justify-center rounded-xl p-8",
+                  getNestedCardBg(background),
+                  getNestedCardTextColor(background)
+                ),
+                children: [
+                  benefit.stat.value && (typeof benefit.stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-4xl font-medium", children: benefit.stat.value }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: benefit.stat.value })),
+                  benefit.stat.label && (typeof benefit.stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 font-semibold", children: benefit.stat.label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: benefit.stat.label })),
+                  benefit.stat.description && (typeof benefit.stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: benefit.stat.description }) : benefit.stat.description)
+                ]
+              }
+            ),
             benefit.testimonial && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl bg-background p-4", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 flex items-center gap-2", children: [
                 benefit.testimonial.logo && /* @__PURE__ */ jsxRuntime.jsx(
@@ -930,7 +1012,16 @@ function AboutStatsShowcase({
                   benefit.testimonial.author,
                   ","
                 ] }) : benefit.testimonial.author),
-                benefit.testimonial.role && (typeof benefit.testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm", getTextColor(background, "muted")), children: benefit.testimonial.role }) : benefit.testimonial.role)
+                benefit.testimonial.role && (typeof benefit.testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "text-sm",
+                      getTextColor(background, "muted")
+                    ),
+                    children: benefit.testimonial.role
+                  }
+                ) : benefit.testimonial.role)
               ] })
             ] })
           ] }, idx))
@@ -1445,7 +1536,7 @@ function AboutCompanyProfile({
   optixFlowConfig,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-12 md:py-32",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -1639,7 +1730,6 @@ function AboutCompanyProfile({
 }
 function AboutVisionGallery({
   className,
-  containerClassName,
   title,
   titleClassName,
   subtitle,
@@ -1664,7 +1754,8 @@ function AboutVisionGallery({
   ctaClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -2376,7 +2467,10 @@ function AboutSplitHero({
       case "dark":
         return "bg-foreground text-background";
       case "gray":
-        return cn(getNestedCardBg(background), getNestedCardTextColor(background));
+        return cn(
+          getNestedCardBg(background),
+          getNestedCardTextColor(background)
+        );
       case "white":
         return "bg-background";
       default:
@@ -2395,52 +2489,63 @@ function AboutSplitHero({
       ),
       children: [
         pattern && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(PatternBackground, { pattern, opacity: patternOpacity }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 w-full px-8 py-16 sm:px-12 sm:py-20 lg:px-16 lg:py-24 xl:px-24", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-xl space-y-8", children: [
-          (brandText || brandHighlight) && /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: cn(
-                "text-xl font-semibold uppercase tracking-wider sm:text-2xl",
-                brandTextClassName
-              ),
-              children: [
-                brandText,
-                brandText && brandHighlight && " ",
-                brandHighlight && /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    className: cn(
-                      "bg-linear-to-r from-primary to-primary/60 bg-clip-text text-transparent",
-                      brandHighlightClassName
-                    ),
-                    children: brandHighlight
-                  }
-                )
-              ]
-            }
-          ),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "h1",
-            {
-              className: cn(
-                "text-3xl font-bold leading-tight tracking-tight sm:text-4xl lg:text-5xl xl:text-6xl",
-                headingClassName
-              ),
-              children: heading
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
-            {
-              className: cn(
-                "text-base leading-relaxed opacity-90 sm:text-lg",
-                descriptionClassName
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "relative z-10 w-full",
+              "px-8 sm:px-12 lg:px-16 xl:px-24",
+              directionConfig.mobile === "mediaTop" ? "pt-16" : "pt-32",
+              "pb-16 md:pb-24 md:pt-24"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-xl space-y-8", children: [
+              (brandText || brandHighlight) && /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: cn(
+                    "text-xl font-semibold uppercase tracking-wider sm:text-2xl",
+                    brandTextClassName
+                  ),
+                  children: [
+                    brandText,
+                    brandText && brandHighlight && " ",
+                    brandHighlight && /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "bg-linear-to-r from-primary to-primary/60 bg-clip-text text-transparent",
+                          brandHighlightClassName
+                        ),
+                        children: brandHighlight
+                      }
+                    )
+                  ]
+                }
               ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          ctaContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4", children: ctaContent })
-        ] }) })
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-3xl font-bold leading-tight tracking-tight sm:text-4xl lg:text-5xl xl:text-6xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-base leading-relaxed opacity-90 sm:text-lg",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              ctaContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4", children: ctaContent })
+            ] })
+          }
+        )
       ]
     }
   );
@@ -2479,9 +2584,9 @@ function AboutMissionPrinciples({
   visionActionSlot,
   visionClassName,
   className,
-  containerClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -2523,9 +2628,22 @@ function AboutMissionPrinciples({
         children: principles.map((principle, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: cn("relative rounded-lg border p-6 transition-colors", `hover:${getNestedCardBg(background, "muted")}`),
+            className: cn(
+              "relative rounded-lg border p-6 transition-colors",
+              `hover:${getNestedCardBg(background, "muted")}`
+            ),
             children: [
-              principle.number && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute right-4 top-4 text-3xl font-bold", getAccentColor(background), "opacity-20"), children: principle.number }),
+              principle.number && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "absolute right-4 top-4 text-3xl font-bold",
+                    getAccentColor(background),
+                    "opacity-20"
+                  ),
+                  children: principle.number
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
                 principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold", children: principle.title }) : principle.title),
                 principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: principle.description }) : principle.description)
@@ -2898,7 +3016,6 @@ function CommunityInitiatives({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -2910,7 +3027,8 @@ function CommunityInitiatives({
   actionsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -2999,20 +3117,47 @@ function CommunityInitiatives({
                           ),
                           children: [
                             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-md p-2", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsxRuntime.jsx(
-                                DynamicIcon,
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "div",
                                 {
-                                  name: initiative.icon,
-                                  size: 24,
-                                  className: cn(getAccentColor(background))
+                                  className: cn(
+                                    "rounded-md p-2",
+                                    getNestedCardBg(background, "muted")
+                                  ),
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                                    DynamicIcon,
+                                    {
+                                      name: initiative.icon,
+                                      size: 24,
+                                      className: cn(getAccentColor(background))
+                                    }
+                                  )
                                 }
-                              ) }),
+                              ),
                               /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-bold", children: initiative.title })
                             ] }),
                             /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(getTextColor(background, "muted")), children: initiative.description }),
                             initiative.metrics && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-4 pt-2", children: initiative.metrics.map((metric, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-2xl font-bold", getAccentColor(background)), children: metric.value }),
-                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-1 text-xs", getTextColor(background, "muted")), children: metric.label })
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "div",
+                                {
+                                  className: cn(
+                                    "text-2xl font-bold",
+                                    getAccentColor(background)
+                                  ),
+                                  children: metric.value
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "div",
+                                {
+                                  className: cn(
+                                    "mt-1 text-xs",
+                                    getTextColor(background, "muted")
+                                  ),
+                                  children: metric.label
+                                }
+                              )
                             ] }, i)) })
                           ]
                         }
@@ -3041,25 +3186,35 @@ function CommunityInitiatives({
                             "flex h-full items-center justify-center md:col-span-5",
                             isEven ? "md:order-2" : "md:order-1"
                           ),
-                          children: /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn(
-                            "flex h-full min-h-[280px] w-full items-center justify-center",
-                            getNestedCardBg(background, "subtle")
-                          ), children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-6 text-center", children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              DynamicIcon,
-                              {
-                                name: initiative.icon,
-                                size: 64,
-                                className: cn("mx-auto mb-4", getTextColor(background, "muted"), "opacity-50")
-                              }
-                            ),
-                            /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "secondary", className: "mx-auto", children: [
-                              "Learn more about our",
-                              " ",
-                              initiative.title.toLowerCase(),
-                              " initiative"
-                            ] })
-                          ] }) })
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            Card,
+                            {
+                              className: cn(
+                                "flex h-full min-h-[280px] w-full items-center justify-center",
+                                getNestedCardBg(background, "subtle")
+                              ),
+                              children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-6 text-center", children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(
+                                  DynamicIcon,
+                                  {
+                                    name: initiative.icon,
+                                    size: 64,
+                                    className: cn(
+                                      "mx-auto mb-4",
+                                      getTextColor(background, "muted"),
+                                      "opacity-50"
+                                    )
+                                  }
+                                ),
+                                /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "secondary", className: "mx-auto", children: [
+                                  "Learn more about our",
+                                  " ",
+                                  initiative.title.toLowerCase(),
+                                  " initiative"
+                                ] })
+                              ] })
+                            }
+                          )
                         }
                       )
                     ]
@@ -3090,7 +3245,7 @@ function CommunityInitiatives({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3101,18 +3256,7 @@ function CommunityInitiatives({
               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",
                 {
@@ -3122,18 +3266,23 @@ function CommunityInitiatives({
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(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(descriptionClassName), children: description }) : description)
             ]
           }
         ),
         categoriesContent,
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-20 text-center", ctaClassName), children: [
-          ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-            "mb-8 inline-flex items-center justify-center rounded-full p-1",
-            getNestedCardBg(background)
-          ), children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText }) }),
-          ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", ctaHeadingClassName), children: ctaHeading })),
+          ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "mb-8 inline-flex items-center justify-center rounded-full p-1"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
+            }
+          ),
+          ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
           ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "p",
             {
@@ -3144,51 +3293,13 @@ function CommunityInitiatives({
               ),
               children: ctaDescription
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName),
-              children: ctaDescription
-            }
-          )),
+          ) : ctaDescription),
           actionsContent
         ] })
       ]
     }
   );
 }
-function TextInner({ as, className, children, ...props }, ref) {
-  const Component = as || "span";
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cn(className), ...props, children });
-}
-var Text = React26__namespace.forwardRef(TextInner);
-Text.displayName = "Text";
-function isContentTextItem(item) {
-  return item !== null && typeof item === "object" && !React26__namespace.isValidElement(item) && "_type" in item && item._type === "text";
-}
-var ContentGroup = React26__namespace.forwardRef(
-  ({ items, className, children, ...props }, ref) => {
-    const hasContent = items && items.length > 0;
-    if (!hasContent) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn(className), ...props, children: [
-      items.map((item, idx) => {
-        if (isContentTextItem(item)) {
-          const { _type, ...textProps } = item;
-          return /* @__PURE__ */ jsxRuntime.jsx(Text, { ...textProps }, idx);
-        }
-        const reactNode = item;
-        if (React26__namespace.isValidElement(reactNode)) {
-          return React26__namespace.cloneElement(reactNode, { key: reactNode.key ?? idx });
-        }
-        return /* @__PURE__ */ jsxRuntime.jsx(React26__namespace.Fragment, { children: reactNode }, idx);
-      }),
-      children
-    ] });
-  }
-);
-ContentGroup.displayName = "ContentGroup";
 function AboutCultureTabs({
   badgeText,
   heading,
@@ -7764,7 +7875,6 @@ function AboutStoryGallery({
 }
 function AboutStreamlineTeam({
   className,
-  containerClassName,
   title,
   titleClassName,
   description,
@@ -7786,7 +7896,8 @@ function AboutStreamlineTeam({
   teamSectionClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -7806,7 +7917,13 @@ function AboutStreamlineTeam({
       ),
       /* @__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)
+        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]);
@@ -7954,7 +8071,7 @@ function AboutDeveloperProfile({
   actionsClassName,
   optixFlowConfig,
   background,
-  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
+  spacing = "xl",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
   patternOpacity
@@ -8046,7 +8163,6 @@ function AboutDeveloperProfile({
 var ALL_TAB_VALUE = "__all__";
 function AboutStartupTeam({
   className,
-  containerClassName,
   title,
   titleClassName,
   description,
@@ -8061,7 +8177,8 @@ function AboutStartupTeam({
   teamMembersClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   defaultActiveTab,
@@ -8113,10 +8230,7 @@ function AboutStartupTeam({
         onClick: () => handleTabChange(link.value),
         className: cn(
           "block w-full text-left rounded-lg px-4 py-2 text-sm font-medium transition-colors",
-          activeTab === link.value ? "bg-primary text-primary-foreground" : cn(
-            getTextColor(background, "muted"),
-            "hover:bg-muted"
-          )
+          activeTab === link.value ? "bg-primary text-primary-foreground" : cn(getTextColor(background, "muted"), "hover:bg-muted")
         ),
         children: link.label
       },
@@ -8149,18 +8263,24 @@ function AboutStartupTeam({
               className: "mx-auto h-24 w-24 rounded-full object-cover",
               optixFlowConfig
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-            "mx-auto flex h-24 w-24 items-center justify-center rounded-full",
-            getNestedCardBg(background),
-            getNestedCardTextColor(background)
-          ), children: /* @__PURE__ */ jsxRuntime.jsx(
-            DynamicIcon,
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
-              name: "lucide/user",
-              size: 40,
-              className: cn(getTextColor(background, "muted"))
+              className: cn(
+                "mx-auto flex h-24 w-24 items-center justify-center rounded-full",
+                getNestedCardBg(background),
+                getNestedCardTextColor(background)
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                DynamicIcon,
+                {
+                  name: "lucide/user",
+                  size: 40,
+                  className: cn(getTextColor(background, "muted"))
+                }
+              )
             }
-          ) }),
+          ),
           member.name && (typeof member.name === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-4 font-semibold", children: member.name }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: member.name })),
           member.role && (typeof member.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: member.role }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children: member.role })),
           member.socialLinks && member.socialLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex justify-center gap-3", children: member.socialLinks.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -8214,8 +8334,9 @@ function AboutStartupTeam({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-12 lg:grid-cols-4", children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-12 lg:grid-cols-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "aside",
           {
@@ -8284,7 +8405,6 @@ function AboutMinimalStory({
   authorSlot,
   featuredImage,
   className,
-  containerClassName,
   contentClassName,
   titleClassName,
   bodyClassName,
@@ -8292,7 +8412,8 @@ function AboutMinimalStory({
   imageClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -8308,7 +8429,16 @@ function AboutMinimalStory({
           className: "h-16 w-16 rounded-full object-cover",
           optixFlowConfig
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-16 w-16 items-center justify-center rounded-full text-2xl font-bold text-primary-foreground", getAccentColor(background)), children: author.name.charAt(0) }),
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "flex h-16 w-16 items-center justify-center rounded-full text-2xl font-bold text-primary-foreground",
+            getAccentColor(background)
+          ),
+          children: author.name.charAt(0)
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: author.name }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: author.role })
@@ -8322,7 +8452,7 @@ function AboutMinimalStory({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl", contentClassName), children: [
         (authorSlot || author) && authorContent,
@@ -8371,7 +8501,6 @@ function AboutStoryHero({
   teamInfo,
   teamInfoSlot,
   className,
-  containerClassName,
   contentClassName,
   titleClassName,
   subtitleClassName,
@@ -8380,7 +8509,8 @@ function AboutStoryHero({
   imageClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -8481,36 +8611,61 @@ function AboutStatsSidebar({
   features,
   featuresSlot,
   className,
-  containerClassName,
   sidebarClassName,
   titleClassName,
   descriptionClassName,
   statsClassName,
   featuresClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity
 }) {
   const statsContent = React26.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 sm:grid-cols-2", statsClassName), children: stats.map((stat, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-      "rounded-xl border p-6",
-      getNestedCardBg(background, "card"),
-      getNestedCardTextColor(background)
-    ), children: [
-      stat.icon,
-      typeof stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-4xl font-bold", children: stat.value }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: stat.value }),
-      typeof stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 font-semibold", children: stat.label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: stat.label }),
-      stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2 text-sm", getTextColor(background, "muted")), children: stat.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: stat.description }))
-    ] }, idx)) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 sm:grid-cols-2", statsClassName), children: stats.map((stat, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "rounded-xl border p-6",
+          getNestedCardBg(background, "card"),
+          getNestedCardTextColor(background)
+        ),
+        children: [
+          stat.icon,
+          typeof stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-4xl font-bold", children: stat.value }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: stat.value }),
+          typeof stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 font-semibold", children: stat.label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: stat.label }),
+          stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mt-2 text-sm",
+                getTextColor(background, "muted")
+              ),
+              children: stat.description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: stat.description }))
+        ]
+      },
+      idx
+    )) });
   }, [statsSlot, stats, statsClassName]);
   const featuresContent = React26.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-12 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.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: getTextColor(background, "muted"), children: feature.description }) : feature.description)
@@ -8527,10 +8682,35 @@ function AboutStatsSidebar({
       className: cn(className),
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-12 lg:grid-cols-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("lg:sticky lg:top-24 lg:self-start", sidebarClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn("lg:sticky lg:top-24 lg:self-start", sidebarClassName),
+            children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-bold tracking-tight md:text-4xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-4 text-lg",
+                    getTextColor(background, "muted"),
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:col-span-2", children: [
           (statsSlot || stats && stats.length > 0) && statsContent,
           (featuresSlot || features && features.length > 0) && featuresContent
@@ -8558,7 +8738,7 @@ function AboutInteractiveTabs({
   optixFlowConfig,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-12 md:py-32",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -8696,7 +8876,6 @@ function AboutMissionDualImage({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   contentClassName,
   missionTitleClassName,
   missionContentClassName,
@@ -8707,7 +8886,8 @@ function AboutMissionDualImage({
   actionsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -8860,7 +9040,8 @@ function AboutStoryExpertise({
   expertiseSectionClassName,
   className,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -8950,6 +9131,7 @@ function AboutStoryExpertise({
       className: cn(className),
       pattern,
       patternOpacity,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-12 lg:grid-cols-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -9088,7 +9270,6 @@ function AboutNetworkSpotlight({
   spotlightCard,
   spotlightCardSlot,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   eyebrowClassName,
   headingClassName,
@@ -9098,6 +9279,7 @@ function AboutNetworkSpotlight({
   imageClassName,
   spotlightCardClassName,
   background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
@@ -98753,8 +98935,9 @@ function LinkPageMinimalProfile({
         Pressable,
         {
           className: cn(
-            "flex w-full items-center gap-3 rounded-lg px-4 py-3 transition-colors",
-            "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
           ),
@@ -99834,9 +100017,27 @@ function LinkPageBentoLayout({
     if (!links || links.length === 0) return null;
     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-1 gap-3", featuredLinksClassName), children: renderFeaturedLinks }),
-      hasRegular && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-1 gap-3", regularLinksClassName), children: renderRegularLinks })
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-3 md:space-y-6", linksClassName), children: [
+      hasFeatured && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-6",
+            featuredLinksClassName
+          ),
+          children: renderFeaturedLinks
+        }
+      ),
+      hasRegular && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 md:gap-6",
+            regularLinksClassName
+          ),
+          children: renderRegularLinks
+        }
+      )
     ] });
   }, [
     linksSlot,
@@ -99881,7 +100082,7 @@ 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 }) : name),
-            bio && (typeof bio === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-xs text-sm", bioClassName), children: bio }) : bio)
+            bio && (typeof bio === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-xs text-sm text-balance", bioClassName), children: bio }) : bio)
           ] }),
           renderSocialLinks
         ]