@opensite/ui 0.8.4 → 0.8.6

package/dist/registry.cjs

@@ -20331,7 +20331,6 @@ function FeatureShowcase({
   slideClassName,
   contentClassName,
   mediaClassName,
-  arrowClassName,
   equalizeOnMobile,
   stretchMediaOnMobile,
   background,
@@ -20340,10 +20339,21 @@ function FeatureShowcase({
   patternOpacity,
   patternClassName
 }) {
-  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 [api, setApi] = React52__namespace.useState();
+  const [canScrollPrevious, setCanScrollPrevious] = React52__namespace.useState(false);
+  const [canScrollNext, setCanScrollNext] = React52__namespace.useState(false);
+  React52__namespace.useEffect(() => {
+    if (!api) return;
+    const updateScrollState = () => {
+      setCanScrollPrevious(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    };
+    updateScrollState();
+    api.on("select", updateScrollState);
+    return () => {
+      api.off("select", updateScrollState);
+    };
+  }, [api]);
   const [mobileSlideHeight, setMobileSlideHeight] = React52.useState(
     null
   );
@@ -20386,7 +20396,7 @@ function FeatureShowcase({
   }, [equalizeOnMobile, items]);
   const carouselContent = React52.useMemo(() => {
     if (!items || items.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Carousel, { className: carouselClassName, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Carousel, { className: carouselClassName, setApi, 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",
         {
@@ -20415,15 +20425,13 @@ function FeatureShowcase({
         }
       ) }, `slide-${itemIndex}`)) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        CarouselPrevious,
-        {
-          className: cn(baseArrowClassName, "right-16", arrowClassName)
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        CarouselNext,
+        CarouselPagination,
         {
-          className: cn(baseArrowClassName, "right-0", arrowClassName)
+          onPrevious: () => api?.scrollPrev(),
+          onNext: () => api?.scrollNext(),
+          canScrollPrevious,
+          canScrollNext,
+          className: "absolute bottom-4 right-0 md:bottom-6"
         }
       )
     ] });
@@ -20436,8 +20444,9 @@ function FeatureShowcase({
     contentClassName,
     mediaWrapperClassName,
     mediaClassName,
-    baseArrowClassName,
-    arrowClassName
+    api,
+    canScrollPrevious,
+    canScrollNext
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -20473,7 +20482,7 @@ function FeatureSplitImage({
   imageClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -20490,11 +20499,20 @@ function FeatureSplitImage({
         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);
+      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(() => {
@@ -20505,7 +20523,10 @@ function FeatureSplitImage({
       {
         src: imageSrc,
         alt: imageAlt || "",
-        className: cn("max-h-96 w-full rounded-md object-cover", imageClassName),
+        className: cn(
+          "max-h-96 w-full rounded-md object-cover",
+          imageClassName
+        ),
         loading: "lazy",
         optixFlowConfig
       }
@@ -20521,14 +20542,74 @@ function FeatureSplitImage({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid items-center gap-8 lg:grid-cols-2", gridClassName), children: [
-        /* @__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 })),
-          (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
-      ] })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn("grid items-center gap-8 lg:grid-cols-2", gridClassName),
+          children: [
+            /* @__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  lg:text-lg",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mb-8 max-w-xl  lg:text-lg",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  )),
+                  (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
+          ]
+        }
+      )
     }
   );
 }
@@ -20550,7 +20631,7 @@ function FeatureSplitImageReverse({
   actionsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -20567,11 +20648,20 @@ function FeatureSplitImageReverse({
         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);
+      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(() => {
@@ -20582,7 +20672,10 @@ function FeatureSplitImageReverse({
       {
         src: imageSrc,
         alt: imageAlt || "",
-        className: cn("max-h-96 w-full rounded-md object-cover", imageClassName),
+        className: cn(
+          "max-h-96 w-full rounded-md object-cover",
+          imageClassName
+        ),
         loading: "lazy",
         optixFlowConfig
       }
@@ -20598,14 +20691,71 @@ function FeatureSplitImageReverse({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid items-center gap-8 md:gap-16 lg:grid-cols-2", gridClassName), children: [
-        imageContent,
-        /* @__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 })),
-          (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 })
-        ] })
-      ] })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "grid items-center gap-8 md:gap-16 lg:grid-cols-2",
+            gridClassName
+          ),
+          children: [
+            imageContent,
+            /* @__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 lg:text-lg", descriptionClassName),
+                      children: description
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn("mb-8 max-w-xl lg:text-lg", descriptionClassName),
+                      children: description
+                    }
+                  )),
+                  (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
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }
@@ -20621,7 +20771,7 @@ function FeatureIconGridBordered({
   gridClassName,
   cardClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -20639,18 +20789,67 @@ function FeatureIconGridBordered({
     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),
+        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) }),
+          (feature.icon || feature.iconName) && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "mb-8 flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground 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 }))
+            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 md:text-base",
+                  feature.descriptionClassName
+                ),
+                children: feature.description
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "text-sm md:text-base",
+                  feature.descriptionClassName
+                ),
+                children: feature.description
+              }
+            ))
           ] })
         ]
       },
@@ -20668,9 +20867,30 @@ function FeatureIconGridBordered({
       className,
       containerClassName,
       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 })),
-        (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 })
+        label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-xs ", labelClassName), children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-xs ", 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
+          }
+        )),
+        (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
+          }
+        )
       ]
     }
   );
@@ -20696,7 +20916,7 @@ function FeatureChecklistImage({
   checklistClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -20749,7 +20969,10 @@ function FeatureChecklistImage({
       {
         src: imageSrc,
         alt: imageAlt || "Feature illustration",
-        className: cn("max-h-96 w-full rounded-lg object-cover md:max-h-[500px] md:w-1/2", imageClassName),
+        className: cn(
+          "max-h-96 w-full rounded-lg object-cover md:max-h-[500px] md:w-1/2",
+          imageClassName
+        ),
         loading: "lazy",
         optixFlowConfig
       }
@@ -20763,31 +20986,101 @@ function FeatureChecklistImage({
       const content = isString ? item : item.content;
       const iconElement = isString ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-check-big", size: 16 }) : item.icon ?? (item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-check-big", size: 16 }));
       const itemClassName = isString ? void 0 : item.className;
-      return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-center gap-3", itemClassName), children: [
-        iconElement,
-        content
-      ] }, index);
-    });
-  }, [checklistSlot, checklistItems]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Section,
-    {
-      background,
-      spacing,
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "li",
+        {
+          className: cn("flex items-center gap-3", itemClassName),
+          children: [
+            iconElement,
+            content
+          ]
+        },
+        index
+      );
+    });
+  }, [checklistSlot, checklistItems]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
       pattern,
       patternOpacity,
       patternClassName,
       className,
       containerClassName: cn("max-w-6xl", containerClassName),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-12 md:flex-row", contentWrapperClassName), children: [
-        imageContent,
-        /* @__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 })),
-          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 })
-        ] })
-      ] })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "flex flex-col gap-12 md:flex-row",
+            contentWrapperClassName
+          ),
+          children: [
+            imageContent,
+            /* @__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
+                }
+              )),
+              actionsContent && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-wrap items-center gap-2",
+                    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
+                }
+              )
+            ] })
+          ]
+        }
+      )
     }
   );
 }
@@ -20863,7 +21156,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: [
-          (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.icon || slide.iconName) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-5 flex size-8 items-center justify-center rounded-full bg-primary text-primary-foreground 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 }))
         ] }) }) }) })
@@ -20920,27 +21213,30 @@ function FeatureCardGridLinked({
   cardClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   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 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;
@@ -20950,16 +21246,56 @@ function FeatureCardGridLinked({
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: cn("flex flex-col justify-between rounded-lg bg-muted", cardClassName, feature.className),
+          className: cn(
+            "flex flex-col justify-between rounded-lg bg-muted border",
+            cardClassName,
+            feature.className
+          ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between gap-10 border-b", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-between gap-8 py-6 pl-4 md:gap-14 md:py-10 md:pl-8 lg:justify-normal", children: [
-                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 }) })
+                feature.label && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "font-bold text-xs uppercase opacity-75",
+                      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-xl transition-all hover:opacity-80 md:text-2xl font-semibold leading-snug tracking-tighter",
+                      feature.headingClassName
+                    ),
+                    children: feature.heading
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "text-xl transition-all hover:opacity-80 md:text-2xl font-semibold leading-snug tracking-tighter",
+                      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(feature, imageAlt) }) })
             ] }),
-            feature.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("p-4 text-muted-foreground md:p-8", feature.descriptionClassName), children: feature.description })
+            feature.description && /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "p-4 text-muted-foreground md:p-8",
+                  feature.descriptionClassName
+                ),
+                children: feature.description
+              }
+            )
           ]
         },
         featureKey
@@ -20977,7 +21313,34 @@ function FeatureCardGridLinked({
       className,
       containerClassName,
       children: [
-        title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mb-16 max-w-3xl text-center", titleWrapperClassName), children: typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-4xl font-medium text-pretty lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-4xl font-medium text-pretty lg:text-5xl", titleClassName), children: title }) }),
+        title && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mx-auto mb-16 max-w-3xl text-center",
+              titleWrapperClassName
+            ),
+            children: typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h2",
+              {
+                className: cn(
+                  "text-4xl font-medium text-pretty lg:text-5xl",
+                  titleClassName
+                ),
+                children: title
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "text-4xl font-medium text-pretty lg:text-5xl",
+                  titleClassName
+                ),
+                children: title
+              }
+            )
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-8 lg:grid-cols-2", gridClassName), children: featuresContent })
       ]
     }
@@ -21001,27 +21364,45 @@ function FeatureNumberedCards({
   patternOpacity,
   patternClassName
 }) {
-  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) => {
-      const isString = typeof item === "string";
-      const content = isString ? item : item.content;
-      const iconElement = isString ? /* @__PURE__ */ jsxRuntime.jsx(
-        DynamicIcon,
-        {
-          name: "lucide/check-circle",
-          size: 16,
-          className: "mt-0.5 shrink-0 sm:mt-1"
-        }
-      ) : item.icon ?? (item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 16, className: "mt-0.5 shrink-0 sm:mt-1" }) : /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check-circle", size: 16, className: "mt-0.5 shrink-0 sm:mt-1" }));
-      const itemClassName = isString ? void 0 : item.className;
-      return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex gap-x-3", itemClassName), children: [
-        iconElement,
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm md:text-base", children: content })
-      ] }, itemIndex);
-    });
-  }, []);
+  const renderChecklistItems = React52.useCallback(
+    (feature) => {
+      if (feature.checklistSlot) return feature.checklistSlot;
+      if (!feature.checklistItems || feature.checklistItems.length === 0)
+        return null;
+      return feature.checklistItems.map((item, itemIndex) => {
+        const isString = typeof item === "string";
+        const content = isString ? item : item.content;
+        const iconElement = isString ? /* @__PURE__ */ jsxRuntime.jsx(
+          DynamicIcon,
+          {
+            name: "lucide/check-circle",
+            size: 16,
+            className: "mt-0.5 shrink-0 sm:mt-1"
+          }
+        ) : item.icon ?? (item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
+          DynamicIcon,
+          {
+            name: item.iconName,
+            size: 16,
+            className: "mt-0.5 shrink-0 sm:mt-1"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          DynamicIcon,
+          {
+            name: "lucide/check-circle",
+            size: 16,
+            className: "mt-0.5 shrink-0 sm:mt-1"
+          }
+        ));
+        const itemClassName = isString ? void 0 : item.className;
+        return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex gap-x-3", itemClassName), children: [
+          iconElement,
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm md:text-base", children: content })
+        ] }, itemIndex);
+      });
+    },
+    []
+  );
   const featuresContent = React52.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
@@ -21035,7 +21416,7 @@ function FeatureNumberedCards({
             {
               src: feature.image,
               alt: imageAlt,
-              className: "h-full w-full object-cover",
+              className: "h-full w-full object-cover rounded-tr-lg rounded-tl-lg md:rounded-tl-0 rounded-br-0 md:rounded-br-lg",
               loading: "lazy",
               optixFlowConfig
             }
@@ -21043,19 +21424,111 @@ function FeatureNumberedCards({
         }
         return null;
       };
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid rounded-lg border md:grid-cols-2", cardClassName, feature.className), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col px-6 py-8 lg:px-8 lg:py-12 xl:px-12 xl:py-20", feature.contentClassName), children: [
-          feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-3 text-2xl font-medium sm:mb-5 md:text-3xl lg:text-4xl", titleClassName), children: feature.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-3 text-2xl font-medium sm:mb-5 md:text-3xl lg:text-4xl", titleClassName), children: feature.title })),
-          feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8 text-sm text-muted-foreground sm:mb-10 md:text-base", descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8 text-sm text-muted-foreground sm:mb-10 md:text-base", descriptionClassName), children: feature.description })),
-          feature.checklistItems && feature.checklistItems.length > 0 || feature.checklistSlot ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("mt-auto space-y-2 sm:space-y-3", checklistClassName), children: renderChecklistItems(feature) }) : null
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative order-first max-h-80 md:order-last md:max-h-[500px]", feature.imageWrapperClassName), children: [
-          renderImage(),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("absolute top-5 left-5 flex size-6 items-center justify-center rounded-sm bg-primary font-mono text-xs text-primary-foreground md:top-10 md:left-10", badgeClassName), children: String(index + 1).padStart(2, "0") })
-        ] })
-      ] }, index);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "grid rounded-lg border md:grid-cols-2",
+            cardClassName,
+            feature.className
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col px-6 py-8 lg:px-8 lg:py-12 xl:px-12 xl:py-20",
+                  feature.contentClassName
+                ),
+                children: [
+                  feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "h3",
+                    {
+                      className: cn(
+                        "mb-3 text-2xl font-medium sm:mb-5 md:text-3xl lg:text-4xl",
+                        titleClassName
+                      ),
+                      children: feature.title
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mb-3 text-2xl font-medium sm:mb-5 md:text-3xl lg:text-4xl",
+                        titleClassName
+                      ),
+                      children: feature.title
+                    }
+                  )),
+                  feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mb-8 text-sm sm:mb-10 md:text-base",
+                        descriptionClassName
+                      ),
+                      children: feature.description
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mb-8 text-sm sm:mb-10 md:text-base",
+                        descriptionClassName
+                      ),
+                      children: feature.description
+                    }
+                  )),
+                  feature.checklistItems && feature.checklistItems.length > 0 || feature.checklistSlot ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "ul",
+                    {
+                      className: cn(
+                        "mt-auto space-y-2 sm:space-y-3",
+                        checklistClassName
+                      ),
+                      children: renderChecklistItems(feature)
+                    }
+                  ) : null
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "relative order-first max-h-80 md:order-last md:max-h-[500px]",
+                  feature.imageWrapperClassName
+                ),
+                children: [
+                  renderImage(),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "absolute top-5 left-5 flex size-6 items-center justify-center rounded-sm bg-primary font-mono text-xs text-primary-foreground md:top-10 md:left-10",
+                        badgeClassName
+                      ),
+                      children: String(index + 1).padStart(2, "0")
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        },
+        index
+      );
     });
