@opensite/ui 0.4.6 → 0.4.8

package/dist/registry.cjs

@@ -397,7 +397,7 @@ var Section = React13__namespace.default.forwardRef(
     children,
     className,
     style,
-    background = "white",
+    background = "transparent",
     spacing = "lg",
     pattern,
     patternOpacity,
@@ -40779,7 +40779,7 @@ function HeroOverlayCtaGrid({
   actionsSlot,
   cards,
   cardsSlot,
-  backgroundImage = imagePlaceholders[0],
+  backgroundImage,
   backgroundAlt = "OpenSite AI coverage advisory hero background",
   backgroundSlot,
   className,
@@ -40847,7 +40847,7 @@ function HeroOverlayCtaGrid({
     ] });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "section",
+    Section,
     {
       className: cn(
         "relative flex min-h-dvh items-center justify-center overflow-hidden bg-background pb-20 pt-32 md:pt-36",
@@ -40983,98 +40983,237 @@ function HeroSplitIconCards({
     }
   );
 }
-var Swirls = () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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,
+  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__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-0", children: /* @__PURE__ */ jsxRuntime.jsx(Swirls, {}) });
-  };
-  const renderImages = () => {
+  const [lightboxOpen, setLightboxOpen] = React13.useState(false);
+  const [lightboxIndex, setLightboxIndex] = React13.useState(0);
+  const { featuredImage, secondaryImages } = React13.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 = React13.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 = React13.useCallback(
+    (index) => {
+      if (!enableLightbox) return;
+      setLightboxIndex(index);
+      setLightboxOpen(true);
+    },
+    [enableLightbox]
+  );
+  const handleLightboxClose = React13.useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
+  const handleImageKeyDown = React13.useCallback(
+    (e, index) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleImageClick(index);
+      }
+    },
+    [handleImageClick]
+  );
+  const zoomIndicator = React13.useMemo(
+    () => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
+          zoomIndicatorClassName
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-white/90 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: zoomIconName, size: 20, className: "text-gray-900" }) })
+      }
+    ),
+    [zoomIconName, zoomIndicatorClassName]
+  );
+  const featuredImageContent = React13.useMemo(() => {
+    if (!featuredImage) return null;
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            img.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__ */ jsxRuntime.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 = React13.useMemo(() => {
+    if (secondaryImages.length === 0) return null;
+    return secondaryImages.map((image, index) => {
+      const lightboxIndex2 = index + 1;
+      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              img.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__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/0 transition-colors group-hover:bg-black/20" }),
+            enableLightbox && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
+                  zoomIndicatorClassName
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-white/90 shadow-lg", children: /* @__PURE__ */ jsxRuntime.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 = React13.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute inset-0 z-10", imagesClassName), children: images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
-      {
-        src: image.src,
-        alt: image.alt,
-        className: cn("absolute object-contain", image.className),
-        style: { animationDelay: `${index * 300}ms` },
-        optixFlowConfig
-      },
-      `${image.alt}-${index}`
-    )) });
-  };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid grid-cols-2 gap-4", galleryClassName), children: [
+      featuredImageContent,
+      secondaryImagesContent
+    ] });
+  }, [
+    imagesSlot,
+    images,
+    galleryClassName,
+    featuredImageContent,
+    secondaryImagesContent
+  ]);
+  const hasContent = children !== void 0 && children !== null;
+  const hasGallery = imagesSlot || images && images.length > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "section",
+    Section,
     {
-      className: cn(
-        "relative flex min-h-[60vh] items-center justify-center overflow-hidden bg-background py-20 md:min-h-[80vh] md:py-32",
-        className
-      ),
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
       children: [
-        renderBackground(),
-        renderImages(),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative z-20 mx-auto max-w-2xl px-4 text-center", contentClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-primary sm:text-5xl md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: cn("mt-6 text-lg leading-8 text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "grid gap-12 lg:grid-cols-2 lg:gap-16",
+              gridClassName
+            ),
+            children: [
+              hasContent ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col justify-center", contentClassName), children }) : null,
+              hasGallery ? galleryContent : null
+            ]
+          }
+        ),
+        enableLightbox && lightboxOpen && lightboxItems.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          lightbox.Lightbox,
+          {
+            items: lightboxItems,
+            initialIndex: lightboxIndex,
+            onClose: handleLightboxClose,
+            layout: "horizontal",
+            controls: {
+              navigation: true,
+              counter: true,
+              closeButton: true,
+              captions: true
+            }
+          }
+        ) : null
       ]
     }
   );
@@ -41086,8 +41225,12 @@ function HeroBadgeImageSplit({
   description,
   actions,
   actionsSlot,
-  imageSrc = imagePlaceholders[0],
+  imageSrc,
   imageAlt = "Hero section demo image showing interface components",
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -41119,26 +41262,36 @@ function HeroBadgeImageSplit({
       );
     });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-8 lg:grid-cols-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center text-center lg:items-start lg:text-left", contentClassName), children: [
-      badge && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "outline", className: badgeClassName, children: [
-        badge,
-        badgeIcon
-      ] }),
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", actionsClassName), children: renderActions() })
-    ] }),
-    imageSrc && /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
-      {
-        src: imageSrc,
-        alt: imageAlt,
-        className: cn("max-h-96 w-full rounded-md object-cover", imageClassName),
-        optixFlowConfig
-      }
-    )
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-8 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center text-center lg:items-start lg:text-left", contentClassName), children: [
+          badge && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "outline", className: badgeClassName, children: [
+            badge,
+            badgeIcon
+          ] }),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", actionsClassName), children: renderActions() })
+        ] }),
+        imageSrc && /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: imageSrc,
+            alt: imageAlt,
+            className: cn("max-h-96 w-full rounded-md object-cover", imageClassName),
+            optixFlowConfig
+          }
+        )
+      ] }) })
+    }
+  );
 }
 function HeroImageLeftContent({
   badge,
@@ -41148,8 +41301,12 @@ function HeroImageLeftContent({
   description,
   actions,
   actionsSlot,
-  imageSrc = imagePlaceholders[1],
+  imageSrc,
   imageAlt = "placeholder hero",
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -41182,26 +41339,36 @@ function HeroImageLeftContent({
       );
     });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-10 lg:grid-cols-2 lg:gap-20", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex justify-end bg-muted", imageContainerClassName), children: imageSrc && /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
-      {
-        src: imageSrc,
-        alt: imageAlt,
-        className: cn("max-h-[600px] w-full rounded-md object-cover lg:max-h-[800px]", imageClassName),
-        optixFlowConfig
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center text-center lg:max-w-3xl lg:items-start lg:text-left", contentClassName), children: [
-      badge && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: badgeVariant, className: badgeClassName, children: [
-        badge,
-        badgeIcon
-      ] }),
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty md:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", actionsClassName), children: renderActions() })
-    ] })
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-10 lg:grid-cols-2 lg:gap-20", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex justify-end bg-muted", imageContainerClassName), children: imageSrc && /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: imageSrc,
+            alt: imageAlt,
+            className: cn("max-h-[600px] w-full rounded-md object-cover lg:max-h-[800px]", imageClassName),
+            optixFlowConfig
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center text-center lg:max-w-3xl lg:items-start lg:text-left", contentClassName), children: [
+          badge && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: badgeVariant, className: badgeClassName, children: [
+            badge,
+            badgeIcon
+          ] }),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty md:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", actionsClassName), children: renderActions() })
+        ] })
+      ] }) })
+    }
+  );
 }
 function HeroImageSlider({
   eyebrow,
@@ -41338,6 +41505,10 @@ function HeroCenteredImageGrid({
   imageOverlayAction,
   logos,
   logosSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -41403,47 +41574,61 @@ function HeroCenteredImageGrid({
       ) }, index);
     });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("z-10 flex flex-col items-center gap-8 text-center", contentClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-3xl", children: [
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-4 text-4xl font-semibold text-pretty lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-      ] }),
-      (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row", actionsClassName), children: renderActions() })
-    ] }) }),
-    gridImagesSlot ? gridImagesSlot : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto mt-20 grid max-w-7xl gap-px bg-border p-px md:grid-cols-5", imageGridClassName), children: [
-      gridImages?.[0] && /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: gridImages[0].src,
-          alt: gridImages[0].alt,
-          className: cn("h-full max-h-[500px] w-full object-cover md:col-span-3 dark:invert", gridImages[0].className),
-          optixFlowConfig
-        }
-      ),
-      gridImages?.[1] && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative md:col-span-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          img.Img,
-          {
-            src: gridImages[1].src,
-            alt: gridImages[1].alt,
-            className: cn("h-full max-h-[500px] w-full object-cover dark:invert", gridImages[1].className),
-            optixFlowConfig
-          }
-        ),
-        renderImageOverlayAction()
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("z-10 flex flex-col items-center gap-8 text-center", contentClassName), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-3xl", children: [
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-4 text-4xl font-semibold text-pretty lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          ] }),
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row", actionsClassName), children: renderActions() })
+        ] }) }),
+        gridImagesSlot ? gridImagesSlot : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto mt-20 grid max-w-7xl gap-px bg-border p-px md:grid-cols-5", imageGridClassName), children: [
+          gridImages?.[0] && /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: gridImages[0].src,
+              alt: gridImages[0].alt,
+              className: cn("h-full max-h-[500px] w-full object-cover md:col-span-3 dark:invert", gridImages[0].className),
+              optixFlowConfig
+            }
+          ),
+          gridImages?.[1] && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative md:col-span-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: gridImages[1].src,
+                alt: gridImages[1].alt,
+                className: cn("h-full max-h-[500px] w-full object-cover dark:invert", gridImages[1].className),
+                optixFlowConfig
+              }
+            ),
+            renderImageOverlayAction()
+          ] })
+        ] }),
+        (logosSlot || logos && logos.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mt-12 grid max-w-7xl grid-cols-2 place-items-center gap-6 md:grid-cols-4", logosClassName), children: renderLogos() })
       ] })
