@redneckz/wildless-cms-uni-blocks 0.2.56 → 0.2.59

package/lib/index.js

@@ -3,6 +3,7 @@ export { LikeAPI } from './api/LikeAPI.js';
 export { DaDataAPI } from './api/DaDataAPI.js';
 export { ContentPageHead } from './ContentPageHead.js';
 export { ContentPage } from './ContentPage.js';
+export { toMobilePage } from './toMobilePage.js';
 export { Blocks } from './Blocks.js';
 export { MobileBlocks } from './MobileBlocks.js';
 export * as url from './utils/url.js';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAmB5C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,KAAK,GAAG,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAqB5C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,KAAK,GAAG,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/{content-page-repository/toMobilePage.d.ts → toMobilePage.d.ts}

@@ -1,2 +1,2 @@
-import type { ContentPageDef } from '../types';
+import type { ContentPageDef } from './types';
 export declare function toMobilePage(contentPage: ContentPageDef): ContentPageDef;

package/lib/toMobilePage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toMobilePage.js","sourceRoot":"","sources":["../src/toMobilePage.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,YAAY,CAAC,WAA2B;IACtD,MAAM,MAAM,GAAG,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC9F,OAAO;QACL,GAAG,WAAW;QACd,MAAM;KACP,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,KAAe;IACpC,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACzB,IAAI,MAAM,EAAE;QACV,OAAO;YACL,GAAG,KAAK;YACR,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK;SACzD,CAAC;KACH;SAAM;QACL,OAAO,KAAK,CAAC;KACd;AACH,CAAC"}

package/lib/types.d.ts

@@ -3,6 +3,8 @@ import type { BlockContent } from './Blocks';
 import type { ContentPageContext } from './ContentPageContext';
 export declare type ColorPalette = 'pc' | 'bc' | 'eo';
 export declare type BlockVersion = 'primary' | 'secondary';
+export declare type ButtonVersion = 'primary' | 'secondary';
+export declare type TitleSize = 'S' | 'M' | 'L' | 'XL';
 export interface BlockDef {
     type: string;
     style?: string[];

package/lib/ui-kit/Button.d.ts

@@ -1,5 +1,4 @@
-import type { LinkContent } from '../types';
-declare type ButtonVersion = 'primary' | 'secondary';
+import type { ButtonVersion, LinkContent } from '../types';
 export interface ButtonProps extends LinkContent {
     className?: string;
     onClick?: (ev: MouseEvent) => any;
@@ -8,4 +7,3 @@ export interface ButtonProps extends LinkContent {
     disabled?: Boolean;
 }
 export declare const Button: (props: import("@redneckz/uni-jsx").PropsWithChildren<ButtonProps, any>, context?: any) => any;
-export {};

package/lib/ui-kit/Button.js

@@ -8,11 +8,11 @@ const buttonDisabledStyleMap = {
     primary: 'bg-secondary-dark text-secondary-text',
     secondary: 'bg-secondary-light text-secondary-text',
 };
-const styleButton = 'inline-block rounded-md px-9 py-3.5 text-center font-sans';
+const styleButton = 'inline-block rounded-md px-8 py-2 text-center font-sans';
 export const Button = JSX(({ className, text, href, target, onClick, children, disabled, version = 'primary', ariaLabel, }) => {
     if (disabled) {
-        return (_jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabindex: "-1", className: `${styleButton} select-none ${buttonDisabledStyleMap[version]} ${className || ''}`, children: _jsx("span", { className: "text-sm font-medium", children: text || children }) }));
+        return (_jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabindex: "-1", className: `${styleButton} select-none ${buttonDisabledStyleMap[version]} ${className || ''}`, children: children ? (_jsx("div", { children: children })) : (_jsx("div", { className: "text-sm font-medium py-1.5", children: text })) }));
     }
-    return (_jsx("a", { className: `${styleButton} no-underline ${buttonStyleMap[version]} ${className || ''}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, children: _jsx("span", { className: "text-sm font-medium", children: text || children }) }));
+    return (_jsx("a", { className: `${styleButton} no-underline ${buttonStyleMap[version]} ${className || ''}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, children: children ? (_jsx("div", { children: children })) : (_jsx("div", { className: "text-sm font-medium py-1.5", children: text })) }));
 });
 //# sourceMappingURL=Button.js.map

