@npm_leadtech/legal-lib-components 5.71.0 → 5.72.0

package/dist/src/components/atoms/ContactCard/ContactCard.styled.js

@@ -9,11 +9,15 @@ export const ContactCardStyled = styled.div `
     box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
     border-radius: var(--s-border-radius);
     min-width: 12.5rem;
-    height: 7.875rem;
     flex-shrink: 0;
     padding: 1rem;
     text-decoration: none;
     color: var(--neutral-neutral-1);
+
+    @media ${device['landscape-tablets']} {
+      height: 100%;
+    }
+
     &__image {
       width: 2rem;
     }

package/dist/src/components/atoms/ContactCard/ContactCard.styled.ts

@@ -10,11 +10,15 @@ export const ContactCardStyled = styled.div`
     box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
     border-radius: var(--s-border-radius);
     min-width: 12.5rem;
-    height: 7.875rem;
     flex-shrink: 0;
     padding: 1rem;
     text-decoration: none;
     color: var(--neutral-neutral-1);
+
+    @media ${device['landscape-tablets']} {
+      height: 100%;
+    }
+
     &__image {
       width: 2rem;
     }

package/dist/src/components/molecules/ContactCardList/ContactCardList.styled.js

@@ -6,7 +6,7 @@ export const ContactCardListStyled = styled.div `
   flex-direction: column;
   gap: var(--global-gap);
 
-  @media ${device.laptop} {
+  @media ${device['landscape-tablets']} {
     flex-direction: row;
     gap: 2.5rem;
   }

package/dist/src/components/molecules/ContactCardList/ContactCardList.styled.ts

@@ -7,7 +7,7 @@ export const ContactCardListStyled = styled.div`
   flex-direction: column;
   gap: var(--global-gap);
 
-  @media ${device.laptop} {
+  @media ${device['landscape-tablets']} {
     flex-direction: row;
     gap: 2.5rem;
   }

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

@@ -4,6 +4,6 @@ import { ContactContentStyled } from './ContactContent.styled';
 const ContactContent = ({ title, text, contactCards = [] }) => {
     if (contactCards.length === 0)
         return null;
-    return (_jsxs(ContactContentStyled, { className: 'contact-content', children: [_jsx("h2", { className: 'contact-content__title', children: title }), _jsx("p", { className: 'contact-content__text', children: text }), _jsx(ContactCardList, { contactCards: contactCards })] }));
+    return (_jsx(ContactContentStyled, { className: 'contact-content', children: _jsx("div", { className: 'wrapper', children: _jsxs("div", { className: 'contact-content__body', children: [_jsx("h2", { className: 'contact-content__title', children: title }), _jsx("p", { className: 'contact-content__text', children: text }), _jsx(ContactCardList, { contactCards: contactCards })] }) }) }));
 };
 export default ContactContent;

package/dist/src/components/organisms/ContactContent/ContactContent.styled.js

@@ -1,21 +1,34 @@
+import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const ContactContentStyled = styled.div `
-  display: flex;
-  flex-direction: column;
-  transform: translateY(-5rem);
-  color: var(--neutral-neutral-1);
-  margin-top: 1rem;
+  background: var(--neutral-neutral-6);
+  padding: 0 1.5rem;
+
+  @media ${device.laptop} {
+    padding: 0;
+  }
 
   .contact-content {
+    &__body {
+      display: flex;
+      flex-direction: column;
+      color: var(--neutral-neutral-1);
+      padding-top: 2rem;
+      padding-bottom: 5rem;
+
+      @media ${device['landscape-tablets']} {
+        padding-top: 3rem;
+      }
+    }
     &__title {
       text-align: center;
-      font-size: 32px;
-      font-family: var(--font-serif);
+      font-size: 1.75rem;
+      font-family: var(--font-sans);
       font-style: normal;
-      font-weight: 400;
-      line-height: 42px;
+      font-weight: 700;
+      line-height: 1.2;
       letter-spacing: -0.3px;
-      margin: 1rem 0;
+      padding-bottom: 1.5rem;
     }
 
     &__text {
@@ -23,6 +36,10 @@ export const ContactContentStyled = styled.div `
       font-style: normal;
       font-weight: 400;
       margin: 0 0 2rem 0;
+
+      @media ${device['landscape-tablets']} {
+        letter-spacing: -0.2px;
+      }
     }
   }
 `;

package/dist/src/components/organisms/ContactContent/ContactContent.styled.ts

@@ -1,22 +1,35 @@
+import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
 export const ContactContentStyled = styled.div`
