@opensite/ui 1.6.1 → 1.6.3

package/dist/registry.cjs

@@ -24415,7 +24415,8 @@ function FooterNewsletterMinimal({
   brandTextClassName,
   copyrightClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   formConfig,
@@ -24442,8 +24443,11 @@ function FooterNewsletterMinimal({
         href: item.href,
         label: item.label,
         iconNameOverride: item.iconNameOverride,
-        iconSize: 14,
-        className: cn("group flex items-center gap-1 tracking-tight hover:opacity-70", socialLinkClassName)
+        iconSize: 24,
+        className: cn(
+          "group flex items-center gap-1 tracking-tight hover:opacity-70",
+          socialLinkClassName
+        )
       }
     ) }, idx));
   }, [socialLinks, socialLinkClassName]);
@@ -24453,7 +24457,10 @@ function FooterNewsletterMinimal({
       Pressable,
       {
         href: item.href,
-        className: cn("group flex items-center gap-1 tracking-tight hover:opacity-70", footerLinkClassName),
+        className: cn(
+          "group flex items-center gap-1 tracking-tight hover:opacity-70",
+          footerLinkClassName
+        ),
         children: item.label
       }
     ) }, item.label));
@@ -24505,63 +24512,127 @@ function FooterNewsletterMinimal({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("dark", className),
+      className,
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(contentClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col justify-between gap-15 lg:flex-row", topSectionClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-10", children: [
-            heading && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("relative text-4xl font-medium tracking-tight lg:text-5xl", headingClassName), children: heading }),
-            (supportLabel || supportEmail) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-1 text-sm font-light tracking-tight lg:text-base", supportClassName), children: [
-              supportLabel && /* @__PURE__ */ jsxRuntime.jsx("p", { children: supportLabel }),
-              supportEmail && /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: `mailto:${supportEmail}`, children: supportEmail })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid w-full max-w-xs grid-cols-2 gap-10 text-sm font-light lg:text-base", navGridClassName), children: [
-            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("space-y-1", navLinksClassName), children: navLinksContent }),
-            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("space-y-1", socialLinksClassName), children: socialLinksContent })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-20 flex flex-col justify-between gap-15 lg:flex-row", newsletterSectionClassName), children: [
-          formConfig?.token && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full max-w-md flex-col gap-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 text-sm font-light tracking-tight lg:text-base", children: [
-            newsletterLabel && /* @__PURE__ */ jsxRuntime.jsx("p", { children: newsletterLabel }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              forms.Form,
-              {
-                form,
-                action: formConfig?.endpoint,
-                method: formMethod,
-                className: cn("flex w-full items-end border-b border-b-foreground/10", newsletterFormClassName),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", className: "flex-1", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsx(
-                    TextInput,
-                    {
-                      ...field,
-                      type: "email",
-                      placeholder: newsletterPlaceholder,
-                      error: meta.touched && !!meta.error,
-                      className: cn("mt-10 h-auto w-full rounded-none border-0 bg-transparent p-0 uppercase shadow-none placeholder:text-foreground/20 focus:outline-none focus:ring-0 lg:text-base", newsletterInputClassName),
-                      "aria-label": newsletterPlaceholder || "Email address"
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    Pressable,
-                    {
-                      componentType: "button",
-                      type: "submit",
-                      className: cn("p-2 hover:opacity-80", newsletterButtonClassName),
-                      asButton: false,
-                      disabled: form.isSubmitting,
-                      children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20 })
-                    }
-                  )
-                ]
-              }
-            )
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid w-full max-w-xs grid-cols-2 gap-10 text-sm font-light lg:text-base", bottomGridClassName), children: [
-            location && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-32", locationClassName), children: location }),
-            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("space-y-1", footerLinksClassName), children: footerLinksContent })
-          ] })
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col justify-between gap-15 lg:flex-row",
+              topSectionClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-10", children: [
+                heading && /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "relative text-4xl font-medium tracking-tight lg:text-5xl",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ),
+                (supportLabel || supportEmail) && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "space-y-1 text-sm font-light tracking-tight lg:text-base",
+                      supportClassName
+                    ),
+                    children: [
+                      supportLabel && /* @__PURE__ */ jsxRuntime.jsx("p", { children: supportLabel }),
+                      supportEmail && /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: `mailto:${supportEmail}`, children: supportEmail })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: cn(
+                    "grid w-full max-w-xs grid-cols-2 gap-10 text-sm font-light lg:text-base",
+                    navGridClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("space-y-1", navLinksClassName), children: navLinksContent }),
+                    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("space-y-4", socialLinksClassName), children: socialLinksContent })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mt-20 flex flex-col justify-between gap-15 lg:flex-row",
+              newsletterSectionClassName
+            ),
+            children: [
+              formConfig?.token && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full max-w-md flex-col gap-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 text-sm font-light tracking-tight lg:text-base", children: [
+                newsletterLabel && /* @__PURE__ */ jsxRuntime.jsx("p", { children: newsletterLabel }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  forms.Form,
+                  {
+                    form,
+                    action: formConfig?.endpoint,
+                    method: formMethod,
+                    className: cn(
+                      "flex w-full items-end border-b border-b-foreground/10",
+                      newsletterFormClassName
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", className: "flex-1", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsx(
+                        TextInput,
+                        {
+                          ...field,
+                          type: "email",
+                          placeholder: newsletterPlaceholder,
+                          error: meta.touched && !!meta.error,
+                          className: cn(
+                            "mt-10 h-auto w-full rounded-none border-0 bg-transparent p-0 uppercase shadow-none placeholder:text-foreground/20 focus:outline-none focus:ring-0 lg:text-base",
+                            newsletterInputClassName
+                          ),
+                          "aria-label": newsletterPlaceholder || "Email address"
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        Pressable,
+                        {
+                          componentType: "button",
+                          type: "submit",
+                          className: cn(
+                            "p-2 hover:opacity-80",
+                            newsletterButtonClassName
+                          ),
+                          asButton: false,
+                          disabled: form.isSubmitting,
+                          children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20 })
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: cn(
+                    "grid w-full max-w-xs grid-cols-2 gap-10 text-sm font-light lg:text-base",
+                    bottomGridClassName
+                  ),
+                  children: [
+                    location && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-32", locationClassName), children: location }),
+                    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("space-y-1", footerLinksClassName), children: footerLinksContent })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
         brandText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-20 w-full lg:mt-32", brandSectionClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
           framerMotion.motion.div,
           {
@@ -24570,22 +24641,40 @@ function FooterNewsletterMinimal({
             viewport: { once: true },
             transition: { duration: 0.6 },
             className: "text-center",
-            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-6xl font-bold tracking-tighter md:text-8xl lg:text-9xl", brandTextClassName), children: brandText })
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "text-6xl font-bold tracking-tighter md:text-8xl lg:text-9xl",
+                  brandTextClassName
+                ),
+                children: brandText
+              }
+            )
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-8 text-center text-sm opacity-80", copyrightClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(FooterCopyright, { copyright }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            BrandAttribution,
-            {
-              internalBrandSlug: "open_site_ai",
-              optionIndex: 4,
-              variant: "div",
-              containerClassName: "mt-2",
-              linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mt-8 text-center text-sm opacity-80",
+              copyrightClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(FooterCopyright, { copyright }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                BrandAttribution,
+                {
+                  internalBrandSlug: "open_site_ai",
+                  optionIndex: 4,
+                  variant: "div",
+                  containerClassName: "mt-2",
+                  linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
+                }
+              )
+            ]
+          }
+        )
       ] })
     }
   );
