@opensite/ui 1.2.5 → 1.2.7

package/dist/registry.cjs

@@ -24432,10 +24432,22 @@ function FeatureCarouselProgress({
                   children: title
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx(
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "max-w-lg md:max-w-md text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: cn("max-w-lg md:max-w-md", descriptionClassName),
+                  className: cn(
+                    "max-w-lg md:max-w-md text-balance",
+                    descriptionClassName
+                  ),
                   children: description
                 }
               ))
@@ -25310,7 +25322,7 @@ function FeatureTabbedContentImage({
   slidesSlot,
   defaultTab,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   titleClassName,
   descriptionClassName,
@@ -25339,10 +25351,10 @@ function FeatureTabbedContentImage({
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "li",
           {
-            className: cn("flex items-center gap-2", itemClassName),
+            className: cn("flex items-start gap-2", itemClassName),
             children: [
-              iconElement,
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: content })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center mt-1.5", children: iconElement }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-base", children: content })
             ]
           },
           index
@@ -25447,7 +25459,7 @@ function FeatureTabbedContentImage({
                     "h2",
                     {
                       className: cn(
-                        "mb-4 text-2xl font-semibold lg:text-4xl",
+                        "mb-4 text-xl font-semibold md:text-2xl",
                         slide.titleClassName
                       ),
                       children: slide.title
@@ -25456,30 +25468,18 @@ function FeatureTabbedContentImage({
                     "div",
                     {
                       className: cn(
-                        "mb-4 text-2xl font-semibold lg:text-4xl",
+                        "mb-4 text-xl font-semibold md:text-2xl",
                         slide.titleClassName
                       ),
                       children: slide.title
                     }
                   )),
-                  slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                    "p",
-                    {
-                      className: cn(" lg:text-xl", slide.descriptionClassName),
-                      children: slide.description
-                    }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: cn("lg:text-xl", slide.descriptionClassName),
-                      children: slide.description
-                    }
-                  )),
+                  slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-md", slide.descriptionClassName), children: slide.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-md", slide.descriptionClassName), children: slide.description })),
                   slide.features && slide.features.length > 0 || slide.featuresSlot ? /* @__PURE__ */ jsxRuntime.jsx(
                     "ul",
                     {
                       className: cn(
-                        "mt-8 grid grid-cols-1 gap-2 lg:grid-cols-2",
+                        "mt-8 grid grid-cols-1 gap-4",
                         slide.featuresClassName
                       ),
                       children: renderFeatures(slide)
@@ -25511,7 +25511,7 @@ function FeatureTabbedContentImage({
     if (slides && slides.length > 0) return slides[0].id.toString();
     return "1";
   }, [defaultTab, slides]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
@@ -25521,12 +25521,12 @@ function FeatureTabbedContentImage({
       patternClassName,
       className,
       containerClassName,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-10", children: [
+        (title || description) && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
-              "mx-auto flex max-w-3xl flex-col items-center gap-6",
+              "mx-auto flex max-w-full md:max-w-md text-balance flex-col gap-2.5 text-center",
               headerClassName
             ),
             children: [
@@ -25534,7 +25534,7 @@ function FeatureTabbedContentImage({
                 "h2",
                 {
                   className: cn(
-                    "text-center text-3xl font-semibold lg:text-5xl",
+                    "text-4xl font-semibold md:text-5xl",
                     titleClassName
                   ),
                   children: title
@@ -25543,35 +25543,17 @@ function FeatureTabbedContentImage({
                 "div",
                 {
                   className: cn(
-                    "text-center text-3xl font-semibold lg:text-5xl",
+                    "text-4xl font-semibold md:text-5xl",
                     titleClassName
                   ),
                   children: title
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "text-center text-balance  lg:text-xl",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(
-                    "text-center text-balance  lg:text-xl",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(descriptionClassName), children: description }))
             ]
           }
         ),
-        (slidesSlot || slides && slides.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-12", tabsWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+        (slidesSlot || slides && slides.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", tabsWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
           Tabs,
           {
             defaultValue: effectiveDefaultTab,
@@ -25582,7 +25564,7 @@ function FeatureTabbedContentImage({
             children: slidesContent
           }
         ) })
-      ]
+      ] })
     }
   );
 }