-  }, [featuresSlot, features, cardClassName, titleClassName, descriptionClassName, checklistClassName, badgeClassName, optixFlowConfig]);
+  }, [
+    featuresSlot,
+    features,
+    cardClassName,
+    titleClassName,
+    descriptionClassName,
+    checklistClassName,
+    badgeClassName,
+    optixFlowConfig
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -21066,7 +21539,16 @@ function FeatureNumberedCards({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-10 rounded-lg border py-10 md:px-4", cardsWrapperClassName), children: featuresContent })
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "space-y-4 md:space-y-10 rounded-lg border-none md:border md:bg-background p-0 md:p-10",
+            cardsWrapperClassName
+          ),
+          children: featuresContent
+        }
+      )
     }
   );
 }
@@ -21099,12 +21581,21 @@ function FeatureIconGridAccent({
         "div",
         {
           className: cn(
-            "flex flex-col justify-between rounded-lg bg-accent p-6 md:min-h-[300px] md:p-8",
+            "flex flex-col justify-between rounded-lg p-6 md:min-h-[300px] md:p-8",
             cardClassName,
             feature.className
           ),
           children: [
-            iconElement && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-6 flex size-11 items-center justify-center rounded-full bg-background", feature.iconClassName), children: iconElement }),
+            iconElement && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "mb-6 flex size-11 items-center justify-center rounded-full",
+                  feature.iconClassName
+                ),
+                children: iconElement
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
               feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-medium md:text-2xl", children: feature.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium md:text-2xl", children: feature.title })),
               feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-muted-foreground", children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-muted-foreground", children: feature.description }))
@@ -21126,12 +21617,45 @@ function FeatureIconGridAccent({
       className,
       containerClassName,
       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 }))
-        ] }) }),
-        featuresContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mt-20 grid max-w-5xl gap-6 md:grid-cols-2", gridClassName), children: featuresContent })
+        (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", 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 text-balance",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "md:max-w-2xl text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+            ] })
+          }
+        ),
+        featuresContent && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mx-auto mt-20 grid max-w-5xl gap-6 md:grid-cols-2",
+              gridClassName
+            ),
+            children: featuresContent
+          }
+        )
       ]
     }
   );
@@ -21148,24 +21672,56 @@ function FeatureThreeColumnValues({
   gridClassName,
   cardClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
 }) {
-  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 null;
-  }, []);
+  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 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: [
-      (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));
+    return values.map((value, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn("rounded-lg p-5", cardClassName, value.className),
+        children: [
+          (value.icon || value.iconName) && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "mb-8 flex size-12 items-center justify-center rounded-full ",
+                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 ", value.descriptionClassName), children: value.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("leading-7", value.descriptionClassName), children: value.description }))
+        ]
+      },
+      index
+    ));
   }, [valuesSlot, values, cardClassName, renderValueIcon]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -21178,9 +21734,30 @@ function FeatureThreeColumnValues({
       className,
       containerClassName,
       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 })),
