@npm_leadtech/legal-lib-components 5.7.1 → 5.7.2

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

@@ -0,0 +1,89 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const ContactSectionStyled = styled.section `
+  background-color: var(--primary-main-light-6);
+
+  span > a {
+    text-decoration: underline;
+  }
+
+  .wrapper--contact {
+    padding-left: 0;
+    padding-right: 0;
+
+    @media ${device['portrait-tablets']} {
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+    }
+  }
+
+  .contact__main {
+    display: flex;
+    flex-direction: column-reverse;
+
+    @media ${device['portrait-tablets']} {
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  }
+
+  .contact-left-container {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+
+    @media ${device['portrait-tablets']} {
+      padding-left: 0;
+      padding-right: 0;
+      width: 45%;
+    }
+  }
+
+  .contact-right-container {
+    display: flex;
+    justify-content: flex-start;
+    background-color: var(--primary-main-light-6);
+    margin-bottom: 2.5rem;
+    width: 100%;
+
+    @media ${device['portrait-tablets']} {
+      background-size: 21rem;
+      background-repeat: no-repeat;
+      background-position: 100% 100%;
+      margin-bottom: 0;
+      padding-bottom: 0;
+      width: 45%;
+    }
+
+    @media ${device.laptop} {
+      padding-bottom: 12rem;
+    }
+
+    .rec-text-container .rectangle-text__container {
+      margin-top: 1rem;
+      width: 100%;
+      background-color: gray;
+    }
+
+    .contact__form {
+      width: 100%;
+    }
+
+    .small-container {
+      margin: 1.5rem 0;
+
+      small {
+        text-align: center;
+      }
+    }
+
+    .sign-in-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      p {
+        margin-bottom: 0;
+      }
+    }
+  }
+`;

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

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

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 './ContactSection.scss'
+import { ContactSectionStyled } from './ContactSection.styled'
 
 export const ContactSection: FC<ContactSectionProps> = ({ contactJumbotronProps, contactForm }) => {
   return (
-    <section className='contact-container'>
+    <ContactSectionStyled 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>
-    </section>
+    </ContactSectionStyled>
   )
 }

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 './ExpertsSection.scss'
+import { ExpertsSectionStyled } from './ExpertsSection.styled';
 const ExpertsSection = ({ title, contentExpertCardList }) => {
     if (contentExpertCardList.contentExpertCard.length === 0) {
         return null;
     }
-    return (_jsxs("div", { className: 'experts-section', children: [_jsx("h2", { className: 'experts-section__title', children: title }), _jsx(ExpertCardList, { contentExpertCard: contentExpertCardList.contentExpertCard })] }));
+    return (_jsxs(ExpertsSectionStyled, { 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

@@ -15,7 +15,6 @@
     line-height: 42px;
     letter-spacing: -0.3px;
     text-align: center;
-    margin: 0 auto 5rem;
     width: 90%;
     transform: translateY(50px);
 

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

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

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

@@ -0,0 +1,27 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const ExpertsSectionStyled = styled.div `
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  background-color: var(--neutral-neutral-6);
+  margin-bottom: 4rem;
+
+  .experts-section {
+    &__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);
+
+      @media ${device['landscape-tablets']} {
+        width: 100%;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,28 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const ExpertsSectionStyled = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  background-color: var(--neutral-neutral-6);
+  margin-bottom: 4rem;
+
+  .experts-section {
+    &__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);
+
+      @media ${device['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 './ExpertsSection.scss'
+import { ExpertsSectionStyled } from './ExpertsSection.styled'
 
 const ExpertsSection: FC<ExpertsSectionProps> = ({ title, contentExpertCardList }) => {
   if (contentExpertCardList.contentExpertCard.length === 0) {
@@ -10,10 +10,10 @@ const ExpertsSection: FC<ExpertsSectionProps> = ({ title, contentExpertCardList
   }
 
   return (
-    <div className='experts-section'>
+    <ExpertsSectionStyled className='experts-section'>
       <h2 className='experts-section__title'>{title}</h2>
       <ExpertCardList contentExpertCard={contentExpertCardList.contentExpertCard} />
-    </div>
+    </ExpertsSectionStyled>
   )
 }
 

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 './FaqSection.scss'
+import { FaqSectionStyled } from './FaqSection.styled';
 export const FaqSection = ({ groups, givenClass }) => {
     const classnames = classNames(`faqSection ${givenClass ?? ''}`);
-    return (_jsx("section", { className: classnames, itemScope: true, itemType: 'https://www.schema.org/FAQPage', children: groups.map((group) => (_jsx(FaqGroup, { ...group }, group.id))) }));
+    return (_jsx(FaqSectionStyled, { className: classnames, itemScope: true, itemType: 'https://www.schema.org/FAQPage', children: groups.map((group) => (_jsx(FaqGroup, { ...group }, group.id))) }));
 };

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

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

@@ -0,0 +1,29 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const FaqSectionStyled = styled.section `
+  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);
+
+    @media ${device.laptop} {
+      padding: 3rem 2rem 5rem 2rem;
+    }
+    @media ${device.desktop} {
+      padding: 3rem 13.75rem 5rem 13.75rem;
+    }
+    @media ${device['desktop-xl']} {
+      padding: 3rem 28rem 5rem 28rem;
+    }
+  }
+`;

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

@@ -0,0 +1,30 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const FaqSectionStyled = styled.section`
+  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);
+
+    @media ${device.laptop} {
+      padding: 3rem 2rem 5rem 2rem;
+    }
+    @media ${device.desktop} {
+      padding: 3rem 13.75rem 5rem 13.75rem;
+    }
+    @media ${device['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 './FaqSection.scss'
+import { FaqSectionStyled } from './FaqSection.styled'
 
 export const FaqSection: React.FC<FaqSectionProps> = ({ groups, givenClass }) => {
   const classnames = classNames(`faqSection ${givenClass ?? ''}`)
 
   return (
-    <section className={classnames} itemScope itemType='https://www.schema.org/FAQPage'>
+    <FaqSectionStyled className={classnames} itemScope itemType='https://www.schema.org/FAQPage'>
       {groups.map((group) => (
         <FaqGroup key={group.id} {...group} />
       ))}
-    </section>
+    </FaqSectionStyled>
   )
 }

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 './FeaturesRatafiaSection.scss'
+import { FeaturesRatafiaSectionStyled } from './FeaturesRatafiaSection.styled';
 const FeaturesRatafiaSection = ({ content, 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 })] }) }));
