@opensite/ui 1.2.4 → 1.2.5

package/dist/registry.js

@@ -24053,7 +24053,7 @@ function FeatureChecklistImage({
   checklistItems,
   checklistSlot,
   className,
-  containerClassName = "px-6 sm:px-6 md:mx-6 lg:px-8",
+  containerClassName = "px-6 sm:px-6 md:px-6 lg:px-8",
   contentWrapperClassName,
   imageClassName,
   contentClassName,
@@ -24248,7 +24248,7 @@ function FeatureCarouselProgress({
   slides,
   slidesSlot,
   className,
-  containerClassName = "px-6 sm:px-6 md:mx-6 lg:px-8",
+  containerClassName = "mx-0 w-full relative z-10 max-w-full px-6 sm:px-6 md:mx-0 lg:px-8",
   headerClassName,
   badgeClassName,
   carouselClassName,
@@ -24256,7 +24256,7 @@ function FeatureCarouselProgress({
   progressClassName,
   cardClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -24289,7 +24289,11 @@ function FeatureCarouselProgress({
         children: /* @__PURE__ */ jsx("div", { className: "p-1 h-auto md:h-full", children: /* @__PURE__ */ jsx(
           Card,
           {
-            className: cn("h-auto md:h-full", cardClassName, slide.className),
+            className: cn(
+              "h-auto md:h-full py-0",
+              cardClassName,
+              slide.className
+            ),
             children: /* @__PURE__ */ jsx(CardContent, { className: "flex flex-col justify-center p-6 h-full", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full justify-between", children: [
               (slide.icon || slide.iconName) && /* @__PURE__ */ jsx(
                 "span",
@@ -24301,7 +24305,7 @@ function FeatureCarouselProgress({
                   children: renderSlideIcon(slide)
                 }
               ),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
                 slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsx(
                   Pressable,
                   {
@@ -24326,7 +24330,7 @@ function FeatureCarouselProgress({
                   "p",
                   {
                     className: cn(
-                      "pt-2 text-card-foreground",
+                      "text-card-foreground",
                       slide.descriptionClassName
                     ),
                     children: slide.description
@@ -24335,7 +24339,7 @@ function FeatureCarouselProgress({
                   "div",
                   {
                     className: cn(
-                      "pt-2 text-card-foreground",
+                      "text-card-foreground",
                       slide.descriptionClassName
                     ),
                     children: slide.description
@@ -24363,14 +24367,17 @@ function FeatureCarouselProgress({
         badge || title || description ? /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cn("flex flex-col items-center gap-6", headerClassName),
+            className: cn(
+              "flex flex-col items-center gap-6 text-center",
+              headerClassName
+            ),
             children: [
               badge && /* @__PURE__ */ jsx(Badge, { className: badgeClassName, children: badge }),
               title && (typeof title === "string" ? /* @__PURE__ */ jsx(
                 "h2",
                 {
                   className: cn(
-                    "text-xl font-semibold text-balance md:text-2xl lg:text-3xl",
+                    "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
                     titleClassName
                   ),
                   children: title
@@ -24379,13 +24386,19 @@ function FeatureCarouselProgress({
                 "div",
                 {
                   className: cn(
-                    "text-xl font-semibold text-balance md:text-2xl lg:text-3xl",
+                    "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
                     titleClassName
                   ),
                   children: title
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-1 md:mt-6", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-1 md:mt-6", descriptionClassName), children: description }))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn("max-w-lg md:max-w-md", descriptionClassName),
+                  children: description
+                }
+              ))
             ]
           }
         ) : null,
@@ -24435,7 +24448,7 @@ function FeatureCardGridLinked({
   features,
   featuresSlot,
   className,
-  containerClassName = "px-6 sm:px-6 md:mx-6 lg:px-8",
+  containerClassName = "px-6 sm:px-6 md:px-6 lg:px-8",
   titleWrapperClassName,
   titleClassName,
   descriptionClassName,
@@ -24588,7 +24601,7 @@ function FeatureNumberedCards({
   features,
   featuresSlot,
   className,
-  containerClassName = "px-6 sm:px-6 md:mx-6 lg:px-8",
+  containerClassName = "px-6 sm:px-6 md:px-6 lg:px-8",
   cardsWrapperClassName,
   cardClassName,
   titleClassName,
@@ -26808,6 +26821,7 @@ function FeatureBentoImageGrid({
 function FeatureImageCardsThreeColumn({
   title,
   description,
+  headerClassName,
   cards,
   cardsSlot,
   className,
@@ -26823,28 +26837,34 @@ function FeatureImageCardsThreeColumn({
   patternOpacity,
   patternClassName
 }) {
-  const renderImage = useCallback((card, imageAlt) => {
-    if (card.imageSlot) return card.imageSlot;
-    if (!card.imageSrc) return null;
-    return /* @__PURE__ */ jsx(
-      Img,
-      {
-        src: card.imageSrc,
-        alt: imageAlt,
-        className: "h-full max-h-[450px] w-full rounded-xl object-cover object-center",
-        loading: "lazy",
-        optixFlowConfig
+  const renderImage = useCallback(
+    (card, imageAlt) => {
+      if (card.imageSlot) return card.imageSlot;
+      if (!card.imageSrc) return null;
+      return /* @__PURE__ */ jsx(
+        Img,
+        {
+          src: card.imageSrc,
+          alt: imageAlt,
+          className: "h-full max-h-[450px] w-full rounded-xl object-cover object-center",
+          loading: "lazy",
+          optixFlowConfig
+        }
+      );
+    },
+    [optixFlowConfig]
+  );
+  const renderBadgeIcon = useCallback(
+    (card) => {
+      if (card.avatarSrc) {
+        return /* @__PURE__ */ jsx(Avatar, { className: "size-7 rounded-full", children: /* @__PURE__ */ jsx(AvatarImage, { src: card.avatarSrc, alt: "Avatar" }) });
       }
-    );
-  }, [optixFlowConfig]);
-  const renderBadgeIcon = useCallback((card) => {
-    if (card.avatarSrc) {
-      return /* @__PURE__ */ jsx(Avatar, { className: "size-7 rounded-full", children: /* @__PURE__ */ jsx(AvatarImage, { src: card.avatarSrc, alt: "Avatar" }) });
-    }
-    if (card.icon) return card.icon;
-    if (!card.iconName) return null;
-    return /* @__PURE__ */ jsx(DynamicIcon, { name: card.iconName, size: 24 });
-  }, []);
+      if (card.icon) return card.icon;
+      if (!card.iconName) return null;
+      return /* @__PURE__ */ jsx(DynamicIcon, { name: card.iconName, size: 24 });
+    },
+    []
+  );
   const cardsContent = useMemo$1(() => {
     if (cardsSlot) return cardsSlot;
     if (!cards || cards.length === 0) return null;
@@ -26855,31 +26875,53 @@ function FeatureImageCardsThreeColumn({
         {
           href: card.link,
           onClick: card.onClick,
-          className: cn("group relative overflow-hidden rounded-xl", cardClassName, card.className),
+          className: cn(
+            "group relative overflow-hidden rounded-xl",
+            cardClassName,
+            card.className
+          ),
           children: [
             renderImage(card, imageAlt),
-            /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-20 rounded-xl bg-linear-to-t from-primary to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
-            /* @__PURE__ */ jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
-              (card.badgeText || card.avatarSrc || card.icon || card.iconName) && /* @__PURE__ */ jsxs(
-                "span",
-                {
-                  className: cn(
-                    "ml-auto flex w-fit items-center gap-2 text-sm font-semibold",
-                    card.avatarSrc ? "rounded-full bg-foreground/30 px-4 py-2.5 backdrop-blur-sm" : "rounded-full bg-primary px-4 py-2.5 text-primary-foreground",
-                    card.badgeClassName
-                  ),
-                  children: [
-                    renderBadgeIcon(card),
-                    card.badgeText
-                  ]
-                }
-              ),
+            /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-20 rounded-xl bg-linear-to-t from-black to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
+            /* @__PURE__ */ jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-4 md:p-6", children: [
+              (card.badgeText || card.avatarSrc || card.icon || card.iconName) && /* @__PURE__ */ jsxs(Badge, { variant: "default", className: cn(card.badgeClassName), children: [
+                renderBadgeIcon(card),
+                card.badgeText
+              ] }),
               /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
-                card.title && (typeof card.title === "string" ? /* @__PURE__ */ jsx("h4", { className: cn("text-2xl font-semibold lg:text-3xl", card.titleClassName), children: card.title }) : /* @__PURE__ */ jsx("div", { className: cn("text-2xl font-semibold lg:text-3xl", card.titleClassName), children: card.title })),
-                card.linkText && /* @__PURE__ */ jsxs("p", { className: cn("flex items-center gap-1 font-medium", card.linkClassName), children: [
-                  card.linkText,
-                  /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
-                ] })
+                card.title && (typeof card.title === "string" ? /* @__PURE__ */ jsx(
+                  "h3",
+                  {
+                    className: cn(
+                      "text-xl md:text-2xl font-semibold",
+                      card.titleClassName
+                    ),
+                    children: card.title
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "text-xl md:text-2xl font-semibold",
+                      card.titleClassName
+                    ),
+                    children: card.title
+                  }
+                )),
+                card.linkText && card.link && /* @__PURE__ */ jsxs(
+                  Pressable,
+                  {
+                    className: cn(
+                      "font-bold text-xs uppercase",
+                      card.linkClassName
+                    ),
+                    href: card.link,
+                    children: [
+                      card.linkText,
+                      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 18 })
+                    ]
+                  }
+                )
               ] })
             ] })
           ]
@@ -26888,7 +26930,7 @@ function FeatureImageCardsThreeColumn({
       );
     });
   }, [cardsSlot, cards, cardClassName, renderImage, renderBadgeIcon]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Section,
     {
       background,
@@ -26898,11 +26940,46 @@ function FeatureImageCardsThreeColumn({
       patternClassName,
       className,
       containerClassName,
-      children: [
-        title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-4 text-center text-4xl font-semibold", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4 text-center text-4xl font-semibold", titleClassName), children: title })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("text-center", getTextColor(background, "muted"), descriptionClassName), children: description })),
-        /* @__PURE__ */ jsx("div", { className: cn("grid gap-5 pt-14 xl:grid-cols-3", gridClassName), children: cardsContent })
-      ]
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
+        title || description ? /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6 text-left", headerClassName), children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                titleClassName
+              ),
+              children: title
+            }
+          )),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("max-w-lg md:max-w-md", descriptionClassName),
+              children: description
+            }
+          ))
+        ] }) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "grid gap-4 md:gap-4 grid-cols-1 md:grid-cols-3",
+              gridClassName
+            ),
+            children: cardsContent
+          }
+        )
+      ] })
     }
   );
 }
@@ -26912,35 +26989,68 @@ function FeatureIconGridMuted({
   features,
   featuresSlot,
   className,
-  containerClassName,
   headerClassName,
   titleClassName,
   descriptionClassName,
   gridClassName,
   cardClassName,
   background,
-  spacing,
   pattern,
   patternOpacity,
-  patternClassName
+  patternClassName,
+  spacing = "py-12 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
   const renderFeatureIcon = useCallback((feature) => {
     if (feature.icon) return feature.icon;
-    if (feature.iconName) return /* @__PURE__ */ jsx(DynamicIcon, { name: feature.iconName, size: 24, className: feature.iconClassName });
+    if (feature.iconName)
+      return /* @__PURE__ */ jsx(
+        DynamicIcon,
+        {
+          name: feature.iconName,
+          size: 24,
+          className: feature.iconClassName
+        }
+      );
     return null;
   }, []);
   const featuresContent = useMemo$1(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
-    return features.map((feature, index) => /* @__PURE__ */ jsxs(
+    return features.map((feature, index) => /* @__PURE__ */ jsx(
       "div",
       {
-        className: cn("flex flex-col gap-2.5 rounded-xl border p-7", cardClassName, feature.className),
-        children: [
+        className: cn(
+          "flex flex-col gap-2.5 rounded-xl border p-7 bg-muted text-muted-foreground",
+          cardClassName,
+          feature.className
+        ),
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 md:gap-12", children: [
           (feature.icon || feature.iconName) && renderFeatureIcon(feature),
-          feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("font-semibold", feature.titleClassName), children: feature.title }) : /* @__PURE__ */ jsx("div", { className: cn("font-semibold", feature.titleClassName), children: feature.title })),
-          feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }))
-        ]
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 md:gap-4", children: [
+            feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                href: feature.href,
+                className: cn(
+                  "font-medium text-xl text-muted-foreground",
+                  feature.titleClassName
+                ),
+                children: feature.title
+              }
+            ) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "font-medium text-xl text-muted-foreground",
+                  feature.titleClassName
+                ),
+                children: feature.title
+              }
+            )),
+            feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm", feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm", feature.descriptionClassName), children: feature.description }))
+          ] })
+        ] })
       },
       index
     ));
