@opensite/ui 0.4.1 → 0.4.3

package/dist/testimonial-carousel-cards.js

@@ -1023,6 +1023,7 @@ var Section = React4__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -1042,7 +1043,7 @@ var Section = React4__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -1109,38 +1110,74 @@ function TestimonialCarouselCards({
   const progressOffset = currentIndex * progressIndicatorWidth;
   const renderSidebar = () => {
     if (sidebarSlot) return sidebarSlot;
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col justify-between lg:h-[460px] lg:w-[445px] lg:pr-10", sidebarClassName), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-        /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-semibold lg:text-4xl", headingClassName), children: heading }),
-        /* @__PURE__ */ jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: cn("hidden justify-start gap-4 lg:flex", controlsClassName), children: [
-        /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            size: "icon",
-            className: "rounded-full",
-            variant: "outline",
-            onClick: () => carouselApi?.scrollPrev(),
-            disabled: !canScrollPrev,
-            asButton: true,
-            children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-left", size: 16 })
-          }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-col justify-between lg:h-[460px] lg:w-[445px] lg:pr-10",
+          sidebarClassName
         ),
-        /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            size: "icon",
-            variant: "outline",
-            className: "rounded-full",
-            onClick: () => carouselApi?.scrollNext(),
-            disabled: !canScrollNext,
-            asButton: true,
-            children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-          }
-        )
-      ] })
-    ] });
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+            /* @__PURE__ */ jsx(
+              "h2",
+              {
+                className: cn(
+                  "text-3xl font-semibold lg:text-4xl",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "text-lg text-muted-foreground",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "hidden justify-start gap-4 lg:flex",
+                controlsClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    size: "icon",
+                    className: "rounded-full",
+                    variant: "outline",
+                    onClick: () => carouselApi?.scrollPrev(),
+                    disabled: !canScrollPrev,
+                    asButton: true,
+                    children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-left", size: 16 })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    size: "icon",
+                    variant: "outline",
+                    className: "rounded-full",
+                    onClick: () => carouselApi?.scrollNext(),
+                    disabled: !canScrollNext,
+                    asButton: true,
+                    children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
   };
   const renderItems = () => {
     if (itemsSlot) return itemsSlot;
@@ -1148,14 +1185,21 @@ function TestimonialCarouselCards({
     return items.map((testimonial) => /* @__PURE__ */ jsx(
       CarouselItem,
       {
-        className: cn("min-w-[800px] flex-1", itemClassName, testimonial.className),
+        className: cn(
+          "min-w-[800px] flex-1",
+          itemClassName,
+          testimonial.className
+        ),
         children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
           /* @__PURE__ */ jsx("div", { className: "h-[460px] w-[400px]", children: /* @__PURE__ */ jsx(
             Img,
             {
               src: testimonial.image,
               alt: typeof testimonial.username === "string" ? testimonial.username : testimonial.imageAlt || "Testimonial image",
-              className: cn("aspect-square h-full w-full rounded-2xl object-cover", imageClassName),
+              className: cn(
+                "aspect-square h-full w-full rounded-2xl object-cover",
+                imageClassName
+              ),
               loading: "lazy",
               optixFlowConfig
             }
@@ -1169,7 +1213,16 @@ function TestimonialCarouselCards({
                 quotePanelClassName
               ),
               children: [
-                /* @__PURE__ */ jsx(Badge, { className: cn("mb-auto bg-background px-4 py-2 text-black", badgeClassName), children: testimonial.username }),
+                /* @__PURE__ */ jsx(
+                  Badge,
+                  {
+                    className: cn(
+                      "mb-auto bg-background px-4 py-2 text-black",
+                      badgeClassName
+                    ),
+                    children: testimonial.username
+                  }
+                ),
                 /* @__PURE__ */ jsx("span", { className: "-rotate-[4deg] text-7xl leading-none", children: '"' }),
                 /* @__PURE__ */ jsx("p", { className: "text-xl font-semibold", children: testimonial.quote }),
                 /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg font-medium", children: testimonial.author })
@@ -1205,16 +1258,25 @@ function TestimonialCarouselCards({
               children: /* @__PURE__ */ jsx(CarouselContent, { className: carouselContentClassName, children: renderItems() })
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: cn("absolute bottom-4 left-1/2 h-0.5 w-60 -translate-x-1/2 rounded bg-gray-200", progressClassName), children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(
             "div",
             {
-              className: "h-0.5 rounded bg-primary transition-transform duration-300 ease-out",
-              style: {
-                width: `${progressIndicatorWidth}px`,
-                transform: `translateX(${progressOffset}px)`
-              }
+              className: cn(
+                "absolute bottom-4 left-1/2 h-0.5 w-60 -translate-x-1/2 rounded bg-gray-200",
+                progressClassName
+              ),
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "h-0.5 rounded bg-primary transition-transform duration-300 ease-out",
+                  style: {
+                    width: `${progressIndicatorWidth}px`,
+                    transform: `translateX(${progressOffset}px)`
+                  }
+                }
+              )
             }
-          ) })
+          )
         ] })
       ] })
     }

package/dist/testimonials-animated-split.cjs

@@ -510,6 +510,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -529,7 +530,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -743,26 +744,35 @@ function TestimonialsAnimatedSplit({
     const authorName = getAuthorName(current);
     const avatarSrc = getAvatarSrc(current);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative aspect-4/3 overflow-hidden rounded-2xl lg:aspect-square", imageClassName), children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
-        framerMotion.motion.div,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
         {
-          initial: { opacity: 0, scale: 1.1 },
-          animate: { opacity: 1, scale: 1 },
-          exit: { opacity: 0, scale: 0.95 },
-          transition: { duration: 0.5 },
-          className: "absolute inset-0",
-          children: current.image && /* @__PURE__ */ jsxRuntime.jsx(
-            img.Img,
+          className: cn(
+            "relative aspect-4/3 overflow-hidden rounded-2xl lg:aspect-square",
+            imageClassName
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
             {
-              src: current.image,
-              alt: "Testimonial",
-              className: "size-full object-cover",
-              optixFlowConfig
-            }
-          )
-        },
-        currentIndex
-      ) }) }),
+              initial: { opacity: 0, scale: 1.1 },
+              animate: { opacity: 1, scale: 1 },
+              exit: { opacity: 0, scale: 0.95 },
+              transition: { duration: 0.5 },
+              className: "absolute inset-0",
+              children: current.image && /* @__PURE__ */ jsxRuntime.jsx(
+                img.Img,
+                {
+                  src: current.image,
+                  alt: "Testimonial",
+                  className: "size-full object-cover",
+                  optixFlowConfig
+                }
+              )
+            },
+            currentIndex
+          ) })
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-8", contentClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsxs(
           framerMotion.motion.div,
