@redneckz/wildless-cms-uni-blocks 0.12.10 → 0.12.12

package/mobile/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -1,10 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Img } from '../../ui-kit/Img/Img';
+import { Text } from '../../ui-kit/Text/Text';
 import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
 import { formatCurrency } from './formatCurrency';
 
 const TABLE_HEAD_STYLE = 'text-left text-m font-light text-secondary-text';
-const TABLE_HEAD_STYLE_WITH_PL = `${TABLE_HEAD_STYLE} pl-11`;
+const TABLE_HEAD_STYLE_WITH_PADDING = `${TABLE_HEAD_STYLE} pl-5xl`;
 
 const CURRENCY_ICONS_MAP = {
   USD: 'DollarIcon',
@@ -20,9 +21,15 @@ export const CurrencyTable = JSX<CurrencyTableProps>(({ className, exchangeCurre
   <table className={`h-fit w-fit ${className}`}>
     <thead>
       <tr>
-        <th className={TABLE_HEAD_STYLE}>Валюта</th>
-        <th className={TABLE_HEAD_STYLE_WITH_PL}>Купить</th>
-        <th className={TABLE_HEAD_STYLE_WITH_PL}>Продать</th>
+        <th className={TABLE_HEAD_STYLE}>
+          <Text size="text-m">Валюта</Text>
+        </th>
+        <th className={TABLE_HEAD_STYLE_WITH_PADDING}>
+          <Text size="text-m">Купить</Text>
+        </th>
+        <th className={TABLE_HEAD_STYLE_WITH_PADDING}>
+          <Text size="text-m">Продать</Text>
+        </th>
       </tr>
     </thead>
     <tbody>{exchangeCurrencyItems.map(renderCurrencyRow)}</tbody>
@@ -33,17 +40,26 @@ const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
   const currency = exchangeCurrencyItem?.currency?.currency;
 
   return (
-    <tr key={currency} className="pb-1 text-h6">
-      <td className="pt-4">
+    <tr key={currency} className="pb-2xs text-h6">
+      <td className="pt-m">
         <div className="flex items-center">
           {currency ? (
-            <Img image={{ icon: CURRENCY_ICONS_MAP[currency] }} width="24" height="24" />
+            <Img
+              image={{ icon: CURRENCY_ICONS_MAP[currency] }}
+              width="24"
+              height="24"
+              className="mr-2"
+            />
           ) : null}
-          <span className="ml-2">{currency}</span>
+          <Text size="text-h6">{currency}</Text>
         </div>
       </td>
-      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem?.saleExchangeRate)}</td>
-      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem?.buyExchangeRate)}</td>
+      <td className="pt-m pl-5xl">
+        <Text size="text-h6">{formatCurrency(exchangeCurrencyItem?.saleExchangeRate)}</Text>
+      </td>
+      <td className="pt-m pl-5xl">
+        <Text size="text-h6">{formatCurrency(exchangeCurrencyItem?.buyExchangeRate)}</Text>
+      </td>
     </tr>
   );
 };

package/mobile/src/components/ExchangeRateTile/CurrentLocation.tsx

@@ -1,17 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Img } from '../../ui-kit/Img/Img';
+import { Picture } from '../../model/Picture';
+import { RoundedIcon } from '../../ui-kit/Icon/RoundedIcon';
 
 interface CurrentLocationProps {
   className?: string;
   address?: string;
 }
 
+const icon: Picture = { icon: 'GpsIcon' };
+
 export const CurrentLocation = JSX<CurrentLocationProps>(({ className = '', address }) => (
-  <div className={`flex ${className}`}>
-    <Img image={{ icon: 'GpsIcon' }} width="24" height="24" />
-    <div className="ml-3">
-      {address ? <p className="text-primary-main  m-0 mb-1 text-l">{address}</p> : null}
-      <p className="text-secondary-text m-0 text-m">Курс указан для заданного офиса</p>
+  <div className={`flex gap-s ${className}`}>
+    <RoundedIcon {...icon} iconBgVersion="primary" />
+    <div className="space-y-2xs">
+      {address ? <p className="text-primary-main text-l">{address}</p> : null}
+      <p className="text-secondary-text text-m">Курс указан для заданного офиса</p>
     </div>
   </div>
 ));

