nvis-fe-cms-libs 1.1.42 → 2.0.1

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.
Files changed (5) hide show
  1. package/dist/nvis-fe-cms-libs.es.js +1381 -1480
  2. package/dist/nvis-fe-cms-libs.es.js.map +1 -1
  3. package/dist/nvis-fe-cms-libs.umd.js +1381 -1480
  4. package/dist/nvis-fe-cms-libs.umd.js.map +1 -1
  5. package/package.json +1 -1
package/dist/nvis-fe-cms-libs.es.js CHANGED
@@ -379,8 +379,7 @@ const CompanyValues = ({ companyData, t, isDarkMode }) => {
379
379
  tempDiv.innerHTML = html;
380
380
  let cleanText = tempDiv.textContent || tempDiv.innerText || "";
381
381
  return cleanText.replace(/&nbsp;/g, " ").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/\s+/g, " ").trim();
382
- } catch (error) {
383
- console.error("Error cleaning HTML content:", error);
382
+ } catch (e) {
384
383
  return String(html || "").replace(/<[^>]*>/g, "").replace(/\s+/g, " ").trim();
385
384
  }
386
385
  };
@@ -392,41 +391,28 @@ const CompanyValues = ({ companyData, t, isDarkMode }) => {
392
391
  const items = [
393
392
  {
394
393
  icon: "💡",
395
- gradient: "bg-gradient-blue-soft",
396
- textGradient: "text-gradient-blue-soft",
397
- iconBg: isDarkMode ? "bg-blue-900/40" : "bg-blue-100",
398
- iconColor: isDarkMode ? "text-blue-300" : "text-blue-600",
399
394
  title: t("about.companyValues.vision") || "Tầm nhìn",
400
- 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."
395
+ 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.",
396
+ bgClass: "bg-gradient-brand"
401
397
  },
402
398
  {
403
399
  icon: "🚀",
404
- gradient: "bg-gradient-emerald-teal",
405
- textGradient: "text-gradient-emerald-teal",
406
- iconBg: isDarkMode ? "bg-emerald-900/40" : "bg-emerald-100",
407
- iconColor: isDarkMode ? "text-emerald-300" : "text-emerald-600",
408
400
  title: t("about.companyValues.mission") || "Sứ mệnh",
409
- 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."
401
+ 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.",
402
+ bgClass: "bg-gradient-accent"
410
403
  },
411
404
  {
412
405
  icon: "💎",
413
- gradient: "bg-gradient-purple-soft",
414
- textGradient: "text-gradient-purple-soft",
415
- iconBg: isDarkMode ? "bg-purple-900/40" : "bg-purple-100",
416
- iconColor: isDarkMode ? "text-purple-300" : "text-purple-600",
417
406
  title: t("about.companyValues.coreValues") || "Giá trị cốt lõi",
418
- 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."
407
+ 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.",
408
+ bgClass: "bg-gradient-brand"
419
409
  }
420
410
  ];
421
- const validItems = items.filter((item) => {
422
- const originalText = item === items[0] ? safeCompanyData.vision : item === items[1] ? safeCompanyData.mission : safeCompanyData.coreValues;
423
- return originalText || true;
424
- });
425
411
  const refs = useRef([]);
426
412
  const [visible, setVisible] = useState([]);
427
413
  useEffect(() => {
428
- setVisible(new Array(validItems.length).fill(false));
429
- if (validItems.length === 0) return;
414
+ setVisible(new Array(items.length).fill(false));
415
+ if (items.length === 0) return;
430
416
  const observer = new IntersectionObserver(
431
417
  (entries) => {
432
418
  entries.forEach((entry) => {
@@ -446,152 +432,43 @@ const CompanyValues = ({ companyData, t, isDarkMode }) => {
446
432
  { threshold: 0.2 }
447
433
  );
448
434
  refs.current.forEach((el) => el && observer.observe(el));
449
- return () => {
450
- refs.current.forEach((el) => el && observer.unobserve(el));
451
- };
452
- }, [validItems.length]);
453
- if (!companyData || validItems.length === 0) {
454
- return /* @__PURE__ */ jsxRuntimeExports.jsxs(
455
- "div",
456
- {
457
- className: "text-center py-8 px-4 rounded-lg border",
458
- style: {
459
- backgroundColor: isDarkMode ? "var(--bg-secondary)" : "var(--bg-secondary)",
460
- borderColor: isDarkMode ? "var(--border-primary)" : "var(--border-primary)"
461
- },
462
- children: [
463
- /* @__PURE__ */ jsxRuntimeExports.jsx(
464
- "div",
465
- {
466
- className: "w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center",
467
- style: {
468
- backgroundColor: isDarkMode ? "var(--bg-tertiary)" : "var(--bg-tertiary)"
469
- },
470
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
471
- "svg",
472
- {
473
- className: "w-8 h-8",
474
- style: { color: isDarkMode ? "var(--text-tertiary)" : "var(--text-tertiary)" },
475
- fill: "none",
476
- stroke: "currentColor",
477
- viewBox: "0 0 24 24",
478
- 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" })
479
- }
480
- )
481
- }
482
- ),
483
- /* @__PURE__ */ jsxRuntimeExports.jsx(
484
- "h3",
485
- {
486
- className: "text-lg font-semibold mb-2",
487
- style: { color: isDarkMode ? "var(--text-primary)" : "var(--text-primary)" },
488
- children: "Thông tin công ty"
489
- }
490
- ),
435
+ return () => refs.current.forEach((el) => el && observer.unobserve(el));
436
+ }, [items.length]);
437
+ if (!companyData) {
438
+ return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "card text-center", children: [
439
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-12 h-12 mx-auto mb-4 flex items-center justify-center rounded-full bg-gradient-brand text-white text-2xl", children: "🏢" }),
440
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "card-title text-lg mb-2", children: "Thông tin công ty" }),
441
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "card-text", children: "Tầm nhìn, sứ mệnh và giá trị cốt lõi sẽ được cập nhật sớm." })
442
+ ] });
443
+ }
444
+ return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-6", children: items.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
445
+ "div",
446
+ {
447
+ ref: (el) => refs.current[index2] = el,
448
+ className: `card transition-all duration-700 ease-out transform ${visible[index2] ? "opacity-100 scale-100" : "opacity-0 scale-75"}`,
449
+ style: { transitionDelay: `${index2 * 200}ms` },
450
+ children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start space-x-4", children: [
451
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
452
+ "div",
453
+ {
454
+ className: `w-10 h-10 rounded-lg flex items-center justify-center text-white text-xl flex-shrink-0 ${item.bgClass}`,
455
+ children: item.icon
456
+ }
457
+ ),
458
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
459
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "card-title text-lg mb-1", children: item.title }),
491
460
  /* @__PURE__ */ jsxRuntimeExports.jsx(
492
461
  "p",
493
462
  {
494
- className: "text-sm",
495
- style: { color: isDarkMode ? "var(--text-secondary)" : "var(--text-secondary)" },
496
- children: "Tầm nhìn, sứ mệnh và giá trị cốt lõi sẽ được cập nhật sớm."
463
+ className: `card-text leading-relaxed ${item.text.includes("sẽ được cập nhật") ? "italic opacity-75" : ""}`,
464
+ children: item.text
497
465
  }
498
466
  )
499
- ]
500
- }
501
- );
502
- }
503
- return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-6", children: validItems.map((item, index2) => {
504
- try {
505
- return /* @__PURE__ */ jsxRuntimeExports.jsxs(
506
- "div",
507
- {
508
- ref: (el) => refs.current[index2] = el,
509
- className: `
510
- flex items-start space-x-4 rounded-2xl p-6
511
- transform transition-all duration-700 ease-out
512
- border backdrop-blur-sm
513
- ${visible[index2] ? "opacity-100 scale-100" : "opacity-0 scale-75"}
514
- `,
515
- style: __spreadValues({
516
- transitionDelay: `${index2 * 200}ms`,
517
- borderColor: isDarkMode ? "var(--border-primary)" : "var(--border-primary)",
518
- backgroundColor: isDarkMode ? "var(--bg-secondary)" : "transparent"
519
- }, isDarkMode && {
520
- backgroundImage: `linear-gradient(to bottom right,
521
- ${index2 === 0 ? "var(--gradient-blue-soft-start)" : index2 === 1 ? "var(--gradient-emerald-start)" : "var(--gradient-purple-soft-start)"}15,
522
- ${index2 === 0 ? "var(--gradient-blue-soft-end)" : index2 === 1 ? "var(--gradient-emerald-end)" : "var(--gradient-purple-soft-end)"}10)`
523
- }),
524
- children: [
525
- /* @__PURE__ */ jsxRuntimeExports.jsx(
526
- "div",
527
- {
528
- className: `w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${item.iconBg} ${item.iconColor}`,
529
- children: item.icon
530
- }
531
- ),
532
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
533
- /* @__PURE__ */ jsxRuntimeExports.jsx(
534
- "h3",
535
- {
536
- className: `text-lg font-bold mb-1 ${item.textGradient}`,
537
- children: item.title
538
- }
539
- ),
540
- /* @__PURE__ */ jsxRuntimeExports.jsx(
541
- "p",
542
- {
543
- className: `leading-relaxed ${// Style khác nhau cho placeholder vs real content
544
- item.text.includes("sẽ được cập nhật") ? "italic opacity-75" : ""}`,
545
- style: {
546
- color: isDarkMode ? "var(--text-secondary)" : "var(--text-secondary)"
547
- },
548
- children: item.text
549
- }
550
- )
551
- ] })
552
- ]
553
- },
554
- index2
555
- );
556
- } catch (error) {
557
- console.error("Error rendering company value item:", item, error);
558
- return /* @__PURE__ */ jsxRuntimeExports.jsxs(
559
- "div",
560
- {
561
- className: "flex items-start space-x-4 rounded-lg p-4 border opacity-50",
562
- style: {
563
- backgroundColor: isDarkMode ? "var(--bg-secondary)" : "var(--bg-secondary)",
564
- borderColor: isDarkMode ? "var(--border-primary)" : "var(--border-primary)"
565
- },
566
- children: [
567
- /* @__PURE__ */ jsxRuntimeExports.jsx(
568
- "div",
569
- {
570
- className: "w-10 h-10 rounded-lg flex items-center justify-center",
571
- style: {
572
- backgroundColor: isDarkMode ? "#7f1d1d40" : "#fee2e2",
573
- color: isDarkMode ? "#fca5a5" : "#dc2626"
574
- },
575
- children: "❌"
576
- }
577
- ),
578
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
579
- /* @__PURE__ */ jsxRuntimeExports.jsx(
580
- "h3",
581
- {
582
- className: "text-lg font-bold mb-1",
583
- style: { color: isDarkMode ? "var(--text-primary)" : "var(--text-primary)" },
584
- children: "Lỗi hiển thị"
585
- }
586
- ),
587
- /* @__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." })
588
- ] })
589
- ]
590
- },
591
- `error-${index2}`
592
- );
593
- }
594
- }) });
467
+ ] })
468
+ ] })
469
+ },
470
+ index2
471
+ )) });
595
472
  };
596
473
  const SectionWrapper = ({
597
474
  variant = "softLight",
@@ -630,153 +507,110 @@ const AboutCompanySection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
630
507
  };
631
508
  const logoUrl = getLogoUrl(logo);
632
509
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
633
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
634
- "section",
635
- {
636
- className: `relative min-h-[80vh] flex items-center justify-center overflow-hidden pt-8 transition-colors duration-300`,
637
- children: [
638
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute inset-0", children: [
639
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900" : "bg-gradient-to-br from-blue-600 via-indigo-600 to-purple-600"}` }),
640
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute inset-0", children: [
641
- /* @__PURE__ */ jsxRuntimeExports.jsx(
642
- "div",
643
- {
644
- className: "shape shape-1 absolute w-12 h-12 bg-white/5 rounded-full -top-6 -left-6",
645
- style: { left: "10%", top: "20%" }
646
- }
647
- ),
648
- /* @__PURE__ */ jsxRuntimeExports.jsx(
649
- "div",
650
- {
651
- className: "shape shape-3 absolute w-10 h-10 bg-white/5 rounded-full -bottom-4 -right-4",
652
- style: { right: "30%", bottom: "10%" }
653
- }
654
- ),
655
- /* @__PURE__ */ jsxRuntimeExports.jsx(
656
- "div",
657
- {
658
- className: "shape shape-4 absolute w-14 h-14 bg-white/5 rounded-md -bottom-6 -left-6",
659
- style: { left: "20%", bottom: "30%" }
660
- }
661
- )
662
- ] }),
663
- /* @__PURE__ */ jsxRuntimeExports.jsx(
664
- "div",
665
- {
666
- 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'
667
- }
668
- )
669
- ] }),
670
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative z-10 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
671
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
672
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-20 h-20 mx-auto rounded-full bg-gradient-to-r from-blue-500 to-purple-600 p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
673
- "div",
674
- {
675
- className: `w-full h-full rounded-full flex items-center justify-center overflow-hidden ${isDarkMode ? "bg-gray-900" : "bg-white"}`,
676
- children: logoUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx(
677
- "img",
678
- {
679
- src: logoUrl,
680
- alt: name || shortName,
681
- className: "w-full h-full object-cover rounded-full",
682
- onError: (e) => {
683
- e.target.style.display = "none";
684
- const fallbackDiv = document.createElement("div");
685
- fallbackDiv.className = "text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent";
686
- fallbackDiv.textContent = shortName;
687
- e.target.parentElement.appendChild(fallbackDiv);
688
- }
689
- }
690
- ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent", children: shortName })
691
- }
692
- ) }),
693
- /* @__PURE__ */ jsxRuntimeExports.jsx(
694
- "h1",
695
- {
696
- className: `text-5xl lg:text-6xl font-extrabold tracking-tight mb-4 ${isDarkMode ? "text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-indigo-300 to-purple-400 drop-shadow-[0_2px_8px_rgba(0,0,0,0.6)]" : "text-transparent bg-clip-text bg-gradient-to-r from-blue-100 via-indigo-50 to-purple-100 drop-shadow-[0_2px_6px_rgba(0,0,0,0.4)]"}`,
697
- children: name
698
- }
699
- )
700
- ] }),
701
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-4xl mx-auto", children: [
702
- /* @__PURE__ */ jsxRuntimeExports.jsx(
703
- "div",
704
- {
705
- dangerouslySetInnerHTML: { __html: shortDescription },
706
- className: `prose max-w-none mb-8 leading-relaxed transition-colors ${isDarkMode ? "prose-invert text-gray-200" : "text-gray-100"} text-lg sm:text-xl md:text-2xl font-light tracking-wide`
707
- }
708
- ),
709
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
710
- "div",
711
- {
712
- className: `inline-flex items-center px-4 py-2 rounded-full border text-sm font-medium ${isDarkMode ? "bg-gray-800/70 border-gray-600 text-gray-300" : "bg-white/20 border-white/40 text-white"}`,
713
- children: [
714
- "🚀 ",
715
- safeT("aboutCompany.hero.establishedYear", { year: establishedYear }),
716
- " - ",
717
- safeT("aboutCompany.hero.experience", { years: experienceYears })
718
- ]
719
- }
720
- )
721
- ] })
722
- ] }) })
723
- ]
724
- }
725
- ),
726
- /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid lg:grid-cols-2 gap-12 items-center", children: [
727
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
728
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
510
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "relative min-h-[80vh] flex items-center justify-center overflow-hidden pt-8 bg-gradient-brand", children: [
511
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute inset-0", children: [
512
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute inset-0", children: [
513
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
514
+ "div",
515
+ {
516
+ className: "shape shape-1 absolute w-12 h-12 bg-white/5 rounded-full -top-6 -left-6",
517
+ style: { left: "10%", top: "20%" }
518
+ }
519
+ ),
520
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
521
+ "div",
522
+ {
523
+ className: "shape shape-3 absolute w-10 h-10 bg-white/5 rounded-full -bottom-4 -right-4",
524
+ style: { right: "30%", bottom: "10%" }
525
+ }
526
+ ),
527
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
528
+ "div",
529
+ {
530
+ className: "shape shape-4 absolute w-14 h-14 bg-white/5 rounded-md -bottom-6 -left-6",
531
+ style: { left: "20%", bottom: "30%" }
532
+ }
533
+ )
534
+ ] }),
535
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
729
536
  "div",
730
537
  {
731
- className: `inline-block px-4 py-2 rounded-full text-sm font-semibold mb-4 ${isDarkMode ? "bg-blue-900/40 text-blue-300 border border-blue-700" : "bg-blue-100 text-blue-800"}`,
732
- children: [
733
- "📖 ",
734
- safeT("aboutCompany.story.badge")
735
- ]
736
- }
737
- ),
738
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
739
- "h2",
740
- {
741
- className: `text-3xl lg:text-4xl font-bold mb-6 ${isDarkMode ? "text-white" : "text-gray-800"}`,
742
- children: [
743
- safeT("aboutCompany.story.title"),
744
- " ",
745
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent", children: shortName })
746
- ]
538
+ 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'
747
539
  }
748
- ),
540
+ )
541
+ ] }),
542
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative z-10 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
543
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
544
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-20 h-20 mx-auto rounded-full bg-gradient-accent p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full h-full rounded-full flex items-center justify-center overflow-hidden bg-body", children: logoUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx(
545
+ "img",
546
+ {
547
+ src: logoUrl,
548
+ alt: name || shortName,
549
+ className: "w-full h-full object-cover rounded-full",
550
+ onError: (e) => {
551
+ e.target.style.display = "none";
552
+ const fallbackDiv = document.createElement("div");
553
+ fallbackDiv.className = "text-2xl font-bold text-gradient-brand";
554
+ fallbackDiv.textContent = shortName;
555
+ e.target.parentElement.appendChild(fallbackDiv);
556
+ }
557
+ }
558
+ ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-2xl font-bold text-gradient-brand", children: shortName }) }) }),
559
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-5xl lg:text-6xl font-extrabold tracking-tight mb-4 text-gradient-brand drop-shadow-[0_2px_6px_rgba(0,0,0,0.4)]", children: name })
560
+ ] }),
561
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-4xl mx-auto", children: [
562
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
563
+ "div",
564
+ {
565
+ dangerouslySetInnerHTML: { __html: shortDescription },
566
+ className: "prose max-w-none mb-8 leading-relaxed text-inverse text-lg sm:text-xl md:text-2xl font-light tracking-wide"
567
+ }
568
+ ),
569
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-flex items-center px-4 py-2 rounded-full border bg-white/20 border-white/40 text-inverse text-small font-medium", children: [
570
+ "🚀 ",
571
+ safeT("aboutCompany.hero.establishedYear", { year: establishedYear }),
572
+ " - ",
573
+ safeT("aboutCompany.hero.experience", { years: experienceYears })
574
+ ] })
575
+ ] })
576
+ ] }) })
577
+ ] }),
578
+ /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid lg:grid-cols-2 gap-12 items-center", children: [
579
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
580
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-block px-4 py-2 rounded-full text-small font-semibold mb-4 bg-surface text-brand-primary border f-border", children: [
581
+ "📖 ",
582
+ safeT("aboutCompany.story.badge")
583
+ ] }),
584
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("h2", { className: "text-3xl lg:text-4xl font-bold mb-6 text-main", children: [
585
+ safeT("aboutCompany.story.title"),
586
+ " ",
587
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block text-gradient-brand", children: shortName })
588
+ ] }),
749
589
  /* @__PURE__ */ jsxRuntimeExports.jsx(
750
590
  "div",
751
591
  {
752
592
  dangerouslySetInnerHTML: { __html: description },
753
- className: `prose max-w-none transition-colors ${isDarkMode ? "prose-invert text-gray-300" : "text-gray-600"}`
593
+ className: "prose max-w-none text-muted"
754
594
  }
755
595
  )
756
596
  ] }),
757
- /* @__PURE__ */ jsxRuntimeExports.jsx(
758
- "div",
597
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
598
+ CompanyValues,
759
599
  {
760
- className: `transition-colors ${isDarkMode ? "text-gray-300" : "text-gray-700"}`,
761
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
762
- CompanyValues,
763
- {
764
- companyData,
765
- t: safeT,
766
- isDarkMode
767
- }
768
- )
600
+ companyData,
601
+ t: safeT,
602
+ isDarkMode
769
603
  }
770
- )
604
+ ) })
771
605
  ] }) }) })
772
606
  ] });
773
607
  };
774
- const TimelineSection = ({ data, t, isDarkMode, section }) => {
775
- var _a;
776
- const timelineData = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.filter((item) => item == null ? void 0 : item.data).map((item) => item.data)) || [];
608
+ const TimelineSection = ({ data, t, section }) => {
609
+ var _a, _b;
610
+ const timelineData = ((_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)) || [];
777
611
  const [timelineVisible, setTimelineVisible] = useState([]);
778
612
  const timelineRefs = useRef([]);
779
- const sectionTitle = (section == null ? void 0 : section.title) || "...";
613
+ const sectionTitle = (section == null ? void 0 : section.title) || "Timeline";
780
614
  useEffect(() => {
781
615
  setTimelineVisible(new Array(timelineData.length).fill(false));
782
616
  }, [timelineData.length]);
@@ -785,138 +619,51 @@ const TimelineSection = ({ data, t, isDarkMode, section }) => {
785
619
  (entries) => {
786
620
  entries.forEach((entry) => {
787
621
  if (entry.isIntersecting) {
788
- const index2 = timelineRefs.current.findIndex((el) => el === entry.target);
622
+ const index2 = timelineRefs.current.findIndex(
623
+ (el) => el === entry.target
624
+ );
789
625
  if (index2 !== -1) {
790
626
  setTimelineVisible((prev) => {
791
- const newVisible = [...prev];
792
- newVisible[index2] = true;
793
- return newVisible;
627
+ const updated = [...prev];
628
+ updated[index2] = true;
629
+ return updated;
794
630
  });
631
+ observer.unobserve(entry.target);
795
632
  }
796
- observer.unobserve(entry.target);
797
633
  }
798
634
  });
799
635
  },
800
636
  { threshold: 0.1 }
801
637
  );
802
638
  timelineRefs.current.forEach((el) => el && observer.observe(el));
803
- return () => {
804
- timelineRefs.current.forEach((el) => el && observer.unobserve(el));
805
- };
639
+ return () => timelineRefs.current.forEach((el) => el && observer.unobserve(el));
806
640
  }, [timelineData.length]);
