@opensite/ui 2.8.2 → 2.8.4

package/dist/registry.js

@@ -3105,7 +3105,6 @@ function AboutCultureTabs({
   ctaImages,
   ctaImagesSlot,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -3119,6 +3118,7 @@ function AboutCultureTabs({
   actionsClassName,
   optixFlowConfig,
   background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "xl",
   pattern,
   patternOpacity
@@ -23444,6 +23444,7 @@ function CarouselPrevious({
       className: cn(
         "absolute size-8 rounded-full",
         orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        canScrollPrev ? "cursor-pointer" : "cursor-not-allowed",
         className
       ),
       disabled: !canScrollPrev,
@@ -23473,6 +23474,7 @@ function CarouselNext({
       className: cn(
         "absolute size-8 rounded-full",
         orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        canScrollNext ? "cursor-pointer" : "cursor-not-allowed",
         className
       ),
       disabled: !canScrollNext,
@@ -33419,7 +33421,8 @@ function CarouselIconSidebar({
   itemClassName,
   imageClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
   patternClassName,
@@ -33468,9 +33471,10 @@ function CarouselIconSidebar({
       "div",
       {
         className: cn(
-          "flex h-full flex-row md:flex-col gap-4 md:gap-8 rounded-lg p-4 md:p-8",
-          getNestedCardBg(background),
-          getNestedCardTextColor(background),
+          "flex h-full flex-row md:flex-col",
+          "gap-4 md:gap-8 rounded-2xl p-4 md:p-8",
+          "bg-card text-card-foreground shadow-lg",
+          "border border-muted/10",
           sidebarClassName
         ),
         children: [
@@ -33479,7 +33483,6 @@ function CarouselIconSidebar({
             {
               className: cn(
                 "flex h-fit w-fit p-3 items-center justify-center rounded-lg shadow-lg ring-1 ring-border bg-card",
-                getNestedCardBg(background, "card"),
                 iconClassName
               ),
               children: /* @__PURE__ */ jsx(DynamicIcon, { name: activeItem.icon, size: 24 })
@@ -33506,25 +33509,7 @@ function CarouselIconSidebar({
                   children: activeItem.title
                 }
               ),
-              typeof activeItem.description === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "mb-4 text-base text-muted-foreground",
-                    descriptionClassName
-                  ),
-                  children: activeItem.description
-                }
-              ) : /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "mb-4 text-base text-muted-foreground",
-                    descriptionClassName
-                  ),
-                  children: activeItem.description
-                }
-              )
+              typeof activeItem.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-4 text-base", descriptionClassName), children: activeItem.description }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4 text-base", descriptionClassName), children: activeItem.description })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", controlsClassName), children: [
               /* @__PURE__ */ jsx(CarouselPrevious, { className: "relative top-0 right-0 left-0 translate-x-0 translate-y-0 p-5 transition-all duration-200 hover:bg-foreground hover:text-background" }),
@@ -33585,6 +33570,7 @@ function CarouselIconSidebar({
       patternOpacity,
       patternClassName,
       className,
+      containerClassName,
       children: [
         title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16 px-4 md:px-0", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsx(
@@ -33596,7 +33582,7 @@ function CarouselIconSidebar({
               ),
               children: title
             }
-          ) : /* @__PURE__ */ jsx("div", { className: sectionTitleClassName, children: title })),
+          ) : title),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx(
             "p",
             {
@@ -33606,20 +33592,20 @@ function CarouselIconSidebar({
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsx(
-            "div",
+          ) : description)
+        ] }) : null,
+        /* @__PURE__ */ jsx(Carousel, { setApi, className: cn("w-full", carouselClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md:gap-6 md:grid-cols-5", children: [
+          /* @__PURE__ */ jsx("div", { className: "md:col-span-2", children: sidebarContent }),
+          /* @__PURE__ */ jsx("div", { className: "h-full md:col-span-3", children: /* @__PURE__ */ jsx(
+            CarouselContent,
             {
               className: cn(
-                "max-w-lg text-balance",
-                sectionDescriptionClassName
+                "overflow-hidden rounded-2xl shadow-lg h-full",
+                carouselContentClassName
               ),
-              children: description
+              children: itemsContent
             }
-          ))
-        ] }) : null,
-        /* @__PURE__ */ jsx(Carousel, { setApi, className: cn("w-full", carouselClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md:gap-6 md:grid-cols-5", children: [
-          /* @__PURE__ */ jsx("div", { className: "md:col-span-2", children: sidebarContent }),
-          /* @__PURE__ */ jsx("div", { className: "h-full md:col-span-3", children: /* @__PURE__ */ jsx(CarouselContent, { className: cn("h-full", carouselContentClassName), children: itemsContent }) })
+          ) })
         ] }) }),
         lightboxOpen && /* @__PURE__ */ jsx(
           Lightbox,
@@ -33696,6 +33682,7 @@ function CarouselGradientText({
         href: item.href,
         className: cn(
           "relative flex aspect-4/5 max-h-[500px] rounded-2xl",
+          "transition-all duration-500 shadow-sm hover:shadow-xl",
           item.className,
           cardClassName
         ),
@@ -33718,16 +33705,15 @@ function CarouselGradientText({
                 "size-full rounded-2xl bg-cover object-cover",
                 imageClassName
               ),
-              loading: "lazy",
               optixFlowConfig
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 p-8", children: /* @__PURE__ */ jsxs("div", { className: "text-sm font-semibold text-white/70", children: [
-            /* @__PURE__ */ jsxs("div", { className: "mr-1 text-white", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 p-8", children: /* @__PURE__ */ jsxs("div", { className: "text-white space-y-2 text-pretty text-shadow-lg", children: [
+            /* @__PURE__ */ jsxs("div", { className: "text-lg font-semibold", children: [
               item.title,
               "."
             ] }),
-            /* @__PURE__ */ jsx("div", { children: item.description })
+            /* @__PURE__ */ jsx("div", { className: "opacity-75 text-base font-normal", children: item.description })
           ] }) })
         ]
       }
@@ -33777,7 +33763,7 @@ function CarouselGradientText({
                     ]
                   }
                 ),
-                tagline ? typeof tagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-2 md:mt-8 text-xl", taglineClassName), children: tagline }) : /* @__PURE__ */ jsx("div", { className: cn("mt-2 md:mt-8 text-xl", taglineClassName), children: tagline }) : null,
+                tagline ? typeof tagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-2 md:mt-4 text-xl", taglineClassName), children: tagline }) : tagline : null,
                 /* @__PURE__ */ jsxs(
                   "div",
                   {
@@ -33813,8 +33799,12 @@ function CarouselGradientText({
               "span",
               {
                 className: cn(
-                  "flex h-8 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full bg-muted-foreground/15 text-xs font-semibold whitespace-nowrap transition-all duration-300",
-                  index + 1 === current ? "w-fit px-4" : "my-4 mx-2 md:mx-4 size-4"
+                  "transition-all duration-500",
+                  "bg-card text-card-foreground",
+                  "ring-4 ring-primary",
+                  "flex shrink-0 items-center justify-center",
+                  "h-8 overflow-hidden rounded-full text-xs font-semibold whitespace-nowrap",
+                  index + 1 === current ? "w-fit px-4 mx-2" : "my-4 mx-2 md:mx-4 size-4 hover:bg-primary hover:text-primary-foreground cursor-pointer"
                 ),
                 onClick: () => api && api.scrollTo(index),
                 children: /* @__PURE__ */ jsx(
@@ -35136,8 +35126,33 @@ function InteriorCarousel({
   patternClassName,
   optixFlowConfig
 }) {
+  const [api, setApi] = useState();
   const [lightboxOpen, setLightboxOpen] = useState(false);
   const [lightboxIndex, setLightboxIndex] = useState(0);
+  const [canScrollPrevious, setCanScrollPrevious] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+  useEffect(() => {
+    if (!api) return;
+    const updateState = () => {
+      startTransition(() => {
+        setCanScrollPrevious(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
+      });
+    };
+    updateState();
+    api.on("select", updateState);
+    api.on("reInit", updateState);
+    return () => {
+      api.off("select", updateState);
+      api.off("reInit", updateState);
+    };
+  }, [api]);
+  const scrollPrevious = useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+  const scrollNext = useCallback(() => {
+    api?.scrollNext();
+  }, [api]);
   const lightboxItems = useMemo(() => {
     if (!images || images.length === 0) return [];
     return images.map((image, index) => {
@@ -35233,35 +35248,39 @@ function InteriorCarousel({
       patternClassName,
       className,
       children: [
-        heading || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16 px-6 md:px-8", children: [
+        heading || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 mb-6 md:mb-16 px-6 md:px-8 max-w-full md:max-w-md", children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h2",
             {
               className: cn(
-                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
+                "text-2xl font-semibold tracking-tight md:text-4xl lg:text-6xl text-pretty",
                 headingClassName
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          descriptionContent && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg text-balance", descriptionClassName), children: descriptionContent }) : /* @__PURE__ */ jsx(
-            "div",
+          ) : heading),
+          descriptionContent && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
             {
-              className: cn("max-w-lg text-balance", descriptionClassName),
+              className: cn(
+                "text-lg text-balance opacity-75",
+                descriptionClassName
+              ),
               children: descriptionContent
             }
-          ))
+          ) : descriptionContent)
         ] }) : null,
-        /* @__PURE__ */ jsx("div", { className: "px-6 md:px-0", children: /* @__PURE__ */ jsxs(
-          Carousel,
-          {
-            opts: {
-              align: "start",
-              loop
-            },
-            className: cn("mx-auto w-full max-w-6xl", carouselClassName),
-            children: [
-              /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "px-6 md:px-0", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            Carousel,
+            {
+              opts: {
+                align: "start",
+                loop
+              },
+              setApi,
+              className: cn("mx-auto w-full max-w-6xl", carouselClassName),
+              children: /* @__PURE__ */ jsx(
                 CarouselContent,
                 {
                   style: {
@@ -35270,28 +35289,26 @@ function InteriorCarousel({
                   className: carouselContentClassName,
                   children: imagesContent
                 }
-              ),
-              /* @__PURE__ */ jsx(
-                CarouselPrevious,
-                {
-                  className: cn(
-                    "left-5 scale-120 border-none bg-foreground/30 text-background hover:bg-foreground/50",
-                    controlsClassName
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                CarouselNext,
-                {
-                  className: cn(
-                    "right-5 scale-120 border-none bg-foreground/30 text-background hover:bg-foreground/50",
-                    controlsClassName
-                  )
-                }
               )
-            ]
-          }
-        ) }),
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CarouselPagination,
+            {
+              onPrevious: scrollPrevious,
+              onNext: scrollNext,
+              canScrollPrevious,
+              canScrollNext,
+              size: "lg",
+              mobileSize: "md",
+              className: cn(
+                "mt-4 justify-end md:mt-0 md:absolute md:inset-x-0 md:top-1/2 md:-translate-y-1/2 md:justify-between md:pointer-events-none",
+                controlsClassName
+              ),
+              buttonClassName: "bg-foreground text-background hover:bg-foreground/80 pointer-events-auto md:mx-5"
+            }
+          )
+        ] }) }),
         lightboxOpen && /* @__PURE__ */ jsx(
           Lightbox,
           {
@@ -35725,7 +35742,8 @@ function BlogGridAuthorCardsComponent({
   viewAllAction,
   viewAllSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -35734,7 +35752,6 @@ function BlogGridAuthorCardsComponent({
   viewAllClassName,
   optixFlowConfig,
   background,
-  spacing,
   pattern,
   patternOpacity
 }) {
@@ -35777,7 +35794,7 @@ function BlogGridAuthorCardsComponent({
           href: postHref,
           className: cn("group flex flex-col", postCardClassName),
           children: [
-            post.image && /* @__PURE__ */ jsx("div", { className: "mb-4 flex overflow-clip rounded-xl md:mb-5", children: /* @__PURE__ */ jsx("div", { className: "transition-opacity duration-300 group-hover:opacity-80", children: /* @__PURE__ */ jsx(
+            post.image && /* @__PURE__ */ jsx("div", { className: "shadow-xl mb-6 flex overflow-clip rounded-xl md:mb-8", children: /* @__PURE__ */ jsx("div", { className: "transition-opacity duration-300 group-hover:opacity-80", children: /* @__PURE__ */ jsx(
               Img,
               {
                 src: post.image,
@@ -35786,17 +35803,17 @@ function BlogGridAuthorCardsComponent({
                 optixFlowConfig
               }
             ) }) }),
-            (post.label || post.category) && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: post.label || post.category }) }),
-            post.title && (typeof post.title === "string" ? /* @__PURE__ */ jsx("div", { className: "mb-2 line-clamp-3 pt-4 text-lg font-medium wrap-break-word md:mb-3 md:pt-4 md:text-2xl lg:pt-4 lg:text-3xl", children: post.title }) : /* @__PURE__ */ jsx("div", { className: "mb-2 line-clamp-3 pt-4 text-lg font-medium wrap-break-word md:mb-3 md:pt-4 md:text-2xl lg:pt-4 lg:text-3xl", children: post.title })),
-            (post.summary || post.description) && /* @__PURE__ */ jsx("div", { className: "mb-4 line-clamp-2 text-sm text-muted-foreground md:mb-5 md:text-base", children: post.summary || post.description }),
-            (post.author || post.authorAvatar) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxs(Avatar, { className: "size-12", children: [
+            post.label || post.category ? /* @__PURE__ */ jsx(Badge, { children: post.label || post.category }) : null,
+            post.title && (typeof post.title === "string" ? /* @__PURE__ */ jsx("div", { className: "mb-2 line-clamp-3 pt-4 text-lg font-semibold wrap-break-word md:mb-3 md:pt-4 md:text-xl lg:pt-4 leading-tight transition-all duration-300 group-hover:underline group-hover:underline-offset-4", children: post.title }) : post.title),
+            (post.summary || post.description) && /* @__PURE__ */ jsx("div", { className: "mb-4 line-clamp-2 text-sm md:mb-5 md:text-base", children: post.summary || post.description }),
+            (post.author || post.authorAvatar) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsxs(Avatar, { className: "size-12 ring-4 ring-primary shadow-lg", children: [
                 post.authorAvatar && /* @__PURE__ */ jsx(AvatarImage, { src: post.authorAvatar }),
                 /* @__PURE__ */ jsx(AvatarFallback, { children: post.authorInitials || (authorStr ? authorStr.slice(0, 2).toUpperCase() : "") })
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-px", children: [
-                post.author && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: post.author }),
-                (post.published || post.date) && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: post.published || post.date })
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-px text-sm", children: [
+                post.author && /* @__PURE__ */ jsx("span", { className: "font-semibold", children: post.author }),
+                (post.published || post.date) && /* @__PURE__ */ jsx("span", { className: "opacity-75", children: post.published || post.date })
               ] })
             ] })
           ]
@@ -35813,25 +35830,37 @@ function BlogGridAuthorCardsComponent({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         (heading || description) && /* @__PURE__ */ jsxs("div", { className: cn("mb-6 md:mb-14 lg:mb-16", headerClassName), children: [
           /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between gap-8", children: /* @__PURE__ */ jsx("div", { children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h2",
             {
               className: cn(
-                "mb-4 w-full text-4xl font-medium md:mb-5 md:text-5xl lg:mb-6 lg:text-6xl",
+                "text-2xl font-semibold tracking-tight md:text-4xl lg:text-6xl text-pretty",
                 headingClassName
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })) }) }),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: descriptionClassName, children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+          ) : heading) }) }),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-lg text-balance opacity-75",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : description)
         ] }),
         /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(
-              "grid gap-x-4 gap-y-8 md:grid-cols-2 lg:gap-x-6 lg:gap-y-12 2xl:grid-cols-3",
+              "grid",
+              "grid-cols-1 md:grid-cols-2 2xl:grid-cols-3",
+              "gap-8 md:gap-12",
               postsClassName
             ),
             children: postsContent
@@ -35840,10 +35869,7 @@ function BlogGridAuthorCardsComponent({
         (viewAllSlot || viewAllAction) && /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn(
-              "mt-8 flex flex-col items-center py-2 md:hidden",
-              viewAllClassName
-            ),
+            className: cn("mt-16 flex flex-col items-center", viewAllClassName),
             children: viewAllActionContent
           }
         )
@@ -42267,12 +42293,13 @@ var FeatureCard = React8.memo(
           borderRadius: "24px"
         },
         className: cn(
-          "relative flex items-start gap-4 bg-background text-foreground md:w-fit md:max-w-sm",
+          "bg-card text-card-foreground",
+          "relative flex items-start gap-4 md:w-fit md:max-w-sm",
           isActive ? "shadow-xl overflow-visible" : "cursor-pointer shadow-none hover:shadow-xl transition-shadow duration-500 overflow-hidden"
         ),
         onClick,
         children: [
-          isActive && feature.href && /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 bg-background rounded-full h-fit w-fit p-2 flex items-center justify-center z-10", children: /* @__PURE__ */ jsx(
+          isActive && feature.href && /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 bg-card rounded-full h-fit w-fit p-2 flex items-center justify-center z-10", children: /* @__PURE__ */ jsx(
             Pressable,
             {
               href: feature.href,
@@ -42420,7 +42447,7 @@ var FeaturesMobile = React8.memo(
             x: { type: "spring", stiffness: 300, damping: 30 },
             opacity: { duration: 0.2 }
           },
-          className: "rounded-3xl bg-background p-4 text-left",
+          className: "border border-muted/50 rounded-3xl bg-card text-card-foreground p-4 text-left",
           children: (currentFeature?.title || currentFeature?.description) && /* @__PURE__ */ jsxs("div", { className: "text-sm", children: [
             currentFeature.title && /* @__PURE__ */ jsx("p", { className: "font-semibold", children: currentFeature.title }),
             currentFeature.description && /* @__PURE__ */ jsx("p", { className: "mt-1", children: currentFeature.description })
@@ -42525,7 +42552,8 @@ function FeatureAnimatedCarousel({
           "div",
           {
             className: cn(
-              "relative flex min-h-[500px] flex-col-reverse gap-8 overflow-hidden rounded-3xl bg-muted p-6 md:flex-row md:items-center md:p-12 lg:min-h-[600px]"
+              "bg-muted border border-muted/50",
+              "relative flex min-h-[500px] flex-col-reverse gap-8 overflow-hidden rounded-3xl p-6 md:flex-row md:items-center md:p-12 lg:min-h-[600px]"
             )
           }
         )
@@ -43700,7 +43728,10 @@ function CaseStudiesTestimonialStats({
             {
               src: testimonial.image,
               alt: typeof testimonial.authorName === "string" ? testimonial.authorName : "Testimonial author",
-              className: cn("aspect-29/35 h-full w-full max-w-60 rounded-2xl object-cover", imageClassName),
+              className: cn(
+                "aspect-29/35 h-full w-full max-w-60 rounded-2xl object-cover",
+                imageClassName
+              ),
               loading: "lazy",
               optixFlowConfig
             }
@@ -43724,11 +43755,20 @@ function CaseStudiesTestimonialStats({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("flex gap-10 self-center lg:flex-col", statsClassName), children: testimonial.stats.map((stat, statIndex) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-          typeof stat.value === "string" ? /* @__PURE__ */ jsx("p", { className: "text-4xl font-medium text-primary sm:text-5xl", children: stat.value }) : stat.value,
-          typeof stat.label === "string" ? /* @__PURE__ */ jsx("p", { className: "font-semibold text-primary", children: stat.label }) : stat.label,
-          typeof stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: stat.description }) : stat.description
-        ] }, statIndex)) })
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex gap-10 self-center lg:flex-col",
+              statsClassName
+            ),
+            children: testimonial.stats.map((stat, statIndex) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+              typeof stat.value === "string" ? /* @__PURE__ */ jsx("p", { className: "text-4xl font-medium text-primary sm:text-5xl", children: stat.value }) : stat.value,
+              typeof stat.label === "string" ? /* @__PURE__ */ jsx("p", { className: "font-semibold text-primary", children: stat.label }) : stat.label,
+              typeof stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: stat.description }) : stat.description
+            ] }, statIndex))
+          }
+        )
       ] })
     ] }, index));
   }, [
@@ -43753,7 +43793,16 @@ function CaseStudiesTestimonialStats({
       children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
         /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6 text-center", headerClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("p", { className: cn("font-medium", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-4xl font-medium md:text-5xl", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading }))
