@opensite/ui 1.4.4 → 1.4.5

package/dist/registry.js

@@ -23641,7 +23641,8 @@ function FooterContactCard({
   copyrightClassName,
   locationClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -23654,6 +23655,7 @@ function FooterContactCard({
       pattern,
       patternOpacity,
       className: cn(className),
+      containerClassName,
       children: /* @__PURE__ */ jsx("div", { className: cn(contentClassName), children: /* @__PURE__ */ jsxs("footer", { children: [
         /* @__PURE__ */ jsxs("div", { className: cn("grid gap-12 lg:grid-cols-2", gridClassName), children: [
           /* @__PURE__ */ jsxs("div", { className: cn(leftColumnClassName), children: [
@@ -23666,7 +23668,16 @@ function FooterContactCard({
                 optixFlowConfig
               }
             ),
-            heading && /* @__PURE__ */ jsx("h2", { className: cn("mb-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }),
+            heading && /* @__PURE__ */ jsx(
+              "h2",
+              {
+                className: cn(
+                  "mb-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ),
             (email || phone || address) && /* @__PURE__ */ jsxs("div", { className: cn("space-y-4 opacity-80", contactClassName), children: [
               email && /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(
                 Pressable,
@@ -23687,51 +23698,90 @@ function FooterContactCard({
               address && /* @__PURE__ */ jsx("p", { children: address })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col justify-between", rightColumnClassName), children: [
-            (socialTitle || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsxs("div", { className: cn(socialSectionClassName), children: [
-              socialTitle && /* @__PURE__ */ jsx("p", { className: cn("mb-4 font-medium", socialTitleClassName), children: socialTitle }),
-              socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsx("ul", { className: cn("flex items-center gap-4", socialLinksClassName), children: socialLinks.map((social, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-                SocialLinkIcon,
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex flex-col justify-between",
+                rightColumnClassName
+              ),
+              children: [
+                (socialTitle || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsxs("div", { className: cn(socialSectionClassName), children: [
+                  socialTitle && /* @__PURE__ */ jsx("p", { className: cn("mb-4 font-medium", socialTitleClassName), children: socialTitle }),
+                  socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsx(
+                    "ul",
+                    {
+                      className: cn(
+                        "flex items-center gap-4",
+                        socialLinksClassName
+                      ),
+                      children: socialLinks.map((social, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                        SocialLinkIcon,
+                        {
+                          href: social.href,
+                          label: social.label,
+                          iconNameOverride: social.iconNameOverride,
+                          className: cn(
+                            "flex size-12 items-center justify-center rounded-full border transition-colors hover:opacity-80",
+                            socialLinkClassName
+                          )
+                        }
+                      ) }, idx))
+                    }
+                  )
+                ] }),
+                navLinks && navLinks.length > 0 && /* @__PURE__ */ jsx("nav", { className: cn("mt-18 md:mt-8", navClassName), children: /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-6", children: navLinks.map((link, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    href: link.href,
+                    className: cn(
+                      "opacity-80 hover:opacity-100",
+                      navLinkClassName
+                    ),
+                    children: link.name
+                  }
+                ) }, idx)) }) })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mt-16 flex flex-col justify-between gap-4 border-t pt-8 text-sm opacity-80 md:flex-row md:items-center",
+              bottomClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  href: social.href,
-                  label: social.label,
-                  iconNameOverride: social.iconNameOverride,
                   className: cn(
-                    "flex size-12 items-center justify-center rounded-full border transition-colors hover:opacity-80",
-                    socialLinkClassName
-                  )
+                    "flex flex-col gap-2 md:flex-row md:items-center md:gap-4",
+                    copyrightClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(FooterCopyright, { copyright }),
+                    /* @__PURE__ */ jsx(
+                      BrandAttribution,
+                      {
+                        internalBrandSlug: "open_site_ai",
+                        optionIndex: 7,
+                        variant: "span",
+                        linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
+                      }
+                    )
+                  ]
                 }
-              ) }, idx)) })
-            ] }),
-            navLinks && navLinks.length > 0 && /* @__PURE__ */ jsx("nav", { className: cn("mt-8", navClassName), children: /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-6", children: navLinks.map((link, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-              Pressable,
-              {
-                href: link.href,
-                className: cn("opacity-80 hover:opacity-100", navLinkClassName),
-                children: link.name
-              }
-            ) }, idx)) }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn("mt-16 flex flex-col justify-between gap-4 border-t pt-8 text-sm opacity-80 md:flex-row md:items-center", bottomClassName), children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2 md:flex-row md:items-center md:gap-4", copyrightClassName), children: [
-            /* @__PURE__ */ jsx(FooterCopyright, { copyright }),
-            /* @__PURE__ */ jsx(
-              BrandAttribution,
-              {
-                internalBrandSlug: "open_site_ai",
-                optionIndex: 7,
-                variant: "span",
-                linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
-              }
-            )
-          ] }),
-          (locationLabel || location) && /* @__PURE__ */ jsxs("p", { className: cn(locationClassName), children: [
-            locationLabel,
-            " ",
-            location && /* @__PURE__ */ jsx("strong", { children: location })
-          ] })
-        ] })
+              ),
+              (locationLabel || location) && /* @__PURE__ */ jsxs("p", { className: cn(locationClassName), children: [
+                locationLabel,
+                " ",
+                location && /* @__PURE__ */ jsx("strong", { children: location })
+              ] })
+            ]
+          }
+        )
       ] }) })
     }
   );
