@opensite/ui 2.0.8 → 2.1.0

package/dist/registry.js

@@ -55833,15 +55833,13 @@ function HeroHiringAnimatedText({
   description,
   actions,
   actionsSlot,
-  scrollAction,
-  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,
@@ -55889,51 +55887,6 @@ function HeroHiringAnimatedText({
     headingClassName,
     activeIndex
   ]);
-  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]);
-  const renderScrollAction = useMemo(() => {
-    if (scrollActionSlot) return scrollActionSlot;
-    if (!scrollAction) return null;
-    const {
-      label,
-      icon,
-      iconAfter,
-      children,
-      className: actionClassName,
-      ...pressableProps
-    } = scrollAction;
-    return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      icon,
-      /* @__PURE__ */ jsx("div", { children: label }),
-      iconAfter
-    ] }) });
-  }, [scrollActionSlot, scrollAction]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -55956,7 +55909,7 @@ function HeroHiringAnimatedText({
           ),
           children: [
             renderHeading,
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center md:items-start flex-col gap-8", children: [
               description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                 "p",
                 {
@@ -55967,10 +55920,15 @@ function HeroHiringAnimatedText({
                   children: description
                 }
               ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [
-                renderActions,
-                renderScrollAction
-              ] })
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName,
+                  mobileConfig: { width: "full", position: "center" }
+                }
+              )
             ] })
           ]
         }
@@ -55978,11 +55936,28 @@ function HeroHiringAnimatedText({
     }
   );
 }
+var DEFAULT_FORM_FIELDS41 = [
+  {
+    name: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "Enter your email",
+    required: true,
+    columnSpan: 12
+  }
+];
 function HeroSplitImageNewsletter({
   heading,
   description,
-  newsletterForm,
-  newsletterFormSlot,
+  formFields = DEFAULT_FORM_FIELDS41,
+  formConfig,
+  onSubmit,
+  onSuccess,
+  onError,
+  successMessage,
+  buttonAction,
+  helperText,
+  formSlot,
   image,
   imageSlot,
   background,
@@ -55997,36 +55972,75 @@ function HeroSplitImageNewsletter({
   imageClassName,
   optixFlowConfig
 }) {
-  const renderNewsletterForm = useMemo(() => {
-    if (newsletterFormSlot) return newsletterFormSlot;
-    if (!newsletterForm) return null;
-    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row", children: [
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            type: "email",
-            placeholder: newsletterForm.placeholder,
-            className: "h-12 flex-1 rounded-full px-6"
-          }
-        ),
-        newsletterForm.action && /* @__PURE__ */ jsxs(
-          Pressable,
-          {
-            href: newsletterForm.action.href,
-            asButton: true,
-            variant: newsletterForm.action.variant,
-            className: newsletterForm.action.className,
-            children: [
-              newsletterForm.action.label,
-              newsletterForm.action.iconAfter
-            ]
-          }
-        )
-      ] }),
-      newsletterForm.helperText && (typeof newsletterForm.helperText === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm"), children: newsletterForm.helperText }) : newsletterForm.helperText)
-    ] });
-  }, [newsletterFormSlot, newsletterForm]);
+  const { uploadTokens, uploadProgress, isUploading, uploadFiles, removeFile, resetUpload } = useFileUpload({ onError });
+  const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
+    formFields,
+    formConfig,
+    onSubmit,
+    onSuccess: (data) => {
+      resetUpload();
+      onSuccess?.(data);
+    },
+    onError,
+    uploadTokens
+  });
+  const renderForm = useMemo(() => {
+    if (formSlot) return formSlot;
+    const defaultButtonAction = {
+      label: "Subscribe",
+      variant: "default",
+      className: "h-12"
+    };
+    const action = buttonAction || defaultButtonAction;
+    return /* @__PURE__ */ jsxs(
+      Form,
+      {
+        form,
+        notificationConfig: {
+          submissionError,
+          successMessage
+        },
+        formConfig: {
+          endpoint: formConfig?.endpoint,
+          method: formMethod,
+          submissionConfig: formConfig?.submissionConfig
+        },
+        onNewSubmission: () => {
+          resetUpload();
+          resetSubmissionState();
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row", children: [
+            formFields.map((field) => /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+              DynamicFormField,
+              {
+                field,
+                uploadProgress,
+                onFileUpload: uploadFiles,
+                onFileRemove: removeFile,
+                isUploading
+              }
+            ) }, field.name)),
+            /* @__PURE__ */ jsxs(
+              Pressable,
+              {
+                onClick: form.handleSubmit,
+                asButton: true,
+                variant: action.variant,
+                className: cn("h-12", action.className),
+                disabled: form.isSubmitting,
+                children: [
+                  action.label,
+                  action.iconAfter
+                ]
+              }
+            )
+          ] }),
+          helperText && (typeof helperText === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm mt-2"), children: helperText }) : helperText)
+        ]
+      }
+    );
+  }, [formSlot, formFields, form, formConfig, formMethod, buttonAction, uploadProgress, uploadFiles, removeFile, isUploading, submissionError, successMessage, helperText, resetUpload, resetSubmissionState]);
   const renderImage = useMemo(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
@@ -56091,7 +56105,7 @@ function HeroSplitImageNewsletter({
                   children: description
                 }
               ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-              renderNewsletterForm
+              renderForm
             ]
           }
         ),
