@opensite/ui 1.6.8 → 1.6.9

package/dist/registry.js

@@ -51678,7 +51678,14 @@ function HeroSpiralPatternCards({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col justify-center gap-2 sm:flex-row", children: actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -51698,35 +51705,53 @@ function HeroSpiralPatternCards({
   const renderImages = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mt-16 flex flex-col items-center justify-center lg:mt-32", imagesClassName), children: /* @__PURE__ */ jsxs("div", { className: "relative mx-auto aspect-square w-[95%] max-w-125 sm:w-full", children: [
-      images[0] && /* @__PURE__ */ 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__ */ jsx(
-        Img,
-        {
-          src: images[0].src,
-          alt: images[0].alt,
-          className: cn("h-full w-full object-cover", images[0].className),
-          optixFlowConfig
-        }
-      ) }),
-      images[1] && /* @__PURE__ */ jsx("div", { className: "absolute 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__ */ jsx(
-        Img,
-        {
-          src: images[1].src,
-          alt: images[1].alt,
-          className: cn("h-full w-full object-cover", images[1].className),
-          optixFlowConfig
-        }
-      ) }),
-      images[2] && /* @__PURE__ */ jsx("div", { className: "absolute 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__ */ jsx(
-        Img,
-        {
-          src: images[2].src,
-          alt: images[2].alt,
-          className: cn("h-full w-full object-cover", images[2].className),
-          optixFlowConfig
-        }
-      ) })
-    ] }) });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "mt-16 flex flex-col items-center justify-center lg:mt-32",
+          imagesClassName
+        ),
+        children: /* @__PURE__ */ jsxs("div", { className: "relative mx-auto aspect-square w-[95%] max-w-125 sm:w-full", children: [
+          images[0] && /* @__PURE__ */ 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__ */ jsx(
+            Img,
+            {
+              src: images[0].src,
+              alt: images[0].alt,
+              className: cn(
+                "h-full w-full object-cover",
+                images[0].className
+              ),
+              optixFlowConfig
+            }
+          ) }),
+          images[1] && /* @__PURE__ */ jsx("div", { className: "absolute 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__ */ jsx(
+            Img,
+            {
+              src: images[1].src,
+              alt: images[1].alt,
+              className: cn(
+                "h-full w-full object-cover",
+                images[1].className
+              ),
+              optixFlowConfig
+            }
+          ) }),
+          images[2] && /* @__PURE__ */ jsx("div", { className: "absolute 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__ */ jsx(
+            Img,
+            {
+              src: images[2].src,
+              alt: images[2].alt,
+              className: cn(
+                "h-full w-full object-cover",
+                images[2].className
+              ),
+              optixFlowConfig
+            }
+          ) })
+        ] })
+      }
+    );
   }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -51739,9 +51764,36 @@ function HeroSpiralPatternCards({
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center", children: [
-          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xs uppercase", children: badgeText }) : badgeText),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ 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__ */ 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__ */ jsx("p", { className: cn("mb-6 max-w-xl md:mb-12 lg:text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx(Badge, { children: badgeText }) : badgeText),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "my-3 text-2xl font-bold sm:text-4xl md:my-6 lg:text-5xl text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "my-3 text-2xl font-bold sm:text-4xl md:my-6 lg:text-5xl text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          )),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mb-6 max-w-xl md:mb-12 lg:text-xl text-balance",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }),
         renderImages
