@npm_leadtech/legal-lib-components 5.2.16 → 5.2.18

package/dist/css/styles.css

@@ -1283,7 +1283,6 @@ html[data-theme=lawdistrict] .e-button.--primary-3 {
 }
 .pane-wrapper:nth-child(2) {
   text-align: right;
-  padding-right: 0;
 }
 @media (min-width: 328px) and (max-width: 720px) {
   .pane-wrapper:nth-child(2) {
@@ -1292,21 +1291,9 @@ html[data-theme=lawdistrict] .e-button.--primary-3 {
 }
 .pane-wrapper:nth-child(3) {
   margin-top: 30px;
-  padding-right: 0;
-}
-.pane-wrapper:nth-child(4) {
-  margin-top: 45px;
-  text-align: right;
 }
-@media (min-width: 328px) and (max-width: 720px) {
-  .pane-wrapper:nth-child(4) {
-    text-align: left;
-    margin-top: 16px;
-  }
-}
-.pane-wrapper:nth-child(4) .pane--title {
-  font-size: 0.75rem;
-  padding: 0;
+.pane-wrapper:last-child {
+  padding-right: 0;
 }
 .pane-wrapper span {
   display: block;
@@ -1316,8 +1303,6 @@ html[data-theme=lawdistrict] .e-button.--primary-3 {
   text-indent: -0.625rem;
 }
 .pane--title {
-  border: none;
-  background: none;
   color: var(--neutral-neutral-2);
   font-size: 0.875rem;
   line-height: 1.29;
@@ -1337,9 +1322,6 @@ html[data-theme=lawdistrict] .e-button.--primary-3 {
     font-size: 0.875rem;
   }
 }
-.pane--title.pane--title--button {
-  cursor: pointer;
-}
 .pane--description {
   color: var(--neutral-main);
   font-size: 1rem;
@@ -4664,6 +4646,21 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
     margin-top: 0;
   }
 }
+.article .information .button-image-container {
+  align-items: center;
+  margin: 1rem 0 2rem 0;
+  display: flex;
+}
+.article .information .button-image-container .thinner-letter {
+  font-family: "Inter", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 22px;
+  letter-spacing: -0.3px;
+  text-align: left;
+  margin: 0;
+  padding: 0 1rem 0 0;
+}
 .base-box-group {
   display: block;
 }
@@ -6428,7 +6425,7 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
 }
 .trustworthy-websites__image {
   margin: 1.5rem;
-  max-width: 8rem;
+  max-width: 7rem;
 }
 .type-modules-list {
   display: flex;
@@ -6869,8 +6866,15 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
 }
 .guidelines-section-main {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   flex-wrap: nowrap;
+  padding: 1.5rem;
+}
+@media (min-width: 960px) {
+  .guidelines-section-main {
+    flex-direction: row;
+    padding: 0;
+  }
 }
 .guidelines-section__texts {
   flex-basis: 50%;
@@ -6927,7 +6931,7 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
   }
 }
 .guidelines-section__image.is-mobile {
-  display: flex;
+  display: none;
 }
 @media (min-width: 720px) {
   .guidelines-section__image.is-mobile {
@@ -7529,9 +7533,14 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
   flex-direction: column;
   box-shadow: 0px 2px 6px 0px rgba(2, 55, 74, 0.25);
   background: var(--others-white);
-  transform: translateY(-50%);
+  transform: translateY(-5rem);
   padding: 1.5rem 0;
 }
+@media (min-width: 960px) {
+  .as-seen-in-section-box .as-seen-in-section {
+    transform: translateY(-50%);
+  }
+}
 .as-seen-in-section-box .as-seen-in-section__title {
   text-align: center;
   font-size: 32px;
@@ -7542,6 +7551,61 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
   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;
+}
+.contact-us-section__title {
+  text-align: center;
+  font-size: 32px;
+  font-family: "Lora", serif;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 42px;
+  letter-spacing: -0.3px;
+  margin: 1rem 0;
+}
+.contact-us-section__text {
+  text-align: center;
+  font-style: normal;
+  font-weight: 400;
+  margin: 0 0 2rem 0;
+}
+.contact-us-section-blocks {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 1rem;
+}
+@media (min-width: 960px) {
+  .contact-us-section-blocks {
+    flex-direction: row;
+    gap: 2.5rem;
+  }
+}
+.contact-us-section-blocks__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;
+}
+.contact-us-section-blocks__item__image {
+  width: 2rem;
+}
+.contact-us-section-blocks__item__title {
+  margin-top: 1rem;
+  line-height: 1rem;
+}
+.contact-us-section-blocks__item__text {
+  font-size: 14px;
+}
 .benefit-ratafia-section {
   display: flex;
   justify-content: center;
@@ -7610,6 +7674,16 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
     max-width: 1200px;
   }
 }