@@ -57397,14 +57411,31 @@ function HeroProductShowcaseFloating({
     }
   );
 }
+var DEFAULT_FORM_FIELDS42 = [
+  {
+    name: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "Enter your email",
+    required: true,
+    columnSpan: 12
+  }
+];
 function HeroSaasDashboardPreview({
   badgeText,
   badgeIcon,
   badgeSlot,
   heading,
   description,
-  emailForm,
-  emailFormSlot,
+  formFields = DEFAULT_FORM_FIELDS42,
+  formConfig,
+  onSubmit,
+  onSuccess,
+  onError,
+  successMessage,
+  buttonAction,
+  helperText,
+  formSlot,
   browserPreview,
   browserPreviewSlot,
   background,
@@ -57419,6 +57450,18 @@ function HeroSaasDashboardPreview({
   previewClassName,
   optixFlowConfig
 }) {
+  const { uploadTokens, uploadProgress, isUploading, uploadFiles, removeFile, resetUpload } = useFileUpload({ onError });
+  const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
+    formFields,
+    formConfig,
+    onSubmit,
+    onSuccess: (data) => {
+      resetUpload();
+      onSuccess?.(data);
+    },
+    onError,
+    uploadTokens
+  });
   const renderBadge = useMemo(() => {
     if (badgeSlot) return badgeSlot;
     return /* @__PURE__ */ jsxs(
@@ -57434,33 +57477,60 @@ function HeroSaasDashboardPreview({
       }
     );
   }, [badgeSlot, badgeIcon, badgeText]);
-  const renderEmailForm = useMemo(() => {
-    if (emailFormSlot) return emailFormSlot;
-    if (!emailForm) return null;
-    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx("div", { className: "mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-md items-center gap-2", children: [
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            type: "email",
-            placeholder: emailForm.placeholder,
-            className: "h-12 flex-1"
-          }
-        ),
-        emailForm.action && /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            href: emailForm.action.href,
-            asButton: true,
-            variant: emailForm.action.variant,
-            className: emailForm.action.className,
-            children: emailForm.action.label
-          }
-        )
-      ] }) }),
-      emailForm.helperText && (typeof emailForm.helperText === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-sm", children: emailForm.helperText }) : emailForm.helperText)
-    ] });
-  }, [emailFormSlot, emailForm]);
+  const renderForm = useMemo(() => {
+    if (formSlot) return formSlot;
+    const defaultButtonAction = {
+      label: "Start Free Trial",
+      variant: "default",
+      className: "h-12"
+    };
+    const action = buttonAction || defaultButtonAction;
+    return /* @__PURE__ */ jsxs(
+      Form,
+      {
+        form,
+        notificationConfig: {
+          submissionError,
+          successMessage
+        },
+        formConfig: {
+          endpoint: formConfig?.endpoint,
+          method: formMethod,
+          submissionConfig: formConfig?.submissionConfig
+        },
+        onNewSubmission: () => {
+          resetUpload();
+          resetSubmissionState();
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-md items-center gap-2", children: [
+            formFields.map((field) => /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+              DynamicFormField,
+              {
+                field,
+                uploadProgress,
+                onFileUpload: uploadFiles,
+                onFileRemove: removeFile,
+                isUploading
+              }
+            ) }, field.name)),
+            /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                onClick: form.handleSubmit,
+                asButton: true,
+                variant: action.variant,
+                className: cn("h-12", action.className),
+                disabled: form.isSubmitting,
+                children: action.label
+              }
+            )
+          ] }) }),
+          helperText && (typeof helperText === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm text-center mt-4"), children: helperText }) : helperText)
+        ]
+      }
+    );
+  }, [formSlot, formFields, form, formConfig, formMethod, buttonAction, uploadProgress, uploadFiles, removeFile, isUploading, submissionError, successMessage, helperText, resetUpload, resetSubmissionState]);
   const renderBrowserPreview = useMemo(() => {
     if (browserPreviewSlot) return browserPreviewSlot;
     if (!browserPreview) return null;
@@ -57544,7 +57614,7 @@ function HeroSaasDashboardPreview({
               children: description
             }
           ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          renderEmailForm
+          renderForm
         ] }),
         renderBrowserPreview
       ] })
