amare/frontend-audit.md

Audite e melhore integralmente este projeto do site da **Amare**, incluindo todas as rotas públicas, componentes compartilhados, formulários, navegação, conteúdo, metadados e comportamento responsivo.

Você está autorizado a executar o projeto, inspecionar o repositório e modificar diretamente o código. Não entregue somente recomendações: implemente as correções necessárias e valide o resultado.

## Objetivo

Deixar o site tecnicamente sólido, visualmente refinado e pronto para apresentação à cliente e posterior lançamento, corrigindo problemas de:

* UI e UX;
* responsividade;
* posicionamento e conteúdo;
* acessibilidade;
* conversão;
* SEO;
* performance;
* robustez;
* qualidade e manutenção do código.

## Contexto do produto

A Amare é uma empresa de assessoria, produção e organização de eventos em São Paulo.

Ela atende:

* casamentos;
* eventos sociais e celebrações particulares;
* eventos corporativos.

O site não deve transmitir que a empresa trabalha exclusivamente com casamentos.

A experiência precisa equilibrar:

* emoção, proximidade, sensibilidade e sofisticação para eventos sociais;
* organização, segurança, método, clareza e credibilidade para eventos corporativos.

O resultado deve ser editorial, contemporâneo, humano, elegante e profissional, sem parecer excessivamente romântico nem corporativo demais.

Preview de referência:

`https://amare.preview.hellomanoel.com/`

Considere os documentos existentes no repositório, especialmente `AGENTS.md`, `README.md`, `SPEC.md`, `DESIGN.md` e equivalentes, como contexto autoritativo do projeto.

## Direção visual

Preserve a identidade visual existente quando ela funcionar corretamente:

* fundos off-white ou bege claro;
* verde oliva;
* composição editorial;
* fotografias em destaque;
* espaços em branco generosos;
* EB Garamond em títulos e destaques;
* elementos minimalistas;
* animações discretas;
* aparência refinada e atemporal.

Não preserve decisões que prejudiquem usabilidade, contraste, legibilidade, acessibilidade, responsividade ou performance.

Avalie especialmente:

* uso excessivo de Garamond em textos pequenos, menus, botões e formulários;
* verdes claros com contraste insuficiente;
* CTAs discretos demais;
* espaços vazios excessivos no celular;
* imagens que reforcem somente o posicionamento de casamento;
* falta de equilíbrio entre conteúdo social e corporativo;
* inconsistência tipográfica ou de espaçamento;
* aparência de template genérico de casamento.

## Escopo da auditoria

Analise todas as rotas encontradas no código e corrija problemas relacionados a:

### Produto e conteúdo

* clareza da proposta de valor;
* equilíbrio entre eventos sociais e corporativos;
* hierarquia das informações;
* conteúdo genérico, redundante ou sem função;
* coerência entre títulos, textos, imagens e CTAs;
* clareza dos serviços;
* confiança e credibilidade;
* caminho até contato ou solicitação de proposta.

Não invente história, números, clientes, prêmios, depoimentos, equipe, serviços, telefone, e-mail ou qualquer informação não confirmada.

### UI e experiência

* navegação;
* header e footer;
* menu mobile;
* hierarquia visual;
* tipografia;
* espaçamento;
* grids;
* CTAs;
* formulários;
* estados interativos;
* consistência entre páginas;
* experiência mobile-first;
* ausência de overflow, cortes, sobreposições ou distorções;
* adaptação real do layout ao celular, e não apenas redução da versão desktop.

### Acessibilidade

Use WCAG 2.2 AA como referência prática.

Corrija problemas de:

* HTML semântico;
* hierarquia de headings;
* navegação por teclado;
* foco visível;
* contraste;
* nomes acessíveis;
* labels;
* mensagens de erro;
* áreas de toque;
* textos alternativos;
* menu mobile;
* overlays;
* preferência por redução de movimento;
* uso correto de links e botões.

Prefira HTML semântico a ARIA desnecessária.

### Formulários e conversão

Garanta, quando aplicável:

* campos e obrigatoriedade claros;
* validação adequada;
* mensagens de erro específicas;
* estado de envio;
* prevenção de envio duplicado;
* estados de sucesso e falha;
* tratamento de erro de rede;
* preservação dos dados após erros recuperáveis;
* proteção antispam simples;
* privacidade e LGPD;
* links e mensagens de WhatsApp corretos;
* ausência de segredos expostos no cliente.

Quando algum dado real não estiver disponível, use configuração ou variável de ambiente e documente a pendência.

### SEO

Corrija, quando aplicável:

* títulos exclusivos por rota;
* meta descriptions;
* canonical;
* Open Graph;
* Twitter cards;
* sitemap;
* robots;
* favicon;
* idioma;
* headings;
* URLs;
* links internos;
* página 404;
* metadados sociais;
* indexação distinta entre preview e produção.

Não crie dados estruturados com informações não confirmadas.

### Performance

Corrija problemas relevantes relacionados a:

* imagens;
* tamanhos responsivos;
* formatos modernos;
* lazy loading;
* LCP;
* CLS;
* INP;
* fontes;
* scripts desnecessários;
* hidratação excessiva;
* JavaScript evitável;
* componentes client-side sem necessidade;
* animações custosas;
* dependências pesadas;
* carregamento de conteúdo abaixo da dobra.

Preserve a qualidade visual das fotografias.

### Qualidade técnica

Corrija:

* erros de TypeScript;
* erros de lint;
* erros de build;
* warnings de hidratação;
* erros de console;
* requisições quebradas;
* links inválidos;
* rotas órfãs;
* componentes duplicados quando a consolidação simplificar o projeto;
* tratamento de erros ausente;
* tipagem insegura;
* complexidade desnecessária diretamente relacionada ao escopo.

## Prioridades

Considere:

* **P0:** bloqueia funcionamento, segurança, uso ou lançamento;
* **P1:** prejudica significativamente experiência, conversão, acessibilidade, SEO, performance ou credibilidade;
* **P2:** refinamento não essencial para o lançamento.

Implemente todos os itens P0 e P1 que possam ser resolvidos com as informações existentes.

Itens dependentes de dados reais da cliente devem permanecer como pendências explícitas, sem conteúdo fictício.

## Restrições

* Preserve a stack e a arquitetura existentes quando forem adequadas.
* Prefira mudanças simples, localizadas e fáceis de manter.
* Não reescreva o projeto sem necessidade concreta.
* Não adicione bibliotecas quando a solução atual for suficiente.
* Não implemente pagamentos, CRM, área do cliente, chat, contratos avançados ou funcionalidades fora do MVP.
* Não altere arquivos não relacionados sem justificativa.
* Preserve alterações locais preexistentes.
* Não silencie problemas com `any`, `eslint-disable`, casts inseguros ou desativação de validações.
* Não reduza acessibilidade para preservar estética.
* Não deixe mocks ou soluções temporárias como implementação final.

## Critérios de conclusão

A tarefa estará concluída quando:

* todas as rotas públicas existentes tiverem sido auditadas;
* todos os problemas P0 e P1 solucionáveis tiverem sido corrigidos;
* o site funcionar corretamente em mobile e desktop;
* não houver overflow horizontal, sobreposição ou componentes quebrados;
* menu, navegação, links, CTAs e formulários funcionarem;
* o posicionamento social e corporativo estiver claro;
* a acessibilidade essencial estiver atendida;
* os metadados e fundamentos de SEO estiverem corretos;
* os principais problemas de performance tiverem sido tratados;
* erros causados ou revelados pelas alterações tiverem sido resolvidos;
* lint, TypeScript, testes e build disponíveis tiverem sido executados com sucesso.

Não declare uma validação como aprovada sem executá-la.

## Entrega final

Ao concluir, apresente:

1. rotas auditadas;
2. problemas principais encontrados;
3. alterações implementadas;
4. arquivos modificados;
5. comandos executados e seus resultados;
6. decisões e trade-offs relevantes;
7. informações que dependem da cliente;
8. itens P2 mantidos fora do escopo.