@opensite/ui 2.0.2 → 2.0.4

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

@@ -31,32 +31,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -852,18 +826,16 @@ var Section = React__namespace.default.forwardRef(
 Section.displayName = "Section";
 function HeroGridPatternEfficiency({
   heading,
-  highlightedWord = "efficiency.",
   description,
   action,
   actionSlot,
-  actionSubtext = "No credit card required.",
-  showGridPattern = true,
+  actionSubtext,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -872,7 +844,14 @@ function HeroGridPatternEfficiency({
   const renderAction = React.useMemo(() => {
     if (actionSlot) return actionSlot;
     if (!action) return null;
-    const { label, icon, iconAfter, children, className: btnClassName, ...pressableProps } = action;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: btnClassName,
+      ...pressableProps
+    } = action;
     return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { asButton: true, className: btnClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       icon,
       label,
@@ -881,14 +860,29 @@ function HeroGridPatternEfficiency({
   }, [actionSlot, action]);
   const renderHeading = React.useMemo(() => {
     if (heading) {
-      return typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-5xl leading-tight font-extrabold lg:text-8xl lg:leading-snug", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-5xl leading-tight font-extrabold lg:text-8xl lg:leading-snug", headingClassName), children: heading });
+      return typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+        "h1",
+        {
+          className: cn(
+            "text-5xl leading-tight font-extrabold lg:text-8xl lg:leading-snug text-balance",
+            headingClassName
+          ),
+          children: heading
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        "h1",
+        {
+          className: cn(
+            "text-5xl leading-tight font-extrabold lg:text-8xl lg:leading-snug text-balance",
+            headingClassName
+          ),
+          children: heading
+        }
+      );
+    } else {
+      return null;
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: cn("text-5xl leading-tight font-extrabold lg:text-8xl lg:leading-snug", headingClassName), children: [
-      "Less complexity. ",
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-6", children: "More" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("relative inline-block before:absolute before:top-0 before:-right-2 before:-bottom-2 before:-left-4 before:-z-10 before:rounded-lg", `before:${getTextColor(background, "muted")}/15`), children: highlightedWord })
-    ] });
-  }, [heading, highlightedWord, headingClassName]);
+  }, [heading, headingClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -896,15 +890,33 @@ function HeroGridPatternEfficiency({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative max-w-5xl", contentClassName), children: [
-        showGridPattern && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted))_1px,transparent_1px)] mask-[radial-gradient(ellipse_50%_100%_at_50%_50%,#000_60%,transparent_100%)] bg-size-[64px_64px]" }),
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative max-w-5xl", contentClassName), children: [
         renderHeading,
-        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-7 text-xl font-light lg:text-3xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-12 flex w-fit flex-col gap-2.5 text-center", actionClassName), children: [
-          renderAction,
-          actionSubtext && (typeof actionSubtext === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: actionSubtext }) : actionSubtext)
-        ] })
+        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: cn(
+              "mt-7 text-xl font-light lg:text-3xl text-balance",
+              descriptionClassName
+            ),
+            children: description
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mt-12 flex w-fit flex-col gap-2.5 text-center",
+              actionClassName
+            ),
+            children: [
+              renderAction,
+              actionSubtext && (typeof actionSubtext === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: actionSubtext }) : actionSubtext)
+            ]
+          }
+        )
       ] }) })
     }
   );

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

