@redneckz/wildless-cms-uni-blocks 0.6.33 → 0.6.35

package/mobile/src/components/Calculator/Calculator.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCarouselControls } from '../../hooks/useCarouselControls';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
@@ -9,19 +10,19 @@ import { renderCalculatorBlock } from './renderCalculatorBlock';
 
 export interface CalculatorProps extends CalculatorContent, UniBlockProps {}
 
-type TabsProps = {
-  tabsShift: number;
+interface TabsProps {
+  activeIndex: number;
   tabsNav: CalculatorNav[];
-  activeSlideIndex: number;
-  setActiveSlideIndex: (index: number) => void;
-};
+  slideIndexShift: number;
+  onClick: (index: number) => void;
+}
 
-type NavButtonProps = {
+interface NavButtonProps {
   tab: CalculatorNav;
   i: number;
-  activeSlideIndex: number;
+  isActive: boolean;
   onClick: () => void;
-};
+}
 
 export const Calculator = JSX<CalculatorProps>(
   ({ className = '', calculatorTabs = [], ...rest }) => {
@@ -29,15 +30,14 @@ export const Calculator = JSX<CalculatorProps>(
     const calculatorBlocks = calculatorTabs.map(
       ({ calculatorBlock }) => calculatorBlock || ({} as CalculatorBlockDef),
     );
-    const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-    const [tabsShift, setTabsShift] = useState(0);
-
-    const handleNextClick = () => setTabsShift(tabsShift + 1);
-    const handlePrevClick = () => setTabsShift(tabsShift - 1);
+    const [slideIndexShift, setSlideIndexShift] = useState(0);
+    const handleSlideIndexShift = useCallback((_: number) => setSlideIndexShift(_), []);
+    const COLUMNS_FOR_SCROLL = 3;
 
-    const isGalleryScrollAvailable = calculatorTabs?.length > 3;
-    const showNextButton = isGalleryScrollAvailable && calculatorTabs?.length > tabsShift + 3;
-    const showPrevButton = tabsShift > 0;
+    const [activeIndex, controls] = useCarouselControls({
+      itemCount: calculatorTabs?.length,
+      visibleItemCount: COLUMNS_FOR_SCROLL,
+    });
 
     return (
       <BlockWrapper
@@ -46,18 +46,17 @@ export const Calculator = JSX<CalculatorProps>(
       >
         <div className="bg-white">
           {tabsNav.length > 1
-            ? renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex })
+            ? renderTabs({ activeIndex, tabsNav, slideIndexShift, onClick: handleSlideIndexShift })
             : null}
           {renderArrows({
-            handler: [handlePrevClick, handleNextClick],
-            isShown: [showPrevButton, showNextButton],
+            ...controls,
             btnClass: ['left-3', 'right-3'],
             className: 'top-8',
           })}
         </div>
         <div
           className="flex"
-          style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
+          style={{ transform: `translateX(-${slideIndexShift}00%)` }}
           role="list"
         >
           {calculatorBlocks?.length ? calculatorBlocks.map(renderCalculatorBlock) : null}
@@ -67,19 +66,17 @@ export const Calculator = JSX<CalculatorProps>(
   },
 );
 
-function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps) {
-  const isActiveBtn = i === activeSlideIndex;
-
-  const btnClassName = isActiveBtn
+function renderNavButton({ tab, i, isActive, onClick }: NavButtonProps) {
+  const btnClassName = isActive
     ? 'h-[88px] w-[387px] min-w-[387px] p-5 border-none bg-primary-main text-white'
     : `h-[77px] w-[328px] min-w-[328px] px-5 py-4 ease-in duration-300 bg-white text-primary-text`;
-  const btnTitleClassName = isActiveBtn ? 'text-xl mb-1.5' : `text-l mb-[3px]`;
-  const btnDescClassName = isActiveBtn
+  const btnTitleClassName = isActive ? 'text-xl mb-1.5' : `text-l mb-[3px]`;
+  const btnDescClassName = isActive
     ? 'text-l-light text-white'
     : `text-m-light text-secondary-text`;
-  const iconClassName = isActiveBtn ? '' : `text-primary-main`;
+  const iconClassName = isActive ? '' : `text-primary-main`;
   const iconVersion = tab?.icon?.iconVersion;
-  const activeIconStyle = isActiveBtn ? 'white' : 'normal';
+  const activeIconStyle = isActive ? 'white' : 'normal';
 
   return (
     <button
@@ -108,11 +105,13 @@ function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps)
   );
 }
 
-function renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex }: TabsProps) {
+function renderTabs({ activeIndex, tabsNav, slideIndexShift, onClick }: TabsProps) {
+  const CARD_SHIFT = 388;
+
   return (
     <div>
       <div
-        style={{ transform: `translateX(-${tabsShift * 388}px)` }}
+        style={{ transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }}
         className="flex flex-col justify-end items-center h-[126px] pt-9 box-border duration-1000"
       >
         <div className="w-full flex flex-nowrap items-end gap-2">
@@ -120,8 +119,8 @@ function renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex
             renderNavButton({
               tab,
               i,
-              activeSlideIndex,
-              onClick: () => setActiveSlideIndex(i),
+              isActive: Boolean(i === slideIndexShift),
+              onClick: () => onClick(i),
             }),
           )}
         </div>

package/mobile/src/components/Calculator/CalculatorValueBlock.tsx

@@ -10,16 +10,14 @@ export interface CalculatorValueBlockProps {
 }
 
 export const CalculatorValueBlock = JSX<CalculatorValueBlockProps>(
-  ({ title, value, postfix = '', prefix, className = '' }) => {
-    return (
-      <div className={`mb-7 ${className}`}>
-        {title ? <div className="text-l-light text-secondary-text">{title}</div> : null}
-        {value ? (
-          <div className="text-h3">
-            {prefix} {addSpacesBetweenNumbers(Math.round(value))} {postfix}
-          </div>
-        ) : null}
-      </div>
-    );
-  },
+  ({ title, value, postfix = '', prefix, className = '' }) => (
+    <div className={`mb-7 ${className}`}>
+      {title ? <div className="text-l-light text-secondary-text">{title}</div> : null}
+      {value ? (
+        <div className="text-h3">
+          {prefix} {addSpacesBetweenNumbers(Math.round(value))} {postfix}
+        </div>
+      ) : null}
+    </div>
+  ),
 );

package/mobile/src/components/Calculator/DepositCalculatorForm.tsx

@@ -5,19 +5,13 @@ import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
 import { CommonCalculatorProps, DepositCalculatorParams } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
-import {
-  DEFAULT_MAX_MONTHS,
-  DEFAULT_MAX_SUM,
-  DEFAULT_MIN_MONTHS,
-  DEFAULT_MIN_SUM,
-  DEFAULT_MONTHS,
-  DEFAULT_SUM,
-} from './constants';
+import { DEFAULT_MONTHS, DEFAULT_SUM } from './constants';
 import { Rate } from './Rate';
 import { renderButtonSection } from './renderButtonSection';
 import { renderFootnote } from './renderFootnote';
 import { renderMonthsInput } from './renderMonthsInput';
 import { renderWantedSumInput } from './renderWantedSumInput';
+import { useDepositCalculatorParams } from './useDepositCalculatorParams';
 
 export interface DepositCalculatorProp extends DepositCalculatorParams, CommonCalculatorProps {
   className?: string;
@@ -38,13 +32,18 @@ const depositTypeItems = [
 ];
 
 export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
-  ({ className = '', rate, buttons, footnote }) => {
+  ({ className = '', sourceBookDir, buttons, footnote }) => {
     const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
     const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
-    const [isEveryMonth, toggleIsEveryMonth] = useState(false);
+    const [isMonthlyInterestPayment, toggleIsMonthlyInterestPayment] = useState(false);
+    const userInputParams = {
+      moneyValue,
+      monthsValue,
+      isMonthlyInterestPayment,
+    };
 
-    const income = 948841;
-    const finallySum = 1218841;
+    const calculatorParams = useDepositCalculatorParams(userInputParams, sourceBookDir);
+    const { income, finalSum, rate } = calculatorParams;
 
     return (
       <section className={className}>
@@ -52,18 +51,14 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
           {renderWantedSumInput(
             'Сумма вклада, ₽',
             {
-              moneyValue,
-              minSum: DEFAULT_MIN_SUM,
-              maxSum: DEFAULT_MAX_SUM,
+              ...calculatorParams,
             },
             setMoneyValue,
           )}
           {renderMonthsInput(
             'Срок вклада, месяцев',
             {
-              minMonths: DEFAULT_MIN_MONTHS,
-              maxMonths: DEFAULT_MAX_MONTHS,
-              monthsValue,
+              ...calculatorParams,
             },
             setMonthsValue,
           )}
@@ -73,13 +68,13 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
           {income ? (
             <CalculatorValueBlock title="Доход по вкладу" value={income} postfix="₽" prefix="+" />
           ) : null}
-          {finallySum ? (
-            <CalculatorValueBlock title="Сумма в конце срока" value={finallySum} postfix="₽" />
+          {finalSum ? (
+            <CalculatorValueBlock title="Сумма в конце срока" value={finalSum} postfix="₽" />
           ) : null}
           <RadioButtonGroup
             items={depositTypeItems}
-            checkedItem={isEveryMonth ? EVERY_MONTH : AT_END_TERM}
-            onChange={(text: string) => toggleIsEveryMonth(text === EVERY_MONTH)}
+            checkedItem={isMonthlyInterestPayment ? EVERY_MONTH : AT_END_TERM}
+            onChange={(text: string) => toggleIsMonthlyInterestPayment(text === EVERY_MONTH)}
           />
           {renderButtonSection(buttons)}
           {renderFootnote(footnote)}

package/mobile/src/components/Calculator/constants.ts

@@ -1,5 +1,6 @@
 import { BonusCalculatorSourceBookParams } from './useBonusCalculatorParams';
 import { CreditCalculatorSourceBookParams } from './useCreditCalculatorParams';
+import { DepositCalculatorSourceBookParams } from './useDepositCalculatorParams';
 
 export const DEFAULT_MIN_SUM = 60000;
 export const DEFAULT_MAX_SUM = 2000000;
@@ -41,5 +42,15 @@ export const DEFAULT_BONUS_CALCULATOR_PARAMS: BonusCalculatorSourceBookParams =
   restBonusRate: 0.01,
 };
 
+export const DEFAULT_DEPOSIT_CALCULATOR_PARAMS: DepositCalculatorSourceBookParams = {
+  minSum: 50000,
+  maxSum: 5000000,
+  minMonths: 2,
+  maxMonths: 120,
+  rate: 5.9,
+  isMonthlyInterestPayment: true,
+};
+
 export const CREDIT_CALC_DEFAULT_DIR = 'credit-calculator-data';
 export const BONUS_CALC_DEFAULT_DIR = 'bonus-calculator-data';
+export const DEPOSIT_CALC_DEFAULT_DIR = 'deposit-calculator-data';

package/mobile/src/components/Calculator/useDepositCalculatorParams.ts

@@ -0,0 +1,64 @@
+import { DEFAULT_DEPOSIT_CALCULATOR_PARAMS, DEPOSIT_CALC_DEFAULT_DIR } from './constants';
+import { useCalculatorParams } from './useCalculatorParams';
+
+export interface CommonDepositParams {
+  isMonthlyInterestPayment: boolean;
+}
+export interface DepositCalculatorSourceBookParams extends CommonDepositParams {
+  minSum: number;
+  maxSum: number;
+  minMonths: number;
+  maxMonths: number;
+  rate: number;
+}
+
+export interface DepositCalculatorUserInputParams extends CommonDepositParams {
+  moneyValue: number;
+  monthsValue: number;
+}
+
+export interface DepositCalculatorParams
+  extends DepositCalculatorSourceBookParams,
+    DepositCalculatorUserInputParams {
+  income: number;
+  finalSum: number;
+}
+
+export type DepositCalculatorData = {
+  rows: DepositCalculatorSourceBookParams[];
+};
+
+export const useDepositCalculatorParams = (
+  userInputParams: DepositCalculatorUserInputParams,
+  sourceBookDir?: string,
+): DepositCalculatorParams => {
+  const { isMonthlyInterestPayment, moneyValue } = userInputParams;
+
+  const data = useCalculatorParams<DepositCalculatorData>(
+    sourceBookDir || DEPOSIT_CALC_DEFAULT_DIR,
+  );
+
+  const depositCalculatorSourceBookParams =
+    data?.rows.find((_) => isMonthlyInterestPayment === _.isMonthlyInterestPayment) ||
+    DEFAULT_DEPOSIT_CALCULATOR_PARAMS;
+
+  const { rate } = depositCalculatorSourceBookParams;
+
+  const income = getDepositIncome(rate, userInputParams);
+  const finalSum = moneyValue + income;
+
+  return { ...depositCalculatorSourceBookParams, ...userInputParams, income, finalSum };
+};
+
+const getDepositIncome = (rate: number, userInputParams: DepositCalculatorUserInputParams) => {
+  const { isMonthlyInterestPayment, moneyValue, monthsValue } = userInputParams;
+
+  if (isMonthlyInterestPayment) {
+    return Math.round(moneyValue * Math.pow((1200 + rate) / 1200, monthsValue) - moneyValue);
+  } else {
+    /*
+    Приблизительный расчёт, не учитывающий разницу в количестве дней в месяцах. Месяц принят за 30 дней, год за 365 дней.
+    */
+    return Math.round((moneyValue * rate * 30 * monthsValue) / 365 / 100);
+  }
+};

package/mobile/src/components/CardTransfer/CardTransfer.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -28,6 +28,7 @@ export const CardTransfer = JSX<CardTransferProps>(
     ...rest
   }) => {
     const [value, setValue] = useState<string>('');
+    const handleChange = useCallback((_: string) => setValue(_), []);
     const isDisabled = !Number(getSanitizedValue(value));
     const buttonStyle = isDisabled
       ? getDisabledButtonClasses({ version: button?.version })
@@ -45,7 +46,7 @@ export const CardTransfer = JSX<CardTransferProps>(
           <CurrencyInput
             name={AMOUNT_KEY}
             value={value}
-            onChange={setValue}
+            onChange={handleChange}
             valid={value === '' || !isDisabled}
             placeholder={placeholder}
             label={label}

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

@@ -1,6 +1,6 @@
 {
   "cardWidth": 1200,
   "isBlur": false,
-  "cardFullViewCount": 1,
+  "visibleItemCount": 1,
   "isCycle": false
-}
+}

package/mobile/src/components/Carousel/Carousel.tsx

@@ -1,4 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import { useCarouselControls } from '../../hooks/useCarouselControls';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -6,61 +8,48 @@ import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { CarouselContainer } from './CarouselContainer';
 import type { CarouselContent } from './CarouselContent';
 
-export interface CarouselProps extends CarouselContent, UniBlockProps {}
+export interface CarouselProps extends CarouselContent, UniBlockProps {
+  itemCount?: number;
+}
 
-export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
-  ({
-    cardFullViewCount = 1,
-    children,
-    cardWidth = '1007',
-    className = '',
-    isBlur = true,
-    isCyclic = false,
-    block,
-    ...rest
-  }) => {
-    const blurClasses = isBlur ? 'absolute top-0 bottom-0 w-[84px]' : '';
-    const { blocks: childBlocks } = block || {};
+const blurBaseStyle = 'absolute top-0 bottom-0 z-50 w-[84px]';
 
-    const childBlocksLength = childBlocks !== undefined ? childBlocks.length : 0;
+export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
+  ({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, ...rest }) => {
+    const { blocks: childBlocks } = rest.block || {};
+    const count = itemCount || childBlocks?.length || 0;
 
-    const isScrollAvailable = childBlocksLength > cardFullViewCount;
+    const containerRef = useRef<HTMLDivElement | null>(null);
 
     const [activeIndex, controls] = useCarouselControls({
-      itemsCount: childBlocksLength,
-      visibleItemCount: cardFullViewCount,
+      itemCount: count,
+      visibleItemCount,
       isCyclic,
+      container: containerRef.current,
     });
-    const { inc, dec, canDec, canInc } = controls;
+    const { isScrollAvailable } = controls;
 
     return (
-      <BlockWrapper
-        className={`box-border h-full relative font-sans flex flex-col justify-center overflow-hidden ${className}`}
-        {...rest}
-      >
+      <BlockWrapper className={`relative font-sans overflow-hidden ${className}`} {...rest}>
         <CarouselContainer
-          activeItem={activeIndex}
-          cardFullViewCount={cardFullViewCount}
-          cardWidth={cardWidth}
+          activeIndex={activeIndex}
+          itemCount={count}
+          visibleItemCount={visibleItemCount}
+          containerRef={containerRef}
         >
-          {children}
+          {renderChildren(rest)}
         </CarouselContainer>
-        {isScrollAvailable ? (
-          <div>
-            {renderArrows({
-              handler: [dec, inc],
-              isShown: [canDec, canInc],
-              btnClass: ['left-8', 'right-8'],
-              className: 'top-1/2 z-10',
-            })}
-          </div>
-        ) : null}
-        {isScrollAvailable ? (
+        {isScrollAvailable && isBlur ? (
           <div>
-            <div className={`${blurClasses} left-0 bg-opacity-from-white`} />
-            <div className={`${blurClasses} right-0 bg-opacity-to-white`} />
+            <div className={`${blurBaseStyle} left-0 bg-opacity-from-white`} />
+            <div className={`${blurBaseStyle} right-0 bg-opacity-to-white`} />
           </div>
         ) : null}
+        {renderArrows({
+          ...controls,
+          btnClass: ['left-8', 'right-8'],
+          className: 'top-1/2',
+        })}
       </BlockWrapper>
     );
   },

package/mobile/src/components/Carousel/CarouselContainer.tsx

@@ -1,24 +1,31 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { CardWidth } from './CarouselContent';
 
-export interface CarouselContainerProps {
-  activeItem: number;
-  cardFullViewCount: number;
-  cardWidth: CardWidth;
+interface CarouselContainerProps {
+  activeIndex: number;
+  itemCount: number;
+  visibleItemCount?: number;
+  containerRef?: { current: HTMLDivElement | null };
 }
 
+const childStyleMap = ['[&>*]:min-w-[100%]', '[&>*]:min-w-[50%]', '[&>*]:min-w-[33.33%]'];
+
 export const CarouselContainer = JSX<CarouselContainerProps>(
-  ({ children, activeItem, cardFullViewCount, cardWidth }) => {
-    const cardFullViewStyles =
-      cardFullViewCount === 1
-        ? `translateX(-${activeItem}00%)`
-        : `translateX(-${activeItem * Number(cardWidth)}px)`;
+  ({ activeIndex, itemCount, visibleItemCount, containerRef, children }) => {
+    const scrollWidth = containerRef?.current?.scrollWidth || 0;
+    const maxScrollLeft = scrollWidth - (containerRef?.current?.clientWidth || 0);
+
+    const translateX = visibleItemCount
+      ? `${-Math.round((100 * activeIndex) / visibleItemCount)}%`
+      : `${-Math.round(Math.min((scrollWidth * activeIndex) / (itemCount || 1), maxScrollLeft))}px`;
 
     return (
       <div
-        className="w-auto flex flex-1 duration-1000"
-        style={{ transform: `${cardFullViewStyles}` }}
+        className={`flex gap-1 duration-1000 ${
+          visibleItemCount ? childStyleMap[visibleItemCount - 1] : ''
+        }`}
+        style={{ transform: `translateX(${translateX})` }}
         role="list"
+        ref={containerRef}
       >
         {children}
       </div>

package/mobile/src/components/Carousel/CarouselContent.ts

@@ -1,16 +1,12 @@
 /**
  * @title Карусель
  */
-
-/**
- * @title Ширина карточек
- * @enumNames [ "1007", "833", "350", "322" ]
- */
-export type CardWidth = '322' | '350' | '832' | '1007';
 export interface CarouselContent {
-  /** @title Количество видимых карточек */
-  cardFullViewCount?: number;
-  cardWidth?: CardWidth;
+  /**
+   * @title Количество видимых карточек
+   * @enumNames ["auto", "1", "2", "3"]
+   */
+  visibleItemCount?: 0 | 1 | 2 | 3;
   /** @title Добавление  блюра */
   isBlur?: boolean;
   /** @title Цикличность */

package/mobile/src/components/CarouselCard/CarouselCard.tsx

@@ -5,45 +5,33 @@ import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { Headline } from '../Headline/Headline';
 import type { CarouselCardContent } from './CarouselCardContent';
 
-export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {
-  version?: CarouselCardVersion;
-}
+export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {}
 
-const BLOCK_CLASSES = 'absolute border border-solid border-main-stroke w-[100%] h-[100%]';
-
-const CARD_STYLE_MAP: Record<CarouselCardVersion, string> = {
-  normal: 'min-w-[100%] justify-center items-center my-7 col-span-12',
-  mini: 'justify-center items-center mx-4 my-9 col-span-4',
-};
+const BLOCK_CLASSES = 'absolute border border-solid border-main-stroke w-full h-full';
 
 const CARD_WIDTH_MAP: Record<CarouselCardVersion, string> = {
-  normal: 'w-[1007px]',
-  mini: 'w-[350px]',
+  normal: `w-[${1007 + 48}px]`,
+  mini: `w-[${350 + 48}px]`,
 };
 
 export const CarouselCard = JSX<CarouselCardProps>(
-  ({ button, className = '', description, title, version = 'normal' }) => {
-    return (
-      <section className={`flex ${CARD_STYLE_MAP[version]}`}>
-        <div className={`relative ${CARD_WIDTH_MAP[version]}`}>
-          <div
-            className={`relative bg-white py-6 px-10 z-10
-              border border-solid border-green-light ${className}`}
-          >
-            <Headline
-              className="!p-0"
-              title={title}
-              description={description}
-              headlineVersion="M"
-              align="center"
-            />
-            {button ? renderButton({ button, buttonClassName: 'mt-6 w-[158px]' }) : null}
-          </div>
-          <div className={`top-9 right-12 bg-green-dark ${BLOCK_CLASSES}`} />
-          <div className={`top-6 right-8 bg-green ${BLOCK_CLASSES}`} />
-          <div className={`top-3 right-4 bg-green-light ${BLOCK_CLASSES}`} />
+  ({ className = '', button, description, title, version = 'normal' }) => (
+    <section className={`flex pb-9 pl-12 ${CARD_WIDTH_MAP[version]} ${className}`}>
+      <div className="relative w-full">
+        <div className={`${BLOCK_CLASSES} z-10 top-9 right-12 bg-green-dark`} />
+        <div className={`${BLOCK_CLASSES} z-10 top-6 right-8 bg-green`} />
+        <div className={`${BLOCK_CLASSES} z-10 top-3 right-4 bg-green-light`} />
+        <div className="relative bg-white z-10 py-6 px-10 border border-solid border-green-light">
+          <Headline
+            className="!p-0"
+            title={title}
+            description={description}
+            headlineVersion="M"
+            align="center"
+          />
+          {button ? <div className="mt-6">{renderButton({ button })}</div> : null}
         </div>
-      </section>
-    );
-  },
+      </div>
+    </section>
+  ),
 );