@redneckz/wildless-cms-uni-blocks 0.3.73 → 0.3.75

package/mobile/src/ui-kit/BlocksList/renderBlocksList.tsx

@@ -1,30 +1,35 @@
 import type { JSXBlock } from '../../components/ContentPage/ContentPage';
 import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
-import type { BlockDef, ColumnsCount } from './BlocksListProps';
+import type { UniBlockProps } from '../../types';
+import { style2className } from '../../utils/style2className';
+import type { BlockDef } from './BlocksListProps';
 import { EmbeddableBlocks } from './EmbeddableBlocks';
 
 type EmbeddableBlocksProps = {
   blocks?: BlockDef[];
   context: ContentPageContext;
-  columns?: ColumnsCount;
   className?: string;
 };
 
-export const renderBlocksList = ({ blocks, context, className, columns }: EmbeddableBlocksProps) =>
-  blocks?.length ? blocks.map(renderBlock({ context, className, columns })) : null;
+export const renderBlocksList = ({ blocks, context, className = '' }: EmbeddableBlocksProps) =>
+  blocks?.length ? blocks.map(renderBlock({ context, className })) : null;
 
 const renderBlock =
-  ({ context, columns, className }: EmbeddableBlocksProps) =>
+  ({ context, className }: UniBlockProps) =>
   (block: BlockDef, i: number) => {
     const type = block?.blockListType;
     if (!type || !(type in EmbeddableBlocks)) {
       return null;
     }
-    const columnsCountClass = columns === 2 ? 'w-1/2' : '';
+    const classNameBlock = style2className(block?.style);
     const EmbeddedBlock: JSXBlock = EmbeddableBlocks[type];
+
     return (
-      <div className={`${className} ${columnsCountClass}`} key={`block_${i}`}>
-        <EmbeddedBlock context={context} {...block} className="!p-0" />
-      </div>
+      <EmbeddedBlock
+        key={`block_${i}`}
+        context={context}
+        {...block}
+        className={`${className} ${classNameBlock}`}
+      />
     );
   };

package/mobile/src/ui-kit/Button/ButtonInner.tsx

