@opensite/ui 1.1.8 → 1.1.9

package/dist/registry.cjs

@@ -30144,6 +30144,8 @@ function FooterNavSocial({
   );
 }
 function ExpandableCaseStudyCards({
+  title,
+  description,
   items,
   itemsSlot,
   className,
@@ -30165,24 +30167,23 @@ function ExpandableCaseStudyCards({
   const [lightboxIndex, setLightboxIndex] = React52.useState(0);
   const lightboxItems = React52.useMemo(() => {
     if (!items) return [];
-    return items.flatMap((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
-      },
-      {
-        id: `logo-${item.id}`,
-        type: "image",
-        src: item.logo,
-        alt: item.logoAlt || item.company,
-        download: true,
-        share: true
-      }
-    ]);
+    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);
@@ -30219,14 +30220,14 @@ function ExpandableCaseStudyCards({
                     className: "h-full w-full overflow-clip rounded-xl cursor-pointer",
                     onClick: (e) => {
                       e.preventDefault();
-                      handleImageClick(itemIndex * 2);
+                      handleImageClick(itemIndex);
                     },
                     role: "button",
                     tabIndex: 0,
                     onKeyDown: (e) => {
                       if (e.key === "Enter" || e.key === " ") {
                         e.preventDefault();
-                        handleImageClick(itemIndex * 2);
+                        handleImageClick(itemIndex);
                       }
                     },
                     children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -30244,27 +30245,29 @@ function ExpandableCaseStudyCards({
                     )
                   }
                 ) }),
-                /* @__PURE__ */ jsxRuntime.jsx(
+                item.logo && /* @__PURE__ */ jsxRuntime.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();
-                      handleImageClick(itemIndex * 2 + 1);
+                      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();
-                        handleImageClick(itemIndex * 2 + 1);
+                        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,
+                        alt: item.logoAlt || item.company || "Logo",
                         className: cn("h-8 invert", logoClassName),
                         loading: "lazy",
                         optixFlowConfig
@@ -30272,60 +30275,46 @@ function ExpandableCaseStudyCards({
                     )
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                  DynamicIcon,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
                   {
-                    name: "lucide/plus",
-                    size: 32
+                    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__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/plus", size: 32 })
                   }
-                ) }),
+                ),
                 /* @__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: "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 })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.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")
+                      ),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 20 })
+                    }
+                  )
+                ] }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
                     className: cn(
-                      'flex h-20 items-center gap-2 p-4 transition-opacity delay-200 duration-500 lg:group-data-[state="closed"]:opacity-0',
+                      '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__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: badgeClassName, children: badge }, idx))
                   }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: 'flex flex-col gap-2 p-4 transition-all delay-200 duration-500 lg:group-data-[state="closed"]:translate-y-4 lg:group-data-[state="closed"]:opacity-0', children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: "lg:hidden cursor-pointer",
-                      onClick: (e) => {
-                        e.preventDefault();
-                        handleImageClick(itemIndex * 2 + 1);
-                      },
-                      role: "button",
-                      tabIndex: 0,
-                      onKeyDown: (e) => {
-                        if (e.key === "Enter" || e.key === " ") {
-                          e.preventDefault();
-                          handleImageClick(itemIndex * 2 + 1);
-                        }
-                      },
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        img.Img,
-                        {
-                          src: item.logo,
-                          alt: item.logoAlt || item.company,
-                          className: cn("h-5 invert lg:h-6", logoClassName),
-                          loading: "lazy",
-                          optixFlowConfig
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base font-medium lg:text-lg", children: item.title }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex size-8 items-center justify-center rounded-full transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 lg:size-10", getNestedCardBg(background, "card"), getNestedCardTextColor(background)), children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 20 }) })
-                  ] })
-                ] })
+                )
               ] })
             ]
           }
@@ -30343,11 +30332,14 @@ function ExpandableCaseStudyCards({
     badgesClassName,
     badgeClassName,
     optixFlowConfig,
-    handleImageClick
+    handleImageClick,
+    background
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
+      title,
+      subtitle: description,
       background,
       spacing,
       pattern,
@@ -30415,8 +30407,6 @@ function CarouselBadgeCards({
   const [carouselApi, setCarouselApi] = React52.useState();
   const [canScrollPrev, setCanScrollPrev] = React52.useState(false);
   const [canScrollNext, setCanScrollNext] = React52.useState(false);
-  const [lightboxOpen, setLightboxOpen] = React52.useState(false);
-  const [lightboxIndex, setLightboxIndex] = React52.useState(0);
   React52.useEffect(() => {
     if (!carouselApi) {
       return;
@@ -30431,30 +30421,10 @@ function CarouselBadgeCards({
       carouselApi.off("select", updateSelection);
     };
   }, [carouselApi]);
-  const lightboxItems = React52.useMemo(
-    () => (items ?? []).map((item, index) => ({
-      id: `badge-card-${index}`,
-      type: "image",
-      src: item.image,
-      alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
-      download: true,
-      share: true
-    })),
-    [items]
-  );
-  const handleImageClick = React52.useCallback((index, e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    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;
-    return items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    return items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
       CarouselItem,
       {
         className: cn("max-w-[320px] pl-5 lg:max-w-[360px]", itemClassName),
@@ -30463,42 +30433,26 @@ function CarouselBadgeCards({
           {
             href: item.href,
             className: cn(
-              "group flex flex-col justify-between rounded-xl p-6",
+              "group flex flex-col justify-between rounded-xl p-6 w-full",
               getNestedCardBg(background),
               getNestedCardTextColor(background),
               item.className,
               cardClassName
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex aspect-3/2 overflow-clip rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex aspect-3/2 overflow-clip rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105", children: /* @__PURE__ */ jsxRuntime.jsx(
+                img.Img,
                 {
-                  className: "relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105 cursor-pointer",
-                  onClick: (e) => handleImageClick(index, e),
-                  role: "button",
-                  tabIndex: 0,
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      handleImageClick(index, e);
-                    }
-                  },
-                  "aria-label": `View ${typeof item.title === "string" ? item.title : "image"} in lightbox`,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    img.Img,
-                    {
-                      src: item.image,
-                      alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
-                      className: cn(
-                        "h-full w-full object-cover object-center",
-                        imageClassName
-                      ),
-                      loading: "lazy",
-                      optixFlowConfig
-                    }
-                  )
+                  src: item.image,
+                  alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
+                  className: cn(
+                    "h-full w-full object-cover object-center",
+                    imageClassName
+                  ),
+                  loading: "lazy",
+                  optixFlowConfig
                 }