+    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 })] }) }));
 };
 export default FeaturesRatafiaSection;

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

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

@@ -0,0 +1,56 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const FeaturesRatafiaSectionStyled = styled.section `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  width: 100%;
+  padding: 2rem 1.5rem;
+
+  @media ${device.laptop} {
+    padding: 3rem 2rem;
+    gap: 1.5rem;
+  }
+  @media ${device['desktop-xl']} {
+    padding: 3rem 0;
+    gap: 5rem;
+  }
+
+  .features-ratafia-section {
+    &__wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      align-self: stretch;
+
+      width: 100%;
+      max-width: 1200px;
+
+      @media ${device.laptop} {
+        gap: 1.5rem;
+      }
+      @media ${device['desktop-xl']} {
+        gap: 5rem;
+      }
+      &__content {
+        width: 100%;
+      }
+
+      &__children {
+        display: none;
+        //TODO: Check again with the real container;
+        min-width: 50%;
+
+        @media ${device.desktop} {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+        img {
+          width: 100%;
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,57 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const FeaturesRatafiaSectionStyled = styled.section`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  width: 100%;
+  padding: 2rem 1.5rem;
+
+  @media ${device.laptop} {
+    padding: 3rem 2rem;
+    gap: 1.5rem;
+  }
+  @media ${device['desktop-xl']} {
+    padding: 3rem 0;
+    gap: 5rem;
+  }
+
+  .features-ratafia-section {
+    &__wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      align-self: stretch;
+
+      width: 100%;
+      max-width: 1200px;
+
+      @media ${device.laptop} {
+        gap: 1.5rem;
+      }
+      @media ${device['desktop-xl']} {
+        gap: 5rem;
+      }
+      &__content {
+        width: 100%;
+      }
+
+      &__children {
+        display: none;
+        //TODO: Check again with the real container;
+        min-width: 50%;
+
+        @media ${device.desktop} {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+        img {
+          width: 100%;
+        }
+      }
+    }
+  }
+`

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

@@ -2,11 +2,11 @@ import React, { type FC } from 'react'
 
 import { FeaturesRatafiaContent } from '../../organisms'
 import { type FeaturesRatafiaSectionProps } from './FeaturesRatafiaSectionProps.types'
-// import './FeaturesRatafiaSection.scss'
+import { FeaturesRatafiaSectionStyled } from './FeaturesRatafiaSection.styled'
 
 const FeaturesRatafiaSection: FC<FeaturesRatafiaSectionProps> = ({ content, children }) => {
   return (
-    <section className='features-ratafia-section'>
+    <FeaturesRatafiaSectionStyled className='features-ratafia-section'>
       <div className='features-ratafia-section__wrapper'>
         <div className='features-ratafia-section__wrapper__content'>
           <FeaturesRatafiaContent
@@ -18,7 +18,7 @@ const FeaturesRatafiaSection: FC<FeaturesRatafiaSectionProps> = ({ content, chil
         </div>
         <span className='features-ratafia-section__wrapper__children'>{children}</span>
       </div>
-    </section>
+    </FeaturesRatafiaSectionStyled>
   )
 }
 

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CardFunctionality } from '../../organisms';
+import { FunctionalityCardsSectionStyled } from './FunctionalityCardsSection.styled';
 // import './FunctionalityCardsSection.scss'
 export const FunctionalityCardsSection = ({ cards = [] }) => {
     if (cards.length === 0)
         return null;
-    return (_jsx("section", { className: 'functionality-cards', children: cards.map((card) => (_jsx(CardFunctionality, { ...card }, card.id))) }));
+    return (_jsx(FunctionalityCardsSectionStyled, { className: 'functionality-cards', children: cards.map((card) => (_jsx(CardFunctionality, { ...card }, card.id))) }));
 };

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

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

@@ -0,0 +1,14 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const FunctionalityCardsSectionStyled = styled.section `
+  display: flex;
+  flex-direction: column;
+  gap: $global-gap;
+  margin-bottom: 2rem;
+  width: 100%;
+
+  @media ${device.laptop} {
+    flex-direction: row;
+    width: 50%;
+  }
+`;

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

@@ -0,0 +1,15 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const FunctionalityCardsSectionStyled = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: $global-gap;
+  margin-bottom: 2rem;
+  width: 100%;
+
+  @media ${device.laptop} {
+    flex-direction: row;
+    width: 50%;
+  }
+`

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