-        (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 })
+        label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-sm lg:text-base", labelClassName), children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-sm 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
+          }
+        )),
+        (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
+          }
+        )
       ]
     }
   );
@@ -21236,7 +21813,7 @@ function FeatureBadgeGridSix({
         {
           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 }),
+            iconContent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground 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 }))
@@ -21449,31 +22026,57 @@ function FeatureTabbedContentImage({
   contentGridClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
 }) {
-  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) => {
-      const isString = typeof feature === "string";
-      const content = isString ? feature : feature.content;
-      const iconElement = isString ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check-circle-2", size: 16 }) : feature.icon ?? (feature.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName, size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check-circle-2", size: 16 }));
-      const itemClassName = isString ? void 0 : feature.className;
-      return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-center gap-2", itemClassName), children: [
-        iconElement,
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: content })
-      ] }, index);
-    });
-  }, []);
-  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) => {
-      if (action.children) {
-        return /* @__PURE__ */ jsxRuntime.jsx(
+  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) => {
+        const isString = typeof feature === "string";
+        const content = isString ? feature : feature.content;
+        const iconElement = isString ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check-circle-2", size: 16 }) : feature.icon ?? (feature.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName, size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check-circle-2", size: 16 }));
+        const itemClassName = isString ? void 0 : feature.className;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "li",
+          {
+            className: cn("flex items-center gap-2", itemClassName),
+            children: [
+              iconElement,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: content })
+            ]
+          },
+          index
+        );
+      });
+    },
+    []
+  );
+  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) => {
+        if (action.children) {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            Pressable,
+            {
+              href: action.href,
+              onClick: action.onClick,
+              variant: action.variant,
+              size: action.size,
+              className: cn("mt-8", action.className),
+              "aria-label": action["aria-label"],
+              asButton: true,
+              children: action.children
+            },
+            index
+          );
+        }
+        return /* @__PURE__ */ jsxRuntime.jsxs(
           Pressable,
           {
             href: action.href,
@@ -21483,46 +22086,39 @@ function FeatureTabbedContentImage({
             className: cn("mt-8", action.className),
             "aria-label": action["aria-label"],
             asButton: true,
-            children: action.children
+            children: [
+              action.icon,
+              action.label,
+              action.iconAfter
+            ]
           },
           index
         );
-      }
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        Pressable,
+      });
+    },
+    []
+  );
+  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");
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        img.Img,
         {
-          href: action.href,
-          onClick: action.onClick,
-          variant: action.variant,
-          size: action.size,
-          className: cn("mt-8", action.className),
-          "aria-label": action["aria-label"],
-          asButton: true,
-          children: [
-            action.icon,
-            action.label,
-            action.iconAfter
-          ]
-        },
-        index
+          src: slide.image,
+          alt: imageAlt,
+          className: cn(
+            "order-first max-h-[400px] w-full rounded-lg object-cover md:order-last",
+            slide.imageClassName
+          ),
+          loading: "lazy",
+          optixFlowConfig
+        }
       );
-    });
-  }, []);
-  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");
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
-      {
-        src: slide.image,
-        alt: imageAlt,
-        className: cn("order-first max-h-[400px] w-full rounded-lg object-cover md:order-last", slide.imageClassName),
-        loading: "lazy",
-        optixFlowConfig
-      }
-    );
-  }, [optixFlowConfig]);
+    },
+    [optixFlowConfig]
+  );
   const slidesContent = React52.useMemo(() => {
     if (slidesSlot) return slidesSlot;
     if (!slides || slides.length === 0) return null;
@@ -21531,7 +22127,7 @@ function FeatureTabbedContentImage({
         TabsTrigger,
         {
           value: slide.id.toString(),
-          className: cn("text-sm hover:bg-background md:text-base", tabTriggerClassName),
+          className: cn("text-sm  md:text-base", tabTriggerClassName),
           children: slide.tabName
         },
         slide.id
@@ -21541,20 +22137,79 @@ function FeatureTabbedContentImage({
         {
           value: slide.id.toString(),
           className: cn("max-w-5xl", tabContentClassName),
-          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid grid-cols-1 items-center gap-10 md:grid-cols-2", contentGridClassName, slide.className), children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-4 text-2xl font-semibold lg:text-4xl", slide.titleClassName), children: slide.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-2xl font-semibold lg:text-4xl", slide.titleClassName), children: slide.title })),
-              slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground lg:text-xl", slide.descriptionClassName), children: slide.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground lg:text-xl", slide.descriptionClassName), children: slide.description })),
-              slide.features && slide.features.length > 0 || slide.featuresSlot ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("mt-8 grid grid-cols-1 gap-2 lg:grid-cols-2", slide.featuresClassName), children: renderFeatures(slide) }) : null,
-              renderActions(slide)
-            ] }),
-            renderImage(slide)
-          ] })
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "grid grid-cols-1 items-center gap-10 md:grid-cols-2",
+                contentGridClassName,
+                slide.className
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "h2",
+                    {
+                      className: cn(
+                        "mb-4 text-2xl font-semibold lg:text-4xl",
+                        slide.titleClassName
+                      ),
+                      children: slide.title
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mb-4 text-2xl font-semibold lg:text-4xl",
+                        slide.titleClassName
+                      ),
+                      children: slide.title
+                    }
+                  )),
+                  slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: cn(" lg:text-xl", slide.descriptionClassName),
+                      children: slide.description
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn("lg:text-xl", slide.descriptionClassName),
+                      children: slide.description
+                    }
+                  )),
+                  slide.features && slide.features.length > 0 || slide.featuresSlot ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "ul",
+                    {
+                      className: cn(
+                        "mt-8 grid grid-cols-1 gap-2 lg:grid-cols-2",
+                        slide.featuresClassName
+                      ),
+                      children: renderFeatures(slide)
+                    }
+                  ) : null,
+                  renderActions(slide)
+                ] }),
+                renderImage(slide)
+              ]
+            }
+          )
         },
         slide.id
       ))
     ] });
-  }, [slidesSlot, slides, tabsListClassName, tabTriggerClassName, tabContentClassName, contentGridClassName, renderFeatures, renderActions, renderImage]);
+  }, [
+    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();
@@ -21571,15 +22226,63 @@ function FeatureTabbedContentImage({
       className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex max-w-3xl flex-col items-center gap-6", headerClassName), children: [
-          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.jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto flex max-w-3xl flex-col items-center gap-6",
+              headerClassName
+            ),
+            children: [
+              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  lg:text-xl",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-center text-balance  lg:text-xl",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ))
+            ]
+          }
+        ),
         (slidesSlot || slides && slides.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-12", tabsWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
           Tabs,
           {
             defaultValue: effectiveDefaultTab,
-            className: cn("mx-auto flex w-fit flex-col items-center gap-8 md:gap-12", tabsClassName),
+            className: cn(
+              "mx-auto flex w-fit flex-col items-center gap-8 md:gap-12",
+              tabsClassName
+            ),
             children: slidesContent
           }
         ) })
