@npm_leadtech/legal-lib-components 7.44.6 → 7.45.0

package/dist/src/components/sections/AboutUsSection/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AboutUsSection } from './AboutUsSection';
+export { type AboutUsSectionProps } from './AboutUsSectionProps.types';

package/dist/src/components/sections/AboutUsSection/index.js

@@ -0,0 +1 @@
+export { default as AboutUsSection } from './AboutUsSection';

package/dist/src/components/sections/AboutUsSection/index.ts

@@ -0,0 +1,2 @@
+export { default as AboutUsSection } from './AboutUsSection'
+export { type AboutUsSectionProps } from './AboutUsSectionProps.types'

package/dist/src/components/sections/AsSeeInSection/AsSeeInSection.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AsSeeInContent } from '../../organisms';
+import { AsSeeInContent, ContactContent } from '../../organisms';
 import { AsSeeInSectionStyled } from './AsSeeInSection.styled';
-const AsSeeInSection = ({ title, contentAsSeeIn }) => {
+const AsSeeInSection = ({ title, contentAsSeeIn, contactSectionTitle, contactSectionText, contactSectionBlocks }) => {
     if (contentAsSeeIn.trustWorthyImages.images.length === 0) {
         return null;
     }
-    return (_jsx(AsSeeInSectionStyled, { className: 'as-seen-in-section-box', children: _jsxs("div", { className: 'as-seen-in-section wrapper', children: [_jsx("h2", { className: 'as-seen-in-section__title', children: title }), _jsx(AsSeeInContent, { trustWorthyImages: contentAsSeeIn.trustWorthyImages, children: contentAsSeeIn.children })] }) }));
+    return (_jsxs(AsSeeInSectionStyled, { className: 'as-seen-in-section-box', children: [_jsxs("div", { className: 'as-seen-in-section wrapper', children: [_jsx("h2", { className: 'as-seen-in-section__title', children: title }), _jsx(AsSeeInContent, { trustWorthyImages: contentAsSeeIn.trustWorthyImages, children: contentAsSeeIn.children })] }), _jsx(ContactContent, { title: contactSectionTitle, text: contactSectionText, contactCards: contactSectionBlocks })] }));
 };
 export default AsSeeInSection;

package/dist/src/components/sections/AsSeeInSection/AsSeeInSection.scss

@@ -0,0 +1,37 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.as-seen-in-section-box {
+  flex-shrink: 0;
+  background-color: get-color(secondary, main-light-5);
+  padding: 0 1.5rem;
+
+  @include laptop {
+    margin-top: 12rem;
+  }
+
+  .as-seen-in-section {
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+    background: get-color(others, white);
+    transform: translateY(-5rem);
+    padding: 1.5rem 0;
+
+    @include laptop {
+      transform: translateY(-50%);
+    }
+
+    &__title {
+      color: var(--neutral-neutral-2);
+      text-align: center;
+      font-size: 32px;
+      font-family: var(--font-serif);
+      font-style: normal;
+      font-weight: 400;
+      line-height: 42px;
+      letter-spacing: -0.3px;
+      margin: 1rem 0;
+    }
+  }
+}

package/dist/src/components/sections/AsSeeInSection/AsSeeInSection.styled.js

@@ -2,28 +2,35 @@ import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const AsSeeInSectionStyled = styled.section `
   flex-shrink: 0;
-  background-color: var(--neutral-neutral-6);
-  padding: 2rem 1.5rem;
+  background-color: get-color(secondary, main-light-5);
+  padding: 0 1.5rem;
 
-  @media ${device['landscape-tablets']} {
-    padding: 3rem 1.5rem;
+  @media ${device.laptop} {
+    margin-top: 12rem;
   }
 
   .as-seen-in-section {
     display: flex;
     flex-direction: column;
+    box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
     background: get-color(others, white);
+    transform: translateY(-5rem);
+    padding: 1.5rem 0;
+
+    @media ${device.laptop} {
+      transform: translateY(-50%);
+    }
 
     &__title {
-      color: var(--neutral-neutral-1);
+      color: var(--neutral-neutral-2);
       text-align: center;
-      font-size: 1.75rem;
-      font-family: var(--font-sans);
+      font-size: 32px;
+      font-family: var(--font-serif);
       font-style: normal;
-      font-weight: 700;
-      line-height: 1;
+      font-weight: 400;
+      line-height: 42px;
       letter-spacing: -0.3px;
-      margin: 0rem 0 1.5rem 0;
+      margin: 1rem 0;
     }
   }
 `;

package/dist/src/components/sections/AsSeeInSection/AsSeeInSection.styled.ts

@@ -3,28 +3,35 @@ import styled from 'styled-components'
 
 export const AsSeeInSectionStyled = styled.section`
   flex-shrink: 0;
-  background-color: var(--neutral-neutral-6);
-  padding: 2rem 1.5rem;
+  background-color: get-color(secondary, main-light-5);
+  padding: 0 1.5rem;
 
-  @media ${device['landscape-tablets']} {
-    padding: 3rem 1.5rem;
+  @media ${device.laptop} {
+    margin-top: 12rem;
   }
 
   .as-seen-in-section {
     display: flex;
     flex-direction: column;
+    box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
     background: get-color(others, white);
+    transform: translateY(-5rem);
+    padding: 1.5rem 0;
+
+    @media ${device.laptop} {
+      transform: translateY(-50%);
+    }
 
     &__title {
-      color: var(--neutral-neutral-1);
+      color: var(--neutral-neutral-2);
       text-align: center;
-      font-size: 1.75rem;
-      font-family: var(--font-sans);
+      font-size: 32px;
+      font-family: var(--font-serif);
       font-style: normal;
-      font-weight: 700;
-      line-height: 1;
+      font-weight: 400;
+      line-height: 42px;
       letter-spacing: -0.3px;
-      margin: 0rem 0 1.5rem 0;
+      margin: 1rem 0;
     }
   }
 `

package/dist/src/components/sections/AsSeeInSection/AsSeeInSection.tsx

@@ -1,10 +1,16 @@
 import React, { type FC } from 'react'
 
-import { AsSeeInContent } from '../../organisms'
+import { AsSeeInContent, ContactContent } from '../../organisms'
 import { type AsSeeInSectionProps } from './AsSeeInSectionProps.types'
 import { AsSeeInSectionStyled } from './AsSeeInSection.styled'
 
-const AsSeeInSection: FC<AsSeeInSectionProps> = ({ title, contentAsSeeIn }) => {
+const AsSeeInSection: FC<AsSeeInSectionProps> = ({
+  title,
+  contentAsSeeIn,
+  contactSectionTitle,
+  contactSectionText,
+  contactSectionBlocks
+}) => {
   if (contentAsSeeIn.trustWorthyImages.images.length === 0) {
     return null
   }
@@ -15,6 +21,7 @@ const AsSeeInSection: FC<AsSeeInSectionProps> = ({ title, contentAsSeeIn }) => {
         <h2 className='as-seen-in-section__title'>{title}</h2>
         <AsSeeInContent trustWorthyImages={contentAsSeeIn.trustWorthyImages}>{contentAsSeeIn.children}</AsSeeInContent>
       </div>
+      <ContactContent title={contactSectionTitle} text={contactSectionText} contactCards={contactSectionBlocks} />
     </AsSeeInSectionStyled>
   )
 }

package/dist/src/components/sections/AsSeeInSection/AsSeeInSectionProps.types.d.ts

@@ -1,5 +1,9 @@
 import { type AsSeeInContentProps } from '../../organisms';
+import { ContactCardProps } from '../../atoms';
 export interface AsSeeInSectionProps {
     title: string;
     contentAsSeeIn: AsSeeInContentProps;
+    contactSectionTitle: string;
+    contactSectionText: string;
+    contactSectionBlocks?: ContactCardProps[];
 }

package/dist/src/components/sections/AsSeeInSection/AsSeeInSectionProps.types.ts

@@ -1,6 +1,10 @@
 import { type AsSeeInContentProps } from '../../organisms'
+import { ContactCardProps } from '../../atoms'
 
 export interface AsSeeInSectionProps {
   title: string
   contentAsSeeIn: AsSeeInContentProps
+  contactSectionTitle: string
+  contactSectionText: string
+  contactSectionBlocks?: ContactCardProps[]
 }

package/dist/src/components/sections/BenefitsRatafiaSection/BenefitsRatafiaSectionProps.types.d.ts

@@ -1,8 +1,8 @@
-import { type BenefitCardProps } from '../../atoms';
+import { type BenefitRatafiaCardProps } from '../../atoms';
 import React from 'react';
 export interface BenefitsRatafiaSectionProps {
     title: string;
     description: string;
     descriptionRichtext: React.ReactNode;
-    benefits: BenefitCardProps[];
+    benefits: BenefitRatafiaCardProps[];
 }

package/dist/src/components/sections/BenefitsRatafiaSection/BenefitsRatafiaSectionProps.types.ts

@@ -1,9 +1,9 @@
-import { type BenefitCardProps } from '../../atoms'
+import { type BenefitRatafiaCardProps } from '../../atoms'
 import React from 'react'
 
 export interface BenefitsRatafiaSectionProps {
   title: string
   description: string
   descriptionRichtext: React.ReactNode
-  benefits: BenefitCardProps[]
+  benefits: BenefitRatafiaCardProps[]
 }

package/dist/src/components/sections/CardStorySection/CardStorySection.styled.js

@@ -7,10 +7,9 @@ export const CardStorySectionStyled = styled.div `
   .card-story-section {
     &__title {
       font-weight: 700;
-      font-size: 1.75rem;
+      font-size: 1.8rem;
       color: var(--neutral-neutral-1);
       font-family: var(--font-sans);
-      letter-spacing: -0.3px;
       padding-bottom: 1.5rem;
     }
     &__text {

package/dist/src/components/sections/CardStorySection/CardStorySection.styled.ts

@@ -8,10 +8,9 @@ export const CardStorySectionStyled = styled.div`
   .card-story-section {
     &__title {
       font-weight: 700;
-      font-size: 1.75rem;
+      font-size: 1.8rem;
       color: var(--neutral-neutral-1);
       font-family: var(--font-sans);
-      letter-spacing: -0.3px;
       padding-bottom: 1.5rem;
     }
     &__text {

package/dist/src/components/sections/ContactSection/ContactSection.styled.js

@@ -30,12 +30,10 @@ export const ContactSectionStyled = styled.section `
   .contact-left-container {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
-    margin-bottom: 2.5rem;
 
     @media ${device['portrait-tablets']} {
       padding-left: 0;
       padding-right: 0;
-      margin-bottom: 1.5rem;
       width: 45%;
     }
   }

package/dist/src/components/sections/ContactSection/ContactSection.styled.ts

@@ -31,12 +31,10 @@ export const ContactSectionStyled = styled.section`
   .contact-left-container {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
-    margin-bottom: 2.5rem;
 
     @media ${device['portrait-tablets']} {
       padding-left: 0;
       padding-right: 0;
-      margin-bottom: 1.5rem;
       width: 45%;
     }
   }

package/dist/src/components/sections/ExpertsSection/ExpertsSection.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ExpertCardList } from '../../molecules';
 import { ExpertsSectionStyled } from './ExpertsSection.styled';
-const ExpertsSection = ({ title, description, contentExpertCardList }) => {
+const ExpertsSection = ({ title, contentExpertCardList }) => {
     if (contentExpertCardList.contentExpertCard.length === 0) {
         return null;
     }
-    return (_jsxs(ExpertsSectionStyled, { className: 'experts-section', children: [_jsx("h2", { className: 'experts-section__title', children: title }), _jsx("div", { className: 'experts-section__description', children: description }), _jsx(ExpertCardList, { contentExpertCard: contentExpertCardList.contentExpertCard })] }));
+    return (_jsxs(ExpertsSectionStyled, { className: 'experts-section', children: [_jsx("h2", { className: 'experts-section__title', children: title }), _jsx(ExpertCardList, { contentExpertCard: contentExpertCardList.contentExpertCard })] }));
 };
 export default ExpertsSection;

package/dist/src/components/sections/ExpertsSection/ExpertsSection.styled.js

@@ -4,19 +4,14 @@ export const ExpertsSectionStyled = styled.div `
   display: flex;
   justify-content: center;
   flex-direction: column;
-  background-color: var(--primary-main-light-6);
-  padding: 0 1.5rem 2rem 1.5rem;
-
-  @media ${device['landscape-tablets']} {
-    padding: 0 1.5rem 3rem 1.5rem;
-  }
+  background-color: var(--neutral-neutral-6);
+  margin-bottom: 4rem;
 
   .experts-section {
     &__title {
-      font-family: var(--font-sans);
-      font-size: 1.75rem;
-      color: var(--neutral-neutral-1);
-      font-weight: 700;
+      font-family: var(--font-serif);
+      font-size: 32px;
+      font-weight: 400;
       line-height: 42px;
       letter-spacing: -0.3px;
       text-align: center;
@@ -28,9 +23,5 @@ export const ExpertsSectionStyled = styled.div `
         width: 100%;
       }
     }
-
-    &__description {
-      text-align: center;
-    }
   }
 `;

package/dist/src/components/sections/ExpertsSection/ExpertsSection.styled.ts

@@ -5,19 +5,14 @@ export const ExpertsSectionStyled = styled.div`
   display: flex;
   justify-content: center;
   flex-direction: column;
-  background-color: var(--primary-main-light-6);
-  padding: 0 1.5rem 2rem 1.5rem;
-
-  @media ${device['landscape-tablets']} {
-    padding: 0 1.5rem 3rem 1.5rem;
-  }
+  background-color: var(--neutral-neutral-6);
+  margin-bottom: 4rem;
 
   .experts-section {
     &__title {
-      font-family: var(--font-sans);
-      font-size: 1.75rem;
-      color: var(--neutral-neutral-1);
-      font-weight: 700;
+      font-family: var(--font-serif);
+      font-size: 32px;
+      font-weight: 400;
       line-height: 42px;
       letter-spacing: -0.3px;
       text-align: center;
@@ -29,9 +24,5 @@ export const ExpertsSectionStyled = styled.div`
         width: 100%;
       }
     }
-
-    &__description {
-      text-align: center;
-    }
   }
 `

package/dist/src/components/sections/ExpertsSection/ExpertsSection.tsx

@@ -4,7 +4,7 @@ import { ExpertCardList } from '../../molecules'
 import { type ExpertsSectionProps } from './ExpertsSectionProps.types'
 import { ExpertsSectionStyled } from './ExpertsSection.styled'
 
-const ExpertsSection: FC<ExpertsSectionProps> = ({ title, description, contentExpertCardList }) => {
+const ExpertsSection: FC<ExpertsSectionProps> = ({ title, contentExpertCardList }) => {
   if (contentExpertCardList.contentExpertCard.length === 0) {
     return null
   }
@@ -12,7 +12,6 @@ const ExpertsSection: FC<ExpertsSectionProps> = ({ title, description, contentEx
   return (
     <ExpertsSectionStyled className='experts-section'>
       <h2 className='experts-section__title'>{title}</h2>
-      <div className='experts-section__description'>{description}</div>
       <ExpertCardList contentExpertCard={contentExpertCardList.contentExpertCard} />
     </ExpertsSectionStyled>
   )

package/dist/src/components/sections/ExpertsSection/ExpertsSectionProps.types.d.ts

@@ -1,7 +1,5 @@
 import { type ExpertCardListProps } from '../../molecules/ExpertCardList';
-import React from 'react';
 export interface ExpertsSectionProps {
     title: string;
-    description: React.ReactNode;
     contentExpertCardList: ExpertCardListProps;
 }

package/dist/src/components/sections/ExpertsSection/ExpertsSectionProps.types.ts

@@ -1,8 +1,6 @@
 import { type ExpertCardListProps } from '../../molecules/ExpertCardList'
-import React from 'react'
 
 export interface ExpertsSectionProps {
   title: string
-  description: React.ReactNode
   contentExpertCardList: ExpertCardListProps
 }

package/dist/src/components/sections/FaqSection/FaqSection.js

@@ -4,5 +4,5 @@ import { FaqGroup } from '../../organisms';
 import { FaqSectionStyled } from './FaqSection.styled';
 export const FaqSection = ({ groups, givenClass }) => {
     const classnames = classNames(`faqSection ${givenClass ?? ''}`);
-    return (_jsx(FaqSectionStyled, { className: classnames, itemScope: true, itemType: 'https://www.schema.org/FAQPage', children: groups?.map((group) => _jsx(FaqGroup, { ...group }, group.id)) }));
+    return (_jsx(FaqSectionStyled, { className: classnames, itemScope: true, itemType: 'https://www.schema.org/FAQPage', children: groups.map((group) => (_jsx(FaqGroup, { ...group }, group.id))) }));
 };

package/dist/src/components/sections/FaqSection/FaqSection.tsx

@@ -10,7 +10,9 @@ export const FaqSection: React.FC<FaqSectionProps> = ({ groups, givenClass }) =>
 
   return (
     <FaqSectionStyled className={classnames} itemScope itemType='https://www.schema.org/FAQPage'>
-      {groups?.map((group) => <FaqGroup key={group.id} {...group} />)}
+      {groups.map((group) => (
+        <FaqGroup key={group.id} {...group} />
+      ))}
     </FaqSectionStyled>
   )
 }

package/dist/src/components/sections/FeaturesRatafiaSection/FeaturesRatafiaSection.styled.js

@@ -39,7 +39,7 @@ export const FeaturesRatafiaSectionStyled = styled.section `
 
       &__children {
         display: none;
-        width: 100%;
+        min-width: 50%;
 
         @media ${device.desktop} {
           display: flex;
@@ -48,7 +48,6 @@ export const FeaturesRatafiaSectionStyled = styled.section `
         }
         img {
           width: 100%;
-          height: auto;
         }
       }
     }

package/dist/src/components/sections/FeaturesRatafiaSection/FeaturesRatafiaSection.styled.ts

@@ -40,7 +40,7 @@ export const FeaturesRatafiaSectionStyled = styled.section`
 
       &__children {
         display: none;
-        width: 100%;
+        min-width: 50%;
 
         @media ${device.desktop} {
           display: flex;
@@ -49,7 +49,6 @@ export const FeaturesRatafiaSectionStyled = styled.section`
         }
         img {
           width: 100%;
-          height: auto;
         }
       }
     }