807
641
  if (!timelineData.length) {
808
- 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: [
809
- /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-lg font-semibold mb-2 ${isDarkMode ? "text-white" : "text-gray-900"}`, children: t("timeline.noData.title") || "Chưa có dữ liệu" }),
810
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `${isDarkMode ? "text-gray-300" : "text-gray-600"}`, children: t("timeline.noData.description") || "Hiện tại chưa có milestone nào được thiết lập." })
642
+ return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 bg-body", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 text-center", children: [
643
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-subtitle font-semibold mb-2 text-main", children: t("timeline.noData.title") || "Chưa có dữ liệu" }),
644
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-muted", children: t("timeline.noData.description") || "Hiện tại chưa có milestone nào được thiết lập." })
811
645
  ] }) });
812
646
  }
813
- return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
814
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center mb-12", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
815
- "div",
816
- {
817
- 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"}`,
818
- children: [
819
- "📈 ",
820
- sectionTitle,
821
- isDarkMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
822
- /* @__PURE__ */ jsxRuntimeExports.jsx(
823
- "div",
824
- {
825
- className: "absolute w-12 h-12 bg-white/5 rounded-full",
826
- style: { left: "10%", top: "20%" }
827
- }
828
- ),
829
- /* @__PURE__ */ jsxRuntimeExports.jsx(
830
- "div",
831
- {
832
- className: "absolute w-10 h-10 bg-white/5 rounded-full",
833
- style: { right: "30%", bottom: "10%" }
834
- }
835
- ),
836
- /* @__PURE__ */ jsxRuntimeExports.jsx(
837
- "div",
838
- {
839
- className: "absolute w-14 h-14 bg-white/5 rounded-md",
840
- style: { left: "20%", bottom: "30%" }
841
- }
842
- ),
843
- /* @__PURE__ */ jsxRuntimeExports.jsx(
844
- "div",
845
- {
846
- 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'
847
- }
848
- )
849
- ] })
850
- ]
851
- }
852
- ) }),
647
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
648
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center mb-12", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-block px-4 py-2 rounded-full border border-[var(--border-color)] bg-surface text-subtitle font-semibold text-brand-primary shadow-sm hover:shadow-md transition-all duration-300", children: [
649
+ "📈 ",
650
+ sectionTitle
651
+ ] }) }),
853
652
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
854
- /* @__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" }),
653
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-brand rounded-full" }),
855
654
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-8", children: timelineData.map((milestone, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
856
655
  "div",
857
656
  {
858
657
  ref: (el) => timelineRefs.current[index2] = el,
859
658
  className: `flex items-center transition-all duration-700 ease-out ${index2 % 2 === 0 ? "flex-row" : "flex-row-reverse"} ${timelineVisible[index2] ? "opacity-100 scale-100" : "opacity-0 scale-75"}`,
860
- style: { transitionDelay: `${index2 * 200}ms` },
861
- children: [
862
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 px-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
863
- "div",
864
- {
865
- className: `relative p-5 rounded-xl shadow-lg transition-all duration-300 hover:shadow-xl overflow-hidden ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 border border-blue-800 hover:border-blue-600" : "bg-gray-50 hover:shadow-2xl"}`,
866
- children: [
867
- isDarkMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
868
- /* @__PURE__ */ jsxRuntimeExports.jsx(
869
- "div",
870
- {
871
- className: "absolute w-12 h-12 bg-white/5 rounded-full",
872
- style: { left: "10%", top: "20%" }
873
- }
874
- ),
875
- /* @__PURE__ */ jsxRuntimeExports.jsx(
876
- "div",
877
- {
878
- className: "absolute w-10 h-10 bg-white/5 rounded-full",
879
- style: { right: "30%", bottom: "10%" }
880
- }
881
- ),
882
- /* @__PURE__ */ jsxRuntimeExports.jsx(
883
- "div",
884
- {
885
- className: "absolute w-14 h-14 bg-white/5 rounded-md",
886
- style: { left: "20%", bottom: "30%" }
887
- }
888
- ),
889
- /* @__PURE__ */ jsxRuntimeExports.jsx(
890
- "div",
891
- {
892
- 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'
893
- }
894
- )
895
- ] }),
896
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-blue-600 font-bold text-xl mb-2", children: milestone.time }),
897
- /* @__PURE__ */ jsxRuntimeExports.jsx(
898
- "h3",
899
- {
900
- className: `text-lg font-bold mb-2 ${isDarkMode ? "text-white" : "text-gray-900"}`,
901
- children: milestone.title
902
- }
903
- ),
904
- /* @__PURE__ */ jsxRuntimeExports.jsx(
905
- "p",
906
- {
907
- className: `${isDarkMode ? "text-gray-300" : "text-gray-600"}`,
908
- children: milestone.description
909
- }
910
- )
911
- ]
912
- }
913
- ) }),
914
- /* @__PURE__ */ jsxRuntimeExports.jsx(
915
- "div",
916
- {
917
- className: `w-6 h-6 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full border-4 ${isDarkMode ? "border-gray-800" : "border-white"} shadow-[0_0_10px_5px_rgba(59,130,246,0.5)] flex-shrink-0 z-10 animate-pulse`
918
- }
919
- ),
659
+ style: { transitionDelay: `${index2 * 200}ms` },
660
+ children: [
661
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 px-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "card", children: [
662
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-title text-brand-primary", children: milestone.time }),
663
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "card-title text-main mb-1", children: milestone.title }),
664
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "card-text", children: milestone.description })
665
+ ] }) }),
666
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-6 h-6 bg-gradient-brand rounded-full border-4 border-[var(--bg-body)] shadow-[0_0_10px_5px_rgba(37,99,235,0.4)] flex-shrink-0 z-10 animate-pulse" }),
920
667
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1" })
921
668
  ]
922
669
  },
@@ -928,6 +675,7 @@ const TimelineSection = ({ data, t, isDarkMode, section }) => {
928
675
  const PartnerCard = ({ partner, idx, t, getLogoUrl, isDarkMode }) => {
929
676
  const itemRef = useRef(null);
930
677
  const [visible, setVisible] = useState(false);
678
+ const [isHovered, setIsHovered] = useState(false);
931
679
  useEffect(() => {
932
680
  const observer = new IntersectionObserver(
933
681
  (entries) => {
@@ -949,93 +697,82 @@ const PartnerCard = ({ partner, idx, t, getLogoUrl, isDarkMode }) => {
949
697
  /* @__PURE__ */ jsxRuntimeExports.jsx(
950
698
  "div",
951
699
  {
952
- className: "absolute w-12 h-12 bg-white/5 rounded-full",
953
- style: { left: "10%", top: "20%" }
700
+ className: "absolute w-12 h-12 rounded-full",
701
+ style: { left: "10%", top: "20%", background: "rgba(255,255,255,0.05)" }
954
702
  }
955
703
  ),
956
704
  /* @__PURE__ */ jsxRuntimeExports.jsx(
957
705
  "div",
958
706
  {
959
- className: "absolute w-10 h-10 bg-white/5 rounded-full",
960
- style: { right: "30%", bottom: "10%" }
707
+ className: "absolute w-10 h-10 rounded-full",
708
+ style: { right: "30%", bottom: "10%", background: "rgba(255,255,255,0.05)" }
961
709
  }
962
710
  ),
963
711
  /* @__PURE__ */ jsxRuntimeExports.jsx(
964
712
  "div",
965
713
  {
966
- className: "absolute w-14 h-14 bg-white/5 rounded-md",
967
- style: { left: "20%", bottom: "30%" }
714
+ className: "absolute w-14 h-14 rounded-md",
715
+ style: { left: "20%", bottom: "30%", background: "rgba(255,255,255,0.05)" }
968
716
  }
969
717
  ),
970
718
  /* @__PURE__ */ jsxRuntimeExports.jsx(
971
719
  "div",
972
720
  {
973
- 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'
721
+ className: "absolute inset-0 opacity-20",
722
+ style: {
723
+ backgroundImage: '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")'
724
+ }
974
725
  }
975
726
  )
976
727
  ] }),
977
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "logo-container w-20 h-14 flex items-center justify-center mb-4 rounded-lg overflow-hidden", children: logoSrc ? /* @__PURE__ */ jsxRuntimeExports.jsx(
978
- "img",
979
- {
980
- src: logoSrc,
981
- alt: partner.name,
982
- className: "logo-image max-w-full max-h-full object-contain"
983
- }
984
- ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white font-bold text-center text-sm px-1", children: partner.name }) }) }),
985
728
  /* @__PURE__ */ jsxRuntimeExports.jsx(
986
- "h4",
729
+ "div",
987
730
  {
988
- className: `font-bold text-center mb-2 ${isDarkMode ? "text-white" : "text-gray-900"}`,
989
- children: partner.name
731
+ className: "w-20 h-14 flex items-center justify-center mb-4 rounded-lg overflow-hidden bg-surface",
732
+ style: {
733
+ borderWidth: "1px",
734
+ borderStyle: "solid",
735
+ borderColor: isHovered ? "var(--brand-primary)" : "var(--border-color)",
736
+ backgroundColor: isHovered ? "var(--bg-body)" : "var(--bg-surface)",
737
+ transition: "all 0.3s ease"
738
+ },
739
+ children: logoSrc ? /* @__PURE__ */ jsxRuntimeExports.jsx(
740
+ "img",
741
+ {
742
+ src: logoSrc,
743
+ alt: partner.name,
744
+ className: "max-w-full max-h-full object-contain",
745
+ style: {
746
+ filter: isHovered ? "grayscale(0) opacity(1)" : isDarkMode ? "grayscale(0.3) opacity(0.8)" : "grayscale(0.2) opacity(0.9)",
747
+ transform: isHovered ? "scale(1.05)" : "scale(1)",
748
+ transition: "all 0.3s ease"
749
+ }
750
+ }
751
+ ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full h-full bg-gradient-brand flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white font-bold text-center text-small px-1", children: partner.name }) })
990
752
  }
991
753
  ),
992
- /* @__PURE__ */ jsxRuntimeExports.jsx(
993
- "p",
754
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "card-title text-center mb-2", children: partner.name }),
755
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "card-text text-center mb-2", children: partner.description }),
756
+ partner.websiteUrl && /* @__PURE__ */ jsxRuntimeExports.jsxs(
757
+ "div",
994
758
  {
995
- className: `text-sm text-center mb-2 ${isDarkMode ? "text-gray-300" : "text-gray-600"}`,
996
- children: partner.description
759
+ className: "card-link justify-center",
760
+ style: {
761
+ opacity: isHovered ? 1 : 0,
762
+ transform: isHovered ? "translateY(0)" : "translateY(4px)",
763
+ transition: "all 0.3s ease"
764
+ },
765
+ children: [
766
+ t("partners.viewDetails") || "Xem chi tiết",
767
+ " →"
768
+ ]
997
769
  }
998
- ),
999
- partner.websiteUrl && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "website-hint", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-blue-600 font-medium", children: [
1000
- t("partners.viewDetails") || "Xem chi tiết",
1001
- " →"
1002
- ] }) }),
1003
- /* @__PURE__ */ jsxRuntimeExports.jsx("style", { jsx: true, children: `
1004
- .partner-card {
1005
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1006
- }
1007
- .partner-card:hover {
1008
- transform: translateY(-3px);
1009
- box-shadow: 0 8px 20px ${isDarkMode ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)"};
1010
- }
1011
- .logo-container {
1012
- background: ${isDarkMode ? "linear-gradient(135deg, #374151 0%, #1f2937 100%)" : "linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)"};
1013
- border: 1px solid ${isDarkMode ? "#4b5563" : "#e2e8f0"};
1014
- transition: all 0.3s ease;
1015
- }
1016
- .partner-card:hover .logo-container {
1017
- border-color: #3b82f6;
1018
- background: ${isDarkMode ? "linear-gradient(135deg, #4b5563 0%, #374151 100%)" : "linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)"};
1019
- }
1020
- .logo-image {
1021
- filter: ${isDarkMode ? "grayscale(0.3) opacity(0.8)" : "grayscale(0.2) opacity(0.9)"};
1022
- transition: all 0.3s ease;
1023
- }
1024
- .partner-card:hover .logo-image {
1025
- filter: grayscale(0) opacity(1);
1026
- transform: scale(1.05);
1027
- }
1028
- .website-hint {
1029
- opacity: 0;
1030
- transform: translateY(4px);
1031
- transition: all 0.3s ease;
1032
- }
1033
- .partner-card:hover .website-hint {
1034
- opacity: 1;
1035
- transform: translateY(0);
1036
- }
1037
- ` })
770
+ )
1038
771
  ] });
772
+ const baseClasses = `card items-center justify-center transition-all duration-700 ease-out overflow-hidden ${visible ? "opacity-100 scale-100" : "opacity-0 scale-75"}`;
773
+ const dynamicStyles = {
774
+ transitionDelay: `${idx * 150}ms`
775
+ };
1039
776
  if (partner.websiteUrl) {
1040
777
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
1041
778
  "a",
@@ -1044,10 +781,12 @@ const PartnerCard = ({ partner, idx, t, getLogoUrl, isDarkMode }) => {
1044
781
  href: partner.websiteUrl,
1045
782
  target: "_blank",
1046
783
  rel: "noopener noreferrer",
1047
- className: `partner-card relative flex flex-col items-center justify-center p-4 rounded-xl shadow-sm transition-all duration-700 ease-out cursor-pointer overflow-hidden
1048
- ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 border border-blue-800 hover:border-blue-500" : "bg-white border border-gray-200 hover:border-blue-300"}
1049
- ${visible ? "opacity-100 scale-100" : "opacity-0 scale-75"}`,
1050
- style: { transitionDelay: `${idx * 150}ms`, textDecoration: "none" },
784
+ className: `${baseClasses} cursor-pointer`,
785
+ style: __spreadProps(__spreadValues({}, dynamicStyles), {
786
+ textDecoration: "none"
787
+ }),
788
+ onMouseEnter: () => setIsHovered(true),
789
+ onMouseLeave: () => setIsHovered(false),
1051
790
  children: cardContent
1052
791
  }
1053
792
  );
@@ -1056,10 +795,10 @@ const PartnerCard = ({ partner, idx, t, getLogoUrl, isDarkMode }) => {
1056
795
  "div",
1057
796
  {
1058
797
  ref: itemRef,
1059
- className: `partner-card relative flex flex-col items-center justify-center p-4 rounded-xl shadow-sm transition-all duration-700 ease-out overflow-hidden
1060
- ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 border border-blue-800" : "bg-white border border-gray-200"}
1061
- ${visible ? "opacity-100 scale-100" : "opacity-0 scale-75"}`,
1062
- style: { transitionDelay: `${idx * 150}ms` },
798
+ className: baseClasses,
799
+ style: dynamicStyles,
800
+ onMouseEnter: () => setIsHovered(true),
801
+ onMouseLeave: () => setIsHovered(false),
1063
802
  children: cardContent
1064
803
  }
1065
804
  );
@@ -1076,14 +815,14 @@ function useWindowSize$1() {
1076
815
  }, []);
1077
816
  return width;
1078
817
  }
1079
- const PartnersSection = ({ data, t, isDarkMode, imageBaseUrl = "", section }) => {
818
+ const PartnersSection = ({ data, t, imageBaseUrl = "", section }) => {
1080
819
  var _a, _b;
1081
820
  const partnersData = ((_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)) || [];
1082
821
  const [currentPartnerSlide, setCurrentPartnerSlide] = useState(0);
1083
822
  const [partnersVisible, setPartnersVisible] = useState(false);
1084
823
  const partnersRef = useRef(null);
1085
824
  const windowWidth = useWindowSize$1();
1086
- const sectionTitle = (section == null ? void 0 : section.title) || "...";
825
+ const sectionTitle = (section == null ? void 0 : section.title) || t("partners.sectionTitle") || "Đối tác";
1087
826
  const getLogoUrl = (logoUrl) => {
1088
827
  if (!logoUrl) return null;
1089
828
  if (logoUrl.startsWith("http")) return logoUrl;
@@ -1126,17 +865,11 @@ const PartnersSection = ({ data, t, isDarkMode, imageBaseUrl = "", section }) =>
1126
865
  return () => partnersRef.current && observer.unobserve(partnersRef.current);
1127
866
  }, []);
1128
867
  if (!partnersData.length) return null;
1129
- return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
1130
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center mb-12", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
1131
- "div",
1132
- {
1133
- className: `inline-block px-4 py-2 rounded-full text-lg font-semibold mb-4 border shadow-sm ${isDarkMode ? "bg-blue-900/30 text-blue-300 border-blue-800" : "bg-blue-100 text-blue-800 border-blue-200"}`,
1134
- children: [
1135
- "🤝 ",
1136
- sectionTitle
1137
- ]
1138
- }
1139
- ) }),
868
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
869
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center mb-12", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-block px-4 py-2 rounded-full border border-[var(--border-color)] bg-surface text-subtitle font-semibold text-brand-primary shadow-sm", children: [
870
+ "🤝 ",
871
+ sectionTitle
872
+ ] }) }),
1140
873
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: partnersRef, className: "relative overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
1141
874
  "div",
1142
875
  {
@@ -1152,8 +885,7 @@ const PartnersSection = ({ data, t, isDarkMode, imageBaseUrl = "", section }) =>
1152
885
  partner,
1153
886
  idx,
1154
887
  t,
1155
- getLogoUrl,
1156
- isDarkMode
888
+ getLogoUrl
1157
889
  },
1158
890
  partner.id || idx
1159
891
  )) })
@@ -1164,7 +896,8 @@ const PartnersSection = ({ data, t, isDarkMode, imageBaseUrl = "", section }) =>
1164
896
  "button",
1165
897
  {
1166
898
  onClick: () => setCurrentPartnerSlide(index2),
1167
- className: `w-3 h-3 rounded-full transition-all ${index2 === currentPartnerSlide ? "bg-blue-500 scale-125" : isDarkMode ? "bg-gray-600 hover:bg-blue-400" : "bg-gray-300 hover:bg-blue-500"}`
899
+ className: `w-3 h-3 rounded-full transition-all duration-300 ${index2 === currentPartnerSlide ? "bg-brand-primary scale-125 shadow-lg" : "bg-muted hover:bg-brand-primary/70"}`,
900
+ "aria-label": `Slide ${index2 + 1}`
1168
901
  },
1169
902
  index2
1170
903
  )) })
@@ -1186,12 +919,9 @@ const MilestoneSection = ({ data, t, isDarkMode, getMilestoneTimeline, section }
1186
919
  try {
1187
920
  setLoading(true);
1188
921
  const res = yield getMilestoneTimeline();
1189
- if (res.success) {
1190
- setMilestones(res.data || []);
1191
- } else {
1192
- setMilestones([]);
1193
- }
1194
- } catch (error) {
922
+ if (res.success) setMilestones(res.data || []);
923
+ else setMilestones([]);
924
+ } catch (e) {
1195
925
  setMilestones([]);
1196
926
  } finally {
1197
927
  setLoading(false);
@@ -1212,67 +942,39 @@ const MilestoneSection = ({ data, t, isDarkMode, getMilestoneTimeline, section }
1212
942
  (entries) => {
1213
943
  entries.forEach((entry) => {
1214
944
  if (entry.isIntersecting) {
1215
- const index2 = timelineRefs.current.findIndex(
1216
- (el) => el === entry.target
1217
- );
945
+ const index2 = timelineRefs.current.findIndex((el) => el === entry.target);
1218
946
  if (index2 !== -1) {
1219
947
  setTimelineVisible((prev) => {
1220
- const newVisible = [...prev];
1221
- newVisible[index2] = true;
1222
- return newVisible;
948
+ const updated = [...prev];
949
+ updated[index2] = true;
950
+ return updated;
1223
951
  });
952
+ observer.unobserve(entry.target);
1224
953
  }
1225
- observer.unobserve(entry.target);
1226
954
  }
1227
955
  });
1228
956
  },
1229
957
  { threshold: 0.1 }
1230
958
  );
1231
959
  timelineRefs.current.forEach((el) => el && observer.observe(el));
1232
- return () => {
1233
- timelineRefs.current.forEach((el) => el && observer.unobserve(el));
1234
- };
960
+ return () => timelineRefs.current.forEach((el) => el && observer.unobserve(el));
1235
961
  }, [milestones.length]);
1236
962
  if (loading) {
1237
- return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: isDarkMode ? "text-white" : "text-gray-800", children: t("milestone.status.loadingData") }) });
963
+ return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-main", children: t("milestone.status.loadingData") }) });
1238
964
  }
1239
965
  if (!milestones.length) {
1240
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
1241
- "section",
1242
- {
1243
- className: `py-20 ${isDarkMode ? "bg-gray-900/50" : "bg-white"}`,
1244
- children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 text-center", children: [
1245
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1246
- "h3",
1247
- {
1248
- className: `text-lg font-semibold mb-2 ${isDarkMode ? "text-white" : "text-gray-900"}`,
1249
- children: t("milestone.status.noData")
1250
- }
1251
- ),
1252
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1253
- "p",
1254
- {
1255
- className: `${isDarkMode ? "text-gray-300" : "text-gray-600"}`,
1256
- children: t("milestone.noDataDescription")
1257
- }
1258
- )
1259
- ] })
1260
- }
1261
- );
966
+ return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 bg-body", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 text-center", children: [
967
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold mb-2 text-main", children: t("milestone.status.noData") }),
968
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted", children: t("milestone.noDataDescription") })
969
+ ] }) });
1262
970
  }
1263
971
  return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
1264
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center mb-12", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
1265
- "div",
1266
- {
1267
- 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"}`,
1268
- children: [
1269
- "📈 ",
1270
- sectionTitle
1271
- ]
1272
- }
1273
- ) }),
972
+ /* @__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 border-[var(--border-color)] bg-surface text-main shadow-sm hover:shadow-md transition-all duration-300", children: [
973
+ "📈 ",
974
+ sectionTitle
975
+ ] }) }),
1274
976
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
1275
- /* @__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" }),
977
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-brand rounded-full" }),
1276
978
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-8", children: milestones.map((milestone, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
1277
979
  "div",
1278
980
  {
@@ -1280,35 +982,12 @@ const MilestoneSection = ({ data, t, isDarkMode, getMilestoneTimeline, section }
1280
982
  className: `flex items-center transition-all duration-700 ease-out ${index2 % 2 === 0 ? "flex-row" : "flex-row-reverse"} ${timelineVisible[index2] ? "opacity-100 scale-100" : "opacity-0 scale-75"}`,
1281
983
  style: { transitionDelay: `${index2 * 200}ms` },
1282
984
  children: [
1283
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 px-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
1284
- "div",
1285
- {
1286
- className: `relative p-5 rounded-xl shadow-lg transition-all duration-300 hover:shadow-xl overflow-hidden ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 border border-blue-800 hover:border-blue-600" : "bg-gray-50 hover:shadow-2xl"}`,
1287
- children: [
1288
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-blue-600 font-bold text-xl mb-2", children: milestone.time }),
1289
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1290
- "h3",
1291
- {
1292
- className: `text-lg font-bold mb-2 ${isDarkMode ? "text-white" : "text-gray-900"}`,
1293
- children: milestone.title
1294
- }
1295
- ),
1296
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1297
- "p",
1298
- {
1299
- className: `${isDarkMode ? "text-gray-300" : "text-gray-600"}`,
1300
- children: milestone.description
1301
- }
1302
- )
1303
- ]
1304
- }
1305
- ) }),
1306
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1307
- "div",
1308
- {
1309
- className: `w-6 h-6 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full border-4 ${isDarkMode ? "border-gray-800" : "border-white"} shadow-[0_0_10px_5px_rgba(59,130,246,0.5)] flex-shrink-0 z-10 animate-pulse`
1310
- }
1311
- ),
985
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 px-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "card", children: [
986
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-brand-primary font-bold text-xl mb-2", children: milestone.time }),
987
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "card-title", children: milestone.title }),
988
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "card-text", children: milestone.description })
989
+ ] }) }),
990
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-6 h-6 bg-gradient-brand rounded-full border-4 border-[var(--bg-body)] shadow-[0_0_10px_5px_rgba(37,99,235,0.4)] flex-shrink-0 z-10 animate-pulse" }),
1312
991
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1" })
1313
992
  ]
1314
993
  },
@@ -1317,105 +996,81 @@ const MilestoneSection = ({ data, t, isDarkMode, getMilestoneTimeline, section }
1317
996
  ] })
1318
997
  ] }) });
1319
998
  };
1320
- const TestimonialsSection = ({ data, t, isDarkMode, section }) => {
1321
- var _a;
999
+ const TestimonialsSection = ({ data, t, section }) => {
1000
+ var _a, _b;
1322
1001
  const [currentIndex, setCurrentIndex] = useState(0);
1323
- const sectionTitle = (section == null ? void 0 : section.title) || "...";
1324
- const testimonials = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.filter((item) => item == null ? void 0 : item.data).map((item) => {
1325
- var _a2, _b, _c, _d;
1002
+ const [isTransitioning, setIsTransitioning] = useState(false);
1003
+ const sectionTitle = (section == null ? void 0 : section.title) || t("testimonials.sectionTitle") || "Cảm nhận khách hàng";
1004
+ const testimonials = ((_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) => {
1005
+ var _a2, _b2, _c, _d;
1326
1006
  return {
1327
1007
  quote: ((_a2 = item.data) == null ? void 0 : _a2.content) || "",
1328
- author: ((_b = item.data) == null ? void 0 : _b.customerName) || "",
1329
- position: ((_c = item.data) == null ? void 0 : _c.customerTitle) || t("testimonials.fallback.defaultPosition"),
1008
+ author: ((_b2 = item.data) == null ? void 0 : _b2.customerName) || "",
1009
+ position: ((_c = item.data) == null ? void 0 : _c.customerTitle) || "",
1330
1010
  company: ((_d = item.data) == null ? void 0 : _d.customerCompany) || ""
1331
1011
  };
1332
1012
  })) || [];
1333
- const fallbackTestimonials = [
1334
- {
1335
- quote: t("testimonials.fallback.testimonial1.quote"),
1336
- author: t("testimonials.fallback.testimonial1.author"),
1337
- position: t("testimonials.fallback.testimonial1.position"),
1338
- company: t("testimonials.fallback.testimonial1.company")
1339
- },
1340
- {
1341
- quote: t("testimonials.fallback.testimonial2.quote"),
1342
- author: t("testimonials.fallback.testimonial2.author"),
1343
- position: t("testimonials.fallback.testimonial2.position"),
1344
- company: t("testimonials.fallback.testimonial2.company")
1345
- },
1346
- {
1347
- quote: t("testimonials.fallback.testimonial3.quote"),
1348
- author: t("testimonials.fallback.testimonial3.author"),
1349
- position: t("testimonials.fallback.testimonial3.position"),
1350
- company: t("testimonials.fallback.testimonial3.company")
1351
- }
1352
- ];
1353
- const displayTestimonials = testimonials.length > 0 ? testimonials : fallbackTestimonials;
1354
1013
  useEffect(() => {
1355
- if (displayTestimonials.length > 1) {
1014
+ if (testimonials.length > 1) {
1356
1015
  const interval = setInterval(() => {
1357
- setCurrentIndex((prev) => (prev + 1) % displayTestimonials.length);
1016
+ setIsTransitioning(true);
1017
+ setTimeout(() => {
1018
+ setCurrentIndex((prev) => (prev + 1) % testimonials.length);
1019
+ setIsTransitioning(false);
1020
+ }, 300);
1358
1021
  }, 5e3);
1359
1022
  return () => clearInterval(interval);
1360
1023
  }
1361
- }, [displayTestimonials.length]);
1362
- return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: [
1363
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
1364
- "div",
1365
- {
1366
- 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"}`,
1367
- children: [
1368
- "💬 ",
1369
- sectionTitle
1370
- ]
1371
- }
1372
- ),
1024
+ }, [testimonials.length]);
1025
+ const handleIndicatorClick = (index2) => {
1026
+ if (index2 !== currentIndex) {
1027
+ setIsTransitioning(true);
1028
+ setTimeout(() => {
1029
+ setCurrentIndex(index2);
1030
+ setIsTransitioning(false);
1031
+ }, 300);
1032
+ }
1033
+ };
1034
+ if (testimonials.length === 0) {
1035
+ return null;
1036
+ }
1037
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: [
1038
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-block px-4 py-2 rounded-full border border-[var(--border-color)] bg-surface text-subtitle font-semibold mb-8 text-brand-primary shadow-sm", children: [
1039
+ "💬 ",
1040
+ sectionTitle
1041
+ ] }),
1373
1042
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
1374
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
1043
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
1375
1044
  "div",
1376
1045
  {
1377
- className: `p-6 rounded-2xl transition-all duration-500 transform ${isDarkMode ? "bg-gray-800/80 backdrop-blur-sm border border-gray-700" : "bg-white"}`,
1046
+ style: {
1047
+ opacity: isTransitioning ? 0 : 1,
1048
+ transform: isTransitioning ? "translateY(10px)" : "translateY(0)",
1049
+ transition: "opacity 0.3s ease-in-out, transform 0.3s ease-in-out"
1050
+ },
1378
1051
  children: [
1379
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
1380
- "blockquote",
1381
- {
1382
- className: `text-lg lg:text-xl italic mb-6 animate-fadeIn transition-colors duration-200 ${isDarkMode ? "text-gray-300" : "text-gray-700"}`,
1383
- children: [
1384
- '"',
1385
- displayTestimonials[currentIndex].quote,
1386
- '"'
1387
- ]
1388
- }
1389
- ),
1390
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center space-x-4 animate-fadeIn", children: [
1052
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("blockquote", { className: "card-text text-body italic mb-6", children: [
1053
+ '"',
1054
+ testimonials[currentIndex].quote,
1055
+ '"'
1056
+ ] }),
1057
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center space-x-4", children: [
1391
1058
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-3xl", children: "👤" }),
1392
1059
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-left", children: [
1393
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1394
- "div",
1395
- {
1396
- className: `font-bold text-base transition-colors duration-200 ${isDarkMode ? "text-white" : "text-gray-900"}`,
1397
- children: displayTestimonials[currentIndex].author
1398
- }
1399
- ),
1400
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-blue-600 font-medium text-sm", children: displayTestimonials[currentIndex].position }),
1401
- displayTestimonials[currentIndex].company && /* @__PURE__ */ jsxRuntimeExports.jsx(
1402
- "div",
1403
- {
1404
- className: `text-xs transition-colors duration-200 ${isDarkMode ? "text-gray-400" : "text-gray-600"}`,
1405
- children: displayTestimonials[currentIndex].company
1406
- }
1407
- )
1060
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-title", children: testimonials[currentIndex].author }),
1061
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-text", children: testimonials[currentIndex].position }),
1062
+ testimonials[currentIndex].company && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-link", children: testimonials[currentIndex].company })
1408
1063
  ] })
