Descrição:
Atualmente, ao clicar em um produto na loja, os usuários não obtêm informações detalhadas sobre o produto selecionado. Essa funcionalidade é essencial para melhorar a experiência do usuário e aumentar a confiança dos clientes na hora de fazer uma compra. Esta issue tem como objetivo implementar a exibição de informações detalhadas do produto quando os usuários clicarem em um item específico da loja.

Tarefas:

1. Criar um novo componente Vue.js para exibir os detalhes do produto.
2. Configurar uma nova rota usando o Vue Router para mapear o componente de detalhes do produto à sua URL correspondente.
3. Implementar a navegação para os detalhes do produto quando os usuários clicarem em um item na loja.
4. Obter os dados detalhados do produto da FakeStoreAPI com base no ID do produto.
5. Exibir as informações detalhadas do produto, como nome, preço, descrição, imagem e outras informações relevantes.
6. Adicionar um botão ou link de volta à página anterior para que os usuários possam retornar facilmente à lista de produtos.

Critérios de Aceitação:

• Ao clicar em um produto na loja, os usuários devem ser redirecionados para a página de detalhes do produto.
• As informações detalhadas do produto, como nome, preço, descrição, imagem, etc., devem ser exibidas corretamente na página de detalhes.
• O componente de detalhes do produto deve ser acessível por meio de uma URL única e específica.
• A navegação de volta à lista de produtos ou à página anterior deve funcionar corretamente e sem erros.

Observações:
Antes de começar a trabalhar nesta issue, verifique se os dados necessários para exibir os detalhes do produto estão disponíveis na FakeStoreAPI ou se precisaremos fazer alguma modificação ou adaptação para obtê-los. Além disso, garanta que as informações detalhadas do produto sejam exibidas de maneira organizada e atraente, proporcionando uma experiência de usuário positiva. Teste a funcionalidade em diferentes dispositivos e navegadores para garantir a consistência e a responsividade do layout.

Descrição:
Atualmente, o projeto VueShop não possui uma rota específica para cada seção de produto, o que torna a navegação na loja menos intuitiva e organizada. Esta issue tem como objetivo implementar rotas distintas para cada seção de produto, como "Roupas", "Eletrônicos", "Acessórios", etc. Isso permitirá que os usuários acessem facilmente as seções específicas da loja, tornando a experiência do usuário mais agradável e eficiente.

Tarefas:

1. Criar componentes Vue.js para cada seção de produto (por exemplo, Roupas, Eletrônicos, Acessórios, etc.).
2. Configurar as rotas usando o Vue Router para mapear cada componente à sua rota correspondente.
3. Atualizar a barra de navegação da loja para exibir os links para as seções de produto.
4. Implementar a navegação entre as seções de produto por meio das novas rotas.
5. Garantir que os produtos sejam exibidos corretamente em suas respectivas seções.

Critérios de Aceitação:

• As seções de produto devem ter URLs distintas, como "/roupas", "/eletronicos", etc.
• Os componentes de cada seção devem ser carregados corretamente ao acessar suas respectivas URLs.
• Os links para as seções de produto devem estar visíveis na barra de navegação da loja.
• Os produtos devem ser exibidos corretamente em suas seções correspondentes.
• A navegação entre as seções de produto deve ser fluida e sem erros.

Observações:
Antes de começar a trabalhar nesta issue, certifique-se de entender completamente o funcionamento atual da aplicação e a estrutura das rotas existentes. Qualquer mudança na estrutura da rota deve ser bem pensada e testada para evitar conflitos e problemas de navegação. Além disso, verifique se os links anteriores e qualquer funcionalidade relacionada à navegação ainda funcionam conforme o esperado após a implementação das novas rotas.