@opensite/ui 1.4.4 → 1.4.5

package/dist/feature-checklist-three-column.js

@@ -179,6 +179,19 @@ function Badge({
     }
   );
 }
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card",
+      className: cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1005,11 +1018,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) {
@@ -1033,10 +1046,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 })
         ]
       }
     );
@@ -1044,43 +1057,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(React.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,
     {
@@ -1092,9 +1124,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 })

package/dist/feature-image-overlay-badge.cjs

@@ -35,6 +35,32 @@ var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive)
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -1024,7 +1050,7 @@ function FeatureImageOverlayBadge({
   overlayTitleClassName,
   optixFlowConfig,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "py-12 md:py-20 lg:py-24",
   pattern,
   patternOpacity,
   patternClassName
@@ -1127,7 +1153,27 @@ function FeatureImageOverlayBadge({
                   children: title
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("lg:text-lg", descriptionClassName), children: description })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-base leading-relaxed lg:text-lg",
+                    getTextColor(background, "muted"),
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-base leading-relaxed lg:text-lg",
+                    getTextColor(background, "muted"),
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              )),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
@@ -1146,31 +1192,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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col justify-between rounded-2xl p-5 md:p-7", children: [
                   (avatarSrc || avatarBadgeText) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Avatar, { className: "size-7 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: "Avatar" }) }),
+                        avatarSrc && /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "size-7 rounded-full ring-2 ring-white/30", children: /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: "Avatar" }) }),
                         avatarBadgeText
                       ]
                     }
                   ),
-                  (overlayTitle || overlayLinkText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
+                  (overlayTitle || overlayLinkText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
                     overlayTitle && (typeof overlayTitle === "string" ? /* @__PURE__ */ jsxRuntime.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
@@ -1179,7 +1225,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
@@ -1190,9 +1236,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__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 18 })
+                          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
                         ]
                       }
                     )

package/dist/feature-image-overlay-badge.js

@@ -13,6 +13,32 @@ import { Img } from '@page-speed/img';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -1002,7 +1028,7 @@ function FeatureImageOverlayBadge({
   overlayTitleClassName,
   optixFlowConfig,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "py-12 md:py-20 lg:py-24",
   pattern,
   patternOpacity,
   patternClassName
@@ -1105,7 +1131,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",
                 {
@@ -1124,31 +1170,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
@@ -1157,7 +1203,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
@@ -1168,9 +1214,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 })
                         ]
                       }
                     )

package/dist/feature-integration-cards.cjs

@@ -58,6 +58,32 @@ function getTextColor(parentBg, variant = "default", options) {
     }
   }
 }
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
+function getBorderColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "border-foreground/20";
+      case "muted":
+        return "border-foreground/10";
+      case "accent":
+        return "border-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "border-border";
+      case "muted":
+        return "border-muted";
+      case "accent":
+        return "border-primary";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -992,11 +1018,22 @@ function FeatureIntegrationCards({
   const renderLinkLabel = React.useCallback((integration) => {
     if (integration.linkLabelSlot) return integration.linkLabelSlot;
     if (!integration.linkLabel) return null;
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-    ] });
-  }, []);
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 14 })
+        ]
+      }
+    );
+  }, [background]);
   const integrationsContent = React.useMemo(() => {
     if (integrationsSlot) return integrationsSlot;
     if (!integrations || integrations.length === 0) return null;
@@ -1005,35 +1042,84 @@ function FeatureIntegrationCards({
       const linkLabelContent = renderLinkLabel(integration);
       const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-          iconContent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "grid size-12 shrink-0 place-content-center rounded-md border", children: iconContent }),
+          iconContent && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "grid size-12 shrink-0 place-content-center rounded-lg border bg-background/50",
+                getBorderColor(background)
+              ),
+              children: iconContent
+            }
+          ),
           linkLabelContent
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          integration.title && (typeof integration.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-medium md:text-lg", integration.titleClassName), children: integration.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("font-medium md:text-lg", integration.titleClassName), children: integration.title })),
-          integration.description && (typeof integration.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm md:text-base", getTextColor(background, "muted"), integration.descriptionClassName), children: integration.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm md:text-base", getTextColor(background, "muted"), integration.descriptionClassName), children: integration.description }))
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+          integration.title && (typeof integration.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h3",
+            {
+              className: cn(
+                "font-semibold md:text-lg",
+                getTextColor(background),
+                integration.titleClassName
+              ),
+              children: integration.title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "font-semibold md:text-lg",
+                getTextColor(background),
+                integration.titleClassName
+              ),
+              children: integration.title
+            }
+          )),
+          integration.description && (typeof integration.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-sm leading-relaxed md:text-base",
+                getTextColor(background, "muted"),
+                integration.descriptionClassName
+              ),
+              children: integration.description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cardClasses, children: cardContent }, index);
     });
-  }, [integrationsSlot, integrations, cardClassName, renderIntegrationIcon, renderLinkLabel]);
+  }, [integrationsSlot, integrations, cardClassName, renderIntegrationIcon, renderLinkLabel, background]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {