@redneckz/wildless-cms-uni-blocks 0.5.9 → 0.5.11

package/src/components/GracePeriod/GracePeriod.ui.json

@@ -0,0 +1,15 @@
+{
+  "content": {
+    "calendar": {
+      "items": {
+        "month": {
+          "items": {
+            "image": {
+              "ui:field": "picture"
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/GracePeriod/GracePeriodContent.ts

@@ -3,7 +3,7 @@ import type { Picture } from '../../model/Picture';
 
 export interface Month {
   /** @title Название месяца */
-  text?: string;
+  name?: string;
   /**
    * @title Изображение календарного месяца
    * @default {

package/src/components/Header/DropdownMenu.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import type { LinkProps } from '../../model/LinkProps';
-import type { UniBlockProps } from '../../types';
 import type {
   ContentPageContext,
   HandlerDecorator,

package/src/components/Header/Header.fallback.ts

@@ -1,6 +1,6 @@
 import { readFile } from 'fs/promises';
 import { projectSettings } from '../../ProjectSettings';
-import type { FallbackMap } from '../../types/Fallback';
+import type { FallbackMap } from '../../model/Fallback';
 
 export const fallback = (): FallbackMap => ({
   [`/wcms-resources/${projectSettings.SITEMAP || 'sitemap'}.json`]: async () => {

package/src/components/Header/Header.mobile.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
 import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
 import { useSitemap } from '../../services/sitemap/useSitemap';
-import type { UniBlockProps } from '../../types';
-import type { Fallback } from '../../types/Fallback';
+import type { Fallback } from '../../model/Fallback';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
 import type { TopItemProps } from '../../ui-kit/TopItem/TopItem';
 import { getAccordionItems } from '../../utils/getAccordionItems';

package/src/components/Header/Header.tsx

@@ -1,11 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
 import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
 import { useSitemap } from '../../services/sitemap/useSitemap';
-import type { UniBlockProps } from '../../types';
-import type { Fallback } from '../../types/Fallback';
+import type { Fallback } from '../../model/Fallback';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';

package/src/components/Header/Header.ui.json

@@ -0,0 +1,11 @@
+{
+  "content": {
+    "burgerSubMenu": {
+      "items": {
+        "icon": {
+          "ui:field": "icon"
+        }
+      }
+    }
+  }
+}

package/src/components/Headline/Headline.mobile.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { ALIGN_TEXT, HEADLINE_BLOCK_STYLE_MAPS } from './constants';

package/src/components/Headline/Headline.tsx

@@ -1,11 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { ALIGN_TEXT, HEADLINE_BLOCK_STYLE_MAPS, HEADLINE_VERSION } from './constants';
 import type { HeadlineContent } from './HeadlineContent';
-import { Description } from '../../ui-kit/Description/Description';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 

package/src/components/Headline/Headline.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { InsuranceAmountBlockContent } from './InsuranceAmountBlockContent';

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.ui.json

@@ -0,0 +1,15 @@
+{
+  "content": {
+    "insuranceTabs": {
+      "items": {
+        "cards": {
+          "items": {
+            "icon": {
+              "ui:field": "icon"
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';

package/src/components/LikeControl/LikeControl.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLikeService } from '../../hooks/useLikeService';
 import { defaultHandlerDecorator } from '../../hooks/useLink';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { LikeButton } from '../../ui-kit/Button/LikeButton';
 

package/src/components/LinkDocs/LinkDocs.mobile.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
+import { Headline } from '../Headline/Headline';
 import type { LinkDocsContent } from './LinkDocsContent';
 import { LinkDocsHorizontalList } from './LinkDocsHorizontalList';
 import { LinkDocsVerticalList } from './LinkDocsVerticalList';
-import { Headline } from '../Headline/Headline';
 
 export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
 

package/src/components/LinkDocs/LinkDocs.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Headline } from '../Headline/Headline';
 import type { LinkColumnsMode, LinkDocsContent } from './LinkDocsContent';

package/src/components/LinkDocs/LinkDocs.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/LinkList/LinkList.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import type { UniBlockProps } from '../../types';
 import type { LinkListContent } from './LinkListContent';
 
 export interface LinkListProps extends LinkListContent, UniBlockProps {}

package/src/components/LinkList/LinkList.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/MiniGallery/MiniGallery.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { GalleryInner } from '../Gallery/GalleryInner';
 import type { MiniGalleryContent } from './MiniGalleryContent';
 

package/src/components/MiniGallery/MiniGallery.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/MobileAppTile/MobileAppTile.mobile.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import type { MobileAppTileContent } from './MobileAppTileContent';
-import type { UniBlockProps } from '../../types';
 
 import { Logo } from '../../ui-kit/Logo/Logo';
 
@@ -15,7 +15,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
         {href ? (
           <div className="flex">
             <div className="flex justify-center align-middle rounded-md bg-primary-main w-[50px] h-[50px]">
-              <Logo className="w-[33px]" bgColor="transparent" hideTitle />
+              <Logo className="w-[33px]" bgColor="transparent" showTitle />
             </div>
             <a href={href} target="_blank" className="flex flex-col justify-center pl-3">
               <div className="text-s font-medium mb-[3px]">{title}</div>

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
-import type { MobileAppTileContent } from './MobileAppTileContent';
+import { VersionStyleMap } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -8,7 +8,7 @@ import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
-import { VersionStyleMap } from '../../model/BlockVersion';
+import type { MobileAppTileContent } from './MobileAppTileContent';
 
 export interface MobileAppTileProps extends MobileAppTileContent, UniBlockProps {}
 
@@ -40,7 +40,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
       >
         <BaseTile
           context={context}
-          className="z-[1]"
+          className="z-10"
           title={
             title ? (
               <Heading
@@ -61,7 +61,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
           <div className="flex flex-1 items-center">
             {qr?.src ? (
               <div className={`flex justify-center mr-5 bg-white rounded-md ${containerStyle}`}>
-                <Img className="w-fit" image={qr} />
+                <Img className="w-fit" image={qr} alt="QR-код" />
               </div>
             ) : null}
             {renderList(version, items)}

package/src/components/MobileAppTile/MobileAppTile.ui.json

@@ -0,0 +1,7 @@
+{
+  "content": {
+    "qr": {
+      "ui:field": "qr"
+    }
+  }
+}

package/src/components/OfficeServicesBlock/OfficeServicesBlock.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';

package/src/components/OfficeServicesBlock/OfficeServicesBlock.ui.json

@@ -0,0 +1,11 @@
+{
+  "content": {
+    "servicesList": {
+      "items": {
+        "icon": {
+          "ui:field": "icon"
+        }
+      }
+    }
+  }
+}

package/src/components/OtherProducts/OtherProducts.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { OtherProductsContent } from './OtherProductsContent';
 import { OtherProductsItem } from './OtherProductsItem';

package/src/components/OtherProducts/OtherProducts.ui.json

@@ -0,0 +1,76 @@
+{
+  "content": {
+    "blockItems": {
+      "items": {
+        "blocks": {
+          "items": {
+            "blockListType": {
+              "ui:widget": "hidden"
+            },
+            "image": {
+              "ui:field": "picture"
+            },
+            "benefitList": {
+              "items": {
+                "description": {
+                  "benefitType": {
+                    "ui:widget": "hidden"
+                  }
+                },
+                "icon": {
+                  "ui:field": "icon"
+                }
+              }
+            },
+            "style": {
+              "ui:field": "style"
+            },
+            "benefits": {
+              "items": {
+                "icon": {
+                  "ui:field": "icon"
+                }
+              }
+            },
+            "buttons": {
+              "items": {
+                "icon": {
+                  "ui:field": "icon"
+                },
+                "iconRight": {
+                  "ui:field": "icon"
+                }
+              }
+            },
+            "icon": {
+              "ui:field": "icon"
+            },
+            "backwardButton": {
+              "icon": {
+                "ui:field": "icon"
+              },
+              "iconRight": {
+                "ui:field": "icon"
+              }
+            },
+            "cards": {
+              "items": {
+                "image": {
+                  "ui:field": "picture"
+                },
+                "button": {
+                  "icon": {
+                    "ui:field": "icon"
+                  },
+                  "iconRight": {
+                    "ui:field": "icon"
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/OtherProducts/OtherProductsContent.ts

@@ -1,6 +1,6 @@
-import type { ColorPalette } from '../../types';
-import type { BlockDef } from '../../ui-kit/BlocksList/BlocksListProps';
+import type { ColorPalette } from '../../model/ContentPageDef';
 import type { TitleProps } from '../../model/HeadlineType';
+import type { BlockDef } from '../../ui-kit/BlocksList/BlocksListProps';
 
 /**
  * @title Элемент списка

package/src/components/OtherProducts/OtherProductsItem.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { ColorPalette, UniBlockProps } from '../../model/ContentPageDef';
 import type { VNode } from '../../model/VNode';
-import type { ColorPalette, UniBlockProps } from '../../types';
 import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import type { BlockItemCommonProps } from './OtherProductsContent';

package/src/components/PictureText/PictureText.example.json

@@ -14,12 +14,14 @@
     {
       "label": "Преимущество №1",
       "icon": {
+        "format": "webp",
         "icon": "ShieldTickIcon"
       }
     },
     {
       "label": "Преимущество №2",
       "icon": {
+        "format": "webp",
         "icon": "ShieldTickIcon"
       }
     }

package/src/components/PictureText/PictureText.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import { VersionStyleMap } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
 import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';

package/src/components/PictureText/PictureText.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/Placeholder/Placeholder.tsx

@@ -1,11 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { PlaceholderContent } from './PlaceholderContent';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Headline } from '../Headline/Headline';
-import type { UniBlockProps } from '../../types';
 import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
+import { Headline } from '../Headline/Headline';
+import type { PlaceholderContent } from './PlaceholderContent';
 
 export interface PlaceholderProps extends PlaceholderContent, UniBlockProps {
   className?: string;

package/src/components/Placeholder/Placeholder.ui.json

@@ -0,0 +1 @@
+{}

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

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { ProductBlockInner } from './ProductBlockInner';
-import type { UniBlockProps } from '../../types';
-import type { ProductBlockContent } from './ProductBlockContent';
 import { VersionStyleMap } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { ProductBlockContent } from './ProductBlockContent';
+import { ProductBlockInner } from './ProductBlockInner';
 
 export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 

package/src/components/ProductBlock/ProductBlock.tsx

@@ -1,14 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../types';
-import type { ProductBlockContent } from './ProductBlockContent';
+import { VersionStyleMap } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Breadcrumb } from '../../ui-kit/Breadcrumb';
 import { joinList } from '../../utils/joinList';
+import type { ProductBlockContent } from './ProductBlockContent';
 import { ProductBlockInner } from './ProductBlockInner';
 import { renderBackwardButton } from './renderBackwardButton';
-import { VersionStyleMap } from '../../model/BlockVersion';
 
 export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 

package/src/components/ProductBlock/ProductBlock.ui.json

@@ -0,0 +1,12 @@
+{
+  "content": {
+    "backwardButton": {
+      "icon": {
+        "ui:field": "icon"
+      },
+      "iconRight": {
+        "ui:field": "icon"
+      }
+    }
+  }
+}

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

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
-import { Headline } from '../Headline/Headline';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { BaseTile } from '../BaseTile/BaseTile';
+import { Headline } from '../Headline/Headline';
 import type { ProductBlockInnerContent } from './ProductBlockContent';
-import type { BlockVersion } from '../../model/BlockVersion';
 import { renderBenefit } from './renderBenefit';
 
 export type ProductBlockInnerProps = ProductBlockInnerContent & UniBlockProps;

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { BaseTile } from '../BaseTile/BaseTile';
+import { Headline } from '../Headline/Headline';
 import type { ProductBlockInnerContent } from './ProductBlockContent';
 import { renderBenefit } from './renderBenefit';
-import { Headline } from '../Headline/Headline';
 
 export type ProductBlockInnerProps = ProductBlockInnerContent & UniBlockProps;
 

package/src/components/ProductGallery/ProductGallery.mobile.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
-import type { ProductGalleryContent } from './ProductGalleryContent';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
 import { ProductGalleryBlock } from './ProductGalleryBlock';
+import type { ProductGalleryContent } from './ProductGalleryContent';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 

package/src/components/ProductGallery/ProductGallery.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../types';
-import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
-import type { ProductGalleryContent } from './ProductGalleryContent';
+import { VersionStyleMap } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
-import { VersionStyleMap } from '../../model/BlockVersion';
+import type { ProductGalleryContent } from './ProductGalleryContent';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
@@ -29,7 +29,7 @@ export const ProductGallery = JSX<ProductGalleryProps>(
     return (
       <BlockWrapper
         context={context}
-        className={`box-border pt-[50px] overflow-hidden relative font-sans w-100 ${className}
+        className={`box-border pt-[50px] overflow-hidden relative font-sans w-100 mb-6 ${className}
         ${VersionStyleMap[version]}`}
         {...rest}
       >
@@ -84,15 +84,15 @@ function renderNavButton({ slide, i, activeSlideIndex, onClick, version }) {
   const isActiveBtn = i === activeSlideIndex;
 
   const btnClassName = isActiveBtn
-    ? 'bg-white shadow-dark-blue/42 w-[354px] min-w-[354px] border-none'
-    : `min-w-[277px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10
+    ? 'bg-white shadow-dark-blue/42 min-w-[354px] border-none p-6'
+    : `min-w-[290px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10 px-6 py-5 backdrop-blur
       ${VersionStyleMap[version]}`;
   const btnTitleClassName = isActiveBtn
-    ? 'text-primary-text text-h6'
-    : `text-l ${productBlockStyleMap[version].title}`;
+    ? 'text-primary-text !text-h6 p-2'
+    : `text-l pb-1 ${productBlockStyleMap[version].title}`;
   const btnDescClassName = isActiveBtn
-    ? 'text-secondary-text text-m-title-xs mt-2.5'
-    : `text-m mt-1.5 ${productBlockStyleMap[version].text}`;
+    ? 'text-secondary-text text-l-light mt-2.5'
+    : `text-m-light ${productBlockStyleMap[version].text}`;
 
   const additionalBorder = version === 'secondary' ? 'border-white/50' : 'border-black/50';
 
@@ -102,13 +102,13 @@ function renderNavButton({ slide, i, activeSlideIndex, onClick, version }) {
       key={String(i)}
       onClick={onClick}
       aria-label={slide?.title}
-      className={`box-border font-sans relative overflow-hidden border border-white/50 cursor-pointer text-left mx-1 grow basis-0 pt-5 pb-[23px]
+      className={`box-border relative overflow-hidden border border-white/50 cursor-pointer text-left mx-1 grow basis-0
         ${btnClassName} ${additionalBorder}
       `}
     >
       <div className="border-0 px-6">
-        <div className={`font-medium ${btnTitleClassName}`}>{slide?.title}</div>
-        <div className={`text-secondary-text ${btnDescClassName}`}>{slide.description}</div>
+        <div className={`last:pb-0 ${btnTitleClassName}`}>{slide?.title}</div>
+        <div className={`text-secondary-text  ${btnDescClassName}`}>{slide.description}</div>
       </div>
     </button>
   );