@opensite/ui 0.5.6 → 0.5.8

package/dist/registry.cjs

@@ -544,7 +544,16 @@ function AboutMissionFeatures({
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
     return features.map((feature, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-5 flex size-12 items-center justify-center rounded-2xl bg-primary text-primary-foreground", feature.iconBgClass), children: feature.icon }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "mb-5 flex size-12 items-center justify-center rounded-2xl bg-primary text-primary-foreground",
+            feature.iconBgClass
+          ),
+          children: feature.icon
+        }
+      ),
       feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-2 mb-3 text-lg font-semibold", children: feature.title }) : feature.title),
       feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: feature.description }) : feature.description)
     ] }, idx));
@@ -557,9 +566,18 @@ function AboutMissionFeatures({
       pattern,
       patternOpacity,
       className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-16 lg:gap-28", containerClassName), children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8 lg:gap-16", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 lg:gap-8", children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-semibold tracking-tighter lg:text-7xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-semibold tracking-tighter lg:text-7xl",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-xl text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [
@@ -568,14 +586,20 @@ function AboutMissionFeatures({
             {
               src: mainImage.src,
               alt: mainImage.alt,
-              className: cn("size-full max-h-96 rounded-2xl object-cover", mainImageClassName),
+              className: cn(
+                "size-full max-h-96 rounded-2xl object-cover",
+                mainImageClassName
+              ),
               optixFlowConfig
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: cn("relative flex flex-col justify-between gap-10 overflow-hidden rounded-2xl bg-muted p-10", missionSectionClassName),
+              className: cn(
+                "relative flex flex-col justify-between gap-10 overflow-hidden rounded-2xl bg-muted p-10",
+                missionSectionClassName
+              ),
               children: [
                 missionBackgroundImage && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -587,18 +611,54 @@ function AboutMissionFeatures({
                       optixFlowConfig
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/50 to-black/30" })
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-t from-black/80 via-black/50 to-black/30" })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10", children: missionLabel && (typeof missionLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm font-semibold text-white", missionLabelClassName), children: missionLabel }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: missionLabelClassName, children: missionLabel })) }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10", children: missionText && (typeof missionText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg font-medium text-white", missionTextClassName), children: missionText }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: missionTextClassName, children: missionText })) })
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10", children: missionLabel && (typeof missionLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "text-sm font-semibold text-white",
+                      missionLabelClassName
+                    ),
+                    children: missionLabel
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: missionLabelClassName, children: missionLabel })) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10", children: missionText && (typeof missionText === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "text-lg font-medium text-white",
+                      missionTextClassName
+                    ),
+                    children: missionText
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: missionTextClassName, children: missionText })) })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 md:gap-20", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 md:gap-12", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-xl", children: [
-            featuresTitle && (typeof featuresTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-4 text-3xl font-semibold tracking-tight md:text-5xl", featuresTitleClassName), children: featuresTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: featuresTitleClassName, children: featuresTitle })),
-            featuresDescription && (typeof featuresDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", featuresDescriptionClassName), children: featuresDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: featuresDescriptionClassName, children: featuresDescription }))
+            featuresTitle && (typeof featuresTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h2",
+              {
+                className: cn(
+                  "mb-4 text-2xl font-semibold tracking-tight md:text-4xl",
+                  featuresTitleClassName
+                ),
+                children: featuresTitle
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: featuresTitleClassName, children: featuresTitle })),
+            featuresDescription && (typeof featuresDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "text-lg text-muted-foreground",
+                  featuresDescriptionClassName
+                ),
+                children: featuresDescription
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: featuresDescriptionClassName, children: featuresDescription }))
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-10 md:grid-cols-3", featuresClassName), children: featuresContent })
         ] })
