diff --git a/website/src/components/hero.tsx b/website/src/components/hero.tsx new file mode 100644 index 0000000000000..e5d06d7268394 --- /dev/null +++ b/website/src/components/hero.tsx @@ -0,0 +1,42 @@ +import { cn } from '@theguild/components'; + +// TODO: Move these to `@theguild/components` and remove from here, Codegen and Hive. + +export interface HeroContainerProps extends React.HTMLAttributes {} +export function HeroContainer(props: HeroContainerProps) { + return ( +
+ ); +} + +export interface HeroLinksProps extends React.HTMLAttributes {} +export function HeroLinks(props: HeroLinksProps) { + return ( +
+ ); +} + +export interface HeroFeaturesProps extends React.HTMLAttributes {} +export function HeroFeatures(props: HeroFeaturesProps) { + return ( +
    li]:flex [&>li]:items-center [&>li]:gap-2', + props.className, + )} + /> + ); +} diff --git a/website/src/components/index-page.tsx b/website/src/components/index-page.tsx index ce9c3a491aa2d..9735764001c00 100644 --- a/website/src/components/index-page.tsx +++ b/website/src/components/index-page.tsx @@ -6,6 +6,7 @@ import meshDiagram from '@/public/assets/mesh-diagram.svg'; import meshExampleLogo from '@/public/assets/mesh-example.png'; import openSourceLogo from '@/public/assets/open-source.svg'; import { Anchor } from '@theguild/components'; +import { MeshHero } from './mesh-hero'; const ButtonLink = ({ children, ...props }: React.ComponentProps) => { return ( @@ -20,40 +21,6 @@ const ButtonLink = ({ children, ...props }: React.ComponentProps) ); }; -function Hero() { - return ( -
    -
    -

    - GraphQL Mesh -

    -

    - The Graph of Everything -

    -

    - Federated architecture for any API service -

    -
    - Documentation - {/* - Examples - */} - - GitHub - - {/* TODO: this button causes hydration error */} - {/* - - */} -
    -
    -
    - ); -} - const FeatureWrapperClass = ` w-full py-24 odd:bg-gray-50 @@ -206,9 +173,8 @@ const datasources: Array = [ export function IndexPage(): ReactElement { return (
    -
    - -
    + + { + navigator.clipboard.writeText(text); + setCopied(true); + setTimeout(() => { + setCopied(false); + }, 2000); + }} + > + {text} + {copied ? : } + + ); +} + +function CopyIcon(props: React.SVGProps) { + return ( + + + + ); +} diff --git a/website/src/components/mesh-hero-badge.svg b/website/src/components/mesh-hero-badge.svg new file mode 100644 index 0000000000000..62e9ed3bce992 --- /dev/null +++ b/website/src/components/mesh-hero-badge.svg @@ -0,0 +1,89 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/src/components/mesh-hero.tsx b/website/src/components/mesh-hero.tsx new file mode 100644 index 0000000000000..d8f26036b5455 --- /dev/null +++ b/website/src/components/mesh-hero.tsx @@ -0,0 +1,73 @@ +import Image from 'next/image'; +import { + CallToAction, + CheckIcon, + cn, + DecorationIsolation, + GitHubIcon, + Heading, + MeshIcon, +} from '@theguild/components'; +import { HeroContainer, HeroContainerProps, HeroFeatures, HeroLinks } from './hero'; +import { InstallButton } from './install-button'; +import meshHeroBadge from './mesh-hero-badge.svg'; + +export function MeshHero(props: HeroContainerProps) { + return ( + + + + + GraphQL Mesh + +

    + Unify your API landscape with Mesh’s federated architecture, integrating any API service + into a cohesive graph. +

    + +
  • + + Compose any API +
    • +
  • + + Granular field access +
    • +
  • + + Works with any schema registry +
    • +     + + + Get started + + + + + GitHub + + +     + ); +} + +function MeshDecorations() { + return ( + + + + + + + + + + + + + ); +}