Pular para o conteúdo principal

Portfólio: Site One-Page de Alta Performance para o Grupo Tema

 

O Projeto

Desenvolvi o novo site institucional do Grupo Tema Organização Contábil, um escritório com mais de 30 anos de tradição em Goiás. O objetivo principal foi criar uma página única (one-page) moderna, focada em converter visitantes em clientes via WhatsApp e formulário.

O site cobre desde a apresentação dos serviços (como planejamento tributário e abertura de empresas) até seções de depoimentos, FAQ e uma Área do Cliente integrada.

🛠️ A Stack (Simples e Ultra Rápida)

Para garantir velocidade máxima e custo zero de hospedagem, optei por um site 100% estático, sem dependências pesadas de runtime:

  • HTML5 Semântico & CSS moderno (com foco em responsividade).

  • JavaScript Vanilla para elementos interativos (menu, FAQ e validações).

  • SEO Local & LGPD: Configuração de dados estruturados (Schema.org) para o Google e página dedicada de Política de Privacidade.

  • Workflow: Desenvolvido com auxílio do Claude Code para otimização do código, refatoração e agilidade no JavaScript vanilla.

🛡️ Segurança e Acessibilidade

Não é porque é estático que precisa ser simples. O projeto conta com:

  • Headers de segurança robustos (CSP, X-Frame-Options) configurados para Vercel e Apache.

  • Acessibilidade total: Navegação otimizada para leitores de tela, foco visível e alvos de toque confortáveis no celular.


Comentários

Postagens mais visitadas deste blog

Portfólio: Como estruturei minha Base de Conhecimento de Suporte usando o Google Keep

Trabalhar na linha de frente do suporte técnico em uma empresa de automação e contabilidade (como o Grupo Tema) exige agilidade. No dia a dia, nos deparamos com erros de sistema, rejeições de notas fiscais, problemas de impressoras e bugs de integração que se repetem constantemente.  Para não depender da memória e nem perder tempo procurando soluções em arquivos espalhados, transformei o Google Keep na minha base de conhecimento oficial e ultra rápida. Neste post, quero mostrar como organizo essa estrutura usando marcadores e prints direto na ferramenta para resolver problemas em segundos, mantendo o mesmo padrão de eficiência que usei no desenvolvimento dos meus projetos de software.  📁 A Estrutura de Marcadores (Organização Visual) O segredo para o Google Keep funcionar como uma base de conhecimento profissional é o uso estratégico de marcadores (labels). No meu painel, divido os tópicos por domínios claros de atendimento e desenvolvimento: DEV - CLEITON EU USO IA: Onde cen...

Trabalhando com o Claude Code como um Dev Sênior: O poder dos prompts reais

Nos últimos meses, usei o Claude Code — o agente de IA da Anthropic que roda direto no terminal — como meu principal parceiro de engenharia. Não usei a ferramenta apenas para "gerar funções isoladas", mas para desenvolver, auditar e lançar dois projetos reais para o Grupo Tema Organização Contábil: um site institucional de alta performance e o CondoAssembleia (um sistema full-stack complexo de votação eletrônica utilizando Next.js, TypeScript e Supabase). A grande virada de chave foi perceber que a diferença entre pedir para a IA "fazer algo" e trabalhar com ela como um dev sênior ao seu lado está na estrutura e na disciplina dos seus prompts. Abaixo, compartilho as estratégias e os prompts reais que funcionaram nesses dois cenários. 🏗️ Cenário 1: O Site Institucional (Contexto de Negócio e UX) O site institucional é uma landing page one-page estática. Em vez de apenas pedir a estrutura técnica, o resultado mudou quando passei o contexto real do negócio: "É ...