ecomlab-components-next 0.1.322 → 0.1.323

package/dist/components/ConstructorComponents/VideoBlockV3/VideoBlockV3.js

@@ -0,0 +1,90 @@
+"use strict";
+'use client';
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+require("./VideoBlockV3.scss");
+var _ButtonBasicV = _interopRequireDefault(require("../../Buttons/ButtonBasicV2/ButtonBasicV2"));
+var _useReveal = _interopRequireDefault(require("../../../common/hooks/useReveal"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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); }
+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; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+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."); }
+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; } }
+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; }
+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; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var VideoBlockV3 = function VideoBlockV3(_ref) {
+  var src = _ref.src,
+    hideTitle = _ref.hideTitle,
+    title = _ref.title,
+    poster = _ref.poster,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? 'Платформа за 2 минуты: аналитика, конкуренты и перенос контента' : _ref$description,
+    _ref$buttonText = _ref.buttonText,
+    buttonText = _ref$buttonText === void 0 ? 'Смотреть видео' : _ref$buttonText;
+  var videoRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPlaying = _useState2[0],
+    setIsPlaying = _useState2[1];
+  (0, _useReveal["default"])();
+  var handlePlay = function handlePlay() {
+    var video = videoRef.current;
+    if (!video) return;
+    video.play();
+  };
+  var handlePlayState = function handlePlayState() {
+    setIsPlaying(true);
+  };
+  var handlePauseState = function handlePauseState() {
+    setIsPlaying(false);
+  };
+  var handleEnded = function handleEnded() {
+    setIsPlaying(false);
+  };
+  return /*#__PURE__*/_react["default"].createElement("section", {
+    className: "video-block-v3"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "\n                    video-block-v3__card\n                    reveal\n                    ".concat(hideTitle ? 'video-block-v3__card--center' : '', "\n                ")
+  }, !hideTitle && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "video-block-v3__content"
+  }, /*#__PURE__*/_react["default"].createElement("h2", {
+    className: "video-block-v3__title"
+  }, title || 'Посмотрите видео о нас'), description && /*#__PURE__*/_react["default"].createElement("p", {
+    className: "video-block-v3__description"
+  }, description), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "video-block-v3__action"
+  }, /*#__PURE__*/_react["default"].createElement(_ButtonBasicV["default"], {
+    white: true,
+    onClick: handlePlay,
+    text: buttonText,
+    size: "44px"
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "\n                        video-block-v3__laptop\n                        ".concat(isPlaying ? 'video-block-v3__laptop--playing' : '', "\n                    ")
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "video-block-v3__screen"
+  }, /*#__PURE__*/_react["default"].createElement("video", {
+    ref: videoRef,
+    className: "video-block-v3__video",
+    src: src,
+    poster: poster,
+    controls: true,
+    playsInline: true,
+    preload: "metadata",
+    onPlay: handlePlayState,
+    onPause: handlePauseState,
+    onEnded: handleEnded
+  }, /*#__PURE__*/_react["default"].createElement("source", {
+    src: src,
+    type: "video/mp4"
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "video-block-v3__base"
+  }))));
+};
+var _default = exports["default"] = VideoBlockV3;

package/dist/components/ConstructorComponents/VideoBlockV3/VideoBlockV3.scss

