@opensite/ui 2.0.3 → 2.0.4

package/dist/registry.js

@@ -50428,7 +50428,7 @@ function HeroCenteredImageGrid({
   patternOpacity,
   className,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
+  spacing = "xl",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -51186,7 +51186,7 @@ function HeroAnnouncementBadge({
   patternOpacity,
   className,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
+  spacing = "pt-32 pb-16 md:pt-32 md:pb-32",
   badgeClassName,
   headingClassName,
   descriptionClassName,
@@ -51212,7 +51212,7 @@ function HeroAnnouncementBadge({
               children: badgeIcon
             }
           ),
-          typeof badge === "string" ? /* @__PURE__ */ jsx("p", { className: "truncate whitespace-nowrap", children: badge }) : badge
+          typeof badge === "string" ? /* @__PURE__ */ jsx("p", { className: "truncate whitespace-nowrap pr-2", children: badge }) : badge
         ] }),
         heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
           "h1",
@@ -51440,7 +51440,7 @@ function HeroSimpleCenteredImage({
   patternOpacity,
   className,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
+  spacing = "xl",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -51509,7 +51509,7 @@ function HeroSimpleCenteredImage({
                 "p",
                 {
                   className: cn(
-                    "mb-6 max-w-xl lg:mb-12 lg:text-2xl text-balance",
+                    "max-w-xl md:max-w-md lg:text-2xl text-balance",
                     descriptionClassName
                   ),
                   children: description
@@ -51530,7 +51530,7 @@ function HeroSimpleCenteredImage({
           "div",
           {
             className: cn(
-              "aspect-video mask-[linear-gradient(#000_80%,transparent_100%)]",
+              "aspect-video mask-[linear-gradient(#000_80%,transparent_100%)] mt-8 md:mt-16",
               imageWrapperClassName
             ),
             children: /* @__PURE__ */ jsx(
@@ -51613,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(
@@ -51648,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: [
@@ -51689,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,
@@ -51702,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;
@@ -51822,7 +51795,14 @@ function HeroSpiralPatternCards({
               children: description
             }
           ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          renderActions
+          /* @__PURE__ */ jsx(
+            BlockActions,
+            {
+              actions,
+              actionsSlot,
+              actionsClassName
+            }
+          )
         ] }),
         renderImages
       ] })
@@ -52118,7 +52098,7 @@ function HeroSplitGeometricShapes({
                 "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",
+                    "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: [
@@ -52146,7 +52126,7 @@ function HeroSplitGeometricShapes({
                       "p",
                       {
                         className: cn(
-                          "mb-8 max-w-xl lg:text-xl text-balance",
+                          "mb-4 md:mb-6 max-w-xl lg:text-xl text-balance",
                           descriptionClassName
                         ),
                         children: description
@@ -52157,7 +52137,8 @@ function HeroSplitGeometricShapes({
                       {
                         actions,
                         actionsSlot,
-                        actionsClassName
+                        actionsClassName,
+                        mobileConfig: { width: "full", position: "center" }
                       }
                     )
                   ]
@@ -52245,40 +52226,113 @@ 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,
@@ -52730,7 +52784,6 @@ function HeroGridPatternEfficiency({
   action,
   actionSlot,
   actionSubtext,
-  showGridPattern = true,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
@@ -52794,7 +52847,6 @@ function HeroGridPatternEfficiency({
       className,
       containerClassName,
       children: /* @__PURE__ */ jsx("div", { className: "relative", 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]" }),
         renderHeading,
         description && (typeof description === "string" ? /* @__PURE__ */ jsx(
           "p",
@@ -53003,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,
@@ -53030,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
       }
@@ -53039,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;
@@ -53105,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,
           {
@@ -53126,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 })
       ]
     }
   );
@@ -53152,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
@@ -53200,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
       ] })
     }
@@ -53338,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;
@@ -53396,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,
@@ -53420,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
       ]
     }
@@ -53473,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
+                }
+              )
+            ]
           }
         )
       ]
@@ -53539,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;
@@ -53558,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
       }
     );
@@ -53566,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,
@@ -53619,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,
@@ -53631,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;
@@ -53691,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
+      ] }) })
     }
   );
 }
