ecomlab-components-next 0.1.257 → 0.1.260

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

@@ -9,30 +9,34 @@ var _react = _interopRequireDefault(require("react"));
 var _image = _interopRequireDefault(require("next/image"));
 var _phone = _interopRequireDefault(require("./img/phone.png"));
 require("./PhoneBlockV2.scss");
+var _ButtonBasicV = _interopRequireDefault(require("@/components/Buttons/ButtonBasicV2/ButtonBasicV2"));
 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);
   return /*#__PURE__*/_react["default"].createElement("section", {
-    className: "phone-block2"
+    className: "phone-block-v2"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "phone-block2__content"
+    className: "phone-block-v2__content"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "phone-block2__badge"
+    className: "phone-block-v2__badge"
   }, "Telegram-\u043A\u0430\u043D\u0430\u043B"), /*#__PURE__*/_react["default"].createElement("h2", {
-    className: "phone-block2__title"
+    className: "phone-block-v2__title"
   }, "\u0417\u0430\u0445\u043E\u0434\u0438 \u0432 \u043D\u0430\u0448 ", /*#__PURE__*/_react["default"].createElement("span", null, "Telegram-\u043A\u0430\u043D\u0430\u043B"), ", \u0442\u0430\u043C \u043C\u044B \u0440\u0435\u0433\u0443\u043B\u044F\u0440\u043D\u043E \u0434\u0435\u043B\u0438\u043C\u0441\u044F \u043F\u043E\u043B\u0435\u0437\u043D\u043E\u0439 \u0438\u043D\u0444\u043E\u0439 \u0438 \u043D\u0430\u0448\u0438\u043C\u0438 \u043A\u0435\u0439\u0441\u0430\u043C\u0438"), /*#__PURE__*/_react["default"].createElement("p", {
-    className: "phone-block2__description"
-  }, "\u0422\u0430\u043C \u0442\u044B \u043D\u0430\u0439\u0434\u0451\u0448\u044C \u0435\u0434\u0438\u043D\u043E\u043C\u044B\u0448\u043B\u0435\u043D\u043D\u0438\u043A\u043E\u0432, \u043F\u043E\u0434\u0435\u043B\u0438\u0448\u044C\u0441\u044F \u043E\u043F\u044B\u0442\u043E\u043C \u0438 \u0437\u0430\u0434\u0430\u0448\u044C \u0438\u043D\u0442\u0435\u0440\u0435\u0441\u0443\u044E\u0449\u0438\u0435 \u0432\u043E\u043F\u0440\u043E\u0441\u044B, \u043D\u0430 \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u043C\u044B \u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E \u043E\u0442\u0432\u0435\u0442\u0438\u043C"), /*#__PURE__*/_react["default"].createElement("button", {
-    className: "phone-block2__button",
+    className: "phone-block-v2__description"
+  }, "\u0422\u0430\u043C \u0442\u044B \u043D\u0430\u0439\u0434\u0451\u0448\u044C \u0435\u0434\u0438\u043D\u043E\u043C\u044B\u0448\u043B\u0435\u043D\u043D\u0438\u043A\u043E\u0432, \u043F\u043E\u0434\u0435\u043B\u0438\u0448\u044C\u0441\u044F \u043E\u043F\u044B\u0442\u043E\u043C \u0438 \u0437\u0430\u0434\u0430\u0448\u044C \u0438\u043D\u0442\u0435\u0440\u0435\u0441\u0443\u044E\u0449\u0438\u0435 \u0432\u043E\u043F\u0440\u043E\u0441\u044B, \u043D\u0430 \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u043C\u044B \u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E \u043E\u0442\u0432\u0435\u0442\u0438\u043C"), /*#__PURE__*/_react["default"].createElement(_ButtonBasicV["default"], {
+    className: "phone-block-v2__btn",
+    green: true,
     onClick: function onClick() {
       var _window;
       return (_window = window) === null || _window === void 0 ? void 0 : _window.open('https://t.me/itkasha', '_blank');
-    }
-  }, "\u041D\u0430\u0448\u0438 \u043D\u043E\u0432\u043E\u0441\u0442\u0438 \u2192")), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "phone-block2__img-box"
+    },
+    text: 'Наши новости →',
+    size: "40px"
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "phone-block-v2__image-box"
   }, /*#__PURE__*/_react["default"].createElement(_image["default"], {
-    className: "phone-block2__img",
+    className: "phone-block-v2__image",
     src: _phone["default"],
     alt: "Telegram phone"
   })));

