@opensite/ui 2.0.2 → 2.0.4

package/dist/registry.js

@@ -50423,27 +50423,31 @@ function HeroCenteredImageGrid({
   gridImages,
   gridImagesSlot,
   imageOverlayAction,
-  logos,
-  logosSlot,
   background,
-  spacing,
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   contentClassName,
   headingClassName,
   descriptionClassName,
   actionsClassName,
   imageGridClassName,
-  logosClassName,
   optixFlowConfig
 }) {
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -50462,38 +50466,20 @@ function HeroCenteredImageGrid({
   }, [actionsSlot, actions]);
   const renderImageOverlayAction = useMemo(() => {
     if (!imageOverlayAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = imageOverlayAction;
-    return /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        asButton: true,
-        className: actionClassName,
-        ...pressableProps,
-        children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-          icon,
-          label,
-          iconAfter
-        ] })
-      }
-    );
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = imageOverlayAction;
+    return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      icon,
+      label,
+      iconAfter
+    ] }) });
   }, [imageOverlayAction]);
-  const renderLogos = useMemo(() => {
-    if (logosSlot) return logosSlot;
-    if (!logos || logos.length === 0) return null;
-    return logos.map((logo, index) => {
-      const src = typeof logo.src === "string" ? logo.src : logo.src.light;
-      typeof logo.src === "string" ? logo.src : logo.src.dark;
-      return /* @__PURE__ */ jsx(React23.Fragment, { children: /* @__PURE__ */ jsx(
-        Img,
-        {
-          src,
-          alt: logo.alt,
-          className: cn(logo.className, "dark:invert"),
-          optixFlowConfig
-        }
-      ) }, index);
-    });
-  }, [logosSlot, logos, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -50501,39 +50487,90 @@ function HeroCenteredImageGrid({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
-        /* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxs("div", { className: cn("z-10 flex flex-col items-center gap-8 text-center", contentClassName), children: [
-          /* @__PURE__ */ jsxs("div", { className: "max-w-3xl", children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-4 text-4xl font-semibold text-pretty lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-          ] }),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row", actionsClassName), children: renderActions })
-        ] }) }),
-        gridImagesSlot ? gridImagesSlot : /* @__PURE__ */ 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__ */ jsx(
-            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__ */ jsxs("div", { className: "relative md:col-span-2", children: [
-            /* @__PURE__ */ jsx(
-              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
-              }
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "z-10 flex flex-col items-center gap-8 text-center",
+              contentClassName
             ),
-            renderImageOverlayAction
-          ] })
-        ] }),
-        (logosSlot || logos && logos.length > 0) && /* @__PURE__ */ 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 })
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "max-w-3xl", children: [
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mb-4 text-4xl font-semibold text-balance lg:text-6xl",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "lg:text-xl text-balance",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              ] }),
+              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex w-full flex-col justify-center gap-2 sm:flex-row",
+                    actionsClassName
+                  ),
+                  children: renderActions
+                }
+              )
+            ]
+          }
+        ) }),
+        gridImagesSlot ? gridImagesSlot : /* @__PURE__ */ 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__ */ jsx(
+                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__ */ jsxs("div", { className: "relative md:col-span-2", children: [
+                /* @__PURE__ */ jsx(
+                  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
+              ] })
+            ]
+          }
+        )
       ] })
     }
   );
@@ -50837,7 +50874,7 @@ function HeroLogoCenteredScreenshot({
   imageSlot,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-6 md:py-32",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
@@ -50966,7 +51003,7 @@ function HeroPatternLogoTechStack({
   techLogosSlot,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-12 md:py-32",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
@@ -51145,37 +51182,16 @@ function HeroAnnouncementBadge({
   actions,
   actionsSlot,
   background,
-  spacing,
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "pt-32 pb-16 md:pt-32 md:pb-32",
   badgeClassName,
   headingClassName,
   descriptionClassName,
   actionsClassName
 }) {
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  }, [actionsSlot, actions]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -51184,25 +51200,48 @@ function HeroAnnouncementBadge({
       pattern,
       patternOpacity,
       className,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
-        badge && /* @__PURE__ */ jsxs(
-          Badge,
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-4 md:gap-6 lg:gap-8", children: [
+        badge && /* @__PURE__ */ jsxs(Badge, { className: cn("gap-2", badgeClassName), children: [
+          badgeIcon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "flex size-8 shrink-0 items-center justify-center rounded-full"
+              ),
+              children: badgeIcon
+            }
+          ),
+          typeof badge === "string" ? /* @__PURE__ */ jsx("p", { className: "truncate whitespace-nowrap pr-2", children: badge }) : badge
+        ] }),
+        heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+          "h1",
           {
-            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__ */ jsx("span", { className: cn(
-                "mr-2 flex size-8 shrink-0 items-center justify-center rounded-full",
-                getNestedCardBg(background, "accent"),
-                getNestedCardTextColor(background)
-              ), children: badgeIcon }),
-              typeof badge === "string" ? /* @__PURE__ */ jsx("p", { className: "truncate whitespace-nowrap", children: badge }) : badge
-            ]
+            className: cn(
+              "text-4xl leading-none font-bold tracking-tighter md:text-[7vw] lg:text-8xl",
+              headingClassName
+            ),
+            children: heading
           }
-        ),
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-6 text-4xl leading-none font-bold tracking-tighter md:text-[7vw] lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-2xl md:text-[2vw] lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-6 flex flex-col gap-4 sm:flex-row lg:mt-10", actionsClassName), children: renderActions })
+        ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "max-w-2xl md:text-[2vw] lg:text-xl text-balance",
+              descriptionClassName
+            ),
+            children: description
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+        /* @__PURE__ */ jsx(
+          BlockActions,
+          {
+            actions,
+            actionsSlot,
+            actionsClassName
+          }
+        )
       ] })
     }
   );
@@ -51395,13 +51434,13 @@ function HeroSimpleCenteredImage({
   actions,
   actionsSlot,
   imageSrc,
-  imageAlt = "placeholder hero",
+  imageAlt,
   background,
-  spacing,
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -51410,11 +51449,18 @@ function HeroSimpleCenteredImage({
   imageClassName,
   optixFlowConfig
 }) {
-  const renderActions = useMemo(() => {
+  useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -51438,22 +51484,69 @@ function HeroSimpleCenteredImage({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("container flex flex-col items-center text-center", containerClassName, contentClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ 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__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-6 max-w-xl lg:mb-12 lg:text-2xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mb-6 flex gap-2 lg:mb-12", actionsClassName), children: renderActions })
-        ] }),
-        imageSrc && /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsx("div", { className: cn("aspect-video mask-[linear-gradient(#000_80%,transparent_100%)]", imageWrapperClassName), children: /* @__PURE__ */ jsx(
-          Img,
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            src: imageSrc,
-            alt: imageAlt,
-            className: cn("h-full w-full rounded-md object-cover", imageClassName),
-            optixFlowConfig
+            className: cn(
+              "flex flex-col items-center text-center",
+              contentClassName
+            ),
+            children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "my-3 text-3xl font-bold text-balance sm:text-4xl md:my-6 lg:text-6xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "max-w-xl md:max-w-md lg:text-2xl text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
+            ]
           }
-        ) }) })
+        ),
+        imageSrc && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "aspect-video mask-[linear-gradient(#000_80%,transparent_100%)] mt-8 md:mt-16",
+              imageWrapperClassName
+            ),
+            children: /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: imageSrc,
+                alt: imageAlt,
+                className: cn(
+                  "h-full w-full rounded-t-2xl object-cover",
+                  imageClassName
+                ),
+                optixFlowConfig
+              }
+            )
+          }
+        )
       ]
     }
   );
