ecomlab-components-next 0.1.257 → 0.1.260

package/dist/components/ConstructorComponents/CardsServicesV2/CardsServicesV2.scss

@@ -1,64 +1,72 @@
-@import '../variables.scss';
 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
+@import '../variables.scss';
 
 .cards-services-v2 {
-    padding: 80px 48px;
-    background: #F7F8FC;
-    
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-family: 'Manrope', sans-serif;
+    background: $bg;
+    width: 100%;
+    padding: 96px 40px;
+
     * {
         font-family: 'Manrope', 'Golos Text', sans-serif !important;
     }
-    
+
     &__header {
         text-align: center;
         margin-bottom: 48px;
     }
-    
+
     &__title {
+        text-align: center;
+        width: 100%;
         font-size: 30px;
         font-weight: 800;
         letter-spacing: -0.5px;
-        margin-bottom: 8px;
-        color: #1A1A2E;
+        color: $text;
+        margin: 0 0 8px;
     }
-    
+
     &__subtitle {
+        color: $muted;
         font-size: 15px;
-        color: #6B7280;
-        line-height: 1.5;
+        margin: 0;
     }
-    
+
     &__grid {
         max-width: 1280px;
         margin: 0 auto;
         display: grid;
         grid-template-columns: repeat(4, 1fr);
-        gap: 20px;
+        gap: 24px;
     }
-    
+
     &__card-link {
         text-decoration: none;
         display: block;
     }
-    
+
     &__card {
-        background: #FFFFFF;
-        border-radius: 14px;
-        padding: 24px 20px 20px;
-        border: 1px solid #E5E7EB;
+        background: $white;
+        border-radius: 20px;
+        padding: 24px;
+        border: 1px solid $border;
         text-align: left;
         transition: transform 0.2s ease, box-shadow 0.2s ease;
         cursor: pointer;
         height: 100%;
         display: flex;
         flex-direction: column;
-        
+
         &:hover {
             transform: translateY(-4px);
             box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
         }
     }
-    
+
     &__img {
         width: 100%;
         height: auto;
@@ -68,266 +76,227 @@
         object-fit: cover;
         aspect-ratio: 1 / 0.8;
     }
-    
+
     &__placeholder {
         width: 100%;
         aspect-ratio: 1 / 0.8;
-        background: #D1FAE5;
+        background: $green-light-bg;
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 16px;
     }
-    
+
     &__placeholder-text {
         font-size: 32px;
         font-weight: 600;
-        color: #059669;
+        color: $green;
     }
-    
+
     &__card-title {
-        font-size: 16px;
+        font-size: 18px;
         font-weight: 700;
         margin-bottom: 8px;
-        color: #1A1A2E;
+        color: $text;
     }
-    
+
     &__card-description {
-        font-size: 13px;
-        color: #6B7280;
+        font-size: 14px;
+        color: $muted;
         line-height: 1.5;
         margin-bottom: 16px;
         flex: 1;
     }
-    
+
     &__card-link-text {
-        color: #059669;
-        font-size: 13px;
+        color: $green;
+        font-size: 14px;
         font-weight: 600;
         display: inline-flex;
         align-items: center;
         gap: 4px;
         transition: gap 0.2s ease;
-        
+
         &:hover {
-            gap: 6px;
+            gap: 8px;
         }
     }
-    
+
     &__button {
-        background: #059669;
-        color: #FFFFFF;
-        border: none;
-        border-radius: 10px;
-        padding: 14px 28px;
-        font-size: 15px;
-        font-weight: 700;
-        font-family: 'Manrope', sans-serif;
-        cursor: pointer;
-        transition: all 0.2s ease;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
         margin: 48px auto 0;
-        max-width: 280px;
-        width: 100%;
-        
+        margin-left: auto;
+        margin-right: auto;
+
         &:hover {
-            background: #047857;
+            background: $green-dark;
             transform: translateY(-2px);
             box-shadow: 0 4px 16px rgba(5, 150, 105, 0.35);
         }
-        
+
         &:active {
             transform: translateY(0);
         }
     }
-}
 
