@opensite/ui 0.4.7 → 0.4.9

package/dist/registry.js

@@ -357,11 +357,13 @@ var Section = React13__default.forwardRef(
     children,
     className,
     style,
-    background = "white",
+    background = "transparent",
     spacing = "lg",
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -388,13 +390,20 @@ var Section = React13__default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );
@@ -40943,88 +40952,211 @@ function HeroSplitIconCards({
     }
   );
 }
-var Swirls = () => /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsx(
-    "svg",
-    {
-      className: "absolute left-0 top-0 -translate-x-1/3 -translate-y-1/3 text-primary/10",
-      width: "600",
-      height: "600",
-      viewBox: "0 0 600 600",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M515.266 181.33C377.943 51.564 128.537 136.256 50.8123 293.565C-26.9127 450.874 125.728 600 125.728 600",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round"
-        }
-      )
-    }
-  ),
-  /* @__PURE__ */ jsx(
-    "svg",
-    {
-      className: "absolute bottom-0 right-0 translate-x-1/4 translate-y-1/4 text-primary/10",
-      width: "700",
-      height: "700",
-      viewBox: "0 0 700 700",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M26.8838 528.274C193.934 689.816 480.051 637.218 594.397 451.983C708.742 266.748 543.953 2.22235 543.953 2.22235",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round"
-        }
-      )
-    }
-  )
-] });
 function HeroFloatingImages({
-  heading,
-  description,
+  children,
   images,
   imagesSlot,
-  showSwirls = true,
-  backgroundSlot,
-  background = "white",
-  spacing = "lg",
+  zoomIconName = "lucide/zoom-in",
+  enableLightbox = true,
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,
+  gridClassName,
   contentClassName,
-  headingClassName,
-  descriptionClassName,
-  imagesClassName,
+  galleryClassName,
+  featuredImageClassName,
+  secondaryImageClassName,
+  imageClassName,
+  zoomIndicatorClassName,
   optixFlowConfig
 }) {
-  const renderBackground = () => {
-    if (backgroundSlot) return backgroundSlot;
-    if (!showSwirls) return null;
-    return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-0", children: /* @__PURE__ */ jsx(Swirls, {}) });
-  };
-  const renderImages = () => {
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
+  const { featuredImage, secondaryImages } = useMemo(() => {
+    if (!images || images.length === 0) {
+      return { featuredImage: void 0, secondaryImages: [] };
+    }
+    const featured = images.find((img) => img.featured) ?? images[0];
+    const secondary = images.filter((img) => img !== featured);
+    return { featuredImage: featured, secondaryImages: secondary };
+  }, [images]);
+  const lightboxItems = useMemo(() => {
+    if (!images || images.length === 0) return [];
+    const orderedImages = featuredImage ? [featuredImage, ...secondaryImages] : secondaryImages;
+    return orderedImages.map((img, index) => ({
+      id: `hero-gallery-${index}-${img.src.slice(-12)}`,
+      type: "image",
+      src: img.src,
+      alt: img.alt
+    }));
+  }, [images, featuredImage, secondaryImages]);
+  const handleImageClick = useCallback(
+    (index) => {
+      if (!enableLightbox) return;
+      setLightboxIndex(index);
+      setLightboxOpen(true);
+    },
+    [enableLightbox]
+  );
+  const handleLightboxClose = useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
+  const handleImageKeyDown = useCallback(
+    (e, index) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleImageClick(index);
+      }
+    },
+    [handleImageClick]
+  );
+  const zoomIndicator = useMemo(
+    () => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
+          zoomIndicatorClassName
+        ),
+        children: /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-white/90 shadow-lg", children: /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: zoomIconName,
+            size: 20,
+            className: "text-gray-900"
+          }
+        ) })
+      }
+    ),
+    [zoomIconName, zoomIndicatorClassName]
+  );
+  const featuredImageContent = useMemo(() => {
+    if (!featuredImage) return null;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "group relative col-span-2 aspect-[4/3] overflow-hidden rounded-2xl sm:col-span-1 sm:row-span-2 sm:aspect-auto sm:h-full",
+          featuredImageClassName
+        ),
+        onClick: () => handleImageClick(0),
+        onKeyDown: (e) => handleImageKeyDown(e, 0),
+        "aria-label": `View ${featuredImage.alt} in lightbox`,
+        children: [
+          /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: featuredImage.src,
+              alt: featuredImage.alt,
+              className: cn(
+                "h-full w-full object-cover transition-transform duration-500 group-hover:scale-105",
+                imageClassName,
+                featuredImage.className
+              ),
+              optixFlowConfig
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/0 transition-colors group-hover:bg-black/20" }),
+          enableLightbox && zoomIndicator
+        ]
+      }
+    );
+  }, [
+    featuredImage,
+    featuredImageClassName,
+    imageClassName,
+    optixFlowConfig,
+    enableLightbox,
+    zoomIndicator,
+    handleImageClick,
+    handleImageKeyDown
+  ]);
+  const secondaryImagesContent = useMemo(() => {
+    if (secondaryImages.length === 0) return null;
+    return secondaryImages.map((image, index) => {
+      const lightboxIndex2 = index + 1;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "group relative aspect-square overflow-hidden rounded-2xl",
+            secondaryImageClassName
+          ),
+          onClick: () => handleImageClick(lightboxIndex2),
+          onKeyDown: (e) => handleImageKeyDown(e, lightboxIndex2),
+          "aria-label": `View ${image.alt} in lightbox`,
+          children: [
+            /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: image.src,
+                alt: image.alt,
+                className: cn(
+                  "h-full w-full object-cover transition-transform duration-500 group-hover:scale-105",
+                  imageClassName,
+                  image.className
+                ),
+                optixFlowConfig
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/0 transition-colors group-hover:bg-black/20" }),
+            enableLightbox && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
+                  zoomIndicatorClassName
+                ),
+                children: /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-white/90 shadow-lg", children: /* @__PURE__ */ jsx(
+                  DynamicIcon,
+                  {
+                    name: zoomIconName,
+                    size: 16,
+                    className: "text-gray-900"
+                  }
+                ) })
+              }
+            )
+          ]
+        },
+        `secondary-${index}-${image.src.slice(-8)}`
+      );
+    });
+  }, [
+    secondaryImages,
+    secondaryImageClassName,
+    imageClassName,
+    optixFlowConfig,
+    enableLightbox,
+    zoomIconName,
+    zoomIndicatorClassName,
+    handleImageClick,
+    handleImageKeyDown
+  ]);
+  const galleryContent = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 z-10", imagesClassName), children: images.map((image, index) => /* @__PURE__ */ jsx(
-      Img,
-      {
-        src: image.src,
-        alt: image.alt,
-        className: cn("absolute w-32 h-32 md:w-48 md:h-48 rounded-lg shadow-lg object-contain", image.className),
-        style: { animationDelay: `${index * 300}ms` },
-        optixFlowConfig
-      },
-      `${image.alt}-${index}`
-    )) });
-  };
+    return /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-2 gap-4", galleryClassName), children: [
+      featuredImageContent,
+      secondaryImagesContent
+    ] });
+  }, [
+    imagesSlot,
+    images,
+    galleryClassName,
+    featuredImageContent,
+    secondaryImagesContent
+  ]);
+  const hasContent = useMemo(() => {
+    return children !== void 0 && children !== null;
+  }, [children]);
+  const hasGallery = useMemo(() => {
+    return imagesSlot || images && images.length > 0;
+  }, [imagesSlot, images]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -41032,53 +41164,33 @@ function HeroFloatingImages({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(
-        "relative flex min-h-[60vh] items-center justify-center overflow-hidden py-20 md:min-h-[80vh] md:py-32",
-        className
-      ),
+      className: cn("relative flex items-center justify-center", className),
       children: [
-        renderBackground(),
-        renderImages(),
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cn(
-              "relative z-20 mx-auto max-w-2xl px-4 text-center",
-              contentClassName
-            ),
+            className: cn("grid gap-12 lg:grid-cols-2 lg:gap-16", gridClassName),
             children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                "h1",
-                {
-                  className: cn(
-                    "text-4xl font-bold tracking-tight text-primary sm:text-5xl md:text-6xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : /* @__PURE__ */ jsx(
-                "h1",
-                {
-                  className: cn(
-                    "text-4xl font-bold tracking-tight text-primary sm:text-5xl md:text-6xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "mt-6 text-lg leading-8 text-muted-foreground",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              hasContent ? /* @__PURE__ */ jsx("div", { className: cn("flex flex-col justify-center", contentClassName), children }) : null,
+              hasGallery ? galleryContent : null
             ]
           }
-        )
+        ),
+        enableLightbox && lightboxOpen && lightboxItems.length > 0 ? /* @__PURE__ */ jsx(
+          Lightbox,
+          {
+            items: lightboxItems,
+            initialIndex: lightboxIndex,
+            onClose: handleLightboxClose,
+            layout: "horizontal",
+            controls: {
+              navigation: true,
+              counter: true,
+              closeButton: true,
+              captions: true
+            }
+          }
+        ) : null
       ]
     }
   );
@@ -49667,7 +49779,7 @@ function NavigationMenuList({
     {
       "data-slot": "navigation-menu-list",
       className: cn(
-        "group flex flex-1 list-none items-center justify-center gap-2 lg:gap-4 xl:gap-6",
+        "group flex flex-1 list-none items-center justify-center gap-2 lg:gap-4",
         className
       ),
       ...props
@@ -49688,7 +49800,7 @@ function NavigationMenuItem({
   );
 }
 var navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:text-foreground data-[state=open]:focus:bg-muted data-[state=open]:bg-muted/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+  "group inline-flex h-9 w-max gap-1 items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:text-foreground data-[state=open]:focus:bg-muted data-[state=open]:bg-muted/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
 );
 function NavigationMenuTrigger({
   className,
@@ -49703,7 +49815,6 @@ function NavigationMenuTrigger({
       ...props,
       children: [
         children,
-        " ",
         /* @__PURE__ */ jsx(
           DynamicIcon,
           {
@@ -49767,7 +49878,7 @@ function NavigationMenuLink({
     {
       "data-slot": "navigation-menu-link",
       className: cn(
-        "group inline-flex w-max items-center justify-center rounded-md text-sm disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:focus:bg-muted focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 group h-auto bg-transparent px-3 py-2 font-normal text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground data-[state=open]:bg-muted/50 data-[state=open]:text-foreground",
+        "group inline-flex h-auto w-max items-center justify-center rounded-md bg-transparent px-3 py-2 text-sm font-normal text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:text-foreground data-[state=open]:focus:bg-muted data-[state=open]:bg-muted/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
         className
       ),
       ...props
@@ -49881,27 +49992,33 @@ function SheetDescription({
 function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks", customClasses) {
   const isFloatingBar = layoutVariant === "floatingBar";
   const isFullWidthLinks = layoutVariant === "fullScreenFullWidthLinks";
+  const isContainerizedLinks = layoutVariant === "fullScreenContainerizedLinks";
   return {
-    // Section wrapper classes
+    // Section wrapper classes - always full width for non-floating variants
     sectionClasses: cn(
       "inset-x-0 z-20",
       isFloatingBar ? "sticky top-4" : "top-0",
       customClasses?.className
     ),
-    // Outer container wrapper (only for floating bar)
+    // Outer container wrapper (only for floating bar - this containerizes the entire navbar)
     containerWrapperClasses: cn(
+      "w-full",
       isFloatingBar && "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl relative z-10"
     ),
-    // Inner container classes
+    // Inner container classes (only for fullScreenContainerizedLinks - this containerizes the content inside the navbar)
     innerContainerClasses: cn(
-      !isFloatingBar && !isFullWidthLinks && "container",
+      isContainerizedLinks && "container",
       isFullWidthLinks && "mx-auto w-full px-2 sm:px-4 lg:px-8",
       customClasses?.containerClassName
     ),
     // Navigation wrapper classes (for border and shadow)
     navWrapperClasses: cn(
+      "w-full",
       isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm"
     ),
+    // Section container configuration for full-width navbars
+    sectionContainerClassName: "px-0 sm:px-0 lg:px-0",
+    sectionContainerMaxWidth: "full",
     // Spacing adjustment for Section component
     spacingOverride: isFloatingBar ? "none" : void 0
   };
@@ -49932,14 +50049,7 @@ var renderMenuItem = (item, optixFlowConfig) => {
       /* @__PURE__ */ jsx(NavigationMenuContent, { className: "bg-popover text-popover-foreground", children: item.items.map((subItem) => /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, className: "w-80", children: /* @__PURE__ */ jsx(SubMenuLink, { item: subItem, optixFlowConfig }) }, subItem.title)) })
     ] }, item.title);
   }
-  return /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
-    NavigationMenuLink,
-    {
-      href: item.url,
-      className: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-foreground",
-      children: item.title
-    }
-  ) }, item.title);
+  return /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(NavigationMenuLink, { href: item.url, children: item.title }) }, item.title);
 };
 var renderMobileMenuItem = (item, optixFlowConfig) => {
   if (item.items) {
@@ -50055,6 +50165,8 @@ var NavbarDropdownMenu = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -50065,7 +50177,9 @@ var NavbarDropdownMenu = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: cn(innerContainerClasses, navWrapperClasses), children: [
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: innerContainerClasses, children: [
         /* @__PURE__ */ jsxs(
           "nav",
           {
@@ -50113,7 +50227,7 @@ var NavbarDropdownMenu = ({
             ] })
           ] })
         ] }) })
-      ] }) })
+      ] }) }) })
     }
   );
 };
