@npm_leadtech/legal-lib-components 5.78.5 → 5.79.0

package/dist/src/components/atoms/ExpertCard/ExpertCard.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ExpertCardStyled } from './ExpertCard.styled';
 const ExpertCard = ({ title, url, description, image }) => {
-    return (_jsx(ExpertCardStyled, { className: 'expert-card', children: _jsxs("div", { className: 'expert-card__box', children: [_jsx("div", { className: 'expert-card__image', children: image }), _jsxs("div", { className: 'expert-card__texts', children: [url != null && (_jsx("a", { className: 'expert-card__title', href: url, children: title })), url == null && _jsx("p", { className: 'expert-card__title', children: title }), _jsx("p", { className: 'expert-card__description', children: description })] })] }) }));
+    return (_jsx(ExpertCardStyled, { className: 'expert-card', children: _jsxs("div", { className: 'expert-card__box', children: [_jsx("div", { className: 'expert-card__image', children: image }), url != null && (_jsx("a", { className: 'expert-card__title', href: url, children: title })), url == null && _jsx("p", { className: 'expert-card__title', children: title }), _jsx("p", { className: 'expert-card__description', children: description })] }) }));
 };
 export default ExpertCard;

package/dist/src/components/atoms/ExpertCard/ExpertCard.styled.js

@@ -1,61 +1,66 @@
+import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const ExpertCardStyled = styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-top: 10rem;
+
+  &:first-child {
+    margin-top: 5rem;
+  }
+
+  @media ${device['landscape-tablets']} {
+    margin-top: 5rem;
+  }
 
   .expert-card {
     &__box {
       background-color: white;
-      border-radius: 1rem;
+      border-radius: 0.3rem;
       box-shadow: var(--box-shadow-container);
+      padding: 7rem 2rem 0 2rem;
+      min-height: 13rem;
       display: flex;
-      flex-direction: row;
+      flex-direction: column;
       align-items: center;
       justify-content: flex-start;
+      width: 17.625rem;
+      margin-left: 0;
 
-      width: 383px;
-      padding: 16px;
-      align-items: center;
-      gap: 24px;
+      @media ${device['landscape-tablets']} {
+        margin-left: 2rem;
+      }
     }
 
     &__image {
-      min-width: 117px;
+      position: absolute;
+      transform: translateY(-115%);
+
       img {
-        width: 117px;
-        height: auto;
-        border-radius: 8px;
+        border-radius: 100%;
       }
     }
 
-    &__texts {
-      display: flex;
-      flex-direction: column;
-      align-items: start;
-      justify-content: left;
-    }
-
     &__title {
       font-family: var(--font-sans);
       font-size: 18px;
       font-weight: 700;
       line-height: 1.5rem;
       letter-spacing: -0.3px;
+      text-align: center;
       width: 75%;
       text-decoration: none;
-      margin-bottom: 0.6rem;
-      min-width: fit-content;
     }
 
     &__description {
-      color: var(--neutral-neutral-1);
-      font-family: Inter;
+      font-family: var(--font-sans);
       font-size: 16px;
-      font-style: normal;
       font-weight: 400;
       line-height: 22px;
       letter-spacing: -0.3px;
+      text-align: center;
+      width: 75%;
     }
   }
 `;

package/dist/src/components/atoms/ExpertCard/ExpertCard.styled.ts

@@ -1,62 +1,67 @@
+import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
 export const ExpertCardStyled = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-top: 10rem;
+
+  &:first-child {
+    margin-top: 5rem;
+  }
+
+  @media ${device['landscape-tablets']} {
+    margin-top: 5rem;
+  }
 
   .expert-card {
     &__box {
       background-color: white;
-      border-radius: 1rem;
+      border-radius: 0.3rem;
       box-shadow: var(--box-shadow-container);
+      padding: 7rem 2rem 0 2rem;
+      min-height: 13rem;
       display: flex;
-      flex-direction: row;
+      flex-direction: column;
       align-items: center;
       justify-content: flex-start;
+      width: 17.625rem;
+      margin-left: 0;
 
-      width: 383px;
-      padding: 16px;
-      align-items: center;
-      gap: 24px;
+      @media ${device['landscape-tablets']} {
+        margin-left: 2rem;
+      }
     }
 
     &__image {
-      min-width: 117px;
+      position: absolute;
+      transform: translateY(-115%);
+
       img {
-        width: 117px;
-        height: auto;
-        border-radius: 8px;
+        border-radius: 100%;
       }
     }
 
-    &__texts {
-      display: flex;
-      flex-direction: column;
-      align-items: start;
-      justify-content: left;
-    }
-
     &__title {
       font-family: var(--font-sans);
       font-size: 18px;
       font-weight: 700;
       line-height: 1.5rem;
       letter-spacing: -0.3px;
+      text-align: center;
       width: 75%;
       text-decoration: none;
-      margin-bottom: 0.6rem;
-      min-width: fit-content;
     }
 
     &__description {
-      color: var(--neutral-neutral-1);
-      font-family: Inter;
+      font-family: var(--font-sans);
       font-size: 16px;
-      font-style: normal;
       font-weight: 400;
       line-height: 22px;
       letter-spacing: -0.3px;
+      text-align: center;
+      width: 75%;
     }
   }
 `

