hds-web 1.16.3 → 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 (14) 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/Cards/Menu/flyoutA.js +6 -15
  9. package/src/HDS/components/Headers/v3Header.js +438 -1009
  10. package/src/HDS/helpers/AlgoliaSearch/search.js +2 -1
  11. package/src/HDS/helpers/AlgoliaSearch/searchoverlay.js +2 -2
  12. package/src/HDS/helpers/AlgoliaSearch/searchwrapper.js +30 -23
  13. package/src/styles/tailwind.css +66 -76
  14. package/tailwind.config.js +1 -0
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: 'cube01',
116
- name: 'All DBs',
117
- strokeClass: 'stroke-blue-500'
118
- },
119
- {
120
- description: '',
121
- href: '#',
122
- icon: 'cube01',
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: "lightning01",
151
- name: 'Documentation',
152
- strokeClass: 'stroke-blue-500'
153
- },
154
- {
155
- description: '',
156
- href: '#',
157
- icon: 'data',
158
- name: 'Hasura hub',
159
- strokeClass: 'stroke-blue-500'
160
- },
161
- {
162
- description: '',
163
- href: '#',
164
- icon: 'eye',
165
- name: 'Guides',
166
- strokeClass: 'stroke-blue-500'
167
- },
168
- {
169
- description: '',
170
- href: '#',
171
- icon: 'shieldtick',
172
- name: 'GraphQL hub',
173
- strokeClass: 'stroke-blue-500'
174
- },
175
- {
176
- description: '',
177
- href: '#',
178
- icon: 'speedometer03',
179
- name: 'Changelog',
180
- strokeClass: 'stroke-blue-500'
181
- },
182
- {
183
- description: '',
184
- href: '#',
185
- icon: "barchartsquare01",
186
- name: 'GraphQL',
187
- strokeClass: 'stroke-blue-500'
188
- }
189
- ],
190
- label: 'BUILD'
191
- },
192
- {
193
-
194
- childArray: [
195
- {
196
- description: '',
197
- href: '#',
198
- icon: 'cube01',
199
- name: 'Blog',
200
- strokeClass: 'stroke-blue-500'
201
- },
202
- {
203
- description: '',
204
- href: '#',
205
- icon: 'cube01',
206
- name: 'Tech talks',
207
- strokeClass: 'stroke-blue-500'
208
- },
209
- {
210
- description: '',
211
- href: '#',
212
- icon: 'cube01',
213
- name: 'Tutorials',
214
- strokeClass: 'stroke-blue-500'
215
- },
216
- {
217
- description: '',
218
- href: '#',
219
- icon: 'cube01',
220
- name: 'Events',
221
- strokeClass: 'stroke-blue-500'
222
- },
223
- {
224
- description: '',
225
- href: '#',
226
- icon: 'cube01',
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: 'cube01',
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: 'cube01',
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: "lightning01",
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: 'eye',
331
- name: 'Work at Hasura',
332
- strokeClass: 'stroke-blue-500'
333
- },
334
- {
335
- description: '',
336
- href: '#',
337
- icon: 'shieldtick',
338
- name: 'News room',
339
- strokeClass: 'stroke-blue-500'
340
- },
341
- {
342
- description: '',
343
- href: '#',
344
- icon: 'speedometer03',
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)}
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>
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>
135
+ );
136
+ };
526
137
 
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,10 +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 className=' h-5 mt-3 cursor-pointer' onClick={() => handleMbDropdownClose()}>
940
- <div aria-hidden="true" className={`${class1} block absolute h-[2px] w-[15px] bg-neutral-800 transform transition duration-500 ease-in-out`}></div>
941
- <div aria-hidden="true" className={`${class3} block absolute h-0.5 w-[15px] bg-neutral-800 transform transition duration-500 ease-in-out`}></div>
942
- </div>
254
+ {!(isCompany || isDeveloper || isProduct) &&
255
+ (<div onClick={() => handleMbDropdownClose()}>
256
+ <div className=' h-5 mt-3 cursor-pointer' >
257
+ <div aria-hidden="true" className={`${class1} block absolute h-[2px] w-[15px] bg-neutral-800 transform transition duration-500 ease-in-out`}></div>
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>
259
+ </div>
260
+
261
+ </div>)}
943
262
  </div>
