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

package/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/src/components/Bonus/Bonus.fixture.mobile.tsx

@@ -0,0 +1,72 @@
+import '../../setup-fixture';
+
+import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { Bonus } from './Bonus';
+import type { BonusContent } from './BonusContent';
+
+const imageSize = {
+  height: 242,
+  width: 242,
+};
+
+const cardWithMoney: Picture = {
+  src: 'card-with-diamond.png',
+  alt: 'Кредиты в РСХБ',
+  format: 'webp',
+  size: imageSize,
+};
+
+const buttons: ButtonProps[] = [
+  {
+    text: 'Установить',
+    href: '/credit-cards',
+    version: 'secondary',
+  },
+];
+
+export const BONUS: BonusContent = {
+  title: 'Начисление баллов',
+  description:
+    /* eslint-disable max-len */
+    'Получайте 1% бонусными баллами с любых покупок и 1,5% баллами с покупок в категории «Путешествия». Обменивайте бонусные баллы на авиа и ж/д билеты, бронирование отелей и прокат автомобилей.',
+  bonusItems: [
+    {
+      title: '5 баллов за каждые 100 ₽',
+      description:
+        'Повышенное начисление баллов за операции оплаты товаров и услуг в сети АЗС Роснефть',
+      bonusItemContent: {
+        bonusType: 'count',
+        bonusCount: '5',
+        bonusName: 'баллов',
+      },
+    },
+    {
+      title: '1 балл за каждые 100 ₽',
+      description: 'За остальные операции оплаты товаров и услуг',
+      bonusItemContent: {
+        bonusType: 'count',
+        bonusCount: '1',
+        bonusName: 'балл',
+      },
+    },
+    {
+      title: '300 приветственных баллов',
+      description:
+        'За операции оплаты товаров и услуг на общую сумму 1 000 рублей и более в течение первых двух месяцев после получения карты',
+      bonusItemContent: {
+        bonusType: 'image',
+        image: cardWithMoney,
+      },
+      buttons,
+    },
+  ],
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Bonus className="col-span-12" {...BONUS} />
+    </div>
+  ),
+};

package/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/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/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/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/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/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/src/components/CarouselLinks/CarouselLinks.fixture.mobile.tsx

@@ -0,0 +1,34 @@
+import '../../setup-fixture';
+
+import { CarouselLinks } from './CarouselLinks';
+
+const link = {
+  text: 'Аудиторские заключения',
+  href: '#',
+};
+const links = Array(9).fill(link);
+
+const description = `Акционерное общество «Российский Сельскохозяйственный банк»* —
+  один из крупнейших банков в России. Был основан в 2000 году в целях развития
+  национальной кредитно-финансовой системы агропромышленного сектора и
+  сельских территорий Российской Федерации.`;
+
+const additionalDescription = `Сегодня это универсальный коммерческий банк,
+  предоставляющий все виды банковских услуг и занимающий лидирующие позиции
+  в финансировании агропромышленного комплекса России.`;
+
+const MAX_LINKS_COUNT_MOBILE = 3;
+
+export default {
+  default: (
+    <CarouselLinks
+      links={links}
+      title="О Банке"
+      description={description}
+      additionalDescription={additionalDescription}
+      maxLinksCount={MAX_LINKS_COUNT_MOBILE}
+      version="secondary"
+      block={{ type: 'Carousel', blocks: new Array(3).fill(link).flat() }}
+    />
+  ),
+};

package/src/components/CarouselLinks/CarouselLinks.fixture.tsx

@@ -17,6 +17,8 @@ const additionalDescription = `Сегодня это универсальный
   предоставляющий все виды банковских услуг и занимающий лидирующие позиции
   в финансировании агропромышленного комплекса России.`;
 
+const MAX_LINKS_COUNT = 10;
+
 export default {
   default: (
     <CarouselLinks
@@ -24,6 +26,7 @@ export default {
       title="О Банке"
       description={description}
       additionalDescription={additionalDescription}
+      maxLinksCount={MAX_LINKS_COUNT}
       version="secondary"
       block={{ type: 'Carousel', blocks: new Array(3).fill(link).flat() }}
     />

package/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/src/components/CarouselLinks/CarouselLinksContent.ts

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

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -32,7 +32,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
         defaultPadding="p-0"
         {...rest}
       >
-        <LinkWrapper href={href} target={target}>
+        <LinkWrapper href={href} target={target} className="h-full">
           <BaseTile
             className="h-full"
             defaultPadding="p-m"

package/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/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/src/components/Footer/Footer.mobile.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}