@opensite/ui 1.6.9 → 1.7.0

package/dist/registry.js

@@ -51852,44 +51852,53 @@ function HeroSplitSpiralShapes({
   const renderImages = useMemo(() => {
     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 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
-          ),
-          optixFlowConfig
-        }
-      ) }) }),
-      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
-          ),
-          optixFlowConfig
-        }
-      ) }) }),
-      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
-          ),
-          optixFlowConfig
-        }
-      ) }) })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "grid grid-cols-2 gap-4 md:relative md:block md:aspect-3/4",
+          imagesClassName
+        ),
+        children: [
+          images[0] && /* @__PURE__ */ jsx("div", { className: "col-span-2 overflow-hidden rounded-lg shadow-xl md:absolute md:top-[5%] md:left-[2%] md:w-[55%]", 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
+              ),
+              optixFlowConfig
+            }
+          ) }) }),
+          images[1] && /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg shadow-xl md:absolute md:top-[12%] md:right-[5%] md:w-[35%]", 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
+              ),
+              optixFlowConfig
+            }
+          ) }) }),
+          images[2] && /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg shadow-xl md:absolute md:right-[10%] md:bottom-[15%] md:w-[55%]", 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
+              ),
+              optixFlowConfig
+            }
+          ) }) })
+        ]
+      }
+    );
   }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -52292,7 +52301,7 @@ function HeroMarketplaceScatteredImages({
   action,
   actionSlot,
   tagline,
-  taglineIcon = "lucide/globe",
+  taglineIcon,
   taglineSlot,
   images,
   imagesSlot,
@@ -52312,7 +52321,14 @@ function HeroMarketplaceScatteredImages({
   const renderAction = useMemo(() => {
     if (actionSlot) return actionSlot;
     if (!action) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = action;
     return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
       icon,
       label,
@@ -52321,6 +52337,7 @@ function HeroMarketplaceScatteredImages({
   }, [actionSlot, action]);
   const renderTagline = useMemo(() => {
     if (taglineSlot) return taglineSlot;
+    if (!tagline || !taglineIcon) return null;
     return /* @__PURE__ */ jsxs("div", { className: "mt-7 flex items-start justify-center gap-2 font-medium md:text-xl", children: [
       /* @__PURE__ */ jsx(DynamicIcon, { name: taglineIcon, size: 20, className: "mt-0.5" }),
       tagline
@@ -52345,50 +52362,74 @@ function HeroMarketplaceScatteredImages({
   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: "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
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "mx-auto 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: cn(
+              "grid gap-3",
+              colIndex === 2 && "hidden md:grid"
+            ),
+            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"),
+                  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
+              );
+            })
           },
-          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]);
+          colIndex
+        )) })
+      }
+    );
+  }, [
+    imagesSlot,
+    images,
+    imagesClassName,
+    optixFlowConfig,
+    columns,
+    heightPatterns,
+    background
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -52398,14 +52439,49 @@ function HeroMarketplaceScatteredImages({
       patternOpacity,
       className: cn("relative flex items-center justify-center", className),
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("relative mx-auto max-w-xl py-10 text-center", contentClassName), children: [
-          showGridPattern && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted))_1px,transparent_1px)] mask-[radial-gradient(ellipse_50%_100%_at_50%_50%,#000_60%,transparent_100%)] bg-size-[64px_64px]" }),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-3 text-4xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("mb-3 text-4xl lg:text-7xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-5 text-sm md:text-base text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          renderAction,
-          renderTagline
-        ] }),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 items-center", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative mx-auto max-w-xl py-10 text-center flex flex-col gap-6 items-center",
+              contentClassName
+            ),
+            children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "mb-3 text-4xl lg:text-7xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "mb-3 text-4xl lg:text-7xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mb-5 text-sm md:text-base text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              renderAction,
+              renderTagline
+            ]
+          }
+        ),
         renderImages
       ] })
     }
