@opensite/ui 3.7.5 → 3.7.7

package/dist/hero-task-timer-animated.js

@@ -1,21 +1,15 @@
 "use client";
-import React, { useMemo } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { Img } from '@page-speed/img';
-import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Pressable, buttonVariants } from '@page-speed/pressable';
+import { Img } from '@page-speed/img';
 
 // components/blocks/hero/hero-task-timer-animated.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function AspectRatio({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(AspectRatioPrimitive.Root, { "data-slot": "aspect-ratio", ...props });
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -511,69 +505,71 @@ var BrandLogo = ({
   }
   return /* @__PURE__ */ jsx("div", { className: cn("flex items-center", logoClassName), children: imgElement });
 };
+function padTwo(n) {
+  return n.toString().padStart(2, "0");
+}
+var RING_RADIUS = 90;
+var RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
 function HeroTaskTimerAnimated({
   sectionId = "hero-task-timer-animated",
   heading,
+  headingSlot,
   description,
-  descriptionClassName,
   actions,
   actionsSlot,
   actionsClassName,
-  images,
-  imagesSlot,
+  taskItems,
+  timerMinutes = 25,
+  timerSeconds = 0,
   background,
   pattern,
   patternOpacity,
   className,
-  spacing = "xl",
+  spacing = "hero",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   headingClassName,
-  imagesClassName,
-  optixFlowConfig,
+  descriptionClassName,
   logo,
   logoSlot,
   logoClassName
 }) {
-  const renderImages = useMemo(() => {
-    if (imagesSlot) return imagesSlot;
-    if (!images || images.length < 2) return null;
-    return /* @__PURE__ */ jsxs(
-      "div",
+  const initialTotal = timerMinutes * 60 + timerSeconds;
+  const [remaining, setRemaining] = useState(initialTotal);
+  const [activeTaskIndex, setActiveTaskIndex] = useState(0);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setRemaining((prev) => prev <= 0 ? initialTotal : prev - 1);
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [initialTotal]);
+  const cycleTask = useCallback(() => {
+    if (!taskItems || taskItems.length <= 1) return;
+    setActiveTaskIndex((prev) => (prev + 1) % taskItems.length);
+  }, [taskItems]);
+  useEffect(() => {
+    if (!taskItems || taskItems.length <= 1) return;
+    const interval = setInterval(cycleTask, 3e3);
+    return () => clearInterval(interval);
+  }, [taskItems, cycleTask]);
+  const minutes = Math.floor(remaining / 60);
+  const seconds = remaining % 60;
+  const progress = initialTotal > 0 ? remaining / initialTotal : 1;
+  const strokeDashoffset = RING_CIRCUMFERENCE * (1 - progress);
+  const renderHeading = useMemo(() => {
+    if (headingSlot) return headingSlot;
+    if (!heading) return null;
+    return typeof heading === "string" ? /* @__PURE__ */ jsx(
+      "h1",
       {
         className: cn(
-          "flex flex-col mt-6 gap-6 md:gap-10 lg:flex-row",
-          imagesClassName
+          "max-w-3xl text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance",
+          headingClassName
         ),
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-10 w-full lg:w-[60%]", children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg shadow-xl", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.916786227 / 1, children: /* @__PURE__ */ jsx(
-            Img,
-            {
-              src: images[0].src,
-              alt: images[0].alt,
-              className: cn(
-                "block size-full object-cover object-center",
-                images[0].className
-              ),
-              optixFlowConfig
-            }
-          ) }) }) }),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-10 w-full lg:w-[40%]", children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg shadow-xl", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.916786227 / 1, children: /* @__PURE__ */ jsx(
-            Img,
-            {
-              src: images[1].src,
-              alt: images[1].alt,
-              className: cn(
-                "block size-full object-cover object-center",
-                images[1].className
-              ),
-              optixFlowConfig
-            }
-          ) }) }) })
-        ]
+        children: heading
       }
