@opensite/ui 0.5.8 → 0.6.0

package/dist/registry.js

@@ -1527,7 +1527,7 @@ function AboutVisionGallery({
           {
             src: image.src,
             alt: image.alt,
-            className: "max-h-80 w-full object-cover",
+            className: "h-80 w-full object-cover",
             optixFlowConfig
           },
           idx
@@ -1991,19 +1991,28 @@ function AboutStoryGallery({
   const imagesContent = useMemo$1(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mt-16 grid gap-4 md:grid-cols-3", imagesClassName), children: images.map((image, idx) => /* @__PURE__ */ jsx(
-      Img,
+    return /* @__PURE__ */ jsx(
+      "div",
       {
-        src: image.src,
-        alt: image.alt,
         className: cn(
-          "h-64 w-full rounded-xl object-cover",
-          image.className
+          "mt-7 md:mt-16 grid gap-4 md:grid-cols-3",
+          imagesClassName
         ),
-        optixFlowConfig
-      },
-      idx
-    )) });
+        children: images.map((image, idx) => /* @__PURE__ */ jsx(
+          Img,
+          {
+            src: image.src,
+            alt: image.alt,
+            className: cn(
+              "h-64 w-full rounded-xl object-cover",
+              image.className
+            ),
+            optixFlowConfig
+          },
+          idx
+        ))
+      }
+    );
   }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxs(
     Section,
@@ -2074,7 +2083,16 @@ function AboutStreamlineTeam({
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("mt-10 space-y-6", featuresClassName), children: features.map((feature, idx) => /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
-      /* @__PURE__ */ jsx("div", { className: cn("flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10", feature.iconBgClass), children: feature.icon }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10",
+            feature.iconBgClass
+          ),
+          children: feature.icon
+        }
+      ),
       /* @__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: "text-sm text-muted-foreground", children: feature.description }) : feature.description)
@@ -2117,7 +2135,10 @@ function AboutStreamlineTeam({
               {
                 src: primaryImage.src,
                 alt: primaryImage.alt,
-                className: cn("rounded-2xl object-cover", primaryImageClassName),
+                className: cn(
+                  "rounded-2xl object-cover w-auto h-full",
+                  primaryImageClassName
+                ),
                 optixFlowConfig
               }
             ),
@@ -2126,22 +2147,70 @@ function AboutStreamlineTeam({
               {
                 src: secondaryImage.src,
                 alt: secondaryImage.alt,
-                className: cn("absolute -bottom-8 -right-8 h-48 w-48 rounded-xl border-4 border-background object-cover shadow-lg", secondaryImageClassName),
+                className: cn(
+                  "absolute -bottom-8 -right-8 h-48 w-48 rounded-xl border-4 border-background object-cover shadow-lg",
+                  secondaryImageClassName
+                ),
                 optixFlowConfig
               }
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { children: [
-            title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-6 text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-6", descriptionClassName), children: description })),
+            title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+              "h1",
+              {
+                className: cn(
+                  "text-4xl font-bold tracking-tight md:text-5xl",
+                  titleClassName
+                ),
+                children: title
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "mt-6 text-lg text-muted-foreground",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: cn("mt-6", descriptionClassName), children: description })),
             featuresContent
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("mt-32 rounded-2xl bg-muted p-8 md:p-16", teamSectionClassName), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl text-center", children: [
-          teamTitle && (typeof teamTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", teamTitleClassName), children: teamTitle }) : /* @__PURE__ */ jsx("div", { className: teamTitleClassName, children: teamTitle })),
-          teamDescription && (typeof teamDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", teamDescriptionClassName), children: teamDescription }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", teamDescriptionClassName), children: teamDescription })),
-          actionsContent
-        ] }) })
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-6 md:mt-32 rounded-2xl bg-muted p-8 md:p-16",
+              teamSectionClassName
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl text-center", children: [
+              teamTitle && (typeof teamTitle === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-bold md:text-4xl",
+                    teamTitleClassName
+                  ),
+                  children: teamTitle
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: teamTitleClassName, children: teamTitle })),
+              teamDescription && (typeof teamDescription === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-4 text-lg text-muted-foreground",
+                    teamDescriptionClassName
+                  ),
+                  children: teamDescription
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", teamDescriptionClassName), children: teamDescription })),
+              actionsContent
+            ] })
+          }
+        )
       ]
     }
   );
