Estamos buscando um desenvolvedor experiente para criar um álbum interativo de produtos industriais, totalmente customizável e integrável em uma plataforma Wix através de um embed HTML. O projeto exige o uso de html, css e javascript puro, sem a dependência de frameworks externos obrigatórios, para garantir leveza e flexibilidade.
Estrutura e Funcionalidades:
- Exibição em grade responsiva: O layout deve se adaptar a diferentes tamanhos de tela, exibindo 4 colunas em desktop, 2 em tablets e 1 em dispositivos móveis.
- Detalhes do produto: Cada item na grade deve incluir uma imagem, nome, referência, código e um botão "Adicionar ao carrinho".
- Modal de visualização: Ao clicar na imagem de um produto, um modal ampliado deve ser aberto, apresentando a imagem com funcionalidade de lupa (zoom controlado pelo movimento do mouse) e uma opção clara para fechar.
- Busca de produtos: Um campo de busca "Buscar por nome ou código" deve estar disponível no topo, permitindo a filtragem em tempo real dos itens exibidos.
- Overlay do modal: O modal ampliado deve ter um fundo escurecido (overlay) e a imagem centralizada. O fechamento deve ser possível clicando fora do modal ou em um botão "X".
Dados e Renderização:
- Os dados dos produtos serão fornecidos em uma lista JavaScript (exemplo: const produtos = [{nome:"Corte Automático", referencia:"SFCT7000", codigo:"25500", imagem:"
url.jpg"}, ...]).
- A renderização dos produtos na interface deve ser dinâmica, utilizando JavaScript.
Requisitos Técnicos:
- Responsividade: O álbum deve ser totalmente responsivo e otimizado para diferentes dispositivos.
- Leveza: Implementação de lazy loading para as imagens, garantindo um carregamento rápido e eficiente.
- Capacidade: O sistema deve suportar mais de 2300 itens, com recomendação de funcionalidade "carregar mais" para otimização.
- Compatibilidade: O álbum deve ser compatível com os navegadores Chrome, Edge, Firefox e Safari.
- Sem frameworks: Preferência por soluções em html, css e javascript puro, sem a obrigatoriedade de frameworks externos.
Entrega:
- Um único arquivo .html contendo as tags <style> e <script> internas.
- Todas as imagens dos produtos devem ser referenciadas por URL.
Extras Opcionais (diferenciais):
- Implementação de categorias expansíveis (ex: Aves, Bovinos, etc.).
- Funcionalidade de paginação.
- Animações suaves na abertura e fechamento das modais.
Plazo de Entrega: No definido