@npm_leadtech/legal-lib-components 5.3.21 → 5.4.1

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 } from '../../organisms';
-import { AsSeeInSectionStyled } from './AsSeeInSection.styled';
+import { AsSeeInContent, ContactContent } from '../../organisms';
+// 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 })] }), Array.isArray(contactSectionBlocks) && contactSectionBlocks.length > 0 && (_jsxs("div", { className: 'contact-us-section', children: [_jsx("h2", { className: 'contact-us-section__title', children: contactSectionTitle }), _jsx("p", { className: 'contact-us-section__text', children: contactSectionText }), Array.isArray(contactSectionBlocks) && (_jsx("div", { className: 'contact-us-section-blocks', children: contactSectionBlocks.map((item, index) => (_jsxs("div", { className: 'contact-us-section-blocks__item', children: [_jsx("div", { className: 'contact-us-section-blocks__item__image', children: item.image }), _jsx("div", { className: 'contact-us-section-blocks__item__title', children: item.title }), _jsx("p", { className: 'contact-us-section-blocks__item__text', children: item.body })] }, index))) }))] }))] }));
+    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

@@ -0,0 +1,37 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.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;
+  }
+
+  .as-seen-in-section {
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+    background: get-color(others, white);
+    transform: translateY(-5rem);
+    padding: 1.5rem 0;
+
+    @include laptop {
+      transform: translateY(-50%);
+    }
+
+    &__title {
+      color: var(--neutral-neutral-2);
+      text-align: center;
+      font-size: 32px;
+      font-family: var(--font-serif);
+      font-style: normal;
+      font-weight: 400;
+      line-height: 42px;
+      letter-spacing: -0.3px;
+      margin: 1rem 0;
+    }
+  }
+}

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

@@ -1,8 +1,8 @@
 import React, { type FC } from 'react'
 