package/lib/ui-kit/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/ui-kit/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAYxC,MAAM,cAAc,GAAkC;IACpD,OAAO,EAAE,4EAA4E;IACrF,SAAS,EACP,0FAA0F;CAC7F,CAAC;AAEF,MAAM,sBAAsB,GAAkC;IAC5D,OAAO,EAAE,uCAAuC;IAChD,SAAS,EAAE,wCAAwC;CACpD,CAAC;AAEF,MAAM,WAAW,GAAG,2DAA2D,CAAC;AAEhF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CACvB,CAAC,EACC,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,SAAS,GACV,EAAE,EAAE;IACH,IAAI,QAAQ,EAAE;QACZ,OAAO,CACL,cACE,IAAI,EAAC,QAAQ,mBACC,MAAM,gBACR,SAAS,EACrB,QAAQ,EAAC,IAAI,EACb,SAAS,EAAE,GAAG,WAAW,gBAAgB,sBAAsB,CAAC,OAAO,CAAC,IACtE,SAAS,IAAI,EACf,EAAE,YAEF,eAAM,SAAS,EAAC,qBAAqB,YAAE,IAAI,IAAI,QAAQ,GAAQ,GAC3D,CACP,CAAC;KACH;IAED,OAAO,CACL,YACE,SAAS,EAAE,GAAG,WAAW,iBAAiB,cAAc,CAAC,OAAO,CAAC,IAAI,SAAS,IAAI,EAAE,EAAE,EACtF,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,gBACJ,SAAS,YAErB,eAAM,SAAS,EAAC,qBAAqB,YAAE,IAAI,IAAI,QAAQ,GAAQ,GAC7D,CACL,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/ui-kit/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAWxC,MAAM,cAAc,GAAkC;IACpD,OAAO,EAAE,4EAA4E;IACrF,SAAS,EACP,0FAA0F;CAC7F,CAAC;AAEF,MAAM,sBAAsB,GAAkC;IAC5D,OAAO,EAAE,uCAAuC;IAChD,SAAS,EAAE,wCAAwC;CACpD,CAAC;AAEF,MAAM,WAAW,GAAG,yDAAyD,CAAC;AAE9E,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CACvB,CAAC,EACC,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,SAAS,GACV,EAAE,EAAE;IACH,IAAI,QAAQ,EAAE;QACZ,OAAO,CACL,cACE,IAAI,EAAC,QAAQ,mBACC,MAAM,gBACR,SAAS,EACrB,QAAQ,EAAC,IAAI,EACb,SAAS,EAAE,GAAG,WAAW,gBAAgB,sBAAsB,CAAC,OAAO,CAAC,IACtE,SAAS,IAAI,EACf,EAAE,YAED,QAAQ,CAAC,CAAC,CAAC,CACV,wBAAM,QAAQ,GAAO,CACtB,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,4BAA4B,YAAE,IAAI,GAAO,CACzD,GACG,CACP,CAAC;KACH;IAED,OAAO,CACL,YACE,SAAS,EAAE,GAAG,WAAW,iBAAiB,cAAc,CAAC,OAAO,CAAC,IAAI,SAAS,IAAI,EAAE,EAAE,EACtF,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,gBACJ,SAAS,YAEpB,QAAQ,CAAC,CAAC,CAAC,CACV,wBAAM,QAAQ,GAAO,CACtB,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,4BAA4B,YAAE,IAAI,GAAO,CACzD,GACC,CACL,CAAC;AACJ,CAAC,CACF,CAAC"}

package/lib/ui-kit/IconButton.d.ts

@@ -0,0 +1,6 @@
+import type { ButtonProps } from './Button';
+export interface IconButtonProps extends ButtonProps {
+    icon?: string;
+    aboveText?: string;
+}
+export declare const IconButton: (props: import("@redneckz/uni-jsx").PropsWithChildren<IconButtonProps, any>, context?: any) => any;

