@opensite/ui 1.2.9 → 1.3.1

package/dist/registry.cjs

@@ -23960,12 +23960,12 @@ function FeatureIconGridBordered({
   features,
   featuresSlot,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   labelClassName,
   titleClassName,
   gridClassName,
   cardClassName,
   background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
@@ -23985,23 +23985,22 @@ function FeatureIconGridBordered({
       "div",
       {
         className: cn(
-          "relative flex gap-3 rounded-none border-dashed md:block md:border-l md:p-5",
+          "relative flex h-full flex-col justify-between gap-6 rounded-none border-dashed px-0 md:border-l md:px-5",
           cardClassName,
           feature.className
         ),
         children: [
           (feature.icon || feature.iconName) && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
+            "div",
             {
               className: cn(
-                "mb-8 flex size-10 shrink-0 items-center justify-center rounded-full text-primary-foreground md:size-16",
-                getAccentColor(background),
+                "flex size-10 shrink-0 items-center justify-center rounded-lg md:size-12 text-accent-foreground bg-primary shadow-xl",
                 feature.iconClassName
               ),
               children: renderIcon(feature)
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col justify-end gap-2", children: [
             feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
               Pressable,
               {
@@ -24200,7 +24199,7 @@ function FeatureChecklistImage({
       patternOpacity,
       patternClassName,
       className,
-      containerClassName: cn("max-w-6xl", containerClassName),
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -24214,7 +24213,7 @@ function FeatureChecklistImage({
               "div",
               {
                 className: cn(
-                  "px-4 md:px-6 lg:px-10 py-4 md:py-4 lg:py-0",
+                  "px-0 md:px-6 lg:px-10 py-4 md:py-0 flex flex-col gap-6 md:gap-10",
                   contentClassName
                 ),
                 children: [
@@ -24237,12 +24236,12 @@ function FeatureChecklistImage({
                       children: title
                     }
                   )),
-                  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 md:mt-6", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-1 md:mt-6", descriptionClassName), children: description })),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("relative", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", descriptionClassName), children: description })),
                   actionsContent && /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
                       className: cn(
-                        "flex flex-wrap items-center gap-4 md:gap-2",
+                        "flex flex-wrap items-center gap-4",
                         actionsClassName
                       ),
                       children: actionsContent
@@ -24252,7 +24251,7 @@ function FeatureChecklistImage({
                     "ul",
                     {
                       className: cn(
-                        "mt-10 flex-wrap items-center gap-6 space-y-6 md:flex md:space-y-0",
+                        "flex-wrap items-center space-y-2 md:flex",
                         checklistClassName
                       ),
                       children: checklistContent
@@ -24752,7 +24751,7 @@ function FeatureNumberedCards({
     []
   );
   const cardImg = React52.useCallback((feature) => {
-    if (!feature.image || !feature.imageSlot) return null;
+    if (!feature.image && !feature.imageSlot) return null;
     if (feature.imageSlot) return feature.imageSlot;
     const imageAlt = feature.imageAlt || (typeof feature.title === "string" ? feature.title : "Feature image");
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden h-full w-full rounded-t-lg rounded-b-none md:rounded-t-none md:rounded-l-none md:rounded-r-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -24858,7 +24857,7 @@ function FeatureNumberedCards({
                     "span",
                     {
                       className: cn(
-                        "absolute top-5 left-5 flex size-6 items-center justify-center rounded-sm bg-primary font-mono text-xs text-primary-foreground md:top-10 md:left-10",
+                        "absolute top-2 md:top-5 left-2 md:left-5 flex size-10 md:size-12 items-center justify-center rounded-md shadow-lg bg-primary text-sm md:text-md text-primary-foreground lg:top-10 lg:left-10 font-semibold",
                         badgeClassName
                       ),
                       children: String(index + 1).padStart(2, "0")
@@ -24939,7 +24938,7 @@ function FeatureIconGridAccent({
   features,
   featuresSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-6 lg:px-8",
   headerClassName,
   labelClassName,
   titleClassName,
@@ -24947,7 +24946,7 @@ function FeatureIconGridAccent({
   gridClassName,
   cardClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -24986,7 +24985,7 @@ function FeatureIconGridAccent({
       );
     });
   }, [featuresSlot, features, cardClassName, background]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
@@ -24996,7 +24995,7 @@ function FeatureIconGridAccent({
       patternClassName,
       className,
       containerClassName,
-      children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
         (label || title || description) && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -25030,13 +25029,13 @@ function FeatureIconGridAccent({
           "div",
           {
             className: cn(
-              "mx-auto mt-20 grid max-w-5xl gap-6 md:grid-cols-2",
+              "mx-auto grid max-w-5xl gap-6 md:grid-cols-2",
               gridClassName
             ),
             children: featuresContent
           }
         )
-      ]
+      ] })
     }
   );
 }
@@ -25046,13 +25045,13 @@ function FeatureThreeColumnValues({
   values,
   valuesSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-6 lg:px-8",
   labelClassName,
   titleClassName,
   gridClassName,
   cardClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -25072,38 +25071,48 @@ function FeatureThreeColumnValues({
     return values.map((value, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn("rounded-lg p-5", cardClassName, value.className),
+        className: cn(
+          "relative flex h-full flex-col justify-between gap-6 rounded-lg p-5 bg-card text-card-foreground shadow-lg border",
+          cardClassName,
+          value.className
+        ),
         children: [
           (value.icon || value.iconName) && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
+            "div",
             {
               className: cn(
-                "mb-8 flex size-12 items-center justify-center rounded-full ",
+                "flex size-fit p-3 items-center justify-center rounded-full border",
                 value.iconClassName
               ),
               children: renderValueIcon(value)
             }
           ),
-          value.title && (typeof value.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "h3",
-            {
-              className: cn("mb-2 text-xl font-medium", value.titleClassName),
-              children: value.title
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn("mb-2 text-xl font-medium", value.titleClassName),
-              children: value.title
-            }
-          )),
-          value.description && (typeof value.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-7 ", value.descriptionClassName), children: value.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("leading-7", value.descriptionClassName), children: value.description }))
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col justify-end gap-2", children: [
+            value.title && (typeof value.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              Pressable,
+              {
+                href: value.href,
+                className: cn(
+                  "font-medium md:mb-2 text-xl",
+                  value.titleClassName
+                ),
+                children: value.title
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn("mb-2 text-xl font-medium", value.titleClassName),
+                children: value.title
+              }
+            )),
+            value.description && (typeof value.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-7 ", value.descriptionClassName), children: value.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("leading-7", value.descriptionClassName), children: value.description }))
+          ] })
         ]
       },
       index
     ));
   }, [valuesSlot, values, cardClassName, renderValueIcon]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
@@ -25113,32 +25122,40 @@ function FeatureThreeColumnValues({
       patternClassName,
       className,
       containerClassName,
-      children: [
-        label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-sm lg:text-base", labelClassName), children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-sm lg:text-base", labelClassName), children: label })),
-        title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-          "h2",
-          {
-            className: cn("text-3xl font-medium lg:text-4xl", titleClassName),
-            children: title
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn("text-3xl font-medium lg:text-4xl", titleClassName),
-            children: title
-          }
-        )),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
+        label || title ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-4", children: [
+          label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", labelClassName), children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm", labelClassName), children: label })),
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-3xl font-medium lg:text-4xl",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "text-3xl font-medium lg:text-4xl",
+                titleClassName
+              ),
+              children: title
+            }
+          ))
+        ] }) : null,
         (valuesSlot || values && values.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: cn(
-              "mt-14 grid gap-6 lg:mt-20 lg:grid-cols-3",
+              "grid gap-6 grid-cols-1 md:grid-cols-3",
               gridClassName
             ),
             children: valuesContent
           }
         )
