@npm_leadtech/legal-lib-components 5.3.13 → 5.3.14

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

@@ -0,0 +1,42 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.people-say {
+  width: 100%;
+  margin: 0 auto;
+  text-align: center;
+  padding: 1.5rem;
+
+  @include laptop {
+    padding: 0;
+  }
+
+  @include desktop {
+    max-width: $max-width;
+  }
+
+  &__title {
+    font-family: var(--font-serif);
+    font-size: 32px;
+    font-weight: 400;
+    line-height: 42px;
+    letter-spacing: -0.3px;
+    text-align: center;
+  }
+
+  .richt-text-strapi {
+    text-align: left;
+    margin-top: 2rem;
+
+    > p,
+    > blockquote {
+      margin-top: 1.5rem;
+    }
+
+    blockquote {
+      padding: 1rem;
+      background: var(--neutral-neutral-6);
+      border-radius: 4px;
+    }
+  }
+}

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

@@ -3,8 +3,8 @@
 import React, { type FC } from 'react'
 
 import { type PeopleSayAboutUsSectionProps } from './PeopleSayAboutUsSectionProps.types'
-import { PeopleSayAboutUsSectionStyled } from './PeopleSayAboutUsSection.styled'
 import { TrustPilot } from '../../atoms'
+// import './PeopleSayAboutUsSection.scss'
 
 const PeopleSayAboutUsSection: FC<PeopleSayAboutUsSectionProps> = ({
   title,
@@ -12,11 +12,11 @@ const PeopleSayAboutUsSection: FC<PeopleSayAboutUsSectionProps> = ({
   contentTrustPilot
 }) => {
   return (
-    <PeopleSayAboutUsSectionStyled className='people-say'>
+    <section className='people-say'>
       {Boolean(title) && <h2 className='people-say__title'>{title}</h2>}
       {testimonialsSectionContent}
       {contentTrustPilot && <TrustPilot>{contentTrustPilot.children}</TrustPilot>}
-    </PeopleSayAboutUsSectionStyled>
+    </section>
   )
 }
 

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StepsRatafiaContent } from '../../organisms';
-import { StepsRatafiaSectionStyled } from './StepsRatafiaSection.styled';
 import { Video } from '../../atoms';
+// import './StepsRatafiaSection.scss'
 const StepsRatafiaSection = ({ title, steps, videoUrl }) => {
-    return (_jsx(StepsRatafiaSectionStyled, { className: 'steps-ratafia-section', children: _jsxs("div", { className: 'steps-ratafia-section__wrapper', children: [_jsx("div", { className: 'steps-ratafia-section__wrapper__video', children: _jsx(Video, { videoSrcURL: videoUrl, autoPlay: true, loop: true }) }), _jsx("div", { className: 'steps-ratafia-section__wrapper__content', children: _jsx(StepsRatafiaContent, { title: title, steps: steps }) })] }) }));
+    return (_jsx("section", { className: 'steps-ratafia-section', children: _jsxs("div", { className: 'steps-ratafia-section__wrapper', children: [_jsx("div", { className: 'steps-ratafia-section__wrapper__video', children: _jsx(Video, { videoSrcURL: videoUrl, autoPlay: true, loop: true }) }), _jsx("div", { className: 'steps-ratafia-section__wrapper__content', children: _jsx(StepsRatafiaContent, { title: title, steps: steps }) })] }) }));
 };
 export default StepsRatafiaSection;

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

@@ -0,0 +1,53 @@
+@import '../../../globalStyles/mediaqueries.scss';
+
+.steps-ratafia-section {
+  z-index: 999;
+  width: 100%;
+
+  @include desktop {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+
+    gap: 3rem;
+    padding: 2rem 1.5rem 3rem 1.5rem;
+
+    max-width: 1200px;
+
+    @include desktop {
+      padding: 3rem 0 3rem 0;
+    }
+    @include desktop-xl {
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &__video {
+      display: flex;
+      justify-content: center;
+
+      max-width: 1024px;
+      @include desktop-xl {
+        max-width: 720px;
+      }
+      video {
+        border-radius: 8px;
+        box-shadow: 0 0.125rem 0.375rem 0 rgba(2, 55, 74, 0.25);
+        width: 100%;
+      }
+    }
+    &__content {
+      flex: 1;
+    }
+  }
+}

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

@@ -2,12 +2,13 @@ import React, { type FC } from 'react'
 
 import { StepsRatafiaContent } from '../../organisms'
 import { type StepsRatafiaSectionProps } from './StepsRatafiaSectionProps.types'
-import { StepsRatafiaSectionStyled } from './StepsRatafiaSection.styled'
 import { Video } from '../../atoms'
 
+// import './StepsRatafiaSection.scss'
+
 const StepsRatafiaSection: FC<StepsRatafiaSectionProps> = ({ title, steps, videoUrl }) => {
   return (
-    <StepsRatafiaSectionStyled className='steps-ratafia-section'>
+    <section className='steps-ratafia-section'>
       <div className='steps-ratafia-section__wrapper'>
         <div className='steps-ratafia-section__wrapper__video'>
           <Video videoSrcURL={videoUrl} autoPlay loop />
@@ -16,7 +17,7 @@ const StepsRatafiaSection: FC<StepsRatafiaSectionProps> = ({ title, steps, video
           <StepsRatafiaContent title={title} steps={steps} />
         </div>
       </div>
-    </StepsRatafiaSectionStyled>
+    </section>
   )
 }
 

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TryItRatafiaSectionStyled } from './TryItRatafiaSection.styled';
 // import './TryItRatafiaSection.scss'
 const TryItRatafiaSection = ({ icon, paragraph, children }) => {
-    return (_jsx(TryItRatafiaSectionStyled, { className: 'try-it-ratafia-section', children: _jsxs("div", { className: 'try-it-ratafia-section__wrapper background-ratafia-animation', children: [_jsxs("div", { className: 'try-it-ratafia-section__wrapper__content', children: [icon !== null && _jsx("div", { className: 'try-it-ratafia-section__wrapper__content__icon', children: icon }), _jsx("h2", { className: 'sans-serif --extra-large --bold-weight try-it-ratafia-section__wrapper__content__title', children: paragraph })] }), _jsx("span", { className: 'try-it-ratafia-section__wrapper__children', children: children })] }) }));
+    return (_jsx("section", { className: 'try-it-ratafia-section', children: _jsxs("div", { className: 'try-it-ratafia-section__wrapper background-ratafia-animation', children: [_jsxs("div", { className: 'try-it-ratafia-section__wrapper__content', children: [icon !== null && _jsx("div", { className: 'try-it-ratafia-section__wrapper__content__icon', children: icon }), _jsx("h2", { className: 'sans-serif --extra-large --bold-weight try-it-ratafia-section__wrapper__content__title', children: paragraph })] }), _jsx("span", { className: 'try-it-ratafia-section__wrapper__children', children: children })] }) }));
 };
 export default TryItRatafiaSection;

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

@@ -0,0 +1,69 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.try-it-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 7.5rem;
+  }
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+
+    padding: 1.5rem;
+    gap: 1.5rem;
+
+    border-radius: 16px;
+
+    max-width: 1200px;
+
+    @include landscape-tablets {
+      padding: 2rem;
+      gap: 2.5rem;
+      flex-direction: row;
+    }
+    @include laptop {
+      padding: 2.5rem 2.5rem 2.5rem 4rem;
+      gap: 5rem;
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      flex: 1 0 0;
+      align-self: stretch;
+
+      gap: 1rem;
+
+      @include landscape-tablets {
+        padding: 3rem 0;
+      }
+
+      &__icon {
+        width: 48px;
+        height: 48px;
+      }
+      &__title {
+        align-self: stretch;
+        color: var(--others-white);
+      }
+    }
+
+    &__children {
+      max-width: 460px;
+    }
+  }
+}

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