@@ -23900,7 +23950,8 @@ function FooterAnimatedSocial({
   separatorClassName,
   copyrightClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity
 }) {
@@ -23923,7 +23974,10 @@ function FooterAnimatedSocial({
             label: link.label,
             iconNameOverride: link.iconNameOverride,
             iconSize: 24,
-            className: cn("group flex items-center gap-2 py-2 transition-colors hover:opacity-70", socialLinkClassName)
+            className: cn(
+              "group flex items-center gap-2 py-2 transition-colors hover:opacity-70",
+              socialLinkClassName
+            )
           }
         )
       },
@@ -23938,6 +23992,7 @@ function FooterAnimatedSocial({
       pattern,
       patternOpacity,
       className: cn(className),
+      containerClassName,
       children: /* @__PURE__ */ jsx("div", { className: cn(contentClassName), children: /* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsxs(
           motion.div,
@@ -23946,23 +24001,56 @@ function FooterAnimatedSocial({
             initial: "hidden",
             whileInView: "visible",
             viewport: { once: true },
-            className: cn("flex flex-col justify-between md:flex-row md:items-center", layoutClassName),
+            className: cn(
+              "flex flex-col justify-between md:flex-row md:items-center",
+              layoutClassName
+            ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: cn("space-y-8", leftColumnClassName), children: [
                 /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "space-y-6", children: [
-                  /* @__PURE__ */ jsx("h2", { className: cn("text-4xl leading-tight font-bold lg:text-5xl", headingClassName), children: heading }),
-                  /* @__PURE__ */ jsx("p", { className: cn("max-w-md text-lg leading-relaxed opacity-80", descriptionClassName), children: description })
+                  /* @__PURE__ */ jsx(
+                    "h2",
+                    {
+                      className: cn(
+                        "text-4xl leading-tight font-bold lg:text-5xl",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "max-w-md text-lg leading-relaxed opacity-80",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  )
                 ] }),
                 ctaUrl && ctaText && /* @__PURE__ */ jsx(motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsx(
                   Pressable,
                   {
                     href: ctaUrl,
-                    className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border h-11 px-8 hover:opacity-80", ctaClassName),
+                    className: cn(
+                      "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border h-11 px-8 hover:opacity-80",
+                      ctaClassName
+                    ),
                     children: ctaText
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsx("div", { className: cn("mt-5 space-y-8 md:mt-0", rightColumnClassName), children: /* @__PURE__ */ jsx(motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsx("div", { className: cn("space-y-6", socialLinksClassName), children: socialLinksContent }) }) })
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-row md:flex-col flex-wrap items-center justify-center gap-4 md:gap-2",
+                    rightColumnClassName
+                  ),
+                  children: /* @__PURE__ */ jsx(motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsx("div", { className: cn("flex flex-row md:flex-col items-center gap-4 md:gap-6", socialLinksClassName), children: socialLinksContent }) })
+                }
+              )
             ]
           }
         ),
