🏗️ 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:

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

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.

Ambiente seguro onde o cliente gerencia o negócio digital.

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.

Módulo de inteligência para monitoramento de tráfego e resultados.

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)

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