nvis-fe-cms-libs 1.1.41 → 1.1.42

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

@@ -392,22 +392,28 @@ const CompanyValues = ({ companyData, t, isDarkMode }) => {
   const items = [
     {
       icon: "💡",
-      bgLight: "bg-blue-100 text-blue-600",
-      bgDark: "bg-blue-900/40 text-blue-300",
+      gradient: "bg-gradient-blue-soft",
+      textGradient: "text-gradient-blue-soft",
+      iconBg: isDarkMode ? "bg-blue-900/40" : "bg-blue-100",
+      iconColor: isDarkMode ? "text-blue-300" : "text-blue-600",
       title: t("about.companyValues.vision") || "Tầm nhìn",
       text: cleanHtmlContent(safeCompanyData.vision) || "Tầm nhìn của chúng tôi sẽ được cập nhật trong thời gian tới."
     },
     {
       icon: "🚀",
-      bgLight: "bg-emerald-100 text-emerald-600",
-      bgDark: "bg-emerald-900/40 text-emerald-300",
+      gradient: "bg-gradient-emerald-teal",
+      textGradient: "text-gradient-emerald-teal",
+      iconBg: isDarkMode ? "bg-emerald-900/40" : "bg-emerald-100",
+      iconColor: isDarkMode ? "text-emerald-300" : "text-emerald-600",
       title: t("about.companyValues.mission") || "Sứ mệnh",
       text: cleanHtmlContent(safeCompanyData.mission) || "Sứ mệnh của chúng tôi sẽ được cập nhật trong thời gian tới."
     },
     {
       icon: "💎",
-      bgLight: "bg-purple-100 text-purple-600",
-      bgDark: "bg-purple-900/40 text-purple-300",
+      gradient: "bg-gradient-purple-soft",
+      textGradient: "text-gradient-purple-soft",
+      iconBg: isDarkMode ? "bg-purple-900/40" : "bg-purple-100",
+      iconColor: isDarkMode ? "text-purple-300" : "text-purple-600",
       title: t("about.companyValues.coreValues") || "Giá trị cốt lõi",
       text: cleanHtmlContent(safeCompanyData.coreValues) || "Giá trị cốt lõi của chúng tôi sẽ được cập nhật trong thời gian tới."
     }
@@ -445,11 +451,54 @@ const CompanyValues = ({ companyData, t, isDarkMode }) => {
     };
   }, [validItems.length]);
   if (!companyData || validItems.length === 0) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `text-center py-8 px-4 rounded-lg border ${isDarkMode ? "border-gray-700 bg-gray-800/50" : "border-gray-300 bg-gray-50"}`, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center ${isDarkMode ? "bg-gray-700" : "bg-gray-200"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `w-8 h-8 ${isDarkMode ? "text-gray-500" : "text-gray-400"}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-lg font-semibold mb-2 ${isDarkMode ? "text-white" : "text-gray-900"}`, children: "Thông tin công ty" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm ${isDarkMode ? "text-gray-400" : "text-gray-600"}`, children: "Tầm nhìn, sứ mệnh và giá trị cốt lõi sẽ được cập nhật sớm." })
-    ] });
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: "text-center py-8 px-4 rounded-lg border",
+        style: {
+          backgroundColor: isDarkMode ? "var(--bg-secondary)" : "var(--bg-secondary)",
+          borderColor: isDarkMode ? "var(--border-primary)" : "var(--border-primary)"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: "w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center",
+              style: {
+                backgroundColor: isDarkMode ? "var(--bg-tertiary)" : "var(--bg-tertiary)"
+              },
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "svg",
+                {
+                  className: "w-8 h-8",
+                  style: { color: isDarkMode ? "var(--text-tertiary)" : "var(--text-tertiary)" },
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "h3",
+            {
+              className: "text-lg font-semibold mb-2",
+              style: { color: isDarkMode ? "var(--text-primary)" : "var(--text-primary)" },
+              children: "Thông tin công ty"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "p",
+            {
+              className: "text-sm",
+              style: { color: isDarkMode ? "var(--text-secondary)" : "var(--text-secondary)" },
+              children: "Tầm nhìn, sứ mệnh và giá trị cốt lõi sẽ được cập nhật sớm."
+            }
+          )
+        ]
+      }
+    );
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-6", children: validItems.map((item, index2) => {
     try {
@@ -457,13 +506,26 @@ const CompanyValues = ({ companyData, t, isDarkMode }) => {
         "div",
         {
           ref: (el) => refs.current[index2] = el,
-          className: `flex items-start space-x-4 rounded-2xl p-6 transform transition-all duration-700 ease-out border backdrop-blur-sm ${isDarkMode ? "border-blue-800/40 bg-gradient-to-br from-blue-900/30 via-indigo-900/20 to-purple-900/30 hover:from-blue-800/40 hover:to-purple-800/40" : "border-gray-200 bg-transparent hover:border-gray-300"} ${visible[index2] ? "opacity-100 scale-100" : "opacity-0 scale-75"}`,
-          style: { transitionDelay: `${index2 * 200}ms` },
+          className: `
+                flex items-start space-x-4 rounded-2xl p-6 
+                transform transition-all duration-700 ease-out 
+                border backdrop-blur-sm
+                ${visible[index2] ? "opacity-100 scale-100" : "opacity-0 scale-75"}
+              `,
+          style: __spreadValues({
+            transitionDelay: `${index2 * 200}ms`,
+            borderColor: isDarkMode ? "var(--border-primary)" : "var(--border-primary)",
+            backgroundColor: isDarkMode ? "var(--bg-secondary)" : "transparent"
+          }, isDarkMode && {
+            backgroundImage: `linear-gradient(to bottom right, 
+                    ${index2 === 0 ? "var(--gradient-blue-soft-start)" : index2 === 1 ? "var(--gradient-emerald-start)" : "var(--gradient-purple-soft-start)"}15, 
+                    ${index2 === 0 ? "var(--gradient-blue-soft-end)" : index2 === 1 ? "var(--gradient-emerald-end)" : "var(--gradient-purple-soft-end)"}10)`
+          }),
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
               {
-                className: `w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${isDarkMode ? item.bgDark : item.bgLight}`,
+                className: `w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${item.iconBg} ${item.iconColor}`,
                 children: item.icon
               }
             ),
@@ -471,15 +533,18 @@ const CompanyValues = ({ companyData, t, isDarkMode }) => {
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "h3",
                 {
-                  className: `text-lg font-bold mb-1 ${isDarkMode ? "text-white" : "text-gray-900"}`,
+                  className: `text-lg font-bold mb-1 ${item.textGradient}`,
                   children: item.title
                 }
               ),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "p",
                 {
-                  className: `leading-relaxed ${isDarkMode ? "text-gray-300" : "text-gray-600"} ${// Style khác nhau cho placeholder vs real content
+                  className: `leading-relaxed ${// Style khác nhau cho placeholder vs real content
                   item.text.includes("sẽ được cập nhật") ? "italic opacity-75" : ""}`,
+                  style: {
+                    color: isDarkMode ? "var(--text-secondary)" : "var(--text-secondary)"
+                  },
                   children: item.text
                 }
               )
