@opensite/ui 1.6.5 → 1.6.7

package/dist/registry.js

@@ -49765,7 +49765,7 @@ function HeroOverlayCtaGrid({
       containerClassName,
       children: [
         renderBackground,
-        /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-12", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-12 px-6", children: [
           /* @__PURE__ */ jsxs(
             motion.div,
             {
@@ -50736,7 +50736,6 @@ function HeroPatternBadgeLogos({
   badgeClassName,
   actionsClassName,
   logosClassName,
-  backgroundClassName,
   optixFlowConfig
 }) {
   const renderActions = useMemo(() => {
@@ -50830,7 +50829,7 @@ function HeroPatternBadgeLogos({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("relative p-0", className),
+      className,
       containerClassName,
       children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
         "div",
@@ -50882,7 +50881,7 @@ function HeroPatternBadgeLogos({
                 ),
                 children: [
                   logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-sm"), children: logosTagline }) : logosTagline),
-                  /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4 w-full", children: renderLogos })
+                  /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center flex-wrap gap-12", children: renderLogos })
                 ]
               }
             )
@@ -51106,14 +51105,14 @@ function HeroPatternLogoTechStack({
         ),
         children: [
           techStackLabel && (typeof techStackLabel === "string" ? /* @__PURE__ */ jsx("p", { className: cn("font-medium lg:text-left"), children: techStackLabel }) : techStackLabel),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-4", children: techLogos.map((techLogo, index) => {
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col md:flex-row flex-wrap items-center justify-center gap-8 md:gap-4", children: techLogos.map((techLogo, index) => {
             const techLogoSrc = typeof techLogo.src === "string" ? techLogo.src : techLogo.src.light;
             return /* @__PURE__ */ jsx(
               Pressable,
               {
                 href: techLogo.href,
                 className: cn(
-                  "group flex w-auto h-10 items-center justify-center max-w-12 max-h-10 min-h-10 p-1",
+                  "group flex w-auto h-12 md:h-10 items-center justify-center max-w-full md:max-w-30 max-h-12 md:max-h-10 min-h-12 md:min-h-10 p-2 md:p-1",
                   techLogo.className
                 ),
                 children: /* @__PURE__ */ jsx(
@@ -51278,18 +51277,20 @@ function HeroTechCarousel({
   description,
   technologies,
   carouselSlot,
-  autoplayDelay = 4e3,
+  autoplayDelay = 5e3,
   background,
-  spacing,
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32",
   headingClassName,
   descriptionClassName,
   optixFlowConfig
 }) {
-  const plugin = useRef(Autoplay({ delay: autoplayDelay, stopOnInteraction: false }));
+  const plugin = useRef(
+    Autoplay({ delay: autoplayDelay, stopOnInteraction: false })
+  );
   const [api, setApi] = useState();
   const [current, setCurrent] = useState(0);
   const [fadeIn, setFadeIn] = useState(true);
@@ -51337,12 +51338,12 @@ function HeroTechCarousel({
               "div",
               {
                 className: cn(
-                  "flex cursor-pointer items-center justify-center gap-2 rounded-md border p-6",
+                  "flex cursor-pointer items-center justify-center gap-2 rounded-md border px-4 py-2",
                   idx === current ? "border-input" : "border-transparent"
                 ),
                 onClick: () => selectTechnology(idx),
                 children: [
-                  /* @__PURE__ */ jsx(
+                  technology.logo && /* @__PURE__ */ jsx(
                     Img,
                     {
                       className: "h-4 shrink-0 md:h-7",
@@ -51351,7 +51352,7 @@ function HeroTechCarousel({
                       optixFlowConfig
                     }
                   ),
-                  /* @__PURE__ */ jsx("p", { children: technology.name })
+                  /* @__PURE__ */ jsx("p", { className: "text-nowrap", children: technology.name })
                 ]
               }
             )
@@ -51360,7 +51361,15 @@ function HeroTechCarousel({
         )) })
       }
     );
-  }, [carouselSlot, technologies, setApi, plugin, current, selectTechnology, optixFlowConfig]);
+  }, [
+    carouselSlot,
+    technologies,
+    setApi,
+    plugin,
+    current,
+    selectTechnology,
+    optixFlowConfig
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -51368,36 +51377,77 @@ function HeroTechCarousel({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center", children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mx-auto mb-4 max-w-2xl text-center text-4xl font-bold md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("mx-auto mb-4 max-w-2xl text-center text-4xl font-bold md:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto mt-4 max-w-xl text-center text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          technologies && technologies.length > 0 && /* @__PURE__ */ jsx("div", { className: cn(
-            "mx-auto mt-8 mb-12 flex h-[60px] w-fit items-center gap-2 rounded-md px-4 py-2 text-center",
-            getNestedCardBg(background),
-            getNestedCardTextColor(background)
-          ), children: /* @__PURE__ */ jsxs(
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "mx-auto mb-4 max-w-2xl text-center text-4xl font-bold md:text-6xl text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "mx-auto mb-4 max-w-2xl text-center text-4xl font-bold md:text-6xl text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          )),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto mt-4 max-w-xl text-center text-lg text-balance",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          technologies && technologies.length > 0 && /* @__PURE__ */ jsx(
             "div",
             {
               className: cn(
-                "flex items-center gap-2 transition-opacity duration-300",
-                fadeIn ? "opacity-100" : "opacity-0"
+                "mx-auto bg-muted mt-8 mb-12 flex h-[60px] w-fit items-center gap-2 rounded-md px-4 py-2 text-center"
               ),
-              children: [
-                /* @__PURE__ */ jsx(
-                  Img,
-                  {
-                    src: technologies[current]?.logo,
-                    alt: technologies[current]?.name,
-                    className: "h-4 md:h-7",
-                    optixFlowConfig
-                  }
-                ),
-                /* @__PURE__ */ jsx("p", { className: "border-l px-2 font-mono text-sm", children: technologies[current]?.command })
-              ]
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex items-center gap-2 transition-opacity duration-300",
+                    fadeIn ? "opacity-100" : "opacity-0"
+                  ),
+                  children: [
+                    technologies && current && technologies[current] && technologies[current].logo ? /* @__PURE__ */ jsx(
+                      Img,
+                      {
+                        src: technologies[current]?.logo,
+                        alt: technologies[current]?.name,
+                        className: "h-4 md:h-7",
+                        optixFlowConfig
+                      }
+                    ) : null,
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: cn(
+                          "px-2 font-mono text-sm",
+                          technologies && technologies[current] && technologies[current].logo ? "border-l" : ""
+                        ),
+                        children: technologies[current]?.command
+                      }
+                    )
+                  ]
+                }
+              )
             }
-          ) })
+          )
         ] }),
         renderCarousel
       ] })
@@ -51477,17 +51527,18 @@ function HeroPlatformFeaturesGrid({
   logo,
   logoSlot,
   subtitle,
+  description,
   heading,
   action,
   actionSlot,
   features,
   featuresSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   featuresClassName,
@@ -51502,7 +51553,10 @@ function HeroPlatformFeaturesGrid({
       {
         src: logoSrc,
         alt: logo.alt,
-        className: cn("mx-auto mb-5 w-16 md:mb-6 md:w-24 lg:mb-7 lg:w-28", logo.imgClassName),
+        className: cn(
+          "mx-auto mb-5 w-16 md:mb-6 md:w-24 lg:mb-7 lg:w-28",
+          logo.imgClassName
+        ),
         optixFlowConfig
       }
     );
@@ -51510,7 +51564,14 @@ function HeroPlatformFeaturesGrid({
   const renderAction = useMemo(() => {
     if (actionSlot) return actionSlot;
     if (!action) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = action;
     return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
       icon,
       label,
@@ -51520,13 +51581,30 @@ function HeroPlatformFeaturesGrid({
   const renderFeatures = useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mt-16 grid gap-px overflow-hidden rounded-lg border bg-input md:grid-cols-2 lg:grid-cols-4", featuresClassName), children: features.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 bg-background p-5 md:gap-6", children: [
-      feature.icon ?? (feature.iconName && /* @__PURE__ */ jsx(DynamicIcon, { name: feature.iconName, size: 24 })),
-      /* @__PURE__ */ jsxs("div", { children: [
-        feature.title && /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold md:text-base", children: feature.title }),
-        feature.description && /* @__PURE__ */ jsx("p", { className: cn("text-sm md:text-base", getTextColor(background, "muted")), children: feature.description })
-      ] })
-    ] }, index)) });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "mt-16 grid gap-px overflow-hidden rounded-lg border bg-input md:grid-cols-2 lg:grid-cols-4 w-full",
+          featuresClassName
+        ),
+        children: features.map((feature, index) => /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            href: feature.href,
+            className: "flex flex-col gap-3 bg-card text-card-foreground p-5 md:gap-6",
+            children: [
+              feature.icon ?? (feature.iconName && /* @__PURE__ */ jsx(DynamicIcon, { name: feature.iconName, size: 24 })),
+              /* @__PURE__ */ jsxs("div", { children: [
+                feature.title && /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold md:text-base", children: feature.title }),
+                feature.description && /* @__PURE__ */ jsx("p", { className: cn("text-sm md:text-base"), children: feature.description })
+              ] })
+            ]
+          },
+          index
+        ))
+      }
+    );
   }, [featuresSlot, features, featuresClassName]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -51535,14 +51613,43 @@ function HeroPlatformFeaturesGrid({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("text-center", headerClassName), children: [
-          renderLogo,
-          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("span", { className: cn("mb-3 text-sm tracking-widest md:text-base", getTextColor(background, "muted")), children: subtitle }) : subtitle),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mt-4 text-4xl font-semibold text-balance lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("mt-4 text-4xl font-semibold text-balance lg:text-6xl", headingClassName), children: heading })),
-          renderAction
-        ] }),
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center w-full", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col items-center w-full gap-6 text-center",
+              headerClassName
+            ),
+            children: [
+              renderLogo,
+              subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("span", { className: cn("mb-3 text-sm tracking-widest md:text-base"), children: subtitle }) : subtitle),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "mt-4 text-4xl font-semibold text-balance lg:text-6xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "mt-4 text-4xl font-semibold text-balance lg:text-6xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-2xl md:text-lg text-balance"), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("max-w-2xl md:text-lg text-balance"), children: description })),
+              renderAction
+            ]
+          }
+        ),
         renderFeatures
       ] })
     }
