@opensite/ui 0.8.1 → 0.8.3

package/dist/registry.cjs

@@ -18685,19 +18685,21 @@ function CarouselHorizontalCards({
                 "div",
                 {
                   className: cn(
-                    "flex flex-row justify-start gap-4 pl-4",
+                    "flex flex-row justify-start gap-2",
                     carouselClassName
                   ),
                   children: [
                     items?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
                       framerMotion.motion.div,
                       {
-                        className: cn(
-                          "rounded-lg last:pr-[5%] md:last:pr-[33%]"
-                        ),
+                        className: cn("rounded-lg last:pr-[5%] md:last:pr-[33%]"),
                         initial: { opacity: 0, y: 20 },
                         animate: { opacity: 1, y: 0 },
-                        transition: { duration: 0.5, delay: 0.2 * index, ease: "easeOut" },
+                        transition: {
+                          duration: 0.5,
+                          delay: 0.2 * index,
+                          ease: "easeOut"
+                        },
                         children: /* @__PURE__ */ jsxRuntime.jsx(
                           "div",
                           {
@@ -18769,7 +18771,7 @@ function CarouselHorizontalCards({
               onNext: scrollRight,
               canScrollPrevious: !isAtStart,
               canScrollNext: !isAtEnd,
-              className: cn("mr-0 md:mr-10", navigationClassName)
+              className: cn("mr-0", navigationClassName)
             }
           )
         ] })
@@ -18784,43 +18786,57 @@ function CarouselImageHero({
   actions,
   actionsSlot,
   images,
-  autoPlayInterval = 5e3,
+  autoPlayInterval = 7500,
   className,
-  containerClassName,
+  containerClassName = "mx-none md:mx-auto w-screen md:w-full max-w-screen md:max-w-7xl relative z-10 rounded-none md:rounded-2xl overflow-hidden shadow-none md:shadow-xl",
   contentClassName,
   badgeClassName,
   headingClassName,
   descriptionClassName,
   actionsClassName,
   imageClassName,
-  navigationClassName,
   indicatorsClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing = "py-0 md:py-32",
   pattern,
   patternOpacity
 }) {
   const [currentImageIndex, setCurrentImageIndex] = React52__namespace.useState(0);
-  React52__namespace.useEffect(() => {
-    const interval = setInterval(() => {
-      setCurrentImageIndex((prevIndex) => (prevIndex + 1) % (images?.length ?? 1));
-    }, autoPlayInterval);
-    return () => clearInterval(interval);
-  }, [images?.length, autoPlayInterval]);
-  const goToNextImage = () => {
+  const intervalRef = React52__namespace.useRef(null);
+  const goToNext = React52__namespace.useCallback(() => {
     setCurrentImageIndex((prevIndex) => (prevIndex + 1) % (images?.length ?? 1));
-  };
-  const goToPreviousImage = () => {
-    setCurrentImageIndex(
-      (prevIndex) => (prevIndex - 1 + (images?.length ?? 1)) % (images?.length ?? 1)
-    );
-  };
+  }, [images?.length]);
+  const resetInterval = React52__namespace.useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+    intervalRef.current = setInterval(goToNext, autoPlayInterval);
+  }, [goToNext, autoPlayInterval]);
+  const goToSlide = React52__namespace.useCallback((index) => {
+    setCurrentImageIndex(index);
+    resetInterval();
+  }, [resetInterval]);
+  React52__namespace.useEffect(() => {
+    resetInterval();
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [resetInterval]);
   const renderActions = () => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -18842,11 +18858,15 @@ function CarouselImageHero({
     {
       background,
       spacing,
-      className: cn("relative min-h-[600px] overflow-hidden", className),
+      className: cn(
+        "relative min-h-screen md:min-h-[600px] overflow-hidden",
+        className
+      ),
       pattern,
       patternOpacity,
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("absolute inset-0", imageClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("absolute inset-0 bg-black", imageClassName), children: [
           images?.map((image, index) => /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -18870,50 +18890,79 @@ function CarouselImageHero({
             index
           )),
           /* @__PURE__ */ jsxRuntime.jsx(
-            Pressable,
-            {
-              onClick: goToPreviousImage,
-              asButton: true,
-              variant: "ghost",
-              size: "icon",
-              className: cn("absolute left-4 top-1/2 z-20 hidden -translate-y-1/2 rounded-full bg-background/30 p-2 backdrop-blur-sm transition-colors hover:bg-background/50 md:block", navigationClassName),
-              "aria-label": "Previous image",
-              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 24, className: "text-white" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Pressable,
-            {
-              onClick: goToNextImage,
-              asButton: true,
-              variant: "ghost",
-              size: "icon",
-              className: cn("absolute right-4 top-1/2 z-20 hidden -translate-y-1/2 rounded-full bg-background/30 p-2 backdrop-blur-sm transition-colors hover:bg-background/50 md:block", navigationClassName),
-              "aria-label": "Next image",
-              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 24, className: "text-white" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute bottom-6 left-1/2 z-10 flex -translate-x-1/2 gap-3", indicatorsClassName), children: images?.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+            "div",
             {
-              onClick: () => setCurrentImageIndex(index),
               className: cn(
-                "flex h-3 w-3 items-center justify-center rounded-full transition-colors",
-                index === currentImageIndex ? "bg-white" : "bg-white/50 hover:bg-white/80"
+                "absolute bottom-6 left-1/2 z-10 flex -translate-x-1/2 gap-3",
+                indicatorsClassName
               ),
-              "aria-label": `Go to image ${index + 1}`
-            },
-            index
-          )) })
+              children: images?.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => goToSlide(index),
+                  className: cn(
+                    "flex h-4 w-4 items-center justify-center rounded-full transition-colors",
+                    index === currentImageIndex ? "bg-white" : "bg-white/50 hover:bg-white/80"
+                  ),
+                  "aria-label": `Go to image ${index + 1}`
+                },
+                index
+              ))
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container relative z-10 mx-auto flex min-h-[600px] flex-col items-center justify-center px-4 py-16 text-center md:px-6 md:py-20", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-4xl space-y-6", contentClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-            badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("inline-flex items-center rounded-full bg-white/10 px-3 py-1 text-sm font-medium text-white backdrop-blur-sm", badgeClassName), children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: badge }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: badge })),
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-primary-foreground dark:text-primary sm:text-5xl md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xl text-primary-foreground dark:text-primary", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-          ] }),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col justify-center gap-4 sm:flex-row", actionsClassName), children: renderActions() })
-        ] }) })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "relative z-10 mx-auto flex min-h-[600px] flex-col items-center justify-center px-4 py-16 text-center md:px-16 md:py-20"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-4xl space-y-6", contentClassName), children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+                badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "inline-flex items-center rounded-full bg-white/10 px-3 py-1 text-sm font-medium text-white backdrop-blur-sm",
+                      badgeClassName
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: badge })
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: badge })),
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "text-4xl font-bold sm:text-5xl md:text-6xl text-balance text-shadow",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "text-xl text-balance text-shadow",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+              ] }),
+              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-col justify-center gap-4 sm:flex-row",
+                    actionsClassName
+                  ),
+                  children: renderActions()
+                }
+              )
+            ] })
+          }
+        )
       ]
     }
   );
@@ -19217,7 +19266,7 @@ function CarouselPortfolioHero({
   actionsSlot,
   autoPlayInterval = 5e3,
   className,
-  containerClassName,
+  containerClassName = "mx-auto w-full p-0 px-0 sm:px-0 lg:px-0 max-w-full relative z-10 h-full flex flex-col justify-center",
   contentClassName,
   tagClassName,
   titleClassName,
@@ -19233,23 +19282,45 @@ function CarouselPortfolioHero({
   slideMediaBrightness = "50"
 }) {
   const [currentIndex, setCurrentIndex] = React52__namespace.useState(0);
+  const intervalRef = React52__namespace.useRef(null);
+  const resetInterval = React52__namespace.useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+    intervalRef.current = setInterval(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % (slides?.length ?? 1));
+    }, autoPlayInterval);
+  }, [autoPlayInterval, slides?.length]);
   const goToNext = React52__namespace.useCallback(() => {
     setCurrentIndex((prevIndex) => (prevIndex + 1) % (slides?.length ?? 1));
-  }, [slides?.length]);
+    resetInterval();
+  }, [slides?.length, resetInterval]);
   const goToPrev = React52__namespace.useCallback(() => {
     setCurrentIndex(
       (prevIndex) => (prevIndex - 1 + (slides?.length ?? 1)) % (slides?.length ?? 1)
     );
-  }, [slides?.length]);
+    resetInterval();
+  }, [slides?.length, resetInterval]);
   React52__namespace.useEffect(() => {
-    const interval = setInterval(goToNext, autoPlayInterval);
-    return () => clearInterval(interval);
-  }, [goToNext, autoPlayInterval]);
+    resetInterval();
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [resetInterval]);
   const renderActions = () => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -19275,6 +19346,7 @@ function CarouselPortfolioHero({
       className: cn("relative h-screen w-full overflow-hidden", className),
       pattern,
       patternOpacity,
+      containerClassName,
       children: [
         slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -19300,43 +19372,99 @@ function CarouselPortfolioHero({
           },
           slide.id
         )),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative z-10 flex h-full w-full flex-col justify-end px-6 pb-16 text-white md:px-8 lg:px-12", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-4xl", contentClassName), children: [
-          currentSlide?.tag && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: typeof currentSlide.tag === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("inline-block rounded-full bg-primary px-3 py-1 text-sm font-medium", tagClassName), children: currentSlide.tag }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: tagClassName, children: currentSlide.tag }) }),
-          currentSlide?.title && (typeof currentSlide.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold sm:text-5xl md:text-6xl", titleClassName), children: currentSlide.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: currentSlide.title })),
-          currentSlide?.description && (typeof currentSlide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-white/80 sm:text-xl md:max-w-2xl", descriptionClassName), children: currentSlide.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: currentSlide.description })),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-8 flex items-center gap-4", actionsClassName), children: [
-            renderActions(),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("ml-auto flex items-center gap-2", navigationClassName), children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Pressable,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "relative z-10 flex h-full w-full flex-col justify-end px-6 pb-16 text-white md:px-8 lg:px-12"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-4xl", contentClassName), children: [
+              currentSlide?.tag && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: typeof currentSlide.tag === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
                 {
-                  variant: "outline",
-                  size: "icon",
-                  className: "rounded-full border-white/40 bg-black/30 text-white hover:bg-black/50 hover:text-white",
-                  onClick: goToPrev,
-                  asButton: true,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
+                  className: cn(
+                    "inline-block rounded-full bg-primary px-3 py-1 text-sm font-medium",
+                    tagClassName
+                  ),
+                  children: currentSlide.tag
                 }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Pressable,
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: tagClassName, children: currentSlide.tag }) }),
+              currentSlide?.title && (typeof currentSlide.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
                 {
-                  variant: "outline",
-                  size: "icon",
-                  className: "rounded-full border-white/40 bg-black/30 text-white hover:bg-black/50 hover:text-white",
-                  onClick: goToNext,
-                  asButton: true,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
+                  className: cn(
+                    "text-4xl font-bold sm:text-5xl md:text-6xl text-balance text-shadow",
+                    titleClassName
+                  ),
+                  children: currentSlide.title
                 }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("ml-3 text-sm text-white/80", counterClassName), children: [
-                currentIndex + 1,
-                " / ",
-                slides?.length ?? 0
-              ] })
-            ] })
-          ] })
-        ] }) }) })
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: currentSlide.title })),
+              currentSlide?.description && (typeof currentSlide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-4 text-lg text-white/80 sm:text-xl md:max-w-2xl  text-balance text-shadow",
+                    descriptionClassName
+                  ),
+                  children: currentSlide.description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: currentSlide.description })),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: cn("mt-8 flex items-center gap-4", actionsClassName),
+                  children: [
+                    renderActions(),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        className: cn(
+                          "ml-auto flex items-center gap-2",
+                          navigationClassName
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            Pressable,
+                            {
+                              variant: "outline",
+                              size: "icon",
+                              className: "rounded-full border-white/40 bg-black/30 text-white hover:bg-black/50 hover:text-white",
+                              onClick: goToPrev,
+                              asButton: true,
+                              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            Pressable,
+                            {
+                              variant: "outline",
+                              size: "icon",
+                              className: "rounded-full border-white/40 bg-black/30 text-white hover:bg-black/50 hover:text-white",
+                              onClick: goToNext,
+                              asButton: true,
+                              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsxs(
+                            "div",
+                            {
+                              className: cn("ml-3 text-sm text-white/80", counterClassName),
+                              children: [
+                                currentIndex + 1,
+                                " / ",
+                                slides?.length ?? 0
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }) })
+          }
+        )
       ]
     }
   );