@@ -657,76 +717,129 @@ function AboutStatsShowcase({
   const statsContent = React52.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-2 gap-6 md:grid-cols-3", statsClassName), children: stats.map((stat, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 border-b pb-8", children: [
-      stat.value && (typeof stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-4xl font-medium md:text-5xl", children: stat.value }) : stat.value),
-      stat.label && (typeof stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: stat.label }) : stat.label)
-    ] }, idx)) });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn("grid grid-cols-2 gap-6 md:grid-cols-3", statsClassName),
+        children: stats.map((stat, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 border-b pb-8", children: [
+          stat.value && (typeof stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-4xl font-medium md:text-5xl", children: stat.value }) : stat.value),
+          stat.label && (typeof stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: stat.label }) : stat.label)
+        ] }, idx))
+      }
+    );
   }, [statsSlot, stats, statsClassName]);
   const logosContent = React52.useMemo(() => {
     if (logosSlot) return logosSlot;
     if (!logos || logos.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted/50 py-24", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col items-center gap-11", children: [
-      logosTitle && (typeof logosTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-xl font-medium", logosTitleClassName), children: logosTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: logosTitleClassName, children: logosTitle })),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-2 gap-x-7 gap-y-12 lg:grid-cols-4", logosClassName), children: logos.map((logo, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          img.Img,
-          {
-            src: logo.src,
-            alt: logo.alt,
-            className: "h-8 w-auto md:h-14",
-            optixFlowConfig
-          }
-        ),
-        logo.name && (typeof logo.name === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xl font-semibold md:text-4xl", children: logo.name }) : logo.name)
-      ] }, idx)) })
+      logosTitle && (typeof logosTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: cn(
+            "text-center text-xl font-medium",
+            logosTitleClassName
+          ),
+          children: logosTitle
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: logosTitleClassName, children: logosTitle })),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "grid grid-cols-2 gap-x-7 gap-y-12 lg:grid-cols-4",
+            logosClassName
+          ),
+          children: logos.map((logo, idx) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: logo.src,
+              alt: logo.alt,
+              className: "h-8 object-contain w-auto md:h-14 max-h-24",
+              optixFlowConfig
+            }
+          ) }, idx))
+        }
+      )
     ] }) });
-  }, [logosSlot, logos, logosTitle, logosTitleClassName, logosClassName, optixFlowConfig]);
+  }, [
+    logosSlot,
+    logos,
+    logosTitle,
+    logosTitleClassName,
+    logosClassName,
+    optixFlowConfig
+  ]);
   const benefitsContent = React52.useMemo(() => {
     if (benefitsSlot) return benefitsSlot;
     if (!benefits || benefits.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col items-center gap-14", children: [
-      benefitsTitle && (typeof benefitsTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-center text-4xl font-semibold md:text-5xl", benefitsTitleClassName), children: benefitsTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: benefitsTitleClassName, children: benefitsTitle })),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 md:grid-cols-2 lg:grid-cols-3", benefitsClassName), children: benefits.map((benefit, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
-        benefit.image && /* @__PURE__ */ jsxRuntime.jsx(
-          img.Img,
-          {
-            src: benefit.image.src,
-            alt: benefit.image.alt,
-            className: "max-h-96 w-full rounded-xl object-cover",
-            optixFlowConfig
-          }
-        ),
-        benefit.stat && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center rounded-xl bg-muted p-8", children: [
-          benefit.stat.value && (typeof benefit.stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-4xl font-medium", children: benefit.stat.value }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: benefit.stat.value })),
-          benefit.stat.label && (typeof benefit.stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 font-semibold", children: benefit.stat.label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: benefit.stat.label })),
-          benefit.stat.description && (typeof benefit.stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: benefit.stat.description }) : benefit.stat.description)
-        ] }),
-        benefit.testimonial && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl bg-background p-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 flex items-center gap-2", children: [
-            benefit.testimonial.logo && /* @__PURE__ */ jsxRuntime.jsx(
+      benefitsTitle && (typeof benefitsTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+        "h2",
+        {
+          className: cn(
+            "text-center font-semibold text-2xl md:text-3xl",
+            benefitsTitleClassName
+          ),
+          children: benefitsTitle
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: benefitsTitleClassName, children: benefitsTitle })),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+            benefitsClassName
+          ),
+          children: benefits.map((benefit, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
+            benefit.image && /* @__PURE__ */ jsxRuntime.jsx(
               img.Img,
               {
-                src: benefit.testimonial.logo.src,
-                alt: benefit.testimonial.logo.alt,
-                className: "h-7 w-auto",
+                src: benefit.image.src,
+                alt: benefit.image.alt,
+                className: "max-h-96 w-full rounded-xl object-cover",
                 optixFlowConfig
               }
             ),
-            benefit.testimonial.company && (typeof benefit.testimonial.company === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold", children: benefit.testimonial.company }) : benefit.testimonial.company)
-          ] }),
-          benefit.testimonial.quote && (typeof benefit.testimonial.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 text-sm", children: benefit.testimonial.quote }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: benefit.testimonial.quote })),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-1", children: [
-            benefit.testimonial.author && (typeof benefit.testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
-              benefit.testimonial.author,
-              ","
-            ] }) : benefit.testimonial.author),
-            benefit.testimonial.role && (typeof benefit.testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: benefit.testimonial.role }) : benefit.testimonial.role)
-          ] })
-        ] })
-      ] }, idx)) })
+            benefit.stat && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center rounded-xl bg-muted p-8", children: [
+              benefit.stat.value && (typeof benefit.stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-4xl font-medium", children: benefit.stat.value }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: benefit.stat.value })),
+              benefit.stat.label && (typeof benefit.stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 font-semibold", children: benefit.stat.label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: benefit.stat.label })),
+              benefit.stat.description && (typeof benefit.stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: benefit.stat.description }) : benefit.stat.description)
+            ] }),
+            benefit.testimonial && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl bg-background p-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 flex items-center gap-2", children: [
+                benefit.testimonial.logo && /* @__PURE__ */ jsxRuntime.jsx(
+                  img.Img,
+                  {
+                    src: benefit.testimonial.logo.src,
+                    alt: benefit.testimonial.logo.alt,
+                    className: "h-7 w-auto",
+                    optixFlowConfig
+                  }
+                ),
+                benefit.testimonial.company && (typeof benefit.testimonial.company === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold", children: benefit.testimonial.company }) : benefit.testimonial.company)
+              ] }),
+              benefit.testimonial.quote && (typeof benefit.testimonial.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 text-sm", children: benefit.testimonial.quote }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: benefit.testimonial.quote })),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-1", children: [
+                benefit.testimonial.author && (typeof benefit.testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
+                  benefit.testimonial.author,
+                  ","
+                ] }) : benefit.testimonial.author),
+                benefit.testimonial.role && (typeof benefit.testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: benefit.testimonial.role }) : benefit.testimonial.role)
+              ] })
+            ] })
+          ] }, idx))
+        }
+      )
     ] });
