@npm_leadtech/legal-lib-components 5.3.1 → 5.3.11

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

@@ -9,7 +9,6 @@ export * from './Button';
 export * from './ButtonIcon';
 export * from './CardPane';
 export * from './Checkbox';
-export * from './ContactCard';
 export * from './DatePickerCustom';
 export * from './DialogMenuIcon';
 export * from './Disclaimer';

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

@@ -9,7 +9,6 @@ export * from './Button';
 export * from './ButtonIcon';
 export * from './CardPane';
 export * from './Checkbox';
-export * from './ContactCard';
 export * from './DatePickerCustom';
 export * from './DialogMenuIcon';
 export * from './Disclaimer';

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

@@ -9,7 +9,6 @@ export * from './Button'
 export * from './ButtonIcon'
 export * from './CardPane'
 export * from './Checkbox'
-export * from './ContactCard'
 export * from './DatePickerCustom'
 export * from './DialogMenuIcon'
 export * from './Disclaimer'

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

@@ -64,7 +64,7 @@
   }
 
   &.primary {
-    background-color: get-color(neutral, neutral-6);
+    background-color: var(--neutral-neutral-6);
 
     .icon-svg-with-theme-color {
       background-color: get-color(primary, main-light-1);

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

@@ -9,7 +9,6 @@ export * from './BottomOverlay';
 export * from './BoxForm';
 export * from './Breadcrumb';
 export * from './ContactBox';
-export * from './ContactCardList';
 export * from './ContinueEditingBanner';
 export * from './CountDownMessage';
 export * from './EmailContactBox';

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

@@ -9,7 +9,6 @@ export * from './BottomOverlay';
 export * from './BoxForm';
 export * from './Breadcrumb';
 export * from './ContactBox';
-export * from './ContactCardList';
 export * from './ContinueEditingBanner';
 export * from './CountDownMessage';
 export * from './EmailContactBox';

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

@@ -9,7 +9,6 @@ export * from './BottomOverlay'
 export * from './BoxForm'
 export * from './Breadcrumb'
 export * from './ContactBox'
-export * from './ContactCardList'
 export * from './ContinueEditingBanner'
 export * from './CountDownMessage'
 export * from './EmailContactBox'

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

@@ -3,7 +3,6 @@ export * from './Accordion';
 export * from './ArticlesList';
 export * from './AsSeeInContent';
 export * from './CardFunctionality';
-export * from './ContactContent';
 export * from './ContactJumbotron';
 export * from './CookiePolicyBar';
 export * from './ErrorContentRatafia';

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

@@ -3,7 +3,6 @@ export * from './Accordion';
 export * from './ArticlesList';
 export * from './AsSeeInContent';
 export * from './CardFunctionality';
-export * from './ContactContent';
 export * from './ContactJumbotron';
 export * from './CookiePolicyBar';
 export * from './ErrorContentRatafia';

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

@@ -3,7 +3,6 @@ export * from './Accordion'
 export * from './ArticlesList'
 export * from './AsSeeInContent'
 export * from './CardFunctionality'
-export * from './ContactContent'
 export * from './ContactJumbotron'
 export * from './CookiePolicyBar'
 export * from './ErrorContentRatafia'

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 './AboutUsSection.scss'
+import { AboutUsSectionStyled } from './AboutUsSection.styled';
 const AboutUsSection = ({ title, subTitle, contentAboutUs }) => {
-    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 })] }) }));
+    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 })] }) }));
 };
 export default AboutUsSection;

package/dist/src/components/{organisms/ContactContent/ContactContent.styled.d.ts → sections/AboutUsSection/AboutUsSection.styled.d.ts}

@@ -1 +1 @@
-export declare const ContactContentStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const AboutUsSectionStyled: 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/AboutUsSection/AboutUsSection.styled.js

@@ -0,0 +1,53 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const AboutUsSectionStyled = styled.div `
+  padding-top: 1.125rem;
+  background: var(--primary-main-light-6);
+  margin-bottom: 3rem;
+
+  @media ${device.laptop} {
+    margin-bottom: 5rem;
+  }
+
+  .about-us-section {
+    &__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);
+
+      @media ${device['landscape-tablets']} {
+        font-size: 2.3rem;
+        max-width: $sm;
+        margin: 0 auto 2rem auto;
+      }
+
+      @media ${device.desktop} {
+        max-width: 792px;
+      }
+
+      @media ${device.laptop} {
+        font-size: 3rem;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,54 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const AboutUsSectionStyled = styled.div`
+  padding-top: 1.125rem;
+  background: var(--primary-main-light-6);
+  margin-bottom: 3rem;
+
+  @media ${device.laptop} {
+    margin-bottom: 5rem;
+  }
+
+  .about-us-section {
+    &__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);
+
+      @media ${device['landscape-tablets']} {
+        font-size: 2.3rem;
+        max-width: $sm;
+        margin: 0 auto 2rem auto;
+      }
+
+      @media ${device.desktop} {
+        max-width: 792px;
+      }
+
+      @media ${device.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 './AboutUsSection.scss'
+import { AboutUsSectionStyled } from './AboutUsSection.styled'
 
 const AboutUsSection: FC<AboutUsSectionProps> = ({ title, subTitle, contentAboutUs }) => {
   return (
-    <div className='about-us-section'>
+    <AboutUsSectionStyled 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>
-    </div>
+    </AboutUsSectionStyled>
   )
 }
 

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 './AsSeeInSection.scss'
+import { AsSeeInContent } from '../../organisms';
+import { AsSeeInSectionStyled } from './AsSeeInSection.styled';
 const AsSeeInSection = ({ title, contentAsSeeIn, contactSectionTitle, contactSectionText, contactSectionBlocks }) => {
     if (contentAsSeeIn.trustWorthyImages.images.length === 0) {
         return null;
     }
-    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 })] }));
+    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))) }))] }))] }));
 };
 export default AsSeeInSection;

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

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