@@ -52741,30 +52817,39 @@ function HeroDashedBorderFeatures({
   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,
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col items-center justify-center mt-4 md:flex-row gap-4",
+          actionsClassName
+        ),
+        children: actions.map((action, index) => {
+          const {
             label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
+            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]);
   const renderFeatures = useMemo(() => {
     if (featuresSlot) return featuresSlot;
@@ -52819,7 +52904,7 @@ function HeroDashedBorderFeatures({
                 "p",
                 {
                   className: cn(
-                    "mx-auto mb-6 max-w-2xl text-center lg:text-xl text-balance",
+                    "mx-auto mb-8 max-w-2xl text-center lg:text-xl text-balance",
                     descriptionClassName
                   ),
                   children: description
@@ -53172,12 +53257,12 @@ function HeroPremiumSplitAvatars({
       patternOpacity,
       className: cn("relative flex items-center justify-center", className),
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: "relative flex w-full flex-col md:flex-row", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "relative flex w-full flex-col md:flex-row gap-8 md:gap-20", 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",
+              "my-10 flex w-full flex-col gap-6 md:gap-24",
               contentClassName
             ),
             children: [
@@ -53592,7 +53677,7 @@ function HeroTaskTimerAnimated({
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: "flex flex-col items-start gap-4 sm:flex-row sm:items-center", children: actions.map((action, index) => {
+    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,
@@ -53620,32 +53705,41 @@ function HeroTaskTimerAnimated({
   const renderImages = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length < 2) return null;
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-10 lg:flex-row", imagesClassName), children: [
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-10 lg:w-[60%]", children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.916786227 / 1, children: /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: images[0].src,
-          alt: images[0].alt,
-          className: cn(
-            "block size-full object-cover object-top-left",
-            images[0].className
-          ),
-          optixFlowConfig
-        }
-      ) }) }) }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-10 lg:w-[40%]", children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.916786227 / 1, children: /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: images[1].src,
-          alt: images[1].alt,
-          className: cn(
-            "block size-full object-cover object-top-left",
-            images[1].className
-          ),
-          optixFlowConfig
-        }
-      ) }) }) })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-col mt-6 gap-6 md:gap-10 lg:flex-row",
+          imagesClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-10 w-full lg:w-[60%]", children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg shadow-xl", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.916786227 / 1, children: /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: images[0].src,
+              alt: images[0].alt,
+              className: cn(
+                "block size-full object-cover object-center",
+                images[0].className
+              ),
+              optixFlowConfig
+            }
+          ) }) }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-10 w-full lg:w-[40%]", children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg shadow-xl", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.916786227 / 1, children: /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: images[1].src,
+              alt: images[1].alt,
+              className: cn(
+                "block size-full object-cover object-center",
+                images[1].className
+              ),
+              optixFlowConfig
+            }
+          ) }) }) })
+        ]
+      }
+    );
   }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -53657,38 +53751,29 @@ function HeroTaskTimerAnimated({
       className,
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-6 md:gap-16", children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "flex flex-col gap-10 lg:w-[80%] lg:self-center",
-              headerClassName
-            ),
-            children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                "h1",
-                {
-                  className: cn(
-                    "max-w-2xl text-6xl font-bold tracking-tight md:text-7xl lg:text-8xl text-balance",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : /* @__PURE__ */ jsx(
-                "h1",
-                {
-                  className: cn(
-                    "max-w-2xl text-6xl font-bold tracking-tight md:text-7xl lg:text-8xl text-balance",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-              renderActions
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4 w-full", headerClassName), children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "max-w-2xl text-6xl font-bold tracking-tight md:text-7xl lg:text-8xl text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "max-w-2xl text-6xl font-bold tracking-tight md:text-7xl lg:text-8xl text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          )),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          renderActions
+        ] }),
         renderImages
       ] })
     }
