ecomlab-components-next 0.1.257 → 0.1.260

package/dist/components/ConstructorComponents/ClientsAboutUsV2/ClientsAboutUsV2.scss

@@ -1,48 +1,47 @@
 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
 @import '../variables.scss';
 
-.clients-about-us-v2 {
-    padding: 96px 48px;
-    background: #FFFFFF;
-    
-* {
+.clients-about-v2 {
+    font-family: 'Manrope', sans-serif;
+    background: $white;
+    width: 100%;
+    padding: 96px 40px;
+
+    * {
         font-family: 'Manrope', 'Golos Text', sans-serif !important;
     }
-    
-    // Заголовок секции
+
     &__title {
         font-size: 30px;
         font-weight: 800;
         letter-spacing: -0.5px;
         text-align: center;
         margin-bottom: 16px;
-        color: #1A1A2E;
+        color: $text;
     }
-    
-    // Блок с цитатой
+
     &__header {
         text-align: center;
         max-width: 800px;
         margin: 0 auto 48px;
     }
-    
+
     &__blockquote {
         font-size: 18px;
         font-weight: 600;
         line-height: 1.4;
-        color: #1A1A2E;
+        color: $text;
         margin-bottom: 12px;
         quotes: none;
     }
-    
+
     &__cite {
         font-size: 14px;
-        color: #6B7280;
+        color: $muted;
         font-style: normal;
         display: block;
     }
-    
-    // Карточки
+
     &__cards {
         max-width: 1280px;
         margin: 0 auto;
@@ -50,263 +49,139 @@
         grid-template-columns: repeat(2, 1fr);
         gap: 24px;
     }
-    
+
     &__card {
-        background: #F7F8FC;
+        background: $bg;
         border-radius: 20px;
         padding: 32px;
-        border: 1px solid #E5E7EB;
+        border: 1px solid $border;
         transition: transform 0.2s ease, box-shadow 0.2s ease;
         display: flex;
         flex-direction: column;
-        
+
         &:hover {
             transform: translateY(-4px);
             box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
         }
-        
-        &--dark {
-            background: linear-gradient(135deg, #1A1A2E 0%, #064E3B 100%);
+
+        &_dark {
+            background: linear-gradient(135deg, $text 0%, $green-forest 100%);
             border: none;
-            
-            .clients-about-us-v2__card-title {
-                color: #FFFFFF;
+
+            .clients-about-v2__card-title {
+                color: $white;
             }
-            
-            .clients-about-us-v2__card-description {
+
+            .clients-about-v2__description {
                 color: rgba(255, 255, 255, 0.8);
             }
         }
     }
-    
+
     &__card-title {
         font-size: 20px;
         font-weight: 700;
         margin-bottom: 20px;
-        color: #1A1A2E;
+        color: $text;
     }
-    
-    &__card-description {
+
+    &__description {
         font-size: 14px;
         line-height: 1.6;
         color: #4B5563;
         margin-bottom: 28px;
         flex: 1;
-        
+
         br {
             display: block;
             content: "";
             margin-top: 4px;
         }
     }
-    
-    // Кнопки
-    &__card-btn {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
-        padding: 12px 24px;
-        border-radius: 10px;
-        font-size: 14px;
-        font-weight: 600;
-        cursor: pointer;
-        transition: all 0.2s ease;
-        font-family: 'Manrope', sans-serif;
-        width: fit-content;
-        min-width: 160px;
-        
-        &--green {
-            background: #059669;
-            color: #FFFFFF;
-            border: none;
-            
-            &:hover {
-                background: #047857;
-                transform: translateY(-2px);
-                box-shadow: 0 4px 16px rgba(5, 150, 105, 0.35);
-            }
-        }
-        
-        &--outline {
-            background: transparent;
-            color: #059669;
-            border: 1.5px solid #059669;
-            
-            &:hover {
-                background: #D1FAE5;
-                transform: translateY(-2px);
-            }
+
+    @keyframes fadeUp {
+        from {
+            opacity: 0;
+            transform: translateY(24px);
         }
-        
-        &:active {
+
+        to {
+            opacity: 1;
             transform: translateY(0);
         }
     }
 }
 
-// ========== МОБИЛЬНАЯ АДАПТАЦИЯ ==========
+// Планшет (до 1100px)
+@media (max-width: 1100px) {
+    .clients-about-v2 {
+        padding: 72px 24px;
+
+        &__title {
+            font-size: 26px;
+        }
 
-@media (max-width: 900px) {
-    .clients-about-us-v2 {
-        padding: 70px 32px;
-        
         &__cards {
             gap: 20px;
         }
-        
+
         &__card {
             padding: 28px;
         }
-        
+
         &__card-title {
             font-size: 18px;
         }
-        
-        &__card-description {
+
+        &__description {
             font-size: 13px;
         }
     }
 }
 
+// Мобильная версия (до 768px)
 @media (max-width: 768px) {
-    .clients-about-us-v2 {
-        padding: 60px 24px;
-        
-        &__title {
-            font-size: 26px;
-        }
-        
-        &__blockquote {
-            font-size: 16px;
-        }
-        
+    .clients-about-v2 {
+     
         &__cards {
             grid-template-columns: 1fr;
             gap: 24px;
         }
-        
-        &__card {
-            padding: 28px 24px;
-        }
-        
-        &__card-title {
-            font-size: 18px;
-            margin-bottom: 16px;
-        }
-        
-        &__card-description {
-            font-size: 13px;
-            margin-bottom: 24px;
-        }
-        
-        &__card-btn {
-            padding: 10px 20px;
-            font-size: 13px;
-            min-width: 140px;
-        }
     }
 }
 
-@media (max-width: 600px) {
-    .clients-about-us-v2 {
-        padding: 48px 20px;
-        
-        &__title {
-            font-size: 24px;
-            margin-bottom: 12px;
-        }
-        
-        &__header {
-            margin-bottom: 36px;
-        }
-        
-        &__blockquote {
-            font-size: 15px;
-        }
-        
-        &__cite {
-            font-size: 13px;
-        }
-        
-        &__card {
-            padding: 24px 20px;
-        }
-    }
-}
+// Мобильная версия (до 430px)
+@media (max-width: 430px) {
+    .clients-about-v2 {
+        padding: 40px 20px;
 
-@media (max-width: 480px) {
-    .clients-about-us-v2 {
-        padding: 40px 16px;
-        
         &__title {
             font-size: 22px;
         }
-        
+
         &__blockquote {
             font-size: 14px;
         }
-        
-        &__cards {
-            gap: 20px;
-        }
-        
-        &__card {
-            padding: 20px 16px;
-            border-radius: 16px;
-        }
-        
-        &__card-title {
-            font-size: 16px;
-            margin-bottom: 14px;
-        }
-        
-        &__card-description {
-            font-size: 12px;
-            line-height: 1.5;
-            margin-bottom: 20px;
-        }
-        
-        &__card-btn {
-            padding: 10px 18px;
-            font-size: 13px;
-            min-width: 130px;
-            width: 100%;
-        }
-    }
-}
 
-@media (max-width: 375px) {
-    .clients-about-us-v2 {
-        padding: 32px 12px;
-        
-        &__title {
-            font-size: 20px;
-        }
-        
-        &__blockquote {
-            font-size: 13px;
-        }
-        
         &__cite {
             font-size: 12px;
         }
-        
+
         &__card {
             padding: 18px 14px;
         }
-        
+
         &__card-title {
             font-size: 15px;
         }
-        
-        &__card-description {
+
+        &__description {
             font-size: 12px;
         }
-        
-        &__card-btn {
-            padding: 8px 16px;
-            font-size: 12px;
+
+        &__button {
+            max-width: 100% !important;
+            width: 100% !important;
         }
     }
 }

package/dist/components/ConstructorComponents/FeaturesGridV2/FeaturesGridV2.js

@@ -23,21 +23,25 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 var FeaturesGridV2 = function FeaturesGridV2(_ref) {
+  var _window;
   var _ref$list = _ref.list,
     list = _ref$list === void 0 ? [] : _ref$list,
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? '' : _ref$title,
     _ref$description = _ref.description,
-    description = _ref$description === void 0 ? '' : _ref$description;
+    description = _ref$description === void 0 ? '' : _ref$description,
+    _ref$linkMain = _ref.linkMain,
+    linkMain = _ref$linkMain === void 0 ? 'https://lk.ecomru.ru' : _ref$linkMain;
   var blocksRef = (0, _react.useRef)([]);
   var _useState = (0, _react.useState)(0),
     _useState2 = _slicedToArray(_useState, 2),
     maxHeight = _useState2[0],
     setMaxHeight = _useState2[1];
-  var _useState3 = (0, _react.useState)(window.innerWidth),
+  var _useState3 = (0, _react.useState)(typeof window !== 'undefined' ? window.innerWidth : 0),
     _useState4 = _slicedToArray(_useState3, 2),
     windowWidth = _useState4[0],
     setWindowWidth = _useState4[1];
+  var current_query = (_window = window) === null || _window === void 0 || (_window = _window.location) === null || _window === void 0 ? void 0 : _window.search;
   var syncHeight = (0, _react.useCallback)(function () {
     var heights = blocksRef.current.filter(function (el) {
       return el && el.offsetHeight > 0;
@@ -62,32 +66,37 @@ var FeaturesGridV2 = function FeaturesGridV2(_ref) {
       return window.removeEventListener('resize', onResize);
     };
   }, [syncHeight]);
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("section", {
-    className: "fg5"
+  return /*#__PURE__*/_react["default"].createElement("section", {
+    className: "features-grid-v2"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "fg5__inner"
+    className: "features-grid-v2__inner"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "fg5__header"
+    className: "features-grid-v2__header"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "fg5__header-left"
+    className: "features-grid-v2__header-left"
   }, title && /*#__PURE__*/_react["default"].createElement("h2", {
-    className: "fg5__title"
+    className: "features-grid-v2__title"
   }, title), description && /*#__PURE__*/_react["default"].createElement("p", {
-    className: "fg5__subtitle"
+    className: "features-grid-v2__subtitle"
   }, description)), /*#__PURE__*/_react["default"].createElement(_ButtonBasicV["default"], {
+    className: "features-grid-v2__btn",
     size: '52px',
     green: true,
-    text: 'Попробовать бесплатно →'
+    onClick: function onClick() {
+      var _window2;
+      return (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.open("".concat(linkMain, "/auth").concat(current_query), '_blank');
+    },
+    text: 'Попробовать бесплатно'
   })), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "fg5__items"
+    className: "features-grid-v2__items"
   }, list === null || list === void 0 ? void 0 : list.map(function (_ref2, index) {
     var title = _ref2.title,
       description = _ref2.description;
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: index,
-      className: "fg5__card"
+      className: "features-grid-v2__card"
     }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "fg5__card-heading",
+      className: "features-grid-v2__card-heading",
       ref: function ref(el) {
         blocksRef.current[index] = el;
       },
@@ -95,8 +104,8 @@ var FeaturesGridV2 = function FeaturesGridV2(_ref) {
         minHeight: windowWidth > 430 && maxHeight > 0 ? maxHeight : undefined
       }
     }, title), /*#__PURE__*/_react["default"].createElement("p", {
-      className: "fg5__card-text"
+      className: "features-grid-v2__card-text"
     }, description));
-  })))));
+  }))));
 };
 var _default = exports["default"] = /*#__PURE__*/_react["default"].memo(FeaturesGridV2);