@@ -26956,11 +27066,65 @@ function FeatureIconGridMuted({
       className,
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10", children: [
-        (title || description) && /* @__PURE__ */ jsxs("div", { className: cn("mx-auto flex max-w-xl flex-col gap-2.5 text-center", headerClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-semibold md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-4xl font-semibold md:text-5xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }))
-        ] }),
-        (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mx-auto grid max-w-7xl gap-7 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5", gridClassName), children: featuresContent })
+        (title || description) && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto flex max-w-full md:max-w-md text-balance flex-col gap-2.5 text-center",
+              headerClassName
+            ),
+            children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-4xl font-semibold md:text-5xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-4xl font-semibold md:text-5xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    getTextColor(background, "muted"),
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    getTextColor(background, "muted"),
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ))
+            ]
+          }
+        ),
+        (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mx-auto grid w-full gap-4 md:gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
+              gridClassName
+            ),
+            children: featuresContent
+          }
+        )
       ] })
     }
   );
@@ -26974,7 +27138,7 @@ function FeatureStatsHighlight({
   stats,
   statsSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-6 lg:px-8",
   gridClassName,
   contentClassName,
   badgeClassName,
@@ -26984,7 +27148,7 @@ function FeatureStatsHighlight({
   statsGridClassName,
   statCardClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -27024,9 +27188,7 @@ function FeatureStatsHighlight({
       "div",
       {
         className: cn(
-          "flex flex-col gap-2 rounded-xl border p-6",
-          getNestedCardBg(background, "card"),
-          getNestedCardTextColor(background),
+          "flex flex-col gap-2 rounded-xl border p-4 md:p-6 bg-card text-card-foreground h-full justify-between",
           statCardClassName,
           stat.className
         ),
@@ -27035,13 +27197,22 @@ function FeatureStatsHighlight({
             "span",
             {
               className: cn(
-                "text-4xl font-bold lg:text-5xl",
+                "text-3xl font-bold lg:text-4xl xl:text-5xl",
                 stat.valueClassName
               ),
               children: stat.value
             }
           ),
-          stat.label && /* @__PURE__ */ jsx("span", { className: cn("", stat.labelClassName), children: stat.label })
+          stat.label && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "uppercase font-bold text-sm opacity-60",
+                stat.labelClassName
+              ),
+              children: stat.label
+            }
+          )
         ]
       },
       index
@@ -27063,7 +27234,7 @@ function FeatureStatsHighlight({
           className: cn("grid gap-10 lg:grid-cols-2 lg:gap-20", gridClassName),
           children: [
             /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5", contentClassName), children: [
-              badge && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: cn("w-fit", badgeClassName), children: badge }),
+              badge && /* @__PURE__ */ jsx(Badge, { variant: "default", className: cn("", badgeClassName), children: badge }),
               title && (typeof title === "string" ? /* @__PURE__ */ jsx(
                 "h2",
                 {
@@ -27086,7 +27257,16 @@ function FeatureStatsHighlight({
               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 })),
               (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: actionsClassName, children: actionsContent })
             ] }),
-            (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-2 gap-6", statsGridClassName), children: statsContent })
+            (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6",
+                  statsGridClassName
+                ),
+                children: statsContent
+              }
+            )
           ]
         }
       )