@@ -53759,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;
@@ -53870,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
       ] })
@@ -53884,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,
@@ -53902,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,
     {
@@ -53931,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: {
@@ -53955,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: {
@@ -53979,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)) })
@@ -53992,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: {
@@ -54004,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: {
@@ -54028,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)) })
@@ -83280,7 +83462,7 @@ function ListSearchableGrid({
     }
   );
 }
-var { useMemo: useMemo436 } = React23;
+var { useMemo: useMemo435 } = React23;
 function OfferModalNewsletterDiscount({
   title,
   emailPlaceholder,
@@ -83348,7 +83530,7 @@ function OfferModalNewsletterDiscount({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const dialogProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderCloseButton = useMemo436(() => {
+  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(
@@ -83362,12 +83544,12 @@ function OfferModalNewsletterDiscount({
       }
     ) }) });
   }, [closeButtonSlot, closeButtonText, closeClassName]);
-  const renderHeader = useMemo436(() => {
+  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 = useMemo436(() => {
+  const renderForm = useMemo435(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsxs(
       Form,
@@ -83429,7 +83611,7 @@ function OfferModalNewsletterDiscount({
     }
   ) });
 }
-var { useMemo: useMemo437 } = React23;
+var { useMemo: useMemo436 } = React23;
 function OfferModalMembershipImage({
   overline,
   title,
@@ -83506,7 +83688,7 @@ function OfferModalMembershipImage({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const dialogProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderImage = useMemo437(() => {
+  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(
@@ -83519,7 +83701,7 @@ function OfferModalMembershipImage({
       }
     ) });
   }, [imageSlot, image, imageWrapperClassName, imageClassName, optixFlowConfig]);
-  const renderCloseButton = useMemo437(() => {
+  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,
@@ -83535,7 +83717,7 @@ function OfferModalMembershipImage({
       }
     ) }) });
   }, [closeButtonSlot, closeClassName]);
-  const renderForm = useMemo437(() => {
+  const renderForm = useMemo436(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsxs(
       Form,
@@ -83598,7 +83780,7 @@ function OfferModalMembershipImage({
       }
     );
   }, [formSlot, form, formConfig, formMethod, emailPlaceholder, inputClassName, submitClassName, buttonText, formClassName]);
-  const renderFooter = useMemo437(() => {
+  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 }) });
@@ -83718,7 +83900,7 @@ function SheetDescription({
     }
   );
 }
-var { useMemo: useMemo438 } = React23;
+var { useMemo: useMemo437 } = React23;
 function OfferModalSheetNewsletter({
   logo,
   logoSlot,
@@ -83801,7 +83983,7 @@ function OfferModalSheetNewsletter({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const sheetProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderLogo = useMemo438(() => {
+  const renderLogo = useMemo437(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
@@ -83815,7 +83997,7 @@ function OfferModalSheetNewsletter({
       }
     );
   }, [logoSlot, logo, logoClassName, optixFlowConfig]);
-  const renderHeader = useMemo438(() => {
+  const renderHeader = useMemo437(() => {
     if (headerSlot) return headerSlot;
     return /* @__PURE__ */ jsxs(SheetHeader, { className: cn("gap-8 p-0", headerClassName), children: [
       renderLogo,
@@ -83825,7 +84007,7 @@ function OfferModalSheetNewsletter({
       ] })
     ] });
   }, [headerSlot, renderLogo, headerClassName, title, titleClassName, description, descriptionClassName]);
-  const renderForm = useMemo438(() => {
+  const renderForm = useMemo437(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsx(
       Form,
@@ -83873,7 +84055,7 @@ function OfferModalSheetNewsletter({
       }
     );
   }, [formSlot, form, formConfig, formMethod, emailPlaceholder, inputClassName, submitClassName, buttonText, formClassName]);
-  const renderLegal = useMemo438(() => {
+  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: [
@@ -83887,7 +84069,7 @@ function OfferModalSheetNewsletter({
       "."
     ] });
   }, [legalSlot, termsUrl, termsText, privacyUrl, privacyText, legalClassName]);
-  const renderImage = useMemo438(() => {
+  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(