@@ -50158,14 +50272,7 @@ var renderMenuItem2 = (item) => {
       /* @__PURE__ */ jsx(NavigationMenuContent, { className: "origin-top-center relative top-11 w-full overflow-hidden rounded-md border bg-popover shadow data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:absolute md:left-1/2 md:w-80 md:-translate-x-1/2", children: item.items.map((subItem) => /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsx(SubMenuLink2, { item: subItem }) }, subItem.title)) })
     ] }, item.title);
   }
-  return /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
-    NavigationMenuLink,
-    {
-      href: item.url,
-      className: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-foreground",
-      children: item.title
-    }
-  ) }, item.title);
+  return /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(NavigationMenuLink, { href: item.url, children: item.title }) }, item.title);
 };
 var renderMobileMenuItem2 = (item) => {
   if (item.items) {
@@ -50274,6 +50381,8 @@ var NavbarCenteredMenu = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -50284,7 +50393,9 @@ var NavbarCenteredMenu = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: cn(innerContainerClasses, navWrapperClasses), children: [
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: innerContainerClasses, children: [
         /* @__PURE__ */ jsxs(
           "nav",
           {
@@ -50333,7 +50444,7 @@ var NavbarCenteredMenu = ({
             ] })
           ] })
         ] }) })
-      ] }) })
+      ] }) }) })
     }
   );
 };
@@ -50412,11 +50523,11 @@ var DesktopMenuItem = ({
   if (layout === "simple-grid" && link.links) {
     return /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
       /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-3 py-2 font-normal text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground data-[state=open]:bg-muted/50 data-[state=open]:text-foreground", children: link.label }),
-      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "min-w-[700px] p-6", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: link.links.map((item, itemIndex) => /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "min-w-[700px] p-6", children: /* @__PURE__ */ jsx("div", { className: "grid auto-rows-fr grid-cols-1 gap-4 sm:grid-cols-2", children: link.links.map((item, itemIndex) => /* @__PURE__ */ jsxs(
         NavigationMenuLink,
         {
           href: getLinkUrl(item),
-          className: "flex flex-row items-start gap-4 rounded-lg border border-input bg-background p-4 hover:bg-muted hover:text-foreground",
+          className: "flex w-full flex-row items-start gap-4 rounded-lg border border-input bg-background p-4 hover:bg-muted hover:text-foreground",
           children: [
             item.image && /* @__PURE__ */ jsx("div", { className: "h-20 w-20 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
               Img,
@@ -50428,7 +50539,7 @@ var DesktopMenuItem = ({
               }
             ) }),
             !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 20 }) : null }),
-            /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
               /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: item.label }),
               item.description && /* @__PURE__ */ jsx("div", { className: "text-sm font-normal text-muted-foreground", children: item.description })
             ] })
@@ -50441,13 +50552,22 @@ var DesktopMenuItem = ({
   if (layout === "list-with-icons" && link.links) {
     return /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
       /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-3 py-2 font-normal text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground data-[state=open]:bg-muted/50 data-[state=open]:text-foreground", children: link.label }),
-      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "min-w-[400px] p-4", children: /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: link.links.map((item, itemIndex) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "min-w-[400px] p-4", children: /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: link.links.map((item, itemIndex) => /* @__PURE__ */ jsx("li", { className: "w-full", children: /* @__PURE__ */ jsxs(
         NavigationMenuLink,
         {
           href: getLinkUrl(item),
-          className: "flex items-start gap-3 rounded-lg p-3 hover:bg-muted",
+          className: "flex w-full items-start gap-3 rounded-lg p-3 hover:bg-muted",
           children: [
-            (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-md bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 16 }) : null }),
+            item.image && /* @__PURE__ */ jsx("div", { className: "h-12 w-12 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: item.image,
+                alt: typeof item.label === "string" ? item.label : "Menu item",
+                className: "h-full w-full object-cover object-center",
+                optixFlowConfig
+              }
+            ) }),
+            !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 16 }) : null }),
             /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
               /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: item.label }),
               item.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: item.description })
@@ -50458,14 +50578,7 @@ var DesktopMenuItem = ({
     ] }, `desktop-menu-item-${index}`);
   }
   if (link.href) {
-    return /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
-      NavigationMenuLink,
-      {
-        href: link.href,
-        className: "inline-flex h-auto items-center justify-center px-0 py-0 text-sm font-normal text-foreground/60 transition-colors hover:text-foreground focus:text-foreground",
-        children: link.label
-      }
-    ) }, `desktop-menu-item-${index}`);
+    return /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(NavigationMenuLink, { href: link.href, children: link.label }) }, `desktop-menu-item-${index}`);
   }
   return null;
 };
@@ -50593,11 +50706,12 @@ var NavbarMegaMenu = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses: baseNavWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   const navWrapperClasses = cn(
     "flex w-full items-center justify-between gap-12 py-4",
-    baseNavWrapperClasses,
     layoutVariant === "floatingBar" && "pr-4 pl-8"
   );
   return /* @__PURE__ */ jsx(
@@ -50608,7 +50722,9 @@ var NavbarMegaMenu = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: baseNavWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
         NavigationMenu,
         {
           className: cn(
@@ -50658,14 +50774,7 @@ var NavbarMegaMenu = ({
                     if (!link.href) {
                       return null;
                     }
-                    return /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
-                      NavigationMenuLink,
-                      {
-                        href: link.href,
-                        className: "inline-flex h-auto items-center justify-center px-0 py-0 text-sm font-normal text-foreground/60 transition-colors hover:text-foreground focus:text-foreground",
-                        children: link.label
-                      }
-                    ) }, `menu-link-${index}`);
+                    return /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(NavigationMenuLink, { href: link.href, children: link.label }) }, `menu-link-${index}`);
                   })
                 }
               ),
@@ -50761,7 +50870,7 @@ var NavbarMegaMenu = ({
             )
           ]
         }
-      ) }) })
+      ) }) }) })
     }
   );
 };
@@ -50855,6 +50964,8 @@ var NavbarEnterpriseMega = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
@@ -50869,12 +50980,13 @@ var NavbarEnterpriseMega = ({
         ),
         pattern,
         patternOpacity,
-        children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+        containerClassName: sectionContainerClassName,
+        containerMaxWidth: sectionContainerMaxWidth,
+        children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
           "nav",
           {
             className: cn(
               "flex h-16 items-center justify-between gap-8",
-              navWrapperClasses,
               navClassName
             ),
             children: [
@@ -50925,7 +51037,7 @@ var NavbarEnterpriseMega = ({
               ] })
             ]
           }
-        ) }) })
+        ) }) }) })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -51657,6 +51769,8 @@ var NavbarFeatureGrid = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -51667,111 +51781,119 @@ var NavbarFeatureGrid = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs("nav", { className: cn("flex items-center justify-between", navWrapperClasses, navClassName), children: [
-        renderLogo(),
-        /* @__PURE__ */ jsx(
-          NavigationMenu,
-          {
-            className: cn("hidden lg:block", navigationMenuClassName),
-            children: /* @__PURE__ */ jsxs(NavigationMenuList, { children: [
-              /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
-                /* @__PURE__ */ jsx(NavigationMenuTrigger, { children: "Features" }),
-                /* @__PURE__ */ jsx(NavigationMenuContent, { children: /* @__PURE__ */ jsx("div", { className: "grid w-[600px] grid-cols-2 p-3", children: features?.map((feature, index) => /* @__PURE__ */ jsx(
-                  NavigationMenuLink,
-                  {
-                    href: feature.href,
-                    className: "rounded-md p-3 transition-colors hover:bg-muted/70",
-                    children: /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsx("p", { className: "mb-1 font-semibold text-foreground", children: feature.title }),
-                      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: feature.description })
-                    ] })
-                  },
-                  index
-                )) }) })
-              ] }),
-              /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
-                NavigationMenuLink,
-                {
-                  href: "#",
-                  className: navigationMenuTriggerStyle(),
-                  children: "Products"
-                }
-              ) }),
-              /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
-                NavigationMenuLink,
-                {
-                  href: "#",
-                  className: navigationMenuTriggerStyle(),
-                  children: "Resources"
-                }
-              ) }),
-              /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
-                NavigationMenuLink,
-                {
-                  href: "#",
-                  className: navigationMenuTriggerStyle(),
-                  children: "Contact"
-                }
-              ) })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "hidden items-center gap-4 lg:flex",
-              actionsClassName
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+        "nav",
+        {
+          className: cn("flex items-center justify-between", navClassName),
+          children: [
+            renderLogo(),
+            /* @__PURE__ */ jsx(
+              NavigationMenu,
+              {
+                className: cn("hidden lg:block", navigationMenuClassName),
+                children: /* @__PURE__ */ jsxs(NavigationMenuList, { children: [
+                  /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
+                    /* @__PURE__ */ jsx(NavigationMenuTrigger, { children: "Features" }),
+                    /* @__PURE__ */ jsx(NavigationMenuContent, { children: /* @__PURE__ */ jsx("div", { className: "grid w-[600px] grid-cols-2 p-3", children: features?.map((feature, index) => /* @__PURE__ */ jsx(
+                      NavigationMenuLink,
+                      {
+                        href: feature.href,
+                        className: "rounded-md p-3 transition-colors hover:bg-muted/70",
+                        children: /* @__PURE__ */ jsxs("div", { children: [
+                          /* @__PURE__ */ jsx("p", { className: "mb-1 font-semibold text-foreground", children: feature.title }),
+                          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: feature.description })
+                        ] })
+                      },
+                      index
+                    )) }) })
+                  ] }),
+                  /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
+                    NavigationMenuLink,
+                    {
+                      href: "#",
+                      className: navigationMenuTriggerStyle(),
+                      children: "Products"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
+                    NavigationMenuLink,
+                    {
+                      href: "#",
+                      className: navigationMenuTriggerStyle(),
+                      children: "Resources"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
+                    NavigationMenuLink,
+                    {
+                      href: "#",
+                      className: navigationMenuTriggerStyle(),
+                      children: "Contact"
+                    }
+                  ) })
+                ] })
+              }
             ),