-  }, [benefitsSlot, benefits, benefitsTitle, benefitsTitleClassName, benefitsClassName, optixFlowConfig]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  }, [
+    benefitsSlot,
+    benefits,
+    benefitsTitle,
+    benefitsTitleClassName,
+    benefitsClassName,
+    optixFlowConfig
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
@@ -735,21 +848,48 @@ function AboutStatsShowcase({
       patternOpacity,
       className: cn(className),
       containerClassName,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col gap-10 text-center md:gap-24", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-10 md:gap-24", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-10 text-center md:gap-24 mb-4 md:mb-8", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex max-w-3xl flex-col gap-6", children: [
-            title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-medium md:text-6xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+            title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h1",
+              {
+                className: cn(
+                  "text-4xl font-medium md:text-6xl text-balance",
+                  titleClassName
+                ),
+                children: title
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "text-lg text-muted-foreground md:text-xl text-balance",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
           ] }),
           imagesContent
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col gap-16", children: [
-          statsTitle && (typeof statsTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("max-w-3xl text-4xl font-medium md:text-5xl", statsTitleClassName), children: statsTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: statsTitleClassName, children: statsTitle })),
+          statsTitle && (typeof statsTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "max-w-3xl font-medium text-2xl md:text-3xl",
+                statsTitleClassName
+              ),
+              children: statsTitle
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: statsTitleClassName, children: statsTitle })),
           statsContent
         ] }),
         logosContent,
         benefitsContent
-      ]
+      ] })
     }
   );
 }
@@ -1205,39 +1345,49 @@ function AboutCompanyProfile({
   const breakoutContent = React52.useMemo(() => {
     if (breakoutSlot) return breakoutSlot;
     if (!breakout) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col justify-between gap-6 rounded-xl bg-muted p-7 md:w-1/2 lg:w-auto", breakoutClassName), children: [
-      breakout.logo && /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: breakout.logo.src,
-          alt: breakout.logo.alt,
-          className: "mr-auto h-12 dark:invert",
-          optixFlowConfig
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        typeof breakout.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-lg font-semibold", children: breakout.title }) : breakout.title,
-        typeof breakout.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: breakout.description }) : breakout.description
-      ] }),
-      breakout.action && /* @__PURE__ */ jsxRuntime.jsx(
-        Pressable,
-        {
-          href: breakout.action.href,
-          variant: breakout.action.variant || "outline",
-          asButton: true,
-          className: cn("mr-auto", breakout.action.className),
-          children: breakout.action.children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            breakout.action.icon,
-            breakout.action.label,
-            breakout.action.iconAfter
-          ] })
-        }
-      )
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-col justify-between gap-6 rounded-xl bg-muted p-7 md:w-1/2 lg:w-auto",
+          breakoutClassName
+        ),
+        children: [
+          breakout.logo && /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: breakout.logo.src,
+              alt: breakout.logo.alt,
+              className: "mr-auto h-12 dark:invert",
+              optixFlowConfig
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            typeof breakout.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-lg font-semibold", children: breakout.title }) : breakout.title,
+            typeof breakout.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: breakout.description }) : breakout.description
+          ] }),
+          breakout.action && /* @__PURE__ */ jsxRuntime.jsx(
+            Pressable,
+            {
+              href: breakout.action.href,
+              variant: breakout.action.variant || "outline",
+              asButton: true,
+              className: cn("mr-auto", breakout.action.className),
+              children: breakout.action.children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                breakout.action.icon,
+                breakout.action.label,
+                breakout.action.iconAfter
+              ] })
+            }
+          )
+        ]
+      }
+    );
   }, [breakoutSlot, breakout, breakoutClassName, optixFlowConfig]);
   const companiesContent = React52.useMemo(() => {
     if (companiesSlot) return companiesSlot;
-    if (!companies || companies.length === 0) return null;
+    if (!companies || companies.length === 0)
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-7" });
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("py-32", companiesClassName), children: [
       companiesTitle && (typeof companiesTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center", children: companiesTitle }) : companiesTitle),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-8 flex flex-wrap justify-center gap-8", children: companies.map((company, idx) => {
@@ -1274,7 +1424,13 @@ function AboutCompanyProfile({
         ] }, idx);
       }) })
     ] });
