@npm_leadtech/legal-lib-components 5.2.1 → 5.2.2

package/dist/css/styles.css

@@ -5073,7 +5073,7 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  transform: translateY(50px);
+  margin: 2rem 0 3rem 0;
 }
 @media (min-width: 720px) {
   .expert-card-list {
@@ -6403,9 +6403,11 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
+  align-items: center;
 }
 .trustworthy-websites__image {
   margin: 1.5rem;
+  max-width: 8rem;
 }
 .type-modules-list {
   display: flex;
@@ -6844,6 +6846,11 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
   align-self: stretch;
   color: var(--neutral-neutral-1);
 }
+.guidelines-section-main {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
 .guidelines-section__texts {
   flex-basis: 50%;
   display: flex;
@@ -6866,7 +6873,6 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
   font-family: "Lora", serif;
   margin-bottom: 2rem;
   text-align: center;
-  color: var(--neutral-neutral-2);
   font-size: 32px;
   font-style: normal;
   font-weight: 400;
@@ -6907,6 +6913,33 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
     display: none;
   }
 }
+.guidelines-section-detail {
+  display: flex;
+  gap: 1.5rem;
+  margin: 2rem 0 1rem 0;
+}
+.guidelines-section-detail__item {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  background: var(--others-white);
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+}
+.guidelines-section-detail__item__image {
+  width: 100%;
+  border-radius: 0.5rem;
+}
+.guidelines-section-detail__item__title {
+  font-family: "Lora", serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  letter-spacing: -0.3px;
+  color: var(--neutral-neutral-1);
+  margin: 1.5rem 0 1rem 0;
+}
 .jumbotron-ratafia-content {
   display: flex;
   flex-direction: column;
@@ -7325,10 +7358,11 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
 }
 .try-our-free-legal-blogs-section__texts__title {
   font-family: "Lora", serif;
-  font-size: 28px;
+  font-size: 32px;
   line-height: 42px;
   margin-bottom: 2rem;
   text-align: center;
+  font-weight: 400;
 }
 @media (min-width: 720px) {
   .try-our-free-legal-blogs-section__texts__title {
@@ -7438,24 +7472,22 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
 }
 .as-seen-in-section-box {
   flex-shrink: 0;
-  border-radius: 4px;
-  background: #fff;
-  box-shadow: 0px 2px 6px 0px rgba(2, 55, 74, 0.25);
-  margin: 2rem;
-  padding: 1rem;
-  max-width: 1200px;
+  background-color: var(--secondary-main-light-5);
 }
 @media (min-width: 960px) {
   .as-seen-in-section-box {
-    margin: 2rem auto;
+    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: var(--others-white);
+  transform: translateY(-50%);
+  padding: 1.5rem 0;
 }
 .as-seen-in-section-box .as-seen-in-section__title {
-  color: var(--neutral-neutral-2);
   text-align: center;
   font-size: 32px;
   font-family: "Lora", serif;
@@ -7636,8 +7668,8 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
   display: flex;
   justify-content: center;
   flex-direction: column;
-  background-color: var(--neutral-neutral-6);
-  margin-bottom: 8rem;
+  background-color: var(--primary-main-light-6);
+  margin-bottom: 4rem;
 }
 .experts-section__title {
   font-family: "Lora", serif;
@@ -7757,11 +7789,11 @@ html[data-theme=lawdistrict] .document-status.--is-new .icon {
 .guidelines-section {
   display: flex;
   flex-direction: column;
-}
-@media (min-width: 720px) {
-  .guidelines-section {
-    flex-flow: row nowrap;
-  }
+  align-items: center;
+  background: var(--neutral-neutral-6);
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  margin-top: 3rem;
 }
 .how-it-works-wrapper {
   background-color: var(--neutral-neutral-6);

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

@@ -5,7 +5,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  transform: translateY(50px);
+  margin: 2rem 0 3rem 0;
 
   @include landscape-tablets {
     flex-direction: row;

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

@@ -5,8 +5,10 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
+  align-items: center;
 
   &__image {
     margin: 1.5rem;
+    max-width: 8rem;
   }
 }

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { RichTextInner } from '../../atoms';
 // import './GuidelinesContent.scss'
-const GuidelinesContent = ({ title, image, children }) => {
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'guidelines-section__image big-devices', children: image }), _jsxs("div", { className: 'guidelines-section__texts', children: [_jsx("h2", { className: 'guidelines-section__texts__title', children: title }), _jsx(RichTextInner, { customClass: 'guidelines-section__texts__body', children: children })] }), _jsx("div", { className: 'guidelines-section__image is-mobile', children: image })] }));
+const GuidelinesContent = ({ title, image, detail, children }) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'guidelines-section-main wrapper', children: [_jsx("div", { className: 'guidelines-section__image big-devices', children: image }), _jsxs("div", { className: 'guidelines-section__texts', children: [_jsx("h2", { className: 'guidelines-section__texts__title', children: title }), _jsx(RichTextInner, { customClass: 'guidelines-section__texts__body', children: children })] }), _jsx("div", { className: 'guidelines-section__image is-mobile', children: image })] }), Array.isArray(detail) && (_jsx("div", { className: 'guidelines-section-detail wrapper', children: detail.map((item, index) => (_jsxs("div", { className: 'guidelines-section-detail__item', children: [_jsx("div", { className: 'guidelines-section-detail__item__image', children: item.image }), _jsx("div", { className: 'guidelines-section-detail__item__title', children: item.title }), _jsx(RichTextInner, { customClass: 'guidelines-section-detail__item__text', children: item.text })] }, index))) }))] }));
 };
 export default GuidelinesContent;

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

