@opensite/ui 1.6.2 → 1.6.4

package/dist/registry.js

@@ -23591,7 +23591,8 @@ function FooterCtaBanner({
   legalLinksClassName,
   legalLinkClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -23603,89 +23604,168 @@ function FooterCtaBanner({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("dark", className),
+      className,
+      containerClassName,
       children: /* @__PURE__ */ jsx("div", { className: cn(contentClassName), children: /* @__PURE__ */ jsxs("footer", { children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-16 rounded-lg border p-8 text-center md:p-12", ctaBannerClassName), children: [
-          /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-4xl", ctaHeadingClassName), children: ctaHeading }),
-          /* @__PURE__ */ jsx("p", { className: cn("mx-auto mb-6 max-w-2xl opacity-80", ctaDescriptionClassName), children: ctaDescription }),
-          /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              href: ctaButtonUrl,
-              className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-md border text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:opacity-80 h-11 px-8", ctaButtonClassName),
-              children: ctaButtonText
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn("grid gap-10 lg:grid-cols-5", gridClassName), children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("lg:col-span-2", brandClassName), children: [
-            logo && /* @__PURE__ */ jsx(
-              FooterLogo,
-              {
-                logo,
-                logoClassName: cn("mb-6", logoWrapperClassName),
-                logoImageClassName: logoClassName,
-                optixFlowConfig
-              }
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mb-16 rounded-lg border p-8 text-center md:p-12",
+              ctaBannerClassName
             ),
-            /* @__PURE__ */ jsxs("div", { className: cn("mb-6", newsletterClassName), children: [
-              /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-medium", children: newsletterLabel }),
-              /* @__PURE__ */ jsxs("div", { className: "flex max-w-sm gap-2", children: [
-                /* @__PURE__ */ jsx(
-                  "input",
+            children: [
+              /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "mb-4 text-3xl font-bold md:text-4xl text-balance",
+                    ctaHeadingClassName
+                  ),
+                  children: ctaHeading
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mx-auto mb-6 max-w-2xl opacity-80 text-balance",
+                    ctaDescriptionClassName
+                  ),
+                  children: ctaDescription
+                }
+              ),
+              /* @__PURE__ */ jsx(Pressable, { href: ctaButtonUrl, asButton: true, variant: "default", children: ctaButtonText })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "grid gap-10 grid-cols-2 md:grid-cols-5",
+              gridClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: cn("col-span-2", brandClassName), children: [
+                logo && /* @__PURE__ */ jsx(
+                  FooterLogo,
                   {
-                    type: "email",
-                    placeholder: newsletterPlaceholder,
-                    className: cn("flex h-10 w-full rounded-md border border-input px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", newsletterInputClassName)
+                    logo,
+                    logoClassName: cn("mb-6", logoWrapperClassName),
+                    logoImageClassName: logoClassName,
+                    optixFlowConfig
                   }
                 ),
+                newsletterClassName && newsletterLabel && /* @__PURE__ */ jsxs("div", { className: cn("mb-6", newsletterClassName), children: [
+                  /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-medium", children: newsletterLabel }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex max-w-sm gap-2", children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "email",
+                        placeholder: newsletterPlaceholder,
+                        className: cn(
+                          "flex h-10 w-full rounded-md border border-input px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                          newsletterInputClassName
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "submit",
+                        className: cn(
+                          "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2",
+                          newsletterButtonClassName
+                        ),
+                        children: newsletterButtonText
+                      }
+                    )
+                  ] })
+                ] }),
                 /* @__PURE__ */ jsx(
-                  "button",
+                  "ul",
                   {
-                    type: "submit",
-                    className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2", newsletterButtonClassName),
-                    children: newsletterButtonText
+                    className: cn("flex items-center gap-4", socialLinksClassName),
+                    children: socialLinks?.map((social, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                      SocialLinkIcon,
+                      {
+                        href: social.href,
+                        label: social.label,
+                        iconNameOverride: social.iconNameOverride,
+                        className: cn(
+                          "opacity-80 transition-colors hover:opacity-100",
+                          socialLinkClassName
+                        )
+                      }
+                    ) }, idx))
                   }
                 )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx("ul", { className: cn("flex items-center gap-4", socialLinksClassName), children: socialLinks?.map((social, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-              SocialLinkIcon,
-              {
-                href: social.href,
-                label: social.label,
-                iconNameOverride: social.iconNameOverride,
-                className: cn("opacity-80 transition-colors hover:opacity-100", socialLinkClassName)
-              }
-            ) }, idx)) })
-          ] }),
-          sections?.map((section, sectionIdx) => /* @__PURE__ */ jsxs("div", { className: cn(navSectionClassName), children: [
-            /* @__PURE__ */ jsx("h3", { className: cn("mb-4 font-semibold", navTitleClassName), children: section.title }),
-            /* @__PURE__ */ jsx("ul", { className: cn("space-y-3 text-sm opacity-80", navLinksClassName), children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-              Pressable,
-              {
-                href: link.href,
-                className: cn("hover:opacity-100", navLinkClassName),
-                children: link.name
-              }
-            ) }, linkIdx)) })
-          ] }, sectionIdx))
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn("mt-16 flex flex-col justify-between gap-4 border-t pt-8 text-sm opacity-80 md:flex-row md:items-center", bottomClassName), children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2 md:flex-row md:items-center md:gap-4", copyrightClassName), children: [
-            /* @__PURE__ */ jsx(FooterCopyright, { copyright }),
-            /* @__PURE__ */ jsx(
-              BrandAttribution,
-              {
-                internalBrandSlug: "open_site_ai",
-                optionIndex: 8,
-                variant: "span",
-                linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("ul", { className: cn("flex gap-4", legalLinksClassName), children: legalLinks?.map((link, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Pressable, { href: link.href, className: cn("hover:opacity-100", legalLinkClassName), children: link.name }) }, idx)) })
-        ] })
+              ] }),
+              sections?.map((section, sectionIdx) => /* @__PURE__ */ jsxs("div", { className: cn(navSectionClassName), children: [
+                /* @__PURE__ */ jsx("h3", { className: cn("mb-4 font-semibold", navTitleClassName), children: section.title }),
+                /* @__PURE__ */ jsx(
+                  "ul",
+                  {
+                    className: cn(
+                      "space-y-3 text-sm opacity-80",
+                      navLinksClassName
+                    ),
+                    children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                      Pressable,
+                      {
+                        href: link.href,
+                        className: cn("hover:opacity-100", navLinkClassName),
+                        children: link.name
+                      }
+                    ) }, linkIdx))
+                  }
+                )
+              ] }, sectionIdx))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mt-16 flex flex-col justify-between gap-4 border-t pt-8 text-sm opacity-80 md:flex-row md:items-center",
+              bottomClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-col gap-2 md:flex-row md:items-center md:gap-4",
+                    copyrightClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(FooterCopyright, { copyright }),
+                    /* @__PURE__ */ jsx(
+                      BrandAttribution,
+                      {
+                        internalBrandSlug: "open_site_ai",
+                        optionIndex: 8,
+                        variant: "span",
+                        linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("ul", { className: cn("flex gap-4", legalLinksClassName), children: legalLinks?.map((link, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  href: link.href,
+                  className: cn("hover:opacity-100", legalLinkClassName),
+                  children: link.name
+                }
+              ) }, idx)) })
+            ]
+          }
+        )
       ] }) })
     }
   );