-    ] }),
-    (logosSlot || logos && logos.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mt-12 grid max-w-7xl grid-cols-2 place-items-center gap-6 md:grid-cols-4", logosClassName), children: renderLogos() })
-  ] }) });
+    }
+  );
 }
 function HeroCenteredScreenshot({
   heading,
   description,
   actions,
   actionsSlot,
-  imageSrc = imagePlaceholders[4],
+  imageSrc,
   imageAlt = "placeholder",
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -41474,22 +41659,32 @@ function HeroCenteredScreenshot({
       );
     });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden border-b border-muted", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("z-10 items-center text-center", contentClassName), children: [
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-8 text-4xl font-semibold text-pretty lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-3xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-12 flex w-full flex-col justify-center gap-2 sm:flex-row", actionsClassName), children: renderActions() })
-    ] }) }),
-    imageSrc && /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
-      {
-        src: imageSrc,
-        alt: imageAlt,
-        className: cn("mx-auto mt-24 max-h-[700px] w-full max-w-7xl rounded-t-lg object-cover shadow-lg", imageClassName),
-        optixFlowConfig
-      }
-    )
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden border-b border-muted", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("z-10 items-center text-center", contentClassName), children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-8 text-4xl font-semibold text-pretty lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-3xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-12 flex w-full flex-col justify-center gap-2 sm:flex-row", actionsClassName), children: renderActions() })
+        ] }) }),
+        imageSrc && /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: imageSrc,
+            alt: imageAlt,
+            className: cn("mx-auto mt-24 max-h-[700px] w-full max-w-7xl rounded-t-lg object-cover shadow-lg", imageClassName),
+            optixFlowConfig
+          }
+        )
+      ] }) })
+    }
+  );
 }
 function HeroPatternBadgeLogos({
   badge,
@@ -41501,6 +41696,10 @@ function HeroPatternBadgeLogos({
   logosSlot,
   logosTagline = "Powering the next generation of digital products",
   backgroundImageUrl = "https://cdn.ing/assets/files/record/286186/nbdflpgp4ostrno079hygibsflp3",
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -41573,31 +41772,41 @@ function HeroPatternBadgeLogos({
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: logoClassName, children: imgElement }, index);
     });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cn("relative p-0", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cn(
-          "absolute h-full w-full bg-contain bg-repeat opacity-100 lg:block",
-          "mask-[linear-gradient(to_right,var(--color-border),transparent,transparent,var(--color-border))]",
-          backgroundClassName
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn("relative p-0", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "absolute h-full w-full bg-contain bg-repeat opacity-100 lg:block",
+              "mask-[linear-gradient(to_right,var(--color-border),transparent,transparent,var(--color-border))]",
+              backgroundClassName
+            ),
+            style: { backgroundImage: `url('${backgroundImageUrl}')` }
+          }
         ),
-        style: { backgroundImage: `url('${backgroundImageUrl}')` }
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container py-28 md:py-32", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("z-10 mx-auto flex max-w-5xl flex-col items-center gap-6 text-center", contentClassName), children: [
-      badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "transition-colors hover:bg-secondary/20", children: badge }) : badge }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-6 text-4xl font-bold tracking-tight text-pretty md:text-5xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground md:text-lg lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-      ] }),
-      (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6 flex items-center gap-4", actionsClassName), children: renderActions() }),
-      (logosSlot || logos && logos.length > 0 || logosTagline) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-12 flex flex-col items-center gap-4 lg:mt-16", logosClassName), children: [
-        logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-muted-foreground", children: logosTagline }) : logosTagline),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4", children: renderLogos() })
-      ] })
-    ] }) }) })
-  ] });
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container py-28 md:py-32", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("z-10 mx-auto flex max-w-5xl flex-col items-center gap-6 text-center", contentClassName), children: [
+          badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "transition-colors hover:bg-secondary/20", children: badge }) : badge }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-6 text-4xl font-bold tracking-tight text-pretty md:text-5xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground md:text-lg lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          ] }),
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6 flex items-center gap-4", actionsClassName), children: renderActions() }),
+          (logosSlot || logos && logos.length > 0 || logosTagline) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-12 flex flex-col items-center gap-4 lg:mt-16", logosClassName), children: [
+            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-muted-foreground", children: logosTagline }) : logosTagline),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4", children: renderLogos() })
+          ] })
+        ] }) }) })
+      ]
+    }
+  );
 }
 function HeroLogoCenteredScreenshot({
   logo,
@@ -41608,6 +41817,10 @@ function HeroLogoCenteredScreenshot({
   actionSlot,
   image,
   imageSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -41653,17 +41866,27 @@ function HeroLogoCenteredScreenshot({
       }
     );
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container max-w-7xl", containerClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("z-10 flex flex-col items-center gap-6 text-center", contentClassName), children: [
-      renderLogo(),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-4 text-3xl font-medium text-pretty lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-4 text-3xl font-medium text-pretty lg:text-5xl", headingClassName), children: heading })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-3xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-      ] }),
-      renderAction()
-    ] }) }),
-    renderImage()
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container max-w-7xl", containerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("z-10 flex flex-col items-center gap-6 text-center", contentClassName), children: [
+          renderLogo(),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-4 text-3xl font-medium text-pretty lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-4 text-3xl font-medium text-pretty lg:text-5xl", headingClassName), children: heading })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-3xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          ] }),
+          renderAction()
+        ] }) }),
+        renderImage()
+      ] }) })
+    }
+  );
 }
 function HeroPatternLogoTechStack({
   logo,
@@ -41677,6 +41900,10 @@ function HeroPatternLogoTechStack({
   techLogos,
   techLogosSlot,
   backgroundImage = "https://cdn.ing/assets/files/record/286187/4gpn0yq2ptra8iwlvmwwv860ggwv",
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -41752,30 +41979,40 @@ function HeroPatternLogoTechStack({
       }) })
     ] });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cn("relative overflow-hidden py-32", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 top-0 flex h-full w-full items-center justify-center opacity-100", children: /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
-      {
-        alt: "background",
-        src: backgroundImage,
-        className: "mask-[radial-gradient(75%_75%_at_center,white,transparent)] opacity-90",
-        optixFlowConfig
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative z-10 container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-6 text-center", contentClassName), children: [
-      renderLogo(),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: cn("mb-6 text-2xl font-bold tracking-tight text-pretty lg:text-5xl", headingClassName), children: [
-          heading,
-          " ",
-          highlightedWord && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: highlightedWord })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-6 text-2xl font-bold tracking-tight text-pretty lg:text-5xl", headingClassName), children: heading })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-3xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-      ] }),
-      renderActions(),
-      renderTechLogos()
-    ] }) }) })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 top-0 flex h-full w-full items-center justify-center opacity-100", children: /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            alt: "background",
+            src: backgroundImage,
+            className: "mask-[radial-gradient(75%_75%_at_center,white,transparent)] opacity-90",
+            optixFlowConfig
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative z-10 container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-6 text-center", contentClassName), children: [
+          renderLogo(),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: cn("mb-6 text-2xl font-bold tracking-tight text-pretty lg:text-5xl", headingClassName), children: [
+              heading,
+              " ",
+              highlightedWord && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: highlightedWord })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-6 text-2xl font-bold tracking-tight text-pretty lg:text-5xl", headingClassName), children: heading })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-3xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          ] }),
+          renderActions(),
+          renderTechLogos()
+        ] }) }) })
+      ]
+    }
+  );
 }
 function HeroAnnouncementBadge({
   badge,
@@ -41784,6 +42021,10 @@ function HeroAnnouncementBadge({
   description,
   actions,
   actionsSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   badgeClassName,
@@ -41812,22 +42053,32 @@ function HeroAnnouncementBadge({
       );
     });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-    badge && /* @__PURE__ */ jsxRuntime.jsxs(
-      Badge,
-      {
-        variant: "outline",
-        className: cn("mb-4 max-w-full text-sm font-normal lg:mb-10 lg:py-2 lg:pr-5 lg:pl-2", badgeClassName),
-        children: [
-          badgeIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2 flex size-8 shrink-0 items-center justify-center rounded-full bg-accent", children: badgeIcon }),
-          typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate whitespace-nowrap", children: badge }) : badge
-        ]
-      }
-    ),
-    heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-6 text-4xl leading-none font-bold tracking-tighter md:text-[7vw] lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-    description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-2xl text-muted-foreground md:text-[2vw] lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-    (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6 flex flex-col gap-4 sm:flex-row lg:mt-10", actionsClassName), children: renderActions() })
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+        badge && /* @__PURE__ */ jsxRuntime.jsxs(
+          Badge,
+          {
+            variant: "outline",
+            className: cn("mb-4 max-w-full text-sm font-normal lg:mb-10 lg:py-2 lg:pr-5 lg:pl-2", badgeClassName),
+            children: [
+              badgeIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2 flex size-8 shrink-0 items-center justify-center rounded-full bg-accent", children: badgeIcon }),
+              typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate whitespace-nowrap", children: badge }) : badge
+            ]
+          }
+        ),
+        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-6 text-4xl leading-none font-bold tracking-tighter md:text-[7vw] lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-2xl text-muted-foreground md:text-[2vw] lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6 flex flex-col gap-4 sm:flex-row lg:mt-10", actionsClassName), children: renderActions() })
+      ] })
+    }
+  );
 }
 function HeroTechCarousel({
   heading,
@@ -41835,6 +42086,10 @@ function HeroTechCarousel({
   technologies,
   carouselSlot,
   autoplayDelay = 4e3,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headingClassName,
@@ -41898,7 +42153,7 @@ function HeroTechCarousel({
                     img.Img,
                     {
                       className: "h-4 shrink-0 md:h-7",
-                      src: technology.logo || logoPlaceholders.logoMark,
+                      src: technology.logo,
                       alt: technology.name,
                       optixFlowConfig
                     }
@@ -41913,42 +42168,56 @@ function HeroTechCarousel({
       }
     );
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center", children: [
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mx-auto mb-4 max-w-2xl text-center text-4xl font-bold md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mx-auto mb-4 max-w-2xl text-center text-4xl font-bold md:text-6xl", headingClassName), children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto mt-4 max-w-xl text-center text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      technologies && technologies.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mt-8 mb-12 flex h-[60px] w-fit items-center gap-2 rounded-md bg-muted px-4 py-2 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: cn(
-            "flex items-center gap-2 transition-opacity duration-300",
-            fadeIn ? "opacity-100" : "opacity-0"
-          ),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
-              {
-                src: technologies[current]?.logo || logoPlaceholders.logoMark,
-                alt: technologies[current]?.name,
-                className: "h-4 md:h-7",
-                optixFlowConfig
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "border-l px-2 font-mono text-sm", children: technologies[current]?.command })
-          ]
-        }
-      ) })
-    ] }),
-    renderCarousel()
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center", children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mx-auto mb-4 max-w-2xl text-center text-4xl font-bold md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mx-auto mb-4 max-w-2xl text-center text-4xl font-bold md:text-6xl", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto mt-4 max-w-xl text-center text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          technologies && technologies.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mt-8 mb-12 flex h-[60px] w-fit items-center gap-2 rounded-md bg-muted px-4 py-2 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center gap-2 transition-opacity duration-300",
+                fadeIn ? "opacity-100" : "opacity-0"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  img.Img,
+                  {
+                    src: technologies[current]?.logo,
+                    alt: technologies[current]?.name,
+                    className: "h-4 md:h-7",
+                    optixFlowConfig
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "border-l px-2 font-mono text-sm", children: technologies[current]?.command })
+              ]
+            }
+          ) })
+        ] }),
+        renderCarousel()
+      ] })
+    }
+  );
 }
 function HeroSimpleCenteredImage({
   heading,
   description,
   actions,
   actionsSlot,
-  imageSrc = imagePlaceholders[6],
+  imageSrc,
   imageAlt = "placeholder hero",
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -41980,22 +42249,32 @@ function HeroSimpleCenteredImage({
       );
     });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cn("py-32", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container flex flex-col items-center text-center", containerClassName, contentClassName), children: [
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-3 text-3xl font-bold text-pretty sm:text-4xl md:my-6 lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6 max-w-xl text-muted-foreground lg:mb-12 lg:text-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6 flex gap-2 lg:mb-12", actionsClassName), children: renderActions() })
-    ] }),
-    imageSrc && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("aspect-video mask-[linear-gradient(#000_80%,transparent_100%)]", imageWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
-      {
-        src: imageSrc,
-        alt: imageAlt,
-        className: cn("h-full w-full rounded-md object-cover", imageClassName),
-        optixFlowConfig
-      }
-    ) }) })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container flex flex-col items-center text-center", containerClassName, contentClassName), children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-3 text-3xl font-bold text-pretty sm:text-4xl md:my-6 lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6 max-w-xl text-muted-foreground lg:mb-12 lg:text-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6 flex gap-2 lg:mb-12", actionsClassName), children: renderActions() })
+        ] }),
+        imageSrc && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("aspect-video mask-[linear-gradient(#000_80%,transparent_100%)]", imageWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: imageSrc,
+            alt: imageAlt,
+            className: cn("h-full w-full rounded-md object-cover", imageClassName),
+            optixFlowConfig
+          }
+        ) }) })
+      ]
+    }
+  );
 }
 function HeroPlatformFeaturesGrid({
   logo,
@@ -42006,6 +42285,10 @@ function HeroPlatformFeaturesGrid({
   actionSlot,
   features,
   featuresSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headerClassName,
@@ -42048,15 +42331,25 @@ function HeroPlatformFeaturesGrid({
       ] })
     ] }, index)) });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", headerClassName), children: [
-      renderLogo(),
-      subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-3 text-sm tracking-widest text-muted-foreground md:text-base", children: subtitle }) : subtitle),
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-4 text-4xl font-semibold text-balance lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-4 text-4xl font-semibold text-balance lg:text-6xl", headingClassName), children: heading })),
-      renderAction()
-    ] }),
-    renderFeatures()
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", headerClassName), children: [
+          renderLogo(),
+          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-3 text-sm tracking-widest text-muted-foreground md:text-base", children: subtitle }) : subtitle),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-4 text-4xl font-semibold text-balance lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-4 text-4xl font-semibold text-balance lg:text-6xl", headingClassName), children: heading })),
+          renderAction()
+        ] }),
+        renderFeatures()
+      ] })
+    }
+  );
 }
 function HeroSpiralPatternCards({
   badgeText,
@@ -42064,6 +42357,10 @@ function HeroSpiralPatternCards({
   description,
   actions,
   actionsSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headingClassName,
@@ -42090,45 +42387,55 @@ function HeroSpiralPatternCards({
       );
     }) });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cn("overflow-hidden py-32", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container flex flex-col items-center text-center", containerClassName), children: [
-      badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs uppercase", children: badgeText }) : badgeText),
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-3 text-2xl font-bold text-pretty sm:text-4xl md:my-6 lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-3 text-2xl font-bold text-pretty sm:text-4xl md:my-6 lg:text-5xl", headingClassName), children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6 max-w-xl text-muted-foreground md:mb-12 lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      renderActions()
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-16 flex flex-col items-center justify-center lg:mt-32", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "b relative mx-auto aspect-square w-[95%] max-w-125 sm:w-full", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-1/2 top-full z-0 flex w-480 -translate-x-1/2 -translate-y-16 md:-translate-y-8", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "svg",
-        {
-          xmlns: "http://www.w3.org/2000/svg",
-          version: "1.1",
-          viewBox: "0 0 800 800",
-          className: "h-full w-full text-muted-foreground opacity-20",
-          children: Array.from(Array(4e3).keys()).map((dot, index, array) => {
-            const angle = 0.2 * index;
-            const scalar = 300 + index * (100 / array.length);
-            const x = Math.round(Math.cos(angle) * scalar);
-            const y = Math.round(Math.sin(angle) * scalar);
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "circle",
-              {
-                r: 1,
-                cx: 400 + x,
-                cy: 400 + y,
-                fill: "currentColor",
-                opacity: (array.length - index) / array.length
-              },
-              index
-            );
-          })
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-5 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] translate-x-[-75%] translate-y-[10%] scale-[0.85] rotate-[-15deg] justify-center rounded-lg border border-border bg-accent opacity-60 md:w-85 md:max-w-85" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-10 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] translate-x-[-40%] translate-y-[5%] scale-[0.9] rotate-[-7deg] justify-center rounded-lg border border-border bg-accent opacity-80 md:w-85 md:max-w-85" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-20 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] justify-center rounded-lg border border-border bg-accent md:w-85 md:max-w-85" })
-    ] }) })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container flex flex-col items-center text-center", containerClassName), children: [
+          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs uppercase", children: badgeText }) : badgeText),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-3 text-2xl font-bold text-pretty sm:text-4xl md:my-6 lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-3 text-2xl font-bold text-pretty sm:text-4xl md:my-6 lg:text-5xl", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6 max-w-xl text-muted-foreground md:mb-12 lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          renderActions()
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-16 flex flex-col items-center justify-center lg:mt-32", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "b relative mx-auto aspect-square w-[95%] max-w-125 sm:w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-1/2 top-full z-0 flex w-480 -translate-x-1/2 -translate-y-16 md:-translate-y-8", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              version: "1.1",
+              viewBox: "0 0 800 800",
+              className: "h-full w-full text-muted-foreground opacity-20",
+              children: Array.from(Array(4e3).keys()).map((dot, index, array) => {
+                const angle = 0.2 * index;
+                const scalar = 300 + index * (100 / array.length);
+                const x = Math.round(Math.cos(angle) * scalar);
+                const y = Math.round(Math.sin(angle) * scalar);
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    r: 1,
+                    cx: 400 + x,
+                    cy: 400 + y,
+                    fill: "currentColor",
+                    opacity: (array.length - index) / array.length
+                  },
+                  index
+                );
+              })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-5 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] translate-x-[-75%] translate-y-[10%] scale-[0.85] rotate-[-15deg] justify-center rounded-lg border border-border bg-accent opacity-60 md:w-85 md:max-w-85" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-10 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] translate-x-[-40%] translate-y-[5%] scale-[0.9] rotate-[-7deg] justify-center rounded-lg border border-border bg-accent opacity-80 md:w-85 md:max-w-85" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-20 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] justify-center rounded-lg border border-border bg-accent md:w-85 md:max-w-85" })
+        ] }) })
+      ]
+    }
+  );
 }
 function HeroSplitSpiralShapes({
   badgeText,
@@ -42137,6 +42444,10 @@ function HeroSplitSpiralShapes({
   actions,
   actionsSlot,
   shapesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -42197,15 +42508,25 @@ function HeroSplitSpiralShapes({
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-[24%] bottom-[24%] flex aspect-5/6 w-[38%] justify-center rounded-lg border border-border bg-accent" })
     ] });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-8 lg:grid-cols-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center py-32 text-center lg:mx-auto lg:items-start lg:px-0 lg:text-left", contentClassName), children: [
-      badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: badgeText }) : badgeText),
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty lg:text-6xl", headingClassName), children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      renderActions()
-    ] }),
-    renderShapes()
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-8 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center py-32 text-center lg:mx-auto lg:items-start lg:px-0 lg:text-left", contentClassName), children: [
+          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: badgeText }) : badgeText),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty lg:text-6xl", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          renderActions()
+        ] }),
+        renderShapes()
+      ] }) })
+    }
+  );
 }
 function HeroSplitGeometricShapes({
   badgeText,
@@ -42214,6 +42535,10 @@ function HeroSplitGeometricShapes({
   actions,
   actionsSlot,
   shapesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -42250,15 +42575,25 @@ function HeroSplitGeometricShapes({
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[12%] left-[54%] flex aspect-square w-[24%] justify-center rounded-lg border border-border bg-accent" })
     ] }) });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container flex flex-col items-center", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "2xl:w-[calc(min(100vw-2*theme(container.padding),100%+8rem))] w-full overflow-clip rounded-lg bg-accent/50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-8 lg:grid-cols-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container flex flex-col items-center px-16 py-16 text-center lg:mx-auto lg:items-start lg:px-16 lg:py-32 lg:text-left", contentClassName), children: [
-      badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: badgeText }) : badgeText),
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty lg:text-6xl", headingClassName), children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      renderActions()
-    ] }),
-    renderShapes()
-  ] }) }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container flex flex-col items-center", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "2xl:w-[calc(min(100vw-2*theme(container.padding),100%+8rem))] w-full overflow-clip rounded-lg bg-accent/50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-8 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container flex flex-col items-center px-16 py-16 text-center lg:mx-auto lg:items-start lg:px-16 lg:py-32 lg:text-left", contentClassName), children: [
+          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: badgeText }) : badgeText),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty lg:text-6xl", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          renderActions()
+        ] }),
+        renderShapes()
+      ] }) }) })
+    }
+  );
 }
 function HeroCommunitySurveyCta({
   announcementPrimary = "Join our Community Collaboration Survey!",
@@ -42274,6 +42609,10 @@ function HeroCommunitySurveyCta({
   leftOverlayImage,
   rightOverlayImage,
   imagesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   announcementClassName,
@@ -42352,18 +42691,28 @@ function HeroCommunitySurveyCta({
       )
     ] });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cn("py-32", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container flex flex-col gap-7 text-center", containerClassName), children: [
-      renderAnnouncement(),
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mx-auto max-w-4xl text-4xl font-semibold text-balance lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-4xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col justify-center gap-4 sm:flex-row", actionsClassName), children: renderActions() })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative px-8", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 top-1/2 h-full w-full bg-linear-to-b from-muted to-transparent to-50%" }),
-      renderImages()
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container flex flex-col gap-7 text-center", containerClassName), children: [
+          renderAnnouncement(),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mx-auto max-w-4xl text-4xl font-semibold text-balance lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-4xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col justify-center gap-4 sm:flex-row", actionsClassName), children: renderActions() })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative px-8", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 top-1/2 h-full w-full bg-linear-to-b from-muted to-transparent to-50%" }),
+          renderImages()
+        ] })
+      ]
+    }
+  );
 }
 function HeroMarketplaceScatteredImages({
   heading,
@@ -42376,6 +42725,10 @@ function HeroMarketplaceScatteredImages({
   images,
   imagesSlot,
   showGridPattern = true,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -42415,16 +42768,26 @@ function HeroMarketplaceScatteredImages({
       index
     )) }) });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClassName, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative container mx-auto max-w-xl py-10 text-center", contentClassName), children: [
