nvis-fe-cms-libs 1.1.17 → 1.1.19

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

@@ -4522,6 +4522,149 @@ const FaqSection = ({ data, t, isDarkMode }) => {
       ` })
   ] });
 };
+const PageHighlightSection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
+  var _a;
+  const [activeTab, setActiveTab] = useState(0);
+  const rawData = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.filter((item) => item == null ? void 0 : item.data).map((item) => item.data)) || [];
+  const getImageUrl = (imagePath) => {
+    if (imagePath) {
+      return `${imageBaseUrl}${imagePath}`;
+    }
+    return null;
+  };
+  const highlightData = rawData.map((item) => {
+    var _a2, _b, _c, _d, _e, _f;
+    const mainImagePath = ((_b = (_a2 = item.pageImages) == null ? void 0 : _a2.find((img) => img.isMain)) == null ? void 0 : _b.url) || ((_d = (_c = item.pageImages) == null ? void 0 : _c[0]) == null ? void 0 : _d.url) || null;
+    const mainImage = getImageUrl(mainImagePath);
+    const primaryTag = ((_f = (_e = item.tagKeys) == null ? void 0 : _e[0]) == null ? void 0 : _f.key) || item.title;
+    return {
+      title: item.title,
+      slug: item.slug,
+      description: item.description,
+      image: mainImage,
+      tag: primaryTag,
+      tagKeys: item.tagKeys || [],
+      features: item.features || []
+      // Nếu có features trong data
+    };
+  });
+  useEffect(() => {
+    if (highlightData.length === 0) return;
+    const interval = setInterval(() => {
+      setActiveTab((prev) => (prev + 1) % highlightData.length);
+    }, 5e3);
+    return () => clearInterval(interval);
+  }, [highlightData.length]);
+  const handleNavigate = (slug) => {
+    if (slug) {
+      window.open(slug, "_blank");
+    }
+  };
+  const gradientColors = [
+    "from-blue-600 to-purple-600",
+    "from-purple-600 to-pink-600",
+    "from-blue-500 to-purple-500",
+    "from-purple-500 to-pink-500",
+    "from-emerald-600 to-teal-600",
+    "from-orange-500 to-red-500"
+  ];
+  const defaultImage = "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1200&h=800&fit=crop&q=80";
+  if (!highlightData.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("highlight.noData.title") || "Chưa có dữ liệu" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `${isDarkMode ? "text-gray-300" : "text-gray-600"}`, children: t("highlight.noData.description") || "Hiện tại chưa có sản phẩm nào được thiết lập." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `min-h-screen py-6 px-2 relative overflow-hidden transition-colors duration-500 ${isDarkMode ? "bg-gradient-to-br from-gray-950 via-purple-900 to-slate-900" : "bg-gradient-to-br from-slate-50 via-blue-50 to-purple-50"}`, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute top-20 left-10 w-72 h-72 rounded-full blur-3xl animate-pulse ${isDarkMode ? "bg-purple-600/20" : "bg-blue-400/10"}` }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute bottom-20 right-10 w-96 h-96 rounded-full blur-3xl animate-pulse ${isDarkMode ? "bg-pink-600/20" : "bg-purple-400/10"}` }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto relative z-10", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative", children: highlightData.map((item, index2) => {
+        const color = gradientColors[index2 % gradientColors.length];
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: `transition-opacity duration-700 ${activeTab === index2 ? "opacity-100" : "opacity-0 absolute inset-0 pointer-events-none"}`,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${isDarkMode ? "bg-gradient-to-br from-gray-800/50 to-gray-900/50 border-gray-700/50" : "bg-white/90 border-white/50"} backdrop-blur-xl rounded-3xl shadow-2xl overflow-hidden border transition-colors duration-500`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid lg:grid-cols-2 gap-0 lg:h-[420px]", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative h-[280px] lg:h-full overflow-hidden group", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "img",
+                  {
+                    src: item.image || defaultImage,
+                    alt: item.title,
+                    className: "w-full h-full object-position transition-transform duration-700 group-hover:scale-110",
+                    onError: (e) => {
+                      e.target.src = defaultImage;
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 bg-gradient-to-br ${color} opacity-20` }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-8 left-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `inline-block bg-gradient-to-r ${color} text-white px-6 py-3 rounded-full text-sm font-bold shadow-xl`, children: item.tag }) })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-5 lg:p-8 flex flex-col justify-center", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: `text-3xl lg:text-4xl font-black mb-3 bg-gradient-to-r ${color} bg-clip-text text-transparent`, children: item.title }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `${isDarkMode ? "text-gray-300" : "text-gray-600"} text-sm leading-relaxed mb-5`, children: item.description }),
+                item.features && item.features.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2 mb-6", children: item.features.map((feature, idx) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2 group", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `mt-0.5 w-4 h-4 rounded-full bg-gradient-to-r ${color} flex items-center justify-center flex-shrink-0`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "w-2.5 h-2.5 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `${isDarkMode ? "text-gray-300 group-hover:text-white" : "text-gray-700 group-hover:text-gray-900"} font-medium text-xs transition-colors`, children: feature })
+                ] }, idx)) }),
+                item.tagKeys.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-2", children: item.tagKeys.map((tag, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "span",
+                  {
+                    className: `px-3 py-1 rounded-lg text-xs font-semibold transition-all duration-300 ${isDarkMode ? "bg-gray-700/50 text-gray-300 hover:bg-gray-700" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`,
+                    children: tag.key
+                  },
+                  idx
+                )) }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  "button",
+                  {
+                    onClick: () => handleNavigate(item.slug),
+                    className: `group relative px-6 py-3 rounded-xl font-bold text-sm transition-all duration-300 transform hover:scale-105 hover:shadow-2xl overflow-hidden bg-gradient-to-r ${color} text-white shadow-xl w-full`,
+                    children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "relative z-10 flex items-center justify-center gap-2", children: [
+                        t("highlight.cta") || "Khám phá",
+                        " ",
+                        item.title,
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "w-5 h-5 group-hover:translate-x-1 transition-transform", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M17 8l4 4m0 0l-4 4m4-4H3" }) })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-white/20 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left" })
+                    ]
+                  }
+                )
+              ] })
+            ] }) })
+          },
+          index2
+        );
+      }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap justify-center gap-4 mt-12", children: highlightData.map((item, index2) => {
+        const color = gradientColors[index2 % gradientColors.length];
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            onClick: () => setActiveTab(index2),
+            className: `group relative px-8 py-4 rounded-xl font-bold text-lg transition-all duration-300 transform hover:scale-105 overflow-hidden ${activeTab === index2 ? `bg-gradient-to-r ${color} text-white shadow-xl` : isDarkMode ? "bg-gray-800/50 text-gray-300 hover:shadow-xl shadow-lg border border-gray-700/50 backdrop-blur-sm" : "bg-white text-gray-700 hover:shadow-xl shadow-lg"}`,
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "relative z-10", children: item.title }),
+              activeTab !== index2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 bg-gradient-to-r ${color} opacity-0 group-hover:opacity-100 transition-opacity duration-300` })
+            ]
+          },
+          index2
+        );
+      }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center gap-3 mt-8", children: highlightData.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          onClick: () => setActiveTab(index2),
+          className: `transition-all duration-300 rounded-full ${activeTab === index2 ? "w-12 h-3 bg-gradient-to-r from-blue-600 to-purple-600" : isDarkMode ? "w-3 h-3 bg-gray-600 hover:bg-gray-500" : "w-3 h-3 bg-gray-300 hover:bg-gray-400"}`
+        },
+        index2
+      )) })
+    ] })
+  ] });
+};
 const index = {
   AboutCompanySection,
   CompanyValues,
@@ -4543,7 +4686,8 @@ const index = {
   TextSection,
   DiagramSection,
   DiagramSection2,
-  FaqSection
+  FaqSection,
+  PageHighlightSection
 };
 export {
   AboutCompanySection,
@@ -4558,6 +4702,7 @@ export {
   ImageSection,
   ImageSingleSection,
   MilestoneSection,
+  PageHighlightSection,
   PartnerCard,
   PartnerListCard,
   PartnerListSection,