@npm_leadtech/legal-lib-components 5.2.10 → 5.2.12

package/dist/css/styles.css

@@ -1291,20 +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;
+.pane-wrapper:last-child {
+  padding-right: 0;
 }
 .pane-wrapper span {
   display: block;
@@ -7535,6 +7524,60 @@ 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: 2.5rem;
+}
+@media (min-width: 960px) {
+  .contact-us-section-blocks {
+    flex-direction: row;
+  }
+}
+.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;

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

@@ -57,20 +57,10 @@
     }
     &: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;
-      }
+    &:last-child {
+      padding-right: 0;
     }
-
     span {
       display: block;
       &.marker {

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

@@ -29,3 +29,64 @@
     }
   }
 }
+
+.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: 2.5rem;
+
+    @include laptop {
+      flex-direction: row;
+    }
+
+    &__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/package.json

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