@opensite/ui 2.4.3 → 2.4.4

package/dist/registry.js

@@ -6818,7 +6818,7 @@ function AboutMissionFeatures({
               className: cn(
                 "relative flex flex-col justify-between gap-10",
                 "overflow-hidden p-4 md:p-6 lg:p-10",
-                "text-white text-shadow-2xl",
+                "text-white text-shadow-lg",
                 "rounded-md shadow-lg",
                 missionSectionClassName
               ),
@@ -6871,7 +6871,7 @@ function AboutMissionFeatures({
             "div",
             {
               className: cn(
-                "grid gap-10 md:grid-cols-3 border-t border-dashed",
+                "grid md:grid-cols-3 border-t border-dashed",
                 featuresClassName
               ),
               children: featuresContent
@@ -7976,21 +7976,30 @@ function AboutStreamlineTeam({
                 className: cn(
                   "flex flex-col md:flex-row",
                   "justify-center md:justify-between items-center md:items-start",
-                  "gap-8 md:gap-24"
+                  "gap-4 md:gap-24"
                 ),
                 children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 md:gap-8 text-center md:text-left", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:gap-8 text-center md:text-left", children: [
                     teamTitle && (typeof teamTitle === "string" ? /* @__PURE__ */ jsx(
                       "h2",
                       {
                         className: cn(
-                          "text-3xl font-bold md:text-4xl",
+                          "text-3xl font-bold md:text-4xl text-balance",
                           teamTitleClassName
                         ),
                         children: teamTitle
                       }
                     ) : teamTitle),
-                    teamDescription && (typeof teamDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg", teamDescriptionClassName), children: teamDescription }) : teamDescription)
+                    teamDescription && (typeof teamDescription === "string" ? /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: cn(
+                          "text-lg text-balance",
+                          teamDescriptionClassName
+                        ),
+                        children: teamDescription
+                      }
+                    ) : teamDescription)
                   ] }),
                   /* @__PURE__ */ jsx(
                     BlockActions,
@@ -8034,7 +8043,7 @@ function AboutDeveloperProfile({
   actionsClassName,
   optixFlowConfig,
   background,
-  spacing = "xl",
+  spacing = "lg",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
   patternOpacity
@@ -8042,31 +8051,21 @@ function AboutDeveloperProfile({
   const socialLinksContent = useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
-    return socialLinks.map((link, idx) => /* @__PURE__ */ jsx(
-      Pressable,
+    return /* @__PURE__ */ jsx(
+      "div",
       {
-        href: link.href,
-        "aria-label": link["aria-label"],
-        className: cn(link.className),
-        children: link.icon
-      },
-      idx
-    ));
+        className: cn(
+          "flex justify-center gap-4 md:justify-start items-center flex-wrap",
+          socialLinksClassName
+        ),
+        children: socialLinks.map((link, idx) => /* @__PURE__ */ jsx(SocialLinkIcon, { ...link, size: "icon-lg", asButton: true }, idx))
+      }
+    );
   }, [socialLinksSlot, socialLinks, background]);
   const skillsContent = useMemo(() => {
     if (skillsSlot) return skillsSlot;
     if (!skills || skills.length === 0) return null;
-    return skills.map((skill, idx) => /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn(
-          "rounded-full px-4 py-2 text-sm font-medium",
-          skillTagClassName
-        ),
-        children: skill
-      },
-      idx
-    ));
+    return skills.map((skill, idx) => /* @__PURE__ */ jsx(Badge, { className: cn("px-4", skillTagClassName), children: skill }, idx));
   }, [skillsSlot, skills, skillTagClassName, background]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -8077,49 +8076,61 @@ function AboutDeveloperProfile({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl", contentClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-8 md:flex-row md:items-start", children: [
-          avatar && /* @__PURE__ */ jsx(
-            Img,
-            {
-              src: avatar.src,
-              alt: avatar.alt,
-              className: cn(
-                "h-48 w-48 rounded-xl object-cover shadow-xl",
-                avatarClassName
-              ),
-              optixFlowConfig
-            }
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "mx-auto max-w-full md:max-w-md bg-muted",
+            "py-8 px-6 md:py-12 md:px-12 text-muted-foreground",
+            "rounded-2xl shadow-xl",
+            "flex flex-col items-center md:items-start gap-8",
+            contentClassName
           ),
-          /* @__PURE__ */ jsxs("div", { className: "text-center md:text-left", children: [
-            name && (typeof name === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold", nameClassName), children: name }) : /* @__PURE__ */ jsx("div", { className: nameClassName, children: name })),
-            role && (typeof role === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-2 text-xl", roleClassName), children: role }) : /* @__PURE__ */ jsx("div", { className: cn("mt-2", roleClassName), children: role })),
-            (socialLinksSlot || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsx(
-              "div",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8 md:flex-row items-start", children: [
+              avatar && /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: avatar.src,
+                  alt: avatar.alt,
+                  className: cn(
+                    "h-48 w-full md:w-48 rounded-xl object-cover shadow-xl",
+                    avatarClassName
+                  ),
+                  optixFlowConfig
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "text-left flex flex-col items-start gap-4", children: [
+                name && (typeof name === "string" ? /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    className: cn(
+                      "text-3xl md:text-4xl font-bold",
+                      nameClassName
+                    ),
+                    children: name
+                  }
+                ) : name),
+                role && (typeof role === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xl opacity-50", roleClassName), children: role }) : role),
+                socialLinksContent
+              ] })
+            ] }),
+            bio && /* @__PURE__ */ jsx("div", { className: "mt-12", children: typeof bio === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg", bioClassName), children: bio }) : bio }),
+            (skillsSlot || skills && skills.length > 0) && /* @__PURE__ */ jsxs("div", { className: cn("mt-12", skillsClassName), children: [
+              skillsTitle && (typeof skillsTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold opacity-50", children: skillsTitle }) : skillsTitle),
+              /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: skillsContent })
+            ] }),
+            /* @__PURE__ */ jsx(
+              BlockActions,
               {
-                className: cn(
-                  "mt-4 flex justify-center gap-4 md:justify-start",
-                  socialLinksClassName
-                ),
-                children: socialLinksContent
+                actions,
+                actionsSlot,
+                actionsClassName
               }
             )
-          ] })
-        ] }),
-        bio && /* @__PURE__ */ jsx("div", { className: "mt-12", children: typeof bio === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg whitespace-pre-line", bioClassName), children: bio }) : /* @__PURE__ */ jsx("div", { className: bioClassName, children: bio }) }),
-        (skillsSlot || skills && skills.length > 0) && /* @__PURE__ */ jsxs("div", { className: cn("mt-12", skillsClassName), children: [
-          skillsTitle && (typeof skillsTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: skillsTitle }) : skillsTitle),
-          /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: skillsContent })
-        ] }),
-        /* @__PURE__ */ jsx(
-          BlockActions,
-          {
-            actions,
-            actionsSlot,
-            actionsClassName
-          }
-        )
-      ] })
+          ]
+        }
+      )
     }
   );
 }