package/mobile/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -44,7 +44,7 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
     );
 
     return (
-      <div className={`grid gap-[18px] pt-2 ${className}`}>
+      <div className={`grid gap-m pt-2xl ${className}`}>
         {renderInput({
           placeholder: 'Хочу продать',
           rates: currencyRatesSell,

package/mobile/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -31,7 +31,7 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
           className="h-full"
           title={<Heading headingType="h4" title={title} className="whitespace-pre-wrap" />}
         >
-          <div className="flex gap-xxl">
+          <div className="flex gap-6xl flex-wrap">
             <div>
               {currencyRates ? (
                 <CurrencyTable className="mb-xl" exchangeCurrencyItems={currencyRates} />

package/mobile/src/components/Footer/Contacts.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { Button } from '../../ui-kit/Button/Button';
 import { Text } from '../../ui-kit/Text/Text';
 import type { ContactGroup, ContactInfo } from './FooterContent';
+import { style } from '../../utils/style';
 
 export interface ContactsProps {
   className?: string;
@@ -10,7 +11,7 @@ export interface ContactsProps {
 }
 
 export const Contacts = JSX<ContactsProps>(({ className = '', items, hasButton }) => (
-  <div className={className}>
+  <div className={style('space-y-xl', className)}>
     {items?.length ? items.map(renderContactsGroup) : null}
     {hasButton ? (
       <Button
@@ -26,20 +27,20 @@ export const Contacts = JSX<ContactsProps>(({ className = '', items, hasButton }
 ));
 
 const renderContactsGroup = (item: ContactGroup, i: number) => (
-  <div className="mb-6" key={String(i)}>
-    <div className="mb-4">
+  <div className="space-y-m" key={String(i)}>
+    <div className="">
       <Text size="text-l" font="font-medium">
         {item?.title}
       </Text>
     </div>
-    <div>{item.items?.map(renderContact)}</div>
+    <div className="space-y-m">{item.items?.map(renderContact)}</div>
   </div>
 );
 
 const renderContact = (item: ContactInfo, index: number) => (
-  <div className="mb-4" key={String(index)}>
+  <div className="space-y-2xs" key={String(index)}>
     <div>{renderText(item.type, item.text)}</div>
-    <div className="mt-1 text-s font-light text-secondary-text">{item.description}</div>
+    <div className="text-s font-light text-secondary-text">{item.description}</div>
   </div>
 );
 

package/mobile/src/components/Footer/Footer.tsx

@@ -1,34 +1,30 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useSWRResource } from '../../hooks/useSWRResource';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { LinkCommonProps } from '../../model/LinkProps';
 import { projectSettings } from '../../ProjectSettings';
-import type { SitemapData } from '../../services/sitemap/SitemapData';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { LinkList } from '../../ui-kit/LinkList/LinkList';
 import { RollupItem } from '../RollupItem/RollupItem';
 import { Contacts } from './Contacts';
 import { findIconByHref } from './findIconByHref';
-import type { FooterContent } from './FooterContent';
 import type { FooterDataProps } from './FooterDataProps';
+import type { FooterProps } from './FooterProps';
 import { HorizontalNavigation } from './HorizontalNavigation';
 import { SocialMedia } from './SocialMedia';
 import { TextInformation } from './TextInformation';
 
-export interface FooterProps extends FooterContent, UniBlockProps {}
-
-export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
-  const fallback = rest.options?.page?.fallback;
-
-  const sitemap = useSWRResource<SitemapData>(projectSettings.SITEMAP || 'sitemap', fallback);
+export const Footer = JSX<FooterProps>(({ className, sitemap, ...rest }) => {
   const { relatedEnterprises, contacts, socialMedia, mobileApps, horizontalNavigationTitle } =
-    useSWRResource<FooterDataProps>(projectSettings.FOOTER || 'footer', fallback);
+    useSWRResource<FooterDataProps>(
+      projectSettings.FOOTER || 'footer',
+      rest.options?.page?.fallback,
+    );
 
   return (
     <BlockWrapper tag="footer" className={className} defaultPadding="px-4 py-6" {...rest}>
       <div className="mb-4 pb-5 border-b border-main-divider">
-        {sitemap.topItems?.map((item, i) => (
+        {sitemap?.topItems?.map((item, i) => (
           <RollupItem key={String(i)} label={item?.text} labelIcon={item?.icon}>
             <LinkList items={item.items} className="my-3" />
           </RollupItem>
@@ -38,7 +34,7 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
       <SocialMedia className="mb-4" media={socialMedia} />
       {mobileApps?.map(renderButton)}
       <HorizontalNavigation
-        className="pt-4 pb-7 border-y border-main-divider"
+        className="pt-m pb-2xl border-y border-main-divider"
         title={horizontalNavigationTitle}
         links={relatedEnterprises}
       />

package/mobile/src/components/Footer/FooterProps.ts

@@ -0,0 +1,7 @@
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { SitemapData } from '../../services/sitemap/SitemapData';
+import type { FooterContent } from './FooterContent';
+
+export interface FooterProps extends FooterContent, UniBlockProps {
+  sitemap?: SitemapData;
+}

package/mobile/src/components/GracePeriod/GracePeriod.tsx

@@ -13,8 +13,14 @@ export interface GracePeriodProps extends GracePeriodContent, UniBlockProps {}
 
 export const GracePeriod = JSX<GracePeriodProps>(
   ({ className = '', title, description, calendar, ...rest }) => (
-    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
-      <Headline className="!p-0 mb-4" title={title} description={description} headlineVersion="M" />
+    <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
+      <Headline
+        className="mb-4"
+        title={title}
+        description={description}
+        headlineVersion="M"
+        isPadding={false}
+      />
       {calendar ? renderCalendar(calendar) : null}
     </BlockWrapper>
   ),
@@ -42,15 +48,15 @@ const renderCalendar = (calendar: CalendarItem[]) => {
       <div className="flex w-full mb-3 text-h6 text-center">
         {mappedCalendar.map((_) => renderMonthNames(_, colSize))}
       </div>
-      <div className="flex w-full">
+      <div className="flex gap-s w-full">
         {mappedCalendar.map((_, ind) => (
           <div
             key={`monthItem-${ind}`}
-            className="pr-[11px] mr-3 border-r border-main-divider last:border-r-0 last:pr-0 last:mr-0"
+            className="pr-s border-r border-main-divider last:border-r-0 last:pr-0"
             style={{ flexBasis: _.flexBasis }}
           >
             <div className="flex">{renderMonthImages(_)}</div>
-            <div className="text-s font-light text-primary-text mt-3">
+            <div className="text-s font-light text-primary-text mt-s">
               <span>{_.text}</span>&thinsp;
               <span className="text-primary-main">{_.greenText}</span>
             </div>

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

@@ -1,33 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useSWRResource } from '../../hooks/useSWRResource';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { Fallback } from '../../model/Fallback';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import { projectSettings } from '../../ProjectSettings';
-import type { SitemapData } from '../../services/sitemap/SitemapData';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import type { HeaderContent } from './HeaderContent';
+import type { HeaderProps } from './HeaderProps';
 import { HeaderTop } from './HeaderTop';
 
-export interface HeaderMobileProps extends HeaderContent, UniBlockProps {}
-
 const BG_COLOR_TO_BLOCK_VERSION: Record<BgColorVersion, BlockVersion> = {
   'bg-white': 'primary',
   transparent: 'transparent',
 };
 
-export const Header = JSX<HeaderMobileProps>(
-  ({ bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], ...rest }) => {
-    const fallback: Fallback | undefined = rest.options?.page?.fallback;
-    const { logo, internetBankUrl } = useSWRResource<SitemapData>(
-      projectSettings.SITEMAP || 'sitemap',
-      fallback,
-    );
+export const Header = JSX<HeaderProps>(
+  ({ bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], sitemap, ...rest }) => {
+    const { logo, internetBankUrl } = sitemap || {};
 
     return (
       <BlockWrapper tag="header" defaultPadding="" version={version} {...rest}>
-        <div className="container px-4 py-1 box-border">
+        <div className="container px-4 py-2xs box-border">
           <HeaderTop
             bgColor={bgColor}
             logo={logo}

package/mobile/src/components/Header/HeaderContent.ts

@@ -29,8 +29,6 @@ export type Logo = ImageContent & {
  * @title Шапка (для мобильных горизонтальная прокрутка shift+mouseScroll)
  */
 export interface HeaderContent {
-  /** @hidden */
-  showSubMenu?: boolean;
   /** @hidden */
   bgColor?: BgColorVersion;
 }

package/mobile/src/components/Header/HeaderProps.ts

@@ -0,0 +1,9 @@
+import { RegionData } from '../../hooks/useLocation';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { SitemapData } from '../../services/sitemap/SitemapData';
+import type { HeaderContent } from './HeaderContent';
+
+export interface HeaderProps extends HeaderContent, UniBlockProps {
+  sitemap?: SitemapData;
+  location?: RegionData;
+}

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

@@ -46,12 +46,12 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(
     );
 
     return (
-      <nav className="relative mt-3 flex items-center justify-between">
-        <div ref={subItemsListRef} className="overflow-hidden whitespace-nowrap pb-3 mt-2">
+      <nav className="relative mt-s flex items-center justify-between">
+        <div ref={subItemsListRef} className="overflow-hidden whitespace-nowrap pb-s mt-xs">
           {subItems.map((_, i) => (
             <HeaderSubMenuItem
               key={String(i)}
-              className={style('ml-8 first:ml-0', visibleItemsCount - 1 < i ? 'invisible' : '')}
+              className={style('ml-3xl first:ml-0', visibleItemsCount - 1 < i ? 'invisible' : '')}
               active={_ === activeSubItem}
               observerOptions={observerOptions}
               onVisibilityChange={subItemsVisibilityHandlers[i]}

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

@@ -50,7 +50,7 @@ export const HeaderTop = JSX<HeaderTopProps>(({ bgColor, logo, internetBankUrl,
           ariaLabel="Войти"
           target="_blank"
           className={style(
-            'p-3 my-1 text-s whitespace-nowrap text-primary-main hover:text-primary-hover',
+            'p-s my-2xs text-s whitespace-nowrap text-primary-main hover:text-primary-hover',
             BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default'],
           )}
         >

package/mobile/src/components/Header/sitemap.wcms-resource.json

@@ -0,0 +1,144 @@
+{
+  "_schemaPath": "content/schemas/Карта Сайта.schema.json",
+  "officesLink": "https://www.rshb.ru/offices/moscow/",
+  "topItems": [
+    {
+      "items": [
+        {
+          "href": "/cards-credit",
+          "text": "Кредитные карты"
+        },
+        {
+          "href": "/cards-debit",
+          "text": "Дебетовые карты"
+        },
+        {
+          "href": "/credits",
+          "text": "Кредиты"
+        },
+        {
+          "href": "/deposits",
+          "text": "Вклады"
+        },
+        {
+          "href": "/investment",
+          "text": "Инвестиции"
+        },
+        {
+          "href": "/mortgage",
+          "text": "Ипотека"
+        },
+        {
+          "href": "/insurance",
+          "text": "Страхование"
+        },
+        {
+          "href": "/transfers",
+          "text": "Переводы"
+        },
+        {
+          "href": "/premium",
+          "text": "Премиум"
+        }
+      ],
+      "href": "/natural",
+      "text": "Частным клиентам",
+      "icon": { "icon": "ClientIcon", "iconVersion": "normal" }
+    },
+    {
+      "items": [
+        {
+          "text": "РКО",
+          "href": "/rco"
+        },
+        {
+          "text": "Кредиты",
+          "href": "/credits"
+        },
+        {
+          "text": "Депозиты",
+          "href": "/deposits"
+        },
+        {
+          "text": "Эквайринг",
+          "href": "/acquiring"
+        },
+        {
+          "text": "Банковские карты",
+          "href": "/cards"
+        },
+        {
+          "text": "ВЭД",
+          "href": "/ved"
+        },
+        {
+          "text": "Инвестиции",
+          "href": "/investment"
+        },
+        {
+          "text": "Обмен валюты",
+          "href": "/exchange"
+        }
+      ],
+      "text": "Бизнес клиентам",
+      "href": "/business",
+      "icon": { "icon": "BagIcon", "iconVersion": "normal" }
+    },
+    {
+      "items": [
+        {
+          "text": "Свое Родное",
+          "href": "https://svoe-rodnoe.ru/"
+        },
+        {
+          "text": "Свое Фермерство",
+          "href": "/ferm"
+        },
+        {
+          "text": "Свое Жилье",
+          "href": "/home"
+        },
+        {
+          "text": "Свое Село",
+          "href": "/selo"
+        },
+        {
+          "text": "Свое за Городом",
+          "href": "/gorod"
+        },
+        {
+          "text": "Свое Объявления",
+          "href": "/reklam"
+        }
+      ],
+      "text": "Экосистема Своё",
+      "href": "/svoe",
+      "icon": {
+        "icon": "GridIcon",
+        "iconVersion": "normal"
+      }
+    }
+  ],
+  "dispositions": [
+    {
+      "text": "Офисы",
+      "href": "#",
+      "icon": { "icon": "BankIcon" }
+    },
+    {
+      "text": "Банкоматы",
+      "href": "#",
+      "icon": { "icon": "AtmIcon" }
+    }
+  ],
+  "id": "6XGlupwIMfAfAca1Zm1X0",
+  "title": "Сайт РСХБ",
+  "slug": "sitemap",
+  "defaultLocation": "Москва",
+  "internetBankUrl": "https://google.com",
+  "logo": {
+    "image": {
+      "icon": "LogoIcon"
+    }
+  }
+}

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

@@ -29,7 +29,7 @@ export const Headline = JSX<HeadlineProps>(
     return (
       <BlockWrapper
         className={className}
-        defaultPadding={isPadding ? 'p-default' : ''}
+        defaultPadding={isPadding ? 'p-6xl' : ''}
         version={version}
         isTheme={isTheme}
         {...rest}

package/mobile/src/components/Headline/headlineVersionStyles.ts

@@ -15,25 +15,25 @@ export const headlineVersionStyles: Record<
     title: { headingType: 'h0', as: 'h1' },
     descriptionSize: 'text-h5',
     descriptionWeight: 'font-normal',
-    descriptionStyle: 'mt-m',
+    descriptionStyle: 'mt-xl',
   },
   XL: {
     title: { headingType: 'h1', as: 'h1' },
     descriptionSize: 'text-xl',
     descriptionWeight: 'font-light',
-    descriptionStyle: 'mt-s',
+    descriptionStyle: 'mt-m',
   },
   L: {
     title: { headingType: 'h2', as: 'h2' },
     descriptionSize: 'text-xl',
     descriptionWeight: 'font-light',
-    descriptionStyle: 'mt-s',
+    descriptionStyle: 'mt-m',
   },
   M: {
     title: { headingType: 'h3', as: 'h2' },
     descriptionSize: 'text-xl',
     descriptionWeight: 'font-light',
-    descriptionStyle: 'mt-text',
+    descriptionStyle: 'mt-s',
   },
   S: {
     title: { headingType: 'h4', as: 'h2' },

package/mobile/src/components/HorizontalLayout/HorizontalLayout.tsx

@@ -1,34 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { style } from '../../utils/style';
-import { gapStyles } from './gapStyles';
+import { VerticalLayout } from '../VerticalLayout/VerticalLayout';
 import type { HorizontalLayoutContent } from './HorizontalLayoutContent';
 
 export interface HorizontalLayoutProps extends HorizontalLayoutContent, UniBlockProps {}
 
 export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalLayoutProps>(
-  ({
-    className = '',
-    gap = 'XS',
-    isPadding = false,
-    version = 'transparent',
-    isTheme = false,
-    ...rest
-  }) => (
-    <BlockWrapper
-      className={style('relative', 'grid grid-cols-12', gapStyles[gap], className)}
-      defaultPadding={isPadding ? 'p-default' : ''}
-      version={version}
-      isTheme={isTheme}
-      {...rest}
-    >
-      {renderChildren(rest)}
-    </BlockWrapper>
-  ),
+  (props) => <VerticalLayout {...props} />,
 );
 
-HorizontalLayout.childrenTypes = {
-  exclude: ['HorizontalLayout'],
-};
+HorizontalLayout.childrenTypes = [];

package/mobile/src/components/HorizontalLayout/gapStyles.ts

@@ -1,11 +1,11 @@
 import type { GapVersion } from './HorizontalLayoutContent';
 
 export const gapStyles: Record<GapVersion, string> = {
-  XXL: 'gap-12',
-  XL: 'gap-10',
-  L: 'gap-8',
-  M: 'gap-4',
-  S: 'gap-2',
-  XS: 'gap-1',
+  XXL: 'gap-6xl',
+  XL: 'gap-5xl',
+  L: 'gap-3xl',
+  M: 'gap-m',
+  S: 'gap-xs',
+  XS: 'gap-2xs',
   '': '',
 };

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -23,13 +23,13 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
 
     return (
       <BlockWrapper
-        className={style('box-border overflow-hidden relative px-0', className)}
-        defaultPadding="p-default"
+        className={style('box-border overflow-hidden relative px-0 space-y-2xl', className)}
+        defaultPadding="p-6xl"
         {...rest}
       >
-        {title ? <Heading className="text-center mb-8" title={title} headingType="h3" /> : null}
+        {title ? <Heading className="text-center" title={title} headingType="h3" /> : null}
         {insuranceTabs?.length > 1 ? (
-          <div className="p-1.5 bg-secondary-light w-fit mx-auto mb-7 rounded-md">
+          <div className="p-xs bg-secondary-light w-fit mx-auto rounded-md">
             {insuranceTabs.map((item, i) =>
               renderNavButton({
                 title: item?.title,

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -74,8 +74,8 @@ function renderGallery({ activeIndex, cards, selectedCardIndex, onClick }: Insur
   const cardsAlignStyle = cards.length > 2 ? 'justify-start' : 'justify-center';
 
   return (
-    <div style={{ transform: `translateX(-${tabsShiftWidth}px)` }} className="duration-1000 px-12">
-      <div className={`w-full flex flex-nowrap gap-3.5 pb-12 ${cardsAlignStyle}`}>
+    <div style={{ transform: `translateX(-${tabsShiftWidth}px)` }} className="duration-1000 px-6xl">
+      <div className={`w-full flex flex-nowrap gap-3.5 pb-6xl ${cardsAlignStyle}`}>
         {cards.map((slide, i) =>
           renderNavButton({
             slide,
@@ -99,7 +99,7 @@ function renderNavButton({ slide, i, isActive, onClick }: NavButtonProps) {
       type="button"
       key={String(i)}
       onClick={onClick}
-      className={`p-[30px] min-w-[460px] flex items-center bg-white border-solid border relative ${btnClassName}`}
+      className={`p-3xl min-w-[460px] flex items-center bg-white border-solid border relative ${btnClassName}`}
     >
       {slide?.icon ? (
         <Img