@redneckz/wildless-cms-uni-blocks 0.2.73 → 0.2.76

package/src/components/Header/Header.tsx

@@ -0,0 +1,59 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { mergeTopItems } from '../../mergeTopItems';
+import type { UniBlockProps } from '../../types';
+import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
+import { Logo } from '../../ui-kit/Logo/Logo';
+import { TopItem } from '../../ui-kit/TopItem/TopItem';
+import { useLink } from '../../hooks/useLink';
+import { useSitemap } from '../../hooks/useSitemap';
+import type { HeaderContent } from './HeaderContent';
+import { HeaderSecondaryMenu } from './HeaderSecondaryMenu';
+import { isSubItemActive } from './isSubItemActive';
+import { isTopItemActive } from './isTopItemActive';
+
+export interface HeaderProps extends HeaderContent, UniBlockProps {}
+
+export const Header = JSX<HeaderProps>(({ className, defaultLocation, context, topItems }) => {
+  const router = context.useRouter();
+  const sitemap = useSitemap(context.useAsyncData);
+  const { handlerDecorator } = context;
+
+  const mergedItems = mergeTopItems(sitemap.topItems, topItems);
+  const activeTopItem = mergedItems.find(isTopItemActive(router));
+  const subItems = activeTopItem?.items;
+  const activeSubItem = subItems?.find(isSubItemActive(router));
+
+  const topMenu = mergedItems.map((_, i) => (
+    <TopItem
+      key={String(i)}
+      active={_ === activeTopItem}
+      {...useLink({ router, handlerDecorator }, _)}
+      ariaLabel={_.text}
+    />
+  ));
+
+  const subMenu = subItems?.map((_) => (
+    <HeaderItem
+      key={_.href}
+      className="mr-8"
+      active={_ === activeSubItem}
+      {...useLink({ router, handlerDecorator }, _)}
+    />
+  ));
+
+  return (
+    <header className={`pt-5 pb-8 px-20 bg-white ${className || ''}`}>
+      <div className="flex items-center">
+        <Logo className="mr-8" />
+        {topMenu}
+        <HeaderSecondaryMenu
+          context={context}
+          className="ml-auto"
+          defaultLocation={defaultLocation}
+        />
+      </div>
+      <div className="mt-5 h-[1px] bg-main-divider" />
+      <nav className="mt-5">{subMenu}</nav>
+    </header>
+  );
+});

package/src/components/Header/HeaderContent.ts

@@ -0,0 +1,5 @@
+import { SitemapContent } from '../../model/SitemapContent';
+
+export interface HeaderContent extends SitemapContent {
+  defaultLocation?: string;
+}

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -0,0 +1,56 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { TopItem } from '../../ui-kit/TopItem/TopItem';
+import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
+
+interface HeaderSecondaryMenuContent {
+  defaultLocation?: string;
+  className?: string;
+}
+
+export interface HeaderSecondaryMenuProps extends HeaderSecondaryMenuContent, UniBlockProps {}
+
+export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
+  ({ context, className, defaultLocation = '' }) => {
+    const [city, getCity] = context.useGeolocation(defaultLocation);
+
+    return (
+      <div className={`flex items-center ${className || ''}`}>
+        <TopItem
+          className="mr-5"
+          flat={true}
+          href="#"
+          text={city}
+          ariaLabel="Местоположение"
+          onClick={getCity}
+        />
+        <TopItem
+          className="mr-7"
+          flat={true}
+          href="#"
+          text="Офисы и банкоматы"
+          ariaLabel="Список всех доступных офисов и банкоматов"
+        />
+        <HeaderSecondaryMenuButton
+          className="mr-5 text-primary-text hover:text-primary-main"
+          ariaLabel="Поиск по сайту"
+        >
+          <Icon name="LoupeIcon" aria-hidden="true" />
+        </HeaderSecondaryMenuButton>
+        <HeaderSecondaryMenuButton
+          className="mr-5 text-primary-text hover:text-primary-main"
+          ariaLabel="Профиль"
+        >
+          <Icon name="ProfileIcon" aria-hidden="true" />
+        </HeaderSecondaryMenuButton>
+        <HeaderSecondaryMenuButton
+          className="mr-5 text-secondary-light hover:text-secondary-active min-w-[32px] min-h-[32px]"
+          ariaLabel="Дополнительные ссылки"
+        >
+          <Icon name="GridIcon" aria-hidden="true" />
+        </HeaderSecondaryMenuButton>
+      </div>
+    );
+  },
+);