-              ) }) }) }),
+              ) }) }) }) }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: badgeClassName, children: item.label }) }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 line-clamp-3 pt-4 text-lg font-medium wrap-break-word md:mb-3 md:pt-4 md:text-xl lg:pt-4 lg:text-2xl", children: item.title }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 line-clamp-2 text-sm text-muted-foreground md:mb-12 md:text-base lg:mb-9", children: item.description }),
@@ -30529,7 +30483,7 @@ function CarouselBadgeCards({
     imageClassName,
     optixFlowConfig,
     readMoreText,
-    handleImageClick
+    background
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -30553,7 +30507,7 @@ function CarouselBadgeCards({
                 "h2",
                 {
                   className: cn(
-                    "text-3xl font-medium tracking-tight md:text-4xl lg:text-5xl",
+                    "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
                     headingClassName
                   ),
                   children: heading
@@ -30613,28 +30567,7 @@ function CarouselBadgeCards({
               }
             )
           }
-        ) }),
-        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
-          }
-        )
+        ) })
       ]
     }
   );
@@ -30668,8 +30601,6 @@ function CarouselGradientOverlay({
   const [canScrollPrev, setCanScrollPrev] = React52.useState(false);
   const [canScrollNext, setCanScrollNext] = React52.useState(false);
   const [currentSlide, setCurrentSlide] = React52.useState(0);
-  const [lightboxOpen, setLightboxOpen] = React52.useState(false);
-  const [lightboxIndex, setLightboxIndex] = React52.useState(0);
   React52.useEffect(() => {
     if (!carouselApi) {
       return;
@@ -30685,28 +30616,10 @@ function CarouselGradientOverlay({
       carouselApi.off("select", updateSelection);
     };
   }, [carouselApi]);
-  const lightboxItems = React52.useMemo(
-    () => (items ?? []).map((item, idx) => ({
-      id: `carousel-image-${idx}`,
-      type: "image",
-      src: item.image,
-      alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
-      download: true,
-      share: true
-    })),
-    [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;
-    return items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    return items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
       CarouselItem,
       {
         className: cn("max-w-[320px] pl-5 lg:max-w-[360px]", itemClassName),
@@ -30722,35 +30635,23 @@ function CarouselGradientOverlay({
                   src: item.image,
                   alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
                   className: cn(
-                    "absolute h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105 cursor-pointer",
+                    "absolute h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105",
                     imageClassName
                   ),
                   loading: "lazy",
-                  optixFlowConfig,
-                  onClick: (e) => {
-                    e.preventDefault();
-                    handleImageClick(index);
-                  },
-                  role: "button",
-                  tabIndex: 0,
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      handleImageClick(index);
-                    }
-                  }
+                  optixFlowConfig
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
                   className: cn(
-                    "absolute inset-0 h-full bg-linear-to-t from-primary from-20% to-transparent mix-blend-multiply",
+                    "absolute inset-0 h-full bg-linear-to-t from-black from-20% to-transparent mix-blend-multiply",
                     gradientClassName
                   )
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-x-0 bottom-0 flex flex-col items-start p-6 text-primary-foreground md:p-8", children: [
+              /* @__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.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: [
@@ -30780,7 +30681,6 @@ function CarouselGradientOverlay({
     imageClassName,
     gradientClassName,
     optixFlowConfig,
-    handleImageClick,
     readMoreText
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -30806,7 +30706,7 @@ function CarouselGradientOverlay({
                   "h2",
                   {
                     className: cn(
-                      "text-3xl font-medium md:text-4xl lg:text-5xl",
+                      "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
                       titleClassName
                     ),
                     children: title
@@ -30906,28 +30806,7 @@ function CarouselGradientOverlay({
               ))
             }
           )
-        ] }),
-        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
-          }
-        )
+        ] })
       ]
     }
   );
@@ -30959,8 +30838,6 @@ function CarouselDemoLink({
   const [carouselApi, setCarouselApi] = React52.useState();
   const [canScrollPrev, setCanScrollPrev] = React52.useState(false);
   const [canScrollNext, setCanScrollNext] = React52.useState(false);
-  const [lightboxOpen, setLightboxOpen] = React52.useState(false);
-  const [lightboxIndex, setLightboxIndex] = React52.useState(0);
   React52.useEffect(() => {
     if (!carouselApi) {
       return;
@@ -30975,26 +30852,6 @@ function CarouselDemoLink({
       carouselApi.off("select", updateSelection);
     };
   }, [carouselApi]);
-  const lightboxItems = React52.useMemo(
-    () => (items ?? []).map((item, index) => ({
-      id: `demo-card-${index}`,
-      type: "image",
-      src: item.image,
-      alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
-      download: true,
-      share: true
-    })),
-    [items]
-  );
-  const handleImageClick = React52.useCallback((index, e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setLightboxIndex(index);
-    setLightboxOpen(true);
-  }, []);
-  const handleLightboxClose = React52.useCallback(() => {
-    setLightboxOpen(false);
-  }, []);
   const demoActionContent = React52.useMemo(() => {
     if (demoActionSlot) return demoActionSlot;
     if (!demoAction) return null;
@@ -31036,7 +30893,11 @@ function CarouselDemoLink({
     return items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
       CarouselItem,
       {
-        className: cn("ml-8 md:max-w-[452px]", itemClassName),
+        className: cn(
+          "basis-[85%] md:basis-auto md:max-w-[452px]",
+          index === 0 ? "ml-0" : "ml-4 md:ml-6",
+          itemClassName
+        ),
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           "a",
           {
@@ -31047,35 +30908,19 @@ function CarouselDemoLink({
               cardClassName
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex aspect-3/2 overflow-clip rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex aspect-3/2 overflow-clip rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105", children: /* @__PURE__ */ jsxRuntime.jsx(
+                img.Img,
                 {
-                  className: "relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105 cursor-pointer",
-                  onClick: (e) => handleImageClick(index, e),
-                  role: "button",
-                  tabIndex: 0,
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      handleImageClick(index, e);
-                    }
-                  },
-                  "aria-label": `View ${typeof item.title === "string" ? item.title : "image"} in lightbox`,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    img.Img,
-                    {
-                      src: item.image,
-                      alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
-                      className: cn(
-                        "h-full w-full object-cover object-center",
-                        imageClassName
-                      ),
-                      loading: "lazy",
-                      optixFlowConfig
-                    }
-                  )
+                  src: item.image,
+                  alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
+                  className: cn(
+                    "h-full w-full object-cover object-center",
+                    imageClassName
+                  ),
+                  loading: "lazy",
+                  optixFlowConfig
                 }
-              ) }) }) }),
+              ) }) }) }) }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 line-clamp-3 pt-4 text-lg font-medium wrap-break-word md:mb-3 md:pt-4 md:text-xl lg:pt-4 lg:text-2xl", children: item.title }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 line-clamp-2 text-sm text-muted-foreground md:mb-12 md:text-base lg:mb-9", children: item.summary }),
               readMoreText && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-sm", children: [