@@ -27160,7 +27340,7 @@ function FeatureAccordionImage({
   itemsSlot,
   defaultValue,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   titleClassName,
   descriptionClassName,
@@ -27181,55 +27361,129 @@ function FeatureAccordionImage({
   const accordionItemsContent = useMemo$1(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
-    return items.map((item, index) => /* @__PURE__ */ jsxs(AccordionItem, { value: `item-${index}`, className: item.className, children: [
-      item.title && /* @__PURE__ */ jsx(AccordionTrigger, { className: cn("text-left text-lg font-medium", item.triggerClassName), children: item.title }),
-      item.content && /* @__PURE__ */ jsx(AccordionContent, { className: cn(getTextColor(background, "muted"), item.contentClassName), children: item.content })
-    ] }, index));
-  }, [itemsSlot, items]);
-  const imageContent = useMemo$1(() => {
-    if (currentImage?.imageSlot) return currentImage.imageSlot;
-    if (!currentImage?.imageSrc) return null;
-    return /* @__PURE__ */ jsx(
-      Img,
+    return items.map((item, index) => /* @__PURE__ */ jsxs(
+      AccordionItem,
       {
-        src: currentImage.imageSrc,
-        alt: currentImage.imageAlt || "",
-        className: cn("h-full w-full object-cover transition-opacity duration-300", imageClassName),
-        loading: "lazy",
-        optixFlowConfig
-      }
-    );
-  }, [currentImage, imageClassName, optixFlowConfig]);
-  return /* @__PURE__ */ jsxs(
-    Section,
-    {
-      background,
+        value: `item-${index}`,
+        className: item.className,
+        children: [
+          item.title && /* @__PURE__ */ jsx(
+            AccordionTrigger,
+            {
+              className: cn(
+                "text-left text-lg font-medium",
+                item.triggerClassName
+              ),
+              children: item.title
+            }
+          ),
+          item.content && /* @__PURE__ */ jsx(
+            AccordionContent,
+            {
+              className: cn(
+                getTextColor(background, "muted"),
+                item.contentClassName
+              ),
+              children: item.content
+            }
+          )
+        ]
+      },
+      index
+    ));
+  }, [itemsSlot, items]);
+  const imageContent = useMemo$1(() => {
+    if (currentImage?.imageSlot) return currentImage.imageSlot;
+    if (!currentImage?.imageSrc) return null;
+    return /* @__PURE__ */ jsx(
+      Img,
+      {
+        src: currentImage.imageSrc,
+        alt: currentImage.imageAlt || "",
+        className: cn(
+          "h-full w-full object-cover transition-opacity duration-300",
+          imageClassName
+        ),
+        loading: "lazy",
+        optixFlowConfig
+      }
+    );
+  }, [currentImage, imageClassName, optixFlowConfig]);
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      background,
       spacing,
       pattern,
       patternOpacity,
       patternClassName,
       className,
       containerClassName,
-      children: [
-        (title || description) && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-semibold md:text-4xl lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-semibold md:text-4xl lg:text-5xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 lg:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4 lg:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }))
-        ] }),
-        (itemsSlot || items && items.length > 0) && /* @__PURE__ */ jsxs("div", { className: cn("grid gap-10 lg:grid-cols-2 lg:gap-16", gridClassName), children: [
-          /* @__PURE__ */ jsx(
-            Accordion,
-            {
-              type: "single",
-              collapsible: true,
-              value: activeItem,
-              onValueChange: setActiveItem,
-              className: cn("w-full", accordionClassName),
-              children: accordionItemsContent
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: cn("relative aspect-video overflow-hidden rounded-xl lg:aspect-square", imageWrapperClassName), children: imageContent })
-        ] })
-      ]
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
+        (title || description) && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "text-center max-w-full md:max-w-md text-balance",
+              headerClassName
+            ),
+            children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-xl font-semibold md:text-2xl lg:text-3xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-xl font-semibold md:text-2xl lg:text-3xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4 lg:text-lg", descriptionClassName), children: description }))
+            ]
+          }
+        ),
+        (itemsSlot || items && items.length > 0) && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "grid gap-10 lg:grid-cols-2 lg:gap-16",
+              gridClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                Accordion,
+                {
+                  type: "single",
+                  collapsible: true,
+                  value: activeItem,
+                  onValueChange: setActiveItem,
+                  className: cn("w-full", accordionClassName),
+                  children: accordionItemsContent
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "relative aspect-video overflow-hidden rounded-xl shadow-xl lg:aspect-square",
+                    imageWrapperClassName
+                  ),
+                  children: imageContent
+                }
+              )
+            ]
+          }
+        )
+      ] })
     }
   );
 }
