ecomlab-components-next 0.1.315 → 0.1.316
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/CardsWithButtonV2/CardsWithButtonV2.js +51 -0
- package/dist/components/ConstructorComponents/CardsWithButtonV2/CardsWithButtonV2.scss +221 -0
- package/dist/components/ConstructorComponents/MainContainer/MainContainerV2.stories.js +8 -0
- package/dist/index.js +7 -0
- package/package.json +1 -1
|
@@ -0,0 +1,51 @@
|
|
|
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
|
+
require("./CardsWithButtonV2.scss");
|
|
10
|
+
var _useReveal = _interopRequireDefault(require("../../../common/hooks/useReveal"));
|
|
11
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
12
|
+
var CardsWithButtonV2 = function CardsWithButtonV2(_ref) {
|
|
13
|
+
var title = _ref.title,
|
|
14
|
+
items = _ref.items,
|
|
15
|
+
_ref$btnText = _ref.btnText,
|
|
16
|
+
btnText = _ref$btnText === void 0 ? 'Подключиться' : _ref$btnText,
|
|
17
|
+
onBtnClick = _ref.onBtnClick;
|
|
18
|
+
(0, _useReveal["default"])();
|
|
19
|
+
return /*#__PURE__*/_react["default"].createElement("section", {
|
|
20
|
+
className: "cards-with-btn-glow"
|
|
21
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
22
|
+
className: "cards-with-btn-glow__inner"
|
|
23
|
+
}, title && /*#__PURE__*/_react["default"].createElement("h2", {
|
|
24
|
+
className: "cards-with-btn-glow__title reveal"
|
|
25
|
+
}, title), /*#__PURE__*/_react["default"].createElement("div", {
|
|
26
|
+
className: "cards-with-btn-glow__content"
|
|
27
|
+
}, items === null || items === void 0 ? void 0 : items.map(function (_ref2, index) {
|
|
28
|
+
var title = _ref2.title,
|
|
29
|
+
description = _ref2.description;
|
|
30
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
31
|
+
className: "cards-with-btn-glow__card reveal",
|
|
32
|
+
key: index,
|
|
33
|
+
style: {
|
|
34
|
+
'--index': index
|
|
35
|
+
}
|
|
36
|
+
}, /*#__PURE__*/_react["default"].createElement("h3", {
|
|
37
|
+
className: "cards-with-btn-glow__card-title"
|
|
38
|
+
}, title), /*#__PURE__*/_react["default"].createElement("p", {
|
|
39
|
+
className: "cards-with-btn-glow__card-description"
|
|
40
|
+
}, description), /*#__PURE__*/_react["default"].createElement("button", {
|
|
41
|
+
className: "cards-with-btn-glow__card-btn",
|
|
42
|
+
onClick: function onClick() {
|
|
43
|
+
return onBtnClick === null || onBtnClick === void 0 ? void 0 : onBtnClick();
|
|
44
|
+
}
|
|
45
|
+
}, btnText, /*#__PURE__*/_react["default"].createElement("span", {
|
|
46
|
+
className: "cards-with-btn-glow__card-btn-arrow",
|
|
47
|
+
"aria-hidden": "true"
|
|
48
|
+
}, "\u2192")));
|
|
49
|
+
}))));
|
|
50
|
+
};
|
|
51
|
+
var _default = exports["default"] = CardsWithButtonV2;
|
|
@@ -0,0 +1,221 @@
|
|
|
1
|
+
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
|
|
2
|
+
@import '../variables.scss';
|
|
3
|
+
|
|
4
|
+
.cards-with-btn-glow {
|
|
5
|
+
font-family: 'Manrope', sans-serif;
|
|
6
|
+
background: $bg;
|
|
7
|
+
width: 100%;
|
|
8
|
+
padding: 96px 40px;
|
|
9
|
+
|
|
10
|
+
* {
|
|
11
|
+
font-family: 'Manrope', 'Golos Text', sans-serif !important;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
&__inner {
|
|
15
|
+
max-width: 1280px;
|
|
16
|
+
margin: 0 auto;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
&__title {
|
|
20
|
+
text-align: center;
|
|
21
|
+
font-size: 30px;
|
|
22
|
+
font-weight: 800;
|
|
23
|
+
letter-spacing: -0.5px;
|
|
24
|
+
color: $text;
|
|
25
|
+
margin: 0 0 56px 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&__content {
|
|
29
|
+
display: grid;
|
|
30
|
+
grid-template-columns: repeat(3, 1fr);
|
|
31
|
+
gap: 24px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&__card {
|
|
35
|
+
background: $white;
|
|
36
|
+
border: 1px solid $border;
|
|
37
|
+
border-radius: 20px;
|
|
38
|
+
padding: 32px 28px;
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
42
|
+
position: relative;
|
|
43
|
+
overflow: hidden;
|
|
44
|
+
|
|
45
|
+
// Мягкое свечение в правом верхнем углу
|
|
46
|
+
&::before {
|
|
47
|
+
content: '';
|
|
48
|
+
position: absolute;
|
|
49
|
+
inset: 0;
|
|
50
|
+
z-index: 0;
|
|
51
|
+
pointer-events: none;
|
|
52
|
+
background: radial-gradient(circle at 100% 0, rgba($green, 0.2), transparent 58%);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
// Акцентная метка сверху
|
|
56
|
+
&::after {
|
|
57
|
+
content: '';
|
|
58
|
+
position: absolute;
|
|
59
|
+
top: 0;
|
|
60
|
+
left: 28px;
|
|
61
|
+
width: 36px;
|
|
62
|
+
height: 3px;
|
|
63
|
+
background: $green;
|
|
64
|
+
border-radius: 0 0 3px 3px;
|
|
65
|
+
pointer-events: none;
|
|
66
|
+
transition: width 0.3s ease;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
// Контент поверх свечения
|
|
70
|
+
> * {
|
|
71
|
+
position: relative;
|
|
72
|
+
z-index: 1;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&:hover {
|
|
76
|
+
transform: translateY(-4px);
|
|
77
|
+
box-shadow: 0 12px 32px rgba($green, 0.14);
|
|
78
|
+
|
|
79
|
+
&::after {
|
|
80
|
+
width: 48px;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.cards-with-btn-glow__card-btn {
|
|
84
|
+
color: $green-dark;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.cards-with-btn-glow__card-btn-arrow {
|
|
88
|
+
transform: translateX(5px);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
&__card-icon {
|
|
94
|
+
width: 56px;
|
|
95
|
+
height: 56px;
|
|
96
|
+
background: $green-light-bg;
|
|
97
|
+
border-radius: 14px;
|
|
98
|
+
display: flex;
|
|
99
|
+
align-items: center;
|
|
100
|
+
justify-content: center;
|
|
101
|
+
margin-bottom: 20px;
|
|
102
|
+
color: $green;
|
|
103
|
+
|
|
104
|
+
svg {
|
|
105
|
+
width: 28px;
|
|
106
|
+
height: 28px;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
&__card-title {
|
|
111
|
+
font-size: 18px;
|
|
112
|
+
font-weight: 700;
|
|
113
|
+
color: $text;
|
|
114
|
+
margin: 0 0 12px 0;
|
|
115
|
+
line-height: 1.4;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
&__card-description {
|
|
119
|
+
font-size: 14px;
|
|
120
|
+
color: $muted;
|
|
121
|
+
line-height: 1.6;
|
|
122
|
+
margin: 0 0 24px 0;
|
|
123
|
+
flex-grow: 1;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
// Кнопка: капс с точкой
|
|
127
|
+
&__card-btn {
|
|
128
|
+
background: none;
|
|
129
|
+
border: none;
|
|
130
|
+
padding: 0;
|
|
131
|
+
font-size: 11.5px;
|
|
132
|
+
font-weight: 800;
|
|
133
|
+
text-transform: uppercase;
|
|
134
|
+
letter-spacing: 0.09em;
|
|
135
|
+
color: $green;
|
|
136
|
+
cursor: pointer;
|
|
137
|
+
font-family: inherit;
|
|
138
|
+
display: inline-flex;
|
|
139
|
+
align-items: center;
|
|
140
|
+
gap: 10px;
|
|
141
|
+
transition: color 0.2s ease;
|
|
142
|
+
width: fit-content;
|
|
143
|
+
|
|
144
|
+
// точка слева
|
|
145
|
+
&::before {
|
|
146
|
+
content: '';
|
|
147
|
+
width: 7px;
|
|
148
|
+
height: 7px;
|
|
149
|
+
border-radius: 50%;
|
|
150
|
+
background: currentColor;
|
|
151
|
+
flex-shrink: 0;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
// Стрелка чуть крупнее текста кнопки
|
|
156
|
+
&__card-btn-arrow {
|
|
157
|
+
font-size: 18px;
|
|
158
|
+
line-height: 1;
|
|
159
|
+
letter-spacing: 0;
|
|
160
|
+
transition: transform 0.2s ease;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
@keyframes fadeUp {
|
|
164
|
+
from {
|
|
165
|
+
opacity: 0;
|
|
166
|
+
transform: translateY(24px);
|
|
167
|
+
}
|
|
168
|
+
to {
|
|
169
|
+
opacity: 1;
|
|
170
|
+
transform: translateY(0);
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
// Планшет (до 1100px)
|
|
176
|
+
@media (max-width: 1100px) {
|
|
177
|
+
.cards-with-btn-glow {
|
|
178
|
+
padding: 72px 24px;
|
|
179
|
+
|
|
180
|
+
&__content {
|
|
181
|
+
grid-template-columns: repeat(2, 1fr);
|
|
182
|
+
gap: 20px;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
&__title {
|
|
186
|
+
font-size: 26px;
|
|
187
|
+
margin-bottom: 40px;
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
// Мобильная версия (до 500px) - 1 колонка
|
|
193
|
+
@media (max-width: 500px) {
|
|
194
|
+
.cards-with-btn-glow {
|
|
195
|
+
|
|
196
|
+
&__content {
|
|
197
|
+
grid-template-columns: 1fr;
|
|
198
|
+
gap: 16px;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
&__card {
|
|
202
|
+
padding: 20px 16px;
|
|
203
|
+
|
|
204
|
+
&::after {
|
|
205
|
+
left: 16px;
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
// Мобильная версия (до 430px)
|
|
212
|
+
@media (max-width: 430px) {
|
|
213
|
+
.cards-with-btn-glow {
|
|
214
|
+
padding: 40px 20px;
|
|
215
|
+
|
|
216
|
+
&__title {
|
|
217
|
+
font-size: 22px;
|
|
218
|
+
margin-bottom: 32px;
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
}
|
|
@@ -29,6 +29,7 @@ var _PointsListV = _interopRequireDefault(require("../PointsListV2/PointsListV2"
|
|
|
29
29
|
var _VideoBlockV = _interopRequireDefault(require("../VideoBlockV2/VideoBlockV2"));
|
|
30
30
|
var _SmartReplies = _interopRequireDefault(require("../SmartReplies/SmartReplies"));
|
|
31
31
|
var _CardsWithButton = _interopRequireDefault(require("../CardsWithButton/CardsWithButton"));
|
|
32
|
+
var _CardsWithButtonV = _interopRequireDefault(require("../CardsWithButtonV2/CardsWithButtonV2"));
|
|
32
33
|
var _LogosStrip = _interopRequireDefault(require("../LogosStrip/LogosStrip"));
|
|
33
34
|
var _decstope = _interopRequireDefault(require("./img/decstope.jpg"));
|
|
34
35
|
var _discount = _interopRequireDefault(require("./img/01-discount.svg"));
|
|
@@ -254,6 +255,13 @@ var MainContainerTest = exports.MainContainerTest = function MainContainerTest()
|
|
|
254
255
|
onBtnClick: function onBtnClick() {
|
|
255
256
|
return window.open('https://lk.ecomru.ru/auth', '_blank');
|
|
256
257
|
}
|
|
258
|
+
}), /*#__PURE__*/_react["default"].createElement(_CardsWithButtonV["default"], {
|
|
259
|
+
title: "\u041D\u0430\u0434\u0451\u0436\u043D\u044B\u0439 \u043F\u043E\u043C\u043E\u0449\u043D\u0438\u043A \u0432 \u0432\u0435\u0434\u0435\u043D\u0438\u0438 \u0432\u0430\u0448\u0435\u0433\u043E \u0431\u0438\u0437\u043D\u0435\u0441\u0430",
|
|
260
|
+
items: business_assistant_list,
|
|
261
|
+
btnText: "\u041F\u043E\u0434\u043A\u043B\u044E\u0447\u0438\u0442\u044C\u0441\u044F",
|
|
262
|
+
onBtnClick: function onBtnClick() {
|
|
263
|
+
return window.open('https://lk.ecomru.ru/auth', '_blank');
|
|
264
|
+
}
|
|
257
265
|
}), /*#__PURE__*/_react["default"].createElement(_PointsListV["default"], {
|
|
258
266
|
list: point_list,
|
|
259
267
|
title: 'Возможности нашего сервиса',
|
package/dist/index.js
CHANGED
|
@@ -111,6 +111,12 @@ Object.defineProperty(exports, "CardsWithButton", {
|
|
|
111
111
|
return _CardsWithButton["default"];
|
|
112
112
|
}
|
|
113
113
|
});
|
|
114
|
+
Object.defineProperty(exports, "CardsWithButtonV2", {
|
|
115
|
+
enumerable: true,
|
|
116
|
+
get: function get() {
|
|
117
|
+
return _CardsWithButtonV["default"];
|
|
118
|
+
}
|
|
119
|
+
});
|
|
114
120
|
Object.defineProperty(exports, "Carousel", {
|
|
115
121
|
enumerable: true,
|
|
116
122
|
get: function get() {
|
|
@@ -485,6 +491,7 @@ var _Footer = _interopRequireDefault(require("./components/ConstructorComponents
|
|
|
485
491
|
var _PagePreviews = _interopRequireDefault(require("./components/ConstructorComponents/PagePreviews/PagePreviews"));
|
|
486
492
|
var _SmartReplies = _interopRequireDefault(require("./components/ConstructorComponents/SmartReplies/SmartReplies"));
|
|
487
493
|
var _CardsWithButton = _interopRequireDefault(require("./components/ConstructorComponents/CardsWithButton/CardsWithButton"));
|
|
494
|
+
var _CardsWithButtonV = _interopRequireDefault(require("./components/ConstructorComponents/CardsWithButtonV2/CardsWithButtonV2"));
|
|
488
495
|
var _LogosStrip = _interopRequireDefault(require("./components/ConstructorComponents/LogosStrip/LogosStrip"));
|
|
489
496
|
var _ButtonBasic = _interopRequireDefault(require("./components/Buttons/ButtonBasic/ButtonBasic"));
|
|
490
497
|
var _ButtonBasicV = _interopRequireDefault(require("./components/Buttons/ButtonBasicV2/ButtonBasicV2"));
|