import { Button, Cards } from 'nextra/components'
import { Card } from './showcase.mdx'

<div className="mb-16 mt-10 text-center">
  # Sponsors
  <br />
  <Button
    className="!px-6 hover:!no-underline"
    variant="outline"
    href="https://github.com/sponsors/dimaMachina"
    as="a"
    target="_blank"
    rel="noreferrer"
  >
    {'Become a Sponsor'}
  </Button>
</div>

<Cards num={3}>
  <Card
    title="GraphQL Hive"
    href="https://the-guild.dev/graphql/hive?utm_source=nextra.site&utm_campaign=nextra&utm_content=logolink"
  >
    <>![GraphQL Hive preview](./showcase/graphql-hive.png)</>
  </Card>
  <Card
    title="Speakeasy"
    href="https://speakeasyapi.dev/docs?utm_source=nextra.site&utm_campaign=nextra&utm_content=logolink"
  >
    <>![Speakeasy preview](./showcase/speakeasy.png)</>
  </Card>
  <Card
    title="xyflow"
    href="https://xyflow.com?utm_source=nextra.site&utm_campaign=nextra&utm_content=logolink"
  >
    <>![xyflow preview](./showcase/xyflow.jpg)</>
  </Card>
</Cards>

<style global jsx>{`
  img {
    aspect-ratio: 12/6.3;
    object-fit: cover;
  }
`}</style>