@@ -23975,14 +24063,32 @@ function FooterAnimatedSocial({
             viewport: { once: true },
             className: cn("mt-16", bottomClassName),
             children: [
-              /* @__PURE__ */ jsx(motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsx("div", { className: cn("mb-8 h-px w-full opacity-20", separatorClassName), style: { backgroundColor: "currentColor" } }) }),
+              /* @__PURE__ */ jsx(motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "mb-8 h-px w-full opacity-20",
+                    separatorClassName
+                  ),
+                  style: { backgroundColor: "currentColor" }
+                }
+              ) }),
               /* @__PURE__ */ jsxs(
                 motion.div,
                 {
                   variants: itemVariants,
-                  className: cn("flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center", copyrightClassName),
+                  className: cn(
+                    "flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center",
+                    copyrightClassName
+                  ),
                   children: [
-                    /* @__PURE__ */ jsx(FooterCopyright, { copyright, className: "text-sm opacity-70" }),
+                    /* @__PURE__ */ jsx(
+                      FooterCopyright,
+                      {
+                        copyright,
+                        className: "text-sm opacity-70"
+                      }
+                    ),
                     /* @__PURE__ */ jsx("div", { className: "flex items-center gap-6 text-sm opacity-70", children: /* @__PURE__ */ jsx(
                       BrandAttribution,
                       {
@@ -26523,8 +26629,7 @@ function FeatureUtilityCardsGrid({
           href: learnMoreAction.href,
           onClick: learnMoreAction.onClick,
           className: cn(
-            "hover:underline",
-            `hover:${getAccentColor(background)}`,
+            "font-medium transition-opacity hover:opacity-80",
             learnMoreAction.className
           ),
           "aria-label": learnMoreAction["aria-label"],
@@ -26537,7 +26642,10 @@ function FeatureUtilityCardsGrid({
       {
         href: learnMoreAction.href,
         onClick: learnMoreAction.onClick,
-        className: cn(learnMoreAction.className),
+        className: cn(
+          "flex items-center gap-1 font-medium transition-opacity hover:opacity-80",
+          learnMoreAction.className
+        ),
         "aria-label": learnMoreAction["aria-label"],
         children: [
           learnMoreAction.icon,
@@ -26575,18 +26683,60 @@ function FeatureUtilityCardsGrid({
     return utilities.map((utility, index) => /* @__PURE__ */ jsxs(
       Card,
       {
-        className: cn("overflow-hidden pt-0", cardClassName, utility.className),
+        className: cn(
+          "overflow-hidden pt-0 transition-shadow duration-300 hover:shadow-lg",
+          cardClassName,
+          utility.className
+        ),
         children: [
-          renderUtilityImage(utility),
-          /* @__PURE__ */ jsxs("div", { className: "p-5", children: [
-            utility.title && (typeof utility.title === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-1 font-medium", utility.titleClassName), children: utility.title }) : /* @__PURE__ */ jsx("div", { className: cn("mb-1 font-medium", utility.titleClassName), children: utility.title })),
-            utility.description && (typeof utility.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("", utility.descriptionClassName), children: utility.description }) : /* @__PURE__ */ jsx("div", { className: cn("", utility.descriptionClassName), children: utility.description }))
+          /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: renderUtilityImage(utility) }),
+          /* @__PURE__ */ jsxs("div", { className: "p-5 md:p-6", children: [
+            utility.title && (typeof utility.title === "string" ? /* @__PURE__ */ jsx(
+              "h3",
+              {
+                className: cn(
+                  "mb-2 text-lg font-semibold",
+                  utility.titleClassName
+                ),
+                children: utility.title
+              }
+            ) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "mb-2 text-lg font-semibold",
+                  utility.titleClassName
+                ),
+                children: utility.title
+              }
+            )),
+            utility.description && (typeof utility.description === "string" ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "text-sm leading-relaxed",
+                  getTextColor(background, "muted"),
+                  utility.descriptionClassName
+                ),
+                children: utility.description
+              }
+            ) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "text-sm leading-relaxed",
+                  getTextColor(background, "muted"),
+                  utility.descriptionClassName
+                ),
+                children: utility.description
+              }
+            ))
           ] })
         ]
       },
       index
     ));
-  }, [utilitiesSlot, utilities, cardClassName, renderUtilityImage]);
+  }, [utilitiesSlot, utilities, cardClassName, renderUtilityImage, background]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -26681,57 +26831,63 @@ function FeatureBentoUtilities({
   patternOpacity,
   patternClassName
 }) {
-  const renderCard = React52.useCallback((card, index) => {
-    const hasImage = card.imageSrc || card.imageSlot;
-    const cardClasses = cn(
-      hasImage ? "overflow-hidden pt-0" : "p-6",
-      card.isDashed && "border-dashed bg-transparent shadow-none",
-      card.className
-    );
-    const renderImage = () => {
-      if (card.imageSlot) return card.imageSlot;
-      if (card.imageSrc) {
-        return /* @__PURE__ */ jsx(
-          Img,
-          {
-            src: card.imageSrc,
-            alt: card.imageAlt || "",
-            className: "aspect-video w-full object-cover",
-            loading: "lazy",
-            optixFlowConfig
-          }
-        );
+  const renderCard = React52.useCallback(
+    (card, index) => {
+      const hasImage = card.imageSrc || card.imageSlot;
+      const cardClasses = cn(
+        hasImage ? "overflow-hidden pt-0" : "p-6",
+        card.isDashed && "border-dashed bg-transparent shadow-none",
+        card.className
+      );
+      const renderImage = () => {
+        if (card.imageSlot) return card.imageSlot;
+        if (card.imageSrc) {
+          return /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: card.imageSrc,
+              alt: card.imageAlt || "",
+              className: "aspect-video w-full object-cover",
+              loading: "lazy",
+              optixFlowConfig
+            }
+          );
+        }
+        return null;
+      };
+      const renderTitle = () => {
+        if (!card.title) return null;
+        const titleContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          card.title,
+          card.showSparkle && /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/sparkles", size: 16 }),
+          card.badge && /* @__PURE__ */ jsx(Badge, { variant: "outline", children: card.badge })
+        ] });
+        return /* @__PURE__ */ jsx("div", { className: "mb-1 flex items-center gap-2 font-medium", children: titleContent });
+      };
+      if (hasImage) {
+        return /* @__PURE__ */ jsxs(Card, { className: cardClasses, children: [
+          renderImage(),
+          /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
+            renderTitle(),
+            card.description && /* @__PURE__ */ jsx("p", { children: card.description })
+          ] })
+        ] }, index);
       }
-      return null;
-    };
-    const renderTitle = () => {
-      if (!card.title) return null;
-      const titleContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        card.title,
-        card.showSparkle && /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/sparkles", size: 16 }),
-        card.badge && /* @__PURE__ */ jsx(Badge, { variant: "outline", children: card.badge })
-      ] });
-      return /* @__PURE__ */ jsx("div", { className: "mb-1 flex items-center gap-2 font-medium", children: titleContent });
-    };
-    if (hasImage) {
       return /* @__PURE__ */ jsxs(Card, { className: cardClasses, children: [
-        renderImage(),
-        /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
-          renderTitle(),
-          card.description && /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: card.description })
-        ] })
+        renderTitle(),
+        card.description && /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: card.description })
       ] }, index);
