ecomlab-components-next 0.1.288 → 0.1.290

package/dist/components/ConstructorComponents/MainContainer/MainContainerV2.stories.js

@@ -18,6 +18,7 @@ var _StatisticCardV = _interopRequireDefault(require("../StatisticCardV2/Statist
 var _PhoneBlockV = _interopRequireDefault(require("../PhoneBlockV2/PhoneBlockV2"));
 var _ClientsAboutUsV = _interopRequireDefault(require("../ClientsAboutUsV2/ClientsAboutUsV2"));
 var _TariffPlan = _interopRequireDefault(require("../Tariff/TariffPlan"));
+var _TariffPlanV = _interopRequireDefault(require("../TariffPlanV2/TariffPlanV2"));
 var _image = _interopRequireDefault(require("next/image"));
 var _ArticlesBlockV = _interopRequireDefault(require("../ArticlesBlockV2/ArticlesBlockV2"));
 var _MainContainer = _interopRequireDefault(require("./MainContainer"));
@@ -191,7 +192,7 @@ var MainContainerTest = exports.MainContainerTest = function MainContainerTest()
     }, "\u0435\u0434\u0438\u043D\u043E\u0439 \u043F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u044B")),
     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"),
     color: "#00B45E"
-  }), /*#__PURE__*/_react["default"].createElement(_MarqueImgsV["default"], null), /*#__PURE__*/_react["default"].createElement(_BlocksInfoV["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(_TariffPlanV["default"], null), /*#__PURE__*/_react["default"].createElement(_MarqueImgsV["default"], null), /*#__PURE__*/_react["default"].createElement(_BlocksInfoV["default"], {
     title: "\u0412\u043E\u0437\u043C\u043E\u0436\u043D\u043E\u0441\u0442\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u0430",
     list: possibilities_list
   }), /*#__PURE__*/_react["default"].createElement(_CardsServicesV["default"], null), /*#__PURE__*/_react["default"].createElement(_CardsV["default"], null), /*#__PURE__*/_react["default"].createElement(_FeaturesGridV["default"], {

package/dist/components/ConstructorComponents/TariffPlanV2/TariffPlanV2.js

@@ -0,0 +1,327 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ButtonBasicV = _interopRequireDefault(require("../../Buttons/ButtonBasicV2/ButtonBasicV2"));
+var _useReveal = _interopRequireDefault(require("@/common/hooks/useReveal"));
+require("./TariffPlanV2.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+// ─── SVG Icons ────────────────────────────────────────────────────────────────
+var IconRocket = function IconRocket() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    viewBox: "0 0 48 48",
+    fill: "#fff",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M24 6C24 6 14 14 14 26C14 30.418 17.582 34 22 34H26C30.418 34 34 30.418 34 26C34 14 24 6 24 6Z",
+    fill: "#fff",
+    fillOpacity: "0.15",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_react["default"].createElement("circle", {
+    cx: "24",
+    cy: "23",
+    r: "3.5",
+    stroke: "currentColor",
+    strokeWidth: "2"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M14 28L10 36L17 33",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M34 28L38 36L31 33",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M20 34C20 36 21.5 38 24 38C26.5 38 28 36 28 34",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }));
+};
+var IconBarChart = function IconBarChart() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    viewBox: "0 0 36 36",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "6",
+    y: "20",
+    width: "6",
+    height: "10",
+    rx: "2",
+    fill: "currentColor",
+    opacity: "0.25"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "15",
+    y: "13",
+    width: "6",
+    height: "17",
+    rx: "2",
+    fill: "currentColor",
+    opacity: "0.45"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "24",
+    y: "6",
+    width: "6",
+    height: "24",
+    rx: "2",
+    fill: "currentColor"
+  }));
+};
+var IconCrown = function IconCrown() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    viewBox: "0 0 36 36",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M6 26h24M6 26L9 14l7 6 2-8 2 8 7-6 3 12",
+    stroke: "currentColor",
+    strokeWidth: "1.8",
+    strokeLinejoin: "round",
+    strokeLinecap: "round"
+  }), /*#__PURE__*/_react["default"].createElement("circle", {
+    cx: "9",
+    cy: "13",
+    r: "2",
+    fill: "currentColor"
+  }), /*#__PURE__*/_react["default"].createElement("circle", {
+    cx: "27",
+    cy: "13",
+    r: "2",
+    fill: "currentColor"
+  }), /*#__PURE__*/_react["default"].createElement("circle", {
+    cx: "18",
+    cy: "6",
+    r: "2",
+    fill: "currentColor"
+  }));
+};
+var IconBolt = function IconBolt() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    viewBox: "0 0 48 48",
+    fill: "#fff",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M28 4L12 26H24L20 44L40 22H28L28 4Z",
+    fill: "#fff",
+    fillOpacity: "0.18",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinejoin: "round",
+    strokeLinecap: "round"
+  }));
+};
+var IconDiamond = function IconDiamond() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    viewBox: "0 0 48 48",
+    fill: "#fff",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M24 4L6 18L24 44L42 18L24 4Z",
+    fill: "#fff",
+    fillOpacity: "0.12",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M6 18L15 18L24 4",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M42 18L33 18L24 4",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_react["default"].createElement("line", {
+    x1: "6",
+    y1: "18",
+    x2: "42",
+    y2: "18",
+    stroke: "currentColor",
+    strokeWidth: "2"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M15 18L24 44",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeOpacity: "0.5"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M33 18L24 44",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeOpacity: "0.5"
+  }));
+};
+var CheckIcon = function CheckIcon() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    className: "tariff-card__feature-icon",
+    viewBox: "0 0 15 15",
+    fill: "none"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M3 7.5l3 3 6-6",
+    stroke: "currentColor",
+    strokeWidth: "1.8",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+
+// ─── Plan data ────────────────────────────────────────────────────────────────
+var PLANS = [{
+  id: 'free',
+  icon: /*#__PURE__*/_react["default"].createElement(IconRocket, null),
+  gmv: 'До 1 млн ₽',
+  gmvLabel: 'GMV за предыдущий месяц',
+  price: '0 ₽',
+  priceVariant: 'free',
+  periodLabel: 'Бесплатно',
+  periodAccent: true,
+  features: ['Все основные сервисы', 'Аналитика', 'Управление товарами', 'Репрайсер', 'Работа с отзывами', 'Поддержка'],
+  cta: 'Начать бесплатно',
+  ctaFilled: false,
+  popular: false
+}, {
+  id: 'starter',
+  icon: /*#__PURE__*/_react["default"].createElement(IconBarChart, null),
+  gmv: '1 – 5 млн ₽',
+  gmvLabel: 'GMV за предыдущий месяц',
+  price: '2 990 ₽',
+  priceVariant: 'default',
+  periodLabel: 'в месяц',
+  periodAccent: false,
+  features: ['Все из тарифа бесплатно', 'Расширенная аналитика', 'Репрайсер', 'Работа с отзывами', 'Управление рекламой', 'Приоритетная поддержка'],
+  cta: 'Выбрать тариф',
+  ctaFilled: false,
+  popular: false
+}, {
+  id: 'growth',
+  icon: /*#__PURE__*/_react["default"].createElement(IconCrown, null),
+  gmv: '5 – 20 млн ₽',
+  gmvLabel: 'GMV за предыдущий месяц',
+  price: '6 990 ₽',
+  priceVariant: 'default',
+  periodLabel: 'в месяц',
+  periodAccent: false,
+  features: ['Все из тарифа 1–5 млн ₽', 'AI-инструменты', 'PIM и автоматизация', 'CRM и задачи', 'Массовые операции', 'Расширенные отчёты'],
+  cta: 'Выбрать тариф',
+  ctaFilled: true,
+  popular: true
+}, {
+  id: 'scale',
+  icon: /*#__PURE__*/_react["default"].createElement(IconBolt, null),
+  gmv: '20+ млн ₽',
+  gmvLabel: 'GMV за предыдущий месяц',
+  price: '14 990 ₽',
+  priceVariant: 'default',
+  periodLabel: 'в месяц',
+  periodAccent: false,
+  features: ['Все из тарифа 5–20 млн ₽', 'Несколько пользователей', 'Роли и права доступа', 'API и интеграции', 'Персональный менеджер', 'Приоритетная поддержка'],
+  cta: 'Выбрать тариф',
+  ctaFilled: false,
+  popular: false
+}, {
+  id: 'enterprise',
+  icon: /*#__PURE__*/_react["default"].createElement(IconDiamond, null),
+  gmv: '50+ млн ₽',
+  gmvLabel: 'GMV за предыдущий месяц',
+  price: 'Индивидуально',
+  priceVariant: 'custom',
+  periodLabel: 'в месяц',
+  periodAccent: false,
+  features: ['Индивидуальные условия', 'Персональный менеджер', 'Внедрение и обучение', 'Интеграции и API', 'SLA и приоритетная поддержка'],
+  cta: 'Связаться с нами',
+  ctaFilled: false,
+  popular: false
+}];
+
+// ─── TariffCard ───────────────────────────────────────────────────────────────
+var TariffCard = function TariffCard(_ref) {
+  var plan = _ref.plan,
+    onCtaClick = _ref.onCtaClick;
+  (0, _useReveal["default"])();
+  var cardCls = ['tariff-card', plan.popular ? 'tariff-card_popular' : ''].filter(Boolean).join(' ');
+  var priceCls = ['tariff-card__price', plan.priceVariant === 'free' ? 'tariff-card__price_free' : '', plan.priceVariant === 'custom' ? 'tariff-card__price_custom' : ''].filter(Boolean).join(' ');
+  var periodCls = ['tariff-card__price-period', plan.periodAccent ? 'tariff-card__price-period_accent' : ''].filter(Boolean).join(' ');
+  var ctaCls = ['tariff-card__cta', plan.ctaFilled ? 'tariff-card__cta_filled' : ''].filter(Boolean).join(' ');
+  return /*#__PURE__*/_react["default"].createElement("article", {
+    className: "".concat(cardCls, " reveal")
+  }, plan.popular && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tariff-card__badge"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "tariff-card__badge-star"
+  }, "\u2605"), "\u041F\u043E\u043F\u0443\u043B\u044F\u0440\u043D\u044B\u0439"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tariff-card__icon"
+  }, plan.icon), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "tariff-card__gmv"
+  }, plan.gmv), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "tariff-card__gmv-label"
+  }, plan.gmvLabel), /*#__PURE__*/_react["default"].createElement("p", {
+    className: priceCls
+  }, plan.price), /*#__PURE__*/_react["default"].createElement("p", {
+    className: periodCls
+  }, plan.periodLabel), /*#__PURE__*/_react["default"].createElement("ul", {
+    className: "tariff-card__features"
+  }, plan.features.map(function (feat) {
+    return /*#__PURE__*/_react["default"].createElement("li", {
+      key: feat,
+      className: "tariff-card__feature"
+    }, /*#__PURE__*/_react["default"].createElement(CheckIcon, null), feat);
+  })), /*#__PURE__*/_react["default"].createElement(_ButtonBasicV["default"], {
+    green: true,
+    width: "100%",
+    onClick: function onClick() {
+      return onCtaClick === null || onCtaClick === void 0 ? void 0 : onCtaClick(plan);
+    },
+    text: plan.cta
+  }));
+};
+
+// ─── TariffPlanV2 ─────────────────────────────────────────────────────────────
+/**
+ * @param {{
+ *   title?: string,
+ *   description?: string,
+ *   onCtaClick?: (plan: object) => void
+ * }} props
+ */
+var TariffPlanV2 = function TariffPlanV2(_ref2) {
+  var _ref2$title = _ref2.title,
+    title = _ref2$title === void 0 ? 'Тарифы по обороту' : _ref2$title,
+    _ref2$description = _ref2.description,
+    description = _ref2$description === void 0 ? 'Платите только за результат. Выбирайте тариф в зависимости от оборота вашего магазина за предыдущий месяц.' : _ref2$description,
+    _ref2$onCtaClick = _ref2.onCtaClick,
+    onCtaClick = _ref2$onCtaClick === void 0 ? function () {
+      var _window;
+      (_window = window) === null || _window === void 0 || _window.open("https://lk.ecomru.ru/settings/tariff", '_blunk');
+    } : _ref2$onCtaClick;
+  return /*#__PURE__*/_react["default"].createElement("section", {
+    className: "tariff-plan"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tariff-plan__inner"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tariff-plan__header"
+  }, title && /*#__PURE__*/_react["default"].createElement("h2", {
+    className: "tariff-plan__title reveal"
+  }, title), description && /*#__PURE__*/_react["default"].createElement("p", {
+    className: "tariff-plan__subtitle reveal"
+  }, description)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tariff-plan__grid"
+  }, PLANS.map(function (plan) {
+    return /*#__PURE__*/_react["default"].createElement(TariffCard, {
+      key: plan.id,
+      plan: plan,
+      onCtaClick: onCtaClick
+    });
+  }))));
+};
+var _default = exports["default"] = /*#__PURE__*/_react["default"].memo(TariffPlanV2);