@@ -58304,12 +58374,12 @@ function HeroAgencyAnimatedImages({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: "pt-10 md:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-1 items-center justify-between gap-14 lg:grid-cols-2", children: [
+      children: /* @__PURE__ */ jsx("div", { className: "pt-10 md:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "grid w-full gap-12 md:gap-20 grid-cols-1 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",
+              "flex w-full flex-col gap-4 items-start",
               contentClassName
             ),
             children: [
@@ -58317,12 +58387,12 @@ function HeroAgencyAnimatedImages({
                 "h1",
                 {
                   className: cn(
-                    "text-5xl md:text-6xl lg:text-7xl xl:text-[5rem] text-left text-pretty",
+                    "text-4xl md:text-5xl lg:text-7xl xl:text-[5rem] font-bold text-left text-pretty",
                     headingClassName
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              ) : heading),
               description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                 "p",
                 {
@@ -58556,7 +58626,7 @@ function HeroStartupLaunchCta({
             "h1",
             {
               className: cn(
-                "mb-8 text-4xl font-normal text-balance md:text-7xl",
+                "text-4xl font-normal text-balance md:text-7xl",
                 headingClassName
               ),
               children: heading
@@ -58566,7 +58636,7 @@ function HeroStartupLaunchCta({
             "p",
             {
               className: cn(
-                "mb-12 max-w-full md:max-w-[70%] text-lg md:text-xl font-normal text-balance",
+                "max-w-full md:max-w-[70%] text-lg md:text-xl font-normal text-balance",
                 descriptionClassName
               ),
               children: description
@@ -58645,35 +58715,47 @@ function HeroEnterpriseSecurity({
   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(
-      Pressable,
+    return /* @__PURE__ */ jsx(
+      "div",
       {
-        href: feature.href,
-        className: cn("rounded-2xl border border-border p-6 text-center"),
-        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,
+        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",
                 {
-                  name: feature.iconName || "lucide/check",
-                  size: 24,
-                  className: feature.iconColorClass
+                  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
-    )) });
+              ),
+              /* @__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]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -58686,40 +58768,49 @@ function HeroEnterpriseSecurity({
       className,
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "pt-8 md:pt-0", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl text-center", 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(
-                "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-full md:max-w-[70%] text-lg md:text-xl font-normal text-balance",
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : description),
-          /* @__PURE__ */ jsx(
-            BlockActions,
-            {
-              actions,
-              actionsSlot,
-              actionsClassName
-            }
-          )
-        ] }),
+        /* @__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
       ] })
     }
@@ -58731,17 +58822,18 @@ function HeroCreativeStudioStacked({
   heading,
   description,
   videoAction,
+  patternClassName,
   actions,
   onVideoClick,
   videoDialog,
   images,
   imagesSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   contentClassName,
   taglineClassName,
   headingClassName,
@@ -58839,8 +58931,10 @@ 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",
@@ -58857,7 +58951,7 @@ function HeroCreativeStudioStacked({
                 "h1",
                 {
                   className: cn(
-                    "max-w-[920px] text-center text-4xl leading-tight font-semibold md:text-6xl lg:text-7xl text-balance",
+                    "max-w-[920px] text-left text-4xl leading-tight font-semibold md:text-6xl lg:text-7xl text-balance",
                     headingClassName
                   ),
                   children: heading
@@ -58867,7 +58961,7 @@ function HeroCreativeStudioStacked({
                 "p",
                 {
                   className: cn(
-                    "max-w-[750px] text-center text-base leading-relaxed font-normal md:text-xl text-balance",
+                    "max-w-[750px] text-left text-base leading-relaxed font-normal md:text-xl text-balance",
                     descriptionClassName
                   ),
                   children: description
@@ -58927,11 +59021,11 @@ function HeroDigitalAgencyFullscreen({
   actionsSlot,
   backgroundImage,
   background,
-  spacing = "none",
   pattern,
   patternOpacity,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  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,
@@ -58977,7 +59071,7 @@ function HeroDigitalAgencyFullscreen({
               Img,
               {
                 src: backgroundImage,
-                alt: "",
+                alt: "Hero Background Image",
                 className: "h-full w-full brightness-50 object-cover object-center",
                 eager: true,
                 optixFlowConfig
@@ -58985,20 +59079,21 @@ function HeroDigitalAgencyFullscreen({
             )
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col justify-between gap-10", children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
           "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",
+              "flex min-h-screen h-full w-full flex-col items-center justify-end",
               contentClassName
             ),
-            children: [
+            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(
-                    "mb-8 text-4xl font-normal text-balance md:text-7xl",
-                    headingClassName
+                    "text-4xl font-bold text-balance md:text-7xl",
+                    headingClassName,
+                    backgroundImage ? "text-white text-shadow-2xl" : ""
                   ),
                   children: heading
                 }
@@ -59007,8 +59102,9 @@ function HeroDigitalAgencyFullscreen({
                 "p",
                 {
                   className: cn(
-                    "mb-12 max-w-full md:max-w-[70%] text-lg md:text-xl font-normal text-balance",
-                    descriptionClassName
+                    "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
                 }
@@ -59021,9 +59117,9 @@ function HeroDigitalAgencyFullscreen({
                   actionsClassName
                 }
               )
-            ]
+            ] })
           }
-        ) }) })
+        ) })
       ]
     }
   );
@@ -59103,7 +59199,7 @@ function HeroCustomerSupportLayered({
       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-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",
           {
@@ -59390,11 +59486,11 @@ var fadeVariants2 = {
   initial: { opacity: 0 },
   animate: {
     opacity: 1,
-    transition: { duration: 0.8, ease: [0.4, 0, 0.2, 1] }
+    transition: { duration: 1, ease: [0.4, 0, 0.2, 1] }
   },
   exit: {
     opacity: 0,
-    transition: { duration: 0.8, ease: [0.4, 0, 0.2, 1] }
+    transition: { duration: 1, ease: [0.4, 0, 0.2, 1] }
   }
 };
 function HeroBusinessCarouselDots({
@@ -59428,7 +59524,7 @@ function HeroBusinessCarouselDots({
     if (imageCount <= 1) return;
     timerRef.current = setInterval(() => {
       setCurrentIndex((prev) => (prev + 1) % imageCount);
-    }, 4e3);
+    }, 7e3);
   }, [imageCount]);
   useEffect(() => {
     startTimer();
@@ -59448,42 +59544,52 @@ function HeroBusinessCarouselDots({
       className: cn("overflow-hidden", className),
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "pt-8 md:pt-0", 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 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
-            }
-          )
-        ] }),
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "relative mx-4 mt-10 md:mx-10 md:mt-16",
+              "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: [
@@ -59491,7 +59597,7 @@ function HeroBusinessCarouselDots({
               /* @__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, { mode: "wait", initial: false, children: /* @__PURE__ */ jsx(
+              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,
@@ -59548,7 +59654,7 @@ function HeroDeveloperToolsCode({
   const renderBadge = useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badgeText && !badgeIcon) return null;
-    return /* @__PURE__ */ jsxs(Badge, { className: "w-fit gap-2 mx-4", children: [
+    return /* @__PURE__ */ jsxs(Badge, { className: "gap-2 px-4 py-1", children: [
       badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 14 }),
       badgeText
     ] });
@@ -59605,7 +59711,7 @@ function HeroDeveloperToolsCode({
       className,
       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-8", contentClassName), children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4 md:gap-8", contentClassName), children: [
           renderBadge,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h1",
@@ -59669,41 +59775,51 @@ function HeroEcommerceProductShowcase({
   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__ */ 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
-                }
-              )
-            ]
-          }
+    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
         ),
-        /* @__PURE__ */ jsx("div", { className: cn("text-sm"), children: stat.label })
-      ] })
-    ] }, index)) });
+        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,
@@ -59715,7 +59831,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,
@@ -59728,8 +59844,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,
@@ -59741,7 +59857,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,
@@ -59767,30 +59883,39 @@ function HeroEcommerceProductShowcase({
       className,
       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__ */ jsx("div", { className: "order-1", children: renderImages }),
-        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-8 order-2", 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-balance",
-                headingClassName
+        /* @__PURE__ */ jsx("div", { className: "order-2 md:order-1", children: renderImages }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-4 md:gap-6 order-1 md:order-2",
+              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-balance",
+                    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
-            }
-          ) : heading),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : description),
-          /* @__PURE__ */ jsx(
-            BlockActions,
-            {
-              actions,
-              actionsSlot,
-              actionsClassName
-            }
-          ),
-          renderStats
-        ] })
+              renderStats
+            ]
+          }
+        )
       ] }) })
     }
   );