@@ -51773,7 +51825,14 @@ function HeroSplitSpiralShapes({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", children: actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -51794,30 +51853,39 @@ function HeroSplitSpiralShapes({
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("relative aspect-3/4", imagesClassName), children: [
-      images[0] && /* @__PURE__ */ jsx("div", { className: "absolute top-[10%] left-[8%] w-[38%] overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsx("div", { className: "aspect-5/6", children: /* @__PURE__ */ jsx(
+      images[0] && /* @__PURE__ */ jsx("div", { className: "absolute top-[10%] left-[8%] w-[38%] overflow-hidden rounded-lg shadow-xl", children: /* @__PURE__ */ jsx("div", { className: "aspect-5/6", children: /* @__PURE__ */ jsx(
         Img,
         {
           src: images[0].src,
           alt: images[0].alt,
-          className: cn("h-full w-full object-cover", images[0].className),
+          className: cn(
+            "h-full w-full object-cover",
+            images[0].className
+          ),
           optixFlowConfig
         }
       ) }) }),
-      images[1] && /* @__PURE__ */ jsx("div", { className: "absolute top-[20%] right-[12%] w-[20%] overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsx("div", { className: "aspect-square", children: /* @__PURE__ */ jsx(
+      images[1] && /* @__PURE__ */ jsx("div", { className: "absolute top-[20%] right-[12%] w-[20%] overflow-hidden rounded-lg shadow-xl", children: /* @__PURE__ */ jsx("div", { className: "aspect-square", children: /* @__PURE__ */ jsx(
         Img,
         {
           src: images[1].src,
           alt: images[1].alt,
-          className: cn("h-full w-full object-cover", images[1].className),
+          className: cn(
+            "h-full w-full object-cover",
+            images[1].className
+          ),
           optixFlowConfig
         }
       ) }) }),
-      images[2] && /* @__PURE__ */ jsx("div", { className: "absolute right-[24%] bottom-[24%] w-[38%] overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsx("div", { className: "aspect-5/6", children: /* @__PURE__ */ jsx(
+      images[2] && /* @__PURE__ */ jsx("div", { className: "absolute right-[24%] bottom-[24%] w-[38%] overflow-hidden rounded-lg shadow-xl", children: /* @__PURE__ */ jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsx(
         Img,
         {
           src: images[2].src,
           alt: images[2].alt,
-          className: cn("h-full w-full object-cover", images[2].className),
+          className: cn(
+            "h-full w-full object-cover",
+            images[2].className
+          ),
           optixFlowConfig
         }
       ) }) })
@@ -51833,12 +51901,48 @@ function HeroSplitSpiralShapes({
       className: cn("relative flex items-center justify-center", className),
       containerClassName,
       children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-8 lg:grid-cols-2", children: [
-        /* @__PURE__ */ 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__ */ jsx("p", { children: badgeText }) : badgeText),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty lg:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-8 max-w-xl lg:text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          renderActions
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col items-center text-center lg:mx-auto lg:items-start lg:px-0 lg:text-left",
+              contentClassName
+            ),
+            children: [
+              badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx(Badge, { children: badgeText }) : badgeText),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "my-6 text-4xl font-bold text-balance lg:text-6xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "my-6 text-4xl font-bold text-balance lg:text-6xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mb-8 max-w-xl lg:text-xl text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              renderActions
+            ]
+          }
+        ),
         renderImages
       ] }) })
     }
@@ -52222,20 +52326,69 @@ function HeroMarketplaceScatteredImages({
       tagline
     ] });
   }, [taglineSlot, taglineIcon, tagline]);
+  const columns = useMemo(() => {
+    if (!images || images.length === 0) return [[], [], []];
+    const cols = [[], [], []];
+    images.forEach((img, i) => {
+      cols[i % 3].push(img);
+    });
+    return cols;
+  }, [images]);
+  const heightPatterns = useMemo(
+    () => [
+      ["14rem", "20rem", "16rem", "22rem"],
+      ["20rem", "14rem", "22rem", "16rem"],
+      ["16rem", "22rem", "14rem", "20rem"]
+    ],
+    []
+  );
   const renderImages = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mx-auto mt-14 max-w-7xl overflow-hidden py-8", imagesClassName), children: /* @__PURE__ */ jsx("div", { className: "relative w-full", children: images.map((image, index) => /* @__PURE__ */ jsx(
