@opensite/ui 0.8.4 → 0.8.6

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

@@ -1002,7 +1002,7 @@ function FeatureImageOverlayBadge({
   overlayTitleClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -1055,7 +1055,10 @@ function FeatureImageOverlayBadge({
         {
           src: imageSrc,
           alt: imageAlt || "Feature illustration",
-          className: cn("rounded-xl object-cover md:aspect-video lg:aspect-auto", imageClassName),
+          className: cn(
+            "rounded-2xl object-cover md:aspect-video lg:aspect-auto w-full h-auto",
+            imageClassName
+          ),
           loading: "lazy",
           optixFlowConfig
         }
@@ -1073,41 +1076,111 @@ function FeatureImageOverlayBadge({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("grid place-items-center gap-10 lg:grid-cols-2", gridClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5", contentClassName), children: [
-          badge && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: cn("w-fit bg-background", badgeClassName), children: badge }),
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("text-3xl font-semibold lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-semibold lg:text-5xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground lg:text-lg", descriptionClassName), children: description })),
-          /* @__PURE__ */ jsx("div", { className: actionsClassName, children: actionsContent })
-        ] }),
-        imageContent && /* @__PURE__ */ jsxs("div", { className: cn("relative rounded-xl", imageWrapperClassName), children: [
-          imageContent,
-          (avatarSrc || avatarBadgeText || overlayTitle || overlayLinkText) && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("div", { className: cn("absolute top-0 right-0 bottom-0 left-0 rounded-xl bg-linear-to-t from-primary via-transparent to-transparent", overlayClassName) }),
-            /* @__PURE__ */ jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
-              (avatarSrc || avatarBadgeText) && /* @__PURE__ */ jsxs("span", { className: cn("ml-auto flex w-fit items-center gap-2 rounded-full bg-background/30 px-4 py-2.5 text-sm font-semibold backdrop-blur-sm", avatarBadgeClassName), children: [
-                avatarSrc && /* @__PURE__ */ jsx(Avatar, { className: "size-7 rounded-full", children: /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: "Avatar" }) }),
-                avatarBadgeText
-              ] }),
-              (overlayTitle || overlayLinkText) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 text-background", children: [
-                overlayTitle && (typeof overlayTitle === "string" ? /* @__PURE__ */ jsx("h4", { className: cn("text-lg font-semibold lg:text-3xl", overlayTitleClassName), children: overlayTitle }) : /* @__PURE__ */ jsx("div", { className: cn("text-lg font-semibold lg:text-3xl", overlayTitleClassName), children: overlayTitle })),
-                overlayLinkText && /* @__PURE__ */ jsxs(
-                  Pressable,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "grid place-items-center gap-10 lg:grid-cols-2",
+            gridClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5", contentClassName), children: [
+              badge && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: cn("", badgeClassName), children: badge }),
+              title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  className: cn(
+                    "text-3xl font-semibold lg:text-4xl leading-snug text-balance",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-3xl font-semibold lg:text-5xl",
+                    titleClassName
+                  ),
+                  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 })),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex items-center gap-4 flex-wrap",
+                    actionsClassName
+                  ),
+                  children: actionsContent
+                }
+              )
+            ] }),
+            imageContent && /* @__PURE__ */ jsxs("div", { className: cn("relative rounded-2xl", imageWrapperClassName), children: [
+              imageContent,
+              (avatarSrc || avatarBadgeText || overlayTitle || overlayLinkText) && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "div",
                   {
-                    href: overlayLinkUrl,
-                    onClick: overlayLinkOnClick,
-                    className: "flex items-center gap-1 font-medium",
-                    children: [
-                      overlayLinkText,
-                      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
-                    ]
+                    className: cn(
+                      "absolute top-0 right-0 bottom-0 left-0 rounded-2xl bg-linear-to-t from-black via-black/20 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: [
+                  (avatarSrc || avatarBadgeText) && /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: cn(
+                        "ml-auto flex w-fit items-center gap-2 rounded-full bg-background/30 px-4 py-2.5 text-sm font-semibold backdrop-blur-sm shadow-xl",
+                        avatarBadgeClassName
+                      ),
+                      children: [
+                        avatarSrc && /* @__PURE__ */ jsx(Avatar, { className: "size-7 rounded-full", children: /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: "Avatar" }) }),
+                        avatarBadgeText
+                      ]
+                    }
+                  ),
+                  (overlayTitle || overlayLinkText) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
+                    overlayTitle && (typeof overlayTitle === "string" ? /* @__PURE__ */ jsx(
+                      "h4",
+                      {
+                        className: cn(
+                          "text-lg font-semibold lg:text-3xl",
+                          overlayTitleClassName
+                        ),
+                        children: overlayTitle
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "text-lg font-semibold lg:text-3xl",
+                          overlayTitleClassName
+                        ),
+                        children: overlayTitle
+                      }
+                    )),
+                    overlayLinkText && /* @__PURE__ */ jsxs(
+                      Pressable,
+                      {
+                        href: overlayLinkUrl,
+                        onClick: overlayLinkOnClick,
+                        children: [
+                          overlayLinkText,
+                          /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 18 })
+                        ]
+                      }
+                    )
+                  ] })
+                ] })
               ] })
             ] })
