@opensite/ui 1.2.0 → 1.2.2

package/dist/carousel-icon-sidebar.js

@@ -1129,10 +1129,14 @@ var Section = React4__default.forwardRef(
 );
 Section.displayName = "Section";
 function CarouselIconSidebar({
+  title,
+  description,
   items,
   itemsSlot,
   sidebarSlot,
   className,
+  sectionTitleClassName,
+  sectionDescriptionClassName,
   sidebarClassName,
   iconClassName,
   titleClassName,
@@ -1192,7 +1196,7 @@ function CarouselIconSidebar({
       "div",
       {
         className: cn(
-          "flex h-full flex-col gap-8 rounded-lg px-8 py-16",
+          "flex h-full flex-col gap-8 rounded-lg p-8",
           getNestedCardBg(background),
           getNestedCardTextColor(background),
           sidebarClassName
@@ -1250,13 +1254,13 @@ function CarouselIconSidebar({
   const itemsContent = useMemo(() => {
     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",
@@ -1272,7 +1276,14 @@ function CarouselIconSidebar({
         }
       }
     ) }) }, index));
-  }, [itemsSlot, items, itemClassName, imageClassName, optixFlowConfig, handleImageClick]);
+  }, [
+    itemsSlot,
+    items,
+    itemClassName,
+    imageClassName,
+    optixFlowConfig,
+    handleImageClick
+  ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -1283,9 +1294,41 @@ function CarouselIconSidebar({
       patternClassName,
       className,
       children: [
+        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-6 md: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 }) })
+          /* @__PURE__ */ jsx("div", { className: "hidden md:visible md:col-span-2", children: sidebarContent }),
+          /* @__PURE__ */ jsx("div", { className: "h-full md:col-span-3", children: /* @__PURE__ */ jsx(CarouselContent, { className: carouselContentClassName, children: itemsContent }) }),
+          /* @__PURE__ */ jsx("div", { className: "visible md:hidden md:col-span-2", children: sidebarContent })
         ] }) }),
         lightboxOpen && /* @__PURE__ */ jsx(
           Lightbox,

package/dist/carousel-icon-tabs.cjs

@@ -1222,11 +1222,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__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-4xl", headingClassName), children: heading })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-4xl", headingClassName), children: heading })),
           badge && /* @__PURE__ */ jsxRuntime.jsx(
             Badge,
             {
@@ -1238,7 +1238,14 @@ function CarouselIconTabs({
         ]
       }
     );
-  }, [headerSlot, headerClassName, heading, headingClassName, badge, badgeClassName]);
+  }, [
+    headerSlot,
+    headerClassName,
+    heading,
+    headingClassName,
+    badge,
+    badgeClassName
+  ]);
   const sectionsContent = React4.useMemo(() => {
     if (sectionsSlot) return sectionsSlot;
     if (!sections || sections.length === 0) return null;
@@ -1253,7 +1260,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",
@@ -1278,7 +1285,14 @@ function CarouselIconTabs({
       },
       index
     ));
-  }, [sectionsSlot, sections, itemClassName, imageClassName, optixFlowConfig, handleImageClick]);
+  }, [
+    sectionsSlot,
+    sections,
+    itemClassName,
+    imageClassName,
+    optixFlowConfig,
+    handleImageClick
+  ]);
   const tabsContent = React4.useMemo(() => {
     if (!sections || sections.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1328,7 +1342,7 @@ function CarouselIconTabs({
           Carousel,
           {
             setApi,
-            className: cn("flex flex-col gap-10", carouselClassName),
+            className: cn("flex flex-col gap-4 md:gap-10", carouselClassName),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: carouselContentClassName, children: sectionsContent }),
               tabsContent,

package/dist/carousel-icon-tabs.js

@@ -1198,11 +1198,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,
             {
@@ -1214,7 +1214,14 @@ function CarouselIconTabs({
         ]
       }
     );
-  }, [headerSlot, headerClassName, heading, headingClassName, badge, badgeClassName]);
+  }, [
+    headerSlot,
+    headerClassName,
+    heading,
+    headingClassName,
+    badge,
+    badgeClassName
+  ]);
   const sectionsContent = useMemo(() => {
     if (sectionsSlot) return sectionsSlot;
     if (!sections || sections.length === 0) return null;
@@ -1229,7 +1236,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",
@@ -1254,7 +1261,14 @@ function CarouselIconTabs({
       },
       index
     ));
-  }, [sectionsSlot, sections, itemClassName, imageClassName, optixFlowConfig, handleImageClick]);
+  }, [
+    sectionsSlot,
+    sections,
+    itemClassName,
+    imageClassName,
+    optixFlowConfig,
+    handleImageClick
+  ]);
   const tabsContent = useMemo(() => {
     if (!sections || sections.length === 0) return null;
     return /* @__PURE__ */ jsx(
@@ -1304,7 +1318,7 @@ function CarouselIconTabs({
           Carousel,
           {
             setApi,
-            className: cn("flex flex-col gap-10", carouselClassName),
+            className: cn("flex flex-col gap-4 md:gap-10", carouselClassName),
             children: [
               /* @__PURE__ */ jsx(CarouselContent, { className: carouselContentClassName, children: sectionsContent }),
               tabsContent,

package/dist/carousel-scale-focus.cjs

@@ -1237,12 +1237,12 @@ 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 || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16 text-center", children: [
             title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
               "h2",
               {
                 className: cn(
-                  "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
+                  "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
                   titleClassName
                 ),
                 children: title
@@ -1251,19 +1251,13 @@ function CarouselScaleFocus({
             description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
               "p",
               {
-                className: cn(
-                  "max-w-lg text-muted-foreground",
-                  descriptionClassName
-                ),
+                className: cn("max-w-lg text-balance", descriptionClassName),
                 children: description
               }
             ) : /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: cn(
-                  "max-w-lg text-muted-foreground",
-                  descriptionClassName
-                ),
+                className: cn("max-w-lg text-balance", descriptionClassName),
                 children: description
               }
             ))

package/dist/carousel-scale-focus.js

@@ -1213,12 +1213,12 @@ 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", children: [
+          title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16 text-center", children: [
             title && (typeof title === "string" ? /* @__PURE__ */ jsx(
               "h2",
               {
                 className: cn(
-                  "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
+                  "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
                   titleClassName
                 ),
                 children: title
@@ -1227,19 +1227,13 @@ function CarouselScaleFocus({
             description && (typeof description === "string" ? /* @__PURE__ */ jsx(
               "p",
               {
-                className: cn(
-                  "max-w-lg text-muted-foreground",
-                  descriptionClassName
-                ),
+                className: cn("max-w-lg text-balance", descriptionClassName),
                 children: description
               }
             ) : /* @__PURE__ */ jsx(
               "div",
               {
-                className: cn(
-                  "max-w-lg text-muted-foreground",
-                  descriptionClassName
-                ),
+                className: cn("max-w-lg text-balance", descriptionClassName),
                 children: description
               }
             ))

package/dist/carousel-tabs-content.cjs

@@ -1202,7 +1202,7 @@ function CarouselTabsContent({
   }, []);
   const tabsContent = React4.useMemo(() => {
     if (tabsSlot) return tabsSlot;
-    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: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative flex min-w-0 flex-1 overflow-x-auto scrollbar-hide", tabsClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-auto flex-nowrap gap-2 md:gap-4", children: [
       items?.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -1211,7 +1211,7 @@ function CarouselTabsContent({
           },
           onClick: () => setCurrent(item.category),
           className: cn(
-            "text-base transition-all duration-700 ease-out px-3 py-1.5 rounded-sm",
+            "text-base transition-all duration-700 ease-out px-3 py-1.5 rounded-sm whitespace-nowrap flex-shrink-0",
             current === item.category ? "text-foreground" : "text-muted-foreground hover:text-foreground",
             tabClassName
           ),
@@ -1317,33 +1317,21 @@ function CarouselTabsContent({
       patternClassName,
       className: cn("overflow-hidden", className),
       children: [
-        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h2",
             {
               className: cn(
-                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
                 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(
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: cn(
-                "max-w-lg text-muted-foreground",
-                descriptionClassName
-              ),
+              className: cn("max-w-lg text-balance", descriptionClassName),
               children: description
             }
           ))

package/dist/carousel-tabs-content.js

@@ -1178,7 +1178,7 @@ function CarouselTabsContent({
   }, []);
   const tabsContent = useMemo(() => {
     if (tabsSlot) return tabsSlot;
-    return /* @__PURE__ */ jsx("div", { className: cn("relative  flex", tabsClassName), children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-auto gap-2 md:gap-4", children: [
+    return /* @__PURE__ */ jsx("div", { className: cn("relative flex min-w-0 flex-1 overflow-x-auto scrollbar-hide", tabsClassName), children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-auto flex-nowrap gap-2 md:gap-4", children: [
       items?.map((item, idx) => /* @__PURE__ */ jsx(
         "button",
         {
@@ -1187,7 +1187,7 @@ function CarouselTabsContent({
           },
           onClick: () => setCurrent(item.category),
           className: cn(
-            "text-base transition-all duration-700 ease-out px-3 py-1.5 rounded-sm",
+            "text-base transition-all duration-700 ease-out px-3 py-1.5 rounded-sm whitespace-nowrap flex-shrink-0",
             current === item.category ? "text-foreground" : "text-muted-foreground hover:text-foreground",
             tabClassName
           ),
@@ -1293,33 +1293,21 @@ function CarouselTabsContent({
       patternClassName,
       className: cn("overflow-hidden", className),
       children: [
-        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-6 md: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-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-muted-foreground",
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsx(
+          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-muted-foreground",
-                descriptionClassName
-              ),
+              className: cn("max-w-lg text-balance", descriptionClassName),
               children: description
             }
           ))

package/dist/expandable-case-study-cards.cjs

@@ -33,36 +33,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
 var badgeVariants = classVarianceAuthority.cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -603,7 +573,7 @@ function ExpandableCaseStudyCards({
       {
         "data-state": selection === item.id ? "open" : "closed",
         className: cn(
-          'group max-lg:w-full max-lg:flex-1 max-md:h-[200px] md:max-lg:aspect-1336/420 lg:transform-gpu lg:transition-all lg:data-[state="closed"]:w-[20%] lg:data-[state="closed"]:duration-500 lg:data-[state="open"]:w-[60%] lg:data-[state="open"]:duration-400',
+          "group h-[280px] w-full lg:h-auto lg:w-auto lg:transform-gpu lg:transition-all lg:data-[state=closed]:w-[20%] lg:data-[state=closed]:duration-500 lg:data-[state=open]:w-[60%] lg:data-[state=open]:duration-400",
           item.className,
           cardClassName
         ),
@@ -614,72 +584,61 @@ 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__ */ 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", 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
-                  }
-                ) }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 lg:group-data-[state=closed]:blur-xs lg:transition-[filter] lg:duration-500", 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
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 h-[70%] bg-linear-to-t from-black/90 from-30% to-transparent" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col justify-end p-4 pb-5 lg:transition-opacity lg:delay-200 lg:duration-500 lg:group-data-[state=closed]:opacity-0", children: [
+                item.badges && item.badges.length > 0 && /* @__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)
+                      "mb-3 flex flex-wrap items-center gap-2",
+                      badgesClassName
                     ),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/plus", size: 32 })
+                    children: item.badges.map((badge, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+                      Badge,
+                      {
+                        variant: "secondary",
+                        className: badgeClassName,
+                        children: badge
+                      },
+                      idx
+                    ))
                   }
                 ),
-                /* @__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-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: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end justify-between gap-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", 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),
+                        className: cn(
+                          "h-6 max-w-[120px] object-contain object-left invert 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 })
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base font-medium text-white lg:text-lg", children: item.title }),
+                    item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-white/80", 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 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.jsx("div", { 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__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 20 }) })
+                ] })
               ] })
             ]
           }