-import { AsSeeInContent } from '../../organisms'
+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,29 +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>
-      {Array.isArray(contactSectionBlocks) && contactSectionBlocks.length > 0 && (
-        <div className='contact-us-section'>
-          <h2 className='contact-us-section__title'>{contactSectionTitle}</h2>
-          <p className='contact-us-section__text'>{contactSectionText}</p>
-          {Array.isArray(contactSectionBlocks) && (
-            <div className='contact-us-section-blocks'>
-              {contactSectionBlocks.map((item, index) => (
-                <div className='contact-us-section-blocks__item' key={index}>
-                  <div className='contact-us-section-blocks__item__image'>{item.image}</div>
-                  <div className='contact-us-section-blocks__item__title'>{item.title}</div>
-                  <p className='contact-us-section-blocks__item__text'>{item.body}</p>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
-    </AsSeeInSectionStyled>
+      <ContactContent title={contactSectionTitle} text={contactSectionText} contactCards={contactSectionBlocks} />
+    </section>
   )
 }
 

package/dist/src/components/sections/AsSeeInSection/AsSeeInSectionProps.types.d.ts

@@ -1,12 +1,9 @@
-import { type AsSeeInContentProps } from '../../organisms/AsSeeInContent';
+import { type AsSeeInContentProps } from '../../organisms';
+import { ContactCardProps } from '../../atoms';
 export interface AsSeeInSectionProps {
     title: string;
     contentAsSeeIn: AsSeeInContentProps;
     contactSectionTitle: string;
     contactSectionText: string;
-    contactSectionBlocks?: {
-        image: React.ReactNode;
-        title: string;
-        body: string;
-    }[];
+    contactSectionBlocks?: ContactCardProps[];
 }

package/dist/src/components/sections/AsSeeInSection/AsSeeInSectionProps.types.ts

@@ -1,13 +1,10 @@
-import { type AsSeeInContentProps } from '../../organisms/AsSeeInContent'
+import { type AsSeeInContentProps } from '../../organisms'
+import { ContactCardProps } from '../../atoms'
 
 export interface AsSeeInSectionProps {
   title: string
   contentAsSeeIn: AsSeeInContentProps
   contactSectionTitle: string
   contactSectionText: string
-  contactSectionBlocks?: {
-    image: React.ReactNode
-    title: string
-    body: string
-  }[]
+  contactSectionBlocks?: ContactCardProps[]
 }

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

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

@@ -3,11 +3,11 @@ import React, { type FC } from 'react'
 import { BoxForm } from '../../molecules'
 import { ContactJumbotron } from '../../organisms'
 import { type ContactSectionProps } from './ContactSectionProps'
-import { ContactSectionStyled } from './ContactSection.styled'
+// import './ContactSection.scss'
 
 export const ContactSection: FC<ContactSectionProps> = ({ contactJumbotronProps, contactForm }) => {
   return (
-    <ContactSectionStyled className='contact-container'>
+    <section className='contact-container'>
       <div className='wrapper wrapper--responsive wrapper--contact'>
         <div className='contact__main'>
           <div className='contact-left-container'>
@@ -20,6 +20,6 @@ export const ContactSection: FC<ContactSectionProps> = ({ contactJumbotronProps,
           </div>
         </div>
       </div>
-    </ContactSectionStyled>
+    </section>
   )
 }

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ExpertCardList } from '../../molecules';
-import { ExpertsSectionStyled } from './ExpertsSection.styled';
+// import './ExpertsSection.scss'
 const ExpertsSection = ({ title, contentExpertCardList }) => {
     if (contentExpertCardList.contentExpertCard.length === 0) {
         return null;
     }
-    return (_jsxs(ExpertsSectionStyled, { className: 'experts-section', children: [_jsx("h2", { className: 'experts-section__title', children: title }), _jsx(ExpertCardList, { contentExpertCard: contentExpertCardList.contentExpertCard })] }));
+    return (_jsxs("div", { className: 'experts-section', children: [_jsx("h2", { className: 'experts-section__title', children: title }), _jsx(ExpertCardList, { contentExpertCard: contentExpertCardList.contentExpertCard })] }));
 };
 export default ExpertsSection;

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

@@ -0,0 +1,26 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.experts-section {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  background-color: var(--neutral-neutral-6);
+  margin-bottom: 4rem;
+
+  &__title {
+    font-family: var(--font-serif);
+    font-size: 32px;
+    font-weight: 400;
+    line-height: 42px;
+    letter-spacing: -0.3px;
+    text-align: center;
+    margin: 0 auto 5rem;
+    width: 90%;
+    transform: translateY(50px);
+
+    @include landscape-tablets {
+      width: 100%;
+    }
+  }
+}

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

@@ -2,7 +2,7 @@ import React, { type FC } from 'react'
 
 import { ExpertCardList } from '../../molecules'
 import { type ExpertsSectionProps } from './ExpertsSectionProps.types'
-import { ExpertsSectionStyled } from './ExpertsSection.styled'
+// import './ExpertsSection.scss'
 
 const ExpertsSection: FC<ExpertsSectionProps> = ({ title, contentExpertCardList }) => {
   if (contentExpertCardList.contentExpertCard.length === 0) {
@@ -10,10 +10,10 @@ const ExpertsSection: FC<ExpertsSectionProps> = ({ title, contentExpertCardList
   }
 
   return (
-    <ExpertsSectionStyled className='experts-section'>
+    <div className='experts-section'>
       <h2 className='experts-section__title'>{title}</h2>
       <ExpertCardList contentExpertCard={contentExpertCardList.contentExpertCard} />
-    </ExpertsSectionStyled>
+    </div>
   )
 }
 

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { FaqGroup } from '../../organisms';
-import { FaqSectionStyled } from './FaqSection.styled';
+// import './FaqSection.scss'
 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("section", { 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.scss

@@ -0,0 +1,31 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.faqSection {
+  display: flex;
+  padding-bottom: 40px;
+  flex-direction: column;
+  gap: 40px;
+  max-width: 700px;
+  width: 100%;
+}
+
+.faq-ratafia-section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 3rem 1.5rem 5rem 1.5rem;
+  max-width: none;
+  background: var(--neutral-neutral-6);
+
+  @include laptop {
+    padding: 3rem 2rem 5rem 2rem;
+  }
+  @include desktop {
+    padding: 3rem 13.75rem 5rem 13.75rem;
+  }
+  @include desktop-xl {
+    padding: 3rem 28rem 5rem 28rem;
+  }
+}

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

@@ -3,16 +3,16 @@ import classNames from 'classnames'
 
 import { FaqGroup } from '../../organisms'
 import { type FaqSectionProps } from './FaqSectionProps'
-import { FaqSectionStyled } from './FaqSection.styled'
+// import './FaqSection.scss'
 
 export const FaqSection: React.FC<FaqSectionProps> = ({ groups, givenClass }) => {
   const classnames = classNames(`faqSection ${givenClass ?? ''}`)
 
   return (
-    <FaqSectionStyled className={classnames} itemScope itemType='https://www.schema.org/FAQPage'>
+    <section className={classnames} itemScope itemType='https://www.schema.org/FAQPage'>
       {groups.map((group) => (
         <FaqGroup key={group.id} {...group} />
       ))}
-    </FaqSectionStyled>
+    </section>
   )
 }

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FeaturesRatafiaContent } from '../../organisms';
-import { FeaturesRatafiaSectionStyled } from './FeaturesRatafiaSection.styled';
+// import './FeaturesRatafiaSection.scss'
 const FeaturesRatafiaSection = ({ content, children }) => {
-    return (_jsx(FeaturesRatafiaSectionStyled, { className: 'features-ratafia-section', children: _jsxs("div", { className: 'features-ratafia-section__wrapper', children: [_jsx("div", { className: 'features-ratafia-section__wrapper__content', children: _jsx(FeaturesRatafiaContent, { title: content.title, description: content.description, notReleasedText: content.notReleasedText, features: content.features }) }), _jsx("span", { className: 'features-ratafia-section__wrapper__children', children: children })] }) }));
+    return (_jsx("section", { className: 'features-ratafia-section', children: _jsxs("div", { className: 'features-ratafia-section__wrapper', children: [_jsx("div", { className: 'features-ratafia-section__wrapper__content', children: _jsx(FeaturesRatafiaContent, { title: content.title, description: content.description, notReleasedText: content.notReleasedText, features: content.features }) }), _jsx("span", { className: 'features-ratafia-section__wrapper__children', children: children })] }) }));
 };
 export default FeaturesRatafiaSection;