@@ -493,12 +558,33 @@ const CompanyValues = ({ companyData, t, isDarkMode }) => {
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "div",
         {
-          className: `flex items-start space-x-4 rounded-lg p-4 border opacity-50 ${isDarkMode ? "border-gray-700 bg-gray-800" : "border-gray-300 bg-gray-100"}`,
+          className: "flex items-start space-x-4 rounded-lg p-4 border opacity-50",
+          style: {
+            backgroundColor: isDarkMode ? "var(--bg-secondary)" : "var(--bg-secondary)",
+            borderColor: isDarkMode ? "var(--border-primary)" : "var(--border-primary)"
+          },
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-10 h-10 rounded-lg flex items-center justify-center ${isDarkMode ? "bg-red-900/40 text-red-300" : "bg-red-100 text-red-600"}`, children: "❌" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                className: "w-10 h-10 rounded-lg flex items-center justify-center",
+                style: {
+                  backgroundColor: isDarkMode ? "#7f1d1d40" : "#fee2e2",
+                  color: isDarkMode ? "#fca5a5" : "#dc2626"
+                },
+                children: "❌"
+              }
+            ),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-lg font-bold mb-1 ${isDarkMode ? "text-white" : "text-gray-900"}`, children: "Lỗi hiển thị" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `${isDarkMode ? "text-gray-400" : "text-gray-600"}`, children: "Không thể hiển thị mục này do vấn đề dữ liệu." })
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "h3",
+                {
+                  className: "text-lg font-bold mb-1",
+                  style: { color: isDarkMode ? "var(--text-primary)" : "var(--text-primary)" },
+                  children: "Lỗi hiển thị"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { style: { color: isDarkMode ? "var(--text-secondary)" : "var(--text-secondary)" }, children: "Không thể hiển thị mục này do vấn đề dữ liệu." })
             ] })
           ]
         },
