# GestorEasy React Theme

Sistema de tema React com a paleta de cores oficial do GestorEasy.

## 🎨 Paleta de Cores

- **Preto**: `#1c1c1c`
- **Laranja**: `#ff6a00`
- **Verde Oliva**: `#556b2f`
- **Branco**: `#ffffff`

## 🚀 Instalação

```bash
cd public/react
npm install
npm run dev
```

## 📦 Componentes Disponíveis

### ThemeProvider
Provedor de contexto para gerenciar temas:

```jsx
import { ThemeProvider } from './theme'

<ThemeProvider defaultTheme="light">
  <App />
</ThemeProvider>
```

### useTheme Hook
Hook para acessar o tema atual:

```jsx
import { useTheme } from './theme'

const { theme, currentTheme, switchTheme } = useTheme()
```

### Button
Botão com múltiplas variantes:

```jsx
import { Button } from './components'

<Button variant="primary" size="medium">
  Clique aqui
</Button>
```

**Variantes**: `primary`, `secondary`, `outline`, `ghost`
**Tamanhos**: `small`, `medium`, `large`

### Card
Card responsivo com título e subtítulo:

```jsx
import { Card } from './components'

<Card title="Título" subtitle="Subtítulo" padding="medium">
  Conteúdo do card
</Card>
```

### Header
Cabeçalho com logo e toggle de tema:

```jsx
import { Header } from './components'

<Header 
  title="Minha App"
  actions={<Button>Ação</Button>}
/>
```

### Logo
Logo que se adapta automaticamente ao tema:

```jsx
import { Logo } from './components'

<Logo size={40} />
```

## 🎭 Temas Disponíveis

- **light**: Fundo branco, texto preto, logo escura
- **dark**: Fundo preto, texto branco, logo clara  
- **gradient**: Fundo gradiente, texto branco, logo clara

## 🖼️ Assets da Logo

Coloque os arquivos da logo em:
- `public/assets/logo-dark.png` - Para fundos claros
- `public/assets/logo-light.png` - Para fundos escuros/gradiente

## 🛠️ Scripts Disponíveis

- `npm run dev` - Servidor de desenvolvimento
- `npm run build` - Build para produção
- `npm run preview` - Preview do build

## 📁 Estrutura

```
src/
├── components/          # Componentes React
│   ├── Button.jsx
│   ├── Card.jsx
│   ├── Header.jsx
│   ├── Logo.jsx
│   └── index.js
├── theme/              # Sistema de tema
│   ├── colors.js       # Paleta e gradientes
│   ├── ThemeContext.jsx # Contexto React
│   └── index.js
├── App.jsx             # Aplicação principal
└── main.jsx           # Ponto de entrada
```