@@ -19360,8 +19488,8 @@ function CarouselProductFeatureShowcase({
   actionsClassName,
   indicatorsClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
@@ -19405,7 +19533,14 @@ function CarouselProductFeatureShowcase({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-8 flex flex-wrap gap-3", children: actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -19430,105 +19565,151 @@ function CarouselProductFeatureShowcase({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container mx-auto px-4", containerClassName), children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading }))
-        ] }),
-        featuresSlot ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClassName, children: featuresSlot }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2 lg:gap-12", contentClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative aspect-square overflow-hidden rounded-2xl bg-muted lg:aspect-[4/3]", imageClassName), children: [
-            /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
-              framerMotion.motion.div,
-              {
-                custom: direction,
-                variants: slideVariants2,
-                initial: "enter",
-                animate: "center",
-                exit: "exit",
-                transition: { duration: 0.3, ease: "easeInOut" },
-                className: cn("absolute inset-0", activeFeature?.imageClassName),
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  img.Img,
-                  {
-                    src: currentImage,
-                    alt: typeof activeFeature?.title === "string" ? activeFeature.title : `Feature ${activeIndex + 1}`,
-                    className: "h-full w-full object-cover",
-                    optixFlowConfig
-                  }
-                )
-              },
-              `${activeIndex}-${activeColorIndex}`
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("absolute bottom-4 right-4 flex gap-2", navigationClassName), children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Pressable,
-                {
-                  onClick: goToPrev,
-                  asButton: true,
-                  variant: "outline",
-                  size: "icon",
-                  className: "flex h-10 w-10 items-center justify-center rounded-full border-border bg-background/90 text-foreground backdrop-blur-sm hover:bg-background",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
-                }
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl",
+                headingClassName
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Pressable,
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mt-4 text-lg text-muted-foreground",
+                subheadingClassName
+              ),
+              children: subheading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading }))
+        ] }),
+        featuresSlot ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClassName, children: featuresSlot }) : /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "grid gap-8 lg:grid-cols-2 lg:gap-12",
+              contentClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
                 {
-                  onClick: goToNext,
-                  asButton: true,
-                  variant: "outline",
-                  size: "icon",
-                  className: "flex h-10 w-10 items-center justify-center rounded-full border-border bg-background/90 text-foreground backdrop-blur-sm hover:bg-background",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsxs(
-              framerMotion.motion.div,
-              {
-                initial: { opacity: 0, y: 20 },
-                animate: { opacity: 1, y: 0 },
-                exit: { opacity: 0, y: -20 },
-                transition: { duration: 0.3 },
-                children: [
-                  activeFeature?.title && (typeof activeFeature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold md:text-3xl", children: activeFeature.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: activeFeature.title })),
-                  activeFeature?.description && (typeof activeFeature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: activeFeature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: activeFeature.description })),
-                  activeFeature?.colors && activeFeature.colors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-6", colorSelectorClassName), children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 text-sm font-medium", children: "Available Colors" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3", children: activeFeature.colors.map((color, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
+                  className: cn(
+                    "relative aspect-square overflow-hidden rounded-2xl bg-muted lg:aspect-4/3 shadow-lg",
+                    imageClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      framerMotion.motion.div,
                       {
-                        onClick: () => setActiveColorIndex(index),
+                        custom: direction,
+                        variants: slideVariants2,
+                        initial: "enter",
+                        animate: "center",
+                        exit: "exit",
+                        transition: { duration: 0.3, ease: "easeInOut" },
                         className: cn(
-                          "h-8 w-8 rounded-full border-2 transition-all",
-                          activeColorIndex === index ? "border-primary ring-2 ring-primary ring-offset-2" : "border-transparent hover:border-muted-foreground"
+                          "absolute inset-0",
+                          activeFeature?.imageClassName
                         ),
-                        style: { backgroundColor: color.value },
-                        title: color.name
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          img.Img,
+                          {
+                            src: currentImage,
+                            alt: typeof activeFeature?.title === "string" ? activeFeature.title : `Feature ${activeIndex + 1}`,
+                            className: "h-full w-full object-cover",
+                            optixFlowConfig
+                          }
+                        )
                       },
-                      color.name
-                    )) })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: renderActions() })
-                ]
-              },
-              activeIndex
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex gap-2", indicatorsClassName), children: features?.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: () => goToSlide(index),
-                className: cn(
-                  "h-2 rounded-full transition-all",
-                  activeIndex === index ? "w-8 bg-primary" : "w-2 bg-muted-foreground/30 hover:bg-muted-foreground/50"
-                )
-              },
-              index
-            )) })
-          ] })
-        ] })
+                      `${activeIndex}-${activeColorIndex}`
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        className: cn(
+                          "absolute bottom-4 right-4 flex gap-2",
+                          navigationClassName
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            Pressable,
+                            {
+                              onClick: goToPrev,
+                              asButton: true,
+                              variant: "outline",
+                              size: "icon",
+                              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            Pressable,
+                            {
+                              onClick: goToNext,
+                              asButton: true,
+                              variant: "outline",
+                              size: "icon",
+                              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  framerMotion.motion.div,
+                  {
+                    initial: { opacity: 0, y: 20 },
+                    animate: { opacity: 1, y: 0 },
+                    exit: { opacity: 0, y: -20 },
+                    transition: { duration: 0.3 },
+                    children: [
+                      activeFeature?.title && (typeof activeFeature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold md:text-3xl", children: activeFeature.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: activeFeature.title })),
+                      activeFeature?.description && (typeof activeFeature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: activeFeature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: activeFeature.description })),
+                      activeFeature?.colors && activeFeature.colors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-6", colorSelectorClassName), children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 text-sm font-medium", children: "Available Colors" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3", children: activeFeature.colors.map((color, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                          "button",
+                          {
+                            onClick: () => setActiveColorIndex(index),
+                            className: cn(
+                              "h-8 w-8 rounded-full border-2 transition-all",
+                              activeColorIndex === index ? "border-primary ring-2 ring-primary ring-offset-2" : "border-transparent hover:border-muted-foreground"
+                            ),
+                            style: { backgroundColor: color.value },
+                            title: color.name
+                          },
+                          color.name
+                        )) })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: renderActions() })
+                    ]
+                  },
+                  activeIndex
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex gap-2", indicatorsClassName), children: features?.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: () => goToSlide(index),
+                    className: cn(
+                      "h-2 rounded-full transition-all",
+                      activeIndex === index ? "w-8 bg-primary" : "w-2 bg-muted-foreground/30 hover:bg-muted-foreground/50"
+                    )
+                  },
+                  index
+                )) })
+              ] })
+            ]
+          }
+        )
       ] })
     }
   );
@@ -19584,12 +19765,16 @@ function SliderBtn({
 }
 function SliderWrapper({ children, value, className }) {
   const { active } = useProgressSliderContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "popLayout", children: active === value && /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", initial: false, children: active === value && /* @__PURE__ */ jsxRuntime.jsx(
     framerMotion.motion.div,
     {
-      initial: { opacity: 0 },
-      animate: { opacity: 1 },
-      exit: { opacity: 0 },
+      initial: { opacity: 0, scale: 0.98 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.98 },
+      transition: {
+        duration: 0.4,
+        ease: [0.4, 0, 0.2, 1]
+      },
       className: cn("", className),
       children
     },
@@ -19700,12 +19885,12 @@ function CarouselProgressSlider({
           pattern,
           patternOpacity,
           children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2", contentClassName), children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", imageClassName), children: [
-              slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative min-h-[400px]", imageClassName), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0", children: slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsxRuntime.jsx(
                 SliderWrapper,
                 {
                   value: slide.id,
-                  className: cn("", slide.className),
+                  className: cn("absolute inset-0", slide.className),
                   children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
                     img.Img,
                     {
@@ -19720,8 +19905,8 @@ function CarouselProgressSlider({
                   ) })
                 },
                 slide.id
-              )),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex justify-center lg:justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+              )) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative mt-4 flex justify-center lg:justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
                 Pressable,
                 {
                   onClick: togglePause,
@@ -19783,8 +19968,8 @@ function CarouselScrollingFeatureShowcase({
   featuresClassName,
   numberBadgeClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing = "md",
   pattern,
   patternOpacity
 }) {
@@ -19834,62 +20019,113 @@ function CarouselScrollingFeatureShowcase({
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container mx-auto px-4", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", subheadingClassName), children: subheading }))
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2 lg:gap-12", contentClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-24", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("aspect-video overflow-hidden rounded-xl bg-muted", imageClassName), children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: activeFeatureData && /* @__PURE__ */ jsxRuntime.jsx(
-            framerMotion.motion.div,
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
             {
-              initial: { opacity: 0 },
-              animate: { opacity: 1 },
-              exit: { opacity: 0 },
-              transition: { duration: 0.3 },
-              className: "h-full w-full",
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                img.Img,
-                {
-                  src: activeFeatureData.image,
-                  alt: typeof activeFeatureData.title === "string" ? activeFeatureData.title : `Feature ${activeFeatureData.id}`,
-                  className: cn("h-full w-full object-cover", activeFeatureData.imageClassName),
-                  optixFlowConfig
-                }
-              )
-            },
-            activeFeatureData.id
-          ) }) }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-24 lg:space-y-32", featuresClassName), children: featuresSlot ? featuresSlot : features?.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
+              className: cn(
+                "text-3xl font-bold tracking-tight md:text-4xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
             {
-              ref: setFeatureRef(feature.id),
-              "data-feature-id": feature.id,
               className: cn(
-                "scroll-mt-24 transition-opacity duration-300",
-                activeFeature === feature.id ? "opacity-100" : "opacity-50",
-                feature.className
+                "mt-4 text-lg text-muted-foreground",
+                subheadingClassName
               ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  img.Img,
-                  {
-                    src: feature.image,
-                    alt: typeof feature.title === "string" ? feature.title : `Feature ${feature.id}`,
-                    className: cn("h-full w-full object-cover", feature.imageClassName),
-                    optixFlowConfig
-                  }
-                ) }) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground", numberBadgeClassName), children: index + 1 }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                    feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold", children: feature.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: feature.title })),
-                    feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: feature.description }))
-                  ] })
-                ] })
-              ]
-            },
-            feature.id
-          )) })
-        ] })
+              children: subheading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", subheadingClassName), children: subheading }))
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "grid gap-8 lg:grid-cols-2 lg:gap-12",
+              contentClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-24", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "aspect-video overflow-hidden rounded-xl bg-muted",
+                    imageClassName
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: activeFeatureData && /* @__PURE__ */ jsxRuntime.jsx(
+                    framerMotion.motion.div,
+                    {
+                      initial: { opacity: 0 },
+                      animate: { opacity: 1 },
+                      exit: { opacity: 0 },
+                      transition: { duration: 0.3 },
+                      className: "h-full w-full",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        img.Img,
+                        {
+                          src: activeFeatureData.image,
+                          alt: typeof activeFeatureData.title === "string" ? activeFeatureData.title : `Feature ${activeFeatureData.id}`,
+                          className: cn(
+                            "h-full w-full object-cover",
+                            activeFeatureData.imageClassName
+                          ),
+                          optixFlowConfig
+                        }
+                      )
+                    },
+                    activeFeatureData.id
+                  ) })
+                }
+              ) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-24 lg:space-y-32", featuresClassName), children: featuresSlot ? featuresSlot : features?.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  ref: setFeatureRef(feature.id),
+                  "data-feature-id": feature.id,
+                  className: cn(
+                    "scroll-mt-24 transition-opacity duration-300",
+                    activeFeature === feature.id ? "opacity-100" : "opacity-50",
+                    feature.className
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      img.Img,
+                      {
+                        src: feature.image,
+                        alt: typeof feature.title === "string" ? feature.title : `Feature ${feature.id}`,
+                        className: cn(
+                          "h-full w-full object-cover",
+                          feature.imageClassName
+                        ),
+                        optixFlowConfig
+                      }
+                    ) }) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground",
+                            numberBadgeClassName
+                          ),
+                          children: index + 1
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                        feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold", children: feature.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: feature.title })),
+                        feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: feature.description }))
+                      ] })
+                    ] })
+                  ]
+                },
+                feature.id
+              )) })
+            ]
+          }
+        )
       ] })
     }
   );
