63 lines
2.3 KiB
Markdown
63 lines
2.3 KiB
Markdown
# 🏗️ 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 |
|