Skip to content

Commit 90f424d

Browse files
hasparushasparus
committed
Squash merge "Add Mesh Hero #8159"
1 parent 4905b19 commit 90f424d

File tree

5 files changed

+246
-37
lines changed

5 files changed

+246
-37
lines changed

‎website/src/components/hero.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { cn } from '@theguild/components';
2+
3+
// TODO: Move these to `@theguild/components` and remove from here, Codegen and Hive.
4+
5+
export interface HeroContainerProps extends React.HTMLAttributes<HTMLDivElement> {}
6+
export function HeroContainer(props: HeroContainerProps) {
7+
return (
8+
<div
9+
{...props}
10+
className={cn(
11+
'relative isolate flex max-w-[90rem] flex-col items-center justify-center gap-6 overflow-hidden rounded-3xl bg-blue-400 px-4 py-6 sm:py-12 md:gap-8 lg:py-24',
12+
props.className,
13+
)}
14+
/>
15+
);
16+
}
17+
18+
export interface HeroLinksProps extends React.HTMLAttributes<HTMLDivElement> {}
19+
export function HeroLinks(props: HeroLinksProps) {
20+
return (
21+
<div
22+
{...props}
23+
className={cn(
24+
'relative z-10 flex justify-center gap-2 px-0.5 max-sm:flex-col sm:gap-4',
25+
props.className,
26+
)}
27+
/>
28+
);
29+
}
30+
31+
export interface HeroFeaturesProps extends React.HTMLAttributes<HTMLUListElement> {}
32+
export function HeroFeatures(props: HeroFeaturesProps) {
33+
return (
34+
<ul
35+
{...props}
36+
className={cn(
37+
'mx-auto flex list-none gap-x-6 gap-y-2 text-sm font-medium max-md:flex-col [&>li]:flex [&>li]:items-center [&>li]:gap-2',
38+
props.className,
39+
)}
40+
/>
41+
);
42+
}

‎website/src/components/index-page.tsx‎

Lines changed: 3 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import meshDiagram from '@/public/assets/mesh-diagram.svg';
66
import meshExampleLogo from '@/public/assets/mesh-example.png';
77
import openSourceLogo from '@/public/assets/open-source.svg';
88
import { Anchor } from '@theguild/components';
9+
import { MeshHero } from './mesh-hero';
910

1011
const ButtonLink = ({ children, ...props }: React.ComponentProps<typeof Anchor>) => {
1112
return (
@@ -20,40 +21,6 @@ const ButtonLink = ({ children, ...props }: React.ComponentProps<typeof Anchor>)
2021
);
2122
};
2223

