@redneckz/wildless-cms-uni-blocks 0.3.13 → 0.3.14

package/mobile/dist/model/BlockVersion.d.ts

@@ -1,5 +1,10 @@
 /**
- * @title Цвет плитки
+ * @title Цвет блока
  * @enumNames ["Основная", "Второстепенная"]
  */
 export declare type BlockVersion = 'primary' | 'secondary';
+/**
+ * @title Цвет блока
+ * @enumNames ["Прозрачная", Основная", "Второстепенная"]
+ */
+export declare type BlockVersionWithTransparent = 'transparent' | 'primary' | 'secondary';

package/mobile/dist/ui-kit/Description/Description.js

@@ -4,6 +4,6 @@ const jsx_runtime_1 = require("@redneckz/uni-jsx/jsx-runtime");
 const uni_jsx_1 = require("@redneckz/uni-jsx");
 exports.Description = (0, uni_jsx_1.JSX)((props) => {
     const { className = '', description } = props;
-    return (0, jsx_runtime_1.jsx)("div", { className: `font-normal text-m-md ${className}`, children: description });
+    return (0, jsx_runtime_1.jsx)("div", { className: `font-normal text-base ${className}`, children: description });
 });
 //# sourceMappingURL=Description.js.map

package/mobile/lib/components/ContentPage/ContentPageHead.js

