@opensite/ui 2.0.7 → 2.0.9

package/dist/registry.js

@@ -55837,11 +55837,11 @@ function HeroHiringAnimatedText({
   scrollActionSlot,
   backgroundImage,
   background,
-  spacing = "py-0 md:py-0",
   pattern,
   patternOpacity,
   className,
-  containerClassName = "mx-auto h-screen w-full max-w-7xl relative z-10 px-6 md:px-16 lg:px-32 pb-12 md:pb-18",
+  spacing = "py-0 md:py-0",
+  containerClassName = "sm:px-4 mx-auto h-screen w-full max-w-7xl relative z-10 px-6 pb-12 md:pb-18",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -57019,6 +57019,7 @@ function HeroVideoDialogGradient({
   pattern,
   onVideoClick,
   patternOpacity,
+  actionsClassName,
   className,
   headingClassName,
   descriptionClassName,
@@ -57072,16 +57073,7 @@ function HeroVideoDialogGradient({
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsx(
-                "h1",
-                {
-                  className: cn(
-                    "max-w-[920px] text-center text-4xl leading-tight font-semibold md:text-6xl lg:text-7xl text-balance",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              )),
+              ) : heading),
               description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                 "p",
                 {
@@ -57091,20 +57083,29 @@ function HeroVideoDialogGradient({
                   ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              ) : description)
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row flex-wrap gap-4", children: [
-              videoAction && videoDialog?.videoUrl ? /* @__PURE__ */ jsx(
-                ActionComponent,
-                {
-                  action: {
-                    ...videoAction,
-                    onClick: handleVideoClick
-                  }
-                }
-              ) : null,
-              actions?.map((action, index) => /* @__PURE__ */ jsx(ActionComponent, { action }, index))
-            ] })
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col md:flex-row flex-wrap gap-4",
+                  actionsClassName
+                ),
+                children: [
+                  videoAction && videoDialog?.videoUrl ? /* @__PURE__ */ jsx(
+                    ActionComponent,
+                    {
+                      action: {
+                        ...videoAction,
+                        onClick: handleVideoClick
+                      }
+                    }
+                  ) : null,
+                  actions?.map((action, index) => /* @__PURE__ */ jsx(ActionComponent, { action }, index))
+                ]
+              }
+            )
           ] }),
           renderImage
         ] })
@@ -57717,10 +57718,10 @@ function HeroMentalHealthTeam({
   featureImage,
   featureImageSlot,
   background,
-  spacing = "xl",
   pattern,
   patternOpacity,
   className,
+  spacing = "xl",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   headingClassName,
@@ -58176,67 +58177,122 @@ function HeroBusinessOperationsMosaic({
     }
   );
 }
+var imageAnimationVariants = [
+  // Top-left: slides in from left + up
+  {
+    hidden: { opacity: 0, x: -40, y: -30, scale: 0.92 },
+    visible: { opacity: 1, x: 0, y: 0, scale: 1 }
+  },
+  // Bottom-left: slides in from left + down
+  {
+    hidden: { opacity: 0, x: -30, y: 40, scale: 0.92 },
+    visible: { opacity: 1, x: 0, y: 0, scale: 1 }
+  },
+  // Top-right: slides in from right + up
+  {
+    hidden: { opacity: 0, x: 40, y: -30, scale: 0.92 },
+    visible: { opacity: 1, x: 0, y: 0, scale: 1 }
+  },
+  // Bottom-right: slides in from right + down
+  {
+    hidden: { opacity: 0, x: 30, y: 40, scale: 0.92 },
+    visible: { opacity: 1, x: 0, y: 0, scale: 1 }
+  }
+];
+var staggerDelays = [0, 0.15, 0.1, 0.25];
+var imageTransition = {
+  type: "spring",
+  stiffness: 80,
+  damping: 20,
+  mass: 0.8
+};
 function HeroAgencyAnimatedImages({
   heading,
-  subheading,
-  action,
-  actionSlot,
+  description,
+  descriptionClassName,
+  actions,
+  actionsSlot,
+  actionsClassName,
   images,
   imagesSlot,
   background,
-  spacing,
+  spacing = "xl",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
-  subheadingClassName,
   imagesContainerClassName,
   optixFlowConfig
 }) {
-  const renderAction = useMemo(() => {
-    if (actionSlot) return actionSlot;
-    if (!action) return null;
-    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,
-          iconAfter
-        ] })
-      }
-    );
-  }, [actionSlot, action]);
   const renderImages = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
     const leftImages = images.slice(0, 2);
     const rightImages = images.slice(2, 4);
-    return /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-2 items-center justify-center gap-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col items-end justify-center gap-4", children: leftImages.map((image, index) => /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: image.src,
-          alt: image.alt,
-          className: cn("block h-full w-full object-cover object-center", image.className),
-          optixFlowConfig
-        }
-      ) }, index)) }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col items-start justify-center gap-4", children: rightImages.map((image, index) => /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: image.src,
-          alt: image.alt,
-          className: cn("block h-full w-full object-cover object-center", image.className),
-          optixFlowConfig
-        }
-      ) }, index)) })
+    return /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-2 items-center justify-center gap-5", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col items-end justify-center gap-5 pt-8", children: leftImages.map((image, index) => {
+        const variant = imageAnimationVariants[index];
+        const delay = staggerDelays[index];
+        return /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: variant.hidden,
+            whileInView: variant.visible,
+            viewport: { once: true, amount: 0.3 },
+            transition: { ...imageTransition, delay },
+            className: "group relative overflow-hidden rounded-xl shadow-lg",
+            children: [
+              /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: image.src,
+                  alt: image.alt,
+                  className: cn(
+                    "block h-full w-full object-cover object-center transition-transform duration-500 ease-out group-hover:scale-105",
+                    image.className
+                  ),
+                  optixFlowConfig
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-foreground/5 transition-all duration-500 group-hover:ring-foreground/10" })
+            ]
+          },
+          index
+        );
+      }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col items-start justify-center gap-5 pb-8", children: rightImages.map((image, index) => {
+        const globalIndex = index + 2;
+        const variant = imageAnimationVariants[globalIndex];
+        const delay = staggerDelays[globalIndex];
+        return /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: variant.hidden,
+            whileInView: variant.visible,
+            viewport: { once: true, amount: 0.3 },
+            transition: { ...imageTransition, delay },
+            className: "group relative overflow-hidden rounded-xl shadow-lg",
+            children: [
+              /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: image.src,
+                  alt: image.alt,
+                  className: cn(
+                    "block h-full w-full object-cover object-center transition-transform duration-500 ease-out group-hover:scale-105",
+                    image.className
+                  ),
+                  optixFlowConfig
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-foreground/5 transition-all duration-500 group-hover:ring-foreground/10" })
+            ]
+          },
+          index
+        );
+      }) })
     ] });
   }, [imagesSlot, images, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
@@ -58247,13 +58303,48 @@ function HeroAgencyAnimatedImages({
       pattern,
       patternOpacity,
       className,
-      children: /* @__PURE__ */ jsx("div", { className: cn("container max-w-444", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-1 items-center justify-between gap-14 lg:grid-cols-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex w-full max-w-125 flex-col gap-8 md:gap-14 lg:max-w-full", contentClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("font-serif text-5xl md:text-6xl lg:text-7xl xl:text-[5rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx("p", { className: cn("font-montserrat text-2xl leading-snug lg:text-3xl xl:text-4xl", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading })),
-          renderAction
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "pt-10 md:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "grid w-full gap-12 md:gap-14 grid-cols-1 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-4", contentClassName), children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl md:text-5xl lg:text-7xl xl:text-[5rem] text-left text-pretty",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : heading),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-left text-lg md:text-xl text-balance",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          /* @__PURE__ */ jsx(
+            BlockActions,
+            {
+              actions,
+              actionsSlot,
+              actionsClassName
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("mx-auto w-full max-w-211.5 lg:mx-0", imagesContainerClassName), children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.049627792 / 1, children: renderImages }) })
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mx-auto w-full max-w-211.5 lg:mx-0",
+              imagesContainerClassName
+            ),
+            children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.049627792 / 1, children: renderImages })
+          }
+        )
       ] }) })
     }
   );
@@ -58263,6 +58354,7 @@ function HeroWelcomeAsymmetricImages({
   description,
   actions,
   actionsSlot,
+  actionsClassName,
   images,
   imagesSlot,
   background,
@@ -58276,25 +58368,6 @@ function HeroWelcomeAsymmetricImages({
   descriptionClassName,
   optixFlowConfig
 }) {
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 sm:flex-row", children: actions.map((action, idx) => /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        href: action.href,
-        onClick: action.onClick,
-        asButton: true,
-        variant: action.variant || "default",
-        size: action.size || "lg",
-        children: [
-          action.label,
-          action.icon
-        ]
-      },
-      idx
-    )) });
-  }, [actionsSlot, actions]);
   const renderImages = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length < 4) return null;
