@npm_leadtech/legal-lib-components 7.5.8 → 7.7.0

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;
+}

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

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

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

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

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

@@ -0,0 +1,2 @@
+export { PricingPage } from './PricingPage';
+export * from './PricingPageProps';

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

@@ -0,0 +1,2 @@
+export { PricingPage } from './PricingPage';
+export * from './PricingPageProps';

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

@@ -0,0 +1,2 @@
+export { PricingPage } from './PricingPage'
+export * from './PricingPageProps'

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

@@ -11,3 +11,4 @@ export * from './RatafiaPricingPage';
 export * from './RatafiaResultPage';
 export * from './UnsubscribePage';
 export * from './LoginRatafiaPage';
+export * from './PricingPage';

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

@@ -11,3 +11,4 @@ export * from './RatafiaPricingPage';
 export * from './RatafiaResultPage';
 export * from './UnsubscribePage';
 export * from './LoginRatafiaPage';
+export * from './PricingPage';

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

@@ -11,3 +11,4 @@ export * from './RatafiaPricingPage'
 export * from './RatafiaResultPage'
 export * from './UnsubscribePage'
 export * from './LoginRatafiaPage'
+export * from './PricingPage'

package/dist/src/components/sections/BenefitsRatafiaSection/BenefitsRatafiaSectionProps.types.d.ts

@@ -1,8 +1,8 @@
-import { type BenefitRatafiaCardProps } from '../../atoms';
+import { type BenefitCardProps } from '../../atoms';
 import React from 'react';
 export interface BenefitsRatafiaSectionProps {
     title: string;
     description: string;
     descriptionRichtext: React.ReactNode;
-    benefits: BenefitRatafiaCardProps[];
+    benefits: BenefitCardProps[];
 }

package/dist/src/components/sections/BenefitsRatafiaSection/BenefitsRatafiaSectionProps.types.ts

@@ -1,9 +1,9 @@
-import { type BenefitRatafiaCardProps } from '../../atoms'
+import { type BenefitCardProps } from '../../atoms'
 import React from 'react'
 
 export interface BenefitsRatafiaSectionProps {
   title: string
   description: string
   descriptionRichtext: React.ReactNode
-  benefits: BenefitRatafiaCardProps[]
+  benefits: BenefitCardProps[]
 }

package/dist/src/components/sections/CardBoxSection/CardBoxSection.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type CardBoxSectionProps } from './CardBoxSectionProps';
+export declare const CardBoxMinimalSection: React.FC<CardBoxSectionProps>;
+export declare const CardBoxFeaturedSection: React.FC<CardBoxSectionProps>;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CardBoxFeaturedSectionStyled, CardBoxMinimalSectionStyled } from './CardBoxSection.styled';
+import { CardBox } from '../../atoms';
+export const CardBoxMinimalSection = ({ cards }) => {
+    return (_jsx(CardBoxMinimalSectionStyled, { children: cards?.map(({ text, icon, id }) => _jsx(CardBox, { text: text, icon: icon }, id)) }));
+};
+export const CardBoxFeaturedSection = ({ cards }) => {
+    return (_jsx(CardBoxFeaturedSectionStyled, { children: cards?.map(({ text, icon, id }) => (_jsx(CardBox, { text: text, icon: icon, padding: '16px', gap: '0.5rem', borderRadius: '8px' }, id))) }));
+};

package/dist/src/components/sections/CardBoxSection/CardBoxSection.styled.d.ts

@@ -0,0 +1,2 @@
+export declare const CardBoxMinimalSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CardBoxFeaturedSectionStyled: 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/sections/CardBoxSection/CardBoxSection.styled.js

@@ -0,0 +1,33 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const CardBoxMinimalSectionStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 48px 24px;
+  gap: 16px;
+  align-self: stretch;
+  background: var(--neutral-neutral-6);
+
+  @media ${device['landscape-tablets']} {
+    flex-direction: row;
+  }
+`;
+export const CardBoxFeaturedSectionStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 24px 24px;
+  gap: 16px;
+  background: var(--neutral-neutral-6);
+  border-radius: 16px;
+  margin-bottom: 80px;
+  margin-top: 32px;
+  @media ${device.desktop} {
+    min-width: 1200px;
+  }
+
+  @media ${device['landscape-tablets']} {
+    flex-direction: row;
+  }
+`;

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

