@opensite/ui 2.0.5 → 2.0.7

package/dist/registry.js

@@ -52339,7 +52339,7 @@ function HeroCommunitySurveyCta({
       className,
       containerClassName,
       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", { className: "flex flex-col items-start gap-6 md:gap-8", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-6 md:gap-8 pt-8 md:pt-0", children: [
           renderAnnouncement,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h1",
@@ -52366,7 +52366,8 @@ function HeroCommunitySurveyCta({
             {
               actions,
               actionsClassName,
-              actionsSlot
+              actionsSlot,
+              mobileConfig: { width: "full", position: "center" }
             }
           )
         ] }),
@@ -53261,7 +53262,7 @@ function HeroGradientClientFocused({
           "h1",
           {
             className: cn(
-              "max-w-full md:max-w-md text-7xl font-semibold text-balance",
+              "max-w-full md:max-w-md text-5xl md:text-6xl lg:text-7xl font-semibold text-balance",
               headingClassName
             ),
             children: heading
@@ -53270,7 +53271,7 @@ function HeroGradientClientFocused({
           "h1",
           {
             className: cn(
-              "max-w-full md:max-w-md text-7xl font-semibold text-balance",
+              "max-w-full md:max-w-md text-5xl md:text-6xl lg:text-7xl font-semibold text-balance",
               headingClassName
             ),
             children: heading
@@ -53479,48 +53480,57 @@ function HeroUiLibraryShowcase({
       className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4 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
-            }
-          )
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-4 items-start pt-6 md:pt-0",
+              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-5xl md:text-6xl lg:text-7xl font-semibold text-balance",
+                      headingClassName
+                    ),
+                    children: /* @__PURE__ */ jsx("p", { children: heading })
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "text-5xl md:text-6xl lg:text-7xl font-semibold text-balance",
+                      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
       ]
     }
@@ -53538,7 +53548,7 @@ function HeroFullscreenBackgroundImage({
   patternOpacity,
   className,
   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",
+  contentClassName = "",
   headingClassName,
   descriptionClassName,
   actionsClassName,
@@ -53578,7 +53588,8 @@ function HeroFullscreenBackgroundImage({
           "div",
           {
             className: cn(
-              "relative z-30 m-auto flex max-w-185 flex-col items-center justify-center gap-6 px-5",
+              "flex flex-col gap-4 md:gap-6 px-6 pt-28 pb-6 md:pt-0 md:pb-0",
+              "relative z-30 m-auto max-w-full md:max-w-md flex-col items-center justify-center text-center",
               contentClassName
             ),
             children: [
@@ -53586,7 +53597,7 @@ function HeroFullscreenBackgroundImage({
                 "h1",
                 {
                   className: cn(
-                    "text-center text-4xl leading-tight md:text-6xl xl:text-[4.4rem] text-balance text-white text-shadow-2xl font-semibold",
+                    "text-5xl md:text-6xl lg:text-7xl text-balance text-white text-shadow-2xl font-semibold",
                     headingClassName
                   ),
                   children: heading
@@ -53631,7 +53642,7 @@ function HeroFullscreenLogoCta({
   patternOpacity,
   className,
   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",
+  contentClassName,
   headingClassName,
   descriptionClassName,
   optixFlowConfig
@@ -53701,18 +53712,20 @@ function HeroFullscreenLogoCta({
           "div",
           {
             className: cn(
-              "relative z-30 m-auto flex max-w-full flex-col items-start justify-center gap-6 px-5",
+              "z-30 m-auto max-w-full items-start justify-center flex flex-col",
+              "relative gap-12 md:gap-6 px-5",
+              "pt-8 pb-6 md:pt-0 md:pb-0",
               contentClassName
             ),
             children: [
               renderLogo,
-              /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row items-start md:items-end justify-start md:justify-between gap-8", 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]",
+                        "text-5xl md:text-6xl lg:text-7xl",
                         headingClassName
                       ),
                       children: heading
@@ -53721,7 +53734,7 @@ function HeroFullscreenLogoCta({
                     "h1",
                     {
                       className: cn(
-                        "text-6xl font-semibold md:text-[5.8rem]",
+                        "text-5xl md:text-6xl lg:text-7xl",
                         headingClassName
                       ),
                       children: heading
@@ -53809,7 +53822,7 @@ function HeroGradientAvatarsRating({
       "div",
       {
         className: cn(
-          "grid items-center gap-8 md:gap-20 grid-cols-1 lg:grid-cols-2",
+          "grid items-center gap-4 md:gap-6 grid-cols-1 lg:grid-cols-2",
           imagesClassName
         ),
         children: [
@@ -53871,7 +53884,7 @@ function HeroGradientAvatarsRating({
           "div",
           {
             className: cn(
-              "flex flex-col items-center text-center lg:items-start lg:text-left",
+              "flex flex-col items-center text-center lg:items-start lg:text-left pt-6 md:pt-0",
               contentClassName
             ),
             children: [
@@ -53879,7 +53892,7 @@ function HeroGradientAvatarsRating({
                 "h1",
                 {
                   className: cn(
-                    "text-4xl font-semibold sm:text-5xl text-balance",
+                    "text-4xl font-semibold md:text-6xl lg:text-7xl text-balance leading-tight",
                     headingClassName
                   ),
                   children: typeof heading === "string" ? heading : heading
@@ -54343,13 +54356,13 @@ function HeroAdaptableProductGrid({
   actions,
   actionsSlot,
   imageSrc,
-  imageAlt = "placeholder",
+  imageAlt,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   headingClassName,
   descriptionClassName,
   contentClassName,
@@ -54367,22 +54380,22 @@ function HeroAdaptableProductGrid({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "pt-8 md:pt-0", children: [
         heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
           "h1",
           {
             className: cn(
-              "text-5xl lg:text-7xl font-semibold text-balance",
+              "text-5xl lg:text-7xl font-semibold text-pretty",
               headingClassName
             ),
             children: heading
           }
         ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-        /* @__PURE__ */ jsxs("div", { className: "mt-14 grid gap-6 md:gap-10 grid-cols-1 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "mt-6 md:mt-24 grid gap-10 grid-cols-1 lg:grid-cols-2", children: [
           /* @__PURE__ */ jsxs(
             "div",
             {
-              className: cn("flex flex-col items-start gap-6", contentClassName),
+              className: cn("flex flex-col items-start gap-2", contentClassName),
               children: [
                 description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                   "p",
@@ -54417,7 +54430,10 @@ function HeroAdaptableProductGrid({
                 {
                   src: imageSrc,
                   alt: imageAlt,
-                  className: cn("max-h-[400px] object-cover", imageClassName),
+                  className: cn(
+                    "max-h-[400px] w-full object-cover",
+                    imageClassName
+                  ),
                   optixFlowConfig
                 }
               )
@@ -54438,7 +54454,7 @@ function HeroPresentationPlatformVideo({
   videoSrc,
   videoSlot,
   background,
-  spacing = "xl",
+  spacing = "py-32 md:py-16",
   pattern,
   patternOpacity,
   className,
@@ -54539,7 +54555,13 @@ function HeroPresentationPlatformVideo({
                   children: heading
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("my-8 md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn("my-0 md:my-8 md:text-xl", descriptionClassName),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
               /* @__PURE__ */ jsx(
                 BlockActions,
                 {
@@ -54567,11 +54589,11 @@ function HeroGridPatternSolutions({
   images,
   imagesSlot,
   background,
-  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName = "xl",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -54759,7 +54781,7 @@ function HeroCrmStreamlined({
       className,
       containerClassName,
       children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-between gap-10 md:flex-row", children: [
-        /* @__PURE__ */ jsx("div", { className: cn("basis-2/4", contentClassName), children: /* @__PURE__ */ jsxs("div", { className: "mt-10 flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: cn("basis-2/4", contentClassName), children: /* @__PURE__ */ jsxs("div", { className: "mt-14 md:mt-0 flex flex-col gap-2", children: [
           tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsx(
             "p",
             {
@@ -54800,14 +54822,14 @@ function HeroCrmStreamlined({
           "div",
           {
             className: cn("relative basis-[42%] py-9 md:py-16", imageClassName),
-            children: imageSlot ? imageSlot : image ? /* @__PURE__ */ jsxs("div", { className: "aspect-square w-full overflow-hidden", children: [
+            children: imageSlot ? imageSlot : image ? /* @__PURE__ */ jsxs("div", { className: "aspect-square w-full overflow-hidden rounded-xl shadow-xl", children: [
               /* @__PURE__ */ jsx(
                 Img,
                 {
                   src: image.src,
                   alt: image.alt,
                   className: cn(
-                    "relative z-20 h-full w-full object-cover object-center rounded-xl shadow-xl",
+                    "relative z-20 h-full w-full object-cover object-center",
                     image.className
                   ),
                   optixFlowConfig
@@ -54817,7 +54839,7 @@ function HeroCrmStreamlined({
                 "div",
                 {
                   className: cn(
-                    "absolute top-0 left-25 z-10 bg-muted aspect-[1.378254211/1] h-full w-225"
+                    "absolute top-0 left-25 z-10 bg-muted aspect-[1.378254211/1] h-full w-225 rounded-xl"
                   )
                 }
               )
@@ -55186,7 +55208,7 @@ function HeroSoftwareGrowthVideoDialog({
             src: showcaseImages[index].src,
             alt: showcaseImages[index].alt,
             className: cn(
-              "size-full object-cover object-center",
+              "size-full object-cover object-center rounded-xl shadow-xl",
               showcaseImages[index].className
             ),
             optixFlowConfig
@@ -55205,13 +55227,13 @@ function HeroSoftwareGrowthVideoDialog({
         patternOpacity,
         className,
         containerClassName,
-        children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-8", children: [
+        children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10 md:gap-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-8 pt-6 md:pt-0", children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
               "h1",
               {
                 className: cn(
-                  "max-w-[1000px] text-center text-[3.125rem] leading-none md:text-[4.25rem] lg:text-[5.5rem] text-balance",
+                  "max-w-[1000px] text-center text-[3.125rem] leading-none md:text-[4.25rem] lg:text-[5.5rem] text-balance font-semibold",
                   headingClassName
                 ),
                 children: heading
@@ -55220,7 +55242,7 @@ function HeroSoftwareGrowthVideoDialog({
               "h1",
               {
                 className: cn(
-                  "max-w-[1000px] text-center text-[3.125rem] leading-none md:text-[4.25rem] lg:text-[5.5rem] text-balance",
+                  "max-w-[1000px] text-center text-[3.125rem] leading-none md:text-[4.25rem] lg:text-[5.5rem] text-balance font-semibold",
                   headingClassName
                 ),
                 children: heading
@@ -55357,7 +55379,7 @@ function HeroConversionVideoPlay({
               "div",
               {
                 className: cn(
-                  "flex flex-col items-center gap-8",
+                  "flex flex-col items-center gap-8 pt-8 md:pt-12",
                   contentClassName
                 ),
                 children: [
@@ -55526,7 +55548,10 @@ function HeroDesignShowcaseLogos({
         /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cn("flex flex-col items-center gap-8", contentClassName),
+            className: cn(
+              "flex flex-col items-center gap-8 pt-8 md:pt-12",
+              contentClassName
+            ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex max-w-[920px] flex-col items-center gap-6", children: [
                 heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
@@ -55601,21 +55626,13 @@ function HeroVideoOverlayStars({
     if (!trust) return null;
     const starCount = trust.starCount ?? 5;
     return /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-0.5", children: [...Array(starCount)].map((_, i) => /* @__PURE__ */ jsx(
-        DynamicIcon,
-        {
-          name: "lucide/star",
-          size: 12,
-          className: "fill-muted2-foreground"
-        },
-        i
-      )) }),
-      trust.message && /* @__PURE__ */ jsx("p", { className: "mt-1.5 max-w-40 text-center text-xs leading-snug font-medium", children: trust.message })
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-0.5 text-white", children: [...Array(starCount)].map((_, i) => /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/star", size: 12 }, i)) }),
+      trust.message && /* @__PURE__ */ jsx("p", { className: "mt-1.5 max-w-40 text-center text-xs leading-snug font-medium text-white text-shadow-2xl", children: trust.message })
     ] });
   }, [trustSlot, trust]);
   const renderVideo = useMemo(() => {
     if (videoSlot) return videoSlot;
-    return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 size-full before:absolute before:inset-0 before:bg-background/85 before:content-['']", children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 size-full before:absolute brightness-50", children: /* @__PURE__ */ jsx(
       "video",
       {
         src: videoSrc,
@@ -55640,13 +55657,13 @@ function HeroVideoOverlayStars({
       ),
       containerClassName,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "relative z-10 flex size-full", children: /* @__PURE__ */ jsxs("div", { className: "m-auto flex max-w-100 flex-col items-center gap-9 sm:max-w-125 md:max-w-200", children: [
+        /* @__PURE__ */ jsx("div", { className: "relative z-10 flex size-full", children: /* @__PURE__ */ jsxs("div", { className: "m-auto flex max-w-100 flex-col items-center gap-9 sm:max-w-125 md:max-w-200 text-center", children: [
           /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-8", contentClassName), children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
               "h1",
               {
                 className: cn(
-                  "text-6xl font-font-semibold md:text-[5.8rem] text-balance",
+                  "text-5xl font-semibold md:text-6xl text-balance text-white text-shadow-2xl",
                   headingClassName
                 ),
                 children: heading
@@ -55655,7 +55672,7 @@ function HeroVideoOverlayStars({
               "h1",
               {
                 className: cn(
-                  "text-6xl font-font-semibold md:text-[5.8rem] text-balance",
+                  "text-5xl font-semibold md:text-6xl text-balance text-white text-shadow-2xl",
                   headingClassName
                 ),
                 children: heading
@@ -55665,7 +55682,7 @@ function HeroVideoOverlayStars({
               "p",
               {
                 className: cn(
-                  "text-xl md:text-2xl text-balance",
+                  "text-xl md:text-2xl text-balance text-white text-shadow-2xl",
                   descriptionClassName
                 ),
                 children: description
@@ -56037,38 +56054,47 @@ function HeroSplitImageNewsletter({
       className: cn("relative flex items-center justify-center", className),
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-10 lg:flex-row lg:gap-20", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-8 lg:w-1/2", contentClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-            "h1",
-            {
-              className: cn(
-                "text-5xl font-bold md:text-6xl lg:text-7xl text-balance",
-                headingClassName
-              ),
-              children: heading
-            }
-          ) : /* @__PURE__ */ jsx(
-            "h1",
-            {
-              className: cn(
-                "text-5xl font-bold md:text-6xl lg:text-7xl text-balance",
-                headingClassName
-              ),
-              children: heading
-            }
-          )),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: cn(
-                "text-lg md:text-xl text-balance",
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          renderNewsletterForm
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-8 lg:w-1/2 pt-8 md:pt-0",
+              contentClassName
+            ),
+            children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-5xl font-bold md:text-6xl lg:text-7xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-5xl font-bold md:text-6xl lg:text-7xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-lg md:text-xl text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              renderNewsletterForm
+            ]
+          }
+        ),
         renderImage
       ] })
     }
@@ -56085,7 +56111,7 @@ function HeroCenteredGradientCta({
   features,
   featuresSlot,
   background,
-  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
+  spacing = "xl",
   pattern,
   patternOpacity,
   className,
@@ -56122,9 +56148,9 @@ function HeroCenteredGradientCta({
       className,
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "relative gap-6 z-10 flex flex-col items-center text-center", children: [
-        badge && /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: cn("px-3", badgeClassName), children: [
+        badge && /* @__PURE__ */ jsxs(Badge, { className: cn("px-3", badgeClassName), children: [
           badgeIcon,
-          typeof badge === "string" ? /* @__PURE__ */ jsx("span", { children: badge }) : badge
+          typeof badge === "string" ? /* @__PURE__ */ jsx("span", { className: "font-bold", children: badge }) : badge
         ] }),
         (heading || headingHighlight) && (typeof heading === "string" ? /* @__PURE__ */ jsx(
           "h1",
@@ -56243,7 +56269,7 @@ function HeroStatsSocialProof({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
+      children: /* @__PURE__ */ jsx("div", { className: "pt-10 md:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
         /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4 md:gap-8", contentClassName), children: [
           badge && /* @__PURE__ */ jsxs(Badge, { className: cn("px-4 py-2 gap-2", badgeClassName), children: [
             badgeIcon,
@@ -56375,12 +56401,12 @@ function HeroFeatureCardsGrid({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "pt-10 md:pt-0", children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "mx-auto max-w-full md:max-w-3xl text-center",
+              "mx-auto max-w-full md:max-w-3xl text-center flex flex-col items-center",
               contentClassName
             ),
             children: [
@@ -56452,7 +56478,7 @@ function HeroTestimonialImageGrid({
   const renderTestimonial = useMemo(() => {
     if (testimonialSlot) return testimonialSlot;
     if (!testimonial || !testimonial.avatars) return null;
-    return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 pt-8", children: [
       /* @__PURE__ */ jsx("div", { className: "flex -space-x-2", children: testimonial.avatars.map((avatar, index) => /* @__PURE__ */ jsxs(Avatar, { className: "size-10 border-2 border-border", children: [
         /* @__PURE__ */ jsx(AvatarImage, { src: avatar.image, alt: testimonial.author }),
         /* @__PURE__ */ jsx(AvatarFallback, { children: avatar.fallback })
@@ -56502,7 +56528,7 @@ function HeroTestimonialImageGrid({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-8 md:flex-row", children: [
+      children: /* @__PURE__ */ jsx("div", { className: "pt-10 md:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-8 md:flex-row", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:gap-8", children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
@@ -56603,7 +56629,7 @@ function HeroDesignSystem3d({
       "div",
       {
         className: cn(
-          "relative mt-16 aspect-[1.2/1] overflow-hidden sm:-right-[10%] sm:mt-28 sm:aspect-[2.788990826/1]",
+          "relative mt-8 aspect-[1.2/1] overflow-hidden sm:-right-[10%] sm:mt-16 sm:aspect-[2.788990826/1]",
           imagesClassName
         ),
         children: [
@@ -56925,85 +56951,91 @@ function HeroInnovationImageGrid({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-22.5 lg:grid-cols-2", children: [
-        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-12", contentClassName), children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-              "h1",
-              {
-                className: cn(
-                  "mb-3 text-4xl font-bold md:text-5xl lg:text-6xl text-balance",
-                  headingClassName
-                ),
-                children: heading
-              }
-            ) : /* @__PURE__ */ jsx(
-              "h1",
-              {
-                className: cn(
-                  "mb-3 text-4xl font-bold md:text-5xl lg:text-6xl text-balance",
-                  headingClassName
-                ),
-                children: heading
-              }
-            )),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: cn(
-                  "text-lg text-balance",
-                  descriptionClassName
-                ),
-                children: description
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-          ] }),
-          /* @__PURE__ */ jsx(
-            BlockActions,
-            {
-              actions,
-              actionsSlot,
-              actionsClassName
-            }
-          )
-        ] }) }),
-        renderImages
-      ] }) })
-    }
-  );
-}
-function HeroVideoDialogGradient({
-  videoAspectRatio = "horizontal",
-  heading,
-  description,
-  actions,
-  videoAction,
-  image,
-  imageSlot,
-  videoDialog,
-  background,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "xl",
-  pattern,
-  onVideoClick,
-  patternOpacity,
-  className,
-  headingClassName,
-  descriptionClassName,
-  imageClassName,
-  optixFlowConfig
-}) {
-  const [isVideoOpen, setIsVideoOpen] = useState(false);
-  const handleVideoClick = () => {
-    if (onVideoClick) {
-      onVideoClick();
-    } else {
-      setIsVideoOpen(true);
-    }
-  };
-  const renderImage = useMemo(() => {
-    if (imageSlot) return imageSlot;
-    if (!image) return null;
+      children: /* @__PURE__ */ jsx("div", { className: "pt-10 md:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-12 md:gap-22.5 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("flex flex-col gap-2 md:gap-12", contentClassName),
+            children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mb-3 text-4xl font-bold md:text-5xl lg:text-6xl text-balance",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mb-3 text-4xl font-bold md:text-5xl lg:text-6xl text-balance",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                )),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "text-lg text-balance",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              ] }),
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
+            ]
+          }
+        ) }),
+        renderImages
+      ] }) })
+    }
+  );
+}
+function HeroVideoDialogGradient({
+  videoAspectRatio = "horizontal",
+  heading,
+  description,
+  actions,
+  videoAction,
+  image,
+  imageSlot,
+  videoDialog,
+  background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
+  pattern,
+  onVideoClick,
+  patternOpacity,
+  className,
+  headingClassName,
+  descriptionClassName,
+  imageClassName,
+  optixFlowConfig
+}) {
+  const [isVideoOpen, setIsVideoOpen] = useState(false);
+  const handleVideoClick = () => {
+    if (onVideoClick) {
+      onVideoClick();
+    } else {
+      setIsVideoOpen(true);
+    }
+  };
+  const renderImage = useMemo(() => {
+    if (imageSlot) return imageSlot;
+    if (!image) return null;
     return /* @__PURE__ */ jsx("div", { className: "mx-auto mt-16 w-full max-w-[1000px] overflow-hidden rounded-xl shadow-[4px_2px_3.123rem_rgba(0,0,0,.15)]", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.406469761 / 1, children: /* @__PURE__ */ jsx(
       Img,
       {
@@ -57028,8 +57060,8 @@ function HeroVideoDialogGradient({
         patternOpacity,
         className,
         containerClassName,
-        children: /* @__PURE__ */ jsxs("div", { className: "relative z-20", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-8", children: [
+        children: /* @__PURE__ */ jsxs("div", { className: "relative z-20 pt-10 md:pt-", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-6 md:gap-8", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-6", children: [
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
                 "h1",
@@ -57108,45 +57140,17 @@ function HeroMinimalCenteredDark({
   stats,
   statsSlot,
   background,
-  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "lg",
   pattern,
   patternOpacity,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   badgeClassName,
   headingClassName,
   descriptionClassName,
   actionsClassName,
   statsClassName
 }) {
-  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 renderStats = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
@@ -57172,7 +57176,7 @@ function HeroMinimalCenteredDark({
       className,
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        badge && /* @__PURE__ */ jsx(Badge, { className: cn("px-3 py-2", badgeClassName), children: typeof badge === "string" ? /* @__PURE__ */ jsx("span", { children: badge }) : badge }),
+        badge && /* @__PURE__ */ jsx(Badge, { className: cn("px-4 py-1", badgeClassName), children: typeof badge === "string" ? /* @__PURE__ */ jsx("span", { children: badge }) : badge }),
         (heading || headingHighlight) && (typeof heading === "string" ? /* @__PURE__ */ jsx(
           "h1",
           {
@@ -57202,14 +57206,12 @@ function HeroMinimalCenteredDark({
             children: description
           }
         ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx(
-          "div",
+        /* @__PURE__ */ jsx(
+          BlockActions,
           {
-            className: cn(
-              "mt-6 md:mt-10 flex flex-col gap-4 md:flex-row",
-              actionsClassName
-            ),
-            children: renderActions
+            actions,
+            actionsSlot,
+            actionsClassName
           }
         ),
         (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx(
@@ -57234,6 +57236,7 @@ function HeroProductShowcaseFloating({
   description,
   actions,
   actionsSlot,
+  actionsClassName,
   productImage,
   productImageSlot,
   floatingStat,
@@ -57241,11 +57244,11 @@ function HeroProductShowcaseFloating({
   userCount,
   userCountSlot,
   background,
-  spacing,
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -57254,32 +57257,21 @@ function HeroProductShowcaseFloating({
 }) {
   const renderBadge = useMemo(() => {
     if (badgeSlot) return badgeSlot;
-    return /* @__PURE__ */ jsxs("div", { className: cn("inline-flex w-fit items-center gap-2 rounded-full px-4 py-2 text-sm font-medium", `${getAccentColor(background)}/10`, getAccentColor(background)), children: [
-      badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 16 }),
-      badgeText && /* @__PURE__ */ jsx("span", { children: badgeText })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "inline-flex w-fit items-center gap-2 rounded-full px-4 py-2 text-sm font-medium",
+          `${getAccentColor(background)}/10`,
+          getAccentColor(background)
+        ),
+        children: [
+          badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 16 }),
+          badgeText && /* @__PURE__ */ jsx("span", { children: badgeText })
+        ]
+      }
+    );
   }, [badgeSlot, badgeIcon, badgeText]);
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 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 renderFloatingStat = useMemo(() => {
     if (floatingStatSlot) return floatingStatSlot;
     if (!floatingStat) return null;
@@ -57307,7 +57299,10 @@ function HeroProductShowcaseFloating({
         {
           src: avatar.src,
           alt: avatar.alt,
-          className: cn("h-8 w-8 rounded-full border-2 border-background object-cover", avatar.className),
+          className: cn(
+            "h-8 w-8 rounded-full border-2 border-background object-cover",
+            avatar.className
+          ),
           optixFlowConfig
         },
         idx
@@ -57321,20 +57316,30 @@ function HeroProductShowcaseFloating({
   const renderProductShowcase = useMemo(() => {
     if (productImageSlot) return productImageSlot;
     if (!productImage) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("order-2 lg:order-1", showcaseClassName), children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    return /* @__PURE__ */ jsx("div", { className: cn("order-1", showcaseClassName), children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsx("div", { className: "aspect-4/3 overflow-hidden rounded-2xl bg-linear-to-br from-primary/20 to-purple-500/20 p-8", children: /* @__PURE__ */ jsx(
         Img,
         {
           src: productImage.src,
           alt: productImage.alt,
-          className: cn("h-full w-full rounded-lg object-cover shadow-2xl", productImage.className),
+          className: cn(
+            "h-full w-full rounded-lg object-cover shadow-2xl",
+            productImage.className
+          ),
           optixFlowConfig
         }
       ) }),
       renderFloatingStat,
       renderUserCount
     ] }) });
-  }, [productImageSlot, productImage, showcaseClassName, optixFlowConfig, renderFloatingStat, renderUserCount]);
+  }, [
+    productImageSlot,
+    productImage,
+    showcaseClassName,
+    optixFlowConfig,
+    renderFloatingStat,
+    renderUserCount
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -57343,13 +57348,49 @@ function HeroProductShowcaseFloating({
       pattern,
       patternOpacity,
       className: cn(className),
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "pt-10 md:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
         renderProductShowcase,
-        /* @__PURE__ */ jsxs("div", { className: cn("order-1 flex flex-col gap-8 lg:order-2", contentClassName), children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-8 order-2", contentClassName), children: [
           renderBadge,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          renderActions
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          )),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-lg",
+                getTextColor(background, "muted"),
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          /* @__PURE__ */ jsx(
+            BlockActions,
+            {
+              actions,
+              actionsSlot,
+              actionsClassName
+            }
+          )
         ] })
       ] }) })
     }
@@ -57366,11 +57407,11 @@ function HeroSaasDashboardPreview({
   browserPreview,
   browserPreviewSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -57379,21 +57420,18 @@ function HeroSaasDashboardPreview({
 }) {
   const renderBadge = useMemo(() => {
     if (badgeSlot) return badgeSlot;
-    return /* @__PURE__ */ jsxs("div", { className: cn(
-      "inline-flex items-center gap-2 rounded-full border border-border px-4 py-2 text-sm",
-      getNestedCardBg(background, "muted"),
-      getNestedCardTextColor(background)
-    ), children: [
-      badgeIcon && /* @__PURE__ */ jsx(
-        DynamicIcon,
-        {
-          name: badgeIcon,
-          size: 16,
-          className: getAccentColor(background)
-        }
-      ),
-      badgeText && /* @__PURE__ */ jsx("span", { children: badgeText })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "inline-flex items-center gap-2 rounded-full border border-border px-4 py-2 text-sm bg-muted text-muted-foreground"
+        ),
+        children: [
+          badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 16 }),
+          badgeText && /* @__PURE__ */ jsx("span", { children: badgeText })
+        ]
+      }
+    );
   }, [badgeSlot, badgeIcon, badgeText]);
   const renderEmailForm = useMemo(() => {
     if (emailFormSlot) return emailFormSlot;
@@ -57419,39 +57457,49 @@ function HeroSaasDashboardPreview({
           }
         )
       ] }) }),
-      emailForm.helperText && (typeof emailForm.helperText === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-sm", getTextColor(background, "muted")), children: emailForm.helperText }) : emailForm.helperText)
+      emailForm.helperText && (typeof emailForm.helperText === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-sm", children: emailForm.helperText }) : emailForm.helperText)
     ] });
   }, [emailFormSlot, emailForm]);
   const renderBrowserPreview = useMemo(() => {
     if (browserPreviewSlot) return browserPreviewSlot;
     if (!browserPreview) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("relative mt-20", previewClassName), children: [
-      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-t from-background via-transparent to-transparent z-10 pointer-events-none" }),
-      /* @__PURE__ */ jsxs("div", { className: cn(
-        "overflow-hidden rounded-xl border border-border shadow-2xl",
-        getNestedCardBg(background, "muted")
-      ), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn(
-          "flex items-center gap-2 border-b border-border px-4 py-3",
-          getNestedCardBg(background, "muted")
-        ), children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
-            /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-destructive" }),
-            /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-accent" }),
-            /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-success" })
-          ] }),
-          browserPreview.url && /* @__PURE__ */ jsx("div", { className: cn("flex-1 text-center text-sm", getTextColor(background, "muted")), children: browserPreview.url })
-        ] }),
-        browserPreview.image && /* @__PURE__ */ jsx(
-          Img,
-          {
-            src: browserPreview.image.src,
-            alt: browserPreview.image.alt,
-            className: cn("w-full", browserPreview.image.className),
-            optixFlowConfig
-          }
-        )
-      ] })
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-10 pointer-events-none" }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "overflow-hidden rounded-xl border border-border shadow-2xl"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex items-center gap-2 border-b border-border px-4 py-3"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+                    /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-destructive" }),
+                    /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-accent" }),
+                    /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-primary" })
+                  ] }),
+                  browserPreview.url && /* @__PURE__ */ jsx("div", { className: cn("flex-1 text-center text-sm"), children: browserPreview.url })
+                ]
+              }
+            ),
+            browserPreview.image && /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: browserPreview.image.src,
+                alt: browserPreview.image.alt,
+                className: cn("w-full", browserPreview.image.className),
+                optixFlowConfig
+              }
+            )
+          ]
+        }
+      )
     ] });
   }, [browserPreviewSlot, browserPreview, previewClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
@@ -57462,11 +57510,39 @@ function HeroSaasDashboardPreview({
       pattern,
       patternOpacity,
       className: cn(className),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "pt-10 md:pt-0", children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl text-center", headerClassName), children: [
           renderBadge,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-6 text-lg md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "mt-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "mt-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          )),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mt-6 text-lg md:text-xl text-balance",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderEmailForm
         ] }),
         renderBrowserPreview
@@ -57479,12 +57555,13 @@ function HeroTherapyTestimonialGrid({
   description,
   actions,
   actionsSlot,
+  actionsClassName,
   images,
   imagesSlot,
   testimonial,
   testimonialSlot,
   background,
-  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
+  spacing = "xl",
   pattern,
   patternOpacity,
   className,
@@ -57494,34 +57571,6 @@ function HeroTherapyTestimonialGrid({
   descriptionClassName,
   optixFlowConfig
 }) {
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: "flex flex-col mt-6 md:mt-8 gap-4 sm:flex-row 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 renderTestimonial = useMemo(() => {
     if (testimonialSlot) return testimonialSlot;
     if (!testimonial) return null;
@@ -57600,12 +57649,12 @@ function HeroTherapyTestimonialGrid({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "pt-10 md:pt-0", children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "mx-auto mb-16 flex max-w-[900px] flex-col items-center gap-6",
+              "mx-auto mb-8 md:mb-12 flex max-w-[900px] flex-col items-center gap-3",
               headerClassName
             ),
             children: [
@@ -57632,13 +57681,20 @@ function HeroTherapyTestimonialGrid({
                 "p",
                 {
                   className: cn(
-                    "text-center text-lg md:text-xl",
+                    "text-center text-lg md:text-xl text-balance",
                     descriptionClassName
                   ),
                   children: description
                 }
               ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-              renderActions
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
             ]
           }
         ),
@@ -57648,76 +57704,90 @@ function HeroTherapyTestimonialGrid({
   );
 }
 function HeroMentalHealthTeam({
-  subtitle,
+  description,
+  descriptionClassName,
+  actions,
+  actionsSlot,
+  actionsClassName,
   heading,
-  teamImages,
-  teamImagesSlot,
+  smallImages,
+  smallImagesSlot,
   testimonial,
   testimonialSlot,
   featureImage,
   featureImageSlot,
   background,
-  spacing,
+  spacing = "xl",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   headingClassName,
   gridClassName,
   optixFlowConfig
 }) {
-  const renderTeamImages = useMemo(() => {
-    if (teamImagesSlot) return teamImagesSlot;
-    if (!teamImages || teamImages.length === 0) return null;
+  const renderSmallImages = useMemo(() => {
+    if (smallImagesSlot) return smallImagesSlot;
+    if (!smallImages || smallImages.length === 0) return null;
     return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      teamImages[0] && /* @__PURE__ */ jsx("div", { className: "col-[1/2] row-[1/2] w-full", children: /* @__PURE__ */ jsx("div", { className: "h-full max-h-77.5 w-full overflow-hidden rounded-2xl", children: /* @__PURE__ */ jsx(
+      smallImages[0] && /* @__PURE__ */ jsx("div", { className: "col-[1/2] row-[1/2] w-full", children: /* @__PURE__ */ jsx("div", { className: "h-full max-h-77.5 w-full overflow-hidden rounded-2xl", children: /* @__PURE__ */ jsx(
         Img,
         {
-          src: teamImages[0].src,
-          alt: teamImages[0].alt,
-          className: cn("block h-full w-full object-cover object-center", teamImages[0].className),
+          src: smallImages[0].src,
+          alt: smallImages[0].alt,
+          className: cn(
+            "block h-full w-full object-cover object-center",
+            smallImages[0].className
+          ),
           optixFlowConfig
         }
       ) }) }),
-      teamImages[1] && /* @__PURE__ */ jsx("div", { className: "col-[2/3] row-[1/2] w-full md:col-[2/3] md:row-[1/2]", children: /* @__PURE__ */ jsx("div", { className: "h-full max-h-77.5 w-full overflow-hidden rounded-2xl", children: /* @__PURE__ */ jsx(
+      smallImages[1] && /* @__PURE__ */ jsx("div", { className: "col-[2/3] row-[1/2] w-full md:col-[2/3] md:row-[1/2]", children: /* @__PURE__ */ jsx("div", { className: "h-full max-h-77.5 w-full overflow-hidden rounded-2xl", children: /* @__PURE__ */ jsx(
         Img,
         {
-          src: teamImages[1].src,
-          alt: teamImages[1].alt,
-          className: cn("block h-full w-full object-cover object-center", teamImages[1].className),
+          src: smallImages[1].src,
+          alt: smallImages[1].alt,
+          className: cn(
+            "block h-full w-full object-cover object-center",
+            smallImages[1].className
+          ),
           optixFlowConfig
         }
       ) }) })
     ] });
-  }, [teamImagesSlot, teamImages, optixFlowConfig]);
+  }, [smallImagesSlot, smallImages, optixFlowConfig]);
   const renderTestimonial = useMemo(() => {
     if (testimonialSlot) return testimonialSlot;
     if (!testimonial) return null;
     const avatarSrc = testimonial.avatarSrc ?? testimonial.avatar?.src;
-    return /* @__PURE__ */ jsx("div", { className: "col-[1/3] row-[3/4] w-full md:col-[1/3] md:row-[2/3]", children: /* @__PURE__ */ jsxs("div", { className: cn(
-      "flex h-full min-h-37.5 flex-col gap-3 overflow-hidden rounded-3xl p-5 px-5 md:flex-row md:items-center md:gap-7 md:py-8",
-      getNestedCardBg(background),
-      getNestedCardTextColor(background)
-    ), children: [
-      avatarSrc && /* @__PURE__ */ jsx("div", { className: "h-20 w-20 shrink-0 overflow-hidden rounded-xl md:h-30 md:w-30", children: /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: avatarSrc,
-          alt: testimonial.avatar?.alt ?? "",
-          className: "h-full w-full object-cover object-center",
-          optixFlowConfig
-        }
-      ) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col justify-between gap-2", children: [
-        /* @__PURE__ */ jsxs("p", { className: "text-lg font-medium ", children: [
-          '"',
-          testimonial.quote,
-          '"'
-        ] }),
-        /* @__PURE__ */ jsx("p", { className: "", children: testimonial.author })
-      ] })
-    ] }) });
+    return /* @__PURE__ */ jsx("div", { className: "col-[1/3] row-[3/4] w-full md:col-[1/3] md:row-[2/3]", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex h-full min-h-37.5 flex-col gap-3 overflow-hidden rounded-3xl p-5 px-5 md:flex-row md:items-center md:gap-7 md:py-8 bg-muted"
+        ),
+        children: [
+          avatarSrc && /* @__PURE__ */ jsx("div", { className: "h-20 w-20 shrink-0 overflow-hidden rounded-xl md:h-30 md:w-30", children: /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: avatarSrc,
+              alt: testimonial.avatar?.alt ?? "",
+              className: "h-full w-full object-cover object-center",
+              optixFlowConfig
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col justify-between gap-2 text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-lg font-medium", children: [
+              '"',
+              testimonial.quote,
+              '"'
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "", children: testimonial.author })
+          ] })
+        ]
+      }
+    ) });
   }, [testimonialSlot, testimonial, optixFlowConfig]);
   const renderFeatureImage = useMemo(() => {
     if (featureImageSlot) return featureImageSlot;
@@ -57727,7 +57797,10 @@ function HeroMentalHealthTeam({
       {
         src: featureImage.src,
         alt: featureImage.alt,
-        className: cn("block h-full w-full object-cover object-center", featureImage.className),
+        className: cn(
+          "block h-full w-full object-cover object-center",
+          featureImage.className
+        ),
         optixFlowConfig
       }
     ) }) });
@@ -57735,17 +57808,75 @@ function HeroMentalHealthTeam({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      className: cn("dark bg-background py-12 font-sans md:py-20", className),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mx-auto mb-24 flex max-w-[900px] flex-col items-center gap-3", headerClassName), children: [
-          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("p", { className: "text-center ", children: subtitle }) : subtitle),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl", headingClassName), children: heading }))
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn("grid w-full max-w-332.5 auto-cols-auto grid-cols-2 grid-rows-[auto_auto] justify-center gap-5 md:grid-cols-[repeat(4,1fr)]", gridClassName), children: [
-          renderTeamImages,
-          renderTestimonial,
-          renderFeatureImage
-        ] })
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "pt-10 md:pt-0", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto mb-16 flex max-w-[900px] flex-col items-center gap-6",
+              headerClassName
+            ),
+            children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-center text-lg md:text-xl text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "grid w-full max-w-332.5 auto-cols-auto grid-cols-2 grid-rows-[auto_auto] justify-center gap-5 md:grid-cols-[repeat(4,1fr)]",
+              gridClassName
+            ),
+            children: [
+              renderSmallImages,
+              renderTestimonial,
+              renderFeatureImage
+            ]
+          }
+        )
       ] })
     }
   );
@@ -57940,18 +58071,21 @@ function HeroMentorshipVideoSplit({
 }
 function HeroBusinessOperationsMosaic({
   heading,
-  subheading,
+  description,
+  descriptionClassName,
   images,
   imagesSlot,
+  actions,
+  actionsSlot,
+  actionsClassName,
   background,
-  spacing,
+  spacing = "xl",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
-  subheadingClassName,
   mosaicClassName,
   optixFlowConfig
 }) {
@@ -57959,30 +58093,39 @@ function HeroBusinessOperationsMosaic({
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: "mx-auto grid h-full w-full grid-cols-[14.7%_47.29%_14.7%_14.7%] grid-rows-[34.7%_26.28%_34.7%] gap-x-[2.85%] gap-y-[2.32%]", children: [
-      images[0] && /* @__PURE__ */ jsx("div", { className: "col-[1/3] row-[1/3]", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-hidden rounded-[2vw] bg-primary/10 lg:rounded-[1.2vw] xl:rounded-2xl", children: /* @__PURE__ */ jsx(
+      images[0] && /* @__PURE__ */ jsx("div", { className: "col-[1/3] row-[1/3]", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-hidden rounded-[2vw] lg:rounded-[1.2vw] xl:rounded-2xl", children: /* @__PURE__ */ jsx(
         Img,
         {
           src: images[0].src,
           alt: images[0].alt,
-          className: cn("h-full w-full object-cover object-center", images[0].className),
+          className: cn(
+            "h-full w-full object-cover object-center",
+            images[0].className
+          ),
           optixFlowConfig
         }
       ) }) }),
-      images[1] && /* @__PURE__ */ jsx("div", { className: "col-[3/5] row-[2/3]", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-hidden rounded-[2vw] bg-success/10 lg:rounded-[1.2vw] xl:rounded-2xl", children: /* @__PURE__ */ jsx(
+      images[1] && /* @__PURE__ */ jsx("div", { className: "col-[3/5] row-[2/3]", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-hidden rounded-[2vw] lg:rounded-[1.2vw] xl:rounded-2xl", children: /* @__PURE__ */ jsx(
         Img,
         {
           src: images[1].src,
           alt: images[1].alt,
-          className: cn("h-full w-full object-cover object-center", images[1].className),
+          className: cn(
+            "h-full w-full object-cover object-center",
+            images[1].className
+          ),
           optixFlowConfig
         }
       ) }) }),
-      images[2] && /* @__PURE__ */ jsx("div", { className: "col-[2/4] row-[3/4]", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-hidden rounded-[2vw] bg-pink-100 lg:rounded-[1.2vw] xl:rounded-2xl", children: /* @__PURE__ */ jsx(
+      images[2] && /* @__PURE__ */ jsx("div", { className: "col-[2/4] row-[3/4]", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-hidden rounded-[2vw] lg:rounded-[1.2vw] xl:rounded-2xl", children: /* @__PURE__ */ jsx(
         Img,
         {
           src: images[2].src,
           alt: images[2].alt,
-          className: cn("h-full w-full object-cover object-center", images[2].className),
+          className: cn(
+            "h-full w-full object-cover object-center",
+            images[2].className
+          ),
           optixFlowConfig
         }
       ) }) })
@@ -57996,12 +58139,39 @@ function HeroBusinessOperationsMosaic({
       pattern,
       patternOpacity,
       className,
-      children: /* @__PURE__ */ jsx("div", { className: cn("container max-w-392.5", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center justify-between gap-14 lg:grid-cols-2", children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "pt-10 md:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center justify-between gap-14 lg:grid-cols-2", children: [
         /* @__PURE__ */ jsx("div", { className: cn("w-full max-w-166.5", mosaicClassName), children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 0.815177479 / 1, children: renderMosaic }) }),
-        /* @__PURE__ */ jsxs("div", { className: cn("flex w-full max-w-125 flex-col gap-14 lg:max-w-full", contentClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("font-serif text-6xl lg:text-7xl xl:text-[5rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx("p", { className: cn("font-montserrat text-2xl leading-snug lg:text-3xl xl:text-4xl", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading }))
-        ] })
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex w-full max-w-125 flex-col gap-6 md:gap-14 lg:max-w-full",
+              contentClassName
+            ),
+            children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-6xl lg:text-7xl xl:text-[5rem] font-semibold",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
+            ]
+          }
+        )
       ] }) })
     }
   );