-            children: renderAuthActions()
-          }
-        ),
-        /* @__PURE__ */ jsxs(Sheet, { children: [
-          /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, className: "lg:hidden", children: /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              variant: "outline",
-              size: "icon",
-              asButton: true,
-              onClick: () => {
-              },
-              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 16 })
-            }
-          ) }),
-          /* @__PURE__ */ jsxs(SheetContent, { side: "top", className: "max-h-screen overflow-auto", children: [
-            /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: renderLogo() }) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-4", children: [
-              /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "mt-4 mb-2", children: /* @__PURE__ */ jsxs(AccordionItem, { value: "solutions", className: "border-none", children: [
-                /* @__PURE__ */ jsx(AccordionTrigger, { className: "text-base hover:no-underline", children: "Features" }),
-                /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx("div", { className: "grid md:grid-cols-2", children: features?.map((feature, index) => /* @__PURE__ */ jsx(
-                  Pressable,
-                  {
-                    href: feature.href,
-                    className: "rounded-md p-3 transition-colors hover:bg-muted/70",
-                    children: /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsx("p", { className: "mb-1 font-semibold text-foreground", children: feature.title }),
-                      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: feature.description })
-                    ] })
-                  },
-                  index
-                )) }) })
-              ] }) }),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
-                /* @__PURE__ */ jsx(Pressable, { href: "#", className: "font-medium", children: "Templates" }),
-                /* @__PURE__ */ jsx(Pressable, { href: "#", className: "font-medium", children: "Blog" }),
-                /* @__PURE__ */ jsx(Pressable, { href: "#", className: "font-medium", children: "Pricing" })
-              ] }),
-              /* @__PURE__ */ jsx(
-                "div",
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "hidden items-center gap-4 lg:flex",
+                  actionsClassName
+                ),
+                children: renderAuthActions()
+              }
+            ),
+            /* @__PURE__ */ jsxs(Sheet, { children: [
+              /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, className: "lg:hidden", children: /* @__PURE__ */ jsx(
+                Pressable,
                 {
-                  className: cn("mt-6 flex flex-col gap-4", actionsClassName),
-                  children: renderAuthActions()
+                  variant: "outline",
+                  size: "icon",
+                  asButton: true,
+                  onClick: () => {
+                  },
+                  children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 16 })
                 }
-              )
+              ) }),
+              /* @__PURE__ */ jsxs(SheetContent, { side: "top", className: "max-h-screen overflow-auto", children: [
+                /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: renderLogo() }) }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-4", children: [
+                  /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "mt-4 mb-2", children: /* @__PURE__ */ jsxs(AccordionItem, { value: "solutions", className: "border-none", children: [
+                    /* @__PURE__ */ jsx(AccordionTrigger, { className: "text-base hover:no-underline", children: "Features" }),
+                    /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx("div", { className: "grid md:grid-cols-2", children: features?.map((feature, index) => /* @__PURE__ */ jsx(
+                      Pressable,
+                      {
+                        href: feature.href,
+                        className: "rounded-md p-3 transition-colors hover:bg-muted/70",
+                        children: /* @__PURE__ */ jsxs("div", { children: [
+                          /* @__PURE__ */ jsx("p", { className: "mb-1 font-semibold text-foreground", children: feature.title }),
+                          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: feature.description })
+                        ] })
+                      },
+                      index
+                    )) }) })
+                  ] }) }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+                    /* @__PURE__ */ jsx(Pressable, { href: "#", className: "font-medium", children: "Templates" }),
+                    /* @__PURE__ */ jsx(Pressable, { href: "#", className: "font-medium", children: "Blog" }),
+                    /* @__PURE__ */ jsx(Pressable, { href: "#", className: "font-medium", children: "Pricing" })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn("mt-6 flex flex-col gap-4", actionsClassName),
+                      children: renderAuthActions()
+                    }
+                  )
+                ] })
+              ] })
             ] })
-          ] })
-        ] })
-      ] }) }) })
+          ]
+        }
+      ) }) }) })
     }
   );
 };
@@ -51861,6 +51983,8 @@ var NavbarFloatingPill = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -51871,7 +51995,9 @@ var NavbarFloatingPill = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxs(
         "nav",
         {
           className: cn(
@@ -51879,7 +52005,7 @@ var NavbarFloatingPill = ({
             navWrapperClasses
           ),
           children: [
-            /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
               "div",
               {
                 className: cn(
@@ -51957,7 +52083,7 @@ var NavbarFloatingPill = ({
                   ] })
                 ]
               }
-            ),
+            ) }),
             /* @__PURE__ */ jsx(
               "div",
               {
@@ -52032,7 +52158,7 @@ var NavbarFloatingPill = ({
             )
           ]
         }
-      ) }) })
+      ) })
     }
   );
 };
@@ -52348,6 +52474,8 @@ var NavbarPlatformResources = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -52358,156 +52486,164 @@ var NavbarPlatformResources = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(NavigationMenu, { className: cn("min-w-full", navigationMenuClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-12 py-4", children: [
-          renderLogo(),
-          /* @__PURE__ */ jsx(
-            NavigationMenuList,
-            {
-              className: cn("hidden lg:flex", navigationMenuListClassName),
-              children: menuLinks?.map((link, index) => {
-                if (hasDropdownItems(link)) {
-                  return /* @__PURE__ */ jsxs(
-                    NavigationMenuItem,
-                    {
-                      children: [
-                        /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-0 py-0 font-normal text-foreground/60 hover:bg-transparent hover:text-foreground focus:bg-transparent focus:text-foreground data-[state=open]:bg-transparent data-[state=open]:text-foreground", children: link.label }),
-                        renderDropdownContent3(link)
-                      ]
-                    },
-                    `${typeof link.label === "string" ? link.label : "menu"}-${index}`
-                  );
-                }
-                if (!link.href) {
-                  return null;
-                }
-                return /* @__PURE__ */ jsx(
-                  NavigationMenuItem,
-                  {
-                    children: /* @__PURE__ */ jsx(
-                      NavigationMenuLink,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+        NavigationMenu,
+        {
+          className: cn("min-w-full", navigationMenuClassName),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-12 py-4", children: [
+              renderLogo(),
+              /* @__PURE__ */ jsx(
+                NavigationMenuList,
+                {
+                  className: cn("hidden lg:flex", navigationMenuListClassName),
+                  children: menuLinks?.map((link, index) => {
+                    if (hasDropdownItems(link)) {
+                      return /* @__PURE__ */ jsxs(
+                        NavigationMenuItem,
+                        {
+                          children: [
+                            /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-0 py-0 font-normal text-foreground/60 hover:bg-transparent hover:text-foreground focus:bg-transparent focus:text-foreground data-[state=open]:bg-transparent data-[state=open]:text-foreground", children: link.label }),
+                            renderDropdownContent3(link)
+                          ]
+                        },
+                        `${typeof link.label === "string" ? link.label : "menu"}-${index}`
+                      );
+                    }
+                    if (!link.href) {
+                      return null;
+                    }
+                    return /* @__PURE__ */ jsx(
+                      NavigationMenuItem,
                       {
-                        href: link.href,
-                        className: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-accent-foreground",
-                        children: link.label
-                      }
-                    )
-                  },
-                  `${typeof link.label === "string" ? link.label : "menu"}-${index}`
-                );
-              })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "hidden items-center gap-4 lg:flex",
-                actionsClassName
-              ),
-              children: renderActions()
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 lg:hidden", children: /* @__PURE__ */ jsxs(
-            Pressable,
-            {
-              variant: "outline",
-              size: "icon",
-              asButton: true,
-              "aria-label": "Main Menu",
-              onClick: () => setOpen(!open),
-              children: [
-                !open && /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 16 }),
-                open && /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 16 })
-              ]
-            }
-          ) })
-        ] }),
-        open && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "absolute inset-0 top-[72px] flex h-[calc(100vh-72px)] w-full flex-col overflow-scroll border-t border-border bg-background lg:hidden",
-              mobileMenuClassName
-            ),
-            children: [
-              /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: menuLinks?.map((link, index) => {
-                if (hasDropdownItems(link)) {
-                  return /* @__PURE__ */ jsxs(
-                    AccordionItem,
-                    {
-                      value: `menu-${index}`,
-                      className: "border-b-2 border-dashed",
-                      children: [
-                        /* @__PURE__ */ jsx(AccordionTrigger, { className: "px-2 py-4 text-left hover:no-underline", children: link.label }),
-                        /* @__PURE__ */ jsx(AccordionContent, { className: "px-2 pb-4", children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxs(
-                          Pressable,
+                        children: /* @__PURE__ */ jsx(
+                          NavigationMenuLink,
                           {
-                            href: getLinkUrl(item),
-                            className: "group flex items-start gap-4 rounded-lg p-2 hover:bg-muted",
-                            children: [
-                              item.image && /* @__PURE__ */ jsx("div", { className: "h-10 w-10 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
-                                Img,
-                                {
-                                  src: item.image,
-                                  alt: typeof item.label === "string" ? item.label : "Menu item",
-                                  className: "h-full w-full object-cover object-center",
-                                  optixFlowConfig
-                                }
-                              ) }),
-                              !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(
-                                DynamicIcon,
-                                {
-                                  name: item.iconName,
-                                  size: 16
-                                }
-                              ) : null }),
-                              /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-                                /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: item.label }),
-                                item.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: item.description })
-                              ] })
-                            ]
-                          },
-                          `${typeof item.label === "string" ? item.label : "item"}-${itemIndex}`
-                        )) }) })
-                      ]
-                    },
-                    `${typeof link.label === "string" ? link.label : "menu"}-${index}`
-                  );
-                }
-                if (!link.href) {
-                  return null;
+                            href: link.href,
+                            className: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-accent-foreground",
+                            children: link.label
+                          }
+                        )
+                      },
+                      `${typeof link.label === "string" ? link.label : "menu"}-${index}`
+                    );
+                  })
                 }
