@opensite/ui 1.1.9 → 1.2.0

package/dist/registry.cjs

@@ -21,8 +21,8 @@ var ProgressPrimitive = require('@radix-ui/react-progress');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
-var lightbox = require('@page-speed/lightbox');
 var AutoScroll3 = require('embla-carousel-auto-scroll');
+var lightbox = require('@page-speed/lightbox');
 var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
 var react = require('motion/react');
 var dateFns = require('date-fns');
@@ -532,7 +532,7 @@ var Section = React52__namespace.default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children
@@ -30163,35 +30163,6 @@ function ExpandableCaseStudyCards({
   optixFlowConfig
 }) {
   const [selection, setSelection] = React52.useState(items?.[0]?.id);
-  const [lightboxOpen, setLightboxOpen] = React52.useState(false);
-  const [lightboxIndex, setLightboxIndex] = React52.useState(0);
-  const lightboxItems = React52.useMemo(() => {
-    if (!items) return [];
-    const imageItems = items.map((item) => ({
-      id: `image-${item.id}`,
-      type: "image",
-      src: item.image,
-      alt: typeof item.title === "string" ? item.title : item.imageAlt || "Case study image",
-      download: true,
-      share: true
-    }));
-    const logoItems = items.filter((item) => item.logo).map((item) => ({
-      id: `logo-${item.id}`,
-      type: "image",
-      src: item.logo,
-      alt: item.logoAlt || item.company || "Logo",
-      download: true,
-      share: true
-    }));
-    return [...imageItems, ...logoItems];
-  }, [items]);
-  const handleImageClick = React52.useCallback((index) => {
-    setLightboxIndex(index);
-    setLightboxOpen(true);
-  }, []);
-  const handleLightboxClose = React52.useCallback(() => {
-    setLightboxOpen(false);
-  }, []);
   const itemsContent = React52.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
@@ -30214,67 +30185,19 @@ function ExpandableCaseStudyCards({
             className: "relative block h-full w-full overflow-hidden rounded-xl bg-primary text-primary-foreground dark:bg-card",
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: 'absolute -inset-[50%] hidden h-[200%] w-[200%] md:block lg:group-data-[state="closed"]:blur-sm', children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[calc(25%+40px)] aspect-square h-[calc(50%+40px)] max-lg:right-[calc(50%+40px)] lg:right-[50%]", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: "h-full w-full overflow-clip rounded-xl cursor-pointer",
-                    onClick: (e) => {
-                      e.preventDefault();
-                      handleImageClick(itemIndex);
-                    },
-                    role: "button",
-                    tabIndex: 0,
-                    onKeyDown: (e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        handleImageClick(itemIndex);
-                      }
-                    },
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      img.Img,
-                      {
-                        src: item.image,
-                        alt: typeof item.title === "string" ? item.title : item.imageAlt || "Case study image",
-                        className: cn(
-                          "h-full w-full object-cover object-center",
-                          imageClassName
-                        ),
-                        loading: "lazy",
-                        optixFlowConfig
-                      }
-                    )
-                  }
-                ) }),
-                item.logo && /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[calc(25%+40px)] aspect-square h-[calc(50%+40px)] max-lg:right-[calc(50%+40px)] lg:right-[50%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full overflow-clip rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  img.Img,
                   {
-                    className: "absolute inset-y-[25%] left-[50%] flex aspect-389/420 h-[50%] items-center justify-center max-lg:hidden cursor-pointer",
-                    onClick: (e) => {
-                      e.preventDefault();
-                      const logoIndex = items.length + items.slice(0, itemIndex + 1).filter((i) => i.logo).length - 1;
-                      handleImageClick(logoIndex);
-                    },
-                    role: "button",
-                    tabIndex: 0,
-                    onKeyDown: (e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        const logoIndex = items.length + items.slice(0, itemIndex + 1).filter((i) => i.logo).length - 1;
-                        handleImageClick(logoIndex);
-                      }
-                    },
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      img.Img,
-                      {
-                        src: item.logo,
-                        alt: item.logoAlt || item.company || "Logo",
-                        className: cn("h-8 invert", logoClassName),
-                        loading: "lazy",
-                        optixFlowConfig
-                      }
-                    )
+                    src: item.image,
+                    alt: typeof item.title === "string" ? item.title : item.imageAlt || "Case study image",
+                    className: cn(
+                      "h-full w-full object-cover object-center",
+                      imageClassName
+                    ),
+                    loading: "lazy",
+                    optixFlowConfig
                   }