@@ -58363,36 +58436,25 @@ function HeroWelcomeAsymmetricImages({
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsx(
-            "h1",
-            {
-              className: cn(
-                "mb-8 text-4xl font-normal text-balance md:text-7xl",
-                headingClassName
-              ),
-              children: heading
-            }
-          )),
+          ) : heading),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx(
             "p",
             {
               className: cn(
-                "mb-12 max-w-[70%] text-xl font-normal text-balance",
+                "mb-12 max-w-full md:max-w-[70%] text-lg md:text-xl font-normal text-balance",
                 descriptionClassName
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsx(
-            "div",
+          ) : description),
+          /* @__PURE__ */ jsx(
+            BlockActions,
             {
-              className: cn(
-                "mb-12 max-w-[70%] text-xl font-normal text-balance",
-                descriptionClassName
-              ),
-              children: description
+              actions,
+              actionsSlot,
+              actionsClassName
             }
-          )),
-          renderActions
+          )
         ] }),
         renderImages
       ] }) })
@@ -58402,6 +58464,9 @@ function HeroWelcomeAsymmetricImages({
 function HeroStartupLaunchCta({
   badge,
   badgeIcon,
+  badgeCard,
+  badgeCardSlot,
+  badgeClassName,
   heading,
   description,
   actions,
@@ -58411,17 +58476,14 @@ function HeroStartupLaunchCta({
   socialProofText,
   imageSrc,
   imageAlt,
-  badgeCard,
-  badgeCardSlot,
   background,
   pattern,
   patternOpacity,
   patternClassName,
   className,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
+  spacing = "xl",
   contentClassName,
-  badgeClassName,
   headingClassName,
   descriptionClassName,
   actionsClassName,
@@ -58429,34 +58491,6 @@ function HeroStartupLaunchCta({
   imageClassName,
   optixFlowConfig
 }) {
-  const renderActions = useMemo(() => {
-    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;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  }, [actionsSlot, actions]);
   const renderAvatars = useMemo(() => {
     if (avatarsSlot) return avatarsSlot;
     if (!avatars || avatars.length === 0) return null;
@@ -58503,7 +58537,7 @@ function HeroStartupLaunchCta({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
+      children: /* @__PURE__ */ jsx("div", { className: "pt-8 md:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
         /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
           badge && /* @__PURE__ */ jsxs(Badge, { className: cn("px-4", badgeClassName), children: [
             badgeIcon,
@@ -58513,24 +58547,31 @@ function HeroStartupLaunchCta({
             "h1",
             {
               className: cn(
-                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl leading-snug text-balance",
+                "text-4xl font-normal text-balance md:text-7xl",
                 headingClassName
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsx("div", { className: 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 })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx(
-            "div",
+          ) : heading),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
             {
               className: cn(
-                "flex flex-col gap-4 sm:flex-row",
-                actionsClassName
+                "max-w-full md:max-w-[70%] text-lg md:text-xl font-normal text-balance",
+                descriptionClassName
               ),
-              children: renderActions
+              children: description
             }
-          ),
-          (avatarsSlot || avatars || socialProofText) && /* @__PURE__ */ jsxs(
+          ) : description),
+          /* @__PURE__ */ jsx(
+            BlockActions,
+            {
+              actions,
+              actionsSlot,
+              actionsClassName
+            }
+          ),
+          (avatarsSlot || avatars || socialProofText) && /* @__PURE__ */ jsxs(
             "div",
             {
               className: cn(
@@ -58570,90 +58611,73 @@ function HeroStartupLaunchCta({
   );
 }
 function HeroEnterpriseSecurity({
-  badgeText,
+  badge,
   badgeIcon,
-  badgeSlot,
+  badgeClassName,
   heading,
   description,
   actions,
   actionsSlot,
   features,
   featuresSlot,
-  logos,
-  logosSlot,
   background,
-  spacing,
   pattern,
   patternOpacity,
+  patternClassName,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   contentClassName,
   headingClassName,
   descriptionClassName,
   actionsClassName,
-  featuresClassName,
-  logosClassName,
-  optixFlowConfig
+  featuresClassName
 }) {
-  const renderBadge = useMemo(() => {
-    if (badgeSlot) return badgeSlot;
-    if (!badgeText && !badgeIcon) return null;
-    return /* @__PURE__ */ jsxs("div", { className: cn(
-      "inline-flex items-center gap-2 rounded-full border border-border px-4 py-2 text-sm",
-      getNestedCardBg(background, "muted"),
-      getNestedCardTextColor(background)
-    ), children: [
-      badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 16, className: "text-success" }),
-      /* @__PURE__ */ jsx("span", { children: badgeText })
-    ] });
-  }, [badgeSlot, badgeText, badgeIcon]);
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center", 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,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
-  }, [actionsSlot, actions, actionsClassName]);
   const renderFeatures = useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mt-20 grid gap-8 md:grid-cols-3", featuresClassName), children: features.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: cn("rounded-2xl border border-border p-6 text-center", getNestedCardBg(background, "card")), children: [
-      /* @__PURE__ */ jsx("div", { className: cn("mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full", feature.iconBgClass || `${getAccentColor(background)}/10`), children: feature.icon ?? /* @__PURE__ */ jsx(DynamicIcon, { name: feature.iconName || "lucide/check", size: 24, className: feature.iconColorClass || getAccentColor(background) }) }),
-      /* @__PURE__ */ jsx("h3", { className: "mb-2 text-lg font-semibold ", children: feature.title }),
-      feature.description && /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: feature.description })
-    ] }, index)) });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "mt-12 md:mt-20 grid gap-4 md:gap-8 grid-cols-1 md:grid-cols-3",
+          featuresClassName
+        ),
+        children: features.map((feature, index) => /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            href: feature.href,
+            className: cn(
+              "rounded-2xl border border-border p-6 text-center",
+              "transition-all duration-500 hover:ring-2 hover:shadow-lg"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full",
+                    feature.iconBgClass
+                  ),
+                  children: feature.icon ?? /* @__PURE__ */ jsx(
+                    DynamicIcon,
+                    {
+                      name: feature.iconName || "lucide/check",
+                      size: 24,
+                      className: feature.iconColorClass
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("h3", { className: "mb-2 text-lg font-semibold ", children: feature.title }),
+              feature.description && /* @__PURE__ */ jsx("p", { className: "text-sm", children: feature.description })
+            ]
+          },
+          index
+        ))
+      }
+    );
   }, [featuresSlot, features, featuresClassName]);
-  const renderLogos = useMemo(() => {
-    if (logosSlot) return logosSlot;
-    if (!logos || logos.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mt-16 flex flex-wrap items-center justify-center gap-8", logosClassName), children: logos.map((logo, index) => {
-      const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
-      return /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: logoSrc,
-          alt: logo.alt,
-          className: cn("h-8 opacity-50 grayscale", logo.className),
-          optixFlowConfig
-        },
-        index
-      );
-    }) });
-  }, [logosSlot, logos, logosClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -58661,29 +58685,68 @@ function HeroEnterpriseSecurity({
       spacing,
       pattern,
       patternOpacity,
+      patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl text-center", contentClassName), children: [
-          renderBadge,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-6 text-lg md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          renderActions
-        ] }),
-        renderFeatures,
-        renderLogos
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "pt-8 md:pt-0", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto max-w-4xl text-center flex flex-col items-center gap-6",
+              contentClassName
+            ),
+            children: [
+              badge && /* @__PURE__ */ jsxs(Badge, { className: cn("px-4", badgeClassName), children: [
+                badgeIcon,
+                typeof badge === "string" ? /* @__PURE__ */ jsx("span", { children: badge }) : badge
+              ] }),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl font-bold text-balance md:text-7xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "max-w-full md:max-w-[70%] text-lg md:text-xl font-normal text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : description),
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
+            ]
+          }
+        ),
+        renderFeatures
       ] })
     }
   );
 }
 function HeroCreativeStudioStacked({
+  videoAspectRatio = "horizontal",
   tagline,
   heading,
   description,
-  primaryAction,
-  videoButtonLabel = "How it works?",
-  videoUrl = "https://www.youtube.com/embed/your-video-id",
-  videoDialogTitle = "Presentation Video",
-  actionsSlot,
+  videoAction,
+  patternClassName,
+  actions,
+  onVideoClick,
+  videoDialog,
   images,
   imagesSlot,
   background,
@@ -58701,100 +58764,85 @@ function HeroCreativeStudioStacked({
   optixFlowConfig
 }) {
   const [isVideoOpen, setIsVideoOpen] = useState(false);
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!primaryAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = primaryAction;
-    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        Pressable,
-        {
-          href: "#",
-          onClick: () => setIsVideoOpen(true),
-          asButton: true,
-          variant: "ghost",
-          className: "flex h-fit w-fit flex-nowrap items-center gap-2 rounded-sm bg-transparent px-5 py-3.5 text-sm font-medium tracking-wider text-nowrap uppercase",
-          children: [
-            /* @__PURE__ */ jsx(
-              DynamicIcon,
-              {
-                name: "lucide/play",
-                size: 12,
-                className: "fill-neutral-950"
-              }
-            ),
-            /* @__PURE__ */ jsx("p", { children: videoButtonLabel })
-          ]
-        }
-      )
-    ] });
-  }, [actionsSlot, primaryAction, videoButtonLabel, setIsVideoOpen]);
+  const handleVideoClick = () => {
+    if (onVideoClick) {
+      onVideoClick();
+    } else {
+      setIsVideoOpen(true);
+    }
+  };
   const renderImages = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsxs("div", { className: cn("relative mx-auto aspect-[0.789340102/1] max-w-100", imagesClassName), children: [
-      images[0] && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 z-30 w-[63%]", children: /* @__PURE__ */ jsx(
-        AspectRatio,
-        {
-          ratio: 0.724137931 / 1,
-          className: "overflow-hidden",
-          children: /* @__PURE__ */ jsx(
-            Img,
+    const sharedImgWrapperClassName = "overflow-hidden rounded-xl shadow-xl";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative mx-auto aspect-[0.789340102/1] max-w-100",
+          imagesClassName
+        ),
+        children: [
+          images[0] && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 z-30 w-[63%]", children: /* @__PURE__ */ jsx(
+            AspectRatio,
             {
-              src: images[0].src,
-              alt: images[0].alt,
-              className: cn("size-full object-cover object-center", images[0].className),
-              optixFlowConfig
+              ratio: 0.724137931 / 1,
+              className: sharedImgWrapperClassName,
+              children: /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: images[0].src,
+                  alt: images[0].alt,
+                  className: cn(
+                    "size-full object-cover object-center",
+                    images[0].className
+                  ),
+                  optixFlowConfig
+                }
+              )
             }
-          )
-        }
-      ) }),
-      images[1] && /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-1/2 z-20 w-[63%] -translate-x-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx(
-        AspectRatio,
-        {
-          ratio: 0.724137931 / 1,
-          className: "overflow-hidden",
-          children: /* @__PURE__ */ jsx(
-            Img,
+          ) }),
+          images[1] && /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-1/2 z-20 w-[63%] -translate-x-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx(
+            AspectRatio,
             {
-              src: images[1].src,
-              alt: images[1].alt,
-              className: cn("size-full object-cover object-center", images[1].className),
-              optixFlowConfig
+              ratio: 0.724137931 / 1,
+              className: sharedImgWrapperClassName,
+              children: /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: images[1].src,
+                  alt: images[1].alt,
+                  className: cn(
+                    "size-full object-cover object-center",
+                    images[1].className
+                  ),
+                  optixFlowConfig
+                }
+              )
             }
