# 🎨 Como Editar seu Site - Guia Completo e Fácil

## 📋 Índice
1. [Como Acessar o Modo de Edição](#como-acessar)
2. [Editar Textos](#editar-textos)
3. [Mudar Cores de Seções](#mudar-cores-secoes)
4. [Mudar Cores Globais do Site](#cores-globais)
5. [Alterar Logo](#alterar-logo)
6. [Solução de Problemas](#problemas)

---

## 🔐 Como Acessar o Modo de Edição {#como-acessar}

1. **Faça login no sistema** usando seu usuário e senha
2. **Acesse sua landing page** através do link: `http://seusite.com/nome-da-sua-pagina`
3. **Você verá:**
   - Uma **barra colorida** no topo da página (laranja/azul)
   - Um **painel flutuante** no lado direito com botões grandes
   - Todos os elementos editáveis ficarão destacados ao passar o mouse

> ⚠️ **IMPORTANTE**: Se você não vê a barra colorida e o painel, você não está logado como administrador!

---

## ✏️ Como Editar Textos {#editar-textos}

### Método 1: Usando o Painel Flutuante
1. Clique no botão **"Editar Textos"** no painel do lado direito
2. Leia as instruções que aparecem
3. Clique em **"Entendi! Vamos lá"**
4. Todos os textos editáveis ficarão destacados com **borda azul pulsante**

### Método 2: Edição Direta
1. **Passe o mouse** sobre qualquer texto da página
2. O texto ficará com **fundo azul claro**
3. Você verá um **ícone de lápis ✏️** aparecer
4. **Clique no ícone ou direto no texto**
5. O texto ficará editável (você pode escrever)
6. **Clique no botão ✓ (checkmark)** para salvar
7. Pronto! O texto foi salvo no banco de dados

### O Que Você Pode Editar:
- ✅ Títulos (Hero, Sobre, Contato)
- ✅ Subtítulos
- ✅ Descrições
- ✅ Textos de botões
- ✅ Qualquer elemento com ícone de lápis

---

## 🎨 Como Mudar Cores de Seções {#mudar-cores-secoes}

As **seções** são as áreas grandes do site: Hero (topo), Sobre, Contato, etc.

### Passo a Passo:

1. **Ative o Modo de Cores** (opcional):
   - Clique em **"Cores de Seções"** no painel flutuante
   - Todas as seções ficarão destacadas com **borda vermelha**

2. **Passe o mouse** sobre a seção que quer editar
   - A seção ficará com uma **sombra vermelha** ao redor
   - Um **ícone de paleta 🎨** aparecerá no canto superior direito

3. **Clique no ícone 🎨**

4. **Na janela que abrir:**

   **a) Escolha o Tipo de Fundo:**
   - Clique no botão grande **"⬛ Cor Sólida"** para uma cor única
   - OU clique em **"🌈 Gradiente"** para mistura de cores

   **b) Escolha as Cores:**
   - **Cor de Fundo**: Clique no quadrado colorido e escolha a cor
   - **Segunda Cor** (só aparece se escolheu gradiente): Escolha a segunda cor
   - **Direção do Gradiente** (só aparece se escolheu gradiente):
     - ➡️ Horizontal
     - ⬇️ Vertical
     - ↘️ Diagonal (várias opções)

   **c) Escolha a Cor do Texto:**
   - Clique no campo "Cor do Texto"
   - Escolha uma cor que contraste bem com o fundo

   **d) Visualize em Tempo Real:**
   - A área de **"Visualização"** mostra como ficará
   - A própria seção também muda em tempo real

5. **Clique em "💾 Salvar Cores"**

6. **Pronto!** Suas cores foram salvas

### Dicas de Cores:
- ✨ Use gradientes para um visual moderno
- 🌓 Fundo escuro + texto claro = boa leitura
- 🌞 Fundo claro + texto escuro = boa leitura
- ⚠️ Evite fundo vermelho + texto verde (dificulta leitura)

---

## 🌈 Como Mudar Cores Globais do Site {#cores-globais}

As **cores globais** afetam todo o site: botões, menus, links, etc.

### Passo a Passo:

1. **Clique em "Cores do Site"** no painel flutuante
   - OU clique em **"Cores Globais"** na barra superior

2. **Na janela que abrir, você verá 9 tipos de cores:**

   **1. Cor Primária** - Cor principal do site (menus, links)
   **2. Cor Secundária** - Cor de destaque
   **3. Cor de Botões** - Cor dos botões de ação
   **4. Cor de Seleção** - Cor ao selecionar textos
   **5. Cor do Rodapé** - Fundo do rodapé
   **6. Cor do Texto** - Texto principal do site
   **7. Cor do Texto do Rodapé** - Texto do rodapé
   **8. Cor de Produtos** - Cards de produtos
   **9. Cor de Serviços** - Cards de serviços

3. **Para cada cor você pode:**
   - Escolher **cor sólida** (uma cor única)
   - OU escolher **gradiente** (mistura de duas cores)

4. **Marque a caixa "Usar Gradiente"** se quiser gradiente

5. **Escolha as cores** clicando nos campos coloridos

6. **Veja o preview** em tempo real

7. **Clique em "💾 Salvar"**

### Como Ficam os Botões:
- Se você escolher **gradiente** para "Cor de Botões"
- TODOS os botões do site terão aquele gradiente
- Exemplo: Botões de "Agendar", "Adicionar ao Carrinho", etc.

---

## 🖼️ Como Alterar Logo {#alterar-logo}

1. **Passe o mouse** sobre o logo no topo do site
2. Aparecerá um **ícone de câmera 📷**
3. **Clique no ícone**
4. **Escolha uma imagem** do seu computador
5. Formatos aceitos: JPG, PNG, GIF
6. Tamanho recomendado: 200x60 pixels
7. **Aguarde o upload**
8. Pronto! Seu logo foi alterado

---

## 🛠️ Solução de Problemas {#problemas}

### ❌ Não vejo a barra de edição nem o painel
**Solução:** Você não está logado como administrador
- Faça login no sistema primeiro
- Acesse: `http://seusite.com/dash`
- Use seu usuário e senha
- Depois acesse sua landing page

### ❌ Cliquei no texto mas não consigo editar
**Solução:**
- Certifique-se de clicar no ícone de lápis ✏️ OU direto no texto
- Aguarde o texto ficar com borda tracejada
- Se não funcionar, recarregue a página (F5)

### ❌ As cores não estão salvando
**Solução:**
- Verifique sua conexão com a internet
- Aguarde a mensagem de "✓ Salvo com sucesso!"
- Recarregue a página para ver as cores aplicadas
- Se o problema persistir, limpe o cache do navegador

### ❌ O ícone de paleta 🎨 não aparece
**Solução:**
- Passe o mouse DEVAGAR sobre a seção
- Aguarde 0,5 segundo
- O ícone deve aparecer no canto superior direito
- Se não aparecer, use o botão "Cores de Seções" do painel

### ❌ O gradiente não está aparecendo
**Solução:**
- Certifique-se de clicar no botão "🌈 Gradiente"
- O botão deve ficar com borda azul/colorida
- Preencha AMBAS as cores (Primeira e Segunda)
- Escolha uma direção do gradiente
- Salve e recarregue a página

### ❌ O site ficou todo branco ou com cores estranhas
**Solução:**
- Não entre em pânico! 😊
- Acesse o painel de cores globais
- Clique em "Restaurar Padrão" (se houver)
- OU redefina as cores manualmente:
  - Cor Primária: #2E3192 (azul)
  - Cor Secundária: #EC008C (rosa)
  - Cor de Botões: #EC008C (rosa)
  - Cor do Texto: #2c3e50 (cinza escuro)

---

## 📱 Suporte

Se você ainda tiver dúvidas ou problemas:

1. **Recarregue a página** (tecla F5) - resolve 80% dos problemas
2. **Limpe o cache** do navegador
3. **Tente em outro navegador** (Chrome, Firefox, Edge)
4. **Verifique se está logado** como administrador
5. **Entre em contato** com o suporte técnico

---

## ✅ Checklist Rápido

Antes de sair do site, verifique:

- [ ] Todos os textos estão corretos?
- [ ] As cores estão bonitas e legíveis?
- [ ] Os botões estão com as cores certas?
- [ ] O logo está aparecendo?
- [ ] Testei em celular? (responsivo)
- [ ] Todas as mudanças foram salvas?

---

## 🎉 Pronto!

Agora você sabe editar seu site como um profissional!

**Lembre-se:**
- 🎨 Passe o mouse = ver ícones
- ✏️ Lápis = editar texto
- 🎨 Paleta = mudar cores
- 💾 Sempre salve suas mudanças!

**Divirta-se personalizando seu site!** 🚀
