@opensite/ui 2.3.1 → 2.3.3

package/dist/registry.js

@@ -506,13 +506,46 @@ var Section = React26__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+function TextInner({ as, className, children, ...props }, ref) {
+  const Component = as || "span";
+  return /* @__PURE__ */ jsx(Component, { ref, className: cn(className), ...props, children });
+}
+var Text = React26.forwardRef(TextInner);
+Text.displayName = "Text";
+function isContentTextItem(item) {
+  return item !== null && typeof item === "object" && !React26.isValidElement(item) && "_type" in item && item._type === "text";
+}
+var ContentGroup = React26.forwardRef(
+  ({ items, className, children, ...props }, ref) => {
+    const hasContent = items && items.length > 0;
+    if (!hasContent) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn(className), ...props, children: [
+      items.map((item, idx) => {
+        if (isContentTextItem(item)) {
+          const { _type, ...textProps } = item;
+          return /* @__PURE__ */ jsx(Text, { ...textProps }, idx);
+        }
+        const reactNode = item;
+        if (React26.isValidElement(reactNode)) {
+          return React26.cloneElement(reactNode, { key: reactNode.key ?? idx });
+        }
+        return /* @__PURE__ */ jsx(React26.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,
@@ -528,9 +561,21 @@ function AlternatingBlocks({
     return /* @__PURE__ */ jsx("div", { className: cn("space-y-12", sectionsClassName), children: sections.map((section, index) => /* @__PURE__ */ 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__ */ jsx("div", { className: cn(section.mediaLeft ? "md:order-2" : "", sectionContentClassName), children: section.content }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                section.mediaLeft ? "md:order-2" : "",
+                sectionContentClassName
+              ),
+              children: section.content
+            }
+          ),
           /* @__PURE__ */ jsx(
             "div",
             {
@@ -546,22 +591,55 @@ function AlternatingBlocks({
       },
       index
     )) });
-  }, [sectionsSlot, sections, sectionsClassName, sectionItemClassName, sectionContentClassName, sectionMediaClassName]);
+  }, [
+    sectionsSlot,
+    sections,
+    sectionsClassName,
+    sectionItemClassName,
+    sectionContentClassName,
+    sectionMediaClassName
+  ]);
+  const headerItems = 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__ */ 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__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-          subtitle && typeof subtitle !== "string" && /* @__PURE__ */ jsx("div", { className: cn("mb-2 text-sm font-semibold uppercase tracking-wider", getAccentColor(background)), children: subtitle }),
-          title && typeof title !== "string" && /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-        ] }) : null,
+        /* @__PURE__ */ jsx(
+          ContentGroup,
+          {
+            className: "mb-12 text-center md:mb-16",
+            items: headerItems
+          }
+        ),
         /* @__PURE__ */ jsx("div", { className: cn("mx-auto w-full max-w-[900px]", contentClassName), children: sectionsContent })
       ]
     }
