@opensite/ui 1.6.6 → 1.6.8

package/dist/registry.cjs

@@ -50002,7 +50002,7 @@ function HeroFloatingImages({
   zoomIndicatorClassName,
   optixFlowConfig,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-6 md:py-32"
+  spacing = "py-32 md:py-32"
 }) {
   const [lightboxOpen, setLightboxOpen] = React52.useState(false);
   const [lightboxIndex, setLightboxIndex] = React52.useState(0);
@@ -51323,7 +51323,7 @@ function HeroTechCarousel({
   patternOpacity,
   className,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-6 md:py-32",
+  spacing = "py-32",
   headingClassName,
   descriptionClassName,
   optixFlowConfig
@@ -51464,7 +51464,7 @@ function HeroTechCarousel({
                     fadeIn ? "opacity-100" : "opacity-0"
                   ),
                   children: [
-                    technologies && current && technologies[current] && technologies[current].logo && /* @__PURE__ */ jsxRuntime.jsx(
+                    technologies && current && technologies[current] && technologies[current].logo ? /* @__PURE__ */ jsxRuntime.jsx(
                       img.Img,
                       {
                         src: technologies[current]?.logo,
@@ -51472,7 +51472,7 @@ function HeroTechCarousel({
                         className: "h-4 md:h-7",
                         optixFlowConfig
                       }
-                    ),
+                    ) : null,
                     /* @__PURE__ */ jsxRuntime.jsx(
                       "p",
                       {
@@ -51575,7 +51575,7 @@ function HeroPlatformFeaturesGrid({
   featuresSlot,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-6 md:py-32",
+  spacing = "py-32",
   pattern,
   patternOpacity,
   className,
@@ -51653,7 +51653,7 @@ function HeroPlatformFeaturesGrid({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center w-full", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -51701,14 +51701,18 @@ function HeroSpiralPatternCards({
   description,
   actions,
   actionsSlot,
+  images,
+  imagesSlot,
+  optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headingClassName,
-  descriptionClassName
+  descriptionClassName,
+  imagesClassName
 }) {
   const renderActions = React52.useMemo(() => {
     if (actionsSlot) return actionsSlot;
@@ -51731,53 +51735,57 @@ function HeroSpiralPatternCards({
       );
     }) });
   }, [actionsSlot, actions]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const renderImages = React52.useMemo(() => {
+    if (imagesSlot) return imagesSlot;
+    if (!images || images.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-16 flex flex-col items-center justify-center lg:mt-32", imagesClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mx-auto aspect-square w-[95%] max-w-125 sm:w-full", children: [
+      images[0] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-5 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] translate-x-[-75%] translate-y-[10%] scale-[0.85] rotate-[-15deg] justify-center overflow-hidden rounded-lg border border-border opacity-60 md:w-85 md:max-w-85", children: /* @__PURE__ */ jsxRuntime.jsx(
+        img.Img,
+        {
+          src: images[0].src,
+          alt: images[0].alt,
+          className: cn("h-full w-full object-cover", images[0].className),
+          optixFlowConfig
+        }
+      ) }),
+      images[1] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-10 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] translate-x-[-40%] translate-y-[5%] scale-[0.9] rotate-[-7deg] justify-center overflow-hidden rounded-lg border border-border opacity-80 md:w-85 md:max-w-85", children: /* @__PURE__ */ jsxRuntime.jsx(
+        img.Img,
+        {
+          src: images[1].src,
+          alt: images[1].alt,
+          className: cn("h-full w-full object-cover", images[1].className),
+          optixFlowConfig
+        }
+      ) }),
+      images[2] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-20 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] justify-center overflow-hidden rounded-lg border border-border md:w-85 md:max-w-85", children: /* @__PURE__ */ jsxRuntime.jsx(
+        img.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__ */ jsxRuntime.jsx(
     Section,
     {
       background,
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container flex flex-col items-center text-center", containerClassName), children: [
+      className: cn("relative flex items-center justify-center", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center text-center", children: [
           badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs uppercase", children: badgeText }) : badgeText),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-3 text-2xl font-bold text-pretty sm:text-4xl md:my-6 lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-3 text-2xl font-bold text-pretty sm:text-4xl md:my-6 lg:text-5xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6 max-w-xl md:mb-12 lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6 max-w-xl md:mb-12 lg:text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-16 flex flex-col items-center justify-center lg:mt-32", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "b relative mx-auto aspect-square w-[95%] max-w-125 sm:w-full", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-1/2 top-full z-0 flex w-480 -translate-x-1/2 -translate-y-16 md:-translate-y-8", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "svg",
-            {
-              xmlns: "http://www.w3.org/2000/svg",
-              version: "1.1",
-              viewBox: "0 0 800 800",
-              className: cn("h-full w-full opacity-20", getTextColor(background, "muted")),
-              children: Array.from(Array(4e3).keys()).map((dot, index, array) => {
-                const angle = 0.2 * index;
-                const scalar = 300 + index * (100 / array.length);
-                const x = Math.round(Math.cos(angle) * scalar);
-                const y = Math.round(Math.sin(angle) * scalar);
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  "circle",
-                  {
-                    r: 1,
-                    cx: 400 + x,
-                    cy: 400 + y,
-                    fill: "currentColor",
-                    opacity: (array.length - index) / array.length
-                  },
-                  index
-                );
-              })
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute inset-0 z-5 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] translate-x-[-75%] translate-y-[10%] scale-[0.85] rotate-[-15deg] justify-center rounded-lg border border-border opacity-60 md:w-85 md:max-w-85", getNestedCardBg(background, "accent")) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute inset-0 z-10 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] translate-x-[-40%] translate-y-[5%] scale-[0.9] rotate-[-7deg] justify-center rounded-lg border border-border opacity-80 md:w-85 md:max-w-85", getNestedCardBg(background, "accent")) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute inset-0 z-20 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] justify-center rounded-lg border border-border md:w-85 md:max-w-85", getNestedCardBg(background, "accent")) })
-        ] }) })
-      ]
+        renderImages
+      ] })
     }
   );
 }
@@ -51787,16 +51795,19 @@ function HeroSplitSpiralShapes({
   description,
   actions,
   actionsSlot,
-  shapesSlot,
+  images,
+  imagesSlot,
+  optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
-  descriptionClassName
+  descriptionClassName,
+  imagesClassName
 }) {
   const renderActions = React52.useMemo(() => {
     if (actionsSlot) return actionsSlot;
@@ -51819,39 +51830,39 @@ function HeroSplitSpiralShapes({
       );
     }) });
   }, [actionsSlot, actions]);
