@opensite/ui 2.8.6 → 2.8.7

package/dist/testimonials-mini-dividers.cjs

@@ -41,6 +41,23 @@ var DynamicIcon = React__namespace.memo(function DynamicIcon2({
   return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
+function StarRating({
+  rating,
+  size = 18,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center gap-0.5", className), children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsxRuntime.jsx(
+    DynamicIcon,
+    {
+      name: "icon-park-solid/star",
+      size,
+      className: cn(
+        star <= rating ? "fill-primary text-primary" : "fill-muted text-muted"
+      )
+    },
+    star
+  )) });
+}
 function Avatar({
   className,
   ...props
@@ -462,19 +479,6 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-function StarRating({ rating, size = 14 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-0.5", children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsxRuntime.jsx(
-    DynamicIcon,
-    {
-      name: "lucide/star",
-      size,
-      className: cn(
-        star <= rating ? "fill-primary text-primary" : "fill-muted text-muted"
-      )
-    },
-    star
-  )) });
-}
 function TestimonialsMiniDividers({
   testimonials,
   testimonialsSlot,
@@ -489,101 +493,134 @@ function TestimonialsMiniDividers({
   quoteClassName,
   authorClassName,
   background,
-  spacing,
+  spacing = "lg",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
   patternOpacity
 }) {
-  const getAuthorName = React.useCallback((testimonial) => {
-    if (typeof testimonial.author === "string") return testimonial.author;
-    return "";
-  }, []);
-  const getAvatarSrc = React.useCallback((testimonial) => {
-    return testimonial.avatarSrc || testimonial.avatar?.src;
-  }, []);
+  const getAuthorName = React.useCallback(
+    (testimonial) => {
+      if (typeof testimonial.author === "string") return testimonial.author;
+      return "";
+    },
+    []
+  );
+  const getAvatarSrc = React.useCallback(
+    (testimonial) => {
+      return testimonial.avatarSrc || testimonial.avatar?.src;
+    },
+    []
+  );
   const getInitials = React.useCallback((name) => {
     return name.split(" ").map((n) => n[0]).join("");
   }, []);
   const renderedTestimonials = React.useMemo(() => {
     if (testimonialsSlot) return testimonialsSlot;
     if (!testimonials || testimonials.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: cn(
-          "grid divide-y sm:grid-cols-2 sm:divide-x sm:divide-y-0 lg:grid-cols-3 lg:divide-x",
+          "relative grid border-x border-dashed md:grid-cols-3",
           gridClassName
         ),
-        children: testimonials.map((testimonial, index) => {
-          const authorName = getAuthorName(testimonial);
-          const avatarSrc = getAvatarSrc(testimonial);
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DynamicIcon,
             {
-              className: cn(
-                "p-6",
-                index >= 2 && "lg:border-t-0",
-                index >= 3 && "sm:border-t lg:border-t-0",
-                itemClassName
-              ),
-              children: [
-                testimonial.rating && /* @__PURE__ */ jsxRuntime.jsx(StarRating, { rating: testimonial.rating }),
-                testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsxs(
-                  "p",
-                  {
-                    className: cn(
-                      "mt-3 text-sm leading-relaxed",
-                      quoteClassName
-                    ),
-                    children: [
-                      "\u201C",
-                      testimonial.quote,
-                      "\u201D"
-                    ]
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-3", quoteClassName), children: testimonial.quote })),
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    className: cn("mt-4 flex items-center gap-3", authorClassName),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-8", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
-                        /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "text-xs", children: getInitials(authorName) })
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                        testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: testimonial.author }) : testimonial.author),
-                        testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: testimonial.role }) : testimonial.role)
-                      ] })
-                    ]
-                  }
-                )
-              ]
-            },
-            index
-          );
-        })
+              name: "lucide/sparkle",
+              size: 20,
+              className: "absolute top-0 right-0 translate-x-2.5 -translate-y-2.5 fill-primary"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DynamicIcon,
+            {
+              name: "lucide/sparkle",
+              size: 20,
+              className: "absolute top-0 left-0 -translate-x-2.5 -translate-y-2.5 fill-primary"
+            }
+          ),
+          testimonials.map((testimonial, index) => {
+            const authorName = getAuthorName(testimonial);
+            const avatarSrc = getAvatarSrc(testimonial);
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                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",
+                  itemClassName
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-10 shrink-0 rounded-md bg-card shadow-sm lg:size-12", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
+                      /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "rounded-md bg-card text-card-foreground text-sm", children: getInitials(authorName) })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("min-w-0", authorClassName), children: [
+                      testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate font-medium", children: testimonial.author }) : testimonial.author),
+                      testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm text-muted-foreground", children: testimonial.role }) : testimonial.role)
+                    ] })
+                  ] }),
+                  testimonial.rating != null && /* @__PURE__ */ jsxRuntime.jsx(StarRating, { rating: testimonial.rating }),
+                  testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsxs(
+                    "p",
+                    {
+                      className: cn(
+                        "text-sm leading-relaxed text-muted-foreground",
+                        quoteClassName
+                      ),
+                      children: [
+                        "\u201C",
+                        testimonial.quote,
+                        "\u201D"
+                      ]
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm", quoteClassName), children: testimonial.quote }))
+                ]
+              },
+              index
+            );
+          })
+        ]
       }
     );
