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

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';
@@ -26,7 +26,11 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 
     return (
       <BlockWrapper className={style('flex flex-col', className)} defaultPadding="p-3xl" {...rest}>
-        {renderIconBlock(icon)}
+        {isIcon(icon) ? (
+          <div className="self-center">
+            <Img image={icon} />
+          </div>
+        ) : null}
         {title ? (
           <Heading className={style('pt-xs', align)} headingType="h5" title={title} />
         ) : null}
@@ -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/SocialMedia.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { ButtonVersion } from '../../model/ButtonVersion';
-import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Text } from '../../ui-kit/Text/Text';
+import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
 import { findIconByHref } from './findIconByHref';
 
@@ -22,7 +22,7 @@ export const SocialMedia = JSX<SocialMediaProps>(
     const buttons: ButtonContent[] | undefined = media?.map((_) => {
       const { href, icon, text } = _;
       const { iconMapped } = findIconByHref(href);
-      const iconCustom = getFilteredIcon(icon) ?? iconMapped;
+      const iconCustom = isIcon(icon) ? icon : iconMapped;
       const buttonText = showButtonText ? { text } : { text: '' };
 
       if (!hasText && text) {
@@ -60,5 +60,3 @@ export const SocialMedia = JSX<SocialMediaProps>(
     );
   },
 );
-
-const getFilteredIcon = (icon: Picture | undefined) => (icon?.src || icon?.icon ? icon : undefined);

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

@@ -12,7 +12,7 @@ export const TextInformation = JSX<FooterLink>(({ className = '', links }) => (
       </Text>
     </div>
     {links?.length ? (
-      <div className="flex flex-col @lg:flex-row justify-start items-start gap-x-lg gap-y-xs pt-lg">
+      <div className="flex flex-col @5xl:flex-row justify-start items-start gap-x-lg gap-y-xs pt-lg">
         {links.map((_, i) => (
           <TextInformationLink key={String(i)} index={i} {..._} />
         ))}

package/mobile/src/components/ProductBlock/renderBackwardButton.tsx

@@ -22,7 +22,13 @@ export function renderBackwardButton(version: ButtonVersion, handleClick: () =>
           }}
         />
       </div>
-      <Button version="link" text={text} ariaLabel={text} onClick={handleClick} />
+      <Button
+        version="link"
+        className="group-data-secondary:text-white/80"
+        text={text}
+        ariaLabel={text}
+        onClick={handleClick}
+      />
     </div>
   );
 }

package/mobile/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type IconName } from '../../icons/IconName';
 import { type UniBlockProps } from '../../model/JSXBlock';
-import { type Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -10,6 +9,7 @@ import { Img } from '../../ui-kit/Img/Img';
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
 import { type TextColor } from '../../ui-kit/Text/TextProps';
+import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
 import { type RepresentativeOfficeInfoContent } from './RepresentativeOfficeInfoContent';
 
@@ -36,7 +36,11 @@ export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
       {...rest}
     >
       <div className="w-full flex justify-between flex-row-reverse">
-        {renderIconBlock(icon)}
+        {isIcon(icon) ? (
+          <div className={'w-10 h-7 sm:w-24 sm:h-16'}>
+            <Img image={icon} />
+          </div>
+        ) : null}
         {title ? <Heading headingType="h3" as="h3" title={title} /> : null}
       </div>
       <div className="w-full space-y-m">
@@ -59,12 +63,6 @@ export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
   ),
 );
 
-const renderIconBlock = (icon?: Picture) => (
-  <div className={'w-10 h-7 sm:w-24 sm:h-16'}>
-    {icon?.src || icon?.icon ? <Img image={icon} /> : null}
-  </div>
-);
-
 const renderDescriptionBlock = (__html?: string) => (
   <div className="border-b border-main-divider pb-lg">
     <RichText __html={__html} />

package/mobile/src/components/StepsBlock/StepsBlock.tsx

@@ -7,9 +7,9 @@ import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { assertUnreachable } from '../../utils/assertUnreachable';
+import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
-import { checkCanRenderIcon } from './checkCanRenderIcon';
 import { type DefaultStep, type Step, type StepsBlockContent } from './StepsBlockContent';
 import { STEPS_BLOCK_STYLE } from './StepsBlockStyleMaps';
 
@@ -128,7 +128,7 @@ const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step
       )}
     >
       <span className="flex max-w-full max-h-full self-center text-h4 text-secondary-text group-data-secondary:text-white">
