@redneckz/wildless-cms-uni-blocks 0.3.29 → 0.3.32

package/src/components/Accordion/AccordionItem.tsx

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import type { AccordionItemCommonProps } from './AccordionContent';
@@ -8,52 +7,27 @@ import { useActiveHandler } from './useActiveHandler';
 
 export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
 
-const buttonStyleMap: Record<BlockVersion, string> = {
-  primary: 'text-primary-text',
-  secondary: 'text-white',
-};
+export const AccordionItem = JSX<AccordionItemProps>(({ label, isExpanded, blocks, context }) => {
+  const { isActive, hasContent, icon, handleToggle } = useActiveHandler({
+    context,
+    blocks,
+    initialState: isExpanded,
+  });
 
-const buttonHoverStyleMap: Record<BlockVersion, string> = {
-  primary: 'group-hover:text-primary-main',
-  secondary: 'group-hover:text-white',
-};
-
-export const AccordionItem = JSX<AccordionItemProps>(
-  ({ label, isExpanded, blocks, columns, context, version = 'primary' }) => {
-    const { isActive, hasContent, icon, handleToggle } = useActiveHandler({
-      context,
-      blocks,
-      initialState: isExpanded,
-    });
-
-    return (
-      <li className="border-0 border-b border-solid border-main-divider last:border-b-0">
-        <button
-          className={`border-none bg-transparent px-0 py-5 flex justify-between text-left w-full font-sans ${
-            buttonStyleMap[version]
-          }
-        ${hasContent ? 'group cursor-pointer' : ''}`}
-          onClick={handleToggle}
-        >
-          <span
-            className={`text-xl pr-2.5 font-medium ${
-              hasContent ? buttonHoverStyleMap[version] : ''
-            }`}
-          >
-            {label}
-          </span>
-          {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
-        </button>
-        {hasContent ? (
-          <AccordionItemInner
-            isExpanded={isActive}
-            columns={columns}
-            blocks={blocks}
-            version={version}
-            context={context}
-          />
-        ) : null}
-      </li>
-    );
-  },
-);
+  return (
+    <li className="border-0 border-b border-solid border-main-divider last:border-b-0">
+      <button
+        className={`border-none bg-transparent px-0 py-5 flex justify-between text-left w-full font-sans
+            ${hasContent ? 'group cursor-pointer' : ''}
+          `}
+        onClick={handleToggle}
+      >
+        <span className={`text-xl pr-2.5 font-medium`}>{label}</span>
+        {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
+      </button>
+      {hasContent ? (
+        <AccordionItemInner isExpanded={isActive} blocks={blocks} context={context} />
+      ) : null}
+    </li>
+  );
+});

package/src/components/Accordion/AccordionItemInner.mobile.tsx

@@ -2,14 +2,11 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { AccordionItemProps } from './AccordionItem';
 import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
 
-export const AccordionItemInner = JSX<AccordionItemProps>(
-  ({ blocks, context, version = 'primary' }) => {
-    const className = 'mb-5 last:mb-0 first:mt-2';
-    const columns = 1;
-    return (
-      <div className="transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0">
-        {renderBlocksList({ context, className, columns, blocks, version })}
-      </div>
-    );
-  },
-);
+export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, context }) => {
+  const className = 'mb-5 last:mb-0 first:mt-2';
+  return (
+    <div className="transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0">
+      {renderBlocksList({ context, className, blocks })}
+    </div>
+  );
+});

package/src/components/Accordion/AccordionItemInner.tsx

@@ -2,13 +2,11 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { AccordionItemProps } from './AccordionItem';
 import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
 