-  }, [testimonialsSlot, gridClassName, testimonials, itemClassName, quoteClassName, authorClassName, getAuthorName, getAvatarSrc, getInitials]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  }, [
+    testimonialsSlot,
+    gridClassName,
+    testimonials,
+    itemClassName,
+    quoteClassName,
+    authorClassName,
+    getAuthorName,
+    getAvatarSrc,
+    getInitials
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
       spacing,
       pattern,
       patternOpacity,
-      className,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
+      className: cn("relative flex items-center justify-center", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: cn("mx-auto mb-12 max-w-2xl text-center", headerClassName),
-            children: [
+            className: cn(
+              "border-x border-t border-dashed px-4 py-6 md:py-16 md:px-16",
+              headerClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl", children: [
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "h2",
                 {
                   className: cn(
-                    "text-3xl font-semibold tracking-tight md:text-4xl",
+                    "text-center text-3xl font-semibold tracking-tight md:text-4xl",
                     headingClassName
                   ),
                   children: heading
@@ -593,17 +630,17 @@ function TestimonialsMiniDividers({
                 "p",
                 {
                   className: cn(
-                    "mt-4 text-lg text-muted-foreground",
+                    "mx-auto mt-4 max-w-2xl text-center text-lg text-balance",
                     descriptionClassName
                   ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
-            ]
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+            ] })
           }
         ),
         renderedTestimonials
-      ]
+      ] })
     }
   );
 }

package/dist/testimonials-mini-dividers.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-B8KCpwXH.cjs';
-import { T as TestimonialItem } from './blocks-BtDAbw8d.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-C3xYbyms.cjs';
+import { T as TestimonialItem } from './blocks-D1hqLk46.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 
@@ -81,13 +81,17 @@ interface TestimonialsMiniDividersProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
- * TestimonialsMiniDividers - A grid of compact testimonial cards separated by subtle
- * dividers. Each card displays a short quote, star rating, author avatar, name, and
- * role. The divider pattern creates visual separation while maintaining a cohesive
- * layout. Ideal for displaying multiple brief testimonials in a structured, scannable
- * format.
+ * TestimonialsMiniDividers - A grid of compact testimonial cards with dashed border
+ * styling and sparkle decorations. Each card displays a short quote, star rating,
+ * author avatar, name, and role inside a structured dashed-border layout inspired
+ * by the hero-dashed-border-features pattern. Ideal for displaying multiple brief
+ * testimonials in a visually distinctive, scannable format.
  *
  * @example
  * ```tsx
@@ -108,6 +112,6 @@ interface TestimonialsMiniDividersProps {
  * />
  * ```
  */
-declare function TestimonialsMiniDividers({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, itemClassName, quoteClassName, authorClassName, background, spacing, pattern, patternOpacity, }: TestimonialsMiniDividersProps): React.JSX.Element;
+declare function TestimonialsMiniDividers({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, itemClassName, quoteClassName, authorClassName, background, spacing, containerClassName, pattern, patternOpacity, }: TestimonialsMiniDividersProps): React.JSX.Element;
 
 export { type MiniTestimonialItem, TestimonialsMiniDividers, type TestimonialsMiniDividersProps };

