@npm_leadtech/legal-lib-components 7.45.0 → 7.45.1

package/dist/src/components/pages/PricingPage/PricingPageProps.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/pages/PricingPage/PricingPageProps.ts

@@ -0,0 +1,33 @@
+import { BenefitCardProps, CardBoxProps } from 'src/components/atoms'
+import { FaqGroupProps } from 'src/components/organisms'
+import { HeroSectionProps } from 'src/components/sections'
+import { PlanBoxPricingSubscriptionCardProps } from 'src/components/molecules'
+
+export interface BenefitContentProps {
+  title: string
+  benefitsList: BenefitCardProps[]
+}
+
+export interface FaqsContentProps {
+  faqItems: FaqGroupProps[]
+}
+
+export interface PricingPlanContentProps {
+  title: string
+  plans: PlanBoxPricingSubscriptionCardProps[]
+}
+
+export interface SupportContentProps {
+  title: string
+  description: string
+  benefitsList: CardBoxProps[]
+}
+
+export interface PricingPageProps {
+  benefitsContent: BenefitContentProps
+  faqsContent: FaqsContentProps
+  helpResourcesCards: CardBoxProps[]
+  supportContent: SupportContentProps
+  pricingPlanContent: PricingPlanContentProps
+  pricingSection: HeroSectionProps
+}

package/dist/src/components/pages/PricingPage/index.d.ts

@@ -0,0 +1,2 @@
+export { PricingPage } from './PricingPage';
+export * from './PricingPageProps';

package/dist/src/components/pages/PricingPage/index.js

@@ -0,0 +1,2 @@
+export { PricingPage } from './PricingPage';
+export * from './PricingPageProps';

package/dist/src/components/pages/PricingPage/index.ts

@@ -0,0 +1,2 @@
+export { PricingPage } from './PricingPage'
+export * from './PricingPageProps'

package/dist/src/components/pages/RatafiaResultPage/RatafiaResultPage.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type RatafiaResultPageProps } from './RatafiaResultPageProps.types';
+export declare const RatafiaResultPage: React.FC<RatafiaResultPageProps>;
+export default RatafiaResultPage;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { RatafiaLoadingResultContent, RatafiaResultContent } from '../../organisms';
+import { Button } from '../../atoms';
+import DisclaimerRatafia from '../../atoms/DisclaimerRatafia/DisclaimerRatafia';
+import { LayoutRatafia } from '../../organisms/LayoutRatafia';
+import { RatafiaResultPageStyled } from './RatafiaResultPage.styled';
+export const RatafiaResultPage = ({ header, resultContent, reviewContent, tabs, disclaimer, cta, loadingIcon, loadingText, isLoading }) => {
+    const loadingContent = (_jsx("div", { className: 'ratafia-result-page__content', children: _jsx(RatafiaLoadingResultContent, { documentName: resultContent.documentName, icon: loadingIcon, text: loadingText }) }));
+    const loadedContent = (_jsx("div", { className: 'ratafia-result-page__content', children: _jsx(RatafiaResultContent, { result: resultContent, review: reviewContent, tabs: tabs }) }));
+    const ctaButton = isLoading ? null : (_jsx(Button, { givenClass: 'ratafia-result-page__content__cta', dataQa: cta.dataQa, color: 'primary', label: cta.label, onClick: cta.handleOnClick, noLink: true }));
+    const footerDesktop = (_jsx("div", { className: 'ratafia-result-page__footer-desktop', children: _jsx(DisclaimerRatafia, { icon: disclaimer.icon, text: disclaimer.text, copyrightText: disclaimer.copyrightText, ctaTextShowDisclaimer: disclaimer.ctaTextShowDisclaimer, ctaTextCloseDisclaimer: disclaimer.ctaTextCloseDisclaimer }) }));
+    const footerMobile = (_jsxs(_Fragment, { children: [footerDesktop, ctaButton] }));
+    return (_jsx(RatafiaResultPageStyled, { className: 'ratafia-result-page', children: _jsx(LayoutRatafia, { header: header, content: isLoading ? loadingContent : loadedContent, cta: ctaButton, footerDesktop: footerDesktop, footerMobile: footerMobile }) }));
+};
+export default RatafiaResultPage;

package/dist/src/components/pages/RatafiaResultPage/RatafiaResultPage.styled.d.ts

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

