nvis-fe-cms-libs 1.1.33 → 1.1.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -516,7 +516,7 @@ var __async = (__this, __arguments, generator) => {
516
516
  className = "",
517
517
  children
518
518
  }) => {
519
- const defaultVariant = "neutral";
519
+ const defaultVariant = "softLight";
520
520
  const currentVariant = variant || defaultVariant;
521
521
  const variants = {
522
522
  blue: {
@@ -4413,98 +4413,148 @@ var __async = (__this, __arguments, generator) => {
4413
4413
  ];
4414
4414
  const defaultImage = "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1200&h=800&fit=crop&q=80";
4415
4415
  if (!highlightData.length) {
4416
- 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: [
4416
+ 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: [
4417
4417
  /* @__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" }),
4418
4418
  /* @__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." })
4419
4419
  ] }) });
4420
4420
  }
4421
- return /* @__PURE__ */ jsxRuntimeExports.jsxs(
4422
- "div",
4423
- {
4424
- 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"}`,
4425
- children: [
4426
- /* @__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"}` }),
4427
- /* @__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"}` }),
4428
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10", children: [
4429
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative", children: highlightData.map((item, index2) => {
4430
- const color = gradientColors[index2 % gradientColors.length];
4431
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
4432
- "div",
4433
- {
4434
- className: `transition-opacity duration-700 ${activeTab === index2 ? "opacity-100" : "opacity-0 absolute inset-0 pointer-events-none"}`,
4435
- 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: [
4436
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative h-[280px] lg:h-full overflow-hidden group", children: [
4437
- /* @__PURE__ */ jsxRuntimeExports.jsx(
4438
- "img",
4439
- {
4440
- src: item.image || defaultImage,
4441
- alt: item.title,
4442
- className: "w-full h-full object-position transition-transform duration-700 group-hover:scale-110",
4443
- onError: (e) => {
4444
- e.target.src = defaultImage;
4445
- }
4446
- }
4447
- ),
4448
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 bg-gradient-to-br ${color} opacity-20` }),
4449
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" }),
4450
- /* @__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 }) })
4451
- ] }),
4452
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-5 lg:p-8 flex flex-col justify-center", children: [
4453
- /* @__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 }),
4454
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `${isDarkMode ? "text-gray-300" : "text-gray-600"} text-base leading-relaxed mb-5`, children: item.description }),
4455
- 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: [
4456
- /* @__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" }) }) }),
4457
- /* @__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 })
4458
- ] }, idx)) }),
4459
- 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(
4460
- "span",
4461
- {
4462
- 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"}`,
4463
- children: tag.key
4464
- },
4465
- idx
4466
- )) }) }),
4467
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
4468
- "button",
4469
- {
4470
- onClick: () => handleNavigate(item.slug),
4471
- 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`,
4472
- children: [
4473
- /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "relative z-10 flex items-center justify-center gap-2", children: [
4474
- t("highlight.cta") || "Khám phá",
4475
- " ",
4476
- item.title,
4477
- /* @__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" }) })
4478
- ] }),
4479
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-white/20 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left" })
4480
- ]
4481
- }
4482
- )
4483
- ] })
4484
- ] }) })
4485
- },
4486
- index2
4487
- );
4488
- }) }),
4489
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap justify-center gap-4 mt-12", children: highlightData.map((item, index2) => {
4490
- const color = gradientColors[index2 % gradientColors.length];
4491
- return /* @__PURE__ */ jsxRuntimeExports.jsxs(
4492
- "button",
4493
- {
4494
- onClick: () => setActiveTab(index2),
4495
- 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"}`,
4496
- children: [
4497
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "relative z-10", children: item.title }),
4498
- 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` })
4499
- ]
4500
- },
4501
- index2
4502
- );
4503
- }) })
4504
- ] })
4505
- ]
4506
- }
4507
- );
4421
+ 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: [
4422
+ /* @__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"}` }) }),
4423
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute inset-0 overflow-hidden pointer-events-none", children: [
4424
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
4425
+ "div",
4426
+ {
4427
+ 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"}`
4428
+ }
4429
+ ),
4430
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
4431
+ "div",
4432
+ {
4433
+ 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"}`
4434
+ }
4435
+ ),
4436
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
4437
+ "div",
4438
+ {
4439
+ 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"}`
4440
+ }
4441
+ )
4442
+ ] }),
4443
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-full px-4 sm:px-6 lg:px-8 py-16 sm:py-24", children: [
4444
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-full", children: highlightData.map((item, index2) => {
4445
+ const color = gradientColors[index2 % gradientColors.length];
4446
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(
4447
+ "div",
4448
+ {
4449
+ className: `transition-opacity duration-700 ${activeTab === index2 ? "opacity-100" : "opacity-0 absolute inset-0 pointer-events-none"}`,
4450
+ 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: [
4451
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative h-[280px] lg:h-full overflow-hidden group", children: [
4452
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
4453
+ "img",
4454
+ {
4455
+ src: item.image || defaultImage,
4456
+ alt: item.title,
4457
+ className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-110",
4458
+ onError: (e) => {
4459
+ e.target.src = defaultImage;
4460
+ }
4461
+ }
4462
+ ),
4463
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 bg-gradient-to-br ${color} opacity-20` }),
4464
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" }),
4465
+ /* @__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 }) })
4466
+ ] }),
4467
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-5 lg:p-8 flex flex-col justify-center", children: [
4468
+ /* @__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 }),
4469
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `${isDarkMode ? "text-gray-300" : "text-gray-600"} text-base leading-relaxed mb-5`, children: item.description }),
4470
+ 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: [
4471
+ /* @__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" }) }) }),
4472
+ /* @__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 })
4473
+ ] }, idx)) }),
4474
+ 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(
4475
+ "span",
4476
+ {
4477
+ 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"}`,
4478
+ children: tag.key
4479
+ },
4480
+ idx
4481
+ )) }) }),
4482
+ /* @__PURE__ */ jsxRuntimeExports.jsxs(
4483
+ "button",
4484
+ {
4485
+ onClick: () => handleNavigate(item.slug),
4486
+ 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`,
4487
+ children: [
4488
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "relative z-10 flex items-center justify-center gap-2", children: [
4489
+ t("highlight.cta") || "Khám phá",
4490
+ " ",
4491
+ item.title,
4492
+ /* @__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" }) })
4493
+ ] }),
4494
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-white/20 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left" })
4495
+ ]
4496
+ }
4497
+ )
4498
+ ] })
4499
+ ] }) })
4500
+ },
4501
+ index2
4502
+ );
4503
+ }) }),
4504
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap justify-center gap-4 mt-12", children: highlightData.map((item, index2) => {
4505
+ const color = gradientColors[index2 % gradientColors.length];
4506
+ return /* @__PURE__ */ jsxRuntimeExports.jsxs(
4507
+ "button",
4508
+ {
4509
+ onClick: () => setActiveTab(index2),
4510
+ 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"}`,
4511
+ children: [
4512
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "relative z-10", children: item.title }),
4513
+ 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` })
4514
+ ]
4515
+ },
4516
+ index2
4517
+ );
4518
+ }) })
4519
+ ] }),
4520
+ /* @__PURE__ */ jsxRuntimeExports.jsx("style", { jsx: true, children: `
4521
+ @keyframes blob {
4522
+ 0%, 100% {
4523
+ transform: translate(0px, 0px) scale(1);
4524
+ }
4525
+ 33% {
4526
+ transform: translate(30px, -50px) scale(1.1);
4527
+ }
4528
+ 66% {
4529
+ transform: translate(-20px, 20px) scale(0.9);
4530
+ }
4531
+ }
4532
+
4533
+ .animate-blob {
4534
+ animation: blob 7s ease-in-out infinite;
4535
+ }
4536
+
4537
+ .animation-delay-2000 {
4538
+ animation-delay: 2s;
4539
+ }
4540
+
4541
+ .animation-delay-4000 {
4542
+ animation-delay: 4s;
4543
+ }
4544
+
4545
+ .bg-grid-white {
4546
+ background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
4547
+ linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
4548
+ background-size: 50px 50px;
4549
+ }
4550
+
4551
+ .bg-grid-slate {
4552
+ background-image: linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
4553
+ linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
4554
+ background-size: 50px 50px;
4555
+ }
4556
+ ` })
4557
+ ] });
4508
4558
  };
4509
4559
  const PageChildrenSelectSection = ({ data, isDarkMode, t, section, imageBaseUrl = "" }) => {
4510
4560
  var _a;