-                return /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "border-b-2 border-dashed",
-                    children: /* @__PURE__ */ jsx(
-                      Pressable,
-                      {
-                        href: link.href,
-                        className: "flex w-full items-center px-2 py-4 text-left text-sm font-medium",
-                        children: link.label
-                      }
-                    )
-                  },
-                  `${typeof link.label === "string" ? link.label : "menu"}-${index}`
-                );
-              }) }),
+              ),
               /* @__PURE__ */ jsx(
                 "div",
                 {
                   className: cn(
-                    "mx-8 mt-auto flex flex-col gap-4 py-12",
+                    "hidden items-center gap-4 lg:flex",
                     actionsClassName
                   ),
                   children: renderActions()
                 }
-              )
-            ]
-          }
-        )
-      ] }) }) })
+              ),
+              /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 lg:hidden", children: /* @__PURE__ */ jsxs(
+                Pressable,
+                {
+                  variant: "outline",
+                  size: "icon",
+                  asButton: true,
+                  "aria-label": "Main Menu",
+                  onClick: () => setOpen(!open),
+                  children: [
+                    !open && /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 16 }),
+                    open && /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 16 })
+                  ]
+                }
+              ) })
+            ] }),
+            open && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "absolute inset-0 top-[72px] flex h-[calc(100vh-72px)] w-full flex-col overflow-scroll border-t border-border bg-background lg:hidden",
+                  mobileMenuClassName
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: menuLinks?.map((link, index) => {
+                    if (hasDropdownItems(link)) {
+                      return /* @__PURE__ */ jsxs(
+                        AccordionItem,
+                        {
+                          value: `menu-${index}`,
+                          className: "border-b-2 border-dashed",
+                          children: [
+                            /* @__PURE__ */ jsx(AccordionTrigger, { className: "px-2 py-4 text-left hover:no-underline", children: link.label }),
+                            /* @__PURE__ */ jsx(AccordionContent, { className: "px-2 pb-4", children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxs(
+                              Pressable,
+                              {
+                                href: getLinkUrl(item),
+                                className: "group flex items-start gap-4 rounded-lg p-2 hover:bg-muted",
+                                children: [
+                                  item.image && /* @__PURE__ */ jsx("div", { className: "h-10 w-10 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
+                                    Img,
+                                    {
+                                      src: item.image,
+                                      alt: typeof item.label === "string" ? item.label : "Menu item",
+                                      className: "h-full w-full object-cover object-center",
+                                      optixFlowConfig
+                                    }
+                                  ) }),
+                                  !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(
+                                    DynamicIcon,
+                                    {
+                                      name: item.iconName,
+                                      size: 16
+                                    }
+                                  ) : null }),
+                                  /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                                    /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: item.label }),
+                                    item.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: item.description })
+                                  ] })
+                                ]
+                              },
+                              `${typeof item.label === "string" ? item.label : "item"}-${itemIndex}`
+                            )) }) })
+                          ]
+                        },
+                        `${typeof link.label === "string" ? link.label : "menu"}-${index}`
+                      );
+                    }
+                    if (!link.href) {
+                      return null;
+                    }
+                    return /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "border-b-2 border-dashed",
+                        children: /* @__PURE__ */ jsx(
+                          Pressable,
+                          {
+                            href: link.href,
+                            className: "flex w-full items-center px-2 py-4 text-left text-sm font-medium",
+                            children: link.label
+                          }
+                        )
+                      },
+                      `${typeof link.label === "string" ? link.label : "menu"}-${index}`
+                    );
+                  }) }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mx-8 mt-auto flex flex-col gap-4 py-12",
+                        actionsClassName
+                      ),
+                      children: renderActions()
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ) }) }) })
     }
   );
 };
@@ -52646,6 +52782,8 @@ var NavbarImagePreview = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxs(
@@ -52656,6 +52794,8 @@ var NavbarImagePreview = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
       children: [
         /* @__PURE__ */ jsx(
           "div",
@@ -52665,7 +52805,7 @@ var NavbarImagePreview = ({
               containerWrapperClasses
             ),
             ref: navRef,
-            children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(
+            children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
               "div",
               {
                 className: cn(
@@ -52699,7 +52839,7 @@ var NavbarImagePreview = ({
                   ] })
                 ]
               }
-            ) })
+            ) }) })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -53028,6 +53168,8 @@ var NavbarDarkIcons = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxs(
@@ -53038,13 +53180,14 @@ var NavbarDarkIcons = ({
       className: cn("dark pointer-events-auto relative z-999", sectionClasses),
       pattern,
       patternOpacity,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
       children: [
-        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
           "nav",
           {
             className: cn(
               "flex h-16 items-center justify-between",
-              navWrapperClasses,
               navClassName
             ),
             children: [
@@ -53087,7 +53230,7 @@ var NavbarDarkIcons = ({
               ] })
             ]
           }
-        ) }) }),
+        ) }) }) }),
         /* @__PURE__ */ jsx(
           MobileNavigationMenu3,
           {
@@ -53384,11 +53527,12 @@ var NavbarAnimatedPreview = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses: baseNavWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   const navWrapperClasses = cn(
     "h-20 max-w-full after:absolute after:inset-0 after:z-998 after:block after:size-full after:bg-background after:content-[''] [&>div:last-child>div]:mt-0 [&>div:last-child>div]:animate-none [&>div:last-child>div]:rounded-none [&>div:last-child>div]:border-0 [&>div:last-child>div]:shadow-[0px_-1px_0px_0px_rgba(0,0,0,0.05),0px_0px_0px_1px_rgba(17,26,37,0.05),0px_2px_5px_0px_rgba(16,25,36,0.1),0px_5px_20px_0px_rgba(16,25,36,0.1)]!",
-    baseNavWrapperClasses,
     navigationMenuClassName
   );
   return /* @__PURE__ */ jsx(
@@ -53402,7 +53546,9 @@ var NavbarAnimatedPreview = ({
       ),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: innerContainerClasses, children: [
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: baseNavWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: innerContainerClasses, children: [
         /* @__PURE__ */ jsx(NavigationMenu, { className: navWrapperClasses, children: /* @__PURE__ */ jsxs(
           "div",
           {
@@ -53452,7 +53598,7 @@ var NavbarAnimatedPreview = ({
             actionsSlot
           }
         )
-      ] }) })
+      ] }) }) })
     }
   );
 };
@@ -53941,6 +54087,8 @@ var NavbarMultiColumnGroups = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxs(
@@ -53951,8 +54099,10 @@ var NavbarMultiColumnGroups = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
       children: [
-        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
@@ -54007,7 +54157,7 @@ var NavbarMultiColumnGroups = ({
               ) })
             ]
           }
-        ) }) }),
+        ) }) }) }),
         /* @__PURE__ */ jsx(
           MobileNavigationMenu5,
           {
@@ -54249,6 +54399,8 @@ var NavbarSidebarMobile = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -54259,10 +54411,15 @@ var NavbarSidebarMobile = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
         "nav",
         {
-          className: cn("flex items-center justify-between py-4", navClassName),
+          className: cn(
+            "flex items-center justify-between py-4",
+            navClassName
+          ),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-8", children: [
               renderLogo(),
@@ -54384,7 +54541,7 @@ var NavbarSidebarMobile = ({
             ] })
           ]
         }
-      ) }) })
+      ) }) }) })
     }
   );
 };
@@ -54556,6 +54713,8 @@ var NavbarTransparentOverlay = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxs(
@@ -54566,16 +54725,19 @@ var NavbarTransparentOverlay = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
       children: [
-        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx(
           "nav",
           {
             className: cn(
               "fixed top-0 left-0 z-50 w-full transition-all duration-300",
               isScrolled ? "bg-background/95 shadow-sm backdrop-blur-sm" : "bg-transparent",
+              navWrapperClasses,
               navClassName
             ),
-            children: /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between", children: [
+            children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between", children: [
               renderLogo(),
               /* @__PURE__ */ jsx(
                 NavigationMenu,
@@ -54633,9 +54795,9 @@ var NavbarTransparentOverlay = ({
                   ]
                 }
               )
-            ] })
+            ] }) })
           }
-        ) }) }),
+        ) }),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -54756,6 +54918,8 @@ var NavbarEducationPlatform = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxs(
@@ -54769,11 +54933,16 @@ var NavbarEducationPlatform = ({
       ),
       pattern,
       patternOpacity,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
       children: [
-        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
           "nav",
           {
-            className: cn("flex items-center justify-between py-4", navWrapperClasses, navClassName),
+            className: cn(
+              "flex items-center justify-between py-4",
+              navClassName
+            ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-9", children: [
                 renderLogo(),
@@ -54964,7 +55133,7 @@ var NavbarEducationPlatform = ({
               )
             ]
           }
-        ) }) }),
+        ) }) }) }),
         isOpen && /* @__PURE__ */ jsx(
           "div",
           {
@@ -55260,6 +55429,8 @@ var NavbarStickyCompact = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -55274,7 +55445,9 @@ var NavbarStickyCompact = ({
       ),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
         "nav",
         {
           className: cn(
@@ -55330,7 +55503,7 @@ var NavbarStickyCompact = ({
             ] })
           ]
         }
-      ) }) })
+      ) }) }) })
     }
   );
 };
@@ -55456,6 +55629,8 @@ var NavbarSearchFocused = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -55466,10 +55641,15 @@ var NavbarSearchFocused = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
         "nav",
         {
-          className: cn("flex items-center gap-4 py-3 lg:gap-8", navClassName),
+          className: cn(
+            "flex items-center gap-4 py-3 lg:gap-8",
+            navClassName
+          ),
           children: [
             renderLogo(),
             /* @__PURE__ */ jsx(
@@ -55534,7 +55714,7 @@ var NavbarSearchFocused = ({
             ] })
           ]
         }
-      ) }) })
+      ) }) }) })
     }
   );
 };
@@ -55695,7 +55875,10 @@ var NavbarSimpleLinks = ({
       {
         "data-nav-item": item.name,
         onClick: () => setActiveItem(item.name),
-        className: `relative cursor-pointer rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-muted ${activeItem === item.name ? "text-foreground" : "text-muted-foreground hover:text-foreground"}`,
+        className: cn(
+          "cursor-pointer font-medium",
+          activeItem === item.name && "text-foreground"
+        ),
         children: item.name
       }
     ) }) }, item.name));
