Product preview card component

Ficou perfeito, a única coisa que notei que faltou foi o hover button:hover do botão e poderia ter o button:active pra fazer um efeito legal de clicar sabe.

Oi Ana!

Seu projeto ficou ótimo!

Sobre dicas pra melhorar, tenho algumas:

• Vi que você utilizou 2 tags pro conteúdo principal: main.card e div.produto. Nesse caso, você poderia ter utilizado apenas uma tag, e visto que é o conteúdo principal da página, a tag main faria o papel.

• Vi também que você utilizou height:90vh no main.card para posicioná-lo mais próximo do meio da página. Isso funciona, mas existem duas maneiras melhores, mais fáceis e eficientes para centralizar elementos no meio da página vertical e horizontalmente:

Você pode aplicar isso ao body:

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

ou pode aplicar isso ao elemento que você quer centralizar:

.element {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
}

• E por último, visto que o botão é um elemento clicável, adicionar um cursor: pointer; e também um hover para alterar a cor de fundo quando o mouse for passado por ele, tornaria seu projeto ainda mais intuitivo pro usuário.

Espero que as dicas ajudem!

Fora esses detalhes, você fez um belo trabalho!