@@ -54092,7 +54177,7 @@ function HeroPresentationPlatformVideo({
 }
 function HeroGridPatternSolutions({
   badgeText,
-  badgeHref = "#",
+  badgeHref,
   badgeSlot,
   heading,
   description,
@@ -54100,7 +54185,6 @@ function HeroGridPatternSolutions({
   actionsSlot,
   images,
   imagesSlot,
-  showGridPattern = true,
   background,
   spacing = "py-32 md:py-32",
   pattern,
@@ -54114,56 +54198,114 @@ function HeroGridPatternSolutions({
   imagesClassName,
   optixFlowConfig
 }) {
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
+  const lightboxItems = useMemo(
+    () => (images ?? []).map((img, index) => ({
+      id: `hero-grid-image-${index}`,
+      type: "image",
+      src: img.src,
+      alt: img.alt,
+      download: true,
+      share: true
+    })),
+    [images]
+  );
+  const handleImageClick = useCallback((index) => {
+    setLightboxIndex(index);
+    setLightboxOpen(true);
+  }, []);
+  const handleLightboxClose = useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
   const renderBadge = useMemo(() => {
     if (badgeSlot) return badgeSlot;
-    return /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        href: badgeHref,
-        className: "mx-auto mb-4 flex w-fit items-center gap-2 rounded-full px-4 py-2 text-sm bg-card",
-        children: [
-          badgeText,
-          /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-        ]
-      }
-    );
+    if (!badgeText) return null;
+    return /* @__PURE__ */ jsx(Pressable, { href: badgeHref, children: /* @__PURE__ */ jsxs(Badge, { className: "px-2", children: [
+      badgeText,
+      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right" })
+    ] }) });
   }, [badgeSlot, badgeHref, badgeText]);
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col justify-center gap-x-2 gap-y-3 sm:flex-row", 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,
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col justify-center gap-x-2 gap-y-3 sm:flex-row",
+          actionsClassName
+        ),
+        children: actions.map((action, index) => {
+          const {
             label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
+            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]);
   const renderImages = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mt-20 grid gap-6 md:grid-cols-10", imagesClassName), children: images.map((image, index) => /* @__PURE__ */ jsx(
-      Img,
+    return /* @__PURE__ */ jsx(
+      "div",
       {
-        src: image.src,
-        alt: image.alt,
-        className: cn("h-full max-h-[500px] w-full rounded-xl object-cover", image.className),
-        optixFlowConfig
-      },
-      index
-    )) });
-  }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
-  return /* @__PURE__ */ jsx(
+        className: cn(
+          "mt-8 md:mt-20 grid grid-cols-2 gap-4 md:flex md:flex-row md:items-center md:justify-center md:gap-6",
+          imagesClassName
+        ),
+        children: images.map((image, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "cursor-pointer overflow-hidden rounded-xl transition-transform hover:scale-[1.02] hover:shadow-lg",
+            onClick: () => handleImageClick(index),
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleImageClick(index);
+              }
+            },
+            "aria-label": `View ${image.alt} in lightbox`,
+            children: /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: image.src,
+                alt: image.alt,
+                className: cn(
+                  "h-full max-h-[200px] max-w-[200px] w-full rounded-xl object-cover shadow-xl",
+                  image.className
+                ),
+                optixFlowConfig
+              }
+            )
+          },
+          index
+        ))
+      }
+    );
+  }, [imagesSlot, images, imagesClassName, optixFlowConfig, handleImageClick]);
+  return /* @__PURE__ */ jsxs(
     Section,
     {
       background,
@@ -54172,18 +54314,65 @@ function HeroGridPatternSolutions({
       patternOpacity,
       className: cn("relative flex items-center justify-center", className),
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden", children: [
-          showGridPattern && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -top-1 -left-1 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted-foreground))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted-foreground))_1px,transparent_1px)] mask-[radial-gradient(ellipse_50%_100%_at_50%_50%,transparent_60%,#000_100%)] bg-size-[92px_92px] opacity-15" }),
-          /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl", contentClassName), children: [
+      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: [
             renderBadge,
-            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("h1", { className: cn("my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto mb-8 max-w-2xl text-center lg:text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+              "h1",
+              {
+                className: cn(
+                  "my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl text-balance",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ) : /* @__PURE__ */ jsx(
+              "h1",
+              {
+                className: cn(
+                  "my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl text-balance",
+                  headingClassName
+                ),
+                children: heading
+              }
+            )),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "mx-auto mb-8 max-w-2xl text-center lg:text-xl text-balance",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
             renderActions
-          ] })
+          ] }) }),
+          renderImages
         ] }),
-        renderImages
-      ] })
+        lightboxOpen && /* @__PURE__ */ jsx(
+          Lightbox,
+          {
+            items: lightboxItems,
+            initialIndex: lightboxIndex,
+            layout: "horizontal",
+            controls: {
+              navigation: true,
+              thumbnails: true,
+              download: true,
+              share: true,
+              fullscreen: true,
+              captions: true,
+              counter: true
+            },
+            onClose: handleLightboxClose,
+            enableKeyboardShortcuts: true,
+            closeOnEscape: true,
+            closeOnBackdropClick: true
+          }
+        )
+      ]
     }
   );
 }
@@ -54285,7 +54474,14 @@ function HeroBillingPlatformLogos({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       if (index === 1) {
         return /* @__PURE__ */ jsx(
           Pressable,
@@ -54302,19 +54498,11 @@ function HeroBillingPlatformLogos({
           index
         );
       }
-      return /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        }
-      ) }, index);
+      return /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        icon,
+        label,
+        iconAfter
+      ] }) }) }, index);
     });
   }, [actionsSlot, actions]);
   return /* @__PURE__ */ jsxs(
@@ -54324,14 +54512,32 @@ function HeroBillingPlatformLogos({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("relative flex items-center justify-center dark font-sans", className),
+      className,
       containerClassName,
       children: [
         /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center justify-center gap-12 lg:grid-cols-[minmax(33.75rem,1fr)_1.5fr] lg:gap-8", children: [
           /* @__PURE__ */ jsx("div", { className: contentClassName, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl leading-tight md:text-5xl lg:text-[3.5rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+              "h1",
+              {
+                className: cn(
+                  "text-4xl leading-tight md:text-5xl lg:text-[3.5rem]",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
             description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-5 text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-            (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: cn("flex flex-col items-center gap-4 lg:flex-row", actionsClassName), children: renderActions }) })
+            (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col items-center gap-4 lg:flex-row",
+                  actionsClassName
+                ),
+                children: renderActions
+              }
+            ) })
           ] }) }),
           imagesSlot ? imagesSlot : mainImage ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ 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__ */ 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__ */ jsx(
@@ -54339,7 +54545,10 @@ function HeroBillingPlatformLogos({
               {
                 src: mainImage.src,
                 alt: mainImage.alt,
-                className: cn("relative z-10 w-full object-cover", mainImage.className),
+                className: cn(
+                  "relative z-10 w-full object-cover",
+                  mainImage.className
+                ),
                 optixFlowConfig
               }
             ) }),
