@redneckz/wildless-cms-uni-blocks 0.12.12 → 0.12.13

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

@@ -13,17 +13,76 @@ export interface SubmitButtonProps extends ButtonAdditionalProps {
   version?: ButtonVersion;
 }
 
+export type CommonApplicationFormProps = TitleProps & {
+  button?: SubmitButtonProps;
+  /** @title Условия передачи данных */
+  link?: LinkProps;
+};
+
+export type ApplicationFormBlockDef =
+  | BusinessCardFormParamsDef
+  | WedFormParamsDef
+  | DepositFormParamsDef
+  | CreditFormParamsDef
+  | AcquiringFormParamsDef
+  | GrantSupportFormParamsDef;
+
+/**
+ * @title Бизнес-карта
+ * @default {"formType": "ApplicationFormBusinessCard"}
+ */
+export type BusinessCardFormParamsDef = CommonApplicationFormProps & {
+  formType: 'ApplicationFormBusinessCard';
+};
+
+/**
+ * @title ВЭД
+ * @default {"formType": "ApplicationFormWed"}
+ */
+export type WedFormParamsDef = CommonApplicationFormProps & {
+  formType: 'ApplicationFormWed';
+};
+
+/**
+ * @title Депозит
+ * @default {"formType": "ApplicationFormDeposit"}
+ */
+export type DepositFormParamsDef = CommonApplicationFormProps & {
+  formType: 'ApplicationFormDeposit';
+};
+
+/**
+ * @title Кредит
+ * @default {"formType": "ApplicationFormCredit"}
+ */
+export type CreditFormParamsDef = CommonApplicationFormProps & {
+  formType: 'ApplicationFormCredit';
+};
+
+/**
+ * @title Эквайринг
+ * @default {"formType": "ApplicationFormAcquiring"}
+ */
+export type AcquiringFormParamsDef = CommonApplicationFormProps & {
+  formType: 'ApplicationFormAcquiring';
+};
+
+/**
+ * @title Грантовая поддержка
+ * @default {"formType": "ApplicationFormGrantSupport"}
+ */
+export type GrantSupportFormParamsDef = CommonApplicationFormProps & {
+  formType: 'ApplicationFormGrantSupport';
+  /** @title Адрес справочника */
+  sourceBookDir?: string;
+};
+
 /**
  * @title Форма заявки
  */
-export type ApplicationFormContent = UniBlockContent &
-  TitleProps & {
-    /**
-     * @title Вид заявки
-     * @enumNames ["Бизнес-карта", "ВЭД", "Депозит", "Кредит", "Эквайринг"]
-     */
-    typeForm?: 'business-card' | 'wed' | 'deposit' | 'credit' | 'acquiring';
-    button?: SubmitButtonProps;
-    /** @title Условия передачи данных */
-    link?: LinkProps;
-  };
+export type ApplicationFormContent = UniBlockContent & {
+  /**
+   * @title Вид заявки
+   */
+  formBlock?: ApplicationFormBlockDef;
+};

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

@@ -0,0 +1,51 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useSWRResource } from '../../hooks/useSWRResource';
+import { RegionsGrantSupportData } from '../../services/regionsGrantSupport/RegionsGrantSupportData';
+import { Button } from '../../ui-kit/Button/Button';
+import { getRegularButtonClasses } from '../../ui-kit/Button/getRegularButtonClasses';
+import { style } from '../../utils/style';
+import type { ApplicationFormsProps } from './ApplicationFormsProps';
+import { SelectControl } from './SelectControl';
+
+export const ApplicationFormGrantSupport = JSX<ApplicationFormsProps>((props) => {
+  const { button, sourceBookDir } = props;
+
+  const { regions } = useSWRResource<RegionsGrantSupportData>(
+    sourceBookDir || 'regions-grant-support',
+  );
+
+  const [region, setRegion] = useState({ key: '' });
+
+  const buttonStyle = getRegularButtonClasses({
+    className: 'text-white',
+    version: button?.version,
+  });
+
+  const regionHref = regions?.find((_) => _.name === region.key)?.href;
+
+  return (
+    <div className="container space-y-s sm:space-y-lg">
+      {regions ? (
+        <SelectControl
+          label="Ваш регион"
+          placeholder="Выберите регион"
+          options={regions.map(({ name = '' }) => ({ key: name }))}
+          value={region}
+          onChange={setRegion}
+        />
+      ) : null}
+      {regionHref ? (
+        <div className="text-center">
+          <Button
+            href={regionHref}
+            target="_blank"
+            className={style('p-4 w-full sm:w-auto', buttonStyle)}
+          >
+            {button?.text ? button.text : 'Перейти'}
+          </Button>
+        </div>
+      ) : null}
+    </div>
+  );
+});

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

