@npm_leadtech/legal-lib-components 5.78.1 → 5.78.3

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 }), 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 }), _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 })] })] }) }));
 };
 export default ExpertCard;

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

@@ -17,50 +17,54 @@ export const ExpertCardStyled = styled.div `
   .expert-card {
     &__box {
       background-color: white;
-      border-radius: 0.3rem;
+      border-radius: 1rem;
       box-shadow: var(--box-shadow-container);
-      padding: 7rem 2rem 0 2rem;
-      min-height: 13rem;
       display: flex;
-      flex-direction: column;
+      flex-direction: row;
       align-items: center;
       justify-content: flex-start;
-      width: 17.625rem;
-      margin-left: 0;
 
-      @media ${device['landscape-tablets']} {
-        margin-left: 2rem;
-      }
+      width: 383px;
+      padding: 16px;
+      align-items: center;
+      gap: 24px;
     }
 
     &__image {
-      position: absolute;
-      transform: translateY(-115%);
-
       img {
-        border-radius: 100%;
+        width: 117px;
+        height: auto;
+        border-radius: 8px;
       }
     }
 
+    &__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 {
-      font-family: var(--font-sans);
+      color: var(--neutral-neutral-1);
+      font-family: Inter;
       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

@@ -18,50 +18,54 @@ export const ExpertCardStyled = styled.div`
   .expert-card {
     &__box {
       background-color: white;
-      border-radius: 0.3rem;
+      border-radius: 1rem;
       box-shadow: var(--box-shadow-container);
-      padding: 7rem 2rem 0 2rem;
-      min-height: 13rem;
       display: flex;
-      flex-direction: column;
+      flex-direction: row;
       align-items: center;
       justify-content: flex-start;
-      width: 17.625rem;
-      margin-left: 0;
 
-      @media ${device['landscape-tablets']} {
-        margin-left: 2rem;
-      }
+      width: 383px;
+      padding: 16px;
+      align-items: center;
+      gap: 24px;
     }
 
     &__image {
-      position: absolute;
-      transform: translateY(-115%);
-
       img {
-        border-radius: 100%;
+        width: 117px;
+        height: auto;
+        border-radius: 8px;
       }
     }
 
+    &__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 {
-      font-family: var(--font-sans);
+      color: var(--neutral-neutral-1);
+      font-family: Inter;
       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,14 +8,15 @@ const ExpertCard: FC<ExpertCardProps> = ({ title, url, description, image }) =>
     <ExpertCardStyled className='expert-card'>
       <div className='expert-card__box'>
         <div className='expert-card__image'>{image}</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 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>
       </div>
     </ExpertCardStyled>
   )

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RatafiaReviewResultStyled } from './RatafiaReviewResult.styled';
-export const RatafiaReviewResult = ({ reviewQuestion, reviewPositiveIcon, reviewPositiveText, handleOnClickReviewPositive, reviewPositiveDataQa = true, reviewNegativeIcon, reviewNegativeText, handleOnClickReviewNegative, reviewNegativeDataQa, reviewFeedbackText, reviewFeedBackTextDataQa = 'lawgenius_review_feedback_text', review }) => {
-    return (_jsx(RatafiaReviewResultStyled, { className: 'ratafia-review-result', children: review === null ? (_jsxs("div", { className: 'ratafia-review-result__review', children: [_jsx("p", { className: 'sans-serif ratafia-review-result__review__question', children: reviewQuestion }), _jsxs("div", { className: 'ratafia-review-result__review__buttons', children: [_jsxs("button", { className: 'ratafia-review-result__review__buttons__item', onClick: handleOnClickReviewPositive, "data-qa": reviewPositiveDataQa, children: [_jsx("div", { className: 'ratafia-review-result__review__buttons__item__icon', children: reviewPositiveIcon }), _jsx("p", { className: 'sans-serif --small ratafia-review-result__review__buttons__item__text positive', children: reviewPositiveText })] }), _jsxs("button", { className: 'ratafia-review-result__review__buttons__item', onClick: handleOnClickReviewNegative, "data-qa": reviewNegativeDataQa, children: [_jsx("div", { className: 'ratafia-review-result__review__buttons__item__icon', children: reviewNegativeIcon }), _jsx("p", { className: 'sans-serif --small ratafia-review-result__review__buttons__item__text negative', children: reviewNegativeText })] })] })] })) : (_jsx("div", { className: 'ratafia-review-result__review', children: _jsx("p", { className: 'sans-serif --small ratafia-review-result__review__question', "data-qa": reviewFeedBackTextDataQa, children: reviewFeedbackText }) })) }));
+export const RatafiaReviewResult = ({ reviewQuestion, reviewPositiveIcon, reviewPositiveText, handleOnClickReviewPositive, reviewPositiveDataQa = true, reviewNegativeIcon, reviewNegativeText, handleOnClickReviewNegative, reviewNegativeDataQa, reviewFeedbackText, review }) => {
+    return (_jsx(RatafiaReviewResultStyled, { className: 'ratafia-review-result', children: review === null ? (_jsxs("div", { className: 'ratafia-review-result__review', children: [_jsx("p", { className: 'sans-serif ratafia-review-result__review__question', children: reviewQuestion }), _jsxs("div", { className: 'ratafia-review-result__review__buttons', children: [_jsxs("button", { className: 'ratafia-review-result__review__buttons__item', onClick: handleOnClickReviewPositive, "data-qa": reviewPositiveDataQa, children: [_jsx("div", { className: 'ratafia-review-result__review__buttons__item__icon', children: reviewPositiveIcon }), _jsx("p", { className: 'sans-serif --small ratafia-review-result__review__buttons__item__text positive', children: reviewPositiveText })] }), _jsxs("button", { className: 'ratafia-review-result__review__buttons__item', onClick: handleOnClickReviewNegative, "data-qa": reviewNegativeDataQa, children: [_jsx("div", { className: 'ratafia-review-result__review__buttons__item__icon', children: reviewNegativeIcon }), _jsx("p", { className: 'sans-serif --small ratafia-review-result__review__buttons__item__text negative', children: reviewNegativeText })] })] })] })) : (_jsx("div", { className: 'ratafia-review-result__review', children: _jsx("p", { className: 'sans-serif --small ratafia-review-result__review__question', children: reviewFeedbackText }) })) }));
 };
 export default RatafiaReviewResult;

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

@@ -14,7 +14,6 @@ export const RatafiaReviewResult: React.FC<RatafiaReviewResultProps> = ({
   handleOnClickReviewNegative,
   reviewNegativeDataQa,
   reviewFeedbackText,
-  reviewFeedBackTextDataQa = 'lawgenius_review_feedback_text',
   review
 }) => {
   return (
@@ -47,9 +46,7 @@ export const RatafiaReviewResult: React.FC<RatafiaReviewResultProps> = ({
         </div>
       ) : (
         <div className='ratafia-review-result__review'>
-          <p className='sans-serif --small ratafia-review-result__review__question' data-qa={reviewFeedBackTextDataQa}>
-            {reviewFeedbackText}
-          </p>
+          <p className='sans-serif --small ratafia-review-result__review__question'>{reviewFeedbackText}</p>
         </div>
       )}
     </RatafiaReviewResultStyled>

package/dist/src/components/atoms/RatafiaReviewResult/RatafiaReviewResultProps.types.d.ts

@@ -10,6 +10,5 @@ export interface RatafiaReviewResultProps {
     reviewNegativeDataQa: string;
     handleOnClickReviewNegative?: MouseEventHandler;
     reviewFeedbackText: string;
-    reviewFeedBackTextDataQa?: string;
     review: boolean | null;
 }

package/dist/src/components/atoms/RatafiaReviewResult/RatafiaReviewResultProps.types.ts

@@ -11,6 +11,5 @@ export interface RatafiaReviewResultProps {
   reviewNegativeDataQa: string
   handleOnClickReviewNegative?: MouseEventHandler
   reviewFeedbackText: string
-  reviewFeedBackTextDataQa?: string
   review: boolean | null
 }

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

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

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

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

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

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { MidBannerRatafiaSampleStyled } from './MidBannerRatafiaSample.styled';
-const MidBannerRatafiaSample = ({ image, isEsignatureImage = false, midBanner1Img, midBanner2Img, midBanner3Img }) => {
+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 }) => {
     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,14 +2,11 @@ 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,
-  midBanner1Img,
-  midBanner2Img,
-  midBanner3Img
-}) => {
+const MidBannerRatafiaSample: FC<MidBannerRatafiaSampleProps> = ({ image, isEsignatureImage = false }) => {
   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,7 +1,4 @@
 export interface MidBannerRatafiaSampleProps {
     image: React.ReactNode;
     isEsignatureImage?: boolean;
-    midBanner1Img: string;
-    midBanner2Img: string;
-    midBanner3Img: string;
 }

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

@@ -1,7 +1,4 @@
 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: _jsx("a", { href: item.url, target: '_blank', rel: 'noreferrer', children: item.src }) }, item.id))) }));