@@ -26997,7 +27086,7 @@ function FeatureUtilityCardsGrid({
           href: learnMoreAction.href,
           onClick: learnMoreAction.onClick,
           className: cn(
-            "font-medium transition-opacity hover:opacity-80",
+            "font-medium transition-opacity hover:opacity-80 text-right",
             learnMoreAction.className
           ),
           "aria-label": learnMoreAction["aria-label"],
@@ -27052,7 +27141,7 @@ function FeatureUtilityCardsGrid({
       Card,
       {
         className: cn(
-          "overflow-hidden pt-0 transition-shadow duration-300 hover:shadow-lg",
+          "gap-0! py-0 shadow-sm overflow-hidden pt-0 transition-shadow duration-300 hover:shadow-lg",
           cardClassName,
           utility.className
         ),
@@ -27060,8 +27149,9 @@ function FeatureUtilityCardsGrid({
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: renderUtilityImage(utility) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5 md:p-6", children: [
             utility.title && (typeof utility.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "h3",
+              Pressable,
               {
+                href: utility.href,
                 className: cn(
                   "mb-2 text-lg font-semibold",
                   utility.titleClassName
@@ -27069,8 +27159,9 @@ function FeatureUtilityCardsGrid({
                 children: utility.title
               }
             ) : /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
+              Pressable,
               {
+                href: utility.href,
                 className: cn(
                   "mb-2 text-lg font-semibold",
                   utility.titleClassName
@@ -27121,7 +27212,7 @@ function FeatureUtilityCardsGrid({
             "div",
             {
               className: cn(
-                "flex items-center justify-between text-sm",
+                "flex items-center justify-between text-sm gap-4",
                 headerClassName
               ),
               children: [
@@ -27129,7 +27220,7 @@ function FeatureUtilityCardsGrid({
                   "div",
                   {
                     className: cn(
-                      "text-lg flex items-center gap-4",
+                      "text-lg flex items-center gap-4 leading-snug",
                       labelClassName
                     ),
                     children: [
@@ -27230,7 +27321,14 @@ function FeatureBentoUtilities({
           card.showSparkle && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/sparkles", size: 16 }),
           card.badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", children: card.badge })
         ] });
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 flex items-center gap-2 font-medium", children: titleContent });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Pressable,
+          {
+            href: card.href,
+            className: "pb-2 flex items-center gap-2 font-medium",
+            children: titleContent
+          }
+        );
       };
       if (hasImage) {
         return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cardClasses, children: [
@@ -27345,53 +27443,93 @@ function FeatureChecklistThreeColumn({
   patternOpacity,
   patternClassName
 }) {
-  const getCheckItemContent = React52.useCallback((item) => {
-    if (typeof item === "string") return item;
-    return item.content;
-  }, []);
-  const getCheckItemClassName = React52.useCallback((item) => {
-    if (typeof item === "string") return void 0;
-    return item.className;
-  }, []);
-  const renderChecklistColumn = React52.useCallback((items, slot, gapClass) => {
-    if (slot) return slot;
-    if (!items || items.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("flex flex-col", gapClass, checklistClassName), children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-start gap-3", getCheckItemClassName(item)), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check", size: 12, className: getAccentColor(background) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: getTextColor(background, "muted"), children: getCheckItemContent(item) })
-    ] }, index)) });
-  }, [checklistClassName, getCheckItemContent, getCheckItemClassName, background]);
-  const renderCardImage = React52.useCallback((card) => {
-    if (card.imageSlot) return card.imageSlot;
-    if (card.image) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
+  const getCheckItemContent = React52.useCallback(
+    (item) => {
+      if (typeof item === "string") return item;
+      return item.content;
+    },
+    []
+  );
+  const getCheckItemClassName = React52.useCallback(
+    (item) => {
+      if (typeof item === "string") return void 0;
+      return item.className;
+    },
+    []
+  );
+  const renderChecklistColumn = React52.useCallback(
+    (items, slot, gapClass) => {
+      if (slot) return slot;
+      if (!items || items.length === 0) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("flex flex-col", gapClass, checklistClassName), children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "li",
         {
-          src: card.image,
-          alt: card.imageAlt || (typeof card.title === "string" ? card.title : "Card image"),
-          className: cn("max-h-96 w-full rounded-t-lg object-cover sm:max-h-72 md:max-h-64", card.imageClassName),
-          loading: "lazy",
-          optixFlowConfig
+          className: cn(
+            "flex items-start gap-3",
+            getCheckItemClassName(item)
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsxRuntime.jsx(
+              DynamicIcon,
+              {
+                name: "lucide/check",
+                size: 12,
+                className: getAccentColor(background)
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: getTextColor(background, "muted"), children: getCheckItemContent(item) })
+          ]
+        },
+        index
+      )) });
+    },
+    [
+      checklistClassName,
+      getCheckItemContent,
+      getCheckItemClassName,
+      background
+    ]
+  );
+  const renderCardImage = React52.useCallback(
+    (card) => {
+      if (card.imageSlot) return card.imageSlot;
+      if (card.image) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: card.image,
+            alt: card.imageAlt || (typeof card.title === "string" ? card.title : "Card image"),
+            className: cn(
+              "max-h-96 w-full rounded-t-lg object-cover sm:max-h-72 md:max-h-64",
+              card.imageClassName
+            ),
+            loading: "lazy",
+            optixFlowConfig
+          }
+        );
+      }
+      return null;
+    },
+    [optixFlowConfig]
+  );
+  const renderCardLink = React52.useCallback(
+    (card) => {
+      if (card.linkSlot) return card.linkSlot;
+      if (!card.link) return null;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        Pressable,
+        {
+          href: card.link,
+          className: "flex items-center gap-2 px-5 py-4 font-medium transition-opacity hover:opacity-80 md:px-6",
+          children: [
+            card.linkLabel || "Read more",
+            /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
+          ]
         }
       );
-    }
-    return null;
-  }, [optixFlowConfig]);
-  const renderCardLink = React52.useCallback((card) => {
-    if (card.linkSlot) return card.linkSlot;
-    if (!card.link) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      Pressable,
-      {
-        href: card.link,
-        className: "flex items-center gap-2 px-5 py-4 font-medium transition-opacity hover:opacity-80 md:px-6",
-        children: [
-          card.linkLabel || "Read more",
-          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-        ]
-      }
-    );
-  }, []);
+    },
+    []
+  );
   const cardsContent = React52.useMemo(() => {
     if (cardsSlot) return cardsSlot;
     if (!cards || cards.length === 0) return null;
@@ -27399,7 +27537,7 @@ function FeatureChecklistThreeColumn({
       Card,
       {
         className: cn(
-          "overflow-hidden pt-0 transition-shadow duration-300 hover:shadow-lg",
+          "gap-0 rounded-xl border py-0 shadow-sm overflow-hidden pt-0 transition-shadow duration-300 hover:shadow-lg",
           cardClassName,
           card.className
         ),
@@ -27420,8 +27558,46 @@ function FeatureChecklistThreeColumn({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-5 py-5 md:px-6 md:py-6", children: [
-              card.title && (typeof card.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-2 text-lg font-semibold", card.titleClassName), children: card.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2 text-lg font-semibold", card.titleClassName), children: card.title })),
-              card.description && (typeof card.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm leading-relaxed", getTextColor(background, "muted"), card.descriptionClassName), children: card.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm leading-relaxed", getTextColor(background, "muted"), card.descriptionClassName), children: card.description }))
+              card.title && (typeof card.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h3",
+                {
+                  className: cn(
+                    "mb-2 text-lg font-semibold",
+                    card.titleClassName
+                  ),
+                  children: card.title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "mb-2 text-lg font-semibold",
+                    card.titleClassName
+                  ),
+                  children: card.title
+                }
+              )),
+              card.description && (typeof card.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-sm leading-relaxed",
+                    getTextColor(background, "muted"),
+                    card.descriptionClassName
+                  ),
+                  children: card.description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-sm leading-relaxed",
+                    getTextColor(background, "muted"),
+                    card.descriptionClassName
+                  ),
+                  children: card.description
+                }
+              ))
             ] }),
             card.checklistItems && card.checklistItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "border-t px-5 py-4 md:px-6", children: card.checklistItems.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
               "li",
