@opensite/ui 2.8.7 → 2.8.8

package/dist/registry.js

@@ -1174,41 +1174,55 @@ function MarkerMediaCarousel({
   React8.useEffect(() => {
     setActiveIndex(0);
   }, [mediaResetKey]);
-  const activeMediaItem = mediaItems[activeItemIndex];
-  const mediaType = resolveMediaType(activeMediaItem);
   return /* @__PURE__ */ jsxs("div", { className: "relative border-b border-border/60 bg-muted/40", children: [
-    /* @__PURE__ */ jsx("div", { className: "relative h-44 w-full overflow-hidden", children: mediaType === "video" ? /* @__PURE__ */ jsx(
-      "video",
-      {
-        className: "h-full w-full object-cover",
-        controls: true,
-        preload: "metadata",
-        poster: activeMediaItem.poster,
-        children: /* @__PURE__ */ jsx("source", { src: activeMediaItem.src })
-      }
-    ) : /* @__PURE__ */ jsx(
-      Img,
-      {
-        src: activeMediaItem.src,
-        alt: activeMediaItem.alt ?? "Map marker media",
-        className: "h-full w-full object-cover",
-        loading: "eager",
-        optixFlowConfig
-      }
-    ) }),
+    /* @__PURE__ */ jsx("div", { className: "relative aspect-video w-full overflow-hidden", children: mediaItems.map((item, index) => {
+      const isActive = index === activeItemIndex;
+      const mediaType = resolveMediaType(item);
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": !isActive,
+          className: cn(
+            "absolute inset-0 transition-opacity duration-500 ease-in-out",
+            isActive ? "opacity-100 z-[1]" : "opacity-0 z-0 pointer-events-none"
+          ),
+          children: mediaType === "video" ? /* @__PURE__ */ jsx(
+            "video",
+            {
+              className: "h-full w-full object-cover",
+              controls: isActive,
+              preload: "metadata",
+              poster: item.poster,
+              tabIndex: isActive ? 0 : -1,
+              children: /* @__PURE__ */ jsx("source", { src: item.src })
+            }
+          ) : /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: item.src,
+              alt: item.alt ?? "Map marker media",
+              className: "h-full w-full object-cover",
+              loading: "eager",
+              optixFlowConfig
+            }
+          )
+        },
+        normalizeId(item.id, `media-slide-${index}`)
+      );
+    }) }),
     totalItems > 1 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           "aria-label": "Show previous media",
-          className: "absolute left-2 top-1/2 inline-flex size-8 -translate-y-1/2 items-center justify-center rounded-full bg-card text-card-foreground shadow-sm transition hover:bg-muted hover:text-muted-foreground",
+          className: "absolute left-4 top-1/2 inline-flex size-10 -translate-y-1/2 items-center justify-center rounded-2xl bg-card text-card-foreground shadow-lg border-4 border-black hover:border-white hover:bg-black hover:text-white transition-all duration-500 z-[2]",
           onClick: () => {
             setActiveIndex(
               (current) => (current - 1 + totalItems) % totalItems
             );
           },
-          children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-left", size: 16 })
+          children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-left", size: 18 })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -1216,20 +1230,20 @@ function MarkerMediaCarousel({
         {
           type: "button",
           "aria-label": "Show next media",
-          className: "absolute right-2 top-1/2 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full bg-card text-card-foreground shadow-sm transition hover:bg-muted hover:text-muted-foreground",
+          className: "absolute right-4 top-1/2 inline-flex size-10 -translate-y-1/2 items-center justify-center rounded-2xl bg-card text-card-foreground shadow-lg border-4 border-black hover:border-white hover:bg-black hover:text-white transition-all duration-500 z-[2]",
           onClick: () => {
             setActiveIndex((current) => (current + 1) % totalItems);
           },
-          children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
+          children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 18 })
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 left-1/2 flex -translate-x-1/2 items-center gap-1.5", children: mediaItems.map((item, index) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 left-1/2 flex -translate-x-1/2 items-center gap-1.5 z-[2]", children: mediaItems.map((item, index) => /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           "aria-label": `Show media item ${index + 1}`,
           className: cn(
-            "h-2 rounded-full transition-all",
+            "h-2 rounded-full transition-all duration-300",
             index === activeItemIndex ? "w-6 bg-card" : "w-2 bg-card opacity-50 hover:opacity-100"
           ),
           onClick: () => setActiveIndex(index)
@@ -1560,9 +1574,9 @@ function GeoMap({
               {
                 type: "button",
                 "aria-label": "Close marker details",
-                className: "flex size-8 items-center justify-center rounded-full border border-border bg-card text-card-foreground transition hover:bg-muted hover:text-foreground absolute top-2 right-2 z-10",
+                className: "\n            flex size-12 items-center justify-center rounded-bl-lg rounded-br-0 rounded-t-0 bg-black text-white transition-all duration-500 absolute top-0 right-0 z-10 cursor-pointer ring-4 ring-white\n",
                 onClick: clearSelection,
-                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 16 })
+                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 20 })
               }
             ),
             markerMediaItems.length > 0 ? /* @__PURE__ */ jsx(
@@ -1584,7 +1598,7 @@ function GeoMap({
                   {
                     name: "lucide:map-pin",
                     className: "opacity-50",
-                    size: 14
+                    size: 18
                   }
                 ),
                 typeof selectedMarker.locationLine === "string" ? /* @__PURE__ */ jsx(
@@ -1606,7 +1620,7 @@ function GeoMap({
                   {
                     name: "lucide:clock",
                     className: "opacity-50",
-                    size: 14
+                    size: 18
                   }
                 ),
                 typeof selectedMarker.hoursLine === "string" ? /* @__PURE__ */ jsx("div", { className: "font-medium", children: selectedMarker.hoursLine }) : selectedMarker.hoursLine
@@ -1634,7 +1648,7 @@ function GeoMap({
                 "aria-label": "Close cluster details",
                 className: "flex size-8 items-center justify-center rounded-full border border-border bg-card text-card-foreground transition hover:bg-muted hover:text-foreground absolute top-2 right-2 z-10",
                 onClick: clearSelection,
-                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 16 })
+                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 20 })
               }
             ),
             /* @__PURE__ */ jsx("div", { className: "mb-3 flex items-start justify-between gap-3", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
@@ -33621,7 +33635,8 @@ function CarouselIconSidebar({
         src: image.src,
         alt: typeof image.title === "string" ? image.title : image.alt || "Carousel image",
         className: cn(
-          "h-full w-full rounded-lg object-cover cursor-pointer",
+          "aspect-4/3",
+          "h-full w-full object-cover cursor-pointer aspect-4/3",
           imageClassName
         ),
         loading: "lazy",
@@ -33681,13 +33696,13 @@ function CarouselIconSidebar({
         /* @__PURE__ */ jsx(Carousel, { setApi, className: cn("w-full", carouselClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md:gap-6 md:grid-cols-5", children: [
           /* @__PURE__ */ jsx("div", { className: "md:col-span-2", children: sidebarContent }),
           /* @__PURE__ */ jsx("div", { className: "h-full md:col-span-3", children: /* @__PURE__ */ jsx(
-            CarouselContent,
+            "div",
             {
               className: cn(
-                "overflow-hidden rounded-2xl shadow-lg h-full",
+                "overflow-hidden rounded-2xl shadow-lg",
                 carouselContentClassName
               ),
-              children: itemsContent
+              children: /* @__PURE__ */ jsx(CarouselContent, { children: itemsContent })
             }
           ) })
         ] }) }),
@@ -46020,6 +46035,7 @@ function TestimonialsStatsHeader({
   statItemClassName,
   testimonialsGridClassName,
   cardClassName,
+  statCardClassName,
   quoteClassName,
   authorClassName,
   background,
@@ -46038,6 +46054,11 @@ function TestimonialsStatsHeader({
     },
     []
   );
+  const renderStatIcon = useCallback((stat) => {
+    if (stat.iconSlot) return stat.iconSlot;
+    if (!stat.icon) return null;
+    return /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsx(DynamicIcon, { name: stat.icon, size: 32, className: stat.iconColor }) });
+  }, []);
   const getInitials = useCallback((name) => {
     return name.split(" ").map((n) => n[0]).join("");
   }, []);
@@ -46048,24 +46069,29 @@ function TestimonialsStatsHeader({
       "div",
       {
         className: cn(
-          "mb-12 grid grid-cols-2 gap-4 md:grid-cols-4",
+          "mb-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3",
           statsGridClassName
         ),
-        children: stats.map((stat, index) => /* @__PURE__ */ jsxs(
-          "div",
+        children: stats.map((stat) => /* @__PURE__ */ jsx(
+          Card,
           {
             className: cn(
-              "rounded-lg p-6 text-center",
-              getNestedCardBg(background),
-              getNestedCardTextColor(background),
-              statItemClassName
+              "overflow-hidden border p-0",
+              stat.className,
+              statCardClassName
             ),
-            children: [
-              typeof stat.value === "string" ? /* @__PURE__ */ jsx("p", { className: "text-3xl font-bold text-primary md:text-4xl", children: stat.value }) : stat.value,
-              typeof stat.label === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: stat.label }) : stat.label
-            ]
+            children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6 md:p-8", children: [
+              renderStatIcon(stat),
+              /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-end", children: [
+                stat.prefix && /* @__PURE__ */ jsx("span", { className: "mb-1 mr-1 text-2xl font-bold", children: stat.prefix }),
+                /* @__PURE__ */ jsx("h3", { className: "text-4xl font-bold tracking-tight leading-tight md:text-5xl", children: stat.value }),
+                stat.suffix && /* @__PURE__ */ jsx("span", { className: "mb-1 ml-1 text-2xl font-bold", children: stat.suffix })
+              ] }),
+              stat.label && /* @__PURE__ */ jsx("div", { className: "mb-4 text-xl font-semibold", children: stat.label }),
+              stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: "opacity-75", children: stat.description }) : stat.description)
+            ] })
           },
