@redneckz/wildless-cms-uni-blocks 0.6.38 → 0.6.40

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

@@ -0,0 +1,102 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { AlignText } from '../../model/AlignText';
+import type { BlockVersion } from '../../model/BlockVersion';
+import { VersionStyleMap } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { Img } from '../../ui-kit/Img/Img';
+import { List } from '../../ui-kit/List/List';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Text } from '../../ui-kit/Text/Text';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import { HEADLINE_SMALL_VERSION } from '../Headline/constants';
+import type { CarouselProductCardContent, ListProps } from './CarouselProductCardContent';
+
+export interface CarouselProductCardProps extends CarouselProductCardContent, UniBlockProps {}
+
+const descriptionStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-secondary-text',
+  secondary: 'text-white/80',
+};
+
+const BORDER_STYLE = 'box-border border-solid border border-main-stroke ';
+
+export const CarouselProductCard = JSX<CarouselProductCardProps>(
+  ({
+    title,
+    headlineSmallVersion = 'H6',
+    description,
+    additionalDescription,
+    icon,
+    items = [],
+    button = {},
+    version = 'primary',
+    isDotted = true,
+    align = 'center',
+  }) => {
+    return (
+      <section
+        className={[
+          'flex flex-col justify-between items-stretch min-w-[260px] h-full w-full p-6',
+          BORDER_STYLE,
+          AlignText[align],
+          VersionStyleMap[version],
+        ].join(' ')}
+        role="listitem"
+      >
+        <div className="flex flex-col h-full">
+          {renderImage(icon, version)}
+          {renderCardTitle(headlineSmallVersion, title)}
+          {renderDescription(description, title)}
+          {renderItems(items, isDotted, version)}
+          {renderAdditionalDescription(additionalDescription, version)}
+        </div>
+        {renderButton({ button, buttonClassName: 'mt-6' })}
+      </section>
+    );
+  },
+);
+
+const renderImage = (image?: Picture, version?: BlockVersion) => (
+  <div className="flex justify-center">
+    {image?.src ? <Img className="mb-5" image={image} /> : null}
+    {image?.icon ? (
+      <Img
+        className={`w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`}
+        image={getIconWithVersion(image, version)}
+        asSVG
+      />
+    ) : null}
+  </div>
+);
+
+const renderCardTitle = (headlineSmallVersion: string, title?: string) =>
+  title ? <Text size={HEADLINE_SMALL_VERSION[headlineSmallVersion]}>{title}</Text> : null;
+
+const renderDescription = (description?: string, title?: string) =>
+  description ? (
+    <div className={title ? 'mt-2' : ''}>
+      <Paragraph size="text-l">{description}</Paragraph>
+    </div>
+  ) : null;
+
+const renderAdditionalDescription = (additionalDescription?: string, version = 'primary') =>
+  additionalDescription ? (
+    <div className="mt-auto">
+      <Text size="text-m" font="font-light" color={descriptionStyleMap[version]}>
+        {additionalDescription}
+      </Text>
+    </div>
+  ) : null;
+
+const renderItems = (items: ListProps[], isDotted: boolean, version: BlockVersion = 'primary') =>
+  items?.length ? (
+    <List
+      className={`max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`}
+      itemClassName="text-left"
+      items={items.filter((item) => item?.text).map((item) => item.text as string)}
+      isDotted={isDotted}
+      version={version}
+    />
+  ) : null;

package/mobile/src/components/CarouselProductCard/CarouselProductCard.ui.json

@@ -0,0 +1,18 @@
+{
+  "content": {
+    "additionalDescription": {
+      "ui:field": "hidden"
+    },
+    "icon": {
+      "ui:field": "picture"
+    },
+    "button": {
+      "icon": {
+        "ui:field": "icon"
+      },
+      "iconRight": {
+        "ui:field": "icon"
+      }
+    }
+  }
+}

package/mobile/src/components/CarouselProductCard/CarouselProductCardContent.ts

