@npm_leadtech/legal-lib-components 5.18.5 → 5.18.7

package/dist/src/components/organisms/LoginRatafiaContent/LoginRatafiaContent.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LoginRatafiaContentStyled } from './LoginRatafiaContent.styled';
+import { Checkbox } from '../../atoms';
 import { TextInput } from '../../molecules';
-const LoginRatafiaContent = ({ title, email }) => {
-    return (_jsxs(LoginRatafiaContentStyled, { children: [_jsx("h2", { className: 'login-ratafia-content__title', children: title }), _jsx("div", { className: 'login-ratafia-content__email', children: _jsx(TextInput, { ...email }) })] }));
+import { LoginRatafiaContentStyled } from './LoginRatafiaContent.styled';
+const LoginRatafiaContent = ({ title, email, policy }) => {
+    return (_jsxs(LoginRatafiaContentStyled, { children: [_jsx("h2", { className: 'login-ratafia-content__title', children: title }), _jsx("div", { className: 'login-ratafia-content__email', children: _jsx(TextInput, { ...email }) }), _jsx("div", { className: 'login-ratafia-content__policy', children: _jsx(Checkbox, { ...policy }) })] }));
 };
 export default LoginRatafiaContent;

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

@@ -1,3 +1,4 @@
+import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const LoginRatafiaContentStyled = styled.div `
   width: 100%;
@@ -11,4 +12,10 @@ export const LoginRatafiaContentStyled = styled.div `
       margin-bottom: 0.5rem;
     }
   }
+  .login-ratafia-content__policy {
+    margin-top: 1rem;
+    @media ${device['portrait-tablets']} {
+      display: none;
+    }
+  }
 `;

package/dist/src/components/organisms/LoginRatafiaContent/LoginRatafiaContent.styled.ts

@@ -1,3 +1,4 @@
+import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
 export const LoginRatafiaContentStyled = styled.div`
@@ -12,4 +13,10 @@ export const LoginRatafiaContentStyled = styled.div`
       margin-bottom: 0.5rem;
     }
   }
+  .login-ratafia-content__policy {
+    margin-top: 1rem;
+    @media ${device['portrait-tablets']} {
+      display: none;
+    }
+  }
 `

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

@@ -1,16 +1,22 @@
 import React, { type FC } from 'react'
 
 import { type LoginRatafiaContentProps } from './LoginRatafiaContentProps.types'
-import { LoginRatafiaContentStyled } from './LoginRatafiaContent.styled'
+
+import { Checkbox } from '../../atoms'
 import { TextInput } from '../../molecules'
 