-      showGridPattern && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted))_1px,transparent_1px)] mask-[radial-gradient(ellipse_50%_100%_at_50%_50%,#000_60%,transparent_100%)] bg-size-[64px_64px]" }),
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-3 text-4xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-3 text-4xl lg:text-7xl", headingClassName), children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-5 text-sm text-muted-foreground md:text-base", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      renderAction(),
-      renderTagline()
-    ] }),
-    renderImages()
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClassName, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative container mx-auto max-w-xl py-10 text-center", contentClassName), children: [
+          showGridPattern && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted))_1px,transparent_1px)] mask-[radial-gradient(ellipse_50%_100%_at_50%_50%,#000_60%,transparent_100%)] bg-size-[64px_64px]" }),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-3 text-4xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-3 text-4xl lg:text-7xl", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-5 text-sm text-muted-foreground md:text-base", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          renderAction(),
+          renderTagline()
+        ] }),
+        renderImages()
+      ] })
+    }
+  );
 }
 function HeroBadgeShadowOverlay({
   announcementBadge,
@@ -42434,6 +42797,10 @@ function HeroBadgeShadowOverlay({
   actions,
   actionsSlot,
   backgroundImageUrl = "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/shadow-overlay.png",
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   announcementClassName,
@@ -42461,31 +42828,41 @@ function HeroBadgeShadowOverlay({
       );
     });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cn("relative py-32", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-10 text-center", children: [
-      (announcementBadge || announcementText) && /* @__PURE__ */ jsxRuntime.jsxs(
-        Pressable,
-        {
-          href: announcementHref,
-          className: cn("flex items-center gap-2 rounded-full px-2 py-1 text-sm transition-colors hover:bg-muted", announcementClassName),
-          children: [
-            announcementBadge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: announcementBadge }),
-            announcementText,
-            /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-          ]
-        }
-      ),
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-semibold lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-      (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row", actionsClassName), children: renderActions() })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "absolute inset-0 -z-10 bg-[50%_0] bg-no-repeat",
-        style: { backgroundImage: `url('${backgroundImageUrl}')` }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn("relative", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-10 text-center", children: [
+          (announcementBadge || announcementText) && /* @__PURE__ */ jsxRuntime.jsxs(
+            Pressable,
+            {
+              href: announcementHref,
+              className: cn("flex items-center gap-2 rounded-full px-2 py-1 text-sm transition-colors hover:bg-muted", announcementClassName),
+              children: [
+                announcementBadge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: announcementBadge }),
+                announcementText,
+                /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
+              ]
+            }
+          ),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-semibold lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row", actionsClassName), children: renderActions() })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute inset-0 -z-10 bg-[50%_0] bg-no-repeat",
+            style: { backgroundImage: `url('${backgroundImageUrl}')` }
+          }
+        )
+      ]
+    }
+  );
 }
 function HeroVideoBackgroundDark({
   badgeText,
@@ -42493,8 +42870,12 @@ function HeroVideoBackgroundDark({
   description,
   actions,
   actionsSlot,
-  videoSrc = videoPlaceholders[0],
+  videoSrc,
   videoSlot,
+  background = "dark",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   contentClassName,
   headingClassName,
@@ -42535,15 +42916,25 @@ function HeroVideoBackgroundDark({
       }
     );
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cn("dark relative h-screen bg-background", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative z-10 container mx-auto flex size-full max-w-3xl flex-col justify-center gap-4 lg:items-center lg:text-center", contentClassName), children: [
-      badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: badgeText }) : badgeText),
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-5xl font-bold text-foreground lg:text-[4.2rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-5xl font-bold text-foreground lg:text-[4.2rem]", headingClassName), children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      renderActions()
-    ] }),
-    renderVideo()
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative z-10 container mx-auto flex size-full max-w-3xl flex-col justify-center gap-4 lg:items-center lg:text-center", contentClassName), children: [
+          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: badgeText }) : badgeText),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-5xl font-bold text-foreground lg:text-[4.2rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-5xl font-bold text-foreground lg:text-[4.2rem]", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          renderActions()
+        ] }),
+        renderVideo()
+      ]
+    }
+  );
 }
 function HeroGridPatternEfficiency({
   heading,
@@ -42553,6 +42944,10 @@ function HeroGridPatternEfficiency({
   actionSlot,
   actionSubtext = "No credit card required.",
   showGridPattern = true,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -42580,15 +42975,25 @@ function HeroGridPatternEfficiency({
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-block before:absolute before:top-0 before:-right-2 before:-bottom-2 before:-left-4 before:-z-10 before:rounded-lg before:bg-muted-foreground/15", children: highlightedWord })
     ] });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative max-w-5xl", contentClassName), children: [
-    showGridPattern && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted))_1px,transparent_1px)] mask-[radial-gradient(ellipse_50%_100%_at_50%_50%,#000_60%,transparent_100%)] bg-size-[64px_64px]" }),
-    renderHeading(),
-    description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-7 text-xl font-light lg:text-3xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-12 flex w-fit flex-col gap-2.5 text-center", actionClassName), children: [
-      renderAction(),
-      actionSubtext && (typeof actionSubtext === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: actionSubtext }) : actionSubtext)
-    ] })
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative max-w-5xl", contentClassName), children: [
+        showGridPattern && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted))_1px,transparent_1px)] mask-[radial-gradient(ellipse_50%_100%_at_50%_50%,#000_60%,transparent_100%)] bg-size-[64px_64px]" }),
+        renderHeading(),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-7 text-xl font-light lg:text-3xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-12 flex w-fit flex-col gap-2.5 text-center", actionClassName), children: [
+          renderAction(),
+          actionSubtext && (typeof actionSubtext === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: actionSubtext }) : actionSubtext)
+        ] })
+      ] }) })
+    }
+  );
 }
 function HeroDashedBorderFeatures({
   badgeText,
@@ -42599,9 +43004,13 @@ function HeroDashedBorderFeatures({
   description,
   actions,
   actionsSlot,
-  demoAvatarSrc = imagePlaceholders[15],
+  demoAvatarSrc,
   features,
   featuresSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -42686,19 +43095,29 @@ function HeroDashedBorderFeatures({
       index
     ));
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("border-x border-t border-dashed px-4 py-20 md:px-16", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl", children: [
-      renderAnnouncement(),
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto mb-6 max-w-2xl text-center text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col justify-center gap-2 sm:flex-row", actionsClassName), children: renderActions() })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative grid border-x border-dashed md:grid-cols-3", featuresClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/sparkle", size: 20, className: "absolute top-0 right-0 translate-x-2.5 -translate-y-2.5 fill-primary" }),
-      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/sparkle", size: 20, className: "absolute top-0 left-0 -translate-x-2.5 -translate-y-2.5 fill-primary" }),
-      renderFeatures()
-    ] })
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("border-x border-t border-dashed px-4 py-20 md:px-16", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl", children: [
+          renderAnnouncement(),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto mb-6 max-w-2xl text-center text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col justify-center gap-2 sm:flex-row", actionsClassName), children: renderActions() })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative grid border-x border-dashed md:grid-cols-3", featuresClassName), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/sparkle", size: 20, className: "absolute top-0 right-0 translate-x-2.5 -translate-y-2.5 fill-primary" }),
+          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/sparkle", size: 20, className: "absolute top-0 left-0 -translate-x-2.5 -translate-y-2.5 fill-primary" }),
+          renderFeatures()
+        ] })
+      ] })
+    }
+  );
 }
 function HeroDesignCarouselPortfolio({
   logo,
@@ -42708,11 +43127,15 @@ function HeroDesignCarouselPortfolio({
   heading,
   description,
   primaryAction,
-  primaryActionAvatar = imagePlaceholders[16],
+  primaryActionAvatar,
   secondaryAction,
   actionsSlot,
   carouselImages,
   carouselSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -42818,21 +43241,31 @@ function HeroDesignCarouselPortfolio({
       }
     );
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cn("relative bg-background py-14", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative z-10 container mx-auto", containerClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-8", children: renderLogo() }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-10 py-10 lg:py-28", contentClassName), children: [
-        renderFeatures(),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-4", children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-6xl text-4xl tracking-tighter text-foreground lg:text-7xl xl:text-9xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-6xl text-4xl tracking-tighter text-foreground lg:text-7xl xl:text-9xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-foreground lg:text-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-foreground lg:text-2xl", descriptionClassName), children: description }))
-        ] }) }),
-        actionsSlot || renderPrimaryAction()
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex flex-col", children: renderCarousel() }),
-    actionsSlot || renderSecondaryAction()
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn("relative", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative z-10 container mx-auto", containerClassName), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-8", children: renderLogo() }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-10 py-10 lg:py-28", contentClassName), children: [
+            renderFeatures(),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-4", children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-6xl text-4xl tracking-tighter text-foreground lg:text-7xl xl:text-9xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-6xl text-4xl tracking-tighter text-foreground lg:text-7xl xl:text-9xl", headingClassName), children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-foreground lg:text-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-foreground lg:text-2xl", descriptionClassName), children: description }))
+            ] }) }),
+            actionsSlot || renderPrimaryAction()
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex flex-col", children: renderCarousel() }),
+        actionsSlot || renderSecondaryAction()
+      ]
+    }
+  );
 }
 function HeroGradientClientFocused({
   heading,
@@ -42841,6 +43274,10 @@ function HeroGradientClientFocused({
   actionsSlot,
   image,
   imageSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headingClassName,
@@ -42884,7 +43321,7 @@ function HeroGradientClientFocused({
     );
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "section",
+    Section,
     {
       className: cn(
         "bg-gradient-to-b from-accent/5 to-primary/5 py-20 text-center",
@@ -42912,6 +43349,10 @@ function HeroPremiumSplitAvatars({
   socialProofText = "More than 1 million professionals rely on our platform",
   image,
   imageSlot,
+  background = "dark",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   contentClassName,
   headingClassName,
@@ -42961,18 +43402,28 @@ function HeroPremiumSplitAvatars({
       }
     );
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cn("dark flex", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center bg-background lg:w-1/2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container my-10 flex w-[500px] flex-col gap-24", contentClassName), children: [
-      renderBrand(),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-4xl text-foreground lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-4xl text-foreground lg:text-6xl", headingClassName), children: heading })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2.5 text-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-        renderAction()
-      ] }),
-      renderAvatars()
-    ] }) }),
-    renderImage()
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn("dark flex", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center bg-background lg:w-1/2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container my-10 flex w-[500px] flex-col gap-24", contentClassName), children: [
+          renderBrand(),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-4xl text-foreground lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-4xl text-foreground lg:text-6xl", headingClassName), children: heading })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2.5 text-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+            renderAction()
+          ] }),
+          renderAvatars()
+        ] }) }),
+        renderImage()
+      ]
+    }
+  );
 }
 function HeroUiLibraryShowcase({
   logo,
@@ -42983,6 +43434,10 @@ function HeroUiLibraryShowcase({
   actionsSlot,
   image,
   imageSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   headerClassName,
   headingClassName,
@@ -43038,7 +43493,7 @@ function HeroUiLibraryShowcase({
     ) }) });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "section",
+    Section,
     {
       className: cn(
         "container mx-auto mt-32 flex flex-col items-center gap-20 bg-background md:gap-40 md:text-center",
@@ -43063,8 +43518,12 @@ function HeroFullscreenBackgroundImage({
   description,
   actions,
   actionsSlot,
-  backgroundImage = imagePlaceholders[33],
+  backgroundImage,
   noiseOverlayUrl = "https://cdn.ing/assets/i/r/286188/zrqcp9hynh3j7p2laihwzfbujgrl/noise.png",
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   contentClassName,
   headingClassName,
@@ -43093,7 +43552,7 @@ function HeroFullscreenBackgroundImage({
     });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "section",
+    Section,
     {
       className: cn(
         "dark relative flex h-svh max-h-[1400px] w-svw overflow-hidden bg-cover bg-center bg-no-repeat font-sans after:absolute after:top-0 after:left-0 after:z-10 after:h-full after:w-full after:bg-black/20 after:content-[''] md:h-svh",
@@ -43124,7 +43583,11 @@ function HeroFullscreenLogoCta({
   description,
   action,
   actionSlot,
-  backgroundImage = imagePlaceholders[34],
+  backgroundImage,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -43165,7 +43628,7 @@ function HeroFullscreenLogoCta({
     );
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "section",
+    Section,
     {
       className: cn(
         "dark h-screen w-screen bg-background bg-cover bg-center bg-no-repeat pt-12 pb-24",
@@ -43201,6 +43664,10 @@ function HeroGradientAvatarsRating({
   starCount = 5,
   images,
   imagesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -43297,30 +43764,40 @@ function HeroGradientAvatarsRating({
       ) })
     ] });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cn("relative overflow-hidden py-32", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-x-0 -top-20 -bottom-20 bg-[radial-gradient(ellipse_35%_15%_at_40%_55%,hsl(var(--accent))_0%,transparent_100%)] lg:bg-[radial-gradient(ellipse_12%_20%_at_60%_45%,hsl(var(--accent))_0%,transparent_100%)]" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-x-0 -top-20 -bottom-20 bg-[radial-gradient(ellipse_35%_20%_at_70%_75%,hsl(var(--accent))_0%,transparent_80%)] lg:bg-[radial-gradient(ellipse_15%_30%_at_70%_65%,hsl(var(--accent))_0%,transparent_80%)]" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-x-0 -top-20 -bottom-20 bg-[radial-gradient(hsl(var(--accent-foreground)/0.1)_1px,transparent_1px)] mask-[radial-gradient(ellipse_60%_60%_at_65%_50%,#000_0%,transparent_80%)] bg-size-[8px_8px]" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative z-10 container mx-auto px-4", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-8 lg:grid-cols-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center text-center lg:items-start lg:text-left", contentClassName), children: [
-        renderTopLink(),
-        heading && /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: cn("text-4xl font-semibold sm:text-5xl", headingClassName), children: [
-          typeof heading === "string" ? heading : heading,
-          headingSubtitle && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: headingSubtitle })
-          ] })
-        ] }),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("my-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-        renderActions(),
-        (avatars || avatarsSlot || ratingValue || ratingLabel) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 flex flex-col items-center gap-4 sm:flex-row sm:items-center", children: [
-          renderAvatars(),
-          renderRating()
-        ] })
-      ] }),
-      renderImages()
-    ] }) })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-x-0 -top-20 -bottom-20 bg-[radial-gradient(ellipse_35%_15%_at_40%_55%,hsl(var(--accent))_0%,transparent_100%)] lg:bg-[radial-gradient(ellipse_12%_20%_at_60%_45%,hsl(var(--accent))_0%,transparent_100%)]" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-x-0 -top-20 -bottom-20 bg-[radial-gradient(ellipse_35%_20%_at_70%_75%,hsl(var(--accent))_0%,transparent_80%)] lg:bg-[radial-gradient(ellipse_15%_30%_at_70%_65%,hsl(var(--accent))_0%,transparent_80%)]" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-x-0 -top-20 -bottom-20 bg-[radial-gradient(hsl(var(--accent-foreground)/0.1)_1px,transparent_1px)] mask-[radial-gradient(ellipse_60%_60%_at_65%_50%,#000_0%,transparent_80%)] bg-size-[8px_8px]" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative z-10 container mx-auto px-4", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-8 lg:grid-cols-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center text-center lg:items-start lg:text-left", contentClassName), children: [
+            renderTopLink(),
+            heading && /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: cn("text-4xl font-semibold sm:text-5xl", headingClassName), children: [
+              typeof heading === "string" ? heading : heading,
+              headingSubtitle && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: headingSubtitle })
+              ] })
+            ] }),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("my-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+            renderActions(),
+            (avatars || avatarsSlot || ratingValue || ratingLabel) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 flex flex-col items-center gap-4 sm:flex-row sm:items-center", children: [
+              renderAvatars(),
+              renderRating()
+            ] })
+          ] }),
+          renderImages()
+        ] }) })
+      ]
+    }
+  );
 }
 function HeroTaskTimerAnimated({
   heading,
@@ -43328,6 +43805,10 @@ function HeroTaskTimerAnimated({
   actionsSlot,
   images,
   imagesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   headerClassName,
   headingClassName,
@@ -43413,7 +43894,7 @@ function HeroTaskTimerAnimated({
     ] });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "section",
+    Section,
     {
       className: cn(
         "container flex flex-col gap-10 bg-background py-20 sm:gap-20",
@@ -43441,6 +43922,10 @@ function HeroAiPoweredCarousel({
   desktopCarouselImages1,
   desktopCarouselImages2,
   carouselSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -43471,117 +43956,127 @@ function HeroAiPoweredCarousel({
       );
     });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-16 lg:grid-cols-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto", contentClassName), children: [
-      (badge || badgeTagline) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-fit items-center gap-2 rounded-full border px-2.5 py-1.5 text-xs font-medium", badgeClassName), children: [
-        badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: badge }),
-        badgeTagline
-      ] }),
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-10 mb-4 text-3xl font-semibold lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-10 flex flex-col gap-2 sm:flex-row", actionsClassName), children: renderActions() })
-    ] }),
-    carouselSlot ? carouselSlot : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-8 lg:hidden", children: [
-        mobileCarouselImages1 && mobileCarouselImages1.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-          Carousel,
-          {
-            opts: {
-              loop: true
-            },
-            plugins: [
-              AutoScroll3__default.default({
-                speed: 0.8
-              })
-            ],
-            className: "-mx-7",
-            children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "max-h-[350px]", children: mobileCarouselImages1.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { className: "max-w-96", children: /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-16 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto", contentClassName), children: [
+          (badge || badgeTagline) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-fit items-center gap-2 rounded-full border px-2.5 py-1.5 text-xs font-medium", badgeClassName), children: [
+            badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: badge }),
+            badgeTagline
+          ] }),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-10 mb-4 text-3xl font-semibold lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-10 flex flex-col gap-2 sm:flex-row", actionsClassName), children: renderActions() })
+        ] }),
+        carouselSlot ? carouselSlot : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-8 lg:hidden", children: [
+            mobileCarouselImages1 && mobileCarouselImages1.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              Carousel,
               {
-                src: image.src,
-                alt: image.alt,
-                className: image.className,
-                optixFlowConfig
+                opts: {
+                  loop: true
+                },
+                plugins: [
+                  AutoScroll3__default.default({
+                    speed: 0.8
+                  })
+                ],
+                className: "-mx-7",
+                children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "max-h-[350px]", children: mobileCarouselImages1.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { className: "max-w-96", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  img.Img,
+                  {
+                    src: image.src,
+                    alt: image.alt,
+                    className: image.className,
+                    optixFlowConfig
+                  }
+                ) }, index)) })
               }