-      ]
+      ] })
     }
   );
 }
@@ -25151,7 +25168,8 @@ function FeatureBadgeGridSix({
   action,
   actionSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   headerClassName,
   badgeClassName,
   titleClassName,
@@ -25159,7 +25177,6 @@ function FeatureBadgeGridSix({
   cardClassName,
   actionContainerClassName,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName
@@ -25191,12 +25208,54 @@ function FeatureBadgeGridSix({
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: cn("flex gap-6 space-y-4 rounded-lg md:block", cardClassName, feature.className),
+          className: cn(
+            "flex gap-6 space-y-4 rounded-lg md:block",
+            cardClassName,
+            feature.className
+          ),
           children: [
-            iconContent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground md:size-12", children: iconContent }),
+            iconContent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-card text-card-foreground md:size-12 shadow-sm border", children: iconContent }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              feature.heading && (typeof feature.heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-medium md:mb-2 md:text-xl", feature.headingClassName), children: feature.heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("font-medium md:mb-2 md:text-xl", feature.headingClassName), children: feature.heading })),
-              feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm md:text-base", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm md:text-base", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }))
+              feature.heading && (typeof feature.heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h3",
+                {
+                  className: cn(
+                    "font-medium md:mb-2 md:text-xl",
+                    feature.headingClassName
+                  ),
+                  children: feature.heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "font-medium md:mb-2 md:text-xl",
+                    feature.headingClassName
+                  ),
+                  children: feature.heading
+                }
+              )),
+              feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-sm md:text-base",
+                    getTextColor(background, "muted"),
+                    feature.descriptionClassName
+                  ),
+                  children: feature.description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-sm md:text-base",
+                    getTextColor(background, "muted"),
+                    feature.descriptionClassName
+                  ),
+                  children: feature.description
+                }
+              ))
             ] })
           ]
         },