+          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "text-4xl font-medium md:text-5xl",
+                subheadingClassName
+              ),
+              children: subheading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading }))
         ] }),
         /* @__PURE__ */ jsx("div", { className: cn("mt-20", testimonialsClassName), children: renderedTestimonials })
       ] })
@@ -44109,19 +44158,26 @@ function TestimonialsBentoGrid({
   quoteClassName,
   authorClassName,
   background,
-  spacing,
   pattern,
-  patternOpacity
+  patternOpacity,
+  spacing = "lg",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
   const featured = testimonials?.find((t) => t.featured) || testimonials?.[0];
   const others = testimonials?.filter((t) => t !== featured) ?? [];
-  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("");
   }, []);
@@ -44134,7 +44190,7 @@ function TestimonialsBentoGrid({
       "div",
       {
         className: cn(
-          "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
+          "grid gap-4 md:grid-cols-2 lg:grid-cols-3 lg:grid-rows-[auto_auto_auto]",
           gridClassName
         ),
         children: [
@@ -44156,7 +44212,7 @@ function TestimonialsBentoGrid({
                     "blockquote",
                     {
                       className: cn(
-                        "text-xl font-medium leading-relaxed md:text-2xl",
+                        "text-xl font-medium leading-relaxed md:text-2xl line-clamp-5",
                         quoteClassName
                       ),
                       children: [
@@ -44165,7 +44221,7 @@ function TestimonialsBentoGrid({
                         "\u201D"
                       ]
                     }
-                  ) : /* @__PURE__ */ jsx("div", { className: quoteClassName, children: featured.quote }))
+                  ) : /* @__PURE__ */ jsx("div", { className: cn("line-clamp-5", quoteClassName), children: featured.quote }))
                 ] }),
                 /* @__PURE__ */ jsxs(
                   "div",
@@ -44181,7 +44237,18 @@ function TestimonialsBentoGrid({
                         (featured.role || featured.company) && /* @__PURE__ */ 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.linkConfig?.href && /* @__PURE__ */ jsx(
+                          Pressable,
+                          {
+                            href: featured.linkConfig.href,
+                            className: cn(
+                              "text-sm text-muted-foreground underline underline-offset-2 hover:text-foreground transition-colors",
+                              featured.linkConfig.className
+                            ),
+                            children: featured.linkConfig.label
+                          }
+                        )
                       ] })
                     ]
                   }