@@ -51470,7 +51563,7 @@ function HeroPlatformFeaturesGrid({
   featuresSlot,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-32",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
@@ -51489,7 +51582,7 @@ function HeroPlatformFeaturesGrid({
         src: logoSrc,
         alt: logo.alt,
         className: cn(
-          "mx-auto mb-5 w-16 md:mb-6 md:w-24 lg:mb-7 lg:w-28",
+          "mx-auto mb-5 w-24 md:mb-6 md:w-28 lg:mb-7 lg:w-32",
           logo.imgClassName
         ),
         optixFlowConfig
@@ -51520,7 +51613,7 @@ function HeroPlatformFeaturesGrid({
       "div",
       {
         className: cn(
-          "mt-16 grid gap-px overflow-hidden rounded-lg border bg-input md:grid-cols-2 lg:grid-cols-4 w-full",
+          "mt-12 md:mt-16 grid gap-px overflow-hidden rounded-lg border bg-input md:grid-cols-2 lg:grid-cols-4 w-full",
           featuresClassName
         ),
         children: features.map((feature, index) => /* @__PURE__ */ jsxs(
@@ -51555,7 +51648,7 @@ function HeroPlatformFeaturesGrid({
           "div",
           {
             className: cn(
-              "flex flex-col items-center w-full gap-6 text-center",
+              "flex flex-col items-center w-full gap-4 md:gap-6 text-center",
               headerClassName
             ),
             children: [
@@ -51580,7 +51673,7 @@ function HeroPlatformFeaturesGrid({
                   children: heading
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-2xl md:text-lg text-balance"), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("max-w-2xl md:text-lg text-balance"), children: description })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-6 max-w-2xl md:text-lg text-balance"), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("max-w-2xl md:text-lg text-balance"), children: description })),
               renderAction
             ]
           }
@@ -51596,11 +51689,12 @@ function HeroSpiralPatternCards({
   description,
   actions,
   actionsSlot,
+  actionsClassName,
   images,
   imagesSlot,
   optixFlowConfig,
   background,
-  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
+  spacing = "xl",
   pattern,
   patternOpacity,
   className,
@@ -51609,34 +51703,6 @@ function HeroSpiralPatternCards({
   descriptionClassName,
   imagesClassName
 }) {
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col justify-center gap-2 sm:flex-row", children: actions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
-  }, [actionsSlot, actions]);
   const renderImages = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
@@ -51644,7 +51710,7 @@ function HeroSpiralPatternCards({
       "div",
       {
         className: cn(
-          "mt-16 flex flex-col items-center justify-center lg:mt-32",
+          "mt-16 flex flex-col items-center justify-center lg:mt-20",
           imagesClassName
         ),
         children: /* @__PURE__ */ jsxs("div", { className: "relative mx-auto aspect-square w-[95%] max-w-125 sm:w-full", children: [
@@ -51729,7 +51795,14 @@ function HeroSpiralPatternCards({
               children: description
             }
           ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          renderActions
+          /* @__PURE__ */ jsx(
+            BlockActions,
+            {
+              actions,
+              actionsSlot,
+              actionsClassName
+            }
+          )
         ] }),
         renderImages
       ] })
@@ -51901,11 +51974,12 @@ function HeroSplitGeometricShapes({
   images,
   imagesSlot,
   background,
-  spacing = "py-6 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
+  actionsClassName,
   patternOpacity,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -51935,34 +52009,6 @@ function HeroSplitGeometricShapes({
   const handleLightboxClose = useCallback(() => {
     setLightboxOpen(false);
   }, []);
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", children: actions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
-  }, [actionsSlot, actions]);
   const renderImages = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
@@ -52038,54 +52084,70 @@ function HeroSplitGeometricShapes({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsx("div", { className: cn("flex flex-col items-center"), children: /* @__PURE__ */ jsx("div", { className: cn("2xl:w-[calc(min(100vw-2*theme(container.padding),100%+8rem))] w-full overflow-clip rounded-lg", getNestedCardBg(background)), children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-0 md:gap-8 lg:grid-cols-2", children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "container flex flex-col items-center px-10 py-8 text-center lg:mx-auto lg:items-start lg:px-16 lg:py-32 lg:text-left",
-                contentClassName
+        /* @__PURE__ */ jsx("div", { className: cn("flex flex-col items-center"), children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "2xl:w-[calc(min(100vw-2*theme(container.padding),100%+8rem))] w-full overflow-clip rounded-lg bg-muted"
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-0 md:gap-8 lg:grid-cols-2", children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-col items-center pr-6 pl-6 py-8 text-center lg:mx-auto lg:items-start lg:pr-6 lg:pl-20 lg:py-32 lg:text-left",
+                    contentClassName
+                  ),
+                  children: [
+                    badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx("p", { children: badgeText }) : badgeText),
+                    heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                      "h1",
+                      {
+                        className: cn(
+                          "my-6 text-4xl font-bold text-balance lg:text-6xl",
+                          headingClassName
+                        ),
+                        children: heading
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      "h1",
+                      {
+                        className: cn(
+                          "my-6 text-4xl font-bold text-balance lg:text-6xl",
+                          headingClassName
+                        ),
+                        children: heading
+                      }
+                    )),
+                    description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: cn(
+                          "mb-4 md:mb-6 max-w-xl lg:text-xl text-balance",
+                          descriptionClassName
+                        ),
+                        children: description
+                      }
+                    ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+                    /* @__PURE__ */ jsx(
+                      BlockActions,
+                      {
+                        actions,
+                        actionsSlot,
+                        actionsClassName,
+                        mobileConfig: { width: "full", position: "center" }
+                      }
+                    )
+                  ]
+                }
               ),
-              children: [
-                badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx("p", { children: badgeText }) : badgeText),
-                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                  "h1",
-                  {
-                    className: cn(
-                      "my-6 text-4xl font-bold text-pretty lg:text-6xl",
-                      headingClassName
-                    ),
-                    children: heading
-                  }
-                ) : /* @__PURE__ */ jsx(
-                  "h1",
-                  {
-                    className: cn(
-                      "my-6 text-4xl font-bold text-pretty lg:text-6xl",
-                      headingClassName
-                    ),
-                    children: heading
-                  }
-                )),
-                description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                  "p",
-                  {
-                    className: cn(
-                      "mb-8 max-w-xl lg:text-xl",
-                      descriptionClassName
-                    ),
-                    children: description
-                  }
-                ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-                renderActions
-              ]
-            }
-          ),
-          renderImages
-        ] }) }) }),
+              renderImages
+            ] })
+          }
+        ) }),
         lightboxOpen && /* @__PURE__ */ jsx(
           Lightbox,
           {
@@ -52126,11 +52188,11 @@ function HeroCommunitySurveyCta({
   rightOverlayImage,
   imagesSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   announcementClassName,
   headingClassName,
   descriptionClassName,
@@ -52140,29 +52202,22 @@ function HeroCommunitySurveyCta({
 }) {
   const renderAnnouncement = useMemo(() => {
     if (announcementSlot) return announcementSlot;
-    return /* @__PURE__ */ jsxs(
-      Pressable,
+    return /* @__PURE__ */ jsx(Pressable, { href: announcementHref, children: /* @__PURE__ */ jsxs(
+      Badge,
       {
-        href: announcementHref,
         className: cn(
-          "group mx-auto mb-3 w-fit gap-3 rounded-full border px-5 py-2 text-sm",
+          "group mx-auto w-fit gap-3 px-5 py-2 text-sm h-fit",
           announcementClassName
         ),
         children: [
-          /* @__PURE__ */ jsx("span", { className: "mr-1 font-medium", children: announcementPrimary }),
-          announcementSecondary,
-          /* @__PURE__ */ jsx(
-            DynamicIcon,
-            {
-              name: "lucide/minus",
-              size: 16,
-              className: "mx-1 inline-block"
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "font-semibold group-hover:underline", children: announcementLinkText })
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx("div", { className: "font-medium", children: announcementPrimary }),
+            announcementSecondary
+          ] }),
+          announcementLinkText ? /* @__PURE__ */ jsx("span", { className: "font-semibold pl-4 ml-4 border-l", children: announcementLinkText }) : null
         ]
       }
-    );
+    ) });
   }, [
     announcementSlot,
     announcementHref,
@@ -52171,46 +52226,119 @@ function HeroCommunitySurveyCta({
     announcementSecondary,
     announcementLinkText
   ]);
+  const imageCount = useMemo(() => {
+    let count = 0;
+    if (mainImage) count++;
+    if (leftOverlayImage) count++;
+    if (rightOverlayImage) count++;
+    return count;
+  }, [mainImage, leftOverlayImage, rightOverlayImage]);
   const renderImages = useMemo(() => {
     if (imagesSlot) return imagesSlot;
-    return /* @__PURE__ */ jsxs("div", { className: cn("relative mx-auto max-w-5xl", imagesClassName), children: [
-      mainImage && /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: mainImage.src,
-          alt: mainImage.alt,
-          className: mainImage.className,
-          optixFlowConfig
-        }
-      ),
-      leftOverlayImage && /* @__PURE__ */ jsx(
-        Img,
+    if (imageCount === 0) return null;
+    if (imageCount === 1) {
+      const img = mainImage || leftOverlayImage || rightOverlayImage;
+      return /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(
+        "div",
         {
-          src: leftOverlayImage.src,
-          alt: leftOverlayImage.alt,
-          className: leftOverlayImage.className,
-          optixFlowConfig
+          className: cn(
+            "relative aspect-4/3 w-full max-w-lg overflow-hidden rounded-lg shadow-2xl",
+            imagesClassName
+          ),
+          children: /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: img.src,
+              alt: img.alt,
+              className: "h-full w-full object-cover",
+              optixFlowConfig
+            }
+          )
         }
-      ),
-      rightOverlayImage && /* @__PURE__ */ jsx(
-        Img,
+      ) });
+    }
+    if (imageCount === 2) {
+      const imgs = [mainImage, leftOverlayImage, rightOverlayImage].filter(
+        Boolean
+      );
+      return /* @__PURE__ */ jsxs(
+        "div",
         {
-          src: rightOverlayImage.src,
-          alt: rightOverlayImage.alt,
-          className: rightOverlayImage.className,
-          optixFlowConfig
+          className: cn(
+            "relative min-h-[350px] md:min-h-[400px] lg:min-h-[450px]",
+            imagesClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-0 z-10 aspect-4/3 w-[70%] overflow-hidden rounded-lg shadow-2xl md:w-[65%]", children: /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: imgs[0].src,
+                alt: imgs[0].alt,
+                className: "h-full w-full object-cover",
+                optixFlowConfig
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 right-0 z-20 aspect-3/4 w-[55%] overflow-hidden rounded-lg shadow-2xl md:w-[50%]", children: /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: imgs[1].src,
+                alt: imgs[1].alt,
+                className: "h-full w-full object-cover",
+                optixFlowConfig
+              }
+            ) })
+          ]
         }
-      )
-    ] });
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative min-h-[380px] md:min-h-[430px] lg:min-h-[480px]",
+          imagesClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-0 z-10 aspect-4/3 w-[65%] overflow-hidden rounded-lg shadow-2xl", children: /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: mainImage.src,
+              alt: mainImage.alt,
+              className: "h-full w-full object-cover",
+              optixFlowConfig
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 right-0 z-20 aspect-3/4 w-[50%] overflow-hidden rounded-lg shadow-2xl", children: /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: rightOverlayImage.src,
+              alt: rightOverlayImage.alt,
+              className: "h-full w-full object-cover",
+              optixFlowConfig
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-[10%] z-30 aspect-square w-[35%] overflow-hidden rounded-lg shadow-2xl md:bottom-6 md:left-[15%]", children: /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: leftOverlayImage.src,
+              alt: leftOverlayImage.alt,
+              className: "h-full w-full object-cover",
+              optixFlowConfig
+            }
+          ) })
+        ]
+      }
+    );
   }, [
     imagesSlot,
     imagesClassName,
+    imageCount,
     mainImage,
     leftOverlayImage,
     rightOverlayImage,
     optixFlowConfig
   ]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Section,
     {
       background,
@@ -52219,14 +52347,14 @@ function HeroCommunitySurveyCta({
       patternOpacity,
       className,
       containerClassName,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "relative grid grid-cols-1 items-center gap-8 lg:grid-cols-2 lg:gap-12", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
           renderAnnouncement,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h1",
             {
               className: cn(
-                "mx-auto max-w-4xl text-4xl font-semibold text-balance lg:text-6xl",
+                "max-w-4xl text-4xl font-semibold text-balance lg:text-6xl",
                 headingClassName
               ),
               children: heading
@@ -52236,7 +52364,7 @@ function HeroCommunitySurveyCta({
             "p",
             {
               className: cn(
-                "mx-auto max-w-4xl lg:text-xl",
+                "max-w-4xl lg:text-xl text-balance",
                 descriptionClassName
               ),
               children: description
@@ -52251,11 +52379,8 @@ function HeroCommunitySurveyCta({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "relative px-8", children: [
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 top-1/2 h-full w-full bg-linear-to-b from-muted to-transparent to-50%" }),
-          renderImages
-        ] })
-      ]
+        /* @__PURE__ */ jsx("div", { className: "relative", children: renderImages })
+      ] })
     }
   );
 }
