@opensite/ui 3.7.5 → 3.7.6

package/dist/feature-image-overlay-badge.js

@@ -15,32 +15,6 @@ import { Img } from '@page-speed/img';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React.memo(function DynamicIcon2({
   apiKey,
@@ -631,7 +605,6 @@ function FeatureImageOverlayBadge({
                 {
                   className: cn(
                     "text-base leading-relaxed lg:text-lg",
-                    getTextColor(background, "muted"),
                     descriptionClassName
                   ),
                   children: description
@@ -641,7 +614,6 @@ function FeatureImageOverlayBadge({
                 {
                   className: cn(
                     "text-base leading-relaxed lg:text-lg",
-                    getTextColor(background, "muted"),
                     descriptionClassName
                   ),
                   children: description
@@ -665,7 +637,7 @@ function FeatureImageOverlayBadge({
                   "div",
                   {
                     className: cn(
-                      "absolute inset-0 rounded-2xl bg-gradient-to-t from-black/80 via-black/30 to-transparent",
+                      "absolute inset-0 rounded-2xl bg-linear-to-t from-black/80 via-black/30 to-transparent",
                       overlayClassName
                     )
                   }
@@ -675,7 +647,7 @@ function FeatureImageOverlayBadge({
                     "span",
                     {
                       className: cn(
-                        "ml-auto flex w-fit items-center gap-2 rounded-full bg-white/20 px-4 py-2.5 text-sm font-semibold text-white backdrop-blur-md shadow-lg",
+                        "ml-auto flex w-fit items-center gap-2 rounded-full bg-card px-4 py-2.5 text-sm font-semibold text-card-foreground backdrop-blur-md shadow-lg",
                         avatarBadgeClassName
                       ),
                       children: [
@@ -694,16 +666,7 @@ function FeatureImageOverlayBadge({
                         ),
                         children: overlayTitle
                       }
-                    ) : /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: cn(
-                          "text-lg font-semibold text-white lg:text-2xl xl:text-3xl",
-                          overlayTitleClassName
-                        ),
-                        children: overlayTitle
-                      }
-                    )),
+                    ) : overlayTitle),
                     overlayLinkText && /* @__PURE__ */ jsxs(
                       Pressable,
                       {

package/dist/feature-integration-cards.cjs

@@ -416,16 +416,16 @@ function FeatureIntegrationCards({
     (integration) => {
       if (integration.iconSlot) return integration.iconSlot;
       if (!integration.icon) return null;
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-40 max-w-full shrink-0 items-center justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
           src: integration.icon,
           alt: integration.iconAlt || (typeof integration.title === "string" ? integration.title : "Integration icon"),
           className: cn(
-            "h-full w-full object-contain",
+            "h-12 w-auto object-contain",
             integration.iconClassName
           ),
-          loading: "lazy",
+          loading: "eager",
           optixFlowConfig
         }
       ) });
@@ -449,16 +449,7 @@ function FeatureIntegrationCards({
               ),
               children: integration.title
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn(
-                "font-semibold md:text-lg",
-                integration.titleClassName
-              ),
-              children: integration.title
-            }
-          )),
+          ) : integration.title),
           integration.description && (typeof integration.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "p",
             {

package/dist/feature-integration-cards.js

@@ -410,16 +410,16 @@ function FeatureIntegrationCards({
     (integration) => {
       if (integration.iconSlot) return integration.iconSlot;
       if (!integration.icon) return null;
-      return /* @__PURE__ */ jsx("div", { className: "flex h-12 w-40 max-w-full shrink-0 items-center justify-start", children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-start", children: /* @__PURE__ */ jsx(
         Img,
         {
           src: integration.icon,
           alt: integration.iconAlt || (typeof integration.title === "string" ? integration.title : "Integration icon"),
           className: cn(
-            "h-full w-full object-contain",
+            "h-12 w-auto object-contain",
             integration.iconClassName
           ),
-          loading: "lazy",
+          loading: "eager",
           optixFlowConfig
         }
       ) });
@@ -443,16 +443,7 @@ function FeatureIntegrationCards({
               ),
               children: integration.title
             }
-          ) : /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "font-semibold md:text-lg",
-                integration.titleClassName
-              ),
-              children: integration.title
-            }
-          )),
+          ) : integration.title),
           integration.description && (typeof integration.description === "string" ? /* @__PURE__ */ jsx(
             "p",
             {

package/dist/footer-newsletter-contact.cjs

@@ -1281,10 +1281,10 @@ function FooterNewsletterContact({
             ] })
           ] })
         ] }),