-          )
-        }
-      ) }),
-      images[2] && /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 z-10 w-[63%]", children: /* @__PURE__ */ jsx(
-        AspectRatio,
-        {
-          ratio: 0.724137931 / 1,
-          className: "overflow-hidden",
-          children: /* @__PURE__ */ jsx(
-            Img,
+          ) }),
+          images[2] && /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 z-10 w-[63%]", children: /* @__PURE__ */ jsx(
+            AspectRatio,
             {
-              src: images[2].src,
-              alt: images[2].alt,
-              className: cn("size-full object-cover object-center", images[2].className),
-              optixFlowConfig
+              ratio: 0.724137931 / 1,
+              className: sharedImgWrapperClassName,
+              children: /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: images[2].src,
+                  alt: images[2].alt,
+                  className: cn(
+                    "size-full object-cover object-center",
+                    images[2].className
+                  ),
+                  optixFlowConfig
+                }
+              )
             }
-          )
-        }
-      ) })
-    ] });
+          ) })
+        ]
+      }
+    );
   }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -58804,109 +58852,122 @@ function HeroCreativeStudioStacked({
         spacing,
         pattern,
         patternOpacity,
-        className: cn(className),
-        children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-10 lg:grid-cols-2", children: [
+        patternClassName,
+        className,
+        containerClassName,
+        children: /* @__PURE__ */ jsx("div", { className: "pt-8 md:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-10 lg:grid-cols-2", children: [
           /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6", contentClassName), children: [
-            tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm font-medium tracking-wider uppercase", getTextColor(background, "muted"), taglineClassName), children: tagline }) : /* @__PURE__ */ jsx("div", { className: taglineClassName, children: tagline })),
+            tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "text-sm font-medium tracking-wider uppercase",
+                  taglineClassName
+                ),
+                children: tagline
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: taglineClassName, children: tagline })),
             /* @__PURE__ */ jsxs("div", { className: "flex max-w-160 flex-col gap-6", children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl leading-tight font-medium md:text-5xl xl:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xl text-balance", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "max-w-[920px] text-left text-4xl leading-tight font-semibold md:text-6xl lg:text-7xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "max-w-[750px] text-left text-base leading-relaxed font-normal md:text-xl text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : description)
             ] }),
-            /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-4 py-4", actionsClassName), children: renderActions })
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col md:flex-row flex-wrap gap-4",
+                  actionsClassName
+                ),
+                children: [
+                  videoAction && videoDialog?.videoUrl ? /* @__PURE__ */ jsx(
+                    ActionComponent,
+                    {
+                      action: {
+                        ...videoAction,
+                        onClick: handleVideoClick
+                      }
+                    }
+                  ) : null,
+                  actions?.map((action, index) => /* @__PURE__ */ jsx(ActionComponent, { action }, index))
+                ]
+              }
+            )
           ] }),
           /* @__PURE__ */ jsx("div", { children: renderImages })
         ] }) })
       }
     ),
