@opensite/ui 0.6.4 → 0.6.5

package/dist/registry.cjs

@@ -32092,15 +32092,22 @@ function BlogGridAuthorCardsComponent({
   postCardClassName,
   viewAllClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
   const viewAllActionContent = React52__namespace.useMemo(() => {
     if (viewAllSlot) return viewAllSlot;
     if (!viewAllAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = viewAllAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = viewAllAction;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
@@ -32167,11 +32174,38 @@ function BlogGridAuthorCardsComponent({
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
         (heading || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-8 md:mb-14 lg:mb-16", headerClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between gap-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-4 w-full text-4xl font-medium md:mb-5 md:text-5xl lg:mb-6 lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between gap-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-4 w-full text-4xl font-medium md:mb-5 md:text-5xl lg:mb-6 lg:text-6xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })) }) }),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: descriptionClassName, children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-x-4 gap-y-8 md:grid-cols-2 lg:gap-x-6 lg:gap-y-12 2xl:grid-cols-3", postsClassName), children: postsContent }),
-        (viewAllSlot || viewAllAction) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex flex-col items-center py-2 md:hidden", viewAllClassName), children: viewAllActionContent })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "grid gap-x-4 gap-y-8 md:grid-cols-2 lg:gap-x-6 lg:gap-y-12 2xl:grid-cols-3",
+              postsClassName
+            ),
+            children: postsContent
+          }
+        ),
+        (viewAllSlot || viewAllAction) && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-8 flex flex-col items-center py-2 md:hidden",
+              viewAllClassName
+            ),
+            children: viewAllActionContent
+          }
+        )
       ] })
     }
   );
@@ -32195,19 +32229,30 @@ function BlogCardsTaglineCta({
   postsClassName,
   postCardClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
   const ctaActionContent = React52__namespace.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = ctaAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = ctaAction;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
-        className: cn("w-full sm:w-auto inline-flex items-center", actionClassName, ctaClassName),
+        className: cn(
+          "w-full sm:w-auto inline-flex items-center",
+          actionClassName,
+          ctaClassName
+        ),
         ...pressableProps,
         children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           icon,
@@ -32228,7 +32273,10 @@ function BlogCardsTaglineCta({
       return /* @__PURE__ */ jsxRuntime.jsxs(
         Card,
         {
-          className: cn("grid grid-rows-[auto_auto_1fr_auto] overflow-hidden pt-0", postCardClassName),
+          className: cn(
+            "grid grid-rows-[auto_auto_1fr_auto] overflow-hidden pt-0",
+            postCardClassName
+          ),
           children: [
             post.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
               Pressable,
@@ -32280,15 +32328,51 @@ function BlogCardsTaglineCta({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container mx-auto flex flex-col items-center gap-16 lg:px-16", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", headerClassName), children: [
-          badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: cn("mb-6", badgeClassName), children: badge }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", badgeClassName), children: badge })),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          ctaActionContent
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8", postsClassName), children: postsContent })
-      ] })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "container mx-auto flex flex-col items-center gap-16 lg:px-16",
+            containerClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", headerClassName), children: [
+              badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: cn("mb-6", badgeClassName), children: badge }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", badgeClassName), children: badge })),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              ctaActionContent
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8",
+                  postsClassName
+                ),
+                children: postsContent
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }
@@ -32310,28 +32394,27 @@ function BlogCardsReadTime({
   postCardClassName,
   viewAllClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
   const renderedViewAllAction = React52__namespace.useMemo(() => {
     if (viewAllSlot) return viewAllSlot;
     if (!viewAllAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = viewAllAction;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Pressable,
-      {
-        asButton: true,
-        className: actionClassName,
-        ...pressableProps,
-        children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          icon,
-          label,
-          iconAfter
-        ] })
-      }
-    );
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = viewAllAction;
+    return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      icon,
+      label,
+      iconAfter
+    ] }) });
   }, [viewAllSlot, viewAllAction]);
   const renderedPosts = React52__namespace.useMemo(() => {
     if (postsSlot) return postsSlot;
@@ -32360,7 +32443,13 @@ function BlogCardsReadTime({
               /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-5" }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "size-9 rounded-full ring-1 ring-input", children: post.authorAvatar && /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: post.authorAvatar, alt: typeof post.author === "string" ? post.author : "Author" }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "size-9 rounded-full ring-1 ring-input", children: post.authorAvatar && /* @__PURE__ */ jsxRuntime.jsx(
+                    AvatarImage,
+                    {
+                      src: post.authorAvatar,
+                      alt: typeof post.author === "string" ? post.author : "Author"
+                    }
+                  ) }),
                   post.author && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: post.author })
                 ] }),
                 post.readTime && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "h-fit", children: post.readTime })
@@ -32381,16 +32470,50 @@ function BlogCardsReadTime({
       pattern,
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex max-w-3xl flex-col items-center gap-4 text-center", headerClassName), children: [
-          badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "outline", className: "gap-1 py-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/file-text", size: 16, className: "h-full w-4" }),
-            " ",
-            badge
-          ] }) : badge }),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-semibold text-balance", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-20 grid gap-4 md:grid-cols-2 lg:grid-cols-3", postsClassName), children: renderedPosts }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto flex max-w-3xl flex-col items-center gap-4 text-center",
+              headerClassName
+            ),
+            children: [
+              badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "outline", className: "gap-1 py-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  DynamicIcon,
+                  {
+                    name: "lucide/file-text",
+                    size: 16,
+                    className: "h-full w-4"
+                  }
+                ),
+                " ",
+                badge
+              ] }) : badge }),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl font-semibold text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-20 grid gap-4 md:grid-cols-2 lg:grid-cols-3",
+              postsClassName
+            ),
+            children: renderedPosts
+          }
+        ),
         (viewAllSlot || viewAllAction) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-10 flex justify-center", viewAllClassName), children: renderedViewAllAction })
       ] })
     }
@@ -32416,19 +32539,30 @@ function BlogCategoryOverlay({
   postCardClassName,
   categoryBadgeClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
   const viewAllActionContent = React52__namespace.useMemo(() => {
     if (viewAllSlot) return viewAllSlot;
     if (!viewAllAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = viewAllAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = viewAllAction;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
-        className: cn("flex items-center gap-1 text-sm font-semibold", actionClassName, viewAllClassName),
+        className: cn(
+          "flex items-center gap-1 text-sm font-semibold",
+          actionClassName,
+          viewAllClassName
+        ),
         ...pressableProps,
         children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           icon,
@@ -32459,7 +32593,10 @@ function BlogCategoryOverlay({
             Badge,
             {
               variant: "secondary",
-              className: cn("absolute top-4 right-4 bg-background/70 px-3 py-1 text-sm backdrop-blur-sm", categoryBadgeClassName),
+              className: cn(
+                "absolute top-4 right-4 bg-background/70 px-3 py-1 text-sm backdrop-blur-sm",
+                categoryBadgeClassName
+              ),
               children: post.category || post.label
             }
           )
@@ -32468,18 +32605,39 @@ function BlogCategoryOverlay({
           post.title && (typeof post.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-5 text-xl font-semibold", children: post.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-5 text-xl font-semibold", children: post.title })),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between gap-6 text-sm", children: [
             (post.date || post.published) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/calendar", size: 16, className: "h-4 w-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                DynamicIcon,
+                {
+                  name: "lucide/calendar",
+                  size: 16,
+                  className: "h-4 w-4"
+                }
+              ),
               post.date || post.published
             ] }),
             readMoreText && /* @__PURE__ */ jsxRuntime.jsxs(Pressable, { href: postHref, className: "flex items-center gap-1", children: [
               readMoreText,
-              /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 12, className: "h-full w-3" })
+              /* @__PURE__ */ jsxRuntime.jsx(
+                DynamicIcon,
+                {
+                  name: "lucide/chevron-right",
+                  size: 12,
+                  className: "h-full w-3"
+                }
+              )
             ] })
           ] })
         ] })
       ] }, postId);
     });