-  const renderShapes = React52.useMemo(() => {
-    if (shapesSlot) return shapesSlot;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative aspect-3/4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "svg",
+  const renderImages = React52.useMemo(() => {
+    if (imagesSlot) return imagesSlot;
+    if (!images || images.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative aspect-3/4", imagesClassName), children: [
+      images[0] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[10%] left-[8%] w-[38%] overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-5/6", children: /* @__PURE__ */ jsxRuntime.jsx(
+        img.Img,
         {
-          xmlns: "http://www.w3.org/2000/svg",
-          version: "1.1",
-          viewBox: "0 0 800 800",
-          className: cn("h-full w-full opacity-20", getTextColor(background, "muted")),
-          children: Array.from(Array(720).keys()).map((dot, index, array) => {
-            const angle = 0.2 * index;
-            const scalar = 40 + index * (360 / array.length);
-            const x = Math.round(Math.cos(angle) * scalar);
-            const y = Math.round(Math.sin(angle) * scalar);
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "circle",
-              {
-                r: 3 * index / array.length,
-                cx: 400 + x,
-                cy: 400 + y,
-                opacity: 1 - Math.sin(angle)
-              },
-              index
-            );
-          })
+          src: images[0].src,
+          alt: images[0].alt,
+          className: cn("h-full w-full object-cover", images[0].className),
+          optixFlowConfig
         }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute top-[10%] left-[8%] flex aspect-5/6 w-[38%] justify-center rounded-lg border border-border", getNestedCardBg(background, "accent")) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute top-[20%] right-[12%] flex aspect-square w-[20%] justify-center rounded-lg border border-border", getNestedCardBg(background, "accent")) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute right-[24%] bottom-[24%] flex aspect-5/6 w-[38%] justify-center rounded-lg border border-border", getNestedCardBg(background, "accent")) })
+      ) }) }),
+      images[1] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[20%] right-[12%] w-[20%] overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-square", children: /* @__PURE__ */ jsxRuntime.jsx(
+        img.Img,
+        {
+          src: images[1].src,
+          alt: images[1].alt,
+          className: cn("h-full w-full object-cover", images[1].className),
+          optixFlowConfig
+        }
+      ) }) }),
+      images[2] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-[24%] bottom-[24%] w-[38%] overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-5/6", children: /* @__PURE__ */ jsxRuntime.jsx(
+        img.Img,
+        {
+          src: images[2].src,
+          alt: images[2].alt,
+          className: cn("h-full w-full object-cover", images[2].className),
+          optixFlowConfig
+        }
+      ) }) })
     ] });
-  }, [shapesSlot]);
+  }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -51859,15 +51870,16 @@ function HeroSplitSpiralShapes({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-8 lg:grid-cols-2", children: [
+      className: cn("relative flex items-center justify-center", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-8 lg:grid-cols-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center py-32 text-center lg:mx-auto lg:items-start lg:px-0 lg:text-left", contentClassName), children: [
           badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: badgeText }) : badgeText),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty lg:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8 max-w-xl lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8 max-w-xl lg:text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }),
-        renderShapes
+        renderImages
       ] }) })
     }
   );
@@ -52222,11 +52234,11 @@ function HeroMarketplaceScatteredImages({
   imagesSlot,
   showGridPattern = true,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -52271,12 +52283,13 @@ function HeroMarketplaceScatteredImages({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClassName, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative container mx-auto max-w-xl py-10 text-center", contentClassName), children: [
+      className: cn("relative flex items-center justify-center", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mx-auto max-w-xl py-10 text-center", contentClassName), children: [
           showGridPattern && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted))_1px,transparent_1px)] mask-[radial-gradient(ellipse_50%_100%_at_50%_50%,#000_60%,transparent_100%)] bg-size-[64px_64px]" }),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-3 text-4xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-3 text-4xl lg:text-7xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-5 text-sm md:text-base", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-5 text-sm md:text-base text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderAction,
           renderTagline
         ] }),
@@ -52288,17 +52301,20 @@ function HeroMarketplaceScatteredImages({
 function HeroBadgeShadowOverlay({
   announcementBadge,
   announcementText,
-  announcementHref = "#",
+  announcementHref,
+  description,
+  descriptionClassName,
   heading,
   actions,
   actionsSlot,
-  backgroundImageUrl = "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/shadow-overlay.png",
+  backgroundImageUrl,
+  optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-0 md:py-0",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "mx-0 w-screen px-0 sm:px-0 lg:px-0 max-w-screen relative z-10 min-h-screen h-full",
   announcementClassName,
   headingClassName,
   actionsClassName
@@ -52306,8 +52322,15 @@ function HeroBadgeShadowOverlay({
   const renderActions = React52.useMemo(() => {
     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;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col md:flex-row gap-4", actionsClassName), children: actions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -52322,8 +52345,8 @@ function HeroBadgeShadowOverlay({
         },
         index
       );
-    });
-  }, [actionsSlot, actions]);
+    }) });
+  }, [actionsSlot, actions, actionsClassName]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -52331,33 +52354,45 @@ function HeroBadgeShadowOverlay({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("relative", className),
+      className: cn("relative flex items-center justify-center", className),
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-10 text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col min-h-screen h-full justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-10 text-center px-6 max-full md:max-w-lg", children: [
           (announcementBadge || announcementText) && /* @__PURE__ */ jsxRuntime.jsxs(
             Pressable,
             {
               href: announcementHref,
               className: cn(
-                "flex items-center gap-2 rounded-full px-2 py-1 text-sm transition-colors",
-                `hover:${getNestedCardBg(background)}`,
+                "flex items-center gap-2 rounded-full px-2 py-1 text-sm bg-card text-card-foreground",
                 announcementClassName
               ),
               children: [
                 announcementBadge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: announcementBadge }),
                 announcementText,
-                /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
+                /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 16 })
               ]
             }
           ),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-semibold lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row", actionsClassName), children: renderActions })
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-semibold lg:text-8xl text-white text-balance text-shadow-xl text-center",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          renderActions
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+        backgroundImageUrl && /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
           {
-            className: "absolute inset-0 -z-10 bg-[50%_0] bg-no-repeat",
-            style: { backgroundImage: `url('${backgroundImageUrl}')` }
+            src: backgroundImageUrl,
+            alt: "Background Image",
+            className: "absolute inset-0 -z-10 h-full w-full object-cover brightness-50",
+            optixFlowConfig
           }
         )
       ]
@@ -52373,10 +52408,11 @@ function HeroVideoBackgroundDark({
   videoSrc,
   videoSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
   descriptionClassName
@@ -52416,23 +52452,24 @@ function HeroVideoBackgroundDark({
       }
     );
   }, [videoSlot, videoSrc]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative z-10 container mx-auto flex size-full max-w-3xl flex-col justify-center gap-4 lg:items-center lg:text-center", contentClassName), children: [
-          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs", getTextColor(background, "muted")), children: badgeText }) : badgeText),
+      className: cn("relative flex items-center justify-center", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative z-10 mx-auto flex size-full max-w-3xl flex-col justify-center gap-4 lg:items-center lg:text-center", contentClassName), children: [
+          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: badgeText }) : badgeText),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-5xl font-bold lg:text-[4.2rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-5xl font-bold lg:text-[4.2rem]", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }),
         renderVideo
-      ]
+      ] })
     }
   );
 }