@@ -579,7 +657,6 @@ function AboutMissionFeatures({
   features,
   featuresSlot,
   className,
-  containerClassName,
   titleClassName,
   descriptionClassName,
   missionLabelClassName,
@@ -591,7 +668,8 @@ function AboutMissionFeatures({
   featuresClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -622,7 +700,8 @@ function AboutMissionFeatures({
       pattern,
       patternOpacity,
       className: cn(className),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-8 lg:gap-16", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:gap-8", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsx(
             "h1",
@@ -727,7 +806,6 @@ function AboutMissionFeatures({
 }
 function AboutStatsShowcase({
   className,
-  containerClassName,
   title,
   titleClassName,
   description,
@@ -752,7 +830,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
 }) {
@@ -790,10 +869,7 @@ function AboutStatsShowcase({
   const logosContent = useMemo(() => {
     if (logosSlot) return logosSlot;
     if (!logos || logos.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn(
-      "py-24",
-      getNestedCardBg(background, "subtle")
-    ), children: /* @__PURE__ */ jsxs("div", { className: "container flex flex-col items-center gap-11", children: [
+    return /* @__PURE__ */ jsx("div", { className: cn("py-24", getNestedCardBg(background, "subtle")), children: /* @__PURE__ */ jsxs("div", { className: "container flex flex-col items-center gap-11", children: [
       logosTitle && (typeof logosTitle === "string" ? /* @__PURE__ */ jsx(
         "p",
         {
@@ -862,15 +938,21 @@ function AboutStatsShowcase({
                 optixFlowConfig
               }
             ),
-            benefit.stat && /* @__PURE__ */ 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__ */ jsx("p", { className: "mb-2 text-4xl font-medium", children: benefit.stat.value }) : /* @__PURE__ */ jsx("div", { className: "mb-2", children: benefit.stat.value })),
-              benefit.stat.label && (typeof benefit.stat.label === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-6 font-semibold", children: benefit.stat.label }) : /* @__PURE__ */ jsx("div", { className: "mb-6", children: benefit.stat.label })),
-              benefit.stat.description && (typeof benefit.stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: benefit.stat.description }) : benefit.stat.description)
-            ] }),
+            benefit.stat && /* @__PURE__ */ 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__ */ jsx("p", { className: "mb-2 text-4xl font-medium", children: benefit.stat.value }) : /* @__PURE__ */ jsx("div", { className: "mb-2", children: benefit.stat.value })),
+                  benefit.stat.label && (typeof benefit.stat.label === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-6 font-semibold", children: benefit.stat.label }) : /* @__PURE__ */ jsx("div", { className: "mb-6", children: benefit.stat.label })),
+                  benefit.stat.description && (typeof benefit.stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: benefit.stat.description }) : benefit.stat.description)
+                ]
+              }
+            ),
             benefit.testimonial && /* @__PURE__ */ jsxs("div", { className: "rounded-xl bg-background p-4", children: [
               /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center gap-2", children: [
                 benefit.testimonial.logo && /* @__PURE__ */ jsx(
@@ -890,7 +972,16 @@ function AboutStatsShowcase({
                   benefit.testimonial.author,
                   ","
                 ] }) : benefit.testimonial.author),
-                benefit.testimonial.role && (typeof benefit.testimonial.role === "string" ? /* @__PURE__ */ 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__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "text-sm",
+                      getTextColor(background, "muted")
+                    ),
+                    children: benefit.testimonial.role
+                  }
+                ) : benefit.testimonial.role)
               ] })
             ] })
           ] }, idx))
@@ -1405,7 +1496,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
 }) {
@@ -1599,7 +1690,6 @@ function AboutCompanyProfile({
 }
 function AboutVisionGallery({
   className,
-  containerClassName,
   title,
   titleClassName,
   subtitle,
@@ -1624,7 +1714,8 @@ function AboutVisionGallery({
   ctaClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -2336,7 +2427,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:
@@ -2355,52 +2449,63 @@ function AboutSplitHero({
       ),
       children: [
         pattern && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: /* @__PURE__ */ jsx(PatternBackground, { pattern, opacity: patternOpacity }) }),
-        /* @__PURE__ */ 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__ */ jsxs("div", { className: "mx-auto max-w-xl space-y-8", children: [
-          (brandText || brandHighlight) && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "text-xl font-semibold uppercase tracking-wider sm:text-2xl",
-                brandTextClassName
-              ),
-              children: [
-                brandText,
-                brandText && brandHighlight && " ",
-                brandHighlight && /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: cn(
-                "text-base leading-relaxed opacity-90 sm:text-lg",
-                descriptionClassName
+        /* @__PURE__ */ 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__ */ jsxs("div", { className: "mx-auto max-w-xl space-y-8", children: [
+              (brandText || brandHighlight) && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "text-xl font-semibold uppercase tracking-wider sm:text-2xl",
+                    brandTextClassName
+                  ),
+                  children: [
+                    brandText,
+                    brandText && brandHighlight && " ",
+                    brandHighlight && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "bg-linear-to-r from-primary to-primary/60 bg-clip-text text-transparent",
+                          brandHighlightClassName
+                        ),
+                        children: brandHighlight
+                      }
+                    )
+                  ]
+                }
               ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          ctaContent && /* @__PURE__ */ jsx("div", { className: "pt-4", children: ctaContent })
-        ] }) })
+              heading && (typeof heading === "string" ? /* @__PURE__ */ 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__ */ jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-base leading-relaxed opacity-90 sm:text-lg",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              ctaContent && /* @__PURE__ */ jsx("div", { className: "pt-4", children: ctaContent })
+            ] })
+          }
+        )
       ]
     }
   );