@@ -41501,236 +41755,268 @@ function FaqSplitHero({
     imageArea
   ] }) });
 }
-var Controls = React52.memo(({
-  handleNext,
-  handlePrevious,
-  isPreviousDisabled,
-  isNextDisabled
-}) => {
-  return /* @__PURE__ */ jsxs("div", { className: "hidden flex-col items-start gap-8 lg:flex", children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: "rounded-full border bg-background/50 p-2 hover:bg-background disabled:opacity-50",
-        onClick: handlePrevious,
-        disabled: isPreviousDisabled,
-        type: "button",
-        children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-up", size: 24 })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: "rounded-full border bg-background/50 p-2 hover:bg-background disabled:opacity-50",
-        onClick: handleNext,
-        disabled: isNextDisabled,
-        type: "button",
-        children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-down", size: 24 })
-      }
-    )
-  ] });
-});
-var FeatureCard = React52.memo(({ feature, isActive, onClick }) => {
-  const variants2 = useMemo$1(() => ({
-    initial: {
-      opacity: 0
-    },
-    animate: {
-      opacity: 1
-    },
-    exit: {
-      opacity: 0
-    }
-  }), []);
-  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsx(
-    motion.div,
-    {
-      layout: true,
-      transition: {
-        layout: {
-          duration: 0.4,
-          ease: "easeOut"
+var Controls = React52.memo(
+  ({
+    handleNext,
+    handlePrevious,
+    isPreviousDisabled,
+    isNextDisabled
+  }) => {
+    return /* @__PURE__ */ jsxs("div", { className: "hidden flex-col items-start gap-8 lg:flex", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "rounded-full border p-2 flex items-center justify-center disabled:opacity-50 h-fit w-fit bg-card text-card-foreground",
+          onClick: handlePrevious,
+          disabled: isPreviousDisabled,
+          type: "button",
+          children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-up", size: 24 })
         }
-      },
-      style: {
-        borderRadius: "24px"
-      },
-      className: "flex cursor-pointer items-start gap-4 overflow-hidden bg-background md:w-fit md:max-w-sm",
-      onClick,
-      children: isActive ? /* @__PURE__ */ jsx(
-        motion.div,
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
         {
-          layout: true,
-          variants: variants2,
-          initial: "initial",
-          animate: "animate",
-          exit: "exit",
-          transition: {
+          className: "rounded-full border p-2 flex items-center justify-center disabled:opacity-50 h-fit w-fit bg-card text-card-foreground",
+          onClick: handleNext,
+          disabled: isNextDisabled,
+          type: "button",
+          children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-down", size: 24 })
+        }
+      )
+    ] });
+  }
+);
+var FeatureCard = React52.memo(
+  ({ feature, isActive, onClick }) => {
+    const variants2 = useMemo$1(
+      () => ({
+        initial: {
+          opacity: 0
+        },
+        animate: {
+          opacity: 1
+        },
+        exit: {
+          opacity: 0
+        }
+      }),
+      []
+    );
+    return /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        layout: true,
+        transition: {
+          layout: {
             duration: 0.4,
-            delay: 0.3,
             ease: "easeOut"
+          }
+        },
+        style: {
+          borderRadius: "24px"
+        },
+        className: cn(
+          "relative flex items-start gap-4 overflow-hidden bg-background text-foreground md:w-fit md:max-w-sm",
+          isActive ? "shadow-xl" : "cursor-pointer shadow-none"
+        ),
+        onClick,
+        children: [
+          isActive && feature.href && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 right-4 bg-background rounded-full h-fit w-fit p-2 flex items-center justify-center", children: /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              href: feature.href,
+              size: "icon-lg",
+              className: "text-foreground",
+              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right" })
+            }
+          ) }),
+          isActive ? /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              layout: true,
+              variants: variants2,
+              initial: "initial",
+              animate: "animate",
+              exit: "exit",
+              transition: {
+                duration: 0.4,
+                delay: 0.3,
+                ease: "easeOut"
+              },
+              className: "p-6 text-sm md:p-8 md:text-base",
+              children: (feature.title || feature.description) && /* @__PURE__ */ jsxs("p", { children: [
+                feature.title && /* @__PURE__ */ jsxs("span", { className: "font-semibold", children: [
+                  feature.title,
+                  "."
+                ] }),
+                feature.title && feature.description && " ",
+                feature.description && /* @__PURE__ */ jsx("span", { children: feature.description })
+              ] })
+            },
+            `feature-description-active-${feature.title}`
+          ) : /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              layout: true,
+              variants: variants2,
+              initial: "initial",
+              animate: "animate",
+              exit: "exit",
+              transition: {
+                duration: 0.4,
+                delay: 0.2,
+                ease: "easeOut"
+              },
+              className: cn(
+                "flex h-fit shrink-0 items-center gap-4 text-sm md:py-3.5 md:pr-6 md:pl-3 md:text-base",
+                !isActive && "h-0 w-0 md:h-auto md:w-auto"
+              ),
+              style: {
+                height: "auto",
+                lineHeight: "normal"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  DynamicIcon,
+                  {
+                    name: "lucide/plus-circle",
+                    size: 24,
+                    className: "shrink-0"
+                  }
+                ),
+                feature.title && /* @__PURE__ */ jsx("p", { className: "shrink-0 font-semibold", children: feature.title })
+              ]
+            },
+            `feature-description-inactive-${feature.title}`
+          )
+        ]
+      }
+    ) });
+  }
+);
+var FeaturesDesktop = React52.memo(
+  ({
+    features,
+    handleNext,
+    handlePrevious,
+    activeIndex,
+    handleFeatureClick,
+    isPreviousDisabled,
+    isNextDisabled
+  }) => {
+    return /* @__PURE__ */ jsxs("div", { className: "relative z-10 hidden items-center gap-8 md:flex", children: [
+      /* @__PURE__ */ jsx(
+        Controls,
+        {
+          handleNext,
+          handlePrevious,
+          isPreviousDisabled,
+          isNextDisabled
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: features.map((feature, index) => {
+        return /* @__PURE__ */ jsx(
+          FeatureCard,
+          {
+            feature,
+            isActive: index === activeIndex,
+            onClick: () => handleFeatureClick(index)
           },
-          className: "p-6 text-sm md:p-8 md:text-base",
-          children: (feature.title || feature.description) && /* @__PURE__ */ jsxs("p", { children: [
-            feature.title && /* @__PURE__ */ jsxs("span", { className: "font-semibold", children: [
-              feature.title,
-              "."
-            ] }),
-            feature.title && feature.description && " ",
-            feature.description && /* @__PURE__ */ jsx("span", { children: feature.description })
-          ] })
+          `feature-card-${index}`
+        );
+      }) })
+    ] });
+  }
+);
+var FeaturesMobile = React52.memo(
+  ({
+    features,
+    handleNext,
+    handlePrevious,
+    activeIndex,
+    direction,
+    isPreviousDisabled,
+    isNextDisabled
+  }) => {
+    const variants2 = useMemo$1(
+      () => ({
+        enter: (direction2) => ({
+          x: direction2 > 0 ? 100 : -100,
+          opacity: 0
+        }),
+        center: {
+          x: 0,
+          opacity: 1
         },
-        `feature-description-active-${feature.title}`
-      ) : /* @__PURE__ */ jsxs(
+        exit: (direction2) => ({
+          x: direction2 < 0 ? 100 : -100,
+          opacity: 0
+        })
+      }),
+      []
+    );
+    const currentFeature = features[activeIndex];
+    return /* @__PURE__ */ jsx("div", { className: "relative z-10 flex flex-col gap-4 md:hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-stretch gap-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", custom: direction, children: /* @__PURE__ */ jsx(
         motion.div,
         {
-          layout: true,
+          custom: direction,
           variants: variants2,
-          initial: "initial",
-          animate: "animate",
+          initial: "enter",
+          animate: "center",
           exit: "exit",
           transition: {
-            duration: 0.4,
-            delay: 0.2,
-            ease: "easeOut"
+            x: { type: "spring", stiffness: 300, damping: 30 },
+            opacity: { duration: 0.2 }
           },
-          className: cn(
-            "flex h-fit shrink-0 items-center gap-4 text-sm md:py-3.5 md:pr-6 md:pl-3 md:text-base",
-            !isActive && "h-0 w-0 md:h-auto md:w-auto"
-          ),
-          style: {
-            height: "auto",
-            lineHeight: "normal"
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              DynamicIcon,
-              {
-                name: "lucide/plus-circle",
-                size: 24,
-                className: "shrink-0"
-              }
-            ),
-            feature.title && /* @__PURE__ */ jsx("p", { className: "shrink-0 font-semibold", children: feature.title })
-          ]
-        },
-        `feature-description-inactive-${feature.title}`
-      )
-    }
-  ) });
-});
-var FeaturesDesktop = React52.memo(({
-  features,
-  handleNext,
-  handlePrevious,
-  activeIndex,
-  handleFeatureClick,
-  isPreviousDisabled,
-  isNextDisabled
-}) => {
-  return /* @__PURE__ */ jsxs("div", { className: "relative z-10 hidden items-center gap-8 md:flex", children: [
-    /* @__PURE__ */ jsx(
-      Controls,
-      {
-        handleNext,
-        handlePrevious,
-        isPreviousDisabled,
-        isNextDisabled
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: features.map((feature, index) => {
-      return /* @__PURE__ */ jsx(
-        FeatureCard,
-        {
-          feature,
-          isActive: index === activeIndex,
-          onClick: () => handleFeatureClick(index)
-        },
-        `feature-card-${index}`
-      );
-    }) })
-  ] });
-});
-var FeaturesMobile = React52.memo(({
-  features,
-  handleNext,
-  handlePrevious,
-  activeIndex,
-  direction,
-  isPreviousDisabled,
-  isNextDisabled
-}) => {
-  const variants2 = useMemo$1(() => ({
-    enter: (direction2) => ({
-      x: direction2 > 0 ? 100 : -100,
-      opacity: 0
-    }),
-    center: {
-      x: 0,
-      opacity: 1
-    },
-    exit: (direction2) => ({
-      x: direction2 < 0 ? 100 : -100,
-      opacity: 0
-    })
-  }), []);
-  const currentFeature = features[activeIndex];
-  return /* @__PURE__ */ jsx("div", { className: "relative z-10 flex flex-col items-center gap-6 md:hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-4", children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: "rounded-full border bg-background/50 p-2 hover:bg-background disabled:opacity-50",
-        onClick: handlePrevious,
-        disabled: isPreviousDisabled,
-        type: "button",
-        children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 24 })
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "relative h-24 w-full overflow-hidden", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", custom: direction, children: /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        custom: direction,
-        variants: variants2,
-        initial: "enter",
-        animate: "center",
-        exit: "exit",
-        transition: {
-          x: { type: "spring", stiffness: 300, damping: 30 },
-          opacity: { duration: 0.2 }
+          className: "rounded-3xl bg-background p-4 text-left",
+          children: (currentFeature?.title || currentFeature?.description) && /* @__PURE__ */ jsxs("div", { className: "text-sm", children: [
+            currentFeature.title && /* @__PURE__ */ jsx("p", { className: "font-semibold", children: currentFeature.title }),
+            currentFeature.description && /* @__PURE__ */ jsx("p", { className: "mt-1", children: currentFeature.description })
+          ] })
         },
-        className: "absolute inset-0 flex items-center justify-center rounded-3xl bg-background p-4",
-        children: (currentFeature?.title || currentFeature?.description) && /* @__PURE__ */ jsxs("p", { className: "text-center text-sm", children: [
-          currentFeature.title && /* @__PURE__ */ jsxs("span", { className: "font-semibold", children: [
-            currentFeature.title,
-            "."
-          ] }),
-          currentFeature.title && currentFeature.description && " ",
-          currentFeature.description && /* @__PURE__ */ jsx("span", { children: currentFeature.description })
-        ] })
-      },
-      activeIndex
-    ) }) }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: "rounded-full border bg-background/50 p-2 hover:bg-background disabled:opacity-50",
-        onClick: handleNext,
-        disabled: isNextDisabled,
-        type: "button",
-        children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 24 })
-      }
-    )
-  ] }) });
-});
+        activeIndex
+      ) }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "rounded-full border bg-background/50 p-2 hover:bg-background disabled:opacity-50",
+            onClick: handlePrevious,
+            disabled: isPreviousDisabled,
+            type: "button",
+            children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-up", size: 20 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "rounded-full border bg-background/50 p-2 hover:bg-background disabled:opacity-50",
+            onClick: handleNext,
+            disabled: isNextDisabled,
+            type: "button",
+            children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-down", size: 20 })
+          }
+        )
+      ] })
+    ] }) });
+  }
+);
 function FeatureAnimatedCarousel({
+  title,
+  description,
+  titleClassName,
+  descriptionClassName,
   features,
   className,
   optixFlowConfig,
   background,
-  spacing,
   pattern,
   patternOpacity,
-  patternClassName
+  patternClassName,
+  headerClassName,
+  spacing = "py-12 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
   const [activeIndex, setActiveIndex] = React52.useState(0);
   const [direction, setDirection] = React52.useState(1);
@@ -41746,26 +42032,32 @@ function FeatureAnimatedCarousel({
       setActiveIndex(activeIndex - 1);
     }
   }, [activeIndex]);
-  const handleFeatureClick = useCallback((index) => {
-    setDirection(index > activeIndex ? 1 : -1);
-    setActiveIndex(index);
-  }, [activeIndex]);
+  const handleFeatureClick = useCallback(
+    (index) => {
+      setDirection(index > activeIndex ? 1 : -1);
+      setActiveIndex(index);
+    },
+    [activeIndex]
+  );
   const isPreviousDisabled = activeIndex === 0;
   const isNextDisabled = !features || activeIndex === features.length - 1;
-  const imageVariants = useMemo$1(() => ({
-    enter: (direction2) => ({
-      x: direction2 > 0 ? 300 : -300,
-      opacity: 0
+  const imageVariants = useMemo$1(
+    () => ({
+      enter: (direction2) => ({
+        x: direction2 > 0 ? 300 : -300,
+        opacity: 0
+      }),
+      center: {
+        x: 0,
+        opacity: 1
+      },
+      exit: (direction2) => ({
+        x: direction2 < 0 ? 300 : -300,
+        opacity: 0
+      })
     }),
-    center: {
-      x: 0,
-      opacity: 1
-    },
-    exit: (direction2) => ({
-      x: direction2 < 0 ? 300 : -300,
-      opacity: 0
-    })
-  }), []);
+    []
+  );
   if (!features || features.length === 0) {
     return /* @__PURE__ */ jsx(
       Section,
@@ -41776,11 +42068,17 @@ function FeatureAnimatedCarousel({
         patternOpacity,
         patternClassName,
         className,
-        children: /* @__PURE__ */ jsx("div", { className: cn(
-          "relative flex min-h-[500px] flex-col-reverse gap-8 overflow-hidden rounded-3xl p-6 md:flex-row md:items-center md:p-12 lg:min-h-[600px]",
-          getNestedCardBg(background),
-          getNestedCardTextColor(background)
-        ) })
+        containerClassName,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "relative flex min-h-[500px] flex-col-reverse gap-8 overflow-hidden rounded-3xl p-6 md:flex-row md:items-center md:p-12 lg:min-h-[600px]",
+              getNestedCardBg(background),
+              getNestedCardTextColor(background)
+            )
+          }
+        )
       }
     );
   }
@@ -41794,60 +42092,105 @@ function FeatureAnimatedCarousel({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs("div", { className: cn(
-        "relative flex min-h-[500px] flex-col-reverse gap-8 overflow-hidden rounded-3xl p-6 md:flex-row md:items-center md:p-12 lg:min-h-[600px]",
-        getNestedCardBg(background),
-        getNestedCardTextColor(background)
-      ), children: [
-        /* @__PURE__ */ jsx(
-          FeaturesDesktop,
-          {
-            features,
-            handleNext,
-            handlePrevious,
-            activeIndex,
-            handleFeatureClick,
-            isPreviousDisabled,
-            isNextDisabled
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          FeaturesMobile,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
+        title || description ? /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6 text-left", headerClassName), children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                titleClassName
+              ),
+              children: title
+            }
+          )),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("max-w-lg md:max-w-md", descriptionClassName),
+              children: description
+            }
+          ))
+        ] }) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            features,
-            handleNext,
-            handlePrevious,
-            activeIndex,
-            direction,
-            isPreviousDisabled,
-            isNextDisabled
+            className: cn(
+              "relative flex min-h-[500px] flex-col-reverse gap-8 overflow-hidden rounded-3xl p-6 md:flex-row md:items-center md:p-12 lg:min-h-[600px]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                FeaturesDesktop,
+                {
+                  features,
+                  handleNext,
+                  handlePrevious,
+                  activeIndex,
+                  handleFeatureClick,
+                  isPreviousDisabled,
+                  isNextDisabled
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                FeaturesMobile,
+                {
+                  features,
+                  handleNext,
+                  handlePrevious,
+                  activeIndex,
+                  direction,
+                  isPreviousDisabled,
+                  isNextDisabled
+                }
+              ),
+              currentFeature?.image && /* @__PURE__ */ jsxs("div", { className: "relative w-full h-[250px] md:h-auto overflow-hidden rounded-2xl md:absolute md:right-8 md:top-8 md:bottom-8 md:w-1/2 shadow-xl", children: [
+                currentFeature.href && /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-10 bg-background rounded-full h-fit w-fit p-2 flex items-center justify-center md:hidden", children: /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    href: currentFeature.href,
+                    size: "icon-lg",
+                    className: "text-foreground",
+                    children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", custom: direction, children: /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    custom: direction,
+                    variants: imageVariants,
+                    initial: "enter",
+                    animate: "center",
+                    exit: "exit",
+                    transition: {
+                      x: { type: "spring", stiffness: 300, damping: 30 },
+                      opacity: { duration: 0.2 }
+                    },
+                    className: "h-full w-full",
+                    children: /* @__PURE__ */ jsx(
+                      Img,
+                      {
+                        src: currentFeature.image,
+                        alt: currentFeature.imageAlt || (typeof currentFeature.title === "string" ? currentFeature.title : "Feature image"),
+                        className: "h-full w-full object-cover",
+                        optixFlowConfig
+                      }
+                    )
+                  },
+                  activeIndex
+                ) })
+              ] })
+            ]
           }
-        ),
-        currentFeature?.image && /* @__PURE__ */ jsx("div", { className: "relative flex-1 overflow-hidden rounded-2xl md:absolute md:right-8 md:top-8 md:bottom-8 md:w-1/2", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", custom: direction, children: /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            custom: direction,
-            variants: imageVariants,
-            initial: "enter",
-            animate: "center",
-            exit: "exit",
-            transition: {
-              x: { type: "spring", stiffness: 300, damping: 30 },
-              opacity: { duration: 0.2 }
-            },
-            className: "h-full w-full",
-            children: /* @__PURE__ */ jsx(
-              Img,
-              {
-                src: currentFeature.image,
-                alt: currentFeature.imageAlt || (typeof currentFeature.title === "string" ? currentFeature.title : "Feature image"),
-                className: "h-full w-full object-cover",
-                optixFlowConfig
-              }
-            )
-          },
-          activeIndex
-        ) }) })
+        )
       ] })
     }
   );