package/dist/testimonials-mini-dividers.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-rTRuDt0r.js';
-import { T as TestimonialItem } from './blocks-BlWXj9GI.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-o1TkNw2C.js';
+import { T as TestimonialItem } from './blocks-kcru1Ogu.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 
@@ -81,13 +81,17 @@ interface TestimonialsMiniDividersProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
- * TestimonialsMiniDividers - A grid of compact testimonial cards separated by subtle
- * dividers. Each card displays a short quote, star rating, author avatar, name, and
- * role. The divider pattern creates visual separation while maintaining a cohesive
- * layout. Ideal for displaying multiple brief testimonials in a structured, scannable
- * format.
+ * TestimonialsMiniDividers - A grid of compact testimonial cards with dashed border
+ * styling and sparkle decorations. Each card displays a short quote, star rating,
+ * author avatar, name, and role inside a structured dashed-border layout inspired
+ * by the hero-dashed-border-features pattern. Ideal for displaying multiple brief
+ * testimonials in a visually distinctive, scannable format.
  *
  * @example
  * ```tsx
@@ -108,6 +112,6 @@ interface TestimonialsMiniDividersProps {
  * />
  * ```
  */
-declare function TestimonialsMiniDividers({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, itemClassName, quoteClassName, authorClassName, background, spacing, pattern, patternOpacity, }: TestimonialsMiniDividersProps): React.JSX.Element;
+declare function TestimonialsMiniDividers({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, itemClassName, quoteClassName, authorClassName, background, spacing, containerClassName, pattern, patternOpacity, }: TestimonialsMiniDividersProps): React.JSX.Element;
 
 export { type MiniTestimonialItem, TestimonialsMiniDividers, type TestimonialsMiniDividersProps };

package/dist/testimonials-mini-dividers.js

