@npm_leadtech/legal-lib-components 7.42.2 → 7.43.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/styles.css +3 -0
- package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCard.d.ts +3 -0
- package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCard.js +5 -0
- package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCard.styled.d.ts +1 -0
- package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCard.styled.js +46 -0
- package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCard.styled.ts +47 -0
- package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCard.tsx +20 -0
- package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCardProps.d.ts +5 -0
- package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCardProps.js +1 -0
- package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCardProps.ts +5 -0
- package/dist/src/components/molecules/LawGeniusInfoCard/index.d.ts +2 -0
- package/dist/src/components/molecules/LawGeniusInfoCard/index.js +2 -0
- package/dist/src/components/molecules/LawGeniusInfoCard/index.ts +2 -0
- package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.js +2 -2
- package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.styled.d.ts +1 -6
- package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.styled.js +121 -231
- package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.styled.ts +119 -238
- package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.tsx +5 -5
- package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCardProps.types.d.ts +0 -2
- package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCardProps.types.ts +0 -3
- package/dist/src/components/molecules/SubtypeDocumentCard/index.d.ts +1 -1
- package/dist/src/components/molecules/SubtypeDocumentCard/index.ts +1 -1
- package/dist/src/components/molecules/TextInput/Input.d.ts +1 -1
- package/dist/src/components/molecules/TextInput/Input.js +2 -1
- package/dist/src/components/molecules/TextInput/Input.tsx +3 -2
- package/dist/src/components/molecules/TextInput/TextInput.scss +4 -0
- package/dist/src/components/molecules/TextInput/TextInputProps.types.d.ts +1 -1
- package/dist/src/components/molecules/TextInput/TextInputProps.types.ts +1 -1
- package/dist/src/components/molecules/TextInput/stories/TextInput.stories.tsx +10 -0
- package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContent.js +5 -2
- package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContent.styled.js +35 -2
- package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContent.styled.ts +35 -2
- package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContent.tsx +7 -2
- package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContentProps.types.d.ts +4 -1
- package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContentProps.types.js +2 -0
- package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContentProps.types.ts +4 -1
- package/dist/src/components/pages/HowItWorksPage/HowItWorksPage.d.ts +3 -0
- package/dist/src/components/pages/HowItWorksPage/HowItWorksPage.js +5 -0
- package/dist/src/components/pages/HowItWorksPage/HowItWorksPage.tsx +26 -0
- package/dist/src/components/pages/HowItWorksPage/HowItWorksPageProps.d.ts +10 -0
- package/dist/src/components/pages/HowItWorksPage/HowItWorksPageProps.js +1 -0
- package/dist/src/components/pages/HowItWorksPage/HowItWorksPageProps.ts +16 -0
- package/dist/src/components/pages/HowItWorksPage/index.d.ts +2 -0
- package/dist/src/components/pages/HowItWorksPage/index.js +2 -0
- package/dist/src/components/pages/HowItWorksPage/index.ts +2 -0
- package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSection.d.ts +4 -0
- package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSection.js +12 -0
- package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSection.styled.d.ts +1 -0
- package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSection.styled.js +118 -0
- package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSection.styled.ts +119 -0
- package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSection.tsx +70 -0
- package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSectionProps.types.d.ts +15 -0
- package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSectionProps.types.js +1 -0
- package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSectionProps.types.ts +16 -0
- package/dist/src/components/sections/LawGeniusCardsSection/index.d.ts +2 -0
- package/dist/src/components/sections/LawGeniusCardsSection/index.js +1 -0
- package/dist/src/components/sections/LawGeniusCardsSection/index.ts +2 -0
- package/dist/src/components/sections/TryNowSection/TryNowSection.d.ts +3 -0
- package/dist/src/components/sections/TryNowSection/TryNowSection.js +6 -0
- package/dist/src/components/sections/TryNowSection/TryNowSection.styled.d.ts +1 -0
- package/dist/src/components/sections/TryNowSection/TryNowSection.styled.js +190 -0
- package/dist/src/components/sections/TryNowSection/TryNowSection.styled.ts +191 -0
- package/dist/src/components/sections/TryNowSection/TryNowSection.tsx +27 -0
- package/dist/src/components/sections/TryNowSection/TryNowSectionProps.d.ts +8 -0
- package/dist/src/components/sections/TryNowSection/TryNowSectionProps.js +1 -0
- package/dist/src/components/sections/TryNowSection/TryNowSectionProps.ts +9 -0
- package/dist/src/components/sections/TryNowSection/index.d.ts +2 -0
- package/dist/src/components/sections/TryNowSection/index.js +1 -0
- package/dist/src/components/sections/TryNowSection/index.ts +2 -0
- package/dist/src/components/sections/TryOurFreeLegalBlogsSection/TryOurFreeLegalBlogsSection.js +9 -1
- package/dist/src/components/sections/TryOurFreeLegalBlogsSection/TryOurFreeLegalBlogsSection.styled.js +30 -0
- package/dist/src/components/sections/TryOurFreeLegalBlogsSection/TryOurFreeLegalBlogsSection.styled.ts +30 -0
- package/dist/src/components/sections/TryOurFreeLegalBlogsSection/TryOurFreeLegalBlogsSection.tsx +11 -1
- package/dist/src/components/sections/index.d.ts +3 -0
- package/dist/src/components/sections/index.js +3 -0
- package/dist/src/components/sections/index.ts +3 -0
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +2 -1
|
@@ -8,7 +8,8 @@ export const TryOurFreeLegalBlogsContentStyled = styled.div`
|
|
|
8
8
|
flex-direction: row;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
&.try-our-free-legal-blogs-section-content--our-mission
|
|
11
|
+
&.try-our-free-legal-blogs-section-content--our-mission,
|
|
12
|
+
&.try-our-free-legal-blogs-section-content--how-it-works {
|
|
12
13
|
margin-top: 1.5rem;
|
|
13
14
|
margin-bottom: 1.5rem;
|
|
14
15
|
align-items: center;
|
|
@@ -31,7 +32,8 @@ export const TryOurFreeLegalBlogsContentStyled = styled.div`
|
|
|
31
32
|
}
|
|
32
33
|
}
|
|
33
34
|
|
|
34
|
-
&.try-our-free-legal-blogs-section-content--our-mission-first-image
|
|
35
|
+
&.try-our-free-legal-blogs-section-content--our-mission-first-image,
|
|
36
|
+
&.try-our-free-legal-blogs-section-content--how-it-works-first-image {
|
|
35
37
|
margin-top: 1.5rem;
|
|
36
38
|
margin-bottom: 1.5rem;
|
|
37
39
|
align-items: center;
|
|
@@ -102,4 +104,35 @@ export const TryOurFreeLegalBlogsContentStyled = styled.div`
|
|
|
102
104
|
.try-our-free-legal-blogs-section__image {
|
|
103
105
|
flex-basis: 50%;
|
|
104
106
|
}
|
|
107
|
+
|
|
108
|
+
&.try-our-free-legal-blogs-section-content--image-first-mobile {
|
|
109
|
+
.try-our-free-legal-blogs-section__texts {
|
|
110
|
+
order: 2;
|
|
111
|
+
@media ${device['landscape-tablets']} {
|
|
112
|
+
order: 1;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.try-our-free-legal-blogs-section__image {
|
|
117
|
+
order: 1;
|
|
118
|
+
margin-bottom: 2rem;
|
|
119
|
+
@media ${device['landscape-tablets']} {
|
|
120
|
+
order: 2;
|
|
121
|
+
margin-bottom: 0;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
&.try-our-free-legal-blogs-section-content--how-it-works {
|
|
127
|
+
ul {
|
|
128
|
+
list-style-type: disc;
|
|
129
|
+
padding-left: 1.2rem;
|
|
130
|
+
li {
|
|
131
|
+
margin-bottom: 0;
|
|
132
|
+
a {
|
|
133
|
+
text-decoration: underline;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
}
|
|
105
138
|
`
|
package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContent.tsx
CHANGED
|
@@ -12,13 +12,18 @@ const TryOurFreeLegalBlogsContent: FC<TryOurFreeLegalBlogsContentProps> = ({
|
|
|
12
12
|
title,
|
|
13
13
|
image,
|
|
14
14
|
children,
|
|
15
|
-
type = TryOurFreeLegalBlogsContentType.default
|
|
15
|
+
type = TryOurFreeLegalBlogsContentType.default,
|
|
16
|
+
imageFirstOnMobile = false
|
|
16
17
|
}) => {
|
|
17
18
|
const classTry = classNames({
|
|
18
19
|
'try-our-free-legal-blogs-section-content': true,
|
|
19
20
|
'try-our-free-legal-blogs-section-content--our-mission': TryOurFreeLegalBlogsContentType.ourMission === type,
|
|
20
21
|
'try-our-free-legal-blogs-section-content--our-mission-first-image':
|
|
21
|
-
TryOurFreeLegalBlogsContentType.ourMissionFirstImage === type
|
|
22
|
+
TryOurFreeLegalBlogsContentType.ourMissionFirstImage === type,
|
|
23
|
+
'try-our-free-legal-blogs-section-content--how-it-works': TryOurFreeLegalBlogsContentType.howItWorks === type,
|
|
24
|
+
'try-our-free-legal-blogs-section-content--how-it-works-first-image':
|
|
25
|
+
TryOurFreeLegalBlogsContentType.howItWorksFirstImage === type,
|
|
26
|
+
'try-our-free-legal-blogs-section-content--image-first-mobile': imageFirstOnMobile
|
|
22
27
|
})
|
|
23
28
|
return (
|
|
24
29
|
<TryOurFreeLegalBlogsContentStyled className={classTry}>
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
export declare enum TryOurFreeLegalBlogsContentType {
|
|
2
2
|
default = "Default",
|
|
3
3
|
ourMission = "Our Mission",
|
|
4
|
-
ourMissionFirstImage = "Our Mission First Image"
|
|
4
|
+
ourMissionFirstImage = "Our Mission First Image",
|
|
5
|
+
howItWorks = "How It Works",
|
|
6
|
+
howItWorksFirstImage = "How It Works First Image"
|
|
5
7
|
}
|
|
6
8
|
export interface TryOurFreeLegalBlogsContentProps {
|
|
7
9
|
title: string;
|
|
8
10
|
image: React.ReactNode;
|
|
9
11
|
children: React.ReactNode;
|
|
10
12
|
type?: TryOurFreeLegalBlogsContentType;
|
|
13
|
+
imageFirstOnMobile?: boolean;
|
|
11
14
|
}
|
|
@@ -3,4 +3,6 @@ export var TryOurFreeLegalBlogsContentType;
|
|
|
3
3
|
TryOurFreeLegalBlogsContentType["default"] = "Default";
|
|
4
4
|
TryOurFreeLegalBlogsContentType["ourMission"] = "Our Mission";
|
|
5
5
|
TryOurFreeLegalBlogsContentType["ourMissionFirstImage"] = "Our Mission First Image";
|
|
6
|
+
TryOurFreeLegalBlogsContentType["howItWorks"] = "How It Works";
|
|
7
|
+
TryOurFreeLegalBlogsContentType["howItWorksFirstImage"] = "How It Works First Image";
|
|
6
8
|
})(TryOurFreeLegalBlogsContentType || (TryOurFreeLegalBlogsContentType = {}));
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
export enum TryOurFreeLegalBlogsContentType {
|
|
2
2
|
default = 'Default',
|
|
3
3
|
ourMission = 'Our Mission',
|
|
4
|
-
ourMissionFirstImage = 'Our Mission First Image'
|
|
4
|
+
ourMissionFirstImage = 'Our Mission First Image',
|
|
5
|
+
howItWorks = 'How It Works',
|
|
6
|
+
howItWorksFirstImage = 'How It Works First Image'
|
|
5
7
|
}
|
|
6
8
|
|
|
7
9
|
export interface TryOurFreeLegalBlogsContentProps {
|
|
@@ -9,4 +11,5 @@ export interface TryOurFreeLegalBlogsContentProps {
|
|
|
9
11
|
image: React.ReactNode
|
|
10
12
|
children: React.ReactNode
|
|
11
13
|
type?: TryOurFreeLegalBlogsContentType
|
|
14
|
+
imageFirstOnMobile?: boolean
|
|
12
15
|
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { HeroSection, LawGeniusCardsSection, TryNowSection, TryOurFreeLegalBlogsSection } from '../../sections';
|
|
3
|
+
export const HowItWorksPage = ({ aboutUsSectionProps, howItWorksStep1Props, howItWorksStep2Props, howItWorksStep3Props, howItWorksStep4Props, lawGeniusCardsSectionProps, tryNowSectionProps }) => {
|
|
4
|
+
return (_jsxs(_Fragment, { children: [aboutUsSectionProps != null && _jsx(HeroSection, { ...aboutUsSectionProps }), howItWorksStep1Props != null && _jsx(TryOurFreeLegalBlogsSection, { ...howItWorksStep1Props }), howItWorksStep2Props != null && _jsx(TryOurFreeLegalBlogsSection, { ...howItWorksStep2Props }), howItWorksStep3Props != null && _jsx(TryOurFreeLegalBlogsSection, { ...howItWorksStep3Props }), howItWorksStep4Props != null && _jsx(TryOurFreeLegalBlogsSection, { ...howItWorksStep4Props }), lawGeniusCardsSectionProps != null && _jsx(LawGeniusCardsSection, { ...lawGeniusCardsSectionProps }), tryNowSectionProps != null && _jsx(TryNowSection, { ...tryNowSectionProps })] }));
|
|
5
|
+
};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import { HeroSection, LawGeniusCardsSection, TryNowSection, TryOurFreeLegalBlogsSection } from '../../sections'
|
|
4
|
+
import { type HowItWorksPageProps } from './HowItWorksPageProps'
|
|
5
|
+
|
|
6
|
+
export const HowItWorksPage: React.FC<HowItWorksPageProps> = ({
|
|
7
|
+
aboutUsSectionProps,
|
|
8
|
+
howItWorksStep1Props,
|
|
9
|
+
howItWorksStep2Props,
|
|
10
|
+
howItWorksStep3Props,
|
|
11
|
+
howItWorksStep4Props,
|
|
12
|
+
lawGeniusCardsSectionProps,
|
|
13
|
+
tryNowSectionProps
|
|
14
|
+
}) => {
|
|
15
|
+
return (
|
|
16
|
+
<>
|
|
17
|
+
{aboutUsSectionProps != null && <HeroSection {...aboutUsSectionProps} />}
|
|
18
|
+
{howItWorksStep1Props != null && <TryOurFreeLegalBlogsSection {...howItWorksStep1Props} />}
|
|
19
|
+
{howItWorksStep2Props != null && <TryOurFreeLegalBlogsSection {...howItWorksStep2Props} />}
|
|
20
|
+
{howItWorksStep3Props != null && <TryOurFreeLegalBlogsSection {...howItWorksStep3Props} />}
|
|
21
|
+
{howItWorksStep4Props != null && <TryOurFreeLegalBlogsSection {...howItWorksStep4Props} />}
|
|
22
|
+
{lawGeniusCardsSectionProps != null && <LawGeniusCardsSection {...lawGeniusCardsSectionProps} />}
|
|
23
|
+
{tryNowSectionProps != null && <TryNowSection {...tryNowSectionProps} />}
|
|
24
|
+
</>
|
|
25
|
+
)
|
|
26
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { HeroSectionProps, LawGeniusCardsSectionProps, TryNowSectionProps, TryOurFreeLegalBlogsSectionProps } from '../../sections';
|
|
2
|
+
export interface HowItWorksPageProps {
|
|
3
|
+
aboutUsSectionProps?: HeroSectionProps;
|
|
4
|
+
howItWorksStep1Props?: TryOurFreeLegalBlogsSectionProps;
|
|
5
|
+
howItWorksStep2Props?: TryOurFreeLegalBlogsSectionProps;
|
|
6
|
+
howItWorksStep3Props?: TryOurFreeLegalBlogsSectionProps;
|
|
7
|
+
howItWorksStep4Props?: TryOurFreeLegalBlogsSectionProps;
|
|
8
|
+
lawGeniusCardsSectionProps?: LawGeniusCardsSectionProps;
|
|
9
|
+
tryNowSectionProps?: TryNowSectionProps;
|
|
10
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type {
|
|
2
|
+
HeroSectionProps,
|
|
3
|
+
LawGeniusCardsSectionProps,
|
|
4
|
+
TryNowSectionProps,
|
|
5
|
+
TryOurFreeLegalBlogsSectionProps
|
|
6
|
+
} from '../../sections'
|
|
7
|
+
|
|
8
|
+
export interface HowItWorksPageProps {
|
|
9
|
+
aboutUsSectionProps?: HeroSectionProps
|
|
10
|
+
howItWorksStep1Props?: TryOurFreeLegalBlogsSectionProps
|
|
11
|
+
howItWorksStep2Props?: TryOurFreeLegalBlogsSectionProps
|
|
12
|
+
howItWorksStep3Props?: TryOurFreeLegalBlogsSectionProps
|
|
13
|
+
howItWorksStep4Props?: TryOurFreeLegalBlogsSectionProps
|
|
14
|
+
lawGeniusCardsSectionProps?: LawGeniusCardsSectionProps
|
|
15
|
+
tryNowSectionProps?: TryNowSectionProps
|
|
16
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Button } from '../../atoms';
|
|
3
|
+
import { LawGeniusCardsSectionStyled } from './LawGeniusCardsSection.styled';
|
|
4
|
+
import { LawGeniusInfoCard } from '../../molecules/LawGeniusInfoCard';
|
|
5
|
+
import { useIsMobileOrTable } from '../../../hooks';
|
|
6
|
+
const LawGeniusCardsSection = ({ title, contentTop, contentBottom, card1, card2, card3, ctaLabel, ctaLink = '#', handleOnClick, ctaDataQa = 'ai-section-cta', image }) => {
|
|
7
|
+
const { isMobile } = useIsMobileOrTable();
|
|
8
|
+
if (contentTop == undefined)
|
|
9
|
+
return null;
|
|
10
|
+
return (_jsx(LawGeniusCardsSectionStyled, { className: 'layout-ratafia-section', children: _jsxs("div", { className: 'layout-ratafia-section__wrapper background-ratafia-animation', children: [_jsxs("div", { className: 'layout-ratafia-section__topContent', children: [title && (_jsx("h2", { className: 'layout-ratafia-section__wrapper__info__paragraph__title sans-serif --super-large --bold-weight', children: title })), image !== null && _jsx("div", { className: 'layout-ratafia-section__wrapper__image__mobile', children: image }), _jsx("div", { className: 'layout-ratafia-section__wrapper__info__paragraph__content sans-serif --super-medium', children: contentTop })] }), _jsxs("div", { className: 'layout-ratafia-section__wrapperContent', children: [_jsxs("div", { className: 'layout-ratafia-section__wrapper__info', children: [_jsxs("div", { className: 'layout-ratafia-section__wrapper__info cards', children: [_jsx(LawGeniusInfoCard, { title: card1?.title ?? '', text: card1?.text ?? '', icon: card1?.icon }), _jsx(LawGeniusInfoCard, { title: card2?.title ?? '', text: card2?.text ?? '', icon: card2?.icon }), _jsx(LawGeniusInfoCard, { title: card3?.title ?? '', text: card3?.text ?? '', icon: card3?.icon })] }), _jsx("div", { className: 'layout-ratafia-section__wrapper__info__paragraph__content sans-serif --super-medium bottomContent', children: contentBottom }), ctaLabel && (_jsx("div", { className: 'layout-ratafia-section__wrapper__info__button', children: _jsx(Button, { givenClass: 'mid-banner-ratafia-content__cta', dataQa: ctaDataQa, link: ctaLink, onClick: handleOnClick, color: 'primary', label: ctaLabel, fluid: isMobile }) }))] }), image !== null && _jsx("div", { className: 'layout-ratafia-section__wrapper__image', children: image })] })] }) }));
|
|
11
|
+
};
|
|
12
|
+
export default LawGeniusCardsSection;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const LawGeniusCardsSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
import { device } from '../../../globalStyles/breakpoints';
|
|
2
|
+
import styled from 'styled-components';
|
|
3
|
+
export const LawGeniusCardsSectionStyled = styled.section `
|
|
4
|
+
display: flex;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
align-content: center;
|
|
7
|
+
width: 100%;
|
|
8
|
+
background-color: var(--neutral-neutral-6);
|
|
9
|
+
padding: 2rem 1.5rem;
|
|
10
|
+
|
|
11
|
+
@media ${device.laptop} {
|
|
12
|
+
padding: 3rem 2rem;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@media ${device['desktop-xl']} {
|
|
16
|
+
padding: 3rem 0;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.layout-ratafia-section {
|
|
20
|
+
&__topContent {
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-direction: column;
|
|
23
|
+
color: var(--others-white);
|
|
24
|
+
}
|
|
25
|
+
&__wrapper {
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
justify-content: center;
|
|
29
|
+
align-items: center;
|
|
30
|
+
align-self: stretch;
|
|
31
|
+
padding: 1.5rem;
|
|
32
|
+
gap: 2rem;
|
|
33
|
+
border-radius: var(--l-border-radius);
|
|
34
|
+
max-width: 1200px;
|
|
35
|
+
|
|
36
|
+
@media ${device['landscape-tablets']} {
|
|
37
|
+
padding: 2.5rem;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@media ${device.laptop} {
|
|
41
|
+
gap: 2rem;
|
|
42
|
+
padding: 4rem;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&__info {
|
|
46
|
+
display: flex;
|
|
47
|
+
flex-direction: column;
|
|
48
|
+
justify-content: center;
|
|
49
|
+
align-items: flex-start;
|
|
50
|
+
align-self: stretch;
|
|
51
|
+
gap: 1.5rem;
|
|
52
|
+
|
|
53
|
+
.bottomContent {
|
|
54
|
+
p {
|
|
55
|
+
color: var(--others-white);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&__paragraph {
|
|
60
|
+
display: flex;
|
|
61
|
+
flex-direction: column;
|
|
62
|
+
gap: var(--global-gap);
|
|
63
|
+
color: var(--others-white);
|
|
64
|
+
|
|
65
|
+
p:not(:last-child) {
|
|
66
|
+
margin-bottom: 1.5rem;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@media ${device.laptop} {
|
|
70
|
+
&__title {
|
|
71
|
+
margin-bottom: 1rem;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
&__button {
|
|
77
|
+
display: flex;
|
|
78
|
+
width: 100%;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
&.cards {
|
|
82
|
+
gap: 1rem;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
&__image {
|
|
87
|
+
display: none;
|
|
88
|
+
flex: 450px 0 0;
|
|
89
|
+
img {
|
|
90
|
+
object-fit: cover;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
@media ${device.laptop} {
|
|
94
|
+
display: flex;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
&__mobile {
|
|
98
|
+
display: flex;
|
|
99
|
+
width: 70%;
|
|
100
|
+
margin: 2rem auto;
|
|
101
|
+
|
|
102
|
+
@media ${device.laptop} {
|
|
103
|
+
display: none;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
&__wrapperContent {
|
|
109
|
+
display: flex;
|
|
110
|
+
flex-direction: column;
|
|
111
|
+
gap: 2rem;
|
|
112
|
+
|
|
113
|
+
@media ${device.laptop} {
|
|
114
|
+
flex-flow: row nowrap;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
`;
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { device } from '../../../globalStyles/breakpoints'
|
|
2
|
+
import styled from 'styled-components'
|
|
3
|
+
|
|
4
|
+
export const LawGeniusCardsSectionStyled = styled.section`
|
|
5
|
+
display: flex;
|
|
6
|
+
justify-content: center;
|
|
7
|
+
align-content: center;
|
|
8
|
+
width: 100%;
|
|
9
|
+
background-color: var(--neutral-neutral-6);
|
|
10
|
+
padding: 2rem 1.5rem;
|
|
11
|
+
|
|
12
|
+
@media ${device.laptop} {
|
|
13
|
+
padding: 3rem 2rem;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@media ${device['desktop-xl']} {
|
|
17
|
+
padding: 3rem 0;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.layout-ratafia-section {
|
|
21
|
+
&__topContent {
|
|
22
|
+
display: flex;
|
|
23
|
+
flex-direction: column;
|
|
24
|
+
color: var(--others-white);
|
|
25
|
+
}
|
|
26
|
+
&__wrapper {
|
|
27
|
+
display: flex;
|
|
28
|
+
flex-direction: column;
|
|
29
|
+
justify-content: center;
|
|
30
|
+
align-items: center;
|
|
31
|
+
align-self: stretch;
|
|
32
|
+
padding: 1.5rem;
|
|
33
|
+
gap: 2rem;
|
|
34
|
+
border-radius: var(--l-border-radius);
|
|
35
|
+
max-width: 1200px;
|
|
36
|
+
|
|
37
|
+
@media ${device['landscape-tablets']} {
|
|
38
|
+
padding: 2.5rem;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@media ${device.laptop} {
|
|
42
|
+
gap: 2rem;
|
|
43
|
+
padding: 4rem;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
&__info {
|
|
47
|
+
display: flex;
|
|
48
|
+
flex-direction: column;
|
|
49
|
+
justify-content: center;
|
|
50
|
+
align-items: flex-start;
|
|
51
|
+
align-self: stretch;
|
|
52
|
+
gap: 1.5rem;
|
|
53
|
+
|
|
54
|
+
.bottomContent {
|
|
55
|
+
p {
|
|
56
|
+
color: var(--others-white);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&__paragraph {
|
|
61
|
+
display: flex;
|
|
62
|
+
flex-direction: column;
|
|
63
|
+
gap: var(--global-gap);
|
|
64
|
+
color: var(--others-white);
|
|
65
|
+
|
|
66
|
+
p:not(:last-child) {
|
|
67
|
+
margin-bottom: 1.5rem;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@media ${device.laptop} {
|
|
71
|
+
&__title {
|
|
72
|
+
margin-bottom: 1rem;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
&__button {
|
|
78
|
+
display: flex;
|
|
79
|
+
width: 100%;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
&.cards {
|
|
83
|
+
gap: 1rem;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
&__image {
|
|
88
|
+
display: none;
|
|
89
|
+
flex: 450px 0 0;
|
|
90
|
+
img {
|
|
91
|
+
object-fit: cover;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
@media ${device.laptop} {
|
|
95
|
+
display: flex;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
&__mobile {
|
|
99
|
+
display: flex;
|
|
100
|
+
width: 70%;
|
|
101
|
+
margin: 2rem auto;
|
|
102
|
+
|
|
103
|
+
@media ${device.laptop} {
|
|
104
|
+
display: none;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
&__wrapperContent {
|
|
110
|
+
display: flex;
|
|
111
|
+
flex-direction: column;
|
|
112
|
+
gap: 2rem;
|
|
113
|
+
|
|
114
|
+
@media ${device.laptop} {
|
|
115
|
+
flex-flow: row nowrap;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
`
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import React, { type FC } from 'react'
|
|
2
|
+
|
|
3
|
+
import { Button } from '../../atoms'
|
|
4
|
+
import { type LawGeniusCardsSectionProps } from './LawGeniusCardsSectionProps.types'
|
|
5
|
+
import { LawGeniusCardsSectionStyled } from './LawGeniusCardsSection.styled'
|
|
6
|
+
import { LawGeniusInfoCard } from '../../molecules/LawGeniusInfoCard'
|
|
7
|
+
import { useIsMobileOrTable } from '../../../hooks'
|
|
8
|
+
|
|
9
|
+
const LawGeniusCardsSection: FC<LawGeniusCardsSectionProps> = ({
|
|
10
|
+
title,
|
|
11
|
+
contentTop,
|
|
12
|
+
contentBottom,
|
|
13
|
+
card1,
|
|
14
|
+
card2,
|
|
15
|
+
card3,
|
|
16
|
+
ctaLabel,
|
|
17
|
+
ctaLink = '#',
|
|
18
|
+
handleOnClick,
|
|
19
|
+
ctaDataQa = 'ai-section-cta',
|
|
20
|
+
image
|
|
21
|
+
}) => {
|
|
22
|
+
const { isMobile } = useIsMobileOrTable()
|
|
23
|
+
if (contentTop == undefined) return null
|
|
24
|
+
|
|
25
|
+
return (
|
|
26
|
+
<LawGeniusCardsSectionStyled className='layout-ratafia-section'>
|
|
27
|
+
<div className='layout-ratafia-section__wrapper background-ratafia-animation'>
|
|
28
|
+
<div className='layout-ratafia-section__topContent'>
|
|
29
|
+
{title && (
|
|
30
|
+
<h2 className='layout-ratafia-section__wrapper__info__paragraph__title sans-serif --super-large --bold-weight'>
|
|
31
|
+
{title}
|
|
32
|
+
</h2>
|
|
33
|
+
)}
|
|
34
|
+
{image !== null && <div className='layout-ratafia-section__wrapper__image__mobile'>{image}</div>}
|
|
35
|
+
<div className='layout-ratafia-section__wrapper__info__paragraph__content sans-serif --super-medium'>
|
|
36
|
+
{contentTop}
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
<div className='layout-ratafia-section__wrapperContent'>
|
|
40
|
+
<div className='layout-ratafia-section__wrapper__info'>
|
|
41
|
+
<div className='layout-ratafia-section__wrapper__info cards'>
|
|
42
|
+
<LawGeniusInfoCard title={card1?.title ?? ''} text={card1?.text ?? ''} icon={card1?.icon} />
|
|
43
|
+
<LawGeniusInfoCard title={card2?.title ?? ''} text={card2?.text ?? ''} icon={card2?.icon} />
|
|
44
|
+
<LawGeniusInfoCard title={card3?.title ?? ''} text={card3?.text ?? ''} icon={card3?.icon} />
|
|
45
|
+
</div>
|
|
46
|
+
<div className='layout-ratafia-section__wrapper__info__paragraph__content sans-serif --super-medium bottomContent'>
|
|
47
|
+
{contentBottom}
|
|
48
|
+
</div>
|
|
49
|
+
{ctaLabel && (
|
|
50
|
+
<div className='layout-ratafia-section__wrapper__info__button'>
|
|
51
|
+
<Button
|
|
52
|
+
givenClass='mid-banner-ratafia-content__cta'
|
|
53
|
+
dataQa={ctaDataQa}
|
|
54
|
+
link={ctaLink}
|
|
55
|
+
onClick={handleOnClick}
|
|
56
|
+
color='primary'
|
|
57
|
+
label={ctaLabel}
|
|
58
|
+
fluid={isMobile}
|
|
59
|
+
/>
|
|
60
|
+
</div>
|
|
61
|
+
)}
|
|
62
|
+
</div>
|
|
63
|
+
{image !== null && <div className='layout-ratafia-section__wrapper__image'>{image}</div>}
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
</LawGeniusCardsSectionStyled>
|
|
67
|
+
)
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
export default LawGeniusCardsSection
|
package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSectionProps.types.d.ts
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { LawGeniusInfoCardProps } from 'src/components/molecules/LawGeniusInfoCard';
|
|
2
|
+
import { MouseEventHandler } from 'react';
|
|
3
|
+
export interface LawGeniusCardsSectionProps {
|
|
4
|
+
title?: string;
|
|
5
|
+
contentTop: React.ReactNode;
|
|
6
|
+
contentBottom: React.ReactNode;
|
|
7
|
+
card1?: LawGeniusInfoCardProps;
|
|
8
|
+
card2?: LawGeniusInfoCardProps;
|
|
9
|
+
card3?: LawGeniusInfoCardProps;
|
|
10
|
+
ctaLabel?: string;
|
|
11
|
+
ctaLink?: string;
|
|
12
|
+
handleOnClick?: MouseEventHandler;
|
|
13
|
+
ctaDataQa?: string;
|
|
14
|
+
image?: React.ReactNode;
|
|
15
|
+
}
|
package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSectionProps.types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSectionProps.types.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { LawGeniusInfoCardProps } from 'src/components/molecules/LawGeniusInfoCard'
|
|
2
|
+
import { MouseEventHandler } from 'react'
|
|
3
|
+
|
|
4
|
+
export interface LawGeniusCardsSectionProps {
|
|
5
|
+
title?: string
|
|
6
|
+
contentTop: React.ReactNode
|
|
7
|
+
contentBottom: React.ReactNode
|
|
8
|
+
card1?: LawGeniusInfoCardProps
|
|
9
|
+
card2?: LawGeniusInfoCardProps
|
|
10
|
+
card3?: LawGeniusInfoCardProps
|
|
11
|
+
ctaLabel?: string
|
|
12
|
+
ctaLink?: string
|
|
13
|
+
handleOnClick?: MouseEventHandler
|
|
14
|
+
ctaDataQa?: string
|
|
15
|
+
image?: React.ReactNode
|
|
16
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as LawGeniusCardsSection } from './LawGeniusCardsSection';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Button, RichTextInner } from '../../atoms';
|
|
3
|
+
import { TryNowSectionStyled } from './TryNowSection.styled';
|
|
4
|
+
export const TryNowSection = ({ text, buttonText, buttonLink, buttonDataQa, image }) => {
|
|
5
|
+
return (_jsx(TryNowSectionStyled, { className: 'try-our-free-legal-blogs-section wrapper wrapper--responsive try-us-section', children: _jsx("div", { className: 'guidelines-section-trial wrapper', children: _jsxs("div", { className: 'guidelines-section-trial__item', children: [_jsx("div", { className: 'guidelines-section__image big-devices', children: image }), _jsxs("div", { className: 'guidelines-section-trial__texts', children: [_jsx(RichTextInner, { customClass: 'guidelines-section__texts__body', children: text }), _jsx(Button, { givenClass: 'mid-banner-ratafia-content__cta', dataQa: buttonDataQa, link: buttonLink, color: 'primary', label: buttonText })] })] }) }) }));
|
|
6
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const TryNowSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
|