-    }
-    return /* @__PURE__ */ jsxs(Card, { className: cardClasses, children: [
-      renderTitle(),
-      card.description && /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: card.description })
-    ] }, index);
-  }, [optixFlowConfig]);
-  const renderColumn = React52.useCallback((cards, slot) => {
-    if (slot) return slot;
-    if (!cards || cards.length === 0) return null;
-    return cards.map((card, index) => renderCard(card, index));
-  }, [renderCard]);
+    },
+    [optixFlowConfig]
+  );
+  const renderColumn = React52.useCallback(
+    (cards, slot) => {
+      if (slot) return slot;
+      if (!cards || cards.length === 0) return null;
+      return cards.map((card, index) => renderCard(card, index));
+    },
+    [renderCard]
+  );
   const labelIconElement = useMemo(() => {
     if (labelIcon) return labelIcon;
     if (labelIconName) return /* @__PURE__ */ jsx(DynamicIcon, { name: labelIconName, size: 20 });
@@ -26745,22 +26901,56 @@ function FeatureBentoUtilities({
       pattern,
       patternOpacity,
       patternClassName,
-      className: cn(getNestedCardBg(background, "muted"), className),
+      className,
       containerClassName: cn("max-w-7xl", containerClassName),
       children: [
-        (labelIconElement || label) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", getTextColor(background, "muted"), labelClassName), children: [
-          labelIconElement,
-          label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: label }) : /* @__PURE__ */ jsx("div", { className: "text-sm", children: label }))
-        ] }),
+        (labelIconElement || label) && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-2",
+              getTextColor(background, "muted"),
+              labelClassName
+            ),
+            children: [
+              labelIconElement,
+              label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: label }) : /* @__PURE__ */ jsx("div", { className: "text-sm", children: label }))
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(Separator, { className: "mt-3 mb-8" }),
-        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col justify-between gap-6 md:flex-row", headerClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-medium md:w-1/2", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-medium md:w-1/2", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("md:w-1/2", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("md:w-1/2", descriptionClassName), children: description }))
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn("mt-11 flex flex-col gap-6 md:flex-row", gridClassName), children: [
-          /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col gap-6", columnClassName), children: renderColumn(leftColumnCards, leftColumnSlot) }),
-          /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col gap-6", columnClassName), children: renderColumn(rightColumnCards, rightColumnSlot) })
-        ] })
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col justify-between gap-6 md:flex-row",
+              headerClassName
+            ),
+            children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-medium md:w-1/2", titleClassName), children: title }) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn("text-3xl font-medium md:w-1/2", titleClassName),
+                  children: title
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("md:w-1/2", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("md:w-1/2", descriptionClassName), children: description }))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mt-11 grid grid-cols-1 gap-6 md:grid-cols-2",
+              gridClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-6", columnClassName), children: renderColumn(leftColumnCards, leftColumnSlot) }),
+              /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-6", columnClassName), children: renderColumn(rightColumnCards, rightColumnSlot) })
+            ]
+          }
+        )
       ]
     }
   );
