@opensite/ui 1.7.0 → 1.7.2

package/dist/registry.cjs

@@ -51912,7 +51912,7 @@ function HeroSplitSpiralShapes({
               optixFlowConfig
             }
           ) }) }),
-          images[1] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-lg shadow-xl md:absolute md:top-[12%] md:right-[5%] md:w-[35%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-square", children: /* @__PURE__ */ jsxRuntime.jsx(
+          images[1] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-lg shadow-xl md:absolute md:top-[12%] md:right-[5%] md:w-[35%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-5/6", children: /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
             {
               src: images[1].src,
@@ -51924,7 +51924,7 @@ function HeroSplitSpiralShapes({
               optixFlowConfig
             }
           ) }) }),
-          images[2] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-lg shadow-xl md:absolute md:right-[10%] md:bottom-[15%] md:w-[55%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsxRuntime.jsx(
+          images[2] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-lg shadow-xl md:absolute md:right-[10%] md:bottom-[15%] md:w-[55%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-5/6", children: /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
             {
               src: images[2].src,
@@ -53217,7 +53217,7 @@ function HeroPremiumSplitAvatars({
   image,
   imageSlot,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
@@ -53704,7 +53704,7 @@ function HeroTaskTimerAnimated({
   images,
   imagesSlot,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
@@ -54226,7 +54226,7 @@ function HeroGridPatternSolutions({
   images,
   imagesSlot,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
@@ -54261,9 +54261,9 @@ function HeroGridPatternSolutions({
   const renderBadge = React52.useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badgeText) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: badgeHref, children: /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: "px-2", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: badgeHref, children: /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: "px-4", children: [
       badgeText,
-      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right" })
+      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 16 })
     ] }) });
   }, [badgeSlot, badgeHref, badgeText]);
   const renderActions = React52.useMemo(() => {
@@ -54356,7 +54356,7 @@ function HeroGridPatternSolutions({
       containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl", contentClassName), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center", contentClassName), children: [
             renderBadge,
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
               "h1",
@@ -54498,7 +54498,7 @@ function HeroBillingPlatformLogos({
   logos,
   logosSlot,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
@@ -54572,15 +54572,15 @@ function HeroBillingPlatformLogos({
               "div",
               {
                 className: cn(
-                  "flex flex-col items-center gap-4 lg:flex-row",
+                  "flex flex-col items-start md:items-center gap-4 lg:flex-row",
                   actionsClassName
                 ),
                 children: renderActions
               }
             ) })
           ] }) }),
-          imagesSlot ? imagesSlot : mainImage ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mr-auto ml-auto aspect-[1.28581291/1] w-full max-w-149 lg:mr-0 lg:ml-auto", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative mx-auto aspect-[1.020365896/1] h-full w-[79.35%] max-w-118.25 overflow-hidden rounded-3xl", children: /* @__PURE__ */ jsxRuntime.jsx(
+          imagesSlot ? imagesSlot : mainImage ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mr-auto ml-auto md:aspect-[1.28581291/1] w-full max-w-full md:max-w-149 lg:mr-0 lg:ml-auto", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative mx-auto md:aspect-[1.020365896/1] h-full w-full md:w-[79.35%] max-w-full md:max-w-118.25 overflow-hidden rounded-3xl", children: /* @__PURE__ */ jsxRuntime.jsx(
               img.Img,
               {
                 src: mainImage.src,
@@ -54634,7 +54634,7 @@ function HeroBillingPlatformLogos({
           "div",
           {
             className: cn(
-              "flex flex-col items-center justify-center gap-8 pt-28",
+              "flex flex-col items-center justify-center gap-8 pt-8 md:pt-28",
               logosClassName
             ),
             children: [
@@ -54906,7 +54906,7 @@ function HeroConversionVideoPlay({
   description,
   primaryAction,
   videoButtonLabel = "Play Video",
-  videoUrl = "https://www.youtube.com/embed/your-video-id",
+  videoUrl,
   videoDialogTitle = "Presentation Video",
   actionsSlot,
   image,
@@ -54915,7 +54915,7 @@ function HeroConversionVideoPlay({
   logos,
   logosSlot,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
@@ -54962,7 +54962,7 @@ function HeroConversionVideoPlay({
           asButton: true,
           variant: "link",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/play" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 rounded-full bg-primary text-primary-foreground justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/play" }) }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { children: videoButtonLabel })
           ]
         }
@@ -55015,7 +55015,7 @@ function HeroConversionVideoPlay({
                     "div",
                     {
                       className: cn(
-                        "flex flex-wrap items-center justify-center gap-8",
+                        "flex flex-wrap items-center justify-center gap-4",
                         actionsClassName
                       ),
                       children: renderActions
@@ -55038,7 +55038,7 @@ function HeroConversionVideoPlay({
             ) }) }) }) : null })
           ] }) }),
           /* @__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 "), children: logosTagline }) : logosTagline),
+            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center font-medium "), children: logosTagline }) : logosTagline),
             logosSlot ? logosSlot : logos && logos.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
               Carousel,
               {
@@ -55080,7 +55080,7 @@ function HeroDesignShowcaseLogos({
   showcaseImage,
   showcaseSlot,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
@@ -55100,7 +55100,7 @@ function HeroDesignShowcaseLogos({
       "div",
       {
         className: cn(
-          "mt-6 md:mt-12 flex items-center justify-center gap-3",
+          "mt-6 md:mt-12 flex flex-col md:flex-row items-center justify-center gap-4",
           actionsClassName
         ),
         children: actions.map((action, index) => {
@@ -55133,7 +55133,7 @@ function HeroDesignShowcaseLogos({
   const renderLogos = React52.useMemo(() => {
     if (logosSlot) return logosSlot;
     if (!logos || logos.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-10 md:py-16", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-0 md:py-16", children: [
       logosLabel && (typeof logosLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-foreground/60", children: logosLabel }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-sm text-foreground/60", children: logosLabel })),
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
@@ -55150,7 +55150,7 @@ function HeroDesignShowcaseLogos({
                 src: logoSrc,
                 alt: logo.alt,
                 className: cn(
-                  "block h-3.5 w-auto opacity-50 md:h-5",
+                  "block w-auto opacity-50 h-5 object-contain",
                   logo.className
                 ),
                 optixFlowConfig
@@ -55337,7 +55337,7 @@ function HeroProductivityLauncherVideo({
   const renderActions = React52.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-4", children: actions.map((action, index) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col md:flex-row items-center justify-center gap-4", children: actions.map((action, index) => {
       const {
         label,
         icon,
@@ -55395,8 +55395,8 @@ function HeroProductivityLauncherVideo({
       className,
       containerClassName,
       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: cn("relative z-20 max-w-204.5", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center pb-8", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-8 pb-16 pt-16", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-100 sm:max-w-135", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
               "h1",
               {
@@ -55448,7 +55448,7 @@ function HeroHiringAnimatedText({
   scrollActionSlot,
   backgroundImage,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
@@ -55458,32 +55458,60 @@ function HeroHiringAnimatedText({
   descriptionClassName,
   actionsClassName
 }) {
+  const [activeIndex, setActiveIndex] = React52.useState(0);
+  const cycleText = React52.useCallback(() => {
+    if (!animatedTexts || animatedTexts.length <= 1) return;
+    setActiveIndex((prev) => (prev + 1) % animatedTexts.length);
+  }, [animatedTexts]);
+  React52.useEffect(() => {
+    if (!animatedTexts || animatedTexts.length <= 1) return;
+    const interval = setInterval(cycleText, 2e3);
+    return () => clearInterval(interval);
+  }, [animatedTexts, cycleText]);
   const renderHeading = React52.useMemo(() => {
     if (headingSlot) return headingSlot;
-    return /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: cn("text-4xl leading-9 font-bold lg:text-5xl lg:leading-12! xl:text-7xl xl:leading-22!", headingClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: headingPrefix }),
-      animatedTexts && animatedTexts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-[calc(2.25rem*3)] md:h-9 lg:h-12 xl:h-22", children: animatedTexts.map((text, index) => /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: cn(
-            "absolute top-0 left-0 will-change-[opacity]",
-            index === 0 ? `animate-[show-text_${animatedTexts.length * 2}s_ease-in-out_infinite_0s]` : `animate-[show-text_${animatedTexts.length * 2}s_ease-in-out_infinite_${index * 2}s] opacity-0`
-          ),
-          style: {
-            animation: `show-text ${animatedTexts.length * 2}s ease-in-out infinite ${index * 2}s`,
-            opacity: index === 0 ? 1 : 0
-          },
-          children: text
-        },
-        index
-      )) })
-    ] });
-  }, [headingSlot, headingPrefix, animatedTexts, headingClassName]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "h1",
+      {
+        className: cn(
+          "text-4xl leading-9 font-bold lg:text-5xl lg:leading-12! xl:text-7xl xl:leading-22! text-white text-shadow-xl",
+          headingClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: headingPrefix }),
+          animatedTexts && animatedTexts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-9 lg:h-12 xl:h-22", children: animatedTexts.map((text, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute top-0 left-0 text-white transition-opacity duration-1000 ease-in-out",
+              style: {
+                opacity: index === activeIndex ? 1 : 0
+              },
+              children: text
+            },
+            index
+          )) })
+        ]
+      }
+    );
+  }, [
+    headingSlot,
+    headingPrefix,
+    animatedTexts,
+    headingClassName,
+    activeIndex
+  ]);
   const renderActions = React52.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap items-center gap-5", actionsClassName), children: 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,
         {
@@ -55503,7 +55531,14 @@ function HeroHiringAnimatedText({
   const renderScrollAction = React52.useMemo(() => {
     if (scrollActionSlot) return scrollActionSlot;
     if (!scrollAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = scrollAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = scrollAction;
     return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       icon,
       /* @__PURE__ */ jsxRuntime.jsx("div", { children: label }),
@@ -55518,21 +55553,39 @@ function HeroHiringAnimatedText({
       pattern,
       patternOpacity,
       className: cn(
-        "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-['']",
+        "relative flex items-center justify-center 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: "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 })),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-5", children: [
-            renderActions,
-            renderScrollAction
-          ] })
-        ] })
-      ] }) })
+      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 max-w-full md:max-w-md",
+            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 text-white text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [
+                renderActions,
+                renderScrollAction
+              ] })
+            ] })
+          ]
+        }
+      ) })
     }
   );
 }