@@ -20090,17 +20326,28 @@ function FeatureShowcase({
   contentClassName,
   mediaClassName,
   arrowClassName,
-  equalizeOnMobile = true,
-  stretchMediaOnMobile = true
+  equalizeOnMobile,
+  stretchMediaOnMobile,
+  background,
+  spacing,
+  pattern,
+  patternOpacity,
+  patternClassName
 }) {
-  const baseArrowClassName = "bottom-4 top-auto size-12 translate-y-0 rounded-full border border-current bg-transparent text-current shadow-sm focus:ring-current focus:ring-offset-2 focus:ring-offset-transparent hover:bg-current/10 md:bottom-6";
+  const baseArrowClassName = React52.useMemo(
+    () => "bottom-4 top-auto size-12 translate-y-0 rounded-full border border-current bg-transparent text-current shadow-sm focus:ring-current focus:ring-offset-2 focus:ring-offset-transparent hover:bg-current/10 md:bottom-6",
+    []
+  );
   const [mobileSlideHeight, setMobileSlideHeight] = React52.useState(
     null
   );
   const slideRefs = React52.useRef([]);
-  const mediaWrapperClassName = equalizeOnMobile && stretchMediaOnMobile ? "flex-1 min-h-0 md:flex-none" : "";
+  const mediaWrapperClassName = React52.useMemo(
+    () => equalizeOnMobile && stretchMediaOnMobile ? "flex-1 min-h-0 md:flex-none" : "",
+    [equalizeOnMobile, stretchMediaOnMobile]
+  );
   React52.useEffect(() => {
-    if (!equalizeOnMobile) {
+    if (!equalizeOnMobile || !items || items.length === 0) {
       setMobileSlideHeight(null);
       return;
     }
@@ -20132,10 +20379,10 @@ function FeatureShowcase({
       window.removeEventListener("resize", updateHeights);
       resizeObserver?.disconnect();
     };
-  }, [equalizeOnMobile, items.length]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
-    children,
-    /* @__PURE__ */ jsxRuntime.jsxs(Carousel, { className: carouselClassName, children: [
+  }, [equalizeOnMobile, items]);
+  const carouselContent = React52.useMemo(() => {
+    if (!items || items.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(Carousel, { className: carouselClassName, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-18 md:pb-24", children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "ease-in", children: items.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -20148,8 +20395,8 @@ function FeatureShowcase({
             slideClassName
           ),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", contentClassName), children: item.content }),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            item.content && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", contentClassName), children: item.content }),
+            item.mediaComponent && /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
                 className: cn(
@@ -20175,8 +20422,23 @@ function FeatureShowcase({
           className: cn(baseArrowClassName, "right-4 md:right-6", arrowClassName)
         }
       )
-    ] })
-  ] });
+    ] });
+  }, [items, carouselClassName, equalizeOnMobile, mobileSlideHeight, slideClassName, contentClassName, mediaWrapperClassName, mediaClassName, baseArrowClassName, arrowClassName]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      patternClassName,
+      className,
+      children: [
+        children,
+        carouselContent
+      ]
+    }
+  );
 }
 function FeatureSplitImage({
   title,
@@ -20205,40 +20467,19 @@ function FeatureSplitImage({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      if (action.children) {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          Pressable,
-          {
-            href: action.href,
-            onClick: action.onClick,
-            variant: action.variant,
-            size: action.size,
-            className: action.className,
-            "aria-label": action["aria-label"],
-            asButton: true,
-            children: action.children
-          },
-          index
-        );
-      }
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        Pressable,
-        {
-          href: action.href,
-          onClick: action.onClick,
-          variant: action.variant,
-          size: action.size,
-          className: action.className,
-          "aria-label": action["aria-label"],
-          asButton: true,
-          children: [
-            action.icon,
-            action.label,
-            action.iconAfter
-          ]
-        },
-        index
-      );
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { className: actionClassName, asButton: true, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] }) }, index);
     });
   }, [actionsSlot, actions]);
   const imageContent = React52.useMemo(() => {
@@ -20248,7 +20489,7 @@ function FeatureSplitImage({
       img.Img,
       {
         src: imageSrc,
-        alt: imageAlt || "Feature illustration",
+        alt: imageAlt || "",
         className: cn("max-h-96 w-full rounded-md object-cover", imageClassName),
         loading: "lazy",
         optixFlowConfig
@@ -20269,7 +20510,7 @@ function FeatureSplitImage({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center text-center lg:items-start lg:text-left", contentClassName), children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl", titleClassName), children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description })),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", actionsClassName), children: actionsContent })
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", actionsClassName), children: actionsContent })
         ] }),
         imageContent
       ] })
@@ -20303,40 +20544,19 @@ function FeatureSplitImageReverse({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      if (action.children) {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          Pressable,
-          {
-            href: action.href,
-            onClick: action.onClick,
-            variant: action.variant,
-            size: action.size,
-            className: action.className,
-            "aria-label": action["aria-label"],
-            asButton: true,
-            children: action.children
-          },
-          index
-        );
-      }
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        Pressable,
-        {
-          href: action.href,
-          onClick: action.onClick,
-          variant: action.variant,
-          size: action.size,
-          className: action.className,
-          "aria-label": action["aria-label"],
-          asButton: true,
-          children: [
-            action.icon,
-            action.label,
-            action.iconAfter
-          ]
-        },
-        index
-      );
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { className: actionClassName, asButton: true, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] }) }, index);
     });
   }, [actionsSlot, actions]);
   const imageContent = React52.useMemo(() => {
@@ -20346,7 +20566,7 @@ function FeatureSplitImageReverse({
       img.Img,
       {
         src: imageSrc,
-        alt: imageAlt || "Feature illustration",
+        alt: imageAlt || "",
         className: cn("max-h-96 w-full rounded-md object-cover", imageClassName),
         loading: "lazy",
         optixFlowConfig
@@ -20368,7 +20588,7 @@ function FeatureSplitImageReverse({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center text-center lg:items-start lg:text-left", contentClassName), children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl", titleClassName), children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description })),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", actionsClassName), children: actionsContent })
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", actionsClassName), children: actionsContent })
         ] })
       ] })
     }
@@ -20391,39 +20611,37 @@ function FeatureIconGridBordered({
   patternOpacity,
   patternClassName
 }) {
+  const renderIcon = React52.useCallback((feature) => {
+    if (feature.icon) return feature.icon;
+    if (feature.iconName) {
+      return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName, size: 20, className: "md:size-6" });
+    }
+    return null;
+  }, []);
   const featuresContent = React52.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
-    return features.map((feature, index) => {
-      const renderIcon = () => {
-        if (feature.icon) return feature.icon;
-        if (feature.iconName) {
-          return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName, size: 20, className: "md:size-6" });
-        }
-        return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/star", size: 20, className: "md:size-6" });
-      };
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: cn("relative flex gap-3 rounded-lg border-dashed md:block md:border-l md:p-5", cardClassName, feature.className),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-8 flex size-10 shrink-0 items-center justify-center rounded-full bg-accent md:size-12", feature.iconClassName), children: renderIcon() }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: cn("font-medium md:mb-2 md:text-xl", feature.titleClassName), children: [
-                feature.title,
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
-              ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("font-medium md:mb-2 md:text-xl", feature.titleClassName), children: [
-                feature.title,
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
-              ] })),
-              feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }))
-            ] })
-          ]
-        },
-        index
-      );
-    });
-  }, [featuresSlot, features, cardClassName]);
+    return features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn("relative flex gap-3 rounded-lg border-dashed md:block md:border-l md:p-5", cardClassName, feature.className),
+        children: [
+          (feature.icon || feature.iconName) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-8 flex size-10 shrink-0 items-center justify-center rounded-full bg-accent md:size-12", feature.iconClassName), children: renderIcon(feature) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: cn("font-medium md:mb-2 md:text-xl", feature.titleClassName), children: [
+              feature.title,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("font-medium md:mb-2 md:text-xl", feature.titleClassName), children: [
+              feature.title,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
+            ] })),
+            feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }))
+          ] })
+        ]
+      },
+      index
+    ));
+  }, [featuresSlot, features, cardClassName, renderIcon]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -20437,7 +20655,7 @@ function FeatureIconGridBordered({
       children: [
         label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-xs text-muted-foreground", labelClassName), children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-xs text-muted-foreground", labelClassName), children: label })),
         title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium lg:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-medium lg:text-4xl", titleClassName), children: title })),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-14 grid gap-6 md:grid-cols-2 lg:mt-20 lg:grid-cols-4", gridClassName), children: featuresContent })
+        (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-14 grid gap-6 md:grid-cols-2 lg:mt-20 lg:grid-cols-4", gridClassName), children: featuresContent })
       ]
     }
   );
