ecomlab-components-next 0.1.263 → 0.1.264

package/dist/common/hooks/useReveal.js

@@ -0,0 +1,37 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+var useReveal = function useReveal() {
+  var threshold = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0.1;
+  var delayStep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 60;
+  (0, _react.useEffect)(function () {
+    var observer = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry, index) {
+        if (entry.isIntersecting) {
+          setTimeout(function () {
+            entry.target.classList.add('visible');
+          }, index * delayStep);
+          observer.unobserve(entry.target);
+        }
+      });
+    }, {
+      threshold: threshold
+    });
+    var elements = document.querySelectorAll('.reveal');
+    elements.forEach(function (el) {
+      return observer.observe(el);
+    });
+    return function () {
+      elements.forEach(function (el) {
+        return observer.unobserve(el);
+      });
+      observer.disconnect();
+    };
+  }, [threshold, delayStep]);
+};
+var _default = exports["default"] = useReveal;

package/dist/components/ConstructorComponents/ArticlesBlockV2/ArticlesBlockV2.js

@@ -8,8 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.getArticleBoxData = exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _utils = require("../../../common/utils");
-var _ArticlesBlockV2Module = _interopRequireDefault(require("./ArticlesBlockV2.module.scss"));
+require("./ArticlesBlockV2.scss");
 var _ShortTileArticleBox = _interopRequireDefault(require("../../ArticleElements/ShortTileArticleBox/ShortTileArticleBox"));
+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; }
@@ -118,6 +119,7 @@ var ArticlesBlockV2 = function ArticlesBlockV2(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     articles = _useState2[0],
     setArticles = _useState2[1];
+  (0, _useReveal["default"])();
   (0, _react.useEffect)(function () {
     var abortController = (0, _utils.fetchArticlesByPortal)(function (json) {
       if (!Object.entries(json).length) return;
@@ -128,24 +130,22 @@ var ArticlesBlockV2 = function ArticlesBlockV2(_ref) {
     };
   }, []);
   return /*#__PURE__*/_react["default"].createElement("section", {
-    className: (0, _utils.classes)(_ArticlesBlockV2Module["default"], 'articles-v2')
+    className: 'articles-v2'
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _utils.classes)(_ArticlesBlockV2Module["default"], 'articles-v2__inner')
+    className: 'articles-v2__inner'
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _utils.classes)(_ArticlesBlockV2Module["default"], 'articles-v2__header')
+    className: 'articles-v2__header reveal'
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _utils.classes)(_ArticlesBlockV2Module["default"], 'articles-v2__header-left')
+    className: 'articles-v2__header-left'
   }, /*#__PURE__*/_react["default"].createElement("h2", {
-    className: (0, _utils.classes)(_ArticlesBlockV2Module["default"], 'articles-v2__title')
+    className: 'articles-v2__title'
   }, title), /*#__PURE__*/_react["default"].createElement("p", {
-    className: (0, _utils.classes)(_ArticlesBlockV2Module["default"], 'articles-v2__subtitle')
+    className: 'articles-v2__subtitle'
   }, subtitle))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _utils.classes)(_ArticlesBlockV2Module["default"], 'articles-v2__grid')