@@ -26798,11 +26988,11 @@ function FeatureChecklistThreeColumn({
   const renderChecklistColumn = useCallback((items, slot, gapClass) => {
     if (slot) return slot;
     if (!items || items.length === 0) return null;
-    return /* @__PURE__ */ jsx("ul", { className: cn("flex flex-col", getTextColor(background, "muted"), gapClass, checklistClassName), children: items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: cn("flex items-center gap-2", getCheckItemClassName(item)), children: [
-      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check", size: 16, className: getAccentColor(background) }),
-      getCheckItemContent(item)
+    return /* @__PURE__ */ jsx("ul", { className: cn("flex flex-col", gapClass, checklistClassName), children: items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: cn("flex items-start gap-3", getCheckItemClassName(item)), children: [
+      /* @__PURE__ */ jsx("span", { className: "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check", size: 12, className: getAccentColor(background) }) }),
+      /* @__PURE__ */ jsx("span", { className: getTextColor(background, "muted"), children: getCheckItemContent(item) })
     ] }, index)) });
-  }, [checklistClassName, getCheckItemContent, getCheckItemClassName]);
+  }, [checklistClassName, getCheckItemContent, getCheckItemClassName, background]);
   const renderCardImage = useCallback((card) => {
     if (card.imageSlot) return card.imageSlot;
     if (card.image) {
@@ -26826,10 +27016,10 @@ function FeatureChecklistThreeColumn({
       Pressable,
       {
         href: card.link,
-        className: "my-3 flex items-center gap-2 px-4 font-medium sm:my-4 sm:px-5 md:px-6",
+        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__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16, className: "mt-0.5" })
+          /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
         ]
       }
     );
@@ -26837,43 +27027,62 @@ function FeatureChecklistThreeColumn({
   const cardsContent = useMemo(() => {
     if (cardsSlot) return cardsSlot;
     if (!cards || cards.length === 0) return null;
-    return cards.map((card, index) => /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border", cardClassName, card.className), children: [
-      /* @__PURE__ */ jsxs("div", { className: "relative p-1", children: [
-        renderCardImage(card),
-        card.badge && /* @__PURE__ */ jsx(
-          Badge,
-          {
-            variant: "outline",
-            className: cn("absolute top-5 left-5 bg-background", card.badgeClassName),
-            children: card.badge
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsxs("div", { className: "mb-3 px-4 pt-5 sm:px-5 md:px-6 md:pt-6", children: [
-          card.title && (typeof card.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("font-medium", card.titleClassName), children: card.title }) : /* @__PURE__ */ jsx("div", { className: cn("font-medium", card.titleClassName), children: card.title })),
-          card.description && (typeof card.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn(getTextColor(background, "muted"), card.descriptionClassName), children: card.description }) : /* @__PURE__ */ jsx("div", { className: cn(getTextColor(background, "muted"), card.descriptionClassName), children: card.description }))
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "h-px border-t border-dashed" }),
-        /* @__PURE__ */ jsx("ul", { className: getTextColor(background, "muted"), children: card.checklistItems?.map((item, itemIndex) => /* @__PURE__ */ jsxs(React52.Fragment, { children: [
-          /* @__PURE__ */ jsxs("li", { className: cn("flex items-start gap-2 px-4 py-3 sm:px-5 md:px-6", getCheckItemClassName(item)), children: [
-            /* @__PURE__ */ jsx(
-              DynamicIcon,
+    return cards.map((card, index) => /* @__PURE__ */ jsxs(
+      Card,
+      {
+        className: cn(
+          "overflow-hidden pt-0 transition-shadow duration-300 hover:shadow-lg",
+          cardClassName,
+          card.className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            renderCardImage(card),
+            card.badge && /* @__PURE__ */ jsx(
+              Badge,
               {
-                name: "lucide/check",
-                size: 16,
-                className: cn("mt-1 shrink-0", getAccentColor(background))
+                variant: "outline",
+                className: cn(
+                  "absolute top-4 left-4 bg-background/90 backdrop-blur-sm",
+                  card.badgeClassName
+                ),
+                children: card.badge
               }
-            ),
-            getCheckItemContent(item)
+            )
           ] }),
-          card.checklistItems && itemIndex < card.checklistItems.length - 1 && /* @__PURE__ */ jsx("div", { className: "h-px border-t border-dashed" })
-        ] }, itemIndex)) }),
-        /* @__PURE__ */ jsx("div", { className: "h-px border-t border-dashed" }),
-        renderCardLink(card)
-      ] })
-    ] }, index));
-  }, [cardsSlot, cards, cardClassName, renderCardImage, renderCardLink, getCheckItemContent, getCheckItemClassName]);
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsxs("div", { className: "px-5 py-5 md:px-6 md:py-6", children: [
+              card.title && (typeof card.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-2 text-lg font-semibold", card.titleClassName), children: card.title }) : /* @__PURE__ */ jsx("div", { className: cn("mb-2 text-lg font-semibold", card.titleClassName), children: card.title })),
+              card.description && (typeof card.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm leading-relaxed", getTextColor(background, "muted"), card.descriptionClassName), children: card.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm leading-relaxed", getTextColor(background, "muted"), card.descriptionClassName), children: card.description }))
+            ] }),
+            card.checklistItems && card.checklistItems.length > 0 && /* @__PURE__ */ jsx("ul", { className: "border-t px-5 py-4 md:px-6", children: card.checklistItems.map((item, itemIndex) => /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: cn(
+                  "flex items-start gap-3 py-2",
+                  getCheckItemClassName(item)
+                ),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(
+                    DynamicIcon,
+                    {
+                      name: "lucide/check",
+                      size: 12,
+                      className: getAccentColor(background)
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("span", { className: cn("text-sm", getTextColor(background, "muted")), children: getCheckItemContent(item) })
+                ]
+              },
+              itemIndex
+            )) }),
+            card.link && /* @__PURE__ */ jsx("div", { className: "border-t", children: renderCardLink(card) })
+          ] })
+        ]
+      },
+      index
+    ));
+  }, [cardsSlot, cards, cardClassName, renderCardImage, renderCardLink, getCheckItemContent, getCheckItemClassName, background]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -26885,9 +27094,9 @@ function FeatureChecklistThreeColumn({
       className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("grid gap-4 sm:grid-cols-2 sm:gap-8 md:gap-12 lg:grid-cols-3 lg:gap-16", headerGridClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-medium sm:col-span-2 sm:text-4xl md:mb-0 lg:col-span-1", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4 text-3xl font-medium sm:col-span-2 sm:text-4xl md:mb-0 lg:col-span-1", titleClassName), children: title })),
