ecomlab-components-next 0.1.257 → 0.1.259

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

@@ -1,237 +1,251 @@
 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
 @import '../variables.scss';
 
-.lbi2-root {
-    --purple: #6B5CE7;
-    --purple-light: #EEF0FF;
-    --purple-dark: #5448D0;
-    --green: #22C55E;
-    --text: #1A1A2E;
-    --muted: #6B7280;
-    --border: #E5E7EB;
-    --bg: #F7F8FC;
-    --white: #FFFFFF;
-
+.blocks-info-v2 {
     font-family: 'Manrope', sans-serif;
-    background: var(--bg);
+    background: $bg;
     width: 100%;
-    box-sizing: border-box;
-    padding: 96px 48px;
+    padding: 96px 40px;
 
     * {
         font-family: 'Manrope', 'Golos Text', sans-serif !important;
     }
-}
-
-.lbi2-inner {
-    max-width: 1280px;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-    gap: 48px;
-}
-
-/* ── Section heading ── */
-.lbi2-section-title {
-    text-align: center;
-    width: 100%;
-    font-size: 30px;
-    font-weight: 800;
-    letter-spacing: -0.5px;
-    color: var(--text);
-    margin: 0 0 8px;
-}
-
-.lbi2-section-sub {
-    color: var(--muted);
-    font-size: 15px;
-    margin: 0;
-}
-
-/* ── Items list ── */
-.lbi2-items {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-}
-
-/* ── Single item card ── */
-.lbi2-item {
-    display: flex;
-    align-items: stretch;
-    background: var(--white);
-    border-radius: 20px;
-    border: 1px solid var(--border);
-    overflow: hidden;
-    transition: transform .2s, box-shadow .2s;
-    min-height: 340px;
-    animation: fadeUp 0.6s ease both;
-}
-
-.lbi2-item:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 16px 48px rgba(0, 0, 0, .09);
-}
-
-/* ── Image side ── */
-.lbi2-img-box {
-    flex: 1 1 50%;
-    position: relative;
-    background: var(--bg);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-}
-
-.lbi2-item--normal .lbi2-img-box {
-    border-right: 1px solid var(--border);
-}
 
-.lbi2-item--reverse .lbi2-img-box {
-    border-left: 1px solid var(--border);
-}
+    &__inner {
+        max-width: 1280px;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        gap: 48px;
+    }
 
-.lbi2-img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-}
+    &__header {
+        text-align: center;
+    }
 
-.lbi2-img-dev {
-    position: absolute;
-    bottom: 12px;
-    right: 12px;
-    width: 72px;
-    height: auto;
-    opacity: .8;
-}
+    &__title {
+        text-align: center;
+        width: 100%;
+        font-size: 30px;
+        font-weight: 800;
+        letter-spacing: -0.5px;
+        color: $text;
+        margin: 0 0 8px;
+    }
 
-/* ── Info side ── */
-.lbi2-info-box {
-    flex: 1 1 50%;
-    padding: 52px;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    box-sizing: border-box;
-    justify-content: center;
-}
+    &__subtitle {
+        color: $muted;
+        font-size: 15px;
+        margin: 0;
+    }
 
-.lbi2-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    background: $green-light-bg;
-    color: $green;
-    padding: 5px 14px;
-    border-radius: 20px;
-    font-size: 12px;
-    font-weight: 700;
-    width: fit-content;
-    letter-spacing: 0.3px;
-}
+    &__items {
+        display: flex;
+        flex-direction: column;
+        gap: 48px;
+    }
 
-.lbi2-title-card {
-    color: var(--text);
-    font-size: 24px;
-    font-weight: 800;
-    letter-spacing: -0.5px;
-    line-height: 1.25;
-    margin: 0;
-}
+    &__item {
+        display: flex;
+        align-items: stretch;
+        background: $white;
+        border-radius: 20px;
+        border: 1px solid $border;
+        overflow: hidden;
+        transition: transform 0.2s, box-shadow 0.2s;
+        min-height: 340px;
+        animation: fadeUp 0.6s ease both;
 
-.lbi2-description {
-    color: var(--muted);
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 1.7;
-    margin: 0;
-}
+        &:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.09);
+        }
 