@@ -27439,7 +27615,13 @@ function FeatureChecklistThreeColumn({
                       className: getAccentColor(background)
                     }
                   ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm", getTextColor(background, "muted")), children: getCheckItemContent(item) })
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: cn("text-sm", getTextColor(background, "muted")),
+                      children: getCheckItemContent(item)
+                    }
+                  )
                 ]
               },
               itemIndex
@@ -27450,7 +27632,16 @@ function FeatureChecklistThreeColumn({
       },
       index
     ));
-  }, [cardsSlot, cards, cardClassName, renderCardImage, renderCardLink, getCheckItemContent, getCheckItemClassName, background]);
+  }, [
+    cardsSlot,
+    cards,
+    cardClassName,
+    renderCardImage,
+    renderCardLink,
+    getCheckItemContent,
+    getCheckItemClassName,
+    background
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -27462,12 +27653,48 @@ function FeatureChecklistThreeColumn({
       className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-6 sm:grid-cols-2 sm:gap-8 lg:grid-cols-3 lg:gap-12", headerGridClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-2 text-2xl font-semibold text-balance sm:col-span-2 sm:text-3xl lg:col-span-1 lg:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2 text-2xl font-semibold text-balance sm:col-span-2 sm:text-3xl lg:col-span-1 lg:text-4xl", titleClassName), children: title })),