package/lib/ui-kit/IconButton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
+import { JSX } from '@redneckz/uni-jsx';
+import { AppleIcon, PlayMarket } from '../Icons.js';
+import { Button } from './Button.js';
+const ICONS = { AppleIcon, PlayMarket };
+export const IconButton = JSX((props) => {
+    return (_jsx(Button, { ...props, children: props.icon ? (_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "mr-2", children: ICONS[props.icon]?.() }), _jsxs("div", { children: [_jsx("div", { className: "text-xxs text-left", children: props.aboveText }), _jsx("div", { className: "text-sm font-medium text-left", children: props.text })] })] })) : null }));
+});
+//# sourceMappingURL=IconButton.js.map

package/lib/ui-kit/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../src/ui-kit/IconButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,KAAK,GAAG,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;AAOxC,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAkB,CAAC,KAAK,EAAE,EAAE;IACvD,OAAO,CACL,KAAC,MAAM,OAAK,KAAK,YACd,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,eAAK,SAAS,EAAC,mBAAmB,aAChC,cAAK,SAAS,EAAC,MAAM,YAAE,KAAK,CAAC,KAAK,CAAC,IAA0B,CAAC,EAAE,EAAE,GAAO,EACzE,0BACE,cAAK,SAAS,EAAC,oBAAoB,YAAE,KAAK,CAAC,SAAS,GAAO,EAC3D,cAAK,SAAS,EAAC,+BAA+B,YAAE,KAAK,CAAC,IAAI,GAAO,IAC7D,IACF,CACP,CAAC,CAAC,CAAC,IAAI,GACD,CACV,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/lib/utils/getColSpan.d.ts

@@ -0,0 +1 @@
+export declare const getColSpan: (className: string) => number;

package/lib/utils/getColSpan.js

@@ -0,0 +1,6 @@
+export const getColSpan = (className) => {
+    const colSpanPrefix = 'col-span-';
+    const colSpanStr = className.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
+    return colSpanStr ? parseInt(colSpanStr.substring(colSpanPrefix.length), 10) : 12;
+};
+//# sourceMappingURL=getColSpan.js.map

package/lib/utils/getColSpan.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getColSpan.js","sourceRoot":"","sources":["../../src/utils/getColSpan.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,SAAiB,EAAE,EAAE;IAC9C,MAAM,aAAa,GAAG,WAAW,CAAC;IAClC,MAAM,UAAU,GAAG,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC;IACnF,OAAO,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,SAAS,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AACpF,CAAC,CAAC"}

package/lib/utils/getGeolocation.d.ts

@@ -0,0 +1 @@
+export declare const getGeolocation: () => Promise<GeolocationCoordinates>;

package/lib/utils/getGeolocation.js

@@ -0,0 +1,2 @@
+export const getGeolocation = async () => new Promise((resolve) => navigator.geolocation.getCurrentPosition(({ coords }) => resolve(coords)));
+//# sourceMappingURL=getGeolocation.js.map

package/lib/utils/getGeolocation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getGeolocation.js","sourceRoot":"","sources":["../../src/utils/getGeolocation.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,IAAI,EAAE,CACvC,IAAI,OAAO,CAAyB,CAAC,OAAO,EAAE,EAAE,CAC9C,SAAS,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAC1E,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.2.56",
+  "version": "0.2.59",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",

package/src/BaseTile.tsx

@@ -1,17 +1,19 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Img } from './Img';
-import type { BlockVersion, Picture, UniBlockProps } from './types';
+import type { BlockVersion, Picture, UniBlockProps, TitleSize } from './types';
 import { BlockItem } from './ui-kit/BlockItem';
-import type { ButtonProps } from './ui-kit/Button';
-import { Button } from './ui-kit/Button';
+import type { IconButtonProps } from './ui-kit/IconButton';
+import { IconButton } from './ui-kit/IconButton';
 import { useLink } from './useLink';
+import { getColSpan } from './utils/getColSpan';
 
 export interface BaseTileContent {
   title?: string;
+  titleSize?: TitleSize;
   description?: string;
   image?: Picture;
   items?: string[];
-  buttons?: ButtonProps[];
+  buttons?: IconButtonProps[];
   version?: BlockVersion;
 }
 
