@opensite/ui 1.7.0 → 1.7.2

package/dist/hero-centered-gradient-cta.js

@@ -5,6 +5,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
 
 // components/blocks/hero/hero-centered-gradient-cta.tsx
 function cn(...inputs) {
@@ -803,6 +804,38 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
 function HeroCenteredGradientCta({
   badge,
   badgeIcon,
@@ -814,7 +847,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,
@@ -829,8 +862,15 @@ function HeroCenteredGradientCta({
   const renderActions = 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__ */ 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__ */ jsx(
         Pressable,
         {
@@ -839,51 +879,94 @@ function HeroCenteredGradientCta({
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
             icon,
-            label,
+            /* @__PURE__ */ jsx("span", { children: label }),
             iconAfter
           ] })
         },
         index
       );
-    });
+    }) });
   }, [actionsSlot, actions]);
   const renderFeatures = useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
-    return features.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", feature.className), children: [
-      feature.icon,
-      /* @__PURE__ */ jsx("span", { children: feature.title })
-    ] }, index));
+    return features.map((feature, index) => /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        href: feature.href,
+        className: cn("flex items-center gap-2", feature.className),
+        children: [
+          feature.icon,
+          /* @__PURE__ */ jsx("span", { children: feature.title })
+        ]
+      },
+      index
+    ));
   }, [featuresSlot, features]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "relative z-10 flex flex-col items-center text-center", children: [
-          badge && /* @__PURE__ */ 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__ */ jsx("span", { children: badge }) : badge
-          ] }),
-          (heading || headingHighlight) && (typeof heading === "string" ? /* @__PURE__ */ 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__ */ jsx("div", { className: headingClassName, children: heading }) : headingHighlight ? /* @__PURE__ */ 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__ */ 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__ */ jsx("p", { className: cn("mt-6 max-w-2xl text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-10 flex flex-col gap-4 sm:flex-row", actionsClassName), children: renderActions }),
-          (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-16 flex items-center gap-8 text-sm text-muted-foreground", featuresClassName), children: renderFeatures })
-        ] })
-      ]
+      children: /* @__PURE__ */ jsxs("div", { className: "relative gap-6 z-10 flex flex-col items-center text-center", children: [
+        badge && /* @__PURE__ */ jsxs(Badge, { className: "px-3", children: [
+          badgeIcon,
+          typeof badge === "string" ? /* @__PURE__ */ jsx("span", { children: badge }) : badge
+        ] }),
+        (heading || headingHighlight) && (typeof heading === "string" ? /* @__PURE__ */ 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__ */ jsx("div", { className: headingClassName, children: heading }) : headingHighlight ? /* @__PURE__ */ 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__ */ 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__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "max-w-full md:max-w-md text-md md:text-xl text-balance",
+              descriptionClassName
+            ),
+            children: description
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ 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__ */ 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
+          }
+        )
+      ] })
     }
   );
 }

package/dist/hero-conversion-video-play.cjs

@@ -1163,7 +1163,7 @@ function HeroConversionVideoPlay({
   description,
   primaryAction,
   videoButtonLabel = "Play Video",
-  videoUrl = "https://www.youtube.com/embed/your-video-id",
+  videoUrl,
   videoDialogTitle = "Presentation Video",
   actionsSlot,
   image,
@@ -1172,7 +1172,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,
@@ -1219,7 +1219,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 })
           ]
         }
@@ -1272,7 +1272,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
@@ -1295,7 +1295,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,
               {

package/dist/hero-conversion-video-play.js

@@ -1136,7 +1136,7 @@ function HeroConversionVideoPlay({
   description,
   primaryAction,
   videoButtonLabel = "Play Video",
-  videoUrl = "https://www.youtube.com/embed/your-video-id",
+  videoUrl,
   videoDialogTitle = "Presentation Video",
   actionsSlot,
   image,
@@ -1145,7 +1145,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,
@@ -1192,7 +1192,7 @@ function HeroConversionVideoPlay({
           asButton: true,
           variant: "link",
           children: [
-            /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/play" }) }),
+            /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 rounded-full bg-primary text-primary-foreground justify-center items-center", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/play" }) }),
             /* @__PURE__ */ jsx("div", { children: videoButtonLabel })
           ]
         }