@@ -11,10 +11,6 @@ interface HeroGridPatternEfficiencyProps {
      * Main heading content (can include highlighted text)
      */
     heading?: React.ReactNode;
-    /**
-     * Highlighted word in heading (rendered with background)
-     */
-    highlightedWord?: React.ReactNode;
     /**
      * Description text below heading
      */
@@ -32,9 +28,6 @@ interface HeroGridPatternEfficiencyProps {
      */
     actionSubtext?: React.ReactNode;
     /**
-     * Whether to show the grid pattern background
-     */
-    showGridPattern?: boolean; /**
      * Background style for the section
      */
     background?: SectionBackground;
@@ -75,6 +68,6 @@ interface HeroGridPatternEfficiencyProps {
      */
     actionClassName?: string;
 }
-declare function HeroGridPatternEfficiency({ heading, highlightedWord, description, action, actionSlot, actionSubtext, showGridPattern, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionClassName, }: HeroGridPatternEfficiencyProps): React.JSX.Element;
+declare function HeroGridPatternEfficiency({ heading, description, action, actionSlot, actionSubtext, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, actionClassName, }: HeroGridPatternEfficiencyProps): React.JSX.Element;
 
 export { HeroGridPatternEfficiency, type HeroGridPatternEfficiencyProps };

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

@@ -11,10 +11,6 @@ interface HeroGridPatternEfficiencyProps {
      * Main heading content (can include highlighted text)
      */
     heading?: React.ReactNode;
-    /**
-     * Highlighted word in heading (rendered with background)
-     */
-    highlightedWord?: React.ReactNode;
     /**
      * Description text below heading
      */
@@ -32,9 +28,6 @@ interface HeroGridPatternEfficiencyProps {
      */
     actionSubtext?: React.ReactNode;
     /**
-     * Whether to show the grid pattern background
-     */
-    showGridPattern?: boolean; /**
      * Background style for the section
      */
     background?: SectionBackground;
@@ -75,6 +68,6 @@ interface HeroGridPatternEfficiencyProps {
      */
     actionClassName?: string;
 }
-declare function HeroGridPatternEfficiency({ heading, highlightedWord, description, action, actionSlot, actionSubtext, showGridPattern, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionClassName, }: HeroGridPatternEfficiencyProps): React.JSX.Element;
+declare function HeroGridPatternEfficiency({ heading, description, action, actionSlot, actionSubtext, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, actionClassName, }: HeroGridPatternEfficiencyProps): React.JSX.Element;
 
 export { HeroGridPatternEfficiency, type HeroGridPatternEfficiencyProps };

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

@@ -10,32 +10,6 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -831,18 +805,16 @@ var Section = React__default.forwardRef(
 Section.displayName = "Section";
 function HeroGridPatternEfficiency({
   heading,
-  highlightedWord = "efficiency.",
   description,
   action,
   actionSlot,
-  actionSubtext = "No credit card required.",
-  showGridPattern = true,
+  actionSubtext,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -851,7 +823,14 @@ function HeroGridPatternEfficiency({
   const renderAction = useMemo(() => {
     if (actionSlot) return actionSlot;
     if (!action) return null;
-    const { label, icon, iconAfter, children, className: btnClassName, ...pressableProps } = action;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: btnClassName,
+      ...pressableProps
+    } = action;
     return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: btnClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
       icon,
       label,
@@ -860,14 +839,29 @@ function HeroGridPatternEfficiency({
   }, [actionSlot, action]);
   const renderHeading = useMemo(() => {
     if (heading) {
-      return typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-5xl leading-tight font-extrabold lg:text-8xl lg:leading-snug", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-5xl leading-tight font-extrabold lg:text-8xl lg:leading-snug", headingClassName), children: heading });
+      return typeof heading === "string" ? /* @__PURE__ */ jsx(
+        "h1",
+        {
+          className: cn(
+            "text-5xl leading-tight font-extrabold lg:text-8xl lg:leading-snug text-balance",
+            headingClassName
+          ),
+          children: heading
+        }
+      ) : /* @__PURE__ */ jsx(
+        "h1",
+        {
+          className: cn(
+            "text-5xl leading-tight font-extrabold lg:text-8xl lg:leading-snug text-balance",
+            headingClassName
+          ),
+          children: heading
+        }
+      );
+    } else {
+      return null;
     }
-    return /* @__PURE__ */ jsxs("h1", { className: cn("text-5xl leading-tight font-extrabold lg:text-8xl lg:leading-snug", headingClassName), children: [
-      "Less complexity. ",
-      /* @__PURE__ */ jsx("span", { className: "mr-6", children: "More" }),
-      /* @__PURE__ */ jsx("span", { className: cn("relative inline-block before:absolute before:top-0 before:-right-2 before:-bottom-2 before:-left-4 before:-z-10 before:rounded-lg", `before:${getTextColor(background, "muted")}/15`), children: highlightedWord })
-    ] });
-  }, [heading, highlightedWord, headingClassName]);
+  }, [heading, headingClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -875,15 +869,33 @@ function HeroGridPatternEfficiency({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("relative max-w-5xl", contentClassName), children: [
-        showGridPattern && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted))_1px,transparent_1px)] mask-[radial-gradient(ellipse_50%_100%_at_50%_50%,#000_60%,transparent_100%)] bg-size-[64px_64px]" }),
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: cn("relative max-w-5xl", contentClassName), children: [
         renderHeading,
-        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-7 text-xl font-light lg:text-3xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-        /* @__PURE__ */ jsxs("div", { className: cn("mt-12 flex w-fit flex-col gap-2.5 text-center", actionClassName), children: [
-          renderAction,
-          actionSubtext && (typeof actionSubtext === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: actionSubtext }) : actionSubtext)
-        ] })
+        description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "mt-7 text-xl font-light lg:text-3xl text-balance",
+              descriptionClassName
+            ),
+            children: description
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mt-12 flex w-fit flex-col gap-2.5 text-center",
+              actionClassName
+            ),
+            children: [
+              renderAction,
+              actionSubtext && (typeof actionSubtext === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: actionSubtext }) : actionSubtext)
+            ]
+          }
+        )
       ] }) })
     }
   );

