`<Image/>` components on Homepage should be easier to edit

[mssiegel]

Our Homepage uses <Image/> components to display a screenshot of the Students Chat and also a screenshot of the Teachers Page. However, our implementation of the <Image/> components on our Homepage isn't easily editable. Some examples:

• I wanted to give a red border to the Teachers Page screenshot but couldn't figure out how to easily do that with css. So instead I manually edited the image to have a red border.
• On my localhost, the Students Chat screenshot disappeared from view on mobile when I deleted the caption beneath it. The screenshot's display should not rely on the caption.

We should make sure we're correctly implementing the <Image/> component according to its documentation.

[zachlankton]

This is less an issue with our implementation and more a problem with Next.js Image component... here are several links detailing the issue and various solutions.

https://www.peterlunch.com/snippets/next-image-styling https://github.com/vercel/next.js/discussions/18312 https://upmostly.com/next-js/how-to-style-images-in-next-js https://meje.dev/blog/styling-nextjs-image-component https://stackoverflow.com/questions/65527407/next-image-not-taking-class-properties

Options in summary:

• Don't use the Next/Image Component and use a regular <img />
• Wrap the Image Component and target the next/image wrappers using nested selectors
• Upgrade to Next.js 12.2 and use /next/future/image
• Upgrade/Migrate to Next.js 13

[mssiegel]

Thanks @zachlankton!! Those links and summary are very well detailed! The option to upgrade/migrate to Next.js 13 is the best option in my eyes. Its always good to upgrade to the latest versions of the frameworks we use so we become better prepared for any future changes. Documentation for the Next.js 13 Image component: https://nextjs.org/blog/next-13#nextimage