coffee/components/products/featured-product/ProductImage.jsx

import { Box } from '@mui/system';
import Image from 'next/image';
import PropType from 'prop-types';

const ProductImage = ({ image }) => {
  return (
    <Box
      sx={{
        width: '50%',
        maxWidth: '50%',
        height: '100%',
        pl: '10%',
        zIndex: 5,
      }}
    >
      <Box
        sx={{
          position: 'relative',
          zIndex: 3,
        }}
      >
        <Image src={image} alt="profile" width={500} height={500} />
      </Box>
      <Box
        sx={{
          position: 'relative',
          zIndex: 4,
          width: 300,
          height: 300,
          top: -230,
          left: 200,
        }}
      >
        <Image
          src="/images/beans 1.png"
          alt="profile"
          width={300}
          height={300}
        />
      </Box>
    </Box>
  );
};

ProductImage.propTypes = {
  image: PropType.string,
};
export default ProductImage;