-  }, [companiesSlot, companies, companiesClassName, companiesTitle, optixFlowConfig]);
+  }, [
+    companiesSlot,
+    companies,
+    companiesClassName,
+    companiesTitle,
+    optixFlowConfig
+  ]);
   const achievementsContent = React52.useMemo(() => {
     if (achievementsSlot) return achievementsSlot;
     if (!achievements || achievements.length === 0) return null;
@@ -1303,7 +1459,10 @@ function AboutCompanyProfile({
             {
               src: mainImage.src,
               alt: mainImage.alt,
-              className: cn("size-full max-h-[620px] rounded-xl object-cover lg:col-span-2", mainImageClassName),
+              className: cn(
+                "size-full max-h-[620px] rounded-xl object-cover lg:col-span-2",
+                mainImageClassName
+              ),
               optixFlowConfig
             }
           ),
@@ -1314,20 +1473,50 @@ function AboutCompanyProfile({
               {
                 src: secondaryImage.src,
                 alt: secondaryImage.alt,
-                className: cn("grow basis-0 rounded-xl object-cover md:w-1/2 lg:min-h-0 lg:w-auto", secondaryImageClassName),
+                className: cn(
+                  "grow basis-0 rounded-xl object-cover md:w-1/2 lg:min-h-0 lg:w-auto",
+                  secondaryImageClassName
+                ),
                 optixFlowConfig
               }
             )
           ] })
         ] }),
-        (companiesSlot || companies && companies.length > 0) && companiesContent,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative overflow-hidden rounded-xl bg-muted p-7 md:p-16", achievementsClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 text-center md:text-left", children: [
-            achievementsTitle && (typeof achievementsTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-semibold md:text-4xl", achievementsTitleClassName), children: achievementsTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: achievementsTitleClassName, children: achievementsTitle })),
-            achievementsDescription && (typeof achievementsDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-xl text-muted-foreground", achievementsDescriptionClassName), children: achievementsDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: achievementsDescriptionClassName, children: achievementsDescription }))
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-10 grid grid-cols-2 gap-x-4 gap-y-8 text-center lg:grid-cols-4", children: achievementsContent })
-        ] })
+        companiesContent,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "relative overflow-hidden rounded-xl bg-muted p-7 md:p-16",
+              achievementsClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 text-center md:text-left", children: [
+                achievementsTitle && (typeof achievementsTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "h2",
+                  {
+                    className: cn(
+                      "text-3xl font-semibold md:text-4xl",
+                      achievementsTitleClassName
+                    ),
+                    children: achievementsTitle
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: achievementsTitleClassName, children: achievementsTitle })),
+                achievementsDescription && (typeof achievementsDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "max-w-xl text-muted-foreground",
+                      achievementsDescriptionClassName
+                    ),
+                    children: achievementsDescription
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: achievementsDescriptionClassName, children: achievementsDescription }))
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-10 grid grid-cols-2 gap-x-4 gap-y-8 text-center lg:grid-cols-4", children: achievementsContent })
+            ]
+          }
+        )
       ]
     }
   );
