ecomlab-components-next 0.1.306 → 0.1.308

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/components/ConstructorComponents/CardsServicesV3/CardsServicesV3.js +178 -0
  2. package/dist/components/ConstructorComponents/CardsServicesV3/CardsServicesV3.scss +367 -0
  3. package/dist/components/ConstructorComponents/MainContainer/MainContainerV2.stories.js +2 -1
  4. package/dist/index.js +7 -0
  5. package/package.json +1 -1
package/dist/components/ConstructorComponents/CardsServicesV3/CardsServicesV3.js ADDED
@@ -0,0 +1,178 @@
1
+ "use strict";
2
+ 'use client';
3
+
4
+ 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); }
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports["default"] = void 0;
9
+ var _react = _interopRequireWildcard(require("react"));
10
+ var _ButtonBasicV = _interopRequireDefault(require("../../Buttons/ButtonBasicV2/ButtonBasicV2"));
11
+ require("./CardsServicesV3.scss");
12
+ var _useReveal = _interopRequireDefault(require("../../../common/hooks/useReveal"));
13
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
14
+ 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); }
15
+ 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; }
16
+ function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
17
+ 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."); }
18
+ 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; } }
19
+ 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; }
20
+ 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; } }
21
+ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
22
+ var list_default = [{
23
+ label: "\u0410\u043D\u0430\u043B\u0438\u0442\u0438\u043A\u0430",
24
+ 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",
25
+ img: "https://dl.ecomru.ru:9001/dev-images/analitics_1.png",
26
+ link: '/analytics'
27
+ }, {
28
+ label: "\u0422\u043E\u0432\u0430\u0440\u044B",
29
+ 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",
30
+ img: "https://dl.ecomru.ru:9001/dev-images/product.png",
31
+ link: '/products'
32
+ }, {
33
+ label: "\u0410\u043D\u0430\u043B\u0438\u0437 \u043A\u043E\u043D\u043A\u0443\u0440\u0435\u043D\u0442\u043E\u0432",
34
+ 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",
35
+ img: "https://dl.ecomru.ru:9001/dev-images/competitors_1.png",
36
+ link: ''
37
+ }, {
38
+ label: "\u041C\u0430\u0440\u043A\u0435\u0442\u0438\u043D\u0433",
39
+ 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",
40
+ img: "https://dl.ecomru.ru:9001/dev-images/marketing_1.png",
41
+ link: ''
42
+ }, {
43
+ label: "\u041A\u043B\u044E\u0447\u0435\u0432\u044B\u0435 \u0441\u043B\u043E\u0432\u0430",
44
+ 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",
45
+ img: "https://dl.ecomru.ru:9001/dev-images/keyword.png",
46
+ link: '/keywords'
47
+ }, {
48
+ label: "\u041E\u0442\u0437\u044B\u0432\u044B \u0438 \u0432\u043E\u043F\u0440\u043E\u0441\u044B",
49
+ 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",
50
+ img: "https://dl.ecomru.ru:9001/dev-images/feedback.png",
51
+ link: '/auto_feedback'
52
+ }, {
53
+ label: "Social Network",
54
+ 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",
55
+ img: "https://dl.ecomru.ru:9001/dev-images/network.png",
56
+ link: '/social_network'
57
+ }, {
58
+ label: "\u0417\u0430\u0434\u0430\u0447\u0438",
59
+ 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",
60
+ img: "https://dl.ecomru.ru:9001/dev-images/task.png",
61
+ link: '/tasks'
62
+ }, {
63
+ label: "\u0417\u0430\u043A\u0430\u0437\u044B",
64
+ 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",
65
+ img: "",
66
+ link: '/orders'
67
+ }, {
68
+ label: "\u041A\u0430\u043B\u0435\u043D\u0434\u0430\u0440\u044C",
69
+ 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",
70
+ img: "https://dl.ecomru.ru:9001/dev-images/calendar.png",
71
+ link: '/calendar'
72
+ }, {
73
+ label: "CRM",
74
+ 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",
75
+ img: "",
76
+ link: '/crm'
77
+ }, {
78
+ label: "Wiki",
79
+ 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",
80
+ img: "",
81
+ link: '/wiki'
82
+ }, {
83
+ label: "\u0410\u043A\u0446\u0438\u0438",
84
+ 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",
85
+ img: "https://dl.ecomru.ru:9001/dev-images/image_411.png",
86
+ link: '/stock'
87
+ }, {
88
+ label: "\u0427\u0430\u0442 \u0411\u043E\u0442",
89
+ 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",
90
+ img: "",
91
+ link: ''
92
+ }];
93
+ var CardsServicesV3 = function CardsServicesV3(_ref) {
94
+ var _ref$title = _ref.title,
95
+ title = _ref$title === void 0 ? 'Какие есть сервисы в ECOMRU' : _ref$title,
96
+ _ref$subtitle = _ref.subtitle,
97
+ subtitle = _ref$subtitle === void 0 ? 'Выберите нужные сервисы и масштабируйте бизнес' : _ref$subtitle,
98
+ service = _ref.service,
99
+ _ref$listCard = _ref.listCard,
100
+ listCard = _ref$listCard === void 0 ? [] : _ref$listCard,
101
+ _ref$list = _ref.list,
102
+ list = _ref$list === void 0 ? list_default : _ref$list;
103
+ var list_arr = (listCard === null || listCard === void 0 ? void 0 : listCard.length) > 0 ? listCard : list;
104
+ var curr_list = list_arr.filter(function (_ref2) {
105
+ var label = _ref2.label;
106
+ return label != service;
107
+ });
108
+ var _useState = (0, _react.useState)(6),
109
+ _useState2 = _slicedToArray(_useState, 2),
110
+ isShow = _useState2[0],
111
+ setIsShow = _useState2[1];
112
+ (0, _useReveal["default"])([isShow], true);
113
+ var getFirstLetter = function getFirstLetter(label) {
114
+ return (label === null || label === void 0 ? void 0 : label.charAt(0)) || '?';
115
+ };
116
+ var handleShowMore = function handleShowMore() {
117
+ setIsShow(curr_list.length);
118
+ };
119
+ var isShowButton = isShow < curr_list.length;
120
+ return /*#__PURE__*/_react["default"].createElement("section", {
121
+ className: "cards-services-v3"
122
+ }, /*#__PURE__*/_react["default"].createElement("div", {
123
+ className: "cards-services-v3__header reveal"
124
+ }, /*#__PURE__*/_react["default"].createElement("h2", {
125
+ className: "cards-services-v3__title"
126
+ }, title), subtitle && /*#__PURE__*/_react["default"].createElement("p", {
127
+ className: "cards-services-v3__subtitle"
128
+ }, subtitle)), /*#__PURE__*/_react["default"].createElement("div", {
129
+ className: "cards-services-v3__grid-wrap"
130
+ }, /*#__PURE__*/_react["default"].createElement("div", {
131
+ className: "cards-services-v3__grid"
132
+ }, curr_list.slice(0, isShow).map(function (_ref3, ind) {
133
+ var label = _ref3.label,
134
+ img = _ref3.img,
135
+ description = _ref3.description,
136
+ link = _ref3.link;
137
+ var firstLetter = getFirstLetter(label);
138
+ var hasImage = img && img.trim() !== '';
139
+ return /*#__PURE__*/_react["default"].createElement("a", {
140
+ key: label + ind,
141
+ href: link && link !== '' ? link : '#',
142
+ target: link && link !== '' ? '_blank' : '_self',
143
+ className: "cards-services-v3__card-link reveal",
144
+ style: {
145
+ '--index': ind
146
+ }
147
+ }, /*#__PURE__*/_react["default"].createElement("div", {
148
+ className: "cards-services-v3__card"
149
+ }, /*#__PURE__*/_react["default"].createElement("div", {
150
+ className: "cards-services-v3__frame"
151
+ }, /*#__PURE__*/_react["default"].createElement("div", {
152
+ className: "cards-services-v3__frame-bar"
153
+ }), hasImage ? /*#__PURE__*/_react["default"].createElement("img", {
154
+ decoding: "async",
155
+ loading: "lazy",
156
+ alt: label,
157
+ className: "cards-services-v3__img",
158
+ src: img
159
+ }) : /*#__PURE__*/_react["default"].createElement("div", {
160
+ className: "cards-services-v3__placeholder"
161
+ }, /*#__PURE__*/_react["default"].createElement("span", {
162
+ className: "cards-services-v3__placeholder-text"
163
+ }, firstLetter))), /*#__PURE__*/_react["default"].createElement("h3", {
164
+ className: "cards-services-v3__card-title"
165
+ }, label), /*#__PURE__*/_react["default"].createElement("p", {
166
+ className: "cards-services-v3__card-description"
167
+ }, description), /*#__PURE__*/_react["default"].createElement("span", {
168
+ className: "cards-services-v3__card-link-text"
169
+ }, "\u041F\u043E\u0434\u0440\u043E\u0431\u043D\u0435\u0435 \u2192")));
170
+ })), isShowButton && /*#__PURE__*/_react["default"].createElement(_ButtonBasicV["default"], {
171
+ className: 'cards-services-v3__button reveal',
172
+ green: true,
173
+ onClick: handleShowMore,
174
+ text: "\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0435\u0449\u0435",
175
+ size: "52px"
176
+ })));
177
+ };
178
+ var _default = exports["default"] = CardsServicesV3;
package/dist/components/ConstructorComponents/CardsServicesV3/CardsServicesV3.scss ADDED
@@ -0,0 +1,367 @@
1
+ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
2
+ @import '../variables.scss';
3
+
4
+ // Фон блока: белый
5
+ $services-bg: #ffffff;
6
+ // Градиент для контейнера с карточками: мята → светло-голубой
7
+ $services-grid-bg: linear-gradient(135deg, #d1fae5, #dbeafe);
8
+
9
+ .cards-services-v3 {
10
+ display: flex;
11
+ flex-direction: column;
12
+ align-items: center;
13
+ justify-content: center;
14
+ font-family: 'Manrope', sans-serif;
15
+ background: $services-bg;
16
+ width: 100%;
17
+ padding: 96px 40px;
18
+
19
+ * {
20
+ font-family: 'Manrope', 'Golos Text', sans-serif !important;
21
+ }
22
+
23
+ &__header {
24
+ text-align: center;
25
+ margin-bottom: 48px;
26
+ }
27
+
28
+ &__title {
29
+ text-align: center;
30
+ width: 100%;
31
+ font-size: 30px;
32
+ font-weight: 800;
33
+ letter-spacing: -0.5px;
34
+ color: $text;
35
+ margin: 0 0 8px;
36
+ }
37
+
38
+ &__subtitle {
39
+ color: $muted;
40
+ font-size: 15px;
41
+ margin: 0;
42
+ }
43
+
44
+ // Контейнер с градиентом и закруглёнными углами
45
+ &__grid-wrap {
46
+ width: 100%;
47
+ max-width: 1240px;
48
+ margin: 0 auto;
49
+ background: $services-grid-bg;
50
+ border-radius: 32px;
51
+ padding: 40px;
52
+ box-sizing: border-box;
53
+ display: flex;
54
+ flex-direction: column;
55
+ align-items: center; // центрирует кнопку по горизонтали
56
+ }
57
+
58
+ &__grid {
59
+ width: 100%;
60
+ align-self: stretch;
61
+ margin: 0 auto;
62
+ display: grid;
63
+ grid-template-columns: repeat(3, 1fr);
64
+ gap: 24px;
65
+ }
66
+
67
+ &__card-link {
68
+ text-decoration: none;
69
+ display: block;
70
+ }
71
+
72
+ &__card {
73
+ background: $white;
74
+ border-radius: 20px;
75
+ padding: 24px;
76
+ border: 1px solid $border;
77
+ text-align: left;
78
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
79
+ cursor: pointer;
80
+ height: 100%;
81
+ display: flex;
82
+ flex-direction: column;
83
+
84
+ &:hover {
85
+ transform: translateY(-4px);
86
+ box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
87
+ }
88
+ }
89
+
90
+ // Рамка для скрина: окно браузера
91
+ &__frame {
92
+ width: 100%;
93
+ margin-bottom: 16px;
94
+ overflow: hidden;
95
+ background: $white;
96
+ border: 1px solid #e2e5ea;
97
+ border-radius: 12px;
98
+ box-shadow: 0 10px 24px -8px rgba(15, 23, 42, 0.25);
99
+ }
100
+
101
+ &__frame-bar {
102
+ position: relative;
103
+ height: 26px;
104
+ background-color: #f1f3f6;
105
+ border-bottom: 1px solid #e5e7eb;
106
+ background-image:
107
+ radial-gradient(circle, #f87171 3px, transparent 4px),
108
+ radial-gradient(circle, #fbbf24 3px, transparent 4px),
109
+ radial-gradient(circle, #34d399 3px, transparent 4px);
110
+ background-size: 16px 26px;
111
+ background-repeat: no-repeat;
112
+ background-position: 10px 0, 26px 0, 42px 0;
113
+
114
+ // адресная строка
115
+ &::after {
116
+ content: '';
117
+ position: absolute;
118
+ left: 62px;
119
+ right: 10px;
120
+ top: 8px;
121
+ height: 10px;
122
+ border-radius: 5px;
123
+ background: #e2e5ea;
124
+ }
125
+ }
126
+
127
+ &__img {
128
+ width: 100%;
129
+ height: auto;
130
+ display: block;
131
+ object-fit: cover;
132
+ aspect-ratio: 16 / 10;
133
+ }
134
+
135
+ &__placeholder {
136
+ width: 100%;
137
+ aspect-ratio: 16 / 10;
138
+ background: $green-light-bg;
139
+ display: flex;
140
+ align-items: center;
141
+ justify-content: center;
142
+ }
143
+
144
+ &__placeholder-text {
145
+ font-size: 32px;
146
+ font-weight: 600;
147
+ color: $green;
148
+ }
149
+
150
+ &__card-title {
151
+ font-size: 18px;
152
+ font-weight: 700;
153
+ margin-bottom: 8px;
154
+ color: $text;
155
+ }
156
+
157
+ &__card-description {
158
+ font-size: 14px;
159
+ color: $muted;
160
+ line-height: 1.5;
161
+ margin-bottom: 16px;
162
+ flex: 1;
163
+ }
164
+
165
+ &__card-link-text {
166
+ color: $green;
167
+ font-size: 14px;
168
+ font-weight: 600;
169
+ display: inline-flex;
170
+ align-items: center;
171
+ gap: 4px;
172
+ transition: gap 0.2s ease;
173
+
174
+ &:hover {
175
+ gap: 8px;
176
+ }
177
+ }
178
+
179
+ &__button {
180
+ margin-top: 48px;
181
+
182
+ &:hover {
183
+ background: $green-dark;
184
+ transform: translateY(-2px);
185
+ box-shadow: 0 4px 16px rgba(5, 150, 105, 0.35);
186
+ }
187
+
188
+ &:active {
189
+ transform: translateY(0);
190
+ }
191
+ }
192
+
193
+ @keyframes fadeUp {
194
+ from {
195
+ opacity: 0;
196
+ transform: translateY(24px);
197
+ }
198
+
199
+ to {
200
+ opacity: 1;
201
+ transform: translateY(0);
202
+ }
203
+ }
204
+ }
205
+
206
+ // Планшет (до 1100px)
207
+ @media (max-width: 1100px) {
208
+ .cards-services-v3 {
209
+ padding: 72px 24px;
210
+
211
+ &__grid-wrap {
212
+ padding: 32px 24px;
213
+ border-radius: 28px;
214
+ }
215
+
216
+ &__grid {
217
+ grid-template-columns: repeat(3, 1fr);
218
+ gap: 20px;
219
+ }
220
+
221
+ &__title {
222
+ font-size: 26px;
223
+ }
224
+ }
225
+ }
226
+
227
+ // Мобильная версия (до 768px)
228
+ @media (max-width: 768px) {
229
+ .cards-services-v3 {
230
+
231
+ &__grid-wrap {
232
+ padding: 24px 16px;
233
+ border-radius: 24px;
234
+ }
235
+
236
+ &__grid {
237
+ grid-template-columns: repeat(2, 1fr);
238
+ gap: 16px;
239
+ }
240
+
241
+ &__subtitle {
242
+ font-size: 14px;
243
+ }
244
+
245
+ &__card {
246
+ padding: 20px;
247
+ }
248
+
249
+ &__card-title {
250
+ font-size: 16px;
251
+ }
252
+
253
+ &__card-description {
254
+ font-size: 13px;
255
+ }
256
+
257
+ &__button {
258
+ padding: 12px 24px;
259
+ font-size: 14px;
260
+ margin-top: 40px;
261
+ max-width: 240px;
262
+ }
263
+
264
+ &__placeholder-text {
265
+ font-size: 28px;
266
+ }
267
+ }
268
+ }
269
+
270
+ // Мобильная версия (до 480px)
271
+ @media (max-width: 480px) {
272
+ .cards-services-v3 {
273
+
274
+ &__header {
275
+ margin-bottom: 32px;
276
+ }
277
+
278
+ &__grid-wrap {
279
+ padding: 20px 12px;
280
+ border-radius: 20px;
281
+ }
282
+
283
+ &__grid {
284
+ grid-template-columns: 1fr;
285
+ gap: 20px;
286
+ }
287
+
288
+ &__subtitle {
289
+ font-size: 13px;
290
+ }
291
+
292
+ &__card {
293
+ padding: 24px;
294
+ text-align: center;
295
+ align-items: center;
296
+ }
297
+
298
+ &__frame {
299
+ max-width: 280px;
300
+ margin-left: auto;
301
+ margin-right: auto;
302
+ }
303
+
304
+ &__card-title {
305
+ font-size: 18px;
306
+ text-align: center;
307
+ }
308
+
309
+ &__card-description {
310
+ font-size: 13px;
311
+ text-align: center;
312
+ margin-bottom: 20px;
313
+ }
314
+
315
+ &__card-link-text {
316
+ justify-content: center;
317
+ font-size: 14px;
318
+ }
319
+
320
+
321
+ &__placeholder-text {
322
+ font-size: 28px;
323
+ }
324
+ }
325
+ }
326
+
327
+ // Мобильная версия (до 430px)
328
+ @media (max-width: 430px) {
329
+ .cards-services-v3 {
330
+ padding: 40px 20px;
331
+
332
+ &__grid-wrap {
333
+ padding: 16px 12px;
334
+ border-radius: 18px;
335
+ }
336
+
337
+ &__title {
338
+ font-size: 22px;
339
+ }
340
+
341
+ &__subtitle {
342
+ font-size: 13px;
343
+ }
344
+
345
+ &__card {
346
+ padding: 20px;
347
+ }
348
+
349
+ &__card-title {
350
+ font-size: 16px;
351
+ }
352
+
353
+ &__card-description {
354
+ font-size: 12px;
355
+ }
356
+
357
+ &__placeholder-text {
358
+ font-size: 24px;
359
+ }
360
+
361
+ &__button {
362
+ margin-top: 32px;
363
+ width: 100% !important;
364
+ max-width: 100% !important;
365
+ }
366
+ }
367
+ }
package/dist/components/ConstructorComponents/MainContainer/MainContainerV2.stories.js CHANGED
@@ -23,6 +23,7 @@ var _image = _interopRequireDefault(require("next/image"));
23
23
  var _ArticlesBlockV = _interopRequireDefault(require("../ArticlesBlockV2/ArticlesBlockV2"));
24
24
  var _MainContainer = _interopRequireDefault(require("./MainContainer"));
25
25
  var _CardsServicesV = _interopRequireDefault(require("../CardsServicesV2/CardsServicesV2"));
26
+ var _CardsServicesV2 = _interopRequireDefault(require("../CardsServicesV3/CardsServicesV3"));
26
27
  var _PointsListV = _interopRequireDefault(require("../PointsListV2/PointsListV2"));
27
28
  var _VideoBlockV = _interopRequireDefault(require("../VideoBlockV2/VideoBlockV2"));
28
29
  var _SmartReplies = _interopRequireDefault(require("../SmartReplies/SmartReplies"));
@@ -206,7 +207,7 @@ var MainContainerTest = exports.MainContainerTest = function MainContainerTest()
206
207
  }), /*#__PURE__*/_react["default"].createElement(_TariffPlanV["default"], null), /*#__PURE__*/_react["default"].createElement(_MarqueImgsV["default"], null), /*#__PURE__*/_react["default"].createElement(_BlocksInfoV["default"], {
207
208
  title: "\u0412\u043E\u0437\u043C\u043E\u0436\u043D\u043E\u0441\u0442\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u0430",
208
209
  list: possibilities_list
209
- }), /*#__PURE__*/_react["default"].createElement(_CardsServicesV["default"], null), /*#__PURE__*/_react["default"].createElement(_CardsV["default"], null), /*#__PURE__*/_react["default"].createElement(_FeaturesGridV["default"], {
210
+ }), /*#__PURE__*/_react["default"].createElement(_CardsServicesV["default"], null), /*#__PURE__*/_react["default"].createElement(_CardsServicesV2["default"], null), /*#__PURE__*/_react["default"].createElement(_CardsV["default"], null), /*#__PURE__*/_react["default"].createElement(_FeaturesGridV["default"], {
210
211
  violet: true,
211
212
  title: "\u041F\u0440\u0435\u0438\u043C\u0443\u0449\u0435\u0441\u0442\u0432\u0430",
212
213
  description: '60% клиентов сотрудничают с нами уже более 2-х лет',
package/dist/index.js CHANGED
@@ -93,6 +93,12 @@ Object.defineProperty(exports, "CardsServicesV2", {
93
93
  return _CardsServicesV["default"];
94
94
  }
95
95
  });
96
+ Object.defineProperty(exports, "CardsServicesV3", {
97
+ enumerable: true,
98
+ get: function get() {
99
+ return _CardsServicesV2["default"];
100
+ }
101
+ });
96
102
  Object.defineProperty(exports, "CardsV2", {
97
103
  enumerable: true,
98
104
  get: function get() {
@@ -430,6 +436,7 @@ var _AdvantagesBlock = _interopRequireDefault(require("./components/ConstructorC
430
436
  var _FeaturesGridV = _interopRequireDefault(require("./components/ConstructorComponents/FeaturesGridV2/FeaturesGridV2"));
431
437
  var _CardsInfo = _interopRequireDefault(require("./components/ConstructorComponents/CardsInfo/CardsInfo"));
432
438
  var _CardsServicesV = _interopRequireDefault(require("./components/ConstructorComponents/CardsServicesV2/CardsServicesV2"));
439
+ var _CardsServicesV2 = _interopRequireDefault(require("./components/ConstructorComponents/CardsServicesV3/CardsServicesV3"));
433
440
  var _Header = _interopRequireDefault(require("./components/ConstructorComponents/Header/Header"));
434
441
  var _HeaderV = _interopRequireDefault(require("./components/ConstructorComponents/HeaderV2/HeaderV2"));
435
442
  var _PhoneBlock = _interopRequireDefault(require("./components/ConstructorComponents/PhoneBlock/PhoneBlock"));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ecomlab-components-next",
3
- "version": "0.1.306",
3
+ "version": "0.1.308",
4
4
  "description": "A set of common and reusable React components",
5
5
  "main": "dist/index.js",
6
6
  "files": [