@opensite/ui 1.1.8 → 1.1.9

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

@@ -577,6 +577,8 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function ExpandableCaseStudyCards({
+  title,
+  description,
   items,
   itemsSlot,
   className,
@@ -598,24 +600,23 @@ function ExpandableCaseStudyCards({
   const [lightboxIndex, setLightboxIndex] = React.useState(0);
   const lightboxItems = React.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 = React.useCallback((index) => {
     setLightboxIndex(index);
@@ -652,14 +653,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(
@@ -677,27 +678,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
@@ -705,60 +708,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 }) })
-                  ] })
-                ] })
+                )
               ] })
             ]
           }
@@ -776,11 +765,14 @@ function ExpandableCaseStudyCards({
     badgesClassName,
     badgeClassName,
     optixFlowConfig,
-    handleImageClick
+    handleImageClick,
+    background
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
+      title,
+      subtitle: description,
       background,
       spacing,
       pattern,

package/dist/expandable-case-study-cards.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Cuk3GvML.cjs';
-import { O as OptixFlowConfig } from './blocks-qOnR4WhL.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-BmOlmOJa.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -18,6 +18,10 @@ interface ExpandableCaseStudyItem {
      * Title of the case study
      */
     title: React.ReactNode;
+    /**
+     * Optional description for the case study
+     */
+    description?: React.ReactNode;
     /**
      * Link URL for the case study
      */
@@ -31,9 +35,9 @@ interface ExpandableCaseStudyItem {
      */
     imageAlt?: string;
     /**
-     * Company logo source URL
+     * Company logo source URL (optional)
      */
-    logo: string;
+    logo?: string;
     /**
      * Alt text for the logo
      */
@@ -41,7 +45,7 @@ interface ExpandableCaseStudyItem {
     /**
      * Company name
      */
-    company: string;
+    company?: string;
     /**
      * Array of badge labels
      */
@@ -52,6 +56,14 @@ interface ExpandableCaseStudyItem {
     className?: string;
 }
 interface ExpandableCaseStudyCardsProps {
+    /**
+     * Section title (displayed above cards)
+     */
+    title?: string;
+    /**
+     * Section description/subtitle (displayed above cards)
+     */
+    description?: string;
     /**
      * Array of case study items to display
      */
@@ -117,27 +129,40 @@ interface ExpandableCaseStudyCardsProps {
  * ExpandableCaseStudyCards displays case study cards that expand on hover.
  *
  * Features a horizontal row of cards where the hovered card expands to 60% width
- * while others shrink to 20%. Each card shows a background image, company logo,
- * badges, and a title with an arrow icon. Ideal for showcasing portfolio items,
+ * while others shrink to 20%. Each card shows a background image, title with optional
+ * description, badges, and an arrow icon. Ideal for showcasing portfolio items,
  * case studies, or featured projects with visual emphasis on the selected item.
  *
  * @example
  * ```tsx
  * <ExpandableCaseStudyCards
+ *   title="Our Work"
+ *   description="Featured case studies"
  *   items={[
  *     {
  *       id: "1",
  *       title: "E-commerce Platform Redesign",
+ *       description: "A complete overhaul of the shopping experience",
  *       href: "/case-studies/ecommerce",
  *       image: "/images/case-1.jpg",
- *       logo: "/logos/client-1.svg",
- *       company: "TechCorp",
  *       badges: ["E-commerce", "UX Design"]
+ *     },
+ *     {
+ *       id: "2",
+ *       title: "Mobile App Launch",
+ *       description: "Cross-platform development for iOS and Android",
+ *       href: "/case-studies/mobile-app",
+ *       image: "/images/case-2.jpg",
+ *       logo: "/logos/client-2.svg",
+ *       company: "TechCorp",
+ *       badges: ["Mobile", "React Native"]
  *     }
  *   ]}
+ *   background="gray"
+ *   spacing="lg"
  * />
  * ```
  */
-declare function ExpandableCaseStudyCards({ items, itemsSlot, className, containerClassName, cardClassName, imageClassName, logoClassName, badgesClassName, badgeClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: ExpandableCaseStudyCardsProps): React.JSX.Element;
+declare function ExpandableCaseStudyCards({ title, description, items, itemsSlot, className, containerClassName, cardClassName, imageClassName, logoClassName, badgesClassName, badgeClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: ExpandableCaseStudyCardsProps): React.JSX.Element;
 
 export { ExpandableCaseStudyCards, type ExpandableCaseStudyCardsProps, type ExpandableCaseStudyItem };

package/dist/expandable-case-study-cards.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-e8Z-KfHF.js';
-import { O as OptixFlowConfig } from './blocks-MliqP3QH.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-BmOlmOJa.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 /**
@@ -18,6 +18,10 @@ interface ExpandableCaseStudyItem {
      * Title of the case study
      */
     title: React.ReactNode;
+    /**
+     * Optional description for the case study
+     */
+    description?: React.ReactNode;
     /**
      * Link URL for the case study
      */
@@ -31,9 +35,9 @@ interface ExpandableCaseStudyItem {
      */
     imageAlt?: string;
     /**
-     * Company logo source URL
+     * Company logo source URL (optional)
      */
-    logo: string;
+    logo?: string;
     /**
      * Alt text for the logo
      */
@@ -41,7 +45,7 @@ interface ExpandableCaseStudyItem {
     /**
      * Company name
      */
-    company: string;
+    company?: string;
     /**
      * Array of badge labels
      */
@@ -52,6 +56,14 @@ interface ExpandableCaseStudyItem {
     className?: string;
 }
 interface ExpandableCaseStudyCardsProps {
+    /**
+     * Section title (displayed above cards)
+     */
+    title?: string;
+    /**
+     * Section description/subtitle (displayed above cards)
+     */
+    description?: string;
     /**
      * Array of case study items to display
      */
@@ -117,27 +129,40 @@ interface ExpandableCaseStudyCardsProps {
  * ExpandableCaseStudyCards displays case study cards that expand on hover.
  *
  * Features a horizontal row of cards where the hovered card expands to 60% width
- * while others shrink to 20%. Each card shows a background image, company logo,
- * badges, and a title with an arrow icon. Ideal for showcasing portfolio items,
+ * while others shrink to 20%. Each card shows a background image, title with optional
+ * description, badges, and an arrow icon. Ideal for showcasing portfolio items,
  * case studies, or featured projects with visual emphasis on the selected item.
  *
  * @example
  * ```tsx
  * <ExpandableCaseStudyCards
+ *   title="Our Work"
+ *   description="Featured case studies"
  *   items={[
  *     {
  *       id: "1",
  *       title: "E-commerce Platform Redesign",
+ *       description: "A complete overhaul of the shopping experience",
  *       href: "/case-studies/ecommerce",
  *       image: "/images/case-1.jpg",
- *       logo: "/logos/client-1.svg",
- *       company: "TechCorp",
  *       badges: ["E-commerce", "UX Design"]
+ *     },
+ *     {
+ *       id: "2",
+ *       title: "Mobile App Launch",
+ *       description: "Cross-platform development for iOS and Android",
+ *       href: "/case-studies/mobile-app",
+ *       image: "/images/case-2.jpg",
+ *       logo: "/logos/client-2.svg",
+ *       company: "TechCorp",
+ *       badges: ["Mobile", "React Native"]
  *     }
  *   ]}
+ *   background="gray"
+ *   spacing="lg"
  * />
  * ```
  */
-declare function ExpandableCaseStudyCards({ items, itemsSlot, className, containerClassName, cardClassName, imageClassName, logoClassName, badgesClassName, badgeClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: ExpandableCaseStudyCardsProps): React.JSX.Element;
+declare function ExpandableCaseStudyCards({ title, description, items, itemsSlot, className, containerClassName, cardClassName, imageClassName, logoClassName, badgesClassName, badgeClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: ExpandableCaseStudyCardsProps): React.JSX.Element;
 
 export { ExpandableCaseStudyCards, type ExpandableCaseStudyCardsProps, type ExpandableCaseStudyItem };

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

@@ -556,6 +556,8 @@ var Section = React__default.forwardRef(
 );
 Section.displayName = "Section";
 function ExpandableCaseStudyCards({
+  title,
+  description,
   items,
   itemsSlot,
   className,
@@ -577,24 +579,23 @@ function ExpandableCaseStudyCards({
   const [lightboxIndex, setLightboxIndex] = useState(0);
   const lightboxItems = 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 = useCallback((index) => {
     setLightboxIndex(index);
@@ -631,14 +632,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__ */ jsx(
@@ -656,27 +657,29 @@ function ExpandableCaseStudyCards({
                     )
                   }
                 ) }),
-                /* @__PURE__ */ jsx(
+                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();
-                      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__ */ jsx(
                       Img,
                       {
                         src: item.logo,
-                        alt: item.logoAlt || item.company,
+                        alt: item.logoAlt || item.company || "Logo",
                         className: cn("h-8 invert", logoClassName),
                         loading: "lazy",
                         optixFlowConfig
@@ -684,60 +687,46 @@ function ExpandableCaseStudyCards({
                     )
                   }
                 ),
-                /* @__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,
+                /* @__PURE__ */ 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__ */ 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: 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__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 20 })
+                    }
+                  )
+                ] }) }),
                 /* @__PURE__ */ 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__ */ jsx(Badge, { variant: "secondary", className: badgeClassName, children: badge }, idx))
                   }
-                ),
-                /* @__PURE__ */ 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__ */ 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__ */ jsx(
-                        Img,
-                        {
-                          src: item.logo,
-                          alt: item.logoAlt || item.company,
-                          className: cn("h-5 invert lg:h-6", logoClassName),
-                          loading: "lazy",
-                          optixFlowConfig
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                    /* @__PURE__ */ jsx("div", { className: "text-base font-medium lg:text-lg", children: item.title }),
-                    /* @__PURE__ */ 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__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 20 }) })
-                  ] })
-                ] })
+                )
               ] })
             ]
           }
@@ -755,11 +744,14 @@ function ExpandableCaseStudyCards({
     badgesClassName,
     badgeClassName,
     optixFlowConfig,
-    handleImageClick
+    handleImageClick,
+    background
   ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
+      title,
+      subtitle: description,
       background,
       spacing,
       pattern,

package/dist/faq-badge-support.d.cts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Cuk3GvML.cjs';
-import { A as ActionConfig } from './blocks-qOnR4WhL.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-BmOlmOJa.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface FaqItem {

package/dist/faq-badge-support.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-e8Z-KfHF.js';
-import { A as ActionConfig } from './blocks-MliqP3QH.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { A as ActionConfig } from './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-BmOlmOJa.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface FaqItem {

package/dist/faq-bordered-badge.d.cts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Cuk3GvML.cjs';
-import './blocks-qOnR4WhL.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-BmOlmOJa.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface FaqItem {