-          index
+          stat.id
         ))
       }
     );
@@ -46080,41 +46106,65 @@ function TestimonialsStatsHeader({
         children: testimonials.map((testimonial, index) => {
           const authorName = getAuthorName(testimonial);
           const avatarSrc = getAvatarSrc(testimonial);
-          return /* @__PURE__ */ jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6", children: [
-            /* @__PURE__ */ jsx("div", { className: "mb-4 flex gap-1", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx(
-              DynamicIcon,
-              {
-                name: "lucide/star",
-                size: 16,
-                className: "fill-primary text-primary"
-              },
-              i
-            )) }),
-            testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxs(
-              "p",
-              {
-                className: cn(
-                  "mb-6 text-sm leading-relaxed",
-                  quoteClassName
-                ),
-                children: [
-                  "\u201C",
-                  testimonial.quote,
-                  "\u201D"
-                ]
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: cn("mb-6", quoteClassName), children: testimonial.quote })),
-            /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", authorClassName), children: [
-              /* @__PURE__ */ jsxs(Avatar, { className: "size-10", children: [
-                /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
-                /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(authorName) })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { children: [
-                testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: testimonial.author }) : testimonial.author),
-                testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: testimonial.role }) : testimonial.role)
-              ] })
-            ] })
-          ] }) }, index);
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "bg-card text-card-foreground flex flex-col gap-6 rounded-2xl border py-0 shadow-xl",
+                cardClassName
+              ),
+              children: /* @__PURE__ */ jsx(CardContent, { className: "p-6", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-12 justify-between", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-4", children: [
+                  /* @__PURE__ */ jsx(StarRating, { rating: 5, size: 20 }),
+                  testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxs(
+                    "p",
+                    {
+                      className: cn(
+                        "mb-6 text-sm leading-relaxed",
+                        quoteClassName
+                      ),
+                      children: [
+                        "\u201C",
+                        testimonial.quote,
+                        "\u201D"
+                      ]
+                    }
+                  ) : /* @__PURE__ */ jsx("div", { className: cn("mb-6", quoteClassName), children: testimonial.quote }))
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn("flex items-center gap-3", authorClassName),
+                    children: [
+                      /* @__PURE__ */ jsxs(Avatar, { className: "size-10", children: [
+                        /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
+                        /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(authorName) })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                        /* @__PURE__ */ jsxs("div", { children: [
+                          testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "text-base font-medium", children: testimonial.author }) : testimonial.author),
+                          testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm opacity-75", children: testimonial.role }) : testimonial.role)
+                        ] }),
+                        testimonial.linkConfig?.href && /* @__PURE__ */ jsx(
+                          Pressable,
+                          {
+                            href: testimonial.linkConfig.href,
+                            className: cn(
+                              "text-sm  transition-all duration-300",
+                              "hover:underline hover:underline-offset-4",
+                              testimonial.linkConfig.className
+                            ),
+                            children: testimonial.linkConfig.label
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                )
+              ] }) })
+            },
+            index
+          );
         })
       }
     );