-const LoginRatafiaContent: FC<LoginRatafiaContentProps> = ({ title, email }) => {
+import { LoginRatafiaContentStyled } from './LoginRatafiaContent.styled'
+
+const LoginRatafiaContent: FC<LoginRatafiaContentProps> = ({ title, email, policy }) => {
   return (
     <LoginRatafiaContentStyled>
       <h2 className='login-ratafia-content__title'>{title}</h2>
       <div className='login-ratafia-content__email'>
         <TextInput {...email} />
       </div>
+      <div className='login-ratafia-content__policy'>
+        <Checkbox {...policy} />
+      </div>
     </LoginRatafiaContentStyled>
   )
 }

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

@@ -1,15 +1,24 @@
+import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const LoginRatafiaPageStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  gap: 1.5rem;
   background-color: var(--neutral-neutral-6);
 
-  &__ctas {
+  .login-ratafia-page__ctas {
     text-align: center;
     &__button {
       display: block;
       width: 100%;
+      @media ${device['portrait-tablets']} {
+        width: 12.5rem;
+      }
       margin-bottom: 1rem;
     }
-
     &__signIn {
       &__button {
         background: none;

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

@@ -1,16 +1,25 @@
+import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
 export const LoginRatafiaPageStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  gap: 1.5rem;
   background-color: var(--neutral-neutral-6);
 
-  &__ctas {
+  .login-ratafia-page__ctas {
     text-align: center;
     &__button {
       display: block;
       width: 100%;
+      @media ${device['portrait-tablets']} {
+        width: 12.5rem;
+      }
       margin-bottom: 1rem;
     }
-
     &__signIn {
       &__button {
         background: none;

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

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

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import DisclaimerRatafia from '../../atoms/DisclaimerRatafia/DisclaimerRatafia';
+import { LayoutRatafia } from '../../organisms';
+import { RatafiaSubscriptionCard } from '../../molecules';
+import { PricingRatafiaPageStyled } from './PricingRatafiaPage.styled';
+export const PricingRatafiaPage = ({ header, disclaimer, pricingPage }) => {
+    const footerDesktop = (_jsx(DisclaimerRatafia, { icon: disclaimer.icon, text: disclaimer.text, copyrightText: disclaimer.copyrightText, ctaTextShowDisclaimer: disclaimer.ctaTextShowDisclaimer, ctaTextCloseDisclaimer: disclaimer.ctaTextCloseDisclaimer }));
+    const footerMobile = _jsx(_Fragment, { children: footerDesktop });
+    const content = (_jsxs("div", { className: 'pricing-ratafia-page__content', children: [_jsx("div", { className: 'pricing-ratafia-page__content__title', children: pricingPage.title }), _jsx("div", { className: 'pricing-ratafia-page__content__cards', children: pricingPage.cardSubscription?.length > 0 &&
+                    pricingPage.cardSubscription.map((card) => _jsx(RatafiaSubscriptionCard, { ...card }, card.id)) })] }));
+    return (_jsx(PricingRatafiaPageStyled, { className: 'pricing-ratafia-page', children: _jsx(LayoutRatafia, { header: header, content: content, footerDesktop: footerDesktop, footerMobile: footerMobile }) }));
+};

package/dist/src/components/pages/PricingRatafiaPage/PricingRatafiaPage.styled.d.ts

@@ -0,0 +1 @@
+export declare const PricingRatafiaPageStyled: 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/PricingRatafiaPage/PricingRatafiaPage.styled.js

@@ -0,0 +1,28 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const PricingRatafiaPageStyled = styled.div `
+  background-color: var(--neutral-neutral-6);
+
+  .pricing-ratafia-page__content {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 2rem;
+    width: 100%;
+
+    &__title {
+      font-size: 18px;
+      font-weight: bold;
+      color: var(--neutral-neutral-2);
+    }
+
+    &__cards {
+      display: flex;
+      flex-direction: row;
+      gap: 1rem;
+
+      @media ${device.mobile} {
+        flex-direction: column;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,29 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const PricingRatafiaPageStyled = styled.div`
+  background-color: var(--neutral-neutral-6);
+
+  .pricing-ratafia-page__content {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 2rem;
+    width: 100%;
+
+    &__title {
+      font-size: 18px;
+      font-weight: bold;
+      color: var(--neutral-neutral-2);
+    }
+
+    &__cards {
+      display: flex;
+      flex-direction: row;
+      gap: 1rem;
+
+      @media ${device.mobile} {
+        flex-direction: column;
+      }
+    }
+  }
+`

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

@@ -0,0 +1,38 @@
+import React from 'react'
+
+import DisclaimerRatafia from '../../atoms/DisclaimerRatafia/DisclaimerRatafia'
+import { LayoutRatafia } from '../../organisms'
+import { type PricingRatafiaPageProps } from './PricingRatafiaPageProps'
+import { RatafiaSubscriptionCard } from '../../molecules'
+
+import { PricingRatafiaPageStyled } from './PricingRatafiaPage.styled'
+
+export const PricingRatafiaPage: React.FC<PricingRatafiaPageProps> = ({ header, disclaimer, pricingPage }) => {
+  const footerDesktop = (
+    <DisclaimerRatafia
+      icon={disclaimer.icon}
+      text={disclaimer.text}
+      copyrightText={disclaimer.copyrightText}
+      ctaTextShowDisclaimer={disclaimer.ctaTextShowDisclaimer}
+      ctaTextCloseDisclaimer={disclaimer.ctaTextCloseDisclaimer}
+    />
+  )
+
+  const footerMobile = <>{footerDesktop}</>
+
+  const content = (
+    <div className='pricing-ratafia-page__content'>
+      <div className='pricing-ratafia-page__content__title'>{pricingPage.title}</div>
+      <div className='pricing-ratafia-page__content__cards'>
+        {pricingPage.cardSubscription?.length > 0 &&
+          pricingPage.cardSubscription.map((card) => <RatafiaSubscriptionCard key={card.id} {...card} />)}
+      </div>
+    </div>
+  )
+
+  return (
+    <PricingRatafiaPageStyled className='pricing-ratafia-page'>
+      <LayoutRatafia header={header} content={content} footerDesktop={footerDesktop} footerMobile={footerMobile} />
+    </PricingRatafiaPageStyled>
+  )
+}

package/dist/src/components/pages/PricingRatafiaPage/PricingRatafiaPageProps.d.ts

@@ -0,0 +1,33 @@
+import { type DisclaimerRatafiaProps } from '../../atoms';
+import { type HeaderRatafiaProps } from '../../molecules';
+export interface PricingRatafiaPageProps {
+    header: HeaderRatafiaProps;
+    disclaimer: DisclaimerRatafiaProps;
+    pricingPage: PricingPageProps;
+}
+export interface PricingPageProps {
+    title: string;
+    cardSubscription: SubscriptionCardProps[] | [];
+}
+export interface SubscriptionCardProps {
+    id: string;
+    cardStyle: CardStyleType;
+    iconTitle: FeatureImageProps;
+    title: string;
+    priceText: string;
+    mainFeatures: FeatureProps[] | [];
+    AIFeatures: FeatureProps[] | [];
+    buttonText: string;
+    linkText: string;
+}
+export type CardStyleType = 'Primary' | 'Secondary';
+interface FeatureProps {
+    description: string;
+    image: FeatureImageProps;
+    title: string;
+}
+interface FeatureImageProps {
+    name: string;
+    url: string;
+}
+export {};

package/dist/src/components/pages/PricingRatafiaPage/PricingRatafiaPageProps.js

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

package/dist/src/components/pages/PricingRatafiaPage/PricingRatafiaPageProps.ts

@@ -0,0 +1,38 @@
+import { type DisclaimerRatafiaProps } from '../../atoms'
+import { type HeaderRatafiaProps } from '../../molecules'
+
+export interface PricingRatafiaPageProps {
+  header: HeaderRatafiaProps
+  disclaimer: DisclaimerRatafiaProps
+  pricingPage: PricingPageProps
+}
+
+export interface PricingPageProps {
+  title: string
+  cardSubscription: SubscriptionCardProps[] | []
+}
+
+export interface SubscriptionCardProps {
+  id: string
+  cardStyle: CardStyleType
+  iconTitle: FeatureImageProps
+  title: string
+  priceText: string
+  mainFeatures: FeatureProps[] | []
+  AIFeatures: FeatureProps[] | []
+  buttonText: string
+  linkText: string
+}
+
+export type CardStyleType = 'Primary' | 'Secondary'
+
+interface FeatureProps {
+  description: string
+  image: FeatureImageProps
+  title: string
+}
+
+interface FeatureImageProps {
+  name: string
+  url: string
+}

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

@@ -0,0 +1,2 @@
+export * from './PricingRatafiaPage';
+export * from './PricingRatafiaPageProps';

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

@@ -0,0 +1,2 @@
+export * from './PricingRatafiaPage';
+export * from './PricingRatafiaPageProps';

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

@@ -0,0 +1,2 @@
+export * from './PricingRatafiaPage'
+export * from './PricingRatafiaPageProps'

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

@@ -8,3 +8,4 @@ export * from './LimitReachedRatafiaPage';
 export * from './RatafiaLandingPage';
 export * from './UnsubscribePage';
 export * from './LoginRatafiaPage';
+export * from './PricingRatafiaPage';

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

@@ -8,3 +8,4 @@ export * from './LimitReachedRatafiaPage';
 export * from './RatafiaLandingPage';
 export * from './UnsubscribePage';
 export * from './LoginRatafiaPage';
+export * from './PricingRatafiaPage';

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

@@ -8,3 +8,4 @@ export * from './LimitReachedRatafiaPage'
 export * from './RatafiaLandingPage'
 export * from './UnsubscribePage'
 export * from './LoginRatafiaPage'
+export * from './PricingRatafiaPage'

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

@@ -8,7 +8,7 @@ export const FaqSectionStyled = styled.section `
   max-width: 700px;
   width: 100%;
 
-  .faq-ratafia-section {
+  &.faq-ratafia-section {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -25,5 +25,8 @@ export const FaqSectionStyled = styled.section `
     @media ${device['desktop-xl']} {
       padding: 3rem 28rem 5rem 28rem;
     }
+    .faqs {
+      max-width: 56.75rem;
+    }
   }
 `;

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

@@ -9,7 +9,7 @@ export const FaqSectionStyled = styled.section`
   max-width: 700px;
   width: 100%;
 
-  .faq-ratafia-section {
+  &.faq-ratafia-section {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -26,5 +26,8 @@ export const FaqSectionStyled = styled.section`
     @media ${device['desktop-xl']} {
       padding: 3rem 28rem 5rem 28rem;
     }
+    .faqs {
+      max-width: 56.75rem;
+    }
   }
 `

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

@@ -39,7 +39,6 @@ export const FeaturesRatafiaSectionStyled = styled.section `
 
       &__children {
         display: none;
-        //TODO: Check again with the real container;
         min-width: 50%;
 
         @media ${device.desktop} {

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

@@ -40,7 +40,6 @@ export const FeaturesRatafiaSectionStyled = styled.section`
 
       &__children {
         display: none;
-        //TODO: Check again with the real container;
         min-width: 50%;
 
         @media ${device.desktop} {

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

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

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../atoms';
+import { LayoutRatafiaSectionStyled } from './LayoutRatafiaSection.styled';
+import { TagsRatafiaList } from '../../molecules';
+import { useIsMobileOrTable } from '../../../hooks';
+const LayoutRatafiaSection = ({ title, children, tags = [], ctaLabel, ctaLink = '#', handleOnClick, ctaDataQa = 'ai-section-cta', image }) => {
+    const { isMobile } = useIsMobileOrTable();
+    if (children == undefined)
+        return null;
+    return (_jsx(LayoutRatafiaSectionStyled, { className: 'layout-ratafia-section', children: _jsxs("div", { className: 'layout-ratafia-section__wrapper background-ratafia-animation', children: [_jsxs("div", { className: 'layout-ratafia-section__wrapper__info', children: [_jsxs("div", { className: 'layout-ratafia-section__wrapper__info__paragraph', children: [title && (_jsx("h2", { className: 'layout-ratafia-section__wrapper__info__paragraph__title sans-serif --super-large --bold-weight', children: title })), _jsx("div", { className: 'layout-ratafia-section__wrapper__info__paragraph__content sans-serif --super-medium', children: children })] }), tags?.length > 0 && (_jsx("div", { className: 'layout-ratafia-section__wrapper__info__tags', children: _jsx(TagsRatafiaList, { tags: tags }) })), ctaLabel && (_jsx("div", { className: 'layout-ratafia-section__wrapper__info__button', children: _jsx(Button, { givenClass: 'mid-banner-ratafia-content__cta', dataQa: ctaDataQa, link: ctaLink, onClick: handleOnClick, color: 'primary', label: ctaLabel, fluid: isMobile }) }))] }), image !== null && _jsx("div", { className: 'layout-ratafia-section__wrapper__image', children: image })] }) }));
+};
+export default LayoutRatafiaSection;

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

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

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

@@ -0,0 +1,75 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const LayoutRatafiaSectionStyled = styled.section `
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  width: 100%;
+  padding: 2rem 1.5rem;
+
+  @media ${device.laptop} {
+    padding: 3rem 2rem;
+  }
+
+  @media ${device['desktop-xl']} {
+    padding: 3rem 0;
+  }
+
+  .layout-ratafia-section {
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      align-self: stretch;
+      padding: 1.5rem;
+      gap: 2.5rem;
+      border-radius: 16px;
+      max-width: 1200px;
+
+      @media ${device['landscape-tablets']} {
+        flex-direction: row;
+        padding: 2.5rem;
+      }
+
+      @media ${device.laptop} {
+        gap: 4rem;
+        padding: 4rem;
+      }
+
+      &__info {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        align-self: stretch;
+        gap: 2rem;
+
+        &__paragraph {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+          color: var(--others-white);
+
+          p:not(:last-child) {
+            margin-bottom: 1.5rem;
+          }
+        }
+
+        &__tags {
+          flex: 1;
+        }
+
+        &__button {
+          display: flex;
+          width: 100%;
+        }
+      }
+
+      &__image {
+        display: flex;
+        flex: 300px 0 0;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,76 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const LayoutRatafiaSectionStyled = styled.section`
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  width: 100%;
+  padding: 2rem 1.5rem;
+
+  @media ${device.laptop} {
+    padding: 3rem 2rem;
+  }
+
+  @media ${device['desktop-xl']} {
+    padding: 3rem 0;
+  }
+
+  .layout-ratafia-section {
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      align-self: stretch;
+      padding: 1.5rem;
+      gap: 2.5rem;
+      border-radius: 16px;
+      max-width: 1200px;
+
+      @media ${device['landscape-tablets']} {
+        flex-direction: row;
+        padding: 2.5rem;
+      }
+
+      @media ${device.laptop} {
+        gap: 4rem;
+        padding: 4rem;
+      }
+
+      &__info {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        align-self: stretch;
+        gap: 2rem;
+
+        &__paragraph {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+          color: var(--others-white);
+
+          p:not(:last-child) {
+            margin-bottom: 1.5rem;
+          }
+        }
+
+        &__tags {
+          flex: 1;
+        }
+
+        &__button {
+          display: flex;
+          width: 100%;
+        }
+      }
+
+      &__image {
+        display: flex;
+        flex: 300px 0 0;
+      }
+    }
+  }
+`

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

@@ -0,0 +1,61 @@
+import React, { type FC } from 'react'
+
+import { Button } from '../../atoms'
+import { type LayoutRatafiaSectionProps } from './LayoutRatafiaSectionProps.types'
+import { LayoutRatafiaSectionStyled } from './LayoutRatafiaSection.styled'
+import { TagsRatafiaList } from '../../molecules'
+import { useIsMobileOrTable } from '../../../hooks'
+
+const LayoutRatafiaSection: FC<LayoutRatafiaSectionProps> = ({
+  title,
+  children,
+  tags = [],
+  ctaLabel,
+  ctaLink = '#',
+  handleOnClick,
+  ctaDataQa = 'ai-section-cta',
+  image
+}) => {
+  const { isMobile } = useIsMobileOrTable()
+  if (children == undefined) return null
+
+  return (
+    <LayoutRatafiaSectionStyled className='layout-ratafia-section'>
+      <div className='layout-ratafia-section__wrapper background-ratafia-animation'>
+        <div className='layout-ratafia-section__wrapper__info'>
+          <div className='layout-ratafia-section__wrapper__info__paragraph'>
+            {title && (
+              <h2 className='layout-ratafia-section__wrapper__info__paragraph__title sans-serif --super-large --bold-weight'>
+                {title}
+              </h2>
+            )}
+            <div className='layout-ratafia-section__wrapper__info__paragraph__content sans-serif --super-medium'>
+              {children}
+            </div>
+          </div>
+          {tags?.length > 0 && (
+            <div className='layout-ratafia-section__wrapper__info__tags'>
+              <TagsRatafiaList tags={tags} />
+            </div>
+          )}
+          {ctaLabel && (
+            <div className='layout-ratafia-section__wrapper__info__button'>
+              <Button
+                givenClass='mid-banner-ratafia-content__cta'
+                dataQa={ctaDataQa}
+                link={ctaLink}
+                onClick={handleOnClick}
+                color='primary'
+                label={ctaLabel}
+                fluid={isMobile}
+              />
+            </div>
+          )}
+        </div>
+        {image !== null && <div className='layout-ratafia-section__wrapper__image'>{image}</div>}
+      </div>
+    </LayoutRatafiaSectionStyled>
+  )
+}
+
+export default LayoutRatafiaSection

package/dist/src/components/sections/LayoutRatafiaSection/LayoutRatafiaSectionProps.types.d.ts

@@ -0,0 +1,12 @@
+import { MouseEventHandler } from 'react';
+import { TagRatafiaItemProps } from 'src/components/atoms';
+export interface LayoutRatafiaSectionProps {
+    title?: string;
+    children: React.ReactNode;
+    tags?: TagRatafiaItemProps[];
+    ctaLabel?: string;
+    ctaLink?: string;
+    handleOnClick?: MouseEventHandler;
+    ctaDataQa?: string;
+    image?: React.ReactNode;
+}