@opensite/ui 1.7.0 → 1.7.2

package/dist/hero-hiring-animated-text.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import React__default, { useMemo } from 'react';
+import React__default, { useState, useCallback, useEffect, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -814,7 +814,7 @@ function HeroHiringAnimatedText({
   scrollActionSlot,
   backgroundImage,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
@@ -824,32 +824,60 @@ function HeroHiringAnimatedText({
   descriptionClassName,
   actionsClassName
 }) {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const cycleText = useCallback(() => {
+    if (!animatedTexts || animatedTexts.length <= 1) return;
+    setActiveIndex((prev) => (prev + 1) % animatedTexts.length);
+  }, [animatedTexts]);
+  useEffect(() => {
+    if (!animatedTexts || animatedTexts.length <= 1) return;
+    const interval = setInterval(cycleText, 2e3);
+    return () => clearInterval(interval);
+  }, [animatedTexts, cycleText]);
   const renderHeading = useMemo(() => {
     if (headingSlot) return headingSlot;
-    return /* @__PURE__ */ jsxs("h1", { className: cn("text-4xl leading-9 font-bold lg:text-5xl lg:leading-12! xl:text-7xl xl:leading-22!", headingClassName), children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-2", children: headingPrefix }),
-      animatedTexts && animatedTexts.length > 0 && /* @__PURE__ */ jsx("div", { className: "relative h-[calc(2.25rem*3)] md:h-9 lg:h-12 xl:h-22", children: animatedTexts.map((text, index) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "absolute top-0 left-0 will-change-[opacity]",
-            index === 0 ? `animate-[show-text_${animatedTexts.length * 2}s_ease-in-out_infinite_0s]` : `animate-[show-text_${animatedTexts.length * 2}s_ease-in-out_infinite_${index * 2}s] opacity-0`
-          ),
-          style: {
-            animation: `show-text ${animatedTexts.length * 2}s ease-in-out infinite ${index * 2}s`,
-            opacity: index === 0 ? 1 : 0
-          },
-          children: text
-        },
-        index
-      )) })
-    ] });
-  }, [headingSlot, headingPrefix, animatedTexts, headingClassName]);
+    return /* @__PURE__ */ jsxs(
+      "h1",
+      {
+        className: cn(
+          "text-4xl leading-9 font-bold lg:text-5xl lg:leading-12! xl:text-7xl xl:leading-22! text-white text-shadow-xl",
+          headingClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-2", children: headingPrefix }),
+          animatedTexts && animatedTexts.length > 0 && /* @__PURE__ */ jsx("div", { className: "relative h-9 lg:h-12 xl:h-22", children: animatedTexts.map((text, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute top-0 left-0 text-white transition-opacity duration-1000 ease-in-out",
+              style: {
+                opacity: index === activeIndex ? 1 : 0
+              },
+              children: text
+            },
+            index
+          )) })
+        ]
+      }
+    );
+  }, [
+    headingSlot,
+    headingPrefix,
+    animatedTexts,
+    headingClassName,
+    activeIndex
+  ]);
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center gap-5", actionsClassName), children: actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col md:flex-row gap-4", actionsClassName), children: actions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -869,7 +897,14 @@ function HeroHiringAnimatedText({
   const renderScrollAction = useMemo(() => {
     if (scrollActionSlot) return scrollActionSlot;
     if (!scrollAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = scrollAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = scrollAction;
     return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
       icon,
       /* @__PURE__ */ jsx("div", { children: label }),
@@ -884,21 +919,39 @@ function HeroHiringAnimatedText({
       pattern,
       patternOpacity,
       className: cn(
-        "relative flex items-center justify-center dark h-svh max-h-[1400px] w-full bg-cover bg-position-[100%] bg-no-repeat before:absolute before:top-0 before:left-0 before:size-full before:bg-[radial-gradient(circle_at_100%_-100%,transparent_40%,rgba(0,0,0,.75)_85%)] before:content-['']",
+        "relative flex items-center justify-center h-svh max-h-[1400px] w-full bg-cover bg-position-[100%] bg-no-repeat before:absolute before:top-0 before:left-0 before:size-full before:bg-[radial-gradient(circle_at_100%_-100%,transparent_40%,rgba(0,0,0,.75)_85%)] before:content-['']",
         className
       ),
       containerClassName,
       style: { backgroundImage: `url('${backgroundImage}')` },
-      children: /* @__PURE__ */ jsx("div", { className: "relative z-10 flex size-full max-w-412.5 flex-col justify-between pt-24 pb-14 md:justify-end", children: /* @__PURE__ */ jsxs("div", { className: cn("flex h-full flex-col justify-between gap-6 md:justify-end", contentClassName), children: [
-        renderHeading,
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg lg:text-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-5", children: [
-            renderActions,
-            renderScrollAction
-          ] })
-        ] })
-      ] }) })
+      children: /* @__PURE__ */ jsx("div", { className: "relative z-10 flex size-full max-w-412.5 flex-col justify-between pt-24 pb-14 md:justify-end", children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex h-full flex-col justify-between gap-6 md:justify-end max-w-full md:max-w-md",
+            contentClassName
+          ),
+          children: [
+            renderHeading,
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-lg lg:text-2xl text-white text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [
+                renderActions,
+                renderScrollAction
+              ] })
+            ] })
+          ]
+        }
+      ) })
     }
   );
 }