@@ -1245,7 +1245,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
@@ -1268,7 +1268,7 @@ function HeroConversionVideoPlay({
             ) }) }) }) : null })
           ] }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-16 py-20", children: [
-            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-xl font-medium "), children: logosTagline }) : logosTagline),
+            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center font-medium "), children: logosTagline }) : logosTagline),
             logosSlot ? logosSlot : logos && logos.length > 0 ? /* @__PURE__ */ jsx(
               Carousel,
               {

package/dist/hero-design-showcase-logos.cjs

@@ -836,7 +836,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,
@@ -856,7 +856,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) => {
@@ -889,7 +889,7 @@ function HeroDesignShowcaseLogos({
   const renderLogos = React.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",
@@ -906,7 +906,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

package/dist/hero-design-showcase-logos.js

@@ -815,7 +815,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,
@@ -835,7 +835,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) => {
@@ -868,7 +868,7 @@ function HeroDesignShowcaseLogos({
   const renderLogos = useMemo(() => {
     if (logosSlot) return logosSlot;
     if (!logos || logos.length === 0) return null;
-    return /* @__PURE__ */ jsxs("div", { className: "py-10 md:py-16", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "py-0 md:py-16", children: [
       logosLabel && (typeof logosLabel === "string" ? /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-foreground/60", children: logosLabel }) : /* @__PURE__ */ jsx("div", { className: "text-center text-sm text-foreground/60", children: logosLabel })),
       /* @__PURE__ */ jsx(
         "div",
@@ -885,7 +885,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

package/dist/hero-grid-pattern-solutions.cjs

@@ -975,7 +975,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,
@@ -1010,9 +1010,9 @@ function HeroGridPatternSolutions({
   const renderBadge = React.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 = React.useMemo(() => {
@@ -1105,7 +1105,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",

package/dist/hero-grid-pattern-solutions.js

@@ -954,7 +954,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,
@@ -989,9 +989,9 @@ function HeroGridPatternSolutions({
   const renderBadge = useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badgeText) return null;
-    return /* @__PURE__ */ jsx(Pressable, { href: badgeHref, children: /* @__PURE__ */ jsxs(Badge, { className: "px-2", children: [
+    return /* @__PURE__ */ jsx(Pressable, { href: badgeHref, children: /* @__PURE__ */ jsxs(Badge, { className: "px-4", children: [
       badgeText,
-      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right" })
+      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 16 })
     ] }) });
   }, [badgeSlot, badgeHref, badgeText]);
   const renderActions = useMemo(() => {
@@ -1084,7 +1084,7 @@ function HeroGridPatternSolutions({
       containerClassName,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl", contentClassName), children: [
+          /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center", contentClassName), children: [
             renderBadge,
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
               "h1",

package/dist/hero-hiring-animated-text.cjs

@@ -835,7 +835,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,
@@ -845,32 +845,60 @@ function HeroHiringAnimatedText({
   descriptionClassName,
   actionsClassName
 }) {
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const cycleText = React.useCallback(() => {
+    if (!animatedTexts || animatedTexts.length <= 1) return;
+    setActiveIndex((prev) => (prev + 1) % animatedTexts.length);
+  }, [animatedTexts]);
+  React.useEffect(() => {
+    if (!animatedTexts || animatedTexts.length <= 1) return;
+    const interval = setInterval(cycleText, 2e3);
+    return () => clearInterval(interval);
+  }, [animatedTexts, cycleText]);
   const renderHeading = React.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 = React.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,
         {
@@ -890,7 +918,14 @@ function HeroHiringAnimatedText({
   const renderScrollAction = React.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 }),
@@ -905,21 +940,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
+              ] })
+            ] })
+          ]
+        }
+      ) })
     }
   );
 }