@@ -54348,7 +54557,10 @@ function HeroBillingPlatformLogos({
               {
                 src: overlayImages[0].src,
                 alt: overlayImages[0].alt,
-                className: cn("size-full object-cover", overlayImages[0].className),
+                className: cn(
+                  "size-full object-cover",
+                  overlayImages[0].className
+                ),
                 optixFlowConfig
               }
             ) }),
@@ -54357,7 +54569,10 @@ function HeroBillingPlatformLogos({
               {
                 src: overlayImages[1].src,
                 alt: overlayImages[1].alt,
-                className: cn("size-full object-cover", overlayImages[1].className),
+                className: cn(
+                  "size-full object-cover",
+                  overlayImages[1].className
+                ),
                 optixFlowConfig
               }
             ) }),
@@ -54366,43 +54581,44 @@ function HeroBillingPlatformLogos({
               {
                 src: overlayImages[2].src,
                 alt: overlayImages[2].alt,
-                className: cn("size-full object-cover", overlayImages[2].className),
+                className: cn(
+                  "size-full object-cover",
+                  overlayImages[2].className
+                ),
                 optixFlowConfig
               }
             ) })
           ] }) }) : null
         ] }) }),
-        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center gap-8 pt-28", logosClassName), children: [
-          logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: "px-5 text-center font-mono text-sm font-medium uppercase", children: logosTagline }) : /* @__PURE__ */ jsx("div", { children: logosTagline })),
-          logosSlot ? logosSlot : logos && logos.length > 0 ? /* @__PURE__ */ jsx(
-            Carousel,
-            {
-              opts: {
-                loop: true,
-                align: "center"
-              },
-              plugins: [
-                AutoScroll3({
-                  speed: 1
-                }),
-                Autoplay({
-                  playOnInit: true,
-                  delay: 1e3
-                })
-              ],
-              className: "relative w-full max-w-(--breakpoint-2xl) overflow-hidden",
-              children: /* @__PURE__ */ jsx(CarouselContent, { className: "items-center", children: logos.map((logo, index) => /* @__PURE__ */ jsx(CarouselItem, { className: "w-fit basis-auto px-7", children: /* @__PURE__ */ jsx(
-                Img,
-                {
-                  src: typeof logo.src === "string" ? logo.src : logo.src.light,
-                  alt: logo.alt,
-                  className: cn("h-8 w-full object-fill", logo.imgClassName),
-                  optixFlowConfig
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col items-center justify-center gap-8 pt-28",
+              logosClassName
+            ),
+            children: [
+              logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: "px-5 text-center font-mono text-sm font-medium uppercase", children: logosTagline }) : /* @__PURE__ */ jsx("div", { children: logosTagline })),
+              logosSlot ? logosSlot : logos && logos.length > 0 ? /* @__PURE__ */ jsx(
+                Carousel,
+                {
+                  opts: { loop: true },
+                  plugins: [AutoScroll3({ playOnInit: true, speed: 1 })],
+                  className: "relative w-full max-w-(--breakpoint-2xl) overflow-hidden",
+                  children: /* @__PURE__ */ jsx(CarouselContent, { className: "items-center", children: [...logos, ...logos].map((logo, index) => /* @__PURE__ */ jsx(CarouselItem, { className: "w-fit basis-auto px-7", children: /* @__PURE__ */ jsx(
+                    Img,
+                    {
+                      src: typeof logo.src === "string" ? logo.src : logo.src.light,
+                      alt: logo.alt,
+                      className: cn("h-8 w-full object-fill", logo.imgClassName),
+                      optixFlowConfig
+                    }
+                  ) }, index)) })
                 }
-              ) }, index)) })
-            }
-          ) : null
-        ] })
+              ) : null
+            ]
+          }
+        )
       ]
     }
   );