@@ -25240,7 +25299,7 @@ function FeatureBadgeGridSix({
       }
     );
   }, [actionSlot, action]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
@@ -25250,71 +25309,169 @@ function FeatureBadgeGridSix({
       patternClassName,
       className,
       containerClassName,
-      children: [
-        (label || badgeSlot || title) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 flex max-w-3xl flex-col gap-4", headerClassName), children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
+        (label || badgeSlot || title) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-4", headerClassName), children: [
           badgeContent,
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium md:text-4xl lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-medium md:text-4xl lg:text-5xl", titleClassName), children: title }))
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-2xl font-bold md:text-3xl lg:text-4xl",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "text-2xl font-bold md:text-3xl lg:text-4xl",
+                titleClassName
+              ),
+              children: title
+            }
+          ))
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-12 md:grid-cols-2", gridClassName), children: featuresContent }),
-        (action || actionSlot) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-16 flex justify-center", actionContainerClassName), children: actionContent })
-      ]
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "grid gap-6 md:gap-12 grid-cols-1 md:grid-cols-2",
+              gridClassName
+            ),
+            children: featuresContent
+          }
+        ),
+        (action || actionSlot) && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn("mt-8 flex justify-center", actionContainerClassName),
+            children: actionContent
+          }
+        )
+      ] })
     }
   );
 }
 function FeaturePatternGridLinks({
+  title,
+  description,
+  titleClassName,
+  descriptionClassName,
+  headerClassName,
   features,
   featuresSlot,
   className,
-  containerClassName,
+  spacing = "py-12 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   gridClassName,
   cardClassName,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName
 }) {
-  const renderFeatureIcon = React52.useCallback((feature) => {
-    if (feature.icon) return feature.icon;
-    if (feature.iconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName, size: 24, className: feature.iconClassName });
-    return null;
-  }, []);
-  const renderFeatureLink = React52.useCallback((feature) => {
-    if (feature.linkSlot) return feature.linkSlot;
-    if (!feature.link && !feature.linkLabel) return null;
-    const label = feature.linkLabel || (feature.link ? "Learn more" : null);
-    if (!label) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      Pressable,
-      {
-        href: feature.link,
-        className: cn("flex items-center gap-2 text-sm font-medium", feature.linkClassName),
-        children: [
-          label,
-          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
-        ]
-      }
-    );
-  }, []);
+  const renderFeatureIcon = React52.useCallback(
+    (feature) => {
+      if (feature.icon) return feature.icon;
+      if (feature.iconName)
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          DynamicIcon,
+          {
+            name: feature.iconName,
+            size: 24,
+            className: feature.iconClassName
+          }
+        );
+      return null;
+    },
+    []
+  );
+  const renderFeatureLink = React52.useCallback(
+    (feature) => {
+      if (feature.linkSlot) return feature.linkSlot;
+      if (!feature.link && !feature.linkLabel) return null;
+      const label = feature.linkLabel || (feature.link ? "Learn more" : null);
+      if (!label) return null;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        Pressable,
+        {
+          href: feature.link,
+          className: cn(
+            "flex items-center gap-2 text-sm font-medium",
+            feature.linkClassName
+          ),
+          children: [
+            label,
+            /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
+          ]
+        }
+      );
+    },
+    []
+  );
   const featuresContent = React52.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
     return features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn("flex flex-col gap-10 rounded-lg border p-8", cardClassName, feature.className),
+        className: cn(
+          "flex flex-col gap-10 rounded-lg border p-8",
+          cardClassName,
+          feature.className
+        ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             renderFeatureIcon(feature),
-            feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mt-6 mb-2 font-medium", feature.titleClassName), children: feature.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6 mb-2 font-medium", feature.titleClassName), children: feature.title })),
-            feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }))
+            feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h3",
+              {
+                className: cn("mt-6 mb-2 font-medium", feature.titleClassName),
+                children: feature.title
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn("mt-6 mb-2 font-medium", feature.titleClassName),
+                children: feature.title
+              }
+            )),
+            feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "text-sm",
+                  getTextColor(background, "muted"),
+                  feature.descriptionClassName
+                ),
+                children: feature.description
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "text-sm",
+                  getTextColor(background, "muted"),
+                  feature.descriptionClassName
+                ),
+                children: feature.description
+              }
+            ))
           ] }),
           renderFeatureLink(feature)
         ]
       },
       index
     ));
-  }, [featuresSlot, features, cardClassName, renderFeatureIcon, renderFeatureLink, background]);
+  }, [
+    featuresSlot,
+    features,
+    cardClassName,
+    renderFeatureIcon,
+    renderFeatureLink,
+    background
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -25325,7 +25482,55 @@ function FeaturePatternGridLinks({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 md:grid-cols-2 lg:grid-cols-3", gridClassName), children: featuresContent })
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
+        title || description ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-4 md:gap-6 text-left",
+              headerClassName
+            ),
+            children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn("max-w-lg md:max-w-md", descriptionClassName),
+                  children: description
+                }
+              ))
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+              gridClassName
+            ),
+            children: featuresContent
+          }
+        )
+      ] })
     }
   );
 }
@@ -25336,7 +25541,6 @@ function FeatureTabbedContentImage({
   slidesSlot,
   defaultTab,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   titleClassName,
   descriptionClassName,
@@ -25348,6 +25552,7 @@ function FeatureTabbedContentImage({
   contentGridClassName,
   optixFlowConfig,
   background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
@@ -25610,7 +25815,14 @@ function FeatureUtilityCardsGrid({
   const renderLabelIcon = React52.useMemo(() => {
     if (labelIcon) return labelIcon;
     if (labelIconName)
-      return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: labelIconName, size: 20, className: getAccentColor(background) });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DynamicIcon,
+        {
+          name: labelIconName,
+          size: 20,
+          className: getAccentColor(background)
+        }
+      );
     return null;
   }, [labelIcon, labelIconName, background]);
   const learnMoreContent = React52.useMemo(() => {
@@ -25707,10 +25919,19 @@ function FeatureUtilityCardsGrid({
                 headerClassName
               ),
               children: [
-                (label || labelIcon || labelIconName) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1 ", labelClassName), children: [
-                  renderLabelIcon,
-                  label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: label }))
-                ] }),
+                (label || labelIcon || labelIconName) && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "text-lg flex items-center gap-4",
+                      labelClassName
+                    ),
+                    children: [
+                      renderLabelIcon,
+                      label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: label }))
+                    ]
+                  }
+                ),
                 learnMoreContent
               ]
             }