@@ -52508,11 +52545,11 @@ function HeroDashedBorderFeatures({
   features,
   featuresSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -52525,11 +52562,7 @@ function HeroDashedBorderFeatures({
       Pressable,
       {
         href: announcementHref,
-        className: cn(
-          "mx-auto mb-4 flex w-fit items-center gap-2 rounded-full px-4 py-2 text-sm",
-          getNestedCardBg(background),
-          getNestedCardTextColor(background)
-        ),
+        className: "mx-auto mb-4 flex w-fit items-center gap-2 rounded-full px-4 py-2 text-sm bg-card",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: badgeText }),
           announcementText,
@@ -52592,11 +52625,7 @@ function HeroDashedBorderFeatures({
           index === 1 && "border-x"
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-            "flex size-10 shrink-0 items-center justify-center rounded-md text-sm lg:size-12 lg:text-base",
-            getNestedCardBg(background),
-            getNestedCardTextColor(background)
-          ), children: feature.icon ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName || "lucide/check", size: 20 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-md text-sm lg:size-12 lg:text-base bg-card", children: feature.icon ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName || "lucide/check", size: 20 }) }),
           feature.title
         ]
       },
@@ -52610,12 +52639,13 @@ function HeroDashedBorderFeatures({
       spacing,
       pattern,
       patternOpacity,
-      className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+      className: cn("relative flex items-center justify-center", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("border-x border-t border-dashed px-4 py-20 md:px-16", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl", children: [
           renderAnnouncement,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto mb-6 max-w-2xl text-center lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto mb-6 max-w-2xl text-center lg:text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col justify-center gap-2 sm:flex-row", actionsClassName), children: renderActions })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative grid border-x border-dashed md:grid-cols-3", featuresClassName), children: [
@@ -52845,8 +52875,8 @@ function HeroGradientClientFocused({
   );
 }
 function HeroPremiumSplitAvatars({
-  brandName = "Business",
-  brandSuffix = "PRO",
+  brandName,
+  brandSuffix,
   brandSlot,
   heading,
   description,
@@ -52854,14 +52884,15 @@ function HeroPremiumSplitAvatars({
   actionSlot,
   avatars,
   avatarsSlot,
-  socialProofText = "More than 1 million professionals rely on our platform",
+  socialProofText,
   image,
   imageSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -52910,16 +52941,17 @@ function HeroPremiumSplitAvatars({
       }
     );
   }, [imageSlot, image, imageClassName, optixFlowConfig]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
       spacing,
       pattern,
       patternOpacity,
-      className: cn("dark flex", className),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center bg-background lg:w-1/2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container my-10 flex w-[500px] flex-col gap-24", contentClassName), children: [
+      className: cn("relative flex items-center justify-center dark", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center bg-background lg:w-1/2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("my-10 flex w-[500px] flex-col gap-24", contentClassName), children: [
           renderBrand,
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-4xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-4xl lg:text-6xl", headingClassName), children: heading })),
@@ -52929,7 +52961,7 @@ function HeroPremiumSplitAvatars({
           renderAvatars
         ] }) }),
         renderImage
-      ]
+      ] })
     }
   );
 }
@@ -53309,58 +53341,35 @@ function HeroGradientAvatarsRating({
 }
 function HeroTaskTimerAnimated({
   heading,
+  description,
+  descriptionClassName,
   actions,
   actionsSlot,
   images,
   imagesSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   headingClassName,
   imagesClassName,
   optixFlowConfig
 }) {
-  const defaultActions = [
-    {
-      label: "Download for Mac",
-      href: "#",
-      variant: "default",
-      className: "group h-fit rounded-xl p-4 text-xl font-semibold shadow-xl",
-      icon: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/apple", size: 20, className: "mr-2" })
-    },
-    {
-      label: "Download for Windows",
-      href: "#",
-      variant: "link",
-      className: "flex items-center gap-2 text-lg font-semibold ",
-      iconAfter: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20 })
-    }
-  ];
   const renderActions = React52.useMemo(() => {
     if (actionsSlot) return actionsSlot;
-    const actionsToRender = actions || defaultActions;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-start gap-4 sm:flex-row sm:items-center", children: actionsToRender.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-      const isPrimaryAction = index === 0 && !actions;
-      if (isPrimaryAction) {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          Pressable,
-          {
-            asButton: true,
-            className: actionClassName,
-            ...pressableProps,
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center transition-all group-hover:-translate-x-5", children: [
-              icon,
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
-              /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20, className: "ml-2 opacity-0 transition-opacity group-hover:opacity-100" })
-            ] }) })
-          },
-          index
-        );
-      }
+    if (!actions || actions.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-start gap-4 sm:flex-row sm:items-center", children: actions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -53376,7 +53385,7 @@ function HeroTaskTimerAnimated({
         index
       );
     }) });
-  }, [actionsSlot, actions, defaultActions]);
+  }, [actionsSlot, actions]);
   const renderImages = React52.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length < 2) return null;
@@ -53386,7 +53395,10 @@ function HeroTaskTimerAnimated({
         {
           src: images[0].src,
           alt: images[0].alt,
-          className: cn("block size-full object-cover object-top-left", images[0].className),
+          className: cn(
+            "block size-full object-cover object-top-left",
+            images[0].className
+          ),
           optixFlowConfig
         }
       ) }) }) }),
@@ -53395,44 +53407,77 @@ function HeroTaskTimerAnimated({
         {
           src: images[1].src,
           alt: images[1].alt,
-          className: cn("block size-full object-cover object-top-left", images[1].className),
+          className: cn(
+            "block size-full object-cover object-top-left",
+            images[1].className
+          ),
           optixFlowConfig
         }
       ) }) }) })
     ] });
   }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      className: cn(
-        "container flex flex-col gap-10 bg-background py-20 sm:gap-20",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-10 lg:w-[80%] lg:self-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-2xl text-6xl font-bold tracking-tight md:text-7xl lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-2xl text-6xl font-bold tracking-tight md:text-7xl lg:text-8xl", headingClassName), children: heading })),
-          renderActions
-        ] }),
-        renderImages
-      ]
-    }
-  );
-}
-function HeroAiPoweredCarousel({
-  badge,
-  badgeTagline,
-  heading,
-  description,
-  actions,
-  actionsSlot,
-  mobileCarouselImages1,
-  mobileCarouselImages2,
-  desktopCarouselImages1,
-  desktopCarouselImages2,
-  carouselSlot,
-  background,
-  spacing,
-  pattern,
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col gap-6 md:gap-16", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-10 lg:w-[80%] lg:self-center",
+              headerClassName
+            ),
+            children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "max-w-2xl text-6xl font-bold tracking-tight md:text-7xl lg:text-8xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "max-w-2xl text-6xl font-bold tracking-tight md:text-7xl lg:text-8xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              renderActions
+            ]
+          }
+        ),
+        renderImages
+      ] })
+    }
+  );
+}
+function HeroAiPoweredCarousel({
+  badge,
+  badgeTagline,
+  heading,
+  description,
+  actions,
+  actionsSlot,
+  mobileCarouselImages1,
+  mobileCarouselImages2,
+  desktopCarouselImages1,
+  desktopCarouselImages2,
+  carouselSlot,
+  background,
+  spacing,
+  pattern,
   patternOpacity,
   className,
   containerClassName,
@@ -53746,10 +53791,11 @@ function HeroPresentationPlatformVideo({
   videoSrc,
   videoSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -53792,22 +53838,24 @@ function HeroPresentationPlatformVideo({
       }
     ) });
   }, [videoSlot, videoSrc, videoClassName]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      className: cn(
-        "flex min-h-screen items-center justify-between bg-background py-14",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-5 px-[10%] lg:w-[50%] lg:pr-0", contentClassName), children: [
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn("relative flex items-center justify-center", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex min-h-screen items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-5 lg:w-[50%] lg:pr-0", contentClassName), children: [
           subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-light uppercase", children: subtitle }) : subtitle),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-5xl font-medium md:text-6xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-5xl font-medium md:text-6xl lg:text-7xl", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("my-8 md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }),
         renderVideo
-      ]
+      ] })
     }
   );
 }
