@opensite/ui 2.1.8 → 2.1.9

package/dist/registry.js

@@ -2391,31 +2391,38 @@ var ImageSlider = ({
         perspective: "1000px"
       },
       children: [
-        /* @__PURE__ */ jsx(AnimatePresence$1, { mode: "wait", initial: false, children: activeImage ? /* @__PURE__ */ jsx(
-          motion$1.div,
+        /* @__PURE__ */ jsx(
+          AnimatePresence$1,
           {
-            initial: "initial",
-            animate: "visible",
-            exit: transition === "fade" ? "fadeExit" : direction === "up" ? "upExit" : "downExit",
-            variants: transition === "fade" ? fadeVariants : slideVariants,
-            className: "absolute inset-0",
-            children: /* @__PURE__ */ jsx(
-              Img,
+            mode: transition === "fade" ? "sync" : "wait",
+            initial: false,
+            children: activeImage ? /* @__PURE__ */ jsx(
+              motion$1.div,
               {
-                src: activeImage.src,
-                alt: activeImage.alt,
-                className: cn(
-                  "h-full w-full object-cover object-center",
-                  imageClassName,
-                  activeImage.className
-                ),
-                optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
-                eager: true
-              }
-            )
-          },
-          `${currentIndex}-${activeImage.src ?? "image"}`
-        ) : null }),
+                initial: "initial",
+                animate: "visible",
+                exit: transition === "fade" ? "fadeExit" : direction === "up" ? "upExit" : "downExit",
+                variants: transition === "fade" ? fadeVariants : slideVariants,
+                className: "absolute inset-0",
+                children: /* @__PURE__ */ jsx(
+                  Img,
+                  {
+                    src: activeImage.src,
+                    alt: activeImage.alt,
+                    className: cn(
+                      "h-full w-full object-cover object-center",
+                      imageClassName,
+                      activeImage.className
+                    ),
+                    optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
+                    eager: true
+                  }
+                )
+              },
+              `${currentIndex}-${activeImage.src ?? "image"}`
+            ) : null
+          }
+        ),
         overlayContent,
         children ? /* @__PURE__ */ jsx(
           "div",
@@ -15083,7 +15090,7 @@ var BlurText = ({
             animate: inView ? animateKeyframes : fromSnapshot,
             transition: spanTransition,
             onAnimationComplete: index === elements.length - 1 && inView ? onAnimationComplete : void 0,
-            style: animateBy === "words" ? { marginRight: "0.5em" } : {},
+            style: animateBy === "words" ? { marginRight: "0.25em" } : {},
             children: segment === " " ? "\xA0" : segment
           },
           index
@@ -15223,12 +15230,12 @@ function ContactDemo({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-12 md:gap-32", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-8 md:gap-20", children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "flex flex-col items-center gap-4 md:gap-8 text-center",
+              "flex flex-col items-center gap-4 md:gap-8 text-center max-w-full md:max-w-sm",
               headerClassName
             ),
             children: [
@@ -15238,7 +15245,7 @@ function ContactDemo({
                   as: "h2",
                   text: heading,
                   className: cn(
-                    "text-5xl lg:text-6xl xl:text-7xl font-bold",
+                    "text-5xl lg:text-6xl xl:text-7xl text-pretty font-bold text-left md:text-center",
                     headingClassName
                   ),
                   animateBy: "words",
@@ -15250,7 +15257,7 @@ function ContactDemo({
                 "p",
                 {
                   className: cn(
-                    "leading-relaxed text-balance text-lg",
+                    "leading-relaxed text-balance text-lg text-left md:text-center",
                     descriptionClassName
                   ),
                   children: description
@@ -15437,7 +15444,7 @@ function ContactEmergency({
   successMessageClassName,
   errorMessageClassName,
   spacing = "py-8 md:py-32",
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  containerClassName = "w-full max-w-full relative z-10 px-6 sm:px-6 md:px-8 lg:px-8",
   background,
   pattern,
   patternOpacity,
@@ -15506,7 +15513,7 @@ function ContactEmergency({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx("div", { className: "flex", children: /* @__PURE__ */ jsx("div", { className: cn("p-0 md:p-12"), children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
         Form,
         {
           form,
@@ -15528,9 +15535,9 @@ function ContactEmergency({
             resetUpload();
             resetSubmissionState();
           },
-          children: /* @__PURE__ */ jsxs("div", { className: "grid md:grid-cols-2 gap-12 md:gap-24", children: [
-            /* @__PURE__ */ jsx("div", { className: "border-b border-border/60 p-6 md:border-b-0 md:border-r md:border-border/60", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-8 md:gap-12", children: [
-              /* @__PURE__ */ jsxs(
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "flex", children: /* @__PURE__ */ jsxs("div", { className: cn("p-0 md:p-12"), children: [
+              /* @__PURE__ */ jsx("div", { className: "grid md:grid-cols-2 gap-12 md:gap-24", children: /* @__PURE__ */ jsx("div", { className: "border-b border-border/60 p-6 md:border-b-0 md:border-r md:border-border/60", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col items-start gap-8 md:gap-12", children: /* @__PURE__ */ jsxs(
                 "div",
                 {
                   className: cn(
@@ -15560,26 +15567,29 @@ function ContactEmergency({
                     ) : description)
                   ]
                 }
-              ),
-              contactItems && contactItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 w-full", children: contactItems.map((item, index) => /* @__PURE__ */ jsx(
+              ) }) }) }),
+              contactItems && contactItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 w-full", children: contactItems.map((item, index) => /* @__PURE__ */ jsx(
                 Pressable,
                 {
                   href: item.href,
                   className: cn(
-                    "rounded-lg border p-4 bg-primary text-primary-foreground",
+                    "rounded-md border bg-muted ring-2",
+                    "text-muted-foreground px-4 py-3 flex",
+                    "justify-start items-start transition-shadow",
+                    "duration-500 hover:shadow-xl",
                     item.className
                   ),
-                  children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                    /* @__PURE__ */ jsx(
+                  children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                    item.icon ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-2 rounded-xl border bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(
                       DynamicIcon,
                       {
                         name: item.icon,
-                        size: item.iconSize ?? 28
+                        size: item.iconSize ?? 24
                       }
-                    ),
+                    ) }) : null,
                     /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsx("p", { className: "font-bold", children: item.title }),
-                      /* @__PURE__ */ jsx("p", { className: "text-lg", children: item.subtitle })
+                      /* @__PURE__ */ jsx("p", { className: "font-bold text-xs uppercase opacity-70", children: item.title }),
+                      /* @__PURE__ */ jsx("p", { className: "text-md font-semibold", children: item.subtitle })
                     ] })
                   ] })
                 },
@@ -15620,9 +15630,9 @@ function ContactEmergency({
                 }
               )
             ] }) })
-          ] })
+          ]
         }
-      ) }) }) })
+      ) })
     }
   );
 }
