@npm_leadtech/legal-lib-components 5.65.2 → 5.66.0

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

@@ -7,6 +7,56 @@ export const TryOurFreeLegalBlogsContentStyled = styled.div`
   @media ${device['landscape-tablets']} {
     flex-direction: row;
   }
+
+  &.try-our-free-legal-blogs-section-content--our-mission {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    align-items: center;
+    @media ${device['landscape-tablets']} {
+      margin-top: 3rem;
+    }
+
+    .try-our-free-legal-blogs-section__texts {
+      margin-bottom: 2rem;
+      @media ${device['landscape-tablets']} {
+        margin-bottom: 1rem;
+      }
+
+      &__title {
+        font-family: var(--font-sans);
+        font-size: 28px;
+        font-weight: 700;
+        text-align: left;
+      }
+    }
+  }
+
+  &.try-our-free-legal-blogs-section-content--our-mission-first-image {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    align-items: center;
+    @media ${device['landscape-tablets']} {
+      margin-bottom: 3rem;
+      flex-direction: row-reverse;
+    }
+
+    .try-our-free-legal-blogs-section__texts {
+      margin-bottom: 2rem;
+      @media ${device['landscape-tablets']} {
+        margin-bottom: 1rem;
+        margin-right: 0rem;
+        margin-left: 3rem;
+      }
+
+      &__title {
+        font-family: var(--font-sans);
+        font-size: 28px;
+        font-weight: 700;
+        text-align: left;
+      }
+    }
+  }
+
   .try-our-free-legal-blogs-section__texts {
     flex-basis: 50%;
     display: flex;

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

@@ -1,12 +1,27 @@
 import React, { type FC } from 'react'
 
+import {
+  type TryOurFreeLegalBlogsContentProps,
+  TryOurFreeLegalBlogsContentType
+} from './TryOurFreeLegalBlogsContentProps.types'
 import { RichTextInner } from '../../atoms'
-import { type TryOurFreeLegalBlogsContentProps } from './TryOurFreeLegalBlogsContentProps.types'
 import { TryOurFreeLegalBlogsContentStyled } from './TryOurFreeLegalBlogsContent.styled'
+import classNames from 'classnames'
 
-const TryOurFreeLegalBlogsContent: FC<TryOurFreeLegalBlogsContentProps> = ({ title, image, children }) => {
+const TryOurFreeLegalBlogsContent: FC<TryOurFreeLegalBlogsContentProps> = ({
+  title,
+  image,
+  children,
+  type = TryOurFreeLegalBlogsContentType.default
+}) => {
+  const classTry = classNames({
+    'try-our-free-legal-blogs-section-content': true,
+    'try-our-free-legal-blogs-section-content--our-mission': TryOurFreeLegalBlogsContentType.ourMission === type,
+    'try-our-free-legal-blogs-section-content--our-mission-first-image':
+      TryOurFreeLegalBlogsContentType.ourMissionFirstImage === type
+  })
   return (
-    <TryOurFreeLegalBlogsContentStyled>
+    <TryOurFreeLegalBlogsContentStyled className={classTry}>
       <div className='try-our-free-legal-blogs-section__texts'>
         <h2 className='try-our-free-legal-blogs-section__texts__title'>{title}</h2>
         <RichTextInner customClass='try-our-free-legal-blogs-section__texts__body'>{children}</RichTextInner>

package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContentProps.types.d.ts

@@ -1,5 +1,11 @@
+export declare enum TryOurFreeLegalBlogsContentType {
+    default = "Default",
+    ourMission = "Our Mission",
+    ourMissionFirstImage = "Our Mission First Image"
+}
 export interface TryOurFreeLegalBlogsContentProps {
     title: string;
     image: React.ReactNode;
     children: React.ReactNode;
+    type?: TryOurFreeLegalBlogsContentType;
 }

package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContentProps.types.js

@@ -1 +1,6 @@
-export {};
+export var TryOurFreeLegalBlogsContentType;
+(function (TryOurFreeLegalBlogsContentType) {
+    TryOurFreeLegalBlogsContentType["default"] = "Default";
+    TryOurFreeLegalBlogsContentType["ourMission"] = "Our Mission";
+    TryOurFreeLegalBlogsContentType["ourMissionFirstImage"] = "Our Mission First Image";
+})(TryOurFreeLegalBlogsContentType || (TryOurFreeLegalBlogsContentType = {}));

package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContentProps.types.ts

@@ -1,5 +1,12 @@
+export enum TryOurFreeLegalBlogsContentType {
+  default = 'Default',
+  ourMission = 'Our Mission',
+  ourMissionFirstImage = 'Our Mission First Image'
+}
+
 export interface TryOurFreeLegalBlogsContentProps {
   title: string
   image: React.ReactNode
   children: React.ReactNode
+  type?: TryOurFreeLegalBlogsContentType
 }

package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/index.d.ts

@@ -1,2 +1,2 @@
 export { default as TryOurFreeLegalBlogsContent } from './TryOurFreeLegalBlogsContent';
-export { type TryOurFreeLegalBlogsContentProps } from './TryOurFreeLegalBlogsContentProps.types';
+export { TryOurFreeLegalBlogsContentType, type TryOurFreeLegalBlogsContentProps } from './TryOurFreeLegalBlogsContentProps.types';

package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/index.js

@@ -1 +1,2 @@
 export { default as TryOurFreeLegalBlogsContent } from './TryOurFreeLegalBlogsContent';
+export { TryOurFreeLegalBlogsContentType } from './TryOurFreeLegalBlogsContentProps.types';

package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/index.ts

@@ -1,2 +1,5 @@
 export { default as TryOurFreeLegalBlogsContent } from './TryOurFreeLegalBlogsContent'
-export { type TryOurFreeLegalBlogsContentProps } from './TryOurFreeLegalBlogsContentProps.types'
+export {
+  TryOurFreeLegalBlogsContentType,
+  type TryOurFreeLegalBlogsContentProps
+} from './TryOurFreeLegalBlogsContentProps.types'

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 } 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 })] }));
+import { AboutUsSection, AsSeeInSection, CardStorySection, ExpertsSection, GuidelinesSection, PeopleSayAboutUsSection, TryOurFreeLegalBlogsSection } from '../../sections';
+export const AboutUsPage = ({ aboutUsSectionProps, ourMissionBlogsSectionProps, ourCoreValuesBlogsSectionProps, cardStorySection, 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 }), 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

@@ -3,6 +3,7 @@ import React from 'react'
 import {
   AboutUsSection,
   AsSeeInSection,
+  CardStorySection,
   ExpertsSection,
   GuidelinesSection,
   PeopleSayAboutUsSection,
@@ -12,7 +13,9 @@ import { type AboutUsPageProps } from './AboutUsPageProps'
 
 export const AboutUsPage: React.FC<AboutUsPageProps> = ({
   aboutUsSectionProps,
-  tryOurFreeLegalBlogsSectionProps,
+  ourMissionBlogsSectionProps,
+  ourCoreValuesBlogsSectionProps,
+  cardStorySection,
   peopleSayAboutUsSectionProps,
   guidelinesSectionProps,
   expertsSectionProps,
@@ -22,9 +25,9 @@ export const AboutUsPage: React.FC<AboutUsPageProps> = ({
   return (
     <>
       {aboutUsSectionProps != null && <AboutUsSection {...aboutUsSectionProps} />}
-      {tryOurFreeLegalBlogsSectionProps != null && (
-        <TryOurFreeLegalBlogsSection {...tryOurFreeLegalBlogsSectionProps} />
-      )}
+      {ourMissionBlogsSectionProps != null && <TryOurFreeLegalBlogsSection {...ourMissionBlogsSectionProps} />}
+      {ourCoreValuesBlogsSectionProps != null && <TryOurFreeLegalBlogsSection {...ourCoreValuesBlogsSectionProps} />}
+      {cardStorySection != null && <CardStorySection {...cardStorySection} />}
       {guidelinesSectionProps != null && (
         <GuidelinesSection {...guidelinesSectionProps}>
           {guidelinesSectionProps.contentGuidelines?.children}

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

@@ -1,7 +1,9 @@
-import type { AboutUsSectionProps, AsSeeInSectionProps, ExpertsSectionProps, GuidelinesSectionProps, PeopleSayAboutUsSectionProps, TryOurFreeLegalBlogsSectionProps, TryUsSectionProps } from '../../sections';
+import type { AboutUsSectionProps, AsSeeInSectionProps, CardStorySectionProps, ExpertsSectionProps, GuidelinesSectionProps, PeopleSayAboutUsSectionProps, TryOurFreeLegalBlogsSectionProps, TryUsSectionProps } from '../../sections';
 export interface AboutUsPageProps {
     aboutUsSectionProps?: AboutUsSectionProps;
-    tryOurFreeLegalBlogsSectionProps?: TryOurFreeLegalBlogsSectionProps;
+    ourMissionBlogsSectionProps?: TryOurFreeLegalBlogsSectionProps;
+    ourCoreValuesBlogsSectionProps?: TryOurFreeLegalBlogsSectionProps;
+    cardStorySection?: CardStorySectionProps;
     peopleSayAboutUsSectionProps?: PeopleSayAboutUsSectionProps;
     guidelinesSectionProps?: GuidelinesSectionProps;
     tryUsSectionProps?: TryUsSectionProps;

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

@@ -1,6 +1,7 @@
 import type {
   AboutUsSectionProps,
   AsSeeInSectionProps,
+  CardStorySectionProps,
   ExpertsSectionProps,
   GuidelinesSectionProps,
   PeopleSayAboutUsSectionProps,
@@ -10,7 +11,9 @@ import type {
 
 export interface AboutUsPageProps {
   aboutUsSectionProps?: AboutUsSectionProps
-  tryOurFreeLegalBlogsSectionProps?: TryOurFreeLegalBlogsSectionProps
+  ourMissionBlogsSectionProps?: TryOurFreeLegalBlogsSectionProps
+  ourCoreValuesBlogsSectionProps?: TryOurFreeLegalBlogsSectionProps
+  cardStorySection?: CardStorySectionProps
   peopleSayAboutUsSectionProps?: PeopleSayAboutUsSectionProps
   guidelinesSectionProps?: GuidelinesSectionProps
   tryUsSectionProps?: TryUsSectionProps

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

@@ -3,10 +3,10 @@ import styled from 'styled-components';
 export const AboutUsSectionStyled = styled.div `
   padding-top: 1.125rem;
   background: var(--primary-main-light-6);
