hds-web 1.10.2 → 1.10.3
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 +3 -3
- package/package.json +1 -1
- package/src/HDS/components/Cards/Announcement/announcementSm.js +3 -3
- package/src/HDS/components/Cards/Dropdown/v3Dropdown.js +13 -1
- package/src/HDS/components/Cards/Menu/flyoutA.js +7 -7
- package/src/HDS/components/Cards/Menu/flyoutB.js +5 -1
- package/src/HDS/components/Cards/Misc/iconCard.js +1 -1
- package/src/HDS/components/Carousels/customCarousel.js +4 -4
- package/src/HDS/components/Footers/v3Footer.js +3 -3
- package/src/HDS/components/Headers/v3Header.js +230 -210
- package/src/HDS/components/index.js +1 -1
- package/src/HDS/modules/TextCard/textIconCard.js +4 -4
- package/src/styles/tailwind.css +39 -34
|
@@ -34,123 +34,131 @@ function classNames(...classes) {
|
|
|
34
34
|
|
|
35
35
|
export default function V3Header(props) {
|
|
36
36
|
const [mobileNavOpen, toggleMobileNav] = useState(false);
|
|
37
|
-
const [isShowing, setIsShowing] = useState(
|
|
37
|
+
const [isShowing, setIsShowing] = useState(true)
|
|
38
38
|
|
|
39
39
|
const dropdown = (solutions) => (
|
|
40
|
-
<Transition
|
|
41
|
-
as={Fragment}
|
|
42
|
-
enter="transition ease-out duration-300"
|
|
43
|
-
enterFrom="opacity-0 -translate-y-[0px] "
|
|
44
|
-
enterTo="opacity-100 translate-y-[0px]"
|
|
45
|
-
leave="transition ease-in-out duration-300"
|
|
46
|
-
leaveFrom="opacity-100 translate-y-0"
|
|
47
|
-
leaveTo="opacity-0 translate-y-1"
|
|
48
|
-
>
|
|
49
|
-
<Popover.Panel className="fixed left-0 ml z-10 mt-3 transform ">
|
|
50
|
-
|
|
51
|
-
<div className=" p-2 bg-neutral-100 rounded-lg">
|
|
52
|
-
|
|
53
|
-
<V3Dropdown
|
|
54
|
-
primaryCard={{
|
|
55
|
-
iconVariant: 'home03',
|
|
56
|
-
mainDescription: 'description1',
|
|
57
|
-
primaryBtnLabel: 'label 1',
|
|
58
|
-
strokeClass: 'stroke-neutral-800'
|
|
59
|
-
}}
|
|
60
|
-
secondaryCardArr={[
|
|
61
|
-
{
|
|
62
|
-
childArray: [
|
|
63
|
-
{
|
|
64
|
-
description: '',
|
|
65
|
-
href: '#',
|
|
66
|
-
icon: 'cube01',
|
|
67
|
-
name: 'Analytics'
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
description: '',
|
|
71
|
-
href: '#',
|
|
72
|
-
icon: 'cube01',
|
|
73
|
-
name: 'Engagement'
|
|
74
|
-
},
|
|
75
|
-
{
|
|
76
|
-
description: '',
|
|
77
|
-
href: '#',
|
|
78
|
-
icon: 'cube01',
|
|
79
|
-
name: 'Security'
|
|
80
|
-
}
|
|
81
|
-
],
|
|
82
|
-
label: 'Label1'
|
|
83
|
-
},
|
|
84
|
-
{
|
|
85
|
-
childArray: [
|
|
86
|
-
{
|
|
87
|
-
description: '',
|
|
88
|
-
href: '#',
|
|
89
|
-
icon: 'cube01',
|
|
90
|
-
name: 'Analytics'
|
|
91
|
-
},
|
|
92
|
-
{
|
|
93
|
-
description: '',
|
|
94
|
-
href: '#',
|
|
95
|
-
icon: 'cube01',
|
|
96
|
-
name: 'Engagement'
|
|
97
|
-
},
|
|
98
|
-
{
|
|
99
|
-
description: '',
|
|
100
|
-
href: '#',
|
|
101
|
-
icon: 'cube01',
|
|
102
|
-
name: 'Security'
|
|
103
|
-
}
|
|
104
|
-
],
|
|
105
|
-
label: 'Label1'
|
|
106
|
-
}
|
|
107
|
-
]}
|
|
108
|
-
/>
|
|
109
40
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
41
|
+
<div className="fixed left-0 z-10 mt-3 transform ">
|
|
42
|
+
|
|
43
|
+
<div className=" p-2 bg-neutral-100 rounded-lg">
|
|
44
|
+
|
|
45
|
+
<V3Dropdown
|
|
46
|
+
primaryCard={{
|
|
47
|
+
iconVariant: 'hasura',
|
|
48
|
+
mainDescription: 'Choose from our open source community edition, fully managed cloud edition or custom enterprise',
|
|
49
|
+
primaryBtnLabel: 'Hasura Product',
|
|
50
|
+
strokeClass: 'stroke-neutral-800',
|
|
51
|
+
secondaryBtn : [
|
|
52
|
+
{ cta_leftVariantIcon: 'home03', cta_leftVariantIconColor: '#6C737F', cta_text: 'Compare plans' }
|
|
53
|
+
],
|
|
54
|
+
}}
|
|
55
|
+
secondaryCardArr={[
|
|
56
|
+
{
|
|
57
|
+
childArray: [
|
|
58
|
+
{
|
|
59
|
+
description: '',
|
|
60
|
+
href: '#',
|
|
61
|
+
icon: "lightning01",
|
|
62
|
+
name: 'Instant API',
|
|
63
|
+
strokeClass:'stroke-blue-500'
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
description: '',
|
|
67
|
+
href: '#',
|
|
68
|
+
icon: 'data',
|
|
69
|
+
name: 'Federation',
|
|
70
|
+
strokeClass: 'stroke-blue-500'
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
description: '',
|
|
74
|
+
href: '#',
|
|
75
|
+
icon: 'eye',
|
|
76
|
+
name: 'Authorization',
|
|
77
|
+
strokeClass: 'stroke-blue-500'
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
description: '',
|
|
81
|
+
href: '#',
|
|
82
|
+
icon: 'shieldtick',
|
|
83
|
+
name: 'API Security',
|
|
84
|
+
strokeClass: 'stroke-blue-500'
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
description: '',
|
|
88
|
+
href: '#',
|
|
89
|
+
icon: 'speedometer03',
|
|
90
|
+
name: 'Performance',
|
|
91
|
+
strokeClass: 'stroke-blue-500'
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
description: '',
|
|
95
|
+
href: '#',
|
|
96
|
+
icon: "barchartsquare01",
|
|
97
|
+
name: 'Observability',
|
|
98
|
+
strokeClass: 'stroke-blue-500'
|
|
99
|
+
}
|
|
100
|
+
],
|
|
101
|
+
label: 'CAPABILITIES'
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
childArray: [
|
|
105
|
+
{
|
|
106
|
+
description: '',
|
|
107
|
+
href: '#',
|
|
108
|
+
icon: 'cube01',
|
|
109
|
+
name: 'All DBs',
|
|
110
|
+
strokeClass: 'stroke-blue-500'
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
description: '',
|
|
114
|
+
href: '#',
|
|
115
|
+
icon: 'cube01',
|
|
116
|
+
name: 'Planned DBs',
|
|
117
|
+
strokeClass: 'stroke-blue-500'
|
|
118
|
+
},
|
|
119
|
+
],
|
|
120
|
+
label: 'Integrations'
|
|
121
|
+
}
|
|
122
|
+
]}
|
|
123
|
+
/>
|
|
124
|
+
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
|
|
113
128
|
)
|
|
114
129
|
|
|
115
|
-
const headerListfn = (HEADER_LIST) =>
|
|
116
|
-
(
|
|
130
|
+
const headerListfn = (HEADER_LIST) => (
|
|
117
131
|
<>
|
|
118
132
|
{HEADER_LIST.map((item, index) => (
|
|
119
|
-
<
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
{dropdown(item['titleDropdown'])}
|
|
144
|
-
</div>
|
|
145
|
-
|
|
146
|
-
</>
|
|
133
|
+
<div
|
|
134
|
+
className="relative"
|
|
135
|
+
key={index}
|
|
136
|
+
onMouseEnter={() => setIsShowing(true)}
|
|
137
|
+
|
|
138
|
+
>
|
|
139
|
+
<div
|
|
140
|
+
className={classNames(
|
|
141
|
+
'group inline-flex items-center rounded-md bg-white hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2',
|
|
142
|
+
isShowing ? '' : 'text-gray-500',
|
|
143
|
+
)}
|
|
144
|
+
>
|
|
145
|
+
<div className="flex flex-col items-center">
|
|
146
|
+
<Typography textStyle="body3c-medium">{`${item['title']}`}</Typography>
|
|
147
|
+
</div>
|
|
148
|
+
</div>
|
|
149
|
+
{isShowing && (
|
|
150
|
+
<div
|
|
151
|
+
className="-left-20 z-20 top-8"
|
|
152
|
+
onMouseEnter={() => setIsShowing(true)}
|
|
153
|
+
onMouseLeave={() => setIsShowing(false)} // Keep isShowing true when hovering over dropdown content
|
|
154
|
+
>
|
|
155
|
+
{dropdown(item['titleDropdown'])}
|
|
156
|
+
</div>
|
|
147
157
|
)}
|
|
148
|
-
</
|
|
149
|
-
)
|
|
150
|
-
)
|
|
151
|
-
}
|
|
158
|
+
</div>
|
|
159
|
+
))}
|
|
152
160
|
</>
|
|
153
|
-
)
|
|
161
|
+
);
|
|
154
162
|
|
|
155
163
|
let class1;
|
|
156
164
|
let class2;
|
|
@@ -173,9 +181,9 @@ export default function V3Header(props) {
|
|
|
173
181
|
<a href={props.headerUrl} className="flex items-center">
|
|
174
182
|
<Icon height='w-[103px] h-[33px]' variant={'hasuraPrimary'} strokeColor={''} />
|
|
175
183
|
</a>
|
|
176
|
-
<
|
|
184
|
+
<nav as="nav" className="hidden tb-l:pl-8 tb-l:flex tb-l:space-x-6">
|
|
177
185
|
{headerListfn(props.HEADER_LIST)}
|
|
178
|
-
</
|
|
186
|
+
</nav>
|
|
179
187
|
</div>
|
|
180
188
|
<div className='flex tb-l:justify-between'>
|
|
181
189
|
<div className=" tb-l:flex tb-l:flex-1 tb-l:items-center tb-l:justify-between">
|
|
@@ -224,7 +232,7 @@ export default function V3Header(props) {
|
|
|
224
232
|
<div className="tb-l:hidden overflow-auto flex items-center">
|
|
225
233
|
{/* <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white pl-6 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
|
|
226
234
|
<span className="sr-only">Open menu</span> */}
|
|
227
|
-
|
|
235
|
+
|
|
228
236
|
<div className="tb:hidden absolute right-4 top-1/2 block w-5 h-5 z-[60]" onClick={() => toggleMobileNav(!mobileNavOpen)}>
|
|
229
237
|
<div aria-hidden="true" className={`${class1}block absolute h-0.5 w-5 bg-neutral-800 transform transition duration-500 ease-in-out`}></div>
|
|
230
238
|
<div aria-hidden="true" className={`${class2}block absolute h-0.5 w-5 bg-neutral-800 transform transition duration-500 ease-in-out`}></div>
|
|
@@ -235,74 +243,74 @@ export default function V3Header(props) {
|
|
|
235
243
|
<div className="bg-neutral-100 grid rounded-2xl h-screen ">
|
|
236
244
|
<div className="flex flex-col justify-between">
|
|
237
245
|
<div className="flex flex-col justify-between rounded-2xl h-full">
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
+
<div className=" mt-20 flex flex-col gap-6 ml-4">
|
|
247
|
+
<div className='flex flex-col mr-8 items-center'>
|
|
248
|
+
<img
|
|
249
|
+
className="inline-block w-full "
|
|
250
|
+
src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1683015500/hasura-con-2023/engage_clgotb.png"
|
|
251
|
+
alt=""
|
|
252
|
+
/>
|
|
253
|
+
</div>
|
|
246
254
|
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
255
|
+
<nav className="grid divide-y mr-8 bg-neutral-0 divide-neutral-200 border border-neutral-200 rounded-3xl ">
|
|
256
|
+
{props.HEADER_LIST.map((item) => (
|
|
257
|
+
<a
|
|
258
|
+
key={item['title']}
|
|
259
|
+
href='#'
|
|
260
|
+
className="flex justify-between items-center p-4"
|
|
261
|
+
>
|
|
254
262
|
|
|
255
|
-
|
|
263
|
+
<div className="flex items-center justify-center gap-2 ">
|
|
256
264
|
|
|
257
|
-
|
|
265
|
+
<Icon height='h-5 w-5' variant={'home03'} strokeColor={'#3970FD'} />
|
|
258
266
|
|
|
259
267
|
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
268
|
+
<Typography textStyle='body3c-medium' className='text-neutral-900'>
|
|
269
|
+
{`${item['title']}`}
|
|
270
|
+
</Typography>
|
|
271
|
+
</div>
|
|
264
272
|
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
273
|
+
<Icon height='h-5 w-5 stroke-[1.5px]' variant={'chevronright'} strokeClass='stroke-neutral-500' />
|
|
274
|
+
</a>
|
|
275
|
+
))}
|
|
276
|
+
</nav>
|
|
277
|
+
</div>
|
|
270
278
|
<div className="py-6 shadow-sh1 bg-neutral-0 px-5 mr-2 self-end w-full">
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
</div>
|
|
279
|
+
<div className="">
|
|
280
|
+
<div className='flex flex-row justify-around'>
|
|
281
|
+
<div className='w-full flex gap-2'>
|
|
282
|
+
<div className='w-1/2'>
|
|
283
|
+
<HDSButton
|
|
284
|
+
label="Log In"
|
|
285
|
+
type='tonal'
|
|
286
|
+
leftIconVariant='none'
|
|
287
|
+
rightIconVariant='none'
|
|
288
|
+
state='default'
|
|
289
|
+
size='sm'
|
|
290
|
+
rightAnimatedArrow='true'
|
|
291
|
+
rightAnimatedArrowColor='#3970FD'
|
|
292
|
+
animatedHoverStroke='group-hover:stroke-neutral-0'
|
|
293
|
+
|
|
294
|
+
|
|
295
|
+
/>
|
|
296
|
+
</div>
|
|
297
|
+
<div className='w-1/2'>
|
|
298
|
+
<HDSButton
|
|
299
|
+
label="Sign up"
|
|
300
|
+
type='primary'
|
|
301
|
+
leftIconVariant='none'
|
|
302
|
+
rightIconVariant='none'
|
|
303
|
+
state='default'
|
|
304
|
+
size='sm'
|
|
305
|
+
rightAnimatedArrow='true'
|
|
306
|
+
rightAnimatedArrowColor='#ffffff'
|
|
307
|
+
animatedHoverStroke='group-hover:stroke-neutral-0'
|
|
308
|
+
/>
|
|
302
309
|
</div>
|
|
303
310
|
</div>
|
|
304
311
|
</div>
|
|
305
312
|
</div>
|
|
313
|
+
</div>
|
|
306
314
|
</div>
|
|
307
315
|
</div>
|
|
308
316
|
</div>
|
|
@@ -413,7 +421,7 @@ export default function V3Header(props) {
|
|
|
413
421
|
V3Header.defaultProps = {
|
|
414
422
|
HEADER_LIST: [
|
|
415
423
|
{
|
|
416
|
-
title: '
|
|
424
|
+
title: 'Product',
|
|
417
425
|
titleDropdown: [
|
|
418
426
|
{
|
|
419
427
|
name: 'Analytics',
|
|
@@ -428,62 +436,74 @@ V3Header.defaultProps = {
|
|
|
428
436
|
icon: 'home03',
|
|
429
437
|
},
|
|
430
438
|
{
|
|
431
|
-
name: '
|
|
439
|
+
name: 's',
|
|
432
440
|
description: 'Your customers’ data will be safe and secure.',
|
|
433
441
|
href: '#',
|
|
434
442
|
icon: 'home03'
|
|
435
443
|
},
|
|
436
|
-
],
|
|
437
|
-
},
|
|
438
|
-
{
|
|
439
|
-
|
|
440
|
-
title: 'Developer',
|
|
441
|
-
titleDropdown: [
|
|
442
|
-
{
|
|
443
|
-
name: 'Analytics',
|
|
444
|
-
description: 'Get a better understanding of where your traffic is coming from.',
|
|
445
|
-
href: '#',
|
|
446
|
-
icon: 'home03',
|
|
447
|
-
},
|
|
448
444
|
{
|
|
449
|
-
name: '
|
|
450
|
-
description: 'Speak directly to your customers in a more meaningful way.',
|
|
451
|
-
href: '#',
|
|
452
|
-
icon: 'home03',
|
|
453
|
-
},
|
|
454
|
-
{
|
|
455
|
-
name: 'Security',
|
|
445
|
+
name: 'Securidty',
|
|
456
446
|
description: 'Your customers’ data will be safe and secure.',
|
|
457
447
|
href: '#',
|
|
458
448
|
icon: 'home03'
|
|
459
449
|
},
|
|
460
|
-
],
|
|
461
|
-
},
|
|
462
|
-
{
|
|
463
|
-
|
|
464
|
-
title: 'Pricing',
|
|
465
|
-
titleDropdown: [
|
|
466
|
-
{
|
|
467
|
-
name: 'Analytics',
|
|
468
|
-
description: 'Get a better understanding of where your traffic is coming from.',
|
|
469
|
-
href: '#',
|
|
470
|
-
icon: 'home03',
|
|
471
|
-
},
|
|
472
450
|
{
|
|
473
|
-
name: '
|
|
474
|
-
description: 'Speak directly to your customers in a more meaningful way.',
|
|
475
|
-
href: '#',
|
|
476
|
-
icon: 'home03',
|
|
477
|
-
},
|
|
478
|
-
{
|
|
479
|
-
name: 'Security',
|
|
451
|
+
name: 'Secudristy',
|
|
480
452
|
description: 'Your customers’ data will be safe and secure.',
|
|
481
453
|
href: '#',
|
|
482
454
|
icon: 'home03'
|
|
483
455
|
},
|
|
484
|
-
]
|
|
456
|
+
],
|
|
485
457
|
},
|
|
486
|
-
|
|
458
|
+
// {
|
|
459
|
+
|
|
460
|
+
// title: 'Developer',
|
|
461
|
+
// titleDropdown: [
|
|
462
|
+
// {
|
|
463
|
+
// name: 'Analytics',
|
|
464
|
+
// description: 'Get a better understanding of where your traffic is coming from.',
|
|
465
|
+
// href: '#',
|
|
466
|
+
// icon: 'home03',
|
|
467
|
+
// },
|
|
468
|
+
// {
|
|
469
|
+
// name: 'Engagement',
|
|
470
|
+
// description: 'Speak directly to your customers in a more meaningful way.',
|
|
471
|
+
// href: '#',
|
|
472
|
+
// icon: 'home03',
|
|
473
|
+
// },
|
|
474
|
+
// {
|
|
475
|
+
// name: 'Security',
|
|
476
|
+
// description: 'Your customers’ data will be safe and secure.',
|
|
477
|
+
// href: '#',
|
|
478
|
+
// icon: 'home03'
|
|
479
|
+
// },
|
|
480
|
+
// ],
|
|
481
|
+
// },
|
|
482
|
+
// {
|
|
483
|
+
|
|
484
|
+
// title: 'Pricing',
|
|
485
|
+
// titleDropdown: [
|
|
486
|
+
// {
|
|
487
|
+
// name: 'Analytics',
|
|
488
|
+
// description: 'Get a better understanding of where your traffic is coming from.',
|
|
489
|
+
// href: '#',
|
|
490
|
+
// icon: 'home03',
|
|
491
|
+
// },
|
|
492
|
+
// {
|
|
493
|
+
// name: 'Engagement',
|
|
494
|
+
// description: 'Speak directly to your customers in a more meaningful way.',
|
|
495
|
+
// href: '#',
|
|
496
|
+
// icon: 'home03',
|
|
497
|
+
// },
|
|
498
|
+
// {
|
|
499
|
+
// name: 'Security',
|
|
500
|
+
// description: 'Your customers’ data will be safe and secure.',
|
|
501
|
+
// href: '#',
|
|
502
|
+
// icon: 'home03'
|
|
503
|
+
// },
|
|
504
|
+
// ]
|
|
505
|
+
// },
|
|
506
|
+
|
|
487
507
|
|
|
488
508
|
],
|
|
489
509
|
headerUrl: 'https://hasura.io/'
|
|
@@ -7,7 +7,7 @@ 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="db-s:max-w-[524px] tb-m:w-1/2 w-full">
|
|
10
|
+
<div className="pb-10 tb-m:pb-0 db-s:max-w-[524px] tb-m:w-1/2 w-full">
|
|
11
11
|
{
|
|
12
12
|
props.tagline && (
|
|
13
13
|
<Typography textStyle="h6" as="h6" className="pb-2 uppercase text-blue-400">{props.tagline}</Typography>
|
|
@@ -47,15 +47,15 @@ export default function TextIconCard(props) {
|
|
|
47
47
|
</div>
|
|
48
48
|
{
|
|
49
49
|
props.iconCards && (
|
|
50
|
-
<div className="flex-1 pt-
|
|
50
|
+
<div className="flex-1 pt-10 tb-m:pt-0 border-t border-neutral-200 tb-m:border-t-0">
|
|
51
51
|
{
|
|
52
52
|
props.iconCards.map((card, index) => (
|
|
53
|
-
<div className="pb-6 tb:pb-10 tb-l:pb-16 last:pb-0 flex" key={index}>
|
|
53
|
+
<div className="pb-6 tb:pb-10 tb-l:pb-16 last:pb-0 tb:flex" key={index}>
|
|
54
54
|
<div className={"w-12 h-12 min-w-[48px] rounded-full flex justify-center items-center mr-5 " + ((card.iconBgClass) ? HDSColor(card.iconBgClass) : "bg-blue-300")}>
|
|
55
55
|
<Icon height={'h-6 w-6 stroke-[1.5px]'} variant={((card.iconName) ? card.iconName : 'cube02')} strokeClass='stroke-neutral-1000' />
|
|
56
56
|
</div>
|
|
57
57
|
<div>
|
|
58
|
-
<Typography textStyle="h4" as="h4" className="pb-2 text-neutral-1000">{card.title}</Typography>
|
|
58
|
+
<Typography textStyle="h4" as="h4" className="pb-2 pt-4 tb:pt-0 text-neutral-1000">{card.title}</Typography>
|
|
59
59
|
<Typography textStyle="body1" className="text-neutral-600">{card.description}</Typography>
|
|
60
60
|
</div>
|
|
61
61
|
</div>
|