@@ -20551,8 +20769,8 @@ function FeatureChecklistImage({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("lg:p-10", contentClassName), children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium text-balance md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-medium text-balance md:text-5xl", titleClassName), children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 text-muted-foreground md:mt-6", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-1 text-muted-foreground md:mt-6", descriptionClassName), children: description })),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent }),
-          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("mt-10 flex-wrap items-center gap-6 space-y-6 md:flex md:space-y-0", checklistClassName), children: checklistContent })
+          actionsContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent }),
+          checklistContent && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("mt-10 flex-wrap items-center gap-6 space-y-6 md:flex md:space-y-0", checklistClassName), children: checklistContent })
         ] })
       ] })
     }
@@ -20617,10 +20835,10 @@ function FeatureCarouselProgress({
       );
     });
   }, [api, slidesLength]);
-  const renderSlideIcon = React52.useMemo(() => (slide) => {
+  const renderSlideIcon = React52.useCallback((slide) => {
     if (slide.icon) return slide.icon;
     if (slide.iconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: slide.iconName, size: 16 });
-    return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/star", size: 16 });
+    return null;
   }, []);
   const slidesContent = React52.useMemo(() => {
     if (slidesSlot) return slidesSlot;
@@ -20630,7 +20848,7 @@ function FeatureCarouselProgress({
       {
         className: "basis-full md:basis-1/2 lg:basis-1/3",
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-1", children: /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn(cardClassName, slide.className), children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "flex flex-col justify-center p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-5 flex size-8 items-center justify-center rounded-full bg-accent lg:size-10", slide.iconClassName), children: renderSlideIcon(slide) }),
+          (slide.icon || slide.iconName) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-5 flex size-8 items-center justify-center rounded-full bg-accent lg:size-10", slide.iconClassName), children: renderSlideIcon(slide) }),
           slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xl font-semibold md:text-2xl lg:text-2xl", slide.titleClassName), children: slide.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-xl font-semibold md:text-2xl lg:text-2xl", slide.titleClassName), children: slide.title })),
           slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("pt-2 text-muted-foreground", slide.descriptionClassName), children: slide.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pt-2 text-muted-foreground", slide.descriptionClassName), children: slide.description }))
         ] }) }) }) })
@@ -20692,28 +20910,28 @@ function FeatureCardGridLinked({
   patternOpacity,
   patternClassName
 }) {
+  const renderImage = React52.useCallback((feature, imageAlt) => {
+    if (feature.imageSlot) return feature.imageSlot;
+    if (feature.image) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        img.Img,
+        {
+          src: feature.image,
+          alt: imageAlt,
+          className: "h-full w-full rounded-t-lg object-cover transition-opacity hover:opacity-80",
+          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) => {
       const featureKey = feature.id || `feature-${index}`;
       const imageAlt = feature.imageAlt || (typeof feature.heading === "string" ? feature.heading : "Feature image");
-      const renderImage = () => {
-        if (feature.imageSlot) return feature.imageSlot;
-        if (feature.image) {
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            img.Img,
-            {
-              src: feature.image,
-              alt: imageAlt,
-              className: "h-full w-full rounded-t-lg object-cover transition-opacity hover:opacity-80",
-              loading: "lazy",
-              optixFlowConfig
-            }
-          );
-        }
-        return null;
-      };
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -20724,7 +20942,7 @@ function FeatureCardGridLinked({
                 feature.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-mono text-xs text-muted-foreground", feature.labelClassName), children: feature.label }),
                 feature.heading && /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: feature.url, children: typeof feature.heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-2xl transition-all hover:text-primary hover:opacity-80 sm:text-3xl lg:text-4xl", feature.headingClassName), children: feature.heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-2xl transition-all hover:text-primary hover:opacity-80 sm:text-3xl lg:text-4xl", feature.headingClassName), children: feature.heading }) })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:1/3 w-2/5 shrink-0 rounded-r-lg border-l", children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: feature.url, children: renderImage() }) })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:1/3 w-2/5 shrink-0 rounded-r-lg border-l", children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: feature.url, children: renderImage(feature, imageAlt) }) })
             ] }),
             feature.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("p-4 text-muted-foreground md:p-8", feature.descriptionClassName), children: feature.description })
           ]
@@ -20732,7 +20950,7 @@ function FeatureCardGridLinked({
         featureKey
       );
     });
-  }, [featuresSlot, features, cardClassName, optixFlowConfig]);
+  }, [featuresSlot, features, cardClassName, renderImage]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -20768,7 +20986,7 @@ function FeatureNumberedCards({
   patternOpacity,
   patternClassName
 }) {
-  const renderChecklistItems = (feature) => {
+  const renderChecklistItems = React52.useCallback((feature) => {
     if (feature.checklistSlot) return feature.checklistSlot;
     if (!feature.checklistItems || feature.checklistItems.length === 0) return null;
     return feature.checklistItems.map((item, itemIndex) => {
@@ -20788,7 +21006,7 @@ function FeatureNumberedCards({
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm md:text-base", children: content })
       ] }, itemIndex);
     });
-  };
+  }, []);
   const featuresContent = React52.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
@@ -20893,12 +21111,12 @@ function FeatureIconGridAccent({
       className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col items-center", headerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center space-y-4 text-center sm:space-y-6 md:max-w-3xl md:text-center", children: [
+        (label || title || description) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col items-center", headerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center space-y-4 text-center sm:space-y-6 md:max-w-3xl md:text-center", children: [
           label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground", labelClassName), children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: labelClassName, children: label })),
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground md:max-w-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mt-20 grid max-w-5xl gap-6 md:grid-cols-2", gridClassName), children: featuresContent })
+        featuresContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mt-20 grid max-w-5xl gap-6 md:grid-cols-2", gridClassName), children: featuresContent })
       ]
     }
   );
@@ -20920,20 +21138,20 @@ function FeatureThreeColumnValues({
   patternOpacity,
   patternClassName
 }) {
-  const renderValueIcon = (value) => {
+  const renderValueIcon = React52__namespace.useCallback((value) => {
     if (value.icon) return value.icon;
     if (value.iconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: value.iconName, size: 24 });
-    return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/star", size: 24 });
-  };
+    return null;
+  }, []);
   const valuesContent = React52.useMemo(() => {
     if (valuesSlot) return valuesSlot;
     if (!values || values.length === 0) return null;
     return values.map((value, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-lg bg-accent p-5", cardClassName, value.className), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-8 flex size-12 items-center justify-center rounded-full bg-background", value.iconClassName), children: renderValueIcon(value) }),
+      (value.icon || value.iconName) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-8 flex size-12 items-center justify-center rounded-full bg-background", value.iconClassName), children: renderValueIcon(value) }),
       value.title && (typeof value.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-2 text-xl font-medium", value.titleClassName), children: value.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2 text-xl font-medium", value.titleClassName), children: value.title })),
       value.description && (typeof value.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-7 text-muted-foreground", value.descriptionClassName), children: value.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("leading-7 text-muted-foreground", value.descriptionClassName), children: value.description }))
     ] }, index));
-  }, [valuesSlot, values, cardClassName]);
+  }, [valuesSlot, values, cardClassName, renderValueIcon]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -20947,7 +21165,7 @@ function FeatureThreeColumnValues({
       children: [
         label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-sm text-muted-foreground lg:text-base", labelClassName), children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-sm text-muted-foreground lg:text-base", labelClassName), children: label })),
         title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium lg:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-medium lg:text-4xl", titleClassName), children: title })),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-14 grid gap-6 lg:mt-20 lg:grid-cols-3", gridClassName), children: valuesContent })
+        (valuesSlot || values && values.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-14 grid gap-6 lg:mt-20 lg:grid-cols-3", gridClassName), children: valuesContent })
       ]
     }
   );
@@ -20979,7 +21197,7 @@ function FeatureBadgeGridSix({
     if (!label) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: badgeClassName, children: label });
   }, [badgeSlot, label, badgeClassName]);
