@npm_leadtech/legal-lib-components 7.45.0 → 7.45.1

package/dist/src/components/organisms/index.ts

@@ -1,11 +1,15 @@
-export * from './AboutUsContent'
+export * from './HeroContent'
 export * from './Accordion'
 export * from './ArticlesList'
 export * from './AsSeeInContent'
+export * from './BottomFooter'
 export * from './CardFunctionality'
 export * from './ContactContent'
 export * from './ContactJumbotron'
 export * from './CookiePolicyBar'
+export * from './DocumentListMenu'
+export * from './DocumentMainMenu'
+export * from './DocumentSubMenu'
 export * from './ErrorContentRatafia'
 export * from './FaqGroup'
 export * from './FeaturesRatafiaContent'
@@ -20,6 +24,15 @@ export * from './LimitReachedContentRatafia'
 export * from './ListStepsGetForm'
 export * from './LoginRatafiaContent'
 export * from './MobileBottomBar'
+export * from './NavMenu'
+export * from './RatafiaLoadingResultContent'
+export * from './RatafiaResultContent'
 export * from './StepsRatafiaContent'
+export * from './TopFooter'
 export * from './TryOurFreeLegalBlogsContent'
 export * from './Wizard'
+export * from './HowWeHelp'
+export * from './MobileMenu'
+export * from './MobilePanel'
+export * from './DesktopMenu'
+export * from './VisibleEnvVariables'

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { AboutUsSection, AsSeeInSection, CardStorySection, ExpertsSection, GuidelinesSection, PeopleSayAboutUsSection, TryOurFreeLegalBlogsSection } from '../../sections';
-export const AboutUsPage = ({ aboutUsSectionProps, ourMissionBlogsSectionProps, ourCoreValuesBlogsSectionProps, cardStorySection, peopleSayAboutUsSectionProps, guidelinesSectionProps, expertsSectionProps, asSeeInSectionProps, isJonSnow = false }) => {
-    return (_jsxs(_Fragment, { children: [aboutUsSectionProps != null && _jsx(AboutUsSection, { ...aboutUsSectionProps }), ourMissionBlogsSectionProps != null && _jsx(TryOurFreeLegalBlogsSection, { ...ourMissionBlogsSectionProps }), ourCoreValuesBlogsSectionProps != null && _jsx(TryOurFreeLegalBlogsSection, { ...ourCoreValuesBlogsSectionProps }), cardStorySection != null && _jsx(CardStorySection, { ...cardStorySection }), 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 })] }));
+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, 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

@@ -1,14 +1,16 @@
 import React from 'react'
 
 import {
-  AboutUsSection,
   AsSeeInSection,
   CardStorySection,
   ExpertsSection,
   GuidelinesSection,
+  HeroSection,
+  MidBannerRatafiaSection,
   PeopleSayAboutUsSection,
   TryOurFreeLegalBlogsSection
 } from '../../sections'