-      Img,
-      {
-        src: image.src,
-        alt: image.alt,
-        className: image.className,
-        optixFlowConfig
-      },
-      index
-    )) }) });
-  }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
+    return /* @__PURE__ */ jsx("div", { className: cn("mx-auto mt-14 max-w-7xl overflow-hidden py-8", imagesClassName), children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 md:grid-cols-3", children: columns.map((colImages, colIndex) => /* @__PURE__ */ jsx("div", { className: "grid gap-3", children: colImages.map((image, imgIndex) => {
+      const height = heightPatterns[colIndex][imgIndex % heightPatterns[colIndex].length];
+      const direction = colIndex % 2 === 0 ? "up" : "down";
+      return /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: {
+            opacity: 0,
+            scale: 0.9,
+            y: direction === "up" ? 50 : -50
+          },
+          whileInView: {
+            opacity: 1,
+            scale: 1,
+            y: 0
+          },
+          transition: {
+            duration: 0.5,
+            delay: imgIndex * 0.1
+          },
+          viewport: { once: true },
+          className: cn(
+            "w-full overflow-hidden rounded-2xl",
+            getNestedCardBg(background)
+          ),
+          style: { height },
+          children: /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: image.src,
+              alt: image.alt,
+              className: cn(
+                "h-full w-full rounded-2xl object-cover",
+                image.className
+              ),
+              loading: "lazy",
+              optixFlowConfig
+            }
+          )
+        },
+        imgIndex
+      );
+    }) }, colIndex)) }) });
+  }, [imagesSlot, images, imagesClassName, optixFlowConfig, columns, heightPatterns, background]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -52323,7 +52476,7 @@ function HeroBadgeShadowOverlay({
             {
               href: announcementHref,
               className: cn(
-                "flex items-center gap-2 rounded-full px-2 py-1 text-sm bg-card text-card-foreground",
+                "flex items-center gap-2 rounded-full px-2 py-1 text-sm bg-card text-card-foreground shadow-md hover:shadow-xl transition-shadow duration-500",
                 announcementClassName
               ),
               children: [
@@ -52343,7 +52496,16 @@ function HeroBadgeShadowOverlay({
               children: heading
             }
           ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-lg text-white text-balance text-shadow-xl text-center",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }) }),
         backgroundImageUrl && /* @__PURE__ */ jsx(
@@ -52368,11 +52530,11 @@ function HeroVideoBackgroundDark({
   videoSrc,
   videoSlot,
   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 = "px-0 sm:px-0 md:px-0 lg:px-0 min-h-screen w-screen h-full max-w-screen",
   contentClassName,
   headingClassName,
   descriptionClassName
@@ -52381,7 +52543,14 @@ function HeroVideoBackgroundDark({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: "flex lg:justify-center", children: /* @__PURE__ */ jsx("div", { className: "flex min-w-fit flex-col gap-5 text-sm leading-[.96] whitespace-nowrap lg:flex-row lg:items-stretch", children: actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -52421,13 +52590,49 @@ function HeroVideoBackgroundDark({
       patternOpacity,
       className: cn("relative flex items-center justify-center", className),
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ 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__ */ jsx("span", { className: "text-xs text-muted-foreground", children: badgeText }) : badgeText),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-5xl font-bold lg:text-[4.2rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-5xl font-bold lg:text-[4.2rem]", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          renderActions
-        ] }),
+      children: /* @__PURE__ */ jsxs("div", { className: "min-h-screen h-full flex flex-col justify-center items-center", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative z-10 mx-auto flex size-full max-w-3xl flex-col justify-center gap-6 lg:items-center lg:text-center px-6",
+              contentClassName
+            ),
+            children: [
+              badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx(Badge, { children: badgeText }) : badgeText),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl font-bold md:text-5xl text-balance text-white text-shadow-xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl font-bold md:text-5xl text-balance text-white text-shadow-xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-lg text-balance text-white text-shadow-xl",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              renderActions
+            ]
+          }
+        ),
         renderVideo
       ] })
     }
@@ -52495,17 +52700,16 @@ function HeroGridPatternEfficiency({
 function HeroDashedBorderFeatures({
   badgeText,
   announcementText,
-  announcementHref = "#",
+  announcementHref,
   announcementSlot,
   heading,
   description,
   actions,
   actionsSlot,
-  demoAvatarSrc,
   features,
   featuresSlot,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "xl",
   pattern,
   patternOpacity,
   className,
@@ -52518,74 +52722,64 @@ function HeroDashedBorderFeatures({
 }) {
   const renderAnnouncement = useMemo(() => {
     if (announcementSlot) return announcementSlot;
-    return /* @__PURE__ */ jsxs(
+    if (!announcementText || !badgeText) return null;
+    return /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs(
       Pressable,
       {
         href: announcementHref,
-        className: "mx-auto mb-4 flex w-fit items-center gap-2 rounded-full px-4 py-2 text-sm bg-card",
+        className: cn(
+          "flex items-center gap-2 rounded-full px-2 py-1 text-sm bg-card text-card-foreground shadow-md hover:shadow-xl transition-shadow duration-500 w-fit"
+        ),
         children: [
-          /* @__PURE__ */ jsx(Badge, { children: badgeText }),
+          badgeText && /* @__PURE__ */ jsx(Badge, { children: badgeText }),
           announcementText,
-          /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
+          /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 16 })
         ]
       }
-    );
+    ) });
   }, [announcementSlot, announcementHref, badgeText, announcementText]);
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      actions.map((action, index) => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-        return /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            asButton: true,
-            className: actionClassName,
-            ...pressableProps,
-            children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-              icon,
-              label,
-              iconAfter
-            ] })
-          },
-          index
-        );
-      }),
-      /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ 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__ */ jsx(
         Pressable,
         {
-          href: "#",
           asButton: true,
-          variant: "outline",
-          size: "lg",
-          className: "w-full gap-2 sm:w-auto lg:mt-10",
-          children: [
-            /* @__PURE__ */ jsx(Avatar, { className: "size-8 rounded-full ring-1 ring-input", children: /* @__PURE__ */ jsx(
-              AvatarImage,
-              {
-                src: demoAvatarSrc,
-                alt: "placeholder"
-              }
-            ) }),
-            "Schedule a demo"
-          ]
-        }
-      )
-    ] });
-  }, [actionsSlot, actions, demoAvatarSrc]);
+          className: actionClassName,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
+    }) });
+  }, [actionsSlot, actions, actionsClassName]);
   const renderFeatures = useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
     return features.map((feature, index) => /* @__PURE__ */ jsxs(
-      "div",
+      Pressable,
       {
         className: cn(
           "flex items-center gap-6 border-t border-dashed p-4 font-medium md:justify-center lg:p-10 lg:text-lg",
-          index === 1 && "border-x"
+          index === 1 && "md:border-x",
+          index === 2 ? "border-b" : "md:border-b"
         ),
+        href: feature.href,
         children: [
-          /* @__PURE__ */ 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__ */ jsx(DynamicIcon, { name: feature.iconName || "lucide/check", size: 20 }) }),
+          /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-md text-sm lg:size-12 lg:text-base bg-card text-card-foreground", children: feature.icon ? feature.icon : feature.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: feature.iconName || "lucide/check", size: 20 }) : null }),
           feature.title
         ]
       },
