hds-web 1.17.2 → 1.17.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +2 -2
- package/dist/index.es.css +2 -2
- package/dist/index.es.js +5 -5
- package/dist/index.js +5 -5
- package/package.json +1 -1
- package/src/HDS/assets/icons/queries.svg +1 -1
- package/src/HDS/assets/icons/x-close.svg +1 -1
- package/src/HDS/components/Cards/Dropdown/v3Dropdown.js +2 -2
- package/src/HDS/components/Cards/Menu/flyoutA.js +4 -2
- package/src/HDS/components/Headers/v3Header.js +424 -981
- package/src/HDS/foundation/ColorPalette/color.js +3 -5
- package/src/styles/tailwind.css +37 -0
|
@@ -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
|
-
|
|
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) => (
|
|
45
68
|
<div>
|
|
46
69
|
<div>
|
|
47
|
-
<hr className=
|
|
70
|
+
<hr className="w-full h-9 border-0" />
|
|
48
71
|
</div>
|
|
49
|
-
|
|
50
|
-
<div className=" p-2 bg-neutral-150 rounded-3xl ">
|
|
72
|
+
<div className="p-2 bg-neutral-150 rounded-3xl">
|
|
51
73
|
<V3Dropdown
|
|
52
|
-
primaryCard={
|
|
53
|
-
|
|
54
|
-
|
|
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
|
-
]}
|
|
74
|
+
primaryCard={primaryCard}
|
|
75
|
+
secondaryCardArr={secondaryCardArr}
|
|
76
|
+
tertiaryCard={tertiaryCard}
|
|
130
77
|
/>
|
|
131
78
|
</div>
|
|
132
79
|
</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) => (
|
|
303
|
-
<div>
|
|
304
|
-
<div>
|
|
305
|
-
<hr className='w-full h-9 border-0 ' />
|
|
306
|
-
</div>
|
|
307
|
-
<div className=" p-2 bg-neutral-150 rounded-3xl ">
|
|
308
|
-
<V3Dropdown
|
|
309
|
-
|
|
310
|
-
secondaryCardArr={[
|
|
311
|
-
{
|
|
312
|
-
childArray: [
|
|
313
|
-
{
|
|
314
|
-
description: '',
|
|
315
|
-
href: '#',
|
|
316
|
-
icon: "pentool02",
|
|
317
|
-
name: 'Our story',
|
|
318
|
-
strokeClass: 'stroke-blue-500'
|
|
319
|
-
},
|
|
320
|
-
{
|
|
321
|
-
description: '',
|
|
322
|
-
href: '#',
|
|
323
|
-
icon: 'data',
|
|
324
|
-
name: 'Partners',
|
|
325
|
-
strokeClass: 'stroke-blue-500'
|
|
326
|
-
},
|
|
327
|
-
{
|
|
328
|
-
description: '',
|
|
329
|
-
href: '#',
|
|
330
|
-
icon: 'hearthand',
|
|
331
|
-
name: 'Work at Hasura',
|
|
332
|
-
strokeClass: 'stroke-blue-500'
|
|
333
|
-
},
|
|
334
|
-
{
|
|
335
|
-
description: '',
|
|
336
|
-
href: '#',
|
|
337
|
-
icon: 'headingsquare',
|
|
338
|
-
name: 'News room',
|
|
339
|
-
strokeClass: 'stroke-blue-500'
|
|
340
|
-
},
|
|
341
|
-
{
|
|
342
|
-
description: '',
|
|
343
|
-
href: '#',
|
|
344
|
-
icon: 'star06',
|
|
345
|
-
name: 'Brand',
|
|
346
|
-
strokeClass: 'stroke-blue-500'
|
|
347
|
-
},
|
|
348
|
-
|
|
349
|
-
],
|
|
350
|
-
label: 'Company'
|
|
351
|
-
},
|
|
352
|
-
|
|
353
|
-
]}
|
|
354
|
-
|
|
355
|
-
tertiaryCard={[
|
|
356
|
-
{
|
|
357
|
-
title: 'HasuraCon 2023 is here!',
|
|
358
|
-
|
|
359
|
-
title_colorClass: 'text-neutral-900',
|
|
360
|
-
img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/hascon_211daeb83a.png'
|
|
361
|
-
},
|
|
362
|
-
{
|
|
363
|
-
title: 'Top 6 Architecture Trends for API Development',
|
|
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',
|
|
80
|
+
);
|
|
370
81
|
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
},
|
|
374
|
-
]}
|
|
375
|
-
/>
|
|
376
|
-
</div>
|
|
377
|
-
</div>
|
|
378
|
-
)
|
|
82
|
+
const renderDropdownContainer = (headerList, id) => {
|
|
83
|
+
const { title, primaryCard, secondaryCardArr, tertiaryCard } = headerList[id];
|
|
379
84
|
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
<GithubWidget />
|
|
384
|
-
</div> */}
|
|
385
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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=
|
|
405
|
-
textStyle="body3c-medium"
|
|
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=
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
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:
|
|
429
|
-
className=
|
|
430
|
-
|
|
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
|
-
|
|
440
|
-
|
|
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
|
-
|
|
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
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
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[3]['primaryCard']}
|
|
177
|
+
secondaryCardArr={HEADER_LIST[3]['secondaryCardArr']}
|
|
178
|
+
tertiaryCard={HEADER_LIST[3]['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(
|
|
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') {
|
|
@@ -932,16 +258,23 @@ export default function V3Header(props) {
|
|
|
932
258
|
<Icon height='w-[103px] h-[33px]' variant={'hasuraPrimary'} strokeColor={''} />
|
|
933
259
|
</a>
|
|
934
260
|
</div>
|
|
935
|
-
<div className='hds-hidden-tbl flex z-[10]
|
|
261
|
+
<div className='hds-hidden-tbl flex z-[10] items-center gap-6'>
|
|
936
262
|
<div className={'h-full ' + ((mobileNavOpen) ? " hds-hidden" : "")}>
|
|
937
263
|
<AlgoliaSearch {...props} />
|
|
938
264
|
</div>
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
265
|
+
{!(isCompany || isDeveloper || isProduct) &&
|
|
266
|
+
(
|
|
267
|
+
<motion.div
|
|
268
|
+
initial={{ opacity: 0 }}
|
|
269
|
+
animate={{ opacity: 1 }}
|
|
270
|
+
transition={{ duration: 0.3, opacity: { ease: "easeIn" } }}
|
|
271
|
+
className='h-5 w-5 mt-3' onClick={() => handleMbDropdownClose()}>
|
|
272
|
+
<div className=' h-5 cursor-pointer' >
|
|
273
|
+
<div aria-hidden="true" className={`${class1} block absolute h-[2px] w-[15px] bg-neutral-800 transform transition duration-500 ease-in-out`}></div>
|
|
274
|
+
<div aria-hidden="true" className={`${class3} block absolute h-0.5 w-[15px] bg-neutral-800 transform transition duration-500 ease-in-out`}></div>
|
|
275
|
+
</div>
|
|
276
|
+
|
|
277
|
+
</motion.div>)}
|
|
945
278
|
</div>
|
|
946
279
|
</div>
|
|
947
280
|
<div className='hds-hidden tb-l:flex flex-row w-full justify-between items-center'>
|
|
@@ -951,23 +284,7 @@ export default function V3Header(props) {
|
|
|
951
284
|
onMouseLeave={() => setIsArrowActive(false)}
|
|
952
285
|
|
|
953
286
|
>
|
|
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
|
-
|
|
287
|
+
{headerListfunction(props.HEADER_LIST)}
|
|
971
288
|
|
|
972
289
|
</nav>
|
|
973
290
|
|
|
@@ -1018,25 +335,40 @@ export default function V3Header(props) {
|
|
|
1018
335
|
<span className="sr-only">Open menu</span> */}
|
|
1019
336
|
|
|
1020
337
|
|
|
1021
|
-
<div className={"bg-neutral-100 hds-hidden-tbl block fixed w-full tb:max-w-[480px] tb:left-auto tb:right-
|
|
338
|
+
<div className={"bg-neutral-100 shadow-sh1 hds-hidden-tbl block fixed w-full tb:max-w-[480px] tb:left-auto tb:right-0 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
339
|
|
|
1023
|
-
<div className="bg-neutral-100 h-[calc(100%-80px)] rounded-2xl overflow-scroll ">
|
|
340
|
+
<div className="bg-neutral-100 h-[calc(100%-80px)] rounded-2xl overflow-y-scroll scrollbar-hide">
|
|
1024
341
|
|
|
1025
|
-
<div className='pt-
|
|
1026
|
-
{(isCompany || isDeveloper || isProduct) &&
|
|
1027
|
-
|
|
1028
|
-
|
|
342
|
+
<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 '>
|
|
343
|
+
{(isCompany || isDeveloper || isProduct) &&
|
|
344
|
+
(
|
|
345
|
+
<div
|
|
346
|
+
className=' flex flex-row justify-start z-10'
|
|
347
|
+
onClick={() => handleBackClick()}
|
|
1029
348
|
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
349
|
+
>
|
|
350
|
+
<Icon height='w-5 h-5 ml-4 cursor-pointer' variant={'arrowleft'} strokeClass='stroke-neutral-1000' />
|
|
351
|
+
</div>
|
|
352
|
+
)}
|
|
1033
353
|
<motion.div
|
|
1034
354
|
initial={{ opacity: 0 }}
|
|
1035
355
|
animate={{ opacity: 1 }}
|
|
1036
356
|
transition={{ duration: 0.4, opacity: { ease: "easeIn" } }}
|
|
1037
|
-
className='w-full justify-center
|
|
357
|
+
className='w-full justify-center flex '>
|
|
1038
358
|
<Typography textStyle='body3c-medium' className='text-neutral-900'>{currentTab}</Typography>
|
|
1039
359
|
</motion.div>
|
|
360
|
+
{(isCompany || isDeveloper || isProduct) &&
|
|
361
|
+
(
|
|
362
|
+
<motion.div
|
|
363
|
+
initial={{ opacity: 0 }}
|
|
364
|
+
animate={{ opacity: 1 }}
|
|
365
|
+
transition={{ duration: 0.4, opacity: { ease: "easeIn" } }}
|
|
366
|
+
className=' flex flex-row justify-start z-10'
|
|
367
|
+
onClick={() => handleMbDropdownClose()}
|
|
368
|
+
|
|
369
|
+
>
|
|
370
|
+
<Icon height='w-5 h-5 ml-4 stroke-2 cursor-pointer' variant={'xclose'} strokeClass='stroke-neutral-1000' />
|
|
371
|
+
</motion.div>)}
|
|
1040
372
|
|
|
1041
373
|
</div>
|
|
1042
374
|
<AnimatePresence mode='wait' exit={false} >
|
|
@@ -1051,7 +383,7 @@ export default function V3Header(props) {
|
|
|
1051
383
|
className="flex flex-col justify-between "
|
|
1052
384
|
>
|
|
1053
385
|
<div className="flex flex-col justify-between rounded-2xl h-full">
|
|
1054
|
-
<div className="pl-4 pr-
|
|
386
|
+
<div className="pl-4 pr-8 tb:pr-4">
|
|
1055
387
|
{mobileNav(props.HEADER_LIST)}
|
|
1056
388
|
</div>
|
|
1057
389
|
</div>
|
|
@@ -1070,7 +402,7 @@ export default function V3Header(props) {
|
|
|
1070
402
|
alt=""
|
|
1071
403
|
/>
|
|
1072
404
|
</div>
|
|
1073
|
-
<nav className="grid divide-y mr-8 bg-neutral-0 divide-neutral-200 border border-neutral-200 rounded-3xl mb-6">
|
|
405
|
+
<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
406
|
{props.HEADER_LIST.map((item) => (
|
|
1075
407
|
<div
|
|
1076
408
|
key={item['title']}
|
|
@@ -1107,6 +439,7 @@ export default function V3Header(props) {
|
|
|
1107
439
|
rightAnimatedArrow='true'
|
|
1108
440
|
rightAnimatedArrowColor='#3970FD'
|
|
1109
441
|
animatedHoverStroke='group-hover:stroke-neutral-0'
|
|
442
|
+
className=' !w-full'
|
|
1110
443
|
/>
|
|
1111
444
|
</a>
|
|
1112
445
|
<a href='https://cloud.hasura.io/signup?pg=home&plcmt=header&cta=try-hasura&tech=default' className='w-1/2'>
|
|
@@ -1120,6 +453,7 @@ export default function V3Header(props) {
|
|
|
1120
453
|
rightAnimatedArrow='true'
|
|
1121
454
|
rightAnimatedArrowColor='#ffffff'
|
|
1122
455
|
animatedHoverStroke='group-hover:stroke-neutral-0'
|
|
456
|
+
className=' !w-full'
|
|
1123
457
|
/>
|
|
1124
458
|
</a>
|
|
1125
459
|
</div>
|
|
@@ -1130,99 +464,6 @@ export default function V3Header(props) {
|
|
|
1130
464
|
|
|
1131
465
|
</div>
|
|
1132
466
|
</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
467
|
</div>
|
|
1227
468
|
)
|
|
1228
469
|
}
|
|
@@ -1231,62 +472,243 @@ V3Header.defaultProps = {
|
|
|
1231
472
|
HEADER_LIST: [
|
|
1232
473
|
{
|
|
1233
474
|
title: 'Product',
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
475
|
+
primaryCard: {
|
|
476
|
+
iconVariant: 'hasura',
|
|
477
|
+
mainDescription: 'Choose from our open source community edition, fully managed cloud edition or custom enterprise',
|
|
478
|
+
primaryBtnLabel: 'Hasura Product',
|
|
479
|
+
strokeClass: 'stroke-neutral-800',
|
|
480
|
+
secondaryBtn: [
|
|
481
|
+
{ cta_leftVariantIcon: 'home03', cta_leftVariantIconColor: '#6C737F', cta_text: 'Compare plans' }
|
|
482
|
+
],
|
|
483
|
+
},
|
|
484
|
+
secondaryCardArr:
|
|
485
|
+
[
|
|
486
|
+
{
|
|
487
|
+
split: true,
|
|
488
|
+
childArray: [
|
|
489
|
+
{
|
|
490
|
+
description: '',
|
|
491
|
+
href: '#',
|
|
492
|
+
icon: "lightning01",
|
|
493
|
+
name: 'Instant API',
|
|
494
|
+
strokeClass: 'stroke-blue-500'
|
|
495
|
+
},
|
|
496
|
+
{
|
|
497
|
+
description: '',
|
|
498
|
+
href: '#',
|
|
499
|
+
icon: 'data',
|
|
500
|
+
name: 'Federation',
|
|
501
|
+
strokeClass: 'stroke-blue-500'
|
|
502
|
+
},
|
|
503
|
+
{
|
|
504
|
+
description: '',
|
|
505
|
+
href: '#',
|
|
506
|
+
icon: 'eye',
|
|
507
|
+
name: 'Authorization',
|
|
508
|
+
strokeClass: 'stroke-blue-500'
|
|
509
|
+
},
|
|
510
|
+
{
|
|
511
|
+
description: '',
|
|
512
|
+
href: '#',
|
|
513
|
+
icon: 'shieldtick',
|
|
514
|
+
name: 'API Security',
|
|
515
|
+
strokeClass: 'stroke-blue-500'
|
|
516
|
+
},
|
|
517
|
+
{
|
|
518
|
+
description: '',
|
|
519
|
+
href: '#',
|
|
520
|
+
icon: 'speedometer03',
|
|
521
|
+
name: 'Performance',
|
|
522
|
+
strokeClass: 'stroke-blue-500'
|
|
523
|
+
},
|
|
524
|
+
{
|
|
525
|
+
description: '',
|
|
526
|
+
href: '#',
|
|
527
|
+
icon: "barchartsquare01",
|
|
528
|
+
name: 'Observability',
|
|
529
|
+
strokeClass: 'stroke-blue-500'
|
|
530
|
+
}
|
|
531
|
+
],
|
|
532
|
+
label: 'CAPABILITIES'
|
|
533
|
+
},
|
|
534
|
+
{
|
|
535
|
+
childArray: [
|
|
536
|
+
{
|
|
537
|
+
description: '',
|
|
538
|
+
href: '#',
|
|
539
|
+
icon: 'database01',
|
|
540
|
+
name: 'All DBs',
|
|
541
|
+
strokeClass: 'stroke-blue-500'
|
|
542
|
+
},
|
|
543
|
+
{
|
|
544
|
+
description: '',
|
|
545
|
+
href: '#',
|
|
546
|
+
icon: 'checksquare',
|
|
547
|
+
name: 'Planned DBs',
|
|
548
|
+
strokeClass: 'stroke-blue-500'
|
|
549
|
+
},
|
|
550
|
+
],
|
|
551
|
+
label: 'Integrations'
|
|
552
|
+
}
|
|
553
|
+
]
|
|
554
|
+
},
|
|
555
|
+
{
|
|
556
|
+
|
|
557
|
+
title: 'Developer',
|
|
558
|
+
secondaryCardArr: [
|
|
1247
559
|
{
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
560
|
+
childArray: [
|
|
561
|
+
{
|
|
562
|
+
description: '',
|
|
563
|
+
href: '#',
|
|
564
|
+
icon: "file02",
|
|
565
|
+
name: 'Documentation',
|
|
566
|
+
strokeClass: 'stroke-blue-500'
|
|
567
|
+
},
|
|
568
|
+
{
|
|
569
|
+
description: '',
|
|
570
|
+
href: '#',
|
|
571
|
+
icon: 'hasura',
|
|
572
|
+
name: 'Hasura hub',
|
|
573
|
+
strokeClass: 'stroke-blue-500'
|
|
574
|
+
},
|
|
575
|
+
{
|
|
576
|
+
description: '',
|
|
577
|
+
href: '#',
|
|
578
|
+
icon: 'route',
|
|
579
|
+
name: 'Guides',
|
|
580
|
+
strokeClass: 'stroke-blue-500'
|
|
581
|
+
},
|
|
582
|
+
{
|
|
583
|
+
description: '',
|
|
584
|
+
href: '#',
|
|
585
|
+
icon: 'asterisk02',
|
|
586
|
+
name: 'GraphQL hub',
|
|
587
|
+
strokeClass: 'stroke-blue-500'
|
|
588
|
+
},
|
|
589
|
+
{
|
|
590
|
+
description: '',
|
|
591
|
+
href: '#',
|
|
592
|
+
icon: "codebrowser",
|
|
593
|
+
name: 'GraphQL',
|
|
594
|
+
strokeClass: 'stroke-blue-500'
|
|
595
|
+
},
|
|
596
|
+
{
|
|
597
|
+
description: '',
|
|
598
|
+
href: '#',
|
|
599
|
+
icon: 'gitpullrequest',
|
|
600
|
+
name: 'Changelog',
|
|
601
|
+
strokeClass: 'stroke-blue-500'
|
|
602
|
+
}
|
|
603
|
+
],
|
|
604
|
+
label: 'BUILD'
|
|
1252
605
|
},
|
|
1253
606
|
{
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
607
|
+
|
|
608
|
+
childArray: [
|
|
609
|
+
{
|
|
610
|
+
description: '',
|
|
611
|
+
href: '#',
|
|
612
|
+
icon: 'bookopen01',
|
|
613
|
+
name: 'Blog',
|
|
614
|
+
strokeClass: 'stroke-blue-500'
|
|
615
|
+
},
|
|
616
|
+
{
|
|
617
|
+
description: '',
|
|
618
|
+
href: '#',
|
|
619
|
+
icon: 'videorecorder',
|
|
620
|
+
name: 'Tech talks',
|
|
621
|
+
strokeClass: 'stroke-blue-500'
|
|
622
|
+
},
|
|
623
|
+
{
|
|
624
|
+
description: '',
|
|
625
|
+
href: '#',
|
|
626
|
+
icon: 'graduationhat02',
|
|
627
|
+
name: 'Tutorials',
|
|
628
|
+
strokeClass: 'stroke-blue-500'
|
|
629
|
+
},
|
|
630
|
+
{
|
|
631
|
+
description: '',
|
|
632
|
+
href: '#',
|
|
633
|
+
icon: 'calendarplus02',
|
|
634
|
+
name: 'Events',
|
|
635
|
+
strokeClass: 'stroke-blue-500'
|
|
636
|
+
},
|
|
637
|
+
{
|
|
638
|
+
description: '',
|
|
639
|
+
href: '#',
|
|
640
|
+
icon: 'box',
|
|
641
|
+
name: 'Resources',
|
|
642
|
+
strokeClass: 'stroke-blue-500'
|
|
643
|
+
},
|
|
644
|
+
],
|
|
645
|
+
label: 'Learn',
|
|
646
|
+
|
|
1258
647
|
},
|
|
1259
648
|
{
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
649
|
+
|
|
650
|
+
childArray: [
|
|
651
|
+
{
|
|
652
|
+
description: '',
|
|
653
|
+
href: '#',
|
|
654
|
+
icon: 'users01',
|
|
655
|
+
name: 'Community',
|
|
656
|
+
strokeClass: 'stroke-blue-500'
|
|
657
|
+
},
|
|
658
|
+
{
|
|
659
|
+
description: '',
|
|
660
|
+
href: '#',
|
|
661
|
+
icon: 'cube01',
|
|
662
|
+
name: 'Discord',
|
|
663
|
+
strokeClass: 'stroke-blue-500'
|
|
664
|
+
},
|
|
665
|
+
{
|
|
666
|
+
description: '',
|
|
667
|
+
href: '#',
|
|
668
|
+
icon: 'cube01',
|
|
669
|
+
name: 'Forum',
|
|
670
|
+
strokeClass: 'stroke-blue-500'
|
|
671
|
+
},
|
|
672
|
+
{
|
|
673
|
+
description: '',
|
|
674
|
+
href: '#',
|
|
675
|
+
icon: 'cube01',
|
|
676
|
+
name: 'Meetups',
|
|
677
|
+
strokeClass: 'stroke-blue-500'
|
|
678
|
+
},
|
|
679
|
+
{
|
|
680
|
+
description: '',
|
|
681
|
+
href: '#',
|
|
682
|
+
icon: 'hand',
|
|
683
|
+
name: 'Support',
|
|
684
|
+
strokeClass: 'stroke-blue-500'
|
|
685
|
+
},
|
|
686
|
+
],
|
|
687
|
+
label: 'Connect',
|
|
688
|
+
|
|
1264
689
|
},
|
|
1265
690
|
],
|
|
1266
|
-
},
|
|
1267
|
-
{
|
|
1268
691
|
|
|
1269
|
-
|
|
1270
|
-
titleDropdown: [
|
|
692
|
+
tertiaryCard: [
|
|
1271
693
|
{
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
694
|
+
title: 'HasuraCon 2023 is here!',
|
|
695
|
+
|
|
696
|
+
title_colorClass: 'text-neutral-900',
|
|
697
|
+
img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/hascon_211daeb83a.png'
|
|
1276
698
|
},
|
|
1277
699
|
{
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
|
|
700
|
+
title: 'Top 6 Architecture Trends for API Development',
|
|
701
|
+
|
|
702
|
+
title_colorClass: 'text-neutral-900',
|
|
703
|
+
img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/api_trends_0a035678d8.png'
|
|
1282
704
|
},
|
|
1283
705
|
{
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
706
|
+
title: 'Announcing Hasura integration with Snowflake',
|
|
707
|
+
|
|
708
|
+
title_colorClass: 'text-neutral-900',
|
|
709
|
+
img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/snowflake_def20494db.png'
|
|
1288
710
|
},
|
|
1289
|
-
]
|
|
711
|
+
]
|
|
1290
712
|
},
|
|
1291
713
|
{
|
|
1292
714
|
|
|
@@ -1298,26 +720,71 @@ V3Header.defaultProps = {
|
|
|
1298
720
|
{
|
|
1299
721
|
|
|
1300
722
|
title: 'Company',
|
|
1301
|
-
|
|
723
|
+
secondaryCardArr: [
|
|
1302
724
|
{
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
725
|
+
childArray: [
|
|
726
|
+
{
|
|
727
|
+
description: '',
|
|
728
|
+
href: '#',
|
|
729
|
+
icon: "pentool02",
|
|
730
|
+
name: 'Our story',
|
|
731
|
+
strokeClass: 'stroke-blue-500'
|
|
732
|
+
},
|
|
733
|
+
{
|
|
734
|
+
description: '',
|
|
735
|
+
href: '#',
|
|
736
|
+
icon: 'data',
|
|
737
|
+
name: 'Partners',
|
|
738
|
+
strokeClass: 'stroke-blue-500'
|
|
739
|
+
},
|
|
740
|
+
{
|
|
741
|
+
description: '',
|
|
742
|
+
href: '#',
|
|
743
|
+
icon: 'hearthand',
|
|
744
|
+
name: 'Work at Hasura',
|
|
745
|
+
strokeClass: 'stroke-blue-500'
|
|
746
|
+
},
|
|
747
|
+
{
|
|
748
|
+
description: '',
|
|
749
|
+
href: '#',
|
|
750
|
+
icon: 'headingsquare',
|
|
751
|
+
name: 'News room',
|
|
752
|
+
strokeClass: 'stroke-blue-500'
|
|
753
|
+
},
|
|
754
|
+
{
|
|
755
|
+
description: '',
|
|
756
|
+
href: '#',
|
|
757
|
+
icon: 'star06',
|
|
758
|
+
name: 'Brand',
|
|
759
|
+
strokeClass: 'stroke-blue-500'
|
|
760
|
+
},
|
|
761
|
+
|
|
762
|
+
],
|
|
763
|
+
label: 'Company'
|
|
764
|
+
},
|
|
765
|
+
|
|
766
|
+
],
|
|
767
|
+
|
|
768
|
+
tertiaryCard: [
|
|
769
|
+
{
|
|
770
|
+
title: 'HasuraCon 2023 is here!',
|
|
771
|
+
|
|
772
|
+
title_colorClass: 'text-neutral-900',
|
|
773
|
+
img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/hascon_211daeb83a.png'
|
|
1307
774
|
},
|
|
1308
775
|
{
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
776
|
+
title: 'Top 6 Architecture Trends for API Development',
|
|
777
|
+
|
|
778
|
+
title_colorClass: 'text-neutral-900',
|
|
779
|
+
img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/api_trends_0a035678d8.png'
|
|
1313
780
|
},
|
|
1314
781
|
{
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
782
|
+
title: 'Announcing Hasura integration with Snowflake',
|
|
783
|
+
|
|
784
|
+
title_colorClass: 'text-neutral-900',
|
|
785
|
+
img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/snowflake_def20494db.png'
|
|
1319
786
|
},
|
|
1320
|
-
]
|
|
787
|
+
]
|
|
1321
788
|
},
|
|
1322
789
|
{
|
|
1323
790
|
|
|
@@ -1325,30 +792,6 @@ V3Header.defaultProps = {
|
|
|
1325
792
|
href: ''
|
|
1326
793
|
|
|
1327
794
|
},
|
|
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
795
|
|
|
1353
796
|
|
|
1354
797
|
],
|