nvis-fe-cms-libs 2.1.4 → 2.1.6
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.
|
@@ -847,7 +847,7 @@ var __async = (__this, __arguments, generator) => {
|
|
|
847
847
|
}
|
|
848
848
|
);
|
|
849
849
|
};
|
|
850
|
-
function useWindowSize$
|
|
850
|
+
function useWindowSize$3() {
|
|
851
851
|
const [width, setWidth] = require$$0.useState(
|
|
852
852
|
typeof window !== "undefined" ? window.innerWidth : 1200
|
|
853
853
|
);
|
|
@@ -859,13 +859,13 @@ var __async = (__this, __arguments, generator) => {
|
|
|
859
859
|
}, []);
|
|
860
860
|
return width;
|
|
861
861
|
}
|
|
862
|
-
const PartnersSection = ({ data, t, imageBaseUrl = "", section }) => {
|
|
862
|
+
const PartnersSection$1 = ({ data, t, imageBaseUrl = "", section }) => {
|
|
863
863
|
var _a, _b, _c;
|
|
864
864
|
const partnersData = ((_c = (_b = (_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.filter((item) => item == null ? void 0 : item.data)) == null ? void 0 : _b.sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))) == null ? void 0 : _c.map((item) => item.data)) || [];
|
|
865
865
|
const [currentPartnerSlide, setCurrentPartnerSlide] = require$$0.useState(0);
|
|
866
866
|
const [partnersVisible, setPartnersVisible] = require$$0.useState(false);
|
|
867
867
|
const partnersRef = require$$0.useRef(null);
|
|
868
|
-
const windowWidth = useWindowSize$
|
|
868
|
+
const windowWidth = useWindowSize$3();
|
|
869
869
|
const sectionTitle = (section == null ? void 0 : section.title) || t("partners.sectionTitle") || "Đối tác";
|
|
870
870
|
const getLogoUrl = (logoUrl) => {
|
|
871
871
|
if (!logoUrl) return null;
|
|
@@ -951,6 +951,240 @@ var __async = (__this, __arguments, generator) => {
|
|
|
951
951
|
) })
|
|
952
952
|
] }) });
|
|
953
953
|
};
|
|
954
|
+
const PartnerCard_2 = ({ partner, idx, t, getLogoUrl, isDarkMode }) => {
|
|
955
|
+
const itemRef = require$$0.useRef(null);
|
|
956
|
+
const [visible, setVisible] = require$$0.useState(false);
|
|
957
|
+
const [isHovered, setIsHovered] = require$$0.useState(false);
|
|
958
|
+
require$$0.useEffect(() => {
|
|
959
|
+
const observer = new IntersectionObserver(
|
|
960
|
+
(entries) => {
|
|
961
|
+
entries.forEach((entry) => {
|
|
962
|
+
if (entry.isIntersecting) {
|
|
963
|
+
setVisible(true);
|
|
964
|
+
observer.unobserve(entry.target);
|
|
965
|
+
}
|
|
966
|
+
});
|
|
967
|
+
},
|
|
968
|
+
{ threshold: 0.2 }
|
|
969
|
+
);
|
|
970
|
+
if (itemRef.current) observer.observe(itemRef.current);
|
|
971
|
+
return () => itemRef.current && observer.unobserve(itemRef.current);
|
|
972
|
+
}, []);
|
|
973
|
+
const logoSrc = getLogoUrl(partner.logoUrl);
|
|
974
|
+
const cardContent = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
|
|
975
|
+
isDarkMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
|
|
976
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
977
|
+
"div",
|
|
978
|
+
{
|
|
979
|
+
className: "absolute w-12 h-12 rounded-full",
|
|
980
|
+
style: { left: "10%", top: "20%", background: "rgba(255,255,255,0.05)" }
|
|
981
|
+
}
|
|
982
|
+
),
|
|
983
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
984
|
+
"div",
|
|
985
|
+
{
|
|
986
|
+
className: "absolute w-10 h-10 rounded-full",
|
|
987
|
+
style: { right: "30%", bottom: "10%", background: "rgba(255,255,255,0.05)" }
|
|
988
|
+
}
|
|
989
|
+
),
|
|
990
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
991
|
+
"div",
|
|
992
|
+
{
|
|
993
|
+
className: "absolute w-14 h-14 rounded-md",
|
|
994
|
+
style: { left: "20%", bottom: "30%", background: "rgba(255,255,255,0.05)" }
|
|
995
|
+
}
|
|
996
|
+
),
|
|
997
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
998
|
+
"div",
|
|
999
|
+
{
|
|
1000
|
+
className: "absolute inset-0 opacity-20",
|
|
1001
|
+
style: {
|
|
1002
|
+
backgroundImage: 'url("data:image/svg+xml,%3Csvg width=\\"60\\" height=\\"60\\" viewBox=\\"0 0 60 60\\" xmlns=\\"http://www.w3.org/2000/svg\\"%3E%3Cg fill=\\"none\\" fill-rule=\\"evenodd\\"%3E%3Cg fill=\\"%23ffffff\\" fill-opacity=\\"0.05\\"%3E%3Ccircle cx=\\"30\\" cy=\\"30\\" r=\\"2\\"/\\%3E%3C/g\\%3E%3C/g\\%3E%3C/svg\\%3E")'
|
|
1003
|
+
}
|
|
1004
|
+
}
|
|
1005
|
+
)
|
|
1006
|
+
] }),
|
|
1007
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1008
|
+
"div",
|
|
1009
|
+
{
|
|
1010
|
+
className: "w-full rounded-lg overflow-hidden bg-surface flex items-center justify-center p-4",
|
|
1011
|
+
style: {
|
|
1012
|
+
height: "75%",
|
|
1013
|
+
borderWidth: "1px",
|
|
1014
|
+
borderStyle: "solid",
|
|
1015
|
+
borderColor: isHovered ? "var(--brand-primary)" : "var(--border-color)",
|
|
1016
|
+
backgroundColor: isHovered ? "var(--bg-body)" : "var(--bg-surface)",
|
|
1017
|
+
transition: "all 0.3s ease"
|
|
1018
|
+
},
|
|
1019
|
+
children: logoSrc ? /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1020
|
+
"img",
|
|
1021
|
+
{
|
|
1022
|
+
src: logoSrc,
|
|
1023
|
+
alt: partner.name,
|
|
1024
|
+
className: "max-w-full max-h-full object-contain",
|
|
1025
|
+
style: {
|
|
1026
|
+
filter: isHovered ? "grayscale(0) opacity(1)" : isDarkMode ? "grayscale(0.3) opacity(0.8)" : "grayscale(0.2) opacity(0.9)",
|
|
1027
|
+
transform: isHovered ? "scale(1.05)" : "scale(1)",
|
|
1028
|
+
transition: "all 0.3s ease"
|
|
1029
|
+
}
|
|
1030
|
+
}
|
|
1031
|
+
) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full h-full bg-gradient-brand flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white font-bold text-center text-small px-1", children: partner.name }) })
|
|
1032
|
+
}
|
|
1033
|
+
),
|
|
1034
|
+
partner.websiteUrl && /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
1035
|
+
"div",
|
|
1036
|
+
{
|
|
1037
|
+
className: "card-link justify-center",
|
|
1038
|
+
style: {
|
|
1039
|
+
opacity: isHovered ? 1 : 0,
|
|
1040
|
+
transform: isHovered ? "translateY(0)" : "translateY(4px)",
|
|
1041
|
+
transition: "all 0.3s ease"
|
|
1042
|
+
},
|
|
1043
|
+
children: [
|
|
1044
|
+
t("partners.viewDetails") || "Xem chi tiết",
|
|
1045
|
+
" →"
|
|
1046
|
+
]
|
|
1047
|
+
}
|
|
1048
|
+
)
|
|
1049
|
+
] });
|
|
1050
|
+
const baseClasses = `card items-center justify-center transition-all duration-700 ease-out overflow-hidden ${visible ? "opacity-100 scale-100" : "opacity-0 scale-75"}`;
|
|
1051
|
+
const dynamicStyles = {
|
|
1052
|
+
transitionDelay: `${idx * 150}ms`
|
|
1053
|
+
};
|
|
1054
|
+
if (partner.websiteUrl) {
|
|
1055
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1056
|
+
"a",
|
|
1057
|
+
{
|
|
1058
|
+
ref: itemRef,
|
|
1059
|
+
href: partner.websiteUrl,
|
|
1060
|
+
target: "_blank",
|
|
1061
|
+
rel: "noopener noreferrer",
|
|
1062
|
+
className: `${baseClasses} cursor-pointer`,
|
|
1063
|
+
style: __spreadProps(__spreadValues({}, dynamicStyles), {
|
|
1064
|
+
textDecoration: "none"
|
|
1065
|
+
}),
|
|
1066
|
+
onMouseEnter: () => setIsHovered(true),
|
|
1067
|
+
onMouseLeave: () => setIsHovered(false),
|
|
1068
|
+
children: cardContent
|
|
1069
|
+
}
|
|
1070
|
+
);
|
|
1071
|
+
}
|
|
1072
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1073
|
+
"div",
|
|
1074
|
+
{
|
|
1075
|
+
ref: itemRef,
|
|
1076
|
+
className: baseClasses,
|
|
1077
|
+
style: dynamicStyles,
|
|
1078
|
+
onMouseEnter: () => setIsHovered(true),
|
|
1079
|
+
onMouseLeave: () => setIsHovered(false),
|
|
1080
|
+
children: cardContent
|
|
1081
|
+
}
|
|
1082
|
+
);
|
|
1083
|
+
};
|
|
1084
|
+
function useWindowSize$2() {
|
|
1085
|
+
const [width, setWidth] = require$$0.useState(
|
|
1086
|
+
typeof window !== "undefined" ? window.innerWidth : 1200
|
|
1087
|
+
);
|
|
1088
|
+
require$$0.useEffect(() => {
|
|
1089
|
+
if (typeof window === "undefined") return;
|
|
1090
|
+
const handleResize = () => setWidth(window.innerWidth);
|
|
1091
|
+
window.addEventListener("resize", handleResize);
|
|
1092
|
+
return () => window.removeEventListener("resize", handleResize);
|
|
1093
|
+
}, []);
|
|
1094
|
+
return width;
|
|
1095
|
+
}
|
|
1096
|
+
const PartnersSection = ({ data, t, imageBaseUrl = "", section }) => {
|
|
1097
|
+
var _a, _b, _c;
|
|
1098
|
+
const partnersData = ((_c = (_b = (_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.filter((item) => item == null ? void 0 : item.data)) == null ? void 0 : _b.sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))) == null ? void 0 : _c.map((item) => item.data)) || [];
|
|
1099
|
+
const [currentPartnerSlide, setCurrentPartnerSlide] = require$$0.useState(0);
|
|
1100
|
+
const [partnersVisible, setPartnersVisible] = require$$0.useState(false);
|
|
1101
|
+
const partnersRef = require$$0.useRef(null);
|
|
1102
|
+
const windowWidth = useWindowSize$2();
|
|
1103
|
+
const sectionTitle = (section == null ? void 0 : section.title) || t("partners.sectionTitle") || "Đối tác";
|
|
1104
|
+
const getLogoUrl = (logoUrl) => {
|
|
1105
|
+
if (!logoUrl) return null;
|
|
1106
|
+
if (logoUrl.startsWith("http")) return logoUrl;
|
|
1107
|
+
return `${imageBaseUrl}${logoUrl}`;
|
|
1108
|
+
};
|
|
1109
|
+
const partners = require$$0.useMemo(() => {
|
|
1110
|
+
const getPerSlide = () => {
|
|
1111
|
+
if (windowWidth < 640) return 2;
|
|
1112
|
+
if (windowWidth < 1024) return 3;
|
|
1113
|
+
return 4;
|
|
1114
|
+
};
|
|
1115
|
+
const grouped = [];
|
|
1116
|
+
const perSlide = getPerSlide();
|
|
1117
|
+
for (let i = 0; i < partnersData.length; i += perSlide) {
|
|
1118
|
+
grouped.push(partnersData.slice(i, i + perSlide));
|
|
1119
|
+
}
|
|
1120
|
+
return grouped;
|
|
1121
|
+
}, [partnersData, windowWidth]);
|
|
1122
|
+
require$$0.useEffect(() => {
|
|
1123
|
+
if (partners.length > 1) {
|
|
1124
|
+
const interval = setInterval(() => {
|
|
1125
|
+
setCurrentPartnerSlide((prev) => (prev + 1) % partners.length);
|
|
1126
|
+
}, 5e3);
|
|
1127
|
+
return () => clearInterval(interval);
|
|
1128
|
+
}
|
|
1129
|
+
}, [partners.length]);
|
|
1130
|
+
require$$0.useEffect(() => {
|
|
1131
|
+
const observer = new IntersectionObserver(
|
|
1132
|
+
(entries) => {
|
|
1133
|
+
entries.forEach((entry) => {
|
|
1134
|
+
if (entry.isIntersecting) {
|
|
1135
|
+
setPartnersVisible(true);
|
|
1136
|
+
observer.unobserve(entry.target);
|
|
1137
|
+
}
|
|
1138
|
+
});
|
|
1139
|
+
},
|
|
1140
|
+
{ threshold: 0.1 }
|
|
1141
|
+
);
|
|
1142
|
+
if (partnersRef.current) observer.observe(partnersRef.current);
|
|
1143
|
+
return () => partnersRef.current && observer.unobserve(partnersRef.current);
|
|
1144
|
+
}, []);
|
|
1145
|
+
if (!partnersData.length) return null;
|
|
1146
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
|
|
1147
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center mb-12", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-block px-4 py-2 rounded-full border border-[var(--border-color)] bg-surface text-subtitle font-semibold text-brand-primary shadow-sm", children: [
|
|
1148
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-partner", folder: "PartnersSection", className: "w-4 h-4 icon-gradient" }),
|
|
1149
|
+
" ",
|
|
1150
|
+
sectionTitle
|
|
1151
|
+
] }) }),
|
|
1152
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: partnersRef, className: "relative overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
1153
|
+
"div",
|
|
1154
|
+
{
|
|
1155
|
+
className: `transition-all duration-1000 ease-out ${partnersVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"}`,
|
|
1156
|
+
children: [
|
|
1157
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative h-56 md:h-64 lg:h-72 xl:h-80 mb-8", children: partners.map((group, slideIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1158
|
+
"div",
|
|
1159
|
+
{
|
|
1160
|
+
className: `absolute inset-0 transition-all duration-1000 ease-in-out ${slideIndex === currentPartnerSlide ? "opacity-100 translate-x-0" : slideIndex < currentPartnerSlide ? "opacity-0 -translate-x-full" : "opacity-0 translate-x-full"}`,
|
|
1161
|
+
children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6 h-full px-2", children: group.map((partner, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1162
|
+
PartnerCard_2,
|
|
1163
|
+
{
|
|
1164
|
+
partner,
|
|
1165
|
+
idx,
|
|
1166
|
+
t,
|
|
1167
|
+
getLogoUrl
|
|
1168
|
+
},
|
|
1169
|
+
partner.id || idx
|
|
1170
|
+
)) })
|
|
1171
|
+
},
|
|
1172
|
+
slideIndex
|
|
1173
|
+
)) }),
|
|
1174
|
+
partners.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-2", children: partners.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1175
|
+
"button",
|
|
1176
|
+
{
|
|
1177
|
+
onClick: () => setCurrentPartnerSlide(index2),
|
|
1178
|
+
className: `w-3 h-3 rounded-full transition-all duration-300 ${index2 === currentPartnerSlide ? "bg-brand-primary scale-125 shadow-lg" : "bg-surface hover:bg-brand-primary/70"}`,
|
|
1179
|
+
"aria-label": `Slide ${index2 + 1}`
|
|
1180
|
+
},
|
|
1181
|
+
index2
|
|
1182
|
+
)) })
|
|
1183
|
+
]
|
|
1184
|
+
}
|
|
1185
|
+
) })
|
|
1186
|
+
] }) });
|
|
1187
|
+
};
|
|
954
1188
|
const MilestoneSection = ({ data, t, isDarkMode, getMilestoneTimeline, section }) => {
|
|
955
1189
|
const [milestones, setMilestones] = require$$0.useState([]);
|
|
956
1190
|
const [loading, setLoading] = require$$0.useState(true);
|
|
@@ -1124,7 +1358,7 @@ var __async = (__this, __arguments, generator) => {
|
|
|
1124
1358
|
] })
|
|
1125
1359
|
] }) });
|
|
1126
1360
|
};
|
|
1127
|
-
const PartnerListCard = ({ partner, idx, t, isDarkMode, getLogoUrl }) => {
|
|
1361
|
+
const PartnerListCard$1 = ({ partner, idx, t, isDarkMode, getLogoUrl }) => {
|
|
1128
1362
|
const logoUrl = getLogoUrl(partner.logoUrl);
|
|
1129
1363
|
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1130
1364
|
"a",
|
|
@@ -1204,7 +1438,7 @@ var __async = (__this, __arguments, generator) => {
|
|
|
1204
1438
|
}
|
|
1205
1439
|
);
|
|
1206
1440
|
};
|
|
1207
|
-
function useWindowSize() {
|
|
1441
|
+
function useWindowSize$1() {
|
|
1208
1442
|
const [width, setWidth] = require$$0.useState(
|
|
1209
1443
|
typeof window !== "undefined" ? window.innerWidth : 1200
|
|
1210
1444
|
);
|
|
@@ -1216,6 +1450,230 @@ var __async = (__this, __arguments, generator) => {
|
|
|
1216
1450
|
return width;
|
|
1217
1451
|
}
|
|
1218
1452
|
const PartnerListSection = ({ t, getPartnerList, imageBaseUrl = "", section }) => {
|
|
1453
|
+
const [partnersData, setPartnersData] = require$$0.useState([]);
|
|
1454
|
+
const [error, setError] = require$$0.useState(null);
|
|
1455
|
+
const [loading, setLoading] = require$$0.useState(true);
|
|
1456
|
+
const [currentPartnerSlide, setCurrentPartnerSlide] = require$$0.useState(0);
|
|
1457
|
+
const [partnersVisible, setPartnersVisible] = require$$0.useState(false);
|
|
1458
|
+
const partnersRef = require$$0.useRef(null);
|
|
1459
|
+
const windowWidth = useWindowSize$1();
|
|
1460
|
+
const sectionTitle = (section == null ? void 0 : section.title) || t("partners.sectionTitle");
|
|
1461
|
+
const getLogoUrl = (logoUrl) => {
|
|
1462
|
+
if (!logoUrl) return null;
|
|
1463
|
+
if (logoUrl.startsWith("http")) return logoUrl;
|
|
1464
|
+
return `${imageBaseUrl}${logoUrl}`;
|
|
1465
|
+
};
|
|
1466
|
+
require$$0.useEffect(() => {
|
|
1467
|
+
const fetchData = () => __async(null, null, function* () {
|
|
1468
|
+
try {
|
|
1469
|
+
const res = yield getPartnerList();
|
|
1470
|
+
if (res.success) {
|
|
1471
|
+
setPartnersData(res.data || []);
|
|
1472
|
+
} else {
|
|
1473
|
+
setError(res.error || "Error fetching partners");
|
|
1474
|
+
}
|
|
1475
|
+
} catch (err) {
|
|
1476
|
+
setError(err.message);
|
|
1477
|
+
} finally {
|
|
1478
|
+
setLoading(false);
|
|
1479
|
+
}
|
|
1480
|
+
});
|
|
1481
|
+
fetchData();
|
|
1482
|
+
}, []);
|
|
1483
|
+
const partners = require$$0.useMemo(() => {
|
|
1484
|
+
const getPerSlide = () => {
|
|
1485
|
+
if (windowWidth < 640) return 2;
|
|
1486
|
+
if (windowWidth < 1024) return 3;
|
|
1487
|
+
return 4;
|
|
1488
|
+
};
|
|
1489
|
+
const grouped = [];
|
|
1490
|
+
const perSlide = getPerSlide();
|
|
1491
|
+
for (let i = 0; i < partnersData.length; i += perSlide) {
|
|
1492
|
+
grouped.push(partnersData.slice(i, i + perSlide));
|
|
1493
|
+
}
|
|
1494
|
+
return grouped;
|
|
1495
|
+
}, [partnersData, windowWidth]);
|
|
1496
|
+
require$$0.useEffect(() => {
|
|
1497
|
+
if (partners.length > 1) {
|
|
1498
|
+
const interval = setInterval(() => {
|
|
1499
|
+
setCurrentPartnerSlide((prev) => (prev + 1) % partners.length);
|
|
1500
|
+
}, 5e3);
|
|
1501
|
+
return () => clearInterval(interval);
|
|
1502
|
+
}
|
|
1503
|
+
}, [partners.length]);
|
|
1504
|
+
require$$0.useEffect(() => {
|
|
1505
|
+
const fallbackTimer = setTimeout(() => setPartnersVisible(true), 500);
|
|
1506
|
+
const observer = new IntersectionObserver(
|
|
1507
|
+
(entries) => {
|
|
1508
|
+
entries.forEach((entry) => {
|
|
1509
|
+
if (entry.isIntersecting) {
|
|
1510
|
+
clearTimeout(fallbackTimer);
|
|
1511
|
+
setPartnersVisible(true);
|
|
1512
|
+
observer.unobserve(entry.target);
|
|
1513
|
+
}
|
|
1514
|
+
});
|
|
1515
|
+
},
|
|
1516
|
+
{ threshold: 0.1, rootMargin: "50px" }
|
|
1517
|
+
);
|
|
1518
|
+
if (partnersRef.current) observer.observe(partnersRef.current);
|
|
1519
|
+
else {
|
|
1520
|
+
clearTimeout(fallbackTimer);
|
|
1521
|
+
setPartnersVisible(true);
|
|
1522
|
+
}
|
|
1523
|
+
return () => {
|
|
1524
|
+
clearTimeout(fallbackTimer);
|
|
1525
|
+
if (partnersRef.current) observer.unobserve(partnersRef.current);
|
|
1526
|
+
};
|
|
1527
|
+
}, []);
|
|
1528
|
+
if (loading) {
|
|
1529
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 text-center bg-body", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-muted", children: t("partners.loading") || "Đang tải danh sách đối tác..." }) });
|
|
1530
|
+
}
|
|
1531
|
+
if (error) {
|
|
1532
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 text-center bg-body", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-brand-secondary", children: t("partners.error") || error }) });
|
|
1533
|
+
}
|
|
1534
|
+
if (!partnersData.length) return null;
|
|
1535
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
|
|
1536
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center mb-12", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-block px-4 py-2 rounded-full border border-[var(--border-color)] bg-surface text-subtitle font-semibold text-brand-primary shadow-sm", children: [
|
|
1537
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-partner", folder: "PartnersSection", className: "w-4 h-4 icon-gradient" }),
|
|
1538
|
+
" ",
|
|
1539
|
+
sectionTitle
|
|
1540
|
+
] }) }),
|
|
1541
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: partnersRef, className: "relative", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
1542
|
+
"div",
|
|
1543
|
+
{
|
|
1544
|
+
className: `transition-all duration-1000 ease-out ${partnersVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"}`,
|
|
1545
|
+
children: [
|
|
1546
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative overflow-hidden mb-12", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { minHeight: "320px" }, children: partners.map((group, slideIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1547
|
+
"div",
|
|
1548
|
+
{
|
|
1549
|
+
className: `absolute inset-0 w-full transition-all duration-1000 ease-in-out ${slideIndex === currentPartnerSlide ? "opacity-100 translate-x-0" : slideIndex < currentPartnerSlide ? "opacity-0 -translate-x-full" : "opacity-0 translate-x-full"}`,
|
|
1550
|
+
style: {
|
|
1551
|
+
zIndex: slideIndex === currentPartnerSlide ? 10 : 1
|
|
1552
|
+
},
|
|
1553
|
+
children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8 px-2", children: group.map((partner, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1554
|
+
PartnerListCard$1,
|
|
1555
|
+
{
|
|
1556
|
+
partner,
|
|
1557
|
+
idx,
|
|
1558
|
+
t,
|
|
1559
|
+
getLogoUrl
|
|
1560
|
+
},
|
|
1561
|
+
partner.id || `${slideIndex}-${idx}`
|
|
1562
|
+
)) })
|
|
1563
|
+
},
|
|
1564
|
+
slideIndex
|
|
1565
|
+
)) }) }),
|
|
1566
|
+
partners.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-3", style: {
|
|
1567
|
+
position: "relative",
|
|
1568
|
+
zIndex: 100,
|
|
1569
|
+
paddingTop: "1rem"
|
|
1570
|
+
}, children: partners.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1571
|
+
"button",
|
|
1572
|
+
{
|
|
1573
|
+
onClick: () => setCurrentPartnerSlide(index2),
|
|
1574
|
+
style: {
|
|
1575
|
+
width: "12px",
|
|
1576
|
+
height: "12px",
|
|
1577
|
+
borderRadius: "50%",
|
|
1578
|
+
border: "none",
|
|
1579
|
+
cursor: "pointer",
|
|
1580
|
+
transition: "all 0.3s ease",
|
|
1581
|
+
backgroundColor: index2 === currentPartnerSlide ? "var(--brand-primary)" : "rgba(151, 151, 151, 0.8)",
|
|
1582
|
+
transform: index2 === currentPartnerSlide ? "scale(1.3)" : "scale(1)"
|
|
1583
|
+
},
|
|
1584
|
+
onMouseEnter: (e) => {
|
|
1585
|
+
if (index2 !== currentPartnerSlide) {
|
|
1586
|
+
e.currentTarget.style.backgroundColor = "rgba(151, 151, 151, 0.8)";
|
|
1587
|
+
}
|
|
1588
|
+
},
|
|
1589
|
+
onMouseLeave: (e) => {
|
|
1590
|
+
if (index2 !== currentPartnerSlide) {
|
|
1591
|
+
e.currentTarget.style.backgroundColor = "rgba(151, 151, 151, 0.8)";
|
|
1592
|
+
}
|
|
1593
|
+
},
|
|
1594
|
+
"aria-label": `Slide ${index2 + 1}`
|
|
1595
|
+
},
|
|
1596
|
+
index2
|
|
1597
|
+
)) })
|
|
1598
|
+
]
|
|
1599
|
+
}
|
|
1600
|
+
) })
|
|
1601
|
+
] }) });
|
|
1602
|
+
};
|
|
1603
|
+
const PartnerListCard = ({ partner, idx, t, isDarkMode, getLogoUrl }) => {
|
|
1604
|
+
const logoUrl = getLogoUrl(partner.logoUrl);
|
|
1605
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1606
|
+
"a",
|
|
1607
|
+
{
|
|
1608
|
+
href: partner.websiteUrl || "#",
|
|
1609
|
+
target: partner.websiteUrl ? "_blank" : "_self",
|
|
1610
|
+
rel: partner.websiteUrl ? "noopener noreferrer" : "",
|
|
1611
|
+
className: "card",
|
|
1612
|
+
style: {
|
|
1613
|
+
animationDelay: `${idx * 0.1}s`,
|
|
1614
|
+
textDecoration: "none",
|
|
1615
|
+
overflow: "hidden",
|
|
1616
|
+
minHeight: "280px",
|
|
1617
|
+
padding: "1.5rem",
|
|
1618
|
+
display: "flex",
|
|
1619
|
+
flexDirection: "column"
|
|
1620
|
+
},
|
|
1621
|
+
children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
|
|
1622
|
+
display: "flex",
|
|
1623
|
+
flexDirection: "column",
|
|
1624
|
+
alignItems: "center",
|
|
1625
|
+
justifyContent: "center",
|
|
1626
|
+
flex: 1
|
|
1627
|
+
}, children: logoUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
|
|
1628
|
+
width: "100%",
|
|
1629
|
+
height: "100px",
|
|
1630
|
+
display: "flex",
|
|
1631
|
+
alignItems: "center",
|
|
1632
|
+
justifyContent: "center",
|
|
1633
|
+
marginBottom: "1rem"
|
|
1634
|
+
}, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1635
|
+
"img",
|
|
1636
|
+
{
|
|
1637
|
+
src: logoUrl,
|
|
1638
|
+
alt: partner.name || t("partners.logoAlt") || "Partner logo",
|
|
1639
|
+
style: {
|
|
1640
|
+
maxWidth: "100%",
|
|
1641
|
+
maxHeight: "100%",
|
|
1642
|
+
objectFit: "contain",
|
|
1643
|
+
transition: "transform 300ms cubic-bezier(0.4, 0, 0.2, 1)"
|
|
1644
|
+
},
|
|
1645
|
+
onMouseEnter: (e) => {
|
|
1646
|
+
e.currentTarget.style.transform = "scale(1.05)";
|
|
1647
|
+
},
|
|
1648
|
+
onMouseLeave: (e) => {
|
|
1649
|
+
e.currentTarget.style.transform = "scale(1)";
|
|
1650
|
+
},
|
|
1651
|
+
loading: "lazy"
|
|
1652
|
+
}
|
|
1653
|
+
) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-surface", style: {
|
|
1654
|
+
width: "5rem",
|
|
1655
|
+
height: "5rem",
|
|
1656
|
+
borderRadius: "9999px",
|
|
1657
|
+
display: "flex",
|
|
1658
|
+
alignItems: "center",
|
|
1659
|
+
justifyContent: "center",
|
|
1660
|
+
marginBottom: "1rem"
|
|
1661
|
+
}, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: "1.875rem" }, children: "🤝" }) }) })
|
|
1662
|
+
}
|
|
1663
|
+
);
|
|
1664
|
+
};
|
|
1665
|
+
function useWindowSize() {
|
|
1666
|
+
const [width, setWidth] = require$$0.useState(
|
|
1667
|
+
typeof window !== "undefined" ? window.innerWidth : 1200
|
|
1668
|
+
);
|
|
1669
|
+
require$$0.useEffect(() => {
|
|
1670
|
+
const handleResize = () => setWidth(window.innerWidth);
|
|
1671
|
+
window.addEventListener("resize", handleResize);
|
|
1672
|
+
return () => window.removeEventListener("resize", handleResize);
|
|
1673
|
+
}, []);
|
|
1674
|
+
return width;
|
|
1675
|
+
}
|
|
1676
|
+
const PartnerListSection_2 = ({ t, getPartnerList, imageBaseUrl = "", section }) => {
|
|
1219
1677
|
const [partnersData, setPartnersData] = require$$0.useState([]);
|
|
1220
1678
|
const [error, setError] = require$$0.useState(null);
|
|
1221
1679
|
const [loading, setLoading] = require$$0.useState(true);
|
|
@@ -4081,7 +4539,7 @@ var __async = (__this, __arguments, generator) => {
|
|
|
4081
4539
|
] })
|
|
4082
4540
|
}
|
|
4083
4541
|
),
|
|
4084
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("style", {
|
|
4542
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("style", { children: `
|
|
4085
4543
|
@keyframes fadeIn {
|
|
4086
4544
|
from { opacity: 0; transform: scale(0.9) translateY(10px); }
|
|
4087
4545
|
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
@@ -4944,10 +5402,12 @@ var __async = (__this, __arguments, generator) => {
|
|
|
4944
5402
|
CompanyValues,
|
|
4945
5403
|
TimelineSection,
|
|
4946
5404
|
PartnerCard,
|
|
4947
|
-
PartnersSection,
|
|
5405
|
+
PartnersSection: PartnersSection$1,
|
|
5406
|
+
PartnersSection_2: PartnersSection,
|
|
4948
5407
|
MilestoneSection,
|
|
4949
5408
|
TestimonialsSection,
|
|
4950
|
-
PartnerListCard,
|
|
5409
|
+
PartnerListCard: PartnerListCard$1,
|
|
5410
|
+
PartnerListSection_2,
|
|
4951
5411
|
PartnerListSection,
|
|
4952
5412
|
ContactFormSection,
|
|
4953
5413
|
ContactInfoSection,
|
|
@@ -4981,9 +5441,11 @@ var __async = (__this, __arguments, generator) => {
|
|
|
4981
5441
|
exports2.PageChildrenSelectSection2 = PageChildrenSelectSection2;
|
|
4982
5442
|
exports2.PageHighlightSection = PageHighlightSection;
|
|
4983
5443
|
exports2.PartnerCard = PartnerCard;
|
|
4984
|
-
exports2.PartnerListCard = PartnerListCard;
|
|
5444
|
+
exports2.PartnerListCard = PartnerListCard$1;
|
|
4985
5445
|
exports2.PartnerListSection = PartnerListSection;
|
|
4986
|
-
exports2.
|
|
5446
|
+
exports2.PartnerListSection_2 = PartnerListSection_2;
|
|
5447
|
+
exports2.PartnersSection = PartnersSection$1;
|
|
5448
|
+
exports2.PartnersSection_2 = PartnersSection;
|
|
4987
5449
|
exports2.ProductListSection = ProductListSection;
|
|
4988
5450
|
exports2.TestimonialsSection = TestimonialsSection;
|
|
4989
5451
|
exports2.TextSection = TextSection;
|