@@ -27060,7 +27140,7 @@ function FeatureUtilityCardsGrid({
         href: learnMoreAction.href,
         onClick: learnMoreAction.onClick,
         className: cn(
-          "flex items-center gap-1 font-medium transition-opacity hover:opacity-80",
+          "flex items-center gap-1 font-medium transition-opacity hover:opacity-80 text-right",
           learnMoreAction.className
         ),
         "aria-label": learnMoreAction["aria-label"],
@@ -27101,7 +27181,7 @@ function FeatureUtilityCardsGrid({
       Card,
       {
         className: cn(
-          "py-0 shadow-sm overflow-hidden pt-0 transition-shadow duration-300 hover:shadow-lg",
+          "gap-0! py-0 shadow-sm overflow-hidden pt-0 transition-shadow duration-300 hover:shadow-lg",
           cardClassName,
           utility.className
         ),
@@ -28416,7 +28496,11 @@ function FeatureCategoryImageCards({
     return features.map((feature, index) => /* @__PURE__ */ jsxs(
       Card,
       {
-        className: cn("border-none", cardClassName, feature.className),
+        className: cn(
+          "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border pt-6 shadow-sm border-none",
+          cardClassName,
+          feature.className
+        ),
         children: [
           /* @__PURE__ */ jsxs(CardHeader, { className: "text-center", children: [
             feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx(
@@ -28448,7 +28532,7 @@ function FeatureCategoryImageCards({
               }
             ) : /* @__PURE__ */ jsx("div", { className: cn("md:text-lg", feature.categoryClassName), children: feature.category }))
           ] }),
-          /* @__PURE__ */ jsx(CardContent, { className: "px-7 pb-7", children: renderFeatureImage(feature) })
+          /* @__PURE__ */ jsx(CardContent, { className: "px-7 pb-0", children: renderFeatureImage(feature) })
         ]
       },
       index
@@ -28478,7 +28562,7 @@ function FeatureCategoryImageCards({
                 "h2",
                 {
                   className: cn(
-                    "text-3xl font-semibold md:text-5xl",
+                    "text-3xl font-semibold md:text-5xl text-balance",
                     titleClassName
                   ),
                   children: title
@@ -28487,13 +28571,31 @@ function FeatureCategoryImageCards({
                 "div",
                 {
                   className: cn(
-                    "text-3xl font-semibold md:text-5xl",
+                    "text-3xl font-semibold md:text-5xl text-balance",
                     titleClassName
                   ),
                   children: title
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-2xl md:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("max-w-2xl md:text-lg", descriptionClassName), children: description }))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "max-w-2xl md:text-lg text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "max-w-2xl md:text-lg text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ))
             ]
           }
         ),
@@ -44689,7 +44791,8 @@ function FooterAccordionSocial({
   onSuccess,
   onError,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -44743,6 +44846,7 @@ function FooterAccordionSocial({
       patternOpacity,
       patternClassName,
       className,
+      containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "space-y-10", children: [
         /* @__PURE__ */ jsxs("div", { className: "grid gap-10 lg:grid-cols-2 lg:gap-20", children: [
           /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
@@ -44875,7 +44979,8 @@ function FooterInfoCardsAccordion({
   copyrightClassName,
   submenuLinksClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -44895,6 +45000,7 @@ function FooterInfoCardsAccordion({
       pattern,
       patternOpacity,
       className: cn(className),
+      containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: cn("space-y-12 lg:space-y-14", contentClassName), children: [
         footerDetails?.image?.src && (newsletterTitle || newsletterDescription || subscribeText) && /* @__PURE__ */ jsxs(
           "div",
@@ -45047,61 +45153,43 @@ function FooterInfoCardsAccordion({
               brandGridClassName
             ),
             children: [
-              (footerDetails?.logo || footerDetails?.description) && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: cn(
-                    "space-y-5",
-                    brandColumnClassName
-                  ),
-                  children: [
-                    footerDetails?.logo && /* @__PURE__ */ jsx(
-                      FooterLogo,
-                      {
-                        logo: {
-                          ...footerDetails.logo,
-                          url: footerDetails.logoUrl || "/"
-                        },
-                        logoClassName: cn(
-                          "inline-block w-full max-w-64",
-                          logoClassName
-                        ),
-                        optixFlowConfig
-                      }
+              (footerDetails?.logo || footerDetails?.description) && /* @__PURE__ */ jsxs("div", { className: cn("space-y-5", brandColumnClassName), children: [
+                footerDetails?.logo && /* @__PURE__ */ jsx(
+                  FooterLogo,
+                  {
+                    logo: {
+                      ...footerDetails.logo,
+                      url: footerDetails.logoUrl || "/"
+                    },
+                    logoClassName: cn(
+                      "inline-block w-full max-w-64",
+                      logoClassName
                     ),
-                    footerDetails?.description && /* @__PURE__ */ jsx(
-                      "p",
-                      {
-                        className: cn(
-                          "max-w-md text-sm leading-relaxed text-muted-foreground",
-                          brandDescriptionClassName
-                        ),
-                        children: footerDetails.description
-                      }
-                    )
-                  ]
-                }
-              ),
-              footerLinks && footerLinks.length > 0 && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "space-y-6",
-                    accordionColumnClassName
-                  ),
-                  children: /* @__PURE__ */ jsx("div", { className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-3", children: footerLinks.map((section) => /* @__PURE__ */ jsxs("div", { children: [
-                    /* @__PURE__ */ jsx("h3", { className: "mb-4 text-sm font-semibold tracking-wide", children: section.title }),
-                    /* @__PURE__ */ jsx("ul", { className: "space-y-2.5 text-sm text-muted-foreground", children: section.items.map((item, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-                      Pressable,
-                      {
-                        href: item.link,
-                        className: "transition-colors hover:text-foreground",
-                        children: item.text
-                      }
-                    ) }, idx)) })
-                  ] }, section.id)) })
-                }
-              )
+                    optixFlowConfig
+                  }
+                ),
+                footerDetails?.description && /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "max-w-md text-sm leading-relaxed text-muted-foreground",
+                      brandDescriptionClassName
+                    ),
+                    children: footerDetails.description
+                  }
+                )
+              ] }),
+              footerLinks && footerLinks.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("space-y-6", accordionColumnClassName), children: /* @__PURE__ */ jsx("div", { className: "grid gap-8 grid-cols-2 md:grid-cols-3", children: footerLinks.map((section) => /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("h3", { className: "mb-4 text-sm font-semibold tracking-wide", children: section.title }),
+                /* @__PURE__ */ jsx("ul", { className: "space-y-2.5 text-sm text-muted-foreground", children: section.items.map((item, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    href: item.link,
+                    className: "transition-colors hover:text-foreground",
+                    children: item.text
+                  }
+                ) }, idx)) })
+              ] }, section.id)) }) })
             ]
           }
         ),