@@ -2,6 +2,12 @@
 @import '../../../globalStyles/mediaqueries.scss';
 
 .guidelines-section {
+  &-main {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
+
   &__texts {
     flex-basis: 50%;
     display: flex;
@@ -23,7 +29,6 @@
       font-family: $font-serif;
       margin-bottom: 2rem;
       text-align: center;
-      color: get-color(neutral, neutral-2);
       font-size: 32px;
       font-style: normal;
       font-weight: 400;
@@ -67,4 +72,35 @@
       }
     }
   }
+
+  &-detail {
+    display: flex;
+    gap: 1.5rem;
+    margin: 2rem 0 1rem 0;
+
+    &__item {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      background: get-color(others, white);
+      border-radius: 0.5rem;
+      padding: 1.5rem;
+
+      &__image {
+        width: 100%;
+        border-radius: 0.5rem;
+      }
+
+      &__title {
+        font-family: $font-serif;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 32px;
+        letter-spacing: -0.3px;
+        color: get-color(neutral, neutral-1);
+        margin: 1.5rem 0 1rem 0;
+      }
+    }
+  }
 }

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

@@ -1,18 +1,32 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import React, { type FC } from 'react'
 
 import { type GuidelinesContentProps } from './GuidelinesContentProps.types'
 import { RichTextInner } from '../../atoms'
 // import './GuidelinesContent.scss'
 
