@opensite/ui 2.0.8 → 2.1.0

package/dist/hero-ecommerce-product-showcase.cjs

@@ -964,41 +964,51 @@ function HeroEcommerceProductShowcase({
   const renderStats = React3.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center gap-6 pt-4", statsClassName), children: stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs(React3__namespace.Fragment, { children: [
-      index > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-px bg-border" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn(
-              "flex items-center",
-              stat.icon ? "justify-between" : "justify-center"
-            ),
-            children: [
-              stat.icon,
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(
-                    "font-bold ",
-                    stat.icon ? "text-xl" : "text-2xl"
-                  ),
-                  children: stat.value
-                }
-              )
-            ]
-          }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row items-center gap-4 md:gap-6 pt-8 md:pt-12",
+          statsClassName
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm"), children: stat.label })
-      ] })
-    ] }, index)) });
+        children: stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs(React3__namespace.Fragment, { children: [
+          index > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-px bg-border hidden md:flex" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 justify-between flex-row md:flex-col text-left md:text-center w-full md:w-fit border md:border-none rounded-xl md:rounded-none p-4 md:p-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex items-center gap-2 w-fit md:w-full",
+                  stat.icon ? "justify-between" : "justify-center"
+                ),
+                children: [
+                  stat.icon,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "font-bold ",
+                        stat.icon ? "text-xl" : "text-2xl"
+                      ),
+                      children: stat.value
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm"), children: stat.label })
+          ] })
+        ] }, index))
+      }
+    );
   }, [statsSlot, stats, statsClassName]);
   const renderImages = React3.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid grid-cols-2 gap-4", imagesClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-        images[0] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden rounded-2xl"), children: /* @__PURE__ */ jsxRuntime.jsx(
+    const imgClassWrapper = "overflow-hidden rounded-3xl ring-4 ring-primary shadow-2xl";
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid grid-cols-2 gap-4 md:gap-8", imagesClassName), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 md:space-y-8", children: [
+        images[0] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: imgClassWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
           img.Img,
           {
             src: images[0].src,
@@ -1010,7 +1020,7 @@ function HeroEcommerceProductShowcase({
             optixFlowConfig
           }
         ) }),
-        images[1] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden rounded-2xl"), children: /* @__PURE__ */ jsxRuntime.jsx(
+        images[1] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: imgClassWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
           img.Img,
           {
             src: images[1].src,
@@ -1023,8 +1033,8 @@ function HeroEcommerceProductShowcase({
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 pt-8", children: [
-        images[2] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden rounded-2xl"), children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 md:space-y-8 pt-12", children: [
+        images[2] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: imgClassWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
           img.Img,
           {
             src: images[2].src,
@@ -1036,7 +1046,7 @@ function HeroEcommerceProductShowcase({
             optixFlowConfig
           }
         ) }),
-        images[3] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden rounded-2xl"), children: /* @__PURE__ */ jsxRuntime.jsx(
+        images[3] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: imgClassWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
           img.Img,
           {
             src: images[3].src,
@@ -1062,30 +1072,39 @@ function HeroEcommerceProductShowcase({
       className,
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-8 md:pt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "order-1", children: renderImages }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8 order-2", contentClassName), children: [
-          renderBadge,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "h1",
-            {
-              className: cn(
-                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance",
-                headingClassName
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "order-2 md:order-1", children: renderImages }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-4 md:gap-6 order-1 md:order-2",
+              contentClassName
+            ),
+            children: [
+              renderBadge,
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : description),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
               ),
-              children: heading
-            }
-          ) : heading),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : description),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            BlockActions,
-            {
-              actions,
-              actionsSlot,
-              actionsClassName
-            }
-          ),
-          renderStats
-        ] })
+              renderStats
+            ]
+          }
+        )
       ] }) })
     }
   );

package/dist/hero-ecommerce-product-showcase.js

@@ -943,41 +943,51 @@ function HeroEcommerceProductShowcase({
   const renderStats = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-6 pt-4", statsClassName), children: stats.map((stat, index) => /* @__PURE__ */ jsxs(React3.Fragment, { children: [
-      index > 0 && /* @__PURE__ */ jsx("div", { className: "h-12 w-px bg-border" }),
-      /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "flex items-center",
-              stat.icon ? "justify-between" : "justify-center"
-            ),
-            children: [
-              stat.icon,
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "font-bold ",
-                    stat.icon ? "text-xl" : "text-2xl"
-                  ),
-                  children: stat.value
-                }
-              )
-            ]
-          }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row items-center gap-4 md:gap-6 pt-8 md:pt-12",
+          statsClassName
         ),
-        /* @__PURE__ */ jsx("div", { className: cn("text-sm"), children: stat.label })
-      ] })
-    ] }, index)) });
+        children: stats.map((stat, index) => /* @__PURE__ */ jsxs(React3.Fragment, { children: [
+          index > 0 && /* @__PURE__ */ jsx("div", { className: "h-12 w-px bg-border hidden md:flex" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 justify-between flex-row md:flex-col text-left md:text-center w-full md:w-fit border md:border-none rounded-xl md:rounded-none p-4 md:p-0", children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex items-center gap-2 w-fit md:w-full",
+                  stat.icon ? "justify-between" : "justify-center"
+                ),
+                children: [
+                  stat.icon,
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "font-bold ",
+                        stat.icon ? "text-xl" : "text-2xl"
+                      ),
+                      children: stat.value
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: cn("text-sm"), children: stat.label })
+          ] })
+        ] }, index))
+      }
+    );
   }, [statsSlot, stats, statsClassName]);
   const renderImages = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-2 gap-4", imagesClassName), children: [
