Loja Meteora challenge alura

Oi Robson, tudo bem?

Fizemos algumas adaptações no projeto para te ajudar, você pode baixar e visualizar o código aqui. Expliquei o que mudou abaixo:

1. Organização dos Arquivos CSS

Reestruturamos os estilos separando as responsabilidades:

• responsive.css → regras específicas para responsividade
• banner.css → estilos do carrossel
• Outros arquivos → separados por componente

Isso facilita a manutenção e deixa o código mais limpo.

2. Imagens Responsivas com <picture>

Implementamos a tag <picture> no carrossel para carregar imagens diferentes conforme o tamanho da tela:

<picture>
  <source srcset="./img/Mobile/Banner.png" media="(max-width: 375px)">
  <source srcset="./img/Tablet/Banner.png" media="(max-width: 768px)">
  <img src="./img/Desktop/Banner.png" alt="banner">
</picture>

• Até 375px → carrega a imagem mobile
• Até 768px → carrega a imagem tablet
• Maior que isso → carrega a imagem desktop

Carregamento otimizado para cada dispositivo.

3. Regras CSS Fundamentais

Adicionamos boas práticas para imagens:

img {
  max-width: 100%;
  height: auto;
  display: block;
}

Isso garante que:

• Imagens não ultrapassem o container
• Proporção seja mantida
• Não surjam espaços indesejados

4. Grid Responsivo

Para o layout dos produtos, aplicamos CSS Grid:

.produtcs-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

Vantagens:

• Ajuste automático do número de colunas
• Itens nunca menores que 250px
• Espaços distribuídos de forma equilibrada

5. Media Queries Estratégicas

Criamos pontos de quebra para adaptar o layout:

@media (max-width: 768px) {
  /* Estilos para tablets e celulares */
}

@media (max-width: 375px) {
  /* Estilos específicos para celulares */
}

6. Carrossel Responsivo (Swiper)

No carrossel, ajustamos para:

• Remover margens indesejadas
• Ocupar 100% da largura
• Usar toda a viewport sem gerar barras de rolagem

Resultado Final

• Site funciona bem em qualquer dispositivo
• Imagens não distorcem
• Layout adaptável
• Carregamento otimizado

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.

Abraços e bons estudos!