-          renderChecklistColumn(checklistColumn1, checklistColumn1Slot, "gap-4"),
-          renderChecklistColumn(checklistColumn2, checklistColumn2Slot, "gap-4")
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-10 grid gap-6 sm:mt-16 md:grid-cols-2 lg:grid-cols-3", cardsGridClassName), children: cardsContent })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "grid gap-4 md:gap-6 sm:grid-cols-2 sm:gap-8 lg:grid-cols-3 lg:gap-12",
+              headerGridClassName
+            ),
+            children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "mb-2 text-2xl font-semibold text-balance sm:col-span-2 sm:text-3xl lg:col-span-1 lg:text-4xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "mb-2 text-2xl font-semibold text-balance sm:col-span-2 sm:text-3xl lg:col-span-1 lg:text-4xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              )),
+              renderChecklistColumn(checklistColumn1, checklistColumn1Slot, "gap-4"),
+              renderChecklistColumn(checklistColumn2, checklistColumn2Slot, "gap-4")
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-10 grid gap-6 sm:mt-16 md:grid-cols-2 lg:grid-cols-3",
+              cardsGridClassName
+            ),
+            children: cardsContent
+          }
+        )
       ]
     }
   );
@@ -28211,7 +28438,7 @@ function FeatureCategoryImageCards({
             src: feature.imageSrc,
             alt: feature.imageAlt || "Feature image",
             className: cn(
-              "w-full rounded-xl object-cover",
+              "h-full w-full rounded-xl object-cover",
               feature.imageClassName
             ),
             loading: "lazy",
@@ -28229,12 +28456,17 @@ function FeatureCategoryImageCards({
     return features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       Card,
       {
-        className: cn("border-none", cardClassName, feature.className),
+        className: cn(
+          "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border pt-6 shadow-sm border-none",
+          cardClassName,
+          feature.className
+        ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "text-center", children: [
             feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              CardTitle,
+              Pressable,
               {
+                href: feature.href,
                 className: cn(
                   "text-lg font-semibold md:text-2xl",
                   feature.titleClassName
@@ -28242,8 +28474,9 @@ function FeatureCategoryImageCards({
                 children: feature.title
               }
             ) : /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
+              Pressable,
               {
+                href: feature.href,
                 className: cn(
                   "text-lg font-semibold md:text-2xl",
                   feature.titleClassName
@@ -28259,13 +28492,13 @@ function FeatureCategoryImageCards({
               }
             ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("md:text-lg", feature.categoryClassName), children: feature.category }))
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "px-7 pb-7", children: renderFeatureImage(feature) })
+          /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "px-7 pb-0", children: renderFeatureImage(feature) })
         ]
       },
       index
     ));
   }, [featuresSlot, features, cardClassName, renderFeatureImage]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