@@ -21607,14 +22310,15 @@ function FeatureUtilityCardsGrid({
   cardClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
 }) {
   const renderLabelIcon = React52.useMemo(() => {
     if (labelIcon) return labelIcon;
-    if (labelIconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: labelIconName, size: 20, className: "text-primary" });
+    if (labelIconName)
+      return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: labelIconName, size: 20, className: "text-primary" });
     return null;
   }, [labelIcon, labelIconName]);
   const learnMoreContent = React52.useMemo(() => {
@@ -21626,7 +22330,10 @@ function FeatureUtilityCardsGrid({
         {
           href: learnMoreAction.href,
           onClick: learnMoreAction.onClick,
-          className: cn("hover:text-primary hover:underline", learnMoreAction.className),
+          className: cn(
+            "hover:text-primary hover:underline",
+            learnMoreAction.className
+          ),
           "aria-label": learnMoreAction["aria-label"],
           children: learnMoreAction.children
         }
@@ -21637,7 +22344,7 @@ function FeatureUtilityCardsGrid({
       {
         href: learnMoreAction.href,
         onClick: learnMoreAction.onClick,
-        className: cn("hover:text-primary hover:underline", learnMoreAction.className),
+        className: cn(learnMoreAction.className),
         "aria-label": learnMoreAction["aria-label"],
         children: [
           learnMoreAction.icon,
@@ -21647,32 +22354,45 @@ function FeatureUtilityCardsGrid({
       }
     );
   }, [learnMoreSlot, learnMoreAction]);
-  const renderUtilityImage = React52__namespace.useCallback((utility) => {
-    if (utility.imageSlot) return utility.imageSlot;
-    if (utility.image) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: utility.image,
-          alt: utility.imageAlt || (typeof utility.title === "string" ? utility.title : "Utility image"),
-          className: cn("aspect-video w-full object-cover", utility.imageClassName),
-          loading: "lazy",
-          optixFlowConfig
-        }
-      );
-    }
-    return null;
-  }, [optixFlowConfig]);
+  const renderUtilityImage = React52__namespace.useCallback(
+    (utility) => {
+      if (utility.imageSlot) return utility.imageSlot;
+      if (utility.image) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: utility.image,
+            alt: utility.imageAlt || (typeof utility.title === "string" ? utility.title : "Utility image"),
+            className: cn(
+              "aspect-video w-full object-cover",
+              utility.imageClassName
+            ),
+            loading: "lazy",
+            optixFlowConfig
+          }
+        );
+      }
+      return null;
+    },
+    [optixFlowConfig]
+  );
   const utilitiesContent = React52.useMemo(() => {
     if (utilitiesSlot) return utilitiesSlot;
     if (!utilities || utilities.length === 0) return null;
-    return utilities.map((utility, index) => /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cn("overflow-hidden pt-0", cardClassName, utility.className), children: [
-      renderUtilityImage(utility),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5", children: [
-        utility.title && (typeof utility.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-1 font-medium", utility.titleClassName), children: utility.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-1 font-medium", utility.titleClassName), children: utility.title })),
-        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));
+    return utilities.map((utility, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      Card,
+      {
+        className: cn("overflow-hidden pt-0", cardClassName, utility.className),
+        children: [
+          renderUtilityImage(utility),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5", children: [
+            utility.title && (typeof utility.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-1 font-medium", utility.titleClassName), children: utility.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-1 font-medium", utility.titleClassName), children: utility.title })),
+            utility.description && (typeof utility.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("", utility.descriptionClassName), children: utility.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("", utility.descriptionClassName), children: utility.description }))
+          ] })
+        ]
+      },
+      index
+    ));
   }, [utilitiesSlot, utilities, cardClassName, renderUtilityImage]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -21686,20 +22406,50 @@ function FeatureUtilityCardsGrid({
       containerClassName: cn("max-w-7xl", containerClassName),
       children: [
         (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
-          ] }),
+          /* @__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 ", labelClassName), children: [
+                  renderLabelIcon,
+                  label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: label }))
+                ] }),
+                learnMoreContent
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "mt-3 mb-8" })
         ] }),
         (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 })),
+          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 }))
         ] }),
-        (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 })
+        (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
+          }
+        )
       ]
     }
   );
@@ -21892,7 +22642,7 @@ function FeatureChecklistThreeColumn({
           Badge,
           {
             variant: "outline",
-            className: cn("absolute top-5 left-5 bg-primary-foreground", card.badgeClassName),
+            className: cn("absolute top-5 left-5 bg-background", card.badgeClassName),
             children: card.badge
           }
         )
@@ -22060,7 +22810,7 @@ function FeatureIconTabsContent({
   tabContentClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -22070,12 +22820,28 @@ function FeatureIconTabsContent({
     if (tab.iconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: tab.iconName, size: 16 });
     return null;
   }, []);
-  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) => {
-      if (action.children) {
-        return /* @__PURE__ */ jsxRuntime.jsx(
+  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) => {
+        if (action.children) {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            Pressable,
+            {
+              href: action.href,
+              onClick: action.onClick,
+              variant: action.variant,
+              size: action.size,
+              className: cn("mt-2.5 w-fit gap-2", action.className),
+              "aria-label": action["aria-label"],
+              asButton: true,
+              children: action.children
+            },
+            index
+          );
+        }
+        return /* @__PURE__ */ jsxRuntime.jsxs(
           Pressable,
           {
             href: action.href,
@@ -22085,90 +22851,174 @@ function FeatureIconTabsContent({
             className: cn("mt-2.5 w-fit gap-2", action.className),
             "aria-label": action["aria-label"],
             asButton: true,
-            children: action.children
+            children: [
+              action.icon,
+              action.label,
+              action.iconAfter
+            ]
           },
           index
         );
+      });
+    },
+    []
+  );
+  const renderTabContentImage = React52.useCallback(
+    (content) => {
+      if (content.imageSlot) return content.imageSlot;
+      if (content.imageSrc) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: content.imageSrc,
+            alt: content.imageAlt || "Tab content image",
+            className: cn(
+              "h-full w-full rounded-xl object-cover",
+              content.imageClassName
+            ),
+            loading: "lazy",
+            optixFlowConfig
+          }
+        );
       }
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        Pressable,
-        {
-          href: action.href,
-          onClick: action.onClick,
-          variant: action.variant,
-          size: action.size,
-          className: cn("mt-2.5 w-fit gap-2", action.className),
-          "aria-label": action["aria-label"],
-          asButton: true,
-          children: [
-            action.icon,
-            action.label,
-            action.iconAfter
-          ]
-        },
-        index
-      );
-    });
-  }, []);
-  const renderTabContentImage = React52.useCallback((content) => {
-    if (content.imageSlot) return content.imageSlot;
-    if (content.imageSrc) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: content.imageSrc,
-          alt: content.imageAlt || "Tab content image",
-          className: cn("h-full w-full rounded-xl object-cover", content.imageClassName),
-          loading: "lazy",
-          optixFlowConfig
-        }
-      );
-    }
-    return null;
-  }, [optixFlowConfig]);
+      return null;
+    },
+    [optixFlowConfig]
+  );
   const tabsContent = React52.useMemo(() => {
     if (tabsSlot) return tabsSlot;
     if (!tabs || tabs.length === 0) return null;
     const activeDefaultTab = defaultTab || tabs[0]?.value;
     return /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultValue: activeDefaultTab, className: "mt-8", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: cn("container flex flex-col items-center justify-center gap-4 bg-transparent sm:flex-row md:gap-10", tabsListClassName), children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
-        TabsTrigger,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container overflow-x-auto px-4 pb-2 md:px-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+        TabsList,
         {
-          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: [
-            (tab.icon || tab.iconName) && renderTabIcon(tab),
-            tab.label
-          ]
-        },
-        tab.value
-      )) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mt-8 max-w-7xl rounded-2xl bg-muted/70 p-6 lg:p-16", contentWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: tabs.map((tab) => {
-        if (tab.contentSlot) {
-          return /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: tab.value, className: tabContentClassName, children: tab.contentSlot }, tab.value);
+          className: cn(
+            "inline-flex w-auto min-w-full items-center justify-start gap-2 bg-transparent md:justify-center md:gap-4",
+            tabsListClassName
+          ),
+          children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
+            TabsTrigger,
+            {
+              value: tab.value,
+              className: cn(
+                "flex shrink-0 items-center gap-2 rounded-lg border border-border bg-background px-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:border-primary data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                tabTriggerClassName,
+                tab.className
+              ),
+              children: [
+                (tab.icon || tab.iconName) && renderTabIcon(tab),
+                tab.label
+              ]
+            },
+            tab.value
+          ))
         }
-        const content = tab.content;
-        if (!content) return null;
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          TabsContent,
-          {
-            value: tab.value,
-            className: cn("grid place-items-start gap-20 lg:grid-cols-2 lg:gap-10", tabContentClassName, content.className),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
-                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 })),
-                (content.actionsSlot || content.actions && content.actions.length > 0) && renderTabContentActions(content)
-              ] }),
-              (content.imageSlot || content.imageSrc) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-[300px] w-full lg:h-[400px]", children: renderTabContentImage(content) })
-            ]
-          },
-          tab.value
-        );
-      }) }) })
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "mx-auto mt-8 max-w-7xl rounded-2xl bg-muted/70 p-6 lg:p-16",
+            contentWrapperClassName
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: tabs.map((tab) => {
+            if (tab.contentSlot) {
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                TabsContent,
+                {
+                  value: tab.value,
+                  className: tabContentClassName,
+                  children: tab.contentSlot
+                },
+                tab.value
+              );
+            }
+            const content = tab.content;
+            if (!content) return null;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              TabsContent,
+              {
+                value: tab.value,
+                className: cn(
+                  "grid place-items-start gap-20 lg:grid-cols-2 lg:gap-10",
+                  tabContentClassName,
+                  content.className
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
+                    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
+                      }
+                    )),
+                    (content.actionsSlot || content.actions && content.actions.length > 0) && renderTabContentActions(content)
+                  ] }),
+                  (content.imageSlot || content.imageSrc) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-[300px] w-full lg:h-[400px]", children: renderTabContentImage(content) })
+                ]
+              },
+              tab.value
+            );
+          }) })
+        }
+      )
     ] });
-  }, [tabsSlot, tabs, defaultTab, tabsListClassName, tabTriggerClassName, contentWrapperClassName, tabContentClassName, renderTabIcon, renderTabContentActions, renderTabContentImage]);
+  }, [
+    tabsSlot,
+    tabs,
+    defaultTab,
+    tabsListClassName,
+    tabTriggerClassName,
+    contentWrapperClassName,
+    tabContentClassName,
+    renderTabIcon,
+    renderTabContentActions,
+    renderTabContentImage
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -22180,11 +23030,44 @@ function FeatureIconTabsContent({
       className,
       containerClassName: cn("mx-auto", containerClassName),
       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 }))
-        ] }),
+        (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
+                }
+              ))
+            ]
+          }
+        ),
         tabsContent
       ]
     }
