Adding Text to an Image

import { CldImage } from 'next-cloudinary';
 
<CldImage
  width="1335"
  height="891"
  src="images/sneakers"
  sizes="100vw"
  overlays={[{
    width: 2670 - 20,
    crop: 'fit',
    position: {
      x: 140,
      y: 140,
      angle: -20,
      gravity: 'south_east',
    },
    text: {
      color: 'blueviolet',
      fontFamily: 'Source Sans Pro',
      fontSize: 160,
      fontWeight: 'bold',
      textDecoration: 'underline',
      letterSpacing: 14,
      text: 'Cool Beans'
    }
  }]}
  alt="Sneakers with Cool Beans"
/>