+    return (_jsx(TrustworthyWebsitesStyled, { className: 'trustworthy-websites', children: images.map((item) => (_jsx("div", { className: 'trustworthy-websites__image', children: item.src }, item.id))) }));
 };
 export default TrustworthyWebsites;

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

@@ -1,31 +1,14 @@
-import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const TrustworthyWebsitesStyled = styled.div `
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-around;
+  justify-content: center;
   align-items: center;
 
-  @media ${device['landscape-tablets']} {
-    gap: 4%;
-  }
-
   .trustworthy-websites {
     &__image {
-      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;
-      }
+      margin: 1.5rem;
+      max-width: 7rem;
     }
   }
 `;

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

@@ -1,32 +1,15 @@
-import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
 export const TrustworthyWebsitesStyled = styled.div`
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-around;
+  justify-content: center;
   align-items: center;
 
-  @media ${device['landscape-tablets']} {
-    gap: 4%;
-  }
-
   .trustworthy-websites {
     &__image {
-      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;
-      }
+      margin: 1.5rem;
+      max-width: 7rem;
     }
   }
 `

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

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

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

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

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

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

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

@@ -16,13 +16,6 @@ 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,13 +17,6 @@ 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/RatafiaLoadingResultContent/RatafiaLoadingResultContent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RatafiaLoadingResultContentStyled } from './RatafiaLoadingResultContent.styled';
-export const RatafiaLoadingResultContent = ({ documentName, icon, text, loadingContentDataQa = 'lawgenius_loading_result_content', loadingMessageDataQa = 'lawgenius_loading_result_message' }) => {
-    return (_jsxs(RatafiaLoadingResultContentStyled, { "data-qa": loadingContentDataQa, children: [_jsx("h2", { className: 'sans-serif --bold-weight ratafia-result-loading-content__document-name', children: documentName }), _jsxs("div", { className: 'ratafia-result-loading-content__animation-wrapper', children: [_jsxs("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation animation-1', children: [_jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-1' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-6' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-2' })] }), _jsxs("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation animation-2', children: [_jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-3' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-4' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-5' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-6' })] }), _jsxs("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation animation-3', children: [_jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-1' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-7' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-4' })] }), _jsxs("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation animation-4', children: [_jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-3' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-8' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-2' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-6' })] })] }), _jsxs("div", { className: 'ratafia-result-loading-content__message', "data-qa": loadingMessageDataQa, children: [_jsx("div", { className: 'ratafia-result-loading-content__message__icon', children: icon }), _jsx("span", { className: 'sans-serif --medium ratafia-result-loading-content__message__text', children: text })] })] }));
+export const RatafiaLoadingResultContent = ({ documentName, icon, text }) => {
+    return (_jsxs(RatafiaLoadingResultContentStyled, { children: [_jsx("h2", { className: 'sans-serif --bold-weight ratafia-result-loading-content__document-name', children: documentName }), _jsxs("div", { className: 'ratafia-result-loading-content__animation-wrapper', children: [_jsxs("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation animation-1', children: [_jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-1' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-6' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-2' })] }), _jsxs("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation animation-2', children: [_jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-3' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-4' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-5' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-6' })] }), _jsxs("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation animation-3', children: [_jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-1' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-7' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-4' })] }), _jsxs("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation animation-4', children: [_jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-3' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-8' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-2' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-6' })] })] }), _jsxs("div", { className: 'ratafia-result-loading-content__message', children: [_jsx("div", { className: 'ratafia-result-loading-content__message__icon', children: icon }), _jsx("span", { className: 'sans-serif --medium ratafia-result-loading-content__message__text', children: text })] })] }));
 };
 export default RatafiaLoadingResultContent;

