@redneckz/wildless-cms-uni-blocks 0.12.14 → 0.13.0

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

@@ -0,0 +1,114 @@
+import '../../setup-fixture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { Calculator } from './Calculator';
+
+const sendRequestButton: ButtonProps = {
+  href: 'https://rshb.ru',
+  text: 'Отправить заявку',
+  target: '_blank',
+  version: 'primary',
+};
+
+const detailsButton: ButtonProps = {
+  href: 'https://rshb.ru',
+  text: 'Подробные условия',
+  target: '_blank',
+  version: 'secondary',
+};
+
+export default {
+  default: (
+    <Calculator
+      calculatorTabs={[
+        {
+          nav: {
+            title: 'Кредит на любые цели',
+            description: 'Ставка от 5.5% до 5 лет',
+            icon: 'MoneyIcon',
+          },
+          calculatorBlock: {
+            calcType: 'CreditCalculatorForm',
+            paramsViewSettings: {
+              isShowSalaryClient: true,
+              isShowStateEmployee: true,
+              isShowInsurance: true,
+            },
+            buttons: [sendRequestButton],
+            footnote:
+              'Расчёт является предварительным. Точные условия будут предоставлены в отделении Банка.',
+          },
+        },
+        {
+          nav: {
+            title: 'Под залог недвижимости',
+            description: 'Ставка от 13.95% до 10 лет',
+            icon: 'BuildingIcon',
+          },
+          calculatorBlock: {
+            calcType: 'CreditCalculatorForm',
+            paramsViewSettings: {
+              isShowSalaryClient: true,
+              isShowStateEmployee: true,
+              isShowInsurance: true,
+            },
+            buttons: [sendRequestButton, detailsButton],
+            footnote:
+              'Расчёт является предварительным. Точные условия будут предоставлены в отделении Банка.',
+          },
+        },
+        {
+          nav: {
+            title: 'Пенсионный',
+            description: 'Ставка от 12.5% до 10 лет',
+            icon: 'UserSquareIcon',
+          },
+          calculatorBlock: {
+            calcType: 'CreditCalculatorForm',
+            paramsViewSettings: {
+              isShowSalaryClient: true,
+              isShowStateEmployee: true,
+              isShowInsurance: true,
+            },
+            buttons: [sendRequestButton, detailsButton],
+            footnote:
+              'Расчёт является предварительным. Точные условия будут предоставлены в отделении Банка.',
+          },
+        },
+      ]}
+    />
+  ),
+  deposit: (
+    <Calculator
+      calculatorTabs={[
+        {
+          calculatorBlock: {
+            calcType: 'DepositCalculatorForm',
+            paramsViewSettings: {
+              isShowMonthlyInterestPayment: true,
+              isShowRemoteRegistration: true,
+            },
+            buttons: [sendRequestButton, detailsButton],
+            footnote:
+              'Расчёт является предварительным. Точные условия будут предоставлены в отделении Банка.',
+          },
+        },
+      ]}
+    />
+  ),
+  business: (
+    <Calculator
+      calculatorTabs={[
+        {
+          calculatorBlock: {
+            calcType: 'BusinessDepositCalculatorForm',
+            buttons: [sendRequestButton],
+            footnote:
+              'Расчёт является предварительным. Точные условия будут предоставлены в отделении Банка.',
+            bottomFootnote:
+              'При сумме свыше 500 000 000 ₽ вы можете обратится в офис за индивидуальными условиями по вкладу',
+          },
+        },
+      ]}
+    />
+  ),
+};

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