-          renderChecklistColumn(checklistColumn1, checklistColumn1Slot, "gap-3 sm:gap-4"),
+        /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("div", { className: cn("mt-10 grid gap-6 sm:mt-16 md:grid-cols-2 lg:grid-cols-3", cardsGridClassName), children: cardsContent })
@@ -26931,11 +27140,22 @@ function FeatureIntegrationCards({
   const renderLinkLabel = useCallback((integration) => {
     if (integration.linkLabelSlot) return integration.linkLabelSlot;
     if (!integration.linkLabel) return null;
-    return /* @__PURE__ */ jsxs("span", { className: cn("flex items-center gap-1 rounded-full border px-3 py-2.5 text-sm", integration.linkLabelClassName), children: [
-      integration.linkLabel,
-      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-    ] });
-  }, []);
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "flex items-center gap-1.5 rounded-full border px-3 py-2 text-sm font-medium transition-colors",
+          getBorderColor(background),
+          getAccentColor(background),
+          integration.linkLabelClassName
+        ),
+        children: [
+          integration.linkLabel,
+          /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 14 })
+        ]
+      }
+    );
+  }, [background]);
   const integrationsContent = useMemo(() => {
     if (integrationsSlot) return integrationsSlot;
     if (!integrations || integrations.length === 0) return null;
@@ -26944,35 +27164,84 @@ function FeatureIntegrationCards({
       const linkLabelContent = renderLinkLabel(integration);
       const cardContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          iconContent && /* @__PURE__ */ jsx("span", { className: "grid size-12 shrink-0 place-content-center rounded-md border", children: iconContent }),
+          iconContent && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "grid size-12 shrink-0 place-content-center rounded-lg border bg-background/50",
+                getBorderColor(background)
+              ),
+              children: iconContent
+            }
+          ),
           linkLabelContent
         ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          integration.title && (typeof integration.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("font-medium md:text-lg", integration.titleClassName), children: integration.title }) : /* @__PURE__ */ jsx("div", { className: cn("font-medium md:text-lg", integration.titleClassName), children: integration.title })),