@@ -55733,6 +55916,8 @@ var NavbarSimpleLinks = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -55743,56 +55928,67 @@ var NavbarSimpleLinks = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs("nav", { className: cn("flex items-center justify-between", navWrapperClasses, navClassName), children: [
-        renderLogo(),
-        /* @__PURE__ */ jsx(
-          NavigationMenu,
-          {
-            className: cn("hidden lg:block", navigationMenuClassName),
-            children: /* @__PURE__ */ jsxs(
-              NavigationMenuList,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+        "nav",
+        {
+          className: cn(
+            "flex items-center justify-between",
+            navClassName
+          ),
+          children: [
+            renderLogo(),
+            /* @__PURE__ */ jsx(
+              NavigationMenu,
+              {
+                className: cn("hidden lg:block", navigationMenuClassName),
+                children: /* @__PURE__ */ jsxs(
+                  NavigationMenuList,
+                  {
+                    ref: menuRef,
+                    className: cn(
+                      "flex items-center gap-6 rounded-4xl px-8 py-3",
+                      menuListClassName
+                    ),
+                    children: [
+                      renderNavItems(),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          ref: indicatorRef,
+                          className: "absolute bottom-2 flex h-1 items-center justify-center px-2 transition-all duration-300",
+                          children: /* @__PURE__ */ jsx("div", { className: "h-0.5 w-full rounded-t-none bg-foreground transition-all duration-300" })
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              MobileNav,
+              {
+                navItems: navItems ?? [],
+                activeItem,
+                setActiveItem,
+                actions,
+                actionsSlot
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
               {
-                ref: menuRef,
                 className: cn(
-                  "flex items-center gap-6 rounded-4xl px-8 py-3",
-                  menuListClassName
+                  "hidden items-center gap-2 lg:flex",
+                  actionsClassName
                 ),
-                children: [
-                  renderNavItems(),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      ref: indicatorRef,
-                      className: "absolute bottom-2 flex h-1 items-center justify-center px-2 transition-all duration-300",
-                      children: /* @__PURE__ */ jsx("div", { className: "h-0.5 w-full rounded-t-none bg-foreground transition-all duration-300" })
-                    }
-                  )
-                ]
+                children: renderActions()
               }
             )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          MobileNav,
-          {
-            navItems: navItems ?? [],
-            activeItem,
-            setActiveItem,
-            actions,
-            actionsSlot
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "hidden items-center gap-2 lg:flex",
-              actionsClassName
-            ),
-            children: renderActions()
-          }
-        )
-      ] }) }) })
+          ]
+        }
+      ) }) }) })
     }
   );
 };
@@ -55909,6 +56105,8 @@ var NavbarSplitCta = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -55919,10 +56117,15 @@ var NavbarSplitCta = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
         "nav",
         {
-          className: cn("flex items-center justify-between py-4", navClassName),
+          className: cn(
+            "flex items-center justify-between py-4",
+            navClassName
+          ),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-8", children: [
               renderLogo(),
@@ -56032,7 +56235,7 @@ var NavbarSplitCta = ({
             ] })
           ]
         }
-      ) }) })
+      ) }) }) })
     }
   );
 };
@@ -56124,6 +56327,8 @@ var NavbarIconLinks = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -56134,10 +56339,15 @@ var NavbarIconLinks = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
         "nav",
         {
-          className: cn("flex items-center justify-between py-3", navWrapperClasses, navClassName),
+          className: cn(
+            "flex items-center justify-between py-3",
+            navClassName
+          ),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
               renderLogo(),
@@ -56231,7 +56441,7 @@ var NavbarIconLinks = ({
             ] })
           ]
         }
-      ) }) })
+      ) }) }) })
     }
   );
 };
@@ -56419,6 +56629,8 @@ var NavbarTabbedSections = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -56429,10 +56641,15 @@ var NavbarTabbedSections = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
         "nav",
         {
-          className: cn("flex items-center justify-between py-4", navClassName),
+          className: cn(
+            "flex items-center justify-between py-4",
+            navClassName
+          ),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-8", children: [
               renderLogo(),
@@ -56482,7 +56699,7 @@ var NavbarTabbedSections = ({
             ] })
           ]
         }
-      ) }) })
+      ) }) }) })
     }
   );
 };
@@ -56575,6 +56792,8 @@ var NavbarFullscreenMenu = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -56585,13 +56804,14 @@ var NavbarFullscreenMenu = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: innerContainerClasses, children: [
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: innerContainerClasses, children: [
         /* @__PURE__ */ jsxs(
           "nav",
           {
             className: cn(
               "flex items-center justify-between px-6 py-6",
-              navWrapperClasses,
               headerClassName
             ),
             children: [
@@ -56647,7 +56867,7 @@ var NavbarFullscreenMenu = ({
             ] })
           }
         )
-      ] }) })
+      ] }) }) })
     }
   );
 };
@@ -83781,7 +84001,7 @@ function StatsSimpleGrid({
   statValueClassName,
   statLabelClassName
 }) {
-  const renderActions = () => {
+  const actionsContent = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
@@ -83801,15 +84021,17 @@ function StatsSimpleGrid({
         index
       );
     });
-  };
-  const renderStats = () => {
+  }, [actionsSlot, actions]);
+  const statsContent = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: cn("w-full", statItemClassName), children: [
-      /* @__PURE__ */ jsx("div", { className: cn("mb-2 text-4xl font-semibold sm:text-4xl lg:text-5xl", statValueClassName), children: stat.value }),
-      /* @__PURE__ */ jsx("div", { className: cn("text-base leading-6 text-muted-foreground lg:text-lg", statLabelClassName), children: stat.label })
+      stat.value && /* @__PURE__ */ jsx("div", { className: cn("mb-2 text-4xl font-semibold sm:text-4xl lg:text-5xl", statValueClassName), children: stat.value }),
+      stat.label && /* @__PURE__ */ jsx("div", { className: cn("text-base leading-6 text-muted-foreground lg:text-lg", statLabelClassName), children: stat.label })
     ] }, index));
-  };
+  }, [statsSlot, stats, statItemClassName, statValueClassName, statLabelClassName]);
+  const hasHeaderContent = !!(heading || actionsSlot || actions && actions.length > 0);
+  const hasStatsContent = !!(statsSlot || stats && stats.length > 0);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -83820,11 +84042,11 @@ function StatsSimpleGrid({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-start text-left", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 w-full md:mb-16", contentClassName), children: [
+        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 w-full md:mb-16", contentClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-8 w-full max-w-[24rem] text-3xl font-bold text-pretty sm:text-4xl md:max-w-[30rem] lg:max-w-[37rem] lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex flex-col justify-start gap-2 sm:flex-row", actionsClassName), children: renderActions() })
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex flex-col justify-start gap-2 sm:flex-row", actionsClassName), children: actionsContent })
         ] }),
-        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("grid w-full grid-cols-2 gap-12 sm:w-fit sm:grid-cols-4 lg:gap-16", statsClassName), children: renderStats() })
+        hasStatsContent && /* @__PURE__ */ jsx("div", { className: cn("grid w-full grid-cols-2 gap-12 sm:w-fit sm:grid-cols-4 lg:gap-16", statsClassName), children: statsContent })
       ] })
     }
   );
@@ -83851,7 +84073,7 @@ function StatsIconCards({
   statGrowthClassName,
   statIconClassName
 }) {
-  const renderIcon = (stat) => {
+  const renderIcon = useCallback((stat) => {
     if (stat.iconSlot) return stat.iconSlot;
     if (!stat.icon) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("flex h-12 w-12 items-center justify-center rounded-full bg-primary/10", statIconClassName), children: /* @__PURE__ */ jsx(
@@ -83862,8 +84084,8 @@ function StatsIconCards({
         className: "text-primary"
       }
     ) });
-  };
-  const renderStats = () => {
+  }, [statIconClassName]);
+  const statsContent = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsx(
@@ -83872,9 +84094,9 @@ function StatsIconCards({
         className: cn("relative overflow-hidden rounded-xl border bg-background p-6", stat.className, statCardClassName),
         children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: cn("font-medium text-muted-foreground", statLabelClassName), children: stat.label }),
-            /* @__PURE__ */ jsx("h3", { className: cn("mt-4 text-4xl font-bold", statValueClassName), children: stat.value }),
-            /* @__PURE__ */ jsxs(
+            stat.label && /* @__PURE__ */ jsx("p", { className: cn("font-medium text-muted-foreground", statLabelClassName), children: stat.label }),
+            stat.value && /* @__PURE__ */ jsx("h3", { className: cn("mt-4 text-4xl font-bold", statValueClassName), children: stat.value }),
+            stat.growth && /* @__PURE__ */ jsxs(
               "p",
               {
                 className: cn(
@@ -83901,7 +84123,8 @@ function StatsIconCards({
       },
       index
     ));
-  };
+  }, [statsSlot, stats, statCardClassName, statLabelClassName, statValueClassName, statGrowthClassName, renderIcon]);
+  const hasHeaderContent = !!(heading || description);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -83912,11 +84135,11 @@ function StatsIconCards({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-5xl", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-10 text-center", contentClassName), children: [
+        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-10 text-center", contentClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-3 text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-3", descriptionClassName), children: description }))
         ] }),
-        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 sm:grid-cols-2 lg:grid-cols-4", statsClassName), children: renderStats() })
+        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 sm:grid-cols-2 lg:grid-cols-4", statsClassName), children: statsContent })
       ] })
     }
   );
