@redneckz/wildless-cms-uni-blocks 0.14.3 → 0.14.5

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

@@ -8,6 +8,7 @@
         },
         "productBlock": {
           "title": "Продуктовая галерея",
+          "headlineVersion": "XXL",
           "image": {
             "format": "webp",
             "size": {
@@ -17,20 +18,22 @@
           },
           "description": "Описание",
           "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
+          "isDotted": true,
+          "benefitsVersion": "normal",
           "benefits": [
             {
               "icon": {
                 "icon": "ActualBalanceIcon"
               },
-              "label": "Денежное преимущество",
-              "description": "эмпирическая выгода"
+              "label": "Преимущество №1",
+              "description": "Описание"
             },
             {
               "icon": {
                 "icon": "BankIcon"
               },
-              "label": "Возврат %",
-              "description": "при пополнении счёта"
+              "label": "Преимущество №2",
+              "description": "Описание"
             }
           ]
         }
@@ -42,6 +45,7 @@
         },
         "productBlock": {
           "title": "Продуктовая галерея",
+          "headlineVersion": "XXL",
           "image": {
             "format": "webp",
             "size": {
@@ -51,6 +55,8 @@
           },
           "description": "Описание",
           "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
+          "isDotted": true,
+          "benefitsVersion": "normal",
           "benefits": [
             {
               "icon": {

package/mobile/src/content-page-repository/transformHTML.ts

@@ -1,5 +1,5 @@
 import rehypeParse from 'rehype-parse';
-import rehypeSanitize from 'rehype-sanitize';
+import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
 import rehypeStringify from 'rehype-stringify';
 import { unified } from 'unified';
 import { replaceHeadingTags } from './replaceHeadingTags';
@@ -9,9 +9,17 @@ export async function transformHTML(html: string | null | undefined): Promise<st
     return '';
   }
 
+  const extendedSchema = {
+    ...defaultSchema,
+    protocols: {
+      ...defaultSchema.protocols,
+      href: [...(defaultSchema?.protocols?.href || []), 'tel'],
+    },
+  };
+
   const result = await unified()
     .use(rehypeParse)
-    .use(rehypeSanitize)
+    .use(rehypeSanitize, extendedSchema)
     .use(rehypeStringify)
     .process(html);
 

package/mobile/src/model/EmptyOptionType.ts

@@ -1,4 +1,4 @@
 /**
- * @title Выберите блок
+ * @title Не выбрано
  */
 export type EmptyOption = null;

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

@@ -32,7 +32,7 @@ const getButtonStyle = (props: ButtonContent) => {
 
   return style(
     'group/btn items-center justify-center',
-    isWithText(props) ? withTextStyle : 'h-12 w-12',
+    isWithText(props) ? withTextStyle : 'h-12 w-12 m-auto',
     rounded ? 'rounded-full' : '',
   );
 };

package/package.json

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

package/src/components/Blocks.ts

@@ -11,7 +11,6 @@ import { Carousel } from './Carousel/Carousel';
 import { CarouselBankHistoryCard } from './CarouselBankHistoryCard/CarouselBankHistoryCard';
 import { CarouselCard } from './CarouselCard/CarouselCard';
 import { CarouselCatalogCard } from './CarouselCatalogCard/CarouselCatalogCard';
-import { CarouselEventCard } from './CarouselEventCard/CarouselEventCard';
 import { CarouselInvestmentCard } from './CarouselInvestmentCard/CarouselInvestmentCard';
 import { CarouselLinks } from './CarouselLinks/CarouselLinks';
 import { CarouselProductCard } from './CarouselProductCard/CarouselProductCard';
@@ -70,7 +69,6 @@ export const Blocks: BlocksRegistry = {
   CarouselBankHistoryCard,
   CarouselCard,
   CarouselCatalogCard,
-  CarouselEventCard,
   CarouselInvestmentCard,
   CarouselLinks,
   CarouselProductCard,

package/src/components/Calculator/BonusCalculatorForm.tsx

@@ -15,7 +15,7 @@ export interface BonusCalculatorProps extends CommonCalculatorProps {
 }
 
 export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
-  ({ className = '', sourceBookDir = '', buttons, footnote }) => {
+  ({ className = '', sourceBookDir, buttons, footnote }) => {
     const [userInputParams, { field }] = useForm({
       travelExpenseValue: DEFAULT_TRAVEL_MIN_SUM,
       restExpenseValue: DEFAULT_REST_MIN_SUM,

package/src/components/Calculator/BusinessDepositCalculatorForm.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import type { BusinessDepositCalculatorProps } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
@@ -22,17 +23,19 @@ export interface BusinessDepositCalculatorProp extends BusinessDepositCalculator
 }
 
 export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
-  ({ className = '', sourceBookDir, buttons, footnote, bottomFootnote, isShowDepositeName }) => {
+  ({ className = '', rateParams, buttons, footnote, bottomFootnote, isShowDepositeName }) => {
     const [userInputParams, { field }] = useForm({
       moneyValue: BUSINESS_DEFAULT_SUM,
       daysValue: BUSINESS_DEFAULT_DAYS,
       isReplenished: false,
       isPartialWithdrawal: false,
-      isSmallBusiness: false,
       isMonthlyInterestPayment: false,
     });
 
-    const calculatorParams = useBusinessDepositCalculatorParams(userInputParams, sourceBookDir);
+    const calculatorParams = useBusinessDepositCalculatorParams(
+      userInputParams,
+      rateParams?.sourceBookDir,
+    );
     const { income, finalSum, rate, isUnavailableByTerm, depositeName } = calculatorParams;
 
     return (
@@ -52,13 +55,15 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
             ...field('daysValue'),
             value: calculatorParams.daysValue,
           })}
-          {renderBusinessDepositParamsForm(calculatorParams, field)}
-          {renderInterestPayment({
-            title: 'Выплата процентов',
-            orientation: 'vertical',
-            ...field('isMonthlyInterestPayment'),
-            radioGroupClassName: 'sm:flex-col',
-          })}
+          <div className="flex flex-col sm:flex-row gap-y-4 gap-x-14">
+            {renderBusinessDepositParamsForm(calculatorParams, field)}
+            {renderInterestPayment({
+              title: 'Выплата процентов',
+              orientation: 'vertical',
+              ...field('isMonthlyInterestPayment'),
+              radioGroupClassName: 'sm:flex-col',
+            })}
+          </div>
         </div>
         <div className="border-b border-main-divider md:hidden"></div>
         {renderRate({
@@ -82,24 +87,24 @@ const renderBusinessDepositParamsForm = (
   calculatorParams: BusinessDepositCalculatorParams,
   field: FormFieldRegisterer<BusinessDepositCalculatorUserInputParams>,
 ) => (
-  <div className="flex flex-col gap-y-xl sm:gap-y-s">
-    <Checkbox
-      text="Пополнение"
-      disabled={calculatorParams.isDisabledOperatingDeposit}
-      {...field('isReplenished')}
-      value={calculatorParams.isReplenished}
-    />
-    <Checkbox
-      disabled={calculatorParams.isDisabledOperatingDeposit}
-      text="Частичное снятие"
-      {...field('isPartialWithdrawal')}
-      value={calculatorParams.isPartialWithdrawal}
-    />
-    <Checkbox
-      text="ИП / малое предприятие"
-      {...field('isSmallBusiness')}
-      value={calculatorParams.isSmallBusiness}
-    />
+  <div className="space-y-s">
+    <Text color="text-secondary-text" font="font-light">
+      Параметры
+    </Text>
+    <div className="flex flex-col gap-y-xl sm:gap-y-s">
+      <Checkbox
+        text="Пополнение"
+        disabled={calculatorParams.isDisabledOperatingDeposit}
+        {...field('isReplenished')}
+        value={calculatorParams.isReplenished}
+      />
+      <Checkbox
+        disabled={calculatorParams.isDisabledOperatingDeposit}
+        text="Частичное снятие"
+        {...field('isPartialWithdrawal')}
+        value={calculatorParams.isPartialWithdrawal}
+      />
+    </div>
   </div>
 );
 

package/src/components/Calculator/Calculator.example.json

@@ -1,5 +1,6 @@
 {
   "content": {
+    "tabAlign": "left",
     "calculatorTabs": [
       {
         "nav": {

package/src/components/Calculator/Calculator.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useCarouselControls } from '../../hooks/useCarouselControls';
+import { Align } from '../../model/Align';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
@@ -14,6 +15,7 @@ export interface CalculatorProps extends CalculatorContent, UniBlockProps {}
 interface TabsProps {
   activeIndex: number;
   tabsNav: CalculatorNav[];
+  tabAlign?: Align;
   slideIndexShift: number;
   onClick: (index: number) => void;
 }
@@ -25,8 +27,14 @@ interface NavButtonProps {
   onClick: () => void;
 }
 
+const alignStyleMap: Record<Align, string> = {
+  start: 'justify-start',
+  center: 'justify-center',
+  end: 'justify-end',
+};
+
 export const Calculator = JSX<CalculatorProps>(
-  ({ className = '', calculatorTabs = [], ...rest }) => {
+  ({ className = '', tabAlign, calculatorTabs = [], ...rest }) => {
     const tabsNav = calculatorTabs.map((_) => _.nav || ({} as CalculatorNav));
     const calculatorBlocks = calculatorTabs.map(
       ({ calculatorBlock }) => calculatorBlock || ({} as CalculatorBlockDef),
@@ -48,7 +56,13 @@ export const Calculator = JSX<CalculatorProps>(
       >
         <div className="bg-white">
           {tabsNav.length > 1
-            ? renderTabs({ activeIndex, tabsNav, slideIndexShift, onClick: handleSlideIndexShift })
+            ? renderTabs({
+                activeIndex,
+                tabsNav,
+                tabAlign,
+                slideIndexShift,
+                onClick: handleSlideIndexShift,
+              })
             : null}
           {renderArrows({
             ...controls,
@@ -108,8 +122,9 @@ function renderNavButton({ tab, i, isActive, onClick }: NavButtonProps) {
   );
 }
 
-function renderTabs({ activeIndex, tabsNav, slideIndexShift, onClick }: TabsProps) {
+function renderTabs({ activeIndex, tabsNav, tabAlign, slideIndexShift, onClick }: TabsProps) {
   const CARD_SHIFT = 388;
+  const alignStyle = tabAlign ? alignStyleMap[tabAlign] : '';
 
   return (
     <div>
@@ -117,7 +132,7 @@ function renderTabs({ activeIndex, tabsNav, slideIndexShift, onClick }: TabsProp
         style={{ transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }}
         className="flex flex-col justify-end items-center h-32 pt-4xl box-border duration-1000"
       >
-        <div className="w-full flex flex-nowrap items-end gap-xs">
+        <div className={style('w-full flex flex-nowrap items-end gap-xs', alignStyle)}>
           {tabsNav.map((tab, i) =>
             renderNavButton({
               tab,

package/src/components/Calculator/Calculator.ui.json

@@ -11,6 +11,14 @@
           "sourceBookDir": {
             "ui:widget": "sourceBook"
           },
+          "rateParams": {
+            "rateType": {
+              "ui:widget": "hidden"
+            },
+            "sourceBookDir": {
+              "ui:widget": "sourceBook"
+            }
+          },
           "calcType": {
             "ui:widget": "hidden"
           },

package/src/components/Calculator/CalculatorContent.ts

@@ -1,9 +1,36 @@
+import { Align } from '../../model/Align';
 import type { EmptyOption } from '../../model/EmptyOptionType';
 import type { Footnote } from '../../model/Footnote';
 import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
 import type { IconProps } from '../../model/Picture';
 import type { ButtonsSectionContent } from '../../ui-kit/Button/ButtonsSectionContent';
 
+export interface RateParams {
+  /** @title Адрес справочника */
+  sourceBookDir?: string;
+}
+
+/**
+ * @title ЮЛ
+ * @default {"rateType": "UL"}
+ */
+export type ULRateDef = RateParams & {
+  rateType: 'UL';
+};
+
+/**
+ * @title ИП
+ * @default {"rateType": "IP"}
+ */
+export type IPRateDef = RateParams & {
+  rateType: 'IP';
+};
+
+/**
+ * @title Назначение ставки
+ */
+export type RateParamsDef = EmptyOption | ULRateDef | IPRateDef;
+
 export type CommonCalculatorProps = Footnote &
   ButtonsSectionContent & {
     /** @title Адрес справочника */
@@ -51,7 +78,9 @@ export interface DepositCalculatorProps extends CommonCalculatorProps {
   paramsViewSettings?: DepositCalculatorParamsViewSettings;
 }
 
-export interface BusinessDepositCalculatorProps extends CommonCalculatorProps {
+export interface BusinessDepositCalculatorProps extends Footnote, ButtonsSectionContent {
+  /** @title Ставка для */
+  rateParams?: RateParamsDef;
   /** @title Сноска снизу блока */
   bottomFootnote?: string;
   /** @title Показывать название депозита */
@@ -151,6 +180,7 @@ export type CalculatorTab = {
  * @title Калькулятор
  */
 export interface CalculatorContent {
+  tabAlign?: Align;
   /** @title Вкладки */
   calculatorTabs?: CalculatorTab[];
 }

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -1,21 +1,21 @@
 /* eslint-disable max-lines, max-lines-per-function */
 import { JSX } from '@redneckz/uni-jsx';
+import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { style } from '../../utils/style';
 import type {
   CreditCalculatorParamsViewSettings,
   CreditCalculatorProps,
 } from './CalculatorContent';
+import { CalculatorValueBlock } from './CalculatorValueBlock';
+import { CREDIT_DEFAULT_SUM, DEFAULT_MONTHS } from './constants';
 import { renderFootnote } from './renderFootnote';
-import { renderWantedSumInput } from './renderWantedSumInput';
 import { renderMonthsInput } from './renderMonthsInput';
-import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
-import { CREDIT_DEFAULT_SUM, DEFAULT_MONTHS } from './constants';
-import { CreditCalculatorParams, useCreditCalculatorParams } from './useCreditCalculatorParams';
 import { renderPaymentType } from './renderPaymentType';
-import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { renderRate } from './renderRate';
-import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { renderWantedSumInput } from './renderWantedSumInput';
+import { CreditCalculatorParams, useCreditCalculatorParams } from './useCreditCalculatorParams';
 
 export interface CreditCalculatorProp extends CreditCalculatorProps {
   className?: string;

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -1,21 +1,21 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { style } from '../../utils/style';
 import type {
   DepositCalculatorParamsViewSettings,
   DepositCalculatorProps,
 } from './CalculatorContent';
-import { renderFootnote } from './renderFootnote';
-import { renderWantedSumInput } from './renderWantedSumInput';
-import { renderMonthsInput } from './renderMonthsInput';
-import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
-import { DEPOSIT_DEFAULT_SUM } from './constants';
-import { DepositCalculatorParams, useDepositCalculatorParams } from './useDepositCalculatorParams';
-import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
+import { DEPOSIT_DEFAULT_SUM } from './constants';
+import { renderFootnote } from './renderFootnote';
 import { renderInterestPayment } from './renderInterestPayment';
-import { renderRegistrationType } from './renderRegistrationType';
+import { renderMonthsInput } from './renderMonthsInput';
 import { renderRate } from './renderRate';
+import { renderRegistrationType } from './renderRegistrationType';
+import { renderWantedSumInput } from './renderWantedSumInput';
+import { DepositCalculatorParams, useDepositCalculatorParams } from './useDepositCalculatorParams';
 
 export interface DepositCalculatorProp extends DepositCalculatorProps {
   className?: string;

package/src/components/Calculator/constants.ts

@@ -94,7 +94,6 @@ export const DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS: BusinessDepositCalculat
     isMonthlyInterestPayment: true,
     isReplenished: false,
     isPartialWithdrawal: false,
-    isSmallBusiness: false,
     depositeName: "Депозит 'Стабильный'",
   };
 

package/src/components/Calculator/useBonusCalculatorParams.ts

@@ -29,7 +29,7 @@ export interface BonusCalculatorParams
 
 export const useBonusCalculatorParams = (
   userInputParams: BonusCalculatorUserInputParams,
-  sourceBookDir: string,
+  sourceBookDir?: string,
 ) => {
   const { travelExpenseValue, restExpenseValue } = userInputParams;
   const bonusCalculatorSourceBookParams =

package/src/components/Calculator/useBusinessDepositCalculatorParams.ts

@@ -12,7 +12,6 @@ export interface BusinessCommonDepositParams {
   isMonthlyInterestPayment: boolean;
   isReplenished: boolean;
   isPartialWithdrawal: boolean;
-  isSmallBusiness: boolean;
 }
 export interface BusinessDepositCalculatorSourceBookParams extends BusinessCommonDepositParams {
   minSum: number;
@@ -45,14 +44,8 @@ export const useBusinessDepositCalculatorParams = (
   userInputParams: BusinessDepositCalculatorUserInputParams,
   sourceBookDir?: string,
 ): BusinessDepositCalculatorParams => {
-  const {
-    daysValue,
-    moneyValue,
-    isPartialWithdrawal,
-    isReplenished,
-    isSmallBusiness,
-    isMonthlyInterestPayment,
-  } = userInputParams;
+  const { daysValue, moneyValue, isPartialWithdrawal, isReplenished, isMonthlyInterestPayment } =
+    userInputParams;
   const data = useCalculatorParams<BusinessDepositCalculatorData>(
     sourceBookDir || BUSINESS_DEPOSIT_CALC_DEFAULT_DIR,
   );
@@ -73,7 +66,6 @@ export const useBusinessDepositCalculatorParams = (
     data?.rateRows?.find((_) => {
       return (
         isMonthlyInterestPayment === _.isMonthlyInterestPayment &&
-        isSmallBusiness === _.isSmallBusiness &&
         checkIsOperatingDeposit(isOperatingDeposit, _) &&
         checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], _) &&
         checkRangeByKeys(daysValue, ['minDays', 'maxDays'], _)

package/src/components/Carousel/Carousel.fixture.tsx

@@ -6,7 +6,6 @@ import { Blocks } from '../Blocks';
 import { BANK_HISTORY_CARD } from '../CarouselBankHistoryCard/CarouselBankHistoryCard.fixture';
 import { CARD, CARD_MINI, CARD_NEW } from '../CarouselCard/CarouselCard.fixture';
 import { CATALOG_CARD, CATALOG_CARD_NEW } from '../CarouselCatalogCard/CarouselCatalogCard.fixture';
-import { CAROUSEL_EVENT_CARD } from '../CarouselEventCard/CarouselEventCard.fixture';
 import { INVESTMENT_CARD_WITH_SINGLE_COLUMN } from '../CarouselInvestmentCard/CarouselInvestmentCard.fixture';
 import {
   PRODUCT_CARD,
@@ -228,23 +227,6 @@ export default {
       />
     </div>
   ),
-
-  events: (
-    <div className="container grid grid-cols-12">
-      <Carousel
-        className="col-span-12"
-        visibleItemCount={0}
-        block={{
-          type: 'Carousel',
-          blocks: new Array(6).fill({
-            type: 'CarouselEventCard',
-            content: CAROUSEL_EVENT_CARD,
-          }),
-        }}
-        options={options}
-      />
-    </div>
-  ),
   'bank-history': (
     <div className="container grid grid-cols-12">
       <Carousel

package/src/components/Carousel/Carousel.tsx

@@ -90,7 +90,6 @@ Carousel.childrenTypes = [
   'CarouselTariffsCard',
   'CarouselRichTextCard',
   'CarouselInvestmentCard',
-  'CarouselEventCard',
   'ProductBlock',
 ];
 

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.example.json

@@ -8,7 +8,7 @@
   "title": "Заголовок",
   "description": "Описание",
   "additionalDescription": "Описание 1-2",
-  "columnsMode": "1",
+  "columnsMode": 1,
   "cardsList": [
     {
       "parameter": "Параметр",

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -68,7 +68,11 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
 const renderCardList = (cardsList: CardsListItem[]) =>
   cardsList.map((item, i) => (
     <li key={String(i)}>
-      {item?.parameter ? <Text size="text-h6">{item.parameter}</Text> : null}
+      {item?.parameter ? (
+        <div className="inline pr-xs">
+          <Text size="text-h6">{item.parameter}</Text>
+        </div>
+      ) : null}
       {item?.parameterDescription ? (
         <Text size="text-m" font="font-light" color="text-secondary-text">
           {item.parameterDescription}

package/src/components/CarouselProductCard/CarouselProductCard.example.json

@@ -15,8 +15,6 @@
       { "text": "Элемент списка 1", "title": "Элемент заголовка 1" },
       { "text": "Элемент списка 2", "title": "Элемент заголовка 2" },
       { "text": "Элемент списка 3", "title": "Элемент заголовка 3" }
-    ],
-    "align": "text-center",
-    "isFullWidth": true
+    ]
   }
 }

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

@@ -0,0 +1,92 @@
+import '../../setup-fixture';
+
+import type { Picture } from '../../model/Picture';
+import { CarouselProductCard } from './CarouselProductCard';
+import type { CarouselProductCardContent } from './CarouselProductCardContent';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
+
+const isDotted = false;
+
+const image: Picture = {
+  src: 'money-1.png',
+  format: 'webp',
+  size: {
+    width: 140,
+    height: 140,
+  },
+  title: 'money',
+};
+
+const buttonPrimary: ButtonContent = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'secondary',
+};
+
+const buttonPrimaryIcon: ButtonContent = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'secondary',
+  icon: { icon: 'BankIcon' },
+};
+
+const defaultItems = [
+  { text: 'Качественные фермерские продукты напрямую от производителей' },
+  { text: 'Самая большая база сельских туров по России' },
+  { text: 'Площадки для создания комфортной жизни за городом' },
+];
+
+export const PRODUCT_CARD: CarouselProductCardContent = {
+  title: 'Более 5000 товаров',
+  description: 'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+  icon: image,
+  button: buttonPrimary,
+  isDotted,
+  items: defaultItems,
+  isImageFullWidth: true,
+  additionalDescription: 'Дополнительное описание',
+};
+
+export const PRODUCT_CARD_SMALL: CarouselProductCardContent = {
+  title: 'Более 5000 товаров Более 5000 товаров Более 5000 товаров',
+  icon: image,
+  button: buttonPrimary,
+  isDotted,
+  isButtonFullWidth: true,
+};
+export const PRODUCT_CARD_EVENT: CarouselProductCardContent = {
+  title: 'Более 5000 товаров',
+  icon: image,
+  isDotted,
+  additionalDescription: 'Дополнительное описание',
+  isTopPosition: true,
+  isImageFullWidth: true,
+};
+
+const CAROUSEL_PRODUCT_CARD = <CarouselProductCard className="col-span-12" {...PRODUCT_CARD} />;
+const CAROUSEL_PRODUCT_CARD_SECONDARY = (
+  <CarouselProductCard
+    className="col-span-12"
+    {...PRODUCT_CARD}
+    version="secondary"
+    isDotted={true}
+    button={buttonPrimaryIcon}
+    isButtonFullWidth={true}
+  />
+);
+const CAROUSEL_PRODUCT_CARD_SMALL = (
+  <CarouselProductCard className="col-span-12" {...PRODUCT_CARD_SMALL} />
+);
+
+const CAROUSEL_PRODUCT_CARD_EVENT = (
+  <CarouselProductCard className="col-span-12" {...PRODUCT_CARD_EVENT} />
+);
+
+export default {
+  default: <div className="container grid grid-cols-12">{CAROUSEL_PRODUCT_CARD}</div>,
+  secondary: <div className="container grid grid-cols-12">{CAROUSEL_PRODUCT_CARD_SECONDARY}</div>,
+  small: <div className="container grid grid-cols-12">{CAROUSEL_PRODUCT_CARD_SMALL}</div>,
+  event: <div className="container grid grid-cols-12">{CAROUSEL_PRODUCT_CARD_EVENT}</div>,
+};