package/dist/components/ConstructorComponents/PhoneBlockV2/PhoneBlockV2.scss

@@ -1,16 +1,16 @@
 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
 @import '../variables.scss';
 
-.phone-block2 {
+.phone-block-v2 {
     max-width: 1280px;
     margin: 0 auto;
-    background: #FFFFFF;
+    background: $white;
     border-radius: 24px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     overflow: hidden;
-    border: 1px solid #E5E7EB;
+    border: 1px solid $border;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 
@@ -18,10 +18,6 @@
         font-family: 'Manrope', 'Golos Text', sans-serif !important;
     }
 
-    // Отступы как в референсе (как у .how, .pricing, .reviews, .faq)
-    margin-top: 96px;
-    margin-bottom: 96px;
-
     &:hover {
         transform: translateY(-4px);
         box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
@@ -43,7 +39,6 @@
         font-size: 13px;
         font-weight: 600;
         margin-bottom: 20px;
-        font-family: 'Manrope', sans-serif;
 
         svg {
             width: 16px;
@@ -52,13 +47,12 @@
     }
 
     &__title {
-        font-size: 32px;
+        font-size: 30px;
         font-weight: 800;
         line-height: 1.2;
         letter-spacing: -1px;
-        color: #1A1A2E;
+        color: $text;
         margin-bottom: 16px;
-        font-family: 'Manrope', sans-serif;
 
         span {
             color: $green;
@@ -68,76 +62,58 @@
     &__description {
         font-size: 15px;
         line-height: 1.5;
-        color: #6B7280;
+        color: $muted;
         margin-bottom: 32px;
         max-width: 500px;
-        font-family: 'Manrope', sans-serif;
     }
 
-    &__button {
-        background: $green;
-        color: #FFFFFF;
-        border: none;
-        border-radius: 10px;
-        padding: 12px 28px;
-        font-size: 15px;
-        font-weight: 600;
-        font-family: 'Manrope', sans-serif;
-        cursor: pointer;
-        transition: all 0.2s ease;
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-
-        &:hover {
-            background: $green;
-            transform: translateY(-1px);
-        }
-
-        &:active {
-            transform: translateY(0);
-        }
-    }
-
-    &__img-box {
+    &__image-box {
         flex-shrink: 0;
+        padding: 24px 48px 24px 0;
     }
 
-    &__img {
+    &__image {
         width: 220px;
         height: auto;
         display: block;
         object-fit: contain;
     }
+
+    @keyframes fadeUp {
+        from {
+            opacity: 0;
+            transform: translateY(24px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
 }
 
-// ========== МОБИЛЬНАЯ АДАПТАЦИЯ (как в референсе) ==========
-@media (max-width: 1024px) {
-    .phone-block2 {
-        margin-left: 32px;
-        margin-right: 32px;
+// Планшет (до 1100px)
+@media (max-width: 1100px) {
+    .phone-block-v2 {
+        margin: 0 24px;
         
         &__title {
-            font-size: 28px;
+            font-size: 26px;
         }
         
-        &__img {
+        &__image {
             width: 200px;
         }
         
-        &__img-box {
-            padding: 24px 40px 24px 32px;
+        &__image-box {
+            padding: 24px 40px 24px 0;
         }
     }
 }
 
+// Планшет вертикальный (до 900px) - перенос в колонку
 @media (max-width: 900px) {
-    .phone-block2 {
+    .phone-block-v2 {
         flex-direction: column;
-        margin-top: 60px;
-        margin-bottom: 60px;
-        margin-left: 24px;
-        margin-right: 24px;
 
         &__content {
             padding: 40px 32px 24px;
@@ -149,10 +125,6 @@
             margin-right: auto;
         }
 
-        &__title {
-            font-size: 28px;
-        }
-
         &__description {
             font-size: 14px;
             margin-left: auto;
@@ -160,43 +132,24 @@
             max-width: 100%;
         }
 
-        &__img-box {
+        &__image-box {
             margin: 0 24px 24px;
-            padding: 24px;
+            padding: 0;
             display: flex;
             justify-content: center;
         }
 
-        &__img {
+        &__image {
             width: 180px;
         }
-
-        &__button {
-            display: inline-flex;
-            justify-content: center;
-        }
-    }
-}
-
-@media (max-width: 768px) {
-    .phone-block2 {
-        margin-top: 48px;
-        margin-bottom: 48px;
-        margin-left: 20px;
-        margin-right: 20px;
-        
-        &__title {
-            font-size: 26px;
-        }
     }
 }
 
+// Мобильная версия (до 600px)
 @media (max-width: 600px) {
-    .phone-block2 {
-        margin-top: 40px;
-        margin-bottom: 40px;
-        margin-left: 16px;
-        margin-right: 16px;
+    .phone-block-v2 {
+        margin: 0 20px;
+        border-radius: 20px;
 
         &__title {
             font-size: 24px;
@@ -206,30 +159,20 @@
             font-size: 13px;
         }
         
-        &__img-box {
+        &__image-box {
             margin: 0 20px 20px;
-            padding: 20px;
         }
 
-        &__img {
+        &__image {
             width: 160px;
         }
-
-        &__button {
-            padding: 10px 20px;
-            font-size: 14px;
-            width: 100%;
-            justify-content: center;
-        }
     }
 }
 
+// Мобильная версия (до 480px)
 @media (max-width: 480px) {
-    .phone-block2 {
-        margin-top: 32px;
-        margin-bottom: 32px;
-        margin-left: 12px;
-        margin-right: 12px;
+    .phone-block-v2 {
+        margin: 0 16px;
         border-radius: 20px;
 
         &__content {
@@ -246,12 +189,11 @@
             line-height: 1.45;
         }
 
-        &__img-box {
+        &__image-box {
             margin: 0 16px 20px;
-            padding: 16px;
         }
 
-        &__img {
+        &__image {
             width: 140px;
         }
 
@@ -259,19 +201,14 @@
             font-size: 12px;
             padding: 4px 12px;
         }
-        
-        &__button {
-            border-radius: 10px;
-        }
     }
 }
 
-@media (max-width: 375px) {
-    .phone-block2 {
-        margin-top: 24px;
-        margin-bottom: 24px;
-        margin-left: 12px;
-        margin-right: 12px;
+// Мобильная версия (до 430px)
+@media (max-width: 430px) {
+    .phone-block-v2 {
+        margin: 0 20px;
+        border-radius: 16px;
 
         &__content {
             padding: 24px 16px 16px;
@@ -285,12 +222,11 @@
             font-size: 12px;
         }
 
-        &__img-box {
+        &__image-box {
             margin: 0 12px 16px;
-            padding: 14px;
         }
 
-        &__img {
+        &__image {
             width: 120px;
         }
         
@@ -298,5 +234,10 @@
             font-size: 11px;
             padding: 3px 10px;
         }
+
+        &__btn {
+            max-width: 100% !important;
+            width: 100% !important;
+        }
     }
 }

package/dist/components/ConstructorComponents/PointsListV2/PointsListV2.scss

@@ -1,20 +1,14 @@
 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
 @import '../variables.scss';
 
-$text: #1A1A2E;
-$muted: #6B7280;
-$border: #E5E7EB;
-$bg: #F7F8FC;
-$white: #FFFFFF;
-
 .points-list-v2 {
     font-family: 'Manrope', sans-serif;
     background: $bg;
     width: 100%;
-    padding: 80px 48px;
+    padding: 96px 40px;
 
     * {
-        font-family: 'Manrope', 'Golos Text', sans-serif;
+        font-family: 'Manrope', 'Golos Text', sans-serif !important;
     }
 
     &__inner {
@@ -34,14 +28,14 @@ $white: #FFFFFF;
     &__content {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
-        gap: 20px;
+        gap: 24px;
     }
 
     &__item {
         background: $white;
         border: 1px solid $border;
-        border-radius: 14px;
-        padding: 24px 20px 24px;
+        border-radius: 20px;
+        padding: 28px 24px;
         display: flex;
         flex-direction: column;
         transition: transform 0.2s ease, box-shadow 0.2s ease;
@@ -61,28 +55,27 @@ $white: #FFFFFF;
         display: flex;
         align-items: center;
         justify-content: center;
-        margin-bottom: 16px;
+        margin-bottom: 20px;
 
         img {
             width: 24px;
             height: 24px;
             object-fit: contain;
-            filter: brightness(0) saturate(100%) invert(35%) sepia(91%) saturate(548%) hue-rotate(118deg) brightness(95%) contrast(96%);
         }
     }
 
     &__item-title {
-        font-size: 15px;
+        font-size: 16px;
         font-weight: 700;
         color: $text;
-        margin: 0 0 6px 0;
+        margin: 0 0 8px 0;
     }
 
     &__item-text {
-        font-size: 12px;
+        font-size: 14px;
         color: $muted;
         line-height: 1.5;
-        margin: 0 0 16px 0;
+        margin: 0;
     }
 
     &__item-link {
@@ -93,59 +86,80 @@ $white: #FFFFFF;
         display: inline-flex;
         align-items: center;
         gap: 4px;
-        margin-top: auto;
+        margin-top: 16px;
 
         &:hover {
             gap: 6px;
         }
     }
 
-    // Адаптация как в референсе
-    @media (max-width: 1024px) {
-        padding: 72px 32px;
-
-        &__content {
-            gap: 16px;
+    @keyframes fadeUp {
+        from {
+            opacity: 0;
+            transform: translateY(24px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
         }
     }
+}
+
+// Планшет (до 1100px)
+@media (max-width: 1100px) {
+    .points-list-v2 {
+        padding: 72px 24px;
 
-    @media (max-width: 900px) {
         &__content {
-            grid-template-columns: repeat(2, 1fr);
+            gap: 20px;
         }
-    }
-
-    @media (max-width: 768px) {
-        padding: 60px 24px;
 
         &__title {
             font-size: 26px;
             margin-bottom: 40px;
         }
     }
+}
 
-    @media (max-width: 600px) {
-        padding: 48px 20px;
-    }
-
-    @media (max-width: 500px) {
-        padding: 48px 16px;
-
-        &__title {
-            font-size: 24px;
+// Перенос сетки в 2 колонки (до 900px)
+@media (max-width: 900px) {
+    .points-list-v2 {
+        &__content {
+            grid-template-columns: repeat(2, 1fr);
         }
+    }
+}
+// Мобильная версия (до 500px) - 1 колонка
+@media (max-width: 500px) {
+    .points-list-v2 {
 
         &__content {
             grid-template-columns: 1fr;
-            gap: 12px;
+            gap: 16px;
+        }
+
+        &__item {
+            padding: 20px 16px;
         }
     }
+}
 
-    @media (max-width: 375px) {
-        padding: 36px 12px;
+// Мобильная версия (до 430px)
+@media (max-width: 430px) {
+    .points-list-v2 {
+        padding: 40px 20px;
 
         &__title {
             font-size: 22px;
+            margin-bottom: 32px;
+        }
+
+        &__item-title {
+            font-size: 15px;
+        }
+
+        &__item-text {
+            font-size: 13px;
         }
     }
 }

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

@@ -34,38 +34,38 @@ var QuestionsV2 = function QuestionsV2(_ref) {
     setCurrentDrop(newState);
   };
   return /*#__PURE__*/_react["default"].createElement("section", {
-    className: "questions-section",
+    className: "questions-v2",
     itemScope: true,
     itemType: "https://schema.org/FAQPage"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "questions-section__inner"
+    className: "questions-v2__inner"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "questions-section__header"
+    className: "questions-v2__header"
   }, /*#__PURE__*/_react["default"].createElement("h2", {
-    className: "questions-section__title"
+    className: "questions-v2__title"
   }, title || 'Часто задаваемые вопросы'), /*#__PURE__*/_react["default"].createElement("p", {
-    className: "questions-section__subtitle"
+    className: "questions-v2__subtitle"
   }, "\u041E\u0442\u0432\u0435\u0442\u044B \u043D\u0430 \u0441\u0430\u043C\u044B\u0435 \u043F\u043E\u043F\u0443\u043B\u044F\u0440\u043D\u044B\u0435 \u0432\u043E\u043F\u0440\u043E\u0441\u044B \u043E \u043F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u0435")), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "questions-section__list"
+    className: "questions-v2__list"
   }, list === null || list === void 0 ? void 0 : list.map(function (_ref2, index) {
     var questions = _ref2.questions,
       response = _ref2.response;
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: questions + index,
-      className: "questions-section__item ".concat(currentDrop.has(questions) ? 'open' : '')
+      className: "questions-v2__item ".concat(currentDrop.has(questions) ? 'questions-v2__item_open' : '')
     }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "questions-section__question",
+      className: "questions-v2__question",
       onClick: function onClick() {
         return toggleItem(questions);
       }
     }, /*#__PURE__*/_react["default"].createElement("span", {
-      className: "questions-section__question-text"
+      className: "questions-v2__question-text"
     }, questions), /*#__PURE__*/_react["default"].createElement("span", {
-      className: "questions-section__icon"
+      className: "questions-v2__icon"
     }, "+")), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "questions-section__answer"
+      className: "questions-v2__answer"
     }, /*#__PURE__*/_react["default"].createElement("p", {
-      className: "questions-section__answer-text"
+      className: "questions-v2__answer-text"
     }, response)));
   }))));
 };