-    /* @__PURE__ */ jsx(Dialog, { open: isVideoOpen, onOpenChange: setIsVideoOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[800px]", children: [
-      /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: videoDialogTitle }) }),
-      /* @__PURE__ */ jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsx(
-        "iframe",
-        {
-          className: "h-full w-full",
-          src: videoUrl,
-          title: videoDialogTitle,
-          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
-          allowFullScreen: true
-        }
-      ) })
-    ] }) })
-  ] });
-}
-function HeroDigitalAgencyFullscreen({
-  heading,
-  description,
-  actions,
-  actionsSlot,
-  footerLabel,
-  footerSublabel,
-  footerAction,
-  footerSlot,
-  backgroundImage,
-  background,
-  spacing,
-  pattern,
-  patternOpacity,
-  className,
-  containerClassName,
-  contentClassName,
-  headingClassName,
-  descriptionClassName,
-  actionsClassName,
-  footerClassName
-}) {
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mt-8 flex flex-wrap items-center justify-center gap-4", 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,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
-  }, [actionsSlot, actions, actionsClassName]);
-  const renderFooter = useMemo(() => {
-    if (footerSlot) return footerSlot;
-    if (!footerAction) return null;
-    const { className: footerActionClassName, ...footerActionProps } = footerAction;
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between gap-4 rounded-lg bg-foreground/20 px-6 py-4 backdrop-blur-sm", footerClassName), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx("div", { className: cn("h-8 w-1", getAccentColor(background)) }),
-        /* @__PURE__ */ jsxs("div", { className: cn("text-sm font-medium", getTextColor(background, "muted")), children: [
-          footerLabel && (typeof footerLabel === "string" ? /* @__PURE__ */ jsx("p", { className: getAccentColor(background), children: footerLabel }) : footerLabel),
-          footerSublabel && (typeof footerSublabel === "string" ? /* @__PURE__ */ jsx("p", { children: footerSublabel }) : footerSublabel)
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: footerActionClassName,
-          ...footerActionProps,
-          children: /* @__PURE__ */ jsx(
-            DynamicIcon,
+    /* @__PURE__ */ jsx(Dialog, { open: isVideoOpen, onOpenChange: setIsVideoOpen, children: /* @__PURE__ */ jsxs(
+      DialogContent,
+      {
+        className: cn(
+          videoAspectRatio === "vertical" ? "sm:max-w-100" : "sm:max-w-200"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: videoDialog?.title }) }),
+          /* @__PURE__ */ jsx(
+            "div",
             {
-              name: "lucide/arrow-down",
-              size: 20,
-              className: "m-auto stroke-primary"
+              className: videoAspectRatio === "vertical" ? "aspect-9/16" : "aspect-video",
+              children: /* @__PURE__ */ jsx("video", { controls: true, autoPlay: true, className: "h-full w-full rounded-lg", children: /* @__PURE__ */ jsx("source", { src: videoDialog?.videoUrl, type: "video/mp4" }) })
             }
           )
-        }
-      )
-    ] });
-  }, [footerSlot, footerAction, footerLabel, footerSublabel, footerClassName]);
-  return /* @__PURE__ */ jsx(
+        ]
+      }
+    ) })
+  ] });
+}
+function HeroDigitalAgencyFullscreen({
+  heading,
+  description,
+  actions,
+  actionsSlot,
+  backgroundImage,
+  background,
+  pattern,
+  patternOpacity,
+  className,
+  spacing = "py-0 md:py-0",
+  containerClassName = "w-screen max-w-full relative z-10 px-0 min-h-screen h-full",
+  contentClassName,
+  headingClassName,
+  descriptionClassName,
+  actionsClassName,
+  optixFlowConfig
+}) {
+  const [isImageLoaded, setIsImageLoaded] = useState(false);
+  const bgImageRef = useRef(null);
+  useEffect(() => {
+    if (!backgroundImage || !bgImageRef.current) return;
+    const imgEl = bgImageRef.current.querySelector("img");
+    if (!imgEl) return;
+    if (imgEl.complete && imgEl.naturalWidth > 0) {
+      setIsImageLoaded(true);
+      return;
+    }
+    const handleLoad = () => setIsImageLoaded(true);
+    imgEl.addEventListener("load", handleLoad);
+    return () => imgEl.removeEventListener("load", handleLoad);
+  }, [backgroundImage]);
+  return /* @__PURE__ */ jsxs(
     Section,
     {
       background,
@@ -58914,18 +58975,73 @@ function HeroDigitalAgencyFullscreen({
       pattern,
       patternOpacity,
       className: cn(
-        "font-dm_sans dark relative h-svh max-h-[1400px] min-h-[600px] w-full bg-cover bg-center bg-no-repeat after:absolute after:inset-0 after:block after:size-full after:bg-zinc-950/50 after:content-['']",
+        "relative flex h-full min-h-screen w-screen items-center justify-center overflow-hidden pb-0 pt-0 md:pt-0 px-0",
         className
       ),
-      style: { backgroundImage: backgroundImage ? `url('${backgroundImage}')` : void 0 },
-      children: /* @__PURE__ */ jsx("div", { className: cn("relative z-10 mx-auto flex size-full max-w-500 px-4 py-9", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col justify-between gap-10", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mx-auto flex max-w-125 flex-1 flex-col items-center justify-center gap-7 sm:max-w-150 md:max-w-200", contentClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-lg text-balance md:text-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          renderActions
-        ] }),
-        renderFooter
-      ] }) })
+      containerClassName,
+      children: [
+        backgroundImage && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: bgImageRef,
+            className: cn(
+              "absolute inset-0 transition-[filter] duration-1000 ease-out",
+              isImageLoaded ? "blur-0" : "blur-xl"
+            ),
+            children: /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: backgroundImage,
+                alt: "Hero Background Image",
+                className: "h-full w-full brightness-50 object-cover object-center",
+                eager: true,
+                optixFlowConfig
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex min-h-screen min-w-screen h-full w-full flex-col items-center justify-end",
+              contentClassName
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "container flex flex-col gap-6 mb-6 md:mb-24 px-6 md:px-0", children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl font-bold text-balance md:text-7xl",
+                    headingClassName,
+                    backgroundImage ? "text-white text-shadow-2xl" : ""
+                  ),
+                  children: heading
+                }
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "max-w-full md:max-w-[70%] text-lg md:text-xl font-normal text-balance",
+                    descriptionClassName,
+                    backgroundImage ? "text-white text-shadow-2xl" : ""
+                  ),
+                  children: description
+                }
+              ) : description),
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
+            ] })
+          }
+        ) })
+      ]
     }
   );
 }
@@ -58943,7 +59059,7 @@ function HeroCustomerSupportLayered({
   actionsSlot,
   actionsClassName,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-32 md:py-32",
+  spacing = "xl",
   contentClassName,
   taglineClassName,
   headingClassName,
@@ -58994,34 +59110,6 @@ function HeroCustomerSupportLayered({
       }
     );
   }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col md:flex-row gap-4", 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,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
-  }, [actionsSlot, actions, actionsClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -59032,43 +59120,53 @@ function HeroCustomerSupportLayered({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-8 md:gap-20 md:grid-cols-2", children: [
+      children: /* @__PURE__ */ jsx("div", { className: "pt-8 md:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-12 md:gap-20 md:grid-cols-2", children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "flex w-full max-w-125 flex-col gap-9",
+              "flex w-full max-w-125 flex-col gap-4 md:gap-6",
               contentClassName
             ),
             children: [
-              tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsx(Badge, { children: tagline }) : /* @__PURE__ */ jsx("div", { className: taglineClassName, children: tagline })),
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                "h1",
+              tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsx(
+                "div",
                 {
                   className: cn(
-                    "text-5xl md:text-6xl lg:text-7xl font-semibold text-balance leading-snug",
-                    headingClassName
+                    "font-light tracking-widest text-sm md:text-md uppercase",
+                    taglineClassName
                   ),
-                  children: heading
+                  children: tagline
                 }
-              ) : /* @__PURE__ */ jsx(
+              ) : tagline),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
                 "h1",
                 {
                   className: cn(
-                    "text-2xl md:text-3xl lg:text-4xl font-semibold text-balance",
+                    "text-4xl font-semibold text-balance md:text-7xl",
                     headingClassName
                   ),
                   children: heading
                 }
-              )),
+              ) : heading),
               description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                 "p",
                 {
-                  className: cn("leading-normal text-lg", descriptionClassName),
+                  className: cn(
+                    "max-w-full md:max-w-[70%] text-lg md:text-xl font-normal text-balance",
+                    descriptionClassName
+                  ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-              renderActions
+              ) : description),
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
             ]
           }
         ),
@@ -59078,14 +59176,18 @@ function HeroCustomerSupportLayered({
   );
 }
 function HeroSharedInboxLayered({
-  subtitle,
+  eyebrow,
+  eyebrowClassName,
   heading,
   description,
   layeredImages,
   layeredImagesSlot,
   background,
+  actions,
+  actionsSlot,
+  actionsClassName,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-12 md:py-32",
+  spacing = "xl",
   pattern,
   patternOpacity,
   className,
@@ -59145,7 +59247,7 @@ function HeroSharedInboxLayered({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-4 md:gap-20 md:grid-cols-2", children: [
+      children: /* @__PURE__ */ jsx("div", { className: "pt-8 md:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-full md:max-w-125 flex-col gap-4 md:gap-12 items-start", children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -59154,33 +59256,44 @@ function HeroSharedInboxLayered({
               contentClassName
             ),
             children: [
-              subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx(Badge, { children: subtitle }) : subtitle),
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                "h1",
+              eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx(
+                "div",
                 {
                   className: cn(
-                    "text-5xl md:text-6xl lg:text-7xl font-semibold text-balance leading-snug",
-                    headingClassName
+                    "font-light tracking-widest text-sm md:text-md uppercase",
+                    eyebrowClassName
                   ),
-                  children: heading
+                  children: eyebrow
                 }
-              ) : /* @__PURE__ */ jsx(
+              ) : eyebrow),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
                 "h1",
                 {
                   className: cn(
-                    "text-2xl md:text-3xl lg:text-4xl font-semibold text-balance",
+                    "text-4xl font-semibold text-balance md:text-7xl",
                     headingClassName
                   ),
                   children: heading
                 }
-              )),
+              ) : heading),
               description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                 "p",
                 {
-                  className: cn("leading-normal text-lg", descriptionClassName),
+                  className: cn(
+                    "max-w-full md:max-w-[70%] text-lg md:text-xl font-normal text-balance",
+                    descriptionClassName
+                  ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              ) : description),
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
             ]
           }
         ),