-        logo && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 md:gap-12", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "flex-1" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "basis-30 md:basis-40", children: /* @__PURE__ */ jsxRuntime.jsx(FooterLogo, { logo, optixFlowConfig }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "flex-1" })
+        logo && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-4 md:gap-12", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "min-w-0 flex-1" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(FooterLogo, { logo, optixFlowConfig }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "min-w-0 flex-1" })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3 opacity-80 max-md:text-xs", children: [
           /* @__PURE__ */ jsxRuntime.jsx(FooterCopyright, { copyright }),

package/dist/footer-newsletter-contact.js

@@ -1259,10 +1259,10 @@ function FooterNewsletterContact({
             ] })
           ] })
         ] }),
-        logo && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 md:gap-12", children: [
-          /* @__PURE__ */ jsx(Separator, { className: "flex-1" }),
-          /* @__PURE__ */ jsx("div", { className: "basis-30 md:basis-40", children: /* @__PURE__ */ jsx(FooterLogo, { logo, optixFlowConfig }) }),
-          /* @__PURE__ */ jsx(Separator, { className: "flex-1" })
+        logo && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4 md:gap-12", children: [
+          /* @__PURE__ */ jsx(Separator, { className: "min-w-0 flex-1" }),
+          /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(FooterLogo, { logo, optixFlowConfig }) }),
+          /* @__PURE__ */ jsx(Separator, { className: "min-w-0 flex-1" })
         ] }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3 opacity-80 max-md:text-xs", children: [
           /* @__PURE__ */ jsx(FooterCopyright, { copyright }),

package/dist/hero-adaptable-product-grid.cjs

@@ -601,7 +601,8 @@ function HeroAdaptableProductGrid({
                     "max-h-[400px] w-full object-cover",
                     imageClassName
                   ),
-                  optixFlowConfig
+                  optixFlowConfig,
+                  loading: "eager"
                 }
               )
             }

package/dist/hero-adaptable-product-grid.js

@@ -595,7 +595,8 @@ function HeroAdaptableProductGrid({
                     "max-h-[400px] w-full object-cover",
                     imageClassName
                   ),
-                  optixFlowConfig
+                  optixFlowConfig,
+                  loading: "eager"
                 }
               )
             }

package/dist/hero-ai-powered-carousel.cjs

@@ -810,7 +810,8 @@ function HeroAiPoweredCarousel({
                       "rounded-lg shadow-lg",
                       image.className
                     ),
-                    optixFlowConfig
+                    optixFlowConfig,
+                    loading: "eager"
                   }
                 ) }, index)) })
               }

package/dist/hero-ai-powered-carousel.js

@@ -785,7 +785,8 @@ function HeroAiPoweredCarousel({
                       "rounded-lg shadow-lg",
                       image.className
                     ),
-                    optixFlowConfig
+                    optixFlowConfig,
+                    loading: "eager"
                   }
                 ) }, index)) })
               }

package/dist/hero-architecture-fullscreen.cjs

