ecomlab-components-next 0.1.238 → 0.1.239

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

@@ -0,0 +1,164 @@
+"use strict";
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+require("./CardsServicesV2.scss");
+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; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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 list_default = [{
+  label: "\u0410\u043D\u0430\u043B\u0438\u0442\u0438\u043A\u0430",
+  description: "\u0410\u043D\u0430\u043B\u0438\u0437\u0438\u0440\u0443\u0439 \u043F\u0440\u043E\u0434\u0430\u0436\u0438, \u0437\u0430\u043A\u0430\u0437\u044B, \u0446\u0435\u043D\u044B, \u0440\u0435\u043A\u043B\u0430\u043C\u043D\u044B\u0435 \u043A\u0430\u043C\u043F\u0430\u043D\u0438\u0438, \u0441\u0447\u0438\u0442\u0430\u0439 \u044E\u043D\u0438\u0442-\u044D\u043A\u043E\u043D\u043E\u043C\u0438\u043A\u0443 \u0438 \u0441\u043B\u0435\u0434\u0438 \u0437\u0430 \n        \u0440\u0435\u043D\u0442\u0430\u0431\u0435\u043B\u044C\u043D\u043E\u0441\u0442\u044C\u044E \u0441\u0432\u043E\u0438\u0445 \u043C\u0430\u0433\u0430\u0437\u0438\u043D\u043E\u0432 \u043D\u0430 \u043C\u0430\u0440\u043A\u0435\u0442\u043F\u043B\u0435\u0439\u0441\u0430\u0445 Wildberries, Ozon \u0438 \u042F\u043D\u0434\u0435\u043A\u0441 \u041C\u0430\u0440\u043A\u0435\u0442",
+  img: "https://dl.ecomru.ru:9001/dev-images/analitics_1.png",
+  link: '/analytics'
+}, {
+  label: "\u0422\u043E\u0432\u0430\u0440\u044B",
+  description: "\u0423\u043F\u0440\u0430\u0432\u043B\u044F\u0439 \u0432\u0441\u0435\u043C \u0442\u043E\u0432\u0430\u0440\u043D\u044B\u043C \u043A\u043E\u043D\u0442\u0435\u043D\u0442\u043E\u043C \u043D\u0430 \u043E\u0434\u043D\u043E\u0439 \u043F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u0435, \u043F\u0435\u0440\u0435\u043D\u043E\u0441\u0438 \u043A\u0430\u0440\u0442\u043E\u0447\u043A\u0438 \u0441 \u043E\u0434\u043D\u043E\u0433\u043E \u043C\u0430\u0440\u043A\u0435\u0442\u043F\u043B\u0435\u0439\u0441\u0430 \u043D\u0430 \u0434\u0440\u0443\u0433\u043E\u0439 \u0438 \u0443\u043B\u0443\u0447\u0448\u0430\u0439\u0442\u0435 \u0438\u0445",
+  img: "https://dl.ecomru.ru:9001/dev-images/product.png",
+  link: '/products'
+}, {
+  label: "\u0410\u043D\u0430\u043B\u0438\u0437 \u043A\u043E\u043D\u043A\u0443\u0440\u0435\u043D\u0442\u043E\u0432",
+  description: "\u0421\u043B\u0435\u0434\u0438 \u0437\u0430 \u0446\u0435\u043D\u0430\u043C\u0438, \u0430\u043D\u0430\u043B\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 \u0430\u0441\u0441\u043E\u0440\u0442\u0438\u043C\u0435\u043D\u0442 \u0438 \u043F\u0440\u043E\u0434\u0430\u0436\u0438, \u0441\u043E\u0431\u0438\u0440\u0430\u0439 \u043A\u043B\u044E\u0447\u0435\u0432\u044B\u0435 \u0441\u043B\u043E\u0432\u0430 \u0443 \u043A\u043E\u043D\u043A\u0443\u0440\u0435\u043D\u0442\u043E\u0432 \u0432 \u0441\u0432\u043E\u0435\u0439 \u043D\u0438\u0448\u0435",
+  img: "https://dl.ecomru.ru:9001/dev-images/competitors_1.png",
+  link: ''
+}, {
+  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",
+  description: "SEO-\u043E\u043F\u0442\u0438\u043C\u0438\u0437\u0438\u0440\u0443\u0439 \u043A\u0430\u0440\u0442\u043E\u0447\u043A\u0438 \u0442\u043E\u0432\u0430\u0440\u043E\u0432 \u0440\u0435\u043B\u0435\u0432\u0430\u043D\u0442\u043D\u044B\u043C\u0438 \u043A\u043B\u044E\u0447\u0435\u0432\u044B\u043C\u0438 \u0441\u043B\u043E\u0432\u0430\u043C\u0438 \u0438 \u043F\u043E\u0432\u044B\u0441\u044C \u0441\u0432\u043E\u0438 \u043F\u043E\u0437\u0438\u0446\u0438\u0438 \u0432 \u043F\u043E\u0438\u0441\u043A\u043E\u0432\u043E\u0439 \u0432\u044B\u0434\u0430\u0447\u0435",
+  img: "https://dl.ecomru.ru:9001/dev-images/keyword.png",
+  link: '/keywords'
+}, {
+  label: "\u041E\u0442\u0437\u044B\u0432\u044B \u0438 \u0432\u043E\u043F\u0440\u043E\u0441\u044B",
+  description: "\u0410\u0432\u0442\u043E\u043C\u0430\u0442\u0438\u0437\u0438\u0440\u0443\u0439 \u043E\u0442\u0432\u0435\u0442\u044B \u043D\u0430 \u043E\u0442\u0437\u044B\u0432\u044B \u043A\u043B\u0438\u0435\u043D\u0442\u043E\u0432 \u0438 \u043F\u043E\u043B\u0443\u0447\u0430\u0439 \u0430\u043D\u0430\u043B\u0438\u0442\u0438\u043A\u0443 \u043F\u043E \u043A\u0430\u0436\u0434\u043E\u043C\u0443 \u043A\u043E\u043C\u043C\u0435\u043D\u0442\u0430\u0440\u0438\u044E",
+  img: "https://dl.ecomru.ru:9001/dev-images/feedback.png",
+  link: '/auto_feedback'
+}, {
+  label: "Social Network",
+  description: "\u041D\u0430\u0441\u0442\u0440\u043E\u0439 \u0430\u0432\u0442\u043E\u043C\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438\u0439 \u043F\u043E\u0441\u0442\u0438\u043D\u0433 \u043A\u043E\u043D\u0442\u0435\u043D\u0442\u0430 \u0432 \u0412\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u0435, Telegram, Instagram \u0438 \u0414\u0437\u0435\u043D \u0441 \u043E\u0434\u043D\u043E\u0439 \u043F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u044B",
+  img: "https://dl.ecomru.ru:9001/dev-images/network.png",
+  link: '/social_network'
+}, {
+  label: "\u0417\u0430\u0434\u0430\u0447\u0438",
+  description: "\u0423\u043F\u0440\u0430\u0432\u043B\u044F\u0439 \u043F\u0440\u043E\u0435\u043A\u0442\u0430\u043C\u0438 \u0438 \u0437\u0430\u0434\u0430\u0447\u0430\u043C\u0438 \u043A\u043E\u043C\u043F\u0430\u043D\u0438\u0438 \u043F\u0440\u0438 \u043F\u043E\u043C\u043E\u0449\u0438 \u0443\u0434\u043E\u0431\u043D\u043E\u0433\u043E \u0442\u0430\u0441\u043A-\u043C\u0435\u043D\u0435\u0434\u0436\u0435\u0440\u0430",
+  img: "https://dl.ecomru.ru:9001/dev-images/task.png",
+  link: '/tasks'
+}, {
+  label: "\u0417\u0430\u043A\u0430\u0437\u044B",
+  description: "\u0423\u043F\u0440\u0430\u0432\u043B\u044F\u0439 \u0437\u0430\u043A\u0430\u0437\u0430\u043C\u0438 \u0438 \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0439 \u043E\u0441\u0442\u0430\u0442\u043A\u0438 \u043D\u0430 \u0441\u043A\u043B\u0430\u0434\u0430\u0445 3-\u0445 \u043C\u0430\u0440\u043A\u0435\u0442\u043F\u043B\u0435\u0439\u0441\u043E\u0432 \u0438\u0437 \u043E\u0434\u043D\u043E\u0433\u043E \u043E\u043A\u043D\u0430",
+  img: "",
+  link: '/orders'
+}, {
+  label: "\u041A\u0430\u043B\u0435\u043D\u0434\u0430\u0440\u044C",
+  description: "\u041D\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0439 \u0443\u0434\u043E\u0431\u043D\u043E\u0435 \u0440\u0430\u0441\u043F\u0438\u0441\u0430\u043D\u0438\u0435, \u0441\u0442\u0430\u0432\u044C\u0442\u0435 \u0437\u0430\u043C\u0435\u0442\u043A\u0438, \u043D\u0430\u043F\u043E\u043C\u0438\u043D\u0430\u043D\u0438\u044F \u0438 \u0432\u0435\u0434\u0438 \u0441\u0432\u043E\u0439 \u043B\u0438\u0447\u043D\u044B\u0439 \u0435\u0436\u0435\u0434\u043D\u0435\u0432\u043D\u0438\u043A \u0432\u043D\u0443\u0442\u0440\u0438 \u0435\u0434\u0438\u043D\u043E\u0439 \u043F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u044B",
+  img: "https://dl.ecomru.ru:9001/dev-images/calendar.png",
+  link: '/calendar'
+}, {
+  label: "CRM",
+  description: "\u0423\u043F\u0440\u0430\u0432\u043B\u044F\u0439 \u043F\u0440\u043E\u0434\u0430\u0436\u0430\u043C\u0438, \u0432\u043E\u0440\u043E\u043D\u043A\u0430\u043C\u0438, \u043A\u043E\u043D\u0442\u0430\u043A\u0442\u0430\u043C\u0438 \u043A\u043B\u0438\u0435\u043D\u0442\u043E\u0432 \u0438 \u043F\u043E\u043B\u0443\u0447\u0430\u0439 \u0430\u043D\u0430\u043B\u0438\u0442\u0438\u043A\u0443",
+  img: "",
+  link: '/crm'
+}, {
+  label: "Wiki",
+  description: "\u0421\u043E\u0437\u0434\u0430\u0439 \u0441\u0432\u043E\u044E \u0431\u0430\u0437\u0443 \u0437\u043D\u0430\u043D\u0438\u0439 \u0434\u043B\u044F \u0441\u043E\u0442\u0440\u0443\u0434\u043D\u0438\u043A\u043E\u0432 \u0438 \u043A\u043B\u0438\u0435\u043D\u0442\u043E\u0432 \u0432\u043D\u0443\u0442\u0440\u0438 \u0435\u0434\u0438\u043D\u043E\u0439 \u043F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u044B",
+  img: "",
+  link: '/wiki'
+}, {
+  label: "\u0410\u043A\u0446\u0438\u0438",
+  description: "\u0423\u043F\u0440\u0430\u0432\u043B\u044F\u0439 \u0430\u043A\u0446\u0438\u044F\u043C\u0438 \u043D\u0430 Wildberries, Ozon \u0438 \u042F\u043D\u0434\u0435\u043A\u0441 \u041C\u0430\u0440\u043A\u0435\u0442 \u0441 \u0435\u0434\u0438\u043D\u043E\u0439 \u043F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u044B, \u0438 \u043F\u043E\u043B\u0443\u0447\u0430\u0439 \u0434\u0435\u0442\u0430\u043B\u044C\u043D\u0443\u044E \u0430\u043D\u0430\u043B\u0438\u0442\u0438\u043A\u0443 \u043F\u043E \u0431\u043E\u043B\u0435\u0435 \u0447\u0435\u043C 20 \u043C\u0435\u0442\u0440\u0438\u043A\u0430\u043C",
+  img: "https://dl.ecomru.ru:9001/dev-images/image_411.png",
+  link: '/stock'
+}, {
+  label: "\u0427\u0430\u0442 \u0411\u043E\u0442",
+  description: "\u0421\u043E\u0437\u0434\u0430\u0439 \u0441\u0432\u043E\u0435\u0433\u043E \u0438\u043D\u0442\u0435\u043B\u043B\u0435\u043A\u0442\u0443\u0430\u043B\u044C\u043D\u043E\u0433\u043E \u043F\u043E\u043C\u043E\u0449\u043D\u0438\u043A\u0430, \u043A\u043E\u0442\u043E\u0440\u044B\u0439 \u0430\u0432\u0442\u043E\u043C\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438 \u043F\u0440\u0438\u043D\u0438\u043C\u0430\u0435\u0442 \u0432\u0445\u043E\u0434\u044F\u0449\u0438\u0435 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u044F, \u043E\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043D\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u0435\u0439 \u0438 \u043E\u0431\u0449\u0430\u0435\u0442\u0441\u044F \u0441 \u043A\u043B\u0438\u0435\u043D\u0442\u0430\u043C\u0438",
+  img: "",
+  link: ''
+}];
+var CardsServicesV2 = function CardsServicesV2(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? 'Какие есть сервисы в ECOMRU' : _ref$title,
+    _ref$subtitle = _ref.subtitle,
+    subtitle = _ref$subtitle === void 0 ? 'Выберите нужные сервисы и масштабируйте бизнес' : _ref$subtitle,
+    service = _ref.service,
+    _ref$listCard = _ref.listCard,
+    listCard = _ref$listCard === void 0 ? [] : _ref$listCard,
+    _ref$list = _ref.list,
+    list = _ref$list === void 0 ? list_default : _ref$list;
+  var list_arr = (listCard === null || listCard === void 0 ? void 0 : listCard.length) > 0 ? listCard : list;
+  var curr_list = list_arr.filter(function (_ref2) {
+    var label = _ref2.label;
+    return label != service;
+  });
+  var _useState = (0, _react.useState)(4),
+    _useState2 = _slicedToArray(_useState, 2),
+    isShow = _useState2[0],
+    setIsShow = _useState2[1]; // Показываем 8 карточек (2 ряда по 4)
+
+  var getFirstLetter = function getFirstLetter(label) {
+    return (label === null || label === void 0 ? void 0 : label.charAt(0)) || '?';
+  };
+  var handleShowMore = function handleShowMore() {
+    setIsShow(curr_list.length);
+  };
+  var isShowButton = isShow < curr_list.length;
+  return /*#__PURE__*/_react["default"].createElement("section", {
+    className: "cards-services-v2"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "cards-services-v2__header"
+  }, /*#__PURE__*/_react["default"].createElement("h2", {
+    className: "cards-services-v2__title"
+  }, title), subtitle && /*#__PURE__*/_react["default"].createElement("p", {
+    className: "cards-services-v2__subtitle"
+  }, subtitle)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "cards-services-v2__grid"
+  }, curr_list.slice(0, isShow).map(function (_ref3, ind) {
+    var label = _ref3.label,
+      img = _ref3.img,
+      description = _ref3.description,
+      link = _ref3.link;
+    var firstLetter = getFirstLetter(label);
+    var hasImage = img && img.trim() !== '';
+    return /*#__PURE__*/_react["default"].createElement("a", {
+      key: label + ind,
+      href: link && link !== '' ? link : '#',
+      target: link && link !== '' ? '_blank' : '_self',
+      className: "cards-services-v2__card-link"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "cards-services-v2__card"
+    }, hasImage ? /*#__PURE__*/_react["default"].createElement("img", {
+      decoding: "async",
+      loading: "lazy",
+      alt: label,
+      className: "cards-services-v2__img",
+      src: img
+    }) : /*#__PURE__*/_react["default"].createElement("div", {
+      className: "cards-services-v2__placeholder"
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "cards-services-v2__placeholder-text"
+    }, firstLetter)), /*#__PURE__*/_react["default"].createElement("h3", {
+      className: "cards-services-v2__card-title"
+    }, label), /*#__PURE__*/_react["default"].createElement("p", {
+      className: "cards-services-v2__card-description"
+    }, description), /*#__PURE__*/_react["default"].createElement("span", {
+      className: "cards-services-v2__card-link-text"
+    }, "\u041F\u043E\u0434\u0440\u043E\u0431\u043D\u0435\u0435 \u2192")));
+  })), isShowButton && /*#__PURE__*/_react["default"].createElement("button", {
+    className: "cards-services-v2__button",
+    onClick: handleShowMore
+  }, "\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0435\u0449\u0435"));
+};
+var _default = exports["default"] = CardsServicesV2;

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