@@ -0,0 +1,85 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Text } from '../../ui-kit/Text/Text';
+import type { CalculatorContent, CalculatorTab } from './CalculatorContent';
+import { EmbeddableCalcBlocks } from './EmbeddableCalcBlocks';
+
+export interface CalculatorProps extends CalculatorContent, UniBlockProps {}
+
+export const Calculator = JSX<CalculatorProps>(({ className, calculatorTabs = [] }) => (
+  <BlockWrapper className={className} defaultPadding="p-0">
+    {renderTabs(calculatorTabs)}
+  </BlockWrapper>
+));
+
+const renderCalculator = (tab: CalculatorTab) => {
+  const type = tab.calculatorBlock?.calcType;
+
+  if (!type || !(type in EmbeddableCalcBlocks)) {
+    return null;
+  }
+
+  const EmbeddedBlock = EmbeddableCalcBlocks[type];
+
+  return <EmbeddedBlock {...tab.calculatorBlock} isMobile />;
+};
+
+const renderTabs = (tabs: CalculatorTab[]) => {
+  if (!tabs || !tabs.length) {
+    return null;
+  }
+
+  const isSingleTab = tabs.length === 1;
+
+  if (isSingleTab) {
+    return <BlockWrapper>{renderCalculator(tabs[0])}</BlockWrapper>;
+  }
+
+  return tabs.map((tab, index) => (
+    <Foldable
+      key={index.toString()}
+      isFoldButtonOnTop
+      unfoldedByDefault={index === 0}
+      renderFoldableSection={({ isUnfolded }) => (
+        <FoldableSection isUnfolded={isUnfolded}>
+          <BlockWrapper>{renderCalculator(tab)}</BlockWrapper>
+        </FoldableSection>
+      )}
+      renderFoldButton={renderFoldButton(tab)}
+    />
+  ));
+};
+
+const renderFoldButton =
+  (tab: CalculatorTab) =>
+  ({ isUnfolded, onToggle }: FoldablePartProps) => {
+    return (
+      <button
+        onClick={onToggle}
+        className="w-full p-xl bg-green flex items-center border-b border-white"
+      >
+        <div className="w-11 h-11 bg-white rounded-md flex justify-center items-center">
+          <Icon name={tab.nav?.icon?.icon} iconVersion="color" width="24" height="24" />
+        </div>
+        <div className="flex-1 flex flex-col pl-s">
+          <Text align="text-left" color="text-white">
+            {tab.nav?.title}
+          </Text>
+          <Text align="text-left" size="text-s" color="text-white" font="font-light">
+            {tab.nav?.description}
+          </Text>
+        </div>
+        <Icon
+          name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
+          iconVersion="white"
+          width="24"
+          height="24"
+        />
+      </button>
+    );
+  };

package/src/components/Calculator/CalculatorValueBlock.tsx

@@ -3,6 +3,8 @@ import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
 
