@opensite/ui 2.8.6 → 2.8.8

package/dist/testimonials-minimal-numbered.cjs

@@ -473,7 +473,8 @@ function TestimonialsMinimalNumbered({
   authorClassName,
   navigationClassName,
   background,
-  spacing,
+  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
 }) {
@@ -526,19 +527,19 @@ function TestimonialsMinimalNumbered({
     if (!current) return null;
     const authorName = getAuthorName(current);
     const avatarSrc = getAvatarSrc(current);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start gap-8", contentClassName), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start gap-4 md:gap-8", contentClassName), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
           className: cn(
-            "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"' },
           children: String(active + 1).padStart(2, "0")
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 pt-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 pt-0 md:pt-6", children: [
         current.quote && (typeof current.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
           "blockquote",
           {
@@ -609,6 +610,7 @@ function TestimonialsMinimalNumbered({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-4xl mx-auto", children: [
         renderedTestimonial,
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -644,13 +646,13 @@ function TestimonialsMinimalNumbered({
                   String(testimonials.length).padStart(2, "0")
                 ] })
               ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
                     onClick: handlePrev,
                     className: "rounded-full p-2 transition-all duration-300 ",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 24 })
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -658,7 +660,7 @@ function TestimonialsMinimalNumbered({
                   {
                     onClick: handleNext,
                     className: "rounded-full p-2  transition-all duration-300 ",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 24 })
                   }
                 )
               ] })

package/dist/testimonials-minimal-numbered.d.cts

@@ -60,6 +60,10 @@ interface TestimonialsMinimalNumberedProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * TestimonialsMinimalNumbered - A minimal testimonial slider featuring large numbered
@@ -86,6 +90,6 @@ interface TestimonialsMinimalNumberedProps {
  * />
  * ```
  */
-declare function TestimonialsMinimalNumbered({ testimonials, testimonialsSlot, autoPlayInterval, className, contentClassName, numberClassName, quoteClassName, authorClassName, navigationClassName, background, spacing, pattern, patternOpacity, }: TestimonialsMinimalNumberedProps): React.JSX.Element;
+declare function TestimonialsMinimalNumbered({ testimonials, testimonialsSlot, autoPlayInterval, className, contentClassName, numberClassName, quoteClassName, authorClassName, navigationClassName, background, spacing, containerClassName, pattern, patternOpacity, }: TestimonialsMinimalNumberedProps): React.JSX.Element;
 
 export { TestimonialsMinimalNumbered, type TestimonialsMinimalNumberedProps };

package/dist/testimonials-minimal-numbered.d.ts

@@ -60,6 +60,10 @@ interface TestimonialsMinimalNumberedProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * TestimonialsMinimalNumbered - A minimal testimonial slider featuring large numbered
@@ -86,6 +90,6 @@ interface TestimonialsMinimalNumberedProps {
  * />
  * ```
  */
-declare function TestimonialsMinimalNumbered({ testimonials, testimonialsSlot, autoPlayInterval, className, contentClassName, numberClassName, quoteClassName, authorClassName, navigationClassName, background, spacing, pattern, patternOpacity, }: TestimonialsMinimalNumberedProps): React.JSX.Element;
+declare function TestimonialsMinimalNumbered({ testimonials, testimonialsSlot, autoPlayInterval, className, contentClassName, numberClassName, quoteClassName, authorClassName, navigationClassName, background, spacing, containerClassName, pattern, patternOpacity, }: TestimonialsMinimalNumberedProps): React.JSX.Element;
 
 export { TestimonialsMinimalNumbered, type TestimonialsMinimalNumberedProps };

package/dist/testimonials-minimal-numbered.js

@@ -451,7 +451,8 @@ function TestimonialsMinimalNumbered({
   authorClassName,
   navigationClassName,
   background,
-  spacing,
+  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
 }) {
@@ -504,19 +505,19 @@ 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-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"' },
           children: String(active + 1).padStart(2, "0")
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "flex-1 pt-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 pt-0 md:pt-6", children: [
         current.quote && (typeof current.quote === "string" ? /* @__PURE__ */ jsx(
           "blockquote",
           {
@@ -587,6 +588,7 @@ function TestimonialsMinimalNumbered({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "max-w-4xl mx-auto", children: [
         renderedTestimonial,
         /* @__PURE__ */ jsxs(
@@ -622,13 +624,13 @@ function TestimonialsMinimalNumbered({
                   String(testimonials.length).padStart(2, "0")
                 ] })
               ] }) }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx(
                   "button",
                   {
                     onClick: handlePrev,
                     className: "rounded-full p-2 transition-all duration-300 ",
-                    children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
+                    children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 24 })
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -636,7 +638,7 @@ function TestimonialsMinimalNumbered({
                   {
                     onClick: handleNext,
                     className: "rounded-full p-2  transition-all duration-300 ",
-                    children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
+                    children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 24 })
                   }
                 )
               ] })

package/dist/testimonials-parallax-number.cjs

@@ -945,10 +945,11 @@ function TestimonialsParallaxNumber({
             framerMotion.motion.div,
             {
               className: cn(
-                "pointer-events-none absolute -left-8 top-1/2 -translate-y-1/2 select-none text-[20rem] font-bold leading-none tracking-tighter ",
+                "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",
                 numberClassName
               ),
-              style: { x: numberX, y: numberY },
+              style: { x: numberX, y: numberY, opacity: 0.1 },
               children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
                 framerMotion.motion.span,
                 {
@@ -957,14 +958,14 @@ function TestimonialsParallaxNumber({
                   exit: { opacity: 0, scale: 1.1, filter: "blur(10px)" },
                   transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] },
                   className: "block",
-                  children: current.backgroundIcon ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: current.backgroundIcon }) : current.backgroundLabel != null ? current.backgroundLabel : null
+                  children: current.backgroundIcon ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: current.backgroundIcon, size: 320 }) : current.backgroundLabel != null ? current.backgroundLabel : null
                 },
                 activeIndex
               ) })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center border-r border-border/50 pr-16", children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
                 framerMotion.motion.span,
                 {
@@ -990,7 +991,7 @@ function TestimonialsParallaxNumber({
                 }
               ) })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 py-12 pl-16", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 py-6 md:py-12 pl-4 md:pl-16", children: [
               /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
                 framerMotion.motion.div,
                 {
@@ -999,7 +1000,7 @@ function TestimonialsParallaxNumber({
                   exit: { opacity: 0, x: 20 },
                   transition: { duration: 0.4 },
                   className: "mb-8",
-                  children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center gap-2 rounded-full border border-border px-3 py-1 text-xs ", children: companyName })
+                  children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center gap-2 rounded-full border border-border px-4 py-2 text-sm", children: companyName })
                 },
                 activeIndex
               ) }),
