@npm_leadtech/legal-lib-components 5.7.0 → 5.7.1

package/dist/src/components/pages/FaqsPage/{FaqsPage.styled.ts → FaqsPage.scss}

@@ -1,6 +1,7 @@
-import styled from 'styled-components'
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
 
-export const FaqsPageStyled = styled.div`
+.faq-page {
   .titles {
     display: flex;
     padding: 40px 24px;
@@ -57,4 +58,4 @@ export const FaqsPageStyled = styled.div`
       gap: 106px;
     }
   }
-`
+}

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

@@ -2,12 +2,11 @@ import React from 'react'
 
 import { AsideMenuSection, FaqSection } from '../../sections'
 import { type FaqsPageProps } from './FaqsPageProps'
-
-import { FaqsPageStyled } from './FaqsPage.styled'
+// import './FaqsPage.scss'
 
 export const FaqsPage: React.FC<FaqsPageProps> = ({ title, subtitle, asideMenuSectionProps, faqSectionProps }) => {
   return (
-    <FaqsPageStyled className='faq-page'>
+    <div className='faq-page'>
       <div className='titles'>
         <h1 className='title'>{title}</h1>
         <h2 className='subtitle'>{subtitle}</h2>
@@ -16,6 +15,6 @@ export const FaqsPage: React.FC<FaqsPageProps> = ({ title, subtitle, asideMenuSe
         <AsideMenuSection {...asideMenuSectionProps} />
         <FaqSection {...faqSectionProps} />
       </div>
-    </FaqsPageStyled>
+    </div>
   )
 }

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

@@ -3,13 +3,13 @@ import { KeyFactsLoadingContentRatafia, KeyFactsResultContentRatafia } from '../
 import { Button } from '../../atoms';
 import DisclaimerRatafia from '../../atoms/DisclaimerRatafia/DisclaimerRatafia';
 import { LayoutRatafia } from '../../organisms/LayoutRatafia';
-import { KeyFactsResultRatafiaPageStyled } from './KeyFactsResultRatafiaPage.styled';
+// import './KeyFactsResultRatafiaPage.scss'
 export const KeyFactsResultRatafiaPage = ({ header, resultContent, reviewContent, disclaimer, cta, loadingIcon, loadingText, isLoading }) => {
     const loadingContent = (_jsx("div", { className: 'key-facts-result-page__content', children: _jsx(KeyFactsLoadingContentRatafia, { documentName: resultContent.documentName, icon: loadingIcon, text: loadingText }) }));
     const loadedContent = (_jsx("div", { className: 'key-facts-result-page__content', children: _jsx(KeyFactsResultContentRatafia, { result: resultContent, review: reviewContent }) }));
     const ctaButton = isLoading ? null : (_jsx(Button, { givenClass: 'key-facts-result-page__content__cta', dataQa: cta.dataQa, color: 'primary', label: cta.label, onClick: cta.handleOnClick, noLink: true }));
     const footerDesktop = (_jsx("div", { className: 'key-facts-result-page__footer-desktop', children: _jsx(DisclaimerRatafia, { icon: disclaimer.icon, text: disclaimer.text, copyrightText: disclaimer.copyrightText, ctaTextShowDisclaimer: disclaimer.ctaTextShowDisclaimer, ctaTextCloseDisclaimer: disclaimer.ctaTextCloseDisclaimer }) }));
     const footerMobile = (_jsxs(_Fragment, { children: [footerDesktop, ctaButton] }));
-    return (_jsx(KeyFactsResultRatafiaPageStyled, { className: 'key-facts-result-page', children: _jsx(LayoutRatafia, { header: header, content: isLoading ? loadingContent : loadedContent, cta: ctaButton, footerDesktop: footerDesktop, footerMobile: footerMobile }) }));
+    return (_jsx("div", { className: 'key-facts-result-page', children: _jsx(LayoutRatafia, { header: header, content: isLoading ? loadingContent : loadedContent, cta: ctaButton, footerDesktop: footerDesktop, footerMobile: footerMobile }) }));
 };
 export default KeyFactsResultRatafiaPage;

package/dist/src/components/pages/KeyFactsResultRatafiaPage/{KeyFactsResultRatafiaPage.styled.js → KeyFactsResultRatafiaPage.scss}

@@ -1,7 +1,8 @@
-import styled from 'styled-components';
-export const KeyFactsResultRatafiaPageStyled = styled.div `
-  background-color: var(--neutral-neutral-6);
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
 