@@ -2439,9 +2544,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
 }) {
@@ -2483,9 +2588,22 @@ function AboutMissionPrinciples({
         children: principles.map((principle, idx) => /* @__PURE__ */ 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__ */ jsx("div", { className: cn("absolute right-4 top-4 text-3xl font-bold", getAccentColor(background), "opacity-20"), children: principle.number }),
+              principle.number && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "absolute right-4 top-4 text-3xl font-bold",
+                    getAccentColor(background),
+                    "opacity-20"
+                  ),
+                  children: principle.number
+                }
+              ),
               /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
                 principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold", children: principle.title }) : principle.title),
                 principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: principle.description }) : principle.description)
@@ -2858,7 +2976,6 @@ function CommunityInitiatives({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -2870,7 +2987,8 @@ function CommunityInitiatives({
   actionsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -2959,20 +3077,47 @@ function CommunityInitiatives({
                           ),
                           children: [
                             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                              /* @__PURE__ */ jsx("div", { className: cn("rounded-md p-2", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsx(
-                                DynamicIcon,
+                              /* @__PURE__ */ jsx(
+                                "div",
                                 {
-                                  name: initiative.icon,
-                                  size: 24,
-                                  className: cn(getAccentColor(background))
+                                  className: cn(
+                                    "rounded-md p-2",
+                                    getNestedCardBg(background, "muted")
+                                  ),
+                                  children: /* @__PURE__ */ jsx(
+                                    DynamicIcon,
+                                    {
+                                      name: initiative.icon,
+                                      size: 24,
+                                      className: cn(getAccentColor(background))
+                                    }
+                                  )
                                 }
-                              ) }),
+                              ),
                               /* @__PURE__ */ jsx("h3", { className: "text-2xl font-bold", children: initiative.title })
                             ] }),
                             /* @__PURE__ */ jsx("p", { className: cn(getTextColor(background, "muted")), children: initiative.description }),
                             initiative.metrics && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-4 pt-2", children: initiative.metrics.map((metric, i) => /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-                              /* @__PURE__ */ jsx("div", { className: cn("text-2xl font-bold", getAccentColor(background)), children: metric.value }),
-                              /* @__PURE__ */ jsx("div", { className: cn("mt-1 text-xs", getTextColor(background, "muted")), children: metric.label })
+                              /* @__PURE__ */ jsx(
+                                "div",
+                                {
+                                  className: cn(
+                                    "text-2xl font-bold",
+                                    getAccentColor(background)
+                                  ),
+                                  children: metric.value
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                "div",
+                                {
+                                  className: cn(
+                                    "mt-1 text-xs",
+                                    getTextColor(background, "muted")
+                                  ),
+                                  children: metric.label
+                                }
+                              )
                             ] }, i)) })
                           ]
                         }