package/dist/src/components/sections/GuidelinesSection/GuidelinesSection.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { GuidelinesContent } from '../../organisms/GuidelinesContent';
 import { GuidelinesSectionStyled } from './GuidelinesSection.styled';
 const GuidelinesSection = ({ contentGuidelines }) => {
-    return (_jsx(GuidelinesSectionStyled, { className: 'guidelines-section', children: _jsx(GuidelinesContent, { title: contentGuidelines.title, image: contentGuidelines.image, detail: contentGuidelines.detail, tryNowText: contentGuidelines.tryNowText, tryNowButtonText: contentGuidelines.tryNowButtonText, tryNowButtonLink: contentGuidelines.tryNowButtonLink, tryNowButtonDataQa: contentGuidelines.tryNowButtonDataQa, tryNowImage: contentGuidelines.tryNowImage, children: contentGuidelines.children }) }));
+    return (_jsx(GuidelinesSectionStyled, { className: 'guidelines-section', children: _jsx(GuidelinesContent, { title: contentGuidelines.title, image: contentGuidelines.image, detail: contentGuidelines.detail, children: contentGuidelines.children }) }));
 };
 export default GuidelinesSection;

package/dist/src/components/sections/GuidelinesSection/GuidelinesSection.tsx

@@ -11,11 +11,6 @@ const GuidelinesSection: FC<GuidelinesSectionProps> = ({ contentGuidelines }) =>
         title={contentGuidelines.title}
         image={contentGuidelines.image}
         detail={contentGuidelines.detail}