@@ -23,6 +25,7 @@ export const BaseTile = JSX<BaseTileProps>(
     className,
     context,
     title,
+    titleSize,
     description,
     children,
     buttons,
@@ -34,41 +37,54 @@ export const BaseTile = JSX<BaseTileProps>(
     const { handlerDecorator } = context;
     return (
       <div className={`font-sans flex flex-col grow h-full`}>
-        {title && renderTitle(title, className)}
-        <div className="flex grow justify-between mt-4">
+        {title && renderTitle(title, titleSize || getTitleSizeByClassName(className))}
+        <div className="flex grow justify-between">
           <div className="flex flex-col justify-between items-start">
             <div>
               {description ? (
-                <div className="font-normal text-base max-w-[600px] mb-6">{description}</div>
+                <div className="font-normal text-base max-w-[600px] mb-5">{description}</div>
               ) : null}
               {children}
               {items?.length ? renderItems(items, version) : null}
             </div>
             {buttons?.length ? (
-              <div className="flex mt-6 gap-4">
+              <div className="flex mt-9 gap-3">
                 {buttons.map((button, index) =>
                   renderButton(useLink({ router, handlerDecorator }, button), index),
                 )}
               </div>
             ) : null}
           </div>
-          {image?.src && <Img className="mt-auto" image={image} />}
+          {image?.src && <Img className="mt-auto ml-7" image={image} />}
         </div>
       </div>
     );
   },
 );
 
-function renderTitle(title: string, className: string = '') {
-  const colSpanPrefix = 'col-span-';
-  const colSpanStr = className.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
-  const colSpan = colSpanStr ? parseInt(colSpanStr.substring(colSpanPrefix.length), 10) : 12;
+function renderTitle(title: string, titleSize: TitleSize) {
+  switch (titleSize) {
+    case 'XL':
+      return <h1 className={`${TITLE_CLASSES} text-title-lg`}>{title}</h1>;
+    case 'L':
+      return <h2 className={`${TITLE_CLASSES} text-title`}>{title}</h2>;
+    case 'M':
+      return <h2 className={`${TITLE_CLASSES} text-title-sm`}>{title}</h2>;
+    case 'S':
+      return <h2 className={`${TITLE_CLASSES} text-title-xs`}>{title}</h2>;
+    default:
+      return <h2 className={`${TITLE_CLASSES} text-title`}>{title}</h2>;
+  }
+}
+
+function getTitleSizeByClassName(className: string = '') {
+  const colSpan = getColSpan(className);
   if (colSpan <= 4) {
-    return <h3 className={`${TITLE_CLASSES} text-title-xs`}>{title}</h3>;
+    return 'S';
   } else if (colSpan <= 8) {
-    return <h3 className={`${TITLE_CLASSES} text-title-sm`}>{title}</h3>;
+    return 'M';
   } else {
-    return <h2 className={`${TITLE_CLASSES} text-title`}>{title}</h2>;
+    return 'L';
   }
 }
 
@@ -82,6 +98,6 @@ function renderItems(items: string[] = [], version?: BlockVersion) {
   );
 }
 