@@ -3001,25 +3146,35 @@ function CommunityInitiatives({
                             "flex h-full items-center justify-center md:col-span-5",
                             isEven ? "md:order-2" : "md:order-1"
                           ),
-                          children: /* @__PURE__ */ jsx(Card, { className: cn(
-                            "flex h-full min-h-[280px] w-full items-center justify-center",
-                            getNestedCardBg(background, "subtle")
-                          ), children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6 text-center", children: [
-                            /* @__PURE__ */ jsx(
-                              DynamicIcon,
-                              {
-                                name: initiative.icon,
-                                size: 64,
-                                className: cn("mx-auto mb-4", getTextColor(background, "muted"), "opacity-50")
-                              }
-                            ),
-                            /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "mx-auto", children: [
-                              "Learn more about our",
-                              " ",
-                              initiative.title.toLowerCase(),
-                              " initiative"
-                            ] })
-                          ] }) })
+                          children: /* @__PURE__ */ jsx(
+                            Card,
+                            {
+                              className: cn(
+                                "flex h-full min-h-[280px] w-full items-center justify-center",
+                                getNestedCardBg(background, "subtle")
+                              ),
+                              children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6 text-center", children: [
+                                /* @__PURE__ */ jsx(
+                                  DynamicIcon,
+                                  {
+                                    name: initiative.icon,
+                                    size: 64,
+                                    className: cn(
+                                      "mx-auto mb-4",
+                                      getTextColor(background, "muted"),
+                                      "opacity-50"
+                                    )
+                                  }
+                                ),
+                                /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "mx-auto", children: [
+                                  "Learn more about our",
+                                  " ",
+                                  initiative.title.toLowerCase(),
+                                  " initiative"
+                                ] })
+                              ] })
+                            }
+                          )
                         }
                       )
                     ]
@@ -3050,7 +3205,7 @@ function CommunityInitiatives({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: [
         /* @__PURE__ */ jsxs(
@@ -3061,18 +3216,7 @@ function CommunityInitiatives({
               headerClassName
             ),
             children: [
-              badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "inline-block rounded-lg px-3 py-1 text-sm",
-                    getNestedCardBg(background, "muted"),
-                    getAccentColor(background),
-                    badgeClassName
-                  ),
-                  children: badgeText
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: badgeClassName, children: badgeText })),
+              badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx(Badge, { className: cn("px-3", badgeClassName), children: badgeText }) : badgeText),
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
                 "h2",
                 {
@@ -3082,18 +3226,23 @@ function CommunityInitiatives({
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn(descriptionClassName), children: description }) : description)
             ]
           }
         ),
         categoriesContent,
         /* @__PURE__ */ jsxs("div", { className: cn("mt-20 text-center", ctaClassName), children: [
-          ctaBadgeText && /* @__PURE__ */ jsx("div", { className: cn(
-            "mb-8 inline-flex items-center justify-center rounded-full p-1",
-            getNestedCardBg(background)
-          ), children: /* @__PURE__ */ jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText }) }),
-          ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", ctaHeadingClassName), children: ctaHeading })),
+          ctaBadgeText && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "mb-8 inline-flex items-center justify-center rounded-full p-1"
+              ),
+              children: /* @__PURE__ */ jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
+            }
+          ),
+          ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
           ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx(
             "p",
             {
@@ -3104,51 +3253,13 @@ function CommunityInitiatives({
               ),
               children: ctaDescription
             }
-          ) : /* @__PURE__ */ 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__ */ jsx(Component, { ref, className: cn(className), ...props, children });
-}
-var Text = React26.forwardRef(TextInner);
-Text.displayName = "Text";
-function isContentTextItem(item) {
-  return item !== null && typeof item === "object" && !React26.isValidElement(item) && "_type" in item && item._type === "text";
-}
-var ContentGroup = React26.forwardRef(
-  ({ items, className, children, ...props }, ref) => {
-    const hasContent = items && items.length > 0;
-    if (!hasContent) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxs("div", { ref, className: cn(className), ...props, children: [
-      items.map((item, idx) => {
-        if (isContentTextItem(item)) {
-          const { _type, ...textProps } = item;
-          return /* @__PURE__ */ jsx(Text, { ...textProps }, idx);
-        }
-        const reactNode = item;
-        if (React26.isValidElement(reactNode)) {
-          return React26.cloneElement(reactNode, { key: reactNode.key ?? idx });
-        }
-        return /* @__PURE__ */ jsx(React26.Fragment, { children: reactNode }, idx);
-      }),
-      children
-    ] });
-  }
-);
-ContentGroup.displayName = "ContentGroup";
 function AboutCultureTabs({
   badgeText,
   heading,
@@ -7724,7 +7835,6 @@ function AboutStoryGallery({
 }
 function AboutStreamlineTeam({
   className,
-  containerClassName,
   title,
   titleClassName,
   description,
@@ -7746,7 +7856,8 @@ function AboutStreamlineTeam({
   teamSectionClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -7766,7 +7877,13 @@ function AboutStreamlineTeam({
       ),
       /* @__PURE__ */ jsxs("div", { children: [
         feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: feature.title }) : feature.title),
-        feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: feature.description }) : feature.description)
+        feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn("text-sm", getTextColor(background, "muted")),
+            children: feature.description
+          }
+        ) : feature.description)
       ] })
     ] }, idx)) });
   }, [featuresSlot, features, featuresClassName, background]);