@@ -2183,7 +2252,10 @@ function AboutDeveloperProfile({
       {
         href: link.href,
         "aria-label": link["aria-label"],
-        className: cn("text-muted-foreground hover:text-foreground", link.className),
+        className: cn(
+          "text-muted-foreground hover:text-foreground",
+          link.className
+        ),
         children: link.icon
       },
       idx
@@ -2195,7 +2267,10 @@ function AboutDeveloperProfile({
     return skills.map((skill, idx) => /* @__PURE__ */ jsx(
       "span",
       {
-        className: cn("rounded-full bg-muted px-4 py-2 text-sm font-medium", skillTagClassName),
+        className: cn(
+          "rounded-full bg-muted px-4 py-2 text-sm font-medium",
+          skillTagClassName
+        ),
         children: skill
       },
       idx
@@ -2205,7 +2280,14 @@ function AboutDeveloperProfile({
     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;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -2238,22 +2320,52 @@ function AboutDeveloperProfile({
             {
               src: avatar.src,
               alt: avatar.alt,
-              className: cn("h-48 w-48 rounded-full object-cover", avatarClassName),
+              className: cn(
+                "h-48 w-48 rounded-xl object-cover shadow-xl",
+                avatarClassName
+              ),
               optixFlowConfig
             }
           ),
           /* @__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 text-primary", roleClassName), children: role }) : /* @__PURE__ */ jsx("div", { className: cn("mt-2", roleClassName), children: role })),
-            (socialLinksSlot || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-4 flex justify-center gap-4 md:justify-start", socialLinksClassName), children: socialLinksContent })
+            (socialLinksSlot || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "mt-4 flex justify-center gap-4 md:justify-start",
+                  socialLinksClassName
+                ),
+                children: socialLinksContent
+              }
+            )
           ] })
         ] }),
-        bio && /* @__PURE__ */ jsx("div", { className: "mt-12", children: typeof bio === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-muted-foreground whitespace-pre-line", bioClassName), children: bio }) : /* @__PURE__ */ jsx("div", { className: bioClassName, children: bio }) }),
+        bio && /* @__PURE__ */ jsx("div", { className: "mt-12", children: typeof bio === "string" ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "text-lg text-muted-foreground 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 })
         ] }),
-        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-12 text-center md:text-left", actionsClassName), children: actionsContent })
+        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-12 text-center md:text-left flex gap-2 items-center flex-wrap",
+              actionsClassName
+            ),
+            children: actionsContent
+          }
+        )
       ] })
     }
   );
@@ -2305,10 +2417,17 @@ function AboutStartupTeam({
       idx
     )) });
   }, [sidebarSlot, sidebarLinks, activeTab]);