package/src/components/Header/isSubItemActive.ts

@@ -0,0 +1,7 @@
+import type { Router } from '../ContentPage/ContentPageContext';
+import type { LinkContent } from '../../model/LinkContent';
+import { isHrefActive } from '../../utils/url';
+
+export function isSubItemActive(router: Router) {
+  return (subItem: LinkContent): boolean => isHrefActive(subItem.href, router);
+}

package/src/components/Header/isTopItemActive.ts

@@ -0,0 +1,8 @@
+import type { Router } from '../ContentPage/ContentPageContext';
+import type { LinkContent } from '../../model/LinkContent';
+import { isHrefActive } from '../../utils/url';
+
+export function isTopItemActive(router: Router) {
+  return (topItem: LinkContent): boolean =>
+    isHrefActive(topItem.href, router, (topItemHref, baseHref) => baseHref.startsWith(topItemHref));
+}

package/src/components/LikeControl/LikeControl.fixture.tsx

@@ -0,0 +1,5 @@
+import { context } from '../../setup-fixture';
+
+import { LikeControl } from './LikeControl';
+
+export default <LikeControl context={context} />;

package/src/components/LikeControl/LikeControl.tsx

@@ -0,0 +1,23 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { LikeButton } from '../../ui-kit/Button/LikeButton';
+import type { UniBlockProps } from '../../types';
+
+export const LikeControl = JSX<UniBlockProps>(({ className, context }) => {
+  const likeService = context.useLikeService();
+
+  return (
+    <div
+      className={`border-main border-2 border-solid bg-white flex w-[125px] items-center justify-center gap-3 p-2 font-sans ${
+        className || ''
+      }`}
+    >
+      <LikeButton onClick={likeService.like} ariaLabel="Поставить отметку «лайк»" />
+      <LikeButton
+        onClick={likeService.dislike}
+        className="rotate-180"
+        ariaLabel="Поставить отметку «дизлайк»"
+      />
+      <span className="select-none">{likeService.likeCount}</span>
+    </div>
+  );
+});

package/src/components/MiniGallery/MiniGallery.fixture.tsx

@@ -0,0 +1,90 @@
+import { context } from '../../setup-fixture';
+
+import { MiniGallery, MiniGalleryProps } from './MiniGallery';
+import { Picture } from '../../model/Picture';
+
+const image: Picture = {
+  src: 'domovoj-kupon.png',
+  format: 'webp',
+  size: {
+    width: 120,
+    height: 70,
+  },
+};
+
+const defaultProps: MiniGalleryProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  context,
+  cards: [
+    {
+      title: 'Более 5000 товаров',
+      description:
+        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+      image,
+    },
+    {
+      title: 'Более 1000 развлечений',
+      description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+    },
+    {
+      title: '«Моя выгода»',
+      description:
+        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+    },
+  ],
+};
+
+const onlyTitleProps: MiniGalleryProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  context,
+  cards: [
+    {
+      title: 'Более 5000 товаров',
+      image,
+    },
+    {
+      title: 'Более 1000 развлечений',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      image,
+    },
+    {
+      title: '«Моя выгода»',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      image,
+    },
+  ],
+};
+
+export default {
+  default: <MiniGallery {...defaultProps} />,
+  'only title': <MiniGallery {...onlyTitleProps} />,
+};

package/src/components/MiniGallery/MiniGallery.tsx

@@ -0,0 +1,10 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { GalleryContent } from '../Gallery/GalleryContent';
+import { GalleryInner } from '../Gallery/GalleryInner';
+import { UniBlockProps } from '../../types';
+
+export interface MiniGalleryProps extends GalleryContent, UniBlockProps {}
+
+export const MiniGallery = JSX<MiniGalleryProps>((props) => (
+  <GalleryInner {...props} version="mini" />
+));