@@ -83928,7 +84151,7 @@ function StatsTimelineTabs({
   description,
   periods,
   tabsSlot,
-  defaultPeriod = "monthly",
+  defaultPeriod,
   background = "white",
   spacing = "lg",
   pattern,
@@ -83945,15 +84168,16 @@ function StatsTimelineTabs({
   statsGridClassName,
   statCardClassName
 }) {
-  const renderBadge = () => {
+  const effectiveDefaultPeriod = defaultPeriod || (periods && periods.length > 0 ? periods[0].id : "");
+  const badgeContent = useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsx(Badge, { className: cn("mb-2", badgeClassName), children: badge });
-  };
-  const renderTabs = () => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const tabsContent = useMemo(() => {
     if (tabsSlot) return tabsSlot;
     if (!periods || periods.length === 0) return null;
-    return /* @__PURE__ */ jsxs(Tabs, { defaultValue: defaultPeriod, className: cn("mt-8 w-full", tabsClassName), children: [
+    return /* @__PURE__ */ jsxs(Tabs, { defaultValue: effectiveDefaultPeriod, className: cn("mt-8 w-full", tabsClassName), children: [
       /* @__PURE__ */ jsx("div", { className: "mb-8 flex justify-center", children: /* @__PURE__ */ jsx(TabsList, { className: tabsListClassName, children: periods.map((period) => /* @__PURE__ */ jsx(TabsTrigger, { value: period.id, children: period.label }, period.id)) }) }),
       periods.map((period) => /* @__PURE__ */ jsx(TabsContent, { value: period.id, className: cn("mt-4", period.className), children: /* @__PURE__ */ jsx("div", { className: cn("grid gap-6 md:grid-cols-2 lg:grid-cols-4", statsGridClassName), children: period.stats.map((stat, index) => {
         const isPositive = stat.trend === "up" && !stat.inversePositive || stat.trend === "down" && stat.inversePositive;
@@ -83967,7 +84191,7 @@ function StatsTimelineTabs({
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
-                /* @__PURE__ */ jsx("p", { className: "text-lg font-medium", children: stat.label }),
+                stat.label && /* @__PURE__ */ jsx("p", { className: "text-lg font-medium", children: stat.label }),
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
                   /* @__PURE__ */ jsx(
                     DynamicIcon,
@@ -83980,7 +84204,7 @@ function StatsTimelineTabs({
                   /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: period.label })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx("h3", { className: "mt-4 text-3xl font-bold", children: stat.value }),
+              stat.value && /* @__PURE__ */ jsx("h3", { className: "mt-4 text-3xl font-bold", children: stat.value }),
               /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center", children: [
                 /* @__PURE__ */ jsxs(
                   "div",
@@ -84003,7 +84227,7 @@ function StatsTimelineTabs({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxs("p", { className: "ml-2 text-sm text-muted-foreground", children: [
+                stat.previousLabel && /* @__PURE__ */ jsxs("p", { className: "ml-2 text-sm text-muted-foreground", children: [
                   "vs ",
                   stat.previousLabel
                 ] })
@@ -84014,7 +84238,9 @@ function StatsTimelineTabs({
         );
       }) }) }, period.id))
     ] });
-  };
+  }, [tabsSlot, periods, effectiveDefaultPeriod, tabsClassName, tabsListClassName, statsGridClassName, statCardClassName]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
+  const hasTabsContent = !!(tabsSlot || periods && periods.length > 0);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -84025,21 +84251,21 @@ function StatsTimelineTabs({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-6xl", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("space-y-2 text-center", headerClassName), children: [
-          renderBadge(),
+        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("space-y-2 text-center", headerClassName), children: [
+          badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
         ] }),
-        renderTabs()
+        hasTabsContent && tabsContent
       ] }) })
     }
   );
 }
 function StatsPrimarySecondary({
-  primaryValue = "92%",
-  primaryBadge = "+7% this month",
+  primaryValue,
+  primaryBadge,
   primaryBadgeSlot,
-  primaryDescription = "of U.S. adults have bought from businesses using our platform",
+  primaryDescription,
   primarySlot,
   secondaryStats,
   secondaryStatsSlot,
@@ -84058,16 +84284,17 @@ function StatsPrimarySecondary({
   secondaryValueClassName,
   secondaryLabelClassName
 }) {
-  const renderPrimaryBadge = () => {
+  const renderPrimaryBadge = useCallback(() => {
     if (primaryBadgeSlot) return primaryBadgeSlot;
     if (!primaryBadge) return null;
     return /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: cn("ml-2 gap-1", primaryBadgeClassName), children: [
       /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/badge-check", size: 16, className: "shrink-0" }),
       primaryBadge
     ] });
-  };
-  const renderPrimary = () => {
+  }, [primaryBadgeSlot, primaryBadge, primaryBadgeClassName]);
+  const primaryContent = useMemo(() => {
     if (primarySlot) return primarySlot;
+    if (!primaryValue) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("lg:col-span-4", primaryClassName), children: /* @__PURE__ */ jsxs("div", { className: "lg:pe-6 xl:pe-12", children: [
       /* @__PURE__ */ jsxs("p", { className: cn("text-6xl font-bold leading-10", primaryValueClassName), children: [
         primaryValue,
@@ -84075,15 +84302,17 @@ function StatsPrimarySecondary({
       ] }),
       primaryDescription && (typeof primaryDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-2 text-muted-foreground sm:mt-3", primaryDescriptionClassName), children: primaryDescription }) : /* @__PURE__ */ jsx("div", { className: cn("mt-2 sm:mt-3", primaryDescriptionClassName), children: primaryDescription }))
     ] }) });
-  };
-  const renderSecondaryStats = () => {
+  }, [primarySlot, primaryValue, primaryClassName, primaryValueClassName, primaryDescription, primaryDescriptionClassName, renderPrimaryBadge]);
+  const secondaryStatsContent = useMemo(() => {
     if (secondaryStatsSlot) return secondaryStatsSlot;
     if (!secondaryStats || secondaryStats.length === 0) return null;
     return secondaryStats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: stat.className, children: [
-      /* @__PURE__ */ jsx("p", { className: cn("text-3xl font-semibold", secondaryValueClassName), children: stat.value }),
-      /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-muted-foreground", secondaryLabelClassName), children: stat.label })
+      stat.value && /* @__PURE__ */ jsx("p", { className: cn("text-3xl font-semibold", secondaryValueClassName), children: stat.value }),
+      stat.label && /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-muted-foreground", secondaryLabelClassName), children: stat.label })
     ] }, index));
-  };
+  }, [secondaryStatsSlot, secondaryStats, secondaryValueClassName, secondaryLabelClassName]);
+  const hasPrimaryContent = !!(primarySlot || primaryValue);
+  const hasSecondaryContent = !!(secondaryStatsSlot || secondaryStats && secondaryStats.length > 0);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -84094,8 +84323,8 @@ function StatsPrimarySecondary({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxs("div", { className: cn("grid items-center gap-6 lg:grid-cols-12 lg:gap-12", containerClassName), children: [
-        renderPrimary(),
-        /* @__PURE__ */ jsx("div", { className: cn("relative lg:col-span-8 lg:before:absolute lg:before:-start-12 lg:before:top-0 lg:before:h-full lg:before:w-px lg:before:bg-border", secondaryClassName), children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-6 sm:gap-8 md:grid-cols-4 lg:grid-cols-3", children: renderSecondaryStats() }) })
+        hasPrimaryContent && primaryContent,
+        hasSecondaryContent && /* @__PURE__ */ jsx("div", { className: cn("relative lg:before:absolute lg:before:-start-12 lg:before:top-0 lg:before:h-full lg:before:w-px lg:before:bg-border", hasPrimaryContent ? "lg:col-span-8" : "lg:col-span-12", secondaryClassName), children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-6 sm:gap-8 md:grid-cols-4 lg:grid-cols-3", children: secondaryStatsContent }) })
       ] })
     }
   );
@@ -84109,9 +84338,9 @@ function StatsGrowthTimeline({
   milestonesSlot,
   currentStats,
   currentStatsSlot,
-  currentStatsHeading = "Where We Are Today",
-  futureHeading = "The Future Is Even Brighter",
-  futureDescription = "We're just getting started. Our roadmap includes expansion to new markets, enhanced product offerings, and continued innovation to serve our growing customer base.",
+  currentStatsHeading,
+  futureHeading,
+  futureDescription,
   futureSlot,
   actions,
   actionsSlot,
@@ -84131,12 +84360,12 @@ function StatsGrowthTimeline({
   currentStatsClassName,
   futureClassName
 }) {
-  const renderBadge = () => {
+  const badgeContent = useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsx(Badge, { className: cn("mb-4", badgeClassName), children: badge });
-  };
-  const renderMilestoneIcon = (milestone) => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const renderMilestoneIcon = useCallback((milestone) => {
     if (milestone.iconSlot) return milestone.iconSlot;
     if (!milestone.icon) return null;
     return /* @__PURE__ */ jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(
@@ -84147,8 +84376,8 @@ function StatsGrowthTimeline({
         className: "text-primary"
       }
     ) });
-  };
-  const renderMilestones = () => {
+  }, []);
+  const milestonesContent = useMemo(() => {
     if (milestonesSlot) return milestonesSlot;
     if (!milestones || milestones.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("relative mt-24", timelineClassName), children: [
@@ -84164,14 +84393,14 @@ function StatsGrowthTimeline({
           ),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "ml-6 flex flex-col items-start md:ml-0 md:w-1/2 md:px-8", children: [
-              /* @__PURE__ */ jsx("div", { className: "mb-4 inline-flex h-9 w-20 items-center justify-center rounded-full bg-muted text-sm font-semibold", children: milestone.year }),
+              milestone.year && /* @__PURE__ */ jsx("div", { className: "mb-4 inline-flex h-9 w-20 items-center justify-center rounded-full bg-muted text-sm font-semibold", children: milestone.year }),
               milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-bold", children: milestone.title }) : /* @__PURE__ */ jsx("div", { className: "mb-2", children: milestone.title })),
               milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: milestone.description })),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 rounded-lg border bg-background p-4 shadow-sm", children: [
+              milestone.metric && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 rounded-lg border bg-background p-4 shadow-sm", children: [
                 renderMilestoneIcon(milestone),
                 /* @__PURE__ */ jsxs("div", { children: [
                   /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold text-primary", children: milestone.metric.value }),
-                  /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: milestone.metric.label })
+                  milestone.metric.label && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: milestone.metric.label })
                 ] })
               ] })
             ] }),
@@ -84181,19 +84410,19 @@ function StatsGrowthTimeline({
         milestone.id
       )) })
     ] });
-  };
-  const renderCurrentStats = () => {
+  }, [milestonesSlot, milestones, timelineClassName, milestoneClassName, renderMilestoneIcon]);
+  const currentStatsContent = useMemo(() => {
     if (currentStatsSlot) return currentStatsSlot;
     if (!currentStats || currentStats.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("mt-24 rounded-lg bg-muted p-8", currentStatsClassName), children: [
       currentStatsHeading && (typeof currentStatsHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-6 text-center text-2xl font-bold", children: currentStatsHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-6 text-center", children: currentStatsHeading })),
       /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-8 md:grid-cols-4", children: currentStats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: cn("text-center", stat.className), children: [
         /* @__PURE__ */ jsx("div", { className: "mb-2 text-3xl font-bold text-primary md:text-4xl", children: stat.value }),
-        /* @__PURE__ */ jsx("p", { className: "font-medium text-muted-foreground", children: stat.label })
+        stat.label && /* @__PURE__ */ jsx("p", { className: "font-medium text-muted-foreground", children: stat.label })
       ] }, index)) })
     ] });
-  };
-  const renderActions = () => {
+  }, [currentStatsSlot, currentStats, currentStatsHeading, currentStatsClassName]);
+  const actionsContent = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => /* @__PURE__ */ jsxs(
@@ -84210,16 +84439,17 @@ function StatsGrowthTimeline({
       },
       index
     ));
-  };
-  const renderFuture = () => {
+  }, [actionsSlot, actions]);
+  const futureContent = useMemo(() => {
     if (futureSlot) return futureSlot;
     if (!futureHeading && !futureDescription && (!actions || actions.length === 0)) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("mt-16 text-center", futureClassName), children: [
       futureHeading && (typeof futureHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-bold", children: futureHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: futureHeading })),
       futureDescription && (typeof futureDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mx-auto mb-8 max-w-2xl text-muted-foreground", children: futureDescription }) : /* @__PURE__ */ jsx("div", { className: "mx-auto mb-8 max-w-2xl", children: futureDescription })),
-      renderActions()
+      actionsContent
     ] });
-  };
+  }, [futureSlot, futureHeading, futureDescription, futureClassName, actionsContent, actions]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -84230,14 +84460,14 @@ function StatsGrowthTimeline({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-5xl", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
-          renderBadge(),
+        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
+          badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-3xl text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
         ] }),
-        renderMilestones(),
-        renderCurrentStats(),
-        renderFuture()
+        milestonesContent,
+        currentStatsContent,
+        futureContent
       ] })
     }
   );
