@opensite/ui 0.6.2 → 0.6.3

package/dist/about-startup-team.cjs

@@ -928,6 +928,7 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var ALL_TAB_VALUE = "__all__";
 function AboutStartupTeam({
   className,
   containerClassName,
@@ -949,19 +950,48 @@ function AboutStartupTeam({
   pattern,
   patternOpacity,
   defaultActiveTab,
-  onTabChange
+  onTabChange,
+  allTabLabel = "All"
 }) {
+  const effectiveTabs = React.useMemo(() => {
+    if (!sidebarLinks || sidebarLinks.length === 0 || !teamMembers || teamMembers.length === 0) {
+      return sidebarLinks || [];
+    }
+    const allTab = {
+      label: allTabLabel,
+      value: ALL_TAB_VALUE
+    };
+    return [allTab, ...sidebarLinks];
+  }, [sidebarLinks, teamMembers, allTabLabel]);
   const [activeTab, setActiveTab] = React.useState(
-    defaultActiveTab || (sidebarLinks && sidebarLinks.length > 0 ? sidebarLinks[0].value : "")
+    defaultActiveTab || (effectiveTabs.length > 0 ? effectiveTabs[0].value : "")
   );
   const handleTabChange = (value) => {
     setActiveTab(value);
     onTabChange?.(value);
   };
-  const sidebarContent = React.useMemo(() => {
+  const activeTabLabel = React.useMemo(() => {
+    if (!effectiveTabs || effectiveTabs.length === 0) return null;
+    const currentTab = effectiveTabs.find((tab) => tab.value === activeTab);
+    return currentTab?.label || null;
+  }, [effectiveTabs, activeTab]);
+  const dynamicTeamTitle = React.useMemo(() => {
+    if (teamTitle) return teamTitle;
+    if (activeTabLabel) {
+      if (typeof activeTabLabel === "string") {
+        return `${activeTabLabel} Team`;
+      }
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        activeTabLabel,
+        " Team"
+      ] });
+    }
+    return null;
+  }, [teamTitle, activeTabLabel]);
+  const renderTabsNav = React.useMemo(() => {
     if (sidebarSlot) return sidebarSlot;
-    if (!sidebarLinks || sidebarLinks.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "space-y-1", children: sidebarLinks.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+    if (!effectiveTabs || effectiveTabs.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "space-y-1", children: effectiveTabs.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
         componentType: "button",
@@ -974,10 +1004,10 @@ function AboutStartupTeam({
       },
       idx
     )) });
-  }, [sidebarSlot, sidebarLinks, activeTab]);
+  }, [sidebarSlot, effectiveTabs, activeTab]);
   const filteredTeamMembers = React.useMemo(() => {
     if (!teamMembers || teamMembers.length === 0) return [];
-    if (!activeTab) return teamMembers;
+    if (!activeTab || activeTab === ALL_TAB_VALUE) return teamMembers;
     return teamMembers.filter(
       (member) => !member.tab || member.tab === activeTab
     );
@@ -985,11 +1015,14 @@ function AboutStartupTeam({
   const teamMembersContent = React.useMemo(() => {
     if (teamMembersSlot) return teamMembersSlot;
     if (filteredTeamMembers.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 grid gap-8 sm:grid-cols-2 lg:grid-cols-3", teamMembersClassName), children: filteredTeamMembers.map((member, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "rounded-xl border bg-card p-6 text-center",
-        children: [
+        className: cn(
+          "mt-8 grid gap-8 sm:grid-cols-2 lg:grid-cols-3",
+          teamMembersClassName
+        ),
+        children: filteredTeamMembers.map((member, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border bg-card p-6 text-center", children: [
           member.avatar ? /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
             {
@@ -1018,11 +1051,33 @@ function AboutStartupTeam({
             },
             linkIdx
           )) })
-        ]
+        ] }, idx))
+      }
+    );
+  }, [
+    teamMembersSlot,
+    filteredTeamMembers,
+    teamMembersClassName,
+    optixFlowConfig
+  ]);
+  const mobileTabsNav = React.useMemo(() => {
+    if (sidebarSlot) return null;
+    if (!effectiveTabs || effectiveTabs.length === 0) return null;
+    if (!teamMembers || teamMembers.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex gap-2 overflow-x-auto pb-2 lg:hidden", children: effectiveTabs.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+      Pressable,
+      {
+        componentType: "button",
+        onClick: () => handleTabChange(link.value),
+        className: cn(
+          "shrink-0 rounded-lg px-4 py-2 text-sm font-medium transition-colors",
+          activeTab === link.value ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground"
+        ),
+        children: link.label
       },
       idx
     )) });
