# 🛍️ Catálogo Web - Liberi Kids

Catálogo online da **Liberi Kids - Moda Infantil** com carrinho de compras integrado ao WhatsApp.

## 🎯 Funcionalidades

### ✅ Catálogo de Produtos
- **Carregamento automático** dos produtos cadastrados no sistema
- **Filtros inteligentes** por categoria, tamanho e gênero
- **Design responsivo** para desktop e mobile
- **Imagens otimizadas** com fallback para produtos sem foto

### 🛒 Carrinho de Compras
- **Adicionar/remover produtos** com animações suaves
- **Controle de quantidade** individual por item
- **Cálculo automático** do total
- **Persistência visual** do estado do carrinho

### 📱 Integração WhatsApp
- **Envio automático** do pedido para a vendedora Maiara
- **Formatação profissional** da mensagem
- **Detalhes completos** do pedido (produtos, quantidades, valores)
- **Timestamp** e informações de origem

### 🎨 Interface Moderna
- **Design gradient** com cores atrativas
- **Animações CSS** suaves e profissionais
- **Tipografia** Google Fonts (Poppins)
- **Ícones** Font Awesome
- **Layout responsivo** para todos os dispositivos

## 🚀 Como Usar

### 1. Acesso ao Catálogo
```
http://localhost:5000/catalogo
```

### 2. Configuração do WhatsApp
Edite o arquivo `script.js` e altere o número da vendedora:

```javascript
const CONFIG = {
    WHATSAPP_NUMBER: '5511999999999', // Número da Maiara
    VENDEDORA_NOME: 'Maiara'
};
```

### 3. Fluxo de Compra
1. **Navegar** pelos produtos no catálogo
2. **Filtrar** por categoria, tamanho ou gênero
3. **Adicionar** produtos ao carrinho
4. **Revisar** itens no carrinho lateral
5. **Finalizar** pedido via WhatsApp

## 📋 Estrutura de Arquivos

```
site/
├── index.html          # Página principal do catálogo
├── styles.css          # Estilos CSS responsivos
├── script.js           # JavaScript com todas as funcionalidades
└── README.md           # Esta documentação
```

## 🔧 Integração com o Sistema

### API Utilizada
- **Endpoint:** `/api/catalogo/produtos`
- **Método:** GET
- **Retorna:** Produtos em estoque formatados para o catálogo

### Dados dos Produtos
```json
{
  "id": 1,
  "nome": "Camiseta Infantil",
  "preco_venda": 29.90,
  "tamanho": "M",
  "genero": "unissex",
  "estacao": "verao",
  "categoria": "camiseta",
  "imagem": "/uploads/produto1.jpg",
  "estoque": 5,
  "descricao": "Camiseta confortável..."
}
```

## 🎨 Personalização

### Cores do Tema
- **Primária:** `#667eea` (Azul gradient)
- **Secundária:** `#764ba2` (Roxo gradient)
- **Sucesso:** `#10b981` (Verde)
- **Erro:** `#ef4444` (Vermelho)
- **WhatsApp:** `#25d366` (Verde WhatsApp)

### Responsividade
- **Desktop:** Layout completo com 3-4 colunas
- **Tablet:** Layout adaptado com 2-3 colunas
- **Mobile:** Layout single-column otimizado

## 📱 Funcionalidades do WhatsApp

### Formato da Mensagem
```
🛍️ NOVO PEDIDO - LIBERI KIDS

👋 Olá Maiara! Gostaria de fazer um pedido:

📦 ITENS DO PEDIDO:
1. Camiseta Infantil
   • Tamanho: M
   • Gênero: Unissex
   • Quantidade: 2x
   • Preço unitário: R$ 29,90
   • Subtotal: R$ 59,80

📊 RESUMO DO PEDIDO:
• Total de itens: 2
• Valor total: R$ 59,80

📱 Pedido feito através do catálogo online
🕐 07/10/2024 17:30:15

Aguardo retorno para confirmar o pedido! 😊
```

## 🔄 Sincronização Automática

### Produtos Novos
- **Automático:** Novos produtos aparecem no catálogo imediatamente
- **Estoque:** Apenas produtos com estoque > 0 são exibidos
- **Ordem:** Produtos mais recentes aparecem primeiro

### Atualizações em Tempo Real
- **Preços:** Atualizados automaticamente
- **Estoque:** Produtos sem estoque são ocultados
- **Imagens:** Carregamento otimizado com fallback

## 🛡️ Segurança e Performance

### Otimizações
- **Lazy loading** de imagens
- **Debounce** nos filtros
- **Cache** de produtos carregados
- **Compressão** de imagens

### Tratamento de Erros
- **Fallback** para produtos sem imagem
- **Retry** automático em caso de erro de rede
- **Mensagens** de erro amigáveis
- **Loading states** informativos

## 📞 Suporte

Para dúvidas ou problemas com o catálogo:
- **WhatsApp:** (11) 99999-9999
- **E-mail:** contato@liberikids.com.br

---

**Liberi Kids - Moda Infantil** 👶✨