@@ -53823,11 +53871,11 @@ function HeroGridPatternSolutions({
   imagesSlot,
   showGridPattern = true,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -53841,11 +53889,7 @@ function HeroGridPatternSolutions({
       Pressable,
       {
         href: badgeHref,
-        className: cn(
-          "mx-auto mb-4 flex w-fit items-center gap-2 rounded-full px-4 py-2 text-sm",
-          getNestedCardBg(background),
-          getNestedCardTextColor(background)
-        ),
+        className: "mx-auto mb-4 flex w-fit items-center gap-2 rounded-full px-4 py-2 text-sm bg-card",
         children: [
           badgeText,
           /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
@@ -53895,14 +53939,15 @@ function HeroGridPatternSolutions({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+      className: cn("relative flex items-center justify-center", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative overflow-hidden", children: [
           showGridPattern && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 -top-1 -left-1 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted-foreground))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted-foreground))_1px,transparent_1px)] mask-[radial-gradient(ellipse_50%_100%_at_50%_50%,transparent_60%,#000_100%)] bg-size-[92px_92px] opacity-15" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl", contentClassName), children: [
             renderBadge,
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto mb-8 max-w-2xl text-center lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto mb-8 max-w-2xl text-center lg:text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
             renderActions
           ] })
         ] }),
@@ -53992,13 +54037,12 @@ function HeroBillingPlatformLogos({
   logosTagline,
   logos,
   logosSlot,
-  backgroundNoiseUrl = "https://cdn.ing/assets/i/r/286188/zrqcp9hynh3j7p2laihwzfbujgrl/noise.png",
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -54049,13 +54093,10 @@ function HeroBillingPlatformLogos({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(
-        "dark font-sans",
-        className
-      ),
-      style: { backgroundImage: backgroundNoiseUrl ? `url('${backgroundNoiseUrl}')` : void 0 },
+      className: cn("relative flex items-center justify-center dark font-sans", className),
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center justify-center gap-12 lg:grid-cols-[minmax(33.75rem,1fr)_1.5fr] lg:gap-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center justify-center gap-12 lg:grid-cols-[minmax(33.75rem,1fr)_1.5fr] lg:gap-8", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClassName, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl leading-tight md:text-5xl lg:text-[3.5rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
             description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-5 text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
@@ -54387,11 +54428,11 @@ function HeroConversionVideoPlay({
   logos,
   logosSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -54464,20 +54505,21 @@ function HeroConversionVideoPlay({
     });
   }, [logosSlot, logos, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsxs(React52.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {
         background,
         spacing,
         pattern,
         patternOpacity,
-        className: cn(className),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden border-b", getBorderColor(background, "muted")), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-16 md:gap-24", children: [
+        className: cn("relative flex items-center justify-center", className),
+        containerClassName,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden border-b border-border", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-16 md:gap-24", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-8", contentClassName), children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-7", children: [
                 heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-[920px] text-center text-4xl leading-tight font-semibold md:text-6xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-                description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-[750px] text-center text-base leading-relaxed font-normal md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+                description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-[750px] text-center text-base leading-relaxed font-normal md:text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-8", actionsClassName), children: renderActions })
             ] }),
@@ -54490,12 +54532,12 @@ function HeroConversionVideoPlay({
                 optixFlowConfig
               }
             ) }) }) }) : null })
