@opensite/ui 0.6.2 → 0.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -852,7 +852,14 @@ function AboutMissionDualImage({
852
852
  if (actionsSlot) return actionsSlot;
853
853
  if (!actions || actions.length === 0) return null;
854
854
  return actions.map((action, index) => {
855
- const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
855
+ const {
856
+ label,
857
+ icon,
858
+ iconAfter,
859
+ children,
860
+ className: actionClassName,
861
+ ...pressableProps
862
+ } = action;
856
863
  return /* @__PURE__ */ jsxRuntime.jsx(
857
864
  Pressable,
858
865
  {
@@ -878,39 +885,87 @@ function AboutMissionDualImage({
878
885
  patternOpacity,
879
886
  className: cn(className),
880
887
  containerClassName,
881
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-16 lg:grid-cols-2", contentClassName), children: [
882
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center", children: [
883
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12", children: [
884
- missionTitle && (typeof missionTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", missionTitleClassName), children: missionTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: missionTitleClassName, children: missionTitle })),
885
- missionContent && (typeof missionContent === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", missionContentClassName), children: missionContent }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", missionContentClassName), children: missionContent }))
886
- ] }),
887
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
888
- visionTitle && (typeof visionTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", visionTitleClassName), children: visionTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: visionTitleClassName, children: visionTitle })),
889
- visionContent && (typeof visionContent === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", visionContentClassName), children: visionContent }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", visionContentClassName), children: visionContent }))
890
- ] }),
891
- (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex flex-wrap gap-4", actionsClassName), children: actionsContent })
892
- ] }),
893
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col gap-4 sm:grid sm:grid-cols-2", children: [
894
- primaryImage && /* @__PURE__ */ jsxRuntime.jsx(
895
- img.Img,
896
- {
897
- src: primaryImage.src,
898
- alt: primaryImage.alt,
899
- className: cn("w-full h-auto rounded-2xl object-cover sm:h-full", primaryImageClassName),
900
- optixFlowConfig
901
- }
902
- ),
903
- secondaryImage && /* @__PURE__ */ jsxRuntime.jsx(
904
- img.Img,
905
- {
906
- src: secondaryImage.src,
907
- alt: secondaryImage.alt,
908
- className: cn("w-full h-auto rounded-2xl object-cover sm:h-full sm:mt-12", secondaryImageClassName),
909
- optixFlowConfig
910
- }
911
- )
912
- ] })
913
- ] })
888
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
889
+ "div",
890
+ {
891
+ className: cn("grid gap-8 md:gap-16 lg:grid-cols-2", contentClassName),
892
+ children: [
893
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center", children: [
894
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-8 md:mb-12", children: [
895
+ missionTitle && (typeof missionTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
896
+ "h2",
897
+ {
898
+ className: cn(
899
+ "text-3xl font-bold tracking-tight md:text-4xl",
900
+ missionTitleClassName
901
+ ),
902
+ children: missionTitle
903
+ }
904
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: missionTitleClassName, children: missionTitle })),
905
+ missionContent && (typeof missionContent === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
906
+ "p",
907
+ {
908
+ className: cn(
909
+ "mt-4 text-lg text-muted-foreground",
910
+ missionContentClassName
911
+ ),
912
+ children: missionContent
913
+ }
914
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", missionContentClassName), children: missionContent }))
915
+ ] }),
916
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
917
+ visionTitle && (typeof visionTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
918
+ "h2",
919
+ {
920
+ className: cn(
921
+ "text-3xl font-bold tracking-tight md:text-4xl",
922
+ visionTitleClassName
923
+ ),
924
+ children: visionTitle
925
+ }
926
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: visionTitleClassName, children: visionTitle })),
927
+ visionContent && (typeof visionContent === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
928
+ "p",
929
+ {
930
+ className: cn(
931
+ "mt-4 text-lg text-muted-foreground",
932
+ visionContentClassName
933
+ ),
934
+ children: visionContent
935
+ }
936
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", visionContentClassName), children: visionContent }))
937
+ ] }),
938
+ (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex flex-wrap gap-4", actionsClassName), children: actionsContent })
939
+ ] }),
940
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col gap-4 sm:grid sm:grid-cols-2", children: [
941
+ primaryImage && /* @__PURE__ */ jsxRuntime.jsx(
942
+ img.Img,
943
+ {
944
+ src: primaryImage.src,
945
+ alt: primaryImage.alt,
946
+ className: cn(
947
+ "w-full h-auto rounded-2xl object-cover sm:h-full",
948
+ primaryImageClassName
949
+ ),
950
+ optixFlowConfig
951
+ }
952
+ ),
953
+ secondaryImage && /* @__PURE__ */ jsxRuntime.jsx(
954
+ img.Img,
955
+ {
956
+ src: secondaryImage.src,
957
+ alt: secondaryImage.alt,
958
+ className: cn(
959
+ "w-full h-auto rounded-2xl object-cover sm:h-full sm:mt-12",
960
+ secondaryImageClassName
961
+ ),
962
+ optixFlowConfig
963
+ }
964
+ )
965
+ ] })
966
+ ]
967
+ }
968
+ )
914
969
  }
