` e meta description únicos, Open Graph, canonical, breadcrumb visível e em schema.org (LocalBusiness, Article, FAQPage, AccountingService conforme a página), hierarquia H1/H2/H3 correta. `sitemap.xml` e `robots.txt` prontos na raiz do site. Pendências para produção: imagens reais com atributo `alt` descritivo (hoje as imagens são placeholders de layout), registro em Google Search Console, e as integrações de tracking abaixo. ## Performance e acessibilidade O protótipo usa CSS e JS próprios (sem frameworks pesados), fontes carregadas de forma otimizada e imagens ainda não finais — por isso os números de Lighthouse só devem ser medidos na versão final, com imagens reais comprimidas. Estrutura semântica HTML5, contraste de cores testado sobre a paleta oficial, `aria-label` nos botões de ícone (WhatsApp, redes sociais, menu mobile) e navegação por teclado no menu e no FAQ já implementadas. Para atingir WCAG AA completo, falta apenas revisar contraste depois que fotos reais substituírem os placeholders de fundo. ## Integrações — onde plugar quando for para produção | Integração | Onde entra | |---|---| | Google Analytics 4 | Tag no `<head>` de `common.py` (gera em todas as páginas de uma vez) | | Google Tag Manager | Mesmo ponto, antes do `</head>` e logo após `<body>` | | Meta Pixel / LinkedIn Insight Tag | Mesmo ponto do GTM | | RD Station / HubSpot | Substituir o `data-demo-form` dos formulários pelo endpoint real de captura de leads | | reCAPTCHA | Adicionar ao `form-card` de Contato, Trabalhe Conosco e páginas de serviço | ## Caminho de migração para Next.js/React/TypeScript (produção) Este protótipo foi construído para ser facilmente traduzido em componentes React: o header, footer, cards, FAQ e formulários já estão isolados como blocos reutilizáveis em `common.py`. Sugestão de estrutura ao migrar: ``` app/ layout.tsx <- Header + Footer + fontes + GA4/GTM page.tsx <- Home sobre/page.tsx servicos/page.tsx servicos/[slug]/page.tsx <- template dinâmico para as 8 páginas de serviço reforma-tributaria/page.tsx blog/page.tsx blog/[slug]/page.tsx <- template dinâmico alimentado por CMS/MDX avanty-seguros/page.tsx trabalhe-conosco/page.tsx contato/page.tsx components/ Header.tsx, Footer.tsx, ServiceCard.tsx, Faq.tsx, TestimonialCard.tsx, LeadForm.tsx ``` Tailwind CSS entra recriando as classes utilitárias já usadas (cores, grid, spacing); Framer Motion substitui as classes `.reveal`/`.in` por `whileInView`. O design visual não muda — é a mesma paleta, tipografia e composição já validadas aqui. ## Próxima fase (roadmap) 1. Subpáginas de serviço restantes: Troca de Contabilidade, Departamento Pessoal, Departamento Fiscal, Consultoria Empresarial (mesmo template de `service_body`, só trocar o conteúdo). 2. Páginas de categoria do blog + 10 artigos reais (a Reforma Tributária deve ser o pilar de conteúdo prioritário). 3. Substituir todo o conteúdo placeholder por material institucional real (fotos, depoimentos, números, vagas). 4. Conversão para Next.js/React/TypeScript de produção e deploy (Vercel recomendado, dado o uso de Next.js). 5. Integrações reais de GA4, GTM, Meta Pixel, LinkedIn Insight Tag, RD Station/HubSpot e reCAPTCHA. 6. Estruturas futuras: Área do Cliente, Portal de Documentos e Chat Online — a arquitetura de menu e footer já reserva esses espaços.

# Avanty Contabilidade — Protótipo do Site Institucional ## Como abrir Abra o arquivo `index.html` desta pasta diretamente no navegador (duplo clique) — não precisa instalar nada. Todas as páginas do menu estão navegáveis entre si. Para ver em mobile, redimensione a janela do navegador ou abra o mesmo arquivo pelo celular. ## O que foi entregue nesta fase 12 páginas completas, com header fixo, footer, formulários funcionais (modo demonstração), FAQ com acordeão, filtro de blog por categoria/busca, animações de entrada ao rolar a página, botão flutuante de WhatsApp e responsividade total (desktop, tablet e celular): - `index.html` — Home - `sobre.html` — Sobre a Avanty - `servicos.html` — Hub de Serviços - `servicos/contabilidade-consultiva.html` - `servicos/bpo-financeiro.html` - `servicos/planejamento-tributario.html` - `servicos/abertura-de-empresa.html` - `reforma-tributaria.html` — Hub da Reforma Tributária - `blog.html` — Hub do Blog (categorias + busca) - `blog/reforma-tributaria-o-que-muda.html` — artigo modelo - `avanty-seguros.html` - `trabalhe-conosco.html` - `contato.html` Documentos de apoio: `SITEMAP-E-ARQUITETURA.md` (arquitetura, fluxo de navegação, plano de palavras-chave), `sitemap.xml` e `robots.txt` (SEO técnico). A pasta `buildsrc/` contém os scripts Python que geram as páginas a partir de um sistema de componentes (header, footer, cards de serviço, etc.) — é o que garante consistência visual entre todas as páginas. Não precisa ser aberta nem executada; é só o "código-fonte" do protótipo. ## Identidade visual aplicada Paleta oficial do manual de marca: verde `#58BF5A` / `#A0D056` como cor predominante (conforme solicitado), branco como base, azul `#0375B4`, cinza `#595B60` e bege `#DCC7AA` como cores de apoio. Tipografia Montserrat (Google Fonts), conforme o manual. ## O que é conteúdo real vs. placeholder Real: identidade visual, paleta de cores, logotipo, tipografia, dados de CNPJ/endereço/telefone da empresa, e a lista completa de serviços da Avanty. O site atual (avantycontabilidade.com.br) está com instalação padrão do WordPress, sem conteúdo publicado — não havia texto institucional para reaproveitar. Placeholder claramente identificado (em colchetes ou com nota "a substituir"): história detalhada da empresa, ano/número de clientes exibidos como estatística, depoimentos de clientes, fotos da equipe e da estrutura, logos de empresas atendidas, vagas abertas reais e benefícios de RH. Basta substituir esse conteúdo pelo material real da Avanty quando disponível — a estrutura e o design já estão prontos para recebê-lo. ## SEO técnico implementado no protótipo Cada página tem: URL amigável, `` e meta description únicos, Open Graph, canonical, breadcrumb visível e em schema.org (LocalBusiness, Article, FAQPage, AccountingService conforme a página), hierarquia H1/H2/H3 correta. `sitemap.xml` e `robots.txt` prontos na raiz do site. Pendências para produção: imagens reais com atributo `alt` descritivo (hoje as imagens são placeholders de layout), registro em Google Search Console, e as integrações de tracking abaixo. ## Performance e acessibilidade O protótipo usa CSS e JS próprios (sem frameworks pesados), fontes carregadas de forma otimizada e imagens ainda não finais — por isso os números de Lighthouse só devem ser medidos na versão final, com imagens reais comprimidas. Estrutura semântica HTML5, contraste de cores testado sobre a paleta oficial, `aria-label` nos botões de ícone (WhatsApp, redes sociais, menu mobile) e navegação por teclado no menu e no FAQ já implementadas. Para atingir WCAG AA completo, falta apenas revisar contraste depois que fotos reais substituírem os placeholders de fundo. ## Integrações — onde plugar quando for para produção | Integração | Onde entra | |---|---| | Google Analytics 4 | Tag no `<head>` de `common.py` (gera em todas as páginas de uma vez) | | Google Tag Manager | Mesmo ponto, antes do `</head>` e logo após `<body>` | | Meta Pixel / LinkedIn Insight Tag | Mesmo ponto do GTM | | RD Station / HubSpot | Substituir o `data-demo-form` dos formulários pelo endpoint real de captura de leads | | reCAPTCHA | Adicionar ao `form-card` de Contato, Trabalhe Conosco e páginas de serviço | ## Caminho de migração para Next.js/React/TypeScript (produção) Este protótipo foi construído para ser facilmente traduzido em componentes React: o header, footer, cards, FAQ e formulários já estão isolados como blocos reutilizáveis em `common.py`. Sugestão de estrutura ao migrar: ``` app/ layout.tsx <- Header + Footer + fontes + GA4/GTM page.tsx <- Home sobre/page.tsx servicos/page.tsx servicos/[slug]/page.tsx <- template dinâmico para as 8 páginas de serviço reforma-tributaria/page.tsx blog/page.tsx blog/[slug]/page.tsx <- template dinâmico alimentado por CMS/MDX avanty-seguros/page.tsx trabalhe-conosco/page.tsx contato/page.tsx components/ Header.tsx, Footer.tsx, ServiceCard.tsx, Faq.tsx, TestimonialCard.tsx, LeadForm.tsx ``` Tailwind CSS entra recriando as classes utilitárias já usadas (cores, grid, spacing); Framer Motion substitui as classes `.reveal`/`.in` por `whileInView`. O design visual não muda — é a mesma paleta, tipografia e composição já validadas aqui. ## Próxima fase (roadmap) 1. Subpáginas de serviço restantes: Troca de Contabilidade, Departamento Pessoal, Departamento Fiscal, Consultoria Empresarial (mesmo template de `service_body`, só trocar o conteúdo). 2. Páginas de categoria do blog + 10 artigos reais (a Reforma Tributária deve ser o pilar de conteúdo prioritário). 3. Substituir todo o conteúdo placeholder por material institucional real (fotos, depoimentos, números, vagas). 4. Conversão para Next.js/React/TypeScript de produção e deploy (Vercel recomendado, dado o uso de Next.js). 5. Integrações reais de GA4, GTM, Meta Pixel, LinkedIn Insight Tag, RD Station/HubSpot e reCAPTCHA. 6. Estruturas futuras: Área do Cliente, Portal de Documentos e Chat Online — a arquitetura de menu e footer já reserva esses espaços.