@@ -52269,7 +52394,6 @@ function HeroMarketplaceScatteredImages({
   taglineSlot,
   images,
   imagesSlot,
-  showGridPattern = true,
   background,
   spacing = "py-32 md:py-32",
   pattern,
@@ -52336,10 +52460,7 @@ function HeroMarketplaceScatteredImages({
         children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 md:grid-cols-3", children: columns.map((colImages, colIndex) => /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn(
-              "grid gap-3",
-              colIndex === 2 && "hidden md:grid"
-            ),
+            className: cn("grid gap-3", colIndex === 2 && "hidden md:grid"),
             children: colImages.map((image, imgIndex) => {
               const height = heightPatterns[colIndex][imgIndex % heightPatterns[colIndex].length];
               const direction = colIndex % 2 === 0 ? "up" : "down";
@@ -52408,7 +52529,7 @@ function HeroMarketplaceScatteredImages({
           "div",
           {
             className: cn(
-              "relative mx-auto max-w-xl py-10 text-center flex flex-col gap-6 items-center",
+              "relative mx-auto max-w-xl py-0 md:py-10 text-center flex flex-col gap-6 items-center",
               contentClassName
             ),
             children: [
@@ -52472,34 +52593,6 @@ function HeroBadgeShadowOverlay({
   headingClassName,
   actionsClassName
 }) {
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col md:flex-row gap-4", actionsClassName), children: actions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
-  }, [actionsSlot, actions, actionsClassName]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -52510,7 +52603,7 @@ function HeroBadgeShadowOverlay({
       className: cn("relative flex items-center justify-center", className),
       containerClassName,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "flex flex-col min-h-screen h-full justify-center items-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-10 text-center px-6 max-full md:max-w-lg", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col min-h-screen h-full justify-center items-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 text-center px-6 max-full md:max-w-lg", children: [
           (announcementBadge || announcementText) && /* @__PURE__ */ jsxs(
             Pressable,
             {
@@ -52530,7 +52623,7 @@ function HeroBadgeShadowOverlay({
             "h1",
             {
               className: cn(
-                "text-4xl font-semibold lg:text-8xl text-white text-balance text-shadow-xl text-center",
+                "text-4xl font-semibold lg:text-8xl text-white text-balance text-shadow-2xl text-center",
                 headingClassName
               ),
               children: heading
@@ -52546,7 +52639,14 @@ function HeroBadgeShadowOverlay({
               children: description
             }
           ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          renderActions
+          /* @__PURE__ */ jsx(
+            BlockActions,
+            {
+              actions,
+              actionsSlot,
+              actionsClassName
+            }
+          )
         ] }) }),
         backgroundImageUrl && /* @__PURE__ */ jsx(
           Img,
@@ -52680,18 +52780,16 @@ function HeroVideoBackgroundDark({
 }
 function HeroGridPatternEfficiency({
   heading,
-  highlightedWord = "efficiency.",
   description,
   action,
   actionSlot,
-  actionSubtext = "No credit card required.",
-  showGridPattern = true,
+  actionSubtext,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -52700,7 +52798,14 @@ function HeroGridPatternEfficiency({
   const renderAction = useMemo(() => {
     if (actionSlot) return actionSlot;
     if (!action) return null;
-    const { label, icon, iconAfter, children, className: btnClassName, ...pressableProps } = action;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: btnClassName,
+      ...pressableProps
+    } = action;
     return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: btnClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
       icon,
       label,
@@ -52709,14 +52814,29 @@ function HeroGridPatternEfficiency({
   }, [actionSlot, action]);
   const renderHeading = useMemo(() => {
     if (heading) {
-      return typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-5xl leading-tight font-extrabold lg:text-8xl lg:leading-snug", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-5xl leading-tight font-extrabold lg:text-8xl lg:leading-snug", headingClassName), children: heading });
+      return typeof heading === "string" ? /* @__PURE__ */ jsx(
+        "h1",
+        {
+          className: cn(
+            "text-5xl leading-tight font-extrabold lg:text-8xl lg:leading-snug text-balance",
+            headingClassName
+          ),
+          children: heading
+        }
+      ) : /* @__PURE__ */ jsx(
+        "h1",
+        {
+          className: cn(
+            "text-5xl leading-tight font-extrabold lg:text-8xl lg:leading-snug text-balance",
+            headingClassName
+          ),
+          children: heading
+        }
+      );
+    } else {
+      return null;
     }
-    return /* @__PURE__ */ jsxs("h1", { className: cn("text-5xl leading-tight font-extrabold lg:text-8xl lg:leading-snug", headingClassName), children: [
-      "Less complexity. ",
-      /* @__PURE__ */ jsx("span", { className: "mr-6", children: "More" }),
-      /* @__PURE__ */ jsx("span", { className: cn("relative inline-block before:absolute before:top-0 before:-right-2 before:-bottom-2 before:-left-4 before:-z-10 before:rounded-lg", `before:${getTextColor(background, "muted")}/15`), children: highlightedWord })
-    ] });
-  }, [heading, highlightedWord, headingClassName]);
+  }, [heading, headingClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -52724,15 +52844,33 @@ function HeroGridPatternEfficiency({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("relative max-w-5xl", contentClassName), children: [
-        showGridPattern && /* @__PURE__ */ 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]" }),
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: cn("relative max-w-5xl", contentClassName), children: [
         renderHeading,
-        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-7 text-xl font-light lg:text-3xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-        /* @__PURE__ */ jsxs("div", { className: cn("mt-12 flex w-fit flex-col gap-2.5 text-center", actionClassName), children: [
-          renderAction,
-          actionSubtext && (typeof actionSubtext === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: actionSubtext }) : actionSubtext)
-        ] })
+        description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "mt-7 text-xl font-light lg:text-3xl text-balance",
+              descriptionClassName
+            ),
+            children: description
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mt-12 flex w-fit flex-col gap-2.5 text-center",
+              actionClassName
+            ),
+            children: [
+              renderAction,
+              actionSubtext && (typeof actionSubtext === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: actionSubtext }) : actionSubtext)
+            ]
+          }
+        )
       ] }) })
     }
   );
@@ -52917,18 +53055,17 @@ function HeroDesignCarouselPortfolio({
   featuresSlot,
   heading,
   description,
-  primaryAction,
-  primaryActionAvatar,
-  secondaryAction,
+  actions,
   actionsSlot,
+  actionsClassName,
   carouselImages,
   carouselSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -52944,7 +53081,7 @@ function HeroDesignCarouselPortfolio({
       Img,
       {
         src: logoSrc,
-        className: cn("h-12 lg:h-16", logo.className),
+        className: cn("object-contain w-auto h-12 lg:h-16", logo.className),
         alt: logo.alt,
         optixFlowConfig
       }
@@ -52953,53 +53090,23 @@ function HeroDesignCarouselPortfolio({
   const renderFeatures = useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("hidden items-center gap-6 lg:flex", featuresClassName), children: features.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 ", children: [
-      feature.icon ?? /* @__PURE__ */ jsx(DynamicIcon, { name: feature.iconName || "lucide/check-circle", size: 24 }),
-      /* @__PURE__ */ jsx("span", { children: feature.title })
-    ] }, index)) });
-  }, [featuresSlot, features, featuresClassName]);
-  const renderPrimaryAction = useMemo(() => {
-    if (actionsSlot) return null;
-    if (!primaryAction) return null;
-    const { label, className: actionClassName, ...pressableProps } = primaryAction;
-    return /* @__PURE__ */ jsxs(
-      Pressable,
+    return /* @__PURE__ */ jsx(
+      "div",
       {
-        asButton: true,
-        className: actionClassName,
-        ...pressableProps,
-        children: [
-          /* @__PURE__ */ jsx(
-            Img,
+        className: cn("hidden items-center gap-6 lg:flex", featuresClassName),
+        children: features.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 ", children: [
+          feature.icon ?? /* @__PURE__ */ jsx(
+            DynamicIcon,
             {
-              src: primaryActionAvatar,
-              alt: "",
-              className: "size-9 rounded-full object-cover lg:size-11",
-              optixFlowConfig
+              name: feature.iconName || "lucide/check-circle",
+              size: 24
             }
           ),
-          /* @__PURE__ */ jsx("span", { children: label })
-        ]
-      }
-    );
-  }, [actionsSlot, primaryAction, primaryActionAvatar, optixFlowConfig]);
-  const renderSecondaryAction = useMemo(() => {
-    if (actionsSlot) return null;
-    if (!secondaryAction) return null;
-    const { label, iconAfter, className: actionClassName, ...pressableProps } = secondaryAction;
-    return /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        asButton: true,
-        className: actionClassName,
-        ...pressableProps,
-        children: [
-          /* @__PURE__ */ jsx("span", { children: label }),
-          iconAfter
-        ]
+          /* @__PURE__ */ jsx("span", { children: feature.title })
+        ] }, index))
       }
     );