@@ -1366,16 +1555,25 @@ function AboutVisionGallery({
   const imagesContent = React52.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-3 md:grid-cols-2 lg:grid-cols-3", imagesClassName), children: images.map((image, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        src: image.src,
-        alt: image.alt,
-        className: "max-h-80 w-full object-cover",
-        optixFlowConfig
-      },
-      idx
-    )) });
+        className: cn(
+          "grid gap-3 md:grid-cols-2 lg:grid-cols-3",
+          imagesClassName
+        ),
+        children: images.map((image, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: image.src,
+            alt: image.alt,
+            className: "max-h-80 w-full object-cover",
+            optixFlowConfig
+          },
+          idx
+        ))
+      }
+    );
   }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
   const ctaContent = React52.useMemo(() => {
     if (ctaSlot) return ctaSlot;
@@ -1405,28 +1603,107 @@ function AboutVisionGallery({
       className: cn(className),
       containerClassName,
       children: [
-        (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex max-w-3xl flex-col gap-8 pb-28 text-center", children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-semibold md:text-7xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xl font-medium text-muted-foreground", subtitleClassName), children: subtitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subtitleClassName, children: subtitle }))
+        (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex max-w-3xl flex-col gap-8 pb-6 md:pb-18 text-center", children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-semibold md:text-7xl text-balance",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-xl font-medium text-muted-foreground text-balance",
+                subtitleClassName
+              ),
+              children: subtitle
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subtitleClassName, children: subtitle }))
         ] }),
         imagesContent,
-        (hasPrimarySection || hasSecondarySection) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto grid max-w-5xl gap-28 py-28 md:grid-cols-2", children: [
+        (hasPrimarySection || hasSecondarySection) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto grid max-w-5xl gap:7 md:gap-28 py-6 md:py-16 md:grid-cols-2", children: [
           hasPrimarySection && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            primarySectionTitle && (typeof primarySectionTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-5 text-4xl font-semibold", primarySectionTitleClassName), children: primarySectionTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-5", primarySectionTitleClassName), children: primarySectionTitle })),
-            primarySectionContent && (typeof primarySectionContent === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xl leading-8 font-medium text-muted-foreground whitespace-pre-line", primarySectionContentClassName), children: primarySectionContent }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: primarySectionContentClassName, children: primarySectionContent }))
+            primarySectionTitle && (typeof primarySectionTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h2",
+              {
+                className: cn(
+                  "mb-5 text-4xl font-semibold",
+                  primarySectionTitleClassName
+                ),
+                children: primarySectionTitle
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-5", primarySectionTitleClassName), children: primarySectionTitle })),
+            primarySectionContent && (typeof primarySectionContent === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "text-normal md:text-xl leading-8 font-medium text-muted-foreground whitespace-pre-line",
+                  primarySectionContentClassName
+                ),
+                children: primarySectionContent
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: primarySectionContentClassName, children: primarySectionContent }))
           ] }),
           hasSecondarySection && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            secondarySectionTitle && (typeof secondarySectionTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-5 text-4xl font-semibold", secondarySectionTitleClassName), children: secondarySectionTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-5", secondarySectionTitleClassName), children: secondarySectionTitle })),
-            (secondarySectionContent || secondarySectionLinkText) && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("text-xl leading-8 font-medium text-muted-foreground", secondarySectionContentClassName), children: [
-              secondarySectionLinkText && secondarySectionLinkUrl && /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: secondarySectionLinkUrl, className: "mr-1 underline", children: secondarySectionLinkText }),
-              secondarySectionContent
-            ] })
+            secondarySectionTitle && (typeof secondarySectionTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h2",
+              {
+                className: cn(
+                  "mb-5 text-4xl font-semibold",
+                  secondarySectionTitleClassName
+                ),
+                children: secondarySectionTitle
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-5", secondarySectionTitleClassName), children: secondarySectionTitle })),
+            (secondarySectionContent || secondarySectionLinkText) && /* @__PURE__ */ jsxRuntime.jsxs(
+              "p",
+              {
+                className: cn(
+                  "text-normal md:text-xl leading-8 font-medium text-muted-foreground",
+                  secondarySectionContentClassName
+                ),
+                children: [
+                  secondarySectionLinkText && secondarySectionLinkUrl && /* @__PURE__ */ jsxRuntime.jsx(
+                    Pressable,
+                    {
+                      href: secondarySectionLinkUrl,
+                      className: "mr-1 underline",
+                      children: secondarySectionLinkText
+                    }
+                  ),
+                  secondarySectionContent
+                ]
+              }
+            )
           ] })
         ] }),