@@ -52602,17 +52796,67 @@ function HeroDashedBorderFeatures({
       className: cn("relative flex items-center justify-center", className),
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsx("div", { className: cn("border-x border-t border-dashed px-4 py-20 md:px-16", contentClassName), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl", children: [
-          renderAnnouncement,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto mb-6 max-w-2xl text-center lg:text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          /* @__PURE__ */ jsx("div", { className: cn("flex flex-col justify-center gap-2 sm:flex-row", actionsClassName), children: renderActions })
-        ] }) }),
-        /* @__PURE__ */ jsxs("div", { className: cn("relative grid border-x border-dashed md:grid-cols-3", featuresClassName), children: [
-          /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/sparkle", size: 20, className: "absolute top-0 right-0 translate-x-2.5 -translate-y-2.5 fill-primary" }),
-          /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/sparkle", size: 20, className: "absolute top-0 left-0 -translate-x-2.5 -translate-y-2.5 fill-primary" }),
-          renderFeatures
-        ] })
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "border-x border-t border-dashed px-4 py-6 md:py-20 md:px-16",
+              contentClassName
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl", children: [
+              renderAnnouncement,
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mx-auto mb-6 max-w-2xl text-center lg:text-xl text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              renderActions
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative grid border-x border-dashed md:grid-cols-3",
+              featuresClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                DynamicIcon,
+                {
+                  name: "lucide/sparkle",
+                  size: 20,
+                  className: "absolute top-0 right-0 translate-x-2.5 -translate-y-2.5 fill-primary"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                DynamicIcon,
+                {
+                  name: "lucide/sparkle",
+                  size: 20,
+                  className: "absolute top-0 left-0 -translate-x-2.5 -translate-y-2.5 fill-primary"
+                }
+              ),
+              renderFeatures
+            ]
+          }
+        )
       ] })
     }
   );
