@opensite/ui 0.8.5 → 0.8.6

package/dist/registry.cjs

@@ -20431,8 +20431,7 @@ function FeatureShowcase({
           onNext: () => api?.scrollNext(),
           canScrollPrevious,
           canScrollNext,
-          className: "absolute bottom-4 right-0 md:bottom-6",
-          buttonClassName: "size-12 rounded-full border border-current bg-transparent text-current shadow-sm hover:bg-current/10"
+          className: "absolute bottom-4 right-0 md:bottom-6"
         }
       )
     ] });
@@ -20579,7 +20578,7 @@ function FeatureSplitImage({
                     "p",
                     {
                       className: cn(
-                        "mb-8 max-w-xl text-muted-foreground lg:text-lg",
+                        "mb-8 max-w-xl  lg:text-lg",
                         descriptionClassName
                       ),
                       children: description
@@ -20588,7 +20587,7 @@ function FeatureSplitImage({
                     "div",
                     {
                       className: cn(
-                        "mb-8 max-w-xl text-muted-foreground lg:text-lg",
+                        "mb-8 max-w-xl  lg:text-lg",
                         descriptionClassName
                       ),
                       children: description
@@ -20731,19 +20730,13 @@ function FeatureSplitImageReverse({
                   description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                     "p",
                     {
-                      className: cn(
-                        "mb-8 max-w-xl text-muted-foreground lg:text-lg",
-                        descriptionClassName
-                      ),
+                      className: cn("mb-8 max-w-xl lg:text-lg", descriptionClassName),
                       children: description
                     }
                   ) : /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
-                      className: cn(
-                        "mb-8 max-w-xl text-muted-foreground lg:text-lg",
-                        descriptionClassName
-                      ),
+                      className: cn("mb-8 max-w-xl lg:text-lg", descriptionClassName),
                       children: description
                     }
                   )),
@@ -21699,17 +21692,13 @@ function FeatureThreeColumnValues({
     return values.map((value, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn(
-          "rounded-lg bg-accent p-5",
-          cardClassName,
-          value.className
-        ),
+        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 bg-background",
+                "mb-8 flex size-12 items-center justify-center rounded-full ",
                 value.iconClassName
               ),
               children: renderValueIcon(value)
@@ -21728,25 +21717,7 @@ function FeatureThreeColumnValues({
               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
-            }
-          ))
+          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
@@ -21763,25 +21734,7 @@ 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
-          }
-        )),
+        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",
           {
@@ -22174,10 +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
@@ -22219,19 +22169,13 @@ function FeatureTabbedContentImage({
                   slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                     "p",
                     {
-                      className: cn(
-                        "text-muted-foreground lg:text-xl",
-                        slide.descriptionClassName
-                      ),
+                      className: cn(" lg:text-xl", slide.descriptionClassName),
                       children: slide.description
                     }
                   ) : /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
-                      className: cn(
-                        "text-muted-foreground lg:text-xl",
-                        slide.descriptionClassName
-                      ),
+                      className: cn("lg:text-xl", slide.descriptionClassName),
                       children: slide.description
                     }
                   )),
@@ -22313,7 +22257,7 @@ function FeatureTabbedContentImage({
                 "p",
                 {
                   className: cn(
-                    "text-center text-balance text-muted-foreground lg:text-xl",
+                    "text-center text-balance  lg:text-xl",
                     descriptionClassName
                   ),
                   children: description
@@ -22322,7 +22266,7 @@ function FeatureTabbedContentImage({
                 "div",
                 {
                   className: cn(
-                    "text-center text-balance text-muted-foreground lg:text-xl",
+                    "text-center text-balance  lg:text-xl",
                     descriptionClassName
                   ),
                   children: description
@@ -22366,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(() => {
@@ -22385,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
         }
@@ -22396,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,
@@ -22406,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,
@@ -22445,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
+          }
+        )
       ]
     }
   );
@@ -23740,7 +23731,7 @@ function FeatureStatsHighlight({
   statsGridClassName,
   statCardClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -23779,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-card 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 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
@@ -23798,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 })
+          ]
+        }
+      )
     }
   );
 }
@@ -23823,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
     }
   );
@@ -23844,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"
+          }
+        )
       ]
     }
   ) });