@@ -44189,15 +44256,15 @@ function TestimonialsBentoGrid({
               ] })
             }
           ),
-          others.slice(0, 4).map((testimonial, index) => {
+          others.slice(0, 5).map((testimonial, index) => {
             const authorName = getAuthorName(testimonial);
             const avatarSrc = getAvatarSrc(testimonial);
             return /* @__PURE__ */ jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsxs(CardContent, { className: "flex h-full flex-col justify-between p-6", children: [
-              testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxs("blockquote", { className: "text-sm leading-relaxed", children: [
+              testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxs("blockquote", { className: "text-sm leading-relaxed line-clamp-3", children: [
                 "\u201C",
                 testimonial.quote,
                 "\u201D"
-              ] }) : testimonial.quote),
+              ] }) : /* @__PURE__ */ jsx("div", { className: "line-clamp-3", children: testimonial.quote })),
               /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-3", children: [
                 /* @__PURE__ */ jsxs(Avatar, { className: "size-9", children: [
                   /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
@@ -44205,7 +44272,18 @@ function TestimonialsBentoGrid({
                 ] }),
                 /* @__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)
+                  testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: testimonial.role }) : testimonial.role),
+                  testimonial.linkConfig?.href && /* @__PURE__ */ jsx(
+                    Pressable,
+                    {
+                      href: testimonial.linkConfig.href,
+                      className: cn(
+                        "text-xs text-muted-foreground underline underline-offset-2 hover:text-foreground transition-colors",
+                        testimonial.linkConfig.className
+                      ),
+                      children: testimonial.linkConfig.label
+                    }
+                  )
                 ] })
               ] })
             ] }) }, index);