23-
function Hero() {
24-
return (
25-
<div className="w-full">
26-
<div className="py-20 sm:py-24 lg:py-32 my-6">
27-
<h1 className="max-w-screen-md mx-auto font-extrabold text-5xl sm:text-5xl lg:text-6xl text-center bg-gradient-to-r from-cyan-400 to-sky-500 dark:from-cyan-400 dark:to-sky-600 bg-clip-text text-transparent">
28-
GraphQL Mesh
29-
</h1>
30-
<p className="max-w-screen-sm mx-auto mt-6 text-2xl text-gray-600 text-center dark:text-gray-400">
31-
The Graph of Everything
32-
</p>
33-
<p className="max-w-screen-sm mx-auto text-2xl text-gray-600 text-center dark:text-gray-400">
34-
Federated architecture for any API service
35-
</p>
36-
<div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
37-
<ButtonLink href="/v1">Documentation</ButtonLink>
38-
{/* <ButtonLink className="hidden lg:block" href="/examples">
39-
Examples
40-
</ButtonLink> */}
41-
<ButtonLink
42-
className="flex flex-row gap-2 items-center"
43-
href="https://github.com/ardatan/graphql-mesh"
44-
>
45-
<FiGithub /> GitHub
46-
</ButtonLink>
47-
{/* TODO: this button causes hydration error */}
48-
{/* <ButtonLink href="https://www.npmjs.com/package/@graphql-mesh/cli">
49-
<NPMBadge name="@graphql-mesh/cli" />
50-
</ButtonLink> */}
51-
</div>
52-
</div>
53-
</div>
54-
);
55-
}
56-
5724
const FeatureWrapperClass = `
5825
w-full py-24
5926
odd:bg-gray-50
@@ -206,9 +173,8 @@ const datasources: Array<string> = [
206173
export function IndexPage(): ReactElement {
207174
return (
208175
<div className="flex flex-col">
209-
<div className={FeatureWrapperClass}>
210-
<Hero />
211-
</div>
176+
<MeshHero className="mx-4 max-sm:mt-2 md:mx-6" />
177+
212178
<Feature
213179
title="Query anything, run anywhere."
214180
description={

‎website/src/components/install-button.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
'use client';
2+
3+
import { useState } from 'react';
4+
import { CallToAction, CheckIcon } from '@theguild/components';
5+
6+
// TODO: We'll add more package managers later.
7+
export function InstallButton() {
8+
const text = 'npm i graphql-mesh';
9+
10+
const [copied, setCopied] = useState(false);
11+
12+
return (
13+
<CallToAction
14+
variant="secondary-inverted"
15+
className="font-mono font-medium"
16+
onClick={() => {
17+
navigator.clipboard.writeText(text);
18+
setCopied(true);
19+
setTimeout(() => {
20+
setCopied(false);
21+
}, 2000);
22+
}}
23+
>
24+
{text}
25+
{copied ? <CheckIcon className="size-6" /> : <CopyIcon className="size-6" />}
26+
</CallToAction>
27+
);
28+
}
29+
30+
function CopyIcon(props: React.SVGProps<SVGSVGElement>) {
31+
return (
32+
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" {...props}>
33+
<path
34+
d="M7.9999 6.6V3.9C7.9999 3.66131 8.09472 3.43239 8.26351 3.2636C8.43229 3.09482 8.66121 3 8.8999 3H19.6999C19.9386 3 20.1675 3.09482 20.3363 3.2636C20.5051 3.43239 20.5999 3.66131 20.5999 3.9V16.5C20.5999 16.7387 20.5051 16.9676 20.3363 17.1364C20.1675 17.3052 19.9386 17.4 19.6999 17.4H16.9999V20.1C16.9999 20.5968 16.5949 21 16.0936 21H5.3062C5.18752 21.0007 5.06986 20.978 4.95999 20.9331C4.85012 20.8882 4.75021 20.822 4.666 20.7384C4.58178 20.6547 4.51492 20.5553 4.46925 20.4457C4.42359 20.3362 4.40002 20.2187 4.3999 20.1L4.4026 7.5C4.4026 7.0032 4.8076 6.6 5.3089 6.6H7.9999ZM6.2026 8.4L6.1999 19.2H15.1999V8.4H6.2026ZM9.7999 6.6H16.9999V15.6H18.7999V4.8H9.7999V6.6Z"
35+
fill="currentColor"
36+
/>
37+
</svg>
38+
);
39+
}

‎website/src/components/mesh-hero-badge.svg‎

Lines changed: 89 additions & 0 deletions
Loading

‎website/src/components/mesh-hero.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import Image from 'next/image';
2+
import {
3+
CallToAction,
4+
CheckIcon,
5+
cn,
6+
DecorationIsolation,
7+
GitHubIcon,
8+
Heading,
9+
MeshIcon,
10+
} from '@theguild/components';
11+
import { HeroContainer, HeroContainerProps, HeroFeatures, HeroLinks } from './hero';
12+
import { InstallButton } from './install-button';
13+
import meshHeroBadge from './mesh-hero-badge.svg';
14+
15+
export function MeshHero(props: HeroContainerProps) {
16+
return (
17+
<HeroContainer {...props} className={cn('mx-4 max-sm:mt-2 md:mx-6', props.className)}>
18+
<MeshDecorations />
19+
<Image priority src={meshHeroBadge} alt="" width="96" height="96" />
20+
<Heading as="h1" size="xl" className="mx-auto max-w-3xl text-balance text-center">
21+
GraphQL Mesh
22+
</Heading>
23+
<p className="mx-auto w-[512px] max-w-[80%] text-balance text-center leading-6 text-green-800">
24+
Unify your API landscape with Mesh’s federated architecture, integrating any API service
25+
into a cohesive graph.
26+
</p>
27+
<HeroFeatures>
28+
<li>
29+
<CheckIcon className="text-green-800" />
30+
Compose any API
31+
</li>
32+
<li>
33+
<CheckIcon className="text-green-800" />
34+
Granular field access
35+
</li>
36+
<li>
37+
<CheckIcon className="text-green-800" />
38+
Works with any schema registry
39+
</li>
40+
</HeroFeatures>
41+
<HeroLinks>
42+
<CallToAction variant="primary-inverted" href="/v1/getting-started">
43+
Get started
44+
</CallToAction>
45+
<InstallButton />
46+
<CallToAction
47+
variant="tertiary"
48+
href="https://github.com/dotansimha/graphql-code-generator"
49+
>
50+
<GitHubIcon className="size-6" />
51+
GitHub
52+
</CallToAction>
53+
</HeroLinks>
54+
</HeroContainer>
55+
);
56+
}
57+
58+
function MeshDecorations() {
59+
return (
60+
<DecorationIsolation className="-z-10">
61+
<MeshIcon className="absolute left-[-200px] top-[calc(50%-200px)] size-[400px] [&>g]:fill-[url(#mesh-hero-gradient)] [&>g]:stroke-white/10 [&>g]:stroke-[0.1px]" />
62+
<MeshIcon className="absolute size-[640px] bottom-[-327px] right-[-316px] [&>g]:fill-[url(#mesh-hero-gradient)] [&>g]:stroke-white/10 [&>g]:stroke-[0.1px] max-md:hidden" />
63+
<svg>
64+
<defs>
65+
<linearGradient id="mesh-hero-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
66+
<stop offset="11.66%" stopColor="rgba(255, 255, 255, 0.10)" />
67+
<stop offset="74.87%" stopColor="rgba(255, 255, 255, 0.30)" />
68+
</linearGradient>
69+
</defs>
70+
</svg>
71+
</DecorationIsolation>
72+
);
73+
}

0 commit comments

Comments
 (0)