-  }, [postsSlot, posts, postCardClassName, categoryBadgeClassName, optixFlowConfig, readMoreText]);
+  }, [
+    postsSlot,
+    posts,
+    postCardClassName,
+    categoryBadgeClassName,
+    optixFlowConfig,
+    readMoreText
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -32489,13 +32647,40 @@ function BlogCategoryOverlay({
       pattern,
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex max-w-3xl flex-col items-center gap-6 text-center", headerClassName), children: [
-          badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", children: badge }) : badge }),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-semibold text-balance", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          viewAllActionContent
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3", postsClassName), children: postsContent })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto flex max-w-3xl flex-col items-center gap-6 text-center",
+              headerClassName
+            ),
+            children: [
+              badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", children: badge }) : badge }),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl font-semibold text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              viewAllActionContent
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+              postsClassName
+            ),
+            children: postsContent
+          }
+        )
       ] })
     }
   );
@@ -32519,8 +32704,8 @@ function BlogFeaturedPopular({
   postsClassName,
   postCardClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
@@ -32535,7 +32720,10 @@ function BlogFeaturedPopular({
     return /* @__PURE__ */ jsxRuntime.jsxs(
       PostWrapper,
       {
-        className: cn("my-16 grid grid-cols-1 items-center gap-8 md:grid-cols-2 lg:gap-16", featuredClassName),
+        className: cn(
+          "my-16 grid grid-cols-1 items-center gap-8 md:grid-cols-2 lg:gap-16",
+          featuredClassName
+        ),
         ...wrapperProps,
         children: [
           featuredPost.image && /* @__PURE__ */ jsxRuntime.jsx(
@@ -32543,19 +32731,38 @@ function BlogFeaturedPopular({
             {
               src: featuredPost.image,
               alt: typeof featuredPost.title === "string" ? featuredPost.title : "Featured post",
-              className: cn("aspect-video rounded-lg object-cover", featuredImageClassName),
+              className: cn(
+                "aspect-video rounded-lg object-cover",
+                featuredImageClassName
+              ),
               optixFlowConfig
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-start gap-4", featuredContentClassName), children: [
-            (featuredPost.category || featuredPost.label) && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "shrink", children: featuredPost.category || featuredPost.label }),
-            featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold text-balance md:max-w-lg lg:text-3xl", children: featuredPost.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-semibold text-balance md:max-w-lg lg:text-3xl", children: featuredPost.title })),
-            (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground md:max-w-lg", children: featuredPost.description || featuredPost.summary })
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex flex-col items-start gap-4",
+                featuredContentClassName
+              ),
+              children: [
+                (featuredPost.category || featuredPost.label) && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "shrink", children: featuredPost.category || featuredPost.label }),
+                featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold text-balance md:max-w-lg lg:text-3xl", children: featuredPost.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-semibold text-balance md:max-w-lg lg:text-3xl", children: featuredPost.title })),
+                (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground md:max-w-lg", children: featuredPost.description || featuredPost.summary })
+              ]
+            }
+          )
         ]
       }
     );
-  }, [featuredSlot, featuredPost, featuredClassName, featuredImageClassName, featuredContentClassName, optixFlowConfig]);
+  }, [
+    featuredSlot,
+    featuredPost,
+    featuredClassName,
+    featuredImageClassName,
+    featuredContentClassName,
+    optixFlowConfig
+  ]);
   const renderedPopularPosts = React52__namespace.useMemo(() => {
     if (postsSlot) return postsSlot;
     if (!popularPosts || popularPosts.length === 0) return null;
@@ -32598,13 +32805,49 @@ function BlogFeaturedPopular({
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
         (heading || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-5xl font-medium md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto mt-4 max-w-xl text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "text-5xl font-medium md:text-6xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto mt-4 max-w-xl text-lg text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-7xl", children: [
           renderedFeaturedPost,
-          popularHeading && (typeof popularHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-2xl font-medium md:text-3xl", popularHeadingClassName), children: popularHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: popularHeadingClassName, children: popularHeading })),
-          renderedPopularPosts && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 grid grid-cols-1 gap-10 md:grid-cols-3 md:gap-6", postsClassName), children: renderedPopularPosts })
+          popularHeading && (typeof popularHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-2xl font-medium md:text-3xl",
+                popularHeadingClassName
+              ),
+              children: popularHeading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: popularHeadingClassName, children: popularHeading })),
+          renderedPopularPosts && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "mt-8 grid grid-cols-1 gap-10 md:grid-cols-3 md:gap-6",
+                postsClassName
+              ),
+              children: renderedPopularPosts
+            }
+          )
         ] })
       ] })
     }
@@ -32623,20 +32866,31 @@ function BlogRelatedArticles({
   seeAllClassName,
   articlesClassName,
   articleCardClassName,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
   const renderedSeeAllAction = React52__namespace.useMemo(() => {
     if (seeAllSlot) return seeAllSlot;
     if (!seeAllAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = seeAllAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = seeAllAction;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
         asButton: true,
-        className: cn("md:h-10 md:px-4 md:py-2", actionClassName, seeAllClassName),
+        className: cn(
+          "md:h-10 md:px-4 md:py-2",
+          actionClassName,
+          seeAllClassName
+        ),
         ...pressableProps,
         children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           icon,
@@ -32677,11 +32931,38 @@ function BlogRelatedArticles({
       pattern,
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-8 flex flex-wrap items-center justify-between gap-1", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-2xl font-semibold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          renderedSeeAllAction
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-1 gap-16 md:grid-cols-2 lg:grid-cols-4 lg:gap-10", articlesClassName), children: renderedArticles })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mb-8 flex flex-wrap items-center justify-between gap-1",
+              headerClassName
+            ),
+            children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-2xl font-semibold md:text-4xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              renderedSeeAllAction
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "grid grid-cols-1 gap-16 md:grid-cols-2 lg:grid-cols-4 lg:gap-10",
+              articlesClassName
+            ),
+            children: renderedArticles
+          }
+        )
       ] })
     }
   );
@@ -32707,20 +32988,31 @@ function BlogTechInsights({
   secondaryPostsClassName,
   secondaryPostItemClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
   const readMoreActionContent = React52.useMemo(() => {
     if (readMoreSlot) return readMoreSlot;
     if (!readMoreAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = readMoreAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = readMoreAction;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
         asButton: true,
-        className: cn("ml-auto rounded-full border-foreground text-foreground", actionClassName, readMoreClassName),
+        className: cn(
+          "ml-auto rounded-full border-foreground text-foreground",
+          actionClassName,
+          readMoreClassName
+        ),
         ...pressableProps,
         children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           icon,
@@ -32737,7 +33029,10 @@ function BlogTechInsights({
       featuredPost.image && /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
-          className: cn("w-full rounded-lg object-cover", featuredImageClassName),
+          className: cn(
+            "w-full rounded-lg object-cover",
+            featuredImageClassName
+          ),
           src: featuredPost.image,
           alt: typeof featuredPost.title === "string" ? featuredPost.title : "Featured item",
           optixFlowConfig
@@ -32752,7 +33047,13 @@ function BlogTechInsights({
         ] })
       ] })
     ] });