@@ -52864,27 +53108,41 @@ function HeroPremiumSplitAvatars({
     return /* @__PURE__ */ jsxs("h1", { className: "text-4xl ", children: [
       brandName,
       " ",
-      brandSuffix && /* @__PURE__ */ jsx("span", { className: "bg-linear-to-tr from-foreground to-muted bg-clip-text text-transparent", children: brandSuffix })
+      brandSuffix && /* @__PURE__ */ jsx("span", { className: "pb-1 border-b-2", children: brandSuffix })
     ] });
   }, [brandSlot, brandName, brandSuffix]);
   const renderAction = useMemo(() => {
     if (actionSlot) return actionSlot;
     if (!action) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-    return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = action;
+    return /* @__PURE__ */ jsx("div", { className: "flex", children: /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
       icon,
       /* @__PURE__ */ jsx("span", { children: label }),
       iconAfter
-    ] }) });
+    ] }) }) });
   }, [actionSlot, action]);
   const renderAvatars = useMemo(() => {
     if (avatarsSlot) return avatarsSlot;
     if (!avatars || avatars.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3.5", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex -space-x-3", children: avatars.map((avatar, index) => /* @__PURE__ */ jsxs(Avatar, { className: "block size-11 min-h-11 min-w-11 rounded-full object-cover lg:size-11", children: [
-        /* @__PURE__ */ jsx(AvatarImage, { src: avatar.src }),
-        /* @__PURE__ */ jsx(AvatarFallback, { children: avatar.fallback })
-      ] }, index)) }),
+      /* @__PURE__ */ jsx("div", { className: "flex -space-x-3", children: avatars.map((avatar, index) => /* @__PURE__ */ jsxs(
+        Avatar,
+        {
+          className: "block size-11 min-h-11 min-w-11 rounded-full object-cover lg:size-11",
+          children: [
+            /* @__PURE__ */ jsx(AvatarImage, { src: avatar.src }),
+            /* @__PURE__ */ jsx(AvatarFallback, { children: avatar.fallback })
+          ]
+        },
+        index
+      )) }),
       socialProofText && (typeof socialProofText === "string" ? /* @__PURE__ */ jsx("span", { className: "text-xs lg:text-sm", children: socialProofText }) : socialProofText)
     ] });
   }, [avatarsSlot, avatars, socialProofText]);
@@ -52896,7 +53154,11 @@ function HeroPremiumSplitAvatars({
       {
         src: image.src,
         alt: image.alt,
-        className: cn("hidden h-screen w-1/2 object-cover lg:block", imageClassName, image.className),
+        className: cn(
+          "h-full w-full md:w-1/2 object-cover block rounded-xl shadow-xl",
+          imageClassName,
+          image.className
+        ),
         optixFlowConfig
       }
     );
@@ -52908,18 +53170,27 @@ function HeroPremiumSplitAvatars({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("relative flex items-center justify-center dark", className),
+      className: cn("relative flex items-center justify-center", className),
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: "relative flex w-full", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-center bg-background lg:w-1/2", children: /* @__PURE__ */ jsxs("div", { className: cn("my-10 flex w-[500px] flex-col gap-24", contentClassName), children: [
-          renderBrand,
-          /* @__PURE__ */ jsxs("div", { children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-4xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h2", { className: cn("text-4xl lg:text-6xl", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-2.5 lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-            renderAction
-          ] }),
-          renderAvatars
-        ] }) }),
+      children: /* @__PURE__ */ jsxs("div", { className: "relative flex w-full flex-col md:flex-row", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-center lg:w-1/2", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "my-10 flex w-[500px] flex-col gap-24",
+              contentClassName
+            ),
+            children: [
+              renderBrand,
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:gap-8", children: [
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-4xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h2", { className: cn("text-4xl lg:text-6xl", headingClassName), children: heading })),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-2.5 lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+                renderAction
+              ] }),
+              renderAvatars
+            ]
+          }
+        ) }),
         renderImage
       ] })
     }
