hds-web 1.16.6 → 1.16.8
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 +5 -5
- package/dist/index.js +5 -5
- package/package.json +1 -1
- package/src/HDS/assets/icons/queries.svg +1 -1
- package/src/HDS/assets/icons/x-close.svg +1 -1
- package/src/HDS/components/Cards/Dropdown/v3Dropdown.js +2 -2
- package/src/HDS/components/Cards/TalkDetailCard/talkDetailCard.js +66 -5
- package/src/HDS/components/Headers/v3Header.js +974 -412
- package/src/HDS/helpers/Paperform/index.js +1 -0
- package/src/HDS/helpers/Paperform/paperform.js +107 -0
- package/src/HDS/helpers/Paperform/utils/index.js +1 -0
- package/src/HDS/helpers/Paperform/utils/readcookie.js +28 -0
- package/src/HDS/helpers/index.js +2 -1
- package/src/HDS/modules/TextCard/textCard.js +12 -12
- package/src/styles/tailwind.css +100 -51
|
@@ -33,156 +33,840 @@ function classNames(...classes) {
|
|
|
33
33
|
return classes.filter(Boolean).join(' ')
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
|
|
38
36
|
export default function V3Header(props) {
|
|
39
|
-
const listSize = props.HEADER_LIST.length;
|
|
40
37
|
const [mobileNavOpen, setmobileNavOpen] = useState(false);
|
|
41
38
|
const [isProduct, setIsProduct] = useState(false)
|
|
42
39
|
const [isDeveloper, setIsDeveloper] = useState(false)
|
|
43
40
|
const [isCompany, setIsCompany] = useState(false)
|
|
44
41
|
const [currentTab, setCurrentTab] = useState('')
|
|
45
|
-
const [isShown, setIsShown] = useState(false)
|
|
46
42
|
const [isArrowActive, setIsArrowActive] = useState(false)
|
|
47
43
|
|
|
48
|
-
|
|
49
|
-
const [dropdownVisibility, setDropdownVisibility] = useState(Array(props.HEADER_LIST.length).fill(false));
|
|
50
|
-
console.log(mobileNavOpen, isProduct, dropdownVisibility, currentTab)
|
|
51
|
-
const handleDropdownEnter = (index) => {
|
|
52
|
-
setDropdownVisibility((prevVisibility) => {
|
|
53
|
-
const updatedVisibility = [...prevVisibility];
|
|
54
|
-
updatedVisibility[index] = true;
|
|
55
|
-
return updatedVisibility;
|
|
56
|
-
});
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
const handleDropdownLeave = (index) => {
|
|
60
|
-
setDropdownVisibility((prevVisibility) => {
|
|
61
|
-
const updatedVisibility = [...prevVisibility];
|
|
62
|
-
updatedVisibility[index] = false;
|
|
63
|
-
return updatedVisibility;
|
|
64
|
-
});
|
|
65
|
-
};
|
|
66
|
-
|
|
67
|
-
const renderDropdown = (primaryCard, secondaryCardArr, tertiaryCard) => (
|
|
44
|
+
const dropdownA = (solutions) => (
|
|
68
45
|
<div>
|
|
69
46
|
<div>
|
|
70
|
-
<hr className=
|
|
47
|
+
<hr className='w-full h-9 border-0 ' />
|
|
71
48
|
</div>
|
|
72
|
-
|
|
49
|
+
|
|
50
|
+
<div className=" p-2 bg-neutral-150 rounded-3xl ">
|
|
73
51
|
<V3Dropdown
|
|
74
|
-
primaryCard={
|
|
75
|
-
|
|
76
|
-
|
|
52
|
+
primaryCard={{
|
|
53
|
+
iconVariant: 'hasura',
|
|
54
|
+
mainDescription: 'Choose from our open source community edition, fully managed cloud edition or custom enterprise',
|
|
55
|
+
primaryBtnLabel: 'Hasura Product',
|
|
56
|
+
strokeClass: 'stroke-neutral-800',
|
|
57
|
+
secondaryBtn: [
|
|
58
|
+
{ cta_leftVariantIcon: 'home03', cta_leftVariantIconColor: '#6C737F', cta_text: 'Compare plans' }
|
|
59
|
+
],
|
|
60
|
+
}}
|
|
61
|
+
secondaryCardArr={[
|
|
62
|
+
{
|
|
63
|
+
split: true,
|
|
64
|
+
childArray: [
|
|
65
|
+
{
|
|
66
|
+
description: '',
|
|
67
|
+
href: '#',
|
|
68
|
+
icon: "lightning01",
|
|
69
|
+
name: 'Instant API',
|
|
70
|
+
strokeClass: 'stroke-blue-500'
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
description: '',
|
|
74
|
+
href: '#',
|
|
75
|
+
icon: 'data',
|
|
76
|
+
name: 'Federation',
|
|
77
|
+
strokeClass: 'stroke-blue-500'
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
description: '',
|
|
81
|
+
href: '#',
|
|
82
|
+
icon: 'eye',
|
|
83
|
+
name: 'Authorization',
|
|
84
|
+
strokeClass: 'stroke-blue-500'
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
description: '',
|
|
88
|
+
href: '#',
|
|
89
|
+
icon: 'shieldtick',
|
|
90
|
+
name: 'API Security',
|
|
91
|
+
strokeClass: 'stroke-blue-500'
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
description: '',
|
|
95
|
+
href: '#',
|
|
96
|
+
icon: 'speedometer03',
|
|
97
|
+
name: 'Performance',
|
|
98
|
+
strokeClass: 'stroke-blue-500'
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
description: '',
|
|
102
|
+
href: '#',
|
|
103
|
+
icon: "barchartsquare01",
|
|
104
|
+
name: 'Observability',
|
|
105
|
+
strokeClass: 'stroke-blue-500'
|
|
106
|
+
}
|
|
107
|
+
],
|
|
108
|
+
label: 'CAPABILITIES'
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
childArray: [
|
|
112
|
+
{
|
|
113
|
+
description: '',
|
|
114
|
+
href: '#',
|
|
115
|
+
icon: 'database01',
|
|
116
|
+
name: 'All DBs',
|
|
117
|
+
strokeClass: 'stroke-blue-500'
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
description: '',
|
|
121
|
+
href: '#',
|
|
122
|
+
icon: 'checksquare',
|
|
123
|
+
name: 'Planned DBs',
|
|
124
|
+
strokeClass: 'stroke-blue-500'
|
|
125
|
+
},
|
|
126
|
+
],
|
|
127
|
+
label: 'Integrations'
|
|
128
|
+
}
|
|
129
|
+
]}
|
|
77
130
|
/>
|
|
78
131
|
</div>
|
|
79
132
|
</div>
|
|
80
|
-
)
|
|
133
|
+
)
|
|
134
|
+
const dropdownB = (solutions) => (
|
|
135
|
+
<div>
|
|
136
|
+
<div>
|
|
137
|
+
<hr className='w-full h-9 border-0 ' />
|
|
138
|
+
</div>
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
<div className=" p-2 bg-neutral-150 rounded-3xl ">
|
|
142
|
+
<V3Dropdown
|
|
143
|
+
|
|
144
|
+
secondaryCardArr={[
|
|
145
|
+
{
|
|
146
|
+
childArray: [
|
|
147
|
+
{
|
|
148
|
+
description: '',
|
|
149
|
+
href: '#',
|
|
150
|
+
icon: "file02",
|
|
151
|
+
name: 'Documentation',
|
|
152
|
+
strokeClass: 'stroke-blue-500'
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
description: '',
|
|
156
|
+
href: '#',
|
|
157
|
+
icon: 'hasura',
|
|
158
|
+
name: 'Hasura hub',
|
|
159
|
+
strokeClass: 'stroke-blue-500'
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
description: '',
|
|
163
|
+
href: '#',
|
|
164
|
+
icon: 'route',
|
|
165
|
+
name: 'Guides',
|
|
166
|
+
strokeClass: 'stroke-blue-500'
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
description: '',
|
|
170
|
+
href: '#',
|
|
171
|
+
icon: 'asterisk02',
|
|
172
|
+
name: 'GraphQL hub',
|
|
173
|
+
strokeClass: 'stroke-blue-500'
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
description: '',
|
|
177
|
+
href: '#',
|
|
178
|
+
icon: "codebrowser",
|
|
179
|
+
name: 'GraphQL',
|
|
180
|
+
strokeClass: 'stroke-blue-500'
|
|
181
|
+
},
|
|
182
|
+
{
|
|
183
|
+
description: '',
|
|
184
|
+
href: '#',
|
|
185
|
+
icon: 'gitpullrequest',
|
|
186
|
+
name: 'Changelog',
|
|
187
|
+
strokeClass: 'stroke-blue-500'
|
|
188
|
+
}
|
|
189
|
+
],
|
|
190
|
+
label: 'BUILD'
|
|
191
|
+
},
|
|
192
|
+
{
|
|
193
|
+
|
|
194
|
+
childArray: [
|
|
195
|
+
{
|
|
196
|
+
description: '',
|
|
197
|
+
href: '#',
|
|
198
|
+
icon: 'bookopen01',
|
|
199
|
+
name: 'Blog',
|
|
200
|
+
strokeClass: 'stroke-blue-500'
|
|
201
|
+
},
|
|
202
|
+
{
|
|
203
|
+
description: '',
|
|
204
|
+
href: '#',
|
|
205
|
+
icon: 'videorecorder',
|
|
206
|
+
name: 'Tech talks',
|
|
207
|
+
strokeClass: 'stroke-blue-500'
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
description: '',
|
|
211
|
+
href: '#',
|
|
212
|
+
icon: 'graduationhat02',
|
|
213
|
+
name: 'Tutorials',
|
|
214
|
+
strokeClass: 'stroke-blue-500'
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
description: '',
|
|
218
|
+
href: '#',
|
|
219
|
+
icon: 'calendarplus02',
|
|
220
|
+
name: 'Events',
|
|
221
|
+
strokeClass: 'stroke-blue-500'
|
|
222
|
+
},
|
|
223
|
+
{
|
|
224
|
+
description: '',
|
|
225
|
+
href: '#',
|
|
226
|
+
icon: 'box',
|
|
227
|
+
name: 'Resources',
|
|
228
|
+
strokeClass: 'stroke-blue-500'
|
|
229
|
+
},
|
|
230
|
+
],
|
|
231
|
+
label: 'Learn',
|
|
232
|
+
|
|
233
|
+
},
|
|
234
|
+
{
|
|
235
|
+
|
|
236
|
+
childArray: [
|
|
237
|
+
{
|
|
238
|
+
description: '',
|
|
239
|
+
href: '#',
|
|
240
|
+
icon: 'users01',
|
|
241
|
+
name: 'Community',
|
|
242
|
+
strokeClass: 'stroke-blue-500'
|
|
243
|
+
},
|
|
244
|
+
{
|
|
245
|
+
description: '',
|
|
246
|
+
href: '#',
|
|
247
|
+
icon: 'cube01',
|
|
248
|
+
name: 'Discord',
|
|
249
|
+
strokeClass: 'stroke-blue-500'
|
|
250
|
+
},
|
|
251
|
+
{
|
|
252
|
+
description: '',
|
|
253
|
+
href: '#',
|
|
254
|
+
icon: 'cube01',
|
|
255
|
+
name: 'Forum',
|
|
256
|
+
strokeClass: 'stroke-blue-500'
|
|
257
|
+
},
|
|
258
|
+
{
|
|
259
|
+
description: '',
|
|
260
|
+
href: '#',
|
|
261
|
+
icon: 'cube01',
|
|
262
|
+
name: 'Meetups',
|
|
263
|
+
strokeClass: 'stroke-blue-500'
|
|
264
|
+
},
|
|
265
|
+
{
|
|
266
|
+
description: '',
|
|
267
|
+
href: '#',
|
|
268
|
+
icon: 'hand',
|
|
269
|
+
name: 'Support',
|
|
270
|
+
strokeClass: 'stroke-blue-500'
|
|
271
|
+
},
|
|
272
|
+
],
|
|
273
|
+
label: 'Connect',
|
|
274
|
+
|
|
275
|
+
},
|
|
276
|
+
]}
|
|
277
|
+
|
|
278
|
+
tertiaryCard={[
|
|
279
|
+
{
|
|
280
|
+
title: 'HasuraCon 2023 is here!',
|
|
281
|
+
|
|
282
|
+
title_colorClass: 'text-neutral-900',
|
|
283
|
+
img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/hascon_211daeb83a.png'
|
|
284
|
+
},
|
|
285
|
+
{
|
|
286
|
+
title: 'Top 6 Architecture Trends for API Development',
|
|
287
|
+
|
|
288
|
+
title_colorClass: 'text-neutral-900',
|
|
289
|
+
img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/api_trends_0a035678d8.png'
|
|
290
|
+
},
|
|
291
|
+
{
|
|
292
|
+
title: 'Announcing Hasura integration with Snowflake',
|
|
81
293
|
|
|
82
|
-
|
|
83
|
-
|
|
294
|
+
title_colorClass: 'text-neutral-900',
|
|
295
|
+
img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/snowflake_def20494db.png'
|
|
296
|
+
},
|
|
297
|
+
]}
|
|
298
|
+
/>
|
|
299
|
+
</div>
|
|
300
|
+
</div>
|
|
301
|
+
)
|
|
302
|
+
const dropdownC = (solutions) => (
|
|
303
|
+
<div>
|
|
304
|
+
<div>
|
|
305
|
+
<hr className='w-full h-9 border-0 ' />
|
|
306
|
+
</div>
|
|
307
|
+
<div className=" p-2 bg-neutral-150 rounded-3xl ">
|
|
308
|
+
<V3Dropdown
|
|
309
|
+
|
|
310
|
+
secondaryCardArr={[
|
|
311
|
+
{
|
|
312
|
+
childArray: [
|
|
313
|
+
{
|
|
314
|
+
description: '',
|
|
315
|
+
href: '#',
|
|
316
|
+
icon: "pentool02",
|
|
317
|
+
name: 'Our story',
|
|
318
|
+
strokeClass: 'stroke-blue-500'
|
|
319
|
+
},
|
|
320
|
+
{
|
|
321
|
+
description: '',
|
|
322
|
+
href: '#',
|
|
323
|
+
icon: 'data',
|
|
324
|
+
name: 'Partners',
|
|
325
|
+
strokeClass: 'stroke-blue-500'
|
|
326
|
+
},
|
|
327
|
+
{
|
|
328
|
+
description: '',
|
|
329
|
+
href: '#',
|
|
330
|
+
icon: 'hearthand',
|
|
331
|
+
name: 'Work at Hasura',
|
|
332
|
+
strokeClass: 'stroke-blue-500'
|
|
333
|
+
},
|
|
334
|
+
{
|
|
335
|
+
description: '',
|
|
336
|
+
href: '#',
|
|
337
|
+
icon: 'headingsquare',
|
|
338
|
+
name: 'News room',
|
|
339
|
+
strokeClass: 'stroke-blue-500'
|
|
340
|
+
},
|
|
341
|
+
{
|
|
342
|
+
description: '',
|
|
343
|
+
href: '#',
|
|
344
|
+
icon: 'star06',
|
|
345
|
+
name: 'Brand',
|
|
346
|
+
strokeClass: 'stroke-blue-500'
|
|
347
|
+
},
|
|
348
|
+
|
|
349
|
+
],
|
|
350
|
+
label: 'Company'
|
|
351
|
+
},
|
|
352
|
+
|
|
353
|
+
]}
|
|
354
|
+
|
|
355
|
+
tertiaryCard={[
|
|
356
|
+
{
|
|
357
|
+
title: 'HasuraCon 2023 is here!',
|
|
358
|
+
|
|
359
|
+
title_colorClass: 'text-neutral-900',
|
|
360
|
+
img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/hascon_211daeb83a.png'
|
|
361
|
+
},
|
|
362
|
+
{
|
|
363
|
+
title: 'Top 6 Architecture Trends for API Development',
|
|
84
364
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
365
|
+
title_colorClass: 'text-neutral-900',
|
|
366
|
+
img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/api_trends_0a035678d8.png'
|
|
367
|
+
},
|
|
368
|
+
{
|
|
369
|
+
title: 'Announcing Hasura integration with Snowflake',
|
|
370
|
+
|
|
371
|
+
title_colorClass: 'text-neutral-900',
|
|
372
|
+
img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/snowflake_def20494db.png'
|
|
373
|
+
},
|
|
374
|
+
]}
|
|
375
|
+
/>
|
|
376
|
+
</div>
|
|
377
|
+
</div>
|
|
378
|
+
)
|
|
379
|
+
|
|
380
|
+
const headerListfn = (HEADER_LIST) => (
|
|
381
|
+
<>
|
|
382
|
+
{/* <div id='github_button' className='flex items-center justify-center -mb-2'>
|
|
383
|
+
<GithubWidget />
|
|
384
|
+
</div> */}
|
|
385
|
+
|
|
386
|
+
<div id='dropdown_product'>
|
|
387
|
+
{HEADER_LIST[0] && (
|
|
88
388
|
<div
|
|
89
|
-
className="relative"
|
|
90
|
-
|
|
91
|
-
|
|
389
|
+
className="relative "
|
|
390
|
+
|
|
391
|
+
onMouseEnter={() => setIsProduct(true)}
|
|
392
|
+
onMouseLeave={() => setIsProduct(false)}
|
|
393
|
+
|
|
92
394
|
>
|
|
93
395
|
<div
|
|
94
396
|
className={classNames(
|
|
95
397
|
'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',
|
|
96
|
-
|
|
398
|
+
isProduct ? '' : 'text-gray-500',
|
|
97
399
|
)}
|
|
98
400
|
>
|
|
401
|
+
|
|
99
402
|
<div className="flex flex-col items-center cursor-pointer">
|
|
100
403
|
<Typography
|
|
101
|
-
className=
|
|
102
|
-
textStyle="body3c-medium"
|
|
103
|
-
>
|
|
104
|
-
{`${title} `}
|
|
105
|
-
</Typography>
|
|
404
|
+
className='hover:text-blue-600'
|
|
405
|
+
textStyle="body3c-medium">{`${HEADER_LIST[0]['title']} `}</Typography>
|
|
106
406
|
</div>
|
|
407
|
+
|
|
107
408
|
</div>
|
|
108
|
-
<motion.div
|
|
109
|
-
|
|
409
|
+
<motion.div
|
|
410
|
+
|
|
411
|
+
|
|
412
|
+
>
|
|
413
|
+
{isProduct && (
|
|
110
414
|
<div
|
|
111
|
-
id=
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
415
|
+
id='dropdownA'
|
|
416
|
+
|
|
417
|
+
className="left-0 z-20 shadow-home-drop "
|
|
418
|
+
onMouseEnter={() => setIsProduct(true)}
|
|
419
|
+
onMouseLeave={
|
|
420
|
+
() => setIsProduct(false)
|
|
421
|
+
|
|
422
|
+
}
|
|
423
|
+
onScroll={() => setIsProduct(false)} // Keep isProduct true when hovering over dropdown content
|
|
116
424
|
>
|
|
117
425
|
<motion.div
|
|
118
426
|
initial={{ opacity: 0 }}
|
|
119
427
|
animate={{ opacity: 1 }}
|
|
120
|
-
transition={{ ease:
|
|
121
|
-
className=
|
|
122
|
-
|
|
123
|
-
>
|
|
124
|
-
{renderDropdown(
|
|
125
|
-
primaryCard,
|
|
126
|
-
secondaryCardArr,
|
|
127
|
-
tertiaryCard
|
|
128
|
-
)}
|
|
428
|
+
transition={{ ease: "easeInOut", duration: 0.1 }}
|
|
429
|
+
className='absolute -left-[137px] z-[2] transform'>
|
|
430
|
+
{dropdownA(HEADER_LIST[0]['titleDropdown'])}
|
|
129
431
|
</motion.div>
|
|
130
432
|
</div>
|
|
433
|
+
|
|
131
434
|
)}
|
|
132
435
|
</motion.div>
|
|
133
436
|
</div>
|
|
134
437
|
)}
|
|
135
438
|
</div>
|
|
136
|
-
|
|
137
|
-
|
|
439
|
+
<div id="dropdown_developer" className='relative' >
|
|
440
|
+
{HEADER_LIST[1] && (
|
|
441
|
+
<div
|
|
442
|
+
className=""
|
|
443
|
+
onMouseEnter={() => setIsDeveloper(true)}
|
|
444
|
+
onMouseLeave={() => setIsDeveloper(false)}
|
|
138
445
|
|
|
446
|
+
>
|
|
447
|
+
<div
|
|
448
|
+
className={classNames(
|
|
449
|
+
'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',
|
|
450
|
+
isDeveloper ? '' : 'text-gray-500',
|
|
451
|
+
)}
|
|
452
|
+
>
|
|
453
|
+
<div className="flex flex-col items-center h-full cursor-pointer">
|
|
454
|
+
<Typography className='hover:text-blue-600' textStyle="body3c-medium">{`${HEADER_LIST[1]['title']}`}</Typography>
|
|
455
|
+
</div>
|
|
456
|
+
</div>
|
|
457
|
+
{isDeveloper && (
|
|
458
|
+
<div
|
|
459
|
+
|
|
460
|
+
className="shadow-home-drop "
|
|
461
|
+
onMouseEnter={() => setIsDeveloper(true)}
|
|
462
|
+
onMouseLeave={() => setIsDeveloper(false)}
|
|
463
|
+
onScroll={() => setIsDeveloper(false)} // Keep isProduct true when hovering over dropdown content
|
|
464
|
+
>
|
|
465
|
+
<motion.div
|
|
466
|
+
initial={{ opacity: 0 }}
|
|
467
|
+
animate={{ opacity: 1 }}
|
|
468
|
+
transition={{ ease: "easeInOut", duration: 0.1 }}
|
|
469
|
+
className='absolute -left-[218px] z-[2]'>
|
|
470
|
+
{dropdownB(HEADER_LIST[1]['titleDropdown'])}
|
|
471
|
+
</motion.div>
|
|
472
|
+
</div>
|
|
473
|
+
)}
|
|
474
|
+
</div>
|
|
475
|
+
)}
|
|
476
|
+
</div>
|
|
139
477
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
478
|
+
<div id="dropdown_company" >
|
|
479
|
+
{HEADER_LIST[3] && (
|
|
480
|
+
<div
|
|
481
|
+
className="relative"
|
|
482
|
+
onMouseEnter={() => setIsCompany(true)}
|
|
483
|
+
onMouseLeave={() => setIsCompany(false)}
|
|
484
|
+
|
|
485
|
+
>
|
|
486
|
+
<div
|
|
487
|
+
className={classNames(
|
|
488
|
+
'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',
|
|
489
|
+
isCompany ? '' : 'text-gray-500',
|
|
490
|
+
)}
|
|
491
|
+
>
|
|
492
|
+
<div className="flex flex-col items-center h-full cursor-pointer">
|
|
493
|
+
<Typography className='hover:text-blue-600' textStyle="body3c-medium">{`${HEADER_LIST[3]['title']}`}</Typography>
|
|
494
|
+
</div>
|
|
495
|
+
</div>
|
|
496
|
+
{isCompany && (
|
|
497
|
+
<div
|
|
498
|
+
className="left-0 z-20 shadow-home-drop "
|
|
499
|
+
onMouseEnter={() => setIsCompany(true)}
|
|
500
|
+
onMouseLeave={() => setIsCompany(false)}
|
|
501
|
+
onScroll={() => setIsCompany(false)} // Keep isProduct true when hovering over dropdown content
|
|
502
|
+
>
|
|
503
|
+
<motion.div
|
|
504
|
+
initial={{ opacity: 0 }}
|
|
505
|
+
animate={{ opacity: 1 }}
|
|
506
|
+
transition={{ ease: "easeInOut", duration: 0.1 }}
|
|
507
|
+
className='absolute -left-[50px] z-[2] transform'>
|
|
508
|
+
{dropdownC(HEADER_LIST[3]['titleDropdown'])}
|
|
509
|
+
</motion.div>
|
|
510
|
+
</div>
|
|
511
|
+
)}
|
|
512
|
+
</div>
|
|
513
|
+
)}
|
|
514
|
+
</div>
|
|
515
|
+
<div id="dropdown_customers" >
|
|
516
|
+
{HEADER_LIST[2] && (
|
|
517
|
+
<div
|
|
518
|
+
className={classNames(
|
|
519
|
+
'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'
|
|
520
|
+
)}
|
|
521
|
+
>
|
|
522
|
+
<div className="flex flex-col items-center h-full cursor-pointer">
|
|
523
|
+
<Typography className='hover:text-blue-600' textStyle="body3c-medium">{`${HEADER_LIST[2]['title']}`}</Typography>
|
|
524
|
+
</div>
|
|
525
|
+
</div>
|
|
147
526
|
|
|
527
|
+
)}
|
|
528
|
+
</div>
|
|
529
|
+
<div id="dropdown_pricing" >
|
|
530
|
+
{HEADER_LIST[4] && (
|
|
531
|
+
<div
|
|
532
|
+
className={classNames(
|
|
533
|
+
'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'
|
|
534
|
+
)}
|
|
535
|
+
>
|
|
536
|
+
<div className="flex flex-col items-center h-full cursor-pointer">
|
|
537
|
+
<Typography className='hover:text-blue-600 ' textStyle="body3c-medium">{`${HEADER_LIST[4]['title']}`}</Typography>
|
|
538
|
+
</div>
|
|
539
|
+
</div>
|
|
540
|
+
)}
|
|
541
|
+
</div>
|
|
148
542
|
|
|
149
|
-
|
|
543
|
+
</>
|
|
544
|
+
);
|
|
150
545
|
|
|
151
|
-
const mobileNav = (
|
|
546
|
+
const mobileNav = (Header_LIST) => (
|
|
152
547
|
<div className='pt-4 '>
|
|
153
548
|
<div className='transform transition-all'>
|
|
154
549
|
{isProduct && (
|
|
155
550
|
<motion.div
|
|
156
551
|
className='product_mobile mr-0'>
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
552
|
+
<div className='mt'>
|
|
553
|
+
<V3Dropdown
|
|
554
|
+
primaryCard={{
|
|
555
|
+
iconVariant: 'hasura',
|
|
556
|
+
mainDescription: 'Choose from our open source community edition, fully managed cloud edition or custom enterprise',
|
|
557
|
+
primaryBtnLabel: 'Hasura Product',
|
|
558
|
+
strokeClass: 'stroke-neutral-800',
|
|
559
|
+
secondaryBtn: [
|
|
560
|
+
{ cta_leftVariantIcon: 'home03', cta_leftVariantIconColor: '#6C737F', cta_text: 'Compare plans' }
|
|
561
|
+
],
|
|
562
|
+
}}
|
|
563
|
+
secondaryCardArr={[
|
|
564
|
+
{
|
|
565
|
+
split: true,
|
|
566
|
+
childArray: [
|
|
567
|
+
{
|
|
568
|
+
description: '',
|
|
569
|
+
href: '#',
|
|
570
|
+
icon: "lightning01",
|
|
571
|
+
name: 'Instant API',
|
|
572
|
+
strokeClass: 'stroke-blue-500'
|
|
573
|
+
},
|
|
574
|
+
{
|
|
575
|
+
description: '',
|
|
576
|
+
href: '#',
|
|
577
|
+
icon: 'data',
|
|
578
|
+
name: 'Federation',
|
|
579
|
+
strokeClass: 'stroke-blue-500'
|
|
580
|
+
},
|
|
581
|
+
{
|
|
582
|
+
description: '',
|
|
583
|
+
href: '#',
|
|
584
|
+
icon: 'eye',
|
|
585
|
+
name: 'Authorization',
|
|
586
|
+
strokeClass: 'stroke-blue-500'
|
|
587
|
+
},
|
|
588
|
+
{
|
|
589
|
+
description: '',
|
|
590
|
+
href: '#',
|
|
591
|
+
icon: 'shieldtick',
|
|
592
|
+
name: 'API Security',
|
|
593
|
+
strokeClass: 'stroke-blue-500'
|
|
594
|
+
},
|
|
595
|
+
{
|
|
596
|
+
description: '',
|
|
597
|
+
href: '#',
|
|
598
|
+
icon: 'speedometer03',
|
|
599
|
+
name: 'Performance',
|
|
600
|
+
strokeClass: 'stroke-blue-500'
|
|
601
|
+
},
|
|
602
|
+
{
|
|
603
|
+
description: '',
|
|
604
|
+
href: '#',
|
|
605
|
+
icon: "barchartsquare01",
|
|
606
|
+
name: 'Observability',
|
|
607
|
+
strokeClass: 'stroke-blue-500'
|
|
608
|
+
}
|
|
609
|
+
],
|
|
610
|
+
label: 'CAPABILITIES'
|
|
611
|
+
},
|
|
612
|
+
{
|
|
613
|
+
childArray: [
|
|
614
|
+
{
|
|
615
|
+
description: '',
|
|
616
|
+
href: '#',
|
|
617
|
+
icon: 'cube01',
|
|
618
|
+
name: 'All DBs',
|
|
619
|
+
strokeClass: 'stroke-blue-500'
|
|
620
|
+
},
|
|
621
|
+
{
|
|
622
|
+
description: '',
|
|
623
|
+
href: '#',
|
|
624
|
+
icon: 'cube01',
|
|
625
|
+
name: 'Planned DBs',
|
|
626
|
+
strokeClass: 'stroke-blue-500'
|
|
627
|
+
},
|
|
628
|
+
],
|
|
629
|
+
label: 'Integrations'
|
|
630
|
+
}
|
|
631
|
+
]}
|
|
632
|
+
/>
|
|
633
|
+
</div>
|
|
164
634
|
</motion.div>)}
|
|
165
635
|
{isDeveloper && (
|
|
166
636
|
<div className='product_developer'>
|
|
167
637
|
<V3Dropdown
|
|
168
|
-
|
|
169
|
-
secondaryCardArr={
|
|
170
|
-
|
|
638
|
+
|
|
639
|
+
secondaryCardArr={[
|
|
640
|
+
{
|
|
641
|
+
childArray: [
|
|
642
|
+
{
|
|
643
|
+
description: '',
|
|
644
|
+
href: '#',
|
|
645
|
+
icon: "lightning01",
|
|
646
|
+
name: 'Documentation',
|
|
647
|
+
strokeClass: 'stroke-blue-500'
|
|
648
|
+
},
|
|
649
|
+
{
|
|
650
|
+
description: '',
|
|
651
|
+
href: '#',
|
|
652
|
+
icon: 'data',
|
|
653
|
+
name: 'Hasura hub',
|
|
654
|
+
strokeClass: 'stroke-blue-500'
|
|
655
|
+
},
|
|
656
|
+
{
|
|
657
|
+
description: '',
|
|
658
|
+
href: '#',
|
|
659
|
+
icon: 'eye',
|
|
660
|
+
name: 'Guides',
|
|
661
|
+
strokeClass: 'stroke-blue-500'
|
|
662
|
+
},
|
|
663
|
+
{
|
|
664
|
+
description: '',
|
|
665
|
+
href: '#',
|
|
666
|
+
icon: 'shieldtick',
|
|
667
|
+
name: 'GraphQL hub',
|
|
668
|
+
strokeClass: 'stroke-blue-500'
|
|
669
|
+
},
|
|
670
|
+
{
|
|
671
|
+
description: '',
|
|
672
|
+
href: '#',
|
|
673
|
+
icon: 'speedometer03',
|
|
674
|
+
name: 'Changelog',
|
|
675
|
+
strokeClass: 'stroke-blue-500'
|
|
676
|
+
},
|
|
677
|
+
{
|
|
678
|
+
description: '',
|
|
679
|
+
href: '#',
|
|
680
|
+
icon: "barchartsquare01",
|
|
681
|
+
name: 'GraphQL',
|
|
682
|
+
strokeClass: 'stroke-blue-500'
|
|
683
|
+
}
|
|
684
|
+
],
|
|
685
|
+
label: 'BUILD'
|
|
686
|
+
},
|
|
687
|
+
{
|
|
688
|
+
|
|
689
|
+
childArray: [
|
|
690
|
+
{
|
|
691
|
+
description: '',
|
|
692
|
+
href: '#',
|
|
693
|
+
icon: 'cube01',
|
|
694
|
+
name: 'Blog',
|
|
695
|
+
strokeClass: 'stroke-blue-500'
|
|
696
|
+
},
|
|
697
|
+
{
|
|
698
|
+
description: '',
|
|
699
|
+
href: '#',
|
|
700
|
+
icon: 'cube01',
|
|
701
|
+
name: 'Tech talks',
|
|
702
|
+
strokeClass: 'stroke-blue-500'
|
|
703
|
+
},
|
|
704
|
+
{
|
|
705
|
+
description: '',
|
|
706
|
+
href: '#',
|
|
707
|
+
icon: 'cube01',
|
|
708
|
+
name: 'Tutorials',
|
|
709
|
+
strokeClass: 'stroke-blue-500'
|
|
710
|
+
},
|
|
711
|
+
{
|
|
712
|
+
description: '',
|
|
713
|
+
href: '#',
|
|
714
|
+
icon: 'cube01',
|
|
715
|
+
name: 'Events',
|
|
716
|
+
strokeClass: 'stroke-blue-500'
|
|
717
|
+
},
|
|
718
|
+
{
|
|
719
|
+
description: '',
|
|
720
|
+
href: '#',
|
|
721
|
+
icon: 'cube01',
|
|
722
|
+
name: 'Resources',
|
|
723
|
+
strokeClass: 'stroke-blue-500'
|
|
724
|
+
},
|
|
725
|
+
],
|
|
726
|
+
label: 'Learn',
|
|
727
|
+
|
|
728
|
+
},
|
|
729
|
+
{
|
|
730
|
+
|
|
731
|
+
childArray: [
|
|
732
|
+
{
|
|
733
|
+
description: '',
|
|
734
|
+
href: '#',
|
|
735
|
+
icon: 'cube01',
|
|
736
|
+
name: 'Community',
|
|
737
|
+
strokeClass: 'stroke-blue-500'
|
|
738
|
+
},
|
|
739
|
+
{
|
|
740
|
+
description: '',
|
|
741
|
+
href: '#',
|
|
742
|
+
icon: 'cube01',
|
|
743
|
+
name: 'Discord',
|
|
744
|
+
strokeClass: 'stroke-blue-500'
|
|
745
|
+
},
|
|
746
|
+
{
|
|
747
|
+
description: '',
|
|
748
|
+
href: '#',
|
|
749
|
+
icon: 'cube01',
|
|
750
|
+
name: 'Forum',
|
|
751
|
+
strokeClass: 'stroke-blue-500'
|
|
752
|
+
},
|
|
753
|
+
{
|
|
754
|
+
description: '',
|
|
755
|
+
href: '#',
|
|
756
|
+
icon: 'cube01',
|
|
757
|
+
name: 'Meetups',
|
|
758
|
+
strokeClass: 'stroke-blue-500'
|
|
759
|
+
},
|
|
760
|
+
{
|
|
761
|
+
description: '',
|
|
762
|
+
href: '#',
|
|
763
|
+
icon: 'cube01',
|
|
764
|
+
name: 'Support',
|
|
765
|
+
strokeClass: 'stroke-blue-500'
|
|
766
|
+
},
|
|
767
|
+
],
|
|
768
|
+
label: 'Connect',
|
|
769
|
+
|
|
770
|
+
},
|
|
771
|
+
]}
|
|
772
|
+
|
|
773
|
+
tertiaryCard={[
|
|
774
|
+
{
|
|
775
|
+
title: 'HasuraCon 2023 is here!',
|
|
776
|
+
|
|
777
|
+
title_colorClass: 'text-neutral-900',
|
|
778
|
+
img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/hascon_211daeb83a.png'
|
|
779
|
+
},
|
|
780
|
+
{
|
|
781
|
+
title: 'Top 6 Architecture Trends for API Development',
|
|
782
|
+
|
|
783
|
+
title_colorClass: 'text-neutral-900',
|
|
784
|
+
img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/api_trends_0a035678d8.png'
|
|
785
|
+
},
|
|
786
|
+
{
|
|
787
|
+
title: 'Announcing Hasura integration with Snowflake',
|
|
788
|
+
|
|
789
|
+
title_colorClass: 'text-neutral-900',
|
|
790
|
+
img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/snowflake_def20494db.png'
|
|
791
|
+
},
|
|
792
|
+
]}
|
|
171
793
|
/>
|
|
172
794
|
</div>)
|
|
173
795
|
}
|
|
174
796
|
{isCompany && (<div className='product_company'>
|
|
175
797
|
<V3Dropdown
|
|
176
|
-
|
|
177
|
-
secondaryCardArr={
|
|
178
|
-
|
|
798
|
+
|
|
799
|
+
secondaryCardArr={[
|
|
800
|
+
{
|
|
801
|
+
childArray: [
|
|
802
|
+
{
|
|
803
|
+
description: '',
|
|
804
|
+
href: '#',
|
|
805
|
+
icon: "lightning01",
|
|
806
|
+
name: 'Our story',
|
|
807
|
+
strokeClass: 'stroke-blue-500'
|
|
808
|
+
},
|
|
809
|
+
{
|
|
810
|
+
description: '',
|
|
811
|
+
href: '#',
|
|
812
|
+
icon: 'data',
|
|
813
|
+
name: 'Partners',
|
|
814
|
+
strokeClass: 'stroke-blue-500'
|
|
815
|
+
},
|
|
816
|
+
{
|
|
817
|
+
description: '',
|
|
818
|
+
href: '#',
|
|
819
|
+
icon: 'eye',
|
|
820
|
+
name: 'Work at Hasura',
|
|
821
|
+
strokeClass: 'stroke-blue-500'
|
|
822
|
+
},
|
|
823
|
+
{
|
|
824
|
+
description: '',
|
|
825
|
+
href: '#',
|
|
826
|
+
icon: 'shieldtick',
|
|
827
|
+
name: 'News room',
|
|
828
|
+
strokeClass: 'stroke-blue-500'
|
|
829
|
+
},
|
|
830
|
+
{
|
|
831
|
+
description: '',
|
|
832
|
+
href: '#',
|
|
833
|
+
icon: 'speedometer03',
|
|
834
|
+
name: 'Brand',
|
|
835
|
+
strokeClass: 'stroke-blue-500'
|
|
836
|
+
},
|
|
837
|
+
|
|
838
|
+
],
|
|
839
|
+
label: 'Company'
|
|
840
|
+
},
|
|
841
|
+
|
|
842
|
+
]}
|
|
843
|
+
|
|
844
|
+
tertiaryCard={[
|
|
845
|
+
{
|
|
846
|
+
title: 'HasuraCon 2023 is here!',
|
|
847
|
+
|
|
848
|
+
title_colorClass: 'text-neutral-900',
|
|
849
|
+
img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/hascon_211daeb83a.png'
|
|
850
|
+
},
|
|
851
|
+
{
|
|
852
|
+
title: 'Top 6 Architecture Trends for API Development',
|
|
853
|
+
|
|
854
|
+
title_colorClass: 'text-neutral-900',
|
|
855
|
+
img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/api_trends_0a035678d8.png'
|
|
856
|
+
},
|
|
857
|
+
{
|
|
858
|
+
title: 'Announcing Hasura integration with Snowflake',
|
|
859
|
+
|
|
860
|
+
title_colorClass: 'text-neutral-900',
|
|
861
|
+
img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/snowflake_def20494db.png'
|
|
862
|
+
},
|
|
863
|
+
]}
|
|
179
864
|
/>
|
|
180
865
|
</div>)}
|
|
181
866
|
</div>
|
|
182
867
|
</div>
|
|
183
868
|
)
|
|
184
869
|
|
|
185
|
-
|
|
186
870
|
let class1;
|
|
187
871
|
let class2;
|
|
188
872
|
let class3;
|
|
@@ -203,30 +887,20 @@ export default function V3Header(props) {
|
|
|
203
887
|
setIsCompany(false);
|
|
204
888
|
setIsProduct(false);
|
|
205
889
|
setCurrentTab('')
|
|
206
|
-
props.HEADER_LIST.forEach((item, index) => {
|
|
207
|
-
// Access the values of each item and the index
|
|
208
|
-
handleDropdownLeave(index)
|
|
209
|
-
});
|
|
210
890
|
}
|
|
211
|
-
function handleBackClick() {
|
|
891
|
+
function handleBackClick(sda) {
|
|
892
|
+
console.log('clicked', sda);
|
|
212
893
|
setIsDeveloper(false);
|
|
213
894
|
setIsCompany(false);
|
|
214
895
|
setIsProduct(false);
|
|
215
896
|
setCurrentTab('');
|
|
216
|
-
props.HEADER_LIST.forEach((item, index) => {
|
|
217
|
-
// Access the values of each item and the index
|
|
218
|
-
handleDropdownLeave(index)
|
|
219
|
-
});
|
|
220
|
-
|
|
221
897
|
}
|
|
222
898
|
|
|
223
899
|
|
|
224
900
|
function handleMbDropdownClick(title) {
|
|
225
|
-
|
|
226
|
-
handleDropdownEnter(i);
|
|
901
|
+
|
|
227
902
|
// Implement your logic to open the additional options for the clicked dropdown
|
|
228
903
|
if (title === 'Developer') {
|
|
229
|
-
|
|
230
904
|
setIsDeveloper(true);
|
|
231
905
|
}
|
|
232
906
|
if (title === 'Product') {
|
|
@@ -262,14 +936,12 @@ export default function V3Header(props) {
|
|
|
262
936
|
<div className={'h-full ' + ((mobileNavOpen) ? " hds-hidden" : "")}>
|
|
263
937
|
<AlgoliaSearch {...props} />
|
|
264
938
|
</div>
|
|
265
|
-
{
|
|
266
|
-
|
|
267
|
-
<div className=' h-5 cursor-pointer' >
|
|
939
|
+
<div onClick={() => handleMbDropdownClose()}>
|
|
940
|
+
<div className=' h-5 mt-3 cursor-pointer' >
|
|
268
941
|
<div aria-hidden="true" className={`${class1} block absolute h-[2px] w-[15px] bg-neutral-800 transform transition duration-500 ease-in-out`}></div>
|
|
269
942
|
<div aria-hidden="true" className={`${class3} block absolute h-0.5 w-[15px] bg-neutral-800 transform transition duration-500 ease-in-out`}></div>
|
|
270
943
|
</div>
|
|
271
|
-
|
|
272
|
-
</div>)}
|
|
944
|
+
</div>
|
|
273
945
|
</div>
|
|
274
946
|
</div>
|
|
275
947
|
<div className='hds-hidden tb-l:flex flex-row w-full justify-between items-center'>
|
|
@@ -279,8 +951,24 @@ export default function V3Header(props) {
|
|
|
279
951
|
onMouseLeave={() => setIsArrowActive(false)}
|
|
280
952
|
|
|
281
953
|
>
|
|
282
|
-
|
|
283
|
-
|
|
954
|
+
|
|
955
|
+
{headerListfn(props.HEADER_LIST)}
|
|
956
|
+
{/* <span className="absolute top-8 left-0 w-full">
|
|
957
|
+
|
|
958
|
+
{isArrowActive ? (
|
|
959
|
+
<div
|
|
960
|
+
className={`w-full relative transition-all duration-500 ${isProduct ? 'left-6' : isDeveloper ? 'left-[108px]' : 'left-[200px]'
|
|
961
|
+
}`}
|
|
962
|
+
>
|
|
963
|
+
{(isProduct || isCompany || isDeveloper) &&
|
|
964
|
+
|
|
965
|
+
<Icon height="h-5 w-5 fill-neutral-150" variant="triangle" strokeClass="stroke-neutral-150" />
|
|
966
|
+
}
|
|
967
|
+
</div>
|
|
968
|
+
) : null}
|
|
969
|
+
</span> */}
|
|
970
|
+
|
|
971
|
+
|
|
284
972
|
</nav>
|
|
285
973
|
|
|
286
974
|
<div className='hds-hidden tb-l:flex flex-row items-center gap-x-4 '>
|
|
@@ -330,40 +1018,25 @@ export default function V3Header(props) {
|
|
|
330
1018
|
<span className="sr-only">Open menu</span> */}
|
|
331
1019
|
|
|
332
1020
|
|
|
333
|
-
<div className={"bg-neutral-100
|
|
1021
|
+
<div className={"bg-neutral-100 hds-hidden-tbl block fixed w-full tb:max-w-[480px] tb:left-auto tb:right-4 mx-auto left-4 top-0 transform transition duration-500 ease-in-out h-[calc(100%-1px)] max-h-screen overflow-y-auto" + ((mobileNavOpen) ? " translate-x-0" : " translate-x-[1240px]")}>
|
|
334
1022
|
|
|
335
|
-
<div className="bg-neutral-100 h-[calc(100%-80px)] rounded-2xl overflow-
|
|
1023
|
+
<div className="bg-neutral-100 h-[calc(100%-80px)] rounded-2xl overflow-scroll ">
|
|
336
1024
|
|
|
337
|
-
<div className='pt-
|
|
338
|
-
{(isCompany || isDeveloper || isProduct) &&
|
|
339
|
-
(
|
|
340
|
-
<div
|
|
1025
|
+
<div className='pt-9 pb-4 mr-[17px] min-h-[36px] flex flex-row justify-between items-center sticky top-0 bg-neutral-100 z-50 '>
|
|
1026
|
+
{(isCompany || isDeveloper || isProduct) && <div
|
|
341
1027
|
className=' flex flex-row justify-start z-10'
|
|
342
1028
|
onClick={() => handleBackClick()}
|
|
343
1029
|
|
|
344
1030
|
>
|
|
345
1031
|
<Icon height='w-5 h-5 ml-4 cursor-pointer' variant={'arrowleft'} strokeClass='stroke-neutral-1000' />
|
|
346
|
-
</div>
|
|
347
|
-
)}
|
|
1032
|
+
</div>}
|
|
348
1033
|
<motion.div
|
|
349
1034
|
initial={{ opacity: 0 }}
|
|
350
1035
|
animate={{ opacity: 1 }}
|
|
351
1036
|
transition={{ duration: 0.4, opacity: { ease: "easeIn" } }}
|
|
352
|
-
className='w-full justify-center flex '>
|
|
1037
|
+
className='w-full justify-center -ml-9 flex '>
|
|
353
1038
|
<Typography textStyle='body3c-medium' className='text-neutral-900'>{currentTab}</Typography>
|
|
354
1039
|
</motion.div>
|
|
355
|
-
{(isCompany || isDeveloper || isProduct) &&
|
|
356
|
-
(
|
|
357
|
-
<motion.div
|
|
358
|
-
initial={{ opacity: 0 }}
|
|
359
|
-
animate={{ opacity: 1 }}
|
|
360
|
-
transition={{ duration: 0.4, opacity: { ease: "easeIn" } }}
|
|
361
|
-
className=' flex flex-row justify-start z-10'
|
|
362
|
-
onClick={() => handleMbDropdownClose()}
|
|
363
|
-
|
|
364
|
-
>
|
|
365
|
-
<Icon height='w-5 h-5 ml-4 stroke-2 cursor-pointer' variant={'xclose'} strokeClass='stroke-neutral-1000' />
|
|
366
|
-
</motion.div>)}
|
|
367
1040
|
|
|
368
1041
|
</div>
|
|
369
1042
|
<AnimatePresence mode='wait' exit={false} >
|
|
@@ -378,7 +1051,7 @@ export default function V3Header(props) {
|
|
|
378
1051
|
className="flex flex-col justify-between "
|
|
379
1052
|
>
|
|
380
1053
|
<div className="flex flex-col justify-between rounded-2xl h-full">
|
|
381
|
-
<div className="pl-4 pr-
|
|
1054
|
+
<div className="pl-4 pr-[34px]">
|
|
382
1055
|
{mobileNav(props.HEADER_LIST)}
|
|
383
1056
|
</div>
|
|
384
1057
|
</div>
|
|
@@ -397,7 +1070,7 @@ export default function V3Header(props) {
|
|
|
397
1070
|
alt=""
|
|
398
1071
|
/>
|
|
399
1072
|
</div>
|
|
400
|
-
<nav className="grid divide-y mr-8
|
|
1073
|
+
<nav className="grid divide-y mr-8 bg-neutral-0 divide-neutral-200 border border-neutral-200 rounded-3xl mb-6">
|
|
401
1074
|
{props.HEADER_LIST.map((item) => (
|
|
402
1075
|
<div
|
|
403
1076
|
key={item['title']}
|
|
@@ -434,7 +1107,6 @@ export default function V3Header(props) {
|
|
|
434
1107
|
rightAnimatedArrow='true'
|
|
435
1108
|
rightAnimatedArrowColor='#3970FD'
|
|
436
1109
|
animatedHoverStroke='group-hover:stroke-neutral-0'
|
|
437
|
-
className=' !w-full'
|
|
438
1110
|
/>
|
|
439
1111
|
</a>
|
|
440
1112
|
<a href='https://cloud.hasura.io/signup?pg=home&plcmt=header&cta=try-hasura&tech=default' className='w-1/2'>
|
|
@@ -448,7 +1120,6 @@ export default function V3Header(props) {
|
|
|
448
1120
|
rightAnimatedArrow='true'
|
|
449
1121
|
rightAnimatedArrowColor='#ffffff'
|
|
450
1122
|
animatedHoverStroke='group-hover:stroke-neutral-0'
|
|
451
|
-
className=' !w-full'
|
|
452
1123
|
/>
|
|
453
1124
|
</a>
|
|
454
1125
|
</div>
|
|
@@ -459,6 +1130,99 @@ export default function V3Header(props) {
|
|
|
459
1130
|
|
|
460
1131
|
</div>
|
|
461
1132
|
</div>
|
|
1133
|
+
|
|
1134
|
+
|
|
1135
|
+
|
|
1136
|
+
{/* mobile menu */}
|
|
1137
|
+
<>
|
|
1138
|
+
<div>
|
|
1139
|
+
|
|
1140
|
+
|
|
1141
|
+
<div className="absolute h-[calc(100%-112px)] bg-base-0 z-[1] inset-x-0 top-0 origin-top-right hds-hidden transform transition">
|
|
1142
|
+
<div className=" rounded-lg bg-neutral-0 h-[calc(100%-112px)] shadow-lg">
|
|
1143
|
+
<div className="bg-neutral-0">
|
|
1144
|
+
{/* <div className="flex items-center justify-end">
|
|
1145
|
+
<div className="">
|
|
1146
|
+
<div className="inline-flex items-center justify-center pt-4 pr-4 w-full focus:ring-0">
|
|
1147
|
+
<Icon height={'h-5 w-5'} variant={'xclose'} strokeColor={'#3970FD'} />
|
|
1148
|
+
</div>
|
|
1149
|
+
</div>
|
|
1150
|
+
</div> */}
|
|
1151
|
+
<div className="mt-6 flex flex-col gap-6">
|
|
1152
|
+
<div className='flex flex-col items-center'>
|
|
1153
|
+
<img
|
|
1154
|
+
className="inline-block w-full px-4 "
|
|
1155
|
+
src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1683015500/hasura-con-2023/engage_clgotb.png"
|
|
1156
|
+
alt=""
|
|
1157
|
+
/>
|
|
1158
|
+
</div>
|
|
1159
|
+
|
|
1160
|
+
<nav className="grid divide-y divide-neutral-200 border border-neutral-200 rounded-3xl hds-hidden-tbl ">
|
|
1161
|
+
{props.HEADER_LIST.map((item) => (
|
|
1162
|
+
<div
|
|
1163
|
+
key={item['title']}
|
|
1164
|
+
href='#'
|
|
1165
|
+
className="flex justify-between items-center p-4 cursor-pointer"
|
|
1166
|
+
>
|
|
1167
|
+
{headerListfn(props.HEADER_LIST)}
|
|
1168
|
+
|
|
1169
|
+
<div className="flex items-center justify-center gap-2 ">
|
|
1170
|
+
|
|
1171
|
+
<Icon height='h-5 w-5' variant={'home03'} strokeColor={'#3970FD'} />
|
|
1172
|
+
|
|
1173
|
+
|
|
1174
|
+
<Typography textStyle='body3c-medium' className='text-neutral-900'>
|
|
1175
|
+
{`${item['title']}`}
|
|
1176
|
+
</Typography>
|
|
1177
|
+
</div>
|
|
1178
|
+
|
|
1179
|
+
<Icon height='h-5 w-5 stroke-[1.5px]' variant={'chevronright'} strokeClass='stroke-neutral-500' />
|
|
1180
|
+
</div>
|
|
1181
|
+
))}
|
|
1182
|
+
</nav>
|
|
1183
|
+
</div>
|
|
1184
|
+
</div>
|
|
1185
|
+
<div className="py-6 px-5 ">
|
|
1186
|
+
<div className="mt-6 ">
|
|
1187
|
+
<div className='flex flex-row justify-around'>
|
|
1188
|
+
<div className='w-full flex gap-2'>
|
|
1189
|
+
<div className='w-1/2'>
|
|
1190
|
+
<HDSButton
|
|
1191
|
+
label="Log In"
|
|
1192
|
+
type='tonal'
|
|
1193
|
+
leftIconVariant='none'
|
|
1194
|
+
rightIconVariant='none'
|
|
1195
|
+
state='default'
|
|
1196
|
+
size='sm'
|
|
1197
|
+
rightAnimatedArrow='true'
|
|
1198
|
+
rightAnimatedArrowColor='#3970FD'
|
|
1199
|
+
animatedHoverStroke='group-hover:stroke-neutral-0'
|
|
1200
|
+
|
|
1201
|
+
|
|
1202
|
+
/>
|
|
1203
|
+
</div>
|
|
1204
|
+
<div className='w-1/2'>
|
|
1205
|
+
<HDSButton
|
|
1206
|
+
label="Sign up"
|
|
1207
|
+
type='primary'
|
|
1208
|
+
leftIconVariant='none'
|
|
1209
|
+
rightIconVariant='none'
|
|
1210
|
+
state='default'
|
|
1211
|
+
size='sm'
|
|
1212
|
+
rightAnimatedArrow='true'
|
|
1213
|
+
rightAnimatedArrowColor='#ffffff'
|
|
1214
|
+
animatedHoverStroke='group-hover:stroke-neutral-0'
|
|
1215
|
+
/>
|
|
1216
|
+
</div>
|
|
1217
|
+
</div>
|
|
1218
|
+
</div>
|
|
1219
|
+
</div>
|
|
1220
|
+
</div>
|
|
1221
|
+
</div>
|
|
1222
|
+
</div>
|
|
1223
|
+
</div>
|
|
1224
|
+
</>
|
|
1225
|
+
{/* mobile menu */}
|
|
462
1226
|
</div>
|
|
463
1227
|
)
|
|
464
1228
|
}
|
|
@@ -467,243 +1231,62 @@ V3Header.defaultProps = {
|
|
|
467
1231
|
HEADER_LIST: [
|
|
468
1232
|
{
|
|
469
1233
|
title: 'Product',
|
|
470
|
-
|
|
471
|
-
iconVariant: 'hasura',
|
|
472
|
-
mainDescription: 'Choose from our open source community edition, fully managed cloud edition or custom enterprise',
|
|
473
|
-
primaryBtnLabel: 'Hasura Product',
|
|
474
|
-
strokeClass: 'stroke-neutral-800',
|
|
475
|
-
secondaryBtn: [
|
|
476
|
-
{ cta_leftVariantIcon: 'home03', cta_leftVariantIconColor: '#6C737F', cta_text: 'Compare plans' }
|
|
477
|
-
],
|
|
478
|
-
},
|
|
479
|
-
secondaryCardArr:
|
|
480
|
-
[
|
|
481
|
-
{
|
|
482
|
-
split: true,
|
|
483
|
-
childArray: [
|
|
484
|
-
{
|
|
485
|
-
description: '',
|
|
486
|
-
href: '#',
|
|
487
|
-
icon: "lightning01",
|
|
488
|
-
name: 'Instant API',
|
|
489
|
-
strokeClass: 'stroke-blue-500'
|
|
490
|
-
},
|
|
491
|
-
{
|
|
492
|
-
description: '',
|
|
493
|
-
href: '#',
|
|
494
|
-
icon: 'data',
|
|
495
|
-
name: 'Federation',
|
|
496
|
-
strokeClass: 'stroke-blue-500'
|
|
497
|
-
},
|
|
498
|
-
{
|
|
499
|
-
description: '',
|
|
500
|
-
href: '#',
|
|
501
|
-
icon: 'eye',
|
|
502
|
-
name: 'Authorization',
|
|
503
|
-
strokeClass: 'stroke-blue-500'
|
|
504
|
-
},
|
|
505
|
-
{
|
|
506
|
-
description: '',
|
|
507
|
-
href: '#',
|
|
508
|
-
icon: 'shieldtick',
|
|
509
|
-
name: 'API Security',
|
|
510
|
-
strokeClass: 'stroke-blue-500'
|
|
511
|
-
},
|
|
512
|
-
{
|
|
513
|
-
description: '',
|
|
514
|
-
href: '#',
|
|
515
|
-
icon: 'speedometer03',
|
|
516
|
-
name: 'Performance',
|
|
517
|
-
strokeClass: 'stroke-blue-500'
|
|
518
|
-
},
|
|
519
|
-
{
|
|
520
|
-
description: '',
|
|
521
|
-
href: '#',
|
|
522
|
-
icon: "barchartsquare01",
|
|
523
|
-
name: 'Observability',
|
|
524
|
-
strokeClass: 'stroke-blue-500'
|
|
525
|
-
}
|
|
526
|
-
],
|
|
527
|
-
label: 'CAPABILITIES'
|
|
528
|
-
},
|
|
529
|
-
{
|
|
530
|
-
childArray: [
|
|
531
|
-
{
|
|
532
|
-
description: '',
|
|
533
|
-
href: '#',
|
|
534
|
-
icon: 'database01',
|
|
535
|
-
name: 'All DBs',
|
|
536
|
-
strokeClass: 'stroke-blue-500'
|
|
537
|
-
},
|
|
538
|
-
{
|
|
539
|
-
description: '',
|
|
540
|
-
href: '#',
|
|
541
|
-
icon: 'checksquare',
|
|
542
|
-
name: 'Planned DBs',
|
|
543
|
-
strokeClass: 'stroke-blue-500'
|
|
544
|
-
},
|
|
545
|
-
],
|
|
546
|
-
label: 'Integrations'
|
|
547
|
-
}
|
|
548
|
-
]
|
|
549
|
-
},
|
|
550
|
-
{
|
|
551
|
-
|
|
552
|
-
title: 'Developer',
|
|
553
|
-
secondaryCardArr: [
|
|
1234
|
+
titleDropdown: [
|
|
554
1235
|
{
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
icon: "file02",
|
|
560
|
-
name: 'Documentation',
|
|
561
|
-
strokeClass: 'stroke-blue-500'
|
|
562
|
-
},
|
|
563
|
-
{
|
|
564
|
-
description: '',
|
|
565
|
-
href: '#',
|
|
566
|
-
icon: 'hasura',
|
|
567
|
-
name: 'Hasura hub',
|
|
568
|
-
strokeClass: 'stroke-blue-500'
|
|
569
|
-
},
|
|
570
|
-
{
|
|
571
|
-
description: '',
|
|
572
|
-
href: '#',
|
|
573
|
-
icon: 'route',
|
|
574
|
-
name: 'Guides',
|
|
575
|
-
strokeClass: 'stroke-blue-500'
|
|
576
|
-
},
|
|
577
|
-
{
|
|
578
|
-
description: '',
|
|
579
|
-
href: '#',
|
|
580
|
-
icon: 'asterisk02',
|
|
581
|
-
name: 'GraphQL hub',
|
|
582
|
-
strokeClass: 'stroke-blue-500'
|
|
583
|
-
},
|
|
584
|
-
{
|
|
585
|
-
description: '',
|
|
586
|
-
href: '#',
|
|
587
|
-
icon: "codebrowser",
|
|
588
|
-
name: 'GraphQL',
|
|
589
|
-
strokeClass: 'stroke-blue-500'
|
|
590
|
-
},
|
|
591
|
-
{
|
|
592
|
-
description: '',
|
|
593
|
-
href: '#',
|
|
594
|
-
icon: 'gitpullrequest',
|
|
595
|
-
name: 'Changelog',
|
|
596
|
-
strokeClass: 'stroke-blue-500'
|
|
597
|
-
}
|
|
598
|
-
],
|
|
599
|
-
label: 'BUILD'
|
|
1236
|
+
name: 'Analytics',
|
|
1237
|
+
description: 'Get a better understanding of where your traffic is coming from.',
|
|
1238
|
+
href: '#',
|
|
1239
|
+
icon: 'home03',
|
|
600
1240
|
},
|
|
601
1241
|
{
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
href: '#',
|
|
607
|
-
icon: 'bookopen01',
|
|
608
|
-
name: 'Blog',
|
|
609
|
-
strokeClass: 'stroke-blue-500'
|
|
610
|
-
},
|
|
611
|
-
{
|
|
612
|
-
description: '',
|
|
613
|
-
href: '#',
|
|
614
|
-
icon: 'videorecorder',
|
|
615
|
-
name: 'Tech talks',
|
|
616
|
-
strokeClass: 'stroke-blue-500'
|
|
617
|
-
},
|
|
618
|
-
{
|
|
619
|
-
description: '',
|
|
620
|
-
href: '#',
|
|
621
|
-
icon: 'graduationhat02',
|
|
622
|
-
name: 'Tutorials',
|
|
623
|
-
strokeClass: 'stroke-blue-500'
|
|
624
|
-
},
|
|
625
|
-
{
|
|
626
|
-
description: '',
|
|
627
|
-
href: '#',
|
|
628
|
-
icon: 'calendarplus02',
|
|
629
|
-
name: 'Events',
|
|
630
|
-
strokeClass: 'stroke-blue-500'
|
|
631
|
-
},
|
|
632
|
-
{
|
|
633
|
-
description: '',
|
|
634
|
-
href: '#',
|
|
635
|
-
icon: 'box',
|
|
636
|
-
name: 'Resources',
|
|
637
|
-
strokeClass: 'stroke-blue-500'
|
|
638
|
-
},
|
|
639
|
-
],
|
|
640
|
-
label: 'Learn',
|
|
641
|
-
|
|
1242
|
+
name: 'Engagement',
|
|
1243
|
+
description: 'Speak directly to your customers in a more meaningful way.',
|
|
1244
|
+
href: '#',
|
|
1245
|
+
icon: 'home03',
|
|
642
1246
|
},
|
|
643
1247
|
{
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
{
|
|
661
|
-
description: '',
|
|
662
|
-
href: '#',
|
|
663
|
-
icon: 'cube01',
|
|
664
|
-
name: 'Forum',
|
|
665
|
-
strokeClass: 'stroke-blue-500'
|
|
666
|
-
},
|
|
667
|
-
{
|
|
668
|
-
description: '',
|
|
669
|
-
href: '#',
|
|
670
|
-
icon: 'cube01',
|
|
671
|
-
name: 'Meetups',
|
|
672
|
-
strokeClass: 'stroke-blue-500'
|
|
673
|
-
},
|
|
674
|
-
{
|
|
675
|
-
description: '',
|
|
676
|
-
href: '#',
|
|
677
|
-
icon: 'hand',
|
|
678
|
-
name: 'Support',
|
|
679
|
-
strokeClass: 'stroke-blue-500'
|
|
680
|
-
},
|
|
681
|
-
],
|
|
682
|
-
label: 'Connect',
|
|
683
|
-
|
|
1248
|
+
name: 's',
|
|
1249
|
+
description: 'Your customers’ data will be safe and secure.',
|
|
1250
|
+
href: '#',
|
|
1251
|
+
icon: 'home03'
|
|
1252
|
+
},
|
|
1253
|
+
{
|
|
1254
|
+
name: 'Securidty',
|
|
1255
|
+
description: 'Your customers’ data will be safe and secure.',
|
|
1256
|
+
href: '#',
|
|
1257
|
+
icon: 'home03'
|
|
1258
|
+
},
|
|
1259
|
+
{
|
|
1260
|
+
name: 'Secudristy',
|
|
1261
|
+
description: 'Your customers’ data will be safe and secure.',
|
|
1262
|
+
href: '#',
|
|
1263
|
+
icon: 'home03'
|
|
684
1264
|
},
|
|
685
1265
|
],
|
|
1266
|
+
},
|
|
1267
|
+
{
|
|
686
1268
|
|
|
687
|
-
|
|
1269
|
+
title: 'Developer',
|
|
1270
|
+
titleDropdown: [
|
|
688
1271
|
{
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
1272
|
+
name: 'Analytics',
|
|
1273
|
+
description: 'Get a better understanding of where your traffic is coming from.',
|
|
1274
|
+
href: '#',
|
|
1275
|
+
icon: 'home03',
|
|
693
1276
|
},
|
|
694
1277
|
{
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
1278
|
+
name: 'Engagement',
|
|
1279
|
+
description: 'Speak directly to your customers in a more meaningful way.',
|
|
1280
|
+
href: '#',
|
|
1281
|
+
icon: 'home03',
|
|
699
1282
|
},
|
|
700
1283
|
{
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
1284
|
+
name: 'Security',
|
|
1285
|
+
description: 'Your customers’ data will be safe and secure.',
|
|
1286
|
+
href: '#',
|
|
1287
|
+
icon: 'home03'
|
|
705
1288
|
},
|
|
706
|
-
]
|
|
1289
|
+
],
|
|
707
1290
|
},
|
|
708
1291
|
{
|
|
709
1292
|
|
|
@@ -715,71 +1298,26 @@ V3Header.defaultProps = {
|
|
|
715
1298
|
{
|
|
716
1299
|
|
|
717
1300
|
title: 'Company',
|
|
718
|
-
|
|
1301
|
+
titleDropdown: [
|
|
719
1302
|
{
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
icon: "pentool02",
|
|
725
|
-
name: 'Our story',
|
|
726
|
-
strokeClass: 'stroke-blue-500'
|
|
727
|
-
},
|
|
728
|
-
{
|
|
729
|
-
description: '',
|
|
730
|
-
href: '#',
|
|
731
|
-
icon: 'data',
|
|
732
|
-
name: 'Partners',
|
|
733
|
-
strokeClass: 'stroke-blue-500'
|
|
734
|
-
},
|
|
735
|
-
{
|
|
736
|
-
description: '',
|
|
737
|
-
href: '#',
|
|
738
|
-
icon: 'hearthand',
|
|
739
|
-
name: 'Work at Hasura',
|
|
740
|
-
strokeClass: 'stroke-blue-500'
|
|
741
|
-
},
|
|
742
|
-
{
|
|
743
|
-
description: '',
|
|
744
|
-
href: '#',
|
|
745
|
-
icon: 'headingsquare',
|
|
746
|
-
name: 'News room',
|
|
747
|
-
strokeClass: 'stroke-blue-500'
|
|
748
|
-
},
|
|
749
|
-
{
|
|
750
|
-
description: '',
|
|
751
|
-
href: '#',
|
|
752
|
-
icon: 'star06',
|
|
753
|
-
name: 'Brand',
|
|
754
|
-
strokeClass: 'stroke-blue-500'
|
|
755
|
-
},
|
|
756
|
-
|
|
757
|
-
],
|
|
758
|
-
label: 'Company'
|
|
759
|
-
},
|
|
760
|
-
|
|
761
|
-
],
|
|
762
|
-
|
|
763
|
-
tertiaryCard: [
|
|
764
|
-
{
|
|
765
|
-
title: 'HasuraCon 2023 is here!',
|
|
766
|
-
|
|
767
|
-
title_colorClass: 'text-neutral-900',
|
|
768
|
-
img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/hascon_211daeb83a.png'
|
|
1303
|
+
name: 'Analytics',
|
|
1304
|
+
description: 'Get a better understanding of where your traffic is coming from.',
|
|
1305
|
+
href: '#',
|
|
1306
|
+
icon: 'home03',
|
|
769
1307
|
},
|
|
770
1308
|
{
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
1309
|
+
name: 'Engagement',
|
|
1310
|
+
description: 'Speak directly to your customers in a more meaningful way.',
|
|
1311
|
+
href: '#',
|
|
1312
|
+
icon: 'home03',
|
|
775
1313
|
},
|
|
776
1314
|
{
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
1315
|
+
name: 'Security',
|
|
1316
|
+
description: 'Your customers’ data will be safe and secure.',
|
|
1317
|
+
href: '#',
|
|
1318
|
+
icon: 'home03'
|
|
781
1319
|
},
|
|
782
|
-
]
|
|
1320
|
+
],
|
|
783
1321
|
},
|
|
784
1322
|
{
|
|
785
1323
|
|
|
@@ -787,6 +1325,30 @@ V3Header.defaultProps = {
|
|
|
787
1325
|
href: ''
|
|
788
1326
|
|
|
789
1327
|
},
|
|
1328
|
+
// {
|
|
1329
|
+
|
|
1330
|
+
// title: 'Pricing',
|
|
1331
|
+
// titleDropdown: [
|
|
1332
|
+
// {
|
|
1333
|
+
// name: 'Analytics',
|
|
1334
|
+
// description: 'Get a better understanding of where your traffic is coming from.',
|
|
1335
|
+
// href: '#',
|
|
1336
|
+
// icon: 'home03',
|
|
1337
|
+
// },
|
|
1338
|
+
// {
|
|
1339
|
+
// name: 'Engagement',
|
|
1340
|
+
// description: 'Speak directly to your customers in a more meaningful way.',
|
|
1341
|
+
// href: '#',
|
|
1342
|
+
// icon: 'home03',
|
|
1343
|
+
// },
|
|
1344
|
+
// {
|
|
1345
|
+
// name: 'Security',
|
|
1346
|
+
// description: 'Your customers’ data will be safe and secure.',
|
|
1347
|
+
// href: '#',
|
|
1348
|
+
// icon: 'home03'
|
|
1349
|
+
// },
|
|
1350
|
+
// ]
|
|
1351
|
+
// },
|
|
790
1352
|
|
|
791
1353
|
|
|
792
1354
|
],
|