package/dist/hero-premium-split-avatars.cjs

@@ -886,7 +886,7 @@ function HeroPremiumSplitAvatars({
   image,
   imageSlot,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,

package/dist/hero-premium-split-avatars.js

@@ -864,7 +864,7 @@ function HeroPremiumSplitAvatars({
   image,
   imageSlot,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,

package/dist/hero-productivity-launcher-video.cjs

@@ -846,7 +846,7 @@ function HeroProductivityLauncherVideo({
   const renderActions = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-4", children: actions.map((action, index) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col md:flex-row items-center justify-center gap-4", children: actions.map((action, index) => {
       const {
         label,
         icon,
@@ -904,8 +904,8 @@ function HeroProductivityLauncherVideo({
       className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative z-20 max-w-204.5", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-8 px-4 pt-52 pb-32 md:pb-52", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative z-20 max-w-204.5", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center pb-8", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-8 pb-16 pt-16", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-100 sm:max-w-135", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
               "h1",
               {

package/dist/hero-productivity-launcher-video.js

@@ -825,7 +825,7 @@ function HeroProductivityLauncherVideo({
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-4", children: actions.map((action, index) => {
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-col md:flex-row items-center justify-center gap-4", children: actions.map((action, index) => {
       const {
         label,
         icon,
@@ -883,8 +883,8 @@ function HeroProductivityLauncherVideo({
       className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsx("div", { className: cn("relative z-20 max-w-204.5", contentClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-8 px-4 pt-52 pb-32 md:pb-52", children: [
+        /* @__PURE__ */ jsx("div", { className: cn("relative z-20 max-w-204.5", contentClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center pb-8", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-8 pb-16 pt-16", children: [
             /* @__PURE__ */ jsx("div", { className: "max-w-100 sm:max-w-135", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
               "h1",
               {

package/dist/hero-split-spiral-shapes.cjs

@@ -929,7 +929,7 @@ function HeroSplitSpiralShapes({
               optixFlowConfig
             }
           ) }) }),
-          images[1] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-lg shadow-xl md:absolute md:top-[12%] md:right-[5%] md:w-[35%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-square", children: /* @__PURE__ */ jsxRuntime.jsx(
+          images[1] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-lg shadow-xl md:absolute md:top-[12%] md:right-[5%] md:w-[35%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-5/6", children: /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
             {
               src: images[1].src,
@@ -941,7 +941,7 @@ function HeroSplitSpiralShapes({
               optixFlowConfig
             }
           ) }) }),
-          images[2] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-lg shadow-xl md:absolute md:right-[10%] md:bottom-[15%] md:w-[55%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsxRuntime.jsx(
+          images[2] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-lg shadow-xl md:absolute md:right-[10%] md:bottom-[15%] md:w-[55%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-5/6", children: /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
             {
               src: images[2].src,

package/dist/hero-split-spiral-shapes.js

@@ -908,7 +908,7 @@ function HeroSplitSpiralShapes({
               optixFlowConfig
             }
           ) }) }),
-          images[1] && /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg shadow-xl md:absolute md:top-[12%] md:right-[5%] md:w-[35%]", children: /* @__PURE__ */ jsx("div", { className: "aspect-square", children: /* @__PURE__ */ jsx(
+          images[1] && /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg shadow-xl md:absolute md:top-[12%] md:right-[5%] md:w-[35%]", children: /* @__PURE__ */ jsx("div", { className: "aspect-5/6", children: /* @__PURE__ */ jsx(
             Img,
             {
               src: images[1].src,
@@ -920,7 +920,7 @@ function HeroSplitSpiralShapes({
               optixFlowConfig
             }
           ) }) }),
-          images[2] && /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg shadow-xl md:absolute md:right-[10%] md:bottom-[15%] md:w-[55%]", children: /* @__PURE__ */ jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsx(
+          images[2] && /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg shadow-xl md:absolute md:right-[10%] md:bottom-[15%] md:w-[55%]", children: /* @__PURE__ */ jsx("div", { className: "aspect-5/6", children: /* @__PURE__ */ jsx(
             Img,
             {
               src: images[2].src,

package/dist/hero-task-timer-animated.cjs

@@ -841,7 +841,7 @@ function HeroTaskTimerAnimated({
   images,
   imagesSlot,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,

package/dist/hero-task-timer-animated.js

@@ -819,7 +819,7 @@ function HeroTaskTimerAnimated({
   images,
   imagesSlot,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,

package/dist/hero-testimonial-image-grid.cjs

@@ -907,29 +907,21 @@ function HeroTestimonialImageGrid({
     if (testimonialSlot) return testimonialSlot;
     if (!testimonial || !testimonial.avatars) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex -space-x-2", children: testimonial.avatars.map((avatar, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-        Avatar,
-        {
-          className: "size-10 border-2 border-border",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatar.image, alt: "" }),
-            /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: avatar.fallback })
-          ]
-        },
-        index
-      )) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex -space-x-2", children: testimonial.avatars.map((avatar, index) => /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-10 border-2 border-border", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatar.image, alt: testimonial.author }),
+        /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: avatar.fallback })
+      ] }, index)) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mb-1 text-sm text-foreground/60 italic", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mb-1 text-sm  italic", children: [
           '"',
           testimonial.quote,
           '"'
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-medium text-foreground/60", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-medium ", children: [
           testimonial.author,
           ", ",
           testimonial.role,
-          " @",
-          testimonial.company
+          testimonial.company?.length ? ` | ${testimonial.company}` : ""
         ] })
       ] })
     ] });
@@ -938,44 +930,22 @@ function HeroTestimonialImageGrid({
     if (imagesSlot) return imagesSlot;
     if (!gridImages || gridImages.length < 4) return null;
     const images = gridImages;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-200", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1 / 1, className: "h-full w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid h-full w-full grid-cols-2 grid-rows-2 gap-[3.5%]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-[5.2%] border border-border bg-card", children: /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: images[0].src,
-          alt: images[0].alt || "",
-          className: "object-fit h-full w-full object-center",
-          optixFlowConfig
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden rounded-[5.2%] border border-border bg-card", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-1/2 left-[5%] w-[110%] max-w-100 -translate-y-1/2 overflow-hidden rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1.739130435 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: images[1].src,
-          alt: images[1].alt || "",
-          className: "size-full object-cover object-center",
-          optixFlowConfig
-        }
-      ) }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden rounded-[5.2%] border border-border bg-card", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[9%] left-[9%] w-[200%] max-w-150 overflow-hidden rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1.6 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: images[2].src,
-          alt: images[2].alt || "",
-          className: "size-full object-cover object-center",
-          optixFlowConfig
-        }
-      ) }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden rounded-[5.2%] border border-border bg-card", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative top-[12%] left-[50%] w-[70%] max-w-70 -translate-x-[50%]", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 0.52 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: images[3].src,
-          alt: images[3].alt || "",
-          className: "absolute z-10 w-full rounded-[16%]",
-          optixFlowConfig
-        }
-      ) }) }) })
-    ] }) }) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-full md:max-w-200", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1 / 1, className: "h-full w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid h-full w-full grid-cols-2 grid-rows-2 gap-4", children: images.slice(0, 4).map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "overflow-hidden rounded-lg shadow-xl",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: image.src,
+            alt: image.alt || "",
+            className: "size-full object-cover object-center",
+            optixFlowConfig
+          }
+        )
+      },
+      index
+    )) }) }) }) });
   }, [imagesSlot, gridImages, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -984,13 +954,49 @@ function HeroTestimonialImageGrid({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("relative flex items-center justify-center py-12 md:py-20", className),
+      className,
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-8 md:flex-row", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 lg:gap-8", children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("leading-tighter max-w-[80%] text-4xl font-semibold tracking-tight lg:text-5xl xl:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("leading-tighter max-w-[80%] text-4xl font-semibold tracking-tight lg:text-5xl xl:text-7xl", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg leading-relaxed text-muted-foreground xl:text-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-lg leading-relaxed text-muted-foreground xl:text-2xl", descriptionClassName), children: description }))
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h1",
+              {
+                className: cn(
+                  "leading-tighter max-w-[80%] text-4xl font-semibold tracking-tight lg:text-5xl xl:text-7xl",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "h1",
+              {
+                className: cn(
+                  "leading-tighter max-w-[80%] text-4xl font-semibold tracking-tight lg:text-5xl xl:text-7xl",
+                  headingClassName
+                ),
+                children: heading
+              }
+            )),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "text-lg leading-relaxed text-balance xl:text-2xl",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "text-lg leading-relaxed text-balance xl:text-2xl",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ))
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-6 lg:my-10", children: renderButton }),
           renderTestimonial