-          ] }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-16 py-20", logosClassName), children: [
-            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-xl font-medium", getAccentColor(background)), children: logosTagline }) : logosTagline),
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-16 py-20", children: [
+            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-xl font-medium text-accent-foreground"), children: logosTagline }) : logosTagline),
             (logosSlot || logos && logos.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-20", children: renderLogos })
-          ] }) })
-        ]
+          ] })
+        ] })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isVideoOpen, onOpenChange: setIsVideoOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-[800px]", children: [
@@ -54518,17 +54560,17 @@ function HeroDesignShowcaseLogos({
   description,
   actions,
   actionsSlot,
-  logosLabel = "Trusted by design teams at",
+  logosLabel,
   logos,
   logosSlot,
   showcaseImage,
   showcaseSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -54598,12 +54640,13 @@ function HeroDesignShowcaseLogos({
       spacing,
       pattern,
       patternOpacity,
-      className,
+      className: cn("relative flex items-center justify-center", className),
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-8", contentClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-8", contentClassName), children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-[920px] flex-col items-center gap-6", children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-6 text-center text-[2.75rem] leading-tight font-semibold md:text-[3.5rem] lg:text-[4.375rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-6 text-center text-[2.75rem] leading-tight font-semibold md:text-[3.5rem] lg:text-[4.375rem]", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderActions }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderLogos })
@@ -54706,7 +54749,7 @@ function HeroProductivityLauncherVideo({
   videoSrc,
   videoSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
@@ -54738,7 +54781,7 @@ function HeroProductivityLauncherVideo({
   const renderVersionInfo = React52.useMemo(() => {
     if (versionInfoSlot) return versionInfoSlot;
     if (!versionInfo) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-6 text-xs", getTextColor(background, "muted")), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-6 text-xs text-muted-foreground", children: [
       versionInfo.version && /* @__PURE__ */ jsxRuntime.jsx("span", { children: versionInfo.version }),
       versionInfo.osRequirement && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative before:absolute before:-left-3 before:content-['|']", children: versionInfo.osRequirement }),
       versionInfo.installMethod && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative before:absolute before:-left-3 before:content-['|']", children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: versionInfo.installAction, children: versionInfo.installMethod }) })
@@ -54754,7 +54797,7 @@ function HeroProductivityLauncherVideo({
         className: "group relative mt-10 flex h-8 items-center gap-3 overflow-hidden rounded-full border border-border/50 bg-background px-3 py-1 text-sm font-medium",
         children: [
           secondaryCta.primaryText && /* @__PURE__ */ jsxRuntime.jsx("span", { children: secondaryCta.primaryText }),
-          secondaryCta.secondaryText && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("flex items-center gap-1", getTextColor(background, "muted")), children: [
+          secondaryCta.secondaryText && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: secondaryCta.secondaryText }),
             /* @__PURE__ */ jsxRuntime.jsx(
               DynamicIcon,
@@ -54786,15 +54829,17 @@ function HeroProductivityLauncherVideo({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
-      className: cn(
-        "dark relative overflow-hidden bg-background py-12 font-sans md:py-20",
-        className
-      ),
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn("relative flex items-center justify-center dark overflow-hidden bg-background py-12 font-sans md:py-20", className),
+      containerClassName: "px-6 sm:px-6 md:px-8 lg:px-8",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative z-20 container max-w-204.5", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative z-20 max-w-204.5", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-8 px-4 pt-52 pb-32 md:pb-52", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-100 sm:max-w-135", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-4xl leading-tight font-semibold [text-shadow:0_4px_4px_rgba(0,0,0,0.15)] sm:text-5xl md:text-[4rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-4xl leading-tight font-semibold [text-shadow:0_4px_4px_rgba(0,0,0,0.15)] sm:text-5xl md:text-[4rem]", headingClassName), children: heading })) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-90 md:max-w-full", children: description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-sm leading-normal tracking-tight text-balance [text-shadow:0_4px_4px_rgba(0,0,0,0.25)] md:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })) })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-90 md:max-w-full", children: description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-sm leading-normal tracking-tight text-balance text-muted-foreground [text-shadow:0_4px_4px_rgba(0,0,0,0.25)] md:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
             renderActions,
@@ -54808,7 +54853,7 @@ function HeroProductivityLauncherVideo({
   );
 }
 function HeroHiringAnimatedText({
-  headingPrefix = "We help you to hire top",
+  headingPrefix,
   animatedTexts,
   headingSlot,
   description,
@@ -54818,11 +54863,11 @@ function HeroHiringAnimatedText({
   scrollActionSlot,
   backgroundImage,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -54883,12 +54928,17 @@ function HeroHiringAnimatedText({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
       className: cn(
-        "dark relative h-svh max-h-[1400px] w-full bg-cover bg-position-[100%] bg-no-repeat before:absolute before:top-0 before:left-0 before:size-full before:bg-[radial-gradient(circle_at_100%_-100%,transparent_40%,rgba(0,0,0,.75)_85%)] before:content-['']",
+        "relative flex items-center justify-center dark h-svh max-h-[1400px] w-full bg-cover bg-position-[100%] bg-no-repeat before:absolute before:top-0 before:left-0 before:size-full before:bg-[radial-gradient(circle_at_100%_-100%,transparent_40%,rgba(0,0,0,.75)_85%)] before:content-['']",
         className
       ),
+      containerClassName,
       style: { backgroundImage: `url('${backgroundImage}')` },
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative z-10 container flex size-full max-w-412.5 flex-col justify-between pt-24 pb-14 md:justify-end", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-full flex-col justify-between gap-6 md:justify-end", contentClassName), children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 flex size-full max-w-412.5 flex-col justify-between pt-24 pb-14 md:justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-full flex-col justify-between gap-6 md:justify-end", contentClassName), children: [
         renderHeading,
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-8", children: [
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg lg:text-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
@@ -54992,11 +55042,11 @@ function HeroCenteredGradientCta({
   features,
   featuresSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   gradientClassName,
   badgeClassName,
   headingClassName,
@@ -55036,17 +55086,17 @@ function HeroCenteredGradientCta({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
-      className: cn(
-        "relative min-h-screen overflow-hidden bg-background py-32",
-        className
-      ),
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn("relative flex items-center justify-center min-h-screen overflow-hidden bg-background py-32", className),
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(120,119,198,0.3),transparent)]", gradientClassName) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container relative z-10 flex flex-col items-center text-center", containerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 flex flex-col items-center text-center", children: [
           badge && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-            "inline-flex items-center gap-2 rounded-full border border-border/50 px-4 py-2 text-sm",
-            getNestedCardBg(background, "muted"),
-            getNestedCardTextColor(background),
+            "inline-flex items-center gap-2 rounded-full border border-border/50 bg-accent px-4 py-2 text-sm",
             badgeClassName
           ), children: [
             badgeIcon,
@@ -55057,9 +55107,9 @@ function HeroCenteredGradientCta({
             " ",
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-linear-to-r from-primary to-purple-600 bg-clip-text text-transparent", children: headingHighlight })
           ] }) : null),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 max-w-2xl text-lg md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 max-w-2xl text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-10 flex flex-col gap-4 sm:flex-row", actionsClassName), children: renderActions }),
-          (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-16 flex items-center gap-8 text-sm", getTextColor(background, "muted"), featuresClassName), children: renderFeatures })
+          (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-16 flex items-center gap-8 text-sm text-muted-foreground", featuresClassName), children: renderFeatures })
         ] })
       ]
     }
@@ -55250,21 +55300,18 @@ function HeroFeatureCardsGrid({
 function HeroTestimonialImageGrid({
   heading,
   description,
-  button = {
-    text: "Get Started",
-    url: "#"
-  },
+  button,
   buttonSlot,
   testimonial,
   testimonialSlot,
   gridImages,
   imagesSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headingClassName,
   descriptionClassName,
   optixFlowConfig
@@ -55310,7 +55357,7 @@ function HeroTestimonialImageGrid({
     if (!gridImages || gridImages.length < 4) return null;
     const images = gridImages;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-200", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1 / 1, className: "h-full w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid h-full w-full grid-cols-2 grid-rows-2 gap-[3.5%]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden rounded-[5.2%] border border-muted", getNestedCardBg(background)), children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-[5.2%] border border-border bg-card", children: /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
           src: images[0].src,
@@ -55319,7 +55366,7 @@ function HeroTestimonialImageGrid({
           optixFlowConfig
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative overflow-hidden rounded-[5.2%] border border-muted", getNestedCardBg(background)), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-1/2 left-[5%] w-[110%] max-w-100 -translate-y-1/2 overflow-hidden rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1.739130435 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden rounded-[5.2%] border border-border bg-card", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-1/2 left-[5%] w-[110%] max-w-100 -translate-y-1/2 overflow-hidden rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1.739130435 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
           src: images[1].src,
@@ -55328,7 +55375,7 @@ function HeroTestimonialImageGrid({
           optixFlowConfig
         }
       ) }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative overflow-hidden rounded-[5.2%] border border-muted", getNestedCardBg(background)), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[9%] left-[9%] w-[200%] max-w-150 overflow-hidden rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1.6 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden rounded-[5.2%] border border-border bg-card", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[9%] left-[9%] w-[200%] max-w-150 overflow-hidden rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1.6 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
           src: images[2].src,
@@ -55337,7 +55384,7 @@ function HeroTestimonialImageGrid({
           optixFlowConfig
         }
       ) }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative overflow-hidden rounded-[5.2%] border border-muted", getNestedCardBg(background)), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative top-[12%] left-[50%] w-[70%] max-w-70 -translate-x-[50%]", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 0.52 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden rounded-[5.2%] border border-border bg-card", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative top-[12%] left-[50%] w-[70%] max-w-70 -translate-x-[50%]", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 0.52 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
           src: images[3].src,
@@ -55355,8 +55402,9 @@ function HeroTestimonialImageGrid({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12 md:py-20", className),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-8 md:flex-row", children: [
+      className: cn("relative flex items-center justify-center py-12 md:py-20", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-8 md:flex-row", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 lg:gap-8", children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("leading-tighter max-w-[80%] text-4xl font-semibold tracking-tight lg:text-5xl xl:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("leading-tighter max-w-[80%] text-4xl font-semibold tracking-tight lg:text-5xl xl:text-7xl", headingClassName), children: heading })),
@@ -55520,11 +55568,11 @@ function HeroArchitectureFullscreen({
   actionSlot,
   backgroundImage,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   taglineClassName,
   headingClassName,
   descriptionClassName
@@ -55555,17 +55603,18 @@ function HeroArchitectureFullscreen({
       pattern,
       patternOpacity,
       className: cn(
-        "dark relative h-svh max-h-[1400px] w-full overflow-hidden bg-cover bg-center bg-no-repeat font-poppins after:absolute after:top-0 after:left-0 after:block after:h-full after:w-full after:bg-foreground/65 after:content-['']",
+        "relative flex items-center justify-center dark h-svh max-h-[1400px] w-full overflow-hidden bg-cover bg-center bg-no-repeat font-poppins after:absolute after:top-0 after:left-0 after:block after:h-full after:w-full after:bg-foreground/65 after:content-['']",
         className
       ),
+      containerClassName,
       style: { backgroundImage: backgroundImage ? `url('${backgroundImage}')` : void 0 },
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative z-20 container h-full w-full max-w-340", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col justify-end gap-12", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-20 h-full w-full max-w-340", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col justify-end gap-12", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-245.5 flex-col gap-1", children: [
-          tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm leading-none uppercase", getTextColor(background, "muted"), taglineClassName), children: tagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: taglineClassName, children: tagline })),
+          tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm leading-none uppercase text-muted-foreground", taglineClassName), children: tagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: taglineClassName, children: tagline })),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-3xl leading-snug! md:text-4xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col justify-between gap-5 sm:flex-row sm:items-center", children: [
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-81 border-l pl-6 text-base", getBorderColor(background, "muted"), getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-81 border-l border-border pl-6 text-base text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: renderAction })
         ] })
       ] }) })
@@ -56115,11 +56164,11 @@ function HeroTherapyTestimonialGrid({
   testimonial,
   testimonialSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -56149,11 +56198,7 @@ function HeroTherapyTestimonialGrid({
   const renderTestimonial = React52.useMemo(() => {
     if (testimonialSlot) return testimonialSlot;
     if (!testimonial) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-[1/2] row-[3/4] md:col-[1/2] md:row-[2/3]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-      "flex h-full min-h-37.5 flex-col gap-3 overflow-hidden rounded-3xl p-5 px-5 md:flex-row md:items-center md:gap-7 md:py-8",
-      getNestedCardBg(background),
-      getNestedCardTextColor(background)
-    ), children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-[1/2] row-[3/4] md:col-[1/2] md:row-[2/3]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-37.5 flex-col gap-3 overflow-hidden rounded-3xl bg-card p-5 px-5 md:flex-row md:items-center md:gap-7 md:py-8", children: [
       testimonial.avatar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-20 w-20 shrink-0 overflow-hidden rounded-xl md:h-30 md:w-30", children: /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
@@ -56196,7 +56241,7 @@ function HeroTherapyTestimonialGrid({
         }
       ) }) }),
       renderTestimonial,
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "row-[4/5] md:col-[2/3] md:row-[2/3]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("h-full w-full overflow-hidden rounded-2xl", getNestedCardBg(background)), children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "row-[4/5] md:col-[2/3] md:row-[2/3]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full overflow-hidden rounded-2xl bg-card", children: /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
           src: images[2].src,
@@ -56210,8 +56255,13 @@ function HeroTherapyTestimonialGrid({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      className: cn("bg-background py-12 font-sans md:py-20", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn("relative flex items-center justify-center bg-background py-12 font-sans md:py-20", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto mb-16 flex max-w-[900px] flex-col items-center gap-6", headerClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
@@ -56330,19 +56380,19 @@ function HeroMentorshipVideoSplit({
   description,
   action,
   actionSlot,
-  videoLabel = "Watch our introduction to discover our services",
+  videoLabel,
   videoThumbnail,
-  videoUrl = "https://www.youtube.com/embed/your-video-id",
-  videoTitle = "Presentation Video",
+  videoUrl,
+  videoTitle,
   videoSlot,
   image,
   imageSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -56364,7 +56414,7 @@ function HeroMentorshipVideoSplit({
     if (videoSlot) return videoSlot;
     if (!videoThumbnail) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-97.5 flex-col gap-6", children: [
-      videoLabel && (typeof videoLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xl", getAccentColor(background)), children: videoLabel }) : videoLabel),
+      videoLabel && (typeof videoLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xl text-accent-foreground", children: videoLabel }) : videoLabel),
       /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -56417,12 +56467,13 @@ function HeroMentorshipVideoSplit({
         spacing,
         pattern,
         patternOpacity,
-        className: cn(className),
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-1 gap-6 lg:grid-cols-2", children: [
+        className: cn("relative flex items-center justify-center", className),
+        containerClassName,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-1 gap-6 lg:grid-cols-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-full flex-col justify-between gap-12", contentClassName), children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-165 flex-col gap-9", children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[2.5rem] leading-none sm:text-[3.4375rem] md:text-[4rem]", getAccentColor(background), headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[2.5rem] leading-none sm:text-[3.4375rem] md:text-[4rem]", getAccentColor(background), headingClassName), children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg font-medium md:text-xl", getAccentColor(background), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[2.5rem] leading-none text-accent-foreground sm:text-[3.4375rem] md:text-[4rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[2.5rem] leading-none text-accent-foreground sm:text-[3.4375rem] md:text-[4rem]", headingClassName), children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg font-medium text-accent-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
               renderAction
             ] }),
             renderVideoSection
@@ -56604,11 +56655,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
@@ -56686,14 +56738,16 @@ function HeroWelcomeAsymmetricImages({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start justify-between gap-8 md:flex-row xl:gap-20", children: [
+      patternClassName,
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start justify-between gap-8 md:flex-row xl:gap-20", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-start text-left", children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.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
@@ -56702,7 +56756,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
@@ -56712,8 +56766,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
@@ -56722,8 +56775,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
@@ -56747,15 +56799,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,
@@ -56769,7 +56822,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__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -56794,7 +56854,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
@@ -56803,7 +56866,7 @@ function HeroStartupLaunchCta({
   const renderBadgeCard = React52.useMemo(() => {
     if (badgeCardSlot) return badgeCardSlot;
     if (!badgeCard) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute -bottom-4 -left-4 flex items-center gap-3 rounded-xl bg-background p-4 shadow-lg", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute -bottom-4 -left-4 flex items-center gap-3 rounded-xl bg-card text-card-foreground p-4 shadow-lg", children: [
       badgeCard.logoSrc && /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
@@ -56814,8 +56877,8 @@ function HeroStartupLaunchCta({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        badgeCard.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold ", children: badgeCard.title }),
-        badgeCard.subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm", getTextColor(background, "muted")), children: badgeCard.subtitle })
+        badgeCard.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold", children: badgeCard.title }),
+        badgeCard.subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children: badgeCard.subtitle })
       ] })
     ] });
   }, [badgeCardSlot, badgeCard, optixFlowConfig]);
@@ -56826,31 +56889,69 @@ function HeroStartupLaunchCta({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
+      patternClassName,
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
-          badge && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Badge, { className: cn("relative", badgeClassName), children: [
             badgeIcon,
             typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: badge }) : badge
           ] }),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-4 sm:flex-row", actionsClassName), children: renderActions }),
-          (avatarsSlot || avatars || socialProofText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-4 pt-4", socialProofClassName), children: [
-            renderAvatars,
-            socialProofText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children: socialProofText })
-          ] })
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl leading-snug text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "flex flex-col gap-4 sm:flex-row",
+                actionsClassName
+              ),
+              children: renderActions
+            }
+          ),
+          (avatarsSlot || avatars || socialProofText) && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center gap-4 pt-4",
+                socialProofClassName
+              ),
+              children: [
+                renderAvatars,
+                socialProofText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children: socialProofText })
+              ]
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-          imageSrc && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden rounded-2xl bg-linear-to-br from-green-50 to-blue-50 p-8", imageClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
-            img.Img,
+          imageSrc && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                img.Img,
+                {
+                  src: imageSrc,
+                  alt: imageAlt,
+                  className: "w-full rounded-lg shadow-xl",
+                  optixFlowConfig
+                }
+              )
             }
-          ) }),
+          ),
           renderBadgeCard
         ] })
       ] }) })