@@ -59210,34 +59323,6 @@ function HeroConversationIntelligence({
   imageClassName,
   optixFlowConfig
 }) {
-  const renderActions = useMemo(() => {
-    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;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  }, [actionsSlot, actions]);
   const renderImage = useMemo(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
@@ -59302,14 +59387,12 @@ function HeroConversationIntelligence({
                   children: description
                 }
               ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx(
-                "div",
+              /* @__PURE__ */ jsx(
+                BlockActions,
                 {
-                  className: cn(
-                    "flex flex-col md:flex-row items-center justify-center gap-4",
-                    actionsClassName
-                  ),
-                  children: renderActions
+                  actions,
+                  actionsSlot,
+                  actionsClassName
                 }
               )
             ]
@@ -59320,9 +59403,20 @@ function HeroConversationIntelligence({
     }
   );
 }
+var fadeVariants2 = {
+  initial: { opacity: 0 },
+  animate: {
+    opacity: 1,
+    transition: { duration: 1, ease: [0.4, 0, 0.2, 1] }
+  },
+  exit: {
+    opacity: 0,
+    transition: { duration: 1, ease: [0.4, 0, 0.2, 1] }
+  }
+};
 function HeroBusinessCarouselDots({
   badge,
-  badgeVariant = "outline",
+  badgeVariant,
   heading,
   description,
   actions,
@@ -59333,6 +59427,7 @@ function HeroBusinessCarouselDots({
   spacing,
   pattern,
   patternOpacity,
+  patternClassName,
   className,
   containerClassName,
   contentClassName,
@@ -59343,40 +59438,22 @@ function HeroBusinessCarouselDots({
   carouselClassName,
   optixFlowConfig
 }) {
-  const [api, setApi] = useState();
-  const [current, setCurrent] = useState(0);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const timerRef = useRef(null);
+  const imageCount = carouselImages?.length ?? 0;
+  const startTimer = useCallback(() => {
+    if (imageCount <= 1) return;
+    timerRef.current = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % imageCount);
+    }, 7e3);
+  }, [imageCount]);
   useEffect(() => {
-    if (!api) return;
-    const updateCurrent = () => {
-      setCurrent(api.selectedScrollSnap() + 1);
-    };
-    updateCurrent();
-    api.on("select", updateCurrent);
+    startTimer();
     return () => {
-      api.off("select", updateCurrent);
+      if (timerRef.current) clearInterval(timerRef.current);
     };
-  }, [api]);
-  const renderActions = useMemo(() => {
-    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;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  }, [actionsSlot, actions]);
+  }, [startTimer]);
+  const activeImage = carouselImages && carouselImages.length > 0 ? carouselImages[currentIndex] : null;
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -59384,42 +59461,89 @@ function HeroBusinessCarouselDots({
       spacing,
       pattern,
       patternOpacity,
+      patternClassName,
       className: cn("overflow-hidden", className),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-5xl text-center", contentClassName), children: [
-          badge && /* @__PURE__ */ jsx(Badge, { variant: badgeVariant, className: badgeClassName, children: badge }),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mt-6 text-4xl font-bold md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-5 text-lg md:text-xl lg:px-32", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-8 flex justify-center gap-2", actionsClassName), children: renderActions })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn("relative mx-10 mt-16 hidden md:block", carouselClassName), children: [
-          /* @__PURE__ */ jsx("div", { className: "absolute top-0 -right-20 -left-20 z-10 h-px bg-[linear-gradient(to_right,transparent,hsl(var(--border))_4%,hsl(var(--border))_96%,transparent)]" }),
-          /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 -right-20 -left-20 z-10 h-px bg-[linear-gradient(to_right,transparent,hsl(var(--border))_4%,hsl(var(--border))_96%,transparent)]" }),
-          /* @__PURE__ */ jsx("div", { className: "absolute -top-20 left-0 z-10 h-[calc(100%+160px)] w-px bg-[linear-gradient(to_bottom,transparent,hsl(var(--border))_4%,hsl(var(--border))_96%,transparent)]" }),
-          /* @__PURE__ */ jsx("div", { className: "absolute -top-20 right-0 z-10 h-[calc(100%+160px)] w-px bg-[linear-gradient(to_bottom,transparent,hsl(var(--border))_4%,hsl(var(--border))_96%,transparent)]" }),
-          carouselSlot ? carouselSlot : carouselImages && carouselImages.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            /* @__PURE__ */ jsx(Carousel, { setApi, className: "w-full", children: /* @__PURE__ */ jsx(CarouselContent, { children: carouselImages.map((image, index) => /* @__PURE__ */ jsx(CarouselItem, { children: /* @__PURE__ */ jsx(
-              Img,
-              {
-                src: image.src,
-                alt: image.alt,
-                className: cn("aspect-video w-full rounded-lg object-cover", image.className),
-                optixFlowConfig
-              }
-            ) }, index)) }) }),
-            /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-center gap-2", children: carouselImages.map((_, index) => /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => api?.scrollTo(index),
-                className: cn(
-                  "h-2 w-2 rounded-full transition-colors",
-                  current === index + 1 ? "bg-primary" : getNestedCardBg(background)
-                )
-              },
-              index
-            )) })
-          ] }) : null
-        ] })
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "pt-8 md:pt-0", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto max-w-full md:max-w-5xl text-center flex flex-col items-center px-4",
+              contentClassName
+            ),
+            children: [
+              badge && /* @__PURE__ */ jsx(Badge, { variant: badgeVariant, className: badgeClassName, children: badge }),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "mt-6 text-4xl font-bold md:text-6xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-5 text-lg md:text-xl lg:px-32 text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : description),
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName,
+                  mobileConfig: { width: "full", position: "center" }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative mx-4 mt-18 md:mx-10 md:mt-32",
+              carouselClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "absolute top-0 -right-4 -left-4 z-10 h-px bg-[linear-gradient(to_right,transparent,hsl(var(--border))_4%,hsl(var(--border))_96%,transparent)] md:-right-20 md:-left-20" }),
+              /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 -right-4 -left-4 z-10 h-px bg-[linear-gradient(to_right,transparent,hsl(var(--border))_4%,hsl(var(--border))_96%,transparent)] md:-right-20 md:-left-20" }),
+              /* @__PURE__ */ jsx("div", { className: "absolute -top-10 left-0 z-10 h-[calc(100%+80px)] w-px bg-[linear-gradient(to_bottom,transparent,hsl(var(--border))_4%,hsl(var(--border))_96%,transparent)] md:-top-20 md:h-[calc(100%+160px)]" }),
+              /* @__PURE__ */ jsx("div", { className: "absolute -top-10 right-0 z-10 h-[calc(100%+80px)] w-px bg-[linear-gradient(to_bottom,transparent,hsl(var(--border))_4%,hsl(var(--border))_96%,transparent)] md:-top-20 md:h-[calc(100%+160px)]" }),
+              carouselSlot ? carouselSlot : activeImage ? /* @__PURE__ */ jsx("div", { className: "relative aspect-video w-full overflow-hidden ", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  variants: fadeVariants2,
+                  initial: "initial",
+                  animate: "animate",
+                  exit: "exit",
+                  className: "absolute inset-0",
+                  children: /* @__PURE__ */ jsx(
+                    Img,
+                    {
+                      src: activeImage.src,
+                      alt: activeImage.alt,
+                      className: cn(
+                        "h-full w-full object-cover",
+                        activeImage.className
+                      ),
+                      optixFlowConfig
+                    }
+                  )
+                },
+                currentIndex
+              ) }) }) : null
+            ]
+          }
+        )
       ] })
     }
   );
@@ -59436,70 +59560,66 @@ function HeroDeveloperToolsCode({
   terminalLines,
   terminalSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   descriptionClassName,
   actionsClassName,
+  patternClassName,
   terminalClassName
 }) {
   const renderBadge = useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badgeText && !badgeIcon) return null;
-    return /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "w-fit", children: [
-      badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 14, className: "mr-1" }),
+    return /* @__PURE__ */ jsxs(Badge, { className: "gap-2 px-4 py-1", children: [
+      badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 14 }),
       badgeText
     ] });
   }, [badgeSlot, badgeText, badgeIcon]);
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-4 sm:flex-row", 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,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
-  }, [actionsSlot, actions, actionsClassName]);
   const renderTerminal = useMemo(() => {
     if (terminalSlot) return terminalSlot;
     if (!terminalLines || terminalLines.length === 0) return null;
-    return /* @__PURE__ */ jsxs("div", { className: cn("overflow-hidden rounded-xl border border-border bg-zinc-950 shadow-2xl", terminalClassName), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-zinc-800 bg-zinc-900 px-4 py-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
-          /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-red-500" }),
-          /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-yellow-500" }),
-          /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-green-500" })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex-1 text-center text-sm text-zinc-500", children: terminalTitle })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "p-4 font-mono text-sm", children: [
-        terminalLines.map((line, index) => /* @__PURE__ */ jsxs("div", { className: cn(index > 0 && "mt-1", line.colorClass), children: [
-          line.prefix && /* @__PURE__ */ jsx("span", { className: line.prefixColorClass, children: line.prefix }),
-          " ",
-          line.text
-        ] }, index)),
-        /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-zinc-500", children: "$" }),
-          /* @__PURE__ */ jsx("span", { className: "ml-1 h-4 w-2 animate-pulse bg-zinc-400" })
-        ] })
-      ] })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "overflow-hidden rounded-xl border border-border bg-zinc-950 shadow-2xl",
+          terminalClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-zinc-800 bg-zinc-900 px-4 py-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+              /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-red-500" }),
+              /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-yellow-500" }),
+              /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-green-500" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex-1 text-center text-sm text-zinc-500", children: terminalTitle })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "p-4 font-mono text-sm", children: [
+            terminalLines.map((line, index) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(index > 0 && "mt-1", line.colorClass),
+                children: [
+                  line.prefix && /* @__PURE__ */ jsx("span", { className: line.prefixColorClass, children: line.prefix }),
+                  " ",
+                  line.text
+                ]
+              },
+              index
+            )),
+            /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-zinc-500", children: "$" }),
+              /* @__PURE__ */ jsx("span", { className: "ml-1 h-4 w-2 animate-pulse bg-zinc-400" })
+            ] })
+          ] })
+        ]
+      }
+    );
   }, [terminalSlot, terminalLines, terminalTitle, terminalClassName]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -59508,13 +59628,31 @@ function HeroDeveloperToolsCode({
       spacing,
       pattern,
       patternOpacity,
+      patternClassName,
       className,
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "pt-8 md:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4 md:gap-8", contentClassName), children: [
           renderBadge,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", 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
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-pretty",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : heading),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : description),
+          /* @__PURE__ */ jsx(
+            BlockActions,
+            {
+              actions,
+              actionsSlot,
+              actionsClassName
+            }
+          )
         ] }),
         /* @__PURE__ */ jsx("div", { className: "relative", children: renderTerminal })
       ] }) })
