# 🎨 Como Usar a Landing Page - Guia Completo

## 📋 Índice
1. [Dados de Exemplo](#dados-de-exemplo)
2. [Edição Inline](#edição-inline)
3. [Personalização de Cores](#personalização-de-cores)
4. [Alterar Logo](#alterar-logo)
5. [Rodapé Profissional](#rodapé-profissional)
6. [Carrinho de Compras](#carrinho-de-compras)

---

## 🎯 Dados de Exemplo

### Como Criar Cliente de Exemplo "soumulher"

1. **Execute o SQL de exemplo:**
   ```sql
   -- Arquivo: DADOS_EXEMPLO_SOUMULHER.sql
   -- Execute no phpMyAdmin ou MySQL
   ```

2. **Acesse a landing page:**
   ```
   https://localhost/SouMulherAgenda/soumulher
   ```

3. **O que está incluído:**
   - ✅ Cores padrão da logo (Roxo #2E3192 e Rosa #EC008C)
   - ✅ Textos de exemplo profissionais
   - ✅ 6 serviços de exemplo (Corte, Manicure, Pedicure, etc.)
   - ✅ 6 produtos de exemplo (Shampoo, Condicionador, etc.)
   - ✅ 2 promoções ativas
   - ✅ Logo padrão do sistema
   - ✅ Informações de contato

---

## ✏️ Edição Inline

### Como Funciona

1. **Faça login como admin** da empresa
2. **Acesse a landing page** da sua empresa
   - Uma **barra de edição** aparece no topo (nas cores da sua logo!)
   - Você verá um menu de navegação e carrinho no header

3. **Passe o mouse sobre qualquer texto**
   - Aparecem **2 ícones** no canto superior esquerdo:
     - **Lápis** 🖊️ (cor roxa) - Editar texto
     - **Paleta** 🎨 (cor rosa) - Mudar cores
   - Fundo muda levemente

4. **Para EDITAR TEXTO:**
   - Clique no **ícone de lápis**
   - Aparecem botões **"Salvar"** e **"Cancelar"** ao lado
   - O texto fica editável (com borda colorida)
   - Edite o texto
   - Clique em **"Salvar"**
   - Toast aparece: "Salvo com sucesso!" ✅

5. **Para MUDAR CORES:**
   - Clique no **ícone de paleta**
   - Modal abre com 2 color pickers:
     - **Cor de Fundo** (da seção)
     - **Cor do Texto**
   - Preview em tempo real enquanto escolhe
   - Clique em **"Salvar Cores"**
   - As cores são salvas no banco
   - Toast aparece: "Cores salvas!" ✅

### Textos Editáveis

- **Hero:**
  - Título principal
  - Subtítulo
  - Botão CTA

- **Sobre:**
  - Título da seção
  - Texto sobre a empresa

- **Contato:**
  - WhatsApp
  - Telefone
  - E-mail
  - Endereço

- **Rodapé:**
  - Texto sobre a empresa
  - Copyright

---

## 🎨 Personalização de Cores

### Como Alterar as Cores

1. **Clique em "Cores"** na barra de admin (topo da página)

2. **Escolha as 4 cores:**
   - **Cor Primária (Roxo):** Botões principais, títulos
   - **Cor Secundária (Rosa):** Destaques, gradientes
   - **Cor dos Botões:** Botões de ação
   - **Cor do Rodapé:** Fundo do rodapé

3. **Preview em Tempo Real:**
   - As cores mudam **instantaneamente** na página
   - Você vê o resultado antes de salvar

4. **Clique em "Salvar Cores"**
   - Toast bonito: "Cores salvas!" ✅
   - Cores são salvas no banco

### Cores Padrão da Logo SouHub

```css
Roxo: #2E3192
Rosa: #EC008C
```

---

## 🎨 Personalização de Cores por Seção (NOVO!)

### Como Funciona

Agora você pode personalizar **cada seção individualmente**! Mude a cor de fundo e do texto de qualquer elemento editável.

### Passo a Passo

1. **Faça login como admin** e acesse a landing page
2. **Passe o mouse sobre qualquer texto** editável
3. **Clique no ícone de paleta** 🎨 (cor rosa)
4. **Escolha as cores:**
   - **Cor de Fundo:** Cor do background da seção
   - **Cor do Texto:** Cor das letras
5. **Preview em tempo real** - Veja as mudanças instantaneamente
6. **Clique em "Salvar Cores"**
7. **Pronto!** As cores ficam salvas

### Exemplos de Uso

- **Destacar promoções:** Use fundo amarelo ou verde
- **Títulos importantes:** Use cores vibrantes
- **Seções especiais:** Crie contraste visual
- **Chamadas para ação:** Destaque com cores chamativas

### Resetar Cores

Para voltar às cores originais:
- Cor de Fundo: Escolha **branco** (#ffffff)
- Cor do Texto: Escolha **preto** (#2c3e50)

---

## 🖼️ Alterar Logo

### Como Trocar a Logo

1. **Clique no ícone de câmera** 📷 sobre a logo (no header)

2. **Escolha uma opção:**

   **Opção A: Upload**
   - Clique em "Escolher arquivo"
   - Selecione sua logo (PNG, JPG, GIF, WEBP)
   - Máximo 5MB

   **Opção B: URL**
   - Cole a URL da imagem
   - Exemplo: `https://exemplo.com/logo.png`

3. **Clique em "Salvar Logo"**
   - A logo muda **instantaneamente**
   - Toast bonito: "Logo atualizada!" ✅

### Logo Padrão

```
/SouMulherAgenda/assets_admin/images/brand/logo.png
```

Todos os clientes começam com esta logo e podem personalizar.

---

## 🧭 Header com Navegação

### O que tem no Header

**Logo**
- Logo da empresa (clicável para trocar)
- Botão de câmera para alterar logo (apenas quando logado)

**Menu de Navegação**
- Sobre Nós
- Serviços
- Produtos
- Contato
- Navegação suave (scroll suave para cada seção)

**Botões de Ação**
- **WhatsApp:** Link direto para contato
- **Carrinho:** Mostra número de itens adicionados
  - Badge sincronizado em tempo real
  - Clique para abrir o carrinho

### Responsivo

- **Desktop:** Menu completo visível
- **Mobile:** Menu hambúrguer (toggle)

---

## 🦶 Rodapé Profissional

### Novo Design com 3 Colunas

**Coluna 1: Sobre**
- Nome da empresa
- Descrição editável
- Redes sociais (Instagram, Facebook, WhatsApp)

**Coluna 2: Links Rápidos**
- Sobre Nós
- Serviços
- Produtos
- Contato

**Coluna 3: Contato**
- WhatsApp (editável)
- E-mail (editável)
- Endereço (editável)

### Rodapé Inferior

- Copyright (editável)
- Powered by SouMulherAgenda

### Como Editar

- **Clique em qualquer texto** do rodapé
- Edite e salve (mesmo sistema inline)

---

## 🛒 Carrinho de Compras

### Como Funciona

1. **Carrinho Flutuante:**
   - Sempre visível no canto inferior direito
   - Mostra número de itens

2. **Adicionar Itens:**
   - **Produtos:** Clique no card → Modal abre → "Adicionar ao Carrinho"
   - **Serviços:** Clique no card → Modal abre → "Adicionar ao Carrinho"

3. **Ver Carrinho:**
   - Clique no ícone flutuante
   - Modal abre com todos os itens
   - Mostra: Foto, nome, tipo, preço

4. **Remover Itens:**
   - Clique no ícone de lixeira
   - Item é removido

5. **Finalizar Compra:**
   - Clique em "Finalizar Compra"
   - Abre WhatsApp com lista de itens
   - Cliente pode confirmar pelo WhatsApp

### Agendamento no Carrinho

- Você pode adicionar **serviços E produtos** juntos
- Finaliza tudo de uma vez
- **Pagamento:** Será integrado futuramente (estrutura pronta)

---

## 🎯 Recursos Principais

### ✅ Completamente Implementado

1. **Edição Inline Direta**
   - Clique e edite qualquer texto
   - Botões aparecem ao lado do lápis (bem posicionados!)
   - Barra de edição nas cores da logo
   - Toast bonito de sucesso

2. **Cores Personalizáveis (Gerais + Por Seção)**
   - **Cores Gerais:** Modal simplificado para toda a landing page
   - **Cores por Seção:** Personalize cada elemento individualmente
   - Preview em tempo real
   - Salva no banco por cliente
   - Ícone de paleta rosa para mudar cores

3. **Dados Padrão Automáticos**
   - Novos clientes recebem automaticamente:
     - Textos padrão profissionais
     - Cores da logo SouHub (Roxo #2E3192 e Rosa #EC008C)
     - Logo padrão do sistema
   - Pronto para personalizar do jeito que quiser!

4. **Logo Personalizável**
   - Upload ou URL
   - Troca instantânea
   - Cada cliente tem sua logo

5. **Header com Navegação Completa**
   - Menu de navegação (Sobre, Serviços, Produtos, Contato)
   - Botão de WhatsApp
   - Carrinho no header (sincronizado em tempo real)
   - Responsivo com menu mobile

6. **Rodapé Profissional**
   - 3 colunas organizadas
   - Completamente editável
   - Links funcionais

7. **Carrinho de Compras**
   - Produtos + Serviços
   - Checkout via WhatsApp
   - Badge sincronizado (header + flutuante)
   - Preparado para pagamento

8. **Modais de Detalhes**
   - Produtos: Informações completas
   - Serviços: Informações + Duração
   - Botões de ação

9. **Mensagens Bonitas**
   - Toasts modernos
   - Posição: top-end
   - Barra de progresso
   - Ícones coloridos

---

## 📱 Responsividade

- ✅ Mobile-first
- ✅ Tablets
- ✅ Desktop
- ✅ Telas grandes

---

## 🔧 Arquivos Modificados

1. **app/Views/site/landing_page.php** - Interface completa
2. **app/Controllers/Site.php** - Lógica e APIs
3. **app/Config/Routes.php** - Rotas
4. **DADOS_EXEMPLO_SOUMULHER.sql** - Dados de exemplo

---

## 🚀 Como Começar

### Opção 1: Resetar TODOS os Clientes para o Padrão

```sql
-- Execute: RESETAR_TODOS_CLIENTES_PADRAO.sql no phpMyAdmin
-- ATENÇÃO: Apaga dados personalizados de TODOS os clientes!
```

Depois acesse cada landing page:
- https://localhost/SouMulherAgenda/teste
- https://localhost/SouMulherAgenda/soumulher

✅ **Todas ficarão idênticas ao padrão do sistema!**

### Opção 2: Resetar Cliente Específico

```sql
-- Execute: RESETAR_CLIENTE_ESPECIFICO.sql
-- Edite a linha: SET @pagina_cliente = 'teste';
-- Mude para o nome do cliente que deseja resetar
```

### Passo 1: Criar Cliente de Exemplo
```sql
-- Execute DADOS_EXEMPLO_SOUMULHER.sql no phpMyAdmin
```

### Passo 2: Fazer Login
```
- Email: contato@soumulher.com.br
- Senha: (definir ao executar SQL)
```

### Passo 3: Acessar Landing Page
```
https://localhost/SouMulherAgenda/soumulher
```

### Passo 4: Personalizar
1. Passe o mouse sobre textos → Clique no lápis para editar
2. Passe o mouse sobre seções → Clique na paleta para mudar cores
3. Clique na câmera sobre a logo para mudar
4. Clique em "Cores" na barra admin para cores gerais
5. Personalize o rodapé
6. Teste o carrinho

---

## 💡 Dicas

### Textos
- ✍️ Seja objetivo e claro
- 📝 Use frases curtas
- 🎯 Foque nos benefícios

### Cores
- 🎨 Use cores da sua marca
- 🔴 Contraste suficiente para leitura
- 🌈 Máximo 3-4 cores principais

### Logo
- 📐 PNG transparente é melhor
- 📏 Tamanho recomendado: 200x60px
- 🎨 Boa resolução (mínimo 2x para telas retina)

### Fotos
- 📸 Use fotos profissionais
- 💾 Otimize o tamanho (max 5MB)
- 🖼️ Formato: JPG para fotos, PNG para gráficos

---

## ❓ FAQ

**P: Como voltar às cores padrão?**
R: Digite #2E3192 (roxo) e #EC008C (rosa) no modal de cores.

**P: Posso ter logo diferente em cada seção?**
R: Não, a logo é única para toda a landing page.

**P: O carrinho salva entre sessões?**
R: Sim, usa LocalStorage. Salva por empresa.

**P: Como ativar o pagamento?**
R: A estrutura está pronta. Integre gateway (PagSeguro, Stripe, etc) no futuro.

**P: Posso desativar o carrinho?**
R: Sim, remova os botões "Adicionar ao Carrinho" dos cards.

---

## 🎉 Pronto!

Agora você tem uma **landing page profissional, totalmente personalizável e com carrinho de compras** integrado!

Boa sorte! 🚀