+.key-facts-result-page {
+  background-color: var(--neutral-neutral-6);
   &__content {
     display: flex;
     flex-direction: column;
@@ -19,4 +20,4 @@ export const KeyFactsResultRatafiaPageStyled = styled.div `
       }
     }
   }
-`;
+}

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

@@ -5,8 +5,7 @@ import { Button } from '../../atoms'
 import DisclaimerRatafia from '../../atoms/DisclaimerRatafia/DisclaimerRatafia'
 import { type KeyFactsResultRatafiaPageProps } from './KeyFactsResultRatafiaPageProps.types'
 import { LayoutRatafia } from '../../organisms/LayoutRatafia'
-
-import { KeyFactsResultRatafiaPageStyled } from './KeyFactsResultRatafiaPage.styled'
+// import './KeyFactsResultRatafiaPage.scss'
 
 export const KeyFactsResultRatafiaPage: React.FC<KeyFactsResultRatafiaPageProps> = ({
   header,
@@ -60,7 +59,7 @@ export const KeyFactsResultRatafiaPage: React.FC<KeyFactsResultRatafiaPageProps>
   )
 
   return (
-    <KeyFactsResultRatafiaPageStyled className='key-facts-result-page'>
+    <div className='key-facts-result-page'>
       <LayoutRatafia
         header={header}
         content={isLoading ? loadingContent : loadedContent}
@@ -68,7 +67,7 @@ export const KeyFactsResultRatafiaPage: React.FC<KeyFactsResultRatafiaPageProps>
         footerDesktop={footerDesktop}
         footerMobile={footerMobile}
       />
-    </KeyFactsResultRatafiaPageStyled>
+    </div>
   )
 }
 

package/dist/src/components/pages/LoginRatafiaPage/{LoginRatafiaPage.styled.js → LoginPageRatafia.scss}

@@ -1,7 +1,8 @@
-import styled from 'styled-components';
-export const LoginRatafiaPageStyled = styled.div `
-  background-color: var(--neutral-neutral-6);
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
 
+.login-ratafia-page {
+  background-color: var(--neutral-neutral-6);
   &__ctas {
     text-align: center;
     &__button {
@@ -9,7 +10,6 @@ export const LoginRatafiaPageStyled = styled.div `
       width: 100%;
       margin-bottom: 1rem;
     }