-function renderButton(button: ButtonProps, i: number) {
-  return button?.text ? <Button key={String(i)} {...button} version={button.version} /> : null;
+function renderButton(button: IconButtonProps, i: number) {
+  return button?.text ? <IconButton key={String(i)} {...button} /> : null;
 }

package/src/Blocks.ts

@@ -10,6 +10,7 @@ import { ProductGallery, ProductGalleryContent } from './ProductGallery';
 import { StepsBlock, StepsBlockContent } from './StepsBlock';
 import { ProductTile, ProductTileContent } from './ProductTile';
 import { BaseTileContent } from './BaseTile';
+import { PromoTile, PromoTileContent } from './PromoTile';
 import { Tile } from './Tile';
 
 export const Blocks = {
@@ -17,6 +18,7 @@ export const Blocks = {
   Footer,
   Placeholder,
   Tile,
+  PromoTile,
   ProductTile,
   ProductBlock,
   StepsBlock,
@@ -32,6 +34,7 @@ export type BlockContent =
   | PlaceholderContent
   | BaseTileContent
   | ProductTileContent
+  | PromoTileContent
   | ProductBlockInnerContent
   | StepsBlockContent
   | BenefitsBlockContent

package/src/ContentPage.fixture.tsx

@@ -1,9 +1,9 @@
 import { context } from './setup-fixture';
 
 import { Blocks } from './Blocks';
-import { toMobilePage } from './content-page-repository/toMobilePage';
 import { BlockDecorator, ContentPage } from './ContentPage';
 import { MobileBlocks } from './MobileBlocks';
+import { toMobilePage } from './toMobilePage';
 import type { ContentPageDef } from './types';
 
 const data = require('./ContentPage.page.json');

package/src/ContentPage.page.json

@@ -74,7 +74,6 @@
             },
             "productBlock": {
               "title": "Ставка от 12,5% годовых на срок до 3 лет!»",
-              "description": "Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.",
               "items": [
                 "Потребительский кредит по специальной процентной ставке",
                 "Получите деньги без залога и поручительства",
@@ -107,11 +106,6 @@
             "productBlock": {
               "title": "Дополнительные бонусные баллы за покупки!»",
               "description": "Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.",
-              "items": [
-                "Потребительский кредит по специальной процентной ставке",
-                "Получите деньги без залога и поручительства",
-                "Кредитный лимит до 5 млн рублей"
-              ],
               "buttons": [
                 {
                   "href": "https://rshb.ru",
@@ -188,8 +182,8 @@
           "title": "деньги",
           "format": "webp",
           "size": {
-            "width": 220,
-            "height": 220
+            "width": 180,
+            "height": 180
           }
         }
       },
@@ -203,6 +197,7 @@
       "style": ["col-span-4"],
       "content": {
         "title": "Ипотека",
+        "titleSize": "M",
         "description": "Широкий выбор ипотечных программ с государственной поддержкой. Специальный предложения от 12,2 %",
         "buttons": [
           {
@@ -235,8 +230,8 @@
           "title": "Кредитка",
           "format": "webp",
           "size": {
-            "width": 220,
-            "height": 220
+            "width": 180,
+            "height": 180
           }
         }
       },
@@ -262,8 +257,8 @@
           "alt": "Column",
           "format": "webp",
           "size": {
-            "width": 220,
-            "height": 220
+            "width": 180,
+            "height": 180
           }
         }
       },
@@ -294,8 +289,8 @@
           "title": "Глобус",
           "format": "webp",
           "size": {
-            "width": 220,
-            "height": 220
+            "width": 200,
+            "height": 200
           }
         }
       }
@@ -359,11 +354,12 @@
       }
     },
     {
-      "type": "Tile",
+      "type": "PromoTile",
       "style": ["col-span-4"],
       "content": {
         "title": "Акции и спецпредложения",
         "version": "secondary",
+        "date": "2022-04-16",
         "description": "Пенсионный кредит по специальной процентной ставке",
         "buttons": [
           {
@@ -395,7 +391,23 @@
       },
       "mobile": {
         "style": ["col-span-12"]
-      }
+      },
+      "buttons": [
+        {
+          "aboveText": "Загрузите в",
+          "text": "App Store",
+          "icon": "AppleIcon",
+          "href": "/credits",
+          "version": "secondary"
+        },
+        {
+          "aboveText": "Доступно в",
+          "text": "Google Play",
+          "icon": "PlayMarket",
+          "href": "/credits",
+          "version": "secondary"
+        }
+      ]
     },
     {
       "type": "Unknown",
@@ -497,8 +509,8 @@
           "alt": "Кредиты в РСХБ",
           "format": "webp",
           "size": {
-            "width": 220,
-            "height": 220
+            "width": 180,
+            "height": 180
           }
         }
       },
@@ -539,8 +551,8 @@
           "alt": "Пенсионный кредит в РСХБ",
           "format": "webp",
           "size": {
-            "width": 220,
-            "height": 220
+            "width": 180,
+            "height": 180
           }
         }
       },
@@ -581,8 +593,8 @@
           "alt": "Кредит под залог недвижимости в РСХБ",
           "format": "webp",
           "size": {
-            "width": 220,
-            "height": 220
+            "width": 180,
+            "height": 180
           }
         }
       },
