@opensite/ui 1.4.4 → 1.4.5

package/dist/feature-bento-utilities.cjs

@@ -35,32 +35,6 @@ var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrim
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
 function getTextColor(parentBg, variant = "default", options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   if (isDark) {
@@ -657,57 +631,63 @@ function FeatureBentoUtilities({
   patternOpacity,
   patternClassName
 }) {
-  const renderCard = React__namespace.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__ */ jsxRuntime.jsx(
-          img.Img,
-          {
-            src: card.imageSrc,
-            alt: card.imageAlt || "",
-            className: "aspect-video w-full object-cover",
-            loading: "lazy",
-            optixFlowConfig
-          }
-        );
+  const renderCard = React__namespace.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__ */ jsxRuntime.jsx(
+            img.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          card.title,
+          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 });
+      };
+      if (hasImage) {
+        return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cardClasses, children: [
+          renderImage(),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
+            renderTitle(),
+            card.description && /* @__PURE__ */ jsxRuntime.jsx("p", { children: card.description })
+          ] })
+        ] }, index);
       }
-      return null;
-    };
-    const renderTitle = () => {
-      if (!card.title) return null;
-      const titleContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        card.title,
-        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 });
-    };
-    if (hasImage) {
       return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cardClasses, children: [
-        renderImage(),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
-          renderTitle(),
-          card.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: card.description })
-        ] })
+        renderTitle(),
+        card.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: card.description })
       ] }, index);
-    }
-    return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cardClasses, children: [
-      renderTitle(),
-      card.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: card.description })
-    ] }, index);
-  }, [optixFlowConfig]);
-  const renderColumn = React__namespace.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 = React__namespace.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 = React.useMemo(() => {
     if (labelIcon) return labelIcon;
     if (labelIconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: labelIconName, size: 20 });
@@ -721,22 +701,56 @@ function FeatureBentoUtilities({
       pattern,
       patternOpacity,
       patternClassName,
-      className: cn(getNestedCardBg(background, "muted"), className),
+      className,
       containerClassName: cn("max-w-7xl", containerClassName),
       children: [
-        (labelIconElement || label) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", getTextColor(background, "muted"), labelClassName), children: [
-          labelIconElement,
-          label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children: label }))
-        ] }),
+        (labelIconElement || label) && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-2",
+              getTextColor(background, "muted"),
+              labelClassName
+            ),
+            children: [
+              labelIconElement,
+              label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children: label }))
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "mt-3 mb-8" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col justify-between gap-6 md:flex-row", headerClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium md:w-1/2", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-medium md:w-1/2", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("md:w-1/2", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("md:w-1/2", descriptionClassName), children: description }))
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-11 flex flex-col gap-6 md:flex-row", gridClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col gap-6", columnClassName), children: renderColumn(leftColumnCards, leftColumnSlot) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col gap-6", columnClassName), children: renderColumn(rightColumnCards, rightColumnSlot) })
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col justify-between gap-6 md:flex-row",
+              headerClassName
+            ),
+            children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium md:w-1/2", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn("text-3xl font-medium md:w-1/2", titleClassName),
+                  children: title
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("md:w-1/2", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("md:w-1/2", descriptionClassName), children: description }))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mt-11 grid grid-cols-1 gap-6 md:grid-cols-2",
+              gridClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-6", columnClassName), children: renderColumn(leftColumnCards, leftColumnSlot) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-6", columnClassName), children: renderColumn(rightColumnCards, rightColumnSlot) })
+            ]
+          }
+        )
       ]
     }
   );

package/dist/feature-bento-utilities.js

@@ -13,32 +13,6 @@ import { Img } from '@page-speed/img';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
 function getTextColor(parentBg, variant = "default", options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   if (isDark) {
@@ -635,57 +609,63 @@ function FeatureBentoUtilities({
   patternOpacity,
   patternClassName
 }) {
-  const renderCard = React.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 = React.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, { 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, { 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 = React.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 = React.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 });
@@ -699,22 +679,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) })
+            ]
+          }
+        )
       ]
     }
   );

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

@@ -200,6 +200,19 @@ function Badge({
     }
   );
 }
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.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:")) {
@@ -1026,11 +1039,11 @@ function FeatureChecklistThreeColumn({
   const renderChecklistColumn = React.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", getTextColor(background, "muted"), gapClass, checklistClassName), children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-center gap-2", getCheckItemClassName(item)), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check", size: 16, className: getAccentColor(background) }),
-      getCheckItemContent(item)
+    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]);
+  }, [checklistClassName, getCheckItemContent, getCheckItemClassName, background]);
   const renderCardImage = React.useCallback((card) => {
     if (card.imageSlot) return card.imageSlot;
     if (card.image) {
@@ -1054,10 +1067,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__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16, className: "mt-0.5" })
+          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
         ]
       }
     );
@@ -1065,43 +1078,62 @@ function FeatureChecklistThreeColumn({
   const cardsContent = React.useMemo(() => {
     if (cardsSlot) return cardsSlot;
     if (!cards || cards.length === 0) return null;
-    return cards.map((card, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-lg border", cardClassName, card.className), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative p-1", children: [
-        renderCardImage(card),
-        card.badge && /* @__PURE__ */ jsxRuntime.jsx(
-          Badge,
-          {
-            variant: "outline",
-            className: cn("absolute top-5 left-5 bg-background", card.badgeClassName),
-            children: card.badge
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h3", { className: cn("font-medium", card.titleClassName), children: card.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("font-medium", card.titleClassName), children: card.title })),
-          card.description && (typeof card.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(getTextColor(background, "muted"), card.descriptionClassName), children: card.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(getTextColor(background, "muted"), card.descriptionClassName), children: card.description }))
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px border-t border-dashed" }),
-        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: getTextColor(background, "muted"), children: card.checklistItems?.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-start gap-2 px-4 py-3 sm:px-5 md:px-6", getCheckItemClassName(item)), children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              DynamicIcon,
+    return cards.map((card, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      Card,
+      {
+        className: cn(
+          "overflow-hidden pt-0 transition-shadow duration-300 hover:shadow-lg",
+          cardClassName,
+          card.className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            renderCardImage(card),
+            card.badge && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "h-px border-t border-dashed" })
-        ] }, itemIndex)) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px border-t border-dashed" }),
-        renderCardLink(card)
-      ] })
-    ] }, index));
-  }, [cardsSlot, cards, cardClassName, renderCardImage, renderCardLink, getCheckItemContent, getCheckItemClassName]);
+          /* @__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.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",
+              {
+                className: cn(
+                  "flex items-start gap-3 py-2",
+                  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: cn("text-sm", getTextColor(background, "muted")), children: getCheckItemContent(item) })
+                ]
+              },
+              itemIndex
+            )) }),
+            card.link && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t", children: renderCardLink(card) })
+          ] })
+        ]
+      },
+      index
+    ));
+  }, [cardsSlot, cards, cardClassName, renderCardImage, renderCardLink, getCheckItemContent, getCheckItemClassName, background]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -1113,9 +1145,9 @@ function FeatureChecklistThreeColumn({
       className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ 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 })