@@ -26092,7 +26313,7 @@ function FeatureIconTabsContent({
   tabsSlot,
   defaultTab,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -26103,7 +26324,7 @@ function FeatureIconTabsContent({
   tabContentClassName,
   optixFlowConfig,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "pt-14 pb-12 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -26183,11 +26404,11 @@ function FeatureIconTabsContent({
     if (!tabs || tabs.length === 0) return null;
     const activeDefaultTab = defaultTab || tabs[0]?.value;
     return /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultValue: activeDefaultTab, className: "mt-8", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container overflow-x-auto px-4 pb-2 md:px-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container overflow-x-auto px-4 pb-2 md:px-6 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border/50 hover:scrollbar-thumb-border md:overflow-x-visible [&::-webkit-scrollbar]:h-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/30", children: /* @__PURE__ */ jsxRuntime.jsx(
         TabsList,
         {
           className: cn(
-            "inline-flex w-auto min-w-full items-center justify-start gap-2 bg-transparent md:justify-center md:gap-4",
+            "inline-flex w-auto items-center justify-start gap-2 bg-transparent md:w-full md:justify-center md:gap-4 h-auto! p-0!",
             tabsListClassName
           ),
           children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -26195,7 +26416,7 @@ function FeatureIconTabsContent({
             {
               value: tab.value,
               className: cn(
-                "flex shrink-0 items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                "flex h-auto! w-auto! flex-none items-center gap-2 rounded-lg border border-border pl-0 pr-4 md:pl-4 md:pr-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
                 `data-[state=active]:${getBorderColor(background, "accent")}`,
                 tabTriggerClassName,
                 tab.className
@@ -26209,99 +26430,87 @@ function FeatureIconTabsContent({
           ))
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: cn(
-            "mx-auto mt-8 max-w-7xl rounded-2xl p-6 lg:p-16",
-            contentWrapperClassName
-          ),
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: tabs.map((tab) => {
-            if (tab.contentSlot) {
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                TabsContent,
-                {
-                  value: tab.value,
-                  className: tabContentClassName,
-                  children: tab.contentSlot
-                },
-                tab.value
-              );
-            }
-            const content = tab.content;
-            if (!content) return null;
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              TabsContent,
-              {
-                value: tab.value,
-                className: cn(
-                  "grid place-items-start gap-20 lg:grid-cols-2 lg:gap-10",
-                  tabContentClassName,
-                  content.className
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("py-6 md:py-10", contentWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 md:p-8 bg-muted/50 rounded-2xl shadow-lg", children: tabs.map((tab) => {
+        if (tab.contentSlot) {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            TabsContent,
+            {
+              value: tab.value,
+              className: tabContentClassName,
+              children: tab.contentSlot
+            },
+            tab.value
+          );
+        }
+        const content = tab.content;
+        if (!content) return null;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          TabsContent,
+          {
+            value: tab.value,
+            className: cn(
+              "grid place-items-start gap-20 lg:grid-cols-2 lg:gap-10",
+              tabContentClassName,
+              content.className
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
+                content.badge && /* @__PURE__ */ jsxRuntime.jsx(
+                  Badge,
+                  {
+                    variant: "outline",
+                    className: cn("w-fit", content.badgeClassName),
+                    children: content.badge
+                  }
                 ),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
-                    content.badge && /* @__PURE__ */ jsxRuntime.jsx(
-                      Badge,
-                      {
-                        variant: "outline",
-                        className: cn(
-                          "w-fit",
-                          content.badgeClassName
-                        ),
-                        children: content.badge
-                      }
+                content.title && (typeof content.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "h3",
+                  {
+                    className: cn(
+                      "text-2xl font-semibold",
+                      content.titleClassName
                     ),
-                    content.title && (typeof content.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                      "h3",
-                      {
-                        className: cn(
-                          "text-3xl font-semibold lg:text-5xl",
-                          content.titleClassName
-                        ),
-                        children: content.title
-                      }
-                    ) : /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
-                      {
-                        className: cn(
-                          "text-3xl font-semibold lg:text-5xl",
-                          content.titleClassName
-                        ),
-                        children: content.title
-                      }
-                    )),
-                    content.description && (typeof content.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                      "p",
-                      {
-                        className: cn(
-                          "lg:text-lg",
-                          getTextColor(background, "muted"),
-                          content.descriptionClassName
-                        ),
-                        children: content.description
-                      }
-                    ) : /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
-                      {
-                        className: cn(
-                          "lg:text-lg",
-                          getTextColor(background, "muted"),
-                          content.descriptionClassName
-                        ),
-                        children: content.description
-                      }
-                    )),
-                    (content.actionsSlot || content.actions && content.actions.length > 0) && renderTabContentActions(content)
-                  ] }),
-                  (content.imageSlot || content.imageSrc) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-[300px] w-full lg:h-[400px]", children: renderTabContentImage(content) })
-                ]
-              },
-              tab.value
-            );
-          }) })
-        }
-      )
+                    children: content.title
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "text-2xl font-semibold",
+                      content.titleClassName
+                    ),
+                    children: content.title
+                  }
+                )),
+                content.description && (typeof content.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "lg:text-lg",
+                      getTextColor(background, "muted"),
+                      content.descriptionClassName
+                    ),
+                    children: content.description
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "lg:text-lg",
+                      getTextColor(background, "muted"),
+                      content.descriptionClassName
+                    ),
+                    children: content.description
+                  }
+                )),
+                (content.actionsSlot || content.actions && content.actions.length > 0) && renderTabContentActions(content)
+              ] }),
+              (content.imageSlot || content.imageSrc) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-[300px] w-full lg:h-[400px]", children: renderTabContentImage(content) })
+            ]
+          },
+          tab.value
+        );
+      }) }) })
     ] });
   }, [
     tabsSlot,
@@ -26315,7 +26524,7 @@ function FeatureIconTabsContent({
     renderTabContentActions,
     renderTabContentImage
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
@@ -26324,8 +26533,8 @@ function FeatureIconTabsContent({
       patternOpacity,
       patternClassName,
       className,
-      containerClassName: cn("mx-auto", containerClassName),
-      children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
         (badge || heading || description) && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -26339,7 +26548,7 @@ function FeatureIconTabsContent({
                 "h1",
                 {
                   className: cn(
-                    "max-w-2xl text-3xl font-semibold md:text-4xl",
+                    "max-w-4xl text-3xl font-semibold md:text-6xl text-balance",
                     headingClassName
                   ),
                   children: heading
@@ -26348,24 +26557,18 @@ function FeatureIconTabsContent({
                 "div",
                 {
                   className: cn(
-                    "max-w-2xl text-3xl font-semibold md:text-4xl",
+                    "max-w-4xl text-3xl font-semibold md:text-6xl text-balance",
                     headingClassName
                   ),
                   children: heading
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(getTextColor(background, "muted"), descriptionClassName),
-                  children: description
-                }
-              ))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-balance", descriptionClassName), children: description }))
             ]
           }
         ),
         tabsContent
-      ]
+      ] })
     }
   );
 }