+  const filteredTeamMembers = useMemo$1(() => {
+    if (!teamMembers || teamMembers.length === 0) return [];
+    if (!activeTab) return teamMembers;
+    return teamMembers.filter(
+      (member) => !member.tab || member.tab === activeTab
+    );
+  }, [teamMembers, activeTab]);
   const teamMembersContent = useMemo$1(() => {
     if (teamMembersSlot) return teamMembersSlot;
-    if (!teamMembers || teamMembers.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mt-8 grid gap-8 sm:grid-cols-2 lg:grid-cols-3", teamMembersClassName), children: teamMembers.map((member, idx) => /* @__PURE__ */ jsxs(
+    if (filteredTeamMembers.length === 0) return null;
+    return /* @__PURE__ */ jsx("div", { className: cn("mt-8 grid gap-8 sm:grid-cols-2 lg:grid-cols-3", teamMembersClassName), children: filteredTeamMembers.map((member, idx) => /* @__PURE__ */ jsxs(
       "div",
       {
         className: "rounded-xl border bg-card p-6 text-center",
@@ -2345,7 +2464,7 @@ function AboutStartupTeam({
       },
       idx
     )) });
-  }, [teamMembersSlot, teamMembers, teamMembersClassName, optixFlowConfig]);
+  }, [teamMembersSlot, filteredTeamMembers, teamMembersClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -2417,14 +2536,35 @@ function AboutMinimalStory({
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-3xl", contentClassName), children: [
         (authorSlot || author) && authorContent,
-        title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
-        content && (typeof content === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-8 text-lg leading-relaxed text-muted-foreground whitespace-pre-line", bodyClassName), children: content }) : /* @__PURE__ */ jsx("div", { className: cn("mt-8", bodyClassName), children: content })),
+        title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+          "h1",
+          {
+            className: cn(
+              "text-4xl font-bold tracking-tight md:text-5xl",
+              titleClassName
+            ),
+            children: title
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
+        content && (typeof content === "string" ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "mt-8 text-lg leading-relaxed text-muted-foreground whitespace-pre-line",
+              bodyClassName
+            ),
+            children: content
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: cn("mt-8", bodyClassName), children: content })),
         featuredImage && /* @__PURE__ */ jsx(
           Img,
           {
             src: featuredImage.src,
             alt: featuredImage.alt,
-            className: cn("mt-12 w-full rounded-2xl object-cover", imageClassName),
+            className: cn(
+              "mt-6 md:mt-12 w-full rounded-2xl object-cover",
+              imageClassName
+            ),
             optixFlowConfig
           }
         )
@@ -2456,10 +2596,19 @@ function AboutStoryHero({
   const teamInfoContent = useMemo$1(() => {
     if (teamInfoSlot) return teamInfoSlot;
     if (!teamInfo) return null;
-    return /* @__PURE__ */ jsxs("div", { className: cn("mt-8 rounded-xl bg-muted p-6", teamInfoClassName), children: [
-      typeof teamInfo.title === "string" ? /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold", children: teamInfo.title }) : teamInfo.title,
-      typeof teamInfo.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-muted-foreground", children: teamInfo.description }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: teamInfo.description })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "mt-6 md:mt-8 rounded-xl bg-muted p-6",
+          teamInfoClassName
+        ),
+        children: [
+          typeof teamInfo.title === "string" ? /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold", children: teamInfo.title }) : teamInfo.title,
+          typeof teamInfo.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-muted-foreground", children: teamInfo.description }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: teamInfo.description })
+        ]
+      }
+    );
   }, [teamInfoSlot, teamInfo, teamInfoClassName]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -2470,23 +2619,62 @@ function AboutStoryHero({
       patternOpacity,
       className: cn(className),
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("grid gap-12 lg:grid-cols-2 lg:items-center", contentClassName), children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm font-semibold uppercase tracking-wider text-primary", subtitleClassName), children: subtitle }) : /* @__PURE__ */ jsx("div", { className: subtitleClassName, children: subtitle })),
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mt-4 text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", titleClassName), children: title })),
-          content && (typeof content === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-6 text-lg text-muted-foreground whitespace-pre-line", bodyClassName), children: content }) : /* @__PURE__ */ jsx("div", { className: cn("mt-6", bodyClassName), children: content })),
-          (teamInfoSlot || teamInfo) && teamInfoContent
-        ] }),
-        heroImage && /* @__PURE__ */ jsx(
-          Img,
-          {
-            src: heroImage.src,
-            alt: heroImage.alt,
-            className: cn("rounded-2xl object-cover", imageClassName),
-            optixFlowConfig
-          }
-        )
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "grid gap:6 md:gap-12 lg:grid-cols-2 lg:items-center",
+            contentClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-sm font-semibold uppercase tracking-wider text-primary",
+                    subtitleClassName
+                  ),
+                  children: subtitle
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: subtitleClassName, children: subtitle })),
+              title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "mt-4 text-4xl font-bold tracking-tight md:text-5xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", titleClassName), children: title })),
+              content && (typeof content === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-6 text-lg text-muted-foreground whitespace-pre-line",
+                    bodyClassName
+                  ),
+                  children: content
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: cn("mt-6", bodyClassName), children: content })),
+              (teamInfoSlot || teamInfo) && teamInfoContent
+            ] }),
+            heroImage && /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: heroImage.src,
+                alt: heroImage.alt,
+                className: cn(
+                  "w-full h-auto rounded-2xl object-cover sm:h-full",
+                  imageClassName
+                ),
+                optixFlowConfig
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }
@@ -2590,7 +2778,7 @@ function AboutInteractiveTabs({
         "div",
         {
           className: cn(
-            "flex flex-wrap justify-center gap-2 border-b",
+            "flex overflow-x-auto gap-2 border-b scrollbar-none -mx-4 px-4 sm:mx-0 sm:px-0 sm:justify-center",
             tabsContainerClassName
           ),
           children: tabs.map((tab) => /* @__PURE__ */ jsx(
@@ -2598,7 +2786,7 @@ function AboutInteractiveTabs({
             {
               onClick: () => handleTabChange(tab.id),
               className: cn(
-                "px-6 py-3 text-sm font-medium transition-colors",
+                "flex-shrink-0 whitespace-nowrap px-6 py-3 text-sm font-medium transition-colors",
                 activeTab === tab.id ? cn(
                   "border-b-2 border-primary text-primary",
                   activeTabClassName
@@ -2644,7 +2832,7 @@ function AboutInteractiveTabs({
                 src: activeContent.image.src,
                 alt: activeContent.image.alt,
                 className: cn(
-                  "rounded-2xl object-cover",
+                  "w-full h-auto rounded-2xl object-cover lg:h-full",
                   tabContentImageClassName
                 ),
                 optixFlowConfig
@@ -2773,13 +2961,13 @@ function AboutMissionDualImage({
           ] }),
           (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-8 flex flex-wrap gap-4", actionsClassName), children: actionsContent })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "relative grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-4 sm:grid sm:grid-cols-2", children: [
           primaryImage && /* @__PURE__ */ jsx(
             Img,
             {
               src: primaryImage.src,
               alt: primaryImage.alt,
-              className: cn("h-full rounded-2xl object-cover", primaryImageClassName),
+              className: cn("w-full h-auto rounded-2xl object-cover sm:h-full", primaryImageClassName),
               optixFlowConfig
             }
           ),
@@ -2788,7 +2976,7 @@ function AboutMissionDualImage({
             {
               src: secondaryImage.src,
               alt: secondaryImage.alt,
-              className: cn("h-full rounded-2xl object-cover sm:mt-12", secondaryImageClassName),
+              className: cn("w-full h-auto rounded-2xl object-cover sm:h-full sm:mt-12", secondaryImageClassName),
               optixFlowConfig
             }
           )
@@ -36836,13 +37024,13 @@ function AboutSplitHero({
   imageSrc,
   imageAlt,
   imageClassName,
+  contentClassName,
   className,
-  containerClassName,
   optixFlowConfig,
-  background,
-  spacing,
+  background = "dark",
   pattern,
-  patternOpacity
+  patternOpacity,
+  directionConfig = { desktop: "mediaRight", mobile: "mediaTop" }
 }) {
   const ctaContent = useMemo$1(() => {
     if (ctaSlot) return ctaSlot;
@@ -36855,7 +37043,10 @@ function AboutSplitHero({
         variant: ctaAction.variant || "default",
         size: ctaAction.size || "lg",
         asButton: true,
-        className: cn("mt-10 flex h-fit items-center gap-2.5 rounded-xl px-5 py-4 font-bold", ctaClassName),
+        className: cn(
+          "inline-flex items-center gap-2.5 font-semibold",
+          ctaClassName
+        ),
         children: [
           /* @__PURE__ */ jsx("span", { children: ctaAction.label }),
           /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
@@ -36863,40 +37054,92 @@ function AboutSplitHero({
       }
     );
   }, [ctaSlot, ctaAction, ctaClassName]);
-  return /* @__PURE__ */ jsxs(
-    Section,
+  const bgColorClass = useMemo$1(() => {
+    switch (background) {
+      case "dark":
+        return "bg-gray-900 text-white";
+      case "gray":
+        return "bg-gray-100 text-gray-900";
+      case "white":
+        return "bg-white text-gray-900";
+      default:
+        return "bg-background text-foreground";
+    }
+  }, [background]);
+  const desktopOrder = directionConfig.desktop === "mediaRight" ? "lg:flex-row" : "lg:flex-row-reverse";
+  const mobileOrder = directionConfig.mobile === "mediaTop" ? "flex-col" : "flex-col-reverse";
+  const contentArea = /* @__PURE__ */ jsxs(
+    "div",
     {
-      background,
-      spacing,
-      pattern,
-      patternOpacity,
-      className: cn(className),
-      containerClassName,
+      className: cn(
+        "relative flex w-full items-center lg:w-1/2",
+        bgColorClass,
+        contentClassName
+      ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "container my-10 flex w-[500px] flex-col gap-24", children: [
-          (brandText || brandHighlight) && /* @__PURE__ */ jsxs("h1", { className: cn("text-4xl text-foreground", brandTextClassName), children: [
-            brandText,
-            " ",
-            brandHighlight && /* @__PURE__ */ jsx("span", { className: cn("bg-gradient-to-tr from-foreground to-muted bg-clip-text text-transparent", brandHighlightClassName), children: brandHighlight })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-4xl text-foreground lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-2.5 text-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-2.5", descriptionClassName), children: description })),
-            ctaContent
-          ] })
-        ] }),
-        imageSrc && /* @__PURE__ */ jsx(
-          Img,
-          {
-            src: imageSrc,
-            alt: imageAlt || "",
-            className: cn("hidden h-screen w-1/2 object-cover lg:block", imageClassName),
-            optixFlowConfig
-          }
-        )
+        pattern && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: /* @__PURE__ */ jsx(PatternBackground, { pattern, opacity: patternOpacity }) }),
+        /* @__PURE__ */ jsx("div", { className: "relative z-10 w-full px-8 py-16 sm:px-12 sm:py-20 lg:px-16 lg:py-24 xl:px-24", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-xl space-y-8", children: [
+          (brandText || brandHighlight) && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "text-xl font-semibold uppercase tracking-wider sm:text-2xl",
+                brandTextClassName
+              ),
+              children: [
+                brandText,
+                brandText && brandHighlight && " ",
+                brandHighlight && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "bg-linear-to-r from-primary to-primary/60 bg-clip-text text-transparent",
+                      brandHighlightClassName
+                    ),
+                    children: brandHighlight
+                  }
+                )
+              ]
+            }
+          ),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "text-3xl font-bold leading-tight tracking-tight sm:text-4xl lg:text-5xl xl:text-6xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-base leading-relaxed opacity-90 sm:text-lg",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          ctaContent && /* @__PURE__ */ jsx("div", { className: "pt-4", children: ctaContent })
+        ] }) })
       ]
     }
   );
+  const imageArea = imageSrc ? /* @__PURE__ */ jsx("div", { className: "relative h-64 w-full sm:h-96 lg:h-auto lg:w-1/2", children: /* @__PURE__ */ jsx(
+    Img,
+    {
+      src: imageSrc,
+      alt: imageAlt || "",
+      className: cn("h-full w-full object-cover", imageClassName),
+      optixFlowConfig
+    }
+  ) }) : null;
+  return /* @__PURE__ */ jsx("section", { className: cn("relative w-full overflow-hidden", className), children: /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-screen", mobileOrder, desktopOrder), children: [
+    contentArea,
+    imageArea
+  ] }) });
 }
 function AboutMissionPrinciples({
   badgeText,
@@ -36956,7 +37199,7 @@ function AboutMissionPrinciples({
     return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 gap-6 sm:grid-cols-2", principlesClassName), children: principles.map((principle, idx) => /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "relative rounded-lg border p-6 transition-colors hover:bg-accent/50",
+        className: "relative rounded-lg border p-6 transition-colors hover:bg-muted",
         children: [
           principle.number && /* @__PURE__ */ jsx("div", { className: "absolute right-4 top-4 text-3xl font-bold text-primary/20", children: principle.number }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
@@ -37013,10 +37256,10 @@ function AboutMissionPrinciples({
           ] }),
           principlesContent
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("mt-24 rounded-lg bg-accent p-8 lg:p-12", visionClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-3", children: [
+        /* @__PURE__ */ jsx("div", { className: cn("mt-24 rounded-lg bg-muted p-8 lg:p-12", visionClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2", children: [
             visionHeading && (typeof visionHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-2xl font-bold", visionHeadingClassName), children: visionHeading }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", visionHeadingClassName), children: visionHeading })),
-            visionDescription && (typeof visionDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-4 text-muted-foreground", visionDescriptionClassName), children: visionDescription }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", visionDescriptionClassName), children: visionDescription }))
+            visionDescription && (typeof visionDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-4 text-foreground/80", visionDescriptionClassName), children: visionDescription }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", visionDescriptionClassName), children: visionDescription }))
           ] }),
           /* @__PURE__ */ jsx("div", { className: "flex justify-center lg:col-span-1 lg:justify-end", children: visionActionContent })
         ] }) })
