@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.
Files changed (78) hide show
  1. package/dist/css/styles.css +3 -0
  2. package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCard.d.ts +3 -0
  3. package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCard.js +5 -0
  4. package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCard.styled.d.ts +1 -0
  5. package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCard.styled.js +46 -0
  6. package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCard.styled.ts +47 -0
  7. package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCard.tsx +20 -0
  8. package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCardProps.d.ts +5 -0
  9. package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCardProps.js +1 -0
  10. package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCardProps.ts +5 -0
  11. package/dist/src/components/molecules/LawGeniusInfoCard/index.d.ts +2 -0
  12. package/dist/src/components/molecules/LawGeniusInfoCard/index.js +2 -0
  13. package/dist/src/components/molecules/LawGeniusInfoCard/index.ts +2 -0
  14. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.js +2 -2
  15. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.styled.d.ts +1 -6
  16. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.styled.js +121 -231
  17. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.styled.ts +119 -238
  18. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.tsx +5 -5
  19. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCardProps.types.d.ts +0 -2
  20. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCardProps.types.ts +0 -3
  21. package/dist/src/components/molecules/SubtypeDocumentCard/index.d.ts +1 -1
  22. package/dist/src/components/molecules/SubtypeDocumentCard/index.ts +1 -1
  23. package/dist/src/components/molecules/TextInput/Input.d.ts +1 -1
  24. package/dist/src/components/molecules/TextInput/Input.js +2 -1
  25. package/dist/src/components/molecules/TextInput/Input.tsx +3 -2
  26. package/dist/src/components/molecules/TextInput/TextInput.scss +4 -0
  27. package/dist/src/components/molecules/TextInput/TextInputProps.types.d.ts +1 -1
  28. package/dist/src/components/molecules/TextInput/TextInputProps.types.ts +1 -1
  29. package/dist/src/components/molecules/TextInput/stories/TextInput.stories.tsx +10 -0
  30. package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContent.js +5 -2
  31. package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContent.styled.js +35 -2
  32. package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContent.styled.ts +35 -2
  33. package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContent.tsx +7 -2
  34. package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContentProps.types.d.ts +4 -1
  35. package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContentProps.types.js +2 -0
  36. package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContentProps.types.ts +4 -1
  37. package/dist/src/components/pages/HowItWorksPage/HowItWorksPage.d.ts +3 -0
  38. package/dist/src/components/pages/HowItWorksPage/HowItWorksPage.js +5 -0
  39. package/dist/src/components/pages/HowItWorksPage/HowItWorksPage.tsx +26 -0
  40. package/dist/src/components/pages/HowItWorksPage/HowItWorksPageProps.d.ts +10 -0
  41. package/dist/src/components/pages/HowItWorksPage/HowItWorksPageProps.js +1 -0
  42. package/dist/src/components/pages/HowItWorksPage/HowItWorksPageProps.ts +16 -0
  43. package/dist/src/components/pages/HowItWorksPage/index.d.ts +2 -0
  44. package/dist/src/components/pages/HowItWorksPage/index.js +2 -0
  45. package/dist/src/components/pages/HowItWorksPage/index.ts +2 -0
  46. package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSection.d.ts +4 -0
  47. package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSection.js +12 -0
  48. package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSection.styled.d.ts +1 -0
  49. package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSection.styled.js +118 -0
  50. package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSection.styled.ts +119 -0
  51. package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSection.tsx +70 -0
  52. package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSectionProps.types.d.ts +15 -0
  53. package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSectionProps.types.js +1 -0
  54. package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSectionProps.types.ts +16 -0
  55. package/dist/src/components/sections/LawGeniusCardsSection/index.d.ts +2 -0
  56. package/dist/src/components/sections/LawGeniusCardsSection/index.js +1 -0
  57. package/dist/src/components/sections/LawGeniusCardsSection/index.ts +2 -0
  58. package/dist/src/components/sections/TryNowSection/TryNowSection.d.ts +3 -0
  59. package/dist/src/components/sections/TryNowSection/TryNowSection.js +6 -0
  60. package/dist/src/components/sections/TryNowSection/TryNowSection.styled.d.ts +1 -0
  61. package/dist/src/components/sections/TryNowSection/TryNowSection.styled.js +190 -0
  62. package/dist/src/components/sections/TryNowSection/TryNowSection.styled.ts +191 -0
  63. package/dist/src/components/sections/TryNowSection/TryNowSection.tsx +27 -0
  64. package/dist/src/components/sections/TryNowSection/TryNowSectionProps.d.ts +8 -0
  65. package/dist/src/components/sections/TryNowSection/TryNowSectionProps.js +1 -0
  66. package/dist/src/components/sections/TryNowSection/TryNowSectionProps.ts +9 -0
  67. package/dist/src/components/sections/TryNowSection/index.d.ts +2 -0
  68. package/dist/src/components/sections/TryNowSection/index.js +1 -0
  69. package/dist/src/components/sections/TryNowSection/index.ts +2 -0
  70. package/dist/src/components/sections/TryOurFreeLegalBlogsSection/TryOurFreeLegalBlogsSection.js +9 -1
  71. package/dist/src/components/sections/TryOurFreeLegalBlogsSection/TryOurFreeLegalBlogsSection.styled.js +30 -0
  72. package/dist/src/components/sections/TryOurFreeLegalBlogsSection/TryOurFreeLegalBlogsSection.styled.ts +30 -0
  73. package/dist/src/components/sections/TryOurFreeLegalBlogsSection/TryOurFreeLegalBlogsSection.tsx +11 -1
  74. package/dist/src/components/sections/index.d.ts +3 -0
  75. package/dist/src/components/sections/index.js +3 -0
  76. package/dist/src/components/sections/index.ts +3 -0
  77. package/dist/tsconfig.build.tsbuildinfo +1 -1
  78. 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
  `
@@ -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,3 @@
1
+ import React from 'react';
2
+ import { type HowItWorksPageProps } from './HowItWorksPageProps';
3
+ export declare const HowItWorksPage: React.FC<HowItWorksPageProps>;
@@ -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,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,2 @@
1
+ export * from './HowItWorksPage';
2
+ export * from './HowItWorksPageProps';
@@ -0,0 +1,2 @@
1
+ export * from './HowItWorksPage';
2
+ export * from './HowItWorksPageProps';
@@ -0,0 +1,2 @@
1
+ export * from './HowItWorksPage'
2
+ export * from './HowItWorksPageProps'
@@ -0,0 +1,4 @@
1
+ import { type FC } from 'react';
2
+ import { type LawGeniusCardsSectionProps } from './LawGeniusCardsSectionProps.types';
3
+ declare const LawGeniusCardsSection: FC<LawGeniusCardsSectionProps>;
4
+ export default LawGeniusCardsSection;
@@ -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
@@ -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
+ }
@@ -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,2 @@
1
+ export { default as LawGeniusCardsSection } from './LawGeniusCardsSection';
2
+ export { type LawGeniusCardsSectionProps } from './LawGeniusCardsSectionProps.types';
@@ -0,0 +1 @@
1
+ export { default as LawGeniusCardsSection } from './LawGeniusCardsSection';
@@ -0,0 +1,2 @@
1
+ export { default as LawGeniusCardsSection } from './LawGeniusCardsSection'
2
+ export { type LawGeniusCardsSectionProps } from './LawGeniusCardsSectionProps.types'
@@ -0,0 +1,3 @@
1
+ import { type FC } from 'react';
2
+ import { type TryNowSectionProps } from './TryNowSectionProps';
3
+ export declare const TryNowSection: FC<TryNowSectionProps>;
@@ -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;