npm - ecomlab-components-next - Versions diffs - 0.1.251 → 0.1.253 - Mend

ecomlab-components-next 0.1.251 → 0.1.253

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 (9) hide show

package/dist/components/ConstructorComponents/HeaderV2/HeaderV2.js CHANGED Viewed

@@ -17,20 +17,14 @@ require("./HeaderV2.scss");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-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 HeaderV2 = function HeaderV2(_ref) {
+  var _window;
   var _ref$services = _ref.services,
     services = _ref$services === void 0 ? false : _ref$services,
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? "Управляйте бизнесом на маркетплейсах из единого окна" : _ref$title,
     _ref$description = _ref.description,
     description = _ref$description === void 0 ? "ECOMRU — решения для аналитики, автоматизации и роста продаж на всех популярных маркетплейсах." : _ref$description,
-    img = _ref.img,
     color = _ref.color,
     name_service = _ref.name_service,
     icon_service = _ref.icon_service,
@@ -40,53 +34,34 @@ var HeaderV2 = function HeaderV2(_ref) {
     linkMain = _ref$linkMain === void 0 ? 'https://lk.ecomru.ru' : _ref$linkMain,
     _ref$badgeText = _ref.badgeText,
     badgeText = _ref$badgeText === void 0 ? "Экосистема для селлеров и брендов" : _ref$badgeText;
-  var _useState = (0, _react.useState)(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    refPage = _useState2[0],
-    setRefPage = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    showDropBox = _useState4[0],
-    setShowDropBox = _useState4[1];
-  (0, _react.useEffect)(function () {
-    var _window;
-    var currentUrl = (_window = window) === null || _window === void 0 || (_window = _window.location) === null || _window === void 0 ? void 0 : _window.href;
-    setRefPage("?ref_page=".concat(currentUrl));
-  }, []);
+  var currentUrl = (_window = window) === null || _window === void 0 || (_window = _window.location) === null || _window === void 0 ? void 0 : _window.search;
   return /*#__PURE__*/_react["default"].createElement("header", {
-    className: "landing-header2"
+    className: "header-v2"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "landing-header2__content ".concat(!services ? 'landing-header2__content--centered' : '')
+    className: "header-v2__inner ".concat(!services ? 'header-v2__inner-centered' : '')
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "landing-header2__info-content"
+    className: "header-v2__info ".concat(!services ? 'header-v2__info-centered' : '')
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "landing-header2__badge"
-  }, /*#__PURE__*/_react["default"].createElement("svg", {
-    viewBox: "0 0 20 20",
-    fill: "currentColor",
-    width: "14",
-    height: "14"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M10 2a8 8 0 100 16A8 8 0 0010 2zm1 11H9V9h2v4zm0-6H9V5h2v2z"
-  })), badgeText), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "landing-header2__img-box"
+    className: "header-v2__badge"
+  }, badgeText), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "header-v2__icons ".concat(!services ? 'header-v2__icons-centered' : '')
   }, arrIcon ? arrIcon.map(function (el, ind) {
     return /*#__PURE__*/_react["default"].createElement(_image["default"], {
-      className: "landing-header2__img-icon",
+      className: "header-v2__icon",
       alt: "icon",
       key: el + ind,
       src: el
     });
   }) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !hideYandex && /*#__PURE__*/_react["default"].createElement(_image["default"], {
-    className: "landing-header2__img-yandex",
+    className: "header-v2__icon",
     src: _YandexMarket["default"],
     alt: "\u042F\u043D\u0434\u0435\u043A\u0441 \u041C\u0430\u0440\u043A\u0435\u0442"
   }), /*#__PURE__*/_react["default"].createElement(_image["default"], {
-    className: "landing-header2__img-ozon",
+    className: "header-v2__icon",
     src: _Ozon["default"],
     alt: "OZON"
   }), /*#__PURE__*/_react["default"].createElement(_image["default"], {
-    className: "landing-header2__img-wb",
+    className: "header-v2__icon",
     src: _WB["default"],
     alt: "Wildberries"
   })), (name_service || icon_service) && (Array.isArray(name_service) ? name_service === null || name_service === void 0 ? void 0 : name_service.map(function (el, ind) {
@@ -95,7 +70,7 @@ var HeaderV2 = function HeaderV2(_ref) {
       style: {
         background: (color === null || color === void 0 ? void 0 : color[ind]) || ''
       },
-      className: "landing-header2__service-box"
+      className: "header-v2__service"
     }, /*#__PURE__*/_react["default"].createElement(_image["default"], {
       src: icon_service === null || icon_service === void 0 ? void 0 : icon_service[ind],
       alt: "icon"
@@ -104,19 +79,19 @@ var HeaderV2 = function HeaderV2(_ref) {
     style: {
       background: color || ''
     },
-    className: "landing-header2__service-box"
+    className: "header-v2__service"
   }, /*#__PURE__*/_react["default"].createElement(_image["default"], {
     src: icon_service,
     alt: "icon"
   }), name_service))), /*#__PURE__*/_react["default"].createElement("h1", {
-    className: "landing-header2__title"
+    className: "header-v2__title"
   }, title), description && /*#__PURE__*/_react["default"].createElement("h2", {
-    className: "landing-header2__description"
+    className: "header-v2__description ".concat(!services ? 'header-v2__description-centered' : '')
   }, description), /*#__PURE__*/_react["default"].createElement(_ButtonBasicV["default"], {
     green: true,
     onClick: function onClick() {
       var _window2;
-      return (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.open("".concat(linkMain, "/auth").concat(refPage), '_blank');
+      return (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.open("".concat(linkMain, "/auth").concat(currentUrl), '_blank');
     },
     text: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0431\u0435\u0441\u043F\u043B\u0430\u0442\u043D\u043E",
     maxWidth: "430px",

package/dist/components/ConstructorComponents/HeaderV2/HeaderV2.scss CHANGED Viewed

@@ -1,60 +1,40 @@
 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
 @import '../variables.scss';
-.landing-header2 {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.header-v2 {
+    font-family: 'Manrope', sans-serif;
     background: linear-gradient(160deg, #F0F1FF 0%, #F7F8FC 50%, #FFFFFF 100%);
-    padding: 96px 48px;
+    width: 100%;
+    padding: 96px 40px;
-    * {
-        font-family: 'Manrope', 'Golos Text', sans-serif !important;
-    }
-    &__content {
+    &__inner {
+        max-width: 1280px;
+        margin: 0 auto;
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 48px;
         align-items: center;
-        max-width: 1280px;
         width: 100%;
-        margin: 0 auto;
-        // Когда нет ServicesSection — контент центрируется
-        &--centered {
-            grid-template-columns: 1fr;
-            max-width: 900px;
-            justify-items: center;
-            .landing-header2__info-content {
-                max-width: 100%;
-                text-align: center;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-            }
-            .landing-header2__description {
-                max-width: 600px;
-                margin-left: auto;
-                margin-right: auto;
-            }
-            .landing-header2__img-box {
-                justify-content: center;
-            }
-        }
     }
-    * {
-        font-family: 'Manrope', 'Golos Text', sans-serif !important;
+    &__inner-centered {
+        grid-template-columns: 1fr;
+        max-width: 900px;
+        justify-items: center;
     }
-    &__info-content {
+    &__info {
         animation: fadeUp 0.6s ease both;
     }
+    &__info-centered {
+        max-width: 100%;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
     &__badge {
         display: inline-flex;
         align-items: center;
@@ -74,7 +54,7 @@
         }
     }
-    &__img-box {
+    &__icons {
         display: flex;
         align-items: center;
         gap: 12px;
@@ -82,16 +62,17 @@
         margin-bottom: 16px;
     }
-    &__img-yandex,
-    &__img-ozon,
-    &__img-wb,
-    &__img-icon {
+    &__icons-centered {
+        justify-content: center;
+    }
+    &__icon {
         height: 32px;
         width: auto;
         object-fit: contain;
     }
-    &__service-box {
+    &__service {
         display: flex;
         align-items: center;
         gap: 8px;
@@ -126,6 +107,16 @@
         font-weight: 400;
     }
+    &__description-centered {
+        max-width: 600px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    &__right {
+        min-width: 280px;
+    }
     @keyframes fadeUp {
         from {
             opacity: 0;
@@ -137,17 +128,12 @@
         }
     }
-    // ========== МОБИЛЬНАЯ ВЕРСТКА ==========
-    @media (max-width: 900px) {
+    // Планшет (до 1100px)
+    @media (max-width: 1100px) {
         padding: 48px 24px;
-        &__content {
-            grid-template-columns: 1fr;
+        &__inner {
             gap: 32px;
-            &--centered {
-                grid-template-columns: 1fr;
-            }
         }
         &__title {
@@ -164,21 +150,18 @@
             text-align: center;
         }
-        &__img-box {
+        &__icons {
             gap: 8px;
         }
-        &__img-yandex,
-        &__img-ozon,
-        &__img-wb,
-        &__img-icon {
+        &__icon {
             height: 28px;
         }
-        &__service-box {
+        &__service {
             padding: 4px 12px;
             font-size: 12px;
             img {
                 width: 16px;
                 height: 16px;
@@ -186,42 +169,59 @@
         }
     }
-    @media (max-width: 640px) {
-        padding: 32px 16px;
+    // Когда правый блок достигает минимальной ширины - переносим
+    @media (max-width: 900px) {
+        &__inner {
+            grid-template-columns: 1fr;
+            gap: 48px;
+        }
+        &__right {
+            min-width: auto;
+        }
+    }
+    // Мобильная версия (до 430px)
+    @media (max-width: 430px) {
+        padding: 40px 20px;
+        &__inner {
+            gap: 32px;
+        }
         &__title {
-            font-size: 28px;
+            font-size: 24px;
+            letter-spacing: -0.5px;
+        }
+        &__description {
+            font-size: 13px;
+            margin-bottom: 24px;
         }
         &__badge {
-            font-size: 12px;
-            padding: 4px 12px;
+            font-size: 11px;
+            padding: 4px 10px;
+            margin-bottom: 16px;
         }
-        &__img-box {
+        &__icons {
             gap: 6px;
+            margin-bottom: 12px;
         }
-        &__img-yandex,
-        &__img-ozon,
-        &__img-wb,
-        &__img-icon {
-            height: 24px;
+        &__icon {
+            height: 22px;
         }
-        &__service-box {
-            padding: 4px 10px;
-            font-size: 11px;
+        &__service {
+            padding: 3px 8px;
+            font-size: 10px;
             img {
-                width: 14px;
-                height: 14px;
+                width: 12px;
+                height: 12px;
             }
         }
-        &__description {
-            font-size: 13px;
-            margin-bottom: 24px;
-        }
     }
 }

package/dist/components/ConstructorComponents/MainContainer/MainContainerV2.stories.js CHANGED Viewed

@@ -188,9 +188,7 @@ var MainContainerTest = exports.MainContainerTest = function MainContainerTest()
     }, "\u0435\u0434\u0438\u043D\u043E\u0439 \u043F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u044B")),
     description: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "\u041E\u0434\u043D\u0430 \u043F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u0430 \u0434\u043B\u044F \u0443\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u044F \u043C\u0430\u0433\u0430\u0437\u0438\u043D\u0430\u043C\u0438 \u043D\u0430 Wildberries, Ozon \u0438 \u042F\u043D\u0434\u0435\u043A\u0441 \u041C\u0430\u0440\u043A\u0435\u0442", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\u0411\u043E\u043B\u0435\u0435 20 \u0438\u043D\u0441\u0442\u0440\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u0434\u043B\u044F \u0430\u043D\u0430\u043B\u0438\u0442\u0438\u043A\u0438 \u0438 \u043E\u043F\u0442\u0438\u043C\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u0438\u0437\u043D\u0435\u0441\u0430", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\u041C\u043E\u043D\u0438\u0442\u043E\u0440\u0438\u043D\u0433 \u043A\u043E\u043D\u043A\u0443\u0440\u0435\u043D\u0442\u043E\u0432, \u0440\u0430\u0431\u043E\u0442\u0430 \u0441 \u0442\u043E\u0432\u0430\u0440\u0430\u043C\u0438, \u0430\u0432\u0442\u043E\u043E\u0442\u0432\u0435\u0442\u044B \u043D\u0430 \u043E\u0442\u0437\u044B\u0432\u044B, CRM, \u0446\u0435\u043D\u043E\u043E\u0431\u0440\u0430\u0437\u043E\u0432\u0430\u043D\u0438\u0435, \u043C\u0430\u0440\u043A\u0435\u0442\u0438\u043D\u0433 \u0438 \u043C\u043D\u043E\u0433\u043E\u0435 \u0434\u0440\u0443\u0433\u043E\u0435 \u043D\u0430 \u043E\u0434\u043D\u043E\u0439 \u043F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u0435"),
     color: "#00B45E"
-  }), /*#__PURE__*/_react["default"].createElement(_MarqueImgsV["default"], {
-    hideTitle: true
-  }), /*#__PURE__*/_react["default"].createElement(_BlocksInfoV["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(_MarqueImgsV["default"], null), /*#__PURE__*/_react["default"].createElement(_BlocksInfoV["default"], {
     title: "\u0412\u043E\u0437\u043C\u043E\u0436\u043D\u043E\u0441\u0442\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u0430",
     list: possibilities_list
   }), /*#__PURE__*/_react["default"].createElement(_CardsServicesV["default"], null), /*#__PURE__*/_react["default"].createElement(_CardsV["default"], null), /*#__PURE__*/_react["default"].createElement(_FeaturesGridV["default"], {

package/dist/components/ConstructorComponents/MarqueImgsV2/MarqueImgsV2.js CHANGED Viewed

@@ -31,10 +31,10 @@ var MarqueImgsV2 = function MarqueImgsV2(_ref) {
     _ref$list = _ref.list,
     list = _ref$list === void 0 ? marquee : _ref$list;
   return /*#__PURE__*/_react["default"].createElement("section", {
-    className: 'section-marquee2'
+    className: "marquee-v2"
   }, !hideTitle && /*#__PURE__*/_react["default"].createElement("h2", {
-    className: 'section-marquee2__title'
-  }, title ? title : "\u041D\u0430c \u0432\u044B\u0431\u0438\u0440\u0430\u044E\u0442"), /*#__PURE__*/_react["default"].createElement(_reactFastMarquee["default"], {
+    className: "marquee-v2__title"
+  }, title ? title : "\u041D\u0430\u0441 \u0432\u044B\u0431\u0438\u0440\u0430\u044E\u0442"), /*#__PURE__*/_react["default"].createElement(_reactFastMarquee["default"], {
     scrollWhen: 'always',
     autoFill: true
   }, list === null || list === void 0 ? void 0 : list.map(function (el, ind) {

package/dist/components/ConstructorComponents/MarqueImgsV2/MarqueImgsV2.scss CHANGED Viewed

@@ -1,14 +1,16 @@
 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
+@import '../variables.scss';
-.section-marquee2 {
+.marquee-v2 {
+    font-family: 'Manrope', sans-serif;
     display: flex;
     width: 100%;
     flex-direction: column;
     gap: 28px;
-    padding: 36px 0px;
-    border-top: 1px solid var(--border);
-    border-bottom: 1px solid var(--border);
-    background: #fff;
+    padding: 36px 0;
+    border-top: 1px solid $border;
+    border-bottom: 1px solid $border;
+    background: $white;
     * {
         font-family: 'Manrope', 'Golos Text', sans-serif !important;
@@ -20,37 +22,35 @@
         font-size: 30px;
         font-weight: 800;
         letter-spacing: -0.5px;
-        color: var(--text);
-        margin: 0 0 8px;
+        color: $text;
+        margin: 0 auto 8px auto;
     }
     img {
         margin-right: 100px;
         max-height: 24px;
         width: auto;
+        object-fit: contain;
     }
-}
-@media (max-width: 1000px) {
-    .section-marquee2 {
+    // Планшет (до 1100px)
+    @media (max-width: 1100px) {
+        padding: 36px 0;
         gap: 24px;
         &__title {
-            font-size: 28px;
+            font-size: 26px;
         }
         img {
             margin-right: 70px;
-            max-height: 70px;
-            width: auto;
+            max-height: 22px;
         }
     }
-}
-@media (max-width: 430px) {
-    .section-marquee2 {
+    // Мобильная версия (до 430px)
+    @media (max-width: 430px) {
+        padding: 22px 0;
         gap: 16px;
         &__title {
@@ -59,8 +59,7 @@
         img {
             margin-right: 40px;
-            max-height: 40px;
-            width: auto;
+            max-height: 18px;
         }
     }
 }

package/dist/components/ConstructorComponents/ServicesSectionV2/ServicesSectionV2.js CHANGED Viewed

@@ -85,9 +85,31 @@ var list_default = [{
   description: "\u0410\u0432\u0442\u043E\u043C\u0430\u0442\u0438\u0437\u0438\u0440\u0443\u0439 \u0443\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u0435 \u0446\u0435\u043D\u0430\u043C\u0438 \u043F\u0440\u0438 \u043F\u043E\u043C\u043E\u0449\u0438 \u0443\u0434\u043E\u0431\u043D\u043E\u0433\u043E \u0438\u043D\u0441\u0442\u0440\u0443\u043C\u0435\u043D\u0442\u0430 \u0434\u043B\u044F \u043C\u0430\u0440\u043A\u0435\u0442\u043F\u043B\u0435\u0439\u0441\u043E\u0432",
   img: "https://file.ecomru.ru:4453/api/v1/file/download/2de5ce62-e17c-4ccc-9c7b-c4c6cca40748"
 }];
-var ServicesSectionV2 = function ServicesSectionV2(_ref) {
-  var _ref$items = _ref.items,
-    items = _ref$items === void 0 ? list_default : _ref$items;
+// Компонент заглушки
+var ImagePlaceholder = function ImagePlaceholder(_ref) {
+  var title = _ref.title;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "services-v2__image-placeholder"
+  }, /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "80",
+    height: "80",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19Z",
+    fill: "#6B7280"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M14.5 12L11 16.5L8.5 13.5L5 18H19L14.5 12Z",
+    fill: "#6B7280"
+  })), /*#__PURE__*/_react["default"].createElement("span", null, title));
+};
+var ServicesSectionV2 = function ServicesSectionV2(_ref2) {
+  var _window;
+  var _ref2$items = _ref2.items,
+    items = _ref2$items === void 0 ? list_default : _ref2$items;
+  var currentUrl = (_window = window) === null || _window === void 0 || (_window = _window.location) === null || _window === void 0 ? void 0 : _window.search;
   var _useState = (0, _react.useState)(items[0]),
     _useState2 = _slicedToArray(_useState, 2),
     activeItem = _useState2[0],
@@ -106,57 +128,59 @@ var ServicesSectionV2 = function ServicesSectionV2(_ref) {
         var nextIndex = (currentIndex + 1) % items.length;
         return items[nextIndex];
       });
-    }, 3000); // Change every 3 seconds (adjust as needed)
+    }, 3000);
     return function () {
       return clearInterval(interval);
     };
   }, [items, isAutoPlaying]);
-  // Optional: Pause auto-play when user clicks on an item
   var handleItemClick = function handleItemClick(item) {
     setActiveItem(item);
     setIsAutoPlaying(false);
-    // Optional: Resume auto-play after 10 seconds of inactivity
     setTimeout(function () {
       setIsAutoPlaying(true);
     }, 10000);
   };
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "services-section-v2"
+    className: "services-v2"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "services-container"
+    className: "services-v2__container"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "services-sidebar"
+    className: "services-v2__sidebar"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "services-logo"
+    className: "services-v2__logo"
   }, "ECOM", /*#__PURE__*/_react["default"].createElement("span", null, "RU")), items.map(function (item, idx) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: idx,
-      className: "services-nav-item ".concat(activeItem.title === item.title ? 'active' : ''),
+      className: "services-v2__nav-item ".concat(activeItem.title === item.title ? 'services-v2__nav-item--active' : ''),
       onClick: function onClick() {
         return handleItemClick(item);
       }
     }, /*#__PURE__*/_react["default"].createElement("span", null, item.title));
   })), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "services-main"
+    className: "services-v2__main"
   }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "services-title"
+    className: "services-v2__title"
   }, activeItem.title), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "services-content-text"
-  }, /*#__PURE__*/_react["default"].createElement("p", {
-    className: "services-description"
-  }, activeItem.description), /*#__PURE__*/_react["default"].createElement("a", {
-    href: activeItem.link,
-    className: "services-link"
-  }, "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043A \u0441\u0435\u0440\u0432\u0438\u0441\u0443 \u2192")), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "services-content"
+    className: "services-v2__content"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "services-content-image"
-  }, /*#__PURE__*/_react["default"].createElement("img", {
+    className: "services-v2__image"
+  }, activeItem.img ? /*#__PURE__*/_react["default"].createElement("img", {
     src: activeItem.img,
     alt: activeItem.title
-  }))))));
+  }) : /*#__PURE__*/_react["default"].createElement(ImagePlaceholder, {
+    title: activeItem.title
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "services-v2__text"
+  }, /*#__PURE__*/_react["default"].createElement("p", {
+    className: "services-v2__description"
+  }, activeItem.description), /*#__PURE__*/_react["default"].createElement("a", {
+    onClick: function onClick(e) {
+      var _window2;
+      e.preventDefault();
+      (_window2 = window) === null || _window2 === void 0 || _window2.open("https://lk.ecomru.ru/auth".concat(currentUrl), '_blank');
+    },
+    href: activeItem.link,
+    className: "services-v2__link"
+  }, "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043A \u0441\u0435\u0440\u0432\u0438\u0441\u0443 \u2192"))))));
 };
 var _default = exports["default"] = ServicesSectionV2;