@@ -1007,7 +1008,8 @@ function TestimonialsParallaxNumber({
                 framerMotion.motion.blockquote,
                 {
                   className: cn(
-                    "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",
@@ -1042,7 +1044,7 @@ function TestimonialsParallaxNumber({
                 },
                 activeIndex
               ) }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start md:items-end justify-between", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
                   framerMotion.motion.div,
                   {
@@ -1074,7 +1076,10 @@ function TestimonialsParallaxNumber({
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
-                    className: cn("flex items-center gap-4", navigationClassName),
+                    className: cn(
+                      "flex items-center gap-4 flex-col md:flex-row",
+                      navigationClassName
+                    ),
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
                         framerMotion.motion.button,

package/dist/testimonials-parallax-number.js

@@ -924,10 +924,11 @@ function TestimonialsParallaxNumber({
             motion.div,
             {
               className: cn(
-                "pointer-events-none absolute -left-8 top-1/2 -translate-y-1/2 select-none text-[20rem] font-bold leading-none tracking-tighter ",
+                "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",
                 numberClassName
               ),
-              style: { x: numberX, y: numberY },
+              style: { x: numberX, y: numberY, opacity: 0.1 },
               children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
                 motion.span,
                 {
@@ -936,14 +937,14 @@ function TestimonialsParallaxNumber({
                   exit: { opacity: 0, scale: 1.1, filter: "blur(10px)" },
                   transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] },
                   className: "block",
-                  children: current.backgroundIcon ? /* @__PURE__ */ jsx(DynamicIcon, { name: current.backgroundIcon }) : current.backgroundLabel != null ? current.backgroundLabel : null
+                  children: current.backgroundIcon ? /* @__PURE__ */ jsx(DynamicIcon, { name: current.backgroundIcon, size: 320 }) : current.backgroundLabel != null ? current.backgroundLabel : null
                 },
                 activeIndex
               ) })
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "relative flex", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center border-r border-border/50 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,
                 {
@@ -969,7 +970,7 @@ function TestimonialsParallaxNumber({
                 }
               ) })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex-1 py-12 pl-16", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 py-6 md:py-12 pl-4 md:pl-16", children: [
               /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
                 motion.div,
                 {
@@ -978,7 +979,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
               ) }),
@@ -986,7 +987,8 @@ function TestimonialsParallaxNumber({
                 motion.blockquote,
                 {
                   className: cn(
-                    "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",
@@ -1021,7 +1023,7 @@ function TestimonialsParallaxNumber({
                 },
                 activeIndex
               ) }) }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-start md:items-end justify-between", children: [
                 /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
                   motion.div,
                   {
@@ -1053,7 +1055,10 @@ function TestimonialsParallaxNumber({
                 /* @__PURE__ */ jsxs(
                   "div",
                   {
-                    className: cn("flex items-center gap-4", navigationClassName),
+                    className: cn(
+                      "flex items-center gap-4 flex-col md:flex-row",
+                      navigationClassName
+                    ),
                     children: [
                       /* @__PURE__ */ jsx(
                         motion.button,

package/dist/testimonials-scrolling-columns.cjs

@@ -41,6 +41,67 @@ var DynamicIcon = React__namespace.memo(function DynamicIcon2({
   return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
+var DIRECTION_STYLES = {
+  "bottom-to-top": "bg-linear-to-t",
+  "top-to-bottom": "bg-linear-to-b",
+  "left-to-right": "bg-linear-to-r",
+  "right-to-left": "bg-linear-to-l",
+  "bottom-left-to-top-right": "bg-linear-to-tr",
+  "bottom-right-to-top-left": "bg-linear-to-tl",
+  "top-left-to-bottom-right": "bg-linear-to-br",
+  "top-right-to-bottom-left": "bg-linear-to-bl"
+};
+var INTENSITY_STOPS = {
+  low: "from-black/40 via-black/20 to-transparent",
+  default: "from-black/70 via-black/35 to-transparent",
+  high: "from-black/85 via-black/50 to-transparent",
+  "very-high": "from-black/95 via-black/60 to-black/20"
+};
+var RADIAL_INTENSITY = {
+  low: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.20) 50%, transparent 100%)"
+  },
+  default: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.35) 50%, transparent 100%)"
+  },
+  high: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.50) 50%, transparent 100%)"
+  },
+  "very-high": {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.60) 50%, rgba(0,0,0,0.20) 100%)"
+  }
+};
+function GradientOverlay({
+  direction = "bottom-to-top",
+  intensity = "default",
+  className,
+  style,
+  ...props
+}) {
+  if (direction === "radial-center") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn("absolute inset-0", className),
+        style: { ...RADIAL_INTENSITY[intensity], ...style },
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "absolute inset-0",
+        DIRECTION_STYLES[direction],
+        INTENSITY_STOPS[intensity],
+        className
+      ),
+      style,
+      ...props
+    }
+  );
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -483,7 +544,7 @@ function TestimonialsScrollingColumns({
             framerMotion.motion.div,
             {
               className: cn(
-                "relative overflow-hidden rounded-lg bg-card shadow-sm",
+                "relative overflow-hidden rounded-2xl shadow-sm",
                 cardClassName
               ),
               variants: itemVariants,
@@ -498,35 +559,40 @@ function TestimonialsScrollingColumns({
                       optixFlowConfig
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-foreground/70 via-foreground/40 to-transparent" })
+                  /* @__PURE__ */ jsxRuntime.jsx(GradientOverlay, {})
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-0 left-0 right-0 p-6 text-left text-background", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-0 left-0 right-0 p-6 text-left", children: [
+                  testimonial?.logoSrc ? /* @__PURE__ */ jsxRuntime.jsx(
+                    img.Img,
+                    {
+                      src: testimonial.logoSrc,
+                      alt: typeof testimonial.company === "string" ? `${testimonial.company} logo` : typeof testimonial.author === "string" ? `${testimonial.author} company logo` : "Company logo",
+                      className: cn(
+                        "flex justify-start items-start mb-6 max-h-10 max-w-32 object-contain md:max-h-10 md:max-w-48"
+                      ),
+                      optixFlowConfig
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
                     DynamicIcon,
                     {
-                      name: "lucide/quote",
-                      size: 32,
-                      className: "mb-4 text-background/40"
+                      name: "mdi/comment-quote-outline",
+                      size: 42,
+                      className: cn("opacity-50")
                     }
                   ),
                   testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                     "blockquote",
                     {
                       className: cn(
-                        "text-base font-medium leading-relaxed",
+                        "text-base font-base leading-relaxed",
                         quoteClassName
                       ),
                       children: testimonial.quote
                     }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: quoteClassName, children: testimonial.quote })),
-                  /* @__PURE__ */ jsxRuntime.jsx("figcaption", { className: cn("mt-4", authorClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-semibold", children: [
-                    "\u2014",
-                    " ",
-                    testimonial.author && (typeof testimonial.author === "string" ? testimonial.author : null),
-                    testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-1 text-background/60", children: [
-                      ", ",
-                      testimonial.role
-                    ] }) : null)
+                  ) : testimonial.quote),
+                  /* @__PURE__ */ jsxRuntime.jsx("figcaption", { className: cn("mt-4", authorClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+                    testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "uppercase text-base font-semibold", children: testimonial.author }) : null),
+                    testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-thin", children: testimonial.role }) : null)
                   ] }) })
                 ] })
               ]
@@ -559,19 +625,32 @@ function TestimonialsScrollingColumns({
         /* @__PURE__ */ jsxRuntime.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 space-y-4 text-center",
+              headerClassName
+            ),
             children: [
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "h2",
                 {
                   className: cn(
-                    "text-3xl font-semibold tracking-tight md:text-4xl",
+                    "text-pretty text-3xl md:text-4xl lg:text-6xl",
+                    "font-semibold tracking-tight",
                     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 ", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-base md:text-lg text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : description)
             ]
           }
         ),