@@ -8,6 +8,7 @@ interface ButtonInnerProps extends ButtonWithIconProps {
 
 export const ButtonInner = JSX<ButtonInnerProps>((props) => {
   const { text, aboveText, appendLeft, appendRight } = props;
+
   return (
     <div className={getButtonStyle(props)}>
       {appendLeft ? appendLeft : null}

package/mobile/src/ui-kit/Button/ButtonSection.tsx

@@ -10,6 +10,7 @@ export interface ButtonSectionProps extends ButtonContent, UniBlockProps {}
 export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '', buttons }) => {
   const { handlerDecorator } = context;
   const router = context.useRouter();
+
   return buttons?.length ? (
     <div className={className}>
       {buttons.map((button, index) =>

package/mobile/src/ui-kit/Foldable/Foldable.tsx

@@ -8,6 +8,7 @@ import { foldableBlockClassNames, useActiveHandler } from './useActiveHandler';
 
 export type FoldableBlocks = VNode[];
 export type Render = (_: VNode, isActive: boolean) => VNode;
+
 export interface FoldableProps {
   context: ContentPageContext;
   foldButtonLabel?: string;
@@ -17,11 +18,13 @@ export interface FoldableProps {
   foldButtonDataTheme?: ColorPalette;
   isUnfolded?: boolean;
   render?: Render;
+  containerClasses?: string;
 }
 
 export interface RenderBlocksParams {
   blocksToHide: number;
   isActive: boolean;
+  containerClasses?: string;
 }
 
 export const Foldable = JSX<FoldableProps>(
@@ -33,6 +36,7 @@ export const Foldable = JSX<FoldableProps>(
     foldButtonLabel,
     foldButtonDataTheme,
     isUnfolded,
+    containerClasses,
     render = (_) => _,
   }) => {
     const blocksToHide = clamp(hiddenBlocksNum, 0, blocks.length);
@@ -44,7 +48,7 @@ export const Foldable = JSX<FoldableProps>(
 
     return blocks ? (
       <div>
-        {renderBlocks(blocks, render, { blocksToHide, isActive })}
+        {renderBlocks(blocks, render, { blocksToHide, isActive, containerClasses })}
         {hiddenBlocksNum ? (
           <button
             className={
@@ -55,7 +59,7 @@ export const Foldable = JSX<FoldableProps>(
             onClick={handleToggle}
           >
             <span className="pr-3">{isActive ? 'Скрыть' : foldButtonLabel}</span>
-            <Icon name={icon} iconVersion="white" width="20" height="20" asSVG />
+            {icon && <Icon name={icon} iconVersion="white" width="20" height="20" asSVG />}
           </button>
         ) : null}
       </div>
@@ -66,7 +70,7 @@ export const Foldable = JSX<FoldableProps>(
 const renderBlocks = (
   blocks: FoldableBlocks,
   render: Render,
-  { blocksToHide, isActive }: RenderBlocksParams,
+  { blocksToHide, isActive, containerClasses }: RenderBlocksParams,
 ) => {
   const visibleBlocks = blocks.slice(0, blocks.length - blocksToHide);
   const hiddenBlocks = blocks.slice(-blocksToHide);
@@ -74,7 +78,7 @@ const renderBlocks = (
   return render(
     <div>
       {visibleBlocks}
-      <div className={foldableBlockClassNames}>{hiddenBlocks}</div>
+      <div className={`${foldableBlockClassNames} ${containerClasses}`}>{hiddenBlocks}</div>
     </div>,
     isActive,
   );

package/mobile/src/ui-kit/Input/Input.tsx

@@ -8,6 +8,7 @@ export const Input = JSX<InputProps>(
       const validInputValue = e.target.validity.valid ? e.target.value : value;
       onChange(validInputValue);
     };
+
     return (
       <input
         className={className}

package/mobile/src/ui-kit/InputRange/InputRange.tsx

@@ -25,6 +25,7 @@ export const InputRange = JSX<InputRangeProps>(
         onChange(max);
       }
     };
+
     return (
       <div className={className}>
         <label className="block relative">

package/mobile/src/ui-kit/List/ListItem.tsx

@@ -46,5 +46,6 @@ export const getListStyle = (version: ListItemVersion) => {
     tile: 'w-[7px] h-[7px] min-w-[7px] min-h-[7px]',
     'tile-white': 'w-[7px] h-[7px] min-w-[7px] min-h-[7px]',
   };
+
   return `${LIST_STYLE_CLASSES[version]} ${LIST_DOT_STYLE_MAP[version]} ${size[version]}`;
 };

package/mobile/src/ui-kit/SearchBar/SearchBar.tsx

@@ -4,6 +4,7 @@ import { Img } from '../Img/Img';
 
 export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
   const { term, setTerm } = context.useSearch();
+
   return (
     <form className={`relative ${className || ''}`}>
       <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none">

package/mobile/src/ui-kit/SwipeListControl/utils/getIndexParts.ts

@@ -20,5 +20,6 @@ export const getIndexParts = (
 
   const [start, end] = scrollPoints[index];
   const fraction = (scrollLeft - start) / (end - start);
+
   return { index, fraction };
 };

package/mobile/src/ui-kit/Tabs/Tabs.tsx

@@ -19,6 +19,7 @@ const tabDescriptionStyle = (isActive = false) =>
 const renderTab =
   (currentTabIndex: number, onTabClick: TabClickHandler) => (tab: Tab, index: number) => {
     const isActive = currentTabIndex === index;
+
     return (
       <div
         key={String(index)}

package/mobile/src/ui-kit/TopItem/TopItem.tsx

@@ -60,5 +60,6 @@ const getTextClasses = (bgColor: BgColorVersion, active = false, flat = false) =
   const nonActiveAtoms = `${
     flat ? 'text-primary-text' : 'text-secondary-text'
   } hover:text-primary-main`;
+
   return `${active ? 'text-primary-main' : nonActiveAtoms} ${TEXT_CLASSES}`;
 };

package/mobile/src/utils/adjustHref.ts

@@ -11,6 +11,7 @@ export const adjustHref = (
 
   const relativeHref = toRelativeHref(href, router) || '';
   const isMobilePage = router?.pathname.startsWith(MOBILE_URL_PATH);
+
   return isMobilePage && !isURL(relativeHref) ? `${MOBILE_URL_PATH}${relativeHref}` : relativeHref;
 };
 
@@ -20,5 +21,6 @@ const toRelativeHref = (href: string | undefined, router: { href?: string }) =>
   }
 
   const origin = getOrigin(router?.href);
+
   return origin ? href.replace(origin, '') || '/' : href;
 };

package/mobile/src/utils/getColSpan.ts

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

package/mobile/src/utils/roundTo.ts

@@ -1,4 +1,5 @@
 export const roundTo = (value: number, precision = 2) => {
   const factor = Math.pow(10, precision);
+
   return Math.round(parseFloat(String(value)) * factor) / factor;
 };

package/mobile/src/utils/tableFunc.ts

@@ -4,5 +4,6 @@ export const tableFunc =
   <Input, Output>(table: Array<[Predicate<Input>, Output]>) =>
   (input: Input): Output | undefined => {
     const [, output] = table.find(([predicate]) => predicate(input)) || [];
+
     return output;
   };

package/mobile/src/utils/url.ts

@@ -11,6 +11,7 @@ export const getOrigin = (href?: string) => {
   const protoSeparator = '//';
   const endOfProto = url.indexOf(protoSeparator);
   const endOfOrigin = url.indexOf('/', endOfProto + protoSeparator.length);
+
   return endOfOrigin !== -1 ? url.substring(0, endOfOrigin) : url;
 };
 
@@ -20,5 +21,6 @@ export const getHash = (href?: string) => {
   }
 
   const hashIndex = href.indexOf('#');
+
   return hashIndex !== -1 ? href.substring(hashIndex, href.length) : undefined;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.73",
+  "version": "0.3.75",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/api/DaDataAPI.ts

@@ -21,9 +21,11 @@ export function DaDataAPI(baseURL = '') {
       });
 
       const data = (await response.json()) as DaDataResult;
+
       return data?.suggestions?.[0]?.data?.city;
     } catch (e) {
       console.error(e);
+
       return null;
     }
   }

package/src/api/LikeAPI.ts

@@ -37,6 +37,7 @@ export function LikeAPI(projectId: string, baseURL = '') {
       return likes || [];
     } catch (e) {
       console.error(e);
+
       return [];
     }
   }
@@ -67,6 +68,7 @@ export function LikeAPI(projectId: string, baseURL = '') {
       return likes || 0;
     } catch (e) {
       console.error(e);
+
       return 0;
     }
   }
@@ -100,6 +102,7 @@ export function LikeAPI(projectId: string, baseURL = '') {
       return likes || 0;
     } catch (e) {
       console.error(e);
+
       return 0;
     }
   }
@@ -133,6 +136,7 @@ export function LikeAPI(projectId: string, baseURL = '') {
       return { token, name } as UserData;
     } catch (e) {
       console.error(e);
+
       return {} as UserData;
     }
   }

package/src/components/Accordion/Accordion.fixture.mobile.tsx

@@ -1,16 +1,14 @@
 import { context } from '../../react/setup-fixture';
-import { HEADLINE } from '../Headline/Headline.fixture';
-import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
-import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
-import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
-import type { AccordionProps } from './Accordion';
-import { Accordion } from './Accordion';
 import type {
   HeadlineBlockListDef,
   LinkDocsBlockListDef,
-  PictureTextBlockListDef,
   TextBlockBlockListDef,
 } from '../../ui-kit/BlocksList/BlocksListProps';
+import { HEADLINE } from '../Headline/Headline.fixture';
+import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
+import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
+import type { AccordionProps } from './Accordion';
+import { Accordion } from './Accordion';
 
 const TEXT_BLOCK_ACCORDION_BLOCK: TextBlockBlockListDef = {
   blockListType: 'TextBlock',
@@ -22,11 +20,6 @@ const HEADLINE_ACCORDION_BLOCK: HeadlineBlockListDef = {
   ...HEADLINE,
 };
 
-const PICTURE_TEXT_ACCORDION_BLOCK: PictureTextBlockListDef = {
-  blockListType: 'PictureText',
-  ...PICTURE_TEXT,
-};
-
 const LINK_DOCS_ACCORDION_BLOCK: LinkDocsBlockListDef = {
   blockListType: 'LinkDocs',
   ...linkDocsContentExample,
@@ -41,21 +34,17 @@ const propsTextBlock: AccordionProps = {
   accordionItems: [
     {
       label: 'Accordion label 1',
-      blocks: [TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK],
-    },
-    {
-      label: 'Accordion label 2',
       labelIcon: {
         icon: 'CardIcon',
       },
-      blocks: [PICTURE_TEXT_ACCORDION_BLOCK],
+      blocks: [TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK],
     },
     {
-      label: 'Accordion label 3',
+      label: 'Accordion label 2',
       blocks: [HEADLINE_ACCORDION_BLOCK],
     },
     {
-      label: 'Accordion label 4',
+      label: 'Accordion label 3',
       blocks: [LINK_DOCS_ACCORDION_BLOCK],
     },
   ],

package/src/components/Accordion/Accordion.fixture.tsx

@@ -22,42 +22,50 @@ import { Accordion } from './Accordion';
 
 const TEXT_BLOCK_ACCORDION_BLOCK: TextBlockBlockListDef = {
   blockListType: 'TextBlock',
+  style: ['col-span-12'],
   ...TEXT_BLOCK,
 };
 
 const HEADLINE_ACCORDION_BLOCK: HeadlineBlockListDef = {
   blockListType: 'Headline',
+  style: ['col-span-12'],
   ...HEADLINE,
 };
 
 const PICTURE_TEXT_ACCORDION_BLOCK: PictureTextBlockListDef = {
   blockListType: 'PictureText',
+  style: ['col-span-12'],
   ...PICTURE_TEXT,
 };
 
 const LINK_DOCS_ACCORDION_BLOCK: LinkDocsBlockListDef = {
   blockListType: 'LinkDocs',
+  style: ['col-span-12'],
   ...linkDocsContentExample,
   title: '',
 };
 
 const TILES_ACCORDION_BLOCK: TileBlockListDef = {
   blockListType: 'Tile',
+  style: ['col-span-6'],
   ...TILE,
 };
 
 const PRODUCT_TILES_ACCORDION_BLOCK: ProductTileBlockListDef = {
   blockListType: 'ProductTile',
+  style: ['col-span-6'],
   ...PRODUCT_TILE,
 };
 
 const GALLERY_ACCORDION_BLOCK: GalleryBlockListDef = {
   blockListType: 'Gallery',
+  style: ['col-span-12'],
   ...GALLERY,
 };
 
 const MINI_GALLERY_ACCORDION_BLOCK: MiniGalleryBlockListDef = {
   blockListType: 'MiniGallery',
+  style: ['col-span-12'],
   ...MINI_GALLERY,
 };
 
@@ -84,11 +92,11 @@ const propsDefaultBlock: AccordionProps = {
     },
     {
       label: 'Accordion label 5',
-      blocks: [TILES_ACCORDION_BLOCK],
+      blocks: [TILES_ACCORDION_BLOCK, TILES_ACCORDION_BLOCK],
     },
     {
       label: 'Accordion label 6',
-      blocks: [PRODUCT_TILES_ACCORDION_BLOCK],
+      blocks: [PRODUCT_TILES_ACCORDION_BLOCK, PRODUCT_TILES_ACCORDION_BLOCK],
     },
     {
       label: 'Accordion label 7',

package/src/components/Accordion/Accordion.mobile.tsx

@@ -16,7 +16,7 @@ export const Accordion = JSX<AccordionProps>(
           <ul className="list-none m-0 p-0">
             {accordionItems.map((item, i) => (
               <AccordionItem
-                key={`AccordionItem${i}`}
+                key={`AccordionItem_${i}`}
                 {...item}
                 context={context}
                 bordered={bordered}

package/src/components/Accordion/AccordionItem.mobile.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
+import { Img } from '../../ui-kit/Img/Img';
 import type { AccordionItemCommonProps } from './AccordionContent';
 import { AccordionItemInner } from './AccordionItemInner';
-import { Img } from '../../ui-kit/Img/Img';
 import { useActiveHandler } from './useActiveHandler';
 
 export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
@@ -40,6 +40,6 @@ export const AccordionItem = JSX<AccordionItemProps>(
   },
 );
 
-function borderedLiClass(bordered) {
+function borderedLiClass(bordered?: boolean) {
   return bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0';
 }

package/src/components/Accordion/AccordionItemInner.mobile.tsx

@@ -1,12 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { AccordionItemProps } from './AccordionItem';
 import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
+import type { AccordionItemProps } from './AccordionItem';
 
 export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, context }) => {
-  const className = 'mb-5 last:mb-0 first:mt-2';
   return (
-    <div className="transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0">
-      {renderBlocksList({ context, className, blocks })}
+    <div className="flex flex-wrap transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0">
+      {renderBlocksList({ context, blocks, className: '!px-0' })}
     </div>
   );
 });

package/src/components/Accordion/AccordionItemInner.tsx

@@ -1,12 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { AccordionItemProps } from './AccordionItem';
 import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
+import type { AccordionItemProps } from './AccordionItem';
 
 export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, context }) => {
-  const className = 'mb-5 last:mb-0 pb-5';
   return (
-    <div className="transition-all duration-300 max-h-0 overflow-hidden">
-      {renderBlocksList({ context, className, blocks })}
+    <div className="grid grid-cols-12 transition-all duration-300 max-h-0 overflow-hidden">
+      {renderBlocksList({ context, blocks, className: '!p-0 mb-5' })}
     </div>
   );
 });

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -30,12 +30,15 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(
 
 const renderBenefits = (benefits: BenefitItem[]) => {
   return (
-    <div className="flex flex-wrap justify-center gap-x-20 mt-9">{benefits.map(renderStep)}</div>
+    <div className="flex flex-wrap w-full justify-center gap-x-20 mt-9">
+      {benefits.map(renderStep)}
+    </div>
   );
 };
 
 const renderStep = (benefit: BenefitItem, i: number) => {
   const description = benefit?.description || undefined;
+
   return (
     <div key={String(i)} className="flex items-center basis-1/2 max-w-[500px] mb-[46px]">
       {benefit?.icon ? (
@@ -59,6 +62,7 @@ const renderDescription = (description?: DescriptionType) => {
   if (!benefitType) {
     return null;
   }
+
   return description ? (
     <div className="font-light text-base text-secondary-text mt-2">
       {benefitType === 'list'
@@ -72,6 +76,7 @@ const renderTextBenefit = (description?: TextBenefitDef) => (description ? descr
 
 const renderListBenefit = (description?: ListBenefitDef) => {
   const listStyleType = description?.bullets ? 'list-disc pl-6' : '';
+
   return description?.items && description.items.length > 0 ? (
     <ul className={listStyleType}>
       {description.items.map((_, i) => (

package/src/components/Blocks.ts

@@ -1,12 +1,15 @@
 import { Accordion } from './Accordion/Accordion';
 import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { Bonus } from './Bonus/Bonus';
-import { ComparisonTable } from './ComparisonTable/ComparisonTable';
+import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 import { Calculator } from './Calculator/Calculator';
+import { Catalog } from './Catalog/Catalog';
+import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { Gallery } from './Gallery/Gallery';
 import { GracePeriod } from './GracePeriod/GracePeriod';
+import { GroupBlock } from './GroupBlock/GroupBlock';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
 import { Insurance } from './Insurance/Insurance';
@@ -28,8 +31,6 @@ import { StepsBlock } from './StepsBlock/StepsBlock';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
-import { GroupBlock } from './GroupBlock/GroupBlock';
-import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 
 export const Blocks = {
   Accordion,
@@ -37,6 +38,7 @@ export const Blocks = {
   Bonus,
   ComparisonTable,
   Calculator,
+  Catalog,
   ExchangeRateTile,
   Footer,
   Gallery,

package/src/components/Calculator/getMonthlyPayment.ts

@@ -27,6 +27,7 @@ export const getMonthlyPayment = (params: GetMonthlyPaymentParams) => {
 
   if (paymentType === 'annuity') {
     const annuityCoef = Number(rate) / (MONTHS_IN_YEAR * 100);
+
     return finalSum * (annuityCoef + annuityCoef / (Math.pow(1 + annuityCoef, months) - 1));
   } else {
     return finalSum / months + finalSum * (Number(rate) / 12);

package/src/components/Calculator/renderCalculatorBlock.tsx

@@ -10,6 +10,7 @@ export const renderCalculatorBlock =
       return null;
     }
     const EmbeddedBlock: JSXBlock<EmbeddableCalcProps> = EmbeddableCalcBlocks[type];
+
     return (
       <section
         key={String(i)}

package/src/components/Calculator/renderMonthsInput.tsx

@@ -16,6 +16,7 @@ export function renderMonthsInput(props: RenderMonthsInputProps) {
   const { title, minMonths, maxMonths, monthsValue, defaultMonths, setMonthsValue } = props;
   const monthText = (month) => {
     const text = Number(month) % 10 === 1 ? 'месяца' : 'месяцев';
+
     return `${month} ${text}`;
   };
 

package/src/components/Calculator/renderRate.tsx

@@ -7,6 +7,7 @@ type rateType = {
 
 export function renderRate({ rate, title, sup, className = '' }: rateType) {
   const rateFormat = String(rate).replace('.', ',');
+
   return (
     <div>
       <div className="text-sm font-light ml-3">{title}</div>

package/src/components/Catalog/Catalog.example.json

@@ -0,0 +1,57 @@
+{
+  "title": "Каталог",
+  "description": "Описание",
+  "cards": [
+    {
+      "title": "Заголовок карточки 1",
+      "description": "Описание карточки",
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 230,
+          "height": 230
+        }
+      },
+      "button": {
+        "href": "",
+        "text": "Подробнее",
+        "target": "_blank",
+        "version": "primary"
+      }
+    },
+    {
+      "title": "Заголовок карточки 2",
+      "description": "Описание карточки",
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 230,
+          "height": 230
+        }
+      },
+      "button": {
+        "href": "",
+        "text": "Подробнее",
+        "target": "_blank",
+        "version": "primary"
+      }
+    },
+    {
+      "title": "Заголовок карточки 3",
+      "description": "Описание карточки",
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 230,
+          "height": 230
+        }
+      },
+      "button": {
+        "href": "",
+        "text": "Подробнее",
+        "target": "_blank",
+        "version": "primary"
+      }
+    }
+  ]
+}