@@ -22265,7 +23148,7 @@ function FeatureImageOverlayBadge({
   overlayTitleClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -22318,7 +23201,10 @@ function FeatureImageOverlayBadge({
         {
           src: imageSrc,
           alt: imageAlt || "Feature illustration",
-          className: cn("rounded-xl object-cover md:aspect-video lg:aspect-auto", imageClassName),
+          className: cn(
+            "rounded-2xl object-cover md:aspect-video lg:aspect-auto w-full h-auto",
+            imageClassName
+          ),
           loading: "lazy",
           optixFlowConfig
         }
@@ -22336,41 +23222,111 @@ function FeatureImageOverlayBadge({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid place-items-center gap-10 lg:grid-cols-2", gridClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-5", contentClassName), children: [
-          badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: cn("w-fit bg-background", badgeClassName), children: badge }),
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { 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 })
-        ] }),
-        imageContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative rounded-xl", imageWrapperClassName), children: [
-          imageContent,
-          (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,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "grid place-items-center gap-10 lg:grid-cols-2",
+            gridClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-5", contentClassName), children: [
+              badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: cn("", badgeClassName), children: badge }),
+              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h3",
+                {
+                  className: cn(
+                    "text-3xl font-semibold lg:text-4xl leading-snug text-balance",
+                    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("lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("lg:text-lg", descriptionClassName), children: description })),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex items-center gap-4 flex-wrap",
+                    actionsClassName
+                  ),
+                  children: actionsContent
+                }
+              )
+            ] }),
+            imageContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative rounded-2xl", imageWrapperClassName), children: [
+              imageContent,
+              (avatarSrc || avatarBadgeText || overlayTitle || overlayLinkText) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
                   {
-                    href: overlayLinkUrl,
-                    onClick: overlayLinkOnClick,
-                    className: "flex items-center gap-1 font-medium",
-                    children: [
-                      overlayLinkText,
-                      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
-                    ]
+                    className: cn(
+                      "absolute top-0 right-0 bottom-0 left-0 rounded-2xl bg-linear-to-t from-black via-black/20 to-transparent",
+                      overlayClassName
+                    )
                   }
-                )
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between pt-4 pr-4 pl-4 pb-8 md:pt-7 md:bpr-7 md:pl-7 md:pb-7 rounded-2xl", children: [
+                  (avatarSrc || avatarBadgeText) && /* @__PURE__ */ 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 shadow-xl",
+                        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", 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,
+                        children: [
+                          overlayLinkText,
+                          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 18 })
+                        ]
+                      }
+                    )
+                  ] })
+                ] })
               ] })
             ] })
-          ] })
-        ] })
-      ] })
+          ]
+        }
+      )
     }
   );
 }
@@ -22775,7 +23731,7 @@ function FeatureStatsHighlight({
   statsGridClassName,
   statCardClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -22814,10 +23770,23 @@ function FeatureStatsHighlight({
     return stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn("flex flex-col gap-2 rounded-xl border bg-muted/30 p-6", statCardClassName, stat.className),
+        className: cn(
+          "flex flex-col gap-2 rounded-xl border bg-card p-6",
+          statCardClassName,
+          stat.className
+        ),
         children: [
-          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 })
+          stat.value && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "text-4xl font-bold lg:text-5xl",
+                stat.valueClassName
+              ),
+              children: stat.value
+            }
+          ),
+          stat.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("", stat.labelClassName), children: stat.label })
         ]
       },
       index
@@ -22833,15 +23802,39 @@ function FeatureStatsHighlight({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-10 lg:grid-cols-2 lg:gap-20", gridClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-5", contentClassName), children: [
-          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 })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent })
-        ] }),
-        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-2 gap-6", statsGridClassName), children: statsContent })
-      ] })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn("grid gap-10 lg:grid-cols-2 lg:gap-20", gridClassName),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-5", contentClassName), children: [
+              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(" lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(" lg:text-lg", descriptionClassName), children: description })),
+              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent })
+            ] }),
+            (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-2 gap-6", statsGridClassName), children: statsContent })
+          ]
+        }
+      )
     }
   );
 }
@@ -22858,7 +23851,7 @@ function AccordionItem({
     AccordionPrimitive__namespace.Item,
     {
       "data-slot": "accordion-item",
-      className: cn("border-b last:border-b-0", className),
+      className: cn("border-b ", className),
       ...props
     }
   );
@@ -22879,7 +23872,13 @@ function AccordionTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DynamicIcon,
+          {
+            name: "lucide/chevron-down",
+            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          }
+        )
       ]
     }
   ) });
@@ -34789,7 +35788,10 @@ function BlogHorizontalTimelineComponent({
             /* @__PURE__ */ jsxRuntime.jsx(
               Card,
               {
-                className: cn("w-full border-none shadow-none", postCardClassName),
+                className: cn(
+                  "w-full border-none shadow-none pt-0 pb-6 md:pt-6 md:pb-6",
+                  postCardClassName
+                ),
                 children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
@@ -34804,9 +35806,9 @@ function BlogHorizontalTimelineComponent({
                       ] }),
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-start gap-4 md:h-full md:justify-between md:gap-6", children: [
                         postDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base leading-relaxed font-normal tracking-tight text-muted-foreground md:text-xl line-clamp-3", children: postDescription }),
-                        readText && /* @__PURE__ */ jsxRuntime.jsxs(Pressable, { href: postHref, asButton: true, variant: "link", children: [
+                        readText && /* @__PURE__ */ jsxRuntime.jsxs(Pressable, { href: postHref, asButton: true, variant: "ghost", children: [
                           readText,
-                          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20 })
+                          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 20 })
                         ] })
                       ] })
                     ]
@@ -34847,7 +35849,7 @@ function BlogHorizontalTimelineComponent({
             children: heading
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-12", headingClassName), children: heading })),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col", postsClassName), children: renderPosts })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-0 md:gap-20", postsClassName), children: renderPosts })
       ] })
     }
   );
@@ -35463,7 +36465,7 @@ function ArticleSidebarStickyComponent({
   children,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity
 }) {
@@ -35474,7 +36476,10 @@ function ArticleSidebarStickyComponent({
       Pressable,
       {
         href: backHref,
-        className: cn("inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground", backLinkClassName),
+        className: cn(
+          "inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground",
+          backLinkClassName
+        ),
         children: [
           backIcon ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 16 }),
           backText
@@ -35482,21 +36487,38 @@ function ArticleSidebarStickyComponent({
       }
     );
   }, [backLinkSlot, backHref, backText, backIcon, backLinkClassName]);
-  const renderAuthor = React52__namespace.useCallback((isMobile = false) => {
-    if (authorSlot) return authorSlot;
-    if (!authorName) return null;
-    const avatarSize = isMobile ? "h-8 w-8" : "h-10 w-10";
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-3", authorClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: avatarSize, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: authorImage }),
-        /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: authorName.charAt(0) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        authorHref ? /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: authorHref, className: "text-sm font-medium hover:underline", children: authorName }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: authorName }),
-        publishDate && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: publishDate })
-      ] })
-    ] });
-  }, [authorSlot, authorName, authorImage, authorHref, publishDate, authorClassName]);
+  const renderAuthor = React52__namespace.useCallback(
+    (isMobile = false) => {
+      if (authorSlot) return authorSlot;
+      if (!authorName) return null;
+      const avatarSize = isMobile ? "h-8 w-8" : "h-10 w-10";
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-3", authorClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: avatarSize, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: authorImage }),
+          /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: authorName.charAt(0) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          authorHref ? /* @__PURE__ */ jsxRuntime.jsx(
+            Pressable,
+            {
+              href: authorHref,
+              className: "text-sm font-medium hover:underline",
+              children: authorName
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: authorName }),
+          publishDate && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: publishDate })
+        ] })
+      ] });
+    },
+    [
+      authorSlot,
+      authorName,
+      authorImage,
+      authorHref,
+      publishDate,
+      authorClassName
+    ]
+  );
   const heroMediaContent = React52__namespace.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
@@ -35505,11 +36527,20 @@ function ArticleSidebarStickyComponent({
       {
         src: heroImageSrc,
         alt: heroImageAlt,
-        className: cn("my-8 aspect-video w-full rounded-lg object-cover", heroImageClassName),
+        className: cn(
+          "my-8 aspect-video w-full rounded-lg object-cover",
+          heroImageClassName
+        ),
         optixFlowConfig
       }
     );
-  }, [heroMediaSlot, heroImageSrc, heroImageAlt, heroImageClassName, optixFlowConfig]);
+  }, [
+    heroMediaSlot,
+    heroImageSrc,
+    heroImageAlt,
+    heroImageClassName,
+    optixFlowConfig
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -35523,13 +36554,31 @@ function ArticleSidebarStickyComponent({
           backLinkContent,
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: renderAuthor(false) })
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 lg:hidden", children: backLinkContent }),
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "not-prose mt-4 lg:hidden", children: renderAuthor(true) }),
-          heroMediaContent,
-          children
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "article",
+          {
+            className: cn(
+              "prose max-w-none dark:prose-invert",
+              articleClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 lg:hidden", children: backLinkContent }),
+              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl font-bold tracking-tight md:text-5xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "not-prose mt-4 lg:hidden", children: renderAuthor(true) }),
+              heroMediaContent,
+              children
+            ]
+          }
+        )
       ] }) })
     }
   );
