@opensite/ui 2.7.1 → 2.7.2

package/dist/about-story-expertise.cjs

@@ -918,7 +918,7 @@ function AboutStoryExpertise({
   className,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "xl",
+  spacing = "hero",
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -937,6 +937,7 @@ function AboutStoryExpertise({
       "div",
       {
         className: cn(
+          "bg-card text-card-foreground",
           "rounded-2xl border border-border/60 p-6 shadow-xl",
           highlightClassName
         ),
@@ -953,7 +954,7 @@ function AboutStoryExpertise({
                   children: highlight.label
                 }
               ) : highlight.label),
-              highlight.title && (typeof highlight.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold", children: highlight.title }) : highlight.title)
+              highlight.title && (typeof highlight.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-bold", children: highlight.title }) : highlight.title)
             ] })
           ] }),
           highlight.description && (typeof highlight.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm"), children: highlight.description }) : highlight.description)
@@ -978,7 +979,7 @@ function AboutStoryExpertise({
             whileInView: { opacity: 1, scale: 1 },
             viewport: { once: true, margin: "-50px" },
             transition: { duration: 0.3, delay: idx * 0.05 },
-            className: "flex items-start gap-4 rounded-2xl bg-background p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg",
+            className: "flex items-start gap-4 rounded-2xl bg-card text-card-foreground p-6 shadow-md transition-all duration-300 hover:shadow-xl",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
@@ -990,7 +991,7 @@ function AboutStoryExpertise({
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                area.title && (typeof area.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-lg font-bold", children: area.title }) : area.title),
+                area.title && (typeof area.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-bold", children: area.title }) : area.title),
                 area.description && (typeof area.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 text-sm"), children: area.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: area.description }))
               ] })
             ]
@@ -1005,7 +1006,7 @@ function AboutStoryExpertise({
     {
       background,
       spacing,
-      className: cn(className),
+      className,
       pattern,
       patternOpacity,
       containerClassName,
@@ -1030,7 +1031,7 @@ function AboutStoryExpertise({
                       ),
                       children: eyebrow
                     }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: eyebrowClassName, children: eyebrow })),
+                  ) : eyebrow),
                   heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                     "h2",
                     {
@@ -1040,7 +1041,7 @@ function AboutStoryExpertise({
                       ),
                       children: heading
                     }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2", headingClassName), children: heading }))
+                  ) : heading)
                 ] }),
                 storyContent,
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -1066,7 +1067,8 @@ function AboutStoryExpertise({
                 "div",
                 {
                   className: cn(
-                    "relative overflow-hidden rounded-3xl border border-border shadow-2xl",
+                    "relative overflow-hidden rounded-3xl",
+                    "border border-border shadow-2xl aspect-square",
                     imageClassName
                   ),
                   children: [
@@ -1096,7 +1098,6 @@ function AboutStoryExpertise({
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm font-semibold uppercase tracking-[0.2em]"), children: "Our Expertise" }),
                 expertiseHeading && (typeof expertiseHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                   "h3",
                   {
@@ -1106,7 +1107,7 @@ function AboutStoryExpertise({
                     ),
                     children: expertiseHeading
                   }
-                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2", expertiseHeadingClassName), children: expertiseHeading })),
+                ) : expertiseHeading),
                 expertiseDescription && (typeof expertiseDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                   "p",
                   {
@@ -1116,16 +1117,7 @@ function AboutStoryExpertise({
                     ),
                     children: expertiseDescription
                   }
-                ) : /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "mx-auto mt-3 max-w-2xl",
-                      expertiseDescriptionClassName
-                    ),
-                    children: expertiseDescription
-                  }
-                ))
+                ) : expertiseDescription)
               ] }),
               expertiseAreasContent
             ]

package/dist/about-story-expertise.js