-  const renderFeatureIcon = (feature) => {
+  const renderFeatureIcon = React52.useCallback((feature) => {
     if (feature.icon) return feature.icon;
     if (feature.iconName) {
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -20992,25 +21210,28 @@ function FeatureBadgeGridSix({
       );
     }
     return null;
-  };
+  }, []);
   const featuresContent = React52.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
-    return features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: cn("flex gap-6 space-y-4 rounded-lg md:block", cardClassName, feature.className),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-accent md:size-12", children: renderFeatureIcon(feature) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            feature.heading && (typeof feature.heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-medium md:mb-2 md:text-xl", feature.headingClassName), children: feature.heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("font-medium md:mb-2 md:text-xl", feature.headingClassName), children: feature.heading })),
-            feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }))
-          ] })
-        ]
-      },
-      index
-    ));
-  }, [featuresSlot, features, cardClassName]);
+    return features.map((feature, index) => {
+      const iconContent = renderFeatureIcon(feature);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn("flex gap-6 space-y-4 rounded-lg md:block", cardClassName, feature.className),
+          children: [
+            iconContent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-accent md:size-12", children: iconContent }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              feature.heading && (typeof feature.heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-medium md:mb-2 md:text-xl", feature.headingClassName), children: feature.heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("font-medium md:mb-2 md:text-xl", feature.headingClassName), children: feature.heading })),
+              feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }))
+            ] })
+          ]
+        },
+        index
+      );
+    });
+  }, [featuresSlot, features, cardClassName, renderFeatureIcon]);
   const actionContent = React52.useMemo(() => {
     if (actionSlot) return actionSlot;
     if (!action) return null;
@@ -21071,7 +21292,6 @@ function FeatureBadgeGridSix({
 function FeaturePatternGridLinks({
   features,
   featuresSlot,
-  patternUrl = patternSvgs.dotPattern,
   className,
   containerClassName,
   gridClassName,
@@ -21082,26 +21302,28 @@ function FeaturePatternGridLinks({
   patternOpacity,
   patternClassName
 }) {
-  const renderFeatureIcon = (feature) => {
+  const renderFeatureIcon = React52.useCallback((feature) => {
     if (feature.icon) return feature.icon;
     if (feature.iconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName, size: 24, className: feature.iconClassName });
     return null;
-  };
-  const renderFeatureLink = (feature) => {
+  }, []);
+  const renderFeatureLink = React52.useCallback((feature) => {
     if (feature.linkSlot) return feature.linkSlot;
-    if (!feature.link) return null;
+    if (!feature.link && !feature.linkLabel) return null;
+    const label = feature.linkLabel || (feature.link ? "Learn more" : null);
+    if (!label) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       Pressable,
       {
         href: feature.link,
         className: cn("flex items-center gap-2 text-sm font-medium", feature.linkClassName),
         children: [
-          feature.linkLabel || "Learn more",
+          label,
           /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
         ]
       }
     );
-  };
+  }, []);
   const featuresContent = React52.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
@@ -21120,7 +21342,7 @@ function FeaturePatternGridLinks({
       },
       index
     ));
-  }, [featuresSlot, features, cardClassName]);
+  }, [featuresSlot, features, cardClassName, renderFeatureIcon, renderFeatureLink]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -21129,12 +21351,8 @@ function FeaturePatternGridLinks({
       pattern,
       patternOpacity,
       patternClassName,
-      className: cn("bg-muted/30", className),
+      className,
       containerClassName,
-      style: {
-        backgroundImage: `url(${patternUrl})`,
-        backgroundRepeat: "repeat"
-      },
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 md:grid-cols-2 lg:grid-cols-3", gridClassName), children: featuresContent })
     }
   );
@@ -21202,7 +21420,7 @@ function FeatureTabbedContentImage({
   description,
   slides,
   slidesSlot,
-  defaultTab = "1",
+  defaultTab,
   className,
   containerClassName,
   headerClassName,
@@ -21221,7 +21439,7 @@ function FeatureTabbedContentImage({
   patternOpacity,
   patternClassName
 }) {
-  const renderFeatures = React52.useMemo(() => (slide) => {
+  const renderFeatures = React52__namespace.useCallback((slide) => {
     if (slide.featuresSlot) return slide.featuresSlot;
     if (!slide.features || slide.features.length === 0) return null;
     return slide.features.map((feature, index) => {
@@ -21235,7 +21453,7 @@ function FeatureTabbedContentImage({
       ] }, index);
     });
   }, []);
-  const renderActions = React52.useMemo(() => (slide) => {
+  const renderActions = React52__namespace.useCallback((slide) => {
     if (slide.actionsSlot) return slide.actionsSlot;
     if (!slide.actions || slide.actions.length === 0) return null;
     return slide.actions.map((action, index) => {
@@ -21275,7 +21493,7 @@ function FeatureTabbedContentImage({
       );
     });
   }, []);
-  const renderImage = React52.useMemo(() => (slide) => {
+  const renderImage = React52__namespace.useCallback((slide) => {
     if (slide.imageSlot) return slide.imageSlot;
     if (!slide.image) return null;
     const imageAlt = slide.imageAlt || (typeof slide.title === "string" ? slide.title : "Tab content image");
@@ -21322,6 +21540,11 @@ function FeatureTabbedContentImage({
       ))
     ] });
   }, [slidesSlot, slides, tabsListClassName, tabTriggerClassName, tabContentClassName, contentGridClassName, renderFeatures, renderActions, renderImage]);
+  const effectiveDefaultTab = React52.useMemo(() => {
+    if (defaultTab) return defaultTab;
+    if (slides && slides.length > 0) return slides[0].id.toString();
+    return "1";
+  }, [defaultTab, slides]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -21337,10 +21560,10 @@ function FeatureTabbedContentImage({
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-center text-3xl font-semibold lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-center text-3xl font-semibold lg:text-5xl", titleClassName), children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-balance text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-center text-balance text-muted-foreground lg:text-xl", descriptionClassName), children: description }))
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-12", tabsWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+        (slidesSlot || slides && slides.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-12", tabsWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
           Tabs,
           {
-            defaultValue: defaultTab,
+            defaultValue: effectiveDefaultTab,
             className: cn("mx-auto flex w-fit flex-col items-center gap-8 md:gap-12", tabsClassName),
             children: slidesContent
           }
@@ -21352,7 +21575,7 @@ function FeatureTabbedContentImage({
 function FeatureUtilityCardsGrid({
   label,
   labelIcon,
-  labelIconName = "lucide/square-dashed-mouse-pointer",
+  labelIconName,
   title,
   description,
   learnMoreAction,
@@ -21374,11 +21597,11 @@ function FeatureUtilityCardsGrid({
   patternOpacity,
   patternClassName
 }) {
-  const renderLabelIcon = () => {
+  const renderLabelIcon = React52.useMemo(() => {
     if (labelIcon) return labelIcon;
     if (labelIconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: labelIconName, size: 20, className: "text-primary" });
-    return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/square-dashed-mouse-pointer", size: 20, className: "text-primary" });
-  };
+    return null;
+  }, [labelIcon, labelIconName]);
   const learnMoreContent = React52.useMemo(() => {
     if (learnMoreSlot) return learnMoreSlot;
     if (!learnMoreAction) return null;
@@ -21409,7 +21632,7 @@ function FeatureUtilityCardsGrid({
       }
     );
   }, [learnMoreSlot, learnMoreAction]);
-  const renderUtilityImage = (utility) => {
+  const renderUtilityImage = React52__namespace.useCallback((utility) => {
     if (utility.imageSlot) return utility.imageSlot;
     if (utility.image) {
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -21424,7 +21647,7 @@ function FeatureUtilityCardsGrid({
       );
     }
     return null;
-  };
+  }, [optixFlowConfig]);
   const utilitiesContent = React52.useMemo(() => {
     if (utilitiesSlot) return utilitiesSlot;
     if (!utilities || utilities.length === 0) return null;
@@ -21435,7 +21658,7 @@ function FeatureUtilityCardsGrid({
         utility.description && (typeof utility.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", utility.descriptionClassName), children: utility.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground", utility.descriptionClassName), children: utility.description }))
       ] })
     ] }, index));
-  }, [utilitiesSlot, utilities, cardClassName, optixFlowConfig]);
+  }, [utilitiesSlot, utilities, cardClassName, renderUtilityImage]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -21447,26 +21670,28 @@ function FeatureUtilityCardsGrid({
       className,
       containerClassName: cn("max-w-7xl", containerClassName),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between text-sm", headerClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1 text-muted-foreground", labelClassName), children: [
-            renderLabelIcon(),
-            label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: label }))
+        (label || labelIcon || labelIconName || learnMoreSlot || learnMoreAction) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between text-sm", headerClassName), children: [
+            (label || labelIcon || labelIconName) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1 text-muted-foreground", labelClassName), children: [
+              renderLabelIcon,
+              label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: label }))
+            ] }),
+            learnMoreContent
           ] }),
-          learnMoreContent
+          /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "mt-3 mb-8" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "mt-3 mb-8" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-between gap-6 md:flex-row", children: [
+        (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-between gap-6 md:flex-row", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium md:w-1/2", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-medium md:w-1/2", titleClassName), children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("md:w-1/2", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("md:w-1/2", descriptionClassName), children: description }))
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-11 grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3", gridClassName), children: utilitiesContent })
+        (utilitiesSlot || utilities && utilities.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-11 grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3", gridClassName), children: utilitiesContent })
       ]
     }
   );
 }
 function FeatureBentoUtilities({
   label,
-  labelIconName = "lucide/square-dashed-mouse-pointer",
+  labelIconName,
   labelIcon,
   title,
   description,
@@ -21489,7 +21714,7 @@ function FeatureBentoUtilities({
   patternOpacity,
   patternClassName
 }) {
-  const renderCard = React52.useMemo(() => (card, index) => {
+  const renderCard = React52__namespace.useCallback((card, index) => {
     const hasImage = card.imageSrc || card.imageSlot;
     const cardClasses = cn(
       hasImage ? "overflow-hidden pt-0" : "p-6",
@@ -21535,12 +21760,16 @@ function FeatureBentoUtilities({
       card.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: card.description })
     ] }, index);
   }, [optixFlowConfig]);
-  const renderColumn = React52.useMemo(() => (cards, slot) => {
+  const renderColumn = React52__namespace.useCallback((cards, slot) => {
     if (slot) return slot;
     if (!cards || cards.length === 0) return null;
     return cards.map((card, index) => renderCard(card, index));
   }, [renderCard]);
-  const labelIconElement = React52.useMemo(() => labelIcon ?? (labelIconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: labelIconName, size: 20 }) : null), [labelIcon, labelIconName]);
+  const labelIconElement = React52.useMemo(() => {
+    if (labelIcon) return labelIcon;
+    if (labelIconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: labelIconName, size: 20 });
+    return null;
+  }, [labelIcon, labelIconName]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -21552,7 +21781,7 @@ function FeatureBentoUtilities({
       className: cn("bg-gray-50 dark:bg-background", className),
       containerClassName: cn("max-w-7xl", containerClassName),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 text-muted-foreground", labelClassName), children: [
+        (labelIconElement || label) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 text-muted-foreground", labelClassName), children: [
           labelIconElement,
           label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children: label }))
         ] }),