-            ) }, index)) })
-          }
-        ),
-        mobileCarouselImages2 && mobileCarouselImages2.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-          Carousel,
-          {
-            opts: {
-              loop: true
-            },
-            plugins: [
-              AutoScroll3__default.default({
-                speed: 0.8,
-                direction: "backward"
-              })
-            ],
-            className: "-mx-7",
-            children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "max-h-[350px]", children: mobileCarouselImages2.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { className: "max-w-96", children: /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
+            ),
+            mobileCarouselImages2 && mobileCarouselImages2.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              Carousel,
               {
-                src: image.src,
-                alt: image.alt,
-                className: image.className,
-                optixFlowConfig
+                opts: {
+                  loop: true
+                },
+                plugins: [
+                  AutoScroll3__default.default({
+                    speed: 0.8,
+                    direction: "backward"
+                  })
+                ],
+                className: "-mx-7",
+                children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "max-h-[350px]", children: mobileCarouselImages2.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { className: "max-w-96", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  img.Img,
+                  {
+                    src: image.src,
+                    alt: image.alt,
+                    className: image.className,
+                    optixFlowConfig
+                  }
+                ) }, index)) })
               }
-            ) }, index)) })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden grid-cols-2 gap-8 lg:grid", children: [
-        desktopCarouselImages1 && desktopCarouselImages1.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-          Carousel,
-          {
-            opts: {
-              loop: true
-            },
-            plugins: [
-              AutoScroll3__default.default({
-                speed: 0.8
-              })
-            ],
-            orientation: "vertical",
-            children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "max-h-[600px]", children: desktopCarouselImages1.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden grid-cols-2 gap-8 lg:grid", children: [
+            desktopCarouselImages1 && desktopCarouselImages1.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              Carousel,
               {
-                src: image.src,
-                alt: image.alt,
-                className: image.className,
-                optixFlowConfig
+                opts: {
+                  loop: true
+                },
+                plugins: [
+                  AutoScroll3__default.default({
+                    speed: 0.8
+                  })
+                ],
+                orientation: "vertical",
+                children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "max-h-[600px]", children: desktopCarouselImages1.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                  img.Img,
+                  {
+                    src: image.src,
+                    alt: image.alt,
+                    className: image.className,
+                    optixFlowConfig
+                  }
+                ) }, index)) })
               }
-            ) }, index)) })
-          }
-        ),
-        desktopCarouselImages2 && desktopCarouselImages2.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-          Carousel,
-          {
-            opts: {
-              loop: true
-            },
-            plugins: [
-              AutoScroll3__default.default({
-                speed: 0.8,
-                direction: "backward"
-              })
-            ],
-            orientation: "vertical",
-            children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "max-h-[600px]", children: desktopCarouselImages2.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
+            ),
+            desktopCarouselImages2 && desktopCarouselImages2.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              Carousel,
               {
-                src: image.src,
-                alt: image.alt,
-                className: image.className,
-                optixFlowConfig
+                opts: {
+                  loop: true
+                },
+                plugins: [
+                  AutoScroll3__default.default({
+                    speed: 0.8,
+                    direction: "backward"
+                  })
+                ],
+                orientation: "vertical",
+                children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "max-h-[600px]", children: desktopCarouselImages2.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                  img.Img,
+                  {
+                    src: image.src,
+                    alt: image.alt,
+                    className: image.className,
+                    optixFlowConfig
+                  }
+                ) }, index)) })
               }