1409
1064
  ] })
1410
1065
  ]
1411
- },
1412
- currentIndex
1413
- ),
1414
- displayTestimonials.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-2 mt-4", children: displayTestimonials.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
1066
+ }
1067
+ ) }),
1068
+ testimonials.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-2 mt-4", children: testimonials.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
1415
1069
  "button",
1416
1070
  {
1417
- onClick: () => setCurrentIndex(index2),
1418
- className: `w-2.5 h-2.5 rounded-full transition-all duration-300 ${index2 === currentIndex ? "bg-blue-600" : isDarkMode ? "bg-gray-600 hover:bg-gray-500" : "bg-gray-300 hover:bg-gray-400"}`
1071
+ onClick: () => handleIndicatorClick(index2),
1072
+ className: `w-2.5 h-2.5 rounded-full transition-all duration-300 ${index2 === currentIndex ? "bg-brand-secondary" : "bg-surface hover:bg-brand-primary"}`,
1073
+ "aria-label": `Slide ${index2 + 1}`
1419
1074
  },
1420
1075
  index2
1421
1076
  )) })
@@ -1423,54 +1078,82 @@ const TestimonialsSection = ({ data, t, isDarkMode, section }) => {
1423
1078
  ] }) });
1424
1079
  };
1425
1080
  const PartnerListCard = ({ partner, idx, t, isDarkMode, getLogoUrl }) => {
1426
- const logoUrl = getLogoUrl(partner.logo);
1427
- return /* @__PURE__ */ jsxRuntimeExports.jsxs(
1081
+ const logoUrl = getLogoUrl(partner.logoUrl);
1082
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(
1428
1083
  "a",
1429
1084
  {
1430
- href: partner.website || partner.url || "#",
1431
- target: partner.website || partner.url ? "_blank" : "_self",
1432
- rel: partner.website || partner.url ? "noopener noreferrer" : "",
1433
- className: `group relative overflow-hidden rounded-2xl transition-all duration-500 hover:-translate-y-2 hover:scale-105 ${isDarkMode ? "bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 hover:border-blue-500/50" : "bg-gradient-to-br from-white to-gray-50 border border-gray-200 hover:border-blue-400/50"} shadow-lg hover:shadow-2xl`,
1085
+ href: partner.websiteUrl || "#",
1086
+ target: partner.websiteUrl ? "_blank" : "_self",
1087
+ rel: partner.websiteUrl ? "noopener noreferrer" : "",
1088
+ className: "card",
1434
1089
  style: {
1435
1090
  animationDelay: `${idx * 0.1}s`,
1436
- textDecoration: "none"
1091
+ textDecoration: "none",
1092
+ overflow: "hidden",
1093
+ minHeight: "280px",
1094
+ padding: "1.5rem",
1095
+ display: "flex",
1096
+ flexDirection: "column"
1437
1097
  },
1438
- children: [
1439
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-blue-500/0 via-purple-500/0 to-pink-500/0 group-hover:from-blue-500/10 group-hover:via-purple-500/10 group-hover:to-pink-500/10 transition-all duration-700" }),
1440
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative p-6 flex flex-col items-center justify-center min-h-[180px]", children: [
1441
- logoUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full h-24 flex items-center justify-center mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
1442
- "img",
1443
- {
1444
- src: logoUrl,
1445
- alt: partner.name || t("partners.logoAlt") || "Partner logo",
1446
- className: "max-w-full max-h-full object-contain filter grayscale group-hover:grayscale-0 transition-all duration-500 group-hover:scale-110",
1447
- loading: "lazy"
1448
- }
1449
- ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
1450
- "div",
1451
- {
1452
- className: `w-20 h-20 rounded-full flex items-center justify-center mb-4 ${isDarkMode ? "bg-gray-700" : "bg-gray-200"}`,
1453
- children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-3xl", children: "🤝" })
1454
- }
1455
- ),
1456
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1457
- "h3",
1458
- {
1459
- className: `text-base font-bold text-center line-clamp-2 ${isDarkMode ? "text-white" : "text-gray-800"} group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-500 group-hover:to-purple-500 group-hover:bg-clip-text transition-all duration-300`,
1460
- children: partner.name || t("partners.unnamed") || "Partner"
1461
- }
1462
- ),
1463
- partner.description && /* @__PURE__ */ jsxRuntimeExports.jsx(
1464
- "p",
1465
- {
1466
- className: `text-xs text-center mt-2 line-clamp-2 ${isDarkMode ? "text-gray-400" : "text-gray-600"}`,
1467
- children: partner.description
1468
- }
1469
- )
1470
- ] }),
1471
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-0 right-0 w-20 h-20 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" }),
1472
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-0 left-0 w-20 h-20 bg-gradient-to-tr from-purple-500/20 to-pink-500/20 rounded-tr-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" })
1473
- ]
1098
+ children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
1099
+ display: "flex",
1100
+ flexDirection: "column",
1101
+ alignItems: "center",
1102
+ justifyContent: "center",
1103
+ flex: 1
1104
+ }, children: [
1105
+ logoUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
1106
+ width: "100%",
1107
+ height: "100px",
1108
+ display: "flex",
1109
+ alignItems: "center",
1110
+ justifyContent: "center",
1111
+ marginBottom: "1rem"
1112
+ }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
1113
+ "img",
1114
+ {
1115
+ src: logoUrl,
1116
+ alt: partner.name || t("partners.logoAlt") || "Partner logo",
1117
+ style: {
1118
+ maxWidth: "100%",
1119
+ maxHeight: "100%",
1120
+ objectFit: "contain",
1121
+ transition: "transform 300ms cubic-bezier(0.4, 0, 0.2, 1)"
1122
+ },
1123
+ onMouseEnter: (e) => {
1124
+ e.currentTarget.style.transform = "scale(1.05)";
1125
+ },
1126
+ onMouseLeave: (e) => {
1127
+ e.currentTarget.style.transform = "scale(1)";
1128
+ },
1129
+ loading: "lazy"
1130
+ }
1131
+ ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-surface", style: {
1132
+ width: "5rem",
1133
+ height: "5rem",
1134
+ borderRadius: "9999px",
1135
+ display: "flex",
1136
+ alignItems: "center",
1137
+ justifyContent: "center",
1138
+ marginBottom: "1rem"
1139
+ }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: "1.875rem" }, children: "🤝" }) }),
1140
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "card-title text-main", style: {
1141
+ fontSize: "1rem",
1142
+ textAlign: "center",
1143
+ marginBottom: "0.5rem",
1144
+ lineHeight: "1.4"
1145
+ }, children: partner.name || t("partners.unnamed") || "Partner" }),
1146
+ partner.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "card-text", style: {
1147
+ textAlign: "center",
1148
+ marginTop: "0.5rem",
1149
+ fontSize: "0.875rem",
1150
+ lineHeight: "1.5",
1151
+ display: "-webkit-box",
1152
+ WebkitLineClamp: 3,
1153
+ WebkitBoxOrient: "vertical",
1154
+ overflow: "hidden"
1155
+ }, children: partner.description })
1156
+ ] })
1474
1157
  }
1475
1158
  );
1476
1159
  };
@@ -1485,7 +1168,7 @@ function useWindowSize() {
1485
1168
  }, []);
1486
1169
  return width;
1487
1170
  }
1488
- const PartnerListSection = ({ t, isDarkMode, getPartnerList, imageBaseUrl = "", section }) => {
1171
+ const PartnerListSection = ({ t, getPartnerList, imageBaseUrl = "", section }) => {
1489
1172
  const [partnersData, setPartnersData] = useState([]);
1490
1173
  const [error, setError] = useState(null);
1491
1174
  const [loading, setLoading] = useState(true);
@@ -1493,7 +1176,7 @@ const PartnerListSection = ({ t, isDarkMode, getPartnerList, imageBaseUrl = "",
1493
1176
  const [partnersVisible, setPartnersVisible] = useState(false);
1494
1177
  const partnersRef = useRef(null);
1495
1178
  const windowWidth = useWindowSize();
1496
- const sectionTitle = (section == null ? void 0 : section.title) || "...";
1179
+ const sectionTitle = (section == null ? void 0 : section.title) || t("partners.sectionTitle");
1497
1180
  const getLogoUrl = (logoUrl) => {
1498
1181
  if (!logoUrl) return null;
1499
1182
  if (logoUrl.startsWith("http")) return logoUrl;
@@ -1538,9 +1221,7 @@ const PartnerListSection = ({ t, isDarkMode, getPartnerList, imageBaseUrl = "",
1538
1221
  }
1539
1222
  }, [partners.length]);
1540
1223
  useEffect(() => {
1541
- const fallbackTimer = setTimeout(() => {
1542
- setPartnersVisible(true);
1543
- }, 500);
1224
+ const fallbackTimer = setTimeout(() => setPartnersVisible(true), 500);
1544
1225
  const observer = new IntersectionObserver(
1545
1226
  (entries) => {
1546
1227
  entries.forEach((entry) => {
@@ -1553,54 +1234,46 @@ const PartnerListSection = ({ t, isDarkMode, getPartnerList, imageBaseUrl = "",
1553
1234
  },
1554
1235
  { threshold: 0.1, rootMargin: "50px" }
1555
1236
  );
1556
- if (partnersRef.current) {
1557
- observer.observe(partnersRef.current);
1558
- } else {
1237
+ if (partnersRef.current) observer.observe(partnersRef.current);
1238
+ else {
1559
1239
  clearTimeout(fallbackTimer);
1560
1240
  setPartnersVisible(true);
1561
1241
  }
1562
1242
  return () => {
1563
1243
  clearTimeout(fallbackTimer);
1564
- if (partnersRef.current) {
1565
- observer.unobserve(partnersRef.current);
1566
- }
1244
+ if (partnersRef.current) observer.unobserve(partnersRef.current);
1567
1245
  };
1568
1246
  }, []);
1569
1247
  if (loading) {
1570
- return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: isDarkMode ? "text-white" : "text-gray-800", children: t("partners.loading") || "Đang tải danh sách đối tác..." }) });
1248
+ return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 text-center bg-body", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-muted", children: t("partners.loading") || "Đang tải danh sách đối tác..." }) });
1571
1249
  }
1572
1250
  if (error) {
1573
- return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-red-500", children: t("partners.error") || error }) });
1251
+ return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 text-center bg-body", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-brand-secondary", children: t("partners.error") || error }) });
1574
1252
  }
1575
1253
  if (!partnersData.length) return null;
1576
- return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
1577
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center mb-12", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
1578
- "div",
1579
- {
1580
- className: `inline-block px-4 py-2 rounded-full text-lg font-semibold mb-4 border shadow-sm ${isDarkMode ? "bg-blue-900/30 text-blue-300 border-blue-800" : "bg-blue-100 text-blue-800 border-blue-200"}`,
1581
- children: [
1582
- "🤝 ",
1583
- sectionTitle
1584
- ]
1585
- }
1586
- ) }),
1254
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
1255
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center mb-12", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-block px-4 py-2 rounded-full border border-[var(--border-color)] bg-surface text-subtitle font-semibold text-brand-primary shadow-sm", children: [
1256
+ "🤝 ",
1257
+ sectionTitle
1258
+ ] }) }),
1587
1259
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: partnersRef, className: "relative", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
1588
1260
  "div",
1589
1261
  {
1590
1262
  className: `transition-all duration-1000 ease-out ${partnersVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"}`,
1591
1263
  children: [
1592
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative overflow-hidden mb-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-h-[220px]", children: partners.map((group, slideIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
1264
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative overflow-hidden mb-12", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { minHeight: "320px" }, children: partners.map((group, slideIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
1593
1265
  "div",
1594
1266
  {
1595
1267
  className: `absolute inset-0 w-full transition-all duration-1000 ease-in-out ${slideIndex === currentPartnerSlide ? "opacity-100 translate-x-0" : slideIndex < currentPartnerSlide ? "opacity-0 -translate-x-full" : "opacity-0 translate-x-full"}`,
1596
- style: { zIndex: slideIndex === currentPartnerSlide ? 10 : 1 },
1597
- children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6 px-2", children: group.map((partner, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
1268
+ style: {
1269
+ zIndex: slideIndex === currentPartnerSlide ? 10 : 1
1270
+ },
1271
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8 px-2", children: group.map((partner, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
1598
1272
  PartnerListCard,
1599
1273
  {
1600
1274
  partner,
1601
1275
  idx,
1602
1276
  t,
1603
- isDarkMode,
1604
1277
  getLogoUrl
1605
1278
  },
1606
1279
  partner.id || `${slideIndex}-${idx}`
@@ -1608,11 +1281,34 @@ const PartnerListSection = ({ t, isDarkMode, getPartnerList, imageBaseUrl = "",
1608
1281
  },
1609
1282
  slideIndex
1610
1283
  )) }) }),
1611
- partners.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-2", style: { zIndex: 50 }, children: partners.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
1284
+ partners.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-3", style: {
1285
+ position: "relative",
1286
+ zIndex: 100,
1287
+ paddingTop: "1rem"
1288
+ }, children: partners.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
1612
1289
  "button",
1613
1290
  {
1614
1291
  onClick: () => setCurrentPartnerSlide(index2),
1615
- className: `w-3 h-3 rounded-full transition-all duration-300 ${index2 === currentPartnerSlide ? "bg-blue-500 scale-125 shadow-lg" : isDarkMode ? "bg-gray-600 hover:bg-blue-400" : "bg-gray-300 hover:bg-blue-500"}`,
1292
+ style: {
1293
+ width: "12px",
1294
+ height: "12px",
1295
+ borderRadius: "50%",
1296
+ border: "none",
1297
+ cursor: "pointer",
1298
+ transition: "all 0.3s ease",
1299
+ backgroundColor: index2 === currentPartnerSlide ? "var(--brand-primary)" : "rgba(255, 255, 255, 0.3)",
1300
+ transform: index2 === currentPartnerSlide ? "scale(1.3)" : "scale(1)"
1301
+ },
1302
+ onMouseEnter: (e) => {
1303
+ if (index2 !== currentPartnerSlide) {
1304
+ e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.5)";
1305
+ }
1306
+ },
1307
+ onMouseLeave: (e) => {
1308
+ if (index2 !== currentPartnerSlide) {
1309
+ e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
1310
+ }
1311
+ },
1616
1312
  "aria-label": `Slide ${index2 + 1}`
1617
1313
  },
1618
1314
  index2
@@ -2369,24 +2065,30 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
2369
2065
  setIsSubmitting(false);
2370
2066
  }
2371
2067
  });
2372
- const inputBaseClasses = `w-full px-4 py-3 rounded-xl border transition-all duration-200 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none ${isDarkMode ? "bg-gray-700 border-gray-600 text-white placeholder-gray-400 focus:border-indigo-500" : "bg-white border-slate-300 text-slate-900 placeholder-slate-500 focus:border-indigo-500"}`;
2373
- const labelClasses = `block text-sm font-semibold mb-2 ${isDarkMode ? "text-gray-300" : "text-slate-700"}`;
2374
- return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid lg:grid-cols-3 gap-12", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `rounded-2xl p-8 shadow-lg border transition-colors duration-200 ${isDarkMode ? "bg-gray-800 border-gray-700" : "bg-white border-slate-200"}`, children: [
2068
+ const inputBaseClasses = `
2069
+ w-full px-4 py-3 rounded-xl border
2070
+ transition-all duration-200
2071
+ focus:ring-2 focus:outline-none
2072
+ bg-surface
2073
+ text-main
2074
+ placeholder-text-muted
2075
+ `;
2076
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid lg:grid-cols-3 gap-12", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "lg:col-span-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-surface rounded-2xl p-8 shadow-lg border transition-colors duration-200", style: { borderColor: "var(--border-color)" }, children: [
2375
2077
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center mb-6", children: [
2376
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-10 h-10 rounded-lg bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center mr-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Send, { size: 20, className: "text-white" }) }),
2078
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-10 h-10 rounded-lg bg-gradient-brand flex items-center justify-center mr-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Send, { size: 20, className: "text-white" }) }),
2377
2079
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
2378
- /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: `text-2xl font-bold transition-colors duration-200 ${isDarkMode ? "text-white" : "text-slate-800"}`, children: t("form.title") || "Gửi yêu cầu tư vấn" }),
2379
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm transition-colors duration-200 ${isDarkMode ? "text-gray-400" : "text-slate-600"}`, children: t("form.subtitle") || "Điền thông tin để nhận tư vấn miễn phí từ chuyên gia" })
2080
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-subtitle font-bold text-main", children: t("form.title") || "Gửi yêu cầu tư vấn" }),
2081
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small text-muted", children: t("form.subtitle") || "Điền thông tin để nhận tư vấn miễn phí từ chuyên gia" })
2380
2082
  ] })
2381
2083
  ] }),
2382
- submitStatus && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `mb-6 p-4 rounded-xl border transition-colors duration-200 ${submitStatus === "success" ? isDarkMode ? "bg-emerald-900/50 border-emerald-700 text-emerald-300" : "bg-emerald-50 border-emerald-200 text-emerald-800" : isDarkMode ? "bg-red-900/50 border-red-700 text-red-300" : "bg-red-50 border-red-200 text-red-800"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
2084
+ submitStatus && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `mb-6 p-4 rounded-xl border transition-colors duration-200 ${submitStatus === "success" ? "bg-emerald-50 dark:bg-emerald-900/30 text-emerald-800 dark:text-emerald-300" : "bg-red-50 dark:bg-red-900/30 text-red-800 dark:text-red-300"}`, style: { borderColor: submitStatus === "success" ? "#10b981" : "#ef4444" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
2383
2085
  submitStatus === "success" ? /* @__PURE__ */ jsxRuntimeExports.jsx(CircleCheckBig, { size: 20, className: "mr-2 flex-shrink-0" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 20, className: "mr-2 flex-shrink-0" }),
2384
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium", children: submitMessage })
2086
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small font-medium", children: submitMessage })
2385
2087
  ] }) }),
2386
2088
  /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { onSubmit: handleSubmit, className: "space-y-6", children: [
2387
2089
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid md:grid-cols-2 gap-6", children: [
2388
2090
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
2389
- /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: labelClasses, children: [
2091
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-small font-semibold mb-2 text-main", children: [
2390
2092
  t("form.fields.fullName") || "Họ và tên",
2391
2093
  " *"
2392
2094
  ] }),
@@ -2398,18 +2100,19 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
2398
2100
  value: formData.fullName || "",
2399
2101
  onChange: handleInputChange,
2400
2102
  onBlur: handleBlur,
2401
- className: `${inputBaseClasses} ${formErrors.fullName ? "border-red-500" : ""}`,
2103
+ className: inputBaseClasses,
2104
+ style: { borderColor: formErrors.fullName ? "#ef4444" : "var(--border-color)" },
2402
2105
  placeholder: t("contact.form.namePlaceholder"),
2403
2106
  required: true
2404
2107
  }
2405
2108
  ),
2406
- formErrors.fullName && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm text-red-500 flex items-center", children: [
2109
+ formErrors.fullName && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-small text-red-500 flex items-center", children: [
2407
2110
  /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
2408
2111
  formErrors.fullName
2409
2112
  ] })
2410
2113
  ] }),
2411
2114
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
2412
- /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: labelClasses, children: [
2115
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-small font-semibold mb-2 text-main", children: [
2413
2116
  t("form.fields.workEmail") || "Email",
2414
2117
  " *"
2415
2118
  ] }),
@@ -2421,12 +2124,13 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
2421
2124
  value: formData.workEmail || "",
2422
2125
  onChange: handleInputChange,
2423
2126
  onBlur: handleBlur,
2424
- className: `${inputBaseClasses} ${formErrors.workEmail ? "border-red-500" : ""}`,
2127
+ className: inputBaseClasses,
2128
+ style: { borderColor: formErrors.workEmail ? "#ef4444" : "var(--border-color)" },
2425
2129
  placeholder: "email@company.com",
2426
2130
  required: true
2427
2131
  }
2428
2132
  ),
2429
- formErrors.workEmail && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm text-red-500 flex items-center", children: [
2133
+ formErrors.workEmail && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-small text-red-500 flex items-center", children: [
2430
2134
  /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
2431
2135
  formErrors.workEmail
2432
2136
  ] })
@@ -2434,7 +2138,7 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
2434
2138
  ] }),
