@npm_leadtech/legal-lib-components 7.0.14 → 7.0.16

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/pages/PricingPage/PricingPage.js

@@ -5,6 +5,6 @@ import { PlanBoxPricingSubscriptionCard } from '../../molecules';
 import { PricingPageStyled } from './PricingPage.styled';
 export const PricingPage = ({ benefitsContent, faqsContent, helpResourcesCards, pricingPlanContent, pricingSection, supportContent }) => {
     return (_jsxs(PricingPageStyled, { children: [pricingSection != null && _jsx(HeroSection, { ...pricingSection }), _jsxs("div", { className: 'pricing-plans wrapper wrapper--responsive', children: [pricingPlanContent?.title && _jsx("h2", { className: 'pricing-plans__title', children: pricingPlanContent.title }), _jsx("div", { className: 'pricing-plans__cards', children: pricingPlanContent?.plans?.length > 0 &&
-                            pricingPlanContent?.plans?.map((plan) => _jsx(PlanBoxPricingSubscriptionCard, { ...plan }, plan?.id)) })] }), _jsx(CardBoxMinimalSection, { cards: helpResourcesCards }), _jsxs("div", { className: 'benefits wrapper wrapper--responsive', children: [benefitsContent?.title && _jsx("h2", { className: 'benefits__title', children: benefitsContent.title }), _jsx("div", { className: 'benefits__cards', children: benefitsContent?.benefitsList?.length > 0 &&
-                            benefitsContent?.benefitsList?.map((benefit) => (_jsx(BenefitCard, { hasShadow: false, ...benefit }, benefit?.id))) })] }), _jsxs("div", { className: 'support-section', children: [supportContent?.title && (_jsxs("div", { className: 'support-section__content', children: [_jsx("h2", { children: supportContent.title }), supportContent.description] })), _jsx(CardBoxFeaturedSection, { cards: supportContent?.benefitsList })] }), _jsx("div", { className: 'faqs-section', children: _jsx(FaqSection, { groups: faqsContent?.faqItems, givenClass: 'faqs-section__content wrapper wrapper--responsive' }) })] }));
+                            pricingPlanContent?.plans?.map((plan) => _jsx(PlanBoxPricingSubscriptionCard, { ...plan }, plan?.id)) })] }), _jsx(CardBoxMinimalSection, { cards: helpResourcesCards }), _jsx("div", { className: 'wrapper wrapper--responsive', children: _jsxs("div", { className: 'benefits', children: [benefitsContent?.title && _jsx("h2", { className: 'benefits__title', children: benefitsContent.title }), _jsx("div", { className: 'benefits__cards', children: benefitsContent?.benefitsList?.length > 0 &&
+                                benefitsContent?.benefitsList?.map((benefit) => (_jsx(BenefitCard, { hasShadow: false, ...benefit }, benefit?.id))) })] }) }), _jsxs("div", { className: 'support-section', children: [supportContent?.title && (_jsxs("div", { className: 'support-section__content', children: [_jsx("h2", { children: supportContent.title }), supportContent.description] })), _jsx(CardBoxFeaturedSection, { cards: supportContent?.benefitsList })] }), _jsx("div", { className: 'faqs-section', children: _jsx(FaqSection, { groups: faqsContent?.faqItems, givenClass: 'faqs-section__content wrapper wrapper--responsive' }) })] }));
 };

package/dist/src/components/pages/PricingPage/PricingPage.styled.js

@@ -3,6 +3,8 @@ import styled from 'styled-components';
 export const PricingPageStyled = styled.div `
   width: 100%;
   .pricing-plans {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
     align-items: center;
     display: flex;
     flex-flow: column nowrap;
@@ -16,6 +18,26 @@ export const PricingPageStyled = styled.div `
       line-height: 32px;
       letter-spacing: -0.3px;
       margin-top: 48px;
+      text-align: center;
+    }
+
+    .subscription-card__feature {
+      margin-bottom: 1rem;
+      &.ratafia-feature {
+        padding: 0.5rem;
+      }
+    }
+
+    .subscription-card__button {
+      flex: inherit;
+    }
+
+    .primary {
+      .subscription-card__feature {
+        &.ratafia-feature {
+          background-color: var(--primary-main-light-5);
+        }
+      }
     }
     &__cards {
       display: flex;
@@ -33,10 +55,13 @@ export const PricingPageStyled = styled.div `
     display: flex;
     flex-direction: column;
     align-items: center;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
     &__content {
       display: flex;
       flex-direction: column;
       align-items: center;
+      text-align: center;
 
       h2 {
         color: var(--Neutral-800, var(--neutral-neutral-1));
@@ -55,6 +80,8 @@ export const PricingPageStyled = styled.div `
     background: var(--primary-main-light-6);
     border-radius: 16px;
     margin-top: 48px;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
     &__title {
       color: var(--Neutral-800, var(--neutral-neutral-1));
       font-size: 28px;

package/dist/src/components/pages/PricingPage/PricingPage.styled.ts

@@ -4,6 +4,8 @@ import styled from 'styled-components'
 export const PricingPageStyled = styled.div`
   width: 100%;
   .pricing-plans {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
     align-items: center;
     display: flex;
     flex-flow: column nowrap;
@@ -17,6 +19,26 @@ export const PricingPageStyled = styled.div`
       line-height: 32px;
       letter-spacing: -0.3px;
       margin-top: 48px;
+      text-align: center;
+    }
+
+    .subscription-card__feature {
+      margin-bottom: 1rem;
+      &.ratafia-feature {
+        padding: 0.5rem;
+      }
+    }
+
+    .subscription-card__button {
+      flex: inherit;
+    }
+
+    .primary {
+      .subscription-card__feature {
+        &.ratafia-feature {
+          background-color: var(--primary-main-light-5);
+        }
+      }
     }
     &__cards {
       display: flex;
@@ -34,10 +56,13 @@ export const PricingPageStyled = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
     &__content {
       display: flex;
       flex-direction: column;
       align-items: center;
+      text-align: center;
 
       h2 {
         color: var(--Neutral-800, var(--neutral-neutral-1));
@@ -56,6 +81,8 @@ export const PricingPageStyled = styled.div`
     background: var(--primary-main-light-6);
     border-radius: 16px;
     margin-top: 48px;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
     &__title {
       color: var(--Neutral-800, var(--neutral-neutral-1));
       font-size: 28px;

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

@@ -25,13 +25,15 @@ export const PricingPage: React.FC<PricingPageProps> = ({
         </div>
       </div>
       <CardBoxMinimalSection cards={helpResourcesCards} />
-      <div className='benefits wrapper wrapper--responsive'>
-        {benefitsContent?.title && <h2 className='benefits__title'>{benefitsContent.title}</h2>}
-        <div className='benefits__cards'>
-          {benefitsContent?.benefitsList?.length > 0 &&
-            benefitsContent?.benefitsList?.map((benefit) => (
-              <BenefitCard hasShadow={false} key={benefit?.id} {...benefit} />
-            ))}
+      <div className='wrapper wrapper--responsive'>
+        <div className='benefits'>
+          {benefitsContent?.title && <h2 className='benefits__title'>{benefitsContent.title}</h2>}
+          <div className='benefits__cards'>
+            {benefitsContent?.benefitsList?.length > 0 &&
+              benefitsContent?.benefitsList?.map((benefit) => (
+                <BenefitCard hasShadow={false} key={benefit?.id} {...benefit} />
+              ))}
+          </div>
         </div>
       </div>
       <div className='support-section'>

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.14",
+  "version": "7.0.16",
   "license": "ISC",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",