package/src/components/MobileAppTile/MobileAppTile.fixture.tsx

@@ -0,0 +1,34 @@
+import { context } from '../../setup-fixture';
+
+import { MobileAppTile } from './MobileAppTile';
+
+export default {
+  default: (
+    <div className="grid grid-cols-12">
+      <MobileAppTile
+        context={context}
+        className="col-span-4"
+        qr={{
+          href: 'https://rshbnaturaldbo.onelink.me/qhkF/f182074f?af_qr=true',
+          src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKQAAACkCAYAAAAZtYVBAAAAAXNSR0IArs4c6QAACp1JREFUeF7tndtuKzkMBJ3//+gssG8aA1MoNDXWcTqvlCiqWSI1vuXn9/f399W/KnCIAj8F8pBMNIz/FSiQBeEoBQrkUeloMAWyDBylQIE8Kh0NpkCWgaMUKJBHpaPBFMgycJQCBfKodDSYAlkGjlKgQB6VjgZTIMvAUQoUyKPS0WAKZBk4SoECeVQ6GkwM5M/Pz6Mq2o9vUnxXf9fxtB75T8U5Pb7r/kgv0qNAXj6fXCAJmXt7gQT9qIKdXoFOj68VUn7jokCefaW6Aj3estOS/Rbg5Y5q/adAUgOjeNIrQOrfrk/7nc5PgbwoQC2REpQCkyaYgCM77Y/s0/5bIeGhhhJSINcrAelBehbIAkmM3Nr/uQpJdzh6SqMNk386sbvnU7bpymDt9gpA+0/zQ/t//A65e8Pkv0Det1TSr0DKF6pJ0AJZIJdDRcCkJ5D8F8gC+VEgCcD0jkV3Ojpg9k5l47Xj6UDTfuiOb/e7/Sl794ZTQWi+tVMCbYIsYHb87vzY/RZIeCeoQK5IUYewHerrn7KtIBY4SkgrZPbrjl9XIalFpEClAFNLTeOn/ZF9en3y9/UVkgSwCaHx1l4g7zPUCgmfeLfAUQUtkAVyUYAAozsgAUf2AvlhIKmFkp0STPbdAFD89gDYA2HH24c+2p/VH/2lvzE+HRABRAkmwadfdyOBKd7p+bQe6UPx2PxofwXyXjJKMAn+9Hxar0BSxsBOFZjsdKIpPErwafMp3j8HJCUotVvBCdi/Zk/1p/kp8OMv+1DAqb1Aru+E2AOV6k/zC+Twe9HfDjwBldoLZIFcGKIDlQJH8z8OJAW4225fxqF4bELjBAz/NlIaD+mz2x7fIXcHSP4L5KpQgSRiNtsLZIHcjJhzXyAL5KLA0y872JZEwNKdMbVfj1ca/3Q87vi/XjZ+6z++QxbI+9cFC6RDskCG3wOnilUgC+TtlYIAsRW/QDrgaPR4haQFUyCu8y1AFJ+9I02vT/GRfqQPzZ++c9v9FMiLYgXy/hd3qSNY/d4O0PTnIe2JSDc4XaGsoNPrp/q1QoZvfRVIi6B73TFtwbbF2wM9XiGtnFRR6ISnG0792wQ/rQ+tZwuAzRetT/b4DkkLTANQIFdF6YCkFa5AXhTcLYj1TwCkB2Y6ngIJJTMVPE34dMWmhD/dQWi9tmxZ8aaBpYpGQNF8m2B7IGh9AjDdH/kfLxDpyz4UcJoA2jABbBNKgNkEPx0/5cPuz/qj8WQ/7qGGAEsBJ0Fswmh8gSTFLw9prZCrIARYK+S9Xg6/99HbKyRVvNROFdMKRBXN+rPjSQ/yR/OnrzDTehXIS4anBSaA6EDZeAokKG4FopZJCbIVgFqwBSodT3qRf5pv9UnzQfG+Hcjdd0grUCqAFbxA3iOT5uM4IKklWSAIOKqgNh4r6PR+yJ898E/7s/ptv0NaAAioAjn72z62Ak7r/3jLLpD3/yaDEvx0RZuuuK2Qly9tkSAWCPJHANkDSv6mAZr2Z/Xa3rLtBne3EIqHgLFXCtqPTdi0P1qf1iM9yP/jLZsAmLanFaVArgoUyPB70gXS1qQ/9rLPdAWkE1sg/ziQ9qFg+s4xK//rRQfItnTyR/rRASQ7HVDaj52f5iN+qCFBn95QLAj8Ii8lkAAhO+k1DTjth+JJ9R5/qCmQ6xfrCTiyEwAFEo5AgSyQk1VyvGVTBZi2WzGowlALozsw+Se7XZ8KAulN+qX7Jf/bWzYJMG3XGx6+I6YApQkvkJcM0InfbS+Q2Y9DkX7pgSH/rZCtkIqRfw5I27JIDaqo0+uRv91PvdZ/Oj6db69clO/xCkkJpROWzrcAk0DpnYwSRuvb+XZ8gQw/DkZAF0j3o/sFskBSUVzstuLZ8QUSPr2jsvXi/5NCLZcSQvHYivz0eNof6WMBpw5Gen78DkmC0AZIAOuf/D19x00BLpAXBUhQCwwJTMCkgJN/Apr0mPZPepH+rZBEzMVuASD35G8aGFovBbhADldIShgBQgBau60YBATFn+4/jTfVx84//g6ZJiQVhICilkfzC+R9huJP+1iBKaEF8v573NN6pwfY5ovWK5CgUNoCKWH2zlggIWFU8WwL2y34bsCwAsA/mrLxEfCpnrvjGb9DFkhCcLWTXrsBoIps7WnBKZDhO0e2IlGFooRagOl4WOB2H5ACWSAXBgg4stOBogPyOJBUUT5dAaxglADaT7qenU/6k7+0opL/Ahn+99oC6X6fskDCVxSmK5htaTZB6fhWyIuCJAgBQvPpoWE3MLv9F0ipgL1jkHtKMNmppdL6dj8UDx0oOpAU7/R+d69H/uN3amwCKSCbYEooAZFWWBsvrUf6kD3dL/lPDwD5L5AXhewBK5DuvfcCOfydnhTYVsh7JLdXyDQB1IIsINRy6ApAJ5zipfm0vq3I5I/iIb3sfBpfIMN3bqYTRgAVSECaKlQrJNWE1V4gwx5TIFegQjnfflKaKjDpT4C748JfQ7b+3gpW+s83SRAbIAlILYvWI2BoP7vtaUeh/ZOd9KH47PwCCU/du4Ej/5RwAiq1W6Dsfii+xx9qMKDhT1RTyyMAqCJP2yke0i+1F8iLgm3Z7iEnBdAeWDowFujxlj0tiPWXtgyab+02fgLCrm+BSP3TfKtH3LLtgtPjU0FovrWn+9t9BbAVzu7fHohWSLgipEAUyOy97VZI+YFeArZAfhhIeghJE0R3LNuCpsdTfLblpXrRgUnttN80/rhCFsg1BdMJtwlO16f5BfKiAF2aqSK1QrovaVHBoXzYA9UKGf7fGqoYdEAo4TahVOFSO+3Xxjv+lE2CxwFufuigBKXxpxXEAmvXS/1P53+8QlpBKOG0YWunE24TRPGneth47Hqpf9Kf9GmFhDupTRAJbgGhO+70ena/1FHi/Z728TNKiBWEBCd/BADZ4wTJX9qw65E+tqPY9R+vkLs3TC1j2j4NIOlDCab5FC/Z7YGleGm97XdIKxgJ8Gk7CWoTQvqQP5pP8ZKd9KYKSv5bIeFLXTYBaUIIqAIpkbYtkdwTEJ+22/hpfIFcFfrzLXsaGDqgdr3pA2gfGtN4aX5bdvhLFtSiC+Rhn/ahE00nhuZP2yke21ILZIFcmLLAFsifW/2sPvQQhv52vzBOFSZtgeQ/Fki+l273Q+MxgfKFc7teWvEp/q+/Q1rBSTBKiD0QdryNj8ZbfWj/dj0a/3VP2VZwFKgVMmrppG8rpFSIKoSteHY8hUv+aD5daWj/5N/at1dIG9DbiQk/QEuC03o2fvtQRUCRv7Qj0Pqpf6tfgbwoZhNECaMKQ+sVSIk0CS7dvQ23/u34Vsj1ZR/Kl+045O/xO6QNiAAhQQqke2GaKjR1gDS/24GcDpAEIQBTuz0gtJ7Vh/yR3cZP8dn1yF+BlB8/swmdThj5I7uNnwCy65G/AlkgFwboCjQNNAE6/pRNC6Z2euqcttuETFcQ8kd2Gz/lx65H/sYrpF2w46vAnQJxhay8VWBSgQI5qWZ9xQoUyFjCOphUoEBOqllfsQIFMpawDiYVKJCTatZXrECBjCWsg0kFCuSkmvUVK1AgYwnrYFKBAjmpZn3FChTIWMI6mFSgQE6qWV+xAgUylrAOJhUokJNq1lesQIGMJayDSQX+AzMMbwXyi0XeAAAAAElFTkSuQmCC',
+        }}
+        buttons={[
+          {
+            aboveText: 'Загрузите в',
+            text: 'App Store',
+            icon: 'AppleIcon',
+            href: '#',
+            version: 'secondary',
+          },
+          {
+            aboveText: 'Доступно в',
+            text: 'Google Play',
+            icon: 'PlayMarketIcon',
+            href: '#',
+            version: 'secondary',
+          },
+        ]}
+      />
+    </div>
+  ),
+};

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -0,0 +1,32 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { MobileAppTileContent } from './MobileAppTileContent';
+import { Tile } from '../Tile/Tile';
+import type { UniBlockProps } from '../../types';
+
+export interface MobileAppTileProps extends MobileAppTileContent, UniBlockProps {}
+
+export const MobileAppTile = JSX<MobileAppTileProps>(
+  ({ className, context, title = 'Мобильное приложение', qr, buttons = [] }) => {
+    return (
+      <Tile className={className} context={context} title={title} buttons={buttons}>
+        <div className="flex items-center">
+          {qr?.src && qr?.href && (
+            <a href={qr.href} target="_blank">
+              <img
+                src={qr.src}
+                alt={title}
+                title={title}
+                width="164"
+                height="164"
+                className="w-[90px] h-[90px] min-w-[90px] min-h-[90px] bg-secondary-light"
+              />
+            </a>
+          )}
+          <span className="font-normal text-sm text-secondary-text ml-4">
+            Наведите камеру телефона на QR-код и скачайте приложение
+          </span>
+        </div>
+      </Tile>
+    );
+  },
+);