@@ -28275,7 +28508,7 @@ function FeatureCategoryImageCards({
       patternClassName,
       className,
       containerClassName,
-      children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 md:gap-16", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -28284,12 +28517,12 @@ function FeatureCategoryImageCards({
               headerClassName
             ),
             children: [
-              badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: badgeClassName, children: badge }),
+              badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", className: badgeClassName, children: badge }),
               title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "h2",
                 {
                   className: cn(
-                    "text-3xl font-semibold md:text-5xl",
+                    "text-3xl font-semibold md:text-5xl text-balance",
                     titleClassName
                   ),
                   children: title
@@ -28298,13 +28531,31 @@ function FeatureCategoryImageCards({
                 "div",
                 {
                   className: cn(
-                    "text-3xl font-semibold md:text-5xl",
+                    "text-3xl font-semibold md:text-5xl text-balance",
                     titleClassName
                   ),
                   children: title
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-2xl md:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("max-w-2xl md:text-lg", descriptionClassName), children: description }))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "max-w-2xl md:text-lg text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "max-w-2xl md:text-lg text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ))
             ]
           }
         ),
@@ -28312,13 +28563,13 @@ function FeatureCategoryImageCards({
           "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-7xl gap-7 md:grid-cols-2 lg:grid-cols-3",
               gridClassName
             ),
             children: featuresContent
           }
         )
-      ]
+      ] })
     }
   );
 }
@@ -44029,7 +44280,8 @@ function FooterNewsletterContact({
   copyright,
   className,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   optixFlowConfig,
@@ -44127,10 +44379,11 @@ function FooterNewsletterContact({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-10", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-x-16 gap-y-8 md:grid-cols-2 xl:grid-cols-4", children: [
-          formConfig?.token && (newsletterTitle || newsletterDescription || newsletterButtonText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+          formConfig?.token && (newsletterTitle || newsletterDescription || newsletterButtonText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 col-span-2 md:col-span-1", children: [
             newsletterTitle && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-3xl font-medium font-serif leading-none", children: newsletterTitle }),
             newsletterDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-light leading-normal", children: newsletterDescription }),
             /* @__PURE__ */ jsxRuntime.jsxs(
@@ -44169,7 +44422,7 @@ function FooterNewsletterContact({
             )
           ] }),
           linkSectionsContent,
-          (contactDetailsContent || socialLinksContent) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          (contactDetailsContent || socialLinksContent) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-2 md:col-span-1", children: [
             /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-6 text-sm font-medium uppercase leading-tight opacity-70", children: "Contact" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
               contactDetailsContent && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-3", children: contactDetailsContent }),
@@ -44179,13 +44432,7 @@ function FooterNewsletterContact({
         ] }),
         logo && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 md:gap-12", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "flex-1" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "basis-30 md:basis-40", children: /* @__PURE__ */ jsxRuntime.jsx(
-            FooterLogo,
-            {
-              logo,
-              optixFlowConfig
-            }
-          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "basis-30 md:basis-40", children: /* @__PURE__ */ jsxRuntime.jsx(FooterLogo, { logo, optixFlowConfig }) }),
           /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "flex-1" })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3 opacity-80 max-md:text-xs", children: [
@@ -44504,7 +44751,8 @@ function FooterAccordionSocial({
   onSuccess,
   onError,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -44558,6 +44806,7 @@ function FooterAccordionSocial({
       patternOpacity,
       patternClassName,
       className,
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-10", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-10 lg:grid-cols-2 lg:gap-20", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
@@ -44690,7 +44939,8 @@ function FooterInfoCardsAccordion({
   copyrightClassName,
   submenuLinksClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -44710,6 +44960,7 @@ function FooterInfoCardsAccordion({
       pattern,
       patternOpacity,
       className: cn(className),
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-12 lg:space-y-14", contentClassName), children: [
         footerDetails?.image?.src && (newsletterTitle || newsletterDescription || subscribeText) && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
@@ -44862,61 +45113,43 @@ function FooterInfoCardsAccordion({
               brandGridClassName
             ),
             children: [
-              (footerDetails?.logo || footerDetails?.description) && /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: cn(
-                    "space-y-5",
-                    brandColumnClassName
-                  ),
-                  children: [
-                    footerDetails?.logo && /* @__PURE__ */ jsxRuntime.jsx(
-                      FooterLogo,
-                      {
-                        logo: {
-                          ...footerDetails.logo,
-                          url: footerDetails.logoUrl || "/"
-                        },
-                        logoClassName: cn(
-                          "inline-block w-full max-w-64",
-                          logoClassName
-                        ),
-                        optixFlowConfig
-                      }
+              (footerDetails?.logo || footerDetails?.description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-5", brandColumnClassName), children: [
+                footerDetails?.logo && /* @__PURE__ */ jsxRuntime.jsx(
+                  FooterLogo,
+                  {
+                    logo: {
+                      ...footerDetails.logo,
+                      url: footerDetails.logoUrl || "/"
+                    },
+                    logoClassName: cn(
+                      "inline-block w-full max-w-64",
+                      logoClassName
                     ),
-                    footerDetails?.description && /* @__PURE__ */ jsxRuntime.jsx(
-                      "p",
-                      {
-                        className: cn(
-                          "max-w-md text-sm leading-relaxed text-muted-foreground",
-                          brandDescriptionClassName
-                        ),
-                        children: footerDetails.description
-                      }
-                    )
-                  ]
-                }
-              ),
-              footerLinks && footerLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(
-                    "space-y-6",
-                    accordionColumnClassName
-                  ),
-                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-3", children: footerLinks.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-sm font-semibold tracking-wide", children: section.title }),
-                    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2.5 text-sm text-muted-foreground", children: section.items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-                      Pressable,
-                      {
-                        href: item.link,
-                        className: "transition-colors hover:text-foreground",
-                        children: item.text
-                      }
-                    ) }, idx)) })
-                  ] }, section.id)) })
-                }
-              )
+                    optixFlowConfig
+                  }
+                ),
+                footerDetails?.description && /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "max-w-md text-sm leading-relaxed text-muted-foreground",
+                      brandDescriptionClassName
+                    ),
+                    children: footerDetails.description
+                  }
+                )
+              ] }),
+              footerLinks && footerLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-6", accordionColumnClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-8 grid-cols-2 md:grid-cols-3", children: footerLinks.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-sm font-semibold tracking-wide", children: section.title }),
+                /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2.5 text-sm text-muted-foreground", children: section.items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Pressable,
+                  {
+                    href: item.link,
+                    className: "transition-colors hover:text-foreground",
+                    children: item.text
+                  }
+                ) }, idx)) })
+              ] }, section.id)) }) })
             ]
           }
         ),