@@ -0,0 +1,23 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const RatafiaResultPageStyled = styled.div `
+  background-color: var(--neutral-neutral-6);
+
+  .ratafia-result-page__content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 1 0 0;
+    align-self: stretch;
+    gap: 1.5rem;
+
+    &__cta {
+      align-self: start;
+      display: block;
+      width: 100%;
+      @media ${device['portrait-tablets']} {
+        display: inline-block;
+      }
+    }
+  }
+`;

package/dist/src/components/pages/RatafiaResultPage/RatafiaResultPage.styled.ts

@@ -0,0 +1,24 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const RatafiaResultPageStyled = styled.div`
+  background-color: var(--neutral-neutral-6);
+
+  .ratafia-result-page__content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 1 0 0;
+    align-self: stretch;
+    gap: 1.5rem;
+
+    &__cta {
+      align-self: start;
+      display: block;
+      width: 100%;
+      @media ${device['portrait-tablets']} {
+        display: inline-block;
+      }
+    }
+  }
+`

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

@@ -0,0 +1,76 @@
+import React from 'react'
+
+import { RatafiaLoadingResultContent, RatafiaResultContent } from '../../organisms'
+import { Button } from '../../atoms'
+import DisclaimerRatafia from '../../atoms/DisclaimerRatafia/DisclaimerRatafia'
+import { LayoutRatafia } from '../../organisms/LayoutRatafia'
+import { type RatafiaResultPageProps } from './RatafiaResultPageProps.types'
+
+import { RatafiaResultPageStyled } from './RatafiaResultPage.styled'
+
+export const RatafiaResultPage: React.FC<RatafiaResultPageProps> = ({
+  header,
+  resultContent,
+  reviewContent,
+  tabs,
+  disclaimer,
+  cta,
+  loadingIcon,
+  loadingText,
+  isLoading
+}) => {
+  const loadingContent = (
+    <div className='ratafia-result-page__content'>
+      <RatafiaLoadingResultContent documentName={resultContent.documentName} icon={loadingIcon} text={loadingText} />
+    </div>
+  )
+  const loadedContent = (
+    <div className='ratafia-result-page__content'>
+      <RatafiaResultContent result={resultContent} review={reviewContent} tabs={tabs} />
+    </div>
+  )
+
+  const ctaButton = isLoading ? null : (
+    <Button
+      givenClass='ratafia-result-page__content__cta'
+      dataQa={cta.dataQa}
+      color='primary'
+      label={cta.label}
+      onClick={cta.handleOnClick}
+      noLink
+    />
+  )
+
+  const footerDesktop = (
+    <div className='ratafia-result-page__footer-desktop'>
+      <DisclaimerRatafia
+        icon={disclaimer.icon}
+        text={disclaimer.text}
+        copyrightText={disclaimer.copyrightText}
+        ctaTextShowDisclaimer={disclaimer.ctaTextShowDisclaimer}
+        ctaTextCloseDisclaimer={disclaimer.ctaTextCloseDisclaimer}
+      />
+    </div>
+  )
+
+  const footerMobile = (
+    <>
+      {footerDesktop}
+      {ctaButton}
+    </>
+  )
+
+  return (
+    <RatafiaResultPageStyled className='ratafia-result-page'>
+      <LayoutRatafia
+        header={header}
+        content={isLoading ? loadingContent : loadedContent}
+        cta={ctaButton}
+        footerDesktop={footerDesktop}
+        footerMobile={footerMobile}
+      />
+    </RatafiaResultPageStyled>
+  )
+}
+
+export default RatafiaResultPage

package/dist/src/components/pages/RatafiaResultPage/RatafiaResultPageProps.types.d.ts

@@ -0,0 +1,20 @@
+import type { DisclaimerRatafiaProps, RatafiaResultTabProps, RatafiaReviewResultProps } from '../../atoms';
+import { type HeaderRatafiaProps } from '../../molecules';
+import { type RatafiaResultProps } from '../../organisms';
+export interface RatafiaResultPageProps {
+    header: HeaderRatafiaProps;
+    resultContent: RatafiaResultProps;
+    reviewContent: RatafiaReviewResultProps;
+    tabs: RatafiaResultTabProps[];
+    disclaimer: DisclaimerRatafiaProps;
+    cta: RatafiaResultCta;
+    loadingIcon?: React.ReactNode;
+    loadingText?: React.ReactNode;
+    isLoading: boolean;
+}
+interface RatafiaResultCta {
+    label: string;
+    handleOnClick?: (functionParameters?: any) => () => void;
+    dataQa: string;
+}
+export {};