@@ -56457,11 +56564,12 @@ function HeroWelcomeAsymmetricImages({
   images,
   imagesSlot,
   background,
-  spacing,
   pattern,
   patternOpacity,
+  patternClassName,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   headingClassName,
   descriptionClassName,
   optixFlowConfig
@@ -56539,14 +56647,16 @@ function HeroWelcomeAsymmetricImages({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start justify-between gap-8 md:flex-row xl:gap-20", children: [
+      patternClassName,
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start justify-between gap-8 md:flex-row xl:gap-20", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-start text-left", children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h1",
             {
               className: cn(
-                "mb-8 text-4xl font-normal text-pretty md:text-7xl",
+                "mb-8 text-4xl font-normal text-balance md:text-7xl",
                 headingClassName
               ),
               children: heading
@@ -56555,7 +56665,7 @@ function HeroWelcomeAsymmetricImages({
             "h1",
             {
               className: cn(
-                "mb-8 text-4xl font-normal text-pretty md:text-7xl",
+                "mb-8 text-4xl font-normal text-balance md:text-7xl",
                 headingClassName
               ),
               children: heading
@@ -56565,8 +56675,7 @@ function HeroWelcomeAsymmetricImages({
             "p",
             {
               className: cn(
-                "mb-12 max-w-[70%] text-xl font-normal",
-                getTextColor(background, "muted"),
+                "mb-12 max-w-[70%] text-xl font-normal text-balance",
                 descriptionClassName
               ),
               children: description
@@ -56575,8 +56684,7 @@ function HeroWelcomeAsymmetricImages({
             "div",
             {
               className: cn(
-                "mb-12 max-w-[70%] text-xl font-normal",
-                getTextColor(background, "muted"),
+                "mb-12 max-w-[70%] text-xl font-normal text-balance",
                 descriptionClassName
               ),
               children: description
@@ -56600,15 +56708,16 @@ function HeroStartupLaunchCta({
   avatarsSlot,
   socialProofText,
   imageSrc,
-  imageAlt = "Startup dashboard",
+  imageAlt,
   badgeCard,
   badgeCardSlot,
   background,
-  spacing,
   pattern,
   patternOpacity,
+  patternClassName,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   contentClassName,
   badgeClassName,
   headingClassName,
@@ -56622,7 +56731,14 @@ function HeroStartupLaunchCta({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -56647,7 +56763,10 @@ function HeroStartupLaunchCta({
       {
         src: avatar.src,
         alt: avatar.alt,
-        className: cn("h-10 w-10 rounded-full border-2 border-background object-cover", avatar.className),
+        className: cn(
+          "h-10 w-10 rounded-full border-2 border-background object-cover",
+          avatar.className
+        ),
         optixFlowConfig
       },
       index
@@ -56668,7 +56787,7 @@ function HeroStartupLaunchCta({
       ),
       /* @__PURE__ */ jsxs("div", { children: [
         badgeCard.title && /* @__PURE__ */ jsx("div", { className: "font-semibold ", children: badgeCard.title }),
-        badgeCard.subtitle && /* @__PURE__ */ jsx("div", { className: cn("text-sm", getTextColor(background, "muted")), children: badgeCard.subtitle })
+        badgeCard.subtitle && /* @__PURE__ */ jsx("div", { className: "text-sm", children: badgeCard.subtitle })
       ] })
     ] });
   }, [badgeCardSlot, badgeCard, optixFlowConfig]);
@@ -56679,31 +56798,69 @@ function HeroStartupLaunchCta({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
+      patternClassName,
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
         /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
-          badge && /* @__PURE__ */ jsxs("div", { className: cn("inline-flex w-fit items-center gap-2 rounded-full bg-success/10 px-4 py-2 text-sm font-medium text-success", badgeClassName), children: [
+          badge && /* @__PURE__ */ jsxs(Badge, { className: cn("relative", badgeClassName), children: [
             badgeIcon,
             typeof badge === "string" ? /* @__PURE__ */ jsx("span", { children: badge }) : badge
           ] }),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-4 sm:flex-row", actionsClassName), children: renderActions }),
-          (avatarsSlot || avatars || socialProofText) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-4 pt-4", socialProofClassName), children: [
-            renderAvatars,
-            socialProofText && /* @__PURE__ */ jsx("div", { className: "text-sm", children: socialProofText })
-          ] })
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl leading-snug text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex flex-col gap-4 sm:flex-row",
+                actionsClassName
+              ),
+              children: renderActions
+            }
+          ),
+          (avatarsSlot || avatars || socialProofText) && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center gap-4 pt-4",
+                socialProofClassName
+              ),
+              children: [
+                renderAvatars,
+                socialProofText && /* @__PURE__ */ jsx("div", { className: "text-sm", children: socialProofText })
+              ]
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          imageSrc && /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-2xl bg-linear-to-br from-green-50 to-blue-50 p-8", imageClassName), children: /* @__PURE__ */ jsx(
-            Img,
+          imageSrc && /* @__PURE__ */ jsx(
+            "div",
             {
-              src: imageSrc,
-              alt: imageAlt,
-              className: "w-full rounded-lg shadow-xl",
-              optixFlowConfig
+              className: cn(
+                "overflow-hidden rounded-2xl bg-linear-to-br from-green-50 to-blue-50 p-8",
+                imageClassName
+              ),
+              children: /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: imageSrc,
+                  alt: imageAlt,
+                  className: "w-full rounded-lg shadow-xl",
+                  optixFlowConfig
+                }
+              )
             }
-          ) }),
+          ),
           renderBadgeCard
         ] })
       ] }) })
@@ -57077,50 +57234,60 @@ function HeroCustomerSupportLayered({
   images,
   imagesSlot,
   background,
-  spacing,
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   contentClassName,
   taglineClassName,
   headingClassName,
   descriptionClassName,
   imagesClassName,
-  optixFlowConfig
+  optixFlowConfig,
+  patternClassName
 }) {
   const renderImages = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsxs("div", { className: cn("relative ml-8 aspect-square w-full max-w-225 overflow-hidden lg:absolute lg:right-0 lg:bottom-0 lg:w-1/2", imagesClassName), children: [
-      images[0] && /* @__PURE__ */ jsx("div", { className: "absolute right-0 bottom-0 w-[85%] overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 0.918918919 / 1, children: /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: images[0].src,
-          alt: images[0].alt,
-          className: cn("block size-full object-cover object-top-left", images[0].className),
-          optixFlowConfig
-        }
-      ) }) }),
-      images[1] && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-[0%] w-[70%] overflow-hidden rounded-tl-lg", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.9 / 1, children: /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: images[1].src,
-          alt: images[1].alt,
-          className: cn("block h-full w-full object-cover object-center", images[1].className),
-          optixFlowConfig
-        }
-      ) }) }),
-      images[2] && /* @__PURE__ */ jsx("div", { className: "absolute right-[5%] bottom-0 w-[40%] overflow-hidden rounded-tl-lg rounded-tr-lg shadow-md", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 0.776119403 / 1, children: /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: images[2].src,
-          alt: images[2].alt,
-          className: cn("block h-full w-full object-cover object-top", images[2].className),
-          optixFlowConfig
-        }
-      ) }) })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative min-h-[350px] md:min-h-[400px] lg:min-h-[450px]",
+          imagesClassName
+        ),
+        children: [
+          images[0] && /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-0 z-10 aspect-4/3 w-[65%] overflow-hidden rounded-lg shadow-2xl md:w-[60%]", children: /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: images[0].src,
+              alt: images[0].alt,
+              className: cn("h-full w-full object-cover", images[0].className),
+              optixFlowConfig
+            }
+          ) }),
+          images[1] && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-[5%] z-20 aspect-video w-[60%] overflow-hidden rounded-lg shadow-2xl md:w-[55%]", children: /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: images[1].src,
+              alt: images[1].alt,
+              className: cn("h-full w-full object-cover", images[1].className),
+              optixFlowConfig
+            }
+          ) }),
+          images[2] && /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-[10%] z-30 aspect-3/4 w-[45%] overflow-hidden rounded-lg shadow-2xl md:w-[40%]", children: /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: images[2].src,
+              alt: images[2].alt,
+              className: cn("h-full w-full object-cover", images[2].className),
+              optixFlowConfig
+            }
+          ) })
+        ]
+      }
+    );
   }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -57129,13 +57296,48 @@ function HeroCustomerSupportLayered({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("relative border-b pt-10", getBorderColor(background, "muted"), className),
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-2 md:gap-4 lg:grid-cols-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex w-full max-w-125 flex-col gap-9 lg:max-w-150 lg:py-[20%] xl:py-[26%]", contentClassName), children: [
-          tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("font-mono text-[clamp(0.875rem,0.875vw,1rem)]", getTextColor(background, "muted"), taglineClassName), children: tagline }) : /* @__PURE__ */ jsx("div", { className: taglineClassName, children: tagline })),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-[clamp(3.5rem,calc(6.5vw+2.3rem),9.5rem)] leading-[0.85] tracking-[-0.03em] ", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-[clamp(3.5rem,calc(6.5vw+2.3rem),9.5rem)] leading-[0.85] tracking-[-0.03em] ", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-[clamp(1.125rem,1.125vw,1.4rem)] leading-normal", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-        ] }),
+      patternClassName,
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-4 md:gap-20 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex w-full max-w-125 flex-col gap-9",
+              contentClassName
+            ),
+            children: [
+              tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsx(Badge, { children: tagline }) : /* @__PURE__ */ jsx("div", { className: taglineClassName, children: tagline })),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-5xl md:text-6xl lg:text-7xl font-semibold text-balance leading-snug",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-2xl md:text-3xl lg:text-4xl font-semibold text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn("leading-normal text-lg", descriptionClassName),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx("div", { children: renderImages })
       ] }) })
     }
