coffee-ts/components/products/featured-product/ProductImage.tsx

import { Box } from '@mui/system';
import Image from 'next/image';

const ProductImage = ({ image }) => {
  return (
    <Box
      sx={{
        display: 'flex',
        width: { xs: '100%', md: '50%' },
        height: '100%',
        justifyContent: { xs: 'center' },
      }}
    >
      <Image src={image} alt="profile" width={500} height={500} />
    </Box>
  );
};

export default ProductImage;