2435
2139
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid md:grid-cols-2 gap-6", children: [
2436
2140
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
2437
- /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: labelClasses, children: t("form.fields.phoneNumber") || "Số điện thoại" }),
2141
+ /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-small font-semibold mb-2 text-main", children: t("form.fields.phoneNumber") || "Số điện thoại" }),
2438
2142
  /* @__PURE__ */ jsxRuntimeExports.jsx(
2439
2143
  "input",
2440
2144
  {
@@ -2443,17 +2147,18 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
2443
2147
  value: formData.phoneNumber || "",
2444
2148
  onChange: handleInputChange,
2445
2149
  onBlur: handleBlur,
2446
- className: `${inputBaseClasses} ${formErrors.phoneNumber ? "border-red-500" : ""}`,
2150
+ className: inputBaseClasses,
2151
+ style: { borderColor: formErrors.phoneNumber ? "#ef4444" : "var(--border-color)" },
2447
2152
  placeholder: "0901 234 567"
2448
2153
  }
2449
2154
  ),
2450
- formErrors.phoneNumber && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm text-red-500 flex items-center", children: [
2155
+ formErrors.phoneNumber && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-small text-red-500 flex items-center", children: [
2451
2156
  /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
2452
2157
  formErrors.phoneNumber
2453
2158
  ] })
2454
2159
  ] }),
2455
2160
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
2456
- /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: labelClasses, children: t("form.fields.companyName") || "Công ty/Tổ chức" }),
2161
+ /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-small font-semibold mb-2 text-main", children: t("form.fields.companyName") || "Công ty/Tổ chức" }),
2457
2162
  /* @__PURE__ */ jsxRuntimeExports.jsx(
2458
2163
  "input",
2459
2164
  {
@@ -2462,11 +2167,12 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
2462
2167
  value: formData.companyName || "",
2463
2168
  onChange: handleInputChange,
2464
2169
  onBlur: handleBlur,
2465
- className: `${inputBaseClasses} ${formErrors.companyName ? "border-red-500" : ""}`,
2170
+ className: inputBaseClasses,
2171
+ style: { borderColor: formErrors.companyName ? "#ef4444" : "var(--border-color)" },
2466
2172
  placeholder: t("contact.form.fields.company")
2467
2173
  }
2468
2174
  ),
2469
- formErrors.companyName && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm text-red-500 flex items-center", children: [
2175
+ formErrors.companyName && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-small text-red-500 flex items-center", children: [
2470
2176
  /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
2471
2177
  formErrors.companyName
2472
2178
  ] })
@@ -2474,7 +2180,7 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
2474
2180
  ] }),
2475
2181
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid md:grid-cols-2 gap-6", children: [
2476
2182
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
2477
- /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: labelClasses, children: t("form.fields.jobTitle") || "Chức vụ" }),
2183
+ /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-small font-semibold mb-2 text-main", children: t("form.fields.jobTitle") || "Chức vụ" }),
2478
2184
  /* @__PURE__ */ jsxRuntimeExports.jsx(
2479
2185
  "input",
2480
2186
  {
@@ -2483,17 +2189,18 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
2483
2189
  value: formData.jobTitle || "",
2484
2190
  onChange: handleInputChange,
2485
2191
  onBlur: handleBlur,
2486
- className: `${inputBaseClasses} ${formErrors.jobTitle ? "border-red-500" : ""}`,
2192
+ className: inputBaseClasses,
2193
+ style: { borderColor: formErrors.jobTitle ? "#ef4444" : "var(--border-color)" },
2487
2194
  placeholder: t("contact.form.positionPlaceholder")
2488
2195
  }
2489
2196
  ),
2490
- formErrors.jobTitle && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm text-red-500 flex items-center", children: [
2197
+ formErrors.jobTitle && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-small text-red-500 flex items-center", children: [
2491
2198
  /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
2492
2199
  formErrors.jobTitle
2493
2200
  ] })
2494
2201
  ] }),
2495
2202
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
2496
- /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: labelClasses, children: t("form.fields.businessType") || "Loại hình kinh doanh" }),
2203
+ /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-small font-semibold mb-2 text-main", children: t("form.fields.businessType") || "Loại hình kinh doanh" }),
2497
2204
  /* @__PURE__ */ jsxRuntimeExports.jsx(
2498
2205
  "input",
2499
2206
  {
@@ -2502,6 +2209,7 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
2502
2209
  value: formData.businessType || "",
2503
2210
  onChange: handleInputChange,
2504
2211
  className: inputBaseClasses,
2212
+ style: { borderColor: "var(--border-color)" },
2505
2213
  placeholder: t("form.fields.businessType")
2506
2214
  }
2507
2215
  )
@@ -2509,7 +2217,7 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
2509
2217
  ] }),
2510
2218
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid md:grid-cols-2 gap-6", children: [
2511
2219
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
2512
- /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: labelClasses, children: t("form.fields.expectedBudget") || "Ngân sách dự kiến" }),
2220
+ /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-small font-semibold mb-2 text-main", children: t("form.fields.expectedBudget") || "Ngân sách dự kiến" }),
2513
2221
  /* @__PURE__ */ jsxRuntimeExports.jsx(
2514
2222
  "input",
2515
2223
  {
@@ -2518,12 +2226,13 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
2518
2226
  value: formData.expectedBudget || "",
2519
2227
  onChange: handleInputChange,
2520
2228
  className: inputBaseClasses,
2229
+ style: { borderColor: "var(--border-color)" },
2521
2230
  placeholder: t("form.fields.expectedBudget")
2522
2231
  }
2523
2232
  )
2524
2233
  ] }),
2525
2234
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
2526
- /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: labelClasses, children: t("form.fields.expectedTimeline") || "Thời gian dự kiến" }),
2235
+ /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-small font-semibold mb-2 text-main", children: t("form.fields.expectedTimeline") || "Thời gian dự kiến" }),
2527
2236
  /* @__PURE__ */ jsxRuntimeExports.jsx(
2528
2237
  "input",
2529
2238
  {
@@ -2532,13 +2241,14 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
2532
2241
  value: formData.expectedTimeline || "",
2533
2242
  onChange: handleInputChange,
2534
2243
  className: inputBaseClasses,
2244
+ style: { borderColor: "var(--border-color)" },
2535
2245
  placeholder: t("form.fields.expectedTimeline")
2536
2246
  }
2537
2247
  )
2538
2248
  ] })
2539
2249
  ] }),
2540
2250
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
2541
- /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: labelClasses, children: [
2251
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-small font-semibold mb-2 text-main", children: [
2542
2252
  t("form.fields.requestTitle") || "Tiêu đề yêu cầu",
2543
2253
  " *"
2544
2254
  ] }),
@@ -2550,18 +2260,19 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
2550
2260
  value: formData.requestTitle || "",
2551
2261
  onChange: handleInputChange,
2552
2262
  onBlur: handleBlur,
2553
- className: `${inputBaseClasses} ${formErrors.requestTitle ? "border-red-500" : ""}`,
2263
+ className: inputBaseClasses,
2264
+ style: { borderColor: formErrors.requestTitle ? "#ef4444" : "var(--border-color)" },
2554
2265
  placeholder: t("contact.form.placeholders.subject"),
2555
2266
  required: true
2556
2267
  }
2557
2268
  ),
2558
- formErrors.requestTitle && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm text-red-500 flex items-center", children: [
2269
+ formErrors.requestTitle && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-small text-red-500 flex items-center", children: [
2559
2270
  /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
2560
2271
  formErrors.requestTitle
2561
2272
  ] })
2562
2273
  ] }),
2563
2274
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
2564
- /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: labelClasses, children: [
2275
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-small font-semibold mb-2 text-main", children: [
2565
2276
  t("form.fields.requestDescription") || "Mô tả yêu cầu",
2566
2277
  " *"
2567
2278
  ] }),
@@ -2573,48 +2284,32 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
2573
2284
  onChange: handleInputChange,
2574
2285
  onBlur: handleBlur,
2575
2286
  rows: "5",
2576
- className: `${inputBaseClasses} resize-none ${formErrors.requestDescription ? "border-red-500" : ""}`,
2287
+ className: `${inputBaseClasses} resize-none`,
2288
+ style: { borderColor: formErrors.requestDescription ? "#ef4444" : "var(--border-color)" },
2577
2289
  placeholder: t("contact.form.placeholders.message"),
2578
2290
  required: true
2579
2291
  }
2580
2292
  ),
2581
- formErrors.requestDescription && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-sm text-red-500 flex items-center", children: [
2293
+ formErrors.requestDescription && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-1 text-small text-red-500 flex items-center", children: [
2582
2294
  /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { size: 14, className: "mr-1" }),
2583
2295
  formErrors.requestDescription
2584
2296
  ] })
2585
2297
  ] }),
2586
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-4", children: [
2587
- /* @__PURE__ */ jsxRuntimeExports.jsx(
2588
- "button",
2589
- {
2590
- type: "submit",
2591
- disabled: isSubmitting,
2592
- className: "flex-1 bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-4 px-6 rounded-xl hover:from-indigo-700 hover:to-purple-700 transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none flex items-center justify-center font-semibold shadow-lg",
2593
- children: isSubmitting ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
2594
- /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "animate-spin h-5 w-5 mr-2" }),
2595
- t("form.submitting") || "Đang gửi..."
2596
- ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
2597
- /* @__PURE__ */ jsxRuntimeExports.jsx(Send, { size: 20, className: "mr-2" }),
2598
- t("form.submit") || "Gửi yêu cầu"
2599
- ] })
2600
- }
2601
- ),
2602
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
2603
- "button",
2604
- {
2605
- type: "button",
2606
- className: `px-6 py-4 rounded-xl border-2 font-semibold transition-all hover:scale-105 ${isDarkMode ? "border-gray-600 text-gray-300 hover:bg-gray-700" : "border-slate-300 text-slate-700 hover:bg-slate-50"}`,
2607
- children: [
2608
- /* @__PURE__ */ jsxRuntimeExports.jsx(Phone, { size: 20, className: "inline mr-2" }),
2609
- t("form.callNow") || "Gọi ngay"
2610
- ]
2611
- }
2612
- )
2613
- ] }),
2614
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex items-center space-x-2 text-sm transition-colors duration-200 ${isDarkMode ? "text-gray-400" : "text-slate-600"}`, children: [
2615
- /* @__PURE__ */ jsxRuntimeExports.jsx(CircleCheckBig, { size: 16, className: "text-emerald-500" }),
2616
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t("form.privacy") || "Cam kết bảo mật thông tin và phản hồi trong 24 giờ" })
2617
- ] })
2298
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2299
+ "button",
2300
+ {
2301
+ type: "submit",
2302
+ disabled: isSubmitting,
2303
+ className: "flex-1 btn-primary text-white py-4 px-6 rounded-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center font-semibold",
2304
+ children: isSubmitting ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
2305
+ /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "animate-spin h-5 w-5 mr-2" }),
2306
+ t("form.submitting") || "Đang gửi..."
2307
+ ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
2308
+ /* @__PURE__ */ jsxRuntimeExports.jsx(Send, { size: 20, className: "mr-2" }),
2309
+ t("form.submit") || "Gửi yêu cầu"
2310
+ ] })
2311
+ }
2312
+ ) })
2618
2313
  ] })
2619
2314
  ] }) }) }) }) });
2620
2315
  };
@@ -2624,65 +2319,110 @@ const ContactInfoSection = ({ data, t, isDarkMode, section }) => {
2624
2319
  const sectionTitle = (section == null ? void 0 : section.title) || "...";
2625
2320
  if (!contactData.length) return null;
2626
2321
  return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
2627
- /* @__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: [
2628
- /* @__PURE__ */ jsxRuntimeExports.jsx(User, { size: 22, className: "mr-2" }),
2629
- sectionTitle
2322
+ /* @__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 bg-surface", style: { borderWidth: "1px", borderColor: "var(--border-color)" }, children: [
2323
+ /* @__PURE__ */ jsxRuntimeExports.jsx(User, { size: 22, className: "mr-2 text-brand-primary" }),
2324
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-main", children: sectionTitle })
2630
2325
  ] }) }),
2631
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid md:grid-cols-2 lg:grid-cols-3 gap-8", children: contactData.map((contact, index2) => {
2632
- var _a2;
2633
- return /* @__PURE__ */ jsxRuntimeExports.jsxs(
2634
- "div",
2635
- {
2636
- className: `rounded-2xl p-8 shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border ${isDarkMode ? "bg-gray-800 border-gray-700" : "bg-white border-slate-200"}`,
2637
- children: [
2638
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-6", children: [
2639
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-20 h-20 rounded-full mx-auto mb-4 flex items-center justify-center text-2xl font-bold text-white bg-gradient-to-br from-indigo-500 to-purple-600", children: ((_a2 = contact.name) == null ? void 0 : _a2.charAt(0)) || "A" }),
2640
- /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-xl font-bold mb-2 ${isDarkMode ? "text-white" : "text-slate-800"}`, children: contact.name }),
2641
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `inline-block px-3 py-1 rounded-full text-sm font-semibold ${isDarkMode ? "bg-indigo-900/50 text-indigo-300" : "bg-indigo-50 text-indigo-700"}`, children: contact.position })
2642
- ] }),
2643
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
2644
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
2645
- "a",
2646
- {
2647
- href: `tel:${contact.phone}`,
2648
- className: `flex items-center p-3 rounded-xl transition-all hover:scale-105 ${isDarkMode ? "bg-gray-700 hover:bg-gray-600" : "bg-slate-50 hover:bg-slate-100"} group`,
2649
- children: [
2650
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-10 h-10 rounded-lg flex items-center justify-center mr-3 group-hover:scale-110 transition-transform ${isDarkMode ? "bg-green-900/50 text-green-400" : "bg-green-50 text-green-600"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Phone, { size: 18 }) }),
2651
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
2652
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm font-medium ${isDarkMode ? "text-gray-400" : "text-slate-500"}`, children: t("contact.info.phone") || "Điện thoại" }),
2653
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `font-semibold ${isDarkMode ? "text-white" : "text-slate-800"}`, children: contact.phone })
2654
- ] })
2655
- ]
2656
- }
2657
- ),
2658
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
2659
- "a",
2660
- {
2661
- href: `mailto:${contact.email}`,
2662
- className: `flex items-center p-3 rounded-xl transition-all hover:scale-105 ${isDarkMode ? "bg-gray-700 hover:bg-gray-600" : "bg-slate-50 hover:bg-slate-100"} group`,
2663
- children: [
2664
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-10 h-10 rounded-lg flex items-center justify-center mr-3 group-hover:scale-110 transition-transform ${isDarkMode ? "bg-indigo-900/50 text-indigo-400" : "bg-indigo-50 text-indigo-600"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Mail, { size: 18 }) }),
2665
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
2666
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm font-medium ${isDarkMode ? "text-gray-400" : "text-slate-500"}`, children: "Email" }),
2667
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `font-semibold ${isDarkMode ? "text-white" : "text-slate-800"}`, children: contact.email })
2668
- ] })
2669
- ]
2670
- }
2671
- ),
2672
- contact.workingHours && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex items-center p-3 rounded-xl ${isDarkMode ? "bg-gray-700" : "bg-slate-50"}`, children: [
2673
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-10 h-10 rounded-lg flex items-center justify-center mr-3 ${isDarkMode ? "bg-purple-900/50 text-purple-400" : "bg-purple-50 text-purple-600"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { size: 18 }) }),
2674
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
2675
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm font-medium ${isDarkMode ? "text-gray-400" : "text-slate-500"}`, children: t("contact.info.workingHours") || "Giờ làm việc" }),
2676
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `font-semibold ${isDarkMode ? "text-white" : "text-slate-800"}`, children: contact.workingHours || t("contact.info.defaultWorkingHours") || "T2-T6: 8:00-18:00" })
2677
- ] })
2326
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid md:grid-cols-2 lg:grid-cols-3 gap-8", children: contactData.map((contact, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "card", children: [
2327
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-6", children: [
2328
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-brand", style: {
2329
+ width: "5rem",
2330
+ height: "5rem",
2331
+ borderRadius: "9999px",
2332
+ margin: "0 auto 1rem",
2333
+ display: "flex",
2334
+ alignItems: "center",
2335
+ justifyContent: "center"
2336
+ }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(User, { size: 32, style: { color: "white" } }) }),
2337
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "card-title text-subtitle mb-2", children: contact.name }),
2338
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-block px-3 py-1 rounded-full text-small font-semibold bg-surface text-brand-primary", style: { borderWidth: "1px", borderColor: "var(--border-color)" }, children: contact.position })
2339
+ ] }),
2340
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
2341
+ /* @__PURE__ */ jsxRuntimeExports.jsxs(
2342
+ "a",
2343
+ {
2344
+ href: `tel:${contact.phone}`,
2345
+ className: "card-link",
2346
+ style: {
2347
+ padding: "0.75rem",
2348
+ borderRadius: "0.75rem",
2349
+ backgroundColor: "var(--bg-body)",
2350
+ borderWidth: "1px",
2351
+ borderColor: "var(--border-color)",
2352
+ transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1)"
2353
+ },
2354
+ children: [
2355
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-brand", style: {
2356
+ width: "2.5rem",
2357
+ height: "2.5rem",
2358
+ borderRadius: "0.5rem",
2359
+ display: "flex",
2360
+ alignItems: "center",
2361
+ justifyContent: "center",
2362
+ marginRight: "0.75rem"
2363
+ }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Phone, { size: 18, style: { color: "white" } }) }),
2364
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { flex: 1 }, children: [
2365
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small text-muted", style: { marginBottom: "0.25rem" }, children: t("contact.info.phone") || "Điện thoại" }),
2366
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-main", style: { fontWeight: 600 }, children: contact.phone })
2367
+ ] })
2368
+ ]
2369
+ }
2370
+ ),
2371
+ /* @__PURE__ */ jsxRuntimeExports.jsxs(
2372
+ "a",
2373
+ {
2374
+ href: `mailto:${contact.email}`,
2375
+ className: "card-link",
2376
+ style: {
2377
+ padding: "0.75rem",
2378
+ borderRadius: "0.75rem",
2379
+ backgroundColor: "var(--bg-body)",
2380
+ borderWidth: "1px",
2381
+ borderColor: "var(--border-color)",
2382
+ transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1)"
2383
+ },
2384
+ children: [
2385
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-accent", style: {
2386
+ width: "2.5rem",
2387
+ height: "2.5rem",
2388
+ borderRadius: "0.5rem",
2389
+ display: "flex",
2390
+ alignItems: "center",
2391
+ justifyContent: "center",
2392
+ marginRight: "0.75rem"
2393
+ }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Mail, { size: 18, style: { color: "white" } }) }),
2394
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { flex: 1 }, children: [
2395
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small text-muted", style: { marginBottom: "0.25rem" }, children: "Email" }),
2396
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-main", style: { fontWeight: 600 }, children: contact.email })
2678
2397
  ] })
2679
- ] }),
2680
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "w-full py-3 px-4 rounded-xl font-semibold transition-all transform hover:scale-105 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white shadow-lg", children: t("contact.buttons.contactNow") || "Liên hệ ngay" }) })
2681
- ]
2682
- },
2683
- contact.id || index2
2684
- );
2685
- }) })
2398
+ ]
2399
+ }
2400
+ ),
2401
+ contact.workingHours && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
2402
+ display: "flex",
2403
+ alignItems: "center",
2404
+ padding: "0.75rem",
2405
+ borderRadius: "0.75rem",
2406
+ backgroundColor: "var(--bg-body)",
2407
+ borderWidth: "1px",
2408
+ borderColor: "var(--border-color)"
2409
+ }, children: [
2410
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-brand", style: {
2411
+ width: "2.5rem",
2412
+ height: "2.5rem",
2413
+ borderRadius: "0.5rem",
2414
+ display: "flex",
2415
+ alignItems: "center",
2416
+ justifyContent: "center",
2417
+ marginRight: "0.75rem"
2418
+ }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { size: 18, style: { color: "white" } }) }),
2419
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { flex: 1 }, children: [
2420
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small text-muted", style: { marginBottom: "0.25rem" }, children: t("contact.info.workingHours") || "Giờ làm việc" }),
2421
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-main", style: { fontWeight: 600 }, children: contact.workingHours || t("contact.info.defaultWorkingHours") || "T2-T6: 8:00-18:00" })
2422
+ ] })
2423
+ ] })
2424
+ ] })
2425
+ ] }, contact.id || index2)) })
2686
2426
  ] }) });
2687
2427
  };
2688
2428
  const ContactListAutoSection = ({ data, t, isDarkMode, getContactList, section }) => {
@@ -2710,89 +2450,136 @@ const ContactListAutoSection = ({ data, t, isDarkMode, getContactList, section }
2710
2450
  }
2711
2451
  });
2712
2452
  if (loading) {
2713
- return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `py-16 px-5 text-center ${isDarkMode ? "bg-gray-900" : "bg-gray-50"}`, children: [
2714
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `inline-block w-10 h-10 border-4 ${isDarkMode ? "border-gray-600 border-t-blue-500" : "border-gray-300 border-t-blue-500"} rounded-full animate-spin` }),
2715
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `mt-4 ${isDarkMode ? "text-gray-400" : "text-gray-600"}`, children: t("contactList.status.loading") || "Đang tải danh sách liên hệ..." })
2453
+ return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-16 px-5 text-center bg-body", children: [
2454
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "inline-block w-10 h-10 border-4 border-color rounded-full animate-spin", style: { borderTopColor: "var(--brand-primary)" } }),
2455
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-4 text-muted", children: t("contactList.status.loading") || "Đang tải danh sách liên hệ..." })
2716
2456
  ] });
2717
2457
  }