@@ -60204,6 +60329,16 @@ function HeroNewsletterMinimal({
     }
   );
 }
+var DEFAULT_FORM_FIELDS43 = [
+  {
+    name: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "Enter your email",
+    required: true,
+    columnSpan: 12
+  }
+];
 var digitVariants = {
   initial: { y: -20, opacity: 0 },
   animate: {
@@ -60219,7 +60354,7 @@ var digitVariants = {
 };
 function CountdownDigit({ value, label }) {
   const display = value.toString().padStart(2, "0");
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center bg-card pt-2 pb-6 px-2 text-card-foreground rounded-xl md:rounded-2xl shadow-xl", children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -60239,7 +60374,7 @@ function CountdownDigit({ value, label }) {
         ) })
       }
     ),
-    /* @__PURE__ */ jsx("span", { className: cn("mt-2 text-sm"), children: label })
+    /* @__PURE__ */ jsx("span", { className: cn("mt-2 text-xs md:text-sm"), children: label })
   ] });
 }
 function HeroComingSoonCountdown({
@@ -60249,8 +60384,14 @@ function HeroComingSoonCountdown({
   description,
   countdownDate,
   countdownSlot,
-  emailPlaceholder = "Enter your email",
-  submitAction,
+  formFields = DEFAULT_FORM_FIELDS43,
+  formConfig,
+  onSubmit,
+  onSuccess,
+  onError,
+  successMessage,
+  buttonAction,
+  helperText,
   formSlot,
   socialLinks,
   socialLinksSlot,
@@ -60269,6 +60410,18 @@ function HeroComingSoonCountdown({
   socialLinksClassName
 }) {
   const [timeLeft, setTimeLeft] = useState(null);
+  const { uploadTokens, uploadProgress, isUploading, uploadFiles, removeFile, resetUpload } = useFileUpload({ onError });
+  const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
+    formFields,
+    formConfig,
+    onSubmit,
+    onSuccess: (data) => {
+      resetUpload();
+      onSuccess?.(data);
+    },
+    onError,
+    uploadTokens
+  });
   const calculateTimeLeft = useCallback(() => {
     if (!countdownDate) return null;
     const now = Date.now();
@@ -60295,31 +60448,59 @@ function HeroComingSoonCountdown({
   const showCountdown = countdownSlot || timeLeft;
   const renderForm = useMemo(() => {
     if (formSlot) return formSlot;
-    if (!submitAction) return null;
-    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")
-        }
-      ),
-      /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        icon,
-        label,
-        iconAfter
-      ] }) })
-    ] });
-  }, [formSlot, submitAction, emailPlaceholder]);
+    const defaultButtonAction = {
+      label: "Notify Me",
+      variant: "default",
+      className: "h-12"
+    };
+    const action = buttonAction || defaultButtonAction;
+    return /* @__PURE__ */ jsxs(
+      Form,
+      {
+        form,
+        notificationConfig: {
+          submissionError,
+          successMessage
+        },
+        formConfig: {
+          endpoint: formConfig?.endpoint,
+          method: formMethod,
+          submissionConfig: formConfig?.submissionConfig
+        },
+        onNewSubmission: () => {
+          resetUpload();
+          resetSubmissionState();
+        },
+        children: [
+          formFields.map((field) => /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+            DynamicFormField,
+            {
+              field,
+              uploadProgress,
+              onFileUpload: uploadFiles,
+              onFileRemove: removeFile,
+              isUploading
+            }
+          ) }, field.name)),
+          /* @__PURE__ */ jsxs(
+            Pressable,
+            {
+              onClick: form.handleSubmit,
+              asButton: true,
+              variant: action.variant,
+              className: cn("h-12", action.className),
+              disabled: form.isSubmitting,
+              children: [
+                action.label,
+                action.iconAfter
+              ]
+            }
+          ),
+          helperText && (typeof helperText === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm mt-2 text-center"), children: helperText }) : helperText)
+        ]
+      }
+    );
+  }, [formSlot, formFields, form, formConfig, formMethod, buttonAction, uploadProgress, uploadFiles, removeFile, isUploading, submissionError, successMessage, helperText, resetUpload, resetSubmissionState]);
   const renderSocialLinks = useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