@@ -493,7 +493,8 @@ function HeroArchitectureFullscreen({
             src: backgroundImage,
             alt: "",
             className: "absolute inset-0 min-h-screen min-w-screen object-cover object-center brightness-50",
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-20 h-full w-full max-w-full md:max-w-lg p-8 md:p-24", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-end gap-6", children: [
@@ -508,7 +509,7 @@ function HeroArchitectureFullscreen({
                 children: tagline
               }
             ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: taglineClassName, children: tagline })),
-            (logo || logoSlot) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 flex justify-center", logoClassName), children: /* @__PURE__ */ jsxRuntime.jsx(BrandLogo, { logo, logoSlot, size: "xl" }) }),
+            (logo || logoSlot) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 flex justify-start", logoClassName), children: /* @__PURE__ */ jsxRuntime.jsx(BrandLogo, { logo, logoSlot, size: "xl" }) }),
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
               react.motion.h1,
               {

package/dist/hero-architecture-fullscreen.js

@@ -487,7 +487,8 @@ function HeroArchitectureFullscreen({
             src: backgroundImage,
             alt: "",
             className: "absolute inset-0 min-h-screen min-w-screen object-cover object-center brightness-50",
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ),
         /* @__PURE__ */ jsx("div", { className: "relative z-20 h-full w-full max-w-full md:max-w-lg p-8 md:p-24", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-end gap-6", children: [
@@ -502,7 +503,7 @@ function HeroArchitectureFullscreen({
                 children: tagline
               }
             ) : /* @__PURE__ */ jsx("div", { className: taglineClassName, children: tagline })),
-            (logo || logoSlot) && /* @__PURE__ */ jsx("div", { className: cn("mb-4 flex justify-center", logoClassName), children: /* @__PURE__ */ jsx(BrandLogo, { logo, logoSlot, size: "xl" }) }),
+            (logo || logoSlot) && /* @__PURE__ */ jsx("div", { className: cn("mb-4 flex justify-start", logoClassName), children: /* @__PURE__ */ jsx(BrandLogo, { logo, logoSlot, size: "xl" }) }),
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
               motion.h1,
               {

package/dist/hero-badge-image-split.cjs

@@ -633,10 +633,11 @@ function HeroBadgeImageSplit({
             src: imageSrc,
             alt: imageAlt,
             className: cn(
-              "max-h-96 w-full rounded-md object-cover",
+              "max-h-96 w-full rounded-lg object-cover shadow-xl",
               imageClassName
             ),
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         )
       ] }) })

package/dist/hero-badge-image-split.js

@@ -627,10 +627,11 @@ function HeroBadgeImageSplit({
             src: imageSrc,
             alt: imageAlt,
             className: cn(
-              "max-h-96 w-full rounded-md object-cover",
+              "max-h-96 w-full rounded-lg object-cover shadow-xl",
               imageClassName
             ),
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         )
       ] }) })

package/dist/hero-badge-shadow-overlay.cjs

@@ -669,7 +669,8 @@ function HeroBadgeShadowOverlay({
             src: backgroundImageUrl,
             alt: "Background Image",
             className: "absolute inset-0 -z-10 h-full w-full object-cover brightness-50",
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         )
       ]

package/dist/hero-badge-shadow-overlay.js

@@ -648,7 +648,8 @@ function HeroBadgeShadowOverlay({
             src: backgroundImageUrl,
             alt: "Background Image",
             className: "absolute inset-0 -z-10 h-full w-full object-cover brightness-50",
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         )
       ]

package/dist/hero-billing-platform-logos.cjs

@@ -648,10 +648,11 @@ function HeroBillingPlatformLogos({
                   "relative z-10 w-full object-cover",
                   mainImage.className
                 ),
-                optixFlowConfig
+                optixFlowConfig,
+                loading: "eager"
               }
             ) }),