-          ] })
-        ] })
-      ] })
+          ]
+        }
+      )
     }
   );
 }

package/dist/feature-numbered-cards.cjs

@@ -529,27 +529,45 @@ function FeatureNumberedCards({
   patternOpacity,
   patternClassName
 }) {
-  const renderChecklistItems = React.useCallback((feature) => {
-    if (feature.checklistSlot) return feature.checklistSlot;
-    if (!feature.checklistItems || feature.checklistItems.length === 0) return null;
-    return feature.checklistItems.map((item, itemIndex) => {
-      const isString = typeof item === "string";
-      const content = isString ? item : item.content;
-      const iconElement = isString ? /* @__PURE__ */ jsxRuntime.jsx(
-        DynamicIcon,
-        {
-          name: "lucide/check-circle",
-          size: 16,
-          className: "mt-0.5 shrink-0 sm:mt-1"
-        }
-      ) : item.icon ?? (item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 16, className: "mt-0.5 shrink-0 sm:mt-1" }) : /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check-circle", size: 16, className: "mt-0.5 shrink-0 sm:mt-1" }));
-      const itemClassName = isString ? void 0 : item.className;
-      return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex gap-x-3", itemClassName), children: [
-        iconElement,
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm md:text-base", children: content })
-      ] }, itemIndex);
-    });
-  }, []);
+  const renderChecklistItems = React.useCallback(
+    (feature) => {
+      if (feature.checklistSlot) return feature.checklistSlot;
+      if (!feature.checklistItems || feature.checklistItems.length === 0)
+        return null;
+      return feature.checklistItems.map((item, itemIndex) => {
+        const isString = typeof item === "string";
+        const content = isString ? item : item.content;
+        const iconElement = isString ? /* @__PURE__ */ jsxRuntime.jsx(
+          DynamicIcon,
+          {
+            name: "lucide/check-circle",
+            size: 16,
+            className: "mt-0.5 shrink-0 sm:mt-1"
+          }
+        ) : item.icon ?? (item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
+          DynamicIcon,
+          {
+            name: item.iconName,
+            size: 16,
+            className: "mt-0.5 shrink-0 sm:mt-1"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          DynamicIcon,
+          {
+            name: "lucide/check-circle",
+            size: 16,
+            className: "mt-0.5 shrink-0 sm:mt-1"
+          }
+        ));
+        const itemClassName = isString ? void 0 : item.className;
+        return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex gap-x-3", itemClassName), children: [
+          iconElement,
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm md:text-base", children: content })
+        ] }, itemIndex);
+      });
+    },
+    []
+  );
   const featuresContent = React.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
