@opensite/ui 2.0.6 → 2.0.8

package/dist/hero-enterprise-security.js

@@ -6,72 +6,12 @@ import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Icon } from '@page-speed/icon';
-import { Img } from '@page-speed/img';
+import { Slot } from '@radix-ui/react-slot';
 
 // components/blocks/hero/hero-enterprise-security.tsx
 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:")) {
@@ -869,91 +809,158 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const width = mobileConfig?.width ?? "full";
+  const position = mobileConfig?.position ?? "center";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => /* @__PURE__ */ jsx(ActionComponent, { action }, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
+function ActionComponent({ action }) {
+  const {
+    label,
+    icon,
+    iconAfter,
+    children,
+    href,
+    onClick,
+    className: actionClassName,
+    ...pressableProps
+  } = action;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      href,
+      onClick,
+      asButton: action.asButton ?? true,
+      className: actionClassName,
+      ...pressableProps,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] })
+    }
+  );
+}
 function HeroEnterpriseSecurity({
-  badgeText,
+  badge,
   badgeIcon,
-  badgeSlot,
+  badgeClassName,
   heading,
   description,
   actions,
   actionsSlot,
   features,
   featuresSlot,
-  logos,
-  logosSlot,
   background,
-  spacing,
   pattern,
   patternOpacity,
+  patternClassName,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   contentClassName,
   headingClassName,
   descriptionClassName,
   actionsClassName,
-  featuresClassName,
-  logosClassName,
-  optixFlowConfig
+  featuresClassName
 }) {
-  const renderBadge = useMemo(() => {
-    if (badgeSlot) return badgeSlot;
-    if (!badgeText && !badgeIcon) return null;
-    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: "text-success" }),
-      /* @__PURE__ */ jsx("span", { children: badgeText })
-    ] });
-  }, [badgeSlot, badgeText, badgeIcon]);
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center", actionsClassName), children: actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
-  }, [actionsSlot, actions, actionsClassName]);
   const renderFeatures = useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mt-20 grid gap-8 md:grid-cols-3", featuresClassName), children: features.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: cn("rounded-2xl border border-border p-6 text-center", getNestedCardBg(background, "card")), children: [
-      /* @__PURE__ */ jsx("div", { className: cn("mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full", feature.iconBgClass || `${getAccentColor(background)}/10`), children: feature.icon ?? /* @__PURE__ */ jsx(DynamicIcon, { name: feature.iconName || "lucide/check", size: 24, className: feature.iconColorClass || getAccentColor(background) }) }),
-      /* @__PURE__ */ jsx("h3", { className: "mb-2 text-lg font-semibold ", children: feature.title }),
-      feature.description && /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: feature.description })
-    ] }, index)) });
+    return /* @__PURE__ */ jsx("div", { className: cn("mt-20 grid gap-8 md:grid-cols-3", featuresClassName), children: features.map((feature, index) => /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        href: feature.href,
+        className: cn("rounded-2xl border border-border p-6 text-center"),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full",
+                feature.iconBgClass
+              ),
+              children: feature.icon ?? /* @__PURE__ */ jsx(
+                DynamicIcon,
+                {
+                  name: feature.iconName || "lucide/check",
+                  size: 24,
+                  className: feature.iconColorClass
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("h3", { className: "mb-2 text-lg font-semibold ", children: feature.title }),
+          feature.description && /* @__PURE__ */ jsx("p", { className: "text-sm", children: feature.description })
+        ]
+      },
+      index
+    )) });
   }, [featuresSlot, features, featuresClassName]);
-  const renderLogos = useMemo(() => {
-    if (logosSlot) return logosSlot;
-    if (!logos || logos.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mt-16 flex flex-wrap items-center justify-center gap-8", logosClassName), children: logos.map((logo, index) => {
-      const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
-      return /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: logoSrc,
-          alt: logo.alt,
-          className: cn("h-8 opacity-50 grayscale", logo.className),
-          optixFlowConfig
-        },
-        index
-      );
-    }) });
-  }, [logosSlot, logos, logosClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -961,16 +968,45 @@ function HeroEnterpriseSecurity({
       spacing,
       pattern,
       patternOpacity,
+      patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "pt-8 md:pt-0", children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl text-center", contentClassName), 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 })),
-          renderActions
+          badge && /* @__PURE__ */ jsxs(Badge, { className: cn("px-4", badgeClassName), children: [
+            badgeIcon,
+            typeof badge === "string" ? /* @__PURE__ */ jsx("span", { children: badge }) : badge
+          ] }),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "mb-8 text-4xl font-normal text-balance md:text-7xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : heading),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mb-12 max-w-full md:max-w-[70%] text-lg md:text-xl font-normal text-balance",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : description),
+          /* @__PURE__ */ jsx(
+            BlockActions,
+            {
+              actions,
+              actionsSlot,
+              actionsClassName
+            }
+          )
         ] }),
-        renderFeatures,
-        renderLogos
+        renderFeatures
       ] })
     }
   );

package/dist/hero-event-registration.cjs

@@ -943,8 +943,8 @@ function HeroEventRegistration({
   locationSublabel,
   locationSlot,
   background,
-  containerClassName = "px-6  sm:px-0 md:px-0 lg:px-0",
-  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
+  containerClassName = "px-6 sm:px-0 md:px-0 lg:px-0",
+  spacing = "xl",
   pattern,
   patternOpacity,
   className,
@@ -958,18 +958,18 @@ function HeroEventRegistration({
 }) {
   const renderBadge = React3.useMemo(() => {
     if (badgeSlot) return badgeSlot;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "outline", className: "w-fit", children: [
-      badgeIcon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon, size: 14, className: "mr-1" }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: "px-4 gap-2", children: [
+      badgeIcon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon }),
       badgeText
     ] });
   }, [badgeSlot, badgeIcon, badgeText]);
   const renderStats = React3.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-3 gap-4 pt-4", statsClassName), children: stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-3 gap-4 pt-4", statsClassName), children: stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-bold ", children: stat.value }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm"), children: stat.label })
-    ] }, index)) });
+    ] }, index)) }) });
   }, [statsSlot, stats, statsClassName]);
   const renderLocation = React3.useMemo(() => {
     if (locationSlot) return locationSlot;
@@ -1015,41 +1015,41 @@ function HeroEventRegistration({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
-          renderBadge,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "h1",
-            {
-              className: cn(
-                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl",
-                headingClassName
-              ),
-              children: heading
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            "h1",
-            {
-              className: cn(
-                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl",
-                headingClassName
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-8 md:pt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col items-start gap-6 md:gap-8",
+              contentClassName
+            ),
+            children: [
+              renderBadge,
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-pretty",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : description),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
               ),
-              children: heading
-            }
-          )),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            BlockActions,
-            {
-              actions,
-              actionsSlot,
-              actionsClassName
-            }
-          ),
-          renderStats
-        ] }),
+              renderStats
+            ]
+          }
+        ),
         renderImage
-      ] })
+      ] }) })
     }
   );
 }

package/dist/hero-event-registration.js

@@ -922,8 +922,8 @@ function HeroEventRegistration({
   locationSublabel,
   locationSlot,
   background,
-  containerClassName = "px-6  sm:px-0 md:px-0 lg:px-0",
-  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
+  containerClassName = "px-6 sm:px-0 md:px-0 lg:px-0",
+  spacing = "xl",
   pattern,
   patternOpacity,
   className,
@@ -937,18 +937,18 @@ function HeroEventRegistration({
 }) {
   const renderBadge = useMemo(() => {
     if (badgeSlot) return badgeSlot;
-    return /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "w-fit", children: [
-      badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 14, className: "mr-1" }),
+    return /* @__PURE__ */ jsxs(Badge, { className: "px-4 gap-2", children: [
+      badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon }),
       badgeText
     ] });
   }, [badgeSlot, badgeIcon, badgeText]);
   const renderStats = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-3 gap-4 pt-4", statsClassName), children: stats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+    return /* @__PURE__ */ jsx("div", { className: "flex justify-center w-full", children: /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-3 gap-4 pt-4", statsClassName), children: stats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
       /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold ", children: stat.value }),
       /* @__PURE__ */ jsx("div", { className: cn("text-sm"), children: stat.label })
-    ] }, index)) });
+    ] }, index)) }) });
   }, [statsSlot, stats, statsClassName]);
   const renderLocation = useMemo(() => {
     if (locationSlot) return locationSlot;
@@ -994,41 +994,41 @@ function HeroEventRegistration({
       patternOpacity,
       className,
       containerClassName,
-      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-8", 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: /* @__PURE__ */ jsx("div", { className: "pt-8 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 items-start gap-6 md:gap-8",
+              contentClassName
+            ),
+            children: [
+              renderBadge,
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-pretty",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : description),
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
               ),
-              children: heading
-            }
-          )),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          /* @__PURE__ */ jsx(
-            BlockActions,
-            {
-              actions,
-              actionsSlot,
-              actionsClassName
-            }
-          ),
-          renderStats
-        ] }),
+              renderStats
+            ]
+          }
+        ),
         renderImage
-      ] })
+      ] }) })
     }
   );
 }

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-full md:max-w-md 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: [

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-full md:max-w-md 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: [

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,7 +909,9 @@ function HeroFullscreenLogoCta({
           "div",
           {
             className: cn(
-              "relative z-30 m-auto flex max-w-full flex-col items-start justify-center gap-4 md: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: [

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,7 +888,9 @@ function HeroFullscreenLogoCta({
           "div",
           {
             className: cn(
-              "relative z-30 m-auto flex max-w-full flex-col items-start justify-center gap-4 md: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: [

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

@@ -976,11 +976,11 @@ function HeroInnovationImageGrid({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-10 md:pt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-22.5 lg:grid-cols-2", children: [
+      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-6 md:gap-12", contentClassName),
+            className: cn("flex flex-col gap-2 md:gap-12", contentClassName),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                 heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(