-            overlayImages?.[0] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[19.84%] -left-[-2%] z-30 aspect-[1.765043789/1] w-[30.49%] max-w-47.5 overflow-hidden rounded-lg shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+            overlayImages?.[0] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[19.84%] -left-[-2%] z-30 aspect-[1.765043789/1] w-[30.49%] max-w-47.5 overflow-hidden rounded-lg shadow-xl", children: /* @__PURE__ */ jsxRuntime.jsx(
               img.Img,
               {
                 src: overlayImages[0].src,
@@ -660,10 +661,11 @@ function HeroBillingPlatformLogos({
                   "size-full object-cover",
                   overlayImages[0].className
                 ),
-                optixFlowConfig
+                optixFlowConfig,
+                loading: "eager"
               }
             ) }),
-            overlayImages?.[1] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[55%] left-[0%] z-30 aspect-[1.776555024/1] w-[43.6%] max-w-65.5 overflow-hidden rounded-lg shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+            overlayImages?.[1] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[55%] left-[0%] z-30 aspect-[1.776555024/1] w-[43.6%] max-w-65.5 overflow-hidden rounded-lg shadow-xl", children: /* @__PURE__ */ jsxRuntime.jsx(
               img.Img,
               {
                 src: overlayImages[1].src,
@@ -672,10 +674,11 @@ function HeroBillingPlatformLogos({
                   "size-full object-cover",
                   overlayImages[1].className
                 ),
-                optixFlowConfig
+                optixFlowConfig,
+                loading: "eager"
               }
             ) }),
-            overlayImages?.[2] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[40%] right-[0%] z-30 aspect-[1.170212766/1] w-[26.48%] max-w-41.25 overflow-hidden rounded-lg shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+            overlayImages?.[2] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[40%] right-[0%] z-30 aspect-[1.170212766/1] w-[26.48%] max-w-41.25 overflow-hidden rounded-lg shadow-xl", children: /* @__PURE__ */ jsxRuntime.jsx(
               img.Img,
               {
                 src: overlayImages[2].src,
@@ -684,7 +687,8 @@ function HeroBillingPlatformLogos({
                   "size-full object-cover",
                   overlayImages[2].className
                 ),
-                optixFlowConfig
+                optixFlowConfig,
+                loading: "eager"
               }
             ) })
           ] }) }) : null
@@ -697,7 +701,7 @@ function HeroBillingPlatformLogos({
               logosClassName
             ),
             children: [
-              logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-5 text-center font-mono text-sm font-medium uppercase", children: logosTagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: logosTagline })),
+              logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-5 text-center font-mono text-sm font-medium uppercase", children: logosTagline }) : logosTagline),
               logosSlot ? logosSlot : logos && logos.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
                 Carousel,
                 {

package/dist/hero-billing-platform-logos.js

@@ -623,10 +623,11 @@ function HeroBillingPlatformLogos({
                   "relative z-10 w-full object-cover",
                   mainImage.className
                 ),
-                optixFlowConfig
+                optixFlowConfig,
+                loading: "eager"
               }
             ) }),