-            ) }, index)) })
-          }
-        )
-      ] })
-    ] })
-  ] }) }) });
+            )
+          ] })
+        ] })
+      ] }) })
+    }
+  );
 }
 function HeroAdCampaignExpert({
   heading,
@@ -43589,8 +44084,12 @@ function HeroAdCampaignExpert({
   description,
   action,
   actionSlot,
-  imageSrc = imagePlaceholders[60],
+  imageSrc,
   imageAlt = "",
+  background = "muted",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -43618,44 +44117,58 @@ function HeroAdCampaignExpert({
       }
     );
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("pb-24", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("bg-muted pt-16 lg:pt-24", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col items-center lg:flex-row lg:items-start", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative flex flex-col items-start gap-8 pb-20 lg:w-1/2", contentClassName), children: [
-      (heading || headingHighlight) && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl leading-tight font-bold tracking-tighter text-foreground lg:text-5xl", headingClassName), children: heading }) : heading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading }) : headingHighlight ? /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: cn("text-3xl leading-tight font-bold tracking-tighter text-foreground lg:text-5xl", headingClassName), children: [
-        "Your ad campaigns excel with",
-        " ",
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-muted2 border-b-2", children: headingHighlight }),
-        ", delivering optimized performance."
-      ] }) : null),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      renderAction()
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative flex w-full justify-center lg:w-1/2", imageContainerClassName), children: [
-      imageSrc && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 -mb-16 h-auto w-[80%] max-w-[355px] lg:w-[520px]", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 355 / 520, className: "border-muted2 border", children: /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: imageSrc,
-          alt: imageAlt,
-          className: cn("size-full object-cover", imageClassName),
-          optixFlowConfig
-        }
-      ) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 w-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 2, className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
-        AspectRatio,
-        {
-          ratio: 1,
-          className: "absolute w-full rounded-full bg-muted"
-        }
-      ) }) })
-    ] })
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn("pb-24", className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pt-16 lg:pt-24", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center lg:flex-row lg:items-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative flex flex-col items-start gap-8 pb-20 lg:w-1/2", contentClassName), children: [
+          (heading || headingHighlight) && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl leading-tight font-bold tracking-tighter text-foreground lg:text-5xl", headingClassName), children: heading }) : heading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading }) : headingHighlight ? /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: cn("text-3xl leading-tight font-bold tracking-tighter text-foreground lg:text-5xl", headingClassName), children: [
+            "Your ad campaigns excel with",
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-muted2 border-b-2", children: headingHighlight }),
+            ", delivering optimized performance."
+          ] }) : null),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          renderAction()
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative flex w-full justify-center lg:w-1/2", imageContainerClassName), children: [
+          imageSrc && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 -mb-16 h-auto w-[80%] max-w-[355px] lg:w-[520px]", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 355 / 520, className: "border-muted2 border", children: /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: imageSrc,
+              alt: imageAlt,
+              className: cn("size-full object-cover", imageClassName),
+              optixFlowConfig
+            }
+          ) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 w-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 2, className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
+            AspectRatio,
+            {
+              ratio: 1,
+              className: "absolute w-full rounded-full bg-muted"
+            }
+          ) }) })
+        ] })
+      ] }) })
+    }
+  );
 }
 function HeroAdaptableProductGrid({
   heading,
   description,
   action,
   actionSlot,
-  imageSrc = logoPlaceholders.logoMark,
+  imageSrc,
   imageAlt = "placeholder",
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headingClassName,
@@ -43684,27 +44197,37 @@ function HeroAdaptableProductGrid({
       }
     );
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-    heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-5xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-14 grid gap-10 lg:grid-cols-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: contentClassName, children: [
-        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-        renderAction()
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative flex items-center justify-center overflow-hidden", imageContainerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute inset-0 -top-1 -z-10 mx-auto h-full w-full max-w-3xl bg-[linear-gradient(to_right,hsl(var(--muted-foreground))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted-foreground))_1px,transparent_1px)] mask-[radial-gradient(ellipse_50%_100%_at_50%_50%,#000_60%,transparent_100%)] bg-size-[56px_56px] opacity-15", gridPatternClassName) }),
-        imageSrc && /* @__PURE__ */ jsxRuntime.jsx(
-          img.Img,
-          {
-            src: imageSrc,
-            alt: imageAlt,
-            className: cn("max-h-[400px]", imageClassName),
-            optixFlowConfig
-          }
-        )
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-5xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-14 grid gap-10 lg:grid-cols-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: contentClassName, children: [
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+            renderAction()
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative flex items-center justify-center overflow-hidden", imageContainerClassName), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute inset-0 -top-1 -z-10 mx-auto h-full w-full max-w-3xl bg-[linear-gradient(to_right,hsl(var(--muted-foreground))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted-foreground))_1px,transparent_1px)] mask-[radial-gradient(ellipse_50%_100%_at_50%_50%,#000_60%,transparent_100%)] bg-size-[56px_56px] opacity-15", gridPatternClassName) }),
+            imageSrc && /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: imageSrc,
+                alt: imageAlt,
+                className: cn("max-h-[400px]", imageClassName),
+                optixFlowConfig
+              }
+            )
+          ] })
+        ] })
       ] })
-    ] })
-  ] }) });
+    }
+  );
 }
 function HeroPresentationPlatformVideo({
   subtitle,
@@ -43712,8 +44235,12 @@ function HeroPresentationPlatformVideo({
   description,
   actions,
   actionsSlot,
-  videoSrc = videoPlaceholders[0],
+  videoSrc,
   videoSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   contentClassName,
   headingClassName,
@@ -43758,7 +44285,7 @@ function HeroPresentationPlatformVideo({
     ) });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "section",
+    Section,
     {
       className: cn(
         "flex min-h-screen items-center justify-between bg-background py-14",
@@ -43787,6 +44314,10 @@ function HeroGridPatternSolutions({
   images,
   imagesSlot,
   showGridPattern = true,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -43845,18 +44376,28 @@ function HeroGridPatternSolutions({
       index
     )) });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative overflow-hidden", children: [
-      showGridPattern && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 -top-1 -left-1 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted-foreground))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted-foreground))_1px,transparent_1px)] mask-[radial-gradient(ellipse_50%_100%_at_50%_50%,transparent_60%,#000_100%)] bg-size-[92px_92px] opacity-15" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl", contentClassName), children: [
-        renderBadge(),
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl", headingClassName), children: heading })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto mb-8 max-w-2xl text-center text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-        renderActions()
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative overflow-hidden", children: [
+          showGridPattern && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 -top-1 -left-1 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted-foreground))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted-foreground))_1px,transparent_1px)] mask-[radial-gradient(ellipse_50%_100%_at_50%_50%,transparent_60%,#000_100%)] bg-size-[92px_92px] opacity-15" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl", contentClassName), children: [
+            renderBadge(),
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl", headingClassName), children: heading })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto mb-8 max-w-2xl text-center text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+            renderActions()
+          ] })
+        ] }),
+        renderImages()
       ] })
-    ] }),
-    renderImages()
-  ] }) });
+    }
+  );
 }
 function HeroCrmStreamlined({
   tagline,
@@ -43866,6 +44407,10 @@ function HeroCrmStreamlined({
   actionSlot,
   image,
   imageSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -43893,26 +44438,36 @@ function HeroCrmStreamlined({
       }
     );
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("overflow-hidden font-sans", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-between gap-10 md:flex-row", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("basis-2/4", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-10 flex flex-col gap-2", children: [
-      tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-base font-semibold text-muted-foreground", taglineClassName), children: tagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: taglineClassName, children: tagline })),
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-2 text-4xl leading-snug! font-medium text-black lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-2 text-lg text-black/80", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      renderAction()
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative basis-[42%] py-9 md:py-16", imageClassName), children: imageSlot ? imageSlot : image ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aspect-square w-full overflow-hidden", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: image.src,
-          alt: image.alt,
-          className: cn("relative z-20 h-full w-full object-cover object-center", image.className),
-          optixFlowConfig
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-25 z-10 aspect-[1.378254211/1] h-full w-225 bg-muted" })
-    ] }) : null })
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn("overflow-hidden font-sans", className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-between gap-10 md:flex-row", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("basis-2/4", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-10 flex flex-col gap-2", children: [
+          tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-base font-semibold text-muted-foreground", taglineClassName), children: tagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: taglineClassName, children: tagline })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-2 text-4xl leading-snug! font-medium text-black lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-2 text-lg text-black/80", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          renderAction()
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative basis-[42%] py-9 md:py-16", imageClassName), children: imageSlot ? imageSlot : image ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aspect-square w-full overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: image.src,
+              alt: image.alt,
+              className: cn("relative z-20 h-full w-full object-cover object-center", image.className),
+              optixFlowConfig
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-25 z-10 aspect-[1.378254211/1] h-full w-225 bg-muted" })
+        ] }) : null })
+      ] }) })
+    }
+  );
 }
 function HeroBillingPlatformLogos({
   heading,
@@ -43926,6 +44481,10 @@ function HeroBillingPlatformLogos({
   logos,
   logosSlot,
   backgroundNoiseUrl = "https://cdn.ing/assets/i/r/286188/zrqcp9hynh3j7p2laihwzfbujgrl/noise.png",
+  background = "dark",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -43972,10 +44531,14 @@ function HeroBillingPlatformLogos({
     });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "section",
+    Section,
     {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
       className: cn(
-        "dark bg-background py-12 font-sans md:py-20",
+        "dark font-sans",
         className
       ),
       style: { backgroundImage: backgroundNoiseUrl ? `url('${backgroundNoiseUrl}')` : void 0 },
@@ -44184,6 +44747,10 @@ function HeroSoftwareGrowthVideoDialog({
   showcaseImagesSlot,
   videoDialog,
   onVideoClick,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headingClassName,
@@ -44266,7 +44833,7 @@ function HeroSoftwareGrowthVideoDialog({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(React13.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      "section",
+      Section,
       {
         className: cn("font-dm_sans bg-background py-12 md:py-24", className),
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container max-w-[1440px]", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
@@ -44307,6 +44874,10 @@ function HeroConversionVideoPlay({
   logosTagline = "Trusted by these brands and many others",
   logos,
   logosSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -44381,30 +44952,40 @@ function HeroConversionVideoPlay({
     });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(React13.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cn("bg-background py-12 md:py-20", className), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden border-b border-muted", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-16 md:gap-24", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-8", contentClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-7", children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-[920px] text-center text-4xl leading-tight font-semibold text-foreground md:text-6xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-[750px] text-center text-base leading-relaxed font-normal text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-8", actionsClassName), children: renderActions() })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: imageSlot ? imageSlot : image ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative h-fit w-full", imageClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-20 w-full max-w-330 overflow-hidden rounded-t-xl md:rounded-t-3xl", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 2.095238095 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
-          img.Img,
-          {
-            src: image.src,
-            alt: image.alt,
-            className: cn("size-full object-cover object-center", image.className),
-            optixFlowConfig
-          }
-        ) }) }) }) : null })
-      ] }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-16 py-20", logosClassName), children: [
-        logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-xl font-medium text-primary", children: logosTagline }) : logosTagline),
-        (logosSlot || logos && logos.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-20", children: renderLogos() })
-      ] }) })
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Section,
+      {
+        background,
+        spacing,
+        pattern,
+        patternOpacity,
+        className: cn(className),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden border-b border-muted", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-16 md:gap-24", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-8", contentClassName), children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-7", children: [
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-[920px] text-center text-4xl leading-tight font-semibold text-foreground md:text-6xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-[750px] text-center text-base leading-relaxed font-normal text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-8", actionsClassName), children: renderActions() })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: imageSlot ? imageSlot : image ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative h-fit w-full", imageClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-20 w-full max-w-330 overflow-hidden rounded-t-xl md:rounded-t-3xl", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 2.095238095 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: image.src,
+                alt: image.alt,
+                className: cn("size-full object-cover object-center", image.className),
+                optixFlowConfig
+              }
+            ) }) }) }) : null })
+          ] }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-16 py-20", logosClassName), children: [
+            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-xl font-medium text-primary", children: logosTagline }) : logosTagline),
+            (logosSlot || logos && logos.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-20", children: renderLogos() })
+          ] }) })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isVideoOpen, onOpenChange: setIsVideoOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-[800px]", children: [
       /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: videoDialogTitle }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -44430,6 +45011,10 @@ function HeroDesignShowcaseLogos({
   logosSlot,
   showcaseImage,
   showcaseSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -44494,17 +45079,27 @@ function HeroDesignShowcaseLogos({
       }
     ) }) }) });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cn("bg-background py-12 md:py-20", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-8", contentClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-[920px] flex-col items-center gap-6", children: [
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-6 text-center text-[2.75rem] leading-tight font-semibold text-foreground md:text-[3.5rem] lg:text-[4.375rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-6 text-center text-[2.75rem] leading-tight font-semibold text-foreground md:text-[3.5rem] lg:text-[4.375rem]", headingClassName), children: heading })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderActions() }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderLogos() })
-    ] }) }),
-    renderShowcase()
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-8", contentClassName), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-[920px] flex-col items-center gap-6", children: [
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-6 text-center text-[2.75rem] leading-tight font-semibold text-foreground md:text-[3.5rem] lg:text-[4.375rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-6 text-center text-[2.75rem] leading-tight font-semibold text-foreground md:text-[3.5rem] lg:text-[4.375rem]", headingClassName), children: heading })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderActions() }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderLogos() })
+        ] }) }),
+        renderShowcase()
+      ]
+    }
+  );
 }
 function HeroVideoOverlayStars({
   heading,
@@ -44512,9 +45107,13 @@ function HeroVideoOverlayStars({
   actionSlot,
   trust,
   trustSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   headingClassName,
-  videoSrc = videoPlaceholders[0],
+  videoSrc,
   videoSlot
 }) {
   const renderAction = () => {
@@ -44566,7 +45165,7 @@ function HeroVideoOverlayStars({
     ) });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "section",
+    Section,
     {
       className: cn(
         "dark relative h-svh max-h-[1400px] min-h-[600px] w-full overflow-hidden bg-background px-5 font-sans",
@@ -44592,8 +45191,12 @@ function HeroProductivityLauncherVideo({
   versionInfoSlot,
   secondaryCta,
   secondaryCtaSlot,
-  videoSrc = videoPlaceholders[1],
+  videoSrc,
   videoSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   contentClassName,
   headingClassName,
@@ -44669,7 +45272,7 @@ function HeroProductivityLauncherVideo({
     ) });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "section",
+    Section,
     {
       className: cn(
         "dark relative overflow-hidden bg-background py-12 font-sans md:py-20",
@@ -44701,7 +45304,11 @@ function HeroHiringAnimatedText({
   actionsSlot,
   scrollAction,
   scrollActionSlot,
-  backgroundImage = imagePlaceholders[84],
+  backgroundImage,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -44762,7 +45369,7 @@ function HeroHiringAnimatedText({
     ] }) });
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "section",
+    Section,
     {
       className: cn(
         "dark relative h-svh max-h-[1400px] w-full bg-cover bg-position-[100%] bg-no-repeat before:absolute before:top-0 before:left-0 before:size-full before:bg-[radial-gradient(circle_at_100%_-100%,transparent_40%,rgba(0,0,0,.75)_85%)] before:content-['']",
@@ -44789,6 +45396,10 @@ function HeroSplitImageNewsletter({
   newsletterFormSlot,
   image,
   imageSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -44841,7 +45452,7 @@ function HeroSplitImageNewsletter({
     ) });
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "section",
+    Section,
     {
       className: cn(
         "relative flex min-h-screen items-center justify-center bg-background py-14 font-sans",
@@ -44868,6 +45479,10 @@ function HeroCenteredGradientCta({
   actionsSlot,
   features,
   featuresSlot,
+  background = "muted",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   gradientClassName,
@@ -44907,7 +45522,7 @@ function HeroCenteredGradientCta({
     ] }, index));
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "section",
+    Section,
     {
       className: cn(
         "relative min-h-screen overflow-hidden bg-background py-32",
@@ -44942,10 +45557,14 @@ function HeroStatsSocialProof({
   actionsSlot,
   stats,
   statsSlot,
-  imageSrc = imagePlaceholders[86],
+  imageSrc,
   imageAlt = "Platform dashboard",
   statusCard,
   statusCardSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -44997,30 +45616,40 @@ function HeroStatsSocialProof({
       ] })
     ] }) });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("bg-background py-20 md:py-32", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
-      badge && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("inline-flex w-fit items-center gap-2 rounded-full bg-primary/10 px-4 py-2 text-sm font-medium text-primary", badgeClassName), children: [
-        badgeIcon,
-        typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: badge }) : badge
-      ] }),
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-4 sm:flex-row", actionsClassName), children: renderActions() }),
-      (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-3 gap-8 pt-8 border-t border-border", statsClassName), children: renderStats() })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      imageSrc && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("aspect-square overflow-hidden rounded-2xl bg-muted", imageClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: imageSrc,
-          alt: imageAlt,
-          className: "h-full w-full object-cover",
-          optixFlowConfig
-        }
-      ) }),
-      renderStatusCard()
-    ] })
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
+          badge && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("inline-flex w-fit items-center gap-2 rounded-full bg-primary/10 px-4 py-2 text-sm font-medium text-primary", badgeClassName), children: [
+            badgeIcon,
+            typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: badge }) : badge
+          ] }),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-4 sm:flex-row", actionsClassName), children: renderActions() }),
+          (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-3 gap-8 pt-8 border-t border-border", statsClassName), children: renderStats() })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          imageSrc && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("aspect-square overflow-hidden rounded-2xl bg-muted", imageClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: imageSrc,
+              alt: imageAlt,
+              className: "h-full w-full object-cover",
+              optixFlowConfig
+            }
+          ) }),
+          renderStatusCard()
+        ] })
+      ] }) })
+    }
+  );
 }
 function HeroFeatureCardsGrid({
   heading,
@@ -45029,6 +45658,10 @@ function HeroFeatureCardsGrid({
   actionsSlot,
   features,
   featuresSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -45074,14 +45707,24 @@ function HeroFeatureCardsGrid({
       index
     )) });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("bg-background py-20 md:py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl text-center", contentClassName), children: [
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      renderActions()
-    ] }),
-    renderFeatures()
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl text-center", contentClassName), children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          renderActions()
+        ] }),
+        renderFeatures()
+      ] })
+    }
+  );
 }
 function HeroTestimonialImageGrid({
   heading,
@@ -45180,7 +45823,7 @@ function HeroTestimonialImageGrid({
       ) }) }) })
     ] }) }) }) });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-12 md:py-20", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-8 md:flex-row", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Section, { className: cn("py-12 md:py-20", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-8 md:flex-row", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 lg:gap-8", children: [
         heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("leading-tighter max-w-[80%] text-4xl font-semibold tracking-tight text-foreground lg:text-5xl xl:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("leading-tighter max-w-[80%] text-4xl font-semibold tracking-tight text-foreground lg:text-5xl xl:text-7xl", headingClassName), children: heading })),
@@ -45199,9 +45842,13 @@ function HeroDesignSystem3d({
   description,
   actions,
   actionsSlot,
-  logoMarkSrc = logoPlaceholders.logoMark,
+  logoMarkSrc,
   images,
   imagesSlot,
+  background = "muted",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -45310,15 +45957,25 @@ function HeroDesignSystem3d({
       ) }) })
     ] });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("bg-muted pt-12 font-sans md:pt-20", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-396 px-0 sm:px-8", containerClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container px-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex max-w-100 flex-col items-center gap-6 sm:max-w-125 lg:max-w-160", contentClassName), children: [
-      renderTrustBadge(),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-[2.8125rem] leading-none font-bold sm:text-[3.9375rem] lg:text-[5.3125rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-[2.8125rem] leading-none font-bold sm:text-[3.9375rem] lg:text-[5.3125rem]", headingClassName), children: heading })) }),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-base leading-snug text-balance text-muted-foreground sm:text-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      renderActions()
-    ] }) }),
-    renderImages()
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn("font-sans", className),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-396 px-0 sm:px-8", containerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container px-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex max-w-100 flex-col items-center gap-6 sm:max-w-125 lg:max-w-160", contentClassName), children: [
+          renderTrustBadge(),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-[2.8125rem] leading-none font-bold sm:text-[3.9375rem] lg:text-[5.3125rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-[2.8125rem] leading-none font-bold sm:text-[3.9375rem] lg:text-[5.3125rem]", headingClassName), children: heading })) }),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-base leading-snug text-balance text-muted-foreground sm:text-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          renderActions()
+        ] }) }),
+        renderImages()
+      ] })
+    }
+  );
 }
 function HeroArchitectureFullscreen({
   tagline,
@@ -45326,7 +45983,11 @@ function HeroArchitectureFullscreen({
   description,
   action,
   actionSlot,
-  backgroundImage = imagePlaceholders[97],
+  backgroundImage,
+  background = "dark",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   taglineClassName,
@@ -45352,13 +46013,17 @@ function HeroArchitectureFullscreen({
     );
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "section",
+    Section,
     {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
       className: cn(
-        "dark relative h-svh max-h-[1400px] w-full overflow-hidden bg-cover bg-center bg-no-repeat py-12 font-poppins after:absolute after:top-0 after:left-0 after:block after:h-full after:w-full after:bg-black/65 after:content-[''] md:py-20",
+        "dark relative h-svh max-h-[1400px] w-full overflow-hidden bg-cover bg-center bg-no-repeat font-poppins after:absolute after:top-0 after:left-0 after:block after:h-full after:w-full after:bg-black/65 after:content-['']",
         className
       ),
-      style: { backgroundImage: `url('${backgroundImage}')` },
+      style: { backgroundImage: backgroundImage ? `url('${backgroundImage}')` : void 0 },
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative z-20 container h-full w-full max-w-340", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col justify-end gap-12", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-245.5 flex-col gap-1", children: [
           tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm leading-none text-muted-foreground uppercase", taglineClassName), children: tagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: taglineClassName, children: tagline })),
@@ -45379,6 +46044,10 @@ function HeroInnovationImageGrid({
   actionSlot,
   images,
   imagesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -45434,16 +46103,26 @@ function HeroInnovationImageGrid({
       ) })
     ] }) }) });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("bg-primary/5 py-12 font-sans md:py-20", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container max-w-350", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-22.5 lg:grid-cols-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-12", contentClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-3 text-4xl font-bold md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-3 text-4xl font-bold md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-      ] }),