@@ -57224,50 +57325,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 = React52.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "absolute right-0 bottom-0 w-[85%] overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 0.918918919 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
-        img.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__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-[0%] w-[70%] overflow-hidden rounded-tl-lg", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1.9 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
-        img.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__ */ jsxRuntime.jsx("div", { className: "absolute right-[5%] bottom-0 w-[40%] overflow-hidden rounded-tl-lg rounded-tr-lg shadow-md", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 0.776119403 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
-        img.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__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "relative min-h-[350px] md:min-h-[400px] lg:min-h-[450px]",
+          imagesClassName
+        ),
+        children: [
+          images[0] && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: images[0].src,
+              alt: images[0].alt,
+              className: cn("h-full w-full object-cover", images[0].className),
+              optixFlowConfig
+            }
+          ) }),
+          images[1] && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: images[1].src,
+              alt: images[1].alt,
+              className: cn("h-full w-full object-cover", images[1].className),
+              optixFlowConfig
+            }
+          ) }),
+          images[2] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-[50%] top-[40%] md:top-[10%] z-30 aspect-3/4 w-[45%] overflow-hidden rounded-lg shadow-2xl md:w-[40%]", children: /* @__PURE__ */ jsxRuntime.jsx(
+            img.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__ */ jsxRuntime.jsx(
     Section,
@@ -57276,13 +57387,48 @@ function HeroCustomerSupportLayered({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("relative border-b pt-10", getBorderColor(background, "muted"), className),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-2 md:gap-4 lg:grid-cols-2", children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: cn("font-mono text-[clamp(0.875rem,0.875vw,1rem)]", getTextColor(background, "muted"), taglineClassName), children: tagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: taglineClassName, children: tagline })),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: cn("text-[clamp(1.125rem,1.125vw,1.4rem)] leading-normal", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-        ] }),
+      patternClassName,
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-4 md:gap-20 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex w-full max-w-125 flex-col gap-9",
+              contentClassName
+            ),
+            children: [
+              tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: tagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: taglineClassName, children: tagline })),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-5xl md:text-6xl lg:text-7xl font-semibold text-balance leading-snug",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-2xl md:text-3xl lg:text-4xl font-semibold text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn("leading-normal text-lg", descriptionClassName),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderImages })
       ] }) })
     }
