ecomlab-components-next 0.1.249 → 0.1.250

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.
@@ -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
+ }
@@ -24,6 +24,8 @@ 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"));
27
29
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
28
30
  var cards_list = [{
29
31
  sum: 'Аналитика повышает продажи',
@@ -159,6 +161,16 @@ var point_list = [{
159
161
  // выше в поисковой выдаче и попадут на специальные рекламные позиции.`,
160
162
  // },
161
163
  ];
164
+ var business_assistant_list = [{
165
+ title: 'Аналитика продаж',
166
+ description: 'Полный контроль над вашими продажами на всех маркетплейсах'
167
+ }, {
168
+ title: 'Автоответы на отзывы',
169
+ description: 'ИИ, шаблоны, вручную — для ответов на отзывы. Модерация перед отправкой'
170
+ }, {
171
+ title: 'Управление ценами',
172
+ description: 'Автоматический репрайсер для OZON, Wildberries и Яндекс Маркет'
173
+ }];
162
174
  var _default = exports["default"] = {
163
175
  title: 'MainContainerV2',
164
176
  component: _MainContainer["default"]
@@ -192,7 +204,14 @@ var MainContainerTest = exports.MainContainerTest = function MainContainerTest()
192
204
  list: steps
193
205
  }), /*#__PURE__*/_react["default"].createElement(_QuestionsV["default"], {
194
206
  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(_PointsListV["default"], {
207
+ }), /*#__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"], {
208
+ 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",
209
+ items: business_assistant_list,
210
+ btnText: "\u041F\u043E\u0434\u043A\u043B\u044E\u0447\u0438\u0442\u044C\u0441\u044F",
211
+ onBtnClick: function onBtnClick() {
212
+ return window.open('https://lk.ecomru.ru/auth', '_blank');
213
+ }
214
+ }), /*#__PURE__*/_react["default"].createElement(_PointsListV["default"], {
196
215
  list: point_list,
197
216
  title: 'Возможности нашего сервиса',
198
217
  className: 'max-items-3'
@@ -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() {
@@ -321,6 +327,12 @@ Object.defineProperty(exports, "SliderRange", {
321
327
  return _SliderRange["default"];
322
328
  }
323
329
  });
330
+ Object.defineProperty(exports, "SmartReplies", {
331
+ enumerable: true,
332
+ get: function get() {
333
+ return _SmartReplies["default"];
334
+ }
335
+ });
324
336
  Object.defineProperty(exports, "StatisticCard", {
325
337
  enumerable: true,
326
338
  get: function get() {
@@ -424,6 +436,8 @@ var _PointsList = _interopRequireDefault(require("./components/ConstructorCompon
424
436
  var _PointsListV = _interopRequireDefault(require("./components/ConstructorComponents/PointsListV2/PointsListV2"));
425
437
  var _Footer = _interopRequireDefault(require("./components/ConstructorComponents/Footer/Footer"));
426
438
  var _PagePreviews = _interopRequireDefault(require("./components/ConstructorComponents/PagePreviews/PagePreviews"));
439
+ var _SmartReplies = _interopRequireDefault(require("./components/ConstructorComponents/SmartReplies/SmartReplies"));
440
+ var _CardsWithButton = _interopRequireDefault(require("./components/ConstructorComponents/CardsWithButton/CardsWithButton"));
427
441
  var _ButtonBasic = _interopRequireDefault(require("./components/Buttons/ButtonBasic/ButtonBasic"));
428
442
  var _ButtonSignUp = _interopRequireDefault(require("./components/Buttons/ButtonSignUp/ButtonSignUp"));
429
443
  var _InputDinamycPlaceholder = _interopRequireDefault(require("./components/Inputs/InputDinamycPlaceholder/InputDinamycPlaceholder"));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ecomlab-components-next",
3
- "version": "0.1.249",
3
+ "version": "0.1.250",
4
4
  "description": "A set of common and reusable React components",
5
5
  "main": "dist/index.js",
6
6
  "files": [