ecomlab-components-next 0.1.250 → 0.1.252
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.
- package/dist/components/ConstructorComponents/HeaderV2/HeaderV2.js +17 -42
- package/dist/components/ConstructorComponents/HeaderV2/HeaderV2.scss +83 -83
- package/dist/components/ConstructorComponents/LogosStrip/LogosStrip.js +40 -0
- package/dist/components/ConstructorComponents/LogosStrip/LogosStrip.scss +126 -0
- package/dist/components/ConstructorComponents/MainContainer/MainContainerV2.stories.js +3 -4
- package/dist/components/ConstructorComponents/MarqueImgsV2/MarqueImgsV2.js +3 -3
- package/dist/components/ConstructorComponents/MarqueImgsV2/MarqueImgsV2.scss +19 -20
- package/dist/components/ConstructorComponents/ServicesSectionV2/ServicesSectionV2.js +51 -27
- package/dist/components/ConstructorComponents/ServicesSectionV2/ServicesSectionV2.scss +216 -184
- package/dist/components/ConstructorComponents/variables.scss +2 -36
- package/dist/index.js +7 -0
- package/package.json +1 -1
|
@@ -17,20 +17,14 @@ require("./HeaderV2.scss");
|
|
|
17
17
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
18
18
|
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); }
|
|
19
19
|
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; }
|
|
20
|
-
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
21
|
-
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."); }
|
|
22
|
-
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; } }
|
|
23
|
-
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; }
|
|
24
|
-
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; } }
|
|
25
|
-
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
26
20
|
var HeaderV2 = function HeaderV2(_ref) {
|
|
21
|
+
var _window;
|
|
27
22
|
var _ref$services = _ref.services,
|
|
28
23
|
services = _ref$services === void 0 ? false : _ref$services,
|
|
29
24
|
_ref$title = _ref.title,
|
|
30
25
|
title = _ref$title === void 0 ? "Управляйте бизнесом на маркетплейсах из единого окна" : _ref$title,
|
|
31
26
|
_ref$description = _ref.description,
|
|
32
27
|
description = _ref$description === void 0 ? "ECOMRU — решения для аналитики, автоматизации и роста продаж на всех популярных маркетплейсах." : _ref$description,
|
|
33
|
-
img = _ref.img,
|
|
34
28
|
color = _ref.color,
|
|
35
29
|
name_service = _ref.name_service,
|
|
36
30
|
icon_service = _ref.icon_service,
|
|
@@ -40,53 +34,34 @@ var HeaderV2 = function HeaderV2(_ref) {
|
|
|
40
34
|
linkMain = _ref$linkMain === void 0 ? 'https://lk.ecomru.ru' : _ref$linkMain,
|
|
41
35
|
_ref$badgeText = _ref.badgeText,
|
|
42
36
|
badgeText = _ref$badgeText === void 0 ? "Экосистема для селлеров и брендов" : _ref$badgeText;
|
|
43
|
-
var
|
|
44
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
45
|
-
refPage = _useState2[0],
|
|
46
|
-
setRefPage = _useState2[1];
|
|
47
|
-
var _useState3 = (0, _react.useState)(false),
|
|
48
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
49
|
-
showDropBox = _useState4[0],
|
|
50
|
-
setShowDropBox = _useState4[1];
|
|
51
|
-
(0, _react.useEffect)(function () {
|
|
52
|
-
var _window;
|
|
53
|
-
var currentUrl = (_window = window) === null || _window === void 0 || (_window = _window.location) === null || _window === void 0 ? void 0 : _window.href;
|
|
54
|
-
setRefPage("?ref_page=".concat(currentUrl));
|
|
55
|
-
}, []);
|
|
37
|
+
var currentUrl = (_window = window) === null || _window === void 0 || (_window = _window.location) === null || _window === void 0 ? void 0 : _window.search;
|
|
56
38
|
return /*#__PURE__*/_react["default"].createElement("header", {
|
|
57
|
-
className: "
|
|
39
|
+
className: "header-v2"
|
|
58
40
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
59
|
-
className: "
|
|
41
|
+
className: "header-v2__inner ".concat(!services ? 'header-v2__inner-centered' : '')
|
|
60
42
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
61
|
-
className: "
|
|
43
|
+
className: "header-v2__info ".concat(!services ? 'header-v2__info-centered' : '')
|
|
62
44
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
63
|
-
className: "
|
|
64
|
-
}, /*#__PURE__*/_react["default"].createElement("
|
|
65
|
-
|
|
66
|
-
fill: "currentColor",
|
|
67
|
-
width: "14",
|
|
68
|
-
height: "14"
|
|
69
|
-
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
70
|
-
d: "M10 2a8 8 0 100 16A8 8 0 0010 2zm1 11H9V9h2v4zm0-6H9V5h2v2z"
|
|
71
|
-
})), badgeText), /*#__PURE__*/_react["default"].createElement("div", {
|
|
72
|
-
className: "landing-header2__img-box"
|
|
45
|
+
className: "header-v2__badge"
|
|
46
|
+
}, badgeText), /*#__PURE__*/_react["default"].createElement("div", {
|
|
47
|
+
className: "header-v2__icons ".concat(!services ? 'header-v2__icons-centered' : '')
|
|
73
48
|
}, arrIcon ? arrIcon.map(function (el, ind) {
|
|
74
49
|
return /*#__PURE__*/_react["default"].createElement(_image["default"], {
|
|
75
|
-
className: "
|
|
50
|
+
className: "header-v2__icon",
|
|
76
51
|
alt: "icon",
|
|
77
52
|
key: el + ind,
|
|
78
53
|
src: el
|
|
79
54
|
});
|
|
80
55
|
}) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !hideYandex && /*#__PURE__*/_react["default"].createElement(_image["default"], {
|
|
81
|
-
className: "
|
|
56
|
+
className: "header-v2__icon",
|
|
82
57
|
src: _YandexMarket["default"],
|
|
83
58
|
alt: "\u042F\u043D\u0434\u0435\u043A\u0441 \u041C\u0430\u0440\u043A\u0435\u0442"
|
|
84
59
|
}), /*#__PURE__*/_react["default"].createElement(_image["default"], {
|
|
85
|
-
className: "
|
|
60
|
+
className: "header-v2__icon",
|
|
86
61
|
src: _Ozon["default"],
|
|
87
62
|
alt: "OZON"
|
|
88
63
|
}), /*#__PURE__*/_react["default"].createElement(_image["default"], {
|
|
89
|
-
className: "
|
|
64
|
+
className: "header-v2__icon",
|
|
90
65
|
src: _WB["default"],
|
|
91
66
|
alt: "Wildberries"
|
|
92
67
|
})), (name_service || icon_service) && (Array.isArray(name_service) ? name_service === null || name_service === void 0 ? void 0 : name_service.map(function (el, ind) {
|
|
@@ -95,7 +70,7 @@ var HeaderV2 = function HeaderV2(_ref) {
|
|
|
95
70
|
style: {
|
|
96
71
|
background: (color === null || color === void 0 ? void 0 : color[ind]) || ''
|
|
97
72
|
},
|
|
98
|
-
className: "
|
|
73
|
+
className: "header-v2__service"
|
|
99
74
|
}, /*#__PURE__*/_react["default"].createElement(_image["default"], {
|
|
100
75
|
src: icon_service === null || icon_service === void 0 ? void 0 : icon_service[ind],
|
|
101
76
|
alt: "icon"
|
|
@@ -104,19 +79,19 @@ var HeaderV2 = function HeaderV2(_ref) {
|
|
|
104
79
|
style: {
|
|
105
80
|
background: color || ''
|
|
106
81
|
},
|
|
107
|
-
className: "
|
|
82
|
+
className: "header-v2__service"
|
|
108
83
|
}, /*#__PURE__*/_react["default"].createElement(_image["default"], {
|
|
109
84
|
src: icon_service,
|
|
110
85
|
alt: "icon"
|
|
111
86
|
}), name_service))), /*#__PURE__*/_react["default"].createElement("h1", {
|
|
112
|
-
className: "
|
|
87
|
+
className: "header-v2__title"
|
|
113
88
|
}, title), description && /*#__PURE__*/_react["default"].createElement("h2", {
|
|
114
|
-
className: "
|
|
89
|
+
className: "header-v2__description ".concat(!services ? 'header-v2__description-centered' : '')
|
|
115
90
|
}, description), /*#__PURE__*/_react["default"].createElement(_ButtonBasicV["default"], {
|
|
116
91
|
green: true,
|
|
117
92
|
onClick: function onClick() {
|
|
118
93
|
var _window2;
|
|
119
|
-
return (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.open("".concat(linkMain, "/auth").concat(
|
|
94
|
+
return (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.open("".concat(linkMain, "/auth").concat(currentUrl), '_blank');
|
|
120
95
|
},
|
|
121
96
|
text: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0431\u0435\u0441\u043F\u043B\u0430\u0442\u043D\u043E",
|
|
122
97
|
maxWidth: "430px",
|
|
@@ -1,60 +1,40 @@
|
|
|
1
1
|
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
|
|
2
2
|
@import '../variables.scss';
|
|
3
3
|
|
|
4
|
-
.
|
|
5
|
-
|
|
6
|
-
align-items: center;
|
|
7
|
-
justify-content: center;
|
|
4
|
+
.header-v2 {
|
|
5
|
+
font-family: 'Manrope', sans-serif;
|
|
8
6
|
background: linear-gradient(160deg, #F0F1FF 0%, #F7F8FC 50%, #FFFFFF 100%);
|
|
9
|
-
|
|
7
|
+
width: 100%;
|
|
8
|
+
padding: 96px 40px;
|
|
10
9
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
&__content {
|
|
10
|
+
&__inner {
|
|
11
|
+
max-width: 1280px;
|
|
12
|
+
margin: 0 auto;
|
|
16
13
|
display: grid;
|
|
17
14
|
grid-template-columns: 1fr 1fr;
|
|
18
15
|
gap: 48px;
|
|
19
16
|
align-items: center;
|
|
20
|
-
max-width: 1280px;
|
|
21
17
|
width: 100%;
|
|
22
|
-
margin: 0 auto;
|
|
23
|
-
|
|
24
|
-
// Когда нет ServicesSection — контент центрируется
|
|
25
|
-
&--centered {
|
|
26
|
-
grid-template-columns: 1fr;
|
|
27
|
-
max-width: 900px;
|
|
28
|
-
justify-items: center;
|
|
29
|
-
|
|
30
|
-
.landing-header2__info-content {
|
|
31
|
-
max-width: 100%;
|
|
32
|
-
text-align: center;
|
|
33
|
-
display: flex;
|
|
34
|
-
flex-direction: column;
|
|
35
|
-
align-items: center;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.landing-header2__description {
|
|
39
|
-
max-width: 600px;
|
|
40
|
-
margin-left: auto;
|
|
41
|
-
margin-right: auto;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.landing-header2__img-box {
|
|
45
|
-
justify-content: center;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
18
|
}
|
|
49
19
|
|
|
50
|
-
|
|
51
|
-
|
|
20
|
+
&__inner-centered {
|
|
21
|
+
grid-template-columns: 1fr;
|
|
22
|
+
max-width: 900px;
|
|
23
|
+
justify-items: center;
|
|
52
24
|
}
|
|
53
25
|
|
|
54
|
-
&__info
|
|
26
|
+
&__info {
|
|
55
27
|
animation: fadeUp 0.6s ease both;
|
|
56
28
|
}
|
|
57
29
|
|
|
30
|
+
&__info-centered {
|
|
31
|
+
max-width: 100%;
|
|
32
|
+
text-align: center;
|
|
33
|
+
display: flex;
|
|
34
|
+
flex-direction: column;
|
|
35
|
+
align-items: center;
|
|
36
|
+
}
|
|
37
|
+
|
|
58
38
|
&__badge {
|
|
59
39
|
display: inline-flex;
|
|
60
40
|
align-items: center;
|
|
@@ -74,7 +54,7 @@
|
|
|
74
54
|
}
|
|
75
55
|
}
|
|
76
56
|
|
|
77
|
-
&
|
|
57
|
+
&__icons {
|
|
78
58
|
display: flex;
|
|
79
59
|
align-items: center;
|
|
80
60
|
gap: 12px;
|
|
@@ -82,16 +62,17 @@
|
|
|
82
62
|
margin-bottom: 16px;
|
|
83
63
|
}
|
|
84
64
|
|
|
85
|
-
&
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
65
|
+
&__icons-centered {
|
|
66
|
+
justify-content: center;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
&__icon {
|
|
89
70
|
height: 32px;
|
|
90
71
|
width: auto;
|
|
91
72
|
object-fit: contain;
|
|
92
73
|
}
|
|
93
74
|
|
|
94
|
-
&__service
|
|
75
|
+
&__service {
|
|
95
76
|
display: flex;
|
|
96
77
|
align-items: center;
|
|
97
78
|
gap: 8px;
|
|
@@ -126,6 +107,16 @@
|
|
|
126
107
|
font-weight: 400;
|
|
127
108
|
}
|
|
128
109
|
|
|
110
|
+
&__description-centered {
|
|
111
|
+
max-width: 600px;
|
|
112
|
+
margin-left: auto;
|
|
113
|
+
margin-right: auto;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
&__right {
|
|
117
|
+
min-width: 280px;
|
|
118
|
+
}
|
|
119
|
+
|
|
129
120
|
@keyframes fadeUp {
|
|
130
121
|
from {
|
|
131
122
|
opacity: 0;
|
|
@@ -137,17 +128,12 @@
|
|
|
137
128
|
}
|
|
138
129
|
}
|
|
139
130
|
|
|
140
|
-
//
|
|
141
|
-
@media (max-width:
|
|
131
|
+
// Планшет (до 1100px)
|
|
132
|
+
@media (max-width: 1100px) {
|
|
142
133
|
padding: 48px 24px;
|
|
143
134
|
|
|
144
|
-
&
|
|
145
|
-
grid-template-columns: 1fr;
|
|
135
|
+
&__inner {
|
|
146
136
|
gap: 32px;
|
|
147
|
-
|
|
148
|
-
&--centered {
|
|
149
|
-
grid-template-columns: 1fr;
|
|
150
|
-
}
|
|
151
137
|
}
|
|
152
138
|
|
|
153
139
|
&__title {
|
|
@@ -164,21 +150,18 @@
|
|
|
164
150
|
text-align: center;
|
|
165
151
|
}
|
|
166
152
|
|
|
167
|
-
&
|
|
153
|
+
&__icons {
|
|
168
154
|
gap: 8px;
|
|
169
155
|
}
|
|
170
156
|
|
|
171
|
-
&
|
|
172
|
-
&__img-ozon,
|
|
173
|
-
&__img-wb,
|
|
174
|
-
&__img-icon {
|
|
157
|
+
&__icon {
|
|
175
158
|
height: 28px;
|
|
176
159
|
}
|
|
177
160
|
|
|
178
|
-
&__service
|
|
161
|
+
&__service {
|
|
179
162
|
padding: 4px 12px;
|
|
180
163
|
font-size: 12px;
|
|
181
|
-
|
|
164
|
+
|
|
182
165
|
img {
|
|
183
166
|
width: 16px;
|
|
184
167
|
height: 16px;
|
|
@@ -186,42 +169,59 @@
|
|
|
186
169
|
}
|
|
187
170
|
}
|
|
188
171
|
|
|
189
|
-
|
|
190
|
-
|
|
172
|
+
// Когда правый блок достигает минимальной ширины - переносим
|
|
173
|
+
@media (max-width: 900px) {
|
|
174
|
+
&__inner {
|
|
175
|
+
grid-template-columns: 1fr;
|
|
176
|
+
gap: 48px;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
&__right {
|
|
180
|
+
min-width: auto;
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
// Мобильная версия (до 430px)
|
|
185
|
+
@media (max-width: 430px) {
|
|
186
|
+
padding: 40px 20px;
|
|
187
|
+
|
|
188
|
+
&__inner {
|
|
189
|
+
gap: 32px;
|
|
190
|
+
}
|
|
191
191
|
|
|
192
192
|
&__title {
|
|
193
|
-
font-size:
|
|
193
|
+
font-size: 24px;
|
|
194
|
+
letter-spacing: -0.5px;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
&__description {
|
|
198
|
+
font-size: 13px;
|
|
199
|
+
margin-bottom: 24px;
|
|
194
200
|
}
|
|
195
201
|
|
|
196
202
|
&__badge {
|
|
197
|
-
font-size:
|
|
198
|
-
padding: 4px
|
|
203
|
+
font-size: 11px;
|
|
204
|
+
padding: 4px 10px;
|
|
205
|
+
margin-bottom: 16px;
|
|
199
206
|
}
|
|
200
207
|
|
|
201
|
-
&
|
|
208
|
+
&__icons {
|
|
202
209
|
gap: 6px;
|
|
210
|
+
margin-bottom: 12px;
|
|
203
211
|
}
|
|
204
212
|
|
|
205
|
-
&
|
|
206
|
-
|
|
207
|
-
&__img-wb,
|
|
208
|
-
&__img-icon {
|
|
209
|
-
height: 24px;
|
|
213
|
+
&__icon {
|
|
214
|
+
height: 22px;
|
|
210
215
|
}
|
|
211
216
|
|
|
212
|
-
&__service
|
|
213
|
-
padding:
|
|
214
|
-
font-size:
|
|
215
|
-
|
|
217
|
+
&__service {
|
|
218
|
+
padding: 3px 8px;
|
|
219
|
+
font-size: 10px;
|
|
220
|
+
|
|
216
221
|
img {
|
|
217
|
-
width:
|
|
218
|
-
height:
|
|
222
|
+
width: 12px;
|
|
223
|
+
height: 12px;
|
|
219
224
|
}
|
|
220
225
|
}
|
|
221
|
-
|
|
222
|
-
&__description {
|
|
223
|
-
font-size: 13px;
|
|
224
|
-
margin-bottom: 24px;
|
|
225
|
-
}
|
|
226
226
|
}
|
|
227
227
|
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports["default"] = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _image = _interopRequireDefault(require("next/image"));
|
|
10
|
+
require("./LogosStrip.scss");
|
|
11
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
12
|
+
var LogosStrip = function LogosStrip(_ref) {
|
|
13
|
+
var title = _ref.title,
|
|
14
|
+
description = _ref.description,
|
|
15
|
+
items = _ref.items;
|
|
16
|
+
return /*#__PURE__*/_react["default"].createElement("section", {
|
|
17
|
+
className: "logos-strip"
|
|
18
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
19
|
+
className: "logos-strip__inner"
|
|
20
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
21
|
+
className: "logos-strip__header"
|
|
22
|
+
}, /*#__PURE__*/_react["default"].createElement("h2", {
|
|
23
|
+
className: "logos-strip__title"
|
|
24
|
+
}, title || 'Интеграции'), /*#__PURE__*/_react["default"].createElement("p", {
|
|
25
|
+
className: "logos-strip__text"
|
|
26
|
+
}, description || 'Интегрируем данные в любую вашу систему учета, CRM или BI систему')), /*#__PURE__*/_react["default"].createElement("div", {
|
|
27
|
+
className: "logos-strip__content"
|
|
28
|
+
}, items === null || items === void 0 ? void 0 : items.map(function (item, index) {
|
|
29
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
30
|
+
className: "logos-strip__item",
|
|
31
|
+
key: index
|
|
32
|
+
}, /*#__PURE__*/_react["default"].createElement(_image["default"], {
|
|
33
|
+
src: item,
|
|
34
|
+
alt: "logo",
|
|
35
|
+
width: 120,
|
|
36
|
+
height: 48
|
|
37
|
+
}));
|
|
38
|
+
}))));
|
|
39
|
+
};
|
|
40
|
+
var _default = exports["default"] = LogosStrip;
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
|
|
2
|
+
@import '../variables.scss';
|
|
3
|
+
|
|
4
|
+
$text: #1A1A2E;
|
|
5
|
+
$muted: #6B7280;
|
|
6
|
+
$border: #E5E7EB;
|
|
7
|
+
$bg: #F7F8FC;
|
|
8
|
+
$white: #FFFFFF;
|
|
9
|
+
|
|
10
|
+
.logos-strip {
|
|
11
|
+
font-family: 'Manrope', sans-serif;
|
|
12
|
+
background: $white;
|
|
13
|
+
width: 100%;
|
|
14
|
+
padding: 80px 48px;
|
|
15
|
+
border-top: 1px solid $border;
|
|
16
|
+
border-bottom: 1px solid $border;
|
|
17
|
+
|
|
18
|
+
&__inner {
|
|
19
|
+
max-width: 1280px;
|
|
20
|
+
margin: 0 auto;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&__header {
|
|
24
|
+
text-align: center;
|
|
25
|
+
margin-bottom: 48px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&__title {
|
|
29
|
+
font-size: 30px;
|
|
30
|
+
font-weight: 800;
|
|
31
|
+
letter-spacing: -0.5px;
|
|
32
|
+
color: $text;
|
|
33
|
+
margin: 0 0 8px 0;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&__text {
|
|
37
|
+
font-size: 15px;
|
|
38
|
+
color: $muted;
|
|
39
|
+
line-height: 1.5;
|
|
40
|
+
max-width: 600px;
|
|
41
|
+
margin: 0 auto;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&__content {
|
|
45
|
+
display: flex;
|
|
46
|
+
align-items: center;
|
|
47
|
+
justify-content: center;
|
|
48
|
+
gap: 48px;
|
|
49
|
+
flex-wrap: wrap;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&__item {
|
|
53
|
+
display: flex;
|
|
54
|
+
align-items: center;
|
|
55
|
+
justify-content: center;
|
|
56
|
+
opacity: 0.7;
|
|
57
|
+
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
58
|
+
|
|
59
|
+
&:hover {
|
|
60
|
+
opacity: 1;
|
|
61
|
+
transform: translateY(-2px);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
img {
|
|
65
|
+
max-width: 120px;
|
|
66
|
+
height: auto;
|
|
67
|
+
object-fit: contain;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
@media (max-width: 1024px) {
|
|
72
|
+
padding: 60px 32px;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@media (max-width: 900px) {
|
|
76
|
+
padding: 48px 24px;
|
|
77
|
+
|
|
78
|
+
&__header {
|
|
79
|
+
margin-bottom: 36px;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
&__title {
|
|
83
|
+
font-size: 26px;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
&__text {
|
|
87
|
+
font-size: 14px;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
&__content {
|
|
91
|
+
gap: 32px;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
&__item img {
|
|
95
|
+
max-width: 100px;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
@media (max-width: 768px) {
|
|
100
|
+
padding: 40px 24px;
|
|
101
|
+
|
|
102
|
+
&__title {
|
|
103
|
+
font-size: 24px;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
&__content {
|
|
107
|
+
gap: 24px;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
&__item img {
|
|
111
|
+
max-width: 80px;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
@media (max-width: 600px) {
|
|
116
|
+
padding: 36px 20px;
|
|
117
|
+
|
|
118
|
+
&__content {
|
|
119
|
+
gap: 20px;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
&__item img {
|
|
123
|
+
max-width: 70px;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
}
|
|
@@ -26,6 +26,7 @@ var _PointsListV = _interopRequireDefault(require("../PointsListV2/PointsListV2"
|
|
|
26
26
|
var _VideoBlockV = _interopRequireDefault(require("../VideoBlockV2/VideoBlockV2"));
|
|
27
27
|
var _SmartReplies = _interopRequireDefault(require("../SmartReplies/SmartReplies"));
|
|
28
28
|
var _CardsWithButton = _interopRequireDefault(require("../CardsWithButton/CardsWithButton"));
|
|
29
|
+
var _LogosStrip = _interopRequireDefault(require("../LogosStrip/LogosStrip"));
|
|
29
30
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
30
31
|
var cards_list = [{
|
|
31
32
|
sum: 'Аналитика повышает продажи',
|
|
@@ -187,9 +188,7 @@ var MainContainerTest = exports.MainContainerTest = function MainContainerTest()
|
|
|
187
188
|
}, "\u0435\u0434\u0438\u043D\u043E\u0439 \u043F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u044B")),
|
|
188
189
|
description: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "\u041E\u0434\u043D\u0430 \u043F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u0430 \u0434\u043B\u044F \u0443\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u044F \u043C\u0430\u0433\u0430\u0437\u0438\u043D\u0430\u043C\u0438 \u043D\u0430 Wildberries, Ozon \u0438 \u042F\u043D\u0434\u0435\u043A\u0441 \u041C\u0430\u0440\u043A\u0435\u0442", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\u0411\u043E\u043B\u0435\u0435 20 \u0438\u043D\u0441\u0442\u0440\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u0434\u043B\u044F \u0430\u043D\u0430\u043B\u0438\u0442\u0438\u043A\u0438 \u0438 \u043E\u043F\u0442\u0438\u043C\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u0438\u0437\u043D\u0435\u0441\u0430", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\u041C\u043E\u043D\u0438\u0442\u043E\u0440\u0438\u043D\u0433 \u043A\u043E\u043D\u043A\u0443\u0440\u0435\u043D\u0442\u043E\u0432, \u0440\u0430\u0431\u043E\u0442\u0430 \u0441 \u0442\u043E\u0432\u0430\u0440\u0430\u043C\u0438, \u0430\u0432\u0442\u043E\u043E\u0442\u0432\u0435\u0442\u044B \u043D\u0430 \u043E\u0442\u0437\u044B\u0432\u044B, CRM, \u0446\u0435\u043D\u043E\u043E\u0431\u0440\u0430\u0437\u043E\u0432\u0430\u043D\u0438\u0435, \u043C\u0430\u0440\u043A\u0435\u0442\u0438\u043D\u0433 \u0438 \u043C\u043D\u043E\u0433\u043E\u0435 \u0434\u0440\u0443\u0433\u043E\u0435 \u043D\u0430 \u043E\u0434\u043D\u043E\u0439 \u043F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u0435"),
|
|
189
190
|
color: "#00B45E"
|
|
190
|
-
}), /*#__PURE__*/_react["default"].createElement(_MarqueImgsV["default"], {
|
|
191
|
-
hideTitle: true
|
|
192
|
-
}), /*#__PURE__*/_react["default"].createElement(_BlocksInfoV["default"], {
|
|
191
|
+
}), /*#__PURE__*/_react["default"].createElement(_MarqueImgsV["default"], null), /*#__PURE__*/_react["default"].createElement(_BlocksInfoV["default"], {
|
|
193
192
|
title: "\u0412\u043E\u0437\u043C\u043E\u0436\u043D\u043E\u0441\u0442\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u0430",
|
|
194
193
|
list: possibilities_list
|
|
195
194
|
}), /*#__PURE__*/_react["default"].createElement(_CardsServicesV["default"], null), /*#__PURE__*/_react["default"].createElement(_CardsV["default"], null), /*#__PURE__*/_react["default"].createElement(_FeaturesGridV["default"], {
|
|
@@ -215,7 +214,7 @@ var MainContainerTest = exports.MainContainerTest = function MainContainerTest()
|
|
|
215
214
|
list: point_list,
|
|
216
215
|
title: 'Возможности нашего сервиса',
|
|
217
216
|
className: 'max-items-3'
|
|
218
|
-
}), /*#__PURE__*/_react["default"].createElement(_VideoBlockV["default"], {
|
|
217
|
+
}), /*#__PURE__*/_react["default"].createElement(_LogosStrip["default"], null), /*#__PURE__*/_react["default"].createElement(_VideoBlockV["default"], {
|
|
219
218
|
src: "https://dl.ecomru.ru:9001/redactor-videos/ecomru_1.mp4"
|
|
220
219
|
}));
|
|
221
220
|
};
|
|
@@ -31,10 +31,10 @@ var MarqueImgsV2 = function MarqueImgsV2(_ref) {
|
|
|
31
31
|
_ref$list = _ref.list,
|
|
32
32
|
list = _ref$list === void 0 ? marquee : _ref$list;
|
|
33
33
|
return /*#__PURE__*/_react["default"].createElement("section", {
|
|
34
|
-
className:
|
|
34
|
+
className: "marquee-v2"
|
|
35
35
|
}, !hideTitle && /*#__PURE__*/_react["default"].createElement("h2", {
|
|
36
|
-
className:
|
|
37
|
-
}, title ? title : "\u041D\
|
|
36
|
+
className: "marquee-v2__title"
|
|
37
|
+
}, title ? title : "\u041D\u0430\u0441 \u0432\u044B\u0431\u0438\u0440\u0430\u044E\u0442"), /*#__PURE__*/_react["default"].createElement(_reactFastMarquee["default"], {
|
|
38
38
|
scrollWhen: 'always',
|
|
39
39
|
autoFill: true
|
|
40
40
|
}, list === null || list === void 0 ? void 0 : list.map(function (el, ind) {
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
|
|
2
|
+
@import '../variables.scss';
|
|
2
3
|
|
|
3
|
-
.
|
|
4
|
+
.marquee-v2 {
|
|
5
|
+
font-family: 'Manrope', sans-serif;
|
|
4
6
|
display: flex;
|
|
5
7
|
width: 100%;
|
|
6
8
|
flex-direction: column;
|
|
7
9
|
gap: 28px;
|
|
8
|
-
padding: 36px
|
|
9
|
-
border-top: 1px solid
|
|
10
|
-
border-bottom: 1px solid
|
|
11
|
-
background:
|
|
10
|
+
padding: 36px 0;
|
|
11
|
+
border-top: 1px solid $border;
|
|
12
|
+
border-bottom: 1px solid $border;
|
|
13
|
+
background: $white;
|
|
12
14
|
|
|
13
15
|
* {
|
|
14
16
|
font-family: 'Manrope', 'Golos Text', sans-serif !important;
|
|
@@ -20,37 +22,35 @@
|
|
|
20
22
|
font-size: 30px;
|
|
21
23
|
font-weight: 800;
|
|
22
24
|
letter-spacing: -0.5px;
|
|
23
|
-
color:
|
|
24
|
-
margin: 0
|
|
25
|
+
color: $text;
|
|
26
|
+
margin: 0 auto 8px auto;
|
|
25
27
|
}
|
|
26
28
|
|
|
27
29
|
img {
|
|
28
30
|
margin-right: 100px;
|
|
29
31
|
max-height: 24px;
|
|
30
32
|
width: auto;
|
|
33
|
+
object-fit: contain;
|
|
31
34
|
}
|
|
32
35
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
@media (max-width: 1000px) {
|
|
37
|
-
.section-marquee2 {
|
|
36
|
+
// Планшет (до 1100px)
|
|
37
|
+
@media (max-width: 1100px) {
|
|
38
|
+
padding: 36px 0;
|
|
38
39
|
gap: 24px;
|
|
39
40
|
|
|
40
41
|
&__title {
|
|
41
|
-
font-size:
|
|
42
|
+
font-size: 26px;
|
|
42
43
|
}
|
|
43
44
|
|
|
44
45
|
img {
|
|
45
46
|
margin-right: 70px;
|
|
46
|
-
max-height:
|
|
47
|
-
width: auto;
|
|
47
|
+
max-height: 22px;
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
|
-
}
|
|
51
50
|
|
|
52
|
-
|
|
53
|
-
|
|
51
|
+
// Мобильная версия (до 430px)
|
|
52
|
+
@media (max-width: 430px) {
|
|
53
|
+
padding: 22px 0;
|
|
54
54
|
gap: 16px;
|
|
55
55
|
|
|
56
56
|
&__title {
|
|
@@ -59,8 +59,7 @@
|
|
|
59
59
|
|
|
60
60
|
img {
|
|
61
61
|
margin-right: 40px;
|
|
62
|
-
max-height:
|
|
63
|
-
width: auto;
|
|
62
|
+
max-height: 18px;
|
|
64
63
|
}
|
|
65
64
|
}
|
|
66
65
|
}
|
|
@@ -85,9 +85,31 @@ var list_default = [{
|
|
|
85
85
|
description: "\u0410\u0432\u0442\u043E\u043C\u0430\u0442\u0438\u0437\u0438\u0440\u0443\u0439 \u0443\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u0435 \u0446\u0435\u043D\u0430\u043C\u0438 \u043F\u0440\u0438 \u043F\u043E\u043C\u043E\u0449\u0438 \u0443\u0434\u043E\u0431\u043D\u043E\u0433\u043E \u0438\u043D\u0441\u0442\u0440\u0443\u043C\u0435\u043D\u0442\u0430 \u0434\u043B\u044F \u043C\u0430\u0440\u043A\u0435\u0442\u043F\u043B\u0435\u0439\u0441\u043E\u0432",
|
|
86
86
|
img: "https://file.ecomru.ru:4453/api/v1/file/download/2de5ce62-e17c-4ccc-9c7b-c4c6cca40748"
|
|
87
87
|
}];
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
88
|
+
|
|
89
|
+
// Компонент заглушки
|
|
90
|
+
var ImagePlaceholder = function ImagePlaceholder(_ref) {
|
|
91
|
+
var title = _ref.title;
|
|
92
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
93
|
+
className: "services-v2__image-placeholder"
|
|
94
|
+
}, /*#__PURE__*/_react["default"].createElement("svg", {
|
|
95
|
+
width: "80",
|
|
96
|
+
height: "80",
|
|
97
|
+
viewBox: "0 0 24 24",
|
|
98
|
+
fill: "none",
|
|
99
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
100
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
101
|
+
d: "M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19Z",
|
|
102
|
+
fill: "#6B7280"
|
|
103
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
104
|
+
d: "M14.5 12L11 16.5L8.5 13.5L5 18H19L14.5 12Z",
|
|
105
|
+
fill: "#6B7280"
|
|
106
|
+
})), /*#__PURE__*/_react["default"].createElement("span", null, title));
|
|
107
|
+
};
|
|
108
|
+
var ServicesSectionV2 = function ServicesSectionV2(_ref2) {
|
|
109
|
+
var _window;
|
|
110
|
+
var _ref2$items = _ref2.items,
|
|
111
|
+
items = _ref2$items === void 0 ? list_default : _ref2$items;
|
|
112
|
+
var currentUrl = (_window = window) === null || _window === void 0 || (_window = _window.location) === null || _window === void 0 ? void 0 : _window.search;
|
|
91
113
|
var _useState = (0, _react.useState)(items[0]),
|
|
92
114
|
_useState2 = _slicedToArray(_useState, 2),
|
|
93
115
|
activeItem = _useState2[0],
|
|
@@ -106,57 +128,59 @@ var ServicesSectionV2 = function ServicesSectionV2(_ref) {
|
|
|
106
128
|
var nextIndex = (currentIndex + 1) % items.length;
|
|
107
129
|
return items[nextIndex];
|
|
108
130
|
});
|
|
109
|
-
}, 3000);
|
|
110
|
-
|
|
131
|
+
}, 3000);
|
|
111
132
|
return function () {
|
|
112
133
|
return clearInterval(interval);
|
|
113
134
|
};
|
|
114
135
|
}, [items, isAutoPlaying]);
|
|
115
|
-
|
|
116
|
-
// Optional: Pause auto-play when user clicks on an item
|
|
117
136
|
var handleItemClick = function handleItemClick(item) {
|
|
118
137
|
setActiveItem(item);
|
|
119
138
|
setIsAutoPlaying(false);
|
|
120
|
-
|
|
121
|
-
// Optional: Resume auto-play after 10 seconds of inactivity
|
|
122
139
|
setTimeout(function () {
|
|
123
140
|
setIsAutoPlaying(true);
|
|
124
141
|
}, 10000);
|
|
125
142
|
};
|
|
126
143
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
127
|
-
className: "services-
|
|
144
|
+
className: "services-v2"
|
|
128
145
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
129
|
-
className: "services-
|
|
146
|
+
className: "services-v2__container"
|
|
130
147
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
131
|
-
className: "services-
|
|
148
|
+
className: "services-v2__sidebar"
|
|
132
149
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
133
|
-
className: "services-
|
|
150
|
+
className: "services-v2__logo"
|
|
134
151
|
}, "ECOM", /*#__PURE__*/_react["default"].createElement("span", null, "RU")), items.map(function (item, idx) {
|
|
135
152
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
136
153
|
key: idx,
|
|
137
|
-
className: "services-
|
|
154
|
+
className: "services-v2__nav-item ".concat(activeItem.title === item.title ? 'services-v2__nav-item--active' : ''),
|
|
138
155
|
onClick: function onClick() {
|
|
139
156
|
return handleItemClick(item);
|
|
140
157
|
}
|
|
141
158
|
}, /*#__PURE__*/_react["default"].createElement("span", null, item.title));
|
|
142
159
|
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
143
|
-
className: "services-
|
|
160
|
+
className: "services-v2__main"
|
|
144
161
|
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
145
|
-
className: "services-
|
|
162
|
+
className: "services-v2__title"
|
|
146
163
|
}, activeItem.title), /*#__PURE__*/_react["default"].createElement("div", {
|
|
147
|
-
className: "services-
|
|
148
|
-
}, /*#__PURE__*/_react["default"].createElement("p", {
|
|
149
|
-
className: "services-description"
|
|
150
|
-
}, activeItem.description), /*#__PURE__*/_react["default"].createElement("a", {
|
|
151
|
-
href: activeItem.link,
|
|
152
|
-
className: "services-link"
|
|
153
|
-
}, "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043A \u0441\u0435\u0440\u0432\u0438\u0441\u0443 \u2192")), /*#__PURE__*/_react["default"].createElement("div", {
|
|
154
|
-
className: "services-content"
|
|
164
|
+
className: "services-v2__content"
|
|
155
165
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
156
|
-
className: "services-
|
|
157
|
-
}, /*#__PURE__*/_react["default"].createElement("img", {
|
|
166
|
+
className: "services-v2__image"
|
|
167
|
+
}, activeItem.img ? /*#__PURE__*/_react["default"].createElement("img", {
|
|
158
168
|
src: activeItem.img,
|
|
159
169
|
alt: activeItem.title
|
|
160
|
-
})
|
|
170
|
+
}) : /*#__PURE__*/_react["default"].createElement(ImagePlaceholder, {
|
|
171
|
+
title: activeItem.title
|
|
172
|
+
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
173
|
+
className: "services-v2__text"
|
|
174
|
+
}, /*#__PURE__*/_react["default"].createElement("p", {
|
|
175
|
+
className: "services-v2__description"
|
|
176
|
+
}, activeItem.description), /*#__PURE__*/_react["default"].createElement("a", {
|
|
177
|
+
onClick: function onClick(e) {
|
|
178
|
+
var _window2;
|
|
179
|
+
e.preventDefault();
|
|
180
|
+
(_window2 = window) === null || _window2 === void 0 || _window2.open("https://lk.ecomru.ru/auth".concat(currentUrl), '_blank');
|
|
181
|
+
},
|
|
182
|
+
href: activeItem.link,
|
|
183
|
+
className: "services-v2__link"
|
|
184
|
+
}, "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043A \u0441\u0435\u0440\u0432\u0438\u0441\u0443 \u2192"))))));
|
|
161
185
|
};
|
|
162
186
|
var _default = exports["default"] = ServicesSectionV2;
|
|
@@ -1,245 +1,277 @@
|
|
|
1
1
|
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
|
|
2
2
|
@import '../variables.scss';
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
$purple-light: #EEF0FF;
|
|
6
|
-
$purple-dark: #5448D0;
|
|
7
|
-
$green: #22C55E;
|
|
8
|
-
$text: #1A1A2E;
|
|
9
|
-
$muted: #6B7280;
|
|
10
|
-
$border: #E5E7EB;
|
|
11
|
-
$bg: #F7F8FC;
|
|
12
|
-
$white: #FFFFFF;
|
|
13
|
-
|
|
14
|
-
.services-section-v2 {
|
|
4
|
+
.services-v2 {
|
|
15
5
|
background: $white;
|
|
16
6
|
border-radius: 16px;
|
|
17
7
|
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
|
|
18
8
|
border: 1px solid $border;
|
|
19
9
|
overflow: hidden;
|
|
10
|
+
width: 100%;
|
|
20
11
|
|
|
21
12
|
* {
|
|
22
13
|
font-family: 'Manrope', 'Golos Text', sans-serif !important;
|
|
23
14
|
}
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.services-container {
|
|
27
|
-
display: flex;
|
|
28
|
-
flex-direction: row;
|
|
29
|
-
height: 400px;
|
|
30
15
|
|
|
31
|
-
|
|
32
|
-
|
|
16
|
+
&__container {
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-direction: row;
|
|
19
|
+
min-height: 400px;
|
|
33
20
|
}
|
|
34
|
-
}
|
|
35
21
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
22
|
+
&__sidebar {
|
|
23
|
+
width: 160px;
|
|
24
|
+
flex-shrink: 0;
|
|
25
|
+
border-right: 1px solid $border;
|
|
26
|
+
padding: 16px 0;
|
|
27
|
+
background: $white;
|
|
28
|
+
overflow-y: auto;
|
|
29
|
+
max-height: 450px;
|
|
30
|
+
}
|
|
44
31
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
32
|
+
&__logo {
|
|
33
|
+
padding: 0 16px 16px;
|
|
34
|
+
font-size: 16px;
|
|
35
|
+
font-weight: 800;
|
|
48
36
|
border-bottom: 1px solid $border;
|
|
49
|
-
|
|
37
|
+
margin-bottom: 8px;
|
|
38
|
+
|
|
39
|
+
span {
|
|
40
|
+
color: $green;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&__nav-item {
|
|
50
45
|
display: flex;
|
|
51
|
-
|
|
52
|
-
|
|
46
|
+
align-items: center;
|
|
47
|
+
gap: 10px;
|
|
48
|
+
padding: 6px 16px;
|
|
49
|
+
font-size: 13px;
|
|
50
|
+
font-weight: 500;
|
|
51
|
+
color: $muted;
|
|
52
|
+
cursor: pointer;
|
|
53
|
+
transition: all 0.15s;
|
|
54
|
+
|
|
55
|
+
&:hover {
|
|
56
|
+
background: $bg;
|
|
57
|
+
color: $text;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&--active {
|
|
61
|
+
color: $green-dark;
|
|
62
|
+
background: $green-light-bg;
|
|
63
|
+
border-radius: 6px;
|
|
64
|
+
margin: 0 8px;
|
|
65
|
+
padding: 6px 8px;
|
|
66
|
+
font-weight: 600;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&__main {
|
|
71
|
+
display: flex;
|
|
72
|
+
flex-direction: column;
|
|
53
73
|
gap: 8px;
|
|
74
|
+
flex: 1;
|
|
75
|
+
padding: 20px;
|
|
76
|
+
background: $bg;
|
|
54
77
|
}
|
|
55
|
-
}
|
|
56
78
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
margin-bottom: 8px;
|
|
79
|
+
&__title {
|
|
80
|
+
font-size: 18px;
|
|
81
|
+
font-weight: 700;
|
|
82
|
+
color: $text;
|
|
83
|
+
}
|
|
63
84
|
|
|
64
|
-
|
|
65
|
-
|
|
85
|
+
&__content {
|
|
86
|
+
display: flex;
|
|
87
|
+
flex-direction: column;
|
|
88
|
+
gap: 24px;
|
|
89
|
+
border-radius: 12px;
|
|
66
90
|
}
|
|
67
91
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
92
|
+
&__text {
|
|
93
|
+
flex: 1;
|
|
94
|
+
display: flex;
|
|
95
|
+
flex-direction: column;
|
|
96
|
+
justify-content: center;
|
|
73
97
|
}
|
|
74
|
-
}
|
|
75
98
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
align-items: center;
|
|
79
|
-
gap: 10px;
|
|
80
|
-
padding: 6px 16px;
|
|
81
|
-
font-size: 13px;
|
|
82
|
-
font-weight: 500;
|
|
83
|
-
color: $muted;
|
|
84
|
-
cursor: pointer;
|
|
85
|
-
transition: all 0.15s;
|
|
86
|
-
|
|
87
|
-
&:hover {
|
|
88
|
-
background: $bg;
|
|
99
|
+
&__description {
|
|
100
|
+
font-size: 13px;
|
|
89
101
|
color: $text;
|
|
102
|
+
line-height: 1.6;
|
|
103
|
+
margin-bottom: 8px;
|
|
90
104
|
}
|
|
91
105
|
|
|
92
|
-
|
|
93
|
-
color: $green
|
|
94
|
-
|
|
95
|
-
border-radius: 6px;
|
|
96
|
-
margin: 0 8px;
|
|
97
|
-
padding: 6px 8px;
|
|
106
|
+
&__link {
|
|
107
|
+
color: $green;
|
|
108
|
+
font-size: 14px;
|
|
98
109
|
font-weight: 600;
|
|
110
|
+
text-decoration: none;
|
|
111
|
+
display: inline-flex;
|
|
112
|
+
align-items: center;
|
|
113
|
+
gap: 6px;
|
|
114
|
+
transition: gap 0.2s;
|
|
115
|
+
cursor: pointer;
|
|
116
|
+
|
|
117
|
+
&:hover {
|
|
118
|
+
gap: 10px;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
99
121
|
|
|
100
|
-
|
|
101
|
-
|
|
122
|
+
&__image {
|
|
123
|
+
display: flex;
|
|
124
|
+
flex: 1;
|
|
125
|
+
justify-content: center;
|
|
126
|
+
align-items: center;
|
|
127
|
+
aspect-ratio: 16 / 9;
|
|
128
|
+
background-color: #fff;
|
|
129
|
+
border-radius: 8px;
|
|
130
|
+
padding: 8px;
|
|
131
|
+
border: 1px solid $border;
|
|
132
|
+
|
|
133
|
+
img {
|
|
134
|
+
max-width: 100%;
|
|
135
|
+
max-height: 100%;
|
|
136
|
+
width: auto;
|
|
137
|
+
height: auto;
|
|
138
|
+
object-fit: contain;
|
|
139
|
+
border-radius: 8px;
|
|
102
140
|
}
|
|
103
141
|
}
|
|
104
142
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
143
|
+
&__image-placeholder {
|
|
144
|
+
display: flex;
|
|
145
|
+
flex-direction: column;
|
|
146
|
+
align-items: center;
|
|
147
|
+
justify-content: center;
|
|
148
|
+
gap: 12px;
|
|
149
|
+
padding: 32px;
|
|
150
|
+
background: $bg;
|
|
151
|
+
border-radius: 12px;
|
|
152
|
+
width: 100%;
|
|
153
|
+
aspect-ratio: 16 / 9;
|
|
109
154
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
155
|
+
svg {
|
|
156
|
+
width: 48px;
|
|
157
|
+
height: 48px;
|
|
158
|
+
opacity: 0.4;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
span {
|
|
162
|
+
font-size: 13px;
|
|
163
|
+
color: $muted;
|
|
113
164
|
}
|
|
114
165
|
}
|
|
115
166
|
}
|
|
116
167
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
}
|
|
168
|
+
// Планшет (до 1100px)
|
|
169
|
+
@media (max-width: 1100px) {
|
|
170
|
+
.services-v2 {
|
|
171
|
+
&__main {
|
|
172
|
+
padding: 16px;
|
|
173
|
+
}
|
|
124
174
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
gap: 8px;
|
|
130
|
-
flex: 1;
|
|
131
|
-
padding: 20px;
|
|
132
|
-
background: $bg;
|
|
175
|
+
&__content {
|
|
176
|
+
gap: 16px;
|
|
177
|
+
}
|
|
178
|
+
}
|
|
133
179
|
}
|
|
134
180
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
}
|
|
181
|
+
// Перенос сайдбара (до 900px)
|
|
182
|
+
@media (max-width: 900px) {
|
|
183
|
+
.services-v2 {
|
|
184
|
+
&__container {
|
|
185
|
+
flex-direction: column;
|
|
186
|
+
min-height: auto;
|
|
187
|
+
}
|
|
143
188
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
189
|
+
&__sidebar {
|
|
190
|
+
width: 100%;
|
|
191
|
+
border-right: none;
|
|
192
|
+
border-bottom: 1px solid $border;
|
|
193
|
+
display: flex;
|
|
194
|
+
flex-wrap: wrap;
|
|
195
|
+
padding: 12px;
|
|
196
|
+
gap: 8px;
|
|
197
|
+
overflow-x: auto;
|
|
198
|
+
max-height: none;
|
|
199
|
+
}
|
|
149
200
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
}
|
|
201
|
+
&__logo {
|
|
202
|
+
width: 100%;
|
|
203
|
+
text-align: center;
|
|
204
|
+
border-bottom: none;
|
|
205
|
+
padding-bottom: 8px;
|
|
206
|
+
}
|
|
156
207
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
208
|
+
&__nav-item {
|
|
209
|
+
flex: 0 0 auto;
|
|
210
|
+
padding: 8px 14px;
|
|
211
|
+
border-radius: 20px;
|
|
161
212
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
padding: 4px 10px;
|
|
168
|
-
border-radius: 6px;
|
|
169
|
-
background: $white;
|
|
170
|
-
cursor: pointer;
|
|
171
|
-
transition: all 0.2s;
|
|
213
|
+
&--active {
|
|
214
|
+
margin: 0;
|
|
215
|
+
padding: 8px 14px;
|
|
216
|
+
}
|
|
217
|
+
}
|
|
172
218
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
219
|
+
&__main {
|
|
220
|
+
overflow: visible;
|
|
221
|
+
}
|
|
176
222
|
}
|
|
177
223
|
}
|
|
178
224
|
|
|
179
|
-
//
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
225
|
+
// Мобильная версия (до 768px)
|
|
226
|
+
@media (max-width: 768px) {
|
|
227
|
+
.services-v2 {
|
|
228
|
+
&__content {
|
|
229
|
+
flex-direction: column;
|
|
230
|
+
padding: 16px;
|
|
231
|
+
}
|
|
185
232
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
233
|
+
&__text {
|
|
234
|
+
min-width: auto;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
&__image-placeholder {
|
|
238
|
+
min-height: 160px;
|
|
239
|
+
}
|
|
189
240
|
}
|
|
190
241
|
}
|
|
191
242
|
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
}
|
|
243
|
+
// Мобильная версия (до 430px)
|
|
244
|
+
@media (max-width: 430px) {
|
|
245
|
+
.services-v2 {
|
|
246
|
+
&__main {
|
|
247
|
+
padding: 12px;
|
|
248
|
+
}
|
|
198
249
|
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
line-height: 1.6;
|
|
203
|
-
margin-bottom: 8px;
|
|
204
|
-
}
|
|
250
|
+
&__title {
|
|
251
|
+
font-size: 16px;
|
|
252
|
+
}
|
|
205
253
|
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
font-weight: 600;
|
|
210
|
-
text-decoration: none;
|
|
211
|
-
display: inline-flex;
|
|
212
|
-
align-items: center;
|
|
213
|
-
gap: 6px;
|
|
214
|
-
transition: gap 0.2s;
|
|
215
|
-
|
|
216
|
-
&:hover {
|
|
217
|
-
gap: 10px;
|
|
218
|
-
}
|
|
219
|
-
}
|
|
254
|
+
&__description {
|
|
255
|
+
font-size: 12px;
|
|
256
|
+
}
|
|
220
257
|
|
|
221
|
-
|
|
222
|
-
|
|
258
|
+
&__link {
|
|
259
|
+
font-size: 13px;
|
|
260
|
+
}
|
|
223
261
|
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
}
|
|
229
|
-
}
|
|
262
|
+
&__content {
|
|
263
|
+
gap: 12px;
|
|
264
|
+
padding: 12px;
|
|
265
|
+
}
|
|
230
266
|
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
border-radius: 10px;
|
|
235
|
-
border: 1px solid $border;
|
|
236
|
-
padding: 16px;
|
|
237
|
-
height: 100px;
|
|
238
|
-
position: relative;
|
|
239
|
-
overflow: hidden;
|
|
240
|
-
}
|
|
267
|
+
&__image-placeholder {
|
|
268
|
+
min-height: 140px;
|
|
269
|
+
padding: 20px;
|
|
241
270
|
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
271
|
+
svg {
|
|
272
|
+
width: 40px;
|
|
273
|
+
height: 40px;
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
}
|
|
245
277
|
}
|
|
@@ -1,37 +1,3 @@
|
|
|
1
|
-
// styles/variables.scss
|
|
2
|
-
|
|
3
|
-
// ========== ЦВЕТА ==========
|
|
4
|
-
// * {
|
|
5
|
-
// // Фиолетовые акценты
|
|
6
|
-
// --purple: #6B5CE7;
|
|
7
|
-
// --purple-light: #EEF0FF;
|
|
8
|
-
// --purple-dark: #5448D0;
|
|
9
|
-
|
|
10
|
-
// // Зеленые цвета
|
|
11
|
-
// --green: #059669;
|
|
12
|
-
// --green-light: #10B981;
|
|
13
|
-
// --green-dark: #047857;
|
|
14
|
-
// --green-forest: #064E3B;
|
|
15
|
-
// --green-light-bg: #D1FAE5;
|
|
16
|
-
// --green-mint-bg: #A7F3D0;
|
|
17
|
-
|
|
18
|
-
// // Нейтральные цвета
|
|
19
|
-
// --text: #1A1A2E;
|
|
20
|
-
// --muted: #6B7280;
|
|
21
|
-
// --border: #E5E7EB;
|
|
22
|
-
// --bg: #F7F8FC;
|
|
23
|
-
// --white: #FFFFFF;
|
|
24
|
-
|
|
25
|
-
// // Градиенты
|
|
26
|
-
// --gradient-green: linear-gradient(135deg, var(--green) 0%, var(--green-light) 100%);
|
|
27
|
-
// --gradient-bg: linear-gradient(160deg, #F0F1FF 0%, var(--bg) 50%, var(--white) 100%);
|
|
28
|
-
// }
|
|
29
|
-
|
|
30
|
-
// SCSS переменные (для использования в миксинах и внутри стилей)
|
|
31
|
-
$purple: #6B5CE7;
|
|
32
|
-
$purple-light: #EEF0FF;
|
|
33
|
-
$purple-dark: #5448D0;
|
|
34
|
-
|
|
35
1
|
$green: #059669;
|
|
36
2
|
$green-light: #10B981;
|
|
37
3
|
$green-dark: #047857;
|
|
@@ -46,5 +12,5 @@ $bg: #F7F8FC;
|
|
|
46
12
|
$white: #FFFFFF;
|
|
47
13
|
|
|
48
14
|
// Брейкпоинты
|
|
49
|
-
$tablet:
|
|
50
|
-
$mobile:
|
|
15
|
+
$tablet: 1100px;
|
|
16
|
+
$mobile: 4030px;
|
package/dist/index.js
CHANGED
|
@@ -207,6 +207,12 @@ Object.defineProperty(exports, "LogoBox", {
|
|
|
207
207
|
return _Logo["default"];
|
|
208
208
|
}
|
|
209
209
|
});
|
|
210
|
+
Object.defineProperty(exports, "LogosStrip", {
|
|
211
|
+
enumerable: true,
|
|
212
|
+
get: function get() {
|
|
213
|
+
return _LogosStrip["default"];
|
|
214
|
+
}
|
|
215
|
+
});
|
|
210
216
|
Object.defineProperty(exports, "LongTileArticleBox", {
|
|
211
217
|
enumerable: true,
|
|
212
218
|
get: function get() {
|
|
@@ -438,6 +444,7 @@ var _Footer = _interopRequireDefault(require("./components/ConstructorComponents
|
|
|
438
444
|
var _PagePreviews = _interopRequireDefault(require("./components/ConstructorComponents/PagePreviews/PagePreviews"));
|
|
439
445
|
var _SmartReplies = _interopRequireDefault(require("./components/ConstructorComponents/SmartReplies/SmartReplies"));
|
|
440
446
|
var _CardsWithButton = _interopRequireDefault(require("./components/ConstructorComponents/CardsWithButton/CardsWithButton"));
|
|
447
|
+
var _LogosStrip = _interopRequireDefault(require("./components/ConstructorComponents/LogosStrip/LogosStrip"));
|
|
441
448
|
var _ButtonBasic = _interopRequireDefault(require("./components/Buttons/ButtonBasic/ButtonBasic"));
|
|
442
449
|
var _ButtonSignUp = _interopRequireDefault(require("./components/Buttons/ButtonSignUp/ButtonSignUp"));
|
|
443
450
|
var _InputDinamycPlaceholder = _interopRequireDefault(require("./components/Inputs/InputDinamycPlaceholder/InputDinamycPlaceholder"));
|