package/dist/src/components/pages/RatafiaResultPage/RatafiaResultPageProps.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/pages/RatafiaResultPage/RatafiaResultPageProps.types.ts

@@ -0,0 +1,22 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { DisclaimerRatafiaProps, RatafiaResultTabProps, RatafiaReviewResultProps } from '../../atoms'
+import { type HeaderRatafiaProps } from '../../molecules'
+import { type RatafiaResultProps } from '../../organisms'
+
+export interface RatafiaResultPageProps {
+  header: HeaderRatafiaProps
+  resultContent: RatafiaResultProps
+  reviewContent: RatafiaReviewResultProps
+  tabs: RatafiaResultTabProps[]
+  disclaimer: DisclaimerRatafiaProps
+  cta: RatafiaResultCta
+  loadingIcon?: React.ReactNode
+  loadingText?: React.ReactNode
+  isLoading: boolean
+}
+
+interface RatafiaResultCta {
+  label: string
+  handleOnClick?: (functionParameters?: any) => () => void
+  dataQa: string
+}

package/dist/src/components/pages/RatafiaResultPage/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RatafiaResultPage } from './RatafiaResultPage';
+export { type RatafiaResultPageProps } from './RatafiaResultPageProps.types';

package/dist/src/components/pages/RatafiaResultPage/index.js

@@ -0,0 +1 @@
+export { default as RatafiaResultPage } from './RatafiaResultPage';

package/dist/src/components/pages/RatafiaResultPage/index.ts

@@ -0,0 +1,2 @@
+export { default as RatafiaResultPage } from './RatafiaResultPage'
+export { type RatafiaResultPageProps } from './RatafiaResultPageProps.types'

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

@@ -7,6 +7,8 @@ export * from './KeyFactsResultRatafiaPage';
 export * from './LegalPage';
 export * from './LimitReachedRatafiaPage';
 export * from './RatafiaLandingPage';
+export * from './RatafiaPricingPage';
+export * from './RatafiaResultPage';
 export * from './UnsubscribePage';
 export * from './LoginRatafiaPage';
-export * from './RatafiaPricingPage';
+export * from './PricingPage';

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

@@ -7,6 +7,8 @@ export * from './KeyFactsResultRatafiaPage';
 export * from './LegalPage';
 export * from './LimitReachedRatafiaPage';
 export * from './RatafiaLandingPage';
+export * from './RatafiaPricingPage';
+export * from './RatafiaResultPage';
 export * from './UnsubscribePage';
 export * from './LoginRatafiaPage';
-export * from './RatafiaPricingPage';
+export * from './PricingPage';

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

@@ -7,6 +7,8 @@ export * from './KeyFactsResultRatafiaPage'
 export * from './LegalPage'
 export * from './LimitReachedRatafiaPage'
 export * from './RatafiaLandingPage'
+export * from './RatafiaPricingPage'
+export * from './RatafiaResultPage'
 export * from './UnsubscribePage'
 export * from './LoginRatafiaPage'
-export * from './RatafiaPricingPage'
+export * from './PricingPage'

package/dist/src/components/sections/AppHeader/AppHeader.d.ts