-  }, [teamMembersSlot, filteredTeamMembers, teamMembersClassName, optixFlowConfig]);
+  }, [sidebarSlot, effectiveTabs, activeTab]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -1032,12 +1087,59 @@ function AboutStartupTeam({
       patternOpacity,
       className: cn(className),
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-12 lg:grid-cols-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn("lg:sticky lg:top-24 lg:self-start", sidebarClassName), children: sidebarContent }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "aside",
+          {
+            className: cn(
+              "hidden lg:block lg:sticky lg:top-24 lg:self-start",
+              sidebarClassName
+            ),
+            children: renderTabsNav
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:col-span-3", 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 })),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-16", children: [
-            teamTitle && (typeof teamTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-2xl font-bold", teamTitleClassName), children: teamTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: teamTitleClassName, children: teamTitle })),
+          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 })),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 md:mt-16", children: [
+            mobileTabsNav,
+            dynamicTeamTitle && (typeof dynamicTeamTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h2",
+              {
+                className: cn(
+                  "text-2xl font-bold",
+                  mobileTabsNav ? "mt-6" : "",
+                  teamTitleClassName
+                ),
+                children: dynamicTeamTitle
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  mobileTabsNav ? "mt-6" : "",
+                  teamTitleClassName
+                ),
+                children: dynamicTeamTitle
+              }
+            )),
             teamMembersContent
           ] })
         ] })

package/dist/about-startup-team.d.cts

@@ -121,7 +121,11 @@ interface AboutStartupTeamProps {
      * Callback when tab changes
      */
     onTabChange?: (value: string) => void;
+    /**
+     * Label for the "All" tab (defaults to "All")
+     */
+    allTabLabel?: React.ReactNode;
 }
-declare function AboutStartupTeam({ className, containerClassName, title, titleClassName, description, descriptionClassName, sidebarLinks, sidebarSlot, sidebarClassName, teamTitle, teamTitleClassName, teamMembers, teamMembersSlot, teamMembersClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, defaultActiveTab, onTabChange, }: AboutStartupTeamProps): React.JSX.Element;
+declare function AboutStartupTeam({ className, containerClassName, title, titleClassName, description, descriptionClassName, sidebarLinks, sidebarSlot, sidebarClassName, teamTitle, teamTitleClassName, teamMembers, teamMembersSlot, teamMembersClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, defaultActiveTab, onTabChange, allTabLabel, }: AboutStartupTeamProps): React.JSX.Element;
 
 export { AboutStartupTeam, type AboutStartupTeamProps };

package/dist/about-startup-team.d.ts

@@ -121,7 +121,11 @@ interface AboutStartupTeamProps {
      * Callback when tab changes
      */
     onTabChange?: (value: string) => void;
+    /**
+     * Label for the "All" tab (defaults to "All")
+     */
+    allTabLabel?: React.ReactNode;
 }
-declare function AboutStartupTeam({ className, containerClassName, title, titleClassName, description, descriptionClassName, sidebarLinks, sidebarSlot, sidebarClassName, teamTitle, teamTitleClassName, teamMembers, teamMembersSlot, teamMembersClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, defaultActiveTab, onTabChange, }: AboutStartupTeamProps): React.JSX.Element;
+declare function AboutStartupTeam({ className, containerClassName, title, titleClassName, description, descriptionClassName, sidebarLinks, sidebarSlot, sidebarClassName, teamTitle, teamTitleClassName, teamMembers, teamMembersSlot, teamMembersClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, defaultActiveTab, onTabChange, allTabLabel, }: AboutStartupTeamProps): React.JSX.Element;
 
 export { AboutStartupTeam, type AboutStartupTeamProps };

package/dist/about-startup-team.js

@@ -1,11 +1,11 @@
 "use client";
 import * as React from 'react';
