message: chore: update docs to include chakra pro
diff: @@ -3,11 +3,14 @@ import {
  useColorModeValue,
  useTheme,
  SystemStyleObject,
  + Box,
  + Flex,
  + Img,
  } from "@chakra-ui/react"
  import * as React from "react"
  import loadScript from "utils/load-script"
  -function CarbonAd() {
  +export function CarbonAd() {
  const ref = React.useRef(null)
  const theme = useTheme()
  @@ -75,4 +78,36 @@ function CarbonAd() {
  return <chakra.span id="carbon-ad" ref={ref} sx={carbonAd} />
  }
  -export default CarbonAd
  +const ChakraProAd = () => (
  + <Flex
  + p="4"
  + bg={useColorModeValue("gray.50", "rgba(36, 70, 93, 0.32)")}
  + as="a"
  + href="https://pro.chakra-ui.com/components?ref=chakra-ui-ad"
  + rel="noopener sponsored"
  + target="_blank"
  + maxW="xl"
  + my="8"
  + rounded="md"
  + >
  + <Box w="xs" h="100px" bg="gray.300" mr="4">
  + <Img
  + h="full"
  + w="full"
  + src="https://res.cloudinary.com/adebayosegun/image/upload/v1613049374/Chakra%20UI/pro-ad.png"
  + />
  + </Box>
  + <Flex direction="column">
  + <Box flex="1" fontSize="sm">
  + <b>Chakra UI Pro:</b> Start your project with a growing collection of
  + beautiful, responsive UI components for your application and marketing
  + site.
  + </Box>
  + <Box fontWeight="medium" fontSize="xs" opacity={0.7}>
  + Ads via Chakra UI
  + </Box>
  + </Flex>
  + </Flex>
  +)
  +
  +export default ChakraProAd
  