@@ -26637,7 +26619,7 @@ function FeatureCategoryImageCards({
   features,
   featuresSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   badgeClassName,
   titleClassName,
@@ -26646,43 +26628,74 @@ function FeatureCategoryImageCards({
   cardClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
 }) {
-  const renderFeatureImage = React52.useCallback((feature) => {
-    if (feature.imageSlot) return feature.imageSlot;
-    if (feature.imageSrc) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: feature.imageSrc,
-          alt: feature.imageAlt || "Feature image",
-          className: cn("w-full rounded-xl object-cover", feature.imageClassName),
-          loading: "lazy",
-          optixFlowConfig
-        }
-      );
-    }
-    return null;
-  }, [optixFlowConfig]);
+  const renderFeatureImage = React52.useCallback(
+    (feature) => {
+      if (feature.imageSlot) return feature.imageSlot;
+      if (feature.imageSrc) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: feature.imageSrc,
+            alt: feature.imageAlt || "Feature image",
+            className: cn(
+              "w-full rounded-xl object-cover",
+              feature.imageClassName
+            ),
+            loading: "lazy",
+            optixFlowConfig
+          }
+        );
+      }
+      return null;
+    },
+    [optixFlowConfig]
+  );
   const featuresContent = React52.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
-    return features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cn(
-      "border-none",
-      getNestedCardBg(background),
-      getNestedCardTextColor(background),
-      cardClassName,
-      feature.className
-    ), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "text-center", children: [
-        feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: cn("text-lg font-semibold md:text-2xl", feature.titleClassName), children: feature.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-lg font-semibold md:text-2xl", feature.titleClassName), children: feature.title })),
-        feature.category && (typeof feature.category === "string" ? /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { className: cn("md:text-lg", getTextColor(background, "muted"), feature.categoryClassName), children: feature.category }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("md:text-lg", getTextColor(background, "muted"), feature.categoryClassName), children: feature.category }))
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "px-7 pb-7", children: renderFeatureImage(feature) })
-    ] }, index));
+    return features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      Card,
+      {
+        className: cn("border-none", cardClassName, feature.className),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "text-center", children: [
+            feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              CardTitle,
+              {
+                className: cn(
+                  "text-lg font-semibold md:text-2xl",
+                  feature.titleClassName
+                ),
+                children: feature.title
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "text-lg font-semibold md:text-2xl",
+                  feature.titleClassName
+                ),
+                children: feature.title
+              }
+            )),
+            feature.category && (typeof feature.category === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              CardDescription,
+              {
+                className: cn("md:text-lg", feature.categoryClassName),
+                children: feature.category
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("md:text-lg", feature.categoryClassName), children: feature.category }))
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "px-7 pb-7", children: renderFeatureImage(feature) })
+        ]
+      },
+      index
+    ));
   }, [featuresSlot, features, cardClassName, renderFeatureImage]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -26695,12 +26708,48 @@ function FeatureCategoryImageCards({
       className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center justify-center gap-4 text-center", headerClassName), children: [
-          badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: badgeClassName, children: badge }),
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-3xl font-semibold md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-semibold md:text-5xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-2xl md:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("max-w-2xl md:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }))
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mt-20 grid max-w-7xl gap-7 md:grid-cols-2 lg:grid-cols-3", gridClassName), children: featuresContent })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col items-center justify-center gap-4 text-center",
+              headerClassName
+            ),
+            children: [
+              badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: badgeClassName, children: badge }),
+              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-semibold md:text-5xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-3xl font-semibold md:text-5xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-2xl md:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("max-w-2xl md:text-lg", descriptionClassName), children: description }))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mx-auto mt-20 grid max-w-7xl gap-7 md:grid-cols-2 lg:grid-cols-3",
+              gridClassName
+            ),
+            children: featuresContent
+          }
+        )
       ]
     }
   );
@@ -27133,25 +27182,7 @@ function FeatureIconGridMuted({
                   children: title
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    getTextColor(background, "muted"),
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(
-                    getTextColor(background, "muted"),
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(descriptionClassName), children: description }))
             ]
           }
         ),