2718
2458
  if (error) {
2719
- return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `py-16 px-5 text-center ${isDarkMode ? "bg-gray-900" : "bg-gray-50"}`, children: [
2720
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${isDarkMode ? "text-red-400" : "text-red-500"} text-base mb-2`, children: [
2459
+ return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-16 px-5 text-center bg-body", children: [
2460
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-base mb-2", style: { color: "#ef4444" }, children: [
2721
2461
  "⚠️ ",
2722
2462
  t("contactList.error.title") || "Lỗi tải dữ liệu"
2723
2463
  ] }),
2724
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `${isDarkMode ? "text-gray-400" : "text-gray-600"}`, children: error })
2464
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted", children: error })
2725
2465
  ] });
2726
2466
  }
2727
2467
  if (!contacts || contacts.length === 0) {
2728
- return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `py-16 px-5 text-center ${isDarkMode ? "bg-gray-900" : "bg-gray-50"}`, children: [
2468
+ return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-16 px-5 text-center bg-body", children: [
2729
2469
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-5xl mb-5", children: "📞" }),
2730
- /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `${isDarkMode ? "text-gray-400" : "text-gray-600"} mb-2`, children: t("contactList.status.noData.title") || "Chưa có thông tin liên hệ" }),
2731
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `${isDarkMode ? "text-gray-500" : "text-gray-500"}`, children: t("contactList.status.noData.description") || "Danh sách liên hệ sẽ hiển thị tại đây" })
2470
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-muted mb-2", children: t("contactList.status.noData.title") || "Chưa có thông tin liên hệ" }),
2471
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted opacity-75", children: t("contactList.status.noData.description") || "Danh sách liên hệ sẽ hiển thị tại đây" })
2732
2472
  ] });
2733
2473
  }
2734
- return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-6xl mx-auto px-5", children: [
2735
- /* @__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 }) }),
2736
- /* @__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)) })
2474
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
2475
+ /* @__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 bg-surface", style: { borderWidth: "1px", borderColor: "var(--border-color)" }, children: [
2476
+ /* @__PURE__ */ jsxRuntimeExports.jsx(User, { size: 22, className: "mr-2 text-brand-primary" }),
2477
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-main", children: sectionTitle })
2478
+ ] }) }),
2479
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid md:grid-cols-2 lg:grid-cols-3 gap-8", children: contacts.map((contact, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(ContactCard, { contact, t, isDarkMode }, contact.id || index2)) })
2737
2480
  ] }) });
2738
2481
  };
2739
2482
  const ContactCard = ({ contact, t, isDarkMode }) => {
2740
- var _a, _b;
2741
- const [isHovered, setIsHovered] = useState(false);
2742
- return /* @__PURE__ */ jsxRuntimeExports.jsxs(
2743
- "div",
2744
- {
2745
- className: `
2746
- ${isDarkMode ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"} rounded-2xl p-8 border cursor-pointer transition-all duration-300
2747
- ${isHovered ? `shadow-xl ${isDarkMode ? "shadow-gray-900/40" : "shadow-gray-500/20"} -translate-y-2` : `shadow-lg ${isDarkMode ? "shadow-gray-900/20" : "shadow-gray-500/10"}`}
2748
- `,
2749
- onMouseEnter: () => setIsHovered(true),
2750
- onMouseLeave: () => setIsHovered(false),
2751
- children: [
2752
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center mb-6", children: [
2753
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-15 h-15 rounded-full ${isDarkMode ? "bg-blue-600" : "bg-blue-500"} flex items-center justify-center text-white text-2xl font-bold mr-4`, children: ((_b = (_a = contact.name) == null ? void 0 : _a.charAt(0)) == null ? void 0 : _b.toUpperCase()) || "?" }),
2754
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
2755
- /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-xl font-semibold ${isDarkMode ? "text-white" : "text-gray-900"} mb-1`, children: contact.name || t("contactList.card.noName") || "Không có tên" }),
2756
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-base ${isDarkMode ? "text-gray-400" : "text-gray-600"}`, children: contact.position || t("contactList.card.noPosition") || "Chưa có chức vụ" })
2757
- ] })
2758
- ] }),
2759
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
2760
- /* @__PURE__ */ jsxRuntimeExports.jsx(
2761
- ContactInfo,
2762
- {
2763
- icon: "📧",
2764
- label: t("contactList.card.email") || "Email",
2765
- value: contact.email,
2766
- href: `mailto:${contact.email}`
2767
- }
2768
- ),
2769
- /* @__PURE__ */ jsxRuntimeExports.jsx(
2770
- ContactInfo,
2771
- {
2772
- icon: "📱",
2773
- label: t("contactList.card.phone") || "Điện thoại",
2774
- value: contact.phone,
2775
- href: `tel:${contact.phone}`
2776
- }
2777
- )
2483
+ return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "card", children: [
2484
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-6", children: [
2485
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-brand", style: {
2486
+ width: "5rem",
2487
+ height: "5rem",
2488
+ borderRadius: "9999px",
2489
+ margin: "0 auto 1rem",
2490
+ display: "flex",
2491
+ alignItems: "center",
2492
+ justifyContent: "center"
2493
+ }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(User, { size: 32, style: { color: "white" } }) }),
2494
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "card-title text-subtitle mb-2", children: contact.name || t("contactList.card.noName") || "Không có tên" }),
2495
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-block px-3 py-1 rounded-full text-small font-semibold bg-surface text-brand-primary", style: { borderWidth: "1px", borderColor: "var(--border-color)" }, children: contact.position || t("contactList.card.noPosition") || "Chưa có chức vụ" })
2496
+ ] }),
2497
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
2498
+ contact.phone && /* @__PURE__ */ jsxRuntimeExports.jsxs(
2499
+ "a",
2500
+ {
2501
+ href: `tel:${contact.phone}`,
2502
+ className: "card-link",
2503
+ style: {
2504
+ padding: "0.75rem",
2505
+ borderRadius: "0.75rem",
2506
+ backgroundColor: "var(--bg-body)",
2507
+ borderWidth: "1px",
2508
+ borderColor: "var(--border-color)",
2509
+ transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1)"
2510
+ },
2511
+ children: [
2512
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-brand", style: {
2513
+ width: "2.5rem",
2514
+ height: "2.5rem",
2515
+ borderRadius: "0.5rem",
2516
+ display: "flex",
2517
+ alignItems: "center",
2518
+ justifyContent: "center",
2519
+ marginRight: "0.75rem"
2520
+ }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Phone, { size: 18, style: { color: "white" } }) }),
2521
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { flex: 1 }, children: [
2522
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small text-muted", style: { marginBottom: "0.25rem" }, children: t("contactList.card.phone") || "Điện thoại" }),
2523
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-main", style: { fontWeight: 600 }, children: contact.phone })
2524
+ ] })
2525
+ ]
2526
+ }
2527
+ ),
2528
+ contact.email && /* @__PURE__ */ jsxRuntimeExports.jsxs(
2529
+ "a",
2530
+ {
2531
+ href: `mailto:${contact.email}`,
2532
+ className: "card-link",
2533
+ style: {
2534
+ padding: "0.75rem",
2535
+ borderRadius: "0.75rem",
2536
+ backgroundColor: "var(--bg-body)",
2537
+ borderWidth: "1px",
2538
+ borderColor: "var(--border-color)",
2539
+ transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1)"
2540
+ },
2541
+ children: [
2542
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-accent", style: {
2543
+ width: "2.5rem",
2544
+ height: "2.5rem",
2545
+ borderRadius: "0.5rem",
2546
+ display: "flex",
2547
+ alignItems: "center",
2548
+ justifyContent: "center",
2549
+ marginRight: "0.75rem"
2550
+ }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Mail, { size: 18, style: { color: "white" } }) }),
2551
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { flex: 1 }, children: [
2552
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small text-muted", style: { marginBottom: "0.25rem" }, children: "Email" }),
2553
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-main", style: { fontWeight: 600 }, children: contact.email })
2554
+ ] })
2555
+ ]
2556
+ }
2557
+ ),
2558
+ contact.workingHours && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
2559
+ display: "flex",
2560
+ alignItems: "center",
2561
+ padding: "0.75rem",
2562
+ borderRadius: "0.75rem",
2563
+ backgroundColor: "var(--bg-body)",
2564
+ borderWidth: "1px",
2565
+ borderColor: "var(--border-color)"
2566
+ }, children: [
2567
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-brand", style: {
2568
+ width: "2.5rem",
2569
+ height: "2.5rem",
2570
+ borderRadius: "0.5rem",
2571
+ display: "flex",
2572
+ alignItems: "center",
2573
+ justifyContent: "center",
2574
+ marginRight: "0.75rem"
2575
+ }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { size: 18, style: { color: "white" } }) }),
2576
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { flex: 1 }, children: [
2577
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small text-muted", style: { marginBottom: "0.25rem" }, children: t("contactList.card.workingHours") || "Giờ làm việc" }),
2578
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-main", style: { fontWeight: 600 }, children: contact.workingHours || t("contactList.card.defaultWorkingHours") || "T2-T6: 8:00-18:00" })
2778
2579
  ] })
2779
- ]
2780
- }
2781
- );
2782
- };
2783
- const ContactInfo = ({ icon, label, value, href, isDarkMode }) => {
2784
- if (!value) return null;
2785
- const content = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex items-center py-3 border-b ${isDarkMode ? "border-gray-600" : "border-gray-100"} last:border-b-0`, children: [
2786
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-lg mr-3 w-6 text-center", children: icon }),
2787
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
2788
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-sm ${isDarkMode ? "text-gray-400" : "text-gray-600"} mb-0.5`, children: label }),
2789
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-base font-medium ${href ? `${isDarkMode ? "text-blue-400 hover:text-blue-300" : "text-blue-500 hover:text-blue-600"}` : `${isDarkMode ? "text-white" : "text-gray-900"}`} transition-colors duration-200`, children: value })
2580
+ ] })
2790
2581
  ] })
2791
2582
  ] });
2792
- if (href) {
2793
- return /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href, className: `no-underline text-inherit block ${isDarkMode ? "hover:bg-gray-700/50" : "hover:bg-gray-50"} rounded-lg -mx-2 px-2 transition-colors duration-200`, children: content });
2794
- }
2795
- return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "-mx-2 px-2", children: content });
2796
2583
  };
2797
2584
  const CustomerFeedbackAutoSection = ({ data, t, isDarkMode, loadCustomerFeedback, section }) => {
2798
2585
  const [feedbacks, setFeedbacks] = useState([]);
@@ -2876,7 +2663,7 @@ const CustomerFeedbackAutoSection = ({ data, t, isDarkMode, loadCustomerFeedback
2876
2663
  /* @__PURE__ */ jsxRuntimeExports.jsxs(
2877
2664
  "div",
2878
2665
  {
2879
- 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"}`,
2666
+ className: "\r\n inline-block px-4 py-2 rounded-full text-lg font-semibold mb-4 \r\n border shadow-sm \r\n section-badge\r\n ",
2880
2667
  children: [
2881
2668
  "💬 ",
2882
2669
  sectionTitle
@@ -2887,37 +2674,19 @@ const CustomerFeedbackAutoSection = ({ data, t, isDarkMode, loadCustomerFeedback
2887
2674
  /* @__PURE__ */ jsxRuntimeExports.jsxs(
2888
2675
  "div",
2889
2676
  {
2890
- className: `p-6 rounded-2xl transition-all duration-500 transform ${isDarkMode ? "bg-gray-800/80 backdrop-blur-sm border border-gray-700" : "bg-white shadow-lg"}`,
2677
+ className: "card",
2891
2678
  children: [
2892
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
2893
- "blockquote",
2894
- {
2895
- className: `text-lg lg:text-xl italic mb-6 animate-fadeIn transition-colors duration-200 leading-relaxed ${isDarkMode ? "text-gray-300" : "text-gray-700"}`,
2896
- children: [
2897
- '"',
2898
- currentFeedback.content,
2899
- '"'
2900
- ]
2901
- }
2902
- ),
2903
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center space-x-4 animate-fadeIn", children: [
2679
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("blockquote", { className: "card-text text-lg lg:text-xl italic mb-6 leading-relaxed", children: [
2680
+ '"',
2681
+ currentFeedback.content,
2682
+ '"'
2683
+ ] }),
2684
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center space-x-4", children: [
2904
2685
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-3xl", children: "👤" }),
2905
2686
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-left", children: [
2906
- /* @__PURE__ */ jsxRuntimeExports.jsx(
2907
- "div",
2908
- {
2909
- className: `font-bold text-base transition-colors duration-200 ${isDarkMode ? "text-white" : "text-gray-900"}`,
2910
- children: currentFeedback.customerName
2911
- }
2912
- ),
2913
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-blue-600 font-medium text-sm", children: currentFeedback.customerTitle }),
2914
- currentFeedback.customerCompany && /* @__PURE__ */ jsxRuntimeExports.jsx(
2915
- "div",
2916
- {
2917
- className: `text-xs transition-colors duration-200 ${isDarkMode ? "text-gray-400" : "text-gray-600"}`,
2918
- children: currentFeedback.customerCompany
2919
- }
2920
- )
2687
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-title text-base mb-1", children: currentFeedback.customerName }),
2688
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-link text-sm", children: currentFeedback.customerTitle }),
2689
+ currentFeedback.customerCompany && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-text text-xs mt-1", children: currentFeedback.customerCompany })
2921
2690
  ] })
2922
2691
  ] })
2923
2692
  ]
@@ -2928,8 +2697,11 @@ const CustomerFeedbackAutoSection = ({ data, t, isDarkMode, loadCustomerFeedback
2928
2697
  "button",
2929
2698
  {
2930
2699
  onClick: () => setCurrentIndex(index2),
2931
- className: `w-2.5 h-2.5 rounded-full transition-all duration-300 ${index2 === currentIndex ? "bg-blue-600" : isDarkMode ? "bg-gray-600 hover:bg-gray-500" : "bg-gray-300 hover:bg-gray-400"}`,
2932
- "aria-label": t("customerFeedback.switchToFeedback", { number: index2 + 1 }) || `Chuyển đến phản hồi ${index2 + 1}`
2700
+ "aria-label": t("customerFeedback.switchToFeedback", { number: index2 + 1 }) || `Chuyển đến phản hồi ${index2 + 1}`,
2701
+ className: `
2702
+ w-2.5 h-2.5 rounded-full transition-all duration-300
2703
+ ${index2 === currentIndex ? "bg-brand-secondary" : "bg-surface hover:bg-brand-primary"}
2704
+ `
2933
2705
  },
2934
2706
  index2
2935
2707
  )) })
@@ -3183,28 +2955,12 @@ const TextWithTitleSection = ({ section, data, isDarkMode }) => {
3183
2955
  const textItems = (data == null ? void 0 : data.sectionDataBindingItems) || [];
3184
2956
  const title = ((_a = textItems[0]) == null ? void 0 : _a.value) || "";
3185
2957
  const descriptions = textItems.slice(1);
3186
- return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { maxWidth: "1200px", margin: "0 auto" }, children: [
3187
- title && /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { style: {
3188
- fontSize: "36px",
3189
- fontWeight: "700",
3190
- color: isDarkMode ? "#ffffff" : "#000000",
3191
- marginBottom: "16px",
3192
- lineHeight: "1.2",
3193
- textAlign: "left",
3194
- fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
3195
- }, children: title }),
2958
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-6xl mx-auto", children: [
2959
+ title && /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-title font-black mb-4 leading-tight text-left text-main", children: title }),
3196
2960
  descriptions.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
3197
2961
  "div",
3198
2962
  {
3199
- style: {
3200
- fontSize: "16px",
3201
- lineHeight: "1.6",
3202
- color: isDarkMode ? "#9ca3af" : "#6b7280",
3203
- textAlign: "left",
3204
- fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
3205
- fontWeight: "400",
3206
- marginBottom: index2 < descriptions.length - 1 ? "16px" : "0"
3207
- },
2963
+ className: `text-body leading-relaxed text-left font-normal text-muted ${index2 < descriptions.length - 1 ? "mb-4" : ""}`,
3208
2964
  children: item.value
3209
2965
  },
3210
2966
  item.id || index2
@@ -3213,19 +2969,10 @@ const TextWithTitleSection = ({ section, data, isDarkMode }) => {
3213
2969
  };
3214
2970
  const TextSection = ({ data, isDarkMode }) => {
3215
2971
  const textItems = (data == null ? void 0 : data.sectionDataBindingItems) || [];
3216
- return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { maxWidth: "800px", margin: "0 auto" }, children: textItems.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
2972
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { isDarkMode, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-3xl mx-auto", children: textItems.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
3217
2973
  "div",
3218
2974
  {
3219
- style: {
3220
- padding: "0",
3221
- marginBottom: "20px",
3222
- fontSize: "28px",
3223
- fontWeight: "700",
3224
- lineHeight: "1.3",
3225
- color: isDarkMode ? "#f9fafb" : "#111827",
3226
- textAlign: "left",
3227
- fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
3228
- },
2975
+ className: "mb-5 text-subtitle font-black leading-snug text-left text-main",
3229
2976
  children: item.value
3230
2977
  },
3231
2978
  item.id || index2
@@ -3272,25 +3019,23 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
3272
3019
  };
3273
3020
  return icons[iconName] || Settings;
3274
3021
  };
3275
- const getColorClasses = (index2) => {
3022
+ const getColorStyles = (index2) => {
3276
3023
  const isCyan = index2 % 2 === 0;
3277
3024
  if (isCyan) {
3278
3025
  return {
3279
- border: "border-cyan-400/40",
3280
- bg: "bg-gradient-to-r from-blue-900/90 to-cyan-900/90",
3281
- glow: "shadow-cyan-500/20",
3282
- hoverGlow: "hover:shadow-cyan-400/50",
3283
- line: "#22d3ee",
3284
- iconBg: "bg-cyan-500/20"
3026
+ gradient: "linear-gradient(to right, var(--gradient-brand-soft-start), var(--gradient-brand-soft-end))",
3027
+ border: "var(--gradient-brand-soft-start)",
3028
+ line: "var(--gradient-brand-soft-start)",
3029
+ iconBg: "var(--gradient-brand-soft-start)",
3030
+ shadow: "rgba(59, 130, 246, 0.2)"
3285
3031
  };
3286
3032
  }
3287
3033
  return {
3288
- border: "border-purple-400/40",
3289
- bg: "bg-gradient-to-r from-purple-900/90 to-pink-900/90",
3290
- glow: "shadow-purple-500/20",
3291
- hoverGlow: "hover:shadow-purple-400/50",
3292
- line: "#c084fc",
3293
- iconBg: "bg-purple-500/20"
3034
+ gradient: "linear-gradient(to right, var(--gradient-accent-soft-start), var(--gradient-accent-soft-end))",
3035
+ border: "var(--gradient-accent-soft-start)",
3036
+ line: "var(--gradient-accent-soft-start)",
3037
+ iconBg: "var(--gradient-accent-soft-start)",
3038
+ shadow: "rgba(139, 92, 246, 0.2)"
3294
3039
  };
3295
3040
  };
3296
3041
  const calculateAngles = (count) => {
@@ -3300,12 +3045,13 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
3300
3045
  };
3301
3046
  const angles = calculateAngles(modules.length);
3302
3047
  if (isMobile) {
3303
- return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `w-full ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-950 to-purple-950" : "bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50"} p-4 relative overflow-hidden`, children: [
3048
+ return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full p-4 relative overflow-hidden bg-section-soft", children: [
3304
3049
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 overflow-hidden pointer-events-none opacity-20", children: [...Array(50)].map((_, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
3305
3050
  "div",
3306
3051
  {
3307
- className: `absolute ${isDarkMode ? "bg-blue-400" : "bg-blue-600"} rounded-full opacity-20`,
3052
+ className: "absolute rounded-full bg-brand-primary",
3308
3053
  style: {
3054
+ opacity: 0.2,
3309
3055
  width: Math.random() * 3 + 1 + "px",
3310
3056
  height: Math.random() * 3 + 1 + "px",
3311
3057
  top: Math.random() * 100 + "%",
@@ -3326,26 +3072,38 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
3326
3072
  to { opacity: 1; transform: translateY(0); }
3327
3073
  }
3328
3074
  ` }),
3329
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `mb-6 ${isDarkMode ? "bg-gradient-to-br from-blue-900/90 via-blue-700/90 to-cyan-600/90" : "bg-gradient-to-br from-blue-600 via-indigo-600 to-cyan-500"} backdrop-blur-md rounded-2xl border-2 ${isDarkMode ? "border-cyan-400/40" : "border-white/40"} p-6 shadow-2xl text-center`, children: [
3330
- /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-2xl font-bold text-white mb-1 tracking-wide", children: diagramName }),
3331
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-lg text-white/90", children: diagramDescription })
3075
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-6 backdrop-blur-md rounded-2xl border-2 p-6 shadow-2xl text-center bg-gradient-brand border-brand-primary", children: [
3076
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-title text-inverse mb-1 tracking-wide", children: diagramName }),
3077
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-inverse", children: diagramDescription })
3332
3078
  ] }),
3333
3079
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3", children: modules.map((module, index2) => {
3334
3080
  const Icon2 = getIconComponent(module.icon);
3335
- const colors = getColorClasses(index2);
3081
+ const colors = getColorStyles(index2);
3336
3082
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
3337
3083
  "a",
3338
3084
  {
3339
3085
  href: module.url || "#",
3340
- className: `block ${colors.bg} backdrop-blur-md rounded-2xl border-2 ${colors.border} p-4 flex items-center gap-3 shadow-lg active:scale-95 transition-all duration-200`,
3086
+ className: "block backdrop-blur-md rounded-2xl border-2 p-4 flex items-center gap-3 shadow-lg active:scale-95 transition-all duration-200",
3341
3087
  style: {
3088
+ background: colors.gradient,
3089
+ borderColor: colors.border,
3342
3090
  animation: `slideUp 0.5s ease-out ${index2 * 0.1}s both`
3343
3091
  },
3344
3092
  children: [
3345
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex-shrink-0 ${colors.iconBg} p-3 rounded-xl ${colors.border} border`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-6 h-6 text-white", strokeWidth: 2 }) }),
3093
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
3094
+ "div",
3095
+ {
3096
+ className: "flex-shrink-0 p-3 rounded-xl border",
3097
+ style: {
3098
+ backgroundColor: `${colors.iconBg}33`,
3099
+ borderColor: colors.border
3100
+ },
3101
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-6 h-6 text-inverse", strokeWidth: 2 })
3102
+ }
3103
+ ),
3346
3104
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
3347
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block text-white font-semibold text-sm tracking-wide mb-1", children: module.name }),
3348
- module.description && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block text-white/70 text-xs", children: module.description })
3105
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block text-inverse text-small tracking-wide mb-1", children: module.name }),
3106
+ module.description && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block text-inverse text-caption", children: module.description })
3349
3107
  ] })
3350
3108
  ]
3351
3109
  },
@@ -3354,12 +3112,13 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
3354
3112
  }) })
3355
3113
  ] });
3356
3114
  }
3357
- return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `w-full ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-950 to-purple-950" : "bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50"} py-12 px-4 sm:px-8 relative overflow-hidden transition-colors duration-300`, children: [
3115
+ return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "section-wrapper w-full py-24 px-4 sm:px-8 relative overflow-visible bg-section-soft", children: [
3358
3116
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 overflow-hidden pointer-events-none", children: [...Array(100)].map((_, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
3359
3117
  "div",
3360
3118
  {
3361
- className: `absolute ${isDarkMode ? "bg-blue-400" : "bg-blue-600"} rounded-full ${isDarkMode ? "opacity-20" : "opacity-10"}`,
3119
+ className: "absolute rounded-full bg-brand-primary",
3362
3120
  style: {
3121
+ opacity: isDarkMode ? 0.2 : 0.1,
3363
3122
  width: Math.random() * 4 + 1 + "px",
3364
3123
  height: Math.random() * 4 + 1 + "px",
3365
3124
  top: Math.random() * 100 + "%",
@@ -3370,11 +3129,26 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
3370
3129
  },
3371
3130
  i
3372
3131
  )) }),
3373
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 ${isDarkMode ? "opacity-10" : "opacity-5"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", children: [
3374
- /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("pattern", { id: "grid", width: "40", height: "40", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M 40 0 L 0 0 0 40", fill: "none", stroke: isDarkMode ? "cyan" : "blue", strokeWidth: "0.5" }) }) }),
3375
- /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { width: "100%", height: "100%", fill: "url(#grid)" })
3376
- ] }) }),
3377
- /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: `absolute inset-0 w-full h-full pointer-events-none ${isDarkMode ? "opacity-30" : "opacity-20"}`, children: [
3132
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
3133
+ "div",
3134
+ {
3135
+ className: "absolute inset-0",
3136
+ style: { opacity: isDarkMode ? 0.1 : 0.05 },
3137
+ children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", children: [
3138
+ /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("pattern", { id: "grid", width: "40", height: "40", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
3139
+ "path",
3140
+ {
3141
+ d: "M 40 0 L 0 0 0 40",
3142
+ fill: "none",
3143
+ stroke: "var(--brand-primary)",
3144
+ strokeWidth: "0.5"
3145
+ }
3146
+ ) }) }),
3147
+ /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { width: "100%", height: "100%", fill: "url(#grid)" })
3148
+ ] })
3149
+ }
3150
+ ),
3151
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "absolute inset-0 w-full h-full pointer-events-none", style: { opacity: isDarkMode ? 0.3 : 0.2 }, children: [
3378
3152
  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "0", y1: "20%", x2: "100%", y2: "20%", stroke: "url(#grad1)", strokeWidth: "1", strokeDasharray: "10 5", className: "animate-pulse" }),
3379
3153
  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "0", y1: "40%", x2: "100%", y2: "40%", stroke: "url(#grad2)", strokeWidth: "1", strokeDasharray: "15 8", className: "animate-pulse", style: { animationDelay: "0.5s" } }),
3380
3154
  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "0", y1: "60%", x2: "100%", y2: "60%", stroke: "url(#grad1)", strokeWidth: "1", strokeDasharray: "12 6", className: "animate-pulse", style: { animationDelay: "1s" } }),
@@ -3383,20 +3157,20 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
3383
3157
  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "35%", y1: "0", x2: "35%", y2: "100%", stroke: "url(#grad2)", strokeWidth: "1", strokeDasharray: "15 8", className: "animate-pulse", style: { animationDelay: "0.8s" } }),
3384
3158
  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "65%", y1: "0", x2: "65%", y2: "100%", stroke: "url(#grad1)", strokeWidth: "1", strokeDasharray: "12 6", className: "animate-pulse", style: { animationDelay: "1.3s" } }),
3385
3159
  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "85%", y1: "0", x2: "85%", y2: "100%", stroke: "url(#grad2)", strokeWidth: "1", strokeDasharray: "8 4", className: "animate-pulse", style: { animationDelay: "1.8s" } }),
