@opensite/ui 2.0.5 → 2.0.7

package/dist/hero-saas-dashboard-preview.cjs

@@ -33,66 +33,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
-function getAccentColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-accent-foreground" : "text-primary";
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -917,11 +857,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,
@@ -930,21 +870,18 @@ function HeroSaasDashboardPreview({
 }) {
   const renderBadge = React.useMemo(() => {
     if (badgeSlot) return badgeSlot;
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-        DynamicIcon,
-        {
-          name: badgeIcon,
-          size: 16,
-          className: getAccentColor(background)
-        }
-      ),
-      badgeText && /* @__PURE__ */ jsxRuntime.jsx("span", { children: badgeText })
-    ] });
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon, size: 16 }),
+          badgeText && /* @__PURE__ */ jsxRuntime.jsx("span", { children: badgeText })
+        ]
+      }
+    );
   }, [badgeSlot, badgeIcon, badgeText]);
   const renderEmailForm = React.useMemo(() => {
     if (emailFormSlot) return emailFormSlot;
@@ -970,39 +907,49 @@ function HeroSaasDashboardPreview({
           }
         )
       ] }) }),
-      emailForm.helperText && (typeof emailForm.helperText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-sm", getTextColor(background, "muted")), children: emailForm.helperText }) : emailForm.helperText)
+      emailForm.helperText && (typeof emailForm.helperText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-sm", children: emailForm.helperText }) : emailForm.helperText)
     ] });
   }, [emailFormSlot, emailForm]);
   const renderBrowserPreview = React.useMemo(() => {
     if (browserPreviewSlot) return browserPreviewSlot;
     if (!browserPreview) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mt-20", previewClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-t from-background via-transparent to-transparent z-10 pointer-events-none" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-        "overflow-hidden rounded-xl border border-border shadow-2xl",
-        getNestedCardBg(background, "muted")
-      ), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-          "flex items-center gap-2 border-b border-border px-4 py-3",
-          getNestedCardBg(background, "muted")
-        ), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-3 rounded-full bg-destructive" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-3 rounded-full bg-accent" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-3 rounded-full bg-success" })
-          ] }),
-          browserPreview.url && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1 text-center text-sm", getTextColor(background, "muted")), children: browserPreview.url })
-        ] }),
-        browserPreview.image && /* @__PURE__ */ jsxRuntime.jsx(
-          img.Img,
-          {
-            src: browserPreview.image.src,
-            alt: browserPreview.image.alt,
-            className: cn("w-full", browserPreview.image.className),
-            optixFlowConfig
-          }
-        )
-      ] })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-10 pointer-events-none" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "overflow-hidden rounded-xl border border-border shadow-2xl"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex items-center gap-2 border-b border-border px-4 py-3"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-3 rounded-full bg-destructive" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-3 rounded-full bg-accent" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-3 rounded-full bg-primary" })
+                  ] }),
+                  browserPreview.url && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1 text-center text-sm"), children: browserPreview.url })
+                ]
+              }
+            ),
+            browserPreview.image && /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: browserPreview.image.src,
+                alt: browserPreview.image.alt,
+                className: cn("w-full", browserPreview.image.className),
+                optixFlowConfig
+              }
+            )
+          ]
+        }
+      )
     ] });
   }, [browserPreviewSlot, browserPreview, previewClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1013,11 +960,39 @@ function HeroSaasDashboardPreview({
       pattern,
       patternOpacity,
       className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-10 md:pt-0", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl text-center", headerClassName), children: [
           renderBadge,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: cn("mt-6 text-lg md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "mt-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mt-6 text-lg md:text-xl text-balance",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderEmailForm
         ] }),
         renderBrowserPreview

package/dist/hero-saas-dashboard-preview.d.cts

@@ -111,6 +111,6 @@ interface HeroSaasDashboardPreviewProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroSaasDashboardPreview({ badgeText, badgeIcon, badgeSlot, heading, description, emailForm, emailFormSlot, browserPreview, browserPreviewSlot, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, descriptionClassName, previewClassName, optixFlowConfig, }: HeroSaasDashboardPreviewProps): React.JSX.Element;
+declare function HeroSaasDashboardPreview({ badgeText, badgeIcon, badgeSlot, heading, description, emailForm, emailFormSlot, browserPreview, browserPreviewSlot, background, containerClassName, spacing, pattern, patternOpacity, className, headerClassName, headingClassName, descriptionClassName, previewClassName, optixFlowConfig, }: HeroSaasDashboardPreviewProps): React.JSX.Element;
 
 export { HeroSaasDashboardPreview, type HeroSaasDashboardPreviewProps };

package/dist/hero-saas-dashboard-preview.d.ts

@@ -111,6 +111,6 @@ interface HeroSaasDashboardPreviewProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroSaasDashboardPreview({ badgeText, badgeIcon, badgeSlot, heading, description, emailForm, emailFormSlot, browserPreview, browserPreviewSlot, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, descriptionClassName, previewClassName, optixFlowConfig, }: HeroSaasDashboardPreviewProps): React.JSX.Element;
+declare function HeroSaasDashboardPreview({ badgeText, badgeIcon, badgeSlot, heading, description, emailForm, emailFormSlot, browserPreview, browserPreviewSlot, background, containerClassName, spacing, pattern, patternOpacity, className, headerClassName, headingClassName, descriptionClassName, previewClassName, optixFlowConfig, }: HeroSaasDashboardPreviewProps): React.JSX.Element;
 
 export { HeroSaasDashboardPreview, type HeroSaasDashboardPreviewProps };

package/dist/hero-saas-dashboard-preview.js

@@ -12,66 +12,6 @@ import { Img } from '@page-speed/img';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
-function getAccentColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-accent-foreground" : "text-primary";
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -896,11 +836,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,
@@ -909,21 +849,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;
@@ -949,39 +886,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(
@@ -992,11 +939,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

package/dist/hero-software-growth-video-dialog.cjs

@@ -1016,7 +1016,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
@@ -1035,13 +1035,13 @@ function HeroSoftwareGrowthVideoDialog({
         patternOpacity,
         className,
         containerClassName,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center gap-8", children: [
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-10 md:gap-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center gap-8 pt-6 md:pt-0", children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.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
@@ -1050,7 +1050,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

package/dist/hero-software-growth-video-dialog.js

@@ -993,7 +993,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
@@ -1012,13 +1012,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
@@ -1027,7 +1027,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

package/dist/hero-split-image-newsletter.cjs

@@ -917,38 +917,47 @@ function HeroSplitImageNewsletter({
       className: cn("relative flex items-center justify-center", className),
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-10 lg:flex-row lg:gap-20", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8 lg:w-1/2", contentClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "h1",
-            {
-              className: cn(
-                "text-5xl font-bold md:text-6xl lg:text-7xl text-balance",
-                headingClassName
-              ),
-              children: heading
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            "h1",
-            {
-              className: cn(
-                "text-5xl font-bold md:text-6xl lg:text-7xl text-balance",
-                headingClassName
-              ),
-              children: heading
-            }
-          )),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
-            {
-              className: cn(
-                "text-lg md:text-xl text-balance",
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          renderNewsletterForm
-        ] }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-5xl font-bold md:text-6xl lg:text-7xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-5xl font-bold md:text-6xl lg:text-7xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-lg md:text-xl text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              renderNewsletterForm
+            ]
+          }
+        ),
         renderImage
       ] })
     }