@@ -0,0 +1,98 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const AsSeeInSectionStyled = styled.section `
+  flex-shrink: 0;
+  background-color: get-color(secondary, main-light-5);
+  @media ${device.laptop} {
+    margin-top: 12rem;
+  }
+
+  .as-seen-in-section-box {
+    .as-seen-in-section {
+      display: flex;
+      flex-direction: column;
+      box-shadow: 0px 2px 6px 0px rgba(2, 55, 74, 0.25);
+      background: get-color(others, white);
+      transform: translateY(-5rem);
+      padding: 1.5rem 0;
+
+      @media ${device.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;
+      }
+    }
+  }
+
+  .contact-us-section {
+    display: flex;
+    flex-direction: column;
+    transform: translateY(-5rem);
+    color: var(--neutral-neutral-1);
+    margin-top: 1rem;
+
+    &__title {
+      text-align: center;
+      font-size: 32px;
+      font-family: $font-serif;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 42px;
+      letter-spacing: -0.3px;
+      margin: 1rem 0;
+    }
+
+    &__text {
+      text-align: center;
+      font-style: normal;
+      font-weight: 400;
+      margin: 0 0 2rem 0;
+    }
+
+    &-blocks {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      gap: 1rem;
+
+      @media ${device.laptop} {
+        flex-direction: row;
+        gap: 2.5rem;
+      }
+
+      &__item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-color: white;
+        box-shadow: 0px 2px 6px 0px rgba(2, 55, 74, 0.25);
+        border-radius: 0.25rem;
+        min-width: 200px;
+        padding: 1rem;
+
+        &__image {
+          width: 2rem;
+        }
+
+        &__title {
+          margin-top: 1rem;
+          line-height: 1rem;
+        }
+
+        &__text {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,99 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const AsSeeInSectionStyled = styled.section`
+  flex-shrink: 0;
+  background-color: get-color(secondary, main-light-5);
+  @media ${device.laptop} {
+    margin-top: 12rem;
+  }
+
+  .as-seen-in-section-box {
+    .as-seen-in-section {
+      display: flex;
+      flex-direction: column;
+      box-shadow: 0px 2px 6px 0px rgba(2, 55, 74, 0.25);
+      background: get-color(others, white);
+      transform: translateY(-5rem);
+      padding: 1.5rem 0;
+
+      @media ${device.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;
+      }
+    }
+  }
+
+  .contact-us-section {
+    display: flex;
+    flex-direction: column;
+    transform: translateY(-5rem);
+    color: var(--neutral-neutral-1);
+    margin-top: 1rem;
+
+    &__title {
+      text-align: center;
+      font-size: 32px;
+      font-family: $font-serif;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 42px;
+      letter-spacing: -0.3px;
+      margin: 1rem 0;
+    }
+
+    &__text {
+      text-align: center;
+      font-style: normal;
+      font-weight: 400;
+      margin: 0 0 2rem 0;
+    }
+
+    &-blocks {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      gap: 1rem;
+
+      @media ${device.laptop} {
+        flex-direction: row;
+        gap: 2.5rem;
+      }
+
+      &__item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-color: white;
+        box-shadow: 0px 2px 6px 0px rgba(2, 55, 74, 0.25);
+        border-radius: 0.25rem;
+        min-width: 200px;
+        padding: 1rem;
+
+        &__image {
+          width: 2rem;
+        }
+
+        &__title {
+          margin-top: 1rem;
+          line-height: 1rem;
+        }
+
+        &__text {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+`

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

@@ -1,8 +1,8 @@
 import React, { type FC } from 'react'
 
-import { AsSeeInContent, ContactContent } from '../../organisms'
+import { AsSeeInContent } from '../../organisms'
 import { type AsSeeInSectionProps } from './AsSeeInSectionProps.types'
-// import './AsSeeInSection.scss'
+import { AsSeeInSectionStyled } from './AsSeeInSection.styled'
 
 const AsSeeInSection: FC<AsSeeInSectionProps> = ({
   title,
@@ -16,13 +16,29 @@ const AsSeeInSection: FC<AsSeeInSectionProps> = ({
   }
 
   return (
-    <section className='as-seen-in-section-box'>
+    <AsSeeInSectionStyled 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} />
-    </section>
+      {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>
   )
 }
 

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// import './AsideMenuSection.scss'
+import { AsideMenuSectionStyled } from './AsideMenuSection.styled';
 export const AsideMenuSection = ({ items, title = '', onClickHandler }) => {
-    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))) })] }));
+    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))) })] }));
 };

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

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

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+export const AsideMenuSectionStyled = styled.aside `
+  &.asideMenu {
+    .title {
+      color: var(--neutral-neutral-1);
+      font-weight: bold;
+      padding-bottom: 1rem;
+      border-bottom: var(--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: var(--neutral-neutral-4) 1px solid;
+      border-bottom: var(--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.styled.ts

@@ -0,0 +1,52 @@
+import styled from 'styled-components'
+
+export const AsideMenuSectionStyled = styled.aside`
+  &.asideMenu {
+    .title {
+      color: var(--neutral-neutral-1);
+      font-weight: bold;
+      padding-bottom: 1rem;
+      border-bottom: var(--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: var(--neutral-neutral-4) 1px solid;
+      border-bottom: var(--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;
+      }
+    }
+  }
+`