Responsive product preview card w/ React, Next.js, and tailwindcss.

What are you most proud of, and what would you do differently next time?

I think I was able to get the text more spot on than I have in the past, using both leading-[XXX%] to set the CSS line-height and tracking-[XXpx] to set the CSS letter-spacing properties.

Many of these designs are setting these values in Figma so I figured I might as well learn how to do it and use them to get the text to be more spot on.

Next time I think I might use an actual Next.js Image type rather than using the image as a background in CSS.

What challenges did you encounter, and how did you overcome them?

The biggest challenge was getting the background image zoomed and positioned correctly.

I originally tried just using the CSS property values that were in Figma, although things didn't look quite right since I think the image might have been different than what I was using.

With a lot of tweaking it eventually came out pretty close.

What specific areas of your project would you like help with?

I'd like advice on any semantic html elements that I should be using which I'm not, or any different ones that are recommended.