@@ -31096,16 +30941,7 @@ function CarouselDemoLink({
       },
       item.id
     ));
-  }, [
-    itemsSlot,
-    items,
-    itemClassName,
-    cardClassName,
-    imageClassName,
-    optixFlowConfig,
-    readMoreText,
-    handleImageClick
-  ]);
+  }, [itemsSlot, items, itemClassName, cardClassName, imageClassName, optixFlowConfig, readMoreText]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -31177,7 +31013,7 @@ function CarouselDemoLink({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-full -mx-4 sm:-mx-6 lg:-mx-8", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
           Carousel,
           {
             setApi: setCarouselApi,
@@ -31188,43 +31024,16 @@ function CarouselDemoLink({
                 }
               }
             },
-            className: cn(
-              "relative w-full max-w-full md:-left-4",
-              carouselClassName
-            ),
+            className: cn("relative w-full", carouselClassName),
             children: /* @__PURE__ */ jsxRuntime.jsx(
               CarouselContent,
               {
-                className: cn(
-                  "hide-scrollbar w-full max-w-full md:-mr-4 md:ml-8 2xl:mr-[max(0rem,calc(50vw-700px-1rem))] 2xl:ml-[max(8rem,calc(50vw-700px+1rem))]",
-                  carouselContentClassName
-                ),
+                className: cn("hide-scrollbar w-full", carouselContentClassName),
                 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
-          }
-        )
+        ) })
       ]
     }
   );