package/dist/hero-testimonial-image-grid.js

@@ -884,29 +884,21 @@ function HeroTestimonialImageGrid({
     if (testimonialSlot) return testimonialSlot;
     if (!testimonial || !testimonial.avatars) return null;
     return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex -space-x-2", children: testimonial.avatars.map((avatar, index) => /* @__PURE__ */ jsxs(
-        Avatar,
-        {
-          className: "size-10 border-2 border-border",
-          children: [
-            /* @__PURE__ */ jsx(AvatarImage, { src: avatar.image, alt: "" }),
-            /* @__PURE__ */ jsx(AvatarFallback, { children: avatar.fallback })
-          ]
-        },
-        index
-      )) }),
+      /* @__PURE__ */ jsx("div", { className: "flex -space-x-2", children: testimonial.avatars.map((avatar, index) => /* @__PURE__ */ jsxs(Avatar, { className: "size-10 border-2 border-border", children: [
+        /* @__PURE__ */ jsx(AvatarImage, { src: avatar.image, alt: testimonial.author }),
+        /* @__PURE__ */ jsx(AvatarFallback, { children: avatar.fallback })
+      ] }, index)) }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsxs("p", { className: "mb-1 text-sm text-foreground/60 italic", children: [
+        /* @__PURE__ */ jsxs("p", { className: "mb-1 text-sm  italic", children: [
           '"',
           testimonial.quote,
           '"'
         ] }),
-        /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium text-foreground/60", children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium ", children: [
           testimonial.author,
           ", ",
           testimonial.role,
-          " @",
-          testimonial.company
+          testimonial.company?.length ? ` | ${testimonial.company}` : ""
         ] })
       ] })
     ] });
