@npm_leadtech/legal-lib-components 7.0.13 → 7.0.15

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FeatureRatafiaCardStyled } from './FeatureRatafiaCard.styled';
 export const FeatureRatafiaCard = ({ title, icon, description, isReleased = true, notReleasedText }) => {
-    return (_jsx(FeatureRatafiaCardStyled, { className: 'feature-ratafia-card', children: _jsx("div", { className: isReleased ? 'feature-ratafia-card-released' : 'feature-ratafia-card-not-released', children: _jsxs("div", { className: 'feature-ratafia-card__wrapper', children: [_jsxs("div", { className: 'feature-ratafia-card__wrapper__header', children: [_jsxs("div", { className: 'feature-ratafia-card__wrapper__header__title', children: [icon !== null && _jsx("div", { className: 'feature-ratafia-card__wrapper__header__title__icon', children: icon }), _jsx("h3", { className: 'sans-serif --big --bold-weight feature-ratafia-card__wrapper__header__title__text', children: title })] }), !isReleased && (_jsx("p", { className: 'sans-serif --small --bold-weight feature-ratafia-card__wrapper__header__not-released', children: notReleasedText }))] }), _jsx("p", { className: 'sans-serif --medium feature-ratafia-card__wrapper__description', children: description })] }) }) }));
+    return (_jsx(FeatureRatafiaCardStyled, { className: 'feature-ratafia-card', children: _jsx("div", { className: isReleased ? 'feature-ratafia-card-released' : 'feature-ratafia-card-not-released', children: _jsxs("div", { className: 'feature-ratafia-card__wrapper', children: [_jsxs("div", { className: 'feature-ratafia-card__wrapper__header', children: [_jsxs("div", { className: 'feature-ratafia-card__wrapper__header__title', children: [icon !== null && _jsx("div", { className: 'feature-ratafia-card__wrapper__header__title__icon', children: icon }), _jsx("p", { className: 'sans-serif --big --bold-weight feature-ratafia-card__wrapper__header__title__text', children: title })] }), !isReleased && (_jsx("p", { className: 'sans-serif --small --bold-weight feature-ratafia-card__wrapper__header__not-released', children: notReleasedText }))] }), _jsx("p", { className: 'sans-serif --medium feature-ratafia-card__wrapper__description', children: description })] }) }) }));
 };
 export default FeatureRatafiaCard;

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

