@opensite/ui 2.0.8 → 2.1.0

package/dist/hero-enterprise-security.js

@@ -931,35 +931,47 @@ function HeroEnterpriseSecurity({
   const renderFeatures = useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mt-20 grid gap-8 md:grid-cols-3", featuresClassName), children: features.map((feature, index) => /* @__PURE__ */ jsxs(
-      Pressable,
+    return /* @__PURE__ */ jsx(
+      "div",
       {
-        href: feature.href,
-        className: cn("rounded-2xl border border-border p-6 text-center"),
-        children: [
-          /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx(
+                    DynamicIcon,
+                    {
+                      name: feature.iconName || "lucide/check",
+                      size: 24,
+                      className: feature.iconColorClass
+                    }
+                  )
                 }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx("h3", { className: "mb-2 text-lg font-semibold ", children: feature.title }),
-          feature.description && /* @__PURE__ */ jsx("p", { className: "text-sm", children: feature.description })
-        ]
-      },
-      index
-    )) });
+              ),
+              /* @__PURE__ */ jsx("h3", { className: "mb-2 text-lg font-semibold ", children: feature.title }),
+              feature.description && /* @__PURE__ */ jsx("p", { className: "text-sm", children: feature.description })
+            ]
+          },
+          index
+        ))
+      }
+    );
   }, [featuresSlot, features, featuresClassName]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -972,40 +984,49 @@ function HeroEnterpriseSecurity({
       className,
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "pt-8 md:pt-0", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl text-center", contentClassName), children: [
-          badge && /* @__PURE__ */ jsxs(Badge, { className: cn("px-4", badgeClassName), children: [
-            badgeIcon,
-            typeof badge === "string" ? /* @__PURE__ */ jsx("span", { children: badge }) : badge
-          ] }),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-            "h1",
-            {
-              className: cn(
-                "mb-8 text-4xl font-normal text-balance md:text-7xl",
-                headingClassName
-              ),
-              children: heading
-            }
-          ) : heading),
-          description && (typeof description === "string" ? /* @__PURE__ */ 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__ */ jsx(
-            BlockActions,
-            {
-              actions,
-              actionsSlot,
-              actionsClassName
-            }
-          )
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto max-w-4xl text-center flex flex-col items-center gap-6",
+              contentClassName
+            ),
+            children: [
+              badge && /* @__PURE__ */ jsxs(Badge, { className: cn("px-4", badgeClassName), children: [
+                badgeIcon,
+                typeof badge === "string" ? /* @__PURE__ */ jsx("span", { children: badge }) : badge
+              ] }),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl font-bold text-balance md:text-7xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ 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__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
+            ]
+          }
+        ),
         renderFeatures
       ] })
     }

package/dist/hero-event-registration.cjs

@@ -958,23 +958,56 @@ function HeroEventRegistration({
 }) {
   const renderBadge = React3.useMemo(() => {
     if (badgeSlot) return badgeSlot;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: "px-4 gap-2", children: [
-      badgeIcon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: "px-4 py-1 gap-2", children: [
+      badgeIcon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon, size: 18 }),
       badgeText
     ] });
   }, [badgeSlot, badgeIcon, badgeText]);
   const renderStats = React3.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-3 gap-4 pt-4", statsClassName), children: stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-bold ", children: stat.value }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm"), children: stat.label })
-    ] }, index)) }) });
+    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
+        ),
+        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 renderLocation = React3.useMemo(() => {
     if (locationSlot) return locationSlot;
     if (!locationLabel && !locationSublabel) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-card p-4 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-card text-card-foreground p-4 shadow-lg ring-4 ring-primary", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
@@ -985,8 +1018,8 @@ function HeroEventRegistration({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        locationLabel && (typeof locationLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold ", children: locationLabel }) : locationLabel),
-        locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm"), children: locationSublabel }) : locationSublabel)
+        locationLabel && (typeof locationLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-card-foreground", children: locationLabel }) : locationLabel),
+        locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm text-card-foreground"), children: locationSublabel }) : locationSublabel)
       ] })
     ] }) });
   }, [locationSlot, locationLabel, locationSublabel]);
@@ -1020,7 +1053,7 @@ function HeroEventRegistration({
           "div",
           {
             className: cn(
-              "flex flex-col items-start gap-6 md:gap-8",
+              "flex flex-col items-start gap-4 md:gap-6",
               contentClassName
             ),
             children: [

package/dist/hero-event-registration.js

@@ -937,23 +937,56 @@ function HeroEventRegistration({
 }) {
   const renderBadge = useMemo(() => {
     if (badgeSlot) return badgeSlot;
-    return /* @__PURE__ */ jsxs(Badge, { className: "px-4 gap-2", children: [
-      badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon }),
+    return /* @__PURE__ */ jsxs(Badge, { className: "px-4 py-1 gap-2", children: [
+      badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 18 }),
       badgeText
     ] });
   }, [badgeSlot, badgeIcon, badgeText]);
   const renderStats = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: "flex justify-center w-full", children: /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-3 gap-4 pt-4", statsClassName), children: stats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold ", children: stat.value }),
-      /* @__PURE__ */ jsx("div", { className: cn("text-sm"), children: stat.label })
-    ] }, index)) }) });
+    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
+        ),
+        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 renderLocation = useMemo(() => {
     if (locationSlot) return locationSlot;
     if (!locationLabel && !locationSublabel) return null;
-    return /* @__PURE__ */ jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-card p-4 shadow-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    return /* @__PURE__ */ jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-card text-card-foreground p-4 shadow-lg ring-4 ring-primary", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ jsx(
         "div",
         {
@@ -964,8 +997,8 @@ function HeroEventRegistration({
         }
       ),
       /* @__PURE__ */ jsxs("div", { children: [
-        locationLabel && (typeof locationLabel === "string" ? /* @__PURE__ */ jsx("div", { className: "font-semibold ", children: locationLabel }) : locationLabel),
-        locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsx("div", { className: cn("text-sm"), children: locationSublabel }) : locationSublabel)
+        locationLabel && (typeof locationLabel === "string" ? /* @__PURE__ */ jsx("div", { className: "font-semibold text-card-foreground", children: locationLabel }) : locationLabel),
+        locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsx("div", { className: cn("text-sm text-card-foreground"), children: locationSublabel }) : locationSublabel)
       ] })
     ] }) });
   }, [locationSlot, locationLabel, locationSublabel]);
@@ -999,7 +1032,7 @@ function HeroEventRegistration({
           "div",
           {
             className: cn(
-              "flex flex-col items-start gap-6 md:gap-8",
+              "flex flex-col items-start gap-4 md:gap-6",
               contentClassName
             ),
             children: [