-const GuidelinesContent: FC<GuidelinesContentProps> = ({ title, image, children }) => {
+const GuidelinesContent: FC<GuidelinesContentProps> = ({ title, image, detail, children }) => {
   return (
     <>
-      <div className='guidelines-section__image big-devices'>{image}</div>
-      <div className='guidelines-section__texts'>
-        <h2 className='guidelines-section__texts__title'>{title}</h2>
-        <RichTextInner customClass='guidelines-section__texts__body'>{children}</RichTextInner>
+      <div className='guidelines-section-main wrapper'>
+        <div className='guidelines-section__image big-devices'>{image}</div>
+        <div className='guidelines-section__texts'>
+          <h2 className='guidelines-section__texts__title'>{title}</h2>
+          <RichTextInner customClass='guidelines-section__texts__body'>{children}</RichTextInner>
+        </div>
+        <div className='guidelines-section__image is-mobile'>{image}</div>
       </div>
-      <div className='guidelines-section__image is-mobile'>{image}</div>
+      {Array.isArray(detail) && (
+        <div className='guidelines-section-detail wrapper'>
+          {detail.map((item, index) => (
+            <div className='guidelines-section-detail__item' key={index}>
+              <div className='guidelines-section-detail__item__image'>{item.image}</div>
+              <div className='guidelines-section-detail__item__title'>{item.title}</div>
+              <RichTextInner customClass='guidelines-section-detail__item__text'>{item.text}</RichTextInner>
+            </div>
+          ))}
+        </div>
+      )}
     </>
   )
 }

package/dist/src/components/organisms/GuidelinesContent/GuidelinesContentProps.types.d.ts

@@ -2,4 +2,5 @@ export interface GuidelinesContentProps {
     title: string;
     image: React.ReactNode;
     children: React.ReactNode;
+    detail?: React.ReactNode;
 }

package/dist/src/components/organisms/GuidelinesContent/GuidelinesContentProps.types.ts

@@ -2,4 +2,5 @@ export interface GuidelinesContentProps {
   title: string
   image: React.ReactNode
   children: React.ReactNode
+  detail?: React.ReactNode
 }

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

@@ -21,10 +21,11 @@
 
     &__title {
       font-family: $font-serif;
-      font-size: 28px;
+      font-size: 32px;
       line-height: 42px;
       margin-bottom: 2rem;
       text-align: center;
+      font-weight: 400;
 
       @include landscape-tablets {
         text-align: left;

package/dist/src/components/pages/AboutUsPage/AboutUsPage.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { AboutUsSection, AsSeeInSection, ExpertsSection, GuidelinesSection, PeopleSayAboutUsSection, TryOurFreeLegalBlogsSection, TryUsSection } from '../../sections';
-export const AboutUsPage = ({ aboutUsSectionProps, tryOurFreeLegalBlogsSectionProps, peopleSayAboutUsSectionProps, guidelinesSectionProps, tryUsSectionProps, expertsSectionProps, asSeeInSectionProps, isJonSnow = false }) => {
-    return (_jsxs(_Fragment, { children: [aboutUsSectionProps != null && _jsx(AboutUsSection, { ...aboutUsSectionProps }), tryOurFreeLegalBlogsSectionProps != null && (_jsx(TryOurFreeLegalBlogsSection, { ...tryOurFreeLegalBlogsSectionProps })), !isJonSnow && peopleSayAboutUsSectionProps != null && (_jsx(PeopleSayAboutUsSection, { ...peopleSayAboutUsSectionProps })), guidelinesSectionProps != null && (_jsx(GuidelinesSection, { ...guidelinesSectionProps, children: guidelinesSectionProps.contentGuidelines?.children })), tryUsSectionProps != null && _jsx(TryUsSection, { ...tryUsSectionProps, children: tryUsSectionProps.children }), expertsSectionProps != null && _jsx(ExpertsSection, { ...expertsSectionProps }), !isJonSnow && asSeeInSectionProps != null && _jsx(AsSeeInSection, { ...asSeeInSectionProps })] }));
+import { AboutUsSection, AsSeeInSection, ExpertsSection, GuidelinesSection, PeopleSayAboutUsSection, TryOurFreeLegalBlogsSection } from '../../sections';
+export const AboutUsPage = ({ aboutUsSectionProps, tryOurFreeLegalBlogsSectionProps, peopleSayAboutUsSectionProps, guidelinesSectionProps, expertsSectionProps, asSeeInSectionProps, isJonSnow = false }) => {
+    return (_jsxs(_Fragment, { children: [aboutUsSectionProps != null && _jsx(AboutUsSection, { ...aboutUsSectionProps }), tryOurFreeLegalBlogsSectionProps != null && (_jsx(TryOurFreeLegalBlogsSection, { ...tryOurFreeLegalBlogsSectionProps })), guidelinesSectionProps != null && (_jsx(GuidelinesSection, { ...guidelinesSectionProps, children: guidelinesSectionProps.contentGuidelines?.children })), expertsSectionProps != null && _jsx(ExpertsSection, { ...expertsSectionProps }), !isJonSnow && peopleSayAboutUsSectionProps != null && (_jsx(PeopleSayAboutUsSection, { ...peopleSayAboutUsSectionProps })), !isJonSnow && asSeeInSectionProps != null && _jsx(AsSeeInSection, { ...asSeeInSectionProps })] }));
 };

package/dist/src/components/pages/AboutUsPage/AboutUsPage.tsx

@@ -7,8 +7,7 @@ import {
   ExpertsSection,
   GuidelinesSection,
   PeopleSayAboutUsSection,
-  TryOurFreeLegalBlogsSection,
-  TryUsSection
+  TryOurFreeLegalBlogsSection
 } from '../../sections'
 import { type AboutUsPageProps } from './AboutUsPageProps'
 
@@ -17,7 +16,6 @@ export const AboutUsPage: React.FC<AboutUsPageProps> = ({
   tryOurFreeLegalBlogsSectionProps,
   peopleSayAboutUsSectionProps,
   guidelinesSectionProps,
-  tryUsSectionProps,
   expertsSectionProps,
   asSeeInSectionProps,
   isJonSnow = false
@@ -28,16 +26,15 @@ export const AboutUsPage: React.FC<AboutUsPageProps> = ({
       {tryOurFreeLegalBlogsSectionProps != null && (
         <TryOurFreeLegalBlogsSection {...tryOurFreeLegalBlogsSectionProps} />
       )}
-      {!isJonSnow && peopleSayAboutUsSectionProps != null && (
-        <PeopleSayAboutUsSection {...peopleSayAboutUsSectionProps} />
-      )}
       {guidelinesSectionProps != null && (
         <GuidelinesSection {...guidelinesSectionProps}>
           {guidelinesSectionProps.contentGuidelines?.children}
         </GuidelinesSection>
       )}
-      {tryUsSectionProps != null && <TryUsSection {...tryUsSectionProps}>{tryUsSectionProps.children}</TryUsSection>}
       {expertsSectionProps != null && <ExpertsSection {...expertsSectionProps} />}
+      {!isJonSnow && peopleSayAboutUsSectionProps != null && (
+        <PeopleSayAboutUsSection {...peopleSayAboutUsSectionProps} />
+      )}
       {!isJonSnow && asSeeInSectionProps != null && <AsSeeInSection {...asSeeInSectionProps} />}
     </>
   )

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

@@ -5,6 +5,6 @@ const AsSeeInSection = ({ title, contentAsSeeIn }) => {
     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', children: [_jsx("h2", { className: 'as-seen-in-section__title', children: title }), _jsx(AsSeeInContent, { trustWorthyImages: contentAsSeeIn.trustWorthyImages, children: contentAsSeeIn.children })] }) }));
+    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 })] }) }));
 };
 export default AsSeeInSection;

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