-  }, [featuredSlot, featuredPost, featuredClassName, featuredImageClassName, optixFlowConfig]);
+  }, [
+    featuredSlot,
+    featuredPost,
+    featuredClassName,
+    featuredImageClassName,
+    optixFlowConfig
+  ]);
   const secondaryPostsContent = React52.useMemo(() => {
     if (secondaryPostsSlot) return secondaryPostsSlot;
     if (!secondaryPosts || secondaryPosts.length === 0) return null;
@@ -32761,7 +33062,10 @@ function BlogTechInsights({
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: cn("flex items-start gap-4 border-b pb-6 last:border-b-0", secondaryPostItemClassName),
+          className: cn(
+            "flex items-start gap-4 border-b pb-6 last:border-b-0",
+            secondaryPostItemClassName
+          ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1/4 shrink-0 md:w-1/5", children: post.image && /* @__PURE__ */ jsxRuntime.jsx(
               img.Img,
@@ -32778,7 +33082,12 @@ function BlogTechInsights({
         postId
       );
     });
-  }, [secondaryPostsSlot, secondaryPosts, secondaryPostItemClassName, optixFlowConfig]);
+  }, [
+    secondaryPostsSlot,
+    secondaryPosts,
+    secondaryPostItemClassName,
+    optixFlowConfig
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -32789,16 +33098,52 @@ function BlogTechInsights({
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-8", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-3xl font-bold text-foreground md:text-4xl lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "text-3xl font-bold text-foreground 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 })),
+            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", { className: cn("mt-12 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 text-foreground md:space-y-8", secondaryPostsClassName), children: secondaryPostsContent })
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mt-12 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 text-foreground md:space-y-8",
+                    secondaryPostsClassName
+                  ),
+                  children: secondaryPostsContent
+                }
+              )
+            ]
+          }
+        )
       ] })
     }
   );
@@ -32822,15 +33167,22 @@ function BlogHorizontalCards({
   postCardClassName,
   ctaClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
   const ctaContent = React52__namespace.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = ctaAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = ctaAction;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
@@ -32858,7 +33210,10 @@ function BlogHorizontalCards({
       return /* @__PURE__ */ jsxRuntime.jsx(
         Card,
         {
-          className: cn("overflow-hidden border-0 bg-transparent shadow-none", postCardClassName),
+          className: cn(
+            "overflow-hidden border-0 bg-transparent shadow-none",
+            postCardClassName
+          ),
           children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 sm:flex-row", children: [
             post.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
               Pressable,
@@ -32920,8 +33275,26 @@ function BlogHorizontalCards({
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container mx-auto", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl text-center", headerClassName), children: [
           badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: cn("mb-6", badgeClassName), children: badge }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", badgeClassName), children: badge })),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-5xl lg:mb-6", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-12 text-muted-foreground md:text-base lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-5xl lg:mb-6",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mb-12 text-muted-foreground md:text-base lg:text-lg",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-5xl space-y-12", postsClassName), children: postsContent }),
         (ctaSlot || ctaAction) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-16 text-center", ctaClassName), children: ctaContent })
@@ -33006,7 +33379,11 @@ function BreadcrumbSeparator({
   );
 }
 var POSTS_PER_PAGE = 6;
-var BlogCard = React52__namespace.memo(function BlogCard2({ post, optixFlowConfig, className }) {
+var BlogCard = React52__namespace.memo(function BlogCard2({
+  post,
+  optixFlowConfig,
+  className
+}) {
   const postHref = post.href || post.url || post.link || "#";
   const postImage = post.thumbnail || post.image;
   const postTitle = typeof post.title === "string" ? post.title : "Content item";
@@ -33040,28 +33417,36 @@ var FilterForm = React52__namespace.memo(function FilterForm2({
   onCategoryChange,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-wrap items-center gap-2.5", className), children: categories.map((category) => {
-    const isChecked = selectedCategories.includes(category.value);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      Label,
-      {
-        className: "flex cursor-pointer items-center gap-2.5 rounded-full bg-muted px-2.5 py-1.5",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { children: category.label }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Checkbox,
-            {
-              checked: isChecked,
-              onCheckedChange: (checked) => onCategoryChange(category.value, !!checked)
-            }
-          )
-        ]
-      },
-      category.value
-    );
-  }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("flex w-full flex-wrap items-center gap-2.5", className),
+      children: categories.map((category) => {
+        const isChecked = selectedCategories.includes(category.value);
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          Label,
+          {
+            className: "flex cursor-pointer items-center gap-2.5 rounded-full bg-muted px-2.5 py-1.5",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: category.label }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Checkbox,
+                {
+                  checked: isChecked,
+                  onCheckedChange: (checked) => onCategoryChange(category.value, !!checked)
+                }
+              )
+            ]
+          },
+          category.value
+        );
+      })
+    }
+  );
 });
-var BreadcrumbBlog = React52__namespace.memo(function BreadcrumbBlog2({ breadcrumb }) {
+var BreadcrumbBlog = React52__namespace.memo(function BreadcrumbBlog2({
+  breadcrumb
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbList, { children: breadcrumb.map((item, i) => {
     const labelKey = typeof item.label === "string" ? item.label : `breadcrumb-${i}`;
     return /* @__PURE__ */ jsxRuntime.jsxs(React52.Fragment, { children: [
@@ -33097,8 +33482,8 @@ function BlogFilteredResultsComponent({
   postCardClassName,
   loadMoreClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
@@ -33149,7 +33534,14 @@ function BlogFilteredResultsComponent({
   const primaryPostContent = React52__namespace.useMemo(() => {
     if (primaryPostSlot) return primaryPostSlot;
     if (!primaryPost) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(BlogCard, { post: primaryPost, optixFlowConfig, className: postCardClassName });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      BlogCard,
+      {
+        post: primaryPost,
+        optixFlowConfig,
+        className: postCardClassName
+      }
+    );
   }, [primaryPostSlot, primaryPost, optixFlowConfig, postCardClassName]);
   const categoriesContent = React52__namespace.useMemo(() => {
     if (categoriesSlot) return categoriesSlot;
@@ -33163,7 +33555,13 @@ function BlogFilteredResultsComponent({
         className: categoriesClassName
       }
     );
-  }, [categoriesSlot, categories, selectedCategories, handleCategoryChange, categoriesClassName]);
+  }, [
+    categoriesSlot,
+    categories,
+    selectedCategories,
+    handleCategoryChange,
+    categoriesClassName
+  ]);
   const postsContent = React52__namespace.useMemo(() => {
     if (postsSlot) return postsSlot;
     return postsToDisplay.slice(0, visibleCount).map((post) => {
@@ -33178,11 +33576,24 @@ function BlogFilteredResultsComponent({
         postKey
       );
     });
-  }, [postsSlot, postsToDisplay, visibleCount, optixFlowConfig, postCardClassName]);
+  }, [
+    postsSlot,
+    postsToDisplay,
+    visibleCount,
+    optixFlowConfig,
+    postCardClassName
+  ]);
   const loadMoreContent = React52__namespace.useMemo(() => {
     if (loadMoreSlot) return loadMoreSlot;
     if (!loadMoreAction || !hasMore) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = loadMoreAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = loadMoreAction;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
@@ -33207,22 +33618,67 @@ function BlogFilteredResultsComponent({
       pattern,
       patternOpacity,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("bg-muted bg-size-[3.125rem_3.125rem] bg-repeat", heroClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col items-start justify-start gap-16 py-20 lg:flex-row lg:items-center lg:justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-col justify-between gap-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-xl flex-col gap-8", children: [
-            breadcrumbContent,
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-5", children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[2.5rem] leading-[1.2] font-semibold md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xl leading-[1.4] text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "bg-muted bg-size-[3.125rem_3.125rem] bg-repeat",
+              heroClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col items-start justify-start gap-16 py-20 lg:flex-row lg:items-center lg:justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-col justify-between gap-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-xl flex-col gap-8", children: [
+                breadcrumbContent,
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-5", children: [
+                  heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "h1",
+                    {
+                      className: cn(
+                        "text-[2.5rem] leading-[1.2] font-semibold md:text-5xl lg:text-6xl",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "text-xl leading-[1.4] text-muted-foreground",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+                ] })
+              ] }) }),
+              (primaryPostSlot || primaryPost) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full max-w-110", primaryPostClassName), children: primaryPostContent })
             ] })
-          ] }) }),
-          (primaryPostSlot || primaryPost) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full max-w-110", primaryPostClassName), children: primaryPostContent })
-        ] }) }),
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("py-20", allContentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col gap-8", children: [
-          allContentHeading && (typeof allContentHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-[1.75rem] leading-none font-medium md:text-[2.25rem] lg:text-[2rem]", allContentHeadingClassName), children: allContentHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: allContentHeadingClassName, children: allContentHeading })),
+          allContentHeading && (typeof allContentHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-[1.75rem] leading-none font-medium md:text-[2.25rem] lg:text-[2rem]",
+                allContentHeadingClassName
+              ),
+              children: allContentHeading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: allContentHeadingClassName, children: allContentHeading })),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             categoriesContent,
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-4 py-8 lg:gap-8", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-10 md:grid-cols-2 lg:grid-cols-3", postsClassName), children: postsContent }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "grid gap-10 md:grid-cols-2 lg:grid-cols-3",
+                    postsClassName
+                  ),
+                  children: postsContent
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex justify-center", loadMoreClassName), children: loadMoreContent })
             ] })
           ] })