@@ -55627,7 +55680,7 @@ function HeroCenteredGradientCta({
   features,
   featuresSlot,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
@@ -55642,8 +55695,15 @@ function HeroCenteredGradientCta({
   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: "flex flex-col items-start mt-6 md:mt-8 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,
         {
@@ -55652,51 +55712,94 @@ function HeroCenteredGradientCta({
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             icon,
-            label,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
             iconAfter
           ] })
         },
         index
       );
-    });
+    }) });
   }, [actionsSlot, actions]);
   const renderFeatures = React52.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
-    return features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", feature.className), children: [
-      feature.icon,
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: feature.title })
-    ] }, index));
+    return features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      Pressable,
+      {
+        href: feature.href,
+        className: cn("flex items-center gap-2", feature.className),
+        children: [
+          feature.icon,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: feature.title })
+        ]
+      },
+      index
+    ));
   }, [featuresSlot, features]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
       spacing,
       pattern,
       patternOpacity,
-      className: cn("relative flex items-center justify-center min-h-screen overflow-hidden bg-background py-32", className),
+      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: "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 bg-accent px-4 py-2 text-sm",
-            badgeClassName
-          ), children: [
-            badgeIcon,
-            typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: badge }) : badge
-          ] }),
-          (heading || headingHighlight) && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-8 max-w-4xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl", headingClassName), children: heading }) : heading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading }) : headingHighlight ? /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: cn("mt-8 max-w-4xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl", headingClassName), children: [
-            "Build something",
-            " ",
-            /* @__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 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 text-muted-foreground", featuresClassName), children: renderFeatures })
-        ] })
-      ]
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative gap-6 z-10 flex flex-col items-center text-center", children: [
+        badge && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: "px-3", children: [
+          badgeIcon,
+          typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: badge }) : badge
+        ] }),
+        (heading || headingHighlight) && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: cn(
+              "max-w-full md:max-w-md text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl text-balance",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) : heading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading }) : headingHighlight ? /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: cn(
+              "max-w-full md:max-w-md text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl text-balance",
+              headingClassName
+            ),
+            children: /* @__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(
+              "max-w-full md:max-w-md text-md md:text-xl text-balance",
+              descriptionClassName
+            ),
+            children: description
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-0 md:mt-6 flex flex-col gap-4 sm:flex-row",
+              actionsClassName
+            ),
+            children: renderActions
+          }
+        ),
+        (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-4 md:mt-6 flex flex-col md:flex-row items-center gap-4 md:gap-8 text-sm",
+              featuresClassName
+            ),
+            children: renderFeatures
+          }
+        )
+      ] })
     }
   );
 }
@@ -55910,29 +56013,21 @@ function HeroTestimonialImageGrid({
     if (testimonialSlot) return testimonialSlot;
     if (!testimonial || !testimonial.avatars) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex -space-x-2", children: testimonial.avatars.map((avatar, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-        Avatar,
-        {
-          className: "size-10 border-2 border-border",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatar.image, alt: "" }),
-            /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: avatar.fallback })
-          ]
-        },
-        index
-      )) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex -space-x-2", children: testimonial.avatars.map((avatar, index) => /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-10 border-2 border-border", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatar.image, alt: testimonial.author }),
+        /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: avatar.fallback })
+      ] }, index)) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mb-1 text-sm text-foreground/60 italic", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mb-1 text-sm  italic", children: [
           '"',
           testimonial.quote,
           '"'
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-medium text-foreground/60", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-medium ", children: [
           testimonial.author,
           ", ",
           testimonial.role,
-          " @",
-          testimonial.company
+          testimonial.company?.length ? ` | ${testimonial.company}` : ""
         ] })
       ] })
     ] });
@@ -55941,44 +56036,22 @@ function HeroTestimonialImageGrid({
     if (imagesSlot) return imagesSlot;
     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: "overflow-hidden rounded-[5.2%] border border-border bg-card", children: /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: images[0].src,
-          alt: images[0].alt || "",
-          className: "object-fit h-full w-full object-center",
-          optixFlowConfig
-        }
-      ) }),
-      /* @__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,
-          alt: images[1].alt || "",
-          className: "size-full object-cover object-center",
-          optixFlowConfig
-        }
-      ) }) }) }),
-      /* @__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,
-          alt: images[2].alt || "",
-          className: "size-full object-cover object-center",
-          optixFlowConfig
-        }
-      ) }) }) }),
-      /* @__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,
-          alt: images[3].alt || "",
-          className: "absolute z-10 w-full rounded-[16%]",
-          optixFlowConfig
-        }
-      ) }) }) })
-    ] }) }) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-full md:max-w-200", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1 / 1, className: "h-full w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid h-full w-full grid-cols-2 grid-rows-2 gap-4", children: images.slice(0, 4).map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "overflow-hidden rounded-lg shadow-xl",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: image.src,
+            alt: image.alt || "",
+            className: "size-full object-cover object-center",
+            optixFlowConfig
+          }
+        )
+      },
+      index
+    )) }) }) }) });
   }, [imagesSlot, gridImages, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -55987,13 +56060,49 @@ function HeroTestimonialImageGrid({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("relative flex items-center justify-center py-12 md:py-20", className),
+      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 })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg leading-relaxed text-muted-foreground xl:text-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-lg leading-relaxed text-muted-foreground xl:text-2xl", descriptionClassName), children: description }))
+            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
+              }
+            )),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "text-lg leading-relaxed text-balance xl:text-2xl",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "text-lg leading-relaxed text-balance xl:text-2xl",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ))
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-6 lg:my-10", children: renderButton }),
           renderTestimonial
@@ -56153,34 +56262,34 @@ function HeroArchitectureFullscreen({
   actionSlot,
   backgroundImage,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "py-0 md:py-0",
   pattern,
   patternOpacity,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  containerClassName = "mx-0 min-h-screen h-full w-screen max-w-full relative z-10 px-0 sm:px-0 md:px-0 lg:px-0 flex items-end",
   taglineClassName,
   headingClassName,
-  descriptionClassName
+  descriptionClassName,
+  optixFlowConfig
 }) {
   const renderAction = React52.useMemo(() => {
     if (actionSlot) return actionSlot;
     if (!action) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Pressable,
-      {
-        asButton: true,
-        className: actionClassName,
-        ...pressableProps,
-        children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          icon,
-          typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "group-hover:underline", children: label }) : label,
-          iconAfter
-        ] })
-      }
-    );
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = action;
+    return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      icon,
+      typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "group-hover:underline", children: label }) : label,
+      iconAfter
+    ] }) });
   }, [actionSlot, action]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
       background,
@@ -56188,21 +56297,56 @@ function HeroArchitectureFullscreen({
       pattern,
       patternOpacity,
       className: cn(
-        "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-['']",
+        "relative flex min-h-screen min-w-screen items-center justify-center dark w-full overflow-hidden font-poppins",
         className
       ),
       containerClassName,
-      style: { backgroundImage: backgroundImage ? `url('${backgroundImage}')` : void 0 },
-      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 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 border-border pl-6 text-base text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+      children: [
+        backgroundImage && /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: backgroundImage,
+            alt: "",
+            className: "absolute inset-0 min-h-screen min-w-screen object-cover object-center brightness-50",
+            optixFlowConfig
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-20 h-full w-full max-w-340 p-8 md:p-24", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-end gap-6 md:gap-12", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+            tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "text-sm leading-none uppercase text-balance text-white text-shadow-xl",
+                  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 text-white text-balance text-shadow-xl",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading }))
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col justify-between gap-5 sm:flex-row sm:items-center", children: description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-base text-balance text-white text-shadow-xl",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: renderAction })
-        ] })
-      ] }) })
+        ] }) })
+      ]
     }
   );
 }
@@ -56749,7 +56893,7 @@ function HeroTherapyTestimonialGrid({
   testimonial,
   testimonialSlot,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
@@ -56762,8 +56906,15 @@ function HeroTherapyTestimonialGrid({
   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: "flex flex-col mt-6 md:mt-8 gap-4 sm:flex-row items-center", children: actions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -56772,28 +56923,31 @@ function HeroTherapyTestimonialGrid({
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             icon,
-            label,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
             iconAfter
           ] })
         },
         index
       );
-    });
+    }) });
   }, [actionsSlot, actions]);
   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: "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: [
+    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-6 md:p-8 md:flex-row md:items-start md:gap-7", 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,
         {
           src: testimonial.avatar.src,
           alt: testimonial.avatar.alt,
-          className: cn("h-full w-full object-cover object-center", testimonial.avatar.className),
+          className: cn(
+            "h-full w-full object-cover object-center",
+            testimonial.avatar.className
+          ),
           optixFlowConfig
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col justify-between gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col gap-2 justify-center", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-lg font-medium ", children: [
           '"',
           testimonial.quote,
@@ -56812,7 +56966,10 @@ function HeroTherapyTestimonialGrid({
         {
           src: images[0].src,
           alt: images[0].alt,
-          className: cn("block h-full w-full object-cover object-center", images[0].className),
+          className: cn(
+            "block h-full w-full object-cover object-center",
+            images[0].className
+          ),
           optixFlowConfig
         }
       ) }) }),
@@ -56821,7 +56978,10 @@ function HeroTherapyTestimonialGrid({
         {
           src: images[1].src,
           alt: images[1].alt,
-          className: cn("block h-full w-full object-cover object-center", images[1].className),
+          className: cn(
+            "block h-full w-full object-cover object-center",
+            images[1].className
+          ),
           optixFlowConfig
         }
       ) }) }),
@@ -56831,7 +56991,10 @@ function HeroTherapyTestimonialGrid({
         {
           src: images[2].src,
           alt: images[2].alt,
-          className: cn("h-full w-full object-cover object-center", images[2].className),
+          className: cn(
+            "h-full w-full object-cover object-center",
+            images[2].className
+          ),
           optixFlowConfig
         }
       ) }) })
@@ -56844,14 +57007,50 @@ function HeroTherapyTestimonialGrid({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("relative flex items-center justify-center bg-background py-12 font-sans md:py-20", className),
+      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 })),
-          renderActions
-        ] }),
+        /* @__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 text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-center text-lg md:text-xl",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              renderActions
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid w-full auto-cols-auto grid-cols-1 grid-rows-[auto_auto_auto] justify-center gap-5 md:grid-cols-2", children: renderImagesGrid })
       ] })
     }
@@ -77204,8 +77403,9 @@ function ProcessRoadmapTimeline({
       "div",
       {
         className: cn(
-          "relative flex items-start gap-8",
-          index % 2 === 0 ? "flex-row" : "flex-row-reverse",
+          "relative flex items-start gap-4 md:gap-8",
+          "flex-col md:flex-row",
+          index % 2 !== 0 && "md:flex-row-reverse",
           milestone.className
         ),
         children: [
@@ -77213,8 +77413,9 @@ function ProcessRoadmapTimeline({
             "div",
             {
               className: cn(
-                "flex-1",
-                index % 2 === 0 ? "text-right pr-8" : "text-left pl-8"
+                "w-full md:flex-1",
+                "text-left md:pr-0",
+                index % 2 === 0 ? "md:text-right md:pr-8" : "md:text-left md:pl-8"
               ),
               children: /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
@@ -77230,7 +77431,8 @@ function ProcessRoadmapTimeline({
                       {
                         className: cn(
                           "mb-3 flex items-center gap-3",
-                          index % 2 === 0 ? "justify-end" : "justify-start"
+                          "justify-start",
+                          index % 2 === 0 ? "md:justify-end" : "md:justify-start"
                         ),
                         children: [
                           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 })),
@@ -77251,7 +77453,8 @@ function ProcessRoadmapTimeline({
                       {
                         className: cn(
                           "flex flex-wrap gap-2",
-                          index % 2 === 0 ? "justify-end" : "justify-start"
+                          "justify-start",
+                          index % 2 === 0 ? "md:justify-end" : "md:justify-start"
                         ),
                         children: milestone.features.map((feature, fIndex) => /* @__PURE__ */ jsxRuntime.jsx(
                           "span",
@@ -77270,7 +77473,7 @@ function ProcessRoadmapTimeline({
               )
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:block md:flex-1" })
         ]
       },
       index
@@ -77320,7 +77523,7 @@ function ProcessRoadmapTimeline({
             "div",
             {
               className: cn(
-                "absolute left-1/2 top-0 bottom-0 w-px -translate-x-1/2 bg-border/50",
+                "absolute left-4 md:left-1/2 top-0 bottom-0 w-px md:-translate-x-1/2 bg-border/50",
                 timelineLineClassName
               )
             }