@@ -35723,7 +36772,6 @@ function ArticleBreadcrumbSocialComponent({
   authorClassName,
   heroImageClassName,
   tocClassName,
-  shareClassName,
   breadcrumbs,
   breadcrumbsSlot,
   currentPage,
@@ -35738,9 +36786,6 @@ function ArticleBreadcrumbSocialComponent({
   sections,
   tocSlot,
   renderSectionLink,
-  socialLinks: socialLinksProp,
-  shareUrls,
-  shareSlot,
   heroImageSrc,
   heroImageAlt,
   heroMediaSlot,
@@ -35749,35 +36794,11 @@ function ArticleBreadcrumbSocialComponent({
   enableBackToTop,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity
 }) {
   const author = authorProp ?? (authorName ? { name: authorName, image: authorImage, role: authorRole } : void 0);
-  const platformLabels = {
-    twitter: "Twitter",
-    x: "X",
-    facebook: "Facebook",
-    linkedin: "LinkedIn",
-    instagram: "Instagram",
-    github: "GitHub"
-  };
-  const socialIconMap2 = {
-    twitter: "simple-icons/x",
-    // Twitter is now X
-    x: "simple-icons/x",
-    facebook: "simple-icons/facebook",
-    linkedin: "simple-icons/linkedin",
-    instagram: "simple-icons/instagram",
-    github: "simple-icons/github"
-  };
-  const socialLinks = socialLinksProp ?? (shareUrls ? Object.entries(shareUrls).filter(([, href]) => href).map(([platform, href]) => ({
-    platform,
-    href,
-    icon: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: socialIconMap2[platform] || `simple-icons/${platform}`, size: 16 }),
-    "aria-label": `Share on ${platformLabels[platform] || platform.charAt(0).toUpperCase() + platform.slice(1)}`,
-    className: void 0
-  })) : []);
   const [activeSection, setActiveSection] = React52__namespace.useState(
     sections?.[0]?.id || ""
   );
@@ -35829,16 +36850,25 @@ function ArticleBreadcrumbSocialComponent({
   const authorContent = React52__namespace.useMemo(() => {
     if (authorSlot) return authorSlot;
     if (!author) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-6 flex items-center gap-4 not-prose", authorClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "h-12 w-12", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: author.image }),
-        /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: author.name?.charAt(0) || "A" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        author.name && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: author.name }),
-        (author.role || publishDate || readTime) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: [author.role, publishDate, readTime].filter(Boolean).join(" \xB7 ") })
-      ] })
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "mt-6 flex items-center gap-4 not-prose",
+          authorClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "h-12 w-12", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: author.image }),
+            /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: author.name?.charAt(0) || "A" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            author.name && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: author.name }),
+            (author.role || publishDate || readTime) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: [author.role, publishDate, readTime].filter(Boolean).join(" \xB7 ") })
+          ] })
+        ]
+      }
+    );
   }, [authorSlot, author, publishDate, readTime, authorClassName]);
   const heroMediaContent = React52__namespace.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
@@ -35848,11 +36878,20 @@ function ArticleBreadcrumbSocialComponent({
       {
         src: heroImageSrc,
         alt: heroImageAlt,
-        className: cn("my-8 aspect-video w-full rounded-lg object-cover", heroImageClassName),
+        className: cn(
+          "my-8 aspect-video w-full rounded-lg object-cover",
+          heroImageClassName
+        ),
         optixFlowConfig
       }
     );
-  }, [heroMediaSlot, heroImageSrc, heroImageAlt, heroImageClassName, optixFlowConfig]);
+  }, [
+    heroMediaSlot,
+    heroImageSrc,
+    heroImageAlt,
+    heroImageClassName,
+    optixFlowConfig
+  ]);
   const tocContent = React52__namespace.useMemo(() => {
     if (tocSlot) return tocSlot;
     if (!sections || sections.length === 0) return null;
@@ -35878,26 +36917,6 @@ function ArticleBreadcrumbSocialComponent({
       }) })
     ] });
   }, [tocSlot, sections, activeSection, renderSectionLink, tocClassName]);
-  const shareButtonsContent = React52__namespace.useMemo(() => {
-    if (shareSlot) return shareSlot;
-    if (!socialLinks || socialLinks.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-lg border p-4", shareClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-sm font-semibold", children: "Share this article" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2", children: socialLinks.map((link, index) => /* @__PURE__ */ jsxRuntime.jsx(
-        Pressable,
-        {
-          href: link.href,
-          className: cn(
-            "flex h-9 w-9 items-center justify-center rounded-md border hover:bg-muted",
-            link.className
-          ),
-          "aria-label": link["aria-label"],
-          children: link.icon
-        },
-        index
-      )) })
-    ] });
-  }, [shareSlot, socialLinks, shareClassName]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -35910,18 +36929,32 @@ function ArticleBreadcrumbSocialComponent({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
           breadcrumbsContent,
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,1fr)_280px]", children: [
-            children && /* @__PURE__ */ jsxRuntime.jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
-              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-              authorContent,
-              /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-8" }),
-              heroMediaContent,
-              children,
-              shareButtonsContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "not-prose mt-8 lg:hidden", children: shareButtonsContent })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-8 space-y-6", children: [
-              tocContent,
-              shareButtonsContent
-            ] }) })
+            children && /* @__PURE__ */ jsxRuntime.jsxs(
+              "article",
+              {
+                className: cn(
+                  "prose max-w-none dark:prose-invert",
+                  articleClassName
+                ),
+                children: [
+                  title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "h1",
+                    {
+                      className: cn(
+                        "text-4xl font-bold tracking-tight md:text-5xl",
+                        titleClassName
+                      ),
+                      children: title
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+                  authorContent,
+                  /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-8" }),
+                  heroMediaContent,
+                  children
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-8 space-y-6", children: tocContent }) })
           ] })
         ] }),
         enableBackToTop && showBackToTop && /* @__PURE__ */ jsxRuntime.jsx(
@@ -35998,7 +37031,7 @@ function ArticleCompactTocComponent({
   enableTocTracking = true,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity
 }) {
@@ -36679,7 +37712,7 @@ function FaqSimpleAccordion({
   items,
   itemsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -36721,7 +37754,14 @@ function FaqSimpleAccordion({
       },
       item.id || index
     )) });
-  }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [
+    itemsSlot,
+    items,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -36752,7 +37792,7 @@ function FaqStaticList({
   items,
   itemsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -36771,7 +37811,14 @@ function FaqStaticList({
       typeof item.question === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-2 font-semibold", questionClassName), children: item.question }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: questionClassName, children: item.question }),
       typeof item.answer === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", answerClassName), children: item.answer }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: answerClassName, children: item.answer })
     ] }, index)) });