package/dist/src/components/organisms/RatafiaLoadingResultContent/RatafiaLoadingResultContent.tsx

@@ -6,12 +6,10 @@ import { RatafiaLoadingResultContentStyled } from './RatafiaLoadingResultContent
 export const RatafiaLoadingResultContent: React.FC<RatafiaLoadingResultContentProps> = ({
   documentName,
   icon,
-  text,
-  loadingContentDataQa = 'lawgenius_loading_result_content',
-  loadingMessageDataQa = 'lawgenius_loading_result_message'
+  text
 }) => {
   return (
-    <RatafiaLoadingResultContentStyled data-qa={loadingContentDataQa}>
+    <RatafiaLoadingResultContentStyled>
       <h2 className='sans-serif --bold-weight ratafia-result-loading-content__document-name'>{documentName}</h2>
       <div className='ratafia-result-loading-content__animation-wrapper'>
         <div className='ratafia-result-loading-content__animation-wrapper__animation animation-1'>
@@ -37,7 +35,7 @@ export const RatafiaLoadingResultContent: React.FC<RatafiaLoadingResultContentPr
           <div className='ratafia-result-loading-content__animation-wrapper__animation__loader item-6'></div>
         </div>
       </div>
-      <div className='ratafia-result-loading-content__message' data-qa={loadingMessageDataQa}>
+      <div className='ratafia-result-loading-content__message'>
         <div className='ratafia-result-loading-content__message__icon'>{icon}</div>
         <span className='sans-serif --medium ratafia-result-loading-content__message__text'>{text}</span>
       </div>

package/dist/src/components/organisms/RatafiaLoadingResultContent/RatafiaLoadingResultContentProps.types.d.ts

@@ -2,6 +2,4 @@ export interface RatafiaLoadingResultContentProps {
     documentName: string;
     icon?: React.ReactNode;
     text?: React.ReactNode;
-    loadingContentDataQa?: string;
-    loadingMessageDataQa?: string;
 }

package/dist/src/components/organisms/RatafiaLoadingResultContent/RatafiaLoadingResultContentProps.types.ts

@@ -2,6 +2,4 @@ export interface RatafiaLoadingResultContentProps {
   documentName: string
   icon?: React.ReactNode
   text?: React.ReactNode
-  loadingContentDataQa?: string
-  loadingMessageDataQa?: string
 }

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,30 @@ 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 2rem 1.5rem;
 
   @media ${device['landscape-tablets']} {
-    padding: 3rem 1.5rem;
+    padding: 0 1.5rem 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-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,30 @@ 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 2rem 1.5rem;
 
   @media ${device['landscape-tablets']} {
-    padding: 3rem 1.5rem;
+    padding: 0 1.5rem 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-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/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, contentExpertCardList }) => {
+const ExpertsSection = ({ title, description, contentExpertCardList }) => {
     if (contentExpertCardList.contentExpertCard.length === 0) {
         return null;
     }
-    return (_jsxs(ExpertsSectionStyled, { className: 'experts-section', children: [_jsx("h2", { className: 'experts-section__title', children: title }), _jsx(ExpertCardList, { contentExpertCard: contentExpertCardList.contentExpertCard })] }));
+    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 })] }));
 };
 export default ExpertsSection;

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

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

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

