ecomlab-components-next 0.1.249 → 0.1.251
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/CardsWithButton/CardsWithButton.js +43 -0
- package/dist/components/ConstructorComponents/CardsWithButton/CardsWithButton.scss +195 -0
- 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 +22 -2
- package/dist/components/ConstructorComponents/SmartReplies/SmartReplies.js +128 -0
- package/dist/components/ConstructorComponents/SmartReplies/SmartReplies.scss +270 -0
- package/dist/index.js +21 -0
- package/package.json +1 -1
|
@@ -0,0 +1,43 @@
|
|
|
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("./CardsWithButton.scss");
|
|
10
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
11
|
+
var CardsWithButton = function CardsWithButton(_ref) {
|
|
12
|
+
var title = _ref.title,
|
|
13
|
+
items = _ref.items,
|
|
14
|
+
_ref$btnText = _ref.btnText,
|
|
15
|
+
btnText = _ref$btnText === void 0 ? 'Подключиться' : _ref$btnText,
|
|
16
|
+
onBtnClick = _ref.onBtnClick;
|
|
17
|
+
return /*#__PURE__*/_react["default"].createElement("section", {
|
|
18
|
+
className: "cards-with-btn cards-with-btn--no-icons"
|
|
19
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
20
|
+
className: "cards-with-btn__inner"
|
|
21
|
+
}, title && /*#__PURE__*/_react["default"].createElement("h2", {
|
|
22
|
+
className: "cards-with-btn__title"
|
|
23
|
+
}, title), /*#__PURE__*/_react["default"].createElement("div", {
|
|
24
|
+
className: "cards-with-btn__content"
|
|
25
|
+
}, items === null || items === void 0 ? void 0 : items.map(function (_ref2, index) {
|
|
26
|
+
var title = _ref2.title,
|
|
27
|
+
description = _ref2.description;
|
|
28
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
29
|
+
className: "cards-with-btn__card",
|
|
30
|
+
key: index
|
|
31
|
+
}, /*#__PURE__*/_react["default"].createElement("h3", {
|
|
32
|
+
className: "cards-with-btn__card-title"
|
|
33
|
+
}, title), /*#__PURE__*/_react["default"].createElement("p", {
|
|
34
|
+
className: "cards-with-btn__card-description"
|
|
35
|
+
}, description), /*#__PURE__*/_react["default"].createElement("button", {
|
|
36
|
+
className: "cards-with-btn__card-btn",
|
|
37
|
+
onClick: function onClick() {
|
|
38
|
+
return onBtnClick === null || onBtnClick === void 0 ? void 0 : onBtnClick();
|
|
39
|
+
}
|
|
40
|
+
}, btnText, " \u2192"));
|
|
41
|
+
}))));
|
|
42
|
+
};
|
|
43
|
+
var _default = exports["default"] = CardsWithButton;
|
|
@@ -0,0 +1,195 @@
|
|
|
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
|
+
.cards-with-btn {
|
|
11
|
+
font-family: 'Manrope', sans-serif;
|
|
12
|
+
background: $bg;
|
|
13
|
+
width: 100%;
|
|
14
|
+
padding: 96px 48px;
|
|
15
|
+
|
|
16
|
+
&__inner {
|
|
17
|
+
max-width: 1280px;
|
|
18
|
+
margin: 0 auto;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&__title {
|
|
22
|
+
text-align: center;
|
|
23
|
+
font-size: 30px;
|
|
24
|
+
font-weight: 800;
|
|
25
|
+
letter-spacing: -0.5px;
|
|
26
|
+
color: $text;
|
|
27
|
+
margin: 0 0 56px 0;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&__content {
|
|
31
|
+
display: grid;
|
|
32
|
+
grid-template-columns: repeat(3, 1fr);
|
|
33
|
+
gap: 24px;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&__card {
|
|
37
|
+
background: $white;
|
|
38
|
+
border: 1px solid $border;
|
|
39
|
+
border-radius: 20px;
|
|
40
|
+
padding: 32px 28px;
|
|
41
|
+
display: flex;
|
|
42
|
+
flex-direction: column;
|
|
43
|
+
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
44
|
+
position: relative;
|
|
45
|
+
overflow: hidden;
|
|
46
|
+
|
|
47
|
+
&::before {
|
|
48
|
+
content: '';
|
|
49
|
+
position: absolute;
|
|
50
|
+
top: 0;
|
|
51
|
+
left: 0;
|
|
52
|
+
width: 4px;
|
|
53
|
+
height: 100%;
|
|
54
|
+
background: $green;
|
|
55
|
+
transition: width 0.3s ease;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
&:hover {
|
|
59
|
+
transform: translateY(-4px);
|
|
60
|
+
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
|
|
61
|
+
|
|
62
|
+
&::before {
|
|
63
|
+
width: 6px;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.cards-with-btn__card-btn {
|
|
67
|
+
gap: 8px;
|
|
68
|
+
color: $green-dark;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&__card-icon {
|
|
74
|
+
width: 56px;
|
|
75
|
+
height: 56px;
|
|
76
|
+
background: $green-light-bg;
|
|
77
|
+
border-radius: 14px;
|
|
78
|
+
display: flex;
|
|
79
|
+
align-items: center;
|
|
80
|
+
justify-content: center;
|
|
81
|
+
margin-bottom: 20px;
|
|
82
|
+
color: $green;
|
|
83
|
+
|
|
84
|
+
svg {
|
|
85
|
+
width: 28px;
|
|
86
|
+
height: 28px;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
&__card-title {
|
|
91
|
+
font-size: 18px;
|
|
92
|
+
font-weight: 700;
|
|
93
|
+
color: $text;
|
|
94
|
+
margin: 0 0 12px 0;
|
|
95
|
+
line-height: 1.4;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
&__card-description {
|
|
99
|
+
font-size: 14px;
|
|
100
|
+
color: $muted;
|
|
101
|
+
line-height: 1.6;
|
|
102
|
+
margin: 0 0 24px 0;
|
|
103
|
+
flex-grow: 1;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
&__card-btn {
|
|
107
|
+
background: none;
|
|
108
|
+
border: none;
|
|
109
|
+
padding: 0;
|
|
110
|
+
font-size: 14px;
|
|
111
|
+
font-weight: 600;
|
|
112
|
+
color: $green;
|
|
113
|
+
cursor: pointer;
|
|
114
|
+
font-family: inherit;
|
|
115
|
+
display: inline-flex;
|
|
116
|
+
align-items: center;
|
|
117
|
+
gap: 4px;
|
|
118
|
+
transition: gap 0.2s ease, color 0.2s ease;
|
|
119
|
+
width: fit-content;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// ========== МОБИЛЬНАЯ АДАПТАЦИЯ ==========
|
|
123
|
+
|
|
124
|
+
@media (max-width: 1024px) {
|
|
125
|
+
padding: 72px 32px;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
@media (max-width: 900px) {
|
|
129
|
+
&__content {
|
|
130
|
+
grid-template-columns: repeat(2, 1fr);
|
|
131
|
+
gap: 20px;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
@media (max-width: 768px) {
|
|
136
|
+
padding: 60px 24px;
|
|
137
|
+
|
|
138
|
+
&__title {
|
|
139
|
+
font-size: 26px;
|
|
140
|
+
margin-bottom: 40px;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
&__card {
|
|
144
|
+
padding: 24px 20px;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
&__card-icon {
|
|
148
|
+
width: 48px;
|
|
149
|
+
height: 48px;
|
|
150
|
+
|
|
151
|
+
svg {
|
|
152
|
+
width: 24px;
|
|
153
|
+
height: 24px;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
&__card-title {
|
|
158
|
+
font-size: 16px;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
@media (max-width: 600px) {
|
|
163
|
+
padding: 48px 20px;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
@media (max-width: 500px) {
|
|
167
|
+
padding: 48px 16px;
|
|
168
|
+
|
|
169
|
+
&__title {
|
|
170
|
+
font-size: 24px;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
&__content {
|
|
174
|
+
grid-template-columns: 1fr;
|
|
175
|
+
gap: 16px;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
&__card {
|
|
179
|
+
padding: 20px 16px;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
@media (max-width: 375px) {
|
|
184
|
+
padding: 36px 12px;
|
|
185
|
+
|
|
186
|
+
&__title {
|
|
187
|
+
font-size: 22px;
|
|
188
|
+
margin-bottom: 32px;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
&__card-description {
|
|
192
|
+
font-size: 13px;
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
}
|
|
@@ -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
|
+
}
|
|
@@ -24,6 +24,9 @@ var _MainContainer = _interopRequireDefault(require("./MainContainer"));
|
|
|
24
24
|
var _CardsServicesV = _interopRequireDefault(require("../CardsServicesV2/CardsServicesV2"));
|
|
25
25
|
var _PointsListV = _interopRequireDefault(require("../PointsListV2/PointsListV2"));
|
|
26
26
|
var _VideoBlockV = _interopRequireDefault(require("../VideoBlockV2/VideoBlockV2"));
|
|
27
|
+
var _SmartReplies = _interopRequireDefault(require("../SmartReplies/SmartReplies"));
|
|
28
|
+
var _CardsWithButton = _interopRequireDefault(require("../CardsWithButton/CardsWithButton"));
|
|
29
|
+
var _LogosStrip = _interopRequireDefault(require("../LogosStrip/LogosStrip"));
|
|
27
30
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
28
31
|
var cards_list = [{
|
|
29
32
|
sum: 'Аналитика повышает продажи',
|
|
@@ -159,6 +162,16 @@ var point_list = [{
|
|
|
159
162
|
// выше в поисковой выдаче и попадут на специальные рекламные позиции.`,
|
|
160
163
|
// },
|
|
161
164
|
];
|
|
165
|
+
var business_assistant_list = [{
|
|
166
|
+
title: 'Аналитика продаж',
|
|
167
|
+
description: 'Полный контроль над вашими продажами на всех маркетплейсах'
|
|
168
|
+
}, {
|
|
169
|
+
title: 'Автоответы на отзывы',
|
|
170
|
+
description: 'ИИ, шаблоны, вручную — для ответов на отзывы. Модерация перед отправкой'
|
|
171
|
+
}, {
|
|
172
|
+
title: 'Управление ценами',
|
|
173
|
+
description: 'Автоматический репрайсер для OZON, Wildberries и Яндекс Маркет'
|
|
174
|
+
}];
|
|
162
175
|
var _default = exports["default"] = {
|
|
163
176
|
title: 'MainContainerV2',
|
|
164
177
|
component: _MainContainer["default"]
|
|
@@ -192,11 +205,18 @@ var MainContainerTest = exports.MainContainerTest = function MainContainerTest()
|
|
|
192
205
|
list: steps
|
|
193
206
|
}), /*#__PURE__*/_react["default"].createElement(_QuestionsV["default"], {
|
|
194
207
|
list: questions_list
|
|
195
|
-
}), /*#__PURE__*/_react["default"].createElement(_ClientsAboutUsV["default"], null), /*#__PURE__*/_react["default"].createElement(_PhoneBlockV["default"], null), /*#__PURE__*/_react["default"].createElement(_FormV["default"], null), /*#__PURE__*/_react["default"].createElement(_ArticlesBlockV["default"], null), /*#__PURE__*/_react["default"].createElement(
|
|
208
|
+
}), /*#__PURE__*/_react["default"].createElement(_ClientsAboutUsV["default"], null), /*#__PURE__*/_react["default"].createElement(_PhoneBlockV["default"], null), /*#__PURE__*/_react["default"].createElement(_SmartReplies["default"], null), /*#__PURE__*/_react["default"].createElement(_FormV["default"], null), /*#__PURE__*/_react["default"].createElement(_ArticlesBlockV["default"], null), /*#__PURE__*/_react["default"].createElement(_CardsWithButton["default"], {
|
|
209
|
+
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",
|
|
210
|
+
items: business_assistant_list,
|
|
211
|
+
btnText: "\u041F\u043E\u0434\u043A\u043B\u044E\u0447\u0438\u0442\u044C\u0441\u044F",
|
|
212
|
+
onBtnClick: function onBtnClick() {
|
|
213
|
+
return window.open('https://lk.ecomru.ru/auth', '_blank');
|
|
214
|
+
}
|
|
215
|
+
}), /*#__PURE__*/_react["default"].createElement(_PointsListV["default"], {
|
|
196
216
|
list: point_list,
|
|
197
217
|
title: 'Возможности нашего сервиса',
|
|
198
218
|
className: 'max-items-3'
|
|
199
|
-
}), /*#__PURE__*/_react["default"].createElement(_VideoBlockV["default"], {
|
|
219
|
+
}), /*#__PURE__*/_react["default"].createElement(_LogosStrip["default"], null), /*#__PURE__*/_react["default"].createElement(_VideoBlockV["default"], {
|
|
200
220
|
src: "https://dl.ecomru.ru:9001/redactor-videos/ecomru_1.mp4"
|
|
201
221
|
}));
|
|
202
222
|
};
|
|
@@ -0,0 +1,128 @@
|
|
|
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
|
+
require("./SmartReplies.scss");
|
|
11
|
+
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); }
|
|
12
|
+
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; }
|
|
13
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
14
|
+
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."); }
|
|
15
|
+
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; } }
|
|
16
|
+
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; }
|
|
17
|
+
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; } }
|
|
18
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
19
|
+
var DEFAULT_LIST = [{
|
|
20
|
+
author_name: 'Александр Е.',
|
|
21
|
+
author_message: "\u041F\u043E\u043A\u0430 \u0441\u0443\u043F\u0435\u0440, \u0441\u0440\u0430\u0437\u0443 \u043E\u0431\u043D\u043E\u0432\u0438\u043B\u0438\u0441\u044C, \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043C \u043F\u043E\u0441\u043C\u043E\u0442\u0440\u0438\u043C. \n \u041F\u043E\u043B\u044C\u0437\u0443\u044E\u0441\u044C \u0443\u0436\u0435 \u0434\u0432\u0430 \u043C\u0435\u0441\u044F\u0446\u0430, \u0432\u0441\u0435 \u043E\u0442\u043B\u0438\u0447\u043D\u043E, \u043F\u0440\u0438\u043D\u0438\u043C\u0430\u044E \u0434\u0443\u0448 \u043D\u0435 \u0441\u043D\u0438\u043C\u0430\u044F",
|
|
22
|
+
product_name: 'Фитнес-браслет HUAWEI Band 8',
|
|
23
|
+
answer: "\u0421\u043F\u0430\u0441\u0438\u0431\u043E \u0412\u0430\u043C, \u0447\u0442\u043E \u043D\u0430\u0448\u043B\u0438 \u0432\u0440\u0435\u043C\u044F \u0438 \u043F\u043E\u0434\u0435\u043B\u0438\u043B\u0438\u0441\u044C \u0432\u043F\u0435\u0447\u0430\u0442\u043B\u0435\u043D\u0438\u0435\u043C \u043E \u0442\u043E\u0432\u0430\u0440\u0435. \u041D\u0430\u043C \u043F\u0440\u0438\u044F\u0442\u043D\u043E, \u0447\u0442\u043E \u0412\u044B \u043E\u0441\u0442\u0430\u043B\u0438\u0441\u044C \n \u0434\u043E\u0432\u043E\u043B\u044C\u043D\u044B \u043F\u043E\u043A\u0443\u043F\u043A\u043E\u0439. \u0411\u043B\u0430\u0433\u043E\u0434\u0430\u0440\u0438\u043C \u0437\u0430 \u0432\u044B\u0441\u043E\u043A\u0443\u044E \u043E\u0446\u0435\u043D\u043A\u0443! \u0416\u0435\u043B\u0430\u0435\u043C \u043F\u0440\u0438\u044F\u0442\u043D\u043E\u0439 \u044D\u043A\u0441\u043F\u043B\u0443\u0430\u0442\u0430\u0446\u0438\u0438!",
|
|
24
|
+
rating: 5
|
|
25
|
+
}, {
|
|
26
|
+
author_name: 'Олег П.',
|
|
27
|
+
author_message: "\u0425\u043E\u0440\u043E\u0448\u0438\u0439 \u0430\u043A\u043A\u0443\u043C\u0443\u043B\u044F\u0442\u043E\u0440. \u041F\u0440\u0438\u0448\u0451\u043B \u043F\u043E\u043B\u043D\u043E\u0441\u0442\u044C\u044E \u0437\u0430\u0440\u044F\u0436\u0435\u043D\u043D\u044B\u0439.",
|
|
28
|
+
product_name: 'Аккумуляторный слайдерный блок для дрели-шуруповерта Интерскол',
|
|
29
|
+
answer: "\u0414\u043E\u0431\u0440\u044B\u0439 \u0434\u0435\u043D\u044C, \u041E\u043B\u0435\u0433! \u0412\u044B\u0441\u043E\u043A\u043E \u043F\u0440\u0438\u0437\u043D\u0430\u0442\u0435\u043B\u044C\u043D\u044B \n \u0432\u0430\u043C \u0437\u0430 \u043F\u043E\u043A\u0443\u043F\u043A\u0443 \u0438 \u043F\u043E\u043B\u043E\u0436\u0438\u0442\u0435\u043B\u044C\u043D\u043E\u0435 \u043C\u043D\u0435\u043D\u0438\u0435! \u0416\u0435\u043B\u0430\u0435\u043C \u043F\u0440\u0438\u044F\u0442\u043D\u043E\u0439 \u044D\u043A\u0441\u043F\u043B\u0443\u0430\u0442\u0430\u0446\u0438\u0438.",
|
|
30
|
+
rating: 5
|
|
31
|
+
}, {
|
|
32
|
+
author_name: 'Шамиль М.',
|
|
33
|
+
author_message: "\u041A\u0443\u043F\u0438\u043B \u043C\u0430\u043C\u0435 \u0434\u043B\u044F \u0441\u0435\u0440\u0438\u0430\u043B\u043E\u0432. \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0443\u0434\u043E\u0431\u043D\u043E, \u043D\u0440\u0430\u0432\u0438\u0442\u0441\u044F",
|
|
34
|
+
product_name: 'Планшет Blackview Mega 1 11.5" 12/256Gb Purple, сиреневый',
|
|
35
|
+
answer: "\u0414\u043E\u0431\u0440\u044B\u0439 \u0434\u0435\u043D\u044C, \u0428\u0430\u043C\u0438\u043B\u044C! \u0411\u043B\u0430\u0433\u043E\u0434\u0430\u0440\u0438\u043C \u0437\u0430 \n \u0432\u044B\u0441\u043E\u043A\u0443\u044E \u043E\u0446\u0435\u043D\u043A\u0443! \u0416\u0435\u043B\u0430\u0435\u043C \u043F\u0440\u0438\u044F\u0442\u043D\u043E\u0439 \u044D\u043A\u0441\u043F\u043B\u0443\u0430\u0442\u0430\u0446\u0438\u0438.",
|
|
36
|
+
rating: 5
|
|
37
|
+
}, {
|
|
38
|
+
author_name: 'Владислав А.',
|
|
39
|
+
author_message: "\u0420\u0430\u0431\u043E\u0442\u0430\u0435\u0442. \u0421\u043E\u0433\u043B\u0430\u0441\u043D\u043E \u0445\u0430\u0440\u0430\u043A\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043A. \u0421\u043F\u0430\u0441\u0438\u0431\u043E.",
|
|
40
|
+
product_name: 'ADATA Оперативная память AX4U360016G18I-SB10 1x16 ГБ',
|
|
41
|
+
answer: "\u0412\u043B\u0430\u0434\u0438\u0441\u043B\u0430\u0432, \u0434\u043E\u0431\u0440\u044B\u0439 \u0434\u0435\u043D\u044C! \u0411\u043B\u0430\u0433\u043E\u0434\u0430\u0440\u0438\u043C \u0412\u0430\u0441 \u0437\u0430 \u043E\u0442\u043B\u0438\u0447\u043D\u044B\u0439 \u043E\u0442\u0437\u044B\u0432 \n \u0438 \u0432\u044B\u0441\u043E\u043A\u0443\u044E \u043E\u0446\u0435\u043D\u043A\u0443 \u043D\u0430\u0448\u0438\u0445 \u0442\u043E\u0432\u0430\u0440\u043E\u0432! \u041F\u0440\u0438\u044F\u0442\u043D\u043E\u0433\u043E \u0432\u0430\u043C \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F!",
|
|
42
|
+
rating: 5
|
|
43
|
+
}, {
|
|
44
|
+
author_name: 'Дмитрий Р.',
|
|
45
|
+
author_message: "\u041C\u0430\u0448\u0438\u043D\u043A\u0430 \u0446\u0435\u043B\u0430\u044F, \u0443\u0441\u0442\u0430\u043D\u043E\u0432\u043B\u044E \u0434\u043E\u043F\u043E\u043B\u043D\u044E.\u0423\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u043B\u0438 \u0441\u043F\u0443\u0441\u0442\u044F 4 \u043C\u0435\u0441\u044F\u0446\u0430. \u0412\u0441\u0451 \u0432 \u043D\u043E\u0440\u043C\u0435.",
|
|
46
|
+
product_name: 'Стиральная машина ATLANT CMA 70C107-000, белый',
|
|
47
|
+
answer: "\u0414\u043E\u0431\u0440\u044B\u0439 \u0434\u0435\u043D\u044C, \u0414\u043C\u0438\u0442\u0440\u0438\u0439! \u0411\u043B\u0430\u0433\u043E\u0434\u0430\u0440\u0438\u043C \u0437\u0430 \u0432\u044B\u0441\u043E\u043A\u0443\u044E \n \u043E\u0446\u0435\u043D\u043A\u0443! \u0416\u0435\u043B\u0430\u0435\u043C \u043F\u0440\u0438\u044F\u0442\u043D\u043E\u0439 \u044D\u043A\u0441\u043F\u043B\u0443\u0430\u0442\u0430\u0446\u0438\u0438.",
|
|
48
|
+
rating: 4
|
|
49
|
+
}, {
|
|
50
|
+
author_name: 'Ольга М.',
|
|
51
|
+
author_message: "\u041A\u0443\u043F\u0438\u043B\u0430 \u043C\u0443\u0436\u0443 \u0432 \u043F\u043E\u0434\u0430\u0440\u043E\u043A, \u043A\u043E\u0444\u0435\u043C\u0430\u0448\u0438\u043D\u0430 \u043F\u043E\u043D\u0440\u0430\u0432\u0438\u043B\u0430\u0441\u044C, \u0431\u044B\u0441\u0442\u0440\u043E \u0440\u0430\u0437\u043E\u0431\u0440\u0430\u043B\u0438\u0441\u044C, \u043A\u043E\u0444\u0435 \n \u043F\u043E\u043B\u0443\u0447\u0430\u0435\u0442\u0441\u044F \u0432\u043A\u0443\u0441\u043D\u043E\u0435, \u043D\u0430\u0441\u044B\u0449\u0435\u043D\u043D\u043E\u0435. \u041F\u043E\u0441\u043B\u0435 \u0433\u043E\u0434\u0430 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F \u0432\u0441\u0451 \u0445\u043E\u0440\u043E\u0448\u043E \u0440\u0430\u0431\u043E\u0442\u0430\u0435\u0442.",
|
|
52
|
+
product_name: 'Кофемашина автоматическая THOMSON CF20M01',
|
|
53
|
+
answer: "\u041E\u043B\u044C\u0433\u0430, \u0434\u043E\u0431\u0440\u044B\u0439 \u0434\u0435\u043D\u044C! \u0411\u043B\u0430\u0433\u043E\u0434\u0430\u0440\u0438\u043C \u0437\u0430 \u0432\u044B\u0441\u043E\u043A\u0443\u044E \u043E\u0446\u0435\u043D\u043A\u0443! \u0416\u0435\u043B\u0430\u0435\u043C \u043F\u0440\u0438\u044F\u0442\u043D\u043E\u0439 \u044D\u043A\u0441\u043F\u043B\u0443\u0430\u0442\u0430\u0446\u0438\u0438.",
|
|
54
|
+
rating: 5
|
|
55
|
+
}];
|
|
56
|
+
|
|
57
|
+
// Градиенты для аватарок как в референсе
|
|
58
|
+
var avatarGradients = ['linear-gradient(135deg, #6B5CE7, #9B5DFF)',
|
|
59
|
+
// фиолетовый
|
|
60
|
+
'linear-gradient(135deg, #EC4899, #F97316)',
|
|
61
|
+
// розово-оранжевый
|
|
62
|
+
'linear-gradient(135deg, #22C55E, #0EA5E9)',
|
|
63
|
+
// зелено-голубой
|
|
64
|
+
'linear-gradient(135deg, #F59E0B, #EF4444)',
|
|
65
|
+
// оранжево-красный
|
|
66
|
+
'linear-gradient(135deg, #8B5CF6, #3B82F6)',
|
|
67
|
+
// фиолетово-синий
|
|
68
|
+
'linear-gradient(135deg, #06B6D4, #6B5CE7)' // голубо-фиолетовый
|
|
69
|
+
];
|
|
70
|
+
var SmartReplies = function SmartReplies(_ref) {
|
|
71
|
+
var title = _ref.title,
|
|
72
|
+
_ref$reviews = _ref.reviews,
|
|
73
|
+
reviews = _ref$reviews === void 0 ? DEFAULT_LIST : _ref$reviews;
|
|
74
|
+
var _useState = (0, _react.useState)(2),
|
|
75
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
76
|
+
visibleCount = _useState2[0],
|
|
77
|
+
setVisibleCount = _useState2[1];
|
|
78
|
+
var showMore = function showMore() {
|
|
79
|
+
setVisibleCount(reviews.length);
|
|
80
|
+
};
|
|
81
|
+
var visibleReviews = reviews.slice(0, visibleCount);
|
|
82
|
+
return /*#__PURE__*/_react["default"].createElement("section", {
|
|
83
|
+
className: "smart-replies"
|
|
84
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
85
|
+
className: "smart-replies__inner"
|
|
86
|
+
}, /*#__PURE__*/_react["default"].createElement("h2", {
|
|
87
|
+
className: "smart-replies__title"
|
|
88
|
+
}, title || 'Умные ответы на отзывы от ИИ'), /*#__PURE__*/_react["default"].createElement("p", {
|
|
89
|
+
className: "smart-replies__subtitle"
|
|
90
|
+
}, "\u0418\u0418, \u0448\u0430\u0431\u043B\u043E\u043D\u044B, \u0432\u0440\u0443\u0447\u043D\u0443\u044E \u2014 \u0434\u043B\u044F \u043E\u0442\u0432\u0435\u0442\u043E\u0432 \u043D\u0430 \u043E\u0442\u0437\u044B\u0432\u044B. \u041E\u0442\u0432\u0435\u0442\u044B \u043D\u0430 \u0432\u043E\u043F\u0440\u043E\u0441\u044B. \u041C\u043E\u0434\u0435\u0440\u0430\u0446\u0438\u044F \u043F\u0435\u0440\u0435\u0434 \u043E\u0442\u043F\u0440\u0430\u0432\u043A\u043E\u0439"), /*#__PURE__*/_react["default"].createElement("div", {
|
|
91
|
+
className: "smart-replies__grid"
|
|
92
|
+
}, visibleReviews === null || visibleReviews === void 0 ? void 0 : visibleReviews.map(function (review, idx) {
|
|
93
|
+
var _review$author_name;
|
|
94
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
95
|
+
className: "smart-replies__card",
|
|
96
|
+
key: idx
|
|
97
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
98
|
+
className: "smart-replies__card-header"
|
|
99
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
100
|
+
className: "smart-replies__user"
|
|
101
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
102
|
+
className: "smart-replies__avatar",
|
|
103
|
+
style: {
|
|
104
|
+
background: avatarGradients[idx % avatarGradients.length]
|
|
105
|
+
}
|
|
106
|
+
}, ((_review$author_name = review.author_name) === null || _review$author_name === void 0 ? void 0 : _review$author_name[0]) || 'А'), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
|
|
107
|
+
className: "smart-replies__user-name"
|
|
108
|
+
}, review.author_name), /*#__PURE__*/_react["default"].createElement("div", {
|
|
109
|
+
className: "smart-replies__product-name"
|
|
110
|
+
}, review.product_name))), /*#__PURE__*/_react["default"].createElement("div", {
|
|
111
|
+
className: "smart-replies__stars"
|
|
112
|
+
}, '★'.repeat(review.rating), '☆'.repeat(5 - review.rating))), /*#__PURE__*/_react["default"].createElement("div", {
|
|
113
|
+
className: "smart-replies__user-review"
|
|
114
|
+
}, /*#__PURE__*/_react["default"].createElement("p", null, review.author_message)), /*#__PURE__*/_react["default"].createElement("div", {
|
|
115
|
+
className: "smart-replies__ai-block"
|
|
116
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
117
|
+
className: "smart-replies__ai-badge"
|
|
118
|
+
}, /*#__PURE__*/_react["default"].createElement("span", null, "\u0418\u0418 \u043E\u0442\u0432\u0435\u0442")), /*#__PURE__*/_react["default"].createElement("div", {
|
|
119
|
+
className: "smart-replies__ai-reply"
|
|
120
|
+
}, /*#__PURE__*/_react["default"].createElement("p", null, review.answer))));
|
|
121
|
+
})), reviews.length > 2 && visibleCount < reviews.length && /*#__PURE__*/_react["default"].createElement("div", {
|
|
122
|
+
className: "smart-replies__show-more"
|
|
123
|
+
}, /*#__PURE__*/_react["default"].createElement("button", {
|
|
124
|
+
className: "smart-replies__show-more-btn",
|
|
125
|
+
onClick: showMore
|
|
126
|
+
}, "\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0435\u0449\u0435"))));
|
|
127
|
+
};
|
|
128
|
+
var _default = exports["default"] = SmartReplies;
|
|
@@ -0,0 +1,270 @@
|
|
|
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
|
+
.smart-replies {
|
|
11
|
+
font-family: 'Manrope', sans-serif;
|
|
12
|
+
background: $white;
|
|
13
|
+
width: 100%;
|
|
14
|
+
padding: 96px 48px;
|
|
15
|
+
|
|
16
|
+
&__inner {
|
|
17
|
+
max-width: 1280px;
|
|
18
|
+
margin: 0 auto;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&__title {
|
|
22
|
+
text-align: center;
|
|
23
|
+
font-size: 30px;
|
|
24
|
+
font-weight: 800;
|
|
25
|
+
letter-spacing: -0.5px;
|
|
26
|
+
color: $text;
|
|
27
|
+
margin: 0 0 8px 0;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&__subtitle {
|
|
31
|
+
text-align: center;
|
|
32
|
+
font-size: 15px;
|
|
33
|
+
color: $muted;
|
|
34
|
+
line-height: 1.5;
|
|
35
|
+
max-width: 640px;
|
|
36
|
+
margin: 0 auto 48px auto;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&__grid {
|
|
40
|
+
display: grid;
|
|
41
|
+
grid-template-columns: repeat(2, 1fr);
|
|
42
|
+
gap: 24px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&__card {
|
|
46
|
+
background: $bg;
|
|
47
|
+
border: 1px solid $border;
|
|
48
|
+
border-radius: 20px;
|
|
49
|
+
padding: 24px;
|
|
50
|
+
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
51
|
+
position: relative;
|
|
52
|
+
overflow: hidden;
|
|
53
|
+
|
|
54
|
+
&::before {
|
|
55
|
+
content: '';
|
|
56
|
+
position: absolute;
|
|
57
|
+
top: 0;
|
|
58
|
+
left: 0;
|
|
59
|
+
width: 4px;
|
|
60
|
+
height: 100%;
|
|
61
|
+
background: $green-forest;
|
|
62
|
+
transition: width 0.3s ease;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
&:hover {
|
|
66
|
+
transform: translateY(-4px);
|
|
67
|
+
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
|
|
68
|
+
|
|
69
|
+
&::before {
|
|
70
|
+
width: 6px;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&__card-header {
|
|
76
|
+
display: flex;
|
|
77
|
+
justify-content: space-between;
|
|
78
|
+
align-items: flex-start;
|
|
79
|
+
margin-bottom: 16px;
|
|
80
|
+
flex-wrap: wrap;
|
|
81
|
+
gap: 12px;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
&__user {
|
|
85
|
+
display: flex;
|
|
86
|
+
gap: 12px;
|
|
87
|
+
align-items: center;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
&__avatar {
|
|
91
|
+
width: 40px;
|
|
92
|
+
height: 40px;
|
|
93
|
+
border-radius: 50%;
|
|
94
|
+
display: flex;
|
|
95
|
+
align-items: center;
|
|
96
|
+
justify-content: center;
|
|
97
|
+
font-size: 16px;
|
|
98
|
+
font-weight: 700;
|
|
99
|
+
color: $white;
|
|
100
|
+
flex-shrink: 0;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&__user-name {
|
|
104
|
+
font-weight: 700;
|
|
105
|
+
font-size: 14px;
|
|
106
|
+
color: $text;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
&__product-name {
|
|
110
|
+
font-size: 12px;
|
|
111
|
+
color: $muted;
|
|
112
|
+
margin-top: 2px;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
&__stars {
|
|
116
|
+
color: #F59E0B;
|
|
117
|
+
font-size: 14px;
|
|
118
|
+
letter-spacing: 2px;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
&__user-review {
|
|
122
|
+
background: $white;
|
|
123
|
+
border-radius: 12px;
|
|
124
|
+
padding: 16px;
|
|
125
|
+
margin-bottom: 16px;
|
|
126
|
+
border: 1px solid $border;
|
|
127
|
+
|
|
128
|
+
p {
|
|
129
|
+
font-size: 14px;
|
|
130
|
+
color: $text;
|
|
131
|
+
line-height: 1.6;
|
|
132
|
+
margin: 0;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
&__ai-block {
|
|
137
|
+
background: $green-light-bg;
|
|
138
|
+
border-radius: 12px;
|
|
139
|
+
padding: 16px;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
&__ai-badge {
|
|
143
|
+
display: inline-flex;
|
|
144
|
+
align-items: center;
|
|
145
|
+
background: $green;
|
|
146
|
+
color: $white;
|
|
147
|
+
padding: 4px 12px;
|
|
148
|
+
border-radius: 20px;
|
|
149
|
+
font-size: 12px;
|
|
150
|
+
font-weight: 600;
|
|
151
|
+
margin-bottom: 12px;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
&__ai-reply {
|
|
155
|
+
p {
|
|
156
|
+
font-size: 14px;
|
|
157
|
+
color: $text;
|
|
158
|
+
line-height: 1.6;
|
|
159
|
+
margin: 0;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
&__show-more {
|
|
164
|
+
text-align: center;
|
|
165
|
+
margin-top: 48px;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
&__show-more-btn {
|
|
169
|
+
background: none;
|
|
170
|
+
border: 1.5px solid $border;
|
|
171
|
+
padding: 12px 32px;
|
|
172
|
+
border-radius: 10px;
|
|
173
|
+
font-size: 15px;
|
|
174
|
+
font-weight: 600;
|
|
175
|
+
color: $text;
|
|
176
|
+
cursor: pointer;
|
|
177
|
+
font-family: inherit;
|
|
178
|
+
transition: all 0.2s;
|
|
179
|
+
|
|
180
|
+
&:hover {
|
|
181
|
+
border-color: $green;
|
|
182
|
+
color: $green;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
// ========== МОБИЛЬНАЯ АДАПТАЦИЯ ==========
|
|
187
|
+
|
|
188
|
+
@media (max-width: 1024px) {
|
|
189
|
+
padding: 72px 32px;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
@media (max-width: 900px) {
|
|
193
|
+
&__grid {
|
|
194
|
+
grid-template-columns: 1fr;
|
|
195
|
+
gap: 20px;
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
@media (max-width: 768px) {
|
|
200
|
+
padding: 60px 24px;
|
|
201
|
+
|
|
202
|
+
&__title {
|
|
203
|
+
font-size: 26px;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
&__subtitle {
|
|
207
|
+
font-size: 14px;
|
|
208
|
+
margin-bottom: 40px;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
&__card {
|
|
212
|
+
padding: 20px;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
&__show-more {
|
|
216
|
+
margin-top: 40px;
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
@media (max-width: 600px) {
|
|
221
|
+
padding: 48px 20px;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
@media (max-width: 500px) {
|
|
225
|
+
padding: 48px 16px;
|
|
226
|
+
|
|
227
|
+
&__title {
|
|
228
|
+
font-size: 24px;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
&__subtitle {
|
|
232
|
+
font-size: 13px;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
&__card-header {
|
|
236
|
+
flex-direction: column;
|
|
237
|
+
align-items: flex-start;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
&__show-more-btn {
|
|
241
|
+
padding: 10px 24px;
|
|
242
|
+
font-size: 14px;
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
@media (max-width: 375px) {
|
|
247
|
+
padding: 36px 12px;
|
|
248
|
+
|
|
249
|
+
&__title {
|
|
250
|
+
font-size: 22px;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
&__subtitle {
|
|
254
|
+
font-size: 12px;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
&__card {
|
|
258
|
+
padding: 16px;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
&__user-review p,
|
|
262
|
+
&__ai-reply p {
|
|
263
|
+
font-size: 13px;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
&__show-more {
|
|
267
|
+
margin-top: 32px;
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
}
|
package/dist/index.js
CHANGED
|
@@ -93,6 +93,12 @@ Object.defineProperty(exports, "CardsV2", {
|
|
|
93
93
|
return _CardsV["default"];
|
|
94
94
|
}
|
|
95
95
|
});
|
|
96
|
+
Object.defineProperty(exports, "CardsWithButton", {
|
|
97
|
+
enumerable: true,
|
|
98
|
+
get: function get() {
|
|
99
|
+
return _CardsWithButton["default"];
|
|
100
|
+
}
|
|
101
|
+
});
|
|
96
102
|
Object.defineProperty(exports, "Carousel", {
|
|
97
103
|
enumerable: true,
|
|
98
104
|
get: function get() {
|
|
@@ -201,6 +207,12 @@ Object.defineProperty(exports, "LogoBox", {
|
|
|
201
207
|
return _Logo["default"];
|
|
202
208
|
}
|
|
203
209
|
});
|
|
210
|
+
Object.defineProperty(exports, "LogosStrip", {
|
|
211
|
+
enumerable: true,
|
|
212
|
+
get: function get() {
|
|
213
|
+
return _LogosStrip["default"];
|
|
214
|
+
}
|
|
215
|
+
});
|
|
204
216
|
Object.defineProperty(exports, "LongTileArticleBox", {
|
|
205
217
|
enumerable: true,
|
|
206
218
|
get: function get() {
|
|
@@ -321,6 +333,12 @@ Object.defineProperty(exports, "SliderRange", {
|
|
|
321
333
|
return _SliderRange["default"];
|
|
322
334
|
}
|
|
323
335
|
});
|
|
336
|
+
Object.defineProperty(exports, "SmartReplies", {
|
|
337
|
+
enumerable: true,
|
|
338
|
+
get: function get() {
|
|
339
|
+
return _SmartReplies["default"];
|
|
340
|
+
}
|
|
341
|
+
});
|
|
324
342
|
Object.defineProperty(exports, "StatisticCard", {
|
|
325
343
|
enumerable: true,
|
|
326
344
|
get: function get() {
|
|
@@ -424,6 +442,9 @@ var _PointsList = _interopRequireDefault(require("./components/ConstructorCompon
|
|
|
424
442
|
var _PointsListV = _interopRequireDefault(require("./components/ConstructorComponents/PointsListV2/PointsListV2"));
|
|
425
443
|
var _Footer = _interopRequireDefault(require("./components/ConstructorComponents/Footer/Footer"));
|
|
426
444
|
var _PagePreviews = _interopRequireDefault(require("./components/ConstructorComponents/PagePreviews/PagePreviews"));
|
|
445
|
+
var _SmartReplies = _interopRequireDefault(require("./components/ConstructorComponents/SmartReplies/SmartReplies"));
|
|
446
|
+
var _CardsWithButton = _interopRequireDefault(require("./components/ConstructorComponents/CardsWithButton/CardsWithButton"));
|
|
447
|
+
var _LogosStrip = _interopRequireDefault(require("./components/ConstructorComponents/LogosStrip/LogosStrip"));
|
|
427
448
|
var _ButtonBasic = _interopRequireDefault(require("./components/Buttons/ButtonBasic/ButtonBasic"));
|
|
428
449
|
var _ButtonSignUp = _interopRequireDefault(require("./components/Buttons/ButtonSignUp/ButtonSignUp"));
|
|
429
450
|
var _InputDinamycPlaceholder = _interopRequireDefault(require("./components/Inputs/InputDinamycPlaceholder/InputDinamycPlaceholder"));
|