@@ -59535,7 +59673,7 @@ function HeroEcommerceProductShowcase({
   imagesSlot,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-32 md:py-32",
+  spacing = "xl",
   pattern,
   patternOpacity,
   patternClassName,
@@ -59555,51 +59693,54 @@ function HeroEcommerceProductShowcase({
       /* @__PURE__ */ jsx("span", { children: badgeText })
     ] });
   }, [badgeSlot, badgeIcon, badgeText]);
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-4 sm:flex-row", 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,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
-  }, [actionsSlot, actions, actionsClassName]);
   const renderStats = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-6 pt-4", statsClassName), children: stats.map((stat, index) => /* @__PURE__ */ jsxs(React22.Fragment, { children: [
-      index > 0 && /* @__PURE__ */ jsx("div", { className: "h-12 w-px bg-border" }),
-      /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold ", children: stat.value }),
-        /* @__PURE__ */ jsx("div", { className: cn("text-sm"), children: stat.label })
-      ] })
-    ] }, index)) });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row items-center gap-4 md:gap-6 pt-8 md:pt-12",
+          statsClassName
+        ),
+        children: stats.map((stat, index) => /* @__PURE__ */ jsxs(React22.Fragment, { children: [
+          index > 0 && /* @__PURE__ */ jsx("div", { className: "h-12 w-px bg-border hidden md:flex" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 justify-between flex-row md:flex-col text-left md:text-center w-full md:w-fit border md:border-none rounded-xl md:rounded-none p-4 md:p-0", children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex items-center gap-2 w-fit md:w-full",
+                  stat.icon ? "justify-between" : "justify-center"
+                ),
+                children: [
+                  stat.icon,
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "font-bold ",
+                        stat.icon ? "text-xl" : "text-2xl"
+                      ),
+                      children: stat.value
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: cn("text-sm"), children: stat.label })
+          ] })
+        ] }, index))
+      }
+    );
   }, [statsSlot, stats, statsClassName]);
   const renderImages = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-2 gap-4", imagesClassName), children: [
-      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-        images[0] && /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-2xl"), children: /* @__PURE__ */ jsx(
+    const imgClassWrapper = "overflow-hidden rounded-3xl ring-4 ring-primary shadow-2xl";
+    return /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-2 gap-4 md:gap-8", imagesClassName), children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4 md:space-y-8", children: [
+        images[0] && /* @__PURE__ */ jsx("div", { className: imgClassWrapper, children: /* @__PURE__ */ jsx(
           Img,
           {
             src: images[0].src,
@@ -59611,7 +59752,7 @@ function HeroEcommerceProductShowcase({
             optixFlowConfig
           }
         ) }),
-        images[1] && /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-2xl"), children: /* @__PURE__ */ jsx(
+        images[1] && /* @__PURE__ */ jsx("div", { className: imgClassWrapper, children: /* @__PURE__ */ jsx(
           Img,
           {
             src: images[1].src,
@@ -59624,8 +59765,8 @@ function HeroEcommerceProductShowcase({
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-4 pt-8", children: [
-        images[2] && /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-2xl"), children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4 md:space-y-8 pt-12", children: [
+        images[2] && /* @__PURE__ */ jsx("div", { className: imgClassWrapper, children: /* @__PURE__ */ jsx(
           Img,
           {
             src: images[2].src,
@@ -59637,7 +59778,7 @@ function HeroEcommerceProductShowcase({
             optixFlowConfig
           }
         ) }),
-        images[3] && /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-2xl"), children: /* @__PURE__ */ jsx(
+        images[3] && /* @__PURE__ */ jsx("div", { className: imgClassWrapper, children: /* @__PURE__ */ jsx(
           Img,
           {
             src: images[3].src,
@@ -59662,13 +59803,13 @@ function HeroEcommerceProductShowcase({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
-        /* @__PURE__ */ jsx("div", { className: "order-2 lg:order-1", children: renderImages }),
+      children: /* @__PURE__ */ jsx("div", { className: "pt-8 md:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
+        /* @__PURE__ */ jsx("div", { className: "order-2 md:order-1", children: renderImages }),
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "order-1 flex flex-col gap-8 lg:order-2",
+              "flex flex-col gap-4 md:gap-6 order-1 md:order-2",
               contentClassName
             ),
             children: [
@@ -59682,18 +59823,16 @@ function HeroEcommerceProductShowcase({
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsx(
-                "h1",
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : description),
+              /* @__PURE__ */ jsx(
+                BlockActions,
                 {
-                  className: cn(
-                    "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance",
-                    headingClassName
-                  ),
-                  children: heading
+                  actions,
+                  actionsSlot,
+                  actionsClassName
                 }
-              )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-              renderActions,
+              ),
               renderStats
             ]
           }
@@ -59719,7 +59858,7 @@ function HeroMobileAppDownload({
   notificationSlot,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
+  spacing = "xl",
   pattern,
   patternOpacity,
   className,
@@ -59858,7 +59997,7 @@ function HeroMobileAppDownload({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 grid-cols-1 md:grid-cols-2 md:gap-20", children: [
+      children: /* @__PURE__ */ jsx("div", { className: "pt-8 md:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 grid-cols-1 md:grid-cols-2 md:gap-20", children: [
         /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
           renderBadge,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
@@ -59973,11 +60112,12 @@ function HeroPricingComparison({
 function HeroNewsletterMinimal({
   heading,
   description,
-  inputPlaceholder = "Enter your email",
+  inputPlaceholder,
   submitAction,
   formSlot,
-  disclaimer = "Free forever. No spam. Unsubscribe anytime.",
+  disclaimer,
   stats,
+  patternClassName,
   statsSlot,
   background,
   spacing,
@@ -59995,15 +60135,40 @@ function HeroNewsletterMinimal({
   const renderStats = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return stats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 text-sm", getTextColor(background, "muted"), stat.className), children: [
-      stat.icon,
-      /* @__PURE__ */ jsx("span", { children: stat.value })
-    ] }, index));
+    return stats.map((stat, index) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center", stat.className), children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center",
+            stat.icon ? "justify-between" : "justify-center"
+          ),
+          children: [
+            stat.icon,
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn("font-bold ", stat.icon ? "text-xl" : "text-2xl"),
+                children: stat.value
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: cn("text-sm"), children: stat.label })
+    ] }) }, index));
   }, [statsSlot, stats]);
   const renderForm = useMemo(() => {
     if (formSlot) return formSlot;
     if (!submitAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = submitAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = submitAction;
     return /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(
         Input,
@@ -60013,44 +60178,122 @@ function HeroNewsletterMinimal({
           className: cn("h-12 flex-1", inputClassName)
         }
       ),
-      /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
+      /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        icon,
+        label,
+        iconAfter
+      ] }) })
+    ] });
+  }, [formSlot, submitAction, inputPlaceholder, inputClassName]);
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      patternClassName,
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "container flex flex-col items-center justify-center text-center",
+            containerClassName
+          ),
+          children: [
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+              "h1",
+              {
+                className: cn(
+                  "max-w-3xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl text-pretty",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ) : heading),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "mt-6 max-w-full md:max-w-lg text-lg md:text-xl text-balance",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ) : description),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "mt-10 flex w-full max-w-md flex-col gap-4 sm:flex-row",
+                  formClassName
+                ),
+                children: renderForm
+              }
+            ),
+            disclaimer && (typeof disclaimer === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-sm", disclaimerClassName), children: disclaimer }) : disclaimer),
+            (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "mt-16 flex flex-wrap items-center justify-center gap-8",
+                  statsClassName
+                ),
+                children: renderStats
+              }
+            )
+          ]
         }
       )
-    ] });
-  }, [formSlot, submitAction, inputPlaceholder, inputClassName]);
-  return /* @__PURE__ */ jsx(
-    Section,
-    {
-      className: cn(
-        "relative min-h-[80vh] bg-background py-32",
-        className
-      ),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container flex flex-col items-center justify-center text-center", containerClassName), children: [
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("max-w-3xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-6 max-w-xl text-lg md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-        /* @__PURE__ */ jsx("div", { className: cn("mt-10 flex w-full max-w-md flex-col gap-4 sm:flex-row", formClassName), children: renderForm }),
-        disclaimer && (typeof disclaimer === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-sm", getTextColor(background, "muted"), disclaimerClassName), children: disclaimer }) : /* @__PURE__ */ jsx("div", { className: disclaimerClassName, children: disclaimer })),
-        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-16 flex flex-wrap items-center justify-center gap-8", statsClassName), children: renderStats })
-      ] })
     }
   );
 }