-          integration.description && (typeof integration.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm md:text-base", getTextColor(background, "muted"), integration.descriptionClassName), children: integration.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm md:text-base", getTextColor(background, "muted"), integration.descriptionClassName), children: integration.description }))
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          integration.title && (typeof integration.title === "string" ? /* @__PURE__ */ jsx(
+            "h3",
+            {
+              className: cn(
+                "font-semibold md:text-lg",
+                getTextColor(background),
+                integration.titleClassName
+              ),
+              children: integration.title
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "font-semibold md:text-lg",
+                getTextColor(background),
+                integration.titleClassName
+              ),
+              children: integration.title
+            }
+          )),
+          integration.description && (typeof integration.description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-sm leading-relaxed md:text-base",
+                getTextColor(background, "muted"),
+                integration.descriptionClassName
+              ),
+              children: integration.description
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "text-sm leading-relaxed md:text-base",
+                getTextColor(background, "muted"),
+                integration.descriptionClassName
+              ),
+              children: integration.description
+            }
+          ))
         ] })
       ] });
+      const cardClasses = cn(
+        "flex flex-col gap-5 rounded-xl border p-6 transition-all duration-300",
+        getBorderColor(background),
+        "hover:shadow-lg",
+        cardClassName,
+        integration.className
+      );
       if (integration.link) {
         return /* @__PURE__ */ jsx(
           Pressable,
           {
             href: integration.link,
-            className: cn("flex flex-col gap-4 rounded-xl border p-6 transition-colors duration-300", cardClassName, integration.className),
+            className: cardClasses,
             children: cardContent
           },
           index
         );
       }
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn("flex flex-col gap-4 rounded-xl border p-6 transition-colors duration-300", cardClassName, integration.className),
-          children: cardContent
-        },
-        index
-      );
+      return /* @__PURE__ */ jsx("div", { className: cardClasses, children: cardContent }, index);
     });