-  }, [actionsSlot, secondaryAction]);
+  }, [featuresSlot, features, featuresClassName]);
   const renderCarousel = useMemo(() => {
     if (carouselSlot) return carouselSlot;
     if (!carouselImages || carouselImages.length === 0) return null;
@@ -53019,7 +53126,10 @@ function HeroDesignCarouselPortfolio({
             delay: 1e3
           })
         ],
-        className: cn("relative mx-auto w-full max-w-full overflow-hidden from-white to-transparent before:absolute before:top-0 before:left-0 before:z-10 before:h-full before:w-[20%] before:bg-linear-to-r before:content-[''] after:absolute after:top-0 after:right-0 after:z-10 after:h-full after:w-[20%] after:bg-linear-to-l after:from-white after:to-transparent after:content-['']", carouselClassName),
+        className: cn(
+          "relative mx-auto w-full max-w-full overflow-hidden from-white to-transparent before:absolute before:top-0 before:left-0 before:z-10 before:h-full before:w-[20%] before:bg-linear-to-r before:content-[''] after:absolute after:top-0 after:right-0 after:z-10 after:h-full after:w-[20%] after:bg-linear-to-l after:from-white after:to-transparent after:content-['']",
+          carouselClassName
+        ),
         children: /* @__PURE__ */ jsx(CarouselContent, { className: "ml-5 flex gap-5 pl-4", children: carouselImages.map((image, index) => /* @__PURE__ */ jsx(CarouselItem, { className: "basis-[496px] bg-background", children: /* @__PURE__ */ jsx("div", { className: "h-[380px] basis-[480px] overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
           Img,
           {
@@ -53040,20 +53150,72 @@ function HeroDesignCarouselPortfolio({
       pattern,
       patternOpacity,
       className: cn("relative", className),
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("relative z-10 container mx-auto", containerClassName), children: [
-          /* @__PURE__ */ jsx("div", { className: "py-8", children: renderLogo }),
-          /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-10 py-10 lg:py-28", contentClassName), children: [
-            renderFeatures,
-            /* @__PURE__ */ jsx("div", { className: "flex", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-4", children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("max-w-6xl text-4xl tracking-tighter lg:text-7xl xl:text-9xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("max-w-6xl text-4xl tracking-tighter lg:text-7xl xl:text-9xl", headingClassName), children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg lg:text-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("p", { className: cn("text-lg lg:text-2xl", descriptionClassName), children: description }))
-            ] }) }),
-            actionsSlot || renderPrimaryAction
-          ] })
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          renderLogo ? /* @__PURE__ */ jsx("div", { className: "pb-8", children: renderLogo }) : null,
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex flex-col gap-10 pt-12 pb-8 lg:pt-24 lg:pb-12",
+                contentClassName
+              ),
+              children: [
+                renderFeatures,
+                /* @__PURE__ */ jsx("div", { className: "flex", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-4", children: [
+                  heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                    "h1",
+                    {
+                      className: cn(
+                        "max-w-6xl text-4xl tracking-tighter lg:text-7xl xl:text-9xl font-semibold",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "h1",
+                    {
+                      className: cn(
+                        "max-w-6xl text-4xl tracking-tighter lg:text-7xl xl:text-9xl font-semibold",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  )),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "text-lg lg:text-2xl text-balance",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "text-lg lg:text-2xl text-balance",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ))
+                ] }) }),
+                /* @__PURE__ */ jsx(
+                  BlockActions,
+                  {
+                    actions,
+                    actionsSlot,
+                    actionsClassName
+                  }
+                )
+              ]
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "relative flex flex-col", children: renderCarousel }),
-        actionsSlot || renderSecondaryAction
+        /* @__PURE__ */ jsx("div", { className: "relative flex flex-col", children: renderCarousel })
       ]
     }
   );