-/* ── TABLET (≤ 1024px) ── */
-@media (max-width: 1024px) {
-    .lbi2-root {
-        padding: 72px 32px;
-    }
+        &_reverse {
+            flex-direction: row-reverse;
+        }
 
-    .lbi2-info-box {
-        padding: 40px 36px;
+        &_normal {
+            flex-direction: row;
+        }
     }
 
-    .lbi2-title-card {
-        font-size: 20px;
+    &__image-box {
+        flex: 1 1 50%;
+        position: relative;
+        background: $green-light-bg;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        padding: 8px;
+        border-radius: 20px;
     }
 
-    .lbi2-section-title {
-        font-size: 26px;
+    &__item_normal &__image-box {
+        border-right: 1px solid $border;
     }
 
-    .lbi2-item {
-        min-height: 280px;
+    &__item_reverse &__image-box {
+        border-left: 1px solid $border;
     }
-}
 
-/* ── MOBILE (≤ 768px) ── */
+    &__image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+        border-radius: 16px;
+        border: 1px solid $border;
+        background: $white;
+    }
+
+    &__image-dev {
+        position: absolute;
+        bottom: 12px;
+        right: 12px;
+        width: 72px;
+        height: auto;
+        opacity: 0.8;
+    }
+
+    &__info {
+        flex: 1 1 50%;
+        padding: 52px;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        box-sizing: border-box;
+        justify-content: center;
+    }
+
+    &__badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        background: $green-light-bg;
+        color: $green;
+        padding: 5px 14px;
+        border-radius: 20px;
+        font-size: 12px;
+        font-weight: 700;
+        width: fit-content;
+        letter-spacing: 0.3px;
+    }
+
+    &__card-title {
+        color: $text;
+        font-size: 24px;
+        font-weight: 800;
+        letter-spacing: -0.5px;
+        line-height: 1.25;
+        margin: 0;
+    }
+
+    &__description {
+        color: $muted;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 1.7;
+        margin: 0;
+    }
+
+    @keyframes fadeUp {
+        from {
+            opacity: 0;
+            transform: translateY(24px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+}
+
+// Планшет (до 1100px)
+@media (max-width: 1100px) {
+    .blocks-info-v2 {
+        padding: 72px 24px;
+
+        &__items {
+            gap: 40px;
+        }
+
+        &__info {
+            padding: 40px 36px;
+        }
+
+        &__card-title {
+            font-size: 20px;
+        }
+
+        &__title {
+            font-size: 26px;
+        }
+
+        &__item {
+            min-height: 280px;
+        }
+    }
+}
+
+// Мобильная версия (до 768px)
 @media (max-width: 768px) {
-    .lbi2-root {
+    .blocks-info-v2 {
         padding: 56px 24px;
-    }
 
-    .lbi2-item,
-    .lbi2-item.lbi2-item--reverse {
-        flex-direction: column !important;
-        min-height: unset;
-    }
+        &__items {
+            gap: 32px;
+        }
 
-    .lbi2-img-box {
-        flex: none;
-        width: 100%;
-        min-height: 220px;
-        border-right: none !important;
-        border-left: none !important;
-        border-bottom: 1px solid var(--border);
-    }
+        &__item,
+        &__item_reverse {
+            flex-direction: column !important;
+            min-height: unset;
+        }
 
-    .lbi2-info-box {
-        flex: none;
-        width: 100%;
-        padding: 32px 28px;
-        gap: 16px;
-    }
+        &__image-box {
+            flex: none;
+            width: 100%;
+            min-height: 220px;
+            border-right: none !important;
+            border-left: none !important;
+            border-bottom: 1px solid $border;
+        }
 
-    .green-btn2 {
-        max-width: 100%;
-        width: 100% !important;
+        &__info {
+            flex: none;
+            width: 100%;
+            padding: 32px 28px;
+            gap: 16px;
+        }
     }
 }
 
-/* ── SMALL MOBILE (≤ 430px) ── */
+// Мобильная версия (до 430px)
 @media (max-width: 430px) {
-    .lbi2-root {
-        padding: 40px 16px;
-    }
+    .blocks-info-v2 {
+        padding: 40px 20px;
 
-    .lbi2-section-title {
-        font-size: 22px;
-    }
+        &__items {
+            gap: 24px;
+        }
 
-    .lbi2-title-card {
-        font-size: 18px;
-    }
+        &__title {
+            font-size: 22px;
+        }
 
-    .lbi2-info-box {
-        padding: 24px 20px;
-        gap: 14px;
-    }
+        &__card-title {
+            font-size: 18px;
+        }
 
-    .lbi2-img-box {
-        min-height: 180px;
-    }
+        &__info {
+            padding: 24px 20px;
+            gap: 14px;
+        }
 
-    .green-btn2 {
-        height: 48px;
-        font-size: 13px;
+        &__image-box {
+            min-height: 180px;
+        }
     }
 }

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

@@ -35,7 +35,6 @@ var list_default = [{
   label: "\u041C\u0430\u0440\u043A\u0435\u0442\u0438\u043D\u0433",
   description: "\u0423\u043F\u0440\u0430\u0432\u043B\u044F\u0439 \u0440\u0435\u043A\u043B\u0430\u043C\u043E\u0439 \u0438 \u0430\u043A\u0446\u0438\u044F\u043C\u0438 \u043D\u0430 3-\u0445 \u043C\u0430\u0440\u043A\u0435\u0442\u043F\u043B\u0435\u0439\u0441\u0430\u0445 \u0432 \u043E\u0434\u043D\u043E\u043C \u043E\u043A\u043D\u0435 \u0438 \u043F\u043E\u043B\u0443\u0447\u0430\u0439 \u0430\u043D\u0430\u043B\u0438\u0442\u0438\u043A\u0443 \u043F\u043E \u043A\u0430\u0436\u0434\u043E\u0439 \u043A\u0430\u043C\u043F\u0430\u043D\u0438\u0438",
   img: "https://dl.ecomru.ru:9001/dev-images/marketing_1.png",
-  // link: '/marketing'
   link: ''
 }, {
   label: "\u041A\u043B\u044E\u0447\u0435\u0432\u044B\u0435 \u0441\u043B\u043E\u0432\u0430",
@@ -106,8 +105,7 @@ var CardsServicesV2 = function CardsServicesV2(_ref) {
   var _useState = (0, _react.useState)(4),
     _useState2 = _slicedToArray(_useState, 2),
     isShow = _useState2[0],
-    setIsShow = _useState2[1]; // Показываем 8 карточек (2 ряда по 4)
-
+    setIsShow = _useState2[1];
   var getFirstLetter = function getFirstLetter(label) {
     return (label === null || label === void 0 ? void 0 : label.charAt(0)) || '?';
   };