@opensite/ui 1.1.9 → 1.2.1

package/dist/registry.js

@@ -20,8 +20,8 @@ import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { Lightbox } from '@page-speed/lightbox';
 import AutoScroll3 from 'embla-carousel-auto-scroll';
+import { Lightbox } from '@page-speed/lightbox';
 import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import { motion as motion$1, AnimatePresence as AnimatePresence$1 } from 'motion/react';
 import { format } from 'date-fns';
@@ -492,7 +492,7 @@ var Section = React52__default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children
@@ -30123,35 +30123,6 @@ function ExpandableCaseStudyCards({
   optixFlowConfig
 }) {
   const [selection, setSelection] = useState(items?.[0]?.id);
-  const [lightboxOpen, setLightboxOpen] = useState(false);
-  const [lightboxIndex, setLightboxIndex] = useState(0);
-  const lightboxItems = useMemo$1(() => {
-    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 = useCallback((index) => {
-    setLightboxIndex(index);
-    setLightboxOpen(true);
-  }, []);
-  const handleLightboxClose = useCallback(() => {
-    setLightboxOpen(false);
-  }, []);
   const itemsContent = useMemo$1(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
@@ -30171,110 +30142,56 @@ function ExpandableCaseStudyCards({
           "a",
           {
             href: item.href,
-            className: "relative block h-full w-full overflow-hidden rounded-xl bg-primary text-primary-foreground dark:bg-card",
+            className: "relative block h-full w-full overflow-hidden rounded-xl",
             children: [
-              /* @__PURE__ */ jsxs("div", { className: 'absolute -inset-[50%] hidden h-[200%] w-[200%] md:block lg:group-data-[state="closed"]:blur-sm', children: [
-                /* @__PURE__ */ 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__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: 'absolute inset-0 lg:group-data-[state="closed"]:blur-sm lg:transition-[filter] lg:duration-500', children: /* @__PURE__ */ jsx(
+                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
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 h-[70%] bg-linear-to-t from-black/90 from-30% to-transparent" }),
+              /* @__PURE__ */ jsxs("div", { className: 'absolute inset-0 flex flex-col justify-end p-4 pb-5 transition-opacity delay-200 duration-500 lg:group-data-[state="closed"]:opacity-0', children: [
+                item.badges && item.badges.length > 0 && /* @__PURE__ */ 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__ */ jsx(
-                      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
-                      }
-                    )
+                    className: cn(
+                      "mb-3 flex flex-wrap items-center gap-2",
+                      badgesClassName
+                    ),
+                    children: item.badges.map((badge, idx) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: badgeClassName, children: badge }, idx))
                   }
-                ) }),
-                item.logo && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    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__ */ jsx(
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between gap-3", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+                    item.logo && /* @__PURE__ */ jsx("div", { className: "mb-1", children: /* @__PURE__ */ jsx(
                       Img,
                       {
                         src: item.logo,
                         alt: item.logoAlt || item.company || "Logo",
-                        className: cn("h-8 invert", logoClassName),
+                        className: cn("h-6 max-w-[120px] object-contain object-left invert lg:h-8 lg:max-w-[150px]", logoClassName),
                         loading: "lazy",
                         optixFlowConfig
                       }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "absolute top-[50%] left-[50%] flex size-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full max-lg:hidden",
-                      getNestedCardBg(background, "accent"),
-                      getNestedCardTextColor(background)
-                    ),
-                    children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/plus", size: 32 })
-                  }
-                ),
-                /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-                    /* @__PURE__ */ jsx("div", { className: "text-base font-medium lg:text-lg", children: item.title }),
-                    item.description && /* @__PURE__ */ jsx("div", { className: "text-sm text-primary-foreground/70", children: item.description })
+                    ) }),
+                    /* @__PURE__ */ jsx("div", { className: "text-base font-medium text-white lg:text-lg", children: item.title }),
+                    item.description && /* @__PURE__ */ jsx("div", { className: "text-sm text-white/80", children: item.description })
                   ] }),
                   /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: cn(
-                        "flex size-8 shrink-0 items-center justify-center rounded-full text-foreground transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 lg:size-10",
-                        getNestedCardBg(background, "card")
-                      ),
+                      className: "flex size-8 shrink-0 items-center justify-center rounded-full bg-white/20 text-white backdrop-blur-sm transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 lg:size-10",
                       children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 20 })
                     }
                   )
