@opensite/ui 0.4.6 → 0.4.7

package/dist/registry.cjs

@@ -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",
@@ -41034,6 +41034,10 @@ function HeroFloatingImages({
   imagesSlot,
   showSwirls = true,
   backgroundSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   contentClassName,
   headingClassName,
@@ -41054,7 +41058,7 @@ function HeroFloatingImages({
       {
         src: image.src,
         alt: image.alt,
-        className: cn("absolute object-contain", image.className),
+        className: cn("absolute w-32 h-32 md:w-48 md:h-48 rounded-lg shadow-lg object-contain", image.className),
         style: { animationDelay: `${index * 300}ms` },
         optixFlowConfig
       },
@@ -41062,19 +41066,59 @@ function HeroFloatingImages({
     )) });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "section",
+    Section,
     {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
       className: cn(
-        "relative flex min-h-[60vh] items-center justify-center overflow-hidden bg-background py-20 md:min-h-[80vh] md:py-32",
+        "relative flex min-h-[60vh] items-center justify-center overflow-hidden py-20 md:min-h-[80vh] md:py-32",
         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(
+              "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 }))
+            ]
+          }
+        )
       ]
     }
   );
@@ -41086,8 +41130,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 +41167,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 +41206,12 @@ function HeroImageLeftContent({
   description,
   actions,
   actionsSlot,
-  imageSrc = imagePlaceholders[1],
+  imageSrc,
   imageAlt = "placeholder hero",
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -41182,26 +41244,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 +41410,10 @@ function HeroCenteredImageGrid({
   imageOverlayAction,
   logos,
   logosSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -41403,47 +41479,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 +41564,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 +41601,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 +41677,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 +41722,10 @@ function HeroLogoCenteredScreenshot({
   actionSlot,
   image,
   imageSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -41653,30 +41771,44 @@ 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()
-  ] }) }) });
-}
-function HeroPatternLogoTechStack({
-  logo,
-  logoSlot,
-  heading,
-  highlightedWord = "Blocks",
-  description,
-  actions,
-  actionsSlot,
+  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,
+  logoSlot,
+  heading,
+  highlightedWord = "Blocks",
+  description,
+  actions,
+  actionsSlot,
   techStackLabel = "Built with open-source technologies",
   techLogos,
   techLogosSlot,
   backgroundImage = "https://cdn.ing/assets/files/record/286187/4gpn0yq2ptra8iwlvmwwv860ggwv",
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -41752,30 +41884,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 +41926,10 @@ function HeroAnnouncementBadge({
   description,
   actions,
   actionsSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   badgeClassName,
@@ -41812,22 +41958,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 +41991,10 @@ function HeroTechCarousel({
   technologies,
   carouselSlot,
   autoplayDelay = 4e3,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headingClassName,
@@ -41898,7 +42058,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 +42073,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 +42154,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 +42190,10 @@ function HeroPlatformFeaturesGrid({
   actionSlot,
   features,
   featuresSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headerClassName,
@@ -42048,15 +42236,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 +42262,10 @@ function HeroSpiralPatternCards({
   description,
   actions,
   actionsSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headingClassName,
@@ -42090,45 +42292,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 +42349,10 @@ function HeroSplitSpiralShapes({
   actions,
   actionsSlot,
   shapesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -42197,15 +42413,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 +42440,10 @@ function HeroSplitGeometricShapes({
   actions,
   actionsSlot,
   shapesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -42250,15 +42480,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 +42514,10 @@ function HeroCommunitySurveyCta({
   leftOverlayImage,
   rightOverlayImage,
   imagesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   announcementClassName,
@@ -42352,18 +42596,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 +42630,10 @@ function HeroMarketplaceScatteredImages({
   images,
   imagesSlot,
   showGridPattern = true,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -42415,16 +42673,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 +42702,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 +42733,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 +42775,12 @@ function HeroVideoBackgroundDark({
   description,
   actions,
   actionsSlot,
-  videoSrc = videoPlaceholders[0],
+  videoSrc,
   videoSlot,
+  background = "dark",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   contentClassName,
   headingClassName,
@@ -42535,15 +42821,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 +42849,10 @@ function HeroGridPatternEfficiency({
   actionSlot,
   actionSubtext = "No credit card required.",
   showGridPattern = true,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -42580,15 +42880,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 +42909,13 @@ function HeroDashedBorderFeatures({
   description,
   actions,
   actionsSlot,
-  demoAvatarSrc = imagePlaceholders[15],
+  demoAvatarSrc,
   features,
   featuresSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -42686,19 +43000,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 +43032,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 +43146,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 +43179,10 @@ function HeroGradientClientFocused({
   actionsSlot,
   image,
   imageSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headingClassName,
@@ -42884,7 +43226,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 +43254,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 +43307,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 +43339,10 @@ function HeroUiLibraryShowcase({
   actionsSlot,
   image,
   imageSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   headerClassName,
   headingClassName,
@@ -43038,7 +43398,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 +43423,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 +43457,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 +43488,11 @@ function HeroFullscreenLogoCta({
   description,
   action,
   actionSlot,
-  backgroundImage = imagePlaceholders[34],
+  backgroundImage,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -43165,7 +43533,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 +43569,10 @@ function HeroGradientAvatarsRating({
   starCount = 5,
   images,
   imagesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -43297,30 +43669,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 +43710,10 @@ function HeroTaskTimerAnimated({
   actionsSlot,
   images,
   imagesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   headerClassName,
   headingClassName,
@@ -43413,7 +43799,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 +43827,10 @@ function HeroAiPoweredCarousel({
   desktopCarouselImages1,
   desktopCarouselImages2,
   carouselSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -43471,117 +43861,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 +43989,12 @@ function HeroAdCampaignExpert({
   description,
   action,
   actionSlot,
-  imageSrc = imagePlaceholders[60],
+  imageSrc,
   imageAlt = "",
+  background = "muted",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -43618,44 +44022,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 +44102,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 +44140,12 @@ function HeroPresentationPlatformVideo({
   description,
   actions,
   actionsSlot,
-  videoSrc = videoPlaceholders[0],
+  videoSrc,
   videoSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   contentClassName,
   headingClassName,
@@ -43758,7 +44190,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 +44219,10 @@ function HeroGridPatternSolutions({
   images,
   imagesSlot,
   showGridPattern = true,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -43845,18 +44281,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 +44312,10 @@ function HeroCrmStreamlined({
   actionSlot,
   image,
   imageSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -43893,26 +44343,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 +44386,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 +44436,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 +44652,10 @@ function HeroSoftwareGrowthVideoDialog({
   showcaseImagesSlot,
   videoDialog,
   onVideoClick,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headingClassName,
@@ -44266,7 +44738,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 +44779,10 @@ function HeroConversionVideoPlay({
   logosTagline = "Trusted by these brands and many others",
   logos,
   logosSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -44381,30 +44857,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 +44916,10 @@ function HeroDesignShowcaseLogos({
   logosSlot,
   showcaseImage,
   showcaseSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -44494,17 +44984,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 +45012,13 @@ function HeroVideoOverlayStars({
   actionSlot,
   trust,
   trustSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   headingClassName,
-  videoSrc = videoPlaceholders[0],
+  videoSrc,
   videoSlot
 }) {
   const renderAction = () => {
@@ -44566,7 +45070,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 +45096,12 @@ function HeroProductivityLauncherVideo({
   versionInfoSlot,
   secondaryCta,
   secondaryCtaSlot,
-  videoSrc = videoPlaceholders[1],
+  videoSrc,
   videoSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   contentClassName,
   headingClassName,
@@ -44669,7 +45177,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 +45209,11 @@ function HeroHiringAnimatedText({
   actionsSlot,
   scrollAction,
   scrollActionSlot,
-  backgroundImage = imagePlaceholders[84],
+  backgroundImage,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -44762,7 +45274,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 +45301,10 @@ function HeroSplitImageNewsletter({
   newsletterFormSlot,
   image,
   imageSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -44841,7 +45357,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 +45384,10 @@ function HeroCenteredGradientCta({
   actionsSlot,
   features,
   featuresSlot,
+  background = "muted",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   gradientClassName,
@@ -44907,7 +45427,7 @@ function HeroCenteredGradientCta({
     ] }, index));
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "section",
+    Section,
     {
       className: cn(
         "relative min-h-screen overflow-hidden bg-background py-32",
@@ -44942,10 +45462,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 +45521,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 +45563,10 @@ function HeroFeatureCardsGrid({
   actionsSlot,
   features,
   featuresSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -45074,14 +45612,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 +45728,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 +45747,13 @@ function HeroDesignSystem3d({
   description,
   actions,
   actionsSlot,
-  logoMarkSrc = logoPlaceholders.logoMark,
+  logoMarkSrc,
   images,
   imagesSlot,
+  background = "muted",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -45310,15 +45862,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 +45888,11 @@ function HeroArchitectureFullscreen({
   description,
   action,
   actionSlot,
-  backgroundImage = imagePlaceholders[97],
+  backgroundImage,
+  background = "dark",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   taglineClassName,
@@ -45352,13 +45918,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 +45949,10 @@ function HeroInnovationImageGrid({
   actionSlot,
   images,
   imagesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -45434,16 +46008,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 +46037,10 @@ function HeroVideoDialogGradient({
   image,
   imageSlot,
   videoDialog,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headingClassName,
@@ -45517,7 +46105,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 +46157,10 @@ function HeroMinimalCenteredDark({
   actionsSlot,
   stats,
   statsSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   badgeClassName,
@@ -45607,7 +46199,7 @@ function HeroMinimalCenteredDark({
     ] }, index));
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "section",
+    Section,
     {
       className: cn(
         "dark relative min-h-screen bg-background py-32",
@@ -45649,6 +46241,10 @@ function HeroProductShowcaseFloating({
   floatingStatSlot,
   userCount,
   userCountSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -45740,15 +46336,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 +46366,10 @@ function HeroSaasDashboardPreview({
   emailFormSlot,
   browserPreview,
   browserPreviewSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headerClassName,
@@ -45835,15 +46445,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 +46474,10 @@ function HeroTherapyTestimonialGrid({
   imagesSlot,
   testimonial,
   testimonialSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headerClassName,
@@ -45940,7 +46564,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 +46587,10 @@ function HeroMentalHealthTeam({
   testimonialSlot,
   featureImage,
   featureImageSlot,
+  background = "dark",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headerClassName,
@@ -46032,7 +46660,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 +46689,10 @@ function HeroMentorshipVideoSplit({
   videoSlot,
   image,
   imageSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -46130,17 +46762,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 +46803,10 @@ function HeroBusinessOperationsMosaic({
   subheading,
   images,
   imagesSlot,
+  background = "muted",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -46202,13 +46848,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 +46873,10 @@ function HeroAgencyAnimatedImages({
   actionSlot,
   images,
   imagesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -46269,14 +46929,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 +46955,10 @@ function HeroWelcomeAsymmetricImages({
   actionsSlot,
   images,
   imagesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headingClassName,
@@ -46357,14 +47031,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 +47060,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 +47133,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 +47183,10 @@ function HeroEnterpriseSecurity({
   featuresSlot,
   logos,
   logosSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -46550,16 +47252,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 +47284,10 @@ function HeroCreativeStudioStacked({
   actionsSlot,
   images,
   imagesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -46679,17 +47395,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 +47440,11 @@ function HeroDigitalAgencyFullscreen({
   footerSublabel = "San Francisco, California",
   footerAction,
   footerSlot,
-  backgroundImage = imagePlaceholders[10],
+  backgroundImage,
+  background = "dark",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -46775,13 +47505,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 +47533,10 @@ function HeroCustomerSupportLayered({
   description,
   images,
   imagesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -46842,12 +47580,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 +47604,10 @@ function HeroSharedInboxLayered({
   description,
   layeredImages,
   layeredImagesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -46898,7 +47641,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 +47663,10 @@ function HeroConversationIntelligence({
   actionsSlot,
   image,
   imageSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -46987,7 +47734,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 +47761,10 @@ function HeroBusinessCarouselDots({
   actionsSlot,
   carouselImages,
   carouselSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -47058,42 +47809,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 +47867,10 @@ function HeroDeveloperToolsCode({
   terminalTitle = "terminal",
   terminalLines,
   terminalSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -47168,15 +47933,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 +47965,10 @@ function HeroEcommerceProductShowcase({
   statsSlot,
   images,
   imagesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -47285,16 +48064,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 +48101,10 @@ function HeroMobileAppDownload({
   imageSlot,
   notification,
   notificationSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -47388,16 +48181,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 +48209,10 @@ function HeroPricingComparison({
   description,
   plans,
   plansSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headerClassName,
@@ -47455,14 +48262,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 +48290,10 @@ function HeroNewsletterMinimal({
   disclaimer = "Free forever. No spam. Unsubscribe anytime.",
   stats,
   statsSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headingClassName,
@@ -47519,7 +48340,7 @@ function HeroNewsletterMinimal({
     ] });
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "section",
+    Section,
     {
       className: cn(
         "relative min-h-[80vh] bg-background py-32",
@@ -47547,6 +48368,10 @@ function HeroComingSoonCountdown({
   formSlot,
   socialLinks,
   socialLinksSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   badgeClassName,
@@ -47606,7 +48431,7 @@ function HeroComingSoonCountdown({
     ));
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "section",
+    Section,
     {
       className: cn(
         "dark relative min-h-screen bg-background py-32",
@@ -47641,6 +48466,10 @@ function HeroEventRegistration({
   locationLabel = "San Francisco, CA",
   locationSublabel = "Moscone Center",
   locationSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -47720,16 +48549,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 +48581,10 @@ function HeroPortfolioCreative({
   socialLinksSlot,
   portfolioImages,
   portfolioImagesSlot,
+  background = "white",
+  spacing = "lg",
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   contentClassName,
@@ -47849,16 +48692,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,