@@ -49615,7 +49703,7 @@ function HeroOverlayCtaGrid({
   const renderCards = useMemo(() => {
     if (cardsSlot) return cardsSlot;
     if (!cards || cards.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-6xl overflow-hidden rounded-3xl border border-border bg-white/95 shadow-2xl px-6 md:px-20", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 divide-y divide-border md:grid-cols-3 md:divide-x md:divide-y-0", children: cards.map((card) => /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-6xl overflow-hidden rounded-3xl border border-border bg-white/95 shadow-2xl px-0", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 divide-y divide-border md:grid-cols-3 md:divide-x md:divide-y-0", children: cards.map((card) => /* @__PURE__ */ jsxs(
       Pressable,
       {
         href: card.href,
@@ -49625,7 +49713,7 @@ function HeroOverlayCtaGrid({
             "div",
             {
               className: cn(
-                "relative flex h-12 w-12 flex-none items-center justify-center rounded-full transition-colors group-hover:text-black bg-white"
+                "relative flex h-12 w-12 flex-none items-center justify-center rounded-full bg-primary text-primary-foreground"
               ),
               children: /* @__PURE__ */ jsx(DynamicIcon, { name: card.icon, size: 22 })
             }
@@ -49671,7 +49759,7 @@ function HeroOverlayCtaGrid({
       pattern,
       patternOpacity,
       className: cn(
-        "relative flex h-full min-h-screen w-screen items-center justify-center overflow-hidden bg-black pb-0 pt-0 md:pt-0",
+        "relative flex h-full min-h-screen w-screen items-center justify-center overflow-hidden bg-black pb-0 pt-0 md:pt-0 px-6",
         className
       ),
       children: [
@@ -49687,14 +49775,14 @@ function HeroOverlayCtaGrid({
                   initial: { opacity: 0, y: 28 },
                   animate: { opacity: 1, y: 0 },
                   transition: { duration: 0.6, ease: "easeOut" },
-                  className: "mx-auto max-w-3xl text-center text-balance text-white px-6 md:px-20",
+                  className: "mx-auto max-w-3xl text-center text-balance text-white px-0",
                   children: [
                     renderBadge,
                     heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
                       "h1",
                       {
                         className: cn(
-                          "mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl",
+                          "mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl text-balance",
                           headingClassName
                         ),
                         children: heading
@@ -49703,7 +49791,7 @@ function HeroOverlayCtaGrid({
                       "h1",
                       {
                         className: cn(
-                          "mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl",
+                          "mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl text-balance",
                           headingClassName
                         ),
                         children: heading
@@ -49712,13 +49800,19 @@ function HeroOverlayCtaGrid({
                     description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                       "p",
                       {
-                        className: cn("mt-5 text-lg md:text-xl", descriptionClassName),
+                        className: cn(
+                          "mt-5 text-lg md:text-xl text-balance",
+                          descriptionClassName
+                        ),
                         children: description
                       }
                     ) : /* @__PURE__ */ jsx(
                       "div",
                       {
-                        className: cn("mt-5 text-lg md:text-xl", descriptionClassName),
+                        className: cn(
+                          "mt-5 text-lg md:text-xl text-balance",
+                          descriptionClassName
+                        ),
                         children: description
                       }
                     )),
@@ -49745,28 +49839,22 @@ function HeroSplitIconCards({
   cardItems,
   cardsSlot,
   background,
-  verticalSpacing,
   pattern,
   patternOpacity,
   className,
   contentClassName,
   headingClassName,
-  descriptionClassName
+  descriptionClassName,
+  verticalSpacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32"
 }) {
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!primaryCta && !secondaryCta) return null;
     return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-4", children: [
       primaryCta && /* @__PURE__ */ jsx(Pressable, { href: primaryCta.href, size: "lg", variant: "default", children: primaryCta.label }),
-      secondaryCta && /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          href: secondaryCta.href,
-          size: "lg",
-          variant: "outline",
-          children: secondaryCta.label
-        }
-      )
+      secondaryCta && /* @__PURE__ */ jsx(Pressable, { href: secondaryCta.href, size: "lg", variant: "outline", children: secondaryCta.label })
     ] });
   }, [actionsSlot, primaryCta, secondaryCta]);
   const renderCards = useMemo(() => {
@@ -49774,11 +49862,30 @@ function HeroSplitIconCards({
     if (!cardItems || cardItems.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4", children: cardItems.map((item, idx) => {
       const card = /* @__PURE__ */ jsx(Card, { className: "h-full border-border/60 px-0 py-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4 p-6", children: [
-        /* @__PURE__ */ jsx("div", { className: cn("flex h-14 w-14 items-center justify-center rounded-xl", `${getAccentColor(background)}/10`, getAccentColor(background)), children: /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 24 }) }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold ", children: item.title }),
-          item.subtitle ? /* @__PURE__ */ jsx("p", { className: cn("mt-2 text-sm", getTextColor(background, "muted")), children: item.subtitle }) : null
-        ] })
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex h-14 w-14 items-center justify-center rounded-xl",
+              `${getAccentColor(background)}/10`,
+              getAccentColor(background)
+            ),
+            children: /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 24 })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold ", children: item.title }),
+          item.subtitle ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mt-2 text-sm",
+                getTextColor(background, "muted")
+              ),
+              children: item.subtitle
+            }
+          ) : null
+        ] })
       ] }) });
       return item.href ? /* @__PURE__ */ jsx(Pressable, { href: item.href, className: "block", children: card }, idx) : /* @__PURE__ */ jsx("div", { children: card }, idx);
     }) });