@@ -60345,7 +60526,7 @@ function HeroComingSoonCountdown({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: "pt-8 md:pt-0", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "px-6 py-8 md:px-12 md:py-12 lg:py-16 lg:px-16 rounded-2xl flex flex-col items-center text-center bg-muted gap-4 md:gap-8", 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 })
@@ -60354,7 +60535,7 @@ function HeroComingSoonCountdown({
           "h1",
           {
             className: cn(
-              "mt-8 max-w-3xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl text-balance",
+              "max-w-full md:max-w-lg text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl text-balance",
               headingClassName
             ),
             children: heading
@@ -60364,7 +60545,7 @@ function HeroComingSoonCountdown({
           "p",
           {
             className: cn(
-              "mt-6 max-w-xl text-lg md:text-xl text-balance",
+              "max-w-full md:max-w-md text-lg md:text-xl text-balance",
               descriptionClassName
             ),
             children: description
@@ -60374,7 +60555,7 @@ function HeroComingSoonCountdown({
           "div",
           {
             className: cn(
-              "mt-12 grid grid-cols-4 gap-4 md:gap-8",
+              "py-8 grid grid-cols-4 gap-2 md:gap-4 lg:gap-8",
               countdownClassName
             ),
             children: countdownSlot ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
@@ -60389,7 +60570,7 @@ function HeroComingSoonCountdown({
           "div",
           {
             className: cn(
-              "mt-12 flex w-full max-w-md flex-col gap-4 sm:flex-row",
+              "flex w-full max-w-md flex-col gap-4 sm:flex-row",
               formClassName
             ),
             children: renderForm
@@ -60398,10 +60579,7 @@ function HeroComingSoonCountdown({
         (socialLinksSlot || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn(
-              "mt-16 flex items-center gap-6",
-              socialLinksClassName
-            ),
+            className: cn("mt-8 flex items-center gap-6", socialLinksClassName),
             children: renderSocialLinks
           }
         )
@@ -60440,23 +60618,56 @@ function HeroEventRegistration({
 }) {
   const renderBadge = useMemo(() => {
     if (badgeSlot) return badgeSlot;
-    return /* @__PURE__ */ jsxs(Badge, { className: "px-4 gap-2", children: [
-      badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon }),
+    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: "flex justify-center w-full", children: /* @__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;
     if (!locationLabel && !locationSublabel) return null;
-    return /* @__PURE__ */ jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-card p-4 shadow-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    return /* @__PURE__ */ jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-card text-card-foreground p-4 shadow-lg ring-4 ring-primary", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ jsx(
         "div",
         {
@@ -60467,8 +60678,8 @@ function HeroEventRegistration({
         }
       ),
       /* @__PURE__ */ jsxs("div", { children: [
-        locationLabel && (typeof locationLabel === "string" ? /* @__PURE__ */ jsx("div", { className: "font-semibold ", children: locationLabel }) : locationLabel),
-        locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsx("div", { className: cn("text-sm"), children: locationSublabel }) : locationSublabel)
+        locationLabel && (typeof locationLabel === "string" ? /* @__PURE__ */ jsx("div", { className: "font-semibold text-card-foreground", children: locationLabel }) : locationLabel),
+        locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsx("div", { className: cn("text-sm text-card-foreground"), children: locationSublabel }) : locationSublabel)
       ] })
     ] }) });
   }, [locationSlot, locationLabel, locationSublabel]);
@@ -60502,7 +60713,7 @@ function HeroEventRegistration({
           "div",
           {
             className: cn(
-              "flex flex-col items-start gap-6 md:gap-8",
+              "flex flex-col items-start gap-4 md:gap-6",
               contentClassName
             ),
             children: [