@@ -0,0 +1,333 @@
+@import '../variables.scss';
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
+
+.cards-services-v2 {
+    padding: 80px 48px;
+    background: #F7F8FC;
+    
+    * {
+        font-family: 'Manrope', 'Golos Text', sans-serif;
+    }
+    
+    &__header {
+        text-align: center;
+        margin-bottom: 48px;
+    }
+    
+    &__title {
+        font-size: 30px;
+        font-weight: 800;
+        letter-spacing: -0.5px;
+        margin-bottom: 8px;
+        color: #1A1A2E;
+    }
+    
+    &__subtitle {
+        font-size: 15px;
+        color: #6B7280;
+        line-height: 1.5;
+    }
+    
+    &__grid {
+        max-width: 1280px;
+        margin: 0 auto;
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 20px;
+    }
+    
+    &__card-link {
+        text-decoration: none;
+        display: block;
+    }
+    
+    &__card {
+        background: #FFFFFF;
+        border-radius: 14px;
+        padding: 24px 20px 20px;
+        border: 1px solid #E5E7EB;
+        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;
+        display: block;
+        border-radius: 12px;
+        margin-bottom: 16px;
+        object-fit: cover;
+        aspect-ratio: 1 / 0.8;
+    }
+    
+    &__placeholder {
+        width: 100%;
+        aspect-ratio: 1 / 0.8;
+        background: #D1FAE5;
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 16px;
+    }
+    
+    &__placeholder-text {
+        font-size: 32px;
+        font-weight: 600;
+        color: #059669;
+    }
+    
+    &__card-title {
+        font-size: 16px;
+        font-weight: 700;
+        margin-bottom: 8px;
+        color: #1A1A2E;
+    }
+    
+    &__card-description {
+        font-size: 13px;
+        color: #6B7280;
+        line-height: 1.5;
+        margin-bottom: 16px;
+        flex: 1;
+    }
+    
+    &__card-link-text {
+        color: #059669;
+        font-size: 13px;
+        font-weight: 600;
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        transition: gap 0.2s ease;
+        
+        &:hover {
+            gap: 6px;
+        }
+    }
+    
+    &__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%;
+        
+        &:hover {
+            background: #047857;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 16px rgba(5, 150, 105, 0.35);
+        }
+        
+        &:active {
+            transform: translateY(0);
+        }
+    }
+}
+
+// ========== МОБИЛЬНАЯ АДАПТАЦИЯ ==========
+
+// Планшеты (3 колонки)
+@media (max-width: 1024px) {
+    .cards-services-v2 {
+        padding: 60px 32px;
+        
+        &__grid {
+            grid-template-columns: repeat(3, 1fr);
+            gap: 16px;
+        }
+        
+        &__title {
+            font-size: 28px;
+        }
+    }
+}
+
+// Маленькие планшеты (2 колонки)
+@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;
+        }
+        
+        &__card-title {
+            font-size: 15px;
+        }
+        
+        &__card-description {
+            font-size: 12px;
+        }
+        
+        &__button {
+            padding: 12px 24px;
+            font-size: 14px;
+            margin-top: 40px;
+            max-width: 240px;
+        }
+        
+        &__placeholder-text {
+            font-size: 28px;
+        }
+    }
+}
+
+// Крупные телефоны
+@media (max-width: 600px) {
+    .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;
+        }
+        
+        &__subtitle {
+            font-size: 13px;
+        }
+        
+        &__card {
+            padding: 24px 20px;
+            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;
+            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) {
+    .cards-services-v2 {
+        padding: 28px 12px;
+        
+        &__title {
+            font-size: 20px;
+        }
+        
+        &__subtitle {
+            font-size: 12px;
+        }
+        
+        &__card {
+            padding: 20px 16px;
+        }
+        
+        &__card-title {
+            font-size: 15px;
+        }
+        
+        &__card-description {
+            font-size: 12px;
+        }
+        
+        &__card-link-text {
+            font-size: 13px;
+        }
+        
+        &__placeholder-text {
+            font-size: 24px;
+        }
+    }
+}

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