@@ -0,0 +1,35 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const CardBoxMinimalSectionStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 48px 24px;
+  gap: 16px;
+  align-self: stretch;
+  background: var(--neutral-neutral-6);
+
+  @media ${device['landscape-tablets']} {
+    flex-direction: row;
+  }
+`
+
+export const CardBoxFeaturedSectionStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 24px 24px;
+  gap: 16px;
+  background: var(--neutral-neutral-6);
+  border-radius: 16px;
+  margin-bottom: 80px;
+  margin-top: 32px;
+  @media ${device.desktop} {
+    min-width: 1200px;
+  }
+
+  @media ${device['landscape-tablets']} {
+    flex-direction: row;
+  }
+`

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

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import { CardBoxFeaturedSectionStyled, CardBoxMinimalSectionStyled } from './CardBoxSection.styled'
+import { CardBox } from '../../atoms'
+import { type CardBoxSectionProps } from './CardBoxSectionProps'
+
+export const CardBoxMinimalSection: React.FC<CardBoxSectionProps> = ({ cards }) => {
+  return (
+    <CardBoxMinimalSectionStyled>
+      {cards?.map(({ text, icon, id }) => <CardBox key={id} text={text} icon={icon} />)}
+    </CardBoxMinimalSectionStyled>
+  )
+}
+
+export const CardBoxFeaturedSection: React.FC<CardBoxSectionProps> = ({ cards }) => {
+  return (
+    <CardBoxFeaturedSectionStyled>
+      {cards?.map(({ text, icon, id }) => (
+        <CardBox key={id} text={text} icon={icon} padding='16px' gap='0.5rem' borderRadius='8px' />
+      ))}
+    </CardBoxFeaturedSectionStyled>
+  )
+}

package/dist/src/components/sections/CardBoxSection/CardBoxSectionProps.d.ts

@@ -0,0 +1,4 @@
+import { CardBoxProps } from 'src/components/atoms';
+export interface CardBoxSectionProps {
+    cards: CardBoxProps[];
+}

package/dist/src/components/sections/CardBoxSection/CardBoxSectionProps.js

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

package/dist/src/components/sections/CardBoxSection/CardBoxSectionProps.ts

@@ -0,0 +1,5 @@
+import { CardBoxProps } from 'src/components/atoms'
+
+export interface CardBoxSectionProps {
+  cards: CardBoxProps[]
+}

package/dist/src/components/sections/CardBoxSection/index.d.ts

@@ -0,0 +1,2 @@
+export { CardBoxFeaturedSection, CardBoxMinimalSection } from './CardBoxSection';
+export { type CardBoxSectionProps } from './CardBoxSectionProps';

package/dist/src/components/sections/CardBoxSection/index.js

@@ -0,0 +1 @@
+export { CardBoxFeaturedSection, CardBoxMinimalSection } from './CardBoxSection';

package/dist/src/components/sections/CardBoxSection/index.ts

@@ -0,0 +1,2 @@
+export { CardBoxFeaturedSection, CardBoxMinimalSection } from './CardBoxSection'
+export { type CardBoxSectionProps } from './CardBoxSectionProps'

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

@@ -4,5 +4,5 @@ import { FaqGroup } from '../../organisms';
 import { FaqSectionStyled } from './FaqSection.styled';
 export const FaqSection = ({ groups, givenClass }) => {
     const classnames = classNames(`faqSection ${givenClass ?? ''}`);
-    return (_jsx(FaqSectionStyled, { className: classnames, itemScope: true, itemType: 'https://www.schema.org/FAQPage', children: groups.map((group) => (_jsx(FaqGroup, { ...group }, group.id))) }));
+    return (_jsx(FaqSectionStyled, { className: classnames, itemScope: true, itemType: 'https://www.schema.org/FAQPage', children: groups?.map((group) => _jsx(FaqGroup, { ...group }, group.id)) }));
 };

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

