@opensite/ui 2.8.6 → 2.8.8

package/dist/testimonials-large-quote.js

@@ -450,7 +450,8 @@ function TestimonialsLargeQuote({
   authorClassName,
   avatarClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -469,49 +470,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,
     {
@@ -520,6 +550,7 @@ function TestimonialsLargeQuote({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: renderedTestimonial
     }
   );

package/dist/testimonials-list-verified.cjs

@@ -43,6 +43,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
@@ -484,19 +501,6 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-function StarRating({ rating, size = 16 }) {
-  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 TestimonialsListVerified({
   reviews,
   reviewsSlot,
@@ -509,7 +513,8 @@ function TestimonialsListVerified({
   contentClassName,
   authorClassName,
   background,
-  spacing,
+  spacing = "lg",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
   patternOpacity
 }) {
@@ -528,35 +533,49 @@ function TestimonialsListVerified({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-0", children: reviews.map((review, index) => {
       const authorName = getAuthorName(review);
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reviewClassName, children: [
-        index > 0 && /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-6" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-3", contentClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(StarRating, { rating: review.rating, size: 16 }),
-            review.title && (typeof review.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-2 font-medium", children: review.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: review.title }))
+        index > 0 && /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "bg-border/50 shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-12 md:my-16" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-6 md:space-y-12", contentClassName), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(StarRating, { rating: review.rating, size: 22 }),
+            review.title && (typeof review.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-medium", children: review.title }) : review.title)
           ] }),
-          review.content && (typeof review.content === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: review.content }) : review.content),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-3", authorClassName), children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-8", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: review.avatarSrc, alt: authorName }),
-              /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "text-xs", children: getInitials(authorName) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
-              review.author && (typeof review.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: review.author }) : review.author),
-              review.verified && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 text-emerald-600", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/badge-check", size: 16 }),
-                verifiedPurchaseLabel && (typeof verifiedPurchaseLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", children: verifiedPurchaseLabel }) : verifiedPurchaseLabel),
-                !verifiedPurchaseLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", children: "Verified Purchase" })
-              ] }),
-              review.date && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "\xB7" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: review.date })
-              ] })
-            ] })
+          review.content && (typeof review.content === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base md:text-lg leading-relaxed font-light", children: review.content }) : review.content),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between w-full"), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn("flex items-center gap-5", authorClassName),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-12 ring-4 ring-primary shadow-lg", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: review.avatarSrc, alt: authorName }),
+                    /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "text-md", children: getInitials(authorName) })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-base flex-col items-start", children: [
+                    review.author && (typeof review.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: review.author }) : review.author),
+                    review.verified && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/badge-check", size: 18 }),
+                      verifiedPurchaseLabel && (typeof verifiedPurchaseLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: verifiedPurchaseLabel }) : verifiedPurchaseLabel),
+                      !verifiedPurchaseLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: "Verified Purchase" })
+                    ] })
+                  ] })
+                ]
+              }
+            ),
+            review.date && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative", children: review.date })
           ] })
         ] })
       ] }, index);
     }) });