-      renderAction()
-    ] }) }),
-    renderImages()
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container max-w-350", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-22.5 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-12", contentClassName), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-3 text-4xl font-bold md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-3 text-4xl font-bold md:text-5xl lg:text-6xl", headingClassName), children: heading })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          ] }),
+          renderAction()
+        ] }) }),
+        renderImages()
+      ] }) })
+    }
+  );
 }
 function HeroVideoDialogGradient({
   heading,
@@ -45453,6 +46132,10 @@ function HeroVideoDialogGradient({
   image,
   imageSlot,
   videoDialog,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headingClassName,
@@ -45517,7 +46200,7 @@ function HeroVideoDialogGradient({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(React13.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
-      "section",
+      Section,
       {
         className: cn(
           "relative overflow-hidden bg-background py-12 font-sans md:py-20",
@@ -45569,6 +46252,10 @@ function HeroMinimalCenteredDark({
   actionsSlot,
   stats,
   statsSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   badgeClassName,
@@ -45607,7 +46294,7 @@ function HeroMinimalCenteredDark({
     ] }, index));
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "section",
+    Section,
     {
       className: cn(
         "dark relative min-h-screen bg-background py-32",
@@ -45649,6 +46336,10 @@ function HeroProductShowcaseFloating({
   floatingStatSlot,
   userCount,
   userCountSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -45740,15 +46431,25 @@ function HeroProductShowcaseFloating({
       renderUserCount()
     ] }) });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("bg-background py-20 md:py-32", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
-    renderProductShowcase(),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("order-1 flex flex-col gap-8 lg:order-2", contentClassName), children: [
-      renderBadge(),
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      renderActions()
-    ] })
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
+        renderProductShowcase(),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("order-1 flex flex-col gap-8 lg:order-2", contentClassName), children: [
+          renderBadge(),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          renderActions()
+        ] })
+      ] }) })
+    }
+  );
 }
 function HeroSaasDashboardPreview({
   badgeText,
@@ -45760,6 +46461,10 @@ function HeroSaasDashboardPreview({
   emailFormSlot,
   browserPreview,
   browserPreviewSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headerClassName,
@@ -45835,15 +46540,25 @@ function HeroSaasDashboardPreview({
       ] })
     ] });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("bg-background py-20 md:py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl text-center", headerClassName), children: [
-      renderBadge(),
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      renderEmailForm()
-    ] }),
-    renderBrowserPreview()
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl text-center", headerClassName), children: [
+          renderBadge(),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          renderEmailForm()
+        ] }),
+        renderBrowserPreview()
+      ] })
+    }
+  );
 }
 function HeroTherapyTestimonialGrid({
   heading,
@@ -45854,6 +46569,10 @@ function HeroTherapyTestimonialGrid({
   imagesSlot,
   testimonial,
   testimonialSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headerClassName,
@@ -45940,7 +46659,7 @@ function HeroTherapyTestimonialGrid({
     ] });
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "section",
+    Section,
     {
       className: cn("bg-background py-12 font-sans md:py-20", className),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
@@ -45963,6 +46682,10 @@ function HeroMentalHealthTeam({
   testimonialSlot,
   featureImage,
   featureImageSlot,
+  background = "dark",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headerClassName,
@@ -46032,7 +46755,7 @@ function HeroMentalHealthTeam({
     ) }) });
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "section",
+    Section,
     {
       className: cn("dark bg-background py-12 font-sans md:py-20", className),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
@@ -46061,6 +46784,10 @@ function HeroMentorshipVideoSplit({
   videoSlot,
   image,
   imageSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -46130,17 +46857,27 @@ function HeroMentorshipVideoSplit({
     ) });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(React13.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("font-onest py-12 md:py-28", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-1 gap-6 lg:grid-cols-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-full flex-col justify-between gap-12", contentClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-165 flex-col gap-9", children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[2.5rem] leading-none text-primary sm:text-[3.4375rem] md:text-[4rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[2.5rem] leading-none text-primary sm:text-[3.4375rem] md:text-[4rem]", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg font-medium text-primary md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          renderAction()
-        ] }),
-        renderVideoSection()
-      ] }) }),
-      renderImage()
-    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Section,
+      {
+        background,
+        spacing,
+        pattern,
+        patternOpacity,
+        className: cn(className),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-1 gap-6 lg:grid-cols-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-full flex-col justify-between gap-12", contentClassName), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-165 flex-col gap-9", children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[2.5rem] leading-none text-primary sm:text-[3.4375rem] md:text-[4rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[2.5rem] leading-none text-primary sm:text-[3.4375rem] md:text-[4rem]", headingClassName), children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg font-medium text-primary md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              renderAction()
+            ] }),
+            renderVideoSection()
+          ] }) }),
+          renderImage()
+        ] }) })
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isVideoOpen, onOpenChange: setIsVideoOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-200", children: [
       /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: videoTitle }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -46161,6 +46898,10 @@ function HeroBusinessOperationsMosaic({
   subheading,
   images,
   imagesSlot,
+  background = "muted",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -46202,13 +46943,23 @@ function HeroBusinessOperationsMosaic({
       ) }) })
     ] });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("bg-background py-12 md:py-20", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container max-w-392.5", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center justify-between gap-14 lg:grid-cols-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full max-w-166.5", mosaicClassName), children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 0.815177479 / 1, children: renderMosaic() }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full max-w-125 flex-col gap-14 lg:max-w-full", contentClassName), children: [
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("font-serif text-6xl text-foreground lg:text-7xl xl:text-[5rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-      subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-montserrat text-2xl leading-snug text-foreground lg:text-3xl xl:text-4xl", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading }))
-    ] })
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container max-w-392.5", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center justify-between gap-14 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full max-w-166.5", mosaicClassName), children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 0.815177479 / 1, children: renderMosaic() }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full max-w-125 flex-col gap-14 lg:max-w-full", contentClassName), children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("font-serif text-6xl text-foreground lg:text-7xl xl:text-[5rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-montserrat text-2xl leading-snug text-foreground lg:text-3xl xl:text-4xl", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading }))
+        ] })
+      ] }) })
+    }
+  );
 }
 function HeroAgencyAnimatedImages({
   heading,
@@ -46217,6 +46968,10 @@ function HeroAgencyAnimatedImages({
   actionSlot,
   images,
   imagesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -46269,14 +47024,24 @@ function HeroAgencyAnimatedImages({
       ) }, index)) })
     ] });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("bg-background py-12 md:py-20", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container max-w-444", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-1 items-center justify-between gap-14 lg:grid-cols-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full max-w-125 flex-col gap-8 md:gap-14 lg:max-w-full", contentClassName), children: [
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("font-serif text-5xl text-foreground md:text-6xl lg:text-7xl xl:text-[5rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-      subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-montserrat text-2xl leading-snug text-foreground lg:text-3xl xl:text-4xl", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading })),
-      renderAction()
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto w-full max-w-211.5 lg:mx-0", imagesContainerClassName), children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1.049627792 / 1, children: renderImages() }) })
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container max-w-444", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-1 items-center justify-between gap-14 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full max-w-125 flex-col gap-8 md:gap-14 lg:max-w-full", contentClassName), children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("font-serif text-5xl text-foreground md:text-6xl lg:text-7xl xl:text-[5rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-montserrat text-2xl leading-snug text-foreground lg:text-3xl xl:text-4xl", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading })),
+          renderAction()
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto w-full max-w-211.5 lg:mx-0", imagesContainerClassName), children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1.049627792 / 1, children: renderImages() }) })
+      ] }) })
+    }
+  );
 }
 function HeroWelcomeAsymmetricImages({
   heading,
@@ -46285,6 +47050,10 @@ function HeroWelcomeAsymmetricImages({
   actionsSlot,
   images,
   imagesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headingClassName,
@@ -46357,14 +47126,24 @@ function HeroWelcomeAsymmetricImages({
       ] })
     ] });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("overflow-hidden py-32", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start justify-between gap-8 md:flex-row xl:gap-20", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-start text-left", children: [
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-8 text-4xl font-normal text-pretty md:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-8 text-4xl font-normal text-pretty md:text-7xl", headingClassName), children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-12 max-w-[70%] text-xl font-normal text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-12 max-w-[70%] text-xl font-normal text-muted-foreground", descriptionClassName), children: description })),
-      renderActions()
-    ] }),
-    renderImages()
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start justify-between gap-8 md:flex-row xl:gap-20", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-start text-left", children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-8 text-4xl font-normal text-pretty md:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-8 text-4xl font-normal text-pretty md:text-7xl", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-12 max-w-[70%] text-xl font-normal text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-12 max-w-[70%] text-xl font-normal text-muted-foreground", descriptionClassName), children: description })),
+          renderActions()
+        ] }),
+        renderImages()
+      ] }) })
+    }
+  );
 }
 function HeroStartupLaunchCta({
   badge,
@@ -46376,10 +47155,14 @@ function HeroStartupLaunchCta({
   avatars,
   avatarsSlot,
   socialProofText,
-  imageSrc = imagePlaceholders[6],
+  imageSrc,
   imageAlt = "Startup dashboard",
   badgeCard,
   badgeCardSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -46445,33 +47228,43 @@ function HeroStartupLaunchCta({
       ] })
     ] });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("bg-background py-20 md:py-32", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
-      badge && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("inline-flex w-fit items-center gap-2 rounded-full bg-success/10 px-4 py-2 text-sm font-medium text-success", badgeClassName), children: [
-        badgeIcon,
-        typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: badge }) : badge
-      ] }),
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-4 sm:flex-row", actionsClassName), children: renderActions() }),
-      (avatarsSlot || avatars || socialProofText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-4 pt-4", socialProofClassName), children: [
-        renderAvatars(),
-        socialProofText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children: socialProofText })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      imageSrc && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden rounded-2xl bg-linear-to-br from-green-50 to-blue-50 p-8", imageClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: imageSrc,
-          alt: imageAlt,
-          className: "w-full rounded-lg shadow-xl",
-          optixFlowConfig
-        }
-      ) }),
-      renderBadgeCard()
-    ] })
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
+          badge && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("inline-flex w-fit items-center gap-2 rounded-full bg-success/10 px-4 py-2 text-sm font-medium text-success", badgeClassName), children: [
+            badgeIcon,
+            typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: badge }) : badge
+          ] }),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-4 sm:flex-row", actionsClassName), children: renderActions() }),
+          (avatarsSlot || avatars || socialProofText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-4 pt-4", socialProofClassName), children: [
+            renderAvatars(),
+            socialProofText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children: socialProofText })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          imageSrc && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden rounded-2xl bg-linear-to-br from-green-50 to-blue-50 p-8", imageClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: imageSrc,
+              alt: imageAlt,
+              className: "w-full rounded-lg shadow-xl",
+              optixFlowConfig
+            }
+          ) }),
+          renderBadgeCard()
+        ] })
+      ] }) })
+    }
+  );
 }
 function HeroEnterpriseSecurity({
   badgeText,
@@ -46485,6 +47278,10 @@ function HeroEnterpriseSecurity({
   featuresSlot,
   logos,
   logosSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -46550,16 +47347,26 @@ function HeroEnterpriseSecurity({
       );
     }) });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("bg-background py-20 md:py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl text-center", contentClassName), children: [
-      renderBadge(),
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      renderActions()
-    ] }),
-    renderFeatures(),
-    renderLogos()
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl text-center", contentClassName), children: [
+          renderBadge(),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          renderActions()
+        ] }),
+        renderFeatures(),
+        renderLogos()
+      ] })
+    }
+  );
 }
 function HeroCreativeStudioStacked({
   tagline,
@@ -46572,6 +47379,10 @@ function HeroCreativeStudioStacked({
   actionsSlot,
   images,
   imagesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -46679,17 +47490,27 @@ function HeroCreativeStudioStacked({
     ] });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(React13.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("bg-background py-12 md:py-20", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-10 lg:grid-cols-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-6", contentClassName), children: [
-        tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm font-medium tracking-wider text-muted-foreground uppercase", taglineClassName), children: tagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: taglineClassName, children: tagline })),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-160 flex-col gap-6", children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl leading-tight font-medium md:text-5xl xl:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xl text-balance text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap gap-4 py-4", actionsClassName), children: renderActions() })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderImages() })
-    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Section,
+      {
+        background,
+        spacing,
+        pattern,
+        patternOpacity,
+        className: cn(className),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-10 lg:grid-cols-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-6", contentClassName), children: [
+            tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm font-medium tracking-wider text-muted-foreground uppercase", taglineClassName), children: tagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: taglineClassName, children: tagline })),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-160 flex-col gap-6", children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl leading-tight font-medium md:text-5xl xl:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xl text-balance text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap gap-4 py-4", actionsClassName), children: renderActions() })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderImages() })
+        ] }) })
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isVideoOpen, onOpenChange: setIsVideoOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-[800px]", children: [
       /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: videoDialogTitle }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -46714,7 +47535,11 @@ function HeroDigitalAgencyFullscreen({
   footerSublabel = "San Francisco, California",
   footerAction,
   footerSlot,
-  backgroundImage = imagePlaceholders[10],
+  backgroundImage,
+  background = "dark",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -46775,13 +47600,17 @@ function HeroDigitalAgencyFullscreen({
     ] });
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "section",
+    Section,
     {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
       className: cn(
         "font-dm_sans dark relative h-svh max-h-[1400px] min-h-[600px] w-full bg-cover bg-center bg-no-repeat after:absolute after:inset-0 after:block after:size-full after:bg-zinc-950/50 after:content-['']",
         className
       ),
-      style: { backgroundImage: `url('${backgroundImage}')` },
+      style: { backgroundImage: backgroundImage ? `url('${backgroundImage}')` : void 0 },
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative z-10 mx-auto flex size-full max-w-500 px-4 py-9", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col justify-between gap-10", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex max-w-125 flex-1 flex-col items-center justify-center gap-7 sm:max-w-150 md:max-w-200", contentClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-4xl leading-tight font-medium text-foreground sm:text-5xl md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-4xl leading-tight font-medium text-foreground sm:text-5xl md:text-6xl", headingClassName), children: heading })),
@@ -46799,6 +47628,10 @@ function HeroCustomerSupportLayered({
   description,
   images,
   imagesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -46842,12 +47675,13 @@ function HeroCustomerSupportLayered({
     ] });
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "section",
+    Section,
     {
-      className: cn(
-        "relative border-b border-muted bg-background pt-10",
-        className
-      ),
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn("relative border-b border-muted pt-10", className),
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-2 md:gap-4 lg:grid-cols-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full max-w-125 flex-col gap-9 lg:max-w-150 lg:py-[20%] xl:py-[26%]", contentClassName), children: [
           tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-mono text-[clamp(0.875rem,0.875vw,1rem)] text-muted-foreground", taglineClassName), children: tagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: taglineClassName, children: tagline })),
@@ -46865,6 +47699,10 @@ function HeroSharedInboxLayered({
   description,
   layeredImages,
   layeredImagesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -46898,7 +47736,7 @@ function HeroSharedInboxLayered({
     ] });
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "section",
+    Section,
     {
       className: cn("relative border-b border-muted bg-background", className),
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container pt-10", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-2 md:gap-4 lg:grid-cols-2", children: [
@@ -46920,6 +47758,10 @@ function HeroConversationIntelligence({
   actionsSlot,
   image,
   imageSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -46987,7 +47829,7 @@ function HeroConversationIntelligence({
     ] }) }) });
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "section",
+    Section,
     {
       className: cn("bg-background py-12 font-sans md:py-20", className),
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-24", children: [
@@ -47014,6 +47856,10 @@ function HeroBusinessCarouselDots({
   actionsSlot,
   carouselImages,
   carouselSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -47058,42 +47904,52 @@ function HeroBusinessCarouselDots({
       );
     });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("overflow-hidden py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-5xl text-center", contentClassName), children: [
-      badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: badgeVariant, className: badgeClassName, children: badge }),
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-6 text-4xl font-bold md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-5 text-lg text-muted-foreground md:text-xl lg:px-32", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex justify-center gap-2", actionsClassName), children: renderActions() })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mx-10 mt-16 hidden md:block", carouselClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 -right-20 -left-20 z-10 h-px bg-[linear-gradient(to_right,transparent,hsl(var(--border))_4%,hsl(var(--border))_96%,transparent)]" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 -right-20 -left-20 z-10 h-px bg-[linear-gradient(to_right,transparent,hsl(var(--border))_4%,hsl(var(--border))_96%,transparent)]" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-20 left-0 z-10 h-[calc(100%+160px)] w-px bg-[linear-gradient(to_bottom,transparent,hsl(var(--border))_4%,hsl(var(--border))_96%,transparent)]" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-20 right-0 z-10 h-[calc(100%+160px)] w-px bg-[linear-gradient(to_bottom,transparent,hsl(var(--border))_4%,hsl(var(--border))_96%,transparent)]" }),
-      carouselSlot ? carouselSlot : carouselImages && carouselImages.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Carousel, { setApi, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { children: carouselImages.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          img.Img,
-          {
-            src: image.src,
-            alt: image.alt,
-            className: cn("aspect-video w-full rounded-lg object-cover", image.className),
-            optixFlowConfig
-          }
-        ) }, index)) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex justify-center gap-2", children: carouselImages.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: () => api?.scrollTo(index),
-            className: cn(
-              "h-2 w-2 rounded-full transition-colors",
-              current === index + 1 ? "bg-primary" : "bg-muted"
-            )
-          },
-          index
-        )) })
-      ] }) : null
-    ] })
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn("overflow-hidden", className),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-5xl text-center", contentClassName), children: [
+          badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: badgeVariant, className: badgeClassName, children: badge }),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-6 text-4xl font-bold md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-5 text-lg text-muted-foreground md:text-xl lg:px-32", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex justify-center gap-2", actionsClassName), children: renderActions() })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mx-10 mt-16 hidden md:block", carouselClassName), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 -right-20 -left-20 z-10 h-px bg-[linear-gradient(to_right,transparent,hsl(var(--border))_4%,hsl(var(--border))_96%,transparent)]" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 -right-20 -left-20 z-10 h-px bg-[linear-gradient(to_right,transparent,hsl(var(--border))_4%,hsl(var(--border))_96%,transparent)]" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-20 left-0 z-10 h-[calc(100%+160px)] w-px bg-[linear-gradient(to_bottom,transparent,hsl(var(--border))_4%,hsl(var(--border))_96%,transparent)]" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-20 right-0 z-10 h-[calc(100%+160px)] w-px bg-[linear-gradient(to_bottom,transparent,hsl(var(--border))_4%,hsl(var(--border))_96%,transparent)]" }),
+          carouselSlot ? carouselSlot : carouselImages && carouselImages.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Carousel, { setApi, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { children: carouselImages.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: image.src,
+                alt: image.alt,
+                className: cn("aspect-video w-full rounded-lg object-cover", image.className),
+                optixFlowConfig
+              }
+            ) }, index)) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex justify-center gap-2", children: carouselImages.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => api?.scrollTo(index),
+                className: cn(
+                  "h-2 w-2 rounded-full transition-colors",
+                  current === index + 1 ? "bg-primary" : "bg-muted"
+                )
+              },
+              index
+            )) })
+          ] }) : null
+        ] })
+      ] })
+    }
+  );
 }
 function HeroDeveloperToolsCode({
   badgeText,
@@ -47106,6 +47962,10 @@ function HeroDeveloperToolsCode({
   terminalTitle = "terminal",
   terminalLines,
   terminalSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -47168,15 +48028,25 @@ function HeroDeveloperToolsCode({
       ] })
     ] });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("bg-background py-20 md:py-32", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
-      renderBadge(),
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      renderActions()
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: renderTerminal() })
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
+          renderBadge(),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          renderActions()
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: renderTerminal() })
+      ] }) })
+    }
+  );
 }
 function HeroEcommerceProductShowcase({
   badgeText,
@@ -47190,6 +48060,10 @@ function HeroEcommerceProductShowcase({
   statsSlot,
   images,
   imagesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -47285,16 +48159,26 @@ function HeroEcommerceProductShowcase({
       ] })
     ] });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("bg-background py-20 md:py-32", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "order-2 lg:order-1", children: renderImages() }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("order-1 flex flex-col gap-8 lg:order-2", contentClassName), children: [
-      renderBadge(),
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      renderActions(),
-      renderStats()
-    ] })
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "order-2 lg:order-1", children: renderImages() }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("order-1 flex flex-col gap-8 lg:order-2", contentClassName), children: [
+          renderBadge(),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          renderActions(),
+          renderStats()
+        ] })
+      ] }) })
+    }
+  );
 }
 function HeroMobileAppDownload({
   badgeText,
@@ -47312,6 +48196,10 @@ function HeroMobileAppDownload({
   imageSlot,
   notification,
   notificationSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -47388,16 +48276,26 @@ function HeroMobileAppDownload({
       renderNotification()
     ] }) });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("bg-background py-20 md:py-32", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
-      renderBadge(),
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      renderStoreActions(),
-      renderRating()
-    ] }),
-    renderImage()
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
+          renderBadge(),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          renderStoreActions(),
+          renderRating()
+        ] }),
+        renderImage()
+      ] }) })
+    }
+  );
 }
 function HeroPricingComparison({
   badgeText,
@@ -47406,6 +48304,10 @@ function HeroPricingComparison({
   description,
   plans,
   plansSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headerClassName,
@@ -47455,14 +48357,24 @@ function HeroPricingComparison({
       index
     )) });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("bg-background py-20 md:py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl text-center", headerClassName), children: [
-      renderBadge(),
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-    ] }),
-    renderPlans()
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl text-center", headerClassName), children: [
+          renderBadge(),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+        ] }),
+        renderPlans()
+      ] })
+    }
+  );
 }
 function HeroNewsletterMinimal({
   heading,
@@ -47473,6 +48385,10 @@ function HeroNewsletterMinimal({
   disclaimer = "Free forever. No spam. Unsubscribe anytime.",
   stats,
   statsSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headingClassName,
@@ -47519,7 +48435,7 @@ function HeroNewsletterMinimal({
     ] });
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "section",
+    Section,
     {
       className: cn(
         "relative min-h-[80vh] bg-background py-32",
@@ -47547,6 +48463,10 @@ function HeroComingSoonCountdown({
   formSlot,
   socialLinks,
   socialLinksSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   badgeClassName,
@@ -47606,7 +48526,7 @@ function HeroComingSoonCountdown({
     ));
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "section",
+    Section,
     {
       className: cn(
         "dark relative min-h-screen bg-background py-32",
@@ -47641,6 +48561,10 @@ function HeroEventRegistration({
   locationLabel = "San Francisco, CA",
   locationSublabel = "Moscone Center",
   locationSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -47720,16 +48644,26 @@ function HeroEventRegistration({
       ] })
     ] }) });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("bg-background py-20 md:py-32", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
-      renderBadge(),
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      renderActions(),
-      renderStats()
-    ] }),
-    renderImage()
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
+          renderBadge(),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          renderActions(),
+          renderStats()
+        ] }),
+        renderImage()
+      ] }) })
+    }
+  );
 }
 function HeroPortfolioCreative({
   profile,
@@ -47742,6 +48676,10 @@ function HeroPortfolioCreative({
   socialLinksSlot,
   portfolioImages,
   portfolioImagesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -47849,16 +48787,26 @@ function HeroPortfolioCreative({
       ] })
     ] }) });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("bg-background py-20 md:py-32", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
-      renderProfile(),
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      renderActions(),
-      renderSocialLinks()
-    ] }),
-    renderPortfolioImages()
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
+          renderProfile(),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          renderActions(),
+          renderSocialLinks()
+        ] }),
+        renderPortfolioImages()
+      ] }) })
+    }
+  );
 }
 function ComparisonTableTwoColumn({
   heading,
@@ -48854,7 +49802,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
@@ -48875,7 +49823,7 @@ function NavigationMenuItem({
   );
 }
 var navigationMenuTriggerStyle = classVarianceAuthority.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,
@@ -48890,7 +49838,6 @@ function NavigationMenuTrigger({
       ...props,
       children: [
         children,
-        " ",
         /* @__PURE__ */ jsxRuntime.jsx(
           DynamicIcon,
           {
@@ -48954,7 +49901,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
@@ -49068,20 +50015,21 @@ 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(
       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
     ),
@@ -49119,14 +50067,7 @@ var renderMenuItem = (item, optixFlowConfig) => {
       /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "bg-popover text-popover-foreground", children: item.items.map((subItem) => /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuLink, { asChild: true, className: "w-80", children: /* @__PURE__ */ jsxRuntime.jsx(SubMenuLink, { item: subItem, optixFlowConfig }) }, subItem.title)) })
     ] }, item.title);
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuLink, { href: item.url, children: item.title }) }, item.title);
 };
 var renderMobileMenuItem = (item, optixFlowConfig) => {
   if (item.items) {
@@ -49345,14 +50286,7 @@ var renderMenuItem2 = (item) => {
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NavigationMenuLink, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(SubMenuLink2, { item: subItem }) }, subItem.title)) })
     ] }, item.title);
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuLink, { href: item.url, children: item.title }) }, item.title);
 };
 var renderMobileMenuItem2 = (item) => {
   if (item.items) {
@@ -49599,11 +50533,11 @@ var DesktopMenuItem = ({
   if (layout === "simple-grid" && link.links) {
     return /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuItem, { children: [
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "min-w-[700px] p-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: link.links.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "min-w-[700px] p-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid auto-rows-fr grid-cols-1 gap-4 sm:grid-cols-2", children: link.links.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "h-20 w-20 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
               img.Img,
@@ -49615,7 +50549,7 @@ var DesktopMenuItem = ({
               }
             ) }),
             !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 20 }) : null }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium", children: item.label }),
               item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-normal text-muted-foreground", children: item.description })
             ] })