@@ -57295,51 +57441,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 = React52.useMemo(() => {
     if (layeredImagesSlot) return layeredImagesSlot;
     if (!layeredImages) return null;
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "absolute right-0 bottom-0 w-[85%] overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 0.918918919 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
-        img.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__ */ jsxRuntime.jsx("div", { className: "absolute right-0 bottom-0 w-[93%] overflow-hidden rounded-tl-lg shadow-md", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1.381308411 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: layeredImages.foregroundImage.src,
-          alt: layeredImages.foregroundImage.alt,
-          className: cn("block size-full object-cover object-center", layeredImages.foregroundImage.className),
-          optixFlowConfig
-        }
-      ) }) })
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "relative min-h-[350px] md:min-h-[400px] lg:min-h-[450px]",
+          imagesClassName
+        ),
+        children: [
+          layeredImages.backgroundImage && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: layeredImages.backgroundImage.src,
+              alt: layeredImages.backgroundImage.alt,
+              className: cn(
+                "h-full w-full object-cover",
+                layeredImages.backgroundImage.className
+              ),
+              optixFlowConfig
+            }
+          ) }),
+          layeredImages.foregroundImage && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            img.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__ */ jsxRuntime.jsx(
     Section,
     {
-      className: cn("relative border-b bg-background", getBorderColor(background, "muted"), className),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container pt-10", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-2 md:gap-4 lg:grid-cols-2", children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: cn("font-mono text-[clamp(0.875rem,0.875vw,1rem)]", getTextColor(background, "muted")), children: subtitle }) : subtitle),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: cn("text-[clamp(1.125rem,1.125vw,1.4rem)] leading-normal", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-        ] }),
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      patternClassName,
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-4 md:gap-20 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex w-full max-w-125 flex-col gap-9",
+              contentClassName
+            ),
+            children: [
+              subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: subtitle }) : subtitle),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-5xl md:text-6xl lg:text-7xl font-semibold text-balance leading-snug",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-2xl md:text-3xl lg:text-4xl font-semibold text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn("leading-normal text-lg", descriptionClassName),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderLayeredImages })
       ] }) })
     }
@@ -57354,11 +57555,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,
@@ -57370,7 +57572,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__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -57390,58 +57599,81 @@ function HeroConversationIntelligence({
   const renderImage = React52.useMemo(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto w-full max-w-325", imageClassName), children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1.818181818 / 1, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex size-full flex-col justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        AspectRatio,
-        {
-          ratio: 3.714285714 / 1,
-          className: "w-full rounded-xl bg-[linear-gradient(transparent,var(--color-muted))]"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        AspectRatio,
-        {
-          ratio: 3.714285714 / 1,
-          className: "w-full rounded-xl bg-[linear-gradient(var(--color-muted),transparent)]"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1.594405594 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: image.src,
-          alt: image.alt,
-          className: cn("object-centers size-full object-cover", image.className),
-          optixFlowConfig
-        }
-      ) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-[50%] left-1/2 z-0 w-[60%] -translate-x-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(
-        AspectRatio,
-        {
-          ratio: 1,
-          className: "bg-[radial-gradient(closest-side,var(--color-accent),transparent)]"
-        }
-      ) })
-    ] }) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "relative flex size-full flex-col justify-between",
+          imageClassName
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          img.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__ */ jsxRuntime.jsx(
     Section,
     {
-      className: cn("bg-background py-12 font-sans md:py-20", className),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-24", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative z-10 mx-auto flex max-w-220 flex-col gap-7", contentClassName), children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: cn("text-center text-xl leading-normal", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-center gap-5", actionsClassName), children: renderActions })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderImage })
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      patternClassName,
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-8 md:gap-24", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "relative z-10 mx-auto flex max-w-220 flex-col gap-7",
+              contentClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-center text-xl leading-normal text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-col md:flex-row items-center justify-center gap-4",
+                    actionsClassName
+                  ),
+                  children: renderActions
+                }
+              )
+            ]
+          }
+        ) }),
+        renderImage
       ] }) })
     }
   );