@@ -54677,64 +54893,42 @@ function HeroConversionVideoPlay({
     if (actionsSlot) return actionsSlot;
     return /* @__PURE__ */ jsxs(Fragment$1, { children: [
       primaryAction && (() => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = primaryAction;
-        return /* @__PURE__ */ jsxs(
+        const {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = primaryAction;
+        return /* @__PURE__ */ jsx(
           Pressable,
           {
             asButton: true,
             className: actionClassName,
             ...pressableProps,
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "relative z-10 flex items-center gap-2.5", children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-                icon,
-                /* @__PURE__ */ jsx("span", { children: label }),
-                iconAfter
-              ] }) }),
-              /* @__PURE__ */ jsx("div", { className: "absolute bottom-16 -left-16 aspect-square w-16 rounded-full bg-pink-400 transition-all duration-300 group-hover:bottom-1/2 group-hover:-left-5 group-hover:w-[110%] group-hover:translate-y-1/2" })
-            ]
+            children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+              icon,
+              /* @__PURE__ */ jsx("span", { children: label }),
+              iconAfter
+            ] })
           }
-        );
-      })(),
-      /* @__PURE__ */ jsxs(
-        Pressable,
-        {
-          href: "#",
-          onClick: () => setIsVideoOpen(true),
-          asButton: true,
-          variant: "ghost",
-          className: "flex h-fit w-fit items-center gap-2 text-lg font-semibold uppercase hover:bg-transparent",
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 rounded-full bg-primary", children: /* @__PURE__ */ jsx(
-              DynamicIcon,
-              {
-                name: "lucide/play",
-                size: 16,
-                className: "m-auto fill-white stroke-white"
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: videoButtonLabel })
-          ]
-        }
-      )
-    ] });
-  }, [actionsSlot, primaryAction, videoButtonLabel, setIsVideoOpen]);
-  const renderLogos = useMemo(() => {
-    if (logosSlot) return logosSlot;
-    if (!logos || logos.length === 0) return null;
-    return logos.map((logo, index) => {
-      const src = typeof logo.src === "string" ? logo.src : logo.src.light;
-      return /* @__PURE__ */ jsx(
-        Img,
-        {
-          src,
-          alt: logo.alt,
-          className: logo.className,
-          optixFlowConfig
-        },
-        index
-      );
-    });
-  }, [logosSlot, logos, optixFlowConfig]);
+        );
+      })(),
+      videoUrl && /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          onClick: () => setIsVideoOpen(true),
+          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", { children: videoButtonLabel })
+          ]
+        }
+      )
+    ] });
+  }, [actionsSlot, primaryAction, videoButtonLabel, setIsVideoOpen]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Section,
@@ -54747,42 +54941,91 @@ function HeroConversionVideoPlay({
         containerClassName,
         children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
           /* @__PURE__ */ jsx("div", { className: "overflow-hidden border-b border-border", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-16 md:gap-24", children: [
-            /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-8", contentClassName), children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-7", children: [
-                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("max-w-[920px] text-center text-4xl leading-tight font-semibold md:text-6xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-                description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-[750px] text-center text-base leading-relaxed font-normal md:text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-8", actionsClassName), children: renderActions })
-            ] }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col items-center gap-8",
+                  contentClassName
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-7", children: [
+                    heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                      "h1",
+                      {
+                        className: cn(
+                          "max-w-[920px] text-center text-4xl leading-tight font-semibold md:text-6xl lg:text-7xl text-balance",
+                          headingClassName
+                        ),
+                        children: heading
+                      }
+                    ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+                    description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: cn(
+                          "max-w-[750px] text-center text-base leading-relaxed font-normal md:text-xl text-balance",
+                          descriptionClassName
+                        ),
+                        children: description
+                      }
+                    ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "flex flex-wrap items-center justify-center gap-8",
+                        actionsClassName
+                      ),
+                      children: renderActions
+                    }
+                  )
+                ]
+              }
+            ),
             /* @__PURE__ */ jsx("div", { className: "w-full", children: imageSlot ? imageSlot : image ? /* @__PURE__ */ jsx("div", { className: cn("relative h-fit w-full", imageClassName), children: /* @__PURE__ */ jsx("div", { className: "relative z-20 w-full max-w-330 overflow-hidden rounded-t-xl md:rounded-t-3xl", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 2.095238095 / 1, children: /* @__PURE__ */ jsx(
               Img,
               {
                 src: image.src,
                 alt: image.alt,
-                className: cn("size-full object-cover object-center", image.className),
+                className: cn(
+                  "size-full object-cover object-center",
+                  image.className
+                ),
                 optixFlowConfig
               }
             ) }) }) }) : 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 text-accent-foreground"), children: logosTagline }) : logosTagline),