package/dist/hero-logo-centered-screenshot.cjs

@@ -836,7 +836,7 @@ function HeroLogoCenteredScreenshot({
   imageSlot,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-6 md:py-32",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,

package/dist/hero-logo-centered-screenshot.js

@@ -815,7 +815,7 @@ function HeroLogoCenteredScreenshot({
   imageSlot,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-6 md:py-32",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,

package/dist/hero-marketplace-scattered-images.cjs

@@ -841,7 +841,6 @@ function HeroMarketplaceScatteredImages({
   taglineSlot,
   images,
   imagesSlot,
-  showGridPattern = true,
   background,
   spacing = "py-32 md:py-32",
   pattern,
@@ -908,10 +907,7 @@ function HeroMarketplaceScatteredImages({
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3 md:grid-cols-3", children: columns.map((colImages, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: cn(
-              "grid gap-3",
-              colIndex === 2 && "hidden md:grid"
-            ),
+            className: cn("grid gap-3", colIndex === 2 && "hidden md:grid"),
             children: colImages.map((image, imgIndex) => {
               const height = heightPatterns[colIndex][imgIndex % heightPatterns[colIndex].length];
               const direction = colIndex % 2 === 0 ? "up" : "down";
@@ -980,7 +976,7 @@ function HeroMarketplaceScatteredImages({
           "div",
           {
             className: cn(
-              "relative mx-auto max-w-xl py-10 text-center flex flex-col gap-6 items-center",
+              "relative mx-auto max-w-xl py-0 md:py-10 text-center flex flex-col gap-6 items-center",
               contentClassName
             ),
             children: [

package/dist/hero-marketplace-scattered-images.d.cts

@@ -44,9 +44,6 @@ interface HeroMarketplaceScatteredImagesProps {
      */
     imagesSlot?: React.ReactNode;
     /**
-     * Whether to show the grid pattern background
-     */
-    showGridPattern?: boolean; /**
      * Background style for the section
      */
     background?: SectionBackground;
@@ -91,6 +88,6 @@ interface HeroMarketplaceScatteredImagesProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroMarketplaceScatteredImages({ heading, description, action, actionSlot, tagline, taglineIcon, taglineSlot, images, imagesSlot, showGridPattern, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, imagesClassName, optixFlowConfig, }: HeroMarketplaceScatteredImagesProps): React.JSX.Element;
+declare function HeroMarketplaceScatteredImages({ heading, description, action, actionSlot, tagline, taglineIcon, taglineSlot, images, imagesSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, imagesClassName, optixFlowConfig, }: HeroMarketplaceScatteredImagesProps): React.JSX.Element;
 
 export { HeroMarketplaceScatteredImages, type HeroMarketplaceScatteredImagesProps };

package/dist/hero-marketplace-scattered-images.d.ts

@@ -44,9 +44,6 @@ interface HeroMarketplaceScatteredImagesProps {
      */
     imagesSlot?: React.ReactNode;
     /**
-     * Whether to show the grid pattern background
-     */
-    showGridPattern?: boolean; /**
      * Background style for the section
      */
     background?: SectionBackground;
@@ -91,6 +88,6 @@ interface HeroMarketplaceScatteredImagesProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroMarketplaceScatteredImages({ heading, description, action, actionSlot, tagline, taglineIcon, taglineSlot, images, imagesSlot, showGridPattern, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, imagesClassName, optixFlowConfig, }: HeroMarketplaceScatteredImagesProps): React.JSX.Element;
+declare function HeroMarketplaceScatteredImages({ heading, description, action, actionSlot, tagline, taglineIcon, taglineSlot, images, imagesSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, imagesClassName, optixFlowConfig, }: HeroMarketplaceScatteredImagesProps): React.JSX.Element;
 
 export { HeroMarketplaceScatteredImages, type HeroMarketplaceScatteredImagesProps };

package/dist/hero-marketplace-scattered-images.js

@@ -820,7 +820,6 @@ function HeroMarketplaceScatteredImages({
   taglineSlot,
   images,
   imagesSlot,
-  showGridPattern = true,
   background,
   spacing = "py-32 md:py-32",
   pattern,
@@ -887,10 +886,7 @@ function HeroMarketplaceScatteredImages({
         children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 md:grid-cols-3", children: columns.map((colImages, colIndex) => /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn(
-              "grid gap-3",
-              colIndex === 2 && "hidden md:grid"
-            ),
+            className: cn("grid gap-3", colIndex === 2 && "hidden md:grid"),
             children: colImages.map((image, imgIndex) => {
               const height = heightPatterns[colIndex][imgIndex % heightPatterns[colIndex].length];
               const direction = colIndex % 2 === 0 ? "up" : "down";
@@ -959,7 +955,7 @@ function HeroMarketplaceScatteredImages({
           "div",
           {
             className: cn(
-              "relative mx-auto max-w-xl py-10 text-center flex flex-col gap-6 items-center",
+              "relative mx-auto max-w-xl py-0 md:py-10 text-center flex flex-col gap-6 items-center",
               contentClassName
             ),
             children: [

package/dist/hero-pattern-logo-tech-stack.cjs

@@ -838,7 +838,7 @@ function HeroPatternLogoTechStack({
   techLogosSlot,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-12 md:py-32",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,

package/dist/hero-pattern-logo-tech-stack.js

@@ -817,7 +817,7 @@ function HeroPatternLogoTechStack({
   techLogosSlot,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-12 md:py-32",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,

package/dist/hero-platform-features-grid.cjs

@@ -842,7 +842,7 @@ function HeroPlatformFeaturesGrid({
   featuresSlot,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-32",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
@@ -861,7 +861,7 @@ function HeroPlatformFeaturesGrid({
         src: logoSrc,
         alt: logo.alt,
         className: cn(
-          "mx-auto mb-5 w-16 md:mb-6 md:w-24 lg:mb-7 lg:w-28",
+          "mx-auto mb-5 w-24 md:mb-6 md:w-28 lg:mb-7 lg:w-32",
           logo.imgClassName
         ),
         optixFlowConfig
@@ -892,7 +892,7 @@ function HeroPlatformFeaturesGrid({
       "div",
       {
         className: cn(
-          "mt-16 grid gap-px overflow-hidden rounded-lg border bg-input md:grid-cols-2 lg:grid-cols-4 w-full",
+          "mt-12 md:mt-16 grid gap-px overflow-hidden rounded-lg border bg-input md:grid-cols-2 lg:grid-cols-4 w-full",
           featuresClassName
         ),
         children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -927,7 +927,7 @@ function HeroPlatformFeaturesGrid({
           "div",
           {
             className: cn(
-              "flex flex-col items-center w-full gap-6 text-center",
+              "flex flex-col items-center w-full gap-4 md:gap-6 text-center",
               headerClassName
             ),
             children: [
@@ -952,7 +952,7 @@ function HeroPlatformFeaturesGrid({
                   children: heading
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-2xl md:text-lg text-balance"), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("max-w-2xl md:text-lg text-balance"), children: description })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6 max-w-2xl md:text-lg text-balance"), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("max-w-2xl md:text-lg text-balance"), children: description })),
               renderAction
             ]
           }

package/dist/hero-platform-features-grid.js

@@ -821,7 +821,7 @@ function HeroPlatformFeaturesGrid({
   featuresSlot,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-32",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
@@ -840,7 +840,7 @@ function HeroPlatformFeaturesGrid({
         src: logoSrc,
         alt: logo.alt,
         className: cn(
-          "mx-auto mb-5 w-16 md:mb-6 md:w-24 lg:mb-7 lg:w-28",
+          "mx-auto mb-5 w-24 md:mb-6 md:w-28 lg:mb-7 lg:w-32",
           logo.imgClassName
         ),
         optixFlowConfig
@@ -871,7 +871,7 @@ function HeroPlatformFeaturesGrid({
       "div",
       {
         className: cn(
-          "mt-16 grid gap-px overflow-hidden rounded-lg border bg-input md:grid-cols-2 lg:grid-cols-4 w-full",
+          "mt-12 md:mt-16 grid gap-px overflow-hidden rounded-lg border bg-input md:grid-cols-2 lg:grid-cols-4 w-full",
           featuresClassName
         ),
         children: features.map((feature, index) => /* @__PURE__ */ jsxs(
@@ -906,7 +906,7 @@ function HeroPlatformFeaturesGrid({
           "div",
           {
             className: cn(
-              "flex flex-col items-center w-full gap-6 text-center",
+              "flex flex-col items-center w-full gap-4 md:gap-6 text-center",
               headerClassName
             ),
             children: [
@@ -931,7 +931,7 @@ function HeroPlatformFeaturesGrid({
                   children: heading
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-2xl md:text-lg text-balance"), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("max-w-2xl md:text-lg text-balance"), children: description })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-6 max-w-2xl md:text-lg text-balance"), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("max-w-2xl md:text-lg text-balance"), children: description })),
               renderAction
             ]
           }