ecomlab-components-next 0.1.257 → 0.1.260

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

@@ -10,7 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _image = _interopRequireDefault(require("next/image"));
 var _utils = require("../../../common/utils");
 var _StepsV2Module = _interopRequireDefault(require("./StepsV2.module.scss"));
-var _ButtonBasic = _interopRequireDefault(require("../../Buttons/ButtonBasic/ButtonBasic"));
+var _ButtonBasicV = _interopRequireDefault(require("../../Buttons/ButtonBasicV2/ButtonBasicV2"));
 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; }
@@ -21,6 +21,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 var StepsV2 = function StepsV2(_ref) {
+  var _window;
   var title = _ref.title,
     _ref$list = _ref.list,
     list = _ref$list === void 0 ? [] : _ref$list,
@@ -28,18 +29,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 _useState = (0, _react.useState)(''),
+  var current_query = (_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),
-    refPage = _useState2[0],
-    setRefPage = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isMobile = _useState4[0],
-    setIsMobile = _useState4[1];
+    isMobile = _useState2[0],
+    setIsMobile = _useState2[1];
   (0, _react.useEffect)(function () {
-    var _window;
-    var currentUrl = (_window = window) === null || _window === void 0 || (_window = _window.location) === null || _window === void 0 ? void 0 : _window.href;
-    setRefPage("?ref_page=".concat(currentUrl));
     var checkMobile = function checkMobile() {
       return setIsMobile(window.innerWidth <= 1100);
     };
@@ -49,38 +44,41 @@ var StepsV2 = function StepsV2(_ref) {
       return window.removeEventListener('resize', checkMobile);
     };
   }, []);
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("section", {
-    className: (0, _utils.classes)(_StepsV2Module["default"], "steps-section ".concat(className))
+  return /*#__PURE__*/_react["default"].createElement("section", {
+    className: (0, _utils.classes)(_StepsV2Module["default"], "steps-v2 ".concat(className))
   }, title && /*#__PURE__*/_react["default"].createElement("h3", {
-    className: (0, _utils.classes)(_StepsV2Module["default"], "steps__title")
+    className: (0, _utils.classes)(_StepsV2Module["default"], "steps-v2__title")
   }, title), /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _utils.classes)(_StepsV2Module["default"], "steps__items")
+    className: (0, _utils.classes)(_StepsV2Module["default"], "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__item")
+      className: (0, _utils.classes)(_StepsV2Module["default"], "steps-v2__item")
     }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _utils.classes)(_StepsV2Module["default"], "steps__count")
+      className: (0, _utils.classes)(_StepsV2Module["default"], "steps-v2__count")
     }, ind + 1), isMobile ? /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _utils.classes)(_StepsV2Module["default"], "steps__item-text")
+      className: (0, _utils.classes)(_StepsV2Module["default"], "steps-v2__item-text")
     }, stepTitle && /*#__PURE__*/_react["default"].createElement("h4", {
-      className: (0, _utils.classes)(_StepsV2Module["default"], "steps__title_step")
+      className: (0, _utils.classes)(_StepsV2Module["default"], "steps-v2__step-title")
     }, stepTitle), description && /*#__PURE__*/_react["default"].createElement("p", {
-      className: (0, _utils.classes)(_StepsV2Module["default"], "steps__description")
+      className: (0, _utils.classes)(_StepsV2Module["default"], "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__title_step")
+      className: (0, _utils.classes)(_StepsV2Module["default"], "steps-v2__step-title")
     }, stepTitle), description && /*#__PURE__*/_react["default"].createElement("p", {
-      className: (0, _utils.classes)(_StepsV2Module["default"], "steps__description")
+      className: (0, _utils.classes)(_StepsV2Module["default"], "steps-v2__description")
     }, description)));