+var digitVariants = {
+  initial: { y: -20, opacity: 0 },
+  animate: {
+    y: 0,
+    opacity: 1,
+    transition: { type: "spring", stiffness: 300, damping: 25 }
+  },
+  exit: {
+    y: 20,
+    opacity: 0,
+    transition: { duration: 0.15 }
+  }
+};
+function CountdownDigit({ value, label }) {
+  const display = value.toString().padStart(2, "0");
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex h-16 w-16 items-center justify-center overflow-hidden rounded-xl text-3xl font-bold md:h-24 md:w-24 md:text-5xl"
+        ),
+        children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            variants: digitVariants,
+            initial: "initial",
+            animate: "animate",
+            exit: "exit",
+            children: display
+          },
+          display
+        ) })
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: cn("mt-2 text-sm"), children: label })
+  ] });
+}
 function HeroComingSoonCountdown({
   badgeIcon,
   badgeText,
   heading,
   description,
-  countdownItems,
+  countdownDate,
   countdownSlot,
   emailPlaceholder = "Enter your email",
   submitAction,
@@ -60058,11 +60301,12 @@ function HeroComingSoonCountdown({
   socialLinks,
   socialLinksSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
+  patternClassName,
   className,
-  containerClassName,
   badgeClassName,
   headingClassName,
   descriptionClassName,
@@ -60070,55 +60314,69 @@ function HeroComingSoonCountdown({
   formClassName,
   socialLinksClassName
 }) {
-  const renderCountdown = useMemo(() => {
-    if (countdownSlot) return countdownSlot;
-    if (!countdownItems || countdownItems.length === 0) return null;
-    return countdownItems.map((item) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
-      /* @__PURE__ */ jsx("div", { className: cn(
-        "flex h-16 w-16 items-center justify-center rounded-xl text-3xl font-bold md:h-24 md:w-24 md:text-5xl",
-        getNestedCardBg(background, "muted"),
-        getNestedCardTextColor(background)
-      ), children: item.value }),
-      /* @__PURE__ */ jsx("span", { className: cn("mt-2 text-sm", getTextColor(background, "muted")), children: item.label })
-    ] }, item.label));
-  }, [countdownSlot, countdownItems, background]);
+  const [timeLeft, setTimeLeft] = useState(null);
+  const calculateTimeLeft = useCallback(() => {
+    if (!countdownDate) return null;
+    const now = Date.now();
+    const target = countdownDate.getTime();
+    const diff = target - now;
+    if (diff <= 0) return null;
+    return {
+      days: Math.floor(diff / (1e3 * 60 * 60 * 24)),
+      hours: Math.floor(diff % (1e3 * 60 * 60 * 24) / (1e3 * 60 * 60)),
+      minutes: Math.floor(diff % (1e3 * 60 * 60) / (1e3 * 60)),
+      seconds: Math.floor(diff % (1e3 * 60) / 1e3)
+    };
+  }, [countdownDate]);
+  useEffect(() => {
+    setTimeLeft(calculateTimeLeft());
+    if (!countdownDate) return;
+    const timer = setInterval(() => {
+      const remaining = calculateTimeLeft();
+      setTimeLeft(remaining);
+      if (!remaining) clearInterval(timer);
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [countdownDate, calculateTimeLeft]);
+  const showCountdown = countdownSlot || timeLeft;
   const renderForm = useMemo(() => {
     if (formSlot) return formSlot;
     if (!submitAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = submitAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = submitAction;
     return /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(
         Input,
         {
           type: "email",
           placeholder: emailPlaceholder,
-          className: cn("h-12 flex-1 border-border/50", `${getNestedCardBg(background, "muted")}/30`)
+          className: cn("h-12 flex-1 border-border/50")
         }
       ),
-      /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        }
-      )
+      /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        icon,
+        label,
+        iconAfter
+      ] }) })
     ] });
   }, [formSlot, submitAction, emailPlaceholder]);
   const renderSocialLinks = useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
     return socialLinks.map((link, index) => /* @__PURE__ */ jsx(
-      Pressable,
+      SocialLinkIcon,
       {
         href: link.href,
-        className: cn(getTextColor(background, "muted"), "hover:opacity-80", link.className),
-        children: link.icon ?? (link.iconName && /* @__PURE__ */ jsx(DynamicIcon, { name: link.iconName, size: 20 }))
+        className: cn("hover:opacity-80", link.className),
+        asButton: true,
+        variant: "outline",
+        size: "icon"
       },
       index
     ));
@@ -60126,25 +60384,73 @@ function HeroComingSoonCountdown({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      className: cn(
-        "dark relative min-h-screen bg-background py-32",
-        className
-      ),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container flex flex-col items-center justify-center text-center", containerClassName), children: [
-        (badgeText || badgeIcon) && /* @__PURE__ */ jsxs("div", { className: cn(
-          "inline-flex items-center gap-2 rounded-full border border-border/50 px-4 py-2 text-sm",
-          getNestedCardBg(background, "muted"),
-          getNestedCardTextColor(background),
-          badgeClassName
-        ), children: [
-          badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 16, className: getAccentColor(background) }),
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      patternClassName,
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "pt-8 md:pt-0", children: [
+        (badgeText || badgeIcon) && /* @__PURE__ */ jsxs(Badge, { className: cn("gap-2 px-4 py-2", badgeClassName), children: [
+          badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 16 }),
           /* @__PURE__ */ jsx("span", { children: badgeText })
         ] }),
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mt-8 max-w-3xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("mt-8", headingClassName), children: heading })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-6 max-w-xl text-lg md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-6", descriptionClassName), children: description })),
-        (countdownSlot || countdownItems && countdownItems.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-12 grid grid-cols-4 gap-4 md:gap-8", countdownClassName), children: renderCountdown }),
-        /* @__PURE__ */ jsx("div", { className: cn("mt-12 flex w-full max-w-md flex-col gap-4 sm:flex-row", formClassName), children: renderForm }),
-        (socialLinksSlot || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-16 flex items-center gap-6", socialLinksClassName), children: renderSocialLinks })
+        heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+          "h1",
+          {
+            className: cn(
+              "mt-8 max-w-3xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl text-balance",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) : heading),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "mt-6 max-w-xl text-lg md:text-xl text-balance",
+              descriptionClassName
+            ),
+            children: description
+          }
+        ) : description),
+        showCountdown && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-12 grid grid-cols-4 gap-4 md:gap-8",
+              countdownClassName
+            ),
+            children: countdownSlot ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+              /* @__PURE__ */ jsx(CountdownDigit, { value: timeLeft.days, label: "Days" }),
+              /* @__PURE__ */ jsx(CountdownDigit, { value: timeLeft.hours, label: "Hours" }),
+              /* @__PURE__ */ jsx(CountdownDigit, { value: timeLeft.minutes, label: "Minutes" }),
+              /* @__PURE__ */ jsx(CountdownDigit, { value: timeLeft.seconds, label: "Seconds" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-12 flex w-full max-w-md flex-col gap-4 sm:flex-row",
+              formClassName
+            ),
+            children: renderForm
+          }
+        ),
+        (socialLinksSlot || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-16 flex items-center gap-6",
+              socialLinksClassName
+            ),
+            children: renderSocialLinks
+          }
+        )
       ] })
     }
   );
