nvis-fe-cms-libs 1.0.1 → 1.0.2

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

@@ -1,3 +1,23 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 import require$$0, { useRef, useState, useEffect, useMemo } from "react";
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production = {};
@@ -903,7 +923,7 @@ const PartnerCard = ({ partner, idx, t, getLogoUrl, isDarkMode }) => {
     }
   );
 };
-function useWindowSize() {
+function useWindowSize$1() {
   const [width, setWidth] = useState(
     typeof window !== "undefined" ? window.innerWidth : 1200
   );
@@ -921,7 +941,7 @@ const PartnersSection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
   const [currentPartnerSlide, setCurrentPartnerSlide] = useState(0);
   const [partnersVisible, setPartnersVisible] = useState(false);
   const partnersRef = useRef(null);
-  const windowWidth = useWindowSize();
+  const windowWidth = useWindowSize$1();
   const getLogoUrl = (logoUrl) => {
     if (!logoUrl) return null;
     if (logoUrl.startsWith("http")) return logoUrl;
@@ -1029,18 +1049,579 @@ const PartnersSection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
     }
   );
 };
+const MilestoneSection = ({ data, t, isDarkMode, getMilestoneTimeline }) => {
+  const [milestones, setMilestones] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [timelineVisible, setTimelineVisible] = useState([]);
+  const timelineRefs = useRef([]);
+  useEffect(() => {
+    const fetchMilestones = () => __async(null, null, function* () {
+      var _a;
+      if (getMilestoneTimeline) {
+        try {
+          setLoading(true);
+          const res = yield getMilestoneTimeline();
+          if (res.success) {
+            setMilestones(res.data || []);
+          } else {
+            setMilestones([]);
+          }
+        } catch (error) {
+          setMilestones([]);
+        } finally {
+          setLoading(false);
+        }
+      } else {
+        const milestonesData = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.map((item) => item.data)) || [];
+        setMilestones(milestonesData);
+        setLoading(false);
+      }
+    });
+    fetchMilestones();
+  }, []);
+  useEffect(() => {
+    setTimelineVisible(new Array(milestones.length).fill(false));
+  }, [milestones.length]);
+  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));
+    };
+  }, [milestones.length]);
+  if (loading) {
+    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") }) });
+  }
+  if (!milestones.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("milestone.status.noData")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "p",
+            {
+              className: `${isDarkMode ? "text-gray-300" : "text-gray-600"}`,
+              children: t("milestone.noDataDescription")
+            }
+          )
+        ] })
+      }
+    );
+  }
+  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("milestone.header.badge")
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "h2",
+            {
+              className: `text-3xl lg:text-4xl font-bold mb-4 ${isDarkMode ? "text-white" : "text-gray-900"}`,
+              children: [
+                t("milestone.header.title"),
+                /* @__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") })
+              ]
+            }
+          )
+        ] }),
+        /* @__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: milestones.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: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-blue-600 font-bold text-xl mb-2", children: milestone.time }),
+                      /* @__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" })
+              ]
+            },
+            milestone.id
+          )) })
+        ] })
+      ] })
+    }
+  );
+};
+const TestimonialsSection = ({ data, t, isDarkMode }) => {
+  var _a;
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const testimonials = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.map((item) => ({
+    quote: item.data.content,
+    author: item.data.customerName,
+    position: item.data.customerTitle || t("testimonials.fallback.defaultPosition"),
+    company: item.data.customerCompany || ""
+  }))) || [];
+  const fallbackTestimonials = [
+    {
+      quote: t("testimonials.fallback.testimonial1.quote"),
+      author: t("testimonials.fallback.testimonial1.author"),
+      position: t("testimonials.fallback.testimonial1.position"),
+      company: t("testimonials.fallback.testimonial1.company")
+    },
+    {
+      quote: t("testimonials.fallback.testimonial2.quote"),
+      author: t("testimonials.fallback.testimonial2.author"),
+      position: t("testimonials.fallback.testimonial2.position"),
+      company: t("testimonials.fallback.testimonial2.company")
+    },
+    {
+      quote: t("testimonials.fallback.testimonial3.quote"),
+      author: t("testimonials.fallback.testimonial3.author"),
+      position: t("testimonials.fallback.testimonial3.position"),
+      company: t("testimonials.fallback.testimonial3.company")
+    }
+  ];
+  const displayTestimonials = testimonials.length > 0 ? testimonials : fallbackTestimonials;
+  useEffect(() => {
+    if (displayTestimonials.length > 1) {
+      const interval = setInterval(() => {
+        setCurrentIndex((prev) => (prev + 1) % displayTestimonials.length);
+      }, 5e3);
+      return () => clearInterval(interval);
+    }
+  }, [displayTestimonials.length]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "section",
+    {
+      className: `py-20 transition-colors duration-200 ${isDarkMode ? "bg-gray-700" : "bg-gray-50"}`,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            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"}`,
+            children: [
+              "💬 ",
+              t("testimonials.header.badge")
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "h2",
+          {
+            className: `text-3xl lg:text-4xl font-bold mb-8 transition-colors duration-200 ${isDarkMode ? "text-white" : "text-gray-900"}`,
+            children: [
+              t("testimonials.header.title"),
+              /* @__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") })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
+            {
+              className: `p-6 rounded-2xl transition-all duration-500 transform ${isDarkMode ? "bg-gray-800/80 backdrop-blur-sm border border-gray-700" : "bg-white"}`,
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  "blockquote",
+                  {
+                    className: `text-lg lg:text-xl italic mb-6 animate-fadeIn transition-colors duration-200 ${isDarkMode ? "text-gray-300" : "text-gray-700"}`,
+                    children: [
+                      '"',
+                      displayTestimonials[currentIndex].quote,
+                      '"'
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center space-x-4 animate-fadeIn", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-3xl", children: "👤" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-left", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "div",
+                      {
+                        className: `font-bold text-base transition-colors duration-200 ${isDarkMode ? "text-white" : "text-gray-900"}`,
+                        children: displayTestimonials[currentIndex].author
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-blue-600 font-medium text-sm", children: displayTestimonials[currentIndex].position }),
+                    displayTestimonials[currentIndex].company && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "div",
+                      {
+                        className: `text-xs transition-colors duration-200 ${isDarkMode ? "text-gray-400" : "text-gray-600"}`,
+                        children: displayTestimonials[currentIndex].company
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            },
+            currentIndex
+          ),
+          displayTestimonials.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-2 mt-4", children: displayTestimonials.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              onClick: () => setCurrentIndex(index2),
+              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"}`
+            },
+            index2
+          )) })
+        ] })
+      ] })
+    }
+  );
+};
+const PartnerListCard = ({ partner, idx = 0, t, isDarkMode, getLogoUrl }) => {
+  const itemRef = useRef(null);
+  const [visible, setVisible] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  if (!partner) return null;
+  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 ? getLogoUrl(partner.logoUrl) : null;
+  const handleImageError = (e) => {
+    e.target.style.display = "none";
+    e.target.nextSibling.style.display = "flex";
+  };
+  const handleClick = () => {
+    if (partner.websiteUrl) {
+      window.open(partner.websiteUrl, "_blank", "noopener,noreferrer");
+    }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      ref: itemRef,
+      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]
+        ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 border border-blue-800" : "bg-white border border-gray-200"}
+        ${visible ? "opacity-100 scale-100" : "opacity-0 scale-75"}
+        ${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" : ""}`,
+      style: {
+        transitionDelay: `${idx * 150}ms`,
+        transform: `translateY(${isHovered ? "-4px" : "0px"}) scale(${visible ? "1" : "0.75"})`
+      },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      onClick: handleClick,
+      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 opacity-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              style: {
+                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")`,
+                backgroundSize: "60px 60px"
+              },
+              className: "w-full h-full"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: `w-20 h-14 flex items-center justify-center mb-4 rounded-lg overflow-hidden border transition-all duration-300
+          ${isDarkMode ? "border-gray-600" : "border-gray-200"}
+          ${isHovered ? "border-blue-500" : ""}
+        `,
+            style: {
+              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%)"
+            },
+            children: logoSrc ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "img",
+                {
+                  src: logoSrc,
+                  alt: partner.name || t("partners.logoAlt") || "Partner logo",
+                  className: "max-w-full max-h-full object-contain transition-all duration-300",
+                  style: {
+                    filter: isDarkMode ? isHovered ? "grayscale(0) opacity(1)" : "grayscale(0.3) opacity(0.8)" : isHovered ? "grayscale(0) opacity(1)" : "grayscale(0.2) opacity(0.9)",
+                    transform: isHovered ? "scale(1.05)" : "scale(1)"
+                  },
+                  onError: handleImageError,
+                  loading: "lazy"
+                }
+              ),
+              /* @__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 }) })
+            ] }) : /* @__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 text-sm leading-tight ${isDarkMode ? "text-white" : "text-gray-900"}`, children: partner.name }),
+        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 }),
+        partner.websiteUrl && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "transition-all duration-300",
+            style: {
+              opacity: isHovered ? 1 : 0,
+              transform: `translateY(${isHovered ? "0px" : "4px"})`
+            },
+            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-blue-600 font-medium", children: [
+              t("partners.viewDetails") || "Xem chi tiết",
+              " →"
+            ] })
+          }
+        )
+      ]
+    }
+  );
+};
+function useWindowSize() {
+  const [width, setWidth] = useState(
+    typeof window !== "undefined" ? window.innerWidth : 1200
+  );
+  useEffect(() => {
+    const handleResize = () => setWidth(window.innerWidth);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return width;
+}
+const PartnerListSection = ({ t, isDarkMode, getPartnerList, imageBaseUrl = "" }) => {
+  const [partnersData, setPartnersData] = useState([]);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [currentPartnerSlide, setCurrentPartnerSlide] = useState(0);
+  const [partnersVisible, setPartnersVisible] = useState(false);
+  const partnersRef = useRef(null);
+  const windowWidth = useWindowSize();
+  const getLogoUrl = (logoUrl) => {
+    if (!logoUrl) return null;
+    if (logoUrl.startsWith("http")) return logoUrl;
+    return `${imageBaseUrl}${logoUrl}`;
+  };
+  useEffect(() => {
+    const fetchData = () => __async(null, null, function* () {
+      try {
+        const res = yield getPartnerList();
+        if (res.success) {
+          setPartnersData(res.data || []);
+        } else {
+          setError(res.error || "Error fetching partners");
+        }
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    });
+    fetchData();
+  }, []);
+  const partners = 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]);
+  useEffect(() => {
+    if (partners.length > 1) {
+      const interval = setInterval(() => {
+        setCurrentPartnerSlide((prev) => (prev + 1) % partners.length);
+      }, 5e3);
+      return () => clearInterval(interval);
+    }
+  }, [partners.length]);
+  useEffect(() => {
+    const fallbackTimer = setTimeout(() => {
+      setPartnersVisible(true);
+    }, 500);
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            clearTimeout(fallbackTimer);
+            setPartnersVisible(true);
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      { threshold: 0.1, rootMargin: "50px" }
+    );
+    if (partnersRef.current) {
+      observer.observe(partnersRef.current);
+    } else {
+      clearTimeout(fallbackTimer);
+      setPartnersVisible(true);
+    }
+    return () => {
+      clearTimeout(fallbackTimer);
+      if (partnersRef.current) {
+        observer.unobserve(partnersRef.current);
+      }
+    };
+  }, []);
+  if (loading) {
+    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..." }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-red-500", children: t("partners.error") || error }) });
+  }
+  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.badge") || "ĐỐI TÁC CHIẾN LƯỢC"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "h2",
+            {
+              className: `text-3xl lg:text-5xl font-bold leading-tight ${isDarkMode ? "text-white" : "text-gray-800"}`,
+              children: [
+                t("partners.title.part1") || "Đồng hành cùng",
+                /* @__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" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: partnersRef, className: "relative", 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 overflow-hidden mb-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-h-[220px]", children: partners.map((group, slideIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  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"}`,
+                  style: { zIndex: slideIndex === currentPartnerSlide ? 10 : 1 },
+                  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(
+                    PartnerListCard,
+                    {
+                      partner,
+                      idx,
+                      t,
+                      isDarkMode,
+                      getLogoUrl
+                    },
+                    partner.id || `${slideIndex}-${idx}`
+                  )) })
+                },
+                slideIndex
+              )) }) }),
+              partners.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-2", style: { zIndex: 50 }, children: partners.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  onClick: () => setCurrentPartnerSlide(index2),
+                  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"}`,
+                  "aria-label": `Slide ${index2 + 1}`
+                },
+                index2
+              )) })
+            ]
+          }
+        ) })
+      ] })
+    }
+  );
+};
 const index = {
   AboutCompanySection,
   CompanyValues,
   TimelineSection,
   PartnerCard,
-  PartnersSection
+  PartnersSection,
+  MilestoneSection,
+  TestimonialsSection,
+  PartnerListCard,
+  PartnerListSection
 };
 export {
   AboutCompanySection,
   CompanyValues,
+  MilestoneSection,
   PartnerCard,
+  PartnerListCard,
+  PartnerListSection,
   PartnersSection,
+  TestimonialsSection,
   TimelineSection,
   index as default
 };