@@ -7914,7 +8031,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
@@ -8006,7 +8123,6 @@ function AboutDeveloperProfile({
 var ALL_TAB_VALUE = "__all__";
 function AboutStartupTeam({
   className,
-  containerClassName,
   title,
   titleClassName,
   description,
@@ -8021,7 +8137,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,
@@ -8073,10 +8190,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
       },
@@ -8109,18 +8223,24 @@ function AboutStartupTeam({
               className: "mx-auto h-24 w-24 rounded-full object-cover",
               optixFlowConfig
             }
-          ) : /* @__PURE__ */ jsx("div", { className: cn(
-            "mx-auto flex h-24 w-24 items-center justify-center rounded-full",
-            getNestedCardBg(background),
-            getNestedCardTextColor(background)
-          ), children: /* @__PURE__ */ jsx(
-            DynamicIcon,
+          ) : /* @__PURE__ */ 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__ */ jsx(
+                DynamicIcon,
+                {
+                  name: "lucide/user",
+                  size: 40,
+                  className: cn(getTextColor(background, "muted"))
+                }
+              )
             }
-          ) }),
+          ),
           member.name && (typeof member.name === "string" ? /* @__PURE__ */ jsx("h3", { className: "mt-4 font-semibold", children: member.name }) : /* @__PURE__ */ jsx("div", { className: "mt-4", children: member.name })),
           member.role && (typeof member.role === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: member.role }) : /* @__PURE__ */ jsx("div", { className: "text-sm", children: member.role })),
           member.socialLinks && member.socialLinks.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-center gap-3", children: member.socialLinks.map((link, linkIdx) => /* @__PURE__ */ jsx(