package/dist/components/ConstructorComponents/ServicesSectionV2/ServicesSectionV2.scss CHANGED Viewed

@@ -1,245 +1,277 @@
 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
 @import '../variables.scss';
-$purple: #6B5CE7;
-$purple-light: #EEF0FF;
-$purple-dark: #5448D0;
-$green: #22C55E;
-$text: #1A1A2E;
-$muted: #6B7280;
-$border: #E5E7EB;
-$bg: #F7F8FC;
-$white: #FFFFFF;
-.services-section-v2 {
+.services-v2 {
     background: $white;
     border-radius: 16px;
     box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
     border: 1px solid $border;
     overflow: hidden;
+    width: 100%;
     * {
         font-family: 'Manrope', 'Golos Text', sans-serif !important;
     }
-}
-.services-container {
-    display: flex;
-    flex-direction: row;
-    height: 400px;
-    @media (max-width: 900px) {
-        flex-direction: column;
+    &__container {
+        display: flex;
+        flex-direction: row;
+        min-height: 400px;
     }
-}
-// Sidebar styles
-.services-sidebar {
-    width: 160px;
-    flex-shrink: 0;
-    border-right: 1px solid $border;
-    padding: 16px 0;
-    background: $white;
-    overflow-y: auto;
+    &__sidebar {
+        width: 160px;
+        flex-shrink: 0;
+        border-right: 1px solid $border;
+        padding: 16px 0;
+        background: $white;
+        overflow-y: auto;
+        max-height: 450px;
+    }
-    @media (max-width: 900px) {
-        width: 100%;
-        border-right: none;
+    &__logo {
+        padding: 0 16px 16px;
+        font-size: 16px;
+        font-weight: 800;
         border-bottom: 1px solid $border;
-        max-height: 300px;
+        margin-bottom: 8px;
+        span {
+            color: $green;
+        }
+    }
+    &__nav-item {
         display: flex;
-        flex-wrap: wrap;
-        padding: 12px;
+        align-items: center;
+        gap: 10px;
+        padding: 6px 16px;
+        font-size: 13px;
+        font-weight: 500;
+        color: $muted;
+        cursor: pointer;
+        transition: all 0.15s;
+        &:hover {
+            background: $bg;
+            color: $text;
+        }
+        &--active {
+            color: $green-dark;
+            background: $green-light-bg;
+            border-radius: 6px;
+            margin: 0 8px;
+            padding: 6px 8px;
+            font-weight: 600;
+        }
+    }
+    &__main {
+        display: flex;
+        flex-direction: column;
         gap: 8px;
+        flex: 1;
+        padding: 20px;
+        background: $bg;
     }
-}
-.services-logo {
-    padding: 0 16px 16px;
-    font-size: 16px;
-    font-weight: 800;
-    border-bottom: 1px solid $border;
-    margin-bottom: 8px;
+    &__title {
+        font-size: 18px;
+        font-weight: 700;
+        color: $text;
+    }
-    span {
-        color: $green;
+    &__content {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+        border-radius: 12px;
     }
-    @media (max-width: 900px) {
-        width: 100%;
-        text-align: center;
-        border-bottom: none;
-        padding-bottom: 8px;
+    &__text {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
     }
-}
-.services-nav-item {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 6px 16px;
-    font-size: 13px;
-    font-weight: 500;
-    color: $muted;
-    cursor: pointer;
-    transition: all 0.15s;
-    &:hover {
-        background: $bg;
+    &__description {
+        font-size: 13px;
         color: $text;
+        line-height: 1.6;
+        margin-bottom: 8px;
     }
-    &.active {
-        color: $green-dark;
-        background: $green-light-bg;
-        border-radius: 6px;
-        margin: 0 8px;
-        padding: 6px 8px;
+    &__link {
+        color: $green;
+        font-size: 14px;
         font-weight: 600;
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        transition: gap 0.2s;
+        cursor: pointer;
+        &:hover {
+            gap: 10px;
+        }
+    }
-        .services-nav-dot {
-            background: $green;
+    &__image {
+        display: flex;
+        flex: 1;
+        justify-content: center;
+        align-items: center;
+        aspect-ratio: 16 / 9;
+        background-color: #fff;
+        border-radius: 8px;
+        padding: 8px;
+        border: 1px solid $border;
+        img {
+            max-width: 100%;
+            max-height: 100%;
+            width: auto;
+            height: auto;
+            object-fit: contain;
+            border-radius: 8px;
         }
     }
-    @media (max-width: 900px) {
-        flex: 0 0 auto;
-        padding: 8px 14px;
-        border-radius: 20px;
+    &__image-placeholder {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        padding: 32px;
+        background: $bg;
+        border-radius: 12px;
+        width: 100%;
+        aspect-ratio: 16 / 9;
-        &.active {
-            margin: 0;
-            padding: 8px 14px;
+        svg {
+            width: 48px;
+            height: 48px;
+            opacity: 0.4;
+        }
+        span {
+            font-size: 13px;
+            color: $muted;
         }
     }
 }
-.services-nav-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: $muted;
-    transition: background 0.15s;
-}
+// Планшет (до 1100px)
+@media (max-width: 1100px) {
+    .services-v2 {
+        &__main {
+            padding: 16px;
+        }
-// Main content styles
-.services-main {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    flex: 1;
-    padding: 20px;
-    background: $bg;
+        &__content {
+            gap: 16px;
+        }
+    }
 }
-.services-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
-    flex-wrap: wrap;
-    gap: 12px;
-}
+// Перенос сайдбара (до 900px)
+@media (max-width: 900px) {
+    .services-v2 {
+        &__container {
+            flex-direction: column;
+            min-height: auto;
+        }
-.services-title {
-    font-size: 18px;
-    font-weight: 700;
-    color: $text;
-}
+        &__sidebar {
+            width: 100%;
+            border-right: none;
+            border-bottom: 1px solid $border;
+            display: flex;
+            flex-wrap: wrap;
+            padding: 12px;
+            gap: 8px;
+            overflow-x: auto;
+            max-height: none;
+        }
-.services-header-right {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    flex-wrap: wrap;
-}
+        &__logo {
+            width: 100%;
+            text-align: center;
+            border-bottom: none;
+            padding-bottom: 8px;
+        }
-.services-date {
-    font-size: 11px;
-    color: $muted;
-}
+        &__nav-item {
+            flex: 0 0 auto;
+            padding: 8px 14px;
+            border-radius: 20px;
-.services-export {
-    font-size: 11px;
-    font-weight: 600;
-    color: $muted;
-    border: 1px solid $border;
-    padding: 4px 10px;
-    border-radius: 6px;
-    background: $white;
-    cursor: pointer;
-    transition: all 0.2s;
+            &--active {
+                margin: 0;
+                padding: 8px 14px;
+            }
+        }
-    &:hover {
-        border-color: $green;
-        color: $green;
+        &__main {
+            overflow: visible;
+        }
     }
 }
-// Content area with image and description
-.services-content {
-    display: flex;
-    gap: 24px;
-    background: $white;
-    border-radius: 12px;
+// Мобильная версия (до 768px)
+@media (max-width: 768px) {
+    .services-v2 {
+        &__content {
+            flex-direction: column;
+            padding: 16px;
+        }
-    @media (max-width: 768px) {
-        flex-direction: column;
-        padding: 16px;
+        &__text {
+            min-width: auto;
+        }
+        &__image-placeholder {
+            min-height: 160px;
+        }
     }
 }
-.services-content-text {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
+// Мобильная версия (до 430px)
+@media (max-width: 430px) {
+    .services-v2 {
+        &__main {
+            padding: 12px;
+        }
-.services-description {
-    font-size: 13px;
-    color: $text;
-    line-height: 1.6;
-    margin-bottom: 8px;
-}
+        &__title {
+            font-size: 16px;
+        }
-.services-link {
-    color: $green;
-    font-size: 14px;
-    font-weight: 600;
-    text-decoration: none;
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    transition: gap 0.2s;
-    &:hover {
-        gap: 10px;
-    }
-}
+        &__description {
+            font-size: 12px;
+        }
-.services-content-image {
-    display: flex;
+        &__link {
+            font-size: 13px;
+        }
-    img {
-        max-width: 100%;
-        object-fit: contain;
-        border-radius: 8px;
-    }
-}
+        &__content {
+            gap: 12px;
+            padding: 12px;
+        }
-// Chart area
-.services-chart-area {
-    background: $white;
-    border-radius: 10px;
-    border: 1px solid $border;
-    padding: 16px;
-    height: 100px;
-    position: relative;
-    overflow: hidden;
-}
+        &__image-placeholder {
+            min-height: 140px;
+            padding: 20px;
-.services-chart-svg {
-    width: 100%;
-    height: 100%;
+            svg {
+                width: 40px;
+                height: 40px;
+            }
+        }
+    }
 }

package/dist/components/ConstructorComponents/variables.scss CHANGED Viewed

@@ -1,37 +1,3 @@
-// styles/variables.scss
-// ========== ЦВЕТА ==========
-// * {
-//     // Фиолетовые акценты
-//     --purple: #6B5CE7;
-//     --purple-light: #EEF0FF;
-//     --purple-dark: #5448D0;
-//     // Зеленые цвета
-//     --green: #059669;
-//     --green-light: #10B981;
-//     --green-dark: #047857;
-//     --green-forest: #064E3B;
-//     --green-light-bg: #D1FAE5;
-//     --green-mint-bg: #A7F3D0;
-//     // Нейтральные цвета
-//     --text: #1A1A2E;
-//     --muted: #6B7280;
-//     --border: #E5E7EB;
-//     --bg: #F7F8FC;
-//     --white: #FFFFFF;
-//     // Градиенты
-//     --gradient-green: linear-gradient(135deg, var(--green) 0%, var(--green-light) 100%);
-//     --gradient-bg: linear-gradient(160deg, #F0F1FF 0%, var(--bg) 50%, var(--white) 100%);
-// }
-// SCSS переменные (для использования в миксинах и внутри стилей)
-$purple: #6B5CE7;
-$purple-light: #EEF0FF;
-$purple-dark: #5448D0;
 $green: #059669;
 $green-light: #10B981;
 $green-dark: #047857;
@@ -46,5 +12,5 @@ $bg: #F7F8FC;
 $white: #FFFFFF;
 // Брейкпоинты
-$tablet: 900px;
-$mobile: 640px;
+$tablet: 1100px;
+$mobile: 4030px;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "ecomlab-components-next",
-  "version": "0.1.251",
+  "version": "0.1.253",
   "description": "A set of common and reusable React components",
   "main": "dist/index.js",
   "files": [