package/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -0,0 +1,11 @@
+import type { BaseTileContent } from '../BaseTile/BaseTileContent';
+
+export interface QRCode {
+  src?: string;
+  href?: string;
+}
+
+export interface MobileAppTileContent extends BaseTileContent {
+  title?: string;
+  qr?: QRCode;
+}

package/src/components/MobileBlocks.ts

@@ -0,0 +1,26 @@
+import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
+import { Footer } from './Footer/Footer.mobile';
+import { Gallery } from './Gallery/Gallery.mobile';
+import { Header } from './Header/Header';
+import { MobileAppTile } from './MobileAppTile/MobileAppTile';
+import { Placeholder } from './Placeholder/Placeholder';
+import { ProductBlock } from './ProductBlock/ProductBlock.mobile';
+import { ProductTile } from './ProductTile/ProductTile';
+import { TextBlock } from './TextBlock/TextBlock';
+import { Tile } from './Tile/Tile';
+
+export const MobileBlocks = {
+  Header,
+  Footer,
+  Placeholder,
+  Tile,
+  ProductTile,
+  ProductBlock,
+  TextBlock,
+  ExchangeRateTile,
+  MobileAppTile,
+  Gallery,
+  // TODO StepsBlock,
+  // TODO BenefitsBlock,
+  // TODO ProductGallery
+};

