nvis-fe-cms-libs 1.1.33 → 1.1.35

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

@@ -513,7 +513,7 @@ const SectionWrapper = ({
   className = "",
   children
 }) => {
-  const defaultVariant = "neutral";
+  const defaultVariant = "softLight";
   const currentVariant = variant || defaultVariant;
   const variants = {
     blue: {
@@ -4410,98 +4410,148 @@ const PageHighlightSection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
   ];
   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: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: `py-20 ${isDarkMode ? "bg-slate-950" : "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-8 md:py-12 lg:py-16 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: "w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 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 grid-cols-1 lg:grid-cols-2 gap-0 min-h-[420px] lg:h-auto", 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("h1", { 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-base 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
-            );
-          }) })
-        ] })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: `relative overflow-hidden ${isDarkMode ? "bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950" : "bg-gradient-to-br from-white via-blue-50/30 to-purple-50/30"}`, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 overflow-hidden pointer-events-none opacity-30", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute top-0 left-0 w-full h-full ${isDarkMode ? "bg-grid-white" : "bg-grid-slate"}` }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute inset-0 overflow-hidden pointer-events-none", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: `absolute top-20 right-10 w-96 h-96 rounded-full blur-3xl opacity-20 animate-blob ${isDarkMode ? "bg-blue-500" : "bg-blue-400"}`
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: `absolute top-40 -left-20 w-96 h-96 rounded-full blur-3xl opacity-20 animate-blob animation-delay-2000 ${isDarkMode ? "bg-purple-500" : "bg-purple-400"}`
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: `absolute -bottom-20 right-40 w-96 h-96 rounded-full blur-3xl opacity-20 animate-blob animation-delay-4000 ${isDarkMode ? "bg-pink-500" : "bg-pink-400"}`
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-full px-4 sm:px-6 lg:px-8 py-16 sm:py-24", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-full", 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-slate-900/30 to-slate-950/30 border-slate-700/20" : "bg-white/40 border-white/30"} backdrop-blur-md rounded-3xl shadow-lg overflow-hidden border transition-colors duration-500`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-0 min-h-[420px] lg:h-auto", 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-cover 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("h1", { 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-base 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("style", { jsx: true, children: `
+        @keyframes blob {
+          0%, 100% {
+            transform: translate(0px, 0px) scale(1);
+          }
+          33% {
+            transform: translate(30px, -50px) scale(1.1);
+          }
+          66% {
+            transform: translate(-20px, 20px) scale(0.9);
+          }
+        }
+
+        .animate-blob {
+          animation: blob 7s ease-in-out infinite;
+        }
+
+        .animation-delay-2000 {
+          animation-delay: 2s;
+        }
+
+        .animation-delay-4000 {
+          animation-delay: 4s;
+        }
+
+        .bg-grid-white {
+          background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+                            linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+          background-size: 50px 50px;
+        }
+
+        .bg-grid-slate {
+          background-image: linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
+                            linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
+          background-size: 50px 50px;
+        }
+      ` })
+  ] });
 };
 const PageChildrenSelectSection = ({ data, isDarkMode, t, section, imageBaseUrl = "" }) => {
   var _a;
@@ -4514,9 +4564,6 @@ const PageChildrenSelectSection = ({ data, isDarkMode, t, section, imageBaseUrl
   if (!pages || pages.length === 0) {
     return null;
   }
-  const handleNavigate = (slug) => {
-    window.location.href = slug;
-  };
   const handleLoadMore = () => {
     setVisibleCount((prev) => prev + 8);
   };
@@ -4555,9 +4602,9 @@ const PageChildrenSelectSection = ({ data, isDarkMode, t, section, imageBaseUrl
     }, children: visiblePages.map((page) => {
       const iconUrl = getImageUrl(page.icon);
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "div",
+        "a",
         {
-          onClick: () => handleNavigate(page.slug),
+          href: page.slug,
           style: {
             backgroundColor: isDarkMode ? "#1f2937" : "#ffffff",
             borderRadius: "12px",
@@ -4570,7 +4617,8 @@ const PageChildrenSelectSection = ({ data, isDarkMode, t, section, imageBaseUrl
             flexDirection: "column",
             alignItems: "center",
             textAlign: "center",
-            gap: "16px"
+            gap: "16px",
+            textDecoration: "none"
           },
           onMouseEnter: (e) => {
             e.currentTarget.style.transform = "translateY(-8px)";
@@ -4659,9 +4707,6 @@ const PageChildrenSelectSection1 = ({ data, isDarkMode, t, section, imageBaseUrl
   if (!pages || pages.length === 0) {
     return null;
   }
-  const handleNavigate = (slug) => {
-    window.location.href = slug;
-  };
   const handleLoadMore = () => {
     setVisibleCount((prev) => prev + 5);
   };
@@ -4691,9 +4736,9 @@ const PageChildrenSelectSection1 = ({ data, isDarkMode, t, section, imageBaseUrl
       const mainImage = ((_b = (_a2 = page.pageImages) == null ? void 0 : _a2.find((img) => img.isMain)) == null ? void 0 : _b.url) || page.icon;
       const imageUrl = getImageUrl(mainImage);
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "div",
+        "a",
         {
-          onClick: () => handleNavigate(page.slug),
+          href: page.slug,
           style: {
             display: "flex",
             gap: "20px",
@@ -4703,7 +4748,8 @@ const PageChildrenSelectSection1 = ({ data, isDarkMode, t, section, imageBaseUrl
             cursor: "pointer",
             transition: "all 0.2s",
             border: `1px solid ${isDarkMode ? "#374151" : "#e5e7eb"}`,
-            padding: "16px"
+            padding: "16px",
+            textDecoration: "none"
           },
           onMouseEnter: (e) => {
             e.currentTarget.style.backgroundColor = isDarkMode ? "#374151" : "#f9fafb";
@@ -4820,9 +4866,6 @@ const PageChildrenSelectSection2 = ({ data, isDarkMode, t, section, imageBaseUrl
   if (!pages || pages.length === 0) {
     return null;
   }
-  const handleNavigate = (slug) => {
-    window.location.href = slug;
-  };
   const getImageUrl = (url) => {
     if (!url) return "";
     if (url.startsWith("http://") || url.startsWith("https://")) return url;
@@ -4853,9 +4896,9 @@ const PageChildrenSelectSection2 = ({ data, isDarkMode, t, section, imageBaseUrl
       const mainImage = ((_b = (_a2 = page.pageImages) == null ? void 0 : _a2.find((img) => img.isMain)) == null ? void 0 : _b.url) || page.icon;
       const imageUrl = getImageUrl(mainImage);
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "div",
+        "a",
         {
-          onClick: () => handleNavigate(page.slug),
+          href: page.slug,
           style: {
             backgroundColor: isDarkMode ? "#1e293b" : "#ffffff",
             borderRadius: "16px",
@@ -4863,7 +4906,9 @@ const PageChildrenSelectSection2 = ({ data, isDarkMode, t, section, imageBaseUrl
             cursor: "pointer",
             transition: "all 0.3s",
             boxShadow: isDarkMode ? "0 4px 6px -1px rgba(0, 0, 0, 0.5)" : "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
-            border: `1px solid ${isDarkMode ? "#334155" : "#e2e8f0"}`
+            border: `1px solid ${isDarkMode ? "#334155" : "#e2e8f0"}`,
+            textDecoration: "none",
+            display: "block"
           },
           onMouseEnter: (e) => {
             e.currentTarget.style.transform = "translateY(-8px)";