@@ -6,6 +6,7 @@ export const ExpertsSectionStyled = styled.div`
   justify-content: center;
   flex-direction: column;
   background-color: var(--neutral-neutral-6);
+  margin-bottom: 4rem;
 
   .experts-section {
     &__title {
@@ -23,5 +24,9 @@ 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, contentExpertCardList }) => {
+const ExpertsSection: FC<ExpertsSectionProps> = ({ title, description, contentExpertCardList }) => {
   if (contentExpertCardList.contentExpertCard.length === 0) {
     return null
   }
@@ -12,6 +12,7 @@ const ExpertsSection: FC<ExpertsSectionProps> = ({ title, contentExpertCardList
   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,5 +1,7 @@
 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,6 +1,8 @@
 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, midBanner1Img, midBanner2Img, midBanner3Img }) => {
+const MidBannerRatafiaSection = ({ title, paragraph, ctaLabel, ctaLink, ctaDataQa, image }) => {
     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, midBanner1Img: midBanner1Img, midBanner2Img: midBanner2Img, midBanner3Img: midBanner3Img }) })] }) }));
+    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 }) })] }) }));
 };
 export default MidBannerRatafiaSection;

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

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

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

@@ -5,7 +5,4 @@ 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,7 +5,4 @@ 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: 2rem 1.5rem;
+  padding: 1.5rem;
 
-  @media ${device['landscape-tablets']} {
-    padding: 3rem 1.5rem;
+  @media ${device.laptop} {
+    padding: 0;
   }
 
   @media ${device.desktop} {
@@ -16,10 +16,10 @@ export const PeopleSayAboutUsSectionStyled = styled.section `
 
   .people-say {
     &__title {
-      font-family: var(--font-sans);
-      font-size: 1.75rem;
-      font-weight: 700;
-      line-height: 1.3;
+      font-family: var(--font-serif);
+      font-size: 32px;
+      font-weight: 400;
+      line-height: 42px;
       letter-spacing: -0.3px;
       text-align: center;
     }
@@ -29,10 +29,6 @@ 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: 2rem 1.5rem;
+  padding: 1.5rem;
 
-  @media ${device['landscape-tablets']} {
-    padding: 3rem 1.5rem;
+  @media ${device.laptop} {
+    padding: 0;
   }
 
   @media ${device.desktop} {
@@ -17,10 +17,10 @@ export const PeopleSayAboutUsSectionStyled = styled.section`
 
   .people-say {
     &__title {
-      font-family: var(--font-sans);
-      font-size: 1.75rem;
-      font-weight: 700;
-      line-height: 1.3;
+      font-family: var(--font-serif);
+      font-size: 32px;
+      font-weight: 400;
+      line-height: 42px;
       letter-spacing: -0.3px;
       text-align: center;
     }
@@ -30,10 +30,6 @@ 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/package.json

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