@@ -3,23 +3,21 @@
 
 .as-seen-in-section-box {
   flex-shrink: 0;
-  border-radius: 4px;
-  background: #fff;
-  box-shadow: 0px 2px 6px 0px rgba(2, 55, 74, 0.25);
-  margin: 2rem;
-  padding: 1rem;
-  max-width: 1200px;
+  background-color: get-color(secondary, main-light-5);
 
   @include laptop {
-    margin: 2rem auto;
+    margin-top: 12rem;
   }
 
   .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(-50%);
+    padding: 1.5rem 0;
 
     &__title {
-      color: get-color(neutral, neutral-2);
       text-align: center;
       font-size: 32px;
       font-family: $font-serif;

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

@@ -11,7 +11,7 @@ const AsSeeInSection: FC<AsSeeInSectionProps> = ({ title, contentAsSeeIn }) => {
 
   return (
     <section className='as-seen-in-section-box'>
-      <div className='as-seen-in-section'>
+      <div className='as-seen-in-section wrapper'>
         <h2 className='as-seen-in-section__title'>{title}</h2>
         <AsSeeInContent trustWorthyImages={contentAsSeeIn.trustWorthyImages}>{contentAsSeeIn.children}</AsSeeInContent>
       </div>

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

@@ -5,8 +5,8 @@
   display: flex;
   justify-content: center;
   flex-direction: column;
-  background-color: get-color(neutral, neutral-6);
-  margin-bottom: 8rem;
+  background-color: get-color(primary, main-light-6);
+  margin-bottom: 4rem;
 
   &__title {
     font-family: $font-serif;

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

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { GuidelinesContent } from '../../organisms/GuidelinesContent';
 // import './GuidelinesSection.scss'
 const GuidelinesSection = ({ contentGuidelines }) => {
-    return (_jsx("section", { className: 'guidelines-section wrapper wrapper--responsive', children: _jsx(GuidelinesContent, { title: contentGuidelines.title, image: contentGuidelines.image, children: contentGuidelines.children }) }));
+    return (_jsx("section", { 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.scss

@@ -4,8 +4,9 @@
 .guidelines-section {
   display: flex;
   flex-direction: column;
-
-  @include landscape-tablets {
-    flex-flow: row nowrap;
-  }
+  align-items: center;
+  background: get-color(neutral, neutral-6);
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  margin-top: 3rem;
 }

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

@@ -6,8 +6,12 @@ import { type GuidelinesSectionProps } from './GuidelinesSectionProps.types'
 
 const GuidelinesSection: FC<GuidelinesSectionProps> = ({ contentGuidelines }) => {
   return (
-    <section className='guidelines-section wrapper wrapper--responsive'>
-      <GuidelinesContent title={contentGuidelines.title} image={contentGuidelines.image}>
+    <section className='guidelines-section'>
+      <GuidelinesContent
+        title={contentGuidelines.title}
+        image={contentGuidelines.image}
+        detail={contentGuidelines.detail}
+      >
         {contentGuidelines.children}
       </GuidelinesContent>
     </section>

package/package.json

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