@@ -2,16 +2,17 @@ import React from 'react'
 
 import { CardFunctionality } from '../../organisms'
 import { type FunctionalityCardsSectionProps } from './FunctionalityCardsSectionProps'
+import { FunctionalityCardsSectionStyled } from './FunctionalityCardsSection.styled'
 // import './FunctionalityCardsSection.scss'
 
 export const FunctionalityCardsSection: React.FC<FunctionalityCardsSectionProps> = ({ cards = [] }) => {
   if (cards.length === 0) return null
 
   return (
-    <section className='functionality-cards'>
+    <FunctionalityCardsSectionStyled className='functionality-cards'>
       {cards.map((card) => (
         <CardFunctionality key={card.id} {...card} />
       ))}
-    </section>
+    </FunctionalityCardsSectionStyled>
   )
 }

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

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

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

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

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+export const GuidelinesSectionStyled = styled.section `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: var(--neutral-neutral-6);
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  margin-top: 3rem;
+`;

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

@@ -0,0 +1,11 @@
+import styled from 'styled-components'
+
+export const GuidelinesSectionStyled = styled.section`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: var(--neutral-neutral-6);
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  margin-top: 3rem;
+`

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

@@ -2,11 +2,11 @@ import React, { type FC } from 'react'
 
 import { GuidelinesContent } from '../../organisms/GuidelinesContent'
 import { type GuidelinesSectionProps } from './GuidelinesSectionProps.types'
-// import './GuidelinesSection.scss'
+import { GuidelinesSectionStyled } from './GuidelinesSection.styled'
 
 const GuidelinesSection: FC<GuidelinesSectionProps> = ({ contentGuidelines }) => {
   return (
-    <section className='guidelines-section'>
+    <GuidelinesSectionStyled className='guidelines-section'>
       <GuidelinesContent
         title={contentGuidelines.title}
         image={contentGuidelines.image}
@@ -14,7 +14,7 @@ const GuidelinesSection: FC<GuidelinesSectionProps> = ({ contentGuidelines }) =>
       >
         {contentGuidelines.children}
       </GuidelinesContent>
-    </section>
+    </GuidelinesSectionStyled>
   )
 }