944
263
  </div>
945
264
  <div className='hds-hidden tb-l:flex flex-row w-full justify-between items-center'>
@@ -949,59 +268,48 @@ export default function V3Header(props) {
949
268
  onMouseLeave={() => setIsArrowActive(false)}
950
269
 
951
270
  >
952
-
953
- {headerListfn(props.HEADER_LIST)}
954
- {/* <span className="absolute top-8 left-0 w-full">
955
-
956
- {isArrowActive ? (
957
- <div
958
- className={`w-full relative transition-all duration-500 ${isProduct ? 'left-6' : isDeveloper ? 'left-[108px]' : 'left-[200px]'
959
- }`}
960
- >
961
- {(isProduct || isCompany || isDeveloper) &&
962
-
963
- <Icon height="h-5 w-5 fill-neutral-150" variant="triangle" strokeClass="stroke-neutral-150" />
964
- }
965
- </div>
966
- ) : null}
967
- </span> */}
968
-
969
-
271
+ {headerListfunction(props.HEADER_LIST)}
272
+
970
273
  </nav>
971
274
 
972
275
  <div className='hds-hidden tb-l:flex flex-row items-center gap-x-4 '>
973
276
 
974
277
  <AlgoliaSearch {...props} />
975
278
 
976
- <a href='' className='hds-hidden db:flex'>
279
+ <a href='https://hasura.io/contact-us?type=hasuraenterprise' className='hds-hidden db:flex'>
977
280
  <Typography textStyle='body3c-medium' className='text-neutral-800'>
978
- Contact Sales
281
+ Contact Us
979
282
  </Typography>
980
283
  </a>
981
- <HDSButton
982
- label="Log In"
983
- type='tonal'
984
- leftIconVariant='none'
985
- rightIconVariant='none'
986
- state='default'
987
- size='sm'
988
- rightAnimatedArrow='true'
989
- rightAnimatedArrowColor='#3970FD'
990
- animatedHoverStroke='group-hover:stroke-neutral-0'
991
- className='hds-hidden tb-l:flex'
992
- />
993
- <HDSButton
994
- label="Get Started"
995
- type='primary'
996
- leftIconVariant='none'
997
- rightIconVariant='none'
998
- state='default'
999
- size='sm'
1000
- rightAnimatedArrow='true'
1001
- rightAnimatedArrowColor='#ffffff'
1002
- animatedHoverStroke='group-hover:stroke-neutral-0'
1003
- className='hds-hidden tb:flex'
1004
- />
284
+ <a href='https://cloud.hasura.io/login?pg=home&plcmt=header&cta=log-in&tech=default' >
285
+ <HDSButton
286
+ label="Log In"
287
+ type='tonal'
288
+ leftIconVariant='none'
289
+ rightIconVariant='none'
290
+ state='default'
291
+ size='sm'
292
+ rightAnimatedArrow='true'
293
+ rightAnimatedArrowColor='#3970FD'
294
+ animatedHoverStroke='group-hover:stroke-neutral-0'
295
+ className='hds-hidden tb-l:flex'
296
+ />
297
+ </a>
298
+ <a href='https://cloud.hasura.io/signup?pg=home&plcmt=header&cta=try-hasura&tech=default'>
299
+
300
+ <HDSButton
301
+ label="Get Started"
302
+ type='primary'
303
+ leftIconVariant='none'
304
+ rightIconVariant='none'
305
+ state='default'
306
+ size='sm'
307
+ rightAnimatedArrow='true'
308
+ rightAnimatedArrowColor='#ffffff'
309
+ animatedHoverStroke='group-hover:stroke-neutral-0'
310
+ className='hds-hidden tb:flex'
311
+ />
312
+ </a>
1005
313
  </div>
1006
314
 
1007
315
  </div>
@@ -1011,25 +319,37 @@ export default function V3Header(props) {
1011
319
  <span className="sr-only">Open menu</span> */}
1012
320
 
1013
321
 
1014
- <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]")}>
1015
323
 