-        hasCtaSection && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex max-w-5xl flex-col items-center justify-between gap-8 rounded-2xl bg-muted/50 p-14 text-center md:flex-row md:text-left", ctaClassName), children: [
-          ctaTitle && (typeof ctaTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-3xl font-semibold whitespace-pre-line", ctaTitleClassName), children: ctaTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: ctaTitleClassName, children: ctaTitle })),
-          ctaContent
-        ] })
+        hasCtaSection && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto flex max-w-5xl flex-col items-center justify-between gap-8 rounded-2xl bg-muted/50 p-14 text-center md:flex-row md:text-left",
+              ctaClassName
+            ),
+            children: [
+              ctaTitle && (typeof ctaTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h3",
+                {
+                  className: cn(
+                    "text-3xl font-semibold whitespace-pre-line",
+                    ctaTitleClassName
+                  ),
+                  children: ctaTitle
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: ctaTitleClassName, children: ctaTitle })),
+              ctaContent
+            ]
+          }
+        )
       ]
     }
   );
@@ -1567,67 +1844,98 @@ function AboutDeveloperStory({
   const actionsContent = React52.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap justify-center gap-4", actionsClassName), children: actions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-      Pressable,
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        href: action.href,
-        onClick: action.onClick,
-        size: action.size || "lg",
-        variant: action.variant || "default",
-        asButton: true,
-        children: [
-          action.label,
-          idx === 1 && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16, className: "ml-2" })
-        ]
-      },
-      idx
-    )) });
-  }, [actionsSlot, actions, actionsClassName]);
-  const logosContent = React52.useMemo(() => {
-    if (logosSlot) return logosSlot;
-    if (!logos || logos.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-20 flex flex-wrap items-center justify-center gap-8 opacity-60", logosClassName), children: logos.map((logo, idx) => {
-      if (typeof logo.src === "string") {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          img.Img,
+        className: cn("flex flex-wrap justify-center gap-4", actionsClassName),
+        children: actions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+          Pressable,
           {
-            src: logo.src,
-            alt: logo.alt,
-            className: "h-8 w-auto grayscale",
-            optixFlowConfig
+            href: action.href,
+            onClick: action.onClick,
+            size: action.size || "lg",
+            variant: action.variant || "default",
+            asButton: true,
+            children: [
+              action.label,
+              idx === 1 && /* @__PURE__ */ jsxRuntime.jsx(
+                DynamicIcon,
+                {
+                  name: "lucide/arrow-right",
+                  size: 16,
+                  className: "ml-2"
+                }
+              )
+            ]
           },
           idx
-        );
+        ))
       }
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-8", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          img.Img,
-          {
-            src: logo.src.light,
-            alt: logo.alt,
-            className: "h-8 w-auto grayscale dark:hidden",
-            optixFlowConfig
-          }
+    );
+  }, [actionsSlot, actions, actionsClassName]);
+  const logosContent = React52.useMemo(() => {
+    if (logosSlot) return logosSlot;
+    if (!logos || logos.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "mt-20 flex flex-wrap items-center justify-center gap-8 opacity-60",
+          logosClassName
         ),
-        logo.src.dark && /* @__PURE__ */ jsxRuntime.jsx(
-          img.Img,
-          {
-            src: logo.src.dark,
-            alt: logo.alt,
-            className: "hidden h-8 w-auto grayscale dark:block",
-            optixFlowConfig
+        children: logos.map((logo, idx) => {
+          if (typeof logo.src === "string") {
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: logo.src,
+                alt: logo.alt,
+                className: "h-8 w-auto grayscale",
+                optixFlowConfig
+              },
+              idx
+            );
           }
-        )
-      ] }, idx);
-    }) });
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-8", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: logo.src.light,
+                alt: logo.alt,
+                className: "h-42 w-auto object-contain grayscale dark:hidden",
+                optixFlowConfig
+              }
+            ),
+            logo.src.dark && /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: logo.src.dark,
+                alt: logo.alt,
+                className: "hidden h-42 w-auto object-contain grayscale dark:block",
+                optixFlowConfig
+              }
+            )
+          ] }, idx);
+        })
+      }
+    );
   }, [logosSlot, logos, logosClassName, optixFlowConfig]);
   const statsContent = React52.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-20 grid grid-cols-1 gap-8 border-y py-12 md:grid-cols-3", statsClassName), children: stats.map((stat, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-      stat.value && (typeof stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-4xl font-bold", children: stat.value }) : stat.value),