-        tryNowText={contentGuidelines.tryNowText}
-        tryNowButtonText={contentGuidelines.tryNowButtonText}
-        tryNowButtonLink={contentGuidelines.tryNowButtonLink}
-        tryNowButtonDataQa={contentGuidelines.tryNowButtonDataQa}
-        tryNowImage={contentGuidelines.tryNowImage}
       >
         {contentGuidelines.children}
       </GuidelinesContent>

package/dist/src/components/sections/HowGetYourFormsSection/HowGetYourFormsSection.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HowGetYourFormsSectionStyled } from './HowGetYourFormsSection.styled';
 import { ListStepsGetForm } from '../../organisms';
-const HowGetYourFormsSection = ({ title = '', steps = [], backgroundImage }) => {
+import imageFile from '../../../../images/png/graphics-grey-02.png';
+const HowGetYourFormsSection = ({ title = '', steps = [], hasBackgroundImage = true }) => {
     if (steps.length === 0)
         return null;
-    return (_jsxs(HowGetYourFormsSectionStyled, { className: 'how-it-works-wrapper', children: [backgroundImage, _jsx("p", { className: 'works-title serif --super-large', children: title }), _jsx(ListStepsGetForm, { steps: steps })] }));
+    return (_jsxs(HowGetYourFormsSectionStyled, { className: 'how-it-works-wrapper', style: hasBackgroundImage ? { backgroundImage: `url(${imageFile})` } : {}, children: [_jsx("p", { className: 'works-title serif --super-large', children: title }), _jsx(ListStepsGetForm, { steps: steps })] }));
 };
 export default HowGetYourFormsSection;

package/dist/src/components/sections/HowGetYourFormsSection/HowGetYourFormsSection.styled.js

@@ -1,17 +1,15 @@
-import { size } from '../../../globalStyles/breakpoints';
+import { device, size } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const HowGetYourFormsSectionStyled = styled.section `
   background-color: var(--neutral-neutral-6);
-  position: relative;
+  @media ${device.laptop} {
+    background-repeat: no-repeat;
+    background-position: top right;
+    background-size: 21rem;
+  }
 
-  .how-it-works__background {
-    position: absolute !important;
-    right: 0;
-    width: 388px;
-    height: 444px;
-    @media only screen and (max-width: ${size.md}) {
-      display: none;
-    }
+  @media only screen and (max-width: ${size.md}) {
+    background-image: none !important;
   }
 
   .works-title {
@@ -19,8 +17,6 @@ export const HowGetYourFormsSectionStyled = styled.section `
     font-family: var(--font-serif);
     text-align: center;
     padding-top: 4rem;
-    padding-right: 1.5rem;
-    padding-left: 1.5rem;
     @media only screen and (max-width: ${size.md}) {
       padding-top: 2.5rem;
     }

package/dist/src/components/sections/HowGetYourFormsSection/HowGetYourFormsSection.styled.ts

@@ -1,18 +1,16 @@
-import { size } from '../../../globalStyles/breakpoints'
+import { device, size } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
 export const HowGetYourFormsSectionStyled = styled.section`
   background-color: var(--neutral-neutral-6);
-  position: relative;
+  @media ${device.laptop} {
+    background-repeat: no-repeat;
+    background-position: top right;
+    background-size: 21rem;
+  }
 
-  .how-it-works__background {
-    position: absolute !important;
-    right: 0;
-    width: 388px;
-    height: 444px;
-    @media only screen and (max-width: ${size.md}) {
-      display: none;
-    }
+  @media only screen and (max-width: ${size.md}) {
+    background-image: none !important;
   }
 
   .works-title {
@@ -20,8 +18,6 @@ export const HowGetYourFormsSectionStyled = styled.section`
     font-family: var(--font-serif);
     text-align: center;
     padding-top: 4rem;
-    padding-right: 1.5rem;
-    padding-left: 1.5rem;
     @media only screen and (max-width: ${size.md}) {
       padding-top: 2.5rem;
     }

package/dist/src/components/sections/HowGetYourFormsSection/HowGetYourFormsSection.tsx

@@ -3,12 +3,19 @@ import React from 'react'
 import { type HowGetYourFormsSectionProps } from './HowGetYourFormsSectionProps.types'
 import { HowGetYourFormsSectionStyled } from './HowGetYourFormsSection.styled'
 import { ListStepsGetForm } from '../../organisms'
+import imageFile from '../../../../images/png/graphics-grey-02.png'
 
-const HowGetYourFormsSection: React.FC<HowGetYourFormsSectionProps> = ({ title = '', steps = [], backgroundImage }) => {
+const HowGetYourFormsSection: React.FC<HowGetYourFormsSectionProps> = ({
+  title = '',
+  steps = [],
+  hasBackgroundImage = true
+}) => {
   if (steps.length === 0) return null
   return (
-    <HowGetYourFormsSectionStyled className='how-it-works-wrapper'>
-      {backgroundImage}
+    <HowGetYourFormsSectionStyled
+      className='how-it-works-wrapper'
+      style={hasBackgroundImage ? { backgroundImage: `url(${imageFile})` } : {}}
+    >
       <p className='works-title serif --super-large'>{title}</p>
       <ListStepsGetForm steps={steps} />
     </HowGetYourFormsSectionStyled>

package/dist/src/components/sections/HowGetYourFormsSection/HowGetYourFormsSectionProps.types.d.ts

@@ -2,5 +2,5 @@ import { type StepGetFormProps } from '../../molecules';
 export interface HowGetYourFormsSectionProps {
     title: string;
     steps: StepGetFormProps[];
-    backgroundImage?: React.JSX.Element | null;
+    hasBackgroundImage: boolean;
 }

package/dist/src/components/sections/HowGetYourFormsSection/HowGetYourFormsSectionProps.types.ts

@@ -3,5 +3,5 @@ import { type StepGetFormProps } from '../../molecules'
 export interface HowGetYourFormsSectionProps {
   title: string
   steps: StepGetFormProps[]
-  backgroundImage?: React.JSX.Element | null
+  hasBackgroundImage: boolean
 }

package/dist/src/components/sections/LearnMoreSection/LearnMoreSection.styled.js

@@ -18,7 +18,7 @@ export const LearnMoreSectionStyled = styled.section `
 
   .learn-more__info {
     width: 100%;
-    padding: 0 1.5rem;
+    padding: 0 1rem;
     display: flex;
     flex-flow: column wrap;
     justify-content: center;

package/dist/src/components/sections/LearnMoreSection/LearnMoreSection.styled.ts

@@ -19,7 +19,7 @@ export const LearnMoreSectionStyled = styled.section`
 
   .learn-more__info {
     width: 100%;
-    padding: 0 1.5rem;
+    padding: 0 1rem;
     display: flex;
     flex-flow: column wrap;
     justify-content: center;