hds-web 1.38.7 → 1.38.9
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 +1 -1
- package/dist/index.js +5 -5
- package/package.json +1 -1
- package/src/HDS/components/Cards/Dropdown/v3Dropdown.js +8 -0
- package/src/HDS/components/Cards/Menu/ResourcesDropdown.js +106 -0
- package/src/HDS/components/Footers/v3Footer.js +30 -28
- package/src/HDS/components/Headers/v3Header.js +79 -89
- package/src/styles/tailwind.css +58 -0
package/package.json
CHANGED
|
@@ -2,6 +2,7 @@ import React from "react";
|
|
|
2
2
|
import { HDSColor } from "../../../foundation/ColorPalette";
|
|
3
3
|
import { FlyoutB, FlyoutA, FlyoutD } from "../Menu";
|
|
4
4
|
import ConnectorsDropdown from "../Menu/ConnectorsDropdown";
|
|
5
|
+
import ResourcesDropdown from "../Menu/ResourcesDropdown";
|
|
5
6
|
|
|
6
7
|
export default function DropdownA(props) {
|
|
7
8
|
return (
|
|
@@ -32,6 +33,13 @@ export default function DropdownA(props) {
|
|
|
32
33
|
// split={item.split}
|
|
33
34
|
split={true}
|
|
34
35
|
/>
|
|
36
|
+
) : item?.label === "RESOURCES" ? (
|
|
37
|
+
<ResourcesDropdown
|
|
38
|
+
label={item.label}
|
|
39
|
+
childArray={item.childArray}
|
|
40
|
+
// split={item.split}
|
|
41
|
+
split={true}
|
|
42
|
+
/>
|
|
35
43
|
) : (
|
|
36
44
|
<FlyoutA
|
|
37
45
|
label={item.label}
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Icon } from "../../common-components/Icon";
|
|
3
|
+
import { Typography } from "../../../foundation/Typography";
|
|
4
|
+
|
|
5
|
+
export default function ResourcesDropdown(props) {
|
|
6
|
+
const { split } = props;
|
|
7
|
+
|
|
8
|
+
const cardLayout = (label, childArray) => (
|
|
9
|
+
<div className=" group h-full">
|
|
10
|
+
<div className={`w-full h-full ` + (split ? " " : " rounded-2xl")}>
|
|
11
|
+
<div className={`w-full py-6 px-4`}>
|
|
12
|
+
{label ? (
|
|
13
|
+
<Typography
|
|
14
|
+
textStyle="h6"
|
|
15
|
+
className=" uppercase group-hover/split:text-neutral-1000 group-hover:text-neutral-1000 group-hover-transition text-neutral-500 mb-4"
|
|
16
|
+
>
|
|
17
|
+
{label}
|
|
18
|
+
</Typography>
|
|
19
|
+
) : (
|
|
20
|
+
<div className="mb-8"></div>
|
|
21
|
+
)}
|
|
22
|
+
<div className={` tb:tb:grid tb:tb:grid-cols-1 tb:min-w-[200px] `}>
|
|
23
|
+
{childArray &&
|
|
24
|
+
childArray.map((item) => (
|
|
25
|
+
<div
|
|
26
|
+
key={item.name}
|
|
27
|
+
className="relative pb-2 flex rounded-lg items-center"
|
|
28
|
+
>
|
|
29
|
+
<a href={item.href} className="w-full">
|
|
30
|
+
<div className="flex group/icon pl-2 py-2 pr-3 hover:pl-[9px] hover:bg-neutral-100 rounded-lg flex-row w-full justify-between items-center">
|
|
31
|
+
<div className="flex gap-2 flex-row items-center">
|
|
32
|
+
<div className="flex rounded-lg items-center group-hover:bg-white">
|
|
33
|
+
{item.icon && (
|
|
34
|
+
<Icon
|
|
35
|
+
height={
|
|
36
|
+
"h-5 w-5 stroke-2 " +
|
|
37
|
+
(item.icon === "discord" ||
|
|
38
|
+
item.icon === "octoface" ||
|
|
39
|
+
item.icon === "meetup"
|
|
40
|
+
? ""
|
|
41
|
+
: "group-hover/icon:stroke-blue-500 ")
|
|
42
|
+
}
|
|
43
|
+
variant={item.icon}
|
|
44
|
+
strokeClass={item.strokeClass}
|
|
45
|
+
/>
|
|
46
|
+
)}
|
|
47
|
+
</div>
|
|
48
|
+
<Typography
|
|
49
|
+
textStyle="body3c-medium"
|
|
50
|
+
className="text-neutral-1000 group-hover/icon:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip"
|
|
51
|
+
>
|
|
52
|
+
{item.name}
|
|
53
|
+
</Typography>
|
|
54
|
+
</div>
|
|
55
|
+
<div className="flex group-hover/icon:translate-x-1 transform transition-all duration-200 ease-in-out tb-l:-ml-1">
|
|
56
|
+
<Icon
|
|
57
|
+
height={
|
|
58
|
+
"h-4 w-4 stroke-2 invisible group-hover/icon:visible transition-all ease-in-out "
|
|
59
|
+
}
|
|
60
|
+
variant={"chevronright"}
|
|
61
|
+
strokeClass={"stroke-blue-500"}
|
|
62
|
+
/>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</a>
|
|
66
|
+
</div>
|
|
67
|
+
))}
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
);
|
|
73
|
+
|
|
74
|
+
return (
|
|
75
|
+
<>
|
|
76
|
+
{split ? (
|
|
77
|
+
<>
|
|
78
|
+
<div className="hds-hidden tb-l:flex h-full">
|
|
79
|
+
<div className="rounded-l-2xl">
|
|
80
|
+
{cardLayout(
|
|
81
|
+
props.label,
|
|
82
|
+
props.childArray.slice(
|
|
83
|
+
0,
|
|
84
|
+
Math.ceil(props.childArray.length / 2)
|
|
85
|
+
)
|
|
86
|
+
)}
|
|
87
|
+
</div>
|
|
88
|
+
<div className="group/split rounded-r-2xl tb-l:-ml-6">
|
|
89
|
+
{cardLayout(
|
|
90
|
+
null,
|
|
91
|
+
props.childArray.slice(Math.ceil(props.childArray.length / 2))
|
|
92
|
+
)}
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
<div className="hds-hidden-tbl h-full rounded-2xl">
|
|
96
|
+
{cardLayout(props.label, props.childArray)}
|
|
97
|
+
</div>
|
|
98
|
+
</>
|
|
99
|
+
) : (
|
|
100
|
+
<div className=" shadow h-full rounded-2xl">
|
|
101
|
+
{cardLayout(props.label, props.childArray)}
|
|
102
|
+
</div>
|
|
103
|
+
)}
|
|
104
|
+
</>
|
|
105
|
+
);
|
|
106
|
+
}
|
|
@@ -131,7 +131,7 @@ export default function V3Footer(props) {
|
|
|
131
131
|
/>
|
|
132
132
|
</a>
|
|
133
133
|
</div>
|
|
134
|
-
<div className="flex justify-between px-4 tb:px-0 tb:justify-start tb-l:justify-between flex-1 flex-wrap gap-y-10 tb:gap-y-16">
|
|
134
|
+
<div className="flex justify-between px-4 tb:px-0 tb:justify-start tb-l:justify-between flex-1 flex-wrap gap-y-10 tb:gap-y-16 lg:max-w-[712px] 2xl:max-w-[914px]">
|
|
135
135
|
{props.footerLinks.map((footerLink, index) => (
|
|
136
136
|
<div key={index} className="min-w-[130px] db-s:min-w-fit">
|
|
137
137
|
<Typography
|
|
@@ -141,7 +141,7 @@ export default function V3Footer(props) {
|
|
|
141
141
|
{footerLink.title}
|
|
142
142
|
</Typography>
|
|
143
143
|
{footerLink.links.map((link, subIndex) => (
|
|
144
|
-
<a href={link.linkUrl}>
|
|
144
|
+
<a href={link.linkUrl} key={subIndex}>
|
|
145
145
|
<Typography
|
|
146
146
|
textStyle="body3"
|
|
147
147
|
className={
|
|
@@ -173,29 +173,31 @@ export default function V3Footer(props) {
|
|
|
173
173
|
</a>
|
|
174
174
|
))}
|
|
175
175
|
</div>
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
<
|
|
180
|
-
<div className="
|
|
181
|
-
|
|
182
|
-
{
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
<
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
176
|
+
<div className="flex flex-col md:flex-row justify-between items-center w-full lg:max-w-[716px] 2xl:max-w-[916px]">
|
|
177
|
+
{isItems && !isError && (
|
|
178
|
+
<>
|
|
179
|
+
<a href="https://status.hasura.io/" className="">
|
|
180
|
+
<div className=" bg-neutral-0 rounded-full shadow hover:shadow-lg transition-all duration-300 px-4 py-2 inline-flex justify-center items-center md:ml-16 lg:ml-0">
|
|
181
|
+
<div className="w-4 h-4 bg-green-400 rounded-full mr-2"></div>
|
|
182
|
+
<Typography textStyle="body3" className={"text-neutral-1000"}>
|
|
183
|
+
{isItems?.status.description}
|
|
184
|
+
</Typography>
|
|
185
|
+
</div>
|
|
186
|
+
</a>
|
|
187
|
+
</>
|
|
188
|
+
)}
|
|
189
|
+
<div>
|
|
190
|
+
<Typography
|
|
191
|
+
textStyle="body3c"
|
|
192
|
+
className={
|
|
193
|
+
isDarkMode
|
|
194
|
+
? "text-neutral-400 pt-4 tb-m:pt-0"
|
|
195
|
+
: "text-neutral-600 pt-4 tb-m:pt-0"
|
|
196
|
+
}
|
|
197
|
+
>
|
|
198
|
+
© {new Date().getFullYear()} Hasura Inc. All rights reserved
|
|
199
|
+
</Typography>
|
|
200
|
+
</div>
|
|
199
201
|
</div>
|
|
200
202
|
</div>
|
|
201
203
|
</div>
|
|
@@ -301,11 +303,11 @@ V3Footer.defaultProps = {
|
|
|
301
303
|
},
|
|
302
304
|
{
|
|
303
305
|
linkText: "Forum",
|
|
304
|
-
linkUrl: "",
|
|
306
|
+
linkUrl: "https://github.com/hasura/graphql-engine/discussions",
|
|
305
307
|
},
|
|
306
308
|
{
|
|
307
309
|
linkText: "Meetups",
|
|
308
|
-
linkUrl: "",
|
|
310
|
+
linkUrl: "https://www.meetup.com/pro/hasura/",
|
|
309
311
|
},
|
|
310
312
|
{
|
|
311
313
|
linkText: "Monthly call",
|
|
@@ -313,7 +315,7 @@ V3Footer.defaultProps = {
|
|
|
313
315
|
},
|
|
314
316
|
{
|
|
315
317
|
linkText: "Support",
|
|
316
|
-
linkUrl: "https://hasura.io/support
|
|
318
|
+
linkUrl: "https://hasura.io/support",
|
|
317
319
|
},
|
|
318
320
|
{
|
|
319
321
|
linkText: "Contact Us",
|
|
@@ -21,7 +21,7 @@ const updatePGParam = (originalLink, websiteKey) => {
|
|
|
21
21
|
};
|
|
22
22
|
|
|
23
23
|
export default function V3Header(props) {
|
|
24
|
-
const listSize = props.HEADER_LIST.length;
|
|
24
|
+
// const listSize = props.HEADER_LIST.length;
|
|
25
25
|
|
|
26
26
|
const [mobileNavOpen, setmobileNavOpen] = useState(false);
|
|
27
27
|
|
|
@@ -29,11 +29,13 @@ export default function V3Header(props) {
|
|
|
29
29
|
|
|
30
30
|
const [isDeveloper, setIsDeveloper] = useState(false);
|
|
31
31
|
|
|
32
|
+
const [isResources, setIsResources] = useState(false);
|
|
33
|
+
|
|
32
34
|
const [isCompany, setIsCompany] = useState(false);
|
|
33
35
|
|
|
34
36
|
const [currentTab, setCurrentTab] = useState("");
|
|
35
37
|
|
|
36
|
-
const [isShown, setIsShown] = useState(false);
|
|
38
|
+
// const [isShown, setIsShown] = useState(false);
|
|
37
39
|
|
|
38
40
|
const [isArrowActive, setIsArrowActive] = useState(false);
|
|
39
41
|
|
|
@@ -172,6 +174,7 @@ export default function V3Header(props) {
|
|
|
172
174
|
<>
|
|
173
175
|
{renderDropdownContainer(headerList, 0)}
|
|
174
176
|
{renderDropdownContainer(headerList, 1)}
|
|
177
|
+
{renderDropdownContainer(headerList, 2)}
|
|
175
178
|
{
|
|
176
179
|
<a href="/customers">
|
|
177
180
|
<Typography
|
|
@@ -186,7 +189,6 @@ export default function V3Header(props) {
|
|
|
186
189
|
</Typography>
|
|
187
190
|
</a>
|
|
188
191
|
}
|
|
189
|
-
{/* {renderDropdownContainer(headerList, 3)} */}
|
|
190
192
|
{
|
|
191
193
|
<a href="/pricing">
|
|
192
194
|
<Typography
|
|
@@ -229,7 +231,17 @@ export default function V3Header(props) {
|
|
|
229
231
|
/>
|
|
230
232
|
</div>
|
|
231
233
|
)}
|
|
232
|
-
{
|
|
234
|
+
{isResources && (
|
|
235
|
+
<div className="product_resources">
|
|
236
|
+
<V3Dropdown
|
|
237
|
+
primaryCard={HEADER_LIST[2]["primaryCard"]}
|
|
238
|
+
secondaryCardArr={HEADER_LIST[2]["secondaryCardArr"]}
|
|
239
|
+
tertiaryCard={HEADER_LIST[2]["tertiaryCard"]}
|
|
240
|
+
flyoutD={HEADER_LIST[2]["flyoutD"]}
|
|
241
|
+
/>
|
|
242
|
+
</div>
|
|
243
|
+
)}
|
|
244
|
+
{/* {isCompany && (
|
|
233
245
|
<div className="product_company">
|
|
234
246
|
<V3Dropdown
|
|
235
247
|
primaryCard={HEADER_LIST[3]["primaryCard"]}
|
|
@@ -237,7 +249,7 @@ export default function V3Header(props) {
|
|
|
237
249
|
tertiaryCard={HEADER_LIST[3]["tertiaryCard"]}
|
|
238
250
|
/>
|
|
239
251
|
</div>
|
|
240
|
-
)}
|
|
252
|
+
)} */}
|
|
241
253
|
</div>
|
|
242
254
|
</div>
|
|
243
255
|
);
|
|
@@ -259,6 +271,7 @@ export default function V3Header(props) {
|
|
|
259
271
|
function handleMbDropdownClose() {
|
|
260
272
|
setmobileNavOpen(!mobileNavOpen);
|
|
261
273
|
setIsDeveloper(false);
|
|
274
|
+
setIsResources(false);
|
|
262
275
|
setIsCompany(false);
|
|
263
276
|
setIsProduct(false);
|
|
264
277
|
setCurrentTab("");
|
|
@@ -269,6 +282,7 @@ export default function V3Header(props) {
|
|
|
269
282
|
}
|
|
270
283
|
function handleBackClick() {
|
|
271
284
|
setIsDeveloper(false);
|
|
285
|
+
setIsResources(false);
|
|
272
286
|
setIsCompany(false);
|
|
273
287
|
setIsProduct(false);
|
|
274
288
|
setCurrentTab("");
|
|
@@ -285,6 +299,9 @@ export default function V3Header(props) {
|
|
|
285
299
|
if (title === "Developer") {
|
|
286
300
|
setIsDeveloper(true);
|
|
287
301
|
}
|
|
302
|
+
if (title === "Resources") {
|
|
303
|
+
setIsResources(true);
|
|
304
|
+
}
|
|
288
305
|
if (title === "Customers") {
|
|
289
306
|
window.location.href = "/customers";
|
|
290
307
|
}
|
|
@@ -304,10 +321,12 @@ export default function V3Header(props) {
|
|
|
304
321
|
setCurrentTab("Product");
|
|
305
322
|
} else if (isDeveloper) {
|
|
306
323
|
setCurrentTab("Developer");
|
|
324
|
+
} else if (isResources) {
|
|
325
|
+
setCurrentTab("Resources");
|
|
307
326
|
} else if (isCompany) {
|
|
308
327
|
setCurrentTab("Company");
|
|
309
328
|
}
|
|
310
|
-
}, [isProduct, isDeveloper, isCompany]);
|
|
329
|
+
}, [isProduct, isDeveloper, isCompany, isResources]);
|
|
311
330
|
|
|
312
331
|
// **************************** //
|
|
313
332
|
|
|
@@ -336,7 +355,7 @@ export default function V3Header(props) {
|
|
|
336
355
|
<div className={"h-full " + (mobileNavOpen ? " hds-hidden" : "")}>
|
|
337
356
|
{!props.hideSearch && <AlgoliaSearch {...props} />}
|
|
338
357
|
</div>
|
|
339
|
-
{!(isCompany || isDeveloper || isProduct) && (
|
|
358
|
+
{!(isCompany || isDeveloper || isProduct || isResources) && (
|
|
340
359
|
<motion.div
|
|
341
360
|
initial={{ opacity: 0 }}
|
|
342
361
|
animate={{ opacity: 1 }}
|
|
@@ -435,7 +454,7 @@ export default function V3Header(props) {
|
|
|
435
454
|
>
|
|
436
455
|
<div className="bg-neutral-100 h-[calc(100%-80px)] rounded-2xl overflow-y-scroll scrollbar-hide">
|
|
437
456
|
<div className="pt-6 pb-4 tb:mr-[12px] mr-[30px] min-h-[36px] flex flex-row justify-between items-center sticky top-0 bg-neutral-100 z-50 ">
|
|
438
|
-
{(isCompany || isDeveloper || isProduct) && (
|
|
457
|
+
{(isCompany || isDeveloper || isProduct || isResources) && (
|
|
439
458
|
<div
|
|
440
459
|
className=" flex flex-row justify-start z-10"
|
|
441
460
|
onClick={() => handleBackClick()}
|
|
@@ -460,7 +479,7 @@ export default function V3Header(props) {
|
|
|
460
479
|
{currentTab}
|
|
461
480
|
</Typography>
|
|
462
481
|
</motion.div>
|
|
463
|
-
{(isCompany || isDeveloper || isProduct) && (
|
|
482
|
+
{(isCompany || isDeveloper || isProduct || isResources) && (
|
|
464
483
|
<motion.div
|
|
465
484
|
initial={{ opacity: 0 }}
|
|
466
485
|
animate={{ opacity: 1 }}
|
|
@@ -477,7 +496,7 @@ export default function V3Header(props) {
|
|
|
477
496
|
)}
|
|
478
497
|
</div>
|
|
479
498
|
<AnimatePresence mode="wait" exit={false}>
|
|
480
|
-
{isProduct || isDeveloper || isCompany ? (
|
|
499
|
+
{isProduct || isDeveloper || isCompany || isResources ? (
|
|
481
500
|
<motion.div
|
|
482
501
|
key="hey"
|
|
483
502
|
exit={{ opacity: 0, y: [0, 300] }}
|
|
@@ -487,7 +506,7 @@ export default function V3Header(props) {
|
|
|
487
506
|
exit: { duration: 0.3 },
|
|
488
507
|
opacity: { ease: "easeIn" },
|
|
489
508
|
}}
|
|
490
|
-
when={isProduct || isDeveloper || isCompany}
|
|
509
|
+
when={isProduct || isDeveloper || isCompany || isResources}
|
|
491
510
|
className="flex flex-col justify-between "
|
|
492
511
|
>
|
|
493
512
|
<div className="flex flex-col justify-between rounded-2xl h-full">
|
|
@@ -730,63 +749,9 @@ V3Header.defaultProps = {
|
|
|
730
749
|
name: "Tutorials",
|
|
731
750
|
strokeClass: "stroke-neutral-500",
|
|
732
751
|
},
|
|
733
|
-
// {
|
|
734
|
-
// description: "",
|
|
735
|
-
// href: "/graphql/",
|
|
736
|
-
// icon: "asterisk02",
|
|
737
|
-
// name: "GraphQL Hub",
|
|
738
|
-
// strokeClass: "stroke-neutral-500",
|
|
739
|
-
// },
|
|
740
|
-
// {
|
|
741
|
-
// description: "",
|
|
742
|
-
// href: "https://cloud.hasura.io/public/graphiql",
|
|
743
|
-
// icon: "codebrowser",
|
|
744
|
-
// name: "GraphiQL",
|
|
745
|
-
// strokeClass: "stroke-neutral-500",
|
|
746
|
-
// },
|
|
747
|
-
// {
|
|
748
|
-
// description: "",
|
|
749
|
-
// href: "/changelog",
|
|
750
|
-
// icon: "gitpullrequest",
|
|
751
|
-
// name: "Changelog",
|
|
752
|
-
// strokeClass: "stroke-neutral-500",
|
|
753
|
-
// },
|
|
754
752
|
],
|
|
755
753
|
label: "BUILD",
|
|
756
754
|
},
|
|
757
|
-
// {
|
|
758
|
-
// childArray: [
|
|
759
|
-
// {
|
|
760
|
-
// description: "",
|
|
761
|
-
// href: "/blog",
|
|
762
|
-
// icon: "bookopen01",
|
|
763
|
-
// name: "Blog",
|
|
764
|
-
// strokeClass: "stroke-neutral-500",
|
|
765
|
-
// },
|
|
766
|
-
// {
|
|
767
|
-
// description: "",
|
|
768
|
-
// href: "/learn/",
|
|
769
|
-
// icon: "graduationhat02",
|
|
770
|
-
// name: "Tutorials",
|
|
771
|
-
// strokeClass: "stroke-neutral-500",
|
|
772
|
-
// },
|
|
773
|
-
// {
|
|
774
|
-
// description: "",
|
|
775
|
-
// href: "/events",
|
|
776
|
-
// icon: "calendarplus02",
|
|
777
|
-
// name: "Events",
|
|
778
|
-
// strokeClass: "stroke-neutral-500",
|
|
779
|
-
// },
|
|
780
|
-
// {
|
|
781
|
-
// description: "",
|
|
782
|
-
// href: "/sample-apps/",
|
|
783
|
-
// icon: "box",
|
|
784
|
-
// name: "Resources",
|
|
785
|
-
// strokeClass: "stroke-neutral-500",
|
|
786
|
-
// },
|
|
787
|
-
// ],
|
|
788
|
-
// label: "Learn",
|
|
789
|
-
// },
|
|
790
755
|
{
|
|
791
756
|
childArray: [
|
|
792
757
|
{
|
|
@@ -826,34 +791,59 @@ V3Header.defaultProps = {
|
|
|
826
791
|
cardImg: `https://res.cloudinary.com/dh8fp23nd/image/upload/v1721210357/cc-blog-july_2_1_k8k22u.png`,
|
|
827
792
|
cardImgAlt: "Hasura Community Call",
|
|
828
793
|
},
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
title_colorClass: "text-neutral-900",
|
|
834
|
-
img_url:
|
|
835
|
-
"https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/hascon_211daeb83a.png",
|
|
836
|
-
},
|
|
837
|
-
{
|
|
838
|
-
title: "Top 6 Architecture Trends for API Development",
|
|
839
|
-
|
|
840
|
-
title_colorClass: "text-neutral-900",
|
|
841
|
-
img_url:
|
|
842
|
-
"https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/api_trends_0a035678d8.png",
|
|
843
|
-
},
|
|
794
|
+
},
|
|
795
|
+
{
|
|
796
|
+
title: "Resources",
|
|
797
|
+
secondaryCardArr: [
|
|
844
798
|
{
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
799
|
+
childArray: [
|
|
800
|
+
{
|
|
801
|
+
description: "",
|
|
802
|
+
href: "/blog",
|
|
803
|
+
icon: "bookopen01",
|
|
804
|
+
name: "Blogs",
|
|
805
|
+
strokeClass: "stroke-neutral-500",
|
|
806
|
+
},
|
|
807
|
+
{
|
|
808
|
+
description: "",
|
|
809
|
+
href: "/events?category=Webinar#wall-section",
|
|
810
|
+
icon: "videorecorder",
|
|
811
|
+
name: "Webinars",
|
|
812
|
+
strokeClass: "stroke-neutral-500",
|
|
813
|
+
},
|
|
814
|
+
{
|
|
815
|
+
description: "",
|
|
816
|
+
href: "/graphql/",
|
|
817
|
+
icon: "home04",
|
|
818
|
+
name: "GraphQL Hub",
|
|
819
|
+
strokeClass: "stroke-neutral-500",
|
|
820
|
+
},
|
|
821
|
+
{
|
|
822
|
+
description: "",
|
|
823
|
+
href: "/events",
|
|
824
|
+
icon: "calendarplus02",
|
|
825
|
+
name: "Events",
|
|
826
|
+
strokeClass: "stroke-neutral-500",
|
|
827
|
+
},
|
|
828
|
+
{
|
|
829
|
+
description: "",
|
|
830
|
+
href: "/",
|
|
831
|
+
icon: "file05",
|
|
832
|
+
name: "Whitepapers",
|
|
833
|
+
strokeClass: "stroke-neutral-500",
|
|
834
|
+
},
|
|
835
|
+
{
|
|
836
|
+
description: "",
|
|
837
|
+
href: "https://supergraph.io/",
|
|
838
|
+
icon: "beziercurve02",
|
|
839
|
+
name: "Supergraph Manifesto",
|
|
840
|
+
strokeClass: "stroke-neutral-500",
|
|
841
|
+
},
|
|
842
|
+
],
|
|
843
|
+
label: "RESOURCES",
|
|
850
844
|
},
|
|
851
845
|
],
|
|
852
846
|
},
|
|
853
|
-
{
|
|
854
|
-
title: "Customers",
|
|
855
|
-
href: "",
|
|
856
|
-
},
|
|
857
847
|
],
|
|
858
848
|
headerUrl: "/",
|
|
859
849
|
};
|
package/src/styles/tailwind.css
CHANGED
|
@@ -1527,6 +1527,10 @@ select{
|
|
|
1527
1527
|
margin-top: 70px;
|
|
1528
1528
|
}
|
|
1529
1529
|
|
|
1530
|
+
.ml-10{
|
|
1531
|
+
margin-left: 2.5rem;
|
|
1532
|
+
}
|
|
1533
|
+
|
|
1530
1534
|
.line-clamp-3{
|
|
1531
1535
|
overflow: hidden;
|
|
1532
1536
|
display: -webkit-box;
|
|
@@ -11156,6 +11160,10 @@ select{
|
|
|
11156
11160
|
min-width: 18rem;
|
|
11157
11161
|
}
|
|
11158
11162
|
|
|
11163
|
+
.tb\:min-w-\[200px\]{
|
|
11164
|
+
min-width: 200px;
|
|
11165
|
+
}
|
|
11166
|
+
|
|
11159
11167
|
.tb\:min-w-\[310px\]{
|
|
11160
11168
|
min-width: 310px;
|
|
11161
11169
|
}
|
|
@@ -11903,6 +11911,18 @@ select{
|
|
|
11903
11911
|
}
|
|
11904
11912
|
|
|
11905
11913
|
@media (min-width: 768px){
|
|
11914
|
+
.md\:ml-10{
|
|
11915
|
+
margin-left: 2.5rem;
|
|
11916
|
+
}
|
|
11917
|
+
|
|
11918
|
+
.md\:ml-16{
|
|
11919
|
+
margin-left: 4rem;
|
|
11920
|
+
}
|
|
11921
|
+
|
|
11922
|
+
.md\:flex-row{
|
|
11923
|
+
flex-direction: row;
|
|
11924
|
+
}
|
|
11925
|
+
|
|
11906
11926
|
.md\:px-6{
|
|
11907
11927
|
padding-left: 1.5rem;
|
|
11908
11928
|
padding-right: 1.5rem;
|
|
@@ -12329,6 +12349,10 @@ select{
|
|
|
12329
12349
|
}
|
|
12330
12350
|
|
|
12331
12351
|
@media (min-width: 1024px){
|
|
12352
|
+
.lg\:ml-0{
|
|
12353
|
+
margin-left: 0px;
|
|
12354
|
+
}
|
|
12355
|
+
|
|
12332
12356
|
.lg\:flex{
|
|
12333
12357
|
display: flex;
|
|
12334
12358
|
}
|
|
@@ -12341,6 +12365,18 @@ select{
|
|
|
12341
12365
|
height: auto;
|
|
12342
12366
|
}
|
|
12343
12367
|
|
|
12368
|
+
.lg\:max-w-\[716px\]{
|
|
12369
|
+
max-width: 716px;
|
|
12370
|
+
}
|
|
12371
|
+
|
|
12372
|
+
.lg\:max-w-\[714px\]{
|
|
12373
|
+
max-width: 714px;
|
|
12374
|
+
}
|
|
12375
|
+
|
|
12376
|
+
.lg\:max-w-\[712px\]{
|
|
12377
|
+
max-width: 712px;
|
|
12378
|
+
}
|
|
12379
|
+
|
|
12344
12380
|
.lg\:grid-cols-2{
|
|
12345
12381
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
12346
12382
|
}
|
|
@@ -12372,6 +12408,10 @@ select{
|
|
|
12372
12408
|
padding-top: 0.5rem;
|
|
12373
12409
|
}
|
|
12374
12410
|
|
|
12411
|
+
.lg\:pl-0{
|
|
12412
|
+
padding-left: 0px;
|
|
12413
|
+
}
|
|
12414
|
+
|
|
12375
12415
|
.db-s\:mb-0{
|
|
12376
12416
|
margin-bottom: 0px;
|
|
12377
12417
|
}
|
|
@@ -12562,6 +12602,14 @@ select{
|
|
|
12562
12602
|
max-width: 625px;
|
|
12563
12603
|
}
|
|
12564
12604
|
|
|
12605
|
+
.db\:max-w-\[716px\]{
|
|
12606
|
+
max-width: 716px;
|
|
12607
|
+
}
|
|
12608
|
+
|
|
12609
|
+
.db\:max-w-\[714px\]{
|
|
12610
|
+
max-width: 714px;
|
|
12611
|
+
}
|
|
12612
|
+
|
|
12565
12613
|
.db\:snap-center{
|
|
12566
12614
|
scroll-snap-align: center;
|
|
12567
12615
|
}
|
|
@@ -12993,6 +13041,16 @@ select{
|
|
|
12993
13041
|
}
|
|
12994
13042
|
}
|
|
12995
13043
|
|
|
13044
|
+
@media (min-width: 1536px){
|
|
13045
|
+
.\32xl\:max-w-\[914px\]{
|
|
13046
|
+
max-width: 914px;
|
|
13047
|
+
}
|
|
13048
|
+
|
|
13049
|
+
.\32xl\:max-w-\[916px\]{
|
|
13050
|
+
max-width: 916px;
|
|
13051
|
+
}
|
|
13052
|
+
}
|
|
13053
|
+
|
|
12996
13054
|
.\[\&\>\*\]\:mb-8>*{
|
|
12997
13055
|
margin-bottom: 2rem;
|
|
12998
13056
|
}
|