3386
- /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "15%", cy: "20%", r: "3", fill: "#22d3ee", opacity: "0.6", className: "animate-pulse" }),
3387
- /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "35%", cy: "40%", r: "3", fill: "#c084fc", opacity: "0.6", className: "animate-pulse", style: { animationDelay: "0.5s" } }),
3388
- /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "65%", cy: "60%", r: "3", fill: "#22d3ee", opacity: "0.6", className: "animate-pulse", style: { animationDelay: "1s" } }),
3389
- /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "85%", cy: "80%", r: "3", fill: "#c084fc", opacity: "0.6", className: "animate-pulse", style: { animationDelay: "1.5s" } }),
3160
+ /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "15%", cy: "20%", r: "3", fill: "var(--gradient-brand-soft-start)", opacity: "0.6", className: "animate-pulse" }),
3161
+ /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "35%", cy: "40%", r: "3", fill: "var(--gradient-accent-soft-start)", opacity: "0.6", className: "animate-pulse", style: { animationDelay: "0.5s" } }),
3162
+ /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "65%", cy: "60%", r: "3", fill: "var(--gradient-brand-soft-start)", opacity: "0.6", className: "animate-pulse", style: { animationDelay: "1s" } }),
3163
+ /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "85%", cy: "80%", r: "3", fill: "var(--gradient-accent-soft-start)", opacity: "0.6", className: "animate-pulse", style: { animationDelay: "1.5s" } }),
3390
3164
  /* @__PURE__ */ jsxRuntimeExports.jsxs("defs", { children: [
3391
3165
  /* @__PURE__ */ jsxRuntimeExports.jsxs("linearGradient", { id: "grad1", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
3392
- /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", style: { stopColor: "#22d3ee", stopOpacity: 0 } }),
3393
- /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "50%", style: { stopColor: "#22d3ee", stopOpacity: 1 } }),
3394
- /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", style: { stopColor: "#22d3ee", stopOpacity: 0 } })
3166
+ /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", style: { stopColor: "var(--gradient-brand-soft-start)", stopOpacity: 0 } }),
3167
+ /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "50%", style: { stopColor: "var(--gradient-brand-soft-start)", stopOpacity: 1 } }),
3168
+ /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", style: { stopColor: "var(--gradient-brand-soft-start)", stopOpacity: 0 } })
3395
3169
  ] }),
3396
3170
  /* @__PURE__ */ jsxRuntimeExports.jsxs("linearGradient", { id: "grad2", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
3397
- /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", style: { stopColor: "#c084fc", stopOpacity: 0 } }),
3398
- /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "50%", style: { stopColor: "#c084fc", stopOpacity: 1 } }),
3399
- /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", style: { stopColor: "#c084fc", stopOpacity: 0 } })
3171
+ /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", style: { stopColor: "var(--gradient-accent-soft-start)", stopOpacity: 0 } }),
3172
+ /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "50%", style: { stopColor: "var(--gradient-accent-soft-start)", stopOpacity: 1 } }),
3173
+ /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", style: { stopColor: "var(--gradient-accent-soft-start)", stopOpacity: 0 } })
3400
3174
  ] })
3401
3175
  ] })
3402
3176
  ] }),
@@ -3457,41 +3231,77 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
3457
3231
  }
3458
3232
  }
3459
3233
  ` }),
3460
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "diagram-container relative w-full max-w-5xl mx-auto h-[700px] flex items-center justify-center transition-transform duration-300", children: [
3234
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "diagram-container relative w-full max-w-5xl mx-auto h-[800px] flex items-center justify-center transition-transform duration-300", style: { paddingTop: "80px", paddingBottom: "80px" }, children: [
3461
3235
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", children: [
3462
3236
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute inset-0 w-[320px] h-[320px] -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2", children: [
3463
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 rounded-full border-2 border-cyan-500/30 animate-pulse-ring" }),
3464
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-4 rounded-full border-2 border-purple-500/30 animate-pulse-ring", style: { animationDelay: "0.5s" } })
3237
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
3238
+ "div",
3239
+ {
3240
+ className: "absolute inset-0 rounded-full border-2 animate-pulse-ring",
3241
+ style: { borderColor: "var(--brand-primary)", opacity: 0.3 }
3242
+ }
3243
+ ),
3244
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
3245
+ "div",
3246
+ {
3247
+ className: "absolute inset-4 rounded-full border-2 animate-pulse-ring",
3248
+ style: {
3249
+ borderColor: "var(--brand-secondary)",
3250
+ opacity: 0.3,
3251
+ animationDelay: "0.5s"
3252
+ }
3253
+ }
3254
+ )
3465
3255
  ] }),
3466
3256
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative animate-float", children: [
3467
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `w-64 h-64 rounded-full border-8 ${isDarkMode ? "border-slate-600/50 bg-gradient-to-br from-slate-800/50 to-slate-900/50" : "border-gray-300/50 bg-gradient-to-br from-white/50 to-gray-100/50"} flex items-center justify-center backdrop-blur-sm shadow-2xl`, children: [
3468
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 rounded-full", style: { animation: "rotate 20s linear infinite" }, children: [0, 90, 180, 270].map((angle) => /* @__PURE__ */ jsxRuntimeExports.jsx(
3469
- "div",
3470
- {
3471
- className: "absolute w-3 h-3 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50",
3472
- style: {
3473
- top: "50%",
3474
- left: "50%",
3475
- transform: `translate(-50%, -50%) rotate(${angle}deg) translateY(-125px)`
3476
- }
3257
+ /* @__PURE__ */ jsxRuntimeExports.jsxs(
3258
+ "div",
3259
+ {
3260
+ className: "w-64 h-64 rounded-full border-8 flex items-center justify-center backdrop-blur-sm shadow-2xl bg-surface",
3261
+ style: {
3262
+ borderColor: "var(--border-color)"
3477
3263
  },
3478
- angle
3479
- )) }),
3480
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `w-52 h-52 rounded-full ${isDarkMode ? "bg-gradient-to-br from-blue-900/90 via-blue-700/90 to-cyan-600/90 border-cyan-400/40" : "bg-gradient-to-br from-blue-600 via-indigo-600 to-cyan-500 border-white/40"} flex items-center justify-center shadow-2xl relative overflow-hidden border-2 backdrop-blur-md`, children: [
3481
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-white/10 to-transparent" }),
3482
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center relative z-10 px-4", children: [
3483
- /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-2xl font-bold text-white mb-2 tracking-wide", children: diagramName }),
3484
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-white/90", children: diagramDescription })
3485
- ] })
3486
- ] })
3487
- ] }),
3264
+ children: [
3265
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 rounded-full", style: { animation: "rotate 20s linear infinite" }, children: [0, 90, 180, 270].map((angle) => /* @__PURE__ */ jsxRuntimeExports.jsx(
3266
+ "div",
3267
+ {
3268
+ className: "absolute w-3 h-3 rounded-full shadow-lg bg-brand-primary",
3269
+ style: {
3270
+ boxShadow: "0 0 10px var(--brand-primary)",
3271
+ top: "50%",
3272
+ left: "50%",
3273
+ transform: `translate(-50%, -50%) rotate(${angle}deg) translateY(-125px)`
3274
+ }
3275
+ },
3276
+ angle
3277
+ )) }),
3278
+ /* @__PURE__ */ jsxRuntimeExports.jsxs(
3279
+ "div",
3280
+ {
3281
+ className: "w-52 h-52 rounded-full flex items-center justify-center shadow-2xl relative overflow-hidden border-2 backdrop-blur-md bg-gradient-brand",
3282
+ style: {
3283
+ borderColor: isDarkMode ? "var(--gradient-brand-soft-start)" : "rgba(255, 255, 255, 0.4)"
3284
+ },
3285
+ children: [
3286
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-white/10 to-transparent" }),
3287
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center relative z-10 px-4", children: [
3288
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-title text-inverse mb-2 tracking-wide", children: diagramName }),
3289
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small text-inverse", children: diagramDescription })
3290
+ ] })
3291
+ ]
3292
+ }
3293
+ )
3294
+ ]
3295
+ }
3296
+ ),
3488
3297
  modules.map((module, i) => {
3489
3298
  const angle = angles[i];
3490
3299
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
3491
3300
  "div",
3492
3301
  {
3493
- className: `absolute w-4 h-4 ${isDarkMode ? "bg-slate-400 border-slate-600" : "bg-gray-400 border-gray-600"} rounded-full border-2 shadow-lg animate-pulse`,
3302
+ className: "absolute w-4 h-4 rounded-full border-2 shadow-lg animate-pulse bg-muted",
3494
3303
  style: {
3304
+ borderColor: "var(--border-color)",
3495
3305
  top: "50%",
3496
3306
  left: "50%",
3497
3307
  transform: `translate(-50%, -50%) rotate(${angle}deg) translateY(-132px)`,
@@ -3504,7 +3314,7 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
3504
3314
  ] })
3505
3315
  ] }),
3506
3316
  /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none", width: "1000", height: "900", style: { overflow: "visible" }, children: modules.map((module, index2) => {
3507
- const colors = getColorClasses(index2);
3317
+ const colors = getColorStyles(index2);
3508
3318
  const angle = angles[index2] * Math.PI / 180;
3509
3319
  const circleRadius = 132;
3510
3320
  const moduleRadius = 360;
@@ -3545,7 +3355,7 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
3545
3355
  }) }),
3546
3356
  modules.map((module, index2) => {
3547
3357
  const Icon2 = getIconComponent(module.icon);
3548
- const colors = getColorClasses(index2);
3358
+ const colors = getColorStyles(index2);
3549
3359
  const angle = angles[index2] * Math.PI / 180;
3550
3360
  const radius = 360;
3551
3361
  const x = Math.cos(angle) * radius;
@@ -3567,19 +3377,11 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
3567
3377
  children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
3568
3378
  "div",
3569
3379
  {
3570
- className: `
3571
- ${colors.bg} backdrop-blur-md rounded-full
3572
- border-2 ${colors.border} ${colors.glow}
3573
- px-5 py-3 flex items-center gap-3
3574
- shadow-xl ${colors.hoverGlow}
3575
- transition-all duration-300
3576
- group-hover:scale-110 group-hover:-translate-y-3 group-hover:shadow-2xl
3577
- cursor-pointer
3578
- relative
3579
- ${isRightSide ? "flex-row-reverse" : "flex-row"}
3580
- `,
3380
+ className: `backdrop-blur-md rounded-full border-2 px-5 py-3 flex items-center gap-3 shadow-xl transition-all duration-300 group-hover:scale-110 group-hover:-translate-y-3 group-hover:shadow-2xl cursor-pointer relative ${isRightSide ? "flex-row-reverse" : "flex-row"}`,
3581
3381
  style: {
3582
- boxShadow: "0 10px 40px rgba(0, 0, 0, 0.3)",
3382
+ background: colors.gradient,
3383
+ borderColor: colors.border,
3384
+ boxShadow: `0 10px 40px ${colors.shadow}`,
3583
3385
  width: "240px",
3584
3386
  height: "56px",
3585
3387
  minWidth: "240px",
@@ -3587,14 +3389,49 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
3587
3389
  },
3588
3390
  children: [
3589
3391
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 rounded-full bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" }),
3590
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 rounded-full border-2 ${colors.border} opacity-0 group-hover:opacity-100 transition-all duration-300 scale-110 blur-sm` }),
3591
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex-shrink-0 ${colors.iconBg} p-2.5 rounded-lg ${colors.border} border transition-all duration-300 group-hover:rotate-12 group-hover:scale-125 relative z-10`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-5 h-5 text-white", strokeWidth: 2 }) }),
3592
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `flex-1 text-white font-semibold text-sm tracking-wide overflow-hidden text-ellipsis whitespace-nowrap ${isRightSide ? "text-right" : "text-left"} relative z-10 min-w-0`, children: module.name }),
3593
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-4 py-2 ${isDarkMode ? "bg-slate-800 border-slate-600" : "bg-white border-gray-300"} ${isDarkMode ? "text-white" : "text-gray-800"} text-sm rounded-lg shadow-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50 border max-w-xs`, children: [
3594
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold", children: module.name }),
3595
- module.description && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-xs mt-1 ${isDarkMode ? "text-gray-300" : "text-gray-600"}`, children: module.description }),
3596
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent ${isDarkMode ? "border-t-slate-800" : "border-t-white"}` })
3597
- ] })
3392
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
3393
+ "div",
3394
+ {
3395
+ className: "absolute inset-0 rounded-full border-2 opacity-0 group-hover:opacity-100 transition-all duration-300 scale-110 blur-sm",
3396
+ style: { borderColor: colors.border }
3397
+ }
3398
+ ),
3399
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
3400
+ "div",
3401
+ {
3402
+ className: "flex-shrink-0 p-2.5 rounded-lg border transition-all duration-300 group-hover:rotate-12 group-hover:scale-125 relative z-10",
3403
+ style: {
3404
+ backgroundColor: `${colors.iconBg}33`,
3405
+ borderColor: colors.border
3406
+ },
3407
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-5 h-5 text-inverse", strokeWidth: 2 })
3408
+ }
3409
+ ),
3410
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `flex-1 text-inverse text-small tracking-wide overflow-hidden text-ellipsis whitespace-nowrap ${isRightSide ? "text-right" : "text-left"} relative z-10 min-w-0`, children: module.name }),
3411
+ /* @__PURE__ */ jsxRuntimeExports.jsxs(
3412
+ "div",
3413
+ {
3414
+ className: `absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-4 py-2 rounded-lg shadow-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50 border max-w-xs ${isDarkMode ? "bg-surface" : "bg-body"}`,
3415
+ style: {
3416
+ borderColor: "var(--border-color)",
3417
+ maxHeight: "120px",
3418
+ overflowY: "auto"
3419
+ },
3420
+ children: [
3421
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-small text-main", children: module.name }),
3422
+ module.description && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-caption text-muted mt-1", children: module.description }),
3423
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
3424
+ "div",
3425
+ {
3426
+ className: "absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent",
3427
+ style: {
3428
+ borderTopColor: isDarkMode ? "var(--bg-surface)" : "var(--bg-body)"
3429
+ }
3430
+ }
3431
+ )
3432
+ ]
3433
+ }
3434
+ )
3598
3435
  ]
3599
3436
  }
3600
3437
  )
@@ -3602,24 +3439,82 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
3602
3439
  module.id
3603
3440
  );
3604
3441
  }),
3605
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-12 right-12 sm:bottom-16 sm:right-20", style: { animation: "rotate 10s linear infinite" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "80", height: "80", viewBox: "0 0 60 60", className: `${isDarkMode ? "text-purple-300" : "text-purple-400"} opacity-40`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M30 0 L35 25 L60 30 L35 35 L30 60 L25 35 L0 30 L25 25 Z", fill: "currentColor" }) }) }),
3606
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-12 left-12 w-16 h-16 border-2 border-cyan-400/30 rounded-lg animate-pulse", style: { animation: "rotate 8s linear infinite reverse" } }),
3607
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-20 right-16 w-12 h-12 border-2 border-purple-400/30 rounded-full animate-pulse" })
3442
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
3443
+ "div",
3444
+ {
3445
+ className: "absolute bottom-12 right-12 sm:bottom-16 sm:right-20 opacity-40 text-brand-secondary",
3446
+ style: { animation: "rotate 10s linear infinite" },
3447
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "80", height: "80", viewBox: "0 0 60 60", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M30 0 L35 25 L60 30 L35 35 L30 60 L25 35 L0 30 L25 25 Z", fill: "currentColor" }) })
3448
+ }
3449
+ ),
3450
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
3451
+ "div",
3452
+ {
3453
+ className: "absolute top-12 left-12 w-16 h-16 border-2 rounded-lg animate-pulse border-brand-primary",
3454
+ style: {
3455
+ opacity: 0.3,
3456
+ animation: "rotate 8s linear infinite reverse"
3457
+ }
3458
+ }
3459
+ ),
3460
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
3461
+ "div",
3462
+ {
3463
+ className: "absolute top-20 right-16 w-12 h-12 border-2 rounded-full animate-pulse border-brand-secondary",
3464
+ style: {
3465
+ opacity: 0.3
3466
+ }
3467
+ }
3468
+ )
3608
3469
  ] })
3609
3470
  ] });
3610
3471
  };
3611
- const MindMapNode = ({ id, icon: Icon2, text, color, position, delay = 0, onDragStart, isDragging, onClick, description }) => {
3472
+ const MindMapNode = ({ id, icon: Icon2, text, color, position, delay = 0, onDragStart, isDragging, onClick, description, isDarkMode }) => {
3612
3473
  const [isHovered, setIsHovered] = useState(false);
3613
3474
  const [dragStartPos, setDragStartPos] = useState(null);
3614
3475
  const [hasMoved, setHasMoved] = useState(false);
3615
- const colorClasses = {
3616
- blue: "bg-gradient-to-br from-blue-600 to-blue-700 hover:from-blue-500 hover:to-blue-600 border-blue-400/50 shadow-blue-500/30",
3617
- teal: "bg-gradient-to-br from-teal-600 to-teal-700 hover:from-teal-500 hover:to-teal-600 border-teal-400/50 shadow-teal-500/30",
3618
- purple: "bg-gradient-to-br from-purple-600 to-purple-700 hover:from-purple-500 hover:to-purple-600 border-purple-400/50 shadow-purple-500/30",
3619
- orange: "bg-gradient-to-br from-orange-500 to-orange-600 hover:from-orange-400 hover:to-orange-500 border-orange-300/50 shadow-orange-500/30",
3620
- cyan: "bg-gradient-to-br from-cyan-600 to-cyan-700 hover:from-cyan-500 hover:to-cyan-600 border-cyan-400/50 shadow-cyan-500/30",
3621
- indigo: "bg-gradient-to-br from-indigo-600 to-indigo-700 hover:from-indigo-500 hover:to-indigo-600 border-indigo-400/50 shadow-indigo-500/30"
3476
+ const getColorStyles = (colorName) => {
3477
+ const styles = {
3478
+ blue: {
3479
+ gradient: "linear-gradient(to bottom right, var(--brand-primary), var(--brand-primary))",
3480
+ gradientHover: "linear-gradient(to bottom right, var(--gradient-brand-soft-start), var(--gradient-brand-soft-end))",
3481
+ border: "var(--brand-primary)",
3482
+ shadowColor: "var(--brand-primary)"
3483
+ },
3484
+ teal: {
3485
+ gradient: "linear-gradient(to bottom right, var(--gradient-brand-soft-start), var(--gradient-brand-soft-end))",
3486
+ gradientHover: "linear-gradient(to bottom right, var(--gradient-brand-strong-start), var(--gradient-brand-strong-end))",
3487
+ border: "var(--gradient-brand-soft-start)",
3488
+ shadowColor: "var(--gradient-brand-soft-start)"
3489
+ },
3490
+ purple: {
3491
+ gradient: "linear-gradient(to bottom right, var(--brand-secondary), var(--gradient-accent-soft-start))",
3492
+ gradientHover: "linear-gradient(to bottom right, var(--gradient-accent-soft-start), var(--gradient-accent-soft-end))",
3493
+ border: "var(--brand-secondary)",
3494
+ shadowColor: "var(--brand-secondary)"
3495
+ },
3496
+ orange: {
3497
+ gradient: "linear-gradient(to bottom right, var(--gradient-accent-strong-start), var(--gradient-accent-strong-end))",
3498
+ gradientHover: "linear-gradient(to bottom right, var(--gradient-accent-soft-start), var(--gradient-accent-soft-end))",
3499
+ border: "var(--gradient-accent-strong-start)",
3500
+ shadowColor: "var(--gradient-accent-strong-start)"
3501
+ },
3502
+ cyan: {
3503
+ gradient: "linear-gradient(to bottom right, var(--gradient-brand-strong-start), var(--gradient-brand-strong-end))",
3504
+ gradientHover: "linear-gradient(to bottom right, var(--gradient-brand-soft-start), var(--gradient-brand-soft-end))",
3505
+ border: "var(--gradient-brand-strong-start)",
3506
+ shadowColor: "var(--gradient-brand-strong-start)"
3507
+ },
3508
+ indigo: {
3509
+ gradient: "linear-gradient(to bottom right, var(--gradient-accent-soft-start), var(--gradient-accent-soft-end))",
3510
+ gradientHover: "linear-gradient(to bottom right, var(--gradient-accent-strong-start), var(--gradient-accent-strong-end))",
3511
+ border: "var(--gradient-accent-soft-start)",
3512
+ shadowColor: "var(--gradient-accent-soft-start)"
3513
+ }
3514
+ };
3515
+ return styles[colorName] || styles.blue;
3622
3516
  };
3517
+ const colorStyle = getColorStyles(color);
3623
3518
  const handleMouseDown = (e) => {
3624
3519
  setDragStartPos({ x: e.clientX, y: e.clientY });
3625
3520
  setHasMoved(false);
@@ -3702,12 +3597,45 @@ const MindMapNode = ({ id, icon: Icon2, text, color, position, delay = 0, onDrag
3702
3597
  onTouchMove: handleTouchMove,
3703
3598
  onTouchEnd: handleTouchEnd,
3704
3599
  children: [
3705
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${colorClasses[color]} backdrop-blur-md px-4 py-2.5 rounded-2xl shadow-2xl border-2 flex items-center gap-2.5 cursor-pointer transform transition-all duration-300 ${isHovered || isDragging ? "scale-110 shadow-2xl brightness-110" : ""} ${isDragging ? "rotate-2" : ""}`, children: [
3706
- /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-4 h-4 text-white flex-shrink-0" }),
3707
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white font-medium whitespace-nowrap text-xs sm:text-sm", children: text })
3708
- ] }),
3709
- isDragging && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-white/10 rounded-2xl blur-xl animate-pulse", style: { transform: "scale(1.5)" } }),
3710
- (isHovered || isDragging) && description && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 mt-2 px-3 py-2 bg-slate-900/95 text-white text-xs rounded-lg shadow-xl border border-slate-700 whitespace-nowrap z-50 max-w-xs", children: description })
3600
+ /* @__PURE__ */ jsxRuntimeExports.jsxs(
3601
+ "div",
3602
+ {
3603
+ className: "backdrop-blur-md px-4 py-2.5 rounded-2xl shadow-2xl border-2 flex items-center gap-2.5 cursor-pointer transform transition-all duration-300",
3604
+ style: {
3605
+ background: isHovered || isDragging ? colorStyle.gradientHover : colorStyle.gradient,
3606
+ borderColor: colorStyle.border + "80",
3607
+ boxShadow: `0 10px 40px ${colorStyle.shadowColor}4D`,
3608
+ transform: isHovered || isDragging ? "scale(1.1)" : "scale(1)",
3609
+ filter: isHovered || isDragging ? "brightness(1.1)" : "brightness(1)",
3610
+ rotate: isDragging ? "2deg" : "0deg"
3611
+ },
3612
+ children: [
3613
+ /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-4 h-4 flex-shrink-0 text-inverse" }),
3614
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-inverse text-small whitespace-nowrap", children: text })
3615
+ ]
3616
+ }
3617
+ ),
3618
+ isDragging && /* @__PURE__ */ jsxRuntimeExports.jsx(
3619
+ "div",
3620
+ {
3621
+ className: "absolute inset-0 rounded-2xl blur-xl animate-pulse",
3622
+ style: {
3623
+ background: "rgba(255, 255, 255, 0.1)",
3624
+ transform: "scale(1.5)"
3625
+ }
3626
+ }
3627
+ ),
3628
+ (isHovered || isDragging) && description && /* @__PURE__ */ jsxRuntimeExports.jsx(
3629
+ "div",
3630
+ {
3631
+ className: `absolute top-full left-1/2 -translate-x-1/2 mt-2 px-3 py-2 text-caption rounded-lg shadow-xl border whitespace-nowrap z-50 max-w-xs ${isDarkMode ? "bg-surface text-inverse" : "bg-body text-main"}`,
3632
+ style: {
3633
+ borderColor: "var(--border-color)",
3634
+ opacity: 0.95
3635
+ },
3636
+ children: description
3637
+ }
3638
+ )
3711
3639
  ]
3712
3640
  }
3713
3641
  );
@@ -3928,49 +3856,108 @@ const DiagramSection2 = ({ data, t, isDarkMode }) => {
3928
3856
  "div",
3929
3857
  {
3930
3858
  ref: containerRef,
3931
- className: `mind-map-container relative w-full h-screen ${isDarkMode ? "bg-gradient-to-br from-slate-950 via-indigo-950 to-purple-950" : "bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50"} overflow-hidden transition-colors duration-300`,
3932
- style: { touchAction: "none" },
3859
+ className: "mind-map-container relative w-full h-screen overflow-hidden bg-section-soft",
3860
+ style: {
3861
+ touchAction: "none"
3862
+ },
3933
3863
  children: [
3934
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `absolute inset-0 ${isDarkMode ? "opacity-30" : "opacity-20"}`, children: [
3935
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 ${isDarkMode ? "bg-gradient-to-tr from-blue-600/20 via-purple-600/20 to-pink-600/20" : "bg-gradient-to-tr from-blue-400/20 via-purple-400/20 to-pink-400/20"}` }),
3936
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-cyan-500/10 via-transparent to-transparent" }),
3937
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,_var(--tw-gradient-stops))] from-purple-500/10 via-transparent to-transparent" })
3938
- ] }),
3939
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 pointer-events-none ${isDarkMode ? "opacity-60" : "opacity-40"}`, children: [...Array(150)].map((_, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
3864
+ /* @__PURE__ */ jsxRuntimeExports.jsxs(
3865
+ "div",
3866
+ {
3867
+ className: "absolute inset-0",
3868
+ style: { opacity: isDarkMode ? 0.3 : 0.2 },
3869
+ children: [
3870
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
3871
+ "div",
3872
+ {
3873
+ className: "absolute inset-0 bg-gradient-brand",
3874
+ style: {
3875
+ opacity: 0.2
3876
+ }
3877
+ }
3878
+ ),
3879
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
3880
+ "div",
3881
+ {
3882
+ className: "absolute inset-0 bg-gradient-accent",
3883
+ style: {
3884
+ opacity: 0.1
3885
+ }
3886
+ }
3887
+ )
3888
+ ]
3889
+ }
3890
+ ),
3891
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
3892
+ "div",
3893
+ {
3894
+ className: "absolute inset-0 pointer-events-none",
3895
+ style: { opacity: isDarkMode ? 0.6 : 0.4 },
3896
+ children: [...Array(150)].map((_, i) => {
3897
+ const colors = ["bg-brand-primary", "bg-brand-secondary"];
3898
+ const randomColor = colors[Math.floor(Math.random() * colors.length)];
3899
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(
3900
+ "div",
3901
+ {
3902
+ className: `absolute rounded-full ${randomColor}`,
3903
+ style: {
3904
+ left: `${Math.random() * 100}%`,
3905
+ top: `${Math.random() * 100}%`,
3906
+ width: `${Math.random() * 3 + 1}px`,
3907
+ height: `${Math.random() * 3 + 1}px`,
3908
+ animationName: "twinkle",
3909
+ animationDelay: `${Math.random() * 5}s`,
3910
+ animationDuration: `${4 + Math.random() * 6}s`,
3911
+ animationIterationCount: "infinite",
3912
+ animationTimingFunction: "ease-in-out"
3913
+ }
3914
+ },
3915
+ i
3916
+ );
3917
+ })
3918
+ }
3919
+ ),
3920
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
3940
3921
  "div",
3941
3922
  {
3942
- className: "absolute rounded-full animate-twinkle",
3943
- style: {
3944
- left: `${Math.random() * 100}%`,
3945
- top: `${Math.random() * 100}%`,
3946
- width: `${Math.random() * 3 + 1}px`,
3947
- height: `${Math.random() * 3 + 1}px`,
3948
- background: isDarkMode ? ["#60a5fa", "#818cf8", "#a78bfa", "#c084fc", "#e879f9"][Math.floor(Math.random() * 5)] : ["#3b82f6", "#6366f1", "#8b5cf6", "#a855f7", "#d946ef"][Math.floor(Math.random() * 5)],
3949
- animationDelay: `${Math.random() * 5}s`,
3950
- animationDuration: `${4 + Math.random() * 6}s`
3951
- }
3952
- },
3953
- i
3954
- )) }),
3955
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 ${isDarkMode ? "opacity-10" : "opacity-5"} pointer-events-none`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0", style: {
3956
- backgroundImage: `radial-gradient(circle at 1px 1px, ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.1)"} 1px, transparent 0)`,
3957
- backgroundSize: "40px 40px"
3958
- } }) }),
3923
+ className: "absolute inset-0 pointer-events-none",
3924
+ style: { opacity: isDarkMode ? 0.1 : 0.05 },
3925
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(
3926
+ "div",
3927
+ {
3928
+ className: "absolute inset-0",
3929
+ style: {
3930
+ backgroundImage: isDarkMode ? "radial-gradient(circle at 1px 1px, var(--text-inverse) 1px, transparent 0)" : "radial-gradient(circle at 1px 1px, var(--text-main) 1px, transparent 0)",
3931
+ backgroundSize: "40px 40px",
3932
+ opacity: 0.15
3933
+ }
3934
+ }
3935
+ )
3936
+ }
3937
+ ),
3959
3938
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute right-4 sm:right-16 bottom-4 sm:bottom-16 z-0 pointer-events-none", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
3960
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-500/20 blur-3xl w-20 h-20 sm:w-32 sm:h-32" }),
3939
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
3940
+ "div",
3941
+ {
3942
+ className: "absolute inset-0 blur-3xl w-20 h-20 sm:w-32 sm:h-32 bg-gradient-brand",
3943
+ style: {
3944
+ opacity: 0.2
3945
+ }
3946
+ }
3947
+ ),
3961
3948
  /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "60", height: "60", viewBox: "0 0 80 80", className: "relative sm:w-24 sm:h-24", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M40 0 L45 35 L80 40 L45 45 L40 80 L35 45 L0 40 L35 35 Z", fill: "url(#sparkle-gradient)", opacity: "0.4" }) })
3962
3949
  ] }) }),
