Teste Técnico - TruckMe 🚚

Projeto de teste técnico para a empresa TruckMe.

Link para o deploy

Requisitos do teste

O objetivo é desenvolver uma página utilizando VueJS para componentização. Abaixo listo os requisitos detalhadamente:

Seção 1: HTML e CSS

• Cabeçalho e Menu de Navegação: Inclui o logotipo da TruckMe e links para "Home", "Sobre", "Serviços" e "Contato".
• Banner: Apresenta uma imagem de fundo e um texto de boas-vindas centralizado.
• Seção "Sobre Nós": Contém um parágrafo inicial sobre a TruckMe.
• Tabela de Serviços: Lista os serviços oferecidos com nome, descrição e preço.
• Formulário de Contato: Inclui campos para nome, e-mail, mensagem e um botão de envio.

Seção 2: JavaScript e Interatividade

• Botão "Leia Mais": Expande o texto na seção "Sobre Nós" ao ser clicado.
• Validação de Formulário: Garante que todos os campos sejam preenchidos corretamente, incluindo validação de e-mail.
• Mensagem de Sucesso: Exibe uma mensagem de sucesso ao enviar o formulário.
• Galeria de Imagens: Permite navegação com botões "Anterior" e "Próximo".

Seção 3: Frameworks e Componentização

Reescreva a página web utilizando Vue.js e componentize a estrutura conforme abaixo:

• HeaderComponent: Cabeçalho e menu de navegação.
• BannerComponent: Banner com imagem de fundo e texto de boas-vindas.
• AboutComponent: Seção "Sobre Nós" com botão "Leia Mais".
• ServicesTableComponent: Tabela de serviços.
• ContactFormComponent: Formulário de contato com validação.
• GalleryComponent: Galeria de imagens com navegação.

[Opcional] Seção 4: Testes e Qualidade de Código

• Testes Unitários: Escreva testes para pelo menos dois dos componentes Vue criados.
• Qualidade de Código: Utilize linters como ESLint ou Prettier para manter o código limpo e conforme padrões.

Como rodar o projeto

Para executar o projeto localmente, siga as intruções abaixo:

Instalação

1. Clone o repositório do projeto:

git clone https://github.com/jordan-cod/truckme.git
cd truckmeVueJs

2. Instale as dependências do projeto:

npm install

3. Rodando o projeto: Para iniciar o servidor de desenvolvimento, use o seguinte comando:

npm run dev

O projeto estará disponível em http://localhost:5173/.

Tecnologias Utilizadas

• Vue.js
• Typescript
• Javacript
• CSS
• HTML5
• Figma

Componentes Criados

Nome	Descrição	Localização
HeaderComponent	Responsável por exibir o cabeçalho e menu de navegação	components/layout/HeaderComponent.vue
BannerComponent	Apresenta um banner com imagem de fundo e texto centralizado	components/HomeView/BannerComponent.vue
AboutComponent	Responsável por exibir informações sobre a empresa ou seção específica com botão "Leia Mais"	components/HomeView/AboutComponent.vue
ServicesTableComponent	Responsável por exibir uma tabela de serviços oferecidos, incluindo nome, descrição e preço	components/HomeView/ServicesTableComponent.vue
ServiceCardComponent	Responsável por exibir um serviço oferecido, recebe como props: icon, title, description e value	components/HomeView/ServiceCardComponent.vue
ContactFormComponent	Responsável por exibir Formulário de contato com campos para nome, e-mail, mensagem e botão de envio	components/HomeView/ContactFormComponent.vue
GalleryComponent	Responsável por exibir uma galeria de imagens com navegação entre imagens.	components/HomeView/GalleryComponent.vue
FooterComponent	Responsável por exibir o rodapé da página	components/Layout/FooterComponent.vue