-  display: flex;
-  flex-direction: column;
-  transform: translateY(-5rem);
-  color: var(--neutral-neutral-1);
-  margin-top: 1rem;
+  background: var(--neutral-neutral-6);
+  padding: 0 1.5rem;
+
+  @media ${device.laptop} {
+    padding: 0;
+  }
 
   .contact-content {
+    &__body {
+      display: flex;
+      flex-direction: column;
+      color: var(--neutral-neutral-1);
+      padding-top: 2rem;
+      padding-bottom: 5rem;
+
+      @media ${device['landscape-tablets']} {
+        padding-top: 3rem;
+      }
+    }
     &__title {
       text-align: center;
-      font-size: 32px;
-      font-family: var(--font-serif);
+      font-size: 1.75rem;
+      font-family: var(--font-sans);
       font-style: normal;
-      font-weight: 400;
-      line-height: 42px;
+      font-weight: 700;
+      line-height: 1.2;
       letter-spacing: -0.3px;
-      margin: 1rem 0;
+      padding-bottom: 1.5rem;
     }
 
     &__text {
@@ -24,6 +37,10 @@ export const ContactContentStyled = styled.div`
       font-style: normal;
       font-weight: 400;
       margin: 0 0 2rem 0;
+
+      @media ${device['landscape-tablets']} {
+        letter-spacing: -0.2px;
+      }
     }
   }
 `

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

@@ -11,9 +11,13 @@ const ContactContent: FC<ContactContentProps> = ({ title, text, contactCards = [
 
   return (
     <ContactContentStyled className='contact-content'>
-      <h2 className='contact-content__title'>{title}</h2>
-      <p className='contact-content__text'>{text}</p>
-      <ContactCardList contactCards={contactCards} />
+      <div className='wrapper'>
+        <div className='contact-content__body'>
+          <h2 className='contact-content__title'>{title}</h2>
+          <p className='contact-content__text'>{text}</p>
+          <ContactCardList contactCards={contactCards} />
+        </div>
+      </div>
     </ContactContentStyled>
   )
 }

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { AboutUsSection, AsSeeInSection, CardStorySection, ExpertsSection, GuidelinesSection, PeopleSayAboutUsSection, TryOurFreeLegalBlogsSection } from '../../sections';
-import { HowWeHelp } from '../../organisms';
-export const AboutUsPage = ({ aboutUsSectionProps, ourMissionBlogsSectionProps, ourCoreValuesBlogsSectionProps, cardStorySection, howWeHelp, peopleSayAboutUsSectionProps, guidelinesSectionProps, expertsSectionProps, asSeeInSectionProps, isJonSnow = false }) => {
-    return (_jsxs(_Fragment, { children: [aboutUsSectionProps != null && _jsx(AboutUsSection, { ...aboutUsSectionProps }), ourMissionBlogsSectionProps != null && _jsx(TryOurFreeLegalBlogsSection, { ...ourMissionBlogsSectionProps }), ourCoreValuesBlogsSectionProps != null && _jsx(TryOurFreeLegalBlogsSection, { ...ourCoreValuesBlogsSectionProps }), cardStorySection != null && _jsx(CardStorySection, { ...cardStorySection }), howWeHelp != null && _jsx(HowWeHelp, { ...howWeHelp }), 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 })] }));
+import { ContactContent, HowWeHelp } from '../../organisms';
+export const AboutUsPage = ({ aboutUsSectionProps, ourMissionBlogsSectionProps, ourCoreValuesBlogsSectionProps, cardStorySection, howWeHelp, peopleSayAboutUsSectionProps, guidelinesSectionProps, expertsSectionProps, asSeeInSectionProps, contactContentProps, isJonSnow = false }) => {
+    return (_jsxs(_Fragment, { children: [aboutUsSectionProps != null && _jsx(AboutUsSection, { ...aboutUsSectionProps }), ourMissionBlogsSectionProps != null && _jsx(TryOurFreeLegalBlogsSection, { ...ourMissionBlogsSectionProps }), ourCoreValuesBlogsSectionProps != null && _jsx(TryOurFreeLegalBlogsSection, { ...ourCoreValuesBlogsSectionProps }), cardStorySection != null && _jsx(CardStorySection, { ...cardStorySection }), howWeHelp != null && _jsx(HowWeHelp, { ...howWeHelp }), 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 }), !isJonSnow && contactContentProps != null && _jsx(ContactContent, { ...contactContentProps })] }));
 };

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

@@ -9,8 +9,8 @@ import {
   PeopleSayAboutUsSection,
   TryOurFreeLegalBlogsSection
 } from '../../sections'
+import { ContactContent, HowWeHelp } from '../../organisms'
 import { type AboutUsPageProps } from './AboutUsPageProps'
-import { HowWeHelp } from '../../organisms'
 
 export const AboutUsPage: React.FC<AboutUsPageProps> = ({
   aboutUsSectionProps,
@@ -22,6 +22,7 @@ export const AboutUsPage: React.FC<AboutUsPageProps> = ({
   guidelinesSectionProps,
   expertsSectionProps,
   asSeeInSectionProps,
+  contactContentProps,
   isJonSnow = false
 }) => {
   return (
@@ -41,6 +42,7 @@ export const AboutUsPage: React.FC<AboutUsPageProps> = ({
         <PeopleSayAboutUsSection {...peopleSayAboutUsSectionProps} />
       )}
       {!isJonSnow && asSeeInSectionProps != null && <AsSeeInSection {...asSeeInSectionProps} />}
+      {!isJonSnow && contactContentProps != null && <ContactContent {...contactContentProps} />}
     </>
   )
 }

package/dist/src/components/pages/AboutUsPage/AboutUsPageProps.d.ts

@@ -1,5 +1,5 @@
 import type { AboutUsSectionProps, AsSeeInSectionProps, CardStorySectionProps, ExpertsSectionProps, GuidelinesSectionProps, PeopleSayAboutUsSectionProps, TryOurFreeLegalBlogsSectionProps, TryUsSectionProps } from '../../sections';
-import { HowWeHelpProps } from '../../organisms';
+import { ContactContentProps, HowWeHelpProps } from '../../organisms';
 export interface AboutUsPageProps {
     aboutUsSectionProps?: AboutUsSectionProps;
     ourMissionBlogsSectionProps?: TryOurFreeLegalBlogsSectionProps;
@@ -11,5 +11,6 @@ export interface AboutUsPageProps {
     tryUsSectionProps?: TryUsSectionProps;
     expertsSectionProps?: ExpertsSectionProps;
     asSeeInSectionProps?: AsSeeInSectionProps;
+    contactContentProps?: ContactContentProps;
     isJonSnow?: boolean;
 }

package/dist/src/components/pages/AboutUsPage/AboutUsPageProps.ts

@@ -8,7 +8,7 @@ import type {
   TryOurFreeLegalBlogsSectionProps,
   TryUsSectionProps
 } from '../../sections'
-import { HowWeHelpProps } from '../../organisms'
+import { ContactContentProps, HowWeHelpProps } from '../../organisms'
 
 export interface AboutUsPageProps {
   aboutUsSectionProps?: AboutUsSectionProps
@@ -21,5 +21,6 @@ export interface AboutUsPageProps {
   tryUsSectionProps?: TryUsSectionProps
   expertsSectionProps?: ExpertsSectionProps
   asSeeInSectionProps?: AsSeeInSectionProps
+  contactContentProps?: ContactContentProps
   isJonSnow?: boolean
 }

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

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

@@ -3,10 +3,10 @@ import styled from 'styled-components';
 export const AsSeeInSectionStyled = styled.section `
   flex-shrink: 0;
   background-color: get-color(secondary, main-light-5);
-  padding: 0 1.5rem;
+  padding: 0 1.5rem 2rem 1.5rem;
 
-  @media ${device.laptop} {
-    margin-top: 12rem;
+  @media ${device['landscape-tablets']} {
+    padding: 0 1.5rem 3rem 1.5rem;
   }
 
   .as-seen-in-section {
@@ -14,13 +14,8 @@ export const AsSeeInSectionStyled = styled.section `
     flex-direction: column;
     box-shadow: 0 2px 6px 0 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;

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

@@ -4,10 +4,10 @@ import styled from 'styled-components'
 export const AsSeeInSectionStyled = styled.section`
   flex-shrink: 0;
   background-color: get-color(secondary, main-light-5);
-  padding: 0 1.5rem;
+  padding: 0 1.5rem 2rem 1.5rem;
 
-  @media ${device.laptop} {
-    margin-top: 12rem;
+  @media ${device['landscape-tablets']} {
+    padding: 0 1.5rem 3rem 1.5rem;
   }
 
   .as-seen-in-section {
@@ -15,13 +15,8 @@ export const AsSeeInSectionStyled = styled.section`
     flex-direction: column;
     box-shadow: 0 2px 6px 0 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;

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

@@ -1,16 +1,10 @@
 import React, { type FC } from 'react'
 
-import { AsSeeInContent, ContactContent } from '../../organisms'
+import { AsSeeInContent } from '../../organisms'
 import { type AsSeeInSectionProps } from './AsSeeInSectionProps.types'
 import { AsSeeInSectionStyled } from './AsSeeInSection.styled'
 
-const AsSeeInSection: FC<AsSeeInSectionProps> = ({
-  title,
-  contentAsSeeIn,
-  contactSectionTitle,
-  contactSectionText,
-  contactSectionBlocks
-}) => {
+const AsSeeInSection: FC<AsSeeInSectionProps> = ({ title, contentAsSeeIn }) => {
   if (contentAsSeeIn.trustWorthyImages.images.length === 0) {
     return null
   }
@@ -21,7 +15,6 @@ const AsSeeInSection: FC<AsSeeInSectionProps> = ({
         <h2 className='as-seen-in-section__title'>{title}</h2>
         <AsSeeInContent trustWorthyImages={contentAsSeeIn.trustWorthyImages}>{contentAsSeeIn.children}</AsSeeInContent>
       </div>
-      <ContactContent title={contactSectionTitle} text={contactSectionText} contactCards={contactSectionBlocks} />
     </AsSeeInSectionStyled>
   )
 }

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

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

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

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

package/package.json

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