3963
3950
  /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "absolute inset-0 w-full h-full pointer-events-none", style: { zIndex: 1 }, children: [
3964
3951
  /* @__PURE__ */ jsxRuntimeExports.jsxs("defs", { children: [
3965
3952
  /* @__PURE__ */ jsxRuntimeExports.jsxs("linearGradient", { id: "circuit-gradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
3966
- /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", stopColor: "#60a5fa", stopOpacity: "0.6" }),
3967
- /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "50%", stopColor: "#a78bfa", stopOpacity: "0.9" }),
3968
- /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", stopColor: "#c084fc", stopOpacity: "0.6" })
3953
+ /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", style: { stopColor: "var(--brand-primary)", stopOpacity: 0.6 } }),
3954
+ /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "50%", style: { stopColor: "var(--gradient-brand-soft-start)", stopOpacity: 0.9 } }),
3955
+ /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", style: { stopColor: "var(--gradient-brand-soft-end)", stopOpacity: 0.6 } })
3969
3956
  ] }),
3970
3957
  /* @__PURE__ */ jsxRuntimeExports.jsxs("linearGradient", { id: "sparkle-gradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
3971
- /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", stopColor: "#60a5fa" }),
3972
- /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "50%", stopColor: "#a78bfa" }),
3973
- /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", stopColor: "#c084fc" })
3958
+ /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", style: { stopColor: "var(--brand-primary)" } }),
3959
+ /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "50%", style: { stopColor: "var(--gradient-brand-soft-start)" } }),
3960
+ /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", style: { stopColor: "var(--gradient-brand-soft-end)" } })
3974
3961
  ] }),
3975
3962
  /* @__PURE__ */ jsxRuntimeExports.jsxs("filter", { id: "glow", children: [
3976
3963
  /* @__PURE__ */ jsxRuntimeExports.jsx("feGaussianBlur", { stdDeviation: "4", result: "coloredBlur" }),
@@ -3985,11 +3972,11 @@ const DiagramSection2 = ({ data, t, isDarkMode }) => {
3985
3972
  "path",
3986
3973
  {
3987
3974
  d: line.path,
3988
- stroke: "rgba(167, 139, 250, 0.2)",
3975
+ stroke: "var(--gradient-brand-soft-start)",
3989
3976
  strokeWidth: "6",
3990
3977
  fill: "none",
3991
3978
  className: "transition-all duration-200",
3992
- style: { filter: "blur(8px)" }
3979
+ style: { filter: "blur(8px)", opacity: 0.2 }
3993
3980
  }
3994
3981
  ),
3995
3982
  /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -4021,7 +4008,8 @@ const DiagramSection2 = ({ data, t, isDarkMode }) => {
4021
4008
  delay: node.delay,
4022
4009
  onDragStart: handleNodeDragStart,
4023
4010
  isDragging: draggingNodeId === node.id,
4024
- onClick: handleNodeClick
4011
+ onClick: handleNodeClick,
4012
+ isDarkMode
4025
4013
  },
4026
4014
  node.id
4027
4015
  )) }),
@@ -4055,15 +4043,52 @@ const DiagramSection2 = ({ data, t, isDarkMode }) => {
4055
4043
  },
4056
4044
  onTouchEnd: () => setIsDragging(false),
4057
4045
  children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
4058
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-indigo-400/30 rounded-full blur-2xl", style: { transform: "scale(1.5)" } }),
4059
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `relative bg-gradient-to-br from-indigo-500 via-blue-500 to-cyan-500 px-6 sm:px-10 py-3 sm:py-5 rounded-3xl shadow-2xl border-4 border-indigo-300/50 flex items-center gap-3 sm:gap-4 transition-transform backdrop-blur-md ${isDragging ? "scale-110" : ""}`, children: [
4060
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-white/25 p-2 sm:p-3 rounded-xl backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Briefcase, { className: "w-5 h-5 sm:w-7 sm:h-7 text-white" }) }),
4061
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center", children: [
4062
- /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-white font-bold text-sm sm:text-xl leading-tight tracking-wide", children: diagramName }),
4063
- diagramDescription && /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-white/90 font-medium text-xs sm:text-base leading-tight", children: diagramDescription })
4064
- ] })
4065
- ] }),
4066
- !isDragging && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute -bottom-8 left-1/2 transform -translate-x-1/2 ${isDarkMode ? "text-indigo-300/60" : "text-indigo-600/60"} text-xs whitespace-nowrap`, children: safeT("diagram.dragToMove") })
4046
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
4047
+ "div",
4048
+ {
4049
+ className: "absolute inset-0 rounded-full blur-2xl bg-brand-primary",
4050
+ style: {
4051
+ opacity: 0.3,
4052
+ transform: "scale(1.5)"
4053
+ }
4054
+ }
4055
+ ),
4056
+ /* @__PURE__ */ jsxRuntimeExports.jsxs(
4057
+ "div",
4058
+ {
4059
+ className: "relative px-6 sm:px-10 py-3 sm:py-5 rounded-3xl shadow-2xl border-4 flex items-center gap-3 sm:gap-4 backdrop-blur-md bg-gradient-brand",
4060
+ style: {
4061
+ borderColor: "var(--brand-primary)",
4062
+ borderOpacity: 0.5,
4063
+ transform: isDragging ? "scale(1.1)" : "scale(1)",
4064
+ transition: "transform 0.3s ease"
4065
+ },
4066
+ children: [
4067
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
4068
+ "div",
4069
+ {
4070
+ className: "p-2 sm:p-3 rounded-xl backdrop-blur-sm",
4071
+ style: { backgroundColor: "rgba(255, 255, 255, 0.25)" },
4072
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(Briefcase, { className: "w-5 h-5 sm:w-7 sm:h-7 text-inverse" })
4073
+ }
4074
+ ),
4075
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center", children: [
4076
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-inverse text-body sm:text-subtitle", children: diagramName }),
4077
+ diagramDescription && /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-inverse text-caption sm:text-small opacity-90", children: diagramDescription })
4078
+ ] })
4079
+ ]
4080
+ }
4081
+ ),
4082
+ !isDragging && /* @__PURE__ */ jsxRuntimeExports.jsx(
4083
+ "div",
4084
+ {
4085
+ className: `absolute -bottom-8 left-1/2 transform -translate-x-1/2 text-caption whitespace-nowrap ${isDarkMode ? "text-brand-primary" : "text-brand-secondary"}`,
4086
+ style: {
4087
+ opacity: 0.6
4088
+ },
4089
+ children: safeT("diagram.dragToMove")
4090
+ }
4091
+ )
4067
4092
  ] })
4068
4093
  }
4069
4094
  ),
@@ -4083,13 +4108,12 @@ const DiagramSection2 = ({ data, t, isDarkMode }) => {
4083
4108
  animation: fadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
4084
4109
  opacity: 0;
4085
4110
  }
4086
- .animate-twinkle { animation: twinkle 5s ease-in-out infinite; }
4087
4111
  ` })
4088
4112
  ]
4089
4113
  }
4090
4114
  );
4091
4115
  };
4092
- const FaqItem = ({ faq, index: index2, isActive, onToggle, isDarkMode, t }) => {
4116
+ const FaqItem = ({ faq, index: index2, isActive, onToggle, t }) => {
4093
4117
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
4094
4118
  "div",
4095
4119
  {
@@ -4098,79 +4122,69 @@ const FaqItem = ({ faq, index: index2, isActive, onToggle, isDarkMode, t }) => {
4098
4122
  animationFillMode: "both"
4099
4123
  },
4100
4124
  className: "animate-slide-up",
4101
- children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
4102
- "div",
4103
- {
4104
- className: `
4105
- rounded-xl border transition-all duration-500 ease-out transform
4106
- ${isDarkMode ? "bg-gradient-to-br from-gray-800 to-gray-800/50 border-gray-700/50" : "bg-white border-gray-200"}
4107
- ${isActive ? `scale-[1.02] ${isDarkMode ? "shadow-2xl shadow-blue-500/20 border-blue-500/30" : "shadow-xl shadow-blue-100 border-blue-200"}` : "shadow-md hover:shadow-lg"}
4108
- hover:scale-[1.01]
4109
- `,
4110
- children: [
4111
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
4112
- "button",
4113
- {
4114
- onClick: onToggle,
4115
- className: `
4116
- w-full px-6 py-5 text-left flex items-start justify-between gap-4
4117
- transition-all duration-300
4118
- ${isDarkMode ? "hover:bg-gray-700/30" : "hover:bg-gray-50/50"}
4119
- rounded-xl
4120
- group
4121
- `,
4122
- children: [
4123
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `
4124
- text-lg font-semibold flex-1 transition-colors duration-300
4125
- ${isActive ? isDarkMode ? "text-blue-400" : "text-blue-600" : isDarkMode ? "text-white group-hover:text-blue-300" : "text-gray-900 group-hover:text-blue-600"}
4126
- `, children: faq.question }),
4127
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `
4125
+ children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "card", style: { padding: 0 }, children: [
4126
+ /* @__PURE__ */ jsxRuntimeExports.jsxs(
4127
+ "button",
4128
+ {
4129
+ onClick: onToggle,
4130
+ className: "w-full px-6 py-5 text-left flex items-start justify-between gap-4 rounded-xl group",
4131
+ children: [
4132
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "card-title flex-1", children: faq.question }),
4133
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `
4128
4134
  flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center
4129
4135
  transition-all duration-500 transform
4130
- ${isActive ? `bg-gradient-to-br from-blue-500 to-purple-600 text-white shadow-lg ${isDarkMode ? "shadow-blue-500/50" : "shadow-blue-300"} rotate-180 scale-110` : `${isDarkMode ? "bg-gray-700/50 text-gray-400 group-hover:bg-gray-600" : "bg-gray-100 text-gray-500 group-hover:bg-gray-200"} group-hover:scale-110`}
4136
+ ${isActive ? "bg-gradient-to-br from-blue-500 to-purple-600 text-white shadow-lg shadow-blue-500/50 rotate-180 scale-110" : "bg-gray-700/50 text-gray-400 group-hover:bg-gray-600 group-hover:scale-110"}
4131
4137
  `, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: `w-5 h-5 transition-transform duration-500 ${isActive ? "rotate-180" : ""}` }) })
4132
- ]
4133
- }
4134
- ),
4135
- /* @__PURE__ */ jsxRuntimeExports.jsx(
4138
+ ]
4139
+ }
4140
+ ),
4141
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
4142
+ "div",
4143
+ {
4144
+ style: {
4145
+ maxHeight: isActive ? "500px" : "0",
4146
+ opacity: isActive ? "1" : "0",
4147
+ overflow: "hidden",
4148
+ transition: "all 500ms ease-in-out"
4149
+ },
4150
+ children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
4136
4151
  "div",
4137
4152
  {
4138
- className: `
4139
- overflow-hidden transition-all duration-500 ease-in-out
4140
- ${isActive ? "max-h-[500px] opacity-100" : "max-h-0 opacity-0"}
4141
- `,
4142
- children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `
4143
- px-6 pb-6 pt-2
4144
- ${isDarkMode ? "text-gray-300" : "text-gray-600"}
4145
- transition-all duration-500
4146
- ${isActive ? "translate-y-0" : "-translate-y-4"}
4147
- `, children: [
4148
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `h-px w-full mb-4 ${isDarkMode ? "bg-gradient-to-r from-transparent via-gray-700 to-transparent" : "bg-gradient-to-r from-transparent via-gray-200 to-transparent"}` }),
4149
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `prose prose-sm max-w-none leading-relaxed ${isDarkMode ? "prose-invert" : ""}`, children: faq.answer }),
4153
+ className: "px-6 pb-6 pt-2",
4154
+ style: {
4155
+ transform: isActive ? "translateY(0)" : "translateY(-10px)",
4156
+ transition: "transform 500ms ease-in-out"
4157
+ },
4158
+ children: [
4159
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
4160
+ "div",
4161
+ {
4162
+ className: "h-px w-full mb-4",
4163
+ style: {
4164
+ background: "linear-gradient(to right, transparent, var(--border-color), transparent)"
4165
+ }
4166
+ }
4167
+ ),
4168
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-text leading-relaxed", children: faq.answer }),
4150
4169
  faq.url && /* @__PURE__ */ jsxRuntimeExports.jsxs(
4151
4170
  "a",
4152
4171
  {
4153
4172
  href: faq.url,
4154
4173
  target: "_blank",
4155
4174
  rel: "noopener noreferrer",
4156
- className: `
4157
- inline-flex items-center gap-2 mt-5 px-4 py-2 rounded-lg text-sm font-medium
4158
- transition-all duration-300 transform hover:scale-105
4159
- ${isDarkMode ? "text-blue-400 hover:text-blue-300 bg-blue-500/10 hover:bg-blue-500/20" : "text-blue-600 hover:text-blue-700 bg-blue-50 hover:bg-blue-100"}
4160
- group/link
4161
- `,
4175
+ className: "card-link mt-4",
4162
4176
  children: [
4163
4177
  (t == null ? void 0 : t("faq.learn_more")) || "Learn more",
4164
- /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "w-4 h-4 transition-transform duration-300 group-hover/link:translate-x-1", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
4178
+ /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
4165
4179
  ]
4166
4180
  }
4167
4181
  )
4168
- ] })
4182
+ ]
4169
4183
  }
4170
4184
  )
4171
- ]
4172
- }
4173
- )
4185
+ }
4186
+ )
4187
+ ] })
4174
4188
  }
4175
4189
  );
4176
4190
  };
@@ -4188,22 +4202,39 @@ const FaqSection = ({ data, t, isDarkMode, section }) => {
4188
4202
  const sectionTitle = (section == null ? void 0 : section.title) || "...";
4189
4203
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionWrapper, { isDarkMode, children: [
4190
4204
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-4xl mx-auto", children: [
4191
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center mb-6 animate-fade-in", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `
4192
- w-10 h-10 rounded-lg flex items-center justify-center
4193
- ${isDarkMode ? "bg-gradient-to-br from-blue-500 to-purple-600 shadow-lg shadow-blue-500/20" : "bg-gradient-to-br from-blue-600 to-indigo-600 shadow-lg shadow-blue-200"}
4194
- transform hover:scale-110 transition-all duration-300
4195
- `, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
4196
- "svg",
4205
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center mb-6 animate-fade-in", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
4206
+ "div",
4197
4207
  {
4198
- className: "w-6 h-6 text-white",
4199
- fill: "currentColor",
4200
- viewBox: "0 0 24 24",
4201
- children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" })
4208
+ className: "w-10 h-10 rounded-lg flex items-center justify-center",
4209
+ style: {
4210
+ background: "linear-gradient(to bottom right, var(--brand-primary), var(--brand-secondary))",
4211
+ boxShadow: "0 10px 15px -3px var(--card-shadow)",
4212
+ transition: "transform 300ms cubic-bezier(0.4, 0, 0.2, 1)"
4213
+ },
4214
+ onMouseEnter: (e) => e.currentTarget.style.transform = "scale(1.1)",
4215
+ onMouseLeave: (e) => e.currentTarget.style.transform = "scale(1)",
4216
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(
4217
+ "svg",
4218
+ {
4219
+ className: "w-6 h-6 text-white",
4220
+ fill: "currentColor",
4221
+ viewBox: "0 0 24 24",
4222
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" })
4223
+ }
4224
+ )
4202
4225
  }
4203
- ) }) }),
4226
+ ) }),
4204
4227
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-12 animate-fade-in", children: [
4205
- /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: `text-4xl font-bold mb-3 ${isDarkMode ? "text-white" : "text-gray-900"}`, children: sectionTitle }),
4206
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `h-1 w-20 mx-auto rounded-full ${isDarkMode ? "bg-gradient-to-r from-blue-500 to-purple-500" : "bg-gradient-to-r from-blue-600 to-indigo-600"}` })
4228
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-title text-main mb-3", children: sectionTitle }),
4229
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
4230
+ "div",
4231
+ {
4232
+ className: "h-1 w-20 mx-auto rounded-full",
4233
+ style: {
4234
+ background: "linear-gradient(to right, var(--gradient-brand-soft-start), var(--gradient-brand-soft-end))"
4235
+ }
4236
+ }
4237
+ )
4207
4238
  ] }),
4208
4239
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-4", children: faqs.map((faq, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
4209
4240
  FaqItem,
@@ -4212,7 +4243,6 @@ const FaqSection = ({ data, t, isDarkMode, section }) => {
4212
4243
  index: index2,
4213
4244
  isActive: activeIndex === index2,
4214
4245
  onToggle: () => toggleFaq(index2),
4215
- isDarkMode,
4216
4246
  t
4217
4247
  },
4218
4248
  faq.id || index2
@@ -4229,7 +4259,6 @@ const FaqSection = ({ data, t, isDarkMode, section }) => {
4229
4259
  transform: translateY(0);
4230
4260
  }
4231
4261
  }
4232
-
4233
4262
  @keyframes slide-up {
4234
4263
  from {
4235
4264
  opacity: 0;
@@ -4240,11 +4269,9 @@ const FaqSection = ({ data, t, isDarkMode, section }) => {
4240
4269
  transform: translateY(0);
4241
4270
  }
4242
4271
  }
4243
-
4244
4272
  .animate-fade-in {
4245
4273
  animation: fade-in 0.8s ease-out;
4246
4274
  }
4247
-
4248
4275
  .animate-slide-up {
4249
4276
  animation: slide-up 0.6s ease-out;
4250
4277
  }
@@ -4285,141 +4312,147 @@ const PageHighlightSection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
4285
4312
  return () => clearInterval(interval);
4286
4313
  }, [highlightData.length]);
4287
4314
  const gradientClasses = [
4288
- "from-blue-600 to-purple-600",
4289
- "from-purple-600 to-pink-600",
4290
- "from-blue-500 to-purple-500",
4291
- "from-purple-500 to-pink-500",
4292
- "from-emerald-600 to-teal-600",
4293
- "from-orange-500 to-red-500"
4315
+ "btn-primary"
4294
4316
  ];
4295
4317
  const defaultImage = "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1200&h=800&fit=crop&q=80";
4296
4318
  if (!highlightData.length) {
4297
4319
  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: [
4298
- /* @__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" }),
4299
- /* @__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." })
4320
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-lg font-semibold mb-2 text-main`, children: t("highlight.noData.title") || "Chưa có dữ liệu" }),
4321
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted", children: t("highlight.noData.description") || "Hiện tại chưa có sản phẩm nào được thiết lập." })
4300
4322
  ] }) });
4301
4323
  }