@@ -897,7 +897,7 @@ function AboutStoryExpertise({
   className,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "xl",
+  spacing = "hero",
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -916,6 +916,7 @@ function AboutStoryExpertise({
       "div",
       {
         className: cn(
+          "bg-card text-card-foreground",
           "rounded-2xl border border-border/60 p-6 shadow-xl",
           highlightClassName
         ),
@@ -932,7 +933,7 @@ function AboutStoryExpertise({
                   children: highlight.label
                 }
               ) : highlight.label),
-              highlight.title && (typeof highlight.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold", children: highlight.title }) : highlight.title)
+              highlight.title && (typeof highlight.title === "string" ? /* @__PURE__ */ jsx("div", { className: "text-lg font-bold", children: highlight.title }) : highlight.title)
             ] })
           ] }),
           highlight.description && (typeof highlight.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm"), children: highlight.description }) : highlight.description)
@@ -957,7 +958,7 @@ function AboutStoryExpertise({
             whileInView: { opacity: 1, scale: 1 },
             viewport: { once: true, margin: "-50px" },
             transition: { duration: 0.3, delay: idx * 0.05 },
-            className: "flex items-start gap-4 rounded-2xl bg-background p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg",
+            className: "flex items-start gap-4 rounded-2xl bg-card text-card-foreground p-6 shadow-md transition-all duration-300 hover:shadow-xl",
             children: [
               /* @__PURE__ */ jsx(
                 "div",
@@ -969,7 +970,7 @@ function AboutStoryExpertise({
                 }
               ),
               /* @__PURE__ */ jsxs("div", { children: [
-                area.title && (typeof area.title === "string" ? /* @__PURE__ */ jsx("h4", { className: "text-lg font-bold", children: area.title }) : area.title),
+                area.title && (typeof area.title === "string" ? /* @__PURE__ */ jsx("div", { className: "text-lg font-bold", children: area.title }) : area.title),
                 area.description && (typeof area.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-sm"), children: area.description }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: area.description }))
               ] })
             ]
@@ -984,7 +985,7 @@ function AboutStoryExpertise({
     {
       background,
       spacing,
-      className: cn(className),
+      className,
       pattern,
       patternOpacity,
       containerClassName,
@@ -1009,7 +1010,7 @@ function AboutStoryExpertise({
                       ),
                       children: eyebrow
                     }
-                  ) : /* @__PURE__ */ jsx("div", { className: eyebrowClassName, children: eyebrow })),
+                  ) : eyebrow),
                   heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
                     "h2",
                     {
@@ -1019,7 +1020,7 @@ function AboutStoryExpertise({
                       ),
                       children: heading
                     }
-                  ) : /* @__PURE__ */ jsx("div", { className: cn("mt-2", headingClassName), children: heading }))
+                  ) : heading)
                 ] }),
                 storyContent,
                 /* @__PURE__ */ jsx(
@@ -1045,7 +1046,8 @@ function AboutStoryExpertise({
                 "div",
                 {
                   className: cn(
-                    "relative overflow-hidden rounded-3xl border border-border shadow-2xl",
+                    "relative overflow-hidden rounded-3xl",
+                    "border border-border shadow-2xl aspect-square",
                     imageClassName
                   ),
                   children: [
@@ -1075,7 +1077,6 @@ function AboutStoryExpertise({
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-                /* @__PURE__ */ jsx("p", { className: cn("text-sm font-semibold uppercase tracking-[0.2em]"), children: "Our Expertise" }),
                 expertiseHeading && (typeof expertiseHeading === "string" ? /* @__PURE__ */ jsx(
                   "h3",
                   {
@@ -1085,7 +1086,7 @@ function AboutStoryExpertise({
                     ),
                     children: expertiseHeading
                   }
-                ) : /* @__PURE__ */ jsx("div", { className: cn("mt-2", expertiseHeadingClassName), children: expertiseHeading })),
+                ) : expertiseHeading),
                 expertiseDescription && (typeof expertiseDescription === "string" ? /* @__PURE__ */ jsx(
                   "p",
                   {
@@ -1095,16 +1096,7 @@ function AboutStoryExpertise({
                     ),
                     children: expertiseDescription
                   }
-                ) : /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "mx-auto mt-3 max-w-2xl",
-                      expertiseDescriptionClassName
-                    ),
-                    children: expertiseDescription
-                  }
-                ))
+                ) : expertiseDescription)
               ] }),
               expertiseAreasContent
             ]

package/dist/blog-carousel-apple.cjs

