ecomlab-components-next 0.1.290 → 0.1.292

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

@@ -21,6 +21,7 @@ var HeaderV2 = function HeaderV2(_ref) {
   var _window;
   var _ref$services = _ref.services,
     services = _ref$services === void 0 ? false : _ref$services,
+    img = _ref.img,
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? "Управляйте бизнесом на маркетплейсах из единого окна" : _ref$title,
     _ref$description = _ref.description,
@@ -37,18 +38,22 @@ var HeaderV2 = function HeaderV2(_ref) {
     _ref$btnText = _ref.btnText,
     btnText = _ref$btnText === void 0 ? 'Попробовать бесплатно' : _ref$btnText,
     _ref$onClick = _ref.onClick,
-    _onClick = _ref$onClick === void 0 ? false : _ref$onClick;
+    _onClick = _ref$onClick === void 0 ? false : _ref$onClick,
+    background = _ref.background;
   var currentUrl = typeof window !== 'undefined' ? (_window = window) === null || _window === void 0 || (_window = _window.location) === null || _window === void 0 ? void 0 : _window.search : '';
   return /*#__PURE__*/_react["default"].createElement("header", {
-    className: "header-v2"
+    className: "header-v2",
+    style: {
+      background: background || ''
+    }
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "header-v2__inner ".concat(!services ? 'header-v2__inner-centered' : '')
+    className: "header-v2__inner ".concat(!(services || img) ? 'header-v2__inner-centered' : '')
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "header-v2__info ".concat(!services ? 'header-v2__info-centered' : '')
+    className: "header-v2__info ".concat(!(services || img) ? 'header-v2__info-centered' : '')
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "header-v2__badge"
   }, badgeText), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "header-v2__icons ".concat(!services ? 'header-v2__icons-centered' : '')
+    className: "header-v2__icons ".concat(!(services || img) ? 'header-v2__icons-centered' : '')
   }, arrIcon ? arrIcon.map(function (el, ind) {
     return /*#__PURE__*/_react["default"].createElement(_image["default"], {
       className: "header-v2__icon",
@@ -90,7 +95,7 @@ var HeaderV2 = function HeaderV2(_ref) {
   }), name_service))), /*#__PURE__*/_react["default"].createElement("h1", {
     className: "header-v2__title"
   }, title), description && /*#__PURE__*/_react["default"].createElement("h2", {
-    className: "header-v2__description ".concat(!services ? 'header-v2__description-centered' : '')
+    className: "header-v2__description ".concat(!(services || img) ? 'header-v2__description-centered' : '')
   }, description), /*#__PURE__*/_react["default"].createElement(_ButtonBasicV["default"], {
     green: true,
     onClick: function onClick() {
@@ -107,6 +112,10 @@ var HeaderV2 = function HeaderV2(_ref) {
     maxWidth: "430px",
     width: "100%",
     size: "52px"
-  })), services && /*#__PURE__*/_react["default"].createElement(_ServicesSectionV["default"], null)));
+  })), services && /*#__PURE__*/_react["default"].createElement(_ServicesSectionV["default"], null), img && /*#__PURE__*/_react["default"].createElement(_image["default"], {
+    className: "header-v2__banner",
+    alt: "banner",
+    src: img
+  })));
 };
 var _default = exports["default"] = HeaderV2;

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

@@ -117,10 +117,32 @@
         margin-right: auto;
     }
 
+    // Right column container
     &__right {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         min-width: 280px;
     }
 
+    // Banner styles
+    &__banner {
+        width: 100%;
+        height: auto;
+        max-width: 100%;
+        object-fit: contain;
+        animation: fadeUp 0.6s ease both 0.2s;
+        display: block;
+        border-radius: 16px;
+        background: $white;
+        overflow: hidden;
+        min-height: 400px;
+        padding: 8px;
+        background-color: #fff;
+        flex: 1;
+    }
+
     // Планшет (до 1100px)
     @media (max-width: 1100px) {
         padding: 48px 24px;
@@ -160,17 +182,37 @@
                 height: 16px;
             }
         }
+
+        &__banner {
+            min-height: 320px;
+            border-radius: 12px;
+        }
     }
 
-    // Когда правый блок достигает минимальной ширины - переносим
+    // Когда правый блок достигает минимальной ширины - переносим и скрываем
     @media (max-width: 900px) {
         &__inner {
-            grid-template-columns: 1fr;
+            grid-template-columns: 1fr !important;
             gap: 48px;
         }
 
         &__right {
             min-width: auto;
+            width: 100%;
+            max-width: 100%;
+            display: none !important; // Скрываем правую колонку с баннером
+        }
+
+        &__banner {
+            display: none !important; // Скрываем баннер
+        }
+
+        &__info {
+            max-width: 100%;
+        }
+
+        &__description {
+            max-width: 100%;
         }
     }
 
@@ -216,5 +258,26 @@
                 height: 12px;
             }
         }
+
+        // Баннер уже скрыт на 900px, но на всякий случай
+        &__right {
+            display: none !important;
+        }
+
+        &__banner {
+            display: none !important;
+        }
+    }
+}
+
+// Animation keyframes
+@keyframes fadeUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
     }
 }

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

@@ -28,6 +28,7 @@ var _VideoBlockV = _interopRequireDefault(require("../VideoBlockV2/VideoBlockV2"
 var _SmartReplies = _interopRequireDefault(require("../SmartReplies/SmartReplies"));
 var _CardsWithButton = _interopRequireDefault(require("../CardsWithButton/CardsWithButton"));
 var _LogosStrip = _interopRequireDefault(require("../LogosStrip/LogosStrip"));
+var _decstope = _interopRequireDefault(require("./img/decstope.jpg"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var cards_list = [{
   sum: 'Аналитика повышает продажи',
@@ -183,15 +184,18 @@ var _default = exports["default"] = {
 var MainContainerTest = exports.MainContainerTest = function MainContainerTest() {
   return /*#__PURE__*/_react["default"].createElement(_MainContainer["default"], {
     className: 'landing-main-container-2'
-  }, /*#__PURE__*/_react["default"].createElement(_HeaderV["default"], {
-    services: true,
+  }, /*#__PURE__*/_react["default"].createElement(_HeaderV["default"]
+  // services
+  , {
     title: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "\u0423\u043F\u0440\u0430\u0432\u043B\u044F\u0439 \u0441\u0432\u043E\u0438\u043C \u0431\u0438\u0437\u043D\u0435\u0441\u043E\u043C \u043D\u0430 3-\u0445 \u0432\u0435\u0434\u0443\u0449\u0438\u0445 \u043C\u0430\u0440\u043A\u0435\u0442\u043F\u043B\u0435\u0439\u0441\u0430\u0445 \u0441 ", /*#__PURE__*/_react["default"].createElement("span", {
       style: {
         color: '#059669'
       }
     }, "\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"
+    color: "#00B45E",
+    img: _decstope["default"],
+    background: '#fff'
   }), /*#__PURE__*/_react["default"].createElement(_TariffPlanV["default"], null), /*#__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

package/dist/components/ConstructorComponents/TariffPlanV2/TariffPlanV2.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ButtonBasicV = _interopRequireDefault(require("../../Buttons/ButtonBasicV2/ButtonBasicV2"));
-var _useReveal = _interopRequireDefault(require("@/common/hooks/useReveal"));
+var _useReveal = _interopRequireDefault(require("../../../common/hooks/useReveal"));
 require("./TariffPlanV2.scss");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 // ─── SVG Icons ────────────────────────────────────────────────────────────────

package/package.json

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