hds-web 1.16.4 → 1.16.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.css +2 -2
  2. package/dist/index.es.css +2 -2
  3. package/dist/index.es.js +5 -5
  4. package/dist/index.js +5 -5
  5. package/package.json +1 -1
  6. package/src/HDS/assets/icons/x-close.svg +1 -1
  7. package/src/HDS/components/Cards/Dropdown/v3Dropdown.js +2 -2
  8. package/src/HDS/components/Headers/v3Header.js +394 -970
  9. package/src/styles/tailwind.css +39 -78
package/src/HDS/components/Headers/v3Header.js CHANGED
@@ -33,840 +33,155 @@ function classNames(...classes) {
33
33
  return classes.filter(Boolean).join(' ')
34
34
  }
35
35
 
36
+
37
+
36
38
  export default function V3Header(props) {
37
39
  const [mobileNavOpen, setmobileNavOpen] = useState(false);
38
40
  const [isProduct, setIsProduct] = useState(false)
39
41
  const [isDeveloper, setIsDeveloper] = useState(false)
40
42
  const [isCompany, setIsCompany] = useState(false)
41
43
  const [currentTab, setCurrentTab] = useState('')
44
+ const [isShown, setIsShown] = useState(false)
42
45
  const [isArrowActive, setIsArrowActive] = useState(false)
43
46
 
44
- const dropdownA = (solutions) => (
45
- <div>
46
- <div>
47
- <hr className='w-full h-9 border-0 ' />
48
- </div>
49
-
50
- <div className=" p-2 bg-neutral-150 rounded-3xl ">
51
- <V3Dropdown
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
- ]}
130
- />
131
- </div>
132
- </div>
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',
293
-
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) => (
47
+ //testing
48
+ const [dropdownVisibility, setDropdownVisibility] = useState(Array(props.HEADER_LIST.length).fill(false));
49
+
50
+ const handleDropdownEnter = (index) => {
51
+ setDropdownVisibility((prevVisibility) => {
52
+ const updatedVisibility = [...prevVisibility];
53
+ updatedVisibility[index] = true;
54
+ return updatedVisibility;
55
+ });
56
+ };
57
+
58
+ const handleDropdownLeave = (index) => {
59
+ setDropdownVisibility((prevVisibility) => {
60
+ const updatedVisibility = [...prevVisibility];
61
+ updatedVisibility[index] = false;
62
+ return updatedVisibility;
63
+ });
64
+ };
65
+
66
+ const renderDropdown = (primaryCard, secondaryCardArr, tertiaryCard) => (
303
67
  <div>
304
68
  <div>
305
- <hr className='w-full h-9 border-0 ' />
69
+ <hr className="w-full h-9 border-0" />
306
70
  </div>
307
- <div className=" p-2 bg-neutral-150 rounded-3xl ">
71
+ <div className="p-2 bg-neutral-150 rounded-3xl">
308
72
  <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',
364
-
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
- ]}
73
+ primaryCard={primaryCard}
74
+ secondaryCardArr={secondaryCardArr}
75
+ tertiaryCard={tertiaryCard}
375
76
  />
376
77
  </div>
377
78
  </div>
378
- )
79
+ );
379
80
 