@@ -49402,11 +49635,11 @@ function HeroOverlayCtaGrid({
   backgroundAlt = "OpenSite AI coverage advisory hero background",
   backgroundSlot,
   background,
-  spacing,
+  spacing = "none",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-0 sm:px-0 lg:px-0 max-w-full relative z-10 h-screen w-screen flex justify-center items-center",
   headingClassName,
   descriptionClassName,
   optixFlowConfig
@@ -49414,7 +49647,7 @@ function HeroOverlayCtaGrid({
   const renderBadge = React52.useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badgeText) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-2 rounded-full border border-background/30 bg-background/15 px-6 py-2 text-sm font-semibold uppercase tracking-[0.2em]", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-2 rounded-full border border-primary bg-primary text-primary-foreground px-6 py-2 text-sm font-semibold uppercase tracking-[0.2em]", children: [
       badgeIcon ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon, size: 18 }) : null,
       badgeText
     ] });
@@ -49430,23 +49663,31 @@ function HeroOverlayCtaGrid({
   const renderCards = React52.useMemo(() => {
     if (cardsSlot) return cardsSlot;
     if (!cards || cards.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full max-w-6xl overflow-hidden rounded-3xl border border-border bg-background/95 shadow-2xl", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 divide-y divide-border md:grid-cols-3 md:divide-x md:divide-y-0", children: cards.map((card) => /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full max-w-6xl overflow-hidden rounded-3xl border border-border bg-white/95 shadow-2xl px-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 divide-y divide-border md:grid-cols-3 md:divide-x md:divide-y-0", children: cards.map((card) => /* @__PURE__ */ jsxRuntime.jsxs(
       Pressable,
       {
         href: card.href,
-        className: "group flex items-center gap-4 px-6 py-6 transition-colors hover:bg-primary/5",
+        className: "group flex items-center gap-4 px-6 py-6 transition-colors",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative flex h-12 w-12 flex-none items-center justify-center rounded-full transition-colors group-hover:text-primary-foreground", `${getAccentColor(background)}/10`, getAccentColor(background), `group-hover:${getAccentColor(background)}`), children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: card.icon, size: 22 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "relative flex h-12 w-12 flex-none items-center justify-center rounded-full bg-primary text-primary-foreground"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: card.icon, size: 22 })
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-semibold ", children: card.label }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: card.subtitle })
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-black"), children: card.subtitle })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             DynamicIcon,
             {
               name: "lucide/arrow-right",
               size: 18,
-              className: cn("ml-auto flex-none", getAccentColor(background))
+              className: cn("ml-auto flex-none text-muted")
             }
           )
         ]
@@ -49467,7 +49708,7 @@ function HeroOverlayCtaGrid({
           optixFlowConfig
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-r from-foreground/80 via-foreground/65 to-foreground/20" })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-r from-black/80 via-black/65 to-black/20" })
     ] });
   }, [backgroundSlot, backgroundImage, backgroundAlt, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -49478,7 +49719,7 @@ function HeroOverlayCtaGrid({
       pattern,
       patternOpacity,
       className: cn(
-        "relative flex min-h-dvh items-center justify-center overflow-hidden bg-background pb-20 pt-32 md:pt-36",
+        "relative flex h-full min-h-screen w-screen items-center justify-center overflow-hidden bg-black pb-0 pt-0 md:pt-0 px-6",
         className
       ),
       children: [
@@ -49494,14 +49735,14 @@ function HeroOverlayCtaGrid({
                   initial: { opacity: 0, y: 28 },
                   animate: { opacity: 1, y: 0 },
                   transition: { duration: 0.6, ease: "easeOut" },
-                  className: "mx-auto max-w-3xl text-center text-balance text-background",
+                  className: "mx-auto max-w-3xl text-center text-balance text-white px-0",
                   children: [
                     renderBadge,
                     heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                       "h1",
                       {
                         className: cn(
-                          "mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl",
+                          "mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl text-balance",
                           headingClassName
                         ),
                         children: heading
@@ -49510,7 +49751,7 @@ function HeroOverlayCtaGrid({
                       "h1",
                       {
                         className: cn(
-                          "mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl",
+                          "mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl text-balance",
                           headingClassName
                         ),
                         children: heading
@@ -49520,7 +49761,7 @@ function HeroOverlayCtaGrid({
                       "p",
                       {
                         className: cn(
-                          "mt-5 text-lg text-background/80 md:text-xl",
+                          "mt-5 text-lg md:text-xl text-balance",
                           descriptionClassName
                         ),
                         children: description
@@ -49529,7 +49770,7 @@ function HeroOverlayCtaGrid({
                       "div",
                       {
                         className: cn(
-                          "mt-5 text-lg text-background/80 md:text-xl",
+                          "mt-5 text-lg md:text-xl text-balance",
                           descriptionClassName
                         ),
                         children: description
@@ -49558,28 +49799,22 @@ function HeroSplitIconCards({
   cardItems,
   cardsSlot,
   background,
-  verticalSpacing,
   pattern,
   patternOpacity,
   className,
   contentClassName,
   headingClassName,
-  descriptionClassName
+  descriptionClassName,
+  verticalSpacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32"
 }) {
   const renderActions = React52.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!primaryCta && !secondaryCta) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-4", children: [
       primaryCta && /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: primaryCta.href, size: "lg", variant: "default", children: primaryCta.label }),
-      secondaryCta && /* @__PURE__ */ jsxRuntime.jsx(
-        Pressable,
-        {
-          href: secondaryCta.href,
-          size: "lg",
-          variant: "outline",
-          children: secondaryCta.label
-        }
-      )
+      secondaryCta && /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: secondaryCta.href, size: "lg", variant: "outline", children: secondaryCta.label })
     ] });
   }, [actionsSlot, primaryCta, secondaryCta]);
   const renderCards = React52.useMemo(() => {
@@ -49587,10 +49822,29 @@ function HeroSplitIconCards({
     if (!cardItems || cardItems.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4", children: cardItems.map((item, idx) => {
       const card = /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "h-full border-border/60 px-0 py-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4 p-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-14 w-14 items-center justify-center rounded-xl", `${getAccentColor(background)}/10`, getAccentColor(background)), children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 24 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex h-14 w-14 items-center justify-center rounded-xl",
+              `${getAccentColor(background)}/10`,
+              getAccentColor(background)
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 24 })
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold ", children: item.title }),
-          item.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2 text-sm", getTextColor(background, "muted")), children: item.subtitle }) : null
+          item.subtitle ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mt-2 text-sm",
+                getTextColor(background, "muted")
+              ),
+              children: item.subtitle
+            }
+          ) : null
         ] })
       ] }) });
       return item.href ? /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: item.href, className: "block", children: card }, idx) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: card }, idx);