-        {checkCanRenderIcon(step?.icon) ? (
+        {isIcon(step?.icon) ? (
           <Img
             image={{ ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }}
             imageClassName="max-w-full max-h-full"

package/mobile/src/components/Tabs/Tabs.tsx

@@ -31,9 +31,9 @@ export const Tabs = JSX<TabsBlockProps>(
             (_) => _.type === 'group' && _.ref === router.query[TAB_QUERY_PARAM_KEY],
           ) || 0
         : 0;
-
+      const defaultTab = tabs[defaultTabIndex] || tabs[0];
       setActiveTabIndex(defaultTabIndex);
-      fireTabEvent(tabs[defaultTabIndex]);
+      fireTabEvent(defaultTab);
     }, [isReady]);
 
     useEffect(() => {
@@ -57,10 +57,14 @@ export const Tabs = JSX<TabsBlockProps>(
     const handleChange = useCallback(
       (_: TabItemBase) => {
         const index = tabsControlItems.indexOf(_);
+        const tab = tabs[index];
 
         setActiveTabIndex(index);
-        fireTabEvent(tabs[index]);
-        updateUrlSearchTabParam(_);
+        fireTabEvent(tab);
+
+        if (tab.type === 'group') {
+          updateUrlSearchTabParam(_);
+        }
       },
       [tabs, tabsControlItems],
     );

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

@@ -81,7 +81,7 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
   },
 );
 
-const leftOrRightImage = (img: VNode, directionRight: boolean) =>
+export const leftOrRightImage = (img: VNode, directionRight: boolean) =>
   directionRight ? { rightImage: img } : { leftImage: img };
 
 const renderTags = (tags: string[]) => (tags?.length ? <Tags tags={tags} /> : null);

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

@@ -38,7 +38,7 @@ export const BaseTile = JSX<BaseTileProps>(
   }) => (
     <div
       className={style(
-        'relative flex flex-col gap-3xl font-sans overflow-hidden',
+        'relative flex flex-col gap-3xl overflow-hidden',
         padding || defaultPadding,
         className,
       )}
@@ -46,10 +46,11 @@ export const BaseTile = JSX<BaseTileProps>(
       {title ? <div className="relative">{title}</div> : null}
       <div
         className={style(
-          'grow relative flex flex-col-reverse @xl:flex-row justify-around @xl:justify-between items-stretch gap-3xl',
+          'grow relative flex flex-col @md:flex-row gap-3xl',
+          leftImage ? 'self-start' : '',
         )}
       >
-        {renderImageContainer(leftImage, { imageAlign })}
+        {renderImageContainer(leftImage, { imageAlign, className: 'm-auto' })}
         <div
           className={style(
             'grid gap-3xl',
@@ -66,7 +67,7 @@ export const BaseTile = JSX<BaseTileProps>(
               '@xl:justify-self-end @xl:col-start-2',
               buttons ? rowSpanStyle(isImageAlwaysOnRight) : '',
               positionStyle(isImageAlwaysOnRight),
-              isImageSecondary ? 'hidden @xl:block' : '',
+              imageSecondaryStyle(isImageSecondary),
             ),
             imageAlign,
           })}
@@ -101,3 +102,6 @@ const renderImageContainer = (
       {image}
     </div>
   ) : null;
+
+const imageSecondaryStyle = (isImageSecondary: boolean) =>
+  isImageSecondary ? 'hidden @md:block' : '';

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

@@ -6,17 +6,22 @@ import { type ButtonProps } from './ButtonProps';
 
 export const ButtonInner = JSX<ButtonProps>((props) => {
   const { text, aboveText, appendLeft, appendRight, version = 'primary' } = props;
+  const iconHideStyle = isWithText(props) ? 'hidden lg:block' : '';
 
   return (
     <div className={style(getButtonStyle(props), 'flex gap-xs')}>
-      {appendLeft ? <div className={iconStyleMap[version]}>{appendLeft}</div> : null}
+      {appendLeft ? (
+        <div className={style(iconHideStyle, iconStyleMap[version])}>{appendLeft}</div>
+      ) : null}
       {isWithText(props) ? (
         <div className="whitespace-pre">
           {aboveText ? <div className="text-xs font-light text-left">{aboveText}</div> : null}
           <div className={`text-left ${aboveText ? 'text-s -mt-3xs' : 'text-l'}`}>{text}</div>
         </div>
       ) : null}
-      {appendRight ? <div className={iconStyleMap[version]}>{appendRight}</div> : null}
+      {appendRight ? (
+        <div className={style(iconHideStyle, iconStyleMap[version])}>{appendRight}</div>
+      ) : null}
     </div>
   );
 });

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

@@ -1,4 +1,5 @@
 import { type Picture } from '../../model/Picture';
+import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
 import { Img } from '../Img/Img';
 import { Button } from './Button';
@@ -57,7 +58,7 @@ const getIconVersion = (icon: Picture | undefined, version = 'secondary') => {
 };
 
 const renderButtonIcon = (icon: Picture) =>
-  icon?.icon || icon?.src ? (
+  isIcon(icon) ? (
     <Img
       image={icon}
       width={String(icon?.size?.width || DEFAULT_ICON_W)}

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

@@ -35,8 +35,12 @@ export const LocationDialog = JSX<UniBlockProps>(() => {
 
   return (
     <Dialog
+      className="pb-20"
       head={
         <div>
+          <Text size="text-h4" color="text-primary-text">
+            Выберите филиал
+          </Text>
           {currentLocation ? (
             <div className="mb-s">
               <Text size="text-l" font="font-light">
@@ -61,7 +65,7 @@ export const LocationDialog = JSX<UniBlockProps>(() => {
             .map(renderRegion(handleChangeLocation))}
         </div>
       ) : (
-        <div className="columns-2 sm:columns-5">
+        <div className="columns-1 sm:columns-5">
           {Array.from(regionsGroupByLetter.entries()).map(renderRegionGroup(handleChangeLocation))}
         </div>
       )}

package/mobile/src/ui-kit/LocationDialog/renderForeignOffices.tsx

@@ -6,13 +6,13 @@ import { Text } from '../Text/Text';
 
 export const renderForeignOffices = (foreignOffices: ForeignOffice[] | undefined) =>
   foreignOffices?.length ? (
-    <div className="border-t border-main-divider mt-2xs pt-2xs">
+    <div className="sm:border-t sm:border-main-divider mt-2xs pt-2xs">
       <div className="mb-m">
         <Text size="text-m" font="font-light" color="text-secondary-text">
           Представительства за рубежом:
         </Text>
       </div>
-      <div className="flex gap-5xl">
+      <div className="flex flex-col sm:flex-row gap-5xl">
         {foreignOffices.map((office, i: number) => (
           <ForeignOffice key={String(i)} {...office} />
         ))}
@@ -25,11 +25,13 @@ const ForeignOffice = JSX<ForeignOffice>(({ icon, ...rest }) => {
   const { text, target, href, onClick } = link(rest);
 
   return (
-    <div className="flex gap-s">
+    <div className="flex gap-s items-center">
       {icon ? <Img pathPrefix="/wcms-resources/" image={icon} /> : null}
       {text ? (
         <a className="hover:text-primary-hover" href={href} target={target} onClick={onClick}>
-          {text}
+          <Text size="text-l" font="font-light" color="text-primary-text">
+            {text}
+          </Text>
         </a>
       ) : null}
     </div>

package/mobile/src/ui-kit/LocationDialog/renderRegion.tsx

@@ -1,15 +1,18 @@
 import { type Region } from '../../hooks/useRegions';
+import { Text } from '../Text/Text';
 
 export const renderRegion = (onChangeLocation?: (region: Region) => void) => (region: Region) =>
   (
-    <div key={region.id} className="mb-2xs">
+    <div key={region.id} className="mb-xs sm:mb-2xs">
       <button
         className="cursor-pointer hover:text-primary-hover"
         onClick={() => {
           onChangeLocation && onChangeLocation(region);
         }}
       >
-        {region.name || ''}
+        <Text size="text-l" font="font-light">
+          {region.name || ''}
+        </Text>
       </button>
     </div>
   );

package/mobile/src/utils/isIcon.ts

@@ -0,0 +1,3 @@
+import { type Picture } from '../model/Picture';
+
+export const isIcon = (icon: Picture | undefined): boolean => Boolean(icon?.src || icon?.icon);

package/package.json

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

package/src/components/Blocks.mobile.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';
@@ -58,7 +57,6 @@ export const Blocks: BlocksRegistry = {
   CarouselCatalogCard,
   CarouselLinks,
   CarouselProductCard,
-  CarouselProgramsCard,
   CarouselRecommendationCard,
   CarouselTariffsCard,
   ComparisonTable,

package/src/components/Blocks.ts

@@ -14,7 +14,6 @@ import { CarouselCatalogCard } from './CarouselCatalogCard/CarouselCatalogCard';
 import { CarouselInvestmentCard } from './CarouselInvestmentCard/CarouselInvestmentCard';
 import { CarouselLinks } from './CarouselLinks/CarouselLinks';
 import { CarouselProductCard } from './CarouselProductCard/CarouselProductCard';
-import { CarouselProgramsCard } from './CarouselProgramsCard/CarouselProgramsCard';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
 import { CarouselRichTextCard } from './CarouselRichTextCard/CarouselRichTextCard';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
@@ -73,7 +72,6 @@ export const Blocks: BlocksRegistry = {
   CarouselInvestmentCard,
   CarouselLinks,
   CarouselProductCard,
-  CarouselProgramsCard,
   CarouselRecommendationCard,
   CarouselRichTextCard,
   CarouselTariffsCard,

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

@@ -1,7 +1,6 @@
-import '../../setup-fixture';
-
 import { type BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { type Picture } from '../../model/Picture';
+import '../../setup-fixture';
 import { Blocks } from '../Blocks';
 import { BANK_HISTORY_CARD } from '../CarouselBankHistoryCard/CarouselBankHistoryCard.fixture';
 import { CARD } from '../CarouselCard/CarouselCard.fixture';
@@ -10,7 +9,7 @@ import {
   PRODUCT_CARD,
   PRODUCT_CARD_SMALL,
 } from '../CarouselProductCard/CarouselProductCard.fixture';
-import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
+import { CAROUSEL_RECOMMENDATION_CARD_BENEFITS } from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture';
 import { CAROUSEL_RECOMMENDATION_CARD } from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture.mobile';
 import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
 import { Carousel } from './Carousel';
@@ -126,22 +125,22 @@ export default {
       />
     </div>
   ),
-  program: (
+  recommendations: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
         block={{
           type: 'Carousel',
           blocks: new Array(3).fill({
-            type: 'CarouselProgramsCard',
-            content: BUSINESS_CARD,
+            type: 'CarouselRecommendationCard',
+            content: CAROUSEL_RECOMMENDATION_CARD,
           }),
         }}
         options={options}
       />
     </div>
   ),
-  recommendations: (
+  recommendationsSecondary: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
@@ -149,22 +148,24 @@ export default {
           type: 'Carousel',
           blocks: new Array(3).fill({
             type: 'CarouselRecommendationCard',
-            content: CAROUSEL_RECOMMENDATION_CARD,
+            content: { version: 'secondary', ...CAROUSEL_RECOMMENDATION_CARD },
           }),
         }}
         options={options}
       />
     </div>
   ),
-  recommendationsSecondary: (
+  recommendationsBenefits: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
+        visibleItemCount={0}
+        cardSize="big"
         block={{
           type: 'Carousel',
-          blocks: new Array(3).fill({
+          blocks: new Array(6).fill({
             type: 'CarouselRecommendationCard',
-            content: { version: 'secondary', ...CAROUSEL_RECOMMENDATION_CARD },
+            content: CAROUSEL_RECOMMENDATION_CARD_BENEFITS,
           }),
         }}
         options={options}