@@ -44213,7 +44291,19 @@ function TestimonialsBentoGrid({
         ]
       }
     );
-  }, [testimonialsSlot, gridClassName, featuredCardClassName, quoteClassName, authorClassName, cardClassName, featured, others, getAuthorName, getAvatarSrc, getInitials]);
+  }, [
+    testimonialsSlot,
+    gridClassName,
+    featuredCardClassName,
+    quoteClassName,
+    authorClassName,
+    cardClassName,
+    featured,
+    others,
+    getAuthorName,
+    getAvatarSrc,
+    getInitials
+  ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -44222,6 +44312,7 @@ function TestimonialsBentoGrid({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -44270,14 +44361,18 @@ function TestimonialsTwitterCards({
   cardContentClassName,
   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 getAuthorName = useCallback(
+    (testimonial) => {
+      if (typeof testimonial.author === "string") return testimonial.author;
+      return "";
+    },
+    []
+  );
   const getInitials = useCallback((name) => {
     return name.split(" ").map((n) => n[0]).join("");
   }, []);
@@ -44288,54 +44383,81 @@ function TestimonialsTwitterCards({
       "div",
       {
         className: cn(
-          "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
+          "grid gap-4 md:gap-6 lg:gap-8 md:grid-cols-2 lg:grid-cols-3",
           gridClassName
         ),
         children: testimonials.map((testimonial, index) => {
           const authorName = getAuthorName(testimonial);
-          return /* @__PURE__ */ jsx(Card, { className: cn("group", cardClassName), children: /* @__PURE__ */ jsxs(CardContent, { className: cn("p-6", cardContentClassName), children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: cn(
-                  "mb-4 flex items-start justify-between",
-                  authorClassName
-                ),
-                children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                    /* @__PURE__ */ jsxs(Avatar, { className: "size-10", children: [
-                      /* @__PURE__ */ jsx(
-                        AvatarImage,
-                        {
-                          src: testimonial.avatarSrc,
-                          alt: authorName
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(authorName) })
-                    ] }),
-                    /* @__PURE__ */ jsxs("div", { children: [
-                      testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "font-medium leading-none", children: testimonial.author }) : testimonial.author),
-                      testimonial.handle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: testimonial.handle })
-                    ] })
-                  ] }),
-                  testimonial.twitterUrl && /* @__PURE__ */ jsx(
-                    Pressable,
-                    {
-                      href: testimonial.twitterUrl,
-                      className: "text-muted-foreground transition-colors hover:text-foreground",
-                      "aria-label": "View on Twitter",
-                      children: /* @__PURE__ */ jsx(DynamicIcon, { name: "simple-icons/x", size: 18 })
-                    }
-                  )
-                ]
-              }
-            ),
-            testimonial.content && (typeof testimonial.content === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed", children: testimonial.content }) : testimonial.content)
-          ] }) }, index);
+          return /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              href: testimonial.linkConfig?.href,
+              className: cn(
+                "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-xl group hover:bg-primary hover:text-primary-foreground transition-all duration-500",
+                cardClassName
+              ),
+              children: /* @__PURE__ */ jsxs(
+                CardContent,
+                {
+                  className: cn(
+                    "px-6 h-full flex flex-col-reverse items-stretch justify-between",
+                    cardContentClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: cn(
+                          "flex items-center justify-between",
+                          authorClassName
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+                            /* @__PURE__ */ jsxs(Avatar, { className: "relative flex shrink-0 overflow-hidden rounded-full size-12 ring-4 ring-primary shadow-lg", children: [
+                              /* @__PURE__ */ jsx(
+                                AvatarImage,
+                                {
+                                  src: testimonial.avatarSrc,
+                                  alt: authorName
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(authorName) })
+                            ] }),
+                            /* @__PURE__ */ jsxs("div", { children: [
+                              testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "font-medium leading-none", children: testimonial.author }) : testimonial.author),
+                              testimonial.handle ? testimonial.handle : null
+                            ] })
+                          ] }),
+                          testimonial.linkConfig?.href && /* @__PURE__ */ jsx(
+                            SocialLinkIcon,
+                            {
+                              href: testimonial.linkConfig.href,
+                              iconSize: 18
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    testimonial.content && (typeof testimonial.content === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed", children: testimonial.content }) : testimonial.content)
+                  ]
+                }
+              )
+            },
+            index
+          );
         })
       }
     );