-  }, [itemsSlot, items, itemsWrapperClassName, itemClassName, questionClassName, answerClassName]);
+  }, [
+    itemsSlot,
+    items,
+    itemsWrapperClassName,
+    itemClassName,
+    questionClassName,
+    answerClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -36803,7 +37850,7 @@ function FaqCenteredAccordion({
   items,
   itemsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -36855,7 +37902,14 @@ function FaqCenteredAccordion({
         ))
       }
     );
-  }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [
+    itemsSlot,
+    items,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -36865,7 +37919,7 @@ function FaqCenteredAccordion({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-16", containerClassName), children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-8 md:space-y-16", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -36912,7 +37966,7 @@ function FaqBadgeSupport({
   supportAction,
   supportSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -36966,7 +38020,14 @@ function FaqBadgeSupport({
         ))
       }
     );
-  }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [
+    itemsSlot,
+    items,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
   const supportSectionContent = React52.useMemo(() => {
     if (supportSlot) return supportSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -37002,7 +38063,7 @@ function FaqBadgeSupport({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-16", containerClassName), children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-8 md:space-y-16", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -37056,7 +38117,7 @@ function FaqNumberedList({
   items,
   itemsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -37093,7 +38154,7 @@ function FaqNumberedList({
                 "span",
                 {
                   className: cn(
-                    "bg-secondary flex size-6 shrink-0 items-center justify-center rounded-sm text-xs font-medium",
+                    "bg-muted flex size-10 shrink-0 items-center justify-center rounded-lg text-md font-semibold",
                     numberClassName
                   ),
                   children: index + 1
@@ -37118,7 +38179,15 @@ function FaqNumberedList({
         ))
       }
     );
-  }, [itemsSlot, items, itemsWrapperClassName, itemClassName, numberClassName, questionClassName, answerClassName]);
+  }, [
+    itemsSlot,
+    items,
+    itemsWrapperClassName,
+    itemClassName,
+    numberClassName,
+    questionClassName,
+    answerClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -37170,7 +38239,7 @@ function FaqNumberedGrid({
   items,
   itemsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -37207,7 +38276,7 @@ function FaqNumberedGrid({
                 "span",
                 {
                   className: cn(
-                    "bg-secondary flex size-6 shrink-0 items-center justify-center rounded-sm text-xs font-medium",
+                    "bg-muted flex size-10 shrink-0 items-center justify-center rounded-lg text-md font-semibold",
                     numberClassName
                   ),
                   children: index + 1
@@ -37232,7 +38301,15 @@ function FaqNumberedGrid({
         ))
       }
     );
-  }, [itemsSlot, items, gridClassName, itemClassName, numberClassName, questionClassName, answerClassName]);
+  }, [
+    itemsSlot,
+    items,
+    gridClassName,
+    itemClassName,
+    numberClassName,
+    questionClassName,
+    answerClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -37289,7 +38366,7 @@ function FaqSplitHelp({
   helpAction,
   helpSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -37342,14 +38419,21 @@ function FaqSplitHelp({
         ))
       }
     );
-  }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [
+    itemsSlot,
+    items,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
   const helpSectionContent = React52.useMemo(() => {
     if (helpSlot) return helpSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: cn(
-          "mt-16 flex flex-col items-center gap-4 rounded-lg bg-accent p-6 text-center md:flex-row md:justify-between md:text-left lg:p-8",
+          "mt-8 md:mt-16 flex flex-col items-center gap-4 rounded-lg bg-muted p-6 text-center md:flex-row md:justify-between md:text-left lg:p-8",
           helpSectionClassName
         ),
         children: [
@@ -37371,7 +38455,13 @@ function FaqSplitHelp({
         ]
       }
     );
-  }, [helpSlot, helpHeading, helpDescription, helpAction, helpSectionClassName]);
+  }, [
+    helpSlot,
+    helpHeading,
+    helpDescription,
+    helpAction,
+    helpSectionClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -37418,7 +38508,7 @@ function FaqCategorizedSections({
   categories,
   categoriesSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -37485,7 +38575,16 @@ function FaqCategorizedSections({
         ] }, categoryIndex))
       }
     );
-  }, [categoriesSlot, categories, categoriesWrapperClassName, categoryTitleClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [
+    categoriesSlot,
+    categories,
+    categoriesWrapperClassName,
+    categoryTitleClassName,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -37537,7 +38636,7 @@ function FaqMutedCards({
   items,
   itemsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -37590,7 +38689,14 @@ function FaqMutedCards({
         ))
       }
     );
-  }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [
+    itemsSlot,
+    items,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -37602,10 +38708,10 @@ function FaqMutedCards({
       className,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container max-w-3xl", containerClassName), children: [
         heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-          "h1",
+          "h2",
           {
             className: cn(
-              "mb-4 text-3xl font-bold md:mb-11 md:text-4xl",
+              "mb-4 text-3xl font-bold md:mb-11 md:text-4xl px-4",
               headingClassName
             ),
             children: heading
@@ -37624,7 +38730,7 @@ function FaqBorderedBadge({
   items,
   itemsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -37678,7 +38784,14 @@ function FaqBorderedBadge({
         ))
       }
     );
-  }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [
+    itemsSlot,
+    items,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -37701,15 +38814,18 @@ function FaqBorderedBadge({
                 Badge,
                 {
                   variant: "outline",
-                  className: cn("flex items-center gap-2", badgeClassName),
+                  className: cn(
+                    "gap-1.5 px-2.5 py-1 text-sm font-medium",
+                    badgeClassName
+                  ),
                   children: [
-                    badgeIcon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon, className: "size-4" }),
+                    badgeIcon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon, size: 16, className: "shrink-0" }),
                     badge
                   ]
                 }
               ),
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "h1",
+                "h2",
                 {
                   className: cn(
                     "max-w-2xl text-3xl font-semibold md:text-4xl",
@@ -37748,7 +38864,7 @@ function FaqGradientCategories({
   categories,
   categoriesSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -37816,7 +38932,16 @@ function FaqGradientCategories({
         ] }, categoryIndex))
       }
     );
-  }, [categoriesSlot, categories, gridClassName, categoryTitleClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [
+    categoriesSlot,
+    categories,
+    gridClassName,
+    categoryTitleClassName,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -37899,19 +39024,17 @@ function FaqSidebarNavigation({
   accordionContentClassName
 }) {
   const [activeCategory, setActiveCategory] = React52__namespace.useState(
-    categories?.[0]?.id || ""
+    categories && categories.length > 1 ? "all" : categories?.[0]?.id || ""
   );
-  const scrollToCategory = (categoryId) => {
-    setActiveCategory(categoryId);
-    const element = document.getElementById(`faq-category-${categoryId}`);
-    if (element) {
-      element.scrollIntoView({ behavior: "smooth", block: "start" });
-    }
-  };
+  const filteredCategories = React52.useMemo(() => {
+    if (!categories || categories.length === 0) return [];
+    if (activeCategory === "all") return categories;
+    return categories.filter((category) => category.id === activeCategory);
+  }, [categories, activeCategory]);
   const categoriesContent = React52.useMemo(() => {
     if (categoriesSlot) return categoriesSlot;
-    if (!categories || categories.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-10 lg:w-3/4", categoriesWrapperClassName), children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsxs(
+    if (filteredCategories.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-10 lg:w-3/4", categoriesWrapperClassName), children: filteredCategories.map((category) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         id: `faq-category-${category.id}`,
@@ -37958,7 +39081,7 @@ function FaqSidebarNavigation({
       },
       category.id
     )) });
-  }, [categoriesSlot, categories, categoriesWrapperClassName, categoryTitleClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [categoriesSlot, filteredCategories, categoriesWrapperClassName, categoryTitleClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -38008,21 +39131,37 @@ function FaqSidebarNavigation({
               contentWrapperClassName
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("nav", { className: cn("lg:w-1/4", navClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-24 space-y-2", children: categories?.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  onClick: () => scrollToCategory(category.id),
-                  className: cn(
-                    "w-full rounded-lg px-4 py-2 text-left text-sm font-medium transition-colors",
-                    activeCategory === category.id ? cn(
-                      "bg-primary text-primary-foreground",
-                      navButtonActiveClassName
-                    ) : cn("hover:bg-muted", navButtonClassName)
-                  ),
-                  children: category.title
-                },
-                category.id
-              )) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("nav", { className: cn("lg:w-1/4", navClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-24 flex gap-2 overflow-x-auto pb-2 lg:flex-col lg:gap-2 lg:overflow-visible lg:pb-0", children: [
+                categories && categories.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: () => setActiveCategory("all"),
+                    className: cn(
+                      "shrink-0 whitespace-nowrap rounded-lg px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
+                      activeCategory === "all" ? cn(
+                        "bg-primary text-primary-foreground",
+                        navButtonActiveClassName
+                      ) : cn("hover:bg-muted", navButtonClassName)
+                    ),
+                    children: "All"
+                  }
+                ),
+                categories?.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: () => setActiveCategory(category.id),
+                    className: cn(
+                      "shrink-0 whitespace-nowrap rounded-lg px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
+                      activeCategory === category.id ? cn(
+                        "bg-primary text-primary-foreground",
+                        navButtonActiveClassName
+                      ) : cn("hover:bg-muted", navButtonClassName)
+                    ),
+                    children: category.title
+                  },
+                  category.id
+                ))
+              ] }) }),
               categoriesContent
             ]
           }
@@ -38037,7 +39176,7 @@ function FaqCardCategories({
   categories,
   categoriesSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -38115,7 +39254,17 @@ function FaqCardCategories({
         ))
       }
     );
-  }, [categoriesSlot, categories, gridClassName, cardClassName, categoryTitleClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [
+    categoriesSlot,
+    categories,
+    gridClassName,
+    cardClassName,
+    categoryTitleClassName,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -38180,7 +39329,7 @@ function FaqIconBenefits({
   benefits,
   benefitsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -38247,7 +39396,16 @@ function FaqIconBenefits({
         ))
       }
     );
-  }, [benefitsSlot, benefits, gridClassName, benefitCardClassName, iconWrapperClassName, iconClassName, titleClassName, benefitDescriptionClassName]);
+  }, [
+    benefitsSlot,
+    benefits,
+    gridClassName,
+    benefitCardClassName,
+    iconWrapperClassName,
+    iconClassName,
+    titleClassName,
+    benefitDescriptionClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -38300,7 +39458,7 @@ function FaqRoundedCards({
   items,
   itemsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -38323,13 +39481,13 @@ function FaqRoundedCards({
       {
         type: "single",
         collapsible: true,
-        className: cn("space-y-4", accordionClassName),
+        className: cn("space-y-3", accordionClassName),
         children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
           AccordionItem,
           {
             value: item.id,
             className: cn(
-              "rounded-lg bg-background px-4 border-none",
+              "rounded-xl border border-border/60 bg-card px-5 shadow-sm transition-shadow hover:shadow-md data-[state=open]:shadow-md",
               accordionItemClassName
             ),
             children: [
@@ -38337,7 +39495,7 @@ function FaqRoundedCards({
                 AccordionTrigger,
                 {
                   className: cn(
-                    "font-semibold hover:no-underline",
+                    "py-4 font-medium transition-opacity hover:no-underline hover:opacity-70 lg:text-lg [&[data-state=open]>svg]:rotate-180",
                     accordionTriggerClassName
                   ),
                   children: item.question
@@ -38346,7 +39504,10 @@ function FaqRoundedCards({
               /* @__PURE__ */ jsxRuntime.jsx(
                 AccordionContent,
                 {
-                  className: cn("text-muted-foreground", accordionContentClassName),
+                  className: cn(
+                    "pb-4 text-muted-foreground",
+                    accordionContentClassName
+                  ),
                   children: item.answer
                 }
               )
@@ -38356,7 +39517,14 @@ function FaqRoundedCards({
         ))
       }
     );
-  }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [
+    itemsSlot,
+    items,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -38385,16 +39553,7 @@ function FaqRoundedCards({
                   children: heading
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "text-muted-foreground lg:text-lg",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
             ]
           }
         ),
@@ -38402,7 +39561,7 @@ function FaqRoundedCards({
           "div",
           {
             className: cn(
-              "mx-auto mt-10 max-w-3xl rounded-2xl bg-muted/50 p-6 md:p-8",
+              "mx-auto mt-10 max-w-3xl",
               cardsWrapperClassName
             ),
             children: itemsContent
@@ -38425,7 +39584,7 @@ function FaqProfileSidebar({
   contactText,
   contactAction,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -38478,7 +39637,14 @@ function FaqProfileSidebar({
       },
       item.id
     )) });
-  }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [
+    itemsSlot,
+    items,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
   const profileSectionContent = React52.useMemo(() => {
     if (profileSlot) return profileSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-lg border p-6", profileCardClassName), children: [
@@ -38519,22 +39685,46 @@ function FaqProfileSidebar({
           children: profileDescription
         }
       ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: profileDescriptionClassName, children: profileDescription })),
-      contactAction && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-6 border-t pt-6", contactSectionClassName), children: [
-        contactText && (typeof contactText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: contactText }) : contactText),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Pressable,
-          {
-            href: contactAction.href,
-            onClick: contactAction.onClick,
-            variant: contactAction.variant || "outline",
-            size: contactAction.size,
-            className: cn("mt-3 w-full", contactAction.className),
-            children: contactAction.children || contactAction.label
-          }
-        )
-      ] })
+      contactAction && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "mt-6 border-t pt-6 flex flex-col space-y-4",
+            contactSectionClassName
+          ),
+          children: [
+            contactText && (typeof contactText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: contactText }) : contactText),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Pressable,
+              {
+                href: contactAction.href,
+                onClick: contactAction.onClick,
+                variant: contactAction.variant || "outline",
+                size: contactAction.size,
+                className: cn("mt-3 w-full", contactAction.className),
+                children: contactAction.children || contactAction.label
+              }
+            )
+          ]
+        }
+      )
     ] });