@@ -49600,15 +49854,53 @@ function HeroSplitIconCards({
     Section,
     {
       background,
-      spacing: verticalSpacing,
+      spacing: verticalSpacing || spacing,
       pattern,
       patternOpacity,
       className: cn("overflow-hidden", className),
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-10 lg:grid-cols-2 lg:items-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-6", contentClassName), children: children ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xs font-semibold uppercase tracking-[0.25em]", getAccentColor(background)), children: eyebrow }) : eyebrow),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-xs font-semibold uppercase tracking-[0.25em]",
+                getAccentColor(background)
+              ),
+              children: eyebrow
+            }
+          ) : eyebrow),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-3xl font-bold md:text-4xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-3xl font-bold md:text-4xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          )),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-lg",
+                getTextColor(background, "muted"),
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }) }),
         renderCards
@@ -50396,14 +50688,13 @@ function HeroPatternBadgeLogos({
   actionsSlot,
   logos,
   logosSlot,
-  logosTagline = "Powering the next generation of digital products",
-  backgroundImageUrl = "https://cdn.ing/assets/files/record/286186/nbdflpgp4ostrno079hygibsflp3",
+  logosTagline,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -50417,7 +50708,14 @@ function HeroPatternBadgeLogos({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -50474,7 +50772,7 @@ function HeroPatternBadgeLogos({
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: logoClassName, children: imgElement }, index);
     });
   }, [logosSlot, logos, optixFlowConfig]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
@@ -50482,31 +50780,61 @@ function HeroPatternBadgeLogos({
       pattern,
       patternOpacity,
       className: cn("relative p-0", className),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "absolute h-full w-full bg-contain bg-repeat opacity-100 lg:block",
-              "mask-[linear-gradient(to_right,var(--color-border),transparent,transparent,var(--color-border))]",
-              backgroundClassName
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "z-10 mx-auto flex max-w-5xl flex-col items-center gap-6 text-center",
+            contentClassName
+          ),
+          children: [
+            badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", children: badge }) : badge }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "mb-6 text-4xl font-bold tracking-tight text-balance md:text-5xl lg:text-7xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "mx-auto max-w-2xl md:text-lg lg:text-xl text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+            ] }),
+            (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn("mt-6 flex items-center gap-4", actionsClassName),
+                children: renderActions
+              }
             ),
-            style: { backgroundImage: `url('${backgroundImageUrl}')` }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container py-28 md:py-32", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("z-10 mx-auto flex max-w-5xl flex-col items-center gap-6 text-center", contentClassName), children: [
-          badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "transition-colors hover:bg-secondary/20", children: badge }) : badge }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-6 text-4xl font-bold tracking-tight text-pretty md:text-5xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-2xl md:text-lg lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-          ] }),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6 flex items-center gap-4", actionsClassName), children: renderActions }),
-          (logosSlot || logos && logos.length > 0 || logosTagline) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-12 flex flex-col items-center gap-4 lg:mt-16", logosClassName), children: [
-            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-sm", getTextColor(background, "muted")), children: logosTagline }) : logosTagline),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4", children: renderLogos })
-          ] })
-        ] }) }) })
-      ]
+            (logosSlot || logos && logos.length > 0 || logosTagline) && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "mt-12 flex flex-col items-center gap-4 lg:mt-16",
+                  logosClassName
+                ),
+                children: [
+                  logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-sm"), children: logosTagline }) : logosTagline),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4", children: renderLogos })
+                ]
+              }
+            )
+          ]
+        }
+      ) }) })
     }
   );
 }