@@ -1,12 +1,11 @@
 import React, { type FC } from 'react'
 
 import { type TryItRatafiaSectionProps } from './TryItRatafiaSectionProps.types'
-import { TryItRatafiaSectionStyled } from './TryItRatafiaSection.styled'
 // import './TryItRatafiaSection.scss'
 
 const TryItRatafiaSection: FC<TryItRatafiaSectionProps> = ({ icon, paragraph, children }) => {
   return (
-    <TryItRatafiaSectionStyled className='try-it-ratafia-section'>
+    <section className='try-it-ratafia-section'>
       <div className='try-it-ratafia-section__wrapper background-ratafia-animation'>
         <div className='try-it-ratafia-section__wrapper__content'>
           {icon !== null && <div className={'try-it-ratafia-section__wrapper__content__icon'}>{icon}</div>}
@@ -16,7 +15,7 @@ const TryItRatafiaSection: FC<TryItRatafiaSectionProps> = ({ icon, paragraph, ch
         </div>
         <span className='try-it-ratafia-section__wrapper__children'>{children}</span>
       </div>
-    </TryItRatafiaSectionStyled>
+    </section>
   )
 }
 

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TryOurFreeLegalBlogsContent } from '../../organisms/TryOurFreeLegalBlogsContent';
-import { TryOurFreeLegalBlogsSectionStyled } from './TryOurFreeLegalBlogsSection.styled';
+// import './TryOurFreeLegalBlogsSection.scss'
 const TryOurFreeLegalBlogsSection = ({ contentTryOurFreeLegalBlogs }) => {
-    return (_jsx(TryOurFreeLegalBlogsSectionStyled, { className: 'try-our-free-legal-blogs-section wrapper wrapper--responsive', children: _jsx(TryOurFreeLegalBlogsContent, { title: contentTryOurFreeLegalBlogs.title, image: contentTryOurFreeLegalBlogs.image, children: contentTryOurFreeLegalBlogs.children }) }));
+    return (_jsx("section", { className: 'try-our-free-legal-blogs-section wrapper wrapper--responsive', children: _jsx(TryOurFreeLegalBlogsContent, { title: contentTryOurFreeLegalBlogs.title, image: contentTryOurFreeLegalBlogs.image, children: contentTryOurFreeLegalBlogs.children }) }));
 };
 export default TryOurFreeLegalBlogsSection;

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

@@ -0,0 +1,11 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.try-our-free-legal-blogs-section {
+  display: flex;
+  flex-direction: column;
+
+  @include landscape-tablets {
+    flex-flow: row nowrap;
+  }
+}

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

@@ -2,15 +2,15 @@ import React, { type FC } from 'react'
 
 import { TryOurFreeLegalBlogsContent } from '../../organisms/TryOurFreeLegalBlogsContent'
 import { type TryOurFreeLegalBlogsSectionProps } from './TryOurFreeLegalBlogsSectionProps.types'
-import { TryOurFreeLegalBlogsSectionStyled } from './TryOurFreeLegalBlogsSection.styled'
+// import './TryOurFreeLegalBlogsSection.scss'
 
 const TryOurFreeLegalBlogsSection: FC<TryOurFreeLegalBlogsSectionProps> = ({ contentTryOurFreeLegalBlogs }) => {
   return (
-    <TryOurFreeLegalBlogsSectionStyled className='try-our-free-legal-blogs-section wrapper wrapper--responsive'>
+    <section className='try-our-free-legal-blogs-section wrapper wrapper--responsive'>
       <TryOurFreeLegalBlogsContent title={contentTryOurFreeLegalBlogs.title} image={contentTryOurFreeLegalBlogs.image}>
         {contentTryOurFreeLegalBlogs.children}
       </TryOurFreeLegalBlogsContent>
-    </TryOurFreeLegalBlogsSectionStyled>
+    </section>
   )
 }
 

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../atoms';
-import { TryUsSectionStyled } from './TryUsSection.styled';
+// import './TryUsSection.scss'
 export const TryUsSection = ({ children, hasUserToken = false, cta }) => {
-    return (_jsxs(TryUsSectionStyled, { className: 'try-us-section', children: [children, !hasUserToken && _jsx(Button, { ...cta })] }));
+    return (_jsxs("section", { className: 'try-us-section', children: [children, !hasUserToken && _jsx(Button, { ...cta })] }));
 };

package/dist/src/components/sections/TryUsSection/{TryUsSection.styled.ts → TryUsSection.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 TryUsSectionStyled = styled.section`
+.try-us-section {
   padding: 2rem;
   text-align: center;
   background-color: var(--neutral-neutral-6);
@@ -17,8 +17,8 @@ export const TryUsSectionStyled = styled.section`
     margin-top: 1.5rem;
     width: 100%;
 
-    @media ${device['landscape-tablets']} {
+    @include landscape-tablets {
       width: auto;
     }
   }
-`
+}

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

@@ -2,13 +2,13 @@ import React, { type FC } from 'react'
 import { Button } from '../../atoms'
 
 import { type TryUsSectionProps } from './TryUsSectionProps'
-import { TryUsSectionStyled } from './TryUsSection.styled'
+// import './TryUsSection.scss'
 
 export const TryUsSection: FC<TryUsSectionProps> = ({ children, hasUserToken = false, cta }) => {
   return (
-    <TryUsSectionStyled className='try-us-section'>
+    <section className='try-us-section'>
       {children}
       {!hasUserToken && <Button {...cta} />}
-    </TryUsSectionStyled>
+    </section>
   )
 }

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { RichTextStrapi } from '../../atoms';
-import { UnsubscribeSectionStyled } from './UnsubscribeSection.styled';
+// import './UnsubscribeSection.scss'
 export const UnsubscribeSection = ({ text }) => {
-    return (_jsx(UnsubscribeSectionStyled, { className: 'wrapper', children: _jsx("div", { className: 'unsubscribe', children: _jsx(RichTextStrapi, { ...text }) }) }));
+    return (_jsx("section", { className: 'wrapper', children: _jsx("div", { className: 'unsubscribe', children: _jsx(RichTextStrapi, { ...text }) }) }));
 };

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

@@ -0,0 +1,62 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.unsubscribe {
+  div:first-child {
+    background: var(--neutral-neutral-6);
+    display: flex;
+    flex-flow: row wrap;
+    margin-bottom: 4rem;
+    @include landscape-tablets {
+      margin: 0 3rem 3rem 3rem;
+    }
+  }
+
+  .m-richText p + h2 {
+    margin-top: 0;
+  }
+
+  h2 {
+    color: var(--neutral-neutral-1);
+    background: var(--others-white);
+    width: 100%;
+    font-size: 1.75rem;
+    padding: 2rem 1rem 1rem 1rem;
+
+    @include landscape-tablets {
+      font-size: 2rem;
+      padding: 2.7rem 0 1rem 0;
+    }
+  }
+
+  .m-richText h2 + p {
+    padding-top: 1.5rem;
+  }
+
+  .m-richText p {
+    padding: 0 2rem 1.5rem 2rem;
+    width: 100%;
+    margin: 0;
+
+    @include laptop {
+      padding: 0 8rem 1.5rem 8rem;
+    }
+    @include desktop {
+      padding: 0 15rem 1.5rem 15rem;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    display: block;
+    margin: 0;
+  }
+
+  .image-preview {
+    margin: 0 auto;
+    padding: 0.5rem 0;
+    border: none;
+    width: auto;
+    height: auto;
+  }
+}

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

@@ -2,14 +2,14 @@ import React from 'react'
 
 import { RichTextStrapi } from '../../atoms'
 import { type UnsubscribeSectionProps } from './UnsubscribeSectionProps'
-import { UnsubscribeSectionStyled } from './UnsubscribeSection.styled'
+// import './UnsubscribeSection.scss'
 
 export const UnsubscribeSection: React.FC<UnsubscribeSectionProps> = ({ text }) => {
   return (
-    <UnsubscribeSectionStyled className='wrapper'>
+    <section className='wrapper'>
       <div className='unsubscribe'>
         <RichTextStrapi {...text} />
       </div>
-    </UnsubscribeSectionStyled>
+    </section>
   )
 }

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../atoms/Button';
 import { WhyLawDistrictItems } from '../../atoms/WhyLawDistrictItems';
-import { WhyLawDistrictSectionStyled } from './WhyLawDistrictSection.styled';
+// import './WhyLawDistrictSection.scss'
 export const WhyLawDistrictSection = ({ title, items, userActive, link }) => {
     if (items.length === 0)
         return null;
-    return (_jsxs(WhyLawDistrictSectionStyled, { className: 'whyLawDistrictSection', children: [_jsx("h2", { className: 'why-lawDistrict__title serif --hero', children: title }), _jsx(WhyLawDistrictItems, { items: items }), !userActive && (_jsx(Button, { givenClass: 'whyLawDistrictSection__button', label: link.cta, link: link.url, onClick: link.onClick, dataQa: link.dataQa, isExternal: true, hasNoFollow: true }))] }));
+    return (_jsxs("section", { className: 'whyLawDistrictSection', children: [_jsx("h2", { className: 'why-lawDistrict__title serif --hero', children: title }), _jsx(WhyLawDistrictItems, { items: items }), !userActive && (_jsx(Button, { givenClass: 'whyLawDistrictSection__button', label: link.cta, link: link.url, onClick: link.onClick, dataQa: link.dataQa, isExternal: true, hasNoFollow: true }))] }));
 };
 export default WhyLawDistrictSection;

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

@@ -0,0 +1,35 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.whyLawDistrictSection {
+  text-align: center;
+  background-color: var(--neutral-neutral-6);
+  width: 100%;
+  padding-bottom: 2rem;
+  display: flex;
+  flex-direction: column;
+
+  @include landscape-tablets {
+    padding-bottom: 0rem;
+    display: block;
+  }
+
+  &__title {
+    @include laptop {
+      padding: 0;
+    }
+  }
+
+  &__button {
+    display: flex;
+    justify-content: center;
+    width: 80%;
+    margin-bottom: 1rem;
+
+    @include landscape-tablets {
+      margin-bottom: 3.5rem;
+      display: inline-block;
+      width: auto;
+    }
+  }
+}

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

@@ -3,13 +3,14 @@ import React from 'react'
 import { Button } from '../../atoms/Button'
 import { WhyLawDistrictItems } from '../../atoms/WhyLawDistrictItems'
 import { type WhyLawDistrictSectionProps } from './WhyLawDistrictSectionProps.types'
-import { WhyLawDistrictSectionStyled } from './WhyLawDistrictSection.styled'
+
+// import './WhyLawDistrictSection.scss'
 
 export const WhyLawDistrictSection: React.FC<WhyLawDistrictSectionProps> = ({ title, items, userActive, link }) => {
   if (items.length === 0) return null
 
   return (
-    <WhyLawDistrictSectionStyled className={'whyLawDistrictSection'}>
+    <section className={'whyLawDistrictSection'}>
       <h2 className={'why-lawDistrict__title serif --hero'}>{title}</h2>
       <WhyLawDistrictItems items={items} />
 
@@ -24,7 +25,7 @@ export const WhyLawDistrictSection: React.FC<WhyLawDistrictSectionProps> = ({ ti
           hasNoFollow
         />
       )}
-    </WhyLawDistrictSectionStyled>
+    </section>
   )
 }
 

package/dist/src/custom.d.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 declare module '*.svg' {
-  const content: any
+  const content: string
   export default content
 }
 

package/dist/src/globalStyles/styles.scss

@@ -83,6 +83,31 @@
 @import '../components/organisms/StepsRatafiaContent/StepsRatafiaContent.scss';
 @import '../components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContent.scss';
 
+@import '../components/sections/AboutUsSection/AboutUsSection.scss';
+@import '../components/sections/AsideMenuSection/AsideMenuSection.scss';
+@import '../components/sections/AsSeeInSection/AsSeeInSection.scss';
+@import '../components/sections/BenefitsRatafiaSection/BenefitsRatafiaSection.scss';
+@import '../components/sections/BlogSection/BlogSection.scss';
+@import '../components/sections/ContactSection/ContactSection.scss';
+@import '../components/sections/ExpertsSection/ExpertsSection.scss';
+@import '../components/sections/FaqSection/FaqSection.scss';
+@import '../components/sections/FeaturesRatafiaSection/FeaturesRatafiaSection.scss';
+@import '../components/sections/FunctionalityCardsSection/FunctionalityCardsSection.scss';
+@import '../components/sections/GuidelinesSection/GuidelinesSection.scss';
+@import '../components/sections/HowGetYourFormsSection/HowGetYourFormsSection.scss';
+@import '../components/sections/JumbotronRatafiaSection/JumbotronRatafiaSection.scss';
+@import '../components/sections/JumbotronSimplifiedSection/JumbotronSimplifiedSection.scss';
+@import '../components/sections/LearnMoreSection/LearnMoreSection.scss';
+@import '../components/sections/LegalSection/LegalSection.scss';
+@import '../components/sections/MidBannerRatafiaSection/MidBannerRatafiaSection.scss';
+@import '../components/sections/PeopleSayAboutUsSection/PeopleSayAboutUsSection.scss';
+@import '../components/sections/StepsRatafiaSection/StepsRatafiaSection.scss';
+@import '../components/sections/TryItRatafiaSection/TryItRatafiaSection.scss';
+@import '../components/sections/TryOurFreeLegalBlogsSection/TryOurFreeLegalBlogsSection.scss';
+@import '../components/sections/TryUsSection/TryUsSection.scss';
+@import '../components/sections/UnsubscribeSection/UnsubscribeSection.scss';
+@import '../components/sections/WhyLawDistrictSection/WhyLawDistrictSection.scss';
+
 @import '../components/pages/ErrorRatafiaPage/ErrorRatafiaPage.scss';
 @import '../components/pages/FaqsPage/FaqsPage.scss';
 @import '../components/pages/KeyFactsResultRatafiaPage/KeyFactsResultRatafiaPage.scss';