@@ -33244,8 +33700,8 @@ function BlogMasonryFeaturedComponent({
   featuredImageClassName,
   postCardClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
@@ -33253,61 +33709,87 @@ function BlogMasonryFeaturedComponent({
   const otherPosts = posts?.slice(1);
   const featuredPostContent = React52__namespace.useMemo(() => {
     if (featuredSlot) return featuredSlot;
-    if (!featuredPost) return null;
-    const postHref = featuredPost.href || featuredPost.url || featuredPost.link || "#";
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative md:row-span-2 lg:col-span-2", featuredClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
-      Pressable,
-      {
-        href: postHref,
-        className: "block h-fit rounded-lg p-3 md:top-0",
-        children: [
-          featuredPost.image && /* @__PURE__ */ jsxRuntime.jsx(
-            img.Img,
-            {
-              src: featuredPost.image,
-              alt: typeof featuredPost.title === "string" ? featuredPost.title : "Featured content",
-              className: cn("h-48 w-full rounded-lg object-cover hover:opacity-80 md:h-80 lg:h-96", featuredImageClassName),
-              optixFlowConfig
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-5", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2.5 flex items-center gap-1 text-sm text-muted-foreground", children: [
-              (featuredPost.date || featuredPost.published) && /* @__PURE__ */ jsxRuntime.jsx("time", { children: featuredPost.date || featuredPost.published }),
-              (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 md:text-3xl lg:text-4xl", children: featuredPost.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg md:text-3xl lg:text-4xl", children: featuredPost.title })),
-            (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-muted-foreground", children: featuredPost.description || featuredPost.summary })
-          ] })
-        ]
+    if (!featuredPost) return null;
+    const postHref = featuredPost.href || featuredPost.url || featuredPost.link || "#";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "relative md:row-span-2 lg:col-span-2",
+          featuredClassName
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          Pressable,
+          {
+            href: postHref,
+            className: "block h-fit rounded-lg p-3 md:top-0",
+            children: [
+              featuredPost.image && /* @__PURE__ */ jsxRuntime.jsx(
+                img.Img,
+                {
+                  src: featuredPost.image,
+                  alt: typeof featuredPost.title === "string" ? featuredPost.title : "Featured content",
+                  className: cn(
+                    "h-48 w-full rounded-lg object-cover hover:opacity-80 md:h-80 lg:h-96",
+                    featuredImageClassName
+                  ),
+                  optixFlowConfig
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-5", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2.5 flex items-center gap-1 text-sm text-muted-foreground", children: [
+                  (featuredPost.date || featuredPost.published) && /* @__PURE__ */ jsxRuntime.jsx("time", { children: featuredPost.date || featuredPost.published }),
+                  (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 md:text-3xl lg:text-4xl", children: featuredPost.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg md:text-3xl lg:text-4xl", children: featuredPost.title })),
+                (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-muted-foreground", children: featuredPost.description || featuredPost.summary })
+              ] })
+            ]
+          }
+        )
       }
-    ) });
-  }, [featuredSlot, featuredPost, featuredClassName, featuredImageClassName, optixFlowConfig]);
+    );
+  }, [
+    featuredSlot,
+    featuredPost,
+    featuredClassName,
+    featuredImageClassName,
+    optixFlowConfig
+  ]);
   const otherPostsContent = React52__namespace.useMemo(() => {
     if (postsSlot) return postsSlot;
     if (!otherPosts || otherPosts.length === 0) return null;
     return otherPosts.map((post) => {
       const postHref = post.href || post.url || post.link || "#";
       const postId = post.id || String(post.title) || Math.random().toString();
-      return /* @__PURE__ */ jsxRuntime.jsxs(Pressable, { href: postHref, className: cn("rounded-lg p-3", postCardClassName), children: [
-        post.image && /* @__PURE__ */ jsxRuntime.jsx(
-          img.Img,
-          {
-            src: post.image,
-            alt: typeof post.title === "string" ? post.title : "Content item",
-            className: "h-48 w-full rounded-lg object-cover hover:opacity-80",
-            optixFlowConfig
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-5", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2.5 flex items-center gap-1 text-sm text-muted-foreground", children: [
-            (post.date || post.published) && /* @__PURE__ */ jsxRuntime.jsx("time", { children: post.date || post.published }),
-            (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 }))
-        ] })
-      ] }, postId);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        Pressable,
+        {
+          href: postHref,
+          className: cn("rounded-lg p-3", postCardClassName),
+          children: [
+            post.image && /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: post.image,
+                alt: typeof post.title === "string" ? post.title : "Content item",
+                className: "h-48 w-full rounded-lg object-cover hover:opacity-80",
+                optixFlowConfig
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-5", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2.5 flex items-center gap-1 text-sm text-muted-foreground", children: [
+                (post.date || post.published) && /* @__PURE__ */ jsxRuntime.jsx("time", { children: post.date || post.published }),
+                (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 }))
+            ] })
+          ]
+        },
+        postId
+      );
     });
   }, [postsSlot, otherPosts, postCardClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -33319,11 +33801,29 @@ function BlogMasonryFeaturedComponent({
       pattern,
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-12 text-center text-4xl font-medium md:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("xs:grid-cols-1 mt-24 grid gap-4 sm:grid-cols-2 lg:grid-cols-4", postsClassName), children: [
-          featuredPostContent,
-          otherPostsContent
-        ] })
+        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: cn(
+              "mb-12 text-center text-4xl font-medium md:text-7xl",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "xs:grid-cols-1 mt-24 grid gap-4 sm:grid-cols-2 lg:grid-cols-4",
+              postsClassName
+            ),
+            children: [
+              featuredPostContent,
+              otherPostsContent
+            ]
+          }
+        )
       ] })
     }
   );
