text: import React from "react"
  import PropTypes from "prop-types"
  import { Flex, Box } from "@chakra-ui/react"
  
  export default function Hero({
    backgroundImage,
    bgPosition,
    properties,
    children,
  }) {
    return (
      <Box
        width="100%"
        height="60vh"
        backgroundImage={backgroundImage}
        backgroundPosition={bgPosition}
        overflowY="hidden"
        {...properties}
      >
        <Flex
          width="100%"
          height="100%"
          px="2rem"
          pt="160px"
          pb="1rem"
          direction="column"
          justifyContent="space-around"
          alignItems="center"
          bg="rgba(0,0,0,0.4)"
        >
          {children}
        </Flex>
      </Box>
    )
  }
  
  Hero.propTypes = {
    backgroundImage: PropTypes.any,
    properties: PropTypes.any,
    bgPosition: PropTypes.string,
    children: PropTypes.node,
  }
  