@@ -19,6 +19,23 @@ var DynamicIcon = React.memo(function DynamicIcon2({
   return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
+function StarRating({
+  rating,
+  size = 18,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-0.5", className), children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsx(
+    DynamicIcon,
+    {
+      name: "icon-park-solid/star",
+      size,
+      className: cn(
+        star <= rating ? "fill-primary text-primary" : "fill-muted text-muted"
+      )
+    },
+    star
+  )) });
+}
 function Avatar({
   className,
   ...props
@@ -440,19 +457,6 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-function StarRating({ rating, size = 14 }) {
-  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5", children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsx(
-    DynamicIcon,
-    {
-      name: "lucide/star",
-      size,
-      className: cn(
-        star <= rating ? "fill-primary text-primary" : "fill-muted text-muted"
-      )
-    },
-    star
-  )) });
-}
 function TestimonialsMiniDividers({
   testimonials,
   testimonialsSlot,
@@ -467,101 +471,134 @@ function TestimonialsMiniDividers({
   quoteClassName,
   authorClassName,
   background,
-  spacing,
+  spacing = "lg",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
   patternOpacity
 }) {
-  const getAuthorName = useCallback((testimonial) => {
-    if (typeof testimonial.author === "string") return testimonial.author;
-    return "";
-  }, []);
-  const getAvatarSrc = useCallback((testimonial) => {
-    return testimonial.avatarSrc || testimonial.avatar?.src;
-  }, []);
+  const getAuthorName = useCallback(
+    (testimonial) => {
+      if (typeof testimonial.author === "string") return testimonial.author;
+      return "";
+    },
+    []
+  );
+  const getAvatarSrc = useCallback(
+    (testimonial) => {
+      return testimonial.avatarSrc || testimonial.avatar?.src;
+    },
+    []
+  );
   const getInitials = useCallback((name) => {
     return name.split(" ").map((n) => n[0]).join("");
   }, []);
   const renderedTestimonials = useMemo(() => {
     if (testimonialsSlot) return testimonialsSlot;
     if (!testimonials || testimonials.length === 0) return null;
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
-          "grid divide-y sm:grid-cols-2 sm:divide-x sm:divide-y-0 lg:grid-cols-3 lg:divide-x",
+          "relative grid border-x border-dashed md:grid-cols-3",
           gridClassName
         ),
-        children: testimonials.map((testimonial, index) => {
-          const authorName = getAuthorName(testimonial);
-          const avatarSrc = getAvatarSrc(testimonial);
-          return /* @__PURE__ */ jsxs(
-            "div",
+        children: [
+          /* @__PURE__ */ jsx(
+            DynamicIcon,
             {
-              className: cn(
-                "p-6",
-                index >= 2 && "lg:border-t-0",
-                index >= 3 && "sm:border-t lg:border-t-0",
-                itemClassName
-              ),
-              children: [
-                testimonial.rating && /* @__PURE__ */ jsx(StarRating, { rating: testimonial.rating }),
-                testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxs(
-                  "p",
-                  {
-                    className: cn(
-                      "mt-3 text-sm leading-relaxed",
-                      quoteClassName
-                    ),
-                    children: [
-                      "\u201C",
-                      testimonial.quote,
-                      "\u201D"
-                    ]
-                  }
-                ) : /* @__PURE__ */ jsx("div", { className: cn("mt-3", quoteClassName), children: testimonial.quote })),
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: cn("mt-4 flex items-center gap-3", authorClassName),
-                    children: [
-                      /* @__PURE__ */ jsxs(Avatar, { className: "size-8", children: [
-                        /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
-                        /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", 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
-          );
-        })
+              name: "lucide/sparkle",
+              size: 20,
+              className: "absolute top-0 right-0 translate-x-2.5 -translate-y-2.5 fill-primary"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DynamicIcon,
+            {
+              name: "lucide/sparkle",
+              size: 20,
+              className: "absolute top-0 left-0 -translate-x-2.5 -translate-y-2.5 fill-primary"
+            }
+          ),
+          testimonials.map((testimonial, index) => {
+            const authorName = getAuthorName(testimonial);
+            const avatarSrc = getAvatarSrc(testimonial);
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                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",
+                  itemClassName
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+                    /* @__PURE__ */ jsxs(Avatar, { className: "size-10 shrink-0 rounded-md bg-card shadow-sm lg:size-12", children: [
+                      /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
+                      /* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-md bg-card text-card-foreground text-sm", children: getInitials(authorName) })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", authorClassName), children: [
+                      testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "truncate font-medium", children: testimonial.author }) : testimonial.author),
+                      testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-muted-foreground", children: testimonial.role }) : testimonial.role)
+                    ] })
+                  ] }),
+                  testimonial.rating != null && /* @__PURE__ */ jsx(StarRating, { rating: testimonial.rating }),
+                  testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxs(
+                    "p",
+                    {
+                      className: cn(
+                        "text-sm leading-relaxed text-muted-foreground",
+                        quoteClassName
+                      ),
+                      children: [
+                        "\u201C",
+                        testimonial.quote,
+                        "\u201D"
+                      ]
+                    }
+                  ) : /* @__PURE__ */ jsx("div", { className: cn("text-sm", quoteClassName), children: testimonial.quote }))
+                ]
+              },
+              index
+            );
+          })
+        ]
       }
     );
-  }, [testimonialsSlot, gridClassName, testimonials, itemClassName, quoteClassName, authorClassName, getAuthorName, getAvatarSrc, getInitials]);
-  return /* @__PURE__ */ jsxs(
+  }, [
+    testimonialsSlot,
+    gridClassName,
+    testimonials,
+    itemClassName,
+    quoteClassName,
+    authorClassName,
+    getAuthorName,
+    getAvatarSrc,
+    getInitials
+  ]);
+  return /* @__PURE__ */ jsx(
     Section,
     {
       background,
       spacing,
       pattern,
       patternOpacity,
-      className,
-      children: [
-        /* @__PURE__ */ jsxs(
+      className: cn("relative flex items-center justify-center", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn("mx-auto mb-12 max-w-2xl text-center", headerClassName),
-            children: [
+            className: cn(
+              "border-x border-t border-dashed px-4 py-6 md:py-16 md:px-16",
+              headerClassName
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl", children: [
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
                 "h2",
                 {
                   className: cn(
-                    "text-3xl font-semibold tracking-tight md:text-4xl",
+                    "text-center text-3xl font-semibold tracking-tight md:text-4xl",
                     headingClassName
                   ),
                   children: heading
@@ -571,17 +608,17 @@ function TestimonialsMiniDividers({
                 "p",
                 {
                   className: cn(
-                    "mt-4 text-lg text-muted-foreground",
+                    "mx-auto mt-4 max-w-2xl text-center text-lg text-balance",
                     descriptionClassName
                   ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
-            ]
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+            ] })
           }
         ),
         renderedTestimonials
-      ]
+      ] })
     }
   );
 }