Newsletter Signup using Nextjs

Hey chleighton1!

• Clean code! Impressive.
• If you're trying to implement mobile responsive site, there's no need of using states for that.
• Tailwind actually has its own viewport width device width classnames for that
• For example, if you want your component to be row on desktop and column on smaller screens, you can use "flex-col md:flex-row" since tailwind is a mobile first css framework
• Also sm: / md: / lg: / xl: are min-width not max-width
• Hope this helps

Happy Coding!

@chleighton1, great job completing the project!

I agree with @Mikoyzskie; there is no need to use the state to toggle the responsive layout. Alternatively, to tailwind classes, you may use the HTML<picture> tag to source a different image for various viewport sizes. It could be implemented with a static component as so:

import mobileImage from "../assets/images/illustration-sign-up-mobile.svg";
import desktopImage from "../assets/images/illustration-sign-up-desktop.svg";

const ResponsiveImage = () => {
  return (
    <picture>
      <source media="(min-width: 768px)" srcSet={desktopImage} />
      <img src={mobileImage} alt="" />
    </picture>
  );
};

export default ResponsiveImage;

Use this <ResponsiveImage /> element in place of the image within your <MainCard />

There is an excellent MSDN Article that goes over responsive images: Responsive Images

I hope it helps!