-  }, [reviewsSlot, reviews, reviewClassName, contentClassName, authorClassName, verifiedPurchaseLabel, getAuthorName, getInitials]);
+  }, [
+    reviewsSlot,
+    reviews,
+    reviewClassName,
+    contentClassName,
+    authorClassName,
+    verifiedPurchaseLabel,
+    getAuthorName,
+    getInitials
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -565,21 +584,21 @@ function TestimonialsListVerified({
       pattern,
       patternOpacity,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-8", headerClassName), children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-full md:max-w-3xl", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 md:mb-24 space-y-6", headerClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h2",
             {
               className: cn(
-                "text-2xl font-semibold tracking-tight md:text-3xl",
+                "text-2xl font-semibold tracking-tight md:text-3xl lg:text-4xl",
                 headingClassName
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          ) : heading),
           totalReviews > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(StarRating, { rating: Math.round(averageRating), size: 20 }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(StarRating, { rating: Math.round(averageRating), size: 22 }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm", children: [
               averageRating.toFixed(1),
               " out of 5 \xB7 ",
               totalReviews,

package/dist/testimonials-list-verified.d.cts

@@ -97,6 +97,10 @@ interface TestimonialsListVerifiedProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * TestimonialsListVerified - A clean, vertical list of customer reviews with rating summary,
@@ -124,6 +128,6 @@ interface TestimonialsListVerifiedProps {
  * />
  * ```
  */
-declare function TestimonialsListVerified({ reviews, reviewsSlot, heading, verifiedPurchaseLabel, className, headerClassName, headingClassName, reviewClassName, contentClassName, authorClassName, background, spacing, pattern, patternOpacity, }: TestimonialsListVerifiedProps): React.JSX.Element;
+declare function TestimonialsListVerified({ reviews, reviewsSlot, heading, verifiedPurchaseLabel, className, headerClassName, headingClassName, reviewClassName, contentClassName, authorClassName, background, spacing, containerClassName, pattern, patternOpacity, }: TestimonialsListVerifiedProps): React.JSX.Element;
 
 export { type ReviewItem, TestimonialsListVerified, type TestimonialsListVerifiedProps };

package/dist/testimonials-list-verified.d.ts

@@ -97,6 +97,10 @@ interface TestimonialsListVerifiedProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * TestimonialsListVerified - A clean, vertical list of customer reviews with rating summary,
@@ -124,6 +128,6 @@ interface TestimonialsListVerifiedProps {
  * />
  * ```
  */
-declare function TestimonialsListVerified({ reviews, reviewsSlot, heading, verifiedPurchaseLabel, className, headerClassName, headingClassName, reviewClassName, contentClassName, authorClassName, background, spacing, pattern, patternOpacity, }: TestimonialsListVerifiedProps): React.JSX.Element;
+declare function TestimonialsListVerified({ reviews, reviewsSlot, heading, verifiedPurchaseLabel, className, headerClassName, headingClassName, reviewClassName, contentClassName, authorClassName, background, spacing, containerClassName, pattern, patternOpacity, }: TestimonialsListVerifiedProps): React.JSX.Element;
 
 export { type ReviewItem, TestimonialsListVerified, type TestimonialsListVerifiedProps };

package/dist/testimonials-list-verified.js

@@ -4,7 +4,7 @@ import React__default, { useCallback, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Icon } from '@page-speed/icon';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 
@@ -20,6 +20,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
@@ -461,19 +478,6 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-function StarRating({ rating, size = 16 }) {
-  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 TestimonialsListVerified({
   reviews,
   reviewsSlot,
@@ -486,7 +490,8 @@ function TestimonialsListVerified({
   contentClassName,
   authorClassName,
   background,
-  spacing,
+  spacing = "lg",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
   patternOpacity
 }) {
@@ -505,35 +510,49 @@ function TestimonialsListVerified({
     return /* @__PURE__ */ jsx("div", { className: "space-y-0", children: reviews.map((review, index) => {
       const authorName = getAuthorName(review);
       return /* @__PURE__ */ jsxs("div", { className: reviewClassName, children: [
-        index > 0 && /* @__PURE__ */ jsx(Separator, { className: "my-6" }),
-        /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", contentClassName), children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx(StarRating, { rating: review.rating, size: 16 }),
-            review.title && (typeof review.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mt-2 font-medium", children: review.title }) : /* @__PURE__ */ jsx("div", { className: "mt-2", children: review.title }))
+        index > 0 && /* @__PURE__ */ jsx(Separator, { className: "bg-border/50 shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-12 md:my-16" }),
+        /* @__PURE__ */ jsxs("div", { className: cn("space-y-6 md:space-y-12", contentClassName), children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsx(StarRating, { rating: review.rating, size: 22 }),
+            review.title && (typeof review.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "font-medium", children: review.title }) : review.title)
           ] }),
-          review.content && (typeof review.content === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: review.content }) : review.content),
-          /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", authorClassName), children: [
-            /* @__PURE__ */ jsxs(Avatar, { className: "size-8", children: [
-              /* @__PURE__ */ jsx(AvatarImage, { src: review.avatarSrc, alt: authorName }),
-              /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: getInitials(authorName) })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
-              review.author && (typeof review.author === "string" ? /* @__PURE__ */ jsx("span", { className: "font-medium", children: review.author }) : review.author),
-              review.verified && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-emerald-600", children: [
-                /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/badge-check", size: 16 }),
-                verifiedPurchaseLabel && (typeof verifiedPurchaseLabel === "string" ? /* @__PURE__ */ jsx("span", { className: "text-xs", children: verifiedPurchaseLabel }) : verifiedPurchaseLabel),
-                !verifiedPurchaseLabel && /* @__PURE__ */ jsx("span", { className: "text-xs", children: "Verified Purchase" })
-              ] }),
-              review.date && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\xB7" }),
-                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: review.date })
-              ] })
-            ] })
+          review.content && (typeof review.content === "string" ? /* @__PURE__ */ jsx("p", { className: "text-base md:text-lg leading-relaxed font-light", children: review.content }) : review.content),
+          /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between w-full"), children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn("flex items-center gap-5", authorClassName),
+                children: [
+                  /* @__PURE__ */ jsxs(Avatar, { className: "size-12 ring-4 ring-primary shadow-lg", children: [
+                    /* @__PURE__ */ jsx(AvatarImage, { src: review.avatarSrc, alt: authorName }),
+                    /* @__PURE__ */ jsx(AvatarFallback, { className: "text-md", children: getInitials(authorName) })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-base flex-col items-start", children: [
+                    review.author && (typeof review.author === "string" ? /* @__PURE__ */ jsx("span", { className: "font-medium", children: review.author }) : review.author),
+                    review.verified && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/badge-check", size: 18 }),
+                      verifiedPurchaseLabel && (typeof verifiedPurchaseLabel === "string" ? /* @__PURE__ */ jsx("span", { className: "text-sm", children: verifiedPurchaseLabel }) : verifiedPurchaseLabel),
+                      !verifiedPurchaseLabel && /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Verified Purchase" })
+                    ] })
+                  ] })
+                ]
+              }
+            ),
+            review.date && /* @__PURE__ */ jsx("span", { className: "relative", children: review.date })
           ] })
         ] })
       ] }, index);
     }) });