@@ -4,5 +4,6 @@ import type { SubmitButtonProps } from './ApplicationFormContent';
 export interface ApplicationFormsProps<S extends Record<string, any> = Record<string, any>> {
   button?: SubmitButtonProps;
   link?: LinkProps;
+  sourceBookDir?: string;
   onSubmit: (data: S) => void;
 }

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

@@ -0,0 +1,15 @@
+import { ApplicationFormAcquiring } from './ApplicationFormAcquiring';
+import { ApplicationFormBusinessCard } from './ApplicationFormBusinessCard';
+import { ApplicationFormCredit } from './ApplicationFormCredit';
+import { ApplicationFormDeposit } from './ApplicationFormDeposit';
+import { ApplicationFormGrantSupport } from './ApplicationFormGrantSupport';
+import { ApplicationFormWed } from './ApplicationFormWed';
+
+export const EmbeddableForms = {
+  ApplicationFormBusinessCard,
+  ApplicationFormWed,
+  ApplicationFormDeposit,
+  ApplicationFormCredit,
+  ApplicationFormAcquiring,
+  ApplicationFormGrantSupport,
+};

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

@@ -31,7 +31,7 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(
 const renderBenefit = (benefit: BenefitBlockItemProps, i: number) => (
   <div
     key={String(i)}
-    className="flex gap-m items-center md:basis-1/2 md:max-w-[400px]"
+    className="flex gap-m items-center md:basis-1/2 md:max-w-[500px]"
     role="listitem"
   >
     {benefit?.icon?.icon ? (

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

@@ -10,31 +10,39 @@ import type { BonusContent, BonusCountDef, BonusImageDef } from './BonusContent'
 
 export interface BonusProps extends BonusContent, UniBlockProps {}
 
-export const Bonus = JSX<BonusProps>((props) => {
-  const { className = '', title, description, bonusItems, ...rest } = props;
-
-  return (
-    <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
+export const Bonus = JSX<BonusProps>(
+  ({ className = '', title, description, bonusItems = [], ...rest }) => (
+    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
       <div className="container">
-        <Headline title={title} description={description} headlineVersion="M" isPadding={false} />
-        <div className="flex flex-wrap w-full mt-9">
-          {bonusItems?.length
+        <Headline
+          className="mb-xl"
+          isPadding={false}
+          title={title}
+          description={description}
+          headlineVersion="M"
+        />
+        <div className="flex flex-wrap w-full">
+          {bonusItems.length > 0
             ? bonusItems.map((_, i) => (
                 <div
                   key={String(i)}
-                  className="flex-grow w-[49%] border border-gray p-9 mb-3 mx-2 even:mr-0 odd:ml-0 last:odd:mx-0"
+                  className="flex-grow w-full sm:w-[49%] border border-gray p-m mb-text mx-xs even:mr-0 odd:ml-0 last:odd:mx-0"
                 >
-                  {_?.title ? <Text size="text-h4">{_.title}</Text> : null}
+                  {_?.title ? (
+                    <div className="mb-xs last:mb-0">
+                      <Text size="text-h4">{_.title}</Text>
+                    </div>
+                  ) : null}
                   {_?.description ? (
-                    <div className="mt-xs">
+                    <div className="mb-text last:mb-0">
                       <Paragraph size="text-xl" font="font-light">
                         {_.description}
                       </Paragraph>
                     </div>
                   ) : null}
 
-                  <div className="flex justify-between items-end mt-3">
-                    {renderButtonsSection(_?.buttons)}
+                  <div className="flex justify-between items-end">
+                    <div className="hidden sm:block">{renderButtonsSection(_?.buttons)}</div>
                     {_.bonusItemContent?.bonusType
                       ? renderBonusItemContent(_.bonusItemContent)
                       : null}
@@ -45,31 +53,28 @@ export const Bonus = JSX<BonusProps>((props) => {
         </div>
       </div>
     </BlockWrapper>
-  );
-});
-
-const renderBonusItemContent = (bonusItemContent: BonusImageDef | BonusCountDef) => (
-  <div>
-    {bonusItemContent.bonusType === 'count'
-      ? renderBonusCount(bonusItemContent as BonusCountDef)
-      : renderBonusImage(bonusItemContent as BonusImageDef)}
-  </div>
+  ),
 );
 
+const renderBonusItemContent = (bonusItemContent: BonusImageDef | BonusCountDef) =>
+  bonusItemContent.bonusType === 'count'
+    ? renderBonusCount(bonusItemContent as BonusCountDef)
+    : renderBonusImage(bonusItemContent as BonusImageDef);
+
 const renderBonusCount = (_: BonusCountDef) => (
-  <div className="relative -bottom-3 h-auto flex items-end mt-14 shrink-0">
+  <div className="w-full pt-default mt-s flex items-end">
     {_.bonusCount ? (
-      <span className="font-mohave -tracking-[5px] text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7">
+      <span className="shrink-0 w-1/2 sm:w-auto font-mohave text-title-extra -tracking-[5px] bg-clip-text text-transparent bg-green-to-yellow mt-lg">
         {_.bonusCount}
       </span>
     ) : null}
     {_.bonusName ? (
-      <span className="text-h2 bg-clip-text text-transparent bg-green-to-yellow">
-        {_.bonusName}
-      </span>
+      <div className="w-1/2 sm:w-auto bg-clip-text text-transparent bg-green-to-yellow">
+        <Text size="text-h2">{_.bonusName}</Text>
+      </div>
     ) : null}
   </div>
 );
 
 const renderBonusImage = (_: BonusImageDef) =>
-  _.image ? <Img className={`w-12 h-12 min-w-12 p-3 rounded-icon`} image={_.image} /> : null;
+  _.image ? <Img className="min-w-12 p-xs rounded-icon shrink-0" image={_.image} /> : null;

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

@@ -39,20 +39,20 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
         <div className="flex justify-between">
           <div className="w-2/5">
             {renderWantedSumInput({
-              title: 'Сумма вклада, ₽',
+              title: 'Сумма, ₽',
               min: calculatorParams.minSum,
               max: calculatorParams.maxSum,
               ...field('moneyValue'),
               value: calculatorParams.moneyValue,
             })}
             {renderDaysInput({
-              title: 'Срок вклада, дни',
+              title: 'Срок, дней',
               min: calculatorParams.minDays,
               max: calculatorParams.maxDays,
               ...field('daysValue'),
               value: calculatorParams.daysValue,
             })}
-            <div className="mt-7 flex justify-between">
+            <div className="mt-2xl flex justify-between">
               {renderBusinessDepositParamsForm(calculatorParams, field)}
               {renderInterestPayment({
                 title: 'Выплата процентов',
@@ -74,10 +74,15 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
           )}
 
           <div className="w-96">
-            <CalculatorValueBlock title="Доход по вкладу" value={income} postfix="₽" prefix="+" />
+            <CalculatorValueBlock
+              title="Доход в конце срока"
+              value={income}
+              postfix="₽"
+              prefix="+"
+            />
             <CalculatorValueBlock title="Сумма в конце срока" value={finalSum} postfix="₽" />
-            {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}
-            <div className="mt-7">{renderFootnote(footnote)}</div>
+            {renderButtonsSection(buttons, { className: 'mt-2xl', isVertical: true })}
+            <div className="mt-2xl">{renderFootnote(footnote)}</div>
           </div>
         </div>
         <div className="mt-5">{renderFootnote(bottomFootnote)}</div>

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

@@ -24,7 +24,7 @@ export interface CreditCalculatorProp extends CreditCalculatorProps {
 export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
   ({ className, sourceBookDir, buttons, footnote, paramsViewSettings }) => {
     const [userInputParams, { field }] = useForm({
-      isAnnuity: false,
+      isAnnuity: true,
       isInsurance: true,
       isSalaryClient: false,
       isPensionClient: false,

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

@@ -43,14 +43,14 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
       <section className={style('flex justify-between', className)}>
         <div className="w-2/5">
           {renderWantedSumInput({
-            title: 'Сумма вклада, ₽',
+            title: 'Сумма, ₽',
             min: calculatorParams.minSum,
             max: calculatorParams.maxSum,
             ...field('moneyValue'),
             value: calculatorParams.moneyValue,
           })}
           {renderMonthsInput({
-            title: 'Срок вклада, месяцев',
+            title: 'Срок, месяцев',
             min: calculatorParams.minMonths,
             max: calculatorParams.maxMonths,
             availableMonths: calculatorParams.availableMonths,
@@ -63,7 +63,7 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
         </div>
         <Rate rate={rate} rateBlockClassName="tracking-[-25px]" unit="%" />
         <div className="w-96">
-          <CalculatorValueBlock title="Доход по вкладу" value={income} postfix="₽" prefix="+" />
+          <CalculatorValueBlock title="Доход в конце срока" value={income} postfix="₽" prefix="+" />
           <CalculatorValueBlock title="Сумма в конце срока" value={finalSum} postfix="₽" />
           {renderButtonsSection(buttons, { className: 'mt-2xl', isVertical: true })}
           {renderFootnote(footnote)}

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

@@ -2,15 +2,17 @@ import { JSX } from '@redneckz/uni-jsx';
 import { renderBlock } from '../../BlockRenderer/renderBlock';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import { useCarouselControls } from '../../hooks/useCarouselControls';
-import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
 import { SwipeListControlDots } from '../../ui-kit/SwipeListControl/SwipeListControlDots';
 import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import { style } from '../../utils/style';
-import type { CarouselContent } from './CarouselContent';
 import { CarouselScrollButtons } from './CarouselScrollButtons';
 import { ITEMS_GAP } from './itemsGap';
+import type { CarouselContent } from './CarouselContent';
+import type { BlockDef } from '../../model/ContentPageDef';
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
@@ -58,7 +60,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
           >
             {renderChildren({
               ...rest,
-              renderProps: (block, options, blockIndex) =>
+              renderProps: (block: BlockDef, options: BlockRendererOptions, blockIndex) =>
                 renderBlock(block, options, {
                   className: style(
                     'h-full min-w-80 sm:min-w-96',

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

@@ -51,7 +51,7 @@ export const CarouselScrollButtons = JSX<CarouselScrollButtonsProps>(
     }, [scrollRight, onScrollRight, hasEdgeBlocks, canScrollLeft, activeIndex, itemCount]);
 
     return (
-      <div>
+      <div className="hidden @lg:block">
         {renderBlur(scroll)}
         {canMoveLeft ? (
           <ScrollLeftButton
@@ -73,10 +73,17 @@ export const CarouselScrollButtons = JSX<CarouselScrollButtonsProps>(
 const renderBlur = (scroll: SwipeListScroll) => (
   <div>
     {scroll.canScrollLeft ? (
-      <div className={style(blurBaseStyle, 'left-0 bg-opacity-from-white')} />
+      <div
+        className={style(
+          blurBaseStyle,
+          'left-0 bg-opacity-from-white group-data-secondary:bg-none',
+        )}
+      />
     ) : null}
     {scroll.canScrollRight ? (
-      <div className={style(blurBaseStyle, 'right-0 bg-opacity-to-white')} />
+      <div
+        className={style(blurBaseStyle, 'right-0 bg-opacity-to-white group-data-secondary:bg-none')}
+      />
     ) : null}
   </div>
 );

package/mobile/src/components/CarouselLinks/CarouselLinks.tsx

@@ -3,18 +3,29 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
-import { style } from '../../utils/style';
 import { Carousel } from '../Carousel/Carousel';
 import { Headline } from '../Headline/Headline';
 import type { CarouselLinksContent } from './CarouselLinksContent';
+import { style } from '../../utils/style';
 
-export interface CarouselLinksProps extends CarouselLinksContent, UniBlockProps {}
-
-const MAX_LINKS_COUNT = 10;
+export interface CarouselLinksProps extends CarouselLinksContent, UniBlockProps {
+  maxLinksCount?: number;
+}
 
 export const CarouselLinks = JSX<CarouselLinksProps>(
-  ({ className, additionalDescription, description, links, title, ...rest }) => (
-    <BlockWrapper className={style('flex w-full overflow-hidden', className)} {...rest}>
+  ({
+    className,
+    additionalDescription,
+    description,
+    links,
+    title,
+    maxLinksCount = 10,
+    ...rest
+  }) => (
+    <BlockWrapper
+      className={style('flex flex-col sm:flex-row w-full overflow-hidden', className)}
+      {...rest}
+    >
       <div className="mr-xl flex-auto">
         <Headline
           isPadding={false}
@@ -32,18 +43,18 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
           />
         ) : null}
       </div>
-      {links?.length ? renderLinks(links) : null}
+      {links?.length ? renderLinks(links, maxLinksCount) : null}
     </BlockWrapper>
   ),
 );
 
-const renderLinks = (links: LinkProps[]) => {
-  const itemCount = Math.ceil(links.length / MAX_LINKS_COUNT);
+const renderLinks = (links: LinkProps[], maxLinksCount: number) => {
+  const itemCount = Math.ceil(links.length / maxLinksCount);
 
   return (
     <Carousel
-      className="min-w-[832px] w-[832px]"
-      version=""
+      className="sm:w-2/3 w-full p-0 sm:p-2xl"
+      version="secondary"
       itemCount={itemCount}
       arrowsPadded={false}
       showDots={true}
@@ -51,12 +62,12 @@ const renderLinks = (links: LinkProps[]) => {
       {new Array(itemCount).fill(null).map((_, groupIndex) => (
         <div
           key={String(groupIndex)}
-          className="w-[672px] min-w-[672px] ml-10 mr-10 flex flex-wrap self-start"
+          className={style('flex flex-wrap self-start sm:w-[672px] w-full sm:mx-5xl')}
         >
           {links
-            .slice(groupIndex * MAX_LINKS_COUNT, (groupIndex + 1) * MAX_LINKS_COUNT)
+            .slice(groupIndex * maxLinksCount, (groupIndex + 1) * maxLinksCount)
             .map((link, index) => (
-              <LinkButton key={String(index)} className="m-1" {...link} />
+              <LinkButton key={String(index)} className="sm:m-2xs" {...link} />
             ))}
         </div>
       ))}

package/mobile/src/components/CarouselLinks/CarouselLinksContent.ts

@@ -8,4 +8,6 @@ export type CarouselLinksContent = UniBlockContent &
   AdditionalDescriptionProps & {
     /** @title Ссылки */
     links?: LinkProps[];
+    /** @title Отступы вложенных компонентов */
+    isInnerPadding?: boolean;
   };

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

@@ -55,7 +55,7 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>(
     return (
       <section
         className={style(
-          'relative',
+          'relative @container',
           pageStyle,
           className,
           isSomeDialogOpened ? 'overflow-hidden h-screen' : '',
@@ -63,7 +63,7 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>(
         data-theme={colorPalette}
       >
         {slots?.header ? (
-          <div className="mb-5 shadow-[0_8px_32px_0px_#00000014]">
+          <div className="relative z-10 mb-5 shadow-[0_8px_32px_0px_#00000014]">
             {renderBlocksList(slots?.header, {
               ...options,
               slotName: 'header',
@@ -71,7 +71,7 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>(
             })}
           </div>
         ) : null}
-        <div className="container grid grid-cols-12 gap-1">
+        <div className="container @lg:grid @lg:grid-cols-12 @lg:gap-1">
           {renderChildren({ block: data, options, extraProps: { className: 'scroll-mt-12' } })}
           {renderBlocksList(slots?.footer, {
             ...options,

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

@@ -2,45 +2,41 @@ import { JSX } from '@redneckz/uni-jsx';
 import { Button } from '../../ui-kit/Button/Button';
 import { Text } from '../../ui-kit/Text/Text';
 import type { ContactGroup, ContactInfo } from './FooterContent';
-import { style } from '../../utils/style';
 
 export interface ContactsProps {
   className?: string;
   items?: ContactGroup[];
-  hasButton?: boolean;
 }
 
-export const Contacts = JSX<ContactsProps>(({ className = '', items, hasButton }) => (
-  <div className={style('space-y-xl', className)}>
+export const Contacts = JSX<ContactsProps>(({ className = '', items }) => (
+  <div className={className}>
     {items?.length ? items.map(renderContactsGroup) : null}
-    {hasButton ? (
-      <Button
-        version="primary"
-        className="mb-6 w-full"
-        href="https://www.rshb.ru/feedback/question/"
-        target="_blank"
-        ariaLabel="Обратная связь"
-        text="Обратная связь"
-      />
-    ) : null}
+    <Button
+      version="primary"
+      className="w-full"
+      href="https://www.rshb.ru/feedback/question/"
+      target="_blank"
+      ariaLabel="Обратная связь"
+      text="Обратная связь"
+    />
   </div>
 ));
 
 const renderContactsGroup = (item: ContactGroup, i: number) => (
-  <div className="space-y-m" key={String(i)}>
-    <div className="">
+  <div className="mb-m" key={String(i)}>
+    <div className="mb-m">
       <Text size="text-l" font="font-medium">
         {item?.title}
       </Text>
     </div>
-    <div className="space-y-m">{item.items?.map(renderContact)}</div>
+    <div>{item.items?.map(renderContact)}</div>
   </div>
 );
 
 const renderContact = (item: ContactInfo, index: number) => (
-  <div className="space-y-2xs" key={String(index)}>
+  <div className="mb-m" key={String(index)}>
     <div>{renderText(item.type, item.text)}</div>
-    <div className="text-s font-light text-secondary-text">{item.description}</div>
+    <div className="mt-2xs text-s font-light text-secondary-text">{item.description}</div>
   </div>
 );
 

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

@@ -13,32 +13,46 @@ import type { FooterProps } from './FooterProps';
 import { HorizontalNavigation } from './HorizontalNavigation';
 import { SocialMedia } from './SocialMedia';
 import { TextInformation } from './TextInformation';
+import { Text } from '../../ui-kit/Text/Text';
 
 export const Footer = JSX<FooterProps>(({ className, sitemap, ...rest }) => {
-  const { relatedEnterprises, contacts, socialMedia, mobileApps, horizontalNavigationTitle } =
-    useSWRResource<FooterDataProps>(
-      projectSettings.FOOTER || 'footer',
-      rest.options?.page?.fallback,
-    );
+  const {
+    relatedEnterprises,
+    contacts,
+    socialMedia,
+    mobileApps,
+    horizontalNavigationTitle,
+    documents,
+  } = useSWRResource<FooterDataProps>(
+    projectSettings.FOOTER || 'footer',
+    rest.options?.page?.fallback,
+  );
 
   return (
-    <BlockWrapper tag="footer" className={className} defaultPadding="px-4 py-6" {...rest}>
-      <div className="mb-4 pb-5 border-b border-main-divider">
+    <BlockWrapper tag="footer" className={className} {...rest}>
+      <div className="mb-lg pb-xs border-b border-main-divider">
         {sitemap?.topItems?.map((item, i) => (
           <RollupItem key={String(i)} label={item?.text} labelIcon={item?.icon}>
-            <LinkList items={item.items} className="my-3" />
+            <LinkList items={item.items} />
           </RollupItem>
         ))}
       </div>
       <Contacts className="overflow-hidden" items={contacts} />
-      <SocialMedia className="mb-4" media={socialMedia} />
-      {mobileApps?.map(renderButton)}
+      <div className="mt-xl">
+        <SocialMedia className="mb-xl" media={socialMedia} buttonSize="stretched">
+          Соцсети
+        </SocialMedia>
+        <Text size="text-s" font="font-light" color="text-secondary-text">
+          Мобильное приложение
+        </Text>
+        <div className="mt-xs">{mobileApps?.map(renderButton)}</div>
+      </div>
       <HorizontalNavigation
-        className="pt-m pb-2xl border-y border-main-divider"
+        className="py-lg border-y border-main-divider"
         title={horizontalNavigationTitle}
         links={relatedEnterprises}
       />
-      <TextInformation />
+      <TextInformation links={documents} />
     </BlockWrapper>
   );
 });
@@ -49,7 +63,7 @@ const renderButton = ({ href = '/' }: LinkCommonProps, i: number) => {
   return (
     <Button
       key={String(i)}
-      className="w-full mb-4"
+      className="w-full mb-lg"
       text={label}
       version="secondary"
       href={href}