@@ -26633,7 +26836,6 @@ function FeatureCategoryImageCards({
   features,
   featuresSlot,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   badgeClassName,
   titleClassName,
@@ -26642,6 +26844,7 @@ function FeatureCategoryImageCards({
   cardClassName,
   optixFlowConfig,
   background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
@@ -26928,14 +27131,14 @@ function FeatureImageCardsThreeColumn({
   cards,
   cardsSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   titleClassName,
   descriptionClassName,
   gridClassName,
   cardClassName,
   optixFlowConfig,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName
@@ -26949,7 +27152,7 @@ function FeatureImageCardsThreeColumn({
         {
           src: card.imageSrc,
           alt: imageAlt,
-          className: "h-full max-h-[450px] w-full rounded-xl object-cover object-center",
+          className: "h-full max-h-[450px] min-h-80 w-full rounded-xl object-cover object-center",
           loading: "lazy",
           optixFlowConfig
         }
@@ -26964,7 +27167,7 @@ function FeatureImageCardsThreeColumn({
       }
       if (card.icon) return card.icon;
       if (!card.iconName) return null;
-      return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: card.iconName, size: 24 });
+      return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: card.iconName, size: 18 });
     },
     []
   );
@@ -26985,18 +27188,25 @@ function FeatureImageCardsThreeColumn({
           ),
           children: [
             renderImage(card, imageAlt),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-20 rounded-xl bg-linear-to-t from-black to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-10 md:translate-y-20 rounded-xl bg-linear-to-t from-black to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-4 md:p-6", children: [
-              (card.badgeText || card.avatarSrc || card.icon || card.iconName) && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "default", className: cn(card.badgeClassName), children: [
-                renderBadgeIcon(card),
-                card.badgeText
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
+              (card.badgeText || card.avatarSrc || card.icon || card.iconName) && /* @__PURE__ */ jsxRuntime.jsxs(
+                Badge,
+                {
+                  variant: "default",
+                  className: cn("py-1 px-4", card.badgeClassName),
+                  children: [
+                    renderBadgeIcon(card),
+                    card.badgeText
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 md:gap-4", children: [
                 card.title && (typeof card.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                   "h3",
                   {
                     className: cn(
-                      "text-xl md:text-2xl font-semibold",
+                      "text-lg md:text-xl font-semibold",
                       card.titleClassName
                     ),
                     children: card.title
@@ -27005,20 +27215,19 @@ function FeatureImageCardsThreeColumn({
                   "div",
                   {
                     className: cn(
-                      "text-xl md:text-2xl font-semibold",
+                      "text-lg md:text-xl font-semibold",
                       card.titleClassName
                     ),
                     children: card.title
                   }
                 )),
                 card.linkText && card.link && /* @__PURE__ */ jsxRuntime.jsxs(
-                  Pressable,
+                  "div",
                   {
                     className: cn(
-                      "font-bold text-xs uppercase",
+                      "font-bold text-xs uppercase flex items-center gap-2",
                       card.linkClassName
                     ),
-                    href: card.link,
                     children: [
                       card.linkText,
                       /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 18 })
@@ -27049,7 +27258,7 @@ function FeatureImageCardsThreeColumn({
             "h2",
             {
               className: cn(
-                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                "text-2xl font-semibold text-balance md:text-3xl lg:text-4xl max-w-lg md:max-w-md",
                 titleClassName
               ),
               children: title
@@ -27058,7 +27267,7 @@ function FeatureImageCardsThreeColumn({
             "div",
             {
               className: cn(
-                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                "text-2xl font-semibold text-balance md:text-3xl lg:text-4xl max-w-lg md:max-w-md",
                 titleClassName
               ),
               children: title
@@ -27204,7 +27413,7 @@ function FeatureIconGridMuted({
           "div",
           {
             className: cn(
-              "mx-auto mt-20 grid max-w-7xl gap-7 md:grid-cols-2 lg:grid-cols-3",
+              "mx-auto grid max-w-full md:max-w-7xl gap-4 md:gap-7 grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
               gridClassName
             ),
             children: featuresContent
@@ -27578,8 +27787,8 @@ function FeatureCapabilitiesGrid({
   items,
   itemsSlot,
   className,
-  containerClassName = "px-4 sm:px-4 md:px-6 lg:px-8",
-  spacing = "py-6 md:py-32",
+  containerClassName = "mx-auto w-full max-w-screen-lg md:max-w-screen-4xl relative z-10 px-6 sm:px-2 md:px-2 lg:px-2",
+  spacing = "py-12 md:py-32",
   eyebrowClassName,
   headingClassName,
   gridClassName,
@@ -27606,7 +27815,7 @@ function FeatureCapabilitiesGrid({
         Card,
         {
           className: cn(
-            "group relative rounded-md overflow-visible border-border/10 bg-background/5 p-0 transition-colors duration-300 hover:border-border/20",
+            "group relative rounded-md overflow-visible border-border/10 bg-card text-card-foreground p-0 transition-colors duration-300 hover:border-border/20",
             cardClassName,
             item.className
           ),
@@ -27624,7 +27833,7 @@ function FeatureCapabilitiesGrid({
                 "div",
                 {
                   className: cn(
-                    "flex h-10 w-10 items-center justify-center rounded-xl border border-border/15 bg-background/5",
+                    "flex h-10 w-10 items-center justify-center rounded-xl border ",
                     item.iconClassName
                   ),
                   children: iconContent
@@ -27653,7 +27862,7 @@ function FeatureCapabilitiesGrid({
                       "span",
                       {
                         className: cn(
-                          "rounded-full border border-border/20 px-2 py-0.5 text-[10px] leading-none",
+                          "rounded-full border px-2 py-0.5 text-[10px] leading-none",
                           item.badgeClassName
                         ),
                         children: item.badge
@@ -27698,7 +27907,6 @@ function FeatureCapabilitiesGrid({
       patternClassName,
       className,
       containerClassName,
-      containerMaxWidth: "lg",
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
         eyebrow || heading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-4 md:space-y-6", children: [
           eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm tracking-widest", eyebrowClassName), children: eyebrow }) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -34537,7 +34745,8 @@ function CarouselScaleFocus({
   indicatorClassName,
   startIndex = 1,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -34647,7 +34856,7 @@ function CarouselScaleFocus({
       patternOpacity,
       patternClassName,
       className: cn("overflow-hidden", className),
-      containerClassName: "px-6 sm:px-6 md:px-8 lg:px-8",
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:px-45", children: [
           title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16 text-center", children: [