@@ -56336,6 +56607,7 @@ function HeroMentalHealthTeam({
   );
 }
 function HeroMentorshipVideoSplit({
+  videoAspectRatio = "horizontal",
   heading,
   description,
   action,
@@ -56363,33 +56635,46 @@ function HeroMentorshipVideoSplit({
   const renderAction = useMemo(() => {
     if (actionSlot) return actionSlot;
     if (!action) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-    return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = action;
+    return /* @__PURE__ */ jsx("div", { className: "flex", children: /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
       icon,
       label,
       iconAfter
-    ] }) });
+    ] }) }) });
   }, [actionSlot, action]);
   const renderVideoSection = useMemo(() => {
     if (videoSlot) return videoSlot;
     if (!videoThumbnail) return null;
-    return /* @__PURE__ */ jsxs("div", { className: "flex max-w-97.5 flex-col gap-6", children: [
-      videoLabel && (typeof videoLabel === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xl text-accent-foreground", children: videoLabel }) : videoLabel),
+    const aspectRatio = videoAspectRatio === "vertical" ? 9 / 16 : 16 / 9;
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      videoLabel && (typeof videoLabel === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xl", children: videoLabel }) : videoLabel),
       /* @__PURE__ */ jsx(
         Pressable,
         {
-          href: "#",
           onClick: () => setIsVideoOpen(true),
           asButton: true,
           variant: "ghost",
-          className: "group relative flex aspect-video h-full w-full max-w-97.5 overflow-hidden rounded-lg bg-accent p-0 transition-all hover:bg-accent",
-          children: /* @__PURE__ */ jsxs(AspectRatio, { ratio: 16 / 9, className: "flex h-full w-full", children: [
+          className: cn(
+            "group relative flex overflow-hidden rounded-lg p-0",
+            videoAspectRatio === "vertical" ? "h-36 w-20" : "h-20 w-36"
+          ),
+          children: /* @__PURE__ */ jsxs(AspectRatio, { ratio: aspectRatio, className: "flex h-full w-full", children: [
             /* @__PURE__ */ jsx(
               Img,
               {
                 src: videoThumbnail.src,
                 alt: videoThumbnail.alt,
-                className: cn("absolute inset-0 h-full w-full object-cover", videoThumbnail.className),
+                className: cn(
+                  "absolute inset-0 h-full w-full object-cover",
+                  videoThumbnail.className
+                ),
                 optixFlowConfig
               }
             ),
@@ -56397,15 +56682,15 @@ function HeroMentorshipVideoSplit({
               DynamicIcon,
               {
                 name: "lucide/play",
-                size: 40,
-                className: "fill-white stroke-white transition-transform group-hover:scale-125"
+                size: 24,
+                className: "transition-transform group-hover:scale-125"
               }
             ) })
           ] })
         }
       )
     ] });
-  }, [videoSlot, videoThumbnail, videoLabel, optixFlowConfig, setIsVideoOpen]);
+  }, [videoSlot, videoThumbnail, videoLabel, videoAspectRatio, optixFlowConfig, setIsVideoOpen]);
   const renderImage = useMemo(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
@@ -56414,7 +56699,11 @@ function HeroMentorshipVideoSplit({
       {
         src: image.src,
         alt: image.alt,
-        className: cn("aspect-4/5 h-full max-h-250 w-full rounded-xl object-cover object-center", imageClassName, image.className),
+        className: cn(
+          "aspect-4/5 h-full max-h-250 w-full rounded-xl object-cover object-center",
+          imageClassName,
+          image.className
+        ),
         optixFlowConfig
       }
     ) });
@@ -56430,30 +56719,59 @@ function HeroMentorshipVideoSplit({
         className: cn("relative flex items-center justify-center", className),
         containerClassName,
         children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-1 gap-6 lg:grid-cols-2", children: [
-          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: cn("flex h-full flex-col justify-between gap-12", contentClassName), children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex max-w-165 flex-col gap-9", children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-[2.5rem] leading-none text-accent-foreground sm:text-[3.4375rem] md:text-[4rem]", headingClassName), children: heading }) : /* @__PURE__ */ 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__ */ jsx("p", { className: cn("text-lg font-medium text-accent-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-              renderAction
-            ] }),
-            renderVideoSection
-          ] }) }),
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex h-full flex-col justify-between gap-4",
+                contentClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex max-w-165 flex-col gap-9", children: [
+                  heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                    "h1",
+                    {
+                      className: cn(
+                        "text-4xl font-semibold lg:text-8xl text-balance text-shadow-xl text-center",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "h1",
+                    {
+                      className: cn(
+                        "text-4xl font-semibold lg:text-8xl text-balance text-shadow-xl text-center",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  )),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "text-lg font-medium md:text-xl",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+                  renderAction
+                ] }),
+                renderVideoSection
+              ]
+            }
+          ) }),
           renderImage
         ] }) })
       }
     ),