@@ -46348,7 +46398,7 @@ function TestimonialsMiniDividers({
       "div",
       {
         className: cn(
-          "relative grid border-x border-dashed md:grid-cols-3",
+          "relative grid border-x border-b border-dashed md:grid-cols-3",
           gridClassName
         ),
         children: [
@@ -46376,8 +46426,7 @@ function TestimonialsMiniDividers({
               {
                 className: cn(
                   "group flex flex-col gap-4 border-t border-dashed p-4 transition-colors duration-300 hover:bg-muted/50 lg:p-8",
-                  index === 1 && "md:border-x md:border-dashed",
-                  index === 2 ? "border-b" : "md:border-b",
+                  index % 3 === 1 && "md:border-x md:border-dashed",
                   itemClassName
                 ),
                 children: [
@@ -46624,13 +46673,19 @@ function TestimonialsLogoCards({
                 "h2",
                 {
                   className: cn(
-                    "text-3xl font-semibold tracking-tight md:text-4xl",
+                    "text-3xl font-semibold tracking-tight md:text-4xl text-balance",
                     headingClassName
                   ),
                   children: heading
                 }
               ) : heading),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg", descriptionClassName), children: description }) : description)
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn("mt-4 text-lg text-balance", descriptionClassName),
+                  children: description
+                }
+              ) : description)
             ]
           }
         ),
@@ -47100,7 +47155,7 @@ function TestimonialsScrollingColumns({
             motion.div,
             {
               className: cn(
-                "relative overflow-hidden rounded-2xl bg-card text-card-foreground shadow-sm",
+                "relative overflow-hidden rounded-2xl shadow-sm",
                 cardClassName
               ),
               variants: itemVariants2,
@@ -47124,7 +47179,7 @@ function TestimonialsScrollingColumns({
                       src: testimonial.logoSrc,
                       alt: typeof testimonial.company === "string" ? `${testimonial.company} logo` : typeof testimonial.author === "string" ? `${testimonial.author} company logo` : "Company logo",
                       className: cn(
-                        "mx-auto mb-6 max-h-12 max-w-32 object-contain md:max-h-16 md:max-w-48"
+                        "flex justify-start items-start mb-6 max-h-10 max-w-32 object-contain md:max-h-10 md:max-w-48"
                       ),
                       optixFlowConfig
                     }
@@ -47140,20 +47195,15 @@ function TestimonialsScrollingColumns({
                     "blockquote",
                     {
                       className: cn(
-                        "text-base font-medium leading-relaxed",
+                        "text-base font-base leading-relaxed",
                         quoteClassName
                       ),
                       children: testimonial.quote
                     }
                   ) : testimonial.quote),
-                  /* @__PURE__ */ jsx("figcaption", { className: cn("mt-4", authorClassName), children: /* @__PURE__ */ jsxs("p", { className: "font-semibold", children: [
-                    "\u2014",
-                    " ",
-                    testimonial.author && (typeof testimonial.author === "string" ? testimonial.author : null),
-                    testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsxs("span", { className: "ml-1", children: [
-                      ", ",
-                      testimonial.role
-                    ] }) : null)
+                  /* @__PURE__ */ jsx("figcaption", { className: cn("mt-4", authorClassName), children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                    testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("div", { className: "uppercase text-base font-semibold", children: testimonial.author }) : null),
+                    testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsx("div", { className: "text-sm font-thin", children: testimonial.role }) : null)
                   ] }) })
                 ] })
               ]
@@ -47206,7 +47256,7 @@ function TestimonialsScrollingColumns({
                 "p",
                 {
                   className: cn(
-                    "text-base text-base md:text-lg text-balance",
+                    "text-base md:text-lg text-balance",
                     descriptionClassName
                   ),
                   children: description
@@ -47231,8 +47281,8 @@ function TestimonialsMinimalNumbered({
   authorClassName,
   navigationClassName,
   background,
-  spacing = "lg",
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-8 md:py-12",
+  containerClassName = "w-full px-6 sm:px-6 md:px-8 lg:px-0 max-w-full md:max-w-lg min-h-70dvh h-70dvh flex flex-col items-center justify-center",
   pattern,
   patternOpacity
 }) {
@@ -47285,12 +47335,12 @@ function TestimonialsMinimalNumbered({
     if (!current) return null;
     const authorName = getAuthorName(current);
     const avatarSrc = getAvatarSrc(current);
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-8", contentClassName), children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-4 md:gap-8", contentClassName), children: [
       /* @__PURE__ */ jsx(
         "span",
         {
           className: cn(
-            "text-4xl md:text-8xl font-light leading-none select-none transition-all duration-500 md:text-9xl",
+            "text-4xl md:text-8xl font-light leading-none select-none transition-all duration-500",
             numberClassName
           ),
           style: { fontFeatureSettings: '"tnum"' },
@@ -47368,6 +47418,7 @@ function TestimonialsMinimalNumbered({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "max-w-4xl mx-auto", children: [
         renderedTestimonial,
         /* @__PURE__ */ jsxs(
@@ -47539,7 +47590,7 @@ function TestimonialsParallaxNumber({
             {
               className: cn(
                 "opacity-15",
-                "pointer-events-none absolute -left-8 top-1/2 -translate-y-1/2 select-none text-[20rem] font-bold leading-none tracking-tighter ",
+                "pointer-events-none absolute -left-8 top-1/2 -translate-y-1/2 select-none text-[20rem] font-bold leading-none tracking-tighter",
                 numberClassName
               ),
               style: { x: numberX, y: numberY, opacity: 0.1 },
@@ -47558,7 +47609,7 @@ function TestimonialsParallaxNumber({
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "relative flex", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center border-r-0 md:border-r border-border/50 pr-4 md:pr-16", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center border-r-0 md:border-r border-border/30 pr-4 md:pr-16", children: [
               /* @__PURE__ */ jsxs(
                 motion.span,
                 {
@@ -47593,7 +47644,7 @@ function TestimonialsParallaxNumber({
                   exit: { opacity: 0, x: 20 },
                   transition: { duration: 0.4 },
                   className: "mb-8",
-                  children: /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-2 rounded-full border border-border px-3 py-1 text-xs ", children: companyName })
+                  children: /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-2 rounded-full border border-border px-4 py-2 text-sm", children: companyName })
                 },
                 activeIndex
               ) }),
@@ -47601,7 +47652,8 @@ function TestimonialsParallaxNumber({
                 motion.blockquote,
                 {
                   className: cn(
-                    "text-2xl md:text-3xl font-light leading-[1.15] tracking-tight md:text-4xl lg:text-5xl",
+                    "text-2xl md:text-4xl lg:text-5xl",
+                    "font-light leading-[1.15] tracking-tight",
                     quoteClassName
                   ),
                   initial: "hidden",
@@ -47786,7 +47838,8 @@ function TestimonialsMasonryGrid({
   quoteClassName,
   authorClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -47799,9 +47852,12 @@ function TestimonialsMasonryGrid({
     if (typeof testimonial.author === "string") return testimonial.author;
     return "";
   }, []);
-  const getAvatarSrc = useCallback((testimonial) => {
-    return testimonial.avatarSrc || testimonial.avatar?.src;
-  }, []);
+  const getAvatarSrc = useCallback(
+    (testimonial) => {
+      return testimonial.avatarSrc || testimonial.avatar?.src;
+    },
+    []
+  );
   const getInitials = useCallback((name) => {
     return name.split(" ").map((n) => n[0]).join("");
   }, []);
@@ -47818,42 +47874,60 @@ function TestimonialsMasonryGrid({
         children: columns.map((column, columnIndex) => /* @__PURE__ */ jsx("div", { className: "space-y-4", children: column.map((testimonial, index) => {
           const authorName = getAuthorName(testimonial);
           const avatarSrc = getAvatarSrc(testimonial);
-          return /* @__PURE__ */ jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6", children: [
-            testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxs(
-              "p",
-              {
-                className: cn(
-                  "mb-4 text-sm leading-relaxed",
-                  quoteClassName
-                ),
-                children: [
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                cardClassName,
+                "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm"
+              ),
+              children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col justify-between p-6 gap-8", children: [
+                testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxs("blockquote", { className: "text-sm leading-relaxed line-clamp-3", children: [
                   "\u201C",
                   testimonial.quote,
                   "\u201D"
-                ]
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", quoteClassName), children: testimonial.quote })),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: cn("flex items-center gap-3", authorClassName),
-                children: [
-                  /* @__PURE__ */ jsxs(Avatar, { className: "size-9", children: [
+                ] }) : /* @__PURE__ */ jsx("div", { className: "line-clamp-3", children: testimonial.quote })),
+                /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsxs(Avatar, { className: "relative flex shrink-0 overflow-hidden rounded-full size-12 ring-4 ring-primary shadow-lg", children: [
                     /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
                     /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: getInitials(authorName) })
                   ] }),
-                  /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsxs("div", { className: "space-y-0 leading-tight", children: [
                     testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: testimonial.author }) : testimonial.author),
-                    testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: testimonial.role }) : testimonial.role)
+                    testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xs", children: testimonial.role }) : testimonial.role),
+                    testimonial.linkConfig?.href && /* @__PURE__ */ jsx(
+                      Pressable,
+                      {
+                        href: testimonial.linkConfig.href,
+                        className: cn(
+                          "text-sm  transition-all duration-300",
+                          "underline underline-offset-4",
+                          testimonial.linkConfig.className
+                        ),
+                        children: testimonial.linkConfig.label
+                      }
+                    )
                   ] })
-                ]
-              }
-            )
-          ] }) }, index);
+                ] })
+              ] })
+            },
+            index
+          );
         }) }, columnIndex))
       }
     );
-  }, [testimonialsSlot, gridClassName, columns, cardClassName, quoteClassName, authorClassName, testimonials, getAuthorName, getAvatarSrc, getInitials]);
+  }, [
+    testimonialsSlot,
+    gridClassName,
+    columns,
+    cardClassName,
+    quoteClassName,
+    authorClassName,
+    testimonials,
+    getAuthorName,
+    getAvatarSrc,
+    getInitials
+  ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -47862,32 +47936,33 @@ function TestimonialsMasonryGrid({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cn("mx-auto mb-12 max-w-2xl text-center", headerClassName),
+            className: cn(
+              "mx-auto mb-12 max-w-full md:max-w-2xl text-center",
+              headerClassName
+            ),
             children: [
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
                 "h2",
                 {
                   className: cn(
-                    "text-3xl font-semibold tracking-tight md:text-4xl",
+                    "text-3xl font-semibold tracking-tight md:text-4xl lg:text-6xl text-balance",
                     headingClassName
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              ) : heading),
               description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                 "p",
                 {
-                  className: cn(
-                    "mt-4 text-lg text-muted-foreground",
-                    descriptionClassName
-                  ),
+                  className: cn("mt-4 text-lg text-balance", descriptionClassName),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
+              ) : description)
             ]
           }
         ),
@@ -47906,7 +47981,8 @@ function TestimonialsLargeQuote({
   authorClassName,
   avatarClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -47925,49 +48001,78 @@ function TestimonialsLargeQuote({
     if (!testimonial) return null;
     const authorName = getAuthorName();
     const avatarSrc = getAvatarSrc();
-    return /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl text-center", contentClassName), children: [
-      /* @__PURE__ */ jsx(
-        DynamicIcon,
-        {
-          name: "lucide/quote",
-          size: 64,
-          className: cn("mx-auto mb-8 text-primary/20", quoteIconClassName)
-        }
-      ),
-      testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsx(
-        "blockquote",
-        {
-          className: cn(
-            "text-2xl font-medium leading-relaxed md:text-3xl lg:text-4xl",
-            quoteClassName
-          ),
-          children: testimonial.quote
-        }
-      ) : /* @__PURE__ */ jsx("div", { className: quoteClassName, children: testimonial.quote })),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "mt-10 flex flex-col items-center gap-4",
-            authorClassName
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "mx-auto max-full md:max-w-lg text-center",
+          contentClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            DynamicIcon,
+            {
+              name: "mdi/comment-quote-outline",
+              size: 48,
+              className: cn("mx-auto mb-8 ", quoteIconClassName)
+            }
           ),
-          children: [
-            /* @__PURE__ */ jsxs(Avatar, { className: cn("size-16", avatarClassName), children: [
-              /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
-              /* @__PURE__ */ jsx(AvatarFallback, { className: "text-lg", children: getInitials(authorName) })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold", children: testimonial.author }) : testimonial.author),
-              (testimonial.role || testimonial.company) && /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground", children: [
-                testimonial.role && (typeof testimonial.role === "string" ? testimonial.role : testimonial.role),
-                testimonial.company && (typeof testimonial.company === "string" ? ` at ${testimonial.company}` : testimonial.company)
-              ] })
-            ] })
-          ]
-        }
-      )
-    ] });
-  }, [testimonialSlot, contentClassName, quoteIconClassName, testimonial, quoteClassName, authorClassName, avatarClassName, getAuthorName, getAvatarSrc, getInitials]);
+          testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsx(
+            "blockquote",
+            {
+              className: cn(
+                "text-2xl font-light leading-relaxed md:text-3xl lg:text-4xl text-balance",
+                quoteClassName
+              ),
+              children: testimonial.quote
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: quoteClassName, children: testimonial.quote })),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "mt-10 md:mt-16 flex flex-col items-center gap-4 md:gap-8",
+                authorClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsxs(
+                  Avatar,
+                  {
+                    className: cn(
+                      "relative flex shrink-0 overflow-hidden rounded-full size-16 ring-4 ring-primary shadow-lg",
+                      avatarClassName
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
+                      /* @__PURE__ */ jsx(AvatarFallback, { className: "text-lg", children: getInitials(authorName) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+                  testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold", children: testimonial.author }) : testimonial.author),
+                  (testimonial.role || testimonial.company) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+                    /* @__PURE__ */ jsx("div", { className: "text-base font-normal opacity-75", children: testimonial.role && (typeof testimonial.role === "string" ? testimonial.role : testimonial.role) }),
+                    /* @__PURE__ */ jsx("div", { className: "text-sm uppercase font-semibold opacity-75", children: testimonial.company && (typeof testimonial.company === "string" ? ` at ${testimonial.company}` : testimonial.company) })
+                  ] })
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }, [
+    testimonialSlot,
+    contentClassName,
+    quoteIconClassName,
+    testimonial,
+    quoteClassName,
+    authorClassName,
+    avatarClassName,
+    getAuthorName,
+    getAvatarSrc,
+    getInitials
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -47976,6 +48081,7 @@ function TestimonialsLargeQuote({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: renderedTestimonial
     }
   );