+.blog .blog__description {
+  font-family: "Inter", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 22px;
+  letter-spacing: -0.3px;
+  text-align: left;
+  color: #6d7275;
+  margin: 1rem 0 1.5rem 0;
+}
 .blog .blog__title {
   color: var(--primary-main-dark-1);
 }
@@ -7618,6 +7692,15 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
     margin-bottom: 3rem;
   }
 }
+.blog .blog__title.category-product-title {
+  margin-bottom: 0;
+  font-family: "Inter", sans-serif;
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 32px;
+  letter-spacing: -0.3px;
+  text-align: left;
+}
 .blog .cta-button {
   width: 100%;
   margin-top: 3rem;
@@ -8193,6 +8276,12 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
   width: 100%;
   margin: 0 auto;
   text-align: center;
+  padding: 1.5rem;
+}
+@media (min-width: 960px) {
+  .people-say {
+    padding: 0;
+  }
 }
 @media (min-width: 1200px) {
   .people-say {

package/dist/images/svg/arrow-right-24px-outlined.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.70531 0.705315C8.31578 0.31578 7.68422 0.31578 7.29468 0.705316C6.9054 1.0946 6.90511 1.72568 7.29405 2.11531L12.17 7H0.999999C0.447714 7 0 7.44772 0 8C0 8.55229 0.447715 9 1 9H12.17L7.29405 13.8847C6.90511 14.2743 6.9054 14.9054 7.29468 15.2947C7.68422 15.6842 8.31578 15.6842 8.70532 15.2947L15.2929 8.70711C15.6834 8.31658 15.6834 7.68342 15.2929 7.29289L8.70531 0.705315Z" fill="#078080"/>
+</svg>

package/dist/src/components/atoms/CardPane/CardPane.scss

@@ -51,28 +51,16 @@
     }
     &:nth-child(2) {
       text-align: right;
-      padding-right: 0;
       @media (min-width: #{$xxs}) and (max-width: #{$sm}) {
         text-align: left;
       }
     }
     &:nth-child(3) {
       margin-top: 30px;
-      padding-right: 0;
     }
-    &:nth-child(4) {
-      margin-top: 45px;
-      text-align: right;
-      @media (min-width: #{$xxs}) and (max-width: #{$sm}) {
-        text-align: left;
-        margin-top: 16px;
-      }
-      .pane--title {
-        font-size: 0.75rem;
-        padding: 0;
-      }
+    &:last-child {
+      padding-right: 0;
     }
-
     span {
       display: block;
       &.marker {
@@ -82,8 +70,6 @@
     }
   }
   &--title {
-    border: none;
-    background: none;
     color: get-color(neutral, neutral-2);
     font-size: 0.875rem;
     line-height: 1.29;
@@ -96,10 +82,6 @@
     @include laptop {
       font-size: 0.875rem;
     }
-
-    &.pane--title--button {
-      cursor: pointer;
-    }
   }
   &--description {
     color: get-color(neutral);

package/dist/src/components/atoms/CardPane/CardPaneInfo.js

@@ -1,6 +1,5 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const CardPaneInfo = ({ description, subdescription, id, title, handleClick }) => {
-    const paneTitle = (_jsx(_Fragment, { children: handleClick ? (_jsx("button", { onClick: handleClick, className: 'pane--title pane--title--button', children: title })) : (_jsx("div", { className: 'pane--title', children: title })) }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CardPaneInfo = ({ description, subdescription, id, title }) => {
     if (description === 'Active' || description === 'Inactive') {
         let descriptionClass;
         if (description === 'Active') {
@@ -9,8 +8,8 @@ const CardPaneInfo = ({ description, subdescription, id, title, handleClick }) =
         else if (description === 'Inactive') {
             descriptionClass = 'pane--description--inactive';
         }
-        return (_jsxs("div", { className: 'pane-wrapper', children: [paneTitle, _jsx("div", { "data-testid": 'description-div', className: descriptionClass, children: _jsx("li", { className: 'position', children: _jsx("div", { className: 'marker', children: description }) }) })] }, id));
+        return (_jsxs("div", { className: 'pane-wrapper', children: [_jsx("div", { className: 'pane--title', children: title }), _jsx("div", { "data-testid": 'description-div', className: descriptionClass, children: _jsx("li", { className: 'position', children: _jsx("div", { className: 'marker', children: description }) }) })] }, id));
     }
-    return (_jsxs("div", { className: 'pane-wrapper', children: [paneTitle, _jsxs("div", { className: 'pane--description', children: [description, subdescription !== undefined && _jsx("span", { className: 'pane--description--subdescription', children: subdescription })] })] }, id));
+    return (_jsxs("div", { className: 'pane-wrapper', children: [_jsx("div", { className: 'pane--title', children: title }), _jsxs("div", { className: 'pane--description', children: [description, subdescription !== undefined && _jsx("span", { className: 'pane--description--subdescription', children: subdescription })] })] }, id));
 };
 export default CardPaneInfo;

package/dist/src/components/atoms/CardPane/CardPaneInfo.tsx

@@ -4,18 +4,7 @@ import React, { type FC } from 'react'
 
 import { type CardPaneInfoProps } from './CardPaneProps.types'
 
-const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id, title, handleClick }) => {
-  const paneTitle = (
-    <>
-      {handleClick ? (
-        <button onClick={handleClick} className='pane--title pane--title--button'>
-          {title}
-        </button>
-      ) : (
-        <div className='pane--title'>{title}</div>
-      )}
-    </>
-  )
+const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id, title }) => {
   if (description === 'Active' || description === 'Inactive') {
     let descriptionClass
     if (description === 'Active') {
@@ -25,7 +14,7 @@ const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id,
     }
     return (
       <div key={id} className='pane-wrapper'>
-        {paneTitle}
+        <div className='pane--title'>{title}</div>
         <div data-testid='description-div' className={descriptionClass}>
           <li className='position'>
             <div className='marker'>{description}</div>
@@ -37,7 +26,7 @@ const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id,
 
   return (
     <div key={id} className='pane-wrapper'>
-      {paneTitle}
+      <div className='pane--title'>{title}</div>
       <div className='pane--description'>
         {description}
         {subdescription !== undefined && <span className='pane--description--subdescription'>{subdescription}</span>}

package/dist/src/components/atoms/CardPane/CardPaneProps.types.d.ts

@@ -6,5 +6,4 @@ export interface CardPaneInfoProps {
     id: string;
     title: string;
     subdescription?: string;
-    handleClick?: () => void;
 }

package/dist/src/components/atoms/CardPane/CardPaneProps.types.ts

@@ -7,5 +7,4 @@ export interface CardPaneInfoProps {
   id: string
   title: string
   subdescription?: string
-  handleClick?: () => void
 }

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

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ArrowRight from '../../../../images/svg/arrow-right-24px-outlined.svg';
 import { Button } from '../../atoms';
 // import './Article.scss'
-const Article = ({ imageUrl, title, articleUrl, summary }) => {
-    return (_jsxs("div", { className: 'article', children: [_jsx("img", { src: imageUrl, className: 'image', loading: 'lazy', alt: title }), _jsxs("div", { className: 'information', children: [_jsx("a", { href: articleUrl, target: '_blank', rel: 'noreferrer', children: _jsxs("p", { className: 'title sans-serif --big', children: [title, " "] }) }), _jsx("div", { className: 'summary', children: summary }), _jsx(Button, { color: 'tertiary', label: 'Read more', dataQa: 'article-read-more', link: articleUrl, isExternal: true })] })] }));
+const Article = ({ imageUrl, title, articleUrl, summary, isCategoryProductPage }) => {
+    return (_jsxs("div", { className: 'article', children: [_jsx("img", { src: imageUrl, className: 'image', loading: 'lazy', alt: title }), _jsxs("div", { className: 'information', children: [_jsx("a", { href: articleUrl, target: '_blank', rel: 'noreferrer', children: _jsxs("p", { className: 'title sans-serif --big', children: [title, " "] }) }), _jsx("div", { className: 'summary', children: summary }), isCategoryProductPage ? (_jsxs("div", { className: 'button-image-container', children: [_jsx(Button, { givenClass: 'thinner-letter', color: 'tertiary', label: 'Read more', dataQa: 'article-read-more', link: articleUrl, isExternal: true }), _jsx("img", { className: 'article__arrow-right', src: ArrowRight, alt: '' })] })) : (_jsx(Button, { color: 'tertiary', label: 'Read more', dataQa: 'article-read-more', link: articleUrl, isExternal: true }))] })] }));
 };
 export default Article;

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

@@ -62,5 +62,22 @@
         margin-top: 0;
       }
     }
+
+    .button-image-container {
+      align-items: center;
+      margin: 1rem 0 2rem 0;
+      display: flex;
+
+      .thinner-letter {
+        font-family: $font-sans;
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 22px;
+        letter-spacing: -0.3px;
+        text-align: left;
+        margin: 0;
+        padding: 0 1rem 0 0;
+      }
+    }
   }
 }

package/dist/src/components/molecules/Article/Article.tsx

@@ -1,10 +1,11 @@
 import React, { type FC } from 'react'
 
+import ArrowRight from '../../../../images/svg/arrow-right-24px-outlined.svg'
 import { type ArticleProps } from './ArticleProps.types'
 import { Button } from '../../atoms'
 // import './Article.scss'
 
-const Article: FC<ArticleProps> = ({ imageUrl, title, articleUrl, summary }) => {
+const Article: FC<ArticleProps> = ({ imageUrl, title, articleUrl, summary, isCategoryProductPage }) => {
   return (
     <div className='article'>
       <img src={imageUrl} className='image' loading='lazy' alt={title} />
@@ -13,7 +14,21 @@ const Article: FC<ArticleProps> = ({ imageUrl, title, articleUrl, summary }) =>
           <p className='title sans-serif --big'>{title} </p>
         </a>
         <div className='summary'>{summary}</div>
-        <Button color='tertiary' label={'Read more'} dataQa='article-read-more' link={articleUrl} isExternal />
+        {isCategoryProductPage ? (
+          <div className='button-image-container'>
+            <Button
+              givenClass='thinner-letter'
+              color='tertiary'
+              label={'Read more'}
+              dataQa='article-read-more'
+              link={articleUrl}
+              isExternal
+            />
+            <img className='article__arrow-right' src={ArrowRight} alt=''></img>
+          </div>
+        ) : (
+          <Button color='tertiary' label={'Read more'} dataQa='article-read-more' link={articleUrl} isExternal />
+        )}
       </div>
     </div>
   )

package/dist/src/components/molecules/Article/ArticleProps.types.d.ts

@@ -4,4 +4,5 @@ export interface ArticleProps {
     articleUrl: string;
     summary: string;
     id: string;
+    isCategoryProductPage: boolean;
 }

package/dist/src/components/molecules/Article/ArticleProps.types.ts

@@ -4,4 +4,5 @@ export interface ArticleProps {
   articleUrl: string
   summary: string
   id: string
+  isCategoryProductPage: boolean
 }

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

@@ -9,6 +9,6 @@
 
   &__image {
     margin: 1.5rem;
-    max-width: 8rem;
+    max-width: 7rem;
   }
 }

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Article } from '../../molecules';
 // import './ArticlesList.scss'
-const ArticlesList = ({ articles = [] }) => {
+const ArticlesList = ({ articles = [], isCategoryProductPage }) => {
     if (articles?.length === 0)
         return null;
-    return (_jsx("div", { className: 'articles_wrapper', children: articles.map((article) => (_jsx(Article, { ...article }, `article_${article?.id}`))) }));
+    return (_jsx("div", { className: 'articles_wrapper', children: articles.map((article) => (_jsx(Article, { ...article, isCategoryProductPage: isCategoryProductPage }, `article_${article?.id}`))) }));
 };
 export default ArticlesList;

package/dist/src/components/organisms/ArticlesList/ArticlesList.tsx

@@ -5,13 +5,13 @@ import { Article, type ArticleProps } from '../../molecules'
 import { type ArticlesListProps } from './ArticlesListProps.types'
 // import './ArticlesList.scss'
 
-const ArticlesList: FC<ArticlesListProps> = ({ articles = [] }) => {
+const ArticlesList: FC<ArticlesListProps> = ({ articles = [], isCategoryProductPage }) => {
   if (articles?.length === 0) return null
 
   return (
     <div className='articles_wrapper'>
       {articles.map((article: ArticleProps) => (
-        <Article key={`article_${article?.id}`} {...article} />
+        <Article key={`article_${article?.id}`} {...article} isCategoryProductPage={isCategoryProductPage} />
       ))}
     </div>
   )

package/dist/src/components/organisms/ArticlesList/ArticlesListProps.types.d.ts

@@ -1,4 +1,5 @@
 import { type ArticleProps } from '../../molecules';
 export interface ArticlesListProps {
     articles: ArticleProps[];
+    isCategoryProductPage: boolean;
 }

package/dist/src/components/organisms/ArticlesList/ArticlesListProps.types.ts

@@ -2,4 +2,5 @@ import { type ArticleProps } from '../../molecules'
 
 export interface ArticlesListProps {
   articles: ArticleProps[]
+  isCategoryProductPage: boolean
 }

package/dist/src/components/organisms/GuidelinesContent/GuidelinesContent.scss

@@ -4,8 +4,14 @@
 .guidelines-section {
   &-main {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     flex-wrap: nowrap;
+    padding: 1.5rem;
+
+    @include laptop {
+      flex-direction: row;
+      padding: 0;
+    }
   }
 
   &__texts {
@@ -65,7 +71,7 @@
     }
 
     &.is-mobile {
-      display: flex;
+      display: none;
 
       @include landscape-tablets {
         display: none;

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 './AsSeeInSection.scss'
-const AsSeeInSection = ({ title, contentAsSeeIn }) => {
+const AsSeeInSection = ({ title, contentAsSeeIn, contactSectionTitle, contactSectionText, contactSectionBlocks }) => {
     if (contentAsSeeIn.trustWorthyImages.images.length === 0) {
         return null;
     }
-    return (_jsx("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 })] }) }));
+    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 })] }), 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.scss

@@ -14,9 +14,13 @@
     flex-direction: column;
     box-shadow: 0px 2px 6px 0px rgba(2, 55, 74, 0.25);
     background: get-color(others, white);
-    transform: translateY(-50%);
+    transform: translateY(-5rem);
     padding: 1.5rem 0;
 
+    @include laptop {
+      transform: translateY(-50%);
+    }
+
     &__title {
       text-align: center;
       font-size: 32px;
@@ -29,3 +33,65 @@
     }
   }
 }
+
+.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;
+
+    @include 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

@@ -4,7 +4,13 @@ import { AsSeeInContent } from '../../organisms'
 import { type AsSeeInSectionProps } from './AsSeeInSectionProps.types'
 // import './AsSeeInSection.scss'
 
-const AsSeeInSection: FC<AsSeeInSectionProps> = ({ title, contentAsSeeIn }) => {
+const AsSeeInSection: FC<AsSeeInSectionProps> = ({
+  title,
+  contentAsSeeIn,
+  contactSectionTitle,
+  contactSectionText,
+  contactSectionBlocks
+}) => {
   if (contentAsSeeIn.trustWorthyImages.images.length === 0) {
     return null
   }
@@ -15,6 +21,23 @@ const AsSeeInSection: FC<AsSeeInSectionProps> = ({ title, contentAsSeeIn }) => {
         <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>
+      )}
     </section>
   )
 }

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

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

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

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

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

@@ -2,9 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArticlesList } from '../../organisms';
 import { Button } from '../../atoms';
 // import './BlogSection.scss'
-const BlogSection = ({ blogTitle, blogCta, articles }) => {
+const BlogSection = ({ blogTitle, blogCta = null, blogDescription = null, articles }) => {
     if (articles.articles?.length === 0)
-        return null;
-    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' })] }));
+        return;
+    const categoryProductTitle = !!blogDescription;
+    return (_jsxs("div", { className: 'blog', children: [_jsx("h2", { className: `serif --super-large blog__title ${categoryProductTitle ? 'category-product-title' : ''}`, children: blogTitle }), blogDescription && _jsx("p", { className: 'blog__description', children: blogDescription }), _jsx(ArticlesList, { articles: articles.articles, isCategoryProductPage: categoryProductTitle }), blogCta && _jsx(Button, { dataQa: '', color: 'secondary', label: blogCta, givenClass: 'cta-button', link: '/articles' })] }));
 };
 export default BlogSection;

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

@@ -14,12 +14,33 @@
     max-width: $lg;
   }
 
+  .blog__description {
+    font-family: $font-sans;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: -0.3px;
+    text-align: left;
+    color: #6d7275;
+    margin: 1rem 0 1.5rem 0;
+  }
+
   .blog__title {
     color: get-color(primary, main-dark-1);
 
     @include laptop {
       margin-bottom: 3rem;
     }
+
+    &.category-product-title {
+      margin-bottom: 0;
+      font-family: $font-sans;
+      font-size: 28px;
+      font-weight: 700;
+      line-height: 32px;
+      letter-spacing: -0.3px;
+      text-align: left;
+    }
   }
 
   .cta-button {

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

@@ -6,14 +6,18 @@ import { type BlogSectionProps } from './BlogSectionProps.types'
 import { Button } from '../../atoms'
 // import './BlogSection.scss'
 
-const BlogSection: FC<BlogSectionProps> = ({ blogTitle, blogCta, articles }) => {
-  if (articles.articles?.length === 0) return null
+const BlogSection: FC<BlogSectionProps> = ({ blogTitle, blogCta = null, blogDescription = null, articles }) => {
+  if (articles.articles?.length === 0) return
+  const categoryProductTitle = !!blogDescription
 
   return (
     <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'} />
+      <h2 className={`serif --super-large blog__title ${categoryProductTitle ? 'category-product-title' : ''}`}>
+        {blogTitle}
+      </h2>
+      {blogDescription && <p className='blog__description'>{blogDescription}</p>}
+      <ArticlesList articles={articles.articles} isCategoryProductPage={categoryProductTitle} />
+      {blogCta && <Button dataQa='' color='secondary' label={blogCta} givenClass='cta-button' link={'/articles'} />}
     </div>
   )
 }

package/dist/src/components/sections/BlogSection/BlogSectionProps.types.d.ts

@@ -1,6 +1,7 @@
 import { type ArticlesListProps } from '../../organisms';
 export interface BlogSectionProps {
     blogTitle: string;
-    blogCta: string;
+    blogCta?: string | null;
+    blogDescription?: string | null;
     articles: ArticlesListProps;
 }

package/dist/src/components/sections/BlogSection/BlogSectionProps.types.ts

@@ -2,6 +2,7 @@ import { type ArticlesListProps } from '../../organisms'
 
 export interface BlogSectionProps {
   blogTitle: string
-  blogCta: string
+  blogCta?: string | null
+  blogDescription?: string | null
   articles: ArticlesListProps
 }

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

@@ -5,6 +5,11 @@
   width: 100%;
   margin: 0 auto;
   text-align: center;
+  padding: 1.5rem;
+
+  @include laptop {
+    padding: 0;
+  }
 
   @include desktop {
     max-width: $max-width;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm_leadtech/legal-lib-components",
-  "version": "5.2.16",
+  "version": "5.2.18",
   "license": "ISC",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",