nvis-fe-cms-libs 1.1.26 → 1.1.28

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

@@ -700,7 +700,45 @@ var __async = (__this, __arguments, generator) => {
       ] }) });
     }
     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.jsx("div", { className: "text-center mb-12", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent", children: sectionTitle }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center mb-12", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: `relative inline-block px-4 py-2 rounded-full text-lg 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: [
+            "📈 ",
+            sectionTitle,
+            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("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(
@@ -1025,11 +1063,12 @@ var __async = (__this, __arguments, generator) => {
       }
     );
   };
-  const MilestoneSection = ({ data, t, isDarkMode, getMilestoneTimeline }) => {
+  const MilestoneSection = ({ data, t, isDarkMode, getMilestoneTimeline, section }) => {
     const [milestones, setMilestones] = require$$0.useState([]);
     const [loading, setLoading] = require$$0.useState(true);
     const [timelineVisible, setTimelineVisible] = require$$0.useState([]);
     const timelineRefs = require$$0.useRef([]);
+    const sectionTitle = (section == null ? void 0 : section.title) || "...";
     require$$0.useEffect(() => {
       const fetchMilestones = () => __async(null, null, function* () {
         var _a, _b;
@@ -1116,28 +1155,16 @@ var __async = (__this, __arguments, generator) => {
       {
         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.jsx("div", { className: "text-center mb-12", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
+            {
+              className: `relative inline-block px-4 py-2 rounded-full text-lg 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: [
+                "📈 ",
+                sectionTitle
+              ]
+            }
+          ) }),
           /* @__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(
@@ -1186,9 +1213,10 @@ var __async = (__this, __arguments, generator) => {
       }
     );
   };
-  const TestimonialsSection = ({ data, t, isDarkMode }) => {
+  const TestimonialsSection = ({ data, t, isDarkMode, section }) => {
     var _a;
     const [currentIndex, setCurrentIndex] = require$$0.useState(0);
+    const sectionTitle = (section == null ? void 0 : section.title) || "...";
     const testimonials = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.filter((item) => item == null ? void 0 : item.data).map((item) => {
       var _a2, _b, _c, _d;
       return {
@@ -1235,20 +1263,10 @@ var __async = (__this, __arguments, generator) => {
           /* @__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"}`,
+              className: `inline-block px-4 py-2 rounded-full text-lg 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") })
+                sectionTitle
               ]
             }
           ),
@@ -2675,22 +2693,16 @@ var __async = (__this, __arguments, generator) => {
       ] })
     ] }) }) });
   };
-  const ContactInfoSection = ({ data, t, isDarkMode }) => {
+  const ContactInfoSection = ({ data, t, isDarkMode, section }) => {
     var _a, _b;
     const contactData = ((_b = (_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.filter((item) => item == null ? void 0 : item.data)) == null ? void 0 : _b.map((item) => item.data)) || [];
+    const sectionTitle = (section == null ? void 0 : section.title) || "...";
     if (!contactData.length) return null;
     return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: `py-16 ${isDarkMode ? "bg-gray-900" : "bg-slate-50"}`, 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-flex items-center px-4 py-2 rounded-full text-sm font-semibold mb-4 ${isDarkMode ? "bg-indigo-900/50 text-indigo-300" : "bg-indigo-50 text-indigo-700"}`, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(User, { size: 16, className: "mr-2" }),
-          t("contact.team.badge") || "Đội ngũ hỗ trợ"
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("h2", { className: `text-3xl lg:text-4xl font-bold mb-4 ${isDarkMode ? "text-white" : "text-slate-800"}`, children: [
-          t("contact.team.title") || "Liên hệ với đội ngũ",
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent", children: t("contact.team.subtitle") || "chuyên nghiệp của chúng tôi" })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-lg max-w-3xl mx-auto ${isDarkMode ? "text-gray-300" : "text-slate-600"}`, children: t("contact.team.description") || "Chúng tôi luôn sẵn sàng hỗ trợ bạn với đội ngũ chuyên nghiệp và giàu kinh nghiệm" })
-      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center mb-12", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `inline-flex items-center px-4 py-2 rounded-full text-lg font-semibold mb-4 ${isDarkMode ? "bg-indigo-900/50 text-indigo-300" : "bg-indigo-50 text-indigo-700"}`, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(User, { size: 22, className: "mr-2" }),
+        sectionTitle
+      ] }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid md:grid-cols-2 lg:grid-cols-3 gap-8", children: contactData.map((contact, index2) => {
         var _a2;
         return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -2748,10 +2760,11 @@ var __async = (__this, __arguments, generator) => {
       }) })
     ] }) });
   };
-  const ContactListAutoSection = ({ data, t, isDarkMode, getContactList }) => {
+  const ContactListAutoSection = ({ data, t, isDarkMode, getContactList, section }) => {
     const [contacts, setContacts] = require$$0.useState([]);
     const [loading, setLoading] = require$$0.useState(true);
     const [error, setError] = require$$0.useState(null);
+    const sectionTitle = (section == null ? void 0 : section.title) || "...";
     require$$0.useEffect(() => {
       loadContacts();
     }, []);
@@ -2794,10 +2807,7 @@ var __async = (__this, __arguments, generator) => {
       ] });
     }
     return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: `py-20 ${isDarkMode ? "bg-gray-900" : "bg-gray-50"} transition-colors duration-300`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-6xl mx-auto px-5", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-16", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: `text-4xl font-bold ${isDarkMode ? "text-white" : "text-gray-900"} mb-4`, children: t("contactList.header.title") || "Thông Tin Liên Hệ" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-lg ${isDarkMode ? "text-gray-400" : "text-gray-600"} max-w-2xl mx-auto`, children: t("contactList.header.description") || "Đội ngũ chuyên nghiệp của chúng tôi luôn sẵn sàng hỗ trợ bạn" })
-      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center mb-16", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: `text-4xl font-bold ${isDarkMode ? "text-white" : "text-gray-900"} mb-4`, children: sectionTitle }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-10", children: contacts.map((contact, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(ContactCard, { contact, t, isDarkMode }, contact.id || index2)) })
     ] }) });
   };
@@ -2859,9 +2869,10 @@ var __async = (__this, __arguments, generator) => {
     }
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "-mx-2 px-2", children: content });
   };
-  const CustomerFeedbackAutoSection = ({ data, t, isDarkMode, loadCustomerFeedback }) => {
+  const CustomerFeedbackAutoSection = ({ data, t, isDarkMode, loadCustomerFeedback, section }) => {
     const [feedbacks, setFeedbacks] = require$$0.useState([]);
     const [currentIndex, setCurrentIndex] = require$$0.useState(0);
+    const sectionTitle = (section == null ? void 0 : section.title) || "...";
     require$$0.useEffect(() => {
       const fetchData = () => __async(null, null, function* () {
         const res = yield loadCustomerFeedback();
@@ -2944,20 +2955,10 @@ var __async = (__this, __arguments, generator) => {
             /* @__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"}`,
+                className: `inline-block px-4 py-2 rounded-full text-lg font-semibold mb-4 ${isDarkMode ? "bg-indigo-900/50 text-indigo-300 border border-indigo-800" : "bg-indigo-100 text-indigo-800"}`,
                 children: [
                   "💬 ",
-                  t("customerFeedback.badge") || "Phản hồi khách hàng"
-                ]
-              }
-            ),
-            /* @__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("customerFeedback.titlelanding") || "Khách hàng nói gì",
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent", children: t("customerFeedback.subtitle") || "về chúng tôi" })
+                  sectionTitle
                 ]
               }
             ),
@@ -3408,39 +3409,40 @@ var __async = (__this, __arguments, generator) => {
     )) }) });
   };
   const TextWithTitleSection = ({ section, data, isDarkMode }) => {
+    var _a;
     const textItems = (data == null ? void 0 : data.sectionDataBindingItems) || [];
+    const title = ((_a = textItems[0]) == null ? void 0 : _a.value) || "";
+    const descriptions = textItems.slice(1);
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
       padding: "40px 20px",
-      backgroundColor: isDarkMode ? "#1f2937" : "#f8f9fa",
-      textAlign: "center"
-    }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { maxWidth: "800px", margin: "0 auto" }, children: textItems.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        style: {
-          backgroundColor: isDarkMode ? "#374151" : "white",
-          padding: "30px 20px",
-          marginBottom: "20px",
-          borderRadius: "8px",
-          boxShadow: isDarkMode ? "0 2px 4px rgba(0,0,0,0.3)" : "0 2px 4px rgba(0,0,0,0.1)"
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { style: {
-            fontSize: "24px",
-            fontWeight: "bold",
-            color: isDarkMode ? "#f9fafb" : "#1f2937",
-            marginBottom: "16px",
-            lineHeight: "1.3"
-          }, children: item.title }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
+      backgroundColor: isDarkMode ? "#111827" : "#ffffff"
+    }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { maxWidth: "1200px", margin: "0 auto" }, children: [
+      title && /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { style: {
+        fontSize: "36px",
+        fontWeight: "700",
+        color: isDarkMode ? "#ffffff" : "#000000",
+        marginBottom: "16px",
+        lineHeight: "1.2",
+        textAlign: "left",
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+      }, children: title }),
+      descriptions.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          style: {
             fontSize: "16px",
             lineHeight: "1.6",
-            color: isDarkMode ? "#d1d5db" : "#4b5563",
-            textAlign: "left"
-          }, children: item.value })
-        ]
-      },
-      item.id || index2
-    )) }) });
+            color: isDarkMode ? "#9ca3af" : "#6b7280",
+            textAlign: "left",
+            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+            fontWeight: "400",
+            marginBottom: index2 < descriptions.length - 1 ? "16px" : "0"
+          },
+          children: item.value
+        },
+        item.id || index2
+      ))
+    ] }) });
   };
   const TextSection = ({ data, isDarkMode }) => {
     const textItems = (data == null ? void 0 : data.sectionDataBindingItems) || [];
@@ -3449,25 +3451,20 @@ var __async = (__this, __arguments, generator) => {
       {
         style: {
           padding: "40px 20px",
-          backgroundColor: isDarkMode ? "#1f2937" : "#f8f9fa",
-          // Dark: slate-800, Light: gray-100
-          textAlign: "center"
+          backgroundColor: isDarkMode ? "#111827" : "#ffffff"
         },
         children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { maxWidth: "800px", margin: "0 auto" }, children: textItems.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
             style: {
-              backgroundColor: isDarkMode ? "#374151" : "white",
-              // Dark: slate-700, Light: white
-              padding: "20px",
+              padding: "0",
               marginBottom: "20px",
-              borderRadius: "8px",
-              boxShadow: isDarkMode ? "0 2px 4px rgba(0,0,0,0.3)" : "0 2px 4px rgba(0,0,0,0.1)",
-              fontSize: "16px",
-              lineHeight: "1.6",
-              color: isDarkMode ? "#d1d5db" : "#333",
-              // Dark: gray-300, Light: dark gray
-              textAlign: "left"
+              fontSize: "28px",
+              fontWeight: "700",
+              lineHeight: "1.3",
+              color: isDarkMode ? "#f9fafb" : "#111827",
+              textAlign: "left",
+              fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
             },
             children: item.value
           },