@@ -57148,51 +57350,106 @@ function HeroSharedInboxLayered({
   layeredImages,
   layeredImagesSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   descriptionClassName,
   imagesClassName,
-  optixFlowConfig
+  optixFlowConfig,
+  patternClassName
 }) {
   const renderLayeredImages = useMemo(() => {
     if (layeredImagesSlot) return layeredImagesSlot;
     if (!layeredImages) return null;
-    return /* @__PURE__ */ jsxs("div", { className: cn("relative ml-8 aspect-square w-full max-w-225 overflow-hidden lg:absolute lg:right-0 lg:bottom-0 lg:w-1/2", imagesClassName), children: [
-      layeredImages.backgroundImage && /* @__PURE__ */ jsx("div", { className: "absolute right-0 bottom-0 w-[85%] overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 0.918918919 / 1, children: /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: layeredImages.backgroundImage.src,
-          alt: layeredImages.backgroundImage.alt,
-          className: cn("block size-full object-cover object-top-left", layeredImages.backgroundImage.className),
-          optixFlowConfig
-        }
-      ) }) }),
-      layeredImages.foregroundImage && /* @__PURE__ */ jsx("div", { className: "absolute right-0 bottom-0 w-[93%] overflow-hidden rounded-tl-lg shadow-md", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.381308411 / 1, children: /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: layeredImages.foregroundImage.src,
-          alt: layeredImages.foregroundImage.alt,
-          className: cn("block size-full object-cover object-center", layeredImages.foregroundImage.className),
-          optixFlowConfig
-        }
-      ) }) })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative min-h-[350px] md:min-h-[400px] lg:min-h-[450px]",
+          imagesClassName
+        ),
+        children: [
+          layeredImages.backgroundImage && /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-0 z-10 aspect-4/3 w-[70%] overflow-hidden rounded-lg shadow-2xl md:w-[65%]", children: /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: layeredImages.backgroundImage.src,
+              alt: layeredImages.backgroundImage.alt,
+              className: cn(
+                "h-full w-full object-cover",
+                layeredImages.backgroundImage.className
+              ),
+              optixFlowConfig
+            }
+          ) }),
+          layeredImages.foregroundImage && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 right-0 z-20 aspect-3/4 w-[55%] overflow-hidden rounded-lg shadow-2xl md:w-[50%]", children: /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: layeredImages.foregroundImage.src,
+              alt: layeredImages.foregroundImage.alt,
+              className: cn(
+                "h-full w-full object-cover",
+                layeredImages.foregroundImage.className
+              ),
+              optixFlowConfig
+            }
+          ) })
+        ]
+      }
+    );
   }, [layeredImagesSlot, layeredImages, imagesClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
     {
-      className: cn("relative border-b bg-background", getBorderColor(background, "muted"), className),
-      children: /* @__PURE__ */ jsx("div", { className: cn("container pt-10", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-2 md:gap-4 lg:grid-cols-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex w-full max-w-125 flex-col gap-9 lg:max-w-150 lg:py-[20%] xl:py-[26%]", contentClassName), children: [
-          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("p", { className: cn("font-mono text-[clamp(0.875rem,0.875vw,1rem)]", getTextColor(background, "muted")), children: subtitle }) : subtitle),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-[clamp(3.5rem,calc(6.5vw+2.3rem),9.5rem)] leading-[0.85] tracking-[-0.03em] ", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-[clamp(3.5rem,calc(6.5vw+2.3rem),9.5rem)] leading-[0.85] tracking-[-0.03em] ", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-[clamp(1.125rem,1.125vw,1.4rem)] leading-normal", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-        ] }),
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      patternClassName,
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-4 md:gap-20 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex w-full max-w-125 flex-col gap-9",
+              contentClassName
+            ),
+            children: [
+              subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx(Badge, { children: subtitle }) : subtitle),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-5xl md:text-6xl lg:text-7xl font-semibold text-balance leading-snug",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-2xl md:text-3xl lg:text-4xl font-semibold text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn("leading-normal text-lg", descriptionClassName),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx("div", { children: renderLayeredImages })
       ] }) })
     }