@@ -533,9 +533,8 @@ var AppleCarousel = ({
                 "div",
                 {
                   className: cn(
-                    "flex flex-row justify-start gap-4 pl-4",
-                    "mx-auto max-w-7xl",
-                    // remove max-w-4xl if you want the carousel to span the full width of its container
+                    "flex flex-row justify-start",
+                    "mx-auto gap-4 pl-4",
                     containerClassName
                   ),
                   children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -612,7 +611,9 @@ var AppleCarouselCard = ({
       "div",
       {
         className: cn(
-          "relative z-40 p-4 md:p-8 text-shadow-lg",
+          "text-left text-white text-shadow-lg",
+          "relative z-40 p-4 md:p-8",
+          "text-balance",
           contentClassName
         ),
         children: [
@@ -620,7 +621,7 @@ var AppleCarouselCard = ({
             react.motion.p,
             {
               layoutId: layout ? `category-${card.category}-${index}` : void 0,
-              className: "text-left font-sans text-sm font-medium text-white md:text-base",
+              className: "text-sm font-bold md:text-base tracking-tight uppercase",
               children: card.category
             }
           ),
@@ -628,7 +629,7 @@ var AppleCarouselCard = ({
             react.motion.p,
             {
               layoutId: layout ? `title-${card.title}-${index}` : void 0,
-              className: "mt-2 max-w-xs text-left font-sans text-lg font-semibold text-balance text-white md:text-2xl",
+              className: "mt-2 text-lg md:text-2xl font-semibold",
               children: card.title
             }
           )
@@ -641,7 +642,9 @@ var AppleCarouselCard = ({
         src: card.src,
         alt: card.title,
         className: cn(
-          "absolute inset-0 z-10 h-full w-full object-cover brightness-50",
+          "absolute inset-0 z-10",
+          "h-full w-full object-cover",
+          action.type !== "none" ? "cursor-pointer transition-all duration-500 brightness-75 hover:brightness-50" : "brightness-75",
           imageClassName
         ),
         optixFlowConfig
@@ -1138,7 +1141,7 @@ function BlogCarouselAppleComponent({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         AppleCarousel,
         {

package/dist/blog-carousel-apple.js

@@ -512,9 +512,8 @@ var AppleCarousel = ({
                 "div",
                 {
                   className: cn(
-                    "flex flex-row justify-start gap-4 pl-4",
-                    "mx-auto max-w-7xl",
-                    // remove max-w-4xl if you want the carousel to span the full width of its container
+                    "flex flex-row justify-start",
+                    "mx-auto gap-4 pl-4",
                     containerClassName
                   ),
                   children: items.map((item, index) => /* @__PURE__ */ jsx(
@@ -591,7 +590,9 @@ var AppleCarouselCard = ({
       "div",
       {
         className: cn(
-          "relative z-40 p-4 md:p-8 text-shadow-lg",
+          "text-left text-white text-shadow-lg",
+          "relative z-40 p-4 md:p-8",
+          "text-balance",
           contentClassName
         ),
         children: [
@@ -599,7 +600,7 @@ var AppleCarouselCard = ({
             motion.p,
             {
               layoutId: layout ? `category-${card.category}-${index}` : void 0,
-              className: "text-left font-sans text-sm font-medium text-white md:text-base",
+              className: "text-sm font-bold md:text-base tracking-tight uppercase",
               children: card.category
             }
           ),
@@ -607,7 +608,7 @@ var AppleCarouselCard = ({
             motion.p,
             {
               layoutId: layout ? `title-${card.title}-${index}` : void 0,
-              className: "mt-2 max-w-xs text-left font-sans text-lg font-semibold text-balance text-white md:text-2xl",
+              className: "mt-2 text-lg md:text-2xl font-semibold",
               children: card.title
             }
           )
@@ -620,7 +621,9 @@ var AppleCarouselCard = ({
         src: card.src,
         alt: card.title,
         className: cn(
-          "absolute inset-0 z-10 h-full w-full object-cover brightness-50",
+          "absolute inset-0 z-10",
+          "h-full w-full object-cover",
+          action.type !== "none" ? "cursor-pointer transition-all duration-500 brightness-75 hover:brightness-50" : "brightness-75",
           imageClassName
         ),
         optixFlowConfig
@@ -1117,7 +1120,7 @@ function BlogCarouselAppleComponent({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       children: /* @__PURE__ */ jsx(
         AppleCarousel,
         {

package/dist/blog-masonry-featured.cjs

@@ -841,7 +841,7 @@ function BlogMasonryFeaturedComponent({
   optixFlowConfig,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-12 md:py-32",
+  spacing = "hero",
   pattern,
   patternOpacity
 }) {
@@ -882,7 +882,7 @@ function BlogMasonryFeaturedComponent({
                   (featuredPost.date || featuredPost.published) && featuredPost.author && "\xB7",
                   featuredPost.author && /* @__PURE__ */ jsxRuntime.jsx("span", { children: featuredPost.author })
                 ] }),
-                featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg", children: featuredPost.title }) : featuredPost.title),
+                featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-semibold", children: featuredPost.title }) : featuredPost.title),
                 (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-sm font-normal", children: featuredPost.description || featuredPost.summary })
               ] })
             ]
@@ -924,7 +924,7 @@ function BlogMasonryFeaturedComponent({
                 (post.date || post.published) && post.author && "\xB7",
                 post.author && /* @__PURE__ */ jsxRuntime.jsx("span", { children: post.author })
               ] }),
-              post.title && (typeof post.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg", children: post.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg", children: post.title }))
+              post.title && (typeof post.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-semibold", children: post.title }) : post.title)
             ] })
           ]
         },
@@ -937,7 +937,7 @@ function BlogMasonryFeaturedComponent({
     {
       background,
       spacing,
-      className: cn(className),
+      className,
       pattern,
       patternOpacity,
       containerClassName,

package/dist/blog-masonry-featured.js

@@ -820,7 +820,7 @@ function BlogMasonryFeaturedComponent({
   optixFlowConfig,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-12 md:py-32",
+  spacing = "hero",
   pattern,
   patternOpacity
 }) {
@@ -861,7 +861,7 @@ function BlogMasonryFeaturedComponent({
                   (featuredPost.date || featuredPost.published) && featuredPost.author && "\xB7",
                   featuredPost.author && /* @__PURE__ */ jsx("span", { children: featuredPost.author })
                 ] }),
-                featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg", children: featuredPost.title }) : featuredPost.title),
+                featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsx("div", { className: "text-2xl font-semibold", children: featuredPost.title }) : featuredPost.title),
                 (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsx("p", { className: "mt-4 text-sm font-normal", children: featuredPost.description || featuredPost.summary })
               ] })
             ]
@@ -903,7 +903,7 @@ function BlogMasonryFeaturedComponent({
                 (post.date || post.published) && post.author && "\xB7",
                 post.author && /* @__PURE__ */ jsx("span", { children: post.author })
               ] }),
-              post.title && (typeof post.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg", children: post.title }) : /* @__PURE__ */ jsx("div", { className: "text-lg", children: post.title }))
+              post.title && (typeof post.title === "string" ? /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold", children: post.title }) : post.title)
             ] })
           ]
         },
@@ -916,7 +916,7 @@ function BlogMasonryFeaturedComponent({
     {
       background,
       spacing,
-      className: cn(className),
+      className,
       pattern,
       patternOpacity,
       containerClassName,

package/dist/blog-tech-insights.cjs

@@ -867,7 +867,6 @@ function BlogTechInsights({
   secondaryPosts,
   secondaryPostsSlot,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -879,7 +878,8 @@ function BlogTechInsights({
   secondaryPostItemClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "lg",
   pattern,
   patternOpacity
 }) {
@@ -898,11 +898,7 @@ function BlogTechInsights({
       Pressable,
       {
         asButton: true,
-        className: cn(
-          "ml-auto rounded-full border-foreground",
-          actionClassName,
-          readMoreClassName
-        ),
+        className: cn("ml-auto", actionClassName, readMoreClassName),
         ...pressableProps,
         children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           icon,
@@ -933,7 +929,7 @@ function BlogTechInsights({
         /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "h-8 w-8 rounded-md md:h-12 md:w-12", children: featuredPost.authorAvatar && /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: featuredPost.authorAvatar }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm md:text-base", children: [
           featuredPost.author && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block", children: featuredPost.author }),
-          featuredPost.authorRole && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground md:text-sm", children: featuredPost.authorRole })
+          featuredPost.authorRole && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs md:text-sm", children: featuredPost.authorRole })
         ] })
       ] })
     ] });
@@ -981,7 +977,7 @@ function BlogTechInsights({
             ) }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
               post.title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-md line-clamp-2", children: post.title }),
-              truncatedDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm leading-snug text-muted-foreground md:text-base line-clamp-2", children: truncatedDescription })
+              truncatedDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm leading-snug md:text-base line-clamp-2", children: truncatedDescription })
             ] })
           ]
         }
@@ -1013,64 +1009,53 @@ function BlogTechInsights({
       className: cn("dark relative", className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: cn(
-            "flex flex-col items-center gap-8 md:gap-14",
-            containerClassName
-          ),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", headerClassName), children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "h1",
-                {
-                  className: cn(
-                    "text-3xl font-bold md:text-4xl lg:text-5xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex justify-start", children: [
-                description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    className: cn(
-                      "mt-2 block text-sm text-muted-foreground md:text-base",
-                      descriptionClassName
-                    ),
-                    children: description
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-                readMoreActionContent
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-8 md:gap-14"), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", headerClassName), children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "text-3xl font-bold md:text-4xl lg:text-5xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : heading),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex justify-start", children: [
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
               {
                 className: cn(
-                  "grid grid-cols-1 gap-8 md:grid-cols-2 lg:gap-12",
-                  contentClassName
+                  "mt-2 block text-sm md:text-base",
+                  descriptionClassName
                 ),
-                children: [
-                  featuredPostContent,
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: cn(
-                        "space-y-6 md:space-y-8",
-                        secondaryPostsClassName
-                      ),
-                      children: secondaryPostsContent
-                    }
-                  )
-                ]
+                children: description
               }
-            )
-          ]
-        }
-      )
+            ) : description),
+            readMoreActionContent
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "grid grid-cols-1 gap-8 md:grid-cols-2 lg:gap-12",
+              contentClassName
+            ),
+            children: [
+              featuredPostContent,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn("space-y-6 md:space-y-8", secondaryPostsClassName),
+                  children: secondaryPostsContent
+                }
+              )
+            ]
+          }
+        )
+      ] })
     }
   );
 }