+import { ContactContent, HowWeHelp } from '../../organisms'
 import { type AboutUsPageProps } from './AboutUsPageProps'
 
 export const AboutUsPage: React.FC<AboutUsPageProps> = ({
@@ -16,18 +18,22 @@ export const AboutUsPage: React.FC<AboutUsPageProps> = ({
   ourMissionBlogsSectionProps,
   ourCoreValuesBlogsSectionProps,
   cardStorySection,
+  howWeHelp,
   peopleSayAboutUsSectionProps,
   guidelinesSectionProps,
   expertsSectionProps,
   asSeeInSectionProps,
+  midBannerSectionProps,
+  contactContentProps,
   isJonSnow = false
 }) => {
   return (
     <>
-      {aboutUsSectionProps != null && <AboutUsSection {...aboutUsSectionProps} />}
+      {aboutUsSectionProps != null && <HeroSection {...aboutUsSectionProps} />}
       {ourMissionBlogsSectionProps != null && <TryOurFreeLegalBlogsSection {...ourMissionBlogsSectionProps} />}
       {ourCoreValuesBlogsSectionProps != null && <TryOurFreeLegalBlogsSection {...ourCoreValuesBlogsSectionProps} />}
       {cardStorySection != null && <CardStorySection {...cardStorySection} />}
+      {howWeHelp != null && <HowWeHelp {...howWeHelp} />}
       {guidelinesSectionProps != null && (
         <GuidelinesSection {...guidelinesSectionProps}>
           {guidelinesSectionProps.contentGuidelines?.children}
@@ -38,6 +44,8 @@ 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,13 +1,17 @@
-import type { AboutUsSectionProps, AsSeeInSectionProps, CardStorySectionProps, ExpertsSectionProps, GuidelinesSectionProps, 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?: AboutUsSectionProps;
+    aboutUsSectionProps?: HeroSectionProps;
     ourMissionBlogsSectionProps?: TryOurFreeLegalBlogsSectionProps;
     ourCoreValuesBlogsSectionProps?: TryOurFreeLegalBlogsSectionProps;
     cardStorySection?: CardStorySectionProps;
+    howWeHelp?: HowWeHelpProps;
     peopleSayAboutUsSectionProps?: PeopleSayAboutUsSectionProps;
     guidelinesSectionProps?: GuidelinesSectionProps;
     tryUsSectionProps?: TryUsSectionProps;
     expertsSectionProps?: ExpertsSectionProps;
     asSeeInSectionProps?: AsSeeInSectionProps;
+    midBannerSectionProps?: MidBannerRatafiaSectionProps;
+    contactContentProps?: ContactContentProps;
     isJonSnow?: boolean;
 }

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

@@ -1,23 +1,28 @@
 import type {
-  AboutUsSectionProps,
   AsSeeInSectionProps,
   CardStorySectionProps,
   ExpertsSectionProps,
   GuidelinesSectionProps,
+  HeroSectionProps,
+  MidBannerRatafiaSectionProps,
   PeopleSayAboutUsSectionProps,
   TryOurFreeLegalBlogsSectionProps,
   TryUsSectionProps
 } from '../../sections'
+import { ContactContentProps, HowWeHelpProps } from '../../organisms'
 
 export interface AboutUsPageProps {
-  aboutUsSectionProps?: AboutUsSectionProps
+  aboutUsSectionProps?: HeroSectionProps
   ourMissionBlogsSectionProps?: TryOurFreeLegalBlogsSectionProps
   ourCoreValuesBlogsSectionProps?: TryOurFreeLegalBlogsSectionProps
   cardStorySection?: CardStorySectionProps
+  howWeHelp?: HowWeHelpProps
   peopleSayAboutUsSectionProps?: PeopleSayAboutUsSectionProps
   guidelinesSectionProps?: GuidelinesSectionProps
   tryUsSectionProps?: TryUsSectionProps
   expertsSectionProps?: ExpertsSectionProps
   asSeeInSectionProps?: AsSeeInSectionProps
+  midBannerSectionProps?: MidBannerRatafiaSectionProps
+  contactContentProps?: ContactContentProps
   isJonSnow?: boolean
 }

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ContactSection, JumbotronSimplifiedSection } from '../../sections';
-import { PhoneContactBoxMobile } from '../../molecules';
-export const ContactUsPage = ({ jumbotronSimplifiedSectionProps, phoneContactBox, contactProps, isJonSnow = false }) => {
-    return (_jsxs(_Fragment, { children: [_jsx(JumbotronSimplifiedSection, { ...jumbotronSimplifiedSectionProps }), !isJonSnow && _jsx(PhoneContactBoxMobile, { ...phoneContactBox }), _jsx(ContactSection, { ...contactProps })] }));
+import { ContactInfoBoxMobile } from '../../molecules';
+export const ContactUsPage = ({ jumbotronSimplifiedSectionProps, contactInfoBoxMobileProps, contactProps, isJonSnow = false }) => {
+    return (_jsxs(_Fragment, { children: [_jsx(JumbotronSimplifiedSection, { ...jumbotronSimplifiedSectionProps }), !isJonSnow && _jsx(ContactInfoBoxMobile, { ...contactInfoBoxMobileProps }), _jsx(ContactSection, { ...contactProps })] }));
 };

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

@@ -1,19 +1,19 @@
 import React from 'react'
 
 import { ContactSection, JumbotronSimplifiedSection } from '../../sections'
+import { ContactInfoBoxMobile } from '../../molecules'
 import { type ContactUsPageProps } from './ContactUsPageProps'
-import { PhoneContactBoxMobile } from '../../molecules'
 
 export const ContactUsPage: React.FC<ContactUsPageProps> = ({
   jumbotronSimplifiedSectionProps,
-  phoneContactBox,
+  contactInfoBoxMobileProps,
   contactProps,
   isJonSnow = false
 }) => {
   return (
     <>
       <JumbotronSimplifiedSection {...jumbotronSimplifiedSectionProps} />
-      {!isJonSnow && <PhoneContactBoxMobile {...phoneContactBox} />}
+      {!isJonSnow && <ContactInfoBoxMobile {...contactInfoBoxMobileProps} />}
       <ContactSection {...contactProps} />
     </>
   )

package/dist/src/components/pages/ContactUsPage/ContactUsPageProps.d.ts

@@ -1,8 +1,8 @@
 import { type ContactSectionProps, type JumbotronSimplifiedSectionProps } from '../../sections';
-import { type PhoneContactBoxMobileProps } from '../../molecules';
+import { ContactInfoBoxMobileProps } from 'src/components/molecules/ContactInfoBoxMobile/ContactInfoBoxMobileProps.types';
 export interface ContactUsPageProps {
     jumbotronSimplifiedSectionProps: JumbotronSimplifiedSectionProps;
-    phoneContactBox: PhoneContactBoxMobileProps;
+    contactInfoBoxMobileProps: ContactInfoBoxMobileProps;
     contactProps: ContactSectionProps;
     isJonSnow?: boolean;
 }

package/dist/src/components/pages/ContactUsPage/ContactUsPageProps.ts

@@ -1,9 +1,9 @@
 import { type ContactSectionProps, type JumbotronSimplifiedSectionProps } from '../../sections'
-import { type PhoneContactBoxMobileProps } from '../../molecules'
+import { ContactInfoBoxMobileProps } from 'src/components/molecules/ContactInfoBoxMobile/ContactInfoBoxMobileProps.types'
 
 export interface ContactUsPageProps {
   jumbotronSimplifiedSectionProps: JumbotronSimplifiedSectionProps
-  phoneContactBox: PhoneContactBoxMobileProps
+  contactInfoBoxMobileProps: ContactInfoBoxMobileProps
   contactProps: ContactSectionProps
   isJonSnow?: boolean
 }

package/dist/src/components/pages/HowItWorksPage/HowItWorksPage.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type HowItWorksPageProps } from './HowItWorksPageProps';
+export declare const HowItWorksPage: React.FC<HowItWorksPageProps>;

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { HeroSection, LawGeniusCardsSection, TryNowSection, TryOurFreeLegalBlogsSection } from '../../sections';
+export const HowItWorksPage = ({ aboutUsSectionProps, howItWorksStep1Props, howItWorksStep2Props, howItWorksStep3Props, howItWorksStep4Props, lawGeniusCardsSectionProps, tryNowSectionProps }) => {
+    return (_jsxs(_Fragment, { children: [aboutUsSectionProps != null && _jsx(HeroSection, { ...aboutUsSectionProps }), howItWorksStep1Props != null && _jsx(TryOurFreeLegalBlogsSection, { ...howItWorksStep1Props }), howItWorksStep2Props != null && _jsx(TryOurFreeLegalBlogsSection, { ...howItWorksStep2Props }), howItWorksStep3Props != null && _jsx(TryOurFreeLegalBlogsSection, { ...howItWorksStep3Props }), howItWorksStep4Props != null && _jsx(TryOurFreeLegalBlogsSection, { ...howItWorksStep4Props }), lawGeniusCardsSectionProps != null && _jsx(LawGeniusCardsSection, { ...lawGeniusCardsSectionProps }), tryNowSectionProps != null && _jsx(TryNowSection, { ...tryNowSectionProps })] }));
+};

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

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import { HeroSection, LawGeniusCardsSection, TryNowSection, TryOurFreeLegalBlogsSection } from '../../sections'
+import { type HowItWorksPageProps } from './HowItWorksPageProps'
+
+export const HowItWorksPage: React.FC<HowItWorksPageProps> = ({
+  aboutUsSectionProps,
+  howItWorksStep1Props,
+  howItWorksStep2Props,
+  howItWorksStep3Props,
+  howItWorksStep4Props,
+  lawGeniusCardsSectionProps,
+  tryNowSectionProps
+}) => {
+  return (
+    <>
+      {aboutUsSectionProps != null && <HeroSection {...aboutUsSectionProps} />}
+      {howItWorksStep1Props != null && <TryOurFreeLegalBlogsSection {...howItWorksStep1Props} />}
+      {howItWorksStep2Props != null && <TryOurFreeLegalBlogsSection {...howItWorksStep2Props} />}
+      {howItWorksStep3Props != null && <TryOurFreeLegalBlogsSection {...howItWorksStep3Props} />}
+      {howItWorksStep4Props != null && <TryOurFreeLegalBlogsSection {...howItWorksStep4Props} />}
+      {lawGeniusCardsSectionProps != null && <LawGeniusCardsSection {...lawGeniusCardsSectionProps} />}
+      {tryNowSectionProps != null && <TryNowSection {...tryNowSectionProps} />}
+    </>
+  )
+}

package/dist/src/components/pages/HowItWorksPage/HowItWorksPageProps.d.ts

@@ -0,0 +1,10 @@
+import type { HeroSectionProps, LawGeniusCardsSectionProps, TryNowSectionProps, TryOurFreeLegalBlogsSectionProps } from '../../sections';
+export interface HowItWorksPageProps {
+    aboutUsSectionProps?: HeroSectionProps;
+    howItWorksStep1Props?: TryOurFreeLegalBlogsSectionProps;
+    howItWorksStep2Props?: TryOurFreeLegalBlogsSectionProps;
+    howItWorksStep3Props?: TryOurFreeLegalBlogsSectionProps;
+    howItWorksStep4Props?: TryOurFreeLegalBlogsSectionProps;
+    lawGeniusCardsSectionProps?: LawGeniusCardsSectionProps;
+    tryNowSectionProps?: TryNowSectionProps;
+}

package/dist/src/components/pages/HowItWorksPage/HowItWorksPageProps.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/pages/HowItWorksPage/HowItWorksPageProps.ts

@@ -0,0 +1,16 @@
+import type {
+  HeroSectionProps,
+  LawGeniusCardsSectionProps,
+  TryNowSectionProps,
+  TryOurFreeLegalBlogsSectionProps
+} from '../../sections'
+
+export interface HowItWorksPageProps {
+  aboutUsSectionProps?: HeroSectionProps
+  howItWorksStep1Props?: TryOurFreeLegalBlogsSectionProps
+  howItWorksStep2Props?: TryOurFreeLegalBlogsSectionProps
+  howItWorksStep3Props?: TryOurFreeLegalBlogsSectionProps
+  howItWorksStep4Props?: TryOurFreeLegalBlogsSectionProps
+  lawGeniusCardsSectionProps?: LawGeniusCardsSectionProps
+  tryNowSectionProps?: TryNowSectionProps
+}

package/dist/src/components/pages/HowItWorksPage/index.d.ts

@@ -0,0 +1,2 @@
+export * from './HowItWorksPage';
+export * from './HowItWorksPageProps';

package/dist/src/components/pages/HowItWorksPage/index.js

@@ -0,0 +1,2 @@
+export * from './HowItWorksPage';
+export * from './HowItWorksPageProps';

package/dist/src/components/pages/HowItWorksPage/index.ts

@@ -0,0 +1,2 @@
+export * from './HowItWorksPage'
+export * from './HowItWorksPageProps'

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PricingPageProps } from './PricingPageProps';
+export declare const PricingPage: React.FC<PricingPageProps>;

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardBoxFeaturedSection, CardBoxMinimalSection, FaqSection, HeroSection } from '../../sections';
+import { BenefitCard } from '../../atoms';
+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 }), _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.d.ts

@@ -0,0 +1 @@
+export declare const PricingPageStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -0,0 +1,130 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const PricingPageStyled = styled.div `
+  width: 100%;
+  .hero-section {
+    .hero-content__image {
+      .gatsby-image-wrapper {
+        min-height: 360px;
+        @media ${device['portrait-tablets']} {
+          min-height: auto;
+        }
+      }
+    }
+  }
+
+  .pricing-plans {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    align-items: center;
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 2rem;
+    margin-bottom: 48px;
+    &__title {
+      color: var(--Neutral-800, var(--neutral-neutral-1));
+      font-size: 28px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 32px;
+      letter-spacing: -0.3px;
+      margin-top: 48px;
+      text-align: center;
+    }
+
+    .subscription-card {
+      min-width: 379px;
+    }
+
+    .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;
+      flex-direction: column;
+      gap: 32px;
+
+      @media ${device.desktop} {
+        flex-direction: row;
+      }
+    }
+  }
+
+  .support-section {
+    margin-top: 48px;
+    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));
+        font-size: 28px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 32px;
+        letter-spacing: -0.3px;
+        margin-bottom: 24px;
+      }
+    }
+  }
+
+  .benefits {
+    padding: 48px;
+    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;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 32px;
+      letter-spacing: -0.3px;
+      margin-bottom: 40px;
+    }
+    &__cards {
+      display: flex;
+      gap: 16px;
+      flex-direction: column;
+      width: 100%;
+
+      @media ${device.laptop} {
+        flex-direction: row;
+      }
+    }
+  }
+  .faqs-section {
+    max-width: inherit;
+    align-items: center;
+    padding-bottom: 80px;
+    padding-top: 48px;
+    background: var(--neutral-neutral-6);
+    &__content {
+      max-width: 1200px;
+    }
+  }
+`;

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

@@ -0,0 +1,131 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const PricingPageStyled = styled.div`
+  width: 100%;
+  .hero-section {
+    .hero-content__image {
+      .gatsby-image-wrapper {
+        min-height: 360px;
+        @media ${device['portrait-tablets']} {
+          min-height: auto;
+        }
+      }
+    }
+  }
+
+  .pricing-plans {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    align-items: center;
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 2rem;
+    margin-bottom: 48px;
+    &__title {
+      color: var(--Neutral-800, var(--neutral-neutral-1));
+      font-size: 28px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 32px;
+      letter-spacing: -0.3px;
+      margin-top: 48px;
+      text-align: center;
+    }
+
+    .subscription-card {
+      min-width: 379px;
+    }
+
+    .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;
+      flex-direction: column;
+      gap: 32px;
+
+      @media ${device.desktop} {
+        flex-direction: row;
+      }
+    }
+  }
+
+  .support-section {
+    margin-top: 48px;
+    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));
+        font-size: 28px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 32px;
+        letter-spacing: -0.3px;
+        margin-bottom: 24px;
+      }
+    }
+  }
+
+  .benefits {
+    padding: 48px;
+    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;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 32px;
+      letter-spacing: -0.3px;
+      margin-bottom: 40px;
+    }
+    &__cards {
+      display: flex;
+      gap: 16px;
+      flex-direction: column;
+      width: 100%;
+
+      @media ${device.laptop} {
+        flex-direction: row;
+      }
+    }
+  }
+  .faqs-section {
+    max-width: inherit;
+    align-items: center;
+    padding-bottom: 80px;
+    padding-top: 48px;
+    background: var(--neutral-neutral-6);
+    &__content {
+      max-width: 1200px;
+    }
+  }
+`

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

@@ -0,0 +1,53 @@
+import React from 'react'
+
+import { CardBoxFeaturedSection, CardBoxMinimalSection, FaqSection, HeroSection } from '../../sections'
+import { BenefitCard } from '../../atoms'
+import { PlanBoxPricingSubscriptionCard } from '../../molecules'
+import { PricingPageProps } from './PricingPageProps'
+import { PricingPageStyled } from './PricingPage.styled'
+
+export const PricingPage: React.FC<PricingPageProps> = ({
+  benefitsContent,
+  faqsContent,
+  helpResourcesCards,
+  pricingPlanContent,
+  pricingSection,
+  supportContent
+}) => {
+  return (
+    <PricingPageStyled>
+      {pricingSection != null && <HeroSection {...pricingSection} />}
+      <div className='pricing-plans wrapper wrapper--responsive'>
+        {pricingPlanContent?.title && <h2 className='pricing-plans__title'>{pricingPlanContent.title}</h2>}
+        <div className='pricing-plans__cards'>
+          {pricingPlanContent?.plans?.length > 0 &&
+            pricingPlanContent?.plans?.map((plan) => <PlanBoxPricingSubscriptionCard key={plan?.id} {...plan} />)}
+        </div>
+      </div>
+      <CardBoxMinimalSection cards={helpResourcesCards} />
+      <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'>
+        {supportContent?.title && (
+          <div className='support-section__content'>
+            <h2>{supportContent.title}</h2>
+            {supportContent.description}
+          </div>
+        )}
+        <CardBoxFeaturedSection cards={supportContent?.benefitsList} />
+      </div>
+      <div className='faqs-section'>
+        <FaqSection groups={faqsContent?.faqItems} givenClass='faqs-section__content wrapper wrapper--responsive' />
+      </div>
+    </PricingPageStyled>
+  )
+}

package/dist/src/components/pages/PricingPage/PricingPageProps.d.ts

@@ -0,0 +1,28 @@
+import { BenefitCardProps, CardBoxProps } from 'src/components/atoms';
+import { FaqGroupProps } from 'src/components/organisms';
+import { HeroSectionProps } from 'src/components/sections';
+import { PlanBoxPricingSubscriptionCardProps } from 'src/components/molecules';
+export interface BenefitContentProps {
+    title: string;
+    benefitsList: BenefitCardProps[];
+}
+export interface FaqsContentProps {
+    faqItems: FaqGroupProps[];
+}
+export interface PricingPlanContentProps {
+    title: string;
+    plans: PlanBoxPricingSubscriptionCardProps[];
+}
+export interface SupportContentProps {
+    title: string;
+    description: string;
+    benefitsList: CardBoxProps[];
+}
+export interface PricingPageProps {
+    benefitsContent: BenefitContentProps;
+    faqsContent: FaqsContentProps;
+    helpResourcesCards: CardBoxProps[];
+    supportContent: SupportContentProps;
+    pricingPlanContent: PricingPlanContentProps;
+    pricingSection: HeroSectionProps;
+}