@@ -57207,11 +57464,12 @@ function HeroConversationIntelligence({
   image,
   imageSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
+  patternClassName,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -57223,7 +57481,14 @@ function HeroConversationIntelligence({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -57243,58 +57508,81 @@ function HeroConversationIntelligence({
   const renderImage = useMemo(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mx-auto w-full max-w-325", imageClassName), children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.818181818 / 1, children: /* @__PURE__ */ jsxs("div", { className: "relative flex size-full flex-col justify-between", children: [
-      /* @__PURE__ */ jsx(
-        AspectRatio,
-        {
-          ratio: 3.714285714 / 1,
-          className: "w-full rounded-xl bg-[linear-gradient(transparent,var(--color-muted))]"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        AspectRatio,
-        {
-          ratio: 3.714285714 / 1,
-          className: "w-full rounded-xl bg-[linear-gradient(var(--color-muted),transparent)]"
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: cn("absolute top-1/2 left-1/2 z-10 w-[87.69%] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl border", getBorderColor(background, "muted")), children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.594405594 / 1, children: /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: image.src,
-          alt: image.alt,
-          className: cn("object-centers size-full object-cover", image.className),
-          optixFlowConfig
-        }
-      ) }) }),
-      /* @__PURE__ */ jsx("div", { className: "absolute -top-[50%] left-1/2 z-0 w-[60%] -translate-x-1/2", children: /* @__PURE__ */ jsx(
-        AspectRatio,
-        {
-          ratio: 1,
-          className: "bg-[radial-gradient(closest-side,var(--color-accent),transparent)]"
-        }
-      ) })
-    ] }) }) });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "relative flex size-full flex-col justify-between",
+          imageClassName
+        ),
+        children: /* @__PURE__ */ jsx(
+          Img,
+          {
+            src: image.src,
+            alt: image.alt,
+            className: cn(
+              "object-centers size-full object-cover shadow-xl rounded-xl",
+              image.className
+            ),
+            optixFlowConfig
+          }
+        )
+      }
+    );
   }, [imageSlot, image, imageClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
     {
-      className: cn("bg-background py-12 font-sans md:py-20", className),
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-24", children: [
-        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: cn("relative z-10 mx-auto flex max-w-220 flex-col gap-7", contentClassName), children: [
-          /* @__PURE__ */ jsxs("h1", { className: cn("text-center text-5xl leading-[1.294] font-semibold sm:text-[3.75rem] md:text-[4.25rem]", headingClassName), children: [
-            headingPrimary,
-            " ",
-            /* @__PURE__ */ jsx("span", { className: cn(
-              "relative text-nowrap",
-              `after:absolute after:top-1/2 after:left-0 after:z-[-1] after:block after:h-[65%] after:w-full after:-translate-y-1/3 after:content-['']`,
-              `after:${getNestedCardBg(background)}`
-            ), children: headingHighlight })
-          ] }),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-xl leading-normal", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center gap-5", actionsClassName), children: renderActions })
-        ] }) }),
-        /* @__PURE__ */ jsx("div", { children: renderImage })
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      patternClassName,
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8 md:gap-24", children: [
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative z-10 mx-auto flex max-w-220 flex-col gap-7",
+              contentClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-center text-5xl leading-[1.294] font-semibold sm:text-[3.75rem] md:text-[4.25rem] text-balance",
+                    headingClassName
+                  ),
+                  children: headingPrimary
+                }
+              ),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-center text-xl leading-normal text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-col md:flex-row items-center justify-center gap-4",
+                    actionsClassName
+                  ),
+                  children: renderActions
+                }
+              )
+            ]
+          }
+        ) }),
+        renderImage
       ] }) })
     }
   );