-  }, (_getArticleBoxData = getArticleBoxData(articles, locale)) === null || _getArticleBoxData === void 0 ? void 0 : _getArticleBoxData.map(function (articleData) {
+    className: 'articles-v2__grid reveal'
+  }, (_getArticleBoxData = getArticleBoxData(articles, locale)) === null || _getArticleBoxData === void 0 ? void 0 : _getArticleBoxData.map(function (articleData, index) {
     var _articleData$annotati;
-    return /*#__PURE__*/_react["default"].createElement(_ShortTileArticleBox["default"], _extends({
-      key: articleData.id
-    }, articleData, {
+    return /*#__PURE__*/_react["default"].createElement(_ShortTileArticleBox["default"], _extends({}, articleData, {
       cpu: articleData === null || articleData === void 0 || (_articleData$annotati = articleData.annotation) === null || _articleData$annotati === void 0 ? void 0 : _articleData$annotati[1]
     }));
   }).splice(0, 4))));

package/dist/components/ConstructorComponents/ArticlesBlockV2/ArticlesBlockV2.scss

@@ -0,0 +1,133 @@
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
+@import '../variables.scss';
+
+.articles-v2 {
+    font-family: 'Manrope', sans-serif;
+    background: $bg;
+    width: 100%;
+    padding: 96px 40px;
+
+    * {
+        font-family: 'Manrope', 'Golos Text', sans-serif !important;
+    }
+
+    &__inner {
+        max-width: 1280px;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        gap: 56px;
+    }
+
+    &__header {
+        text-align: center;
+        width: 100%;
+    }
+
+    &__header-left {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        align-items: center;
+    }
+
+    &__title {
+        font-size: 30px;
+        font-weight: 800;
+        letter-spacing: -0.5px;
+        color: $text;
+        margin: 0;
+    }
+
+    &__subtitle {
+        font-size: 15px;
+        color: $muted;
+        line-height: 1.5;
+        max-width: 440px;
+        margin: 0;
+    }
+
+    &__grid {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 32px;
+        justify-content: center;
+    }
+
+    &__grid>* {
+        background: $white;
+        border: 1px solid $border;
+        border-radius: 20px;
+        padding: 12px;
+        display: flex;
+        flex-direction: column;
+        transition: transform 0.2s ease, box-shadow 0.2s ease;
+        border-top: 3px solid $green;
+        width: calc(33.333% - 22px);
+        min-width: 280px;
+        flex: 1 1 auto;
+
+        &:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
+        }
+    }
+
+    @keyframes fadeUp {
+        from {
+            opacity: 0;
+            transform: translateY(24px);
+        }
+
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+}
+
+// Планшет (до 1100px)
+@media (max-width: 1100px) {
+    .articles-v2 {
+        padding: 72px 24px;
+
+        &__title {
+            font-size: 26px;
+        }
+
+        &__subtitle {
+            font-size: 14px;
+        }
+
+        &__grid {
+            gap: 24px;
+        }
+    }
+}
+
+// Планшет (до 1024px) - 2 колонки
+@media (max-width: 1024px) {
+    .articles-v2 {
+        padding: 72px 24px;
+
+        &__grid>* {
+            width: calc(50% - 12px);
+            min-width: 260px;
+        }
+    }
+}
+
+// Мобильная версия (до 430px)
+@media (max-width: 430px) {
+    .articles-v2 {
+        padding: 40px 20px;
+
+        &__title {
+            font-size: 22px;
+        }
+
+        &__subtitle {
+            font-size: 13px;
+        }
+    }
+}

package/dist/components/ConstructorComponents/BlocksInfoV2/BlocksInfoV2.js

@@ -11,6 +11,7 @@ var _image = _interopRequireDefault(require("next/image"));
 require("./BlocksInfoV2.scss");
 var _ButtonBasicV = _interopRequireDefault(require("../../Buttons/ButtonBasicV2/ButtonBasicV2"));
 var _ModalBitrixForm = _interopRequireDefault(require("../../Article/FormBtn/ModalBitrixForm/ModalBitrixForm"));
+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; }
@@ -108,6 +109,7 @@ var BlocksInfo = function BlocksInfo(_ref) {
     isForm = _ref$isForm === void 0 ? false : _ref$isForm,
     _ref$onClick = _ref.onClick,
     onClick = _ref$onClick === void 0 ? null : _ref$onClick;
+  (0, _useReveal["default"])();
   var current_query = (_window = window) === null || _window === void 0 || (_window = _window.location) === null || _window === void 0 ? void 0 : _window.search;
   var currentUrl = (_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.location) === null || _window2 === void 0 ? void 0 : _window2.href;
   var _useState = (0, _react.useState)(false),
@@ -152,7 +154,7 @@ var BlocksInfo = function BlocksInfo(_ref) {
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "blocks-info-v2__inner"
   }, (title || subTitle) && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "blocks-info-v2__header"
+    className: "blocks-info-v2__header  reveal"
   }, title && /*#__PURE__*/_react["default"].createElement("h2", {
     className: "blocks-info-v2__title"
   }, title), subTitle && /*#__PURE__*/_react["default"].createElement("p", {
@@ -167,7 +169,10 @@ var BlocksInfo = function BlocksInfo(_ref) {
     var isReverse = ind % 2 === 0;
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: label + ind,
-      className: "blocks-info-v2__item ".concat(isReverse ? 'blocks-info-v2__item_reverse' : 'blocks-info-v2__item_normal')
+      style: {
+        '--index': ind
+      },
+      className: "blocks-info-v2__item ".concat(isReverse ? 'blocks-info-v2__item_reverse' : 'blocks-info-v2__item_normal', " reveal")
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "blocks-info-v2__image-box"
     }, /*#__PURE__*/_react["default"].createElement("img", {

package/dist/components/ConstructorComponents/BlocksInfoV2/BlocksInfoV2.scss

@@ -54,7 +54,6 @@
         overflow: hidden;
         transition: transform 0.2s, box-shadow 0.2s;
         min-height: 340px;
-        animation: fadeUp 0.6s ease both;
 
         &:hover {
             transform: translateY(-4px);

package/dist/components/ConstructorComponents/CardsServicesV2/CardsServicesV2.js

@@ -9,6 +9,7 @@ exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _ButtonBasicV = _interopRequireDefault(require("../../Buttons/ButtonBasicV2/ButtonBasicV2"));
 require("./CardsServicesV2.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; }
@@ -108,6 +109,7 @@ var CardsServicesV2 = function CardsServicesV2(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isShow = _useState2[0],
     setIsShow = _useState2[1];
+  (0, _useReveal["default"])();
   var getFirstLetter = function getFirstLetter(label) {
     return (label === null || label === void 0 ? void 0 : label.charAt(0)) || '?';
   };
@@ -118,7 +120,7 @@ var CardsServicesV2 = function CardsServicesV2(_ref) {
   return /*#__PURE__*/_react["default"].createElement("section", {
     className: "cards-services-v2"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "cards-services-v2__header"
+    className: "cards-services-v2__header reveal"
   }, /*#__PURE__*/_react["default"].createElement("h2", {
     className: "cards-services-v2__title"
   }, title), subtitle && /*#__PURE__*/_react["default"].createElement("p", {
@@ -136,7 +138,10 @@ var CardsServicesV2 = function CardsServicesV2(_ref) {
       key: label + ind,
       href: link && link !== '' ? link : '#',
       target: link && link !== '' ? '_blank' : '_self',
-      className: "cards-services-v2__card-link"
+      className: "cards-services-v2__card-link reveal",
+      style: {
+        '--index': ind
+      }
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "cards-services-v2__card"
     }, hasImage ? /*#__PURE__*/_react["default"].createElement("img", {
@@ -157,7 +162,7 @@ var CardsServicesV2 = function CardsServicesV2(_ref) {
       className: "cards-services-v2__card-link-text"
     }, "\u041F\u043E\u0434\u0440\u043E\u0431\u043D\u0435\u0435 \u2192")));
   })), isShowButton && /*#__PURE__*/_react["default"].createElement(_ButtonBasicV["default"], {
-    className: 'cards-services-v2__button',
+    className: 'cards-services-v2__button reveal',
     green: true,
     onClick: handleShowMore,
     text: "\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0435\u0449\u0435",

package/dist/components/ConstructorComponents/CardsV2/CardsV2.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 require("./CardsV2.scss");
+var _useReveal = _interopRequireDefault(require("../../../common/hooks/useReveal"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var DEFAULT_LIST = [{
   title: "99%",
@@ -26,20 +27,24 @@ var CardsV2 = function CardsV2(_ref) {
     _ref$list = _ref.list,
     list = _ref$list === void 0 ? DEFAULT_LIST : _ref$list,
     child = _ref.child;
+  (0, _useReveal["default"])();
   return /*#__PURE__*/_react["default"].createElement("section", {
     className: "cards-v2"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "cards-v2__inner"
   }, title && /*#__PURE__*/_react["default"].createElement("h2", {
-    className: "cards-v2__title"
+    className: "cards-v2__title reveal"
   }, title), /*#__PURE__*/_react["default"].createElement("div", {
     className: "cards-v2__items"
-  }, list.map(function (_ref2) {
+  }, list.map(function (_ref2, index) {
     var cardTitle = _ref2.title,
       description = _ref2.description;
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "cards-v2__item",
-      key: cardTitle + description
+      className: "cards-v2__item reveal",
+      key: cardTitle + description,
+      style: {
+        '--index': index
+      }
     }, /*#__PURE__*/_react["default"].createElement("p", {
       className: "cards-v2__card-title"
     }, cardTitle), /*#__PURE__*/_react["default"].createElement("p", {

package/dist/components/ConstructorComponents/CardsWithButton/CardsWithButton.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 require("./CardsWithButton.scss");
+var _useReveal = _interopRequireDefault(require("../../../common/hooks/useReveal"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var CardsWithButton = function CardsWithButton(_ref) {
   var title = _ref.title,
@@ -14,20 +15,24 @@ var CardsWithButton = function CardsWithButton(_ref) {
     _ref$btnText = _ref.btnText,
     btnText = _ref$btnText === void 0 ? 'Подключиться' : _ref$btnText,
     onBtnClick = _ref.onBtnClick;
+  (0, _useReveal["default"])();
   return /*#__PURE__*/_react["default"].createElement("section", {
     className: "cards-with-btn-v2"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "cards-with-btn-v2__inner"
   }, title && /*#__PURE__*/_react["default"].createElement("h2", {
-    className: "cards-with-btn-v2__title"
+    className: "cards-with-btn-v2__title reveal"
   }, title), /*#__PURE__*/_react["default"].createElement("div", {
     className: "cards-with-btn-v2__content"
   }, items === null || items === void 0 ? void 0 : items.map(function (_ref2, index) {
     var title = _ref2.title,
       description = _ref2.description;
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "cards-with-btn-v2__card",
-      key: index
+      className: "cards-with-btn-v2__card reveal",
+      key: index,
+      style: {
+        '--index': index
+      }
     }, /*#__PURE__*/_react["default"].createElement("h3", {
       className: "cards-with-btn-v2__card-title"
     }, title), /*#__PURE__*/_react["default"].createElement("p", {

package/dist/components/ConstructorComponents/ClientsAboutUsV2/ClientsAboutUsV2.js

@@ -9,6 +9,7 @@ exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _ButtonBasicV = _interopRequireDefault(require("../../Buttons/ButtonBasicV2/ButtonBasicV2"));
 require("./ClientsAboutUsV2.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; }
@@ -29,13 +30,14 @@ var ClientsAboutUsV2 = function ClientsAboutUsV2(_ref) {
     cite = _ref$cite === void 0 ? "Андрей Краснов - индивидуальный предприниматель, селлер на Wildberries и OZON" : _ref$cite,
     _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 : '';
+  (0, _useReveal["default"])();
   return /*#__PURE__*/_react["default"].createElement("section", {
     className: "clients-about-v2"
   }, title && /*#__PURE__*/_react["default"].createElement("h2", {
-    className: "clients-about-v2__title"
+    className: "clients-about-v2__title reveal"
   }, title), (blockquote || cite) && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "clients-about-v2__header"
+    className: "clients-about-v2__header reveal"
   }, blockquote && /*#__PURE__*/_react["default"].createElement("blockquote", {
     className: "clients-about-v2__blockquote"
   }, blockquote), cite && /*#__PURE__*/_react["default"].createElement("cite", {
@@ -49,7 +51,10 @@ var ClientsAboutUsV2 = function ClientsAboutUsV2(_ref) {
     var isRightCard = ind === 1;
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: title + description,
-      className: "clients-about-v2__card ".concat(isRightCard ? 'clients-about-v2__card_dark' : '')
+      className: "clients-about-v2__card ".concat(isRightCard ? 'clients-about-v2__card_dark' : '', " reveal"),
+      style: {
+        '--index': ind
+      }
     }, /*#__PURE__*/_react["default"].createElement("h3", {
       className: "clients-about-v2__card-title"
     }, title), /*#__PURE__*/_react["default"].createElement("div", {

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _ButtonBasicV = _interopRequireDefault(require("../../Buttons/ButtonBasicV2/ButtonBasicV2"));
+var _useReveal = _interopRequireDefault(require("../../../common/hooks/useReveal"));
 require("./FeaturesGridV2.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); }
@@ -41,7 +42,10 @@ var FeaturesGridV2 = function FeaturesGridV2(_ref) {
     _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 current_query = typeof window !== 'undefined' ? (_window = window) === null || _window === void 0 || (_window = _window.location) === null || _window === void 0 ? void 0 : _window.search : '';
+
+  // Вызываем хук для анимации при скролле
+  (0, _useReveal["default"])();
   var syncHeight = (0, _react.useCallback)(function () {
     var heights = blocksRef.current.filter(function (el) {
       return el && el.offsetHeight > 0;
@@ -71,7 +75,7 @@ var FeaturesGridV2 = function FeaturesGridV2(_ref) {
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "features-grid-v2__inner"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "features-grid-v2__header"
+    className: "features-grid-v2__header reveal"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "features-grid-v2__header-left"
   }, title && /*#__PURE__*/_react["default"].createElement("h2", {
@@ -94,7 +98,8 @@ var FeaturesGridV2 = function FeaturesGridV2(_ref) {
       description = _ref2.description;
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: index,
-      className: "features-grid-v2__card"
+      className: "features-grid-v2__card reveal",
+      "data-index": index
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "features-grid-v2__card-heading",
       ref: function ref(el) {

package/dist/components/ConstructorComponents/FormV2/FormV2.js

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _ModalBitrixForm = _interopRequireDefault(require("../../Article/FormBtn/ModalBitrixForm/ModalBitrixForm"));
 var _ButtonBasicV = _interopRequireDefault(require("../../Buttons/ButtonBasicV2/ButtonBasicV2"));
 require("./FormV2.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; }
@@ -102,6 +103,7 @@ var FormV2 = function FormV2(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isModal = _useState2[0],
     setIsModal = _useState2[1];
+  (0, _useReveal["default"])();
   var currentProps = function currentProps() {
     var isClient = typeof window !== 'undefined';
     var currentUrl = isClient ? window.location.href : '';
@@ -127,6 +129,8 @@ var FormV2 = function FormV2(_ref) {
     formTitle: 'Желаемый способ связи'
   }, currentProps())), /*#__PURE__*/_react["default"].createElement("section", {
     className: "form-v2"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "form-v2__content reveal"
   }, /*#__PURE__*/_react["default"].createElement("h2", {
     className: "form-v2__title"
   }, title), /*#__PURE__*/_react["default"].createElement("p", {
@@ -140,6 +144,6 @@ var FormV2 = function FormV2(_ref) {
     maxWidth: "430px",
     width: "100%",
     size: "52px"
-  })));
+  }))));
 };
 var _default = exports["default"] = FormV2;

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

@@ -121,17 +121,6 @@
         min-width: 280px;
     }
 
-    @keyframes fadeUp {
-        from {
-            opacity: 0;
-            transform: translateY(24px);
-        }
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
-
     // Планшет (до 1100px)
     @media (max-width: 1100px) {
         padding: 48px 24px;

package/dist/components/ConstructorComponents/LogosStrip/LogosStrip.js

@@ -8,17 +8,19 @@ exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _image = _interopRequireDefault(require("next/image"));
 require("./LogosStrip.scss");
+var _useReveal = _interopRequireDefault(require("../../../common/hooks/useReveal"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var LogosStripV2 = function LogosStripV2(_ref) {
   var title = _ref.title,
     description = _ref.description,
     items = _ref.items;
+  (0, _useReveal["default"])();
   return /*#__PURE__*/_react["default"].createElement("section", {
     className: "logos-strip-v2"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "logos-strip-v2__inner"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "logos-strip-v2__header"
+    className: "logos-strip-v2__header reveal"
   }, /*#__PURE__*/_react["default"].createElement("h2", {
     className: "logos-strip-v2__title"
   }, title || 'Интеграции'), /*#__PURE__*/_react["default"].createElement("p", {
@@ -27,8 +29,11 @@ var LogosStripV2 = function LogosStripV2(_ref) {
     className: "logos-strip-v2__content"
   }, items === null || items === void 0 ? void 0 : items.map(function (item, index) {
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "logos-strip-v2__item",
-      key: index
+      className: "logos-strip-v2__item reveal",
+      key: index,
+      style: {
+        '--index': index
+      }
     }, /*#__PURE__*/_react["default"].createElement(_image["default"], {
       src: item,
       alt: "logo",

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

@@ -22,6 +22,7 @@ var _brand_11 = _interopRequireDefault(require("./img/brand_11.svg"));
 var _brand_12 = _interopRequireDefault(require("./img/brand_12.svg"));
 var _brand_13 = _interopRequireDefault(require("./img/brand_13.svg"));
 require("./MarqueImgsV2.scss");
+var _useReveal = _interopRequireDefault(require("../../../common/hooks/useReveal"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var marquee = [_brand_["default"], _brand_2["default"], _brand_3["default"], _brand_4["default"], _brand_5["default"], _brand_6["default"], _brand_7["default"], _brand_8["default"], _brand_9["default"], _brand_10["default"], _brand_11["default"], _brand_12["default"], _brand_13["default"]];
 var MarqueImgsV2 = function MarqueImgsV2(_ref) {
@@ -30,11 +31,14 @@ var MarqueImgsV2 = function MarqueImgsV2(_ref) {
     hideTitle = _ref$hideTitle === void 0 ? false : _ref$hideTitle,
     _ref$list = _ref.list,
     list = _ref$list === void 0 ? marquee : _ref$list;
+  (0, _useReveal["default"])();
   return /*#__PURE__*/_react["default"].createElement("section", {
     className: "marquee-v2"
   }, !hideTitle && /*#__PURE__*/_react["default"].createElement("h2", {
-    className: "marquee-v2__title"
-  }, title ? title : "\u041D\u0430\u0441 \u0432\u044B\u0431\u0438\u0440\u0430\u044E\u0442"), /*#__PURE__*/_react["default"].createElement(_reactFastMarquee["default"], {
+    className: "marquee-v2__title reveal"
+  }, title ? title : "\u041D\u0430\u0441 \u0432\u044B\u0431\u0438\u0440\u0430\u044E\u0442"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "marquee-v2__content"
+  }, /*#__PURE__*/_react["default"].createElement(_reactFastMarquee["default"], {
     scrollWhen: 'always',
     autoFill: true
   }, list === null || list === void 0 ? void 0 : list.map(function (el, ind) {
@@ -43,6 +47,6 @@ var MarqueImgsV2 = function MarqueImgsV2(_ref) {
       src: el,
       alt: "icon"
     });
-  })));
+  }))));
 };
 var _default = exports["default"] = MarqueImgsV2;

package/dist/components/ConstructorComponents/PhoneBlockV2/PhoneBlockV2.js

@@ -10,12 +10,14 @@ var _image = _interopRequireDefault(require("next/image"));
 var _phone = _interopRequireDefault(require("./img/phone.png"));
 require("./PhoneBlockV2.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 _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
 var PhoneBlockV2 = function PhoneBlockV2(_ref) {
   _objectDestructuringEmpty(_ref);
+  (0, _useReveal["default"])();
   return /*#__PURE__*/_react["default"].createElement("section", {
-    className: "phone-block-v2"
+    className: "phone-block-v2 reveal"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "phone-block-v2__content"
   }, /*#__PURE__*/_react["default"].createElement("div", {

package/dist/components/ConstructorComponents/PointsListV2/PointsListV2.js

@@ -8,27 +8,32 @@ exports["default"] = void 0;
 var _image = _interopRequireDefault(require("next/image"));
 var _react = _interopRequireDefault(require("react"));
 require("./PointsListV2.scss");
+var _useReveal = _interopRequireDefault(require("../../../common/hooks/useReveal"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var PointsListV2 = function PointsListV2(_ref) {
   var title = _ref.title,
     list = _ref.list,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className;
+  (0, _useReveal["default"])();
   return /*#__PURE__*/_react["default"].createElement("section", {
     className: "points-list-v2"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "points-list-v2__inner"
   }, /*#__PURE__*/_react["default"].createElement("h2", {
-    className: "points-list-v2__title"
+    className: "points-list-v2__title reveal"
   }, title), /*#__PURE__*/_react["default"].createElement("div", {
     className: "points-list-v2__content"
-  }, list === null || list === void 0 ? void 0 : list.map(function (_ref2) {
+  }, list === null || list === void 0 ? void 0 : list.map(function (_ref2, index) {
     var title = _ref2.title,
       description = _ref2.description,
       icon = _ref2.icon;
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "points-list-v2__item ".concat(className),
-      key: title + description
+      className: "points-list-v2__item ".concat(className, " reveal"),
+      key: title + description,
+      style: {
+        '--index': index
+      }
     }, icon && /*#__PURE__*/_react["default"].createElement("div", {
       className: "points-list-v2__item-icon"
     }, /*#__PURE__*/_react["default"].createElement(_image["default"], {

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; }
@@ -77,6 +78,7 @@ var SmartReplies = function SmartReplies(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     visibleCount = _useState2[0],
     setVisibleCount = _useState2[1];
+  (0, _useReveal["default"])();
   var showMore = function showMore() {
     setVisibleCount(reviews.length);
   };
@@ -85,17 +87,22 @@ var SmartReplies = function SmartReplies(_ref) {
     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 +128,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/package.json

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