-      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-        images[0] && /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-2xl"), children: /* @__PURE__ */ jsx(
+    const imgClassWrapper = "overflow-hidden rounded-3xl ring-4 ring-primary shadow-2xl";
+    return /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-2 gap-4 md:gap-8", imagesClassName), children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4 md:space-y-8", children: [
+        images[0] && /* @__PURE__ */ jsx("div", { className: imgClassWrapper, children: /* @__PURE__ */ jsx(
           Img,
           {
             src: images[0].src,
@@ -989,7 +999,7 @@ function HeroEcommerceProductShowcase({
             optixFlowConfig
           }
         ) }),
-        images[1] && /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-2xl"), children: /* @__PURE__ */ jsx(
+        images[1] && /* @__PURE__ */ jsx("div", { className: imgClassWrapper, children: /* @__PURE__ */ jsx(
           Img,
           {
             src: images[1].src,
@@ -1002,8 +1012,8 @@ function HeroEcommerceProductShowcase({
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-4 pt-8", children: [
-        images[2] && /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-2xl"), children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4 md:space-y-8 pt-12", children: [
+        images[2] && /* @__PURE__ */ jsx("div", { className: imgClassWrapper, children: /* @__PURE__ */ jsx(
           Img,
           {
             src: images[2].src,
@@ -1015,7 +1025,7 @@ function HeroEcommerceProductShowcase({
             optixFlowConfig
           }
         ) }),
-        images[3] && /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-2xl"), children: /* @__PURE__ */ jsx(
+        images[3] && /* @__PURE__ */ jsx("div", { className: imgClassWrapper, children: /* @__PURE__ */ jsx(
           Img,
           {
             src: images[3].src,
@@ -1041,30 +1051,39 @@ function HeroEcommerceProductShowcase({
       className,
       containerClassName,
       children: /* @__PURE__ */ jsx("div", { className: "pt-8 md:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
-        /* @__PURE__ */ jsx("div", { className: "order-1", children: renderImages }),
-        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-8 order-2", contentClassName), children: [
-          renderBadge,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-            "h1",
-            {
-              className: cn(
-                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance",
-                headingClassName
+        /* @__PURE__ */ jsx("div", { className: "order-2 md:order-1", children: renderImages }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-4 md:gap-6 order-1 md:order-2",
+              contentClassName
+            ),
+            children: [
+              renderBadge,
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : description),
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
               ),
-              children: heading
-            }
-          ) : heading),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : description),
-          /* @__PURE__ */ jsx(
-            BlockActions,
-            {
-              actions,
-              actionsSlot,
-              actionsClassName
-            }
-          ),
-          renderStats
-        ] })
+              renderStats
+            ]
+          }
+        )
       ] }) })
     }
   );

package/dist/hero-enterprise-security.cjs

@@ -952,35 +952,47 @@ function HeroEnterpriseSecurity({
   const renderFeatures = React.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-20 grid gap-8 md:grid-cols-3", featuresClassName), children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-      Pressable,
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        href: feature.href,
-        className: cn("rounded-2xl border border-border p-6 text-center"),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn(
-                "mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full",
-                feature.iconBgClass
-              ),
-              children: feature.icon ?? /* @__PURE__ */ jsxRuntime.jsx(
-                DynamicIcon,
+        className: cn(
+          "mt-12 md:mt-20 grid gap-4 md:gap-8 grid-cols-1 md:grid-cols-3",
+          featuresClassName
+        ),
+        children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+          Pressable,
+          {
+            href: feature.href,
+            className: cn(
+              "rounded-2xl border border-border p-6 text-center",
+              "transition-all duration-500 hover:ring-2 hover:shadow-lg"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
                 {
-                  name: feature.iconName || "lucide/check",
-                  size: 24,
-                  className: feature.iconColorClass
+                  className: cn(
+                    "mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full",
+                    feature.iconBgClass
+                  ),
+                  children: feature.icon ?? /* @__PURE__ */ jsxRuntime.jsx(
+                    DynamicIcon,
+                    {
+                      name: feature.iconName || "lucide/check",
+                      size: 24,
+                      className: feature.iconColorClass
+                    }
+                  )
                 }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-lg font-semibold ", children: feature.title }),
-          feature.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: feature.description })
-        ]
-      },
-      index
-    )) });
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-lg font-semibold ", children: feature.title }),
+              feature.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: feature.description })
+            ]
+          },
+          index
+        ))
+      }
+    );
   }, [featuresSlot, features, featuresClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -993,40 +1005,49 @@ function HeroEnterpriseSecurity({
       className,
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-8 md:pt-0", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl text-center", contentClassName), children: [
-          badge && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: cn("px-4", badgeClassName), children: [
-            badgeIcon,
-            typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: badge }) : badge
-          ] }),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "h1",
-            {
-              className: cn(
-                "mb-8 text-4xl font-normal text-balance md:text-7xl",
-                headingClassName
-              ),
-              children: heading
-            }
-          ) : heading),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
-            {
-              className: cn(
-                "mb-12 max-w-full md:max-w-[70%] text-lg md:text-xl font-normal text-balance",
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : description),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            BlockActions,
-            {
-              actions,
-              actionsSlot,
-              actionsClassName
-            }
-          )
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto max-w-4xl text-center flex flex-col items-center gap-6",
+              contentClassName
+            ),
+            children: [
+              badge && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: cn("px-4", badgeClassName), children: [
+                badgeIcon,
+                typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: badge }) : badge
+              ] }),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl font-bold text-balance md:text-7xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "max-w-full md:max-w-[70%] text-lg md:text-xl font-normal text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : description),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
+            ]
+          }
+        ),
         renderFeatures
       ] })
     }