-            overlayImages?.[0] && /* @__PURE__ */ jsx("div", { className: "absolute top-[19.84%] -left-[-2%] z-30 aspect-[1.765043789/1] w-[30.49%] max-w-47.5 overflow-hidden rounded-lg shadow-lg", children: /* @__PURE__ */ jsx(
+            overlayImages?.[0] && /* @__PURE__ */ jsx("div", { className: "absolute top-[19.84%] -left-[-2%] z-30 aspect-[1.765043789/1] w-[30.49%] max-w-47.5 overflow-hidden rounded-lg shadow-xl", children: /* @__PURE__ */ jsx(
               Img,
               {
                 src: overlayImages[0].src,
@@ -635,10 +636,11 @@ function HeroBillingPlatformLogos({
                   "size-full object-cover",
                   overlayImages[0].className
                 ),
-                optixFlowConfig
+                optixFlowConfig,
+                loading: "eager"
               }
             ) }),
-            overlayImages?.[1] && /* @__PURE__ */ jsx("div", { className: "absolute top-[55%] left-[0%] z-30 aspect-[1.776555024/1] w-[43.6%] max-w-65.5 overflow-hidden rounded-lg shadow-lg", children: /* @__PURE__ */ jsx(
+            overlayImages?.[1] && /* @__PURE__ */ jsx("div", { className: "absolute top-[55%] left-[0%] z-30 aspect-[1.776555024/1] w-[43.6%] max-w-65.5 overflow-hidden rounded-lg shadow-xl", children: /* @__PURE__ */ jsx(
               Img,
               {
                 src: overlayImages[1].src,
@@ -647,10 +649,11 @@ function HeroBillingPlatformLogos({
                   "size-full object-cover",
                   overlayImages[1].className
                 ),
-                optixFlowConfig
+                optixFlowConfig,
+                loading: "eager"
               }
             ) }),
-            overlayImages?.[2] && /* @__PURE__ */ jsx("div", { className: "absolute top-[40%] right-[0%] z-30 aspect-[1.170212766/1] w-[26.48%] max-w-41.25 overflow-hidden rounded-lg shadow-lg", children: /* @__PURE__ */ jsx(
+            overlayImages?.[2] && /* @__PURE__ */ jsx("div", { className: "absolute top-[40%] right-[0%] z-30 aspect-[1.170212766/1] w-[26.48%] max-w-41.25 overflow-hidden rounded-lg shadow-xl", children: /* @__PURE__ */ jsx(
               Img,
               {
                 src: overlayImages[2].src,
@@ -659,7 +662,8 @@ function HeroBillingPlatformLogos({
                   "size-full object-cover",
                   overlayImages[2].className
                 ),
-                optixFlowConfig
+                optixFlowConfig,
+                loading: "eager"
               }
             ) })
           ] }) }) : null
@@ -672,7 +676,7 @@ function HeroBillingPlatformLogos({
               logosClassName
             ),
             children: [
-              logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: "px-5 text-center font-mono text-sm font-medium uppercase", children: logosTagline }) : /* @__PURE__ */ jsx("div", { children: logosTagline })),
+              logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: "px-5 text-center font-mono text-sm font-medium uppercase", children: logosTagline }) : logosTagline),
               logosSlot ? logosSlot : logos && logos.length > 0 ? /* @__PURE__ */ jsx(
                 Carousel,
                 {

package/dist/hero-business-carousel-dots.cjs

@@ -684,7 +684,8 @@ function HeroBusinessCarouselDots({
                         "h-full w-full object-cover",
                         activeImage.className
                       ),
-                      optixFlowConfig
+                      optixFlowConfig,
+                      loading: "eager"
                     }
                   )
                 },

package/dist/hero-business-carousel-dots.js

@@ -678,7 +678,8 @@ function HeroBusinessCarouselDots({
                         "h-full w-full object-cover",
                         activeImage.className
                       ),
-                      optixFlowConfig
+                      optixFlowConfig,
+                      loading: "eager"
                     }
                   )
                 },

package/dist/hero-conversation-intelligence.cjs

@@ -555,7 +555,8 @@ function HeroConversationIntelligence({
               "object-centers size-full object-cover shadow-xl rounded-xl",
               image.className
             ),
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         )
       }

package/dist/hero-conversation-intelligence.js

@@ -549,7 +549,8 @@ function HeroConversationIntelligence({
               "object-centers size-full object-cover shadow-xl rounded-xl",
               image.className
             ),
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         )
       }

package/dist/hero-crm-streamlined.cjs