package/dist/components/ConstructorComponents/TariffPlanV2/TariffPlanV2.scss

@@ -0,0 +1,301 @@
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
+@import '../variables.scss';
+
+// ─── tariff-plan ─────────────────────────────────────────────────────────────
+.tariff-plan {
+    font-family: 'Manrope', sans-serif;
+    background: $white;
+    width: 100%;
+    padding: 96px 40px;
+
+    * {
+        font-family: 'Manrope', sans-serif !important;
+    }
+
+    &__inner {
+        max-width: 1280px;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        gap: 56px;
+    }
+
+    &__header {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+        gap: 12px;
+    }
+
+    &__title {
+        font-size: 30px;
+        font-weight: 800;
+        letter-spacing: -0.5px;
+        color: $text;
+        margin: 0;
+        line-height: 1.15;
+    }
+
+    &__subtitle {
+        font-size: 15px;
+        color: $muted;
+        line-height: 1.65;
+        max-width: 440px;
+        text-align: center;
+    }
+
+    &__grid {
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
+        gap: 24px;
+        align-items: stretch;
+    }
+}
+
+// ─── tariff-card ─────────────────────────────────────────────────────────────
+.tariff-card {
+    position: relative;
+    background: $white;
+    border: 1px solid $border;
+    border-radius: 20px;
+    padding: 28px 20px 24px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    transition: transform 0.2s, box-shadow 0.2s;
+
+    &:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
+    }
+
+    &_popular {
+        border-color: $green;
+        box-shadow: 0 4px 24px rgba(5, 150, 105, 0.15);
+
+        &:hover {
+            box-shadow: 0 12px 40px rgba(5, 150, 105, 0.22);
+        }
+    }
+
+    &__badge {
+        position: absolute;
+        top: -1px;
+        left: 50%;
+        transform: translateX(-50%);
+        background: $green;
+        color: $white;
+        font-size: 11px;
+        font-weight: 700;
+        letter-spacing: 0.3px;
+        padding: 4px 14px;
+        border-radius: 0 0 10px 10px;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        white-space: nowrap;
+    }
+
+    &__badge-star {
+        font-size: 10px;
+    }
+
+    &__icon {
+        width: 36px;
+        height: 36px;
+        margin-bottom: 12px;
+        color: $green;
+        flex-shrink: 0;
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    &__gmv {
+        font-size: 13px;
+        font-weight: 700;
+        color: $text;
+        margin-bottom: 2px;
+        line-height: 1.2;
+    }
+
+    &__gmv-label {
+        font-size: 11px;
+        color: $muted;
+        margin-bottom: 16px;
+        line-height: 1.3;
+    }
+
+    &__price {
+        font-size: 28px;
+        font-weight: 800;
+        color: $text;
+        line-height: 1;
+        margin-bottom: 2px;
+        letter-spacing: -0.5px;
+
+        &_free {
+            color: $green;
+            font-size: 22px;
+            font-weight: 700;
+        }
+
+        &_custom {
+            color: $green;
+            font-size: 20px;
+            font-weight: 700;
+        }
+    }
+
+    &__price-period {
+        font-size: 12px;
+        color: $muted;
+        margin-bottom: 20px;
+
+        &_accent {
+            color: $green;
+            font-weight: 600;
+        }
+    }
+
+    &__features {
+        list-style: none;
+        padding: 0;
+        margin: 0 0 22px;
+        display: flex;
+        flex-direction: column;
+        gap: 9px;
+        flex: 1;
+    }
+
+    &__feature {
+        display: flex;
+        align-items: flex-start;
+        gap: 7px;
+        font-size: 13px;
+        color: $text;
+        line-height: 1.5;
+    }
+
+    &__feature-icon {
+        flex-shrink: 0;
+        width: 15px;
+        height: 15px;
+        margin-top: 2px;
+        color: $green;
+    }
+
+    &__cta {
+        display: block;
+        width: 100%;
+        padding: 11px 16px;
+        border-radius: 10px;
+        font-size: 13px;
+        font-weight: 700;
+        text-align: center;
+        cursor: pointer;
+        border: 1.5px solid $green;
+        background: transparent;
+        color: $green;
+        line-height: 1;
+        transition: background 0.2s, color 0.2s, border-color 0.2s;
+
+        &:hover {
+            background: $green-light-bg;
+        }
+
+        &_filled {
+            background: $green;
+            color: $white;
+            border-color: $green;
+
+            &:hover {
+                background: $green-dark;
+                border-color: $green-dark;
+            }
+        }
+    }
+}
+
+// ─── Планшет (до 1100px) ─────────────────────────────────────────────────────
+@media (max-width: $tablet) {
+    .tariff-plan {
+        padding: 72px 24px;
+
+        &__grid {
+            grid-template-columns: repeat(3, 1fr);
+            gap: 20px;
+        }
+
+        &__title {
+            font-size: 26px;
+        }
+    }
+}
+
+// ─── Мобильная (до 768px) ────────────────────────────────────────────────────
+@media (max-width: 768px) {
+    .tariff-plan {
+        &__grid {
+            grid-template-columns: 1fr 1fr;
+            gap: 16px;
+        }
+
+        &__subtitle {
+            font-size: 14px;
+        }
+    }
+
+    .tariff-card {
+        &__price {
+            font-size: 22px;
+        }
+    }
+}
+
+// ─── Мобильная (до 550px) ────────────────────────────────────────────────────
+@media (max-width: 550px) {
+    .tariff-plan {
+        &__grid {
+            grid-template-columns: 1fr;
+        }
+    }
+}
+
+// ─── Мобильная (до 430px) ────────────────────────────────────────────────────
+@media (max-width: $mobile) {
+    .tariff-plan {
+        padding: 40px 20px;
+
+        &__inner {
+            gap: 36px;
+        }
+
+        &__title {
+            font-size: 22px;
+        }
+
+        &__subtitle {
+            font-size: 13px;
+        }
+
+        &__grid {
+            gap: 12px;
+        }
+    }
+
+    .tariff-card {
+        padding: 20px 16px 20px;
+
+        &__price {
+            font-size: 20px;
+        }
+
+        &__feature {
+            font-size: 12px;
+        }
+    }
+}

