nvis-fe-cms-libs 1.0.0 → 1.0.1

package/dist/nvis-fe-cms-libs.umd.js

@@ -618,12 +618,432 @@
       )
     ] });
   };
+  const TimelineSection = ({ data, t, isDarkMode }) => {
+    var _a;
+    const timelineData = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.map((item) => item.data)) || [];
+    const [timelineVisible, setTimelineVisible] = require$$0.useState([]);
+    const timelineRefs = require$$0.useRef([]);
+    require$$0.useEffect(() => {
+      setTimelineVisible(new Array(timelineData.length).fill(false));
+    }, [timelineData.length]);
+    require$$0.useEffect(() => {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              const index2 = timelineRefs.current.findIndex((el) => el === entry.target);
+              if (index2 !== -1) {
+                setTimelineVisible((prev) => {
+                  const newVisible = [...prev];
+                  newVisible[index2] = true;
+                  return newVisible;
+                });
+              }
+              observer.unobserve(entry.target);
+            }
+          });
+        },
+        { threshold: 0.1 }
+      );
+      timelineRefs.current.forEach((el) => el && observer.observe(el));
+      return () => {
+        timelineRefs.current.forEach((el) => el && observer.unobserve(el));
+      };
+    }, [timelineData.length]);
+    if (!timelineData.length) {
+      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: [
+        /* @__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" }),
+        /* @__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." })
+      ] }) });
+    }
+    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: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-12", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            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"}`,
+            children: [
+              "📈 ",
+              t("timeline.header.badge") || "HÀNH TRÌNH PHÁT TRIỂN",
+              isDarkMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "div",
+                  {
+                    className: "absolute w-12 h-12 bg-white/5 rounded-full",
+                    style: { left: "10%", top: "20%" }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "div",
+                  {
+                    className: "absolute w-10 h-10 bg-white/5 rounded-full",
+                    style: { right: "30%", bottom: "10%" }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "div",
+                  {
+                    className: "absolute w-14 h-14 bg-white/5 rounded-md",
+                    style: { left: "20%", bottom: "30%" }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "div",
+                  {
+                    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'
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "h2",
+          {
+            className: `text-3xl lg:text-4xl font-bold mb-4 ${isDarkMode ? "text-white" : "text-gray-900"}`,
+            children: [
+              t("timeline.header.title1") || "Những cột mốc",
+              /* @__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" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
+        /* @__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" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-8", children: timelineData.map((milestone, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            ref: (el) => timelineRefs.current[index2] = el,
+            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"}`,
+            style: { transitionDelay: `${index2 * 200}ms` },
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 px-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "div",
+                {
+                  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"}`,
+                  children: [
+                    isDarkMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "div",
+                        {
+                          className: "absolute w-12 h-12 bg-white/5 rounded-full",
+                          style: { left: "10%", top: "20%" }
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "div",
+                        {
+                          className: "absolute w-10 h-10 bg-white/5 rounded-full",
+                          style: { right: "30%", bottom: "10%" }
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "div",
+                        {
+                          className: "absolute w-14 h-14 bg-white/5 rounded-md",
+                          style: { left: "20%", bottom: "30%" }
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "div",
+                        {
+                          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'
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-blue-600 font-bold text-xl mb-2", children: milestone.year }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "h3",
+                      {
+                        className: `text-lg font-bold mb-2 ${isDarkMode ? "text-white" : "text-gray-900"}`,
+                        children: milestone.title
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "p",
+                      {
+                        className: `${isDarkMode ? "text-gray-300" : "text-gray-600"}`,
+                        children: milestone.description
+                      }
+                    )
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  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`
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1" })
+            ]
+          },
+          index2
+        )) })
+      ] })
+    ] }) });
+  };
+  const PartnerCard = ({ partner, idx, t, getLogoUrl, isDarkMode }) => {
+    const itemRef = require$$0.useRef(null);
+    const [visible, setVisible] = require$$0.useState(false);
+    require$$0.useEffect(() => {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              setVisible(true);
+              observer.unobserve(entry.target);
+            }
+          });
+        },
+        { threshold: 0.2 }
+      );
+      if (itemRef.current) observer.observe(itemRef.current);
+      return () => itemRef.current && observer.unobserve(itemRef.current);
+    }, []);
+    const logoSrc = getLogoUrl(partner.logoUrl);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        ref: itemRef,
+        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
+    ${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"}
+    ${visible ? "opacity-100 scale-100" : "opacity-0 scale-75"}`,
+        style: { transitionDelay: `${idx * 150}ms` },
+        onClick: () => partner.websiteUrl && window.open(partner.websiteUrl, "_blank"),
+        children: [
+          isDarkMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                className: "absolute w-12 h-12 bg-white/5 rounded-full",
+                style: { left: "10%", top: "20%" }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                className: "absolute w-10 h-10 bg-white/5 rounded-full",
+                style: { right: "30%", bottom: "10%" }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                className: "absolute w-14 h-14 bg-white/5 rounded-md",
+                style: { left: "20%", bottom: "30%" }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                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'
+              }
+            )
+          ] }),
+          /* @__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(
+            "img",
+            {
+              src: logoSrc,
+              alt: partner.name,
+              className: "logo-image max-w-full max-h-full object-contain"
+            }
+          ) : /* @__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 }) }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "h4",
+            {
+              className: `font-bold text-center mb-2 ${isDarkMode ? "text-white" : "text-gray-900"}`,
+              children: partner.name
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "p",
+            {
+              className: `text-sm text-center mb-2 ${isDarkMode ? "text-gray-300" : "text-gray-600"}`,
+              children: partner.description
+            }
+          ),
+          partner.websiteUrl && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "website-hint", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-blue-600 font-medium", children: [
+            t("partners.viewDetails") || "Xem chi tiết",
+            " →"
+          ] }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("style", { jsx: true, children: `
+        .partner-card {
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .partner-card:hover {
+          transform: translateY(-3px);
+          box-shadow: 0 8px 20px ${isDarkMode ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)"};
+        }
+        .logo-container {
+          background: ${isDarkMode ? "linear-gradient(135deg, #374151 0%, #1f2937 100%)" : "linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)"};
+          border: 1px solid ${isDarkMode ? "#4b5563" : "#e2e8f0"};
+          transition: all 0.3s ease;
+        }
+        .partner-card:hover .logo-container {
+          border-color: #3b82f6;
+          background: ${isDarkMode ? "linear-gradient(135deg, #4b5563 0%, #374151 100%)" : "linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)"};
+        }
+        .logo-image {
+          filter: ${isDarkMode ? "grayscale(0.3) opacity(0.8)" : "grayscale(0.2) opacity(0.9)"};
+          transition: all 0.3s ease;
+        }
+        .partner-card:hover .logo-image {
+          filter: grayscale(0) opacity(1);
+          transform: scale(1.05);
+        }
+        .website-hint {
+          opacity: 0;
+          transform: translateY(4px);
+          transition: all 0.3s ease;
+        }
+        .partner-card:hover .website-hint {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      ` })
+        ]
+      }
+    );
+  };
+  function useWindowSize() {
+    const [width, setWidth] = require$$0.useState(
+      typeof window !== "undefined" ? window.innerWidth : 1200
+    );
+    require$$0.useEffect(() => {
+      if (typeof window === "undefined") return;
+      const handleResize = () => setWidth(window.innerWidth);
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    return width;
+  }
+  const PartnersSection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
+    var _a;
+    const partnersData = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.map((item) => item.data)) || [];
+    const [currentPartnerSlide, setCurrentPartnerSlide] = require$$0.useState(0);
+    const [partnersVisible, setPartnersVisible] = require$$0.useState(false);
+    const partnersRef = require$$0.useRef(null);
+    const windowWidth = useWindowSize();
+    const getLogoUrl = (logoUrl) => {
+      if (!logoUrl) return null;
+      if (logoUrl.startsWith("http")) return logoUrl;
+      return `${imageBaseUrl}${logoUrl}`;
+    };
+    const partners = require$$0.useMemo(() => {
+      const getPerSlide = () => {
+        if (windowWidth < 640) return 2;
+        if (windowWidth < 1024) return 3;
+        return 4;
+      };
+      const grouped = [];
+      const perSlide = getPerSlide();
+      for (let i = 0; i < partnersData.length; i += perSlide) {
+        grouped.push(partnersData.slice(i, i + perSlide));
+      }
+      return grouped;
+    }, [partnersData, windowWidth]);
+    require$$0.useEffect(() => {
+      if (partners.length > 1) {
+        const interval = setInterval(() => {
+          setCurrentPartnerSlide((prev) => (prev + 1) % partners.length);
+        }, 5e3);
+        return () => clearInterval(interval);
+      }
+    }, [partners.length]);
+    require$$0.useEffect(() => {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              setPartnersVisible(true);
+              observer.unobserve(entry.target);
+            }
+          });
+        },
+        { threshold: 0.1 }
+      );
+      if (partnersRef.current) observer.observe(partnersRef.current);
+      return () => partnersRef.current && observer.unobserve(partnersRef.current);
+    }, []);
+    if (!partnersData.length) return null;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "section",
+      {
+        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"}`,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-12", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "div",
+              {
+                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"}`,
+                children: [
+                  "🤝 ",
+                  t("partners.header.badge")
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "h2",
+              {
+                className: `text-3xl lg:text-5xl font-bold leading-tight ${isDarkMode ? "text-white" : "text-gray-800"}`,
+                children: [
+                  t("partners.header.title"),
+                  /* @__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") })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: partnersRef, className: "relative overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
+            {
+              className: `transition-all duration-1000 ease-out ${partnersVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"}`,
+              children: [
+                /* @__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(
+                  "div",
+                  {
+                    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"}`,
+                    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(
+                      PartnerCard,
+                      {
+                        partner,
+                        idx,
+                        t,
+                        getLogoUrl,
+                        isDarkMode
+                      },
+                      partner.id || idx
+                    )) })
+                  },
+                  slideIndex
+                )) }),
+                partners.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-2", children: partners.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "button",
+                  {
+                    onClick: () => setCurrentPartnerSlide(index2),
+                    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"}`
+                  },
+                  index2
+                )) })
+              ]
+            }
+          ) })
+        ] })
+      }
+    );
+  };
   const index = {
     AboutCompanySection,
-    CompanyValues
+    CompanyValues,
+    TimelineSection,
+    PartnerCard,
+    PartnersSection
   };
   exports2.AboutCompanySection = AboutCompanySection;
   exports2.CompanyValues = CompanyValues;
+  exports2.PartnerCard = PartnerCard;
+  exports2.PartnersSection = PartnersSection;
+  exports2.TimelineSection = TimelineSection;
   exports2.default = index;
   Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 }));