@@ -53066,45 +53228,28 @@ function HeroGradientClientFocused({
   image,
   imageSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   headingClassName,
   descriptionClassName,
   actionsClassName,
   imageClassName,
   optixFlowConfig
 }) {
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-2.5 text-lg max-lg:flex-col max-lg:text-base", actionsClassName), children: actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
-  }, [actionsSlot, actions, actionsClassName]);
   const renderImage = useMemo(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx(
       Img,
       {
-        className: cn("mt-10 w-[50%] rounded-xl shadow-[rgba(50,50,105,0.15)_0px_2px_5px_0px,rgba(0,0,0,0.05)_0px_1px_1px_0px] max-lg:w-full", imageClassName, image.className),
+        className: cn(
+          "rounded-2xl aspect-video shadow-xl w-full h-auto object-cover",
+          imageClassName,
+          image.className
+        ),
         src: image.src,
         alt: image.alt,
         optixFlowConfig
@@ -53114,14 +53259,50 @@ function HeroGradientClientFocused({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      className: cn(
-        "bg-gradient-to-b from-accent/5 to-primary/5 py-20 text-center",
-        className
-      ),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container flex flex-col items-center gap-5", containerClassName), children: [
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("max-w-2xl text-7xl font-medium max-lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("max-w-2xl text-7xl font-medium max-lg:text-5xl", headingClassName), children: heading })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-2xl max-lg:text-sm", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-        renderActions,
+      className: cn("text-center", className),
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center gap-8 md:gap-12", children: [
+        heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+          "h1",
+          {
+            className: cn(
+              "max-w-2xl text-7xl font-semibold max-lg:text-5xl text-balance",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) : /* @__PURE__ */ jsx(
+          "h1",
+          {
+            className: cn(
+              "max-w-2xl text-7xl font-semibold max-lg:text-5xl text-balance",
+              headingClassName
+            ),
+            children: heading
+          }
+        )),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "max-w-2xl max-lg:text-sm text-balance",
+              descriptionClassName
+            ),
+            children: description
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+        /* @__PURE__ */ jsx(
+          BlockActions,
+          {
+            actions,
+            actionsSlot,
+            actionsClassName
+          }
+        ),
         renderImage
       ] })
     }
@@ -53252,48 +53433,21 @@ function HeroUiLibraryShowcase({
   description,
   actions,
   actionsSlot,
+  actionsClassName,
   image,
   imageSlot,
   background,
-  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   headerClassName,
   headingClassName,
   descriptionClassName,
   imageClassName,
   optixFlowConfig
 }) {
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  }, [actionsSlot, actions]);
   const renderLogo = useMemo(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
@@ -53310,7 +53464,7 @@ function HeroUiLibraryShowcase({
   const renderImage = useMemo(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
-    return /* @__PURE__ */ jsx("div", { className: "w-full overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.916786227 / 1, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: "w-full overflow-hidden rounded-2xl shadow-xl mt-8 md:mt-12", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.916786227 / 1, children: /* @__PURE__ */ jsx(
       Img,
       {
         src: image.src,
@@ -53334,48 +53488,48 @@ function HeroUiLibraryShowcase({
       className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn("flex flex-col gap-10 md:items-center", headerClassName),
-            children: [
-              renderLogo,
-              /* @__PURE__ */ jsxs("div", { className: "flex max-w-[880px] flex-col items-center gap-6", children: [
-                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                  "h1",
-                  {
-                    className: cn(
-                      "text-4xl tracking-tighter capitalize md:text-5xl lg:text-6xl",
-                      headingClassName
-                    ),
-                    children: /* @__PURE__ */ jsx("p", { children: heading })
-                  }
-                ) : /* @__PURE__ */ jsx(
-                  "h1",
-                  {
-                    className: cn(
-                      "text-4xl tracking-tighter capitalize md:text-5xl lg:text-6xl",
-                      headingClassName
-                    ),
-                    children: heading
-                  }
-                )),
-                description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                  "p",
-                  {
-                    className: cn(
-                      "text-xl",
-                      getTextColor(background, "muted"),
-                      descriptionClassName
-                    ),
-                    children: description
-                  }
-                ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-              ] }),
-              renderActions
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-10 items-start", headerClassName), children: [
+          renderLogo,
+          /* @__PURE__ */ jsxs("div", { className: "flex max-w-[880px] flex-col items-center gap-6", children: [
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+              "h1",
+              {
+                className: cn(
+                  "text-4xl tracking-tighter font-semibold md:text-5xl lg:text-6xl",
+                  headingClassName
+                ),
+                children: /* @__PURE__ */ jsx("p", { children: heading })
+              }
+            ) : /* @__PURE__ */ jsx(
+              "h1",
+              {
+                className: cn(
+                  "text-4xl tracking-tighter font-semibold md:text-5xl lg:text-6xl",
+                  headingClassName
+                ),
+                children: heading
+              }
+            )),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "text-xl text-balance font-medium",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+          ] }),
+          /* @__PURE__ */ jsx(
+            BlockActions,
+            {
+              actions,
+              actionsSlot,
+              actionsClassName
+            }
+          )
+        ] }),
         renderImage
       ]
     }
@@ -53387,57 +53541,85 @@ function HeroFullscreenBackgroundImage({
   actions,
   actionsSlot,
   backgroundImage,
-  noiseOverlayUrl = "https://cdn.ing/assets/i/r/286188/zrqcp9hynh3j7p2laihwzfbujgrl/noise.png",
   background,
-  spacing,
+  spacing = "none",
   pattern,
   patternOpacity,
   className,
-  contentClassName,
+  containerClassName = "px-0 sm:px-0 lg:px-0 max-w-full relative z-10 h-screen w-screen flex justify-center items-center",
+  contentClassName = "relative flex flex-col gap-12 px-6 pt-28 pb-6 md:pt-0 md:pb-0",
   headingClassName,
   descriptionClassName,
-  actionsClassName
+  actionsClassName,
+  optixFlowConfig
 }) {
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
+  const renderBackground = useMemo(() => {
+    if (!backgroundImage) return null;
+    return /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", children: [
+      /* @__PURE__ */ jsx(
+        Img,
         {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  }, [actionsSlot, actions]);
+          src: backgroundImage,
+          alt: "Full screen background image",
+          className: "h-full w-full object-cover",
+          loading: "eager",
+          optixFlowConfig
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-b from-black/80 via-black/65 to-black/20" })
+    ] });
+  }, [backgroundImage, optixFlowConfig]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
       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-foreground/20 after:content-[''] md:h-svh",