@@ -37073,7 +37316,7 @@ function AboutExpandableValues({
   const valuesContent = useMemo$1(() => {
     if (valuesSlot) return valuesSlot;
     if (!values || values.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3", valuesClassName), children: values.map((value) => /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 gap-6 mt-8", valuesClassName), children: values.map((value) => /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
@@ -37089,7 +37332,7 @@ function AboutExpandableValues({
               type: "button",
               children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
-                  /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 rounded-md bg-primary/10 p-3", children: value.icon }),
+                  /* @__PURE__ */ jsx("div", { className: "shrink-0 rounded-md bg-primary/10 p-3", children: value.icon }),
                   /* @__PURE__ */ jsxs("div", { children: [
                     value.title && (typeof value.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold", children: value.title }) : value.title),
                     value.shortDescription && (typeof value.shortDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: value.shortDescription }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: value.shortDescription }))
@@ -37101,7 +37344,7 @@ function AboutExpandableValues({
                     name: "lucide/chevron-down",
                     size: 20,
                     className: cn(
-                      "mt-1 flex-shrink-0 text-muted-foreground transition-transform duration-300",
+                      "mt-1 shrink-0 text-muted-foreground transition-transform duration-300",
                       expandedValue === value.id ? "rotate-180" : ""
                     )
                   }
@@ -37114,7 +37357,7 @@ function AboutExpandableValues({
             value.examples && value.examples.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsx("h4", { className: "mb-2 text-sm font-semibold text-muted-foreground", children: "How we put this into practice:" }),
               /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: value.examples.map((example, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2", children: [
-                /* @__PURE__ */ jsx("div", { className: "mt-0.5 flex-shrink-0 rounded-full bg-primary/10 p-1", children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx("div", { className: "mt-1 flex size-5 shrink-0 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(
                   DynamicIcon,
                   {
                     name: "lucide/check",
@@ -37122,7 +37365,7 @@ function AboutExpandableValues({
                     className: "text-primary"
                   }
                 ) }),
-                typeof example === "string" ? /* @__PURE__ */ jsx("span", { className: "text-sm", children: example }) : example
+                typeof example === "string" ? /* @__PURE__ */ jsx("span", { className: "text-sm pt-2", children: example }) : example
               ] }, index)) })
             ] })
           ] })
@@ -37141,17 +37384,68 @@ function AboutExpandableValues({
       className: cn(className),
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-3xl space-y-4 text-center", headerClassName), children: [
-          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx("div", { className: cn("inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm text-primary", badgeClassName), children: badgeText }) : /* @__PURE__ */ jsx("div", { className: badgeClassName, children: badgeText })),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold tracking-tight", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto max-w-3xl space-y-4 text-center",
+              headerClassName
+            ),
+            children: [
+              badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm text-primary",
+                    badgeClassName
+                  ),
+                  children: badgeText
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: badgeClassName, children: badgeText })),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "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(
+                    "text-muted-foreground text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+            ]
+          }
+        ),
         valuesContent,