-            (logosSlot || logos && logos.length > 0) && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-20", children: renderLogos })
+            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-xl font-medium "), children: logosTagline }) : logosTagline),
+            logosSlot ? logosSlot : logos && logos.length > 0 ? /* @__PURE__ */ jsx(
+              Carousel,
+              {
+                opts: { loop: true },
+                plugins: [AutoScroll3({ playOnInit: true, speed: 1 })],
+                className: "relative w-full max-w-(--breakpoint-2xl) overflow-hidden",
+                children: /* @__PURE__ */ jsx(CarouselContent, { className: "items-center", children: [...logos, ...logos].map((logo, index) => /* @__PURE__ */ jsx(CarouselItem, { className: "w-fit basis-auto px-7", children: /* @__PURE__ */ jsx(
+                  Img,
+                  {
+                    src: typeof logo.src === "string" ? logo.src : logo.src.light,
+                    alt: logo.alt,
+                    className: cn(
+                      "h-8 w-full object-fill",
+                      logo.imgClassName
+                    ),
+                    optixFlowConfig
+                  }
+                ) }, index)) })
+              }
+            ) : null
           ] })
         ] })
       }
     ),
-    /* @__PURE__ */ jsx(Dialog, { open: isVideoOpen, onOpenChange: setIsVideoOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[800px]", children: [
+    /* @__PURE__ */ jsx(Dialog, { open: isVideoOpen, onOpenChange: setIsVideoOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-200", children: [
       /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: videoDialogTitle }) }),
-      /* @__PURE__ */ jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsx(
-        "iframe",
-        {
-          className: "h-full w-full",
-          src: videoUrl,
-          title: videoDialogTitle,
-          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
-          allowFullScreen: true
-        }
-      ) })
+      /* @__PURE__ */ jsx("div", { className: "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" }) }) })
     ] }) })
   ] });
 }
@@ -54813,42 +55056,70 @@ function HeroDesignShowcaseLogos({
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mt-3 flex items-center justify-center gap-3", 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: [
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "mt-6 md:mt-12 flex items-center justify-center gap-3",
+          actionsClassName
+        ),
+        children: actions.map((action, index) => {
+          const {
+            label,
             icon,
-            label && /* @__PURE__ */ jsx("div", { children: label }),
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
+            iconAfter,
+            children,
+            className: actionClassName,
+            ...pressableProps
+          } = action;
+          return /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              asButton: true,
+              className: actionClassName,
+              ...pressableProps,
+              children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                icon,
+                label && /* @__PURE__ */ jsx("div", { children: label }),
+                iconAfter
+              ] })
+            },
+            index
+          );
+        })
+      }
+    );
   }, [actionsSlot, actions, actionsClassName]);
   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: [
       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", { className: cn("mt-8 flex flex-wrap items-center justify-center gap-5 sm:flex-nowrap", logosClassName), children: logos.map((logo, index) => {
-        const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
-        return /* @__PURE__ */ jsx(
-          Img,
-          {
-            src: logoSrc,
-            alt: logo.alt,
-            className: cn("block h-3.5 w-auto opacity-50 md:h-5", logo.className),
-            optixFlowConfig
-          },
-          index
-        );
-      }) })
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "mt-8 flex flex-wrap items-center justify-center gap-5 sm:flex-nowrap",
+            logosClassName
+          ),
+          children: logos.map((logo, index) => {
+            const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
+            return /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: logoSrc,
+                alt: logo.alt,
+                className: cn(
+                  "block h-3.5 w-auto opacity-50 md:h-5",
+                  logo.className
+                ),
+                optixFlowConfig
+              },
+              index
+            );
+          })
+        }
+      )
     ] });
   }, [logosSlot, logos, logosLabel, logosClassName, optixFlowConfig]);
   const renderShowcase = useMemo(() => {
@@ -54859,7 +55130,10 @@ function HeroDesignShowcaseLogos({
       {
         src: showcaseImage.src,
         alt: showcaseImage.alt,
-        className: cn("w-full object-cover object-top-left", showcaseImage.className),
+        className: cn(
+          "w-full object-cover object-top-left",
+          showcaseImage.className
+        ),
         optixFlowConfig
       }
     ) }) }) });