-  }, [reviewsSlot, reviews, reviewClassName, contentClassName, authorClassName, verifiedPurchaseLabel, getAuthorName, getInitials]);
+  }, [
+    reviewsSlot,
+    reviews,
+    reviewClassName,
+    contentClassName,
+    authorClassName,
+    verifiedPurchaseLabel,
+    getAuthorName,
+    getInitials
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -542,21 +561,21 @@ function TestimonialsListVerified({
       pattern,
       patternOpacity,
       className,
-      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-8", headerClassName), children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-full md:max-w-3xl", children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 md:mb-24 space-y-6", headerClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h2",
             {
               className: cn(
-                "text-2xl font-semibold tracking-tight md:text-3xl",
+                "text-2xl font-semibold tracking-tight md:text-3xl lg:text-4xl",
                 headingClassName
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          ) : heading),
           totalReviews > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx(StarRating, { rating: Math.round(averageRating), size: 20 }),
-            /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(StarRating, { rating: Math.round(averageRating), size: 22 }),
+            /* @__PURE__ */ jsxs("span", { className: "text-sm", children: [
               averageRating.toFixed(1),
               " out of 5 \xB7 ",
               totalReviews,

package/dist/testimonials-logo-cards.cjs

@@ -508,18 +508,25 @@ function TestimonialsLogoCards({
   quoteClassName,
   authorClassName,
   background,
-  spacing,
+  spacing = "lg",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
   patternOpacity,
   optixFlowConfig
 }) {
-  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("");
   }, []);
@@ -550,7 +557,10 @@ function TestimonialsLogoCards({
                   {
                     src: testimonial.companyLogo,
                     alt: testimonial.companyLogoAlt || "Company logo",
-                    className: "h-6 w-auto object-contain dark:invert",
+                    className: cn(
+                      index === 0 ? "h-10" : "h-5",
+                      "w-auto object-contain"
+                    ),
                     optixFlowConfig
                   }
                 ) }),
@@ -567,20 +577,29 @@ function TestimonialsLogoCards({
                         {
                           className: cn(
                             "leading-relaxed",
-                            index === 0 ? "text-xl font-medium" : "text-sm",
+                            index === 0 ? "text-lg md:text-xl font-light" : "text-sm md:text-base",
                             quoteClassName
                           ),
                           children: testimonial.quote
                         }
-                      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: quoteClassName, children: testimonial.quote })),
+                      ) : testimonial.quote),
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-3", authorClassName), children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: cn(index === 0 ? "size-12" : "size-10"), children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
-                          /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: getInitials(authorName) })
-                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          Avatar,
+                          {
+                            className: cn(
+                              index === 0 ? "size-12" : "size-10",
+                              "ring-4 ring-primary"
+                            ),
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
+                              /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: getInitials(authorName) })
+                            ]
+                          }
+                        ),
                         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                          testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("cite", { className: "text-sm font-medium not-italic", 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)
+                          testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("cite", { className: "text-sm md:text-base font-medium", children: testimonial.author }) : testimonial.author),
+                          testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs md:text-sm", children: testimonial.role }) : testimonial.role)
                         ] })
                       ] })
                     ]
@@ -593,7 +612,20 @@ function TestimonialsLogoCards({
         })
       }
     );
-  }, [testimonialsSlot, gridClassName, testimonials, cardClassName, cardHeaderClassName, optixFlowConfig, cardContentClassName, quoteClassName, authorClassName, getAuthorName, getAvatarSrc, getInitials]);
+  }, [
+    testimonialsSlot,
+    gridClassName,
+    testimonials,
+    cardClassName,
+    cardHeaderClassName,
+    optixFlowConfig,
+    cardContentClassName,
+    quoteClassName,
+    authorClassName,
+    getAuthorName,
+    getAvatarSrc,
+    getInitials
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -602,6 +634,7 @@ function TestimonialsLogoCards({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
@@ -612,22 +645,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
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              ) : heading),
               description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "p",
                 {
-                  className: cn(
-                    "mt-4 text-lg text-muted-foreground",
-                    descriptionClassName
-                  ),
+                  className: cn("mt-4 text-lg text-balance", descriptionClassName),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
+              ) : description)
             ]
           }
         ),