380
- const headerListfn = (HEADER_LIST) => (
381
- <>
382
- {/* <div id='github_button' className='flex items-center justify-center -mb-2'>
383
- <GithubWidget />
384
- </div> */}
81
+ const renderDropdownContainer = (headerList, id) => {
82
+ const { title, primaryCard, secondaryCardArr, tertiaryCard } = headerList[id];
385
83
 
386
- <div id='dropdown_product'>
387
- {HEADER_LIST[0] && (
84
+ return (
85
+ <div id={`dropdown_${id}`}>
86
+ {headerList[id] && (
388
87
  <div
389
- className="relative "
390
-
391
- onMouseEnter={() => setIsProduct(true)}
392
- onMouseLeave={() => setIsProduct(false)}
393
-
88
+ className="relative"
89
+ onMouseEnter={() => handleDropdownEnter(id)}
90
+ onMouseLeave={() => handleDropdownLeave(id)}
394
91
  >
395
92
  <div
396
93
  className={classNames(
397
94
  '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',
398
- isProduct ? '' : 'text-gray-500',
95
+ dropdownVisibility[id] ? '' : 'text-gray-500'
399
96
  )}
400
97
  >
401
-
402
98
  <div className="flex flex-col items-center cursor-pointer">
403
99
  <Typography
404
- className='hover:text-blue-600'
405
- textStyle="body3c-medium">{`${HEADER_LIST[0]['title']} `}</Typography>
100
+ className="hover:text-blue-600"
101
+ textStyle="body3c-medium"
102
+ >
103
+ {`${title} `}
104
+ </Typography>
406
105
  </div>
407
-
408
106
  </div>
409
- <motion.div
410
-
411
-
412
- >
413
- {isProduct && (
107
+ <motion.div>
108
+ {dropdownVisibility[id] && (
414
109
  <div
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
110
+ id={`dropdown_${id}_content`}
111
+ className="left-0 z-20"
112
+ onMouseEnter={() => handleDropdownEnter(id)}
113
+ onMouseLeave={() => handleDropdownLeave(id)}
114
+ onScroll={() => handleDropdownLeave(id)}
424
115
  >
425
116
  <motion.div
426
117
  initial={{ opacity: 0 }}
427
118
  animate={{ opacity: 1 }}
428
- transition={{ ease: "easeInOut", duration: 0.1 }}
429
- className='absolute -left-[137px] z-[2] transform'>
430
- {dropdownA(HEADER_LIST[0]['titleDropdown'])}
119
+ transition={{ ease: 'easeInOut', duration: 0.1 }}
120
+ className="absolute -left-[137px] z-[2] transform"
121
+
122
+ >
123
+ {renderDropdown(
124
+ primaryCard,
125
+ secondaryCardArr,
126
+ tertiaryCard
127
+ )}
431
128
  </motion.div>
432
129
  </div>
433
-
434
130
  )}
435
131
  </motion.div>
436
132
  </div>
437
133
  )}
438
134
  </div>
439
- <div id="dropdown_developer" className='relative' >
440
- {HEADER_LIST[1] && (
441
- <div
442
- className=""
443
- onMouseEnter={() => setIsDeveloper(true)}
444
- onMouseLeave={() => setIsDeveloper(false)}
135
+ );
136
+ };
445
137
 
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>
477
-
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>
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>
542
138
 
139
+ const headerListfunction = (headerList) => (
140
+ <>
141
+ {renderDropdownContainer(headerList, 0)}
142
+ {renderDropdownContainer(headerList, 1)}
143
+ {renderDropdownContainer(headerList, 3)}
543
144
  </>
544
145
  );
545
146
 
546
- const mobileNav = (Header_LIST) => (
147
+
148
+ //testing
149
+
150
+ const mobileNav = (HEADER_LIST) => (
547
151
  <div className='pt-4 '>
548
152
  <div className='transform transition-all'>
549
153
  {isProduct && (
550
154
  <motion.div
551
155
  className='product_mobile mr-0'>
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>
156
+
157
+ <V3Dropdown
158
+ primaryCard={HEADER_LIST[0]['primaryCard']}
159
+ secondaryCardArr={HEADER_LIST[0]['secondaryCardArr']}
160
+ tertiaryCard={HEADER_LIST[0]['tertiaryCard']}
161
+ />
162
+
634
163
  </motion.div>)}
635
164
  {isDeveloper && (
636
165
  <div className='product_developer'>
637
166
  <V3Dropdown
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
- ]}
167
+ primaryCard={HEADER_LIST[1]['primaryCard']}
168
+ secondaryCardArr={HEADER_LIST[1]['secondaryCardArr']}
169
+ tertiaryCard={HEADER_LIST[1]['tertiaryCard']}
793
170
  />
794
171
  </div>)
795
172
  }
796
173
  {isCompany && (<div className='product_company'>
797
174
  <V3Dropdown
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
- ]}
175
+ primaryCard={HEADER_LIST[1]['primaryCard']}
176
+ secondaryCardArr={HEADER_LIST[1]['secondaryCardArr']}
177
+ tertiaryCard={HEADER_LIST[1]['tertiaryCard']}
864
178
  />
865
179
  </div>)}
866
180
  </div>
867
181
  </div>
868
182
  )
869
183
 
184
+
870
185
  let class1;
871
186
  let class2;
872
187
  let class3;
@@ -936,12 +251,14 @@ export default function V3Header(props) {
936
251
  <div className={'h-full ' + ((mobileNavOpen) ? " hds-hidden" : "")}>
937
252
  <AlgoliaSearch {...props} />
938
253
  </div>
939
- <div onClick={() => handleMbDropdownClose()}>
254
+ {!(isCompany || isDeveloper || isProduct) &&
255
+ (<div onClick={() => handleMbDropdownClose()}>
940
256
  <div className=' h-5 mt-3 cursor-pointer' >
941
257
  <div aria-hidden="true" className={`${class1} block absolute h-[2px] w-[15px] bg-neutral-800 transform transition duration-500 ease-in-out`}></div>
942
258
  <div aria-hidden="true" className={`${class3} block absolute h-0.5 w-[15px] bg-neutral-800 transform transition duration-500 ease-in-out`}></div>
943
259
  </div>
944
- </div>
260
+
261
+ </div>)}
945
262
  </div>
946
263
  </div>
947
264
  <div className='hds-hidden tb-l:flex flex-row w-full justify-between items-center'>
@@ -951,24 +268,8 @@ export default function V3Header(props) {
951
268
  onMouseLeave={() => setIsArrowActive(false)}
952
269
 
953
270
  >
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
-
271
+ {headerListfunction(props.HEADER_LIST)}
272
+
972
273
  </nav>
973
274
 
974
275
  <div className='hds-hidden tb-l:flex flex-row items-center gap-x-4 '>
@@ -1018,25 +319,37 @@ export default function V3Header(props) {
1018
319
  <span className="sr-only">Open menu</span> */}
1019
320
 
1020
321
 
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]")}>
322
+ <div className={"bg-neutral-100 shadow-sh1 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]")}>
1022
323
 
1023
- <div className="bg-neutral-100 h-[calc(100%-80px)] rounded-2xl overflow-scroll ">
324
+ <div className="bg-neutral-100 h-[calc(100%-80px)] rounded-2xl overflow-y-scroll scrollbar-hide">
1024
325
 
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
326
+ <div className='pt-4 pb-4 mr-[16px] min-h-[36px] flex flex-row justify-between items-center sticky top-0 bg-neutral-100 z-50 '>
327
+ {(isCompany || isDeveloper || isProduct) &&
328
+ (
329
+ <div
1027
330
  className=' flex flex-row justify-start z-10'
1028
331
  onClick={() => handleBackClick()}
1029
332
 
1030
333
  >
1031
334
  <Icon height='w-5 h-5 ml-4 cursor-pointer' variant={'arrowleft'} strokeClass='stroke-neutral-1000' />
1032
- </div>}
335
+ </div>
336
+ )}
1033
337
  <motion.div
1034
338
  initial={{ opacity: 0 }}
1035
339
  animate={{ opacity: 1 }}
1036
340
  transition={{ duration: 0.4, opacity: { ease: "easeIn" } }}
1037
- className='w-full justify-center -ml-9 flex '>
341
+ className='w-full justify-center flex '>
1038
342
  <Typography textStyle='body3c-medium' className='text-neutral-900'>{currentTab}</Typography>
1039
343
  </motion.div>
344
+ {(isCompany || isDeveloper || isProduct) &&
345
+ (
346
+ <div
347
+ className=' flex flex-row justify-start z-10'
348
+ onClick={() => handleBackClick()}
349
+
350
+ >
351
+ <Icon height='w-5 h-5 ml-4 stroke-2 cursor-pointer' variant={'xclose'} strokeClass='stroke-neutral-1000' />
352
+ </div>)}
1040
353
 
1041
354
  </div>
1042
355
  <AnimatePresence mode='wait' exit={false} >
@@ -1051,7 +364,7 @@ export default function V3Header(props) {
1051
364
  className="flex flex-col justify-between "
1052
365
  >
1053
366
  <div className="flex flex-col justify-between rounded-2xl h-full">
1054
- <div className="pl-4 pr-[34px]">
367
+ <div className="pl-4 pr-8 tb:pr-4">
1055
368
  {mobileNav(props.HEADER_LIST)}
1056
369
  </div>
1057
370
  </div>
@@ -1070,7 +383,7 @@ export default function V3Header(props) {
1070
383
  alt=""
1071
384
  />
1072
385
  </div>
1073
- <nav className="grid divide-y mr-8 bg-neutral-0 divide-neutral-200 border border-neutral-200 rounded-3xl mb-6">
386
+ <nav className="grid divide-y mr-8 tb:mr-4 bg-neutral-0 divide-neutral-200 border border-neutral-200 rounded-3xl mb-6">
1074
387
  {props.HEADER_LIST.map((item) => (
1075
388
  <div
1076
389
  key={item['title']}
@@ -1107,6 +420,7 @@ export default function V3Header(props) {
1107
420
  rightAnimatedArrow='true'
1108
421
  rightAnimatedArrowColor='#3970FD'
1109
422
  animatedHoverStroke='group-hover:stroke-neutral-0'
423
+ className=' !w-full'
1110
424
  />
1111
425
  </a>
1112
426
  <a href='https://cloud.hasura.io/signup?pg=home&plcmt=header&cta=try-hasura&tech=default' className='w-1/2'>
@@ -1120,6 +434,7 @@ export default function V3Header(props) {
1120
434
  rightAnimatedArrow='true'
1121
435
  rightAnimatedArrowColor='#ffffff'
1122
436
  animatedHoverStroke='group-hover:stroke-neutral-0'
437
+ className=' !w-full'
1123
438
  />
1124
439
  </a>
1125
440
  </div>
@@ -1130,99 +445,6 @@ export default function V3Header(props) {
1130
445
 
1131
446
  </div>
1132
447
  </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 */}
1226
448
  </div>
1227
449
  )
1228
450
  }
@@ -1231,62 +453,243 @@ V3Header.defaultProps = {
1231
453
  HEADER_LIST: [
1232
454
  {
1233
455
  title: 'Product',
1234
- titleDropdown: [
1235
- {
1236
- name: 'Analytics',
1237
- description: 'Get a better understanding of where your traffic is coming from.',
1238
- href: '#',
1239
- icon: 'home03',
1240
- },
1241
- {
1242
- name: 'Engagement',
1243
- description: 'Speak directly to your customers in a more meaningful way.',
1244
- href: '#',
1245
- icon: 'home03',
1246
- },
456
+ primaryCard: {
457
+ iconVariant: 'hasura',
458
+ mainDescription: 'Choose from our open source community edition, fully managed cloud edition or custom enterprise',
459
+ primaryBtnLabel: 'Hasura Product',
460
+ strokeClass: 'stroke-neutral-800',
461
+ secondaryBtn: [
462
+ { cta_leftVariantIcon: 'home03', cta_leftVariantIconColor: '#6C737F', cta_text: 'Compare plans' }
463
+ ],
464
+ },
465
+ secondaryCardArr:
466
+ [
467
+ {
468
+ split: true,
469
+ childArray: [
470
+ {
471
+ description: '',
472
+ href: '#',
473
+ icon: "lightning01",
474
+ name: 'Instant API',
475
+ strokeClass: 'stroke-blue-500'
476
+ },
477
+ {
478
+ description: '',
479
+ href: '#',
480
+ icon: 'data',
481
+ name: 'Federation',
482
+ strokeClass: 'stroke-blue-500'
483
+ },
484
+ {
485
+ description: '',
486
+ href: '#',
487
+ icon: 'eye',
488
+ name: 'Authorization',
489
+ strokeClass: 'stroke-blue-500'
490
+ },
491
+ {
492
+ description: '',
493
+ href: '#',
494
+ icon: 'shieldtick',
495
+ name: 'API Security',
496
+ strokeClass: 'stroke-blue-500'
497
+ },
498
+ {
499
+ description: '',
500
+ href: '#',
501
+ icon: 'speedometer03',
502
+ name: 'Performance',
503
+ strokeClass: 'stroke-blue-500'
504
+ },
505
+ {
506
+ description: '',
507
+ href: '#',
508
+ icon: "barchartsquare01",
509
+ name: 'Observability',
510
+ strokeClass: 'stroke-blue-500'
511
+ }
512
+ ],
513
+ label: 'CAPABILITIES'
514
+ },
515
+ {
516
+ childArray: [
517
+ {
518
+ description: '',
519
+ href: '#',
520
+ icon: 'database01',
521
+ name: 'All DBs',
522
+ strokeClass: 'stroke-blue-500'
523
+ },
524
+ {
525
+ description: '',
526
+ href: '#',
527
+ icon: 'checksquare',
528
+ name: 'Planned DBs',
529
+ strokeClass: 'stroke-blue-500'
530
+ },
531
+ ],
532
+ label: 'Integrations'
533
+ }
534
+ ]
535
+ },
536
+ {
537
+
538
+ title: 'Developer',
539
+ secondaryCardArr: [
1247
540
  {
1248
- name: 's',
1249
- description: 'Your customers’ data will be safe and secure.',
1250
- href: '#',
1251
- icon: 'home03'
541
+ childArray: [
542
+ {
543
+ description: '',
544
+ href: '#',
545
+ icon: "file02",
546
+ name: 'Documentation',
547
+ strokeClass: 'stroke-blue-500'
548
+ },
549
+ {
550
+ description: '',
551
+ href: '#',
552
+ icon: 'hasura',
553
+ name: 'Hasura hub',
554
+ strokeClass: 'stroke-blue-500'
555
+ },
556
+ {
557
+ description: '',
558
+ href: '#',
559
+ icon: 'route',
560
+ name: 'Guides',
561
+ strokeClass: 'stroke-blue-500'
562
+ },
563
+ {
564
+ description: '',
565
+ href: '#',
566
+ icon: 'asterisk02',
567
+ name: 'GraphQL hub',
568
+ strokeClass: 'stroke-blue-500'
569
+ },
570
+ {
571
+ description: '',
572
+ href: '#',
573
+ icon: "codebrowser",
574
+ name: 'GraphQL',
575
+ strokeClass: 'stroke-blue-500'
576
+ },
577
+ {
578
+ description: '',
579
+ href: '#',
580
+ icon: 'gitpullrequest',
581
+ name: 'Changelog',
582
+ strokeClass: 'stroke-blue-500'
583
+ }
584
+ ],
585
+ label: 'BUILD'
1252
586
  },
1253
587
  {
1254
- name: 'Securidty',
1255
- description: 'Your customers’ data will be safe and secure.',
1256
- href: '#',
1257
- icon: 'home03'
588
+
589
+ childArray: [
590
+ {
591
+ description: '',
592
+ href: '#',
593
+ icon: 'bookopen01',
594
+ name: 'Blog',
595
+ strokeClass: 'stroke-blue-500'
596
+ },
597
+ {
598
+ description: '',
599
+ href: '#',
600
+ icon: 'videorecorder',
601
+ name: 'Tech talks',
602
+ strokeClass: 'stroke-blue-500'
603
+ },
604
+ {
605
+ description: '',
606
+ href: '#',
607
+ icon: 'graduationhat02',
608
+ name: 'Tutorials',
609
+ strokeClass: 'stroke-blue-500'
610
+ },
611
+ {
612
+ description: '',
613
+ href: '#',
614
+ icon: 'calendarplus02',
615
+ name: 'Events',
616
+ strokeClass: 'stroke-blue-500'
617
+ },
618
+ {
619
+ description: '',
620
+ href: '#',
621
+ icon: 'box',
622
+ name: 'Resources',
623
+ strokeClass: 'stroke-blue-500'
624
+ },
625
+ ],
626
+ label: 'Learn',
627
+
1258
628
  },
1259
629
  {
1260
- name: 'Secudristy',
1261
- description: 'Your customers’ data will be safe and secure.',
1262
- href: '#',
1263
- icon: 'home03'
630
+
631
+ childArray: [
632
+ {
633
+ description: '',
634
+ href: '#',
635
+ icon: 'users01',
636
+ name: 'Community',
637
+ strokeClass: 'stroke-blue-500'
638
+ },
639
+ {
640
+ description: '',
641
+ href: '#',
642
+ icon: 'cube01',
643
+ name: 'Discord',
644
+ strokeClass: 'stroke-blue-500'
645
+ },
646
+ {
647
+ description: '',
648
+ href: '#',
649
+ icon: 'cube01',
650
+ name: 'Forum',
651
+ strokeClass: 'stroke-blue-500'
652
+ },
653
+ {
654
+ description: '',
655
+ href: '#',
656
+ icon: 'cube01',
657
+ name: 'Meetups',
658
+ strokeClass: 'stroke-blue-500'
659
+ },
660
+ {
661
+ description: '',
662
+ href: '#',
663
+ icon: 'hand',
664
+ name: 'Support',
665
+ strokeClass: 'stroke-blue-500'
666
+ },
667
+ ],
668
+ label: 'Connect',
669
+
1264
670
  },
1265
671
  ],
1266
- },
1267
- {
1268
672
 
1269
- title: 'Developer',
1270
- titleDropdown: [
673
+ tertiaryCard: [
1271
674
  {
1272
- name: 'Analytics',
1273
- description: 'Get a better understanding of where your traffic is coming from.',
1274
- href: '#',
1275
- icon: 'home03',
675
+ title: 'HasuraCon 2023 is here!',
676
+
677
+ title_colorClass: 'text-neutral-900',
678
+ img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/hascon_211daeb83a.png'
1276
679
  },
1277
680
  {
1278
- name: 'Engagement',
1279
- description: 'Speak directly to your customers in a more meaningful way.',
1280
- href: '#',
1281
- icon: 'home03',
681
+ title: 'Top 6 Architecture Trends for API Development',
682
+
683
+ title_colorClass: 'text-neutral-900',
684
+ img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/api_trends_0a035678d8.png'
1282
685
  },
1283
686
  {
1284
- name: 'Security',
1285
- description: 'Your customers’ data will be safe and secure.',
1286
- href: '#',
1287
- icon: 'home03'
687
+ title: 'Announcing Hasura integration with Snowflake',
688
+
689
+ title_colorClass: 'text-neutral-900',
690
+ img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/snowflake_def20494db.png'
1288
691
  },
1289
- ],
692
+ ]
1290
693
  },
1291
694
  {
1292
695
 
@@ -1298,26 +701,71 @@ V3Header.defaultProps = {
1298
701
  {
1299
702
 
1300
703
  title: 'Company',
1301
- titleDropdown: [
704
+ secondaryCardArr: [
705
+ {
706
+ childArray: [
707
+ {
708
+ description: '',
709
+ href: '#',
710
+ icon: "pentool02",
711
+ name: 'Our story',
712
+ strokeClass: 'stroke-blue-500'
713
+ },
714
+ {
715
+ description: '',
716
+ href: '#',
717
+ icon: 'data',
718
+ name: 'Partners',
719
+ strokeClass: 'stroke-blue-500'
720
+ },
721
+ {
722
+ description: '',
723
+ href: '#',
724
+ icon: 'hearthand',
725
+ name: 'Work at Hasura',
726
+ strokeClass: 'stroke-blue-500'
727
+ },
728
+ {
729
+ description: '',
730
+ href: '#',
731
+ icon: 'headingsquare',
732
+ name: 'News room',
733
+ strokeClass: 'stroke-blue-500'
734
+ },
735
+ {
736
+ description: '',
737
+ href: '#',
738
+ icon: 'star06',
739
+ name: 'Brand',
740
+ strokeClass: 'stroke-blue-500'
741
+ },
742
+
743
+ ],
744
+ label: 'Company'
745
+ },
746
+
747
+ ],
748
+
749
+ tertiaryCard: [
1302
750
  {
1303
- name: 'Analytics',
1304
- description: 'Get a better understanding of where your traffic is coming from.',
1305
- href: '#',
1306
- icon: 'home03',
751
+ title: 'HasuraCon 2023 is here!',
752
+
753
+ title_colorClass: 'text-neutral-900',
754
+ img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/hascon_211daeb83a.png'
1307
755
  },
1308
756
  {
1309
- name: 'Engagement',
1310
- description: 'Speak directly to your customers in a more meaningful way.',
1311
- href: '#',
1312
- icon: 'home03',
757
+ title: 'Top 6 Architecture Trends for API Development',
758
+
759
+ title_colorClass: 'text-neutral-900',
760
+ img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/api_trends_0a035678d8.png'
1313
761
  },
1314
762
  {
1315
- name: 'Security',
1316
- description: 'Your customers’ data will be safe and secure.',
1317
- href: '#',
1318
- icon: 'home03'
763
+ title: 'Announcing Hasura integration with Snowflake',
764
+
765
+ title_colorClass: 'text-neutral-900',
766
+ img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/snowflake_def20494db.png'
1319
767
  },
1320
- ],
768
+ ]
1321
769
  },
1322
770
  {
1323
771
 
@@ -1325,30 +773,6 @@ V3Header.defaultProps = {
1325
773
  href: ''
1326
774
 
1327
775
  },
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
- // },
1352
776
 
1353
777
 
1354
778
  ],