-// ========== МОБИЛЬНАЯ АДАПТАЦИЯ ==========
+    @keyframes fadeUp {
+        from {
+            opacity: 0;
+            transform: translateY(24px);
+        }
+
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+}
 
-// Планшеты (3 колонки)
-@media (max-width: 1024px) {
+// Планшет (до 1100px)
+@media (max-width: 1100px) {
     .cards-services-v2 {
-        padding: 60px 32px;
-        
+        padding: 72px 24px;
+
         &__grid {
             grid-template-columns: repeat(3, 1fr);
-            gap: 16px;
+            gap: 20px;
         }
-        
+
         &__title {
-            font-size: 28px;
+            font-size: 26px;
         }
     }
 }
 
-// Маленькие планшеты (2 колонки)
+// Мобильная версия (до 768px)
 @media (max-width: 768px) {
     .cards-services-v2 {
-        padding: 50px 24px;
-        
+
         &__grid {
             grid-template-columns: repeat(2, 1fr);
             gap: 16px;
         }
-        
-        &__title {
-            font-size: 26px;
-        }
-        
+
         &__subtitle {
             font-size: 14px;
         }
-        
+
         &__card {
-            padding: 20px 16px 16px;
+            padding: 20px;
         }
-        
+
         &__card-title {
-            font-size: 15px;
+            font-size: 16px;
         }
-        
+
         &__card-description {
-            font-size: 12px;
+            font-size: 13px;
         }
-        
+
         &__button {
             padding: 12px 24px;
             font-size: 14px;
             margin-top: 40px;
             max-width: 240px;
         }
-        
+
         &__placeholder-text {
             font-size: 28px;
         }
     }
 }
 
-// Крупные телефоны
-@media (max-width: 600px) {
+// Мобильная версия (до 480px)
+@media (max-width: 480px) {
     .cards-services-v2 {
-        padding: 40px 20px;
-        
+
         &__header {
             margin-bottom: 32px;
         }
-        
-        &__title {
-            font-size: 24px;
-        }
-        
-        &__subtitle {
-            font-size: 13px;
-        }
-        
-        &__grid {
-            gap: 14px;
-        }
-    }
-}
 
-// Телефоны (1 колонка)
-@media (max-width: 480px) {
-    .cards-services-v2 {
-        padding: 32px 16px;
-        
         &__grid {
             grid-template-columns: 1fr;
-            gap: 16px;
-            max-width: 100%;
-        }
-        
-        &__title {
-            font-size: 22px;
+            gap: 20px;
         }
-        
+
         &__subtitle {
             font-size: 13px;
         }
-        
+
         &__card {
-            padding: 24px 20px;
+            padding: 24px;
             text-align: center;
             align-items: center;
         }
-        
+
         &__img {
             max-width: 280px;
             margin-left: auto;
             margin-right: auto;
         }
-        
+
         &__placeholder {
             max-width: 280px;
             margin-left: auto;
             margin-right: auto;
         }
-        
+
         &__card-title {
-            font-size: 16px;
+            font-size: 18px;
             text-align: center;
-            margin-bottom: 8px;
         }
-        
+
         &__card-description {
             font-size: 13px;
             text-align: center;
             margin-bottom: 20px;
         }
-        
+
         &__card-link-text {
             justify-content: center;
             font-size: 14px;
         }
-        
-        &__button {
-            padding: 12px 24px;
-            font-size: 14px;
-            margin-top: 32px;
-            max-width: 100%;
-        }
-        
+
+
         &__placeholder-text {
             font-size: 28px;
         }
     }
 }
 
-// Маленькие телефоны
-@media (max-width: 375px) {
+// Мобильная версия (до 430px)
+@media (max-width: 430px) {
     .cards-services-v2 {
-        padding: 28px 12px;
-        
+        padding: 40px 20px;
+
         &__title {
-            font-size: 20px;
+            font-size: 22px;
         }
-        
+
         &__subtitle {
-            font-size: 12px;
+            font-size: 13px;
         }
-        
+
         &__card {
-            padding: 20px 16px;
+            padding: 20px;
         }
-        
+
         &__card-title {
-            font-size: 15px;
+            font-size: 16px;
         }
-        
+
         &__card-description {
             font-size: 12px;
         }
-        
-        &__card-link-text {
-            font-size: 13px;
-        }
-        
+
         &__placeholder-text {
             font-size: 24px;
         }
+
+        &__button {
+            margin-top: 32px;
+            width: 100% !important;
+            max-width: 100% !important;
+        }
     }
 }

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _image = _interopRequireDefault(require("next/image"));
 require("./CardsV2.scss");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var DEFAULT_LIST = [{
@@ -20,32 +19,32 @@ var DEFAULT_LIST = [{
   description: "\u0410\u0432\u0442\u043E\u043E\u0442\u0432\u0435\u0442\u044B \u0441 \u043F\u043E\u043C\u043E\u0449\u044C\u044E \u043D\u0435\u0439\u0440\u043E\u0441\u0435\u0442\u0438 \u043F\u043E\u043C\u043E\u0433\u0430\u044E\u0442 \u0432 5 \u0440\u0430\u0437 \u0431\u044B\u0441\u0442\u0440\u0435\u0435 \u043E\u0431\u0440\u0430\u0431\u0430\u0442\u044B\u0432\u0430\u0442\u044C \u043E\u0442\u0437\u044B\u0432\u044B \u043E\u043F\u0435\u0440\u0430\u0442\u043E\u0440\u0430\u043C\u0438."
 }, {
   title: "GPT-4o",
-  description: "\u0412\u043D\u0443\u0442\u0440\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u043C\u044B \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u043C \u043D\u0435\u0439\u0440\u043E\u0441\u0435\u0442\u044C GPT-4o. \u041E\u043D\u0430 \u043F\u0440\u043E\u0448\u043B\u0430 \u0442\u0435\u0441\u0442 \u0422\u044C\u044E\u0440\u0438\u043D\u0433\u0430 \u0438 \u0435\u0451 \u043E\u0442\u0432\u0435\u0442\u044B \u0442\u0430\u043A\u0438\u0435 \u0436\u0435, \u043A\u0430\u043A \u0443 \u0447\u0435\u043B\u043E\u0432\u0435\u043A\u0430.\xA0"
+  description: "\u0412\u043D\u0443\u0442\u0440\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u043C\u044B \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u043C \u043D\u0435\u0439\u0440\u043E\u0441\u0435\u0442\u044C GPT-4o. \u041E\u043D\u0430 \u043F\u0440\u043E\u0448\u043B\u0430 \u0442\u0435\u0441\u0442 \u0422\u044C\u044E\u0440\u0438\u043D\u0433\u0430 \u0438 \u0435\u0451 \u043E\u0442\u0432\u0435\u0442\u044B \u0442\u0430\u043A\u0438\u0435 \u0436\u0435, \u043A\u0430\u043A \u0443 \u0447\u0435\u043B\u043E\u0432\u0435\u043A\u0430. "
 }];
 var CardsV2 = function CardsV2(_ref) {
   var title = _ref.title,
     _ref$list = _ref.list,
     list = _ref$list === void 0 ? DEFAULT_LIST : _ref$list,
     child = _ref.child;
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("section", {
-    className: "cards2-grey"
+  return /*#__PURE__*/_react["default"].createElement("section", {
+    className: "cards-v2"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "cards2-grey__inner"
+    className: "cards-v2__inner"
   }, title && /*#__PURE__*/_react["default"].createElement("h2", {
-    className: "cards2-grey__title"
+    className: "cards-v2__title"
   }, title), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "cards2-grey__items"
+    className: "cards-v2__items"
   }, list.map(function (_ref2) {
     var cardTitle = _ref2.title,
       description = _ref2.description;
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "cards2-grey__item",
+      className: "cards-v2__item",
       key: cardTitle + description
     }, /*#__PURE__*/_react["default"].createElement("p", {
-      className: "cards2-grey__title-card"
+      className: "cards-v2__card-title"
     }, cardTitle), /*#__PURE__*/_react["default"].createElement("p", {
-      className: "cards2-grey__description-card"
+      className: "cards-v2__description"
     }, description));
-  })), child)));
+  })), child));
 };
 var _default = exports["default"] = CardsV2;