hds-web 1.16.4 → 1.16.6

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 (10) 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 +3 -3
  5. package/package.json +1 -1
  6. package/src/HDS/assets/icons/queries.svg +1 -1
  7. package/src/HDS/assets/icons/x-close.svg +1 -1
  8. package/src/HDS/components/Cards/Dropdown/v3Dropdown.js +2 -2
  9. package/src/HDS/components/Headers/v3Header.js +412 -974
  10. package/src/styles/tailwind.css +57 -88
package/src/HDS/components/Headers/v3Header.js CHANGED
@@ -33,840 +33,156 @@ function classNames(...classes) {
33
33
  return classes.filter(Boolean).join(' ')
34
34
  }
35
35
 
36
+
37
+
36
38
  export default function V3Header(props) {
39
+ const listSize = props.HEADER_LIST.length;
37
40
  const [mobileNavOpen, setmobileNavOpen] = useState(false);
38
41
  const [isProduct, setIsProduct] = useState(false)
39
42
  const [isDeveloper, setIsDeveloper] = useState(false)
40
43
  const [isCompany, setIsCompany] = useState(false)
41
44
  const [currentTab, setCurrentTab] = useState('')
45
+ const [isShown, setIsShown] = useState(false)
42
46
  const [isArrowActive, setIsArrowActive] = useState(false)
43
47
 
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) => (
48
+ //testing
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) => (
303
68
  <div>
304
69
  <div>
305
- <hr className='w-full h-9 border-0 ' />
70
+ <hr className="w-full h-9 border-0" />
306
71
  </div>
307
- <div className=" p-2 bg-neutral-150 rounded-3xl ">
72
+ <div className="p-2 bg-neutral-150 rounded-3xl">
308
73
  <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
- ]}
74
+ primaryCard={primaryCard}
75
+ secondaryCardArr={secondaryCardArr}
76
+ tertiaryCard={tertiaryCard}
375
77
  />
376
78
  </div>
377
79
  </div>
378
- )
80
+ );
379
81
 