-                ] }) }),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn(
-                      'flex h-20 items-center gap-2 px-4 pb-4 transition-opacity delay-200 duration-500 lg:group-data-[state="closed"]:opacity-0',
-                      badgesClassName
-                    ),
-                    children: item.badges?.map((badge, idx) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: badgeClassName, children: badge }, idx))
-                  }
-                )
+                ] })
               ] })
             ]
           }
@@ -30292,10 +30209,9 @@ function ExpandableCaseStudyCards({
     badgesClassName,
     badgeClassName,
     optixFlowConfig,
-    handleImageClick,
     background
   ]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Section,
     {
       title,
@@ -30306,39 +30222,16 @@ function ExpandableCaseStudyCards({
       patternOpacity,
       patternClassName,
       className,
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "flex flex-col gap-5 lg:aspect-1336/420 lg:flex-row",
-              containerClassName
-            ),
-            children: itemsContent
-          }
-        ),
-        lightboxOpen && /* @__PURE__ */ jsx(
-          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__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex flex-col gap-5 lg:aspect-1336/420 lg:flex-row",
+            containerClassName
+          ),
+          children: itemsContent
+        }
+      )
     }
   );
 }
@@ -30393,7 +30286,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,
@@ -30459,7 +30352,7 @@ function CarouselBadgeCards({
           "div",
           {
             className: cn(
-              "mb-8 flex items-end justify-between md:mb-14 lg:mb-16",
+              "mb-8 flex items-end justify-between md:mb-14 lg:mb-16 px-6 md:px-0",
               headerClassName
             ),
             children: [
@@ -30611,7 +30504,7 @@ function CarouselGradientOverlay({
                   )
                 }
               ),
-              /* @__PURE__ */ jsxs("div", { className: "absolute inset-x-0 bottom-0 flex flex-col items-start p-6 text-white-foreground md:p-8", children: [
+              /* @__PURE__ */ jsxs("div", { className: "absolute inset-x-0 bottom-0 flex flex-col items-start p-4 text-white md:p-8", children: [
                 /* @__PURE__ */ jsx("div", { className: "mb-2 pt-4 text-xl font-semibold md:mb-3 md:pt-4 lg:pt-4", children: item.title }),
                 /* @__PURE__ */ jsx("div", { className: "mb-8 line-clamp-2 md:mb-12 lg:mb-9", children: item.description }),
                 readMoreText && /* @__PURE__ */ jsxs("div", { className: "flex items-center text-sm", children: [
@@ -30723,7 +30616,7 @@ function CarouselGradientOverlay({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "w-full -mx-4 sm:-mx-6 lg:-mx-8", children: [
+        /* @__PURE__ */ jsxs("div", { className: "w-full -mx-4", children: [
           /* @__PURE__ */ jsx(
             Carousel,
             {
@@ -31033,11 +30926,13 @@ function AutoScrollCarousel({
       className: actionClass,
       ...pressableProps
     } = action;
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: "flex text-left", children: /* @__PURE__ */ jsx(
       Pressable,
       {
+        variant: "link",
+        asButton: true,
         className: cn(
-          "font-medium hover:underline",
+          "font-medium flex items-center text-xl",
           actionClass,
           actionClassName
         ),
@@ -31055,7 +30950,7 @@ function AutoScrollCarousel({
           )
         ] })
       }
-    );
+    ) });
   }, [actionSlot, action, actionClassName]);
   const imagesContent = useMemo$1(() => {
     if (imagesSlot) return imagesSlot;
@@ -31095,7 +30990,7 @@ function AutoScrollCarousel({
             ),
             children: [
               /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-8 md:gap-12", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                "h1",
+                "h2",
                 {
                   className: cn(
                     "text-3xl font-bold md:text-4xl",
@@ -31109,7 +31004,7 @@ function AutoScrollCarousel({
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "w-full -mx-4 sm:-mx-6 lg:-mx-8", children: /* @__PURE__ */ jsx("div", { className: "max-w-screen overflow-x-hidden", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx("div", { className: "max-w-screen overflow-x-hidden", children: /* @__PURE__ */ jsx(
           Carousel,
           {
             opts: {
@@ -31421,11 +31316,11 @@ function CarouselIconTabs({
       "div",
       {
         className: cn(
-          "mb-20 flex flex-col items-center justify-center gap-8",
+          "mb-8 md:mb-20 flex flex-col items-center justify-center gap-8",
           headerClassName
         ),
         children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("text-4xl", headingClassName), children: heading })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("text-4xl", headingClassName), children: heading })),
           badge && /* @__PURE__ */ jsx(
             Badge,
             {
@@ -31437,7 +31332,14 @@ function CarouselIconTabs({
         ]
       }
     );
-  }, [headerSlot, headerClassName, heading, headingClassName, badge, badgeClassName]);
+  }, [
+    headerSlot,
+    headerClassName,
+    heading,
+    headingClassName,
+    badge,
+    badgeClassName
+  ]);
   const sectionsContent = useMemo$1(() => {
     if (sectionsSlot) return sectionsSlot;
     if (!sections || sections.length === 0) return null;
@@ -31452,7 +31354,7 @@ function CarouselIconTabs({
               src: item.img,
               alt: typeof item.title === "string" ? item.title : item.alt || "Tab image",
               className: cn(
-                "aspect-square h-full w-full object-cover md:aspect-2/1 cursor-pointer transition-transform hover:scale-[1.02]",
+                "aspect-square h-full w-full object-cover md:aspect-2/1 cursor-pointer rounded-xl shadow-xl",
                 imageClassName
               ),
               loading: "lazy",
@@ -31477,7 +31379,14 @@ function CarouselIconTabs({
       },
       index
     ));
-  }, [sectionsSlot, sections, itemClassName, imageClassName, optixFlowConfig, handleImageClick]);
+  }, [
+    sectionsSlot,
+    sections,
+    itemClassName,
+    imageClassName,
+    optixFlowConfig,
+    handleImageClick
+  ]);
   const tabsContent = useMemo$1(() => {
     if (!sections || sections.length === 0) return null;
     return /* @__PURE__ */ jsx(
@@ -31645,16 +31554,7 @@ function TestimonialCarouselCards({
                 children: heading
               }
             ),
-            /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: cn(
-                  "text-lg text-muted-foreground",
-                  descriptionClassName
-                ),
-                children: description
-              }
-            )
+            /* @__PURE__ */ jsx("p", { className: cn("text-md", descriptionClassName), children: description })
           ] }),
           /* @__PURE__ */ jsxs(
             "div",
@@ -31735,23 +31635,10 @@ function TestimonialCarouselCards({
             "div",
             {
               className: cn(
-                "relative flex h-[460px] w-[400px] flex-col items-start justify-end rounded-2xl p-8",
-                testimonial.bgColor,
-                quotePanelClassName
+                "relative bg-background text-foreground flex h-[460px] w-[400px] flex-col items-start justify-end rounded-2xl p-8"
               ),
               children: [
-                /* @__PURE__ */ jsx(
-                  Badge,
-                  {
-                    className: cn(
-                      "mb-auto bg-background px-4 py-2",
-                      badgeClassName
-                    ),
-                    children: testimonial.username
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { className: "-rotate-[4deg] text-7xl leading-none", children: '"' }),
-                /* @__PURE__ */ jsx("p", { className: "text-xl font-semibold", children: testimonial.quote }),
+                /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold", children: testimonial.quote }),
                 /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg font-medium", children: testimonial.author })
               ]
             }
@@ -31778,7 +31665,8 @@ function TestimonialCarouselCards({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start justify-between gap-6 px-4 lg:flex-row lg:px-10", children: [
+      containerClassName: "px-4",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start justify-between gap-4 lg:flex-row ", children: [
         sidebarContent,
         /* @__PURE__ */ jsxs("div", { className: "relative w-full overflow-hidden pb-12 lg:flex-1", children: [
           /* @__PURE__ */ jsx(
@@ -31819,10 +31707,14 @@ function TestimonialCarouselCards({
   );
 }
 function CarouselIconSidebar({
+  title,
+  description,
   items,
   itemsSlot,
   sidebarSlot,
   className,
+  sectionTitleClassName,
+  sectionDescriptionClassName,
   sidebarClassName,
   iconClassName,
   titleClassName,
@@ -31940,13 +31832,13 @@ function CarouselIconSidebar({
   const itemsContent = useMemo$1(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
-    return items.map((image, index) => /* @__PURE__ */ jsx(CarouselItem, { className: cn("h-full", itemClassName), children: /* @__PURE__ */ jsx("div", { className: cn("aspect-2/1 h-full w-full", image.className), children: /* @__PURE__ */ jsx(
+    return items.map((image, index) => /* @__PURE__ */ jsx(CarouselItem, { className: cn("h-full", itemClassName), children: /* @__PURE__ */ jsx("div", { className: cn("h-full w-full", image.className), children: /* @__PURE__ */ jsx(
       Img,
       {
         src: image.src,
         alt: typeof image.title === "string" ? image.title : image.alt || "Carousel image",
         className: cn(
-          "h-full w-full rounded-lg object-cover cursor-pointer transition-transform hover:scale-[1.02]",
+          "h-full w-full rounded-lg object-cover cursor-pointer",
           imageClassName
         ),
         loading: "lazy",
@@ -31962,7 +31854,14 @@ function CarouselIconSidebar({
         }
       }
     ) }) }, index));
-  }, [itemsSlot, items, itemClassName, imageClassName, optixFlowConfig, handleImageClick]);
+  }, [
+    itemsSlot,
+    items,
+    itemClassName,
+    imageClassName,
+    optixFlowConfig,
+    handleImageClick
+  ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -31973,6 +31872,25 @@ function CarouselIconSidebar({
       patternClassName,
       className,
       children: [
+        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
+                sectionTitleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: sectionTitleClassName, children: title })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg text-balance", sectionDescriptionClassName), children: description }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("max-w-lg text-balance", sectionDescriptionClassName),
+              children: description
+            }
+          ))
+        ] }) : null,
         /* @__PURE__ */ jsx(Carousel, { setApi, className: cn("w-full", carouselClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 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: carouselContentClassName, children: itemsContent }) })
@@ -32059,7 +31977,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
               )
             }
@@ -32127,7 +32045,7 @@ function CarouselGradientText({
                       " ",
                       /* @__PURE__ */ jsx("br", {}),
                       " ",
-                      /* @__PURE__ */ jsx("span", { className: cn("text-primary/40", subheadingClassName), children: subheading })
+                      /* @__PURE__ */ jsx("span", { className: cn("text-primary", subheadingClassName), children: subheading })
                     ]
                   }
                 ),
@@ -32183,7 +32101,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__ */ jsx(
@@ -32503,6 +32421,10 @@ function ServiceHoverCarousel({
   );
 }
 function CarouselTabsContent({
+  title,
+  description,
+  titleClassName,
+  descriptionClassName,
   items,
   itemsSlot,
   tabsSlot,
@@ -32578,7 +32500,7 @@ function CarouselTabsContent({
   }, []);
   const tabsContent = useMemo$1(() => {
     if (tabsSlot) return tabsSlot;
-    return /* @__PURE__ */ jsx("div", { className: cn("relative mb-8 flex justify-center", tabsClassName), children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-auto gap-6 bg-background", children: [
+    return /* @__PURE__ */ jsx("div", { className: cn("relative  flex", tabsClassName), children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-auto gap-2 md:gap-4", children: [
       items?.map((item, idx) => /* @__PURE__ */ jsx(
         "button",
         {
@@ -32609,7 +32531,15 @@ function CarouselTabsContent({
         }
       )
     ] }) });
-  }, [tabsSlot, tabsClassName, items, current, tabClassName, indicatorClassName, indicatorStyle]);
+  }, [
+    tabsSlot,
+    tabsClassName,
+    items,
+    current,
+    tabClassName,
+    indicatorClassName,
+    indicatorStyle
+  ]);
   const itemsContent = useMemo$1(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
@@ -32621,7 +32551,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: [
@@ -32685,6 +32615,25 @@ function CarouselTabsContent({
       patternClassName,
       className: cn("overflow-hidden", className),
       children: [
+        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("max-w-lg text-balance", descriptionClassName),
+              children: description
+            }
+          ))
+        ] }) : null,
         /* @__PURE__ */ jsxs(
           Carousel,
           {
@@ -32694,7 +32643,7 @@ function CarouselTabsContent({
               carouselClassName
             ),
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex mb-8 items-center justify-between", children: [
                 tabsContent,
                 /* @__PURE__ */ jsxs(
                   "div",
@@ -32740,6 +32689,10 @@ function CarouselTabsContent({
   );
 }
 function CarouselScaleFocus({
+  title,
+  description,
+  titleClassName,
+  descriptionClassName,
   images,
   imagesSlot,
   className,
@@ -32850,6 +32803,31 @@ function CarouselScaleFocus({
       className: cn("overflow-hidden", className),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "md:px-45", children: [
+          title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
+            title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+              "h2",
+              {
+                className: cn(
+                  "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
+                  titleClassName
+                ),
+                children: title
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn("max-w-lg text-balance", descriptionClassName),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn("max-w-lg text-balance", descriptionClassName),
+                children: description
+              }
+            ))
+          ] }) : null,
           /* @__PURE__ */ jsxs(
             Carousel,
             {
@@ -32939,6 +32917,10 @@ function CarouselScaleFocus({
   );
 }
 function MasonryMotionGrid({
+  title,
+  description,
+  titleClassName,
+  descriptionClassName,
   column1Images,
   column2Images,
   column3Images,
@@ -33145,6 +33127,25 @@ function MasonryMotionGrid({
       patternClassName,
       className,
       children: [
+        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("max-w-lg text-balance", descriptionClassName),
+              children: description
+            }
+          ))
+        ] }) : null,
         renderGrid(),
         lightboxOpen && /* @__PURE__ */ jsx(
           Lightbox,
@@ -33177,7 +33178,7 @@ function BlurVignette({
   radius = "24px",
   inset = "16px",
   transitionLength = "32px",
-  blur = "21px"
+  blur = "8px"
 }) {
   return /* @__PURE__ */ jsxs(
     motion.div,
@@ -33193,7 +33194,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__ */ jsx("style", { children: `
           .blur-vignette {
@@ -33208,9 +33209,9 @@ function BlurVignette({
             --r: max(var(--transition-length), calc(var(--radius) - var(--inset)));
             --corner-size: calc(var(--r) + var(--inset)) calc(var(--r) + var(--inset));
             --corner-gradient: transparent 0px,
-              transparent calc(var(--r) - var(--transition-length)), 
+              transparent calc(var(--r) - var(--transition-length)),
               black var(--r);
-            --fill-gradient: black, 
+            --fill-gradient: black,
               black var(--inset),
               transparent calc(var(--inset) + var(--transition-length)),
               transparent calc(100% - var(--transition-length) - var(--inset)),
@@ -33223,21 +33224,21 @@ function BlurVignette({
               radial-gradient(at bottom left, var(--corner-gradient)),
               radial-gradient(at top left, var(--corner-gradient)),
               radial-gradient(at top right, var(--corner-gradient));
-            -webkit-mask-size: 100% var(--fill-narrow-size), 
+            -webkit-mask-size: 100% var(--fill-narrow-size),
               var(--fill-narrow-size) 100%,
-              var(--corner-size), 
-              var(--corner-size), 
+              var(--corner-size),
+              var(--corner-size),
               var(--corner-size),
               var(--corner-size);
-            -webkit-mask-position: 0 var(--fill-farther-position), 
+            -webkit-mask-position: 0 var(--fill-farther-position),
               var(--fill-farther-position) 0,
-              0 0, 
-              100% 0, 
-              100% 100%, 
+              0 0,
+              100% 0,
+              100% 100%,
               0 100%;
             -webkit-mask-repeat: no-repeat;
             opacity: 0;
-            transition: opacity 0.3s ease;    
+            transition: opacity 0.3s ease;
         }
 
         .blur-vignette.active {
@@ -33255,6 +33256,10 @@ function BlurVignette({
   );
 }
 function BlurVignetteGrid({
+  title,
+  description,
+  titleClassName,
+  descriptionClassName,
   images,
   imagesSlot,
   vignetteConfig,
@@ -33271,32 +33276,12 @@ function BlurVignetteGrid({
   patternClassName,
   optixFlowConfig
 }) {
-  const [lightboxOpen, setLightboxOpen] = useState(false);
-  const [lightboxIndex, setLightboxIndex] = useState(0);
   const {
     radius = "24px",
     inset = "10px",
     transitionLength = "100px",
-    blur = "15px"
+    blur = "8px"
   } = vignetteConfig || {};
-  const lightboxItems = useMemo$1(
-    () => (images ?? []).map((img, index) => ({
-      id: `vignette-image-${index}`,
-      type: "image",
-      src: img.src,
-      alt: img.alt,
-      download: true,
-      share: true
-    })),
-    [images]
-  );
-  const handleImageClick = useCallback((index) => {
-    setLightboxIndex(index);
-    setLightboxOpen(true);
-  }, []);
-  const handleLightboxClose = useCallback(() => {
-    setLightboxOpen(false);
-  }, []);
   const imagesContent = useMemo$1(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
@@ -33308,40 +33293,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__ */ jsx(
-          "div",
+          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__ */ jsx(
-              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
           }
         )
       },
@@ -33356,8 +33325,7 @@ function BlurVignetteGrid({
     blur,
     itemClassName,
     imageClassName,
-    optixFlowConfig,
-    handleImageClick
+    optixFlowConfig
   ]);
   return /* @__PURE__ */ jsxs(
     Section,
@@ -33369,33 +33337,35 @@ function BlurVignetteGrid({
       patternClassName,
       className,
       children: [
+        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("max-w-lg text-balance", descriptionClassName),
+              children: description
+            }
+          ))
+        ] }) : null,
         /* @__PURE__ */ 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__ */ jsx(
-          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
-          }
         )
       ]
     }
@@ -33487,7 +33457,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
                   ),
@@ -33519,27 +33489,26 @@ function InteriorCarousel({
       patternClassName,
       className,
       children: [
-        /* @__PURE__ */ jsx(
-          "h2",
-          {
-            className: cn(
-              "mb-4 text-center text-4xl font-semibold",
-              headingClassName
-            ),
-            children: heading
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "p",
-          {
-            className: cn(
-              "text-center text-sm text-muted-foreground",
-              descriptionClassName
-            ),
-            children: descriptionContent
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "mt-10", children: /* @__PURE__ */ jsxs(
+        heading || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
+                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",
+            {
+              className: cn("max-w-lg text-balance", descriptionClassName),
+              children: descriptionContent
+            }
+          ))
+        ] }) : null,
+        /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
           Carousel,
           {
             opts: {