@@ -8562,39 +8573,41 @@ function AboutStatsSidebar({
   featuresClassName,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-32 md:py-32",
+  spacing = "lg",
   pattern,
   patternOpacity
 }) {
   const statsContent = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("grid gap-6 sm:grid-cols-2", statsClassName), children: stats.map((stat, idx) => /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       "div",
       {
         className: cn(
-          "rounded-xl border p-6",
-          getNestedCardBg(background, "card"),
-          getNestedCardTextColor(background)
+          "grid grid-cols-1 gap-4 md:gap-6 sm:grid-cols-2",
+          statsClassName
         ),
-        children: [
-          stat.icon,
-          typeof stat.value === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-4xl font-bold", children: stat.value }) : /* @__PURE__ */ jsx("div", { className: "mt-4", children: stat.value }),
-          typeof stat.label === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1 font-semibold", children: stat.label }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: stat.label }),
-          stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: cn(
-                "mt-2 text-sm",
-                getTextColor(background, "muted")
-              ),
-              children: stat.description
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: "mt-2", children: stat.description }))
-        ]
-      },
-      idx
-    )) });
+        children: stats.map((stat, idx) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "p-6 flex flex-col items-start gap-6",
+              "bg-card text-card-foreground",
+              "rounded-xl ring-2"
+            ),
+            children: [
+              stat.icon,
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-2", children: [
+                typeof stat.value === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-2 text-3xl md:text-4xl font-bold", children: stat.value }) : stat.value,
+                typeof stat.label === "string" ? /* @__PURE__ */ jsx("p", { className: "font-semibold", children: stat.label }) : stat.label,
+                stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm opacity-60 font-semibold"), children: stat.description }) : stat.description)
+              ] })
+            ]
+          },
+          idx
+        ))
+      }
+    );
   }, [statsSlot, stats, statsClassName]);
   const featuresContent = useMemo(() => {
     if (featuresSlot) return featuresSlot;
@@ -8604,7 +8617,9 @@ function AboutStatsSidebar({
         "div",
         {
           className: cn(
-            "flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10",
+            "flex size-12 shrink-0 items-center justify-center",
+            "bg-primary text-primary-foreground",
+            "shadow-lg rounded-lg",
             feature.iconBgClass
           ),
           children: feature.icon
@@ -8612,7 +8627,7 @@ function AboutStatsSidebar({
       ),
       /* @__PURE__ */ jsxs("div", { children: [
         feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: feature.title }) : feature.title),
-        feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: feature.description }) : feature.description)
+        feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: "opacity-75", children: feature.description }) : feature.description)
       ] })
     ] }, idx)) });
   }, [featuresSlot, features, featuresClassName]);