@@ -10,9 +10,7 @@ export const FaqSection: React.FC<FaqSectionProps> = ({ groups, givenClass }) =>
 
   return (
     <FaqSectionStyled className={classnames} itemScope itemType='https://www.schema.org/FAQPage'>
-      {groups.map((group) => (
-        <FaqGroup key={group.id} {...group} />
-      ))}
+      {groups?.map((group) => <FaqGroup key={group.id} {...group} />)}
     </FaqSectionStyled>
   )
 }

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

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { GuidelinesContent } from '../../organisms/GuidelinesContent';
 import { GuidelinesSectionStyled } from './GuidelinesSection.styled';
 const GuidelinesSection = ({ contentGuidelines }) => {
-    return (_jsx(GuidelinesSectionStyled, { className: 'guidelines-section', children: _jsx(GuidelinesContent, { title: contentGuidelines.title, image: contentGuidelines.image, detail: contentGuidelines.detail, tryNowText: contentGuidelines.tryNowText, tryNowButtonText: contentGuidelines.tryNowButtonText, tryNowButtonLink: contentGuidelines.tryNowButtonLink, tryNowButtonDataQa: contentGuidelines.tryNowButtonDataQa, tryNowImage: contentGuidelines.tryNowImage, children: contentGuidelines.children }) }));
+    return (_jsx(GuidelinesSectionStyled, { className: 'guidelines-section', children: _jsx(GuidelinesContent, { title: contentGuidelines.title, image: contentGuidelines.image, detail: contentGuidelines.detail, children: contentGuidelines.children }) }));
 };
 export default GuidelinesSection;

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

@@ -11,11 +11,6 @@ const GuidelinesSection: FC<GuidelinesSectionProps> = ({ contentGuidelines }) =>
         title={contentGuidelines.title}
         image={contentGuidelines.image}
         detail={contentGuidelines.detail}
-        tryNowText={contentGuidelines.tryNowText}
-        tryNowButtonText={contentGuidelines.tryNowButtonText}
-        tryNowButtonLink={contentGuidelines.tryNowButtonLink}
-        tryNowButtonDataQa={contentGuidelines.tryNowButtonDataQa}
-        tryNowImage={contentGuidelines.tryNowImage}
       >
         {contentGuidelines.children}
       </GuidelinesContent>

package/dist/src/components/sections/HeroSection/HeroSection.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import { type HeroSectionProps } from './HeroSectionProps.types';
+declare const HeroSection: FC<HeroSectionProps>;
+export default HeroSection;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HeroContent } from '../../organisms/HeroContent';
+import { HeroSectionStyled } from './HeroSectionStyled.styled';
+const HeroSection = ({ title, subTitle, content }) => {
+    return (_jsx(HeroSectionStyled, { className: 'hero-section', children: _jsxs("div", { className: 'wrapper wrapper--responsive', children: [_jsx("div", { className: 'hero-section__title', children: _jsx("span", { className: 'hero-section__title__text', children: title }) }), Boolean(subTitle) && _jsx("h1", { className: 'hero-section__sub-title', children: subTitle }), _jsx(HeroContent, { image: content.image, button: content?.button, children: content.children })] }) }));
+};
+export default HeroSection;

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

@@ -0,0 +1,24 @@
+import React, { type FC } from 'react'
+
+import { HeroContent } from '../../organisms/HeroContent'
+import { type HeroSectionProps } from './HeroSectionProps.types'
+import { HeroSectionStyled } from './HeroSectionStyled.styled'
+
+const HeroSection: FC<HeroSectionProps> = ({ title, subTitle, content }) => {
+  return (
+    <HeroSectionStyled className='hero-section'>
+      <div className='wrapper wrapper--responsive'>
+        <div className='hero-section__title'>
+          <span className='hero-section__title__text'>{title}</span>
+        </div>
+        {Boolean(subTitle) && <h1 className='hero-section__sub-title'>{subTitle}</h1>}
+
+        <HeroContent image={content.image} button={content?.button}>
+          {content.children}
+        </HeroContent>
+      </div>
+    </HeroSectionStyled>
+  )
+}
+
+export default HeroSection