-    );
-  }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
+    ) : heading;
+  }, [headingSlot, heading, headingClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -584,48 +580,130 @@ function HeroTaskTimerAnimated({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-6 md:gap-16", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center gap-10 lg:flex-row lg:items-center lg:gap-16", children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "flex flex-col gap-4 w-full pt-12 lg:pt-0",
+              "flex flex-col gap-5 w-full lg:w-1/2 pt-8 lg:pt-0",
               headerClassName
             ),
             children: [
               (logo || logoSlot) && /* @__PURE__ */ jsx("div", { className: cn("mb-4", logoClassName), children: /* @__PURE__ */ jsx(BrandLogo, { logo, logoSlot, size: "lg" }) }),
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                "h1",
+              renderHeading,
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
                 {
                   className: cn(
-                    "max-w-2xl text-6xl font-bold tracking-tight md:text-7xl lg:text-8xl text-balance",
-                    headingClassName
+                    "max-w-full md:max-w-xl text-lg text-balance",
+                    descriptionClassName
                   ),
-                  children: heading
+                  children: description
                 }
-              ) : /* @__PURE__ */ jsx(
-                "h1",
+              ) : description),
+              taskItems && taskItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-col gap-3", children: taskItems.map((task, index) => /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  className: cn(
-                    "max-w-2xl text-6xl font-bold tracking-tight md:text-7xl lg:text-8xl text-balance",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+                  className: "flex items-center gap-3 transition-all duration-700 ease-in-out",
+                  style: {
+                    opacity: index === activeTaskIndex ? 1 : 0.35,
+                    transform: index === activeTaskIndex ? "translateX(8px)" : "translateX(0)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "size-2.5 shrink-0 rounded-xl transition-colors duration-700",
+                          index === activeTaskIndex ? "bg-primary" : "bg-muted-foreground/30"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "text-sm font-medium transition-all duration-700",
+                          index === activeTaskIndex ? "opacity-100" : "opacity-50"
+                        ),
+                        children: task
+                      }
+                    )
+                  ]
+                },
+                index
+              )) }),
               /* @__PURE__ */ jsx(
                 BlockActions,
                 {
                   actions,
                   actionsSlot,
-                  actionsClassName
+                  actionsClassName: cn("mt-2", actionsClassName)
                 }
               )
             ]
           }
         ),
-        renderImages
+        /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-center lg:w-1/2", children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center gap-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                width: "240",
+                height: "240",
+                viewBox: "0 0 220 220",
+                className: "drop-shadow-lg",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: "110",
+                      cy: "110",
+                      r: RING_RADIUS,
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "5",
+                      className: "text-muted-foreground/15"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: "110",
+                      cy: "110",
+                      r: RING_RADIUS,
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "5",
+                      strokeLinecap: "round",
+                      className: "text-primary transition-[stroke-dashoffset] duration-1000 ease-linear",
+                      strokeDasharray: RING_CIRCUMFERENCE,
+                      strokeDashoffset,
+                      transform: "rotate(-90 110 110)"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1 font-mono", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-5xl font-bold tabular-nums tracking-tight md:text-6xl", children: padTwo(minutes) }),
+              /* @__PURE__ */ jsx("span", { className: "animate-pulse text-3xl font-bold text-primary md:text-4xl", children: ":" }),
+              /* @__PURE__ */ jsx("span", { className: "text-5xl font-bold tabular-nums tracking-tight md:text-6xl", children: padTwo(seconds) })
+            ] }) })
+          ] }),
+          taskItems && taskItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "relative h-8 w-full max-w-[280px] overflow-hidden", children: taskItems.map((task, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0 flex items-center justify-center transition-all duration-700 ease-in-out",
+              style: {
+                opacity: index === activeTaskIndex ? 1 : 0,
+                transform: index === activeTaskIndex ? "translateY(0)" : "translateY(12px)"
+              },
+              children: /* @__PURE__ */ jsx("span", { className: "truncate rounded-full bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary", children: task })
+            },
+            index
+          )) })
+        ] }) })
       ] })
     }
   );

package/dist/navbar-animated-preview.cjs