package/dist/blog-tech-insights.d.cts

@@ -105,6 +105,6 @@ interface BlogTechInsightsProps {
      */
     patternOpacity?: number;
 }
-declare function BlogTechInsights({ heading, description, readMoreAction, readMoreSlot, featuredPost, featuredSlot, secondaryPosts, secondaryPostsSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, readMoreClassName, contentClassName, featuredClassName, featuredImageClassName, secondaryPostsClassName, secondaryPostItemClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: BlogTechInsightsProps): React.JSX.Element;
+declare function BlogTechInsights({ heading, description, readMoreAction, readMoreSlot, featuredPost, featuredSlot, secondaryPosts, secondaryPostsSlot, className, headerClassName, headingClassName, descriptionClassName, readMoreClassName, contentClassName, featuredClassName, featuredImageClassName, secondaryPostsClassName, secondaryPostItemClassName, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, }: BlogTechInsightsProps): React.JSX.Element;
 
 export { BlogTechInsights, type BlogTechInsightsProps };

package/dist/blog-tech-insights.d.ts

@@ -105,6 +105,6 @@ interface BlogTechInsightsProps {
      */
     patternOpacity?: number;
 }
-declare function BlogTechInsights({ heading, description, readMoreAction, readMoreSlot, featuredPost, featuredSlot, secondaryPosts, secondaryPostsSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, readMoreClassName, contentClassName, featuredClassName, featuredImageClassName, secondaryPostsClassName, secondaryPostItemClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: BlogTechInsightsProps): React.JSX.Element;
+declare function BlogTechInsights({ heading, description, readMoreAction, readMoreSlot, featuredPost, featuredSlot, secondaryPosts, secondaryPostsSlot, className, headerClassName, headingClassName, descriptionClassName, readMoreClassName, contentClassName, featuredClassName, featuredImageClassName, secondaryPostsClassName, secondaryPostItemClassName, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, }: BlogTechInsightsProps): React.JSX.Element;
 
 export { BlogTechInsights, type BlogTechInsightsProps };