@opensite/ui 2.0.5 → 2.0.7

package/dist/hero-community-survey-cta.cjs

@@ -1092,7 +1092,7 @@ function HeroCommunitySurveyCta({
       className,
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative grid grid-cols-1 items-center gap-8 lg:grid-cols-2 lg:gap-12", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-6 md:gap-8", children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
             "h1",
@@ -1119,7 +1119,8 @@ function HeroCommunitySurveyCta({
             {
               actions,
               actionsClassName,
-              actionsSlot
+              actionsSlot,
+              mobileConfig: { width: "full", position: "center" }
             }
           )
         ] }),

package/dist/hero-community-survey-cta.js

@@ -1071,7 +1071,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",
@@ -1098,7 +1098,8 @@ function HeroCommunitySurveyCta({
             {
               actions,
               actionsClassName,
-              actionsSlot
+              actionsSlot,
+              mobileConfig: { width: "full", position: "center" }
             }
           )
         ] }),

package/dist/hero-conversion-video-play.cjs

@@ -1142,7 +1142,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: [

package/dist/hero-conversion-video-play.js

@@ -1115,7 +1115,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: [

package/dist/hero-crm-streamlined.cjs

@@ -921,7 +921,7 @@ function HeroCrmStreamlined({
       className,
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-between gap-10 md:flex-row", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("basis-2/4", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-10 flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("basis-2/4", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-14 md:mt-0 flex flex-col gap-2", children: [
           tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "p",
             {
@@ -962,14 +962,14 @@ function HeroCrmStreamlined({
           "div",
           {
             className: cn("relative basis-[42%] py-9 md:py-16", imageClassName),
-            children: imageSlot ? imageSlot : image ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aspect-square w-full overflow-hidden", children: [
+            children: imageSlot ? imageSlot : image ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aspect-square w-full overflow-hidden rounded-xl shadow-xl", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 img.Img,
                 {
                   src: image.src,
                   alt: image.alt,
                   className: cn(
-                    "relative z-20 h-full w-full object-cover object-center rounded-xl shadow-xl",
+                    "relative z-20 h-full w-full object-cover object-center",
                     image.className
                   ),
                   optixFlowConfig
@@ -979,7 +979,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"
                   )
                 }
               )

package/dist/hero-crm-streamlined.js

@@ -900,7 +900,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",
             {
@@ -941,14 +941,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
@@ -958,7 +958,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"
                   )
                 }
               )

package/dist/hero-design-showcase-logos.cjs

@@ -974,7 +974,10 @@ function HeroDesignShowcaseLogos({
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex max-w-[920px] flex-col items-center gap-6", children: [
                 heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(

package/dist/hero-design-showcase-logos.js

@@ -953,7 +953,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(

package/dist/hero-design-system-3d.cjs

@@ -938,7 +938,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: [

package/dist/hero-design-system-3d.js

@@ -917,7 +917,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: [

package/dist/hero-feature-cards-grid.cjs

@@ -963,12 +963,12 @@ function HeroFeatureCardsGrid({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-10 md:pt-0", children: [
         /* @__PURE__ */ jsxRuntime.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: [

package/dist/hero-feature-cards-grid.js

@@ -942,12 +942,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: [

package/dist/hero-fullscreen-background-image.cjs

@@ -901,7 +901,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,
@@ -941,7 +941,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: [
@@ -949,7 +950,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

package/dist/hero-fullscreen-background-image.js

@@ -880,7 +880,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,
@@ -920,7 +920,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: [
@@ -928,7 +929,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

package/dist/hero-fullscreen-logo-cta.cjs

@@ -839,7 +839,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
@@ -909,18 +909,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__ */ jsxRuntime.jsxs("div", { className: "flex items-end justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row items-start md:items-end justify-start md:justify-between gap-8", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full flex-col gap-8 md:w-2/3"), children: [
                   heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                     "h1",
                     {
                       className: cn(
-                        "text-6xl font-font-semibold md:text-[5.8rem]",
+                        "text-5xl md:text-6xl lg:text-7xl",
                         headingClassName
                       ),
                       children: heading
@@ -929,7 +931,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

package/dist/hero-fullscreen-logo-cta.js

@@ -818,7 +818,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
@@ -888,18 +888,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
@@ -908,7 +910,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

package/dist/hero-gradient-avatars-rating.cjs

@@ -987,7 +987,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: [
@@ -1049,7 +1049,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: [
@@ -1057,7 +1057,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

package/dist/hero-gradient-avatars-rating.js

@@ -965,7 +965,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: [
@@ -1027,7 +1027,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: [
@@ -1035,7 +1035,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

package/dist/hero-gradient-client-focused.cjs

@@ -939,7 +939,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
@@ -948,7 +948,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

package/dist/hero-gradient-client-focused.js

@@ -918,7 +918,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
@@ -927,7 +927,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

package/dist/hero-grid-pattern-solutions.cjs

@@ -939,11 +939,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,

package/dist/hero-grid-pattern-solutions.d.cts

@@ -92,6 +92,6 @@ interface HeroGridPatternSolutionsProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroGridPatternSolutions({ badgeText, badgeHref, badgeSlot, heading, description, actions, actionsSlot, images, imagesSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, imagesClassName, optixFlowConfig, }: HeroGridPatternSolutionsProps): React.JSX.Element;
+declare function HeroGridPatternSolutions({ badgeText, badgeHref, badgeSlot, heading, description, actions, actionsSlot, images, imagesSlot, background, pattern, patternOpacity, className, containerClassName, spacing, contentClassName, headingClassName, descriptionClassName, actionsClassName, imagesClassName, optixFlowConfig, }: HeroGridPatternSolutionsProps): React.JSX.Element;
 
 export { HeroGridPatternSolutions, type HeroGridPatternSolutionsProps };

package/dist/hero-grid-pattern-solutions.d.ts

@@ -92,6 +92,6 @@ interface HeroGridPatternSolutionsProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroGridPatternSolutions({ badgeText, badgeHref, badgeSlot, heading, description, actions, actionsSlot, images, imagesSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, imagesClassName, optixFlowConfig, }: HeroGridPatternSolutionsProps): React.JSX.Element;
+declare function HeroGridPatternSolutions({ badgeText, badgeHref, badgeSlot, heading, description, actions, actionsSlot, images, imagesSlot, background, pattern, patternOpacity, className, containerClassName, spacing, contentClassName, headingClassName, descriptionClassName, actionsClassName, imagesClassName, optixFlowConfig, }: HeroGridPatternSolutionsProps): React.JSX.Element;
 
 export { HeroGridPatternSolutions, type HeroGridPatternSolutionsProps };

package/dist/hero-grid-pattern-solutions.js

@@ -918,11 +918,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,

package/dist/hero-innovation-image-grid.cjs

@@ -976,48 +976,54 @@ function HeroInnovationImageGrid({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-22.5 lg:grid-cols-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-12", contentClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "h1",
-              {
-                className: cn(
-                  "mb-3 text-4xl font-bold md:text-5xl lg:text-6xl text-balance",
-                  headingClassName
-                ),
-                children: heading
-              }
-            ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-              "p",
-              {
-                className: cn(
-                  "text-lg text-balance",
-                  descriptionClassName
-                ),
-                children: description
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            BlockActions,
-            {
-              actions,
-              actionsSlot,
-              actionsClassName
-            }
-          )
-        ] }) }),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-10 md:pt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-12 md:gap-22.5 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn("flex flex-col gap-2 md:gap-12", contentClassName),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mb-3 text-4xl font-bold md:text-5xl lg:text-6xl text-balance",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "text-lg text-balance",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
+            ]
+          }
+        ) }),
         renderImages
       ] }) })
     }