# Opções de Cores para a Landing Page

Este documento lista diferentes paletas de cores que podem ser aplicadas à aplicação.

## 🎨 Paleta Atual: Azul/Indigo
**Status:** ✅ Aplicada

- **Primária:** Indigo 500-600
- **Secundária:** Blue 600-700
- **Background:** Blue 50/30
- **Estilo:** Profissional, moderno, confiável

**Cores principais:**
- Hero: `from-indigo-600 via-blue-600 to-indigo-700`
- Botões: `from-indigo-500 to-blue-600`
- Hover: `indigo-50`, `indigo-600`

---

## 🟡 Opção 1: Âmbar/Amarelo (Original)
**Status:** Disponível

- **Primária:** Amber 500-600
- **Secundária:** Amber 600-700
- **Background:** Amber 50/30
- **Estilo:** Quente, acolhedor, energético

**Cores principais:**
- Hero: `from-amber-500 via-amber-600 to-amber-700`
- Botões: `from-amber-500 to-amber-600`
- Hover: `amber-50`, `amber-600`

---

## 🟢 Opção 2: Verde/Emerald
**Status:** Disponível

- **Primária:** Emerald 500-600
- **Secundária:** Green 600-700
- **Background:** Emerald 50/30
- **Estilo:** Natural, fresco, crescimento

**Cores principais:**
- Hero: `from-emerald-500 via-emerald-600 to-emerald-700`
- Botões: `from-emerald-500 to-emerald-600`
- Hover: `emerald-50`, `emerald-600`

**Substituições necessárias:**
- `indigo` → `emerald`
- `blue` → `green`
- `indigo-50` → `emerald-50`

---

## 🟣 Opção 3: Roxo/Violet
**Status:** Disponível

- **Primária:** Purple 500-600
- **Secundária:** Violet 600-700
- **Background:** Purple 50/30
- **Estilo:** Criativo, luxuoso, inovador

**Cores principais:**
- Hero: `from-purple-500 via-purple-600 to-purple-700`
- Botões: `from-purple-500 to-purple-600`
- Hover: `purple-50`, `purple-600`

**Substituições necessárias:**
- `indigo` → `purple`
- `blue` → `violet`
- `indigo-50` → `purple-50`

---

## 🔴 Opção 4: Vermelho/Rose
**Status:** Disponível

- **Primária:** Rose 500-600
- **Secundária:** Red 600-700
- **Background:** Rose 50/30
- **Estilo:** Vibrante, apaixonado, dinâmico

**Cores principais:**
- Hero: `from-rose-500 via-rose-600 to-rose-700`
- Botões: `from-rose-500 to-rose-600`
- Hover: `rose-50`, `rose-600`

**Substituições necessárias:**
- `indigo` → `rose`
- `blue` → `red`
- `indigo-50` → `rose-50`

---

## 🔵 Opção 5: Ciano/Sky
**Status:** Disponível

- **Primária:** Sky 500-600
- **Secundária:** Cyan 600-700
- **Background:** Sky 50/30
- **Estilo:** Fresco, moderno, tecnológico

**Cores principais:**
- Hero: `from-sky-500 via-sky-600 to-sky-700`
- Botões: `from-sky-500 to-sky-600`
- Hover: `sky-50`, `sky-600`

**Substituições necessárias:**
- `indigo` → `sky`
- `blue` → `cyan`
- `indigo-50` → `sky-50`

---

## 🟠 Opção 6: Laranja/Orange
**Status:** Disponível

- **Primária:** Orange 500-600
- **Secundária:** Amber 600-700
- **Background:** Orange 50/30
- **Estilo:** Energético, entusiasta, criativo

**Cores principais:**
- Hero: `from-orange-500 via-orange-600 to-orange-700`
- Botões: `from-orange-500 to-orange-600`
- Hover: `orange-50`, `orange-600`

**Substituições necessárias:**
- `indigo` → `orange`
- `blue` → `amber`
- `indigo-50` → `orange-50`

---

## 📝 Como Aplicar uma Nova Paleta

Para aplicar uma nova paleta, você precisa substituir as cores nos seguintes arquivos:

1. **`src/pages/Landing.tsx`** - Hero section, seções, CTAs
2. **`src/components/ui/button.tsx`** - Variantes de botões
3. **`src/components/layout/Header.tsx`** - Navegação e links
4. **`src/components/ShopCard.tsx`** - Cards de barbearias
5. **`src/index.css`** - Background do body
6. **`src/components/ui/card.tsx`** - Hover states

### Buscar e Substituir:
- `indigo-500` → `[nova-cor]-500`
- `indigo-600` → `[nova-cor]-600`
- `indigo-50` → `[nova-cor]-50`
- `blue-600` → `[cor-secundaria]-600`
- `blue-50` → `[cor-secundaria]-50`

---

## 💡 Recomendações

- **Barbearias/Beleza:** Âmbar ou Laranja (quente, acolhedor)
- **Tecnologia/Profissional:** Azul/Indigo (confiável, moderno)
- **Sustentabilidade:** Verde/Emerald (natural, fresco)
- **Luxo/Criatividade:** Roxo/Violet (inovador, premium)
- **Energia/Dinamismo:** Vermelho/Rose (vibrante, apaixonado)