+const calculatorValueBlockStyle = 'flex justify-between md:mb-7 md:flex-col';
+
 export interface CalculatorValueBlockProps {
   title?: string;
   value?: number;
@@ -13,7 +15,7 @@ export interface CalculatorValueBlockProps {
 
 export const CalculatorValueBlock = JSX<CalculatorValueBlockProps>(
   ({ title, value, postfix = '', prefix, className = '' }) => (
-    <div className={style('mb-7', className)}>
+    <div className={style(calculatorValueBlockStyle, className)}>
       {title ? (
         <Text size="text-l" font="font-light" color="text-secondary-text">
           {title}

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -1,28 +1,29 @@
 /* eslint-disable max-lines, max-lines-per-function */
 import { JSX } from '@redneckz/uni-jsx';
-import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { style } from '../../utils/style';
 import type {
   CreditCalculatorParamsViewSettings,
   CreditCalculatorProps,
 } from './CalculatorContent';
-import { CalculatorValueBlock } from './CalculatorValueBlock';
-import { CREDIT_DEFAULT_SUM, DEFAULT_MONTHS } from './constants';
-import { Rate } from './Rate';
 import { renderFootnote } from './renderFootnote';
-import { renderMonthsInput } from './renderMonthsInput';
-import { renderPaymentType } from './renderPaymentType';
 import { renderWantedSumInput } from './renderWantedSumInput';
+import { renderMonthsInput } from './renderMonthsInput';
+import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
+import { CREDIT_DEFAULT_SUM, DEFAULT_MONTHS } from './constants';
 import { CreditCalculatorParams, useCreditCalculatorParams } from './useCreditCalculatorParams';
+import { renderPaymentType } from './renderPaymentType';
+import { CalculatorValueBlock } from './CalculatorValueBlock';
+import { renderRate } from './renderRate';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 
 export interface CreditCalculatorProp extends CreditCalculatorProps {
   className?: string;
+  isMobile?: boolean;
 }
 
 export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
-  ({ className, sourceBookDir, buttons, footnote, paramsViewSettings }) => {
+  ({ className, sourceBookDir, buttons, footnote, paramsViewSettings, isMobile }) => {
     const [userInputParams, { field }] = useForm({
       isAnnuity: true,
       isInsurance: true,
@@ -39,9 +40,15 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
       paramsViewSettings,
     );
 
+    const paymentTypeElement = renderPaymentType({
+      title: isMobile ? 'Тип платежа' : '',
+      orientation: 'vertical',
+      ...field('isAnnuity'),
+    });
+
     return (
-      <section className={style('flex justify-between', className)}>
-        <div className="w-2/5">
+      <section className={style('flex flex-col justify-between sm:flex-row', className)}>
+        <div className="flex flex-col gap-y-m sm:w-2/5 sm:gap-y-lg">
           {renderWantedSumInput({
             title: 'Сумма кредита, ₽',
             step: 500,
@@ -57,23 +64,20 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
             ...field('monthsValue'),
             value: calculatorParams.monthsValue,
           })}
-          <div className="mt-2xl">
-            {renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
-          </div>
+          {renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
+          <div className="mt-s sm:hidden">{paymentTypeElement}</div>
         </div>
-        <Rate
-          title="Ставка"
-          rate={calculatorParams.rate}
-          rateBlockClassName="tracking-[-25px]"
-          unit="%"
-        />
-        <div className="w-96">
+        <div className="border-b border-main-divider mt-xl mb-3xl sm:hidden"></div>
+        {renderRate({
+          rate: calculatorParams.rate,
+        })}
+        <div className="mt-6xl flex flex-col gap-lg sm:w-96 sm:mt-0 sm:gap-0">
           <CalculatorValueBlock
-            title={'Ежемесячный платеж'}
+            title="Ежемесячный платеж"
             value={calculatorParams.monthlyPayment}
             postfix="₽"
           />
-          {renderPaymentType({ orientation: 'vertical', ...field('isAnnuity') })}
+          <div className="hidden sm:block">{paymentTypeElement}</div>
           {renderButtonsSection(buttons, { className: 'mt-2xl', isVertical: true })}
           {renderFootnote(footnote)}
         </div>
@@ -86,17 +90,17 @@ const renderCreditParamsForm = (
   params: CreditCalculatorParams & CreditCalculatorParamsViewSettings,
   field: FormFieldRegisterer<any>,
 ) => (
-  <div>
+  <div className="gap-xl flex flex-col sm:gap-s">
     {params.isShowSalaryClient ? (
       <Checkbox
-        text="Получаю зарплату на счёт в Россельхозбанке"
+        text={`Получаю зарплату на счёт\nв Россельхозбанке`}
         {...field('isSalaryClient')}
         value={params.isSalaryClient}
+        className="whitespace-pre-line sm:whitespace-normal"
       />
     ) : null}
     {params.isShowStateEmployee ? (
       <Checkbox
-        className="mt-3"
         text="Работаю в бюджетной организации"
         {...field('isStateEmployee')}
         value={params.isStateEmployee}
@@ -104,7 +108,6 @@ const renderCreditParamsForm = (
     ) : null}
     {params.isShowPensionClient ? (
       <Checkbox
-        className="mt-3"
         text="Получаю пенсию на карту Россельхозбанка"
         {...field('isPensionClient')}
         value={params.isPensionClient}
@@ -112,7 +115,6 @@ const renderCreditParamsForm = (
     ) : null}
     {params.isShowInsurance ? (
       <Checkbox
-        className="mt-3"
         text="Комплексная страховая защита"
         {...field('isInsurance')}
         value={params.isInsurance}

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -1,18 +1,21 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
-import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { style } from '../../utils/style';
-import { DepositCalculatorParamsViewSettings, DepositCalculatorProps } from './CalculatorContent';
-import { CalculatorValueBlock } from './CalculatorValueBlock';
-import { DEPOSIT_DEFAULT_SUM } from './constants';
-import { Rate } from './Rate';
+import type {
+  DepositCalculatorParamsViewSettings,
+  DepositCalculatorProps,
+} from './CalculatorContent';
 import { renderFootnote } from './renderFootnote';
-import { renderInterestPayment } from './renderInterestPayment';
-import { renderMonthsInput } from './renderMonthsInput';
-import { renderRegistrationType } from './renderRegistrationType';
 import { renderWantedSumInput } from './renderWantedSumInput';
+import { renderMonthsInput } from './renderMonthsInput';
+import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
+import { DEPOSIT_DEFAULT_SUM } from './constants';
 import { DepositCalculatorParams, useDepositCalculatorParams } from './useDepositCalculatorParams';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { CalculatorValueBlock } from './CalculatorValueBlock';
+import { renderInterestPayment } from './renderInterestPayment';
+import { renderRegistrationType } from './renderRegistrationType';
+import { renderRate } from './renderRate';
 
 export interface DepositCalculatorProp extends DepositCalculatorProps {
   className?: string;
@@ -32,16 +35,17 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
       sourceBookDir,
       paramsViewSettings,
     );
-    const { defaultMonth, income, finalSum, rate } = calculatorParams;
+    const { defaultMonth, rate, income, finalSum } = calculatorParams;
 
     const { onChange: setMonthsValue } = field('monthsValue');
+
     useEffect(() => {
       setMonthsValue && setMonthsValue(defaultMonth);
     }, [defaultMonth]);
 
     return (
-      <section className={style('flex justify-between', className)}>
-        <div className="w-2/5">
+      <section className={style('flex flex-col justify-between sm:flex-row', className)}>
+        <div className="flex flex-col gap-lg sm:w-2/5">
           {renderWantedSumInput({
             title: 'Сумма, ₽',
             min: calculatorParams.minSum,
@@ -57,15 +61,18 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
             ...field('monthsValue'),
             value: calculatorParams.monthsValue,
           })}
-          <div className="mt-2xl">
+          <div className="flex flex-col gap-y-2xl">
             {renderDepositParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
           </div>
         </div>
-        <Rate rate={rate} rateBlockClassName="tracking-[-25px]" unit="%" />
-        <div className="w-96">
+        <div className="border-b border-main-divider mt-lg mb-2xl md:hidden"></div>
+        {renderRate({
+          rate,
+        })}
+        <div className="mt-2xl flex flex-col gap-y-2xl sm:w-96 sm:gap-y-0 sm:mt-0">
           <CalculatorValueBlock title="Доход в конце срока" value={income} postfix="₽" prefix="+" />
           <CalculatorValueBlock title="Сумма в конце срока" value={finalSum} postfix="₽" />
-          {renderButtonsSection(buttons, { className: 'mt-2xl', isVertical: true })}
+          {renderButtonsSection(buttons, { isVertical: true })}
           {renderFootnote(footnote)}
         </div>
       </section>

package/src/components/Calculator/RefinancingCalculatorForm.tsx

@@ -4,7 +4,10 @@ import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { style } from '../../utils/style';
-import type { RefinancingCalculatorParamsViewSettings } from './CalculatorContent';
+import type {
+  RefinancingCalculatorParamsViewSettings,
+  RefinancingCalculatorProps,
+} from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import {
   DEFAULT_REFINANCING_MONTHS,
@@ -15,7 +18,6 @@ import { Rate } from './Rate';
 import { renderFootnote } from './renderFootnote';
 import { renderMonthsInput } from './renderMonthsInput';
 import { renderWantedSumInput } from './renderWantedSumInput';
-import { RefinancingCalculatorProps } from './CalculatorContent';
 import {
   RefinancingCalculatorParams,
   useRefinancingCalculatorParams,
@@ -71,6 +73,7 @@ export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
             max: calculatorParams.maxMonths,
             ...field('monthsValue'),
             value: calculatorParams.monthsValue,
+            className: 'mt-2xl',
           })}
           <div className={style('mt-7', calculatorParams.isExtraMoney ? 'mb-3' : '')}>
             {renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}

package/src/components/Calculator/renderBinaryRadioButtonGroup.tsx

@@ -1,12 +1,14 @@
 import { ListOrientation } from '../../model/ListOrientation';
 import { RadioButtonGroup, RadioButtonItem } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
 import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
 
 export interface BinaryRadioButtonGroupProps {
   items: [truthy: RadioButtonItem, falsy: RadioButtonItem];
   title?: string;
   orientation?: ListOrientation;
   value?: boolean;
+  radioGroupClassName?: string;
   onChange?: (value: boolean) => void;
 }
 
@@ -15,6 +17,7 @@ export const renderBinaryRadioButtonGroup = ({
   title,
   orientation = 'horizontal',
   value,
+  radioGroupClassName,
   onChange,
 }: BinaryRadioButtonGroupProps) => (
   <div>
@@ -29,6 +32,7 @@ export const renderBinaryRadioButtonGroup = ({
       orientation={orientation}
       items={items}
       checkedItem={items[value ? 0 : 1].id}
+      className={style('flex-col sm:flex-row', radioGroupClassName)}
       onChange={(_) => onChange && onChange(_ === items[0].id)}
     />
   </div>

package/src/components/Calculator/renderDaysInput.tsx

@@ -5,7 +5,6 @@ const STEP_DAYS = 1;
 
 export const renderDaysInput = (props: InputRangeProps) => (
   <InputRange
-    className="mt-7"
     items={[`От ${daysText(props.min || 0)}`, `До ${daysText(props.max || 0)}`]}
     step={STEP_DAYS}
     {...props}

package/src/components/Calculator/renderMonthsInput.tsx

@@ -14,7 +14,6 @@ export const renderMonthsInput = ({
   ...rest
 }: MonthsInputParams) => (
   <InputRange
-    className="mt-7"
     items={[`От ${monthText(min)}`, `До ${monthText(max)}`]}
     step={STEP_MONTHS}
     {...(availableMonths?.length ? { list: availableMonths } : { min, max })}

package/src/components/Calculator/renderPaymentType.tsx

@@ -6,6 +6,7 @@ import {
 export const renderPaymentType = (props: Partial<BinaryRadioButtonGroupProps>) =>
   renderBinaryRadioButtonGroup({
     ...props,
+    radioGroupClassName: 'sm:flex-col',
     items: [
       { id: 'annuity', text: 'Аннуитетный' },
       { id: 'differential', text: 'Дифференцированный' },

package/src/components/Calculator/renderRate.tsx

@@ -0,0 +1,37 @@
+import { UnknownRate } from './UnknownRate';
+import { Rate } from './Rate';
+import { CalculatorValueBlock } from './CalculatorValueBlock';
+
+interface RenderRateProps {
+  rate: number;
+  depositeName?: string;
+  isShowUnknownRate?: boolean;
+  isShowDepositeName?: boolean;
+}
+
+const renderDesktopRate = ({ rate, depositeName, isShowDepositeName }: RenderRateProps) => (
+  <Rate
+    rate={rate}
+    depositeName={depositeName}
+    isShowDepositeName={isShowDepositeName}
+    rateBlockClassName="tracking-[-25px]"
+    unit="%"
+  />
+);
+
+const renderMobileRate = ({ rate }: RenderRateProps) => (
+  <CalculatorValueBlock title="Ставка" value={rate} postfix="%" />
+);
+
+export const renderRate = (props: RenderRateProps) => {
+  if (props.isShowUnknownRate) {
+    return <UnknownRate />;
+  }
+
+  return (
+    <div>
+      <div className="hidden md:block">{renderDesktopRate(props)}</div>
+      <div className="md:hidden">{renderMobileRate(props)}</div>
+    </div>
+  );
+};

package/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -1,46 +1,28 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { BaseProductTile } from '../../ui-kit/BaseProductTile/BaseProductTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import { Text } from '../../ui-kit/Text/Text';
 import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
-import { cardDescriptionColor, cardTitleFont } from './programCardStyles';
 
 export interface CarouselTariffsCardProps extends CarouselProgramsCardContent, UniBlockProps {}
 
 export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
-  ({ className, title, icon, list = [], href, target, ...rest }) => (
-    <BlockWrapper className={className} defaultPadding="p-3xl sm:p-0" {...rest}>
-      <LinkWrapper className="sm:flex sm:items-center" href={href} target={target}>
-        <div className="flex justify-center px-xl">
-          {icon?.src || icon?.icon ? <Img image={icon} /> : null}
-        </div>
-        <div className="sm:px-s p-5xl">
-          {title ? <Heading className="mb-xs sm:mb-m" headingType="h6" title={title} /> : null}
-          {list.length ? (
-            <div className="flex flex-col gap-xs sm:gap-s">{list?.map(renderList)}</div>
-          ) : null}
-        </div>
+  ({ className, title, icon, list, href, target, ...rest }) => (
+    <BlockWrapper className={className} defaultPadding="p-3xl" {...rest}>
+      <LinkWrapper className="flex items-center h-full" href={href} target={target}>
+        <BaseProductTile
+          title={title}
+          headlineVersion="XS"
+          image={icon}
+          imageOptions={{ directionRight: false, imageAlign: 'center' }}
+          benefits={list?.map((_) => ({
+            type: 'default',
+            label: _.title,
+            description: _.description,
+          }))}
+        />
       </LinkWrapper>
     </BlockWrapper>
   ),
 );
-
-const renderList = (_: HeadlineCommonProps, i: number) => (
-  <div key={String(i)} className="flex flex-row-reverse justify-between gap-y-2xs sm:flex-col">
-    {_.title ? (
-      <Text size="text-l" font={cardTitleFont}>
-        {_.title}
-      </Text>
-    ) : null}
-    {_.description ? (
-      <Paragraph size="text-l" font="font-light" color={cardDescriptionColor}>
-        {_.description}
-      </Paragraph>
-    ) : null}
-  </div>
-);

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

@@ -17,7 +17,7 @@ export const Header = JSX<HeaderProps>(
 
     return (
       <BlockWrapper tag="header" defaultPadding="" version={version} {...rest}>
-        <div className="container px-4 py-2xs box-border">
+        <div className="container px-5 py-2xs box-border">
           <HeaderTop
             bgColor={bgColor}
             logo={logo}