package/dist/src/components/atoms/ExpertCard/ExpertCard.tsx

@@ -8,15 +8,14 @@ const ExpertCard: FC<ExpertCardProps> = ({ title, url, description, image }) =>
     <ExpertCardStyled className='expert-card'>
       <div className='expert-card__box'>
         <div className='expert-card__image'>{image}</div>
-        <div className='expert-card__texts'>
-          {url != null && (
-            <a className='expert-card__title' href={url}>
-              {title}
-            </a>
-          )}
-          {url == null && <p className='expert-card__title'>{title}</p>}
-          <p className='expert-card__description'>{description}</p>
-        </div>
+        {url != null && (
+          <a className='expert-card__title' href={url}>
+            {title}
+          </a>
+        )}
+        {url == null && <p className='expert-card__title'>{title}</p>}
+
+        <p className='expert-card__description'>{description}</p>
       </div>
     </ExpertCardStyled>
   )

package/dist/src/components/atoms/TrustPilot/TrustPilot.styled.js

@@ -1,12 +1,11 @@
 import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const TrustPilotStyled = styled.div `
-  margin: auto;
-  padding: 0 1rem;
+  padding: 4rem 0 0rem;
 
   &.trustpilot {
     @media ${device['landscape-tablets']} {
-      margin: 3rem auto;
+      margin: 0 auto;
     }
   }
 `;

package/dist/src/components/atoms/TrustPilot/TrustPilot.styled.ts

@@ -2,12 +2,11 @@ import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
 export const TrustPilotStyled = styled.div`
-  margin: auto;
-  padding: 0 1rem;
+  padding: 4rem 0 0rem;
 
   &.trustpilot {
     @media ${device['landscape-tablets']} {
-      margin: 3rem auto;
+      margin: 0 auto;
     }
   }
 `

package/dist/src/components/molecules/ExpertCardList/ExpertCardList.styled.js

@@ -9,6 +9,6 @@ export const ExpertCardListStyled = styled.div `
 
   @media ${device['landscape-tablets']} {
     flex-flow: row wrap;
-    gap: 2rem;
+    gap: 5rem 2rem;
   }
 `;

package/dist/src/components/molecules/ExpertCardList/ExpertCardList.styled.ts

@@ -10,6 +10,6 @@ export const ExpertCardListStyled = styled.div`
 
   @media ${device['landscape-tablets']} {
     flex-flow: row wrap;
-    gap: 2rem;
+    gap: 5rem 2rem;
   }
 `

package/dist/src/components/molecules/MidBannerRatafiaSample/MidBannerRatafiaSample.js

@@ -1,9 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { MidBannerRatafiaSampleStyled } from './MidBannerRatafiaSample.styled';
-import midBanner1Img from '../../../../images/svg/mid-banner-1.svg';
-import midBanner2Img from '../../../../images/svg/mid-banner-2.svg';
-import midBanner3Img from '../../../../images/svg/mid-banner-3.svg';
-const MidBannerRatafiaSample = ({ image, isEsignatureImage = false }) => {
+const MidBannerRatafiaSample = ({ image, isEsignatureImage = false, midBanner1Img, midBanner2Img, midBanner3Img }) => {
     return (_jsxs(MidBannerRatafiaSampleStyled, { className: 'mid-banner-ratafia-sample', children: [_jsx("div", { className: 'mid-banner-ratafia-sample__image', children: image }), !isEsignatureImage && (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'mid-banner-ratafia-sample__sumarized-tag', children: [_jsx("img", { className: 'mid-banner-ratafia-sample__sumarized-tag__icon', src: midBanner1Img, alt: '', role: 'img' }), _jsx("p", { className: 'sans-serif --small --bold-weight mid-banner-ratafia-sample__sumarized-tag__text', children: "Summarized" })] }), _jsxs("div", { className: 'mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__key-facts', children: [_jsx("img", { className: 'mid-banner-ratafia-sample__feature-tag__icon', src: midBanner2Img, alt: '', role: 'img' }), _jsx("p", { className: 'sans-serif --small mid-banner-ratafia-sample__feature-tag__text', children: "Key facts" })] }), _jsxs("div", { className: 'mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__clauses', children: [_jsx("img", { className: 'mid-banner-ratafia-sample__feature-tag__icon', src: midBanner3Img, alt: '', role: 'img' }), _jsx("p", { className: 'sans-serif --small mid-banner-ratafia-sample__feature-tag__text', children: "Clauses" })] })] }))] }));
 };
 export default MidBannerRatafiaSample;