@@ -60165,8 +60471,8 @@ function HeroEventRegistration({
   locationSublabel,
   locationSlot,
   background,
-  containerClassName = "px-6  sm:px-0 md:px-0 lg:px-0",
-  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
+  containerClassName = "px-6 sm:px-0 md:px-0 lg:px-0",
+  spacing = "xl",
   pattern,
   patternOpacity,
   className,
@@ -60180,18 +60486,51 @@ function HeroEventRegistration({
 }) {
   const renderBadge = useMemo(() => {
     if (badgeSlot) return badgeSlot;
-    return /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "w-fit", children: [
-      badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 14, className: "mr-1" }),
+    return /* @__PURE__ */ jsxs(Badge, { className: "px-4 py-1 gap-2", children: [
+      badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 18 }),
       badgeText
     ] });
   }, [badgeSlot, badgeIcon, badgeText]);
   const renderStats = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-3 gap-4 pt-4", statsClassName), children: stats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold ", children: stat.value }),
-      /* @__PURE__ */ jsx("div", { className: cn("text-sm"), children: stat.label })
-    ] }, index)) });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row items-center gap-4 md:gap-6 pt-8 md:pt-12",
+          statsClassName
+        ),
+        children: stats.map((stat, index) => /* @__PURE__ */ jsxs(React22.Fragment, { children: [
+          index > 0 && /* @__PURE__ */ jsx("div", { className: "h-12 w-px bg-border hidden md:flex" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 justify-between flex-row md:flex-col text-left md:text-center w-full md:w-fit border md:border-none rounded-xl md:rounded-none p-4 md:p-0", children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex items-center gap-2 w-fit md:w-full",
+                  stat.icon ? "justify-between" : "justify-center"
+                ),
+                children: [
+                  stat.icon,
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "font-bold ",
+                        stat.icon ? "text-xl" : "text-2xl"
+                      ),
+                      children: stat.value
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: cn("text-sm"), children: stat.label })
+          ] })
+        ] }, index))
+      }
+    );
   }, [statsSlot, stats, statsClassName]);
   const renderLocation = useMemo(() => {
     if (locationSlot) return locationSlot;
@@ -60237,41 +60576,41 @@ function HeroEventRegistration({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
-          renderBadge,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-            "h1",
-            {
-              className: cn(
-                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl",
-                headingClassName
-              ),
-              children: heading
-            }
-          ) : /* @__PURE__ */ jsx(
-            "h1",
-            {
-              className: cn(
-                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl",
-                headingClassName
+      children: /* @__PURE__ */ jsx("div", { className: "pt-8 md:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col items-start gap-6 md:gap-8",
+              contentClassName
+            ),
+            children: [
+              renderBadge,
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-pretty",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : description),
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
               ),
-              children: heading
-            }
-          )),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          /* @__PURE__ */ jsx(
-            BlockActions,
-            {
-              actions,
-              actionsSlot,
-              actionsClassName
-            }
-          ),
-          renderStats
-        ] }),
+              renderStats
+            ]
+          }
+        ),
         renderImage
-      ] })
+      ] }) })
     }
   );
 }
@@ -83714,7 +84053,7 @@ function ListSearchableGrid({
     }
   );
 }
-var { useMemo: useMemo433 } = React22;
+var { useMemo: useMemo431 } = React22;
 function OfferModalNewsletterDiscount({
   title,
   emailPlaceholder,
@@ -83782,7 +84121,7 @@ function OfferModalNewsletterDiscount({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const dialogProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderCloseButton = useMemo433(() => {
+  const renderCloseButton = useMemo431(() => {
     if (closeButtonSlot) return closeButtonSlot;
     if (!closeButtonText) return null;
     return /* @__PURE__ */ jsx("div", { className: "absolute end-1.5 top-1.5", children: /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -83796,12 +84135,12 @@ function OfferModalNewsletterDiscount({
       }
     ) }) });
   }, [closeButtonSlot, closeButtonText, closeClassName]);
-  const renderHeader = useMemo433(() => {
+  const renderHeader = useMemo431(() => {
     if (headerSlot) return headerSlot;
     if (!title) return null;
     return /* @__PURE__ */ jsx(DialogHeader, { className: headerClassName, children: typeof title === "string" ? /* @__PURE__ */ jsx(DialogTitle, { className: cn("text-start font-serif text-2xl font-normal leading-snug", titleClassName), children: title }) : /* @__PURE__ */ jsx(DialogTitle, { className: cn("text-start font-serif text-2xl font-normal leading-snug", titleClassName), children: title }) });
   }, [headerSlot, title, headerClassName, titleClassName]);
-  const renderForm = useMemo433(() => {
+  const renderForm = useMemo431(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsxs(
       Form,
@@ -83863,7 +84202,7 @@ function OfferModalNewsletterDiscount({
     }
   ) });
 }
-var { useMemo: useMemo434 } = React22;
+var { useMemo: useMemo432 } = React22;
 function OfferModalMembershipImage({
   overline,
   title,
@@ -83940,7 +84279,7 @@ function OfferModalMembershipImage({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const dialogProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderImage = useMemo434(() => {
+  const renderImage = useMemo432(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("max-h-[290px] h-full overflow-hidden max-lg:hidden", imageWrapperClassName), children: /* @__PURE__ */ jsx(
@@ -83953,7 +84292,7 @@ function OfferModalMembershipImage({
       }
     ) });
   }, [imageSlot, image, imageWrapperClassName, imageClassName, optixFlowConfig]);
-  const renderCloseButton = useMemo434(() => {
+  const renderCloseButton = useMemo432(() => {
     if (closeButtonSlot) return closeButtonSlot;
     return /* @__PURE__ */ jsx("div", { className: "absolute -end-px -top-px z-10", children: /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(
       Pressable,
@@ -83969,7 +84308,7 @@ function OfferModalMembershipImage({
       }
     ) }) });
   }, [closeButtonSlot, closeClassName]);
-  const renderForm = useMemo434(() => {
+  const renderForm = useMemo432(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsxs(
       Form,
@@ -84032,7 +84371,7 @@ function OfferModalMembershipImage({
       }
     );
   }, [formSlot, form, formConfig, formMethod, emailPlaceholder, inputClassName, submitClassName, buttonText, formClassName]);
-  const renderFooter = useMemo434(() => {
+  const renderFooter = useMemo432(() => {
     if (footerSlot) return footerSlot;
     if (!description) return null;
     return /* @__PURE__ */ jsx(DialogFooter, { className: footerClassName, children: /* @__PURE__ */ jsx(DialogDescription, { className: cn("text-muted-foreground text-center text-xs leading-relaxed", descriptionClassName), children: description }) });
@@ -84152,7 +84491,7 @@ function SheetDescription({
     }
   );
 }
-var { useMemo: useMemo435 } = React22;
+var { useMemo: useMemo433 } = React22;
 function OfferModalSheetNewsletter({
   logo,
   logoSlot,
@@ -84235,7 +84574,7 @@ function OfferModalSheetNewsletter({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const sheetProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderLogo = useMemo435(() => {
+  const renderLogo = useMemo433(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
@@ -84249,7 +84588,7 @@ function OfferModalSheetNewsletter({
       }
     );
   }, [logoSlot, logo, logoClassName, optixFlowConfig]);
-  const renderHeader = useMemo435(() => {
+  const renderHeader = useMemo433(() => {
     if (headerSlot) return headerSlot;
     return /* @__PURE__ */ jsxs(SheetHeader, { className: cn("gap-8 p-0", headerClassName), children: [
       renderLogo,
@@ -84259,7 +84598,7 @@ function OfferModalSheetNewsletter({
       ] })
     ] });
   }, [headerSlot, renderLogo, headerClassName, title, titleClassName, description, descriptionClassName]);
-  const renderForm = useMemo435(() => {
+  const renderForm = useMemo433(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsx(
       Form,
@@ -84307,7 +84646,7 @@ function OfferModalSheetNewsletter({
       }
     );
   }, [formSlot, form, formConfig, formMethod, emailPlaceholder, inputClassName, submitClassName, buttonText, formClassName]);
-  const renderLegal = useMemo435(() => {
+  const renderLegal = useMemo433(() => {
     if (legalSlot) return legalSlot;
     if (!termsUrl || !termsText || !privacyUrl || !privacyText) return null;
     return /* @__PURE__ */ jsxs("p", { className: cn("text-muted-foreground text-xs", legalClassName), children: [
@@ -84321,7 +84660,7 @@ function OfferModalSheetNewsletter({
       "."
     ] });
   }, [legalSlot, termsUrl, termsText, privacyUrl, privacyText, legalClassName]);
-  const renderImage = useMemo435(() => {
+  const renderImage = useMemo433(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("h-1/2 basis-1/2", imageWrapperClassName), children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1, className: "overflow-hidden", children: /* @__PURE__ */ jsx(