915
970
  );
916
971
  }
@@ -831,7 +831,14 @@ function AboutMissionDualImage({
831
831
  if (actionsSlot) return actionsSlot;
832
832
  if (!actions || actions.length === 0) return null;
833
833
  return actions.map((action, index) => {
834
- const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
834
+ const {
835
+ label,
836
+ icon,
837
+ iconAfter,
838
+ children,
839
+ className: actionClassName,
840
+ ...pressableProps
841
+ } = action;
835
842
  return /* @__PURE__ */ jsx(
836
843
  Pressable,
837
844
  {
@@ -857,39 +864,87 @@ function AboutMissionDualImage({
857
864
  patternOpacity,
858
865
  className: cn(className),
859
866
  containerClassName,
860
- children: /* @__PURE__ */ jsxs("div", { className: cn("grid gap-16 lg:grid-cols-2", contentClassName), children: [
861
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center", children: [
862
- /* @__PURE__ */ jsxs("div", { className: "mb-12", children: [
863
- missionTitle && (typeof missionTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", missionTitleClassName), children: missionTitle }) : /* @__PURE__ */ jsx("div", { className: missionTitleClassName, children: missionTitle })),
864
- missionContent && (typeof missionContent === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", missionContentClassName), children: missionContent }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", missionContentClassName), children: missionContent }))
865
- ] }),
866
- /* @__PURE__ */ jsxs("div", { children: [
867
- visionTitle && (typeof visionTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", visionTitleClassName), children: visionTitle }) : /* @__PURE__ */ jsx("div", { className: visionTitleClassName, children: visionTitle })),
868
- visionContent && (typeof visionContent === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", visionContentClassName), children: visionContent }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", visionContentClassName), children: visionContent }))
869
- ] }),
870
- (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-8 flex flex-wrap gap-4", actionsClassName), children: actionsContent })
871
- ] }),
872
- /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-4 sm:grid sm:grid-cols-2", children: [
873
- primaryImage && /* @__PURE__ */ jsx(
874
- Img,
875
- {
876
- src: primaryImage.src,
877
- alt: primaryImage.alt,
878
- className: cn("w-full h-auto rounded-2xl object-cover sm:h-full", primaryImageClassName),
879
- optixFlowConfig
880
- }
881
- ),
882
- secondaryImage && /* @__PURE__ */ jsx(
883
- Img,
884
- {
885
- src: secondaryImage.src,
886
- alt: secondaryImage.alt,
887
- className: cn("w-full h-auto rounded-2xl object-cover sm:h-full sm:mt-12", secondaryImageClassName),
888
- optixFlowConfig
889
- }
890
- )
891
- ] })
892
- ] })
867
+ children: /* @__PURE__ */ jsxs(
868
+ "div",
869
+ {
870
+ className: cn("grid gap-8 md:gap-16 lg:grid-cols-2", contentClassName),
871
+ children: [
872
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center", children: [
873
+ /* @__PURE__ */ jsxs("div", { className: "mb-8 md:mb-12", children: [
874
+ missionTitle && (typeof missionTitle === "string" ? /* @__PURE__ */ jsx(
875
+ "h2",
876
+ {
877
+ className: cn(
878
+ "text-3xl font-bold tracking-tight md:text-4xl",
879
+ missionTitleClassName
880
+ ),
881
+ children: missionTitle
882
+ }
883
+ ) : /* @__PURE__ */ jsx("div", { className: missionTitleClassName, children: missionTitle })),
884
+ missionContent && (typeof missionContent === "string" ? /* @__PURE__ */ jsx(
885
+ "p",
886
+ {
887
+ className: cn(
888
+ "mt-4 text-lg text-muted-foreground",
889
+ missionContentClassName
890
+ ),
891
+ children: missionContent
892
+ }
893
+ ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", missionContentClassName), children: missionContent }))
894
+ ] }),
895
+ /* @__PURE__ */ jsxs("div", { children: [
896
+ visionTitle && (typeof visionTitle === "string" ? /* @__PURE__ */ jsx(
897
+ "h2",
898
+ {
899
+ className: cn(
900
+ "text-3xl font-bold tracking-tight md:text-4xl",
901
+ visionTitleClassName
902
+ ),
903
+ children: visionTitle
904
+ }
905
+ ) : /* @__PURE__ */ jsx("div", { className: visionTitleClassName, children: visionTitle })),
906
+ visionContent && (typeof visionContent === "string" ? /* @__PURE__ */ jsx(
907
+ "p",
908
+ {
909
+ className: cn(
910
+ "mt-4 text-lg text-muted-foreground",
911
+ visionContentClassName
912
+ ),
913
+ children: visionContent
914
+ }
915
+ ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", visionContentClassName), children: visionContent }))
916
+ ] }),
917
+ (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-8 flex flex-wrap gap-4", actionsClassName), children: actionsContent })
918
+ ] }),
919
+ /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-4 sm:grid sm:grid-cols-2", children: [
920
+ primaryImage && /* @__PURE__ */ jsx(
921
+ Img,
922
+ {
923
+ src: primaryImage.src,
924
+ alt: primaryImage.alt,
925
+ className: cn(
926
+ "w-full h-auto rounded-2xl object-cover sm:h-full",
927
+ primaryImageClassName
928
+ ),
929
+ optixFlowConfig
930
+ }
931
+ ),
932
+ secondaryImage && /* @__PURE__ */ jsx(
933
+ Img,
934
+ {
935
+ src: secondaryImage.src,
936
+ alt: secondaryImage.alt,
937
+ className: cn(
938
+ "w-full h-auto rounded-2xl object-cover sm:h-full sm:mt-12",
939
+ secondaryImageClassName
940
+ ),
941
+ optixFlowConfig
942
+ }
943
+ )
944
+ ] })
945
+ ]
946
+ }
947
+ )
893
948
  }