1016
- <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">
1017
325
 
1018
- <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 '>
1019
- {(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
1020
330
  className=' flex flex-row justify-start z-10'
1021
331
  onClick={() => handleBackClick()}
1022
332
 
1023
333
  >
1024
334
  <Icon height='w-5 h-5 ml-4 cursor-pointer' variant={'arrowleft'} strokeClass='stroke-neutral-1000' />
1025
- </div>}
335
+ </div>
336
+ )}
1026
337
  <motion.div
1027
338
  initial={{ opacity: 0 }}
1028
339
  animate={{ opacity: 1 }}
1029
340
  transition={{ duration: 0.4, opacity: { ease: "easeIn" } }}
1030
- className='w-full justify-center -ml-9 flex '>
341
+ className='w-full justify-center flex '>
1031
342
  <Typography textStyle='body3c-medium' className='text-neutral-900'>{currentTab}</Typography>
1032
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>)}
1033
353
 
1034
354
  </div>
1035
355
  <AnimatePresence mode='wait' exit={false} >
@@ -1044,7 +364,7 @@ export default function V3Header(props) {
1044
364
  className="flex flex-col justify-between "
1045
365
  >
1046
366
  <div className="flex flex-col justify-between rounded-2xl h-full">
1047
- <div className="pl-4 pr-[34px]">
367
+ <div className="pl-4 pr-8 tb:pr-4">
1048
368
  {mobileNav(props.HEADER_LIST)}
1049
369
  </div>
1050
370
  </div>
@@ -1054,16 +374,16 @@ export default function V3Header(props) {
1054
374
  initial={{ opacity: 1 }}
1055
375
  animate={{ opacity: 1 }}
1056
376
  transition={{ duration: 0.1, opacity: { ease: "easeIn" } }}
1057
- className="mt-20 flex flex-col gap-6 ml-4"
377
+ className="mt-7 flex flex-col gap-6 ml-4"
1058
378
  >
1059
- <div className="flex flex-col mr-8 items-center">
379
+ <div className="flex flex-col mr-[50px] mb-m:items-center items-end">
1060
380
  <img
1061
- className="inline-block w-full"
1062
- src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1683015500/hasura-con-2023/engage_clgotb.png"
381
+ className="inline-block max-w-[242px] w-full"
382
+ src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1688572403/hasura-design-system/mutations_1_tdh5ir.png "
1063
383
  alt=""
1064
384
  />
1065
385
  </div>
1066
- <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">
1067
387
  {props.HEADER_LIST.map((item) => (
1068
388
  <div
1069
389
  key={item['title']}
@@ -1089,7 +409,7 @@ export default function V3Header(props) {
1089
409
 
1090
410
  <div className='flex flex-row justify-around'>
1091
411
  <div className='w-full flex gap-2'>
1092
- <div className='w-1/2'>
412
+ <a href='https://cloud.hasura.io/login?pg=home&plcmt=header&cta=log-in&tech=default' className='w-1/2'>
1093
413
  <HDSButton
1094
414
  label="Log In"
1095
415
  type='tonal'
@@ -1100,13 +420,12 @@ export default function V3Header(props) {
1100
420
  rightAnimatedArrow='true'
1101
421
  rightAnimatedArrowColor='#3970FD'
1102
422
  animatedHoverStroke='group-hover:stroke-neutral-0'
1103
-
1104
-
423
+ className=' !w-full'
1105
424
  />
1106
- </div>
1107
- <div className='w-1/2'>
425
+ </a>
426
+ <a href='https://cloud.hasura.io/signup?pg=home&plcmt=header&cta=try-hasura&tech=default' className='w-1/2'>
1108
427
  <HDSButton
1109
- label="Sign up"
428
+ label="Get Started"
1110
429
  type='primary'
1111
430
  leftIconVariant='none'
1112
431
  rightIconVariant='none'
@@ -1115,8 +434,9 @@ export default function V3Header(props) {
1115
434
  rightAnimatedArrow='true'
1116
435
  rightAnimatedArrowColor='#ffffff'
1117
436
  animatedHoverStroke='group-hover:stroke-neutral-0'
437
+ className=' !w-full'
1118
438
  />
1119
- </div>
439
+ </a>
1120
440
  </div>
1121
441
  </div>
1122
442
 
@@ -1125,99 +445,6 @@ export default function V3Header(props) {
1125
445
 
1126
446
  </div>
1127
447
  </div>
1128
-
1129
-
1130
-
1131
- {/* mobile menu */}
1132
- <>
1133
- <div>
1134
-
1135
-
1136
- <div className="absolute h-[calc(100%-112px)] bg-base-0 z-[1] inset-x-0 top-0 origin-top-right hds-hidden transform transition">
1137
- <div className=" rounded-lg bg-neutral-0 h-[calc(100%-112px)] shadow-lg">
1138
- <div className="bg-neutral-0">
1139
- {/* <div className="flex items-center justify-end">
1140
- <div className="">
1141
- <div className="inline-flex items-center justify-center pt-4 pr-4 w-full focus:ring-0">
1142
- <Icon height={'h-5 w-5'} variant={'xclose'} strokeColor={'#3970FD'} />
1143
- </div>
1144
- </div>
1145
- </div> */}
1146
- <div className="mt-6 flex flex-col gap-6">
1147
- <div className='flex flex-col items-center'>
1148
- <img
1149
- className="inline-block w-full px-4 "
1150
- src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1683015500/hasura-con-2023/engage_clgotb.png"
1151
- alt=""
1152
- />
1153
- </div>
1154
-
1155
- <nav className="grid divide-y divide-neutral-200 border border-neutral-200 rounded-3xl hds-hidden-tbl ">
1156
- {props.HEADER_LIST.map((item) => (
1157
- <div
1158
- key={item['title']}
1159
- href='#'
1160
- className="flex justify-between items-center p-4 cursor-pointer"
1161
- >
1162
- {headerListfn(props.HEADER_LIST)}
1163
-
1164
- <div className="flex items-center justify-center gap-2 ">
1165
-
1166
- <Icon height='h-5 w-5' variant={'home03'} strokeColor={'#3970FD'} />
1167
-
1168
-
1169
- <Typography textStyle='body3c-medium' className='text-neutral-900'>
1170
- {`${item['title']}`}
1171
- </Typography>
1172
- </div>
1173
-
1174
- <Icon height='h-5 w-5 stroke-[1.5px]' variant={'chevronright'} strokeClass='stroke-neutral-500' />
1175
- </div>
1176
- ))}
1177
- </nav>
1178
- </div>
1179
- </div>
1180
- <div className="py-6 px-5 ">
1181
- <div className="mt-6 ">
1182
- <div className='flex flex-row justify-around'>
1183
- <div className='w-full flex gap-2'>
1184
- <div className='w-1/2'>
1185
- <HDSButton
1186
- label="Log In"
1187
- type='tonal'
1188
- leftIconVariant='none'
1189
- rightIconVariant='none'
1190
- state='default'
1191
- size='sm'
1192
- rightAnimatedArrow='true'
1193
- rightAnimatedArrowColor='#3970FD'
1194
- animatedHoverStroke='group-hover:stroke-neutral-0'
1195
-
1196
-
1197
- />
1198
- </div>
1199
- <div className='w-1/2'>
1200
- <HDSButton
1201
- label="Sign up"
1202
- type='primary'
1203
- leftIconVariant='none'
1204
- rightIconVariant='none'
1205
- state='default'
1206
- size='sm'
1207
- rightAnimatedArrow='true'
1208
- rightAnimatedArrowColor='#ffffff'
1209
- animatedHoverStroke='group-hover:stroke-neutral-0'
1210
- />
1211
- </div>
1212
- </div>
1213
- </div>
1214
- </div>
1215
- </div>
1216
- </div>
1217
- </div>
1218
- </div>
1219
- </>
1220
- {/* mobile menu */}
1221
448
  </div>
1222
449
  )
1223
450
  }
@@ -1226,62 +453,243 @@ V3Header.defaultProps = {
1226
453
  HEADER_LIST: [
1227
454
  {
1228
455
  title: 'Product',
1229
- titleDropdown: [
1230
- {
1231
- name: 'Analytics',
1232
- description: 'Get a better understanding of where your traffic is coming from.',
1233
- href: '#',
1234
- icon: 'home03',
1235
- },
1236
- {
1237
- name: 'Engagement',
1238
- description: 'Speak directly to your customers in a more meaningful way.',
1239
- href: '#',
1240
- icon: 'home03',
1241
- },
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: [
1242
540
  {
1243
- name: 's',
1244
- description: 'Your customers’ data will be safe and secure.',
1245
- href: '#',
1246
- 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'
1247
586
  },
1248
587
  {
1249
- name: 'Securidty',
1250
- description: 'Your customers’ data will be safe and secure.',
1251
- href: '#',
1252
- 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
+
1253
628
  },
1254
629
  {
1255
- name: 'Secudristy',
1256
- description: 'Your customers’ data will be safe and secure.',
1257
- href: '#',
1258
- 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
+
1259
670
  },
1260
671
  ],
1261
- },
1262
- {
1263
672
 
1264
- title: 'Developer',
1265
- titleDropdown: [
673
+ tertiaryCard: [
1266
674
  {
1267
- name: 'Analytics',
1268
- description: 'Get a better understanding of where your traffic is coming from.',
1269
- href: '#',
1270
- 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'
1271
679
  },
1272
680
  {
1273
- name: 'Engagement',
1274
- description: 'Speak directly to your customers in a more meaningful way.',
1275
- href: '#',
1276
- 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'
1277
685
  },
1278
686
  {
1279
- name: 'Security',
1280
- description: 'Your customers’ data will be safe and secure.',
1281
- href: '#',
1282
- 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'
1283
691
  },
1284
- ],
692
+ ]
1285
693
  },
1286
694
  {
1287
695
 
@@ -1293,26 +701,71 @@ V3Header.defaultProps = {
1293
701
  {
1294
702
 
1295
703
  title: 'Company',
1296
- titleDropdown: [
704
+ secondaryCardArr: [
1297
705
  {
1298
- name: 'Analytics',
1299
- description: 'Get a better understanding of where your traffic is coming from.',
1300
- href: '#',
1301
- icon: 'home03',
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: [
750
+ {
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'
1302
755
  },
1303
756
  {
1304
- name: 'Engagement',
1305
- description: 'Speak directly to your customers in a more meaningful way.',
1306
- href: '#',
1307
- 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'
1308
761
  },
1309
762
  {
1310
- name: 'Security',
1311
- description: 'Your customers’ data will be safe and secure.',
1312
- href: '#',
1313
- 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'
1314
767
  },
1315
- ],
768
+ ]
1316
769
  },
1317
770
  {
1318
771
 
@@ -1320,30 +773,6 @@ V3Header.defaultProps = {
1320
773
  href: ''
1321
774
 
1322
775
  },
1323
- // {
1324
-
1325
- // title: 'Pricing',
1326
- // titleDropdown: [
1327
- // {
1328
- // name: 'Analytics',
1329
- // description: 'Get a better understanding of where your traffic is coming from.',
1330
- // href: '#',
1331
- // icon: 'home03',
1332
- // },
1333
- // {
1334
- // name: 'Engagement',
1335
- // description: 'Speak directly to your customers in a more meaningful way.',
1336
- // href: '#',
1337
- // icon: 'home03',
1338
- // },
1339
- // {
1340
- // name: 'Security',
1341
- // description: 'Your customers’ data will be safe and secure.',
1342
- // href: '#',
1343
- // icon: 'home03'
1344
- // },
1345
- // ]
1346
- // },
1347
776
 
1348
777
 
1349
778
  ],