@@ -49628,13 +50562,22 @@ var DesktopMenuItem = ({
   if (layout === "list-with-icons" && link.links) {
     return /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuItem, { children: [
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "min-w-[400px] p-4", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1", children: link.links.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "min-w-[400px] p-4", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1", children: link.links.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 16 }) : null }),
+            item.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-12 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
+              img.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 16 }) : null }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium", children: item.label }),
               item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: item.description })
@@ -49645,14 +50588,7 @@ var DesktopMenuItem = ({
     ] }, `desktop-menu-item-${index}`);
   }
   if (link.href) {
-    return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuLink, { href: link.href, children: link.label }) }, `desktop-menu-item-${index}`);
   }
   return null;
 };
@@ -49845,14 +50781,7 @@ var NavbarMegaMenu = ({
                     if (!link.href) {
                       return null;
                     }
-                    return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuLink, { href: link.href, children: link.label }) }, `menu-link-${index}`);
                   })
                 }
               ),
@@ -54882,7 +55811,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));
@@ -83436,12 +84368,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",
@@ -83460,12 +84396,12 @@ function StatsImpactGrid({
   comparisonClassName,
   ctaClassName
 }) {
-  const renderBadge = () => {
+  const badgeContent = React13.useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("mb-4", badgeClassName), children: badge });
-  };
-  const renderStatIcon = (stat) => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const renderStatIcon = React13.useCallback((stat) => {
     if (stat.iconSlot) return stat.iconSlot;
     if (!stat.icon) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -83476,45 +84412,88 @@ function StatsImpactGrid({
         className: stat.iconColor || "text-primary"
       }
     ) });