+        "relative flex h-full min-h-screen w-screen items-center justify-center overflow-hidden bg-black pb-0 pt-0 md:pt-0 px-0",
         className
       ),
-      style: { backgroundImage: `url('${backgroundImage}')` },
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("relative z-30 m-auto flex max-w-185 flex-col items-center justify-center gap-6 px-5", contentClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-center font-serif text-4xl leading-tight md:text-6xl xl:text-[4.4rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-base ", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: actionsClassName, children: renderActions })
-        ] }),
-        noiseOverlayUrl && /* @__PURE__ */ jsx(
+        renderBackground,
+        /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "pointer-events-none absolute inset-0 z-20 h-full w-full bg-repeat opacity-15",
-            style: { backgroundImage: `url('${noiseOverlayUrl}')` }
+            className: cn(
+              "relative z-30 m-auto flex max-w-185 flex-col items-center justify-center gap-6 px-5",
+              contentClassName
+            ),
+            children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-center text-4xl leading-tight md:text-6xl xl:text-[4.4rem] text-balance text-white text-shadow-2xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-center text-base text-balance text-shadow-2xl",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
+            ]
           }
         )
       ]
@@ -53453,16 +53635,32 @@ function HeroFullscreenLogoCta({
   actionSlot,
   backgroundImage,
   background,
-  spacing,
+  spacing = "none",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
-  contentClassName,
+  containerClassName = "px-0 sm:px-0 lg:px-0 max-w-full relative z-10 h-screen w-screen flex justify-center items-center",
+  contentClassName = "relative flex flex-col gap-12 px-6 pt-28 pb-6 md:pt-0 md:pb-0",
   headingClassName,
   descriptionClassName,
   optixFlowConfig
 }) {
+  const renderBackground = useMemo(() => {
+    if (!backgroundImage) return null;
+    return /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", children: [
+      /* @__PURE__ */ jsx(
+        Img,
+        {
+          src: backgroundImage,
+          alt: "Full screen background image",
+          className: "h-full w-full object-cover",
+          loading: "eager",
+          optixFlowConfig
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-b from-black/80 via-black/65 to-black/20" })
+    ] });
+  }, [backgroundImage, optixFlowConfig]);
   const renderLogo = useMemo(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
@@ -53472,7 +53670,7 @@ function HeroFullscreenLogoCta({
       {
         src: logoSrc,
         alt: logo.alt,
-        className: cn("size-20", logo.className),
+        className: cn("h-24 w-auto object-contain", logo.className),
         optixFlowConfig
       }
     );
@@ -53480,46 +53678,85 @@ function HeroFullscreenLogoCta({
   const renderAction = useMemo(() => {
     if (actionSlot) return actionSlot;
     if (!action) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-    return /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        asButton: true,
-        className: actionClassName,
-        ...pressableProps,
-        children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-          icon,
-          /* @__PURE__ */ jsx("span", { className: "text-2xl", children: label }),
-          iconAfter
-        ] })
-      }
-    );
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = action;
+    return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      icon,
+      label,
+      iconAfter
+    ] }) });
   }, [actionSlot, action]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Section,
     {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
       className: cn(
-        "dark h-screen w-screen bg-background bg-cover bg-center bg-no-repeat pt-12 pb-24",
+        "relative flex h-full min-h-screen w-screen items-center justify-center overflow-hidden bg-black pb-0 pt-0 md:pt-0 px-0",
         className
       ),
-      style: { backgroundImage: `url('${backgroundImage}')` },
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container flex h-full flex-col justify-between px-5 xl:px-20", containerClassName), children: [
-        renderLogo,
-        /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between", children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-8 md:w-2/3", contentClassName), children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-6xl font-medium md:text-[5.8rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-6xl font-medium md:text-[5.8rem]", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xl md:text-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-          ] }),
-          renderAction
-        ] })
-      ] })
+      containerClassName,
+      children: [
+        renderBackground,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative z-30 m-auto flex max-w-185 flex-col items-start justify-center gap-6 px-5",
+              contentClassName
+            ),
+            children: [
+              renderLogo,
+              /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between", children: [
+                /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-8 md:w-2/3"), children: [
+                  heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                    "h1",
+                    {
+                      className: cn(
+                        "text-6xl font-font-semibold md:text-[5.8rem]",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "h1",
+                    {
+                      className: cn(
+                        "text-6xl font-semibold md:text-[5.8rem]",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  )),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "text-xl md:text-2xl text-balance",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+                ] }),
+                renderAction
+              ] })
+            ]
+          }
+        )
+      ]
     }
   );
 }
 function HeroGradientAvatarsRating({
-  topLinkText,
-  topLinkHref,
-  topLinkSlot,
   heading,
   headingSubtitle,
   description,
@@ -53533,11 +53770,11 @@ function HeroGradientAvatarsRating({
   images,
   imagesSlot,
   background,
-  spacing,
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -53545,39 +53782,6 @@ function HeroGradientAvatarsRating({
   imagesClassName,
   optixFlowConfig
 }) {
-  const renderTopLink = useMemo(() => {
-    if (topLinkSlot) return topLinkSlot;
-    if (!topLinkText || !topLinkHref) return null;
-    return /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        href: topLinkHref,
-        className: cn("my-6 text-xs font-bold tracking-[0.3em] uppercase hover:underline", getTextColor(background, "muted")),
-        children: topLinkText
-      }
-    );
-  }, [topLinkSlot, topLinkText, topLinkHref]);
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col justify-center gap-3 sm:flex-row lg:justify-start", actionsClassName), children: actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
-  }, [actionsSlot, actions, actionsClassName]);
   const renderAvatars = useMemo(() => {
     if (avatarsSlot) return avatarsSlot;
     if (!avatars || avatars.length === 0) return null;
@@ -53605,65 +53809,116 @@ function HeroGradientAvatarsRating({
         )),
         ratingValue && /* @__PURE__ */ jsx("span", { className: "font-semibold", children: ratingValue })
       ] }),
-      ratingLabel && (typeof ratingLabel === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm font-medium", getTextColor(background, "muted")), children: ratingLabel }) : ratingLabel)
+      ratingLabel && (typeof ratingLabel === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm font-medium"), children: ratingLabel }) : ratingLabel)
     ] });
   }, [ratingValue, ratingLabel, starCount]);
   const renderImages = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsxs("div", { className: cn("relative grid gap-4 lg:grid-cols-2", imagesClassName), children: [
-      images[0] && /* @__PURE__ */ jsx("div", { className: cn("relative aspect-3/4 w-full overflow-hidden rounded-lg", getNestedCardBg(background)), children: /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: images[0].src,
-          alt: images[0].alt,
-          className: cn("h-full w-full object-cover transition-transform duration-300 hover:scale-105", images[0].className),
-          optixFlowConfig
-        }
-      ) }),
-      images[1] && /* @__PURE__ */ jsx("div", { className: cn("relative aspect-3/4 w-full overflow-hidden rounded-lg lg:mt-8", getNestedCardBg(background)), children: /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: images[1].src,
-          alt: images[1].alt,
-          className: cn("h-full w-full object-cover transition-transform duration-300 hover:scale-105", images[1].className),
-          optixFlowConfig
-        }
-      ) })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("relative grid gap-4 lg:grid-cols-2", imagesClassName),
+        children: [
+          images[0] && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "relative aspect-3/4 w-full overflow-hidden rounded-xl shadow-xl"
+              ),
+              children: /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: images[0].src,
+                  alt: images[0].alt,
+                  className: cn(
+                    "h-full w-full object-cover transition-transform duration-300 hover:scale-105",
+                    images[0].className
+                  ),
+                  optixFlowConfig
+                }
+              )
+            }
+          ),
+          images[1] && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "relative aspect-3/4 w-full overflow-hidden rounded-lg lg:mt-8"
+              ),
+              children: /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: images[1].src,
+                  alt: images[1].alt,
+                  className: cn(
+                    "h-full w-full object-cover transition-transform duration-300 hover:scale-105",
+                    images[1].className
+                  ),
+                  optixFlowConfig
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
   }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Section,
     {
       background,
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: [
-        /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("div", { className: cn("relative z-10 container mx-auto px-4", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-8 lg:grid-cols-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center text-center lg:items-start lg:text-left", contentClassName), children: [
-            renderTopLink,
-            heading && /* @__PURE__ */ jsxs("h1", { className: cn("text-4xl font-semibold sm:text-5xl", headingClassName), children: [
-              typeof heading === "string" ? heading : heading,
-              headingSubtitle && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-                /* @__PURE__ */ jsx("br", {}),
-                /* @__PURE__ */ jsx("span", { className: getTextColor(background, "muted"), children: headingSubtitle })
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-8 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col items-center text-center lg:items-start lg:text-left",
+              contentClassName
+            ),
+            children: [
+              heading && /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl font-semibold sm:text-5xl",
+                    headingClassName
+                  ),
+                  children: typeof heading === "string" ? heading : heading
+                }
+              ),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "my-8 max-w-xl lg:text-lg",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              ),
+              (avatars || avatarsSlot || ratingValue || ratingLabel) && /* @__PURE__ */ jsxs("div", { className: "mt-8 flex flex-col items-center gap-4 sm:flex-row sm:items-center", children: [
+                renderAvatars,
+                renderRating
               ] })
-            ] }),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("my-8 max-w-xl lg:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-            renderActions,
-            (avatars || avatarsSlot || ratingValue || ratingLabel) && /* @__PURE__ */ jsxs("div", { className: "mt-8 flex flex-col items-center gap-4 sm:flex-row sm:items-center", children: [
-              renderAvatars,
-              renderRating
-            ] })
-          ] }),
-          renderImages
-        ] }) })
-      ]
+            ]
+          }
+        ),
+        renderImages
+      ] }) })
     }
   );
 }