@@ -15969,7 +15979,7 @@ function ContactFaq({
   accordionContentClassName,
   gridClassName,
   background,
-  spacing = "py-8 md:py-32",
+  spacing = "py-16 md:py-32",
   pattern,
   patternOpacity
 }) {
@@ -16045,7 +16055,7 @@ function ContactFaq({
                 "h2",
                 {
                   className: cn(
-                    "mb-3 text-3xl md:text-5xl font-bold tracking-tight text-balance",
+                    "mb-3 text-3xl md:text-5xl font-bold tracking-tight text-pretty",
                     headingClassName
                   ),
                   children: heading
@@ -16055,7 +16065,7 @@ function ContactFaq({
                 "p",
                 {
                   className: cn(
-                    "leading-relaxed text-balance",
+                    "leading-relaxed text-lg text-pretty md:text-balance",
                     descriptionClassName
                   ),
                   children: description
@@ -16824,9 +16834,6 @@ function ContactImage({
   actionsSlot,
   formFields = DEFAULT_FORM_FIELDS15,
   successMessage = "Thank you! Your message has been sent successfully.",
-  className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  headerClassName,
   headingClassName,
   descriptionClassName,
   cardClassName,
@@ -16835,8 +16842,13 @@ function ContactImage({
   submitClassName,
   successMessageClassName,
   errorMessageClassName,
-  background = "white",
-  spacing = "xl",
+  backgroundImage,
+  background,
+  optixFlowConfig,
+  spacing = "none",
+  className,
+  containerClassName = "px-0 sm:px-0 lg:px-0 max-w-full relative z-10 h-screen w-screen flex justify-center items-center",
+  contentClassName = "",
   pattern,
   patternOpacity = 0.1,
   formConfig,
@@ -16894,97 +16906,127 @@ function ContactImage({
     }
     return null;
   }, [actionsSlot, actions]);
-  return /* @__PURE__ */ jsx(
+  const renderBackground = useMemo(() => {
+    if (!backgroundImage) return null;
+    return /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", children: [
+      /* @__PURE__ */ jsx(
+        Img,
+        {
+          src: backgroundImage,
+          alt: "Full screen background image",
+          className: "h-full w-full object-cover",
+          loading: "eager",
+          optixFlowConfig
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-b from-black/80 via-black/65 to-black/20" })
+    ] });
+  }, [backgroundImage, optixFlowConfig]);
+  return /* @__PURE__ */ jsxs(
     Section,
     {
       background,
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12", className),
+      className: cn(
+        "relative flex h-full min-h-screen w-screen items-center justify-center overflow-hidden bg-black pb-0 pt-0 md:pt-0 px-0",
+        className
+      ),
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-4xl", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-            "h2",
-            {
-              className: cn(
-                "mb-3 text-3xl font-bold tracking-tight text-balance",
-                headingClassName
-              ),
-              children: heading
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: cn(
-                "leading-relaxed text-balance",
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-        ] }),
-        /* @__PURE__ */ jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsxs(
-          Form,
+      children: [
+        renderBackground,
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            form,
-            notificationConfig: {
-              submissionError,
-              successMessage
-            },
-            styleConfig: {
-              formClassName: cn("space-y-4", formClassName),
-              successMessageClassName,
-              errorMessageClassName
-            },
-            formConfig: {
-              endpoint: formConfig?.endpoint,
-              method: formMethod,
-              submissionConfig: formConfig?.submissionConfig
-            },
-            onNewSubmission: () => {
-              resetUpload();
-              resetSubmissionState();
-            },
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-12 gap-6", children: formFields.map((field) => /* @__PURE__ */ jsx(
-                "div",
+            className: cn(
+              "flex flex-col gap-4 md:gap-6 px-6 pt-28 pb-6 md:pt-0 md:pb-0",
+              "relative z-30 m-auto max-w-full md:max-w-md flex-col items-center justify-center text-center",
+              contentClassName
+            ),
+            children: /* @__PURE__ */ jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsxs(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h2",
                 {
-                  className: getColumnSpanClass(field.columnSpan),
-                  children: /* @__PURE__ */ jsx(
-                    DynamicFormField,
-                    {
-                      field,
-                      uploadProgress,
-                      onFileUpload: uploadFiles,
-                      onFileRemove: removeFile,
-                      isUploading
-                    }
-                  )
-                },
-                field.name
-              )) }),
-              actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxs(
-                Pressable,
+                  className: cn(
+                    "text-5xl md:text-6xl lg:text-7xl text-card-foreground text-shadow-2xl font-semibold",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
                 {
-                  componentType: "button",
-                  type: "submit",
-                  className: cn("w-full", submitClassName),
-                  size: "lg",
-                  asButton: true,
-                  disabled: form.isSubmitting,
+                  className: cn(
+                    "text-center text-base text-balance text-card-foreground text-shadow-2xl",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : description),
+              /* @__PURE__ */ jsxs(
+                Form,
+                {
+                  form,
+                  notificationConfig: {
+                    submissionError,
+                    successMessage
+                  },
+                  styleConfig: {
+                    formClassName: cn("space-y-4", formClassName),
+                    successMessageClassName,
+                    errorMessageClassName
+                  },
+                  formConfig: {
+                    endpoint: formConfig?.endpoint,
+                    method: formMethod,
+                    submissionConfig: formConfig?.submissionConfig
+                  },
+                  onNewSubmission: () => {
+                    resetUpload();
+                    resetSubmissionState();
+                  },
                   children: [
-                    buttonIcon,
-                    buttonText
+                    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-12 gap-6", children: formFields.map((field) => /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: getColumnSpanClass(field.columnSpan),
+                        children: /* @__PURE__ */ jsx(
+                          DynamicFormField,
+                          {
+                            field,
+                            uploadProgress,
+                            onFileUpload: uploadFiles,
+                            onFileRemove: removeFile,
+                            isUploading
+                          }
+                        )
+                      },
+                      field.name
+                    )) }),
+                    actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxs(
+                      Pressable,
+                      {
+                        componentType: "button",
+                        type: "submit",
+                        className: cn("w-full", submitClassName),
+                        size: "lg",
+                        asButton: true,
+                        disabled: form.isSubmitting,
+                        children: [
+                          buttonIcon,
+                          buttonText
+                        ]
+                      }
+                    )
                   ]
                 }
               )
-            ]
+            ] }) })
           }
-        ) }) })
-      ] })
+        )
+      ]
     }
   );
 }
