@npm_leadtech/legal-lib-components 5.39.12 → 5.40.0

package/dist/src/components/molecules/Feedback/FeedbackProps.types.ts

@@ -5,8 +5,8 @@ export interface FeedbackProps {
   title?: string
   text?: string
   imgSrc?: string
-  large?: boolean
-  fluid?: boolean
+  large: boolean
+  fluid: boolean
   dataQa?: string
   button?: ButtonProps
   cancel?: {

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

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, IconSvgURLWithThemeColor, RichTextStrapi } from '../../atoms';
 import { RatafiaSubscriptionCardStyled } from './RatafiaSubscriptionCard.styled';
 import { stringSlugify } from '../../../utils/stringSlugify';
-const RatafiaSubscriptionCard = ({ cardStyle = 'primary', iconTitle, title, priceText, mainFeatures, AIFeatures, buttonText, dataQa, handleClick }) => {
+const RatafiaSubscriptionCard = ({ cardStyle, iconTitle, title, priceText, mainFeatures, AIFeatures, buttonText, linkText }) => {
     if (!title)
         return null;
     const buttonStyle = cardStyle === 'Secondary' ? 'primary3' : 'primary';
     const renderFeatures = (features, className) => features.map((feature) => (_jsxs("div", { className: `ratafia-card__feature ${className ?? ''}`, children: [feature.image?.url && _jsx(IconSvgURLWithThemeColor, { url: feature.image.url, height: '16', width: '16' }), _jsx(RichTextStrapi, { html: feature.title })] }, feature.title)));
-    return (_jsxs(RatafiaSubscriptionCardStyled, { className: `ratafia-card ${cardStyle ? stringSlugify(cardStyle) : 'primary'}`, children: [_jsxs("div", { className: 'ratafia-card__header', children: [title && (_jsxs("div", { className: 'ratafia-card__title', children: [iconTitle?.url && _jsx(IconSvgURLWithThemeColor, { url: iconTitle.url, height: '26', width: '26' }), _jsx(RichTextStrapi, { html: title })] })), priceText && _jsx("div", { className: 'ratafia-card__price-text', children: priceText })] }), _jsx("hr", {}), _jsxs("div", { className: 'ratafia-card__body', children: [mainFeatures && renderFeatures(mainFeatures, 'main-feature'), AIFeatures && renderFeatures(AIFeatures, 'ratafia-feature')] }), buttonText && (_jsx("div", { className: 'ratafia-card__footer', children: _jsx(Button, { dataQa: `${dataQa ?? 'ratafia-card-button'}`, givenClass: 'ratafia-card__button', color: buttonStyle, label: buttonText, noLink: true, onClick: handleClick }) }))] }));
+    return (_jsxs(RatafiaSubscriptionCardStyled, { className: `ratafia-card ${cardStyle ? stringSlugify(cardStyle) : 'primary'}`, children: [_jsxs("div", { className: 'ratafia-card__header', children: [title && (_jsxs("div", { className: 'ratafia-card__title', children: [iconTitle?.url && _jsx(IconSvgURLWithThemeColor, { url: iconTitle.url, height: '26', width: '26' }), _jsx(RichTextStrapi, { html: title })] })), priceText && _jsx("div", { className: 'ratafia-card__price-text', children: priceText })] }), _jsx("hr", {}), _jsxs("div", { className: 'ratafia-card__body', children: [mainFeatures && renderFeatures(mainFeatures, 'main-feature'), AIFeatures && renderFeatures(AIFeatures, 'ratafia-feature')] }), buttonText && (_jsx("div", { className: 'ratafia-card__footer', children: _jsx(Button, { dataQa: 'ratafia-card-button', givenClass: 'ratafia-card__button', color: buttonStyle, label: buttonText, link: linkText ?? '#' }) }))] }));
 };
 export default RatafiaSubscriptionCard;

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

@@ -6,15 +6,14 @@ import { RatafiaSubscriptionCardStyled } from './RatafiaSubscriptionCard.styled'
 import { stringSlugify } from '../../../utils/stringSlugify'
 
 const RatafiaSubscriptionCard: FC<RatafiaSubscriptionCardProps> = ({
-  cardStyle = 'primary',
+  cardStyle,
   iconTitle,
   title,
   priceText,
   mainFeatures,
   AIFeatures,
   buttonText,
-  dataQa,
-  handleClick
+  linkText
 }) => {
   if (!title) return null
   const buttonStyle = cardStyle === 'Secondary' ? 'primary3' : 'primary'
@@ -45,12 +44,11 @@ const RatafiaSubscriptionCard: FC<RatafiaSubscriptionCardProps> = ({
       {buttonText && (
         <div className='ratafia-card__footer'>
           <Button
-            dataQa={`${dataQa ?? 'ratafia-card-button'}`}
+            dataQa='ratafia-card-button'
             givenClass='ratafia-card__button'
             color={buttonStyle}
             label={buttonText}
-            noLink
-            onClick={handleClick}
+            link={linkText ?? '#'}
           />
         </div>
       )}

package/dist/src/components/molecules/RatafiaSubscriptionCard/RatafiaSubscriptionCardProps.types.d.ts

@@ -1,5 +1,4 @@
 export interface RatafiaSubscriptionCardProps {
-    subscriptionTypeName?: string;
     cardStyle?: CardStyleType;
     iconTitle?: IconTitleProps;
     title?: string;
@@ -7,8 +6,7 @@ export interface RatafiaSubscriptionCardProps {
     mainFeatures?: BenefitProps[];
     AIFeatures?: BenefitProps[];
     buttonText?: string;
-    dataQa?: string;
-    handleClick?: () => void;
+    linkText?: string;
 }
 interface IconTitleProps {
     name?: string;

package/dist/src/components/molecules/RatafiaSubscriptionCard/RatafiaSubscriptionCardProps.types.ts

@@ -1,5 +1,4 @@
 export interface RatafiaSubscriptionCardProps {
-  subscriptionTypeName?: string
   cardStyle?: CardStyleType
   iconTitle?: IconTitleProps
   title?: string
@@ -7,8 +6,7 @@ export interface RatafiaSubscriptionCardProps {
   mainFeatures?: BenefitProps[]
   AIFeatures?: BenefitProps[]
   buttonText?: string
-  dataQa?: string
-  handleClick?: () => void
+  linkText?: string
 }
 
 interface IconTitleProps {

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TagRatafiaItem } from '../../atoms';
 import { TagsRatafiaListStyled } from './TagsRatafiaList.styled';
-const TagsRatafiaList = ({ tags = [] }) => {
+const TagsRatafiaList = ({ tags = [], type }) => {
     if (tags.length === 0)
         return null;
-    return (_jsx(TagsRatafiaListStyled, { className: 'tag-ratafia-list', children: tags.map((tag) => (_jsx(TagRatafiaItem, { ...tag }, tag.id))) }));
+    return (_jsx(TagsRatafiaListStyled, { className: 'tag-ratafia-list', children: tags.map((tag) => (_jsx(TagRatafiaItem, { ...tag, type: type }, tag.id))) }));
 };
 export default TagsRatafiaList;

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

@@ -4,13 +4,13 @@ import { TagRatafiaItem } from '../../atoms'
 import { type TagsRatafiaListProps } from './TagsRatafiaListProps.types'
 import { TagsRatafiaListStyled } from './TagsRatafiaList.styled'
 
-const TagsRatafiaList: FC<TagsRatafiaListProps> = ({ tags = [] }) => {
+const TagsRatafiaList: FC<TagsRatafiaListProps> = ({ tags = [], type }) => {
   if (tags.length === 0) return null
 
   return (
     <TagsRatafiaListStyled className='tag-ratafia-list'>
       {tags.map((tag) => (
-        <TagRatafiaItem key={tag.id} {...tag} />
+        <TagRatafiaItem key={tag.id} {...tag} type={type} />
       ))}
     </TagsRatafiaListStyled>
   )

package/dist/src/components/molecules/TagsRatafiaList/TagsRatafiaListProps.types.d.ts

@@ -1,4 +1,5 @@
 import { type TagRatafiaItemProps } from '../../atoms';
 export interface TagsRatafiaListProps {
     tags: TagRatafiaItemProps[];
+    type?: string;
 }

package/dist/src/components/molecules/TagsRatafiaList/TagsRatafiaListProps.types.ts

@@ -2,4 +2,5 @@ import { type TagRatafiaItemProps } from '../../atoms'
 
 export interface TagsRatafiaListProps {
   tags: TagRatafiaItemProps[]
+  type?: string
 }

package/dist/src/components/organisms/JumbotronEsignatureContent/JumbotronEsignatureContent.d.ts

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

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { JumbotronEsignatureStyled } from './JumbotronEsignatureContent.styled';
+import { TagsRatafiaList } from '../../molecules';
+const JumbotronEsignatureContent = ({ title, body, tags, type }) => {
+    return (_jsxs(JumbotronEsignatureStyled, { children: [_jsx("div", { className: 'jumbotron-esignature-content__title', children: title }), _jsx("span", { className: 'sans-serif --medium jumbotron-esignature-content__description', itemProp: 'text', children: body }), _jsx(TagsRatafiaList, { tags: tags, type: type })] }));
+};
+export default JumbotronEsignatureContent;

package/dist/src/components/organisms/JumbotronEsignatureContent/JumbotronEsignatureContent.styled.d.ts

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

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+export const JumbotronEsignatureStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+
+  .jumbotron-esignature-content__title {
+    &__text {
+      line-height: 2.25rem;
+      font-size: 2rem;
+      font-family: 'Inter', sans-serif;
+      color: var(--primary-main-dark-2);
+      font-weight: 700;
+      letter-spacing: 0.3rem;
+
+      &__icon {
+        padding: 0 0.6rem;
+        border-radius: 4px;
+        color: var(--primary-main-dark-2);
+        background: var(--secondary-main-light-2);
+      }
+    }
+  }
+  .jumbotron-esignature-content__description {
+    color: var(--neutral-neutral-1);
+  }
+`;

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

@@ -0,0 +1,29 @@
+import styled from 'styled-components'
+
+export const JumbotronEsignatureStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+
+  .jumbotron-esignature-content__title {
+    &__text {
+      line-height: 2.25rem;
+      font-size: 2rem;
+      font-family: 'Inter', sans-serif;
+      color: var(--primary-main-dark-2);
+      font-weight: 700;
+      letter-spacing: 0.3rem;
+
+      &__icon {
+        padding: 0 0.6rem;
+        border-radius: 4px;
+        color: var(--primary-main-dark-2);
+        background: var(--secondary-main-light-2);
+      }
+    }
+  }
+  .jumbotron-esignature-content__description {
+    color: var(--neutral-neutral-1);
+  }
+`

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

@@ -0,0 +1,19 @@
+import React, { type FC } from 'react'
+
+import { type JumbotronEsignatureContentProps } from './JumbotronEsignatureContentProps.types'
+import { JumbotronEsignatureStyled } from './JumbotronEsignatureContent.styled'
+import { TagsRatafiaList } from '../../molecules'
+
+const JumbotronEsignatureContent: FC<JumbotronEsignatureContentProps> = ({ title, body, tags, type }) => {
+  return (
+    <JumbotronEsignatureStyled>
+      <div className='jumbotron-esignature-content__title'>{title}</div>
+      <span className='sans-serif --medium jumbotron-esignature-content__description' itemProp='text'>
+        {body}
+      </span>
+      <TagsRatafiaList tags={tags} type={type} />
+    </JumbotronEsignatureStyled>
+  )
+}
+
+export default JumbotronEsignatureContent

package/dist/src/components/organisms/JumbotronEsignatureContent/JumbotronEsignatureContentProps.types.d.ts

@@ -0,0 +1,7 @@
+import { type TagRatafiaItemProps } from '../../atoms';
+export interface JumbotronEsignatureContentProps {
+    title: React.ReactNode | string;
+    body: React.ReactNode;
+    tags: TagRatafiaItemProps[];
+    type: string;
+}

package/dist/src/components/organisms/JumbotronEsignatureContent/JumbotronEsignatureContentProps.types.js

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

package/dist/src/components/organisms/JumbotronEsignatureContent/JumbotronEsignatureContentProps.types.ts

@@ -0,0 +1,8 @@
+import { type TagRatafiaItemProps } from '../../atoms'
+
+export interface JumbotronEsignatureContentProps {
+  title: React.ReactNode | string
+  body: React.ReactNode
+  tags: TagRatafiaItemProps[]
+  type: string
+}

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

@@ -0,0 +1,2 @@
+export { default as JumbotronEsignatureContent } from './JumbotronEsignatureContent';
+export { type JumbotronEsignatureContentProps } from './JumbotronEsignatureContentProps.types';

package/dist/src/components/organisms/JumbotronEsignatureContent/index.js

@@ -0,0 +1 @@
+export { default as JumbotronEsignatureContent } from './JumbotronEsignatureContent';

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

@@ -0,0 +1,2 @@
+export { default as JumbotronEsignatureContent } from './JumbotronEsignatureContent'
+export { type JumbotronEsignatureContentProps } from './JumbotronEsignatureContentProps.types'

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { JumbotronRatafiaStyled } from './JumbotronRatafiaContent.styled';
 import { TagsRatafiaList } from '../../molecules';
-const JumbotronRatafiaContent = ({ title, body, tags }) => {
-    return (_jsxs(JumbotronRatafiaStyled, { children: [_jsx("div", { className: 'jumbotron-ratafia-content__title', children: title }), _jsx("span", { className: 'sans-serif --medium jumbotron-ratafia-content__description', itemProp: 'text', children: body }), _jsx(TagsRatafiaList, { tags: tags })] }));
+const JumbotronRatafiaContent = ({ title, body, tags, type }) => {
+    return (_jsxs(JumbotronRatafiaStyled, { children: [_jsx("div", { className: 'jumbotron-ratafia-content__title', children: title }), _jsx("span", { className: 'sans-serif --medium jumbotron-ratafia-content__description', itemProp: 'text', children: body }), _jsx(TagsRatafiaList, { tags: tags, type: type })] }));
 };
 export default JumbotronRatafiaContent;

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

@@ -4,14 +4,14 @@ import { type JumbotronRatafiaContentProps } from './JumbotronRatafiaContentProp
 import { JumbotronRatafiaStyled } from './JumbotronRatafiaContent.styled'
 import { TagsRatafiaList } from '../../molecules'
 
-const JumbotronRatafiaContent: FC<JumbotronRatafiaContentProps> = ({ title, body, tags }) => {
+const JumbotronRatafiaContent: FC<JumbotronRatafiaContentProps> = ({ title, body, tags, type }) => {
   return (
     <JumbotronRatafiaStyled>
       <div className='jumbotron-ratafia-content__title'>{title}</div>
       <span className='sans-serif --medium jumbotron-ratafia-content__description' itemProp='text'>
         {body}
       </span>
-      <TagsRatafiaList tags={tags} />
+      <TagsRatafiaList tags={tags} type={type} />
     </JumbotronRatafiaStyled>
   )
 }

package/dist/src/components/organisms/JumbotronRatafiaContent/JumbotronRatafiaContentProps.types.d.ts

@@ -1,6 +1,7 @@
 import { type TagRatafiaItemProps } from '../../atoms';
 export interface JumbotronRatafiaContentProps {
-    title: React.ReactNode;
+    title: React.ReactNode | string;
     body: React.ReactNode;
     tags: TagRatafiaItemProps[];
+    type: string;
 }

package/dist/src/components/organisms/JumbotronRatafiaContent/JumbotronRatafiaContentProps.types.ts

@@ -1,7 +1,8 @@
 import { type TagRatafiaItemProps } from '../../atoms'
 
 export interface JumbotronRatafiaContentProps {
-  title: React.ReactNode
+  title: React.ReactNode | string
   body: React.ReactNode
   tags: TagRatafiaItemProps[]
+  type: string
 }

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

@@ -11,6 +11,7 @@ export * from './FaqGroup';
 export * from './FeaturesRatafiaContent';
 export * from './GuidelinesContent';
 export * from './JumbotronRatafiaContent';
+export * from './JumbotronEsignatureContent';
 export * from './KeyFactsLoadingContentRatafia';
 export * from './KeyFactsResultContentRatafia';
 export * from './LanguageSelector';

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

@@ -11,6 +11,7 @@ export * from './FaqGroup';
 export * from './FeaturesRatafiaContent';
 export * from './GuidelinesContent';
 export * from './JumbotronRatafiaContent';
+export * from './JumbotronEsignatureContent';
 export * from './KeyFactsLoadingContentRatafia';
 export * from './KeyFactsResultContentRatafia';
 export * from './LanguageSelector';

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

@@ -11,6 +11,7 @@ export * from './FaqGroup'
 export * from './FeaturesRatafiaContent'
 export * from './GuidelinesContent'
 export * from './JumbotronRatafiaContent'
+export * from './JumbotronEsignatureContent'
 export * from './KeyFactsLoadingContentRatafia'
 export * from './KeyFactsResultContentRatafia'
 export * from './LanguageSelector'

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

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

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { JumbotronRatafiaSection } from '../../sections';
+export const EsignatureLandingPage = ({ jumbotronEsignatureSectionProps }) => {
+    return (_jsx(JumbotronRatafiaSection, { content: jumbotronEsignatureSectionProps.content, alternativeStyles: jumbotronEsignatureSectionProps.alternativeStyles, children: jumbotronEsignatureSectionProps.children }));
+};

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

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { type EsignatureLandingPageProps } from './EsignatureLandingPageProps.types'
+import { JumbotronRatafiaSection } from '../../sections'
+
+export const EsignatureLandingPage: React.FC<EsignatureLandingPageProps> = ({ jumbotronEsignatureSectionProps }) => {
+  return (
+    <JumbotronRatafiaSection
+      content={jumbotronEsignatureSectionProps.content}
+      alternativeStyles={jumbotronEsignatureSectionProps.alternativeStyles}
+    >
+      {jumbotronEsignatureSectionProps.children}
+    </JumbotronRatafiaSection>
+  )
+}

package/dist/src/components/pages/EsignatureLandingPage/EsignatureLandingPageProps.types.d.ts

@@ -0,0 +1,7 @@
+import { JumbotronEsignatureContentProps } from '../../organisms';
+import { JumbotronRatafiaSectionProps } from '../../sections';
+export interface EsignatureLandingPageProps {
+    jumbotronEsignatureSectionProps: Omit<JumbotronRatafiaSectionProps, 'content'> & {
+        content: JumbotronEsignatureContentProps;
+    };
+}

package/dist/src/components/pages/EsignatureLandingPage/EsignatureLandingPageProps.types.js

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

package/dist/src/components/pages/EsignatureLandingPage/EsignatureLandingPageProps.types.ts

@@ -0,0 +1,8 @@
+import { JumbotronEsignatureContentProps } from '../../organisms'
+import { JumbotronRatafiaSectionProps } from '../../sections'
+
+export interface EsignatureLandingPageProps {
+  jumbotronEsignatureSectionProps: Omit<JumbotronRatafiaSectionProps, 'content'> & {
+    content: JumbotronEsignatureContentProps
+  }
+}

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

@@ -0,0 +1,2 @@
+export * from './EsignatureLandingPage';
+export * from './EsignatureLandingPageProps.types';

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

@@ -0,0 +1,2 @@
+export * from './EsignatureLandingPage';
+export * from './EsignatureLandingPageProps.types';

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

@@ -0,0 +1,2 @@
+export * from './EsignatureLandingPage'
+export * from './EsignatureLandingPageProps.types'

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

@@ -1,6 +1,7 @@
 export * from './AboutUsPage';
 export * from './ContactUsPage';
 export * from './ErrorRatafiaPage';
+export * from './EsignatureLandingPage';
 export * from './FaqsPage';
 export * from './KeyFactsResultRatafiaPage';
 export * from './LegalPage';

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

@@ -1,6 +1,7 @@
 export * from './AboutUsPage';
 export * from './ContactUsPage';
 export * from './ErrorRatafiaPage';
+export * from './EsignatureLandingPage';
 export * from './FaqsPage';
 export * from './KeyFactsResultRatafiaPage';
 export * from './LegalPage';

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

@@ -1,6 +1,7 @@
 export * from './AboutUsPage'
 export * from './ContactUsPage'
 export * from './ErrorRatafiaPage'
+export * from './EsignatureLandingPage'
 export * from './FaqsPage'
 export * from './KeyFactsResultRatafiaPage'
 export * from './LegalPage'

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

@@ -1,7 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { JumbotronEsignatureContent } from '../../organisms/JumbotronEsignatureContent';
 import { JumbotronRatafiaContent } from '../../organisms/JumbotronRatafiaContent';
 import { JumbotronRatafiaSectionStyled } from './JumbotronRatafiaSection.styled';
-const JumbotronRatafiaSection = ({ content, children }) => {
-    return (_jsx(JumbotronRatafiaSectionStyled, { className: 'jumbotron-ratafia-section background-ratafia-animation', id: 'ratafia-jumbotron', children: _jsxs("div", { className: 'jumbotron-ratafia-section__wrapper', children: [_jsx(JumbotronRatafiaContent, { title: content.title, tags: content.tags, body: content.body }), _jsx("span", { className: 'jumbotron-ratafia-section__wrapper__children', children: children })] }) }));
+const styleConfigMap = {
+    ratafia: {
+        backgroundClass: 'background-ratafia-animation',
+        id: 'ratafia-jumbotron',
+        type: 'ratafia',
+        ContentComponent: JumbotronRatafiaContent
+    },
+    esignature: {
+        backgroundClass: 'background-esignature',
+        id: 'esignature-jumbotron',
+        type: 'esignature',
+        ContentComponent: JumbotronEsignatureContent
+    }
+};
+const JumbotronRatafiaSection = ({ content, children, alternativeStyles }) => {
+    const styleConfig = styleConfigMap[alternativeStyles ?? 'ratafia'];
+    const sectionClassName = `jumbotron-ratafia-section ${styleConfig.backgroundClass}`;
+    const sectionId = styleConfig.id;
+    return (_jsx(JumbotronRatafiaSectionStyled, { className: sectionClassName, id: sectionId, children: _jsxs("div", { className: 'jumbotron-ratafia-section__wrapper', children: [_jsx(styleConfig.ContentComponent, { title: content.title, tags: content.tags, body: content.body, type: styleConfig.type }), _jsx("span", { className: 'jumbotron-ratafia-section__wrapper__children', children: children })] }) }));
 };
 export default JumbotronRatafiaSection;

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

@@ -14,6 +14,25 @@ export const JumbotronRatafiaSectionStyled = styled.section `
     padding: 5rem 7.5rem 6.5rem 7.5rem;
   }
 
+  &.background-esignature {
+    background-color: #f3f7fa;
+    background-image: url('../../../../images/svg/back-element-sign-01.svg');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+
+    @media ${device['landscape-tablets']} {
+      background-image: url('../../../../images/svg/back-element-sign-02.svg');
+      background-size: cover, cover;
+      background-position: center, center;
+      background-repeat: no-repeat, no-repeat;
+    }
+
+    @media ${device['desktop-xl']} {
+      background-image: url('../../../../images/svg/back-element-sign-03.svg');
+    }
+  }
+
   .jumbotron-ratafia-section {
     &__wrapper {
       display: flex;

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

@@ -15,6 +15,25 @@ export const JumbotronRatafiaSectionStyled = styled.section`
     padding: 5rem 7.5rem 6.5rem 7.5rem;
   }
 
+  &.background-esignature {
+    background-color: #f3f7fa;
+    background-image: url('../../../../images/svg/back-element-sign-01.svg');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+
+    @media ${device['landscape-tablets']} {
+      background-image: url('../../../../images/svg/back-element-sign-02.svg');
+      background-size: cover, cover;
+      background-position: center, center;
+      background-repeat: no-repeat, no-repeat;
+    }
+
+    @media ${device['desktop-xl']} {
+      background-image: url('../../../../images/svg/back-element-sign-03.svg');
+    }
+  }
+
   .jumbotron-ratafia-section {
     &__wrapper {
       display: flex;

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

@@ -1,17 +1,54 @@
 import React, { type FC } from 'react'
 
+import { JumbotronEsignatureContent } from '../../organisms/JumbotronEsignatureContent'
 import { JumbotronRatafiaContent } from '../../organisms/JumbotronRatafiaContent'
 import { type JumbotronRatafiaSectionProps } from './JumbotronRatafiaSectionProps.types'
 import { JumbotronRatafiaSectionStyled } from './JumbotronRatafiaSection.styled'
+import { type TagRatafiaItemProps } from '../../atoms'
+
+interface JumbotronContent {
+  title: React.ReactNode | string
+  body: React.ReactNode
+  tags: TagRatafiaItemProps[]
+  type: string
+}
+interface StyleConfig {
+  backgroundClass: string
+  id: string
+  type: string
+  ContentComponent: React.ComponentType<JumbotronContent>
+}
+
+const styleConfigMap: Record<string, StyleConfig> = {
+  ratafia: {
+    backgroundClass: 'background-ratafia-animation',
+    id: 'ratafia-jumbotron',
+    type: 'ratafia',
+    ContentComponent: JumbotronRatafiaContent
+  },
+  esignature: {
+    backgroundClass: 'background-esignature',
+    id: 'esignature-jumbotron',
+    type: 'esignature',
+    ContentComponent: JumbotronEsignatureContent
+  }
+}
+
+const JumbotronRatafiaSection: FC<JumbotronRatafiaSectionProps> = ({ content, children, alternativeStyles }) => {
+  const styleConfig: StyleConfig = styleConfigMap[alternativeStyles ?? 'ratafia']
+
+  const sectionClassName = `jumbotron-ratafia-section ${styleConfig.backgroundClass}`
+  const sectionId = styleConfig.id
 
-const JumbotronRatafiaSection: FC<JumbotronRatafiaSectionProps> = ({ content, children }) => {
   return (
-    <JumbotronRatafiaSectionStyled
-      className='jumbotron-ratafia-section background-ratafia-animation'
-      id='ratafia-jumbotron'
-    >
+    <JumbotronRatafiaSectionStyled className={sectionClassName} id={sectionId}>
       <div className='jumbotron-ratafia-section__wrapper'>
-        <JumbotronRatafiaContent title={content.title} tags={content.tags} body={content.body} />
+        <styleConfig.ContentComponent
+          title={content.title}
+          tags={content.tags}
+          body={content.body}
+          type={styleConfig.type}
+        />
         <span className='jumbotron-ratafia-section__wrapper__children'>{children}</span>
       </div>
     </JumbotronRatafiaSectionStyled>

package/dist/src/components/sections/JumbotronRatafiaSection/JumbotronRatafiaSectionProps.types.d.ts

@@ -1,5 +1,6 @@
-import { type JumbotronRatafiaContentProps } from '../../organisms';
+import { type JumbotronEsignatureContentProps, type JumbotronRatafiaContentProps } from '../../organisms';
 export interface JumbotronRatafiaSectionProps {
-    content: JumbotronRatafiaContentProps;
+    content: JumbotronRatafiaContentProps | JumbotronEsignatureContentProps;
     children?: React.ReactNode;
+    alternativeStyles?: string;
 }

package/dist/src/components/sections/JumbotronRatafiaSection/JumbotronRatafiaSectionProps.types.ts

@@ -1,6 +1,7 @@
-import { type JumbotronRatafiaContentProps } from '../../organisms'
+import { type JumbotronEsignatureContentProps, type JumbotronRatafiaContentProps } from '../../organisms'
 
 export interface JumbotronRatafiaSectionProps {
-  content: JumbotronRatafiaContentProps
+  content: JumbotronRatafiaContentProps | JumbotronEsignatureContentProps
   children?: React.ReactNode
+  alternativeStyles?: string
 }