nvis-fe-cms-libs 1.0.0 → 1.0.2
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.
|
@@ -1,4 +1,24 @@
|
|
|
1
|
-
|
|
1
|
+
var __async = (__this, __arguments, generator) => {
|
|
2
|
+
return new Promise((resolve, reject) => {
|
|
3
|
+
var fulfilled = (value) => {
|
|
4
|
+
try {
|
|
5
|
+
step(generator.next(value));
|
|
6
|
+
} catch (e) {
|
|
7
|
+
reject(e);
|
|
8
|
+
}
|
|
9
|
+
};
|
|
10
|
+
var rejected = (value) => {
|
|
11
|
+
try {
|
|
12
|
+
step(generator.throw(value));
|
|
13
|
+
} catch (e) {
|
|
14
|
+
reject(e);
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
18
|
+
step((generator = generator.apply(__this, __arguments)).next());
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
import require$$0, { useRef, useState, useEffect, useMemo } from "react";
|
|
2
22
|
var jsxRuntime = { exports: {} };
|
|
3
23
|
var reactJsxRuntime_production = {};
|
|
4
24
|
/**
|
|
@@ -615,13 +635,994 @@ const AboutCompanySection = ({ data, t, isDarkMode }) => {
|
|
|
615
635
|
)
|
|
616
636
|
] });
|
|
617
637
|
};
|
|
638
|
+
const TimelineSection = ({ data, t, isDarkMode }) => {
|
|
639
|
+
var _a;
|
|
640
|
+
const timelineData = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.map((item) => item.data)) || [];
|
|
641
|
+
const [timelineVisible, setTimelineVisible] = useState([]);
|
|
642
|
+
const timelineRefs = useRef([]);
|
|
643
|
+
useEffect(() => {
|
|
644
|
+
setTimelineVisible(new Array(timelineData.length).fill(false));
|
|
645
|
+
}, [timelineData.length]);
|
|
646
|
+
useEffect(() => {
|
|
647
|
+
const observer = new IntersectionObserver(
|
|
648
|
+
(entries) => {
|
|
649
|
+
entries.forEach((entry) => {
|
|
650
|
+
if (entry.isIntersecting) {
|
|
651
|
+
const index2 = timelineRefs.current.findIndex((el) => el === entry.target);
|
|
652
|
+
if (index2 !== -1) {
|
|
653
|
+
setTimelineVisible((prev) => {
|
|
654
|
+
const newVisible = [...prev];
|
|
655
|
+
newVisible[index2] = true;
|
|
656
|
+
return newVisible;
|
|
657
|
+
});
|
|
658
|
+
}
|
|
659
|
+
observer.unobserve(entry.target);
|
|
660
|
+
}
|
|
661
|
+
});
|
|
662
|
+
},
|
|
663
|
+
{ threshold: 0.1 }
|
|
664
|
+
);
|
|
665
|
+
timelineRefs.current.forEach((el) => el && observer.observe(el));
|
|
666
|
+
return () => {
|
|
667
|
+
timelineRefs.current.forEach((el) => el && observer.unobserve(el));
|
|
668
|
+
};
|
|
669
|
+
}, [timelineData.length]);
|
|
670
|
+
if (!timelineData.length) {
|
|
671
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: `py-20 ${isDarkMode ? "bg-gray-900/50" : "bg-white"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 text-center", children: [
|
|
672
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-lg font-semibold mb-2 ${isDarkMode ? "text-white" : "text-gray-900"}`, children: t("timeline.noData.title") || "Chưa có dữ liệu" }),
|
|
673
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `${isDarkMode ? "text-gray-300" : "text-gray-600"}`, children: t("timeline.noData.description") || "Hiện tại chưa có milestone nào được thiết lập." })
|
|
674
|
+
] }) });
|
|
675
|
+
}
|
|
676
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: `py-20 ${isDarkMode ? "bg-gray-800" : "bg-white"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
|
|
677
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-12", children: [
|
|
678
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
679
|
+
"div",
|
|
680
|
+
{
|
|
681
|
+
className: `relative inline-block px-4 py-2 rounded-full text-sm font-semibold mb-4 border transition-all duration-300 transform hover:scale-105 shadow-md hover:shadow-lg overflow-hidden ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 text-emerald-300 border-blue-800" : "bg-white text-emerald-800 border-gray-200"}`,
|
|
682
|
+
children: [
|
|
683
|
+
"📈 ",
|
|
684
|
+
t("timeline.header.badge") || "HÀNH TRÌNH PHÁT TRIỂN",
|
|
685
|
+
isDarkMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
|
|
686
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
687
|
+
"div",
|
|
688
|
+
{
|
|
689
|
+
className: "absolute w-12 h-12 bg-white/5 rounded-full",
|
|
690
|
+
style: { left: "10%", top: "20%" }
|
|
691
|
+
}
|
|
692
|
+
),
|
|
693
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
694
|
+
"div",
|
|
695
|
+
{
|
|
696
|
+
className: "absolute w-10 h-10 bg-white/5 rounded-full",
|
|
697
|
+
style: { right: "30%", bottom: "10%" }
|
|
698
|
+
}
|
|
699
|
+
),
|
|
700
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
701
|
+
"div",
|
|
702
|
+
{
|
|
703
|
+
className: "absolute w-14 h-14 bg-white/5 rounded-md",
|
|
704
|
+
style: { left: "20%", bottom: "30%" }
|
|
705
|
+
}
|
|
706
|
+
),
|
|
707
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
708
|
+
"div",
|
|
709
|
+
{
|
|
710
|
+
className: 'absolute inset-0 bg-[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")] opacity-20'
|
|
711
|
+
}
|
|
712
|
+
)
|
|
713
|
+
] })
|
|
714
|
+
]
|
|
715
|
+
}
|
|
716
|
+
),
|
|
717
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
718
|
+
"h2",
|
|
719
|
+
{
|
|
720
|
+
className: `text-3xl lg:text-4xl font-bold mb-4 ${isDarkMode ? "text-white" : "text-gray-900"}`,
|
|
721
|
+
children: [
|
|
722
|
+
t("timeline.header.title1") || "Những cột mốc",
|
|
723
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent", children: t("timeline.header.title2") || "Quan trọng" })
|
|
724
|
+
]
|
|
725
|
+
}
|
|
726
|
+
)
|
|
727
|
+
] }),
|
|
728
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
|
|
729
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-blue-500 to-purple-600 rounded-full" }),
|
|
730
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-8", children: timelineData.map((milestone, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
731
|
+
"div",
|
|
732
|
+
{
|
|
733
|
+
ref: (el) => timelineRefs.current[index2] = el,
|
|
734
|
+
className: `flex items-center transition-all duration-700 ease-out ${index2 % 2 === 0 ? "flex-row" : "flex-row-reverse"} ${timelineVisible[index2] ? "opacity-100 scale-100" : "opacity-0 scale-75"}`,
|
|
735
|
+
style: { transitionDelay: `${index2 * 200}ms` },
|
|
736
|
+
children: [
|
|
737
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 px-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
738
|
+
"div",
|
|
739
|
+
{
|
|
740
|
+
className: `relative p-5 rounded-xl shadow-lg transition-all duration-300 hover:shadow-xl overflow-hidden ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 border border-blue-800 hover:border-blue-600" : "bg-gray-50 hover:shadow-2xl"}`,
|
|
741
|
+
children: [
|
|
742
|
+
isDarkMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
|
|
743
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
744
|
+
"div",
|
|
745
|
+
{
|
|
746
|
+
className: "absolute w-12 h-12 bg-white/5 rounded-full",
|
|
747
|
+
style: { left: "10%", top: "20%" }
|
|
748
|
+
}
|
|
749
|
+
),
|
|
750
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
751
|
+
"div",
|
|
752
|
+
{
|
|
753
|
+
className: "absolute w-10 h-10 bg-white/5 rounded-full",
|
|
754
|
+
style: { right: "30%", bottom: "10%" }
|
|
755
|
+
}
|
|
756
|
+
),
|
|
757
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
758
|
+
"div",
|
|
759
|
+
{
|
|
760
|
+
className: "absolute w-14 h-14 bg-white/5 rounded-md",
|
|
761
|
+
style: { left: "20%", bottom: "30%" }
|
|
762
|
+
}
|
|
763
|
+
),
|
|
764
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
765
|
+
"div",
|
|
766
|
+
{
|
|
767
|
+
className: 'absolute inset-0 bg-[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")] opacity-20'
|
|
768
|
+
}
|
|
769
|
+
)
|
|
770
|
+
] }),
|
|
771
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-blue-600 font-bold text-xl mb-2", children: milestone.year }),
|
|
772
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
773
|
+
"h3",
|
|
774
|
+
{
|
|
775
|
+
className: `text-lg font-bold mb-2 ${isDarkMode ? "text-white" : "text-gray-900"}`,
|
|
776
|
+
children: milestone.title
|
|
777
|
+
}
|
|
778
|
+
),
|
|
779
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
780
|
+
"p",
|
|
781
|
+
{
|
|
782
|
+
className: `${isDarkMode ? "text-gray-300" : "text-gray-600"}`,
|
|
783
|
+
children: milestone.description
|
|
784
|
+
}
|
|
785
|
+
)
|
|
786
|
+
]
|
|
787
|
+
}
|
|
788
|
+
) }),
|
|
789
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
790
|
+
"div",
|
|
791
|
+
{
|
|
792
|
+
className: `w-6 h-6 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full border-4 ${isDarkMode ? "border-gray-800" : "border-white"} shadow-[0_0_10px_5px_rgba(59,130,246,0.5)] flex-shrink-0 z-10 animate-pulse`
|
|
793
|
+
}
|
|
794
|
+
),
|
|
795
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1" })
|
|
796
|
+
]
|
|
797
|
+
},
|
|
798
|
+
index2
|
|
799
|
+
)) })
|
|
800
|
+
] })
|
|
801
|
+
] }) });
|
|
802
|
+
};
|
|
803
|
+
const PartnerCard = ({ partner, idx, t, getLogoUrl, isDarkMode }) => {
|
|
804
|
+
const itemRef = useRef(null);
|
|
805
|
+
const [visible, setVisible] = useState(false);
|
|
806
|
+
useEffect(() => {
|
|
807
|
+
const observer = new IntersectionObserver(
|
|
808
|
+
(entries) => {
|
|
809
|
+
entries.forEach((entry) => {
|
|
810
|
+
if (entry.isIntersecting) {
|
|
811
|
+
setVisible(true);
|
|
812
|
+
observer.unobserve(entry.target);
|
|
813
|
+
}
|
|
814
|
+
});
|
|
815
|
+
},
|
|
816
|
+
{ threshold: 0.2 }
|
|
817
|
+
);
|
|
818
|
+
if (itemRef.current) observer.observe(itemRef.current);
|
|
819
|
+
return () => itemRef.current && observer.unobserve(itemRef.current);
|
|
820
|
+
}, []);
|
|
821
|
+
const logoSrc = getLogoUrl(partner.logoUrl);
|
|
822
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
823
|
+
"div",
|
|
824
|
+
{
|
|
825
|
+
ref: itemRef,
|
|
826
|
+
className: `partner-card relative flex flex-col items-center justify-center p-4 rounded-xl shadow-sm transition-all duration-700 ease-out cursor-pointer overflow-hidden
|
|
827
|
+
${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 border border-blue-800 hover:border-blue-500" : "bg-white border border-gray-200 hover:border-blue-300"}
|
|
828
|
+
${visible ? "opacity-100 scale-100" : "opacity-0 scale-75"}`,
|
|
829
|
+
style: { transitionDelay: `${idx * 150}ms` },
|
|
830
|
+
onClick: () => partner.websiteUrl && window.open(partner.websiteUrl, "_blank"),
|
|
831
|
+
children: [
|
|
832
|
+
isDarkMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
|
|
833
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
834
|
+
"div",
|
|
835
|
+
{
|
|
836
|
+
className: "absolute w-12 h-12 bg-white/5 rounded-full",
|
|
837
|
+
style: { left: "10%", top: "20%" }
|
|
838
|
+
}
|
|
839
|
+
),
|
|
840
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
841
|
+
"div",
|
|
842
|
+
{
|
|
843
|
+
className: "absolute w-10 h-10 bg-white/5 rounded-full",
|
|
844
|
+
style: { right: "30%", bottom: "10%" }
|
|
845
|
+
}
|
|
846
|
+
),
|
|
847
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
848
|
+
"div",
|
|
849
|
+
{
|
|
850
|
+
className: "absolute w-14 h-14 bg-white/5 rounded-md",
|
|
851
|
+
style: { left: "20%", bottom: "30%" }
|
|
852
|
+
}
|
|
853
|
+
),
|
|
854
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
855
|
+
"div",
|
|
856
|
+
{
|
|
857
|
+
className: 'absolute inset-0 bg-[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")] opacity-20'
|
|
858
|
+
}
|
|
859
|
+
)
|
|
860
|
+
] }),
|
|
861
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "logo-container w-20 h-14 flex items-center justify-center mb-4 rounded-lg overflow-hidden", children: logoSrc ? /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
862
|
+
"img",
|
|
863
|
+
{
|
|
864
|
+
src: logoSrc,
|
|
865
|
+
alt: partner.name,
|
|
866
|
+
className: "logo-image max-w-full max-h-full object-contain"
|
|
867
|
+
}
|
|
868
|
+
) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white font-bold text-center text-sm px-1", children: partner.name }) }) }),
|
|
869
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
870
|
+
"h4",
|
|
871
|
+
{
|
|
872
|
+
className: `font-bold text-center mb-2 ${isDarkMode ? "text-white" : "text-gray-900"}`,
|
|
873
|
+
children: partner.name
|
|
874
|
+
}
|
|
875
|
+
),
|
|
876
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
877
|
+
"p",
|
|
878
|
+
{
|
|
879
|
+
className: `text-sm text-center mb-2 ${isDarkMode ? "text-gray-300" : "text-gray-600"}`,
|
|
880
|
+
children: partner.description
|
|
881
|
+
}
|
|
882
|
+
),
|
|
883
|
+
partner.websiteUrl && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "website-hint", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-blue-600 font-medium", children: [
|
|
884
|
+
t("partners.viewDetails") || "Xem chi tiết",
|
|
885
|
+
" →"
|
|
886
|
+
] }) }),
|
|
887
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("style", { jsx: true, children: `
|
|
888
|
+
.partner-card {
|
|
889
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
890
|
+
}
|
|
891
|
+
.partner-card:hover {
|
|
892
|
+
transform: translateY(-3px);
|
|
893
|
+
box-shadow: 0 8px 20px ${isDarkMode ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)"};
|
|
894
|
+
}
|
|
895
|
+
.logo-container {
|
|
896
|
+
background: ${isDarkMode ? "linear-gradient(135deg, #374151 0%, #1f2937 100%)" : "linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)"};
|
|
897
|
+
border: 1px solid ${isDarkMode ? "#4b5563" : "#e2e8f0"};
|
|
898
|
+
transition: all 0.3s ease;
|
|
899
|
+
}
|
|
900
|
+
.partner-card:hover .logo-container {
|
|
901
|
+
border-color: #3b82f6;
|
|
902
|
+
background: ${isDarkMode ? "linear-gradient(135deg, #4b5563 0%, #374151 100%)" : "linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)"};
|
|
903
|
+
}
|
|
904
|
+
.logo-image {
|
|
905
|
+
filter: ${isDarkMode ? "grayscale(0.3) opacity(0.8)" : "grayscale(0.2) opacity(0.9)"};
|
|
906
|
+
transition: all 0.3s ease;
|
|
907
|
+
}
|
|
908
|
+
.partner-card:hover .logo-image {
|
|
909
|
+
filter: grayscale(0) opacity(1);
|
|
910
|
+
transform: scale(1.05);
|
|
911
|
+
}
|
|
912
|
+
.website-hint {
|
|
913
|
+
opacity: 0;
|
|
914
|
+
transform: translateY(4px);
|
|
915
|
+
transition: all 0.3s ease;
|
|
916
|
+
}
|
|
917
|
+
.partner-card:hover .website-hint {
|
|
918
|
+
opacity: 1;
|
|
919
|
+
transform: translateY(0);
|
|
920
|
+
}
|
|
921
|
+
` })
|
|
922
|
+
]
|
|
923
|
+
}
|
|
924
|
+
);
|
|
925
|
+
};
|
|
926
|
+
function useWindowSize$1() {
|
|
927
|
+
const [width, setWidth] = useState(
|
|
928
|
+
typeof window !== "undefined" ? window.innerWidth : 1200
|
|
929
|
+
);
|
|
930
|
+
useEffect(() => {
|
|
931
|
+
if (typeof window === "undefined") return;
|
|
932
|
+
const handleResize = () => setWidth(window.innerWidth);
|
|
933
|
+
window.addEventListener("resize", handleResize);
|
|
934
|
+
return () => window.removeEventListener("resize", handleResize);
|
|
935
|
+
}, []);
|
|
936
|
+
return width;
|
|
937
|
+
}
|
|
938
|
+
const PartnersSection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
|
|
939
|
+
var _a;
|
|
940
|
+
const partnersData = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.map((item) => item.data)) || [];
|
|
941
|
+
const [currentPartnerSlide, setCurrentPartnerSlide] = useState(0);
|
|
942
|
+
const [partnersVisible, setPartnersVisible] = useState(false);
|
|
943
|
+
const partnersRef = useRef(null);
|
|
944
|
+
const windowWidth = useWindowSize$1();
|
|
945
|
+
const getLogoUrl = (logoUrl) => {
|
|
946
|
+
if (!logoUrl) return null;
|
|
947
|
+
if (logoUrl.startsWith("http")) return logoUrl;
|
|
948
|
+
return `${imageBaseUrl}${logoUrl}`;
|
|
949
|
+
};
|
|
950
|
+
const partners = useMemo(() => {
|
|
951
|
+
const getPerSlide = () => {
|
|
952
|
+
if (windowWidth < 640) return 2;
|
|
953
|
+
if (windowWidth < 1024) return 3;
|
|
954
|
+
return 4;
|
|
955
|
+
};
|
|
956
|
+
const grouped = [];
|
|
957
|
+
const perSlide = getPerSlide();
|
|
958
|
+
for (let i = 0; i < partnersData.length; i += perSlide) {
|
|
959
|
+
grouped.push(partnersData.slice(i, i + perSlide));
|
|
960
|
+
}
|
|
961
|
+
return grouped;
|
|
962
|
+
}, [partnersData, windowWidth]);
|
|
963
|
+
useEffect(() => {
|
|
964
|
+
if (partners.length > 1) {
|
|
965
|
+
const interval = setInterval(() => {
|
|
966
|
+
setCurrentPartnerSlide((prev) => (prev + 1) % partners.length);
|
|
967
|
+
}, 5e3);
|
|
968
|
+
return () => clearInterval(interval);
|
|
969
|
+
}
|
|
970
|
+
}, [partners.length]);
|
|
971
|
+
useEffect(() => {
|
|
972
|
+
const observer = new IntersectionObserver(
|
|
973
|
+
(entries) => {
|
|
974
|
+
entries.forEach((entry) => {
|
|
975
|
+
if (entry.isIntersecting) {
|
|
976
|
+
setPartnersVisible(true);
|
|
977
|
+
observer.unobserve(entry.target);
|
|
978
|
+
}
|
|
979
|
+
});
|
|
980
|
+
},
|
|
981
|
+
{ threshold: 0.1 }
|
|
982
|
+
);
|
|
983
|
+
if (partnersRef.current) observer.observe(partnersRef.current);
|
|
984
|
+
return () => partnersRef.current && observer.unobserve(partnersRef.current);
|
|
985
|
+
}, []);
|
|
986
|
+
if (!partnersData.length) return null;
|
|
987
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
988
|
+
"section",
|
|
989
|
+
{
|
|
990
|
+
className: `py-12 lg:py-20 transition-colors duration-300 ${isDarkMode ? "bg-gradient-to-b from-gray-950 via-gray-900 to-gray-800" : "bg-gradient-to-b from-white via-gray-50 to-gray-100"}`,
|
|
991
|
+
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
|
|
992
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-12", children: [
|
|
993
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
994
|
+
"div",
|
|
995
|
+
{
|
|
996
|
+
className: `inline-block px-4 py-2 rounded-full text-sm font-semibold mb-4 border shadow-sm ${isDarkMode ? "bg-blue-900/30 text-blue-300 border-blue-800" : "bg-blue-100 text-blue-800 border-blue-200"}`,
|
|
997
|
+
children: [
|
|
998
|
+
"🤝 ",
|
|
999
|
+
t("partners.header.badge")
|
|
1000
|
+
]
|
|
1001
|
+
}
|
|
1002
|
+
),
|
|
1003
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
1004
|
+
"h2",
|
|
1005
|
+
{
|
|
1006
|
+
className: `text-3xl lg:text-5xl font-bold leading-tight ${isDarkMode ? "text-white" : "text-gray-800"}`,
|
|
1007
|
+
children: [
|
|
1008
|
+
t("partners.header.title"),
|
|
1009
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent mt-2", children: t("partners.header.subtitle") })
|
|
1010
|
+
]
|
|
1011
|
+
}
|
|
1012
|
+
)
|
|
1013
|
+
] }),
|
|
1014
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: partnersRef, className: "relative overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
1015
|
+
"div",
|
|
1016
|
+
{
|
|
1017
|
+
className: `transition-all duration-1000 ease-out ${partnersVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"}`,
|
|
1018
|
+
children: [
|
|
1019
|
+
/* @__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(
|
|
1020
|
+
"div",
|
|
1021
|
+
{
|
|
1022
|
+
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"}`,
|
|
1023
|
+
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(
|
|
1024
|
+
PartnerCard,
|
|
1025
|
+
{
|
|
1026
|
+
partner,
|
|
1027
|
+
idx,
|
|
1028
|
+
t,
|
|
1029
|
+
getLogoUrl,
|
|
1030
|
+
isDarkMode
|
|
1031
|
+
},
|
|
1032
|
+
partner.id || idx
|
|
1033
|
+
)) })
|
|
1034
|
+
},
|
|
1035
|
+
slideIndex
|
|
1036
|
+
)) }),
|
|
1037
|
+
partners.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-2", children: partners.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1038
|
+
"button",
|
|
1039
|
+
{
|
|
1040
|
+
onClick: () => setCurrentPartnerSlide(index2),
|
|
1041
|
+
className: `w-3 h-3 rounded-full transition-all ${index2 === currentPartnerSlide ? "bg-blue-500 scale-125" : isDarkMode ? "bg-gray-600 hover:bg-blue-400" : "bg-gray-300 hover:bg-blue-500"}`
|
|
1042
|
+
},
|
|
1043
|
+
index2
|
|
1044
|
+
)) })
|
|
1045
|
+
]
|
|
1046
|
+
}
|
|
1047
|
+
) })
|
|
1048
|
+
] })
|
|
1049
|
+
}
|
|
1050
|
+
);
|
|
1051
|
+
};
|
|
1052
|
+
const MilestoneSection = ({ data, t, isDarkMode, getMilestoneTimeline }) => {
|
|
1053
|
+
const [milestones, setMilestones] = useState([]);
|
|
1054
|
+
const [loading, setLoading] = useState(true);
|
|
1055
|
+
const [timelineVisible, setTimelineVisible] = useState([]);
|
|
1056
|
+
const timelineRefs = useRef([]);
|
|
1057
|
+
useEffect(() => {
|
|
1058
|
+
const fetchMilestones = () => __async(null, null, function* () {
|
|
1059
|
+
var _a;
|
|
1060
|
+
if (getMilestoneTimeline) {
|
|
1061
|
+
try {
|
|
1062
|
+
setLoading(true);
|
|
1063
|
+
const res = yield getMilestoneTimeline();
|
|
1064
|
+
if (res.success) {
|
|
1065
|
+
setMilestones(res.data || []);
|
|
1066
|
+
} else {
|
|
1067
|
+
setMilestones([]);
|
|
1068
|
+
}
|
|
1069
|
+
} catch (error) {
|
|
1070
|
+
setMilestones([]);
|
|
1071
|
+
} finally {
|
|
1072
|
+
setLoading(false);
|
|
1073
|
+
}
|
|
1074
|
+
} else {
|
|
1075
|
+
const milestonesData = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.map((item) => item.data)) || [];
|
|
1076
|
+
setMilestones(milestonesData);
|
|
1077
|
+
setLoading(false);
|
|
1078
|
+
}
|
|
1079
|
+
});
|
|
1080
|
+
fetchMilestones();
|
|
1081
|
+
}, []);
|
|
1082
|
+
useEffect(() => {
|
|
1083
|
+
setTimelineVisible(new Array(milestones.length).fill(false));
|
|
1084
|
+
}, [milestones.length]);
|
|
1085
|
+
useEffect(() => {
|
|
1086
|
+
const observer = new IntersectionObserver(
|
|
1087
|
+
(entries) => {
|
|
1088
|
+
entries.forEach((entry) => {
|
|
1089
|
+
if (entry.isIntersecting) {
|
|
1090
|
+
const index2 = timelineRefs.current.findIndex(
|
|
1091
|
+
(el) => el === entry.target
|
|
1092
|
+
);
|
|
1093
|
+
if (index2 !== -1) {
|
|
1094
|
+
setTimelineVisible((prev) => {
|
|
1095
|
+
const newVisible = [...prev];
|
|
1096
|
+
newVisible[index2] = true;
|
|
1097
|
+
return newVisible;
|
|
1098
|
+
});
|
|
1099
|
+
}
|
|
1100
|
+
observer.unobserve(entry.target);
|
|
1101
|
+
}
|
|
1102
|
+
});
|
|
1103
|
+
},
|
|
1104
|
+
{ threshold: 0.1 }
|
|
1105
|
+
);
|
|
1106
|
+
timelineRefs.current.forEach((el) => el && observer.observe(el));
|
|
1107
|
+
return () => {
|
|
1108
|
+
timelineRefs.current.forEach((el) => el && observer.unobserve(el));
|
|
1109
|
+
};
|
|
1110
|
+
}, [milestones.length]);
|
|
1111
|
+
if (loading) {
|
|
1112
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: isDarkMode ? "text-white" : "text-gray-800", children: t("milestone.status.loadingData") }) });
|
|
1113
|
+
}
|
|
1114
|
+
if (!milestones.length) {
|
|
1115
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1116
|
+
"section",
|
|
1117
|
+
{
|
|
1118
|
+
className: `py-20 ${isDarkMode ? "bg-gray-900/50" : "bg-white"}`,
|
|
1119
|
+
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 text-center", children: [
|
|
1120
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1121
|
+
"h3",
|
|
1122
|
+
{
|
|
1123
|
+
className: `text-lg font-semibold mb-2 ${isDarkMode ? "text-white" : "text-gray-900"}`,
|
|
1124
|
+
children: t("milestone.status.noData")
|
|
1125
|
+
}
|
|
1126
|
+
),
|
|
1127
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1128
|
+
"p",
|
|
1129
|
+
{
|
|
1130
|
+
className: `${isDarkMode ? "text-gray-300" : "text-gray-600"}`,
|
|
1131
|
+
children: t("milestone.noDataDescription")
|
|
1132
|
+
}
|
|
1133
|
+
)
|
|
1134
|
+
] })
|
|
1135
|
+
}
|
|
1136
|
+
);
|
|
1137
|
+
}
|
|
1138
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1139
|
+
"section",
|
|
1140
|
+
{
|
|
1141
|
+
className: `py-20 ${isDarkMode ? "bg-gray-800" : "bg-white"}`,
|
|
1142
|
+
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
|
|
1143
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-12", children: [
|
|
1144
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
1145
|
+
"div",
|
|
1146
|
+
{
|
|
1147
|
+
className: `relative inline-block px-4 py-2 rounded-full text-sm font-semibold mb-4 border transition-all duration-300 transform hover:scale-105 shadow-md hover:shadow-lg overflow-hidden ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 text-emerald-300 border-blue-800" : "bg-white text-emerald-800 border-gray-200"}`,
|
|
1148
|
+
children: [
|
|
1149
|
+
"📈 ",
|
|
1150
|
+
t("milestone.header.badge")
|
|
1151
|
+
]
|
|
1152
|
+
}
|
|
1153
|
+
),
|
|
1154
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
1155
|
+
"h2",
|
|
1156
|
+
{
|
|
1157
|
+
className: `text-3xl lg:text-4xl font-bold mb-4 ${isDarkMode ? "text-white" : "text-gray-900"}`,
|
|
1158
|
+
children: [
|
|
1159
|
+
t("milestone.header.title"),
|
|
1160
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent", children: t("milestone.header.subtitle") })
|
|
1161
|
+
]
|
|
1162
|
+
}
|
|
1163
|
+
)
|
|
1164
|
+
] }),
|
|
1165
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
|
|
1166
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-blue-500 to-purple-600 rounded-full" }),
|
|
1167
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-8", children: milestones.map((milestone, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
1168
|
+
"div",
|
|
1169
|
+
{
|
|
1170
|
+
ref: (el) => timelineRefs.current[index2] = el,
|
|
1171
|
+
className: `flex items-center transition-all duration-700 ease-out ${index2 % 2 === 0 ? "flex-row" : "flex-row-reverse"} ${timelineVisible[index2] ? "opacity-100 scale-100" : "opacity-0 scale-75"}`,
|
|
1172
|
+
style: { transitionDelay: `${index2 * 200}ms` },
|
|
1173
|
+
children: [
|
|
1174
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 px-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
1175
|
+
"div",
|
|
1176
|
+
{
|
|
1177
|
+
className: `relative p-5 rounded-xl shadow-lg transition-all duration-300 hover:shadow-xl overflow-hidden ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 border border-blue-800 hover:border-blue-600" : "bg-gray-50 hover:shadow-2xl"}`,
|
|
1178
|
+
children: [
|
|
1179
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-blue-600 font-bold text-xl mb-2", children: milestone.time }),
|
|
1180
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1181
|
+
"h3",
|
|
1182
|
+
{
|
|
1183
|
+
className: `text-lg font-bold mb-2 ${isDarkMode ? "text-white" : "text-gray-900"}`,
|
|
1184
|
+
children: milestone.title
|
|
1185
|
+
}
|
|
1186
|
+
),
|
|
1187
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1188
|
+
"p",
|
|
1189
|
+
{
|
|
1190
|
+
className: `${isDarkMode ? "text-gray-300" : "text-gray-600"}`,
|
|
1191
|
+
children: milestone.description
|
|
1192
|
+
}
|
|
1193
|
+
)
|
|
1194
|
+
]
|
|
1195
|
+
}
|
|
1196
|
+
) }),
|
|
1197
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1198
|
+
"div",
|
|
1199
|
+
{
|
|
1200
|
+
className: `w-6 h-6 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full border-4 ${isDarkMode ? "border-gray-800" : "border-white"} shadow-[0_0_10px_5px_rgba(59,130,246,0.5)] flex-shrink-0 z-10 animate-pulse`
|
|
1201
|
+
}
|
|
1202
|
+
),
|
|
1203
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1" })
|
|
1204
|
+
]
|
|
1205
|
+
},
|
|
1206
|
+
milestone.id
|
|
1207
|
+
)) })
|
|
1208
|
+
] })
|
|
1209
|
+
] })
|
|
1210
|
+
}
|
|
1211
|
+
);
|
|
1212
|
+
};
|
|
1213
|
+
const TestimonialsSection = ({ data, t, isDarkMode }) => {
|
|
1214
|
+
var _a;
|
|
1215
|
+
const [currentIndex, setCurrentIndex] = useState(0);
|
|
1216
|
+
const testimonials = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.map((item) => ({
|
|
1217
|
+
quote: item.data.content,
|
|
1218
|
+
author: item.data.customerName,
|
|
1219
|
+
position: item.data.customerTitle || t("testimonials.fallback.defaultPosition"),
|
|
1220
|
+
company: item.data.customerCompany || ""
|
|
1221
|
+
}))) || [];
|
|
1222
|
+
const fallbackTestimonials = [
|
|
1223
|
+
{
|
|
1224
|
+
quote: t("testimonials.fallback.testimonial1.quote"),
|
|
1225
|
+
author: t("testimonials.fallback.testimonial1.author"),
|
|
1226
|
+
position: t("testimonials.fallback.testimonial1.position"),
|
|
1227
|
+
company: t("testimonials.fallback.testimonial1.company")
|
|
1228
|
+
},
|
|
1229
|
+
{
|
|
1230
|
+
quote: t("testimonials.fallback.testimonial2.quote"),
|
|
1231
|
+
author: t("testimonials.fallback.testimonial2.author"),
|
|
1232
|
+
position: t("testimonials.fallback.testimonial2.position"),
|
|
1233
|
+
company: t("testimonials.fallback.testimonial2.company")
|
|
1234
|
+
},
|
|
1235
|
+
{
|
|
1236
|
+
quote: t("testimonials.fallback.testimonial3.quote"),
|
|
1237
|
+
author: t("testimonials.fallback.testimonial3.author"),
|
|
1238
|
+
position: t("testimonials.fallback.testimonial3.position"),
|
|
1239
|
+
company: t("testimonials.fallback.testimonial3.company")
|
|
1240
|
+
}
|
|
1241
|
+
];
|
|
1242
|
+
const displayTestimonials = testimonials.length > 0 ? testimonials : fallbackTestimonials;
|
|
1243
|
+
useEffect(() => {
|
|
1244
|
+
if (displayTestimonials.length > 1) {
|
|
1245
|
+
const interval = setInterval(() => {
|
|
1246
|
+
setCurrentIndex((prev) => (prev + 1) % displayTestimonials.length);
|
|
1247
|
+
}, 5e3);
|
|
1248
|
+
return () => clearInterval(interval);
|
|
1249
|
+
}
|
|
1250
|
+
}, [displayTestimonials.length]);
|
|
1251
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1252
|
+
"section",
|
|
1253
|
+
{
|
|
1254
|
+
className: `py-20 transition-colors duration-200 ${isDarkMode ? "bg-gray-700" : "bg-gray-50"}`,
|
|
1255
|
+
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: [
|
|
1256
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
1257
|
+
"div",
|
|
1258
|
+
{
|
|
1259
|
+
className: `inline-block px-4 py-2 rounded-full text-sm font-semibold mb-4 ${isDarkMode ? "bg-indigo-900/50 text-indigo-300 border border-indigo-800" : "bg-indigo-100 text-indigo-800"}`,
|
|
1260
|
+
children: [
|
|
1261
|
+
"💬 ",
|
|
1262
|
+
t("testimonials.header.badge")
|
|
1263
|
+
]
|
|
1264
|
+
}
|
|
1265
|
+
),
|
|
1266
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
1267
|
+
"h2",
|
|
1268
|
+
{
|
|
1269
|
+
className: `text-3xl lg:text-4xl font-bold mb-8 transition-colors duration-200 ${isDarkMode ? "text-white" : "text-gray-900"}`,
|
|
1270
|
+
children: [
|
|
1271
|
+
t("testimonials.header.title"),
|
|
1272
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent", children: t("testimonials.header.subtitle") })
|
|
1273
|
+
]
|
|
1274
|
+
}
|
|
1275
|
+
),
|
|
1276
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
|
|
1277
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
1278
|
+
"div",
|
|
1279
|
+
{
|
|
1280
|
+
className: `p-6 rounded-2xl transition-all duration-500 transform ${isDarkMode ? "bg-gray-800/80 backdrop-blur-sm border border-gray-700" : "bg-white"}`,
|
|
1281
|
+
children: [
|
|
1282
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
1283
|
+
"blockquote",
|
|
1284
|
+
{
|
|
1285
|
+
className: `text-lg lg:text-xl italic mb-6 animate-fadeIn transition-colors duration-200 ${isDarkMode ? "text-gray-300" : "text-gray-700"}`,
|
|
1286
|
+
children: [
|
|
1287
|
+
'"',
|
|
1288
|
+
displayTestimonials[currentIndex].quote,
|
|
1289
|
+
'"'
|
|
1290
|
+
]
|
|
1291
|
+
}
|
|
1292
|
+
),
|
|
1293
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center space-x-4 animate-fadeIn", children: [
|
|
1294
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-3xl", children: "👤" }),
|
|
1295
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-left", children: [
|
|
1296
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1297
|
+
"div",
|
|
1298
|
+
{
|
|
1299
|
+
className: `font-bold text-base transition-colors duration-200 ${isDarkMode ? "text-white" : "text-gray-900"}`,
|
|
1300
|
+
children: displayTestimonials[currentIndex].author
|
|
1301
|
+
}
|
|
1302
|
+
),
|
|
1303
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-blue-600 font-medium text-sm", children: displayTestimonials[currentIndex].position }),
|
|
1304
|
+
displayTestimonials[currentIndex].company && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1305
|
+
"div",
|
|
1306
|
+
{
|
|
1307
|
+
className: `text-xs transition-colors duration-200 ${isDarkMode ? "text-gray-400" : "text-gray-600"}`,
|
|
1308
|
+
children: displayTestimonials[currentIndex].company
|
|
1309
|
+
}
|
|
1310
|
+
)
|
|
1311
|
+
] })
|
|
1312
|
+
] })
|
|
1313
|
+
]
|
|
1314
|
+
},
|
|
1315
|
+
currentIndex
|
|
1316
|
+
),
|
|
1317
|
+
displayTestimonials.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-2 mt-4", children: displayTestimonials.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1318
|
+
"button",
|
|
1319
|
+
{
|
|
1320
|
+
onClick: () => setCurrentIndex(index2),
|
|
1321
|
+
className: `w-2.5 h-2.5 rounded-full transition-all duration-300 ${index2 === currentIndex ? "bg-blue-600" : isDarkMode ? "bg-gray-600 hover:bg-gray-500" : "bg-gray-300 hover:bg-gray-400"}`
|
|
1322
|
+
},
|
|
1323
|
+
index2
|
|
1324
|
+
)) })
|
|
1325
|
+
] })
|
|
1326
|
+
] })
|
|
1327
|
+
}
|
|
1328
|
+
);
|
|
1329
|
+
};
|
|
1330
|
+
const PartnerListCard = ({ partner, idx = 0, t, isDarkMode, getLogoUrl }) => {
|
|
1331
|
+
const itemRef = useRef(null);
|
|
1332
|
+
const [visible, setVisible] = useState(false);
|
|
1333
|
+
const [isHovered, setIsHovered] = useState(false);
|
|
1334
|
+
if (!partner) return null;
|
|
1335
|
+
useEffect(() => {
|
|
1336
|
+
const observer = new IntersectionObserver(
|
|
1337
|
+
(entries) => {
|
|
1338
|
+
entries.forEach((entry) => {
|
|
1339
|
+
if (entry.isIntersecting) {
|
|
1340
|
+
setVisible(true);
|
|
1341
|
+
observer.unobserve(entry.target);
|
|
1342
|
+
}
|
|
1343
|
+
});
|
|
1344
|
+
},
|
|
1345
|
+
{ threshold: 0.2 }
|
|
1346
|
+
);
|
|
1347
|
+
if (itemRef.current) observer.observe(itemRef.current);
|
|
1348
|
+
return () => itemRef.current && observer.unobserve(itemRef.current);
|
|
1349
|
+
}, []);
|
|
1350
|
+
const logoSrc = getLogoUrl ? getLogoUrl(partner.logoUrl) : null;
|
|
1351
|
+
const handleImageError = (e) => {
|
|
1352
|
+
e.target.style.display = "none";
|
|
1353
|
+
e.target.nextSibling.style.display = "flex";
|
|
1354
|
+
};
|
|
1355
|
+
const handleClick = () => {
|
|
1356
|
+
if (partner.websiteUrl) {
|
|
1357
|
+
window.open(partner.websiteUrl, "_blank", "noopener,noreferrer");
|
|
1358
|
+
}
|
|
1359
|
+
};
|
|
1360
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
1361
|
+
"div",
|
|
1362
|
+
{
|
|
1363
|
+
ref: itemRef,
|
|
1364
|
+
className: `relative flex flex-col items-center justify-center p-4 rounded-xl shadow-sm transition-all duration-700 ease-out cursor-pointer overflow-hidden min-h-[180px]
|
|
1365
|
+
${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 border border-blue-800" : "bg-white border border-gray-200"}
|
|
1366
|
+
${visible ? "opacity-100 scale-100" : "opacity-0 scale-75"}
|
|
1367
|
+
${isHovered ? isDarkMode ? "border-blue-500 shadow-lg shadow-blue-500/20 -translate-y-1" : "border-blue-300 shadow-lg shadow-blue-500/20 -translate-y-1" : ""}`,
|
|
1368
|
+
style: {
|
|
1369
|
+
transitionDelay: `${idx * 150}ms`,
|
|
1370
|
+
transform: `translateY(${isHovered ? "-4px" : "0px"}) scale(${visible ? "1" : "0.75"})`
|
|
1371
|
+
},
|
|
1372
|
+
onMouseEnter: () => setIsHovered(true),
|
|
1373
|
+
onMouseLeave: () => setIsHovered(false),
|
|
1374
|
+
onClick: handleClick,
|
|
1375
|
+
children: [
|
|
1376
|
+
isDarkMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
|
|
1377
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute w-12 h-12 bg-white/5 rounded-full", style: { left: "10%", top: "20%" } }),
|
|
1378
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute w-10 h-10 bg-white/5 rounded-full", style: { right: "30%", bottom: "10%" } }),
|
|
1379
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute w-14 h-14 bg-white/5 rounded-md", style: { left: "20%", bottom: "30%" } }),
|
|
1380
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 opacity-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1381
|
+
"div",
|
|
1382
|
+
{
|
|
1383
|
+
style: {
|
|
1384
|
+
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")`,
|
|
1385
|
+
backgroundSize: "60px 60px"
|
|
1386
|
+
},
|
|
1387
|
+
className: "w-full h-full"
|
|
1388
|
+
}
|
|
1389
|
+
) })
|
|
1390
|
+
] }),
|
|
1391
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1392
|
+
"div",
|
|
1393
|
+
{
|
|
1394
|
+
className: `w-20 h-14 flex items-center justify-center mb-4 rounded-lg overflow-hidden border transition-all duration-300
|
|
1395
|
+
${isDarkMode ? "border-gray-600" : "border-gray-200"}
|
|
1396
|
+
${isHovered ? "border-blue-500" : ""}
|
|
1397
|
+
`,
|
|
1398
|
+
style: {
|
|
1399
|
+
background: isDarkMode ? isHovered ? "linear-gradient(135deg, #4b5563 0%, #374151 100%)" : "linear-gradient(135deg, #374151 0%, #1f2937 100%)" : isHovered ? "linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)" : "linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)"
|
|
1400
|
+
},
|
|
1401
|
+
children: logoSrc ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
|
|
1402
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1403
|
+
"img",
|
|
1404
|
+
{
|
|
1405
|
+
src: logoSrc,
|
|
1406
|
+
alt: partner.name || t("partners.logoAlt") || "Partner logo",
|
|
1407
|
+
className: "max-w-full max-h-full object-contain transition-all duration-300",
|
|
1408
|
+
style: {
|
|
1409
|
+
filter: isDarkMode ? isHovered ? "grayscale(0) opacity(1)" : "grayscale(0.3) opacity(0.8)" : isHovered ? "grayscale(0) opacity(1)" : "grayscale(0.2) opacity(0.9)",
|
|
1410
|
+
transform: isHovered ? "scale(1.05)" : "scale(1)"
|
|
1411
|
+
},
|
|
1412
|
+
onError: handleImageError,
|
|
1413
|
+
loading: "lazy"
|
|
1414
|
+
}
|
|
1415
|
+
),
|
|
1416
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center", style: { display: "none" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white font-bold text-center text-sm px-1", children: partner.name }) })
|
|
1417
|
+
] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white font-bold text-center text-sm px-1", children: partner.name }) })
|
|
1418
|
+
}
|
|
1419
|
+
),
|
|
1420
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: `font-bold text-center mb-2 text-sm leading-tight ${isDarkMode ? "text-white" : "text-gray-900"}`, children: partner.name }),
|
|
1421
|
+
partner.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-xs text-center mb-3 line-clamp-2 px-1 ${isDarkMode ? "text-gray-300" : "text-gray-600"}`, children: partner.description }),
|
|
1422
|
+
partner.websiteUrl && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1423
|
+
"div",
|
|
1424
|
+
{
|
|
1425
|
+
className: "transition-all duration-300",
|
|
1426
|
+
style: {
|
|
1427
|
+
opacity: isHovered ? 1 : 0,
|
|
1428
|
+
transform: `translateY(${isHovered ? "0px" : "4px"})`
|
|
1429
|
+
},
|
|
1430
|
+
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-blue-600 font-medium", children: [
|
|
1431
|
+
t("partners.viewDetails") || "Xem chi tiết",
|
|
1432
|
+
" →"
|
|
1433
|
+
] })
|
|
1434
|
+
}
|
|
1435
|
+
)
|
|
1436
|
+
]
|
|
1437
|
+
}
|
|
1438
|
+
);
|
|
1439
|
+
};
|
|
1440
|
+
function useWindowSize() {
|
|
1441
|
+
const [width, setWidth] = useState(
|
|
1442
|
+
typeof window !== "undefined" ? window.innerWidth : 1200
|
|
1443
|
+
);
|
|
1444
|
+
useEffect(() => {
|
|
1445
|
+
const handleResize = () => setWidth(window.innerWidth);
|
|
1446
|
+
window.addEventListener("resize", handleResize);
|
|
1447
|
+
return () => window.removeEventListener("resize", handleResize);
|
|
1448
|
+
}, []);
|
|
1449
|
+
return width;
|
|
1450
|
+
}
|
|
1451
|
+
const PartnerListSection = ({ t, isDarkMode, getPartnerList, imageBaseUrl = "" }) => {
|
|
1452
|
+
const [partnersData, setPartnersData] = useState([]);
|
|
1453
|
+
const [error, setError] = useState(null);
|
|
1454
|
+
const [loading, setLoading] = useState(true);
|
|
1455
|
+
const [currentPartnerSlide, setCurrentPartnerSlide] = useState(0);
|
|
1456
|
+
const [partnersVisible, setPartnersVisible] = useState(false);
|
|
1457
|
+
const partnersRef = useRef(null);
|
|
1458
|
+
const windowWidth = useWindowSize();
|
|
1459
|
+
const getLogoUrl = (logoUrl) => {
|
|
1460
|
+
if (!logoUrl) return null;
|
|
1461
|
+
if (logoUrl.startsWith("http")) return logoUrl;
|
|
1462
|
+
return `${imageBaseUrl}${logoUrl}`;
|
|
1463
|
+
};
|
|
1464
|
+
useEffect(() => {
|
|
1465
|
+
const fetchData = () => __async(null, null, function* () {
|
|
1466
|
+
try {
|
|
1467
|
+
const res = yield getPartnerList();
|
|
1468
|
+
if (res.success) {
|
|
1469
|
+
setPartnersData(res.data || []);
|
|
1470
|
+
} else {
|
|
1471
|
+
setError(res.error || "Error fetching partners");
|
|
1472
|
+
}
|
|
1473
|
+
} catch (err) {
|
|
1474
|
+
setError(err.message);
|
|
1475
|
+
} finally {
|
|
1476
|
+
setLoading(false);
|
|
1477
|
+
}
|
|
1478
|
+
});
|
|
1479
|
+
fetchData();
|
|
1480
|
+
}, []);
|
|
1481
|
+
const partners = useMemo(() => {
|
|
1482
|
+
const getPerSlide = () => {
|
|
1483
|
+
if (windowWidth < 640) return 2;
|
|
1484
|
+
if (windowWidth < 1024) return 3;
|
|
1485
|
+
return 4;
|
|
1486
|
+
};
|
|
1487
|
+
const grouped = [];
|
|
1488
|
+
const perSlide = getPerSlide();
|
|
1489
|
+
for (let i = 0; i < partnersData.length; i += perSlide) {
|
|
1490
|
+
grouped.push(partnersData.slice(i, i + perSlide));
|
|
1491
|
+
}
|
|
1492
|
+
return grouped;
|
|
1493
|
+
}, [partnersData, windowWidth]);
|
|
1494
|
+
useEffect(() => {
|
|
1495
|
+
if (partners.length > 1) {
|
|
1496
|
+
const interval = setInterval(() => {
|
|
1497
|
+
setCurrentPartnerSlide((prev) => (prev + 1) % partners.length);
|
|
1498
|
+
}, 5e3);
|
|
1499
|
+
return () => clearInterval(interval);
|
|
1500
|
+
}
|
|
1501
|
+
}, [partners.length]);
|
|
1502
|
+
useEffect(() => {
|
|
1503
|
+
const fallbackTimer = setTimeout(() => {
|
|
1504
|
+
setPartnersVisible(true);
|
|
1505
|
+
}, 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) {
|
|
1519
|
+
observer.observe(partnersRef.current);
|
|
1520
|
+
} else {
|
|
1521
|
+
clearTimeout(fallbackTimer);
|
|
1522
|
+
setPartnersVisible(true);
|
|
1523
|
+
}
|
|
1524
|
+
return () => {
|
|
1525
|
+
clearTimeout(fallbackTimer);
|
|
1526
|
+
if (partnersRef.current) {
|
|
1527
|
+
observer.unobserve(partnersRef.current);
|
|
1528
|
+
}
|
|
1529
|
+
};
|
|
1530
|
+
}, []);
|
|
1531
|
+
if (loading) {
|
|
1532
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: isDarkMode ? "text-white" : "text-gray-800", children: t("partners.loading") || "Đang tải danh sách đối tác..." }) });
|
|
1533
|
+
}
|
|
1534
|
+
if (error) {
|
|
1535
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-red-500", children: t("partners.error") || error }) });
|
|
1536
|
+
}
|
|
1537
|
+
if (!partnersData.length) return null;
|
|
1538
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1539
|
+
"section",
|
|
1540
|
+
{
|
|
1541
|
+
className: `py-12 lg:py-20 transition-colors duration-300 ${isDarkMode ? "bg-gradient-to-b from-gray-950 via-gray-900 to-gray-800" : "bg-gradient-to-b from-white via-gray-50 to-gray-100"}`,
|
|
1542
|
+
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
|
|
1543
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-12", children: [
|
|
1544
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
1545
|
+
"div",
|
|
1546
|
+
{
|
|
1547
|
+
className: `inline-block px-4 py-2 rounded-full text-sm font-semibold mb-4 border shadow-sm ${isDarkMode ? "bg-blue-900/30 text-blue-300 border-blue-800" : "bg-blue-100 text-blue-800 border-blue-200"}`,
|
|
1548
|
+
children: [
|
|
1549
|
+
"🤝 ",
|
|
1550
|
+
t("partners.badge") || "ĐỐI TÁC CHIẾN LƯỢC"
|
|
1551
|
+
]
|
|
1552
|
+
}
|
|
1553
|
+
),
|
|
1554
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
1555
|
+
"h2",
|
|
1556
|
+
{
|
|
1557
|
+
className: `text-3xl lg:text-5xl font-bold leading-tight ${isDarkMode ? "text-white" : "text-gray-800"}`,
|
|
1558
|
+
children: [
|
|
1559
|
+
t("partners.title.part1") || "Đồng hành cùng",
|
|
1560
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent mt-2", children: t("partners.title.part2") || "Những thương hiệu hàng đầu" })
|
|
1561
|
+
]
|
|
1562
|
+
}
|
|
1563
|
+
)
|
|
1564
|
+
] }),
|
|
1565
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: partnersRef, className: "relative", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
1566
|
+
"div",
|
|
1567
|
+
{
|
|
1568
|
+
className: `transition-all duration-1000 ease-out ${partnersVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"}`,
|
|
1569
|
+
children: [
|
|
1570
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative overflow-hidden mb-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-h-[220px]", children: partners.map((group, slideIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1571
|
+
"div",
|
|
1572
|
+
{
|
|
1573
|
+
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"}`,
|
|
1574
|
+
style: { zIndex: slideIndex === currentPartnerSlide ? 10 : 1 },
|
|
1575
|
+
children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6 px-2", children: group.map((partner, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1576
|
+
PartnerListCard,
|
|
1577
|
+
{
|
|
1578
|
+
partner,
|
|
1579
|
+
idx,
|
|
1580
|
+
t,
|
|
1581
|
+
isDarkMode,
|
|
1582
|
+
getLogoUrl
|
|
1583
|
+
},
|
|
1584
|
+
partner.id || `${slideIndex}-${idx}`
|
|
1585
|
+
)) })
|
|
1586
|
+
},
|
|
1587
|
+
slideIndex
|
|
1588
|
+
)) }) }),
|
|
1589
|
+
partners.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-2", style: { zIndex: 50 }, children: partners.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1590
|
+
"button",
|
|
1591
|
+
{
|
|
1592
|
+
onClick: () => setCurrentPartnerSlide(index2),
|
|
1593
|
+
className: `w-3 h-3 rounded-full transition-all duration-300 ${index2 === currentPartnerSlide ? "bg-blue-500 scale-125 shadow-lg" : isDarkMode ? "bg-gray-600 hover:bg-blue-400" : "bg-gray-300 hover:bg-blue-500"}`,
|
|
1594
|
+
"aria-label": `Slide ${index2 + 1}`
|
|
1595
|
+
},
|
|
1596
|
+
index2
|
|
1597
|
+
)) })
|
|
1598
|
+
]
|
|
1599
|
+
}
|
|
1600
|
+
) })
|
|
1601
|
+
] })
|
|
1602
|
+
}
|
|
1603
|
+
);
|
|
1604
|
+
};
|
|
618
1605
|
const index = {
|
|
619
1606
|
AboutCompanySection,
|
|
620
|
-
CompanyValues
|
|
1607
|
+
CompanyValues,
|
|
1608
|
+
TimelineSection,
|
|
1609
|
+
PartnerCard,
|
|
1610
|
+
PartnersSection,
|
|
1611
|
+
MilestoneSection,
|
|
1612
|
+
TestimonialsSection,
|
|
1613
|
+
PartnerListCard,
|
|
1614
|
+
PartnerListSection
|
|
621
1615
|
};
|
|
622
1616
|
export {
|
|
623
1617
|
AboutCompanySection,
|
|
624
1618
|
CompanyValues,
|
|
1619
|
+
MilestoneSection,
|
|
1620
|
+
PartnerCard,
|
|
1621
|
+
PartnerListCard,
|
|
1622
|
+
PartnerListSection,
|
|
1623
|
+
PartnersSection,
|
|
1624
|
+
TestimonialsSection,
|
|
1625
|
+
TimelineSection,
|
|
625
1626
|
index as default
|
|
626
1627
|
};
|
|
627
1628
|
//# sourceMappingURL=nvis-fe-cms-libs.es.js.map
|