@@ -0,0 +1,576 @@
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
+@import '../variables.scss';
+
+.video-block-v3 {
+    font-family: 'Manrope', sans-serif;
+    background: $white;
+    width: 100%;
+    padding: 96px 40px;
+
+    * {
+        font-family: 'Manrope', 'Golos Text', sans-serif !important;
+    }
+
+    // ========================================
+    // CARD
+    // ========================================
+
+    &__card {
+        position: relative;
+
+        max-width: 1280px;
+        min-height: 360px;
+
+        margin: 0 auto;
+
+        // ====================================
+        // ДОПОЛНИТЕЛЬНЫЙ ЗЕЛЁНЫЙ ГРАДИЕНТ
+        // (справа, мягкое свечение)
+        // ====================================
+
+        background:
+            radial-gradient(
+                ellipse 640px 460px at 98% 112%,
+                rgba(22, 185, 129, 0.34) 0%,
+                rgba(44, 207, 164, 0.18) 40%,
+                rgba(44, 207, 164, 0) 75%
+            ),
+            radial-gradient(
+                ellipse 460px 320px at 88% -14%,
+                rgba(110, 231, 183, 0.28) 0%,
+                rgba(110, 231, 183, 0) 70%
+            ),
+            #f8fcfb;
+
+        border-radius: 24px;
+
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        gap: 48px;
+
+        // Отступы сохраняем
+        padding: 56px;
+
+        overflow: hidden;
+
+        // ====================================
+        // ШИРОКИЙ РАСПЛЫВЧАТЫЙ ГРАДИЕНТ
+        // ====================================
+
+        &::before {
+            content: '';
+
+            position: absolute;
+
+            width: 820px;
+            height: 620px;
+
+            right: -60px;
+            top: 50%;
+
+            transform: translateY(-50%);
+
+            border-radius: 50%;
+
+            background:
+                radial-gradient(
+                    closest-side at 42% 50%,
+                    #16b981 0%,
+                    #38bdf8 22%,
+                    #bef264 60%,
+                    rgba(69, 84, 220, 0.6) 62%,
+                    rgba(69, 204, 232, 0.25) 80%,
+                    rgba(69, 204, 232, 0) 100%
+                );
+
+            // Чем больше blur — тем мягче края
+            filter: blur(36px);
+
+            z-index: 0;
+
+            pointer-events: none;
+        }
+
+        // Широкая мягкая подсветка вокруг основного градиента
+        &::after {
+            content: '';
+
+            position: absolute;
+
+            width: 1000px;
+            height: 760px;
+
+            right: -160px;
+            top: 50%;
+
+            transform: translateY(-50%);
+
+            border-radius: 50%;
+
+            background:
+                radial-gradient(
+                    closest-side,
+                    rgba(45, 212, 191, 0.16) 0%,
+                    rgba(56, 189, 248, 0.10) 50%,
+                    transparent 100%
+                );
+
+            filter: blur(60px);
+
+            z-index: 0;
+
+            pointer-events: none;
+        }
+
+        // Без заголовка
+        &--center {
+            justify-content: center;
+        }
+    }
+
+
+    // ========================================
+    // CONTENT
+    // ========================================
+
+    &__content {
+        position: relative;
+
+        z-index: 3;
+
+        flex: 1;
+
+        max-width: 480px;
+    }
+
+    &__title {
+        font-size: 30px;
+        font-weight: 800;
+        line-height: 1.2;
+
+        letter-spacing: -1px;
+
+        color: $green-dark;
+
+        margin: 0 0 16px 0;
+    }
+
+    &__description {
+        font-size: 15px;
+        line-height: 1.5;
+
+        color: #66817a;
+
+        max-width: 420px;
+
+        margin: 0 0 28px 0;
+    }
+
+    &__action {
+        position: relative;
+
+        z-index: 3;
+    }
+
+
+    // ========================================
+    // LAPTOP
+    // ========================================
+
+    &__laptop {
+        position: relative;
+
+        z-index: 2;
+
+        flex-shrink: 0;
+
+        width: 560px;
+
+        /*
+         * В обычном состоянии ноутбук немного
+         * повернут, как в референсе.
+         */
+        transform:
+            perspective(1400px)
+            rotateY(-10deg)
+            rotateZ(-1deg);
+
+        transform-origin: center center;
+
+        transition:
+            transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
+    }
+
+
+    // ========================================
+    // VIDEO PLAYING
+    // ========================================
+
+    /*
+     * Когда видео включено —
+     * ноутбук становится прямым.
+     */
+
+    &__laptop--playing {
+        transform:
+            perspective(1400px)
+            rotateY(0deg)
+            rotateZ(0deg);
+    }
+
+
+    // ========================================
+    // SCREEN
+    // ========================================
+
+    &__screen {
+        position: relative;
+
+        background: #102b25;
+
+        border-radius: 14px 14px 0 0;
+
+        padding: 10px 10px 12px;
+
+        box-shadow:
+            0 24px 45px rgba(0, 0, 0, 0.18),
+            0 10px 20px rgba(0, 0, 0, 0.10);
+
+        z-index: 2;
+    }
+
+    &__video {
+        display: block;
+
+        width: 100%;
+
+        aspect-ratio: 16 / 10;
+
+        object-fit: cover;
+
+        border-radius: 6px;
+
+        background: #000;
+    }
+
+
+    // ========================================
+    // LAPTOP BASE
+    // ========================================
+
+    &__base {
+        position: relative;
+
+        height: 12px;
+
+        width: calc(100% + 56px);
+
+        margin: 0 -28px;
+
+        background:
+            linear-gradient(
+                180deg,
+                #e7f0ed 0%,
+                #c2d5cf 100%
+            );
+
+        border-radius: 0 0 16px 16px;
+
+        box-shadow:
+            0 10px 22px rgba(0, 0, 0, 0.18);
+
+        z-index: 2;
+
+        &::after {
+            content: '';
+
+            position: absolute;
+
+            left: 50%;
+            top: 0;
+
+            width: 80px;
+            height: 4px;
+
+            transform: translateX(-50%);
+
+            background: rgba(0, 0, 0, 0.10);
+
+            border-radius: 0 0 6px 6px;
+        }
+    }
+
+
+    // ========================================
+    // HOVER
+    // ========================================
+
+    &__card:hover {
+        .video-block-v3__laptop:not(.video-block-v3__laptop--playing) {
+            transform:
+                perspective(1400px)
+                rotateY(-13deg)
+                rotateZ(-1.5deg)
+                translateY(-3px);
+        }
+    }
+
+
+    // ========================================
+    // ANIMATION
+    // ========================================
+
+    @keyframes fadeUp {
+        from {
+            opacity: 0;
+            transform: translateY(24px);
+        }
+
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+}
+
+
+// ========================================
+// TABLET
+// ========================================
+
+@media (max-width: 1100px) {
+    .video-block-v3 {
+        padding: 72px 24px;
+
+        &__card {
+            padding: 48px 40px;
+            gap: 32px;
+        }
+
+        &__title {
+            font-size: 26px;
+        }
+
+        &__laptop {
+            width: 460px;
+
+            transform:
+                perspective(1200px)
+                rotateY(-8deg)
+                rotateZ(-1deg);
+        }
+
+        &__laptop--playing {
+            transform:
+                perspective(1200px)
+                rotateY(0deg)
+                rotateZ(0deg);
+        }
+
+        &__base {
+            width: calc(100% + 40px);
+            margin: 0 -20px;
+        }
+
+        &__card::before {
+            width: 680px;
+            height: 520px;
+
+            right: -40px;
+        }
+
+        &__card::after {
+            width: 820px;
+            height: 640px;
+
+            right: -120px;
+        }
+    }
+}
+
+
+// ========================================
+// MOBILE
+// ========================================
+
+@media (max-width: 900px) {
+    .video-block-v3 {
+        padding: 60px 24px;
+
+        &__card {
+            flex-direction: column;
+
+            background:
+                radial-gradient(
+                    ellipse 520px 360px at 50% 110%,
+                    rgba(22, 185, 129, 0.28) 0%,
+                    rgba(44, 207, 164, 0.12) 45%,
+                    rgba(44, 207, 164, 0) 75%
+                ),
+                #f8fcfb;
+
+            gap: 32px;
+
+            padding: 40px 32px 48px;
+        }
+
+        &__content {
+            max-width: 100%;
+
+            text-align: center;
+        }
+
+        &__description {
+            font-size: 14px;
+
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        &__laptop {
+            width: 100%;
+            max-width: 520px;
+
+            transform:
+                perspective(1100px)
+                rotateY(-5deg)
+                rotateZ(-1deg);
+        }
+
+        &__laptop--playing {
+            transform:
+                perspective(1100px)
+                rotateY(0deg)
+                rotateZ(0deg);
+        }
+
+        &__card::before {
+            width: 760px;
+            height: 560px;
+
+            right: 50%;
+            top: 65%;
+
+            transform: translate(50%, -50%);
+        }
+
+        &__card::after {
+            width: 900px;
+            height: 680px;
+
+            right: 50%;
+            top: 65%;
+
+            transform: translate(50%, -50%);
+        }
+    }
+}
+
+
+// ========================================
+// 600px
+// ========================================
+
+@media (max-width: 600px) {
+    .video-block-v3 {
+
+        &__card {
+            border-radius: 20px;
+
+            padding: 32px 24px 40px;
+        }
+
+        &__title {
+            font-size: 24px;
+        }
+
+        &__description {
+            font-size: 13px;
+
+            margin-bottom: 20px;
+        }
+
+        &__laptop {
+            transform:
+                perspective(900px)
+                rotateY(-3deg)
+                rotateZ(-1deg);
+        }
+
+        &__laptop--playing {
+            transform:
+                perspective(900px)
+                rotateY(0deg)
+                rotateZ(0deg);
+        }
+
+        // На мобильных blur поменьше — легче для слабых устройств
+        &__card::before {
+            width: 640px;
+            height: 480px;
+
+            filter: blur(24px);
+        }
+
+        &__card::after {
+            width: 760px;
+            height: 560px;
+
+            filter: blur(36px);
+        }
+    }
+}
+
+
+// ========================================
+// 430px
+// ========================================
+
+@media (max-width: 430px) {
+    .video-block-v3 {
+        padding: 40px 20px;
+
+        &__card {
+            border-radius: 16px;
+
+            padding: 28px 16px 32px;
+        }
+
+        &__title {
+            font-size: 20px;
+        }
+
+        &__description {
+            font-size: 12px;
+        }
+
+        &__screen {
+            padding: 6px 6px 8px;
+
+            border-radius: 10px 10px 0 0;
+        }
+
+        &__base {
+            width: calc(100% + 24px);
+
+            margin: 0 -12px;
+        }
+
+        &__card::before {
+            width: 520px;
+            height: 400px;
+        }
+
+        &__card::after {
+            width: 620px;
+            height: 470px;
+        }
+
+        &__action > * {
+            max-width: 100% !important;
+            width: 100% !important;
+        }
+    }
+}

package/dist/components/ConstructorComponents/VideoBlockV3/VideoBlockV3.stories.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.VideoBlockV3Test = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _VideoBlockV = _interopRequireDefault(require("./VideoBlockV3"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'VideoBlockV3',
+  component: _VideoBlockV["default"]
+};
+var VideoBlockV3Test = exports.VideoBlockV3Test = function VideoBlockV3Test() {
+  return /*#__PURE__*/_react["default"].createElement(_VideoBlockV["default"], {
+    src: "https://dl.ecomru.ru:9001/redactor-videos/ecomru_1.mp4"
+  });
+};

package/dist/index.js

@@ -441,6 +441,12 @@ Object.defineProperty(exports, "VideoBlockV2", {
     return _VideoBlockV["default"];
   }
 });
+Object.defineProperty(exports, "VideoBlockV3", {
+  enumerable: true,
+  get: function get() {
+    return _VideoBlockV2["default"];
+  }
+});
 Object.defineProperty(exports, "ViewSwitch", {
   enumerable: true,
   get: function get() {
@@ -474,6 +480,7 @@ var _TariffPlan = _interopRequireDefault(require("./components/ConstructorCompon
 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 _VideoBlockV2 = _interopRequireDefault(require("./components/ConstructorComponents/VideoBlockV3/VideoBlockV3"));
 var _ArticlesBlock = _interopRequireDefault(require("./components/ConstructorComponents/ArticlesBlock/ArticlesBlock"));
 var _ArticlesBlock2 = _interopRequireDefault(require("./components/ConstructorComponents/ArticlesBlock2/ArticlesBlock2"));
 var _ArticlesBlockV = _interopRequireDefault(require("./components/ConstructorComponents/ArticlesBlockV2/ArticlesBlockV2"));

package/package.json

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