@@ -508,74 +594,17 @@ const CompanyValues = ({ companyData, t, isDarkMode }) => {
   }) });
 };
 const SectionWrapper = ({
-  variant,
-  isDarkMode,
+  variant = "softLight",
   className = "",
   children
 }) => {
-  const defaultVariant = "softLight";
-  const currentVariant = variant || defaultVariant;
-  const variants = {
-    blue: {
-      light: "bg-gradient-to-b from-white via-blue-100 to-white",
-      dark: "bg-gradient-to-b from-gray-950 via-blue-900 to-gray-950",
-      lightDecor1: "bg-blue-200/30",
-      lightDecor2: "bg-blue-300/30",
-      darkDecor1: "bg-blue-500/10",
-      darkDecor2: "bg-blue-600/10"
-    },
-    purple: {
-      light: "bg-gradient-to-b from-white via-purple-100 to-white",
-      dark: "bg-gradient-to-b from-gray-950 via-purple-900 to-gray-950",
-      lightDecor1: "bg-purple-200/30",
-      lightDecor2: "bg-pink-200/30",
-      darkDecor1: "bg-purple-500/10",
-      darkDecor2: "bg-pink-500/10"
-    },
-    green: {
-      light: "bg-gradient-to-b from-white via-emerald-100 to-white",
-      dark: "bg-gradient-to-b from-gray-950 via-emerald-900 to-gray-950",
-      lightDecor1: "bg-emerald-200/30",
-      lightDecor2: "bg-teal-200/30",
-      darkDecor1: "bg-emerald-500/10",
-      darkDecor2: "bg-teal-500/10"
-    },
-    neutral: {
-      light: "bg-gradient-to-b from-white via-gray-100 to-white",
-      dark: "bg-gradient-to-b from-gray-950 via-gray-800 to-gray-950",
-      lightDecor1: "bg-gray-200/30",
-      lightDecor2: "bg-gray-300/30",
-      darkDecor1: "bg-gray-600/10",
-      darkDecor2: "bg-gray-700/10"
-    },
-    softLight: {
-      light: "bg-gradient-to-b from-white via-blue-50 to-white",
-      dark: "bg-gradient-to-b from-gray-950 via-blue-950 to-gray-950",
-      lightDecor1: "bg-blue-100/25",
-      lightDecor2: "bg-purple-100/25",
-      darkDecor1: "bg-blue-500/10",
-      darkDecor2: "bg-purple-500/10"
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "section",
+    {
+      className: `section-wrapper section-wrapper--${variant} ${className}`,
+      children
     }
-  };
-  const current = variants[currentVariant] || variants[defaultVariant];
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: `relative py-32 ${isDarkMode ? current.dark : current.light} ${className}`, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute inset-0 overflow-hidden pointer-events-none", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "div",
-        {
-          className: `absolute top-10 left-1/4 w-72 h-72 ${isDarkMode ? current.darkDecor1 : current.lightDecor1} rounded-full blur-3xl animate-pulse`
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "div",
-        {
-          className: `absolute bottom-10 right-1/4 w-80 h-80 ${isDarkMode ? current.darkDecor2 : current.lightDecor2} rounded-full blur-3xl animate-pulse`,
-          style: { animationDelay: "2s" }
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative z-10", children })
-  ] });
+  );
 };
 const AboutCompanySection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
   var _a, _b;