@@ -24103,57 +24145,53 @@ function CarouselImageHero({
   pattern,
   patternOpacity
 }) {
+  const hasImages = React25.useMemo(() => {
+    return images && images?.length > 0;
+  }, [images]);
   const [currentImageIndex, setCurrentImageIndex] = React25.useState(0);
-  const intervalRef = React25.useRef(null);
-  const goToNext = React25.useCallback(() => {
-    setCurrentImageIndex((prevIndex) => (prevIndex + 1) % (images?.length ?? 1));
-  }, [images?.length]);
-  const resetInterval = React25.useCallback(() => {
-    if (intervalRef.current) {
-      clearInterval(intervalRef.current);
-    }
-    intervalRef.current = setInterval(goToNext, autoPlayInterval);
-  }, [goToNext, autoPlayInterval]);
-  const goToSlide = React25.useCallback((index) => {
-    setCurrentImageIndex(index);
-    resetInterval();
-  }, [resetInterval]);
+  const progress = useMotionValue(100);
+  const clipPath = useMotionTemplate`inset(0 ${progress}% 0 0 round 10px)`;
   React25.useEffect(() => {
-    resetInterval();
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
+    if (!hasImages || (images?.length ?? 0) < 2) return;
+    const tickInterval = autoPlayInterval / 100;
+    const interval = setInterval(() => {
+      const currentProgress = progress.get();
+      if (currentProgress > 0) {
+        progress.set(currentProgress - 1);
+      } else {
+        progress.set(100);
+        setCurrentImageIndex(
+          (prevIndex) => (prevIndex + 1) % (images?.length ?? 1)
+        );
       }
-    };
-  }, [resetInterval]);
-  const renderActions = () => {
-    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
-      );
-    });
-  };
+    }, tickInterval);
+    return () => clearInterval(interval);
+  }, [
+    progress,
+    currentImageIndex,
+    images?.length,
+    autoPlayInterval,
+    hasImages
+  ]);
+  const handlePrev = React25.useCallback(() => {
+    progress.set(100);
+    setCurrentImageIndex(
+      (prevIndex) => prevIndex > 0 ? prevIndex - 1 : (images?.length ?? 1) - 1
+    );
+  }, [images?.length, progress]);
+  const handleNext = React25.useCallback(() => {
+    progress.set(100);
+    setCurrentImageIndex(
+      (prevIndex) => prevIndex < (images?.length ?? 0) - 1 ? prevIndex + 1 : 0
+    );
+  }, [images?.length, progress]);
+  const handleDotClick = React25.useCallback(
+    (index) => {
+      progress.set(100);
+      setCurrentImageIndex(index);
+    },
+    [progress]
+  );
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -24167,8 +24205,8 @@ function CarouselImageHero({
       patternOpacity,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("absolute inset-0", getNestedCardBg(background), imageClassName), children: [
-          images?.map((image, index) => /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs("div", { className: cn("absolute inset-0", imageClassName), children: [
+          !hasImages ? null : images?.map((image, index) => /* @__PURE__ */ jsxs(
             "div",
             {
               className: cn(
@@ -24190,25 +24228,61 @@ function CarouselImageHero({
             },
             index
           )),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs(
             "div",
             {
               className: cn(
-                "absolute bottom-6 left-1/2 z-10 flex -translate-x-1/2 gap-3",
+                "absolute bottom-6 left-1/2 z-10 flex -translate-x-1/2 items-center justify-center gap-5",
                 indicatorsClassName
               ),
-              children: images?.map((_, index) => /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => goToSlide(index),
-                  className: cn(
-                    "flex h-4 w-4 items-center justify-center rounded-full transition-colors",
-                    index === currentImageIndex ? "bg-white" : "bg-white/50 hover:bg-white/80"
-                  ),
-                  "aria-label": `Go to image ${index + 1}`
-                },
-                index
-              ))
+              children: [
+                /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    onClick: handlePrev,
+                    asButton: true,
+                    variant: "ghost",
+                    size: "icon",
+                    className: cn(
+                      "flex size-6 cursor-pointer items-center justify-center rounded-full p-0.5 opacity-80 hover:opacity-100 active:scale-95 bg-white/20 text-white backdrop-blur-sm"
+                    ),
+                    children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 16 })
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-1", children: images?.map((_, index) => /* @__PURE__ */ jsx(
+                  motion.button,
+                  {
+                    initial: false,
+                    onClick: () => handleDotClick(index),
+                    animate: {
+                      width: index === currentImageIndex ? "30px" : "8px"
+                    },
+                    className: "relative flex h-2 cursor-pointer items-center justify-center overflow-hidden rounded-full p-0.5 bg-white/50",
+                    "aria-label": `Go to image ${index + 1}`,
+                    children: currentImageIndex === index && /* @__PURE__ */ jsx(
+                      motion.div,
+                      {
+                        style: { clipPath },
+                        className: "absolute left-0 top-0 h-full w-full origin-left rounded-full bg-white"
+                      }
+                    )
+                  },
+                  index
+                )) }),
+                /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    onClick: handleNext,
+                    asButton: true,
+                    variant: "ghost",
+                    size: "icon",
+                    className: cn(
+                      "flex size-6 cursor-pointer items-center justify-center rounded-full p-0.5 opacity-80 hover:opacity-100 active:scale-95 bg-white/20 text-white backdrop-blur-sm"
+                    ),
+                    children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
+                  }
+                )
+              ]
             }
           )
         ] }),
