nvis-fe-cms-libs 2.0.6 → 2.0.8

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

@@ -3394,18 +3394,52 @@ var __async = (__this, __arguments, generator) => {
       ] })
     ] });
   };
-  const MindMapNode = ({ id, icon: Icon2, text, color, position, delay = 0, onDragStart, isDragging, onClick, description }) => {
+  const MindMapNode = ({ id, icon: Icon2, text, color, position, delay = 0, onDragStart, isDragging, onClick, description, isDarkMode }) => {
     const [isHovered, setIsHovered] = require$$0.useState(false);
     const [dragStartPos, setDragStartPos] = require$$0.useState(null);
     const [hasMoved, setHasMoved] = require$$0.useState(false);
-    const colorClasses = {
-      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",
-      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",
-      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",
-      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",
-      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",
-      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"
+    const getColorStyles = (colorName) => {
+      const styles = {
+        blue: {
+          gradient: "linear-gradient(to bottom right, var(--brand-primary), var(--brand-primary))",
+          gradientHover: "linear-gradient(to bottom right, var(--gradient-brand-soft-start), var(--gradient-brand-soft-end))",
+          border: "var(--brand-primary)",
+          shadowColor: "var(--brand-primary)"
+        },
+        teal: {
+          gradient: "linear-gradient(to bottom right, var(--gradient-brand-soft-start), var(--gradient-brand-soft-end))",
+          gradientHover: "linear-gradient(to bottom right, var(--gradient-brand-strong-start), var(--gradient-brand-strong-end))",
+          border: "var(--gradient-brand-soft-start)",
+          shadowColor: "var(--gradient-brand-soft-start)"
+        },
+        purple: {
+          gradient: "linear-gradient(to bottom right, var(--brand-secondary), var(--gradient-accent-soft-start))",
+          gradientHover: "linear-gradient(to bottom right, var(--gradient-accent-soft-start), var(--gradient-accent-soft-end))",
+          border: "var(--brand-secondary)",
+          shadowColor: "var(--brand-secondary)"
+        },
+        orange: {
+          gradient: "linear-gradient(to bottom right, var(--gradient-accent-strong-start), var(--gradient-accent-strong-end))",
+          gradientHover: "linear-gradient(to bottom right, var(--gradient-accent-soft-start), var(--gradient-accent-soft-end))",
+          border: "var(--gradient-accent-strong-start)",
+          shadowColor: "var(--gradient-accent-strong-start)"
+        },
+        cyan: {
+          gradient: "linear-gradient(to bottom right, var(--gradient-brand-strong-start), var(--gradient-brand-strong-end))",
+          gradientHover: "linear-gradient(to bottom right, var(--gradient-brand-soft-start), var(--gradient-brand-soft-end))",
+          border: "var(--gradient-brand-strong-start)",
+          shadowColor: "var(--gradient-brand-strong-start)"
+        },
+        indigo: {
+          gradient: "linear-gradient(to bottom right, var(--gradient-accent-soft-start), var(--gradient-accent-soft-end))",
+          gradientHover: "linear-gradient(to bottom right, var(--gradient-accent-strong-start), var(--gradient-accent-strong-end))",
+          border: "var(--gradient-accent-soft-start)",
+          shadowColor: "var(--gradient-accent-soft-start)"
+        }
+      };
+      return styles[colorName] || styles.blue;
     };
+    const colorStyle = getColorStyles(color);
     const handleMouseDown = (e) => {
       setDragStartPos({ x: e.clientX, y: e.clientY });
       setHasMoved(false);
@@ -3488,12 +3522,45 @@ var __async = (__this, __arguments, generator) => {
         onTouchMove: handleTouchMove,
         onTouchEnd: handleTouchEnd,
         children: [
-          /* @__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: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-4 h-4 text-white flex-shrink-0" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white font-medium whitespace-nowrap text-xs sm:text-sm", children: text })
-          ] }),
-          isDragging && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-white/10 rounded-2xl blur-xl animate-pulse", style: { transform: "scale(1.5)" } }),
-          (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 })
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
+            {
+              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",
+              style: {
+                background: isHovered || isDragging ? colorStyle.gradientHover : colorStyle.gradient,
+                borderColor: colorStyle.border,
+                boxShadow: `0 10px 40px ${colorStyle.shadowColor}`,
+                transform: isHovered || isDragging ? "scale(1.1)" : "scale(1)",
+                filter: isHovered || isDragging ? "brightness(1.1)" : "brightness(1)",
+                rotate: isDragging ? "2deg" : "0deg"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-4 h-4 flex-shrink-0 text-inverse" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-inverse text-small whitespace-nowrap", children: text })
+              ]
+            }
+          ),
+          isDragging && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: "absolute inset-0 rounded-2xl blur-xl animate-pulse",
+              style: {
+                background: "rgba(255, 255, 255, 0.1)",
+                transform: "scale(1.5)"
+              }
+            }
+          ),
+          (isHovered || isDragging) && description && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              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"}`,
+              style: {
+                borderColor: "var(--border-color)",
+                opacity: 0.95
+              },
+              children: description
+            }
+          )
         ]
       }
     );
@@ -3714,49 +3781,108 @@ var __async = (__this, __arguments, generator) => {
       "div",
       {
         ref: containerRef,
-        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`,
-        style: { touchAction: "none" },
+        className: "mind-map-container relative w-full h-screen overflow-hidden bg-section-soft",
+        style: {
+          touchAction: "none"
+        },
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `absolute inset-0 ${isDarkMode ? "opacity-30" : "opacity-20"}`, children: [
-            /* @__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"}` }),
-            /* @__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" }),
-            /* @__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" })
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 pointer-events-none ${isDarkMode ? "opacity-60" : "opacity-40"}`, children: [...Array(150)].map((_, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
-              className: "absolute rounded-full animate-twinkle",
-              style: {
-                left: `${Math.random() * 100}%`,
-                top: `${Math.random() * 100}%`,
-                width: `${Math.random() * 3 + 1}px`,
-                height: `${Math.random() * 3 + 1}px`,
-                background: isDarkMode ? ["#60a5fa", "#818cf8", "#a78bfa", "#c084fc", "#e879f9"][Math.floor(Math.random() * 5)] : ["#3b82f6", "#6366f1", "#8b5cf6", "#a855f7", "#d946ef"][Math.floor(Math.random() * 5)],
-                animationDelay: `${Math.random() * 5}s`,
-                animationDuration: `${4 + Math.random() * 6}s`
-              }
-            },
-            i
-          )) }),
-          /* @__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: {
-            backgroundImage: `radial-gradient(circle at 1px 1px, ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.1)"} 1px, transparent 0)`,
-            backgroundSize: "40px 40px"
-          } }) }),
+              className: "absolute inset-0",
+              style: { opacity: isDarkMode ? 0.3 : 0.2 },
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "div",
+                  {
+                    className: "absolute inset-0 bg-gradient-brand",
+                    style: {
+                      opacity: 0.2
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "div",
+                  {
+                    className: "absolute inset-0 bg-gradient-accent",
+                    style: {
+                      opacity: 0.1
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: "absolute inset-0 pointer-events-none",
+              style: { opacity: isDarkMode ? 0.6 : 0.4 },
+              children: [...Array(150)].map((_, i) => {
+                const colors = ["bg-brand-primary", "bg-brand-secondary"];
+                const randomColor = colors[Math.floor(Math.random() * colors.length)];
+                return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "div",
+                  {
+                    className: `absolute rounded-full ${randomColor}`,
+                    style: {
+                      left: `${Math.random() * 100}%`,
+                      top: `${Math.random() * 100}%`,
+                      width: `${Math.random() * 3 + 1}px`,
+                      height: `${Math.random() * 3 + 1}px`,
+                      animationName: "twinkle",
+                      animationDelay: `${Math.random() * 5}s`,
+                      animationDuration: `${4 + Math.random() * 6}s`,
+                      animationIterationCount: "infinite",
+                      animationTimingFunction: "ease-in-out"
+                    }
+                  },
+                  i
+                );
+              })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: "absolute inset-0 pointer-events-none",
+              style: { opacity: isDarkMode ? 0.1 : 0.05 },
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    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)",
+                    backgroundSize: "40px 40px",
+                    opacity: 0.15
+                  }
+                }
+              )
+            }
+          ),
           /* @__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: [
-            /* @__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" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                className: "absolute inset-0 blur-3xl w-20 h-20 sm:w-32 sm:h-32 bg-gradient-brand",
+                style: {
+                  opacity: 0.2
+                }
+              }
+            ),
             /* @__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" }) })
           ] }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "absolute inset-0 w-full h-full pointer-events-none", style: { zIndex: 1 }, children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("defs", { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs("linearGradient", { id: "circuit-gradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", stopColor: "#60a5fa", stopOpacity: "0.6" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "50%", stopColor: "#a78bfa", stopOpacity: "0.9" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", stopColor: "#c084fc", stopOpacity: "0.6" })
+                /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", style: { stopColor: "var(--brand-primary)", stopOpacity: 0.6 } }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "50%", style: { stopColor: "var(--gradient-brand-soft-start)", stopOpacity: 0.9 } }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", style: { stopColor: "var(--gradient-brand-soft-end)", stopOpacity: 0.6 } })
               ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("linearGradient", { id: "sparkle-gradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", stopColor: "#60a5fa" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "50%", stopColor: "#a78bfa" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", stopColor: "#c084fc" })
+                /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", style: { stopColor: "var(--brand-primary)" } }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "50%", style: { stopColor: "var(--gradient-brand-soft-start)" } }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", style: { stopColor: "var(--gradient-brand-soft-end)" } })
               ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("filter", { id: "glow", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("feGaussianBlur", { stdDeviation: "4", result: "coloredBlur" }),
@@ -3771,11 +3897,11 @@ var __async = (__this, __arguments, generator) => {
                 "path",
                 {
                   d: line.path,
-                  stroke: "rgba(167, 139, 250, 0.2)",
+                  stroke: "var(--gradient-brand-soft-start)",
                   strokeWidth: "6",
                   fill: "none",
                   className: "transition-all duration-200",
-                  style: { filter: "blur(8px)" }
+                  style: { filter: "blur(8px)", opacity: 0.2 }
                 }
               ),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -3807,7 +3933,8 @@ var __async = (__this, __arguments, generator) => {
               delay: node.delay,
               onDragStart: handleNodeDragStart,
               isDragging: draggingNodeId === node.id,
-              onClick: handleNodeClick
+              onClick: handleNodeClick,
+              isDarkMode
             },
             node.id
           )) }),
@@ -3841,15 +3968,52 @@ var __async = (__this, __arguments, generator) => {
               },
               onTouchEnd: () => setIsDragging(false),
               children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-indigo-400/30 rounded-full blur-2xl", style: { transform: "scale(1.5)" } }),
-                /* @__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: [
-                  /* @__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" }) }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-white font-bold text-sm sm:text-xl leading-tight tracking-wide", children: diagramName }),
-                    diagramDescription && /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-white/90 font-medium text-xs sm:text-base leading-tight", children: diagramDescription })
-                  ] })
-                ] }),
-                !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") })
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "div",
+                  {
+                    className: "absolute inset-0 rounded-full blur-2xl bg-brand-primary",
+                    style: {
+                      opacity: 0.3,
+                      transform: "scale(1.5)"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  "div",
+                  {
+                    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",
+                    style: {
+                      borderColor: "var(--brand-primary)",
+                      borderOpacity: 0.5,
+                      transform: isDragging ? "scale(1.1)" : "scale(1)",
+                      transition: "transform 0.3s ease"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "div",
+                        {
+                          className: "p-2 sm:p-3 rounded-xl backdrop-blur-sm",
+                          style: { backgroundColor: "rgba(255, 255, 255, 0.25)" },
+                          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Briefcase, { className: "w-5 h-5 sm:w-7 sm:h-7 text-inverse" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center", children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-inverse text-body sm:text-subtitle", children: diagramName }),
+                        diagramDescription && /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-inverse text-caption sm:text-small opacity-90", children: diagramDescription })
+                      ] })
+                    ]
+                  }
+                ),
+                !isDragging && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "div",
+                  {
+                    className: `absolute -bottom-8 left-1/2 transform -translate-x-1/2 text-caption whitespace-nowrap ${isDarkMode ? "text-brand-primary" : "text-brand-secondary"}`,
+                    style: {
+                      opacity: 0.6
+                    },
+                    children: safeT("diagram.dragToMove")
+                  }
+                )
               ] })
             }
           ),
@@ -3869,7 +4033,6 @@ var __async = (__this, __arguments, generator) => {
           animation: fadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
           opacity: 0;
         }
-        .animate-twinkle { animation: twinkle 5s ease-in-out infinite; }
       ` })
         ]
       }
@@ -4128,14 +4291,14 @@ var __async = (__this, __arguments, generator) => {
                 "div",
                 {
                   className: `transition-opacity duration-700 ${activeTab === index2 ? "opacity-100" : "opacity-0 absolute inset-0 pointer-events-none"}`,
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${isDarkMode ? "bg-gradient-to-br from-slate-900/30 to-slate-950/30 border-slate-700/20" : "bg-white/40 border-white/30"} backdrop-blur-md rounded-3xl shadow-lg overflow-hidden border transition-colors duration-500`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-0 min-h-[420px] lg:h-auto", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative h-[280px] lg:h-full overflow-hidden group", children: [
+                  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", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative h-[280px] lg:h-[500px] overflow-hidden group", children: [
                       /* @__PURE__ */ jsxRuntimeExports.jsx(
                         "img",
                         {
                           src: item.image || defaultImage,
                           alt: item.title,
-                          className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-110",
+                          className: "absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110",
                           onError: (e) => {
                             e.target.src = defaultImage;
                           }
@@ -4144,10 +4307,10 @@ var __async = (__this, __arguments, generator) => {
                       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `absolute inset-0 bg-gradient-to-br ${color} opacity-20` }),
                       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" })
                     ] }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-5 lg:p-8 flex flex-col justify-center", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-5 lg:p-8 flex flex-col justify-center h-[280px] lg:h-[500px]", children: [
                       /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-3xl lg:text-4xl font-black mb-3 text-gradient-brand", children: item.title }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mb-6 text-muted", children: item.description }),
-                      item.features && item.features.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2 mb-6", children: item.features.map((feature, idx) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2 group", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mb-6 text-muted line-clamp-3 lg:line-clamp-4", children: item.description }),
+                      item.features && item.features.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2 mb-6 overflow-y-auto max-h-32 lg:max-h-48", children: item.features.map((feature, idx) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2 group", children: [
                         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-0.5 w-4 h-4 rounded-full bg-gradient-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" }) }) }),
                         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted group-hover:text-main font-medium text-xs transition-colors", children: feature })
                       ] }, idx)) }),
@@ -4156,7 +4319,7 @@ var __async = (__this, __arguments, generator) => {
                         {
                           href: item.slug,
                           rel: "noopener noreferrer",
-                          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`,
+                          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 mt-auto`,
                           onClick: (e) => {
                             if (!e.ctrlKey && !e.metaKey && e.button !== 1) {
                               e.preventDefault();
@@ -4249,6 +4412,20 @@ var __async = (__this, __arguments, generator) => {
                             linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
           background-size: 50px 50px;
         }
+
+        .line-clamp-3 {
+          display: -webkit-box;
+          -webkit-line-clamp: 3;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+
+        .line-clamp-4 {
+          display: -webkit-box;
+          -webkit-line-clamp: 4;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
       ` })
         ]
       }