refactor: redesign planos interface with design system patterns

- Create CreatePlanModal component with Headless UI Dialog
- Implement dark mode support throughout plans UI
- Update plans/page.tsx with professional card layout
- Update plans/[id]/page.tsx with consistent styling
- Add proper spacing, typography, and color consistency
- Implement smooth animations and transitions
- Add success/error message feedback
- Improve form UX with better input styling

.claude/settings.local.json

@@ -8,7 +8,9 @@
       "Bash(docker logs:*)",
       "Bash(docker exec:*)",
       "Bash(npx tsc:*)",
-      "Bash(docker-compose restart:*)"
+      "Bash(docker-compose restart:*)",
+      "Bash(npm install:*)",
+      "Bash(docker-compose build:*)"
     ]
   }
 }

1. docs/planos-roadmap.md

@@ -0,0 +1,173 @@
+# Sistema de Planos - Roadmap
+
+## Status: Estrutura Frontend Criada ✅
+
+### O que foi criado no Frontend:
+1. **Menu Item** adicionado em `/superadmin/layout.tsx`
+   - Nova rota: `/superadmin/plans`
+
+2. **Página Principal de Planos** (`/superadmin/plans/page.tsx`)
+   - Lista todos os planos em grid
+   - Mostra: nome, descrição, faixa de usuários, preços, features, diferenciais
+   - Botão "Novo Plano"
+   - Botões Editar e Deletar
+   - Status visual (ativo/inativo)
+
+3. **Página de Edição de Plano** (`/superadmin/plans/[id]/page.tsx`)
+   - Formulário completo para editar:
+     - Informações básicas (nome, slug, descrição)
+     - Faixa de usuários (min/max)
+     - Preços (mensal/anual)
+     - Armazenamento (GB)
+     - Status (ativo/inativo)
+   - TODO: Editor de Features e Diferenciais
+
+---
+
+## Próximos Passos - Backend
+
+### 1. Modelo de Dados (Domain)
+```go
+// internal/domain/plan.go
+type Plan struct {
+    ID              string        `json:"id"`
+    Name            string        `json:"name"`
+    Slug            string        `json:"slug"`
+    Description     string        `json:"description"`
+    MinUsers        int           `json:"min_users"`
+    MaxUsers        int           `json:"max_users"` // -1 = unlimited
+    MonthlyPrice    *decimal.Decimal `json:"monthly_price"`
+    AnnualPrice     *decimal.Decimal `json:"annual_price"`
+    Features        pq.StringArray   `json:"features"` // CRM, ERP, etc
+    Differentiators pq.StringArray   `json:"differentiators"`
+    StorageGB       int           `json:"storage_gb"`
+    IsActive        bool          `json:"is_active"`
+    CreatedAt       time.Time     `json:"created_at"`
+    UpdatedAt       time.Time     `json:"updated_at"`
+}
+
+type Subscription struct {
+    ID            string    `json:"id"`
+    AgencyID      string    `json:"agency_id"`
+    PlanID        string    `json:"plan_id"`
+    BillingType   string    `json:"billing_type"` // monthly/annual
+    CurrentUsers  int       `json:"current_users"`
+    Status        string    `json:"status"` // active/suspended/cancelled
+    StartDate     time.Time `json:"start_date"`
+    RenewalDate   time.Time `json:"renewal_date"`
+    CreatedAt     time.Time `json:"created_at"`
+    UpdatedAt     time.Time `json:"updated_at"`
+}
+```
+
+### 2. Migrations
+- `001_create_plans_table.sql`
+- `002_create_agency_subscriptions_table.sql`
+- `003_add_plan_id_to_agencies.sql`
+
+### 3. Repository
+- `PlanRepository` (CRUD)
+- `SubscriptionRepository` (CRUD)
+
+### 4. Service
+- `PlanService` (validações, lógica)
+- `SubscriptionService` (validar limite de usuários, etc)
+
+### 5. Handlers (API)
+```
+GET    /api/admin/plans           - Listar planos
+POST   /api/admin/plans           - Criar plano
+GET    /api/admin/plans/:id       - Obter plano
+PUT    /api/admin/plans/:id       - Atualizar plano
+DELETE /api/admin/plans/:id       - Deletar plano
+
+GET    /api/admin/subscriptions   - Listar subscrições
+```
+
+### 6. Seeds
+- Seed dos 4 planos padrão (Ignição, Órbita, Cosmos, Enterprise)
+
+---
+
+## Dados Padrão para Seed
+
+```json
+[
+  {
+    "name": "Ignição",
+    "slug": "ignition",
+    "description": "Ideal para pequenas agências iniciantes",
+    "min_users": 1,
+    "max_users": 30,
+    "monthly_price": 199.99,
+    "annual_price": 1919.90,
+    "features": ["CRM", "ERP", "Projetos", "Helpdesk", "Pagamentos", "Contratos", "Documentos"],
+    "differentiators": [],
+    "storage_gb": 1,
+    "is_active": true
+  },
+  {
+    "name": "Órbita",
+    "slug": "orbit",
+    "description": "Para agências em crescimento",
+    "min_users": 31,
+    "max_users": 100,
+    "monthly_price": 399.99,
+    "annual_price": 3839.90,
+    "features": ["CRM", "ERP", "Projetos", "Helpdesk", "Pagamentos", "Contratos", "Documentos"],
+    "differentiators": ["Suporte prioritário"],
+    "storage_gb": 1,
+    "is_active": true
+  },
+  {
+    "name": "Cosmos",
+    "slug": "cosmos",
+    "description": "Para agências consolidadas",
+    "min_users": 101,
+    "max_users": 300,
+    "monthly_price": 799.99,
+    "annual_price": 7679.90,
+    "features": ["CRM", "ERP", "Projetos", "Helpdesk", "Pagamentos", "Contratos", "Documentos"],
+    "differentiators": ["Gerente de conta dedicado", "API integrações"],
+    "storage_gb": 1,
+    "is_active": true
+  },
+  {
+    "name": "Enterprise",
+    "slug": "enterprise",
+    "description": "Solução customizada para grandes agências",
+    "min_users": 301,
+    "max_users": -1,
+    "monthly_price": null,
+    "annual_price": null,
+    "features": ["CRM", "ERP", "Projetos", "Helpdesk", "Pagamentos", "Contratos", "Documentos"],
+    "differentiators": ["Armazenamento customizado", "Treinamento personalizado"],
+    "storage_gb": 1,
+    "is_active": true
+  }
+]
+```
+
+---
+
+## Integração com Agências
+
+Quando agência se cadastra:
+1. Seleciona um plano
+2. Sistema cria `Subscription` com status `active` ou `pending_payment`
+3. Agência herda limite de usuários do plano
+4. Ao criar usuário: validar se não ultrapassou limite
+
+---
+
+## Features Futuras
+- [ ] Editor de Features e Diferenciais (drag-drop no frontend)
+- [ ] Planos promocionais (duplicar existente, editar preço)
+- [ ] Validações de limite de usuários por plano
+- [ ] Dashboard com uso atual vs limite
+- [ ] Alertas quando próximo do limite
+- [ ] Integração com Stripe/PagSeguro
+
+---
+
+**Pronto para começar?**

README.md

@@ -4,27 +4,60 @@ Plataforma composta por serviços de autenticação, painel administrativo (supe
 
 ## Visão geral
 - **Objetivo**: permitir que superadministradores cadastrem e gerenciem agências (tenants) enquanto o site institucional apresenta informações públicas da empresa.
-- **Stack**: Go (backend), Next.js 14 (dashboard e site), PostgreSQL, Traefik, Docker.
+- **Stack**: Go (backend), Next.js 16 (dashboard e site), PostgreSQL, Traefik, Docker.
-- **Status**: fluxo de autenticação e gestão de agências concluído; ambiente dockerizável pronto para uso local.
+- **Status**: Sistema multi-tenant completo com segurança cross-tenant validada, branding dinâmico e file serving via API.
 
 ## Componentes principais
 - `backend/`: API Go com serviços de autenticação, operadores e CRUD de agências (endpoints `/api/admin/agencies` e `/api/admin/agencies/{id}`).
+- `front-end-agency/`: Painel Next.js para agências - branding dinâmico, upload de logos, gestão de perfil e autenticação tenant-aware.
 - `front-end-dash.aggios.app/`: painel Next.js – login do superadmin, listagem de agências, exibição detalhada e exclusão definitiva.
 - `frontend-aggios.app/`: site institucional Next.js com suporte a temas claro/escuro e compartilhamento de tokens de design.
 - `backend/internal/data/postgres/`: scripts de inicialização do banco (estrutura base de tenants e usuários).
 - `traefik/`: reverse proxy e certificados automatizados.
 
 ## Funcionalidades entregues
-- **Redesign da Interface (v1.2)**: Adoção de design "Flat" (sem sombras), focado em bordas e limpeza visual em todas as rotas principais (Login, Dashboard, Agências, Cadastro).
+
-- **Gestão Avançada de Agências**:
+### **v1.4 - Segurança Multi-tenant e File Serving (13/12/2025)**
-  - Listagem com filtros robustos: Busca textual, Status (Ativo/Inativo) e Filtros de Data (Presets de 7/15/30 dias e intervalo personalizado).
+- **🔒 Segurança Cross-Tenant Crítica**:
-  - Detalhamento completo da agência com visualização de logo, cores e dados cadastrais.
+  - Validação de tenant_id em endpoints de login (bloqueio de cross-tenant authentication)
-  - Edição e Exclusão de agências.
+  - Validação de tenant em todas rotas protegidas via middleware
-- **Login de Superadmin**: Autenticação via JWT com restrição de rotas protegidas.
+  - Mensagens de erro genéricas (sem exposição de arquitetura multi-tenant)
-- **Cadastro de Agências**: Criação de tenant e usuário administrador atrelado.
+  - Logs detalhados de tentativas de acesso cross-tenant bloqueadas
-- **Proxy Interno**: Camada de API no Next.js (`app/api/...`) garantindo chamadas autenticadas e seguras ao backend Go.
+  
-- **Site Institucional**: Suporte a dark mode, componentes compartilhados e tokens de design centralizados.
+- **📁 File Serving via API**:
-- **Documentação**: Atualizada em `1. docs/` com fluxos, arquiteturas e changelog.
+  - Nova rota `/api/files/{bucket}/{path}` para servir arquivos do MinIO através do backend Go
+  - Eliminação de dependência de DNS (`files.localhost`) - arquivos servidos via `api.localhost`
+  - Headers de cache otimizados (Cache-Control: public, max-age=31536000)
+  - CORS e content-type corretos automaticamente
+  
+- **🎨 Melhorias de UX**:
+  - Mensagens de erro humanizadas no formulário de login (sem pop-ups/toasts)
+  - Erros inline com ícones e cores apropriadas
+  - Feedback em tempo real ao digitar (limpeza automática de erros)
+  - Mensagens específicas para cada tipo de erro (401, 403, 404, 429, 5xx)
+  
+- **🔧 Melhorias Técnicas**:
+  - Next.js middleware injetando headers `X-Tenant-Subdomain` para routing correto
+  - TenantDetector middleware prioriza headers customizados sobre Host
+  - Upload de logos retorna URLs via API ao invés de MinIO direto
+  - Configuração MinIO com variáveis de ambiente `MINIO_SERVER_URL` e `MINIO_BROWSER_REDIRECT_URL`
+
+### **v1.3 - Branding Dinâmico e Favicon (12/12/2025)**
+- **Branding Multi-tenant**: Logo, favicon e cores personalizadas por agência
+- **Favicon Dinâmico**: Atualização em tempo real via localStorage e SSR metadata
+- **Upload de Arquivos**: Sistema de upload para MinIO com bucket público
+- **Rate Limiting**: 1000 requisições/minuto por IP
+
+### **v1.2 - Redesign Interface Flat**
+- Adoção de design "Flat" (sem sombras), focado em bordas e limpeza visual
+- Gestão avançada de agências com filtros robustos
+- Detalhamento completo com visualização de branding
+
+### **v1.1 - Fundação Multi-tenant**
+- Login de Superadmin com JWT
+- Cadastro de Agências
+- Proxy Interno Next.js para chamadas autenticadas
+- Site Institucional com dark mode
 
 ## Executando o projeto
 1. **Pré-requisitos**: Docker Desktop e Node.js 20+ (para utilitários opcionais).
@@ -34,15 +67,35 @@ Plataforma composta por serviços de autenticação, painel administrativo (supe
 	docker-compose up --build
 	```
 4. **Hosts locais**:
-	- Painel: `https://dash.localhost`
+	- Painel SuperAdmin: `http://dash.localhost`
-	- Site: `https://aggios.app.localhost`
+	- Painel Agência: `http://{agencia}.localhost` (ex: `http://idealpages.localhost`)
-	- API: `https://api.localhost`
+	- Site: `http://aggios.app.localhost`
+	- API: `http://api.localhost`
+	- Console MinIO: `http://minio.localhost` (admin: minioadmin / M1n10_S3cur3_P@ss_2025!)
 5. **Credenciais padrão**: ver `backend/internal/data/postgres/init-db.sql` para usuário superadmin seed.
 
+## Segurança
+- ✅ **Cross-Tenant Authentication**: Usuários não podem fazer login em agências que não pertencem
+- ✅ **Tenant Isolation**: Todas rotas protegidas validam tenant_id no JWT vs tenant_id do contexto
+- ✅ **Erro Handling**: Mensagens genéricas que não expõem arquitetura interna
+- ✅ **JWT Validation**: Tokens validados em cada requisição autenticada
+- ✅ **Rate Limiting**: 1000 req/min por IP para prevenir brute force
+
 ## Estrutura de diretórios (resumo)
 ```
 backend/                            API Go (config, domínio, handlers, serviços)
+  internal/
+    api/
+      handlers/
+        files.go                    🆕 Handler para servir arquivos via API
+        auth.go                     🔒 Validação cross-tenant no login
+      middleware/
+        auth.go                     🔒 Validação tenant em rotas protegidas
+        tenant.go                   🔧 Detecção de tenant via headers
 backend/internal/data/postgres/     Scripts SQL de seed
+front-end-agency/                   🆕 Dashboard Next.js para Agências
+  app/login/page.tsx               🎨 Login com mensagens humanizadas
+  middleware.ts                    🔧 Injeção de headers tenant
 front-end-dash.aggios.app/          Dashboard Next.js Superadmin
 frontend-aggios.app/                Site institucional Next.js
 traefik/                            Regras de roteamento e TLS
@@ -51,15 +104,21 @@ traefik/                            Regras de roteamento e TLS
 
 ## Testes e validação
 - Consultar `1. docs/TESTING_GUIDE.md` para cenários funcionais.
-- Requisições de verificação recomendadas:
+- **Testes de Segurança**:
-  - `curl http://api.localhost/api/admin/agencies` (lista) – requer token JWT válido.
+  - ✅ Tentativa de login cross-tenant retorna 403
-  - `curl http://dash.localhost/api/admin/agencies` (proxy Next) – usado pelo painel.
+  - ✅ JWT de uma agência não funciona em outra agência
-  - Fluxo manual via painel `dash.localhost/superadmin`.
+  - ✅ Logs registram tentativas de acesso cross-tenant
+- **Testes de File Serving**:
+  - ✅ Upload de logo gera URL via API (`http://api.localhost/api/files/...`)
+  - ✅ Imagens carregam sem problemas de CORS ou DNS
+  - ✅ Cache headers aplicados corretamente
 
 ## Próximos passos sugeridos
-- Implementar soft delete e trilhas de auditoria para exclusão de agências.
+- Implementar soft delete e trilhas de auditoria para exclusão de agências
-- Expandir testes automatizados (unitários e e2e) focados no fluxo do dashboard.
+- Adicionar validação de permissões por tenant em rotas de files (se necessário)
-- Disponibilizar pipeline CI/CD com validações de lint/build.
+- Expandir testes automatizados (unitários e e2e) focados no fluxo do dashboard
+- Disponibilizar pipeline CI/CD com validações de lint/build
 
 ## Repositório
 - Principal: https://git.stackbyte.cloud/erik/aggios.app.git
+- Branch: dev-1.4 (Segurança Multi-tenant + File Serving)

backend/cmd/server/main.go

@@ -56,22 +56,27 @@ func main() {
 	companyRepo := repository.NewCompanyRepository(db)
 	signupTemplateRepo := repository.NewSignupTemplateRepository(db)
 	agencyTemplateRepo := repository.NewAgencyTemplateRepository(db)
+	planRepo := repository.NewPlanRepository(db)
+	subscriptionRepo := repository.NewSubscriptionRepository(db)
 
 	// Initialize services
 	authService := service.NewAuthService(userRepo, tenantRepo, cfg)
 	agencyService := service.NewAgencyService(userRepo, tenantRepo, cfg)
 	tenantService := service.NewTenantService(tenantRepo)
 	companyService := service.NewCompanyService(companyRepo)
+	planService := service.NewPlanService(planRepo, subscriptionRepo)
 
 	// Initialize handlers
 	healthHandler := handlers.NewHealthHandler()
 	authHandler := handlers.NewAuthHandler(authService)
-	agencyProfileHandler := handlers.NewAgencyHandler(tenantRepo)
+	agencyProfileHandler := handlers.NewAgencyHandler(tenantRepo, cfg)
 	agencyHandler := handlers.NewAgencyRegistrationHandler(agencyService, cfg)
 	tenantHandler := handlers.NewTenantHandler(tenantService)
 	companyHandler := handlers.NewCompanyHandler(companyService)
+	planHandler := handlers.NewPlanHandler(planService)
 	signupTemplateHandler := handlers.NewSignupTemplateHandler(signupTemplateRepo, userRepo, tenantRepo, agencyService)
 	agencyTemplateHandler := handlers.NewAgencyTemplateHandler(agencyTemplateRepo, agencyService, userRepo, tenantRepo)
+	filesHandler := handlers.NewFilesHandler(cfg)
 	
 	// Initialize upload handler
 	uploadHandler, err := handlers.NewUploadHandler(cfg)
@@ -111,11 +116,16 @@ func main() {
 	router.HandleFunc("/api/signup-templates/slug/{slug}", signupTemplateHandler.GetTemplateBySlug).Methods("GET")
 	router.HandleFunc("/api/signup/register", signupTemplateHandler.PublicRegister).Methods("POST")
 	
+	// Public plans (for signup flow)
+	router.HandleFunc("/api/plans", planHandler.ListActivePlans).Methods("GET")
+	router.HandleFunc("/api/plans/{id}", planHandler.GetActivePlan).Methods("GET")
+	
 	// File upload (public for signup, will also work with auth)
 	router.HandleFunc("/api/upload", uploadHandler.Upload).Methods("POST")
 
 	// Tenant check (public)
 	router.HandleFunc("/api/tenant/check", tenantHandler.CheckExists).Methods("GET")
+	router.HandleFunc("/api/tenant/config", tenantHandler.GetPublicConfig).Methods("GET")
 
 	// Hash generator (dev only - remove in production)
 	router.HandleFunc("/api/hash", handlers.GenerateHash).Methods("POST")
@@ -154,6 +164,9 @@ func main() {
 		}
 	}))).Methods("GET", "PUT", "PATCH", "DELETE")
 
+	// SUPERADMIN: Plans management
+	planHandler.RegisterRoutes(router)
+
 	// ADMIN_AGENCIA: Client registration
 	router.Handle("/api/agencies/clients/register", authMiddleware(http.HandlerFunc(agencyHandler.RegisterClient))).Methods("POST")
 
@@ -170,6 +183,9 @@ func main() {
 	// Agency logo upload (protected)
 	router.Handle("/api/agency/logo", authMiddleware(http.HandlerFunc(agencyProfileHandler.UploadLogo))).Methods("POST")
 
+	// File serving route (public - serves files from MinIO through API)
+	router.PathPrefix("/api/files/{bucket}/").HandlerFunc(filesHandler.ServeFile).Methods("GET")
+
 	// Company routes (protected)
 	router.Handle("/api/companies", authMiddleware(http.HandlerFunc(companyHandler.List))).Methods("GET")
 	router.Handle("/api/companies/create", authMiddleware(http.HandlerFunc(companyHandler.Create))).Methods("POST")

backend/internal/api/handlers/agency_logo.go

@@ -9,6 +9,7 @@ import (
 	"log"
 	"net/http"
 	"path/filepath"
+	"strings"
 	"time"
 
 	"aggios-app/backend/internal/api/middleware"
@@ -172,20 +173,28 @@ func (h *AgencyHandler) UploadLogo(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	// Generate public URL
+	// Generate public URL through API (not direct MinIO access)
-	logoURL := fmt.Sprintf("http://localhost:9000/%s/%s", bucketName, filename)
+	// This is more secure and doesn't require DNS configuration
+	logoURL := fmt.Sprintf("http://api.localhost/api/files/%s/%s", bucketName, filename)
 	
 	log.Printf("Logo uploaded successfully: %s", logoURL)
 
 	// Delete old logo file from MinIO if exists
 	if currentLogoURL != "" && currentLogoURL != "https://via.placeholder.com/150" {
 		// Extract object key from URL
-		// Example: http://localhost:9000/aggios-logos/tenants/uuid/logo-123.png -> tenants/uuid/logo-123.png
+		// Example: http://api.localhost/api/files/aggios-logos/tenants/uuid/logo-123.png -> tenants/uuid/logo-123.png
 		oldFilename := ""
 		if len(currentLogoURL) > 0 {
-			// Split by bucket name
+			// Split by /api/files/{bucket}/ to get the file path
-			if idx := len("http://localhost:9000/aggios-logos/"); idx < len(currentLogoURL) {
+			apiPrefix := fmt.Sprintf("http://api.localhost/api/files/%s/", bucketName)
-				oldFilename = currentLogoURL[idx:]
+			if strings.HasPrefix(currentLogoURL, apiPrefix) {
+				oldFilename = strings.TrimPrefix(currentLogoURL, apiPrefix)
+			} else {
+				// Fallback for old MinIO URLs
+				baseURL := fmt.Sprintf("%s/%s/", h.config.Minio.PublicURL, bucketName)
+				if len(currentLogoURL) > len(baseURL) {
+					oldFilename = currentLogoURL[len(baseURL):]
+				}
 			}
 		}
 		
@@ -202,6 +211,8 @@ func (h *AgencyHandler) UploadLogo(w http.ResponseWriter, r *http.Request) {
 
 	// Update tenant record in database
 	var err2 error
+	log.Printf("Updating database: tenant_id=%s, logo_type=%s, logo_url=%s", tenantID, logoType, logoURL)
+	
 	if logoType == "horizontal" {
 		_, err2 = h.tenantRepo.DB().Exec("UPDATE tenants SET logo_horizontal_url = $1, updated_at = NOW() WHERE id = $2", logoURL, tenantID)
 	} else {
@@ -209,11 +220,13 @@ func (h *AgencyHandler) UploadLogo(w http.ResponseWriter, r *http.Request) {
 	}
 
 	if err2 != nil {
-		log.Printf("Failed to update logo: %v", err2)
+		log.Printf("ERROR: Failed to update logo in database: %v", err2)
-		http.Error(w, "Failed to update database", http.StatusInternalServerError)
+		http.Error(w, fmt.Sprintf("Failed to update database: %v", err2), http.StatusInternalServerError)
 		return
 	}
 	
+	log.Printf("SUCCESS: Logo saved to database successfully!")
+
 	// Return success response
 	response := map[string]string{
 		"logo_url": logoURL,

backend/internal/api/handlers/agency_profile.go

@@ -6,6 +6,7 @@ import (
 	"net/http"
 
 	"aggios-app/backend/internal/api/middleware"
+	"aggios-app/backend/internal/config"
 	"aggios-app/backend/internal/repository"
 
 	"github.com/google/uuid"
@@ -13,11 +14,13 @@ import (
 
 type AgencyHandler struct {
 	tenantRepo *repository.TenantRepository
+	config     *config.Config
 }
 
-func NewAgencyHandler(tenantRepo *repository.TenantRepository) *AgencyHandler {
+func NewAgencyHandler(tenantRepo *repository.TenantRepository, cfg *config.Config) *AgencyHandler {
 	return &AgencyHandler{
 		tenantRepo: tenantRepo,
+		config:     cfg,
 	}
 }
 

backend/internal/api/handlers/auth.go

@@ -7,6 +7,7 @@ import (
 	"net/http"
 	"strings"
 
+	"aggios-app/backend/internal/api/middleware"
 	"aggios-app/backend/internal/domain"
 	"aggios-app/backend/internal/service"
 )
@@ -96,6 +97,23 @@ func (h *AuthHandler) Login(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	// VALIDAÇÃO DE SEGURANÇA: Verificar se o tenant do usuário corresponde ao subdomain acessado
+	tenantIDFromContext := ""
+	if ctxTenantID := r.Context().Value(middleware.TenantIDKey); ctxTenantID != nil {
+		tenantIDFromContext, _ = ctxTenantID.(string)
+	}
+
+	// Se foi detectado um tenant no contexto (não é superadmin ou site institucional)
+	if tenantIDFromContext != "" && response.User.TenantID != nil {
+		userTenantID := response.User.TenantID.String()
+		if userTenantID != tenantIDFromContext {
+			log.Printf("❌ LOGIN BLOCKED: User from tenant %s tried to login in tenant %s subdomain",  userTenantID, tenantIDFromContext)
+			http.Error(w, "Forbidden: Invalid credentials for this tenant", http.StatusForbidden)
+			return
+		}
+		log.Printf("✅ TENANT LOGIN VALIDATION PASSED: %s", userTenantID)
+	}
+
 	log.Printf("✅ Login successful for %s, role=%s", response.User.Email, response.User.Role)
 	w.Header().Set("Content-Type", "application/json")
 	json.NewEncoder(w).Encode(response)

backend/internal/api/handlers/files.go

@@ -0,0 +1,104 @@
+package handlers
+
+import (
+	"context"
+	"fmt"
+	"io"
+	"log"
+	"net/http"
+	"strings"
+
+	"aggios-app/backend/internal/config"
+
+	"github.com/gorilla/mux"
+	"github.com/minio/minio-go/v7"
+	"github.com/minio/minio-go/v7/pkg/credentials"
+)
+
+type FilesHandler struct {
+	config *config.Config
+}
+
+func NewFilesHandler(cfg *config.Config) *FilesHandler {
+	return &FilesHandler{
+		config: cfg,
+	}
+}
+
+// ServeFile serves files from MinIO through the API
+func (h *FilesHandler) ServeFile(w http.ResponseWriter, r *http.Request) {
+	vars := mux.Vars(r)
+	bucket := vars["bucket"]
+	
+	// Get the file path (everything after /api/files/{bucket}/)
+	prefix := fmt.Sprintf("/api/files/%s/", bucket)
+	filePath := strings.TrimPrefix(r.URL.Path, prefix)
+	
+	if filePath == "" {
+		http.Error(w, "File path is required", http.StatusBadRequest)
+		return
+	}
+
+	// Whitelist de buckets públicos permitidos
+	allowedBuckets := map[string]bool{
+		"aggios-logos": true,
+	}
+	if !allowedBuckets[bucket] {
+		log.Printf("🚫 Access denied to bucket: %s", bucket)
+		http.Error(w, "Access denied", http.StatusForbidden)
+		return
+	}
+
+	// Proteção contra path traversal
+	if strings.Contains(filePath, "..") {
+		log.Printf("🚫 Path traversal attempt detected: %s", filePath)
+		http.Error(w, "Invalid path", http.StatusBadRequest)
+		return
+	}
+
+	log.Printf("📁 Serving file: bucket=%s, path=%s", bucket, filePath)
+
+	// Initialize MinIO client
+	minioClient, err := minio.New("aggios-minio:9000", &minio.Options{
+		Creds:  credentials.NewStaticV4("minioadmin", "M1n10_S3cur3_P@ss_2025!", ""),
+		Secure: false,
+	})
+	if err != nil {
+		log.Printf("Failed to create MinIO client: %v", err)
+		http.Error(w, "Storage service unavailable", http.StatusInternalServerError)
+		return
+	}
+
+	// Get object from MinIO
+	ctx := context.Background()
+	object, err := minioClient.GetObject(ctx, bucket, filePath, minio.GetObjectOptions{})
+	if err != nil {
+		log.Printf("Failed to get object: %v", err)
+		http.Error(w, "File not found", http.StatusNotFound)
+		return
+	}
+	defer object.Close()
+
+	// Get object info for content type and size
+	objInfo, err := object.Stat()
+	if err != nil {
+		log.Printf("Failed to stat object: %v", err)
+		http.Error(w, "File not found", http.StatusNotFound)
+		return
+	}
+
+	// Set appropriate headers
+	w.Header().Set("Content-Type", objInfo.ContentType)
+	w.Header().Set("Content-Length", fmt.Sprintf("%d", objInfo.Size))
+	w.Header().Set("Cache-Control", "public, max-age=31536000") // Cache for 1 year
+	w.Header().Set("Access-Control-Allow-Origin", "*")
+
+	// Copy file content to response
+	_, err = io.Copy(w, object)
+	if err != nil {
+		log.Printf("Failed to copy object content: %v", err)
+		return
+	}
+
+	log.Printf("✅ File served successfully: %s", filePath)
+}

backend/internal/api/handlers/plan.go

@@ -0,0 +1,268 @@
+package handlers
+
+import (
+	"encoding/json"
+	"log"
+	"net/http"
+	"strconv"
+
+	"aggios-app/backend/internal/domain"
+	"aggios-app/backend/internal/service"
+
+	"github.com/google/uuid"
+	"github.com/gorilla/mux"
+)
+
+// PlanHandler handles plan-related endpoints
+type PlanHandler struct {
+	planService *service.PlanService
+}
+
+// NewPlanHandler creates a new plan handler
+func NewPlanHandler(planService *service.PlanService) *PlanHandler {
+	return &PlanHandler{
+		planService: planService,
+	}
+}
+
+// RegisterRoutes registers plan routes
+func (h *PlanHandler) RegisterRoutes(r *mux.Router) {
+	// Note: Route protection is done in main.go with authMiddleware wrapper
+	r.HandleFunc("/api/admin/plans", h.CreatePlan).Methods(http.MethodPost)
+	r.HandleFunc("/api/admin/plans", h.ListPlans).Methods(http.MethodGet)
+	r.HandleFunc("/api/admin/plans/{id}", h.GetPlan).Methods(http.MethodGet)
+	r.HandleFunc("/api/admin/plans/{id}", h.UpdatePlan).Methods(http.MethodPut)
+	r.HandleFunc("/api/admin/plans/{id}", h.DeletePlan).Methods(http.MethodDelete)
+
+	// Public routes (for signup flow)
+	r.HandleFunc("/api/plans", h.ListActivePlans).Methods(http.MethodGet)
+	r.HandleFunc("/api/plans/{id}", h.GetActivePlan).Methods(http.MethodGet)
+}
+
+// CreatePlan creates a new plan (admin only)
+func (h *PlanHandler) CreatePlan(w http.ResponseWriter, r *http.Request) {
+	log.Printf("📋 CREATE PLAN - Method: %s", r.Method)
+
+	var req domain.CreatePlanRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		log.Printf("❌ Invalid request body: %v", err)
+		http.Error(w, "Invalid request body", http.StatusBadRequest)
+		return
+	}
+
+	plan, err := h.planService.CreatePlan(&req)
+	if err != nil {
+		log.Printf("❌ Error creating plan: %v", err)
+		switch err {
+		case service.ErrPlanSlugTaken:
+			http.Error(w, err.Error(), http.StatusConflict)
+		case service.ErrInvalidUserRange:
+			http.Error(w, err.Error(), http.StatusBadRequest)
+		default:
+			http.Error(w, "Internal server error", http.StatusInternalServerError)
+		}
+		return
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	w.WriteHeader(http.StatusCreated)
+	json.NewEncoder(w).Encode(map[string]interface{}{
+		"message": "Plan created successfully",
+		"plan":    plan,
+	})
+	log.Printf("✅ Plan created: %s", plan.ID)
+}
+
+// GetPlan retrieves a plan by ID (admin only)
+func (h *PlanHandler) GetPlan(w http.ResponseWriter, r *http.Request) {
+	vars := mux.Vars(r)
+	idStr := vars["id"]
+
+	id, err := uuid.Parse(idStr)
+	if err != nil {
+		http.Error(w, "Invalid plan ID", http.StatusBadRequest)
+		return
+	}
+
+	plan, err := h.planService.GetPlan(id)
+	if err != nil {
+		if err == service.ErrPlanNotFound {
+			http.Error(w, "Plan not found", http.StatusNotFound)
+		} else {
+			http.Error(w, "Internal server error", http.StatusInternalServerError)
+		}
+		return
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(map[string]interface{}{
+		"plan": plan,
+	})
+}
+
+// ListPlans retrieves all plans (admin only)
+func (h *PlanHandler) ListPlans(w http.ResponseWriter, r *http.Request) {
+	plans, err := h.planService.ListPlans()
+	if err != nil {
+		log.Printf("❌ Error listing plans: %v", err)
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+		return
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(map[string]interface{}{
+		"plans": plans,
+	})
+	log.Printf("✅ Listed %d plans", len(plans))
+}
+
+// ListActivePlans retrieves all active plans (public)
+func (h *PlanHandler) ListActivePlans(w http.ResponseWriter, r *http.Request) {
+	plans, err := h.planService.ListActivePlans()
+	if err != nil {
+		log.Printf("❌ Error listing active plans: %v", err)
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+		return
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(map[string]interface{}{
+		"plans": plans,
+	})
+}
+
+// GetActivePlan retrieves an active plan by ID (public)
+func (h *PlanHandler) GetActivePlan(w http.ResponseWriter, r *http.Request) {
+	vars := mux.Vars(r)
+	idStr := vars["id"]
+
+	id, err := uuid.Parse(idStr)
+	if err != nil {
+		http.Error(w, "Invalid plan ID", http.StatusBadRequest)
+		return
+	}
+
+	plan, err := h.planService.GetPlan(id)
+	if err != nil {
+		if err == service.ErrPlanNotFound {
+			http.Error(w, "Plan not found", http.StatusNotFound)
+		} else {
+			http.Error(w, "Internal server error", http.StatusInternalServerError)
+		}
+		return
+	}
+
+	// Check if plan is active
+	if !plan.IsActive {
+		http.Error(w, "Plan not available", http.StatusNotFound)
+		return
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(map[string]interface{}{
+		"plan": plan,
+	})
+}
+
+// UpdatePlan updates a plan (admin only)
+func (h *PlanHandler) UpdatePlan(w http.ResponseWriter, r *http.Request) {
+	log.Printf("📋 UPDATE PLAN - Method: %s", r.Method)
+
+	vars := mux.Vars(r)
+	idStr := vars["id"]
+
+	id, err := uuid.Parse(idStr)
+	if err != nil {
+		http.Error(w, "Invalid plan ID", http.StatusBadRequest)
+		return
+	}
+
+	var req domain.UpdatePlanRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		log.Printf("❌ Invalid request body: %v", err)
+		http.Error(w, "Invalid request body", http.StatusBadRequest)
+		return
+	}
+
+	plan, err := h.planService.UpdatePlan(id, &req)
+	if err != nil {
+		log.Printf("❌ Error updating plan: %v", err)
+		switch err {
+		case service.ErrPlanNotFound:
+			http.Error(w, "Plan not found", http.StatusNotFound)
+		case service.ErrPlanSlugTaken:
+			http.Error(w, err.Error(), http.StatusConflict)
+		case service.ErrInvalidUserRange:
+			http.Error(w, err.Error(), http.StatusBadRequest)
+		default:
+			http.Error(w, "Internal server error", http.StatusInternalServerError)
+		}
+		return
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(map[string]interface{}{
+		"message": "Plan updated successfully",
+		"plan":    plan,
+	})
+	log.Printf("✅ Plan updated: %s", plan.ID)
+}
+
+// DeletePlan deletes a plan (admin only)
+func (h *PlanHandler) DeletePlan(w http.ResponseWriter, r *http.Request) {
+	log.Printf("📋 DELETE PLAN - Method: %s", r.Method)
+
+	vars := mux.Vars(r)
+	idStr := vars["id"]
+
+	id, err := uuid.Parse(idStr)
+	if err != nil {
+		http.Error(w, "Invalid plan ID", http.StatusBadRequest)
+		return
+	}
+
+	err = h.planService.DeletePlan(id)
+	if err != nil {
+		log.Printf("❌ Error deleting plan: %v", err)
+		switch err {
+		case service.ErrPlanNotFound:
+			http.Error(w, "Plan not found", http.StatusNotFound)
+		default:
+			http.Error(w, "Internal server error", http.StatusInternalServerError)
+		}
+		return
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	w.WriteHeader(http.StatusOK)
+	json.NewEncoder(w).Encode(map[string]interface{}{
+		"message": "Plan deleted successfully",
+	})
+	log.Printf("✅ Plan deleted: %s", idStr)
+}
+
+// GetPlanByUserCount returns a plan for a given user count
+func (h *PlanHandler) GetPlanByUserCount(w http.ResponseWriter, r *http.Request) {
+	userCountStr := r.URL.Query().Get("user_count")
+	if userCountStr == "" {
+		http.Error(w, "user_count parameter required", http.StatusBadRequest)
+		return
+	}
+
+	userCount, err := strconv.Atoi(userCountStr)
+	if err != nil {
+		http.Error(w, "Invalid user_count", http.StatusBadRequest)
+		return
+	}
+
+	plan, err := h.planService.GetPlanByUserCount(userCount)
+	if err != nil {
+		http.Error(w, "No plan available for this user count", http.StatusNotFound)
+		return
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(map[string]interface{}{
+		"plan": plan,
+	})
+}

backend/internal/api/handlers/tenant.go

@@ -2,6 +2,7 @@ package handlers
 
 import (
 	"encoding/json"
+	"log"
 	"net/http"
 
 	"aggios-app/backend/internal/domain"
@@ -67,3 +68,41 @@ func (h *TenantHandler) CheckExists(w http.ResponseWriter, r *http.Request) {
 	w.Header().Set("Content-Type", "application/json; charset=utf-8")
 	json.NewEncoder(w).Encode(map[string]string{"status": "ok"})
 }
+
+// GetPublicConfig returns public branding info for a tenant by subdomain
+func (h *TenantHandler) GetPublicConfig(w http.ResponseWriter, r *http.Request) {
+	if r.Method != http.MethodGet {
+		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	subdomain := r.URL.Query().Get("subdomain")
+	if subdomain == "" {
+		http.Error(w, "subdomain is required", http.StatusBadRequest)
+		return
+	}
+
+	tenant, err := h.tenantService.GetBySubdomain(subdomain)
+	if err != nil {
+		if err == service.ErrTenantNotFound {
+			http.NotFound(w, r)
+			return
+		}
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+		return
+	}
+
+	// Return only public info
+	response := map[string]string{
+		"name":                tenant.Name,
+		"primary_color":       tenant.PrimaryColor,
+		"secondary_color":     tenant.SecondaryColor,
+		"logo_url":            tenant.LogoURL,
+		"logo_horizontal_url": tenant.LogoHorizontalURL,
+	}
+
+	log.Printf("📤 Returning tenant config for %s: logo_url=%s", subdomain, tenant.LogoURL)
+
+	w.Header().Set("Content-Type", "application/json; charset=utf-8")
+	json.NewEncoder(w).Encode(response)
+}

backend/internal/api/middleware/auth.go

@@ -2,6 +2,7 @@ package middleware
 
 import (
 	"context"
+	"log"
 	"net/http"
 	"strings"
 
@@ -59,13 +60,40 @@ func Auth(cfg *config.Config) func(http.Handler) http.Handler {
 		}
 
 		// tenant_id pode ser nil para SuperAdmin
-		var tenantID string
+		var tenantIDFromJWT string
 		if tenantIDClaim, ok := claims["tenant_id"]; ok && tenantIDClaim != nil {
-			tenantID, _ = tenantIDClaim.(string)
+			tenantIDFromJWT, _ = tenantIDClaim.(string)
 		}
 
-		ctx := context.WithValue(r.Context(), UserIDKey, userID)
+		// VALIDAÇÃO DE SEGURANÇA: Verificar se o tenant_id do JWT corresponde ao subdomínio acessado
-		ctx = context.WithValue(ctx, TenantIDKey, tenantID)
+		// Pegar o tenant_id do contexto (detectado pelo TenantDetector middleware ANTES deste)
+		tenantIDFromContext := ""
+		if ctxTenantID := r.Context().Value(TenantIDKey); ctxTenantID != nil {
+			tenantIDFromContext, _ = ctxTenantID.(string)
+		}
+
+		log.Printf("🔐 AUTH VALIDATION: JWT tenant=%s | Context tenant=%s | Path=%s", 
+			tenantIDFromJWT, tenantIDFromContext, r.RequestURI)
+
+		// Se o usuário não é SuperAdmin (tem tenant_id) e está acessando uma agência (subdomain detectado)
+		if tenantIDFromJWT != "" && tenantIDFromContext != "" {
+			// Validar se o tenant_id do JWT corresponde ao tenant detectado
+			if tenantIDFromJWT != tenantIDFromContext {
+				log.Printf("❌ CROSS-TENANT ACCESS BLOCKED: User from tenant %s tried to access tenant %s", 
+					tenantIDFromJWT, tenantIDFromContext)
+				http.Error(w, "Forbidden: You don't have access to this tenant", http.StatusForbidden)
+				return
+			}
+			log.Printf("✅ TENANT VALIDATION PASSED: %s", tenantIDFromJWT)
+		}
+
+		// Preservar TODOS os valores do contexto anterior (incluindo o tenantID do TenantDetector)
+		ctx := r.Context()
+		ctx = context.WithValue(ctx, UserIDKey, userID)
+		// Só sobrescrever o TenantIDKey se vier do JWT (para não perder o do TenantDetector)
+		if tenantIDFromJWT != "" {
+			ctx = context.WithValue(ctx, TenantIDKey, tenantIDFromJWT)
+		}
 		next.ServeHTTP(w, r.WithContext(ctx))
 	})
 }

backend/internal/api/middleware/tenant.go

@@ -16,15 +16,25 @@ func TenantDetector(tenantRepo *repository.TenantRepository) func(http.Handler)
 	return func(next http.Handler) http.Handler {
 		return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 			// Get host from X-Forwarded-Host header (set by Next.js proxy) or Host header
-			host := r.Header.Get("X-Forwarded-Host")
+			// Priority order: X-Tenant-Subdomain (set by Next.js middleware) > X-Forwarded-Host > X-Original-Host > Host
+			tenantSubdomain := r.Header.Get("X-Tenant-Subdomain")
+			
+			var host string
+			if tenantSubdomain != "" {
+				// Use direct subdomain from Next.js middleware
+				host = tenantSubdomain
+				log.Printf("TenantDetector: using X-Tenant-Subdomain = %s", tenantSubdomain)
+			} else {
+				// Fallback to extracting from host headers
+				host = r.Header.Get("X-Forwarded-Host")
 				if host == "" {
 					host = r.Header.Get("X-Original-Host")
 				}
 				if host == "" {
 					host = r.Host
 				}
-			
 				log.Printf("TenantDetector: host = %s (from headers), path = %s", host, r.RequestURI)
+			}
 			
 			// Extract subdomain
 			// Examples:
@@ -33,9 +43,19 @@ func TenantDetector(tenantRepo *repository.TenantRepository) func(http.Handler)
 			// - dash.localhost -> dash (master admin)
 			// - localhost -> (institutional site)
 			
-			parts := strings.Split(host, ".")
 			var subdomain string
 			
+			// If we got the subdomain directly from X-Tenant-Subdomain, use it
+			if tenantSubdomain != "" {
+				subdomain = tenantSubdomain
+				// Remove port if present
+				if strings.Contains(subdomain, ":") {
+					subdomain = strings.Split(subdomain, ":")[0]
+				}
+			} else {
+				// Extract from host
+				parts := strings.Split(host, ".")
+				
 				if len(parts) >= 2 {
 					// Has subdomain
 					subdomain = parts[0]
@@ -45,6 +65,7 @@ func TenantDetector(tenantRepo *repository.TenantRepository) func(http.Handler)
 						subdomain = strings.Split(subdomain, ":")[0]
 					}
 				}
+			}
 			
 			log.Printf("TenantDetector: extracted subdomain = %s", subdomain)
 			

backend/internal/config/config.go

@@ -49,6 +49,7 @@ type SecurityConfig struct {
 // MinioConfig holds MinIO configuration
 type MinioConfig struct {
 	Endpoint     string
+	PublicURL    string // URL pública para acesso ao MinIO (para gerar links)
 	RootUser     string
 	RootPassword string
 	UseSSL       bool
@@ -64,9 +65,9 @@ func Load() *Config {
 	}
 
 	// Rate limit: more lenient in dev, strict in prod
-	maxAttempts := 30
+	maxAttempts := 1000 // Aumentado drasticamente para evitar 429 durante debug
 	if env == "production" {
-		maxAttempts = 5
+		maxAttempts = 100 // Mais restritivo em produção
 	}
 
 	return &Config{
@@ -102,6 +103,7 @@ func Load() *Config {
 		},
 		Minio: MinioConfig{
 			Endpoint:     getEnvOrDefault("MINIO_ENDPOINT", "minio:9000"),
+			PublicURL:    getEnvOrDefault("MINIO_PUBLIC_URL", "http://localhost:9000"),
 			RootUser:     getEnvOrDefault("MINIO_ROOT_USER", "minioadmin"),
 			RootPassword: getEnvOrDefault("MINIO_ROOT_PASSWORD", "changeme"),
 			UseSSL:       getEnvOrDefault("MINIO_USE_SSL", "false") == "true",

backend/internal/domain/plan.go

@@ -0,0 +1,78 @@
+package domain
+
+import (
+	"time"
+
+	"github.com/google/uuid"
+	"github.com/lib/pq"
+	"github.com/shopspring/decimal"
+)
+
+// Plan represents a subscription plan in the system
+type Plan struct {
+	ID              uuid.UUID           `json:"id" db:"id"`
+	Name            string              `json:"name" db:"name"`
+	Slug            string              `json:"slug" db:"slug"`
+	Description     string              `json:"description" db:"description"`
+	MinUsers        int                 `json:"min_users" db:"min_users"`
+	MaxUsers        int                 `json:"max_users" db:"max_users"` // -1 means unlimited
+	MonthlyPrice    *decimal.Decimal    `json:"monthly_price" db:"monthly_price"`
+	AnnualPrice     *decimal.Decimal    `json:"annual_price" db:"annual_price"`
+	Features        pq.StringArray      `json:"features" db:"features"`
+	Differentiators pq.StringArray      `json:"differentiators" db:"differentiators"`
+	StorageGB       int                 `json:"storage_gb" db:"storage_gb"`
+	IsActive        bool                `json:"is_active" db:"is_active"`
+	CreatedAt       time.Time           `json:"created_at" db:"created_at"`
+	UpdatedAt       time.Time           `json:"updated_at" db:"updated_at"`
+}
+
+// CreatePlanRequest represents the request to create a new plan
+type CreatePlanRequest struct {
+	Name            string     `json:"name" validate:"required"`
+	Slug            string     `json:"slug" validate:"required"`
+	Description     string     `json:"description"`
+	MinUsers        int        `json:"min_users" validate:"required,min=1"`
+	MaxUsers        int        `json:"max_users" validate:"required"` // -1 for unlimited
+	MonthlyPrice    *float64   `json:"monthly_price"`
+	AnnualPrice     *float64   `json:"annual_price"`
+	Features        []string   `json:"features"`
+	Differentiators []string   `json:"differentiators"`
+	StorageGB       int        `json:"storage_gb" validate:"required,min=1"`
+	IsActive        bool       `json:"is_active"`
+}
+
+// UpdatePlanRequest represents the request to update a plan
+type UpdatePlanRequest struct {
+	Name            *string    `json:"name"`
+	Slug            *string    `json:"slug"`
+	Description     *string    `json:"description"`
+	MinUsers        *int       `json:"min_users"`
+	MaxUsers        *int       `json:"max_users"`
+	MonthlyPrice    *float64   `json:"monthly_price"`
+	AnnualPrice     *float64   `json:"annual_price"`
+	Features        []string   `json:"features"`
+	Differentiators []string   `json:"differentiators"`
+	StorageGB       *int       `json:"storage_gb"`
+	IsActive        *bool      `json:"is_active"`
+}
+
+// Subscription represents an agency's subscription to a plan
+type Subscription struct {
+	ID          uuid.UUID `json:"id" db:"id"`
+	AgencyID    uuid.UUID `json:"agency_id" db:"agency_id"`
+	PlanID      uuid.UUID `json:"plan_id" db:"plan_id"`
+	BillingType string    `json:"billing_type" db:"billing_type"` // monthly or annual
+	CurrentUsers int      `json:"current_users" db:"current_users"`
+	Status      string    `json:"status" db:"status"` // active, suspended, cancelled
+	StartDate   time.Time `json:"start_date" db:"start_date"`
+	RenewalDate time.Time `json:"renewal_date" db:"renewal_date"`
+	CreatedAt   time.Time `json:"created_at" db:"created_at"`
+	UpdatedAt   time.Time `json:"updated_at" db:"updated_at"`
+}
+
+// CreateSubscriptionRequest represents the request to create a subscription
+type CreateSubscriptionRequest struct {
+	AgencyID    uuid.UUID `json:"agency_id" validate:"required"`
+	PlanID      uuid.UUID `json:"plan_id" validate:"required"`
+	BillingType string    `json:"billing_type" validate:"required,oneof=monthly annual"`
+}

backend/internal/repository/plan_repository.go

@@ -0,0 +1,283 @@
+package repository
+
+import (
+	"database/sql"
+	"time"
+
+	"aggios-app/backend/internal/domain"
+
+	"github.com/google/uuid"
+	"github.com/lib/pq"
+)
+
+// PlanRepository handles database operations for plans
+type PlanRepository struct {
+	db *sql.DB
+}
+
+// NewPlanRepository creates a new plan repository
+func NewPlanRepository(db *sql.DB) *PlanRepository {
+	return &PlanRepository{db: db}
+}
+
+// Create creates a new plan
+func (r *PlanRepository) Create(plan *domain.Plan) error {
+	query := `
+		INSERT INTO plans (id, name, slug, description, min_users, max_users, monthly_price, annual_price, features, differentiators, storage_gb, is_active, created_at, updated_at)
+		VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14)
+		RETURNING id, created_at, updated_at
+	`
+
+	now := time.Now()
+	plan.ID = uuid.New()
+	plan.CreatedAt = now
+	plan.UpdatedAt = now
+
+	features := pq.Array(plan.Features)
+	differentiators := pq.Array(plan.Differentiators)
+
+	return r.db.QueryRow(
+		query,
+		plan.ID,
+		plan.Name,
+		plan.Slug,
+		plan.Description,
+		plan.MinUsers,
+		plan.MaxUsers,
+		plan.MonthlyPrice,
+		plan.AnnualPrice,
+		features,
+		differentiators,
+		plan.StorageGB,
+		plan.IsActive,
+		plan.CreatedAt,
+		plan.UpdatedAt,
+	).Scan(&plan.ID, &plan.CreatedAt, &plan.UpdatedAt)
+}
+
+// GetByID retrieves a plan by ID
+func (r *PlanRepository) GetByID(id uuid.UUID) (*domain.Plan, error) {
+	query := `
+		SELECT id, name, slug, description, min_users, max_users, monthly_price, annual_price, features, differentiators, storage_gb, is_active, created_at, updated_at
+		FROM plans
+		WHERE id = $1
+	`
+
+	plan := &domain.Plan{}
+	var features, differentiators pq.StringArray
+
+	err := r.db.QueryRow(query, id).Scan(
+		&plan.ID,
+		&plan.Name,
+		&plan.Slug,
+		&plan.Description,
+		&plan.MinUsers,
+		&plan.MaxUsers,
+		&plan.MonthlyPrice,
+		&plan.AnnualPrice,
+		&features,
+		&differentiators,
+		&plan.StorageGB,
+		&plan.IsActive,
+		&plan.CreatedAt,
+		&plan.UpdatedAt,
+	)
+
+	if err != nil {
+		return nil, err
+	}
+
+	plan.Features = []string(features)
+	plan.Differentiators = []string(differentiators)
+
+	return plan, nil
+}
+
+// GetBySlug retrieves a plan by slug
+func (r *PlanRepository) GetBySlug(slug string) (*domain.Plan, error) {
+	query := `
+		SELECT id, name, slug, description, min_users, max_users, monthly_price, annual_price, features, differentiators, storage_gb, is_active, created_at, updated_at
+		FROM plans
+		WHERE slug = $1
+	`
+
+	plan := &domain.Plan{}
+	var features, differentiators pq.StringArray
+
+	err := r.db.QueryRow(query, slug).Scan(
+		&plan.ID,
+		&plan.Name,
+		&plan.Slug,
+		&plan.Description,
+		&plan.MinUsers,
+		&plan.MaxUsers,
+		&plan.MonthlyPrice,
+		&plan.AnnualPrice,
+		&features,
+		&differentiators,
+		&plan.StorageGB,
+		&plan.IsActive,
+		&plan.CreatedAt,
+		&plan.UpdatedAt,
+	)
+
+	if err != nil {
+		return nil, err
+	}
+
+	plan.Features = []string(features)
+	plan.Differentiators = []string(differentiators)
+
+	return plan, nil
+}
+
+// ListAll retrieves all plans
+func (r *PlanRepository) ListAll() ([]*domain.Plan, error) {
+	query := `
+		SELECT id, name, slug, description, min_users, max_users, monthly_price, annual_price, features, differentiators, storage_gb, is_active, created_at, updated_at
+		FROM plans
+		ORDER BY min_users ASC
+	`
+
+	rows, err := r.db.Query(query)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	var plans []*domain.Plan
+
+	for rows.Next() {
+		plan := &domain.Plan{}
+		var features, differentiators pq.StringArray
+
+		err := rows.Scan(
+			&plan.ID,
+			&plan.Name,
+			&plan.Slug,
+			&plan.Description,
+			&plan.MinUsers,
+			&plan.MaxUsers,
+			&plan.MonthlyPrice,
+			&plan.AnnualPrice,
+			&features,
+			&differentiators,
+			&plan.StorageGB,
+			&plan.IsActive,
+			&plan.CreatedAt,
+			&plan.UpdatedAt,
+		)
+
+		if err != nil {
+			return nil, err
+		}
+
+		plan.Features = []string(features)
+		plan.Differentiators = []string(differentiators)
+		plans = append(plans, plan)
+	}
+
+	return plans, rows.Err()
+}
+
+// ListActive retrieves all active plans
+func (r *PlanRepository) ListActive() ([]*domain.Plan, error) {
+	query := `
+		SELECT id, name, slug, description, min_users, max_users, monthly_price, annual_price, features, differentiators, storage_gb, is_active, created_at, updated_at
+		FROM plans
+		WHERE is_active = true
+		ORDER BY min_users ASC
+	`
+
+	rows, err := r.db.Query(query)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	var plans []*domain.Plan
+
+	for rows.Next() {
+		plan := &domain.Plan{}
+		var features, differentiators pq.StringArray
+
+		err := rows.Scan(
+			&plan.ID,
+			&plan.Name,
+			&plan.Slug,
+			&plan.Description,
+			&plan.MinUsers,
+			&plan.MaxUsers,
+			&plan.MonthlyPrice,
+			&plan.AnnualPrice,
+			&features,
+			&differentiators,
+			&plan.StorageGB,
+			&plan.IsActive,
+			&plan.CreatedAt,
+			&plan.UpdatedAt,
+		)
+
+		if err != nil {
+			return nil, err
+		}
+
+		plan.Features = []string(features)
+		plan.Differentiators = []string(differentiators)
+		plans = append(plans, plan)
+	}
+
+	return plans, rows.Err()
+}
+
+// Update updates a plan
+func (r *PlanRepository) Update(plan *domain.Plan) error {
+	query := `
+		UPDATE plans
+		SET name = $2, slug = $3, description = $4, min_users = $5, max_users = $6, monthly_price = $7, annual_price = $8, features = $9, differentiators = $10, storage_gb = $11, is_active = $12, updated_at = $13
+		WHERE id = $1
+		RETURNING updated_at
+	`
+
+	plan.UpdatedAt = time.Now()
+
+	features := pq.Array(plan.Features)
+	differentiators := pq.Array(plan.Differentiators)
+
+	return r.db.QueryRow(
+		query,
+		plan.ID,
+		plan.Name,
+		plan.Slug,
+		plan.Description,
+		plan.MinUsers,
+		plan.MaxUsers,
+		plan.MonthlyPrice,
+		plan.AnnualPrice,
+		features,
+		differentiators,
+		plan.StorageGB,
+		plan.IsActive,
+		plan.UpdatedAt,
+	).Scan(&plan.UpdatedAt)
+}
+
+// Delete deletes a plan
+func (r *PlanRepository) Delete(id uuid.UUID) error {
+	query := `DELETE FROM plans WHERE id = $1`
+	result, err := r.db.Exec(query, id)
+	if err != nil {
+		return err
+	}
+
+	rowsAffected, err := result.RowsAffected()
+	if err != nil {
+		return err
+	}
+
+	if rowsAffected == 0 {
+		return sql.ErrNoRows
+	}
+
+	return nil
+}

backend/internal/repository/subscription_repository.go

@@ -0,0 +1,203 @@
+package repository
+
+import (
+	"database/sql"
+	"time"
+
+	"aggios-app/backend/internal/domain"
+
+	"github.com/google/uuid"
+)
+
+// SubscriptionRepository handles database operations for subscriptions
+type SubscriptionRepository struct {
+	db *sql.DB
+}
+
+// NewSubscriptionRepository creates a new subscription repository
+func NewSubscriptionRepository(db *sql.DB) *SubscriptionRepository {
+	return &SubscriptionRepository{db: db}
+}
+
+// Create creates a new subscription
+func (r *SubscriptionRepository) Create(subscription *domain.Subscription) error {
+	query := `
+		INSERT INTO agency_subscriptions (id, agency_id, plan_id, billing_type, current_users, status, start_date, renewal_date, created_at, updated_at)
+		VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)
+		RETURNING id, created_at, updated_at
+	`
+
+	now := time.Now()
+	subscription.ID = uuid.New()
+	subscription.CreatedAt = now
+	subscription.UpdatedAt = now
+	subscription.StartDate = now
+
+	// Set renewal date based on billing type
+	if subscription.BillingType == "annual" {
+		subscription.RenewalDate = now.AddDate(1, 0, 0)
+	} else {
+		subscription.RenewalDate = now.AddDate(0, 1, 0)
+	}
+
+	return r.db.QueryRow(
+		query,
+		subscription.ID,
+		subscription.AgencyID,
+		subscription.PlanID,
+		subscription.BillingType,
+		subscription.CurrentUsers,
+		subscription.Status,
+		subscription.StartDate,
+		subscription.RenewalDate,
+		subscription.CreatedAt,
+		subscription.UpdatedAt,
+	).Scan(&subscription.ID, &subscription.CreatedAt, &subscription.UpdatedAt)
+}
+
+// GetByID retrieves a subscription by ID
+func (r *SubscriptionRepository) GetByID(id uuid.UUID) (*domain.Subscription, error) {
+	query := `
+		SELECT id, agency_id, plan_id, billing_type, current_users, status, start_date, renewal_date, created_at, updated_at
+		FROM agency_subscriptions
+		WHERE id = $1
+	`
+
+	subscription := &domain.Subscription{}
+	err := r.db.QueryRow(query, id).Scan(
+		&subscription.ID,
+		&subscription.AgencyID,
+		&subscription.PlanID,
+		&subscription.BillingType,
+		&subscription.CurrentUsers,
+		&subscription.Status,
+		&subscription.StartDate,
+		&subscription.RenewalDate,
+		&subscription.CreatedAt,
+		&subscription.UpdatedAt,
+	)
+
+	return subscription, err
+}
+
+// GetByAgencyID retrieves a subscription by agency ID
+func (r *SubscriptionRepository) GetByAgencyID(agencyID uuid.UUID) (*domain.Subscription, error) {
+	query := `
+		SELECT id, agency_id, plan_id, billing_type, current_users, status, start_date, renewal_date, created_at, updated_at
+		FROM agency_subscriptions
+		WHERE agency_id = $1 AND status = 'active'
+		LIMIT 1
+	`
+
+	subscription := &domain.Subscription{}
+	err := r.db.QueryRow(query, agencyID).Scan(
+		&subscription.ID,
+		&subscription.AgencyID,
+		&subscription.PlanID,
+		&subscription.BillingType,
+		&subscription.CurrentUsers,
+		&subscription.Status,
+		&subscription.StartDate,
+		&subscription.RenewalDate,
+		&subscription.CreatedAt,
+		&subscription.UpdatedAt,
+	)
+
+	return subscription, err
+}
+
+// ListAll retrieves all subscriptions
+func (r *SubscriptionRepository) ListAll() ([]*domain.Subscription, error) {
+	query := `
+		SELECT id, agency_id, plan_id, billing_type, current_users, status, start_date, renewal_date, created_at, updated_at
+		FROM agency_subscriptions
+		ORDER BY created_at DESC
+	`
+
+	rows, err := r.db.Query(query)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	var subscriptions []*domain.Subscription
+
+	for rows.Next() {
+		subscription := &domain.Subscription{}
+		err := rows.Scan(
+			&subscription.ID,
+			&subscription.AgencyID,
+			&subscription.PlanID,
+			&subscription.BillingType,
+			&subscription.CurrentUsers,
+			&subscription.Status,
+			&subscription.StartDate,
+			&subscription.RenewalDate,
+			&subscription.CreatedAt,
+			&subscription.UpdatedAt,
+		)
+
+		if err != nil {
+			return nil, err
+		}
+
+		subscriptions = append(subscriptions, subscription)
+	}
+
+	return subscriptions, rows.Err()
+}
+
+// Update updates a subscription
+func (r *SubscriptionRepository) Update(subscription *domain.Subscription) error {
+	query := `
+		UPDATE agency_subscriptions
+		SET plan_id = $2, billing_type = $3, current_users = $4, status = $5, renewal_date = $6, updated_at = $7
+		WHERE id = $1
+		RETURNING updated_at
+	`
+
+	subscription.UpdatedAt = time.Now()
+
+	return r.db.QueryRow(
+		query,
+		subscription.ID,
+		subscription.PlanID,
+		subscription.BillingType,
+		subscription.CurrentUsers,
+		subscription.Status,
+		subscription.RenewalDate,
+		subscription.UpdatedAt,
+	).Scan(&subscription.UpdatedAt)
+}
+
+// Delete deletes a subscription
+func (r *SubscriptionRepository) Delete(id uuid.UUID) error {
+	query := `DELETE FROM agency_subscriptions WHERE id = $1`
+	result, err := r.db.Exec(query, id)
+	if err != nil {
+		return err
+	}
+
+	rowsAffected, err := result.RowsAffected()
+	if err != nil {
+		return err
+	}
+
+	if rowsAffected == 0 {
+		return sql.ErrNoRows
+	}
+
+	return nil
+}
+
+// UpdateUserCount updates the current user count for a subscription
+func (r *SubscriptionRepository) UpdateUserCount(agencyID uuid.UUID, userCount int) error {
+	query := `
+		UPDATE agency_subscriptions
+		SET current_users = $2, updated_at = $3
+		WHERE agency_id = $1 AND status = 'active'
+	`
+
+	_, err := r.db.Exec(query, agencyID, userCount, time.Now())
+	return err
+}

backend/internal/repository/tenant_repository.go

@@ -188,17 +188,23 @@ func (r *TenantRepository) FindByID(id uuid.UUID) (*domain.Tenant, error) {
 // FindBySubdomain finds a tenant by subdomain
 func (r *TenantRepository) FindBySubdomain(subdomain string) (*domain.Tenant, error) {
 	query := `
-		SELECT id, name, domain, subdomain, created_at, updated_at
+		SELECT id, name, domain, subdomain, primary_color, secondary_color, logo_url, logo_horizontal_url, created_at, updated_at
 		FROM tenants
 		WHERE subdomain = $1
 	`
 
 	tenant := &domain.Tenant{}
+	var primaryColor, secondaryColor, logoURL, logoHorizontalURL sql.NullString
+
 	err := r.db.QueryRow(query, subdomain).Scan(
 		&tenant.ID,
 		&tenant.Name,
 		&tenant.Domain,
 		&tenant.Subdomain,
+		&primaryColor,
+		&secondaryColor,
+		&logoURL,
+		&logoHorizontalURL,
 		&tenant.CreatedAt,
 		&tenant.UpdatedAt,
 	)
@@ -207,7 +213,24 @@ func (r *TenantRepository) FindBySubdomain(subdomain string) (*domain.Tenant, er
 		return nil, nil
 	}
 
-	return tenant, err
+	if err != nil {
+		return nil, err
+	}
+
+	if primaryColor.Valid {
+		tenant.PrimaryColor = primaryColor.String
+	}
+	if secondaryColor.Valid {
+		tenant.SecondaryColor = secondaryColor.String
+	}
+	if logoURL.Valid {
+		tenant.LogoURL = logoURL.String
+	}
+	if logoHorizontalURL.Valid {
+		tenant.LogoHorizontalURL = logoHorizontalURL.String
+	}
+
+	return tenant, nil
 }
 
 // SubdomainExists checks if a subdomain is already taken

backend/internal/service/plan_service.go

@@ -0,0 +1,286 @@
+package service
+
+import (
+	"database/sql"
+	"errors"
+	"fmt"
+
+	"aggios-app/backend/internal/domain"
+	"aggios-app/backend/internal/repository"
+
+	"github.com/google/uuid"
+	"github.com/shopspring/decimal"
+)
+
+var (
+	ErrPlanNotFound           = errors.New("plan not found")
+	ErrPlanSlugTaken          = errors.New("plan slug already exists")
+	ErrInvalidUserRange       = errors.New("invalid user range: min_users must be less than or equal to max_users")
+	ErrSubscriptionNotFound   = errors.New("subscription not found")
+	ErrUserLimitExceeded      = errors.New("user limit exceeded for this plan")
+	ErrSubscriptionExists     = errors.New("agency already has an active subscription")
+)
+
+// PlanService handles plan business logic
+type PlanService struct {
+	planRepo         *repository.PlanRepository
+	subscriptionRepo *repository.SubscriptionRepository
+}
+
+// NewPlanService creates a new plan service
+func NewPlanService(planRepo *repository.PlanRepository, subscriptionRepo *repository.SubscriptionRepository) *PlanService {
+	return &PlanService{
+		planRepo:         planRepo,
+		subscriptionRepo: subscriptionRepo,
+	}
+}
+
+// CreatePlan creates a new plan
+func (s *PlanService) CreatePlan(req *domain.CreatePlanRequest) (*domain.Plan, error) {
+	// Validate user range
+	if req.MinUsers > req.MaxUsers && req.MaxUsers != -1 {
+		return nil, ErrInvalidUserRange
+	}
+
+	// Check if slug is unique
+	existing, _ := s.planRepo.GetBySlug(req.Slug)
+	if existing != nil {
+		return nil, ErrPlanSlugTaken
+	}
+
+	plan := &domain.Plan{
+		Name:            req.Name,
+		Slug:            req.Slug,
+		Description:     req.Description,
+		MinUsers:        req.MinUsers,
+		MaxUsers:        req.MaxUsers,
+		Features:        req.Features,
+		Differentiators: req.Differentiators,
+		StorageGB:       req.StorageGB,
+		IsActive:        req.IsActive,
+	}
+
+	// Convert prices if provided
+	if req.MonthlyPrice != nil {
+		price := decimal.NewFromFloat(*req.MonthlyPrice)
+		plan.MonthlyPrice = &price
+	}
+	if req.AnnualPrice != nil {
+		price := decimal.NewFromFloat(*req.AnnualPrice)
+		plan.AnnualPrice = &price
+	}
+
+	if err := s.planRepo.Create(plan); err != nil {
+		return nil, err
+	}
+
+	return plan, nil
+}
+
+// GetPlan retrieves a plan by ID
+func (s *PlanService) GetPlan(id uuid.UUID) (*domain.Plan, error) {
+	plan, err := s.planRepo.GetByID(id)
+	if err != nil {
+		if err == sql.ErrNoRows {
+			return nil, ErrPlanNotFound
+		}
+		return nil, err
+	}
+	return plan, nil
+}
+
+// ListPlans retrieves all plans
+func (s *PlanService) ListPlans() ([]*domain.Plan, error) {
+	return s.planRepo.ListAll()
+}
+
+// ListActivePlans retrieves all active plans
+func (s *PlanService) ListActivePlans() ([]*domain.Plan, error) {
+	return s.planRepo.ListActive()
+}
+
+// UpdatePlan updates a plan
+func (s *PlanService) UpdatePlan(id uuid.UUID, req *domain.UpdatePlanRequest) (*domain.Plan, error) {
+	plan, err := s.planRepo.GetByID(id)
+	if err != nil {
+		if err == sql.ErrNoRows {
+			return nil, ErrPlanNotFound
+		}
+		return nil, err
+	}
+
+	// Update fields if provided
+	if req.Name != nil {
+		plan.Name = *req.Name
+	}
+	if req.Slug != nil {
+		// Check if new slug is unique
+		existing, _ := s.planRepo.GetBySlug(*req.Slug)
+		if existing != nil && existing.ID != plan.ID {
+			return nil, ErrPlanSlugTaken
+		}
+		plan.Slug = *req.Slug
+	}
+	if req.Description != nil {
+		plan.Description = *req.Description
+	}
+	if req.MinUsers != nil {
+		plan.MinUsers = *req.MinUsers
+	}
+	if req.MaxUsers != nil {
+		plan.MaxUsers = *req.MaxUsers
+	}
+	if req.MonthlyPrice != nil {
+		price := decimal.NewFromFloat(*req.MonthlyPrice)
+		plan.MonthlyPrice = &price
+	}
+	if req.AnnualPrice != nil {
+		price := decimal.NewFromFloat(*req.AnnualPrice)
+		plan.AnnualPrice = &price
+	}
+	if req.Features != nil {
+		plan.Features = req.Features
+	}
+	if req.Differentiators != nil {
+		plan.Differentiators = req.Differentiators
+	}
+	if req.StorageGB != nil {
+		plan.StorageGB = *req.StorageGB
+	}
+	if req.IsActive != nil {
+		plan.IsActive = *req.IsActive
+	}
+
+	// Validate user range
+	if plan.MinUsers > plan.MaxUsers && plan.MaxUsers != -1 {
+		return nil, ErrInvalidUserRange
+	}
+
+	if err := s.planRepo.Update(plan); err != nil {
+		return nil, err
+	}
+
+	return plan, nil
+}
+
+// DeletePlan deletes a plan
+func (s *PlanService) DeletePlan(id uuid.UUID) error {
+	// Check if plan exists
+	if _, err := s.planRepo.GetByID(id); err != nil {
+		if err == sql.ErrNoRows {
+			return ErrPlanNotFound
+		}
+		return err
+	}
+
+	return s.planRepo.Delete(id)
+}
+
+// CreateSubscription creates a new subscription for an agency
+func (s *PlanService) CreateSubscription(req *domain.CreateSubscriptionRequest) (*domain.Subscription, error) {
+	// Check if plan exists
+	plan, err := s.planRepo.GetByID(req.PlanID)
+	if err != nil {
+		if err == sql.ErrNoRows {
+			return nil, ErrPlanNotFound
+		}
+		return nil, err
+	}
+
+	// Check if agency already has active subscription
+	existing, err := s.subscriptionRepo.GetByAgencyID(req.AgencyID)
+	if err != nil && err != sql.ErrNoRows {
+		return nil, err
+	}
+	if existing != nil {
+		return nil, ErrSubscriptionExists
+	}
+
+	subscription := &domain.Subscription{
+		AgencyID:    req.AgencyID,
+		PlanID:      req.PlanID,
+		BillingType: req.BillingType,
+		Status:      "active",
+		CurrentUsers: 0,
+	}
+
+	if err := s.subscriptionRepo.Create(subscription); err != nil {
+		return nil, err
+	}
+
+	// Load plan details
+	subscription.PlanID = plan.ID
+
+	return subscription, nil
+}
+
+// GetSubscription retrieves a subscription by ID
+func (s *PlanService) GetSubscription(id uuid.UUID) (*domain.Subscription, error) {
+	subscription, err := s.subscriptionRepo.GetByID(id)
+	if err != nil {
+		if err == sql.ErrNoRows {
+			return nil, ErrSubscriptionNotFound
+		}
+		return nil, err
+	}
+	return subscription, nil
+}
+
+// GetAgencySubscription retrieves an agency's active subscription
+func (s *PlanService) GetAgencySubscription(agencyID uuid.UUID) (*domain.Subscription, error) {
+	subscription, err := s.subscriptionRepo.GetByAgencyID(agencyID)
+	if err != nil {
+		if err == sql.ErrNoRows {
+			return nil, ErrSubscriptionNotFound
+		}
+		return nil, err
+	}
+	return subscription, nil
+}
+
+// ListSubscriptions retrieves all subscriptions
+func (s *PlanService) ListSubscriptions() ([]*domain.Subscription, error) {
+	return s.subscriptionRepo.ListAll()
+}
+
+// ValidateUserLimit checks if adding a user would exceed plan limit
+func (s *PlanService) ValidateUserLimit(agencyID uuid.UUID, newUserCount int) error {
+	subscription, err := s.subscriptionRepo.GetByAgencyID(agencyID)
+	if err != nil {
+		if err == sql.ErrNoRows {
+			return ErrSubscriptionNotFound
+		}
+		return err
+	}
+
+	plan, err := s.planRepo.GetByID(subscription.PlanID)
+	if err != nil {
+		if err == sql.ErrNoRows {
+			return ErrPlanNotFound
+		}
+		return err
+	}
+
+	if plan.MaxUsers != -1 && newUserCount > plan.MaxUsers {
+		return fmt.Errorf("%w (limit: %d, requested: %d)", ErrUserLimitExceeded, plan.MaxUsers, newUserCount)
+	}
+
+	return nil
+}
+
+// GetPlanByUserCount returns the appropriate plan for a given user count
+func (s *PlanService) GetPlanByUserCount(userCount int) (*domain.Plan, error) {
+	plans, err := s.planRepo.ListActive()
+	if err != nil {
+		return nil, err
+	}
+
+	// Find the plan that fits the user count
+	for _, plan := range plans {
+		if userCount >= plan.MinUsers && (plan.MaxUsers == -1 || userCount <= plan.MaxUsers) {
+			return plan, nil
+		}
+	}
+
+	return nil, fmt.Errorf("no plan found for user count: %d", userCount)
+}

docker-compose.yml

@@ -65,9 +65,24 @@ services:
     container_name: aggios-minio
     restart: unless-stopped
     command: server /data --console-address ":9001"
+    labels:
+      - "traefik.enable=true"
+      # Router para acesso aos arquivos (API S3)
+      - "traefik.http.routers.minio.rule=Host(`files.aggios.local`) || Host(`files.localhost`)"
+      - "traefik.http.routers.minio.entrypoints=web"
+      - "traefik.http.routers.minio.priority=100" # Prioridade alta para evitar captura pelo wildcard
+      - "traefik.http.services.minio.loadbalancer.server.port=9000"
+      - "traefik.http.services.minio.loadbalancer.passhostheader=true"
+      # Router para o Console do MinIO
+      - "traefik.http.routers.minio-console.rule=Host(`minio.aggios.local`) || Host(`minio.localhost`)"
+      - "traefik.http.routers.minio-console.entrypoints=web"
+      - "traefik.http.routers.minio-console.priority=100"
+      - "traefik.http.services.minio-console.loadbalancer.server.port=9001"
     environment:
       MINIO_ROOT_USER: minioadmin
       MINIO_ROOT_PASSWORD: ${MINIO_PASSWORD:-M1n10_S3cur3_P@ss_2025!}
+      MINIO_BROWSER_REDIRECT_URL: http://minio.localhost
+      MINIO_SERVER_URL: http://files.localhost
     volumes:
       - minio_data:/data
     ports:
@@ -107,6 +122,7 @@ services:
       REDIS_PORT: 6379
       REDIS_PASSWORD: ${REDIS_PASSWORD:-R3d1s_S3cur3_P@ss_2025!}
       MINIO_ENDPOINT: minio:9000
+      MINIO_PUBLIC_URL: http://files.localhost
       MINIO_ROOT_USER: minioadmin
       MINIO_ROOT_PASSWORD: ${MINIO_PASSWORD:-M1n10_S3cur3_P@ss_2025!}
     depends_on:
@@ -178,6 +194,7 @@ services:
       - "traefik.enable=true"
       - "traefik.http.routers.agency.rule=Host(`agency.aggios.local`) || Host(`agency.localhost`) || HostRegexp(`^.+\\.localhost$`)"
       - "traefik.http.routers.agency.entrypoints=web"
+      - "traefik.http.routers.agency.priority=1" # Prioridade baixa para não conflitar com files/minio
     environment:
       - NODE_ENV=production
       - NEXT_PUBLIC_API_URL=http://api.localhost

front-end-agency/app/(agency)/AgencyLayoutClient.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import { DashboardLayout } from '@/components/layout/DashboardLayout';
+import { AgencyBranding } from '@/components/layout/AgencyBranding';
+import AuthGuard from '@/components/auth/AuthGuard';
+import {
+    HomeIcon,
+    RocketLaunchIcon,
+    ChartBarIcon,
+    BriefcaseIcon,
+    LifebuoyIcon,
+    CreditCardIcon,
+    DocumentTextIcon,
+    FolderIcon,
+    ShareIcon,
+} from '@heroicons/react/24/outline';
+
+const AGENCY_MENU_ITEMS = [
+    { id: 'dashboard', label: 'Visão Geral', href: '/dashboard', icon: HomeIcon },
+    {
+        id: 'crm',
+        label: 'CRM',
+        href: '/crm',
+        icon: RocketLaunchIcon,
+        subItems: [
+            { label: 'Dashboard', href: '/crm' },
+            { label: 'Clientes', href: '/crm/clientes' },
+            { label: 'Funis', href: '/crm/funis' },
+            { label: 'Negociações', href: '/crm/negociacoes' },
+        ]
+    },
+    {
+        id: 'erp',
+        label: 'ERP',
+        href: '/erp',
+        icon: ChartBarIcon,
+        subItems: [
+            { label: 'Dashboard', href: '/erp' },
+            { label: 'Fluxo de Caixa', href: '/erp/fluxo-caixa' },
+            { label: 'Contas a Pagar', href: '/erp/contas-pagar' },
+            { label: 'Contas a Receber', href: '/erp/contas-receber' },
+        ]
+    },
+    {
+        id: 'projetos',
+        label: 'Projetos',
+        href: '/projetos',
+        icon: BriefcaseIcon,
+        subItems: [
+            { label: 'Dashboard', href: '/projetos' },
+            { label: 'Meus Projetos', href: '/projetos/lista' },
+            { label: 'Tarefas', href: '/projetos/tarefas' },
+            { label: 'Cronograma', href: '/projetos/cronograma' },
+        ]
+    },
+    {
+        id: 'helpdesk',
+        label: 'Helpdesk',
+        href: '/helpdesk',
+        icon: LifebuoyIcon,
+        subItems: [
+            { label: 'Dashboard', href: '/helpdesk' },
+            { label: 'Chamados', href: '/helpdesk/chamados' },
+            { label: 'Base de Conhecimento', href: '/helpdesk/kb' },
+        ]
+    },
+    {
+        id: 'pagamentos',
+        label: 'Pagamentos',
+        href: '/pagamentos',
+        icon: CreditCardIcon,
+        subItems: [
+            { label: 'Dashboard', href: '/pagamentos' },
+            { label: 'Cobranças', href: '/pagamentos/cobrancas' },
+            { label: 'Assinaturas', href: '/pagamentos/assinaturas' },
+        ]
+    },
+    {
+        id: 'contratos',
+        label: 'Contratos',
+        href: '/contratos',
+        icon: DocumentTextIcon,
+        subItems: [
+            { label: 'Dashboard', href: '/contratos' },
+            { label: 'Ativos', href: '/contratos/ativos' },
+            { label: 'Modelos', href: '/contratos/modelos' },
+        ]
+    },
+    {
+        id: 'documentos',
+        label: 'Documentos',
+        href: '/documentos',
+        icon: FolderIcon,
+        subItems: [
+            { label: 'Meus Arquivos', href: '/documentos' },
+            { label: 'Compartilhados', href: '/documentos/compartilhados' },
+            { label: 'Lixeira', href: '/documentos/lixeira' },
+        ]
+    },
+    {
+        id: 'social',
+        label: 'Redes Sociais',
+        href: '/social',
+        icon: ShareIcon,
+        subItems: [
+            { label: 'Dashboard', href: '/social' },
+            { label: 'Agendamento', href: '/social/agendamento' },
+            { label: 'Relatórios', href: '/social/relatorios' },
+        ]
+    },
+];
+
+interface AgencyLayoutClientProps {
+    children: React.ReactNode;
+    colors?: {
+        primary: string;
+        secondary: string;
+    } | null;
+}
+
+export function AgencyLayoutClient({ children, colors }: AgencyLayoutClientProps) {
+    return (
+        <AuthGuard>
+            <AgencyBranding colors={colors} />
+            <DashboardLayout menuItems={AGENCY_MENU_ITEMS}>
+                {children}
+            </DashboardLayout>
+        </AuthGuard>
+    );
+}

front-end-agency/app/(agency)/clientes/page.tsx

@@ -1,26 +0,0 @@
-"use client";
-
-export default function ClientesPage() {
-    return (
-        <div className="p-6">
-            <div className="mb-6">
-                <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Clientes</h1>
-                <p className="text-gray-600 dark:text-gray-400">Gerencie sua carteira de clientes</p>
-            </div>
-
-            <div className="bg-white dark:bg-gray-800 rounded-lg p-12 border border-gray-200 dark:border-gray-700 text-center">
-                <div className="max-w-md mx-auto">
-                    <div className="w-24 h-24 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
-                        <i className="ri-user-line text-5xl text-blue-600 dark:text-blue-400"></i>
-                    </div>
-                    <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-3">
-                        Módulo CRM em Desenvolvimento
-                    </h2>
-                    <p className="text-gray-600 dark:text-gray-400">
-                        Em breve você poderá gerenciar seus clientes com recursos avançados de CRM.
-                    </p>
-                </div>
-            </div>
-        </div>
-    );
-}

front-end-agency/app/(agency)/configuracoes/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { Tab } from '@headlessui/react';
-import { Button, Dialog } from '@/components/ui';
+import { Button, Dialog, Input } from '@/components/ui';
 import { Toaster, toast } from 'react-hot-toast';
 import {
     BuildingOfficeIcon,
@@ -44,6 +44,7 @@ export default function ConfiguracoesPage() {
     const [showSupportDialog, setShowSupportDialog] = useState(false);
     const [supportMessage, setSupportMessage] = useState('Para alterar estes dados, contate o suporte.');
     const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
     const [loadingCep, setLoadingCep] = useState(false);
     const [uploadingLogo, setUploadingLogo] = useState(false);
     const [logoPreview, setLogoPreview] = useState<string | null>(null);
@@ -70,8 +71,32 @@ export default function ConfiguracoesPage() {
         teamSize: '',
         logoUrl: '',
         logoHorizontalUrl: '',
+        primaryColor: '#ff3a05',
+        secondaryColor: '#ff0080',
     });
 
+    // Live Preview da Cor Primária
+    useEffect(() => {
+        if (agencyData.primaryColor) {
+            const root = document.documentElement;
+            const hexToRgb = (hex: string) => {
+                const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+                return result ? `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}` : null;
+            };
+
+            const primaryRgb = hexToRgb(agencyData.primaryColor);
+
+            if (primaryRgb) {
+                root.style.setProperty('--brand-rgb', primaryRgb);
+                root.style.setProperty('--brand-strong-rgb', primaryRgb);
+                root.style.setProperty('--brand-hover-rgb', primaryRgb);
+            }
+
+            root.style.setProperty('--brand-color', agencyData.primaryColor);
+            root.style.setProperty('--gradient', `linear-gradient(135deg, ${agencyData.primaryColor}, ${agencyData.primaryColor})`);
+        }
+    }, [agencyData.primaryColor]);
+
     // Dados para alteração de senha
     const [passwordData, setPasswordData] = useState({
         currentPassword: '',
@@ -102,9 +127,6 @@ export default function ConfiguracoesPage() {
 
                 if (response.ok) {
                     const data = await response.json();
-                    console.log('DEBUG: API response data:', data);
-                    console.log('DEBUG: logo_url:', data.logo_url);
-                    console.log('DEBUG: logo_horizontal_url:', data.logo_horizontal_url);
 
                     const parsedAddress = parseAddressParts(data.address || '');
                     setAgencyData({
@@ -125,19 +147,26 @@ export default function ConfiguracoesPage() {
                         description: data.description || '',
                         industry: data.industry || '',
                         teamSize: data.team_size || '',
-                        logoUrl: data.logo_url || '',
+                        logoUrl: data.logo_url || localStorage.getItem('agency-logo-url') || '',
-                        logoHorizontalUrl: data.logo_horizontal_url || '',
+                        logoHorizontalUrl: data.logo_horizontal_url || localStorage.getItem('agency-logo-horizontal-url') || '',
+                        primaryColor: data.primary_color || '#ff3a05',
+                        secondaryColor: data.secondary_color || '#ff0080',
                     });
 
-                    // Set logo previews
+                    // Set logo previews - usar localStorage como fallback se API não retornar
-                    console.log('DEBUG: Setting previews...');
+                    const cachedLogo = localStorage.getItem('agency-logo-url');
-                    if (data.logo_url) {
+                    const cachedHorizontal = localStorage.getItem('agency-logo-horizontal-url');
-                        console.log('DEBUG: Setting logoPreview to:', data.logo_url);
+
-                        setLogoPreview(data.logo_url);
+                    const finalLogoUrl = data.logo_url || cachedLogo;
+                    const finalHorizontalUrl = data.logo_horizontal_url || cachedHorizontal;
+
+                    if (finalLogoUrl) {
+                        setLogoPreview(finalLogoUrl);
+                        localStorage.setItem('agency-logo-url', finalLogoUrl);
                     }
-                    if (data.logo_horizontal_url) {
+                    if (finalHorizontalUrl) {
-                        console.log('DEBUG: Setting logoHorizontalPreview to:', data.logo_horizontal_url);
+                        setLogoHorizontalPreview(finalHorizontalUrl);
-                        setLogoHorizontalPreview(data.logo_horizontal_url);
+                        localStorage.setItem('agency-logo-horizontal-url', finalHorizontalUrl);
                     }
                 } else {
                     console.error('Erro ao buscar dados:', response.status);
@@ -166,6 +195,8 @@ export default function ConfiguracoesPage() {
                             teamSize: data.formData?.teamSize || '',
                             logoUrl: '',
                             logoHorizontalUrl: '',
+                            primaryColor: '#ff3a05',
+                            secondaryColor: '#ff0080',
                         });
                     }
                 }
@@ -223,11 +254,18 @@ export default function ConfiguracoesPage() {
                 if (type === 'logo') {
                     setAgencyData(prev => ({ ...prev, logoUrl }));
                     setLogoPreview(logoUrl);
+                    // Salvar no localStorage para uso do favicon
+                    localStorage.setItem('agency-logo-url', logoUrl);
                 } else {
                     setAgencyData(prev => ({ ...prev, logoHorizontalUrl: logoUrl }));
                     setLogoHorizontalPreview(logoUrl);
                 }
 
+                // Disparar evento para atualizar branding em tempo real
+                if (typeof window !== 'undefined') {
+                    window.dispatchEvent(new Event('branding-update'));
+                }
+
                 toast.success('Logo enviado com sucesso!');
             } else {
                 const errorData = await response.json().catch(() => ({}));
@@ -319,11 +357,13 @@ export default function ConfiguracoesPage() {
     };
 
     const handleSaveAgency = async () => {
+        setSaving(true);
         try {
             const token = localStorage.getItem('token');
             if (!token) {
                 setSuccessMessage('Você precisa estar autenticado.');
                 setShowSuccessDialog(true);
+                setSaving(false);
                 return;
             }
 
@@ -354,17 +394,47 @@ export default function ConfiguracoesPage() {
                     description: agencyData.description,
                     industry: agencyData.industry,
                     team_size: agencyData.teamSize,
+                    primary_color: agencyData.primaryColor,
+                    secondary_color: agencyData.secondaryColor,
                 }),
             });
 
             if (response.ok) {
                 setSuccessMessage('Dados da agência salvos com sucesso!');
+
+                // Atualiza localStorage imediatamente para persistência instantânea
+                localStorage.setItem('agency-primary-color', agencyData.primaryColor);
+                localStorage.setItem('agency-secondary-color', agencyData.secondaryColor);
+
+                // Preservar logos no localStorage (não sobrescrever com valores vazios)
+                // Logos são gerenciados separadamente via upload
+                const currentLogoCache = localStorage.getItem('agency-logo-url');
+                const currentHorizontalCache = localStorage.getItem('agency-logo-horizontal-url');
+
+                // Só atualizar se temos valores novos no estado
+                if (agencyData.logoUrl) {
+                    localStorage.setItem('agency-logo-url', agencyData.logoUrl);
+                } else if (!currentLogoCache && logoPreview) {
+                    // Se não tem cache mas tem preview, usar o preview
+                    localStorage.setItem('agency-logo-url', logoPreview);
+                }
+
+                if (agencyData.logoHorizontalUrl) {
+                    localStorage.setItem('agency-logo-horizontal-url', agencyData.logoHorizontalUrl);
+                } else if (!currentHorizontalCache && logoHorizontalPreview) {
+                    localStorage.setItem('agency-logo-horizontal-url', logoHorizontalPreview);
+                }
+
+                // Disparar evento para atualizar o tema em tempo real
+                window.dispatchEvent(new Event('branding-update'));
             } else {
                 setSuccessMessage('Erro ao salvar dados. Tente novamente.');
             }
         } catch (error) {
             console.error('Erro ao salvar:', error);
             setSuccessMessage('Erro ao salvar dados. Verifique sua conexão.');
+        } finally {
+            setSaving(false);
         }
         setShowSuccessDialog(true);
     };
@@ -437,7 +507,7 @@ export default function ConfiguracoesPage() {
             {/* Loading State */}
             {loading ? (
                 <div className="flex items-center justify-center py-12">
-                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 dark:border-gray-100"></div>
+                    <div className="animate-spin rounded-full h-12 w-12 border-b border-gray-900 dark:border-gray-100"></div>
                 </div>
             ) : (
                 <>
@@ -475,52 +545,40 @@ export default function ConfiguracoesPage() {
 
                                     <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                Nome da Agência
+                                                label="Nome da Agência"
-                                            </label>
-                                            <input
-                                                type="text"
                                                 value={agencyData.name}
                                                 onChange={(e) => setAgencyData({ ...agencyData, name: e.target.value })}
-                                                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
+                                                placeholder="Ex: Minha Agência"
                                             />
                                         </div>
 
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                Razão Social
+                                                label="Razão Social"
-                                            </label>
-                                            <input
-                                                type="text"
                                                 value={agencyData.razaoSocial}
                                                 onChange={(e) => setAgencyData({ ...agencyData, razaoSocial: e.target.value })}
-                                                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
+                                                placeholder="Razão Social Ltda"
                                             />
                                         </div>
 
                                         <div>
-                                            <label className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center justify-between">
+                                            <Input
-                                                <span>CNPJ</span>
+                                                label="CNPJ"
-                                                <span className="text-xs text-gray-500">Alteração via suporte</span>
-                                            </label>
-                                            <input
-                                                type="text"
                                                 value={agencyData.cnpj}
                                                 readOnly
                                                 onClick={() => {
                                                     setSupportMessage('Para alterar CNPJ, contate o suporte.');
                                                     setShowSupportDialog(true);
                                                 }}
-                                                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none cursor-pointer"
+                                                className="cursor-pointer bg-gray-50 dark:bg-gray-800"
+                                                helperText="Alteração via suporte"
                                             />
                                         </div>
 
                                         <div>
-                                            <label className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center justify-between">
+                                            <Input
-                                                <span>E-mail (acesso)</span>
+                                                label="E-mail (acesso)"
-                                                <span className="text-xs text-gray-500">Alteração via suporte</span>
-                                            </label>
-                                            <input
                                                 type="email"
                                                 value={agencyData.email}
                                                 readOnly
@@ -528,55 +586,47 @@ export default function ConfiguracoesPage() {
                                                     setSupportMessage('Para alterar o e-mail de acesso, contate o suporte.');
                                                     setShowSupportDialog(true);
                                                 }}
-                                                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none cursor-pointer"
+                                                className="cursor-pointer bg-gray-50 dark:bg-gray-800"
+                                                helperText="Alteração via suporte"
                                             />
                                         </div>
 
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                Telefone / WhatsApp
+                                                label="Telefone / WhatsApp"
-                                            </label>
-                                            <input
                                                 type="tel"
                                                 value={agencyData.phone}
                                                 onChange={(e) => setAgencyData({ ...agencyData, phone: e.target.value })}
-                                                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
+                                                placeholder="(00) 00000-0000"
                                             />
                                         </div>
 
                                         <div className="md:col-span-2">
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                Website
+                                                label="Website"
-                                            </label>
-                                            <input
                                                 type="url"
                                                 value={agencyData.website}
                                                 onChange={(e) => setAgencyData({ ...agencyData, website: e.target.value })}
-                                                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
+                                                placeholder="https://www.suaagencia.com.br"
+                                                leftIcon="ri-global-line"
                                             />
                                         </div>
 
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                Segmento / Indústria
+                                                label="Segmento / Indústria"
-                                            </label>
-                                            <input
-                                                type="text"
                                                 value={agencyData.industry}
                                                 onChange={(e) => setAgencyData({ ...agencyData, industry: e.target.value })}
-                                                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
+                                                placeholder="Ex: Marketing Digital"
                                             />
                                         </div>
 
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                Tamanho da Equipe
+                                                label="Tamanho da Equipe"
-                                            </label>
-                                            <input
-                                                type="text"
                                                 value={agencyData.teamSize}
                                                 onChange={(e) => setAgencyData({ ...agencyData, teamSize: e.target.value })}
-                                                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
+                                                placeholder="Ex: 10-50 funcionários"
                                             />
                                         </div>
                                     </div>
@@ -591,11 +641,8 @@ export default function ConfiguracoesPage() {
                                     <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
 
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                CEP
+                                                label="CEP"
-                                            </label>
-                                            <input
-                                                type="text"
                                                 value={agencyData.zip}
                                                 onChange={(e) => {
                                                     const formatted = formatCep(e.target.value);
@@ -617,85 +664,74 @@ export default function ConfiguracoesPage() {
                                                         }));
                                                     }
                                                 }}
-                                                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
+                                                placeholder="00000-000"
+                                                rightIcon={loadingCep ? "ri-loader-4-line animate-spin" : undefined}
                                             />
                                         </div>
 
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                Estado
+                                                label="Estado"
-                                            </label>
-                                            <input
-                                                type="text"
                                                 value={agencyData.state}
                                                 readOnly
-                                                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none cursor-not-allowed"
+                                                className="bg-gray-50 dark:bg-gray-800 cursor-not-allowed"
                                             />
-                                        </div>                                                <div>
+                                        </div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+
-                                                Cidade
+                                        <div>
-                                            </label>
+                                            <Input
-                                            <input
+                                                label="Cidade"
-                                                type="text"
                                                 value={agencyData.city}
                                                 readOnly
-                                                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none cursor-not-allowed"
+                                                className="bg-gray-50 dark:bg-gray-800 cursor-not-allowed"
                                             />
                                         </div>
 
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                Bairro
+                                                label="Bairro"
-                                            </label>
-                                            <input
-                                                type="text"
                                                 value={agencyData.neighborhood}
                                                 readOnly
-                                                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none cursor-not-allowed"
+                                                className="bg-gray-50 dark:bg-gray-800 cursor-not-allowed"
                                             />
-                                        </div>                                                <div className="md:col-span-2">
+                                        </div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+
-                                                Rua/Avenida
+                                        <div className="md:col-span-2">
-                                            </label>
+                                            <Input
-                                            <input
+                                                label="Rua/Avenida"
-                                                type="text"
                                                 value={agencyData.street}
                                                 readOnly
-                                                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none cursor-not-allowed"
+                                                className="bg-gray-50 dark:bg-gray-800 cursor-not-allowed"
-                                            />
-                                        </div>                                        <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                                                Número
-                                            </label>
-                                            <input
-                                                type="text"
-                                                value={agencyData.number}
-                                                onChange={(e) => setAgencyData({ ...agencyData, number: e.target.value })}
-                                                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
                                             />
                                         </div>
 
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                Complemento (opcional)
+                                                label="Número"
-                                            </label>
+                                                value={agencyData.number}
-                                            <input
+                                                onChange={(e) => setAgencyData({ ...agencyData, number: e.target.value })}
-                                                type="text"
+                                                placeholder="123"
+                                            />
+                                        </div>
+
+                                        <div>
+                                            <Input
+                                                label="Complemento (opcional)"
                                                 value={agencyData.complement}
                                                 onChange={(e) => setAgencyData({ ...agencyData, complement: e.target.value })}
-                                                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
+                                                placeholder="Apto 101, Bloco B"
                                             />
                                         </div>
                                     </div>
 
                                     <div className="mt-6 flex justify-end">
-                                        <button
+                                        <Button
                                             onClick={handleSaveAgency}
-                                            className="px-6 py-2 rounded-lg text-white font-medium transition-all hover:scale-105"
+                                            variant="primary"
-                                            style={{ background: 'var(--gradient-primary)' }}
+                                            size="lg"
                                         >
                                             Salvar Alterações
-                                        </button>
+                                        </Button>
                                     </div>
                                 </div>
                             </Tab.Panel>
@@ -789,7 +825,7 @@ export default function ConfiguracoesPage() {
                                                             className="hidden"
                                                             disabled={uploadingLogo}
                                                         />
-                                                        <div className="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-8 text-center hover:border-gray-400 dark:hover:border-gray-500 transition-colors bg-gray-50/50 dark:bg-gray-900/50">
+                                                        <div className="border-2 border-dashed border-gray-200 dark:border-gray-600 rounded-xl p-8 text-center hover:border-gray-400 dark:hover:border-gray-500 transition-colors bg-gray-50/50 dark:bg-gray-900/50">
                                                             <div className="flex flex-col items-center">
                                                                 <div className="w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-4">
                                                                     <PhotoIcon className="w-8 h-8 text-gray-400 dark:text-gray-500" />
@@ -897,7 +933,7 @@ export default function ConfiguracoesPage() {
                                                             className="hidden"
                                                             disabled={uploadingLogo}
                                                         />
-                                                        <div className="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-8 text-center hover:border-gray-400 dark:hover:border-gray-500 transition-colors bg-gray-50/50 dark:bg-gray-900/50">
+                                                        <div className="border-2 border-dashed border-gray-200 dark:border-gray-600 rounded-xl p-8 text-center hover:border-gray-400 dark:hover:border-gray-500 transition-colors bg-gray-50/50 dark:bg-gray-900/50">
                                                             <div className="flex flex-col items-center">
                                                                 <div className="w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-4">
                                                                     <PhotoIcon className="w-8 h-8 text-gray-400 dark:text-gray-500" />
@@ -928,6 +964,69 @@ export default function ConfiguracoesPage() {
                                                 )}
                                             </div>
                                         </div>
+
+                                        {/* Cores da Marca */}
+                                        <div className="pt-6 border-t border-gray-200 dark:border-gray-700">
+                                            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+                                                Personalização de Cores
+                                            </h3>
+                                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                                <div>
+                                                    <div className="flex items-end gap-3">
+                                                        <div className="relative w-[50px] h-[42px] rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 shadow-sm shrink-0 mb-[2px]">
+                                                            <input
+                                                                type="color"
+                                                                value={agencyData.primaryColor}
+                                                                onChange={(e) => setAgencyData({ ...agencyData, primaryColor: e.target.value })}
+                                                                className="absolute -top-2 -left-2 w-24 h-24 cursor-pointer p-0 border-0"
+                                                            />
+                                                        </div>
+                                                        <div className="flex-1">
+                                                            <Input
+                                                                label="Cor Primária"
+                                                                type="text"
+                                                                value={agencyData.primaryColor}
+                                                                onChange={(e) => setAgencyData({ ...agencyData, primaryColor: e.target.value })}
+                                                                className="uppercase"
+                                                                maxLength={7}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div>
+                                                    <div className="flex items-end gap-3">
+                                                        <div className="relative w-[50px] h-[42px] rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 shadow-sm shrink-0 mb-[2px]">
+                                                            <input
+                                                                type="color"
+                                                                value={agencyData.secondaryColor}
+                                                                onChange={(e) => setAgencyData({ ...agencyData, secondaryColor: e.target.value })}
+                                                                className="absolute -top-2 -left-2 w-24 h-24 cursor-pointer p-0 border-0"
+                                                            />
+                                                        </div>
+                                                        <div className="flex-1">
+                                                            <Input
+                                                                label="Cor Secundária"
+                                                                type="text"
+                                                                value={agencyData.secondaryColor}
+                                                                onChange={(e) => setAgencyData({ ...agencyData, secondaryColor: e.target.value })}
+                                                                className="uppercase"
+                                                                maxLength={7}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div className="mt-6 flex justify-end">
+                                                <Button
+                                                    onClick={handleSaveAgency}
+                                                    variant="primary"
+                                                    isLoading={saving}
+                                                    style={{ backgroundColor: agencyData.primaryColor }}
+                                                >
+                                                    Salvar Cores
+                                                </Button>
+                                            </div>
+                                        </div>
                                     </div>
 
                                     {/* Info adicional */}
@@ -950,9 +1049,9 @@ export default function ConfiguracoesPage() {
                                     <p className="text-gray-600 dark:text-gray-400 mb-4">
                                         Em breve: gerenciamento completo de usuários e permissões
                                     </p>
-                                    <button className="px-6 py-2 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-lg font-medium hover:scale-105 transition-all">
+                                    <Button variant="primary">
                                         Convidar Membro
-                                    </button>
+                                    </Button>
                                 </div>
                             </Tab.Panel>
 
@@ -970,52 +1069,42 @@ export default function ConfiguracoesPage() {
 
                                     <div className="space-y-4">
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                Senha Atual
+                                                label="Senha Atual"
-                                            </label>
-                                            <input
                                                 type="password"
                                                 value={passwordData.currentPassword}
                                                 onChange={(e) => setPasswordData({ ...passwordData, currentPassword: e.target.value })}
-                                                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
                                                 placeholder="Digite sua senha atual"
                                             />
                                         </div>
 
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                Nova Senha
+                                                label="Nova Senha"
-                                            </label>
-                                            <input
                                                 type="password"
                                                 value={passwordData.newPassword}
                                                 onChange={(e) => setPasswordData({ ...passwordData, newPassword: e.target.value })}
-                                                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
                                                 placeholder="Digite a nova senha (mínimo 8 caracteres)"
                                             />
                                         </div>
 
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                Confirmar Nova Senha
+                                                label="Confirmar Nova Senha"
-                                            </label>
-                                            <input
                                                 type="password"
                                                 value={passwordData.confirmPassword}
                                                 onChange={(e) => setPasswordData({ ...passwordData, confirmPassword: e.target.value })}
-                                                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
                                                 placeholder="Digite a nova senha novamente"
                                             />
                                         </div>
 
                                         <div className="pt-4">
-                                            <button
+                                            <Button
                                                 onClick={handleChangePassword}
-                                                className="px-6 py-2 rounded-lg text-white font-medium transition-all hover:scale-105"
+                                                variant="primary"
-                                                style={{ background: 'var(--gradient-primary)' }}
                                             >
                                                 Alterar Senha
-                                            </button>
+                                            </Button>
                                         </div>
                                     </div>
 
@@ -1071,13 +1160,12 @@ export default function ConfiguracoesPage() {
                     <p className="text-center py-4">{successMessage}</p>
                 </Dialog.Body>
                 <Dialog.Footer>
-                    <button
+                    <Button
                         onClick={() => setShowSuccessDialog(false)}
-                        className="px-6 py-2 rounded-lg text-white font-medium transition-all hover:scale-105"
+                        variant="primary"
-                        style={{ background: 'var(--gradient-primary)' }}
                     >
                         OK
-                    </button>
+                    </Button>
                 </Dialog.Footer>
             </Dialog>
 
@@ -1092,12 +1180,12 @@ export default function ConfiguracoesPage() {
                     <p className="mt-3 text-sm text-gray-500">Envie um e-mail para suporte@aggios.app ou abra um chamado para ajuste desses dados.</p>
                 </Dialog.Body>
                 <Dialog.Footer>
-                    <button
+                    <Button
                         onClick={() => setShowSupportDialog(false)}
-                        className="px-4 py-2 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-lg font-medium hover:scale-105 transition-all"
+                        variant="primary"
                     >
                         Fechar
-                    </button>
+                    </Button>
                 </Dialog.Footer>
             </Dialog>
         </div>

front-end-agency/app/(agency)/contratos/page.tsx

@@ -0,0 +1,10 @@
+export default function ContratosPage() {
+    return (
+        <div className="p-6">
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">Contratos</h1>
+            <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 text-center">
+                <p className="text-gray-500">Gestão de Contratos e Assinaturas em breve</p>
+            </div>
+        </div>
+    );
+}

front-end-agency/app/(agency)/crm/page.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import {
+    UsersIcon,
+    CurrencyDollarIcon,
+    ChartPieIcon,
+    ArrowTrendingUpIcon,
+} from '@heroicons/react/24/outline';
+
+export default function CRMPage() {
+    const stats = [
+        { name: 'Leads Totais', value: '124', icon: UsersIcon, color: 'blue' },
+        { name: 'Oportunidades', value: 'R$ 450k', icon: CurrencyDollarIcon, color: 'green' },
+        { name: 'Taxa de Conversão', value: '24%', icon: ChartPieIcon, color: 'purple' },
+        { name: 'Crescimento', value: '+12%', icon: ArrowTrendingUpIcon, color: 'orange' },
+    ];
+
+    return (
+        <div className="p-6 h-full overflow-auto">
+            <div className="space-y-6">
+                <div>
+                    <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+                        Mission Control (CRM)
+                    </h1>
+                    <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
+                        Visão geral do relacionamento com clientes
+                    </p>
+                </div>
+
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+                    {stats.map((stat) => {
+                        const Icon = stat.icon;
+                        return (
+                            <div
+                                key={stat.name}
+                                className="group relative overflow-hidden rounded-xl bg-white dark:bg-gray-900 p-4 border border-gray-200 dark:border-gray-800 transition-all"
+                            >
+                                <div className="flex items-center justify-between">
+                                    <div>
+                                        <p className="text-xs font-medium text-gray-600 dark:text-gray-400">
+                                            {stat.name}
+                                        </p>
+                                        <p className="mt-1 text-2xl font-bold text-gray-900 dark:text-white">
+                                            {stat.value}
+                                        </p>
+                                    </div>
+                                    <div
+                                        className={`rounded-lg p-2 bg-${stat.color}-100 dark:bg-${stat.color}-900/20`}
+                                    >
+                                        <Icon
+                                            className={`h-5 w-5 text-${stat.color}-600 dark:text-${stat.color}-400`}
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <div className="rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-6 h-64 flex items-center justify-center">
+                        <p className="text-gray-500">Funil de Vendas (Em breve)</p>
+                    </div>
+                    <div className="rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-6 h-64 flex items-center justify-center">
+                        <p className="text-gray-500">Atividades Recentes (Em breve)</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

front-end-agency/app/(agency)/dashboard/page.tsx

@@ -1,180 +1,198 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react';
-import { useRouter } from "next/navigation";
+import { getUser } from '@/lib/auth';
-import { getUser } from "@/lib/auth";
 import {
+    RocketLaunchIcon,
     ChartBarIcon,
-    UserGroupIcon,
+    BriefcaseIcon,
+    LifebuoyIcon,
+    CreditCardIcon,
+    DocumentTextIcon,
     FolderIcon,
-    CurrencyDollarIcon,
+    ShareIcon,
     ArrowTrendingUpIcon,
-    ArrowTrendingDownIcon
+    ArrowTrendingDownIcon,
+    CheckCircleIcon,
+    ClockIcon,
 } from '@heroicons/react/24/outline';
 
-interface StatCardProps {
+export default function DashboardPage() {
-    title: string;
+    const [userName, setUserName] = useState('');
-    value: string | number;
+    const [greeting, setGreeting] = useState('');
-    icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+
-    trend?: number;
+    useEffect(() => {
-    color: 'blue' | 'purple' | 'gray' | 'green';
+        const user = getUser();
+        if (user) {
+            setUserName(user.name.split(' ')[0]); // Primeiro nome
         }
 
-const colorClasses = {
+        const hour = new Date().getHours();
-    blue: {
+        if (hour >= 5 && hour < 12) setGreeting('Bom dia');
-        iconBg: 'bg-blue-50 dark:bg-blue-900/20',
+        else if (hour >= 12 && hour < 18) setGreeting('Boa tarde');
-        iconColor: 'text-blue-600 dark:text-blue-400',
+        else setGreeting('Boa noite');
-        trend: 'text-blue-600 dark:text-blue-400'
+    }, []);
-    },
-    purple: {
-        iconBg: 'bg-purple-50 dark:bg-purple-900/20',
-        iconColor: 'text-purple-600 dark:text-purple-400',
-        trend: 'text-purple-600 dark:text-purple-400'
-    },
-    gray: {
-        iconBg: 'bg-gray-50 dark:bg-gray-900/20',
-        iconColor: 'text-gray-600 dark:text-gray-400',
-        trend: 'text-gray-600 dark:text-gray-400'
-    },
-    green: {
-        iconBg: 'bg-emerald-50 dark:bg-emerald-900/20',
-        iconColor: 'text-emerald-600 dark:text-emerald-400',
-        trend: 'text-emerald-600 dark:text-emerald-400'
-    }
-};
 
-function StatCard({ title, value, icon: Icon, trend, color }: StatCardProps) {
+    const overviewStats = [
-    const colors = colorClasses[color];
+        { name: 'Receita Total (Mês)', value: 'R$ 124.500', change: '+12%', changeType: 'increase', icon: ChartBarIcon, color: 'green' },
-    const isPositive = trend && trend > 0;
+        { name: 'Novos Leads', value: '45', change: '+5%', changeType: 'increase', icon: RocketLaunchIcon, color: 'blue' },
+        { name: 'Projetos Ativos', value: '12', change: '-1', changeType: 'decrease', icon: BriefcaseIcon, color: 'purple' },
+        { name: 'Chamados Abertos', value: '3', change: '-2', changeType: 'decrease', icon: LifebuoyIcon, color: 'orange' },
+    ];
+
+    const modules = [
+        {
+            title: 'CRM & Vendas',
+            icon: RocketLaunchIcon,
+            color: 'blue',
+            stats: [
+                { label: 'Propostas Enviadas', value: '8' },
+                { label: 'Aguardando Aprovação', value: '3' },
+                { label: 'Taxa de Conversão', value: '24%' },
+            ]
+        },
+        {
+            title: 'Financeiro & ERP',
+            icon: ChartBarIcon,
+            color: 'green',
+            stats: [
+                { label: 'A Receber', value: 'R$ 45.200' },
+                { label: 'A Pagar', value: 'R$ 12.800' },
+                { label: 'Fluxo de Caixa', value: 'Positivo' },
+            ]
+        },
+        {
+            title: 'Projetos & Tarefas',
+            icon: BriefcaseIcon,
+            color: 'purple',
+            stats: [
+                { label: 'Em Andamento', value: '12' },
+                { label: 'Atrasados', value: '1' },
+                { label: 'Concluídos (Mês)', value: '4' },
+            ]
+        },
+        {
+            title: 'Helpdesk',
+            icon: LifebuoyIcon,
+            color: 'orange',
+            stats: [
+                { label: 'Novos Chamados', value: '3' },
+                { label: 'Tempo Médio Resposta', value: '2h' },
+                { label: 'Satisfação', value: '4.8/5' },
+            ]
+        },
+        {
+            title: 'Documentos & Contratos',
+            icon: DocumentTextIcon,
+            color: 'indigo',
+            stats: [
+                { label: 'Contratos Ativos', value: '28' },
+                { label: 'A Vencer (30 dias)', value: '2' },
+                { label: 'Docs Armazenados', value: '1.2GB' },
+            ]
+        },
+        {
+            title: 'Redes Sociais',
+            icon: ShareIcon,
+            color: 'pink',
+            stats: [
+                { label: 'Posts Agendados', value: '14' },
+                { label: 'Engajamento', value: '+8.5%' },
+                { label: 'Novos Seguidores', value: '120' },
+            ]
+        }
+    ];
 
     return (
-        <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow">
+        <div className="p-6 h-full overflow-auto">
-            <div className="flex items-center justify-between">
+            <div className="space-y-8">
-                <div className="flex-1">
+                {/* Header Personalizado */}
-                    <p className="text-sm font-medium text-gray-600 dark:text-gray-400">{title}</p>
+                <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
-                    <p className="text-3xl font-semibold text-gray-900 dark:text-white mt-2">{value}</p>
+                    <div>
-                    {trend !== undefined && (
+                        <h1 className="text-2xl font-heading font-bold text-gray-900 dark:text-white">
-                        <div className="flex items-center mt-2">
+                            {greeting}, {userName || 'Administrador'}! 👋
-                            {isPositive ? (
+                        </h1>
-                                <ArrowTrendingUpIcon className="w-4 h-4 text-emerald-500" />
+                        <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
-                            ) : (
+                            Aqui está o resumo da sua agência hoje. Tudo parece estar sob controle.
-                                <ArrowTrendingDownIcon className="w-4 h-4 text-red-500" />
+                        </p>
-                            )}
+                    </div>
-                            <span className={`text-sm font-medium ml-1 ${isPositive ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'}`}>
+                    <div className="flex items-center gap-3">
-                                {Math.abs(trend)}%
+                        <span className="text-xs font-medium px-3 py-1 rounded-full bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 border border-green-200 dark:border-green-800 flex items-center gap-1">
+                            <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
+                            Sistema Operacional
+                        </span>
+                        <span className="text-xs text-gray-500 dark:text-gray-400">
+                            {new Date().toLocaleDateString('pt-BR', { weekday: 'long', day: 'numeric', month: 'long' })}
                         </span>
-                            <span className="text-xs text-gray-500 dark:text-gray-400 ml-1">vs mês anterior</span>
                     </div>
+                </div>
+
+                {/* Top Stats */}
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+                    {overviewStats.map((stat) => {
+                        const Icon = stat.icon;
+                        return (
+                            <div
+                                key={stat.name}
+                                className="relative overflow-hidden rounded-xl bg-white dark:bg-zinc-900 p-4 border border-gray-200 dark:border-zinc-800 shadow-sm"
+                            >
+                                <div className="flex items-center justify-between">
+                                    <div className={`rounded-lg p-2 bg-${stat.color}-50 dark:bg-${stat.color}-900/20`}>
+                                        <Icon className={`h-6 w-6 text-${stat.color}-600 dark:text-${stat.color}-400`} />
+                                    </div>
+                                    <div className={`flex items-baseline text-sm font-semibold ${stat.changeType === 'increase' ? 'text-green-600' : 'text-red-600'
+                                        }`}>
+                                        {stat.changeType === 'increase' ? (
+                                            <ArrowTrendingUpIcon className="h-4 w-4 mr-1" />
+                                        ) : (
+                                            <ArrowTrendingDownIcon className="h-4 w-4 mr-1" />
                                         )}
+                                        {stat.change}
                                     </div>
-                <div className={`${colors.iconBg} p-3 rounded-xl`}>
-                    <Icon className={`w-8 h-8 ${colors.iconColor}`} />
                                 </div>
+                                <div className="mt-4">
+                                    <p className="text-sm font-medium text-gray-500 dark:text-gray-400">{stat.name}</p>
+                                    <p className="text-2xl font-bold text-gray-900 dark:text-white">{stat.value}</p>
                                 </div>
                             </div>
                         );
-}
+                    })}
-
-export default function DashboardPage() {
-    const router = useRouter();
-    const [stats, setStats] = useState({
-        clientes: 0,
-        projetos: 0,
-        tarefas: 0,
-        faturamento: 0
-    });
-
-    useEffect(() => {
-        // Verificar se é SUPERADMIN e redirecionar
-        const user = getUser();
-        if (user && user.role === 'SUPERADMIN') {
-            router.push('/superadmin');
-            return;
-        }
-
-        // Simulando carregamento de dados
-        setTimeout(() => {
-            setStats({
-                clientes: 127,
-                projetos: 18,
-                tarefas: 64,
-                faturamento: 87500
-            });
-        }, 300);
-    }, [router]);
-
-    return (
-        <div className="p-6 max-w-7xl mx-auto">
-            {/* Header */}
-            <div className="mb-8">
-                <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
-                    Dashboard
-                </h1>
-                <p className="text-gray-600 dark:text-gray-400">
-                    Bem-vindo ao seu painel de controle
-                </p>
                 </div>
 
-            {/* Stats Grid */}
+                {/* Modules Grid */}
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+                <div>
-                <StatCard
+                    <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
-                    title="Clientes Ativos"
+                        Performance por Módulo
-                    value={stats.clientes}
-                    icon={UserGroupIcon}
-                    trend={12.5}
-                    color="blue"
-                />
-                <StatCard
-                    title="Projetos em Andamento"
-                    value={stats.projetos}
-                    icon={FolderIcon}
-                    trend={8.2}
-                    color="purple"
-                />
-                <StatCard
-                    title="Tarefas Pendentes"
-                    value={stats.tarefas}
-                    icon={ChartBarIcon}
-                    trend={-3.1}
-                    color="gray"
-                />
-                <StatCard
-                    title="Faturamento"
-                    value={new Intl.NumberFormat('pt-BR', {
-                        style: 'currency',
-                        currency: 'BRL',
-                        minimumFractionDigits: 0
-                    }).format(stats.faturamento)}
-                    icon={CurrencyDollarIcon}
-                    trend={25.3}
-                    color="green"
-                />
-            </div>
-
-            {/* Coming Soon Card */}
-            <div className="bg-linear-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 p-12">
-                <div className="max-w-2xl mx-auto text-center">
-                    <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl mb-6" style={{ background: 'var(--gradient-primary)' }}>
-                        <ChartBarIcon className="w-8 h-8 text-white" />
-                    </div>
-                    <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-3">
-                        Em Desenvolvimento
                     </h2>
-                    <p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
+                    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-                        Estamos construindo recursos incríveis de CRM e ERP para sua agência.
+                        {modules.map((module) => {
-                        Em breve você terá acesso a análises detalhadas, gestão completa de clientes e muito mais.
+                            const Icon = module.icon;
-                    </p>
+                            return (
-                    <div className="flex flex-wrap items-center justify-center gap-3">
+                                <div
-                        {['CRM', 'ERP', 'Projetos', 'Pagamentos', 'Documentos', 'Suporte', 'Contratos'].map((item) => (
+                                    key={module.title}
-                            <span
+                                    className="rounded-xl bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 p-6 hover:border-gray-200 dark:hover:border-zinc-700 transition-colors"
-                                key={item}
-                                className="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700"
                                 >
-                                {item}
+                                    <div className="flex items-center gap-3 mb-6">
-                            </span>
+                                        <div className={`p-2 rounded-lg bg-${module.color}-50 dark:bg-${module.color}-900/20`}>
+                                            <Icon className={`h-5 w-5 text-${module.color}-600 dark:text-${module.color}-400`} />
+                                        </div>
+                                        <h3 className="font-semibold text-gray-900 dark:text-white">
+                                            {module.title}
+                                        </h3>
+                                    </div>
+                                    <div className="space-y-4">
+                                        {module.stats.map((stat, idx) => (
+                                            <div key={idx} className="flex items-center justify-between text-sm">
+                                                <span className="text-gray-500 dark:text-gray-400">{stat.label}</span>
+                                                <span className="font-medium text-gray-900 dark:text-white">{stat.value}</span>
+                                            </div>
                                         ))}
                                     </div>
                                 </div>
+                            );
+                        })}
+                    </div>
+                </div>
             </div>
         </div>
     );

front-end-agency/app/(agency)/documentos/page.tsx

@@ -0,0 +1,10 @@
+export default function DocumentosPage() {
+    return (
+        <div className="p-6">
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">Documentos</h1>
+            <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 text-center">
+                <p className="text-gray-500">Gestão Eletrônica de Documentos (GED) em breve</p>
+            </div>
+        </div>
+    );
+}

front-end-agency/app/(agency)/erp/page.tsx

@@ -0,0 +1,10 @@
+export default function ERPPage() {
+    return (
+        <div className="p-6">
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">ERP</h1>
+            <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 text-center">
+                <p className="text-gray-500">Sistema Integrado de Gestão Empresarial em breve</p>
+            </div>
+        </div>
+    );
+}

front-end-agency/app/(agency)/helpdesk/page.tsx

@@ -0,0 +1,10 @@
+export default function HelpdeskPage() {
+    return (
+        <div className="p-6">
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">Helpdesk</h1>
+            <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 text-center">
+                <p className="text-gray-500">Central de Suporte e Chamados em breve</p>
+            </div>
+        </div>
+    );
+}

front-end-agency/app/(agency)/layout.tsx

@@ -1,635 +1,34 @@
-"use client";
+import { Metadata } from 'next';
+import { getAgencyLogo, getAgencyColors } from '@/lib/server-api';
+import { AgencyLayoutClient } from './AgencyLayoutClient';
 
-import { useEffect, useState, Fragment } from 'react';
+// Forçar renderização dinâmica (não estática) para este layout
-import { usePathname, useRouter } from 'next/navigation';
+// Necessário porque usamos headers() para pegar o subdomínio
-import dynamic from 'next/dynamic';
+export const dynamic = 'force-dynamic';
-import { Menu, Transition } from '@headlessui/react';
-import {
-    Bars3Icon,
-    XMarkIcon,
-    MagnifyingGlassIcon,
-    BellIcon,
-    Cog6ToothIcon,
-    UserCircleIcon,
-    ArrowRightOnRectangleIcon,
-    ChevronDownIcon,
-    ChevronRightIcon,
-    UserGroupIcon,
-    BuildingOfficeIcon,
-    FolderIcon,
-    CreditCardIcon,
-    DocumentTextIcon,
-    LifebuoyIcon,
-    DocumentCheckIcon,
-    UsersIcon,
-    UserPlusIcon,
-    PhoneIcon,
-    FunnelIcon,
-    ChartBarIcon,
-    HomeIcon,
-    CubeIcon,
-    ShoppingCartIcon,
-    BanknotesIcon,
-    DocumentDuplicateIcon,
-    ShareIcon,
-    DocumentMagnifyingGlassIcon,
-    TrashIcon,
-    RectangleStackIcon,
-    CalendarIcon,
-    UserGroupIcon as TeamIcon,
-    ReceiptPercentIcon,
-    CreditCardIcon as PaymentIcon,
-    ChatBubbleLeftRightIcon,
-    BookOpenIcon,
-    ArchiveBoxIcon,
-    PencilSquareIcon,
-} from '@heroicons/react/24/outline';
 
-const ThemeToggle = dynamic(() => import('@/components/ThemeToggle'), { ssr: false });
+/**
-const ThemeTester = dynamic(() => import('@/components/ThemeTester'), { ssr: false });
+ * generateMetadata - Executado no servidor antes do render
-const DynamicFavicon = dynamic(() => import('@/components/DynamicFavicon'), { ssr: false });
+ * Define o favicon dinamicamente baseado no subdomínio da agência
+ */
+export async function generateMetadata(): Promise<Metadata> {
+    const logoUrl = await getAgencyLogo();
 
-const DEFAULT_GRADIENT = 'linear-gradient(135deg, #ff3a05, #ff0080)';
+    return {
-
+        icons: {
-const setGradientVariables = (gradient: string) => {
+            icon: logoUrl || '/favicon.ico',
-    document.documentElement.style.setProperty('--gradient-primary', gradient);
+            shortcut: logoUrl || '/favicon.ico',
-    document.documentElement.style.setProperty('--gradient', gradient);
+            apple: logoUrl || '/favicon.ico',
-    document.documentElement.style.setProperty('--gradient-text', gradient.replace('90deg', 'to right'));
+        },
-    document.documentElement.style.setProperty('--color-gradient-brand', gradient.replace('90deg', 'to right'));
     };
+}
 
-export default function AgencyLayout({
+export default async function AgencyLayout({
     children,
 }: {
     children: React.ReactNode;
 }) {
-    const router = useRouter();
+    // Buscar cores da agência no servidor
-    const pathname = usePathname();
+    const colors = await getAgencyColors();
-    const [user, setUser] = useState<any>(null);
-    const [agencyName, setAgencyName] = useState('');
-    const [agencyLogo, setAgencyLogo] = useState('');
-    const [sidebarOpen, setSidebarOpen] = useState(true);
-    const [searchOpen, setSearchOpen] = useState(false);
-    const [activeSubmenu, setActiveSubmenu] = useState<number | null>(null);
-    const [selectedClient, setSelectedClient] = useState<any>(null);
 
-    // Mock de clientes - no futuro virá da API
+    return <AgencyLayoutClient colors={colors}>{children}</AgencyLayoutClient>;
-    const clients = [
-        { id: 1, name: 'Todos os Clientes', avatar: null },
-        { id: 2, name: 'Empresa ABC Ltda', avatar: 'A' },
-        { id: 3, name: 'Tech Solutions Inc', avatar: 'T' },
-        { id: 4, name: 'Marketing Pro', avatar: 'M' },
-        { id: 5, name: 'Design Studio', avatar: 'D' },
-    ];
-
-    useEffect(() => {
-        const token = localStorage.getItem('token');
-        const userData = localStorage.getItem('user');
-
-        if (!token || !userData) {
-            router.push('/login');
-            return;
-        }
-        const parsedUser = JSON.parse(userData);
-        setUser(parsedUser);
-
-        if (parsedUser.role === 'SUPERADMIN') {
-            router.push('/superadmin');
-            return;
-        }
-
-        const hostname = window.location.hostname;
-        const hostSubdomain = hostname.split('.')[0] || 'default';
-        const themeKey = parsedUser?.subdomain || parsedUser?.tenantId || parsedUser?.tenant_id || hostSubdomain;
-
-        setAgencyName(parsedUser?.subdomain || hostSubdomain);
-
-        // Buscar logo da agência
-        const fetchAgencyLogo = async () => {
-            try {
-                const response = await fetch('/api/agency/profile', {
-                    headers: {
-                        'Authorization': `Bearer ${token}`,
-                        'Content-Type': 'application/json',
-                    },
-                });
-
-                if (response.ok) {
-                    const data = await response.json();
-                    if (data.logo_url) {
-                        setAgencyLogo(data.logo_url);
-                    }
-                }
-            } catch (error) {
-                console.error('Erro ao buscar logo da agência:', error);
-            }
-        };
-
-        fetchAgencyLogo();
-
-        const storedGradient = localStorage.getItem(`agency-theme:${themeKey}`);
-        setGradientVariables(storedGradient || DEFAULT_GRADIENT);
-
-        // Inicializar com "Todos os Clientes"
-        setSelectedClient(clients[0]);
-
-        // Atalho de teclado para abrir pesquisa (Ctrl/Cmd + K)
-        const handleKeyDown = (e: KeyboardEvent) => {
-            if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
-                e.preventDefault();
-                setSearchOpen(true);
-            }
-            if (e.key === 'Escape') {
-                setSearchOpen(false);
-            }
-        };
-
-        window.addEventListener('keydown', handleKeyDown);
-        return () => {
-            window.removeEventListener('keydown', handleKeyDown);
-            setGradientVariables(DEFAULT_GRADIENT);
-        };
-    }, [router]);
-
-    useEffect(() => {
-        const hostname = window.location.hostname;
-        const hostSubdomain = hostname.split('.')[0] || 'default';
-        const userData = localStorage.getItem('user');
-        const parsedUser = userData ? JSON.parse(userData) : null;
-        const themeKey = parsedUser?.subdomain || parsedUser?.tenantId || parsedUser?.tenant_id || hostSubdomain;
-        const storedGradient = localStorage.getItem(`agency-theme:${themeKey}`) || DEFAULT_GRADIENT;
-
-        setGradientVariables(storedGradient);
-    }, [pathname]);
-
-    if (!user) {
-        return null;
-    }
-
-    const menuItems = [
-        {
-            icon: UserGroupIcon,
-            label: 'CRM',
-            href: '/crm',
-            submenu: [
-                { icon: UsersIcon, label: 'Clientes', href: '/crm/clientes' },
-                { icon: UserPlusIcon, label: 'Leads', href: '/crm/leads' },
-                { icon: PhoneIcon, label: 'Contatos', href: '/crm/contatos' },
-                { icon: FunnelIcon, label: 'Funil de Vendas', href: '/crm/funil' },
-                { icon: ChartBarIcon, label: 'Relatórios', href: '/crm/relatorios' },
-            ]
-        },
-        {
-            icon: BuildingOfficeIcon,
-            label: 'ERP',
-            href: '/erp',
-            submenu: [
-                { icon: HomeIcon, label: 'Dashboard', href: '/erp/dashboard' },
-                { icon: CubeIcon, label: 'Estoque', href: '/erp/estoque' },
-                { icon: ShoppingCartIcon, label: 'Compras', href: '/erp/compras' },
-                { icon: BanknotesIcon, label: 'Vendas', href: '/erp/vendas' },
-                { icon: ChartBarIcon, label: 'Financeiro', href: '/erp/financeiro' },
-            ]
-        },
-        {
-            icon: FolderIcon,
-            label: 'Projetos',
-            href: '/projetos',
-            submenu: [
-                { icon: RectangleStackIcon, label: 'Todos Projetos', href: '/projetos/todos' },
-                { icon: RectangleStackIcon, label: 'Kanban', href: '/projetos/kanban' },
-                { icon: CalendarIcon, label: 'Calendário', href: '/projetos/calendario' },
-                { icon: TeamIcon, label: 'Equipes', href: '/projetos/equipes' },
-            ]
-        },
-        {
-            icon: CreditCardIcon,
-            label: 'Pagamentos',
-            href: '/pagamentos',
-            submenu: [
-                { icon: DocumentTextIcon, label: 'Faturas', href: '/pagamentos/faturas' },
-                { icon: ReceiptPercentIcon, label: 'Recebimentos', href: '/pagamentos/recebimentos' },
-                { icon: PaymentIcon, label: 'Assinaturas', href: '/pagamentos/assinaturas' },
-                { icon: BanknotesIcon, label: 'Gateway', href: '/pagamentos/gateway' },
-            ]
-        },
-        {
-            icon: DocumentTextIcon,
-            label: 'Documentos',
-            href: '/documentos',
-            submenu: [
-                { icon: FolderIcon, label: 'Meus Arquivos', href: '/documentos/arquivos' },
-                { icon: ShareIcon, label: 'Compartilhados', href: '/documentos/compartilhados' },
-                { icon: DocumentDuplicateIcon, label: 'Modelos', href: '/documentos/modelos' },
-                { icon: TrashIcon, label: 'Lixeira', href: '/documentos/lixeira' },
-            ]
-        },
-        {
-            icon: LifebuoyIcon,
-            label: 'Suporte',
-            href: '/suporte',
-            submenu: [
-                { icon: DocumentMagnifyingGlassIcon, label: 'Tickets', href: '/suporte/tickets' },
-                { icon: BookOpenIcon, label: 'Base de Conhecimento', href: '/suporte/kb' },
-                { icon: ChatBubbleLeftRightIcon, label: 'Chat', href: '/suporte/chat' },
-            ]
-        },
-        {
-            icon: DocumentCheckIcon,
-            label: 'Contratos',
-            href: '/contratos',
-            submenu: [
-                { icon: DocumentCheckIcon, label: 'Ativos', href: '/contratos/ativos' },
-                { icon: PencilSquareIcon, label: 'Rascunhos', href: '/contratos/rascunhos' },
-                { icon: ArchiveBoxIcon, label: 'Arquivados', href: '/contratos/arquivados' },
-                { icon: DocumentDuplicateIcon, label: 'Modelos', href: '/contratos/modelos' },
-            ]
-        },
-    ];
-
-    const handleLogout = () => {
-        localStorage.removeItem('token');
-        localStorage.removeItem('user');
-        router.push('/login');
-    };
-
-    return (
-        <div className="flex h-screen bg-gray-50 dark:bg-gray-950">
-            {/* Favicon Dinâmico */}
-            <DynamicFavicon logoUrl={agencyLogo} />
-
-            {/* Sidebar */}
-            <aside className={`${activeSubmenu !== null ? 'w-20' : (sidebarOpen ? 'w-64' : 'w-20')} transition-all duration-300 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col`}>
-                {/* Logo */}
-                <div className="h-16 flex items-center justify-center border-b border-gray-200 dark:border-gray-800">
-                    {(sidebarOpen && activeSubmenu === null) ? (
-                        <div className="flex items-center justify-between px-4 w-full">
-                            <div className="flex items-center space-x-3">
-                                {agencyLogo ? (
-                                    <img src={agencyLogo} alt="Logo" className="w-8 h-8 rounded-lg object-contain shrink-0" />
-                                ) : (
-                                    <div className="w-8 h-8 rounded-lg shrink-0" style={{ background: 'var(--gradient-primary)' }}></div>
-                                )}
-                                <span className="font-bold text-lg dark:text-white capitalize">{agencyName}</span>
-                            </div>
-                            <button
-                                onClick={() => setSidebarOpen(!sidebarOpen)}
-                                className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors cursor-pointer"
-                            >
-                                <XMarkIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
-                            </button>
-                        </div>
-                    ) : (
-                        <>
-                            {agencyLogo ? (
-                                <img src={agencyLogo} alt="Logo" className="w-8 h-8 rounded-lg object-contain" />
-                            ) : (
-                                <div className="w-8 h-8 rounded-lg" style={{ background: 'var(--gradient-primary)' }}></div>
-                            )}
-                        </>
-                    )}
-                </div>
-
-                {/* Menu */}
-                <nav className="flex-1 overflow-y-auto py-4 px-3">
-                    {menuItems.map((item, idx) => {
-                        const Icon = item.icon;
-                        const isActive = activeSubmenu === idx;
-                        return (
-                            <button
-                                key={idx}
-                                onClick={() => setActiveSubmenu(isActive ? null : idx)}
-                                className={`w-full flex items-center ${(sidebarOpen && activeSubmenu === null) ? 'space-x-3 px-3' : 'justify-center px-0'} py-2.5 mb-1 rounded-lg transition-all group cursor-pointer ${isActive
-                                        ? 'bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900'
-                                        : 'hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
-                                    }`}
-                            >
-                                <Icon className={`${(sidebarOpen && activeSubmenu === null) ? 'w-5 h-5' : 'w-[18px] h-[18px]'} stroke-[1.5]`} />
-                                {(sidebarOpen && activeSubmenu === null) && (
-                                    <>
-                                        <span className="flex-1 text-left text-sm font-normal">{item.label}</span>
-                                        <ChevronRightIcon className={`w-4 h-4 transition-transform ${isActive ? 'rotate-90' : ''}`} />
-                                    </>
-                                )}
-                            </button>
-                        );
-                    })}
-                </nav>
-
-                {/* User Menu */}
-                <div className="p-4 border-t border-gray-200 dark:border-gray-800">
-                    {(sidebarOpen && activeSubmenu === null) ? (
-                        <Menu as="div" className="relative">
-                            <Menu.Button className="w-full flex items-center space-x-3 p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-colors">
-                                <div className="w-10 h-10 rounded-full flex items-center justify-center text-white font-semibold" style={{ background: 'var(--gradient-primary)' }}>
-                                    {user?.name?.charAt(0).toUpperCase()}
-                                </div>
-                                <div className="flex-1 text-left">
-                                    <p className="text-sm font-medium text-gray-900 dark:text-white truncate">{user?.name}</p>
-                                    <p className="text-xs text-gray-500 dark:text-gray-400">{user?.role === 'ADMIN_AGENCIA' ? 'Admin' : 'Cliente'}</p>
-                                </div>
-                                <ChevronDownIcon className="w-4 h-4 text-gray-400" />
-                            </Menu.Button>
-                            <Transition
-                                as={Fragment}
-                                enter="transition ease-out duration-100"
-                                enterFrom="transform opacity-0 scale-95"
-                                enterTo="transform opacity-100 scale-100"
-                                leave="transition ease-in duration-75"
-                                leaveFrom="transform opacity-100 scale-100"
-                                leaveTo="transform opacity-0 scale-95"
-                            >
-                                <Menu.Items className="absolute bottom-full left-0 right-0 mb-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
-                                    <Menu.Item>
-                                        {({ active }) => (
-                                            <a
-                                                href="/perfil"
-                                                className={`${active ? 'bg-gray-100 dark:bg-gray-700' : ''} flex items-center px-4 py-3 text-sm text-gray-700 dark:text-gray-300`}
-                                            >
-                                                <UserCircleIcon className="w-5 h-5 mr-3" />
-                                                Meu Perfil
-                                            </a>
-                                        )}
-                                    </Menu.Item>
-                                    <Menu.Item>
-                                        {({ active }) => (
-                                            <button
-                                                onClick={handleLogout}
-                                                className={`${active ? 'bg-gray-100 dark:bg-gray-700' : ''} w-full flex items-center px-4 py-3 text-sm text-red-600 dark:text-red-400`}
-                                            >
-                                                <ArrowRightOnRectangleIcon className="w-5 h-5 mr-3" />
-                                                Sair
-                                            </button>
-                                        )}
-                                    </Menu.Item>
-                                </Menu.Items>
-                            </Transition>
-                        </Menu>
-                    ) : (
-                        <button
-                            onClick={handleLogout}
-                            className="w-10 h-10 mx-auto rounded-full flex items-center justify-center text-white cursor-pointer"
-                            style={{ background: 'var(--gradient-primary)' }}
-                            title="Sair"
-                        >
-                            <ArrowRightOnRectangleIcon className="w-5 h-5" />
-                        </button>
-                    )}
-                </div>
-            </aside>
-
-            {/* Submenu Lateral */}
-            <Transition
-                show={activeSubmenu !== null}
-                as={Fragment}
-                enter="transition ease-out duration-200"
-                enterFrom="transform -translate-x-full opacity-0"
-                enterTo="transform translate-x-0 opacity-100"
-                leave="transition ease-in duration-150"
-                leaveFrom="transform translate-x-0 opacity-100"
-                leaveTo="transform -translate-x-full opacity-0"
-            >
-                <aside className="w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col">
-                    {activeSubmenu !== null && (
-                        <>
-                            <div className="h-16 flex items-center justify-between px-4 border-b border-gray-200 dark:border-gray-800">
-                                <h2 className="font-semibold text-gray-900 dark:text-white">{menuItems[activeSubmenu].label}</h2>
-                                <button
-                                    onClick={() => setActiveSubmenu(null)}
-                                    className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors cursor-pointer"
-                                >
-                                    <XMarkIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
-                                </button>
-                            </div>
-                            <nav className="flex-1 overflow-y-auto py-4 px-3">
-                                {menuItems[activeSubmenu].submenu?.map((subItem, idx) => {
-                                    const SubIcon = subItem.icon;
-                                    return (
-                                        <a
-                                            key={idx}
-                                            href={subItem.href}
-                                            className="flex items-center space-x-3 px-4 py-2.5 mb-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-sm text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors cursor-pointer"
-                                        >
-                                            <SubIcon className="w-5 h-5 stroke-[1.5]" />
-                                            <span>{subItem.label}</span>
-                                        </a>
-                                    );
-                                })}
-                            </nav>
-                        </>
-                    )}
-                </aside>
-            </Transition>
-
-            {/* Main Content */}
-            <div className="flex-1 flex flex-col overflow-hidden">
-                {/* Header */}
-                <header className="h-16 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between px-6">
-                    <div className="flex items-center space-x-4">
-                        <h1 className="text-lg font-semibold text-gray-900 dark:text-white">
-                            Dashboard
-                        </h1>
-
-                        {/* Seletor de Cliente */}
-                        <Menu as="div" className="relative">
-                            <Menu.Button className="flex items-center space-x-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors cursor-pointer">
-                                {selectedClient?.avatar ? (
-                                    <div className="w-6 h-6 rounded-full flex items-center justify-center text-white text-xs font-semibold" style={{ background: 'var(--gradient-primary)' }}>
-                                        {selectedClient.avatar}
-                                    </div>
-                                ) : (
-                                    <UsersIcon className="w-4 h-4 text-gray-600 dark:text-gray-400" />
-                                )}
-                                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                                    {selectedClient?.name || 'Selecionar Cliente'}
-                                </span>
-                                <ChevronDownIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
-                            </Menu.Button>
-                            <Transition
-                                as={Fragment}
-                                enter="transition ease-out duration-100"
-                                enterFrom="transform opacity-0 scale-95"
-                                enterTo="transform opacity-100 scale-100"
-                                leave="transition ease-in duration-75"
-                                leaveFrom="transform opacity-100 scale-100"
-                                leaveTo="transform opacity-0 scale-95"
-                            >
-                                <Menu.Items className="absolute left-0 mt-2 w-72 bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden z-50">
-                                    <div className="p-3 border-b border-gray-200 dark:border-gray-700">
-                                        <div className="relative">
-                                            <MagnifyingGlassIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
-                                            <input
-                                                type="text"
-                                                placeholder="Buscar cliente..."
-                                                className="w-full pl-9 pr-3 py-2 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600"
-                                            />
-                                        </div>
-                                    </div>
-                                    <div className="max-h-64 overflow-y-auto p-2">
-                                        {clients.map((client) => (
-                                            <Menu.Item key={client.id}>
-                                                {({ active }) => (
-                                                    <button
-                                                        onClick={() => setSelectedClient(client)}
-                                                        className={`${active ? 'bg-gray-100 dark:bg-gray-700' : ''
-                                                            } ${selectedClient?.id === client.id ? 'bg-gray-100 dark:bg-gray-800' : ''
-                                                            } w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg transition-colors cursor-pointer`}
-                                                    >
-                                                        {client.avatar ? (
-                                                            <div className="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-semibold shrink-0" style={{ background: 'var(--gradient-primary)' }}>
-                                                                {client.avatar}
-                                                            </div>
-                                                        ) : (
-                                                            <div className="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shrink-0">
-                                                                <UsersIcon className="w-4 h-4 text-gray-600 dark:text-gray-400" />
-                                                            </div>
-                                                        )}
-                                                        <span className="flex-1 text-left text-sm font-medium text-gray-900 dark:text-white">
-                                                            {client.name}
-                                                        </span>
-                                                        {selectedClient?.id === client.id && (
-                                                            <div className="w-2 h-2 rounded-full bg-gray-900 dark:bg-gray-100"></div>
-                                                        )}
-                                                    </button>
-                                                )}
-                                            </Menu.Item>
-                                        ))}
-                                    </div>
-                                </Menu.Items>
-                            </Transition>
-                        </Menu>
-                    </div>
-
-                    <div className="flex items-center space-x-2">
-                        {/* Pesquisa */}
-                        <button
-                            onClick={() => setSearchOpen(true)}
-                            className="flex items-center space-x-2 px-3 py-2 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors"
-                        >
-                            <MagnifyingGlassIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
-                            <span className="text-sm text-gray-500 dark:text-gray-400">Pesquisar...</span>
-                            <kbd className="hidden sm:inline-flex items-center px-2 py-0.5 text-xs font-medium text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded">
-                                Ctrl K
-                            </kbd>
-                        </button>
-
-                        <ThemeToggle />
-
-                        {/* Notificações */}
-                        <Menu as="div" className="relative">
-                            <Menu.Button className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg relative transition-colors">
-                                <BellIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
-                                <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full"></span>
-                            </Menu.Button>
-                            <Transition
-                                as={Fragment}
-                                enter="transition ease-out duration-100"
-                                enterFrom="transform opacity-0 scale-95"
-                                enterTo="transform opacity-100 scale-100"
-                                leave="transition ease-in duration-75"
-                                leaveFrom="transform opacity-100 scale-100"
-                                leaveTo="transform opacity-0 scale-95"
-                            >
-                                <Menu.Items className="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
-                                    <div className="p-4 border-b border-gray-200 dark:border-gray-700">
-                                        <h3 className="font-semibold text-gray-900 dark:text-white">Notificações</h3>
-                                    </div>
-                                    <div className="p-4 text-center text-sm text-gray-500 dark:text-gray-400">
-                                        Nenhuma notificação no momento
-                                    </div>
-                                </Menu.Items>
-                            </Transition>
-                        </Menu>
-
-                        {/* Configurações */}
-                        <a
-                            href="/configuracoes"
-                            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
-                        >
-                            <Cog6ToothIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
-                        </a>
-                    </div>
-                </header>
-
-                {/* Page Content */}
-                <main className="flex-1 overflow-y-auto bg-gray-50 dark:bg-gray-950">
-                    {children}
-                </main>
-            </div>
-
-            {/* Modal de Pesquisa */}
-            <Transition appear show={searchOpen} as={Fragment}>
-                <div className="fixed inset-0 z-50 overflow-y-auto">
-                    <Transition.Child
-                        as={Fragment}
-                        enter="ease-out duration-200"
-                        enterFrom="opacity-0"
-                        enterTo="opacity-100"
-                        leave="ease-in duration-150"
-                        leaveFrom="opacity-100"
-                        leaveTo="opacity-0"
-                    >
-                        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm" onClick={() => setSearchOpen(false)} />
-                    </Transition.Child>
-
-                    <div className="flex min-h-full items-start justify-center p-4 pt-[15vh]">
-                        <Transition.Child
-                            as={Fragment}
-                            enter="ease-out duration-200"
-                            enterFrom="opacity-0 scale-95"
-                            enterTo="opacity-100 scale-100"
-                            leave="ease-in duration-150"
-                            leaveFrom="opacity-100 scale-100"
-                            leaveTo="opacity-0 scale-95"
-                        >
-                            <div className="w-full max-w-2xl bg-white dark:bg-gray-900 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-800 overflow-hidden relative z-10">
-                                <div className="flex items-center px-4 border-b border-gray-200 dark:border-gray-800">
-                                    <MagnifyingGlassIcon className="w-5 h-5 text-gray-400" />
-                                    <input
-                                        type="text"
-                                        placeholder="Pesquisar páginas, clientes, projetos..."
-                                        autoFocus
-                                        className="w-full px-4 py-4 bg-transparent text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none"
-                                    />
-                                    <button
-                                        onClick={() => setSearchOpen(false)}
-                                        className="text-xs text-gray-500 dark:text-gray-400 px-2 py-1 border border-gray-300 dark:border-gray-700 rounded"
-                                    >
-                                        ESC
-                                    </button>
-                                </div>
-
-                                <div className="p-4 max-h-96 overflow-y-auto">
-                                    <div className="text-center py-12">
-                                        <MagnifyingGlassIcon className="w-12 h-12 text-gray-300 dark:text-gray-700 mx-auto mb-3" />
-                                        <p className="text-sm text-gray-500 dark:text-gray-400">
-                                            Digite para buscar...
-                                        </p>
-                                    </div>
-                                </div>
-
-                                <div className="px-4 py-3 border-t border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-950">
-                                    <div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
-                                        <div className="flex items-center space-x-4">
-                                            <span className="flex items-center">
-                                                <kbd className="px-2 py-1 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded mr-1">↑↓</kbd>
-                                                navegar
-                                            </span>
-                                            <span className="flex items-center">
-                                                <kbd className="px-2 py-1 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded mr-1">↵</kbd>
-                                                selecionar
-                                            </span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </Transition.Child>
-                    </div>
-                </div>
-            </Transition>
-
-            {/* Theme Tester - Temporário para desenvolvimento */}
-            <ThemeTester />
-        </div>
-    );
 }

front-end-agency/app/(agency)/pagamentos/page.tsx

@@ -0,0 +1,10 @@
+export default function PagamentosPage() {
+    return (
+        <div className="p-6">
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">Pagamentos</h1>
+            <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 text-center">
+                <p className="text-gray-500">Gestão de Pagamentos e Cobranças em breve</p>
+            </div>
+        </div>
+    );
+}

front-end-agency/app/(agency)/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function AgencyRootPage() {
+    redirect('/dashboard');
+}

front-end-agency/app/(agency)/projetos/page.tsx

@@ -0,0 +1,10 @@
+export default function ProjetosPage() {
+    return (
+        <div className="p-6">
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">Projetos</h1>
+            <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 text-center">
+                <p className="text-gray-500">Gestão de Projetos em breve</p>
+            </div>
+        </div>
+    );
+}

front-end-agency/app/(agency)/social/page.tsx

@@ -0,0 +1,10 @@
+export default function SocialPage() {
+    return (
+        <div className="p-6">
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">Gestão de Redes Sociais</h1>
+            <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 text-center">
+                <p className="text-gray-500">Planejamento e Publicação de Posts em breve</p>
+            </div>
+        </div>
+    );
+}

front-end-agency/app/(auth)/recuperar-senha/page.tsx

@@ -1,14 +1,26 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import Link from "next/link";
 import { Button, Input } from "@/components/ui";
 import toast, { Toaster } from 'react-hot-toast';
+import { EnvelopeIcon } from "@heroicons/react/24/outline";
 
 export default function RecuperarSenhaPage() {
     const [isLoading, setIsLoading] = useState(false);
     const [email, setEmail] = useState("");
     const [emailSent, setEmailSent] = useState(false);
+    const [subdomain, setSubdomain] = useState<string>('');
+    const [isSuperAdmin, setIsSuperAdmin] = useState(false);
+
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            const hostname = window.location.hostname;
+            const sub = hostname.split('.')[0];
+            setSubdomain(sub);
+            setIsSuperAdmin(sub === 'dash');
+        }
+    }, []);
 
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
@@ -77,8 +89,10 @@ export default function RecuperarSenhaPage() {
                     <div className="w-full max-w-md">
                         {/* Logo mobile */}
                         <div className="lg:hidden text-center mb-8">
-                            <div className="inline-block px-6 py-3 rounded-2xl" style={{ background: 'var(--gradient-primary)' }}>
+                            <div className="inline-block px-6 py-3 rounded-2xl" style={{ background: 'var(--brand-color)' }}>
-                                <h1 className="text-3xl font-bold text-white">aggios</h1>
+                                <h1 className="text-3xl font-bold text-white">
+                                    {isSuperAdmin ? 'aggios' : subdomain}
+                                </h1>
                             </div>
                         </div>
 
@@ -100,7 +114,7 @@ export default function RecuperarSenhaPage() {
                                         label="Email"
                                         type="email"
                                         placeholder="seu@email.com"
-                                        leftIcon="ri-mail-line"
+                                        leftIcon={<EnvelopeIcon className="w-5 h-5" />}
                                         value={email}
                                         onChange={(e) => setEmail(e.target.value)}
                                         required
@@ -109,142 +123,71 @@ export default function RecuperarSenhaPage() {
                                     <Button
                                         type="submit"
                                         variant="primary"
-                                        className="w-full"
                                         size="lg"
+                                        className="w-full"
                                         isLoading={isLoading}
                                     >
                                         Enviar link de recuperação
                                     </Button>
-                                </form>
 
-                                {/* Back to login */}
+                                    <div className="text-center">
-                                <div className="mt-6 text-center">
                                         <Link
                                             href="/login"
-                                        className="text-[14px] gradient-text hover:underline inline-flex items-center gap-2 font-medium cursor-pointer"
+                                            className="text-[14px] font-medium hover:opacity-80 transition-opacity"
+                                            style={{ color: 'var(--brand-color)' }}
                                         >
-                                        <i className="ri-arrow-left-line" />
                                             Voltar para o login
                                         </Link>
                                     </div>
+                                </form>
                             </>
                         ) : (
-                            <>
-                                {/* Success Message */}
                             <div className="text-center">
-                                    <div className="w-20 h-20 rounded-full bg-[#10B981]/10 flex items-center justify-center mx-auto mb-6">
+                                <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
-                                        <i className="ri-mail-check-line text-4xl text-[#10B981]" />
+                                    <i className="ri-mail-check-line text-3xl text-green-600"></i>
                                 </div>
-
+                                <h2 className="text-[24px] font-bold text-zinc-900 dark:text-white mb-2">
-                                    <h2 className="text-[28px] font-bold text-zinc-900 dark:text-white mb-4">
+                                    Verifique seu email
-                                        Email enviado!
                                 </h2>
-
+                                <p className="text-zinc-600 dark:text-zinc-400 mb-8">
-                                    <p className="text-[14px] text-zinc-600 dark:text-zinc-400 mb-2">
+                                    Enviamos um link de recuperação para <strong>{email}</strong>
-                                        Enviamos um link de recuperação para:
                                 </p>
-
-                                    <p className="text-[16px] font-semibold text-zinc-900 dark:text-white mb-6">
-                                        {email}
-                                    </p>
-
-                                    <div className="p-6 bg-[#F0F9FF] border border-[#BAE6FD] rounded-md text-left mb-6">
-                                        <div className="flex gap-4">
-                                            <i className="ri-information-line text-[#ff3a05] text-xl mt-0.5" />
-                                            <div>
-                                                <h4 className="text-sm font-semibold text-zinc-900 dark:text-white mb-1">
-                                                    Verifique sua caixa de entrada
-                                                </h4>
-                                                <p className="text-xs text-zinc-600 dark:text-zinc-400">
-                                                    Clique no link que enviamos para redefinir sua senha.
-                                                    Se não receber em alguns minutos, verifique sua pasta de spam.
-                                                </p>
-                                            </div>
-                                        </div>
-                                    </div>
-
                                 <Button
                                     variant="outline"
-                                        className="w-full mb-4"
+                                    className="w-full"
                                     onClick={() => setEmailSent(false)}
                                 >
-                                        Enviar novamente
+                                    Tentar outro email
                                 </Button>
-
+                                <div className="mt-6">
                                     <Link
                                         href="/login"
-                                        className="text-[14px] gradient-text hover:underline inline-flex items-center gap-2 font-medium cursor-pointer"
+                                        className="text-[14px] font-medium hover:opacity-80 transition-opacity"
+                                        style={{ color: 'var(--brand-color)' }}
                                     >
-                                        <i className="ri-arrow-left-line" />
                                         Voltar para o login
                                     </Link>
                                 </div>
-                            </>
+                            </div>
                         )}
                     </div>
                 </div>
 
                 {/* Lado Direito - Branding */}
-                <div className="hidden lg:flex lg:w-1/2 relative overflow-hidden" style={{ background: 'var(--gradient-primary)' }}>
+                <div className="hidden lg:flex lg:w-1/2 relative overflow-hidden" style={{ background: 'var(--brand-color)' }}>
-                    <div className="relative z-10 flex flex-col justify-center items-center w-full p-12 text-white">
+                    <div className="absolute inset-0 flex flex-col items-center justify-center p-12 text-white">
-                        {/* Logo */}
+                        <div className="max-w-md text-center">
-                        <div className="mb-8">
+                            <h1 className="text-5xl font-bold mb-6">
-                            <div className="inline-block px-6 py-3 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20">
+                                {isSuperAdmin ? 'aggios' : subdomain}
-                                <h1 className="text-5xl font-bold tracking-tight text-white">
-                                    aggios
                             </h1>
-                            </div>
+                            <p className="text-xl opacity-90">
-                        </div>
+                                Recupere o acesso à sua conta de forma segura e rápida.
-
-                        {/* Conteúdo */}
-                        <div className="max-w-lg text-center">
-                            <div className="w-20 h-20 rounded-2xl bg-white/20 flex items-center justify-center mb-6 mx-auto">
-                                <i className="ri-lock-password-line text-4xl" />
-                            </div>
-                            <h2 className="text-4xl font-bold mb-4">Recuperação segura</h2>
-                            <p className="text-white/80 text-lg mb-8">
-                                Protegemos seus dados com os mais altos padrões de segurança.
-                                Seu link de recuperação é único e expira em 24 horas.
                             </p>
-
-                            {/* Features */}
-                            <div className="space-y-4 text-left">
-                                <div className="flex items-start gap-3">
-                                    <div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
-                                        <i className="ri-shield-check-line text-sm" />
-                                    </div>
-                                    <div>
-                                        <h4 className="font-semibold mb-1">Criptografia de ponta</h4>
-                                        <p className="text-white/70 text-sm">Seus dados são protegidos com tecnologia de última geração</p>
                         </div>
                     </div>
-                                <div className="flex items-start gap-3">
-                                    <div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
-                                        <i className="ri-time-line text-sm" />
-                                    </div>
-                                    <div>
-                                        <h4 className="font-semibold mb-1">Link temporário</h4>
-                                        <p className="text-white/70 text-sm">O link expira em 24h para sua segurança</p>
-                                    </div>
-                                </div>
-                                <div className="flex items-start gap-3">
-                                    <div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
-                                        <i className="ri-customer-service-2-line text-sm" />
-                                    </div>
-                                    <div>
-                                        <h4 className="font-semibold mb-1">Suporte disponível</h4>
-                                        <p className="text-white/70 text-sm">Nossa equipe está pronta para ajudar caso precise</p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    {/* Círculos decorativos */}
-                    <div className="absolute top-0 right-0 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
-                    <div className="absolute bottom-0 left-0 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
                 </div>
             </div>
         </>
     );
 }
+

front-end-agency/app/LayoutWrapper.tsx

@@ -1,25 +1,53 @@
 'use client';
 
 import { ReactNode } from 'react';
-import { useEffect } from 'react';
-import { usePathname } from 'next/navigation';
 
-const DEFAULT_GRADIENT = 'linear-gradient(135deg, #ff3a05, #ff0080)';
+// Helper to lighten color
+const lightenColor = (color: string, percent: number) => {
+    const num = parseInt(color.replace("#", ""), 16),
+        amt = Math.round(2.55 * percent),
+        R = (num >> 16) + amt,
+        B = ((num >> 8) & 0x00ff) + amt,
+        G = (num & 0x0000ff) + amt;
+    return (
+        "#" +
+        (
+            0x1000000 +
+            (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
+            (B < 255 ? (B < 1 ? 0 : B) : 255) * 0x100 +
+            (G < 255 ? (G < 1 ? 0 : G) : 255)
+        )
+            .toString(16)
+            .slice(1)
+    );
+};
 
-const setGradientVariables = (gradient: string) => {
+const setBrandColors = (primary: string, secondary: string) => {
-    document.documentElement.style.setProperty('--gradient-primary', gradient);
+    document.documentElement.style.setProperty('--brand-color', primary);
-    document.documentElement.style.setProperty('--gradient', gradient);
+    document.documentElement.style.setProperty('--brand-color-strong', secondary);
-    document.documentElement.style.setProperty('--gradient-text', gradient.replace('90deg', 'to right'));
+
-    document.documentElement.style.setProperty('--color-gradient-brand', gradient.replace('90deg', 'to right'));
+    // Create a lighter version of primary for hover
+    const primaryLight = lightenColor(primary, 20); // Lighten by 20%
+    document.documentElement.style.setProperty('--brand-color-hover', primaryLight);
+
+    // Set RGB variables if needed by other components
+    const hexToRgb = (hex: string) => {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}` : null;
+    };
+
+    const primaryRgb = hexToRgb(primary);
+    const secondaryRgb = hexToRgb(secondary);
+    const primaryLightRgb = hexToRgb(primaryLight);
+
+    if (primaryRgb) document.documentElement.style.setProperty('--brand-rgb', primaryRgb);
+    if (secondaryRgb) document.documentElement.style.setProperty('--brand-strong-rgb', secondaryRgb);
+    if (primaryLightRgb) document.documentElement.style.setProperty('--brand-hover-rgb', primaryLightRgb);
 };
 
 export default function LayoutWrapper({ children }: { children: ReactNode }) {
-    const pathname = usePathname();
+    // Temporariamente desativado o carregamento dinâmico de cores/tema para eliminar possíveis
-
+    // efeitos colaterais de hidratação e 429 no middleware/backend. Se precisar reativar, mover
-    useEffect(() => {
+    // para nível de servidor (next/head ou metadata) para evitar mutações de DOM no cliente.
-        // Em toda troca de rota, volta para o tema padrão; layouts específicos (ex.: agência) aplicam o próprio na sequência
-        setGradientVariables(DEFAULT_GRADIENT);
-    }, [pathname]);
-
     return <>{children}</>;
 }

front-end-agency/app/api/agency/logo/route.ts

@@ -4,19 +4,33 @@ const BACKEND_URL = process.env.API_INTERNAL_URL || 'http://aggios-backend:8080'
 
 export async function POST(request: NextRequest) {
     try {
+        console.log('🔵 [Next.js] Logo upload route called');
+
         const authorization = request.headers.get('authorization');
 
         if (!authorization) {
+            console.log('❌ [Next.js] No authorization header');
             return NextResponse.json(
                 { error: 'Unauthorized' },
                 { status: 401 }
             );
         }
 
+        console.log('✅ [Next.js] Authorization header present');
+
         // Get form data from request
         const formData = await request.formData();
+        const logo = formData.get('logo');
+        const type = formData.get('type');
 
-        console.log('Forwarding logo upload to backend:', BACKEND_URL);
+        console.log('📦 [Next.js] FormData received:', {
+            hasLogo: !!logo,
+            logoType: logo ? (logo as File).type : null,
+            logoSize: logo ? (logo as File).size : null,
+            type: type
+        });
+
+        console.log('🚀 [Next.js] Forwarding to backend:', BACKEND_URL);
 
         // Forward to backend
         const response = await fetch(`${BACKEND_URL}/api/agency/logo`, {
@@ -27,7 +41,7 @@ export async function POST(request: NextRequest) {
             body: formData,
         });
 
-        console.log('Backend response status:', response.status);
+        console.log('📡 [Next.js] Backend response status:', response.status);
 
         if (!response.ok) {
             const errorText = await response.text();

front-end-agency/app/api/tenant/public-config/route.ts

@@ -0,0 +1,51 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.API_INTERNAL_URL || 'http://backend:8080';
+
+export async function GET(request: NextRequest) {
+    try {
+        const { searchParams } = new URL(request.url);
+        const subdomain = searchParams.get('subdomain');
+
+        if (!subdomain) {
+            return NextResponse.json(
+                { error: 'Subdomain is required' },
+                { status: 400 }
+            );
+        }
+
+        // Buscar configuração pública do tenant
+        const response = await fetch(
+            `${API_BASE_URL}/api/tenant/config?subdomain=${subdomain}`,
+            {
+                cache: 'no-store',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }
+        );
+
+        if (!response.ok) {
+            return NextResponse.json(
+                { error: 'Tenant not found' },
+                { status: 404 }
+            );
+        }
+
+        const data = await response.json();
+
+        // Retornar apenas dados públicos
+        return NextResponse.json({
+            name: data.name,
+            primary_color: data.primary_color,
+            secondary_color: data.secondary_color,
+            logo_url: data.logo_url,
+        });
+    } catch (error) {
+        console.error('Error fetching tenant config:', error);
+        return NextResponse.json(
+            { error: 'Internal server error' },
+            { status: 500 }
+        );
+    }
+}

front-end-agency/app/globals.css

@@ -47,7 +47,7 @@ html.dark {
 
 @layer base {
   * {
-    font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+    font-family: var(--font-arimo), ui-sans-serif, system-ui, sans-serif;
   }
 
   a,

front-end-agency/app/layout.tsx

@@ -1,11 +1,12 @@
 import type { Metadata } from "next";
-import { Inter, Open_Sans, Fira_Code } from "next/font/google";
+import { Arimo, Open_Sans, Fira_Code } from "next/font/google";
 import "./globals.css";
 import LayoutWrapper from "./LayoutWrapper";
 import { ThemeProvider } from "next-themes";
+import { getAgencyLogo } from "@/lib/server-api";
 
-const inter = Inter({
+const arimo = Arimo({
-  variable: "--font-inter",
+  variable: "--font-arimo",
   subsets: ["latin"],
   weight: ["400", "500", "600", "700"],
 });
@@ -22,10 +23,24 @@ const firaCode = Fira_Code({
   weight: ["400", "600"],
 });
 
-export const metadata: Metadata = {
+export async function generateMetadata(): Promise<Metadata> {
+  const logoUrl = await getAgencyLogo();
+
+  // Adicionar timestamp para forçar atualização do favicon
+  const faviconUrl = logoUrl
+    ? `${logoUrl}?v=${Date.now()}`
+    : '/favicon.ico';
+
+  return {
     title: "Aggios - Dashboard",
     description: "Plataforma SaaS para agências digitais",
+    icons: {
+      icon: faviconUrl,
+      shortcut: faviconUrl,
+      apple: faviconUrl,
+    },
   };
+}
 
 export default function RootLayout({
   children,
@@ -37,7 +52,7 @@ export default function RootLayout({
       <head>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css" />
       </head>
-      <body className={`${inter.variable} ${openSans.variable} ${firaCode.variable} antialiased`}>
+      <body className={`${arimo.variable} ${openSans.variable} ${firaCode.variable} antialiased`} suppressHydrationWarning>
         <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
           <LayoutWrapper>
             {children}

front-end-agency/app/login/page.tsx

@@ -3,25 +3,29 @@
 import { useState, useEffect } from "react";
 import Link from "next/link";
 import { Button, Input, Checkbox } from "@/components/ui";
-import toast, { Toaster } from 'react-hot-toast';
+import { saveAuth, isAuthenticated, getToken, clearAuth } from '@/lib/auth';
-import { saveAuth, isAuthenticated } from '@/lib/auth';
+import { API_ENDPOINTS } from '@/lib/api';
 import dynamic from 'next/dynamic';
+import { LoginBranding } from '@/components/auth/LoginBranding';
+import {
+    EnvelopeIcon,
+    LockClosedIcon,
+    ShieldCheckIcon,
+    BoltIcon,
+    UserGroupIcon,
+    ChartBarIcon,
+    ExclamationCircleIcon,
+    CheckCircleIcon
+} from "@heroicons/react/24/outline";
 
 const ThemeToggle = dynamic(() => import('@/components/ThemeToggle'), { ssr: false });
 
-const DEFAULT_GRADIENT = 'linear-gradient(135deg, #ff3a05, #ff0080)';
-
-const setGradientVariables = (gradient: string) => {
-    document.documentElement.style.setProperty('--gradient-primary', gradient);
-    document.documentElement.style.setProperty('--gradient', gradient);
-    document.documentElement.style.setProperty('--gradient-text', gradient.replace('90deg', 'to right'));
-    document.documentElement.style.setProperty('--color-gradient-brand', gradient.replace('90deg', 'to right'));
-};
-
 export default function LoginPage() {
     const [isLoading, setIsLoading] = useState(false);
     const [isSuperAdmin, setIsSuperAdmin] = useState(false);
     const [subdomain, setSubdomain] = useState<string>('');
+    const [errorMessage, setErrorMessage] = useState<string>('');
+    const [successMessage, setSuccessMessage] = useState<string>('');
     const [formData, setFormData] = useState({
         email: "",
         password: "",
@@ -36,44 +40,54 @@ export default function LoginPage() {
             setSubdomain(sub);
             setIsSuperAdmin(superAdmin);
 
-            // Aplicar tema: dash sempre padrão; tenants aplicam o salvo ou vindo via query param
-            const searchParams = new URLSearchParams(window.location.search);
-            const themeParam = searchParams.get('theme');
-
-            if (superAdmin) {
-                setGradientVariables(DEFAULT_GRADIENT);
-            } else {
-                const stored = localStorage.getItem(`agency-theme:${sub}`);
-                const gradient = themeParam || stored || DEFAULT_GRADIENT;
-                setGradientVariables(gradient);
-
-                if (themeParam) {
-                    localStorage.setItem(`agency-theme:${sub}`, gradient);
-                }
-            }
-
             if (isAuthenticated()) {
+                // Validar token antes de redirecionar para evitar loops
+                const token = getToken();
+                fetch(API_ENDPOINTS.me, {
+                    headers: {
+                        'Authorization': `Bearer ${token}`
+                    }
+                })
+                    .then(res => {
+                        if (res.ok) {
                             const target = superAdmin ? '/superadmin' : '/dashboard';
                             window.location.href = target;
+                        } else {
+                            // Token inválido ou expirado
+                            clearAuth();
+                        }
+                    })
+                    .catch((err) => {
+                        console.error('Erro ao validar sessão:', err);
+                        // Em caso de erro de rede, não redireciona nem limpa, deixa o usuário tentar logar
+                    });
             }
         }
     }, []);
 
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
+        setErrorMessage('');
+        setSuccessMessage('');
 
+        // Validações do lado do cliente
         if (!formData.email) {
-            toast.error('Por favor, insira seu email');
+            setErrorMessage('Por favor, insira seu email para continuar.');
             return;
         }
 
         if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
-            toast.error('Por favor, insira um email válido');
+            setErrorMessage('Ops! O formato do email não parece correto. Por favor, verifique e tente novamente.');
             return;
         }
 
         if (!formData.password) {
-            toast.error('Por favor, insira sua senha');
+            setErrorMessage('Por favor, insira sua senha para acessar sua conta.');
+            return;
+        }
+
+        if (formData.password.length < 3) {
+            setErrorMessage('A senha parece muito curta. Por favor, verifique se digitou corretamente.');
             return;
         }
 
@@ -92,8 +106,19 @@ export default function LoginPage() {
             });
 
             if (!response.ok) {
-                const error = await response.json();
+                const error = await response.json().catch(() => ({}));
-                throw new Error(error.message || 'Credenciais inválidas');
+
+                // Mensagens humanizadas para cada tipo de erro
+                if (response.status === 401 || response.status === 403) {
+                    setErrorMessage('Email ou senha incorretos. Por favor, verifique seus dados e tente novamente.');
+                } else if (response.status >= 500) {
+                    setErrorMessage('Estamos com problemas no servidor no momento. Por favor, tente novamente em alguns instantes.');
+                } else {
+                    setErrorMessage(error.message || 'Algo deu errado ao tentar fazer login. Por favor, tente novamente.');
+                }
+
+                setIsLoading(false);
+                return;
             }
 
             const data = await response.json();
@@ -102,57 +127,60 @@ export default function LoginPage() {
 
             console.log('Login successful:', data.user);
 
-            toast.success('Login realizado com sucesso! Redirecionando...');
+            setSuccessMessage('Login realizado com sucesso! Redirecionando você agora...');
 
             setTimeout(() => {
                 const target = isSuperAdmin ? '/superadmin' : '/dashboard';
                 window.location.href = target;
             }, 1000);
         } catch (error: any) {
-            toast.error(error.message || 'Erro ao fazer login. Verifique suas credenciais.');
+            console.error('Login error:', error);
+            setErrorMessage('Não conseguimos conectar ao servidor. Verifique sua conexão com a internet e tente novamente.');
             setIsLoading(false);
         }
     };
 
     return (
         <>
-            <Toaster
+            {/* Script inline para aplicar cor primária ANTES do React */}
-                position="top-center"
+            <script
-                toastOptions={{
+                dangerouslySetInnerHTML={{
-                    duration: 5000,
+                    __html: `
-                    style: {
+                        (function() {
-                        background: '#FFFFFF',
+                            try {
-                        color: '#000000',
+                                const cachedPrimary = localStorage.getItem('agency-primary-color');
-                        padding: '16px',
+                                if (cachedPrimary) {
-                        borderRadius: '8px',
+                                    function hexToRgb(hex) {
-                        border: '1px solid #E5E5E5',
+                                        const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);
-                        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+                                        return result 
-                    },
+                                            ? parseInt(result[1], 16) + ' ' + parseInt(result[2], 16) + ' ' + parseInt(result[3], 16)
-                    error: {
+                                            : null;
-                        icon: '⚠️',
+                                    }
-                        style: {
+                                    
-                            background: '#ef4444',
+                                    const primaryRgb = hexToRgb(cachedPrimary);
-                            color: '#FFFFFF',
+                                    
-                            border: 'none',
+                                    if (primaryRgb) {
-                        },
+                                        const root = document.documentElement;
-                    },
+                                        root.style.setProperty('--brand-color', cachedPrimary);
-                    success: {
+                                        root.style.setProperty('--gradient', 'linear-gradient(135deg, ' + cachedPrimary + ', ' + cachedPrimary + ')');
-                        icon: '✓',
+                                        root.style.setProperty('--brand-rgb', primaryRgb);
-                        style: {
+                                        root.style.setProperty('--brand-strong-rgb', primaryRgb);
-                            background: '#10B981',
+                                        root.style.setProperty('--brand-hover-rgb', primaryRgb);
-                            color: '#FFFFFF',
+                                    }
-                            border: 'none',
+                                }
-                        },
+                            } catch(e) {}
-                    },
+                        })();
+                    `,
                 }}
             />
+            <LoginBranding />
             <div className="flex min-h-screen">
                 {/* Lado Esquerdo - Formulário */}
                 <div className="w-full lg:w-1/2 flex items-center justify-center px-6 sm:px-12 py-12">
                     <div className="w-full max-w-md">
                         {/* Logo mobile */}
                         <div className="lg:hidden text-center mb-8">
-                            <div className="inline-block px-6 py-3 rounded-2xl" style={{ background: 'var(--gradient-primary)' }}>
+                            <div className="inline-block px-6 py-3 rounded-2xl" style={{ background: 'var(--brand-color)' }}>
                                 <h1 className="text-3xl font-bold text-white">
                                     {isSuperAdmin ? 'aggios' : subdomain}
                                 </h1>
@@ -179,13 +207,36 @@ export default function LoginPage() {
 
                         {/* Form */}
                         <form onSubmit={handleSubmit} className="space-y-5">
+                            {/* Mensagem de Erro */}
+                            {errorMessage && (
+                                <div className="flex items-start gap-3 p-4 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800">
+                                    <ExclamationCircleIcon className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
+                                    <p className="text-sm text-red-800 dark:text-red-300 leading-relaxed">
+                                        {errorMessage}
+                                    </p>
+                                </div>
+                            )}
+
+                            {/* Mensagem de Sucesso */}
+                            {successMessage && (
+                                <div className="flex items-start gap-3 p-4 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800">
+                                    <CheckCircleIcon className="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" />
+                                    <p className="text-sm text-green-800 dark:text-green-300 leading-relaxed">
+                                        {successMessage}
+                                    </p>
+                                </div>
+                            )}
+
                             <Input
                                 label="Email"
                                 type="email"
                                 placeholder="seu@email.com"
-                                leftIcon="ri-mail-line"
+                                leftIcon={<EnvelopeIcon className="w-5 h-5" />}
                                 value={formData.email}
-                                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                                onChange={(e) => {
+                                    setFormData({ ...formData, email: e.target.value });
+                                    setErrorMessage(''); // Limpa o erro ao digitar
+                                }}
                                 required
                             />
 
@@ -193,9 +244,12 @@ export default function LoginPage() {
                                 label="Senha"
                                 type="password"
                                 placeholder="Digite sua senha"
-                                leftIcon="ri-lock-line"
+                                leftIcon={<LockClosedIcon className="w-5 h-5" />}
                                 value={formData.password}
-                                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+                                onChange={(e) => {
+                                    setFormData({ ...formData, password: e.target.value });
+                                    setErrorMessage(''); // Limpa o erro ao digitar
+                                }}
                                 required
                             />
 
@@ -209,7 +263,7 @@ export default function LoginPage() {
                                 <Link
                                     href="/recuperar-senha"
                                     className="text-[14px] font-medium hover:opacity-80 transition-opacity"
-                                    style={{ background: 'var(--gradient-primary)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}
+                                    style={{ color: 'var(--brand-color)' }}
                                 >
                                     Esqueceu a senha?
                                 </Link>
@@ -232,7 +286,7 @@ export default function LoginPage() {
                                     <a
                                         href="http://dash.localhost/cadastro"
                                         className="font-medium hover:opacity-80 transition-opacity"
-                                        style={{ background: 'var(--gradient-primary)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}
+                                        style={{ color: 'var(--brand-color)' }}
                                     >
                                         Cadastre sua agência
                                     </a>
@@ -243,7 +297,7 @@ export default function LoginPage() {
                 </div>
 
                 {/* Lado Direito - Branding */}
-                <div className="hidden lg:flex lg:w-1/2 relative overflow-hidden" style={{ background: 'var(--gradient-primary)' }}>
+                <div className="hidden lg:flex lg:w-1/2 relative overflow-hidden" style={{ background: 'var(--brand-color)' }}>
                     <div className="absolute inset-0 flex flex-col items-center justify-center p-12 text-white">
                         <div className="max-w-md text-center">
                             <h1 className="text-5xl font-bold mb-6">
@@ -257,22 +311,22 @@ export default function LoginPage() {
                             </p>
                             <div className="grid grid-cols-2 gap-6 text-left">
                                 <div>
-                                    <i className="ri-shield-check-line text-3xl mb-2"></i>
+                                    <ShieldCheckIcon className="w-8 h-8 mb-2" />
                                     <h3 className="font-semibold mb-1">Seguro</h3>
                                     <p className="text-sm opacity-80">Proteção de dados</p>
                                 </div>
                                 <div>
-                                    <i className="ri-speed-line text-3xl mb-2"></i>
+                                    <BoltIcon className="w-8 h-8 mb-2" />
                                     <h3 className="font-semibold mb-1">Rápido</h3>
                                     <p className="text-sm opacity-80">Performance otimizada</p>
                                 </div>
                                 <div>
-                                    <i className="ri-team-line text-3xl mb-2"></i>
+                                    <UserGroupIcon className="w-8 h-8 mb-2" />
                                     <h3 className="font-semibold mb-1">Colaborativo</h3>
                                     <p className="text-sm opacity-80">Trabalho em equipe</p>
                                 </div>
                                 <div>
-                                    <i className="ri-line-chart-line text-3xl mb-2"></i>
+                                    <ChartBarIcon className="w-8 h-8 mb-2" />
                                     <h3 className="font-semibold mb-1">Insights</h3>
                                     <p className="text-sm opacity-80">Relatórios detalhados</p>
                                 </div>

front-end-agency/app/tokens.css

@@ -9,6 +9,8 @@
         /* Cores sólidas de marca (usadas em textos/bordas) */
         --brand-color: #ff3a05;
         --brand-color-strong: #ff0080;
+        --brand-rgb: 255 58 5;
+        --brand-strong-rgb: 255 0 128;
 
         /* Superfícies e tipografia */
         --color-surface-light: #ffffff;

front-end-agency/components/DynamicFavicon.tsx

@@ -1,15 +1,23 @@
 "use client";
 
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 interface DynamicFaviconProps {
     logoUrl?: string;
 }
 
 export default function DynamicFavicon({ logoUrl }: DynamicFaviconProps) {
-    useEffect(() => {
+    const [mounted, setMounted] = useState(false);
-        if (!logoUrl) return;
 
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    useEffect(() => {
+        if (!mounted || !logoUrl) return;
+
+        // Usar requestAnimationFrame para garantir que a hidratação terminou
+        requestAnimationFrame(() => {
             // Remove favicons antigos
             const existingLinks = document.querySelectorAll("link[rel*='icon']");
             existingLinks.forEach(link => link.remove());
@@ -26,8 +34,9 @@ export default function DynamicFavicon({ logoUrl }: DynamicFaviconProps) {
             appleLink.rel = 'apple-touch-icon';
             appleLink.href = logoUrl;
             document.getElementsByTagName('head')[0].appendChild(appleLink);
+        });
 
-    }, [logoUrl]);
+    }, [mounted, logoUrl]);
 
     return null;
 }

front-end-agency/components/auth/AuthGuard.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
+import { isAuthenticated } from '@/lib/auth';
+
+export default function AuthGuard({ children }: { children: React.ReactNode }) {
+    const router = useRouter();
+    const pathname = usePathname();
+    const [authorized, setAuthorized] = useState<boolean | null>(null);
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    useEffect(() => {
+        if (!mounted) return;
+
+        const checkAuth = () => {
+            const isAuth = isAuthenticated();
+
+            if (!isAuth) {
+                setAuthorized(false);
+                // Evitar redirect loop se já estiver no login (embora o AuthGuard deva ser usado apenas em rotas protegidas)
+                if (pathname !== '/login') {
+                    router.push('/login');
+                }
+            } else {
+                setAuthorized(true);
+            }
+        };
+
+        checkAuth();
+
+        // Opcional: Adicionar listener para storage events para logout em outras abas
+        const handleStorageChange = (e: StorageEvent) => {
+            if (e.key === 'token' || e.key === 'user') {
+                checkAuth();
+            }
+        };
+
+        window.addEventListener('storage', handleStorageChange);
+        return () => window.removeEventListener('storage', handleStorageChange);
+    }, [router, pathname, mounted]);
+
+    // Enquanto verifica (ou não está montado), mostra um loading simples
+    // Isso evita problemas de hidratação mantendo a estrutura DOM consistente
+    if (!mounted || authorized === null) {
+        return (
+            <div className="flex h-screen w-full items-center justify-center bg-gray-100 dark:bg-zinc-950">
+                <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-purple-600" />
+            </div>
+        );
+    }
+
+    if (!authorized) {
+        return (
+            <div className="flex h-screen w-full items-center justify-center bg-gray-100 dark:bg-zinc-950">
+                <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-purple-600" />
+            </div>
+        );
+    }
+
+    return <>{children}</>;
+}

front-end-agency/components/auth/LoginBranding.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import { useEffect } from 'react';
+
+/**
+ * LoginBranding - Aplica cor primária da agência na página de login
+ * Busca cor do localStorage ou da API se não houver cache
+ */
+export function LoginBranding() {
+    useEffect(() => {
+
+        const hexToRgb = (hex: string) => {
+            const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+            return result ? `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}` : null;
+        };
+
+        const applyTheme = (primary: string) => {
+            if (!primary) return;
+
+            const root = document.documentElement;
+            const primaryRgb = hexToRgb(primary);
+
+            root.style.setProperty('--brand-color', primary);
+            root.style.setProperty('--gradient', `linear-gradient(135deg, ${primary}, ${primary})`);
+
+            if (primaryRgb) {
+                root.style.setProperty('--brand-rgb', primaryRgb);
+                root.style.setProperty('--brand-strong-rgb', primaryRgb);
+                root.style.setProperty('--brand-hover-rgb', primaryRgb);
+            }
+        };
+
+        const updateFavicon = (url: string) => {
+            if (typeof window === 'undefined' || typeof document === 'undefined') return;
+
+            try {
+                const newHref = `${url}${url.includes('?') ? '&' : '?'}v=${Date.now()}`;
+                const existingLinks = document.querySelectorAll("link[rel*='icon']");
+
+                if (existingLinks.length > 0) {
+                    existingLinks.forEach(link => {
+                        link.setAttribute('href', newHref);
+                    });
+                } else {
+                    const newLink = document.createElement('link');
+                    newLink.rel = 'icon';
+                    newLink.type = 'image/x-icon';
+                    newLink.href = newHref;
+                    document.head.appendChild(newLink);
+                }
+            } catch (error) {
+                console.error('❌ Erro ao atualizar favicon:', error);
+            }
+        };
+
+        const loadBranding = async () => {
+            if (typeof window === 'undefined') return;
+
+            const hostname = window.location.hostname;
+            const subdomain = hostname.split('.')[0];
+
+            // Para dash.localhost ou localhost sem subdomínio, não buscar
+            if (!subdomain || subdomain === 'localhost' || subdomain === 'www' || subdomain === 'dash') {
+                return;
+            }
+
+            try {
+                // 1. Buscar DIRETO do backend (bypass da rota Next.js que está com problema)
+                console.log('LoginBranding: Buscando cores para:', subdomain);
+                const apiUrl = `/api/tenant/config?subdomain=${subdomain}`;
+                console.log('LoginBranding: URL:', apiUrl);
+
+                const response = await fetch(apiUrl);
+
+                if (response.ok) {
+                    const data = await response.json();
+
+                    if (data.primary_color) {
+                        applyTheme(data.primary_color);
+                        localStorage.setItem('agency-primary-color', data.primary_color);
+                    }
+
+                    if (data.logo_url) {
+                        updateFavicon(data.logo_url);
+                        localStorage.setItem('agency-logo-url', data.logo_url);
+                    }
+                    return;
+                } else {
+                    console.error('LoginBranding: API retornou:', response.status);
+                }
+
+                // 2. Fallback para cache
+                const cachedPrimary = localStorage.getItem('agency-primary-color');
+                const cachedLogo = localStorage.getItem('agency-logo-url');
+
+                if (cachedPrimary) {
+                    applyTheme(cachedPrimary);
+                }
+                if (cachedLogo) {
+                    updateFavicon(cachedLogo);
+                }
+            } catch (error) {
+                console.error('LoginBranding: Erro:', error);
+                const cachedPrimary = localStorage.getItem('agency-primary-color');
+                const cachedLogo = localStorage.getItem('agency-logo-url');
+
+                if (cachedPrimary) {
+                    applyTheme(cachedPrimary);
+                }
+                if (cachedLogo) {
+                    updateFavicon(cachedLogo);
+                }
+            }
+        };
+
+        loadBranding();
+    }, []);
+
+    return null;
+}

front-end-agency/components/layout/AgencyBranding.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface AgencyBrandingProps {
+    colors?: {
+        primary: string;
+        secondary: string;
+    } | null;
+}
+
+/**
+ * AgencyBranding - Aplica as cores da agência via CSS Variables
+ * O favicon é atualizado dinamicamente via DOM
+ */
+export function AgencyBranding({ colors }: AgencyBrandingProps) {
+    useEffect(() => {
+        const hexToRgb = (hex: string) => {
+            const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+            return result ? `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}` : null;
+        };
+
+        const applyTheme = (primary: string, secondary: string) => {
+            if (!primary || !secondary) return;
+
+            const root = document.documentElement;
+            const primaryRgb = hexToRgb(primary);
+            const secondaryRgb = hexToRgb(secondary);
+
+            const gradient = `linear-gradient(135deg, ${primary}, ${primary})`;
+            const gradientText = `linear-gradient(to right, ${primary}, ${primary})`;
+
+            root.style.setProperty('--gradient', gradient);
+            root.style.setProperty('--gradient-text', gradientText);
+            root.style.setProperty('--gradient-primary', gradient);
+            root.style.setProperty('--color-gradient-brand', gradient);
+
+            root.style.setProperty('--brand-color', primary);
+            root.style.setProperty('--brand-color-strong', secondary);
+
+            if (primaryRgb) root.style.setProperty('--brand-rgb', primaryRgb);
+            if (secondaryRgb) root.style.setProperty('--brand-strong-rgb', secondaryRgb);
+
+            // Salvar no localStorage para cache
+            if (typeof window !== 'undefined') {
+                const hostname = window.location.hostname;
+                const sub = hostname.split('.')[0];
+                if (sub && sub !== 'www') {
+                    localStorage.setItem(`agency-theme:${sub}`, gradient);
+                    localStorage.setItem('agency-primary-color', primary);
+                    localStorage.setItem('agency-secondary-color', secondary);
+                }
+            }
+        };
+
+        const updateFavicon = (url: string) => {
+            if (typeof window === 'undefined' || typeof document === 'undefined') return;
+
+            try {
+                const newHref = `${url}${url.includes('?') ? '&' : '?'}v=${Date.now()}`;
+
+                // Buscar TODOS os links de ícone (como estava funcionando antes)
+                const existingLinks = document.querySelectorAll("link[rel*='icon']");
+
+                if (existingLinks.length > 0) {
+                    existingLinks.forEach(link => {
+                        link.setAttribute('href', newHref);
+                    });
+                    console.log(`✅ ${existingLinks.length} favicons atualizados`);
+                } else {
+                    const newLink = document.createElement('link');
+                    newLink.rel = 'icon';
+                    newLink.type = 'image/x-icon';
+                    newLink.href = newHref;
+                    document.head.appendChild(newLink);
+                    console.log('✅ Favicon criado');
+                }
+            } catch (error) {
+                console.error('❌ Erro ao atualizar favicon:', error);
+            }
+        };
+
+        // Se temos cores do servidor, aplicar imediatamente
+        if (colors) {
+            applyTheme(colors.primary, colors.secondary);
+        } else {
+            // Fallback: tentar pegar do cache do localStorage
+            const cachedPrimary = localStorage.getItem('agency-primary-color');
+            const cachedSecondary = localStorage.getItem('agency-secondary-color');
+
+            if (cachedPrimary && cachedSecondary) {
+                applyTheme(cachedPrimary, cachedSecondary);
+            }
+        }
+
+        // Atualizar favicon se houver logo salvo
+        const cachedLogo = localStorage.getItem('agency-logo-url');
+        if (cachedLogo) {
+            updateFavicon(cachedLogo);
+        }
+
+        // Listener para atualizações em tempo real
+        const handleUpdate = () => {
+            const cachedPrimary = localStorage.getItem('agency-primary-color');
+            const cachedSecondary = localStorage.getItem('agency-secondary-color');
+            const cachedLogo = localStorage.getItem('agency-logo-url');
+
+            if (cachedPrimary && cachedSecondary) {
+                applyTheme(cachedPrimary, cachedSecondary);
+            }
+
+            if (cachedLogo) {
+                updateFavicon(cachedLogo);
+            }
+        };
+
+        window.addEventListener('branding-update', handleUpdate);
+
+        return () => {
+            window.removeEventListener('branding-update', handleUpdate);
+        };
+    }, [colors]);
+
+    // Componente não renderiza nada visualmente (apenas efeitos colaterais)
+    return null;
+}

front-end-agency/components/layout/DashboardLayout.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import React, { useState } from 'react';
+import { usePathname } from 'next/navigation';
+import { SidebarRail, MenuItem } from './SidebarRail';
+import { TopBar } from './TopBar';
+
+interface DashboardLayoutProps {
+    children: React.ReactNode;
+    menuItems: MenuItem[];
+}
+
+export const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children, menuItems }) => {
+    // Estado centralizado do layout
+    const [isExpanded, setIsExpanded] = useState(true);
+    const pathname = usePathname();
+
+    return (
+        <div className="flex h-screen w-full bg-gray-100 dark:bg-zinc-950 text-slate-900 dark:text-slate-100 overflow-hidden p-3 gap-3 transition-colors duration-300">
+            {/* Sidebar controla seu próprio estado visual via props */}
+            <SidebarRail
+                isExpanded={isExpanded}
+                onToggle={() => setIsExpanded(!isExpanded)}
+                menuItems={menuItems}
+            />
+
+            {/* Área de Conteúdo (Children) */}
+            <main className="flex-1 h-full min-w-0 overflow-hidden flex flex-col bg-white dark:bg-zinc-900 rounded-2xl shadow-lg relative transition-colors duration-300 border border-transparent dark:border-zinc-800">
+                {/* TopBar com Breadcrumbs e Search */}
+                <TopBar />
+
+                {/* Conteúdo das páginas */}
+                <div className="flex-1 overflow-auto">
+                    <div className="max-w-7xl mx-auto w-full h-full">
+                        {children}
+                    </div>
+                </div>
+            </main>
+        </div>
+    );
+};

front-end-agency/components/layout/FaviconUpdater.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { getUser } from '@/lib/auth';
+
+export function FaviconUpdater() {
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    useEffect(() => {
+        if (!mounted) return;
+
+        const updateFavicon = () => {
+            const user = getUser();
+            if (user?.logoUrl) {
+                // Usar requestAnimationFrame para garantir que o DOM esteja estável após hidratação
+                requestAnimationFrame(() => {
+                    const link: HTMLLinkElement = document.querySelector("link[rel*='icon']") || document.createElement('link');
+                    link.type = 'image/x-icon';
+                    link.rel = 'shortcut icon';
+                    link.href = user.logoUrl!;
+                    if (!link.parentNode) {
+                        document.getElementsByTagName('head')[0].appendChild(link);
+                    }
+                });
+            }
+        };
+
+        // Atraso pequeno para garantir que a hidratação terminou
+        const timer = setTimeout(() => {
+            updateFavicon();
+        }, 0);
+
+        // Ouve mudanças no localStorage
+        const handleStorage = () => {
+            requestAnimationFrame(() => updateFavicon());
+        };
+        window.addEventListener('storage', handleStorage);
+
+        // Custom event para atualização interna na mesma aba
+        window.addEventListener('auth-update', handleStorage);
+
+        return () => {
+            clearTimeout(timer);
+            window.removeEventListener('storage', handleStorage);
+            window.removeEventListener('auth-update', handleStorage);
+        };
+    }, [mounted]);
+
+    return null;
+}

front-end-agency/components/layout/SidebarRail.tsx

@@ -0,0 +1,435 @@
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react';
+import { useTheme } from 'next-themes';
+import { getUser, User, getToken, saveAuth } from '@/lib/auth';
+import { API_ENDPOINTS } from '@/lib/api';
+import {
+    ChevronLeftIcon,
+    ChevronRightIcon,
+    ChevronDownIcon,
+    UserCircleIcon,
+    ArrowRightOnRectangleIcon,
+    SunIcon,
+    MoonIcon,
+    Cog6ToothIcon,
+    XMarkIcon,
+} from '@heroicons/react/24/outline';
+
+export interface MenuItem {
+    id: string;
+    label: string;
+    href: string;
+    icon: any;
+    subItems?: {
+        label: string;
+        href: string;
+    }[];
+}
+
+interface SidebarRailProps {
+    isExpanded: boolean;
+    onToggle: () => void;
+    menuItems: MenuItem[];
+}
+
+export const SidebarRail: React.FC<SidebarRailProps> = ({
+    isExpanded,
+    onToggle,
+    menuItems,
+}) => {
+    const pathname = usePathname();
+    const router = useRouter();
+    const { theme, setTheme } = useTheme();
+    const [mounted, setMounted] = useState(false);
+    const [user, setUser] = useState<User | null>(null);
+    const [openSubmenu, setOpenSubmenu] = useState<string | null>(null);
+    const sidebarRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        setMounted(true);
+        const currentUser = getUser();
+        setUser(currentUser);
+
+        // Buscar perfil da agência para atualizar logo e nome
+        const fetchProfile = async () => {
+            const token = getToken();
+            if (!token) return;
+
+            try {
+                const res = await fetch(API_ENDPOINTS.agencyProfile, {
+                    headers: {
+                        'Authorization': `Bearer ${token}`
+                    }
+                });
+
+                if (res.ok) {
+                    const data = await res.json();
+                    if (currentUser) {
+                        // Usar localStorage como fallback se API não retornar logo
+                        const cachedLogo = localStorage.getItem('agency-logo-url');
+                        const finalLogoUrl = data.logo_url || cachedLogo;
+
+                        const updatedUser = {
+                            ...currentUser,
+                            company: data.name || currentUser.company,
+                            logoUrl: finalLogoUrl
+                        };
+                        setUser(updatedUser);
+                        saveAuth(token, updatedUser); // Persistir atualização
+
+                        // Atualizar localStorage do logo (preservar se já existe)
+                        if (finalLogoUrl) {
+                            console.log('📝 Salvando logo no localStorage:', finalLogoUrl);
+                            localStorage.setItem('agency-logo-url', finalLogoUrl);
+                            window.dispatchEvent(new Event('auth-update')); // Notificar favicon
+                            window.dispatchEvent(new Event('branding-update')); // Notificar AgencyBranding
+                        }
+                    }
+                }
+            } catch (error) {
+                console.error('Error fetching agency profile:', error);
+            }
+        };
+
+        fetchProfile();
+
+        // Listener para atualizar logo em tempo real após upload
+        // REMOVIDO: Causa loop infinito com o dispatchEvent dentro do fetchProfile
+        // O AgencyBranding já cuida de atualizar o favicon/cores
+        // Se precisar atualizar o sidebar após upload, usar um evento específico 'logo-uploaded'
+        /*
+        const handleBrandingUpdate = () => {
+            console.log('SidebarRail: branding-update event received');
+            fetchProfile(); // Re-buscar perfil do backend
+        };
+
+        window.addEventListener('branding-update', handleBrandingUpdate);
+
+        return () => {
+            window.removeEventListener('branding-update', handleBrandingUpdate);
+        };
+        */
+    }, []);
+
+    // Fechar submenu ao clicar fora
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (sidebarRef.current && !sidebarRef.current.contains(event.target as Node)) {
+                // Verifica se o submenu aberto corresponde à rota atual
+                // Se estivermos navegando dentro do módulo (ex: CRM), o menu deve permanecer fixo
+                const activeItem = menuItems.find(item => item.id === openSubmenu);
+                const isRouteActive = activeItem && activeItem.subItems?.some(sub => pathname === sub.href || pathname.startsWith(sub.href));
+
+                if (!isRouteActive) {
+                    setOpenSubmenu(null);
+                }
+            }
+        };
+
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [openSubmenu, pathname, menuItems]);
+
+    // Auto-open submenu if active
+    useEffect(() => {
+        if (isExpanded && pathname) {
+            const activeItem = menuItems.find(item =>
+                item.subItems?.some(sub => pathname === sub.href || pathname.startsWith(sub.href))
+            );
+            if (activeItem) {
+                setOpenSubmenu(activeItem.id);
+            }
+        }
+    }, [pathname, isExpanded, menuItems]);
+
+    const handleLogout = () => {
+        localStorage.removeItem('token');
+        localStorage.removeItem('user');
+        window.location.href = '/login';
+    };
+
+    const toggleTheme = () => {
+        setTheme(theme === 'dark' ? 'light' : 'dark');
+    };
+
+    // Encontrar o item ativo para renderizar o submenu
+    const activeMenuItem = menuItems.find(item => item.id === openSubmenu);
+
+    // Lógica de largura do Rail: Se tiver submenu aberto, força recolhimento visual (80px)
+    // Se não, respeita o estado isExpanded
+    const railWidth = isExpanded && !openSubmenu ? 'w-[240px]' : 'w-[80px]';
+    const showLabels = isExpanded && !openSubmenu;
+
+    return (
+        <div className={`flex h-full relative z-20 transition-all duration-300 ${openSubmenu ? 'shadow-xl' : 'shadow-lg'} rounded-2xl`} ref={sidebarRef}>
+            {/* Rail Principal (Ícones + Labels Opcionais) */}
+            <div
+                className={`
+                    relative h-full bg-white dark:bg-zinc-900 flex flex-col py-4 gap-1 text-gray-600 dark:text-gray-400 shrink-0 z-30
+                    transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] px-3 border border-gray-100 dark:border-zinc-800
+                    ${railWidth}
+                    ${openSubmenu ? 'rounded-l-2xl rounded-r-none border-r-0' : 'rounded-2xl'}
+                `}
+            >
+                {/* Toggle Button - Floating on the border */}
+                {/* Só mostra o toggle se não tiver submenu aberto, para evitar confusão */}
+                {!openSubmenu && (
+                    <button
+                        onClick={onToggle}
+                        className="absolute -right-3 top-8 z-50 flex h-6 w-6 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-500 shadow-sm hover:bg-gray-50 hover:text-gray-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-zinc-200 transition-colors"
+                        aria-label={isExpanded ? 'Recolher menu' : 'Expandir menu'}
+                    >
+                        {isExpanded ? (
+                            <ChevronLeftIcon className="w-3 h-3" />
+                        ) : (
+                            <ChevronRightIcon className="w-3 h-3" />
+                        )}
+                    </button>
+                )}
+
+                {/* Header com Logo */}
+                <div className={`flex items-center w-full mb-6 ${showLabels ? 'justify-start px-1' : 'justify-center'}`}>
+                    <div
+                        className="w-9 h-9 rounded-xl flex items-center justify-center text-white font-bold shrink-0 shadow-md text-lg overflow-hidden bg-brand-500"
+                    >
+                        {user?.logoUrl ? (
+                            <img src={user.logoUrl} alt={user.company || 'Logo'} className="w-full h-full object-cover" />
+                        ) : (
+                            (user?.company?.[0] || 'A').toUpperCase()
+                        )}
+                    </div>
+                    {/* Título com animação */}
+                    <div className={`overflow-hidden transition-all duration-300 ease-in-out whitespace-nowrap ${showLabels ? 'opacity-100 max-w-[120px] ml-3' : 'opacity-0 max-w-0 ml-0'}`}>
+                        <span className="font-heading font-bold text-lg text-gray-900 dark:text-white tracking-tight">
+                            {user?.company || 'Aggios'}
+                        </span>
+                    </div>
+                </div>
+
+                {/* Navegação */}
+                <div className="flex flex-col gap-1 w-full flex-1 overflow-y-auto items-center">
+                    {menuItems.map((item) => (
+                        <RailButton
+                            key={item.id}
+                            label={item.label}
+                            icon={item.icon}
+                            href={item.href}
+                            active={pathname === item.href || (item.href !== '/dashboard' && pathname?.startsWith(item.href))}
+                            onClick={(e: any) => {
+                                if (item.subItems) {
+                                    // Se já estiver aberto, fecha e previne navegação (opcional)
+                                    if (openSubmenu === item.id) {
+                                        // Se quisermos permitir fechar sem navegar:
+                                        // e.preventDefault(); 
+                                        // setOpenSubmenu(null);
+
+                                        // Mas se o usuário quer ir para a home do módulo, deixamos navegar.
+                                        // O useEffect vai reabrir se a rota for do módulo.
+                                        // Para forçar o fechamento, teríamos que ter lógica mais complexa.
+                                        // Vamos assumir que clicar no pai sempre leva pra home do pai.
+                                        // E o useEffect cuida de abrir o menu.
+                                        // Então NÃO fazemos nada aqui se for abrir.
+                                    } else {
+                                        // Se for abrir, deixamos o Link navegar.
+                                        // O useEffect vai abrir o menu quando a rota mudar.
+                                        // NÃO setamos o estado aqui para evitar conflito com a navegação.
+                                    }
+                                } else {
+                                    setOpenSubmenu(null);
+                                }
+                            }}
+                            showLabel={showLabels}
+                            hasSubItems={!!item.subItems}
+                            isOpen={openSubmenu === item.id}
+                        />
+                    ))}
+                </div>
+
+                {/* Separador */}
+                <div className="h-px bg-gray-200 dark:bg-zinc-800 my-2 w-full" />
+
+                {/* User Menu */}
+                <div className={`flex ${showLabels ? 'justify-start' : 'justify-center'}`}>
+                    {mounted && (
+                        <Menu>
+                            <MenuButton className={`w-full p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-zinc-800 transition-all duration-300 flex items-center ${showLabels ? '' : 'justify-center'}`}>
+                                <UserCircleIcon className="w-6 h-6 text-gray-600 dark:text-gray-400 shrink-0" />
+                                <div className={`overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out ${showLabels ? 'max-w-[150px] opacity-100 ml-2' : 'max-w-0 opacity-0 ml-0'}`}>
+                                    <span className="font-medium text-xs text-gray-900 dark:text-white">
+                                        {user?.name || 'Usuário'}
+                                    </span>
+                                </div>
+                            </MenuButton>
+                            <MenuItems
+                                anchor="top start"
+                                transition
+                                className={`w-48 origin-bottom-left rounded-xl bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 shadow-lg focus:outline-none overflow-hidden z-50 transition duration-100 ease-out data-[closed]:scale-95 data-[closed]:opacity-0`}
+                            >
+                                <div className="p-1">
+                                    <MenuItem>
+                                        <button
+                                            className="data-[focus]:bg-gray-100 dark:data-[focus]:bg-zinc-800 text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs"
+                                        >
+                                            <UserCircleIcon className="mr-2 h-4 w-4" />
+                                            Ver meu perfil
+                                        </button>
+                                    </MenuItem>
+                                    <MenuItem>
+                                        <button
+                                            onClick={toggleTheme}
+                                            className="data-[focus]:bg-gray-100 dark:data-[focus]:bg-zinc-800 text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs"
+                                        >
+                                            {theme === 'dark' ? (
+                                                <>
+                                                    <SunIcon className="mr-2 h-4 w-4" />
+                                                    Tema Claro
+                                                </>
+                                            ) : (
+                                                <>
+                                                    <MoonIcon className="mr-2 h-4 w-4" />
+                                                    Tema Escuro
+                                                </>
+                                            )}
+                                        </button>
+                                    </MenuItem>
+                                    <div className="my-1 h-px bg-gray-200 dark:bg-zinc-800" />
+                                    <MenuItem>
+                                        <button
+                                            onClick={handleLogout}
+                                            className="data-[focus]:bg-red-50 dark:data-[focus]:bg-red-900/20 text-red-500 group flex w-full items-center rounded-lg px-3 py-2 text-xs"
+                                        >
+                                            <ArrowRightOnRectangleIcon className="mr-2 h-4 w-4" />
+                                            Sair
+                                        </button>
+                                    </MenuItem>
+                                </div>
+                            </MenuItems>
+                        </Menu>
+                    )}
+                    {!mounted && (
+                        <div className={`w-full p-2 rounded-lg flex items-center ${showLabels ? '' : 'justify-center'}`}>
+                            <UserCircleIcon className="w-6 h-6 text-gray-600 dark:text-gray-400 shrink-0" />
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {/* Painel Secundário (Drawer) - Abre ao lado do Rail */}
+            <div
+                className={`
+                    h-full
+                    bg-white dark:bg-zinc-900 rounded-r-2xl border-y border-r border-l border-gray-100 dark:border-zinc-800
+                    transition-all duration-300 ease-in-out origin-left z-20 flex flex-col overflow-hidden
+                    ${openSubmenu ? 'w-64 opacity-100 translate-x-0' : 'w-0 opacity-0 -translate-x-10 border-none'}
+                `}
+            >
+                {activeMenuItem && (
+                    <>
+                        <div className="p-4 border-b border-gray-100 dark:border-zinc-800 flex items-center justify-between">
+                            <h3 className="font-heading font-semibold text-gray-900 dark:text-white flex items-center gap-2">
+                                <activeMenuItem.icon className="w-5 h-5 text-brand-500" />
+                                {activeMenuItem.label}
+                            </h3>
+                            <button
+                                onClick={() => setOpenSubmenu(null)}
+                                className="p-1 rounded-md hover:bg-gray-200 dark:hover:bg-zinc-700 text-gray-500 dark:text-gray-400 transition-colors"
+                                aria-label="Fechar submenu"
+                            >
+                                <XMarkIcon className="w-5 h-5" />
+                            </button>
+                        </div>
+                        <div className="p-2 flex-1 overflow-y-auto">
+                            {activeMenuItem.subItems?.map((sub) => (
+                                <Link
+                                    key={sub.href}
+                                    href={sub.href}
+                                    // onClick={() => setOpenSubmenu(null)} // Removido para manter fixo
+                                    className={`
+                                        flex items-center gap-2 px-3 py-2.5 rounded-lg text-xs font-medium transition-colors mb-1
+                                        ${pathname === sub.href
+                                            ? 'bg-brand-50 dark:bg-brand-900/10 text-brand-600 dark:text-brand-400'
+                                            : 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-zinc-800 hover:text-gray-900 dark:hover:text-white'
+                                        }
+                                    `}
+                                >
+                                    <span className={`w-1.5 h-1.5 rounded-full ${pathname === sub.href ? 'bg-brand-500' : 'bg-gray-300 dark:bg-zinc-600'}`} />
+                                    {sub.label}
+                                </Link>
+                            ))}
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+};
+
+// Subcomponente do Botão
+interface RailButtonProps {
+    label: string;
+    icon: React.ComponentType<{ className?: string }>;
+    href: string;
+    active: boolean;
+    onClick: (e?: any) => void;
+    showLabel: boolean;
+    hasSubItems?: boolean;
+    isOpen?: boolean;
+}
+
+const RailButton: React.FC<RailButtonProps> = ({ label, icon: Icon, href, active, onClick, showLabel, hasSubItems, isOpen }) => {
+    // Determine styling based on state
+    // Sempre usa Link se tiver href, para garantir navegação correta e prefetching
+    const Wrapper = href ? Link : 'button';
+    // Desabilitar prefetch para evitar sobrecarga no middleware/backend e loops de redirecionamento
+    const props = href ? { href, onClick, prefetch: false } : { onClick, type: 'button' };
+
+    let baseClasses = "flex items-center p-2 rounded-lg transition-all duration-300 group relative overflow-hidden ";
+    if (showLabel) {
+        baseClasses += "w-full justify-start ";
+    } else {
+        baseClasses += "w-10 h-10 justify-center mx-auto ";
+    }
+
+    // Lógica unificada de ativo
+    const isActiveItem = active || isOpen;
+
+    if (isActiveItem) {
+        baseClasses += "bg-brand-500 text-white shadow-sm";
+    } else {
+        // Inactive item
+        baseClasses += "hover:bg-gray-100 dark:hover:bg-zinc-800 hover:text-gray-900 dark:hover:text-white text-gray-600 dark:text-gray-400";
+    }
+
+    return (
+        <Wrapper
+            {...props as any}
+            className={baseClasses}
+            title={!showLabel ? label : undefined} // Tooltip nativo apenas se recolhido
+        >
+            {/* Ícone */}
+            <Icon className={`shrink-0 w-5 h-5 ${isActiveItem ? 'text-white' : ''}`} />
+
+            {/* Texto (Visível apenas se expandido) */}
+            <div className={`
+                overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out flex items-center flex-1
+                ${showLabel ? 'max-w-[150px] opacity-100 ml-3' : 'max-w-0 opacity-0 ml-0'}
+            `}>
+                <span className="font-medium text-xs flex-1 text-left">{label}</span>
+                {hasSubItems && (
+                    <ChevronRightIcon className={`w-3 h-3 transition-transform duration-200 ${isActiveItem ? 'text-white' : 'text-gray-400'}`} />
+                )}
+            </div>
+
+            {/* Indicador de Ativo (Ponto lateral) - Apenas se recolhido e NÃO tiver gradiente (redundante agora, mas mantido por segurança) */}
+            {active && !hasSubItems && !showLabel && !isActiveItem && (
+                <div className="absolute -left-1 top-1/2 -translate-y-1/2 w-1 h-4 bg-white rounded-r-full" />
+            )}
+        </Wrapper>
+    );
+};

front-end-agency/components/layout/TopBar.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import React, { useState } from 'react';
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+import { MagnifyingGlassIcon, ChevronRightIcon, HomeIcon, BellIcon, Cog6ToothIcon } from '@heroicons/react/24/outline';
+import CommandPalette from '@/components/ui/CommandPalette';
+
+export const TopBar: React.FC = () => {
+    const pathname = usePathname();
+    const [isCommandPaletteOpen, setIsCommandPaletteOpen] = useState(false);
+
+    const generateBreadcrumbs = () => {
+        const paths = pathname?.split('/').filter(Boolean) || [];
+        const breadcrumbs: Array<{ name: string; href: string; icon?: React.ComponentType<{ className?: string }> }> = [
+            { name: 'Home', href: '/dashboard', icon: HomeIcon }
+        ];
+        let currentPath = '';
+        paths.forEach((path, index) => {
+            currentPath += `/${path}`;
+
+            // Mapeamento de nomes amigáveis
+            const nameMap: Record<string, string> = {
+                'dashboard': 'Dashboard',
+                'clientes': 'Clientes',
+                'projetos': 'Projetos',
+                'financeiro': 'Financeiro',
+                'configuracoes': 'Configurações',
+                'novo': 'Novo',
+            };
+
+            if (path !== 'dashboard') { // Evita duplicar Home/Dashboard se a rota for /dashboard
+                breadcrumbs.push({
+                    name: nameMap[path] || path.charAt(0).toUpperCase() + path.slice(1),
+                    href: currentPath,
+                });
+            }
+        });
+
+        return breadcrumbs;
+    };
+
+    const breadcrumbs = generateBreadcrumbs();
+
+    return (
+        <>
+            <div className="bg-white dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-800 px-6 py-3 flex items-center justify-between transition-colors">
+                {/* Breadcrumbs */}
+                <nav className="flex items-center gap-2 text-xs">
+                    {breadcrumbs.map((crumb, index) => {
+                        const Icon = crumb.icon;
+                        const isLast = index === breadcrumbs.length - 1;
+
+                        return (
+                            <div key={crumb.href} className="flex items-center gap-2">
+                                {Icon ? (
+                                    <Link
+                                        href={crumb.href}
+                                        className="flex items-center gap-1.5 text-gray-500 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-zinc-200 transition-colors"
+                                    >
+                                        <Icon className="w-3.5 h-3.5" />
+                                        <span>{crumb.name}</span>
+                                    </Link>
+                                ) : (
+                                    <Link
+                                        href={crumb.href}
+                                        className={`${isLast ? 'text-gray-900 dark:text-white font-medium' : 'text-gray-500 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-zinc-200'} transition-colors`}
+                                    >
+                                        {crumb.name}
+                                    </Link>
+                                )}
+
+                                {!isLast && <ChevronRightIcon className="w-3 h-3 text-gray-400 dark:text-zinc-600" />}
+                            </div>
+                        );
+                    })}
+                </nav>
+
+                {/* Search Bar Trigger */}
+                <div className="flex items-center gap-4">
+                    <button
+                        onClick={() => setIsCommandPaletteOpen(true)}
+                        className="flex items-center gap-2 px-3 py-1.5 text-sm text-gray-500 dark:text-zinc-400 bg-gray-100 dark:bg-zinc-800 rounded-lg hover:bg-gray-200 dark:hover:bg-zinc-700 transition-colors"
+                    >
+                        <MagnifyingGlassIcon className="w-4 h-4" />
+                        <span className="hidden sm:inline">Buscar...</span>
+                        <kbd className="hidden sm:inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium text-gray-400 bg-white dark:bg-zinc-900 rounded border border-gray-200 dark:border-zinc-700">
+                            Ctrl K
+                        </kbd>
+                    </button>
+                    <div className="flex items-center gap-2 border-l border-gray-200 dark:border-zinc-800 pl-4">
+                        <button className="p-2 text-gray-500 dark:text-zinc-400 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors relative">
+                            <BellIcon className="w-5 h-5" />
+                            <span className="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-white dark:border-zinc-900"></span>
+                        </button>
+                        <Link
+                            href="/configuracoes"
+                            className="p-2 text-gray-500 dark:text-zinc-400 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
+                        >
+                            <Cog6ToothIcon className="w-5 h-5" />
+                        </Link>
+                    </div>
+                </div>
+            </div>
+
+            {/* Command Palette */}
+            <CommandPalette isOpen={isCommandPaletteOpen} setIsOpen={setIsCommandPaletteOpen} />
+        </>
+    );
+};

front-end-agency/components/ui/Button.tsx

@@ -29,30 +29,48 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             "inline-flex items-center justify-center font-medium rounded-[6px] transition-opacity focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer";
 
         const variants = {
-            primary: "text-white hover:opacity-90 active:opacity-80",
+            primary: "bg-brand-500 text-white hover:opacity-90 active:opacity-80 shadow-sm hover:shadow-md transition-all",
             secondary:
-                "bg-[#E5E5E5] dark:bg-gray-700 text-[#000000] dark:text-white hover:opacity-90 active:opacity-80",
+                "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-600",
             outline:
-                "border border-[#E5E5E5] dark:border-gray-600 text-[#000000] dark:text-white hover:bg-[#E5E5E5]/10 dark:hover:bg-gray-700/50 active:bg-[#E5E5E5]/20 dark:active:bg-gray-700",
+                "border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 active:bg-gray-100 dark:active:bg-gray-700",
-            ghost: "text-[#000000] dark:text-white hover:bg-[#E5E5E5]/20 dark:hover:bg-gray-700/30 active:bg-[#E5E5E5]/30 dark:active:bg-gray-700/50",
+            ghost: "text-gray-700 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800 active:bg-gray-200 dark:active:bg-gray-700",
         };
 
         const sizes = {
-            sm: "h-9 px-3 text-[13px]",
+            sm: "h-8 px-3 text-xs",
-            md: "h-10 px-4 text-[14px]",
+            md: "h-10 px-4 text-sm",
-            lg: "h-12 px-6 text-[14px]",
+            lg: "h-12 px-6 text-base",
         };
 
         return (
             <button
                 ref={ref}
                 className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
-                style={variant === 'primary' ? { background: 'var(--gradient-primary)' } : undefined}
                 disabled={disabled || isLoading}
                 {...props}
             >
                 {isLoading && (
-                    <i className="ri-loader-4-line animate-spin mr-2 text-[20px]" />
+                    <svg
+                        className="animate-spin -ml-1 mr-2 h-4 w-4 text-current"
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                    >
+                        <circle
+                            className="opacity-25"
+                            cx="12"
+                            cy="12"
+                            r="10"
+                            stroke="currentColor"
+                            strokeWidth="4"
+                        ></circle>
+                        <path
+                            className="opacity-75"
+                            fill="currentColor"
+                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                        ></path>
+                    </svg>
                 )}
                 {!isLoading && leftIcon && (
                     <i className={`${leftIcon} mr-2 text-[20px]`} />

front-end-agency/components/ui/CommandPalette.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { Combobox, Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { useRouter } from 'next/navigation';
+import {
+    HomeIcon,
+    RocketLaunchIcon,
+    ChartBarIcon,
+    BriefcaseIcon,
+    LifebuoyIcon,
+    CreditCardIcon,
+    DocumentTextIcon,
+    FolderIcon,
+    ShareIcon,
+    Cog6ToothIcon,
+    PlusIcon,
+    ArrowRightIcon
+} from '@heroicons/react/24/outline';
+
+interface CommandPaletteProps {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+}
+
+export default function CommandPalette({ isOpen, setIsOpen }: CommandPaletteProps) {
+    const [query, setQuery] = useState('');
+    const router = useRouter();
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    // Atalho de teclado (Ctrl+K ou Cmd+K)
+    useEffect(() => {
+        const onKeydown = (event: KeyboardEvent) => {
+            if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                setIsOpen(true);
+            }
+        };
+        window.addEventListener('keydown', onKeydown);
+        return () => {
+            window.removeEventListener('keydown', onKeydown);
+        };
+    }, [setIsOpen]);
+
+    const navigation = [
+        { name: 'Visão Geral', href: '/dashboard', icon: HomeIcon, category: 'Navegação' },
+        { name: 'CRM (Mission Control)', href: '/crm', icon: RocketLaunchIcon, category: 'Navegação' },
+        { name: 'ERP', href: '/erp', icon: ChartBarIcon, category: 'Navegação' },
+        { name: 'Projetos', href: '/projetos', icon: BriefcaseIcon, category: 'Navegação' },
+        { name: 'Helpdesk', href: '/helpdesk', icon: LifebuoyIcon, category: 'Navegação' },
+        { name: 'Pagamentos', href: '/pagamentos', icon: CreditCardIcon, category: 'Navegação' },
+        { name: 'Contratos', href: '/contratos', icon: DocumentTextIcon, category: 'Navegação' },
+        { name: 'Documentos', href: '/documentos', icon: FolderIcon, category: 'Navegação' },
+        { name: 'Redes Sociais', href: '/social', icon: ShareIcon, category: 'Navegação' },
+        { name: 'Configurações', href: '/configuracoes', icon: Cog6ToothIcon, category: 'Navegação' },
+        // Ações
+        { name: 'Novo Projeto', href: '/projetos/novo', icon: PlusIcon, category: 'Ações' },
+        { name: 'Novo Chamado', href: '/helpdesk/novo', icon: PlusIcon, category: 'Ações' },
+        { name: 'Novo Contrato', href: '/contratos/novo', icon: PlusIcon, category: 'Ações' },
+    ];
+
+    const filteredItems =
+        query === ''
+            ? navigation
+            : navigation.filter((item) => {
+                return item.name.toLowerCase().includes(query.toLowerCase());
+            });
+
+    // Agrupar itens por categoria
+    const groups = filteredItems.reduce((acc, item) => {
+        if (!acc[item.category]) {
+            acc[item.category] = [];
+        }
+        acc[item.category].push(item);
+        return acc;
+    }, {} as Record<string, typeof filteredItems>);
+
+    const handleSelect = (item: typeof navigation[0] | null) => {
+        if (!item) return;
+        setIsOpen(false);
+        router.push(item.href);
+        setQuery('');
+    };
+
+    return (
+        <Dialog open={isOpen} onClose={setIsOpen} className="relative z-50" initialFocus={inputRef}>
+            <DialogBackdrop
+                transition
+                className="fixed inset-0 bg-zinc-900/40 backdrop-blur-sm transition-opacity duration-300 data-[closed]:opacity-0"
+            />
+
+            <div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
+                <DialogPanel
+                    transition
+                    className="mx-auto max-w-2xl transform overflow-hidden rounded-xl bg-white dark:bg-zinc-900 shadow-2xl transition-all duration-300 data-[closed]:opacity-0 data-[closed]:scale-95"
+                >
+                    <Combobox onChange={handleSelect}>
+                        <div className="relative">
+                            <MagnifyingGlassIcon
+                                className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-zinc-400"
+                                aria-hidden="true"
+                            />
+                            <Combobox.Input
+                                ref={inputRef}
+                                className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-zinc-900 dark:text-white placeholder:text-zinc-400 focus:ring-0 sm:text-sm font-medium"
+                                placeholder="O que você procura?"
+                                onChange={(event) => setQuery(event.target.value)}
+                                displayValue={(item: any) => item?.name}
+                                autoComplete="off"
+                            />
+                        </div>
+
+                        {filteredItems.length > 0 && (
+                            <Combobox.Options static className="max-h-[60vh] scroll-py-2 overflow-y-auto py-2 text-sm text-zinc-800 dark:text-zinc-200">
+                                {Object.entries(groups).map(([category, items]) => (
+                                    <div key={category}>
+                                        <div className="px-4 py-2 text-[10px] font-bold text-zinc-400 uppercase tracking-wider bg-zinc-50/50 dark:bg-zinc-800/50 mt-2 first:mt-0 mb-1">
+                                            {category}
+                                        </div>
+                                        {items.map((item) => (
+                                            <Combobox.Option
+                                                key={item.href}
+                                                value={item}
+                                                className={({ active }) =>
+                                                    `cursor-pointer select-none px-4 py-2.5 transition-colors ${active
+                                                        ? '[background:var(--gradient)] text-white'
+                                                        : ''
+                                                    }`
+                                                }
+                                            >
+                                                {({ active }) => (
+                                                    <div className="flex items-center gap-3">
+                                                        <div className={`flex h-8 w-8 items-center justify-center rounded-md ${active
+                                                            ? 'bg-white/20 text-white'
+                                                            : 'bg-zinc-50 dark:bg-zinc-900 text-zinc-400'
+                                                            }`}>
+                                                            <item.icon
+                                                                className="h-4 w-4"
+                                                                aria-hidden="true"
+                                                            />
+                                                        </div>
+                                                        <span className={`flex-auto truncate font-medium ${active ? 'text-white' : 'text-zinc-600 dark:text-zinc-400'}`}>
+                                                            {item.name}
+                                                        </span>
+                                                        {active && (
+                                                            <ArrowRightIcon className="h-4 w-4 text-white/70" />
+                                                        )}
+                                                    </div>
+                                                )}
+                                            </Combobox.Option>
+                                        ))}
+                                    </div>
+                                ))}
+                            </Combobox.Options>
+                        )}
+
+                        {query !== '' && filteredItems.length === 0 && (
+                            <div className="py-14 px-6 text-center text-sm sm:px-14">
+                                <MagnifyingGlassIcon className="mx-auto h-6 w-6 text-zinc-400" aria-hidden="true" />
+                                <p className="mt-4 font-semibold text-zinc-900 dark:text-white">Nenhum resultado encontrado</p>
+                                <p className="mt-2 text-zinc-500">Não conseguimos encontrar nada para &quot;{query}&quot;. Tente buscar por páginas ou ações.</p>
+                            </div>
+                        )}
+
+                        <div className="flex items-center justify-between px-4 py-3 bg-zinc-50 dark:bg-zinc-900/50">
+                            <div className="flex gap-4 text-[10px] text-zinc-500 font-medium">
+                                <span className="flex items-center gap-1.5">
+                                    <kbd className="flex h-5 w-5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">↵</kbd>
+                                    Selecionar
+                                </span>
+                                <span className="flex items-center gap-1.5">
+                                    <kbd className="flex h-5 w-5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">↓</kbd>
+                                    <kbd className="flex h-5 w-5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">↑</kbd>
+                                    Navegar
+                                </span>
+                            </div>
+                            <div className="text-[10px] text-zinc-500 font-medium">
+                                <span className="flex items-center gap-1.5">
+                                    <kbd className="flex h-5 w-auto px-1.5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">Esc</kbd>
+                                    Fechar
+                                </span>
+                            </div>
+                        </div>
+                    </Combobox>
+                </DialogPanel>
+            </div>
+        </Dialog>
+    );
+}

front-end-agency/components/ui/Input.tsx

@@ -1,13 +1,14 @@
 "use client";
 
-import { InputHTMLAttributes, forwardRef, useState } from "react";
+import { InputHTMLAttributes, forwardRef, useState, ReactNode } from "react";
+import { EyeIcon, EyeSlashIcon, ExclamationCircleIcon } from "@heroicons/react/24/outline";
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     label?: string;
     error?: string;
     helperText?: string;
-    leftIcon?: string;
+    leftIcon?: ReactNode;
-    rightIcon?: string;
+    rightIcon?: ReactNode;
     onRightIconClick?: () => void;
 }
 
@@ -41,26 +42,26 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
                 )}
                 <div className="relative">
                     {leftIcon && (
-                        <i
+                        <div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-[#7D7D7D] dark:text-gray-400 w-5 h-5">
-                            className={`${leftIcon} absolute left-3.5 top-1/2 -translate-y-1/2 text-[#7D7D7D] dark:text-gray-400 text-[20px]`}
+                            {leftIcon}
-                        />
+                        </div>
                     )}
                     <input
                         ref={ref}
                         type={inputType}
                         className={`
-              w-full px-3.5 py-3 text-[14px] font-normal
+              w-full px-4 py-2.5 text-sm font-normal
-              border rounded-md bg-white dark:bg-gray-700 dark:text-white
+              border rounded-lg bg-white dark:bg-gray-800 dark:text-white
-              placeholder:text-zinc-500 dark:placeholder:text-gray-400
+              placeholder:text-gray-400 dark:placeholder:text-gray-500
-              transition-all
+              transition-all duration-200
               ${leftIcon ? "pl-11" : ""}
               ${isPassword || rightIcon ? "pr-11" : ""}
               ${error
-                                ? "border-red-500 focus:border-red-500"
+                                ? "border-red-500 focus:border-red-500 focus:ring-4 focus:ring-red-500/10"
-                                : "border-zinc-200 dark:border-gray-600 focus:border-brand-500"
+                                : "border-gray-200 dark:border-gray-700 focus:border-brand-500 focus:ring-4 focus:ring-brand-500/10"
                             }
-              outline-none ring-0 focus:ring-0 shadow-none focus:shadow-none
+              outline-none
-              disabled:bg-zinc-100 disabled:cursor-not-allowed
+              disabled:bg-gray-50 disabled:text-gray-500 disabled:cursor-not-allowed
               ${className}
             `}
                         {...props}
@@ -71,9 +72,11 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
                             onClick={() => setShowPassword(!showPassword)}
                             className="absolute right-3.5 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-zinc-900 transition-colors cursor-pointer"
                         >
-                            <i
+                            {showPassword ? (
-                                className={`${showPassword ? "ri-eye-off-line" : "ri-eye-line"} text-[20px]`}
+                                <EyeSlashIcon className="w-5 h-5" />
-                            />
+                            ) : (
+                                <EyeIcon className="w-5 h-5" />
+                            )}
                         </button>
                     )}
                     {!isPassword && rightIcon && (
@@ -82,13 +85,13 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
                             onClick={onRightIconClick}
                             className="absolute right-3.5 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-zinc-900 transition-colors cursor-pointer"
                         >
-                            <i className={`${rightIcon} text-[20px]`} />
+                            <div className="w-5 h-5">{rightIcon}</div>
                         </button>
                     )}
                 </div>
                 {error && (
                     <p className="mt-1 text-[13px] text-red-500 flex items-center gap-1">
-                        <i className="ri-error-warning-line" />
+                        <ExclamationCircleIcon className="w-4 h-4" />
                         {error}
                     </p>
                 )}

front-end-agency/lib/api.ts

@@ -2,8 +2,9 @@
  * API Configuration - URLs e funções de requisição
  */
 
-// URL base da API - pode ser alterada por variável de ambiente
+// URL base da API - usa path relativo para passar pelo middleware do Next.js
-export const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://api.localhost';
+// que adiciona os headers de tenant (X-Tenant-Subdomain)
+export const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || '';
 
 /**
  * Endpoints da API
@@ -18,6 +19,8 @@ export const API_ENDPOINTS = {
 
     // Admin / Agencies
     adminAgencyRegister: `${API_BASE_URL}/api/admin/agencies/register`,
+    agencyProfile: `${API_BASE_URL}/api/agency/profile`,
+    tenantConfig: `${API_BASE_URL}/api/tenant/config`,
 
     // Health
     health: `${API_BASE_URL}/health`,

front-end-agency/lib/auth.ts

@@ -10,6 +10,7 @@ export interface User {
     tenantId?: string;
     company?: string;
     subdomain?: string;
+    logoUrl?: string;
 }
 
 const TOKEN_KEY = 'token';

front-end-agency/lib/colors.ts

@@ -0,0 +1,183 @@
+/**
+ * Utilitários para manipulação de cores e garantia de acessibilidade
+ */
+
+/**
+ * Converte hex para RGB
+ */
+export function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+        }
+        : null;
+}
+
+/**
+ * Converte RGB para hex
+ */
+export function rgbToHex(r: number, g: number, b: number): string {
+    return '#' + [r, g, b].map((x) => {
+        const hex = Math.round(x).toString(16);
+        return hex.length === 1 ? '0' + hex : hex;
+    }).join('');
+}
+
+/**
+ * Calcula luminosidade relativa (0-1) - WCAG 2.0
+ */
+export function getLuminance(hex: string): number {
+    const rgb = hexToRgb(hex);
+    if (!rgb) return 0;
+
+    const [r, g, b] = [rgb.r, rgb.g, rgb.b].map((val) => {
+        const v = val / 255;
+        return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+    });
+
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+/**
+ * Calcula contraste entre duas cores (1-21) - WCAG 2.0
+ */
+export function getContrast(color1: string, color2: string): number {
+    const lum1 = getLuminance(color1);
+    const lum2 = getLuminance(color2);
+    const lighter = Math.max(lum1, lum2);
+    const darker = Math.min(lum1, lum2);
+    return (lighter + 0.05) / (darker + 0.05);
+}
+
+/**
+ * Verifica se a cor é clara (luminosidade > 0.5)
+ */
+export function isLight(hex: string): boolean {
+    return getLuminance(hex) > 0.5;
+}
+
+/**
+ * Escurece uma cor em uma porcentagem
+ */
+export function darken(hex: string, amount: number): string {
+    const rgb = hexToRgb(hex);
+    if (!rgb) return hex;
+
+    const factor = 1 - amount;
+    return rgbToHex(
+        rgb.r * factor,
+        rgb.g * factor,
+        rgb.b * factor
+    );
+}
+
+/**
+ * Clareia uma cor em uma porcentagem
+ */
+export function lighten(hex: string, amount: number): string {
+    const rgb = hexToRgb(hex);
+    if (!rgb) return hex;
+
+    const factor = amount;
+    return rgbToHex(
+        rgb.r + (255 - rgb.r) * factor,
+        rgb.g + (255 - rgb.g) * factor,
+        rgb.b + (255 - rgb.b) * factor
+    );
+}
+
+/**
+ * Gera cor de hover automática baseada na luminosidade
+ * Se a cor for clara, escurece 15%
+ * Se a cor for escura, clareia 15%
+ */
+export function generateHoverColor(hex: string): string {
+    return isLight(hex) ? darken(hex, 0.15) : lighten(hex, 0.15);
+}
+
+/**
+ * Determina se deve usar texto branco ou preto sobre uma cor de fundo
+ * Prioriza branco para cores vibrantes/saturadas
+ */
+export function getTextColor(backgroundColor: string): string {
+    const contrastWithWhite = getContrast(backgroundColor, '#FFFFFF');
+    const contrastWithBlack = getContrast(backgroundColor, '#000000');
+
+    // Se o contraste com branco for >= 3.5, prefere branco (mais comum em UIs modernas)
+    // WCAG AA requer 4.5:1, mas 3:1 para textos grandes
+    if (contrastWithWhite >= 3.5) {
+        return '#FFFFFF';
+    }
+
+    // Se não, usa a cor com melhor contraste
+    return contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000';
+}
+
+/**
+ * Gera paleta completa de cores com hover e variações
+ */
+export function generateColorPalette(primaryHex: string, secondaryHex: string) {
+    const primaryRgb = hexToRgb(primaryHex);
+    const secondaryRgb = hexToRgb(secondaryHex);
+
+    if (!primaryRgb || !secondaryRgb) {
+        throw new Error('Cores inválidas');
+    }
+
+    const primaryHover = generateHoverColor(primaryHex);
+    const secondaryHover = generateHoverColor(secondaryHex);
+
+    const primaryRgbString = `${primaryRgb.r} ${primaryRgb.g} ${primaryRgb.b}`;
+    const secondaryRgbString = `${secondaryRgb.r} ${secondaryRgb.g} ${secondaryRgb.b}`;
+    const hoverRgb = hexToRgb(primaryHover);
+    const hoverRgbString = hoverRgb ? `${hoverRgb.r} ${hoverRgb.g} ${hoverRgb.b}` : secondaryRgbString;
+
+    return {
+        primary: primaryHex,
+        secondary: secondaryHex,
+        primaryHover,
+        secondaryHover,
+        primaryRgb: primaryRgbString,
+        secondaryRgb: secondaryRgbString,
+        hoverRgb: hoverRgbString,
+        gradient: `linear-gradient(135deg, ${primaryHex}, ${secondaryHex})`,
+        textOnPrimary: getTextColor(primaryHex),
+        textOnSecondary: getTextColor(secondaryHex),
+        isLightPrimary: isLight(primaryHex),
+        isLightSecondary: isLight(secondaryHex),
+        contrast: getContrast(primaryHex, secondaryHex),
+    };
+}
+
+/**
+ * Valida se as cores têm contraste suficiente
+ */
+export function validateColorContrast(primary: string, secondary: string): {
+    valid: boolean;
+    warnings: string[];
+} {
+    const warnings: string[] = [];
+    const contrast = getContrast(primary, secondary);
+
+    if (contrast < 3) {
+        warnings.push('As cores são muito similares e podem causar problemas de legibilidade');
+    }
+
+    const primaryContrast = getContrast(primary, '#FFFFFF');
+    if (primaryContrast < 4.5 && !isLight(primary)) {
+        warnings.push('A cor primária pode ter baixo contraste com texto branco');
+    }
+
+    const secondaryContrast = getContrast(secondary, '#FFFFFF');
+    if (secondaryContrast < 4.5 && !isLight(secondary)) {
+        warnings.push('A cor secundária pode ter baixo contraste com texto branco');
+    }
+
+    return {
+        valid: warnings.length === 0,
+        warnings,
+    };
+}

front-end-agency/lib/server-api.ts

@@ -0,0 +1,85 @@
+/**
+ * Server-side API functions
+ * Estas funções são executadas APENAS no servidor (não no cliente)
+ */
+
+import { cookies, headers } from 'next/headers';
+
+const API_BASE_URL = process.env.API_INTERNAL_URL || 'http://backend:8080';
+
+interface AgencyBrandingData {
+    logo_url?: string;
+    primary_color?: string;
+    secondary_color?: string;
+    name?: string;
+}
+
+/**
+ * Busca os dados de branding da agência no servidor
+ * Usa o subdomínio do request para identificar a agência
+ */
+export async function getAgencyBranding(): Promise<AgencyBrandingData | null> {
+    try {
+        // Pegar o hostname do request
+        const headersList = await headers();
+        const hostname = headersList.get('host') || '';
+
+        // Extrair subdomain (remover porta se houver)
+        const hostnameWithoutPort = hostname.split(':')[0];
+        const subdomain = hostnameWithoutPort.split('.')[0];
+
+        console.log(`[ServerAPI] Full hostname: ${hostname}, Without port: ${hostnameWithoutPort}, Subdomain: ${subdomain}`);
+
+        if (!subdomain || subdomain === 'localhost' || subdomain === 'www') {
+            console.log(`[ServerAPI] Invalid subdomain, skipping: ${subdomain}`);
+            return null;
+        }
+
+        // Buscar dados da agência pela API
+        const url = `${API_BASE_URL}/api/tenant/config?subdomain=${subdomain}`;
+        console.log(`[ServerAPI] Fetching agency config from: ${url}`);
+
+        const response = await fetch(url, {
+            cache: 'no-store', // Sempre buscar dados atualizados
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+
+        if (!response.ok) {
+            console.error(`[ServerAPI] Failed to fetch agency branding for ${subdomain}: ${response.status}`);
+            return null;
+        }
+
+        const data = await response.json();
+        console.log(`[ServerAPI] Agency branding data for ${subdomain}:`, JSON.stringify(data));
+        return data as AgencyBrandingData;
+    } catch (error) {
+        console.error('[ServerAPI] Error fetching agency branding:', error);
+        return null;
+    }
+}
+
+/**
+ * Busca apenas o logo da agência (para metadata)
+ */
+export async function getAgencyLogo(): Promise<string | null> {
+    const branding = await getAgencyBranding();
+    return branding?.logo_url || null;
+}
+
+/**
+ * Busca as cores da agência (para passar ao client component)
+ */
+export async function getAgencyColors(): Promise<{ primary: string; secondary: string } | null> {
+    const branding = await getAgencyBranding();
+
+    if (branding?.primary_color && branding?.secondary_color) {
+        return {
+            primary: branding.primary_color,
+            secondary: branding.secondary_color,
+        };
+    }
+
+    return null;
+}

front-end-agency/middleware.ts

@@ -7,29 +7,62 @@ export async function middleware(request: NextRequest) {
 
     const apiBase = process.env.API_INTERNAL_URL || 'http://backend:8080';
 
-    // Extrair subdomínio
+    // Extrair subdomínio (remover porta se houver)
-    const subdomain = hostname.split('.')[0];
+    const hostnameWithoutPort = hostname.split(':')[0];
+    const subdomain = hostnameWithoutPort.split('.')[0];
 
-    // Validar subdomínio de agência ({subdomain}.localhost)
+    // Rotas públicas que não precisam de validação de tenant
-    if (hostname.includes('.')) {
+    const publicPaths = ['/login', '/cadastro', '/'];
+    const isPublicPath = publicPaths.some(path => url.pathname === path || url.pathname.startsWith(path + '/'));
+
+    // Validar subdomínio de agência ({subdomain}.localhost) apenas se não for rota pública
+    if (hostname.includes('.') && !isPublicPath) {
         try {
-            const res = await fetch(`${apiBase}/api/tenant/check?subdomain=${subdomain}`);
+            const res = await fetch(`${apiBase}/api/tenant/check?subdomain=${subdomain}`, {
+                cache: 'no-store',
+                headers: {
+                    'Content-Type': 'application/json',
+                }
+            });
+
             if (!res.ok) {
+                console.error(`Tenant check failed for ${subdomain}: ${res.status}`);
+                // Se for 404, realmente não existe. Se for 500, pode ser erro temporário.
+                // Por segurança, vamos redirecionar apenas se tivermos certeza que falhou a validação (ex: 404)
+                // ou se o backend estiver inalcançável de forma persistente.
+                // Para evitar loops durante desenvolvimento, vamos permitir passar se for erro de servidor (5xx)
+                // mas redirecionar se for 404.
+
+                if (res.status === 404) {
                     const baseHost = hostname.split('.').slice(1).join('.') || hostname;
                     const redirectUrl = new URL(url.toString());
                     redirectUrl.hostname = baseHost;
                     redirectUrl.pathname = '/';
                     return NextResponse.redirect(redirectUrl);
                 }
+            }
         } catch (err) {
-            const baseHost = hostname.split('.').slice(1).join('.') || hostname;
+            console.error('Middleware error:', err);
-            const redirectUrl = new URL(url.toString());
+            // Em caso de erro de rede (backend fora do ar), permitir carregar a página
-            redirectUrl.hostname = baseHost;
+            // para não travar o frontend completamente (pode mostrar erro na tela depois)
-            redirectUrl.pathname = '/';
+            // return NextResponse.next();
-            return NextResponse.redirect(redirectUrl);
         }
     }
 
+    // Para requisições de API, adicionar headers com informações do tenant
+    if (url.pathname.startsWith('/api/')) {
+        // Cria um header customizado com o subdomain
+        const requestHeaders = new Headers(request.headers);
+        requestHeaders.set('X-Tenant-Subdomain', subdomain);
+        requestHeaders.set('X-Original-Host', hostname);
+
+        return NextResponse.rewrite(url, {
+            request: {
+                headers: requestHeaders,
+            },
+        });
+    }
+
     // Permitir acesso normal
     return NextResponse.next();
 }
@@ -38,11 +71,10 @@ export const config = {
     matcher: [
         /*
          * Match all request paths except for the ones starting with:
-         * - api (API routes)
          * - _next/static (static files)
          * - _next/image (image optimization files)
          * - favicon.ico (favicon file)
          */
-        '/((?!api|_next/static|_next/image|favicon.ico).*)',
+        '/((?!_next/static|_next/image|favicon.ico).*)',
     ],
 };

front-end-agency/next.config.ts

@@ -1,6 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  reactStrictMode: false, // Desabilitar StrictMode para evitar double render que causa removeChild
   experimental: {
     externalDir: true,
   },
@@ -23,6 +24,10 @@ const nextConfig: NextConfig = {
             key: "X-Forwarded-For",
             value: "127.0.0.1",
           },
+          {
+            key: "X-Forwarded-Host",
+            value: "${host}",
+          },
         ],
       },
     ];

front-end-agency/tailwind.preset.js

@@ -10,17 +10,18 @@ module.exports = {
             },
             colors: {
                 brand: {
-                    50: '#fff4ef',
+                    50: 'rgb(var(--brand-rgb) / 0.05)',
-                    100: '#ffe8df',
+                    100: 'rgb(var(--brand-rgb) / 0.1)',
-                    200: '#ffd0c0',
+                    200: 'rgb(var(--brand-rgb) / 0.2)',
-                    300: '#ffb093',
+                    300: 'rgb(var(--brand-rgb) / 0.4)',
-                    400: '#ff8a66',
+                    400: 'rgb(var(--brand-rgb) / 0.8)',
-                    500: '#ff3a05',
+                    500: 'rgb(var(--brand-rgb) / <alpha-value>)',
-                    600: '#ff1f45',
+                    600: 'rgb(var(--brand-strong-rgb) / <alpha-value>)',
-                    700: '#ff0080',
+                    700: 'rgb(var(--brand-strong-rgb) / 0.8)',
-                    800: '#d10069',
+                    800: 'rgb(var(--brand-strong-rgb) / 0.6)',
-                    900: '#9e0050',
+                    900: 'rgb(var(--brand-strong-rgb) / 0.4)',
-                    950: '#4b0028',
+                    950: 'rgb(var(--brand-strong-rgb) / 0.2)',
+                    hover: 'rgb(var(--brand-hover-rgb) / <alpha-value>)',
                 },
                 surface: {
                     light: '#ffffff',

front-end-dash.aggios.app/app/superadmin/agencies/[id]/page.tsx

@@ -155,7 +155,7 @@ export default function AgencyDetailPage() {
                     <div className="flex gap-3">
                         <Link
                             href={`/superadmin/agencies/${tenant.id}/edit`}
-                            className="px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors font-medium text-sm"
+                            className="px-4 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors font-medium text-sm"
                         >
                             Editar Dados
                         </Link>

front-end-dash.aggios.app/app/superadmin/agencies/new/page.tsx

@@ -99,7 +99,7 @@ export default function NewAgencyPage() {
                                     required
                                     value={formData.agencyName}
                                     onChange={handleChange}
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
+                                    className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500"
                                 />
                             </div>
 
@@ -114,7 +114,7 @@ export default function NewAgencyPage() {
                                     value={formData.subdomain}
                                     onChange={handleChange}
                                     placeholder="exemplo"
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
+                                    className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500"
                                 />
                                 <p className="text-xs text-gray-500 mt-1">Será usado como: exemplo.aggios.app</p>
                             </div>
@@ -126,7 +126,7 @@ export default function NewAgencyPage() {
                                     name="cnpj"
                                     value={formData.cnpj}
                                     onChange={handleChange}
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
+                                    className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500"
                                 />
                             </div>
 
@@ -137,7 +137,7 @@ export default function NewAgencyPage() {
                                     name="razaoSocial"
                                     value={formData.razaoSocial}
                                     onChange={handleChange}
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
+                                    className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500"
                                 />
                             </div>
 
@@ -149,7 +149,7 @@ export default function NewAgencyPage() {
                                     value={formData.website}
                                     onChange={handleChange}
                                     placeholder="https://"
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
+                                    className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500"
                                 />
                             </div>
 
@@ -160,7 +160,7 @@ export default function NewAgencyPage() {
                                     name="phone"
                                     value={formData.phone}
                                     onChange={handleChange}
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
+                                    className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500"
                                 />
                             </div>
 
@@ -172,7 +172,7 @@ export default function NewAgencyPage() {
                                     value={formData.industry}
                                     onChange={handleChange}
                                     placeholder="Ex: Tecnologia, Marketing"
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
+                                    className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500"
                                 />
                             </div>
 
@@ -182,7 +182,7 @@ export default function NewAgencyPage() {
                                     name="teamSize"
                                     value={formData.teamSize}
                                     onChange={handleChange}
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
+                                    className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500"
                                 >
                                     <option value="">Selecione</option>
                                     <option value="1-10">1-10 pessoas</option>
@@ -199,7 +199,7 @@ export default function NewAgencyPage() {
                                     value={formData.description}
                                     onChange={handleChange}
                                     rows={3}
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
+                                    className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500"
                                 />
                             </div>
                         </div>
@@ -216,7 +216,7 @@ export default function NewAgencyPage() {
                                     name="cep"
                                     value={formData.cep}
                                     onChange={handleChange}
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
+                                    className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500"
                                 />
                             </div>
 
@@ -229,7 +229,7 @@ export default function NewAgencyPage() {
                                     onChange={handleChange}
                                     maxLength={2}
                                     placeholder="SP"
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
+                                    className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500"
                                 />
                             </div>
 
@@ -240,7 +240,7 @@ export default function NewAgencyPage() {
                                     name="city"
                                     value={formData.city}
                                     onChange={handleChange}
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
+                                    className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500"
                                 />
                             </div>
 
@@ -251,7 +251,7 @@ export default function NewAgencyPage() {
                                     name="neighborhood"
                                     value={formData.neighborhood}
                                     onChange={handleChange}
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
+                                    className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500"
                                 />
                             </div>
 
@@ -262,7 +262,7 @@ export default function NewAgencyPage() {
                                     name="number"
                                     value={formData.number}
                                     onChange={handleChange}
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
+                                    className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500"
                                 />
                             </div>
 
@@ -273,7 +273,7 @@ export default function NewAgencyPage() {
                                     name="street"
                                     value={formData.street}
                                     onChange={handleChange}
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
+                                    className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500"
                                 />
                             </div>
 
@@ -284,7 +284,7 @@ export default function NewAgencyPage() {
                                     name="complement"
                                     value={formData.complement}
                                     onChange={handleChange}
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
+                                    className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500"
                                 />
                             </div>
                         </div>
@@ -304,7 +304,7 @@ export default function NewAgencyPage() {
                                     required
                                     value={formData.adminName}
                                     onChange={handleChange}
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
+                                    className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500"
                                 />
                             </div>
 
@@ -318,7 +318,7 @@ export default function NewAgencyPage() {
                                     required
                                     value={formData.adminEmail}
                                     onChange={handleChange}
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
+                                    className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500"
                                 />
                             </div>
 
@@ -333,7 +333,7 @@ export default function NewAgencyPage() {
                                     minLength={8}
                                     value={formData.adminPassword}
                                     onChange={handleChange}
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
+                                    className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500"
                                 />
                                 <p className="text-xs text-gray-500 mt-1">Mínimo 8 caracteres</p>
                             </div>
@@ -345,7 +345,7 @@ export default function NewAgencyPage() {
                         <button
                             type="button"
                             onClick={() => router.back()}
-                            className="px-6 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
+                            className="px-6 py-2 border border-gray-200 rounded-md hover:bg-gray-50 transition-colors"
                         >
                             Cancelar
                         </button>

front-end-dash.aggios.app/app/superadmin/layout.tsx

@@ -1,6 +1,25 @@
 "use client";
 
 import { DashboardLayout } from '@/components/layout/DashboardLayout';
+import {
+    HomeIcon,
+    BuildingOfficeIcon,
+    LinkIcon,
+    DocumentTextIcon,
+    Cog6ToothIcon,
+    SparklesIcon,
+} from '@heroicons/react/24/outline';
+
+const SUPERADMIN_MENU_ITEMS = [
+    { id: 'dashboard', label: 'Dashboard', href: '/superadmin', icon: HomeIcon },
+    { id: 'agencies', label: 'Agências', href: '/superadmin/agencies', icon: BuildingOfficeIcon },
+    { id: 'plans', label: 'Planos', href: '/superadmin/plans', icon: SparklesIcon },
+    { id: 'templates', label: 'Templates', href: '/superadmin/signup-templates', icon: LinkIcon },
+    { id: 'agency-templates', label: 'Templates Agência', href: '/superadmin/agency-templates', icon: DocumentTextIcon },
+    { id: 'settings', label: 'Configurações', href: '/superadmin/settings', icon: Cog6ToothIcon },
+];
+
+import AuthGuard from '@/components/auth/AuthGuard';
 
 export default function SuperAdminLayout({
     children,
@@ -8,8 +27,10 @@ export default function SuperAdminLayout({
     children: React.ReactNode;
 }) {
     return (
-        <DashboardLayout>
+        <AuthGuard>
+            <DashboardLayout menuItems={SUPERADMIN_MENU_ITEMS}>
                 {children}
             </DashboardLayout>
+        </AuthGuard>
     );
 }

front-end-dash.aggios.app/app/superadmin/plans/[id]/page.tsx

@@ -0,0 +1,371 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import { ArrowLeftIcon, CheckCircleIcon } from '@heroicons/react/24/outline';
+
+interface Plan {
+    id: string;
+    name: string;
+    slug: string;
+    description: string;
+    min_users: number;
+    max_users: number;
+    monthly_price: number | null;
+    annual_price: number | null;
+    features: string[];
+    differentiators: string[];
+    storage_gb: number;
+    is_active: boolean;
+    created_at: string;
+}
+
+export default function EditPlanPage() {
+    const router = useRouter();
+    const params = useParams();
+    const planId = params.id as string;
+
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [success, setSuccess] = useState(false);
+    const [plan, setPlan] = useState<Plan | null>(null);
+    const [formData, setFormData] = useState<Partial<Plan>>({});
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (!token) {
+            router.push('/login');
+            return;
+        }
+
+        fetchPlan();
+    }, [planId, router]);
+
+    const fetchPlan = async () => {
+        try {
+            setLoading(true);
+            const token = localStorage.getItem('token');
+            const response = await fetch(`/api/admin/plans/${planId}`, {
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                },
+            });
+
+            if (!response.ok) {
+                throw new Error('Erro ao carregar plano');
+            }
+
+            const data = await response.json();
+            setPlan(data.plan);
+            setFormData(data.plan);
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'Erro ao carregar plano');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const { name, value, type } = e.target;
+
+        if (type === 'checkbox') {
+            setFormData(prev => ({
+                ...prev,
+                [name]: (e.target as HTMLInputElement).checked,
+            }));
+        } else if (type === 'number') {
+            setFormData(prev => ({
+                ...prev,
+                [name]: value === '' ? null : parseFloat(value),
+            }));
+        } else {
+            setFormData(prev => ({
+                ...prev,
+                [name]: value,
+            }));
+        }
+    };
+
+    const handleSave = async () => {
+        try {
+            setSaving(true);
+            setError(null);
+            setSuccess(false);
+
+            const token = localStorage.getItem('token');
+
+            // Parse features e differentiators
+            const features = (formData.features as any)
+                .split(',')
+                .map((f: string) => f.trim())
+                .filter((f: string) => f.length > 0);
+
+            const differentiators = (formData.differentiators as any)
+                .split(',')
+                .map((d: string) => d.trim())
+                .filter((d: string) => d.length > 0);
+
+            const payload = {
+                ...formData,
+                features,
+                differentiators,
+            };
+
+            const response = await fetch(`/api/admin/plans/${planId}`, {
+                method: 'PUT',
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload),
+            });
+
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.message || 'Erro ao atualizar plano');
+            }
+
+            setSuccess(true);
+            setTimeout(() => setSuccess(false), 3000);
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'Erro ao atualizar plano');
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className="flex items-center justify-center min-h-[400px]">
+                <div className="text-center">
+                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+                    <p className="text-zinc-600 dark:text-zinc-400">Carregando plano...</p>
+                </div>
+            </div>
+        );
+    }
+
+    if (!plan) {
+        return (
+            <div className="text-center py-12">
+                <p className="text-red-600 dark:text-red-400">Plano não encontrado</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-6">
+            {/* Header */}
+            <div className="flex items-center gap-4">
+                <button
+                    onClick={() => router.back()}
+                    className="p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
+                >
+                    <ArrowLeftIcon className="h-6 w-6 text-zinc-600 dark:text-zinc-400" />
+                </button>
+                <div>
+                    <h1 className="text-3xl font-bold text-zinc-900 dark:text-white">Editar Plano</h1>
+                    <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{plan.name}</p>
+                </div>
+            </div>
+
+            {/* Success Message */}
+            {success && (
+                <div className="rounded-lg bg-emerald-50 dark:bg-emerald-900/20 p-4 border border-emerald-200 dark:border-emerald-800 flex items-center gap-3">
+                    <CheckCircleIcon className="h-5 w-5 text-emerald-600 dark:text-emerald-400 flex-shrink-0" />
+                    <p className="text-sm font-medium text-emerald-800 dark:text-emerald-400">Plano atualizado com sucesso!</p>
+                </div>
+            )}
+
+            {/* Error Message */}
+            {error && (
+                <div className="rounded-lg bg-red-50 dark:bg-red-900/20 p-4 border border-red-200 dark:border-red-800">
+                    <p className="text-sm font-medium text-red-800 dark:text-red-400">{error}</p>
+                </div>
+            )}
+
+            {/* Form Card */}
+            <div className="rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-6 sm:p-8">
+                <form className="space-y-6" onSubmit={(e) => { e.preventDefault(); handleSave(); }}>
+                    {/* Row 1: Nome e Slug */}
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div>
+                            <label className="block text-sm font-semibold text-zinc-900 dark:text-white mb-2">
+                                Nome do Plano
+                            </label>
+                            <input
+                                type="text"
+                                name="name"
+                                value={formData.name || ''}
+                                onChange={handleInputChange}
+                                className="w-full px-4 py-2.5 border border-zinc-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-sm font-semibold text-zinc-900 dark:text-white mb-2">
+                                Slug
+                            </label>
+                            <input
+                                type="text"
+                                name="slug"
+                                value={formData.slug || ''}
+                                onChange={handleInputChange}
+                                className="w-full px-4 py-2.5 border border-zinc-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                            />
+                        </div>
+                    </div>
+
+                    {/* Descrição */}
+                    <div>
+                        <label className="block text-sm font-semibold text-zinc-900 dark:text-white mb-2">
+                            Descrição
+                        </label>
+                        <textarea
+                            name="description"
+                            value={formData.description || ''}
+                            onChange={handleInputChange}
+                            rows={3}
+                            className="w-full px-4 py-2.5 border border-zinc-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all resize-none"
+                        />
+                    </div>
+
+                    {/* Row 2: Usuários */}
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div>
+                            <label className="block text-sm font-semibold text-zinc-900 dark:text-white mb-2">
+                                Mínimo de Usuários
+                            </label>
+                            <input
+                                type="number"
+                                name="min_users"
+                                value={formData.min_users || 1}
+                                onChange={handleInputChange}
+                                min="1"
+                                className="w-full px-4 py-2.5 border border-zinc-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-sm font-semibold text-zinc-900 dark:text-white mb-2">
+                                Máximo de Usuários (-1 = ilimitado)
+                            </label>
+                            <input
+                                type="number"
+                                name="max_users"
+                                value={formData.max_users || 30}
+                                onChange={handleInputChange}
+                                className="w-full px-4 py-2.5 border border-zinc-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                            />
+                        </div>
+                    </div>
+
+                    {/* Row 3: Preços */}
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div>
+                            <label className="block text-sm font-semibold text-zinc-900 dark:text-white mb-2">
+                                Preço Mensal (BRL)
+                            </label>
+                            <input
+                                type="number"
+                                name="monthly_price"
+                                value={formData.monthly_price || ''}
+                                onChange={handleInputChange}
+                                step="0.01"
+                                className="w-full px-4 py-2.5 border border-zinc-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-sm font-semibold text-zinc-900 dark:text-white mb-2">
+                                Preço Anual (BRL)
+                            </label>
+                            <input
+                                type="number"
+                                name="annual_price"
+                                value={formData.annual_price || ''}
+                                onChange={handleInputChange}
+                                step="0.01"
+                                className="w-full px-4 py-2.5 border border-zinc-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                            />
+                        </div>
+                    </div>
+
+                    {/* Armazenamento */}
+                    <div>
+                        <label className="block text-sm font-semibold text-zinc-900 dark:text-white mb-2">
+                            Armazenamento (GB)
+                        </label>
+                        <input
+                            type="number"
+                            name="storage_gb"
+                            value={formData.storage_gb || 1}
+                            onChange={handleInputChange}
+                            min="1"
+                            className="w-full px-4 py-2.5 border border-zinc-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                        />
+                    </div>
+
+                    {/* Features */}
+                    <div>
+                        <label className="block text-sm font-semibold text-zinc-900 dark:text-white mb-2">
+                            Recursos <span className="text-xs font-normal text-zinc-500">(separados por vírgula)</span>
+                        </label>
+                        <textarea
+                            name="features"
+                            value={typeof formData.features === 'string' ? formData.features : (formData.features || []).join(', ')}
+                            onChange={handleInputChange}
+                            rows={3}
+                            className="w-full px-4 py-2.5 border border-zinc-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all resize-none"
+                        />
+                    </div>
+
+                    {/* Differentiators */}
+                    <div>
+                        <label className="block text-sm font-semibold text-zinc-900 dark:text-white mb-2">
+                            Diferenciais <span className="text-xs font-normal text-zinc-500">(separados por vírgula)</span>
+                        </label>
+                        <textarea
+                            name="differentiators"
+                            value={typeof formData.differentiators === 'string' ? formData.differentiators : (formData.differentiators || []).join(', ')}
+                            onChange={handleInputChange}
+                            rows={3}
+                            className="w-full px-4 py-2.5 border border-zinc-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all resize-none"
+                        />
+                    </div>
+
+                    {/* Status Checkbox */}
+                    <div className="pt-4 border-t border-zinc-200 dark:border-zinc-800">
+                        <label className="flex items-center gap-3">
+                            <input
+                                type="checkbox"
+                                name="is_active"
+                                checked={formData.is_active || false}
+                                onChange={handleInputChange}
+                                className="h-5 w-5 rounded border-zinc-300 dark:border-zinc-600 text-blue-600 focus:ring-blue-500 dark:bg-zinc-800 cursor-pointer"
+                            />
+                            <span className="text-sm font-semibold text-zinc-900 dark:text-white">Plano Ativo</span>
+                        </label>
+                    </div>
+
+                    {/* Buttons */}
+                    <div className="flex gap-3 pt-6 border-t border-zinc-200 dark:border-zinc-800">
+                        <button
+                            type="submit"
+                            disabled={saving}
+                            className="flex-1 px-6 py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-colors"
+                        >
+                            {saving ? 'Salvando...' : 'Salvar Alterações'}
+                        </button>
+                        <button
+                            type="button"
+                            onClick={() => router.back()}
+                            disabled={saving}
+                            className="flex-1 px-6 py-3 border border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-semibold rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                        >
+                            Cancelar
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}

front-end-dash.aggios.app/app/superadmin/plans/page.tsx

@@ -0,0 +1,271 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { PencilIcon, TrashIcon, PlusIcon } from '@heroicons/react/24/outline';
+import CreatePlanModal from '@/components/plans/CreatePlanModal';
+
+export default function PlansPage() {
+    const [plans, setPlans] = useState<any[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState('');
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    useEffect(() => {
+        fetchPlans();
+    }, []);
+
+    const fetchPlans = async () => {
+        try {
+            setLoading(true);
+            const token = localStorage.getItem('token');
+            const response = await fetch('/api/admin/plans', {
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                },
+            });
+
+            if (!response.ok) {
+                throw new Error('Erro ao carregar planos');
+            }
+
+            const data = await response.json();
+            setPlans(data.plans || []);
+            setError('');
+        } catch (err: any) {
+            setError(err.message);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleDeletePlan = async (id: string) => {
+        if (!confirm('Tem certeza que deseja deletar este plano? Esta ação não pode ser desfeita.')) {
+            return;
+        }
+
+        try {
+            const token = localStorage.getItem('token');
+            const response = await fetch(`/api/admin/plans/${id}`, {
+                method: 'DELETE',
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                },
+            });
+
+            if (!response.ok) {
+                throw new Error('Erro ao deletar plano');
+            }
+
+            fetchPlans();
+        } catch (err: any) {
+            setError(err.message);
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className="flex items-center justify-center min-h-[400px]">
+                <div className="text-center">
+                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+                    <p className="text-zinc-600 dark:text-zinc-400">Carregando planos...</p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-6">
+            {/* Header */}
+            <div className="flex justify-between items-center">
+                <div>
+                    <h1 className="text-3xl font-bold text-zinc-900 dark:text-white">Planos</h1>
+                    <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+                        Gerencie os planos de assinatura disponíveis para as agências
+                    </p>
+                </div>
+                <button
+                    onClick={() => setIsModalOpen(true)}
+                    className="inline-flex items-center gap-2 px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors shadow-sm"
+                >
+                    <PlusIcon className="h-5 w-5" />
+                    Novo Plano
+                </button>
+            </div>
+
+            {/* Error Message */}
+            {error && (
+                <div className="rounded-lg bg-red-50 dark:bg-red-900/20 p-4 border border-red-200 dark:border-red-800">
+                    <p className="text-sm font-medium text-red-800 dark:text-red-400">{error}</p>
+                </div>
+            )}
+
+            {/* Plans Grid */}
+            {plans.length > 0 ? (
+                <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+                    {plans.map((plan) => (
+                        <div
+                            key={plan.id}
+                            className="group rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:shadow-lg dark:hover:shadow-2xl transition-all duration-200 overflow-hidden"
+                        >
+                            {/* Header */}
+                            <div className="px-6 pt-6 pb-4 border-b border-zinc-100 dark:border-zinc-800">
+                                <div className="flex items-start justify-between mb-2">
+                                    <div>
+                                        <h3 className="text-lg font-semibold text-zinc-900 dark:text-white">
+                                            {plan.name}
+                                        </h3>
+                                        {!plan.is_active && (
+                                            <span className="inline-block mt-2 px-2 py-1 rounded-full text-xs font-semibold bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400">
+                                                Inativo
+                                            </span>
+                                        )}
+                                    </div>
+                                    {plan.is_active && (
+                                        <span className="px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400">
+                                            Ativo
+                                        </span>
+                                    )}
+                                </div>
+                                {plan.description && (
+                                    <p className="text-sm text-zinc-600 dark:text-zinc-400 line-clamp-2">
+                                        {plan.description}
+                                    </p>
+                                )}
+                            </div>
+
+                            {/* Content */}
+                            <div className="px-6 py-4 space-y-4">
+                                {/* Pricing */}
+                                <div className="space-y-2">
+                                    {plan.monthly_price && (
+                                        <div className="flex justify-between items-center">
+                                            <span className="text-sm text-zinc-600 dark:text-zinc-400">Mensal</span>
+                                            <span className="text-2xl font-bold text-zinc-900 dark:text-white">
+                                                R$ <span className="text-xl">{parseFloat(plan.monthly_price).toFixed(2)}</span>
+                                            </span>
+                                        </div>
+                                    )}
+                                    {plan.annual_price && (
+                                        <div className="flex justify-between items-center">
+                                            <span className="text-sm text-zinc-600 dark:text-zinc-400">Anual</span>
+                                            <span className="text-2xl font-bold text-zinc-900 dark:text-white">
+                                                R$ <span className="text-xl">{parseFloat(plan.annual_price).toFixed(2)}</span>
+                                            </span>
+                                        </div>
+                                    )}
+                                </div>
+
+                                {/* Stats */}
+                                <div className="grid grid-cols-2 gap-3 pt-2 border-t border-zinc-100 dark:border-zinc-800">
+                                    <div className="p-3 bg-zinc-50 dark:bg-zinc-800 rounded-lg">
+                                        <p className="text-xs text-zinc-600 dark:text-zinc-400 mb-1">Usuários</p>
+                                        <p className="text-sm font-semibold text-zinc-900 dark:text-white">
+                                            {plan.min_users} - {plan.max_users === -1 ? '∞' : plan.max_users}
+                                        </p>
+                                    </div>
+                                    <div className="p-3 bg-zinc-50 dark:bg-zinc-800 rounded-lg">
+                                        <p className="text-xs text-zinc-600 dark:text-zinc-400 mb-1">Armazenamento</p>
+                                        <p className="text-sm font-semibold text-zinc-900 dark:text-white">
+                                            {plan.storage_gb} GB
+                                        </p>
+                                    </div>
+                                </div>
+
+                                {/* Features */}
+                                {plan.features && plan.features.length > 0 && (
+                                    <div className="pt-2">
+                                        <p className="text-xs font-semibold text-zinc-700 dark:text-zinc-300 uppercase tracking-wide mb-2">
+                                            Recursos
+                                        </p>
+                                        <ul className="space-y-1">
+                                            {plan.features.slice(0, 4).map((feature: string, idx: number) => (
+                                                <li key={idx} className="text-xs text-zinc-600 dark:text-zinc-400 flex items-center gap-2">
+                                                    <span className="inline-block h-1.5 w-1.5 bg-blue-600 rounded-full"></span>
+                                                    {feature}
+                                                </li>
+                                            ))}
+                                            {plan.features.length > 4 && (
+                                                <li className="text-xs text-zinc-600 dark:text-zinc-400 italic">
+                                                    +{plan.features.length - 4} mais
+                                                </li>
+                                            )}
+                                        </ul>
+                                    </div>
+                                )}
+
+                                {/* Differentiators */}
+                                {plan.differentiators && plan.differentiators.length > 0 && (
+                                    <div className="pt-2">
+                                        <p className="text-xs font-semibold text-zinc-700 dark:text-zinc-300 uppercase tracking-wide mb-2">
+                                            Diferenciais
+                                        </p>
+                                        <ul className="space-y-1">
+                                            {plan.differentiators.slice(0, 2).map((diff: string, idx: number) => (
+                                                <li key={idx} className="text-xs text-zinc-600 dark:text-zinc-400 flex items-center gap-2">
+                                                    <span className="inline-block h-1.5 w-1.5 bg-emerald-600 rounded-full"></span>
+                                                    {diff}
+                                                </li>
+                                            ))}
+                                            {plan.differentiators.length > 2 && (
+                                                <li className="text-xs text-zinc-600 dark:text-zinc-400 italic">
+                                                    +{plan.differentiators.length - 2} mais
+                                                </li>
+                                            )}
+                                        </ul>
+                                    </div>
+                                )}
+                            </div>
+
+                            {/* Footer */}
+                            <div className="px-6 py-4 bg-zinc-50 dark:bg-zinc-800/50 border-t border-zinc-100 dark:border-zinc-800 flex gap-2">
+                                <a
+                                    href={`/superadmin/plans/${plan.id}`}
+                                    className="flex-1 inline-flex items-center justify-center gap-2 px-3 py-2 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 hover:bg-blue-200 dark:hover:bg-blue-900/50 font-medium rounded-lg transition-colors text-sm"
+                                >
+                                    <PencilIcon className="h-4 w-4" />
+                                    Editar
+                                </a>
+                                <button
+                                    onClick={() => handleDeletePlan(plan.id)}
+                                    className="flex-1 inline-flex items-center justify-center gap-2 px-3 py-2 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-900/50 font-medium rounded-lg transition-colors text-sm"
+                                >
+                                    <TrashIcon className="h-4 w-4" />
+                                    Deletar
+                                </button>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            ) : (
+                <div className="text-center py-12">
+                    <div className="text-zinc-400 dark:text-zinc-600 mb-2">
+                        <svg
+                            className="h-12 w-12 mx-auto"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={1.5}
+                                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                            />
+                        </svg>
+                    </div>
+                    <p className="text-zinc-600 dark:text-zinc-400 text-lg font-medium">Nenhum plano criado</p>
+                    <p className="text-zinc-500 dark:text-zinc-500 text-sm">Clique no botão acima para criar o primeiro plano</p>
+                </div>
+            )}
+
+            {/* Create Plan Modal */}
+            <CreatePlanModal
+                isOpen={isModalOpen}
+                onClose={() => setIsModalOpen(false)}
+                onSuccess={() => {
+                    fetchPlans();
+                }}
+            />
+        </div>
+    );
+}

front-end-dash.aggios.app/components/auth/AuthGuard.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
+import { isAuthenticated } from '@/lib/auth';
+
+export default function AuthGuard({ children }: { children: React.ReactNode }) {
+    const router = useRouter();
+    const pathname = usePathname();
+    const [authorized, setAuthorized] = useState(false);
+
+    useEffect(() => {
+        const checkAuth = () => {
+            const isAuth = isAuthenticated();
+
+            if (!isAuth) {
+                setAuthorized(false);
+                // Evitar redirect loop se já estiver no login
+                if (pathname !== '/login') {
+                    router.push('/login');
+                }
+            } else {
+                setAuthorized(true);
+            }
+        };
+
+        checkAuth();
+
+        const handleStorageChange = (e: StorageEvent) => {
+            if (e.key === 'token' || e.key === 'user') {
+                checkAuth();
+            }
+        };
+
+        window.addEventListener('storage', handleStorageChange);
+        return () => window.removeEventListener('storage', handleStorageChange);
+    }, [router, pathname]);
+
+    if (!authorized) {
+        return null;
+    }
+
+    return <>{children}</>;
+}

front-end-dash.aggios.app/components/layout/DashboardLayout.tsx

@@ -1,14 +1,15 @@
 'use client';
 
 import React, { useState } from 'react';
-import { SidebarRail } from './SidebarRail';
+import { SidebarRail, MenuItem } from './SidebarRail';
 import { TopBar } from './TopBar';
 
 interface DashboardLayoutProps {
     children: React.ReactNode;
+    menuItems: MenuItem[];
 }
 
-export const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => {
+export const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children, menuItems }) => {
     // Estado centralizado do layout
     const [isExpanded, setIsExpanded] = useState(true);
     const [activeTab, setActiveTab] = useState('dashboard');
@@ -21,6 +22,7 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) =>
                 onTabChange={setActiveTab}
                 isExpanded={isExpanded}
                 onToggle={() => setIsExpanded(!isExpanded)}
+                menuItems={menuItems}
             />
 
             {/* Área de Conteúdo (Children) */}

front-end-dash.aggios.app/components/layout/SidebarRail.tsx

@@ -20,11 +20,19 @@ import {
     MoonIcon,
 } from '@heroicons/react/24/outline';
 
+export interface MenuItem {
+    id: string;
+    label: string;
+    href: string;
+    icon: any;
+}
+
 interface SidebarRailProps {
     activeTab: string;
     onTabChange: (tab: string) => void;
     isExpanded: boolean;
     onToggle: () => void;
+    menuItems: MenuItem[];
 }
 
 export const SidebarRail: React.FC<SidebarRailProps> = ({
@@ -32,6 +40,7 @@ export const SidebarRail: React.FC<SidebarRailProps> = ({
     onTabChange,
     isExpanded,
     onToggle,
+    menuItems,
 }) => {
     const pathname = usePathname();
     const router = useRouter();
@@ -42,14 +51,6 @@ export const SidebarRail: React.FC<SidebarRailProps> = ({
         setMounted(true);
     }, []);
 
-    const menuItems = [
-        { id: 'dashboard', label: 'Dashboard', href: '/superadmin', icon: HomeIcon },
-        { id: 'agencies', label: 'Agências', href: '/superadmin/agencies', icon: BuildingOfficeIcon },
-        { id: 'templates', label: 'Templates', href: '/superadmin/signup-templates', icon: LinkIcon },
-        { id: 'agency-templates', label: 'Templates Agência', href: '/superadmin/agency-templates', icon: DocumentTextIcon },
-        { id: 'settings', label: 'Configurações', href: '/superadmin/settings', icon: Cog6ToothIcon },
-    ];
-
     const handleLogout = () => {
         localStorage.removeItem('token');
         localStorage.removeItem('user');
@@ -107,7 +108,7 @@ export const SidebarRail: React.FC<SidebarRailProps> = ({
                         label={item.label}
                         icon={item.icon}
                         href={item.href}
-                        active={pathname === item.href || (item.href !== '/superadmin' && pathname?.startsWith(item.href))}
+                        active={pathname === item.href || (item.href !== '/superadmin' && item.href !== '/dashboard' && pathname?.startsWith(item.href))}
                         onClick={() => onTabChange(item.id)}
                         isExpanded={isExpanded}
                     />
@@ -136,7 +137,7 @@ export const SidebarRail: React.FC<SidebarRailProps> = ({
                         leaveFrom="transform opacity-100 scale-100"
                         leaveTo="transform opacity-0 scale-95"
                     >
-                        <Menu.Items className={`absolute ${isExpanded ? 'left-0' : 'left-14'} bottom-0 mb-2 w-48 origin-bottom-left rounded-xl bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none overflow-hidden z-50`}>
+                        <Menu.Items className={`absolute ${isExpanded ? 'left-0' : 'left-14'} bottom-0 mb-2 w-48 origin-bottom-left rounded-xl bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 shadow-lg focus:outline-none overflow-hidden z-50`}>
                             <div className="p-1">
                                 <Menu.Item>
                                     {({ active }) => (
@@ -148,6 +149,17 @@ export const SidebarRail: React.FC<SidebarRailProps> = ({
                                         </button>
                                     )}
                                 </Menu.Item>
+                                <Menu.Item>
+                                    {({ active }) => (
+                                        <Link
+                                            href="/superadmin/settings"
+                                            className={`${active ? 'bg-gray-100 dark:bg-zinc-800' : ''} text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs`}
+                                        >
+                                            <Cog6ToothIcon className="mr-2 h-4 w-4" />
+                                            Configurações
+                                        </Link>
+                                    )}
+                                </Menu.Item>
                                 <Menu.Item>
                                     {({ active }) => (
                                         <button

front-end-dash.aggios.app/components/plans/CreatePlanModal.tsx

@@ -0,0 +1,415 @@
+'use client';
+
+import { Fragment, useState } from 'react';
+import { Dialog, Transition } from '@headlessui/react';
+import {
+    XMarkIcon,
+    SparklesIcon,
+} from '@heroicons/react/24/outline';
+
+interface CreatePlanModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSuccess: (plan: any) => void;
+}
+
+interface CreatePlanForm {
+    name: string;
+    slug: string;
+    description: string;
+    min_users: number;
+    max_users: number;
+    monthly_price: string;
+    annual_price: string;
+    features: string;
+    differentiators: string;
+    storage_gb: number;
+    is_active: boolean;
+}
+
+function classNames(...classes: string[]) {
+    return classes.filter(Boolean).join(' ');
+}
+
+export default function CreatePlanModal({ isOpen, onClose, onSuccess }: CreatePlanModalProps) {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+    const [formData, setFormData] = useState<CreatePlanForm>({
+        name: '',
+        slug: '',
+        description: '',
+        min_users: 1,
+        max_users: 30,
+        monthly_price: '',
+        annual_price: '',
+        features: '',
+        differentiators: '',
+        storage_gb: 1,
+        is_active: true,
+    });
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const { name, value, type } = e.target;
+
+        if (type === 'checkbox') {
+            setFormData(prev => ({
+                ...prev,
+                [name]: (e.target as HTMLInputElement).checked,
+            }));
+        } else if (type === 'number') {
+            setFormData(prev => ({
+                ...prev,
+                [name]: parseFloat(value) || 0,
+            }));
+        } else {
+            setFormData(prev => ({
+                ...prev,
+                [name]: value,
+            }));
+        }
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setLoading(true);
+        setError('');
+
+        try {
+            // Validações básicas
+            if (!formData.name || !formData.slug) {
+                setError('Nome e Slug são obrigatórios');
+                setLoading(false);
+                return;
+            }
+
+            const token = localStorage.getItem('token');
+
+            // Parse features e differentiators
+            const features = formData.features
+                .split(',')
+                .map(f => f.trim())
+                .filter(f => f.length > 0);
+
+            const differentiators = formData.differentiators
+                .split(',')
+                .map(d => d.trim())
+                .filter(d => d.length > 0);
+
+            const payload = {
+                name: formData.name,
+                slug: formData.slug,
+                description: formData.description,
+                min_users: formData.min_users,
+                max_users: formData.max_users,
+                monthly_price: formData.monthly_price ? parseFloat(formData.monthly_price) : null,
+                annual_price: formData.annual_price ? parseFloat(formData.annual_price) : null,
+                features,
+                differentiators,
+                storage_gb: formData.storage_gb,
+                is_active: formData.is_active,
+            };
+
+            const response = await fetch('/api/admin/plans', {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload),
+            });
+
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.message || 'Erro ao criar plano');
+            }
+
+            const data = await response.json();
+            onSuccess(data.plan);
+            onClose();
+        } catch (err: any) {
+            setError(err.message);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleClose = () => {
+        if (!loading) {
+            setError('');
+            setFormData({
+                name: '',
+                slug: '',
+                description: '',
+                min_users: 1,
+                max_users: 30,
+                monthly_price: '',
+                annual_price: '',
+                features: '',
+                differentiators: '',
+                storage_gb: 1,
+                is_active: true,
+            });
+            onClose();
+        }
+    };
+
+    return (
+        <Transition.Root show={isOpen} as={Fragment}>
+            <Dialog as="div" className="relative z-50" onClose={handleClose}>
+                <Transition.Child
+                    as={Fragment}
+                    enter="ease-out duration-300"
+                    enterFrom="opacity-0"
+                    enterTo="opacity-100"
+                    leave="ease-in duration-200"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                >
+                    <div className="fixed inset-0 bg-zinc-900/40 backdrop-blur-sm transition-opacity" />
+                </Transition.Child>
+
+                <div className="fixed inset-0 z-10 overflow-y-auto">
+                    <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+                        <Transition.Child
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                            enterTo="opacity-100 translate-y-0 sm:scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+                            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                        >
+                            <Dialog.Panel className="relative transform overflow-hidden rounded-2xl bg-white dark:bg-zinc-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl border border-zinc-200 dark:border-zinc-800">
+                                <div className="absolute right-0 top-0 hidden pr-4 pt-4 sm:block">
+                                    <button
+                                        type="button"
+                                        className="rounded-md bg-white dark:bg-zinc-900 text-zinc-400 hover:text-zinc-500 focus:outline-none"
+                                        onClick={handleClose}
+                                        disabled={loading}
+                                    >
+                                        <span className="sr-only">Fechar</span>
+                                        <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                                    </button>
+                                </div>
+
+                                <div className="p-6 sm:p-8">
+                                    {/* Header */}
+                                    <div className="sm:flex sm:items-start mb-6">
+                                        <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900 sm:mx-0 sm:h-10 sm:w-10">
+                                            <SparklesIcon className="h-6 w-6 text-blue-600 dark:text-blue-400" aria-hidden="true" />
+                                        </div>
+                                        <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+                                            <Dialog.Title as="h3" className="text-xl font-semibold leading-6 text-zinc-900 dark:text-white">
+                                                Criar Novo Plano
+                                            </Dialog.Title>
+                                            <div className="mt-2">
+                                                <p className="text-sm text-zinc-500 dark:text-zinc-400">
+                                                    Configure um novo plano de assinatura para as agências.
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    {/* Error Message */}
+                                    {error && (
+                                        <div className="mb-4 rounded-lg bg-red-50 dark:bg-red-900/20 p-4 border border-red-200 dark:border-red-800">
+                                            <p className="text-sm font-medium text-red-800 dark:text-red-400">{error}</p>
+                                        </div>
+                                    )}
+
+                                    <form onSubmit={handleSubmit} className="space-y-4">
+                                        {/* Row 1: Nome e Slug */}
+                                        <div className="grid grid-cols-2 gap-4">
+                                            <div>
+                                                <label className="block text-sm font-medium text-zinc-900 dark:text-zinc-100 mb-1">
+                                                    Nome do Plano *
+                                                </label>
+                                                <input
+                                                    type="text"
+                                                    name="name"
+                                                    value={formData.name}
+                                                    onChange={handleChange}
+                                                    placeholder="Ex: Ignição"
+                                                    className="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                                                    required
+                                                />
+                                            </div>
+                                            <div>
+                                                <label className="block text-sm font-medium text-zinc-900 dark:text-zinc-100 mb-1">
+                                                    Slug *
+                                                </label>
+                                                <input
+                                                    type="text"
+                                                    name="slug"
+                                                    value={formData.slug}
+                                                    onChange={handleChange}
+                                                    placeholder="Ex: ignition"
+                                                    className="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                                                    required
+                                                />
+                                            </div>
+                                        </div>
+
+                                        {/* Descrição */}
+                                        <div>
+                                            <label className="block text-sm font-medium text-zinc-900 dark:text-zinc-100 mb-1">
+                                                Descrição
+                                            </label>
+                                            <textarea
+                                                name="description"
+                                                value={formData.description}
+                                                onChange={handleChange}
+                                                placeholder="Descrição breve do plano"
+                                                rows={2}
+                                                className="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+                                            />
+                                        </div>
+
+                                        {/* Row 2: Usuários */}
+                                        <div className="grid grid-cols-2 gap-4">
+                                            <div>
+                                                <label className="block text-sm font-medium text-zinc-900 dark:text-zinc-100 mb-1">
+                                                    Mín. Usuários
+                                                </label>
+                                                <input
+                                                    type="number"
+                                                    name="min_users"
+                                                    value={formData.min_users}
+                                                    onChange={handleChange}
+                                                    min="1"
+                                                    className="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                                                />
+                                            </div>
+                                            <div>
+                                                <label className="block text-sm font-medium text-zinc-900 dark:text-zinc-100 mb-1">
+                                                    Máx. Usuários (-1 = ilimitado)
+                                                </label>
+                                                <input
+                                                    type="number"
+                                                    name="max_users"
+                                                    value={formData.max_users}
+                                                    onChange={handleChange}
+                                                    className="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                                                />
+                                            </div>
+                                        </div>
+
+                                        {/* Row 3: Preços */}
+                                        <div className="grid grid-cols-2 gap-4">
+                                            <div>
+                                                <label className="block text-sm font-medium text-zinc-900 dark:text-zinc-100 mb-1">
+                                                    Preço Mensal (BRL)
+                                                </label>
+                                                <input
+                                                    type="number"
+                                                    name="monthly_price"
+                                                    value={formData.monthly_price}
+                                                    onChange={handleChange}
+                                                    placeholder="199.99"
+                                                    step="0.01"
+                                                    className="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                                                />
+                                            </div>
+                                            <div>
+                                                <label className="block text-sm font-medium text-zinc-900 dark:text-zinc-100 mb-1">
+                                                    Preço Anual (BRL)
+                                                </label>
+                                                <input
+                                                    type="number"
+                                                    name="annual_price"
+                                                    value={formData.annual_price}
+                                                    onChange={handleChange}
+                                                    placeholder="1919.90"
+                                                    step="0.01"
+                                                    className="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                                                />
+                                            </div>
+                                        </div>
+
+                                        {/* Row 4: Storage */}
+                                        <div>
+                                            <label className="block text-sm font-medium text-zinc-900 dark:text-zinc-100 mb-1">
+                                                Armazenamento (GB)
+                                            </label>
+                                            <input
+                                                type="number"
+                                                name="storage_gb"
+                                                value={formData.storage_gb}
+                                                onChange={handleChange}
+                                                min="1"
+                                                className="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                                            />
+                                        </div>
+
+                                        {/* Row 5: Features */}
+                                        <div>
+                                            <label className="block text-sm font-medium text-zinc-900 dark:text-zinc-100 mb-1">
+                                                Recursos <span className="text-xs text-zinc-500">(separados por vírgula)</span>
+                                            </label>
+                                            <textarea
+                                                name="features"
+                                                value={formData.features}
+                                                onChange={handleChange}
+                                                placeholder="CRM, ERP, Projetos, Helpdesk, Pagamentos, Contratos, Documentos"
+                                                rows={2}
+                                                className="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+                                            />
+                                        </div>
+
+                                        {/* Row 6: Diferenciais */}
+                                        <div>
+                                            <label className="block text-sm font-medium text-zinc-900 dark:text-zinc-100 mb-1">
+                                                Diferenciais <span className="text-xs text-zinc-500">(separados por vírgula)</span>
+                                            </label>
+                                            <textarea
+                                                name="differentiators"
+                                                value={formData.differentiators}
+                                                onChange={handleChange}
+                                                placeholder="Suporte prioritário, Gerente de conta dedicado, API integrações"
+                                                rows={2}
+                                                className="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+                                            />
+                                        </div>
+
+                                        {/* Status Checkbox */}
+                                        <div className="flex items-center pt-2">
+                                            <input
+                                                type="checkbox"
+                                                name="is_active"
+                                                checked={formData.is_active}
+                                                onChange={handleChange}
+                                                className="h-4 w-4 text-blue-600 rounded border-zinc-300 focus:ring-blue-500"
+                                            />
+                                            <label className="ml-3 text-sm font-medium text-zinc-900 dark:text-zinc-100">
+                                                Plano Ativo
+                                            </label>
+                                        </div>
+
+                                        {/* Buttons */}
+                                        <div className="mt-6 pt-4 border-t border-zinc-200 dark:border-zinc-700 flex gap-3">
+                                            <button
+                                                type="submit"
+                                                disabled={loading}
+                                                className="flex-1 px-4 py-2.5 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors"
+                                            >
+                                                {loading ? 'Criando...' : 'Criar Plano'}
+                                            </button>
+                                            <button
+                                                type="button"
+                                                onClick={handleClose}
+                                                disabled={loading}
+                                                className="flex-1 px-4 py-2.5 border border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-medium rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                                            >
+                                                Cancelar
+                                            </button>
+                                        </div>
+                                    </form>
+                                </div>
+                            </Dialog.Panel>
+                        </Transition.Child>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition.Root>
+    );
+}

frontend-aggios.app/app/design-system/README.md

@@ -0,0 +1,107 @@
+# Design System - Aggios Platform
+
+Documentação visual completa do Design System da plataforma Aggios.
+
+## Acesso
+
+Acesse em: `/design-system`
+
+## O que está incluído
+
+### 🎨 Cores
+- **Brand Colors**: Paleta completa de azul (50-950)
+- **Gray Scale**: Escala de cinzas (50-950)
+- **Surface Colors**: Cores de superfície (light, dark, muted, card)
+- **Text Colors**: Cores de texto (primary, secondary, inverse)
+
+### 📏 Espaçamentos
+- `xs` - 4px (0.25rem)
+- `sm` - 8px (0.5rem)
+- `md` - 16px (1rem)
+- `lg` - 24px (1.5rem)
+- `xl` - 32px (2rem)
+- `2xl` - 48px (3rem)
+
+### ✍️ Tipografia
+- **Headings**: Arimo (h1-h6)
+- **Body**: Inter (text-xs até text-xl)
+- **Code**: Fira Code (monospace)
+
+### 🔲 Bordas
+- Border Radius: De `rounded-none` até `rounded-full`
+- Border Styles: Solid, dashed, diferentes espessuras
+- Border Colors: Variações de zinc e brand
+
+### 🌈 Gradientes
+- Brand Gradient (`bg-brand`)
+- Primary Gradient (`var(--gradient-primary)`)
+- Accent Gradient (`var(--gradient-accent)`)
+- Gradient Text (`.gradient-text`)
+
+### 🎭 Sombras
+- Sistema de elevação completo
+- Sombras com brand color (`shadow-brand-20`)
+
+### 🎯 Ícones
+- Heroicons (biblioteca completa - outline e solid)
+- Exemplos de uso em diferentes contextos
+- Integração perfeita com Headless UI
+
+### 🔘 Componentes
+
+#### Botões
+- Primary, Secondary, Outline, Ghost
+- Icon Buttons
+- Estados: Normal, Hover, Disabled, Loading
+
+#### Cards
+- Basic, Elevated, Gradient
+- Icon Card, Stat Card, Interactive Card
+
+#### Inputs
+- Text, Email, Textarea
+- Input with Icon
+- Select, Checkbox, Radio
+
+#### Badges
+- Status Badges (success, info, warning, error)
+- Pill Badges
+- Count Badges
+- Dot Indicators
+
+## Variáveis CSS
+
+Todas as variáveis estão definidas em `app/tokens.css`:
+
+```css
+--color-brand-500
+--color-gray-200
+--spacing-md
+--gradient-primary
+--focus-ring
+```
+
+## Classes Utilitárias
+
+```css
+.bg-brand          /* Gradiente de marca */
+.bg-brand-soft     /* Gradiente suave */
+.gradient-text     /* Texto com gradiente */
+.shadow-brand-20   /* Sombra com cor da marca */
+.font-heading      /* Fonte para headings (Open Sans) */
+```
+
+## Dark Mode
+
+Todos os componentes suportam dark mode automático através da classe `.dark` no HTML.
+
+Toggle disponível na página do Design System.
+
+## Uso
+
+Para usar qualquer componente, copie o código HTML/JSX diretamente da página do Design System.
+
+---
+
+**Versão**: 1.0
+**Data**: 2025

frontend-aggios.app/app/design-system/page.tsx

@@ -0,0 +1,877 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { Listbox } from "@headlessui/react";
+import {
+  SunIcon,
+  MoonIcon,
+  HomeIcon,
+  UserIcon,
+  Cog6ToothIcon,
+  BellIcon,
+  MagnifyingGlassIcon,
+  HeartIcon,
+  StarIcon,
+  DocumentIcon,
+  FolderIcon,
+  EnvelopeIcon,
+  PhoneIcon,
+  CalendarIcon,
+  ClockIcon,
+  MapPinIcon,
+  PhotoIcon,
+  VideoCameraIcon,
+  MusicalNoteIcon,
+  ArrowDownTrayIcon,
+  ArrowUpTrayIcon,
+  ShareIcon,
+  PencilIcon,
+  TrashIcon,
+  CheckIcon,
+  XMarkIcon,
+  PlusIcon,
+  RocketLaunchIcon,
+  EllipsisHorizontalIcon,
+  ArrowRightIcon,
+  FireIcon,
+  ShoppingCartIcon,
+  ChevronUpDownIcon,
+} from "@heroicons/react/24/outline";
+
+const options = [
+  { id: 1, name: 'Opção 1' },
+  { id: 2, name: 'Opção 2' },
+  { id: 3, name: 'Opção 3' },
+];
+
+export default function DesignSystemPage() {
+  const [darkMode, setDarkMode] = useState(false);
+  const [selectedOption, setSelectedOption] = useState(options[0]);
+
+  const toggleDarkMode = () => {
+    setDarkMode(!darkMode);
+    document.documentElement.classList.toggle('dark');
+  };
+
+  const iconList = [
+    { name: 'HomeIcon', component: HomeIcon },
+    { name: 'UserIcon', component: UserIcon },
+    { name: 'Cog6ToothIcon', component: Cog6ToothIcon },
+    { name: 'BellIcon', component: BellIcon },
+    { name: 'MagnifyingGlassIcon', component: MagnifyingGlassIcon },
+    { name: 'HeartIcon', component: HeartIcon },
+    { name: 'StarIcon', component: StarIcon },
+    { name: 'DocumentIcon', component: DocumentIcon },
+    { name: 'FolderIcon', component: FolderIcon },
+    { name: 'EnvelopeIcon', component: EnvelopeIcon },
+    { name: 'PhoneIcon', component: PhoneIcon },
+    { name: 'CalendarIcon', component: CalendarIcon },
+    { name: 'ClockIcon', component: ClockIcon },
+    { name: 'MapPinIcon', component: MapPinIcon },
+    { name: 'PhotoIcon', component: PhotoIcon },
+    { name: 'VideoCameraIcon', component: VideoCameraIcon },
+    { name: 'MusicalNoteIcon', component: MusicalNoteIcon },
+    { name: 'ArrowDownTrayIcon', component: ArrowDownTrayIcon },
+    { name: 'ArrowUpTrayIcon', component: ArrowUpTrayIcon },
+    { name: 'ShareIcon', component: ShareIcon },
+    { name: 'PencilIcon', component: PencilIcon },
+    { name: 'TrashIcon', component: TrashIcon },
+    { name: 'CheckIcon', component: CheckIcon },
+    { name: 'XMarkIcon', component: XMarkIcon },
+  ];
+
+  return (
+    <div className={darkMode ? 'dark' : ''}>
+      <div className="min-h-screen bg-white dark:bg-zinc-950 transition-colors">
+        {/* Header fixo */}
+        <header className="sticky top-0 z-50 bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl border-b border-zinc-200 dark:border-zinc-800">
+          <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
+                <span className="text-white font-bold">A</span>
+              </div>
+              <div>
+                <h1 className="font-heading font-bold text-xl text-zinc-900 dark:text-white">Design System</h1>
+                <p className="text-xs text-zinc-500 dark:text-zinc-400">Aggios Platform v1.2</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-4">
+              <button
+                onClick={toggleDarkMode}
+                className="px-3 py-1.5 rounded-lg border border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all flex items-center gap-2 text-sm"
+              >
+                {darkMode ? <SunIcon className="w-4 h-4" /> : <MoonIcon className="w-4 h-4" />}
+                {darkMode ? 'Light' : 'Dark'}
+              </button>
+              <Link href="/" className="px-3 py-1.5 text-white rounded-lg hover:opacity-90 transition-opacity flex items-center gap-2 text-sm" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
+                <HomeIcon className="w-4 h-4" />
+                Home
+              </Link>
+            </div>
+          </div>
+        </header>
+
+        <main className="max-w-7xl mx-auto px-6 py-12">
+          {/* Navegação rápida */}
+          <nav className="mb-12 p-4 bg-zinc-50 dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800">
+            <p className="text-xs uppercase tracking-wider text-zinc-500 mb-3">Navegação Rápida</p>
+            <div className="flex flex-wrap gap-2">
+              {['Cores', 'Espaçamentos', 'Tipografia', 'Bordas', 'Gradiente', 'Sombras', 'Ícones', 'Botões', 'Cards', 'Inputs', 'Badges'].map(item => (
+                <a
+                  key={item}
+                  href={`#${item.toLowerCase()}`}
+                  className="px-3 py-1.5 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-xs font-medium text-zinc-700 dark:text-zinc-300 hover:border-transparent hover:text-white transition-all"
+                  style={{
+                    transition: 'all 0.2s',
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.background = 'linear-gradient(135deg, #ff3a05, #ff0080)';
+                  }}
+                  onMouseLeave={(e) => {
+                    if (darkMode) {
+                      e.currentTarget.style.background = 'rgb(39 39 42)';
+                    } else {
+                      e.currentTarget.style.background = 'white';
+                    }
+                  }}
+                >
+                  {item}
+                </a>
+              ))}
+            </div>
+          </nav>
+
+          {/* CORES */}
+          <section id="cores" className="mb-16 scroll-mt-24">
+            <div className="mb-6">
+              <h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Cores</h2>
+              <p className="text-zinc-600 dark:text-zinc-400">Paleta de cores da plataforma Aggios</p>
+            </div>
+
+            {/* Brand Gradient */}
+            <div className="mb-6">
+              <h3 className="font-semibold text-xl text-zinc-900 dark:text-white mb-4">Brand Gradient</h3>
+              <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
+                <div className="h-32 rounded-xl" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}></div>
+                <p className="text-sm font-mono text-zinc-500 mt-3">linear-gradient(135deg, #ff3a05, #ff0080)</p>
+              </div>
+            </div>
+
+            {/* Gray Scale */}
+            <div className="mb-6">
+              <h3 className="font-semibold text-xl text-zinc-900 dark:text-white mb-4">Gray Scale</h3>
+              <div className="grid grid-cols-2 md:grid-cols-5 lg:grid-cols-11 gap-3">
+                {[50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map(shade => (
+                  <div key={shade} className="space-y-2">
+                    <div
+                      className="h-20 rounded-lg border border-zinc-200 dark:border-zinc-700 shadow-sm"
+                      style={{ backgroundColor: `var(--color-gray-${shade})` }}
+                    ></div>
+                    <div className="text-center">
+                      <p className="text-xs font-mono text-zinc-900 dark:text-white">gray-{shade}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Surface & Text Colors */}
+            <div className="grid md:grid-cols-2 gap-4">
+              <div>
+                <h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-3">Surface Colors</h3>
+                <div className="space-y-2">
+                  {[
+                    { name: 'surface-light', var: '--color-surface-light' },
+                    { name: 'surface-dark', var: '--color-surface-dark' },
+                    { name: 'surface-muted', var: '--color-surface-muted' },
+                    { name: 'surface-card', var: '--color-surface-card' },
+                  ].map(color => (
+                    <div key={color.name} className="flex items-center gap-3">
+                      <div
+                        className="w-16 h-16 rounded-lg border border-zinc-200 dark:border-zinc-700 shadow-sm"
+                        style={{ backgroundColor: `var(${color.var})` }}
+                      ></div>
+                      <div>
+                        <p className="text-xs font-mono font-semibold text-zinc-900 dark:text-white">{color.name}</p>
+                        <p className="text-xs font-mono text-zinc-500">var({color.var})</p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div>
+                <h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-3">Text Colors</h3>
+                <div className="space-y-2">
+                  {[
+                    { name: 'text-primary', var: '--color-text-primary' },
+                    { name: 'text-secondary', var: '--color-text-secondary' },
+                    { name: 'text-inverse', var: '--color-text-inverse' },
+                  ].map(color => (
+                    <div key={color.name} className="flex items-center gap-3">
+                      <div
+                        className="w-16 h-16 rounded-lg border border-zinc-200 dark:border-zinc-700 shadow-sm"
+                        style={{ backgroundColor: `var(${color.var})` }}
+                      ></div>
+                      <div>
+                        <p className="text-xs font-mono font-semibold text-zinc-900 dark:text-white">{color.name}</p>
+                        <p className="text-xs font-mono text-zinc-500">var({color.var})</p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </section>
+
+          {/* ESPAÇAMENTOS */}
+          <section id="espaçamentos" className="mb-16 scroll-mt-24">
+            <div className="mb-6">
+              <h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Espaçamentos</h2>
+              <p className="text-zinc-600 dark:text-zinc-400">Sistema de espaçamento compacto</p>
+            </div>
+
+            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
+              <div className="space-y-4">
+                {[
+                  { name: 'xs', value: '0.125rem', pixels: '2px' },
+                  { name: 'sm', value: '0.25rem', pixels: '4px' },
+                  { name: 'md', value: '0.5rem', pixels: '8px' },
+                  { name: 'lg', value: '0.75rem', pixels: '12px' },
+                  { name: 'xl', value: '1rem', pixels: '16px' },
+                  { name: '2xl', value: '1.5rem', pixels: '24px' },
+                ].map(space => (
+                  <div key={space.name} className="flex items-center gap-4">
+                    <div className="w-28">
+                      <p className="text-xs font-mono font-semibold text-zinc-900 dark:text-white">spacing-{space.name}</p>
+                      <p className="text-xs font-mono text-zinc-500">{space.value} ({space.pixels})</p>
+                    </div>
+                    <div
+                      className="rounded"
+                      style={{
+                        width: space.value,
+                        height: '1.5rem',
+                        background: 'linear-gradient(135deg, #ff3a05, #ff0080)'
+                      }}
+                    ></div>
+                    <div className="flex-1 text-xs text-zinc-500 dark:text-zinc-400">
+                      var(--spacing-{space.name})
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </section>
+
+          {/* TIPOGRAFIA */}
+          <section id="tipografia" className="mb-16 scroll-mt-24">
+            <div className="mb-6">
+              <h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Tipografia</h2>
+              <p className="text-zinc-600 dark:text-zinc-400">Hierarquia de texto e famílias de fontes</p>
+            </div>
+
+            <div className="space-y-4">
+              {/* Headings */}
+              <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
+                <h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-4">Headings (Arimo)</h3>
+                <div className="space-y-3">
+                  <div className="border-b border-zinc-100 dark:border-zinc-800 pb-3">
+                    <h1 className="font-heading font-bold text-4xl text-zinc-900 dark:text-white">Heading 1</h1>
+                    <p className="text-xs font-mono text-zinc-500 mt-2">font-heading font-bold text-4xl</p>
+                  </div>
+                  <div className="border-b border-zinc-100 dark:border-zinc-800 pb-3">
+                    <h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white">Heading 2</h2>
+                    <p className="text-xs font-mono text-zinc-500 mt-2">font-heading font-bold text-3xl</p>
+                  </div>
+                  <div className="border-b border-zinc-100 dark:border-zinc-800 pb-3">
+                    <h3 className="font-heading font-bold text-2xl text-zinc-900 dark:text-white">Heading 3</h3>
+                    <p className="text-xs font-mono text-zinc-500 mt-2">font-heading font-bold text-2xl</p>
+                  </div>
+                  <div>
+                    <h4 className="font-heading font-bold text-xl text-zinc-900 dark:text-white">Heading 4</h4>
+                    <p className="text-xs font-mono text-zinc-500 mt-2">font-heading font-bold text-xl</p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Body Text */}
+              <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
+                <h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-4">Body Text (Inter)</h3>
+                <div className="space-y-3">
+                  <div>
+                    <p className="text-base text-zinc-900 dark:text-white">Text Base - The quick brown fox jumps over the lazy dog</p>
+                    <p className="text-xs font-mono text-zinc-500 mt-1">text-base</p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-zinc-900 dark:text-white">Text SM - The quick brown fox jumps over the lazy dog</p>
+                    <p className="text-xs font-mono text-zinc-500 mt-1">text-sm</p>
+                  </div>
+                  <div>
+                    <p className="text-xs text-zinc-900 dark:text-white">Text XS - The quick brown fox jumps over the lazy dog</p>
+                    <p className="text-xs font-mono text-zinc-500 mt-1">text-xs</p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Code Text */}
+              <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
+                <h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-4">Code (Fira Code)</h3>
+                <div className="space-y-3">
+                  <div className="p-3 bg-zinc-900 dark:bg-zinc-950 rounded-lg">
+                    <code className="font-mono text-sm text-emerald-400">const message = "Hello, Aggios!";</code>
+                  </div>
+                  <p className="text-xs font-mono text-zinc-500">font-mono - Fira Code</p>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          {/* BORDAS */}
+          <section id="bordas" className="mb-16 scroll-mt-24">
+            <div className="mb-6">
+              <h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Bordas</h2>
+              <p className="text-zinc-600 dark:text-zinc-400">Border radius e estilos de borda</p>
+            </div>
+
+            <div className="grid md:grid-cols-2 gap-4">
+              {/* Border Radius */}
+              <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
+                <h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-4">Border Radius</h3>
+                <div className="space-y-3">
+                  {[
+                    { name: 'rounded-none', class: 'rounded-none' },
+                    { name: 'rounded-sm', class: 'rounded-sm' },
+                    { name: 'rounded', class: 'rounded' },
+                    { name: 'rounded-lg', class: 'rounded-lg' },
+                    { name: 'rounded-xl', class: 'rounded-xl' },
+                    { name: 'rounded-2xl', class: 'rounded-2xl' },
+                    { name: 'rounded-full', class: 'rounded-full' },
+                  ].map(radius => (
+                    <div key={radius.name} className="flex items-center gap-3">
+                      <div className={`w-20 h-12 ${radius.class}`} style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}></div>
+                      <p className="text-xs font-mono text-zinc-900 dark:text-white">{radius.name}</p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Border Styles */}
+              <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
+                <h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-4">Border Styles</h3>
+                <div className="space-y-3">
+                  <div className="p-3 border border-zinc-200 dark:border-zinc-700 rounded-lg">
+                    <p className="text-xs font-mono text-zinc-900 dark:text-white">border border-zinc-200</p>
+                  </div>
+                  <div className="p-3 border-2 border-zinc-200 dark:border-zinc-700 rounded-lg">
+                    <p className="text-xs font-mono text-zinc-900 dark:text-white">border-2 border-zinc-200</p>
+                  </div>
+                  <div className="p-3 border border-dashed border-zinc-200 dark:border-zinc-700 rounded-lg">
+                    <p className="text-xs font-mono text-zinc-900 dark:text-white">border border-dashed</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          {/* GRADIENTE */}
+          <section id="gradiente" className="mb-16 scroll-mt-24">
+            <div className="mb-6">
+              <h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Gradiente</h2>
+              <p className="text-zinc-600 dark:text-zinc-400">Gradiente principal da marca</p>
+            </div>
+
+            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
+              <div className="h-32 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
+                <p className="text-white font-semibold">Brand Gradient</p>
+              </div>
+              <p className="text-sm font-mono text-zinc-500 mt-4">background: linear-gradient(135deg, #ff3a05, #ff0080)</p>
+
+              {/* Gradient Text */}
+              <div className="mt-6">
+                <h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-3">Gradient Text</h3>
+                <h2 className="font-heading font-bold text-4xl">
+                  Texto com <span className="gradient-text">gradiente</span>
+                </h2>
+                <p className="text-xs font-mono text-zinc-500 mt-3">&lt;span className="gradient-text"&gt;</p>
+              </div>
+            </div>
+          </section>
+
+          {/* SOMBRAS */}
+          <section id="sombras" className="mb-16 scroll-mt-24">
+            <div className="mb-6">
+              <h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Sombras</h2>
+              <p className="text-zinc-600 dark:text-zinc-400">Sistema de elevação com sombras</p>
+            </div>
+
+            <div className="grid md:grid-cols-4 gap-4">
+              {[
+                { name: 'shadow-sm', class: 'shadow-sm' },
+                { name: 'shadow', class: 'shadow' },
+                { name: 'shadow-md', class: 'shadow-md' },
+                { name: 'shadow-lg', class: 'shadow-lg' },
+              ].map(shadow => (
+                <div key={shadow.name} className="space-y-2">
+                  <div className={`h-24 bg-white dark:bg-zinc-900 rounded-lg ${shadow.class} flex items-center justify-center border border-zinc-100 dark:border-zinc-800`}>
+                    <p className="text-xs font-semibold text-zinc-900 dark:text-white">{shadow.name}</p>
+                  </div>
+                  <p className="text-xs font-mono text-zinc-500 text-center">{shadow.class}</p>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          {/* ÍCONES */}
+          <section id="ícones" className="mb-16 scroll-mt-24">
+            <div className="mb-6">
+              <h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Ícones</h2>
+              <p className="text-zinc-600 dark:text-zinc-400">Heroicons - biblioteca completa (outline)</p>
+            </div>
+
+            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
+              <div className="grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 gap-4">
+                {iconList.map(({ name, component: Icon }) => (
+                  <div key={name} className="flex flex-col items-center gap-2 p-2 hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-lg transition-colors">
+                    <Icon className="w-6 h-6 text-zinc-900 dark:text-white" />
+                    <p className="text-xs font-mono text-zinc-500 text-center leading-tight">{name}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </section>
+
+          {/* BOTÕES */}
+          <section id="botões" className="mb-16 scroll-mt-24">
+            <div className="mb-6">
+              <h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Botões</h2>
+              <p className="text-zinc-600 dark:text-zinc-400">Variações de botões com Headless UI</p>
+            </div>
+
+            <div className="space-y-6">
+              {/* Primary Buttons */}
+              <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
+                <h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-4">Primary Buttons</h3>
+                <div className="flex flex-wrap gap-3">
+                  <button className="px-4 py-2 text-white font-medium rounded-lg hover:opacity-90 transition-opacity flex items-center gap-2 text-sm" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
+                    <PlusIcon className="w-4 h-4" />
+                    Primary
+                  </button>
+                  <button className="px-3 py-1.5 text-white font-medium rounded-lg hover:opacity-90 transition-opacity text-xs" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
+                    Small
+                  </button>
+                  <button className="px-5 py-2.5 text-white font-medium rounded-lg hover:opacity-90 transition-opacity text-sm" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
+                    Medium
+                  </button>
+                </div>
+              </div>
+
+              {/* Secondary Buttons */}
+              <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
+                <h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-4">Secondary Buttons</h3>
+                <div className="flex flex-wrap gap-3">
+                  <button className="px-4 py-2 border-2 border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 font-medium rounded-lg hover:border-transparent hover:text-white transition-all text-sm"
+                    onMouseEnter={(e) => e.currentTarget.style.background = 'linear-gradient(135deg, #ff3a05, #ff0080)'}
+                    onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
+                    Secondary
+                  </button>
+                  <button className="px-4 py-2 border border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 font-medium rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all text-sm">
+                    Outline
+                  </button>
+                  <button className="px-4 py-2 text-zinc-700 dark:text-zinc-300 font-medium rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all text-sm">
+                    Ghost
+                  </button>
+                </div>
+              </div>
+
+              {/* Icon Buttons */}
+              <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
+                <h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-4">Icon Buttons</h3>
+                <div className="flex flex-wrap gap-3">
+                  <button className="w-10 h-10 text-white rounded-lg hover:opacity-90 transition-opacity flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
+                    <HeartIcon className="w-5 h-5" />
+                  </button>
+                  <button className="w-10 h-10 border-2 border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 rounded-lg hover:border-transparent hover:text-white transition-all flex items-center justify-center"
+                    onMouseEnter={(e) => e.currentTarget.style.background = 'linear-gradient(135deg, #ff3a05, #ff0080)'}
+                    onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
+                    <ShareIcon className="w-5 h-5" />
+                  </button>
+                  <button className="w-8 h-8 rounded-full text-white flex items-center justify-center hover:opacity-90 transition-opacity" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
+                    <PlusIcon className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          {/* CARDS */}
+          <section id="cards" className="mb-16 scroll-mt-24">
+            <div className="mb-6">
+              <h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Cards</h2>
+              <p className="text-zinc-600 dark:text-zinc-400">Diferentes estilos de cards</p>
+            </div>
+
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {/* Basic Card */}
+              <div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4">
+                <h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-2">Basic Card</h3>
+                <p className="text-zinc-600 dark:text-zinc-400 mb-3 text-sm">Card simples com borda e padding</p>
+                <button className="text-sm font-semibold hover:underline flex items-center gap-1" style={{ color: '#ff3a05' }}>
+                  Saiba mais <ArrowRightIcon className="w-3 h-3" />
+                </button>
+              </div>
+
+              {/* Elevated Card */}
+              <div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 shadow-md hover:shadow-lg transition-shadow">
+                <h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-2">Elevated Card</h3>
+                <p className="text-zinc-600 dark:text-zinc-400 mb-3 text-sm">Card com sombra e hover effect</p>
+                <button className="text-sm font-semibold hover:underline flex items-center gap-1" style={{ color: '#ff3a05' }}>
+                  Saiba mais <ArrowRightIcon className="w-3 h-3" />
+                </button>
+              </div>
+
+              {/* Gradient Card */}
+              <div className="rounded-xl p-4 text-white shadow-md" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
+                <h3 className="font-semibold text-base mb-2">Gradient Card</h3>
+                <p className="text-white/90 mb-3 text-sm">Card com fundo gradiente</p>
+                <button className="text-white text-sm font-semibold hover:underline flex items-center gap-1">
+                  Saiba mais <ArrowRightIcon className="w-3 h-3" />
+                </button>
+              </div>
+
+              {/* Icon Card */}
+              <div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 hover:border-transparent hover:shadow-md transition-all">
+                <div className="w-10 h-10 rounded-lg flex items-center justify-center mb-3" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
+                  <StarIcon className="w-5 h-5 text-white" />
+                </div>
+                <h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-2">Icon Card</h3>
+                <p className="text-zinc-600 dark:text-zinc-400 text-sm">Card com ícone em destaque</p>
+              </div>
+
+              {/* Stat Card */}
+              <div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4">
+                <p className="text-xs uppercase tracking-wide text-zinc-500 mb-1">Total Revenue</p>
+                <p className="text-2xl font-bold text-zinc-900 dark:text-white mb-1">R$ 128K</p>
+                <p className="text-xs text-emerald-500">+18% este mês</p>
+              </div>
+
+              {/* Interactive Card */}
+              <div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 cursor-pointer hover:scale-105 transition-all"
+                onMouseEnter={(e) => e.currentTarget.style.borderColor = '#ff3a05'}
+                onMouseLeave={(e) => {
+                  if (darkMode) {
+                    e.currentTarget.style.borderColor = 'rgb(39 39 42)';
+                  } else {
+                    e.currentTarget.style.borderColor = 'rgb(228 228 231)';
+                  }
+                }}>
+                <div className="flex items-center justify-between mb-3">
+                  <div className="w-8 h-8 rounded-lg flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
+                    <BellIcon className="w-4 h-4 text-white" />
+                  </div>
+                  <span className="px-2 py-0.5 bg-red-100 text-red-600 text-xs font-semibold rounded-full">3</span>
+                </div>
+                <h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-1">Interactive Card</h3>
+                <p className="text-zinc-600 dark:text-zinc-400 text-sm">Clique para interagir</p>
+              </div>
+            </div>
+          </section>
+
+          {/* INPUTS */}
+          <section id="inputs" className="mb-16 scroll-mt-24">
+            <div className="mb-6">
+              <h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Inputs</h2>
+              <p className="text-zinc-600 dark:text-zinc-400">Campos de formulário com Headless UI</p>
+            </div>
+
+            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
+              <div className="space-y-4 max-w-2xl">
+                {/* Text Input */}
+                <div>
+                  <label className="block text-sm font-medium text-zinc-900 dark:text-white mb-2">
+                    Text Input
+                  </label>
+                  <input
+                    type="text"
+                    placeholder="Digite algo..."
+                    className="w-full px-3 py-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white text-sm placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:border-transparent transition-all"
+                    style={{
+                      '--tw-ring-color': '#ff3a05',
+                    } as React.CSSProperties}
+                  />
+                </div>
+
+                {/* Email Input */}
+                <div>
+                  <label className="block text-sm font-medium text-zinc-900 dark:text-white mb-2">
+                    Email Input
+                  </label>
+                  <input
+                    type="email"
+                    placeholder="seu@email.com"
+                    className="w-full px-3 py-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white text-sm placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:border-transparent transition-all"
+                    style={{
+                      '--tw-ring-color': '#ff3a05',
+                    } as React.CSSProperties}
+                  />
+                </div>
+
+                {/* Input with Icon */}
+                <div>
+                  <label className="block text-sm font-medium text-zinc-900 dark:text-white mb-2">
+                    Input with Icon
+                  </label>
+                  <div className="relative">
+                    <MagnifyingGlassIcon className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" />
+                    <input
+                      type="text"
+                      placeholder="Buscar..."
+                      className="w-full pl-10 pr-3 py-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white text-sm placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:border-transparent transition-all"
+                      style={{
+                        '--tw-ring-color': '#ff3a05',
+                      } as React.CSSProperties}
+                    />
+                  </div>
+                </div>
+
+                {/* Textarea */}
+                <div>
+                  <label className="block text-sm font-medium text-zinc-900 dark:text-white mb-2">
+                    Textarea
+                  </label>
+                  <textarea
+                    rows={3}
+                    placeholder="Digite sua mensagem..."
+                    className="w-full px-3 py-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white text-sm placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:border-transparent transition-all resize-none"
+                    style={{
+                      '--tw-ring-color': '#ff3a05',
+                    } as React.CSSProperties}
+                  ></textarea>
+                </div>
+
+                {/* Select with Headless UI */}
+                <div>
+                  <label className="block text-sm font-medium text-zinc-900 dark:text-white mb-2">
+                    Select (Headless UI)
+                  </label>
+                  <Listbox value={selectedOption} onChange={setSelectedOption}>
+                    <div className="relative">
+                      <Listbox.Button className="relative w-full cursor-pointer rounded-lg bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 py-2 pl-3 pr-10 text-left text-sm focus:outline-none focus:ring-2 focus:border-transparent transition-all"
+                        style={{
+                          '--tw-ring-color': '#ff3a05',
+                        } as React.CSSProperties}>
+                        <span className="block truncate text-zinc-900 dark:text-white">{selectedOption.name}</span>
+                        <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                          <ChevronUpDownIcon
+                            className="h-4 w-4 text-zinc-400"
+                            aria-hidden="true"
+                          />
+                        </span>
+                      </Listbox.Button>
+                      <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-lg bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 py-1 text-sm shadow-lg focus:outline-none">
+                        {options.map((option) => (
+                          <Listbox.Option
+                            key={option.id}
+                            value={option}
+                          >
+                            {({ selected, active }) => (
+                              <div
+                                className={`relative cursor-pointer select-none py-2 pl-10 pr-4 ${
+                                  active ? 'text-white' : 'text-zinc-900 dark:text-white'
+                                }`}
+                                style={{
+                                  background: active ? 'linear-gradient(135deg, #ff3a05, #ff0080)' : 'transparent'
+                                }}
+                              >
+                                <span
+                                  className={`block truncate ${
+                                    selected ? 'font-medium' : 'font-normal'
+                                  }`}
+                                >
+                                  {option.name}
+                                </span>
+                                {selected ? (
+                                  <span className="absolute inset-y-0 left-0 flex items-center pl-3">
+                                    <CheckIcon className="h-4 w-4" aria-hidden="true" />
+                                  </span>
+                                ) : null}
+                              </div>
+                            )}
+                          </Listbox.Option>
+                        ))}
+                      </Listbox.Options>
+                    </div>
+                  </Listbox>
+                </div>
+
+                {/* Checkbox */}
+                <div className="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    id="check1"
+                    className="w-4 h-4 bg-white dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 rounded focus:ring-2"
+                    style={{
+                      accentColor: '#ff3a05',
+                      '--tw-ring-color': '#ff3a05',
+                    } as React.CSSProperties}
+                  />
+                  <label htmlFor="check1" className="text-sm text-zinc-900 dark:text-white">
+                    Checkbox Label
+                  </label>
+                </div>
+
+                {/* Radio */}
+                <div className="space-y-2">
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="radio"
+                      id="radio1"
+                      name="radio"
+                      className="w-4 h-4 bg-white dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 focus:ring-2"
+                      style={{
+                        accentColor: '#ff3a05',
+                        '--tw-ring-color': '#ff3a05',
+                      } as React.CSSProperties}
+                    />
+                    <label htmlFor="radio1" className="text-sm text-zinc-900 dark:text-white">
+                      Radio Option 1
+                    </label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="radio"
+                      id="radio2"
+                      name="radio"
+                      className="w-4 h-4 bg-white dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 focus:ring-2"
+                      style={{
+                        accentColor: '#ff3a05',
+                        '--tw-ring-color': '#ff0080',
+                      } as React.CSSProperties}
+                    />
+                    <label htmlFor="radio2" className="text-sm text-zinc-900 dark:text-white">
+                      Radio Option 2
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          {/* BADGES */}
+          <section id="badges" className="mb-16 scroll-mt-24">
+            <div className="mb-6">
+              <h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Badges</h2>
+              <p className="text-zinc-600 dark:text-zinc-400">Tags, badges e status indicators</p>
+            </div>
+
+            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
+              <div className="space-y-4">
+                {/* Status Badges */}
+                <div>
+                  <h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-3">Status Badges</h3>
+                  <div className="flex flex-wrap gap-2">
+                    <span className="px-2 py-1 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 text-xs font-semibold">
+                      Success
+                    </span>
+                    <span className="px-2 py-1 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 text-xs font-semibold">
+                      Info
+                    </span>
+                    <span className="px-2 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 text-xs font-semibold">
+                      Warning
+                    </span>
+                    <span className="px-2 py-1 rounded-full bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 text-xs font-semibold">
+                      Error
+                    </span>
+                  </div>
+                </div>
+
+                {/* Pill Badges */}
+                <div>
+                  <h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-3">Pill Badges</h3>
+                  <div className="flex flex-wrap gap-2">
+                    <span className="px-3 py-1.5 rounded-full text-white text-xs font-semibold shadow-md flex items-center gap-1.5" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
+                      <RocketLaunchIcon className="w-3 h-3" />
+                      Premium
+                    </span>
+                    <span className="px-3 py-1.5 rounded-full border border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 text-xs font-semibold flex items-center gap-1.5">
+                      <StarIcon className="w-3 h-3" />
+                      New
+                    </span>
+                    <span className="px-3 py-1.5 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 text-xs font-semibold flex items-center gap-1.5">
+                      <FireIcon className="w-3 h-3" />
+                      Popular
+                    </span>
+                  </div>
+                </div>
+
+                {/* Count Badges */}
+                <div>
+                  <h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-3">Count Badges</h3>
+                  <div className="flex flex-wrap gap-3 items-center">
+                    <div className="relative">
+                      <button className="p-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg">
+                        <BellIcon className="w-5 h-5 text-zinc-700 dark:text-zinc-300" />
+                      </button>
+                      <span className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center">
+                        3
+                      </span>
+                    </div>
+                    <div className="relative">
+                      <button className="p-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg">
+                        <EnvelopeIcon className="w-5 h-5 text-zinc-700 dark:text-zinc-300" />
+                      </button>
+                      <span className="absolute -top-1 -right-1 w-4 h-4 text-white text-xs font-bold rounded-full flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
+                        9
+                      </span>
+                    </div>
+                    <div className="relative">
+                      <button className="p-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg">
+                        <ShoppingCartIcon className="w-5 h-5 text-zinc-700 dark:text-zinc-300" />
+                      </button>
+                      <span className="absolute -top-1.5 -right-1.5 px-1.5 py-0.5 bg-emerald-500 text-white text-xs font-bold rounded-full">
+                        12
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Dot Indicators */}
+                <div>
+                  <h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-3">Dot Indicators</h3>
+                  <div className="flex flex-wrap gap-3">
+                    <div className="flex items-center gap-1.5">
+                      <span className="w-2 h-2 bg-emerald-500 rounded-full"></span>
+                      <span className="text-xs text-zinc-700 dark:text-zinc-300">Online</span>
+                    </div>
+                    <div className="flex items-center gap-1.5">
+                      <span className="w-2 h-2 bg-yellow-500 rounded-full"></span>
+                      <span className="text-xs text-zinc-700 dark:text-zinc-300">Away</span>
+                    </div>
+                    <div className="flex items-center gap-1.5">
+                      <span className="w-2 h-2 bg-red-500 rounded-full"></span>
+                      <span className="text-xs text-zinc-700 dark:text-zinc-300">Busy</span>
+                    </div>
+                    <div className="flex items-center gap-1.5">
+                      <span className="w-2 h-2 bg-zinc-400 rounded-full"></span>
+                      <span className="text-xs text-zinc-700 dark:text-zinc-300">Offline</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          {/* Footer */}
+          <div className="text-center py-8 border-t border-zinc-200 dark:border-zinc-800">
+            <p className="text-zinc-600 dark:text-zinc-400 text-sm">
+              Design System criado para <span className="font-bold gradient-text">Aggios Platform</span>
+            </p>
+            <p className="text-xs text-zinc-500 mt-2">
+              Versão 1.2 • 2025
+            </p>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}

frontend-aggios.app/app/globals.css

@@ -14,6 +14,7 @@ html.dark {
   body {
     background-color: var(--color-surface-muted);
     color: var(--color-text-primary);
+    font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
     transition: background-color 0.25s ease, color 0.25s ease;
   }
 
@@ -22,6 +23,12 @@ html.dark {
     color: #f8fafc;
   }
 
+  /* Força fonte Arimo nos headings */
+  h1, h2, h3, h4, h5, h6,
+  .font-heading {
+    font-family: var(--font-arimo), ui-sans-serif, system-ui, sans-serif !important;
+  }
+
   ::selection {
     background-color: var(--color-brand-500);
     color: var(--color-text-inverse);
@@ -73,6 +80,13 @@ html.dark {
   .shadow-brand-20 {
     box-shadow: 0 10px 15px -3px var(--color-brand-shadow-20), 0 4px 6px -4px var(--color-brand-shadow-20);
   }
+
+  .gradient-text {
+    background: var(--color-gradient-brand);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
 }
 
 /* ========== Animations ========== */

frontend-aggios.app/app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Inter, Open_Sans, Fira_Code } from "next/font/google";
+import { Inter, Arimo, Fira_Code } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "next-themes";
 
@@ -9,10 +9,10 @@ const inter = Inter({
   weight: ["400", "500", "600", "700"],
 });
 
-const openSans = Open_Sans({
+const arimo = Arimo({
-  variable: "--font-open-sans",
+  variable: "--font-arimo",
   subsets: ["latin"],
-  weight: ["600", "700"],
+  weight: ["400", "500", "600", "700"],
 });
 
 const firaCode = Fira_Code({
@@ -50,9 +50,8 @@ export default function RootLayout({
             `,
           }}
         />
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css" />
       </head>
-      <body className={`${inter.variable} ${openSans.variable} ${firaCode.variable} antialiased`}>
+      <body className={`${inter.variable} ${arimo.variable} ${firaCode.variable} antialiased`}>
         <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false} storageKey="theme">
           {children}
         </ThemeProvider>

frontend-aggios.app/app/page.tsx

@@ -3,10 +3,45 @@
 import { useState } from "react";
 import Link from "next/link";
 import Header from "@/components/Header";
+import {
+  RocketLaunchIcon,
+  ArrowRightIcon,
+  PlayCircleIcon,
+  ShieldCheckIcon,
+  BoltIcon,
+  UsersIcon,
+  CircleStackIcon,
+  RectangleGroupIcon,
+  CreditCardIcon,
+  ChatBubbleLeftRightIcon,
+  ShareIcon,
+  ChartBarIcon,
+  UserGroupIcon,
+  ChartBarSquareIcon,
+  DevicePhoneMobileIcon,
+  CheckIcon,
+  SparklesIcon,
+  InformationCircleIcon,
+  ServerIcon,
+  PhoneIcon,
+} from "@heroicons/react/24/outline";
 
 export default function Home() {
   const [isAnnual, setIsAnnual] = useState(false);
 
+  // Componente helper para ícones de redes sociais (mantém como SVG simples)
+  const LinkedInIcon = () => (
+    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
+  );
+
+  const TwitterIcon = () => (
+    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
+  );
+
+  const InstagramIcon = () => (
+    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
+  );
+
   return (
     <>
       <Header />
@@ -17,7 +52,7 @@ export default function Home() {
           <div className="max-w-7xl mx-auto px-6 lg:px-8 grid lg:grid-cols-2 gap-14 items-center">
             <div>
               <div className="inline-flex items-center gap-2 px-4 py-2 bg-brand rounded-full text-sm font-semibold text-white shadow-lg shadow-brand-20 mb-8">
-                <i className="ri-rocket-line text-base"></i>
+                <RocketLaunchIcon className="w-4 h-4" />
                 <span>Plataforma de Gestão Financeira</span>
               </div>
 
@@ -30,23 +65,23 @@ export default function Home() {
               </p>
 
               <div className="flex flex-col sm:flex-row items-center gap-4">
-                <Link href="http://dash.localhost/cadastro" className="px-8 py-3 bg-brand text-white font-semibold rounded-xl hover:opacity-90 transition-opacity shadow-lg shadow-brand-20">
+                <Link href="http://dash.localhost/cadastro" className="inline-flex items-center px-8 py-3 bg-brand text-white font-semibold rounded-xl hover:opacity-90 transition-opacity shadow-lg shadow-brand-20">
-                  <i className="ri-arrow-right-line mr-2"></i>
+                  <ArrowRightIcon className="w-5 h-5 mr-2" />
                   Começar Grátis
                 </Link>
-                <Link href="#demo" className="px-8 py-3 rounded-xl border border-zinc-300 text-zinc-700 dark:text-white font-semibold hover:border-transparent hover:bg-brand hover:text-white transition-all">
+                <Link href="#demo" className="inline-flex items-center px-8 py-3 rounded-xl border border-zinc-300 text-zinc-700 dark:text-white font-semibold hover:border-transparent hover:bg-brand hover:text-white transition-all">
-                  <i className="ri-play-circle-line mr-2"></i>
+                  <PlayCircleIcon className="w-5 h-5 mr-2" />
                   Ver Demo
                 </Link>
               </div>
 
               <div className="mt-8 flex items-center gap-6 text-sm text-zinc-500 dark:text-zinc-400">
                 <div className="flex items-center gap-2">
-                  <i className="ri-shield-check-line text-lg gradient-text"></i>
+                  <ShieldCheckIcon className="w-5 h-5 gradient-text" />
                   Segurança bancária
                 </div>
                 <div className="flex items-center gap-2">
-                  <i className="ri-flashlight-line text-lg gradient-text"></i>
+                  <BoltIcon className="w-5 h-5 gradient-text" />
                   Automatizações inteligentes
                 </div>
               </div>
@@ -112,20 +147,20 @@ export default function Home() {
 
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
               {[
-                { id: "crm", icon: "ri-customer-service-2-line", title: "CRM Inteligente", desc: "Automatize funis, acompanhe negociações e tenha visão 360° dos clientes em tempo real." },
+                { id: "crm", Icon: UsersIcon, title: "CRM Inteligente", desc: "Automatize funis, acompanhe negociações e tenha visão 360° dos clientes em tempo real." },
-                { id: "erp", icon: "ri-database-2-line", title: "ERP Financeiro", desc: "Centralize contas a pagar/receber, fluxo de caixa e integrações bancárias sem planilhas." },
+                { id: "erp", Icon: CircleStackIcon, title: "ERP Financeiro", desc: "Centralize contas a pagar/receber, fluxo de caixa e integrações bancárias sem planilhas." },
-                { id: "gestao-projetos", icon: "ri-trello-line", title: "Gestão de Projetos", desc: "Planeje sprints, distribua tarefas e monitore entregas com dashboards interativos." },
+                { id: "gestao-projetos", Icon: RectangleGroupIcon, title: "Gestão de Projetos", desc: "Planeje sprints, distribua tarefas e monitore entregas com dashboards interativos." },
-                { id: "gestao-pagamentos", icon: "ri-secure-payment-line", title: "Gestão de Pagamentos", desc: "Controle cobranças, split de receitas e reconciliação automática com gateways líderes." },
+                { id: "gestao-pagamentos", Icon: CreditCardIcon, title: "Gestão de Pagamentos", desc: "Controle cobranças, split de receitas e reconciliação automática com gateways líderes." },
-                { id: "helpdesk", icon: "ri-customer-service-line", title: "Helpdesk 360°", desc: "Organize tickets, SLAs e base de conhecimento para oferecer suporte premium." },
+                { id: "helpdesk", Icon: ChatBubbleLeftRightIcon, title: "Helpdesk 360°", desc: "Organize tickets, SLAs e base de conhecimento para oferecer suporte premium." },
-                { id: "integra", icon: "ri-share-forward-line", title: "Integrações API", desc: "Conecte a Aggios com BI, contabilidade e ferramentas internas via API segura." },
+                { id: "integra", Icon: ShareIcon, title: "Integrações API", desc: "Conecte a Aggios com BI, contabilidade e ferramentas internas via API segura." },
               ].map((item) => (
                 <div id={item.id} key={item.id} className="relative rounded-4xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950/80 backdrop-blur-xl p-8 shadow-lg overflow-hidden">
                   <div className="absolute -top-20 -right-10 h-40 w-40 rounded-full bg-brand-soft blur-3xl" aria-hidden="true"></div>
                   <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6 relative z-10">
                     <div>
                       <div className="inline-flex items-center gap-3 mb-4 px-4 py-2 rounded-full border border-zinc-200 dark:border-zinc-800 text-xs uppercase tracking-[0.2em] text-zinc-500">
-                        <span className="flex h-8 w-8 items-center justify-center rounded-2xl bg-brand text-white text-lg">
+                        <span className="flex h-8 w-8 items-center justify-center rounded-2xl bg-brand text-white">
-                          <i className={item.icon}></i>
+                          <item.Icon className="w-5 h-5" />
                         </span>
                         {item.title}
                       </div>
@@ -163,7 +198,7 @@ export default function Home() {
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
               <div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
                 <div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center mb-6">
-                  <i className="ri-dashboard-3-line text-2xl text-white"></i>
+                  <ChartBarIcon className="w-6 h-6 text-white" />
                 </div>
                 <h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Dashboard Inteligente</h3>
                 <p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Visualize todos os seus dados financeiros em tempo real com gráficos e métricas intuitivas.</p>
@@ -171,7 +206,7 @@ export default function Home() {
 
               <div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
                 <div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center mb-6">
-                  <i className="ri-team-line text-2xl text-white"></i>
+                  <UserGroupIcon className="w-6 h-6 text-white" />
                 </div>
                 <h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Gestão de Clientes</h3>
                 <p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Organize e acompanhe todos os seus clientes com informações detalhadas e histórico completo.</p>
@@ -179,7 +214,7 @@ export default function Home() {
 
               <div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
                 <div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center mb-6">
-                  <i className="ri-file-chart-line text-2xl text-white"></i>
+                  <ChartBarSquareIcon className="w-6 h-6 text-white" />
                 </div>
                 <h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Relatórios Avançados</h3>
                 <p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Gere relatórios detalhados e personalizados para tomar decisões mais assertivas.</p>
@@ -187,7 +222,7 @@ export default function Home() {
 
               <div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
                 <div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center mb-6">
-                  <i className="ri-secure-payment-line text-2xl text-white"></i>
+                  <ShieldCheckIcon className="w-6 h-6 text-white" />
                 </div>
                 <h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Segurança Total</h3>
                 <p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Seus dados protegidos com criptografia de ponta e backup automático na nuvem.</p>
@@ -195,7 +230,7 @@ export default function Home() {
 
               <div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
                 <div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center mb-6">
-                  <i className="ri-smartphone-line text-2xl text-white"></i>
+                  <DevicePhoneMobileIcon className="w-6 h-6 text-white" />
                 </div>
                 <h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Acesso Mobile</h3>
                 <p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Gerencie seu negócio de qualquer lugar com nossa plataforma responsiva e intuitiva.</p>
@@ -203,7 +238,7 @@ export default function Home() {
 
               <div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
                 <div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center mb-6">
-                  <i className="ri-customer-service-2-line text-2xl text-white"></i>
+                  <ChatBubbleLeftRightIcon className="w-6 h-6 text-white" />
                 </div>
                 <h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Suporte 24/7</h3>
                 <p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Conte com nossa equipe especializada sempre que precisar, em qualquer horário.</p>
@@ -270,15 +305,15 @@ export default function Home() {
 
                 <ul className="space-y-3 mb-8">
                   <li className="flex items-start gap-2 text-sm">
-                    <i className="ri-check-line text-brand mt-0.5"></i>
+                    <CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                     <span className="text-zinc-600 dark:text-zinc-300">Todos os módulos inclusos</span>
                   </li>
                   <li className="flex items-start gap-2 text-sm">
-                    <i className="ri-check-line text-brand mt-0.5"></i>
+                    <CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                     <span className="text-zinc-600 dark:text-zinc-300">Portal white-label</span>
                   </li>
                   <li className="flex items-start gap-2 text-sm">
-                    <i className="ri-check-line text-brand mt-0.5"></i>
+                    <CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                     <span className="text-zinc-600 dark:text-zinc-300">1GB de armazenamento</span>
                   </li>
                 </ul>
@@ -312,19 +347,19 @@ export default function Home() {
 
                 <ul className="space-y-3 mb-8">
                   <li className="flex items-start gap-2 text-sm">
-                    <i className="ri-check-line mt-0.5"></i>
+                    <CheckIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
                     <span>Todos os módulos inclusos</span>
                   </li>
                   <li className="flex items-start gap-2 text-sm">
-                    <i className="ri-check-line mt-0.5"></i>
+                    <CheckIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
                     <span>Portal white-label</span>
                   </li>
                   <li className="flex items-start gap-2 text-sm">
-                    <i className="ri-check-line mt-0.5"></i>
+                    <CheckIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
                     <span>1GB de armazenamento</span>
                   </li>
                   <li className="flex items-start gap-2 text-sm font-semibold">
-                    <i className="ri-check-line mt-0.5"></i>
+                    <CheckIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
                     <span>Suporte prioritário</span>
                   </li>
                 </ul>
@@ -355,27 +390,27 @@ export default function Home() {
 
                 <ul className="space-y-3 mb-8">
                   <li className="flex items-start gap-2 text-sm">
-                    <i className="ri-check-line text-brand mt-0.5"></i>
+                    <CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                     <span className="text-zinc-600 dark:text-zinc-300">Todos os módulos inclusos</span>
                   </li>
                   <li className="flex items-start gap-2 text-sm">
-                    <i className="ri-check-line text-brand mt-0.5"></i>
+                    <CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                     <span className="text-zinc-600 dark:text-zinc-300">Portal white-label</span>
                   </li>
                   <li className="flex items-start gap-2 text-sm">
-                    <i className="ri-check-line text-brand mt-0.5"></i>
+                    <CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                     <span className="text-zinc-600 dark:text-zinc-300">1GB de armazenamento</span>
                   </li>
                   <li className="flex items-start gap-2 text-sm font-semibold">
-                    <i className="ri-check-line text-brand mt-0.5"></i>
+                    <CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                     <span className="text-zinc-900 dark:text-white">Suporte prioritário</span>
                   </li>
                   <li className="flex items-start gap-2 text-sm font-semibold">
-                    <i className="ri-check-line text-brand mt-0.5"></i>
+                    <CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                     <span className="text-zinc-900 dark:text-white">Gerente de conta dedicado</span>
                   </li>
                   <li className="flex items-start gap-2 text-sm font-semibold">
-                    <i className="ri-check-line text-brand mt-0.5"></i>
+                    <CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                     <span className="text-zinc-900 dark:text-white">API para integrações</span>
                   </li>
                 </ul>
@@ -390,7 +425,7 @@ export default function Home() {
                 <div className="mb-6">
                   <div className="flex items-center gap-2 mb-2">
                     <h3 className="font-heading font-bold text-2xl">Enterprise</h3>
-                    <i className="ri-vip-crown-line text-xl text-yellow-400"></i>
+                    <SparklesIcon className="w-5 h-5 text-yellow-400" />
                   </div>
                   <p className="text-sm text-zinc-400 mb-4">301+ usuários (colaboradores + clientes)</p>
                   <div className="flex items-baseline gap-1">
@@ -400,15 +435,15 @@ export default function Home() {
 
                 <ul className="space-y-3 mb-8">
                   <li className="flex items-start gap-2 text-sm">
-                    <i className="ri-check-line text-brand mt-0.5"></i>
+                    <CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                     <span className="text-zinc-300">Tudo do plano Cosmos +</span>
                   </li>
                   <li className="flex items-start gap-2 text-sm">
-                    <i className="ri-check-line text-brand mt-0.5"></i>
+                    <CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                     <span className="text-zinc-300">Armazenamento customizado</span>
                   </li>
                   <li className="flex items-start gap-2 text-sm font-semibold">
-                    <i className="ri-check-line text-brand mt-0.5"></i>
+                    <CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                     <span className="text-white">Treinamento personalizado</span>
                   </li>
                 </ul>
@@ -421,8 +456,8 @@ export default function Home() {
 
             {/* Nota sobre desconto */}
             <div className="text-center mt-8">
-              <p className="text-sm text-zinc-500 dark:text-zinc-400">
+              <p className="text-sm text-zinc-500 dark:text-zinc-400 flex items-center justify-center gap-2">
-                <i className="ri-information-line mr-1"></i>
+                <InformationCircleIcon className="w-4 h-4" />
                 Todos os planos com <span className="font-semibold text-emerald-600 dark:text-emerald-400">20% OFF</span> no pagamento anual
                 {isAnnual && <span className="ml-1">(equivalente a 2,4 meses grátis)</span>}
               </p>
@@ -443,7 +478,7 @@ export default function Home() {
                 <div className="bg-zinc-50 dark:bg-zinc-800/50 p-6 rounded-xl border border-zinc-200 dark:border-zinc-700 transition-all">
                   <div className="flex items-center gap-3 mb-3">
                     <div className="w-10 h-10 bg-brand rounded-lg flex items-center justify-center">
-                      <i className="ri-group-line text-white text-lg"></i>
+                      <UserGroupIcon className="w-5 h-5 text-white" />
                     </div>
                     <h4 className="font-semibold text-lg text-zinc-900 dark:text-white transition-colors">Usuários Extras</h4>
                   </div>
@@ -454,7 +489,7 @@ export default function Home() {
                 <div className="bg-zinc-50 dark:bg-zinc-800/50 p-6 rounded-xl border border-zinc-200 dark:border-zinc-700 transition-all">
                   <div className="flex items-center gap-3 mb-3">
                     <div className="w-10 h-10 bg-brand rounded-lg flex items-center justify-center">
-                      <i className="ri-hard-drive-line text-white text-lg"></i>
+                      <ServerIcon className="w-5 h-5 text-white" />
                     </div>
                     <h4 className="font-semibold text-lg text-zinc-900 dark:text-white transition-colors">Storage Extra</h4>
                   </div>
@@ -478,12 +513,12 @@ export default function Home() {
               </p>
 
               <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-                <Link href="http://dash.localhost/cadastro" className="px-6 py-3 bg-brand text-white font-semibold rounded-lg hover:opacity-90 transition-opacity shadow-lg">
+                <Link href="http://dash.localhost/cadastro" className="inline-flex items-center px-6 py-3 bg-brand text-white font-semibold rounded-lg hover:opacity-90 transition-opacity shadow-lg">
-                  <i className="ri-rocket-line mr-2"></i>
+                  <RocketLaunchIcon className="w-5 h-5 mr-2" />
                   Começar Grátis Agora
                 </Link>
-                <Link href="#contact" className="px-6 py-3 border-2 border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-semibold rounded-lg hover:border-transparent hover:bg-brand hover:text-white transition-all">
+                <Link href="#contact" className="inline-flex items-center px-6 py-3 border-2 border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-semibold rounded-lg hover:border-transparent hover:bg-brand hover:text-white transition-all">
-                  <i className="ri-phone-line mr-2"></i>
+                  <PhoneIcon className="w-5 h-5 mr-2" />
                   Falar com Especialista
                 </Link>
               </div>
@@ -509,13 +544,13 @@ export default function Home() {
               </p>
               <div className="flex items-center gap-4">
                 <a href="#" className="w-10 h-10 bg-zinc-800 dark:bg-zinc-700 rounded-lg flex items-center justify-center hover:bg-brand transition-all group">
-                  <i className="ri-linkedin-line text-lg group-hover:text-white"></i>
+                  <LinkedInIcon />
                 </a>
                 <a href="#" className="w-10 h-10 bg-zinc-800 dark:bg-zinc-700 rounded-lg flex items-center justify-center hover:bg-brand transition-all group">
-                  <i className="ri-twitter-line text-lg group-hover:text-white"></i>
+                  <TwitterIcon />
                 </a>
                 <a href="#" className="w-10 h-10 bg-zinc-800 dark:bg-zinc-700 rounded-lg flex items-center justify-center hover:bg-brand transition-all group">
-                  <i className="ri-instagram-line text-lg group-hover:text-white"></i>
+                  <InstagramIcon />
                 </a>
               </div>
             </div>

frontend-aggios.app/app/tokens.css

@@ -1,5 +1,13 @@
+/* Importar fontes do Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Arimo:wght@400;500;600;700&family=Fira+Code:wght@400;600&display=swap');
+
 @layer theme {
     :root {
+        /* Fontes */
+        --font-inter: 'Inter', ui-sans-serif, system-ui, sans-serif;
+        --font-arimo: 'Arimo', ui-sans-serif, system-ui, sans-serif;
+        --font-fira-code: 'Fira Code', ui-monospace, 'SFMono-Regular', monospace;
+
         /* Paleta de cores principais */
         --color-brand-50: #f0f9ff;
         --color-brand-100: #e0f2fe;

frontend-aggios.app/package-lock.json

@@ -8,6 +8,8 @@
       "name": "fronend-aggios.app",
       "version": "0.1.0",
       "dependencies": {
+        "@headlessui/react": "^2.2.9",
+        "@heroicons/react": "^2.2.0",
         "next": "16.0.7",
         "next-themes": "^0.4.6",
         "react": "19.2.0",
@@ -450,6 +452,88 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
+      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.3",
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.26.28",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz",
+      "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.2",
+        "@floating-ui/utils": "^0.2.8",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz",
+      "integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.4"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "license": "MIT"
+    },
+    "node_modules/@headlessui/react": {
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.2.9.tgz",
+      "integrity": "sha512-Mb+Un58gwBn0/yWZfyrCh0TJyurtT+dETj7YHleylHk5od3dv2XqETPGWMyQ5/7sYN7oWdyM1u9MvC0OC8UmzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.16",
+        "@react-aria/focus": "^3.20.2",
+        "@react-aria/interactions": "^3.25.0",
+        "@tanstack/react-virtual": "^3.13.9",
+        "use-sync-external-store": "^1.5.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@heroicons/react": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz",
+      "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 16 || ^19.0.0-rc"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1223,6 +1307,103 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@react-aria/focus": {
+      "version": "3.21.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.21.2.tgz",
+      "integrity": "sha512-JWaCR7wJVggj+ldmM/cb/DXFg47CXR55lznJhZBh4XVqJjMKwaOOqpT5vNN7kpC1wUpXicGNuDnJDN1S/+6dhQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/interactions": "^3.25.6",
+        "@react-aria/utils": "^3.31.0",
+        "@react-types/shared": "^3.32.1",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-aria/interactions": {
+      "version": "3.25.6",
+      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.25.6.tgz",
+      "integrity": "sha512-5UgwZmohpixwNMVkMvn9K1ceJe6TzlRlAfuYoQDUuOkk62/JVJNDLAPKIf5YMRc7d2B0rmfgaZLMtbREb0Zvkw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.10",
+        "@react-aria/utils": "^3.31.0",
+        "@react-stately/flags": "^3.1.2",
+        "@react-types/shared": "^3.32.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.10",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.10.tgz",
+      "integrity": "sha512-hvTm77Pf+pMBhuBm760Li0BVIO38jv1IBws1xFm1NoL26PU+fe+FMW5+VZWyANR6nYL65joaJKZqOdTQMkO9IQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-aria/utils": {
+      "version": "3.31.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.31.0.tgz",
+      "integrity": "sha512-ABOzCsZrWzf78ysswmguJbx3McQUja7yeGj6/vZo4JVsZNlxAN+E9rs381ExBRI0KzVo6iBTeX5De8eMZPJXig==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.10",
+        "@react-stately/flags": "^3.1.2",
+        "@react-stately/utils": "^3.10.8",
+        "@react-types/shared": "^3.32.1",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-stately/flags": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/flags/-/flags-3.1.2.tgz",
+      "integrity": "sha512-2HjFcZx1MyQXoPqcBGALwWWmgFVUk2TuKVIQxCbRq7fPyWXIl6VHcakCLurdtYC2Iks7zizvz0Idv48MQ38DWg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@react-stately/utils": {
+      "version": "3.10.8",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.8.tgz",
+      "integrity": "sha512-SN3/h7SzRsusVQjQ4v10LaVsDc81jyyR0DD5HnsQitm/I5WDpaSr2nRHtyloPFU48jlql1XX/S04T2DLQM7Y3g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-types/shared": {
+      "version": "3.32.1",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.32.1.tgz",
+      "integrity": "sha512-famxyD5emrGGpFuUlgOP6fVW2h/ZaF405G5KDi3zPHzyjAWys/8W6NAVJtNbkCkhedmvL0xOhvt8feGXyXaw5w==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -1455,6 +1636,33 @@
         "tailwindcss": "4.0.0-alpha.25"
       }
     },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.13.13",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.13.tgz",
+      "integrity": "sha512-4o6oPMDvQv+9gMi8rE6gWmsOjtUZUYIJHv7EB+GblyYdi8U6OqLl8rhHWIUZSL1dUU2dPwTdTgybCKf9EjIrQg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.13.13"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.13.13",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.13.tgz",
+      "integrity": "sha512-uQFoSdKKf5S8k51W5t7b2qpfkyIbdHMzAn+AMQvHPxKUPeo1SsGaA4JRISQT87jm28b7z8OEqPcg1IOZagQHcA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -2524,6 +2732,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -5982,6 +6199,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tabbable": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.3.0.tgz",
+      "integrity": "sha512-EIHvdY5bPLuWForiR/AN2Bxngzpuwn1is4asboytXtpTgsArc+WmSJKVLlhdh71u7jFcryDqB2A8lQvj78MkyQ==",
+      "license": "MIT"
+    },
     "node_modules/tailwindcss": {
       "version": "4.0.0-alpha.25",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.0-alpha.25.tgz",
@@ -6342,6 +6565,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

frontend-aggios.app/package.json

@@ -9,11 +9,12 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@headlessui/react": "^2.2.9",
+    "@heroicons/react": "^2.2.0",
     "next": "16.0.7",
     "next-themes": "^0.4.6",
     "react": "19.2.0",
-    "react-dom": "19.2.0",
+    "react-dom": "19.2.0"
-    "remixicon": "^4.7.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.0.0-alpha.25",

frontend-aggios.app/tailwind.preset.js

@@ -6,7 +6,7 @@ module.exports = {
             fontFamily: {
                 sans: ['var(--font-inter)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
                 mono: ['var(--font-fira-code)', 'ui-monospace', 'SFMono-Regular', 'monospace'],
-                heading: ['var(--font-open-sans)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+                heading: ['var(--font-arimo)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
             },
             colors: {
                 brand: {
@@ -30,6 +30,9 @@ module.exports = {
             boxShadow: {
                 glow: '0 0 20px rgba(14, 165, 233, 0.3)',
             },
+            borderRadius: {
+                '4xl': '2rem',
+            },
         },
     },
 };

postgres/migrations/009_create_plans_table.sql

@@ -0,0 +1,25 @@
+-- Create plans table
+CREATE TABLE IF NOT EXISTS plans (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    name VARCHAR(255) NOT NULL,
+    slug VARCHAR(100) NOT NULL UNIQUE,
+    description TEXT,
+    min_users INTEGER NOT NULL DEFAULT 1,
+    max_users INTEGER NOT NULL DEFAULT 30, -- -1 means unlimited
+    monthly_price NUMERIC(10, 2),
+    annual_price NUMERIC(10, 2),
+    features TEXT[] NOT NULL DEFAULT '{}',
+    differentiators TEXT[] NOT NULL DEFAULT '{}',
+    storage_gb INTEGER NOT NULL DEFAULT 1,
+    is_active BOOLEAN NOT NULL DEFAULT true,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Add indexes
+CREATE INDEX idx_plans_slug ON plans(slug);
+CREATE INDEX idx_plans_is_active ON plans(is_active);
+
+-- Add comments
+COMMENT ON TABLE plans IS 'Subscription plans for agencies';
+COMMENT ON COLUMN plans.max_users IS '-1 means unlimited users';

postgres/migrations/010_create_agency_subscriptions_table.sql

@@ -0,0 +1,24 @@
+-- Create agency_subscriptions table
+CREATE TABLE IF NOT EXISTS agency_subscriptions (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    agency_id UUID NOT NULL REFERENCES tenants(id) ON DELETE CASCADE,
+    plan_id UUID NOT NULL REFERENCES plans(id) ON DELETE RESTRICT,
+    billing_type VARCHAR(20) NOT NULL DEFAULT 'monthly', -- monthly or annual
+    current_users INTEGER NOT NULL DEFAULT 0,
+    status VARCHAR(50) NOT NULL DEFAULT 'active', -- active, suspended, cancelled
+    start_date TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    renewal_date TIMESTAMP NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    UNIQUE(agency_id) -- One active subscription per agency
+);
+
+-- Add indexes
+CREATE INDEX idx_agency_subscriptions_agency_id ON agency_subscriptions(agency_id);
+CREATE INDEX idx_agency_subscriptions_plan_id ON agency_subscriptions(plan_id);
+CREATE INDEX idx_agency_subscriptions_status ON agency_subscriptions(status);
+
+-- Add comments
+COMMENT ON TABLE agency_subscriptions IS 'Tracks agency subscription to plans';
+COMMENT ON COLUMN agency_subscriptions.billing_type IS 'Monthly or annual billing';
+COMMENT ON COLUMN agency_subscriptions.current_users IS 'Current count of users (collaborators + clients)';

postgres/migrations/011_seed_default_plans.sql

@@ -0,0 +1,68 @@
+-- Seed the default plans
+INSERT INTO plans (id, name, slug, description, min_users, max_users, monthly_price, annual_price, features, differentiators, storage_gb, is_active, created_at, updated_at)
+VALUES 
+    (
+        gen_random_uuid(),
+        'Ignição',
+        'ignition',
+        'Ideal para pequenas agências iniciantes',
+        1,
+        30,
+        199.99,
+        1919.90,
+        ARRAY['CRM', 'ERP', 'Projetos', 'Helpdesk', 'Pagamentos', 'Contratos', 'Documentos'],
+        ARRAY[]::text[],
+        1,
+        true,
+        CURRENT_TIMESTAMP,
+        CURRENT_TIMESTAMP
+    ),
+    (
+        gen_random_uuid(),
+        'Órbita',
+        'orbit',
+        'Para agências em crescimento',
+        31,
+        100,
+        399.99,
+        3839.90,
+        ARRAY['CRM', 'ERP', 'Projetos', 'Helpdesk', 'Pagamentos', 'Contratos', 'Documentos'],
+        ARRAY['Suporte prioritário'],
+        1,
+        true,
+        CURRENT_TIMESTAMP,
+        CURRENT_TIMESTAMP
+    ),
+    (
+        gen_random_uuid(),
+        'Cosmos',
+        'cosmos',
+        'Para agências consolidadas',
+        101,
+        300,
+        799.99,
+        7679.90,
+        ARRAY['CRM', 'ERP', 'Projetos', 'Helpdesk', 'Pagamentos', 'Contratos', 'Documentos'],
+        ARRAY['Gerente de conta dedicado', 'API integrações'],
+        1,
+        true,
+        CURRENT_TIMESTAMP,
+        CURRENT_TIMESTAMP
+    ),
+    (
+        gen_random_uuid(),
+        'Enterprise',
+        'enterprise',
+        'Solução customizada para grandes agências',
+        301,
+        -1,
+        NULL,
+        NULL,
+        ARRAY['CRM', 'ERP', 'Projetos', 'Helpdesk', 'Pagamentos', 'Contratos', 'Documentos'],
+        ARRAY['Armazenamento customizado', 'Treinamento personalizado'],
+        1,
+        true,
+        CURRENT_TIMESTAMP,
+        CURRENT_TIMESTAMP
+    )
+ON CONFLICT DO NOTHING;