@@ -563,7 +581,7 @@ function FeatureNumberedCards({
             {
               src: feature.image,
               alt: imageAlt,
-              className: "h-full w-full object-cover",
+              className: "h-full w-full object-cover rounded-tr-lg rounded-tl-lg md:rounded-tl-0 rounded-br-0 md:rounded-br-lg",
               loading: "lazy",
               optixFlowConfig
             }
@@ -571,19 +589,111 @@ function FeatureNumberedCards({
         }
         return null;
       };
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid rounded-lg border md:grid-cols-2", cardClassName, feature.className), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col px-6 py-8 lg:px-8 lg:py-12 xl:px-12 xl:py-20", feature.contentClassName), children: [
-          feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-3 text-2xl font-medium sm:mb-5 md:text-3xl lg:text-4xl", titleClassName), children: feature.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-3 text-2xl font-medium sm:mb-5 md:text-3xl lg:text-4xl", titleClassName), children: feature.title })),
-          feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8 text-sm text-muted-foreground sm:mb-10 md:text-base", descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8 text-sm text-muted-foreground sm:mb-10 md:text-base", descriptionClassName), children: feature.description })),
-          feature.checklistItems && feature.checklistItems.length > 0 || feature.checklistSlot ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("mt-auto space-y-2 sm:space-y-3", checklistClassName), children: renderChecklistItems(feature) }) : null
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative order-first max-h-80 md:order-last md:max-h-[500px]", feature.imageWrapperClassName), children: [
-          renderImage(),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("absolute top-5 left-5 flex size-6 items-center justify-center rounded-sm bg-primary font-mono text-xs text-primary-foreground md:top-10 md:left-10", badgeClassName), children: String(index + 1).padStart(2, "0") })
-        ] })
-      ] }, index);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "grid rounded-lg border md:grid-cols-2",
+            cardClassName,
+            feature.className
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col px-6 py-8 lg:px-8 lg:py-12 xl:px-12 xl:py-20",
+                  feature.contentClassName
+                ),
+                children: [
+                  feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "h3",
+                    {
+                      className: cn(
+                        "mb-3 text-2xl font-medium sm:mb-5 md:text-3xl lg:text-4xl",
+                        titleClassName
+                      ),
+                      children: feature.title
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mb-3 text-2xl font-medium sm:mb-5 md:text-3xl lg:text-4xl",
+                        titleClassName
+                      ),
+                      children: feature.title
+                    }
+                  )),
+                  feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mb-8 text-sm sm:mb-10 md:text-base",
+                        descriptionClassName
+                      ),
+                      children: feature.description
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mb-8 text-sm sm:mb-10 md:text-base",
+                        descriptionClassName
+                      ),
+                      children: feature.description
+                    }
+                  )),
+                  feature.checklistItems && feature.checklistItems.length > 0 || feature.checklistSlot ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "ul",
+                    {
+                      className: cn(
+                        "mt-auto space-y-2 sm:space-y-3",
+                        checklistClassName
+                      ),
+                      children: renderChecklistItems(feature)
+                    }
+                  ) : null
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "relative order-first max-h-80 md:order-last md:max-h-[500px]",
+                  feature.imageWrapperClassName
+                ),
+                children: [
+                  renderImage(),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "absolute top-5 left-5 flex size-6 items-center justify-center rounded-sm bg-primary font-mono text-xs text-primary-foreground md:top-10 md:left-10",
+                        badgeClassName
+                      ),
+                      children: String(index + 1).padStart(2, "0")
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        },
+        index
+      );
     });