-      stat.label && (typeof stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-muted-foreground", children: stat.label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: stat.label }))
-    ] }, idx)) });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "mt-20 grid grid-cols-1 gap-8 border-y py-12 md:grid-cols-3",
+          statsClassName
+        ),
+        children: stats.map((stat, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+          stat.value && (typeof stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-4xl font-bold", children: stat.value }) : stat.value),
+          stat.label && (typeof stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-muted-foreground", children: stat.label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: stat.label }))
+        ] }, idx))
+      }
+    );
   }, [statsSlot, stats, statsClassName]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -1640,23 +1948,62 @@ function AboutDeveloperStory({
       containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex max-w-4xl flex-col items-center gap-8 text-center", children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-6xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-2xl text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-bold tracking-tight md:text-6xl text-balance",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "max-w-2xl text-lg text-muted-foreground md:text-xl text-balance",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           actionsContent
         ] }),
         logosContent,
         statsContent,
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-20 grid gap-12 md:grid-cols-2 md:items-center", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            storyTitle && (typeof storyTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", storyTitleClassName), children: storyTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: storyTitleClassName, children: storyTitle })),
-            storyContent && (typeof storyContent === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 text-lg text-muted-foreground whitespace-pre-line", storyContentClassName), children: storyContent }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6", storyContentClassName), children: storyContent }))
+            storyTitle && (typeof storyTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h2",
+              {
+                className: cn(
+                  "text-3xl font-bold md:text-4xl",
+                  storyTitleClassName
+                ),
+                children: storyTitle
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: storyTitleClassName, children: storyTitle })),
+            storyContent && (typeof storyContent === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "mt-6 text-lg text-muted-foreground whitespace-pre-line",
+                  storyContentClassName
+                ),
+                children: storyContent
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6", storyContentClassName), children: storyContent }))
           ] }),
           storyImage && /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
             {
               src: storyImage.src,
               alt: storyImage.alt,
-              className: cn("rounded-2xl object-cover", storyImageClassName),
+              className: cn(
+                "rounded-2xl object-cover rounded-2xl object-cover w-full h-auto",
+                storyImageClassName
+              ),
               optixFlowConfig
             }
           )
@@ -1709,8 +2056,26 @@ function AboutStoryGallery({
       containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl text-center", children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 text-lg text-muted-foreground whitespace-pre-line", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6", descriptionClassName), children: description }))
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-bold tracking-tight md:text-5xl text-balance",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mt-6 text-lg text-muted-foreground whitespace-pre-line text-balance",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6", descriptionClassName), children: description }))
         ] }),
         imagesContent
       ]
@@ -2261,36 +2626,89 @@ function AboutInteractiveTabs({
     if (tabsSlot) return tabsSlot;
     if (!tabs || tabs.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-16", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap justify-center gap-2 border-b", tabsContainerClassName), children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
         {
-          onClick: () => handleTabChange(tab.id),
           className: cn(
-            "px-6 py-3 text-sm font-medium transition-colors",
-            activeTab === tab.id ? cn("border-b-2 border-primary text-primary", activeTabClassName) : "text-muted-foreground hover:text-foreground",
-            tabButtonClassName
+            "flex flex-wrap justify-center gap-2 border-b",
+            tabsContainerClassName
           ),
-          children: tab.label
-        },
-        tab.id
-      )) }),
-      activeContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-12 grid gap-12 lg:grid-cols-2 lg:items-center", tabContentClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          typeof activeContent.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold", tabContentTitleClassName), children: activeContent.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: tabContentTitleClassName, children: activeContent.title }),
-          typeof activeContent.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", tabContentDescriptionClassName), children: activeContent.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", tabContentDescriptionClassName), children: activeContent.description })
-        ] }),
-        activeContent.image && /* @__PURE__ */ jsxRuntime.jsx(
-          img.Img,
-          {
-            src: activeContent.image.src,
-            alt: activeContent.image.alt,
-            className: cn("rounded-2xl object-cover", tabContentImageClassName),
-            optixFlowConfig
-          }
-        )
-      ] })
+          children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => handleTabChange(tab.id),
+              className: cn(
+                "px-6 py-3 text-sm font-medium transition-colors",
+                activeTab === tab.id ? cn(
+                  "border-b-2 border-primary text-primary",
+                  activeTabClassName
+                ) : "text-muted-foreground hover:text-foreground",
+                tabButtonClassName
+              ),
+              children: tab.label
+            },
+            tab.id
+          ))
+        }
+      ),
+      activeContent && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "mt-12 grid gap-12 lg:grid-cols-2 lg:items-center",
+            tabContentClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              typeof activeContent.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn("text-3xl font-bold", tabContentTitleClassName),
+                  children: activeContent.title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: tabContentTitleClassName, children: activeContent.title }),
+              typeof activeContent.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-4 text-lg text-muted-foreground",
+                    tabContentDescriptionClassName
+                  ),
+                  children: activeContent.description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", tabContentDescriptionClassName), children: activeContent.description })
+            ] }),
+            activeContent.image && /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: activeContent.image.src,
+                alt: activeContent.image.alt,
+                className: cn(
+                  "rounded-2xl object-cover",
+                  tabContentImageClassName
+                ),
+                optixFlowConfig
+              }
+            )
+          ]
+        }
+      )
     ] });