@@ -53673,47 +53928,20 @@ function HeroTaskTimerAnimated({
   descriptionClassName,
   actions,
   actionsSlot,
+  actionsClassName,
   images,
   imagesSlot,
   background,
-  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
+  spacing = "xl",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   headingClassName,
   imagesClassName,
   optixFlowConfig
 }) {
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: "flex flex-col items-start mt-6 md:mt-8 gap-4 sm:flex-row sm:items-center", children: actions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            icon,
-            /* @__PURE__ */ jsx("span", { children: label }),
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
-  }, [actionsSlot, actions]);
   const renderImages = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length < 2) return null;
@@ -53784,7 +54012,14 @@ function HeroTaskTimerAnimated({
             }
           )),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          renderActions
+          /* @__PURE__ */ jsx(
+            BlockActions,
+            {
+              actions,
+              actionsSlot,
+              actionsClassName
+            }
+          )
         ] }),
         renderImages
       ] })
@@ -53798,17 +54033,15 @@ function HeroAiPoweredCarousel({
   description,
   actions,
   actionsSlot,
-  mobileCarouselImages1,
-  mobileCarouselImages2,
-  desktopCarouselImages1,
-  desktopCarouselImages2,
+  carouselImages1,
+  carouselImages2,
   carouselSlot,
   background,
-  spacing,
+  spacing = "xl",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   contentClassName,
   badgeClassName,
   headingClassName,
@@ -53816,27 +54049,6 @@ function HeroAiPoweredCarousel({
   actionsClassName,
   optixFlowConfig
 }) {
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  }, [actionsSlot, actions]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -53845,19 +54057,63 @@ function HeroAiPoweredCarousel({
       pattern,
       patternOpacity,
       className,
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-16 lg:grid-cols-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mx-auto", contentClassName), children: [
-          (badge || badgeTagline) && /* @__PURE__ */ 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__ */ jsx(Badge, { children: badge }),
-            badgeTagline
-          ] }),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mt-10 mb-4 text-3xl font-semibold lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto lg:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-10 flex flex-col gap-2 sm:flex-row", actionsClassName), children: renderActions })
-        ] }),
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-16 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto flex flex-col gap-4 md:gap-8",
+              contentClassName
+            ),
+            children: [
+              (badge || badgeTagline) && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex w-fit items-center gap-2 rounded-full border pl-2.5 pr-4 py-1.5 text-xs font-medium",
+                    badgeClassName
+                  ),
+                  children: [
+                    badge && /* @__PURE__ */ jsx(Badge, { children: badge }),
+                    badgeTagline
+                  ]
+                }
+              ),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "mt-10 mb-4 text-3xl font-semibold lg:text-5xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mx-auto lg:text-lg text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
+            ]
+          }
+        ),
         carouselSlot ? carouselSlot : /* @__PURE__ */ jsxs(Fragment$1, { children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8 lg:hidden", children: [
-            mobileCarouselImages1 && mobileCarouselImages1.length > 0 && /* @__PURE__ */ jsx(
+            carouselImages1 && carouselImages1.length > 0 && /* @__PURE__ */ jsx(
               Carousel,
               {
                 opts: {
@@ -53869,18 +54125,21 @@ function HeroAiPoweredCarousel({
                   })
                 ],
                 className: "-mx-7",
-                children: /* @__PURE__ */ jsx(CarouselContent, { className: "max-h-[350px]", children: mobileCarouselImages1.map((image, index) => /* @__PURE__ */ jsx(CarouselItem, { className: "max-w-96", children: /* @__PURE__ */ jsx(
+                children: /* @__PURE__ */ jsx(CarouselContent, { className: "max-h-[350px]", children: carouselImages1.map((image, index) => /* @__PURE__ */ jsx(CarouselItem, { className: "max-w-96", children: /* @__PURE__ */ jsx(
                   Img,
                   {
                     src: image.src,
                     alt: image.alt,
-                    className: image.className,
+                    className: cn(
+                      "rounded-lg shadow-lg",
+                      image.className
+                    ),
                     optixFlowConfig
                   }
                 ) }, index)) })
               }
             ),
-            mobileCarouselImages2 && mobileCarouselImages2.length > 0 && /* @__PURE__ */ jsx(
+            carouselImages2 && carouselImages2.length > 0 && /* @__PURE__ */ jsx(
               Carousel,
               {
                 opts: {
@@ -53893,12 +54152,15 @@ function HeroAiPoweredCarousel({
                   })
                 ],
                 className: "-mx-7",
-                children: /* @__PURE__ */ jsx(CarouselContent, { className: "max-h-[350px]", children: mobileCarouselImages2.map((image, index) => /* @__PURE__ */ jsx(CarouselItem, { className: "max-w-96", children: /* @__PURE__ */ jsx(
+                children: /* @__PURE__ */ jsx(CarouselContent, { className: "max-h-[350px]", children: carouselImages2.map((image, index) => /* @__PURE__ */ jsx(CarouselItem, { className: "max-w-96", children: /* @__PURE__ */ jsx(
                   Img,
                   {
                     src: image.src,
                     alt: image.alt,
-                    className: image.className,
+                    className: cn(
+                      "rounded-lg shadow-lg",
+                      image.className
+                    ),
                     optixFlowConfig
                   }
                 ) }, index)) })
@@ -53906,7 +54168,7 @@ function HeroAiPoweredCarousel({
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "hidden grid-cols-2 gap-8 lg:grid", children: [
-            desktopCarouselImages1 && desktopCarouselImages1.length > 0 && /* @__PURE__ */ jsx(
+            carouselImages1 && carouselImages1.length > 0 && /* @__PURE__ */ jsx(
               Carousel,
               {
                 opts: {
@@ -53918,18 +54180,21 @@ function HeroAiPoweredCarousel({
                   })
                 ],
                 orientation: "vertical",
-                children: /* @__PURE__ */ jsx(CarouselContent, { className: "max-h-[600px]", children: desktopCarouselImages1.map((image, index) => /* @__PURE__ */ jsx(CarouselItem, { children: /* @__PURE__ */ jsx(
+                children: /* @__PURE__ */ jsx(CarouselContent, { className: "max-h-[600px]", children: carouselImages1.map((image, index) => /* @__PURE__ */ jsx(CarouselItem, { children: /* @__PURE__ */ jsx(
                   Img,
                   {
                     src: image.src,
                     alt: image.alt,
-                    className: image.className,
+                    className: cn(
+                      "rounded-lg shadow-lg",
+                      image.className
+                    ),
                     optixFlowConfig
                   }
                 ) }, index)) })
               }
             ),
-            desktopCarouselImages2 && desktopCarouselImages2.length > 0 && /* @__PURE__ */ jsx(
+            carouselImages2 && carouselImages2.length > 0 && /* @__PURE__ */ jsx(
               Carousel,
               {
                 opts: {
@@ -53942,12 +54207,15 @@ function HeroAiPoweredCarousel({
                   })
                 ],
                 orientation: "vertical",
-                children: /* @__PURE__ */ jsx(CarouselContent, { className: "max-h-[600px]", children: desktopCarouselImages2.map((image, index) => /* @__PURE__ */ jsx(CarouselItem, { children: /* @__PURE__ */ jsx(
+                children: /* @__PURE__ */ jsx(CarouselContent, { className: "max-h-[600px]", children: carouselImages2.map((image, index) => /* @__PURE__ */ jsx(CarouselItem, { children: /* @__PURE__ */ jsx(
                   Img,
                   {
                     src: image.src,
                     alt: image.alt,
-                    className: image.className,
+                    className: cn(
+                      "rounded-lg shadow-lg",
+                      image.className
+                    ),
                     optixFlowConfig
                   }
                 ) }, index)) })
@@ -59646,7 +59914,7 @@ function HeroEventRegistration({
   locationSlot,
   background,
   containerClassName = "px-6  sm:px-0 md:px-0 lg:px-0",
-  spacing = "py-20 md:py-32",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
@@ -59665,34 +59933,6 @@ function HeroEventRegistration({
       badgeText
     ] });
   }, [badgeSlot, badgeIcon, badgeText]);
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-4 sm:flex-row", actionsClassName), children: actions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
-  }, [actionsSlot, actions, actionsClassName]);
   const renderStats = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
@@ -59768,7 +60008,14 @@ function HeroEventRegistration({
             }
           )),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          renderActions,
+          /* @__PURE__ */ jsx(
+            BlockActions,
+            {
+              actions,
+              actionsSlot,
+              actionsClassName
+            }
+          ),
           renderStats
         ] }),
         renderImage
@@ -83215,7 +83462,7 @@ function ListSearchableGrid({
     }
   );
 }
-var { useMemo: useMemo438 } = React23;
+var { useMemo: useMemo435 } = React23;
 function OfferModalNewsletterDiscount({
   title,
   emailPlaceholder,
@@ -83283,7 +83530,7 @@ function OfferModalNewsletterDiscount({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const dialogProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderCloseButton = useMemo438(() => {
+  const renderCloseButton = useMemo435(() => {
     if (closeButtonSlot) return closeButtonSlot;
     if (!closeButtonText) return null;
     return /* @__PURE__ */ jsx("div", { className: "absolute end-1.5 top-1.5", children: /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -83297,12 +83544,12 @@ function OfferModalNewsletterDiscount({
       }
     ) }) });
   }, [closeButtonSlot, closeButtonText, closeClassName]);
-  const renderHeader = useMemo438(() => {
+  const renderHeader = useMemo435(() => {
     if (headerSlot) return headerSlot;
     if (!title) return null;
     return /* @__PURE__ */ jsx(DialogHeader, { className: headerClassName, children: typeof title === "string" ? /* @__PURE__ */ jsx(DialogTitle, { className: cn("text-start font-serif text-2xl font-normal leading-snug", titleClassName), children: title }) : /* @__PURE__ */ jsx(DialogTitle, { className: cn("text-start font-serif text-2xl font-normal leading-snug", titleClassName), children: title }) });
   }, [headerSlot, title, headerClassName, titleClassName]);
-  const renderForm = useMemo438(() => {
+  const renderForm = useMemo435(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsxs(
       Form,
@@ -83364,7 +83611,7 @@ function OfferModalNewsletterDiscount({
     }
   ) });
 }
-var { useMemo: useMemo439 } = React23;
+var { useMemo: useMemo436 } = React23;
 function OfferModalMembershipImage({
   overline,
   title,
@@ -83441,7 +83688,7 @@ function OfferModalMembershipImage({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const dialogProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderImage = useMemo439(() => {
+  const renderImage = useMemo436(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("max-h-[290px] h-full overflow-hidden max-lg:hidden", imageWrapperClassName), children: /* @__PURE__ */ jsx(
@@ -83454,7 +83701,7 @@ function OfferModalMembershipImage({
       }
     ) });
   }, [imageSlot, image, imageWrapperClassName, imageClassName, optixFlowConfig]);
-  const renderCloseButton = useMemo439(() => {
+  const renderCloseButton = useMemo436(() => {
     if (closeButtonSlot) return closeButtonSlot;
     return /* @__PURE__ */ jsx("div", { className: "absolute -end-px -top-px z-10", children: /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(
       Pressable,
@@ -83470,7 +83717,7 @@ function OfferModalMembershipImage({
       }
     ) }) });
   }, [closeButtonSlot, closeClassName]);
-  const renderForm = useMemo439(() => {
+  const renderForm = useMemo436(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsxs(
       Form,
@@ -83533,7 +83780,7 @@ function OfferModalMembershipImage({
       }
     );
   }, [formSlot, form, formConfig, formMethod, emailPlaceholder, inputClassName, submitClassName, buttonText, formClassName]);
-  const renderFooter = useMemo439(() => {
+  const renderFooter = useMemo436(() => {
     if (footerSlot) return footerSlot;
     if (!description) return null;
     return /* @__PURE__ */ jsx(DialogFooter, { className: footerClassName, children: /* @__PURE__ */ jsx(DialogDescription, { className: cn("text-muted-foreground text-center text-xs leading-relaxed", descriptionClassName), children: description }) });
@@ -83653,7 +83900,7 @@ function SheetDescription({
     }
   );
 }
-var { useMemo: useMemo440 } = React23;
+var { useMemo: useMemo437 } = React23;
 function OfferModalSheetNewsletter({
   logo,
   logoSlot,
@@ -83736,7 +83983,7 @@ function OfferModalSheetNewsletter({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const sheetProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderLogo = useMemo440(() => {
+  const renderLogo = useMemo437(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
@@ -83750,7 +83997,7 @@ function OfferModalSheetNewsletter({
       }
     );
   }, [logoSlot, logo, logoClassName, optixFlowConfig]);
-  const renderHeader = useMemo440(() => {
+  const renderHeader = useMemo437(() => {
     if (headerSlot) return headerSlot;
     return /* @__PURE__ */ jsxs(SheetHeader, { className: cn("gap-8 p-0", headerClassName), children: [
       renderLogo,
@@ -83760,7 +84007,7 @@ function OfferModalSheetNewsletter({
       ] })
     ] });
   }, [headerSlot, renderLogo, headerClassName, title, titleClassName, description, descriptionClassName]);
-  const renderForm = useMemo440(() => {
+  const renderForm = useMemo437(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsx(
       Form,
@@ -83808,7 +84055,7 @@ function OfferModalSheetNewsletter({
       }
     );
   }, [formSlot, form, formConfig, formMethod, emailPlaceholder, inputClassName, submitClassName, buttonText, formClassName]);
-  const renderLegal = useMemo440(() => {
+  const renderLegal = useMemo437(() => {
     if (legalSlot) return legalSlot;
     if (!termsUrl || !termsText || !privacyUrl || !privacyText) return null;
     return /* @__PURE__ */ jsxs("p", { className: cn("text-muted-foreground text-xs", legalClassName), children: [
@@ -83822,7 +84069,7 @@ function OfferModalSheetNewsletter({
       "."
     ] });
   }, [legalSlot, termsUrl, termsText, privacyUrl, privacyText, legalClassName]);
-  const renderImage = useMemo440(() => {
+  const renderImage = useMemo437(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("h-1/2 basis-1/2", imageWrapperClassName), children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1, className: "overflow-hidden", children: /* @__PURE__ */ jsx(