@@ -781,16 +791,19 @@ function TestimonialsAnimatedSplit({
                   className: "text-primary/20"
                 }
               ),
-              current.quote && (typeof current.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsx("blockquote", { className: cn("text-xl font-medium leading-relaxed md:text-2xl", quoteClassName), children: current.quote }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: quoteClassName, children: current.quote })),
+              current.quote && (typeof current.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "blockquote",
+                {
+                  className: cn(
+                    "text-xl font-medium leading-relaxed md:text-2xl",
+                    quoteClassName
+                  ),
+                  children: current.quote
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: quoteClassName, children: current.quote })),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-4", authorClassName), children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-12", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    AvatarImage,
-                    {
-                      src: avatarSrc,
-                      alt: authorName
-                    }
-                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
                   /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: getInitials(authorName) })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [

package/dist/testimonials-animated-split.d.cts

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-BXRgbd05.cjs';
+import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
 import { T as TestimonialItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
-import './patternSvgs-c5ZNVoTT.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
@@ -65,7 +64,7 @@ interface TestimonialsAnimatedSplitProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/testimonials-animated-split.d.ts

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-z0e5HB0v.js';
+import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import { SectionBackground, SectionSpacing } from './types.js';
 import { T as TestimonialItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
-import './patternSvgs-c5ZNVoTT.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
@@ -65,7 +64,7 @@ interface TestimonialsAnimatedSplitProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/testimonials-animated-split.js

@@ -488,6 +488,7 @@ var Section = React__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -507,7 +508,7 @@ var Section = React__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -721,26 +722,35 @@ function TestimonialsAnimatedSplit({
     const authorName = getAuthorName(current);
     const avatarSrc = getAvatarSrc(current);
     return /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2", children: [
-      /* @__PURE__ */ jsx("div", { className: cn("relative aspect-4/3 overflow-hidden rounded-2xl lg:aspect-square", imageClassName), children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
-        motion.div,
+      /* @__PURE__ */ jsx(
+        "div",
         {
-          initial: { opacity: 0, scale: 1.1 },
-          animate: { opacity: 1, scale: 1 },
-          exit: { opacity: 0, scale: 0.95 },
-          transition: { duration: 0.5 },
-          className: "absolute inset-0",
-          children: current.image && /* @__PURE__ */ jsx(
-            Img,
+          className: cn(
+            "relative aspect-4/3 overflow-hidden rounded-2xl lg:aspect-square",
+            imageClassName
+          ),
+          children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+            motion.div,
             {
-              src: current.image,
-              alt: "Testimonial",
-              className: "size-full object-cover",
-              optixFlowConfig
-            }
-          )
-        },
-        currentIndex
-      ) }) }),
+              initial: { opacity: 0, scale: 1.1 },
+              animate: { opacity: 1, scale: 1 },
+              exit: { opacity: 0, scale: 0.95 },
+              transition: { duration: 0.5 },
+              className: "absolute inset-0",
+              children: current.image && /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: current.image,
+                  alt: "Testimonial",
+                  className: "size-full object-cover",
+                  optixFlowConfig
+                }
+              )
+            },
+            currentIndex
+          ) })
+        }
+      ),
       /* @__PURE__ */ jsxs("div", { className: cn("space-y-8", contentClassName), children: [
         /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxs(
           motion.div,
@@ -759,16 +769,19 @@ function TestimonialsAnimatedSplit({
                   className: "text-primary/20"
                 }
               ),
-              current.quote && (typeof current.quote === "string" ? /* @__PURE__ */ jsx("blockquote", { className: cn("text-xl font-medium leading-relaxed md:text-2xl", quoteClassName), children: current.quote }) : /* @__PURE__ */ jsx("div", { className: quoteClassName, children: current.quote })),
+              current.quote && (typeof current.quote === "string" ? /* @__PURE__ */ jsx(
+                "blockquote",
+                {
+                  className: cn(
+                    "text-xl font-medium leading-relaxed md:text-2xl",
+                    quoteClassName
+                  ),
+                  children: current.quote
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: quoteClassName, children: current.quote })),
               /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-4", authorClassName), children: [
                 /* @__PURE__ */ jsxs(Avatar, { className: "size-12", children: [
-                  /* @__PURE__ */ jsx(
-                    AvatarImage,
-                    {
-                      src: avatarSrc,
-                      alt: authorName
-                    }
-                  ),
+                  /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
                   /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(authorName) })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { children: [

package/dist/testimonials-bento-grid.cjs

@@ -531,6 +531,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -550,7 +551,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -648,71 +649,89 @@ function TestimonialsBentoGrid({
     if (testimonialsSlot) return testimonialsSlot;
     const featuredAuthorName = getAuthorName(featured);
     const featuredAvatarSrc = getAvatarSrc(featured);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-4 md:grid-cols-2 lg:grid-cols-3", gridClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("md:col-span-2 lg:row-span-2", featuredCardClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "flex h-full flex-col justify-between p-6 md:p-8", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
+          gridClassName
+        ),
+        children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            DynamicIcon,
+            Card,
             {
-              name: "lucide/quote",
-              size: 40,
-              className: "mb-4 text-primary/20"
+              className: cn("md:col-span-2 lg:row-span-2", featuredCardClassName),
+              children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "flex h-full flex-col justify-between p-6 md:p-8", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    DynamicIcon,
+                    {
+                      name: "lucide/quote",
+                      size: 40,
+                      className: "mb-4 text-primary/20"
+                    }
+                  ),
+                  featured.quote && (typeof featured.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsxs(
+                    "blockquote",
+                    {
+                      className: cn(
+                        "text-xl font-medium leading-relaxed md:text-2xl",
+                        quoteClassName
+                      ),
+                      children: [
+                        "\u201C",
+                        featured.quote,
+                        "\u201D"
+                      ]
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: quoteClassName, children: featured.quote }))
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: cn("mt-6 flex items-center gap-4", authorClassName),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-12", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: featuredAvatarSrc, alt: featuredAuthorName }),
+                        /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: getInitials(featuredAuthorName) })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                        featured.author && (typeof featured.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: featured.author }) : featured.author),
+                        (featured.role || featured.company) && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+                          featured.role && (typeof featured.role === "string" ? featured.role : featured.role),
+                          featured.company && (typeof featured.company === "string" ? ` at ${featured.company}` : featured.company)
+                        ] })
+                      ] })
+                    ]
+                  }
+                )
+              ] })
             }
           ),
