hds-web 1.10.2 → 1.10.4
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 -209
- package/src/HDS/components/index.js +1 -1
- package/src/HDS/modules/TextCard/textIconCard.js +4 -4
- package/src/styles/tailwind.css +58 -38
|
@@ -37,120 +37,129 @@ export default function V3Header(props) {
|
|
|
37
37
|
const [isShowing, setIsShowing] = useState(false)
|
|
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
|
-
|
|
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)}
|
|
154
|
+
onScroll={()=> setIsShowing(false)} // Keep isShowing true when hovering over dropdown content
|
|
155
|
+
>
|
|
156
|
+
{dropdown(item['titleDropdown'])}
|
|
157
|
+
</div>
|
|
147
158
|
)}
|
|
148
|
-
</
|
|
149
|
-
)
|
|
150
|
-
)
|
|
151
|
-
}
|
|
159
|
+
</div>
|
|
160
|
+
))}
|
|
152
161
|
</>
|
|
153
|
-
)
|
|
162
|
+
);
|
|
154
163
|
|
|
155
164
|
let class1;
|
|
156
165
|
let class2;
|
|
@@ -173,9 +182,9 @@ export default function V3Header(props) {
|
|
|
173
182
|
<a href={props.headerUrl} className="flex items-center">
|
|
174
183
|
<Icon height='w-[103px] h-[33px]' variant={'hasuraPrimary'} strokeColor={''} />
|
|
175
184
|
</a>
|
|
176
|
-
<
|
|
185
|
+
<nav as="nav" className="hidden tb-l:pl-8 tb-l:flex tb-l:space-x-6">
|
|
177
186
|
{headerListfn(props.HEADER_LIST)}
|
|
178
|
-
</
|
|
187
|
+
</nav>
|
|
179
188
|
</div>
|
|
180
189
|
<div className='flex tb-l:justify-between'>
|
|
181
190
|
<div className=" tb-l:flex tb-l:flex-1 tb-l:items-center tb-l:justify-between">
|
|
@@ -224,7 +233,7 @@ export default function V3Header(props) {
|
|
|
224
233
|
<div className="tb-l:hidden overflow-auto flex items-center">
|
|
225
234
|
{/* <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
235
|
<span className="sr-only">Open menu</span> */}
|
|
227
|
-
|
|
236
|
+
|
|
228
237
|
<div className="tb:hidden absolute right-4 top-1/2 block w-5 h-5 z-[60]" onClick={() => toggleMobileNav(!mobileNavOpen)}>
|
|
229
238
|
<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
239
|
<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 +244,74 @@ export default function V3Header(props) {
|
|
|
235
244
|
<div className="bg-neutral-100 grid rounded-2xl h-screen ">
|
|
236
245
|
<div className="flex flex-col justify-between">
|
|
237
246
|
<div className="flex flex-col justify-between rounded-2xl h-full">
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
247
|
+
<div className=" mt-20 flex flex-col gap-6 ml-4">
|
|
248
|
+
<div className='flex flex-col mr-8 items-center'>
|
|
249
|
+
<img
|
|
250
|
+
className="inline-block w-full "
|
|
251
|
+
src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1683015500/hasura-con-2023/engage_clgotb.png"
|
|
252
|
+
alt=""
|
|
253
|
+
/>
|
|
254
|
+
</div>
|
|
246
255
|
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
256
|
+
<nav className="grid divide-y mr-8 bg-neutral-0 divide-neutral-200 border border-neutral-200 rounded-3xl ">
|
|
257
|
+
{props.HEADER_LIST.map((item) => (
|
|
258
|
+
<a
|
|
259
|
+
key={item['title']}
|
|
260
|
+
href='#'
|
|
261
|
+
className="flex justify-between items-center p-4"
|
|
262
|
+
>
|
|
254
263
|
|
|
255
|
-
|
|
264
|
+
<div className="flex items-center justify-center gap-2 ">
|
|
256
265
|
|
|
257
|
-
|
|
266
|
+
<Icon height='h-5 w-5' variant={'home03'} strokeColor={'#3970FD'} />
|
|
258
267
|
|
|
259
268
|
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
269
|
+
<Typography textStyle='body3c-medium' className='text-neutral-900'>
|
|
270
|
+
{`${item['title']}`}
|
|
271
|
+
</Typography>
|
|
272
|
+
</div>
|
|
264
273
|
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
274
|
+
<Icon height='h-5 w-5 stroke-[1.5px]' variant={'chevronright'} strokeClass='stroke-neutral-500' />
|
|
275
|
+
</a>
|
|
276
|
+
))}
|
|
277
|
+
</nav>
|
|
278
|
+
</div>
|
|
270
279
|
<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>
|
|
280
|
+
<div className="">
|
|
281
|
+
<div className='flex flex-row justify-around'>
|
|
282
|
+
<div className='w-full flex gap-2'>
|
|
283
|
+
<div className='w-1/2'>
|
|
284
|
+
<HDSButton
|
|
285
|
+
label="Log In"
|
|
286
|
+
type='tonal'
|
|
287
|
+
leftIconVariant='none'
|
|
288
|
+
rightIconVariant='none'
|
|
289
|
+
state='default'
|
|
290
|
+
size='sm'
|
|
291
|
+
rightAnimatedArrow='true'
|
|
292
|
+
rightAnimatedArrowColor='#3970FD'
|
|
293
|
+
animatedHoverStroke='group-hover:stroke-neutral-0'
|
|
294
|
+
|
|
295
|
+
|
|
296
|
+
/>
|
|
297
|
+
</div>
|
|
298
|
+
<div className='w-1/2'>
|
|
299
|
+
<HDSButton
|
|
300
|
+
label="Sign up"
|
|
301
|
+
type='primary'
|
|
302
|
+
leftIconVariant='none'
|
|
303
|
+
rightIconVariant='none'
|
|
304
|
+
state='default'
|
|
305
|
+
size='sm'
|
|
306
|
+
rightAnimatedArrow='true'
|
|
307
|
+
rightAnimatedArrowColor='#ffffff'
|
|
308
|
+
animatedHoverStroke='group-hover:stroke-neutral-0'
|
|
309
|
+
/>
|
|
302
310
|
</div>
|
|
303
311
|
</div>
|
|
304
312
|
</div>
|
|
305
313
|
</div>
|
|
314
|
+
</div>
|
|
306
315
|
</div>
|
|
307
316
|
</div>
|
|
308
317
|
</div>
|
|
@@ -413,7 +422,7 @@ export default function V3Header(props) {
|
|
|
413
422
|
V3Header.defaultProps = {
|
|
414
423
|
HEADER_LIST: [
|
|
415
424
|
{
|
|
416
|
-
title: '
|
|
425
|
+
title: 'Product',
|
|
417
426
|
titleDropdown: [
|
|
418
427
|
{
|
|
419
428
|
name: 'Analytics',
|
|
@@ -428,62 +437,74 @@ V3Header.defaultProps = {
|
|
|
428
437
|
icon: 'home03',
|
|
429
438
|
},
|
|
430
439
|
{
|
|
431
|
-
name: '
|
|
440
|
+
name: 's',
|
|
432
441
|
description: 'Your customers’ data will be safe and secure.',
|
|
433
442
|
href: '#',
|
|
434
443
|
icon: 'home03'
|
|
435
444
|
},
|
|
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
445
|
{
|
|
449
|
-
name: '
|
|
450
|
-
description: 'Speak directly to your customers in a more meaningful way.',
|
|
451
|
-
href: '#',
|
|
452
|
-
icon: 'home03',
|
|
453
|
-
},
|
|
454
|
-
{
|
|
455
|
-
name: 'Security',
|
|
446
|
+
name: 'Securidty',
|
|
456
447
|
description: 'Your customers’ data will be safe and secure.',
|
|
457
448
|
href: '#',
|
|
458
449
|
icon: 'home03'
|
|
459
450
|
},
|
|
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
451
|
{
|
|
473
|
-
name: '
|
|
474
|
-
description: 'Speak directly to your customers in a more meaningful way.',
|
|
475
|
-
href: '#',
|
|
476
|
-
icon: 'home03',
|
|
477
|
-
},
|
|
478
|
-
{
|
|
479
|
-
name: 'Security',
|
|
452
|
+
name: 'Secudristy',
|
|
480
453
|
description: 'Your customers’ data will be safe and secure.',
|
|
481
454
|
href: '#',
|
|
482
455
|
icon: 'home03'
|
|
483
456
|
},
|
|
484
|
-
]
|
|
457
|
+
],
|
|
485
458
|
},
|
|
486
|
-
|
|
459
|
+
// {
|
|
460
|
+
|
|
461
|
+
// title: 'Developer',
|
|
462
|
+
// titleDropdown: [
|
|
463
|
+
// {
|
|
464
|
+
// name: 'Analytics',
|
|
465
|
+
// description: 'Get a better understanding of where your traffic is coming from.',
|
|
466
|
+
// href: '#',
|
|
467
|
+
// icon: 'home03',
|
|
468
|
+
// },
|
|
469
|
+
// {
|
|
470
|
+
// name: 'Engagement',
|
|
471
|
+
// description: 'Speak directly to your customers in a more meaningful way.',
|
|
472
|
+
// href: '#',
|
|
473
|
+
// icon: 'home03',
|
|
474
|
+
// },
|
|
475
|
+
// {
|
|
476
|
+
// name: 'Security',
|
|
477
|
+
// description: 'Your customers’ data will be safe and secure.',
|
|
478
|
+
// href: '#',
|
|
479
|
+
// icon: 'home03'
|
|
480
|
+
// },
|
|
481
|
+
// ],
|
|
482
|
+
// },
|
|
483
|
+
// {
|
|
484
|
+
|
|
485
|
+
// title: 'Pricing',
|
|
486
|
+
// titleDropdown: [
|
|
487
|
+
// {
|
|
488
|
+
// name: 'Analytics',
|
|
489
|
+
// description: 'Get a better understanding of where your traffic is coming from.',
|
|
490
|
+
// href: '#',
|
|
491
|
+
// icon: 'home03',
|
|
492
|
+
// },
|
|
493
|
+
// {
|
|
494
|
+
// name: 'Engagement',
|
|
495
|
+
// description: 'Speak directly to your customers in a more meaningful way.',
|
|
496
|
+
// href: '#',
|
|
497
|
+
// icon: 'home03',
|
|
498
|
+
// },
|
|
499
|
+
// {
|
|
500
|
+
// name: 'Security',
|
|
501
|
+
// description: 'Your customers’ data will be safe and secure.',
|
|
502
|
+
// href: '#',
|
|
503
|
+
// icon: 'home03'
|
|
504
|
+
// },
|
|
505
|
+
// ]
|
|
506
|
+
// },
|
|
507
|
+
|
|
487
508
|
|
|
488
509
|
],
|
|
489
510
|
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>
|