-export const AccordionItemInner = JSX<AccordionItemProps>(
-  ({ blocks, columns = 1, context, version = 'primary' }) => {
-    const className = 'mb-5 last:mb-0 pb-5';
-    return (
-      <div className="transition-all duration-300 max-h-0 overflow-hidden">
-        {renderBlocksList({ context, className, columns, blocks, version })}
-      </div>
-    );
-  },
-);
+export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, context }) => {
+  const className = 'mb-5 last:mb-0 pb-5';
+  return (
+    <div className="transition-all duration-300 max-h-0 overflow-hidden">
+      {renderBlocksList({ context, className, blocks })}
+    </div>
+  );
+});

package/src/components/Footer/MediaButton.tsx

@@ -32,7 +32,7 @@ export const MediaButton = JSX<MediaButtonProps>(({ href }) => {
 
   return (
     <a
-      className="flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[38px] h-[38px] hover:text-primary-main"
+      className="flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[40px] h-[40px] box-border hover:text-primary-main"
       href={href}
       aria-label={label}
       target="_blank"

package/src/components/Header/Header.example.json

@@ -0,0 +1,3 @@
+{
+  "defaultLocation": "Москва"
+}

package/src/components/Header/Header.tsx

@@ -20,7 +20,14 @@ const BORDER_COLORS: Record<BgColorVersion, string> = {
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
 export const Header = JSX<HeaderProps>(
-  ({ className, defaultLocation, bgColor = 'bg-white', context, topItems, anchor = null }) => {
+  ({
+    className,
+    defaultLocation = 'Москва',
+    bgColor = 'bg-white',
+    context,
+    topItems,
+    anchor = null,
+  }) => {
     const router = context.useRouter();
     const sitemap = useSitemap(context.useAsyncData);
     const { handlerDecorator } = context;

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -33,13 +33,13 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
               <Heading
                 headingType={getTileHeadingType(className)}
                 title={title}
-                className={`whitespace-pre-wrap max-w-[600px]`}
+                className={`whitespace-pre-wrap max-w-[600px] mb-7`}
               />
             )
           }
           buttons={
             buttons?.length ? (
-              <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
+              <ButtonSection context={context} buttons={buttons} className="flex mt-7 gap-4" />
             ) : null
           }
         >
@@ -56,7 +56,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
                 />
               </a>
             )}
-            <span className="font-normal text-sm text-secondary-text ml-4">
+            <span className="font-light text-secondary-text ml-4">
               Наведите камеру телефона на QR-код и скачайте приложение
             </span>
           </div>

package/src/components/OtherProducts/OtherProducts.fixture.tsx

@@ -3,13 +3,24 @@ import { PRODUCT_BLOCK } from '../ProductBlock/ProductBlock.fixture';
 import { PRODUCT_TILE, PRODUCT_PENSION_TILE } from '../ProductTile/ProductTile.fixture';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
 import { TILE, TILE_PREMIUM } from '../Tile/Tile.fixture';
-import type { OtherProductsProps } from './OtherProducts';
+import { HEADLINE } from '../Headline/Headline.fixture';
+import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
+import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
+import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
+import { defaultProps as MINI_GALLERY } from '../MiniGallery/MiniGallery.fixture';
 import { OtherProducts } from './OtherProducts';
+import type { OtherProductsProps } from './OtherProducts';
+
 import type {
   ProductBlockBlockListDef,
   ProductTileBlockListDef,
   TextBlockBlockListDef,
   TileBlockListDef,
+  GalleryBlockListDef,
+  HeadlineBlockListDef,
+  LinkDocsBlockListDef,
+  MiniGalleryBlockListDef,
+  PictureTextBlockListDef,
 } from '../../ui-kit/BlocksList/BlocksListProps';
 
 const TEXT_BLOCK_OTHER_BLOCK: TextBlockBlockListDef = {
@@ -42,11 +53,36 @@ const PRODUCT_PENSION_TILES__OTHER_BLOCK: ProductTileBlockListDef = {
   ...PRODUCT_PENSION_TILE,
 };
 
+const HEADLINE_OTHER_BLOCK: HeadlineBlockListDef = {
+  blockListType: 'Headline',
+  ...HEADLINE,
+};
+
+const PICTURE_TEXT_OTHER_BLOCK: PictureTextBlockListDef = {
+  blockListType: 'PictureText',
+  ...PICTURE_TEXT,
+};
+
+const LINK_DOCS_OTHER_BLOCK: LinkDocsBlockListDef = {
+  blockListType: 'LinkDocs',
+  ...linkDocsContentExample,
+};
+
+const GALLERY_OTHER_BLOCK: GalleryBlockListDef = {
+  blockListType: 'Gallery',
+  ...GALLERY,
+};
+
+const MINI_GALLERY_OTHER_BLOCK: MiniGalleryBlockListDef = {
+  blockListType: 'MiniGallery',
+  ...MINI_GALLERY,
+};
+
 const propsBlock: OtherProductsProps = {
   context,
   blockItems: [
     {
-      label: 'Другие кредитные карты Россельхозбанка 1',
+      label: 'OtherProducts №1 Tiles',
       blocks: [
         TILES_PREMIUM_OTHER_BLOCK,
         TILES_PREMIUM_OTHER_BLOCK,
@@ -55,7 +91,7 @@ const propsBlock: OtherProductsProps = {
       ],
     },
     {
-      label: 'Другие кредитные карты Россельхозбанка 2',
+      label: 'OtherProducts №2 Product_Tiles',
       blocks: [
         PRODUCT_TILES_OTHER_BLOCK,
         PRODUCT_TILES_OTHER_BLOCK,
@@ -64,12 +100,11 @@ const propsBlock: OtherProductsProps = {
       ],
     },
     {
-      label: 'Другие кредитные карты Россельхозбанка 3',
+      label: 'OtherProducts №3 Product_Block',
       blocks: [PRODUCT_BLOCK_OTHER_BLOCK, PRODUCT_BLOCK_OTHER_BLOCK],
     },
-
     {
-      label: 'Другие кредитные карты Россельхозбанка 4',
+      label: 'OtherProducts №4 Text_Block',
       blocks: [
         TEXT_BLOCK_OTHER_BLOCK,
         TEXT_BLOCK_OTHER_BLOCK,
@@ -77,6 +112,26 @@ const propsBlock: OtherProductsProps = {
         TEXT_BLOCK_OTHER_BLOCK,
       ],
     },
+    {
+      label: 'OtherProducts №5 Picture_Text',
+      blocks: [PICTURE_TEXT_OTHER_BLOCK],
+    },
+    {
+      label: 'OtherProducts №6 Headline',
+      blocks: [HEADLINE_OTHER_BLOCK],
+    },
+    {
+      label: 'OtherProducts №7 Link_Docs',
+      blocks: [LINK_DOCS_OTHER_BLOCK],
+    },
+    {
+      label: 'OtherProducts №8 Gallery',
+      blocks: [GALLERY_OTHER_BLOCK],
+    },
+    {
+      label: 'OtherProducts №9 Mini_Gallery',
+      blocks: [MINI_GALLERY_OTHER_BLOCK],
+    },
   ],
 };
 

package/src/components/OtherProducts/OtherProductsContent.ts

@@ -15,11 +15,6 @@ export interface blockItemCommonProps {
   isExpanded?: boolean;
   /** @title Блоки */
   blocks?: BlockDef[];
-  /**
-   * @title Отображать/скрывать обводку элемента
-   * @default false
-   */
-  bordered?: boolean; // TODO: только для мобильной версии
   columns?: ColumnsCount;
 }
 
@@ -29,13 +24,9 @@ export interface blockItemCommonProps {
 export interface OtherProductsContent {
   /** @title Заголовок */
   title?: string;
-  /** @title Список */
-  blockItems?: blockItemCommonProps[];
-  /** @title Подзаголовок */
-  description?: string; // TODO: только для мобильной версии
   /**
-   * @title Отображать/скрывать обводку у элемента списка
-   * @default false
+   * @title Список
+   * @maxItems 10
    */
-  bordered?: boolean; // TODO: только для мобильной версии
+  blockItems?: blockItemCommonProps[];
 }

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

@@ -7,6 +7,8 @@
       "width": 300
     }
   },
+  "version": "primary",
+  "directionRight": false,
   "benefits": [
     {
       "label": "Преимущество №1",

package/src/components/PictureText/PictureText.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import type { PictureTextContent } from './PictureTextContent';
 
+import { BlockVersion } from '../../model/BlockVersion';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
@@ -9,18 +10,33 @@ import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
+const pictureTextStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
+
 export const PictureText = JSX<PictureTextProps>(
-  ({ className = '', title, image, benefits, anchor = null }) => {
+  ({
+    className = '',
+    title,
+    image,
+    benefits,
+    version = 'primary',
+    directionRight = false,
+    anchor = null,
+  }) => {
     return (
       <section
-        className={`relative font-sans text-primary-text bg-white p-14 ${className}`}
+        className={`relative font-sans p-14 ${pictureTextStyleMap[version]} ${className}`}
         id={anchor}
       >
         <Heading headingType="h2" className="text-center" title={title} />
         <div className={'flex justify-center mt-9'}>
-          {image?.src && <Img className="mr-6" image={image} />}
+          {image?.src && <Img className={directionRight ? 'order-2 ml-6' : 'mr-6'} image={image} />}
           {benefits?.length ? (
-            <div className="flex flex-col">{benefits.map(renderBenefit)}</div>
+            <div className="flex flex-col">
+              {benefits.map((_, i) => renderBenefit(_, i, version))}
+            </div>
           ) : null}
         </div>
       </section>
@@ -28,7 +44,7 @@ export const PictureText = JSX<PictureTextProps>(
   },
 );
 
-function renderBenefit(benefit: Benefit, i: number) {
+function renderBenefit(benefit: Benefit, i: number, version: string) {
   return (
     <div key={String(i)} className="flex flex-row mb-8">
       {benefit.icon && (
@@ -42,10 +58,20 @@ function renderBenefit(benefit: Benefit, i: number) {
       )}
       <div className="flex gap-1 flex-col h-full ml-5 max-w-[490px]">
         {benefit.label && (
-          <div className="font-medium text-primary-text text-xl m-0">{benefit.label}</div>
+          <div
+            className={`font-medium text-xl m-0 ${
+              version === 'primary' ? 'text-primary-text' : ''
+            }`}
+          >
+            {benefit.label}
+          </div>
         )}
         {benefit.description && (
-          <div className="font-normal text-sm text-secondary-text">{benefit.description}</div>
+          <div
+            className={`font-normal text-sm ${version === 'primary' ? 'text-secondary-text' : ''}`}
+          >
+            {benefit.description}
+          </div>
         )}
       </div>
     </div>

package/src/components/PictureText/PictureTextContent.ts

@@ -1,3 +1,4 @@
+import { BlockVersion } from '../../model/BlockVersion';
 import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
@@ -8,6 +9,12 @@ export type TitleWithImageContent = HeadingContent & ImageContent;
  * @title Картинка с текстом
  */
 export interface PictureTextContent extends TitleWithImageContent {
+  version?: BlockVersion;
   /** @title Список преимуществ */
   benefits?: Benefit[];
+  /**
+   * @title Картинка справа/текст слева
+   * @default false
+   */
+  directionRight?: boolean;
 }

package/src/components/ProductGalleryGreen/ProductGalleryGreen.example.json

@@ -10,7 +10,8 @@
         "image": {
           "format": "webp",
           "size": {
-            "width": 280
+            "width": 608,
+            "height": 299
           }
         },
         "version": "primary",

package/src/components/ProductGalleryGreen/ProductGalleryGreen.fixture.tsx

@@ -38,6 +38,15 @@ const items = [
   'Кредитный лимит до 5 млн рублей',
 ];
 const buttons: ButtonWithIconProps[] = [
+  {
+    href: 'https://rshb.ru',
+    text: 'Подробнее',
+    target: '_blank',
+    version: 'primary',
+  },
+];
+
+const buttonsSecondary: ButtonWithIconProps[] = [
   {
     href: 'https://rshb.ru',
     text: 'Подробнее',
@@ -60,7 +69,6 @@ export default {
             },
             productBlock: {
               title: 'Кредит по одному документу',
-              // description: 'Кредит наличными без залога и поручительства, только по паспорту',
               headingType: 'h2',
               items,
               buttons,
@@ -111,4 +119,69 @@ export default {
       />
     </div>
   ),
+  primary: (
+    <div className="container grid grid-cols-12">
+      <ProductGalleryGreen
+        className="col-span-12"
+        context={context}
+        version={'secondary'}
+        slides={[
+          {
+            nav: {
+              title: 'Кредит по одному документу',
+              description: 'Ставка от 5,5% годовых',
+            },
+            productBlock: {
+              title: 'Кредит по одному документу',
+              // description: 'Кредит наличными без залога и поручительства, только по паспорту',
+              headingType: 'h2',
+              items,
+              buttons: buttonsSecondary,
+              image: percentImage,
+              backgroundText: '3,6',
+            },
+          },
+          {
+            nav: {
+              title: 'Для людей в возрасте',
+              description: 'Ставка до 7% годовых',
+            },
+            productBlock: {
+              title: 'Ставка от 12,5% годовых на срок до 3 лет!',
+              headingType: 'h2',
+              items,
+              buttons: buttonsSecondary,
+              image: worker,
+            },
+          },
+          {
+            nav: {
+              title: 'Выгодно покупать',
+              description: 'Ставка от 5% годовых',
+            },
+            productBlock: {
+              title: 'Дополнительные бонусные баллы за покупки!',
+              headingType: 'h2',
+              items,
+              buttons: buttonsSecondary,
+              image: creditCard,
+            },
+          },
+          {
+            nav: {
+              title: 'Карты Unionpay',
+              description: '120 дней льготный период',
+            },
+            productBlock: {
+              title: 'Карты Unionpay',
+              headingType: 'h2',
+              items,
+              buttons: buttonsSecondary,
+              image: creditCard,
+            },
+          },
+        ]}
+      />
+    </div>
+  ),
 };

package/src/components/ProductGalleryGreen/ProductGalleryGreen.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
+import type { BlockVersion } from '../../model/BlockVersion';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
@@ -7,23 +8,39 @@ import type { ProductGalleryGreenContent } from './ProductGalleryGreenContent';
 
 export interface ProductGalleryProps extends ProductGalleryGreenContent, UniBlockProps {}
 
+const productGalleryGreenStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
+
+const productBlockStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-secondary-text',
+  secondary: 'text-white/80',
+};
+
+const productSlideStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
+
 export const ProductGalleryGreen = JSX<ProductGalleryProps>(
-  ({ className = '', context, slides = [], anchor = null }) => {
+  ({ className = '', context, slides = [], version = 'primary', duration = 0, anchor = null }) => {
     const galleryNav = slides.map((s) => s.nav);
     const galleryBlocks = slides.map((s) => s.productBlock);
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
 
     return (
       <section
-        className={`box-border pt-[70px] relative font-sans overflow-hidden bg-primary-main w-100 ${className}`}
         id={anchor}
+        className={`box-border pt-[70px] overflow-hidden relative font-sans w-100 ${className}
+        ${productGalleryGreenStyleMap[version]}`}
       >
         <div
           className="flex duration-1000 pb-14"
           style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
           role="list"
         >
-          {galleryBlocks.map((_, i) => renderProductBlock(_, i, context))}
+          {galleryBlocks.map((_, i) => renderProductBlock({ ..._, version }, i, context))}
         </div>
 
         <div className="flex items-center absolute bottom-6 left-0 right-0 px-9 box-border">
@@ -33,6 +50,8 @@ export const ProductGalleryGreen = JSX<ProductGalleryProps>(
               i,
               activeSlideIndex,
               onClick: () => setActiveSlideIndex(i),
+              version,
+              duration,
             }),
           )}
         </div>
@@ -42,6 +61,9 @@ export const ProductGalleryGreen = JSX<ProductGalleryProps>(
 );
 
 function renderProductBlock(block: ProductBlockInnerContent, i: number, context) {
+  const { version } = block;
+  const additionalClass = version ? productBlockStyleMap[version] : '';
+
   return (
     <section
       key={String(i)}
@@ -55,10 +77,9 @@ function renderProductBlock(block: ProductBlockInnerContent, i: number, context)
           </div>
         ) : null}
         <ProductBlockInner
-          className="pl-2.5 pt-2.5 pb-1.5 pr-[6.25rem] z-[1]"
+          className={`pl-2.5 pt-2.5 pb-1.5 pr-[6.25rem] z-[1] ${additionalClass}`}
           context={context}
           textBlockClassName="mb-[154px]"
-          version="secondary"
           {...block}
         />
         <Icon
@@ -72,32 +93,34 @@ function renderProductBlock(block: ProductBlockInnerContent, i: number, context)
   );
 }
 
-function renderNavButton({ slide, i, activeSlideIndex, onClick }) {
+function renderNavButton({ slide, i, activeSlideIndex, onClick, version, duration }) {
   const isActiveBtn = i === activeSlideIndex;
   const btnClassName = isActiveBtn
-    ? 'bg-white shadow-dark-blue/42 h-[102px] w-[354px] min-w-[354px] max-w-[354px] p-0'
-    : 'bg-white/10 min-w-[277px] px-0 pt-4 pb-[23px] hover:pt-[21px] hover:pb-7 ease-in duration-300';
-  const btnTitleClassName = isActiveBtn
-    ? 'text-[18px] text-primary-text pb-[10px]'
-    : 'text-m-base text-white pb-[3px]';
-  const btnDescClassName = isActiveBtn
-    ? 'text-[18px] text-secondary-text'
-    : 'text-m-base text-white';
-
+    ? 'bg-white shadow-dark-blue/42 h-[102px] w-[354px] min-w-[354px] max-w-[354px] p-0 border-none'
+    : `min-w-[277px] px-0 pt-4 pb-[23px] hover:py-[26px] hover:py-[26px] ease-in duration-300 
+      ${productSlideStyleMap[version]}`;
+  const btnTitleClassName = isActiveBtn ? 'text-primary-text' : productBlockStyleMap[version];
+  const btnDescClassName = isActiveBtn ? 'text-secondary-text' : productBlockStyleMap[version];
+  const additionalBorder = version === 'secondary' ? 'border-white/50' : '';
+  const progressBarClassName = isActiveBtn ? 'animate-slide' : '';
   return (
     <button
       type="button"
       key={String(i)}
       onClick={onClick}
       aria-label={slide?.title}
-      className={`box-border font-sans group relative overflow-hidden border-white/50 border-[1px] cursor-pointer text-left mb-6a mx-1 grow basis-0 backdrop-blur-sm
-        ${btnClassName}
+      className={`box-border font-sans group relative overflow-hidden border-[1px] cursor-pointer text-left mx-1 grow basis-0 backdrop-blur-sm
+      ${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>
+      <div
+        className={`absolute bottom-0 left-0 w-full h-[3px] bg-primary-main -translate-x-full ${progressBarClassName}`}
+        style={{ animationDuration: `${duration}s`, animationFillMode: 'forwards' }}
+      ></div>
     </button>
   );
 }