@@ -84249,12 +84479,16 @@ function StatsImpactGrid({
   description,
   stats,
   statsSlot,
-  comparisonHeading = "How Does This Compare?",
-  comparisonDescription = "Our platform delivers results that are 4x better than industry averages across all key performance indicators.",
-  industryAverage = "24%",
-  platformValue = "89%",
+  comparisonHeading,
+  comparisonDescription,
+  baselineValue,
+  targetValue,
+  baselineLabel,
+  targetLabel,
+  baselinePercent,
+  targetPercent,
   comparisonSlot,
-  ctaHeading = "Ready to See These Results in Your Business?",
+  ctaHeading,
   actions,
   ctaSlot,
   background = "white",
@@ -84273,12 +84507,12 @@ function StatsImpactGrid({
   comparisonClassName,
   ctaClassName
 }) {
-  const renderBadge = () => {
+  const badgeContent = useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsx(Badge, { className: cn("mb-4", badgeClassName), children: badge });
-  };
-  const renderStatIcon = (stat) => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const renderStatIcon = useCallback((stat) => {
     if (stat.iconSlot) return stat.iconSlot;
     if (!stat.icon) return null;
     return /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsx(
@@ -84289,45 +84523,88 @@ function StatsImpactGrid({
         className: stat.iconColor || "text-primary"
       }
     ) });
-  };
-  const renderStats = () => {
+  }, []);
+  const statsContent = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mb-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3", statsGridClassName), children: stats.map((stat) => /* @__PURE__ */ jsx(Card, { className: cn("overflow-hidden border p-0", stat.className, statCardClassName), children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6 md:p-8", children: [
-      renderStatIcon(stat),
-      /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-end", children: [
-        stat.prefix && /* @__PURE__ */ jsx("span", { className: "mb-1 mr-1 text-2xl font-bold", children: stat.prefix }),
-        /* @__PURE__ */ jsx("h3", { className: "text-4xl font-bold tracking-tight md:text-5xl", children: stat.value }),
-        stat.suffix && /* @__PURE__ */ jsx("span", { className: "mb-1 ml-1 text-2xl font-bold", children: stat.suffix })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "mb-4 text-xl font-semibold", children: stat.label }),
-      stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: stat.description }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: stat.description }))
-    ] }) }, stat.id)) });
-  };
-  const renderComparison = () => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "mb-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+          statsGridClassName
+        ),
+        children: stats.map((stat) => /* @__PURE__ */ jsx(
+          Card,
+          {
+            className: cn(
+              "overflow-hidden border p-0",
+              stat.className,
+              statCardClassName
+            ),
+            children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6 md:p-8", children: [
+              renderStatIcon(stat),
+              /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-end", children: [
+                stat.prefix && /* @__PURE__ */ jsx("span", { className: "mb-1 mr-1 text-2xl font-bold", children: stat.prefix }),
+                /* @__PURE__ */ jsx("h3", { className: "text-4xl font-bold tracking-tight md:text-5xl", children: stat.value }),
+                stat.suffix && /* @__PURE__ */ jsx("span", { className: "mb-1 ml-1 text-2xl font-bold", children: stat.suffix })
+              ] }),
+              stat.label && /* @__PURE__ */ jsx("div", { className: "mb-4 text-xl font-semibold", children: stat.label }),
+              stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: stat.description }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: stat.description }))
+            ] })
+          },
+          stat.id
+        ))
+      }
+    );
+  }, [statsSlot, stats, statsGridClassName, statCardClassName, renderStatIcon]);
+  const hasComparisonContent = useMemo(() => {
+    return !!(comparisonHeading || comparisonDescription || baselineValue || targetValue || baselineLabel || targetLabel);
+  }, [
+    comparisonHeading,
+    comparisonDescription,
+    baselineValue,
+    targetValue,
+    baselineLabel,
+    targetLabel
+  ]);
+  const comparisonContent = useMemo(() => {
     if (comparisonSlot) return comparisonSlot;
-    if (!comparisonHeading && !comparisonDescription && !industryAverage && !platformValue) return null;
+    if (!hasComparisonContent) return null;
+    const hasProgressBars = baselineLabel && targetLabel && baselinePercent !== void 0 && targetPercent !== void 0;
     return /* @__PURE__ */ jsx("div", { className: cn("mb-16 rounded-xl bg-muted p-8", comparisonClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-8 md:grid-cols-2 md:gap-16", children: [
       /* @__PURE__ */ jsxs("div", { children: [
         comparisonHeading && (typeof comparisonHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-bold", children: comparisonHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: comparisonHeading })),
         comparisonDescription && (typeof comparisonDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-6 text-muted-foreground", children: comparisonDescription }) : /* @__PURE__ */ jsx("div", { className: "mb-6", children: comparisonDescription })),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        hasProgressBars && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-muted-foreground/20", children: /* @__PURE__ */ jsx("div", { className: "h-full w-[24%] bg-muted-foreground" }) }),
-            /* @__PURE__ */ jsx("span", { className: "min-w-[60px] text-sm font-medium", children: "Industry" })
+            /* @__PURE__ */ jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-muted-foreground/20", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full bg-muted-foreground",
+                style: { width: `${baselinePercent}%` }
+              }
+            ) }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-[60px] text-sm font-medium", children: baselineLabel })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx("div", { className: "h-full w-[89%] bg-primary" }) }),
-            /* @__PURE__ */ jsx("span", { className: "min-w-[60px] text-sm font-medium", children: "Our Platform" })
+            /* @__PURE__ */ jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full bg-primary",
+                style: { width: `${targetPercent}%` }
+              }
+            ) }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-[60px] text-sm font-medium", children: targetLabel })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 text-center md:border-l md:pl-16 md:text-left", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "INDUSTRY AVERAGE" }),
-          /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold", children: industryAverage })
+      (baselineValue || targetValue) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 text-center md:border-l md:pl-16 md:text-left", children: [
+        baselineValue && /* @__PURE__ */ jsxs("div", { children: [
+          baselineLabel && /* @__PURE__ */ jsx("div", { className: "text-sm uppercase text-muted-foreground", children: baselineLabel }),
+          /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold", children: baselineValue })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex h-12 items-center justify-center md:justify-start", children: /* @__PURE__ */ jsx(
+        baselineValue && targetValue && /* @__PURE__ */ jsx("div", { className: "flex h-12 items-center justify-center md:justify-start", children: /* @__PURE__ */ jsx(
           DynamicIcon,
           {
             name: "lucide/arrow-up-right",
@@ -84335,40 +84612,65 @@ function StatsImpactGrid({
             className: "text-primary"
           }
         ) }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-primary", children: "OUR PLATFORM" }),
-          /* @__PURE__ */ jsx("div", { className: "text-4xl font-bold text-primary", children: platformValue })
+        targetValue && /* @__PURE__ */ jsxs("div", { children: [
+          targetLabel && /* @__PURE__ */ jsx("div", { className: "text-sm font-medium uppercase text-primary", children: targetLabel }),
+          /* @__PURE__ */ jsx("div", { className: "text-4xl font-bold text-primary", children: targetValue })
         ] })
       ] })
     ] }) });
-  };
-  const renderActions = () => {
+  }, [
+    comparisonSlot,
+    hasComparisonContent,
+    comparisonHeading,
+    comparisonDescription,
+    baselineValue,
+    targetValue,
+    baselineLabel,
+    targetLabel,
+    baselinePercent,
+    targetPercent,
+    comparisonClassName
+  ]);
+  const actionsContent = useMemo(() => {
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center gap-4", children: actions.map((action, index) => /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        href: action.href,
-        onClick: action.onClick,
-        variant: action.variant || "default",
-        size: "lg",
-        asButton: true,
-        className: index === 0 ? "inline-flex items-center justify-center gap-2" : void 0,
-        children: [
-          action.label,
-          index === 0 && /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-        ]
-      },
-      index
-    )) });
-  };
-  const renderCta = () => {
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center gap-4", children: actions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          size: "lg",
+          asButton: true,
+          className: cn(
+            "inline-flex items-center justify-center gap-2",
+            actionClassName
+          ),
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        action.href || index
+      );
+    }) });
+  }, [actions]);
+  const ctaContent = useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaHeading && (!actions || actions.length === 0)) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("text-center", ctaClassName), children: [
       ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-6 text-2xl font-bold", children: ctaHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-6", children: ctaHeading })),
-      renderActions()
+      actionsContent
     ] });
-  };
+  }, [ctaSlot, ctaHeading, actions, ctaClassName, actionsContent]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -84379,16 +84681,34 @@ function StatsImpactGrid({
       patternClassName,
       className: cn("relative overflow-hidden", className),
       children: [
-        /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 bg-gradient-to-br from-primary/5 to-background" }),
+        /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 bg-linear-to-br from-primary/5 to-background" }),
         /* @__PURE__ */ jsxs("div", { className: cn("relative mx-auto max-w-5xl", containerClassName), children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-            renderBadge(),
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-3xl text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
+          hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
+            badgeContent,
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+              "h2",
+              {
+                className: cn(
+                  "mb-4 text-3xl font-bold md:text-5xl",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "mx-auto max-w-3xl text-lg text-muted-foreground",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
           ] }),
-          renderStats(),
-          renderComparison(),
-          renderCta()
+          statsContent,
+          comparisonContent,
+          ctaContent
         ] })
       ]
     }
@@ -84455,7 +84775,7 @@ function StatsCircularProgress({
   description,
   categories,
   categoriesSlot,
-  defaultCategory = "business",
+  defaultCategory,
   background = "white",
   spacing = "lg",
   pattern,
@@ -84474,13 +84794,14 @@ function StatsCircularProgress({
   statLabelClassName,
   statInfoClassName
 }) {
-  const [category, setCategory] = React13.useState(defaultCategory);
-  const renderBadge = () => {
+  const effectiveDefaultCategory = defaultCategory || (categories && categories.length > 0 ? categories[0].id : "");
+  const [category, setCategory] = React13.useState(effectiveDefaultCategory);
+  const badgeContent = useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsx(Badge, { variant: "outline", className: cn("mb-4", badgeClassName), children: badge });
-  };
-  const renderCategories = () => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const categoriesContent = useMemo(() => {
     if (categoriesSlot) return categoriesSlot;
     if (!categories || categories.length === 0) return null;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -84517,15 +84838,16 @@ function StatsCircularProgress({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsx("h3", { className: cn("text-center text-lg font-semibold md:text-xl", statLabelClassName), children: stat.label }),
-              /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-center text-xs text-muted-foreground md:text-sm", statInfoClassName), children: stat.info })
+              stat.label && /* @__PURE__ */ jsx("h3", { className: cn("text-center text-lg font-semibold md:text-xl", statLabelClassName), children: stat.label }),
+              stat.info && /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-center text-xs text-muted-foreground md:text-sm", statInfoClassName), children: stat.info })
             ]
           },
           index
         )) }) }, cat.id))
       ] })
     ] });
-  };
+  }, [categoriesSlot, categories, category, tabsClassName, statsClassName, statCardClassName, statValueClassName, statLabelClassName, statInfoClassName]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -84536,12 +84858,12 @@ function StatsCircularProgress({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-6xl", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-          renderBadge(),
+        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
+          badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto mt-3 max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto mt-3 max-w-2xl", descriptionClassName), children: description }))
         ] }),
-        renderCategories()
+        categoriesContent
       ] })
     }
   );
