import { Button } from '@/components/Button'
import { P, SectionHeader, Small } from '@/components/Texts'
import { CirclesBackground } from '@/components/CirclesBackground'
import { Container } from '@/components/Container'
import { Layout } from '@/components/Layout'

export default function NotFound() {
  return (
    <Layout>
      <Container className="relative isolate flex h-full flex-col items-center justify-center py-20 text-center sm:py-32">
        <CirclesBackground className="absolute top-1/2 left-1/2 -z-10 mt-44 w-272.5 -translate-x-1/2 -translate-y-1/2 mask-[linear-gradient(to_bottom,white_20%,transparent_75%)] stroke-gray-300/30" />
        <Small as="p" color="primary">404</Small>
        <SectionHeader as="h1" className="mt-2">
          Page not found
        </SectionHeader>
        <P color="secondary" className="mt-2">
          Sorry, we couldn’t find the page you’re looking for.
        </P>
        <Button href="/" variant="outline" className="mt-8">
          Go back home
        </Button>
      </Container>
    </Layout>
  )
}