-  })), /*#__PURE__*/_react["default"].createElement("button", {
-    className: (0, _utils.classes)(_StepsV2Module["default"], "steps__btn"),
+  })), /*#__PURE__*/_react["default"].createElement(_ButtonBasicV["default"], {
+    className: (0, _utils.classes)(_StepsV2Module["default"], "steps-v2__btn"),
     onClick: function onClick() {
       var _window2;
-      return (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.open("".concat(linkMain, "/auth").concat(refPage), '_blank');
-    }
-  }, "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0431\u0435\u0441\u043F\u043B\u0430\u0442\u043D\u043E \u2192")));
+      return (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.open("".concat(linkMain, "/auth").concat(current_query), '_blank');
+    },
+    size: '52px',
+    green: true,
+    text: 'Попробовать бесплатно'
+  }));
 };
 var _default = exports["default"] = StepsV2;

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

@@ -1,226 +1,197 @@
 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
 @import '../variables.scss';
 
-.steps-section {
+.steps-v2 {
     font-family: 'Manrope', 'Golos Text', sans-serif !important;
     display: flex;
     width: 100%;
     flex-direction: column;
-    gap: 30px;
+    gap: 48px;
     align-items: flex-start;
     border-radius: 20px;
-    padding: 96px 48px;
-    background: #ffffff;
+    padding: 96px 40px;
+    background: $white;
     box-sizing: border-box;
 
     * {
         font-family: 'Manrope', 'Golos Text', sans-serif !important;
     }
-}
 
-.steps__title {
-    width: 100%;
-    text-align: center;
-    color: #1A1A2E;
-    font-family: inherit;
-    font-size: 30px;
-    font-style: normal;
-    font-weight: 800;
-    letter-spacing: -1px;
-    margin: 0;
-}
-
-/* Connector line between steps */
-.steps__items {
-    display: flex;
-    gap: 0;
-    width: 100%;
-    position: relative;
-}
-
-.steps__items::before {
-    content: '';
-    position: absolute;
-    top: 28px;
-    left: 10%;
-    right: 10%;
-    height: 2px;
-    background: linear-gradient(90deg, #EEF0FF, $green, #EEF0FF);
-    z-index: 0;
-}
-
-.steps__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;
-}
-
-/* Step counter circles */
-.steps__count {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 50%;
-    width: 56px;
-    height: 56px;
-    background: #ffffff;
-    border: 2px solid $green;
-    color: $green;
-    font-family: inherit;
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 800;
-    box-shadow: 0 0 0 6px #ffffff;
-    flex-shrink: 0;
-}
-
-/* First step is "active" */
-.steps__item:nth-child(1) .steps__count {
-    background: $green;
-    color: #ffffff;
-}
-
-.steps__title_step {
-    color: #1A1A2E;
-    font-family: inherit;
-    font-size: 15px;
-    font-style: normal;
-    font-weight: 700;
-    margin: 0;
-}
-
-.steps__description {
-    color: #6B7280;
-    font-family: inherit;
-    font-size: 13px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 1.6;
-    margin: 0;
-}
-
-/* CTA Button */
-.steps__btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    background: $green;
-    color: #ffffff;
-    border: none;
-    border-radius: 10px;
-    padding: 16px 32px;
-    font-family: inherit;
-    font-size: 15px;
-    font-weight: 700;
-    cursor: pointer;
-    width: 100%;
-    max-width: 430px;
-    height: 56px;
-    margin: 0 auto;
-    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
-    box-shadow: 0 4px 16px rgba(107, 92, 231, 0.35);
-    box-sizing: border-box;
-}
-
-.steps__btn:hover {
-    background: $green;
-    transform: translateY(-2px);
-    box-shadow: 0 8px 24px rgba(107, 92, 231, 0.4);
-}
-
-/* ── TABLET (≤ 1100px) ── */
-@media (max-width: 1100px) {
-    .steps-section {
-        padding: 64px 24px;
-    }
-
-    .steps__title {
-        font-size: 28px;
+    &__title {
+        width: 100%;
+        text-align: center;
+        color: $text;
+        font-size: 30px;
+        font-weight: 800;
+        letter-spacing: -0.5px;
+        margin: 0;
     }
 
-    .steps__items {
-        flex-direction: column;
+    &__items {
+        display: flex;
         gap: 0;
-    }
-
-    .steps__items::before {
-        display: none;
-    }
-
-    .steps__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 #E5E7EB;
-    }
-
-    .steps__item:last-child {
-        border-bottom: none;
+        position: relative;
     }
 
-    .steps__count {
-        flex-shrink: 0;
-        width: 48px;
-        height: 48px;
-        font-size: 18px;
+    &__items::before {
+        content: '';
+        position: absolute;
+        top: 28px;
+        left: 10%;
+        right: 10%;
+        height: 2px;
+        background: linear-gradient(90deg, $bg, $green, $bg);
+        z-index: 0;
     }
 
-    .steps__item-text {
+    &__item {
         display: flex;
         flex-direction: column;
-        gap: 6px;
-    }
-}
-
-/* ── MOBILE (≤ 430px) ── */
-@media (max-width: 430px) {
-    .steps-section {
-        padding: 48px 16px;
-        gap: 24px;
+        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;
     }
 
-    .steps__title {
-        font-size: 22px;
-        letter-spacing: -0.5px;
+    &__item:first-child &__count {
+        background: $green;
+        color: $white;
     }
 
-    .steps__title_step {
+    &__step-title {
+        color: $text;
         font-size: 15px;
+        font-weight: 700;
+        margin: 0;
     }
 
-    .steps__description {
+    &__description {
+        color: $muted;
         font-size: 13px;
+        font-weight: 400;
+        line-height: 1.6;
+        margin: 0;
+    }
+
+    &__item-text {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
     }
 
-    .steps__count {
-        width: 42px;
-        height: 42px;
-        font-size: 16px;
-        box-shadow: 0 0 0 4px #ffffff;
+    @keyframes fadeUp {
+        from {
+            opacity: 0;
+            transform: translateY(24px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
     }
+}
 
-    .steps__item {
-        gap: 14px;
-        padding: 16px 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;
+        }
     }
+}
 
-    .steps__btn {
-        font-size: 14px;
-        height: 52px;
-        max-width: 100%;
+
+// Мобильная версия (до 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.scss

@@ -1,15 +1,11 @@
 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
 @import '../variables.scss';
 
-$text: #1A1A2E;
-$white: #FFFFFF;
-$border: #E5E7EB;
-
 .video-block-v2 {
     font-family: 'Manrope', sans-serif;
     background: $white;
     width: 100%;
-    padding: 96px 48px;
+    padding: 96px 40px;
 
     * {
         font-family: 'Manrope', 'Golos Text', sans-serif !important;
@@ -40,12 +36,28 @@ $border: #E5E7EB;
         border-radius: 20px;
     }
 
-    // Адаптация как в референсе
-    @media (max-width: 1024px) {
-        padding: 72px 32px;
+    @keyframes fadeUp {
+        from {
+            opacity: 0;
+            transform: translateY(24px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+}
+
+// Планшет (до 1100px)
+@media (max-width: 1100px) {
+    .video-block-v2 {
+        padding: 72px 24px;
     }
+}
 
-    @media (max-width: 900px) {
+// Мобильная версия (до 900px)
+@media (max-width: 900px) {
+    .video-block-v2 {
         padding: 60px 24px;
 
         &__title {
@@ -53,30 +65,16 @@ $border: #E5E7EB;
             margin-bottom: 40px;
         }
     }
+}
 
-    @media (max-width: 768px) {
-        padding: 48px 24px;
-
-        &__title {
-            font-size: 24px;
-        }
-    }
-
-    @media (max-width: 500px) {
-        padding: 40px 16px;
+// Мобильная версия (до 430px)
+@media (max-width: 430px) {
+    .video-block-v2 {
+        padding: 40px 20px;
 
         &__title {
             font-size: 22px;
             margin-bottom: 32px;
         }
     }
-
-    @media (max-width: 375px) {
-        padding: 32px 12px;
-
-        &__title {
-            font-size: 20px;
-            margin-bottom: 24px;
-        }
-    }
 }

package/dist/components/ConstructorComponents/variables.scss

@@ -13,4 +13,4 @@ $white: #FFFFFF;
 
 // Брейкпоинты
 $tablet: 1100px;
-$mobile: 4030px;
+$mobile: 430px;

package/package.json

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