@@ -0,0 +1,51 @@
+import type { AlignType } from '../../model/AlignType';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { HeadlineSmallProps } from '../../model/HeadlineType';
+import type { Picture } from '../../model/Picture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+
+/**
+ * @title Элемент списка
+ */
+export interface ListProps {
+  /** @title Текст */
+  text?: string;
+}
+
+/**
+ * @title Карточка продуктовой карусели
+ */
+export type CarouselProductCardContent = HeadlineSmallProps & {
+  /** @title Дополнительное описание */
+  additionalDescription?: string;
+  /**
+   * @default {
+   *   "format": "webp",
+   *   "size": {
+   *       "width": 140
+   *   },
+   *   "sources": [{
+   *       "media": 1279,
+   *       "width": 84,
+   *       "format": "webp",
+   *       "alignment": "center"
+   *   }]
+   * }
+   */
+  icon?: Picture;
+  /** @title Кнопка */
+  button?: ButtonWithIconProps;
+  /**
+   * @title Буллиты
+   * @default true
+   */
+  isDotted?: boolean;
+  /** @title Список */
+  items?: ListProps[];
+  version?: BlockVersion;
+  /**
+   * @title Выравнивание
+   * @default center
+   */
+  align?: AlignType;
+};

package/mobile/src/components/CarouselProgramsCard/CarouselProgramsCardContent.ts