-  }, [testimonialsSlot, gridClassName, testimonials, cardClassName, cardContentClassName, authorClassName, getAuthorName, getInitials]);
+  }, [
+    testimonialsSlot,
+    gridClassName,
+    testimonials,
+    cardClassName,
+    cardContentClassName,
+    authorClassName,
+    getAuthorName,
+    getInitials
+  ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -44344,32 +44466,34 @@ function TestimonialsTwitterCards({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cn("mx-auto mb-12 max-w-2xl text-center", headerClassName),
+            className: cn(
+              "mx-auto mb-12 max-w-full md:max-w-2xl text-center",
+              headerClassName
+            ),
             children: [
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
                 "h2",
                 {
                   className: cn(
-                    "text-3xl font-semibold tracking-tight md:text-4xl",
+                    "text-pretty text-3xl md:text-4xl lg:text-6xl",
+                    "font-semibold tracking-tight",
                     headingClassName
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              ) : heading),
               description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                 "p",
                 {
-                  className: cn(
-                    "mt-4 text-lg text-muted-foreground",
-                    descriptionClassName
-                  ),
+                  className: cn("mt-4 text-lg text-balance", descriptionClassName),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
+              ) : description)
             ]
           }
         ),
@@ -44616,7 +44740,8 @@ function TestimonialsCompanyLogo({
   authorClassName,
   imageClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -44625,24 +44750,8 @@ function TestimonialsCompanyLogo({
     if (testimonialSlot) return testimonialSlot;
     if (!testimonial) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("space-y-8", contentClassName), children: [
-      companyLogo && /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: companyLogo,
-          alt: companyLogoAlt,
-          className: cn("h-10 w-auto object-contain", logoClassName),
-          optixFlowConfig
-        }
-      ),
       /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsx(
-          DynamicIcon,
-          {
-            name: "lucide/quote",
-            size: 40,
-            className: "absolute -left-2 -top-4 text-primary/10"
-          }
-        ),
+        /* @__PURE__ */ jsx(DynamicIcon, { name: "mdi/comment-quote-outline", size: 48 }),
         testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsx(
           "blockquote",
           {
@@ -44652,17 +44761,45 @@ function TestimonialsCompanyLogo({
             ),
             children: testimonial.quote
           }
-        ) : /* @__PURE__ */ jsx("div", { className: quoteClassName, children: testimonial.quote }))
+        ) : testimonial.quote)
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-4", authorClassName), children: [
-        /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-border" }),
-        /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
-          testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "font-semibold", children: testimonial.author }) : testimonial.author),
-          testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: testimonial.role }) : testimonial.role)
+      /* @__PURE__ */ jsxs("div", { className: cn("flex flex-row justify-between items-center gap-4"), children: [
+        companyLogo && /* @__PURE__ */ jsx(
+          Img,
+          {
+            src: companyLogo,
+            alt: companyLogoAlt,
+            className: cn("h-12 w-auto object-contain", logoClassName),
+            optixFlowConfig
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: cn("space-y-1 text-right", authorClassName), children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-x-2", children: [
+            testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("span", { className: "font-semibold", children: testimonial.author }) : testimonial.author),
+            testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsx("span", { className: "text-sm", children: testimonial.role }) : testimonial.role)
+          ] }),
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              href: testimonial.linkConfig?.href,
+              className: "text-sm font-bold uppercase transition-all duration-300 hover:underline hover:underline-offset-4",
+              children: testimonial.linkConfig?.label || "Learn more"
+            }
+          )
         ] })
       ] })
     ] });
-  }, [testimonialSlot, contentClassName, companyLogo, companyLogoAlt, logoClassName, optixFlowConfig, testimonial, quoteClassName, authorClassName]);
+  }, [
+    testimonialSlot,
+    contentClassName,
+    companyLogo,
+    companyLogoAlt,
+    logoClassName,
+    optixFlowConfig,
+    testimonial,
+    quoteClassName,
+    authorClassName
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -44671,17 +44808,23 @@ function TestimonialsCompanyLogo({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: cn("grid items-center gap-12 lg:grid-cols-2", gridClassName),
+          className: cn(
+            "grid items-center gap-12 lg:gap-24 grid-cols-1 lg:grid-cols-2",
+            gridClassName
+          ),
           children: [
             renderedTestimonial,
             imageSrc && /* @__PURE__ */ jsx(
               "div",
               {
                 className: cn(
-                  "relative aspect-4/3 overflow-hidden rounded-2xl",
+                  "ring-8 ring-primary",
+                  "relative aspect-4/3 overflow-hidden",
+                  "rounded-2xl shadow-xl",
                   imageClassName
                 ),
                 children: /* @__PURE__ */ jsx(
@@ -46095,36 +46238,69 @@ function TestimonialsAnimatedSplit({
   authorClassName,
   navigationClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
   optixFlowConfig
 }) {
   const [currentIndex, setCurrentIndex] = useState(0);
   const totalTestimonials = testimonials?.length ?? 0;
+  const autoPlayTimerRef = React8.useRef(
+    null
+  );
+  const resetAutoPlay = useCallback(() => {
+    if (autoPlayTimerRef.current) {
+      clearInterval(autoPlayTimerRef.current);
+      autoPlayTimerRef.current = null;
+    }
+    if (!autoPlayInterval || autoPlayInterval <= 0 || totalTestimonials === 0)
+      return;
+    autoPlayTimerRef.current = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % totalTestimonials);
+    }, autoPlayInterval);
+  }, [autoPlayInterval, totalTestimonials]);
   const goToNext = useCallback(() => {
     if (totalTestimonials === 0) return;
     setCurrentIndex((prev) => (prev + 1) % totalTestimonials);
-  }, [totalTestimonials]);
+    resetAutoPlay();
+  }, [totalTestimonials, resetAutoPlay]);
   const goToPrev = useCallback(() => {
     if (totalTestimonials === 0) return;
     setCurrentIndex(
       (prev) => (prev - 1 + totalTestimonials) % totalTestimonials
     );
-  }, [totalTestimonials]);
+    resetAutoPlay();
+  }, [totalTestimonials, resetAutoPlay]);
+  const goToIndex = useCallback(
+    (index) => {
+      setCurrentIndex(index);
+      resetAutoPlay();
+    },
+    [resetAutoPlay]
+  );
   useEffect(() => {
-    if (!autoPlayInterval || autoPlayInterval <= 0) return;
-    const interval = setInterval(goToNext, autoPlayInterval);
-    return () => clearInterval(interval);
-  }, [autoPlayInterval, goToNext]);
+    resetAutoPlay();
+    return () => {
+      if (autoPlayTimerRef.current) {
+        clearInterval(autoPlayTimerRef.current);
+      }
+    };
+  }, [resetAutoPlay]);
   const current = testimonials?.[currentIndex];
-  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("");
   }, []);