894
949
  );
895
950
  }
@@ -982,20 +982,29 @@ function AboutMissionPrinciples({
982
982
  const principlesContent = React.useMemo(() => {
983
983
  if (principlesSlot) return principlesSlot;
984
984
  if (!principles || principles.length === 0) return null;
985
- 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(
985
+ return /* @__PURE__ */ jsxRuntime.jsx(
986
986
  "div",
987
987
  {
988
- className: "relative rounded-lg border p-6 transition-colors hover:bg-muted",
989
- children: [
990
- principle.number && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-4 top-4 text-3xl font-bold text-primary/20", children: principle.number }),
991
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
992
- principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold", children: principle.title }) : principle.title),
993
- principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: principle.description }) : principle.description)
994
- ] })
995
- ]
996
- },
997
- idx
998
- )) });
988
+ className: cn(
989
+ "grid grid-cols-1 gap-6 sm:grid-cols-2",
990
+ principlesClassName
991
+ ),
992
+ children: principles.map((principle, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
993
+ "div",
994
+ {
995
+ className: "relative rounded-lg border p-6 transition-colors hover:bg-muted",
996
+ children: [
997
+ principle.number && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-4 top-4 text-3xl font-bold text-primary/20", children: principle.number }),
998
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
999
+ principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold", children: principle.title }) : principle.title),
1000
+ principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: principle.description }) : principle.description)
1001
+ ] })
1002
+ ]
1003
+ },
1004
+ idx
1005
+ ))
1006
+ }
1007
+ );
999
1008
  }, [principlesSlot, principles, principlesClassName]);
1000
1009
  const visionActionContent = React.useMemo(() => {
1001
1010
  if (visionActionSlot) return visionActionSlot;
@@ -1034,21 +1043,75 @@ function AboutMissionPrinciples({
1034
1043
  containerClassName,
1035
1044
  children: [
1036
1045
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-24", children: [
1037
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-8", children: [
1038
- 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 })),
1039
- 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 })),
1040
- 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 })),
1046
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 md:space-y-8", children: [
1047
+ badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
1048
+ "div",
1049
+ {
1050
+ className: cn(
1051
+ "inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm text-primary",
1052
+ badgeClassName
1053
+ ),
1054
+ children: badgeText
1055
+ }
1056
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: badgeText })),
1057
+ missionHeading && (typeof missionHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
1058
+ "h2",
1059
+ {
1060
+ className: cn(
1061
+ "text-4xl font-bold leading-tight tracking-tight lg:text-5xl",
1062
+ missionHeadingClassName
1063
+ ),
1064
+ children: missionHeading
1065
+ }
1066
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: missionHeadingClassName, children: missionHeading })),
1067
+ missionDescription && (typeof missionDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
1068
+ "p",
1069
+ {
1070
+ className: cn(
1071
+ "text-xl text-muted-foreground",
1072
+ missionDescriptionClassName
1073
+ ),
1074
+ children: missionDescription
1075
+ }
1076
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: missionDescriptionClassName, children: missionDescription })),
1041
1077
  missionActionContent