@@ -54874,14 +55148,47 @@ function HeroDesignShowcaseLogos({
       className: cn("relative flex items-center justify-center", className),
       containerClassName,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-8", contentClassName), children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex max-w-[920px] flex-col items-center gap-6", children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-6 text-center text-[2.75rem] leading-tight font-semibold md:text-[3.5rem] lg:text-[4.375rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("mb-6 text-center text-[2.75rem] leading-tight font-semibold md:text-[3.5rem] lg:text-[4.375rem]", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-          ] }),
-          /* @__PURE__ */ jsx("div", { children: renderActions }),
-          /* @__PURE__ */ jsx("div", { children: renderLogos })
-        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("flex flex-col items-center gap-8", contentClassName),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex max-w-[920px] flex-col items-center gap-6", children: [
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mb-6 text-center text-[2.75rem] leading-tight font-semibold md:text-[3.5rem] lg:text-[4.375rem] text-balance",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mb-6 text-center text-[2.75rem] leading-tight font-semibold md:text-[3.5rem] lg:text-[4.375rem] text-balance",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                )),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "text-center text-xl text-balance",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              ] }),
+              /* @__PURE__ */ jsx("div", { children: renderActions }),
+              /* @__PURE__ */ jsx("div", { children: renderLogos })
+            ]
+          }
+        ) }),
         renderShowcase
       ]
     }
@@ -54975,12 +55282,11 @@ function HeroProductivityLauncherVideo({
   actionsSlot,
   versionInfo,
   versionInfoSlot,
-  secondaryCta,
-  secondaryCtaSlot,
   videoSrc,
   videoSlot,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "py-0 md:py-0",
+  containerClassName = "mx-auto w-screen min-h-screen h-full max-w-screen relative z-10 px-0 sm:px-0 md:px-0 lg:px-0 flex flex-col items-center justify-center",
   pattern,
   patternOpacity,
   className,
@@ -54992,7 +55298,14 @@ function HeroProductivityLauncherVideo({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-4", 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,
         {
@@ -55012,40 +55325,15 @@ function HeroProductivityLauncherVideo({
   const renderVersionInfo = useMemo(() => {
     if (versionInfoSlot) return versionInfoSlot;
     if (!versionInfo) return null;
-    return /* @__PURE__ */ jsxs("div", { className: "flex gap-6 text-xs text-muted-foreground", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "flex gap-6 text-xs text-white", children: [
       versionInfo.version && /* @__PURE__ */ jsx("span", { children: versionInfo.version }),
       versionInfo.osRequirement && /* @__PURE__ */ jsx("span", { className: "relative before:absolute before:-left-3 before:content-['|']", children: versionInfo.osRequirement }),
       versionInfo.installMethod && /* @__PURE__ */ jsx("span", { className: "relative before:absolute before:-left-3 before:content-['|']", children: /* @__PURE__ */ jsx("button", { onClick: versionInfo.installAction, children: versionInfo.installMethod }) })
     ] });
   }, [versionInfoSlot, versionInfo]);
-  const renderSecondaryCta = useMemo(() => {
-    if (secondaryCtaSlot) return secondaryCtaSlot;
-    if (!secondaryCta) return null;
-    return /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        href: secondaryCta.href,
-        className: "group relative mt-10 flex h-8 items-center gap-3 overflow-hidden rounded-full border border-border/50 bg-background px-3 py-1 text-sm font-medium",
-        children: [
-          secondaryCta.primaryText && /* @__PURE__ */ jsx("span", { children: secondaryCta.primaryText }),
-          secondaryCta.secondaryText && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
-            /* @__PURE__ */ jsx("span", { children: secondaryCta.secondaryText }),
-            /* @__PURE__ */ jsx(
-              DynamicIcon,
-              {
-                name: "lucide/arrow-right",
-                size: 16,
-                className: "stroke-muted-foreground"
-              }
-            )
-          ] })
-        ]
-      }
-    );
-  }, [secondaryCtaSlot, secondaryCta]);
   const renderVideo = useMemo(() => {
     if (videoSlot) return videoSlot;
-    return /* @__PURE__ */ jsx("div", { className: "absolute -top-24 z-10 h-full w-full before:absolute before:inset-0 before:size-full before:bg-[radial-gradient(circle_at_center,rgba(10,10,10,.3)_15%,rgba(10,10,10,1)_45%)] before:content-['']", children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: "absolute top-0 z-10 h-full w-full inset-0", children: /* @__PURE__ */ jsx(
       "video",
       {
         src: videoSrc,
@@ -55053,7 +55341,7 @@ function HeroProductivityLauncherVideo({
         muted: true,
         autoPlay: true,
         controls: false,
-        className: "block size-full object-cover object-center bg-blend-saturation"
+        className: "block size-full object-cover object-center brightness-50"
       }
     ) });
   }, [videoSlot, videoSrc]);
@@ -55064,19 +55352,45 @@ function HeroProductivityLauncherVideo({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("relative flex items-center justify-center dark overflow-hidden bg-background py-12 font-sans md:py-20", className),
-      containerClassName: "px-6 sm:px-6 md:px-8 lg:px-8",
+      className,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsx("div", { className: cn("relative z-20 max-w-204.5", contentClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-8 px-4 pt-52 pb-32 md:pb-52", children: [
-            /* @__PURE__ */ jsx("div", { className: "max-w-100 sm:max-w-135", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-center text-4xl leading-tight font-semibold [text-shadow:0_4px_4px_rgba(0,0,0,0.15)] sm:text-5xl md:text-[4rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-center text-4xl leading-tight font-semibold [text-shadow:0_4px_4px_rgba(0,0,0,0.15)] sm:text-5xl md:text-[4rem]", headingClassName), children: heading })) }),
-            /* @__PURE__ */ jsx("div", { className: "max-w-90 md:max-w-full", children: description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-sm leading-normal tracking-tight text-balance text-muted-foreground [text-shadow:0_4px_4px_rgba(0,0,0,0.25)] md:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })) })
+            /* @__PURE__ */ jsx("div", { className: "max-w-100 sm:max-w-135", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+              "h1",
+              {
+                className: cn(
+                  "text-center text-4xl leading-tight font-semibold text-shadow-xl sm:text-5xl md:text-6xl text-balance text-white",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ) : /* @__PURE__ */ jsx(
+              "h1",
+              {
+                className: cn(
+                  "text-center text-4xl leading-tight font-semibold text-shadow-xl sm:text-5xl md:text-6xl text-balance text-white",
+                  headingClassName
+                ),
+                children: heading
+              }
+            )) }),
+            /* @__PURE__ */ jsx("div", { className: "max-w-90 md:max-w-full", children: description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "text-center text-sm leading-normal tracking-tight text-balance md:text-lg text-white",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })) })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
             renderActions,
             renderVersionInfo
-          ] }),
-          renderSecondaryCta
+          ] })
         ] }) }),
         renderVideo
       ]