@@ -8623,7 +8638,7 @@ function AboutStatsSidebar({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-3", children: [
         /* @__PURE__ */ jsxs(
@@ -8641,17 +8656,7 @@ function AboutStatsSidebar({
                   children: title
                 }
               ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "mt-4 text-lg",
-                    getTextColor(background, "muted"),
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
             ]
           }
         ),
@@ -20708,7 +20713,7 @@ function CarouselImageHero({
                     className: cn(
                       "text-4xl font-bold sm:text-5xl md:text-6xl text-balance",
                       headingClassName,
-                      hasImages ? "text-white text-shadow-2xl" : ""
+                      hasImages ? "text-white text-shadow-lg" : ""
                     ),
                     children: heading
                   }
@@ -20719,7 +20724,7 @@ function CarouselImageHero({
                     className: cn(
                       "text-xl text-balance",
                       descriptionClassName,
-                      hasImages ? "text-white text-shadow-2xl" : ""
+                      hasImages ? "text-white text-shadow-lg" : ""
                     ),
                     children: description
                   }
@@ -26214,7 +26219,7 @@ function FeatureBentoImageGrid({
 var ASPECT_RATIO_VALUES = {
   square: "1 / 1",
   horizontal: "16 / 9",
-  vertical: "9 / 16"
+  vertical: "8 / 12"
 };
 function FeatureImageCardsThreeColumn({
   title,
@@ -26296,7 +26301,7 @@ function FeatureImageCardsThreeColumn({
       return /* @__PURE__ */ jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-4 md:p-6", children: [
         cardBadge || /* @__PURE__ */ jsx("div", {}),
         card.title || card.subtitle || card.linkText ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-4 md:gap-6 text-white", children: [
-          card.title || card.subtitle ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-2 md:gap-4", children: [
+          card.title || card.subtitle ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-0 md:gap-1", children: [
             card.title && (typeof card.title === "string" ? /* @__PURE__ */ jsx(
               "h3",
               {
@@ -47936,7 +47941,7 @@ function HeroImageSlider({
             "h1",
             {
               className: cn(
-                "mt-3 text-3xl font-bold tracking-tight text-balance md:text-4xl lg:text-5xl 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-lg",
                 headingClassName
               ),
               children: heading
@@ -50282,7 +50287,7 @@ function HeroBadgeShadowOverlay({
             "h1",
             {
               className: cn(
-                "text-4xl font-semibold lg:text-8xl text-white text-balance text-shadow-2xl text-center",
+                "text-4xl font-semibold lg:text-8xl text-white text-balance text-shadow-lg text-center",
                 headingClassName
               ),
               children: heading
@@ -50292,7 +50297,7 @@ function HeroBadgeShadowOverlay({
             "p",
             {
               className: cn(
-                "text-lg text-white text-balance text-shadow-xl text-center",
+                "text-lg text-white text-balance text-shadow-lg text-center",
                 descriptionClassName
               ),
               children: description
@@ -50383,7 +50388,7 @@ function HeroVideoBackgroundDark({
                 {
                   className: cn(
                     "font-bold text-5xl md:text-6xl lg:text-8xl",
-                    "text-balance text-white text-shadow-2xl",
+                    "text-balance text-white text-shadow-lg",
                     headingClassName
                   ),
                   children: heading
@@ -50393,7 +50398,7 @@ function HeroVideoBackgroundDark({
                 "p",
                 {
                   className: cn(
-                    "text-lg md:text-xl text-balance text-white text-shadow-xl",
+                    "text-lg md:text-xl text-balance text-white text-shadow-lg",
                     descriptionClassName
                   ),
                   children: description
@@ -51224,7 +51229,7 @@ function HeroFullscreenBackgroundImage({
                 "h1",
                 {
                   className: cn(
-                    "text-5xl md:text-6xl lg:text-7xl text-balance text-white text-shadow-2xl font-semibold",
+                    "text-5xl md:text-6xl lg:text-7xl text-balance text-white text-shadow-lg font-semibold",
                     headingClassName
                   ),
                   children: heading
@@ -51234,7 +51239,7 @@ function HeroFullscreenBackgroundImage({
                 "p",
                 {
                   className: cn(
-                    "text-center text-base text-balance text-white text-shadow-2xl",
+                    "text-center text-base text-balance text-white text-shadow-lg",
                     descriptionClassName
                   ),
                   children: description
@@ -53243,7 +53248,7 @@ function HeroVideoOverlayStars({
     const starCount = trust.starCount ?? 5;
     return /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-0.5 text-white", children: [...Array(starCount)].map((_, i) => /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/star", size: 12 }, i)) }),
-      trust.message && /* @__PURE__ */ jsx("p", { className: "mt-1.5 max-w-40 text-center text-xs leading-snug font-medium text-white text-shadow-2xl", children: trust.message })
+      trust.message && /* @__PURE__ */ jsx("p", { className: "mt-1.5 max-w-40 text-center text-xs leading-snug font-medium text-white text-shadow-lg", children: trust.message })
     ] });
   }, [trustSlot, trust]);
   const renderVideo = useMemo(() => {
@@ -53279,7 +53284,7 @@ function HeroVideoOverlayStars({
               "h1",
               {
                 className: cn(
-                  "text-5xl font-semibold md:text-6xl text-balance text-white text-shadow-2xl",
+                  "text-5xl font-semibold md:text-6xl text-balance text-white text-shadow-lg",
                   headingClassName
                 ),
                 children: heading
@@ -53288,7 +53293,7 @@ function HeroVideoOverlayStars({
               "h1",
               {
                 className: cn(
-                  "text-5xl font-semibold md:text-6xl text-balance text-white text-shadow-2xl",
+                  "text-5xl font-semibold md:text-6xl text-balance text-white text-shadow-lg",
                   headingClassName
                 ),
                 children: heading
@@ -53298,7 +53303,7 @@ function HeroVideoOverlayStars({
               "p",
               {
                 className: cn(
-                  "text-xl md:text-2xl text-balance text-white text-shadow-2xl",
+                  "text-xl md:text-2xl text-balance text-white text-shadow-lg",
                   descriptionClassName
                 ),
                 children: description
@@ -53406,7 +53411,7 @@ function HeroProductivityLauncherVideo({
               "h1",
               {
                 className: cn(
-                  "text-center text-4xl leading-tight font-semibold text-shadow-xl sm:text-5xl md:text-6xl text-balance text-white",
+                  "text-center text-4xl leading-tight font-semibold text-shadow-lg sm:text-5xl md:text-6xl text-balance text-white",
                   headingClassName
                 ),
                 children: heading
@@ -53415,7 +53420,7 @@ function HeroProductivityLauncherVideo({
               "h1",
               {
                 className: cn(
-                  "text-center text-4xl leading-tight font-semibold text-shadow-xl sm:text-5xl md:text-6xl text-balance text-white",
+                  "text-center text-4xl leading-tight font-semibold text-shadow-lg sm:text-5xl md:text-6xl text-balance text-white",
                   headingClassName
                 ),
                 children: heading
@@ -53477,7 +53482,7 @@ function HeroHiringAnimatedText({
       "h1",
       {
         className: cn(
-          "text-4xl leading-9 font-bold lg:text-5xl lg:leading-12! xl:text-7xl xl:leading-22! text-white text-shadow-xl",
+          "text-4xl leading-9 font-bold lg:text-5xl lg:leading-12! xl:text-7xl xl:leading-22! text-white text-shadow-lg",
           headingClassName
         ),
         children: [
@@ -54459,7 +54464,7 @@ function HeroArchitectureFullscreen({
               "p",
               {
                 className: cn(
-                  "text-sm leading-none uppercase text-balance text-white text-shadow-xl",
+                  "text-sm leading-none uppercase text-balance text-white text-shadow-lg",
                   taglineClassName
                 ),
                 children: tagline
@@ -54469,7 +54474,7 @@ function HeroArchitectureFullscreen({
               motion$1.h1,
               {
                 className: cn(
-                  "text-6xl font-bold md:text-7xl lg:text-8xl text-white text-balance text-shadow-xl tracking-tight leading-[1.1]",
+                  "text-6xl font-bold md:text-7xl lg:text-8xl text-white text-balance text-shadow-lg tracking-tight leading-[1.1]",
                   headingClassName
                 ),
                 initial: "hidden",
@@ -54518,7 +54523,7 @@ function HeroArchitectureFullscreen({
             "p",
             {
               className: cn(
-                "text-lg md:text-xl text-balance text-white text-shadow-xl",
+                "text-lg md:text-xl text-balance text-white text-shadow-lg",
                 descriptionClassName
               ),
               children: description
@@ -55758,7 +55763,7 @@ function HeroMentorshipVideoSplit({
                     "h1",
                     {
                       className: cn(
-                        "text-4xl font-semibold lg:text-8xl text-balance text-shadow-xl",
+                        "text-4xl font-semibold lg:text-8xl text-balance text-shadow-lg",
                         headingClassName
                       ),
                       children: heading
@@ -55767,7 +55772,7 @@ function HeroMentorshipVideoSplit({
                     "h1",
                     {
                       className: cn(
-                        "text-4xl font-semibold lg:text-8xl text-balance text-shadow-xl",
+                        "text-4xl font-semibold lg:text-8xl text-balance text-shadow-lg",
                         headingClassName
                       ),
                       children: heading
@@ -56766,7 +56771,7 @@ function HeroDigitalAgencyFullscreen({
                   className: cn(
                     "text-4xl font-bold text-balance md:text-7xl",
                     headingClassName,
-                    backgroundImage ? "text-white text-shadow-2xl" : ""
+                    backgroundImage ? "text-white text-shadow-lg" : ""
                   ),
                   children: heading
                 }
@@ -56777,7 +56782,7 @@ function HeroDigitalAgencyFullscreen({
                   className: cn(
                     "max-w-full md:max-w-[70%] text-lg md:text-xl font-normal text-balance",
                     descriptionClassName,
-                    backgroundImage ? "text-white text-shadow-2xl" : ""
+                    backgroundImage ? "text-white text-shadow-lg" : ""
                   ),
                   children: description
                 }
@@ -58314,7 +58319,7 @@ function HeroEventRegistration({
   locationSublabel,
   locationSlot,
   background,
-  containerClassName = "px-6 sm:px-0 md:px-0 lg:px-0",
+  containerClassName = "mx-auto w-full max-w-full md:max-w-7xl relative z-10 px-6 sm:px-8 md:px-12 lg:px-18",
   spacing = "xl",
   pattern,
   patternOpacity,
@@ -58326,7 +58331,8 @@ function HeroEventRegistration({
   statsClassName,
   imageClassName,
   optixFlowConfig,
-  logo
+  logo,
+  directionConfig = { desktop: "mediaRight", mobile: "mediaTop" }
 }) {
   const renderBadge = useMemo(() => {
     if (badgeSlot) return badgeSlot;
@@ -58379,48 +58385,72 @@ function HeroEventRegistration({
   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 text-card-foreground p-2 md:p-4 shadow-lg ring-4 ring-primary", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "flex items-center justify-center shrink-0",
-            "size-12 rounded-xl bg-primary text-primary-foreground"
-          ),
-          children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/map-pin", size: 24 })
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "flex flex-col items-start justify-center",
-            "text-card-foreground gap-0 pr-0 md:pr-2"
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "bg-card text-card-foreground",
+          "rounded-xl p-2 md:p-4 shadow-lg",
+          "absolute -bottom-4",
+          "left-1/2 -translate-x-1/2 w-[90%]",
+          "md:-left-4 md:translate-x-0 md:w-auto",
+          "ring-4 ring-primary"
+        ),
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex items-center justify-center shrink-0",
+                "size-12 rounded-xl bg-primary text-primary-foreground"
+              ),
+              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/map-pin", size: 24 })
+            }
           ),
-          children: [
-            locationLabel && (typeof locationLabel === "string" ? /* @__PURE__ */ jsx("div", { className: "font-semibold", children: locationLabel }) : locationLabel),
-            locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsx("div", { className: cn("text-xs"), children: locationSublabel }) : locationSublabel)
-          ]
-        }
-      )
-    ] }) });
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex flex-col items-start justify-center",
+                "text-card-foreground gap-0 pr-1 md:pr-2"
+              ),
+              children: [
+                locationLabel && (typeof locationLabel === "string" ? /* @__PURE__ */ jsx("div", { className: "font-semibold", children: locationLabel }) : locationLabel),
+                locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsx("div", { className: cn("text-xs"), children: locationSublabel }) : locationSublabel)
+              ]
+            }
+          )
+        ] })
+      }
+    );
   }, [locationSlot, locationLabel, locationSublabel]);
   const renderImage = useMemo(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
-    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-2xl", imageClassName), children: /* @__PURE__ */ jsx(
-        Img,
+    return /* @__PURE__ */ jsxs("div", { className: "relative w-full md:w-[50%]", children: [
+      /* @__PURE__ */ jsx(
+        "div",
         {
-          src: image.src,
-          alt: image.alt,
-          className: cn("aspect-4/3 w-full object-cover", image.className),
-          optixFlowConfig
+          className: cn(
+            "overflow-hidden rounded-2xl shadow-xl",
+            imageClassName
+          ),
+          children: /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: image.src,
+              alt: image.alt,
+              className: cn("aspect-4/3 w-full object-cover", image.className),
+              optixFlowConfig
+            }
+          )
         }
-      ) }),
+      ),
       renderLocation
     ] });
   }, [imageSlot, image, imageClassName, optixFlowConfig, renderLocation]);
+  const desktopOrder = directionConfig.desktop === "mediaRight" ? "md:flex-row" : "md:flex-row-reverse";
+  const mobileOrder = directionConfig.mobile === "mediaTop" ? "flex-col-reverse" : "flex-col";
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -58430,50 +58460,60 @@ function HeroEventRegistration({
       patternOpacity,
       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 items-start gap-4 md:gap-6",
-              contentClassName
-            ),
-            children: [
-              renderBadge,
-              logo && /* @__PURE__ */ jsx(
-                Img,
-                {
-                  src: logo.src,
-                  alt: logo.alt,
-                  className: "w-auto max-w-full h-12 md:h-14 object-contain my-4",
-                  optixFlowConfig
-                }
-              ),
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                "h1",
-                {
-                  className: cn(
-                    "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-pretty",
-                    headingClassName
+      children: /* @__PURE__ */ jsx("div", { className: "pt-8 md:pt-0", children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center justify-start md:justify-between gap-12 md:gap-24",
+            mobileOrder,
+            desktopOrder
+          ),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col items-start gap-2 md:gap-4 w-full md:w-[50%]",
+                  contentClassName
+                ),
+                children: [
+                  renderBadge,
+                  logo && /* @__PURE__ */ jsx(
+                    Img,
+                    {
+                      src: logo.src,
+                      alt: logo.alt,
+                      className: "w-auto max-w-full h-12 md:h-14 object-contain my-4",
+                      optixFlowConfig
+                    }
                   ),
-                  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
-            ]
-          }
-        ),
-        renderImage
-      ] }) })
+                  heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                    "h1",
+                    {
+                      className: cn(
+                        "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-pretty",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  ) : heading),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : description),
+                  /* @__PURE__ */ jsx(
+                    BlockActions,
+                    {
+                      actions,
+                      actionsSlot,
+                      actionsClassName
+                    }
+                  ),
+                  renderStats
+                ]
+              }
+            ),
+            renderImage
+          ]
+        }
+      ) })
     }
   );
 }