@@ -57644,20 +57932,20 @@ function HeroMobileAppDownload({
   description,
   storeActions,
   storeActionsSlot,
-  ratingValue = "4.9",
-  ratingLabel = "rating from 50K+ reviews",
-  starCount = 5,
+  ratingValue,
+  ratingLabel,
+  starCount,
   ratingSlot,
   image,
   imageSlot,
   notification,
   notificationSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -57666,12 +57954,8 @@ function HeroMobileAppDownload({
 }) {
   const renderBadge = useMemo(() => {
     if (badgeSlot) return badgeSlot;
-    return /* @__PURE__ */ jsxs("div", { className: cn(
-      "inline-flex w-fit items-center gap-2 rounded-full px-4 py-2 text-sm font-medium",
-      getNestedCardBg(background, "accent"),
-      getNestedCardTextColor(background)
-    ), children: [
-      badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 16 }),
+    return /* @__PURE__ */ jsxs(Badge, { children: [
+      badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon }),
       /* @__PURE__ */ jsx("span", { children: badgeText })
     ] });
   }, [badgeSlot, badgeIcon, badgeText]);
@@ -57679,12 +57963,18 @@ function HeroMobileAppDownload({
     if (storeActionsSlot) return storeActionsSlot;
     if (!storeActions || storeActions.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 sm:flex-row", children: storeActions.map((action, index) => {
-      const { storePrefix, storeName, storeIcon, className: actionClassName, ...pressableProps } = action;
+      const {
+        storePrefix,
+        storeName,
+        storeIcon,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxs(
         Pressable,
         {
           asButton: true,
-          className: actionClassName,
+          className: cn("h-fit", actionClassName),
           ...pressableProps,
           children: [
             storeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: storeIcon, size: 20 }),
@@ -57700,9 +57990,18 @@ function HeroMobileAppDownload({
   }, [storeActionsSlot, storeActions]);
   const renderRating = useMemo(() => {
     if (ratingSlot) return ratingSlot;
+    if (!ratingValue || !ratingLabel || !starCount) return null;
     return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 pt-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: [...Array(starCount)].map((_, i) => /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/star", size: 16, className: cn("fill-current", getAccentColor(background)) }, i)) }),
-      /* @__PURE__ */ jsxs("span", { className: cn("text-sm", getTextColor(background, "muted")), children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: [...Array(starCount)].map((_, i) => /* @__PURE__ */ jsx(
+        DynamicIcon,
+        {
+          name: "lucide/star",
+          size: 16,
+          className: "fill-current"
+        },
+        i
+      )) }),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm", children: [
         ratingValue,
         " ",
         ratingLabel
@@ -57712,33 +58011,65 @@ function HeroMobileAppDownload({
   const renderNotification = useMemo(() => {
     if (notificationSlot) return notificationSlot;
     if (!notification) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn(
-      "absolute -right-8 top-1/4 w-48 rounded-2xl p-4 shadow-lg",
-      getNestedCardBg(background, "card"),
-      getNestedCardTextColor(background)
-    ), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-      notification.icon && /* @__PURE__ */ jsx("div", { className: cn("flex h-10 w-10 items-center justify-center rounded-full", notification.iconBgClass), children: /* @__PURE__ */ jsx(DynamicIcon, { name: notification.icon, size: 20, className: notification.iconColorClass }) }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        notification.title && /* @__PURE__ */ jsx("div", { className: "font-semibold ", children: notification.title }),
-        notification.subtitle && /* @__PURE__ */ jsx("div", { className: cn("text-xs", getTextColor(background, "muted")), children: notification.subtitle })
-      ] })
-    ] }) });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "absolute -right-8 top-1/4 w-48 rounded-2xl p-4 shadow-lg"
+        ),
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          notification.icon && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex h-10 w-10 items-center justify-center rounded-full",
+                notification.iconBgClass
+              ),
+              children: /* @__PURE__ */ jsx(
+                DynamicIcon,
+                {
+                  name: notification.icon,
+                  size: 20,
+                  className: notification.iconColorClass
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { children: [
+            notification.title && /* @__PURE__ */ jsx("div", { className: "font-semibold ", children: notification.title }),
+            notification.subtitle && /* @__PURE__ */ jsx("div", { className: "text-xs", children: notification.subtitle })
+          ] })
+        ] })
+      }
+    );
   }, [notificationSlot, notification]);
   const renderImage = useMemo(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("relative flex justify-center", imageClassName), children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: image.src,
-          alt: image.alt,
-          className: cn("w-64 rounded-3xl shadow-2xl", image.className),
-          optixFlowConfig
-        }
-      ),
-      renderNotification
-    ] }) });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "w-full h-full relative flex justify-center",
+          imageClassName
+        ),
+        children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: image.src,
+              alt: image.alt,
+              className: cn(
+                "w-full h-full object-cover rounded-3xl shadow-2xl",
+                image.className
+              ),
+              optixFlowConfig
+            }
+          ),
+          renderNotification
+        ] })
+      }
+    );
   }, [imageSlot, image, imageClassName, optixFlowConfig, renderNotification]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -57747,12 +58078,31 @@ function HeroMobileAppDownload({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 grid-cols-1 md:grid-cols-2 md:gap-20", children: [
         /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
           renderBadge,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          )),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderStoreActions,
           renderRating
         ] }),