-  }, [featuresSlot, features, cardClassName, titleClassName, descriptionClassName, checklistClassName, badgeClassName, optixFlowConfig]);
+  }, [
+    featuresSlot,
+    features,
+    cardClassName,
+    titleClassName,
+    descriptionClassName,
+    checklistClassName,
+    badgeClassName,
+    optixFlowConfig
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -594,7 +704,16 @@ function FeatureNumberedCards({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-10 rounded-lg border py-10 md:px-4", cardsWrapperClassName), children: featuresContent })
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "space-y-4 md:space-y-10 rounded-lg border-none md:border md:bg-background p-0 md:p-10",
+            cardsWrapperClassName
+          ),
+          children: featuresContent
+        }
+      )
     }
   );
 }

package/dist/feature-numbered-cards.js

@@ -508,27 +508,45 @@ function FeatureNumberedCards({
   patternOpacity,
   patternClassName
 }) {
-  const renderChecklistItems = useCallback((feature) => {
-    if (feature.checklistSlot) return feature.checklistSlot;
-    if (!feature.checklistItems || feature.checklistItems.length === 0) return null;
-    return feature.checklistItems.map((item, itemIndex) => {
-      const isString = typeof item === "string";
-      const content = isString ? item : item.content;
-      const iconElement = isString ? /* @__PURE__ */ jsx(
-        DynamicIcon,
-        {
-          name: "lucide/check-circle",
-          size: 16,
-          className: "mt-0.5 shrink-0 sm:mt-1"
-        }
-      ) : item.icon ?? (item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 16, className: "mt-0.5 shrink-0 sm:mt-1" }) : /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check-circle", size: 16, className: "mt-0.5 shrink-0 sm:mt-1" }));
-      const itemClassName = isString ? void 0 : item.className;
-      return /* @__PURE__ */ jsxs("li", { className: cn("flex gap-x-3", itemClassName), children: [
-        iconElement,
-        /* @__PURE__ */ jsx("p", { className: "text-sm md:text-base", children: content })
-      ] }, itemIndex);
-    });
-  }, []);
+  const renderChecklistItems = useCallback(
+    (feature) => {
+      if (feature.checklistSlot) return feature.checklistSlot;
+      if (!feature.checklistItems || feature.checklistItems.length === 0)
+        return null;
+      return feature.checklistItems.map((item, itemIndex) => {
+        const isString = typeof item === "string";
+        const content = isString ? item : item.content;
+        const iconElement = isString ? /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: "lucide/check-circle",
+            size: 16,
+            className: "mt-0.5 shrink-0 sm:mt-1"
+          }
+        ) : item.icon ?? (item.iconName ? /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: item.iconName,
+            size: 16,
+            className: "mt-0.5 shrink-0 sm:mt-1"
+          }
+        ) : /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: "lucide/check-circle",
+            size: 16,
+            className: "mt-0.5 shrink-0 sm:mt-1"
+          }
+        ));
+        const itemClassName = isString ? void 0 : item.className;
+        return /* @__PURE__ */ jsxs("li", { className: cn("flex gap-x-3", itemClassName), children: [
+          iconElement,
+          /* @__PURE__ */ jsx("p", { className: "text-sm md:text-base", children: content })
+        ] }, itemIndex);
+      });
+    },
+    []
+  );
   const featuresContent = useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