@@ -56654,7 +56968,7 @@ function HeroMentorshipVideoSplit({
     if (!videoThumbnail) return null;
     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),
+      videoLabel && (typeof videoLabel === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase opacity-75", children: videoLabel }) : videoLabel),
       /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -56678,7 +56992,7 @@ function HeroMentorshipVideoSplit({
                 optixFlowConfig
               }
             ),
-            /* @__PURE__ */ jsx("div", { className: "m-auto aspect-square z-10", children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("div", { className: "m-auto aspect-square z-10 bg-card text-card-foreground p-2 rounded-xl shadow-xl", children: /* @__PURE__ */ jsx(
               DynamicIcon,
               {
                 name: "lucide/play",
@@ -56690,7 +57004,14 @@ function HeroMentorshipVideoSplit({
         }
       )
     ] });
-  }, [videoSlot, videoThumbnail, videoLabel, videoAspectRatio, optixFlowConfig, setIsVideoOpen]);
+  }, [
+    videoSlot,
+    videoThumbnail,
+    videoLabel,
+    videoAspectRatio,
+    optixFlowConfig,
+    setIsVideoOpen
+  ]);
   const renderImage = useMemo(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
@@ -56718,12 +57039,12 @@ function HeroMentorshipVideoSplit({
         patternOpacity,
         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: [
+        children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col-reverse md:flex-row gap-6 md:gap-20", children: [
           /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
             "div",
             {
               className: cn(
-                "flex h-full flex-col justify-between gap-4",
+                "flex h-full flex-col justify-between gap-8",
                 contentClassName
               ),
               children: [
@@ -56732,7 +57053,7 @@ function HeroMentorshipVideoSplit({
                     "h1",
                     {
                       className: cn(
-                        "text-4xl font-semibold lg:text-8xl text-balance text-shadow-xl text-center",
+                        "text-4xl font-semibold lg:text-8xl text-balance text-shadow-xl",
                         headingClassName
                       ),
                       children: heading
@@ -56741,7 +57062,7 @@ function HeroMentorshipVideoSplit({
                     "h1",
                     {
                       className: cn(
-                        "text-4xl font-semibold lg:text-8xl text-balance text-shadow-xl text-center",
+                        "text-4xl font-semibold lg:text-8xl text-balance text-shadow-xl",
                         headingClassName
                       ),
                       children: heading
@@ -56767,12 +57088,24 @@ function HeroMentorshipVideoSplit({
         ] }) })
       }
     ),
-    /* @__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: 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" }) }) })
-    ] }) })
+    /* @__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: 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" }) })
+            }
+          )
+        ]
+      }
+    ) })
   ] });
 }
 function HeroBusinessOperationsMosaic({
@@ -57699,7 +58032,7 @@ function HeroCustomerSupportLayered({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-4 md:gap-20 md:grid-cols-2", children: [
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-8 md:gap-20 md:grid-cols-2", children: [
         /* @__PURE__ */ jsxs(
           "div",
           {