@@ -33341,8 +33841,8 @@ function BlogHorizontalTimelineComponent({
   postImageClassName,
   postCardClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
@@ -33358,17 +33858,29 @@ function BlogHorizontalTimelineComponent({
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: cn("flex flex-col items-center gap-16 md:flex-row", postItemClassName),
+          className: cn(
+            "flex flex-col items-center gap-16 md:flex-row",
+            postItemClassName
+          ),
           children: [
-            post.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-80 w-full items-center justify-center overflow-hidden rounded-3xl bg-muted md:w-140", postImageClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
+            post.image && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
               {
-                src: post.image,
-                className: "h-full w-full object-cover",
-                alt: postImageAlt,
-                optixFlowConfig
+                className: cn(
+                  "flex h-80 w-full items-center justify-center overflow-hidden rounded-3xl bg-muted md:w-140",
+                  postImageClassName
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  img.Img,
+                  {
+                    src: post.image,
+                    className: "h-full w-full object-cover",
+                    alt: postImageAlt,
+                    optixFlowConfig
+                  }
+                )
               }
-            ) }),
+            ),
             /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("border-none shadow-none", postCardClassName), children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
@@ -33404,7 +33916,15 @@ function BlogHorizontalTimelineComponent({
         postId
       );
     });
-  }, [postsSlot, posts, postItemClassName, postImageClassName, postCardClassName, optixFlowConfig, readText]);
+  }, [
+    postsSlot,
+    posts,
+    postItemClassName,
+    postImageClassName,
+    postCardClassName,
+    optixFlowConfig,
+    readText
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -33414,7 +33934,16 @@ function BlogHorizontalTimelineComponent({
       pattern,
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-12 max-w-lg font-sans text-5xl font-extrabold tracking-tight text-foreground md:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-12", headingClassName), children: heading })),
+        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: cn(
+              "mb-12 max-w-lg font-sans text-5xl font-extrabold tracking-tight text-foreground md:text-7xl",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-12", headingClassName), children: heading })),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col", postsClassName), children: renderPosts })
       ] })
     }
@@ -33436,15 +33965,22 @@ function BlogGridNinePosts({
   postCardClassName,
   ctaClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
   const renderedCtaAction = React52__namespace.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = ctaAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = ctaAction;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
@@ -33510,11 +34046,38 @@ function BlogGridNinePosts({
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-8 md:mb-14 lg:mb-16", headerClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between gap-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-4 w-full text-4xl font-medium md:mb-5 md:text-5xl lg:mb-6 lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between gap-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-4 w-full text-4xl font-medium md:mb-5 md:text-5xl lg:mb-6 lg:text-6xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })) }) }),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: descriptionClassName, children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-x-4 gap-y-8 md:grid-cols-2 lg:gap-x-6 lg:gap-y-12 2xl:grid-cols-3", postsClassName), children: renderedPosts }),
-        (ctaSlot || ctaAction) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex flex-col items-center py-2 md:hidden", ctaClassName), children: renderedCtaAction })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "grid gap-x-4 gap-y-8 md:grid-cols-2 lg:gap-x-6 lg:gap-y-12 2xl:grid-cols-3",
+              postsClassName
+            ),
+            children: renderedPosts
+          }
+        ),
+        (ctaSlot || ctaAction) && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-8 flex flex-col items-center py-2 md:hidden",
+              ctaClassName
+            ),
+            children: renderedCtaAction
+          }
+        )
       ] })
     }
   );
@@ -33807,7 +34370,7 @@ function BlogCarouselAppleComponent({
         },
         `carousel-card-${index}`
       );
-    }).filter(Boolean);
+    }).filter((element) => element !== null);
   }, [
     carouselCards,
     posts,
@@ -33841,122 +34404,6 @@ function BlogCarouselAppleComponent({
     }
   );
 }
-var alertVariants = classVarianceAuthority.cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
-  {
-    variants: {
-      variant: {
-        default: "bg-card text-card-foreground",
-        destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function Alert({
-  className,
-  variant,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "alert",
-      role: "alert",
-      className: cn(alertVariants({ variant }), className),
-      ...props
-    }
-  );
-}
-function AlertTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "alert-title",
-      className: cn(
-        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function AlertDescription({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "alert-description",
-      className: cn(
-        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
-        className
-      ),
-      ...props
-    }
-  );
-}
-var defaultArticleContent = (optixFlowConfig) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-extrabold", children: "The Great Joke Tax" }),
-  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-lg text-muted-foreground", children: "In a kingdom far away, where laughter once flowed freely, a peculiar tale unfolded about a king who decided to tax the very essence of joy itself - jokes and jest." }),
-  /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "How the Tax System Works" }),
-  /* @__PURE__ */ jsxRuntime.jsx("p", { children: "The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax. Jokester was declared a hero, and the kingdom lived happily ever after." }),
-  /* @__PURE__ */ jsxRuntime.jsxs(Alert, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/lightbulb", size: 16 }),
-    /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { children: "Royal Decree!" }),
-    /* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { children: "Remember, all jokes must be registered at the Royal Jest Office before telling them" })
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "The People's Rebellion" }),
-  /* @__PURE__ */ jsxRuntime.jsx("p", { children: "The people of the kingdom, feeling uplifted by the laughter, started to tell jokes and puns again, and soon the entire kingdom was in on the joke." }),
-  /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("table", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("th", { children: "King's Treasury" }),
-      /* @__PURE__ */ jsxRuntime.jsx("th", { children: "People's happiness" })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("td", { children: "Empty" }),
-        /* @__PURE__ */ jsxRuntime.jsx("td", { children: "Overflowing" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "m-0 border-t p-0 even:bg-muted", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("td", { children: "Modest" }),
-        /* @__PURE__ */ jsxRuntime.jsx("td", { children: "Satisfied" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "m-0 border-t p-0 even:bg-muted", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("td", { children: "Full" }),
-        /* @__PURE__ */ jsxRuntime.jsx("td", { children: "Ecstatic" })
-      ] })
-    ] })
-  ] }) }),
-  /* @__PURE__ */ jsxRuntime.jsx("p", { children: "The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax. Jokester was declared a hero, and the kingdom lived happily ever after." }),
-  /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "The King's Plan" }),
-  /* @__PURE__ */ jsxRuntime.jsx(
-    img.Img,
-    {
-      src: imagePlaceholders[1],
-      alt: "Article content image",
-      className: "my-8 aspect-video w-full rounded-md object-cover",
-      optixFlowConfig
-    }
-  ),
-  /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-    "The king thought long and hard, and finally came up with",
-    " ",
-    /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: "#", children: "a brilliant plan" }),
-    ": he would tax the jokes in the kingdom."
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsx("blockquote", { children: "\u201CAfter all,\u201D he said, \u201Ceveryone enjoys a good joke, so it's only fair that they should pay for the privilege.\u201D" }),
-  /* @__PURE__ */ jsxRuntime.jsx("p", { children: "The king's subjects were not amused. They grumbled and complained, but the king was firm:" }),
-  /* @__PURE__ */ jsxRuntime.jsxs("ul", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("li", { children: "1st level of puns: 5 gold coins" }),
-    /* @__PURE__ */ jsxRuntime.jsx("li", { children: "2nd level of jokes: 10 gold coins" }),
-    /* @__PURE__ */ jsxRuntime.jsx("li", { children: "3rd level of one-liners : 20 gold coins" })
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsx("p", { children: "As a result, people stopped telling jokes, and the kingdom fell into a gloom. But there was one person who refused to let the king's foolishness get him down: a court jester named Jokester." })
-] });
 function ArticleHeroProseComponent({
   post,
   className,
@@ -33971,7 +34418,11 @@ function ArticleHeroProseComponent({
   authorSlot,
   children,
   dateFormat = "MMMM d, yyyy",
-  optixFlowConfig
+  optixFlowConfig,
+  background,
+  spacing,
+  pattern,
+  patternOpacity
 }) {
   const { title, authorName, authorHref, image, pubDate, description, authorImage } = post ?? {};
   const authorContent = React52__namespace.useMemo(() => {
@@ -34004,38 +34455,26 @@ function ArticleHeroProseComponent({
       }
     );
   }, [heroMediaSlot, image, heroImageClassName, optixFlowConfig]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cn("py-32", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex max-w-5xl flex-col items-center gap-4 text-center", headerClassName), children: [
-      title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-3xl text-5xl font-semibold text-pretty md:text-6xl", titleClassName), children: title }),
-      description && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("max-w-3xl text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }),
-      authorContent,
-      heroMediaContent
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto prose max-w-3xl dark:prose-invert", proseClassName), children: children || defaultArticleContent(optixFlowConfig) }) })
-  ] });
-}
-var defaultArticleContent2 = (optixFlowConfig) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "lead", children: "In the ever-evolving landscape of web development, staying current with best practices and emerging technologies is crucial for building exceptional digital experiences." }),
-  /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Understanding the Fundamentals" }),
-  /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Before diving into advanced concepts, it's essential to have a solid grasp of the fundamentals. HTML, CSS, and JavaScript form the backbone of web development, and mastering these technologies opens doors to more complex frameworks and tools." }),
-  /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Modern web development has evolved significantly over the past decade. What once required extensive server-side rendering can now be accomplished with client-side frameworks that offer improved performance and user experience." }),
-  /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "The Rise of Component-Based Architecture" }),
-  /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Component-based architecture has revolutionized how we build web applications. By breaking down interfaces into reusable, self-contained components, developers can create more maintainable and scalable codebases." }),
-  /* @__PURE__ */ jsxRuntime.jsx("blockquote", { children: "\u201CThe best code is no code at all. Every new line of code you willingly bring into the world is code that has to be debugged, code that has to be read and understood.\u201D" }),
-  /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Performance Optimization" }),
-  /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Performance is no longer optional\u2014it's a critical factor in user experience and search engine rankings. Techniques like code splitting, lazy loading, and image optimization have become standard practices in modern web development." }),
-  /* @__PURE__ */ jsxRuntime.jsx(
-    img.Img,
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Section,
     {
-      src: imagePlaceholders[3],
-      alt: "Performance optimization illustration",
-      className: "my-8 aspect-video w-full rounded-lg object-cover",
-      optixFlowConfig
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex max-w-5xl flex-col items-center gap-4 text-center", headerClassName), children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-3xl text-5xl font-semibold text-pretty md:text-6xl", titleClassName), children: title }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("max-w-3xl text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }),
+          authorContent,
+          heroMediaContent
+        ] }) }),
+        children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto prose max-w-3xl dark:prose-invert", proseClassName), children }) })
+      ]
     }
