Order summary with Vite + TS + Flexbox + React

Hi Guilherme, I took some time to look at your solution and you did a great job!

Also I have some tips for improving your code:

• add main tag and wrap the card for Accessibility
• to make it look as close to the design as possible add background-size: contain to #main-section id
• try to add hover effect and a little transition on the element with hover effect
• instead of using px try to use relative units of measurement -> read here

Overall you did well :)

Hope this help and happy coding!

Hi, nicely done.

One thing if I may, you should add a 'background-size: contain;' or 'background-size: cover;' in ./src/App.css file under #main-section { }

#main-section { height: 100vh; background-image: url('./assets/pattern-background-mobile.svg'); background-repeat: no-repeat; background-size: cover;' background-color: var(--pale-blue); display: flex; align-items: center; justify-content: center; }