@@ -27159,7 +27190,7 @@ function FeatureIconGridMuted({
           "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",
+              "mx-auto mt-20 grid max-w-7xl gap-7 md:grid-cols-2 lg:grid-cols-3",
               gridClassName
             ),
             children: featuresContent
@@ -27411,7 +27442,7 @@ function FeatureAccordionImage({
             AccordionTrigger,
             {
               className: cn(
-                "text-left text-lg font-medium",
+                "text-left text-md md:text-lg font-medium",
                 item.triggerClassName
               ),
               children: item.title
@@ -27459,12 +27490,12 @@ function FeatureAccordionImage({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center space-y-6 md:space-y-16", children: [
         (title || description) && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
-              "text-center max-w-full md:max-w-md text-balance",
+              "text-left md:text-center max-w-full md:max-w-md text-balance",
               headerClassName
             ),
             children: [
@@ -27472,7 +27503,7 @@ function FeatureAccordionImage({
                 "h2",
                 {
                   className: cn(
-                    "text-xl font-semibold md:text-2xl lg:text-3xl",
+                    "text-2xl font-semibold md:text-3xl lg:text-4xl",
                     titleClassName
                   ),
                   children: title
@@ -41856,17 +41887,17 @@ var FeatureCard = React52__namespace.memo(
           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"
+          "relative flex items-start gap-4 bg-background text-foreground md:w-fit md:max-w-sm",
+          isActive ? "shadow-xl overflow-visible" : "cursor-pointer shadow-none hover:shadow-xl transition-shadow duration-500 overflow-hidden"
         ),
         onClick,
         children: [
-          isActive && feature.href && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          isActive && feature.href && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 bg-background rounded-full h-fit w-fit p-2 flex items-center justify-center z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
             Pressable,
             {
               href: feature.href,
               size: "icon-lg",
-              className: "text-foreground",
+              className: "bg-primary text-primary-foreground",
               children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right" })
             }
           ) }),
@@ -42021,7 +42052,7 @@ var FeaturesMobile = React52__namespace.memo(
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            className: "rounded-full border bg-background/50 p-2 hover:bg-background disabled:opacity-50",
+            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",
@@ -42031,7 +42062,7 @@ var FeaturesMobile = React52__namespace.memo(
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            className: "rounded-full border bg-background/50 p-2 hover:bg-background disabled:opacity-50",
+            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",
@@ -42055,6 +42086,7 @@ function FeatureAnimatedCarousel({
   patternOpacity,
   patternClassName,
   headerClassName,
+  blockCardClassName,
   spacing = "py-12 md:py-32",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
@@ -42113,9 +42145,7 @@ function FeatureAnimatedCarousel({
           "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)
+              "relative flex min-h-[500px] flex-col-reverse gap-8 overflow-hidden rounded-3xl bg-muted p-6 md:flex-row md:items-center md:p-12 lg:min-h-[600px]"
             )
           }
         )
@@ -42132,40 +42162,51 @@ function FeatureAnimatedCarousel({
       patternOpacity,
       patternClassName,
       className,
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
-        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-6 text-left", headerClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn("max-w-lg md:max-w-md", descriptionClassName),
-              children: description
-            }
-          ))
-        ] }) : null,
+        title || description ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-4 md:gap-6 text-left",
+              headerClassName
+            ),
+            children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn("max-w-lg md:max-w-md", descriptionClassName),
+                  children: description
+                }
+              ))
+            ]
+          }
+        ) : null,
         /* @__PURE__ */ jsxRuntime.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]"
+              "relative flex min-h-full md:min-h-[500px] flex-col-reverse gap-5 md:gap-8 bg-muted overflow-hidden rounded-3xl p-4 md:p-6 md:flex-row md:items-center lg:p-12 lg:min-h-[600px]",
+              blockCardClassName
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -42192,30 +42233,30 @@ function FeatureAnimatedCarousel({
                   isNextDisabled
                 }
               ),
-              currentFeature?.image && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                  Pressable,
-                  {
-                    href: currentFeature.href,
-                    size: "icon-lg",
-                    className: "text-foreground",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right" })
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", custom: direction, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  framerMotion.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__ */ jsxRuntime.jsx(
+              currentFeature?.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-[250px] md:h-auto md:absolute md:right-8 md:top-8 md:bottom-8 md:w-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", custom: direction, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                framerMotion.motion.div,
+                {
+                  custom: direction,
+                  variants: imageVariants,
+                  initial: "enter",
+                  animate: "center",
+                  exit: "exit",
+                  transition: {
+                    x: { type: "spring", stiffness: 300, damping: 30 },
+                    opacity: { duration: 0.3 }
+                  },
+                  className: "relative h-full w-full shadow-xl overflow-hidden rounded-2xl",
+                  children: [
+                    currentFeature.href && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-10 rounded-full h-fit w-fit shadow-md hover:shadow-2xl flex items-center justify-center md:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      Pressable,
+                      {
+                        href: currentFeature.href,
+                        size: "icon-lg",
+                        className: "bg-primary text-primary-foreground",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
                       img.Img,
                       {
                         src: currentFeature.image,
@@ -42224,10 +42265,10 @@ function FeatureAnimatedCarousel({
                         optixFlowConfig
                       }
                     )
-                  },
-                  activeIndex
-                ) })
-              ] })
+                  ]
+                },
+                activeIndex
+              ) }) })
             ]
           }
         )