@@ -1,6 +1,6 @@
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
-import type { BlockVersion } from '../../model/BlockVersion';
 
 /**
  * @title Карточка программ карусели

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

@@ -16,7 +16,7 @@
       ],
       [
         {
-          "title": "Заголовок 2ff",
+          "title": "Заголовок 2",
           "description": "Описание 2",
           "button": {
             "href": "#",

package/mobile/src/components/Gallery/GalleryCardInner.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { AlignText } from '../../model/AlignText';
 import type { BlockVersion } from '../../model/BlockVersion';
+import { VersionAdditionalStyleMap } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { Img } from '../../ui-kit/Img/Img';
@@ -29,7 +30,7 @@ export const GalleryCardInner = JSX<GalleryCardProps>(
         {renderCardTitle(headlineSmallVersion, title)}
         {renderDescription(description, title)}
         {items?.length ? renderItems(items, isDotted, version) : null}
-        {renderAdditionalDescription(additionalDescription)}
+        {renderAdditionalDescription(additionalDescription, version)}
       </div>
       {button?.text
         ? renderButton({
@@ -60,9 +61,11 @@ const renderCardTitle = (headlineSmallVersion: string, title?: string) =>
 const renderDescription = (description?: string, title?: string) =>
   description ? <div className={`text-l ${title ? 'mt-2' : ''}`}>{description}</div> : null;
 
-const renderAdditionalDescription = (additionalDescription?: string) =>
+const renderAdditionalDescription = (additionalDescription?: string, version?: BlockVersion) =>
   additionalDescription ? (
-    <div className="text-m-light text-secondary-text mt-auto">{additionalDescription}</div>
+    <div className={`text-m-light mt-auto ${VersionAdditionalStyleMap[version ?? 'primary']}`}>
+      {additionalDescription}
+    </div>
   ) : null;
 
 const renderItems = (

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
-import { VersionStyleMap } from '../../model/BlockVersion';
+import { VersionAdditionalStyleMap, VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -41,9 +41,7 @@ export const ProductTile = JSX<ProductTileProps>(
         {...rest}
       />
       {renderBenefits(benefits, version, image)}
-      {additionalDescription
-        ? renderAdditionalDescription(additionalDescription, image, version)
-        : null}
+      {additionalDescription ? renderAdditionalDescription(additionalDescription, image) : null}
       {buttons?.length ? (
         <ButtonSection buttons={buttons} className="flex self-end mt-5 gap-4 z-10 text-l" />
       ) : null}
@@ -66,42 +64,26 @@ function renderBenefits(benefits: TextBenefit[], version: BlockVersion, image?:
   );
 }
 
-function renderBenefit(version: BlockVersion = 'primary') {
-  const labelStyleMap: Record<BlockVersion, string> = {
-    primary: 'text-secondary-text',
-    secondary: 'text-white',
-  };
-
-  return function renderVersionedBenefit(benefit: TextBenefit, i: number) {
+const renderBenefit =
+  (version: BlockVersion = 'primary') =>
+  (benefit: TextBenefit, i: number) => {
     const { label = '', description = '' } = benefit;
 
     return [
       <div key={`label-${i}`} className="text-h6">
         {label}
       </div>,
-      <div key={`desc-${i}`} className={`text-m-light ${labelStyleMap[version]}`}>
+      <div key={`desc-${i}`} className={`text-m-light ${VersionAdditionalStyleMap[version]}`}>
         {description}
       </div>,
     ];
   };
-}
-
-function renderAdditionalDescription(
-  additionalDescription: string,
-  image?: Picture,
-  version: BlockVersion = 'primary',
-) {
-  const descStyleMap: Record<BlockVersion, string> = {
-    primary: 'text-secondary-text',
-    secondary: 'text-white',
-  };
 
+function renderAdditionalDescription(additionalDescription: string, image?: Picture) {
   // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
   const DESCRIPTION_WIDTH = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
 
   return (
-    <div className={`text-m-light mt-2.5 z-10 ${DESCRIPTION_WIDTH} ${descStyleMap[version]}`}>
-      {additionalDescription}
-    </div>
+    <div className={`text-m-light mt-2.5 z-10 ${DESCRIPTION_WIDTH}`}>{additionalDescription}</div>
   );
 }

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

@@ -1,8 +1,11 @@
 {
-  "title": "Вертикальный компоновщик",
-  "version": "transparent",
-  "align": "left",
-  "gap": "",
+  "content": {
+    "version": "transparent",
+    "isPadding": false,
+    "isInnerPadding": true,
+    "align": "left",
+    "gap": ""
+  },
   "blocks": [
     {
       "type": "Headline",

package/mobile/src/components/VerticalLayout/VerticalLayout.tsx

@@ -15,10 +15,10 @@ const alignStyle: Record<AlignType, string> = {
 };
 
 const gapStyleMap: Record<GapVersion, string> = {
-  XXL: 'gap-10',
-  XL: 'gap-8',
-  L: 'gap-4',
-  M: 'gap-3',
+  XXL: 'gap-12',
+  XL: 'gap-10',
+  L: 'gap-8',
+  M: 'gap-4',
   S: 'gap-2',
   XS: 'gap-1',
   '': '',
@@ -31,22 +31,37 @@ const backgroundStyleMap: Record<BlockVersionWithTransparent, string> = {
 };
 
 export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutProps>(
-  ({ className = '', gap = '', align, version = 'transparent', ...rest }) => (
-    <BlockWrapper
-      className={[
-        'flex flex-col',
-        gapStyleMap[gap],
-        align && alignStyle[align],
-        backgroundStyleMap[version],
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      {...rest}
-    >
-      {renderChildren(rest)}
-    </BlockWrapper>
-  ),
+  ({
+    className = '',
+    gap = '',
+    align,
+    isPadding = false,
+    isInnerPadding = true,
+    version = 'transparent',
+    options,
+    ...rest
+  }) => {
+    const paddingStyle = isPadding ? 'p-12' : '';
+    const innerPaddingStyle = isInnerPadding ? '' : '!p-0';
+
+    return (
+      <BlockWrapper
+        className={[
+          'flex flex-col [&>*]:max-w-full',
+          paddingStyle,
+          gapStyleMap[gap],
+          align && alignStyle[align],
+          backgroundStyleMap[version],
+          className,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        {...rest}
+      >
+        {renderChildren({ ...rest, options: { ...options, className: innerPaddingStyle } })}
+      </BlockWrapper>
+    );
+  },
 );
 
 VerticalLayout.childrenTypes = {

package/mobile/src/components/VerticalLayout/VerticalLayoutContent.ts

@@ -16,4 +16,8 @@ export interface VerticalLayoutContent {
   version?: BlockVersionWithTransparent;
   align?: AlignType;
   gap?: GapVersion;
+  /** @title Внутренний отступ компоновщика */
+  isPadding?: boolean;
+  /** @title Отступы вложенных компонентов */
+  isInnerPadding?: boolean;
 }

package/mobile/src/model/BlockVersion.ts

@@ -15,6 +15,11 @@ export const VersionStyleMap: Record<BlockVersion, string> = {
   secondary: 'bg-primary-main text-white',
 };
 