-        /* @__PURE__ */ jsx("div", { className: cn("relative mt-8 rounded-lg bg-accent/50 p-8", ctaClassName), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl space-y-6 text-center", children: [
-          ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : /* @__PURE__ */ jsx("div", { className: ctaHeadingClassName, children: ctaHeading })),
-          ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", ctaDescriptionClassName), children: ctaDescription }) : /* @__PURE__ */ jsx("div", { className: ctaDescriptionClassName, children: ctaDescription })),
-          actionsContent
-        ] }) })
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "relative mt-8 rounded-lg bg-accent/50 p-8",
+              ctaClassName
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl space-y-6 text-center", children: [
+              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : /* @__PURE__ */ jsx("div", { className: ctaHeadingClassName, children: ctaHeading })),
+              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn("text-muted-foreground", ctaDescriptionClassName),
+                  children: ctaDescription
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: ctaDescriptionClassName, children: ctaDescription })),
+              actionsContent
+            ] })
+          }
+        )
       ]
     }
   );
@@ -37358,24 +37652,33 @@ function CommunityInitiatives({
     categories?.[0]?.id || ""
   );
   const currentCategory = categories?.find((category) => category.id === activeCategory) || categories?.[0];
-  const handleCategoryChange = useCallback((e) => {
-    setActiveCategory(e.target.value);
-  }, []);
+  const handleCategoryChange = useCallback(
+    (e) => {
+      setActiveCategory(e.target.value);
+    },
+    []
+  );
   const actionsContent = useMemo$1(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap justify-center gap-4", actionsClassName), children: actions.map((action, idx) => /* @__PURE__ */ jsx(
-      Pressable,
+    return /* @__PURE__ */ jsx(
+      "div",
       {
-        href: action.href,
-        onClick: action.onClick,
-        variant: action.variant || "default",
-        size: action.size || "lg",
-        asButton: true,
-        children: action.label
-      },
-      idx
-    )) });
+        className: cn("flex flex-wrap justify-center gap-4", actionsClassName),
+        children: actions.map((action, idx) => /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            href: action.href,
+            onClick: action.onClick,
+            variant: action.variant || "default",
+            size: action.size || "lg",
+            asButton: true,
+            children: action.label
+          },
+          idx
+        ))
+      }
+    );
   }, [actionsSlot, actions, actionsClassName]);
   const categoriesContent = useMemo$1(() => {
     if (categoriesSlot) return categoriesSlot;
@@ -37389,7 +37692,7 @@ function CommunityInitiatives({
         className: cn("space-y-8", tabsClassName),
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex justify-center", children: [
-            /* @__PURE__ */ jsx("div", { className: "mb-6 w-full md:hidden", children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("div", { className: "mb-0 md:mb-6 w-full md:hidden", children: /* @__PURE__ */ jsx(
               "select",
               {
                 value: activeCategory,
@@ -37408,7 +37711,7 @@ function CommunityInitiatives({
               category.id
             )) })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-2xl text-center", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: currentCategory?.description }) }),
+          /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: currentCategory?.description }) }),
           categories.map((category) => /* @__PURE__ */ jsx(
             TabsContent,
             {
@@ -37501,7 +37804,16 @@ function CommunityInitiatives({
         ]
       }
     );
-  }, [categoriesSlot, categories, activeCategory, setActiveCategory, tabsClassName, handleCategoryChange, currentCategory, optixFlowConfig]);
+  }, [
+    categoriesSlot,
+    categories,
+    activeCategory,
+    setActiveCategory,
+    tabsClassName,
+    handleCategoryChange,
+    currentCategory,
+    optixFlowConfig
+  ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -37512,16 +37824,58 @@ function CommunityInitiatives({
       className: cn(className),
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mx-auto mb-16 max-w-3xl space-y-4 text-center", headerClassName), children: [
-          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx("div", { className: cn("inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm text-primary", badgeClassName), children: badgeText }) : /* @__PURE__ */ jsx("div", { className: badgeClassName, children: badgeText })),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto mb-8 md:mb-16 max-w-3xl space-y-4 text-center",
+              headerClassName
+            ),
+            children: [
+              badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm text-primary",
+                    badgeClassName
+                  ),
+                  children: badgeText
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: badgeClassName, children: badgeText })),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-bold tracking-tight md:text-4xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+            ]
+          }
+        ),
         categoriesContent,
         /* @__PURE__ */ jsxs("div", { className: cn("mt-20 text-center", ctaClassName), children: [
           ctaBadgeText && /* @__PURE__ */ jsx("div", { className: "mb-8 inline-flex items-center justify-center rounded-full bg-muted p-1", children: /* @__PURE__ */ jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText }) }),
           ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", ctaHeadingClassName), children: ctaHeading })),
-          ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto mb-8 max-w-2xl text-muted-foreground", ctaDescriptionClassName), children: ctaDescription }) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName), children: ctaDescription })),
+          ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto mb-8 max-w-2xl text-muted-foreground",
+                ctaDescriptionClassName
+              ),
+              children: ctaDescription
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName),
+              children: ctaDescription
+            }
+          )),
           actionsContent
         ] })
       ]