@@ -49787,15 +49894,53 @@ function HeroSplitIconCards({
     Section,
     {
       background,
-      spacing: verticalSpacing,
+      spacing: verticalSpacing || spacing,
       pattern,
       patternOpacity,
       className: cn("overflow-hidden", className),
+      containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-10 lg:grid-cols-2 lg:items-center", children: [
         /* @__PURE__ */ jsx("div", { className: cn("space-y-6", contentClassName), children: children ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-          eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xs font-semibold uppercase tracking-[0.25em]", getAccentColor(background)), children: eyebrow }) : eyebrow),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-xs font-semibold uppercase tracking-[0.25em]",
+                getAccentColor(background)
+              ),
+              children: eyebrow
+            }
+          ) : eyebrow),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "text-3xl font-bold md:text-4xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "text-3xl font-bold md:text-4xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          )),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-lg",
+                getTextColor(background, "muted"),
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }) }),
         renderCards
@@ -50583,14 +50728,13 @@ function HeroPatternBadgeLogos({
   actionsSlot,
   logos,
   logosSlot,
-  logosTagline = "Powering the next generation of digital products",
-  backgroundImageUrl = "https://cdn.ing/assets/files/record/286186/nbdflpgp4ostrno079hygibsflp3",
+  logosTagline,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -50604,7 +50748,14 @@ function HeroPatternBadgeLogos({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -50661,7 +50812,7 @@ function HeroPatternBadgeLogos({
       return /* @__PURE__ */ jsx("div", { className: logoClassName, children: imgElement }, index);
     });
   }, [logosSlot, logos, optixFlowConfig]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Section,
     {
       background,
@@ -50669,31 +50820,64 @@ function HeroPatternBadgeLogos({
       pattern,
       patternOpacity,
       className: cn("relative p-0", className),
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "absolute h-full w-full bg-contain bg-repeat opacity-100 lg:block",
-              "mask-[linear-gradient(to_right,var(--color-border),transparent,transparent,var(--color-border))]",
-              backgroundClassName
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "p-6 flex w-full flex-col items-center gap-6 text-center",
+            contentClassName
+          ),
+          children: [
+            badge && /* @__PURE__ */ jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { variant: "default", children: badge }) : badge }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "mb-6 text-4xl font-bold tracking-tight text-balance md:text-5xl lg:text-7xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mx-auto max-w-2xl md:text-lg lg:text-xl text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+            ] }),
+            (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "mt-6 flex items-center gap-4 flex-col md:flex-row w-full",
+                  actionsClassName
+                ),
+                children: renderActions
+              }
             ),
-            style: { backgroundImage: `url('${backgroundImageUrl}')` }
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: cn("container py-28 md:py-32", containerClassName), children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxs("div", { className: cn("z-10 mx-auto flex max-w-5xl flex-col items-center gap-6 text-center", contentClassName), children: [
-          badge && /* @__PURE__ */ jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "transition-colors hover:bg-secondary/20", children: badge }) : badge }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-6 text-4xl font-bold tracking-tight text-pretty md:text-5xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-2xl md:text-lg lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-          ] }),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-6 flex items-center gap-4", actionsClassName), children: renderActions }),
-          (logosSlot || logos && logos.length > 0 || logosTagline) && /* @__PURE__ */ jsxs("div", { className: cn("mt-12 flex flex-col items-center gap-4 lg:mt-16", logosClassName), children: [
-            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-sm", getTextColor(background, "muted")), children: logosTagline }) : logosTagline),
-            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4", children: renderLogos })
-          ] })
-        ] }) }) })
-      ]
+            (logosSlot || logos && logos.length > 0 || logosTagline) && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "mt-6 flex flex-col items-center gap-4 lg:mt-16 w-full",
+                  logosClassName
+                ),
+                children: [
+                  logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-sm"), children: logosTagline }) : logosTagline),
+                  /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4 w-full", children: renderLogos })
+                ]
+              }
+            )
+          ]
+        }
+      ) }) })
     }
   );
 }