@@ -593,7 +593,7 @@ function HeroCrmStreamlined({
           "div",
           {
             className: cn("relative basis-[42%] py-2 md:py-16", imageClassName),
-            children: imageSlot ? imageSlot : image ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aspect-square w-full overflow-hidden rounded-xl shadow-xl", children: [
+            children: imageSlot ? imageSlot : image ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aspect-square w-full overflow-hidden rounded-2xl shadow-xl", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 img.Img,
                 {
@@ -611,7 +611,7 @@ function HeroCrmStreamlined({
                 "div",
                 {
                   className: cn(
-                    "absolute top-0 left-25 z-10 hidden bg-muted aspect-[1.378254211/1] h-full w-225 rounded-xl md:block"
+                    "absolute top-0 left-25 z-10 hidden bg-muted aspect-[1.378254211/1] h-full w-225 rounded-2xl md:block opacity-30"
                   )
                 }
               )

package/dist/hero-crm-streamlined.js

@@ -587,7 +587,7 @@ function HeroCrmStreamlined({
           "div",
           {
             className: cn("relative basis-[42%] py-2 md:py-16", imageClassName),
-            children: imageSlot ? imageSlot : image ? /* @__PURE__ */ jsxs("div", { className: "aspect-square w-full overflow-hidden rounded-xl shadow-xl", children: [
+            children: imageSlot ? imageSlot : image ? /* @__PURE__ */ jsxs("div", { className: "aspect-square w-full overflow-hidden rounded-2xl shadow-xl", children: [
               /* @__PURE__ */ jsx(
                 Img,
                 {
@@ -605,7 +605,7 @@ function HeroCrmStreamlined({
                 "div",
                 {
                   className: cn(
-                    "absolute top-0 left-25 z-10 hidden bg-muted aspect-[1.378254211/1] h-full w-225 rounded-xl md:block"
+                    "absolute top-0 left-25 z-10 hidden bg-muted aspect-[1.378254211/1] h-full w-225 rounded-2xl md:block opacity-30"
                   )
                 }
               )

package/dist/hero-design-carousel-portfolio.cjs

@@ -771,7 +771,8 @@ function HeroDesignCarouselPortfolio({
             src: image.src,
             alt: image.alt,
             className: cn("size-full object-cover", image.className),
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) }) }, index)) })
       }

package/dist/hero-design-carousel-portfolio.js

@@ -745,7 +745,8 @@ function HeroDesignCarouselPortfolio({
             src: image.src,
             alt: image.alt,
             className: cn("size-full object-cover", image.className),
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) }) }, index)) })
       }

package/dist/hero-ecommerce-product-showcase.cjs

@@ -669,7 +669,8 @@ function HeroEcommerceProductShowcase({
               "aspect-3/4 w-full object-cover",
               images[0].className
             ),
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) }),
         images[1] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: imgClassWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -681,7 +682,8 @@ function HeroEcommerceProductShowcase({
               "aspect-square w-full object-cover",
               images[1].className
             ),
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) })
       ] }),
@@ -695,7 +697,8 @@ function HeroEcommerceProductShowcase({
               "aspect-square w-full object-cover",
               images[2].className
             ),
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) }),
         images[3] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: imgClassWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -707,7 +710,8 @@ function HeroEcommerceProductShowcase({
               "aspect-3/4 w-full object-cover",
               images[3].className
             ),
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) })
       ] })

package/dist/hero-ecommerce-product-showcase.js

@@ -648,7 +648,8 @@ function HeroEcommerceProductShowcase({
               "aspect-3/4 w-full object-cover",
               images[0].className
             ),
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) }),
         images[1] && /* @__PURE__ */ jsx("div", { className: imgClassWrapper, children: /* @__PURE__ */ jsx(
@@ -660,7 +661,8 @@ function HeroEcommerceProductShowcase({
               "aspect-square w-full object-cover",
               images[1].className
             ),
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) })
       ] }),
@@ -674,7 +676,8 @@ function HeroEcommerceProductShowcase({
               "aspect-square w-full object-cover",
               images[2].className
             ),
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) }),
         images[3] && /* @__PURE__ */ jsx("div", { className: imgClassWrapper, children: /* @__PURE__ */ jsx(
@@ -686,7 +689,8 @@ function HeroEcommerceProductShowcase({
               "aspect-3/4 w-full object-cover",
               images[3].className
             ),
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) })
       ] })