@@ -46133,12 +46309,12 @@ function TestimonialsAnimatedSplit({
     if (!current) return null;
     const authorName = getAuthorName(current);
     const avatarSrc = getAvatarSrc(current);
-    return /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:gap-24 lg:grid-cols-2", children: [
       /* @__PURE__ */ jsx(
         "div",
         {
           className: cn(
-            "relative aspect-4/3 overflow-hidden rounded-2xl lg:aspect-square",
+            "relative aspect-4/3 overflow-hidden rounded-2xl lg:aspect-square shadow-2xl",
             imageClassName
           ),
           children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
@@ -46154,7 +46330,7 @@ function TestimonialsAnimatedSplit({
                 {
                   src: current.image,
                   alt: "Testimonial",
-                  className: "size-full object-cover",
+                  className: "size-full object-cover ",
                   optixFlowConfig
                 }
               )
@@ -46173,35 +46349,42 @@ function TestimonialsAnimatedSplit({
             transition: { duration: 0.4 },
             className: "space-y-6",
             children: [
-              /* @__PURE__ */ jsx(
-                DynamicIcon,
-                {
-                  name: "lucide/quote",
-                  size: 48,
-                  className: "text-primary/20"
-                }
-              ),
+              /* @__PURE__ */ jsx(DynamicIcon, { name: "mdi/comment-quote-outline", size: 48 }),
               current.quote && (typeof current.quote === "string" ? /* @__PURE__ */ jsx(
                 "blockquote",
                 {
                   className: cn(
-                    "text-xl font-medium leading-relaxed md:text-2xl",
+                    "text-lg font-base leading-relaxed md:text-2xl",
                     quoteClassName
                   ),
                   children: current.quote
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: quoteClassName, children: current.quote })),
+              ) : 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(AvatarFallback, { children: getInitials(authorName) })
                 ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  current.author && (typeof current.author === "string" ? /* @__PURE__ */ jsx("p", { className: "font-semibold", children: current.author }) : current.author),
-                  /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
-                    current.role && (typeof current.role === "string" ? current.role : null),
-                    current.company && (typeof current.company === "string" ? ` at ${current.company}` : null)
-                  ] })
+                /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+                    current.author && (typeof current.author === "string" ? /* @__PURE__ */ jsx("span", { className: "font-semibold", children: current.author }) : current.author),
+                    /* @__PURE__ */ jsxs("span", { className: "font-base tracking-wide", children: [
+                      current.role && (typeof current.role === "string" ? current.role : null),
+                      current.company && (typeof current.company === "string" ? ` at ${current.company}` : null)
+                    ] })
+                  ] }),
+                  current.linkConfig?.href && /* @__PURE__ */ jsx(
+                    Pressable,
+                    {
+                      href: current.linkConfig.href,
+                      className: cn(
+                        current.linkConfig.className,
+                        "text-sm font-bold tracking-wide uppercase",
+                        "hover:underline hover:underline-offset-2"
+                      ),
+                      children: current.linkConfig.label
+                    }
+                  )
                 ] })
               ] })
             ]
@@ -46213,7 +46396,7 @@ function TestimonialsAnimatedSplit({
             "button",
             {
               onClick: goToPrev,
-              className: "flex size-10 items-center justify-center rounded-full border transition-colors hover:bg-muted",
+              className: "flex size-10 items-center justify-center rounded-full border transition-colors",
               "aria-label": "Previous testimonial",
               children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
             }
@@ -46221,10 +46404,10 @@ function TestimonialsAnimatedSplit({
           /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: testimonials.map((_, index) => /* @__PURE__ */ jsx(
             "button",
             {
-              onClick: () => setCurrentIndex(index),
+              onClick: () => goToIndex(index),
               className: cn(
                 "size-2 rounded-full transition-all",
-                index === currentIndex ? "w-6 bg-primary" : "bg-muted-foreground/30 hover:bg-muted-foreground/50"
+                index === currentIndex ? "w-6 bg-primary text-primary-foreground" : "bg-card text-card-foreground"
               ),
               "aria-label": `Go to testimonial ${index + 1}`
             },
@@ -46234,7 +46417,7 @@ function TestimonialsAnimatedSplit({
             "button",
             {
               onClick: goToNext,
-              className: "flex size-10 items-center justify-center rounded-full border transition-colors hover:bg-muted",
+              className: "flex size-10 items-center justify-center rounded-full border transition-colors",
               "aria-label": "Next testimonial",
               children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
             }
@@ -46242,7 +46425,24 @@ function TestimonialsAnimatedSplit({
         ] })
       ] })
     ] });
-  }, [testimonialsSlot, imageClassName, currentIndex, current, optixFlowConfig, contentClassName, quoteClassName, authorClassName, navigationClassName, testimonials, goToPrev, goToNext, getAuthorName, getAvatarSrc, getInitials]);
+  }, [
+    testimonialsSlot,
+    imageClassName,
+    currentIndex,
+    current,
+    optixFlowConfig,
+    contentClassName,
+    quoteClassName,
+    authorClassName,
+    navigationClassName,
+    testimonials,
+    goToPrev,
+    goToNext,
+    goToIndex,
+    getAuthorName,
+    getAvatarSrc,
+    getInitials
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -46251,6 +46451,7 @@ function TestimonialsAnimatedSplit({
       pattern,
       patternOpacity,
       className: cn("overflow-hidden", className),
+      containerClassName,
       children: renderedTestimonial
     }
   );
@@ -46632,14 +46833,26 @@ function TestimonialsParallaxNumber({
   authorClassName,
   navigationClassName,
   background,
-  spacing,
   pattern,
-  patternOpacity
+  patternOpacity,
+  spacing = "xl",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
   const [activeIndex, setActiveIndex] = useState(0);
   const containerRef = useRef(null);
   const totalTestimonials = testimonials?.length ?? 0;
-  const effectiveAutoPlayInterval = autoPlayInterval ?? 6e3;
+  const autoPlayTimerRef = useRef(null);
+  const resetAutoPlay = useCallback(() => {
+    if (autoPlayTimerRef.current) {
+      clearInterval(autoPlayTimerRef.current);
+      autoPlayTimerRef.current = null;
+    }
+    const interval = autoPlayInterval ?? 6e3;
+    if (interval <= 0 || totalTestimonials === 0) return;
+    autoPlayTimerRef.current = setInterval(() => {
+      setActiveIndex((prev) => (prev + 1) % totalTestimonials);
+    }, interval);
+  }, [autoPlayInterval, totalTestimonials]);
   const mouseX = useMotionValue(0);
   const mouseY = useMotionValue(0);
   const springConfig = { damping: 25, stiffness: 200 };
@@ -46647,43 +46860,60 @@ function TestimonialsParallaxNumber({
   const y = useSpring(mouseY, springConfig);
   const numberX = useTransform(x, [-200, 200], [-20, 20]);
   const numberY = useTransform(y, [-200, 200], [-10, 10]);
-  const handleMouseMove = useCallback((e) => {
-    const rect = containerRef.current?.getBoundingClientRect();
-    if (rect) {
-      const centerX = rect.left + rect.width / 2;
-      const centerY = rect.top + rect.height / 2;
-      mouseX.set(e.clientX - centerX);
-      mouseY.set(e.clientY - centerY);
-    }
-  }, [mouseX, mouseY]);
+  const handleMouseMove = useCallback(
+    (e) => {
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (rect) {
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        mouseX.set(e.clientX - centerX);
+        mouseY.set(e.clientY - centerY);
+      }
+    },
+    [mouseX, mouseY]
+  );
   const goNext = useCallback(() => {
     if (totalTestimonials === 0) return;
     setActiveIndex((prev) => (prev + 1) % totalTestimonials);
-  }, [totalTestimonials]);
+    resetAutoPlay();
+  }, [totalTestimonials, resetAutoPlay]);
   const goPrev = useCallback(() => {
     if (totalTestimonials === 0) return;
     setActiveIndex(
       (prev) => (prev - 1 + totalTestimonials) % totalTestimonials
     );
-  }, [totalTestimonials]);
+    resetAutoPlay();
+  }, [totalTestimonials, resetAutoPlay]);
   useEffect(() => {
-    if (effectiveAutoPlayInterval <= 0 || totalTestimonials === 0) return;
-    const timer = setInterval(goNext, effectiveAutoPlayInterval);
-    return () => clearInterval(timer);
-  }, [effectiveAutoPlayInterval, goNext, totalTestimonials]);
+    resetAutoPlay();
+    return () => {
+      if (autoPlayTimerRef.current) {
+        clearInterval(autoPlayTimerRef.current);
+      }
+    };
+  }, [resetAutoPlay]);
   const current = testimonials?.[activeIndex];
