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