-  ),
-  /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Looking Ahead" }),
-  /* @__PURE__ */ jsxRuntime.jsx("p", { children: "The future of web development is exciting, with emerging technologies like WebAssembly, Edge Computing, and AI-powered development tools reshaping how we build for the web. Staying curious and continuously learning will be key to thriving in this dynamic field." })
-] });
+  );
+}
 function ArticleSidebarStickyComponent({
   className,
   containerClassName,
@@ -34059,7 +34498,11 @@ function ArticleSidebarStickyComponent({
   heroImageAlt,
   heroMediaSlot,
   children,
-  optixFlowConfig
+  optixFlowConfig,
+  background,
+  spacing,
+  pattern,
+  patternOpacity
 }) {
   const backLinkContent = React52__namespace.useMemo(() => {
     if (backLinkSlot) return backLinkSlot;
@@ -34094,74 +34537,40 @@ function ArticleSidebarStickyComponent({
   const heroMediaContent = React52__namespace.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
-      {
-        src: heroImageSrc,
-        alt: heroImageAlt,
-        className: cn("my-8 aspect-video w-full rounded-lg object-cover", heroImageClassName),
-        optixFlowConfig
-      }
-    );
-  }, [heroMediaSlot, heroImageSrc, heroImageAlt, heroImageClassName, optixFlowConfig]);
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-10 lg:grid-cols-[1fr_minmax(0,2fr)]", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-8 space-y-6", children: [
-      backLinkContent,
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: renderAuthor(false) })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 lg:hidden", children: backLinkContent }),
-      title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 lg:hidden", children: renderAuthor(true) }),
-      heroMediaContent,
-      children || defaultArticleContent2(optixFlowConfig)
-    ] })
-  ] }) }) });
-}
-var defaultArticleContent3 = (optixFlowConfig) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-  /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "introduction", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Introduction" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Building scalable applications requires careful consideration of architecture, design patterns, and infrastructure. In this guide, we'll explore the key principles that enable applications to grow gracefully with increasing demand." }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Alert, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/lightbulb", size: 16 }),
-      /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { children: "Pro Tip" }),
-      /* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { children: "Start with a simple architecture and evolve it as your needs grow. Premature optimization can lead to unnecessary complexity." })
-    ] })
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "getting-started", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Getting Started" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Before diving into complex architectural patterns, ensure you have a solid understanding of your application's requirements. Consider factors like expected traffic, data volume, and team expertise." }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "A well-designed system starts with clear requirements and constraints. Document your assumptions and validate them with stakeholders before making architectural decisions." })
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "core-concepts", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Core Concepts" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Scalability encompasses both horizontal and vertical scaling strategies. Horizontal scaling adds more machines to handle load, while vertical scaling increases the capacity of existing machines." }),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       img.Img,
       {
-        src: imagePlaceholders[5],
-        alt: "Architecture diagram",
-        className: "my-8 aspect-video w-full rounded-lg object-cover",
+        src: heroImageSrc,
+        alt: heroImageAlt,
+        className: cn("my-8 aspect-video w-full rounded-lg object-cover", heroImageClassName),
         optixFlowConfig
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Key concepts include load balancing, caching, database sharding, and microservices architecture. Each approach has trade-offs that must be carefully evaluated." })
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "best-practices", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Best Practices" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Follow these best practices to ensure your application scales effectively:" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("ul", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Design for failure and implement graceful degradation" }),
-      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Use caching strategically at multiple levels" }),
-      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Implement proper monitoring and alerting" }),
-      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Automate deployment and scaling processes" })
-    ] })
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "conclusion", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Conclusion" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Building scalable applications is both an art and a science. By understanding the fundamental principles and applying them thoughtfully, you can create systems that grow with your business needs." })
-  ] })
-] });
+    );
+  }, [heroMediaSlot, heroImageSrc, heroImageAlt, heroImageClassName, optixFlowConfig]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-10 lg:grid-cols-[1fr_minmax(0,2fr)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-8 space-y-6", children: [
+          backLinkContent,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: renderAuthor(false) })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 lg:hidden", children: backLinkContent }),
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 lg:hidden", children: renderAuthor(true) }),
+          heroMediaContent,
+          children
+        ] })
+      ] }) })
+    }
+  );
+}
 function ArticleTocSidebarComponent({
   className,
   containerClassName,
@@ -34198,7 +34607,11 @@ function ArticleTocSidebarComponent({
   ctaSlot,
   children,
   enableTocTracking = true,
-  optixFlowConfig
+  optixFlowConfig,
+  background,
+  spacing,
+  pattern,
+  patternOpacity
 }) {
   const ctaActions = ctaActionsProp ?? (ctaButtonText ? [{ label: ctaButtonText, href: ctaButtonHref || "#", variant: "default", className: "w-full" }] : []);
   const [activeSection, setActiveSection] = React52__namespace.useState(
@@ -34310,72 +34723,33 @@ function ArticleTocSidebarComponent({
       }) })
     ] });
   }, [ctaSlot, ctaTitle, ctaDescription, ctaActions, ctaClassName]);
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,1fr)_300px]", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-8 not-prose", headerClassName), children: [
-        categoryContent,
-        title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-4 text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", titleClassName), children: title })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description })),
-        authorContent
-      ] }),
-      heroMediaContent,
-      children || defaultArticleContent3(optixFlowConfig)
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-8 space-y-6", children: [
-      tocContent,
-      ctaContent
-    ] }) })
-  ] }) }) });
-}
-var defaultArticleContent4 = (optixFlowConfig) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-  /* @__PURE__ */ jsxRuntime.jsx(
-    img.Img,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
     {
-      src: imagePlaceholders[6],
-      alt: "Article hero",
-      className: "my-8 aspect-video w-full rounded-lg object-cover",
-      optixFlowConfig
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,1fr)_300px]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-8 not-prose", headerClassName), children: [
+            categoryContent,
+            title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-4 text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", titleClassName), children: title })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description })),
+            authorContent
+          ] }),
+          heroMediaContent,
+          children
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-8 space-y-6", children: [
+          tocContent,
+          ctaContent
+        ] }) })
+      ] }) })
     }