@@ -84566,19 +84888,21 @@ function StatsCardGroup({
   avatarsClassName,
   optixFlowConfig
 }) {
-  const renderIcon = (stat) => {
+  const renderIcon = useCallback((stat) => {
     if (stat.iconSlot) return stat.iconSlot;
     if (!stat.icon) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10", statIconClassName), children: /* @__PURE__ */ jsx(
-      DynamicIcon,
+    return /* @__PURE__ */ jsx(
+      "div",
       {
-        name: stat.icon,
-        size: 24,
-        className: "text-primary"
+        className: cn(
+          "mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10",
+          statIconClassName
+        ),
+        children: /* @__PURE__ */ jsx(DynamicIcon, { name: stat.icon, size: 24, className: "text-primary" })
       }
-    ) });
-  };
-  const renderAvatars = (stat) => {
+    );
+  }, [statIconClassName]);
+  const renderAvatars = useCallback((stat) => {
     if (!stat.showAvatars) return null;
     if (avatarsSlot) return avatarsSlot;
     if (!avatars || avatars.length === 0) return null;
@@ -84588,7 +84912,10 @@ function StatsCardGroup({
         {
           src: avatar.src,
           alt: avatar.alt,
-          className: cn("h-8 w-8 rounded-full border-2 border-background object-cover", avatar.className),
+          className: cn(
+            "h-8 w-8 rounded-full border-2 border-background object-cover",
+            avatar.className
+          ),
           optixFlowConfig
         },
         avatarIndex
@@ -84598,8 +84925,8 @@ function StatsCardGroup({
         avatars.length - 4
       ] })
     ] });
-  };
-  const renderStats = () => {
+  }, [avatarsSlot, avatars, avatarsClassName, optixFlowConfig]);
+  const statsContent = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsxs(
@@ -84612,14 +84939,23 @@ function StatsCardGroup({
         ),
         children: [
           renderIcon(stat),
-          /* @__PURE__ */ jsx("div", { className: cn("mb-2 text-3xl font-bold md:text-4xl", statValueClassName), children: stat.value }),
-          /* @__PURE__ */ jsx("div", { className: cn("mb-4 text-muted-foreground", statLabelClassName), children: stat.label }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "mb-2 text-3xl font-bold md:text-4xl",
+                statValueClassName
+              ),
+              children: stat.value
+            }
+          ),
+          stat.label && /* @__PURE__ */ jsx("div", { className: cn("mb-4 text-muted-foreground", statLabelClassName), children: stat.label }),
           renderAvatars(stat)
         ]
       },
       index
     ));
-  };
+  }, [statsSlot, stats, statValueClassName, statLabelClassName, renderIcon, renderAvatars]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -84629,7 +84965,7 @@ function StatsCardGroup({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-4xl", containerClassName), children: /* @__PURE__ */ jsx("div", { className: cn("rounded-xl border bg-card p-8", cardClassName), children: /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 md:grid-cols-3", statsClassName), children: renderStats() }) }) })
+      children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-4xl", containerClassName), children: (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("rounded-xl border bg-card p-8", cardClassName), children: /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 md:grid-cols-3", statsClassName), children: statsContent }) }) })
     }
   );
 }
@@ -84666,19 +85002,19 @@ function AnimatedStatItem({
   iconClassName
 }) {
   const count = useAnimatedCounter(stat.value, duration, isVisible);
-  const renderIcon = () => {
+  const iconContent = useMemo(() => {
     if (stat.iconSlot) return stat.iconSlot;
     if (!stat.icon) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-primary/10", iconClassName), children: /* @__PURE__ */ jsx(DynamicIcon, { name: stat.icon, size: 28, className: "text-primary" }) });
-  };
+  }, [stat.iconSlot, stat.icon, iconClassName]);
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center text-center", stat.className), children: [
-    renderIcon(),
+    iconContent,
     /* @__PURE__ */ jsxs("div", { className: cn("mb-2 text-4xl font-bold md:text-5xl", valueClassName), children: [
       stat.prefix,
       count,
       stat.suffix
     ] }),
-    /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", labelClassName), children: stat.label })
+    stat.label && /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", labelClassName), children: stat.label })
   ] });
 }
 function StatsAnimatedCounter({
@@ -84719,7 +85055,8 @@ function StatsAnimatedCounter({
     }
     return () => observer.disconnect();
   }, []);
-  const renderStats = () => {
+  const hasHeaderContent = !!(heading || description);
+  const statsContent = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsx(
@@ -84734,7 +85071,7 @@ function StatsAnimatedCounter({
       },
       index
     ));
-  };
+  }, [statsSlot, stats, animationDuration, isVisible, statValueClassName, statLabelClassName, statIconClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -84745,11 +85082,11 @@ function StatsAnimatedCounter({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxs("div", { ref: sectionRef, className: cn("mx-auto max-w-5xl", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", contentClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", contentClassName), children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
         ] }),
-        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 sm:grid-cols-2 lg:grid-cols-4", statsClassName), children: renderStats() })
+        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 sm:grid-cols-2 lg:grid-cols-4", statsClassName), children: statsContent })
       ] })
     }
   );
@@ -84852,12 +85189,12 @@ function StatsNumberTicker({
     }
     return () => observer.disconnect();
   }, []);
-  const renderBadge = () => {
+  const badgeContent = useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsx(Badge, { className: cn("mb-4", badgeClassName), children: badge });
-  };
-  const renderStats = () => {
+  }, [badgeSlot, badge, badgeClassName]);
+  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 lg:grid-cols-4", statsGridClassName), children: stats.map((stat, index) => /* @__PURE__ */ jsx(
@@ -84873,7 +85210,8 @@ function StatsNumberTicker({
       },
       index
     )) });
-  };
+  }, [statsSlot, stats, animationDuration, isVisible, statsGridClassName, statCardClassName, statValueClassName, statLabelClassName, statDescriptionClassName]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -84884,12 +85222,12 @@ function StatsNumberTicker({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxs("div", { ref: sectionRef, className: cn("mx-auto max-w-5xl", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-          renderBadge(),
+        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
+          badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
         ] }),
-        renderStats()
+        statsContent
       ] })
     }
   );
@@ -84900,8 +85238,8 @@ function StatsMilestoneSidebar({
   sidebarSlot,
   milestones,
   milestonesSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -84916,14 +85254,33 @@ function StatsMilestoneSidebar({
   milestoneTitleClassName,
   milestoneDescriptionClassName
 }) {
-  const renderSidebar = () => {
+  const sidebarContent = useMemo(() => {
     if (sidebarSlot) return sidebarSlot;
+    if (!heading && !description) return null;
     return /* @__PURE__ */ jsxs("div", { className: "lg:sticky lg:top-24", children: [
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+      heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+        "h2",
+        {
+          className: cn(
+            "mb-4 text-3xl font-bold md:text-4xl",
+            headingClassName
+          ),
+          children: heading
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
+      description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: cn(
+            "text-lg text-muted-foreground",
+            descriptionClassName
+          ),
+          children: description
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
     ] });
-  };
-  const renderMilestones = () => {
+  }, [sidebarSlot, heading, description, headingClassName, descriptionClassName]);
+  const milestonesContent = useMemo(() => {
     if (milestonesSlot) return milestonesSlot;
     if (!milestones || milestones.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("space-y-8", milestonesClassName), children: milestones.map((milestone, index) => /* @__PURE__ */ jsxs(
@@ -84936,14 +85293,43 @@ function StatsMilestoneSidebar({
         ),
         children: [
           /* @__PURE__ */ jsx("div", { className: "absolute -left-[9px] top-0 h-4 w-4 rounded-full border-2 border-primary bg-background" }),
-          /* @__PURE__ */ jsx("div", { className: cn("mb-3 inline-flex rounded-full bg-primary/10 px-3 py-1 text-sm font-semibold text-primary", milestoneYearClassName), children: milestone.year }),
-          milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-2 text-xl font-bold", milestoneTitleClassName), children: milestone.title }) : /* @__PURE__ */ jsx("div", { className: cn("mb-2", milestoneTitleClassName), children: milestone.title })),
-          milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", milestoneDescriptionClassName), children: milestone.description }) : /* @__PURE__ */ jsx("div", { className: milestoneDescriptionClassName, children: milestone.description }))
+          milestone.year && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "mb-3 inline-flex rounded-full bg-primary/10 px-3 py-1 text-sm font-semibold text-primary",
+                milestoneYearClassName
+              ),
+              children: milestone.year
+            }
+          ),
+          milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsx(
+            "h3",
+            {
+              className: cn(
+                "mb-2 text-xl font-bold",
+                milestoneTitleClassName
+              ),
+              children: milestone.title
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: cn("mb-2", milestoneTitleClassName), children: milestone.title })),
+          milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-muted-foreground",
+                milestoneDescriptionClassName
+              ),
+              children: milestone.description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: milestoneDescriptionClassName, children: milestone.description }))
         ]
       },
       index
     )) });
-  };
+  }, [milestonesSlot, milestones, milestonesClassName, milestoneItemClassName, milestoneYearClassName, milestoneTitleClassName, milestoneDescriptionClassName]);
+  const hasSidebarContent = !!(sidebarSlot || heading || description);
+  const hasMilestonesContent = !!(milestonesSlot || milestones && milestones.length > 0);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -84954,8 +85340,8 @@ function StatsMilestoneSidebar({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-6xl", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-12 lg:gap-16", children: [
-        /* @__PURE__ */ jsx("div", { className: cn("lg:col-span-4", sidebarClassName), children: renderSidebar() }),
-        /* @__PURE__ */ jsx("div", { className: "lg:col-span-8", children: renderMilestones() })
+        hasSidebarContent && /* @__PURE__ */ jsx("div", { className: cn("lg:col-span-4", sidebarClassName), children: sidebarContent }),
+        hasMilestonesContent && /* @__PURE__ */ jsx("div", { className: hasSidebarContent ? "lg:col-span-8" : "lg:col-span-12", children: milestonesContent })
       ] }) })
     }
   );
@@ -85004,12 +85390,12 @@ function StatsBarComparison({
     }
     return () => observer.disconnect();
   }, [animate]);
-  const renderBadge = () => {
+  const badgeContent = useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsx(Badge, { variant: "outline", className: cn("mb-4", badgeClassName), children: badge });
-  };
-  const renderComparisons = () => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const comparisonsContent = useMemo(() => {
     if (comparisonsSlot) return comparisonsSlot;
     if (!comparisons || comparisons.length === 0) return null;
     return comparisons.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { className: cn("rounded-xl border bg-card p-6", group.className, groupCardClassName), children: [
@@ -85034,7 +85420,8 @@ function StatsBarComparison({
         ) })
       ] }, barIndex)) })
     ] }, groupIndex));
-  };
+  }, [comparisonsSlot, comparisons, isVisible, groupCardClassName, groupTitleClassName, barLabelClassName, barValueClassName, barTrackClassName]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -85045,12 +85432,12 @@ function StatsBarComparison({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxs("div", { ref: sectionRef, className: cn("mx-auto max-w-4xl", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-          renderBadge(),
+        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
+          badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("space-y-10", comparisonsClassName), children: renderComparisons() })
+        (comparisonsSlot || comparisons && comparisons.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("space-y-10", comparisonsClassName), children: comparisonsContent })
       ] })
     }
   );