@@ -915,44 +907,22 @@ function HeroTestimonialImageGrid({
     if (imagesSlot) return imagesSlot;
     if (!gridImages || gridImages.length < 4) return null;
     const images = gridImages;
-    return /* @__PURE__ */ jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-200", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1 / 1, className: "h-full w-full", children: /* @__PURE__ */ jsxs("div", { className: "grid h-full w-full grid-cols-2 grid-rows-2 gap-[3.5%]", children: [
-      /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-[5.2%] border border-border bg-card", children: /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: images[0].src,
-          alt: images[0].alt || "",
-          className: "object-fit h-full w-full object-center",
-          optixFlowConfig
-        }
-      ) }),
-      /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden rounded-[5.2%] border border-border bg-card", children: /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-[5%] w-[110%] max-w-100 -translate-y-1/2 overflow-hidden rounded-md", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.739130435 / 1, children: /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: images[1].src,
-          alt: images[1].alt || "",
-          className: "size-full object-cover object-center",
-          optixFlowConfig
-        }
-      ) }) }) }),
-      /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden rounded-[5.2%] border border-border bg-card", children: /* @__PURE__ */ jsx("div", { className: "absolute top-[9%] left-[9%] w-[200%] max-w-150 overflow-hidden rounded-md", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.6 / 1, children: /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: images[2].src,
-          alt: images[2].alt || "",
-          className: "size-full object-cover object-center",
-          optixFlowConfig
-        }
-      ) }) }) }),
-      /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden rounded-[5.2%] border border-border bg-card", children: /* @__PURE__ */ jsx("div", { className: "relative top-[12%] left-[50%] w-[70%] max-w-70 -translate-x-[50%]", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 0.52 / 1, children: /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: images[3].src,
-          alt: images[3].alt || "",
-          className: "absolute z-10 w-full rounded-[16%]",
-          optixFlowConfig
-        }
-      ) }) }) })
-    ] }) }) }) });
+    return /* @__PURE__ */ jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-full md:max-w-200", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1 / 1, className: "h-full w-full", children: /* @__PURE__ */ jsx("div", { className: "grid h-full w-full grid-cols-2 grid-rows-2 gap-4", children: images.slice(0, 4).map((image, index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "overflow-hidden rounded-lg shadow-xl",
+        children: /* @__PURE__ */ jsx(
+          Img,
+          {
+            src: image.src,
+            alt: image.alt || "",
+            className: "size-full object-cover object-center",
+            optixFlowConfig
+          }
+        )
+      },
+      index
+    )) }) }) }) });
   }, [imagesSlot, gridImages, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -961,13 +931,49 @@ function HeroTestimonialImageGrid({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("relative flex items-center justify-center py-12 md:py-20", className),
+      className,
       containerClassName,
       children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-8 md:flex-row", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:gap-8", children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("leading-tighter max-w-[80%] text-4xl font-semibold tracking-tight lg:text-5xl xl:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("leading-tighter max-w-[80%] text-4xl font-semibold tracking-tight lg:text-5xl xl:text-7xl", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg leading-relaxed text-muted-foreground xl:text-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("text-lg leading-relaxed text-muted-foreground xl:text-2xl", descriptionClassName), children: description }))
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+              "h1",
+              {
+                className: cn(
+                  "leading-tighter max-w-[80%] text-4xl font-semibold tracking-tight lg:text-5xl xl:text-7xl",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ) : /* @__PURE__ */ jsx(
+              "h1",
+              {
+                className: cn(
+                  "leading-tighter max-w-[80%] text-4xl font-semibold tracking-tight lg:text-5xl xl:text-7xl",
+                  headingClassName
+                ),
+                children: heading
+              }
+            )),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "text-lg leading-relaxed text-balance xl:text-2xl",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "text-lg leading-relaxed text-balance xl:text-2xl",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ))
           ] }),
           /* @__PURE__ */ jsx("div", { className: "my-6 lg:my-10", children: renderButton }),
           renderTestimonial