@@ -24221,44 +24295,41 @@ function CarouselImageHero({
             children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-4xl space-y-6", contentClassName), children: [
               /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
                 badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(
-                  "div",
+                  Badge,
                   {
-                    className: cn(
-                      "inline-flex items-center rounded-full bg-background/10 px-3 py-1 text-sm font-medium backdrop-blur-sm",
-                      badgeClassName
-                    ),
+                    className: cn("px-3 py-1 backdrop-blur-sm", badgeClassName),
                     children: /* @__PURE__ */ jsx("span", { children: badge })
                   }
-                ) : /* @__PURE__ */ jsx("div", { className: badgeClassName, children: badge })),
+                ) : badge),
                 heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
                   "h1",
                   {
                     className: cn(
-                      "text-4xl font-bold sm:text-5xl md:text-6xl text-balance text-shadow",
-                      headingClassName
+                      "text-4xl font-bold sm:text-5xl md:text-6xl text-balance",
+                      headingClassName,
+                      hasImages ? "text-white text-shadow-2xl" : ""
                     ),
                     children: heading
                   }
-                ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+                ) : heading),
                 description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                   "p",
                   {
                     className: cn(
-                      "text-xl text-balance text-shadow",
-                      descriptionClassName
+                      "text-xl text-balance",
+                      descriptionClassName,
+                      hasImages ? "text-white text-shadow-2xl" : ""
                     ),
                     children: description
                   }
