@npm_leadtech/legal-lib-components 7.8.0 → 7.8.2
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 +0 -2
- package/dist/src/components/atoms/FixedFooter/FixedFooter.d.ts +4 -0
- package/dist/src/components/atoms/FixedFooter/FixedFooter.js +4 -0
- package/dist/src/components/atoms/FixedFooter/FixedFooter.tsx +4 -0
- package/dist/src/components/atoms/PopularDocsItem/PopularDocsItem.styled.js +0 -9
- package/dist/src/components/atoms/PopularDocsItem/PopularDocsItem.styled.ts +0 -9
- package/dist/src/components/molecules/ContactInfo/ContactInfo.d.ts +3 -0
- package/dist/src/components/molecules/ContactInfo/ContactInfo.js +4 -0
- package/dist/src/components/molecules/ContactInfo/ContactInfo.styled.d.ts +2 -0
- package/dist/src/components/molecules/ContactInfo/ContactInfo.styled.js +49 -0
- package/dist/src/components/molecules/ContactInfo/ContactInfo.styled.ts +51 -0
- package/dist/src/components/molecules/ContactInfo/ContactInfo.tsx +16 -0
- package/dist/src/components/molecules/ContactInfo/ContactInfoProps.types.d.ts +5 -0
- package/dist/src/components/molecules/ContactInfo/ContactInfoProps.types.js +1 -0
- package/dist/src/components/molecules/ContactInfo/ContactInfoProps.types.ts +5 -0
- package/dist/src/components/molecules/ContactInfo/index.d.ts +2 -0
- package/dist/src/components/molecules/ContactInfo/index.js +1 -0
- package/dist/src/components/molecules/ContactInfo/index.ts +2 -0
- package/dist/src/components/molecules/FooterMenu/FooterMenu.d.ts +3 -0
- package/dist/src/components/molecules/FooterMenu/FooterMenu.js +3 -0
- package/dist/src/components/molecules/FooterMenu/FooterMenu.styled.d.ts +4 -0
- package/dist/src/components/molecules/FooterMenu/FooterMenu.styled.js +19 -0
- package/dist/src/components/molecules/FooterMenu/FooterMenu.styled.ts +23 -0
- package/dist/src/components/molecules/FooterMenu/FooterMenu.tsx +18 -0
- package/dist/src/components/molecules/FooterMenu/FooterMenuProps.types.d.ts +10 -0
- package/dist/src/components/molecules/FooterMenu/FooterMenuProps.types.js +1 -0
- package/dist/src/components/molecules/FooterMenu/FooterMenuProps.types.ts +11 -0
- package/dist/src/components/molecules/FooterMenu/index.d.ts +2 -0
- package/dist/src/components/molecules/FooterMenu/index.js +1 -0
- package/dist/src/components/molecules/FooterMenu/index.ts +2 -0
- package/dist/src/components/molecules/SocialLinks/SocialLinks.d.ts +3 -0
- package/dist/src/components/molecules/SocialLinks/SocialLinks.js +5 -0
- package/dist/src/components/molecules/SocialLinks/SocialLinks.styled.d.ts +1 -0
- package/dist/src/components/molecules/SocialLinks/SocialLinks.styled.js +5 -0
- package/dist/src/components/molecules/SocialLinks/SocialLinks.styled.ts +6 -0
- package/dist/src/components/molecules/SocialLinks/SocialLinks.tsx +17 -0
- package/dist/src/components/molecules/SocialLinks/SocialLinksProps.types.d.ts +8 -0
- package/dist/src/components/molecules/SocialLinks/SocialLinksProps.types.js +1 -0
- package/dist/src/components/molecules/SocialLinks/SocialLinksProps.types.ts +9 -0
- package/dist/src/components/molecules/SocialLinks/index.d.ts +2 -0
- package/dist/src/components/molecules/SocialLinks/index.js +1 -0
- package/dist/src/components/molecules/SocialLinks/index.ts +2 -0
- package/dist/src/components/molecules/index.d.ts +3 -0
- package/dist/src/components/molecules/index.js +3 -0
- package/dist/src/components/molecules/index.ts +3 -0
- package/dist/src/components/organisms/BottomFooter/BottomFooter.d.ts +3 -0
- package/dist/src/components/organisms/BottomFooter/BottomFooter.js +7 -0
- package/dist/src/components/organisms/BottomFooter/BottomFooter.styled.d.ts +6 -0
- package/dist/src/components/organisms/BottomFooter/BottomFooter.styled.js +35 -0
- package/dist/src/components/organisms/BottomFooter/BottomFooter.styled.ts +41 -0
- package/dist/src/components/organisms/BottomFooter/BottomFooter.tsx +44 -0
- package/dist/src/components/organisms/BottomFooter/BottomFooterProps.types.d.ts +9 -0
- package/dist/src/components/organisms/BottomFooter/BottomFooterProps.types.js +1 -0
- package/dist/src/components/organisms/BottomFooter/BottomFooterProps.types.ts +10 -0
- package/dist/src/components/organisms/BottomFooter/index.d.ts +2 -0
- package/dist/src/components/organisms/BottomFooter/index.js +1 -0
- package/dist/src/components/organisms/BottomFooter/index.ts +2 -0
- package/dist/src/components/organisms/GuidelinesContent/GuidelinesContent.js +3 -3
- package/dist/src/components/organisms/GuidelinesContent/GuidelinesContent.styled.js +83 -35
- package/dist/src/components/organisms/GuidelinesContent/GuidelinesContent.styled.ts +83 -35
- package/dist/src/components/organisms/GuidelinesContent/GuidelinesContent.tsx +28 -5
- package/dist/src/components/organisms/GuidelinesContent/GuidelinesContentProps.types.d.ts +7 -1
- package/dist/src/components/organisms/GuidelinesContent/GuidelinesContentProps.types.ts +8 -1
- package/dist/src/components/organisms/TopFooter/TopFooter.d.ts +3 -0
- package/dist/src/components/organisms/TopFooter/TopFooter.js +7 -0
- package/dist/src/components/organisms/TopFooter/TopFooter.styled.d.ts +2 -0
- package/dist/src/components/organisms/TopFooter/TopFooter.styled.js +30 -0
- package/dist/src/components/organisms/TopFooter/TopFooter.styled.ts +32 -0
- package/dist/src/components/organisms/TopFooter/TopFooter.tsx +20 -0
- package/dist/src/components/organisms/TopFooter/TopFooterProps.types.d.ts +7 -0
- package/dist/src/components/organisms/TopFooter/TopFooterProps.types.js +1 -0
- package/dist/src/components/organisms/TopFooter/TopFooterProps.types.ts +8 -0
- package/dist/src/components/organisms/TopFooter/index.d.ts +2 -0
- package/dist/src/components/organisms/TopFooter/index.js +1 -0
- package/dist/src/components/organisms/TopFooter/index.ts +2 -0
- package/dist/src/components/organisms/index.d.ts +2 -0
- package/dist/src/components/organisms/index.js +2 -0
- package/dist/src/components/organisms/index.ts +2 -0
- package/dist/src/components/sections/CardStorySection/CardStorySection.styled.js +2 -1
- package/dist/src/components/sections/CardStorySection/CardStorySection.styled.ts +2 -1
- package/dist/src/components/sections/ExpertsSection/ExpertsSection.styled.js +2 -1
- package/dist/src/components/sections/ExpertsSection/ExpertsSection.styled.ts +2 -1
- package/dist/src/components/sections/Footer/Footer.d.ts +3 -0
- package/dist/src/components/sections/Footer/Footer.js +7 -0
- package/dist/src/components/sections/Footer/Footer.mocks.d.ts +10 -0
- package/dist/src/components/sections/Footer/Footer.mocks.js +65 -0
- package/dist/src/components/sections/Footer/Footer.mocks.ts +77 -0
- package/dist/src/components/sections/Footer/Footer.styled.d.ts +1 -0
- package/dist/src/components/sections/Footer/Footer.styled.js +9 -0
- package/dist/src/components/sections/Footer/Footer.styled.ts +10 -0
- package/dist/src/components/sections/Footer/Footer.tsx +14 -0
- package/dist/src/components/sections/Footer/FooterProps.types.d.ts +6 -0
- package/dist/src/components/sections/Footer/FooterProps.types.js +1 -0
- package/dist/src/components/sections/Footer/FooterProps.types.ts +7 -0
- package/dist/src/components/sections/Footer/index.d.ts +2 -0
- package/dist/src/components/sections/Footer/index.js +1 -0
- package/dist/src/components/sections/Footer/index.ts +2 -0
- package/dist/src/components/sections/GuidelinesSection/GuidelinesSection.js +1 -1
- package/dist/src/components/sections/GuidelinesSection/GuidelinesSection.tsx +5 -0
- package/dist/src/components/sections/HowGetYourFormsSection/HowGetYourFormsSection.styled.js +0 -2
- package/dist/src/components/sections/HowGetYourFormsSection/HowGetYourFormsSection.styled.ts +0 -2
- package/dist/src/components/sections/LearnMoreSection/LearnMoreSection.styled.js +1 -1
- package/dist/src/components/sections/LearnMoreSection/LearnMoreSection.styled.ts +1 -1
- package/dist/src/components/sections/WhyLawDistrictSection/WhyLawDistrictSection.styled.js +0 -1
- package/dist/src/components/sections/WhyLawDistrictSection/WhyLawDistrictSection.styled.ts +0 -1
- package/dist/src/components/sections/index.d.ts +2 -0
- package/dist/src/components/sections/index.js +2 -0
- package/dist/src/components/sections/index.ts +2 -0
- package/dist/src/globalStyles/themes.scss +0 -2
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +3 -1
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import {
|
|
2
|
+
BottomFooterStyled,
|
|
3
|
+
BottomFooterText,
|
|
4
|
+
BottomFooterWrapper,
|
|
5
|
+
CompanyLink,
|
|
6
|
+
CompanyList,
|
|
7
|
+
LogoSocialsWrapper
|
|
8
|
+
} from './BottomFooter.styled'
|
|
9
|
+
import { BottomFooterProps } from './BottomFooterProps.types'
|
|
10
|
+
import { Logo } from '../../atoms/Logo/Logo'
|
|
11
|
+
import React from 'react'
|
|
12
|
+
import { SocialLinks } from '../../molecules/SocialLinks'
|
|
13
|
+
|
|
14
|
+
export const BottomFooter: React.FC<BottomFooterProps> = ({
|
|
15
|
+
siteName,
|
|
16
|
+
companyLinks,
|
|
17
|
+
socialLinks,
|
|
18
|
+
disclaimerText,
|
|
19
|
+
copyrightText
|
|
20
|
+
}) => {
|
|
21
|
+
return (
|
|
22
|
+
<BottomFooterWrapper>
|
|
23
|
+
<BottomFooterStyled>
|
|
24
|
+
<LogoSocialsWrapper className={'footer__logo'}>
|
|
25
|
+
<Logo className='footer__lawdistrict' siteName={siteName} width='138' height='24' type='white' />
|
|
26
|
+
{socialLinks && <SocialLinks links={socialLinks} />}
|
|
27
|
+
</LogoSocialsWrapper>
|
|
28
|
+
<div>
|
|
29
|
+
<CompanyList>
|
|
30
|
+
{companyLinks?.map((link) => (
|
|
31
|
+
<li key={link.url}>
|
|
32
|
+
<CompanyLink href={link.url} className='sans-serif --extra-small' data-qa={link.dataQa} rel={link.rel}>
|
|
33
|
+
{link.name}
|
|
34
|
+
</CompanyLink>
|
|
35
|
+
</li>
|
|
36
|
+
))}
|
|
37
|
+
</CompanyList>
|
|
38
|
+
</div>
|
|
39
|
+
<BottomFooterText className='sans-serif --extra-small'>{disclaimerText}</BottomFooterText>
|
|
40
|
+
<BottomFooterText className='sans-serif --extra-small'>{copyrightText}</BottomFooterText>
|
|
41
|
+
</BottomFooterStyled>
|
|
42
|
+
</BottomFooterWrapper>
|
|
43
|
+
)
|
|
44
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Link } from 'src/components/molecules/FooterMenu/FooterMenuProps.types';
|
|
2
|
+
import { SocialLink } from 'src/components/molecules/SocialLinks/SocialLinksProps.types';
|
|
3
|
+
export interface BottomFooterProps {
|
|
4
|
+
siteName: string;
|
|
5
|
+
companyLinks: Link[];
|
|
6
|
+
socialLinks?: SocialLink[];
|
|
7
|
+
disclaimerText: string;
|
|
8
|
+
copyrightText: string;
|
|
9
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Link } from 'src/components/molecules/FooterMenu/FooterMenuProps.types'
|
|
2
|
+
import { SocialLink } from 'src/components/molecules/SocialLinks/SocialLinksProps.types'
|
|
3
|
+
|
|
4
|
+
export interface BottomFooterProps {
|
|
5
|
+
siteName: string
|
|
6
|
+
companyLinks: Link[]
|
|
7
|
+
socialLinks?: SocialLink[]
|
|
8
|
+
disclaimerText: string
|
|
9
|
+
copyrightText: string
|
|
10
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { BottomFooter } from './BottomFooter';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { RichTextInner, RichTextStrapi } from '../../atoms';
|
|
2
|
+
import { Button, RichTextInner, RichTextStrapi } from '../../atoms';
|
|
3
3
|
import { GuideslinesContentStyled } from './GuidelinesContent.styled';
|
|
4
|
-
const GuidelinesContent = ({ title,
|
|
5
|
-
return (_jsxs(GuideslinesContentStyled, { children: [
|
|
4
|
+
const GuidelinesContent = ({ title, detail, children, tryNowText, tryNowButtonText, tryNowButtonLink, tryNowButtonDataQa, tryNowImage }) => {
|
|
5
|
+
return (_jsxs(GuideslinesContentStyled, { children: [_jsx("div", { className: 'guidelines-section-main wrapper', children: _jsxs("div", { className: 'guidelines-section__texts', children: [_jsx("h2", { className: 'guidelines-section__texts__title', children: title }), _jsx(RichTextInner, { customClass: 'guidelines-section__texts__body', children: children })] }) }), Array.isArray(detail) && (_jsx("div", { className: 'guidelines-section-detail wrapper', children: detail.map((item, index) => (_jsxs("div", { className: 'guidelines-section-detail__item', children: [_jsx("div", { className: 'guidelines-section-detail__item__image', children: item.image }), _jsx("h3", { className: 'guidelines-section-detail__item__title', children: item.title }), _jsx(RichTextStrapi, { html: item.body?.data?.childMarkdownRemark?.html })] }, index))) })), _jsx("div", { className: 'guidelines-section-trial wrapper', children: _jsxs("div", { className: 'guidelines-section-trial__item', children: [_jsx("div", { className: 'guidelines-section__image is-mobile', children: tryNowImage }), _jsxs("div", { className: 'guidelines-section-trial__texts', children: [_jsx(RichTextInner, { customClass: 'guidelines-section__texts__body', children: tryNowText }), _jsx(Button, { givenClass: 'mid-banner-ratafia-content__cta', dataQa: tryNowButtonDataQa, link: tryNowButtonLink, color: 'primary', label: tryNowButtonText })] }), _jsx("div", { className: 'guidelines-section__image big-devices', children: tryNowImage })] }) })] }));
|
|
6
6
|
};
|
|
7
7
|
export default GuidelinesContent;
|
|
@@ -14,7 +14,6 @@ export const GuideslinesContentStyled = styled.div `
|
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
.guidelines-section__texts {
|
|
17
|
-
flex-basis: 50%;
|
|
18
17
|
display: flex;
|
|
19
18
|
flex-direction: column;
|
|
20
19
|
justify-content: center;
|
|
@@ -26,18 +25,19 @@ export const GuideslinesContentStyled = styled.div `
|
|
|
26
25
|
letter-spacing: -0.3px;
|
|
27
26
|
|
|
28
27
|
@media ${device['landscape-tablets']} {
|
|
29
|
-
margin-left:
|
|
28
|
+
margin-left: 2rem;
|
|
30
29
|
margin-bottom: 0;
|
|
31
30
|
}
|
|
32
31
|
|
|
33
32
|
&__title {
|
|
34
|
-
font-family: var(--font-
|
|
33
|
+
font-family: var(--font-sans);
|
|
35
34
|
margin-bottom: 2rem;
|
|
36
35
|
text-align: center;
|
|
37
|
-
font-
|
|
36
|
+
font-weight: 700;
|
|
37
|
+
font-size: 1.75rem;
|
|
38
|
+
color: var(--neutral-neutral-1);
|
|
38
39
|
font-style: normal;
|
|
39
|
-
|
|
40
|
-
line-height: 42px;
|
|
40
|
+
line-height: 32px;
|
|
41
41
|
letter-spacing: -0.3px;
|
|
42
42
|
|
|
43
43
|
@media ${device['landscape-tablets']} {
|
|
@@ -57,31 +57,6 @@ export const GuideslinesContentStyled = styled.div `
|
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
.guidelines-section__image {
|
|
61
|
-
flex-basis: 50%;
|
|
62
|
-
margin-bottom: 2rem;
|
|
63
|
-
|
|
64
|
-
&.big-devices {
|
|
65
|
-
display: none;
|
|
66
|
-
|
|
67
|
-
@media ${device['landscape-tablets']} {
|
|
68
|
-
display: flex;
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
&.is-mobile {
|
|
73
|
-
display: none;
|
|
74
|
-
|
|
75
|
-
@media ${device['landscape-tablets']} {
|
|
76
|
-
display: none;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
img {
|
|
80
|
-
display: none;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
|
|
85
60
|
.guidelines-section-detail {
|
|
86
61
|
display: flex;
|
|
87
62
|
flex-direction: column;
|
|
@@ -106,11 +81,11 @@ export const GuideslinesContentStyled = styled.div `
|
|
|
106
81
|
}
|
|
107
82
|
|
|
108
83
|
&__title {
|
|
109
|
-
font-family: var(--font-
|
|
84
|
+
font-family: var(--font-sans);
|
|
110
85
|
font-style: normal;
|
|
111
|
-
font-weight:
|
|
112
|
-
font-size:
|
|
113
|
-
line-height:
|
|
86
|
+
font-weight: 700;
|
|
87
|
+
font-size: 18px;
|
|
88
|
+
line-height: 24px;
|
|
114
89
|
letter-spacing: -0.3px;
|
|
115
90
|
color: var(--neutral-neutral-1);
|
|
116
91
|
margin: 1.5rem 0 1rem 0;
|
|
@@ -135,4 +110,77 @@ export const GuideslinesContentStyled = styled.div `
|
|
|
135
110
|
}
|
|
136
111
|
}
|
|
137
112
|
}
|
|
113
|
+
|
|
114
|
+
.guidelines-section-trial {
|
|
115
|
+
display: flex;
|
|
116
|
+
flex-direction: column;
|
|
117
|
+
gap: 1.5rem;
|
|
118
|
+
margin: 2rem 0 1rem 0;
|
|
119
|
+
|
|
120
|
+
@media ${device.laptop} {
|
|
121
|
+
flex-direction: row;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
&__texts {
|
|
125
|
+
flex-basis: 50%;
|
|
126
|
+
display: flex;
|
|
127
|
+
flex-direction: column;
|
|
128
|
+
justify-content: flex-start;
|
|
129
|
+
color: var(--neutral-neutral-1);
|
|
130
|
+
font-style: normal;
|
|
131
|
+
font-weight: 400;
|
|
132
|
+
letter-spacing: -0.3px;
|
|
133
|
+
margin-right: 3rem;
|
|
134
|
+
|
|
135
|
+
&__body {
|
|
136
|
+
font-family: var(--font-sans);
|
|
137
|
+
font-size: 16px;
|
|
138
|
+
line-height: 22px;
|
|
139
|
+
margin-bottom: 1.5rem;
|
|
140
|
+
a {
|
|
141
|
+
color: var(--primary-main-light-1);
|
|
142
|
+
font-weight: 400 !important;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
.e-button {
|
|
146
|
+
height: auto;
|
|
147
|
+
align-self: flex-start;
|
|
148
|
+
margin-top: 2.5rem;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
&__item {
|
|
153
|
+
display: flex;
|
|
154
|
+
flex-direction: column;
|
|
155
|
+
justify-content: space-between;
|
|
156
|
+
background: var(--others-white);
|
|
157
|
+
border-radius: var(--m-border-radius);
|
|
158
|
+
|
|
159
|
+
@media ${device.laptop} {
|
|
160
|
+
padding: 1.5rem;
|
|
161
|
+
flex-direction: row;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.guidelines-section__image {
|
|
167
|
+
flex-basis: 50%;
|
|
168
|
+
margin-bottom: 2rem;
|
|
169
|
+
|
|
170
|
+
&.big-devices {
|
|
171
|
+
display: none;
|
|
172
|
+
}
|
|
173
|
+
&.is-mobile {
|
|
174
|
+
display: flex;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
@media ${device.laptop} {
|
|
178
|
+
&.big-devices {
|
|
179
|
+
display: flex;
|
|
180
|
+
}
|
|
181
|
+
&.is-mobile {
|
|
182
|
+
display: none;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
}
|
|
138
186
|
`;
|
|
@@ -15,7 +15,6 @@ export const GuideslinesContentStyled = styled.div`
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.guidelines-section__texts {
|
|
18
|
-
flex-basis: 50%;
|
|
19
18
|
display: flex;
|
|
20
19
|
flex-direction: column;
|
|
21
20
|
justify-content: center;
|
|
@@ -27,18 +26,19 @@ export const GuideslinesContentStyled = styled.div`
|
|
|
27
26
|
letter-spacing: -0.3px;
|
|
28
27
|
|
|
29
28
|
@media ${device['landscape-tablets']} {
|
|
30
|
-
margin-left:
|
|
29
|
+
margin-left: 2rem;
|
|
31
30
|
margin-bottom: 0;
|
|
32
31
|
}
|
|
33
32
|
|
|
34
33
|
&__title {
|
|
35
|
-
font-family: var(--font-
|
|
34
|
+
font-family: var(--font-sans);
|
|
36
35
|
margin-bottom: 2rem;
|
|
37
36
|
text-align: center;
|
|
38
|
-
font-
|
|
37
|
+
font-weight: 700;
|
|
38
|
+
font-size: 1.75rem;
|
|
39
|
+
color: var(--neutral-neutral-1);
|
|
39
40
|
font-style: normal;
|
|
40
|
-
|
|
41
|
-
line-height: 42px;
|
|
41
|
+
line-height: 32px;
|
|
42
42
|
letter-spacing: -0.3px;
|
|
43
43
|
|
|
44
44
|
@media ${device['landscape-tablets']} {
|
|
@@ -58,31 +58,6 @@ export const GuideslinesContentStyled = styled.div`
|
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
60
|
|
|
61
|
-
.guidelines-section__image {
|
|
62
|
-
flex-basis: 50%;
|
|
63
|
-
margin-bottom: 2rem;
|
|
64
|
-
|
|
65
|
-
&.big-devices {
|
|
66
|
-
display: none;
|
|
67
|
-
|
|
68
|
-
@media ${device['landscape-tablets']} {
|
|
69
|
-
display: flex;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
&.is-mobile {
|
|
74
|
-
display: none;
|
|
75
|
-
|
|
76
|
-
@media ${device['landscape-tablets']} {
|
|
77
|
-
display: none;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
img {
|
|
81
|
-
display: none;
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
|
|
86
61
|
.guidelines-section-detail {
|
|
87
62
|
display: flex;
|
|
88
63
|
flex-direction: column;
|
|
@@ -107,11 +82,11 @@ export const GuideslinesContentStyled = styled.div`
|
|
|
107
82
|
}
|
|
108
83
|
|
|
109
84
|
&__title {
|
|
110
|
-
font-family: var(--font-
|
|
85
|
+
font-family: var(--font-sans);
|
|
111
86
|
font-style: normal;
|
|
112
|
-
font-weight:
|
|
113
|
-
font-size:
|
|
114
|
-
line-height:
|
|
87
|
+
font-weight: 700;
|
|
88
|
+
font-size: 18px;
|
|
89
|
+
line-height: 24px;
|
|
115
90
|
letter-spacing: -0.3px;
|
|
116
91
|
color: var(--neutral-neutral-1);
|
|
117
92
|
margin: 1.5rem 0 1rem 0;
|
|
@@ -136,4 +111,77 @@ export const GuideslinesContentStyled = styled.div`
|
|
|
136
111
|
}
|
|
137
112
|
}
|
|
138
113
|
}
|
|
114
|
+
|
|
115
|
+
.guidelines-section-trial {
|
|
116
|
+
display: flex;
|
|
117
|
+
flex-direction: column;
|
|
118
|
+
gap: 1.5rem;
|
|
119
|
+
margin: 2rem 0 1rem 0;
|
|
120
|
+
|
|
121
|
+
@media ${device.laptop} {
|
|
122
|
+
flex-direction: row;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
&__texts {
|
|
126
|
+
flex-basis: 50%;
|
|
127
|
+
display: flex;
|
|
128
|
+
flex-direction: column;
|
|
129
|
+
justify-content: flex-start;
|
|
130
|
+
color: var(--neutral-neutral-1);
|
|
131
|
+
font-style: normal;
|
|
132
|
+
font-weight: 400;
|
|
133
|
+
letter-spacing: -0.3px;
|
|
134
|
+
margin-right: 3rem;
|
|
135
|
+
|
|
136
|
+
&__body {
|
|
137
|
+
font-family: var(--font-sans);
|
|
138
|
+
font-size: 16px;
|
|
139
|
+
line-height: 22px;
|
|
140
|
+
margin-bottom: 1.5rem;
|
|
141
|
+
a {
|
|
142
|
+
color: var(--primary-main-light-1);
|
|
143
|
+
font-weight: 400 !important;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
.e-button {
|
|
147
|
+
height: auto;
|
|
148
|
+
align-self: flex-start;
|
|
149
|
+
margin-top: 2.5rem;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
&__item {
|
|
154
|
+
display: flex;
|
|
155
|
+
flex-direction: column;
|
|
156
|
+
justify-content: space-between;
|
|
157
|
+
background: var(--others-white);
|
|
158
|
+
border-radius: var(--m-border-radius);
|
|
159
|
+
|
|
160
|
+
@media ${device.laptop} {
|
|
161
|
+
padding: 1.5rem;
|
|
162
|
+
flex-direction: row;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.guidelines-section__image {
|
|
168
|
+
flex-basis: 50%;
|
|
169
|
+
margin-bottom: 2rem;
|
|
170
|
+
|
|
171
|
+
&.big-devices {
|
|
172
|
+
display: none;
|
|
173
|
+
}
|
|
174
|
+
&.is-mobile {
|
|
175
|
+
display: flex;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
@media ${device.laptop} {
|
|
179
|
+
&.big-devices {
|
|
180
|
+
display: flex;
|
|
181
|
+
}
|
|
182
|
+
&.is-mobile {
|
|
183
|
+
display: none;
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
}
|
|
139
187
|
`
|
|
@@ -1,31 +1,54 @@
|
|
|
1
1
|
import React, { type FC } from 'react'
|
|
2
2
|
|
|
3
|
-
import { RichTextInner, RichTextStrapi } from '../../atoms'
|
|
3
|
+
import { Button, RichTextInner, RichTextStrapi } from '../../atoms'
|
|
4
4
|
import { type GuidelinesContentProps } from './GuidelinesContentProps.types'
|
|
5
5
|
import { GuideslinesContentStyled } from './GuidelinesContent.styled'
|
|
6
6
|
|
|
7
|
-
const GuidelinesContent: FC<GuidelinesContentProps> = ({
|
|
7
|
+
const GuidelinesContent: FC<GuidelinesContentProps> = ({
|
|
8
|
+
title,
|
|
9
|
+
detail,
|
|
10
|
+
children,
|
|
11
|
+
tryNowText,
|
|
12
|
+
tryNowButtonText,
|
|
13
|
+
tryNowButtonLink,
|
|
14
|
+
tryNowButtonDataQa,
|
|
15
|
+
tryNowImage
|
|
16
|
+
}) => {
|
|
8
17
|
return (
|
|
9
18
|
<GuideslinesContentStyled>
|
|
10
19
|
<div className='guidelines-section-main wrapper'>
|
|
11
|
-
<div className='guidelines-section__image big-devices'>{image}</div>
|
|
12
20
|
<div className='guidelines-section__texts'>
|
|
13
21
|
<h2 className='guidelines-section__texts__title'>{title}</h2>
|
|
14
22
|
<RichTextInner customClass='guidelines-section__texts__body'>{children}</RichTextInner>
|
|
15
23
|
</div>
|
|
16
|
-
<div className='guidelines-section__image is-mobile'>{image}</div>
|
|
17
24
|
</div>
|
|
18
25
|
{Array.isArray(detail) && (
|
|
19
26
|
<div className='guidelines-section-detail wrapper'>
|
|
20
27
|
{detail.map((item, index) => (
|
|
21
28
|
<div className='guidelines-section-detail__item' key={index}>
|
|
22
29
|
<div className='guidelines-section-detail__item__image'>{item.image}</div>
|
|
23
|
-
<
|
|
30
|
+
<h3 className='guidelines-section-detail__item__title'>{item.title}</h3>
|
|
24
31
|
<RichTextStrapi html={item.body?.data?.childMarkdownRemark?.html as string} />
|
|
25
32
|
</div>
|
|
26
33
|
))}
|
|
27
34
|
</div>
|
|
28
35
|
)}
|
|
36
|
+
<div className='guidelines-section-trial wrapper'>
|
|
37
|
+
<div className='guidelines-section-trial__item'>
|
|
38
|
+
<div className='guidelines-section__image is-mobile'>{tryNowImage}</div>
|
|
39
|
+
<div className='guidelines-section-trial__texts'>
|
|
40
|
+
<RichTextInner customClass='guidelines-section__texts__body'>{tryNowText}</RichTextInner>
|
|
41
|
+
<Button
|
|
42
|
+
givenClass='mid-banner-ratafia-content__cta'
|
|
43
|
+
dataQa={tryNowButtonDataQa}
|
|
44
|
+
link={tryNowButtonLink}
|
|
45
|
+
color='primary'
|
|
46
|
+
label={tryNowButtonText}
|
|
47
|
+
/>
|
|
48
|
+
</div>
|
|
49
|
+
<div className='guidelines-section__image big-devices'>{tryNowImage}</div>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
29
52
|
</GuideslinesContentStyled>
|
|
30
53
|
)
|
|
31
54
|
}
|
|
@@ -1,6 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
export interface GuidelinesContentProps {
|
|
2
3
|
title: string;
|
|
3
|
-
image
|
|
4
|
+
image?: React.ReactNode;
|
|
4
5
|
children: React.ReactNode;
|
|
5
6
|
detail?: React.ReactNode;
|
|
7
|
+
tryNowText: React.ReactNode;
|
|
8
|
+
tryNowButtonText: string;
|
|
9
|
+
tryNowButtonLink: string;
|
|
10
|
+
tryNowButtonDataQa: string;
|
|
11
|
+
tryNowImage?: React.ReactNode;
|
|
6
12
|
}
|
|
@@ -1,6 +1,13 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
1
3
|
export interface GuidelinesContentProps {
|
|
2
4
|
title: string
|
|
3
|
-
image
|
|
5
|
+
image?: React.ReactNode
|
|
4
6
|
children: React.ReactNode
|
|
5
7
|
detail?: React.ReactNode
|
|
8
|
+
tryNowText: React.ReactNode
|
|
9
|
+
tryNowButtonText: string
|
|
10
|
+
tryNowButtonLink: string
|
|
11
|
+
tryNowButtonDataQa: string
|
|
12
|
+
tryNowImage?: React.ReactNode
|
|
6
13
|
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { SelectorTrustpilotWrapper, TopFooterStyled } from './TopFooter.styled';
|
|
3
|
+
import { ContactInfo } from '../../molecules/ContactInfo/ContactInfo';
|
|
4
|
+
import { FooterMenu } from '../../molecules/FooterMenu/FooterMenu';
|
|
5
|
+
export const TopFooter = ({ menus, contactInfo, trustPilotWidget }) => {
|
|
6
|
+
return (_jsxs(TopFooterStyled, { className: 'footer__wrapper', children: [menus?.map((menu) => _jsx(FooterMenu, { ...menu }, menu.title)), (contactInfo || Boolean(trustPilotWidget)) && (_jsxs(SelectorTrustpilotWrapper, { children: [contactInfo && _jsx(ContactInfo, { ...contactInfo }), Boolean(trustPilotWidget) && _jsx("div", { children: trustPilotWidget })] }))] }));
|
|
7
|
+
};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export declare const TopFooterStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
2
|
+
export declare const SelectorTrustpilotWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
export const TopFooterStyled = styled.div `
|
|
3
|
+
display: flex;
|
|
4
|
+
padding: 2.5rem 1.5rem;
|
|
5
|
+
align-items: flex-start;
|
|
6
|
+
gap: 2rem;
|
|
7
|
+
width: 100%;
|
|
8
|
+
max-width: 1200px;
|
|
9
|
+
justify-content: space-between;
|
|
10
|
+
|
|
11
|
+
@media (max-width: 768px) {
|
|
12
|
+
display: grid;
|
|
13
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@media (max-width: 575px) {
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-direction: column;
|
|
19
|
+
align-items: flex-start;
|
|
20
|
+
gap: 2rem;
|
|
21
|
+
}
|
|
22
|
+
`;
|
|
23
|
+
export const SelectorTrustpilotWrapper = styled.div `
|
|
24
|
+
display: flex;
|
|
25
|
+
flex-direction: column;
|
|
26
|
+
gap: 1.2rem;
|
|
27
|
+
@media (max-width: 768px) {
|
|
28
|
+
display: contents;
|
|
29
|
+
}
|
|
30
|
+
`;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import styled from 'styled-components'
|
|
2
|
+
|
|
3
|
+
export const TopFooterStyled = styled.div`
|
|
4
|
+
display: flex;
|
|
5
|
+
padding: 2.5rem 1.5rem;
|
|
6
|
+
align-items: flex-start;
|
|
7
|
+
gap: 2rem;
|
|
8
|
+
width: 100%;
|
|
9
|
+
max-width: 1200px;
|
|
10
|
+
justify-content: space-between;
|
|
11
|
+
|
|
12
|
+
@media (max-width: 768px) {
|
|
13
|
+
display: grid;
|
|
14
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@media (max-width: 575px) {
|
|
18
|
+
display: flex;
|
|
19
|
+
flex-direction: column;
|
|
20
|
+
align-items: flex-start;
|
|
21
|
+
gap: 2rem;
|
|
22
|
+
}
|
|
23
|
+
`
|
|
24
|
+
|
|
25
|
+
export const SelectorTrustpilotWrapper = styled.div`
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
gap: 1.2rem;
|
|
29
|
+
@media (max-width: 768px) {
|
|
30
|
+
display: contents;
|
|
31
|
+
}
|
|
32
|
+
`
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { SelectorTrustpilotWrapper, TopFooterStyled } from './TopFooter.styled'
|
|
2
|
+
import { ContactInfo } from '../../molecules/ContactInfo/ContactInfo'
|
|
3
|
+
import { FooterMenu } from '../../molecules/FooterMenu/FooterMenu'
|
|
4
|
+
import React from 'react'
|
|
5
|
+
import { TopFooterProps } from './TopFooterProps.types'
|
|
6
|
+
|
|
7
|
+
export const TopFooter: React.FC<TopFooterProps> = ({ menus, contactInfo, trustPilotWidget }) => {
|
|
8
|
+
return (
|
|
9
|
+
<TopFooterStyled className='footer__wrapper'>
|
|
10
|
+
{menus?.map((menu) => <FooterMenu key={menu.title} {...menu} />)}
|
|
11
|
+
|
|
12
|
+
{(contactInfo || Boolean(trustPilotWidget)) && (
|
|
13
|
+
<SelectorTrustpilotWrapper>
|
|
14
|
+
{contactInfo && <ContactInfo {...contactInfo} />}
|
|
15
|
+
{Boolean(trustPilotWidget) && <div>{trustPilotWidget}</div>}
|
|
16
|
+
</SelectorTrustpilotWrapper>
|
|
17
|
+
)}
|
|
18
|
+
</TopFooterStyled>
|
|
19
|
+
)
|
|
20
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ContactInfoProps } from 'src/components/molecules/ContactInfo';
|
|
2
|
+
import { FooterMenuProps } from 'src/components/molecules/FooterMenu/FooterMenuProps.types';
|
|
3
|
+
export interface TopFooterProps {
|
|
4
|
+
menus: FooterMenuProps[];
|
|
5
|
+
contactInfo?: ContactInfoProps;
|
|
6
|
+
trustPilotWidget?: React.ReactNode;
|
|
7
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ContactInfoProps } from 'src/components/molecules/ContactInfo'
|
|
2
|
+
import { FooterMenuProps } from 'src/components/molecules/FooterMenu/FooterMenuProps.types'
|
|
3
|
+
|
|
4
|
+
export interface TopFooterProps {
|
|
5
|
+
menus: FooterMenuProps[]
|
|
6
|
+
contactInfo?: ContactInfoProps
|
|
7
|
+
trustPilotWidget?: React.ReactNode
|
|
8
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { TopFooter } from './TopFooter';
|
|
@@ -2,6 +2,7 @@ export * from './HeroContent';
|
|
|
2
2
|
export * from './Accordion';
|
|
3
3
|
export * from './ArticlesList';
|
|
4
4
|
export * from './AsSeeInContent';
|
|
5
|
+
export * from './BottomFooter';
|
|
5
6
|
export * from './CardFunctionality';
|
|
6
7
|
export * from './ContactContent';
|
|
7
8
|
export * from './ContactJumbotron';
|
|
@@ -23,6 +24,7 @@ export * from './MobileBottomBar';
|
|
|
23
24
|
export * from './RatafiaLoadingResultContent';
|
|
24
25
|
export * from './RatafiaResultContent';
|
|
25
26
|
export * from './StepsRatafiaContent';
|
|
27
|
+
export * from './TopFooter';
|
|
26
28
|
export * from './TryOurFreeLegalBlogsContent';
|
|
27
29
|
export * from './Wizard';
|
|
28
30
|
export * from './HowWeHelp';
|
|
@@ -2,6 +2,7 @@ export * from './HeroContent';
|
|
|
2
2
|
export * from './Accordion';
|
|
3
3
|
export * from './ArticlesList';
|
|
4
4
|
export * from './AsSeeInContent';
|
|
5
|
+
export * from './BottomFooter';
|
|
5
6
|
export * from './CardFunctionality';
|
|
6
7
|
export * from './ContactContent';
|
|
7
8
|
export * from './ContactJumbotron';
|
|
@@ -23,6 +24,7 @@ export * from './MobileBottomBar';
|
|
|
23
24
|
export * from './RatafiaLoadingResultContent';
|
|
24
25
|
export * from './RatafiaResultContent';
|
|
25
26
|
export * from './StepsRatafiaContent';
|
|
27
|
+
export * from './TopFooter';
|
|
26
28
|
export * from './TryOurFreeLegalBlogsContent';
|
|
27
29
|
export * from './Wizard';
|
|
28
30
|
export * from './HowWeHelp';
|