4302
- 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: [
4303
- /* @__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"}` }) }),
4304
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute inset-0 overflow-hidden pointer-events-none", children: [
4305
- /* @__PURE__ */ jsxRuntimeExports.jsx(
4306
- "div",
4307
- {
4308
- 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"}`
4309
- }
4310
- ),
4311
- /* @__PURE__ */ jsxRuntimeExports.jsx(
4312
- "div",
4313
- {
4314
- 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"}`
4315
- }
4316
- ),
4317
- /* @__PURE__ */ jsxRuntimeExports.jsx(
4318
- "div",
4319
- {
4320
- 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"}`
4321
- }
4322
- )
4323
- ] }),
4324
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-full px-4 sm:px-6 lg:px-8 py-16 sm:py-24", children: [
4325
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-full", children: highlightData.map((item, index2) => {
4326
- const color = gradientClasses[index2 % gradientClasses.length];
4327
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
4328
- "div",
4329
- {
4330
- className: `transition-opacity duration-700 ${activeTab === index2 ? "opacity-100" : "opacity-0 absolute inset-0 pointer-events-none"}`,
4331
- 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: [
4332
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative h-[280px] lg:h-full overflow-hidden group", children: [
4333
- /* @__PURE__ */ jsxRuntimeExports.jsx(
4334
- "img",
4335
- {
4336
- src: item.image || defaultImage,
4337
- alt: item.title,
4338
- className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-110",
4339
- onError: (e) => {
4340
- e.target.src = defaultImage;
4341
- }
4342
- }
4343
- ),
4344
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 bg-gradient-to-br ${color} opacity-20` }),
4345
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" })
4346
- ] }),
4347
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-5 lg:p-8 flex flex-col justify-center", children: [
4348
- /* @__PURE__ */ jsxRuntimeExports.jsx(
4349
- "h1",
4350
- {
4351
- className: `text-3xl lg:text-4xl font-black mb-3 bg-gradient-to-r ${color} bg-clip-text text-transparent`,
4352
- children: item.title
4353
- }
4354
- ),
4355
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-description mb-6", children: item.description }),
4356
- 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: [
4357
- /* @__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" }) }) }),
4358
- /* @__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 })
4359
- ] }, idx)) }),
4360
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
4361
- "a",
4362
- {
4363
- href: item.slug,
4364
- rel: "noopener noreferrer",
4365
- 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 text-center`,
4366
- onClick: (e) => {
4367
- if (!e.ctrlKey && !e.metaKey && e.button !== 1) {
4368
- e.preventDefault();
4369
- window.location.href = item.slug;
4324
+ return /* @__PURE__ */ jsxRuntimeExports.jsxs(
4325
+ "section",
4326
+ {
4327
+ className: "relative overflow-hidden",
4328
+ style: {
4329
+ background: isDarkMode ? "linear-gradient(to bottom right, var(--color-gray-950), var(--color-gray-900), var(--color-gray-950))" : "linear-gradient(to bottom right, var(--bg-primary), #eff6ff50, #f3e8ff50)"
4330
+ },
4331
+ children: [
4332
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute inset-0 overflow-hidden pointer-events-none", children: [
4333
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
4334
+ "div",
4335
+ {
4336
+ className: "absolute top-20 right-10 w-96 h-96 rounded-full blur-3xl opacity-20 animate-blob",
4337
+ style: {
4338
+ backgroundColor: isDarkMode ? "var(--gradient-brand-soft-start)" : "var(--gradient-brand-soft-start)"
4339
+ }
4340
+ }
4341
+ ),
4342
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
4343
+ "div",
4344
+ {
4345
+ className: "absolute top-40 -left-20 w-96 h-96 rounded-full blur-3xl opacity-20 animate-blob animation-delay-2000",
4346
+ style: {
4347
+ backgroundColor: isDarkMode ? "var(--gradient-accent-soft-start)" : "var(--gradient-accent-soft-start)",
4348
+ animationDelay: "2s"
4349
+ }
4350
+ }
4351
+ ),
4352
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
4353
+ "div",
4354
+ {
4355
+ className: "absolute -bottom-20 right-40 w-96 h-96 rounded-full blur-3xl opacity-20 animate-blob animation-delay-4000",
4356
+ style: {
4357
+ backgroundColor: isDarkMode ? "var(--gradient-accent-soft-end)" : "var(--gradient-accent-soft-end)",
4358
+ animationDelay: "4s"
4359
+ }
4360
+ }
4361
+ )
4362
+ ] }),
4363
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-full px-4 sm:px-6 lg:px-8 py-16 sm:py-24", children: [
4364
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-full", children: highlightData.map((item, index2) => {
4365
+ const color = gradientClasses[index2 % gradientClasses.length];
4366
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(
4367
+ "div",
4368
+ {
4369
+ className: `transition-opacity duration-700 ${activeTab === index2 ? "opacity-100" : "opacity-0 absolute inset-0 pointer-events-none"}`,
4370
+ 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: [
4371
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative h-[280px] lg:h-full overflow-hidden group", children: [
4372
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
4373
+ "img",
4374
+ {
4375
+ src: item.image || defaultImage,
4376
+ alt: item.title,
4377
+ className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-110",
4378
+ onError: (e) => {
4379
+ e.target.src = defaultImage;
4380
+ }
4370
4381
  }
4371
- },
4372
- children: [
4373
- /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "relative z-10 flex items-center justify-center gap-2", children: [
4374
- t("highlight.cta") || "Khám phá",
4375
- " ",
4376
- item.title,
4377
- /* @__PURE__ */ jsxRuntimeExports.jsx(
4378
- "svg",
4379
- {
4380
- className: "w-5 h-5 group-hover:translate-x-1 transition-transform",
4381
- fill: "none",
4382
- viewBox: "0 0 24 24",
4383
- stroke: "currentColor",
4384
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
4385
- "path",
4382
+ ),
4383
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 bg-gradient-to-br ${color} opacity-20` }),
4384
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" })
4385
+ ] }),
4386
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-5 lg:p-8 flex flex-col justify-center", children: [
4387
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-3xl lg:text-4xl font-black mb-3 text-gradient-brand", children: item.title }),
4388
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mb-6 text-muted", children: item.description }),
4389
+ 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: [
4390
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-0.5 w-4 h-4 rounded-full bg-gradient-accent flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "w-2.5 h-2.5 text-inverse", 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" }) }) }),
4391
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted group-hover:text-main font-medium text-xs transition-colors", children: feature })
4392
+ ] }, idx)) }),
4393
+ /* @__PURE__ */ jsxRuntimeExports.jsxs(
4394
+ "a",
4395
+ {
4396
+ href: item.slug,
4397
+ rel: "noopener noreferrer",
4398
+ 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 text-center`,
4399
+ onClick: (e) => {
4400
+ if (!e.ctrlKey && !e.metaKey && e.button !== 1) {
4401
+ e.preventDefault();
4402
+ window.location.href = item.slug;
4403
+ }
4404
+ },
4405
+ children: [
4406
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "relative z-10 flex items-center justify-center gap-2", children: [
4407
+ t("highlight.cta") || "Khám phá",
4408
+ " ",
4409
+ item.title,
4410
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
4411
+ "svg",
4386
4412
  {
4387
- strokeLinecap: "round",
4388
- strokeLinejoin: "round",
4389
- strokeWidth: 2,
4390
- d: "M17 8l4 4m0 0l-4 4m4-4H3"
4413
+ className: "w-5 h-5 group-hover:translate-x-1 transition-transform",
4414
+ fill: "none",
4415
+ viewBox: "0 0 24 24",
4416
+ stroke: "currentColor",
4417
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(
4418
+ "path",
4419
+ {
4420
+ strokeLinecap: "round",
4421
+ strokeLinejoin: "round",
4422
+ strokeWidth: 2,
4423
+ d: "M17 8l4 4m0 0l-4 4m4-4H3"
4424
+ }
4425
+ )
4391
4426
  }
4392
4427
  )
4393
- }
4394
- )
4395
- ] }),
4396
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-white/20 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left" })
4397
- ]
4398
- }
4399
- )
4400
- ] })
4401
- ] }) })
4402
- },
4403
- index2
4404
- );
4405
- }) }),
4406
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap justify-center gap-4 mt-12", children: highlightData.map((item, index2) => {
4407
- const color = gradientClasses[index2 % gradientClasses.length];
4408
- return /* @__PURE__ */ jsxRuntimeExports.jsxs(
4409
- "button",
4410
- {
4411
- onClick: () => setActiveTab(index2),
4412
- 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"}`,
4413
- children: [
4414
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "relative z-10", children: item.title }),
4415
- 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` })
4416
- ]
4417
- },
4418
- index2
4419
- );
4420
- }) })
4421
- ] }),
4422
- /* @__PURE__ */ jsxRuntimeExports.jsx("style", { jsx: true, children: `
4428
+ ] }),
4429
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-white/20 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left" })
4430
+ ]
4431
+ }
4432
+ )
4433
+ ] })
4434
+ ] }) })
4435
+ },
4436
+ index2
4437
+ );
4438
+ }) }),
4439
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap justify-center gap-4 mt-12", children: highlightData.map((item, index2) => {
4440
+ const color = gradientClasses[index2 % gradientClasses.length];
4441
+ return /* @__PURE__ */ jsxRuntimeExports.jsxs(
4442
+ "button",
4443
+ {
4444
+ onClick: () => setActiveTab(index2),
4445
+ 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"}`,
4446
+ children: [
4447
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "relative z-10", children: item.title }),
4448
+ 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` })
4449
+ ]
4450
+ },
4451
+ index2
4452
+ );
4453
+ }) })
4454
+ ] }),
4455
+ /* @__PURE__ */ jsxRuntimeExports.jsx("style", { jsx: true, children: `
4423
4456
  @keyframes blob {
4424
4457
  0%, 100% {
4425
4458
  transform: translate(0px, 0px) scale(1);
@@ -4456,7 +4489,9 @@ const PageHighlightSection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
4456
4489
  background-size: 50px 50px;
4457
4490
  }
4458
4491
  ` })
4459
- ] });
4492
+ ]
4493
+ }
4494
+ );
4460
4495
  };
4461
4496
  const PageChildrenSelectSection = ({ data, isDarkMode, t, section, imageBaseUrl = "" }) => {
4462
4497
  var _a;
@@ -4481,23 +4516,9 @@ const PageChildrenSelectSection = ({ data, isDarkMode, t, section, imageBaseUrl
4481
4516
  maxWidth: "1400px",
4482
4517
  margin: "0 auto"
4483
4518
  }, children: [
4484
- sectionTitle && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
4485
- marginBottom: "50px",
4486
- textAlign: "center"
4487
- }, children: [
4488
- /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { style: {
4489
- fontSize: "36px",
4490
- fontWeight: "700",
4491
- marginBottom: "16px",
4492
- color: isDarkMode ? "#f9fafb" : "#4b5563"
4493
- }, children: sectionTitle }),
4494
- sectionDescription && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { style: {
4495
- fontSize: "16px",
4496
- lineHeight: "1.6",
4497
- color: isDarkMode ? "#d1d5db" : "#6b7280",
4498
- maxWidth: "900px",
4499
- margin: "0 auto"
4500
- }, children: sectionDescription })
4519
+ sectionTitle && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-12", children: [
4520
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-title text-main mb-4", children: sectionTitle }),
4521
+ sectionDescription && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-muted max-w-3xl mx-auto", children: sectionDescription })
4501
4522
  ] }),
4502
4523
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
4503
4524
  display: "grid",
@@ -4510,30 +4531,13 @@ const PageChildrenSelectSection = ({ data, isDarkMode, t, section, imageBaseUrl
4510
4531
  "a",
4511
4532
  {
4512
4533
  href: page.slug,
4534
+ className: "card",
4513
4535
  style: {
4514
- backgroundColor: isDarkMode ? "#1f2937" : "#ffffff",
4515
- borderRadius: "12px",
4516
- padding: "32px 20px",
4517
- cursor: "pointer",
4518
- transition: "all 0.3s",
4519
- border: `1px solid ${isDarkMode ? "#374151" : "#e5e7eb"}`,
4520
- boxShadow: isDarkMode ? "0 4px 6px -1px rgba(0, 0, 0, 0.3)" : "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
4521
- display: "flex",
4522
- flexDirection: "column",
4523
4536
  alignItems: "center",
4524
4537
  textAlign: "center",
4525
4538
  gap: "16px",
4526
- textDecoration: "none"
4527
- },
4528
- onMouseEnter: (e) => {
4529
- e.currentTarget.style.transform = "translateY(-8px)";
4530
- e.currentTarget.style.boxShadow = isDarkMode ? "0 20px 25px -5px rgba(0, 0, 0, 0.5)" : "0 20px 25px -5px rgba(0, 0, 0, 0.15)";
4531
- e.currentTarget.style.borderColor = "#361985ff";
4532
- },
4533
- onMouseLeave: (e) => {
4534
- e.currentTarget.style.transform = "translateY(0)";
4535
- e.currentTarget.style.boxShadow = isDarkMode ? "0 4px 6px -1px rgba(0, 0, 0, 0.3)" : "0 4px 6px -1px rgba(0, 0, 0, 0.1)";
4536
- e.currentTarget.style.borderColor = isDarkMode ? "#374151" : "#e5e7eb";
4539
+ textDecoration: "none",
4540
+ padding: "32px 20px"
4537
4541
  },
4538
4542
  children: [
4539
4543
  iconUrl && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
@@ -4554,13 +4558,7 @@ const PageChildrenSelectSection = ({ data, isDarkMode, t, section, imageBaseUrl
4554
4558
  }
4555
4559
  }
4556
4560
  ) }),
4557
- /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { style: {
4558
- fontSize: "16px",
4559
- fontWeight: "600",
4560
- color: isDarkMode ? "#f9fafb" : "#4b5563",
4561
- margin: 0,
4562
- lineHeight: "1.4"
4563
- }, children: page.title })
4561
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "card-title text-body", style: { margin: 0 }, children: page.title })
4564
4562
  ]
4565
4563
  },
4566
4564
  page.id
@@ -4624,44 +4622,25 @@ const PageChildrenSelectSection1 = ({ data, isDarkMode, t, section, imageBaseUrl
4624
4622
  maxWidth: "1280px",
4625
4623
  margin: "0 auto"
4626
4624
  }, children: [
4627
- sectionTitle && /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { style: {
4628
- fontSize: "28px",
4629
- fontWeight: "700",
4630
- marginBottom: "40px",
4631
- color: isDarkMode ? "#f9fafb" : "#1e40af",
4632
- textTransform: "uppercase",
4633
- letterSpacing: "0.5px"
4634
- }, children: sectionTitle }),
4625
+ sectionTitle && /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-title text-main mb-10 uppercase tracking-wide", children: sectionTitle }),
4635
4626
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
4636
4627
  display: "flex",
4637
4628
  flexDirection: "column",
4638
4629
  gap: "24px"
4639
4630
  }, children: visiblePages.map((page) => {
4640
- var _a2, _b;
4631
+ var _a2, _b, _c;
4641
4632
  const mainImage = ((_b = (_a2 = page.pageImages) == null ? void 0 : _a2.find((img) => img.isMain)) == null ? void 0 : _b.url) || page.icon;
4642
4633
  const imageUrl = getImageUrl(mainImage);
4643
4634
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
4644
4635
  "a",
4645
4636
  {
4646
4637
  href: page.slug,
4638
+ className: "card",
4647
4639
  style: {
4648
- display: "flex",
4640
+ flexDirection: "row",
4649
4641
  gap: "20px",
4650
- backgroundColor: isDarkMode ? "#1f2937" : "#ffffff",
4651
- borderRadius: "8px",
4652
- overflow: "hidden",
4653
- cursor: "pointer",
4654
- transition: "all 0.2s",
4655
- border: `1px solid ${isDarkMode ? "#374151" : "#e5e7eb"}`,
4656
- padding: "16px",
4657
4642
  textDecoration: "none"
4658
4643
  },
4659
- onMouseEnter: (e) => {
4660
- e.currentTarget.style.backgroundColor = isDarkMode ? "#374151" : "#f9fafb";
4661
- },
4662
- onMouseLeave: (e) => {
4663
- e.currentTarget.style.backgroundColor = isDarkMode ? "#1f2937" : "#ffffff";
4664
- },
4665
4644
  children: [
4666
4645
  imageUrl && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
4667
4646
  width: "200px",
@@ -4681,33 +4660,10 @@ const PageChildrenSelectSection1 = ({ data, isDarkMode, t, section, imageBaseUrl
4681
4660
  }
4682
4661
  }
4683
4662
  ) }),
4684
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
4685
- flex: 1,
4686
- display: "flex",
4687
- flexDirection: "column",
4688
- justifyContent: "center"
4689
- }, children: [
4690
- page.tagKeys && page.tagKeys.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
4691
- fontSize: "12px",
4692
- fontWeight: "600",
4693
- color: isDarkMode ? "#60a5fa" : "#2563eb",
4694
- marginBottom: "8px",
4695
- textTransform: "uppercase",
4696
- letterSpacing: "0.5px"
4697
- }, children: page.tagKeys[0].key }),
4698
- /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { style: {
4699
- fontSize: "18px",
4700
- fontWeight: "700",
4701
- marginBottom: "8px",
4702
- color: isDarkMode ? "#f9fafb" : "#1f2937",
4703
- lineHeight: "1.4"
4704
- }, children: page.title }),
4705
- page.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { style: {
4706
- fontSize: "14px",
4707
- lineHeight: "1.6",
4708
- color: isDarkMode ? "#d1d5db" : "#6b7280",
4709
- margin: 0
4710
- }, children: page.description })
4663
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col justify-center flex-1", children: [
4664
+ ((_c = page.tagKeys) == null ? void 0 : _c.length) > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-link ", children: page.tagKeys[0].key }),
4665
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "card-title mb-2 leading-snug", children: page.title }),
4666
+ page.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "card-text m-0", children: page.description })
4711
4667
  ] }),
4712
4668
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
4713
4669
  display: "flex",
@@ -4717,10 +4673,7 @@ const PageChildrenSelectSection1 = ({ data, isDarkMode, t, section, imageBaseUrl
4717
4673
  ChevronRight,
4718
4674
  {
4719
4675
  size: 20,
4720
- style: {
4721
- color: isDarkMode ? "#9ca3af" : "#d1d5db",
4722
- transition: "color 0.2s"
4723
- }
4676
+ className: "card-text"
4724
4677
  }
4725
4678
  ) })
4726
4679
  ]
@@ -4732,6 +4685,7 @@ const PageChildrenSelectSection1 = ({ data, isDarkMode, t, section, imageBaseUrl
4732
4685
  "button",
4733
4686
  {
4734
4687
  onClick: handleLoadMore,
4688
+ className: "btn-primary",
4735
4689
  style: {
4736
4690
  display: "inline-flex",
4737
4691
  alignItems: "center",
@@ -4740,20 +4694,9 @@ const PageChildrenSelectSection1 = ({ data, isDarkMode, t, section, imageBaseUrl
4740
4694
  fontSize: "16px",
4741
4695
  fontWeight: "600",
4742
4696
  color: "#fff",
4743
- backgroundColor: "#361985ff",
4744
4697
  border: "none",
4745
4698
  borderRadius: "9999px",
4746
- cursor: "pointer",
4747
- transition: "all 0.3s",
4748
- boxShadow: "0 4px 6px -1px rgba(37, 99, 235, 0.3)"
4749
- },
4750
- onMouseEnter: (e) => {
4751
- e.currentTarget.style.backgroundColor = "#361985ff";
4752
- e.currentTarget.style.transform = "translateY(-2px)";
4753
- },
4754
- onMouseLeave: (e) => {
4755
- e.currentTarget.style.backgroundColor = "#361985ff";
4756
- e.currentTarget.style.transform = "translateY(0)";
4699
+ cursor: "pointer"
4757
4700
  },
4758
4701
  children: [
4759
4702
  t("pageChildrenSelect.moreInsights"),
@@ -4785,12 +4728,7 @@ const PageChildrenSelectSection2 = ({ data, isDarkMode, t, section, imageBaseUrl
4785
4728
  maxWidth: "1400px",
4786
4729
  margin: "0 auto"
4787
4730
  }, children: [
4788
- sectionTitle && /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { style: {
4789
- fontSize: "36px",
4790
- fontWeight: "700",
4791
- marginBottom: "50px",
4792
- color: isDarkMode ? "#f1f5f9" : "#1e293b"
4793
- }, children: sectionTitle }),
4731
+ sectionTitle && /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-title mb-12 text-main", children: sectionTitle }),
4794
4732
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
4795
4733
  display: "grid",
4796
4734
  gridTemplateColumns: "repeat(auto-fit, minmax(350px, 1fr))",
@@ -4804,24 +4742,12 @@ const PageChildrenSelectSection2 = ({ data, isDarkMode, t, section, imageBaseUrl
4804
4742
  "a",
4805
4743
  {
4806
4744
  href: page.slug,
4745
+ className: "card",
4807
4746
  style: {
4808
- backgroundColor: isDarkMode ? "#1e293b" : "#ffffff",
4809
- borderRadius: "16px",
4810
- overflow: "hidden",
4811
- cursor: "pointer",
4812
- transition: "all 0.3s",
4813
- boxShadow: isDarkMode ? "0 4px 6px -1px rgba(0, 0, 0, 0.5)" : "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
4814
- border: `1px solid ${isDarkMode ? "#334155" : "#e2e8f0"}`,
4815
4747
  textDecoration: "none",
4816
- display: "block"
4817
- },
4818
- onMouseEnter: (e) => {
4819
- e.currentTarget.style.transform = "translateY(-8px)";
4820
- e.currentTarget.style.boxShadow = isDarkMode ? "0 20px 25px -5px rgba(0, 0, 0, 0.6)" : "0 20px 25px -5px rgba(0, 0, 0, 0.15)";
4821
- },
4822
- onMouseLeave: (e) => {
4823
- e.currentTarget.style.transform = "translateY(0)";
4824
- e.currentTarget.style.boxShadow = isDarkMode ? "0 4px 6px -1px rgba(0, 0, 0, 0.5)" : "0 4px 6px -1px rgba(0, 0, 0, 0.1)";
4748
+ display: "block",
4749
+ padding: "0",
4750
+ overflow: "hidden"
4825
4751
  },
4826
4752
  children: [
4827
4753
  imageUrl && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
@@ -4848,26 +4774,13 @@ const PageChildrenSelectSection2 = ({ data, isDarkMode, t, section, imageBaseUrl
4848
4774
  }
4849
4775
  }
4850
4776
  ) }),
4851
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
4852
- padding: "24px"
4853
- }, children: [
4854
- /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { style: {
4855
- fontSize: "20px",
4856
- fontWeight: "700",
4857
- marginBottom: "12px",
4858
- color: isDarkMode ? "#f1f5f9" : "#1e293b",
4859
- lineHeight: "1.4",
4860
- minHeight: "56px"
4777
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { padding: "1.5rem" }, children: [
4778
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "card-title text-subtitle", style: {
4779
+ minHeight: "56px",
4780
+ marginBottom: "0.75rem"
4861
4781
  }, children: page.title }),
4862
- page.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { style: {
4863
- fontSize: "14px",
4864
- lineHeight: "1.6",
4865
- color: isDarkMode ? "#cbd5e1" : "#64748b",
4866
- marginBottom: "16px",
4867
- display: "-webkit-box",
4868
- WebkitLineClamp: 2,
4869
- WebkitBoxOrient: "vertical",
4870
- overflow: "hidden"
4782
+ page.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "card-text line-clamp-2", style: {
4783
+ marginBottom: "1rem"
4871
4784
  }, children: page.description })
4872
4785
  ] })
4873
4786
  ]
@@ -4882,6 +4795,7 @@ const PageChildrenSelectSection2 = ({ data, isDarkMode, t, section, imageBaseUrl
4882
4795
  "button",
4883
4796
  {
4884
4797
  onClick: handleLoadMore,
4798
+ className: "btn-primary",
4885
4799
  style: {
4886
4800
  display: "inline-flex",
4887
4801
  alignItems: "center",
@@ -4890,22 +4804,9 @@ const PageChildrenSelectSection2 = ({ data, isDarkMode, t, section, imageBaseUrl
4890
4804
  fontSize: "16px",
4891
4805
  fontWeight: "600",
4892
4806
  color: "#ffffff",
4893
- backgroundColor: "#361985ff",
4894
4807
  border: "none",
4895
4808
  borderRadius: "50px",
4896
- cursor: "pointer",
4897
- transition: "all 0.3s",
4898
- boxShadow: "0 4px 6px -1px rgba(239, 68, 68, 0.3)"
4899
- },
4900
- onMouseEnter: (e) => {
4901
- e.currentTarget.style.backgroundColor = "#361985ff";
4902
- e.currentTarget.style.transform = "translateY(-2px)";
4903
- e.currentTarget.style.boxShadow = "0 10px 15px -3px rgba(239, 68, 68, 0.4)";
4904
- },
4905
- onMouseLeave: (e) => {
4906
- e.currentTarget.style.backgroundColor = "#361985ff";
4907
- e.currentTarget.style.transform = "translateY(0)";
4908
- e.currentTarget.style.boxShadow = "0 4px 6px -1px rgba(239, 68, 68, 0.3)";
4809
+ cursor: "pointer"
4909
4810
  },
4910
4811
  children: [
4911
4812
  t("pageChildrenSelect.moreInsights"),