-  const getAuthorName = useCallback((testimonial) => {
-    if (typeof testimonial.author === "string") return testimonial.author;
-    return "";
-  }, []);
-  const getQuoteText = useCallback((testimonial) => {
-    if (typeof testimonial.quote === "string") return testimonial.quote;
-    return "";
-  }, []);
-  const getCompanyName = useCallback((testimonial) => {
-    if (typeof testimonial.company === "string") return testimonial.company;
-    return "";
-  }, []);
+  const getAuthorName = useCallback(
+    (testimonial) => {
+      if (typeof testimonial.author === "string") return testimonial.author;
+      return "";
+    },
+    []
+  );
+  const getQuoteText = useCallback(
+    (testimonial) => {
+      if (typeof testimonial.quote === "string") return testimonial.quote;
+      return "";
+    },
+    []
+  );
+  const getCompanyName = useCallback(
+    (testimonial) => {
+      if (typeof testimonial.company === "string") return testimonial.company;
+      return "";
+    },
+    []
+  );
   const renderedTestimonial = useMemo(() => {
     if (testimonialsSlot) return testimonialsSlot;
     if (!current) return null;
@@ -46701,7 +46931,7 @@ 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 text-muted-foreground/[0.05]",
+                "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 },
@@ -46713,18 +46943,18 @@ 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: String(activeIndex + 1).padStart(2, "0")
+                  children: current.backgroundIcon ? /* @__PURE__ */ jsx(DynamicIcon, { name: current.backgroundIcon }) : 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 pr-16", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center border-r border-border/50 pr-16", children: [
               /* @__PURE__ */ jsxs(
                 motion.span,
                 {
-                  className: "text-xs font-mono tracking-widest text-muted-foreground uppercase",
+                  className: "text-sm tracking-widest uppercase",
                   style: { writingMode: "vertical-rl", textOrientation: "mixed" },
                   initial: { opacity: 0 },
                   animate: { opacity: 1 },
@@ -46735,10 +46965,10 @@ function TestimonialsParallaxNumber({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx("div", { className: "relative mt-8 h-32 w-px bg-border", children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "relative mt-8 h-32 w-4 bg-muted ring-2 ring-primary rounded", children: /* @__PURE__ */ jsx(
                 motion.div,
                 {
-                  className: "absolute left-0 top-0 w-full origin-top bg-primary",
+                  className: "absolute left-0 top-0 w-full origin-top bg-primary rounded",
                   animate: {
                     height: `${(activeIndex + 1) / testimonials.length * 100}%`
                   },
@@ -46755,10 +46985,7 @@ function TestimonialsParallaxNumber({
                   exit: { opacity: 0, x: 20 },
                   transition: { duration: 0.4 },
                   className: "mb-8",
-                  children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 rounded-full border border-border px-3 py-1 font-mono text-xs text-muted-foreground", children: [
-                    /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-primary" }),
-                    companyName
-                  ] })
+                  children: /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-2 rounded-full border border-border px-3 py-1 text-xs ", children: companyName })
                 },
                 activeIndex
               ) }),
@@ -46802,7 +47029,7 @@ function TestimonialsParallaxNumber({
                 activeIndex
               ) }) }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between", children: [
-                /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxs(
+                /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
                   motion.div,
                   {
                     initial: { opacity: 0, y: 20 },
@@ -46810,22 +47037,21 @@ function TestimonialsParallaxNumber({
                     exit: { opacity: 0, y: -20 },
                     transition: { duration: 0.4, delay: 0.2 },
                     className: cn("flex items-center gap-4", authorClassName),
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        motion.div,
+                    children: /* @__PURE__ */ jsxs("div", { children: [
+                      current.author && (typeof current.author === "string" ? /* @__PURE__ */ jsx("p", { className: "text-base font-medium", children: current.author }) : current.author),
+                      current.role && (typeof current.role === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: current.role }) : current.role),
+                      current.linkConfig?.href && /* @__PURE__ */ jsx(
+                        Pressable,
                         {
-                          className: "h-px w-8 bg-primary",
-                          initial: { scaleX: 0 },
-                          animate: { scaleX: 1 },
-                          transition: { duration: 0.6, delay: 0.3 },
-                          style: { originX: 0 }
+                          href: current.linkConfig.href,
+                          className: cn(
+                            "text-sm text-muted-foreground underline underline-offset-2 hover:text-foreground transition-colors",
+                            current.linkConfig.className
+                          ),
+                          children: current.linkConfig.label
                         }
-                      ),
-                      /* @__PURE__ */ jsxs("div", { children: [
-                        current.author && (typeof current.author === "string" ? /* @__PURE__ */ jsx("p", { className: "text-base font-medium", children: current.author }) : current.author),
-                        current.role && (typeof current.role === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: current.role }) : current.role)
-                      ] })
-                    ]
+                      )
+                    ] })
                   },
                   activeIndex
                 ) }),