-                ),
+                ) }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
@@ -30289,8 +30212,18 @@ function ExpandableCaseStudyCards({
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 hidden h-[50%] bg-linear-to-t from-primary from-50% to-transparent lg:block" })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col justify-between gap-4 md:absolute md:inset-0 md:max-lg:inset-x-[50%] md:max-lg:w-[50%]", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: 'flex flex-col gap-2 p-4 pt-6 transition-all delay-200 duration-500 lg:group-data-[state="closed"]:opacity-0', children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: 'flex flex-col gap-3 p-4 pt-6 transition-all delay-200 duration-500 lg:group-data-[state="closed"]:opacity-0', children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+                    item.logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      img.Img,
+                      {
+                        src: item.logo,
+                        alt: item.logoAlt || item.company || "Logo",
+                        className: cn("h-6 max-w-[120px] object-contain object-left lg:h-8 lg:max-w-[150px]", logoClassName),
+                        loading: "lazy",
+                        optixFlowConfig
+                      }
+                    ) }),
                     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base font-medium lg:text-lg", children: item.title }),
                     item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-primary-foreground/70", children: item.description })
                   ] }),
@@ -30332,10 +30265,9 @@ function ExpandableCaseStudyCards({
     badgesClassName,
     badgeClassName,
     optixFlowConfig,
-    handleImageClick,
     background
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       title,
@@ -30346,39 +30278,16 @@ function ExpandableCaseStudyCards({
       patternOpacity,
       patternClassName,
       className,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "flex flex-col gap-5 lg:aspect-1336/420 lg:flex-row",
-              containerClassName
-            ),
-            children: itemsContent
-          }
-        ),
-        lightboxOpen && /* @__PURE__ */ jsxRuntime.jsx(
-          lightbox.Lightbox,
-          {
-            items: lightboxItems,
-            initialIndex: lightboxIndex,
-            layout: "horizontal",
-            controls: {
-              navigation: true,
-              thumbnails: true,
-              download: true,
-              share: true,
-              fullscreen: true,
-              captions: true,
-              counter: true
-            },
-            onClose: handleLightboxClose,
-            enableKeyboardShortcuts: true,
-            closeOnEscape: true,
-            closeOnBackdropClick: true
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "flex flex-col gap-5 lg:aspect-1336/420 lg:flex-row",
+            containerClassName
+          ),
+          children: itemsContent
+        }
+      )
     }
   );
 }
