npm - @npm_leadtech/legal-lib-components - Versions diffs - 5.45.2 → 5.46.1 - Mend

@npm_leadtech/legal-lib-components 5.45.2 → 5.46.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (200) hide show

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotron.styled.js CHANGED Viewed

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 export const ContactJumbotronStyled = styled.article `
   .contact__text__title {
     color: var(--primary-main-dark-1);
-    margin-bottom: space(8);
+    margin-bottom: 2rem;
     font-size: 1.5rem;
     font-weight: 500;
     line-height: 2rem;
@@ -34,7 +34,7 @@ export const ContactJumbotronStyled = styled.article `
   .faq-button {
     display: inline-block;
-    margin-top: space(4);
+    margin-top: 1rem;
     width: 100%;
     @media ${device['portrait-tablets']} {
       width: 10rem;

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotron.styled.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 export const ContactJumbotronStyled = styled.article`
   .contact__text__title {
     color: var(--primary-main-dark-1);
-    margin-bottom: space(8);
+    margin-bottom: 2rem;
     font-size: 1.5rem;
     font-weight: 500;
     line-height: 2rem;
@@ -35,7 +35,7 @@ export const ContactJumbotronStyled = styled.article`
   .faq-button {
     display: inline-block;
-    margin-top: space(4);
+    margin-top: 1rem;
     width: 100%;
     @media ${device['portrait-tablets']} {
       width: 10rem;

package/dist/src/components/organisms/FaqGroup/FaqGroup.styled.js CHANGED Viewed

@@ -3,7 +3,7 @@ export const FaqGroupStyled = styled.div `
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 32px;
+  gap: 2rem;
   &#faq-esignature-ratafia {
     margin: auto;

package/dist/src/components/organisms/FaqGroup/FaqGroup.styled.ts CHANGED Viewed

@@ -4,7 +4,7 @@ export const FaqGroupStyled = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 32px;
+  gap: 2rem;
   &#faq-esignature-ratafia {
     margin: auto;

package/dist/src/components/organisms/FeaturesRatafiaContent/FeaturesRatafiaContent.styled.js CHANGED Viewed

@@ -14,7 +14,7 @@ export const FeaturesRatafiaContentStyled = styled.div `
       justify-content: center;
       align-items: center;
       align-self: stretch;
-      gap: 1rem;
+      gap: var(--global-gap);
       margin-bottom: 1rem;
       &__text {

package/dist/src/components/organisms/FeaturesRatafiaContent/FeaturesRatafiaContent.styled.ts CHANGED Viewed

@@ -15,7 +15,7 @@ export const FeaturesRatafiaContentStyled = styled.div`
       justify-content: center;
       align-items: center;
       align-self: stretch;
-      gap: 1rem;
+      gap: var(--global-gap);
       margin-bottom: 1rem;
       &__text {

package/dist/src/components/organisms/GuidelinesContent/GuidelinesContent.styled.js CHANGED Viewed

@@ -97,12 +97,12 @@ export const GuideslinesContentStyled = styled.div `
       flex: 1;
       flex-direction: column;
       background: var(--others-white);
-      border-radius: 0.5rem;
+      border-radius: var(--m-border-radius);
       padding: 1.5rem;
       &__image {
         width: 100%;
-        border-radius: 0.5rem;
+        border-radius: var(--m-border-radius);
       }
       &__title {

package/dist/src/components/organisms/GuidelinesContent/GuidelinesContent.styled.ts CHANGED Viewed

@@ -98,12 +98,12 @@ export const GuideslinesContentStyled = styled.div`
       flex: 1;
       flex-direction: column;
       background: var(--others-white);
-      border-radius: 0.5rem;
+      border-radius: var(--m-border-radius);
       padding: 1.5rem;
       &__image {
         width: 100%;
-        border-radius: 0.5rem;
+        border-radius: var(--m-border-radius);
       }
       &__title {

package/dist/src/components/organisms/JumbotronRatafiaContent/JumbotronRatafiaContent.styled.js CHANGED Viewed

@@ -3,7 +3,7 @@ export const JumbotronRatafiaStyled = styled.div `
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 1rem;
+  gap: var(--global-gap);
   .jumbotron-ratafia-content__title {
     &__text {
@@ -14,7 +14,7 @@ export const JumbotronRatafiaStyled = styled.div `
       &__icon {
         padding: 0 0.6rem;
-        border-radius: 4px;
+        border-radius: var(--s-border-radius);
         color: var(--primary-main-dark-2);
         background: var(--secondary-main-light-2);
       }
@@ -40,7 +40,7 @@ export const JumbotronRatafiaStyled = styled.div `
         &__icon {
           padding: 0 0.6rem;
-          border-radius: 4px;
+          border-radius: var(--s-border-radius);
           color: var(--primary-main-dark-2);
           background: var(--secondary-main-light-2);
         }

package/dist/src/components/organisms/JumbotronRatafiaContent/JumbotronRatafiaContent.styled.ts CHANGED Viewed

@@ -4,7 +4,7 @@ export const JumbotronRatafiaStyled = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 1rem;
+  gap: var(--global-gap);
   .jumbotron-ratafia-content__title {
     &__text {
@@ -15,7 +15,7 @@ export const JumbotronRatafiaStyled = styled.div`
       &__icon {
         padding: 0 0.6rem;
-        border-radius: 4px;
+        border-radius: var(--s-border-radius);
         color: var(--primary-main-dark-2);
         background: var(--secondary-main-light-2);
       }
@@ -41,7 +41,7 @@ export const JumbotronRatafiaStyled = styled.div`
         &__icon {
           padding: 0 0.6rem;
-          border-radius: 4px;
+          border-radius: var(--s-border-radius);
           color: var(--primary-main-dark-2);
           background: var(--secondary-main-light-2);
         }

package/dist/src/components/organisms/KeyFactsLoadingContentRatafia/KeyFactsLoadingContentRatafia.styled.js CHANGED Viewed

@@ -5,7 +5,7 @@ export const KeyFactsLoadingContentRatafiaStyled = styled.div `
   flex-direction: column;
   align-items: flex-start;
   align-self: stretch;
-  gap: 1rem;
+  gap: var(--global-gap);
   .key-facts-loading-content__document-name {
     color: var(--neutral-neutral-2);
@@ -22,7 +22,7 @@ export const KeyFactsLoadingContentRatafiaStyled = styled.div `
     overflow: hidden;
-    border-radius: 4px;
+    border-radius: var(--s-border-radius);
     border-top: 4px solid var(--neutral-neutral-6);
     border-bottom: 4px solid var(--neutral-neutral-6);
     background: var(--neutral-neutral-6);
@@ -45,7 +45,7 @@ export const KeyFactsLoadingContentRatafiaStyled = styled.div `
       border-bottom: 1px solid var(--neutral-neutral-4);
       &__loader {
         background: var(--neutral-neutral-4);
-        border-radius: 16px;
+        border-radius: var(--l-border-radius);
       }
       .item-1 {
         height: 10px;
@@ -111,7 +111,7 @@ export const KeyFactsLoadingContentRatafiaStyled = styled.div `
     padding: 1rem;
     gap: 0.5rem;
-    border-radius: 4px;
+    border-radius: var(--s-border-radius);
     background: var(--secondary-main-light-4);
     &__icon img {

package/dist/src/components/organisms/KeyFactsLoadingContentRatafia/KeyFactsLoadingContentRatafia.styled.ts CHANGED Viewed

@@ -6,7 +6,7 @@ export const KeyFactsLoadingContentRatafiaStyled = styled.div`
   flex-direction: column;
   align-items: flex-start;
   align-self: stretch;
-  gap: 1rem;
+  gap: var(--global-gap);
   .key-facts-loading-content__document-name {
     color: var(--neutral-neutral-2);
@@ -23,7 +23,7 @@ export const KeyFactsLoadingContentRatafiaStyled = styled.div`
     overflow: hidden;
-    border-radius: 4px;
+    border-radius: var(--s-border-radius);
     border-top: 4px solid var(--neutral-neutral-6);
     border-bottom: 4px solid var(--neutral-neutral-6);
     background: var(--neutral-neutral-6);
@@ -46,7 +46,7 @@ export const KeyFactsLoadingContentRatafiaStyled = styled.div`
       border-bottom: 1px solid var(--neutral-neutral-4);
       &__loader {
         background: var(--neutral-neutral-4);
-        border-radius: 16px;
+        border-radius: var(--l-border-radius);
       }
       .item-1 {
         height: 10px;
@@ -112,7 +112,7 @@ export const KeyFactsLoadingContentRatafiaStyled = styled.div`
     padding: 1rem;
     gap: 0.5rem;
-    border-radius: 4px;
+    border-radius: var(--s-border-radius);
     background: var(--secondary-main-light-4);
     &__icon img {

package/dist/src/components/organisms/KeyFactsResultContentRatafia/KeyFactsResultContentRatafia.styled.js CHANGED Viewed

@@ -6,7 +6,7 @@ export const KeyFactsResultContentRatafiaStyled = styled.div `
   align-items: flex-start;
   flex: 1 0 0;
   align-self: stretch;
-  gap: 1rem;
+  gap: var(--global-gap);
   .key-facts-result-content__document-name {
     color: var(--neutral-neutral-2);

package/dist/src/components/organisms/KeyFactsResultContentRatafia/KeyFactsResultContentRatafia.styled.ts CHANGED Viewed

@@ -7,7 +7,7 @@ export const KeyFactsResultContentRatafiaStyled = styled.div`
   align-items: flex-start;
   flex: 1 0 0;
   align-self: stretch;
-  gap: 1rem;
+  gap: var(--global-gap);
   .key-facts-result-content__document-name {
     color: var(--neutral-neutral-2);

package/dist/src/components/organisms/LayoutRatafia/LayoutRatafia.styled.js CHANGED Viewed

@@ -18,7 +18,7 @@ export const LayoutRatafiaStyled = styled.div `
     padding: 1.5rem 1.5rem 0 1.5rem;
     width: 100%;
     height: calc(100vh - 8.375rem);
-    border-radius: 16px 16px 0 0;
+    border-radius: var(--l-border-radius) var(--l-border-radius) 0 0;
     background: var(--others-white);
     box-shadow: var(--box-shadow-small);
@@ -74,7 +74,7 @@ export const LayoutRatafiaStyled = styled.div `
       bottom: 0;
       left: 0;
       right: 0;
-      gap: 1rem;
+      gap: var(--global-gap);
       padding: 1.5rem;
       width: 100vw;
       background: var(--others-white);

package/dist/src/components/organisms/LayoutRatafia/LayoutRatafia.styled.ts CHANGED Viewed

@@ -19,7 +19,7 @@ export const LayoutRatafiaStyled = styled.div`
     padding: 1.5rem 1.5rem 0 1.5rem;
     width: 100%;
     height: calc(100vh - 8.375rem);
-    border-radius: 16px 16px 0 0;
+    border-radius: var(--l-border-radius) var(--l-border-radius) 0 0;
     background: var(--others-white);
     box-shadow: var(--box-shadow-small);
@@ -75,7 +75,7 @@ export const LayoutRatafiaStyled = styled.div`
       bottom: 0;
       left: 0;
       right: 0;
-      gap: 1rem;
+      gap: var(--global-gap);
       padding: 1.5rem;
       width: 100vw;
       background: var(--others-white);

package/dist/src/components/organisms/LimitReachedContentRatafia/LimitReachedContentRatafia.styled.js CHANGED Viewed

@@ -4,7 +4,7 @@ export const LimitReachedContentRatafiaStyled = styled.div `
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 1rem;
+  gap: var(--global-gap);
   align-self: stretch;
   @media ${device['portrait-tablets']} {
     gap: 2rem;
@@ -26,7 +26,7 @@ export const LimitReachedContentRatafiaStyled = styled.div `
         align-items: center;
       }
-      border-radius: 0.25rem;
+      border-radius: var(--s-border-radius);
       background: var(--neutral-neutral-6);
       &__icon {
         width: 0.875rem;

package/dist/src/components/organisms/LimitReachedContentRatafia/LimitReachedContentRatafia.styled.ts CHANGED Viewed

@@ -5,7 +5,7 @@ export const LimitReachedContentRatafiaStyled = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 1rem;
+  gap: var(--global-gap);
   align-self: stretch;
   @media ${device['portrait-tablets']} {
     gap: 2rem;
@@ -27,7 +27,7 @@ export const LimitReachedContentRatafiaStyled = styled.div`
         align-items: center;
       }
-      border-radius: 0.25rem;
+      border-radius: var(--s-border-radius);
       background: var(--neutral-neutral-6);
       &__icon {
         width: 0.875rem;

package/dist/src/components/pages/EsignatureLandingPage/EsignatureLandingPage.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { FaqSection, JumbotronRatafiaSection, StepsRatafiaSection } from '../../sections';
-export const EsignatureLandingPage = ({ jumbotronSectionProps, stepsSectionProps, trustPilotBox, faqGroupProps }) => {
-    return (_jsxs(_Fragment, { children: [_jsx(JumbotronRatafiaSection, { content: jumbotronSectionProps.content, alternativeStyles: jumbotronSectionProps.alternativeStyles, children: jumbotronSectionProps.children }), _jsx(StepsRatafiaSection, { ...stepsSectionProps }), trustPilotBox ?? trustPilotBox, _jsx(FaqSection, { groups: faqGroupProps, givenClass: 'faq-ratafia-section' })] }));
+import { BenefitsRatafiaSection, FaqSection, JumbotronRatafiaSection, StepsRatafiaSection } from '../../sections';
+export const EsignatureLandingPage = ({ jumbotronSectionProps, stepsSectionProps, benefitsSectionProps, trustPilotBox, faqGroupProps }) => {
+    return (_jsxs(_Fragment, { children: [_jsx(JumbotronRatafiaSection, { content: jumbotronSectionProps.content, alternativeStyles: jumbotronSectionProps.alternativeStyles, children: jumbotronSectionProps.children }), _jsx(StepsRatafiaSection, { ...stepsSectionProps }), _jsx(BenefitsRatafiaSection, { ...benefitsSectionProps }), trustPilotBox ?? trustPilotBox, _jsx(FaqSection, { groups: faqGroupProps, givenClass: 'faq-ratafia-section' })] }));
 };

package/dist/src/components/pages/EsignatureLandingPage/EsignatureLandingPage.tsx CHANGED Viewed

@@ -1,11 +1,12 @@
 import React from 'react'
-import { FaqSection, JumbotronRatafiaSection, StepsRatafiaSection } from '../../sections'
+import { BenefitsRatafiaSection, FaqSection, JumbotronRatafiaSection, StepsRatafiaSection } from '../../sections'
 import { type EsignatureLandingPageProps } from './EsignatureLandingPageProps.types'
 export const EsignatureLandingPage: React.FC<EsignatureLandingPageProps> = ({
   jumbotronSectionProps,
   stepsSectionProps,
+  benefitsSectionProps,
   trustPilotBox,
   faqGroupProps
 }) => {
@@ -18,6 +19,7 @@ export const EsignatureLandingPage: React.FC<EsignatureLandingPageProps> = ({
         {jumbotronSectionProps.children}
       </JumbotronRatafiaSection>
       <StepsRatafiaSection {...stepsSectionProps} />
+      <BenefitsRatafiaSection {...benefitsSectionProps} />
       {trustPilotBox ?? trustPilotBox}
       <FaqSection groups={faqGroupProps} givenClass='faq-ratafia-section' />
     </>

package/dist/src/components/pages/EsignatureLandingPage/EsignatureLandingPageProps.types.d.ts CHANGED Viewed

@@ -1,8 +1,9 @@
-import { JumbotronRatafiaSectionProps, StepsRatafiaSectionProps } from '../../sections';
+import { BenefitsRatafiaSectionProps, JumbotronRatafiaSectionProps, StepsRatafiaSectionProps } from '../../sections';
 import type { FaqGroupProps } from '../../organisms';
 export interface EsignatureLandingPageProps {
     jumbotronSectionProps: JumbotronRatafiaSectionProps;
     stepsSectionProps: StepsRatafiaSectionProps;
+    benefitsSectionProps: BenefitsRatafiaSectionProps;
     faqGroupProps: FaqGroupProps[];
     trustPilotBox?: React.ReactNode;
 }

package/dist/src/components/pages/EsignatureLandingPage/EsignatureLandingPageProps.types.ts CHANGED Viewed

@@ -1,9 +1,10 @@
-import { JumbotronRatafiaSectionProps, StepsRatafiaSectionProps } from '../../sections'
+import { BenefitsRatafiaSectionProps, JumbotronRatafiaSectionProps, StepsRatafiaSectionProps } from '../../sections'
 import type { FaqGroupProps } from '../../organisms'
 export interface EsignatureLandingPageProps {
   jumbotronSectionProps: JumbotronRatafiaSectionProps
   stepsSectionProps: StepsRatafiaSectionProps
+  benefitsSectionProps: BenefitsRatafiaSectionProps
   faqGroupProps: FaqGroupProps[]
   trustPilotBox?: React.ReactNode
 }

package/dist/src/components/pages/FaqsPage/FaqsPage.styled.js CHANGED Viewed

@@ -3,14 +3,14 @@ import styled from 'styled-components';
 export const FaqsPageStyled = styled.div `
   .titles {
     display: flex;
-    padding: 40px 24px;
+    padding: 40px 1.5rem;
     flex-direction: column;
     align-items: center;
-    gap: 8px;
+    gap: 0.5rem;
     background: var(--primary-main-light-6);
     @media ${device['landscape-tablets']} {
-      padding: 40px 32px 80px 32px;
+      padding: 40px 2rem 80px 2rem;
     }
     .title {
@@ -20,8 +20,8 @@ export const FaqsPageStyled = styled.div `
       line-height: 18px;
       letter-spacing: -0.3px;
       border-bottom: get-color(neutral, neutral-2) 1px solid;
-      padding-bottom: 8px;
-      margin-bottom: 8px;
+      padding-bottom: 0.5rem;
+      margin-bottom: 0.5rem;
     }
     .subtitle {
@@ -42,7 +42,7 @@ export const FaqsPageStyled = styled.div `
   .main-content {
     display: flex;
     flex-direction: row;
-    padding: 32px 24px;
+    padding: 2rem 1.5rem;
     gap: var(--global-gap);
     background: var(--primary-main-light-6);
     justify-content: center;
@@ -53,7 +53,7 @@ export const FaqsPageStyled = styled.div `
     }
     @media ${device['landscape-tablets']} {
-      padding: 32px;
+      padding: 2rem;
       gap: 106px;
     }
   }

package/dist/src/components/pages/FaqsPage/FaqsPage.styled.ts CHANGED Viewed

@@ -4,14 +4,14 @@ import styled from 'styled-components'
 export const FaqsPageStyled = styled.div`
   .titles {
     display: flex;
-    padding: 40px 24px;
+    padding: 40px 1.5rem;
     flex-direction: column;
     align-items: center;
-    gap: 8px;
+    gap: 0.5rem;
     background: var(--primary-main-light-6);
     @media ${device['landscape-tablets']} {
-      padding: 40px 32px 80px 32px;
+      padding: 40px 2rem 80px 2rem;
     }
     .title {
@@ -21,8 +21,8 @@ export const FaqsPageStyled = styled.div`
       line-height: 18px;
       letter-spacing: -0.3px;
       border-bottom: get-color(neutral, neutral-2) 1px solid;
-      padding-bottom: 8px;
-      margin-bottom: 8px;
+      padding-bottom: 0.5rem;
+      margin-bottom: 0.5rem;
     }
     .subtitle {
@@ -43,7 +43,7 @@ export const FaqsPageStyled = styled.div`
   .main-content {
     display: flex;
     flex-direction: row;
-    padding: 32px 24px;
+    padding: 2rem 1.5rem;
     gap: var(--global-gap);
     background: var(--primary-main-light-6);
     justify-content: center;
@@ -54,7 +54,7 @@ export const FaqsPageStyled = styled.div`
     }
     @media ${device['landscape-tablets']} {
-      padding: 32px;
+      padding: 2rem;
       gap: 106px;
     }
   }

package/dist/src/components/pages/RatafiaPricingPage/RatafiaPricingPage.styled.js CHANGED Viewed

@@ -18,7 +18,7 @@ export const RatafiaPricingPageStyled = styled.div `
     &__cards {
       display: flex;
       flex-direction: row;
-      gap: 1rem;
+      gap: var(--global-gap);
       @media ${device.mobile} {
         flex-direction: column;

package/dist/src/components/pages/RatafiaPricingPage/RatafiaPricingPage.styled.ts CHANGED Viewed

@@ -19,7 +19,7 @@ export const RatafiaPricingPageStyled = styled.div`
     &__cards {
       display: flex;
       flex-direction: row;
-      gap: 1rem;
+      gap: var(--global-gap);
       @media ${device.mobile} {
         flex-direction: column;

package/dist/src/components/sections/AsideMenuSection/AsideMenuSection.styled.js CHANGED Viewed

@@ -21,7 +21,7 @@ export const AsideMenuSectionStyled = styled.aside `
       font-size: 14px;
       line-height: 18px;
       letter-spacing: -0.3px;
-      padding: 16px 0;
+      padding: 1rem 0;
       border-top: var(--neutral-neutral-4) 1px solid;
       border-bottom: var(--neutral-neutral-4) 1px solid;

package/dist/src/components/sections/AsideMenuSection/AsideMenuSection.styled.ts CHANGED Viewed

@@ -22,7 +22,7 @@ export const AsideMenuSectionStyled = styled.aside`
       font-size: 14px;
       line-height: 18px;
       letter-spacing: -0.3px;
-      padding: 16px 0;
+      padding: 1rem 0;
       border-top: var(--neutral-neutral-4) 1px solid;
       border-bottom: var(--neutral-neutral-4) 1px solid;

package/dist/src/components/sections/BenefitsRatafiaSection/BenefitsRatafiaSection.js CHANGED Viewed

@@ -1,7 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BenefitRatafiaCardList } from '../../molecules';
 import { BenefitsRatafiaSectionStyled } from './BenefitsRatafiaSection.styled';
-const BenefitsRatafiaSection = ({ title, description, benefits }) => {
-    return (_jsx(BenefitsRatafiaSectionStyled, { className: 'benefit-ratafia-section', children: _jsxs("div", { className: 'benefit-ratafia-section__wrapper background-ratafia-animation', children: [_jsxs("div", { className: 'benefit-ratafia-section__wrapper__title', children: [_jsx("h2", { className: 'sans-serif --super-large --bold-weight benefit-ratafia-section__wrapper__title__text', children: title }), _jsx("p", { className: 'sans-serif --super-medium benefit-ratafia-section__wrapper__title__description', children: description })] }), _jsx(BenefitRatafiaCardList, { benefits: benefits })] }) }));
+import classNames from 'classnames';
+const BenefitsRatafiaSection = ({ title, description, benefits, descriptionRichtext }) => {
+    const isEsignatureLanding = descriptionRichtext !== undefined;
+    const classnames = classNames({
+        '--is-esignature': isEsignatureLanding
+    });
+    return (_jsx(BenefitsRatafiaSectionStyled, { className: 'benefit-ratafia-section', children: _jsxs("div", { className: `benefit-ratafia-section__wrapper background-ratafia-animation ${classnames}`, children: [_jsxs("div", { className: 'benefit-ratafia-section__wrapper__title', children: [_jsx("h2", { className: 'sans-serif --super-large --bold-weight benefit-ratafia-section__wrapper__title__text', children: title }), _jsx("p", { className: 'sans-serif --super-medium benefit-ratafia-section__wrapper__title__description', children: isEsignatureLanding ? descriptionRichtext : description })] }), _jsx(BenefitRatafiaCardList, { benefits: benefits })] }) }));
 };
 export default BenefitsRatafiaSection;

package/dist/src/components/sections/BenefitsRatafiaSection/BenefitsRatafiaSection.styled.js CHANGED Viewed

@@ -1,3 +1,5 @@
+import backElementL from '../../../../images/svg/benefit-bckground-l.svg';
+import backElementS from '../../../../images/svg/benefit-bckground-s.svg';
 import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const BenefitsRatafiaSectionStyled = styled.section `
@@ -24,7 +26,7 @@ export const BenefitsRatafiaSectionStyled = styled.section `
       align-self: stretch;
       padding: 1.5rem;
       gap: 2rem;
-      border-radius: 16px;
+      border-radius: var(--l-border-radius);
       max-width: 1200px;
       @media ${device['landscape-tablets']} {
@@ -40,7 +42,7 @@ export const BenefitsRatafiaSectionStyled = styled.section `
         justify-content: center;
         align-items: flex-start;
         align-self: stretch;
-        gap: 1rem;
+        gap: var(--global-gap);
         &__text {
           color: var(--others-white);
@@ -49,6 +51,45 @@ export const BenefitsRatafiaSectionStyled = styled.section `
           color: var(--others-white);
         }
       }
+      &.--is-esignature {
+        background-image: url(${backElementS});
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+        animation: none;
+        @media ${device['landscape-tablets']} {
+          background-image: url(${backElementL});
+          background-size: cover, cover;
+          background-position: center, center;
+          background-repeat: no-repeat, no-repeat;
+        }
+      }
+      .benefit-ratafia-card {
+        box-shadow: none;
+      }
+    }
+  }
+  .--is-esignature {
+    .benefit-ratafia-section {
+      &__wrapper {
+        &__title {
+          &__text {
+            color: var(--primary-main-dark-2);
+          }
+          &__description {
+            color: var(--neutral-neutral-1);
+            a {
+              color: var(--primary-main);
+              text-decoration: underline;
+            }
+          }
+        }
+      }
     }
   }
 `;