package/dist/src/components/molecules/MidBannerRatafiaSample/MidBannerRatafiaSample.tsx

@@ -2,11 +2,14 @@ import React, { type FC } from 'react'
 
 import { type MidBannerRatafiaSampleProps } from './MidBannerRatafiaSampleProps.types'
 import { MidBannerRatafiaSampleStyled } from './MidBannerRatafiaSample.styled'
-import midBanner1Img from '../../../../images/svg/mid-banner-1.svg'
-import midBanner2Img from '../../../../images/svg/mid-banner-2.svg'
-import midBanner3Img from '../../../../images/svg/mid-banner-3.svg'
 
-const MidBannerRatafiaSample: FC<MidBannerRatafiaSampleProps> = ({ image, isEsignatureImage = false }) => {
+const MidBannerRatafiaSample: FC<MidBannerRatafiaSampleProps> = ({
+  image,
+  isEsignatureImage = false,
+  midBanner1Img,
+  midBanner2Img,
+  midBanner3Img
+}) => {
   return (
     <MidBannerRatafiaSampleStyled className='mid-banner-ratafia-sample'>
       <div className='mid-banner-ratafia-sample__image'>{image}</div>

package/dist/src/components/molecules/MidBannerRatafiaSample/MidBannerRatafiaSampleProps.types.d.ts

@@ -1,4 +1,7 @@
 export interface MidBannerRatafiaSampleProps {
     image: React.ReactNode;
     isEsignatureImage?: boolean;
+    midBanner1Img: string;
+    midBanner2Img: string;
+    midBanner3Img: string;
 }

package/dist/src/components/molecules/MidBannerRatafiaSample/MidBannerRatafiaSampleProps.types.ts

@@ -1,4 +1,7 @@
 export interface MidBannerRatafiaSampleProps {
   image: React.ReactNode
   isEsignatureImage?: boolean
+  midBanner1Img: string
+  midBanner2Img: string
+  midBanner3Img: string
 }

package/dist/src/components/molecules/TrustworthyWebsites/TrustworthyWebsites.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TrustworthyWebsitesStyled } from './TrustworthyWebsites.styled';
 const TrustworthyWebsites = ({ images }) => {
-    return (_jsx(TrustworthyWebsitesStyled, { className: 'trustworthy-websites', children: images.map((item) => (_jsx("div", { className: 'trustworthy-websites__image', children: item.src }, item.id))) }));
+    return (_jsx(TrustworthyWebsitesStyled, { className: 'trustworthy-websites', children: images.map((item) => (_jsx("div", { className: 'trustworthy-websites__image', children: _jsx("a", { href: item.url, target: '_blank', rel: 'noreferrer', children: item.src }) }, item.id))) }));
 };
 export default TrustworthyWebsites;

package/dist/src/components/molecules/TrustworthyWebsites/TrustworthyWebsites.styled.js

@@ -1,14 +1,31 @@
+import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const TrustworthyWebsitesStyled = styled.div `
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
+  justify-content: space-around;
   align-items: center;
 
+  @media ${device['landscape-tablets']} {
+    gap: 4%;
+  }
+
   .trustworthy-websites {
     &__image {
-      margin: 1.5rem;
-      max-width: 7rem;
+      margin: 1rem 0 1rem 0;
+      width: 45.5%;
+
+      @media ${device['landscape-tablets']} {
+        width: 10.28%;
+      }
+
+      img {
+        margin: 0 auto;
+      }
+
+      .gatsby-image-wrapper-constrained {
+        display: block;
+      }
     }
   }
 `;

package/dist/src/components/molecules/TrustworthyWebsites/TrustworthyWebsites.styled.ts

@@ -1,15 +1,32 @@
+import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
 export const TrustworthyWebsitesStyled = styled.div`
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
+  justify-content: space-around;
   align-items: center;
 
+  @media ${device['landscape-tablets']} {
+    gap: 4%;
+  }
+
   .trustworthy-websites {
     &__image {
-      margin: 1.5rem;
-      max-width: 7rem;
+      margin: 1rem 0 1rem 0;
+      width: 45.5%;
+
+      @media ${device['landscape-tablets']} {
+        width: 10.28%;
+      }
+
+      img {
+        margin: 0 auto;
+      }
+
+      .gatsby-image-wrapper-constrained {
+        display: block;
+      }
     }
   }
 `

package/dist/src/components/molecules/TrustworthyWebsites/TrustworthyWebsites.tsx

@@ -8,7 +8,9 @@ const TrustworthyWebsites: FC<TrustworthyWebsitesProps> = ({ images }) => {
     <TrustworthyWebsitesStyled className='trustworthy-websites'>
       {images.map((item) => (
         <div className='trustworthy-websites__image' key={item.id}>
-          {item.src}
+          <a href={item.url} target='_blank' rel='noreferrer'>
+            {item.src}
+          </a>
         </div>
       ))}
     </TrustworthyWebsitesStyled>

package/dist/src/components/molecules/TrustworthyWebsites/TrustworthyWebsitesProps.types.d.ts

@@ -4,4 +4,5 @@ export interface TrustworthyWebsitesProps {
 export interface ImageStructure {
     id: string;
     src: React.ReactNode;
+    url: string;
 }

package/dist/src/components/molecules/TrustworthyWebsites/TrustworthyWebsitesProps.types.ts

@@ -5,4 +5,5 @@ export interface TrustworthyWebsitesProps {
 export interface ImageStructure {
   id: string
   src: React.ReactNode
+  url: string
 }

package/dist/src/components/organisms/AsSeeInContent/AsSeeInContent.styled.js

@@ -16,6 +16,13 @@ export const AsSeenInContentStyled = styled.div `
       a {
         color: var(--primary-main-light-1);
         font-weight: 400 !important;
+        text-decoration: underline;
+      }
+
+      .m-richText {
+        p {
+          margin-bottom: 1.5rem;
+        }
       }
     }
   }

package/dist/src/components/organisms/AsSeeInContent/AsSeeInContent.styled.ts

@@ -17,6 +17,13 @@ export const AsSeenInContentStyled = styled.div`
       a {
         color: var(--primary-main-light-1);
         font-weight: 400 !important;
+        text-decoration: underline;
+      }
+
+      .m-richText {
+        p {
+          margin-bottom: 1.5rem;
+        }
       }
     }
   }

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

@@ -2,30 +2,28 @@ import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const AsSeeInSectionStyled = styled.section `
   flex-shrink: 0;
-  background-color: get-color(secondary, main-light-5);
-  padding: 0 1.5rem 2rem 1.5rem;
+  background-color: var(--neutral-neutral-6);
+  padding: 2rem 1.5rem;
 
   @media ${device['landscape-tablets']} {
-    padding: 0 1.5rem 3rem 1.5rem;
+    padding: 3rem 1.5rem;
   }
 
   .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);
-    padding: 1.5rem 0;
 
     &__title {
-      color: var(--neutral-neutral-2);
+      color: var(--neutral-neutral-1);
       text-align: center;
-      font-size: 32px;
-      font-family: var(--font-serif);
+      font-size: 1.75rem;
+      font-family: var(--font-sans);
       font-style: normal;
-      font-weight: 400;
-      line-height: 42px;
+      font-weight: 700;
+      line-height: 1;
       letter-spacing: -0.3px;
-      margin: 1rem 0;
+      margin: 0rem 0 1.5rem 0;
     }
   }
 `;

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

@@ -3,30 +3,28 @@ import styled from 'styled-components'
 
 export const AsSeeInSectionStyled = styled.section`
   flex-shrink: 0;
-  background-color: get-color(secondary, main-light-5);
-  padding: 0 1.5rem 2rem 1.5rem;
+  background-color: var(--neutral-neutral-6);
+  padding: 2rem 1.5rem;
 
   @media ${device['landscape-tablets']} {
-    padding: 0 1.5rem 3rem 1.5rem;
+    padding: 3rem 1.5rem;
   }
 
   .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);
-    padding: 1.5rem 0;
 
     &__title {
-      color: var(--neutral-neutral-2);
+      color: var(--neutral-neutral-1);
       text-align: center;
-      font-size: 32px;
-      font-family: var(--font-serif);
+      font-size: 1.75rem;
+      font-family: var(--font-sans);
       font-style: normal;
-      font-weight: 400;
-      line-height: 42px;
+      font-weight: 700;
+      line-height: 1;
       letter-spacing: -0.3px;
-      margin: 1rem 0;
+      margin: 0rem 0 1.5rem 0;
     }
   }
 `

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

@@ -5,7 +5,6 @@ export const ExpertsSectionStyled = styled.div `
   justify-content: center;
   flex-direction: column;
   background-color: var(--neutral-neutral-6);
-  margin-bottom: 4rem;
 
   .experts-section {
     &__title {
@@ -23,9 +22,5 @@ export const ExpertsSectionStyled = styled.div `
         width: 100%;
       }
     }
-
-    &__description {
-      text-align: center;
-    }
   }
 `;

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

@@ -6,7 +6,6 @@ export const ExpertsSectionStyled = styled.div`
   justify-content: center;
   flex-direction: column;
   background-color: var(--neutral-neutral-6);
