@redneckz/wildless-cms-uni-blocks 0.12.4 → 0.12.6

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

@@ -11,7 +11,11 @@ export const PhoneInput = JSX<InputProps>(({ children, onChange, ...inputProps }
   );
 
   return (
-    <Input onChange={handleChange} onFocus={handleChange} {...inputProps}>
+    <Input
+      onChange={handleChange}
+      onFocus={(event) => handleChange((event?.target?.value as string) || '')}
+      {...inputProps}
+    >
       {children}
     </Input>
   );

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

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { FontWeight, TextAlign, TextColor, TextSize, TitleSize } from './TextProps';
+import { style } from '../../utils/style';
 
 interface TextProps {
   size?: TextSize | TitleSize;
@@ -8,6 +9,6 @@ interface TextProps {
   font?: FontWeight;
 }
 
-export const Text = JSX<TextProps>(({ children, ...style }) => (
-  <span className={['font-sans', ...Object.values(style)].join(' ')}>{children}</span>
+export const Text = JSX<TextProps>(({ children, ...styleProps }) => (
+  <span className={style('font-sans', Object.values(styleProps))}>{children}</span>
 ));

package/mobile/src/ui-kit/Text/TextProps.ts

@@ -29,8 +29,6 @@ export type TitleSize =
   | 'text-h2'
   | 'text-h1'
   | 'text-h0'
-  | 'text-m-title'
-  | 'text-m-title-xs'
   | 'title-extra'
   | 'title-huge';
 

package/package.json

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

package/src/common.css

@@ -27,6 +27,7 @@ html {
   --color-gradient-from: 141, 189, 76;
   --color-gradient-to: 69, 172, 69;
 }
+
 /* Business clients | Light-Green */
 [data-theme='bc'] {
   --color-primary-main: var(--color-green-light);
@@ -37,6 +38,7 @@ html {
   --color-gradient-from: 141, 189, 76; /* TODO: change color to theme bc */
   --color-gradient-to: 69, 172, 69; /* TODO: change color to theme bc */
 }
+
 /* Ecosystem own | Yellow */
 [data-theme='eo'] {
   --color-primary-main: var(--color-yellow);
@@ -255,6 +257,7 @@ html {
     table-layout: fixed;
     text-align: left;
   }
+
   .striped.md-container table thead,
   .horizontal-separator.md-container table thead {
     color: rgb(var(--color-secondary-text));

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

@@ -0,0 +1,43 @@
+import '../../setup-fixture';
+import { BenefitsBlock } from './BenefitsBlock';
+import type { Picture } from '../../model/Picture';
+
+const image: Picture = {
+  src: 'money-1.png',
+  format: 'webp',
+  alt: 'Потребительский кредит наличными',
+  size: {
+    width: 70,
+    height: 70,
+  },
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <BenefitsBlock
+        className="col-span-12"
+        title="Оформите выгодный кредит для бизнеса"
+        benefitList={[
+          {
+            label: 'Гибкий подход к обеспечению',
+            icon: image,
+          },
+          {
+            label: 'Учет индивидуальных особенностей и потребностей бизнеса',
+            icon: image,
+          },
+          {
+            label: 'Льготная ставка до 5% годовых',
+            icon: image,
+          },
+          {
+            label: 'Возможность беззалогового кредитования',
+            icon: image,
+          },
+        ]}
+        version="primary"
+      />
+    </div>
+  ),
+};

package/src/components/BenefitsBlock/BenefitsBlock.fixture.tsx

@@ -1,5 +1,4 @@
 import '../../setup-fixture';
-
 import type { Picture } from '../../model/Picture';
 import { BenefitsBlock } from './BenefitsBlock';
 

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -1,9 +1,3 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { Img } from '../../ui-kit/Img/Img';
-import { style } from '../../utils/style';
 import type {
   BenefitBlockItemProps,
   BenefitsBlockContent,
@@ -11,47 +5,56 @@ import type {
   ListBenefitDef,
   TextBenefitDef,
 } from './BenefitsBlockContent';
+import { benefitImageStyles } from './benefitImageStyles';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import type { UniBlockProps } from '../../model/JSXBlock';
 
 interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
 export const BenefitsBlock = JSX<BenefitsBlockProps>(
   ({ className = '', title, benefitList, ...rest }) => (
-    <BlockWrapper
-      className={style('flex flex-col items-center', className)}
-      defaultPadding="p-default"
-      {...rest}
-    >
-      {title ? (
-        <Heading headingType="h3" as="h2" className="max-w-[47rem] text-center" title={title} />
-      ) : null}
+    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
+      {title ? <Heading headingType="h3" as="h2" className="text-center" title={title} /> : null}
       {benefitList?.length ? (
-        <div className="flex flex-wrap w-full justify-center gap-x-20 mt-8">
-          {benefitList.map(renderStep)}
+        <div
+          className="sm:flex sm:flex-wrap w-full sm:justify-center sm:gap-x-m gap-y-lg sm:gap-y-0 mt-8"
+          role="list"
+        >
+          {benefitList.map(renderBenefit)}
         </div>
       ) : null}
     </BlockWrapper>
   ),
 );
 
-const renderStep = (benefit: BenefitBlockItemProps, i: number) => {
-  const description = benefit.description;
-
-  return (
-    <div key={String(i)} className="flex items-center basis-1/2 max-w-[500px] mb-14">
-      {benefit?.icon?.icon ? (
-        <Img
-          className="w-12 h-12 min-w-12 p-3 rounded-icon bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black"
-          image={benefit.icon}
-        />
-      ) : null}
-      {benefit?.icon?.src ? <Img image={benefit.icon} /> : null}
-      <div className="ml-5 h-full">
-        {benefit?.label ? <Heading headingType="h6">{benefit.label}</Heading> : null}
-        {renderDescription(description)}
+const renderBenefit = (benefit: BenefitBlockItemProps, i: number) => (
+  <div
+    key={String(i)}
+    className="flex items-center sm:basis-1/2 sm:max-w-[400px] mb-14"
+    role="listitem"
+  >
+    {benefit?.icon?.icon ? (
+      <Img
+        className={style(
+          'p-3 mr-5 shrink-0 bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black',
+          benefitImageStyles,
+        )}
+        image={benefit.icon}
+      />
+    ) : null}
+    {benefit?.icon?.src ? <Img className="mr-5 shrink-0" image={benefit.icon} /> : null}
+    {benefit?.label ? (
+      <div className="sm:h-full">
+        <Heading headingType="h6">{benefit.label}</Heading>
+        {renderDescription(benefit.description)}
       </div>
-    </div>
-  );
-};
+    ) : null}
+  </div>
+);
 
 const renderDescription = (description: DescriptionDef | undefined) => {
   const benefitType = description?.benefitType || null;

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

@@ -0,0 +1 @@
+export const benefitImageStyles = 'w-56 h-56 min-w-56';

package/src/components/BenefitsBlock/benefitImageStyles.tsx

@@ -0,0 +1 @@
+export const benefitImageStyles = 'w-12 h-12 min-w-12 rounded-full';

package/src/components/Blocks.mobile.ts

@@ -1,4 +1,5 @@
 import type { BlocksRegistry } from '../model/BlocksRegistry';
+import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 import { ButtonsBlock } from './ButtonsBlock/ButtonsBlock';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
@@ -19,12 +20,15 @@ import { ProductGallery } from './ProductGallery/ProductGallery';
 import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
 import { StepsBlock } from './StepsBlock/StepsBlock';
+import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
+import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 
 export const Blocks: BlocksRegistry = {
   ButtonsBlock,
+  BonusBenefitsBlock,
   CardTransfer,
   Carousel,
   CarouselTariffsCard,
@@ -39,6 +43,7 @@ export const Blocks: BlocksRegistry = {
   Placeholder,
   ProductBlock,
   StepsBlock,
+  Tabs,
   TariffsTable,
   TextBlock,
   RichTextBlock,
@@ -47,4 +52,5 @@ export const Blocks: BlocksRegistry = {
   CarouselRecommendationCard,
   CarouselProgramsCard,
   ProductGallery,
+  BenefitsBlock,
 };

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

@@ -0,0 +1,67 @@
+import '../../setup-fixture';
+
+import { BonusBenefitsBlock } from './BonusBenefitsBlock';
+import { BonusBenefit } from './BonusBenefitsBlockContent';
+
+const bonusBenefits: BonusBenefit[] = [
+  {
+    title: 'Оформи «Молодёжную карту»',
+    icon: { icon: 'WateringCanIcon', iconVersion: 'normal' },
+  },
+  {
+    title:
+      'Попроси в бухгалтерии ВУЗа/работодателя специальное заявление для перечисления стипендии/заработной платы на банковскую карту',
+    icon: { icon: 'AirPlaneIcon', iconVersion: 'normal' },
+  },
+  {
+    title:
+      'Заполни заявление и укажи реквизиты «Молодёжной карты». Узнать реквизиты ты можешь после получения карты в офисе, мобильном приложении (нажми на карту → действия → информация → реквизиты карты) или на сайте Банка в личном кабинете',
+    icon: { icon: 'CarIcon', iconVersion: 'normal' },
+  },
+  {
+    title: 'Отнеси заявление в бухгалтерию',
+    icon: { icon: 'CinemaIcon', iconVersion: 'normal' },
+  },
+];
+
+const bonusBenefitsWithDescription: BonusBenefit[] = [
+  {
+    description: 'Достойное вознаграждение',
+    icon: { icon: 'WateringCanIcon', iconVersion: 'normal' },
+  },
+  {
+    description: 'Социальный пакет',
+    icon: { icon: 'AirPlaneIcon', iconVersion: 'normal' },
+  },
+  {
+    description: 'Профессиональное обучение',
+    icon: { icon: 'CarIcon', iconVersion: 'normal' },
+  },
+  {
+    description: 'Карьерный рост и развитие',
+    icon: { icon: 'CinemaIcon', iconVersion: 'normal' },
+  },
+];
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <BonusBenefitsBlock
+        className="col-span-12"
+        title="Преимущества кредита"
+        subtitle="Удобный каталог с большим ассортиментом товаров и сервисов"
+        bonusBenefits={bonusBenefits}
+      />
+    </div>
+  ),
+  'with description': (
+    <div className="container grid grid-cols-12">
+      <BonusBenefitsBlock
+        className="col-span-12"
+        title="Преимущества кредита"
+        subtitle="Удобный каталог с большим ассортиментом товаров и сервисов"
+        bonusBenefits={bonusBenefitsWithDescription}
+      />
+    </div>
+  ),
+};

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -1,15 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { AlignText } from '../../model/AlignText';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Img } from '../../ui-kit/Img/Img';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
-import type {
-  BonusBenefit,
-  BonusBenefitsBlockContent,
-  ColumnsCount,
-} from './BonusBenefitsBlockContent';
+import type { BonusBenefitsBlockContent } from './BonusBenefitsBlockContent';
+import { renderBonusBenefits } from './renderBonusBenefits';
 
 export interface BenefitsBlockProps extends BonusBenefitsBlockContent, UniBlockProps {}
 
@@ -23,48 +18,17 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
     title,
     ...rest
   }) => (
-    <BlockWrapper
-      className={style('flex flex-col text-center', className)}
-      defaultPadding="p-default"
-      {...rest}
-    >
-      <Headline className="!p-0 mb-8" title={title} description={subtitle} headlineVersion="M" />
-      {bonusBenefits?.length ? (
-        <div
-          className={`grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`}
-        >
-          {bonusBenefits.map(renderBonusBenefit)}
-        </div>
-      ) : null}
+    <BlockWrapper className={style('p-default', className)} defaultPadding="p-default" {...rest}>
+      <Headline
+        className="mb-4 sm:mb-8"
+        isPadding={false}
+        title={title}
+        description={subtitle}
+        headlineVersion="M"
+      />
+      {bonusBenefits?.length
+        ? renderBonusBenefits(bonusBenefits, columnsCount, cardTextAlign)
+        : null}
     </BlockWrapper>
   ),
 );
-
-const renderBonusBenefit = ({ icon, title, description }: BonusBenefit, i: number) => {
-  return (
-    <div
-      key={String(i)}
-      className={style(
-        'flex flex-col items-center text-h6',
-        !description && !title ? 'justify-center' : '',
-      )}
-    >
-      {title ? <span>{title}</span> : null}
-      {icon ? <Img image={icon} height="180" className="w-auto" /> : null}
-      {description ? <span>{description}</span> : null}
-    </div>
-  );
-};
-
-const getElementsColsValue = (colValue: ColumnsCount) => {
-  switch (colValue) {
-    case '3':
-      return 'grid-cols-3';
-    case '4':
-      return 'grid-cols-4';
-    case '5':
-      return 'grid-cols-5';
-    default:
-      return 'grid-cols-5';
-  }
-};

package/src/components/BonusBenefitsBlock/bonusBenefitAlign.mobile.ts

@@ -0,0 +1 @@
+export const bonusBenefitAlign = 'text-left';

package/src/components/BonusBenefitsBlock/bonusBenefitAlign.ts

@@ -0,0 +1 @@
+export const bonusBenefitAlign = 'text-center';

package/src/components/BonusBenefitsBlock/bonusBenefitStyles.mobile.ts

@@ -0,0 +1 @@
+export const bonusBenefitStyles = 'justify-between p-4 h-full border border-gray';

package/src/components/BonusBenefitsBlock/bonusBenefitStyles.ts

@@ -0,0 +1 @@
+export const bonusBenefitStyles = 'items-center';

package/src/components/BonusBenefitsBlock/renderBonusBenefit.tsx

@@ -0,0 +1,29 @@
+import { Img } from '../../ui-kit/Img/Img';
+import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
+import { bonusBenefitAlign } from './bonusBenefitAlign';
+import { BonusBenefit } from './BonusBenefitsBlockContent';
+import { bonusBenefitStyles } from './bonusBenefitStyles';
+
+export const renderBonusBenefit = ({ icon, title, description }: BonusBenefit, i: number) => (
+  <div
+    key={String(i)}
+    className={style(
+      'flex flex-col',
+      bonusBenefitStyles,
+      !description && !title ? 'justify-center' : '',
+    )}
+  >
+    {title ? (
+      <Text size="text-h6" font="font-normal" align={bonusBenefitAlign}>
+        {title}
+      </Text>
+    ) : null}
+    {icon ? <Img image={icon} height="180" className="w-auto" /> : null}
+    {description ? (
+      <Text size="text-h6" font="font-normal" align={bonusBenefitAlign}>
+        {description}
+      </Text>
+    ) : null}
+  </div>
+);

package/src/components/BonusBenefitsBlock/renderBonusBenefits.mobile.tsx

@@ -0,0 +1,14 @@
+import { AlignType } from '../../model/AlignType';
+import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
+import { BonusBenefit, ColumnsCount } from './BonusBenefitsBlockContent';
+import { renderBonusBenefit } from './renderBonusBenefit';
+
+export const renderBonusBenefits = (
+  bonusBenefits: BonusBenefit[],
+  columnsCount: ColumnsCount,
+  cardTextAlign: AlignType,
+) => (
+  <SwipeListControl>
+    {bonusBenefits.map((_, i) => renderBonusBenefit({ ..._ }, i))}
+  </SwipeListControl>
+);

package/src/components/BonusBenefitsBlock/renderBonusBenefits.tsx

@@ -0,0 +1,27 @@
+import { AlignText } from '../../model/AlignText';
+import type { AlignType } from '../../model/AlignType';
+import { BonusBenefit, ColumnsCount } from './BonusBenefitsBlockContent';
+import { renderBonusBenefit } from './renderBonusBenefit';
+
+export const renderBonusBenefits = (
+  bonusBenefits: BonusBenefit[],
+  columnsCount: ColumnsCount,
+  cardTextAlign: AlignType,
+) => (
+  <div className={`grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`}>
+    {bonusBenefits.map(renderBonusBenefit)}
+  </div>
+);
+
+const getElementsColsValue = (colValue: ColumnsCount) => {
+  switch (colValue) {
+    case '3':
+      return 'grid-cols-3';
+    case '4':
+      return 'grid-cols-4';
+    case '5':
+      return 'grid-cols-5';
+    default:
+      return 'grid-cols-5';
+  }
+};

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

@@ -4,7 +4,7 @@ import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOpti
 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 } from '../CarouselCatalogCard/CarouselCatalogCard.fixture';
+import { CATALOG_CARD } from '../CarouselCatalogCard/CatalogCard';
 import { CAROUSEL_EVENT_CARD } from '../CarouselEventCard/CarouselEventCard.fixture';
 import { INVESTMENT_CARD_WITH_SINGLE_COLUMN } from '../CarouselInvestmentCard/CarouselInvestmentCard.fixture';
 import {
@@ -19,6 +19,17 @@ import {
 import { RICH_CARD } from '../CarouselRichTextCard/CarouselRichTextCard.fixture';
 import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
 import { Carousel } from './Carousel';
+import { Picture } from '../../model/Picture';
+
+const catalogImage: Picture = {
+  src: 'pay-ring.png',
+  format: 'webp',
+  size: {
+    width: 230,
+    height: 230,
+  },
+  title: 'pay-ring',
+};
 
 const options = {
   blocksRegistry: Blocks,
@@ -71,7 +82,7 @@ export default {
           type: 'Carousel',
           blocks: new Array(6).fill({
             type: 'CarouselCatalogCard',
-            content: CATALOG_CARD,
+            content: { ...CATALOG_CARD, image: catalogImage },
           }),
         }}
         options={options}

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

@@ -0,0 +1,23 @@
+import '../../setup-fixture';
+
+import type { Picture } from '../../model/Picture';
+import { CarouselCatalogCard } from './CarouselCatalogCard';
+import { CATALOG_CARD } from './CatalogCard';
+
+const image: Picture = {
+  src: 'pay-ring.png',
+  format: 'webp',
+  size: {
+    width: 117,
+    height: 117,
+  },
+  title: 'pay-ring',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <CarouselCatalogCard className={'col-span-12'} {...CATALOG_CARD} image={image} />
+    </div>
+  ),
+};

package/src/components/CarouselCatalogCard/CarouselCatalogCard.fixture.tsx

@@ -1,11 +1,10 @@
 import '../../setup-fixture';
 
 import type { Picture } from '../../model/Picture';
-import type { ProductColorVersion } from '../../model/ProductColorVersion';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { CarouselCatalogCard } from './CarouselCatalogCard';
+import { CATALOG_CARD } from './CatalogCard';
 
-const payRing: Picture = {
+const image: Picture = {
   src: 'pay-ring.png',
   format: 'webp',
   size: {
@@ -15,31 +14,10 @@ const payRing: Picture = {
   title: 'pay-ring',
 };
 
-const colors: ProductColorVersion[] = ['black', 'white'];
-
-const buttonPrimary: ButtonWithIconProps = {
-  href: '/credit-cards',
-  text: 'Подробнее',
-  target: '_blank',
-  version: 'primary',
-  icon: {
-    icon: 'AppleIcon',
-  },
-};
-
-export const CATALOG_CARD = {
-  title: 'SATURN S-VI',
-  description: 'Керамическое кольцо с глянцевой поверхностью и огранкой по внешним контурам',
-  image: payRing,
-  price: 5600,
-  colors: colors,
-  button: buttonPrimary,
-};
-
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <CarouselCatalogCard {...CATALOG_CARD} />
+      <CarouselCatalogCard className={'col-span-4'} {...CATALOG_CARD} image={image} />
     </div>
   ),
 };

package/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -21,7 +21,7 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
   ({ className = '', title, description, image, price, button, colors, ...rest }) => (
     <BlockWrapper
       className={style(
-        'border box-border border-gray min-w-[392px] h-full flex flex-col justify-left',
+        'border box-border border-gray p-default sm:p-7 h-full flex flex-col justify-left',
         className,
       )}
       {...rest}
@@ -41,7 +41,7 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
         <div className="flex mb-4 text-secondary-text">
           <div className="mr-1.5">
             <Text size="text-s" align="text-left" font="font-light">
-              Доступные цвета:
+              Цвета:
             </Text>
           </div>
           {colors.map(renderColorOption)}
@@ -61,6 +61,6 @@ const renderColorOption = (color: ProductColorVersion, i: number) => (
   <div
     role="figure"
     key={String(i)}
-    className={`w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}`}
+    className={`w-6 h-6 ml-1 sm:ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}`}
   />
 );

package/src/components/CarouselCatalogCard/CatalogCard.ts

@@ -0,0 +1,22 @@
+import type { ProductColorVersion } from '../../model/ProductColorVersion';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+
+const colors: ProductColorVersion[] = ['black', 'white'];
+
+const buttonPrimary: ButtonWithIconProps = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'primary',
+  icon: {
+    icon: 'AppleIcon',
+  },
+};
+
+export const CATALOG_CARD = {
+  title: 'SATURN S-VI',
+  description: 'Керамическое кольцо с глянцевой поверхностью и огранкой по внешним контурам',
+  price: 5600,
+  colors: colors,
+  button: buttonPrimary,
+};