@opensite/ui 1.8.2 → 1.8.4

package/dist/hero-design-system-3d.cjs

@@ -961,7 +961,7 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function HeroDesignSystem3d({
-  trustBadge = "Trusted by over 7,000 customers",
+  trustBadge,
   trustBadgeSlot,
   heading,
   description,
@@ -1000,87 +1000,130 @@ function HeroDesignSystem3d({
   const renderActions = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-wrap items-center gap-4 md:w-fit", actionsClassName), children: actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-      if (index === 0) {
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          Pressable,
-          {
-            asButton: true,
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex w-full flex-wrap items-center gap-4 md:w-fit",
+          actionsClassName
+        ),
+        children: actions.map((action, index) => {
+          const {
+            label,
+            icon,
+            iconAfter,
+            children,
             className: actionClassName,
-            ...pressableProps,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                img.Img,
-                {
-                  src: logoMarkSrc,
-                  alt: "",
-                  className: "block size-6 shrink-0",
-                  optixFlowConfig
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-nowrap transition-all duration-300 ease-in-out", `group-hover:${getAccentColor(background)}`), children: label }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                DynamicIcon,
-                {
-                  name: "lucide/move-up-right",
-                  size: 24,
-                  className: "shrink-0 stroke-black transition-all duration-300 ease-in-out group-hover:stroke-primary"
-                }
-              )
-            ]
-          },
-          index
-        );
+            ...pressableProps
+          } = action;
+          if (index === 0) {
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              Pressable,
+              {
+                asButton: true,
+                className: actionClassName,
+                ...pressableProps,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    img.Img,
+                    {
+                      src: logoMarkSrc,
+                      alt: "",
+                      className: "block size-6 shrink-0",
+                      optixFlowConfig
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "text-nowrap transition-all duration-300 ease-in-out",
+                        `group-hover:${getAccentColor(background)}`
+                      ),
+                      children: label
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    DynamicIcon,
+                    {
+                      name: "lucide/move-up-right",
+                      size: 24,
+                      className: "shrink-0 stroke-black transition-all duration-300 ease-in-out group-hover:stroke-primary"
+                    }
+                  )
+                ]
+              },
+              index
+            );
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            Pressable,
+            {
+              asButton: true,
+              className: actionClassName,
+              ...pressableProps,
+              children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                icon,
+                label,
+                iconAfter
+              ] })
+            },
+            index
+          );
+        })
       }
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
+    );
   }, [actionsSlot, actions, actionsClassName, logoMarkSrc, optixFlowConfig]);
   const renderImages = React.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mt-16 aspect-[1.2/1] overflow-hidden sm:-right-[10%] sm:mt-28 sm:aspect-[2.788990826/1]", imagesClassName), children: [
-      images[0] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[11%] left-[8%] z-10 aspect-[0.7/1] w-[80%] sm:left-[4%] sm:w-[45%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-full transform-[rotateY(-30deg)_rotateX(-18deg)_rotate(-4deg)]", children: /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: images[0].src,
-          alt: images[0].alt,
-          className: cn("block size-full object-cover object-center", images[0].className),
-          optixFlowConfig
-        }
-      ) }) }),
-      images[1] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-[70%] z-20 aspect-[0.7/1] w-[73%] -translate-x-1/2 sm:left-1/2 sm:w-[38%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-full transform-[rotateY(-30deg)_rotateX(-18deg)_rotate(-4deg)] shadow-[-25px_0px_20px_0px_rgba(0,0,0,.04)]", children: /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: images[1].src,
-          alt: images[1].alt,
-          className: cn("block size-full object-cover object-center", images[1].className),
-          optixFlowConfig
-        }
-      ) }) }),
-      images[2] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[3%] -right-[45%] z-30 aspect-[0.7/1] w-[85%] sm:-right-[2%] sm:w-[50%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-full transform-[rotateY(-30deg)_rotateX(-18deg)_rotate(-4deg)] shadow-[-25px_0px_20px_0px_rgba(0,0,0,.04)]", children: /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: images[2].src,
-          alt: images[2].alt,
-          className: cn("block size-full object-cover object-center", images[2].className),
-          optixFlowConfig
-        }
-      ) }) })
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "relative mt-16 aspect-[1.2/1] overflow-hidden sm:-right-[10%] sm:mt-28 sm:aspect-[2.788990826/1]",
+          imagesClassName
+        ),
+        children: [
+          images[0] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[11%] left-[8%] z-10 aspect-[0.7/1] w-[80%] sm:left-[4%] sm:w-[45%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-full transform-[rotateY(-30deg)_rotateX(-18deg)_rotate(-4deg)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: images[0].src,
+              alt: images[0].alt,
+              className: cn(
+                "block size-full object-cover object-center",
+                images[0].className
+              ),
+              optixFlowConfig
+            }
+          ) }) }),
+          images[1] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-[70%] z-20 aspect-[0.7/1] w-[73%] -translate-x-1/2 sm:left-1/2 sm:w-[38%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-full transform-[rotateY(-30deg)_rotateX(-18deg)_rotate(-4deg)] shadow-[-25px_0px_20px_0px_rgba(0,0,0,.04)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: images[1].src,
+              alt: images[1].alt,
+              className: cn(
+                "block size-full object-cover object-center",
+                images[1].className
+              ),
+              optixFlowConfig
+            }
+          ) }) }),
+          images[2] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[3%] -right-[45%] z-30 aspect-[0.7/1] w-[85%] sm:-right-[2%] sm:w-[50%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-full transform-[rotateY(-30deg)_rotateX(-18deg)_rotate(-4deg)] shadow-[-25px_0px_20px_0px_rgba(0,0,0,.04)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: images[2].src,
+              alt: images[2].alt,
+              className: cn(
+                "block size-full object-cover object-center",
+                images[2].className
+              ),
+              optixFlowConfig
+            }
+          ) }) })
+        ]
+      }
+    );
   }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -1091,12 +1134,49 @@ function HeroDesignSystem3d({
       patternOpacity,
       className: cn("font-sans", className),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-396 px-0 sm:px-8", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container px-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex max-w-100 flex-col items-center gap-6 sm:max-w-125 lg:max-w-160", contentClassName), children: [
-          renderTrustBadge,
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-[2.8125rem] leading-none font-bold sm:text-[3.9375rem] lg:text-[5.3125rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-[2.8125rem] leading-none font-bold sm:text-[3.9375rem] lg:text-[5.3125rem]", headingClassName), children: heading })) }),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-base leading-snug text-balance sm:text-2xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          renderActions
-        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container px-4", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto flex max-w-100 flex-col items-center gap-6 sm:max-w-125 lg:max-w-160",
+              contentClassName
+            ),
+            children: [
+              renderTrustBadge,
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-center text-[2.8125rem] leading-none font-bold sm:text-[3.9375rem] lg:text-[5.3125rem]",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-center text-[2.8125rem] leading-none font-bold sm:text-[3.9375rem] lg:text-[5.3125rem]",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              )) }),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-center text-base leading-snug text-balance sm:text-2xl",
+                    getTextColor(background, "muted"),
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              renderActions
+            ]
+          }
+        ) }),
         renderImages
       ] })
     }