@@ -596,6 +608,7 @@
       "version": "secondary",
       "content": {
         "title": "Кредит пенсионный",
+        "titleSize": "M",
         "description": "Для людей в возрасте до 75 лет",
         "benefits": [
           {

package/src/Icons/AppleIcon.tsx

@@ -0,0 +1,15 @@
+export const AppleIcon = (props?: Record<string, any>) => (
+  <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#a)">
+      <path
+        d="M19.406 12.761c-.023-3.028 2.793-4.511 2.93-4.572-1.603-2.073-4.075-2.357-4.968-2.377-2.083-.204-4.098 1.117-5.174 1.117-1.076 0-2.725-1.097-4.488-1.056-2.266.04-4.395 1.198-5.563 3.007-2.404 3.698-.618 9.124 1.694 12.09 1.145 1.464 2.496 3.09 4.259 3.028 1.717-.06 2.358-.975 4.441-.975 2.06 0 2.656.975 4.465.935 1.854-.02 3.022-1.463 4.12-2.947 1.329-1.666 1.855-3.332 1.878-3.413 0 0-3.549-1.2-3.594-4.837Zm-3.389-8.92c.916-1.037 1.557-2.419 1.374-3.841-1.35.061-3.022.833-3.984 1.829-.847.894-1.625 2.337-1.42 3.698 1.512.102 3.069-.67 4.03-1.686Z"
+        fill="#42AB44"
+      />
+    </g>
+    <defs>
+      <clipPath id="a">
+        <rect width="24" height="24" rx="6" fill="#fff" />
+      </clipPath>
+    </defs>
+  </svg>
+);

package/src/Icons/PlayMarket.tsx

@@ -0,0 +1,8 @@
+export const PlayMarket = (props?: Record<string, any>) => (
+  <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M1 22.427V2.576C1 1.883 1.447 1.284 2.094 1L14.85 12.498 2.089 24a1.89 1.89 0 0 1-.795-.646A1.625 1.625 0 0 1 1 22.427Zm17.899-6.282-13.95 7.259 11.002-9.915 2.948 2.656Zm4.335-5.035c.237.162.428.37.561.61.133.239.203.502.205.77.002.267-.064.53-.193.771s-.317.452-.551.617l-2.964 1.542-3.241-2.922 3.24-2.92 2.944 1.532ZM4.959 1.598l13.938 7.253-2.945 2.654L4.958 1.598Z"
+      fill="#42AB44"
+    />
+  </svg>
+);

package/src/Icons/index.ts

@@ -15,3 +15,5 @@ export { ProfileIcon } from './ProfileIcon';
 export { SignDocsIcon } from './SignDocsIcon';
 export { TelegramIcon } from './TelegramIcon';
 export { VKIcon } from './VKIcon';
+export { AppleIcon } from './AppleIcon';
+export { PlayMarket } from './PlayMarket';

package/src/MobileAppTile.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Tile } from './Tile';
+import type { BaseTileContent } from './BaseTile';
 import type { UniBlockProps } from './types';
 
 export interface QRCode {
@@ -7,7 +8,7 @@ export interface QRCode {
   href?: string;
 }
 
-export interface MobileAppTileContent {
+export interface MobileAppTileContent extends BaseTileContent {
   title?: string;
   qr?: QRCode;
 }
@@ -15,9 +16,9 @@ export interface MobileAppTileContent {
 export interface MobileAppTileProps extends MobileAppTileContent, UniBlockProps {}
 
 export const MobileAppTile = JSX<MobileAppTileProps>(
-  ({ className, context, title = 'Мобильное приложение', qr }) => {
+  ({ className, context, title = 'Мобильное приложение', qr, buttons = [] }) => {
     return (
-      <Tile className={className} context={context} title={title}>
+      <Tile className={className} context={context} title={title} buttons={buttons}>
         <div className="flex items-center">
           {qr?.src && qr?.href && (
             <a href={qr.href} target="_blank">

package/src/ProductBlock.tsx

@@ -15,7 +15,9 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
   const router = context.useRouter();
   const { handlerDecorator } = context;
   return (
-    <section className={`font-sans bg-white pl-12 pr-[7.5rem] py-10 ${className || ''}`}>
+    <section
+      className={`font-sans bg-white pt-10 pl-[50px] pb-[50px] pr-[7.5rem] ${className || ''}`}
+    >
       {breadcrumbs?.length ? (
         <div className="text-xs mb-6">
           {joinList(<span className="text-secondary-text mx-2">/</span>)(

package/src/ProductBlockInner.tsx

@@ -16,16 +16,16 @@ export interface ProductBlockInnerProps extends ProductBlockInnerContent, UniBlo
 export const ProductBlockInner = JSX<ProductBlockInnerProps>(
   ({ className, context, title, description, benefits, buttons, image, items }) => {
     return (
-      <div className={`flex justify-between items-stretch ${className || ''}`}>
+      <div className={`flex grow justify-between items-stretch ${className || ''}`}>
         <div className={'flex flex-col'}>
           {title && (
-            <h1 className="font-medium text-title-lg m-0 whitespace-pre-wrap max-w-[600px]">
+            <h1 className="font-medium text-title-lg m-0 mb-4 whitespace-pre-wrap max-w-[600px]">
               {title}
             </h1>
           )}
           <BaseTile context={context} description={description} items={items} buttons={buttons}>
             {benefits?.length ? (
-              <div className="flex gap-6 mt-6 mb-12">{benefits.map(renderBenefit)}</div>
+              <div className="flex gap-6 mt-6 mb-3.5">{benefits.map(renderBenefit)}</div>
             ) : null}
           </BaseTile>
         </div>

package/src/ProductGallery.tsx

@@ -54,9 +54,13 @@ export const ProductGallery = JSX<ProductGalleryProps>(
 
 function renderProductBlock(block: ProductBlockInnerContent, i: number, context) {
   return (
-    <section key={String(i)} className="grow-0 shrink-0 basis-full" role="listitem">
-      <div className="p-11 pr-[7.5rem] ">
-        <ProductBlockInner context={context} {...block} />
+    <section key={String(i)} className="flex grow-0 shrink-0 basis-full" role="listitem">
+      <div className="p-10 flex grow">
+        <ProductBlockInner
+          className="pl-2.5 pt-2.5 pb-1.5 pr-[6.25rem]"
+          context={context}
+          {...block}
+        />
       </div>
     </section>
   );

package/src/ProductTile.tsx

@@ -14,7 +14,7 @@ export const ProductTile = JSX<ProductTileProps>((props) => {
   const { benefits, version } = props;
   return (
     <Tile {...props}>
-      <div className="flex mt-5 mb-10">
+      <div className="flex mt-5 mb-1">
         {benefits?.length ? (
           <div className="mr-8">{benefits.map(renderBenefitDescription)}</div>
         ) : null}
@@ -32,14 +32,14 @@ function renderBenefitLabel(benefit: Benefit, i: number, version = 'primary') {
     secondary: 'text-white',
   };
   return (
-    <div key={String(i)} className={`text-sm mb-4 ${labelStyleMap[version]}`}>
+    <div key={String(i)} className={`text-sm ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
       {benefit.label}
     </div>
   );
 }
 function renderBenefitDescription(benefit: Benefit, i: number) {
   return (
-    <div key={String(i)} className="text-xl font-medium mb-2.5">
+    <div key={String(i)} className={`text-xl font-medium ${i ? 'mt-2.5' : ''}`}>
       {benefit.description}
     </div>
   );

package/src/PromoTile.tsx

@@ -0,0 +1,47 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BaseTileContent } from './BaseTile';
+import { Tile } from './Tile';
+import type { UniBlockProps } from './types';
+
+export interface PromoTileContent extends BaseTileContent {
+  date?: string;
+}
+
+export interface PromoTileProps extends PromoTileContent, UniBlockProps {}
+
+export const PromoTile = JSX<PromoTileProps>(
+  ({
+    className,
+    context,
+    title = 'Акции и спецпредложения',
+    date,
+    description,
+    buttons = [],
+    version,
+  }) => {
+    return (
+      <Tile
+        className={className}
+        context={context}
+        title={title}
+        buttons={buttons}
+        version={version}
+      >
+        <div>
+          {date && <div className="text-sm mb-2">{formatDate(date)}</div>}
+          <div className="text-base">{description}</div>
+        </div>
+      </Tile>
+    );
+  },
+);
+
+function formatDate(date: string) {
+  const dateObj = new Date(date);
+  const dateFormat: Intl.DateTimeFormatOptions = {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  };
+  return dateObj.toLocaleString('ru-RU', dateFormat).replace('г.', '');
+}