+export const VersionAdditionalStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-secondary-text',
+  secondary: 'text-white',
+};
+
 export const VersionWithTransparentStyleMap: Record<BlockVersionWithTransparent, string> = {
   transparent: '',
   primary: 'bg-white text-primary-text',

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

@@ -22,23 +22,23 @@ export const ButtonSection = JSX<ButtonSectionProps>(({ className = '', buttons
 );
 
 export function renderButton({ button, buttonClassName, index }: RenderButtonProps) {
-  const { icon, iconRight, version, ...rest } = button;
+  const { icon, iconRight, version, text, ...rest } = button;
 
   const iconVersion = version === 'secondary' ? 'color' : 'white';
-
   const leftIcon = renderButtonIcon({ ...icon, iconVersion: iconVersion } as Picture);
   const rightIcon = renderButtonIcon({ ...iconRight, iconVersion: iconVersion } as Picture);
 
-  return (
+  return text ? (
     <Button
       key={index ? String(index) : ''}
       className={buttonClassName}
       appendLeft={leftIcon}
       appendRight={rightIcon}
       version={version}
+      text={text}
       {...rest}
     />
-  );
+  ) : null;
 }
 
 const renderButtonIcon = (icon: Picture) => {

package/mobile/src/ui-kit/SwipeListControl/SwipeListContainer.tsx

@@ -16,13 +16,13 @@ interface SwipeListContainerProps extends SwipeContainerProps {
   className?: string;
   containerRef?: { current: HTMLDivElement | null };
   activeIndex?: number;
-  visibleItemCount?: SwipeListItemWidthAuto | 1 | 2 | 3;
+  visibleItemCount?: SwipeListItemWidthAuto | 1 | 2 | 3 | 4;
   snapAlign?: 'snap-start' | 'snap-center' | 'snap-end';
   onVisibleItemsChange?: (itemsVisibilityList: ItemsVisibilityList) => void;
   onVisibleIndicesChange?: (indices: number[]) => void;
 }
 
-const childStyleMap = ['min-w-[100%]', 'min-w-[50%]', 'min-w-[33.33%]'];
+const childStyleMap = ['min-w-[100%]', 'min-w-[50%]', 'min-w-[33.33%]', 'min-w-[25%]'];
 
 export const SwipeListContainer = JSX<SwipeListContainerProps>(
   ({

package/mobile/src/utils/adjustHref.ts

@@ -1,4 +1,3 @@
-import { projectSettings } from '../ProjectSettings';
 import { getOrigin } from './url';
 
 export const adjustHref = (
@@ -9,9 +8,8 @@ export const adjustHref = (
     return href;
   }
 
-  const hrefWithBasePath = `${projectSettings.BASE_PATH || ''}${href}`;
   const origin = getOrigin(router?.href);
 
   // Relative URL
-  return origin ? hrefWithBasePath.replace(origin, '') || '/' : hrefWithBasePath;
+  return origin ? href.replace(origin, '') || '/' : href;
 };

package/package.json

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

package/src/BlockRenderer/BlockRendererOptions.ts

@@ -9,4 +9,5 @@ export interface BlockRendererOptions {
   blocksRegistry?: BlocksRegistry;
   parent?: Slot;
   ancestors?: BlockAncestors;
+  className?: string;
 }

package/src/BlockRenderer/renderBlock.tsx

@@ -13,6 +13,7 @@ export function renderBlock(block: BlockDef, options: BlockRendererOptions) {
     blockDecorator = defaultBlockDecorator,
     blocksRegistry = {},
     ancestors = DEFAULT_ANCESTORS,
+    className = '',
   } = options;
   const { type } = block;
 
@@ -24,7 +25,7 @@ export function renderBlock(block: BlockDef, options: BlockRendererOptions) {
 
   return blockDecorator(
     {
-      blockClassName: `scroll-mt-12 ${style2className(block.style || DEFAULT_STYLE)}`, // TODO scroll-mt-12 ? here?
+      blockClassName: `scroll-mt-12 ${className} ${style2className(block.style || DEFAULT_STYLE)}`, // TODO scroll-mt-12 ? here?
       block,
       ancestors,
       // Adjusted by decorator block and blockClassName

package/src/ProjectSettings.ts

@@ -7,7 +7,6 @@ export interface ProjectSettings {
   SITEMAP?: string;
   FOOTER?: string;
   CDN?: string; // Should ends with "/"
-  BASE_PATH?: string; // Should ends with "/"
   YANDEX_MAP_API_KEY?: string;
   YANDEX_METRIKA_ID?: string;
 }
@@ -46,9 +45,6 @@ export const projectSettings = new (class implements ProjectSettings {
   get CDN() {
     return this._.CDN;
   }
-  get BASE_PATH() {
-    return this._.BASE_PATH;
-  }
   get YANDEX_MAP_API_KEY() {
     return this._.YANDEX_MAP_API_KEY;
   }

package/src/components/Blocks.ts

@@ -9,7 +9,10 @@ import { Calculator } from './Calculator/Calculator';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
 import { CarouselCard } from './CarouselCard/CarouselCard';
+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 { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { Catalog } from './Catalog/Catalog';
@@ -49,7 +52,6 @@ import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 import { Video } from './Video/Video';
-import { CarouselInvestmentCard } from './CarouselInvestmentCard/CarouselInvestmentCard';
 
 export const Blocks: BlocksRegistry = {
   Accordion,
@@ -62,7 +64,10 @@ export const Blocks: BlocksRegistry = {
   Calculator,
   Carousel,
   CarouselCard,
+  CarouselCatalogCard,
+  CarouselInvestmentCard,
   CarouselLinks,
+  CarouselProductCard,
   CarouselProgramsCard,
   CarouselTariffsCard,
   Catalog,
@@ -102,5 +107,4 @@ export const Blocks: BlocksRegistry = {
   Tile,
   VerticalLayout,
   Video,
-  CarouselInvestmentCard,
 };

package/src/components/Carousel/Carousel.example.json

@@ -1,5 +1,4 @@
 {
-  "cardWidth": 1200,
   "isBlur": false,
   "visibleItemCount": 1,
   "isCycle": false

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

@@ -1,11 +1,13 @@
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import '../../setup-fixture';
 import { Blocks } from '../Blocks';
 import { CARD, CARD_MINI, CARD_NEW } from '../CarouselCard/CarouselCard.fixture';
-import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
+import { CATALOG_CARD } from '../CarouselCatalogCard/CarouselCatalogCard.fixture';
+import { INVESTMENT_CARD_WITH_SINGLE_COLUMN } from '../CarouselInvestmentCard/CarouselInvestmentCard.fixture';
+import { PRODUCT_CARD } from '../CarouselProductCard/CarouselProductCard.fixture';
 import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
+import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
 import { Carousel } from './Carousel';
-import { INVESTMENT_CARD_WITH_SINGLE_COLUMN } from '../CarouselInvestmentCard/CarouselInvestmentCard.fixture';
-import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 
 const options = {
   blocksRegistry: Blocks,
@@ -30,7 +32,7 @@ export default {
       />
     </div>
   ),
-  'carousel with mini cards': (
+  'mini cards': (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
@@ -48,6 +50,25 @@ export default {
       />
     </div>
   ),
+  catalog: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        visibleItemCount={3}
+        isBlur={false}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(6)
+            .fill({
+              type: 'CarouselCatalogCard',
+              content: CATALOG_CARD,
+            })
+            .map((_, i) => (i === 1 ? { ..._, content: CATALOG_CARD } : _)),
+        }}
+        options={options}
+      />
+    </div>
+  ),
   tariffs: (
     <div className="container grid grid-cols-12">
       <Carousel
@@ -68,6 +89,45 @@ export default {
       />
     </div>
   ),
+  product: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        visibleItemCount={3}
+        isBlur={true}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(6)
+            .fill({
+              type: 'CarouselProductCard',
+              content: PRODUCT_CARD,
+            })
+            .map((_, i) => (i === 1 ? { ..._, content: PRODUCT_CARD } : _)),
+        }}
+        options={options}
+      />
+    </div>
+  ),
+  'mini-product': (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        visibleItemCount={4}
+        isBlur={true}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(6)
+            .fill({
+              type: 'CarouselProductCard',
+              content: PRODUCT_CARD,
+            })
+            .map((_, i) => (i === 1 ? { ..._, content: PRODUCT_CARD } : _)),
+        }}
+        options={options}
+      />
+    </div>
+  ),
+
   program: (
     <div className="container grid grid-cols-12">
       <Carousel