# 🏗️ Estrutura do Projeto

## 1. Visão Geral
O projeto será dividido em dois módulos principais que compartilham a mesma base tecnológica (Next.js), mas com propósitos distintos:

1.  **Site Institucional (Front-end Público)**
2.  **Painel Administrativo (Back-office Privado)**

---

## 2. Site Institucional
O objetivo é apresentar a empresa, gerar autoridade e capturar leads. Todo o conteúdo exibido aqui deve ser gerenciável via Painel Administrativo.

### Características
- **Performance:** Otimizado para SEO e carregamento rápido.
- **Design:** Segue o Design System (Laranja, Branco, Preto, Stack Sans Headline).
- **Dinâmico:** Consome dados do banco de dados para exibir textos, imagens e serviços.

---

## 3. Painel Administrativo
Ambiente seguro onde o cliente gerencia o negócio digital.

### 3.1. Gestão de Conteúdo (CMS)
O cliente terá autonomia total para editar as informações do site sem tocar em código.
- **Editor Visual:** Edição de textos, títulos e descrições.
- **Gerenciador de Mídia:** Upload e seleção de imagens para banners e galeria.
- **Catálogo:** Criar, editar e remover Serviços e Produtos.
- **Portfólio:** Adicionar, editar e remover Projetos realizados (com fotos e descrições).
- **Configurações:** Alterar dados de contato (WhatsApp, Email, Endereço) e Links Sociais.

### 3.2. Dashboard de Analytics
Módulo de inteligência para monitoramento de tráfego e resultados.

#### Funcionalidades
- **Gráficos Interativos:** Linhas e Barras para visualização de tendências.
- **Filtros de Data:**
    - Hoje
    - Últimos 7 dias
    - Últimos 30 dias
    - Período Personalizado (Date Picker)
- **Métricas Principais:**
    - Visitantes Únicos
    - Visualizações de Página (Pageviews)
    - Taxa de Rejeição (Bounce Rate)
    - Origem do Tráfego (Google, Direto, Social)
    - Dispositivos (Mobile vs Desktop)

---

## 4. Stack Tecnológica

| Camada | Tecnologia |
|--------|------------|
| **Framework** | Next.js (Última versão) |
| **Linguagem** | TypeScript |
| **Estilização** | Tailwind CSS + Remix Icons |
| **Banco de Dados** | PostgreSQL (via Docker) |
| **ORM** | Prisma |
| **Autenticação** | NextAuth.js (Apenas para Admin) |
| **Gráficos** | Recharts ou Chart.js |
| **Deploy** | Dokploy |