-  }, [profileSlot, profileImage, profileName, profileRole, profileDescription, contactText, contactAction, profileCardClassName, profileImageClassName, profileNameClassName, profileRoleClassName, profileDescriptionClassName, contactSectionClassName, optixFlowConfig]);
+  }, [
+    profileSlot,
+    profileImage,
+    profileName,
+    profileRole,
+    profileDescription,
+    contactText,
+    contactAction,
+    profileCardClassName,
+    profileImageClassName,
+    profileNameClassName,
+    profileRoleClassName,
+    profileDescriptionClassName,
+    contactSectionClassName,
+    optixFlowConfig
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -38548,7 +39738,7 @@ function FaqProfileSidebar({
         "div",
         {
           className: cn(
-            "flex flex-col gap-10 lg:flex-row lg:gap-16",
+            "flex flex-col gap-6 lg:flex-row lg:gap-16",
             contentWrapperClassName
           ),
           children: [
@@ -38592,14 +39782,11 @@ function FaqSplitHero({
   imageSlot,
   imageSrc,
   imageAlt,
-  background,
-  spacing,
+  background = "dark",
   pattern,
   patternOpacity,
-  patternClassName,
   className,
-  contentWrapperClassName,
-  leftColumnClassName,
+  contentClassName,
   headerClassName,
   headingClassName,
   subheadingClassName,
@@ -38608,8 +39795,23 @@ function FaqSplitHero({
   accordionTriggerClassName,
   accordionContentClassName,
   imageClassName,
-  optixFlowConfig
+  optixFlowConfig,
+  directionConfig = { desktop: "mediaRight", mobile: "mediaTop" }
 }) {
+  const bgColorClass = React52.useMemo(() => {
+    switch (background) {
+      case "dark":
+        return "bg-gray-900 text-white";
+      case "gray":
+        return "bg-gray-100 text-gray-900";
+      case "white":
+        return "bg-white text-gray-900";
+      default:
+        return "bg-background text-foreground";
+    }
+  }, [background]);
+  const desktopOrder = directionConfig.desktop === "mediaRight" ? "lg:flex-row" : "lg:flex-row-reverse";
+  const mobileOrder = directionConfig.mobile === "mediaTop" ? "flex-col" : "flex-col-reverse";
   const itemsContent = React52.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
@@ -38623,13 +39825,13 @@ function FaqSplitHero({
           AccordionItem,
           {
             value: item.id,
-            className: cn("border-b border-border/50", accordionItemClassName),
+            className: cn("border-b border-current/20", accordionItemClassName),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 AccordionTrigger,
                 {
                   className: cn(
-                    "py-4 text-left text-base font-medium text-foreground transition-colors hover:text-primary hover:no-underline lg:text-lg",
+                    "py-4 text-left text-base font-medium transition-opacity hover:opacity-70 hover:no-underline lg:text-lg",
                     accordionTriggerClassName
                   ),
                   children: item.question
@@ -38638,10 +39840,7 @@ function FaqSplitHero({
               /* @__PURE__ */ jsxRuntime.jsx(
                 AccordionContent,
                 {
-                  className: cn(
-                    "pb-4 text-muted-foreground",
-                    accordionContentClassName
-                  ),
+                  className: cn("pb-4 opacity-80", accordionContentClassName),
                   children: item.answer
                 }
               )
@@ -38651,71 +39850,65 @@ function FaqSplitHero({
         ))
       }
     );
-  }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
-  const imageContent = React52.useMemo(() => {
-    if (imageSlot) return imageSlot;
-    if (!imageSrc) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
-      {
-        src: imageSrc,
-        alt: imageAlt || "FAQ section image",
-        className: cn(
-          "hidden h-screen w-1/2 object-cover lg:block",
-          imageClassName
-        ),
-        optixFlowConfig
-      }
-    );
-  }, [imageSlot, imageSrc, imageAlt, imageClassName, optixFlowConfig]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Section,
+  }, [
+    itemsSlot,
+    items,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
+  const contentArea = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
     {
-      background,
-      spacing,
-      pattern,
-      patternOpacity,
-      patternClassName,
-      className: cn("dark flex", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex", contentWrapperClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "flex w-full items-center justify-center bg-background lg:w-1/2",
-              leftColumnClassName
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container my-10 flex w-full max-w-[600px] flex-col gap-8 px-6 lg:px-10", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-4", headerClassName), children: [
-                heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "h2",
-                  {
-                    className: cn(
-                      "text-3xl font-bold text-foreground lg:text-4xl",
-                      headingClassName
-                    ),
-                    children: heading
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-                subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "p",
-                  {
-                    className: cn(
-                      "text-lg text-muted-foreground",
-                      subheadingClassName
-                    ),
-                    children: subheading
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading }))
-              ] }),
-              itemsContent
-            ] })
-          }
-        ),
-        imageContent
-      ] })
+      className: cn(
+        "relative flex w-full items-center lg:w-1/2",
+        bgColorClass,
+        contentClassName
+      ),
+      children: [
+        pattern && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(PatternBackground, { pattern, opacity: patternOpacity }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 w-full px-8 py-16 sm:px-12 sm:py-20 lg:px-16 lg:py-24 xl:px-24", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-xl space-y-8", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-4", headerClassName), children: [
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h2",
+              {
+                className: cn(
+                  "text-3xl font-bold leading-tight tracking-tight sm: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(
+                  "text-base leading-relaxed opacity-80 sm:text-lg",
+                  subheadingClassName
+                ),
+                children: subheading
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading }))
+          ] }),
+          itemsContent
+        ] }) })
+      ]
     }
   );
+  const imageArea = imageSlot ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-64 w-full sm:h-96 lg:h-auto lg:w-1/2", children: imageSlot }) : imageSrc ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-64 w-full sm:h-96 lg:h-auto lg:w-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(
+    img.Img,
+    {
+      src: imageSrc,
+      alt: imageAlt || "FAQ section image",
+      className: cn("h-full w-full object-cover", imageClassName),
+      optixFlowConfig
+    }
+  ) }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("relative w-full overflow-hidden", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex min-h-screen", mobileOrder, desktopOrder), children: [
+    contentArea,
+    imageArea
+  ] }) });
 }
 function AboutSplitHero({
   brandText,