Error screens

<Stack spacing='8'>

// Generic error

<Center layerStyle='section.main' h='full'>
    <Stack align='center' textAlign='center' spacing='6' maxW='sm'>
        <Image
            boxSize='32'
            src='https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-alert'
            alt='alert'
        />
        <Heading as='h1'>Something went wrong</Heading>
        <Text>(Customizable text) Please try again. If the issue persists, try visiting the <Link>Knowledge Base</Link> for assistance.</Text>
        <Stack>
            <Button variant='link'>Retry</Button>
            <Button variant='link'>Go to homepage</Button>
        </Stack>
    </Stack>
</Center>

// Bad request (400)

<Center layerStyle='section.main' h='full'>
    <Stack align='center' textAlign='center' spacing='6' maxW='sm'>
        <Image
            boxSize='32'
            src='https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-alert-circle'
            alt='alert'
        />
        <Stack>
            <Heading as='h1'>Bad request</Heading>
            <Text variant='small'>Error 400</Text>
        </Stack>
        <Text>(Customizable text) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</Text>
        <Button variant='link'>Go to homepage</Button>
    </Stack>
</Center>

// Unauthorized (401)

<Center layerStyle='section.main' h='full'>
    <Stack align='center' textAlign='center' spacing='6' maxW='sm'>
        <Image
            boxSize='32'
            src='https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-stop'
            alt='stop'
        />
        <Stack>
            <Heading as='h1'>Unauthorized</Heading>
            <Text variant='small'>Error 401</Text>
        </Stack>
        <Text>(Customizable text) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</Text>
        <Button variant='link'>Go to homepage</Button>
    </Stack>
</Center>

// Forbidden (403)

<Center layerStyle='section.main' h='full'>
    <Stack align='center' textAlign='center' spacing='6' maxW='sm'>
        <Image
            boxSize='32'
            src='https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-lock'
            alt='lock'
        />
        <Stack>
            <Heading as='h1'>Forbidden</Heading>
            <Text variant='small'>Error 403</Text>
        </Stack>
        <Text>(Customizable text) You don't have permission to access this page.</Text>
        <Button variant='link'>Go to homepage</Button>
    </Stack>
</Center>

// Page not found (404)

<Center layerStyle='section.main' h='full'>
    <Stack align='center' textAlign='center' spacing='6' maxW='sm'>
        <Image
            boxSize='32'
            src='https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-map-search'
            alt='map-search'
        />
        <Stack>
            <Heading as='h1'>Page not found</Heading>
            <Text variant='small'>Error 404</Text>
        </Stack>
        <Text>The page you are looking for cannot be found.</Text>
        <Stack>
            <Button variant='link'>Go to homepage</Button>
            <Button variant='link'>Visit knowledge base</Button>
        </Stack>
    </Stack>
</Center>

// Internal server error (500)

<Center layerStyle='section.main' h='full'>
    <Stack align='center' textAlign='center' spacing='6' maxW='sm'>
        <Image
            boxSize='32'
            src='https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-alert-circle?'
            alt='alert'
        />
        <Stack>
            <Heading as='h1'>Internal server error</Heading>
            <Text variant='small'>Error 500</Text>
        </Stack>
        <Text>(Customizable text) This page isn’t working.</Text>
        <Button variant='link'>Go to homepage</Button>
    </Stack>
</Center>

// Service unavailable (503)

<Center layerStyle='section.main' h='full'>
    <Stack align='center' textAlign='center' spacing='6' maxW='sm'>
        <Image
            boxSize='32'
            src='https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-wrench-clock'
            alt='wrench-clock'
        />
        <Stack>
            <Heading as='h1'>Service unavailable</Heading>
            <Text variant='small'>Error 503</Text>
        </Stack>
        <Text>(Customizable text) The service you requested is not available at this time.</Text>
        <Button variant='link'>Go to homepage</Button>
    </Stack>
</Center>

</Stack>