@@ -542,7 +560,7 @@ function FeatureNumberedCards({
             {
               src: feature.image,
               alt: imageAlt,
-              className: "h-full w-full object-cover",
+              className: "h-full w-full object-cover rounded-tr-lg rounded-tl-lg md:rounded-tl-0 rounded-br-0 md:rounded-br-lg",
               loading: "lazy",
               optixFlowConfig
             }
@@ -550,19 +568,111 @@ function FeatureNumberedCards({
         }
         return null;
       };
-      return /* @__PURE__ */ jsxs("div", { className: cn("grid rounded-lg border md:grid-cols-2", cardClassName, feature.className), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col px-6 py-8 lg:px-8 lg:py-12 xl:px-12 xl:py-20", feature.contentClassName), children: [
-          feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-3 text-2xl font-medium sm:mb-5 md:text-3xl lg:text-4xl", titleClassName), children: feature.title }) : /* @__PURE__ */ jsx("div", { className: cn("mb-3 text-2xl font-medium sm:mb-5 md:text-3xl lg:text-4xl", titleClassName), children: feature.title })),
-          feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("div", { className: cn("mb-8 text-sm text-muted-foreground sm:mb-10 md:text-base", descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsx("div", { className: cn("mb-8 text-sm text-muted-foreground sm:mb-10 md:text-base", descriptionClassName), children: feature.description })),
-          feature.checklistItems && feature.checklistItems.length > 0 || feature.checklistSlot ? /* @__PURE__ */ jsx("ul", { className: cn("mt-auto space-y-2 sm:space-y-3", checklistClassName), children: renderChecklistItems(feature) }) : null
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn("relative order-first max-h-80 md:order-last md:max-h-[500px]", feature.imageWrapperClassName), children: [
-          renderImage(),
-          /* @__PURE__ */ jsx("span", { className: cn("absolute top-5 left-5 flex size-6 items-center justify-center rounded-sm bg-primary font-mono text-xs text-primary-foreground md:top-10 md:left-10", badgeClassName), children: String(index + 1).padStart(2, "0") })
-        ] })
-      ] }, index);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "grid rounded-lg border md:grid-cols-2",
+            cardClassName,
+            feature.className
+          ),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col px-6 py-8 lg:px-8 lg:py-12 xl:px-12 xl:py-20",
+                  feature.contentClassName
+                ),
+                children: [
+                  feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx(
+                    "h3",
+                    {
+                      className: cn(
+                        "mb-3 text-2xl font-medium sm:mb-5 md:text-3xl lg:text-4xl",
+                        titleClassName
+                      ),
+                      children: feature.title
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mb-3 text-2xl font-medium sm:mb-5 md:text-3xl lg:text-4xl",
+                        titleClassName
+                      ),
+                      children: feature.title
+                    }
+                  )),
+                  feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mb-8 text-sm sm:mb-10 md:text-base",
+                        descriptionClassName
+                      ),
+                      children: feature.description
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mb-8 text-sm sm:mb-10 md:text-base",
+                        descriptionClassName
+                      ),
+                      children: feature.description
+                    }
+                  )),
+                  feature.checklistItems && feature.checklistItems.length > 0 || feature.checklistSlot ? /* @__PURE__ */ jsx(
+                    "ul",
+                    {
+                      className: cn(
+                        "mt-auto space-y-2 sm:space-y-3",
+                        checklistClassName
+                      ),
+                      children: renderChecklistItems(feature)
+                    }
+                  ) : null
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "relative order-first max-h-80 md:order-last md:max-h-[500px]",
+                  feature.imageWrapperClassName
+                ),
+                children: [
+                  renderImage(),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "absolute top-5 left-5 flex size-6 items-center justify-center rounded-sm bg-primary font-mono text-xs text-primary-foreground md:top-10 md:left-10",
+                        badgeClassName
+                      ),
+                      children: String(index + 1).padStart(2, "0")
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        },
+        index
+      );
     });
-  }, [featuresSlot, features, cardClassName, titleClassName, descriptionClassName, checklistClassName, badgeClassName, optixFlowConfig]);
+  }, [
+    featuresSlot,
+    features,
+    cardClassName,
+    titleClassName,
+    descriptionClassName,
+    checklistClassName,
+    badgeClassName,
+    optixFlowConfig
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -573,7 +683,16 @@ function FeatureNumberedCards({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: cn("space-y-10 rounded-lg border py-10 md:px-4", cardsWrapperClassName), children: featuresContent })
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "space-y-4 md:space-y-10 rounded-lg border-none md:border md:bg-background p-0 md:p-10",
+            cardsWrapperClassName
+          ),
+          children: featuresContent
+        }
+      )
     }
   );
 }