Desafio SóCarrão.com em parceria com Laboratoria!
Bem-vindo ao projeto SóCarrão.com! Neste repositório, você encontrará o código-fonte para uma aplicação web que permite listar e visualizar veículos disponíveis para venda. O SóCarrão.com é um portal de anúncios de veículos, onde os usuários podem encontrar carros, motos, caminhões, barcos e muito mais. Nosso foco é oferecer a melhor experiência móvel possível, garantindo que aproximadamente 90% dos nossos usuários que acessam o site através de dispositivos móveis tenham uma navegação fluida e amigável.
O objetivo deste projeto é desenvolver uma aplicação web que consuma um JSON contendo dados de aproximadamente 50 veículos da nossa base de dados e apresente-os em formato de cards. A listagem de veículos deverá respeitar o padrão de marca e modelo, além de ser responsiva e paginada. O usuário também terá a opção de escolher a forma de apresentação dos cards (horizontal ou vertical) e definir quantos cards deseja ver por página.
- Como usuário, quero visualizar as fotos do carro.
- Como usuário, quero poder pesquisar carros por marca.
- Como usuário, quero poder ver a quantidade de carros por página.
- Como usuário, quero visualizar o layout em horizontal ou vertical.
Listagem de Veículos: Os veículos disponíveis serão apresentados em formato de cards, seguindo o padrão de exibição discursiva da marca e do modelo. Quando o espaço no card for limitado, a marca será ocultada, exibindo apenas o modelo. Caso ainda falte espaço para o modelo, será utilizada uma elipse para sua representação.
Responsividade: Os cards se adaptarão aos três principais breakpoints (320px, 375px e 420px), proporcionando uma experiência agradável em dispositivos móveis.
Escolha de Apresentação: O usuário terá a opção de escolher a forma de apresentação dos cards, podendo optar entre o layout horizontal ou vertical.
Paginação: A listagem de veículos será paginada, permitindo que o usuário defina quantos cards deseja ver por página. O padrão será 5 cards por página.
Detalhes do Veículo: Cada card exibirá as seguintes informações sobre o veículo:
- Marca
- Modelo
- Versão
- Transmissão (Automática ou Manual)
- Ano
- Preço
- Quilometragem
- Botão "Simular Financiamento"
- Botão "Entrar em contato"
Tela : Card carros na vertical.
Tela : Card carros na horizontal.
Esperamos que este projeto atenda aos requisitos do SóCarrão.com e que proporcione uma ótima experiência de usuário, especialmente para aqueles que acessam o portal através de dispositivos móveis. Caso tenha alguma dúvida ou sugestão, sinta-se à vontade para entrar em contato.
Agradeço o interesse no projeto e desejo uma ótima experiência de navegação!