-          featured.quote && (typeof featured.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("blockquote", { className: cn("text-xl font-medium leading-relaxed md:text-2xl", quoteClassName), children: [
-            "\u201C",
-            featured.quote,
-            "\u201D"
-          ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: quoteClassName, children: featured.quote }))
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-6 flex items-center gap-4", authorClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-12", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              AvatarImage,
-              {
-                src: featuredAvatarSrc,
-                alt: featuredAuthorName
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: getInitials(featuredAuthorName) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            featured.author && (typeof featured.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: featured.author }) : featured.author),
-            (featured.role || featured.company) && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
-              featured.role && (typeof featured.role === "string" ? featured.role : featured.role),
-              featured.company && (typeof featured.company === "string" ? ` at ${featured.company}` : featured.company)
-            ] })
-          ] })
-        ] })
-      ] }) }),
-      others.slice(0, 4).map((testimonial, index) => {
-        const authorName = getAuthorName(testimonial);
-        const avatarSrc = getAvatarSrc(testimonial);
-        return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "flex h-full flex-col justify-between p-6", children: [
-          testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("blockquote", { className: "text-sm leading-relaxed", children: [
-            "\u201C",
-            testimonial.quote,
-            "\u201D"
-          ] }) : testimonial.quote),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-center gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-9", 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);
-      })
-    ] });
+          others.slice(0, 4).map((testimonial, index) => {
+            const authorName = getAuthorName(testimonial);
+            const avatarSrc = getAvatarSrc(testimonial);
+            return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "flex h-full flex-col justify-between p-6", children: [
+              testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("blockquote", { className: "text-sm leading-relaxed", children: [
+                "\u201C",
+                testimonial.quote,
+                "\u201D"
+              ] }) : testimonial.quote),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-center gap-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-9", 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);
+          })
+        ]
+      }
+    );
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -723,10 +742,34 @@ function TestimonialsBentoGrid({
       patternOpacity,
       className,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto mb-12 max-w-2xl text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-semibold tracking-tight md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn("mx-auto mb-12 max-w-2xl text-center", headerClassName),
+            children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-semibold tracking-tight md:text-4xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-4 text-lg text-muted-foreground",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
+            ]
+          }
+        ),
         renderTestimonials()
       ]
     }