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.