@@ -37678,7 +37712,7 @@ function FaqSimpleAccordion({
   items,
   itemsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -37720,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,
     {
@@ -37751,7 +37792,7 @@ function FaqStaticList({
   items,
   itemsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -37770,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,
     {
@@ -37802,7 +37850,7 @@ function FaqCenteredAccordion({
   items,
   itemsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -37854,7 +37902,14 @@ function FaqCenteredAccordion({
         ))
       }
     );
-  }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [
+    itemsSlot,
+    items,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -37864,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",
           {
@@ -37911,7 +37966,7 @@ function FaqBadgeSupport({
   supportAction,
   supportSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -37965,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(
@@ -38001,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",
           {
@@ -38055,7 +38117,7 @@ function FaqNumberedList({
   items,
   itemsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -38092,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
@@ -38117,7 +38179,15 @@ function FaqNumberedList({
         ))
       }
     );
-  }, [itemsSlot, items, itemsWrapperClassName, itemClassName, numberClassName, questionClassName, answerClassName]);
+  }, [
+    itemsSlot,
+    items,
+    itemsWrapperClassName,
+    itemClassName,
+    numberClassName,
+    questionClassName,
+    answerClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -38169,7 +38239,7 @@ function FaqNumberedGrid({
   items,
   itemsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -38206,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
@@ -38231,7 +38301,15 @@ function FaqNumberedGrid({
         ))
       }
     );
-  }, [itemsSlot, items, gridClassName, itemClassName, numberClassName, questionClassName, answerClassName]);
+  }, [
+    itemsSlot,
+    items,
+    gridClassName,
+    itemClassName,
+    numberClassName,
+    questionClassName,
+    answerClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -38288,7 +38366,7 @@ function FaqSplitHelp({
   helpAction,
   helpSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -38341,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: [
@@ -38370,7 +38455,13 @@ function FaqSplitHelp({
         ]
       }
     );
-  }, [helpSlot, helpHeading, helpDescription, helpAction, helpSectionClassName]);
+  }, [
+    helpSlot,
+    helpHeading,
+    helpDescription,
+    helpAction,
+    helpSectionClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -38417,7 +38508,7 @@ function FaqCategorizedSections({
   categories,
   categoriesSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -38484,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,
     {
@@ -38536,7 +38636,7 @@ function FaqMutedCards({
   items,
   itemsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -38589,7 +38689,14 @@ function FaqMutedCards({
         ))
       }
     );
-  }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [
+    itemsSlot,
+    items,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -38601,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
@@ -38623,7 +38730,7 @@ function FaqBorderedBadge({
   items,
   itemsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -38677,7 +38784,14 @@ function FaqBorderedBadge({
         ))
       }
     );
-  }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [
+    itemsSlot,
+    items,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -38700,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",
@@ -38747,7 +38864,7 @@ function FaqGradientCategories({
   categories,
   categoriesSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -38815,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,
     {
@@ -38898,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}`,
@@ -38957,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,
     {
@@ -39007,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
             ]
           }
@@ -39036,7 +39176,7 @@ function FaqCardCategories({
   categories,
   categoriesSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -39114,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,
     {
@@ -39179,7 +39329,7 @@ function FaqIconBenefits({
   benefits,
   benefitsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -39246,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,
     {
@@ -39299,7 +39458,7 @@ function FaqRoundedCards({
   items,
   itemsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -39322,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: [
@@ -39336,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
@@ -39345,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
                 }
               )
@@ -39355,7 +39517,14 @@ function FaqRoundedCards({
         ))
       }
     );
-  }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [
+    itemsSlot,
+    items,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -39384,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 }))
             ]
           }
         ),
@@ -39401,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
@@ -39424,7 +39584,7 @@ function FaqProfileSidebar({
   contactText,
   contactAction,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -39477,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: [
@@ -39518,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,
     {
@@ -39547,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: [
@@ -39591,14 +39782,11 @@ function FaqSplitHero({
   imageSlot,
   imageSrc,
   imageAlt,
-  background,
-  spacing,
+  background = "dark",
   pattern,
   patternOpacity,
-  patternClassName,
   className,
-  contentWrapperClassName,
-  leftColumnClassName,
+  contentClassName,
   headerClassName,
   headingClassName,
   subheadingClassName,
@@ -39607,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;
@@ -39622,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
@@ -39637,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
                 }
               )
@@ -39650,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,