-
     &__signIn {
       &__button {
         background: none;
@@ -20,4 +20,4 @@ export const LoginRatafiaPageStyled = styled.div `
       }
     }
   }
-`;
+}

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

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { LayoutRatafia, LoginRatafiaContent } from '../../organisms';
 import { Button } from '../../atoms';
 import DisclaimerRatafia from '../../atoms/DisclaimerRatafia/DisclaimerRatafia';
-import { LoginRatafiaPageStyled } from './LoginRatafiaPage.styled';
+// import './LoginPageRatafia.scss'
 export const LoginRatafiaPage = ({ header, loginContent, ctaAnalizeDocument, ctaSignIn, disclaimer }) => {
     const ctas = (_jsxs("div", { className: 'login-ratafia-page__ctas', children: [_jsx(Button, { givenClass: 'login-ratafia-page__ctas__button', color: 'primary', dataQa: ctaAnalizeDocument.dataQa, label: ctaAnalizeDocument.label, onClick: ctaAnalizeDocument.onClick, noLink: true, disabled: ctaAnalizeDocument.disabled }), _jsxs("span", { className: 'login-ratafia-page__ctas__signIn', children: [ctaSignIn.text, _jsx("button", { className: 'login-ratafia-page__ctas__signIn__button', "data-qa": ctaSignIn.link.dataQa, onClick: ctaSignIn.link.onClick, children: ctaSignIn.link.text })] })] }));
     const footerDesktop = (_jsx(DisclaimerRatafia, { icon: disclaimer.icon, text: disclaimer.text, legalAdviceText: disclaimer.legalAdviceText, copyrightText: disclaimer.copyrightText, ctaTextShowDisclaimer: disclaimer.ctaTextShowDisclaimer, ctaTextCloseDisclaimer: disclaimer.ctaTextCloseDisclaimer }));
     const footerMobile = (_jsxs(_Fragment, { children: [footerDesktop, ctas] }));
     const content = (_jsx(LoginRatafiaContent, { title: loginContent.title, email: loginContent.email, policy: loginContent.policy }));
-    return (_jsx(LoginRatafiaPageStyled, { className: 'login-ratafia-page', children: _jsx(LayoutRatafia, { header: header, content: content, cta: ctas, footerDesktop: footerDesktop, footerMobile: footerMobile }) }));
+    return (_jsx("div", { className: 'login-ratafia-page', children: _jsx(LayoutRatafia, { header: header, content: content, cta: ctas, footerDesktop: footerDesktop, footerMobile: footerMobile }) }));
 };

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

@@ -5,7 +5,7 @@ import { Button } from '../../atoms'
 import DisclaimerRatafia from '../../atoms/DisclaimerRatafia/DisclaimerRatafia'
 import { type LoginRatafiaPageProps } from './LoginRatafiaPageProps'
 
-import { LoginRatafiaPageStyled } from './LoginRatafiaPage.styled'
+// import './LoginPageRatafia.scss'
 
 export const LoginRatafiaPage: React.FC<LoginRatafiaPageProps> = ({
   header,
@@ -60,7 +60,7 @@ export const LoginRatafiaPage: React.FC<LoginRatafiaPageProps> = ({
   )
 
   return (
-    <LoginRatafiaPageStyled className='login-ratafia-page'>
+    <div className='login-ratafia-page'>
       <LayoutRatafia
         header={header}
         content={content}
@@ -68,6 +68,6 @@ export const LoginRatafiaPage: React.FC<LoginRatafiaPageProps> = ({
         footerDesktop={footerDesktop}
         footerMobile={footerMobile}
       />
-    </LoginRatafiaPageStyled>
+    </div>
   )
 }

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

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

package/dist/src/components/sections/AboutUsSection/AboutUsSection.scss

@@ -0,0 +1,52 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.about-us-section {
+  padding-top: 1.125rem;
+  background: var(--primary-main-light-6);
+  margin-bottom: 3rem;
+
+  @include laptop {
+    margin-bottom: 5rem;
+  }
+
+  &__title {
+    text-align: center;
+    margin-bottom: 1rem;
+    &__text {
+      text-transform: uppercase;
+      font-size: 0.8rem;
+      line-height: 1.2;
+      font-weight: 700;
+      font-family: var(--font-sans);
+      color: var(--neutral-neutral-2);
+      padding-bottom: 0.5rem;
+      border-bottom: 1px solid var(--neutral-neutral-3);
+    }
+  }
+
+  &__sub-title {
+    margin-bottom: 1.5rem;
+    text-align: center;
+    font-size: 2rem;
+    line-height: 1.2;
+    letter-spacing: -0.4px;
+    font-weight: 400;
+    font-family: var(--font-serif);
+    color: var(--neutral-neutral-1);
+
+    @include landscape-tablets {
+      font-size: 2.3rem;
+      max-width: $sm;
+      margin: 0 auto 2rem auto;
+    }
+
+    @include desktop {
+      max-width: 792px;
+    }
+
+    @include laptop {
+      font-size: 3rem;
+    }
+  }
+}

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

@@ -3,11 +3,11 @@ import React, { type FC } from 'react'
 
 import { AboutUsContent } from '../../organisms/AboutUsContent'
 import { type AboutUsSectionProps } from './AboutUsSectionProps.types'
-import { AboutUsSectionStyled } from './AboutUsSection.styled'
+// import './AboutUsSection.scss'
 
 const AboutUsSection: FC<AboutUsSectionProps> = ({ title, subTitle, contentAboutUs }) => {
   return (
-    <AboutUsSectionStyled className='about-us-section'>
+    <div className='about-us-section'>
       <div className='wrapper wrapper--responsive'>
         <div className='about-us-section__title'>
           <span className='about-us-section__title__text'>{title}</span>
@@ -18,7 +18,7 @@ const AboutUsSection: FC<AboutUsSectionProps> = ({ title, subTitle, contentAbout
           {contentAboutUs.children}
         </AboutUsContent>
       </div>
-    </AboutUsSectionStyled>
+    </div>
   )
 }
 

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AsSeeInContent, ContactContent } from '../../organisms';
-import { AsSeeInSectionStyled } from './AsSeeInSection.styled';
+// import './AsSeeInSection.scss'
 const AsSeeInSection = ({ title, contentAsSeeIn, contactSectionTitle, contactSectionText, contactSectionBlocks }) => {
     if (contentAsSeeIn.trustWorthyImages.images.length === 0) {
         return null;
     }
-    return (_jsxs(AsSeeInSectionStyled, { className: 'as-seen-in-section-box', children: [_jsxs("div", { className: 'as-seen-in-section wrapper', children: [_jsx("h2", { className: 'as-seen-in-section__title', children: title }), _jsx(AsSeeInContent, { trustWorthyImages: contentAsSeeIn.trustWorthyImages, children: contentAsSeeIn.children })] }), _jsx(ContactContent, { title: contactSectionTitle, text: contactSectionText, contactCards: contactSectionBlocks })] }));
+    return (_jsxs("section", { className: 'as-seen-in-section-box', children: [_jsxs("div", { className: 'as-seen-in-section wrapper', children: [_jsx("h2", { className: 'as-seen-in-section__title', children: title }), _jsx(AsSeeInContent, { trustWorthyImages: contentAsSeeIn.trustWorthyImages, children: contentAsSeeIn.children })] }), _jsx(ContactContent, { title: contactSectionTitle, text: contactSectionText, contactCards: contactSectionBlocks })] }));
 };
 export default AsSeeInSection;

package/dist/src/components/sections/AsSeeInSection/AsSeeInSection.scss

@@ -4,7 +4,6 @@
 .as-seen-in-section-box {
   flex-shrink: 0;
   background-color: get-color(secondary, main-light-5);
-  padding: 0 1.5rem;
 
   @include laptop {
     margin-top: 12rem;

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

@@ -2,7 +2,7 @@ import React, { type FC } from 'react'
 
 import { AsSeeInContent, ContactContent } from '../../organisms'
 import { type AsSeeInSectionProps } from './AsSeeInSectionProps.types'
-import { AsSeeInSectionStyled } from './AsSeeInSection.styled'
+// import './AsSeeInSection.scss'
 
 const AsSeeInSection: FC<AsSeeInSectionProps> = ({
   title,
@@ -16,13 +16,13 @@ const AsSeeInSection: FC<AsSeeInSectionProps> = ({
   }
 
   return (
-    <AsSeeInSectionStyled className='as-seen-in-section-box'>
+    <section className='as-seen-in-section-box'>
       <div className='as-seen-in-section wrapper'>
         <h2 className='as-seen-in-section__title'>{title}</h2>
         <AsSeeInContent trustWorthyImages={contentAsSeeIn.trustWorthyImages}>{contentAsSeeIn.children}</AsSeeInContent>
       </div>
       <ContactContent title={contactSectionTitle} text={contactSectionText} contactCards={contactSectionBlocks} />
-    </AsSeeInSectionStyled>
+    </section>
   )
 }
 

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AsideMenuSectionStyled } from './AsideMenuSection.styled';
+// import './AsideMenuSection.scss'
 export const AsideMenuSection = ({ items, title = '', onClickHandler }) => {
-    return (_jsxs(AsideMenuSectionStyled, { className: 'asideMenu', children: [title.length > 0 && _jsx("div", { className: 'title sans-serif --big', children: title }), _jsx("ul", { className: 'list', children: items.map((item, index) => (_jsx("li", { className: `navItem ${index === 0 ? 'inView' : ''}`, id: `list-item-${item.slug}`, onClick: onClickHandler, onKeyUp: () => onClickHandler, role: 'menuitem', children: onClickHandler !== undefined ? _jsx("span", { children: item.text }) : _jsx("a", { href: `#${item.slug}`, children: item.text }) }, item.id))) })] }));
+    return (_jsxs("aside", { className: 'asideMenu', children: [title.length > 0 && _jsx("div", { className: 'title sans-serif --big', children: title }), _jsx("ul", { className: 'list', children: items.map((item, index) => (_jsx("li", { className: `navItem ${index === 0 ? 'inView' : ''}`, id: `list-item-${item.slug}`, onClick: onClickHandler, onKeyUp: () => onClickHandler, role: 'menuitem', children: onClickHandler !== undefined ? _jsx("span", { children: item.text }) : _jsx("a", { href: `#${item.slug}`, children: item.text }) }, item.id))) })] }));
 };

package/dist/src/components/sections/AsideMenuSection/AsideMenuSection.scss

@@ -0,0 +1,50 @@
+@import '../../../globalStyles/variables.scss';
+
+.asideMenu {
+  .title {
+    color: var(--neutral-neutral-1);
+    font-weight: bold;
+    padding-bottom: 1rem;
+    border-bottom: get-color(neutral, neutral-4) 1px solid;
+    margin-bottom: 1.5rem;
+  }
+
+  .list {
+    display: flex;
+    flex-direction: column;
+    position: sticky;
+    top: 17%;
+  }
+
+  .navItem {
+    color: var(--neutral-neutral-1);
+    font-size: 14px;
+    line-height: 18px;
+    letter-spacing: -0.3px;
+    padding: 16px 0;
+    border-top: get-color(neutral, neutral-4) 1px solid;
+    border-bottom: get-color(neutral, neutral-4) 1px solid;
+
+    span {
+      cursor: pointer;
+    }
+
+    &.inView {
+      span,
+      a {
+        color: var(--primary-main);
+        font-weight: 700;
+      }
+    }
+
+    &:first-child {
+      padding-top: 0;
+      border: none;
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+      border: none;
+    }
+  }
+}

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

@@ -1,11 +1,11 @@
 import React from 'react'
 
 import { type AsideMenuSectionProps } from './AsideMenuSectionProps'
-import { AsideMenuSectionStyled } from './AsideMenuSection.styled'
+// import './AsideMenuSection.scss'
 
 export const AsideMenuSection: React.FC<AsideMenuSectionProps> = ({ items, title = '', onClickHandler }) => {
   return (
-    <AsideMenuSectionStyled className='asideMenu'>
+    <aside className='asideMenu'>
       {title.length > 0 && <div className='title sans-serif --big'>{title}</div>}
       <ul className='list'>
         {items.map((item, index) => (
@@ -21,6 +21,6 @@ export const AsideMenuSection: React.FC<AsideMenuSectionProps> = ({ items, title
           </li>
         ))}
       </ul>
-    </AsideMenuSectionStyled>
+    </aside>
   )
 }

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BenefitRatafiaCardList } from '../../molecules';
-import { BenefitsRatafiaSectionStyled } from './BenefitsRatafiaSection.styled';
+// import './BenefitsRatafiaSection.scss'
 const BenefitsRatafiaSection = ({ title, description, benefits }) => {
-    return (_jsx(BenefitsRatafiaSectionStyled, { className: 'benefit-ratafia-section', children: _jsxs("div", { className: 'benefit-ratafia-section__wrapper background-ratafia-animation', children: [_jsxs("div", { className: 'benefit-ratafia-section__wrapper__title', children: [_jsx("h2", { className: 'sans-serif --super-large --bold-weight benefit-ratafia-section__wrapper__title__text', children: title }), _jsx("p", { className: 'sans-serif --super-medium benefit-ratafia-section__wrapper__title__description', children: description })] }), _jsx(BenefitRatafiaCardList, { benefits: benefits })] }) }));
+    return (_jsx("section", { className: 'benefit-ratafia-section', children: _jsxs("div", { className: 'benefit-ratafia-section__wrapper background-ratafia-animation', children: [_jsxs("div", { className: 'benefit-ratafia-section__wrapper__title', children: [_jsx("h2", { className: 'sans-serif --super-large --bold-weight benefit-ratafia-section__wrapper__title__text', children: title }), _jsx("p", { className: 'sans-serif --super-medium benefit-ratafia-section__wrapper__title__description', children: description })] }), _jsx(BenefitRatafiaCardList, { benefits: benefits })] }) }));
 };
 export default BenefitsRatafiaSection;

package/dist/src/components/sections/BenefitsRatafiaSection/BenefitsRatafiaSection.scss

@@ -0,0 +1,57 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.benefit-ratafia-section {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+
+  width: 100%;
+
+  padding: 2rem 1.5rem;
+
+  @include laptop {
+    padding: 3rem 2rem;
+  }
+  @include desktop-xl {
+    padding: 3rem 0;
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+
+    padding: 1.5rem;
+    gap: 2rem;
+
+    border-radius: 16px;
+
+    max-width: 1200px;
+
+    @include landscape-tablets {
+      padding: 2rem;
+    }
+    @include laptop {
+      padding: 3rem;
+    }
+
+    &__title {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      align-self: stretch;
+      gap: 1rem;
+
+      &__text {
+        color: var(--others-white);
+      }
+      &__description {
+        color: var(--others-white);
+      }
+    }
+  }
+}

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

@@ -2,11 +2,11 @@ import React, { type FC } from 'react'
 
 import { BenefitRatafiaCardList } from '../../molecules'
 import { type BenefitsRatafiaSectionProps } from './BenefitsRatafiaSectionProps.types'
-import { BenefitsRatafiaSectionStyled } from './BenefitsRatafiaSection.styled'
+// import './BenefitsRatafiaSection.scss'
 
 const BenefitsRatafiaSection: FC<BenefitsRatafiaSectionProps> = ({ title, description, benefits }) => {
   return (
-    <BenefitsRatafiaSectionStyled className='benefit-ratafia-section'>
+    <section className='benefit-ratafia-section'>
       <div className='benefit-ratafia-section__wrapper background-ratafia-animation'>
         <div className='benefit-ratafia-section__wrapper__title'>
           <h2 className='sans-serif --super-large --bold-weight benefit-ratafia-section__wrapper__title__text'>
@@ -18,7 +18,7 @@ const BenefitsRatafiaSection: FC<BenefitsRatafiaSectionProps> = ({ title, descri
         </div>
         <BenefitRatafiaCardList benefits={benefits} />
       </div>
-    </BenefitsRatafiaSectionStyled>
+    </section>
   )
 }
 

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

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArticlesList } from '../../organisms';
-import { BlogSectionStyled } from './BlogSection.styled';
 import { Button } from '../../atoms';
 // import './BlogSection.scss'
 const BlogSection = ({ blogTitle, blogCta, articles }) => {
     if (articles.articles?.length === 0)
         return null;
-    return (_jsxs(BlogSectionStyled, { className: 'blog', children: [_jsx("h2", { className: 'serif --super-large blog__title', children: blogTitle }), _jsx(ArticlesList, { articles: articles.articles }), _jsx(Button, { dataQa: '', color: 'secondary', label: blogCta, givenClass: 'cta-button', link: '/articles' })] }));
+    return (_jsxs("div", { className: 'blog', children: [_jsx("h2", { className: 'serif --super-large blog__title', children: blogTitle }), _jsx(ArticlesList, { articles: articles.articles }), _jsx(Button, { dataQa: '', color: 'secondary', label: blogCta, givenClass: 'cta-button', link: '/articles' })] }));
 };
 export default BlogSection;

package/dist/src/components/sections/BlogSection/BlogSection.scss

@@ -0,0 +1,33 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.blog {
+  text-align: center;
+  margin: 0 auto 3rem;
+  padding: 0 1rem;
+  max-width: $md;
+
+  @include laptop {
+    padding: 0;
+  }
+  @include desktop {
+    max-width: $lg;
+  }
+
+  .blog__title {
+    color: var(--primary-main-dark-1);
+
+    @include laptop {
+      margin-bottom: 3rem;
+    }
+  }
+
+  .cta-button {
+    width: 100%;
+    margin-top: 3rem;
+    display: inline-block;
+    @include landscape-tablets {
+      width: auto;
+    }
+  }
+}

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

@@ -3,7 +3,6 @@ import React, { type FC } from 'react'
 
 import { ArticlesList } from '../../organisms'
 import { type BlogSectionProps } from './BlogSectionProps.types'
-import { BlogSectionStyled } from './BlogSection.styled'
 import { Button } from '../../atoms'
 // import './BlogSection.scss'
 
@@ -11,11 +10,11 @@ const BlogSection: FC<BlogSectionProps> = ({ blogTitle, blogCta, articles }) =>
   if (articles.articles?.length === 0) return null
 
   return (
-    <BlogSectionStyled className={'blog'}>
+    <div className={'blog'}>
       <h2 className={'serif --super-large blog__title'}>{blogTitle}</h2>
       <ArticlesList articles={articles.articles} />
       <Button dataQa='' color='secondary' label={blogCta} givenClass='cta-button' link={'/articles'} />
-    </BlogSectionStyled>
+    </div>
   )
 }
 

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BoxForm } from '../../molecules';
 import { ContactJumbotron } from '../../organisms';
-import { ContactSectionStyled } from './ContactSection.styled';
+// import './ContactSection.scss'
 export const ContactSection = ({ contactJumbotronProps, contactForm }) => {
-    return (_jsx(ContactSectionStyled, { className: 'contact-container', children: _jsx("div", { className: 'wrapper wrapper--responsive wrapper--contact', children: _jsxs("div", { className: 'contact__main', children: [_jsx("div", { className: 'contact-left-container', children: _jsx(ContactJumbotron, { ...contactJumbotronProps }) }), _jsx("div", { className: 'contact-right-container', children: _jsx("div", { className: 'contact__form', children: _jsx(BoxForm, { ...contactForm }) }) })] }) }) }));
+    return (_jsx("section", { className: 'contact-container', children: _jsx("div", { className: 'wrapper wrapper--responsive wrapper--contact', children: _jsxs("div", { className: 'contact__main', children: [_jsx("div", { className: 'contact-left-container', children: _jsx(ContactJumbotron, { ...contactJumbotronProps }) }), _jsx("div", { className: 'contact-right-container', children: _jsx("div", { className: 'contact__form', children: _jsx(BoxForm, { ...contactForm }) }) })] }) }) }));
 };

package/dist/src/components/sections/ContactSection/{ContactSection.styled.ts → ContactSection.scss}

@@ -1,7 +1,7 @@
-import { device } from '../../../globalStyles/breakpoints'
-import styled from 'styled-components'
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
 
-export const ContactSectionStyled = styled.section`
+.contact-container {
   background-color: var(--primary-main-light-6);
 
   span > a {
@@ -12,7 +12,7 @@ export const ContactSectionStyled = styled.section`
     padding-left: 0;
     padding-right: 0;
 
-    @media ${device['portrait-tablets']} {
+    @include portrait-tablets {
       padding-left: 1.5rem;
       padding-right: 1.5rem;
     }
@@ -22,7 +22,7 @@ export const ContactSectionStyled = styled.section`
     display: flex;
     flex-direction: column-reverse;
 
-    @media ${device['portrait-tablets']} {
+    @include portrait-tablets {
       flex-direction: row;
       justify-content: space-between;
     }
@@ -32,7 +32,7 @@ export const ContactSectionStyled = styled.section`
     padding-left: 1.5rem;
     padding-right: 1.5rem;
 
-    @media ${device['portrait-tablets']} {
+    @include portrait-tablets {
       padding-left: 0;
       padding-right: 0;
       width: 45%;
@@ -46,7 +46,7 @@ export const ContactSectionStyled = styled.section`
     margin-bottom: 2.5rem;
     width: 100%;
 
-    @media ${device['portrait-tablets']} {
+    @include portrait-tablets {
       background-size: 21rem;
       background-repeat: no-repeat;
       background-position: 100% 100%;
@@ -55,7 +55,7 @@ export const ContactSectionStyled = styled.section`
       width: 45%;
     }
 
-    @media ${device.laptop} {
+    @include laptop {
       padding-bottom: 12rem;
     }
 
@@ -87,4 +87,4 @@ export const ContactSectionStyled = styled.section`
       }
     }
   }
-`
+}