package/dist/components/ConstructorComponents/TariffPlanV2/img/bar-chat.svg

@@ -0,0 +1,5 @@
+  <svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="6" y="20" width="6" height="10" rx="2" fill="currentColor" opacity="0.25" />
+    <rect x="15" y="13" width="6" height="17" rx="2" fill="currentColor" opacity="0.45" />
+    <rect x="24" y="6" width="6" height="24" rx="2" fill="currentColor" />
+  </svg>

package/dist/components/ConstructorComponents/TariffPlanV2/img/bolt.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M21 4L10 20h9l-4 12 17-18h-9L21 4z"
+        fill="currentColor" opacity="0.2"
+        stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" />
+</svg>

package/dist/components/ConstructorComponents/TariffPlanV2/img/check.svg

@@ -0,0 +1,5 @@
+<svg className="tariff-card__feature-icon" viewBox="0 0 15 15" fill="none">
+    <path d="M3 7.5l3 3 6-6"
+        stroke="currentColor" strokeWidth="1.8"
+        strokeLinecap="round" strokeLinejoin="round" />
+</svg>

package/dist/components/ConstructorComponents/TariffPlanV2/img/checkIcon.svg

@@ -0,0 +1,9 @@
+  <svg className="tariff-card__feature-icon" viewBox="0 0 15 15" fill="none">
+    <path
+      d="M3 7.5l3 3 6-6"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>