@@ -50707,11 +50891,11 @@ function HeroLogoCenteredScreenshot({
   image,
   imageSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -50727,7 +50911,7 @@ function HeroLogoCenteredScreenshot({
       {
         src: logoSrc,
         alt: logo.alt,
-        className: cn("h-10 md:h-16", logo.className),
+        className: cn("h-10 md:h-16 object-contain", logo.className),
         optixFlowConfig
       }
     );
@@ -50735,7 +50919,14 @@ function HeroLogoCenteredScreenshot({
   const renderAction = useMemo(() => {
     if (actionSlot) return actionSlot;
     if (!action) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = action;
     return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
       icon,
       label,
@@ -50750,7 +50941,11 @@ function HeroLogoCenteredScreenshot({
       {
         src: image.src,
         alt: image.alt,
-        className: cn("mt-20 aspect-video w-full rounded-t-lg object-cover", imageClassName, image.className),
+        className: cn(
+          "mt-20 w-full rounded-xl object-cover h-auto shadow-xl",
+          imageClassName,
+          image.className
+        ),
         optixFlowConfig
       }
     );
@@ -50763,15 +50958,51 @@ function HeroLogoCenteredScreenshot({
       pattern,
       patternOpacity,
       className: cn(className),
-      children: /* @__PURE__ */ jsx("div", { className: "border-b", children: /* @__PURE__ */ jsxs("div", { className: cn("container max-w-7xl", containerClassName), children: [
-        /* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxs("div", { className: cn("z-10 flex flex-col items-center gap-6 text-center", contentClassName), children: [
-          renderLogo,
-          /* @__PURE__ */ jsxs("div", { children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-4 text-3xl font-medium text-pretty lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("mb-4 text-3xl font-medium text-pretty lg:text-5xl", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-3xl lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-          ] }),
-          renderAction
-        ] }) }),
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: cn("container max-w-7xl", containerClassName), children: [
+        /* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "z-10 flex flex-col items-center gap-6 text-center",
+              contentClassName
+            ),
+            children: [
+              renderLogo,
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center items-center w-full text-balance", children: [
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mb-4 text-3xl font-medium lg:text-5xl",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mb-4 text-3xl font-medium lg:text-5xl",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                )),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "max-w-3xl lg:text-xl",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              ] }),
+              renderAction
+            ]
+          }
+        ) }),
         renderImage
       ] }) })
     }
@@ -50781,20 +51012,19 @@ function HeroPatternLogoTechStack({
   logo,
   logoSlot,
   heading,
-  highlightedWord = "Blocks",
+  highlightedWord,
   description,
   actions,
   actionsSlot,
-  techStackLabel = "Built with open-source technologies",
+  techStackLabel,
   techLogos,
   techLogosSlot,
-  backgroundImage = "https://cdn.ing/assets/files/record/286187/4gpn0yq2ptra8iwlvmwwv860ggwv",
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -50806,12 +51036,12 @@ function HeroPatternLogoTechStack({
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
-    return /* @__PURE__ */ jsx("div", { className: "rounded-xl bg-background/30 p-4 shadow-sm backdrop-blur-sm", children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
       Img,
       {
         src: logoSrc,
         alt: logo.alt,
-        className: cn("h-16", logo.imgClassName),
+        className: cn("h-16 w-auto object-contain", logo.imgClassName),
         optixFlowConfig
       }
     ) });
@@ -50819,56 +51049,89 @@ function HeroPatternLogoTechStack({
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mt-6 flex justify-center gap-3", actionsClassName), children: actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            icon,
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "mt-6 flex justify-center flex-col md:flex-row gap-3",
+          actionsClassName
+        ),
+        children: actions.map((action, index) => {
+          const {
             label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
+            icon,
+            iconAfter,
+            children,
+            className: actionClassName,
+            ...pressableProps
+          } = action;
+          return /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              asButton: true,
+              className: actionClassName,
+              ...pressableProps,
+              children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                icon,
+                label,
+                iconAfter
+              ] })
+            },
+            index
+          );
+        })
+      }
+    );
   }, [actionsSlot, actions, actionsClassName]);
   const renderTechLogos = useMemo(() => {
     if (techLogosSlot) return techLogosSlot;
     if (!techLogos || techLogos.length === 0) return null;
-    return /* @__PURE__ */ jsxs("div", { className: cn("mt-20 flex flex-col items-center gap-5", techLogosClassName), children: [
-      techStackLabel && (typeof techStackLabel === "string" ? /* @__PURE__ */ jsx("p", { className: cn("font-medium lg:text-left", getTextColor(background, "muted")), children: techStackLabel }) : techStackLabel),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-4", children: techLogos.map((techLogo, index) => {
-        const techLogoSrc = typeof techLogo.src === "string" ? techLogo.src : techLogo.src.light;
-        return /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            href: techLogo.href,
-            className: cn(
-              buttonVariants({ variant: "outline" }),
-              "group flex aspect-square h-12 items-center justify-center p-0",
-              techLogo.className
-            ),
-            children: /* @__PURE__ */ jsx(
-              Img,
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "mt-20 flex flex-col items-center gap-5",
+          techLogosClassName
+        ),
+        children: [
+          techStackLabel && (typeof techStackLabel === "string" ? /* @__PURE__ */ jsx("p", { className: cn("font-medium lg:text-left"), children: techStackLabel }) : techStackLabel),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-4", children: techLogos.map((techLogo, index) => {
+            const techLogoSrc = typeof techLogo.src === "string" ? techLogo.src : techLogo.src.light;
+            return /* @__PURE__ */ jsx(
+              Pressable,
               {
-                src: techLogoSrc,
-                alt: techLogo.alt,
-                className: cn("h-6 saturate-0 transition-all group-hover:saturate-100", techLogo.imgClassName),
-                optixFlowConfig
-              }
-            )
-          },
-          index
-        );
-      }) })
-    ] });
-  }, [techLogosSlot, techLogos, techStackLabel, techLogosClassName, optixFlowConfig]);
-  return /* @__PURE__ */ jsxs(
+                href: techLogo.href,
+                className: cn(
+                  "group flex w-auto h-12 items-center justify-center p-0",
+                  techLogo.className
+                ),
+                children: /* @__PURE__ */ jsx(
+                  Img,
+                  {
+                    src: techLogoSrc,
+                    alt: techLogo.alt,
+                    className: cn(
+                      "h-full w-auto object-contain",
+                      techLogo.imgClassName
+                    ),
+                    optixFlowConfig
+                  }
+                )
+              },
+              index
+            );
+          }) })
+        ]
+      }
+    );
+  }, [
+    techLogosSlot,
+    techLogos,
+    techStackLabel,
+    techLogosClassName,
+    optixFlowConfig
+  ]);
+  return /* @__PURE__ */ jsx(
     Section,
     {
       background,
@@ -50876,30 +51139,56 @@ function HeroPatternLogoTechStack({
       pattern,
       patternOpacity,
       className: cn(className),
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-0 flex h-full w-full items-center justify-center opacity-100", children: /* @__PURE__ */ jsx(
-          Img,
-          {
-            alt: "background",
-            src: backgroundImage,
-            className: "mask-[radial-gradient(75%_75%_at_center,white,transparent)] opacity-90",
-            optixFlowConfig
-          }
-        ) }),
-        /* @__PURE__ */ jsx("div", { className: cn("relative z-10 container", containerClassName), children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-6 text-center", contentClassName), children: [
-          renderLogo,
-          /* @__PURE__ */ jsxs("div", { children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxs("h1", { className: cn("mb-6 text-2xl font-bold tracking-tight text-pretty lg:text-5xl", headingClassName), children: [
-              heading,
-              " ",
-              highlightedWord && /* @__PURE__ */ jsx("span", { className: getAccentColor(background), children: highlightedWord })
-            ] }) : /* @__PURE__ */ jsx("h1", { className: cn("mb-6 text-2xl font-bold tracking-tight text-pretty lg:text-5xl", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-3xl lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-          ] }),
-          renderActions,
-          renderTechLogos
-        ] }) }) })
-      ]
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex flex-col items-center gap-6 text-center",
+            contentClassName
+          ),
+          children: [
+            renderLogo,
+            /* @__PURE__ */ jsxs("div", { children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxs(
+                "h1",
+                {
+                  className: cn(
+                    "mb-6 text-2xl font-bold tracking-tight text-balance lg:text-5xl",
+                    headingClassName
+                  ),
+                  children: [
+                    heading,
+                    " ",
+                    highlightedWord && /* @__PURE__ */ jsx("span", { className: "opacity-75", children: highlightedWord })
+                  ]
+                }
+              ) : /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "mb-6 text-2xl font-bold tracking-tight text-balance lg:text-5xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mx-auto max-w-3xl lg:text-xl text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+            ] }),
+            renderActions,
+            renderTechLogos
+          ]
+        }
+      ) }) })
     }
   );
 }