@@ -30433,7 +30342,7 @@ function CarouselBadgeCards({
           {
             href: item.href,
             className: cn(
-              "group flex flex-col justify-between rounded-xl p-6 w-full",
+              "group flex flex-col justify-between rounded-xl p-6 w-full h-full",
               getNestedCardBg(background),
               getNestedCardTextColor(background),
               item.className,
@@ -30651,7 +30560,7 @@ function CarouselGradientOverlay({
                   )
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-x-0 bottom-0 flex flex-col items-start p-6 text-white-foreground md:p-8", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-x-0 bottom-0 flex flex-col items-start p-4 text-white md:p-8", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 pt-4 text-xl font-semibold md:mb-3 md:pt-4 lg:pt-4", children: item.title }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 line-clamp-2 md:mb-12 lg:mb-9", children: item.description }),
                 readMoreText && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-sm", children: [
@@ -31076,8 +30985,10 @@ function AutoScrollCarousel({
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
+        variant: "link",
+        asButton: true,
         className: cn(
-          "font-medium hover:underline",
+          "font-medium flex items-center",
           actionClass,
           actionClassName
         ),
@@ -31149,7 +31060,7 @@ function AutoScrollCarousel({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full -mx-4 sm:-mx-6 lg:-mx-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-screen overflow-x-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-screen overflow-x-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
           Carousel,
           {
             opts: {
@@ -32099,7 +32010,7 @@ function CarouselGradientText({
             "div",
             {
               className: cn(
-                "absolute inset-0 rounded-2xl bg-linear-to-b from-primary to-transparent to-40% dark:from-background",
+                "absolute inset-0 rounded-2xl bg-linear-to-b from-black to-transparent to-40% dark:from-background",
                 gradientClassName
               )
             }
@@ -32167,7 +32078,7 @@ function CarouselGradientText({
                       " ",
                       /* @__PURE__ */ jsxRuntime.jsx("br", {}),
                       " ",
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-primary/40", subheadingClassName), children: subheading })
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-primary", subheadingClassName), children: subheading })
                     ]
                   }
                 ),
@@ -32223,7 +32134,7 @@ function CarouselGradientText({
               {
                 className: cn(
                   "flex h-8 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-32" : "m-4 size-4"
+                  index + 1 === current ? "w-fit px-4" : "m-4 size-4"
                 ),
                 onClick: () => api && api.scrollTo(index),
                 children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -32543,6 +32454,10 @@ function ServiceHoverCarousel({
   );
 }
 function CarouselTabsContent({
+  title,
+  description,
+  titleClassName,
+  descriptionClassName,
   items,
   itemsSlot,
   tabsSlot,
@@ -32618,7 +32533,7 @@ function CarouselTabsContent({
   }, []);
   const tabsContent = React52.useMemo(() => {
     if (tabsSlot) return tabsSlot;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative mb-8 flex justify-center", tabsClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-auto gap-6 bg-background", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative  flex", tabsClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-auto gap-2 md:gap-4", children: [
       items?.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -32649,7 +32564,15 @@ function CarouselTabsContent({
         }
       )
     ] }) });
-  }, [tabsSlot, tabsClassName, items, current, tabClassName, indicatorClassName, indicatorStyle]);
+  }, [
+    tabsSlot,
+    tabsClassName,
+    items,
+    current,
+    tabClassName,
+    indicatorClassName,
+    indicatorStyle
+  ]);
   const itemsContent = React52.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
@@ -32661,7 +32584,7 @@ function CarouselTabsContent({
           "div",
           {
             className: cn(
-              "grid h-full max-w-4xl gap-10 rounded-xl border border-border p-6 shadow-sm select-none sm:p-10 md:max-h-[450px] md:grid-cols-2 lg:gap-20",
+              "grid h-full max-w-4xl gap-10 bg-background rounded-xl border border-border p-6 shadow-sm select-none sm:p-10 md:max-h-[450px] md:grid-cols-2 lg:gap-20",
               cardClassName
             ),
             children: [
@@ -32725,6 +32648,37 @@ function CarouselTabsContent({
       patternClassName,
       className: cn("overflow-hidden", className),
       children: [
+        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "max-w-lg text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "max-w-lg text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ))
+        ] }) : null,
         /* @__PURE__ */ jsxRuntime.jsxs(
           Carousel,
           {
@@ -32734,7 +32688,7 @@ function CarouselTabsContent({
               carouselClassName
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex mb-8 items-center justify-between", children: [
                 tabsContent,
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
@@ -32780,6 +32734,10 @@ function CarouselTabsContent({
   );
 }
 function CarouselScaleFocus({
+  title,
+  description,
+  titleClassName,
+  descriptionClassName,
   images,
   imagesSlot,
   className,
@@ -32890,6 +32848,37 @@ function CarouselScaleFocus({
       className: cn("overflow-hidden", className),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:px-45", children: [
+          title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+            title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h2",
+              {
+                className: cn(
+                  "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
+                  titleClassName
+                ),
+                children: title
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "max-w-lg text-muted-foreground",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "max-w-lg text-muted-foreground",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ))
+          ] }) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
             Carousel,
             {
@@ -32979,6 +32968,10 @@ function CarouselScaleFocus({
   );
 }
 function MasonryMotionGrid({
+  title,
+  description,
+  titleClassName,
+  descriptionClassName,
   column1Images,
   column2Images,
   column3Images,
@@ -33185,6 +33178,37 @@ function MasonryMotionGrid({
       patternClassName,
       className,
       children: [
+        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "max-w-lg text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "max-w-lg text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ))
+        ] }) : null,
         renderGrid(),
         lightboxOpen && /* @__PURE__ */ jsxRuntime.jsx(
           lightbox.Lightbox,
@@ -33217,7 +33241,7 @@ function BlurVignette({
   radius = "24px",
   inset = "16px",
   transitionLength = "32px",
-  blur = "21px"
+  blur = "8px"
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     framerMotion.motion.div,
@@ -33233,7 +33257,7 @@ function BlurVignette({
         y: 0
       },
       viewport: { once: true, amount: 0.2 },
-      className: `group relative cursor-pointer overflow-hidden ${className}`,
+      className: `group relative cursor-pointer overflow-hidden rounded-[2.5rem] ${className}`,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
           .blur-vignette {
@@ -33295,6 +33319,10 @@ function BlurVignette({
   );
 }
 function BlurVignetteGrid({
+  title,
+  description,
+  titleClassName,
+  descriptionClassName,
   images,
   imagesSlot,
   vignetteConfig,
@@ -33311,32 +33339,12 @@ function BlurVignetteGrid({
   patternClassName,
   optixFlowConfig
 }) {
-  const [lightboxOpen, setLightboxOpen] = React52.useState(false);
-  const [lightboxIndex, setLightboxIndex] = React52.useState(0);
   const {
     radius = "24px",
     inset = "10px",
     transitionLength = "100px",
-    blur = "15px"
+    blur = "8px"
   } = vignetteConfig || {};
-  const lightboxItems = React52.useMemo(
-    () => (images ?? []).map((img, index) => ({
-      id: `vignette-image-${index}`,
-      type: "image",
-      src: img.src,
-      alt: img.alt,
-      download: true,
-      share: true
-    })),
-    [images]
-  );
-  const handleImageClick = React52.useCallback((index) => {
-    setLightboxIndex(index);
-    setLightboxOpen(true);
-  }, []);
-  const handleLightboxClose = React52.useCallback(() => {
-    setLightboxOpen(false);
-  }, []);
   const imagesContent = React52.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
@@ -33348,40 +33356,24 @@ function BlurVignetteGrid({
         transitionLength,
         blur,
         className: cn(
-          `col-span-${image.colSpan}`,
+          `md:col-span-${image.colSpan}`,
           image.height,
-          "rounded-[2.5rem] cursor-pointer",
           image.className,
           itemClassName
         ),
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          img.Img,
           {
-            onClick: () => handleImageClick(index),
-            role: "button",
-            tabIndex: 0,
-            onKeyDown: (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                handleImageClick(index);
-              }
-            },
-            "aria-label": `View ${image.alt} in lightbox`,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
-              {
-                width: 200,
-                height: 200,
-                className: cn(
-                  "size-full rounded-[2.5rem] object-cover",
-                  imageClassName
-                ),
-                src: image.src,
-                alt: image.alt,
-                loading: "lazy",
-                optixFlowConfig
-              }
-            )
+            width: 200,
+            height: 200,
+            className: cn(
+              "size-full rounded-[2.5rem] object-cover",
+              imageClassName
+            ),
+            src: image.src,
+            alt: image.alt,
+            loading: "lazy",
+            optixFlowConfig
           }
         )
       },
@@ -33396,8 +33388,7 @@ function BlurVignetteGrid({
     blur,
     itemClassName,
     imageClassName,
-    optixFlowConfig,
-    handleImageClick
+    optixFlowConfig
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -33409,33 +33400,43 @@ function BlurVignetteGrid({
       patternClassName,
       className,
       children: [
+        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "max-w-lg text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "max-w-lg text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ))
+        ] }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: cn(`grid grid-cols-${gridColumns}`, gridGap, gridClassName),
+            className: cn(`grid grid-cols-1 md:grid-cols-${gridColumns}`, gridGap, gridClassName),
             children: imagesContent
           }
-        ),
-        lightboxOpen && /* @__PURE__ */ jsxRuntime.jsx(
-          lightbox.Lightbox,
-          {
-            items: lightboxItems,
-            initialIndex: lightboxIndex,
-            layout: "horizontal",
-            controls: {
-              navigation: true,
-              thumbnails: true,
-              download: true,
-              share: true,
-              fullscreen: true,
-              captions: true,
-              counter: true
-            },
-            onClose: handleLightboxClose,
-            enableKeyboardShortcuts: true,
-            closeOnEscape: true,
-            closeOnBackdropClick: true
-          }
         )
       ]
     }
@@ -33527,7 +33528,7 @@ function InteriorCarousel({
                   src,
                   alt,
                   className: cn(
-                    "aspect-[4/5] w-full rounded-xl object-cover transition-opacity hover:opacity-90",
+                    "aspect-4/5 w-full rounded-xl object-cover transition-opacity hover:opacity-90",
                     imageClassName,
                     itemClass
                   ),
@@ -33559,27 +33560,29 @@ function InteriorCarousel({
       patternClassName,
       className,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "h2",
-          {
-            className: cn(
-              "mb-4 text-center text-4xl font-semibold",
-              headingClassName
-            ),
-            children: heading
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "p",
-          {
-            className: cn(
-              "text-center text-sm text-muted-foreground",
-              descriptionClassName
-            ),
-            children: descriptionContent
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-10", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        heading || descriptionContent ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-10", children: [
+          heading && /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-4 text-center text-4xl font-semibold",
+                headingClassName
+              ),
+              children: heading
+            }
+          ),
+          descriptionContent && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-center text-sm text-muted-foreground",
+                descriptionClassName
+              ),
+              children: descriptionContent
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
           Carousel,
           {
             opts: {