package/dist/hero-design-system-3d.js

@@ -940,7 +940,7 @@ var Section = React__default.forwardRef(
 );
 Section.displayName = "Section";
 function HeroDesignSystem3d({
-  trustBadge = "Trusted by over 7,000 customers",
+  trustBadge,
   trustBadgeSlot,
   heading,
   description,
@@ -979,87 +979,130 @@ function HeroDesignSystem3d({
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-wrap items-center gap-4 md:w-fit", actionsClassName), children: actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-      if (index === 0) {
-        return /* @__PURE__ */ jsxs(
-          Pressable,
-          {
-            asButton: true,
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex w-full flex-wrap items-center gap-4 md:w-fit",
+          actionsClassName
+        ),
+        children: actions.map((action, index) => {
+          const {
+            label,
+            icon,
+            iconAfter,
+            children,
             className: actionClassName,
-            ...pressableProps,
-            children: [
-              /* @__PURE__ */ jsx(
-                Img,
-                {
-                  src: logoMarkSrc,
-                  alt: "",
-                  className: "block size-6 shrink-0",
-                  optixFlowConfig
-                }
-              ),
-              /* @__PURE__ */ jsx("p", { className: cn("text-nowrap transition-all duration-300 ease-in-out", `group-hover:${getAccentColor(background)}`), children: label }),
-              /* @__PURE__ */ jsx(
-                DynamicIcon,
-                {
-                  name: "lucide/move-up-right",
-                  size: 24,
-                  className: "shrink-0 stroke-black transition-all duration-300 ease-in-out group-hover:stroke-primary"
-                }
-              )
-            ]
-          },
-          index
-        );
+            ...pressableProps
+          } = action;
+          if (index === 0) {
+            return /* @__PURE__ */ jsxs(
+              Pressable,
+              {
+                asButton: true,
+                className: actionClassName,
+                ...pressableProps,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Img,
+                    {
+                      src: logoMarkSrc,
+                      alt: "",
+                      className: "block size-6 shrink-0",
+                      optixFlowConfig
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "text-nowrap transition-all duration-300 ease-in-out",
+                        `group-hover:${getAccentColor(background)}`
+                      ),
+                      children: label
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    DynamicIcon,
+                    {
+                      name: "lucide/move-up-right",
+                      size: 24,
+                      className: "shrink-0 stroke-black transition-all duration-300 ease-in-out group-hover:stroke-primary"
+                    }
+                  )
+                ]
+              },
+              index
+            );
+          }
+          return /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              asButton: true,
+              className: actionClassName,
+              ...pressableProps,
+              children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                icon,
+                label,
+                iconAfter
+              ] })
+            },
+            index
+          );
+        })
       }
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
+    );
   }, [actionsSlot, actions, actionsClassName, logoMarkSrc, optixFlowConfig]);
   const renderImages = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsxs("div", { className: cn("relative mt-16 aspect-[1.2/1] overflow-hidden sm:-right-[10%] sm:mt-28 sm:aspect-[2.788990826/1]", imagesClassName), children: [
-      images[0] && /* @__PURE__ */ jsx("div", { className: "absolute top-[11%] left-[8%] z-10 aspect-[0.7/1] w-[80%] sm:left-[4%] sm:w-[45%]", children: /* @__PURE__ */ jsx("div", { className: "size-full transform-[rotateY(-30deg)_rotateX(-18deg)_rotate(-4deg)]", 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
-        }
-      ) }) }),
-      images[1] && /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-[70%] z-20 aspect-[0.7/1] w-[73%] -translate-x-1/2 sm:left-1/2 sm:w-[38%]", children: /* @__PURE__ */ jsx("div", { className: "size-full transform-[rotateY(-30deg)_rotateX(-18deg)_rotate(-4deg)] shadow-[-25px_0px_20px_0px_rgba(0,0,0,.04)]", 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
-        }
-      ) }) }),
-      images[2] && /* @__PURE__ */ jsx("div", { className: "absolute top-[3%] -right-[45%] z-30 aspect-[0.7/1] w-[85%] sm:-right-[2%] sm:w-[50%]", children: /* @__PURE__ */ jsx("div", { className: "size-full transform-[rotateY(-30deg)_rotateX(-18deg)_rotate(-4deg)] shadow-[-25px_0px_20px_0px_rgba(0,0,0,.04)]", children: /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: images[2].src,
-          alt: images[2].alt,
-          className: cn("block size-full object-cover object-center", images[2].className),
-          optixFlowConfig
-        }
-      ) }) })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative mt-16 aspect-[1.2/1] overflow-hidden sm:-right-[10%] sm:mt-28 sm:aspect-[2.788990826/1]",
+          imagesClassName
+        ),
+        children: [
+          images[0] && /* @__PURE__ */ jsx("div", { className: "absolute top-[11%] left-[8%] z-10 aspect-[0.7/1] w-[80%] sm:left-[4%] sm:w-[45%]", children: /* @__PURE__ */ jsx("div", { className: "size-full transform-[rotateY(-30deg)_rotateX(-18deg)_rotate(-4deg)]", 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
+            }
+          ) }) }),
+          images[1] && /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-[70%] z-20 aspect-[0.7/1] w-[73%] -translate-x-1/2 sm:left-1/2 sm:w-[38%]", children: /* @__PURE__ */ jsx("div", { className: "size-full transform-[rotateY(-30deg)_rotateX(-18deg)_rotate(-4deg)] shadow-[-25px_0px_20px_0px_rgba(0,0,0,.04)]", 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
+            }
+          ) }) }),
+          images[2] && /* @__PURE__ */ jsx("div", { className: "absolute top-[3%] -right-[45%] z-30 aspect-[0.7/1] w-[85%] sm:-right-[2%] sm:w-[50%]", children: /* @__PURE__ */ jsx("div", { className: "size-full transform-[rotateY(-30deg)_rotateX(-18deg)_rotate(-4deg)] shadow-[-25px_0px_20px_0px_rgba(0,0,0,.04)]", children: /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: images[2].src,
+              alt: images[2].alt,
+              className: cn(
+                "block size-full object-cover object-center",
+                images[2].className
+              ),
+              optixFlowConfig
+            }
+          ) }) })
+        ]
+      }
+    );
   }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -1070,12 +1113,49 @@ function HeroDesignSystem3d({
       patternOpacity,
       className: cn("font-sans", className),
       children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-396 px-0 sm:px-8", containerClassName), children: [
-        /* @__PURE__ */ jsx("div", { className: "container px-4", children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto flex max-w-100 flex-col items-center gap-6 sm:max-w-125 lg:max-w-160", contentClassName), children: [
-          renderTrustBadge,
-          /* @__PURE__ */ jsx("div", { className: "mb-2", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-center text-[2.8125rem] leading-none font-bold sm:text-[3.9375rem] lg:text-[5.3125rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-center text-[2.8125rem] leading-none font-bold sm:text-[3.9375rem] lg:text-[5.3125rem]", headingClassName), children: heading })) }),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-base leading-snug text-balance sm:text-2xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          renderActions
-        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "container px-4", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto flex max-w-100 flex-col items-center gap-6 sm:max-w-125 lg:max-w-160",
+              contentClassName
+            ),
+            children: [
+              renderTrustBadge,
+              /* @__PURE__ */ jsx("div", { className: "mb-2", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-center text-[2.8125rem] leading-none font-bold sm:text-[3.9375rem] lg:text-[5.3125rem]",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-center text-[2.8125rem] leading-none font-bold sm:text-[3.9375rem] lg:text-[5.3125rem]",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              )) }),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-center text-base leading-snug text-balance sm:text-2xl",
+                    getTextColor(background, "muted"),
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              renderActions
+            ]
+          }
+        ) }),
         renderImages
       ] })
     }