1042
1078
  ] }),
1043
1079
  principlesContent
1044
1080
  ] }),
1045
- /* @__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: [
1046
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:col-span-2", children: [
1047
- 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 })),
1048
- 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 }))
1049
- ] }),
1050
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center lg:col-span-1 lg:justify-end", children: visionActionContent })
1051
- ] }) })
1081
+ /* @__PURE__ */ jsxRuntime.jsx(
1082
+ "div",
1083
+ {
1084
+ className: cn(
1085
+ "mt-6 md:mt-24 rounded-lg bg-muted p-8 lg:p-12",
1086
+ visionClassName
1087
+ ),
1088
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-3", children: [
1089
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:col-span-2", children: [
1090
+ visionHeading && (typeof visionHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
1091
+ "h3",
1092
+ {
1093
+ className: cn(
1094
+ "mb-4 text-2xl font-bold",
1095
+ visionHeadingClassName
1096
+ ),
1097
+ children: visionHeading
1098
+ }
1099
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", visionHeadingClassName), children: visionHeading })),
1100
+ visionDescription && (typeof visionDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
1101
+ "p",
1102
+ {
1103
+ className: cn(
1104
+ "mb-4 text-foreground/80",
1105
+ visionDescriptionClassName
1106
+ ),
1107
+ children: visionDescription
1108
+ }
1109
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", visionDescriptionClassName), children: visionDescription }))
1110
+ ] }),
1111
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center lg:col-span-1 lg:justify-end", children: visionActionContent })
1112
+ ] })
1113
+ }
1114
+ )
1052
1115
  ]
1053
1116
  }
1054
1117
  );
@@ -961,20 +961,29 @@ function AboutMissionPrinciples({
961
961
  const principlesContent = useMemo(() => {
962
962
  if (principlesSlot) return principlesSlot;
963
963
  if (!principles || principles.length === 0) return null;
964
- return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 gap-6 sm:grid-cols-2", principlesClassName), children: principles.map((principle, idx) => /* @__PURE__ */ jsxs(
964
+ return /* @__PURE__ */ jsx(
965
965
  "div",
966
966
  {
967
- className: "relative rounded-lg border p-6 transition-colors hover:bg-muted",
968
- children: [
969
- principle.number && /* @__PURE__ */ jsx("div", { className: "absolute right-4 top-4 text-3xl font-bold text-primary/20", children: principle.number }),
970
- /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
971
- principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold", children: principle.title }) : principle.title),
972
- principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: principle.description }) : principle.description)
973
- ] })
974
- ]
975
- },
976
- idx
977
- )) });
967
+ className: cn(
968
+ "grid grid-cols-1 gap-6 sm:grid-cols-2",
969
+ principlesClassName
970
+ ),
971
+ children: principles.map((principle, idx) => /* @__PURE__ */ jsxs(
972
+ "div",
973
+ {
974
+ className: "relative rounded-lg border p-6 transition-colors hover:bg-muted",
975
+ children: [
976
+ principle.number && /* @__PURE__ */ jsx("div", { className: "absolute right-4 top-4 text-3xl font-bold text-primary/20", children: principle.number }),
977
+ /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
978
+ principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold", children: principle.title }) : principle.title),
979
+ principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: principle.description }) : principle.description)
980
+ ] })
981
+ ]
982
+ },
983
+ idx
984
+ ))
985
+ }
986
+ );
978
987
  }, [principlesSlot, principles, principlesClassName]);
