ecomlab-components-next 0.1.263 → 0.1.265

package/dist/components/ConstructorComponents/QuestionsV2/QuestionsV2.js

@@ -8,6 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 require("./QuestionsV2.scss");
+var _useReveal = _interopRequireDefault(require("../../../common/hooks/useReveal"));
+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(); }
@@ -24,6 +26,7 @@ var QuestionsV2 = function QuestionsV2(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     currentDrop = _useState2[0],
     setCurrentDrop = _useState2[1];
+  (0, _useReveal["default"])();
   var toggleItem = function toggleItem(question) {
     var newState = new Set(currentDrop);
     if (newState.has(question)) {
@@ -40,7 +43,7 @@ var QuestionsV2 = function QuestionsV2(_ref) {
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "questions-v2__inner"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "questions-v2__header"
+    className: "questions-v2__header reveal"
   }, /*#__PURE__*/_react["default"].createElement("h2", {
     className: "questions-v2__title"
   }, title || 'Часто задаваемые вопросы'), /*#__PURE__*/_react["default"].createElement("p", {
@@ -52,7 +55,10 @@ var QuestionsV2 = function QuestionsV2(_ref) {
       response = _ref2.response;
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: questions + index,
-      className: "questions-v2__item ".concat(currentDrop.has(questions) ? 'questions-v2__item_open' : '')
+      className: "questions-v2__item ".concat(currentDrop.has(questions) ? 'questions-v2__item_open' : '', " reveal"),
+      style: {
+        '--index': index
+      }
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "questions-v2__question",
       onClick: function onClick() {

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

@@ -8,6 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 require("./ServicesSectionV2.scss");
+var _useReveal = _interopRequireDefault(require("../../../common/hooks/useReveal"));
+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(); }
@@ -111,7 +113,7 @@ var ServicesSectionV2 = function ServicesSectionV2(_ref2) {
     items = _ref2$items === void 0 ? list_default : _ref2$items,
     _ref2$linkMain = _ref2.linkMain,
     linkMain = _ref2$linkMain === void 0 ? 'https://lk.ecomru.ru' : _ref2$linkMain;
-  var current_query = (_window = window) === null || _window === void 0 || (_window = _window.location) === null || _window === void 0 ? void 0 : _window.search;
+  var current_query = typeof window !== 'undefined' ? (_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],
@@ -120,6 +122,7 @@ var ServicesSectionV2 = function ServicesSectionV2(_ref2) {
     _useState4 = _slicedToArray(_useState3, 2),
     isAutoPlaying = _useState4[0],
     setIsAutoPlaying = _useState4[1];
+  (0, _useReveal["default"])();
   (0, _react.useEffect)(function () {
     if (!isAutoPlaying) return;
     var interval = setInterval(function () {
@@ -143,11 +146,11 @@ var ServicesSectionV2 = function ServicesSectionV2(_ref2) {
     }, 10000);
   };
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "services-v2"
+    className: "services-v2 reveal"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "services-v2__container"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "services-v2__sidebar"
+    className: "services-v2__sidebar reveal"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "services-v2__logo"
   }, "ECOM", /*#__PURE__*/_react["default"].createElement("span", null, "RU")), items.map(function (item, idx) {

package/dist/components/ConstructorComponents/SmartReplies/SmartReplies.js

@@ -9,6 +9,7 @@ exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _ButtonBasicV = _interopRequireDefault(require("../../Buttons/ButtonBasicV2/ButtonBasicV2"));
 require("./SmartReplies.scss");
+var _useReveal = _interopRequireDefault(require("../../../common/hooks/useReveal"));
 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; }
@@ -57,18 +58,7 @@ var DEFAULT_LIST = [{
 }];
 
 // Градиенты для аватарок как в референсе
-var avatarGradients = ['linear-gradient(135deg, #6B5CE7, #9B5DFF)',
-// фиолетовый
-'linear-gradient(135deg, #EC4899, #F97316)',
-// розово-оранжевый
-'linear-gradient(135deg, #22C55E, #0EA5E9)',
-// зелено-голубой
-'linear-gradient(135deg, #F59E0B, #EF4444)',
-// оранжево-красный
-'linear-gradient(135deg, #8B5CF6, #3B82F6)',
-// фиолетово-синий
-'linear-gradient(135deg, #06B6D4, #6B5CE7)' // голубо-фиолетовый
-];
+var avatarGradients = ['linear-gradient(135deg, #6B5CE7, #9B5DFF)', 'linear-gradient(135deg, #EC4899, #F97316)', 'linear-gradient(135deg, #22C55E, #0EA5E9)', 'linear-gradient(135deg, #F59E0B, #EF4444)', 'linear-gradient(135deg, #8B5CF6, #3B82F6)', 'linear-gradient(135deg, #06B6D4, #6B5CE7)'];
 var SmartReplies = function SmartReplies(_ref) {
   var title = _ref.title,
     _ref$reviews = _ref.reviews,
@@ -81,21 +71,30 @@ var SmartReplies = function SmartReplies(_ref) {
     setVisibleCount(reviews.length);
   };
   var visibleReviews = reviews.slice(0, visibleCount);
+
+  // Используем хук с зависимостью от visibleCount
+  // При изменении visibleCount (нажатии на кнопку) новые карточки анимируются сразу
+  (0, _useReveal["default"])([visibleCount], true);
   return /*#__PURE__*/_react["default"].createElement("section", {
     className: "smart-replies"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "smart-replies__inner"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "reveal"
   }, /*#__PURE__*/_react["default"].createElement("h2", {
     className: "smart-replies__title"
   }, title || 'Умные ответы на отзывы от ИИ'), /*#__PURE__*/_react["default"].createElement("p", {
     className: "smart-replies__subtitle"
-  }, "\u0418\u0418, \u0448\u0430\u0431\u043B\u043E\u043D\u044B, \u0432\u0440\u0443\u0447\u043D\u0443\u044E \u2014 \u0434\u043B\u044F \u043E\u0442\u0432\u0435\u0442\u043E\u0432 \u043D\u0430 \u043E\u0442\u0437\u044B\u0432\u044B. \u041E\u0442\u0432\u0435\u0442\u044B \u043D\u0430 \u0432\u043E\u043F\u0440\u043E\u0441\u044B. \u041C\u043E\u0434\u0435\u0440\u0430\u0446\u0438\u044F \u043F\u0435\u0440\u0435\u0434 \u043E\u0442\u043F\u0440\u0430\u0432\u043A\u043E\u0439"), /*#__PURE__*/_react["default"].createElement("div", {
+  }, "\u0418\u0418, \u0448\u0430\u0431\u043B\u043E\u043D\u044B, \u0432\u0440\u0443\u0447\u043D\u0443\u044E \u2014 \u0434\u043B\u044F \u043E\u0442\u0432\u0435\u0442\u043E\u0432 \u043D\u0430 \u043E\u0442\u0437\u044B\u0432\u044B. \u041E\u0442\u0432\u0435\u0442\u044B \u043D\u0430 \u0432\u043E\u043F\u0440\u043E\u0441\u044B. \u041C\u043E\u0434\u0435\u0440\u0430\u0446\u0438\u044F \u043F\u0435\u0440\u0435\u0434 \u043E\u0442\u043F\u0440\u0430\u0432\u043A\u043E\u0439")), /*#__PURE__*/_react["default"].createElement("div", {
     className: "smart-replies__grid"
   }, visibleReviews === null || visibleReviews === void 0 ? void 0 : visibleReviews.map(function (review, idx) {
     var _review$author_name;
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "smart-replies__card",
-      key: idx
+      className: "smart-replies__card reveal",
+      key: idx,
+      style: {
+        '--index': idx
+      }
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "smart-replies__card-header"
     }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -121,7 +120,7 @@ var SmartReplies = function SmartReplies(_ref) {
       className: "smart-replies__ai-reply"
     }, /*#__PURE__*/_react["default"].createElement("p", null, review.answer))));
   })), reviews.length > 2 && visibleCount < reviews.length && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "smart-replies__show-more"
+    className: "smart-replies__show-more reveal"
   }, /*#__PURE__*/_react["default"].createElement(_ButtonBasicV["default"], {
     className: "phone-block-v2__btn",
     white: true,

package/dist/components/ConstructorComponents/StatisticCardV2/StatisticCardV2.js

@@ -7,28 +7,33 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("../../../common/utils");
-var _StatisticCardV2Module = _interopRequireDefault(require("./StatisticCardV2.module.scss"));
+require("./StatisticCardV2.scss");
+var _useReveal = _interopRequireDefault(require("../../../common/hooks/useReveal"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var StatisticCardV2 = function StatisticCardV2(_ref) {
   var list = _ref.list,
     _ref$reverse = _ref.reverse,
     reverse = _ref$reverse === void 0 ? false : _ref$reverse;
+  (0, _useReveal["default"])();
   return /*#__PURE__*/_react["default"].createElement("section", {
-    className: (0, _utils.classes)(_StatisticCardV2Module["default"], 'statistic-card-v2')
+    className: 'statistic-card-v2'
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _utils.classes)(_StatisticCardV2Module["default"], 'statistic-card-v2__cards')
-  }, list.map(function (_ref2) {
+    className: 'statistic-card-v2__cards'
+  }, list.map(function (_ref2, index) {
     var label = _ref2.label,
       sum = _ref2.sum,
       color = _ref2.color;
     if (label && sum) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: label + sum,
-        className: (0, _utils.classes)(_StatisticCardV2Module["default"], 'statistic-card-v2__card', reverse ? 'statistic-card-v2__card_reverse' : 'statistic-card-v2__card_normal')
+        className: "statistic-card-v2__card ".concat(reverse ? 'statistic-card-v2__card_reverse' : 'statistic-card-v2__card_normal', " reveal"),
+        style: {
+          '--index': index
+        }
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: (0, _utils.classes)(_StatisticCardV2Module["default"], 'statistic-card-v2__label')
+        className: 'statistic-card-v2__label'
       }, reverse ? sum === null || sum === void 0 ? void 0 : sum.toLocaleString() : label), /*#__PURE__*/_react["default"].createElement("span", {
-        className: (0, _utils.classes)(_StatisticCardV2Module["default"], 'statistic-card-v2__sum'),
+        className: 'statistic-card-v2__sum',
         style: {
           color: color || ''
         }

package/dist/components/ConstructorComponents/StatisticCardV2/StatisticCardV2.scss

@@ -0,0 +1,119 @@
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
+@import '../variables.scss';
+
+.statistic-card-v2 {
+    background: linear-gradient(135deg, $text 0%, $green-dark 100%);
+    width: 100%;
+    padding: 96px 40px;
+
+    * {
+        font-family: 'Manrope', 'Golos Text', sans-serif !important;
+    }
+
+    &__cards {
+        max-width: 1280px;
+        margin: 0 auto;
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 40px;
+        text-align: center;
+    }
+
+    &__card {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        &_reverse {
+            flex-direction: column-reverse;
+            justify-content: flex-end;
+        }
+
+        &_normal {
+            flex-direction: column;
+            justify-content: flex-start;
+        }
+    }
+
+    &__sum {
+        font-size: 52px;
+        font-weight: 800;
+        letter-spacing: -2px;
+        background: linear-gradient(135deg, $white 0%, $green-light-bg 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        line-height: 1.1;
+    }
+
+    &__label {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.6);
+        line-height: 1.4;
+    }
+
+    @keyframes fadeUp {
+        from {
+            opacity: 0;
+            transform: translateY(24px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+}
+
+// Планшет (до 1100px)
+@media (max-width: 1100px) {
+    .statistic-card-v2 {
+        padding: 72px 24px;
+
+        &__cards {
+            grid-template-columns: repeat(2, 1fr);
+            gap: 32px;
+        }
+
+        &__sum {
+            font-size: 46px;
+            letter-spacing: -1.5px;
+        }
+
+        &__label {
+            font-size: 13px;
+        }
+    }
+}
+
+
+// Мобильная версия (до 480px) - 1 колонка
+@media (max-width: 480px) {
+    .statistic-card-v2 {
+      
+        &__cards {
+            grid-template-columns: 1fr;
+            gap: 28px;
+        }
+    }
+}
+
+// Мобильная версия (до 430px)
+@media (max-width: 430px) {
+    .statistic-card-v2 {
+        padding: 40px 20px;
+
+        &__cards {
+            gap: 24px;
+        }
+
+        &__sum {
+            font-size: 36px;
+            letter-spacing: -1px;
+        }
+
+        &__label {
+            font-size: 12px;
+            max-width: 220px;
+        }
+    }
+}

package/dist/components/ConstructorComponents/StepsV2/StepsV2.js

@@ -9,8 +9,9 @@ exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _image = _interopRequireDefault(require("next/image"));
 var _utils = require("../../../common/utils");
-var _StepsV2Module = _interopRequireDefault(require("./StepsV2.module.scss"));
+require("./StepsV2.scss");
 var _ButtonBasicV = _interopRequireDefault(require("../../Buttons/ButtonBasicV2/ButtonBasicV2"));
+var _useReveal = _interopRequireDefault(require("../../../common/hooks/useReveal"));
 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; }
@@ -29,11 +30,12 @@ var StepsV2 = function StepsV2(_ref) {
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$linkMain = _ref.linkMain,
     linkMain = _ref$linkMain === void 0 ? 'https://lk.ecomru.ru' : _ref$linkMain;
-  var current_query = (_window = window) === null || _window === void 0 || (_window = _window.location) === null || _window === void 0 ? void 0 : _window.search;
+  var current_query = typeof window !== 'undefined' ? (_window = window) === null || _window === void 0 || (_window = _window.location) === null || _window === void 0 ? void 0 : _window.search : '';
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isMobile = _useState2[0],
     setIsMobile = _useState2[1];
+  (0, _useReveal["default"])();
   (0, _react.useEffect)(function () {
     var checkMobile = function checkMobile() {
       return setIsMobile(window.innerWidth <= 1100);
@@ -45,33 +47,36 @@ var StepsV2 = function StepsV2(_ref) {
     };
   }, []);
   return /*#__PURE__*/_react["default"].createElement("section", {
-    className: (0, _utils.classes)(_StepsV2Module["default"], "steps-v2 ".concat(className))
+    className: "steps-v2 ".concat(className)
   }, title && /*#__PURE__*/_react["default"].createElement("h3", {
-    className: (0, _utils.classes)(_StepsV2Module["default"], "steps-v2__title")
+    className: "steps-v2__title reveal"
   }, title), /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _utils.classes)(_StepsV2Module["default"], "steps-v2__items")
+    className: "steps-v2__items"
   }, list.map(function (_ref2, ind) {
     var stepTitle = _ref2.title,
       description = _ref2.description;
     if (!stepTitle) return null;
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: stepTitle + description,
-      className: (0, _utils.classes)(_StepsV2Module["default"], "steps-v2__item")
+      className: "steps-v2__item reveal",
+      style: {
+        '--index': ind
+      }
     }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _utils.classes)(_StepsV2Module["default"], "steps-v2__count")
+      className: "steps-v2__count"
     }, ind + 1), isMobile ? /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _utils.classes)(_StepsV2Module["default"], "steps-v2__item-text")
+      className: "steps-v2__item-text"
     }, stepTitle && /*#__PURE__*/_react["default"].createElement("h4", {
-      className: (0, _utils.classes)(_StepsV2Module["default"], "steps-v2__step-title")
+      className: "steps-v2__step-title"
     }, stepTitle), description && /*#__PURE__*/_react["default"].createElement("p", {
-      className: (0, _utils.classes)(_StepsV2Module["default"], "steps-v2__description")
+      className: "steps-v2__description"
     }, description)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, stepTitle && /*#__PURE__*/_react["default"].createElement("h4", {
-      className: (0, _utils.classes)(_StepsV2Module["default"], "steps-v2__step-title")
+      className: "steps-v2__step-title"
     }, stepTitle), description && /*#__PURE__*/_react["default"].createElement("p", {
-      className: (0, _utils.classes)(_StepsV2Module["default"], "steps-v2__description")
+      className: "steps-v2__description"
     }, description)));
   })), /*#__PURE__*/_react["default"].createElement(_ButtonBasicV["default"], {
-    className: (0, _utils.classes)(_StepsV2Module["default"], "steps-v2__btn"),
+    className: "steps-v2__btn reveal",
     onClick: function onClick() {
       var _window2;
       return (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.open("".concat(linkMain, "/auth").concat(current_query), '_blank');

package/dist/components/ConstructorComponents/StepsV2/StepsV2.scss

@@ -0,0 +1,202 @@
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
+@import '../variables.scss';
+
+.steps-v2 {
+    font-family: 'Manrope', 'Golos Text', sans-serif !important;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: 48px;
+    align-items: flex-start;
+    border-radius: 20px;
+    padding: 96px 40px;
+    background: $white;
+    box-sizing: border-box;
+
+    * {
+        font-family: 'Manrope', 'Golos Text', sans-serif !important;
+    }
+
+    &__title {
+        width: 100%;
+        text-align: center;
+        color: $text;
+        font-size: 30px;
+        font-weight: 800;
+        letter-spacing: -0.5px;
+        margin: 0;
+    }
+
+    &__items {
+        display: flex;
+        gap: 0;
+        width: 100%;
+        position: relative;
+    }
+
+    &__items::before {
+        content: '';
+        position: absolute;
+        top: 28px;
+        left: 10%;
+        right: 10%;
+        height: 2px;
+        background: linear-gradient(90deg, $bg, $green, $bg);
+        z-index: 0;
+    }
+
+    &__item {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        gap: 12px;
+        max-width: calc(25% - 12px);
+        flex: 1;
+        align-items: center;
+        text-align: center;
+        padding: 0 16px;
+        position: relative;
+        z-index: 1;
+        box-sizing: border-box;
+    }
+
+    &__count {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50%;
+        width: 56px;
+        height: 56px;
+        background: $white;
+        border: 2px solid $green;
+        color: $green;
+        font-size: 20px;
+        font-weight: 800;
+        box-shadow: 0 0 0 6px $white;
+        flex-shrink: 0;
+    }
+
+    &__item:first-child &__count {
+        background: $green;
+        color: $white;
+    }
+
+    &__step-title {
+        color: $text;
+        font-size: 15px;
+        font-weight: 700;
+        margin: 0;
+    }
+
+    &__description {
+        color: $muted;
+        font-size: 13px;
+        font-weight: 400;
+        line-height: 1.6;
+        margin: 0;
+    }
+
+    &__item-text {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+    }
+
+    &__btn {
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    @keyframes fadeUp {
+        from {
+            opacity: 0;
+            transform: translateY(24px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+}
+
+// Планшет (до 1100px)
+@media (max-width: 1100px) {
+    .steps-v2 {
+        padding: 72px 24px;
+        gap: 40px;
+
+        &__title {
+            font-size: 26px;
+        }
+
+        &__items {
+            flex-direction: column;
+            gap: 0;
+        }
+
+        &__items::before {
+            display: none;
+        }
+
+        &__item {
+            max-width: 100%;
+            width: 100%;
+            flex-direction: row;
+            text-align: left;
+            align-items: flex-start;
+            padding: 20px 0;
+            gap: 20px;
+            border-bottom: 1px solid $border;
+        }
+
+        &__item:last-child {
+            border-bottom: none;
+        }
+
+        &__count {
+            width: 48px;
+            height: 48px;
+            font-size: 18px;
+            box-shadow: 0 0 0 4px $white;
+        }
+    }
+}
+
+
+// Мобильная версия (до 430px)
+@media (max-width: 430px) {
+    .steps-v2 {
+        padding: 40px 20px;
+        gap: 32px;
+
+        &__title {
+            font-size: 22px;
+            letter-spacing: -0.5px;
+        }
+
+        &__step-title {
+            font-size: 15px;
+        }
+
+        &__description {
+            font-size: 13px;
+        }
+
+        &__count {
+            width: 42px;
+            height: 42px;
+            font-size: 16px;
+            box-shadow: 0 0 0 4px $white;
+        }
+
+        &__item {
+            gap: 14px;
+            padding: 16px 0;
+        }
+
+        &__btn {
+            max-width: 100% !important;
+            width: 100% !important;
+        }
+    }
+}

package/dist/components/ConstructorComponents/VideoBlockV2/VideoBlockV2.js

@@ -7,16 +7,19 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 require("./VideoBlockV2.scss");
+var _useReveal = _interopRequireDefault(require("../../../common/hooks/useReveal"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var VideoBlockV2 = function VideoBlockV2(_ref) {
   var src = _ref.src,
-    hideTitle = _ref.hideTitle;
+    hideTitle = _ref.hideTitle,
+    title = _ref.title;
+  (0, _useReveal["default"])();
   return /*#__PURE__*/_react["default"].createElement("section", {
     className: "video-block-v2"
   }, !hideTitle && /*#__PURE__*/_react["default"].createElement("h2", {
-    className: "video-block-v2__title"
-  }, "\u041F\u043E\u0441\u043C\u043E\u0442\u0440\u0438\u0442\u0435 \u0432\u0438\u0434\u0435\u043E \u043E \u043D\u0430\u0441"), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "video-block-v2__video-box"
+    className: "video-block-v2__title reveal"
+  }, title || 'Посмотрите видео о нас'), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "video-block-v2__video-box reveal"
   }, /*#__PURE__*/_react["default"].createElement("video", {
     className: "video-block-v2__video",
     src: src,

package/dist/components/ConstructorComponents/variables.scss

@@ -13,4 +13,15 @@ $white: #FFFFFF;
 
 // Брейкпоинты
 $tablet: 1100px;
-$mobile: 430px;
+$mobile: 430px;
+
+.reveal {
+    opacity: 0;
+    transform: translateY(28px);
+    transition: opacity 0.6s ease, transform 0.6s ease;
+}
+
+.reveal.visible {
+    opacity: 1;
+    transform: translateY(0);
+}

package/dist/index.js

@@ -63,6 +63,12 @@ Object.defineProperty(exports, "ButtonBasic", {
     return _ButtonBasic["default"];
   }
 });
+Object.defineProperty(exports, "ButtonBasicV2", {
+  enumerable: true,
+  get: function get() {
+    return _ButtonBasicV["default"];
+  }
+});
 Object.defineProperty(exports, "ButtonSignUp", {
   enumerable: true,
   get: function get() {
@@ -446,6 +452,7 @@ var _SmartReplies = _interopRequireDefault(require("./components/ConstructorComp
 var _CardsWithButton = _interopRequireDefault(require("./components/ConstructorComponents/CardsWithButton/CardsWithButton"));
 var _LogosStrip = _interopRequireDefault(require("./components/ConstructorComponents/LogosStrip/LogosStrip"));
 var _ButtonBasic = _interopRequireDefault(require("./components/Buttons/ButtonBasic/ButtonBasic"));
+var _ButtonBasicV = _interopRequireDefault(require("./components/Buttons/ButtonBasicV2/ButtonBasicV2"));
 var _ButtonSignUp = _interopRequireDefault(require("./components/Buttons/ButtonSignUp/ButtonSignUp"));
 var _InputDinamycPlaceholder = _interopRequireDefault(require("./components/Inputs/InputDinamycPlaceholder/InputDinamycPlaceholder"));
 var _ModalCrm = _interopRequireDefault(require("./components/ModalCrm/ModalCrm"));

package/package.json

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