-  margin-bottom: 3rem;
+  padding-bottom: 2rem;
 
-  @media ${device.laptop} {
-    margin-bottom: 5rem;
+  @media ${device['landscape-tablets']} {
+    padding-bottom: 4rem;
   }
 
   .about-us-section {
@@ -26,9 +26,10 @@ export const AboutUsSectionStyled = styled.div `
     }
 
     &__sub-title {
-      margin-bottom: 1.5rem;
+      margin-bottom: 2rem;
+      margin-top: 2rem;
       text-align: center;
-      font-size: 2rem;
+      font-size: 1.75rem;
       line-height: 1.2;
       letter-spacing: -0.4px;
       font-weight: 400;
@@ -36,17 +37,12 @@ export const AboutUsSectionStyled = styled.div `
       color: var(--neutral-neutral-1);
 
       @media ${device['landscape-tablets']} {
-        font-size: 2.3rem;
-        max-width: $sm;
-        margin: 0 auto 2rem auto;
-      }
-
-      @media ${device.desktop} {
-        max-width: 792px;
+        font-size: 2rem;
+        margin: 3rem auto 3rem auto;
       }
 
       @media ${device.laptop} {
-        font-size: 3rem;
+        font-size: 2.25rem;
       }
     }
   }

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

@@ -4,10 +4,10 @@ import styled from 'styled-components'
 export const AboutUsSectionStyled = styled.div`
   padding-top: 1.125rem;
   background: var(--primary-main-light-6);
-  margin-bottom: 3rem;
+  padding-bottom: 2rem;
 
-  @media ${device.laptop} {
-    margin-bottom: 5rem;
+  @media ${device['landscape-tablets']} {
+    padding-bottom: 4rem;
   }
 
   .about-us-section {
@@ -27,9 +27,10 @@ export const AboutUsSectionStyled = styled.div`
     }
 
     &__sub-title {
-      margin-bottom: 1.5rem;
+      margin-bottom: 2rem;
+      margin-top: 2rem;
       text-align: center;
-      font-size: 2rem;
+      font-size: 1.75rem;
       line-height: 1.2;
       letter-spacing: -0.4px;
       font-weight: 400;
@@ -37,17 +38,12 @@ export const AboutUsSectionStyled = styled.div`
       color: var(--neutral-neutral-1);
 
       @media ${device['landscape-tablets']} {
-        font-size: 2.3rem;
-        max-width: $sm;
-        margin: 0 auto 2rem auto;
-      }
-
-      @media ${device.desktop} {
-        max-width: 792px;
+        font-size: 2rem;
+        margin: 3rem auto 3rem auto;
       }
 
       @media ${device.laptop} {
-        font-size: 3rem;
+        font-size: 2.25rem;
       }
     }
   }

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

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

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardStory } from '../../molecules/CardStory';
+import { CardStorySectionStyled } from './CardStorySection.styled';
+const CardStorySection = ({ title, text, cardStory }) => {
+    return (_jsx(CardStorySectionStyled, { className: 'card-story-section', children: _jsxs("div", { className: 'wrapper card-story-section__content', children: [_jsx("h2", { className: 'card-story-section__title', children: title }), _jsx("div", { className: 'card-story-section__text', children: text }), _jsx(CardStory, { cardStoryItems: cardStory.cardStoryItems })] }) }));
+};
+export default CardStorySection;

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

@@ -0,0 +1 @@
+export declare const CardStorySectionStyled: 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/sections/CardStorySection/CardStorySection.styled.js

@@ -0,0 +1,42 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const CardStorySectionStyled = styled.div `
+  padding: 1.5rem;
+  background: var(--secondary-main-light-4);
+
+  .card-story-section {
+    &__title {
+      font-weight: 700;
+      font-size: 1.8rem;
+      color: var(--neutral-neutral-1);
+      font-family: var(--font-sans);
+      padding-bottom: 1.5rem;
+    }
+    &__text {
+      font-size: 1rem;
+      color: var(--neutral-neutral-1);
+      font-family: var(--font-sans);
+      padding-bottom: 0.5rem;
+    }
+    &__content {
+      border-radius: var(--l-border-radius);
+      background: var(--others-white);
+      padding: 1.5rem;
+    }
+  }
+
+  @media ${device['landscape-tablets']} {
+    padding: 3rem 1.5rem 3rem 1.5rem;
+
+    .card-story-section {
+      &__title {
+      }
+      &__text {
+        padding-bottom: 1.5rem;
+      }
+      &__content {
+        padding: 3rem;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,43 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const CardStorySectionStyled = styled.div`
+  padding: 1.5rem;
+  background: var(--secondary-main-light-4);
+
+  .card-story-section {
+    &__title {
+      font-weight: 700;
+      font-size: 1.8rem;
+      color: var(--neutral-neutral-1);
+      font-family: var(--font-sans);
+      padding-bottom: 1.5rem;
+    }
+    &__text {
+      font-size: 1rem;
+      color: var(--neutral-neutral-1);
+      font-family: var(--font-sans);
+      padding-bottom: 0.5rem;
+    }
+    &__content {
+      border-radius: var(--l-border-radius);
+      background: var(--others-white);
+      padding: 1.5rem;
+    }
+  }
+
+  @media ${device['landscape-tablets']} {
+    padding: 3rem 1.5rem 3rem 1.5rem;
+
+    .card-story-section {
+      &__title {
+      }
+      &__text {
+        padding-bottom: 1.5rem;
+      }
+      &__content {
+        padding: 3rem;
+      }
+    }
+  }
+`

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

@@ -0,0 +1,19 @@
+import React, { type FC } from 'react'
+
+import { CardStory } from '../../molecules/CardStory'
+import { CardStorySectionProps } from './CardStorySectionProps.types'
+import { CardStorySectionStyled } from './CardStorySection.styled'
+
+const CardStorySection: FC<CardStorySectionProps> = ({ title, text, cardStory }) => {
+  return (
+    <CardStorySectionStyled className='card-story-section'>
+      <div className='wrapper card-story-section__content'>
+        <h2 className='card-story-section__title'>{title}</h2>
+        <div className='card-story-section__text'>{text}</div>
+        <CardStory cardStoryItems={cardStory.cardStoryItems} />
+      </div>
+    </CardStorySectionStyled>
+  )
+}
+
+export default CardStorySection

package/dist/src/components/sections/CardStorySection/CardStorySectionProps.types.d.ts

@@ -0,0 +1,7 @@
+import { CardStoryProps } from 'src/components/molecules/CardStory';
+import React from 'react';
+export interface CardStorySectionProps {
+    title: string;
+    text: React.JSX.Element;
+    cardStory: CardStoryProps;
+}

package/dist/src/components/sections/CardStorySection/CardStorySectionProps.types.js

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

package/dist/src/components/sections/CardStorySection/CardStorySectionProps.types.ts

@@ -0,0 +1,8 @@
+import { CardStoryProps } from 'src/components/molecules/CardStory'
+import React from 'react'
+
+export interface CardStorySectionProps {
+  title: string
+  text: React.JSX.Element
+  cardStory: CardStoryProps
+}

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

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

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

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

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

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

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

@@ -6,5 +6,4 @@ export const GuidelinesSectionStyled = styled.section `
   background: var(--neutral-neutral-6);
   padding-top: 2rem;
   padding-bottom: 2rem;
-  margin-top: 3rem;
 `;

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

@@ -7,5 +7,4 @@ export const GuidelinesSectionStyled = styled.section`
   background: var(--neutral-neutral-6);
   padding-top: 2rem;
   padding-bottom: 2rem;
-  margin-top: 3rem;
 `

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

@@ -3,11 +3,11 @@ import { StepsRatafiaContent } from '../../organisms';
 import { StepsRatafiaSectionStyled } from './StepsRatafiaSection.styled';
 import { Video } from '../../atoms';
 import classNames from 'classnames';
-const StepsRatafiaSection = ({ title, steps, videoUrl, mainImage, description, videoPosterUrl }) => {
+const StepsRatafiaSection = ({ title, steps, videoUrl, mainImage, description }) => {
     const isEsignatureLanding = !videoUrl;
     const classnames = classNames({
         '--is-esignature': isEsignatureLanding
     });
-    return (_jsx(StepsRatafiaSectionStyled, { className: 'steps-ratafia-section', children: _jsxs("div", { className: `steps-ratafia-section__wrapper ${classnames}`, children: [!isEsignatureLanding ? (_jsx("div", { className: 'steps-ratafia-section__wrapper__video', children: _jsx(Video, { videoSrcURL: videoUrl, preload: 'none', poster: videoPosterUrl }) })) : (_jsx("div", { className: 'steps-ratafia-section__wrapper__image', children: mainImage })), _jsx("div", { className: 'steps-ratafia-section__wrapper__content', children: _jsx(StepsRatafiaContent, { title: title, steps: steps, description: description }) })] }) }));
+    return (_jsx(StepsRatafiaSectionStyled, { className: 'steps-ratafia-section', children: _jsxs("div", { className: `steps-ratafia-section__wrapper ${classnames}`, children: [!isEsignatureLanding ? (_jsx("div", { className: 'steps-ratafia-section__wrapper__video', children: _jsx(Video, { videoSrcURL: videoUrl, autoPlay: true, loop: true }) })) : (_jsx("div", { className: 'steps-ratafia-section__wrapper__image', children: mainImage })), _jsx("div", { className: 'steps-ratafia-section__wrapper__content', children: _jsx(StepsRatafiaContent, { title: title, steps: steps, description: description }) })] }) }));
 };
 export default StepsRatafiaSection;

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

@@ -6,14 +6,7 @@ import { StepsRatafiaSectionStyled } from './StepsRatafiaSection.styled'
 import { Video } from '../../atoms'
 import classNames from 'classnames'
 
-const StepsRatafiaSection: FC<StepsRatafiaSectionProps> = ({
-  title,
-  steps,
-  videoUrl,
-  mainImage,
-  description,
-  videoPosterUrl
-}) => {
+const StepsRatafiaSection: FC<StepsRatafiaSectionProps> = ({ title, steps, videoUrl, mainImage, description }) => {
   const isEsignatureLanding = !videoUrl
   const classnames = classNames({
     '--is-esignature': isEsignatureLanding
@@ -24,7 +17,7 @@ const StepsRatafiaSection: FC<StepsRatafiaSectionProps> = ({
       <div className={`steps-ratafia-section__wrapper ${classnames}`}>
         {!isEsignatureLanding ? (
           <div className='steps-ratafia-section__wrapper__video'>
-            <Video videoSrcURL={videoUrl} preload='none' poster={videoPosterUrl} />
+            <Video videoSrcURL={videoUrl} autoPlay loop />
           </div>
         ) : (
           <div className='steps-ratafia-section__wrapper__image'>{mainImage}</div>

package/dist/src/components/sections/StepsRatafiaSection/StepsRatafiaSectionProps.types.d.ts

@@ -6,5 +6,4 @@ export interface StepsRatafiaSectionProps {
     videoUrl: string;
     mainImage?: React.ReactNode;
     description?: React.ReactNode;
-    videoPosterUrl?: string;
 }

package/dist/src/components/sections/StepsRatafiaSection/StepsRatafiaSectionProps.types.ts

@@ -7,5 +7,4 @@ export interface StepsRatafiaSectionProps {
   videoUrl: string
   mainImage?: React.ReactNode
   description?: React.ReactNode
-  videoPosterUrl?: string
 }

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

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { TryOurFreeLegalBlogsContent } from '../../organisms/TryOurFreeLegalBlogsContent';
 import { TryOurFreeLegalBlogsSectionStyled } from './TryOurFreeLegalBlogsSection.styled';
 const TryOurFreeLegalBlogsSection = ({ contentTryOurFreeLegalBlogs }) => {
-    return (_jsx(TryOurFreeLegalBlogsSectionStyled, { className: 'try-our-free-legal-blogs-section wrapper wrapper--responsive', children: _jsx(TryOurFreeLegalBlogsContent, { title: contentTryOurFreeLegalBlogs.title, image: contentTryOurFreeLegalBlogs.image, children: contentTryOurFreeLegalBlogs.children }) }));
+    return (_jsx(TryOurFreeLegalBlogsSectionStyled, { className: 'try-our-free-legal-blogs-section wrapper wrapper--responsive', children: _jsx(TryOurFreeLegalBlogsContent, { title: contentTryOurFreeLegalBlogs.title, image: contentTryOurFreeLegalBlogs.image, type: contentTryOurFreeLegalBlogs.type, children: contentTryOurFreeLegalBlogs.children }) }));
 };
 export default TryOurFreeLegalBlogsSection;

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

@@ -7,7 +7,11 @@ import { TryOurFreeLegalBlogsSectionStyled } from './TryOurFreeLegalBlogsSection
 const TryOurFreeLegalBlogsSection: FC<TryOurFreeLegalBlogsSectionProps> = ({ contentTryOurFreeLegalBlogs }) => {
   return (
     <TryOurFreeLegalBlogsSectionStyled className='try-our-free-legal-blogs-section wrapper wrapper--responsive'>
-      <TryOurFreeLegalBlogsContent title={contentTryOurFreeLegalBlogs.title} image={contentTryOurFreeLegalBlogs.image}>
+      <TryOurFreeLegalBlogsContent
+        title={contentTryOurFreeLegalBlogs.title}
+        image={contentTryOurFreeLegalBlogs.image}
+        type={contentTryOurFreeLegalBlogs.type}
+      >
         {contentTryOurFreeLegalBlogs.children}
       </TryOurFreeLegalBlogsContent>
     </TryOurFreeLegalBlogsSectionStyled>

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

@@ -23,3 +23,4 @@ export * from './TryUsSection';
 export * from './UnsubscribeSection';
 export * from './WhyLawDistrictSection';
 export * from './LearnMoreSection';
+export * from './CardStorySection';

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

@@ -23,3 +23,4 @@ export * from './TryUsSection';
 export * from './UnsubscribeSection';
 export * from './WhyLawDistrictSection';
 export * from './LearnMoreSection';
+export * from './CardStorySection';

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

@@ -23,3 +23,4 @@ export * from './TryUsSection'
 export * from './UnsubscribeSection'
 export * from './WhyLawDistrictSection'
 export * from './LearnMoreSection'
+export * from './CardStorySection'