-  };
-  const renderStats = () => {
+  }, []);
+  const statsContent = React13.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3", statsGridClassName), children: stats.map((stat) => /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("overflow-hidden border p-0", stat.className, statCardClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-6 md:p-8", children: [
-      renderStatIcon(stat),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-end", children: [
-        stat.prefix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 mr-1 text-2xl font-bold", children: stat.prefix }),
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-4xl font-bold tracking-tight md:text-5xl", children: stat.value }),
-        stat.suffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 ml-1 text-2xl font-bold", children: stat.suffix })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-xl font-semibold", children: stat.label }),
-      stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: stat.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: stat.description }))
-    ] }) }, stat.id)) });
-  };
-  const renderComparison = () => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "mb-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+          statsGridClassName
+        ),
+        children: stats.map((stat) => /* @__PURE__ */ jsxRuntime.jsx(
+          Card,
+          {
+            className: cn(
+              "overflow-hidden border p-0",
+              stat.className,
+              statCardClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-6 md:p-8", children: [
+              renderStatIcon(stat),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-end", children: [
+                stat.prefix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 mr-1 text-2xl font-bold", children: stat.prefix }),
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-4xl font-bold tracking-tight md:text-5xl", children: stat.value }),
+                stat.suffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 ml-1 text-2xl font-bold", children: stat.suffix })
+              ] }),
+              stat.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-xl font-semibold", children: stat.label }),
+              stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: stat.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: stat.description }))
+            ] })
+          },
+          stat.id
+        ))
+      }
+    );
+  }, [statsSlot, stats, statsGridClassName, statCardClassName, renderStatIcon]);
+  const hasComparisonContent = React13.useMemo(() => {
+    return !!(comparisonHeading || comparisonDescription || baselineValue || targetValue || baselineLabel || targetLabel);
+  }, [
+    comparisonHeading,
+    comparisonDescription,
+    baselineValue,
+    targetValue,
+    baselineLabel,
+    targetLabel
+  ]);
+  const comparisonContent = React13.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__ */ jsxRuntime.jsx("div", { className: cn("mb-16 rounded-xl bg-muted p-8", comparisonClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-8 md:grid-cols-2 md:gap-16", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         comparisonHeading && (typeof comparisonHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-bold", children: comparisonHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: comparisonHeading })),
         comparisonDescription && (typeof comparisonDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 text-muted-foreground", children: comparisonDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: comparisonDescription })),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+        hasProgressBars && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-muted-foreground/20", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-[24%] bg-muted-foreground" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: "Industry" })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-muted-foreground/20", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "h-full bg-muted-foreground",
+                style: { width: `${baselinePercent}%` }
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: baselineLabel })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-[89%] bg-primary" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: "Our Platform" })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "h-full bg-primary",
+                style: { width: `${targetPercent}%` }
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: targetLabel })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 text-center md:border-l md:pl-16 md:text-left", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: "INDUSTRY AVERAGE" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-bold", children: industryAverage })
+      (baselineValue || targetValue) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 text-center md:border-l md:pl-16 md:text-left", children: [
+        baselineValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          baselineLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm uppercase text-muted-foreground", children: baselineLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-bold", children: baselineValue })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 items-center justify-center md:justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+        baselineValue && targetValue && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 items-center justify-center md:justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
           DynamicIcon,
           {
             name: "lucide/arrow-up-right",
@@ -83522,40 +84501,65 @@ function StatsImpactGrid({
             className: "text-primary"
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-primary", children: "OUR PLATFORM" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl font-bold text-primary", children: platformValue })
+        targetValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          targetLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium uppercase text-primary", children: targetLabel }),
+          /* @__PURE__ */ jsxRuntime.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 = React13.useMemo(() => {
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap justify-center gap-4", children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-        ]
-      },
-      index
-    )) });
-  };
-  const renderCta = () => {
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          size: "lg",
+          asButton: true,
+          className: cn(
+            "inline-flex items-center justify-center gap-2",
+            actionClassName
+          ),
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        action.href || index
+      );
+    }) });
+  }, [actions]);
+  const ctaContent = React13.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaHeading && (!actions || actions.length === 0)) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", ctaClassName), children: [
       ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-6 text-2xl font-bold", children: ctaHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: ctaHeading })),
-      renderActions()
+      actionsContent
     ] });
-  };
+  }, [ctaSlot, ctaHeading, actions, ctaClassName, actionsContent]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -83566,16 +84570,34 @@ function StatsImpactGrid({
       patternClassName,
       className: cn("relative overflow-hidden", className),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 bg-gradient-to-br from-primary/5 to-background" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 bg-linear-to-br from-primary/5 to-background" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mx-auto max-w-5xl", containerClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-            renderBadge(),
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-3xl text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
+          hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
+            badgeContent,
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h2",
+              {
+                className: cn(
+                  "mb-4 text-3xl font-bold md:text-5xl",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "mx-auto max-w-3xl text-lg text-muted-foreground",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
           ] }),
-          renderStats(),
-          renderComparison(),
-          renderCta()
+          statsContent,
+          comparisonContent,
+          ctaContent
         ] })
       ]
     }
@@ -83756,14 +84778,16 @@ function StatsCardGroup({
   const renderIcon = (stat) => {
     if (stat.iconSlot) return stat.iconSlot;
     if (!stat.icon) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10", statIconClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
-      DynamicIcon,
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: stat.icon, size: 24, className: "text-primary" })
       }
-    ) });
+    );
   };
   const renderAvatars = (stat) => {
     if (!stat.showAvatars) return null;
@@ -83775,7 +84799,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
@@ -83799,7 +84826,16 @@ function StatsCardGroup({
         ),
         children: [
           renderIcon(stat),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2 text-3xl font-bold md:text-4xl", statValueClassName), children: stat.value }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "mb-2 text-3xl font-bold md:text-4xl",
+                statValueClassName
+              ),
+              children: stat.value
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-muted-foreground", statLabelClassName), children: stat.label }),
           renderAvatars(stat)
         ]
@@ -84087,8 +85123,8 @@ function StatsMilestoneSidebar({
   sidebarSlot,
   milestones,
   milestonesSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -84106,8 +85142,26 @@ function StatsMilestoneSidebar({
   const renderSidebar = () => {
     if (sidebarSlot) return sidebarSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:sticky lg:top-24", children: [
-      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
-      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+        "h2",
+        {
+          className: cn(
+            "mb-4 text-3xl font-bold md:text-4xl",
+            headingClassName
+          ),
+          children: heading
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
+      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: cn(
+            "text-lg text-muted-foreground",
+            descriptionClassName
+          ),
+          children: description
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
     ] });
   };
   const renderMilestones = () => {
@@ -84123,9 +85177,36 @@ function StatsMilestoneSidebar({
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-[9px] top-0 h-4 w-4 rounded-full border-2 border-primary bg-background" }),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h3", { className: cn("mb-2 text-xl font-bold", milestoneTitleClassName), children: milestone.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2", milestoneTitleClassName), children: milestone.title })),
-          milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", milestoneDescriptionClassName), children: milestone.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: milestoneDescriptionClassName, children: milestone.description }))
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "h3",
+            {
+              className: cn(
+                "mb-2 text-xl font-bold",
+                milestoneTitleClassName
+              ),
+              children: milestone.title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2", milestoneTitleClassName), children: milestone.title })),
+          milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-muted-foreground",
+                milestoneDescriptionClassName
+              ),
+              children: milestone.description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: milestoneDescriptionClassName, children: milestone.description }))
         ]
       },
       index