nvis-fe-cms-libs 1.1.17 → 1.1.19

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

@@ -4525,6 +4525,149 @@ var __async = (__this, __arguments, generator) => {
       ` })
     ] });
   };
+  const PageHighlightSection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
+    var _a;
+    const [activeTab, setActiveTab] = require$$0.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
+      };
+    });
+    require$$0.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,
@@ -4546,7 +4689,8 @@ var __async = (__this, __arguments, generator) => {
     TextSection,
     DiagramSection,
     DiagramSection2,
-    FaqSection
+    FaqSection,
+    PageHighlightSection
   };
   exports2.AboutCompanySection = AboutCompanySection;
   exports2.CompanyValues = CompanyValues;
@@ -4560,6 +4704,7 @@ var __async = (__this, __arguments, generator) => {
   exports2.ImageSection = ImageSection;
   exports2.ImageSingleSection = ImageSingleSection;
   exports2.MilestoneSection = MilestoneSection;
+  exports2.PageHighlightSection = PageHighlightSection;
   exports2.PartnerCard = PartnerCard;
   exports2.PartnerListCard = PartnerListCard;
   exports2.PartnerListSection = PartnerListSection;