@@ -1238,7 +1238,7 @@ var FeaturedLink = ({ link, optixFlowConfig }) => {
       className: `group relative flex w-full overflow-hidden rounded-xl px-4 pt-24 pb-4 ${hasBgImg ? "" : "bg-primary"}`,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 flex w-full items-center gap-6", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-12 shrink-0 rounded-lg border bg-card text-card-foreground shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: link.icon || link.iconName, size: 20 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center size-12 shrink-0 rounded-lg border bg-card text-card-foreground shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: link.icon || link.iconName, size: 20 }) }),
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {

package/dist/navbar-animated-preview.js

@@ -1213,7 +1213,7 @@ var FeaturedLink = ({ link, optixFlowConfig }) => {
       className: `group relative flex w-full overflow-hidden rounded-xl px-4 pt-24 pb-4 ${hasBgImg ? "" : "bg-primary"}`,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex w-full items-center gap-6", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex size-12 shrink-0 rounded-lg border bg-card text-card-foreground shadow-lg", children: /* @__PURE__ */ jsx(DynamicIcon, { name: link.icon || link.iconName, size: 20 }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center size-12 shrink-0 rounded-lg border bg-card text-card-foreground shadow-lg", children: /* @__PURE__ */ jsx(DynamicIcon, { name: link.icon || link.iconName, size: 20 }) }),
           /* @__PURE__ */ jsxs(
             "div",
             {

package/dist/navbar-enterprise-mega.cjs

@@ -766,6 +766,7 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
 var SolutionsMenu = ({
   solutionCards,
   platformItems,
+  platformTitle = "Platform",
   featuredHeroCard,
   optixFlowConfig
 }) => {
@@ -801,14 +802,15 @@ var SolutionsMenu = ({
             src: featuredHeroCard.image,
             alt: featuredHeroCard.title,
             className: "h-full w-full object-cover",
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) })
       ]
     }
   ) : null;
   const platformSection = platformItems.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 text-left", children: /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-xs font-medium tracking-wider text-muted-foreground uppercase", children: "Developer Platform" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 text-left", children: /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-xs font-medium tracking-wider text-muted-foreground uppercase", children: platformTitle }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-2", children: platformItems.map((technology) => /* @__PURE__ */ jsxRuntime.jsxs(
       NavigationMenuLink,
       {
@@ -960,7 +962,8 @@ var ProductsMenu = ({
             src: featuredHeroCard.image,
             alt: featuredHeroCard.title,
             className: "h-full w-full object-cover",
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col p-5", children: [
@@ -994,7 +997,8 @@ var ProductsMenu = ({
               src: product.image,
               alt: product.title,
               className: "h-full w-full object-cover",
-              optixFlowConfig
+              optixFlowConfig,
+              loading: "eager"
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -1009,6 +1013,7 @@ var ProductsMenu = ({
 ] });
 var ResourcesMenu = ({
   resourceItems,
+  resourcesTitle = "Resources",
   topicGroups,
   featuredHeroCard
 }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid w-[1100px] grid-cols-[280px_1fr_220px] gap-6", children: [
@@ -1026,7 +1031,8 @@ var ResourcesMenu = ({
           {
             src: featuredHeroCard.image,
             alt: featuredHeroCard.title,
-            className: "h-full w-full object-cover invert"
+            className: "h-full w-full object-cover invert",
+            loading: "eager"
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col p-5", children: [
@@ -1047,7 +1053,7 @@ var ResourcesMenu = ({
     }
   ) }),
   resourceItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-1", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 text-left", children: /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-xs font-medium tracking-wider text-muted-foreground uppercase", children: "Resources" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 text-left", children: /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-xs font-medium tracking-wider text-muted-foreground uppercase", children: resourcesTitle }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3", children: resourceItems.map((resource) => /* @__PURE__ */ jsxRuntime.jsxs(
       NavigationMenuLink,
       {
@@ -1079,7 +1085,14 @@ var ResourcesMenu = ({
         href: topic.href,
         className: "group !flex !w-full items-center gap-2 rounded-lg p-2 hover:bg-muted",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: topic.icon, size: 14, className: "shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DynamicIcon,
+            {
+              name: topic.icon,
+              size: 14,
+              className: "shrink-0"
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 text-sm font-medium", children: topic.title })
         ]
       },
@@ -1090,6 +1103,7 @@ var ResourcesMenu = ({
 var GlobalMenu = ({
   featureCategories,
   regions,
+  locationsTitle = "Locations",
   featuredHeroCard,
   optixFlowConfig
 }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[1100px]", children: [
@@ -1109,7 +1123,8 @@ var GlobalMenu = ({
               src: featuredHeroCard.image,
               alt: featuredHeroCard.title,
               className: "h-full w-full object-cover",
-              optixFlowConfig
+              optixFlowConfig,
+              loading: "eager"
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col p-5", children: [
@@ -1149,7 +1164,7 @@ var GlobalMenu = ({
     ] }, category.title)) })
   ] }),
   regions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 border-b border-border pb-2 text-left", children: /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-xs font-medium tracking-wider text-muted-foreground uppercase", children: "Popular Locations" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 border-b border-border pb-2 text-left", children: /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-xs font-medium tracking-wider text-muted-foreground uppercase", children: locationsTitle }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-4", children: regions.map((region) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -1204,7 +1219,8 @@ var PartnersMenu = ({
               "h-full w-full object-cover",
               featuredHeroCard.imagePosition === "background" && "invert"
             ),
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col p-5", children: [
@@ -1442,6 +1458,7 @@ var renderDropdownContent = (item, optixFlowConfig) => {
         {
           solutionCards: item.solutionCards ?? [],
           platformItems: item.platformItems ?? [],
+          platformTitle: item.platformTitle,
           featuredHeroCard: item.featuredHeroCard,
           optixFlowConfig
         }
@@ -1461,6 +1478,7 @@ var renderDropdownContent = (item, optixFlowConfig) => {
         {
           featureCategories: item.featureCategories ?? [],
           regions: item.regions ?? [],
+          locationsTitle: item.locationsTitle,
           featuredHeroCard: item.featuredHeroCard,
           optixFlowConfig
         }
@@ -1479,6 +1497,7 @@ var renderDropdownContent = (item, optixFlowConfig) => {
         ResourcesMenu,
         {
           resourceItems: item.resourceItems ?? [],
+          resourcesTitle: item.resourcesTitle,
           topicGroups: item.topicGroups ?? [],
           featuredHeroCard: item.featuredHeroCard
         }

package/dist/navbar-enterprise-mega.d.cts

@@ -198,11 +198,14 @@ interface IMenuLink {
     featuredHeroCard?: IFeaturedHeroCard;
     solutionCards?: ISolutionCard[];
     platformItems?: ITechnologyItem[];
+    platformTitle?: string;
     productCategories?: IProductCategory[];
     featureCategories?: IFeatureCategory[];
     regions?: IRegionItem[];
+    locationsTitle?: string;
     partnerCards?: IPartnerCard[];
     resourceItems?: IResourceItem[];
+    resourcesTitle?: string;
     topicGroups?: ITopicGroup[];
 }
 /**

package/dist/navbar-enterprise-mega.d.ts

@@ -198,11 +198,14 @@ interface IMenuLink {
     featuredHeroCard?: IFeaturedHeroCard;
     solutionCards?: ISolutionCard[];
     platformItems?: ITechnologyItem[];
+    platformTitle?: string;
     productCategories?: IProductCategory[];
     featureCategories?: IFeatureCategory[];
     regions?: IRegionItem[];
+    locationsTitle?: string;
     partnerCards?: IPartnerCard[];
     resourceItems?: IResourceItem[];
+    resourcesTitle?: string;
     topicGroups?: ITopicGroup[];
 }
 /**

package/dist/navbar-enterprise-mega.js

@@ -743,6 +743,7 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
 var SolutionsMenu = ({
   solutionCards,
   platformItems,
+  platformTitle = "Platform",
   featuredHeroCard,
   optixFlowConfig
 }) => {
@@ -778,14 +779,15 @@ var SolutionsMenu = ({
             src: featuredHeroCard.image,
             alt: featuredHeroCard.title,
             className: "h-full w-full object-cover",
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) })
       ]
     }
   ) : null;
   const platformSection = platformItems.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-    /* @__PURE__ */ jsx("div", { className: "mb-3 text-left", children: /* @__PURE__ */ jsx("strong", { className: "text-xs font-medium tracking-wider text-muted-foreground uppercase", children: "Developer Platform" }) }),
+    /* @__PURE__ */ jsx("div", { className: "mb-3 text-left", children: /* @__PURE__ */ jsx("strong", { className: "text-xs font-medium tracking-wider text-muted-foreground uppercase", children: platformTitle }) }),
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: platformItems.map((technology) => /* @__PURE__ */ jsxs(
       NavigationMenuLink,
       {
@@ -937,7 +939,8 @@ var ProductsMenu = ({
             src: featuredHeroCard.image,
             alt: featuredHeroCard.title,
             className: "h-full w-full object-cover",
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-5", children: [
@@ -971,7 +974,8 @@ var ProductsMenu = ({
               src: product.image,
               alt: product.title,
               className: "h-full w-full object-cover",
-              optixFlowConfig
+              optixFlowConfig,
+              loading: "eager"
             }
           ) }),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -986,6 +990,7 @@ var ProductsMenu = ({
 ] });
 var ResourcesMenu = ({
   resourceItems,
+  resourcesTitle = "Resources",
   topicGroups,
   featuredHeroCard
 }) => /* @__PURE__ */ jsxs("div", { className: "grid w-[1100px] grid-cols-[280px_1fr_220px] gap-6", children: [
@@ -1003,7 +1008,8 @@ var ResourcesMenu = ({
           {
             src: featuredHeroCard.image,
             alt: featuredHeroCard.title,
-            className: "h-full w-full object-cover invert"
+            className: "h-full w-full object-cover invert",
+            loading: "eager"
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-5", children: [
@@ -1024,7 +1030,7 @@ var ResourcesMenu = ({
     }
   ) }),
   resourceItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: "col-span-1", children: [
-    /* @__PURE__ */ jsx("div", { className: "mb-3 text-left", children: /* @__PURE__ */ jsx("strong", { className: "text-xs font-medium tracking-wider text-muted-foreground uppercase", children: "Resources" }) }),
+    /* @__PURE__ */ jsx("div", { className: "mb-3 text-left", children: /* @__PURE__ */ jsx("strong", { className: "text-xs font-medium tracking-wider text-muted-foreground uppercase", children: resourcesTitle }) }),
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: resourceItems.map((resource) => /* @__PURE__ */ jsxs(
       NavigationMenuLink,
       {
@@ -1056,7 +1062,14 @@ var ResourcesMenu = ({
         href: topic.href,
         className: "group !flex !w-full items-center gap-2 rounded-lg p-2 hover:bg-muted",
         children: [
-          /* @__PURE__ */ jsx(DynamicIcon, { name: topic.icon, size: 14, className: "shrink-0" }),
+          /* @__PURE__ */ jsx(
+            DynamicIcon,
+            {
+              name: topic.icon,
+              size: 14,
+              className: "shrink-0"
+            }
+          ),
           /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 text-sm font-medium", children: topic.title })
         ]
       },
@@ -1067,6 +1080,7 @@ var ResourcesMenu = ({
 var GlobalMenu = ({
   featureCategories,
   regions,
+  locationsTitle = "Locations",
   featuredHeroCard,
   optixFlowConfig
 }) => /* @__PURE__ */ jsxs("div", { className: "w-[1100px]", children: [
@@ -1086,7 +1100,8 @@ var GlobalMenu = ({
               src: featuredHeroCard.image,
               alt: featuredHeroCard.title,
               className: "h-full w-full object-cover",
-              optixFlowConfig
+              optixFlowConfig,
+              loading: "eager"
             }
           ) }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-5", children: [
@@ -1126,7 +1141,7 @@ var GlobalMenu = ({
     ] }, category.title)) })
   ] }),
   regions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
-    /* @__PURE__ */ jsx("div", { className: "mb-3 border-b border-border pb-2 text-left", children: /* @__PURE__ */ jsx("strong", { className: "text-xs font-medium tracking-wider text-muted-foreground uppercase", children: "Popular Locations" }) }),
+    /* @__PURE__ */ jsx("div", { className: "mb-3 border-b border-border pb-2 text-left", children: /* @__PURE__ */ jsx("strong", { className: "text-xs font-medium tracking-wider text-muted-foreground uppercase", children: locationsTitle }) }),
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-4", children: regions.map((region) => /* @__PURE__ */ jsxs(
       "div",
       {
@@ -1181,7 +1196,8 @@ var PartnersMenu = ({
               "h-full w-full object-cover",
               featuredHeroCard.imagePosition === "background" && "invert"
             ),
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-5", children: [
@@ -1419,6 +1435,7 @@ var renderDropdownContent = (item, optixFlowConfig) => {
         {
           solutionCards: item.solutionCards ?? [],
           platformItems: item.platformItems ?? [],
+          platformTitle: item.platformTitle,
           featuredHeroCard: item.featuredHeroCard,
           optixFlowConfig
         }
@@ -1438,6 +1455,7 @@ var renderDropdownContent = (item, optixFlowConfig) => {
         {
           featureCategories: item.featureCategories ?? [],
           regions: item.regions ?? [],
+          locationsTitle: item.locationsTitle,
           featuredHeroCard: item.featuredHeroCard,
           optixFlowConfig
         }
@@ -1456,6 +1474,7 @@ var renderDropdownContent = (item, optixFlowConfig) => {
         ResourcesMenu,
         {
           resourceItems: item.resourceItems ?? [],
+          resourcesTitle: item.resourcesTitle,
           topicGroups: item.topicGroups ?? [],
           featuredHeroCard: item.featuredHeroCard
         }

package/dist/navbar-image-preview.cjs

@@ -996,7 +996,8 @@ var DesktopMenuItem = ({
             src: link.image,
             alt: typeof link.label === "string" ? link.label : "",
             className: `absolute top-0 left-0 h-full w-full object-cover transition-opacity duration-300 ${linkIndex === 0 ? "opacity-100" : "opacity-0"}`,
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           },
           linkIndex
         )) }),
@@ -1082,7 +1083,14 @@ var MobileNavigationMenu = ({
           children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: icon, size: 16, className: "shrink-0" }),
             label,
-            /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: iconAfter, size: 16, className: "shrink-0" })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              DynamicIcon,
+              {
+                name: iconAfter,
+                size: 16,
+                className: "shrink-0"
+              }
+            )
           ] })
         },
         index