package/dist/components/ConstructorComponents/TariffPlanV2/img/crown.svg

@@ -0,0 +1,7 @@
+  <svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6 26h24M6 26L9 14l7 6 2-8 2 8 7-6 3 12"
+      stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" strokeLinecap="round" />
+    <circle cx="9" cy="13" r="2" fill="currentColor" />
+    <circle cx="27" cy="13" r="2" fill="currentColor" />
+    <circle cx="18" cy="6" r="2" fill="currentColor" />
+  </svg>

package/dist/components/ConstructorComponents/TariffPlanV2/img/diamond.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M18 4l10 10-10 18L8 14 18 4z"
+        fill="currentColor" opacity="0.18"
+        stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" />
+    <path d="M8 14h20" stroke="currentColor" strokeWidth="1.8" />
+    <path d="M12 14L18 4M24 14L18 4" stroke="currentColor" strokeWidth="1.2" opacity="0.5" />
+</svg>

package/dist/components/ConstructorComponents/TariffPlanV2/img/rocket.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M18 4C18 4 11 10 11 19c0 3.87 3.13 7 7 7s7-3.13 7-7C25 10 18 4 18 4z"
+        fill="currentColor" opacity="0.18" />
+    <path d="M18 4s-7 6-7 15c0 3.87 3.13 7 7 7s7-3.13 7-7C25 10 18 4 18 4z"
+        stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
+    <circle cx="18" cy="19" r="2.5" fill="currentColor" />
+    <path d="M13 26l-3 4M23 26l3 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
+</svg>