@@ -58180,11 +58530,11 @@ function HeroPortfolioCreative({
   portfolioImages,
   portfolioImagesSlot,
   background,
-  spacing,
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -58200,7 +58550,10 @@ function HeroPortfolioCreative({
         {
           src: profile.avatar.src,
           alt: profile.avatar.alt,
-          className: cn("h-full w-full object-cover", profile.avatar.className),
+          className: cn(
+            "h-full w-full object-cover",
+            profile.avatar.className
+          ),
           optixFlowConfig
         }
       ) }),
@@ -58214,7 +58567,14 @@ function HeroPortfolioCreative({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 sm:flex-row", children: actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -58238,7 +58598,11 @@ function HeroPortfolioCreative({
       Pressable,
       {
         href: link.href,
-        className: cn("hover:", getTextColor(background, "muted"), link.className),
+        className: cn(
+          "hover:",
+          getTextColor(background, "muted"),
+          link.className
+        ),
         children: link.icon ?? (link.iconName && /* @__PURE__ */ jsx(DynamicIcon, { name: link.iconName, size: 20 }))
       },
       index
@@ -58254,7 +58618,10 @@ function HeroPortfolioCreative({
           {
             src: portfolioImages[0].src,
             alt: portfolioImages[0].alt,
-            className: cn("aspect-3/4 w-full object-cover transition-transform hover:scale-105", portfolioImages[0].className),
+            className: cn(
+              "aspect-3/4 w-full object-cover transition-transform hover:scale-105",
+              portfolioImages[0].className
+            ),
             optixFlowConfig
           }
         ) }),
@@ -58263,7 +58630,10 @@ function HeroPortfolioCreative({
           {
             src: portfolioImages[1].src,
             alt: portfolioImages[1].alt,
-            className: cn("aspect-square w-full object-cover transition-transform hover:scale-105", portfolioImages[1].className),
+            className: cn(
+              "aspect-square w-full object-cover transition-transform hover:scale-105",
+              portfolioImages[1].className
+            ),
             optixFlowConfig
           }
         ) })
@@ -58274,7 +58644,10 @@ function HeroPortfolioCreative({
           {
             src: portfolioImages[2].src,
             alt: portfolioImages[2].alt,
-            className: cn("aspect-square w-full object-cover transition-transform hover:scale-105", portfolioImages[2].className),
+            className: cn(
+              "aspect-square w-full object-cover transition-transform hover:scale-105",
+              portfolioImages[2].className
+            ),
             optixFlowConfig
           }
         ) }),