@@ -21591,15 +21820,15 @@ function FeatureChecklistThreeColumn({
   patternOpacity,
   patternClassName
 }) {
-  const getCheckItemContent = React52.useMemo(() => (item) => {
+  const getCheckItemContent = React52.useCallback((item) => {
     if (typeof item === "string") return item;
     return item.content;
   }, []);
-  const getCheckItemClassName = React52.useMemo(() => (item) => {
+  const getCheckItemClassName = React52.useCallback((item) => {
     if (typeof item === "string") return void 0;
     return item.className;
   }, []);
-  const renderChecklistColumn = React52.useMemo(() => (items, slot, gapClass) => {
+  const renderChecklistColumn = React52.useCallback((items, slot, gapClass) => {
     if (slot) return slot;
     if (!items || items.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("flex flex-col text-muted-foreground", gapClass, checklistClassName), children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-center gap-2", getCheckItemClassName(item)), children: [
@@ -21607,7 +21836,7 @@ function FeatureChecklistThreeColumn({
       getCheckItemContent(item)
     ] }, index)) });
   }, [checklistClassName, getCheckItemContent, getCheckItemClassName]);
-  const renderCardImage = React52.useMemo(() => (card) => {
+  const renderCardImage = React52.useCallback((card) => {
     if (card.imageSlot) return card.imageSlot;
     if (card.image) {
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -21623,7 +21852,7 @@ function FeatureChecklistThreeColumn({
     }
     return null;
   }, [optixFlowConfig]);
-  const renderCardLink = React52.useMemo(() => (card) => {
+  const renderCardLink = React52.useCallback((card) => {
     if (card.linkSlot) return card.linkSlot;
     if (!card.link) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -21686,7 +21915,7 @@ function FeatureChecklistThreeColumn({
       pattern,
       patternOpacity,
       patternClassName,
-      className: cn("py-16 sm:py-24 md:py-32", className),
+      className,
       containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-4 sm:grid-cols-2 sm:gap-8 md:gap-12 lg:grid-cols-3 lg:gap-16", headerGridClassName), children: [
@@ -21718,26 +21947,25 @@ function FeatureIntegrationCards({
   patternOpacity,
   patternClassName
 }) {
-  const renderIntegrationIcon = React52.useMemo(() => (integration) => {
+  const renderIntegrationIcon = React52.useCallback((integration) => {
     if (integration.iconSlot) return integration.iconSlot;
-    if (integration.icon) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: integration.icon,
-          alt: integration.iconAlt || (typeof integration.title === "string" ? integration.title : "Integration icon"),
-          className: cn("h-auto w-7", integration.iconClassName),
-          loading: "lazy",
-          optixFlowConfig
-        }
-      );
-    }
-    return null;
+    if (!integration.icon) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      img.Img,
+      {
+        src: integration.icon,
+        alt: integration.iconAlt || (typeof integration.title === "string" ? integration.title : "Integration icon"),
+        className: cn("h-auto w-7", integration.iconClassName),
+        loading: "lazy",
+        optixFlowConfig
+      }
+    );
   }, [optixFlowConfig]);
-  const renderLinkLabel = React52.useMemo(() => (integration) => {
+  const renderLinkLabel = React52.useCallback((integration) => {
     if (integration.linkLabelSlot) return integration.linkLabelSlot;
+    if (!integration.linkLabel) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("flex items-center gap-1 rounded-full border px-3 py-2.5 text-sm", integration.linkLabelClassName), children: [
-      integration.linkLabel || "Visit Website",
+      integration.linkLabel,
       /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
     ] });
   }, []);
@@ -21745,10 +21973,12 @@ function FeatureIntegrationCards({
     if (integrationsSlot) return integrationsSlot;
     if (!integrations || integrations.length === 0) return null;
     return integrations.map((integration, index) => {
+      const iconContent = renderIntegrationIcon(integration);
+      const linkLabelContent = renderLinkLabel(integration);
       const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "grid size-12 shrink-0 place-content-center rounded-md border", children: renderIntegrationIcon(integration) }),
-          renderLinkLabel(integration)
+          iconContent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "grid size-12 shrink-0 place-content-center rounded-md border", children: iconContent }),
+          linkLabelContent
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           integration.title && (typeof integration.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-medium md:text-lg", integration.titleClassName), children: integration.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("font-medium md:text-lg", integration.titleClassName), children: integration.title })),
@@ -21820,12 +22050,12 @@ function FeatureIconTabsContent({
   patternOpacity,
   patternClassName
 }) {
-  const renderTabIcon = React52.useMemo(() => (tab) => {
+  const renderTabIcon = React52.useCallback((tab) => {
     if (tab.icon) return tab.icon;
     if (tab.iconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: tab.iconName, size: 16 });
-    return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/star", size: 16 });
+    return null;
   }, []);
-  const renderTabContentActions = React52.useMemo(() => (content) => {
+  const renderTabContentActions = React52.useCallback((content) => {
     if (content.actionsSlot) return content.actionsSlot;
     if (!content.actions || content.actions.length === 0) return null;
     return content.actions.map((action, index) => {
@@ -21865,7 +22095,7 @@ function FeatureIconTabsContent({
       );
     });
   }, []);
-  const renderTabContentImage = React52.useMemo(() => (content) => {
+  const renderTabContentImage = React52.useCallback((content) => {
     if (content.imageSlot) return content.imageSlot;
     if (content.imageSrc) {
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -21892,7 +22122,7 @@ function FeatureIconTabsContent({
           value: tab.value,
           className: cn("flex items-center gap-2 rounded-xl px-4 py-3 text-sm font-semibold text-muted-foreground data-[state=active]:bg-muted data-[state=active]:text-primary", tabTriggerClassName, tab.className),
           children: [
-            renderTabIcon(tab),
+            (tab.icon || tab.iconName) && renderTabIcon(tab),
             tab.label
           ]
         },
@@ -21914,9 +22144,9 @@ function FeatureIconTabsContent({
                 content.badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: cn("w-fit bg-background", content.badgeClassName), children: content.badge }),
                 content.title && (typeof content.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-3xl font-semibold lg:text-5xl", content.titleClassName), children: content.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-semibold lg:text-5xl", content.titleClassName), children: content.title })),
                 content.description && (typeof content.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground lg:text-lg", content.descriptionClassName), children: content.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground lg:text-lg", content.descriptionClassName), children: content.description })),
-                renderTabContentActions(content)
+                (content.actionsSlot || content.actions && content.actions.length > 0) && renderTabContentActions(content)
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-[300px] w-full lg:h-[400px]", children: renderTabContentImage(content) })
+              (content.imageSlot || content.imageSrc) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-[300px] w-full lg:h-[400px]", children: renderTabContentImage(content) })
             ]
           },
           tab.value
@@ -21935,7 +22165,7 @@ function FeatureIconTabsContent({
       className,
       containerClassName: cn("mx-auto", containerClassName),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-4 text-center", headerClassName), children: [
+        (badge || heading || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-4 text-center", headerClassName), children: [
           badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: badgeClassName, children: badge }),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-2xl text-3xl font-semibold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("max-w-2xl text-3xl font-semibold md:text-4xl", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground", descriptionClassName), children: description }))
@@ -22098,28 +22328,30 @@ function FeatureImageOverlayBadge({
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground lg:text-lg", descriptionClassName), children: description })),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative rounded-xl", imageWrapperClassName), children: [
+        imageContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative rounded-xl", imageWrapperClassName), children: [
           imageContent,
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
-            /* @__PURE__ */ jsxRuntime.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: [
-              /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "size-7 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: "Avatar" }) }),
-              avatarBadgeText
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5 text-background", children: [
-              overlayTitle && (typeof overlayTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h4", { className: cn("text-lg font-semibold lg:text-3xl", overlayTitleClassName), children: overlayTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-lg font-semibold lg:text-3xl", overlayTitleClassName), children: overlayTitle })),
-              overlayLinkText && /* @__PURE__ */ jsxRuntime.jsxs(
-                Pressable,
-                {
-                  href: overlayLinkUrl,
-                  onClick: overlayLinkOnClick,
-                  className: "flex items-center gap-1 font-medium",
-                  children: [
-                    overlayLinkText,
-                    /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
-                  ]
-                }
-              )
+          (avatarSrc || avatarBadgeText || overlayTitle || overlayLinkText) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
+              (avatarSrc || avatarBadgeText) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Avatar, { className: "size-7 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: "Avatar" }) }),
+                avatarBadgeText
+              ] }),
+              (overlayTitle || overlayLinkText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5 text-background", children: [
+                overlayTitle && (typeof overlayTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h4", { className: cn("text-lg font-semibold lg:text-3xl", overlayTitleClassName), children: overlayTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-lg font-semibold lg:text-3xl", overlayTitleClassName), children: overlayTitle })),
+                overlayLinkText && /* @__PURE__ */ jsxRuntime.jsxs(
+                  Pressable,
+                  {
+                    href: overlayLinkUrl,
+                    onClick: overlayLinkOnClick,
+                    className: "flex items-center gap-1 font-medium",
+                    children: [
+                      overlayLinkText,
+                      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
+                    ]
+                  }
+                )
+              ] })
             ] })
           ] })
         ] })
@@ -22148,7 +22380,7 @@ function FeatureCategoryImageCards({
   patternOpacity,
   patternClassName
 }) {
-  const renderFeatureImage = (feature) => {
+  const renderFeatureImage = React52.useCallback((feature) => {
     if (feature.imageSlot) return feature.imageSlot;
     if (feature.imageSrc) {
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -22163,7 +22395,7 @@ function FeatureCategoryImageCards({
       );
     }
     return null;
-  };
+  }, [optixFlowConfig]);
   const featuresContent = React52.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
@@ -22174,7 +22406,7 @@ function FeatureCategoryImageCards({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "px-7 pb-7", children: renderFeatureImage(feature) })
     ] }, index));
-  }, [featuresSlot, features, cardClassName, optixFlowConfig]);
+  }, [featuresSlot, features, cardClassName, renderFeatureImage]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -22215,12 +22447,12 @@ function FeatureBentoImageGrid({
   patternOpacity,
   patternClassName
 }) {
-  const renderItemIcon = React52.useMemo(() => (item) => {
+  const renderItemIcon = React52__namespace.useCallback((item) => {
     if (item.icon) return item.icon;
     if (item.iconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 24 });
     return null;
   }, []);
-  const renderItemImage = React52.useMemo(() => (item, imageClassName) => {
+  const renderItemImage = React52__namespace.useCallback((item, imageClassName) => {
     if (item.imageSlot) return item.imageSlot;
     if (item.imageSrc) {
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -22236,13 +22468,15 @@ function FeatureBentoImageGrid({
     }
     return null;
   }, [optixFlowConfig]);
-  const renderLargeCard = React52.useMemo(() => (item) => {
+  const renderLargeCard = React52__namespace.useCallback((item) => {
+    const iconContent = renderItemIcon(item);
+    const hasIconBadgeContent = iconContent || item.iconBadge;
     const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       renderItemImage(item, "h-full max-h-[580px] w-full rounded-xl object-cover object-center"),
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("ml-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background", item.iconBadgeClassName), children: [
-          renderItemIcon(item),
+        hasIconBadgeContent && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("ml-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background", item.iconBadgeClassName), children: [
+          iconContent,
           item.iconBadge
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5 text-background", children: [
@@ -22266,7 +22500,9 @@ function FeatureBentoImageGrid({
     }
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("group relative col-span-2 row-span-3 overflow-hidden rounded-xl", largeCardClassName, item.className), children: cardContent });
   }, [largeCardClassName, renderItemImage, renderItemIcon]);
-  const renderSmallCard = React52.useMemo(() => (item, index) => {
+  const renderSmallCard = React52__namespace.useCallback((item, index) => {
+    const iconContent = renderItemIcon(item);
+    const hasIconBadgeContent = iconContent || item.iconBadge;
     const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       renderItemImage(item, cn(
         "h-full w-full rounded-xl object-cover object-center",
@@ -22274,8 +22510,8 @@ function FeatureBentoImageGrid({
       )),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-10 rounded-xl bg-linear-to-t from-primary to-transparent opacity-80 transition-transform duration-300 group-hover:translate-y-0" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("ml-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background", item.iconBadgeClassName), children: [
-          renderItemIcon(item),
+        hasIconBadgeContent && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("ml-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background", item.iconBadgeClassName), children: [
+          iconContent,
           item.iconBadge
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5 text-background", children: [
@@ -22363,34 +22599,33 @@ function FeatureImageCardsThreeColumn({
   patternOpacity,
   patternClassName
 }) {
+  const renderImage = React52.useCallback((card, imageAlt) => {
+    if (card.imageSlot) return card.imageSlot;
+    if (!card.imageSrc) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      img.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 = React52.useCallback((card) => {
+    if (card.avatarSrc) {
+      return /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "size-7 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: card.avatarSrc, alt: "Avatar" }) });
+    }
+    if (card.icon) return card.icon;
+    if (!card.iconName) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: card.iconName, size: 24 });
+  }, []);
   const cardsContent = React52.useMemo(() => {
     if (cardsSlot) return cardsSlot;
     if (!cards || cards.length === 0) return null;
     return cards.map((card, index) => {
       const imageAlt = card.imageAlt || (typeof card.title === "string" ? card.title : "Card image");
-      const renderImage = () => {
-        if (card.imageSlot) return card.imageSlot;
-        if (card.imageSrc) {
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            img.Img,
-            {
-              src: card.imageSrc,
-              alt: imageAlt,
-              className: "h-full max-h-[450px] w-full rounded-xl object-cover object-center",
-              loading: "lazy",
-              optixFlowConfig
-            }
-          );
-        }
-        return null;
-      };
-      const renderBadgeIcon = () => {
-        if (card.avatarSrc) {
-          return /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "size-7 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: card.avatarSrc, alt: "Avatar" }) });
-        }
-        if (card.icon) return card.icon;
-        return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: card.iconName || "lucide/zap", size: 24 });
-      };
       return /* @__PURE__ */ jsxRuntime.jsxs(
         Pressable,
         {
@@ -22398,10 +22633,10 @@ function FeatureImageCardsThreeColumn({
           onClick: card.onClick,
           className: cn("group relative overflow-hidden rounded-xl", cardClassName, card.className),
           children: [
-            renderImage(),
+            renderImage(card, imageAlt),
             /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
+              (card.badgeText || card.avatarSrc || card.icon || card.iconName) && /* @__PURE__ */ jsxRuntime.jsxs(
                 "span",
                 {
                   className: cn(
@@ -22410,7 +22645,7 @@ function FeatureImageCardsThreeColumn({
                     card.badgeClassName
                   ),
                   children: [
-                    renderBadgeIcon(),
+                    renderBadgeIcon(card),
                     card.badgeText
                   ]
                 }
@@ -22428,7 +22663,7 @@ function FeatureImageCardsThreeColumn({
         index
       );
     });
-  }, [cardsSlot, cards, cardClassName, optixFlowConfig]);
+  }, [cardsSlot, cards, cardClassName, renderImage, renderBadgeIcon]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -22465,11 +22700,11 @@ function FeatureIconGridMuted({
   patternOpacity,
   patternClassName
 }) {
-  const renderFeatureIcon = (feature) => {
+  const renderFeatureIcon = React52.useCallback((feature) => {
     if (feature.icon) return feature.icon;
     if (feature.iconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName, size: 24, className: feature.iconClassName });
     return null;
-  };
+  }, []);
   const featuresContent = React52.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
@@ -22478,14 +22713,14 @@ function FeatureIconGridMuted({
       {
         className: cn("flex flex-col gap-2.5 rounded-xl border bg-background p-7", cardClassName, feature.className),
         children: [
-          renderFeatureIcon(feature),
+          (feature.icon || feature.iconName) && renderFeatureIcon(feature),
           feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-semibold", feature.titleClassName), children: feature.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("font-semibold", feature.titleClassName), children: feature.title })),
           feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground", feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm text-muted-foreground", feature.descriptionClassName), children: feature.description }))
         ]
       },
       index
     ));
-  }, [featuresSlot, features, cardClassName]);
+  }, [featuresSlot, features, cardClassName, renderFeatureIcon]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -22497,11 +22732,11 @@ function FeatureIconGridMuted({
       className: cn("bg-muted/60", className),
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-10", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex max-w-xl flex-col gap-2.5 text-center", headerClassName), children: [
+        (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex max-w-xl flex-col gap-2.5 text-center", headerClassName), children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-semibold md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-4xl font-semibold md:text-5xl", titleClassName), children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground", descriptionClassName), children: description }))
         ] }),
-        /* @__PURE__ */ jsxRuntime.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 })
+        (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsxRuntime.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 })
       ] })
     }
   );
@@ -22534,37 +22769,25 @@ function FeatureStatsHighlight({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      if (action.children) {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          Pressable,
-          {
-            href: action.href,
-            onClick: action.onClick,
-            variant: action.variant,
-            size: action.size,
-            className: cn("mt-4 w-fit gap-2", action.className),
-            "aria-label": action["aria-label"],
-            asButton: true,
-            children: action.children
-          },
-          index
-        );
-      }
-      return /* @__PURE__ */ jsxRuntime.jsxs(
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
-          href: action.href,
-          onClick: action.onClick,
-          variant: action.variant,
-          size: action.size,
-          className: cn("mt-4 w-fit gap-2", action.className),
-          "aria-label": action["aria-label"],
+          className: cn("mt-4 w-fit gap-2", actionClassName),
           asButton: true,
-          children: [
-            action.icon,
-            action.label,
-            action.iconAfter
-          ]
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
         },
         index
       );
@@ -22578,8 +22801,8 @@ function FeatureStatsHighlight({
       {
         className: cn("flex flex-col gap-2 rounded-xl border bg-muted/30 p-6", statCardClassName, stat.className),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-4xl font-bold text-primary lg:text-5xl", stat.valueClassName), children: stat.value }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-muted-foreground", stat.labelClassName), children: stat.label })
+          stat.value && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-4xl font-bold text-primary lg:text-5xl", stat.valueClassName), children: stat.value }),
+          stat.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-muted-foreground", stat.labelClassName), children: stat.label })
         ]
       },
       index
@@ -22600,9 +22823,9 @@ function FeatureStatsHighlight({
           badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: cn("w-fit", badgeClassName), children: badge }),
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-semibold lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-semibold lg:text-5xl", titleClassName), children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground lg:text-lg", descriptionClassName), children: description })),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent })
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-2 gap-6", statsGridClassName), children: statsContent })
+        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-2 gap-6", statsGridClassName), children: statsContent })
       ] })
     }
   );