package/dist/index.js

@@ -381,6 +381,12 @@ Object.defineProperty(exports, "TariffPlan", {
     return _TariffPlan["default"];
   }
 });
+Object.defineProperty(exports, "TariffPlanV2", {
+  enumerable: true,
+  get: function get() {
+    return _TariffPlanV["default"];
+  }
+});
 Object.defineProperty(exports, "TextareaDynamicPlaceholder", {
   enumerable: true,
   get: function get() {
@@ -425,6 +431,7 @@ var _PhoneBlockV = _interopRequireDefault(require("./components/ConstructorCompo
 var _Questions = _interopRequireDefault(require("./components/ConstructorComponents/Questions/Questions"));
 var _QuestionsV = _interopRequireDefault(require("./components/ConstructorComponents/QuestionsV2/QuestionsV2"));
 var _TariffPlan = _interopRequireDefault(require("./components/ConstructorComponents/Tariff/TariffPlan"));
+var _TariffPlanV = _interopRequireDefault(require("./components/ConstructorComponents/TariffPlanV2/TariffPlanV2"));
 var _VideoBlock = _interopRequireDefault(require("./components/ConstructorComponents/VideoBlock/VideoBlock"));
 var _VideoBlockV = _interopRequireDefault(require("./components/ConstructorComponents/VideoBlockV2/VideoBlockV2"));
 var _ArticlesBlock = _interopRequireDefault(require("./components/ConstructorComponents/ArticlesBlock/ArticlesBlock"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecomlab-components-next",
-  "version": "0.1.288",
+  "version": "0.1.290",
   "description": "A set of common and reusable React components",
   "main": "dist/index.js",
   "files": [