-  margin-bottom: 4rem;
 
   .experts-section {
     &__title {
@@ -24,9 +23,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/MidBannerRatafiaSection/MidBannerRatafiaSection.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MidBannerRatafiaContent, MidBannerRatafiaSample } from '../../molecules';
 import { MidBannerRatafiaSectionStyled } from './MidBannerRatafiaSection.styled';
 import classNames from 'classnames';
-const MidBannerRatafiaSection = ({ title, paragraph, ctaLabel, ctaLink, ctaDataQa, image }) => {
+const MidBannerRatafiaSection = ({ title, paragraph, ctaLabel, ctaLink, ctaDataQa, image, midBanner1Img, midBanner2Img, midBanner3Img }) => {
     const isEsignature = ctaDataQa.includes('esignature') && true;
     const classnames = classNames({
         '--is-esignature': isEsignature
     });
-    return (_jsx(MidBannerRatafiaSectionStyled, { className: 'mid-banner-ratafia-section', children: _jsxs("div", { className: `mid-banner-ratafia-section__wrapper ${classnames}`, children: [_jsx(MidBannerRatafiaContent, { title: title, paragraph: paragraph, ctaLabel: ctaLabel, ctaLink: ctaLink, ctaDataQa: ctaDataQa }), _jsx("div", { className: `mid-banner-ratafia-section__wrapper__sample ${classnames}`, children: _jsx(MidBannerRatafiaSample, { image: image, isEsignatureImage: isEsignature }) })] }) }));
+    return (_jsx(MidBannerRatafiaSectionStyled, { className: 'mid-banner-ratafia-section', children: _jsxs("div", { className: `mid-banner-ratafia-section__wrapper ${classnames}`, children: [_jsx(MidBannerRatafiaContent, { title: title, paragraph: paragraph, ctaLabel: ctaLabel, ctaLink: ctaLink, ctaDataQa: ctaDataQa }), _jsx("div", { className: `mid-banner-ratafia-section__wrapper__sample ${classnames}`, children: _jsx(MidBannerRatafiaSample, { image: image, isEsignatureImage: isEsignature, midBanner1Img: midBanner1Img, midBanner2Img: midBanner2Img, midBanner3Img: midBanner3Img }) })] }) }));
 };
 export default MidBannerRatafiaSection;

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

@@ -11,7 +11,10 @@ const MidBannerRatafiaSection: FC<MidBannerRatafiaSectionProps> = ({
   ctaLabel,
   ctaLink,
   ctaDataQa,
-  image
+  image,
+  midBanner1Img,
+  midBanner2Img,
+  midBanner3Img
 }) => {
   const isEsignature = ctaDataQa.includes('esignature') && true
   const classnames = classNames({
@@ -28,7 +31,13 @@ const MidBannerRatafiaSection: FC<MidBannerRatafiaSectionProps> = ({
           ctaDataQa={ctaDataQa}
         />
         <div className={`mid-banner-ratafia-section__wrapper__sample ${classnames}`}>
-          <MidBannerRatafiaSample image={image} isEsignatureImage={isEsignature} />
+          <MidBannerRatafiaSample
+            image={image}
+            isEsignatureImage={isEsignature}
+            midBanner1Img={midBanner1Img}
+            midBanner2Img={midBanner2Img}
+            midBanner3Img={midBanner3Img}
+          />
         </div>
       </div>
     </MidBannerRatafiaSectionStyled>

package/dist/src/components/sections/MidBannerRatafiaSection/MidBannerRatafiaSectionProps.types.d.ts

@@ -5,4 +5,7 @@ export interface MidBannerRatafiaSectionProps {
     ctaLink: string;
     ctaDataQa: string;
     image: React.ReactNode;
+    midBanner1Img: string;
+    midBanner2Img: string;
+    midBanner3Img: string;
 }

package/dist/src/components/sections/MidBannerRatafiaSection/MidBannerRatafiaSectionProps.types.ts

@@ -5,4 +5,7 @@ export interface MidBannerRatafiaSectionProps {
   ctaLink: string
   ctaDataQa: string
   image: React.ReactNode
+  midBanner1Img: string
+  midBanner2Img: string
+  midBanner3Img: string
 }

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

@@ -4,10 +4,10 @@ export const PeopleSayAboutUsSectionStyled = styled.section `
   width: 100%;
   margin: 0 auto;
   text-align: center;
-  padding: 1.5rem;
+  padding: 2rem 1.5rem;
 
-  @media ${device.laptop} {
-    padding: 0;
+  @media ${device['landscape-tablets']} {
+    padding: 3rem 1.5rem;
   }
 
   @media ${device.desktop} {
@@ -16,10 +16,10 @@ export const PeopleSayAboutUsSectionStyled = styled.section `
 
   .people-say {
     &__title {
-      font-family: var(--font-serif);
-      font-size: 32px;
-      font-weight: 400;
-      line-height: 42px;
+      font-family: var(--font-sans);
+      font-size: 1.75rem;
+      font-weight: 700;
+      line-height: 1.3;
       letter-spacing: -0.3px;
       text-align: center;
     }
@@ -29,6 +29,10 @@ export const PeopleSayAboutUsSectionStyled = styled.section `
     text-align: left;
     margin-top: 2rem;
 
+    a {
+      text-decoration: underline;
+      color: var(--primary-main);
+    }
     > p,
     > blockquote {
       margin-top: 1.5rem;

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

@@ -5,10 +5,10 @@ export const PeopleSayAboutUsSectionStyled = styled.section`
   width: 100%;
   margin: 0 auto;
   text-align: center;
-  padding: 1.5rem;
+  padding: 2rem 1.5rem;
 
-  @media ${device.laptop} {
-    padding: 0;
+  @media ${device['landscape-tablets']} {
+    padding: 3rem 1.5rem;
   }
 
   @media ${device.desktop} {
@@ -17,10 +17,10 @@ export const PeopleSayAboutUsSectionStyled = styled.section`
 
   .people-say {
     &__title {
-      font-family: var(--font-serif);
-      font-size: 32px;
-      font-weight: 400;
-      line-height: 42px;
+      font-family: var(--font-sans);
+      font-size: 1.75rem;
+      font-weight: 700;
+      line-height: 1.3;
       letter-spacing: -0.3px;
       text-align: center;
     }
@@ -30,6 +30,10 @@ export const PeopleSayAboutUsSectionStyled = styled.section`
     text-align: left;
     margin-top: 2rem;
 
+    a {
+      text-decoration: underline;
+      color: var(--primary-main);
+    }
     > p,
     > blockquote {
       margin-top: 1.5rem;

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

@@ -4,6 +4,7 @@ export const WhyLawDistrictSectionStyled = styled.section `
   text-align: center;
   background-color: var(--neutral-neutral-6);
   width: 100%;
+  padding-top: 2.5rem;
   padding-bottom: 2rem;
   display: flex;
   flex-direction: column;

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

@@ -5,6 +5,7 @@ export const WhyLawDistrictSectionStyled = styled.section`
   text-align: center;
   background-color: var(--neutral-neutral-6);
   width: 100%;
+  padding-top: 2.5rem;
   padding-bottom: 2rem;
   display: flex;
   flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm_leadtech/legal-lib-components",
-  "version": "5.78.5",
+  "version": "5.79.0",
   "license": "ISC",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

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

@@ -1,37 +0,0 @@
-@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;
-    }
-  }
-}