hds-web 1.10.7 → 1.10.9
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/index.css +2 -2
- package/dist/index.es.css +2 -2
- package/dist/index.es.js +3 -3
- package/dist/index.js +6 -6
- package/package.json +1 -1
- package/src/HDS/components/Buttons/button.js +1 -1
- package/src/HDS/components/Cards/Announcement/announcementSm.js +1 -1
- package/src/HDS/components/Cards/Misc/iconCard.js +167 -72
- package/src/HDS/components/Cards/Misc/imageBadgeCard.js +20 -15
- package/src/HDS/components/Cards/Misc/talkcard2.js +1 -0
- package/src/HDS/components/Cards/Testimonials/testimonial.js +4 -1
- package/src/HDS/components/Cards/VideoCard/homeVC.js +2 -2
- package/src/HDS/components/Carousels/customCarousel.js +1 -1
- package/src/HDS/components/Carousels/homeCarousel.js +4 -2
- package/src/HDS/components/Footers/v3Footer.js +5 -5
- package/src/HDS/modules/Cards/dataSourceCard.js +1 -1
- package/src/HDS/modules/TextCard/textIconCard.js +44 -37
- package/src/styles/tailwind.css +10 -7
package/package.json
CHANGED
|
@@ -39,7 +39,7 @@ const Buttonclasses = {
|
|
|
39
39
|
'default': {
|
|
40
40
|
'base': 'db:w-fit tb:w-fit w-full justify-center border-2 border-blue-500 text-blue-500',
|
|
41
41
|
|
|
42
|
-
'hover': 'hover:text-neutral-0 hover:bg-blue-700 hover:border-2 hover:border-blue-700 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-
|
|
42
|
+
'hover': 'hover:text-neutral-0 hover:bg-blue-700 hover:border-2 hover:border-blue-700 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-200 ',
|
|
43
43
|
|
|
44
44
|
'focus': 'focus:bg-blue-200 focus:text-blue-500 focus:border-2 border-blue-500 focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none focus:text-blue-500',
|
|
45
45
|
},
|
|
@@ -10,7 +10,7 @@ export default function AnnouncementSM(props) {
|
|
|
10
10
|
const linkTextClass = props.linkTextColorClass ? HDSColor(props.linkTextColorClass) : 'text-neutral-600';
|
|
11
11
|
|
|
12
12
|
return (
|
|
13
|
-
<div className={`${bgClass} rounded-full shadow py-2 px-
|
|
13
|
+
<div className={`${bgClass} rounded-full shadow py-2 px-2 inline-flex items-center`}>
|
|
14
14
|
<div className={`${tagBgClass} hidden mb-m:block py-1 px-3 rounded-full mr-4`}>
|
|
15
15
|
<Typography textStyle="body2-medium" className={`${tagTextClass}`}>{props.tagText}</Typography>
|
|
16
16
|
</div>
|
|
@@ -38,91 +38,186 @@ const cardVariant = {
|
|
|
38
38
|
export default function IconCard(props) {
|
|
39
39
|
const iconBG = HDSColor(props.iconBg);
|
|
40
40
|
return (
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
<>
|
|
60
|
-
<Typography
|
|
61
|
-
textStyle={cardVariant[props.cardType]['titleTextStyle']}
|
|
62
|
-
className={cardVariant[props.cardType]['titleClasses']}
|
|
63
|
-
>
|
|
64
|
-
{props.title}
|
|
65
|
-
</Typography>
|
|
41
|
+
<>
|
|
42
|
+
{
|
|
43
|
+
((props.readMoreBtn && props.button) || (props.button && props.button.length > 1)) ? (
|
|
44
|
+
<div
|
|
45
|
+
className={`bg-neutral-0 grid h-full transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'shadow') + ((props.readMoreBtn || props.button) ? ' hover:shadow-lg' : '')}
|
|
46
|
+
>
|
|
47
|
+
<div className=" self-start">
|
|
48
|
+
<div
|
|
49
|
+
className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
|
|
50
|
+
>
|
|
51
|
+
<Icon
|
|
52
|
+
height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
|
|
53
|
+
variant={props.iconVariant}
|
|
54
|
+
strokeColor={props.iconStroke}
|
|
55
|
+
strokeClass={HDSColor(props.iconStrokeClass)} />
|
|
56
|
+
</div>
|
|
57
|
+
<div
|
|
58
|
+
className="flex-1">
|
|
66
59
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
60
|
+
{props.cardType &&
|
|
61
|
+
(
|
|
62
|
+
<>
|
|
63
|
+
<Typography
|
|
64
|
+
textStyle={cardVariant[props.cardType]['titleTextStyle']}
|
|
65
|
+
className={cardVariant[props.cardType]['titleClasses']}
|
|
66
|
+
>
|
|
67
|
+
{props.title}
|
|
68
|
+
</Typography>
|
|
69
|
+
|
|
70
|
+
<Typography
|
|
71
|
+
textStyle={cardVariant[props.cardType]['descTextStyle']}
|
|
72
|
+
className={`${cardVariant[props.cardType]['descClasses']} [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600`}
|
|
73
|
+
>
|
|
74
|
+
<ReactMarkdown>
|
|
75
|
+
{props.description}
|
|
76
|
+
</ReactMarkdown>
|
|
77
|
+
</Typography>
|
|
78
|
+
{props.readMoreBtn && (
|
|
79
|
+
<a href={props.readMoreBtn.cta_link} className='flex'>
|
|
80
|
+
<HDSButton
|
|
81
|
+
label={props.readMoreBtn.cta_text}
|
|
82
|
+
type='secondaryLink'
|
|
83
|
+
leftIconVariant='none'
|
|
84
|
+
rightIconVariant='none'
|
|
85
|
+
state='default'
|
|
86
|
+
size='sm'
|
|
87
|
+
rightAnimatedArrow={true}
|
|
88
|
+
rightAnimatedArrowColor='#3970FD'
|
|
89
|
+
animatedHoverStroke='#3970FD'
|
|
90
|
+
btnTextColorClass='text-blue-500'
|
|
91
|
+
btnTextHoverClass=''
|
|
92
|
+
className=' mt-4'
|
|
93
|
+
/>
|
|
94
|
+
</a>
|
|
95
|
+
)
|
|
96
|
+
|
|
97
|
+
}
|
|
98
|
+
</>
|
|
99
|
+
)
|
|
100
|
+
}
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
{props.button &&
|
|
104
|
+
<div className="flex gap-2">
|
|
105
|
+
{props.button.map((btn, index) => (
|
|
106
|
+
<a href={btn.cta_link} key={index} className="flex self-end mt-7">
|
|
77
107
|
<HDSButton
|
|
78
|
-
label={
|
|
79
|
-
type='
|
|
108
|
+
label={btn.cta_text}
|
|
109
|
+
type={btn.cta_type || 'secondary'}
|
|
80
110
|
leftIconVariant='none'
|
|
81
111
|
rightIconVariant='none'
|
|
82
112
|
state='default'
|
|
83
113
|
size='sm'
|
|
84
114
|
rightAnimatedArrow={true}
|
|
85
|
-
rightAnimatedArrowColor='#3970FD'
|
|
86
|
-
|
|
87
|
-
btnTextColorClass
|
|
88
|
-
|
|
89
|
-
|
|
115
|
+
rightAnimatedArrowColor={btn.rightAnimatedArrowColor || '#3970FD'}
|
|
116
|
+
btnBgColorClass={btn.btnBg}
|
|
117
|
+
btnTextHoverClass={btn.btnTextColorClass}
|
|
118
|
+
animatedHoverStroke={btn.animatedHoverStroke}
|
|
119
|
+
btnTextColorClass={btn.btnTextColorClass}
|
|
90
120
|
/>
|
|
91
|
-
</a>
|
|
92
|
-
)
|
|
93
|
-
|
|
121
|
+
</a>))
|
|
94
122
|
}
|
|
95
|
-
|
|
96
|
-
)
|
|
97
|
-
}
|
|
98
|
-
</div>
|
|
99
|
-
</div>
|
|
100
|
-
{props.button &&
|
|
101
|
-
<div className="flex gap-2">
|
|
102
|
-
{props.button.map((btn, index) => (
|
|
103
|
-
<a href={btn.cta_link} key={index} className="flex self-end mt-7">
|
|
104
|
-
<HDSButton
|
|
105
|
-
label={btn.cta_text}
|
|
106
|
-
type={btn.cta_type || 'secondary'}
|
|
107
|
-
leftIconVariant='none'
|
|
108
|
-
rightIconVariant='none'
|
|
109
|
-
state='default'
|
|
110
|
-
size='sm'
|
|
111
|
-
rightAnimatedArrow={true}
|
|
112
|
-
rightAnimatedArrowColor={btn.rightAnimatedArrowColor ||'#3970FD'}
|
|
113
|
-
btnBgColorClass={btn.btnBg}
|
|
114
|
-
btnTextHoverClass={btn.btnTextColorClass}
|
|
115
|
-
animatedHoverStroke={btn.animatedHoverStroke}
|
|
116
|
-
btnTextColorClass={btn.btnTextColorClass}
|
|
117
|
-
/>
|
|
118
|
-
</a>))
|
|
123
|
+
</div>
|
|
119
124
|
}
|
|
120
|
-
</div>
|
|
121
|
-
}
|
|
122
125
|
|
|
123
126
|
|
|
124
127
|
|
|
125
|
-
|
|
128
|
+
</div>
|
|
129
|
+
) :
|
|
130
|
+
|
|
131
|
+
(
|
|
132
|
+
<a href={((props.readMoreBtn && !props.button) ? props.readMoreBtn['cta_link'] : props.button[0]['cta_link'])}
|
|
133
|
+
className={`bg-neutral-0 group grid h-full transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'shadow') + ((props.readMoreBtn || props.button) ? ' hover:shadow-lg' : '')}
|
|
134
|
+
>
|
|
135
|
+
<div className=" self-start">
|
|
136
|
+
<div
|
|
137
|
+
className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
|
|
138
|
+
>
|
|
139
|
+
<Icon
|
|
140
|
+
height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
|
|
141
|
+
variant={props.iconVariant}
|
|
142
|
+
strokeColor={props.iconStroke}
|
|
143
|
+
strokeClass={HDSColor(props.iconStrokeClass)} />
|
|
144
|
+
</div>
|
|
145
|
+
<div
|
|
146
|
+
className="flex-1">
|
|
147
|
+
|
|
148
|
+
{props.cardType &&
|
|
149
|
+
(
|
|
150
|
+
<>
|
|
151
|
+
<Typography
|
|
152
|
+
textStyle={cardVariant[props.cardType]['titleTextStyle']}
|
|
153
|
+
className={cardVariant[props.cardType]['titleClasses']}
|
|
154
|
+
>
|
|
155
|
+
{props.title}
|
|
156
|
+
</Typography>
|
|
157
|
+
|
|
158
|
+
<Typography
|
|
159
|
+
textStyle={cardVariant[props.cardType]['descTextStyle']}
|
|
160
|
+
className={`${cardVariant[props.cardType]['descClasses']} [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600`}
|
|
161
|
+
>
|
|
162
|
+
<ReactMarkdown>
|
|
163
|
+
{props.description}
|
|
164
|
+
</ReactMarkdown>
|
|
165
|
+
</Typography>
|
|
166
|
+
{props.readMoreBtn && (
|
|
167
|
+
<a href={props.readMoreBtn.cta_link} className='flex'>
|
|
168
|
+
<HDSButton
|
|
169
|
+
label={props.readMoreBtn.cta_text}
|
|
170
|
+
type='secondaryLink'
|
|
171
|
+
leftIconVariant='none'
|
|
172
|
+
rightIconVariant='none'
|
|
173
|
+
state='default'
|
|
174
|
+
size='sm'
|
|
175
|
+
rightAnimatedArrow={true}
|
|
176
|
+
rightAnimatedArrowColor='#3970FD'
|
|
177
|
+
animatedHoverStroke='#3970FD'
|
|
178
|
+
btnTextColorClass='text-blue-500'
|
|
179
|
+
btnTextHoverClass=''
|
|
180
|
+
className=' mt-4'
|
|
181
|
+
/>
|
|
182
|
+
</a>
|
|
183
|
+
)
|
|
184
|
+
|
|
185
|
+
}
|
|
186
|
+
</>
|
|
187
|
+
)
|
|
188
|
+
}
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
{props.button &&
|
|
192
|
+
<div className="flex gap-2">
|
|
193
|
+
{props.button.map((btn, index) => (
|
|
194
|
+
<a href={btn.cta_link} key={index} className="flex self-end mt-7">
|
|
195
|
+
<HDSButton
|
|
196
|
+
label={btn.cta_text}
|
|
197
|
+
type={btn.cta_type || 'secondary'}
|
|
198
|
+
leftIconVariant='none'
|
|
199
|
+
rightIconVariant='none'
|
|
200
|
+
state='default'
|
|
201
|
+
size='sm'
|
|
202
|
+
rightAnimatedArrow={true}
|
|
203
|
+
rightAnimatedArrowColor={btn.rightAnimatedArrowColor || '#3970FD'}
|
|
204
|
+
btnBgColorClass={btn.btnBg}
|
|
205
|
+
btnTextHoverClass={btn.btnTextColorClass}
|
|
206
|
+
animatedHoverStroke={btn.animatedHoverStroke}
|
|
207
|
+
btnTextColorClass={btn.btnTextColorClass}
|
|
208
|
+
/>
|
|
209
|
+
</a>))
|
|
210
|
+
}
|
|
211
|
+
</div>
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
|
|
215
|
+
|
|
216
|
+
</a>
|
|
217
|
+
)
|
|
218
|
+
|
|
219
|
+
}
|
|
220
|
+
</>
|
|
126
221
|
)
|
|
127
222
|
}
|
|
128
223
|
|
|
@@ -1,27 +1,32 @@
|
|
|
1
1
|
import React from "react"
|
|
2
2
|
import { HDSColor } from "../../../foundation/ColorPalette"
|
|
3
3
|
import { Typography } from "../../../foundation/Typography"
|
|
4
|
-
import {Badges} from "../../BadgesCaption"
|
|
4
|
+
import { Badges } from "../../BadgesCaption"
|
|
5
5
|
export default function ImageBadgeCard(card) {
|
|
6
6
|
|
|
7
7
|
return (
|
|
8
8
|
<>
|
|
9
|
-
<div
|
|
10
|
-
<
|
|
11
|
-
<div className=
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
9
|
+
<div>
|
|
10
|
+
<a href={card.sliderLink}>
|
|
11
|
+
<div className={`${HDSColor(card.cardBg)}bg-neutral-0 hover:shadow-lg hover:transition-all hover:ease-in-out hover:duration-300 hover:border-opacity-0 min-h-[443px] min-w-[312px] tb:max-w-[763px] tb:min-h-[245px] rounded-3xl tb:p-8 p-4`}>
|
|
12
|
+
|
|
13
|
+
<div className='flex flex-col-reverse tb:flex-row justify-between gap-4 items-center'>
|
|
14
|
+
<div className='tb:max-w-[393px] mt-8 tb:mt-0'>
|
|
15
|
+
<Badges
|
|
16
|
+
color={card.badge.color}
|
|
17
|
+
children={card.badge.label}
|
|
18
|
+
text_color='text-neutral-0'
|
|
19
|
+
/>
|
|
20
|
+
<Typography textStyle='h4' className='mt-2 text-neutral-1000 max-w-[326px]'>{card.title}</Typography>
|
|
21
|
+
<Typography textStyle='sub2' className='mt-2 text-neutral-600'>{card.subTitle}</Typography>
|
|
22
|
+
</div>
|
|
23
|
+
<div className="flex justify-center h-full items-center">
|
|
24
|
+
<img src={card.imageUrl} alt={card.title} className='tb:max-w-[290px] rounded-lg flex items-center justify-center tb:max-h-[181px]' />
|
|
22
25
|
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
23
28
|
</div>
|
|
24
|
-
</
|
|
29
|
+
</a>
|
|
25
30
|
</div>
|
|
26
31
|
</>
|
|
27
32
|
)
|
|
@@ -60,13 +60,16 @@ export default function Testimonial(props) {
|
|
|
60
60
|
|
|
61
61
|
</div>
|
|
62
62
|
<div className="flex pb-8 pl-6 pt-5">
|
|
63
|
+
<a href={cardHover?.slideCTA || ""}>
|
|
64
|
+
|
|
63
65
|
<HDSButton
|
|
64
66
|
className='flex'
|
|
65
67
|
label={cardHover.button['cta_text']}
|
|
66
68
|
type="secondaryLink"
|
|
67
69
|
btnTextHoverClass="hover:text-neutral-0"
|
|
68
70
|
btnTextColorClass='text-neutral-0'
|
|
69
|
-
|
|
71
|
+
/>
|
|
72
|
+
</a>
|
|
70
73
|
</div>
|
|
71
74
|
</div>
|
|
72
75
|
|
|
@@ -34,7 +34,7 @@ export default function HomeVC(props) {
|
|
|
34
34
|
</div>
|
|
35
35
|
|
|
36
36
|
<div className='overflow-x-hidden w-screen min-[699px]:hidden'>
|
|
37
|
-
<div className=' h-[600px] rounded flex flex-col items-center justify-cente overflow-hidden'>
|
|
37
|
+
<div className='max-[375]:h-[684px] h-[600px] rounded flex flex-col items-center justify-cente overflow-hidden'>
|
|
38
38
|
|
|
39
39
|
<div className=''>
|
|
40
40
|
<div className=''>
|
|
@@ -48,7 +48,7 @@ export default function HomeVC(props) {
|
|
|
48
48
|
/>
|
|
49
49
|
|
|
50
50
|
</div>
|
|
51
|
-
<div className='absolute max-[365px]:h-[657px] h-[600px] z-50 top-[72px]
|
|
51
|
+
<div className='absolute max-[365px]:h-[657px] h-[600px] z-50 top-[72px]'>
|
|
52
52
|
<div className=''>
|
|
53
53
|
< FeedbackCard
|
|
54
54
|
brandImgUrl={props.testimonial.card.title_img}
|
|
@@ -206,7 +206,7 @@ export default function CustomCarousel(props) {
|
|
|
206
206
|
{props.cards.map((item, i) => (
|
|
207
207
|
// <div className="max-[1140px]:snap-always tb:snap-always mx-5 max-[1140px]:shrink-0" key={i} ref={refs[i]}>
|
|
208
208
|
<div className=" snap-center mx-5 shrink-0 py-1" key={i} ref={refs[i]}>
|
|
209
|
-
<div className="w-full select-none rounded-3xl object-contain
|
|
209
|
+
<div className="w-full select-none rounded-3xl object-contain">
|
|
210
210
|
{React.createElement(props.component, item)}
|
|
211
211
|
</div>
|
|
212
212
|
|
|
@@ -67,7 +67,8 @@ export default function HomePageCarousePrimary(props) {
|
|
|
67
67
|
title: obj.slideHoverText || "",
|
|
68
68
|
button: {
|
|
69
69
|
cta_text: obj.slideCTAText || ""
|
|
70
|
-
}
|
|
70
|
+
},
|
|
71
|
+
slideCTA: obj?.slideCTA || ""
|
|
71
72
|
}
|
|
72
73
|
}
|
|
73
74
|
};
|
|
@@ -254,7 +255,8 @@ export default function HomePageCarousePrimary(props) {
|
|
|
254
255
|
</div>
|
|
255
256
|
</div>
|
|
256
257
|
</div>
|
|
257
|
-
|
|
258
|
+
{/* mobile */}
|
|
259
|
+
<div className="max-[369px]:mt-8 min-[400px]:-mt-[10rem] min-[699px]:hidden">
|
|
258
260
|
|
|
259
261
|
<div className="flex w-screen gap-6 justify-center ">
|
|
260
262
|
|
|
@@ -73,15 +73,15 @@ export default function V3Footer(props) {
|
|
|
73
73
|
return (
|
|
74
74
|
<div>
|
|
75
75
|
<div className='db-s:flex justify-between gap-10 db-s:gap-20 db:gap-40'>
|
|
76
|
-
<div className='
|
|
76
|
+
<div className='pb-10 db-s:pb-0 px-4 tb:px-0'>
|
|
77
77
|
<a href={props.brandLink} className=''>
|
|
78
|
-
<img src={props.brandUrl} alt={props.brandAlt} />
|
|
78
|
+
<img className="max-w-[125px]" src={props.brandUrl} alt={props.brandAlt} />
|
|
79
79
|
</a>
|
|
80
80
|
</div>
|
|
81
|
-
<div className='flex justify-between tb:justify-start tb-l:justify-between flex-1 flex-wrap gap-y-10 tb:gap-y-16'>
|
|
81
|
+
<div className='flex justify-between px-4 tb:px-0 tb:justify-start tb-l:justify-between flex-1 flex-wrap gap-y-10 tb:gap-y-16'>
|
|
82
82
|
{
|
|
83
83
|
props.footerLinks.map((footerLink, index) =>(
|
|
84
|
-
<div key={index} className='min-w-[
|
|
84
|
+
<div key={index} className='min-w-[130px] db-s:min-w-fit'>
|
|
85
85
|
<Typography textStyle='body3c-semi-bold' className='text-neutral-600'>{footerLink.title}</Typography>
|
|
86
86
|
{
|
|
87
87
|
footerLink.links.map((link, subIndex) => (
|
|
@@ -301,4 +301,4 @@ V3Footer.defaultProps = {
|
|
|
301
301
|
]
|
|
302
302
|
},
|
|
303
303
|
],
|
|
304
|
-
}
|
|
304
|
+
}
|
|
@@ -7,43 +7,50 @@ import { Icon } from '../../components/common-components/Icon';
|
|
|
7
7
|
export default function TextIconCard(props) {
|
|
8
8
|
return (
|
|
9
9
|
<div className="tb-m:flex gap-14 gap-y-14 gap-x-14 tb:gap-12 db-s:gap-20 db:gap-24">
|
|
10
|
-
<div className="pb-10 tb-m:pb-0 db-s:max-w-[524px] tb-m:w-1/2 w-full">
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
10
|
+
<div className="pb-10 tb-m:pb-0 db-s:max-w-[524px] tb-m:w-1/2 w-full flex flex-col justify-between">
|
|
11
|
+
<div>
|
|
12
|
+
{
|
|
13
|
+
props.tagline && (
|
|
14
|
+
<Typography textStyle="h6" as="h6" className="pb-2 uppercase text-blue-400">{props.tagline}</Typography>
|
|
15
|
+
)
|
|
16
|
+
}
|
|
17
|
+
{
|
|
18
|
+
props.title && (
|
|
19
|
+
<Typography textStyle="h3" as="h3" className="pb-2 text-neutral-1000">{props.title}</Typography>
|
|
20
|
+
)
|
|
21
|
+
}
|
|
22
|
+
{
|
|
23
|
+
props.description && (
|
|
24
|
+
<Typography textStyle="sub2" className="pb-6 text-neutral-600">{props.description}</Typography>
|
|
25
|
+
)
|
|
26
|
+
}
|
|
27
|
+
</div>
|
|
28
|
+
<div>
|
|
29
|
+
{
|
|
30
|
+
props.imgUrl && (
|
|
31
|
+
<div className="pb-4 pt-2">
|
|
32
|
+
<img className="max-w-[210px]" src={props.imgUrl} alt={((props.title) ? props.title : "Illu")} />
|
|
33
|
+
</div>
|
|
34
|
+
)
|
|
35
|
+
}
|
|
36
|
+
{props.button &&
|
|
37
|
+
<a href={props.button.cta_link} className="inline-flex " download target="_blank">
|
|
38
|
+
<HDSButton
|
|
39
|
+
label={props.button.cta_text}
|
|
40
|
+
type={props.button.cta_type || 'secondary'}
|
|
41
|
+
leftIconVariant='none'
|
|
42
|
+
rightIconVariant='none'
|
|
43
|
+
state='default'
|
|
44
|
+
size='md'
|
|
45
|
+
rightAnimatedArrow={true}
|
|
46
|
+
rightAnimatedArrowColor={props.button.rightAnimatedArrowColor || '#3970FD'}
|
|
47
|
+
animatedHoverStroke="group-hover:stroke-blue-600"
|
|
48
|
+
btnTextHoverClass="hover:text-blue-600"
|
|
49
|
+
btnTextColorClass="text-blue-500"
|
|
50
|
+
/>
|
|
51
|
+
</a>
|
|
52
|
+
}
|
|
53
|
+
</div>
|
|
47
54
|
</div>
|
|
48
55
|
{
|
|
49
56
|
props.iconCards && (
|
package/src/styles/tailwind.css
CHANGED
|
@@ -839,11 +839,6 @@ select{
|
|
|
839
839
|
position: relative;
|
|
840
840
|
}
|
|
841
841
|
|
|
842
|
-
.sticky{
|
|
843
|
-
position: -webkit-sticky;
|
|
844
|
-
position: sticky;
|
|
845
|
-
}
|
|
846
|
-
|
|
847
842
|
.inset-0{
|
|
848
843
|
inset: 0px;
|
|
849
844
|
}
|
|
@@ -1778,8 +1773,8 @@ select{
|
|
|
1778
1773
|
min-width: 112px;
|
|
1779
1774
|
}
|
|
1780
1775
|
|
|
1781
|
-
.min-w-\[
|
|
1782
|
-
min-width:
|
|
1776
|
+
.min-w-\[130px\]{
|
|
1777
|
+
min-width: 130px;
|
|
1783
1778
|
}
|
|
1784
1779
|
|
|
1785
1780
|
.min-w-\[169px\]{
|
|
@@ -9310,6 +9305,10 @@ select{
|
|
|
9310
9305
|
transition-duration: 150ms;
|
|
9311
9306
|
}
|
|
9312
9307
|
|
|
9308
|
+
.hover\:duration-200:hover{
|
|
9309
|
+
transition-duration: 200ms;
|
|
9310
|
+
}
|
|
9311
|
+
|
|
9313
9312
|
.hover\:duration-300:hover{
|
|
9314
9313
|
transition-duration: 300ms;
|
|
9315
9314
|
}
|
|
@@ -11087,6 +11086,10 @@ select{
|
|
|
11087
11086
|
border-radius: 0px;
|
|
11088
11087
|
}
|
|
11089
11088
|
|
|
11089
|
+
.db\:rounded-br-3xl{
|
|
11090
|
+
border-bottom-right-radius: 1.5rem;
|
|
11091
|
+
}
|
|
11092
|
+
|
|
11090
11093
|
.db\:rounded-tl-3xl{
|
|
11091
11094
|
border-top-left-radius: 1.5rem;
|
|
11092
11095
|
}
|