@@ -7,7 +7,7 @@ export const ContentPageHead = JSX(({ HeadComponent, data, children }) => {
 });
 function renderOpenGraph(og) {
     return og
-        ? Object.entries(og).map(([key, value]) => (_jsx("meta", { name: `og:${key}`, content: value }, key)))
+        ? Object.entries(og).map(([key, value]) => (_jsx("meta", { property: `og:${key}`, content: value }, key)))
         : null;
 }
 function renderTwitter(twitter) {

package/mobile/lib/components/ContentPage/ContentPageHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentPageHead.js","sourceRoot":"","sources":["../../../src/components/ContentPage/ContentPageHead.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAQxC,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAuB,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC7F,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAClD,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI,IAAI,EAAE,CAAC;IAChE,OAAO,CACL,MAAC,aAAa,eACZ,0BAAQ,KAAK,GAAS,EACtB,eAAM,IAAI,EAAC,UAAU,EAAC,OAAO,EAAC,qCAAqC,GAAG,EACrE,WAAW,IAAI,eAAM,IAAI,EAAC,aAAa,EAAC,OAAO,EAAE,WAAW,GAAI,EAChE,QAAQ,IAAI,eAAM,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,GAAI,EACjE,MAAM,IAAI,eAAM,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,GAAI,EAC3D,eAAe,CAAC,EAAE,CAAC,EACnB,aAAa,CAAC,OAAO,CAAC,EACtB,SAAS,IAAI,eAAM,GAAG,EAAC,WAAW,EAAC,IAAI,EAAE,SAAS,GAAI,EACtD,MAAM,IAAI,iBAAQ,IAAI,EAAC,qBAAqB,YAAE,MAAM,GAAU,EAC9D,QAAQ,IACK,CACjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,eAAe,CAAC,EAAsC;IAC7D,OAAO,EAAE;QACP,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CACvC,eAAgB,IAAI,EAAE,MAAM,GAAG,EAAE,EAAE,OAAO,EAAE,KAAK,IAAtC,GAAG,CAAuC,CACtD,CAAC;QACJ,CAAC,CAAC,IAAI,CAAC;AACX,CAAC;AAED,SAAS,aAAa,CAAC,OAA2C;IAChE,OAAO,OAAO;QACZ,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAC5C,eAAgB,IAAI,EAAE,WAAW,GAAG,EAAE,EAAE,OAAO,EAAE,KAAK,IAA3C,GAAG,CAA4C,CAC3D,CAAC;QACJ,CAAC,CAAC,IAAI,CAAC;AACX,CAAC"}
+{"version":3,"file":"ContentPageHead.js","sourceRoot":"","sources":["../../../src/components/ContentPage/ContentPageHead.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAQxC,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAuB,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC7F,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAClD,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI,IAAI,EAAE,CAAC;IAChE,OAAO,CACL,MAAC,aAAa,eACZ,0BAAQ,KAAK,GAAS,EACtB,eAAM,IAAI,EAAC,UAAU,EAAC,OAAO,EAAC,qCAAqC,GAAG,EACrE,WAAW,IAAI,eAAM,IAAI,EAAC,aAAa,EAAC,OAAO,EAAE,WAAW,GAAI,EAChE,QAAQ,IAAI,eAAM,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,GAAI,EACjE,MAAM,IAAI,eAAM,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,GAAI,EAC3D,eAAe,CAAC,EAAE,CAAC,EACnB,aAAa,CAAC,OAAO,CAAC,EACtB,SAAS,IAAI,eAAM,GAAG,EAAC,WAAW,EAAC,IAAI,EAAE,SAAS,GAAI,EACtD,MAAM,IAAI,iBAAQ,IAAI,EAAC,qBAAqB,YAAE,MAAM,GAAU,EAC9D,QAAQ,IACK,CACjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,eAAe,CAAC,EAAsC;IAC7D,OAAO,EAAE;QACP,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CACvC,eAAgB,QAAQ,EAAE,MAAM,GAAG,EAAE,EAAE,OAAO,EAAE,KAAK,IAA1C,GAAG,CAA2C,CAC1D,CAAC;QACJ,CAAC,CAAC,IAAI,CAAC;AACX,CAAC;AAED,SAAS,aAAa,CAAC,OAA2C;IAChE,OAAO,OAAO;QACZ,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAC5C,eAAgB,IAAI,EAAE,WAAW,GAAG,EAAE,EAAE,OAAO,EAAE,KAAK,IAA3C,GAAG,CAA4C,CAC3D,CAAC;QACJ,CAAC,CAAC,IAAI,CAAC;AACX,CAAC"}

package/mobile/lib/components/Headline/Headline.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
 import { Heading } from '../../ui-kit/Heading/Heading.js';
 import { Img } from '../../ui-kit/Img/Img.js';
-export const Headline = JSX(({ bgColor = 'transparent', className = '', title, description, image }) => {
-    return (_jsxs("section", { className: `px-4 py-6 ${bgColor} ${className}`, children: [title && _jsx(Heading, { headingType: "h2", className: "text-primary-text", title: title }), description && (_jsx("p", { className: `font-normal text-m-md ${title ? 'mt-2.5' : ''}`, children: description })), image?.src && (_jsx("div", { className: "mt-5 mx-auto flex justify-center", children: _jsx(Img, { image: image }) }))] }));
+import { ALIGN_TEXT, BACKGROUND_COLOR } from './constants.js';
+export const Headline = JSX(({ bgColorHeadline = 'transparent', className = '', title, description, image, align = 'left', }) => {
+    return (_jsxs("section", { className: `px-4 py-6 ${BACKGROUND_COLOR[bgColorHeadline]} ${className}`, children: [title && (_jsx(Heading, { headingType: "h2", className: `text-primary-text ${ALIGN_TEXT[align]}`, title: title })), description && (_jsx("p", { className: `font-normal text-m-md ${ALIGN_TEXT[align]} ${title ? 'mt-2.5' : ''}`, children: description })), image?.src && (_jsx("div", { className: "mt-5 mx-auto flex justify-center", children: _jsx(Img, { image: image }) }))] }));
 });
 //# sourceMappingURL=Headline.js.map

package/mobile/lib/components/Headline/Headline.js.map

@@ -1 +1 @@
-{"version":3,"file":"Headline.js","sourceRoot":"","sources":["../../../src/components/Headline/Headline.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGxC,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAK3C,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CACzB,CAAC,EAAE,OAAO,GAAG,aAAa,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;IACzE,OAAO,CACL,mBAAS,SAAS,EAAE,aAAa,OAAO,IAAI,SAAS,EAAE,aACpD,KAAK,IAAI,KAAC,OAAO,IAAC,WAAW,EAAC,IAAI,EAAC,SAAS,EAAC,mBAAmB,EAAC,KAAK,EAAE,KAAK,GAAI,EACjF,WAAW,IAAI,CACd,YAAG,SAAS,EAAE,yBAAyB,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,YAAG,WAAW,GAAK,CAClF,EACA,KAAK,EAAE,GAAG,IAAI,CACb,cAAK,SAAS,EAAC,kCAAkC,YAC/C,KAAC,GAAG,IAAC,KAAK,EAAE,KAAK,GAAI,GACjB,CACP,IACO,CACX,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"Headline.js","sourceRoot":"","sources":["../../../src/components/Headline/Headline.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGxC,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAK3D,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CACzB,CAAC,EACC,eAAe,GAAG,aAAa,EAC/B,SAAS,GAAG,EAAE,EACd,KAAK,EACL,WAAW,EACX,KAAK,EACL,KAAK,GAAG,MAAM,GACf,EAAE,EAAE;IACH,OAAO,CACL,mBAAS,SAAS,EAAE,aAAa,gBAAgB,CAAC,eAAe,CAAC,IAAI,SAAS,EAAE,aAC9E,KAAK,IAAI,CACR,KAAC,OAAO,IACN,WAAW,EAAC,IAAI,EAChB,SAAS,EAAE,qBAAqB,UAAU,CAAC,KAAK,CAAC,EAAE,EACnD,KAAK,EAAE,KAAK,GACZ,CACH,EACA,WAAW,IAAI,CACd,YAAG,SAAS,EAAE,yBAAyB,UAAU,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,YAChF,WAAW,GACV,CACL,EACA,KAAK,EAAE,GAAG,IAAI,CACb,cAAK,SAAS,EAAC,kCAAkC,YAC/C,KAAC,GAAG,IAAC,KAAK,EAAE,KAAK,GAAI,GACjB,CACP,IACO,CACX,CAAC;AACJ,CAAC,CACF,CAAC"}

package/mobile/lib/components/Headline/HeadlineContent.d.ts

@@ -1,4 +1,4 @@
-import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
 import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
@@ -8,5 +8,5 @@ import type { AlignType } from '../BaseTile/BaseTileProps';
  */
 export declare type HeadlineContent = HeadingContent & DescriptionContent & ImageContent & {
     align?: AlignType;
-    bgColor?: BgColorVersion;
+    bgColorHeadline?: BlockVersionWithTransparent;
 };

package/mobile/lib/components/Headline/constants.d.ts

@@ -0,0 +1,4 @@
+import type { AlignType } from '../BaseTile/BaseTileProps';
+import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
+export declare const ALIGN_TEXT: Record<AlignType, string>;
+export declare const BACKGROUND_COLOR: Record<BlockVersionWithTransparent, string>;

package/mobile/lib/components/Headline/constants.js

@@ -0,0 +1,11 @@
+export const ALIGN_TEXT = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+};
+export const BACKGROUND_COLOR = {
+    transparent: 'bg-transparent',
+    primary: 'bg-white',
+    secondary: 'bg-primary-main',
+};
+//# sourceMappingURL=constants.js.map

package/mobile/lib/components/Headline/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/components/Headline/constants.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,UAAU,GAA8B;IACnD,IAAI,EAAE,WAAW;IACjB,MAAM,EAAE,aAAa;IACrB,KAAK,EAAE,YAAY;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAgD;IAC3E,WAAW,EAAE,gBAAgB;IAC7B,OAAO,EAAE,UAAU;IACnB,SAAS,EAAE,iBAAiB;CAC7B,CAAC"}

package/mobile/lib/components/ProductBlock/ProductBlockInner.js

@@ -8,7 +8,7 @@ import { List } from '../../ui-kit/List/List.js';
 import { BaseTile } from '../BaseTile/BaseTile.js';
 import { renderBenefit } from './renderBenefit.js';
 export const ProductBlockInner = JSX(({ className = '', context, title, headingType = 'h2', description, benefits, buttons, image, items, version = 'primary', }) => {
-    return (_jsxs("div", { className: `w-full text-primary-text ${className}`, children: [_jsx("div", { children: _jsxs(BaseTile, { context: context, title: title && (_jsx(Heading, { headingType: headingType, title: title, className: "whitespace-pre-wrap max-w-[600px]" })), buttons: buttons?.length ? (_jsx(ButtonSection, { context: context, buttons: buttons, className: "flex flex-col mt-5 gap-2.5" })) : null, children: [description ? _jsx(Description, { className: "mt-3", description: description }) : null, benefits?.filter((items) => items.label)?.length ? (_jsx("div", { className: "mt-3", children: benefits.map((_, i) => renderBenefit(_, i, version)) })) : null, items?.length ? _jsx(List, { className: "mt-3", items: items }) : null] }) }), renderImage(image)] }));
+    return (_jsxs("div", { className: `w-full text-primary-text ${className}`, children: [_jsx("div", { children: _jsxs(BaseTile, { context: context, title: title && (_jsx(Heading, { headingType: headingType, title: title, className: "whitespace-pre-wrap max-w-[600px]" })), buttons: buttons?.length ? (_jsx(ButtonSection, { context: context, buttons: buttons, className: "flex flex-col mt-5 gap-2.5" })) : null, children: [description ? (_jsx(Description, { className: "mt-3 text-m-md", description: description })) : null, benefits?.filter((items) => items.label)?.length ? (_jsx("div", { className: "mt-3", children: benefits.map((_, i) => renderBenefit(_, i, version)) })) : null, items?.length ? _jsx(List, { className: "mt-3", items: items }) : null] }) }), renderImage(image)] }));
 });
 function renderImage(image) {
     return image?.src ? (_jsx("div", { className: "mt-5", children: _jsx(Img, { image: { className: 'block', ...image } }) })) : null;

package/mobile/lib/components/ProductBlock/ProductBlockInner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductBlockInner.js","sourceRoot":"","sources":["../../../src/components/ProductBlock/ProductBlockInner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIhD,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAClC,CAAC,EACC,SAAS,GAAG,EAAE,EACd,OAAO,EACP,KAAK,EACL,WAAW,GAAG,IAAI,EAClB,WAAW,EACX,QAAQ,EACR,OAAO,EACP,KAAK,EACL,KAAK,EACL,OAAO,GAAG,SAAS,GACpB,EAAE,EAAE;IACH,OAAO,CACL,eAAK,SAAS,EAAE,4BAA4B,SAAS,EAAE,aACrD,wBACE,MAAC,QAAQ,IACP,OAAO,EAAE,OAAO,EAChB,KAAK,EACH,KAAK,IAAI,CACP,KAAC,OAAO,IACN,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAC,mCAAmC,GAC7C,CACH,EAEH,OAAO,EACL,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAChB,KAAC,aAAa,IACZ,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,4BAA4B,GACtC,CACH,CAAC,CAAC,CAAC,IAAI,aAGT,WAAW,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,SAAS,EAAC,MAAM,EAAC,WAAW,EAAE,WAAW,GAAI,CAAC,CAAC,CAAC,IAAI,EAC/E,QAAQ,EAAE,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAClD,cAAK,SAAS,EAAC,MAAM,YAAE,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,GAAO,CACnF,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,SAAS,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,IAAI,IACtD,GACP,EACL,WAAW,CAAC,KAAK,CAAC,IACf,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,WAAW,CAAC,KAAK;IACxB,OAAO,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,CAClB,cAAK,SAAS,EAAC,MAAM,YACnB,KAAC,GAAG,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,GAAI,GAC5C,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC"}
+{"version":3,"file":"ProductBlockInner.js","sourceRoot":"","sources":["../../../src/components/ProductBlock/ProductBlockInner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIhD,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAClC,CAAC,EACC,SAAS,GAAG,EAAE,EACd,OAAO,EACP,KAAK,EACL,WAAW,GAAG,IAAI,EAClB,WAAW,EACX,QAAQ,EACR,OAAO,EACP,KAAK,EACL,KAAK,EACL,OAAO,GAAG,SAAS,GACpB,EAAE,EAAE;IACH,OAAO,CACL,eAAK,SAAS,EAAE,4BAA4B,SAAS,EAAE,aACrD,wBACE,MAAC,QAAQ,IACP,OAAO,EAAE,OAAO,EAChB,KAAK,EACH,KAAK,IAAI,CACP,KAAC,OAAO,IACN,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAC,mCAAmC,GAC7C,CACH,EAEH,OAAO,EACL,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAChB,KAAC,aAAa,IACZ,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,4BAA4B,GACtC,CACH,CAAC,CAAC,CAAC,IAAI,aAGT,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,WAAW,IAAC,SAAS,EAAC,gBAAgB,EAAC,WAAW,EAAE,WAAW,GAAI,CACrE,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,EAAE,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAClD,cAAK,SAAS,EAAC,MAAM,YAAE,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,GAAO,CACnF,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,SAAS,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,IAAI,IACtD,GACP,EACL,WAAW,CAAC,KAAK,CAAC,IACf,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,WAAW,CAAC,KAAK;IACxB,OAAO,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,CAClB,cAAK,SAAS,EAAC,MAAM,YACnB,KAAC,GAAG,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,GAAI,GAC5C,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC"}

package/mobile/lib/components/Recommendation/Recommendation.d.ts

@@ -0,0 +1,5 @@
+import type { UniBlockProps } from '../../types';
+import type { RecommendationContent } from './RecommendationContent';
+export interface RecommendationProps extends RecommendationContent, UniBlockProps {
+}
+export declare const Recommendation: (props: import("@redneckz/uni-jsx").PropsWithChildren<RecommendationProps, any>, context?: any) => any;

package/mobile/lib/components/Recommendation/Recommendation.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
+import { JSX } from '@redneckz/uni-jsx';
+import { ArrowButton } from '../../ui-kit/Button/ArrowButton.js';
+import { Heading } from '../../ui-kit/Heading/Heading.js';
+import { RecommendationCard } from './RecommendationCard.js';
+const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
+const CARD_FULL_VIEW_COUNT = 2;
+const CARD_SHIFT = 525;
+export const Recommendation = JSX(({ context, recommendations = [], className = '', title, version }) => {
+    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+    const blockClassName = version === 'secondary' ? 'bg-primary-main text-white' : 'bg-white text-primary-text';
+    const cardClassName = version === 'secondary' ? 'border-main-divider' : 'border-main-stroke';
+    return (_jsxs("section", { className: `relative font-sans p-[50px] overflow-hidden ${blockClassName} ${className}`, children: [title ? _jsx(Heading, { headingType: "h3", className: "mb-8", title: title }) : null, _jsx("div", { className: "flex duration-1000 gap-4", style: { transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }, role: "list", children: recommendations?.length
+                    ? recommendations.map(renderRecommendationCard({ context, version, className: cardClassName }))
+                    : null }), renderNavButtons({
+                cardsCount: recommendations.length,
+                activeCardIndex,
+                setActiveCardIndex,
+            }), _jsx("div", { className: `${BLUR_BLOCK_CLASSES} left-0 ${version === 'secondary' ? 'bg-opacity-from-main' : 'bg-opacity-from-white'}` }), _jsx("div", { className: `${BLUR_BLOCK_CLASSES} right-0 ${version === 'secondary' ? 'bg-opacity-to-main' : 'bg-opacity-to-white'}` })] }));
+});
+const renderRecommendationCard = ({ context, version, className }) => (card, i) => {
+    return (_jsx(RecommendationCard, { context: context, ...card, version: version, className: className }, String(i)));
+};
+const renderNavButtons = ({ cardsCount, activeCardIndex, setActiveCardIndex, }) => {
+    const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
+    const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
+    const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT;
+    const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT;
+    const showPrevButton = isUseSlider && activeCardIndex > 0;
+    return (_jsxs("div", { children: [showPrevButton && (_jsx(ArrowButton, { className: "absolute top-1/2 left-8 rotate-180 z-10 mt-6", onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E" })), showNextButton && (_jsx(ArrowButton, { className: "absolute top-1/2 right-8 z-10 mt-6", onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E" }))] }));
+};
+//# sourceMappingURL=Recommendation.js.map

package/mobile/lib/components/Recommendation/Recommendation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Recommendation.js","sourceRoot":"","sources":["../../../src/components/Recommendation/Recommendation.tsx"],"names":[],"mappings":"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"}

package/mobile/lib/components/Recommendation/RecommendationCard.d.ts

@@ -0,0 +1,7 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../types';
+import type { RecommendationCardContent } from './RecommendationContent';
+export interface RecommendationCardProps extends RecommendationCardContent, UniBlockProps {
+    version?: BlockVersion;
+}
+export declare const RecommendationCard: (props: import("@redneckz/uni-jsx").PropsWithChildren<RecommendationCardProps, any>, context?: any) => any;

package/mobile/lib/components/Recommendation/RecommendationCard.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
+import { JSX } from '@redneckz/uni-jsx';
+import { Description } from '../../ui-kit/Description/Description.js';
+import { Heading } from '../../ui-kit/Heading/Heading.js';
+import { Img } from '../../ui-kit/Img/Img.js';
+import { List } from '../../ui-kit/List/List.js';
+import { BaseTile } from '../BaseTile/BaseTile.js';
+export const RecommendationCard = JSX(({ context, className = '', title, description, items, image, version }) => {
+    return (_jsx("section", { className: `border border-solid box-border rounded-md p-7 min-w-[515px] max-w-[515px] ${className}`, role: "listitem", children: _jsxs(BaseTile, { context: context, title: title && _jsx(Heading, { headingType: "h4", title: title, className: "mb-4" }), image: image?.src && _jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description ? _jsx(Description, { description: description }) : null, items?.length ? _jsx(List, { items: items, version: version }) : null] }) }));
+});
+//# sourceMappingURL=RecommendationCard.js.map

package/mobile/lib/components/Recommendation/RecommendationCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecommendationCard.js","sourceRoot":"","sources":["../../../src/components/Recommendation/RecommendationCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGxC,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAOhD,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CACnC,CAAC,EAAE,OAAO,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IACzE,OAAO,CACL,kBACE,SAAS,EAAE,6EAA6E,SAAS,EAAE,EACnG,IAAI,EAAC,UAAU,YAEf,MAAC,QAAQ,IACP,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,IAAI,KAAC,OAAO,IAAC,WAAW,EAAC,IAAI,EAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,MAAM,GAAG,EAC3E,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,KAAC,GAAG,IAAC,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,KAAK,GAAI,aAElE,WAAW,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,WAAW,EAAE,WAAW,GAAI,CAAC,CAAC,CAAC,IAAI,EAC9D,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC,CAAC,CAAC,IAAI,IACvD,GACH,CACX,CAAC;AACJ,CAAC,CACF,CAAC"}

package/mobile/lib/components/Recommendation/RecommendationContent.d.ts

@@ -0,0 +1,14 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { ListContent } from '../../ui-kit/List/ListContent';
+export declare type RecommendationCardContent = HeadingContent & DescriptionContent & ListContent & ImageContent;
+/**
+ * @title Рекомендации
+ */
+export interface RecommendationContent extends HeadingContent {
+    /** @title Карточки */
+    recommendations?: RecommendationCardContent[];
+    version?: BlockVersion;
+}

package/mobile/lib/components/Recommendation/RecommendationContent.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=RecommendationContent.js.map

package/mobile/lib/components/Recommendation/RecommendationContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecommendationContent.js","sourceRoot":"","sources":["../../../src/components/Recommendation/RecommendationContent.ts"],"names":[],"mappings":""}

package/mobile/lib/model/BlockVersion.d.ts

@@ -1,5 +1,10 @@
 /**
- * @title Цвет плитки
+ * @title Цвет блока
  * @enumNames ["Основная", "Второстепенная"]
  */
 export declare type BlockVersion = 'primary' | 'secondary';
+/**
+ * @title Цвет блока
+ * @enumNames ["Прозрачная", Основная", "Второстепенная"]
+ */
+export declare type BlockVersionWithTransparent = 'transparent' | 'primary' | 'secondary';

package/mobile/lib/ui-kit/Description/Description.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
 export const Description = JSX((props) => {
     const { className = '', description } = props;
-    return _jsx("div", { className: `font-normal text-m-md ${className}`, children: description });
+    return _jsx("div", { className: `font-normal text-base ${className}`, children: description });
 });
 //# sourceMappingURL=Description.js.map

package/mobile/src/components/ContentPage/ContentPage.page.json

@@ -1882,6 +1882,80 @@
       "type": "CreditCalculator",
       "style": ["col-span-12"]
     },
+    {
+      "type": "Recommendation",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "С этим продуктом приобретают",
+        "recommendations": [
+          {
+            "title": "Кредиты",
+            "items": ["до 10 000 000 ₽", "до 10 лет"],
+            "image": {
+              "src": "chair.png",
+              "alt": "Варианты потребительского кредита",
+              "format": "webp",
+              "size": {
+                "width": 180,
+                "height": 180
+              }
+            }
+          },
+          {
+            "title": "Кредитные карты",
+            "description": "Льготный период 120 дней",
+            "image": {
+              "src": "credit-card-1.png",
+              "alt": "Варианты потребительского кредита",
+              "format": "webp",
+              "size": {
+                "width": 180,
+                "height": 180
+              }
+            }
+          },
+          {
+            "title": "Кредитные карты",
+            "description": "Льготный период 120 дней",
+            "image": {
+              "src": "credit-card-1.png",
+              "alt": "Варианты потребительского кредита",
+              "format": "webp",
+              "size": {
+                "width": 180,
+                "height": 180
+              }
+            }
+          },
+          {
+            "title": "Кредитные карты",
+            "description": "Льготный период 120 дней",
+            "image": {
+              "src": "credit-card-1.png",
+              "alt": "Варианты потребительского кредита",
+              "format": "webp",
+              "size": {
+                "width": 180,
+                "height": 180
+              }
+            }
+          },
+          {
+            "title": "Кредитные карты",
+            "description": "Льготный период 120 дней",
+            "image": {
+              "src": "credit-card-1.png",
+              "alt": "Варианты потребительского кредита",
+              "format": "webp",
+              "size": {
+                "width": 180,
+                "height": 180
+              }
+            }
+          }
+        ]
+      }
+    },
     {
       "type": "Footer",
       "style": ["col-span-12"],

package/mobile/src/components/ContentPage/ContentPageHead.tsx

@@ -28,7 +28,7 @@ export const ContentPageHead = JSX<ContentPageHeadProps>(({ HeadComponent, data,
 function renderOpenGraph(og: Record<string, string> | undefined) {
   return og
     ? Object.entries(og).map(([key, value]) => (
-        <meta key={key} name={`og:${key}`} content={value} />
+        <meta key={key} property={`og:${key}`} content={value} />
       ))
     : null;
 }

package/mobile/src/components/Headline/Headline.example.json

@@ -2,5 +2,5 @@
   "title": "Заголовок",
   "description": "Описание",
   "align": "center",
-  "bgColor": "transparent"
+  "bgColorHeadline": "transparent"
 }

package/mobile/src/components/Headline/Headline.tsx

@@ -3,17 +3,33 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
+import { ALIGN_TEXT, BACKGROUND_COLOR } from './constants';
 import type { HeadlineContent } from './HeadlineContent';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
 export const Headline = JSX<HeadlineProps>(
-  ({ bgColor = 'transparent', className = '', title, description, image }) => {
+  ({
+    bgColorHeadline = 'transparent',
+    className = '',
+    title,
+    description,
+    image,
+    align = 'left',
+  }) => {
     return (
-      <section className={`px-4 py-6 ${bgColor} ${className}`}>
-        {title && <Heading headingType="h2" className="text-primary-text" title={title} />}
+      <section className={`px-4 py-6 ${BACKGROUND_COLOR[bgColorHeadline]} ${className}`}>
+        {title && (
+          <Heading
+            headingType="h2"
+            className={`text-primary-text ${ALIGN_TEXT[align]}`}
+            title={title}
+          />
+        )}
         {description && (
-          <p className={`font-normal text-m-md ${title ? 'mt-2.5' : ''}`}>{description}</p>
+          <p className={`font-normal text-m-md ${ALIGN_TEXT[align]} ${title ? 'mt-2.5' : ''}`}>
+            {description}
+          </p>
         )}
         {image?.src && (
           <div className="mt-5 mx-auto flex justify-center">

package/mobile/src/components/Headline/HeadlineContent.ts

@@ -1,4 +1,4 @@
-import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
 import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
@@ -11,6 +11,5 @@ export type HeadlineContent = HeadingContent &
   DescriptionContent &
   ImageContent & {
     align?: AlignType;
-    // TODO: image for mobile
-    bgColor?: BgColorVersion;
+    bgColorHeadline?: BlockVersionWithTransparent;
   };

package/mobile/src/components/Headline/constants.ts

@@ -0,0 +1,14 @@
+import type { AlignType } from '../BaseTile/BaseTileProps';
+import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
+
+export const ALIGN_TEXT: Record<AlignType, string> = {
+  left: 'text-left',
+  center: 'text-center',
+  right: 'text-right',
+};
+
+export const BACKGROUND_COLOR: Record<BlockVersionWithTransparent, string> = {
+  transparent: 'bg-transparent',
+  primary: 'bg-white',
+  secondary: 'bg-primary-main',
+};

package/mobile/src/components/ProductBlock/ProductBlockInner.tsx

@@ -48,7 +48,9 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
               ) : null
             }
           >
-            {description ? <Description className="mt-3" description={description} /> : null}
+            {description ? (
+              <Description className="mt-3 text-m-md" description={description} />
+            ) : null}
             {benefits?.filter((items) => items.label)?.length ? (
               <div className="mt-3">{benefits.map((_, i) => renderBenefit(_, i, version))}</div>
             ) : null}

package/mobile/src/components/Recommendation/Recommendation.example.json

@@ -0,0 +1,38 @@
+{
+  "title": "Блок рекомендаций",
+  "recommendations": [
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 180,
+          "height": 180
+        }
+      },
+      "title": "Заголовок 1",
+      "description": "Описание 1"
+    },
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 180,
+          "height": 180
+        }
+      },
+      "title": "Заголовок 2",
+      "description": "Описание 2"
+    },
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 180,
+          "height": 180
+        }
+      },
+      "title": "Заголовок 3",
+      "description": "Описание 3"
+    }
+  ]
+}

package/mobile/src/components/Recommendation/Recommendation.tsx

@@ -0,0 +1,105 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { RecommendationCard } from './RecommendationCard';
+import type { RecommendationCardContent, RecommendationContent } from './RecommendationContent';
+
+const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
+const CARD_FULL_VIEW_COUNT = 2;
+const CARD_SHIFT = 525;
+
+export interface RecommendationProps extends RecommendationContent, UniBlockProps {}
+
+export const Recommendation = JSX<RecommendationProps>(
+  ({ context, recommendations = [], className = '', title, version }) => {
+    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+
+    const blockClassName =
+      version === 'secondary' ? 'bg-primary-main text-white' : 'bg-white text-primary-text';
+    const cardClassName = version === 'secondary' ? 'border-main-divider' : 'border-main-stroke';
+
+    return (
+      <section
+        className={`relative font-sans p-[50px] overflow-hidden ${blockClassName} ${className}`}
+      >
+        {title ? <Heading headingType="h3" className="mb-8" title={title} /> : null}
+        <div
+          className="flex duration-1000 gap-4"
+          style={{ transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }}
+          role="list"
+        >
+          {recommendations?.length
+            ? recommendations.map(
+                renderRecommendationCard({ context, version, className: cardClassName }),
+              )
+            : null}
+        </div>
+        {renderNavButtons({
+          cardsCount: recommendations.length,
+          activeCardIndex,
+          setActiveCardIndex,
+        })}
+        <div
+          className={`${BLUR_BLOCK_CLASSES} left-0 ${
+            version === 'secondary' ? 'bg-opacity-from-main' : 'bg-opacity-from-white'
+          }`}
+        />
+        <div
+          className={`${BLUR_BLOCK_CLASSES} right-0 ${
+            version === 'secondary' ? 'bg-opacity-to-main' : 'bg-opacity-to-white'
+          }`}
+        />
+      </section>
+    );
+  },
+);
+
+const renderRecommendationCard =
+  ({ context, version, className }) =>
+  (card: RecommendationCardContent, i: number) => {
+    return (
+      <RecommendationCard
+        key={String(i)}
+        context={context}
+        {...card}
+        version={version}
+        className={className}
+      />
+    );
+  };
+
+const renderNavButtons = ({
+  cardsCount,
+  activeCardIndex,
+  setActiveCardIndex,
+}: {
+  cardsCount: number;
+  activeCardIndex: number;
+  setActiveCardIndex: (number) => void;
+}) => {
+  const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
+  const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
+  const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT;
+  const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT;
+  const showPrevButton = isUseSlider && activeCardIndex > 0;
+
+  return (
+    <div>
+      {showPrevButton && (
+        <ArrowButton
+          className="absolute top-1/2 left-8 rotate-180 z-10 mt-6"
+          onClick={handlePrevClick}
+          ariaLabel="Пролистать влево"
+        />
+      )}
+      {showNextButton && (
+        <ArrowButton
+          className="absolute top-1/2 right-8 z-10 mt-6"
+          onClick={handleNextClick}
+          ariaLabel="Пролистать вправо"
+        />
+      )}
+    </div>
+  );
+};

package/mobile/src/components/Recommendation/RecommendationCard.tsx

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../types';
+import { Description } from '../../ui-kit/Description/Description';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { List } from '../../ui-kit/List/List';
+import { BaseTile } from '../BaseTile/BaseTile';
+import type { RecommendationCardContent } from './RecommendationContent';
+
+export interface RecommendationCardProps extends RecommendationCardContent, UniBlockProps {
+  version?: BlockVersion;
+}
+
+export const RecommendationCard = JSX<RecommendationCardProps>(
+  ({ context, className = '', title, description, items, image, version }) => {
+    return (
+      <section
+        className={`border border-solid box-border rounded-md p-7 min-w-[515px] max-w-[515px] ${className}`}
+        role="listitem"
+      >
+        <BaseTile
+          context={context}
+          title={title && <Heading headingType="h4" title={title} className="mb-4" />}
+          image={image?.src && <Img className="mt-auto ml-7" image={image} />}
+        >
+          {description ? <Description description={description} /> : null}
+          {items?.length ? <List items={items} version={version} /> : null}
+        </BaseTile>
+      </section>
+    );
+  },
+);

package/mobile/src/components/Recommendation/RecommendationContent.ts

@@ -0,0 +1,19 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { ListContent } from '../../ui-kit/List/ListContent';
+
+export type RecommendationCardContent = HeadingContent &
+  DescriptionContent &
+  ListContent &
+  ImageContent;
+
+/**
+ * @title Рекомендации
+ */
+export interface RecommendationContent extends HeadingContent {
+  /** @title Карточки */
+  recommendations?: RecommendationCardContent[];
+  version?: BlockVersion;
+}