@@ -17,9 +17,9 @@ export const FeatureRatafiaCard: React.FC<FeatureRatafiaCardProps> = ({
           <div className='feature-ratafia-card__wrapper__header'>
             <div className='feature-ratafia-card__wrapper__header__title'>
               {icon !== null && <div className='feature-ratafia-card__wrapper__header__title__icon'>{icon}</div>}
-              <h3 className='sans-serif --big --bold-weight feature-ratafia-card__wrapper__header__title__text'>
+              <p className='sans-serif --big --bold-weight feature-ratafia-card__wrapper__header__title__text'>
                 {title}
-              </h3>
+              </p>
             </div>
             {!isReleased && (
               <p className='sans-serif --small --bold-weight feature-ratafia-card__wrapper__header__not-released'>

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-const IconImage = ({ iconName, baseSrcUrl = undefined, givenClass, iconFormat = 'svg' }) => {
-    return (_jsx("img", { className: givenClass, src: `${baseSrcUrl ?? process.env.ASSETS_URL + '/'}${iconName}.${iconFormat}`, alt: '', role: 'img' }));
+const IconImage = ({ iconName, baseSrcUrl = 'https://assets.lawdistrict.com/', givenClass, iconFormat = 'svg' }) => {
+    return _jsx("img", { className: givenClass, src: `${baseSrcUrl}${iconName}.${iconFormat}`, alt: '', role: 'img' });
 };
 export default IconImage;

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

@@ -2,15 +2,13 @@ import React from 'react'
 
 import { type IconImageProps } from './IconImageProps.types'
 
-const IconImage: React.FC<IconImageProps> = ({ iconName, baseSrcUrl = undefined, givenClass, iconFormat = 'svg' }) => {
-  return (
-    <img
-      className={givenClass}
-      src={`${baseSrcUrl ?? process.env.ASSETS_URL + '/'}${iconName}.${iconFormat}`}
-      alt=''
-      role='img'
-    />
-  )
+const IconImage: React.FC<IconImageProps> = ({
+  iconName,
+  baseSrcUrl = 'https://assets.lawdistrict.com/',
+  givenClass,
+  iconFormat = 'svg'
+}) => {
+  return <img className={givenClass} src={`${baseSrcUrl}${iconName}.${iconFormat}`} alt='' role='img' />
 }
 
 export default IconImage

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

@@ -20,6 +20,12 @@ export const MidBannerRatafiaContentStyled = styled.div `
       &__description {
         align-self: stretch;
         color: var(--neutral-neutral-1);
+
+        .richt-text-strapi {
+          display: flex;
+          flex-direction: column;
+          gap: var(--global-gap);
+        }
       }
     }
     &__cta {

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

@@ -21,6 +21,12 @@ export const MidBannerRatafiaContentStyled = styled.div`
       &__description {
         align-self: stretch;
         color: var(--neutral-neutral-1);
+
+        .richt-text-strapi {
+          display: flex;
+          flex-direction: column;
+          gap: var(--global-gap);
+        }
       }
     }
     &__cta {

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

@@ -1,6 +1,6 @@
 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 }) => {
-    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" })] })] }))] }));
+const MidBannerRatafiaSample = ({ image, isEsignatureImage = false, isAbout = false, midBanner1Img, midBanner2Img, midBanner3Img }) => {
+    return (_jsxs(MidBannerRatafiaSampleStyled, { className: 'mid-banner-ratafia-sample', children: [_jsx("div", { className: 'mid-banner-ratafia-sample__image', children: image }), !isEsignatureImage && !isAbout && (_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" })] })] })), isAbout && (_jsxs("div", { className: 'about-page', children: [_jsxs("div", { className: 'mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__key-facts about-page__signed-tag', children: [_jsx("img", { className: 'mid-banner-ratafia-sample__feature-tag__icon', src: midBanner1Img, alt: '', role: 'img' }), _jsx("p", { className: 'sans-serif --small --bold-weight mid-banner-ratafia-sample__sumarized-tag__text about-page__signed-tag', children: "Signed" })] }), _jsxs("div", { className: 'mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__clauses about-page__ai-tag', children: [_jsx("img", { className: 'mid-banner-ratafia-sample__feature-tag__icon', src: midBanner3Img, alt: '', role: 'img' }), _jsx("p", { className: 'sans-serif --small --bold-weight mid-banner-ratafia-sample__sumarized-tag__text', children: "AI Reviewed" })] })] }))] }));
 };
 export default MidBannerRatafiaSample;

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

@@ -66,4 +66,15 @@ export const MidBannerRatafiaSampleStyled = styled.div `
       top: 75px;
     }
   }
+
+  .about-page {
+    &__ai-tag {
+      background: var(--primary-main-light-5);
+    }
+
+    &__signed-tag {
+      background: var(--primary-main-dark-1);
+      color: var(--others-white);
+    }
+  }
 `;

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

@@ -67,4 +67,15 @@ export const MidBannerRatafiaSampleStyled = styled.div`
       top: 75px;
     }
   }
+
+  .about-page {
+    &__ai-tag {
+      background: var(--primary-main-light-5);
+    }
+
+    &__signed-tag {
+      background: var(--primary-main-dark-1);
+      color: var(--others-white);
+    }
+  }
 `

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

@@ -6,6 +6,7 @@ import { MidBannerRatafiaSampleStyled } from './MidBannerRatafiaSample.styled'
 const MidBannerRatafiaSample: FC<MidBannerRatafiaSampleProps> = ({
   image,
   isEsignatureImage = false,
+  isAbout = false,
   midBanner1Img,
   midBanner2Img,
   midBanner3Img
@@ -13,7 +14,7 @@ const MidBannerRatafiaSample: FC<MidBannerRatafiaSampleProps> = ({
   return (
     <MidBannerRatafiaSampleStyled className='mid-banner-ratafia-sample'>
       <div className='mid-banner-ratafia-sample__image'>{image}</div>
-      {!isEsignatureImage && (
+      {!isEsignatureImage && !isAbout && (
         <>
           <div className='mid-banner-ratafia-sample__sumarized-tag'>
             <img className='mid-banner-ratafia-sample__sumarized-tag__icon' src={midBanner1Img} alt='' role='img' />
@@ -31,6 +32,22 @@ const MidBannerRatafiaSample: FC<MidBannerRatafiaSampleProps> = ({
           </div>
         </>
       )}
+      {isAbout && (
+        <div className='about-page'>
+          <div className='mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__key-facts about-page__signed-tag'>
+            <img className='mid-banner-ratafia-sample__feature-tag__icon' src={midBanner1Img} alt='' role='img' />
+            <p className='sans-serif --small --bold-weight mid-banner-ratafia-sample__sumarized-tag__text about-page__signed-tag'>
+              Signed
+            </p>
+          </div>
+          <div className='mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__clauses about-page__ai-tag'>
+            <img className='mid-banner-ratafia-sample__feature-tag__icon' src={midBanner3Img} alt='' role='img' />
+            <p className='sans-serif --small --bold-weight mid-banner-ratafia-sample__sumarized-tag__text'>
+              AI Reviewed
+            </p>
+          </div>
+        </div>
+      )}
     </MidBannerRatafiaSampleStyled>
   )
 }

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

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

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

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

package/dist/src/components/pages/AboutUsPage/AboutUsPage.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { AsSeeInSection, CardStorySection, ExpertsSection, GuidelinesSection, HeroSection, PeopleSayAboutUsSection, TryOurFreeLegalBlogsSection } from '../../sections';
+import { AsSeeInSection, CardStorySection, ExpertsSection, GuidelinesSection, HeroSection, MidBannerRatafiaSection, PeopleSayAboutUsSection, TryOurFreeLegalBlogsSection } from '../../sections';
 import { ContactContent, HowWeHelp } from '../../organisms';
-export const AboutUsPage = ({ aboutUsSectionProps, ourMissionBlogsSectionProps, ourCoreValuesBlogsSectionProps, cardStorySection, howWeHelp, peopleSayAboutUsSectionProps, guidelinesSectionProps, expertsSectionProps, asSeeInSectionProps, contactContentProps, isJonSnow = false }) => {
-    return (_jsxs(_Fragment, { children: [aboutUsSectionProps != null && _jsx(HeroSection, { ...aboutUsSectionProps }), ourMissionBlogsSectionProps != null && _jsx(TryOurFreeLegalBlogsSection, { ...ourMissionBlogsSectionProps }), ourCoreValuesBlogsSectionProps != null && _jsx(TryOurFreeLegalBlogsSection, { ...ourCoreValuesBlogsSectionProps }), cardStorySection != null && _jsx(CardStorySection, { ...cardStorySection }), howWeHelp != null && _jsx(HowWeHelp, { ...howWeHelp }), guidelinesSectionProps != null && (_jsx(GuidelinesSection, { ...guidelinesSectionProps, children: guidelinesSectionProps.contentGuidelines?.children })), expertsSectionProps != null && _jsx(ExpertsSection, { ...expertsSectionProps }), !isJonSnow && peopleSayAboutUsSectionProps != null && (_jsx(PeopleSayAboutUsSection, { ...peopleSayAboutUsSectionProps })), !isJonSnow && asSeeInSectionProps != null && _jsx(AsSeeInSection, { ...asSeeInSectionProps }), !isJonSnow && contactContentProps != null && _jsx(ContactContent, { ...contactContentProps })] }));
+export const AboutUsPage = ({ aboutUsSectionProps, ourMissionBlogsSectionProps, ourCoreValuesBlogsSectionProps, cardStorySection, howWeHelp, peopleSayAboutUsSectionProps, guidelinesSectionProps, expertsSectionProps, asSeeInSectionProps, midBannerSectionProps, contactContentProps, isJonSnow = false }) => {
+    return (_jsxs(_Fragment, { children: [aboutUsSectionProps != null && _jsx(HeroSection, { ...aboutUsSectionProps }), ourMissionBlogsSectionProps != null && _jsx(TryOurFreeLegalBlogsSection, { ...ourMissionBlogsSectionProps }), ourCoreValuesBlogsSectionProps != null && _jsx(TryOurFreeLegalBlogsSection, { ...ourCoreValuesBlogsSectionProps }), cardStorySection != null && _jsx(CardStorySection, { ...cardStorySection }), howWeHelp != null && _jsx(HowWeHelp, { ...howWeHelp }), guidelinesSectionProps != null && (_jsx(GuidelinesSection, { ...guidelinesSectionProps, children: guidelinesSectionProps.contentGuidelines?.children })), expertsSectionProps != null && _jsx(ExpertsSection, { ...expertsSectionProps }), !isJonSnow && peopleSayAboutUsSectionProps != null && (_jsx(PeopleSayAboutUsSection, { ...peopleSayAboutUsSectionProps })), !isJonSnow && asSeeInSectionProps != null && _jsx(AsSeeInSection, { ...asSeeInSectionProps }), !isJonSnow && midBannerSectionProps != null && _jsx(MidBannerRatafiaSection, { ...midBannerSectionProps }), !isJonSnow && contactContentProps != null && _jsx(ContactContent, { ...contactContentProps })] }));
 };

package/dist/src/components/pages/AboutUsPage/AboutUsPage.tsx

@@ -6,6 +6,7 @@ import {
   ExpertsSection,
   GuidelinesSection,
   HeroSection,
+  MidBannerRatafiaSection,
   PeopleSayAboutUsSection,
   TryOurFreeLegalBlogsSection
 } from '../../sections'
@@ -22,6 +23,7 @@ export const AboutUsPage: React.FC<AboutUsPageProps> = ({
   guidelinesSectionProps,
   expertsSectionProps,
   asSeeInSectionProps,
+  midBannerSectionProps,
   contactContentProps,
   isJonSnow = false
 }) => {
@@ -42,6 +44,7 @@ export const AboutUsPage: React.FC<AboutUsPageProps> = ({
         <PeopleSayAboutUsSection {...peopleSayAboutUsSectionProps} />
       )}
       {!isJonSnow && asSeeInSectionProps != null && <AsSeeInSection {...asSeeInSectionProps} />}
+      {!isJonSnow && midBannerSectionProps != null && <MidBannerRatafiaSection {...midBannerSectionProps} />}
       {!isJonSnow && contactContentProps != null && <ContactContent {...contactContentProps} />}
     </>
   )

package/dist/src/components/pages/AboutUsPage/AboutUsPageProps.d.ts

@@ -1,4 +1,4 @@
-import type { AsSeeInSectionProps, CardStorySectionProps, ExpertsSectionProps, GuidelinesSectionProps, HeroSectionProps, PeopleSayAboutUsSectionProps, TryOurFreeLegalBlogsSectionProps, TryUsSectionProps } from '../../sections';
+import type { AsSeeInSectionProps, CardStorySectionProps, ExpertsSectionProps, GuidelinesSectionProps, HeroSectionProps, MidBannerRatafiaSectionProps, PeopleSayAboutUsSectionProps, TryOurFreeLegalBlogsSectionProps, TryUsSectionProps } from '../../sections';
 import { ContactContentProps, HowWeHelpProps } from '../../organisms';
 export interface AboutUsPageProps {
     aboutUsSectionProps?: HeroSectionProps;
@@ -11,6 +11,7 @@ export interface AboutUsPageProps {
     tryUsSectionProps?: TryUsSectionProps;
     expertsSectionProps?: ExpertsSectionProps;
     asSeeInSectionProps?: AsSeeInSectionProps;
+    midBannerSectionProps?: MidBannerRatafiaSectionProps;
     contactContentProps?: ContactContentProps;
     isJonSnow?: boolean;
 }

package/dist/src/components/pages/AboutUsPage/AboutUsPageProps.ts

@@ -4,6 +4,7 @@ import type {
   ExpertsSectionProps,
   GuidelinesSectionProps,
   HeroSectionProps,
+  MidBannerRatafiaSectionProps,
   PeopleSayAboutUsSectionProps,
   TryOurFreeLegalBlogsSectionProps,
   TryUsSectionProps
@@ -21,6 +22,7 @@ export interface AboutUsPageProps {
   tryUsSectionProps?: TryUsSectionProps
   expertsSectionProps?: ExpertsSectionProps
   asSeeInSectionProps?: AsSeeInSectionProps
+  midBannerSectionProps?: MidBannerRatafiaSectionProps
   contactContentProps?: ContactContentProps
   isJonSnow?: boolean
 }

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

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

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

@@ -3,10 +3,12 @@ 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 isEsignature = ctaDataQa.includes('esignature') && true;
+    const isEsignature = ctaDataQa.includes('esignature');
+    const isAbout = ctaDataQa.includes('about');
     const classnames = classNames({
-        '--is-esignature': isEsignature
+        '--is-esignature': isEsignature,
+        '--is-about': isAbout
     });
-    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, isAbout: isAbout, isEsignatureImage: isEsignature, midBanner1Img: midBanner1Img, midBanner2Img: midBanner2Img, midBanner3Img: midBanner3Img }) })] }) }));
 };
 export default MidBannerRatafiaSection;

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

@@ -51,6 +51,16 @@ export const MidBannerRatafiaSectionStyled = styled.section `
     }
   }
 
+  .mid-banner-ratafia-section__wrapper.--is-about {
+    @media ${device.desktop} {
+      padding: 3rem 5rem 0rem 4rem;
+    }
+
+    .mid-banner-ratafia-content {
+      padding-bottom: 3rem;
+    }
+  }
+
   .mid-banner-ratafia-section__wrapper__sample.--is-esignature {
     display: none;
 
@@ -73,4 +83,59 @@ export const MidBannerRatafiaSectionStyled = styled.section `
       }
     }
   }
+
+  .mid-banner-ratafia-section__wrapper.--is-about {
+    background-color: var(--primary-main-light-6);
+
+    .mid-banner-ratafia-content {
+      height: 100%;
+      justify-content: center;
+      &__header {
+        h2 {
+          color: var(--primary-main-dark-2);
+          font-family: var(--font-family-inter, Inter);
+          font-size: 28px;
+          font-style: normal;
+          font-weight: 700;
+          line-height: 32px;
+          letter-spacing: -0.3px;
+        }
+      }
+
+      .mid-banner-ratafia-content__cta {
+        height: auto;
+      }
+    }
+  }
+
+  .mid-banner-ratafia-section__wrapper.--is-about {
+    padding: 2rem 2rem 0 2rem;
+
+    @media ${device.desktop} {
+      padding: 2rem 5rem 0 4rem;
+    }
+  }
+
+  .mid-banner-ratafia-section__wrapper__sample.--is-about {
+    display: none;
+
+    @media ${device.laptop} {
+      display: flex;
+    }
+
+    .mid-banner-ratafia-sample {
+      &__image {
+        img {
+          max-width: 25rem;
+          box-shadow:
+            0 -0.125rem 0.375rem 0 rgba(2, 55, 74, 0.25),
+            0 0.125rem 0.375rem -0.125rem rgba(2, 55, 74, 0);
+
+          @media ${device.desktop} {
+            max-height: 30rem;
+          }
+        }
+      }
+    }
+  }
 `;

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

@@ -52,6 +52,16 @@ export const MidBannerRatafiaSectionStyled = styled.section`
     }
   }
 
+  .mid-banner-ratafia-section__wrapper.--is-about {
+    @media ${device.desktop} {
+      padding: 3rem 5rem 0rem 4rem;
+    }
+
+    .mid-banner-ratafia-content {
+      padding-bottom: 3rem;
+    }
+  }
+
   .mid-banner-ratafia-section__wrapper__sample.--is-esignature {
     display: none;
 
@@ -74,4 +84,59 @@ export const MidBannerRatafiaSectionStyled = styled.section`
       }
     }
   }
+
+  .mid-banner-ratafia-section__wrapper.--is-about {
+    background-color: var(--primary-main-light-6);
+
+    .mid-banner-ratafia-content {
+      height: 100%;
+      justify-content: center;
+      &__header {
+        h2 {
+          color: var(--primary-main-dark-2);
+          font-family: var(--font-family-inter, Inter);
+          font-size: 28px;
+          font-style: normal;
+          font-weight: 700;
+          line-height: 32px;
+          letter-spacing: -0.3px;
+        }
+      }
+
+      .mid-banner-ratafia-content__cta {
+        height: auto;
+      }
+    }
+  }
+
+  .mid-banner-ratafia-section__wrapper.--is-about {
+    padding: 2rem 2rem 0 2rem;
+
+    @media ${device.desktop} {
+      padding: 2rem 5rem 0 4rem;
+    }
+  }
+
+  .mid-banner-ratafia-section__wrapper__sample.--is-about {
+    display: none;
+
+    @media ${device.laptop} {
+      display: flex;
+    }
+
+    .mid-banner-ratafia-sample {
+      &__image {
+        img {
+          max-width: 25rem;
+          box-shadow:
+            0 -0.125rem 0.375rem 0 rgba(2, 55, 74, 0.25),
+            0 0.125rem 0.375rem -0.125rem rgba(2, 55, 74, 0);
+
+          @media ${device.desktop} {
+            max-height: 30rem;
+          }
+        }
+      }
+    }
+  }
 `

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

@@ -16,9 +16,11 @@ const MidBannerRatafiaSection: FC<MidBannerRatafiaSectionProps> = ({
   midBanner2Img,
   midBanner3Img
 }) => {
-  const isEsignature = ctaDataQa.includes('esignature') && true
+  const isEsignature = ctaDataQa.includes('esignature')
+  const isAbout = ctaDataQa.includes('about')
   const classnames = classNames({
-    '--is-esignature': isEsignature
+    '--is-esignature': isEsignature,
+    '--is-about': isAbout
   })
   return (
     <MidBannerRatafiaSectionStyled className='mid-banner-ratafia-section'>
@@ -33,6 +35,7 @@ const MidBannerRatafiaSection: FC<MidBannerRatafiaSectionProps> = ({
         <div className={`mid-banner-ratafia-section__wrapper__sample ${classnames}`}>
           <MidBannerRatafiaSample
             image={image}
+            isAbout={isAbout}
             isEsignatureImage={isEsignature}
             midBanner1Img={midBanner1Img}
             midBanner2Img={midBanner2Img}

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

@@ -1,6 +1,6 @@
 export interface MidBannerRatafiaSectionProps {
     title: string;
-    paragraph: React.ReactNode;
+    paragraph?: React.ReactNode;
     ctaLabel: string;
     ctaLink: string;
     ctaDataQa: string;

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

@@ -1,6 +1,6 @@
 export interface MidBannerRatafiaSectionProps {
   title: string
-  paragraph: React.ReactNode
+  paragraph?: React.ReactNode
   ctaLabel: string
   ctaLink: string
   ctaDataQa: string

package/package.json

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