-  ),
-  /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "overview", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Overview" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Performance optimization is crucial for delivering exceptional user experiences. In this comprehensive guide, we'll explore proven strategies for improving web application performance." }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "From initial page load to runtime performance, every millisecond counts. Users expect fast, responsive applications, and search engines reward sites that deliver." })
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "key-features", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Key Features" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Modern performance optimization encompasses several key areas:" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("ul", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Code splitting and lazy loading" }),
-      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Image optimization and responsive images" }),
-      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Caching strategies and CDN utilization" }),
-      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Bundle size optimization" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
-      {
-        src: imagePlaceholders[7],
-        alt: "Performance metrics",
-        className: "my-8 aspect-video w-full rounded-lg object-cover",
-        optixFlowConfig
-      }
-    )
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "implementation", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Implementation" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Implementing performance optimizations requires a systematic approach. Start by measuring your current performance using tools like Lighthouse, WebPageTest, or Chrome DevTools." }),
-    /* @__PURE__ */ jsxRuntime.jsx("blockquote", { children: "\u201CYou can't improve what you don't measure.\u201D - Peter Drucker" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Once you have baseline metrics, prioritize optimizations based on their potential impact and implementation effort." })
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "performance", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Performance Metrics" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Focus on Core Web Vitals: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). These metrics directly impact user experience and SEO rankings." })
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "summary", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Summary" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Performance optimization is an ongoing process, not a one-time task. Continuously monitor your metrics, identify bottlenecks, and iterate on improvements to maintain a fast, responsive application." })
-  ] })
-] });
+  );
+}
 function ArticleBreadcrumbSocialComponent({
   className,
   containerClassName,
@@ -34410,7 +34784,11 @@ function ArticleBreadcrumbSocialComponent({
   children,
   enableTocTracking,
   enableBackToTop,
-  optixFlowConfig
+  optixFlowConfig,
+  background,
+  spacing,
+  pattern,
+  patternOpacity
 }) {
   const author = authorProp ?? (authorName ? { name: authorName, image: authorImage, role: authorRole } : void 0);
   const platformLabels = {
@@ -34547,65 +34925,44 @@ function ArticleBreadcrumbSocialComponent({
       )) })
     ] });
   }, [shareSlot, socialLinks, shareClassName]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cn("py-32", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-      breadcrumbsContent,
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,1fr)_280px]", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-          authorContent,
-          /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-8" }),
-          heroMediaContent,
-          children || defaultArticleContent4(optixFlowConfig)
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+          breadcrumbsContent,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,1fr)_280px]", children: [
+            children && /* @__PURE__ */ jsxRuntime.jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+              authorContent,
+              /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-8" }),
+              heroMediaContent,
+              children
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-8 space-y-6", children: [
+              tocContent,
+              shareButtonsContent
+            ] }) })
+          ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-8 space-y-6", children: [
-          tocContent,
-          shareButtonsContent
-        ] }) })
-      ] })
-    ] }),
-    enableBackToTop && showBackToTop && /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: scrollToTop,
-        className: "fixed bottom-8 right-8 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-opacity hover:opacity-90",
-        "aria-label": "Back to top",
-        children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up", size: 20 })
-      }
-    )
-  ] });
+        enableBackToTop && showBackToTop && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: scrollToTop,
+            className: "fixed bottom-8 right-8 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-opacity hover:opacity-90",
+            "aria-label": "Back to top",
+            children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up", size: 20 })
+          }
+        )
+      ]
+    }
+  );
 }
-var defaultArticleContent5 = () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-  /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "introduction", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Introduction" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Understanding user behavior is fundamental to creating effective web applications. This study examines patterns in user interaction and provides insights for improving user experience." }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Our research focuses on identifying key factors that influence user engagement and satisfaction in modern web applications." })
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "methodology", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Methodology" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "We employed a mixed-methods approach combining quantitative analytics with qualitative user interviews. Data was collected from over 10,000 users across diverse demographics." }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Statistical analysis was performed using industry-standard tools to ensure reliability and validity of our findings." })
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "results", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Results" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Our findings reveal several key patterns in user behavior:" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("ul", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Users prefer intuitive navigation over complex menus" }),
-      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Page load time significantly impacts engagement" }),
-      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Mobile-first design improves overall satisfaction" }),
-      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Clear calls-to-action increase conversion rates" })
-    ] })
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "discussion", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Discussion" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "These results align with existing literature while providing new insights into emerging user expectations. The implications for web development practices are significant." }),
-    /* @__PURE__ */ jsxRuntime.jsx("blockquote", { children: "\u201CUser experience is not just about usability\u2014it's about creating meaningful interactions that resonate with users.\u201D" })
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "conclusion", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Conclusion" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "This study provides actionable insights for developers and designers seeking to improve user experience. Future research should explore the impact of emerging technologies on user behavior patterns." })
-  ] })
-] });
 function ArticleCompactTocComponent({
   className,
   containerClassName,
@@ -34635,7 +34992,11 @@ function ArticleCompactTocComponent({
   heroMediaSlot,
   children,
   enableTocTracking = true,
-  optixFlowConfig
+  optixFlowConfig,
+  background,
+  spacing,
+  pattern,
+  patternOpacity
 }) {
   const [activeSection, setActiveSection] = React52__namespace.useState(
     sections?.[0]?.id || ""
@@ -34747,77 +35108,37 @@ function ArticleCompactTocComponent({
       }
     );
   }, [heroMediaSlot, heroImageSrc, heroImageAlt, heroImageClassName, optixFlowConfig]);
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-    breadcrumbsContent,
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl", contentClassName), children: [
-      title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-      (authorName || publishDate || readTime) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-4 flex flex-wrap items-center gap-4 text-sm text-muted-foreground", metaClassName), children: [
-        authorName && (authorHref ? /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: authorHref, className: "hover:underline", children: authorName }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: authorName })),
-        authorName && publishDate && /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "h-4" }),
-        publishDate && /* @__PURE__ */ jsxRuntime.jsx("span", { children: publishDate }),
-        publishDate && readTime && /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "h-4" }),
-        readTime && /* @__PURE__ */ jsxRuntime.jsx("span", { children: readTime })
-      ] }),
-      shareContent,
-      /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-8" }),
-      tocContent,
-      /* @__PURE__ */ jsxRuntime.jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
-        heroMediaContent,
-        children ?? defaultArticleContent5()
-      ] })
-    ] })
-  ] }) });
-}
-var defaultArticleContent6 = (optixFlowConfig) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-  /* @__PURE__ */ jsxRuntime.jsx(
-    img.Img,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
     {
-      src: imagePlaceholders[0],
-      alt: "Article hero",
-      className: "my-8 aspect-video w-full rounded-lg object-cover",
-      optixFlowConfig
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+        breadcrumbsContent,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl", contentClassName), children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+          (authorName || publishDate || readTime) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-4 flex flex-wrap items-center gap-4 text-sm text-muted-foreground", metaClassName), children: [
+            authorName && (authorHref ? /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: authorHref, className: "hover:underline", children: authorName }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: authorName })),
+            authorName && publishDate && /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "h-4" }),
+            publishDate && /* @__PURE__ */ jsxRuntime.jsx("span", { children: publishDate }),
+            publishDate && readTime && /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "h-4" }),
+            readTime && /* @__PURE__ */ jsxRuntime.jsx("span", { children: readTime })
+          ] }),
+          shareContent,
+          /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-8" }),
+          tocContent,
+          children && /* @__PURE__ */ jsxRuntime.jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
+            heroMediaContent,
+            children
+          ] })
+        ] })
+      ] })
     }