@@ -0,0 +1,4 @@
+import { AppHeaderProps } from './AppHeaderProps';
+import React from 'react';
+import './AppHeader.scss';
+export declare const AppHeader: React.FC<AppHeaderProps>;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppHeaderStyled, AppHeaderWrapper } from './AppHeader.styled';
+import { DesktopMenu, MobileMenu } from '../../organisms';
+import { Logo } from '../../atoms';
+import './AppHeader.scss';
+export const AppHeader = ({ siteName = 'LawDistrict', homeUrl = '/', sitePhone, scheduleText, headerFullWidth, menuList, toggleMenuHelpOpen, toggleMenuPersonalOpen, isHelpActive, isPersonalActive, userActions, helpTriggerImage, userTriggerImage, handleClickLogo, headerClassnames, closeText = 'Close', showTopBar }) => {
+    return (_jsx(AppHeaderStyled, { className: headerClassnames, children: _jsxs(AppHeaderWrapper, { itemScope: true, itemType: 'https://schema.org/Brand', className: `${headerFullWidth ? '--no-grid' : 'wrapper'}`, children: [_jsx("a", { className: 'header__logo', onClick: (event) => handleClickLogo(event, homeUrl), href: homeUrl, children: _jsx(Logo, { siteName: siteName, width: '188', height: '32' }) }), _jsx(DesktopMenu, { phoneNumber: sitePhone, menuList: menuList, userActions: userActions, homeUrl: homeUrl }), _jsx(MobileMenu, { closeText: closeText, helpTriggerImage: helpTriggerImage, isHelpActive: isHelpActive, isPersonalActive: isPersonalActive, toggleMenuHelpOpen: toggleMenuHelpOpen, toggleMenuPersonalOpen: toggleMenuPersonalOpen, userTriggerImage: userTriggerImage, homeUrl: homeUrl, menuList: menuList, scheduleText: scheduleText, sitePhone: sitePhone, userActions: userActions, showTopBar: showTopBar })] }) }));
+};

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