package/src/components/Placeholder/Placeholder.fixture.tsx

@@ -0,0 +1,5 @@
+import { context } from '../../setup-fixture';
+
+import { Placeholder } from './Placeholder';
+
+export default <Placeholder context={context} title="Неизвестный блок" />;

package/src/components/Placeholder/Placeholder.tsx

@@ -0,0 +1,30 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { PlaceholderContent } from '../../components/Placeholder/PlaceholderContent';
+import { Tile } from '../Tile/Tile';
+import type { UniBlockProps } from '../../types';
+
+export interface PlaceholderProps extends PlaceholderContent, UniBlockProps {
+  className?: string;
+}
+
+const GOLDEN_RATIO = 1.618;
+
+export const Placeholder = JSX<PlaceholderProps>(({ className, context, title }) => {
+  return (
+    <Tile className={className} context={context} title={title} description="Блок в разработке...">
+      <figure className="m-0 min-w-[600px]">{renderShimmer()}</figure>
+    </Tile>
+  );
+});
+
+const renderShimmer = (size: number = 3) =>
+  goldenSequence(100, size)
+    .map((_) => Math.floor(_))
+    .map(renderShimmerItem);
+
+const renderShimmerItem = (width: number = 100, index: number) => (
+  <div key={String(index)} style={{ width: `${width}%` }} className="h-4 mt-2 bg-secondary-light" />
+);
+
+const goldenSequence = (first: number, size: number): number[] =>
+  [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -0,0 +1,96 @@
+import { context } from '../../setup-fixture';
+
+import { ProductBlock } from './ProductBlock';
+import type { Picture } from '../../model/Picture';
+
+const image: Picture = {
+  src: 'money-1.png',
+  format: 'webp',
+  size: {
+    width: 280,
+    height: 280,
+  },
+};
+
+export default {
+  default: (
+    <ProductBlock
+      context={context}
+      title={'Потребительский кредит наличными'}
+      description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
+      breadcrumbs={[
+        {
+          text: 'Главная',
+          href: '/',
+        },
+        {
+          text: 'Кредитные карты',
+          href: '/credit',
+        },
+        {
+          text: 'Кредитная карта Своя Union Pay',
+        },
+      ]}
+      benefits={[
+        {
+          label: 'До 5 млн ₽',
+          description: 'Кредитный лимит',
+          icon: 'EmptyWalletIcon',
+        },
+        {
+          label: 'От 16,9%',
+          description: 'Ставка по кредиту',
+          icon: 'PercentageSquareIcon',
+        },
+        {
+          label: 'До 5 лет',
+          description: 'Срок кредитования',
+          icon: 'CalendarIcon',
+        },
+      ]}
+      buttons={[
+        {
+          href: 'https://rshb.ru',
+          text: 'Оформить карту',
+          target: '_blank',
+          version: 'primary',
+        },
+        {
+          href: 'https://rshb.ru',
+          text: 'Подробнее',
+          target: '_blank',
+          version: 'secondary',
+        },
+      ]}
+      image={image}
+    />
+  ),
+  'with items': (
+    <ProductBlock
+      context={context}
+      title={'Оплата проходит \nв 180 странах мира'}
+      breadcrumbs={[]}
+      description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
+      items={[
+        'Совершайте любые личные покупки',
+        'Используйте корпоративную карту как обычную дебетовую, если вы ИП',
+        'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
+      ]}
+      buttons={[
+        {
+          href: 'https://rshb.ru',
+          text: 'Оформить карту',
+          target: '_blank',
+          version: 'primary',
+        },
+        {
+          href: 'https://rshb.ru',
+          text: 'Подробнее',
+          target: '_blank',
+          version: 'secondary',
+        },
+      ]}
+      image={image}
+    />
+  ),
+};

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

@@ -0,0 +1,19 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { ProductBlockInner } from './ProductBlockInner';
+import type { ProductBlockInnerContent } from './ProductBlockContent';
+import type { UniBlockProps } from '../../types';
+
+export interface ProductBlockProps extends ProductBlockInnerContent, UniBlockProps {}
+
+export const ProductBlock = JSX<ProductBlockProps>(
+  ({ titleSize, image, benefits, ...props } /* Get rid of image and benefits */) => {
+    const { className } = props;
+    return (
+      <section
+        className={`font-sans bg-white pt-10 pl-[50px] pb-[50px] pr-[7.5rem] ${className || ''}`}
+      >
+        <ProductBlockInner {...props} titleSize="L" />
+      </section>
+    );
+  },
+);

package/src/components/ProductBlock/ProductBlock.tsx

@@ -0,0 +1,37 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { ProductBlockContent } from './ProductBlockContent';
+import { ProductBlockInner } from './ProductBlockInner';
+import type { UniBlockProps } from '../../types';
+import { Breadcrumb } from '../../ui-kit/Breadcrumb';
+import { useLink } from '../../hooks/useLink';
+import { joinList } from '../../utils/joinList';
+
+export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
+
+export const ProductBlock = JSX<ProductBlockProps>((props) => {
+  const { context, className, breadcrumbs } = props;
+  const router = context.useRouter();
+  const { handlerDecorator } = context;
+  return (
+    <section
+      className={`font-sans bg-white pt-10 pl-[50px] pb-[50px] pr-[7.5rem] ${className || ''}`}
+    >
+      {breadcrumbs?.length ? (
+        <div className="text-xs mb-6">
+          {joinList(<span className="text-secondary-text mx-2">/</span>)(
+            breadcrumbs.map((breadcrumb, i) => (
+              <Breadcrumb
+                key={String(i)}
+                {...useLink(
+                  { router, handlerDecorator },
+                  { className: 'text-secondary-text', ...breadcrumb },
+                )}
+              />
+            )),
+          )}
+        </div>
+      ) : null}
+      <ProductBlockInner {...props} />
+    </section>
+  );
+});

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -0,0 +1,11 @@
+import type { LinkContent } from '../../model/LinkContent';
+import type { BaseTileContent } from '../BaseTile/BaseTileContent';
+import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+
+export interface ProductBlockInnerContent extends BaseTileContent {
+  benefits?: Benefit[];
+}
+
+export interface ProductBlockContent extends ProductBlockInnerContent {
+  breadcrumbs?: LinkContent[];
+}

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -0,0 +1,57 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { BaseTile } from '../BaseTile/BaseTile';
+import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import type { ProductBlockInnerContent } from './ProductBlockContent';
+import type { UniBlockProps } from '../../types';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img';
+import { Title } from '../../ui-kit/Title/Title';
+
+export interface ProductBlockInnerProps extends ProductBlockInnerContent, UniBlockProps {}
+
+export const ProductBlockInner = JSX<ProductBlockInnerProps>(
+  ({ className, context, title, titleSize, description, benefits, buttons, image, items }) => {
+    return (
+      <div className={`flex grow justify-between items-stretch ${className || ''}`}>
+        <div className={'flex flex-col'}>
+          {title && (
+            /* TODO Why <Title> is duplicated here?  */
+            <Title
+              size={titleSize || 'XL'}
+              className="font-medium m-0 mb-4 whitespace-pre-wrap max-w-[600px] text-primary-text"
+            >
+              {title}
+            </Title>
+          )}
+          <BaseTile context={context} description={description} items={items} buttons={buttons}>
+            {benefits?.length ? (
+              <div className="flex gap-6 mt-6 mb-3.5">{benefits.map(renderBenefit)}</div>
+            ) : null}
+          </BaseTile>
+        </div>
+        {image?.src && <Img className="mt-auto" image={image} />}
+      </div>
+    );
+  },
+);
+
+function renderBenefit(benefit: Benefit, i: number) {
+  return (
+    <div key={String(i)} className="flex gap-4 items-center">
+      {benefit.icon && (
+        <Icon
+          className="w-[50px] h-[50px] min-w-[50px] min-h-[50px] bg-main rounded-full p-[10px] box-border"
+          name={benefit.icon}
+          width="24"
+          height="24"
+        />
+      )}
+      <div className="flex gap-1 flex-col h-full">
+        <h4 className="font-medium text-primary-text text-xl m-0">{benefit.label}</h4>
+        {benefit.description && (
+          <div className="font-normal text-sm text-secondary-text">{benefit.description}</div>
+        )}
+      </div>
+    </div>
+  );
+}