-  ),
-  /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "chapter-1", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Chapter 1: The Foundation" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Design patterns are reusable solutions to common problems in software design. They represent best practices evolved over time by experienced software developers." }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Understanding the foundation of design patterns helps you recognize when and how to apply them effectively in your own projects." })
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "chapter-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Chapter 2: Building Blocks" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "The building blocks of design patterns include creational, structural, and behavioral patterns. Each category addresses different aspects of software design." }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
-      {
-        src: imagePlaceholders[1],
-        alt: "Pattern categories",
-        className: "my-8 aspect-video w-full rounded-lg object-cover",
-        optixFlowConfig
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Creational patterns deal with object creation mechanisms, structural patterns focus on class composition, and behavioral patterns characterize object interaction." })
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "chapter-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Chapter 3: Advanced Patterns" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Advanced patterns build upon the fundamentals to address more complex scenarios. These include patterns for concurrency, distributed systems, and enterprise applications." }),
-    /* @__PURE__ */ jsxRuntime.jsx("blockquote", { children: "\u201CPatterns are not invented, they are discovered.\u201D - Christopher Alexander" })
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "chapter-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Chapter 4: Real-World Applications" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Seeing patterns in action helps solidify understanding. This chapter explores how major frameworks and libraries implement design patterns." }),
-    /* @__PURE__ */ jsxRuntime.jsxs("ul", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "React's use of the Observer pattern" }),
-      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Express.js middleware as Chain of Responsibility" }),
-      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Redux implementing the Flux pattern" }),
-      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Dependency injection in Angular" })
-    ] })
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "chapter-5", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Chapter 5: Future Directions" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "As software development evolves, new patterns emerge while others become less relevant. Understanding the principles behind patterns helps you adapt to changing technologies." }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "The rise of functional programming, microservices, and serverless architectures has introduced new patterns and variations on classic ones." })
-  ] })
-] });
+  );
+}
 function ArticleChaptersAuthorComponent({
   className,
   containerClassName,
@@ -34852,7 +35173,11 @@ function ArticleChaptersAuthorComponent({
   conclusionSlot,
   children,
   enableChapterTracking = true,
-  optixFlowConfig
+  optixFlowConfig,
+  background,
+  spacing,
+  pattern,
+  patternOpacity
 }) {
   const conclusionActions = conclusionActionsProp ?? (conclusionButtonText ? [{ label: conclusionButtonText, href: conclusionButtonHref || "#", variant: "default" }] : []);
   const [activeChapter, setActiveChapter] = React52__namespace.useState(
@@ -35016,24 +35341,34 @@ function ArticleChaptersAuthorComponent({
       }) })
     ] });
   }, [conclusionSlot, conclusionTitle, conclusionDescription, conclusionActions, conclusionClassName]);
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-    breadcrumbsContent,
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-      title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-      subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-muted-foreground md:text-xl", subtitleClassName), children: subtitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", subtitleClassName), children: subtitle }))
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-10 lg:grid-cols-[280px_minmax(0,1fr)]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-8 space-y-6", children: [
-        chaptersNavContent,
-        authorCardContent
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
-        heroMediaContent,
-        children || defaultArticleContent6(optixFlowConfig),
-        conclusionContent
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+        breadcrumbsContent,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-muted-foreground md:text-xl", subtitleClassName), children: subtitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", subtitleClassName), children: subtitle }))
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-10 lg:grid-cols-[280px_minmax(0,1fr)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-8 space-y-6", children: [
+            chaptersNavContent,
+            authorCardContent
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
+            heroMediaContent,
+            children,
+            conclusionContent
+          ] })
+        ] })
       ] })
-    ] })
-  ] }) });
+    }
+  );
 }
 function ArticleSplitAnimatedComponent({
   className,
@@ -35066,7 +35401,11 @@ function ArticleSplitAnimatedComponent({
   ctaHref,
   ctaSlot,
   enableAnimations = true,
-  optixFlowConfig
+  optixFlowConfig,
+  background,
+  spacing,
+  pattern,
+  patternOpacity
 }) {
   const ctaActions = ctaActionsProp ?? (ctaText ? [{ label: ctaText, href: ctaHref || "#", variant: "default", size: "lg" }] : []);
   const MotionWrapper = enableAnimations ? framerMotion.motion.div : "div";
@@ -35145,41 +35484,51 @@ function ArticleSplitAnimatedComponent({
     viewport: { once: true },
     transition: { duration: 0.5, delay: 0.1 }
   } : {};
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-8 lg:grid-cols-2 lg:gap-12", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      MotionWrapper,
-      {
-        ...imageAnimationProps,
-        className: cn(
-          "relative aspect-4/3 overflow-hidden rounded-2xl lg:aspect-auto lg:h-full",
-          imageContainerClassName
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-8 lg:grid-cols-2 lg:gap-12", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          MotionWrapper,
+          {
+            ...imageAnimationProps,
+            className: cn(
+              "relative aspect-4/3 overflow-hidden rounded-2xl lg:aspect-auto lg:h-full",
+              imageContainerClassName
+            ),
+            children: [
+              heroMediaContent,
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 p-6", children: categoryContent })
+            ]
+          }
         ),
-        children: [
-          heroMediaContent,
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 p-6", children: categoryContent })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      MotionWrapper,
-      {
-        ...contentAnimationProps,
-        className: cn("flex flex-col justify-center", contentClassName),
-        children: [
-          (publishDate || readTime) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-4 text-sm text-muted-foreground", metaClassName), children: [
-            publishDate && /* @__PURE__ */ jsxRuntime.jsx("span", { children: publishDate }),
-            publishDate && readTime && /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "h-4" }),
-            readTime && /* @__PURE__ */ jsxRuntime.jsx("span", { children: readTime })
-          ] }),
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mt-4 text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description })),
-          authorContent,
-          ctaContent
-        ]
-      }
-    )
-  ] }) }) });
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          MotionWrapper,
+          {
+            ...contentAnimationProps,
+            className: cn("flex flex-col justify-center", contentClassName),
+            children: [
+              (publishDate || readTime) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-4 text-sm text-muted-foreground", metaClassName), children: [
+                publishDate && /* @__PURE__ */ jsxRuntime.jsx("span", { children: publishDate }),
+                publishDate && readTime && /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "h-4" }),
+                readTime && /* @__PURE__ */ jsxRuntime.jsx("span", { children: readTime })
+              ] }),
+              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mt-4 text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", titleClassName), children: title })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description })),
+              authorContent,
+              ctaContent
+            ]
+          }
+        )
+      ] }) })
+    }
+  );
 }
 function FaqSimpleAccordion({
   heading,