@@ -0,0 +1,35 @@
+.navigation-pane__user-menu {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .login-button {
+    margin-right: 1rem;
+  }
+  .navigation-pane__user-name {
+    margin-right: 1rem;
+    font-weight: bold;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 6rem;
+  }
+
+  .longer-text {
+    width: 11rem;
+    margin-right: 1.5rem;
+    padding: 0.5rem 1.5rem 0.5rem 0.5rem;
+    color: var(--button-hover);
+  }
+
+  .go-to-dashboard-button,
+  .go-to-free-account-button {
+    background-color: transparent;
+
+    &:hover {
+      background-color: #e4f8f3;
+    }
+  }
+  .navigation-pane__button {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,2 @@
+export declare const AppHeaderStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const AppHeaderWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

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

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+export const AppHeaderStyled = styled.header `
+  background-color: var(--others-white);
+  position: sticky;
+  z-index: 999;
+  &.product-header-background {
+    background-color: var(--secondary-main-light-4);
+  }
+
+  &.create-password-header-background {
+    background-color: var(--neutral-neutral-6);
+  }
+
+  &.payment-details-header-background {
+    background-color: var(--neutral-neutral-6);
+  }
+
+  &.payment-header-background-8814 {
+    background-color: var(--primary-main-light-5);
+  }
+
+  &.transparent-header-background {
+    background-color: transparent;
+  }
+
+  &.form-header-background {
+    background-color: var(--others-white);
+  }
+`;
+export const AppHeaderWrapper = styled.span `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem 1rem 1.5rem;
+`;

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

@@ -0,0 +1,36 @@
+import styled from 'styled-components'
+
+export const AppHeaderStyled = styled.header`
+  background-color: var(--others-white);
+  position: sticky;
+  z-index: 999;
+  &.product-header-background {
+    background-color: var(--secondary-main-light-4);
+  }
+
+  &.create-password-header-background {
+    background-color: var(--neutral-neutral-6);
+  }
+
+  &.payment-details-header-background {
+    background-color: var(--neutral-neutral-6);
+  }
+
+  &.payment-header-background-8814 {
+    background-color: var(--primary-main-light-5);
+  }
+
+  &.transparent-header-background {
+    background-color: transparent;
+  }
+
+  &.form-header-background {
+    background-color: var(--others-white);
+  }
+`
+export const AppHeaderWrapper = styled.span`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem 1rem 1.5rem;
+`

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

@@ -0,0 +1,58 @@
+import { AppHeaderStyled, AppHeaderWrapper } from './AppHeader.styled'
+import { DesktopMenu, MobileMenu } from '../../organisms'
+import { AppHeaderProps } from './AppHeaderProps'
+import { Logo } from '../../atoms'
+import React from 'react'
+import './AppHeader.scss'
+
+export const AppHeader: React.FC<AppHeaderProps> = ({
+  siteName = 'LawDistrict',
+  homeUrl = '/',
+  sitePhone,
+  scheduleText,
+  headerFullWidth,
+  menuList,
+  toggleMenuHelpOpen,
+  toggleMenuPersonalOpen,
+  isHelpActive,
+  isPersonalActive,
+  userActions,
+  helpTriggerImage,
+  userTriggerImage,
+  handleClickLogo,
+  headerClassnames,
+  closeText = 'Close',
+  showTopBar
+}) => {
+  return (
+    <AppHeaderStyled className={headerClassnames}>
+      <AppHeaderWrapper
+        itemScope
+        itemType='https://schema.org/Brand'
+        className={`${headerFullWidth ? '--no-grid' : 'wrapper'}`}
+      >
+        <a className='header__logo' onClick={(event) => handleClickLogo(event, homeUrl)} href={homeUrl}>
+          <Logo siteName={siteName} width='188' height='32' />
+        </a>
+
+        <DesktopMenu phoneNumber={sitePhone} menuList={menuList} userActions={userActions} homeUrl={homeUrl} />
+
+        <MobileMenu
+          closeText={closeText}
+          helpTriggerImage={helpTriggerImage}
+          isHelpActive={isHelpActive}
+          isPersonalActive={isPersonalActive}
+          toggleMenuHelpOpen={toggleMenuHelpOpen}
+          toggleMenuPersonalOpen={toggleMenuPersonalOpen}
+          userTriggerImage={userTriggerImage}
+          homeUrl={homeUrl}
+          menuList={menuList}
+          scheduleText={scheduleText}
+          sitePhone={sitePhone}
+          userActions={userActions}
+          showTopBar={showTopBar}
+        />
+      </AppHeaderWrapper>
+    </AppHeaderStyled>
+  )
+}

package/dist/src/components/sections/AppHeader/AppHeaderProps.d.ts

@@ -0,0 +1,26 @@
+export interface MenuListItem {
+    title: string;
+    url: string;
+}
+export interface AppHeaderProps {
+    siteName: string;
+    homeUrl: string;
+    sitePhone: string;
+    scheduleText: string;
+    headerFullWidth: boolean;
+    menuList?: {
+        title: string;
+        items: MenuListItem[];
+    };
+    toggleMenuHelpOpen: () => void;
+    toggleMenuPersonalOpen: () => void;
+    isHelpActive: boolean;
+    isPersonalActive: boolean;
+    userActions: React.ReactNode;
+    helpTriggerImage: string;
+    userTriggerImage: string;
+    handleClickLogo: (event: React.MouseEvent<HTMLElement>, url: string) => void;
+    headerClassnames: string;
+    closeText: string;
+    showTopBar?: boolean;
+}

package/dist/src/components/sections/AppHeader/AppHeaderProps.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/sections/AppHeader/AppHeaderProps.ts

@@ -0,0 +1,27 @@
+export interface MenuListItem {
+  title: string
+  url: string
+}
+
+export interface AppHeaderProps {
+  siteName: string
+  homeUrl: string
+  sitePhone: string
+  scheduleText: string
+  headerFullWidth: boolean
+  menuList?: {
+    title: string
+    items: MenuListItem[]
+  }
+  toggleMenuHelpOpen: () => void
+  toggleMenuPersonalOpen: () => void
+  isHelpActive: boolean
+  isPersonalActive: boolean
+  userActions: React.ReactNode
+  helpTriggerImage: string
+  userTriggerImage: string
+  handleClickLogo: (event: React.MouseEvent<HTMLElement>, url: string) => void
+  headerClassnames: string
+  closeText: string
+  showTopBar?: boolean
+}

package/dist/src/components/sections/AppHeader/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AppHeader';
+export * from './AppHeaderProps';

package/dist/src/components/sections/AppHeader/index.js

@@ -0,0 +1,2 @@
+export * from './AppHeader';
+export * from './AppHeaderProps';

package/dist/src/components/sections/AppHeader/index.ts

@@ -0,0 +1,2 @@
+export * from './AppHeader'
+export * from './AppHeaderProps'

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

@@ -2,35 +2,28 @@ 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);
-  padding: 0 1.5rem;
+  background-color: var(--neutral-neutral-6);
+  padding: 2rem 1.5rem;
 
-  @media ${device.laptop} {
-    margin-top: 12rem;
+  @media ${device['landscape-tablets']} {
+    padding: 3rem 1.5rem;
   }
 
   .as-seen-in-section {
     display: flex;
     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);
+      color: var(--neutral-neutral-1);
       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;
       letter-spacing: -0.3px;
-      margin: 1rem 0;
+      margin: 0rem 0 1.5rem 0;
     }
   }
 `;