@redneckz/wildless-cms-uni-blocks 0.12.7 → 0.12.9

package/mobile/src/components/ApplicationForm/ApplicationForm.tsx

@@ -40,7 +40,9 @@ export const ApplicationForm = JSX<ApplicationFormProps>((props) => {
   return (
     <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
       <div className="container max-w-[978px]">
-        {title ? <Heading headingType="h3" title={title} className="text-center mb-8" /> : null}
+        {title ? (
+          <Heading headingType="h3" title={title} className="mb-4 sm:mb-8 sm:text-center" />
+        ) : null}
         {COMPONENTS_MAP[typeForm]({ button, link, onSubmit: handleSubmit })}
         {responseType ? <ResponseNotification responseType={responseType} /> : null}
       </div>

package/mobile/src/components/ApplicationForm/ApplicationFormAcquiring.tsx

@@ -63,9 +63,9 @@ export const ApplicationFormAcquiring = JSX<ApplicationFormsProps>((props) => {
 
   return (
     <form className="container" onSubmit={formProps.onSubmit}>
-      <Heading headingType="h6" title="Вид эквайринга и регион" className="text-center mb-4" />
+      <Heading headingType="h6" title="Вид эквайринга и регион" className="sm:text-center mb-4" />
       {renderAcquiringRegion({ regions, field })}
-      <Heading headingType="h6" title="Данные организации" className="text-center mb-4" />
+      <Heading headingType="h6" title="Данные организации" className="sm:text-center mb-4" />
       {renderAcquiringDataOrganization(field)}
       {renderSlideCheckboxes(field)}
       {renderSubmitButton(button, 'mb-4')}

package/mobile/src/components/ApplicationForm/ApplicationFormCredit.tsx

@@ -65,11 +65,11 @@ export const ApplicationFormCredit = JSX<ApplicationFormsProps>(({ button, link,
 
   return (
     <form className="container" onSubmit={formProps.onSubmit}>
-      <Heading headingType="h6" title="Параметры кредита" className="text-center mb-4" />
+      <Heading headingType="h6" title="Параметры кредита" className="sm:text-center mb-4" />
       {renderCreditParameters(field)}
-      <Heading headingType="h6" title="Данные организации" className="text-center mb-4" />
+      <Heading headingType="h6" title="Данные организации" className="sm:text-center mb-4" />
       {renderCreditDataOrganization(field)}
-      <Heading headingType="h6" title="Офис банка" className="text-center mb-4" />
+      <Heading headingType="h6" title="Офис банка" className="sm:text-center mb-4" />
       {renderRegionDepartment({ regions, branches, field })}
       {renderSubmitButton(button, 'mb-4')}
       <Footnote link={link} />

package/mobile/src/components/ApplicationForm/ApplicationFormDeposit.tsx

@@ -47,7 +47,7 @@ export const ApplicationFormDeposit = JSX<ApplicationFormsProps>((props) => {
       <Heading
         headingType="h6"
         title="Оставьте заявку и мы ответим на любые вопросы по депозитам"
-        className="text-center mb-4"
+        className="sm:text-center mb-4"
       />
       <div className="max-w-[560px] m-auto">
         <InputControl
@@ -61,8 +61,8 @@ export const ApplicationFormDeposit = JSX<ApplicationFormsProps>((props) => {
           {...withValidator(field('phone'), phoneValidator)}
         />
       </div>
-      <div className="flex justify-between items-center max-w-[560px] m-auto">
-        <div className="flex-1">
+      <div className="flex justify-between flex-col-reverse sm:items-center sm:flex-row max-w-[560px] m-auto">
+        <div className="flex-1 mt-4 sm:mt-0">
           <Footnote link={link} />
         </div>
         {renderSubmitButton(button)}

package/mobile/src/components/ApplicationForm/ApplicationFormWed.tsx

@@ -64,18 +64,18 @@ export const ApplicationFormWed = JSX<ApplicationFormsProps>((props) => {
 
   return (
     <form className="container" onSubmit={formProps.onSubmit}>
-      <Heading headingType="h6" title="Данные организации" className="text-center mb-4" />
+      <Heading headingType="h6" title="Данные организации" className="sm:text-center mb-4" />
       {renderWedDataOrganization(field)}
-      <Heading headingType="h6" title="Интересующий вопрос" className="text-center mb-4" />
+      <Heading headingType="h6" title="Интересующий вопрос" className="sm:text-center mb-4" />
       {renderQuestionsInterested(field)}
-      <div className="flex items-center pb-9 mb-9 border-b border-main-divider">
-        {renderSubmitButton(button, 'mr-5')}
+      <div className="flex flex-col border-b border-main-divider mb-5 pb-5 sm:items-center sm:flex-row sm:mb-9 sm:pb-9">
+        {renderSubmitButton(button, 'mb-4 sm:mr-5 sm:mb-0')}
         <Footnote link={link} />
       </div>
       <Heading
         headingType="h6"
         title="Или свяжитесь с нами удобным способом"
-        className="text-center mb-4"
+        className="sm:text-center mb-4"
       />
       {renderContacts()}
     </form>

package/mobile/src/components/ApplicationForm/renderAcquiringDataOrganization.tsx

@@ -6,8 +6,8 @@ import { PhoneInputControl } from './PhoneInputControl';
 import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
 
 export const renderAcquiringDataOrganization = (field: FormFieldRegisterer<AcquiringFormState>) => (
-  <div className="flex justify-between gap-5 mb-5">
-    <div className="w-1/2">
+  <div className="mb-4 sm:flex sm:justify-between sm:gap-5 sm:mb-7">
+    <div className="sm:w-1/2">
       <InputControl
         className="shrink-0 w-full mb-3"
         label="Наименование организации"
@@ -19,7 +19,7 @@ export const renderAcquiringDataOrganization = (field: FormFieldRegisterer<Acqui
         {...withValidator(field('name'), nameValidator)}
       />
     </div>
-    <div className="w-1/2">
+    <div className="sm:w-1/2">
       <InputControl
         className="shrink-0 w-full mb-3"
         label="ИНН"

package/mobile/src/components/ApplicationForm/renderAcquiringRegion.tsx

@@ -12,8 +12,8 @@ interface AcquiringRegionProps {
 }
 
 export const renderAcquiringRegion = ({ regions, field }: AcquiringRegionProps) => (
-  <div className="flex justify-between gap-5 mb-7">
-    <div className="w-1/2">
+  <div className="mb-4 pb-1 border-b border-b-main-divider sm:flex sm:justify-between sm:gap-5 sm:mb-7 sm:border-none sm:pb-0">
+    <div className="mb-3 sm:mb-0 sm:w-1/2">
       <SelectControl
         label="Вид эквайринга"
         placeholder="Выберите эквайринг"
@@ -21,7 +21,7 @@ export const renderAcquiringRegion = ({ regions, field }: AcquiringRegionProps)
         {...withValidator(field('acquiringType'), defaultValidator)}
       />
     </div>
-    <div className="w-1/2">
+    <div className="mb-3 sm:mb-0 sm:w-1/2">
       <SelectControl
         label="Адрес"
         placeholder="Выберите адрес"

package/mobile/src/components/ApplicationForm/renderBusinessCardDataOrganization.tsx

@@ -8,8 +8,8 @@ import { defaultValidator, innValidator, nameValidator, phoneValidator } from '.
 export const renderBusinessCardDataOrganization = (
   field: FormFieldRegisterer<BusinessCardFormState>,
 ) => (
-  <div className="flex justify-between gap-5">
-    <div className="w-1/2">
+  <div className="sm:flex sm:justify-between sm:gap-5">
+    <div className="sm:w-1/2">
       <InputControl
         className="shrink-0 w-full mb-3"
         label="Контактное лицо"
@@ -21,7 +21,7 @@ export const renderBusinessCardDataOrganization = (
         {...withValidator(field('inn'), innValidator)}
       />
     </div>
-    <div className="w-1/2">
+    <div className="sm:w-1/2">
       <PhoneInputControl
         className="shrink-0 w-full mb-3"
         label="Телефон"

package/mobile/src/components/ApplicationForm/renderCreditDataOrganization.tsx

@@ -6,8 +6,8 @@ import { PhoneInputControl } from './PhoneInputControl';
 import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
 
 export const renderCreditDataOrganization = (field: FormFieldRegisterer<CreditFormState>) => (
-  <div className="flex justify-between gap-5 mb-7">
-    <div className="w-1/2">
+  <div className="mb-4 pb-1 border-b border-b-main-divider sm:flex sm:justify-between sm:gap-5 sm:mb-7 sm:border-none sm:pb-0">
+    <div className="sm:w-1/2">
       <InputControl
         className="shrink-0 w-full mb-3"
         label="Наименование организации"
@@ -24,7 +24,7 @@ export const renderCreditDataOrganization = (field: FormFieldRegisterer<CreditFo
         {...withValidator(field('phone'), phoneValidator)}
       />
     </div>
-    <div className="w-1/2">
+    <div className="sm:w-1/2">
       <InputControl
         className="shrink-0 w-full mb-3"
         label="Годовая выручка, ₽"

package/mobile/src/components/ApplicationForm/renderCreditParameters.tsx

@@ -12,8 +12,8 @@ import {
 } from './CreditParameters';
 
 export const renderCreditParameters = (field: FormFieldRegisterer<CreditFormState>) => (
-  <div className="flex justify-between gap-5 mb-7">
-    <div className="w-1/2">
+  <div className="mb-4 pb-1 border-b border-b-main-divider sm:flex sm:justify-between sm:gap-5 sm:mb-7 sm:border-none sm:pb-0">
+    <div className="mb-3 sm:mb-0 sm:w-1/2">
       <label>
         <Text size="text-m" font="font-light">
           Сумма кредита, ₽
@@ -26,7 +26,7 @@ export const renderCreditParameters = (field: FormFieldRegisterer<CreditFormStat
         {...field('amount')}
       />
     </div>
-    <div className="w-1/2">
+    <div className="sm:w-1/2">
       <label>
         <Text size="text-m" font="font-light">
           Срок кредита, месяцев

package/mobile/src/components/ApplicationForm/renderQuestionsInterested.tsx

@@ -6,11 +6,19 @@ export const renderQuestionsInterested = (field: FormFieldRegisterer<WedFormStat
   const textField = field('text');
 
   return (
-    <div className="mb-6">
-      <div className="flex items-center mb-4 gap-6">
-        <Checkbox text="Валютный контроль" {...field('currencyControl')} />
-        <Checkbox text="Документарные операции" {...field('documentaryOperations')} />
-        <Checkbox text="Конверсионные операции" {...field('conversionOperations')} />
+    <div className="mb-3 sm:mb-6">
+      <div className="mb-4 sm:flex sm:items-center sm:gap-6">
+        <Checkbox className="mb-3 sm:mb-0" text="Валютный контроль" {...field('currencyControl')} />
+        <Checkbox
+          className="mb-3 sm:mb-0"
+          text="Документарные операции"
+          {...field('documentaryOperations')}
+        />
+        <Checkbox
+          className="mb-3 sm:mb-0"
+          text="Конверсионные операции"
+          {...field('conversionOperations')}
+        />
       </div>
       <textarea
         placeholder="Укажите интересующий вас вопрос, место ведения бизнеса и удобное время для телефонного звонка"

package/mobile/src/components/ApplicationForm/renderRegion.tsx

@@ -11,14 +11,12 @@ interface RegionProps {
 }
 
 export const renderRegion = ({ regions, field }: RegionProps) => (
-  <div className="flex justify-between gap-5 mb-5">
-    <div className="w-full">
-      <SelectControl
-        label="Регион"
-        placeholder="Выберите регион"
-        options={regions.map(({ code = '', name = '' }) => ({ key: code, text: name }))}
-        {...withValidator(field('region'), defaultValidator)}
-      />
-    </div>
+  <div className="w-full mb-3 sm:mb-5">
+    <SelectControl
+      label="Регион"
+      placeholder="Выберите регион"
+      options={regions.map(({ code = '', name = '' }) => ({ key: code, text: name }))}
+      {...withValidator(field('region'), defaultValidator)}
+    />
   </div>
 );

package/mobile/src/components/ApplicationForm/renderRegionDepartment.tsx

@@ -13,8 +13,8 @@ interface RegionDepartmentProps {
 }
 
 export const renderRegionDepartment = ({ regions, branches, field }: RegionDepartmentProps) => (
-  <div className="flex justify-between gap-5 mb-7">
-    <div className="w-1/2">
+  <div className="mb-4  sm:flex sm:justify-between sm:gap-5 sm:mb-7 sm:border-none sm:pb-0">
+    <div className="mb-3 sm:mb-0 sm:w-1/2">
       <SelectControl
         label="Регион"
         placeholder="Выберите регион"
@@ -22,7 +22,7 @@ export const renderRegionDepartment = ({ regions, branches, field }: RegionDepar
         {...withValidator(field('region'), defaultValidator)}
       />
     </div>
-    <div className="w-1/2">
+    <div className="mb-3 sm:mb-0 sm:w-1/2">
       <SelectControl
         label="Адрес"
         placeholder="Выберите адрес"

package/mobile/src/components/ApplicationForm/renderSlideCheckboxes.tsx

@@ -3,7 +3,7 @@ import { SlideCheckbox } from '../../ui-kit/SlideCheckbox/SlideCheckbox';
 import type { AcquiringFormState } from './AcquiringFormState';
 
 export const renderSlideCheckboxes = (field: FormFieldRegisterer<AcquiringFormState>) => (
-  <div className="mb-5">
+  <div className="sm:mb-5">
     <SlideCheckbox text="Хочу купить онлайн-кассу" {...field('onlineCheckout')} />
     <SlideCheckbox text="Хочу купить POS-терминал" {...field('posTerminal')} />
   </div>

package/mobile/src/components/ApplicationForm/renderSubmitButton.tsx

@@ -9,7 +9,10 @@ export const renderSubmitButton = (button?: SubmitButtonProps, className?: strin
   });
 
   return (
-    <button type="submit" className={style('p-4', buttonStyle, className)}>
+    <button
+      type="submit"
+      className={style('p-4 mt-3 w-full sm:mt-0 sm:w-auto', buttonStyle, className)}
+    >
       {button?.text ? button.text : 'Отправить заявку'}
     </button>
   );

package/mobile/src/components/ApplicationForm/renderWedDataOrganization.tsx

@@ -7,15 +7,15 @@ import type { WedFormState } from './WedFormState';
 
 export const renderWedDataOrganization = (field: FormFieldRegisterer<WedFormState>) => (
   <div>
-    <div className="flex justify-between gap-5">
-      <div className="w-1/2">
+    <div className="sm:flex sm:justify-between sm:gap-5">
+      <div className="sm:w-1/2">
         <InputControl
           className="shrink-0 w-full mb-3"
           label="Наименование организации"
           {...withValidator(field('fullName'), defaultValidator)}
         />
       </div>
-      <div className="w-1/2">
+      <div className="sm:w-1/2">
         <InputControl
           className="shrink-0 w-full mb-3"
           label="ФИО"
@@ -23,15 +23,15 @@ export const renderWedDataOrganization = (field: FormFieldRegisterer<WedFormStat
         />
       </div>
     </div>
-    <div className="flex justify-between gap-5 mb-7">
-      <div className="w-1/2">
+    <div className="sm:flex sm:justify-between sm:gap-5 sm:mb-7">
+      <div className="sm:w-1/2">
         <PhoneInputControl
           className="shrink-0 w-full mb-3"
           label="Телефон"
           {...withValidator(field('phone'), phoneValidator)}
         />
       </div>
-      <div className="w-1/2">
+      <div className="sm:w-1/2">
         <InputControl
           className="shrink-0 w-full mb-3"
           label="Электронная почта"

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

@@ -13,10 +13,10 @@
           "icon": "ClockIcon",
           "format": "webp",
           "size": {
-            "width": 70,
-            "height": 70
+            "width": 70
           }
-        }
+        },
+        "iconBgVersion": ""
       },
       {
         "label": "Преимущество №2",
@@ -28,10 +28,10 @@
           "icon": "SignDocsIcon",
           "format": "webp",
           "size": {
-            "width": 70,
-            "height": 70
+            "width": 70
           }
-        }
+        },
+        "iconBgVersion": ""
       }
     ]
   }

package/mobile/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -1,3 +1,9 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { RoundedIcon } from '../../ui-kit/Icon/RoundedIcon';
+import { Img } from '../../ui-kit/Img/Img';
 import type {
   BenefitBlockItemProps,
   BenefitsBlockContent,
@@ -5,13 +11,7 @@ import type {
   ListBenefitDef,
   TextBenefitDef,
 } from './BenefitsBlockContent';
-import { benefitImageStyles } from './benefitImageStyles';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { Img } from '../../ui-kit/Img/Img';
-import { JSX } from '@redneckz/uni-jsx';
-import { style } from '../../utils/style';
-import type { UniBlockProps } from '../../model/JSXBlock';
+import { defaultIconSize } from './defaultIconSize';
 
 interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
@@ -20,10 +20,7 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(
     <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
       {title ? <Heading headingType="h3" as="h2" className="text-center" title={title} /> : null}
       {benefitList?.length ? (
-        <div
-          className="sm:flex sm:flex-wrap w-full sm:justify-center sm:gap-x-m gap-y-lg sm:gap-y-0 mt-8"
-          role="list"
-        >
+        <div className="flex flex-wrap w-full sm:justify-center mt-m gap-xl" role="list">
           {benefitList.map(renderBenefit)}
         </div>
       ) : null}
@@ -34,19 +31,18 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(
 const renderBenefit = (benefit: BenefitBlockItemProps, i: number) => (
   <div
     key={String(i)}
-    className="flex items-center sm:basis-1/2 sm:max-w-[400px] mb-14"
+    className="flex gap-s items-center md:basis-1/2 md:max-w-[400px]"
     role="listitem"
   >
     {benefit?.icon?.icon ? (
-      <Img
-        className={style(
-          'p-3 mr-5 shrink-0 bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black',
-          benefitImageStyles,
-        )}
-        image={benefit.icon}
+      <RoundedIcon
+        className="shrink-0"
+        defaultIconSize={defaultIconSize}
+        iconBgVersion={benefit?.iconBgVersion || ''}
+        {...benefit?.icon}
       />
     ) : null}
-    {benefit?.icon?.src ? <Img className="mr-5 shrink-0" image={benefit.icon} /> : null}
+    {benefit?.icon?.src ? <Img className="shrink-0" image={benefit.icon} /> : null}
     {benefit?.label ? (
       <div className="sm:h-full">
         <Heading headingType="h6">{benefit.label}</Heading>

package/mobile/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -3,6 +3,7 @@ import type { LabelProps, TitleProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { IconProps } from '../../model/Picture';
 import type { ListContent } from '../../ui-kit/List/ListContent';
+import type { IconBgVersion } from '../../ui-kit/Icon/IconProps';
 
 /**
  * @title Пункты описания
@@ -36,6 +37,7 @@ export type BenefitBlockItemProps = LabelProps &
   IconProps & {
     /** @title Описание */
     description?: DescriptionDef;
+    iconBgVersion?: IconBgVersion;
   };
 
 /**

package/mobile/src/components/BenefitsBlock/defaultIconSize.tsx

@@ -0,0 +1 @@
+export const defaultIconSize = 56;

package/mobile/src/components/Blocks.ts

@@ -1,4 +1,6 @@
 import type { BlocksRegistry } from '../model/BlocksRegistry';
+import { ApplicationForm } from './ApplicationForm/ApplicationForm';
+import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 import { ButtonsBlock } from './ButtonsBlock/ButtonsBlock';
 import { CardTransfer } from './CardTransfer/CardTransfer';
@@ -28,9 +30,9 @@ import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
-import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 
 export const Blocks: BlocksRegistry = {
+  ApplicationForm,
   ButtonsBlock,
   BonusBenefitsBlock,
   CardTransfer,

package/mobile/src/components/BonusBenefitsBlock/renderBonusBenefits.tsx

@@ -5,8 +5,8 @@ import { renderBonusBenefit } from './renderBonusBenefit';
 
 export const renderBonusBenefits = (
   bonusBenefits: BonusBenefit[],
-  columnsCount: ColumnsCount,
-  cardTextAlign: AlignType,
+  _columnsCount: ColumnsCount,
+  _cardTextAlign: AlignType,
 ) => (
   <SwipeListControl>
     {bonusBenefits.map((_, i) => renderBonusBenefit({ ..._ }, i))}

package/mobile/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -99,11 +99,9 @@ const renderAdditionalDescription = (additionalDescription?: string) =>
 const renderItems = (items: ListProps[], isDotted: boolean, version: BlockVersion = 'primary') =>
   items?.length ? (
     <List
-      className={style(
-        'max-w-[308px] mt-2 text-s',
-        version === 'primary' ? '!text-secondary-text' : '',
-      )}
+      className={style('max-w-[308px] mt-2', version === 'primary' ? '!text-secondary-text' : '')}
       items={items.filter((item) => item?.text).map((item) => item.text as string)}
       isDotted={isDotted}
+      listItemSize="S"
     />
   ) : null;

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

@@ -35,5 +35,6 @@
         }
       ]
     }
-  ]
+  ],
+  "align": "text-center"
 }

package/mobile/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -21,7 +21,16 @@ export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, Un
 const VISIBLE_CELLS_COUNT = 1;
 
 export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
-  ({ className = '', title, icon, isHighlighting = false, button, cardCells = [], ...rest }) => {
+  ({
+    className = '',
+    title,
+    align = 'text-center',
+    icon,
+    isHighlighting = false,
+    button,
+    cardCells = [],
+    ...rest
+  }) => {
     const cellsNode = cardCells.map(renderCardInfo);
     const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
     const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
@@ -34,7 +43,9 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
       >
         {isHighlighting ? renderHitIcon() : null}
         {renderIconBlock(icon)}
-        {title ? <Heading className="text-center pt-2" headingType="h5" title={title} /> : null}
+        {title ? (
+          <Heading className={style('pt-xs', align)} headingType="h5" title={title} />
+        ) : null}
         {button ? <Button className="w-full mt-4" {...button} /> : null}
         {cardCells.length ? (
           <Foldable

package/mobile/src/components/CarouselTariffsCard/CarouselTariffsCardContent.ts

@@ -1,4 +1,5 @@
 import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
+import { AlignProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { IconProps } from '../../model/Picture';
 import type { ButtonProps, ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
@@ -16,7 +17,8 @@ export type TariffsCardCellProps = HeadlineCommonProps & {
  */
 export type CarouselTariffsCardContent = UniBlockContent &
   TitleProps &
-  IconProps & {
+  IconProps &
+  AlignProps & {
     /** @title Выделить карточку */
     isHighlighting?: boolean;
     /** @title Кнопка */

package/mobile/src/components/CarouselTariffsCard/renderCardInfo.tsx

@@ -2,7 +2,6 @@ import { VNode } from '../../model/VNode';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Text } from '../../ui-kit/Text/Text';
 import { TariffsCardCellProps } from './CarouselTariffsCardContent';
-import { descriptionSize } from './descriptionSize';
 
 export const renderCardInfo = (cell: TariffsCardCellProps, i: number): VNode => {
   const { title, description, buttons } = cell;
@@ -18,7 +17,7 @@ export const renderCardInfo = (cell: TariffsCardCellProps, i: number): VNode =>
       ) : null}
       {description ? (
         <div className="mt-1">
-          <Text size={descriptionSize} color="text-primary-text">
+          <Text size="text-xl" color="text-primary-text">
             {description}
           </Text>
         </div>

package/mobile/src/components/Footer/Footer.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useSWRResource } from '../../hooks/useSWRResource';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { LinkCommonProps } from '../../model/LinkProps';
 import { projectSettings } from '../../ProjectSettings';
 import type { SitemapData } from '../../services/sitemap/SitemapData';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -8,6 +9,7 @@ import { Button } from '../../ui-kit/Button/Button';
 import { LinkList } from '../../ui-kit/LinkList/LinkList';
 import { RollupItem } from '../RollupItem/RollupItem';
 import { Contacts } from './Contacts';
+import { findIconByHref } from './findIconByHref';
 import type { FooterContent } from './FooterContent';
 import type { FooterDataProps } from './FooterDataProps';
 import { HorizontalNavigation } from './HorizontalNavigation';
@@ -20,7 +22,7 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
   const fallback = rest.options?.page?.fallback;
 
   const sitemap = useSWRResource<SitemapData>(projectSettings.SITEMAP || 'sitemap', fallback);
-  const { relatedEnterprises, contacts, socialMedia, horizontalNavigationTitle } =
+  const { relatedEnterprises, contacts, socialMedia, mobileApps, horizontalNavigationTitle } =
     useSWRResource<FooterDataProps>(projectSettings.FOOTER || 'footer', fallback);
 
   return (
@@ -34,13 +36,7 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
       </div>
       <Contacts className="overflow-hidden" items={contacts} />
       <SocialMedia className="mb-4" media={socialMedia} />
-      <Button
-        className="w-full mb-4"
-        text="Google Play"
-        version="secondary"
-        href="/"
-        target="_blank"
-      />
+      {mobileApps?.map(renderButton)}
       <HorizontalNavigation
         className="pt-4 pb-7 border-y border-main-divider"
         title={horizontalNavigationTitle}
@@ -50,3 +46,18 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
     </BlockWrapper>
   );
 });
+
+const renderButton = ({ href = '/' }: LinkCommonProps, i: number) => {
+  const { label } = findIconByHref(href);
+
+  return (
+    <Button
+      key={String(i)}
+      className="w-full mb-4"
+      text={label}
+      version="secondary"
+      href={href}
+      target="_blank"
+    />
+  );
+};