-import React__default, { useState, useMemo } from 'react';
+import React__default, { useMemo, useState } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
 import { cva } from 'class-variance-authority';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // components/blocks/about/about-startup-team.tsx
 function cn(...inputs) {
@@ -907,6 +907,7 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var ALL_TAB_VALUE = "__all__";
 function AboutStartupTeam({
   className,
   containerClassName,
@@ -928,19 +929,48 @@ function AboutStartupTeam({
   pattern,
   patternOpacity,
   defaultActiveTab,
-  onTabChange
+  onTabChange,
+  allTabLabel = "All"
 }) {
+  const effectiveTabs = useMemo(() => {
+    if (!sidebarLinks || sidebarLinks.length === 0 || !teamMembers || teamMembers.length === 0) {
+      return sidebarLinks || [];
+    }
+    const allTab = {
+      label: allTabLabel,
+      value: ALL_TAB_VALUE
+    };
+    return [allTab, ...sidebarLinks];
+  }, [sidebarLinks, teamMembers, allTabLabel]);
   const [activeTab, setActiveTab] = useState(
-    defaultActiveTab || (sidebarLinks && sidebarLinks.length > 0 ? sidebarLinks[0].value : "")
+    defaultActiveTab || (effectiveTabs.length > 0 ? effectiveTabs[0].value : "")
   );
   const handleTabChange = (value) => {
     setActiveTab(value);
     onTabChange?.(value);
   };
-  const sidebarContent = useMemo(() => {
+  const activeTabLabel = useMemo(() => {
+    if (!effectiveTabs || effectiveTabs.length === 0) return null;
+    const currentTab = effectiveTabs.find((tab) => tab.value === activeTab);
+    return currentTab?.label || null;
+  }, [effectiveTabs, activeTab]);
+  const dynamicTeamTitle = useMemo(() => {
+    if (teamTitle) return teamTitle;
+    if (activeTabLabel) {
+      if (typeof activeTabLabel === "string") {
+        return `${activeTabLabel} Team`;
+      }
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        activeTabLabel,
+        " Team"
+      ] });
+    }
+    return null;
+  }, [teamTitle, activeTabLabel]);
+  const renderTabsNav = useMemo(() => {
     if (sidebarSlot) return sidebarSlot;
-    if (!sidebarLinks || sidebarLinks.length === 0) return null;
-    return /* @__PURE__ */ jsx("nav", { className: "space-y-1", children: sidebarLinks.map((link, idx) => /* @__PURE__ */ jsx(
+    if (!effectiveTabs || effectiveTabs.length === 0) return null;
+    return /* @__PURE__ */ jsx("nav", { className: "space-y-1", children: effectiveTabs.map((link, idx) => /* @__PURE__ */ jsx(
       Pressable,
       {
         componentType: "button",
@@ -953,10 +983,10 @@ function AboutStartupTeam({
       },
       idx
     )) });
-  }, [sidebarSlot, sidebarLinks, activeTab]);
+  }, [sidebarSlot, effectiveTabs, activeTab]);
   const filteredTeamMembers = useMemo(() => {
     if (!teamMembers || teamMembers.length === 0) return [];
-    if (!activeTab) return teamMembers;
+    if (!activeTab || activeTab === ALL_TAB_VALUE) return teamMembers;
     return teamMembers.filter(
       (member) => !member.tab || member.tab === activeTab
     );
@@ -964,11 +994,14 @@ function AboutStartupTeam({
   const teamMembersContent = useMemo(() => {
     if (teamMembersSlot) return teamMembersSlot;
     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(
+    return /* @__PURE__ */ jsx(
       "div",
       {
-        className: "rounded-xl border bg-card p-6 text-center",
-        children: [
+        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", children: [
           member.avatar ? /* @__PURE__ */ jsx(
             Img,
             {
@@ -997,11 +1030,33 @@ function AboutStartupTeam({
             },
             linkIdx
           )) })
-        ]
+        ] }, idx))
+      }
+    );
+  }, [
+    teamMembersSlot,
+    filteredTeamMembers,
+    teamMembersClassName,
+    optixFlowConfig
+  ]);
+  const mobileTabsNav = useMemo(() => {
+    if (sidebarSlot) return null;
+    if (!effectiveTabs || effectiveTabs.length === 0) return null;
+    if (!teamMembers || teamMembers.length === 0) return null;
+    return /* @__PURE__ */ jsx("nav", { className: "flex gap-2 overflow-x-auto pb-2 lg:hidden", children: effectiveTabs.map((link, idx) => /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        componentType: "button",
+        onClick: () => handleTabChange(link.value),
+        className: cn(
+          "shrink-0 rounded-lg px-4 py-2 text-sm font-medium transition-colors",
+          activeTab === link.value ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground"
+        ),
+        children: link.label
       },
       idx
     )) });
-  }, [teamMembersSlot, filteredTeamMembers, teamMembersClassName, optixFlowConfig]);
+  }, [sidebarSlot, effectiveTabs, activeTab]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -1011,12 +1066,59 @@ function AboutStartupTeam({
       patternOpacity,
       className: cn(className),
       children: /* @__PURE__ */ jsx("div", { className: cn(containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-4", children: [
-        /* @__PURE__ */ jsx("aside", { className: cn("lg:sticky lg:top-24 lg:self-start", sidebarClassName), children: sidebarContent }),
+        /* @__PURE__ */ jsx(
+          "aside",
+          {
+            className: cn(
+              "hidden lg:block lg:sticky lg:top-24 lg:self-start",
+              sidebarClassName
+            ),
+            children: renderTabsNav
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { className: "lg:col-span-3", 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 whitespace-pre-line", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-6", descriptionClassName), children: description })),
-          /* @__PURE__ */ jsxs("div", { className: "mt-16", children: [
-            teamTitle && (typeof teamTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-2xl font-bold", teamTitleClassName), children: teamTitle }) : /* @__PURE__ */ jsx("div", { className: teamTitleClassName, children: teamTitle })),
+          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 whitespace-pre-line",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: cn("mt-6", descriptionClassName), children: description })),
+          /* @__PURE__ */ jsxs("div", { className: "mt-8 md:mt-16", children: [
+            mobileTabsNav,
+            dynamicTeamTitle && (typeof dynamicTeamTitle === "string" ? /* @__PURE__ */ jsx(
+              "h2",
+              {
+                className: cn(
+                  "text-2xl font-bold",
+                  mobileTabsNav ? "mt-6" : "",
+                  teamTitleClassName
+                ),
+                children: dynamicTeamTitle
+              }
+            ) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  mobileTabsNav ? "mt-6" : "",
+                  teamTitleClassName
+                ),
+                children: dynamicTeamTitle
+              }
+            )),
             teamMembersContent
           ] })
         ] })

package/dist/components.cjs

@@ -1775,20 +1775,29 @@ function AboutMissionPrinciples({
   const principlesContent = React4.useMemo(() => {
     if (principlesSlot) return principlesSlot;
     if (!principles || principles.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-1 gap-6 sm:grid-cols-2", principlesClassName), children: principles.map((principle, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "relative rounded-lg border p-6 transition-colors hover:bg-muted",
-        children: [
-          principle.number && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-4 top-4 text-3xl font-bold text-primary/20", children: principle.number }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-            principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold", children: principle.title }) : principle.title),
-            principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: principle.description }) : principle.description)
-          ] })
-        ]
-      },
-      idx
-    )) });
+        className: cn(
+          "grid grid-cols-1 gap-6 sm:grid-cols-2",
+          principlesClassName
+        ),
+        children: principles.map((principle, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "relative rounded-lg border p-6 transition-colors hover:bg-muted",
+            children: [
+              principle.number && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-4 top-4 text-3xl font-bold text-primary/20", children: principle.number }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+                principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold", children: principle.title }) : principle.title),
+                principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: principle.description }) : principle.description)
+              ] })
+            ]
+          },
+          idx
+        ))
+      }
+    );
   }, [principlesSlot, principles, principlesClassName]);
   const visionActionContent = React4.useMemo(() => {
     if (visionActionSlot) return visionActionSlot;
@@ -1827,21 +1836,75 @@ function AboutMissionPrinciples({
       containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-24", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-8", children: [
-            badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm text-primary", badgeClassName), children: badgeText }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: badgeText })),
-            missionHeading && (typeof missionHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-4xl font-bold leading-tight tracking-tight lg:text-5xl", missionHeadingClassName), children: missionHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: missionHeadingClassName, children: missionHeading })),
-            missionDescription && (typeof missionDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xl text-muted-foreground", missionDescriptionClassName), children: missionDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: missionDescriptionClassName, children: missionDescription })),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 md:space-y-8", children: [
+            badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm text-primary",
+                  badgeClassName
+                ),
+                children: badgeText
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: badgeText })),
+            missionHeading && (typeof missionHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h2",
+              {
+                className: cn(
+                  "text-4xl font-bold leading-tight tracking-tight lg:text-5xl",
+                  missionHeadingClassName
+                ),
+                children: missionHeading
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: missionHeadingClassName, children: missionHeading })),
+            missionDescription && (typeof missionDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "text-xl text-muted-foreground",
+                  missionDescriptionClassName
+                ),
+                children: missionDescription
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: missionDescriptionClassName, children: missionDescription })),
             missionActionContent
           ] }),
           principlesContent
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-24 rounded-lg bg-muted p-8 lg:p-12", visionClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:col-span-2", children: [
-            visionHeading && (typeof visionHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-2xl font-bold", visionHeadingClassName), children: visionHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", visionHeadingClassName), children: visionHeading })),
-            visionDescription && (typeof visionDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-foreground/80", visionDescriptionClassName), children: visionDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", visionDescriptionClassName), children: visionDescription }))
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center lg:col-span-1 lg:justify-end", children: visionActionContent })
-        ] }) })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-6 md:mt-24 rounded-lg bg-muted p-8 lg:p-12",
+              visionClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:col-span-2", children: [
+                visionHeading && (typeof visionHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "h3",
+                  {
+                    className: cn(
+                      "mb-4 text-2xl font-bold",
+                      visionHeadingClassName
+                    ),
+                    children: visionHeading
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", visionHeadingClassName), children: visionHeading })),
+                visionDescription && (typeof visionDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "mb-4 text-foreground/80",
+                      visionDescriptionClassName
+                    ),
+                    children: visionDescription
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", visionDescriptionClassName), children: visionDescription }))
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center lg:col-span-1 lg:justify-end", children: visionActionContent })
+            ] })
+          }
+        )
       ]
     }
   );