380
- const headerListfn = (HEADER_LIST) => (
381
- <>
382
- {/* <div id='github_button' className='flex items-center justify-center -mb-2'>
383
- <GithubWidget />
384
- </div> */}
82
+ const renderDropdownContainer = (headerList, id) => {
83
+ const { title, primaryCard, secondaryCardArr, tertiaryCard } = headerList[id];
385
84
 
386
- <div id='dropdown_product'>
387
- {HEADER_LIST[0] && (
85
+ return (
86
+ <div id={`dropdown_${id}`}>
87
+ {headerList[id] && (
388
88
  <div
389
- className="relative "
390
-
391
- onMouseEnter={() => setIsProduct(true)}
392
- onMouseLeave={() => setIsProduct(false)}
393
-
89
+ className="relative"
90
+ onMouseEnter={() => handleDropdownEnter(id)}
91
+ onMouseLeave={() => handleDropdownLeave(id)}
394
92
  >
395
93
  <div
396
94
  className={classNames(
397
95
  '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',
96
+ dropdownVisibility[id] ? '' : 'text-gray-500'
399
97
  )}
400
98
  >
401
-
402
99
  <div className="flex flex-col items-center cursor-pointer">
403
100
  <Typography
404
- className='hover:text-blue-600'
405
- textStyle="body3c-medium">{`${HEADER_LIST[0]['title']} `}</Typography>
101
+ className="hover:text-blue-600"
102
+ textStyle="body3c-medium"
103
+ >
104
+ {`${title} `}
105
+ </Typography>
406
106
  </div>
407
-
408
107
  </div>
409
- <motion.div
410
-
411
-
412
- >
413
- {isProduct && (
108
+ <motion.div>
109
+ {dropdownVisibility[id] && (
414
110
  <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
111
+ id={`dropdown_${id}_content`}
112
+ className="left-0 z-20"
113
+ onMouseEnter={() => handleDropdownEnter(id)}
114
+ onMouseLeave={() => handleDropdownLeave(id)}
115
+ onScroll={() => handleDropdownLeave(id)}
424
116
  >
425
117
  <motion.div
426
118
  initial={{ opacity: 0 }}
427
119
  animate={{ opacity: 1 }}
428
- transition={{ ease: "easeInOut", duration: 0.1 }}
429
- className='absolute -left-[137px] z-[2] transform'>
430
- {dropdownA(HEADER_LIST[0]['titleDropdown'])}
120
+ transition={{ ease: 'easeInOut', duration: 0.1 }}
121
+ className={"absolute -left-[137px] z-[2] transform " + (dropdownVisibility[0] ? '-left-[137px] ' : '') + (dropdownVisibility[1] ? '-left-[218px]' : '') + (dropdownVisibility[3] ? '-left-[50px] ' : '') }
122
+
123
+ >
124
+ {renderDropdown(
125
+ primaryCard,
126
+ secondaryCardArr,
127
+ tertiaryCard
128
+ )}
431
129
  </motion.div>
432
130
  </div>
433
-
434
131
  )}
435
132
  </motion.div>
436
133
  </div>
437
134
  )}
438
135
  </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>
136
+ );
137
+ };
526
138
 
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
139
 
140
+ const headerListfunction = (headerList) => (
141
+ <>
142
+ {renderDropdownContainer(headerList, 0)}
143
+ {renderDropdownContainer(headerList, 1)}
144
+ {renderDropdownContainer(headerList, 3)}
543
145
  </>
544
146
  );
545
147
 
546
- const mobileNav = (Header_LIST) => (
148
+
149
+ //testing
150
+
151
+ const mobileNav = (HEADER_LIST) => (
547
152
  <div className='pt-4 '>
548
153
  <div className='transform transition-all'>
549
154
  {isProduct && (
550
155
  <motion.div
551
156
  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>
157
+
158
+ <V3Dropdown
159
+ primaryCard={HEADER_LIST[0]['primaryCard']}
160
+ secondaryCardArr={HEADER_LIST[0]['secondaryCardArr']}
161
+ tertiaryCard={HEADER_LIST[0]['tertiaryCard']}
162
+ />
163
+
634
164
  </motion.div>)}
635
165
  {isDeveloper && (
636
166
  <div className='product_developer'>
637
167
  <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
- ]}
168
+ primaryCard={HEADER_LIST[1]['primaryCard']}
169
+ secondaryCardArr={HEADER_LIST[1]['secondaryCardArr']}
170
+ tertiaryCard={HEADER_LIST[1]['tertiaryCard']}
793
171
  />
794
172
  </div>)
795
173
  }
796
174
  {isCompany && (<div className='product_company'>
797
175
  <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
- ]}
176
+ primaryCard={HEADER_LIST[1]['primaryCard']}
177
+ secondaryCardArr={HEADER_LIST[1]['secondaryCardArr']}
178
+ tertiaryCard={HEADER_LIST[1]['tertiaryCard']}
864
179
  />
865
180
  </div>)}
866
181
  </div>
867
182
  </div>
868
183
  )
869
184
 
185
+
870
186
  let class1;
871
187
  let class2;
872
188
  let class3;
@@ -887,20 +203,30 @@ export default function V3Header(props) {
887
203
  setIsCompany(false);
888
204
  setIsProduct(false);
889
205
  setCurrentTab('')
206
+ props.HEADER_LIST.forEach((item, index) => {
207
+ // Access the values of each item and the index
208
+ handleDropdownLeave(index)
209
+ });
890
210
  }
891
- function handleBackClick(sda) {
892
- console.log('clicked', sda);
211
+ function handleBackClick() {
893
212
  setIsDeveloper(false);
894
213
  setIsCompany(false);
895
214
  setIsProduct(false);
896
215
  setCurrentTab('');
216
+ props.HEADER_LIST.forEach((item, index) => {
217
+ // Access the values of each item and the index
218
+ handleDropdownLeave(index)
219
+ });
220
+
897
221
  }
898
222
 
899
223
 
900
224
  function handleMbDropdownClick(title) {
901
-
225
+ const i = props.HEADER_LIST.findIndex(item => item.title === title);
226
+ handleDropdownEnter(i);
902
227
  // Implement your logic to open the additional options for the clicked dropdown
903
228
  if (title === 'Developer') {
229
+
904
230
  setIsDeveloper(true);
905
231
  }
906
232
  if (title === 'Product') {
@@ -936,12 +262,14 @@ export default function V3Header(props) {
936
262
  <div className={'h-full ' + ((mobileNavOpen) ? " hds-hidden" : "")}>
937
263
  <AlgoliaSearch {...props} />
938
264
  </div>
939
- <div onClick={() => handleMbDropdownClose()}>
940
- <div className=' h-5 mt-3 cursor-pointer' >
265
+ {!(isCompany || isDeveloper || isProduct) &&
266
+ (<div className='h-5 w-5 mt-3' onClick={() => handleMbDropdownClose()}>
267
+ <div className=' h-5 cursor-pointer' >
941
268
  <div aria-hidden="true" className={`${class1} block absolute h-[2px] w-[15px] bg-neutral-800 transform transition duration-500 ease-in-out`}></div>
942
269
  <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
270
  </div>
944
- </div>
271
+
272
+ </div>)}
945
273
  </div>
946
274
  </div>
947
275
  <div className='hds-hidden tb-l:flex flex-row w-full justify-between items-center'>
@@ -951,24 +279,8 @@ export default function V3Header(props) {
951
279
  onMouseLeave={() => setIsArrowActive(false)}
952
280
 
953
281
  >
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
-
282
+ {headerListfunction(props.HEADER_LIST)}
283
+
972
284
  </nav>
973
285
 
974
286
  <div className='hds-hidden tb-l:flex flex-row items-center gap-x-4 '>
@@ -1018,25 +330,40 @@ export default function V3Header(props) {
1018
330
  <span className="sr-only">Open menu</span> */}
1019
331
 
1020
332
 
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]")}>
333
+ <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
334
 
1023
- <div className="bg-neutral-100 h-[calc(100%-80px)] rounded-2xl overflow-scroll ">
335
+ <div className="bg-neutral-100 h-[calc(100%-80px)] rounded-2xl overflow-y-scroll scrollbar-hide">
1024
336
 
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
337
+ <div className='pt-6 pb-4 tb:mr-[16px] mr-[34px] min-h-[36px] flex flex-row justify-between items-center sticky top-0 bg-neutral-100 z-50 '>
338
+ {(isCompany || isDeveloper || isProduct) &&
339
+ (
340
+ <div
1027
341
  className=' flex flex-row justify-start z-10'
1028
342
  onClick={() => handleBackClick()}
1029
343
 
1030
344
  >
1031
345
  <Icon height='w-5 h-5 ml-4 cursor-pointer' variant={'arrowleft'} strokeClass='stroke-neutral-1000' />
1032
- </div>}
346
+ </div>
347
+ )}
1033
348
  <motion.div
1034
349
  initial={{ opacity: 0 }}
1035
350
  animate={{ opacity: 1 }}
1036
351
  transition={{ duration: 0.4, opacity: { ease: "easeIn" } }}
1037
- className='w-full justify-center -ml-9 flex '>
352
+ className='w-full justify-center flex '>
1038
353
  <Typography textStyle='body3c-medium' className='text-neutral-900'>{currentTab}</Typography>
1039
354
  </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>)}
1040
367
 
1041
368
  </div>
1042
369
  <AnimatePresence mode='wait' exit={false} >
@@ -1051,7 +378,7 @@ export default function V3Header(props) {
1051
378
  className="flex flex-col justify-between "
1052
379
  >
1053
380
  <div className="flex flex-col justify-between rounded-2xl h-full">
1054
- <div className="pl-4 pr-[34px]">
381
+ <div className="pl-4 pr-8 tb:pr-4">
1055
382
  {mobileNav(props.HEADER_LIST)}
1056
383
  </div>
1057
384
  </div>
@@ -1070,7 +397,7 @@ export default function V3Header(props) {
1070
397
  alt=""
1071
398
  />
1072
399
  </div>
1073
- <nav className="grid divide-y mr-8 bg-neutral-0 divide-neutral-200 border border-neutral-200 rounded-3xl mb-6">
400
+ <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
401
  {props.HEADER_LIST.map((item) => (
1075
402
  <div
1076
403
  key={item['title']}
@@ -1107,6 +434,7 @@ export default function V3Header(props) {
1107
434
  rightAnimatedArrow='true'
1108
435
  rightAnimatedArrowColor='#3970FD'
1109
436
  animatedHoverStroke='group-hover:stroke-neutral-0'
437
+ className=' !w-full'
1110
438
  />
1111
439
  </a>
1112
440
  <a href='https://cloud.hasura.io/signup?pg=home&plcmt=header&cta=try-hasura&tech=default' className='w-1/2'>
@@ -1120,6 +448,7 @@ export default function V3Header(props) {
1120
448
  rightAnimatedArrow='true'
1121
449
  rightAnimatedArrowColor='#ffffff'
1122
450
  animatedHoverStroke='group-hover:stroke-neutral-0'
451
+ className=' !w-full'
1123
452
  />
1124
453
  </a>
1125
454
  </div>
@@ -1130,99 +459,6 @@ export default function V3Header(props) {
1130
459
 
1131
460
  </div>
1132
461
  </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
462
  </div>
1227
463
  )
1228
464
  }
@@ -1231,62 +467,243 @@ V3Header.defaultProps = {
1231
467
  HEADER_LIST: [
1232
468
  {
1233
469
  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
- },
470
+ primaryCard: {
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: [
1247
554
  {
1248
- name: 's',
1249
- description: 'Your customers’ data will be safe and secure.',
1250
- href: '#',
1251
- icon: 'home03'
555
+ childArray: [
556
+ {
557
+ description: '',
558
+ href: '#',
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'
1252
600
  },
1253
601
  {
1254
- name: 'Securidty',
1255
- description: 'Your customers’ data will be safe and secure.',
1256
- href: '#',
1257
- icon: 'home03'
602
+
603
+ childArray: [
604
+ {
605
+ description: '',
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
+
1258
642
  },
1259
643
  {
1260
- name: 'Secudristy',
1261
- description: 'Your customers’ data will be safe and secure.',
1262
- href: '#',
1263
- icon: 'home03'
644
+
645
+ childArray: [
646
+ {
647
+ description: '',
648
+ href: '#',
649
+ icon: 'users01',
650
+ name: 'Community',
651
+ strokeClass: 'stroke-blue-500'
652
+ },
653
+ {
654
+ description: '',
655
+ href: '#',
656
+ icon: 'cube01',
657
+ name: 'Discord',
658
+ strokeClass: 'stroke-blue-500'
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
+
1264
684
  },
1265
685
  ],
1266
- },
1267
- {
1268
686
 
1269
- title: 'Developer',
1270
- titleDropdown: [
687
+ tertiaryCard: [
1271
688
  {
1272
- name: 'Analytics',
1273
- description: 'Get a better understanding of where your traffic is coming from.',
1274
- href: '#',
1275
- icon: 'home03',
689
+ title: 'HasuraCon 2023 is here!',
690
+
691
+ title_colorClass: 'text-neutral-900',
692
+ img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/hascon_211daeb83a.png'
1276
693
  },
1277
694
  {
1278
- name: 'Engagement',
1279
- description: 'Speak directly to your customers in a more meaningful way.',
1280
- href: '#',
1281
- icon: 'home03',
695
+ title: 'Top 6 Architecture Trends for API Development',
696
+
697
+ title_colorClass: 'text-neutral-900',
698
+ img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/api_trends_0a035678d8.png'
1282
699
  },
1283
700
  {
1284
- name: 'Security',
1285
- description: 'Your customers’ data will be safe and secure.',
1286
- href: '#',
1287
- icon: 'home03'
701
+ title: 'Announcing Hasura integration with Snowflake',
702
+
703
+ title_colorClass: 'text-neutral-900',
704
+ img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/snowflake_def20494db.png'
1288
705
  },
1289
- ],
706
+ ]
1290
707
  },
1291
708
  {
1292
709
 
@@ -1298,26 +715,71 @@ V3Header.defaultProps = {
1298
715
  {
1299
716
 
1300
717
  title: 'Company',
1301
- titleDropdown: [
718
+ secondaryCardArr: [
1302
719
  {
1303
- name: 'Analytics',
1304
- description: 'Get a better understanding of where your traffic is coming from.',
1305
- href: '#',
1306
- icon: 'home03',
720
+ childArray: [
721
+ {
722
+ description: '',
723
+ href: '#',
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'
1307
769
  },
1308
770
  {
1309
- name: 'Engagement',
1310
- description: 'Speak directly to your customers in a more meaningful way.',
1311
- href: '#',
1312
- icon: 'home03',
771
+ title: 'Top 6 Architecture Trends for API Development',
772
+
773
+ title_colorClass: 'text-neutral-900',
774
+ img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/api_trends_0a035678d8.png'
1313
775
  },
1314
776
  {
1315
- name: 'Security',
1316
- description: 'Your customers’ data will be safe and secure.',
1317
- href: '#',
1318
- icon: 'home03'
777
+ title: 'Announcing Hasura integration with Snowflake',
778
+
779
+ title_colorClass: 'text-neutral-900',
780
+ img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/snowflake_def20494db.png'
1319
781
  },
1320
- ],
782
+ ]
1321
783
  },
1322
784
  {
1323
785
 
@@ -1325,30 +787,6 @@ V3Header.defaultProps = {
1325
787
  href: ''
1326
788
 
1327
789
  },
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
790
 
1353
791
 
1354
792
  ],