@@ -57788,37 +58020,33 @@ function HeroMobileAppDownload({
   badgeIcon,
   badgeSlot,
   heading,
-  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,
+  description,
   descriptionClassName,
   imageClassName,
   optixFlowConfig
 }) {
   const renderBadge = React52.useMemo(() => {
     if (badgeSlot) return badgeSlot;
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon, size: 16 }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: "px-4 py-1", children: [
+      badgeIcon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: badgeText })
     ] });
   }, [badgeSlot, badgeIcon, badgeText]);
@@ -57826,12 +58054,18 @@ function HeroMobileAppDownload({
     if (storeActionsSlot) return storeActionsSlot;
     if (!storeActions || storeActions.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
         Pressable,
         {
           asButton: true,
-          className: actionClassName,
+          className: cn("h-fit", actionClassName),
           ...pressableProps,
           children: [
             storeIcon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: storeIcon, size: 20 }),
@@ -57847,9 +58081,18 @@ function HeroMobileAppDownload({
   }, [storeActionsSlot, storeActions]);
   const renderRating = React52.useMemo(() => {
     if (ratingSlot) return ratingSlot;
+    if (!ratingValue || !ratingLabel || !starCount) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 pt-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: [...Array(starCount)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/star", size: 16, className: cn("fill-current", getAccentColor(background)) }, i)) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("text-sm", getTextColor(background, "muted")), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: [...Array(starCount)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        DynamicIcon,
+        {
+          name: "lucide/star",
+          size: 16,
+          className: "fill-current"
+        },
+        i
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm", children: [
         ratingValue,
         " ",
         ratingLabel
@@ -57859,33 +58102,65 @@ function HeroMobileAppDownload({
   const renderNotification = React52.useMemo(() => {
     if (notificationSlot) return notificationSlot;
     if (!notification) return null;
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-      notification.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-10 w-10 items-center justify-center rounded-full", notification.iconBgClass), children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: notification.icon, size: 20, className: notification.iconColorClass }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        notification.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold ", children: notification.title }),
-        notification.subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-xs", getTextColor(background, "muted")), children: notification.subtitle })
-      ] })
-    ] }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "absolute -right-8 top-1/4 w-48 rounded-2xl p-4 shadow-lg"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          notification.icon && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "flex h-10 w-10 items-center justify-center rounded-full",
+                notification.iconBgClass
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                DynamicIcon,
+                {
+                  name: notification.icon,
+                  size: 20,
+                  className: notification.iconColorClass
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            notification.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold ", children: notification.title }),
+            notification.subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs", children: notification.subtitle })
+          ] })
+        ] })
+      }
+    );
   }, [notificationSlot, notification]);
   const renderImage = React52.useMemo(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative flex justify-center", imageClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: image.src,
-          alt: image.alt,
-          className: cn("w-64 rounded-3xl shadow-2xl", image.className),
-          optixFlowConfig
-        }
-      ),
-      renderNotification
-    ] }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "w-full h-full relative flex justify-center",
+          imageClassName
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            img.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__ */ jsxRuntime.jsx(
     Section,
@@ -57894,12 +58169,31 @@ function HeroMobileAppDownload({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 grid-cols-1 md:grid-cols-2 md:gap-20", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
           renderBadge,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderStoreActions,
           renderRating
         ] }),
@@ -58327,11 +58621,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,
@@ -58347,7 +58641,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
         }
       ) }),
@@ -58361,7 +58658,14 @@ function HeroPortfolioCreative({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -58385,7 +58689,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__ */ jsxRuntime.jsx(DynamicIcon, { name: link.iconName, size: 20 }))
       },
       index
@@ -58401,7 +58709,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
           }
         ) }),
@@ -58410,7 +58721,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
           }
         ) })
@@ -58421,7 +58735,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
           }
         ) }),
@@ -58430,13 +58747,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__ */ jsxRuntime.jsx(
     Section,
     {
@@ -58448,8 +58773,36 @@ function HeroPortfolioCreative({
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
           renderProfile,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          )),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-lg",
+                getTextColor(background, "muted"),
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderActions,
           renderSocialLinks
         ] }),
@@ -76122,35 +76475,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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: icon, size: 14 }),
-        label
-      ]
-    }
-  );
+  const { label, icon } = config[status];
+  return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: cn("items-center gap-1.5", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: icon, size: 14 }),
+    label
+  ] });
 };
 function ProcessRoadmapTimeline({
   heading,
@@ -76167,13 +76507,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 = React52.useMemo(() => {
     if (milestonesSlot) return milestonesSlot;
     if (!milestones || milestones.length === 0) return null;
@@ -76197,9 +76537,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
                   ),
@@ -76212,13 +76550,19 @@ function ProcessRoadmapTimeline({
                           index % 2 === 0 ? "justify-end" : "justify-start"
                         ),
                         children: [
-                          milestone.date && (typeof milestone.date === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-medium", getTextColor(background, "muted")), children: milestone.date }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm font-medium", getTextColor(background, "muted")), children: milestone.date })),
-                          /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: milestone.status, background })
+                          milestone.date && (typeof milestone.date === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-medium"), children: milestone.date }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm font-medium"), children: milestone.date })),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            StatusBadge,
+                            {
+                              status: milestone.status,
+                              background
+                            }
+                          )
                         ]
                       }
                     ),
                     milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-xl font-semibold tracking-tight", children: milestone.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-xl font-semibold tracking-tight", children: milestone.title })),
-                    milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4", getTextColor(background, "muted")), children: milestone.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", getTextColor(background, "muted")), children: milestone.description })),
+                    milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4", children: milestone.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: milestone.description })),
                     milestone.features?.length ? /* @__PURE__ */ jsxRuntime.jsx(
                       "div",
                       {
@@ -76230,9 +76574,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
                           },
@@ -76245,39 +76587,35 @@ function ProcessRoadmapTimeline({
               )
             }
           ),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check", size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: index + 1 })
-            }
-          ),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" })
         ]
       },
       index
     )) });
-  }, [milestonesSlot, milestones, background, milestoneCardClassName, milestoneNodeClassName]);
+  }, [
+    milestonesSlot,
+    milestones,
+    background,
+    milestoneCardClassName,
+    milestoneNodeClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
       spacing,
-      className,
       pattern,
       patternOpacity,
+      patternClassName,
+      className,
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: contentClassName, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
           resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsxRuntime.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
@@ -76287,8 +76625,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