@@ -22666,7 +22889,7 @@ function FeatureAccordionImage({
   description,
   items,
   itemsSlot,
-  defaultValue = "item-0",
+  defaultValue,
   className,
   containerClassName,
   headerClassName,
@@ -22683,24 +22906,25 @@ function FeatureAccordionImage({
   patternOpacity,
   patternClassName
 }) {
-  const [activeItem, setActiveItem] = React52__namespace.useState(defaultValue);
+  const [activeItem, setActiveItem] = React52__namespace.useState(defaultValue || "item-0");
   const activeIndex = parseInt(activeItem.replace("item-", ""), 10) || 0;
   const currentImage = items?.[activeIndex] || items?.[0];
   const accordionItemsContent = React52.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
     return items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(AccordionItem, { value: `item-${index}`, className: item.className, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: cn("text-left text-lg font-medium", item.triggerClassName), children: item.title }),
-      /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: cn("text-muted-foreground", item.contentClassName), children: item.content })
+      item.title && /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: cn("text-left text-lg font-medium", item.triggerClassName), children: item.title }),
+      item.content && /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: cn("text-muted-foreground", item.contentClassName), children: item.content })
     ] }, index));
   }, [itemsSlot, items]);
   const imageContent = React52.useMemo(() => {
     if (currentImage?.imageSlot) return currentImage.imageSlot;
+    if (!currentImage?.imageSrc) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
       img.Img,
       {
-        src: currentImage?.imageSrc || "",
-        alt: currentImage?.imageAlt || "",
+        src: currentImage.imageSrc,
+        alt: currentImage.imageAlt || "",
         className: cn("h-full w-full object-cover transition-opacity duration-300", imageClassName),
         loading: "lazy",
         optixFlowConfig
@@ -22718,11 +22942,11 @@ function FeatureAccordionImage({
       className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
+        (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-semibold md:text-4xl lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-semibold md:text-4xl lg:text-5xl", titleClassName), children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4 text-muted-foreground lg:text-lg", descriptionClassName), children: description }))
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-10 lg:grid-cols-2 lg:gap-16", gridClassName), children: [
+        (itemsSlot || items && items.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-10 lg:grid-cols-2 lg:gap-16", gridClassName), children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Accordion,
             {
@@ -22757,49 +22981,52 @@ function FeatureCapabilitiesGrid({
   patternOpacity,
   patternClassName
 }) {
-  const renderItemIcon = (item) => {
+  const renderItemIcon = React52__namespace.useCallback((item) => {
     if (item.icon) return item.icon;
     if (item.iconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 20 });
-    return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/star", size: 20 });
-  };
+    return null;
+  }, []);
   const itemsContent = React52.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
-    return items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-      Card,
-      {
-        className: cn("group relative overflow-visible border-white/10 bg-white/5 p-0 transition-colors duration-300 hover:border-white/20", cardClassName, item.className),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -inset-px rounded-xl bg-linear-to-br from-white/10 via-white/5 to-transparent" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 rounded-xl bg-linear-to-tr from-white/0 to-white/0 transition-colors group-hover:from-white/3 group-hover:to-white/6" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-none absolute inset-0 hidden group-hover:block", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-2 -top-2 h-3 w-3 bg-white" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-2 -top-2 h-3 w-3 bg-white" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-2 -bottom-2 h-3 w-3 bg-white" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-2 -bottom-2 h-3 w-3 bg-white" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "relative z-10 flex flex-row items-start gap-3 p-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-10 w-10 items-center justify-center rounded-xl border border-white/15 bg-white/5 text-white", item.iconClassName), children: renderItemIcon(item) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: cn("text-lg font-medium text-white", item.titleClassName), children: item.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-lg font-medium text-white", item.titleClassName), children: item.title })),
-              item.badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("rounded-full border border-white/20 px-2 py-0.5 text-[10px] leading-none text-white/70", item.badgeClassName), children: item.badge })
-            ] }) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("relative z-10 px-6 pb-6 text-sm text-white/70", item.descriptionClassName), children: item.description }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            framerMotion.motion.div,
-            {
-              className: "pointer-events-none absolute inset-0 rounded-xl ring-0 ring-white/0",
-              initial: { opacity: 0 },
-              whileHover: { opacity: 1 },
-              transition: { duration: 0.25 }
-            }
-          )
-        ]
-      },
-      `${typeof item.title === "string" ? item.title : "item"}-${index}`
-    ));
-  }, [itemsSlot, items, cardClassName]);
+    return items.map((item, index) => {
+      const iconContent = renderItemIcon(item);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        Card,
+        {
+          className: cn("group relative overflow-visible border-white/10 bg-white/5 p-0 transition-colors duration-300 hover:border-white/20", cardClassName, item.className),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -inset-px rounded-xl bg-linear-to-br from-white/10 via-white/5 to-transparent" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 rounded-xl bg-linear-to-tr from-white/0 to-white/0 transition-colors group-hover:from-white/3 group-hover:to-white/6" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-none absolute inset-0 hidden group-hover:block", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-2 -top-2 h-3 w-3 bg-white" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-2 -top-2 h-3 w-3 bg-white" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-2 -bottom-2 h-3 w-3 bg-white" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-2 -bottom-2 h-3 w-3 bg-white" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "relative z-10 flex flex-row items-start gap-3 p-6", children: [
+              iconContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-10 w-10 items-center justify-center rounded-xl border border-white/15 bg-white/5 text-white", item.iconClassName), children: iconContent }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: cn("text-lg font-medium text-white", item.titleClassName), children: item.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-lg font-medium text-white", item.titleClassName), children: item.title })),
+                item.badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("rounded-full border border-white/20 px-2 py-0.5 text-[10px] leading-none text-white/70", item.badgeClassName), children: item.badge })
+              ] }) })
+            ] }),
+            item.description && /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("relative z-10 px-6 pb-6 text-sm text-white/70", item.descriptionClassName), children: item.description }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              framerMotion.motion.div,
+              {
+                className: "pointer-events-none absolute inset-0 rounded-xl ring-0 ring-white/0",
+                initial: { opacity: 0 },
+                whileHover: { opacity: 1 },
+                transition: { duration: 0.25 }
+              }
+            )
+          ]
+        },
+        `${typeof item.title === "string" ? item.title : "item"}-${index}`
+      );
+    });
+  }, [itemsSlot, items, cardClassName, renderItemIcon]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -39411,7 +39638,7 @@ function CommunityInitiatives({
     }
   );
 }
-var Controls = ({
+var Controls = React52__namespace.memo(({
   handleNext,
   handlePrevious,
   isPreviousDisabled,
@@ -39439,9 +39666,9 @@ var Controls = ({
       }
     )
   ] });
-};
-var FeatureCard = ({ feature, isActive, onClick }) => {
-  const variants2 = {
+});
+var FeatureCard = React52__namespace.memo(({ feature, isActive, onClick }) => {
+  const variants2 = React52.useMemo(() => ({
     initial: {
       opacity: 0
     },
@@ -39451,7 +39678,7 @@ var FeatureCard = ({ feature, isActive, onClick }) => {
     exit: {
       opacity: 0
     }
-  };
+  }), []);
   return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsxRuntime.jsx(
     framerMotion.motion.div,
     {
@@ -39481,13 +39708,13 @@ var FeatureCard = ({ feature, isActive, onClick }) => {
             ease: "easeOut"
           },
           className: "p-6 text-sm md:p-8 md:text-base",
-          children: /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold", children: [
+          children: (feature.title || feature.description) && /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+            feature.title && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold", children: [
               feature.title,
               "."
             ] }),
-            " ",
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: feature.description })
+            feature.title && feature.description && " ",
+            feature.description && /* @__PURE__ */ jsxRuntime.jsx("span", { children: feature.description })
           ] })
         },
         `feature-description-active-${feature.title}`
