Adding Text to an Image

  import { CldImage } from 'next-cloudinary';
 
  <CldImage
    width="1335"
    height="891"
    src="images/sneakers"
    sizes="100vw"
    overlays={[
      {
        position: {
          x: 160,
          y: 120,
          angle: -20,
          gravity: 'south_east',
        },
        text: {
          color: 'magenta',
          fontFamily: 'Source Sans Pro',
          fontSize: 280,
          fontWeight: 'black',
          text: 'WITH STYLE'
        }
      },
      {
        position: {
          x: 140,
          y: 140,
          angle: -20,
          gravity: 'south_east',
        },
        text: {
          color: 'white',
          fontFamily: 'Source Sans Pro',
          fontSize: 280,
          fontWeight: 'black',
          text: 'WITH STYLE'
        }
      },
    ]}
    alt="Sneakers with text With Style"
  />