@redneckz/wildless-cms-uni-blocks 0.14.25 → 0.14.27

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { CorporateLeadAPI } from '../../api/CorporateLeadAPI';
+import { LeadServiceAPI } from '../../api/LeadServiceAPI';
 import { type UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -13,19 +13,22 @@ import { ResponseNotification } from './ResponseNotification';
 
 export interface ApplicationFormProps extends ApplicationFormContent, UniBlockProps {}
 
-const API = CorporateLeadAPI();
+const API = LeadServiceAPI();
 
 export const ApplicationForm = JSX<ApplicationFormProps>((props) => {
   const { className, formBlock, ...rest } = props;
 
   const [responseType, setResponseType] = useState<'OK' | 'Fail' | ''>('');
 
-  const handleSubmit = useCallback(async (data: Record<string, any>) => {
-    const status = (await API.send(data)) ? 'OK' : 'Fail';
-    setResponseType(status);
+  const handleSubmit = useCallback(
+    async (data: Record<string, any>, isIndividualType?: boolean) => {
+      const status = (await API.send(data, isIndividualType)) ? 'OK' : 'Fail';
+      setResponseType(status);
 
-    return status;
-  }, []);
+      return status;
+    },
+    [],
+  );
 
   return (
     <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
@@ -42,7 +45,10 @@ export const ApplicationForm = JSX<ApplicationFormProps>((props) => {
 
 const renderEmbeddedForm = (
   formBlock: ApplicationFormBlockDef,
-  handleSubmit: (data: Record<string, string>) => Promise<'OK' | 'Fail'>,
+  handleSubmit: (
+    data: Record<string, string>,
+    isIndividualType?: boolean,
+  ) => Promise<'OK' | 'Fail'>,
 ) => {
   const type = formBlock?.formType;
   if (!type || !(type in EmbeddableForms)) {

package/mobile/src/components/ApplicationForm/ApplicationForm.ui.json

@@ -4,8 +4,11 @@
       "formType": {
         "ui:widget": "hidden"
       },
-      "sourceBookDir": {
-        "ui:widget": "sourceBook"
+      "product": {
+        "ui:widget": "sourceBookDataDropdown",
+        "ui:options": {
+          "sourceName": "products"
+        }
       }
     }
   }

package/mobile/src/components/ApplicationForm/ApplicationFormContent.ts

@@ -74,6 +74,17 @@ export type GrantSupportFormParamsDef = TitleProps & {
   sourceBookDir?: string;
 };
 
+/**
+ * @title Заявка для ФЛ
+ */
+export type IndividualsFormParamsDef = TitleProps & {
+  /** @default ApplicationFormIndividuals */
+  formType: 'ApplicationFormIndividuals';
+  button?: SubmitButtonProps;
+  /** @title Продукт */
+  product?: string;
+};
+
 /**
  * @title Настройки формы
  */
@@ -83,7 +94,8 @@ export type ApplicationFormBlockDef =
   | DepositFormParamsDef
   | CreditFormParamsDef
   | AcquiringFormParamsDef
-  | GrantSupportFormParamsDef;
+  | GrantSupportFormParamsDef
+  | IndividualsFormParamsDef;
 
 /**
  * @title Форма заявки

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

@@ -23,9 +23,7 @@ const depositValidator = objectValidator({
   phone: phoneValidator,
 });
 
-export const ApplicationFormDeposit = JSX<ApplicationFormsProps>((props) => {
-  const { button, link, onSubmit } = props;
-
+export const ApplicationFormDeposit = JSX<ApplicationFormsProps>(({ button, link, onSubmit }) => {
   const handleSubmit = useCallback(
     (formState: DepositFormState) => {
       const { name, phone } = formState;

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

@@ -31,7 +31,7 @@ export const ApplicationFormGrantSupport = JSX<ApplicationFormsProps>((props) =>
           label="Ваш регион"
           placeholder="Выберите регион"
           isSearch={true}
-          options={regions.map(({ name = '' }) => ({ key: name }))}
+          options={regions.map(({ name = '' }) => ({ key: name, text: name }))}
           value={region}
           onChange={setRegion}
         />

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

@@ -0,0 +1,74 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { objectValidator } from '../../validation/objectValidator';
+import { isValidationSuccess } from '../../validation/validator';
+import { withValidator } from '../../validation/withValidator';
+import { type ApplicationFormsProps } from './ApplicationFormsProps';
+import { Footnote } from './Footnote';
+import { type IndividualsFormState } from './IndividualsFormState';
+import { renderIndividualsFields } from './renderIndividualsFields';
+import { renderSubmitButton } from './renderSubmitButton';
+import { defaultValidator, nameValidator, phoneValidator } from './validators';
+
+const initialFormState: IndividualsFormState = {
+  surname: '',
+  name: '',
+  middleName: '',
+  phone: '',
+  mail: '',
+  date: undefined,
+  consentDataProcessing: true,
+};
+
+const individualsValidator = objectValidator({
+  surname: nameValidator,
+  name: nameValidator,
+  middleName: nameValidator,
+  phone: phoneValidator,
+  mail: defaultValidator,
+  date: defaultValidator,
+});
+
+export const ApplicationFormIndividuals = JSX<ApplicationFormsProps>((props) => {
+  const { button, link, product, onSubmit } = props;
+
+  const handleSubmit = useCallback(
+    (formState: IndividualsFormState) => {
+      const { surname, name, middleName, phone, mail, date, consentDataProcessing } = formState;
+
+      isValidationSuccess(individualsValidator(formState)) &&
+        onSubmit(
+          {
+            typeForm: 'dpst',
+            surname,
+            name,
+            middleName,
+            mail,
+            consentDataProcessing,
+            phone: phone.replace(/[^+\d]/g, ''),
+            date: date?.toISOString().slice(0, 10) || '',
+            product: product || '',
+          },
+          true,
+        );
+    },
+    [onSubmit],
+  );
+
+  const [, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
+
+  return (
+    <form className="container space-y-s" onSubmit={formProps.onSubmit}>
+      {renderIndividualsFields(field)}
+      <div className="@xl:flex justify-between items-center">
+        <div className="@xl:mb-0 mb-2 flex items-center gap-3">
+          <Checkbox {...withValidator(field('consentDataProcessing'), defaultValidator)} />
+          <Footnote text="Согласен с " link={link} />
+        </div>
+        {renderSubmitButton(button)}
+      </div>
+    </form>
+  );
+});

package/mobile/src/components/ApplicationForm/ApplicationFormsProps.ts

@@ -5,5 +5,6 @@ export interface ApplicationFormsProps<S extends Record<string, any> = Record<st
   button?: SubmitButtonProps;
   link?: LinkProps;
   sourceBookDir?: string;
-  onSubmit: (data: S) => void;
+  product?: string;
+  onSubmit: (data: S, isIndividualType?: boolean) => void;
 }

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

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { DatePicker } from '../../ui-kit/DatePicker/DatePicker';
+import { Text } from '../../ui-kit/Text/Text';
+
+export interface DatePickerControlProps {
+  className: string;
+  label: string;
+  value?: Date;
+  error?: string;
+  onChange?: (value: Date) => void;
+}
+
+export const DatePickerControl = JSX<DatePickerControlProps>(
+  ({ className, label, value = undefined, error, onChange }) => (
+    <div className={className}>
+      {label ? (
+        <div className="mb-xs">
+          <Text size="text-m" font="font-light">
+            {label}
+          </Text>
+        </div>
+      ) : null}
+      <DatePicker value={value} onChange={onChange} valid={Boolean(!error)} />
+      <div className="h-2">
+        {error ? (
+          <Text size="text-xs" font="font-light" color="text-error">
+            {error}
+          </Text>
+        ) : null}
+      </div>
+    </div>
+  ),
+);

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

@@ -3,6 +3,7 @@ import { ApplicationFormBusinessCard } from './ApplicationFormBusinessCard';
 import { ApplicationFormCredit } from './ApplicationFormCredit';
 import { ApplicationFormDeposit } from './ApplicationFormDeposit';
 import { ApplicationFormGrantSupport } from './ApplicationFormGrantSupport';
+import { ApplicationFormIndividuals } from './ApplicationFormIndividuals';
 import { ApplicationFormWed } from './ApplicationFormWed';
 
 export const EmbeddableForms = {
@@ -12,4 +13,5 @@ export const EmbeddableForms = {
   ApplicationFormCredit,
   ApplicationFormAcquiring,
   ApplicationFormGrantSupport,
+  ApplicationFormIndividuals,
 };

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

@@ -5,12 +5,13 @@ import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
 
 interface FootnoteProps {
+  text?: string;
   link?: LinkProps;
 }
 
-export const Footnote = JSX<FootnoteProps>(({ link }) => (
+export const Footnote = JSX<FootnoteProps>(({ text, link }) => (
   <Paragraph size="text-s" font="font-light" color="text-secondary-text">
-    <Text>Нажимая кнопку, вы подтверждаете согласие с </Text>
+    <Text>{text || 'Нажимая кнопку, вы подтверждаете согласие с '}</Text>
     {link ? (
       <Button
         href={link.href}

package/mobile/src/components/ApplicationForm/IndividualsFormState.ts

@@ -0,0 +1,9 @@
+export interface IndividualsFormState {
+  surname: string;
+  name: string;
+  middleName: string;
+  phone: string;
+  mail: string;
+  date: Date | undefined;
+  consentDataProcessing: boolean;
+}

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

@@ -0,0 +1,46 @@
+import { type FormFieldRegisterer } from '../../hooks/useForm';
+import { withValidator } from '../../validation/withValidator';
+import { DatePickerControl } from './DatePickerControl';
+import { type IndividualsFormState } from './IndividualsFormState';
+import { InputControl } from './InputControl';
+import { PhoneInputControl } from './PhoneInputControl';
+import { defaultValidator, nameValidator, phoneValidator } from './validators';
+
+export const renderIndividualsFields = (field: FormFieldRegisterer<IndividualsFormState>) => (
+  <div className="@xl:flex @xl:justify-between @xl:gap-lg">
+    <div className="@xl:w-1/2 space-y-s">
+      <InputControl
+        className="shrink-0 w-full"
+        label="Фамилия"
+        {...withValidator(field('surname'), nameValidator)}
+      />
+      <InputControl
+        className="shrink-0 w-full"
+        label="Отчество"
+        {...withValidator(field('middleName'), nameValidator)}
+      />
+      <PhoneInputControl
+        className="shrink-0 w-full"
+        label="Телефон"
+        {...withValidator(field('phone'), phoneValidator)}
+      />
+    </div>
+    <div className="@xl:w-1/2 space-y-s">
+      <InputControl
+        className="shrink-0 w-full"
+        label="Имя"
+        {...withValidator(field('name'), nameValidator)}
+      />
+      <DatePickerControl
+        className="shrink-0 w-full"
+        label="Дата рождения"
+        {...withValidator(field('date'), defaultValidator)}
+      />
+      <InputControl
+        className="shrink-0 w-full"
+        label="Электронная почта"
+        {...withValidator(field('mail'), defaultValidator)}
+      />
+    </div>
+  </div>
+);

package/mobile/src/components/Blocks.ts

@@ -12,7 +12,6 @@ import { CarouselCard } from './CarouselCard/CarouselCard';
 import { CarouselCatalogCard } from './CarouselCatalogCard/CarouselCatalogCard';
 import { CarouselLinks } from './CarouselLinks/CarouselLinks';
 import { CarouselProductCard } from './CarouselProductCard/CarouselProductCard';
-import { CarouselProgramsCard } from './CarouselProgramsCard/CarouselProgramsCard';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
@@ -41,7 +40,6 @@ import { StickyBottomMenu } from './StickyBottomMenu/StickyBottomMenu';
 import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
-import { Tile } from './Tile/Tile';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 
 export const Blocks: BlocksRegistry = {
@@ -58,7 +56,6 @@ export const Blocks: BlocksRegistry = {
   CarouselCatalogCard,
   CarouselLinks,
   CarouselProductCard,
-  CarouselProgramsCard,
   CarouselRecommendationCard,
   CarouselTariffsCard,
   ComparisonTable,
@@ -87,6 +84,5 @@ export const Blocks: BlocksRegistry = {
   Tabs,
   TariffsTable,
   TextBlock,
-  Tile,
   VerticalLayout,
 };

package/mobile/src/components/Bonus/Bonus.tsx

@@ -22,12 +22,12 @@ export const Bonus = JSX<BonusProps>(
           headlineVersion="M"
           align={align}
         />
-        <div className="flex flex-wrap w-full">
+        <div className="flex flex-wrap gap-3xl gap-x-m w-full">
           {bonusItems.length > 0
             ? bonusItems.map((_, i) => (
                 <div
                   key={String(i)}
-                  className="mb-3xl last:mb-0 sm:space-y-xs flex flex-col grow w-full p-4xl sm:p-m @xl:w-[49%] border border-gray"
+                  className="w-full @xl:w-[48%] sm:space-y-xs flex flex-col grow w-full p-xl sm:p-m border border-gray"
                 >
                   <div className="grow">
                     <Headline
@@ -59,10 +59,10 @@ const renderBonusItemContent = (bonusItemContent: BonusImageDef | BonusCountDef)
     : renderBonusImage(bonusItemContent as BonusImageDef);
 
 const renderBonusCount = (_: BonusCountDef) => (
-  <div className="w-full pt-default mt-s flex justify-center sm:justify-end items-end">
+  <div className="w-full pt-default @xl:mt-s @xl:mb-4 flex justify-center sm:justify-end items-end">
     {_.bonusCount ? (
       // -mb-10 добавлен для выравнивания bonusCount относительно bonusName, тк шрифт font-mohave неправильно высчитывает line-height
-      <div className="shrink-0 -mb-10">
+      <div className="shrink-0 -mb-6 @xl:-mb-4">
         <span className="font-mohave text-title-large sm:text-title-extra gradient-color-text">
           {_.bonusCount}
         </span>

package/mobile/src/components/Calculator/Calculator.tsx

@@ -12,8 +12,8 @@ import { EmbeddableCalcBlocks } from './EmbeddableCalcBlocks';
 
 export interface CalculatorProps extends CalculatorContent, UniBlockProps {}
 
-export const Calculator = JSX<CalculatorProps>(({ className, calculatorTabs = [] }) => (
-  <BlockWrapper className={className} defaultPadding="p-0">
+export const Calculator = JSX<CalculatorProps>(({ className, calculatorTabs = [], ...rest }) => (
+  <BlockWrapper className={className} defaultPadding="p-0" {...rest}>
     {renderTabs(calculatorTabs)}
   </BlockWrapper>
 ));
@@ -28,7 +28,7 @@ const renderCalculator = (tab: CalculatorTab) => {
   const EmbeddedBlock = EmbeddableCalcBlocks[type];
 
   return (
-    <div>
+    <div className="p-xl">
       {tab?.calculatorBlock?.title ? (
         <Heading className="mb-lg" title={tab?.calculatorBlock?.title} />
       ) : null}
@@ -45,7 +45,7 @@ const renderTabs = (tabs: CalculatorTab[]) => {
   const isSingleTab = tabs.length === 1;
 
   if (isSingleTab) {
-    return <BlockWrapper>{renderCalculator(tabs[0])}</BlockWrapper>;
+    return renderCalculator(tabs[0]);
   }
 
   return tabs.map((tab, index) => (
@@ -54,9 +54,7 @@ const renderTabs = (tabs: CalculatorTab[]) => {
       isFoldButtonOnTop
       unfoldedByDefault={index === 0}
       renderFoldableSection={({ isUnfolded }) => (
-        <FoldableSection isUnfolded={isUnfolded}>
-          <BlockWrapper>{renderCalculator(tab)}</BlockWrapper>
-        </FoldableSection>
+        <FoldableSection isUnfolded={isUnfolded}>{renderCalculator(tab)}</FoldableSection>
       )}
       renderFoldButton={renderFoldButton(tab)}
     />

package/mobile/src/components/Carousel/Carousel.tsx

@@ -68,7 +68,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
           />
         </div>
         <SwipeListControlDots
-          className="@lg:hidden"
+          className="@5xl:hidden"
           containerRef={containerRef}
           activeIndex={dotsActiveIndex}
           dotCount={count}

package/mobile/src/components/Carousel/renderCarouselCards.tsx

@@ -68,7 +68,7 @@ const cardStyle = (
     CARD_SIZE_MAP[cardSize], // TODO fix для RecommendationCard
     someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl sm:pt-16' : 'pt-3xl'),
     showBorder &&
-      'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider',
+      'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider h-full',
   );
 
 const isCardHighlighted = (_: BlockDef | undefined) =>

package/mobile/src/components/CarouselCard/CarouselCard.tsx

@@ -19,7 +19,7 @@ export const CarouselCard = JSX<CarouselCardProps>(
       defaultPadding="p-0"
       {...rest}
     >
-      <div className="relative">
+      <div className="relative h-full">
         <div className={style(layerStyle, 'top-9 right-12 bg-green-dark')} />
         <div className={style(layerStyle, 'top-6 right-8 bg-green')} />
         <div className={style(layerStyle, 'top-3 right-4 bg-green-light')} />

package/mobile/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -39,7 +39,7 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
         className="h-full"
         padding={padding}
         title={
-          title ? (
+          title || description ? (
             <Headline
               title={title}
               description={description}

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -1,10 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type UniBlockProps } from '../../model/JSXBlock';
+import { leftOrRightImage } from '../../ui-kit/BaseProductTile/BaseProductTile';
 import { BaseTile } from '../../ui-kit/BaseTile/BaseTile';
+import { BenefitsList } from '../../ui-kit/BenefitsList/BenefitsList';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { List } from '../../ui-kit/List/List';
+import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
 import { SocialMedia } from '../Footer/SocialMedia';
 import { Headline } from '../Headline/Headline';
@@ -27,7 +30,12 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     target,
     title,
     align = 'text-left',
-    isImageAlwaysOnRight = ImageAlwaysOnRight,
+    benefits,
+    imageOptions: {
+      directionRight = true,
+      isImageAlwaysOnRight = ImageAlwaysOnRight,
+      isImageSecondary = false,
+    } = {},
     ...rest
   }) => {
     return (
@@ -39,7 +47,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
         <LinkWrapper href={href} target={target} className="h-full">
           <BaseTile
             className="h-full"
-            defaultPadding="p-m"
+            defaultPadding="p-2xl"
             padding={padding}
             insetTitle={
               title ? (
@@ -52,15 +60,17 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
                 />
               ) : null
             }
-            rightImage={icon?.icon || icon?.src ? <Img image={icon} /> : null}
+            {...leftOrRightImage(isIcon(icon) ? <Img image={icon} /> : null, directionRight)}
             buttons={
               socialMedia.length ? (
-                <SocialMedia media={socialMedia} showButtonText={true} version={rest.version} />
+                <SocialMedia media={socialMedia} showButtonText={true} version={rest?.version} />
               ) : null
             }
             isImageAlwaysOnRight={isImageAlwaysOnRight}
+            isImageSecondary={isImageSecondary}
           >
-            {items.length ? <List items={items} listItemSize={listItemSize} /> : null}
+            <BenefitsList benefits={benefits} />
+            <List items={items} listItemSize={listItemSize} />
           </BaseTile>
         </LinkWrapper>
       </BlockWrapper>

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -2,6 +2,8 @@ import { type AlignProps, type HeadlineCommonProps } from '../../model/HeadlineT
 import { type UniBlockContent } from '../../model/JSXBlock';
 import { type LinkCommonProps } from '../../model/LinkProps';
 import { type IconProps } from '../../model/Picture';
+import { type TileImageOptions } from '../../ui-kit/BaseProductTile/BaseProductTileContent';
+import { type BenefitsListContent } from '../../ui-kit/BenefitsList/BenefitsListContent';
 import { type ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import { type ListContent } from '../../ui-kit/List/ListContent';
 
@@ -13,9 +15,9 @@ export type CarouselRecommendationCardContent = UniBlockContent &
   ListContent &
   IconProps &
   LinkCommonProps &
-  AlignProps & {
+  AlignProps &
+  BenefitsListContent & {
     /** @title Соц сети */
     socialMedia?: ButtonContent[];
-    /** @title Изображение всегда справа */
-    isImageAlwaysOnRight?: boolean;
+    imageOptions?: TileImageOptions;
   };

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

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type UniBlockProps } from '../../model/JSXBlock';
-import { type Picture } from '../../model/Picture';
 import { type VNode } from '../../model/VNode';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
@@ -10,6 +9,7 @@ import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
+import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
 import { type CarouselTariffsCardContent } from './CarouselTariffsCardContent';
 import { renderCardInfo } from './renderCardInfo';
@@ -25,12 +25,16 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
     const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
 
     return (
-      <BlockWrapper className={style('flex flex-col', className)} defaultPadding="p-3xl" {...rest}>
-        {renderIconBlock(icon)}
+      <BlockWrapper className={style('flex flex-col', className)} defaultPadding="p-2xl" {...rest}>
+        {isIcon(icon) ? (
+          <div className="self-center">
+            <Img image={icon} />
+          </div>
+        ) : null}
         {title ? (
           <Heading className={style('pt-xs', align)} headingType="h5" title={title} />
         ) : null}
-        {button ? <Button className="w-full mt-m" {...button} /> : null}
+        {button ? <Button className="w-full mt-m mb-lg" {...button} /> : null}
         {cardCells.length ? (
           <Foldable
             renderFoldableSection={({ isUnfolded }) => (
@@ -47,10 +51,6 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
   },
 );
 
-const renderIconBlock = (icon?: Picture) => (
-  <div className="self-center">{icon?.src || icon?.icon ? <Img image={icon} /> : null}</div>
-);
-
 const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
   <button
     className="w-full cursor-pointer text-primary-main pt-lg flex justify-between items-center"

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

@@ -42,7 +42,7 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>(
               {renderBlocksList(slots?.header, { ...options, slotName: 'header' })}
             </div>
           ) : null}
-          <div className="container space-y-px @lg:space-y-0 @lg:grid @lg:grid-cols-12 @lg:gap-2xs">
+          <div className="container space-y-px @5xl:space-y-0 @5xl:grid @5xl:grid-cols-12 @5xl:gap-2xs">
             {renderChildren({ block: data, options, extraProps: { className: 'scroll-mt-12' } })}
             {renderBlocksList(slots?.footer, { ...options, slotName: 'footer' })}
           </div>

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

@@ -45,10 +45,12 @@ export const Footer = JSX<FooterProps>(({ className, ...rest }) => {
         <SocialMedia className="mb-xl" media={socialMedia} stretched={true}>
           Соцсети
         </SocialMedia>
-        <Text size="text-s" font="font-light" color="text-secondary-text">
-          Мобильное приложение
-        </Text>
-        <div className="mt-xs">{mobileApps?.map(renderButton)}</div>
+        <div className="mb-xl">
+          <div className="flex flex-col gap-4 mb-xs">{mobileApps?.map(renderButton)}</div>
+          <Text size="text-s" font="font-light" color="text-secondary-text">
+            Мобильное приложение
+          </Text>
+        </div>
       </div>
       <div className="py-lg border-t border-main-divider">
         <HorizontalNavigationLink
@@ -74,7 +76,7 @@ const renderButton = ({ href = '/', text }: LinkProps, i: number) => {
   return (
     <Button
       key={String(i)}
-      className="w-full mb-lg"
+      className="w-full"
       text={text || label}
       version="secondary"
       href={href}

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

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type TitleProps } from '../../model/HeadlineType';
 import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
 import { type FooterLink } from './FooterLink';
 import { HorizontalNavigationLink } from './HorizontalNavigationLink';
 
@@ -8,7 +9,7 @@ export interface HorizontalNavigationProps extends FooterLink, TitleProps {}
 
 export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
   ({ title, links, className = '' }) => (
-    <div className={className}>
+    <div className={style('flex flex-col gap-4', className)}>
       <Text size="text-l" font="font-normal">
         {title}
       </Text>