-  }, [integrationsSlot, integrations, cardClassName, renderIntegrationIcon, renderLinkLabel]);
+  }, [integrationsSlot, integrations, cardClassName, renderIntegrationIcon, renderLinkLabel, background]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -27335,7 +27604,7 @@ function FeatureImageOverlayBadge({
   overlayTitleClassName,
   optixFlowConfig,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "py-12 md:py-20 lg:py-24",
   pattern,
   patternOpacity,
   patternClassName
@@ -27438,7 +27707,27 @@ function FeatureImageOverlayBadge({
                   children: title
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("lg:text-lg", descriptionClassName), children: description })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-base leading-relaxed lg:text-lg",
+                    getTextColor(background, "muted"),
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-base leading-relaxed lg:text-lg",
+                    getTextColor(background, "muted"),
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              )),
               /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -27457,31 +27746,31 @@ function FeatureImageOverlayBadge({
                   "div",
                   {
                     className: cn(
-                      "absolute top-0 right-0 bottom-0 left-0 rounded-2xl bg-linear-to-t from-foreground via-foreground/20 to-transparent",
+                      "absolute inset-0 rounded-2xl bg-gradient-to-t from-black/80 via-black/30 to-transparent",
                       overlayClassName
                     )
                   }
                 ),
-                /* @__PURE__ */ jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between pt-4 pr-4 pl-4 pb-8 md:pt-7 md:bpr-7 md:pl-7 md:pb-7 rounded-2xl", children: [
+                /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col justify-between rounded-2xl p-5 md:p-7", children: [
                   (avatarSrc || avatarBadgeText) && /* @__PURE__ */ jsxs(
                     "span",
                     {
                       className: cn(
-                        "ml-auto flex w-fit items-center gap-2 rounded-full bg-foreground/30 px-4 py-2.5 text-sm font-semibold backdrop-blur-sm shadow-xl",
+                        "ml-auto flex w-fit items-center gap-2 rounded-full bg-white/20 px-4 py-2.5 text-sm font-semibold text-white backdrop-blur-md shadow-lg",
                         avatarBadgeClassName
                       ),
                       children: [
-                        avatarSrc && /* @__PURE__ */ jsx(Avatar, { className: "size-7 rounded-full", children: /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: "Avatar" }) }),
+                        avatarSrc && /* @__PURE__ */ jsx(Avatar, { className: "size-7 rounded-full ring-2 ring-white/30", children: /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: "Avatar" }) }),
                         avatarBadgeText
                       ]
                     }
                   ),
-                  (overlayTitle || overlayLinkText) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
+                  (overlayTitle || overlayLinkText) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
                     overlayTitle && (typeof overlayTitle === "string" ? /* @__PURE__ */ jsx(
                       "h4",
                       {
                         className: cn(
-                          "text-lg font-semibold lg:text-3xl",
+                          "text-lg font-semibold text-white lg:text-2xl xl:text-3xl",
                           overlayTitleClassName
                         ),
                         children: overlayTitle
@@ -27490,7 +27779,7 @@ function FeatureImageOverlayBadge({
                       "div",
                       {
                         className: cn(
-                          "text-lg font-semibold lg:text-3xl",
+                          "text-lg font-semibold text-white lg:text-2xl xl:text-3xl",
                           overlayTitleClassName
                         ),
                         children: overlayTitle
@@ -27501,9 +27790,10 @@ function FeatureImageOverlayBadge({
                       {
                         href: overlayLinkUrl,
                         onClick: overlayLinkOnClick,
+                        className: "flex w-fit items-center gap-2 font-medium text-white transition-opacity hover:opacity-80",
                         children: [
                           overlayLinkText,
-                          /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 18 })
+                          /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
                         ]
                       }
                     )