@@ -50520,11 +50848,11 @@ function HeroLogoCenteredScreenshot({
   image,
   imageSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -50540,7 +50868,7 @@ function HeroLogoCenteredScreenshot({
       {
         src: logoSrc,
         alt: logo.alt,
-        className: cn("h-10 md:h-16", logo.className),
+        className: cn("h-10 md:h-16 object-contain", logo.className),
         optixFlowConfig
       }
     );
@@ -50548,7 +50876,14 @@ function HeroLogoCenteredScreenshot({
   const renderAction = React52.useMemo(() => {
     if (actionSlot) return actionSlot;
     if (!action) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = action;
     return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       icon,
       label,
@@ -50563,7 +50898,11 @@ function HeroLogoCenteredScreenshot({
       {
         src: image.src,
         alt: image.alt,
-        className: cn("mt-20 aspect-video w-full rounded-t-lg object-cover", imageClassName, image.className),
+        className: cn(
+          "mt-20 w-full rounded-xl object-cover h-auto shadow-xl",
+          imageClassName,
+          image.className
+        ),
         optixFlowConfig
       }
     );
@@ -50576,15 +50915,51 @@ function HeroLogoCenteredScreenshot({
       pattern,
       patternOpacity,
       className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container max-w-7xl", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("z-10 flex flex-col items-center gap-6 text-center", contentClassName), children: [
-          renderLogo,
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-4 text-3xl font-medium text-pretty lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-4 text-3xl font-medium text-pretty lg:text-5xl", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-3xl lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-          ] }),
-          renderAction
-        ] }) }),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container max-w-7xl", containerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "z-10 flex flex-col items-center gap-6 text-center",
+              contentClassName
+            ),
+            children: [
+              renderLogo,
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center items-center w-full text-balance", children: [
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mb-4 text-3xl font-medium lg:text-5xl",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mb-4 text-3xl font-medium lg:text-5xl",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                )),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "max-w-3xl lg:text-xl",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+              ] }),
+              renderAction
+            ]
+          }
+        ) }),
         renderImage
       ] }) })
     }