@theguild/components 7.2.0-alpha-20241101220642-0b6682d9cf4196529799e8ad0e38b83426590e93 → 8.0.0-alpha-20241103132221-f9d255adde945cffb98f9f7c914ac29896a15819
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/chunk-ME7V4BHY.js +10 -0
- package/dist/cn.d.mts +5 -0
- package/dist/cn.js +8 -0
- package/dist/components/anchor.d.mts +11 -0
- package/dist/components/anchor.js +30 -0
- package/dist/components/button.d.mts +13 -0
- package/dist/components/button.js +25 -0
- package/dist/components/call-to-action.d.mts +38 -0
- package/dist/components/call-to-action.js +42 -0
- package/dist/components/cards-colorful.d.mts +19 -0
- package/dist/components/cards-colorful.js +20 -0
- package/dist/components/cookies-consent.d.mts +7 -0
- package/dist/components/cookies-consent.js +48 -0
- package/dist/components/decorations/index.d.mts +11 -0
- package/dist/components/decorations/index.js +72 -0
- package/dist/components/feature-list.d.mts +9 -0
- package/dist/components/feature-list.js +41 -0
- package/dist/components/footer.d.mts +9 -0
- package/dist/components/footer.js +116 -0
- package/dist/components/get-your-api-game-right-section.d.mts +7 -0
- package/dist/components/get-your-api-game-right-section.js +122 -0
- package/dist/components/giscus.d.mts +6 -0
- package/dist/components/giscus.js +14 -0
- package/dist/components/guild-navbar-logo.d.mts +19 -0
- package/dist/components/guild-navbar-logo.js +62 -0
- package/dist/components/heading.d.mts +10 -0
- package/dist/components/heading.js +36 -0
- package/dist/components/hero-gradient.d.mts +9 -0
- package/dist/components/hero-gradient.js +82 -0
- package/dist/components/hero-illustration.d.mts +9 -0
- package/dist/components/hero-illustration.js +31 -0
- package/dist/components/hero-marketplace.d.mts +9 -0
- package/dist/components/hero-marketplace.js +78 -0
- package/dist/components/hero-video.d.mts +9 -0
- package/dist/components/hero-video.js +73 -0
- package/dist/components/hive-footer.d.mts +11 -0
- package/dist/components/hive-footer.js +252 -0
- package/dist/components/hive-navigation/graphql-conf-card.d.mts +9 -0
- package/dist/components/hive-navigation/graphql-conf-card.js +26 -0
- package/dist/components/hive-navigation/index.d.mts +55 -0
- package/dist/components/hive-navigation/index.js +392 -0
- package/dist/components/hive-navigation/navigation-menu.d.mts +23 -0
- package/dist/components/hive-navigation/navigation-menu.js +179 -0
- package/dist/components/icons/index.d.mts +6 -0
- package/dist/{chunk-XKCA3AB7.js → components/icons/index.js} +29 -266
- package/dist/components/image.d.mts +6 -0
- package/dist/components/image.js +8 -0
- package/dist/components/index.d.mts +44 -0
- package/dist/components/index.js +52 -0
- package/dist/components/info-card.d.mts +11 -0
- package/dist/components/info-card.js +20 -0
- package/dist/components/info-list.d.mts +9 -0
- package/dist/components/info-list.js +27 -0
- package/dist/components/legacy-package-cmd.d.mts +13 -0
- package/dist/components/legacy-package-cmd.js +54 -0
- package/dist/components/marketplace-list.d.mts +9 -0
- package/dist/components/marketplace-list.js +118 -0
- package/dist/components/marketplace-search.d.mts +9 -0
- package/dist/components/marketplace-search.js +111 -0
- package/dist/components/npm-badge.d.mts +7 -0
- package/dist/components/npm-badge.js +16 -0
- package/dist/components/schema-type.d.mts +9 -0
- package/dist/components/schema-type.js +80 -0
- package/dist/components/stud.d.mts +7 -0
- package/dist/components/stud.js +17 -0
- package/dist/components/tag.d.mts +13 -0
- package/dist/components/tag.js +26 -0
- package/dist/components/theme-switcher.d.mts +7 -0
- package/dist/components/theme-switcher.js +17 -0
- package/dist/components/tools-and-libraries-cards.d.mts +7 -0
- package/dist/components/tools-and-libraries-cards.js +442 -0
- package/dist/constants.d.mts +7 -0
- package/dist/constants.js +7 -0
- package/dist/helpers/render-slot.d.mts +3 -0
- package/dist/helpers/render-slot.js +21 -0
- package/dist/index.d.mts +64 -339
- package/dist/index.js +21 -3115
- package/dist/logos/index.d.mts +26 -0
- package/dist/{chunk-EWF5AT2G.js → logos/index.js} +68 -53
- package/dist/mdx-components.d.mts +5 -0
- package/dist/mdx-components.js +50 -0
- package/dist/products.d.mts +10 -5
- package/dist/products.js +230 -5
- package/dist/server/index.d.mts +5 -0
- package/dist/server/index.js +12 -0
- package/dist/server/next.config.d.mts +10 -0
- package/dist/server/next.config.js +107 -0
- package/dist/server/npm.d.mts +21 -0
- package/dist/server/npm.js +75 -0
- package/dist/server/package.json +1 -0
- package/dist/server/pages.d.mts +1 -0
- package/dist/server/pages.js +5 -0
- package/dist/server/underscore-redirects.d.mts +3 -0
- package/dist/server/underscore-redirects.js +40 -0
- package/dist/static/illustrations/marketplace-cube-bl.d.mts +2 -0
- package/dist/static/illustrations/marketplace-cube-br.d.mts +2 -0
- package/dist/static/illustrations/marketplace-cube-tl.d.mts +2 -0
- package/dist/static/illustrations/marketplace-cube-tr.d.mts +2 -0
- package/dist/static/illustrations/marketplace-desktop.d.mts +2 -0
- package/dist/static/illustrations/marketplace-mobile.d.mts +2 -0
- package/dist/theme-layout.d.mts +39 -0
- package/dist/theme-layout.js +144 -0
- package/dist/types/components.d.mts +121 -0
- package/dist/types/components.js +0 -0
- package/package.json +19 -36
- package/style.css +10 -8
- package/dist/compile.mjs +0 -11
- package/dist/index.css +0 -133
- package/dist/logos.d.mts +0 -32
- package/dist/logos.js +0 -54
- package/dist/next.config.mjs +0 -135
- /package/dist/{marketplace-cube-bl-42X7Y3KO.png → static/illustrations/marketplace-cube-bl.png} +0 -0
- /package/dist/{marketplace-cube-br-Y5MZRDIL.png → static/illustrations/marketplace-cube-br.png} +0 -0
- /package/dist/{marketplace-cube-tl-PEJKW6RX.png → static/illustrations/marketplace-cube-tl.png} +0 -0
- /package/dist/{marketplace-cube-tr-O5XQ6Q4N.png → static/illustrations/marketplace-cube-tr.png} +0 -0
- /package/dist/{marketplace-desktop-7XUR54PR.png → static/illustrations/marketplace-desktop.png} +0 -0
- /package/dist/{marketplace-mobile-DI462WKF.png → static/illustrations/marketplace-mobile.png} +0 -0
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../cn";
|
|
3
|
+
import { CallToAction } from "./call-to-action";
|
|
4
|
+
import { DecorationIsolation } from "./decorations";
|
|
5
|
+
import { Heading } from "./heading";
|
|
6
|
+
function GetYourAPIGameRightSection({ className }) {
|
|
7
|
+
return /* @__PURE__ */ jsxs(
|
|
8
|
+
"section",
|
|
9
|
+
{
|
|
10
|
+
className: cn(className, "relative overflow-hidden rounded-3xl bg-primary md:h-[308px]"),
|
|
11
|
+
children: [
|
|
12
|
+
/* @__PURE__ */ jsxs(DecorationIsolation, { children: [
|
|
13
|
+
/* @__PURE__ */ jsx(GreenArchDecoration, { className: "absolute inset-y-0 right-0 hidden opacity-10 md:block [@media(min-width:1300px)]:opacity-100" }),
|
|
14
|
+
/* @__PURE__ */ jsx(StrokeDecoration, { className: "absolute right-[607px] max-md:right-[-36px] max-md:top-[-71px] max-md:size-[200px] max-md:rotate-180 md:bottom-0" })
|
|
15
|
+
] }),
|
|
16
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col items-stretch justify-between gap-x-6 gap-y-4 p-4 sm:items-center md:h-[308px] md:flex-row md:px-24", children: [
|
|
17
|
+
/* @__PURE__ */ jsx(
|
|
18
|
+
Heading,
|
|
19
|
+
{
|
|
20
|
+
as: "h2",
|
|
21
|
+
size: "md",
|
|
22
|
+
className: "text-[40px] leading-[1.2] tracking-[-0.2px] max-sm:text-balance max-sm:text-center md:text-[56px] md:leading-[1.142586] md:tracking-[-0.56px]",
|
|
23
|
+
children: "Get your API game right."
|
|
24
|
+
}
|
|
25
|
+
),
|
|
26
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-x-4 gap-y-2 whitespace-pre sm:flex-row", children: [
|
|
27
|
+
/* @__PURE__ */ jsx(CallToAction, { variant: "secondary-inverted", href: "https://app.graphql-hive.com/", children: "Get started for free" }),
|
|
28
|
+
/* @__PURE__ */ jsx(
|
|
29
|
+
CallToAction,
|
|
30
|
+
{
|
|
31
|
+
variant: "tertiary",
|
|
32
|
+
href: "https://the-guild.dev/contact",
|
|
33
|
+
onClick: (event) => {
|
|
34
|
+
window.$crisp?.push(["do", "chat:open"]);
|
|
35
|
+
event.preventDefault();
|
|
36
|
+
},
|
|
37
|
+
children: "Talk to us"
|
|
38
|
+
}
|
|
39
|
+
)
|
|
40
|
+
] })
|
|
41
|
+
] })
|
|
42
|
+
]
|
|
43
|
+
}
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
function GreenArchDecoration(props) {
|
|
47
|
+
return /* @__PURE__ */ jsxs(
|
|
48
|
+
"svg",
|
|
49
|
+
{
|
|
50
|
+
width: 538,
|
|
51
|
+
height: 309,
|
|
52
|
+
viewBox: "0 0 538 309",
|
|
53
|
+
fill: "none",
|
|
54
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
55
|
+
...props,
|
|
56
|
+
children: [
|
|
57
|
+
/* @__PURE__ */ jsx(
|
|
58
|
+
"path",
|
|
59
|
+
{
|
|
60
|
+
d: "M0 127.88c0 11.695 4.565 22.926 12.679 31.201l63.005 64.257 7.378 7.524 63.005 64.257c8.113 8.275 19.126 12.931 30.594 12.931H546.5v-84.712H147.971c-35.852 0-64.91-29.635-64.91-66.199V-97.857H0V127.88z",
|
|
61
|
+
fill: "url(#paint0_linear_711_2526)"
|
|
62
|
+
}
|
|
63
|
+
),
|
|
64
|
+
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
|
|
65
|
+
"linearGradient",
|
|
66
|
+
{
|
|
67
|
+
id: "paint0_linear_711_2526",
|
|
68
|
+
x1: 273.25,
|
|
69
|
+
y1: -3.00975,
|
|
70
|
+
x2: 273.25,
|
|
71
|
+
y2: 308.05,
|
|
72
|
+
gradientUnits: "userSpaceOnUse",
|
|
73
|
+
children: [
|
|
74
|
+
/* @__PURE__ */ jsx("stop", { stopColor: "#55998D" }),
|
|
75
|
+
/* @__PURE__ */ jsx("stop", { offset: 1, stopColor: "#245850" })
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
) })
|
|
79
|
+
]
|
|
80
|
+
}
|
|
81
|
+
);
|
|
82
|
+
}
|
|
83
|
+
function StrokeDecoration(props) {
|
|
84
|
+
return /* @__PURE__ */ jsxs(
|
|
85
|
+
"svg",
|
|
86
|
+
{
|
|
87
|
+
width: 304,
|
|
88
|
+
height: 284,
|
|
89
|
+
viewBox: "0 0 304 284",
|
|
90
|
+
fill: "none",
|
|
91
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
92
|
+
...props,
|
|
93
|
+
children: [
|
|
94
|
+
/* @__PURE__ */ jsx(
|
|
95
|
+
"path",
|
|
96
|
+
{
|
|
97
|
+
d: "M293.962 111.972a32.561 32.561 0 019.538 23.014V303.55h-62.444V113.073c0-27.66-22.419-50.079-50.079-50.079H.5V.55h168.563a32.565 32.565 0 0123.015 9.538l48.124 48.124 5.636 5.636 48.124 48.124z",
|
|
98
|
+
stroke: "url(#paint0_linear_711_2520)"
|
|
99
|
+
}
|
|
100
|
+
),
|
|
101
|
+
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
|
|
102
|
+
"linearGradient",
|
|
103
|
+
{
|
|
104
|
+
id: "paint0_linear_711_2520",
|
|
105
|
+
x1: 152,
|
|
106
|
+
y1: 159.05,
|
|
107
|
+
x2: 294.5,
|
|
108
|
+
y2: 5.04982,
|
|
109
|
+
gradientUnits: "userSpaceOnUse",
|
|
110
|
+
children: [
|
|
111
|
+
/* @__PURE__ */ jsx("stop", { stopColor: "#A2C1C4", stopOpacity: 0 }),
|
|
112
|
+
/* @__PURE__ */ jsx("stop", { offset: 1, stopColor: "#A2C1C4", stopOpacity: 0.8 })
|
|
113
|
+
]
|
|
114
|
+
}
|
|
115
|
+
) })
|
|
116
|
+
]
|
|
117
|
+
}
|
|
118
|
+
);
|
|
119
|
+
}
|
|
120
|
+
export {
|
|
121
|
+
GetYourAPIGameRightSection
|
|
122
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useTheme } from "nextra-theme-docs";
|
|
4
|
+
import { default as _Giscus } from "@giscus/react";
|
|
5
|
+
const Giscus = (props) => {
|
|
6
|
+
const { resolvedTheme } = useTheme();
|
|
7
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
8
|
+
/* @__PURE__ */ jsx("br", {}),
|
|
9
|
+
/* @__PURE__ */ jsx(_Giscus, { theme: resolvedTheme, ...props })
|
|
10
|
+
] });
|
|
11
|
+
};
|
|
12
|
+
export {
|
|
13
|
+
Giscus
|
|
14
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { FC, ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
declare const GuildUnifiedLogo: FC<{
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
title: string;
|
|
7
|
+
description: string;
|
|
8
|
+
}>;
|
|
9
|
+
/**
|
|
10
|
+
* GraphQL-related products live under the Hive platform brand, so we use a single logo for them.
|
|
11
|
+
* The rest gets The Guild / {Product} logo.
|
|
12
|
+
*/
|
|
13
|
+
declare function getNavbarLogo({ logo, websiteName, description, }: {
|
|
14
|
+
logo: ReactNode;
|
|
15
|
+
websiteName: string;
|
|
16
|
+
description: string;
|
|
17
|
+
}): react_jsx_runtime.JSX.Element;
|
|
18
|
+
|
|
19
|
+
export { GuildUnifiedLogo, getNavbarLogo };
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import { siteOrigin } from "../constants";
|
|
4
|
+
import { GuildLogo, TheGuild } from "../logos";
|
|
5
|
+
import { Anchor } from "./anchor";
|
|
6
|
+
const GuildUnifiedLogo = ({ children, title, description }) => {
|
|
7
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
8
|
+
/* @__PURE__ */ jsxs(
|
|
9
|
+
Anchor,
|
|
10
|
+
{
|
|
11
|
+
title: "View our website",
|
|
12
|
+
className: clsx(
|
|
13
|
+
"flex items-center gap-x-1.5 transition-opacity hover:opacity-75",
|
|
14
|
+
children && "max-md:hidden"
|
|
15
|
+
),
|
|
16
|
+
href: `${siteOrigin}/`,
|
|
17
|
+
children: [
|
|
18
|
+
/* @__PURE__ */ jsx(GuildLogo, { className: "h-9 w-auto" }),
|
|
19
|
+
/* @__PURE__ */ jsx(TheGuild, { className: "w-11" })
|
|
20
|
+
]
|
|
21
|
+
}
|
|
22
|
+
),
|
|
23
|
+
children && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
24
|
+
/* @__PURE__ */ jsx(
|
|
25
|
+
"svg",
|
|
26
|
+
{
|
|
27
|
+
height: "22",
|
|
28
|
+
viewBox: "0 0 10 22",
|
|
29
|
+
stroke: "currentColor",
|
|
30
|
+
className: "mx-6 shrink-0 max-md:hidden",
|
|
31
|
+
children: /* @__PURE__ */ jsx("path", { d: "M8.6001 0.833313L0.600097 20.8333" })
|
|
32
|
+
}
|
|
33
|
+
),
|
|
34
|
+
/* @__PURE__ */ jsxs(
|
|
35
|
+
Anchor,
|
|
36
|
+
{
|
|
37
|
+
title,
|
|
38
|
+
className: "flex shrink-0 items-center gap-x-1.5 hover:opacity-75",
|
|
39
|
+
href: "/",
|
|
40
|
+
children: [
|
|
41
|
+
children,
|
|
42
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
43
|
+
/* @__PURE__ */ jsx("h1", { className: "text-sm font-bold leading-tight", children: title }),
|
|
44
|
+
/* @__PURE__ */ jsx("h2", { className: "text-xs max-lg:hidden", children: description })
|
|
45
|
+
] })
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
)
|
|
49
|
+
] })
|
|
50
|
+
] });
|
|
51
|
+
};
|
|
52
|
+
function getNavbarLogo({
|
|
53
|
+
logo,
|
|
54
|
+
websiteName,
|
|
55
|
+
description
|
|
56
|
+
}) {
|
|
57
|
+
return websiteName === "Hive" ? /* @__PURE__ */ jsx(Anchor, { title: websiteName, href: "/", children: logo }) : /* @__PURE__ */ jsx(GuildUnifiedLogo, { description, title: websiteName, children: logo });
|
|
58
|
+
}
|
|
59
|
+
export {
|
|
60
|
+
GuildUnifiedLogo,
|
|
61
|
+
getNavbarLogo
|
|
62
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
3
|
+
|
|
4
|
+
interface HeadingProps extends ComponentPropsWithoutRef<'h1'> {
|
|
5
|
+
as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'p' | 'span';
|
|
6
|
+
size: 'xl' | 'lg' | 'md' | 'sm';
|
|
7
|
+
}
|
|
8
|
+
declare function Heading({ as: _as, size, className, children, ...rest }: HeadingProps): react_jsx_runtime.JSX.Element;
|
|
9
|
+
|
|
10
|
+
export { Heading, type HeadingProps };
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../cn";
|
|
3
|
+
function Heading({ as: _as, size, className, children, ...rest }) {
|
|
4
|
+
const Level = _as || "h2";
|
|
5
|
+
let sizeStyle = "";
|
|
6
|
+
switch (size) {
|
|
7
|
+
// TODO: This should probably be a class, not a component, because the design expects
|
|
8
|
+
// an equivalent of `heading-sm lg:heading-xl.`
|
|
9
|
+
case "xl":
|
|
10
|
+
sizeStyle = "text-4xl leading-[1.2] md:text-6xl md:leading-[1.1875] tracking-[-0.64px]";
|
|
11
|
+
break;
|
|
12
|
+
case "lg":
|
|
13
|
+
sizeStyle = "text-4xl leading-[1.2] md:text-[56px] md:leading-[1.14286] tracking-[-0.56px]";
|
|
14
|
+
break;
|
|
15
|
+
case "md":
|
|
16
|
+
sizeStyle = "text-4xl leading-[1.2] md:text-5xl md:leading-[1.16667] tracking-[-0.48px]";
|
|
17
|
+
break;
|
|
18
|
+
case "sm":
|
|
19
|
+
sizeStyle = "text-[40px] leading-[1.2] tracking-[-0.2px]";
|
|
20
|
+
break;
|
|
21
|
+
}
|
|
22
|
+
const id = typeof children === "string" ? children.replace(/[\s.,]+/g, "-").toLowerCase() : void 0;
|
|
23
|
+
return /* @__PURE__ */ jsx(Level, { className: cn(sizeStyle, className), id, ...rest, children: id ? /* @__PURE__ */ jsx("a", { href: `#${id}`, className: "cursor-text", tabIndex: -1, onClick: preventScroll, children }) : children });
|
|
24
|
+
}
|
|
25
|
+
function preventScroll(event) {
|
|
26
|
+
if (event.currentTarget.tagName !== "A") return;
|
|
27
|
+
const href = event.currentTarget.getAttribute("href");
|
|
28
|
+
if (href?.[0] !== "#") return;
|
|
29
|
+
event.preventDefault();
|
|
30
|
+
const url = new URL(window.location.href);
|
|
31
|
+
url.hash = href.slice(1);
|
|
32
|
+
window.history.replaceState({}, "", url.toString());
|
|
33
|
+
}
|
|
34
|
+
export {
|
|
35
|
+
Heading
|
|
36
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ReactElement } from 'react';
|
|
2
|
+
import { IHeroGradientProps } from '../types/components.mjs';
|
|
3
|
+
import 'next/image';
|
|
4
|
+
import 'next/link';
|
|
5
|
+
import 'react-player';
|
|
6
|
+
|
|
7
|
+
declare const HeroGradient: ({ title, description, link, version, colors, image, className, }: IHeroGradientProps) => ReactElement;
|
|
8
|
+
|
|
9
|
+
export { HeroGradient };
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { isValidElement } from "react";
|
|
3
|
+
import clsx from "clsx";
|
|
4
|
+
import { Button } from "./button";
|
|
5
|
+
import { Image } from "./image";
|
|
6
|
+
const Shadow = ({ className }) => {
|
|
7
|
+
return /* @__PURE__ */ jsx(
|
|
8
|
+
"span",
|
|
9
|
+
{
|
|
10
|
+
className: clsx(
|
|
11
|
+
"absolute size-[500px] -translate-x-1/2 -translate-y-1/2 rounded-full blur-3xl",
|
|
12
|
+
className
|
|
13
|
+
)
|
|
14
|
+
}
|
|
15
|
+
);
|
|
16
|
+
};
|
|
17
|
+
const HeroGradient = ({
|
|
18
|
+
title,
|
|
19
|
+
description,
|
|
20
|
+
link,
|
|
21
|
+
version,
|
|
22
|
+
colors = [],
|
|
23
|
+
image,
|
|
24
|
+
className
|
|
25
|
+
}) => {
|
|
26
|
+
return /* @__PURE__ */ jsx("section", { className: clsx("bg-white md:py-14 dark:bg-dark", className), children: /* @__PURE__ */ jsxs(
|
|
27
|
+
"div",
|
|
28
|
+
{
|
|
29
|
+
className: clsx(
|
|
30
|
+
"container relative z-0 flex max-w-[90rem] items-center gap-6 px-6 md:px-14",
|
|
31
|
+
image ? "py-6" : "py-14"
|
|
32
|
+
),
|
|
33
|
+
children: [
|
|
34
|
+
/* @__PURE__ */ jsxs(
|
|
35
|
+
"div",
|
|
36
|
+
{
|
|
37
|
+
className: "absolute inset-0 z-[-1] overflow-hidden bg-black md:mx-6 md:rounded-3xl dark:bg-dark",
|
|
38
|
+
style: { "--colorA": colors[0], "--colorB": colors[1] },
|
|
39
|
+
children: [
|
|
40
|
+
/* @__PURE__ */ jsx(Shadow, { className: "-left-10 -top-24 [background:var(--colorA)]" }),
|
|
41
|
+
/* @__PURE__ */ jsx(Shadow, { className: "-top-5 hidden [background:var(--colorA)] md:right-[-28rem] md:block" }),
|
|
42
|
+
/* @__PURE__ */ jsx(Shadow, { className: "bottom-[-31rem] right-[-22rem] [background:var(--colorB)]" }),
|
|
43
|
+
/* @__PURE__ */ jsx(Shadow, { className: "-left-12 bottom-[-37rem] hidden [background:var(--colorB)] md:block" })
|
|
44
|
+
]
|
|
45
|
+
}
|
|
46
|
+
),
|
|
47
|
+
/* @__PURE__ */ jsxs("div", { className: clsx("grow md:pl-6"), children: [
|
|
48
|
+
/* @__PURE__ */ jsx("h1", { className: "max-w-lg text-2xl font-bold text-white md:text-3xl", children: title }),
|
|
49
|
+
/* @__PURE__ */ jsx("p", { className: "mb-4 mt-2.5 max-w-md text-base text-white opacity-70 md:text-lg", children: description }),
|
|
50
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3 text-xs md:mt-9", children: [
|
|
51
|
+
link && toArray(link).map((link2, i) => /* @__PURE__ */ jsx(
|
|
52
|
+
Button,
|
|
53
|
+
{
|
|
54
|
+
variant: "secondary",
|
|
55
|
+
...link2,
|
|
56
|
+
className: clsx("!px-8", link2.className)
|
|
57
|
+
},
|
|
58
|
+
i
|
|
59
|
+
)),
|
|
60
|
+
version && isValidElement(version) ? version : /* @__PURE__ */ jsx("span", { className: "text-gray-50 opacity-60", children: version })
|
|
61
|
+
] })
|
|
62
|
+
] }),
|
|
63
|
+
image && /* @__PURE__ */ jsx(
|
|
64
|
+
Image,
|
|
65
|
+
{
|
|
66
|
+
...image,
|
|
67
|
+
className: clsx(
|
|
68
|
+
"hidden w-full max-w-sm select-none sm:max-w-md md:block",
|
|
69
|
+
image.className
|
|
70
|
+
)
|
|
71
|
+
}
|
|
72
|
+
)
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
) });
|
|
76
|
+
};
|
|
77
|
+
function toArray(input) {
|
|
78
|
+
return Array.isArray(input) ? input : [input];
|
|
79
|
+
}
|
|
80
|
+
export {
|
|
81
|
+
HeroGradient
|
|
82
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ReactElement } from 'react';
|
|
2
|
+
import { IHeroIllustrationProps } from '../types/components.mjs';
|
|
3
|
+
import 'next/image';
|
|
4
|
+
import 'next/link';
|
|
5
|
+
import 'react-player';
|
|
6
|
+
|
|
7
|
+
declare const HeroIllustration: ({ title, description, link, image, flipped, className, }: IHeroIllustrationProps) => ReactElement;
|
|
8
|
+
|
|
9
|
+
export { HeroIllustration };
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import { Button } from "./button";
|
|
4
|
+
import { Image } from "./image";
|
|
5
|
+
const HeroIllustration = ({
|
|
6
|
+
title,
|
|
7
|
+
description,
|
|
8
|
+
link,
|
|
9
|
+
image,
|
|
10
|
+
flipped,
|
|
11
|
+
className
|
|
12
|
+
}) => /* @__PURE__ */ jsx("section", { className: clsx("bg-white dark:bg-dark", className), children: /* @__PURE__ */ jsxs(
|
|
13
|
+
"div",
|
|
14
|
+
{
|
|
15
|
+
className: clsx(
|
|
16
|
+
"container flex flex-wrap items-center gap-8 py-8 md:flex-nowrap md:justify-around",
|
|
17
|
+
flipped && "md:flex-row-reverse"
|
|
18
|
+
),
|
|
19
|
+
children: [
|
|
20
|
+
/* @__PURE__ */ jsx(Image, { ...image, className: clsx("w-full max-w-md md:w-2/5", image.className) }),
|
|
21
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-3", children: [
|
|
22
|
+
/* @__PURE__ */ jsx("h2", { className: "max-w-sm text-2xl font-bold text-black md:text-3xl dark:text-gray-50", children: title }),
|
|
23
|
+
/* @__PURE__ */ jsx("p", { className: "max-w-md text-base text-gray-500 dark:text-gray-400", children: description }),
|
|
24
|
+
link && /* @__PURE__ */ jsx(Button, { ...link })
|
|
25
|
+
] })
|
|
26
|
+
]
|
|
27
|
+
}
|
|
28
|
+
) });
|
|
29
|
+
export {
|
|
30
|
+
HeroIllustration
|
|
31
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ReactElement } from 'react';
|
|
2
|
+
import { IHeroMarketplaceProps } from '../types/components.mjs';
|
|
3
|
+
import 'next/image';
|
|
4
|
+
import 'next/link';
|
|
5
|
+
import 'react-player';
|
|
6
|
+
|
|
7
|
+
declare const HeroMarketplace: ({ title, description, link, className, image, }: IHeroMarketplaceProps) => ReactElement;
|
|
8
|
+
|
|
9
|
+
export { HeroMarketplace };
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import { Button } from "./button";
|
|
4
|
+
import { Image } from "./image";
|
|
5
|
+
import CubeBL from "../static/illustrations/marketplace-cube-bl.png";
|
|
6
|
+
import CubeBR from "../static/illustrations/marketplace-cube-br.png";
|
|
7
|
+
import CubeTL from "../static/illustrations/marketplace-cube-tl.png";
|
|
8
|
+
import CubeTR from "../static/illustrations/marketplace-cube-tr.png";
|
|
9
|
+
import IllustrationDesktop from "../static/illustrations/marketplace-desktop.png";
|
|
10
|
+
import IllustrationMobile from "../static/illustrations/marketplace-mobile.png";
|
|
11
|
+
const Shadow = ({ className }) => {
|
|
12
|
+
return /* @__PURE__ */ jsx(
|
|
13
|
+
"span",
|
|
14
|
+
{
|
|
15
|
+
className: clsx(
|
|
16
|
+
"absolute size-[750px] -translate-x-1/2 -translate-y-1/2 rounded-full opacity-40 blur-3xl",
|
|
17
|
+
className
|
|
18
|
+
)
|
|
19
|
+
}
|
|
20
|
+
);
|
|
21
|
+
};
|
|
22
|
+
const Cube = ({ className, src }) => {
|
|
23
|
+
return /* @__PURE__ */ jsx(
|
|
24
|
+
Image,
|
|
25
|
+
{
|
|
26
|
+
className: clsx("absolute -translate-x-1/2 -translate-y-1/2", className),
|
|
27
|
+
src,
|
|
28
|
+
alt: "Cube"
|
|
29
|
+
}
|
|
30
|
+
);
|
|
31
|
+
};
|
|
32
|
+
const HeroMarketplace = ({
|
|
33
|
+
title,
|
|
34
|
+
description,
|
|
35
|
+
link,
|
|
36
|
+
className,
|
|
37
|
+
image
|
|
38
|
+
}) => /* @__PURE__ */ jsx("section", { className: clsx("overflow-hidden bg-white dark:bg-dark", className), children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
39
|
+
/* @__PURE__ */ jsxs(
|
|
40
|
+
"div",
|
|
41
|
+
{
|
|
42
|
+
className: "absolute inset-0 overflow-hidden bg-black dark:bg-dark",
|
|
43
|
+
style: { "--colorA": "#ff34ae", "--colorB": "#1cc8ee" },
|
|
44
|
+
children: [
|
|
45
|
+
/* @__PURE__ */ jsx(Shadow, { className: "left-[-30px] top-[-175px] [background:var(--colorA)] md:left-[-60px] md:top-[-150px]" }),
|
|
46
|
+
/* @__PURE__ */ jsx(Shadow, { className: "bottom-[-800px] right-[-700px] hidden [background:var(--colorA)] md:block" }),
|
|
47
|
+
/* @__PURE__ */ jsx(Shadow, { className: "bottom-[-600px] left-[-30px] [background:var(--colorB)] md:bottom-[-700px] md:left-5" })
|
|
48
|
+
]
|
|
49
|
+
}
|
|
50
|
+
),
|
|
51
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
52
|
+
/* @__PURE__ */ jsx(Cube, { src: CubeTL, className: "-top-2.5 left-6 md:left-10 md:top-6" }),
|
|
53
|
+
/* @__PURE__ */ jsx(Cube, { src: CubeTR, className: "-bottom-60 -right-52 top-auto md:bottom-auto md:top-20" }),
|
|
54
|
+
/* @__PURE__ */ jsx(Cube, { src: CubeBR, className: "-bottom-32 -right-20 hidden md:block" }),
|
|
55
|
+
/* @__PURE__ */ jsx(Cube, { src: CubeBL, className: "-bottom-40 left-10 hidden md:block" })
|
|
56
|
+
] }),
|
|
57
|
+
/* @__PURE__ */ jsxs("div", { className: "container mb-28 mt-16 flex max-w-[90rem] flex-wrap items-center pb-1 pt-20 md:mb-20 md:mt-7 md:flex-nowrap md:pt-0", children: [
|
|
58
|
+
/* @__PURE__ */ jsxs(
|
|
59
|
+
"picture",
|
|
60
|
+
{
|
|
61
|
+
className: "z-[1] order-last -mb-20 -ml-8 mt-5 w-full max-w-md md:order-first md:-mb-24 md:-ml-12 md:mt-0 md:w-auto md:max-w-none lg:-ml-14 lg:w-2/3",
|
|
62
|
+
...image,
|
|
63
|
+
children: [
|
|
64
|
+
/* @__PURE__ */ jsx("source", { media: "(min-width:768px)", srcSet: IllustrationDesktop }),
|
|
65
|
+
/* @__PURE__ */ jsx(Image, { className: "mx-auto w-auto", src: IllustrationMobile, alt: "Products List" })
|
|
66
|
+
]
|
|
67
|
+
}
|
|
68
|
+
),
|
|
69
|
+
/* @__PURE__ */ jsxs("div", { className: "relative z-[1]", children: [
|
|
70
|
+
/* @__PURE__ */ jsx("h2", { className: "mb-2.5 max-w-lg text-2xl font-bold text-white md:text-3xl dark:text-gray-50", children: title }),
|
|
71
|
+
/* @__PURE__ */ jsx("p", { className: "max-w-lg text-base text-gray-300 opacity-70", children: description }),
|
|
72
|
+
link && /* @__PURE__ */ jsx("div", { className: "relative z-[1] mt-4 hidden items-center text-xs md:mt-9 md:flex", children: /* @__PURE__ */ jsx(Button, { ...link }) })
|
|
73
|
+
] })
|
|
74
|
+
] })
|
|
75
|
+
] }) });
|
|
76
|
+
export {
|
|
77
|
+
HeroMarketplace
|
|
78
|
+
};
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { addBasePath } from "next/dist/client/add-base-path";
|
|
4
|
+
import clsx from "clsx";
|
|
5
|
+
import { useMounted } from "nextra/hooks";
|
|
6
|
+
import ReactPlayer from "react-player/lazy";
|
|
7
|
+
import { Anchor } from "./anchor";
|
|
8
|
+
const HeroVideo = ({
|
|
9
|
+
title,
|
|
10
|
+
description,
|
|
11
|
+
link,
|
|
12
|
+
video,
|
|
13
|
+
flipped,
|
|
14
|
+
className,
|
|
15
|
+
videoProps
|
|
16
|
+
}) => {
|
|
17
|
+
const mounted = useMounted();
|
|
18
|
+
return /* @__PURE__ */ jsx("section", { className: clsx("bg-gray-100 dark:bg-neutral-800", className), children: /* @__PURE__ */ jsxs(
|
|
19
|
+
"div",
|
|
20
|
+
{
|
|
21
|
+
className: clsx(
|
|
22
|
+
"container flex flex-wrap py-8 md:flex-nowrap md:items-center md:justify-center",
|
|
23
|
+
flipped && "md:flex-row-reverse"
|
|
24
|
+
),
|
|
25
|
+
children: [
|
|
26
|
+
/* @__PURE__ */ jsxs("div", { className: "mb-16 mt-8 md:my-0", children: [
|
|
27
|
+
/* @__PURE__ */ jsx("h2", { className: "m-0 max-w-sm text-2xl font-bold text-black md:text-3xl dark:text-gray-50", children: title }),
|
|
28
|
+
/* @__PURE__ */ jsx("p", { className: "mb-3 mt-1 max-w-md text-base text-gray-500 dark:text-gray-400", children: description }),
|
|
29
|
+
link && /* @__PURE__ */ jsx(
|
|
30
|
+
Anchor,
|
|
31
|
+
{
|
|
32
|
+
...link,
|
|
33
|
+
className: clsx(
|
|
34
|
+
"mt-auto w-max text-sm text-cyan-400 hover:text-cyan-300",
|
|
35
|
+
link.className
|
|
36
|
+
)
|
|
37
|
+
}
|
|
38
|
+
)
|
|
39
|
+
] }),
|
|
40
|
+
/* @__PURE__ */ jsx(
|
|
41
|
+
"div",
|
|
42
|
+
{
|
|
43
|
+
className: clsx(
|
|
44
|
+
"h-72 w-full overflow-hidden rounded-xl bg-white shadow-xl sm:h-96 md:h-72 md:w-3/5 lg:h-96",
|
|
45
|
+
flipped ? "md:mr-8" : "md:ml-8"
|
|
46
|
+
),
|
|
47
|
+
children: mounted && /* @__PURE__ */ jsx(
|
|
48
|
+
ReactPlayer,
|
|
49
|
+
{
|
|
50
|
+
url: video.src,
|
|
51
|
+
light: video.placeholder.startsWith("/") ? addBasePath(video.placeholder) : video.placeholder,
|
|
52
|
+
controls: true,
|
|
53
|
+
height: "100%",
|
|
54
|
+
width: "100%",
|
|
55
|
+
config: {
|
|
56
|
+
youtube: {
|
|
57
|
+
playerVars: {
|
|
58
|
+
autoplay: 1
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
...videoProps
|
|
63
|
+
}
|
|
64
|
+
)
|
|
65
|
+
}
|
|
66
|
+
)
|
|
67
|
+
]
|
|
68
|
+
}
|
|
69
|
+
) });
|
|
70
|
+
};
|
|
71
|
+
export {
|
|
72
|
+
HeroVideo
|
|
73
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { IFooterExtendedProps } from '../types/components.mjs';
|
|
3
|
+
import 'next/image';
|
|
4
|
+
import 'next/link';
|
|
5
|
+
import 'react-player';
|
|
6
|
+
|
|
7
|
+
interface HiveFooterProps extends IFooterExtendedProps {
|
|
8
|
+
}
|
|
9
|
+
declare const HiveFooter: FC<HiveFooterProps>;
|
|
10
|
+
|
|
11
|
+
export { HiveFooter, type HiveFooterProps };
|