@@ -58283,13 +58656,21 @@ function HeroPortfolioCreative({
           {
             src: portfolioImages[3].src,
             alt: portfolioImages[3].alt,
-            className: cn("aspect-3/4 w-full object-cover transition-transform hover:scale-105", portfolioImages[3].className),
+            className: cn(
+              "aspect-3/4 w-full object-cover transition-transform hover:scale-105",
+              portfolioImages[3].className
+            ),
             optixFlowConfig
           }
         ) })
       ] })
     ] }) });
-  }, [portfolioImagesSlot, portfolioImages, portfolioClassName, optixFlowConfig]);
+  }, [
+    portfolioImagesSlot,
+    portfolioImages,
+    portfolioClassName,
+    optixFlowConfig
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -58301,8 +58682,36 @@ function HeroPortfolioCreative({
       children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
         /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
           renderProfile,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          )),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-lg",
+                getTextColor(background, "muted"),
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderActions,
           renderSocialLinks
         ] }),
@@ -75975,35 +76384,22 @@ var StatusBadge = ({
   const config = {
     completed: {
       label: "Completed",
-      badgeClassName: cn(getNestedCardBg(background, "muted"), "text-success"),
       icon: "lucide/check-circle-2"
     },
     "in-progress": {
       label: "In Progress",
-      badgeClassName: cn(getNestedCardBg(background, "muted"), getAccentColor(background)),
       icon: "lucide/loader-2"
     },
     upcoming: {
       label: "Upcoming",
-      badgeClassName: cn(getNestedCardBg(background, "muted"), getTextColor(background, "muted")),
       icon: "lucide/clock"
     }
   };
-  const { label, badgeClassName, icon } = config[status];
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      className: cn(
-        "inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium",
-        badgeClassName,
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(DynamicIcon, { name: icon, size: 14 }),
-        label
-      ]
-    }
-  );
+  const { label, icon } = config[status];
+  return /* @__PURE__ */ jsxs(Badge, { className: cn("items-center gap-1.5", className), children: [
+    /* @__PURE__ */ jsx(DynamicIcon, { name: icon, size: 14 }),
+    label
+  ] });
 };
 function ProcessRoadmapTimeline({
   heading,
@@ -76020,13 +76416,13 @@ function ProcessRoadmapTimeline({
   milestoneCardClassName,
   milestoneNodeClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
-  // Backwards compatibility
-  title
+  patternClassName
 }) {
-  const resolvedHeading = title ?? heading;
+  const resolvedHeading = heading;
   const renderMilestones = useMemo(() => {
     if (milestonesSlot) return milestonesSlot;
     if (!milestones || milestones.length === 0) return null;
@@ -76050,9 +76446,7 @@ function ProcessRoadmapTimeline({
                 "div",
                 {
                   className: cn(
-                    "rounded-lg border p-6 shadow-sm transition-shadow hover:shadow-md",
-                    getNestedCardBg(background, "card"),
-                    getNestedCardTextColor(background),
+                    "bg-card text-card-foreground rounded-lg border p-6 shadow-sm transition-shadow hover:shadow-md",
                     milestone.status === "in-progress" && "border-primary/50",
                     milestoneCardClassName
                   ),
@@ -76065,13 +76459,19 @@ function ProcessRoadmapTimeline({
                           index % 2 === 0 ? "justify-end" : "justify-start"
                         ),
                         children: [
-                          milestone.date && (typeof milestone.date === "string" ? /* @__PURE__ */ jsx("span", { className: cn("text-sm font-medium", getTextColor(background, "muted")), children: milestone.date }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm font-medium", getTextColor(background, "muted")), children: milestone.date })),
-                          /* @__PURE__ */ jsx(StatusBadge, { status: milestone.status, background })
+                          milestone.date && (typeof milestone.date === "string" ? /* @__PURE__ */ jsx("span", { className: cn("text-sm font-medium"), children: milestone.date }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm font-medium"), children: milestone.date })),
+                          /* @__PURE__ */ jsx(
+                            StatusBadge,
+                            {
+                              status: milestone.status,
+                              background
+                            }
+                          )
                         ]
                       }
                     ),
                     milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-semibold tracking-tight", children: milestone.title }) : /* @__PURE__ */ jsx("div", { className: "mb-2 text-xl font-semibold tracking-tight", children: milestone.title })),
-                    milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-4", getTextColor(background, "muted")), children: milestone.description }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", getTextColor(background, "muted")), children: milestone.description })),
+                    milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-4", children: milestone.description }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: milestone.description })),
                     milestone.features?.length ? /* @__PURE__ */ jsx(
                       "div",
                       {
@@ -76083,9 +76483,7 @@ function ProcessRoadmapTimeline({
                           "span",
                           {
                             className: cn(
-                              "rounded px-2 py-1 text-xs",
-                              getNestedCardBg(background, "muted"),
-                              getNestedCardTextColor(background)
+                              "rounded border text-card-foreground px-2 py-1 text-xs"
                             ),
                             children: feature
                           },
@@ -76098,39 +76496,35 @@ function ProcessRoadmapTimeline({
               )
             }
           ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "absolute left-1/2 flex size-10 -translate-x-1/2 items-center justify-center rounded-full border-2",
-                getNestedCardBg(background, "card"),
-                milestone.status === "completed" ? "border-success bg-success text-white" : milestone.status === "in-progress" ? cn("border-primary bg-primary", getNestedCardTextColor(background)) : cn(getBorderColor(background, "default"), getTextColor(background, "muted")),
-                milestoneNodeClassName
-              ),
-              children: milestone.status === "completed" ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check", size: 20 }) : /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: index + 1 })
-            }
-          ),
           /* @__PURE__ */ jsx("div", { className: "flex-1" })
         ]
       },
       index
     )) });
-  }, [milestonesSlot, milestones, background, milestoneCardClassName, milestoneNodeClassName]);
+  }, [
+    milestonesSlot,
+    milestones,
+    background,
+    milestoneCardClassName,
+    milestoneNodeClassName
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
       background,
       spacing,
-      className,
       pattern,
       patternOpacity,
+      patternClassName,
+      className,
+      containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: contentClassName, children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
           resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsx(
             "h1",
             {
               className: cn(
-                "mb-4 text-4xl font-semibold tracking-tight lg:text-5xl",
+                "mb-4 text-4xl font-semibold tracking-tight lg:text-5xl text-balance",
                 headingClassName
               ),
               children: resolvedHeading
@@ -76140,8 +76534,7 @@ function ProcessRoadmapTimeline({
             "p",
             {
               className: cn(
-                "mx-auto max-w-2xl text-lg",
-                getTextColor(background, "muted"),
+                "mx-auto max-w-2xl text-lg text-balance",
                 descriptionClassName
               ),
               children: description
@@ -99367,22 +99760,13 @@ function LinkTreeBlock({
       patternClassName,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "flex min-h-screen w-full items-start justify-center py-12",
-              containerClassName
-            ),
-            children: /* @__PURE__ */ jsxs("div", { className: cn("w-full max-w-md space-y-6", contentClassName), children: [
-              renderBrandHeader,
-              renderLinks,
-              renderMediaGallery,
-              renderSocialLinks,
-              /* @__PURE__ */ jsx("div", { className: "pt-4", children: renderFooter })
-            ] })
-          }
-        ),
+        /* @__PURE__ */ jsx("div", { className: "flex min-h-screen w-full items-start justify-center py-12", children: /* @__PURE__ */ jsxs("div", { className: cn("w-full max-w-md space-y-6", contentClassName), children: [
+          renderBrandHeader,
+          renderLinks,
+          renderMediaGallery,
+          renderSocialLinks,
+          /* @__PURE__ */ jsx("div", { className: "pt-4", children: renderFooter })
+        ] }) }),
         lightboxOpen && lightboxItems.length > 0 && /* @__PURE__ */ jsx(
           Lightbox,
           {
@@ -99767,11 +100151,21 @@ function LinkPageNewsletterSocial({
     }
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
-  const resolvedSubmitAction = submitAction ?? {
-    label: buttonText,
-    variant: "default",
-    size: "lg"
-  };
+  const resolvedSubmitAction = useMemo(() => {
+    if (submitAction) {
+      return {
+        ...submitAction,
+        label: buttonText || submitAction?.label || "Submit",
+        variant: submitAction?.variant || "default",
+        size: submitAction?.size || "lg"
+      };
+    }
+    return {
+      label: buttonText || "Submit",
+      variant: "default",
+      size: "lg"
+    };
+  }, [submitAction, buttonText]);
   const resolvedChevronIcon = linkChevronIcon ?? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 });
   const renderProfile = useMemo(() => {
     if (profileSlot) return profileSlot;
@@ -99929,7 +100323,7 @@ function LinkPageNewsletterSocial({
       {
         className: cn(
           "space-y-4 rounded-2xl p-6",
-          "border border-border bg-card shadow-sm",
+          "border border-border bg-card text-card-foreground shadow-sm",
           newsletterCardClassName
         ),
         children: [
@@ -100016,7 +100410,7 @@ function LinkPageNewsletterSocial({
           className: cn(
             "flex w-full bg-card text-card-foreground items-center gap-3 rounded-xl px-4 py-3 transition-all duration-200",
             "hover:scale-[1.02] active:scale-[0.98]",
-            "border border-border bg-card hover:opacity-80",
+            "border border-border hover:opacity-80",
             linkClassName,
             linkItemClassName
           ),