@opensite/ui 1.6.9 → 1.7.0

package/dist/hero-marketplace-scattered-images.js

@@ -12,32 +12,6 @@ import { Img } from '@page-speed/img';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -942,7 +916,7 @@ function HeroMarketplaceScatteredImages({
   action,
   actionSlot,
   tagline,
-  taglineIcon = "lucide/globe",
+  taglineIcon,
   taglineSlot,
   images,
   imagesSlot,
@@ -962,7 +936,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, { children: [
       icon,
       label,
@@ -971,6 +952,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
@@ -995,50 +977,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,
     {
@@ -1048,14 +1054,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
       ] })
     }

package/dist/hero-mentorship-video-split.cjs

@@ -1071,7 +1071,7 @@ function HeroMentorshipVideoSplit({
     if (!videoThumbnail) return null;
     const aspectRatio = videoAspectRatio === "vertical" ? 9 / 16 : 16 / 9;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-      videoLabel && (typeof videoLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xl", children: videoLabel }) : videoLabel),
+      videoLabel && (typeof videoLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold uppercase opacity-75", children: videoLabel }) : videoLabel),
       /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -1095,7 +1095,7 @@ function HeroMentorshipVideoSplit({
                 optixFlowConfig
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "m-auto aspect-square z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "m-auto aspect-square z-10 bg-card text-card-foreground p-2 rounded-xl shadow-xl", children: /* @__PURE__ */ jsxRuntime.jsx(
               DynamicIcon,
               {
                 name: "lucide/play",
@@ -1107,7 +1107,14 @@ function HeroMentorshipVideoSplit({
         }
       )
     ] });
-  }, [videoSlot, videoThumbnail, videoLabel, videoAspectRatio, optixFlowConfig, setIsVideoOpen]);
+  }, [
+    videoSlot,
+    videoThumbnail,
+    videoLabel,
+    videoAspectRatio,
+    optixFlowConfig,
+    setIsVideoOpen
+  ]);
   const renderImage = React.useMemo(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
@@ -1135,12 +1142,12 @@ function HeroMentorshipVideoSplit({
         patternOpacity,
         className: cn("relative flex items-center justify-center", className),
         containerClassName,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-1 gap-6 lg:grid-cols-2", children: [
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col-reverse md:flex-row gap-6 md:gap-20", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
               className: cn(
-                "flex h-full flex-col justify-between gap-4",
+                "flex h-full flex-col justify-between gap-8",
                 contentClassName
               ),
               children: [
@@ -1149,7 +1156,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
@@ -1158,7 +1165,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
@@ -1184,12 +1191,24 @@ function HeroMentorshipVideoSplit({
         ] }) })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isVideoOpen, onOpenChange: setIsVideoOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: cn(
-      videoAspectRatio === "vertical" ? "sm:max-w-100" : "sm:max-w-200"
-    ), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: videoTitle }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: videoAspectRatio === "vertical" ? "aspect-9/16" : "aspect-video", children: /* @__PURE__ */ jsxRuntime.jsx("video", { controls: true, autoPlay: true, className: "h-full w-full rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoUrl, type: "video/mp4" }) }) })
-    ] }) })
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isVideoOpen, onOpenChange: setIsVideoOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      DialogContent,
+      {
+        className: cn(
+          videoAspectRatio === "vertical" ? "sm:max-w-100" : "sm:max-w-200"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: videoTitle }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: videoAspectRatio === "vertical" ? "aspect-9/16" : "aspect-video",
+              children: /* @__PURE__ */ jsxRuntime.jsx("video", { controls: true, autoPlay: true, className: "h-full w-full rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoUrl, type: "video/mp4" }) })
+            }
+          )
+        ]
+      }
+    ) })
   ] });
 }
 

package/dist/hero-mentorship-video-split.js

@@ -1048,7 +1048,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,
         {
@@ -1072,7 +1072,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",
@@ -1084,7 +1084,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;
@@ -1112,12 +1119,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: [
@@ -1126,7 +1133,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
@@ -1135,7 +1142,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
@@ -1161,12 +1168,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" }) })
+            }
+          )
+        ]
+      }
+    ) })
   ] });
 }
 

package/dist/hero-premium-split-avatars.cjs

@@ -966,12 +966,12 @@ function HeroPremiumSplitAvatars({
       patternOpacity,
       className: cn("relative flex items-center justify-center", className),
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex w-full flex-col md:flex-row", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex w-full flex-col md:flex-row gap-8 md:gap-20", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center lg:w-1/2", children: /* @__PURE__ */ jsxRuntime.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: [

package/dist/hero-premium-split-avatars.js

@@ -944,12 +944,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: [