@@ -0,0 +1,51 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 = [{
+  title: "99%",
+  description: "\u0418\u0418 \u0442\u043E\u0447\u043D\u043E \u0432\u044B\u044F\u0432\u043B\u044F\u0435\u0442 \u0442\u0435\u043C\u0430\u0442\u0438\u043A\u0443 \u043E\u0442\u0437\u044B\u0432\u043E\u0432. \u0423 \u0447\u0435\u043B\u043E\u0432\u0435\u043A\u0430, \u043D\u0430\u043F\u0440\u0438\u043C\u0435\u0440, \u044D\u0442\u043E\u0442 \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u0435\u043B\u044C 87%"
+}, {
+  title: "85%",
+  description: "\u0413\u0435\u043D\u0435\u0440\u0438\u0440\u0443\u044F \u043E\u0442\u0432\u0435\u0442, \u043D\u0435\u0439\u0440\u043E\u0441\u0435\u0442\u044C \u0443\u0447\u0438\u0442\u044B\u0432\u0430\u0435\u0442 \u043D\u0430 85% \u0431\u043E\u043B\u044C\u0448\u0435 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u043E\u0432, \u0447\u0435\u043C \u0447\u0435\u043B\u043E\u0432\u0435\u043A."
+}, {
+  title: "5\u0445",
+  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"
+}];
+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"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "cards2-grey__inner"
+  }, title && /*#__PURE__*/_react["default"].createElement("h2", {
+    className: "cards2-grey__title"
+  }, title), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "cards2-grey__items"
+  }, list.map(function (_ref2) {
+    var cardTitle = _ref2.title,
+      description = _ref2.description;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "cards2-grey__item",
+      key: cardTitle + description
+    }, /*#__PURE__*/_react["default"].createElement("p", {
+      className: "cards2-grey__title-card"
+    }, cardTitle), /*#__PURE__*/_react["default"].createElement("p", {
+      className: "cards2-grey__description-card"
+    }, description));
+  })), child)));
+};
+var _default = exports["default"] = CardsV2;