979
988
  const visionActionContent = useMemo(() => {
980
989
  if (visionActionSlot) return visionActionSlot;
@@ -1013,21 +1022,75 @@ function AboutMissionPrinciples({
1013
1022
  containerClassName,
1014
1023
  children: [
1015
1024
  /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-24", children: [
1016
- /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
1017
- badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx("div", { className: cn("inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm text-primary", badgeClassName), children: badgeText }) : /* @__PURE__ */ jsx("div", { className: badgeClassName, children: badgeText })),
1018
- missionHeading && (typeof missionHeading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-4xl font-bold leading-tight tracking-tight lg:text-5xl", missionHeadingClassName), children: missionHeading }) : /* @__PURE__ */ jsx("div", { className: missionHeadingClassName, children: missionHeading })),
1019
- missionDescription && (typeof missionDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xl text-muted-foreground", missionDescriptionClassName), children: missionDescription }) : /* @__PURE__ */ jsx("div", { className: missionDescriptionClassName, children: missionDescription })),
1025
+ /* @__PURE__ */ jsxs("div", { className: "space-y-4 md:space-y-8", children: [
1026
+ badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx(
1027
+ "div",
1028
+ {
1029
+ className: cn(
1030
+ "inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm text-primary",
1031
+ badgeClassName
1032
+ ),
1033
+ children: badgeText
1034
+ }
1035
+ ) : /* @__PURE__ */ jsx("div", { className: badgeClassName, children: badgeText })),
1036
+ missionHeading && (typeof missionHeading === "string" ? /* @__PURE__ */ jsx(
1037
+ "h2",
1038
+ {
1039
+ className: cn(
1040
+ "text-4xl font-bold leading-tight tracking-tight lg:text-5xl",
1041
+ missionHeadingClassName
1042
+ ),
1043
+ children: missionHeading
1044
+ }
1045
+ ) : /* @__PURE__ */ jsx("div", { className: missionHeadingClassName, children: missionHeading })),
1046
+ missionDescription && (typeof missionDescription === "string" ? /* @__PURE__ */ jsx(
1047
+ "p",
1048
+ {
1049
+ className: cn(
1050
+ "text-xl text-muted-foreground",
1051
+ missionDescriptionClassName
1052
+ ),
1053
+ children: missionDescription
1054
+ }
1055
+ ) : /* @__PURE__ */ jsx("div", { className: missionDescriptionClassName, children: missionDescription })),
1020
1056
  missionActionContent
1021
1057
  ] }),
1022
1058
  principlesContent
1023
1059
  ] }),
1024
- /* @__PURE__ */ jsx("div", { className: cn("mt-24 rounded-lg bg-muted p-8 lg:p-12", visionClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-3", children: [
1025
- /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2", children: [
1026
- visionHeading && (typeof visionHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-2xl font-bold", visionHeadingClassName), children: visionHeading }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", visionHeadingClassName), children: visionHeading })),
1027
- visionDescription && (typeof visionDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-4 text-foreground/80", visionDescriptionClassName), children: visionDescription }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", visionDescriptionClassName), children: visionDescription }))
1028
- ] }),
1029
- /* @__PURE__ */ jsx("div", { className: "flex justify-center lg:col-span-1 lg:justify-end", children: visionActionContent })
1030
- ] }) })
1060
+ /* @__PURE__ */ jsx(
1061
+ "div",
1062
+ {
1063
+ className: cn(
1064
+ "mt-6 md:mt-24 rounded-lg bg-muted p-8 lg:p-12",
1065
+ visionClassName
1066
+ ),
1067
+ children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-3", children: [
1068
+ /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2", children: [
1069
+ visionHeading && (typeof visionHeading === "string" ? /* @__PURE__ */ jsx(
1070
+ "h3",
1071
+ {
1072
+ className: cn(
1073
+ "mb-4 text-2xl font-bold",
1074
+ visionHeadingClassName
1075
+ ),
1076
+ children: visionHeading
1077
+ }
1078
+ ) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", visionHeadingClassName), children: visionHeading })),
1079
+ visionDescription && (typeof visionDescription === "string" ? /* @__PURE__ */ jsx(
1080
+ "p",
1081
+ {
1082
+ className: cn(
1083
+ "mb-4 text-foreground/80",
1084
+ visionDescriptionClassName
1085
+ ),
1086
+ children: visionDescription
1087
+ }
1088
+ ) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", visionDescriptionClassName), children: visionDescription }))
1089
+ ] }),
1090
+ /* @__PURE__ */ jsx("div", { className: "flex justify-center lg:col-span-1 lg:justify-end", children: visionActionContent })
1091
+ ] })
1092
+ }
1093
+ )
1031
1094
  ]
1032
1095
  }
1033
1096
  );