@@ -39521,15 +39748,15 @@ var FeatureCard = ({ feature, isActive, onClick }) => {
                 className: "shrink-0"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 font-semibold", children: feature.title })
+            feature.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 font-semibold", children: feature.title })
           ]
         },
         `feature-description-inactive-${feature.title}`
       )
     }
   ) });
-};
-var FeaturesDesktop = ({
+});
+var FeaturesDesktop = React52__namespace.memo(({
   features,
   handleNext,
   handlePrevious,
@@ -39560,8 +39787,8 @@ var FeaturesDesktop = ({
       );
     }) })
   ] });
-};
-var FeaturesMobile = ({
+});
+var FeaturesMobile = React52__namespace.memo(({
   features,
   handleNext,
   handlePrevious,
@@ -39570,7 +39797,7 @@ var FeaturesMobile = ({
   isPreviousDisabled,
   isNextDisabled
 }) => {
-  const variants2 = {
+  const variants2 = React52.useMemo(() => ({
     enter: (direction2) => ({
       x: direction2 > 0 ? 100 : -100,
       opacity: 0
@@ -39583,7 +39810,8 @@ var FeaturesMobile = ({
       x: direction2 < 0 ? 100 : -100,
       opacity: 0
     })
-  };
+  }), []);
+  const currentFeature = features[activeIndex];
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 flex flex-col items-center gap-6 md:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between gap-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -39608,13 +39836,13 @@ var FeaturesMobile = ({
           opacity: { duration: 0.2 }
         },
         className: "absolute inset-0 flex items-center justify-center rounded-3xl bg-background p-4",
-        children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-center text-sm", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold", children: [
-            features[activeIndex].title,
+        children: (currentFeature?.title || currentFeature?.description) && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-center text-sm", children: [
+          currentFeature.title && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold", children: [
+            currentFeature.title,
             "."
           ] }),
-          " ",
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: features[activeIndex].description })
+          currentFeature.title && currentFeature.description && " ",
+          currentFeature.description && /* @__PURE__ */ jsxRuntime.jsx("span", { children: currentFeature.description })
         ] })
       },
       activeIndex
@@ -39630,9 +39858,9 @@ var FeaturesMobile = ({
       }
     )
   ] }) });
-};
+});
 function FeatureAnimatedCarousel({
-  features = [],
+  features,
   className,
   optixFlowConfig,
   background,
@@ -39643,25 +39871,25 @@ function FeatureAnimatedCarousel({
 }) {
   const [activeIndex, setActiveIndex] = React52__namespace.useState(0);
   const [direction, setDirection] = React52__namespace.useState(1);
-  const handleNext = () => {
-    if (activeIndex < features.length - 1) {
+  const handleNext = React52.useCallback(() => {
+    if (features && activeIndex < features.length - 1) {
       setDirection(1);
       setActiveIndex(activeIndex + 1);
     }
-  };
-  const handlePrevious = () => {
+  }, [activeIndex, features]);
+  const handlePrevious = React52.useCallback(() => {
     if (activeIndex > 0) {
       setDirection(-1);
       setActiveIndex(activeIndex - 1);
     }
-  };
-  const handleFeatureClick = (index) => {
+  }, [activeIndex]);
+  const handleFeatureClick = React52.useCallback((index) => {
     setDirection(index > activeIndex ? 1 : -1);
     setActiveIndex(index);
-  };
+  }, [activeIndex]);
   const isPreviousDisabled = activeIndex === 0;
-  const isNextDisabled = activeIndex === features.length - 1;
-  const imageVariants = {
+  const isNextDisabled = !features || activeIndex === features.length - 1;
+  const imageVariants = React52.useMemo(() => ({
     enter: (direction2) => ({
       x: direction2 > 0 ? 300 : -300,
       opacity: 0
@@ -39674,7 +39902,22 @@ function FeatureAnimatedCarousel({
       x: direction2 < 0 ? 300 : -300,
       opacity: 0
     })
-  };
+  }), []);
+  if (!features || features.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Section,
+      {
+        background,
+        spacing,
+        pattern,
+        patternOpacity,
+        patternClassName,
+        className,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "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]" })
+      }
+    );
+  }
+  const currentFeature = features[activeIndex];
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -39685,7 +39928,7 @@ function FeatureAnimatedCarousel({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "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]", children: [
-        features && /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(
           FeaturesDesktop,
           {
             features,
@@ -39697,7 +39940,7 @@ function FeatureAnimatedCarousel({
             isNextDisabled
           }
         ),
-        features && /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(
           FeaturesMobile,
           {
             features,
@@ -39709,7 +39952,7 @@ function FeatureAnimatedCarousel({
             isNextDisabled
           }
         ),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", custom: direction, children: /* @__PURE__ */ jsxRuntime.jsx(
+        currentFeature?.image && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", custom: direction, children: /* @__PURE__ */ jsxRuntime.jsx(
           framerMotion.motion.div,
           {
             custom: direction,
@@ -39725,8 +39968,8 @@ function FeatureAnimatedCarousel({
             children: /* @__PURE__ */ jsxRuntime.jsx(
               img.Img,
               {
-                src: features ? features[activeIndex].image : void 0,
-                alt: features ? features[activeIndex].imageAlt || (typeof features[activeIndex].title === "string" ? features[activeIndex].title : "Feature image") : void 0,
+                src: currentFeature.image,
+                alt: currentFeature.imageAlt || (typeof currentFeature.title === "string" ? currentFeature.title : "Feature image"),
                 className: "h-full w-full object-cover",
                 optixFlowConfig
               }
@@ -62340,22 +62583,29 @@ var NavbarTabbedSections = ({
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "right", className: "w-[300px] overflow-y-auto", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "sr-only", children: "Navigation Menu" }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 pt-8", children: [
-                  renderMobileMenu,
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: cn(
-                        "mt-4 flex flex-col gap-2 border-t pt-4",
-                        actionsClassName
-                      ),
-                      children: renderAuthActions
-                    }
-                  )
-                ] })
-              ] })
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                SheetContent,
+                {
+                  side: "right",
+                  className: "w-[300px] overflow-y-auto",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "sr-only", children: "Navigation Menu" }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 pt-8", children: [
+                      renderMobileMenu,
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "mt-4 flex flex-col gap-2 border-t pt-4",
+                            actionsClassName
+                          ),
+                          children: renderAuthActions
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
             ] })
           ]
         }
@@ -77314,7 +77564,7 @@ function ListSearchableGrid({
     }
   );
 }
-var { useMemo: useMemo441 } = React52__namespace;
+var { useMemo: useMemo443 } = React52__namespace;
 function OfferModalNewsletterDiscount({
   title,
   emailPlaceholder,
@@ -77381,7 +77631,7 @@ function OfferModalNewsletterDiscount({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const dialogProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderCloseButton = useMemo441(() => {
+  const renderCloseButton = useMemo443(() => {
     if (closeButtonSlot) return closeButtonSlot;
     if (!closeButtonText) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute end-1.5 top-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -77395,12 +77645,12 @@ function OfferModalNewsletterDiscount({
       }
     ) }) });
   }, [closeButtonSlot, closeButtonText, closeClassName]);
-  const renderHeader = useMemo441(() => {
+  const renderHeader = useMemo443(() => {
     if (headerSlot) return headerSlot;
     if (!title) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { className: headerClassName, children: typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: cn("text-start font-serif text-2xl font-normal leading-snug", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: cn("text-start font-serif text-2xl font-normal leading-snug", titleClassName), children: title }) });
   }, [headerSlot, title, headerClassName, titleClassName]);
-  const renderForm = useMemo441(() => {
+  const renderForm = useMemo443(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       forms.Form,
@@ -77462,7 +77712,7 @@ function OfferModalNewsletterDiscount({
     }
   ) });
 }
-var { useMemo: useMemo442 } = React52__namespace;
+var { useMemo: useMemo444 } = React52__namespace;
 function OfferModalMembershipImage({
   overline,
   title,
@@ -77538,7 +77788,7 @@ function OfferModalMembershipImage({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const dialogProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderImage = useMemo442(() => {
+  const renderImage = useMemo444(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("max-h-[290px] h-full overflow-hidden max-lg:hidden", imageWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -77551,7 +77801,7 @@ function OfferModalMembershipImage({
       }
     ) });
   }, [imageSlot, image, imageWrapperClassName, imageClassName, optixFlowConfig]);
-  const renderCloseButton = useMemo442(() => {
+  const renderCloseButton = useMemo444(() => {
     if (closeButtonSlot) return closeButtonSlot;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -end-px -top-px z-10", children: /* @__PURE__ */ jsxRuntime.jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
@@ -77567,7 +77817,7 @@ function OfferModalMembershipImage({
       }
     ) }) });
   }, [closeButtonSlot, closeClassName]);
-  const renderForm = useMemo442(() => {
+  const renderForm = useMemo444(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       forms.Form,
@@ -77630,7 +77880,7 @@ function OfferModalMembershipImage({
       }
     );
   }, [formSlot, form, formConfig, formMethod, emailPlaceholder, inputClassName, submitClassName, buttonText, formClassName]);
-  const renderFooter = useMemo442(() => {
+  const renderFooter = useMemo444(() => {
     if (footerSlot) return footerSlot;
     if (!description) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(DialogFooter, { className: footerClassName, children: /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { className: cn("text-muted-foreground text-center text-xs leading-relaxed", descriptionClassName), children: description }) });
@@ -77658,7 +77908,7 @@ function OfferModalMembershipImage({
     }
   ) });
 }
-var { useMemo: useMemo443 } = React52__namespace;
+var { useMemo: useMemo445 } = React52__namespace;
 function OfferModalSheetNewsletter({
   logo,
   logoSlot,
@@ -77740,7 +77990,7 @@ function OfferModalSheetNewsletter({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const sheetProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderLogo = useMemo443(() => {
+  const renderLogo = useMemo445(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
@@ -77754,7 +78004,7 @@ function OfferModalSheetNewsletter({
       }
     );
   }, [logoSlot, logo, logoClassName, optixFlowConfig]);
-  const renderHeader = useMemo443(() => {
+  const renderHeader = useMemo445(() => {
     if (headerSlot) return headerSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(SheetHeader, { className: cn("gap-8 p-0", headerClassName), children: [
       renderLogo,
@@ -77764,7 +78014,7 @@ function OfferModalSheetNewsletter({
       ] })
     ] });
   }, [headerSlot, renderLogo, headerClassName, title, titleClassName, description, descriptionClassName]);
-  const renderForm = useMemo443(() => {
+  const renderForm = useMemo445(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsxRuntime.jsx(
       forms.Form,
@@ -77812,7 +78062,7 @@ function OfferModalSheetNewsletter({
       }
     );
   }, [formSlot, form, formConfig, formMethod, emailPlaceholder, inputClassName, submitClassName, buttonText, formClassName]);
-  const renderLegal = useMemo443(() => {
+  const renderLegal = useMemo445(() => {
     if (legalSlot) return legalSlot;
     if (!termsUrl || !termsText || !privacyUrl || !privacyText) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("text-muted-foreground text-xs", legalClassName), children: [
@@ -77826,7 +78076,7 @@ function OfferModalSheetNewsletter({
       "."
     ] });
   }, [legalSlot, termsUrl, termsText, privacyUrl, privacyText, legalClassName]);
-  const renderImage = useMemo443(() => {
+  const renderImage = useMemo445(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("h-1/2 basis-1/2", imageWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1, className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(