@@ -46838,7 +47064,7 @@ function TestimonialsParallaxNumber({
                         motion.button,
                         {
                           onClick: goPrev,
-                          className: "group relative flex size-12 items-center justify-center overflow-hidden rounded-full border border-border",
+                          className: "group relative flex size-12 items-center justify-center overflow-hidden rounded-full bg-primary text-primary-foreground",
                           whileTap: { scale: 0.95 },
                           children: /* @__PURE__ */ jsx(
                             "svg",
@@ -46847,7 +47073,7 @@ function TestimonialsParallaxNumber({
                               height: "18",
                               viewBox: "0 0 16 16",
                               fill: "none",
-                              className: "relative z-10 text-muted-foreground transition-colors group-hover:text-foreground",
+                              className: "relative z-10 transition-colors",
                               children: /* @__PURE__ */ jsx(
                                 "path",
                                 {
@@ -46866,7 +47092,7 @@ function TestimonialsParallaxNumber({
                         motion.button,
                         {
                           onClick: goNext,
-                          className: "group relative flex size-12 items-center justify-center overflow-hidden rounded-full border border-border",
+                          className: "group relative flex size-12 items-center justify-center overflow-hidden rounded-full bg-primary text-primary-foreground",
                           whileTap: { scale: 0.95 },
                           children: /* @__PURE__ */ jsx(
                             "svg",
@@ -46875,7 +47101,7 @@ function TestimonialsParallaxNumber({
                               height: "18",
                               viewBox: "0 0 16 16",
                               fill: "none",
-                              className: "relative z-10 text-muted-foreground transition-colors group-hover:text-foreground",
+                              className: "relative z-10 transition-colors",
                               children: /* @__PURE__ */ jsx(
                                 "path",
                                 {
@@ -46895,27 +47121,31 @@ function TestimonialsParallaxNumber({
                 )
               ] })
             ] })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute -bottom-20 left-0 right-0 overflow-hidden opacity-[0.08]", children: /* @__PURE__ */ jsx(
-            motion.div,
-            {
-              className: "flex whitespace-nowrap text-6xl font-bold tracking-tight",
-              animate: { x: [0, -1e3] },
-              transition: {
-                duration: 20,
-                repeat: Infinity,
-                ease: "linear"
-              },
-              children: [...Array(10)].map((_, i) => /* @__PURE__ */ jsxs("span", { className: "mx-8", children: [
-                testimonials.map((t) => getCompanyName(t)).join(" \u2022 "),
-                " \u2022"
-              ] }, i))
-            }
-          ) })
+          ] })
         ]
       }
     );
-  }, [testimonialsSlot, contentClassName, numberX, numberY, numberClassName, activeIndex, testimonials, verticalLabel, quoteClassName, authorClassName, current, navigationClassName, handleMouseMove, goPrev, goNext, totalTestimonials, getAuthorName, getQuoteText, getCompanyName]);
+  }, [
+    testimonialsSlot,
+    contentClassName,
+    numberX,
+    numberY,
+    numberClassName,
+    activeIndex,
+    testimonials,
+    verticalLabel,
+    quoteClassName,
+    authorClassName,
+    current,
+    navigationClassName,
+    handleMouseMove,
+    goPrev,
+    goNext,
+    totalTestimonials,
+    getAuthorName,
+    getQuoteText,
+    getCompanyName
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -46924,6 +47154,7 @@ function TestimonialsParallaxNumber({
       pattern,
       patternOpacity,
       className: cn("overflow-hidden", className),
+      containerClassName,
       children: /* @__PURE__ */ jsx("div", { className: "flex min-h-[500px] items-center justify-center", children: renderedTestimonial })
     }
   );
@@ -52994,6 +53225,7 @@ function HeroAdCampaignExpert({
   descriptionClassName,
   optixFlowConfig
 }) {
+  const { responsiveClassName } = useResponsiveLayout({ directionConfig });
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
@@ -53002,7 +53234,7 @@ function HeroAdCampaignExpert({
       {
         actions,
         actionsSlot,
-        actionsClassName
+        actionsClassName: cn("mt-4 md:mt-4", actionsClassName)
       }
     );
   }, [actionsSlot, actions, actionsClassName]);
@@ -53050,8 +53282,6 @@ function HeroAdCampaignExpert({
     descriptionClassName,
     renderActions
   ]);
-  const desktopOrder = directionConfig.desktop === "mediaRight" ? "lg:flex-row" : "lg:flex-row-reverse";
-  const mobileOrder = directionConfig.mobile === "mediaTop" ? "flex-col-reverse" : "flex-col";
   const hasMedia = mediaItem?.image || mediaItem?.video;
   const renderMedia = useMemo(() => {
     if (!mediaItem) return null;
@@ -53096,8 +53326,7 @@ function HeroAdCampaignExpert({
         {
           className: cn(
             "flex items-center gap-12 md:gap-16 lg:gap-24",
-            mobileOrder,
-            desktopOrder
+            responsiveClassName
           ),
           children: [
             /* @__PURE__ */ jsx(
@@ -53105,7 +53334,7 @@ function HeroAdCampaignExpert({
               {
                 items: headerItems,
                 className: cn(
-                  "relative flex flex-col items-start gap-4 md:gap-8 lg:w-1/2",
+                  "relative flex flex-col items-start gap-4 w-full lg:w-1/2",
                   contentClassName
                 )
               }
@@ -114936,31 +115165,65 @@ var BLOCK_REGISTRY = {
   "testimonials-twitter-cards": {
     id: "testimonials-twitter-cards",
     name: "Testimonials Twitter/X Style Cards",
-    description: "Twitter/X-style testimonial cards displayed in a responsive grid. Each card mimics the social media post format with author avatar, name, handle, quote content, and a link to the original tweet. Perfect for showcasing social media mentions and building credibility through real social proof.",
+    description: "A responsive grid of social media testimonial cards supporting multiple platforms (Twitter/X, Instagram, Facebook, LinkedIn, TikTok, YouTube, etc.). Each card displays post content, author avatar, display name, social handle, and links to the original post. The SocialLinkIcon automatically detects the platform from the URL and displays the appropriate brand icon. Cards feature hover effects transitioning to primary colors. Ideal for showcasing authentic social proof from real user posts across any social platform.",
     semanticTags: [
       "testimonials",
-      "twitter",
       "social-media",
+      "social-proof",
       "cards",
       "grid",
-      "social-proof",
-      "tweets",
-      "mentions"
+      "twitter",
+      "instagram",
+      "facebook",
+      "linkedin",
+      "tiktok",
+      "youtube",
+      "reviews",
+      "user-generated-content",
+      "mentions",
+      "multi-platform"
     ],
     category: "testimonials",
     component: TestimonialsTwitterCards,
     props: "TestimonialsTwitterCardsProps",
     exampleUsage: `
 <TestimonialsTwitterCards
-  title="What People Are Saying"
+  heading="What People Are Saying"
+  description="Real posts from real users across social platforms"
   testimonials={[
     {
-      id: "1",
-      quote: "Just tried @company and it's amazing!",
-      author: { name: "John Doe", handle: "@johndoe", avatar: "/avatars/john.jpg" },
-      twitterUrl: "https://twitter.com/johndoe/status/123"
+      content: "Just tried @company and it's amazing! The best tool I've used.",
+      author: "John Doe",
+      handle: "@johndoe",
+      avatarSrc: "/avatars/john.jpg",
+      linkConfig: {
+        label: "View on Twitter",
+        href: "https://twitter.com/johndoe/status/123456789"
+      }
+    },
+    {
+      content: "This changed my workflow completely. Highly recommend!",
+      author: "Jane Smith",
+      handle: "@janesmith",
+      avatarSrc: "/avatars/jane.jpg",
+      linkConfig: {
+        label: "See on Instagram",
+        href: "https://instagram.com/p/ABC123"
+      }
+    },
+    {
+      content: "Our team productivity increased 40% after implementing this solution.",
+      author: "Tech Corp",
+      handle: "Tech Corp",
+      avatarSrc: "/avatars/techcorp.jpg",
+      linkConfig: {
+        label: "Read on LinkedIn",
+        href: "https://linkedin.com/posts/techcorp_123"
+      }
     }
   ]}
+  background="gray"
+  spacing="lg"
 />`.trim()
   },
   "testimonials-carousel-image": {