-    /* @__PURE__ */ jsx(Dialog, { open: isVideoOpen, onOpenChange: setIsVideoOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-200", children: [
+    /* @__PURE__ */ jsx(Dialog, { open: isVideoOpen, onOpenChange: setIsVideoOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: cn(
+      videoAspectRatio === "vertical" ? "sm:max-w-100" : "sm:max-w-200"
+    ), children: [
       /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: videoTitle }) }),
-      /* @__PURE__ */ jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsx(
-        "iframe",
-        {
-          className: "h-full w-full",
-          src: videoUrl,
-          title: videoTitle,
-          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
-          allowFullScreen: true
-        }
-      ) })
+      /* @__PURE__ */ jsx("div", { className: videoAspectRatio === "vertical" ? "aspect-9/16" : "aspect-video", children: /* @__PURE__ */ jsx("video", { controls: true, autoPlay: true, className: "h-full w-full rounded-lg", children: /* @__PURE__ */ jsx("source", { src: videoUrl, type: "video/mp4" }) }) })
     ] }) })
   ] });
 }
@@ -56854,7 +57172,7 @@ function HeroStartupLaunchCta({
       containerClassName,
       children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
         /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
-          badge && /* @__PURE__ */ jsxs(Badge, { className: cn("relative", badgeClassName), children: [
+          badge && /* @__PURE__ */ jsxs(Badge, { className: cn("px-4", badgeClassName), children: [
             badgeIcon,
             typeof badge === "string" ? /* @__PURE__ */ jsx("span", { children: badge }) : badge
           ] }),
@@ -57288,6 +57606,9 @@ function HeroCustomerSupportLayered({
   pattern,
   patternOpacity,
   className,
+  actions,
+  actionsSlot,
+  actionsClassName,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "py-32 md:py-32",
   contentClassName,
@@ -57340,6 +57661,34 @@ function HeroCustomerSupportLayered({
       }
     );
   }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
+  const renderActions = useMemo(() => {
+    if (actionsSlot) return actionsSlot;
+    if (!actions || actions.length === 0) return null;
+    return /* @__PURE__ */ 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__ */ jsx(
+        Pressable,
+        {
+          asButton: true,
+          className: actionClassName,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
+    }) });
+  }, [actionsSlot, actions, actionsClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -57385,7 +57734,8 @@ function HeroCustomerSupportLayered({
                   className: cn("leading-normal text-lg", descriptionClassName),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              renderActions
             ]
           }
         ),