-                ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+                ) : description)
               ] }),
-              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx(
-                "div",
+              /* @__PURE__ */ jsx(
+                BlockActions,
                 {
-                  className: cn(
-                    "flex flex-col justify-center gap-4 sm:flex-row",
-                    actionsClassName
-                  ),
-                  children: renderActions()
+                  actions,
+                  actionsSlot,
+                  actionsClassName
                 }
               )
             ] })
@@ -51257,6 +51328,38 @@ function HeroImageLeftContent({
     }
   );
 }
+var DEFAULT_STYLE_RULES3 = {
+  formContainer: "",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: "space-y-4"
+};
+var DEFAULT_FORM_FIELDS42 = [
+  {
+    name: "firstName",
+    type: "text",
+    label: "First name",
+    placeholder: "John",
+    required: true,
+    columnSpan: 12
+  },
+  {
+    name: "lastName",
+    type: "text",
+    label: "Last name",
+    placeholder: "Doe",
+    required: true,
+    columnSpan: 12
+  },
+  {
+    name: "email",
+    type: "email",
+    label: "E-mail",
+    placeholder: "john@example.com",
+    required: true,
+    columnSpan: 12
+  }
+];
 function HeroImageSlider({
   eyebrow,
   heading,
@@ -51271,8 +51374,8 @@ function HeroImageSlider({
   overlay = true,
   overlaySlot,
   background,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-12",
+  spacing = "py-16 md:py-24",
   pattern,
   patternOpacity,
   className,
@@ -51284,8 +51387,35 @@ function HeroImageSlider({
   actionsClassName,
   imageClassName,
   overlayClassName,
-  optixFlowConfig
+  optixFlowConfig,
+  formHeading = "Sign up for updates",
+  buttonText = "Subscribe",
+  buttonIcon,
+  formEngineSetup,
+  cardClassName,
+  cardContentClassName,
+  formHeadingClassName,
+  privacyNotice = "We respect your privacy. Unsubscribe at any time.",
+  privacyNoticeClassName,
+  gridClassName
 }) {
+  const formStyleRules = React25.useMemo(() => {
+    return {
+      formContainer: formEngineSetup?.formLayoutSettings?.styleRules?.formContainer ?? DEFAULT_STYLE_RULES3.formContainer,
+      fieldsContainer: formEngineSetup?.formLayoutSettings?.styleRules?.fieldsContainer ?? DEFAULT_STYLE_RULES3.fieldsContainer,
+      fieldClassName: formEngineSetup?.formLayoutSettings?.styleRules?.fieldClassName ?? DEFAULT_STYLE_RULES3.fieldClassName,
+      formClassName: formEngineSetup?.formLayoutSettings?.styleRules?.formClassName ?? DEFAULT_STYLE_RULES3.formClassName,
+      successMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.successMessageClassName ?? DEFAULT_STYLE_RULES3.successMessageClassName,
+      errorMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.errorMessageClassName ?? DEFAULT_STYLE_RULES3.errorMessageClassName
+    };
+  }, [formEngineSetup?.formLayoutSettings?.styleRules]);
+  const formFields = React25.useMemo(() => {
+    if (formEngineSetup && formEngineSetup?.fields && formEngineSetup?.fields?.length > 0) {
+      return formEngineSetup.fields;
+    } else {
+      return DEFAULT_FORM_FIELDS42;
+    }
+  }, [formEngineSetup?.fields]);
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
@@ -51302,8 +51432,9 @@ function HeroImageSlider({
       return /* @__PURE__ */ jsx(
         Pressable,
         {
-          asButton: asButton ?? true,
-          className: actionClassName,
+          asButton: asButton ?? false,
+          variant: "link",
+          className: cn("text-primary p-0 h-auto", actionClassName),
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
             icon,
@@ -51321,7 +51452,7 @@ function HeroImageSlider({
       "div",
       {
         className: cn(
-          "mx-auto flex max-w-3xl flex-col items-center",
+          "flex flex-col items-start justify-center",
           contentClassName
         ),
         children: [
@@ -51329,7 +51460,7 @@ function HeroImageSlider({
             "p",
             {
               className: cn(
-                "text-xs font-semibold uppercase tracking-[0.3em] text-white",
+                "text-xs font-semibold uppercase tracking-[0.3em] text-white/80",
                 eyebrowClassName
               ),
               children: eyebrow
@@ -51339,27 +51470,27 @@ function HeroImageSlider({
             "h1",
             {
               className: cn(
-                "mt-5 text-4xl font-semibold tracking-tight text-balance md:text-6xl text-white text-shadow-xl",
+                "mt-3 text-3xl font-bold tracking-tight text-balance md:text-4xl lg:text-5xl text-white text-shadow-xl",
                 headingClassName
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading }) : null,
+          ) : /* @__PURE__ */ jsx("div", { className: cn("mt-3", headingClassName), children: heading }) : null,
           description ? typeof description === "string" ? /* @__PURE__ */ jsx(
             "p",
             {
               className: cn(
-                "mt-6 text-base text-white text-balance md:text-lg text-shadow-xl",
+                "mt-4 text-sm text-white/90 text-balance md:text-base max-w-md text-shadow-lg",
                 descriptionClassName
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }) : null,
+          ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }) : null,
           actionsSlot || actions && actions.length > 0 ? /* @__PURE__ */ jsx(
             "div",
             {
               className: cn(
-                "mt-8 flex w-full flex-col items-center justify-center gap-3 sm:flex-row",
+                "mt-6 flex flex-col items-start gap-3 sm:flex-row",
                 actionsClassName
               ),
               children: renderActions
@@ -51382,35 +51513,100 @@ function HeroImageSlider({
     actionsClassName,
     renderActions
   ]);
-  return /* @__PURE__ */ jsx(
+  const hasForm = formEngineSetup !== void 0;
+  return /* @__PURE__ */ jsxs(
     Section,
     {
       background,
       spacing,
       pattern,
       patternOpacity,
-      className: cn("overflow-hidden", className),
+      className: cn("relative overflow-hidden", className),
       containerClassName,
-      children: /* @__PURE__ */ jsx(
-        ImageSlider,
-        {
-          images: images && images.length ? images : [],
-          autoplay,
-          autoplayIntervalMs,
-          direction,
-          transition: "fade",
-          overlay,
-          overlaySlot,
-          overlayClassName,
-          className: cn(
-            "min-h-[520px] md:min-h-[680px] bg-black!",
-            sliderClassName
-          ),
-          imageClassName: cn("scale-[1.02]", imageClassName),
-          optixFlowConfig,
-          children: renderContent
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0", sliderClassName), children: /* @__PURE__ */ jsx(
+          ImageSlider,
+          {
+            images: images && images.length ? images : [],
+            autoplay,
+            autoplayIntervalMs,
+            direction,
+            transition: "fade",
+            overlay,
+            overlaySlot,
+            overlayClassName: cn(
+              "bg-linear-to-r from-black/70 via-black/50 to-black/30",
+              overlayClassName
+            ),
+            className: "min-h-full w-full rounded-none border-none shadow-none",
+            imageClassName: cn("scale-[1.02]", imageClassName),
+            optixFlowConfig
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative z-20 grid min-h-[500px] md:min-h-[600px] gap-8 lg:gap-12 grid-cols-1",
+              hasForm ? "lg:grid-cols-2" : "lg:grid-cols-1",
+              gridClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex items-center", children: renderContent }),
+              hasForm && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center lg:justify-end", children: /* @__PURE__ */ jsx(
+                Card,
+                {
+                  className: cn(
+                    "w-full max-w-sm bg-card/95 backdrop-blur-sm shadow-2xl",
+                    cardClassName
+                  ),
+                  children: /* @__PURE__ */ jsxs(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: [
+                    formHeading && (typeof formHeading === "string" ? /* @__PURE__ */ jsx(
+                      "h3",
+                      {
+                        className: cn(
+                          "mb-6 text-xl font-semibold",
+                          formHeadingClassName
+                        ),
+                        children: formHeading
+                      }
+                    ) : /* @__PURE__ */ jsx("div", { className: cn("mb-6", formHeadingClassName), children: formHeading })),
+                    /* @__PURE__ */ jsx(
+                      FormEngine,
+                      {
+                        ...formEngineSetup,
+                        formLayoutSettings: {
+                          ...formEngineSetup?.formLayoutSettings,
+                          formLayout: "standard",
+                          submitButtonSetup: {
+                            ...formEngineSetup?.formLayoutSettings?.submitButtonSetup,
+                            submitLabel: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                              buttonIcon,
+                              buttonText
+                            ] })
+                          },
+                          styleRules: formStyleRules
+                        },
+                        fields: formFields
+                      }
+                    ),
+                    privacyNotice && /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: cn(
+                          "mt-4 text-xs text-muted-foreground text-center",
+                          privacyNoticeClassName
+                        ),
+                        children: privacyNotice
+                      }
+                    )
+                  ] })
+                }
+              ) })
+            ]
+          }
+        )
+      ]
     }
   );
 }
@@ -56921,7 +57117,7 @@ function HeroHiringAnimatedText({
     }
   );
 }
-var DEFAULT_FORM_FIELDS42 = [
+var DEFAULT_FORM_FIELDS43 = [
   {
     name: "email",
     type: "email",
@@ -56934,7 +57130,7 @@ var DEFAULT_FORM_FIELDS42 = [
 function HeroSplitImageNewsletter({
   heading,
   description,
-  formFields = DEFAULT_FORM_FIELDS42,
+  formFields = DEFAULT_FORM_FIELDS43,
   formConfig,
   onSubmit,
   onSuccess,
@@ -58425,7 +58621,7 @@ function HeroProductShowcaseFloating({
     }
   );
 }
-var DEFAULT_FORM_FIELDS43 = [
+var DEFAULT_FORM_FIELDS44 = [
   {
     name: "email",
     type: "email",
@@ -58441,7 +58637,7 @@ function HeroSaasDashboardPreview({
   badgeSlot,
   heading,
   description,
-  formFields = DEFAULT_FORM_FIELDS43,
+  formFields = DEFAULT_FORM_FIELDS44,
   formConfig,
   onSubmit,
   onSuccess,
@@ -61230,13 +61426,13 @@ function HeroPricingComparison({
     }
   );
 }
-var DEFAULT_STYLE_RULES3 = {
+var DEFAULT_STYLE_RULES4 = {
   formContainer: "mt-10 flex justify-center items-center w-full max-w-md flex-col gap-4 sm:flex-row",
   fieldsContainer: "",
   fieldClassName: "",
   formClassName: ""
 };
-var DEFAULT_FORM_FIELDS44 = [
+var DEFAULT_FORM_FIELDS45 = [
   {
     name: "email",
     type: "email",
@@ -61270,19 +61466,19 @@ function HeroNewsletterMinimal({
 }) {
   const formStyleRules = React25.useMemo(() => {
     return {
-      formContainer: formEngineSetup?.formLayoutSettings?.styleRules?.formContainer ?? DEFAULT_STYLE_RULES3.formContainer,
-      fieldsContainer: formEngineSetup?.formLayoutSettings?.styleRules?.fieldsContainer ?? DEFAULT_STYLE_RULES3.fieldsContainer,
-      fieldClassName: formEngineSetup?.formLayoutSettings?.styleRules?.fieldClassName ?? DEFAULT_STYLE_RULES3.fieldClassName,
-      formClassName: formEngineSetup?.formLayoutSettings?.styleRules?.formClassName ?? DEFAULT_STYLE_RULES3.formClassName,
-      successMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.successMessageClassName ?? DEFAULT_STYLE_RULES3.successMessageClassName,
-      errorMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.errorMessageClassName ?? DEFAULT_STYLE_RULES3.errorMessageClassName
+      formContainer: formEngineSetup?.formLayoutSettings?.styleRules?.formContainer ?? DEFAULT_STYLE_RULES4.formContainer,
+      fieldsContainer: formEngineSetup?.formLayoutSettings?.styleRules?.fieldsContainer ?? DEFAULT_STYLE_RULES4.fieldsContainer,
+      fieldClassName: formEngineSetup?.formLayoutSettings?.styleRules?.fieldClassName ?? DEFAULT_STYLE_RULES4.fieldClassName,
+      formClassName: formEngineSetup?.formLayoutSettings?.styleRules?.formClassName ?? DEFAULT_STYLE_RULES4.formClassName,
+      successMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.successMessageClassName ?? DEFAULT_STYLE_RULES4.successMessageClassName,
+      errorMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.errorMessageClassName ?? DEFAULT_STYLE_RULES4.errorMessageClassName
     };
   }, [formEngineSetup?.formLayoutSettings?.styleRules]);
   const formFields = React25.useMemo(() => {
     if (formEngineSetup && formEngineSetup?.fields && formEngineSetup?.fields?.length > 0) {
       return formEngineSetup.fields;
     } else {
-      return DEFAULT_FORM_FIELDS44;
+      return DEFAULT_FORM_FIELDS45;
     }
   }, [formEngineSetup?.fields]);
   const renderStats = React25.useMemo(() => {
@@ -61398,7 +61594,7 @@ function HeroNewsletterMinimal({
     }
   );
 }
-var DEFAULT_FORM_FIELDS45 = [
+var DEFAULT_FORM_FIELDS46 = [
   {
     name: "email",
     type: "email",
@@ -61453,7 +61649,7 @@ function HeroComingSoonCountdown({
   description,
   countdownDate,
   countdownSlot,
-  formFields = DEFAULT_FORM_FIELDS45,
+  formFields = DEFAULT_FORM_FIELDS46,
   formConfig,
   onSubmit,
   onSuccess,
@@ -85282,7 +85478,7 @@ function ListSearchableGrid({
     }
   );
 }
-var { useMemo: useMemo443 } = React25;
+var { useMemo: useMemo445 } = React25;
 function OfferModalNewsletterDiscount({
   title,
   emailPlaceholder,
@@ -85350,7 +85546,7 @@ function OfferModalNewsletterDiscount({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const dialogProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderCloseButton = useMemo443(() => {
+  const renderCloseButton = useMemo445(() => {
     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(
@@ -85364,12 +85560,12 @@ function OfferModalNewsletterDiscount({
       }
     ) }) });
   }, [closeButtonSlot, closeButtonText, closeClassName]);
-  const renderHeader = useMemo443(() => {
+  const renderHeader = useMemo445(() => {
     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 = useMemo443(() => {
+  const renderForm = useMemo445(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsxs(
       Form,
@@ -85431,7 +85627,7 @@ function OfferModalNewsletterDiscount({
     }
   ) });
 }
-var { useMemo: useMemo444 } = React25;
+var { useMemo: useMemo446 } = React25;
 function OfferModalMembershipImage({
   overline,
   title,
@@ -85508,7 +85704,7 @@ function OfferModalMembershipImage({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const dialogProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderImage = useMemo444(() => {
+  const renderImage = useMemo446(() => {
     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(
@@ -85521,7 +85717,7 @@ function OfferModalMembershipImage({
       }
     ) });
   }, [imageSlot, image, imageWrapperClassName, imageClassName, optixFlowConfig]);
-  const renderCloseButton = useMemo444(() => {
+  const renderCloseButton = useMemo446(() => {
     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,
@@ -85537,7 +85733,7 @@ function OfferModalMembershipImage({
       }
     ) }) });
   }, [closeButtonSlot, closeClassName]);
-  const renderForm = useMemo444(() => {
+  const renderForm = useMemo446(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsxs(
       Form,
@@ -85600,7 +85796,7 @@ function OfferModalMembershipImage({
       }
     );
   }, [formSlot, form, formConfig, formMethod, emailPlaceholder, inputClassName, submitClassName, buttonText, formClassName]);
-  const renderFooter = useMemo444(() => {
+  const renderFooter = useMemo446(() => {
     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 }) });
@@ -85720,7 +85916,7 @@ function SheetDescription({
     }
   );
 }
-var { useMemo: useMemo445 } = React25;
+var { useMemo: useMemo447 } = React25;
 function OfferModalSheetNewsletter({
   logo,
   logoSlot,
@@ -85803,7 +85999,7 @@ function OfferModalSheetNewsletter({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const sheetProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderLogo = useMemo445(() => {
+  const renderLogo = useMemo447(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
@@ -85817,7 +86013,7 @@ function OfferModalSheetNewsletter({
       }
     );
   }, [logoSlot, logo, logoClassName, optixFlowConfig]);
-  const renderHeader = useMemo445(() => {
+  const renderHeader = useMemo447(() => {
     if (headerSlot) return headerSlot;
     return /* @__PURE__ */ jsxs(SheetHeader, { className: cn("gap-8 p-0", headerClassName), children: [
       renderLogo,
@@ -85827,7 +86023,7 @@ function OfferModalSheetNewsletter({
       ] })
     ] });
   }, [headerSlot, renderLogo, headerClassName, title, titleClassName, description, descriptionClassName]);
-  const renderForm = useMemo445(() => {
+  const renderForm = useMemo447(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsx(
       Form,
@@ -85875,7 +86071,7 @@ function OfferModalSheetNewsletter({
       }
     );
   }, [formSlot, form, formConfig, formMethod, emailPlaceholder, inputClassName, submitClassName, buttonText, formClassName]);
-  const renderLegal = useMemo445(() => {
+  const renderLegal = useMemo447(() => {
     if (legalSlot) return legalSlot;
     if (!termsUrl || !termsText || !privacyUrl || !privacyText) return null;
     return /* @__PURE__ */ jsxs("p", { className: cn("text-muted-foreground text-xs", legalClassName), children: [
@@ -85889,7 +86085,7 @@ function OfferModalSheetNewsletter({
       "."
     ] });
   }, [legalSlot, termsUrl, termsText, privacyUrl, privacyText, legalClassName]);
-  const renderImage = useMemo445(() => {
+  const renderImage = useMemo447(() => {
     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(