-  }, [tabsSlot, tabs, tabsContainerClassName, activeTab, activeTabClassName, tabButtonClassName, handleTabChange, activeContent, tabContentClassName, tabContentTitleClassName, tabContentDescriptionClassName, tabContentImageClassName, optixFlowConfig]);
+  }, [
+    tabsSlot,
+    tabs,
+    tabsContainerClassName,
+    activeTab,
+    activeTabClassName,
+    tabButtonClassName,
+    handleTabChange,
+    activeContent,
+    tabContentClassName,
+    tabContentTitleClassName,
+    tabContentDescriptionClassName,
+    tabContentImageClassName,
+    optixFlowConfig
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -2302,8 +2720,26 @@ function AboutInteractiveTabs({
       containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl text-center", headerClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", subtitleClassName), children: subtitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", subtitleClassName), children: subtitle }))
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-bold tracking-tight md:text-5xl text-balance",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mt-4 text-lg text-muted-foreground text-balance",
+                subtitleClassName
+              ),
+              children: subtitle
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", subtitleClassName), children: subtitle }))
         ] }),
         (tabsSlot || tabs && tabs.length > 0) && tabsContent
       ]
@@ -2377,7 +2813,7 @@ function AboutMissionDualImage({
           ] }),
           (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex flex-wrap gap-4", actionsClassName), children: actionsContent })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
           primaryImage && /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
             {
@@ -2392,7 +2828,7 @@ function AboutMissionDualImage({
             {
               src: secondaryImage.src,
               alt: secondaryImage.alt,
-              className: cn("mt-12 h-full rounded-2xl object-cover", secondaryImageClassName),
+              className: cn("h-full rounded-2xl object-cover sm:mt-12", secondaryImageClassName),
               optixFlowConfig
             }
           )
@@ -2958,7 +3394,7 @@ function AboutLocationInfoHero({
       {
         href: action.href,
         onClick: action.onClick,
-        className: "h-auto text-sm font-semibold uppercase tracking-wider text-white underline decoration-2 underline-offset-8 transition hover:no-underline",
+        className: "h-auto text-sm font-semibold uppercase tracking-wider text-foreground underline decoration-2 underline-offset-8 transition hover:no-underline",
         children: action.label
       },
       index
@@ -2976,8 +3412,8 @@ function AboutLocationInfoHero({
           children: section.label
         }
       ) : section.label),
-      section.hours && section.hours.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-x-6 gap-y-1 text-sm text-white", children: section.hours.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-        item.day && (typeof item.day === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white/80", children: item.day }) : item.day),
+      section.hours && section.hours.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-x-6 gap-y-1 text-sm text-foreground", children: section.hours.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+        item.day && (typeof item.day === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: item.day }) : item.day),
         item.time && (typeof item.time === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.time }) : item.time)
       ] }, itemIndex)) })
     ] }, sectionIndex)) });
@@ -3060,7 +3496,7 @@ function AboutLocationInfoHero({
                 "h2",
                 {
                   className: cn(
-                    "text-balance text-3xl font-bold uppercase leading-tight tracking-tight text-white md:text-4xl lg:text-5xl",
+                    "text-balance text-3xl font-bold uppercase leading-tight tracking-tight text-foreground md:text-4xl lg:text-5xl",
                     headlineClassName
                   ),
                   children: headline
@@ -3072,7 +3508,7 @@ function AboutLocationInfoHero({
                   "div",
                   {
                     className: cn(
-                      "flex items-center gap-3 text-sm text-white",
+                      "flex items-center gap-3 text-sm text-foreground",
                       addressClassName
                     ),
                     children: [
@@ -3092,7 +3528,7 @@ function AboutLocationInfoHero({
                   "div",
                   {
                     className: cn(
-                      "flex items-center gap-3 text-sm text-white",
+                      "flex items-center gap-3 text-sm text-foreground",
                       phoneClassName
                     ),
                     children: [