ecomlab-components-next 0.1.256 → 0.1.259

package/dist/components/ConstructorComponents/CardsV2/CardsV2.scss

@@ -1,158 +1,162 @@
- @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
- @import '../variables.scss';
-
- .cards2-grey {
-     --purple: #6B5CE7;
-     --purple-light: #EEF0FF;
-     --purple-dark: #5448D0;
-     --text: #1A1A2E;
-     --muted: #6B7280;
-     --border: #E5E7EB;
-     --bg: #F7F8FC;
-     --white: #FFFFFF;
-
-     font-family: 'Manrope', sans-serif;
-     background: var(--white);
-     width: 100%;
-     box-sizing: border-box;
-     padding: 96px 48px;
-
-     * {
-         font-family: 'Manrope', 'Golos Text', sans-serif !important;
-     }
- }
-
- .cards2-grey__inner {
-     max-width: 1280px;
-     margin: 0 auto;
-     display: flex;
-     flex-direction: column;
-     gap: 48px;
- }
-
- /* ── Title ── */
- .cards2-grey__title {
-     font-size: 30px;
-     font-weight: 800;
-     letter-spacing: -0.5px;
-     color: var(--text);
-     margin: 0;
-     text-align: center;
- }
-
- /* ── Grid ── */
- .cards2-grey__items {
-     display: grid;
-     grid-template-columns: repeat(4, 1fr);
-     gap: 16px;
- }
-
- /* ── Card ── */
- .cards2-grey__item {
-     background: var(--bg);
-     border: 1px solid var(--border);
-     border-radius: 16px;
-     padding: 32px 28px;
-     display: flex;
-     flex-direction: column;
-     gap: 14px;
-     transition: transform .2s, box-shadow .2s;
-     box-sizing: border-box;
- }
-
- .cards2-grey__item:hover {
-     transform: translateY(-4px);
-     box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
- }
-
- /* accent top bar */
- .cards2-grey__item::before {
-     content: '';
-     display: block;
-     width: 32px;
-     height: 3px;
-     border-radius: 99px;
-     background: $green;
-     margin-bottom: 4px;
- }
-
- .cards2-grey__title-card {
-     font-size: 40px;
-     font-weight: 800;
-     letter-spacing: -1.5px;
-     color: var(--text);
-     margin: 0;
-     line-height: 1;
-     background: linear-gradient(135deg, $green 0%, $green 100%);
-     -webkit-background-clip: text;
-     -webkit-text-fill-color: transparent;
-     background-clip: text;
- }
-
- .cards2-grey__description-card {
-     font-size: 13px;
-     font-weight: 500;
-     color: var(--muted);
-     line-height: 1.65;
-     margin: 0;
- }
-
- /* ── TABLET (≤ 900px) ── */
- @media (max-width: 900px) {
-     .cards2-grey {
-         padding: 72px 32px;
-     }
-
-     .cards2-grey__items {
-         grid-template-columns: repeat(2, 1fr);
-     }
-
-     .cards2-grey__title {
-         font-size: 26px;
-     }
- }
-
- /* ── MOBILE (≤ 600px) ── */
- @media (max-width: 600px) {
-     .cards2-grey {
-         padding: 56px 24px;
-     }
-
-     .cards2-grey__items {
-         grid-template-columns: repeat(2, 1fr);
-         gap: 12px;
-     }
-
-     .cards2-grey__title-card {
-         font-size: 32px;
-     }
- }
-
- /* ── SMALL MOBILE (≤ 430px) ── */
- @media (max-width: 430px) {
-     .cards2-grey {
-         padding: 40px 16px;
-     }
-
-     .cards2-grey__title {
-         font-size: 22px;
-     }
-
-     .cards2-grey__items {
-         grid-template-columns: 1fr 1fr;
-         gap: 10px;
-     }
-
-     .cards2-grey__item {
-         padding: 24px 18px;
-         gap: 10px;
-     }
-
-     .cards2-grey__title-card {
-         font-size: 28px;
-     }
-
-     .cards2-grey__description-card {
-         font-size: 12px;
-     }
- }
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
+@import '../variables.scss';
+
+.cards-v2 {
+    font-family: 'Manrope', sans-serif;
+    background: $white;
+    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: 48px;
+    }
+
+    &__title {
+        font-size: 30px;
+        font-weight: 800;
+        letter-spacing: -0.5px;
+        color: $text;
+        margin: 0;
+        text-align: center;
+    }
+
+    &__items {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 24px;
+    }
+
+    &__item {
+        background: $bg;
+        border: 1px solid $border;
+        border-radius: 20px;
+        padding: 32px 28px;
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+        transition: transform 0.2s, box-shadow 0.2s;
+        position: relative;
+        overflow: hidden;
+
+        &:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
+        }
+
+        &::before {
+            content: '';
+            display: block;
+            width: 40px;
+            height: 4px;
+            border-radius: 99px;
+            background: $green;
+            margin-bottom: 4px;
+        }
+    }
+
+    &__card-title {
+        font-size: 40px;
+        font-weight: 800;
+        letter-spacing: -1.5px;
+        color: $text;
+        margin: 0;
+        line-height: 1;
+        background: linear-gradient(135deg, $green 0%, $green 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+
+    &__description {
+        font-size: 14px;
+        font-weight: 500;
+        color: $muted;
+        line-height: 1.65;
+        margin: 0;
+    }
+
+    @keyframes fadeUp {
+        from {
+            opacity: 0;
+            transform: translateY(24px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+}
+
+// Планшет (до 1100px)
+@media (max-width: 1100px) {
+    .cards-v2 {
+        padding: 72px 24px;
+
+        &__items {
+            gap: 20px;
+        }
+
+        &__title {
+            font-size: 26px;
+        }
+    }
+}
+
+// Мобильная версия (до 768px)
+@media (max-width: 768px) {
+    .cards-v2 {
+        
+        &__items {
+            grid-template-columns: repeat(2, 1fr);
+            gap: 16px;
+        }
+
+        &__card-title {
+            font-size: 32px;
+        }
+
+        &__description {
+            font-size: 13px;
+        }
+    }
+}
+
+// Мобильная версия (до 430px)
+@media (max-width: 430px) {
+    .cards-v2 {
+        padding: 40px 20px;
+
+        &__inner {
+            gap: 32px;
+        }
+
+        &__title {
+            font-size: 22px;
+        }
+
+        &__items {
+            gap: 12px;
+        }
+
+        &__item {
+            padding: 20px 16px;
+            gap: 10px;
+        }
+
+        &__card-title {
+            font-size: 24px;
+        }
+
+        &__description {
+            font-size: 11px;
+        }
+    }
+}

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

@@ -15,25 +15,25 @@ var CardsWithButton = function CardsWithButton(_ref) {
     btnText = _ref$btnText === void 0 ? 'Подключиться' : _ref$btnText,
     onBtnClick = _ref.onBtnClick;
   return /*#__PURE__*/_react["default"].createElement("section", {
-    className: "cards-with-btn cards-with-btn--no-icons"
+    className: "cards-with-btn-v2"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "cards-with-btn__inner"
+    className: "cards-with-btn-v2__inner"
   }, title && /*#__PURE__*/_react["default"].createElement("h2", {
-    className: "cards-with-btn__title"
+    className: "cards-with-btn-v2__title"
   }, title), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "cards-with-btn__content"
+    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__card",
+      className: "cards-with-btn-v2__card",
       key: index
     }, /*#__PURE__*/_react["default"].createElement("h3", {
-      className: "cards-with-btn__card-title"
+      className: "cards-with-btn-v2__card-title"
     }, title), /*#__PURE__*/_react["default"].createElement("p", {
-      className: "cards-with-btn__card-description"
+      className: "cards-with-btn-v2__card-description"
     }, description), /*#__PURE__*/_react["default"].createElement("button", {
-      className: "cards-with-btn__card-btn",
+      className: "cards-with-btn-v2__card-btn",
       onClick: function onClick() {
         return onBtnClick === null || onBtnClick === void 0 ? void 0 : onBtnClick();
       }

package/dist/components/ConstructorComponents/CardsWithButton/CardsWithButton.scss

@@ -1,17 +1,15 @@
 @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;
-
-.cards-with-btn {
+.cards-with-btn-v2 {
     font-family: 'Manrope', sans-serif;
     background: $bg;
     width: 100%;
-    padding: 96px 48px;
+    padding: 96px 40px;
+
+    * {
+        font-family: 'Manrope', 'Golos Text', sans-serif !important;
+    }
 
     &__inner {
         max-width: 1280px;
@@ -63,7 +61,7 @@ $white: #FFFFFF;
                 width: 6px;
             }
 
-            .cards-with-btn__card-btn {
+            .cards-with-btn-v2__card-btn {
                 gap: 8px;
                 color: $green-dark;
             }
@@ -119,57 +117,39 @@ $white: #FFFFFF;
         width: fit-content;
     }
 
-    // ========== МОБИЛЬНАЯ АДАПТАЦИЯ ==========
-
-    @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) {
+    .cards-with-btn-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;
         }
-
-        &__card {
-            padding: 24px 20px;
-        }
-
-        &__card-icon {
-            width: 48px;
-            height: 48px;
-
-            svg {
-                width: 24px;
-                height: 24px;
-            }
-        }
-
-        &__card-title {
-            font-size: 16px;
-        }
-    }
-
-    @media (max-width: 600px) {
-        padding: 48px 20px;
     }
+}
 
-    @media (max-width: 500px) {
-        padding: 48px 16px;
-
-        &__title {
-            font-size: 24px;
-        }
-
+// Мобильная версия (до 500px) - 1 колонка
+@media (max-width: 500px) {
+    .cards-with-btn-v2 {
+        
         &__content {
             grid-template-columns: 1fr;
             gap: 16px;
@@ -179,17 +159,16 @@ $white: #FFFFFF;
             padding: 20px 16px;
         }
     }
+}
 
-    @media (max-width: 375px) {
-        padding: 36px 12px;
+// Мобильная версия (до 430px)
+@media (max-width: 430px) {
+    .cards-with-btn-v2 {
+        padding: 40px 20px;
 
         &__title {
             font-size: 22px;
             margin-bottom: 32px;
         }
-
-        &__card-description {
-            font-size: 13px;
-        }
     }
 }

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

@@ -42,17 +42,17 @@ var ClientsAboutUsV2 = function ClientsAboutUsV2(_ref) {
     setRefPage("?ref_page=".concat(currentUrl));
   }, []);
   return /*#__PURE__*/_react["default"].createElement("section", {
-    className: "clients-about-us-v2"
+    className: "clients-about-v2"
   }, title && /*#__PURE__*/_react["default"].createElement("h2", {
-    className: "clients-about-us-v2__title"
+    className: "clients-about-v2__title"
   }, title), (blockquote || cite) && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "clients-about-us-v2__header"
+    className: "clients-about-v2__header"
   }, blockquote && /*#__PURE__*/_react["default"].createElement("blockquote", {
-    className: "clients-about-us-v2__blockquote"
+    className: "clients-about-v2__blockquote"
   }, blockquote), cite && /*#__PURE__*/_react["default"].createElement("cite", {
-    className: "clients-about-us-v2__cite"
+    className: "clients-about-v2__cite"
   }, cite)), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "clients-about-us-v2__cards"
+    className: "clients-about-v2__cards"
   }, list_about_us.map(function (_ref2, ind) {
     var title = _ref2.title,
       description = _ref2.description,
@@ -60,19 +60,19 @@ var ClientsAboutUsV2 = function ClientsAboutUsV2(_ref) {
     var isRightCard = ind === 1;
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: title + description,
-      className: isRightCard ? 'clients-about-us-v2__card clients-about-us-v2__card--dark' : 'clients-about-us-v2__card'
+      className: "clients-about-v2__card ".concat(isRightCard ? 'clients-about-v2__card_dark' : '')
     }, /*#__PURE__*/_react["default"].createElement("h3", {
-      className: "clients-about-us-v2__card-title"
+      className: "clients-about-v2__card-title"
     }, title), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "clients-about-us-v2__card-description"
+      className: "clients-about-v2__description"
     }, description), isRightCard ? /*#__PURE__*/_react["default"].createElement("button", {
-      className: "clients-about-us-v2__card-btn clients-about-us-v2__card-btn--green",
+      className: "clients-about-v2__button clients-about-v2__button_green",
       onClick: function onClick() {
         var _window2;
         return (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.open("".concat(linkMain, "/auth").concat(refPage), '_blank');
       }
     }, btnName ? btnName : 'Подключиться', " \u2192") : /*#__PURE__*/_react["default"].createElement("button", {
-      className: "clients-about-us-v2__card-btn clients-about-us-v2__card-btn--outline",
+      className: "clients-about-v2__button clients-about-v2__button_outline",
       onClick: function onClick() {
         var _window3;
         return (_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.open("".concat(linkMain, "/auth").concat(refPage), '_blank');