@@ -8174,8 +8294,9 @@ function AboutStartupTeam({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsx("div", { className: cn(containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-4", children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-4", children: [
         /* @__PURE__ */ jsx(
           "aside",
           {
@@ -8244,7 +8365,6 @@ function AboutMinimalStory({
   authorSlot,
   featuredImage,
   className,
-  containerClassName,
   contentClassName,
   titleClassName,
   bodyClassName,
@@ -8252,7 +8372,8 @@ function AboutMinimalStory({
   imageClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -8268,7 +8389,16 @@ function AboutMinimalStory({
           className: "h-16 w-16 rounded-full object-cover",
           optixFlowConfig
         }
-      ) : /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("p", { className: "font-semibold", children: author.name }),
         /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: author.role })
@@ -8282,7 +8412,7 @@ function AboutMinimalStory({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-3xl", contentClassName), children: [
         (authorSlot || author) && authorContent,
@@ -8331,7 +8461,6 @@ function AboutStoryHero({
   teamInfo,
   teamInfoSlot,
   className,
-  containerClassName,
   contentClassName,
   titleClassName,
   subtitleClassName,
@@ -8340,7 +8469,8 @@ function AboutStoryHero({
   imageClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -8441,36 +8571,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 = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("grid gap-6 sm:grid-cols-2", statsClassName), children: stats.map((stat, idx) => /* @__PURE__ */ jsxs("div", { className: cn(
-      "rounded-xl border p-6",
-      getNestedCardBg(background, "card"),
-      getNestedCardTextColor(background)
-    ), children: [
-      stat.icon,
-      typeof stat.value === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-4xl font-bold", children: stat.value }) : /* @__PURE__ */ jsx("div", { className: "mt-4", children: stat.value }),
-      typeof stat.label === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1 font-semibold", children: stat.label }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: stat.label }),
-      stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-2 text-sm", getTextColor(background, "muted")), children: stat.description }) : /* @__PURE__ */ jsx("div", { className: "mt-2", children: stat.description }))
-    ] }, idx)) });
+    return /* @__PURE__ */ jsx("div", { className: cn("grid gap-6 sm:grid-cols-2", statsClassName), children: stats.map((stat, idx) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "rounded-xl border p-6",
+          getNestedCardBg(background, "card"),
+          getNestedCardTextColor(background)
+        ),
+        children: [
+          stat.icon,
+          typeof stat.value === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-4xl font-bold", children: stat.value }) : /* @__PURE__ */ jsx("div", { className: "mt-4", children: stat.value }),
+          typeof stat.label === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1 font-semibold", children: stat.label }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: stat.label }),
+          stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mt-2 text-sm",
+                getTextColor(background, "muted")
+              ),
+              children: stat.description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: "mt-2", children: stat.description }))
+        ]
+      },
+      idx
+    )) });
   }, [statsSlot, stats, statsClassName]);
   const featuresContent = useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("mt-12 space-y-6", featuresClassName), children: features.map((feature, idx) => /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
-      /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { children: [
         feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: feature.title }) : feature.title),
         feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: feature.description }) : feature.description)
@@ -8487,10 +8642,35 @@ function AboutStatsSidebar({
       className: cn(className),
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("lg:sticky lg:top-24 lg:self-start", sidebarClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("lg:sticky lg:top-24 lg:self-start", sidebarClassName),
+            children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-bold tracking-tight md:text-4xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-4 text-lg",
+                    getTextColor(background, "muted"),
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2", children: [
           (statsSlot || stats && stats.length > 0) && statsContent,
           (featuresSlot || features && features.length > 0) && featuresContent
@@ -8518,7 +8698,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
 }) {
@@ -8656,7 +8836,6 @@ function AboutMissionDualImage({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   contentClassName,
   missionTitleClassName,
   missionContentClassName,
@@ -8667,7 +8846,8 @@ function AboutMissionDualImage({
   actionsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -8820,7 +9000,8 @@ function AboutStoryExpertise({
   expertiseSectionClassName,
   className,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -8910,6 +9091,7 @@ function AboutStoryExpertise({
       className: cn(className),
       pattern,
       patternOpacity,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-12 lg:grid-cols-2", children: [
           /* @__PURE__ */ jsxs(
@@ -9048,7 +9230,6 @@ function AboutNetworkSpotlight({
   spotlightCard,
   spotlightCardSlot,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   eyebrowClassName,
   headingClassName,
@@ -9058,6 +9239,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,
@@ -16988,7 +17170,7 @@ var DEFAULT_FORM_FIELDS25 = [
 function ContactPhotography({
   heading,
   description,
-  containerClassName = "mx-auto w-full max-w-full relative z-10 px-0",
+  containerClassName = "px-0 sm:px-0 md:px-0 lg:px-0 mx-0 w-full max-w-full relative z-10",
   className,
   headingClassName,
   descriptionClassName,
@@ -50141,9 +50323,9 @@ function HeroVideoBackgroundDark({
           "div",
           {
             className: cn(
-              "relative z-10 mx-auto flex size-full max-w-3xl",
-              "flex-col justify-center gap-4 md:gap-6 items-center",
-              "text-center px-4 md:px-6",
+              "relative z-10 mx-auto flex size-full",
+              "md:max-w-3xl lg:max-w-4xl flex-col justify-center",
+              "gap-4 md:gap-6 items-center text-center px-4 md:px-6",
               contentClassName
             ),
             children: [
@@ -50152,7 +50334,8 @@ function HeroVideoBackgroundDark({
                 "h1",
                 {
                   className: cn(
-                    "text-4xl font-bold md:text-6xl lg:text-7xl text-balance text-white text-shadow-2xl",
+                    "font-bold text-5xl md:text-6xl lg:text-8xl",
+                    "text-pretty text-white text-shadow-2xl",
                     headingClassName
                   ),
                   children: heading
@@ -58148,20 +58331,30 @@ function HeroEventRegistration({
   const renderLocation = useMemo(() => {
     if (locationSlot) return locationSlot;
     if (!locationLabel && !locationSublabel) return null;
-    return /* @__PURE__ */ jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-card text-card-foreground p-4 shadow-lg ring-4 ring-primary", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    return /* @__PURE__ */ jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-card text-card-foreground p-2 md:p-4 shadow-lg ring-4 ring-primary", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ jsx(
         "div",
         {
           className: cn(
-            "flex h-12 w-12 items-center justify-center rounded-full text-card-foreground"
+            "flex items-center justify-center shrink-0",
+            "size-12 rounded-xl bg-primary text-primary-foreground"
           ),
           children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/map-pin", size: 24 })
         }
       ),
-      /* @__PURE__ */ jsxs("div", { children: [
-        locationLabel && (typeof locationLabel === "string" ? /* @__PURE__ */ jsx("div", { className: "font-semibold text-card-foreground", children: locationLabel }) : locationLabel),
-        locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsx("div", { className: cn("text-sm text-card-foreground"), children: locationSublabel }) : locationSublabel)
-      ] })
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex flex-col items-start justify-center",
+            "text-card-foreground gap-0 pr-0 md:pr-2"
+          ),
+          children: [
+            locationLabel && (typeof locationLabel === "string" ? /* @__PURE__ */ jsx("div", { className: "font-semibold", children: locationLabel }) : locationLabel),
+            locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsx("div", { className: cn("text-xs"), children: locationSublabel }) : locationSublabel)
+          ]
+        }
+      )
     ] }) });
   }, [locationSlot, locationLabel, locationSublabel]);
   const renderImage = useMemo(() => {
@@ -58204,7 +58397,7 @@ function HeroEventRegistration({
                 {
                   src: logo.src,
                   alt: logo.alt,
-                  className: "mr-auto h-12 md:h-16",
+                  className: "w-auto max-w-full h-12 md:h-14 object-contain my-4",
                   optixFlowConfig
                 }
               ),
@@ -62790,7 +62983,7 @@ var NavbarImagePreview = ({
           "div",
           {
             className: cn(
-              "flex items-center justify-between gap-3.5 py-5",
+              "relative flex items-center justify-between gap-3.5 py-5",
               navClassName
             ),
             children: [
@@ -62807,7 +63000,7 @@ var NavbarImagePreview = ({
                 NavigationMenu,
                 {
                   className: cn(
-                    "hidden lg:flex [&>div:nth-child(2)]:left-1/2 [&>div:nth-child(2)]:-translate-x-1/2",
+                    "hidden lg:flex absolute left-1/2 -translate-x-1/2 [&>div:nth-child(2)]:left-1/2 [&>div:nth-child(2)]:-translate-x-1/2",
                     navigationMenuClassName
                   ),
                   children: renderNavigation
@@ -98702,8 +98895,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
           ),
@@ -99382,7 +99576,8 @@ function LinkPageGridCards({
                 "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",
+                "bg-card text-card-foreground shadow-sm hover:shadow-md",
+                "border border-border",
                 cardClassName,
                 linkClassName
               ),
@@ -99782,9 +99977,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__ */ jsxs("div", { className: cn("space-y-3", linksClassName), children: [
-      hasFeatured && /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 gap-3", featuredLinksClassName), children: renderFeaturedLinks }),
-      hasRegular && /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 gap-3", regularLinksClassName), children: renderRegularLinks })
+    return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3 md:space-y-6", linksClassName), children: [
+      hasFeatured && /* @__PURE__ */ 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__ */ 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,
@@ -99829,7 +100042,7 @@ function LinkPageBentoLayout({
           ),
           /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
             name && (typeof name === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-xl font-bold", nameClassName), children: name }) : name),
-            bio && (typeof bio === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-xs text-sm", bioClassName), children: bio }) : bio)
+            bio && (typeof bio === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-xs text-sm text-balance", bioClassName), children: bio }) : bio)
           ] }),
           renderSocialLinks
         ]